Title: [258550] trunk/Source/WebInspectorUI
- Revision
- 258550
- Author
- [email protected]
- Date
- 2020-03-17 08:39:58 -0700 (Tue, 17 Mar 2020)
Log Message
REGRESSION(r257759): Web Inspector: Settings icon sometimes placed below the tab bar
https://bugs.webkit.org/show_bug.cgi?id=208603
<rdar://problem/60108967>
Reviewed by Brian Burg.
* UserInterface/Views/TabBar.js:
(WI.TabBar.prototype.layout):
Don't take into account the width of the flexible space before or after the normal tab bar
items since they will shrink to fit (the container is using `display: flex;`). Instead, use
determine the available space by subtracting the width of every `WI.PinnedTabBarItem` from
the `realOffsetWidth` of the container, comparing against the sum of the `realOffsetWidth`
of all `WI.GeneralTabBarItem`. If the sum is greater than the available space, successively
mark items from the end (right in LTR, left in RTL) as hidden until the remaining will fit.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (258549 => 258550)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-03-17 15:36:37 UTC (rev 258549)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-03-17 15:39:58 UTC (rev 258550)
@@ -1,3 +1,20 @@
+2020-03-17 Devin Rousso <[email protected]>
+
+ REGRESSION(r257759): Web Inspector: Settings icon sometimes placed below the tab bar
+ https://bugs.webkit.org/show_bug.cgi?id=208603
+ <rdar://problem/60108967>
+
+ Reviewed by Brian Burg.
+
+ * UserInterface/Views/TabBar.js:
+ (WI.TabBar.prototype.layout):
+ Don't take into account the width of the flexible space before or after the normal tab bar
+ items since they will shrink to fit (the container is using `display: flex;`). Instead, use
+ determine the available space by subtracting the width of every `WI.PinnedTabBarItem` from
+ the `realOffsetWidth` of the container, comparing against the sum of the `realOffsetWidth`
+ of all `WI.GeneralTabBarItem`. If the sum is greater than the available space, successively
+ mark items from the end (right in LTR, left in RTL) as hidden until the remaining will fit.
+
2020-03-16 Nikita Vasilyev <[email protected]>
REGRESSION(r257380): Web Inspector: deleting node causes TreeOutline to lose focus
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js (258549 => 258550)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js 2020-03-17 15:36:37 UTC (rev 258549)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js 2020-03-17 15:39:58 UTC (rev 258550)
@@ -432,20 +432,9 @@
if (this._tabContainer.classList.contains("static-layout"))
return;
- const tabBarHozirontalPadding = WI.TabBar.horizontalPadding;
+ const tabBarHorizontalPadding = WI.TabBar.horizontalPadding;
const tabBarItemHorizontalMargin = WI.TabBarItem.horizontalMargin;
- let barWidth = this._tabContainer.realOffsetWidth;
-
- let flexibleSpaceSizeWithHiddenItems = this._flexibleSpaceBeforeElement.realOffsetWidth - this._flexibleSpaceAfterElement.realOffsetWidth;
-
- this._tabContainer.classList.add("calculate-width");
-
- for (let item of this._tabBarItems)
- item.hidden = item === this._tabPickerTabBarItem;
-
- let flexibleSpaceSizeWithoutHiddenItems = this._flexibleSpaceBeforeElement.realOffsetWidth - this._flexibleSpaceAfterElement.realOffsetWidth;
-
function measureItemWidth(item) {
if (!item[WI.TabBar.CachedWidthSymbol])
item[WI.TabBar.CachedWidthSymbol] = item.element.realOffsetWidth + tabBarItemHorizontalMargin;
@@ -452,37 +441,45 @@
return item[WI.TabBar.CachedWidthSymbol];
}
- let recalculateItemWidths = () => {
- return this._tabBarItems.reduce((total, item) => {
- item[WI.TabBar.CachedWidthSymbol] = undefined;
- return total + measureItemWidth(item);
- }, tabBarItemHorizontalMargin);
- };
+ let availableSpace = this._tabContainer.realOffsetWidth - tabBarHorizontalPadding;
+ this._tabContainer.classList.add("calculate-width");
+
this._hiddenTabBarItems = [];
- let availableSpace = barWidth - Math.max(0, Math.min(flexibleSpaceSizeWithHiddenItems, flexibleSpaceSizeWithoutHiddenItems)) - tabBarHozirontalPadding - tabBarItemHorizontalMargin + 1;
+ let normalTabBarItems = [];
+ let normalTabBarItemsWidth = 0;
+ for (let tabBarItem of this._tabBarItemsFromLeftToRight()) {
+ if (tabBarItem === this._tabPickerTabBarItem) {
+ tabBarItem.hidden = true;
+ continue;
+ }
- let totalItemWidth = recalculateItemWidths();
- if (totalItemWidth > availableSpace) {
- totalItemWidth = recalculateItemWidths();
- if (totalItemWidth > availableSpace) {
- this._tabPickerTabBarItem.hidden = false;
- totalItemWidth += measureItemWidth(this._tabPickerTabBarItem);
+ tabBarItem.hidden = false;
+
+ if (tabBarItem instanceof WI.PinnedTabBarItem)
+ availableSpace -= measureItemWidth(tabBarItem);
+ else {
+ normalTabBarItems.push(tabBarItem);
+ normalTabBarItemsWidth += measureItemWidth(tabBarItem);
}
+ }
- let tabBarItems = this._tabBarItemsFromLeftToRight();
- let index = tabBarItems.length;
- while (totalItemWidth > availableSpace && --index >= 0) {
- let item = tabBarItems[index];
- if (item === this.selectedTabBarItem || item instanceof WI.PinnedTabBarItem)
+ if (normalTabBarItemsWidth > availableSpace) {
+ this._tabPickerTabBarItem.hidden = false;
+ availableSpace -= measureItemWidth(this._tabPickerTabBarItem);
+
+ let index = normalTabBarItems.length - 1;
+ do {
+ let tabBarItem = normalTabBarItems[index];
+ if (tabBarItem === this._selectedTabBarItem)
continue;
- totalItemWidth -= measureItemWidth(item);
- item.hidden = true;
+ normalTabBarItemsWidth -= measureItemWidth(tabBarItem);
- this._hiddenTabBarItems.push(item);
- }
+ tabBarItem.hidden = true;
+ this._hiddenTabBarItems.push(tabBarItem);
+ } while (normalTabBarItemsWidth > availableSpace && --index >= 0);
}
this._tabContainer.classList.remove("calculate-width");
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
