Changeset 248818 in webkit


Ignore:
Timestamp:
Aug 17, 2019 1:11:30 AM (5 years ago)
Author:
Devin Rousso
Message:

Web Inspector: Sources: gear icons moves to 2nd line when sidebar is narrow
​https://bugs.webkit.org/show_bug.cgi?id=198017

Reviewed by Joseph Pecoraro.

  • UserInterface/Views/NavigationBar.js:

(WI.NavigationBar):
(WI.NavigationBar.prototype.layout):
(WI.NavigationBar.prototype.layout.forceItemHidden): Added.
(WI.NavigationBar.prototype.layout.isDivider): Added.
(WI.NavigationBar.prototype.layout.calculateVisibleItemWidth): Added.
(WI.NavigationBar.prototype.needsLayout): Deleted.
(WI.NavigationBar.prototype.sizeDidChange): Deleted.
(WI.NavigationBar.prototype._updateContent): Deleted.
(WI.NavigationBar.prototype._updateContent.forceItemHidden): Deleted.
(WI.NavigationBar.prototype._updateContent.isDivider): Deleted.
(WI.NavigationBar.prototype._updateContent.calculateVisibleItemWidth): Deleted.
Reset the cached _minimumWidth whenever updating in layout().

  • UserInterface/Views/NavigationItem.js:

(WI.NavigationItem.prototype.get width):
(WI.NavigationItem.prototype.update): Added.
(WI.NavigationItem.prototype.updateLayout): Deleted.
(WI.NavigationItem.prototype.get totalMargin): Added.

  • UserInterface/Views/ButtonNavigationItem.js:

(WI.ButtonNavigationItem.prototype.get totalMargin): Added.

  • UserInterface/Views/ButtonNavigationItem.css:
  • UserInterface/Views/TextNavigationItem.js:

(WI.TextNavigationItem.prototype.get totalMargin): Added.

  • UserInterface/Views/TextNavigationItem.css:

Element.prototype.getBoundingClientRect doesn't include the margin box of an element.
Rather than create a CSS variable and parse a computed style, save the total margin amount
to a getter that can then be added when computing the minimum width.

  • UserInterface/Views/Sidebar.js:

(WI.Sidebar):
(WI.Sidebar.prototype._recalculateWidth):

  • UserInterface/Views/FlexibleSpaceNavigationItem.js:

(WI.FlexibleSpaceNavigationItem.prototype.update): Added.
(WI.FlexibleSpaceNavigationItem.prototype.updateLayout): Deleted.

  • UserInterface/Views/GroupNavigationItem.js:

(WI.GroupNavigationItem.prototype.update): Added.
(WI.GroupNavigationItem.prototype.updateLayout): Deleted.

  • UserInterface/Views/HierarchicalPathNavigationItem.js:

(WI.HierarchicalPathNavigationItem.prototype.update): Added.
(WI.HierarchicalPathNavigationItem.prototype.updateLayout): Deleted.

  • UserInterface/Views/RadioButtonNavigationItem.js:

(WI.RadioButtonNavigationItem.prototype.update): Added.
(WI.RadioButtonNavigationItem.prototype.updateLayout): Deleted.
Rename updateLayout to update so it doesn't clash with WI.View naming.

  • UserInterface/Views/SidebarNavigationBar.js: Removed.
  • UserInterface/Main.html:
  • UserInterface/Views/NavigationBar.css:

(.navigation-bar .item): Added.
(.navigation-bar .item, .sidebar-navigation-bar > .holder .item): Deleted.
(.sidebar-navigation-bar): Deleted.
(.sidebar-navigation-bar .holder): Deleted.
Remove unnecessary class.

