Changeset 194723 in webkit

Timestamp:

Jan 7, 2016 2:11:33 PM (8 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: Add indicator that element has pseudo-class in DOM tree
​https://bugs.webkit.org/show_bug.cgi?id=152680

Patch by Devin Rousso <Devin Rousso> on 2016-01-07
Reviewed by Timothy Hatcher.

• UserInterface/Views/DOMTreeElement.js:

(WebInspector.DOMTreeElement):
(WebInspector.DOMTreeElement.prototype._nodePseudoClassesDidChange):
Added an event listener to the node for when pseudo-classes change.

• UserInterface/Views/DOMTreeOutline.css:

(.dom-tree-outline li.pseudo-class-enabled > .selection::before):
(.dom-tree-outline:focus li.selected.pseudo-class-enabled > .selection::before):
Used the hover/selected background style element to ensure that the indicator
is always positioned evenly with the first line of the opening tag.

(.dom-tree-outline li.hovered:not(.selected) .selection):
(.dom-tree-outline li .selection):
(.dom-tree-outline li.selected .selection):
(.dom-tree-outline li.elements-drag-over .selection):
Removed "display: none;" (as well as the "block" declarations) to allow
the ::before pseudo-element to display.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/DOMTreeElement.js (modified) (2 diffs)
• UserInterface/Views/DOMTreeOutline.css (modified) (4 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2016-01-07  Devin Rousso  <dcrousso+webkit@gmail.com>
+
+        Web Inspector: Add indicator that element has pseudo-class in DOM tree
+        https://bugs.webkit.org/show_bug.cgi?id=152680
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement):
+        (WebInspector.DOMTreeElement.prototype._nodePseudoClassesDidChange):
+        Added an event listener to the node for when pseudo-classes change.
+
+        * UserInterface/Views/DOMTreeOutline.css:
+        (.dom-tree-outline li.pseudo-class-enabled > .selection::before):
+        (.dom-tree-outline:focus li.selected.pseudo-class-enabled > .selection::before):
+        Used the hover/selected background style element to ensure that the indicator
+        is always positioned evenly with the first line of the opening tag.
+
+        (.dom-tree-outline li.hovered:not(.selected) .selection):
+        (.dom-tree-outline li .selection):
+        (.dom-tree-outline li.selected .selection):
+        (.dom-tree-outline li.elements-drag-over .selection):
+        Removed "display: none;" (as well as the "block" declarations) to allow
+        the ::before pseudo-element to display.
+
 2016-01-07  Devin Rousso  <dcrousso+webkit@gmail.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js

@@ -45 +45 @@
         this._nodeStateChanges = [];
         this._boundNodeChangedAnimationEnd = this._nodeChangedAnimationEnd.bind(this);
+
+        node.addEventListener(WebInspector.DOMNode.Event.EnabledPseudoClassesChanged, this._nodePseudoClassesDidChange, this);
     }
 
@@ -1524 +1526 @@
     }
 
+    _nodePseudoClassesDidChange(event)
+    {
+        if (this._elementCloseTag)
+            return;
+
+        this._listItemNode.classList.toggle("pseudo-class-enabled", !!this.representedObject.enabledPseudoClasses.length);
+    }
+
     _fireDidChange()
     {

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

@@ -41 +41 @@
 
 .dom-tree-outline li.hovered:not(.selected) .selection {
-    display: block;
     background-color: hsla(209, 100%, 49%, 0.1);
 }
 
 .dom-tree-outline li .selection {
-    display: none;
     position: absolute;
     left: 0;
@@ -55 +53 @@
 
 .dom-tree-outline li.selected .selection {
-    display: block;
     background-color: hsl(0, 0%, 83%);
 }
 
 .dom-tree-outline li.elements-drag-over .selection {
-    display: block;
     margin-top: -2px;
     border-top: 2px solid hsl(209, 100%, 49%);
@@ -99 +95 @@
 }
 
+.dom-tree-outline li.pseudo-class-enabled > .selection::before {
+    display: inline-block;
+    position: absolute;
+    top: 4px;
+    left: 2px;
+    width: 5px;
+    height: 5px;
+    content: "";
+    background-color: hsl(212, 92%, 54%);
+    border-radius: 50%;
+}
+
 .dom-tree-outline.single-node li {
     padding-left: 2px;
@@ -105 +113 @@
 .dom-tree-outline:focus li.selected {
     color: white;
+}
+
+.dom-tree-outline:focus li.selected.pseudo-class-enabled > .selection::before {
+    background-color: hsl(0, 100%, 100%);
 }