Title: [201454] trunk/Source/WebInspectorUI
- Revision
- 201454
- Author
- [email protected]
- Date
- 2016-05-27 11:33:58 -0700 (Fri, 27 May 2016)
Log 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 <[email protected]> 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):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (201453 => 201454)
--- trunk/Source/WebInspectorUI/ChangeLog 2016-05-27 17:09:14 UTC (rev 201453)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-05-27 18:33:58 UTC (rev 201454)
@@ -1,3 +1,22 @@
+2016-05-27 Devin Rousso <[email protected]>
+
+ 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 <[email protected]>
Uncaught Exception: TypeError: undefined is not an object (evaluating 'records[endIndex].endTime')
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css (201453 => 201454)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2016-05-27 17:09:14 UTC (rev 201453)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2016-05-27 18:33:58 UTC (rev 201454)
@@ -48,7 +48,7 @@
left: 0;
right: 0;
height: 15px;
- z-index: -1;
+ z-index: 10;
}
.tree-outline.dom li.selected .selection {
@@ -64,6 +64,11 @@
background-color: hsl(209, 100%, 49%);
}
+.tree-outline.dom li > span {
+ position: relative;
+ z-index: 20;
+}
+
.tree-outline.dom li.selected > span::after {
content: " = $0";
color: var(--console-secondary-text-color);
@@ -77,7 +82,7 @@
.tree-outline.dom ol {
list-style-type: none;
- padding-left: 1.2em;
+ padding-left: 14px;
margin: 0;
}
@@ -89,6 +94,16 @@
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%);
+}
+
.tree-outline.dom li {
padding: 0 0 0 17px;
word-wrap: break-word;
@@ -131,6 +146,9 @@
}
.tree-outline.dom li.parent::before {
+ position: relative;
+ z-index: 20;
+
float: left;
content: "";
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
