Changeset 281182 in webkit


Ignore:
Timestamp:
Aug 17, 2021 11:50:16 PM (11 months ago)
Author:
Devin Rousso
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.

Location:
trunk/Source
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r281157 r281182  
     12021-08-17  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: match the undocked tab bar style when docked bottom/side
     4        https://bugs.webkit.org/show_bug.cgi?id=212398
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        * inspector/InspectorFrontendHost.cpp:
     9        (WebCore::InspectorFrontendHost::platformVersionName const):
     10        Add macOS Monterey.
     11
    1122021-08-17  Jer Noble  <jer.noble@apple.com>
    213

  • trunk/Source/WebCore/inspector/InspectorFrontendHost.cpp

    r279645 r281182  
    394394String InspectorFrontendHost::platformVersionName() const
    395395{
    396 #if PLATFORM(MAC) && __MAC_OS_X_VERSION_MIN_REQUIRED >= 110000
     396#if PLATFORM(MAC) && __MAC_OS_X_VERSION_MIN_REQUIRED >= 120000
     397    return "monterey"_s;
     398#elif PLATFORM(MAC) && __MAC_OS_X_VERSION_MIN_REQUIRED >= 110000
    397399    return "big-sur"_s;
    398400#elif PLATFORM(MAC) && __MAC_OS_X_VERSION_MIN_REQUIRED >= 101500

  • trunk/Source/WebInspectorUI/ChangeLog

    r281139 r281182  
     12021-08-17  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: match the undocked tab bar style when docked bottom/side
     4        https://bugs.webkit.org/show_bug.cgi?id=212398
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        This will avoid confusion when switching from docked to undocked (and vice versa) as the tab
     9        bar UI will no longer be significantly different.
     10
     11        * UserInterface/Views/TabBar.js:
     12        (WI.TabBar):
     13        (WI.TabBar.prototype.layout):
     14        (WI.TabBar.prototype.layout.measureWidth):
     15        (WI.TabBar.prototype._recordTabBarItemSizesAndPositions):
     16        (WI.TabBar.prototype._applyTabBarItemSizesAndPositions):
     17        (WI.TabBar.prototype._clearTabBarItemSizesAndPositions):
     18        (WI.TabBar.prototype._handleMouseDown):
     19        (WI.TabBar.prototype._handleMouseMoved):
     20        (WI.TabBar.get horizontalPadding): Deleted.
     21        (WI.TabBar.prototype._recordTabBarItemSizesAndPositions.add): Deleted.
     22        * UserInterface/Views/TabBar.css:
     23        (.tab-bar):
     24        (body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.
     25        (body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.
     26        (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.
     27        (.tab-bar > .tabs > .item):
     28        (body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item): Added.
     29        (body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item): Added.
     30        (.tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned)):
     31        (.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):
     32        (.tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden))):
     33        (body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.
     34        (body:is(.mac-platform.monterey, .mac-platform.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Added.
     35        (body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.
     36        (body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Added.
     37        (body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Added.
     38        (.tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover, .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item):
     39        (.tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover):
     40        (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.
     41        (body.window-inactive .tab-bar > .tabs > .item):
     42        (body.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected):
     43        (.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):
     44        (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):
     45        (@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.
     46        (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.
     47        (@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.
     48        (@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item): Added.
     49        (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.
     50        (@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.
     51        (@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.
     52        (@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.
     53        (@media (prefers-color-scheme: dark) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover > .icon):
     54        (@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.
     55        (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item): Added.
     56        (@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item): Added.
     57        (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.
     58        (@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.
     59        (body.big-sur .tab-bar): Deleted.
     60        (body:not(.docked) .tab-bar): Deleted.
     61        (body.big-sur:not(.docked) .tab-bar): Deleted.
     62        (body:not(.big-sur):not(.docked) .tab-bar): Deleted.
     63        (body.big-sur:not(.docked).window-inactive .tab-bar, body:not(.big-sur):not(.docked).window-inactive .tab-bar): Deleted.
     64        (body.docked.window-inactive .tab-bar): Deleted.
     65        (body.docked.bottom .tab-bar > .border.top): Deleted.
     66        (body.big-sur.docked .tab-bar > .border.bottom): Deleted.
     67        (body.docked .tab-bar .tabs): Deleted.
     68        (body.docked .tab-bar > .tabs > .flexible-space): Deleted.
     69        (body.docked.bottom .tab-bar > .tabs > .flexible-space): Deleted.
     70        (body:not(.docked) .tab-bar > .tabs > .item): Deleted.
     71        (body.big-sur:not(.docked) .tab-bar > .tabs > .item): Deleted.
     72        (body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item): Deleted.
     73        (body:not(.docked) .tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned)): Deleted.
     74        (body.docked .tab-bar > .tabs > .item): Deleted.
     75        (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.
     76        (body:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden))): Deleted.
     77        (body.docked .tab-bar > .tabs > .item.pinned): Deleted.
     78        (body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
     79        (body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
     80        (body.docked .tab-bar > .tabs > .item:not(.disabled):matches(.selected, :hover)): Deleted.
     81        (body.docked .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
     82        (body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
     83        (body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
     84        (body.docked .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
     85        (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.
     86        (body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover): Deleted.
     87        (body:not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.
     88        (body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item, body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.
     89        (body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
     90        (body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
     91        (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.
     92        (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.
     93        (@media (prefers-color-scheme: dark) body.big-sur .tab-bar, body:not(.big-sur) .tab-bar): Deleted.
     94        (@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar): Deleted.
     95        (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar): Deleted.
     96        (@media (prefers-color-scheme: dark) body.docked .tab-bar): Deleted.
     97        (@media (prefers-color-scheme: dark) body.docked.bottom .tab-bar > .border.top): Deleted.
     98        (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item): Deleted.
     99        (@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
     100        (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
     101        (@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
     102        (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
     103        (@media (prefers-color-scheme: dark) body.docked .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.
     104        (@media (prefers-color-scheme: dark) body.docked .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
     105        (@media (prefers-color-scheme: dark) body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
     106        (@media (prefers-color-scheme: dark) body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover > .icon): Deleted.
     107        (@media (prefers-color-scheme: dark) body:not(.docked).window-inactive .tab-bar): Deleted.
     108        (@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.
     109        (@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.
     110        (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.
     111        (@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
     112        (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.
     113        * UserInterface/Views/TabBarItem.js:
     114        (WI.TabBarItem.get horizontalMargin): Deleted.
     115         - remove the flexible space filler elements (and associated CSS) before and after the tabs
     116         - remove any `.docked` CSS
     117         - remove the (now unnecessary) `:not(.docked)` from all CSS related to the `WI.TabBar`
     118         - replace `.big-sur` with `.mac-platform.big-sur` for clarity
     119         - add `.mac-platform.monterey` alongside any `.mac-platform.big-sur`
     120
     121        * UserInterface/Base/Main.js:
     122        (WI.undockedTitleAreaHeight):
     123        * UserInterface/Views/Main.css:
     124        (body:is(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.
     125        (body:not(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.
     126        (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.
     127        (@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.
     128        (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive #undocked-title-area): Added.
     129        (@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive #undocked-title-area): Added.
     130        (body.big-sur #undocked-title-area): Deleted.
     131        (body:not(.big-sur) #undocked-title-area): Deleted.
     132        (@media (prefers-color-scheme: dark) body.big-sur #undocked-title-area): Deleted.
     133        (@media (prefers-color-scheme: dark) body:not(.big-sur) #undocked-title-area): Deleted.
     134        (@media (prefers-color-scheme: dark) body.big-sur.window-inactive #undocked-title-area): Deleted.
     135        (@media (prefers-color-scheme: dark) body:not(.big-sur).window-inactive #undocked-title-area): Deleted.
     136        * UserInterface/Views/Variables.css:
     137        (body:is(.mac-platform.monterey, .mac-platform.big-sur)): Added.
     138        (body:not(.mac-platform.monterey, .mac-platform.big-sur):not(.docked)): Added.
     139        (body:is(.mac-platform.monterey, .mac-platform.big-sur):not(.docked)): Added.
     140        (@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur)): Added.
     141        (body.big-sur): Deleted.
     142        (body.mac-platform:not(.big-sur):not(.docked)): Deleted.
     143        (body.mac-platform.big-sur:not(.docked)): Deleted.
     144        (@media (prefers-color-scheme: dark) body.big-sur): Deleted.
     145        Add support for macOS Monterey.
     146
    11472021-08-17  Razvan Caliman  <rcaliman@apple.com>
    2148

  • trunk/Source/WebInspectorUI/UserInterface/Base/Main.js

    r276714 r281182  
    29102910    if (WI.Platform.name === "mac") {
    29112911        switch (WI.Platform.version.name) {
     2912        case "monterey":
    29122913        case "big-sur":
    2913             /* keep in sync with `body.mac-platform.big-sur:not(.docked)` */
     2914            /* Keep in sync with `--undocked-title-area-height` CSS variable. */
    29142915            return 27 / WI.getZoomFactor();
    29152916
    29162917        case "catalina":
    29172918        case "mojave":
    2918             /* keep in sync with `body.mac-platform:not(.big-sur):not(.docked)` */
     2919            /* Keep in sync with `--undocked-title-area-height` CSS variable. */
    29192920            return 22 / WI.getZoomFactor();
    29202921        }

  • trunk/Source/WebInspectorUI/UserInterface/Views/Main.css

    r279510 r281182  
    119119}
    120120
    121 body.big-sur #undocked-title-area {
     121body:is(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area {
    122122    --undocked-title-area-background: white;
    123123}
    124124
    125 body:not(.big-sur) #undocked-title-area {
     125body:not(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area {
    126126    --undocked-title-area-background: linear-gradient(to bottom, hsl(0, 0%, 92%), hsl(0, 0%, 87%));
    127127    box-shadow: inset hsla(0, 0%, 100%, 0.5) 0 1px 1px;
    … …  
    591591    }
    592592
    593     body.big-sur #undocked-title-area {
    594         --undocked-title-area-background: hsl(0, 0%, 19%);
    595     }
    596 
    597     body:not(.big-sur) #undocked-title-area {
     593    body:is(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area {
     594        --undocked-title-area-background: var(--background-color-content);
     595    }
     596
     597    body:not(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area {
    598598        --undocked-title-area-background: linear-gradient(to bottom, hsl(0, 0%, 26%), hsl(0, 0%, 23%));
    599599    }
    600600
    601     body.big-sur.window-inactive #undocked-title-area {
     601    body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive #undocked-title-area {
    602602        --undocked-title-area-background: hsl(0, 0%, 11%);
    603603    }
    604604
    605     body:not(.big-sur).window-inactive #undocked-title-area {
     605    body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive #undocked-title-area {
    606606        --undocked-title-area-background: hsl(0, 0%, 19%);
    607607    }

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

    r269166 r281182  
    2525
    2626.tab-bar {
     27    display: flex;
    2728    position: absolute;
    2829    top: var(--undocked-title-area-height);
    … …  
    3031    right: 0;
    3132    height: var(--tab-bar-height);
    32 
    33     display: flex;
     33    background: var(--tab-bar-background);
    3434
    3535    --tab-item-dark-border-color: hsl(0, 0%, 59%);
    … …  
    4242}
    4343
    44 body.big-sur .tab-bar {
     44body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar {
     45    --tab-bar-background: hsl(0, 0%, 90%);
     46
    4547    --tab-item-light-border-color: hsl(0, 0%, 85%);
    4648    --tab-item-medium-border-color: hsl(0, 0%, 85%);
    … …  
    4850}
    4951
    50 body:not(.docked) .tab-bar {
    51     background: var(--tab-bar-background);
    52 }
    53 
    54 body.big-sur:not(.docked) .tab-bar {
    55     --tab-bar-background: hsl(0, 0%, 90%);
    56 }
    57 
    58 body:not(.big-sur):not(.docked) .tab-bar {
     52body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar {
    5953    background-size: 100% 200%;
    6054    --tab-bar-background: linear-gradient(to bottom, hsl(0, 0%, 78%), hsl(0, 0%, 72%));
    6155}
    6256
    63 body.big-sur:not(.docked).window-inactive .tab-bar,
    64 body:not(.big-sur):not(.docked).window-inactive .tab-bar {
     57body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar,
     58body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar {
    6559    --tab-bar-background: hsl(0, 0%, 92%);
    66 }
    67 
    68 body.docked.window-inactive .tab-bar {
    69     background-color: var(--background-color-unfocused);
    7060}
    7161
    … …  
    8878}
    8979
    90 body.docked.bottom .tab-bar > .border.top {
    91     filter: brightness(80%);
    92 }
    93 
    94 body.big-sur.docked .tab-bar > .border.bottom {
    95     background-color: var(--border-color);
    96 }
    97 
    9880body.window-inactive .tab-bar > .border {
    9981    background-color: var(--tab-item-light-border-color);
    … …  
    135117}
    136118
    137 body.docked .tab-bar .tabs {
    138     justify-content: space-around;
    139     padding: 0 4px; /* Keep in sync with `WI.TabBar.horizontalPadding` */
    140 }
    141 
    142 body.docked .tab-bar > .tabs > .flexible-space {
    143     flex-grow: 1;
    144 }
    145 
    146 body.docked.bottom .tab-bar > .tabs > .flexible-space {
    147     cursor: row-resize;
    148 }
    149 
    150119.tab-bar > .tabs > .item {
    151120    display: flex;
    … …  
    164133    line-height: 15px;
    165134    outline: none;
     135
     136    border-top: var(--tab-item-medium-border-style);
     137    border-bottom: var(--tab-item-medium-border-style);
     138    background: var(--tab-item-background);
    166139
    167140    /* FIXME: These cause noticeable transitions when focusing the window. Fix that with JavaScript? */
    … …  
    173146}
    174147
    175 body:not(.docked) .tab-bar > .tabs > .item {
    176     border-top: var(--tab-item-medium-border-style);
    177     border-bottom: var(--tab-item-medium-border-style);
    178     background: var(--tab-item-background);
    179 }
    180 
    181 body.big-sur:not(.docked) .tab-bar > .tabs > .item {
     148body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item {
    182149    --tab-item-background: var(--tab-bar-background);
    183150}
    184151
    185 body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item {
     152body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item {
    186153    background-size: 100% 200%;
    187154
    … …  
    189156}
    190157
    191 body:not(.docked) .tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned) {
     158.tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned) {
    192159    flex-grow: 1;
    193 }
    194 
    195 body.docked .tab-bar > .tabs > .item {
    196     margin: var(--tab-bar-item-vertical-margin) 2px 0; /* Keep in sync with `WI.TabBarItem.horizontalMargin` */
    197 
    198     --tab-bar-item-height: calc(var(--tab-bar-height) - (2 * var(--tab-bar-item-vertical-margin)));
    199     --tab-bar-item-vertical-margin: 4px;
    200160}
    201161
    … …  
    204164}
    205165
    206 body:not(.docked) .tab-bar > .tabs > .item:nth-child(n + 3 of :not(.hidden)),
    207 body:not(.docked) .tab-bar > .tabs:not(.hide-border-start) > .item:nth-child(2 of :not(.hidden)),
    208 body:not(.docked) .tab-bar > .tabs.dragging-tab > .item.selected {
     166.tab-bar > .tabs > .item:nth-child(n + 2 of :not(.hidden)),
     167.tab-bar > .tabs:not(.hide-border-start) > .item:nth-child(1 of :not(.hidden)),
     168.tab-bar > .tabs.dragging-tab > .item.selected {
    209169    border-inline-start: var(--tab-item-medium-border-style);
    210170}
    211171
    212 body:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden)) {
     172.tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden)) {
    213173    border-inline-end: var(--tab-item-medium-border-style);
    214174}
    … …  
    221181}
    222182
    223 body.docked .tab-bar > .tabs > .item.pinned {
    224     width: var(--tab-bar-item-height); /* Make pinned tabs square */
    225 }
    226 
    227 body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
     183body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected {
     184    --tab-item-background: white;
     185}
     186
     187body:is(.mac-platform.monterey, .mac-platform.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
    228188    border-top-color: var(--tab-item-background);
    229 
    230     --tab-item-background: white;
    231 }
    232 
    233 body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
     189}
     190
     191body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected {
    234192    --tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 87%), hsl(0, 0%, 82%));
    235193    background-size: 100% 100%;
    236194}
    237195
    238 body.docked .tab-bar > .tabs > .item:not(.disabled):matches(.selected, :hover) {
    239     border-radius: var(--tab-bar-item-vertical-margin);
    240 }
    241 
    242 body.docked .tab-bar > .tabs > .item:not(.disabled).selected {
    243     background-color: lightgrey;
    244 }
    245 
    246 body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
     196body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
    247197    --tab-item-background: hsl(0, 0%, 84%);
    248198}
    249199
    250 body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
     200body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
    251201    --tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 67%), hsl(0, 0%, 64%));
    252202}
    253203
    254 body.docked .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
    255     background-color: hsl(0, 0%, 95%);
    256 }
    257 
    258 body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover,
    259 body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item {
     204.tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover,
     205.tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item {
    260206    border-inline-start-color: var(--tab-item-dark-border-color);
    261207}
    262208
    263 body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover {
     209.tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover {
    264210    border-inline-end-color: var(--tab-item-dark-border-color);
    265211}
    266212
    267 body:not(.docked).window-inactive .tab-bar > .tabs > .item {
     213body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item,
     214body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item {
    268215    border-top-color: var(--tab-item-light-border-color);
    269216    border-bottom-color: var(--tab-item-light-border-color);
    … …  
    274221}
    275222
    276 body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item,
    277 body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item {
     223body.window-inactive .tab-bar > .tabs > .item {
    278224    --tab-item-background: hsl(0, 0%, 92%);
    279225}
    280226
    281 body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
     227body.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
    282228    --tab-item-background: hsl(0, 0%, 96%);
    283 }
    284 
    285 body.docked .tab-bar > .tabs > .item:not(.disabled):matches(.selected, :hover) {
    286     box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.15) inset;
    287 }
    288 
    289 body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
    290     background-color: hsl(0, 0%, 90%);
    291229}
    292230
    … …  
    395333}
    396334
    397 body:not(.docked) .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected,
    398 body:not(.docked) .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)),
    399 body:not(.docked) .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected {
     335.tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected,
     336.tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)),
     337.tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected {
    400338    border-right: var(--tab-item-medium-border-style);
    401339}
    402340
    403 body:not(.docked).window-inactive .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected,
    404 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)),
    405 body:not(.docked).window-inactive .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected {
     341body.window-inactive .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected,
     342body.window-inactive .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)),
     343body.window-inactive .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected {
    406344    border-right-color: var(--tab-item-light-border-color);
    407345}
    … …  
    413351
    414352@media (prefers-color-scheme: dark) {
    415     body.big-sur .tab-bar,
    416     body:not(.big-sur) .tab-bar {
     353    body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar,
     354    body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar {
    417355        /* FIXME: <https://webkit.org/b/189769> Dark Mode: use semantic color names */
    418356        --tab-item-dark-border-color: var(--tab-item-border-color);
    … …  
    422360    }
    423361
    424     body.big-sur:not(.docked) .tab-bar {
     362    body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar {
    425363        --tab-bar-background: hsl(0, 0%, 8%);
    426364    }
    427365
    428     body:not(.big-sur):not(.docked) .tab-bar {
     366    body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar {
    429367        background-image: linear-gradient(to bottom, hsl(0, 0%, 12%), hsl(0, 0%, 10%));
    430368    }
    431369
    432     body.docked .tab-bar {
    433         background-color: hsl(0, 0%, 10%);
    434     }
    435 
    436     body.docked.bottom .tab-bar > .border.top {
    437         filter: brightness(120%);
    438     }
    439 
    440     body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item {
     370    body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item {
    441371        --tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 12%), hsl(0, 0%, 10%));
    442372    }
    443373
    444     body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
    445         --tab-item-background: hsl(0, 0%, 19%);
    446     }
    447 
    448     body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
     374    body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected {
     375        --tab-item-background: var(--background-color-content);
     376    }
     377
     378    body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected {
    449379        --tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 23%), hsl(0, 0%, 21%));
    450380    }
    451381
    452     body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
     382    body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
    453383        --tab-item-background: hsl(0, 0%, 7%);
    454384    }
    455385
    456     body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
     386    body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
    457387        --tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 11%), hsl(0, 0%, 9%));
    458     }
    459 
    460     body.docked .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
    461         background-color: hsl(0, 0%, 15%);
    462     }
    463 
    464     body.docked .tab-bar > .tabs > .item:not(.disabled).selected {
    465         background-color: var(--background-color);
    466     }
    467 
    468     body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
    469         background-color: hsl(0, 0%, 20%);
    470388    }
    471389
    … …  
    474392    }
    475393
    476     body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover > .icon {
     394    .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover > .icon {
    477395        opacity: 0.6;
    478396    }
    479397
    480     body:not(.docked).window-inactive .tab-bar {
     398    body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar,
     399    body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar {
     400        --tab-bar-background: hsl(0, 0%, 7%);
    481401        --tab-item-border-color: hsl(0, 0%, 34%);
    482402    }
    483403
    484     body.big-sur:not(.docked).window-inactive .tab-bar,
    485     body:not(.big-sur):not(.docked).window-inactive .tab-bar {
    486         --tab-bar-background: hsl(0, 0%, 7%);
    487     }
    488 
    489     body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item {
     404    body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item {
    490405        --tab-item-background: hsl(0, 0%, 7%);
    491406    }
    492407
    493     body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item {
     408    body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item {
    494409        --tab-item-background: hsl(0, 0%, 13%);
    495410    }
    496411
    497     body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
     412    body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
    498413        --tab-item-background: hsl(0, 0%, 11%);
    499414    }
    500415
    501     body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
     416    body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
    502417        --tab-item-background: hsl(0, 0%, 19%);
    503418    }

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

    r265682 r281182  
    4747        this._tabContainer.addEventListener("contextmenu", this._handleTabContainerContextMenu.bind(this));
    4848
    49         this._flexibleSpaceBeforeElement = this._tabContainer.appendChild(document.createElement("div"));
    50         this._flexibleSpaceBeforeElement.className = "flexible-space";
    51 
    52         this._flexibleSpaceAfterElement = this._tabContainer.appendChild(document.createElement("div"));
    53         this._flexibleSpaceAfterElement.className = "flexible-space";
    54 
    5549        const navigationBarAfterElement = null;
    5650        this._navigationBarAfter = new WI.NavigationBar(navigationBarAfterElement, {sizesToFit: true});
    … …  
    7367    }
    7468
    75     // Static
    76 
    77     static get horizontalPadding()
    78     {
    79         return (WI.dockConfiguration === WI.DockConfiguration.Undocked) ? 0 : 8; // Keep in sync with `body.docked .tab-bar .tabs`
    80     }
    81 
    8269    // Public
    8370
    … …  
    142129
    143130        if (this._tabContainer.contains(nextSibling.element)) {
    144             if (!(tabBarItem instanceof WI.PinnedTabBarItem) && nextSibling instanceof WI.PinnedTabBarItem && nextSibling !== this._tabPickerTabBarItem)
    145                 this._tabContainer.insertBefore(tabBarItem.element, this._flexibleSpaceAfterElement);
     131            if (!(tabBarItem instanceof WI.PinnedTabBarItem) && nextSibling instanceof WI.PinnedTabBarItem)
     132                this._tabContainer.insertBefore(tabBarItem.element, this._tabPickerTabBarItem.element);
    146133            else
    147134                this._tabContainer.insertBefore(tabBarItem.element, nextSibling.element);
    148135        } else {
    149             if (tabBarItem instanceof WI.PinnedTabBarItem && tabBarItem !== this._tabPickerTabBarItem)
     136            if (tabBarItem instanceof WI.PinnedTabBarItem)
    150137                this._tabContainer.appendChild(tabBarItem.element);
    151138            else
    152                 this._tabContainer.insertBefore(tabBarItem.element, this._flexibleSpaceAfterElement);
     139                this._tabContainer.insertBefore(tabBarItem.element, this._tabPickerTabBarItem.element);
    153140        }
    154141
    … …  
    443430            return;
    444431
    445         const tabBarHorizontalPadding = WI.TabBar.horizontalPadding;
    446         const tabBarItemHorizontalMargin = WI.TabBarItem.horizontalMargin;
    447 
    448432        let undocked = WI.dockConfiguration === WI.DockConfiguration.Undocked;
    449433
    450434        function measureWidth(tabBarItem) {
    451435            if (!tabBarItem[WI.TabBar.CachedWidthSymbol])
    452                 tabBarItem[WI.TabBar.CachedWidthSymbol] = tabBarItem.element.realOffsetWidth + tabBarItemHorizontalMargin;
     436                tabBarItem[WI.TabBar.CachedWidthSymbol] = tabBarItem.element.realOffsetWidth;
    453437            return tabBarItem[WI.TabBar.CachedWidthSymbol];
    454438        }
    455439
    456         let availableSpace = this._tabContainer.realOffsetWidth - tabBarHorizontalPadding;
     440        let availableSpace = this._tabContainer.realOffsetWidth;
    457441
    458442        this._tabContainer.classList.add("calculate-width");
    … …  
    553537    _recordTabBarItemSizesAndPositions()
    554538    {
    555         const tabBarItemLeftMargin = WI.TabBarItem.horizontalMargin / 2;
    556 
    557539        var tabBarItemSizesAndPositions = new Map;
    558540
    559541        let barRect = this._tabContainer.getBoundingClientRect();
    560542
    561         function add(key, element, leftMargin) {
    562             let boundingRect = element.getBoundingClientRect();
    563             tabBarItemSizesAndPositions.set(key, {
    564                 left: boundingRect.left - barRect.left - leftMargin,
     543        for (let tabBarItem of this._tabBarItems) {
     544            if (tabBarItem.hidden)
     545                continue;
     546
     547            let boundingRect = tabBarItem.element.getBoundingClientRect();
     548            tabBarItemSizesAndPositions.set(tabBarItem, {
     549                left: boundingRect.left - barRect.left,
    565550                width: boundingRect.width,
    566551            });
    567552        }
    568553
    569         add(this._flexibleSpaceBeforeElement, this._flexibleSpaceBeforeElement, 0);
    570         add(this._flexibleSpaceAfterElement, this._flexibleSpaceAfterElement, 0);
    571         for (let tabBarItem of this._tabBarItems) {
    572             if (tabBarItem.hidden)
    573                 continue;
    574 
    575             add(tabBarItem, tabBarItem.element, tabBarItemLeftMargin);
    576         }
    577 
    578554        return tabBarItemSizesAndPositions;
    579555    }
    … …  
    585561                continue;
    586562
    587             let isFlexibleSpace = tabBarItem === this._flexibleSpaceBeforeElement || tabBarItem === this._flexibleSpaceAfterElement;
    588 
    589             let element = isFlexibleSpace ? tabBarItem : tabBarItem.element;
    590             element.style.left = sizeAndPosition.left + "px";
    591             element.style.width = sizeAndPosition.width + "px";
     563            tabBarItem.element.style.left = sizeAndPosition.left + "px";
     564            tabBarItem.element.style.width = sizeAndPosition.width + "px";
    592565        }
    593566    }
    … …  
    595568    _clearTabBarItemSizesAndPositions(skipTabBarItem)
    596569    {
    597         this._flexibleSpaceBeforeElement.style.left = null;
    598         this._flexibleSpaceBeforeElement.style.width = null;
    599 
    600         this._flexibleSpaceAfterElement.style.left = null;
    601         this._flexibleSpaceAfterElement.style.width = null;
    602 
    603570        for (var tabBarItem of this._tabBarItems) {
    604571            if (skipTabBarItem && tabBarItem === skipTabBarItem)
    … …  
    664631            return;
    665632
    666         if (event.target !== this.element && event.target !== this._flexibleSpaceBeforeElement && event.target !== this._flexibleSpaceAfterElement)
     633        if (event.target !== this.element)
    667634            return;
    668635
    … …  
    808775        }
    809776
    810         const tabBarLeftPadding = WI.TabBar.horizontalPadding / 2;
    811         const tabBarItemHorizontalMargin = WI.TabBarItem.horizontalMargin;
    812 
    813777        event.preventDefault();
    814778        event.stopPropagation();
    … …  
    827791        this._selectedTabBarItem.element.style.left = newLeft + "px";
    828792
    829         let selectedTabMidX = containerOffset + newLeft + ((this._selectedTabBarItem.element.realOffsetWidth + tabBarItemHorizontalMargin) / 2);
     793        let selectedTabMidX = containerOffset + newLeft + (this._selectedTabBarItem.element.realOffsetWidth / 2);
    830794
    831795        var currentIndex = this._tabBarItems.indexOf(this._selectedTabBarItem);
    … …  
    863827        // FIXME: Animate the tabs that move to make room for the selected tab. This was causing me trouble when I tried.
    864828
    865         let isLTR = WI.resolvedLayoutDirection() === WI.LayoutDirection.LTR;
    866 
    867829        function inlineStyleValue(element, property) {
    868830            return element.style.getPropertyCSSValue(property).getFloatValue(CSSPrimitiveValue.CSS_PX) || 0;
    869831        }
    870832
    871         let offsetAfter = inlineStyleValue(this._flexibleSpaceAfterElement, "width");
    872 
    873         let accumulatedLeft = isLTR ? (inlineStyleValue(this._flexibleSpaceBeforeElement, "width") + inlineStyleValue(this._flexibleSpaceBeforeElement, "left")) : tabBarLeftPadding;
     833        let accumulatedLeft = 0;
    874834        for (let tabBarItem of this._tabBarItemsFromLeftToRight()) {
    875835            if (tabBarItem.hidden)
    876836                continue;
    877837
    878             if (tabBarItem !== this._selectedTabBarItem && inlineStyleValue(tabBarItem.element, "left") !== accumulatedLeft) {
    879                 let left = accumulatedLeft;
    880                 if (isLTR) {
    881                     if (tabBarItem instanceof WI.PinnedTabBarItem && tabBarItem !== this._tabPickerTabBarItem)
    882                         left += offsetAfter;
    883                 } else {
    884                     if (!(tabBarItem instanceof WI.PinnedTabBarItem) || tabBarItem === this._tabPickerTabBarItem)
    885                         left += offsetAfter;
    886                 }
    887                 tabBarItem.element.style.left = left + "px";
    888             }
    889 
    890             accumulatedLeft += inlineStyleValue(tabBarItem.element, "width") + tabBarItemHorizontalMargin;
     838            if (tabBarItem !== this._selectedTabBarItem && inlineStyleValue(tabBarItem.element, "left") !== accumulatedLeft)
     839                tabBarItem.element.style.left = accumulatedLeft + "px";
     840
     841            accumulatedLeft += inlineStyleValue(tabBarItem.element, "width");
    891842        }
    892843    }

  • trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js

    r260108 r281182  
    4949        this.title = title;
    5050        this.image = image;
    51     }
    52 
    53     // Static
    54 
    55     static get horizontalMargin()
    56     {
    57         return (WI.dockConfiguration === WI.DockConfiguration.Undocked) ? 0 : 4; // Keep in sync with `body.docked .tab-bar > .tabs > .item`
    5851    }
    5952

  • trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css

    r272371 r281182  
    231231}
    232232
    233 body.big-sur {
     233body:is(.mac-platform.monterey, .mac-platform.big-sur) {
    234234    --text-color: hsl(0, 0%, 15%);
    235235
    … …  
    247247}
    248248
    249 body.mac-platform:not(.big-sur):not(.docked) {
     249body:not(.mac-platform.monterey, .mac-platform.big-sur):not(.docked) {
    250250    /* keep in sync with `WI.undockedTitleAreaHeight` */
    251251    --undocked-title-area-height: calc(22px / var(--zoom-factor));
    252252}
    253253
    254 body.mac-platform.big-sur:not(.docked) {
     254body:is(.mac-platform.monterey, .mac-platform.big-sur):not(.docked) {
    255255    /* keep in sync with `WI.undockedTitleAreaHeight` */
    256256    --undocked-title-area-height: calc(27px / var(--zoom-factor));
    … …  
    385385    }
    386386
    387     body.big-sur {
    388         --glyph-color: hsl(0, 0%, 69%);
    389         --glyph-color-pressed: hsl(0, 0%, 100%);
    390     }
    391387
    392388    body.window-inactive {
    … …  
    399395    }
    400396
    401     body.big-sur {
     397    body:is(.mac-platform.monterey, .mac-platform.big-sur) {
    402398        --text-color: hsl(0, 0%, 85%);
    403399
    … …  
    408404        --background-color-content: hsl(0, 0%, 17%);
    409405        --background-color-intermediate: hsl(0, 0%, 19%);
     406
     407        --glyph-color: hsl(0, 0%, 69%);
     408        --glyph-color-pressed: hsl(0, 0%, 100%);
    410409
    411410        --panel-background-color: hsl(0, 0%, 20%);
Note: See TracChangeset for help on using the changeset viewer.