Changeset 209711 in webkit


Ignore:
Timestamp:
Dec 12, 2016, 9:24:03 AM (9 years ago)
Author:
Matt Baker
Message:

Web Inspector: Cleanup HierarchicalPathComponent
​https://bugs.webkit.org/show_bug.cgi?id=165745

Reviewed by Brian Burg.

Prefer toggle for style class names, remove single use CSS class name
constants, and back all properties by the model not the DOM.

  • UserInterface/Views/HierarchicalPathComponent.js:

(WebInspector.HierarchicalPathComponent):
(WebInspector.HierarchicalPathComponent.prototype.get element):
(WebInspector.HierarchicalPathComponent.prototype.get representedObject):
(WebInspector.HierarchicalPathComponent.prototype.get minimumWidth):
(WebInspector.HierarchicalPathComponent.prototype.get forcedWidth):
(WebInspector.HierarchicalPathComponent.prototype.set forcedWidth):
(WebInspector.HierarchicalPathComponent.prototype.get hidden):
(WebInspector.HierarchicalPathComponent.prototype.set hidden):
(WebInspector.HierarchicalPathComponent.prototype.get collapsed):
(WebInspector.HierarchicalPathComponent.prototype.set collapsed):
(WebInspector.HierarchicalPathComponent.prototype.get selectorArrows):
(WebInspector.HierarchicalPathComponent.prototype.set selectorArrows):
(WebInspector.HierarchicalPathComponent.prototype.get previousSibling):
(WebInspector.HierarchicalPathComponent.prototype.set previousSibling):
(WebInspector.HierarchicalPathComponent.prototype.get nextSibling):
(WebInspector.HierarchicalPathComponent.prototype.set nextSibling):
(WebInspector.HierarchicalPathComponent.prototype._updateElementTitleAndText):
(WebInspector.HierarchicalPathComponent.prototype._updateSelectElement.createOption):
(WebInspector.HierarchicalPathComponent.prototype._updateSelectElement):

