Changeset 225572 in webkit


Ignore:
Timestamp:
Dec 6, 2017 12:51:47 AM (6 years ago)
Author:
webkit@devinrousso.com
Message:

Web Inspector: Styles Redesign: display related pseudo-elements
​https://bugs.webkit.org/show_bug.cgi?id=176187
<rdar://problem/34194917>

Reviewed by Timothy Hatcher.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:

(WI.SpreadsheetRulesStyleDetailsPanel):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.refresh):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.applyFilter):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype._handleSectionFilterApplied):

  • UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css:

(.spreadsheet-style-panel .section-header):
(.spreadsheet-style-panel .section-header .node-link):
(.spreadsheet-style-panel .section-header .node-link:hover):
(.spreadsheet-style-panel .section-inherited): Deleted.
(.spreadsheet-style-panel .section-inherited .node-link): Deleted.
(.spreadsheet-style-panel .section-inherited .node-link:hover): Deleted.
After all of the matched and inherited styles are added, loop over each pseudo-element, get
the DOMNodeStyles for each, refresh them if needed, and then add the header and sections.

  • UserInterface/Models/DOMNodeStyles.js:

(WI.DOMNodeStyles.prototype.refreshIfNeeded):
(WI.DOMNodeStyles.prototype.refresh):
Return a reference to the DOMNodeStyles object once the refresh promise is resolved.

  • UserInterface/Models/DOMNode.js:

(WI.DOMNode.prototype.get displayName):
If the node is a pseudo-element, display the pseudo-type instead of the node name.

