Web Inspector: Add visual indicator for shadow content in DOM tree
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 1 Sep 2016 22:11:01 +0000 (22:11 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 1 Sep 2016 22:11:01 +0000 (22:11 +0000)
https://bugs.webkit.org/show_bug.cgi?id=160874

Patch by Devin Rousso <dcrousso+webkit@gmail.com> 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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@205322 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css

index 1e86b48..7fdb3ff 100644 (file)
@@ -1,3 +1,23 @@
+2016-09-01  Devin Rousso  <dcrousso+webkit@gmail.com>
+
+        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  <mattbaker@apple.com>
 
         Web Inspector: Value checks of secondsPerPixel cause errors
index 4a9f336..ac26d63 100644 (file)
@@ -1206,8 +1206,6 @@ WebInspector.DOMTreeElement = class DOMTreeElement extends WebInspector.TreeElem
         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 @@ WebInspector.DOMTreeElement = class DOMTreeElement extends WebInspector.TreeElem
                 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:
index d537a12..6875255 100644 (file)
@@ -26,9 +26,9 @@
 .tree-outline.dom {
     position: relative;
 
-    padding: 0 6px;
-    margin: 0;
     min-width: 100%;
+    margin: 0;
+    padding: 0;
 
     outline: none;
 
 }
 
 .tree-outline.dom li {
-    padding: 0 0 0 17px;
+    padding: 0 6px 0 17px;
     word-wrap: break-word;
 }
 
     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);