Changeset 279613 in webkit

Timestamp:

Jul 6, 2021 1:25:48 PM (13 months ago)

Author:

Patrick Angle

Message:

Web Inspector: Elements Tab Details Sidebar navigation items sometime wrap to a second line
​https://bugs.webkit.org/show_bug.cgi?id=227707

Reviewed by Devin Rousso.

When resizing a sidebar, it was possible that the cumulative widths of each navigation item could add up to just
less than the actual amount of space necessary to lay out each item in a single row, leading to wrapping items
to the next line. This resolves that issue by taking the ceiling of each item's width when calculating the
total amount of space needed to display all the items. Additionally, every time a panel is added or removed from
the sidebar, we need to recalculate the width of the sidebar to make sure the new navigation item, or the
removal thereof, is accommodated.

• UserInterface/Views/NavigationBar.js:

(WI.NavigationBar.prototype.layout.calculateVisibleItemWidth):
(WI.NavigationBar.prototype._calculateMinimumWidth):

• UserInterface/Views/SingleSidebar.js:

(WI.SingleSidebar.prototype.didInsertSidebarPanel):
(WI.SingleSidebar.prototype.didRemoveSidebarPanel):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/NavigationBar.js (modified) (3 diffs)
• UserInterface/Views/SingleSidebar.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2021-07-06  Patrick Angle  <pangle@apple.com>
+
+        Web Inspector: Elements Tab Details Sidebar navigation items sometime wrap to a second line
+        https://bugs.webkit.org/show_bug.cgi?id=227707
+
+        Reviewed by Devin Rousso.
+
+        When resizing a sidebar, it was possible that the cumulative widths of each navigation item could add up to just
+        less than the actual amount of space necessary to lay out each item in a single row, leading to wrapping items
+        to the next line. This resolves that issue by taking the ceiling of each item's width when calculating the
+        total amount of space needed to display all the items. Additionally, every time a panel is added or removed from
+        the sidebar, we need to recalculate the width of the sidebar to make sure the new navigation item, or the
+        removal thereof, is accommodated.
+
+        * UserInterface/Views/NavigationBar.js:
+        (WI.NavigationBar.prototype.layout.calculateVisibleItemWidth):
+        (WI.NavigationBar.prototype._calculateMinimumWidth):
+        * UserInterface/Views/SingleSidebar.js:
+        (WI.SingleSidebar.prototype.didInsertSidebarPanel):
+        (WI.SingleSidebar.prototype.didRemoveSidebarPanel):
+
 2021-07-02  Harshil Ratnu  <hratnu@apple.com>
 

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

@@ -224 +224 @@
 
         function calculateVisibleItemWidth() {
-            return visibleNavigationItems.reduce((total, item) => total + item.width, 0);
+            return visibleNavigationItems.reduce((total, item) => total + Math.ceil(item.width), 0);
         }
 
@@ -253 +253 @@
             while (totalItemWidth > barWidth && visibleNavigationItems.length) {
                 let navigationItem = visibleNavigationItems.shift();
-                totalItemWidth -= navigationItem.width;
+                totalItemWidth -= Math.ceil(navigationItem.width);
                 forceItemHidden(navigationItem, true);
             }
@@ -415 +415 @@
             this.element.classList.add(WI.NavigationBar.CollapsedStyleClassName);
 
-        let totalItemWidth = visibleNavigationItems.reduce((total, item) => total + item.minimumWidth, 0);
+        let totalItemWidth = visibleNavigationItems.reduce((total, item) => total + Math.ceil(item.minimumWidth), 0);
 
         // Remove the collapsed style class if we were not collapsed before.

trunk/Source/WebInspectorUI/UserInterface/Views/SingleSidebar.js

@@ -84 +84 @@
     didInsertSidebarPanel(sidebarPanel, index)
     {
-        if (this._navigationBar) {
-            console.assert(sidebarPanel.navigationItem);
-            this._navigationBar.insertNavigationItem(sidebarPanel.navigationItem, index);
-        }
+        if (!this._navigationBar)
+            return;
+
+        console.assert(sidebarPanel.navigationItem);
+        this._navigationBar.insertNavigationItem(sidebarPanel.navigationItem, index);
+
+        this._recalculateWidth();   
     }
 
     didRemoveSidebarPanel(sidebarPanel)
     {
-        if (this._navigationBar) {
-            console.assert(sidebarPanel.navigationItem);
-            this._navigationBar.removeNavigationItem(sidebarPanel.navigationItem);
-        }
+        if (!this._navigationBar)
+            return;
+
+        console.assert(sidebarPanel.navigationItem);
+        this._navigationBar.removeNavigationItem(sidebarPanel.navigationItem);
+
+        this._recalculateWidth();
     }