Location:
trunk/Source/WebInspectorUI
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r209709 r209711  
     12016-12-12  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: Cleanup HierarchicalPathComponent
     4        https://bugs.webkit.org/show_bug.cgi?id=165745
     5
     6        Reviewed by Brian Burg.
     7
     8        Prefer toggle for style class names, remove single use CSS class name
     9        constants, and back all properties by the model not the DOM.
     10
     11        * UserInterface/Views/HierarchicalPathComponent.js:
     12        (WebInspector.HierarchicalPathComponent):
     13        (WebInspector.HierarchicalPathComponent.prototype.get element):
     14        (WebInspector.HierarchicalPathComponent.prototype.get representedObject):
     15        (WebInspector.HierarchicalPathComponent.prototype.get minimumWidth):
     16        (WebInspector.HierarchicalPathComponent.prototype.get forcedWidth):
     17        (WebInspector.HierarchicalPathComponent.prototype.set forcedWidth):
     18        (WebInspector.HierarchicalPathComponent.prototype.get hidden):
     19        (WebInspector.HierarchicalPathComponent.prototype.set hidden):
     20        (WebInspector.HierarchicalPathComponent.prototype.get collapsed):
     21        (WebInspector.HierarchicalPathComponent.prototype.set collapsed):
     22        (WebInspector.HierarchicalPathComponent.prototype.get selectorArrows):
     23        (WebInspector.HierarchicalPathComponent.prototype.set selectorArrows):
     24        (WebInspector.HierarchicalPathComponent.prototype.get previousSibling):
     25        (WebInspector.HierarchicalPathComponent.prototype.set previousSibling):
     26        (WebInspector.HierarchicalPathComponent.prototype.get nextSibling):
     27        (WebInspector.HierarchicalPathComponent.prototype.set nextSibling):
     28        (WebInspector.HierarchicalPathComponent.prototype._updateElementTitleAndText):
     29        (WebInspector.HierarchicalPathComponent.prototype._updateSelectElement.createOption):
     30        (WebInspector.HierarchicalPathComponent.prototype._updateSelectElement):
     31
    1322016-12-12  Matt Baker  <mattbaker@apple.com>
    233

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

    r200995 r209711  
    3838        this._element.className = "hierarchical-path-component";
    3939
    40         if (!(styleClassNames instanceof Array))
     40        if (!Array.isArray(styleClassNames))
    4141            styleClassNames = [styleClassNames];
    4242
    43         for (var i = 0; i < styleClassNames.length; ++i) {
    44             if (!styleClassNames[i])
    45                 continue;
    46             this._element.classList.add(styleClassNames[i]);
    47         }
     43        this._element.classList.add(...styleClassNames);
    4844
    4945        if (!textOnly) {
    … …  
    5248            this._element.appendChild(this._iconElement);
    5349        } else
    54             this._element.classList.add(WebInspector.HierarchicalPathComponent.TextOnlyStyleClassName);
     50            this._element.classList.add("text-only");
    5551
    5652        this._titleElement = document.createElement("div");
    … …  
    7975        this._truncatedDisplayNameLength = 0;
    8076
     77        this._collapsed = false;
     78        this._hidden = false;
     79        this._selectorArrows = false;
     80
     81        this.displayName = displayName;
    8182        this.selectorArrows = showSelectorArrows;
    82         this.displayName = displayName;
    8383    }
    8484
    … …  
    9393    }
    9494
    95     get element()
    96     {
    97         return this._element;
    98     }
    99 
    100     get representedObject()
    101     {
    102         return this._representedObject;
    103     }
     95    get element() { return this._element; }
     96    get representedObject() { return this._representedObject; }
    10497
    10598    get displayName()
    … …  
    138131    get minimumWidth()
    139132    {
    140         if (this.collapsed)
     133        if (this._collapsed)
    141134            return WebInspector.HierarchicalPathComponent.MinimumWidthCollapsed;
    142         if (this.selectorArrows)
     135        if (this._selectorArrows)
    143136            return WebInspector.HierarchicalPathComponent.MinimumWidth + WebInspector.HierarchicalPathComponent.SelectorArrowsWidth;
    144137        return WebInspector.HierarchicalPathComponent.MinimumWidth;
    … …  
    147140    get forcedWidth()
    148141    {
    149         var maxWidth = this._element.style.getProperty("width");
     142        let maxWidth = this._element.style.getProperty("width");
    150143        if (typeof maxWidth === "string")
    151144            return parseInt(maxWidth);
    … …  
    156149    {
    157150        if (typeof width === "number") {
    158             var minimumWidthForOneCharacterTruncatedTitle = WebInspector.HierarchicalPathComponent.MinimumWidthForOneCharacterTruncatedTitle;
     151            let minimumWidthForOneCharacterTruncatedTitle = WebInspector.HierarchicalPathComponent.MinimumWidthForOneCharacterTruncatedTitle;
    159152            if (this.selectorArrows)
    160153                minimumWidthForOneCharacterTruncatedTitle += WebInspector.HierarchicalPathComponent.SelectorArrowsWidth;
    … …  
    174167    get hidden()
    175168    {
    176         return this._element.classList.contains(WebInspector.HierarchicalPathComponent.HiddenStyleClassName);
     169        return this._hidden;
    177170    }
    178171
    179172    set hidden(flag)
    180173    {
    181         if (flag)
    182             this._element.classList.add(WebInspector.HierarchicalPathComponent.HiddenStyleClassName);
    183         else
    184             this._element.classList.remove(WebInspector.HierarchicalPathComponent.HiddenStyleClassName);
     174        if (this._hidden === flag)
     175            return;
     176
     177        this._hidden = flag;
     178        this._element.classList.toggle("hidden", this._hidden);
    185179    }
    186180
    187181    get collapsed()
    188182    {
    189         return this._element.classList.contains(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName);
     183        return this._collapsed;
    190184    }
    191185
    192186    set collapsed(flag)
    193187    {
    194         if (flag)
    195             this._element.classList.add(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName);
    196         else
    197             this._element.classList.remove(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName);
     188        if (this._collapsed === flag)
     189            return;
     190
     191        this._collapsed = flag;
     192        this._element.classList.toggle("collapsed", this._collapsed);
    198193    }
    199194
    200195    get selectorArrows()
    201196    {
    202         return this._element.classList.contains(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName);
     197        return this._selectorArrows;
    203198    }
    204199
    205200    set selectorArrows(flag)
    206201    {
    207         if (flag) {
     202        if (this._selectorArrows === flag)
     203            return;
     204
     205        this._selectorArrows = flag;
     206
     207        if (this._selectorArrows) {
    208208            this._selectorArrowsElement = document.createElement("img");
    209209            this._selectorArrowsElement.className = "selector-arrows";
    210210            this._element.insertBefore(this._selectorArrowsElement, this._separatorElement);
    211 
    212             this._element.classList.add(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName);
    213         } else {
    214             if (this._selectorArrowsElement) {
    215                 this._selectorArrowsElement.remove();
    216                 delete this._selectorArrowsElement;
    217             }
    218 
    219             this._element.classList.remove(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName);
     211        } else if (this._selectorArrowsElement) {
     212            this._selectorArrowsElement.remove();
     213            this._selectorArrowsElement = null;
    220214        }
    221     }
    222 
    223     get previousSibling()
    224     {
    225         return this._previousSibling;
    226     }
    227 
    228     set previousSibling(newSlibling)
    229     {
    230         this._previousSibling = newSlibling || null;
    231     }
    232 
    233     get nextSibling()
    234     {
    235         return this._nextSibling;
    236     }
    237 
    238     set nextSibling(newSlibling)
    239     {
    240         this._nextSibling = newSlibling || null;
    241     }
     215
     216        this._element.classList.toggle("show-selector-arrows", this._selectorArrows);
     217    }
     218
     219    get previousSibling() { return this._previousSibling; }
     220    set previousSibling(newSlibling) { this._previousSibling = newSlibling || null; }
     221    get nextSibling() { return this._nextSibling; }
     222    set nextSibling(newSlibling) { this._nextSibling = newSlibling || null; }
    242223
    243224    // Private
    … …  
    245226    _updateElementTitleAndText()
    246227    {
    247         var truncatedDisplayName = this._displayName;
     228        let truncatedDisplayName = this._displayName;
    248229        if (this._truncatedDisplayNameLength && truncatedDisplayName.length > this._truncatedDisplayNameLength)
    249230            truncatedDisplayName = truncatedDisplayName.substring(0, this._truncatedDisplayNameLength) + ellipsis;
    … …  
    259240        function createOption(component)
    260241        {
    261             var optionElement = document.createElement("option");
    262             var maxPopupMenuLength = 130; // <rdar://problem/13445374> <select> with very long option has clipped text and popup menu is still very wide
     242            let optionElement = document.createElement("option");
     243            let maxPopupMenuLength = 130; // <rdar://problem/13445374> <select> with very long option has clipped text and popup menu is still very wide
    263244            optionElement.textContent = component.displayName.length <= maxPopupMenuLength ? component.displayName : component.displayName.substring(0, maxPopupMenuLength) + ellipsis;
    264245            optionElement._pathComponent = component;
    … …  
    266247        }
    267248
    268         var previousSiblingCount = 0;
    269         var sibling = this.previousSibling;
     249        let previousSiblingCount = 0;
     250        let sibling = this.previousSibling;
    270251        while (sibling) {
    271252            this._selectElement.insertBefore(createOption(sibling), this._selectElement.firstChild);
    … …  
    323304};
    324305
    325 WebInspector.HierarchicalPathComponent.HiddenStyleClassName = "hidden";
    326 WebInspector.HierarchicalPathComponent.CollapsedStyleClassName = "collapsed";
    327 WebInspector.HierarchicalPathComponent.TextOnlyStyleClassName = "text-only";
    328 WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName = "show-selector-arrows";
    329 
    330306WebInspector.HierarchicalPathComponent.MinimumWidth = 32;
    331307WebInspector.HierarchicalPathComponent.MinimumWidthCollapsed = 24;
Note: See TracChangeset for help on using the changeset viewer.