Attachment 372957 Details for Bug 199166 – Patch

[patch] Patch

bug-199166-20190626154307.patch (text/plain), 8.70 KB, created by Devin Rousso on 2019-06-26 15:43:08 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2019-06-26 15:43:08 PDT

Size: 8.70 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 324e4e0bd4f8abf26d699c538cf52598311374bd..9457967be5c2b937adabb47d80be1a55f3b9c190 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,36 @@
>+2019-06-25  Devin Rousso  <drousso@apple.com>
>+
>+        Web Inspector: REGRESSION: Elements: the forced pseudo-class indicator isn't visible when hovering
>+        https://bugs.webkit.org/show_bug.cgi?id=199166
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Make the pseudo-class indicator into its own element instead of being a `::before`.
>+
>+        * UserInterface/Views/DOMTreeElement.js:
>+        (WI.DOMTreeElement):
>+        (WI.DOMTreeElement.prototype.updateSelectionArea):
>+        (WI.DOMTreeElement.prototype.updateTitle):
>+        (WI.DOMTreeElement.prototype._updatePseudoClassIndicator): Added.
>+        (WI.DOMTreeElement.prototype.get pseudoClassesEnabled): Deleted.
>+        (WI.DOMTreeElement.prototype._nodePseudoClassesDidChange): Deleted.
>+
>+        * UserInterface/Views/DOMTreeOutline.css:
>+        (.tree-outline.dom):
>+        (.tree-outline.dom li .pseudo-class-indicator): Added.
>+        (body[dir=ltr] .tree-outline.dom li .pseudo-class-indicator): Added.
>+        (body[dir=rtl] .tree-outline.dom li .pseudo-class-indicator): Added.
>+        (.tree-outline.dom:focus li.selected .pseudo-class-indicator): Added.
>+        (.tree-outline.dom li.pseudo-class-enabled > .selection-area::before): Deleted.
>+        (body[dir=ltr] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before): Deleted.
>+        (body[dir=rtl] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before): Deleted.
>+        (.tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection-area::before): Deleted.
>+
>+        * UserInterface/Views/FormattedValue.css:
>+        (.formatted-node > .tree-outline.dom):
>+        Adjust the indent of any `DOMTreeOutline` so there's more room for the pseudo-class
>+        indicator, such as in the Console.
>+
> 2019-06-25  Matt Baker  <mattbaker@apple.com>
> 
>         Web Inspector: Elements: show shadow DOM by default
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css
>index b213f457ae003f8a9975be10ad433243d130bac0..e249e43be60e90a8ccd0f406080c472a68b440a3 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css
>@@ -34,7 +34,7 @@
> .content-view.dom-tree.show-gutter .tree-outline.dom {
>     -webkit-padding-start: 20px;
> 
>-    --item-pseudo-class-enabled-selection-before-start: 17px;
>+    --item-pseudo-class-indicator-start: 17px;
> }
> 
> .content-view.dom-tree .tree-outline.dom li .status-image {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
>index 85298ed597d06f2385303d4f1c35ab7bf8d7a848..9b1b3b61caad291d5dd3a3759699c0bf00fb2761 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
>@@ -52,7 +52,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
>         this._recentlyModifiedAttributes = new Map;
>         this._closeTagTreeElement = null;
> 
>-        node.addEventListener(WI.DOMNode.Event.EnabledPseudoClassesChanged, this._nodePseudoClassesDidChange, this);
>+        node.addEventListener(WI.DOMNode.Event.EnabledPseudoClassesChanged, this._updatePseudoClassIndicator, this);
> 
>         this._ignoreSingleTextChild = false;
>         this._forceUpdateTitle = false;
>@@ -393,7 +393,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
> 
>         // If there's no reason to have a selection area, remove the DOM element.
>         let indicatesTreeOutlineState = this.treeOutline && (this.treeOutline.dragOverTreeElement === this || this.selected || this._animatingHighlight);
>-        if (!this.hovered && !this.pseudoClassesEnabled && !indicatesTreeOutlineState) {
>+        if (!this.hovered && !indicatesTreeOutlineState) {
>             if (this._selectionElement) {
>                 this._selectionElement.remove();
>                 this._selectionElement = null;
>@@ -1292,6 +1292,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
>         this._selectionElement = null;
>         this.updateSelectionArea();
>         this._highlightSearchResults();
>+        this._updatePseudoClassIndicator();
>         this._updateBreakpointStatus();
>     }
> 
>@@ -1840,24 +1841,29 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
>         element.classList.add("node-state-changed");
>     }
> 
>-    get pseudoClassesEnabled()
>-    {
>-        return !!this.representedObject.enabledPseudoClasses.length;
>-    }
>-
>     get isNodeHidden()
>     {
>         let classes = this.representedObject.getAttribute("class");
>         return classes && classes.includes(WI.DOMTreeElement.HideElementStyleSheetIdOrClassName);
>     }
> 
>-    _nodePseudoClassesDidChange(event)
>+    _updatePseudoClassIndicator()
>     {
>-        if (this._elementCloseTag)
>+        if (!this.listItemElement || this._elementCloseTag)
>             return;
> 
>-        this.updateSelectionArea();
>-        this.listItemElement.classList.toggle("pseudo-class-enabled", !!this.representedObject.enabledPseudoClasses.length);
>+        if (this.representedObject.enabledPseudoClasses.length) {
>+            if (!this._pseudoClassIndicatorElement) {
>+                this._pseudoClassIndicatorElement = document.createElement("div");
>+                this._pseudoClassIndicatorElement.classList.add("pseudo-class-indicator");
>+            }
>+            this.listItemElement.insertBefore(this._pseudoClassIndicatorElement, this.listItemElement.firstChild);
>+        } else {
>+            if (this._pseudoClassIndicatorElement) {
>+                this._pseudoClassIndicatorElement.remove();
>+                this._pseudoClassIndicatorElement = null;
>+            }
>+        }
>     }
> 
>     handleEvent(event)
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
>index a340188c95e4b26f97b83e343ec5be94237fa6de..053868376a68d765ebf8dbcc59342dcc499fb977 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
>@@ -38,7 +38,7 @@
>     background-color: transparent !important;
>     color: var(--text-color);
> 
>-    --item-pseudo-class-enabled-selection-before-start: 2px;
>+    --item-pseudo-class-indicator-start: 2px;
> 
>     --sublist-margin-start: 4px;
>     --sublist-padding-start: 1px;
>@@ -131,23 +131,27 @@ body[dir=rtl] .tree-outline.dom li:matches(.hovered, .selected) + ol.children.ex
>     -webkit-margin-end: var(--item-padding-end);
> }
> 
>-.tree-outline.dom li.pseudo-class-enabled > .selection-area::before {
>+.tree-outline.dom li .pseudo-class-indicator {
>     display: inline-block;
>     position: absolute;
>-    top: 4px;
>     width: 5px;
>     height: 5px;
>+    margin-top: 4px;
>     content: "";
>     background-color: var(--glyph-color-active);
>     border-radius: 50%;
> }
> 
>-body[dir=ltr] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before {
>-    left: var(--item-pseudo-class-enabled-selection-before-start);
>+body[dir=ltr] .tree-outline.dom li .pseudo-class-indicator {
>+    left: var(--item-pseudo-class-indicator-start);
> }
> 
>-body[dir=rtl] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before {
>-    right: var(--item-pseudo-class-enabled-selection-before-start);
>+body[dir=rtl] .tree-outline.dom li .pseudo-class-indicator {
>+    right: var(--item-pseudo-class-indicator-start);
>+}
>+
>+.tree-outline.dom:focus li.selected .pseudo-class-indicator {
>+    background-color: var(--selected-foreground-color);
> }
> 
> .tree-outline.dom.single-node li {
>@@ -158,10 +162,6 @@ body[dir=rtl] .tree-outline.dom li.pseudo-class-enabled > .selection-area::befor
>     color: white;
> }
> 
>-.tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection-area::before {
>-    background-color: hsl(0, 100%, 100%);
>-}
>-
> .tree-outline.dom:focus li.selected * {
>     color: inherit;
> }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
>index dd0272d9e2b2321f68992f8071317699e1d0efdc..ff207a23037af9ff3df83ea72ca0bdb946e20621 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
>@@ -65,7 +65,8 @@
> .formatted-node > .tree-outline.dom {
>     display: block !important;
>     padding: 0;
>-    margin-left: -2px;
>+
>+    --item-pseudo-class-indicator-start: -2px;
> }
> 
> .formatted-node > .tree-outline.dom li {

Actions: View | Formatted Diff | Diff

Attachments on bug 199166: 372774 | 372842 | 372872 | 372957