[webkit-changes] [264410] trunk/Source/WebInspectorUI

Wed, 15 Jul 2020 12:05:28 -0700

Title: [264410] trunk/Source/WebInspectorUI
Revision
264410
Author
nvasil...@apple.com
Date
2020-07-15 12:04:00 -0700 (Wed, 15 Jul 2020)

Log Message

Web Inspector: Tab bar colors of undocked Inspector should match Safari in Big Sur
https://bugs.webkit.org/show_bug.cgi?id=214163
<rdar://problem/65293335>

Reviewed by Brian Burg.

* UserInterface/Views/Main.css:
(#undocked-title-area):
(body.big-sur #undocked-title-area):
(body:not(.big-sur) #undocked-title-area):
(body.window-inactive #undocked-title-area):
(@media (prefers-color-scheme: dark) body.big-sur #undocked-title-area):
(@media (prefers-color-scheme: dark) body:not(.big-sur) #undocked-title-area):
(@media (prefers-color-scheme: dark) body.big-sur.window-inactive #undocked-title-area):
(@media (prefers-color-scheme: dark) body:not(.big-sur).window-inactive #undocked-title-area):
* UserInterface/Views/TabBar.css:
(.tab-bar):
(body.big-sur .tab-bar):
(body:not(.docked) .tab-bar):
(body.big-sur:not(.docked) .tab-bar):
(body:not(.big-sur):not(.docked) .tab-bar):
(body.big-sur:not(.docked).window-inactive .tab-bar,):
(.tab-bar > .border):
(.tab-bar > .tabs > .item):
(body:not(.docked) .tab-bar > .tabs > .item):
(body.big-sur:not(.docked) .tab-bar > .tabs > .item):
(body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item):
(body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected):
(body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected):
(body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover):
(body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover):
(body:not(.docked).window-inactive .tab-bar > .tabs > .item):
(body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item,):
(body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected):
(.tab-bar > .tabs.animating.inserting-tab > .item.being-inserted):
(.tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected):
(@media (prefers-color-scheme: dark) body.big-sur .tab-bar,):
(@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar):
(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar):
(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item):
(@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected):
(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected):
(@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover):
(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover):
(@media (prefers-color-scheme: dark) body:not(.docked).window-inactive .tab-bar):
(@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar,):
(@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item):
(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item):
(@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected):
(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected):

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (264409 => 264410)


--- trunk/Source/WebInspectorUI/ChangeLog	2020-07-15 18:39:23 UTC (rev 264409)
+++ trunk/Source/WebInspectorUI/ChangeLog	2020-07-15 19:04:00 UTC (rev 264410)
@@ -1,3 +1,56 @@
+2020-07-15  Nikita Vasilyev  <nvasil...@apple.com>
+
+        Web Inspector: Tab bar colors of undocked Inspector should match Safari in Big Sur
+        https://bugs.webkit.org/show_bug.cgi?id=214163
+        <rdar://problem/65293335>
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Views/Main.css:
+        (#undocked-title-area):
+        (body.big-sur #undocked-title-area):
+        (body:not(.big-sur) #undocked-title-area):
+        (body.window-inactive #undocked-title-area):
+        (@media (prefers-color-scheme: dark) body.big-sur #undocked-title-area):
+        (@media (prefers-color-scheme: dark) body:not(.big-sur) #undocked-title-area):
+        (@media (prefers-color-scheme: dark) body.big-sur.window-inactive #undocked-title-area):
+        (@media (prefers-color-scheme: dark) body:not(.big-sur).window-inactive #undocked-title-area):
+        * UserInterface/Views/TabBar.css:
+        (.tab-bar):
+        (body.big-sur .tab-bar):
+        (body:not(.docked) .tab-bar):
+        (body.big-sur:not(.docked) .tab-bar):
+        (body:not(.big-sur):not(.docked) .tab-bar):
+        (body.big-sur:not(.docked).window-inactive .tab-bar,):
+        (.tab-bar > .border):
+        (.tab-bar > .tabs > .item):
+        (body:not(.docked) .tab-bar > .tabs > .item):
+        (body.big-sur:not(.docked) .tab-bar > .tabs > .item):
+        (body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item):
+        (body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected):
+        (body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected):
+        (body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover):
+        (body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover):
+        (body:not(.docked).window-inactive .tab-bar > .tabs > .item):
+        (body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item,):
+        (body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected):
+        (.tab-bar > .tabs.animating.inserting-tab > .item.being-inserted):
+        (.tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected):
+        (@media (prefers-color-scheme: dark) body.big-sur .tab-bar,):
+        (@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar):
+        (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar):
+        (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item):
+        (@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected):
+        (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected):
+        (@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover):
+        (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover):
+        (@media (prefers-color-scheme: dark) body:not(.docked).window-inactive .tab-bar):
+        (@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar,):
+        (@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item):
+        (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item):
+        (@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected):
+        (@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected):
+
 2020-07-13  Brian Burg  <bb...@apple.com>
 
         Web Inspector: wrong bundle version being used for WebInspectorUI.framework in macOS Big Sur

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (264409 => 264410)


--- trunk/Source/WebInspectorUI/UserInterface/Views/Main.css	2020-07-15 18:39:23 UTC (rev 264409)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Main.css	2020-07-15 19:04:00 UTC (rev 264410)
@@ -115,14 +115,15 @@
     right: 0;
     left: 0;
     height: var(--undocked-title-area-height);
+    background: var(--undocked-title-area-background);
 }
 
 body.big-sur #undocked-title-area {
-    background-color: white;
+    --undocked-title-area-background: white;
 }
 
 body:not(.big-sur) #undocked-title-area {
-    background-image: linear-gradient(to bottom, hsl(0, 0%, 92%), hsl(0, 0%, 87%));
+    --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;
 }
 
@@ -131,8 +132,7 @@
 }
 
 body.window-inactive #undocked-title-area {
-    background-color: hsl(0, 0%, 96%);
-    background-image: none;
+    --undocked-title-area-background: hsl(0, 0%, 96%);
 }
 
 input[type=range] {
@@ -569,17 +569,21 @@
     }
 
     body.big-sur #undocked-title-area {
-        background-color: hsl(0, 0%, 19%);
+        --undocked-title-area-background: hsl(0, 0%, 19%);
     }
 
     body:not(.big-sur) #undocked-title-area {
-        background-image: linear-gradient(to bottom, hsl(0, 0%, 26%), hsl(0, 0%, 23%));
+        --undocked-title-area-background: linear-gradient(to bottom, hsl(0, 0%, 26%), hsl(0, 0%, 23%));
     }
 
-    body.window-inactive #undocked-title-area {
-        background-color: var(--background-color);
+    body.big-sur.window-inactive #undocked-title-area {
+        --undocked-title-area-background: hsl(0, 0%, 11%);
     }
 
+    body:not(.big-sur).window-inactive #undocked-title-area {
+        --undocked-title-area-background: hsl(0, 0%, 19%);
+    }
+
     .go-to-arrow {
         filter: invert();
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css (264409 => 264410)


--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css	2020-07-15 18:39:23 UTC (rev 264409)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css	2020-07-15 19:04:00 UTC (rev 264410)
@@ -35,20 +35,34 @@
     --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%);
-    --tab-item-extra-light-border-color: hsl(0, 0%, 92%);
 
     --tab-item-medium-border-style: 1px solid var(--tab-item-medium-border-color);
-    --tab-item-light-border-style: 1px solid var(--tab-item-light-border-color);
+
+    --tab-bar-border-z-index: 10;
 }
 
+body.big-sur .tab-bar {
+    --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-image: linear-gradient(to bottom, hsl(0, 0%, 78%), hsl(0, 0%, 72%));
+    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 {
     background-size: 100% 200%;
+    --tab-bar-background: linear-gradient(to bottom, hsl(0, 0%, 78%), hsl(0, 0%, 72%));
 }
 
-body:not(.docked).window-inactive .tab-bar {
-    background-image: none;
-    background-color: var(--tab-item-extra-light-border-color);
+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%, 92%);
 }
 
 body.docked.window-inactive .tab-bar {
@@ -59,7 +73,7 @@
     position: absolute;
     left: 0;
     right: 0;
-    z-index: 10;
+    z-index: var(--tab-bar-border-z-index);
     background-color: var(--tab-item-medium-border-color);
 }
 
@@ -134,7 +148,7 @@
 
     position: relative;
 
-    z-index: 1;
+    z-index: calc(var(--tab-bar-border-z-index) + 1);
 
     align-items: center;
 
@@ -155,8 +169,19 @@
 }
 
 body:not(.docked) .tab-bar > .tabs > .item {
-    background-image: linear-gradient(to bottom, hsl(0, 0%, 78%), hsl(0, 0%, 72%));
+    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 {
+    --tab-item-background: var(--tab-bar-background);
+}
+
+body:not(.big-sur):not(.docked) .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) {
@@ -199,8 +224,14 @@
     width: var(--tab-bar-item-height); /* Make pinned tabs square */
 }
 
-body:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
-    background-image: linear-gradient(to bottom, hsl(0, 0%, 87%), hsl(0, 0%, 82%));
+body.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 {
+    --tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 87%), hsl(0, 0%, 82%));
     background-size: 100% 100%;
 }
 
@@ -212,10 +243,14 @@
     background-color: lightgrey;
 }
 
-body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
-    background-image: linear-gradient(to bottom, hsl(0, 0%, 67%), hsl(0, 0%, 64%));
+body.big-sur:not(.docked) .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 {
+    --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%);
 }
@@ -233,18 +268,21 @@
 }
 
 body:not(.docked).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;
     border-left-color: var(--tab-item-light-border-color) !important;
 
