Changeset 258623 in webkit

Timestamp:

Mar 17, 2020 9:30:22 PM (4 years ago)

Author:

Devin Rousso

Message:

Web Inspector: the width of WI.TabBarItem can change if the detached window is resized
​https://bugs.webkit.org/show_bug.cgi?id=209200

Reviewed by Timothy Hatcher.

• UserInterface/Views/TabBar.js:

(WI.TabBar.prototype.layout):
(WI.TabBar.prototype.layout.measureWidth): Renamed from measureItemWidth.
When undocked, WI.TabBarItem grow to fill any available space. As a result, if a
WI.TabBarItem is added or removed, the width of all WI.TabBarItem will change.
Wait to measure widths until all WI.TabBarItem are un-hidden for the reason above.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/TabBar.js (modified) (4 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2020-03-17  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: the width of `WI.TabBarItem` can change if the detached window is resized
+        https://bugs.webkit.org/show_bug.cgi?id=209200
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/TabBar.js:
+        (WI.TabBar.prototype.layout):
+        (WI.TabBar.prototype.layout.measureWidth): Renamed from `measureItemWidth`.
+        When undocked, `WI.TabBarItem` grow to fill any available space. As a result, if a
+        `WI.TabBarItem` is added or removed, the width of all `WI.TabBarItem` will change.
+        Wait to measure widths until all `WI.TabBarItem` are un-hidden for the reason above.
+
 2020-03-17  Devin Rousso  <drousso@apple.com>
 

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

@@ -436 +436 @@
         const tabBarItemHorizontalMargin = WI.TabBarItem.horizontalMargin;
 
-        function measureItemWidth(item) {
-            if (!item[WI.TabBar.CachedWidthSymbol])
-                item[WI.TabBar.CachedWidthSymbol] = item.element.realOffsetWidth + tabBarItemHorizontalMargin;
-            return item[WI.TabBar.CachedWidthSymbol];
-        }
-
-        let availableSpace = this._tabContainer.realOffsetWidth - tabBarHorizontalPadding;
+        let undocked = WI.dockConfiguration === WI.DockConfiguration.Undocked;
+
+        function measureWidth(tabBarItem) {
+            if (!tabBarItem[WI.TabBar.CachedWidthSymbol])
+                tabBarItem[WI.TabBar.CachedWidthSymbol] = tabBarItem.element.realOffsetWidth + tabBarItemHorizontalMargin;
+            return tabBarItem[WI.TabBar.CachedWidthSymbol];
+        }
+
+        // Add one to allow for possible sub-px widths.
+        let availableSpace = this._tabContainer.realOffsetWidth - tabBarHorizontalPadding + 1;
 
         this._tabContainer.classList.add("calculate-width");
@@ -449 +452 @@
 
         let normalTabBarItems = [];
-        let normalTabBarItemsWidth = 0;
         for (let tabBarItem of this._tabBarItemsFromLeftToRight()) {
             if (tabBarItem === this._tabPickerTabBarItem) {
@@ -458 +460 @@
             tabBarItem.hidden = false;
 
-            if (tabBarItem instanceof WI.PinnedTabBarItem)
-                availableSpace -= measureItemWidth(tabBarItem);
-            else {
-                normalTabBarItems.push(tabBarItem);
-                normalTabBarItemsWidth += measureItemWidth(tabBarItem);
-            }
-        }
-
+            if (tabBarItem instanceof WI.PinnedTabBarItem) {
+                availableSpace -= measureWidth(tabBarItem);
+                continue;
+            }
+
+            normalTabBarItems.push(tabBarItem);
+
+            // When undocked, `WI.TabBarItem` grow to fill any available space. As a result, if a
+            // `WI.TabBarItem` is added or removed, the width of all `WI.TabBarItem` will change.
+            if (undocked)
+                tabBarItem[WI.TabBar.CachedWidthSymbol] = 0;
+        }
+
+        // Wait to measure widths until all `WI.TabBarItem` are un-hidden for the reason above.
+        let normalTabBarItemsWidth = normalTabBarItems.reduce((accumulator, tabBarItem) => accumulator + measureWidth(tabBarItem), 0);
         if (normalTabBarItemsWidth > availableSpace) {
             this._tabPickerTabBarItem.hidden = false;
-            availableSpace -= measureItemWidth(this._tabPickerTabBarItem);
+            availableSpace -= measureWidth(this._tabPickerTabBarItem);
 
             let index = normalTabBarItems.length - 1;
@@ -476 +485 @@
                     continue;
 
-                normalTabBarItemsWidth -= measureItemWidth(tabBarItem);
+                normalTabBarItemsWidth -= measureWidth(tabBarItem);
 
                 tabBarItem.hidden = true;