Changeset 246855 in webkit


Ignore:
Timestamp:
Jun 26, 2019 4:25:18 PM (5 years ago)
Author:
Devin Rousso
Message:

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 Matt Baker.

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.

Location:
trunk/Source/WebInspectorUI
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r246821 r246855  
     12019-06-26  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: REGRESSION: Elements: the forced pseudo-class indicator isn't visible when hovering
     4        https://bugs.webkit.org/show_bug.cgi?id=199166
     5
     6        Reviewed by Matt Baker.
     7
     8        Make the pseudo-class indicator into its own element instead of being a `::before`.
     9
     10        * UserInterface/Views/DOMTreeElement.js:
     11        (WI.DOMTreeElement):
     12        (WI.DOMTreeElement.prototype.updateSelectionArea):
     13        (WI.DOMTreeElement.prototype.updateTitle):
     14        (WI.DOMTreeElement.prototype._updatePseudoClassIndicator): Added.
     15        (WI.DOMTreeElement.prototype.get pseudoClassesEnabled): Deleted.
     16        (WI.DOMTreeElement.prototype._nodePseudoClassesDidChange): Deleted.
     17
     18        * UserInterface/Views/DOMTreeOutline.css:
     19        (.tree-outline.dom):
     20        (.tree-outline.dom li .pseudo-class-indicator): Added.
     21        (body[dir=ltr] .tree-outline.dom li .pseudo-class-indicator): Added.
     22        (body[dir=rtl] .tree-outline.dom li .pseudo-class-indicator): Added.
     23        (.tree-outline.dom:focus li.selected .pseudo-class-indicator): Added.
     24        (.tree-outline.dom li.pseudo-class-enabled > .selection-area::before): Deleted.
     25        (body[dir=ltr] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before): Deleted.
     26        (body[dir=rtl] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before): Deleted.
     27        (.tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection-area::before): Deleted.
     28
     29        * UserInterface/Views/FormattedValue.css:
     30        (.formatted-node > .tree-outline.dom):
     31        Adjust the indent of any `DOMTreeOutline` so there's more room for the pseudo-class
     32        indicator, such as in the Console.
     33
    1342019-06-25  Matt Baker  <mattbaker@apple.com>
    235

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css

    r243781 r246855  
    3535    -webkit-padding-start: 20px;
    3636
    37     --item-pseudo-class-enabled-selection-before-start: 17px;
     37    --item-pseudo-class-indicator-start: 17px;
    3838}
    3939

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

    r246658 r246855  
    5353        this._closeTagTreeElement = null;
    5454
    55         node.addEventListener(WI.DOMNode.Event.EnabledPseudoClassesChanged, this._nodePseudoClassesDidChange, this);
     55        node.addEventListener(WI.DOMNode.Event.EnabledPseudoClassesChanged, this._updatePseudoClassIndicator, this);
    5656
    5757        this._ignoreSingleTextChild = false;
    … …  
    394394        // If there's no reason to have a selection area, remove the DOM element.
    395395        let indicatesTreeOutlineState = this.treeOutline && (this.treeOutline.dragOverTreeElement === this || this.selected || this._animatingHighlight);
    396         if (!this.hovered && !this.pseudoClassesEnabled && !indicatesTreeOutlineState) {
     396        if (!this.hovered && !indicatesTreeOutlineState) {
    397397            if (this._selectionElement) {
    398398                this._selectionElement.remove();
    … …  
    12931293        this.updateSelectionArea();
    12941294        this._highlightSearchResults();
     1295        this._updatePseudoClassIndicator();
    12951296        this._updateBreakpointStatus();
    12961297    }
    … …  
    18411842    }
    18421843
    1843     get pseudoClassesEnabled()
    1844     {
    1845         return !!this.representedObject.enabledPseudoClasses.length;
    1846     }
    1847 
    18481844    get isNodeHidden()
    18491845    {
    … …  
    18521848    }
    18531849
    1854     _nodePseudoClassesDidChange(event)
    1855     {
    1856         if (this._elementCloseTag)
    1857             return;
    1858 
    1859         this.updateSelectionArea();
    1860         this.listItemElement.classList.toggle("pseudo-class-enabled", !!this.representedObject.enabledPseudoClasses.length);
     1850    _updatePseudoClassIndicator()
     1851    {
     1852        if (!this.listItemElement || this._elementCloseTag)
     1853            return;
     1854
     1855        if (this.representedObject.enabledPseudoClasses.length) {
     1856            if (!this._pseudoClassIndicatorElement) {
     1857                this._pseudoClassIndicatorElement = document.createElement("div");
     1858                this._pseudoClassIndicatorElement.classList.add("pseudo-class-indicator");
     1859            }
     1860            this.listItemElement.insertBefore(this._pseudoClassIndicatorElement, this.listItemElement.firstChild);
     1861        } else {
     1862            if (this._pseudoClassIndicatorElement) {
     1863                this._pseudoClassIndicatorElement.remove();
     1864                this._pseudoClassIndicatorElement = null;
     1865            }
     1866        }
    18611867    }
    18621868

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

    r245497 r246855  
    3939    color: var(--text-color);
    4040
    41     --item-pseudo-class-enabled-selection-before-start: 2px;
     41    --item-pseudo-class-indicator-start: 2px;
    4242
    4343    --sublist-margin-start: 4px;
    … …  
    132132}
    133133
    134 .tree-outline.dom li.pseudo-class-enabled > .selection-area::before {
     134.tree-outline.dom li .pseudo-class-indicator {
    135135    display: inline-block;
    136136    position: absolute;
    137     top: 4px;
    138137    width: 5px;
    139138    height: 5px;
     139    margin-top: 4px;
    140140    content: "";
    141141    background-color: var(--glyph-color-active);
    … …  
    143143}
    144144
    145 body[dir=ltr] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before {
    146     left: var(--item-pseudo-class-enabled-selection-before-start);
    147 }
    148 
    149 body[dir=rtl] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before {
    150     right: var(--item-pseudo-class-enabled-selection-before-start);
     145body[dir=ltr] .tree-outline.dom li .pseudo-class-indicator {
     146    left: var(--item-pseudo-class-indicator-start);
     147}
     148
     149body[dir=rtl] .tree-outline.dom li .pseudo-class-indicator {
     150    right: var(--item-pseudo-class-indicator-start);
     151}
     152
     153.tree-outline.dom:focus li.selected .pseudo-class-indicator {
     154    background-color: var(--selected-foreground-color);
    151155}
    152156
    … …  
    157161.tree-outline.dom:focus li.selected {
    158162    color: white;
    159 }
    160 
    161 .tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection-area::before {
    162     background-color: hsl(0, 100%, 100%);
    163163}
    164164

  • trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css

    r244327 r246855  
    6666    display: block !important;
    6767    padding: 0;
    68     margin-left: -2px;
     68
     69    --item-pseudo-class-indicator-start: -2px;
    6970}
    7071
Note: See TracChangeset for help on using the changeset viewer.