Changeset 201454 in webkit

Timestamp:

May 27, 2016 11:33:58 AM (8 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: Add indicators to show nesting levels inside DOM Tree
​https://bugs.webkit.org/show_bug.cgi?id=157468
<rdar://problem/26162640>

Patch by Devin Rousso <Devin Rousso> on 2016-05-27
Reviewed by Timothy Hatcher.

Add CSS rules to give all expanded node children lists a small line on the
left border indicating that all items under the line are descendants.

• UserInterface/Views/DOMTreeOutline.css:

(.tree-outline.dom li .selection):
(.tree-outline.dom li > span):
(.tree-outline.dom ol):
(.tree-outline.dom .tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded):
(.tree-outline.dom li.selected + ol.children.expanded):
(.tree-outline.dom li.parent::before):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/DOMTreeOutline.css (modified) (5 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2016-05-27  Devin Rousso  <dcrousso+webkit@gmail.com>
+
+        Web Inspector: Add indicators to show nesting levels inside DOM Tree
+        https://bugs.webkit.org/show_bug.cgi?id=157468
+        <rdar://problem/26162640>
+
+        Reviewed by Timothy Hatcher.
+
+        Add CSS rules to give all expanded node children lists a small line on the
+        left border indicating that all items under the line are descendants.
+
+        * UserInterface/Views/DOMTreeOutline.css:
+        (.tree-outline.dom li .selection):
+        (.tree-outline.dom li > span):
+        (.tree-outline.dom ol):
+        (.tree-outline.dom .tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded):
+        (.tree-outline.dom li.selected + ol.children.expanded):
+        (.tree-outline.dom li.parent::before):
+
 2016-05-26  Matt Baker  <mattbaker@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css

@@ -49 +49 @@
     right: 0;
     height: 15px;
-    z-index: -1;
+    z-index: 10;
 }
 
@@ -63 +63 @@
 .tree-outline.dom:focus li.selected .selection {
     background-color: hsl(209, 100%, 49%);
+}
+
+.tree-outline.dom li > span {
+    position: relative;
+    z-index: 20;
 }
 
@@ -78 +83 @@
 .tree-outline.dom ol {
     list-style-type: none;
-    padding-left: 1.2em;
+    padding-left: 14px;
     margin: 0;
 }
@@ -88 +93 @@
 .tree-outline.dom ol.children.expanded {
     display: block;
+}
+
+.tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
+    margin-left: 4px;
+    padding-left: 1px;
+    border-left: 9px solid hsla(0, 0%, 83%, 0.5);
+}
+
+.tree-outline.dom li.selected + ol.children.expanded {
+    border-left-color: hsl(0, 0%, 83%);
 }
 
@@ -132 +147 @@
 
 .tree-outline.dom li.parent::before {
+    position: relative;
+    z-index: 20;
+
     float: left;