Changeset 225569 in webkit


Ignore:
Timestamp:
Dec 5, 2017 11:54:42 PM (6 years ago)
Author:
webkit@devinrousso.com
Message:

Web Inspector: [PARITY] Styles Redesign: Make filtering work
​https://bugs.webkit.org/show_bug.cgi?id=178331
<rdar://problem/35001015>

Reviewed by Timothy Hatcher.

Since both the sections and editors (per-section) use View semantics, we cannot simply
search for instances of the filtered text since not all of the subviews may have called
layout() yet. Instead, we have to rely on event listeners to relay information as to whether
the filtered text was matched up the chain, applying the correct style classes along the way.

  • UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:

(WI.SpreadsheetRulesStyleDetailsPanel):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.refresh):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.applyFilter):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.filterDidChange):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype._handleSectionFilterApplied):
Save the "Inherited From" elements so that they can be hidden if no styles inherited from
that node match the filter.

  • UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:

(WI.SpreadsheetCSSStyleDeclarationSection):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.layout):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.applyFilter):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._renderSelector):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._createMediaHeader):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._handleEditorFilterApplied):
Save the media header elements so that they can also be filtered.

  • UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:

(WI.SpreadsheetCSSStyleDeclarationEditor):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.applyFilter):

  • UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty):
(WI.SpreadsheetStyleProperty.prototype.applyFilter):
(WI.SpreadsheetStyleProperty.prototype._update):
Move the name and value elements to a new container so that filter highlight won't also
apply to the checkbox or warning element.