Location:
trunk/Source/WebInspectorUI
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r225571 r225572  
     12017-12-06  Devin Rousso  <webkit@devinrousso.com>
     2
     3        Web Inspector: Styles Redesign: display related pseudo-elements
     4        https://bugs.webkit.org/show_bug.cgi?id=176187
     5        <rdar://problem/34194917>
     6
     7        Reviewed by Timothy Hatcher.
     8
     9        * Localizations/en.lproj/localizedStrings.js:
     10
     11        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
     12        (WI.SpreadsheetRulesStyleDetailsPanel):
     13        (WI.SpreadsheetRulesStyleDetailsPanel.prototype.refresh):
     14        (WI.SpreadsheetRulesStyleDetailsPanel.prototype.applyFilter):
     15        (WI.SpreadsheetRulesStyleDetailsPanel.prototype._handleSectionFilterApplied):
     16        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css:
     17        (.spreadsheet-style-panel .section-header):
     18        (.spreadsheet-style-panel .section-header .node-link):
     19        (.spreadsheet-style-panel .section-header .node-link:hover):
     20        (.spreadsheet-style-panel .section-inherited): Deleted.
     21        (.spreadsheet-style-panel .section-inherited .node-link): Deleted.
     22        (.spreadsheet-style-panel .section-inherited .node-link:hover): Deleted.
     23        After all of the matched and inherited styles are added, loop over each pseudo-element, get
     24        the DOMNodeStyles for each, refresh them if needed, and then add the header and sections.
     25
     26        * UserInterface/Models/DOMNodeStyles.js:
     27        (WI.DOMNodeStyles.prototype.refreshIfNeeded):
     28        (WI.DOMNodeStyles.prototype.refresh):
     29        Return a reference to the DOMNodeStyles object once the refresh promise is resolved.
     30
     31        * UserInterface/Models/DOMNode.js:
     32        (WI.DOMNode.prototype.get displayName):
     33        If the node is a pseudo-element, display the pseudo-type instead of the node name.
     34
    1352017-12-06  Devin Rousso  <webkit@devinrousso.com>
    236

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r225547 r225572  
    502502localizedStrings["Info: "] = "Info: ";
    503503localizedStrings["Infos"] = "Infos";
     504localizedStrings["Inherited From"] = "Inherited From";
    504505localizedStrings["Inherited From: "] = "Inherited From: ";
    505506localizedStrings["Inherited from %s"] = "Inherited from %s";
    … …  
    717718localizedStrings["Property"] = "Property";
    718719localizedStrings["Protocol"] = "Protocol";
     720localizedStrings["Pseudo Element"] = "Pseudo Element";
    719721localizedStrings["Query Parameters"] = "Query Parameters";
    720722localizedStrings["Query String"] = "Query String";

  • trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js

    r224648 r225572  
    637637    get displayName()
    638638    {
     639        if (this.isPseudoElement())
     640            return "::" + this._pseudoType;
    639641        return this.nodeNameInCorrectCase() + this.escapedIdSelector + this.escapedClassSelector;
    640642    }

  • trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js

    r223308 r225572  
    6464    refreshIfNeeded()
    6565    {
     66        if (this._pendingRefreshTask)
     67            return this._pendingRefreshTask;
    6668        if (!this._needsRefresh)
    67             return;
    68         this.refresh();
     69            return Promise.resolve(this);
     70        return this.refresh();
    6971    }
    7072
    … …  
    259261        .then(() => {
    260262            this._pendingRefreshTask = null;
     263            return this;
    261264        });
    262265

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

    r221662 r225572  
    103103}
    104104
    105 .spreadsheet-style-panel .section-inherited {
     105.spreadsheet-style-panel .section-header {
    106106    margin: 0;
    107107    padding: 4px 6px;
    … …  
    112112}
    113113
    114 .spreadsheet-style-panel .section-inherited .node-link {
     114.spreadsheet-style-panel .section-header .node-link {
    115115    color: inherit;
    116116}
    117117
    118 .spreadsheet-style-panel .section-inherited .node-link:hover {
     118.spreadsheet-style-panel .section-header .node-link:hover {
    119119    color: black;
    120120}

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

    r225571 r225572  
    3535        this.element.classList.add("spreadsheet-style-panel");
    3636
    37         this._inheritedHeaderMap = new Map;
     37        this._headerMap = new Map;
    3838        this._sections = [];
    3939        this._newRuleSelector = null;
    … …  
    5555            return;
    5656        }
     57
     58        this.removeAllSubviews();
     59
     60        let previousStyle = null;
     61        this._headerMap.clear();
     62        this._sections = [];
    5763
    5864        let uniqueOrderedStyles = (orderedStyles) => {
    … …  
    8086        };
    8187
    82         let createInheritedHeader = (style) => {
    83             let inheritedHeader = document.createElement("h2");
    84             inheritedHeader.classList.add("section-inherited");
    85             inheritedHeader.append(WI.UIString("Inherited From: "), WI.linkifyNodeReference(style.node, {
     88        let createHeader = (text, node) => {
     89            let header = this.element.appendChild(document.createElement("h2"));
     90            header.classList.add("section-header");
     91            header.append(text);
     92            header.append(" ", WI.linkifyNodeReference(node, {
    8693                maxLength: 100,
    8794                excludeRevealElement: true,
    8895            }));
    8996
    90             this._inheritedHeaderMap.set(style.node, inheritedHeader);
    91 
    92             return inheritedHeader;
     97            this._headerMap.set(node, header);
    9398        };
    9499
    95         this.removeAllSubviews();
    96 
    97         let orderedStyles = uniqueOrderedStyles(this.nodeStyles.orderedStyles);
    98         let previousStyle = null;
    99 
    100         this._inheritedHeaderMap.clear();
    101         this._sections = [];
    102 
    103         for (let style of orderedStyles) {
    104             if (style.inherited && (!previousStyle || previousStyle.node !== style.node))
    105                 this.element.append(createInheritedHeader(style));
    106 
    107             // FIXME: <https://webkit.org/b/176187> Display matching pseudo-styles
    108             // FIXME: <https://webkit.org/b/176289> Display at-rule section headers (@media, @keyframes, etc.)
    109 
     100        let createSection = (style) => {
    110101            let section = style[WI.SpreadsheetRulesStyleDetailsPanel.RuleSection];
    111102            if (!section) {
    … …  
    124115
    125116            previousStyle = style;
    126         }
     117        };
     118
     119        for (let style of uniqueOrderedStyles(this.nodeStyles.orderedStyles)) {
     120            if (style.inherited && (!previousStyle || previousStyle.node !== style.node))
     121                createHeader(WI.UIString("Inherited From"), style.node);
     122
     123            createSection(style);
     124        }
     125
     126        let pseudoElements = Array.from(this.nodeStyles.node.pseudoElements().values());
     127        Promise.all(pseudoElements.map((pseudoElement) => WI.cssStyleManager.stylesForNode(pseudoElement).refreshIfNeeded()))
     128        .then((pseudoNodeStyles) => {
     129            for (let pseudoNodeStyle of pseudoNodeStyles) {
     130                createHeader(WI.UIString("Pseudo Element"), pseudoNodeStyle.node);
     131
     132                for (let style of uniqueOrderedStyles(pseudoNodeStyle.orderedStyles))
     133                    createSection(style);
     134            }
     135        });
    127136
    128137        this._newRuleSelector = null;
    … …  
    231240            this.element.classList.add("filter-non-matching");
    232241
    233         for (let inheritedHeader of this._inheritedHeaderMap.values())
    234             inheritedHeader.classList.remove(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
     242        for (let header of this._headerMap.values())
     243            header.classList.remove(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
    235244
    236245        for (let section of this._sections)
    … …  
    253262        if (event.data.matches)
    254263            this.element.classList.remove("filter-non-matching");
    255         else if (event.target.style.inherited) {
    256             let inheritedHeader = this._inheritedHeaderMap.get(event.target.style.node);
    257             if (inheritedHeader)
    258                 inheritedHeader.classList.add(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
     264        else {
     265            let header = this._headerMap.get(event.target.style.node);
     266            if (header)
     267                header.classList.add(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
    259268        }
    260269    }
Note: See TracChangeset for help on using the changeset viewer.