-    background-image: none;
-    background-color: var(--tab-item-extra-light-border-color);
-
     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 {
+    --tab-item-background: hsl(0, 0%, 92%);
+}
+
 body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
-    background-image: none;
-    background-color: hsl(0, 0%, 96%);
+    --tab-item-background: hsl(0, 0%, 96%);
 }
 
 body.docked .tab-bar > .tabs > .item:not(.disabled):matches(.selected, :hover) {
@@ -355,7 +393,7 @@
 }
 
 .tab-bar > .tabs.animating.inserting-tab > .item.being-inserted {
-    z-index: 2;
+    z-index: calc(var(--tab-bar-border-z-index) + 2);
     padding: 0;
 }
 
@@ -372,22 +410,25 @@
 }
 
 .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected {
-    z-index: 2;
+    z-index: calc(var(--tab-bar-border-z-index) + 2);
     pointer-events: none;
 }
 
 @media (prefers-color-scheme: dark) {
-    .tab-bar {
-        --tab-item-border-color: hsl(0, 0%, 36%);
-
+    body.big-sur .tab-bar,
+    body:not(.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);
         --tab-item-light-border-color: var(--tab-item-border-color);
-        --tab-item-extra-light-border-color: var(--tab-item-border-color);
+        --tab-item-border-color: hsl(0, 0%, 36%);
     }
 
-    body:not(.docked) .tab-bar {
+    body.big-sur:not(.docked) .tab-bar {
+        --tab-bar-background: hsl(0, 0%, 8%);
+    }
+
+    body:not(.big-sur):not(.docked) .tab-bar {
         background-image: linear-gradient(to bottom, hsl(0, 0%, 12%), hsl(0, 0%, 10%));
     }
 
@@ -399,18 +440,26 @@
         filter: brightness(120%);
     }
 
-    body:not(.docked) .tab-bar > .tabs > .item {
-        background-image: linear-gradient(to bottom, hsl(0, 0%, 12%), hsl(0, 0%, 10%));
+    body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item {
+        --tab-item-background: linear-gradient(to bottom, hsl(0, 0%, 12%), hsl(0, 0%, 10%));
     }
 
-    body:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
-        background-image: linear-gradient(to bottom, hsl(0, 0%, 23%), hsl(0, 0%, 21%));
+    body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected {
+        --tab-item-background: hsl(0, 0%, 19%);
     }
 
-    body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover {
-        background-image: linear-gradient(to bottom, hsl(0, 0%, 11%), hsl(0, 0%, 9%));
+    body:not(.big-sur):not(.docked) .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 {
+        --tab-item-background: hsl(0, 0%, 7%);
+    }
+
+    body:not(.big-sur):not(.docked) .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%);
     }
@@ -433,17 +482,26 @@
 
     body:not(.docked).window-inactive .tab-bar {
         --tab-item-border-color: hsl(0, 0%, 34%);
+    }
 
-        background-image: none;
-        background-color: hsl(0, 0%, 13%);
+    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:not(.docked).window-inactive .tab-bar > .tabs > .item {
-        background-image: none;
-        background-color: hsl(0, 0%, 13%);
+    body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item {
+        --tab-item-background: hsl(0, 0%, 7%);
     }
 
-    body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
-        background-color: hsl(0, 0%, 19%);
+    body:not(.big-sur):not(.docked).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 {
+        --tab-item-background: hsl(0, 0%, 11%);
+    }
+
+    body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected {
+        --tab-item-background: hsl(0, 0%, 19%);
+    }
 }

_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to