Changeset 258898 in webkit

Timestamp:

Mar 23, 2020 7:22:49 PM (4 years ago)

Author:

Devin Rousso

Message:

REGRESSION(r257759, r258623): Web Inspector: Settings icon sometimes placed below the tab bar
​https://bugs.webkit.org/show_bug.cgi?id=208603
<rdar://problem/60108967>

Reviewed by Timothy Hatcher.

• UserInterface/Views/TabBar.js:

(WI.TabBar.prototype.layout):
If the total width of all WI.GeneralTabBarItem is not an integer, it needs to be rounded
when compared to the width of the container WI.TabBar. This is be necessary because CSS
often rounds to the nearest pixel, meaning that 99.5px would actually render as 100px,
whereas 99.4px would render as 99px.

• UserInterface/Views/TabBar.css:

(body:not(.docked) .tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned)): Added.
(.tab-bar > .tabs.calculate-width > .item:not(.pinned)): Added.
(body:not(.docked) .tab-bar > .tabs > .item:not(.pinned)): Deleted.
(.tab-bar > .tabs.calculate-width > .item): Deleted.
When undocked, force all WI.GeneralTabBarItem to take up as little width as possible when
resizing so that if there isn't enough room for all of them, any that flex-wrap won't be
incorrectly perceived as needing a much larger width.

• UserInterface/Debug/Bootstrap.css:

(.tab-bar > .navigation-bar .inspect-inspector):
Ensure that the "inspect inspector" navigation item has an integer pixel width.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Debug/Bootstrap.css (modified) (1 diff)
• UserInterface/Views/TabBar.css (modified) (2 diffs)
• UserInterface/Views/TabBar.js (modified) (3 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2020-03-23  Devin Rousso  <drousso@apple.com>
+
+        REGRESSION(r257759, r258623): Web Inspector: Settings icon sometimes placed below the tab bar
+        https://bugs.webkit.org/show_bug.cgi?id=208603
+        <rdar://problem/60108967>
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/TabBar.js:
+        (WI.TabBar.prototype.layout):
+        If the total width of all `WI.GeneralTabBarItem` is not an integer, it needs to be rounded
+        when compared to the width of the container `WI.TabBar`. This is be necessary because CSS
+        often rounds to the nearest pixel, meaning that `99.5px` would actually render as `100px`,
+        whereas `99.4px` would render as `99px`.
+
+        * UserInterface/Views/TabBar.css:
+        (body:not(.docked) .tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned)): Added.
+        (.tab-bar > .tabs.calculate-width > .item:not(.pinned)): Added.
+        (body:not(.docked) .tab-bar > .tabs > .item:not(.pinned)): Deleted.
+        (.tab-bar > .tabs.calculate-width > .item): Deleted.
+        When undocked, force all `WI.GeneralTabBarItem` to take up as little width as possible when
+        resizing so that if there isn't enough room for all of them, any that `flex-wrap` won't be
+        incorrectly perceived as needing a much larger width.
+
+        * UserInterface/Debug/Bootstrap.css:
+        (.tab-bar > .navigation-bar .inspect-inspector):
+        Ensure that the "inspect inspector" navigation item has an integer pixel width.
+
 2020-03-23  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Debug/Bootstrap.css

@@ -28 +28 @@
     outline-offset: -1px !important;
 }
+
+.tab-bar > .navigation-bar .inspect-inspector {
+    width: 1em !important;
+}

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

@@ -160 +160 @@
 }
 
-body:not(.docked) .tab-bar > .tabs > .item:not(.pinned) {
+body:not(.docked) .tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned) {
     flex-grow: 1;
 }
@@ -171 +171 @@
 }
 
-.tab-bar > .tabs.calculate-width > .item {
+.tab-bar > .tabs.calculate-width > .item:not(.pinned) {
     flex: initial;
 }

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

@@ -450 +450 @@
         }
 
-        // Add one to allow for possible sub-px widths.
-        let availableSpace = this._tabContainer.realOffsetWidth - tabBarHorizontalPadding + 1;
+        let availableSpace = this._tabContainer.realOffsetWidth - tabBarHorizontalPadding;
 
         this._tabContainer.classList.add("calculate-width");
@@ -481 +480 @@
         // 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) {
+        if (Math.round(normalTabBarItemsWidth) >= Math.floor(availableSpace)) {
             this._tabPickerTabBarItem.hidden = false;
             availableSpace -= measureWidth(this._tabPickerTabBarItem);
@@ -495 +494 @@
                 tabBarItem.hidden = true;
                 this._hiddenTabBarItems.push(tabBarItem);
-            } while (normalTabBarItemsWidth > availableSpace && --index >= 0);
-        }
+            } while (normalTabBarItemsWidth >= availableSpace && --index >= 0);
+        }
+
+        // Tabs are marked as hidden from right to left, meaning that the right-most item will be
+        // first in the list. Reverse the list so that the right-most item is last.
+        this._hiddenTabBarItems.reverse();
 
         this._tabContainer.classList.remove("calculate-width");