[webkit-changes] [205322] trunk/Source/WebInspectorUI

Thu, 01 Sep 2016 15:11:01 -0700

Title: [205322] trunk/Source/WebInspectorUI
Revision
205322
Author
[email protected]
Date
2016-09-01 15:11:01 -0700 (Thu, 01 Sep 2016)

Log Message

Web Inspector: Add visual indicator for shadow content in DOM tree
https://bugs.webkit.org/show_bug.cgi?id=160874

Patch by Devin Rousso <[email protected]> on 2016-09-01
Reviewed by Brian Burg.

* UserInterface/Views/DOMTreeElement.js:
(WebInspector.DOMTreeElement.prototype._nodeTitleInfo):
(WebInspector.DOMTreeElement.prototype._buildTagDOM):
Moved "shadow" class to parent element to allow easier styling.

* UserInterface/Views/DOMTreeOutline.css:
(.tree-outline.dom):
(.tree-outline.dom li):
(.tree-outline.dom .shadow):
(.tree-outline.dom li.parent.shadow::after):
(.tree-outline.dom li.parent.shadow + ol.children.expanded):
(.tree-outline.dom .html-fragment.shadow): Deleted.

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (205321 => 205322)


--- trunk/Source/WebInspectorUI/ChangeLog	2016-09-01 22:08:22 UTC (rev 205321)
+++ trunk/Source/WebInspectorUI/ChangeLog	2016-09-01 22:11:01 UTC (rev 205322)
@@ -1,3 +1,23 @@
+2016-09-01  Devin Rousso  <[email protected]>
+
+        Web Inspector: Add visual indicator for shadow content in DOM tree
+        https://bugs.webkit.org/show_bug.cgi?id=160874
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Views/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype._nodeTitleInfo):
+        (WebInspector.DOMTreeElement.prototype._buildTagDOM):
+        Moved "shadow" class to parent element to allow easier styling.
+
+        * UserInterface/Views/DOMTreeOutline.css:
+        (.tree-outline.dom):
+        (.tree-outline.dom li):
+        (.tree-outline.dom .shadow):
+        (.tree-outline.dom li.parent.shadow::after):
+        (.tree-outline.dom li.parent.shadow + ol.children.expanded):
+        (.tree-outline.dom .html-fragment.shadow): Deleted.
+
 2016-09-01  Matt Baker  <[email protected]>
 
         Web Inspector: Value checks of secondsPerPixel cause errors

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js (205321 => 205322)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js	2016-09-01 22:08:22 UTC (rev 205321)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js	2016-09-01 22:11:01 UTC (rev 205322)
@@ -1206,8 +1206,6 @@
         var classes = [ "html-tag" ];
         if (isClosingTag && isDistinctTreeElement)
             classes.push("close");
-        if (node.isInShadowTree())
-            classes.push("shadow");
         var tagElement = parentElement.createChild("span", classes.join(" "));
         tagElement.append("<");
         var tagNameElement = tagElement.createChild("span", isClosingTag ? "" : "html-tag-name");
@@ -1241,11 +1239,14 @@
                 var fragmentElement = info.titleDOM.createChild("span", "html-fragment");
                 if (node.shadowRootType()) {
                     fragmentElement.textContent = WebInspector.UIString("Shadow Content (%s)").format(WebInspector.DOMTreeElement.shadowRootTypeDisplayName(node.shadowRootType()));
-                    fragmentElement.classList.add("shadow");
-                } else if (node.parentNode && node.parentNode.templateContent() === node)
+                    this._listItemNode.classList.add("shadow");
+                } else if (node.parentNode && node.parentNode.templateContent() === node) {
                     fragmentElement.textContent = WebInspector.UIString("Template Content");
-                else
+                    this._listItemNode.classList.add("template");
+                } else {
                     fragmentElement.textContent = WebInspector.UIString("Document Fragment");
+                    this._listItemNode.classList.add("fragment");
+                }
                 break;
 
             case Node.ATTRIBUTE_NODE:

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css (205321 => 205322)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css	2016-09-01 22:08:22 UTC (rev 205321)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css	2016-09-01 22:11:01 UTC (rev 205322)
@@ -26,9 +26,9 @@
 .tree-outline.dom {
     position: relative;
 
-    padding: 0 6px;
+    min-width: 100%;
     margin: 0;
-    min-width: 100%;
+    padding: 0;
 
     outline: none;
 
@@ -100,7 +100,7 @@
 }
 
 .tree-outline.dom li {
-    padding: 0 0 0 17px;
+    padding: 0 6px 0 17px;
     word-wrap: break-word;
 }
 
@@ -181,10 +181,26 @@
     color: hsl(0, 59%, 41%);
 }
 
-.tree-outline.dom .html-fragment.shadow {
+.tree-outline.dom .shadow {
     color: gray;
 }
 
+/* Cannot apply styling directly to the parent element since it has a disclosure triangle. */
+.tree-outline.dom li.parent.shadow::after {
+    display: block;
+    /* Adds padding to the right edge. */
+    width: calc(100% + 8px);
+    height: 1.2em;
+    margin-top: -13px;
+    margin-left: -2px;
+    content: "";
+    background-color: hsla(0, 0%, 90%, 0.5);
+}
+
+.tree-outline.dom li.parent.shadow + ol.children.expanded {
+    background-color: hsla(0, 0%, 90%, 0.5);
+}
+
 .showing-find-banner .tree-outline.dom .search-highlight {
     color: black;
     background-color: hsla(53, 83%, 53%, 0.2);

_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to