Location:
trunk/Source/WebInspectorUI
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r225568 r225569  
     12017-12-05  Devin Rousso  <webkit@devinrousso.com>
     2
     3        Web Inspector: [PARITY] Styles Redesign: Make filtering work
     4        https://bugs.webkit.org/show_bug.cgi?id=178331
     5        <rdar://problem/35001015>
     6
     7        Reviewed by Timothy Hatcher.
     8
     9        Since both the sections and editors (per-section) use View semantics, we cannot simply
     10        search for instances of the filtered text since not all of the subviews may have called
     11        layout() yet. Instead, we have to rely on event listeners to relay information as to whether
     12        the filtered text was matched up the chain, applying the correct style classes along the way.
     13
     14        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
     15        (WI.SpreadsheetRulesStyleDetailsPanel):
     16        (WI.SpreadsheetRulesStyleDetailsPanel.prototype.refresh):
     17        (WI.SpreadsheetRulesStyleDetailsPanel.prototype.applyFilter):
     18        (WI.SpreadsheetRulesStyleDetailsPanel.prototype.filterDidChange):
     19        (WI.SpreadsheetRulesStyleDetailsPanel.prototype._handleSectionFilterApplied):
     20        Save the "Inherited From" elements so that they can be hidden if no styles inherited from
     21        that node match the filter.
     22
     23        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
     24        (WI.SpreadsheetCSSStyleDeclarationSection):
     25        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
     26        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.layout):
     27        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.applyFilter):
     28        (WI.SpreadsheetCSSStyleDeclarationSection.prototype._renderSelector):
     29        (WI.SpreadsheetCSSStyleDeclarationSection.prototype._createMediaHeader):
     30        (WI.SpreadsheetCSSStyleDeclarationSection.prototype._handleEditorFilterApplied):
     31        Save the media header elements so that they can also be filtered.
     32
     33        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
     34        (WI.SpreadsheetCSSStyleDeclarationEditor):
     35        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
     36        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.applyFilter):
     37
     38        * UserInterface/Views/SpreadsheetStyleProperty.js:
     39        (WI.SpreadsheetStyleProperty):
     40        (WI.SpreadsheetStyleProperty.prototype.applyFilter):
     41        (WI.SpreadsheetStyleProperty.prototype._update):
     42        Move the name and value elements to a new container so that filter highlight won't also
     43        apply to the checkbox or warning element.
     44
    1452017-12-05  Nikita Vasilyev  <nvasilyev@apple.com>
    246

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

    r224523 r225569  
    3636        this._propertyViews = [];
    3737        this._propertyPendingStartEditing = null;
     38        this._filterText = null;
    3839    }
    3940
    … …  
    6768            this._propertyPendingStartEditing = null;
    6869        }
     70
     71        if (this._filterText)
     72            this.applyFilter(this._filterText);
    6973    }
    7074
    … …  
    223227    }
    224228
     229    applyFilter(filterText)
     230    {
     231        this._filterText = filterText;
     232
     233        if (!this.didInitialLayout)
     234            return;
     235
     236        let matches = false;
     237        for (let propertyView of this._propertyViews) {
     238            if (propertyView.applyFilter(this._filterText))
     239                matches = true;
     240        }
     241
     242        this.dispatchEventToListeners(WI.SpreadsheetCSSStyleDeclarationEditor.Event.FilterApplied, {matches});
     243    }
     244
    225245    // Private
    226246
    … …  
    243263};
    244264
     265WI.SpreadsheetCSSStyleDeclarationEditor.Event = {
     266    FilterApplied: "spreadsheet-css-style-declaration-editor-filter-applied",
     267};
     268
    245269WI.SpreadsheetCSSStyleDeclarationEditor.StyleClassName = "spreadsheet-style-declaration-editor";

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

    r224768 r225569  
    3838        this._propertiesEditor = null;
    3939        this._selectorElements = [];
     40        this._mediaElements = [];
     41        this._filterText = null;
    4042        this._wasFocused = false;
    4143    }
    … …  
    8385        this._propertiesEditor = new WI.SpreadsheetCSSStyleDeclarationEditor(this, this._style);
    8486        this._propertiesEditor.element.classList.add("properties");
     87        this._propertiesEditor.addEventListener(WI.SpreadsheetCSSStyleDeclarationEditor.Event.FilterApplied, this._handleEditorFilterApplied, this);
    8588
    8689        this._closeBrace = document.createElement("span");
    … …  
    175178        else if (!toPreviousRule && typeof this._delegate.cssStyleDeclarationSectionStartEditingNextRule === "function")
    176179            this._delegate.cssStyleDeclarationSectionStartEditingNextRule(this);
     180    }
     181
     182    applyFilter(filterText)
     183    {
     184        this._filterText = filterText;
     185
     186        if (!this.didInitialLayout)
     187            return;
     188
     189        this._element.classList.remove(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
     190
     191        this._propertiesEditor.applyFilter(this._filterText);
    177192    }
    178193
    … …  
    258273            break;
    259274        }
     275
     276        if (this._filterText)
     277            this.applyFilter(this._filterText);
    260278    }
    261279
    … …  
    327345    _createMediaHeader()
    328346    {
    329         if (!this._style.ownerRule)
    330             return "";
    331 
    332         console.assert(Array.isArray(this._style.ownerRule.mediaList));
    333 
    334         let mediaList = this._style.ownerRule.mediaList;
    335         let mediaText = mediaList.map((media) => media.text).join(", ");
    336         if (!mediaText || mediaText === "all" || mediaText === "screen")
     347        let mediaList = this._style.mediaList;
     348        if (!mediaList.length || (mediaList.length === 1 && (mediaList[0].text === "all" || mediaList[0].text === "screen")))
    337349            return "";
    338350
    … …  
    342354        let mediaLabel = mediaElement.appendChild(document.createElement("div"));
    343355        mediaLabel.className = "media-label";
    344         mediaLabel.append("@media ", mediaText);
    345         mediaElement.append(mediaLabel);
     356        mediaLabel.append("@media ");
     357
     358        this._mediaElements = mediaList.map((media, i) => {
     359            if (i)
     360                mediaLabel.append(", ");
     361
     362            let span = mediaLabel.appendChild(document.createElement("span"));
     363            span.textContent = media.text;
     364            return span;
     365        });
    346366
    347367        return mediaElement;
    … …  
    392412        WI.domTreeManager.hideDOMNodeHighlight();
    393413    }
     414
     415    _handleEditorFilterApplied(event)
     416    {
     417        let matchesMedia = false;
     418        for (let mediaElement of this._mediaElements) {
     419            mediaElement.classList.remove(WI.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName);
     420
     421            if (mediaElement.textContent.includes(this._filterText)) {
     422                mediaElement.classList.add(WI.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName);
     423                matchesMedia = true;
     424            }
     425        }
     426
     427        let matchesSelector = false;
     428        for (let selectorElement of this._selectorElements) {
     429            selectorElement.classList.remove(WI.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName);
     430
     431            if (selectorElement.textContent.includes(this._filterText)) {
     432                selectorElement.classList.add(WI.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName);
     433                matchesSelector = true;
     434            }
     435        }
     436
     437        let matches = event.data.matches || matchesMedia || matchesSelector;
     438        if (!matches)
     439            this._element.classList.add(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
     440
     441        this.dispatchEventToListeners(WI.SpreadsheetCSSStyleDeclarationSection.Event.FilterApplied, {matches});
     442    }
    394443};
    395444
     445WI.SpreadsheetCSSStyleDeclarationSection.Event = {
     446    FilterApplied: "spreadsheet-css-style-declaration-section-filter-applied",
     447};
     448
    396449WI.SpreadsheetCSSStyleDeclarationSection.MatchedSelectorElementStyleClassName = "matched";

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

    r225487 r225569  
    3535        this.element.classList.add("spreadsheet-style-panel");
    3636
     37        this._inheritedHeaderMap = new Map;
    3738        this._sections = [];
    3839        this._inspectorSection = null;
    … …  
    4041        this._ruleMediaAndInherticanceList = [];
    4142        this._propertyToSelectAndHighlight = null;
     43        this._filterText = null;
    4244
    4345        this._emptyFilterResultsElement = WI.createMessageTextView(WI.UIString("No Results Found"));
    … …  
    8789            }));
    8890
     91            this._inheritedHeaderMap.set(style.node, inheritedHeader);
     92
    8993            return inheritedHeader;
    9094        };
    … …  
    9599        let previousStyle = null;
    96100
     101        this._inheritedHeaderMap.clear();
    97102        this._sections = [];
    98103
    … …  
    110115            }
    111116
     117            section.addEventListener(WI.SpreadsheetCSSStyleDeclarationSection.Event.FilterApplied, this._handleSectionFilterApplied, this);
     118
    112119            if (this._isInspectorSectionPendingFocus && style.isInspectorRule())
    113120                this._inspectorSection = section;
    … …  
    121128
    122129        this.element.append(this._emptyFilterResultsElement);
     130
     131        if (this._filterText)
     132            this.applyFilter(this._filterText);
    123133
    124134        super.refresh(significantChange);
    … …  
    172182        }
    173183    }
     184
     185    applyFilter(filterText)
     186    {
     187        this._filterText = filterText;
     188
     189        if (!this.didInitialLayout)
     190            return;
     191
     192        if (this._filterText)
     193            this.element.classList.add("filter-non-matching");
     194
     195        for (let inheritedHeader of this._inheritedHeaderMap.values())
     196            inheritedHeader.classList.remove(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
     197
     198        for (let section of this._sections)
     199            section.applyFilter(this._filterText);
     200    }
     201
     202    // Protected
     203
     204    filterDidChange(filterBar)
     205    {
     206        super.filterDidChange(filterBar);
     207
     208        this.applyFilter(filterBar.filters.text);
     209    }
     210
     211    // Private
     212
     213    _handleSectionFilterApplied(event)
     214    {
     215        if (event.data.matches)
     216            this.element.classList.remove("filter-non-matching");
     217        else if (event.target.style.inherited) {
     218            let inheritedHeader = this._inheritedHeaderMap.get(event.target.style.node);
     219            if (inheritedHeader)
     220                inheritedHeader.classList.add(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
     221        }
     222    }
    174223};
    175224

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

    r224906 r225569  
    3737        this._element.dataset.propertyIndex = index;
    3838
     39        this._contentElement = null;
    3940        this._nameElement = null;
    4041        this._valueElement = null;
    … …  
    127128        this._element.className = classNames.join(" ");
    128129        this._element.title = elementTitle;
     130    }
     131
     132    applyFilter(filterText)
     133    {
     134        let matchesName = this._nameElement.textContent.includes(filterText);
     135        let matchesValue = this._valueElement.textContent.includes(filterText);
     136        let matches = matchesName || matchesValue;
     137        this._contentElement.classList.toggle(WI.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName, matches);
     138        this._contentElement.classList.toggle(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName, !matches);
     139        return matches;
    129140    }
    130141
    … …  
    159170        }
    160171
     172        this._contentElement = this.element.appendChild(document.createElement("span"));
     173
    161174        if (!this._property.enabled)
    162             this.element.append("/* ");
    163 
    164         this._nameElement = this.element.appendChild(document.createElement("span"));
     175            this._contentElement.append("/* ");
     176
     177        this._nameElement = this._contentElement.appendChild(document.createElement("span"));
    165178        this._nameElement.classList.add("name");
    166179        this._nameElement.textContent = this._property.name;
    167180
    168         this.element.append(": ");
    169 
    170         this._valueElement = this.element.appendChild(document.createElement("span"));
     181        this._contentElement.append(": ");
     182
     183        this._valueElement = this._contentElement.appendChild(document.createElement("span"));
    171184        this._valueElement.classList.add("value");
    172185        this._renderValue(this._property.rawValue);
    … …  
    187200        }
    188201
    189         this.element.append(";");
     202        this._contentElement.append(";");
    190203
    191204        if (this._property.enabled) {
    … …  
    193206            this._warningElement.className = "warning";
    194207        } else
    195             this.element.append(" */");
     208            this._contentElement.append(" */");
    196209
    197210        this.updateStatus();
Note: See TracChangeset for help on using the changeset viewer.