- Revision
- 281182
- Author
- drou...@apple.com
- Date
- 2021-08-17 23:50:16 -0700 (Tue, 17 Aug 2021)
Log Message
Web Inspector: match the undocked tab bar style when docked bottom/side
https://bugs.webkit.org/show_bug.cgi?id=212398
Reviewed by Timothy Hatcher.
Source/WebCore:
* inspector/InspectorFrontendHost.cpp:
(WebCore::InspectorFrontendHost::platformVersionName const):
Add macOS Monterey.
Source/WebInspectorUI:
This will avoid confusion when switching from docked to undocked (and vice versa) as the tab
bar UI will no longer be significantly different.
* UserInterface/Views/TabBar.js:
(WI.TabBar):
(WI.TabBar.prototype.layout):
(WI.TabBar.prototype.layout.measureWidth):
(WI.TabBar.prototype._recordTabBarItemSizesAndPositions):
(WI.TabBar.prototype._applyTabBarItemSizesAndPositions):
(WI.TabBar.prototype._clearTabBarItemSizesAndPositions):
(WI.TabBar.prototype._handleMouseDown):
(WI.TabBar.prototype._handleMouseMoved):
(WI.TabBar.get horizontalPadding): Deleted.
(WI.TabBar.prototype._recordTabBarItemSizesAndPositions.add): Deleted.
* UserInterface/Views/TabBar.css:
(.tab-bar):
(body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.
(body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.
(body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar, body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar): Added.
(.tab-bar > .tabs > .item):
(body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item): Added.
(body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item): Added.
(.tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned)):
(.tab-bar > .tabs > .item:nth-child(n + 2 of :not(.hidden)), .tab-bar > .tabs:not(.hide-border-start) > .item:nth-child(1 of :not(.hidden)), .tab-bar > .tabs.dragging-tab > .item.selected):
(.tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden))):
(body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.
(body:is(.mac-platform.monterey, .mac-platform.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Added.
(body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.
(body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Added.
(body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Added.
(.tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover, .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item):
(.tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover):
(body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item, body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item): Added.
(body.window-inactive .tab-bar > .tabs > .item):
(body.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected):
(.tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected):
(body.window-inactive .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, body.window-inactive .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), body.window-inactive .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected):
(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar, body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.
(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.
(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.
(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item): Added.
(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.
(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.
(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Added.
(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Added.
(@media (prefers-color-scheme: dark) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover > .icon):
(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar, body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar): Added.
(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item): Added.
(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item): Added.
(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.
(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.
(body.big-sur .tab-bar): Deleted.
(body:not(.docked) .tab-bar): Deleted.
(body.big-sur:not(.docked) .tab-bar): Deleted.
(body:not(.big-sur):not(.docked) .tab-bar): Deleted.
(body.big-sur:not(.docked).window-inactive .tab-bar, body:not(.big-sur):not(.docked).window-inactive .tab-bar): Deleted.
(body.docked.window-inactive .tab-bar): Deleted.
(body.docked.bottom .tab-bar > .border.top): Deleted.
(body.big-sur.docked .tab-bar > .border.bottom): Deleted.
(body.docked .tab-bar .tabs): Deleted.
(body.docked .tab-bar > .tabs > .flexible-space): Deleted.
(body.docked.bottom .tab-bar > .tabs > .flexible-space): Deleted.
(body:not(.docked) .tab-bar > .tabs > .item): Deleted.
(body.big-sur:not(.docked) .tab-bar > .tabs > .item): Deleted.
(body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item): Deleted.
(body:not(.docked) .tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned)): Deleted.
(body.docked .tab-bar > .tabs > .item): Deleted.
(body:not(.docked) .tab-bar > .tabs > .item:nth-child(n + 3 of :not(.hidden)), body:not(.docked) .tab-bar > .tabs:not(.hide-border-start) > .item:nth-child(2 of :not(.hidden)), .tab-bar > .tabs.dragging-tab > .item.selected): Deleted.
(body:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden))): Deleted.
(body.docked .tab-bar > .tabs > .item.pinned): Deleted.
(body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
(body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
(body.docked .tab-bar > .tabs > .item:not(.disabled):matches(.selected, :hover)): Deleted.
(body.docked .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
(body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
(body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
(body.docked .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
(body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover, body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item): Deleted.
(body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover): Deleted.
(body:not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.
(body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item, body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.
(body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
(body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
(body:not(.docked) .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, body:not(.docked) .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), body:not(.docked) .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected): Deleted.
(body:not(.docked).window-inactive .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, body:not(.docked).window-inactive .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), body:not(.docked).window-inactive .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected): Deleted.
(@media (prefers-color-scheme: dark) body.big-sur .tab-bar, body:not(.big-sur) .tab-bar): Deleted.
(@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar): Deleted.
(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar): Deleted.
(@media (prefers-color-scheme: dark) body.docked .tab-bar): Deleted.
(@media (prefers-color-scheme: dark) body.docked.bottom .tab-bar > .border.top): Deleted.
(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item): Deleted.
(@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
(@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
(@media (prefers-color-scheme: dark) body.docked .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
(@media (prefers-color-scheme: dark) body.docked .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
(@media (prefers-color-scheme: dark) body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
(@media (prefers-color-scheme: dark) body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover > .icon): Deleted.
(@media (prefers-color-scheme: dark) body:not(.docked).window-inactive .tab-bar): Deleted.
(@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar, body:not(.big-sur):not(.docked).window-inactive .tab-bar): Deleted.
(@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.
(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.
(@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
* UserInterface/Views/TabBarItem.js:
(WI.TabBarItem.get horizontalMargin): Deleted.
- remove the flexible space filler elements (and associated CSS) before and after the tabs
- remove any `.docked` CSS
- remove the (now unnecessary) `:not(.docked)` from all CSS related to the `WI.TabBar`
- replace `.big-sur` with `.mac-platform.big-sur` for clarity
- add `.mac-platform.monterey` alongside any `.mac-platform.big-sur`
* UserInterface/Base/Main.js:
(WI.undockedTitleAreaHeight):
* UserInterface/Views/Main.css:
(body:is(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.
(body:not(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.
(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.
(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.
(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive #undocked-title-area): Added.
(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive #undocked-title-area): Added.
(body.big-sur #undocked-title-area): Deleted.
(body:not(.big-sur) #undocked-title-area): Deleted.
(@media (prefers-color-scheme: dark) body.big-sur #undocked-title-area): Deleted.
(@media (prefers-color-scheme: dark) body:not(.big-sur) #undocked-title-area): Deleted.
(@media (prefers-color-scheme: dark) body.big-sur.window-inactive #undocked-title-area): Deleted.
(@media (prefers-color-scheme: dark) body:not(.big-sur).window-inactive #undocked-title-area): Deleted.
* UserInterface/Views/Variables.css:
(body:is(.mac-platform.monterey, .mac-platform.big-sur)): Added.
(body:not(.mac-platform.monterey, .mac-platform.big-sur):not(.docked)): Added.
(body:is(.mac-platform.monterey, .mac-platform.big-sur):not(.docked)): Added.
(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur)): Added.
(body.big-sur): Deleted.
(body.mac-platform:not(.big-sur):not(.docked)): Deleted.
(body.mac-platform.big-sur:not(.docked)): Deleted.
(@media (prefers-color-scheme: dark) body.big-sur): Deleted.
Add support for macOS Monterey.
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (281181 => 281182)
--- trunk/Source/WebCore/ChangeLog 2021-08-18 06:26:20 UTC (rev 281181)
+++ trunk/Source/WebCore/ChangeLog 2021-08-18 06:50:16 UTC (rev 281182)
@@ -1,3 +1,14 @@
+2021-08-17 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: match the undocked tab bar style when docked bottom/side
+ https://bugs.webkit.org/show_bug.cgi?id=212398
+
+ Reviewed by Timothy Hatcher.
+
+ * inspector/InspectorFrontendHost.cpp:
+ (WebCore::InspectorFrontendHost::platformVersionName const):
+ Add macOS Monterey.
+
2021-08-17 Jer Noble <jer.no...@apple.com>
De-duplicate the Cocoa-specific MediaPlayerPrivateRemote constructor
Modified: trunk/Source/WebCore/inspector/InspectorFrontendHost.cpp (281181 => 281182)
--- trunk/Source/WebCore/inspector/InspectorFrontendHost.cpp 2021-08-18 06:26:20 UTC (rev 281181)
+++ trunk/Source/WebCore/inspector/InspectorFrontendHost.cpp 2021-08-18 06:50:16 UTC (rev 281182)
@@ -393,7 +393,9 @@
String InspectorFrontendHost::platformVersionName() const
{
-#if PLATFORM(MAC) && __MAC_OS_X_VERSION_MIN_REQUIRED >= 110000
+#if PLATFORM(MAC) && __MAC_OS_X_VERSION_MIN_REQUIRED >= 120000
+ return "monterey"_s;
+#elif PLATFORM(MAC) && __MAC_OS_X_VERSION_MIN_REQUIRED >= 110000
return "big-sur"_s;
#elif PLATFORM(MAC) && __MAC_OS_X_VERSION_MIN_REQUIRED >= 101500
return "catalina"_s;
Modified: trunk/Source/WebInspectorUI/ChangeLog (281181 => 281182)
--- trunk/Source/WebInspectorUI/ChangeLog 2021-08-18 06:26:20 UTC (rev 281181)
+++ trunk/Source/WebInspectorUI/ChangeLog 2021-08-18 06:50:16 UTC (rev 281182)
@@ -1,3 +1,149 @@
+2021-08-17 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: match the undocked tab bar style when docked bottom/side
+ https://bugs.webkit.org/show_bug.cgi?id=212398
+
+ Reviewed by Timothy Hatcher.
+
+ This will avoid confusion when switching from docked to undocked (and vice versa) as the tab
+ bar UI will no longer be significantly different.
+
+ * UserInterface/Views/TabBar.js:
+ (WI.TabBar):
+ (WI.TabBar.prototype.layout):
+ (WI.TabBar.prototype.layout.measureWidth):
+ (WI.TabBar.prototype._recordTabBarItemSizesAndPositions):
+ (WI.TabBar.prototype._applyTabBarItemSizesAndPositions):
+ (WI.TabBar.prototype._clearTabBarItemSizesAndPositions):
+ (WI.TabBar.prototype._handleMouseDown):
+ (WI.TabBar.prototype._handleMouseMoved):
+ (WI.TabBar.get horizontalPadding): Deleted.
+ (WI.TabBar.prototype._recordTabBarItemSizesAndPositions.add): Deleted.
+ * UserInterface/Views/TabBar.css:
+ (.tab-bar):
+ (body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.
+ (body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.
+ (body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar, body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar): Added.
+ (.tab-bar > .tabs > .item):
+ (body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item): Added.
+ (body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item): Added.
+ (.tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned)):
+ (.tab-bar > .tabs > .item:nth-child(n + 2 of :not(.hidden)), .tab-bar > .tabs:not(.hide-border-start) > .item:nth-child(1 of :not(.hidden)), .tab-bar > .tabs.dragging-tab > .item.selected):
+ (.tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden))):
+ (body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.
+ (body:is(.mac-platform.monterey, .mac-platform.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Added.
+ (body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.
+ (body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Added.
+ (body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Added.
+ (.tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover, .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item):
+ (.tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover):
+ (body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item, body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item): Added.
+ (body.window-inactive .tab-bar > .tabs > .item):
+ (body.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected):
+ (.tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected):
+ (body.window-inactive .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, body.window-inactive .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), body.window-inactive .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected):
+ (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar, body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.
+ (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.
+ (@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.
+ (@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item): Added.
+ (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.
+ (@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.
+ (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Added.
+ (@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Added.
+ (@media (prefers-color-scheme: dark) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover > .icon):
+ (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar, body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar): Added.
+ (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item): Added.
+ (@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item): Added.
+ (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.
+ (@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.
+ (body.big-sur .tab-bar): Deleted.
+ (body:not(.docked) .tab-bar): Deleted.
+ (body.big-sur:not(.docked) .tab-bar): Deleted.
+ (body:not(.big-sur):not(.docked) .tab-bar): Deleted.
+ (body.big-sur:not(.docked).window-inactive .tab-bar, body:not(.big-sur):not(.docked).window-inactive .tab-bar): Deleted.
+ (body.docked.window-inactive .tab-bar): Deleted.
+ (body.docked.bottom .tab-bar > .border.top): Deleted.
+ (body.big-sur.docked .tab-bar > .border.bottom): Deleted.
+ (body.docked .tab-bar .tabs): Deleted.
+ (body.docked .tab-bar > .tabs > .flexible-space): Deleted.
+ (body.docked.bottom .tab-bar > .tabs > .flexible-space): Deleted.
+ (body:not(.docked) .tab-bar > .tabs > .item): Deleted.
+ (body.big-sur:not(.docked) .tab-bar > .tabs > .item): Deleted.
+ (body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item): Deleted.
+ (body:not(.docked) .tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned)): Deleted.
+ (body.docked .tab-bar > .tabs > .item): Deleted.
+ (body:not(.docked) .tab-bar > .tabs > .item:nth-child(n + 3 of :not(.hidden)), body:not(.docked) .tab-bar > .tabs:not(.hide-border-start) > .item:nth-child(2 of :not(.hidden)), .tab-bar > .tabs.dragging-tab > .item.selected): Deleted.
+ (body:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden))): Deleted.
+ (body.docked .tab-bar > .tabs > .item.pinned): Deleted.
+ (body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
+ (body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
+ (body.docked .tab-bar > .tabs > .item:not(.disabled):matches(.selected, :hover)): Deleted.
+ (body.docked .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
+ (body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
+ (body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
+ (body.docked .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
+ (body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover, body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item): Deleted.
+ (body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover): Deleted.
+ (body:not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.
+ (body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item, body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.
+ (body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
+ (body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
+ (body:not(.docked) .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, body:not(.docked) .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), body:not(.docked) .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected): Deleted.
+ (body:not(.docked).window-inactive .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, body:not(.docked).window-inactive .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), body:not(.docked).window-inactive .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected): Deleted.
+ (@media (prefers-color-scheme: dark) body.big-sur .tab-bar, body:not(.big-sur) .tab-bar): Deleted.
+ (@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar): Deleted.
+ (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar): Deleted.
+ (@media (prefers-color-scheme: dark) body.docked .tab-bar): Deleted.
+ (@media (prefers-color-scheme: dark) body.docked.bottom .tab-bar > .border.top): Deleted.
+ (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item): Deleted.
+ (@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
+ (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
+ (@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
+ (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
+ (@media (prefers-color-scheme: dark) body.docked .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
+ (@media (prefers-color-scheme: dark) body.docked .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
+ (@media (prefers-color-scheme: dark) body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
+ (@media (prefers-color-scheme: dark) body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover > .icon): Deleted.
+ (@media (prefers-color-scheme: dark) body:not(.docked).window-inactive .tab-bar): Deleted.
+ (@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar, body:not(.big-sur):not(.docked).window-inactive .tab-bar): Deleted.
+ (@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.
+ (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.
+ (@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
+ (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
+ * UserInterface/Views/TabBarItem.js:
+ (WI.TabBarItem.get horizontalMargin): Deleted.
+ - remove the flexible space filler elements (and associated CSS) before and after the tabs
+ - remove any `.docked` CSS
+ - remove the (now unnecessary) `:not(.docked)` from all CSS related to the `WI.TabBar`
+ - replace `.big-sur` with `.mac-platform.big-sur` for clarity
+ - add `.mac-platform.monterey` alongside any `.mac-platform.big-sur`
+
+ * UserInterface/Base/Main.js:
+ (WI.undockedTitleAreaHeight):
+ * UserInterface/Views/Main.css:
+ (body:is(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.
+ (body:not(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.
+ (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.
+ (@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.
+ (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive #undocked-title-area): Added.
+ (@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive #undocked-title-area): Added.
+ (body.big-sur #undocked-title-area): Deleted.
+ (body:not(.big-sur) #undocked-title-area): Deleted.
+ (@media (prefers-color-scheme: dark) body.big-sur #undocked-title-area): Deleted.
+ (@media (prefers-color-scheme: dark) body:not(.big-sur) #undocked-title-area): Deleted.
+ (@media (prefers-color-scheme: dark) body.big-sur.window-inactive #undocked-title-area): Deleted.
+ (@media (prefers-color-scheme: dark) body:not(.big-sur).window-inactive #undocked-title-area): Deleted.
+ * UserInterface/Views/Variables.css:
+ (body:is(.mac-platform.monterey, .mac-platform.big-sur)): Added.
+ (body:not(.mac-platform.monterey, .mac-platform.big-sur):not(.docked)): Added.
+ (body:is(.mac-platform.monterey, .mac-platform.big-sur):not(.docked)): Added.
+ (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur)): Added.
+ (body.big-sur): Deleted.
+ (body.mac-platform:not(.big-sur):not(.docked)): Deleted.
+ (body.mac-platform.big-sur:not(.docked)): Deleted.
+ (@media (prefers-color-scheme: dark) body.big-sur): Deleted.
+ Add support for macOS Monterey.
+
2021-08-17 Razvan Caliman <rcali...@apple.com>
Web Inspector: Do not show contextual documentation popup in the Changes panel
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (281181 => 281182)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2021-08-18 06:26:20 UTC (rev 281181)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2021-08-18 06:50:16 UTC (rev 281182)
@@ -2909,13 +2909,14 @@
if (WI.Platform.name === "mac") {
switch (WI.Platform.version.name) {
+ case "monterey":
case "big-sur":
- /* keep in sync with `body.mac-platform.big-sur:not(.docked)` */
+ /* Keep in sync with `--undocked-title-area-height` CSS variable. */
return 27 / WI.getZoomFactor();
case "catalina":
case "mojave":
- /* keep in sync with `body.mac-platform:not(.big-sur):not(.docked)` */
+ /* Keep in sync with `--undocked-title-area-height` CSS variable. */
return 22 / WI.getZoomFactor();
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (281181 => 281182)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2021-08-18 06:26:20 UTC (rev 281181)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2021-08-18 06:50:16 UTC (rev 281182)
@@ -118,11 +118,11 @@
background: var(--undocked-title-area-background);
}
-body.big-sur #undocked-title-area {
+body:is(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area {
--undocked-title-area-background: white;
}
-body:not(.big-sur) #undocked-title-area {
+body:not(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area {
--undocked-title-area-background: linear-gradient(to bottom, hsl(0, 0%, 92%), hsl(0, 0%, 87%));
box-shadow: inset hsla(0, 0%, 100%, 0.5) 0 1px 1px;
}
@@ -590,19 +590,19 @@
box-shadow: none;
}
- body.big-sur #undocked-title-area {
- --undocked-title-area-background: hsl(0, 0%, 19%);
+ body:is(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area {
+ --undocked-title-area-background: var(--background-color-content);
}
- body:not(.big-sur) #undocked-title-area {
+ body:not(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area {
--undocked-title-area-background: linear-gradient(to bottom, hsl(0, 0%, 26%), hsl(0, 0%, 23%));
}
- body.big-sur.window-inactive #undocked-title-area {
+ body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive #undocked-title-area {
--undocked-title-area-background: hsl(0, 0%, 11%);
}
- body:not(.big-sur).window-inactive #undocked-title-area {
+ body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive #undocked-title-area {
--undocked-title-area-background: hsl(0, 0%, 19%);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css (281181 => 281182)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css 2021-08-18 06:26:20 UTC (rev 281181)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css 2021-08-18 06:50:16 UTC (rev 281182)
@@ -24,14 +24,14 @@
*/
.tab-bar {
+ display: flex;
position: absolute;
top: var(--undocked-title-area-height);
left: 0;
right: 0;
height: var(--tab-bar-height);
+ background: var(--tab-bar-background);
- display: flex;
-
--tab-item-dark-border-color: hsl(0, 0%, 59%);
--tab-item-medium-border-color: hsl(0, 0%, 65%);
--tab-item-light-border-color: hsl(0, 0%, 85%);
@@ -41,34 +41,24 @@
--tab-bar-border-z-index: 10;
}
-body.big-sur .tab-bar {
+body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar {
+ --tab-bar-background: hsl(0, 0%, 90%);
+
--tab-item-light-border-color: hsl(0, 0%, 85%);
--tab-item-medium-border-color: hsl(0, 0%, 85%);
--tab-item-dark-border-color: hsl(0, 0%, 75%);
}
-body:not(.docked) .tab-bar {
- background: var(--tab-bar-background);
-}
-
-body.big-sur:not(.docked) .tab-bar {
- --tab-bar-background: hsl(0, 0%, 90%);
-}
-
-body:not(.big-sur):not(.docked) .tab-bar {
+body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar {
background-size: 100% 200%;
--tab-bar-background: linear-gradient(to bottom, hsl(0, 0%, 78%), hsl(0, 0%, 72%));
}
-body.big-sur:not(.docked).window-inactive .tab-bar,
-body:not(.big-sur):not(.docked).window-inactive .tab-bar {
+body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar,
+body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar {
--tab-bar-background: hsl(0, 0%, 92%);
}
-body.docked.window-inactive .tab-bar {
- background-color: var(--background-color-unfocused);
-}
-
.tab-bar > .border {
position: absolute;
left: 0;
@@ -87,14 +77,6 @@
height: 1px;
}
-body.docked.bottom .tab-bar > .border.top {
- filter: brightness(80%);
-}
-
-body.big-sur.docked .tab-bar > .border.bottom {
- background-color: var(--border-color);
-}
-
body.window-inactive .tab-bar > .border {
background-color: var(--tab-item-light-border-color);
}
@@ -134,19 +116,6 @@
height: 100%;
}
-body.docked .tab-bar .tabs {
- justify-content: space-around;
- padding: 0 4px; /* Keep in sync with `WI.TabBar.horizontalPadding` */
-}
-
-body.docked .tab-bar > .tabs > .flexible-space {
- flex-grow: 1;
-}
-
-body.docked.bottom .tab-bar > .tabs > .flexible-space {
- cursor: row-resize;
-}
-
.tab-bar > .tabs > .item {
display: flex;
@@ -164,6 +133,10 @@
line-height: 15px;
outline: none;
+ border-top: var(--tab-item-medium-border-style);
+ border-bottom: var(--tab-item-medium-border-style);
+ background: var(--tab-item-background);
+
/* FIXME: These cause noticeable transitions when focusing the window. Fix that with _javascript_? */
/* transition-property: background-position, border-color; */
/* transition-duration: 250ms; */
@@ -172,44 +145,31 @@
--tab-bar-item-height: 100%;
}
-body:not(.docked) .tab-bar > .tabs > .item {
- border-top: var(--tab-item-medium-border-style);
- border-bottom: var(--tab-item-medium-border-style);
- background: var(--tab-item-background);
-}
-
-body.big-sur:not(.docked) .tab-bar > .tabs > .item {
+body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item {
--tab-item-background: var(--tab-bar-background);
}
-body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item {
+body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item {
background-size: 100% 200%;
--tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 78%), hsl(0, 0%, 72%));
}
-body:not(.docked) .tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned) {
+.tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned) {
flex-grow: 1;
}
-body.docked .tab-bar > .tabs > .item {
- margin: var(--tab-bar-item-vertical-margin) 2px 0; /* Keep in sync with `WI.TabBarItem.horizontalMargin` */
-
- --tab-bar-item-height: calc(var(--tab-bar-height) - (2 * var(--tab-bar-item-vertical-margin)));
- --tab-bar-item-vertical-margin: 4px;
-}
-
.tab-bar > .tabs.calculate-width > .item:not(.pinned) {
flex: initial;
}
-body:not(.docked) .tab-bar > .tabs > .item:nth-child(n + 3 of :not(.hidden)),
-body:not(.docked) .tab-bar > .tabs:not(.hide-border-start) > .item:nth-child(2 of :not(.hidden)),
-body:not(.docked) .tab-bar > .tabs.dragging-tab > .item.selected {
+.tab-bar > .tabs > .item:nth-child(n + 2 of :not(.hidden)),
+.tab-bar > .tabs:not(.hide-border-start) > .item:nth-child(1 of :not(.hidden)),
+.tab-bar > .tabs.dragging-tab > .item.selected {
border-inline-start: var(--tab-item-medium-border-style);
}
-body:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden)) {
+.tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden)) {
border-inline-end: var(--tab-item-medium-border-style);
}
@@ -220,51 +180,38 @@
padding: 0;
}
-body.docked .tab-bar > .tabs > .item.pinned {
- width: var(--tab-bar-item-height); /* Make pinned tabs square */
+body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected {
+ --tab-item-background: white;
}
-body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
+body:is(.mac-platform.monterey, .mac-platform.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
border-top-color: var(--tab-item-background);
-
- --tab-item-background: white;
}
-body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
+body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected {
--tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 87%), hsl(0, 0%, 82%));
background-size: 100% 100%;
}
-body.docked .tab-bar > .tabs > .item:not(.disabled):matches(.selected, :hover) {
- border-radius: var(--tab-bar-item-vertical-margin);
-}
-
-body.docked .tab-bar > .tabs > .item:not(.disabled).selected {
- background-color: lightgrey;
-}
-
-body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
+body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
--tab-item-background: hsl(0, 0%, 84%);
}
-body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
+body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
--tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 67%), hsl(0, 0%, 64%));
}
-body.docked .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
- background-color: hsl(0, 0%, 95%);
-}
-
-body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover,
-body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item {
+.tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover,
+.tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item {
border-inline-start-color: var(--tab-item-dark-border-color);
}
-body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover {
+.tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover {
border-inline-end-color: var(--tab-item-dark-border-color);
}
-body:not(.docked).window-inactive .tab-bar > .tabs > .item {
+body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item,
+body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item {
border-top-color: var(--tab-item-light-border-color);
border-bottom-color: var(--tab-item-light-border-color);
border-right-color: var(--tab-item-light-border-color) !important;
@@ -273,23 +220,14 @@
transition: none;
}
-body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item,
-body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item {
+body.window-inactive .tab-bar > .tabs > .item {
--tab-item-background: hsl(0, 0%, 92%);
}
-body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
+body.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
--tab-item-background: hsl(0, 0%, 96%);
}
-body.docked .tab-bar > .tabs > .item:not(.disabled):matches(.selected, :hover) {
- box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.15) inset;
-}
-
-body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
- background-color: hsl(0, 0%, 90%);
-}
-
.tab-bar > .tabs > .item > .flex-space {
display: flex;
flex: 1;
@@ -394,15 +332,15 @@
padding: 0;
}
-body:not(.docked) .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected,
-body:not(.docked) .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)),
-body:not(.docked) .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected {
+.tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected,
+.tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)),
+.tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected {
border-right: var(--tab-item-medium-border-style);
}
-body:not(.docked).window-inactive .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected,
-body:not(.docked).window-inactive .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)),
-body:not(.docked).window-inactive .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected {
+body.window-inactive .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected,
+body.window-inactive .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)),
+body.window-inactive .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected {
border-right-color: var(--tab-item-light-border-color);
}
@@ -412,8 +350,8 @@
}
@media (prefers-color-scheme: dark) {
- body.big-sur .tab-bar,
- body:not(.big-sur) .tab-bar {
+ body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar,
+ body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar {
/* FIXME: <https://webkit.org/b/189769> Dark Mode: use semantic color names */
--tab-item-dark-border-color: var(--tab-item-border-color);
--tab-item-medium-border-color: var(--tab-item-border-color);
@@ -421,84 +359,61 @@
--tab-item-border-color: hsl(0, 0%, 36%);
}
- body.big-sur:not(.docked) .tab-bar {
+ body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar {
--tab-bar-background: hsl(0, 0%, 8%);
}
- body:not(.big-sur):not(.docked) .tab-bar {
+ body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar {
background-image: linear-gradient(to bottom, hsl(0, 0%, 12%), hsl(0, 0%, 10%));
}
- body.docked .tab-bar {
- background-color: hsl(0, 0%, 10%);
- }
-
- body.docked.bottom .tab-bar > .border.top {
- filter: brightness(120%);
- }
-
- body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item {
+ body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item {
--tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 12%), hsl(0, 0%, 10%));
}
- body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
- --tab-item-background: hsl(0, 0%, 19%);
+ body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected {
+ --tab-item-background: var(--background-color-content);
}
- body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
+ body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected {
--tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 23%), hsl(0, 0%, 21%));
}
- body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
+ body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
--tab-item-background: hsl(0, 0%, 7%);
}
- body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
+ body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
--tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 11%), hsl(0, 0%, 9%));
}
- body.docked .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
- background-color: hsl(0, 0%, 15%);
- }
-
- body.docked .tab-bar > .tabs > .item:not(.disabled).selected {
- background-color: var(--background-color);
- }
-
- body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
- background-color: hsl(0, 0%, 20%);
- }
-
.tab-bar > .tabs > .item > .icon {
filter: var(--filter-invert);
}
- body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover > .icon {
+ .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover > .icon {
opacity: 0.6;
}
- body:not(.docked).window-inactive .tab-bar {
+ body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar,
+ body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar {
+ --tab-bar-background: hsl(0, 0%, 7%);
--tab-item-border-color: hsl(0, 0%, 34%);
}
- body.big-sur:not(.docked).window-inactive .tab-bar,
- body:not(.big-sur):not(.docked).window-inactive .tab-bar {
- --tab-bar-background: hsl(0, 0%, 7%);
- }
-
- body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item {
+ body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item {
--tab-item-background: hsl(0, 0%, 7%);
}
- body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item {
+ body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item {
--tab-item-background: hsl(0, 0%, 13%);
}
- body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
+ body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
--tab-item-background: hsl(0, 0%, 11%);
}
- body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
+ body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
--tab-item-background: hsl(0, 0%, 19%);
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js (281181 => 281182)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js 2021-08-18 06:26:20 UTC (rev 281181)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js 2021-08-18 06:50:16 UTC (rev 281182)
@@ -46,12 +46,6 @@
this._tabContainer.addEventListener("mouseleave", this._handleTabContainerMouseLeave.bind(this));
this._tabContainer.addEventListener("contextmenu", this._handleTabContainerContextMenu.bind(this));
- this._flexibleSpaceBeforeElement = this._tabContainer.appendChild(document.createElement("div"));
- this._flexibleSpaceBeforeElement.className = "flexible-space";
-
- this._flexibleSpaceAfterElement = this._tabContainer.appendChild(document.createElement("div"));
- this._flexibleSpaceAfterElement.className = "flexible-space";
-
const navigationBarAfterElement = null;
this._navigationBarAfter = new WI.NavigationBar(navigationBarAfterElement, {sizesToFit: true});
this.addSubview(this._navigationBarAfter);
@@ -72,13 +66,6 @@
this._isDragging = false;
}
- // Static
-
- static get horizontalPadding()
- {
- return (WI.dockConfiguration === WI.DockConfiguration.Undocked) ? 0 : 8; // Keep in sync with `body.docked .tab-bar .tabs`
- }
-
// Public
addNavigationItemBefore(navigationItem)
@@ -141,15 +128,15 @@
let nextSibling = this._tabBarItems[index + 1] || this._tabBarItems.lastValue;
if (this._tabContainer.contains(nextSibling.element)) {
- if (!(tabBarItem instanceof WI.PinnedTabBarItem) && nextSibling instanceof WI.PinnedTabBarItem && nextSibling !== this._tabPickerTabBarItem)
- this._tabContainer.insertBefore(tabBarItem.element, this._flexibleSpaceAfterElement);
+ if (!(tabBarItem instanceof WI.PinnedTabBarItem) && nextSibling instanceof WI.PinnedTabBarItem)
+ this._tabContainer.insertBefore(tabBarItem.element, this._tabPickerTabBarItem.element);
else
this._tabContainer.insertBefore(tabBarItem.element, nextSibling.element);
} else {
- if (tabBarItem instanceof WI.PinnedTabBarItem && tabBarItem !== this._tabPickerTabBarItem)
+ if (tabBarItem instanceof WI.PinnedTabBarItem)
this._tabContainer.appendChild(tabBarItem.element);
else
- this._tabContainer.insertBefore(tabBarItem.element, this._flexibleSpaceAfterElement);
+ this._tabContainer.insertBefore(tabBarItem.element, this._tabPickerTabBarItem.element);
}
this._tabContainer.classList.toggle("single-tab", !this._hasMoreThanOneNormalTab());
@@ -442,18 +429,15 @@
if (this._tabContainer.classList.contains("static-layout"))
return;
- const tabBarHorizontalPadding = WI.TabBar.horizontalPadding;
- const tabBarItemHorizontalMargin = WI.TabBarItem.horizontalMargin;
-
let undocked = WI.dockConfiguration === WI.DockConfiguration.Undocked;
function measureWidth(tabBarItem) {
if (!tabBarItem[WI.TabBar.CachedWidthSymbol])
- tabBarItem[WI.TabBar.CachedWidthSymbol] = tabBarItem.element.realOffsetWidth + tabBarItemHorizontalMargin;
+ tabBarItem[WI.TabBar.CachedWidthSymbol] = tabBarItem.element.realOffsetWidth;
return tabBarItem[WI.TabBar.CachedWidthSymbol];
}
- let availableSpace = this._tabContainer.realOffsetWidth - tabBarHorizontalPadding;
+ let availableSpace = this._tabContainer.realOffsetWidth;
this._tabContainer.classList.add("calculate-width");
@@ -552,27 +536,19 @@
_recordTabBarItemSizesAndPositions()
{
- const tabBarItemLeftMargin = WI.TabBarItem.horizontalMargin / 2;
-
var tabBarItemSizesAndPositions = new Map;
let barRect = this._tabContainer.getBoundingClientRect();
- function add(key, element, leftMargin) {
- let boundingRect = element.getBoundingClientRect();
- tabBarItemSizesAndPositions.set(key, {
- left: boundingRect.left - barRect.left - leftMargin,
- width: boundingRect.width,
- });
- }
-
- add(this._flexibleSpaceBeforeElement, this._flexibleSpaceBeforeElement, 0);
- add(this._flexibleSpaceAfterElement, this._flexibleSpaceAfterElement, 0);
for (let tabBarItem of this._tabBarItems) {
if (tabBarItem.hidden)
continue;
- add(tabBarItem, tabBarItem.element, tabBarItemLeftMargin);
+ let boundingRect = tabBarItem.element.getBoundingClientRect();
+ tabBarItemSizesAndPositions.set(tabBarItem, {
+ left: boundingRect.left - barRect.left,
+ width: boundingRect.width,
+ });
}
return tabBarItemSizesAndPositions;
@@ -584,22 +560,13 @@
if (skipTabBarItem && tabBarItem === skipTabBarItem)
continue;
- let isFlexibleSpace = tabBarItem === this._flexibleSpaceBeforeElement || tabBarItem === this._flexibleSpaceAfterElement;
-
- let element = isFlexibleSpace ? tabBarItem : tabBarItem.element;
- element.style.left = sizeAndPosition.left + "px";
- element.style.width = sizeAndPosition.width + "px";
+ tabBarItem.element.style.left = sizeAndPosition.left + "px";
+ tabBarItem.element.style.width = sizeAndPosition.width + "px";
}
}
_clearTabBarItemSizesAndPositions(skipTabBarItem)
{
- this._flexibleSpaceBeforeElement.style.left = null;
- this._flexibleSpaceBeforeElement.style.width = null;
-
- this._flexibleSpaceAfterElement.style.left = null;
- this._flexibleSpaceAfterElement.style.width = null;
-
for (var tabBarItem of this._tabBarItems) {
if (skipTabBarItem && tabBarItem === skipTabBarItem)
continue;
@@ -663,7 +630,7 @@
if (event.button !== 0 || event.ctrlKey)
return;
- if (event.target !== this.element && event.target !== this._flexibleSpaceBeforeElement && event.target !== this._flexibleSpaceAfterElement)
+ if (event.target !== this.element)
return;
switch (WI.dockConfiguration) {
@@ -807,9 +774,6 @@
this._isDragging = true;
}
- const tabBarLeftPadding = WI.TabBar.horizontalPadding / 2;
- const tabBarItemHorizontalMargin = WI.TabBarItem.horizontalMargin;
-
event.preventDefault();
event.stopPropagation();
@@ -826,7 +790,7 @@
this._selectedTabBarItem.element.style.left = newLeft + "px";
- let selectedTabMidX = containerOffset + newLeft + ((this._selectedTabBarItem.element.realOffsetWidth + tabBarItemHorizontalMargin) / 2);
+ let selectedTabMidX = containerOffset + newLeft + (this._selectedTabBarItem.element.realOffsetWidth / 2);
var currentIndex = this._tabBarItems.indexOf(this._selectedTabBarItem);
var newIndex = currentIndex;
@@ -862,32 +826,19 @@
// FIXME: Animate the tabs that move to make room for the selected tab. This was causing me trouble when I tried.
- let isLTR = WI.resolvedLayoutDirection() === WI.LayoutDirection.LTR;
-
function inlineStyleValue(element, property) {
return element.style.getPropertyCSSValue(property).getFloatValue(CSSPrimitiveValue.CSS_PX) || 0;
}
- let offsetAfter = inlineStyleValue(this._flexibleSpaceAfterElement, "width");
-
- let accumulatedLeft = isLTR ? (inlineStyleValue(this._flexibleSpaceBeforeElement, "width") + inlineStyleValue(this._flexibleSpaceBeforeElement, "left")) : tabBarLeftPadding;
+ let accumulatedLeft = 0;
for (let tabBarItem of this._tabBarItemsFromLeftToRight()) {
if (tabBarItem.hidden)
continue;
- if (tabBarItem !== this._selectedTabBarItem && inlineStyleValue(tabBarItem.element, "left") !== accumulatedLeft) {
- let left = accumulatedLeft;
- if (isLTR) {
- if (tabBarItem instanceof WI.PinnedTabBarItem && tabBarItem !== this._tabPickerTabBarItem)
- left += offsetAfter;
- } else {
- if (!(tabBarItem instanceof WI.PinnedTabBarItem) || tabBarItem === this._tabPickerTabBarItem)
- left += offsetAfter;
- }
- tabBarItem.element.style.left = left + "px";
- }
+ if (tabBarItem !== this._selectedTabBarItem && inlineStyleValue(tabBarItem.element, "left") !== accumulatedLeft)
+ tabBarItem.element.style.left = accumulatedLeft + "px";
- accumulatedLeft += inlineStyleValue(tabBarItem.element, "width") + tabBarItemHorizontalMargin;
+ accumulatedLeft += inlineStyleValue(tabBarItem.element, "width");
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js (281181 => 281182)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js 2021-08-18 06:26:20 UTC (rev 281181)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js 2021-08-18 06:50:16 UTC (rev 281182)
@@ -50,13 +50,6 @@
this.image = image;
}
- // Static
-
- static get horizontalMargin()
- {
- return (WI.dockConfiguration === WI.DockConfiguration.Undocked) ? 0 : 4; // Keep in sync with `body.docked .tab-bar > .tabs > .item`
- }
-
// Public
get element() { return this._element; }
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (281181 => 281182)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2021-08-18 06:26:20 UTC (rev 281181)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2021-08-18 06:50:16 UTC (rev 281182)
@@ -230,7 +230,7 @@
--border-color: hsl(0, 0%, 85%);
}
-body.big-sur {
+body:is(.mac-platform.monterey, .mac-platform.big-sur) {
--text-color: hsl(0, 0%, 15%);
--background-color-intermediate: hsl(0, 0%, 98.5%);
@@ -246,12 +246,12 @@
--sorted-header-font-weight: 700;
}
-body.mac-platform:not(.big-sur):not(.docked) {
+body:not(.mac-platform.monterey, .mac-platform.big-sur):not(.docked) {
/* keep in sync with `WI.undockedTitleAreaHeight` */
--undocked-title-area-height: calc(22px / var(--zoom-factor));
}
-body.mac-platform.big-sur:not(.docked) {
+body:is(.mac-platform.monterey, .mac-platform.big-sur):not(.docked) {
/* keep in sync with `WI.undockedTitleAreaHeight` */
--undocked-title-area-height: calc(27px / var(--zoom-factor));
}
@@ -384,10 +384,6 @@
--diff-deletion-background-color: hsl(5, 40%, 28%);
}
- body.big-sur {
- --glyph-color: hsl(0, 0%, 69%);
- --glyph-color-pressed: hsl(0, 0%, 100%);
- }
body.window-inactive {
--border-color: hsl(0, 0%, 33%);
@@ -398,7 +394,7 @@
--glyph-color-disabled: hsla(0, 0%, 52%, 0.4);
}
- body.big-sur {
+ body:is(.mac-platform.monterey, .mac-platform.big-sur) {
--text-color: hsl(0, 0%, 85%);
--background-color: hsl(0, 0%, 20%);
@@ -408,6 +404,9 @@
--background-color-content: hsl(0, 0%, 17%);
--background-color-intermediate: hsl(0, 0%, 19%);
+ --glyph-color: hsl(0, 0%, 69%);
+ --glyph-color-pressed: hsl(0, 0%, 100%);
+
--panel-background-color: hsl(0, 0%, 20%);
--panel-background-color-light: hsl(0, 0%, 25%);