Location:
trunk/Source/WebInspectorUI
Files:
1 deleted
14 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r248810 r248818  
     12019-08-17  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Sources: gear icons moves to 2nd line when sidebar is narrow
     4        https://bugs.webkit.org/show_bug.cgi?id=198017
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * UserInterface/Views/NavigationBar.js:
     9        (WI.NavigationBar):
     10        (WI.NavigationBar.prototype.layout):
     11        (WI.NavigationBar.prototype.layout.forceItemHidden): Added.
     12        (WI.NavigationBar.prototype.layout.isDivider): Added.
     13        (WI.NavigationBar.prototype.layout.calculateVisibleItemWidth): Added.
     14        (WI.NavigationBar.prototype.needsLayout): Deleted.
     15        (WI.NavigationBar.prototype.sizeDidChange): Deleted.
     16        (WI.NavigationBar.prototype._updateContent): Deleted.
     17        (WI.NavigationBar.prototype._updateContent.forceItemHidden): Deleted.
     18        (WI.NavigationBar.prototype._updateContent.isDivider): Deleted.
     19        (WI.NavigationBar.prototype._updateContent.calculateVisibleItemWidth): Deleted.
     20        Reset the cached `_minimumWidth` whenever updating in `layout()`.
     21
     22        * UserInterface/Views/NavigationItem.js:
     23        (WI.NavigationItem.prototype.get width):
     24        (WI.NavigationItem.prototype.update): Added.
     25        (WI.NavigationItem.prototype.updateLayout): Deleted.
     26        (WI.NavigationItem.prototype.get totalMargin): Added.
     27        * UserInterface/Views/ButtonNavigationItem.js:
     28        (WI.ButtonNavigationItem.prototype.get totalMargin): Added.
     29        * UserInterface/Views/ButtonNavigationItem.css:
     30        * UserInterface/Views/TextNavigationItem.js:
     31        (WI.TextNavigationItem.prototype.get totalMargin): Added.
     32        * UserInterface/Views/TextNavigationItem.css:
     33        `Element.prototype.getBoundingClientRect` doesn't include the `margin` box of an element.
     34        Rather than create a CSS variable and parse a computed style, save the total `margin` amount
     35        to a getter that can then be added when computing the minimum width.
     36
     37        * UserInterface/Views/Sidebar.js:
     38        (WI.Sidebar):
     39        (WI.Sidebar.prototype._recalculateWidth):
     40        * UserInterface/Views/FlexibleSpaceNavigationItem.js:
     41        (WI.FlexibleSpaceNavigationItem.prototype.update): Added.
     42        (WI.FlexibleSpaceNavigationItem.prototype.updateLayout): Deleted.
     43        * UserInterface/Views/GroupNavigationItem.js:
     44        (WI.GroupNavigationItem.prototype.update): Added.
     45        (WI.GroupNavigationItem.prototype.updateLayout): Deleted.
     46        * UserInterface/Views/HierarchicalPathNavigationItem.js:
     47        (WI.HierarchicalPathNavigationItem.prototype.update): Added.
     48        (WI.HierarchicalPathNavigationItem.prototype.updateLayout): Deleted.
     49        * UserInterface/Views/RadioButtonNavigationItem.js:
     50        (WI.RadioButtonNavigationItem.prototype.update): Added.
     51        (WI.RadioButtonNavigationItem.prototype.updateLayout): Deleted.
     52        Rename `updateLayout` to `update` so it doesn't clash with `WI.View` naming.
     53
     54        * UserInterface/Views/SidebarNavigationBar.js: Removed.
     55        * UserInterface/Main.html:
     56        * UserInterface/Views/NavigationBar.css:
     57        (.navigation-bar .item): Added.
     58        (.navigation-bar .item, .sidebar-navigation-bar > .holder .item): Deleted.
     59        (.sidebar-navigation-bar): Deleted.
     60        (.sidebar-navigation-bar .holder): Deleted.
     61        Remove unnecessary class.
     62
    1632019-08-16  Joseph Pecoraro  <pecoraro@apple.com>
    264

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r248602 r248818  
    793793    <script src="Views/ShaderProgramTreeElement.js"></script>
    794794    <script src="Views/Sidebar.js"></script>
    795     <script src="Views/SidebarNavigationBar.js"></script>
    796795    <script src="Views/Slider.js"></script>
    797796    <script src="Views/SoftContextMenu.js"></script>

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

    r242118 r248818  
    4444.navigation-bar .item.button.text-only {
    4545    padding: 1px 8px 3px;
    46     margin: 0 2px;
     46    margin: 0 2px; /* WI.ButtonNavigationItem.prototype.get totalMargin */
    4747
    4848    height: initial;

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

    r229543 r248818  
    126126    // Protected
    127127
     128    get totalMargin()
     129    {
     130        let totalMargin = super.totalMargin;
     131        if (this._buttonStyle === ButtonNavigationItem.Style.Text)
     132            return totalMargin + 4; /* .navigation-bar .item.button.text-only */
     133        return totalMargin;
     134    }
     135
    128136    get additionalClassNames()
    129137    {

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

    r222868 r248818  
    4747    }
    4848
    49     updateLayout(expandOnly)
     49    update(options = {})
    5050    {
    51         super.updateLayout(expandOnly);
     51        super.update(options);
    5252
    5353        if (!this._navigationItem)
    5454            return;
    5555
    56         if (expandOnly) {
    57             let flexibleWidth = this.width;
    58             if (!flexibleWidth)
    59                 return;
     56        if (!options.expandOnly)
     57            return;
    6058
    61             this.element.appendChild(this._navigationItem.element);
     59        let flexibleWidth = this.width;
     60        if (!flexibleWidth)
     61            return;
    6262
    63             this._navigationItem.updateLayout(true);
    64             let itemWidth = this._navigationItem.width;
     63        this.element.appendChild(this._navigationItem.element);
    6564
    66             let remainingWidth = flexibleWidth - itemWidth;
    67             if (remainingWidth <= 0)
    68                 this.element.removeChild(this._navigationItem.element);
    69         }
     65        this._navigationItem.update(options);
     66        let itemWidth = this._navigationItem.width;
     67
     68        let remainingWidth = flexibleWidth - itemWidth;
     69        if (remainingWidth <= 0)
     70            this.element.removeChild(this._navigationItem.element);
    7071    }
    7172};

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

    r223308 r248818  
    6868    // Protected
    6969
    70     updateLayout(expandOnly)
     70    update(options = {})
    7171    {
    72         super.updateLayout(expandOnly);
     72        super.update(options);
    7373
    7474        for (let item of this._navigationItems)
    75             item.updateLayout(expandOnly);
     75            item.update(options);
    7676    }
    7777

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

    r229543 r248818  
    100100    }
    101101
    102     updateLayout(expandOnly)
     102    update(options = {})
    103103    {
    104104        this._updateComponentsIfNeeded();
    105105
    106         super.updateLayout(expandOnly);
     106        super.update(options);
    107107
    108108        var navigationBar = this.parentNavigationBar;
    … …  
    122122        }
    123123
    124         if (expandOnly)
     124        if (options.expandOnly)
    125125            return;
    126126

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

    r227707 r248818  
    4141}
    4242
    43 .navigation-bar .item,
    44 .sidebar-navigation-bar > .holder .item {
     43.navigation-bar .item {
    4544    display: flex;
    4645    align-items: center;
    … …  
    5453    display: none;
    5554}
    56 
    57 .sidebar-navigation-bar {
    58     display: block;
    59     text-align: center;
    60     height: var(--navigation-bar-height);
    61     border-bottom: 1px solid var(--border-color);
    62 }
    63 
    64 .sidebar-navigation-bar .holder {
    65     display: inline-flex;
    66     align-items: center;
    67     height: var(--navigation-bar-height);
    68     padding: 0 2px;
    69     border-bottom: none;
    70 }

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

    r244264 r248818  
    4646        this._mouseUpEventListener = this._mouseUp.bind(this);
    4747
    48         this._forceLayout = false;
    4948        this._minimumWidth = NaN;
    5049        this._navigationItems = [];
    … …  
    202201    }
    203202
    204     needsLayout()
    205     {
    206         this._forceLayout = true;
    207 
    208         super.needsLayout();
    209     }
    210 
    211     sizeDidChange()
    212     {
    213         super.sizeDidChange();
    214 
    215         this._updateContent();
    216     }
    217 
    218203    layout()
    219204    {
    220205        super.layout();
    221206
    222         if (!this._forceLayout)
    223             return;
    224 
    225         this._updateContent();
    226     }
    227 
    228     // Private
    229 
    230     _updateContent()
    231     {
    232         this._forceLayout = false;
     207        this._minimumWidth = NaN;
    233208
    234209        // Remove the collapsed style class to test if the items can fit at full width.
    … …  
    247222        for (let item of this._navigationItems) {
    248223            forceItemHidden(item, false);
    249             item.updateLayout(true);
     224            item.update({expandOnly: true});
    250225        }
    251226
    … …  
    269244        // Give each navigation item the opportunity to collapse further.
    270245        for (let item of visibleNavigationItems)
    271             item.updateLayout(false);
     246            item.update();
    272247
    273248        totalItemWidth = calculateVisibleItemWidth();
    274249
    275250        if (totalItemWidth > barWidth) {
     251            if (this.parentView instanceof WI.Sidebar) {
     252                this.parentView.width = this.minimumWidth;
     253                return;
     254            }
     255
    276256            // Hide visible items, starting with the lowest priority item, until
    277257            // the bar fits the available width.
    … …  
    302282    }
    303283
     284    // Private
     285
    304286    _mouseDown(event)
    305287    {

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

    r225250 r248818  
    5757    {
    5858        if (isNaN(this._cachedWidth))
    59             this._cachedWidth = this._element.realOffsetWidth;
     59            this._cachedWidth = this._element.realOffsetWidth + this.totalMargin;
    6060        return this._cachedWidth;
    6161    }
    … …  
    6464    set visibilityPriority(priority) { this._visibilityPriority = priority; }
    6565
    66     updateLayout(expandOnly)
     66    update(options = {})
    6767    {
    6868        // Implemented by subclasses.
    … …  
    101101    // Protected
    102102
     103    get totalMargin()
     104    {
     105        // Implemented by subclasses if needed.
     106        return 0;
     107    }
     108
    103109    didAttach(navigationBar)
    104110    {

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

    r221338 r248818  
    6161    }
    6262
    63     updateLayout(expandOnly)
     63    update(options = {})
    6464    {
    65         super.updateLayout(expandOnly);
     65        super.update(options);
    6666
    67         if (expandOnly)
     67        if (options.expandOnly)
    6868            return;
    6969

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

    r244268 r248818  
    4343            this.element.classList.add("has-navigation-bar");
    4444
    45             this._navigationBar = new WI.SidebarNavigationBar(null, null, "tablist");
     45            this._navigationBar = new WI.NavigationBar(null, null, "tablist");
    4646            this._navigationBar.addEventListener(WI.NavigationBar.Event.NavigationItemSelected, this._navigationItemSelected, this);
    4747            this.addSubview(this._navigationBar);
    … …  
    275275
    276276        if (this._navigationBar)
    277             this._navigationBar.updateLayoutIfNeeded(WI.View.LayoutReason.Resize);
     277            this._navigationBar.updateLayout(WI.View.LayoutReason.Resize);
    278278
    279279        if (this._selectedSidebarPanel)
    280             this._selectedSidebarPanel.updateLayoutIfNeeded(WI.View.LayoutReason.Resize);
     280            this._selectedSidebarPanel.updateLayout(WI.View.LayoutReason.Resize);
    281281
    282282        this.dispatchEventToListeners(WI.Sidebar.Event.WidthDidChange, {newWidth});

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

    r201177 r248818  
    2727    width: auto;
    2828    padding: 1px 8px 3px;
    29     margin: 0 2px;
     29    margin: 0 2px; /* WI.TextNavigationItem.prototype.get totalMargin */
    3030
    3131    line-height: 11px;

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

    r220119 r248818  
    4747        this._element.textContent = x || "";
    4848    }
     49
     50    // Protected
     51
     52    get totalMargin()
     53    {
     54        return super.totalMargin + 4; /* .navigation-bar .item.text */
     55    }
    4956};
Note: See TracChangeset for help on using the changeset viewer.