Attachment 359300 Details for Bug 193507 – Patch

[patch] Patch

bug-193507-20190116134415.patch (text/plain), 21.78 KB, created by Matt Baker on 2019-01-16 13:44:17 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Matt Baker

Created: 2019-01-16 13:44:17 PST

Size: 21.78 KB

patch

obsolete

>Subversion Revision: 240043
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 0c8431784b013cd83ab12f4818e2545e92e6bf2c..8c1ee877c23974845960e7f695f39e4f050938fe 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,73 @@
>+2019-01-16  Matt Baker  <mattbaker@apple.com>
>+
>+        Web Inspector: Use system accent color throughout UI
>+        https://bugs.webkit.org/show_bug.cgi?id=193507
>+        <rdar://problem/47327971>
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * UserInterface/Images/Breakpoint.png: Removed.
>+        * UserInterface/Images/Breakpoint.svg: Added.
>+        * UserInterface/Images/Breakpoint@2x.png: Removed.
>+        * UserInterface/Images/BreakpointInactive.png: Removed.
>+        * UserInterface/Images/BreakpointInactive@2x.png: Removed.
>+        * UserInterface/Views/BreakpointTreeElement.css:
>+        (.item.breakpoint .status > .status-image):
>+        (.item.breakpoint .status > .status-image.resolved):
>+        Replace breakpoint status icon with an inline SVG, allowing breakpoints
>+        to pick up the system accent color.
>+
>+        * UserInterface/Views/BreakpointTreeElement.js:
>+        (WI.BreakpointTreeElement.prototype._updateStatus):
>+
>+        * UserInterface/Views/DOMTreeOutline.css:
>+        (.tree-outline.dom li.selected .selection-area):
>+        (.tree-outline.dom li.elements-drag-over .selection-area):
>+        (.tree-outline.dom:focus li:matches(.selected, .hovered) .selection-area):
>+        (.tree-outline.dom li.hovered:not(.selected) .selection-area):
>+        Use system highlight color for selected and hovered DOM tree elements.
>+
>+        * UserInterface/Views/RadioButtonNavigationItem.css:
>+        (.navigation-bar .item.radio.button.text-only):
>+        (.navigation-bar .item.radio.button.text-only:matches(.selected, :hover)):
>+        (.navigation-bar .item.radio.button.text-only::before):
>+        (.navigation-bar .item.radio.button.text-only:matches(.selected, :hover)::before):
>+        (.navigation-bar .item.radio.button.text-only:not(.selected):hover::before):
>+        (.navigation-bar .item.radio.button.text-only.selected::before):
>+        (.navigation-bar .item.radio.button.text-only.selected:active::before):
>+        (.navigation-bar .item.radio.button.text-only:hover): Deleted.
>+        (.navigation-bar .item.radio.button.text-only.selected): Deleted.
>+        (.navigation-bar .item.radio.button.text-only:active): Deleted.
>+        (.navigation-bar .item.radio.button.text-only.selected:active): Deleted.
>+        * UserInterface/Views/ScopeBar.css:
>+        (.scope-bar > li):
>+        (.scope-bar > li:matches(.selected, :hover)):
>+        (.scope-bar > li::before):
>+        (.scope-bar > li:matches(.selected, :hover)::before):
>+        (.scope-bar > li:not(.selected):hover::before):
>+        (.scope-bar > li.selected::before):
>+        (.scope-bar > li.selected:active::before):
>+        (.scope-bar > li:hover): Deleted.
>+        (.scope-bar > li.selected): Deleted.
>+        (.scope-bar > li:active): Deleted.
>+        (.scope-bar > li.selected:active): Deleted.
>+        Use system accent color for button background. Since we can't create
>+        colors derived from the accent color, use a separate pseudo-element
>+        that can be blended with the content behind the button.
>+
>+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
>+        (.spreadsheet-style-declaration-editor):
>+        (@media (prefers-color-scheme: dark)):
>+
>+        * UserInterface/Views/TextEditor.css:
>+        (.text-editor > .CodeMirror .has-breakpoint .CodeMirror-linenumber::before):
>+        (.text-editor > .CodeMirror .breakpoint-resolved .CodeMirror-linenumber::before):
>+
>+        * UserInterface/Views/Variables.css:
>+        (:root):
>+        (body.window-inactive):
>+        (@media (prefers-color-scheme: dark)):
>+
> 2019-01-15  Devin Rousso  <drousso@apple.com>
> 
>         Web Inspector: Audit: create new IDL type for exposing special functionality in test context
>diff --git a/Source/WebInspectorUI/UserInterface/Images/Breakpoint.png b/Source/WebInspectorUI/UserInterface/Images/Breakpoint.png
>deleted file mode 100644
>index 9b104d9d6405ff0c99d2ad17eabb40fb92d5e84b..0000000000000000000000000000000000000000
>GIT binary patch
>literal 0
>HcmV?d00001
>
>literal 137
>zcmeAS@N?(olHy`uVBq!ia0vp^iXb)z8<14*VpjrE0iG_7Ar*|t9GSLX>KQi33m6~x
>z;9&WPQJ^^4s_Ea3Vgrju;sUP^$Qm~MFc2_qk~KVFkqH!gmf^whQ7~YZ#EUx%tskB4
>jY<D=rTzq7~3TuY#ZBE&d99I_u&1Ud)^>bP0l+XkK>)<Sr
>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/Breakpoint.svg b/Source/WebInspectorUI/UserInterface/Images/Breakpoint.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..f168e62a2fea0057667e81a1ba95b786d0a9461e
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/Breakpoint.svg
>@@ -0,0 +1,5 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 23 12">
>+    <polygon points="0.5 0.5 17.355 0.5 21.904 6 17.355 11.5 0.5 11.5 0.5 0.5"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/Breakpoint@2x.png b/Source/WebInspectorUI/UserInterface/Images/Breakpoint@2x.png
>deleted file mode 100644
>index 53301b6cdc3882e4c940157f52963a32fe0a4a8d..0000000000000000000000000000000000000000
>GIT binary patch
>literal 0
>HcmV?d00001
>
>literal 207
>zcmeAS@N?(olHy`uVBq!ia0vp^PCzWh!3HFmJG+X2)HF{Q$B+ufB#unmFZC@6_6lhS
>zTHS*jY#6qrA2(xQWE5#z9B?skGlTSuV*+IcEY=&Cq&GCgtqkgzUfp?(ss5wx2layY
>zDvB*%TQ)>%Io(haR9vIlGIx^TAvUKQ%Djp>lV=EA6Fj7+DZ@0`IiZY0u6L5a9-Zd7
>z=hf{)<_B7oc=~blJv{g-v2EqLv{lJ_c=<f*oeB<qX4*ZIbG!4?E!TlAWbkzLb6Mw<
>G&;$U}`$(Sv
>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive.png b/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive.png
>deleted file mode 100644
>index 04eea60e4931e691946819a3450154d1133fe234..0000000000000000000000000000000000000000
>GIT binary patch
>literal 0
>HcmV?d00001
>
>literal 138
>zcmeAS@N?(olHy`uVBq!ia0vp^iXb)z8<14*VpjrEfu1goAr*|tGmP^O{%1T;=WvGM
>zF!R$6c84>)FFAfaK6mgzN4&!t=JF#9j}AMW;V3)8@OTMOZ1!SB#v|?ynMn(Z+uwEQ
>ltIIJN@}CiGUi6NE!Tjp#fAy>FrUDIT@O1TaS?83{1ORaKF&qE@
>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive@2x.png b/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive@2x.png
>deleted file mode 100644
>index 1986ca0ed342552d3334bf92a2175904b1a73ede..0000000000000000000000000000000000000000
>GIT binary patch
>literal 0
>HcmV?d00001
>
>literal 207
>zcmeAS@N?(olHy`uVBq!ia0vp^PCzWh!3HFmJG+X2)HF{Q$B+ufq#4Hf2mcE;{cV`R
>zC@$y8_>tklJlWd}EGz*MeNL|KXPI&mq?~UY6nJxhE9U@H)lx6TxOb{i+<%U4KQRBm
>z-pMTj*Mtw{t>j4Tc4^r#O`y!njYFCvvEQU+gKv^kggeLXB?TNle2q61D@?qcK5XJC
>zvzz}Xpw{i-1yxH$i#GPv?UKuO&05*_(ab{SFXutl^W62`8-#?69+(1M$l&Sf=d#Wz
>Gp$Py1$w^`W
>
>diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css
>index fe26a9820d51239e129fed7274c3c025fc94efc4..1873078ec7a1f84ee48f06f3115acf8eccb7f578 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css
>@@ -1,5 +1,5 @@
> /*
>- * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
>+ * Copyright (C) 2013, 2014, 2019 Apple Inc. All rights reserved.
>  *
>  * Redistribution and use in source and binary forms, with or without
>  * modification, are permitted provided that the following conditions
>@@ -24,14 +24,17 @@
>  */
> 
> .item.breakpoint .status > .status-image {
>-    width: 21px;
>+    width: 23px;
>     height: 12px;
>-    content: url(../Images/BreakpointInactiveButton.svg);
>-    margin-top: 3px;
>+    margin-top: 2px;
>+
>+    fill: -apple-system-control-accent;
>+    stroke: hsla(0, 0%, 10%, 0.3);
>+    filter: grayscale();
> }
> 
> .item.breakpoint .status > .status-image.resolved {
>-    content: url(../Images/BreakpointButton.svg);
>+    filter: none;
> }
> 
> .item.breakpoint .status > .status-image.auto-continue {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
>index cf7948a292b1d31bf4a46ff61f56c44134c2fc1f..32d149a7a53d95c4824895b24e92187381954198 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
>@@ -48,8 +48,9 @@ WI.BreakpointTreeElement = class BreakpointTreeElement extends WI.GeneralTreeEle
>         this._listenerSet.register(WI.debuggerManager, WI.DebuggerManager.Event.ProbeSetAdded, this._probeSetAdded);
>         this._listenerSet.register(WI.debuggerManager, WI.DebuggerManager.Event.ProbeSetRemoved, this._probeSetRemoved);
> 
>-        this.status = document.createElement("img");
>+        this.status = WI.ImageUtilities.useSVGSymbol("Images/Breakpoint.svg");
>         this.status.className = WI.BreakpointTreeElement.StatusImageElementStyleClassName;
>+
>         this._listenerSet.register(this.status, "mousedown", this._statusImageElementMouseDown);
>         this._listenerSet.register(this.status, "click", this._statusImageElementClicked);
> 
>@@ -158,20 +159,9 @@ WI.BreakpointTreeElement = class BreakpointTreeElement extends WI.GeneralTreeEle
>         if (!this.status)
>             return;
> 
>-        if (this._breakpoint.disabled)
>-            this.status.classList.add(WI.BreakpointTreeElement.StatusImageDisabledStyleClassName);
>-        else
>-            this.status.classList.remove(WI.BreakpointTreeElement.StatusImageDisabledStyleClassName);
>-
>-        if (this._breakpoint.autoContinue)
>-            this.status.classList.add(WI.BreakpointTreeElement.StatusImageAutoContinueStyleClassName);
>-        else
>-            this.status.classList.remove(WI.BreakpointTreeElement.StatusImageAutoContinueStyleClassName);
>-
>-        if (this._breakpoint.resolved && WI.debuggerManager.breakpointsEnabled)
>-            this.status.classList.add(WI.BreakpointTreeElement.StatusImageResolvedStyleClassName);
>-        else
>-            this.status.classList.remove(WI.BreakpointTreeElement.StatusImageResolvedStyleClassName);
>+        this.status.classList.toggle(WI.BreakpointTreeElement.StatusImageDisabledStyleClassName, this._breakpoint.disabled);
>+        this.status.classList.toggle(WI.BreakpointTreeElement.StatusImageAutoContinueStyleClassName, this._breakpoint.autoContinue);
>+        this.status.classList.toggle(WI.BreakpointTreeElement.StatusImageResolvedStyleClassName, this._breakpoint.resolved && WI.debuggerManager.breakpointsEnabled);
>     }
> 
>     _addProbeSet(probeSet)
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
>index bebb04d2c9b0d50394ada080d62e134045b9252a..420cc50f86d46736e563eca2c960f02c92a0e4ff 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
>@@ -53,10 +53,6 @@
>     --sublist-border-width-start: 9px;
> }
> 
>-.tree-outline.dom li.hovered:not(.selected) .selection-area {
>-    background-color: hsla(209, 100%, 49%, 0.1);
>-}
>-
> .tree-outline.dom li .selection-area {
>     position: absolute;
>     left: 0;
>@@ -66,16 +62,20 @@
> }
> 
> .tree-outline.dom li.selected .selection-area {
>-    background-color: hsl(0, 0%, 83%);
>+    background-color: -apple-system-unemphasized-selected-content-background;
> }
> 
> .tree-outline.dom li.elements-drag-over .selection-area {
>     margin-top: -2px;
>-    border-top: 2px solid hsl(209, 100%, 49%);
>+    border-top: 2px solid -apple-system-selected-content-background;
> }
> 
>-.tree-outline.dom:focus li.selected .selection-area {
>-    background-color: hsl(209, 100%, 49%);
>+.tree-outline.dom:focus li:matches(.selected, .hovered) .selection-area {
>+    background-color: -apple-system-selected-content-background;
>+}
>+
>+.tree-outline.dom li.hovered:not(.selected) .selection-area {
>+    opacity: 0.15;
> }
> 
> .tree-outline.dom li.last-selected > span::after {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css b/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css
>index 5540dbe8439968dd05973828d94846cbbd3a30af..13839a4026ed63b1422230612eeca3d92be7d8cc 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css
>@@ -1,5 +1,5 @@
> /*
>- * Copyright (C) 2013 Apple Inc. All rights reserved.
>+ * Copyright (C) 2013, 2019 Apple Inc. All rights reserved.
>  *
>  * Redistribution and use in source and binary forms, with or without
>  * modification, are permitted provided that the following conditions
>@@ -31,21 +31,39 @@
>     width: 24px;
> }
> 
>-.navigation-bar .item.radio.button.text-only:hover {
>-    color: var(--selected-foreground-color);
>-    background-color: var(--selected-background-color-hover);
>+.navigation-bar .item.radio.button.text-only {
>+    position: relative;
>+    z-index: 0;
> }
> 
>-.navigation-bar .item.radio.button.text-only.selected {
>-    color: var(--selected-foreground-color);
>-    background-color: var(--selected-background-color);
>+.navigation-bar .item.radio.button.text-only:matches(.selected, :hover) {
>+    color: -apple-system-alternate-selected-text;
> }
> 
>-.navigation-bar .item.radio.button.text-only:active {
>-    color: var(--selected-foreground-color);
>-    background-color: var(--selected-background-color-active);
>+.navigation-bar .item.radio.button.text-only::before {
>+    position: absolute;
>+    z-index: -1;
>+    left: 0;
>+    top: 0;
>+    width: 100%;
>+    height: 100%;
>+
>+    content: "";
>+    border-radius: 3px;
>+}
>+
>+.navigation-bar .item.radio.button.text-only:matches(.selected, :hover)::before {
>+    background-color: -apple-system-control-accent;
>+}
>+
>+.navigation-bar .item.radio.button.text-only:not(.selected):hover::before {
>+    opacity: 0.5;
>+}
>+
>+.navigation-bar .item.radio.button.text-only.selected::before {
>+    filter: brightness(0.8);
> }
> 
>-.navigation-bar .item.radio.button.text-only.selected:active {
>-    background-color: var(--selected-background-color-active);
>+.navigation-bar .item.radio.button.text-only.selected:active::before {
>+    filter: brightness(0.7);
> }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css b/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
>index 3050842ddcd9927a4f9197ebeb8da3e2e58d12e9..b44d334120c243fca1425cfb2e1b12480020fb87 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
>@@ -1,5 +1,5 @@
> /*
>- * Copyright (C) 2013 Apple Inc. All rights reserved.
>+ * Copyright (C) 2013, 2019 Apple Inc. All rights reserved.
>  *
>  * Redistribution and use in source and binary forms, with or without
>  * modification, are permitted provided that the following conditions
>@@ -29,18 +29,49 @@
> }
> 
> .scope-bar > li {
>+    position: relative;
>+    z-index: 0;
>     display: inline-block;
>     margin: 0 2px;
>-    padding: 1px 8px 3px;
>+    padding: 2px 9px 4px;
>     font-size: 11px;
>     line-height: 11px;
>     color: hsl(0, 0%, 18%);
>-    background-color: transparent;
>-    border: 1px solid transparent;
>-    border-radius: 3px;
>     text-align: center;
> }
> 
>+.scope-bar > li:matches(.selected, :hover) {
>+    color: -apple-system-alternate-selected-text;
>+}
>+
>+.scope-bar > li::before {
>+    position: absolute;
>+    z-index: -1;
>+    left: 0;
>+    top: 0;
>+    width: 100%;
>+    height: 100%;
>+
>+    content: "";
>+    border-radius: 3px;
>+}
>+
>+.scope-bar > li:matches(.selected, :hover)::before {
>+    background-color: -apple-system-control-accent;
>+}
>+
>+.scope-bar > li:not(.selected):hover::before {
>+    opacity: 0.5;
>+}
>+
>+.scope-bar > li.selected::before {
>+    filter: brightness(0.8);
>+}
>+
>+.scope-bar > li.selected:active::before {
>+    filter: brightness(0.7);
>+}
>+
> .scope-bar > li.multiple {
>     position: relative;
> }
>@@ -97,25 +128,6 @@ body[dir=rtl] .scope-bar > li.multiple > .arrows {
>     transition-duration: 75ms;
> }
> 
>-.scope-bar > li:hover {
>-    color: var(--selected-foreground-color);
>-    background-color: var(--selected-background-color-hover);
>-}
>-
>-.scope-bar > li.selected {
>-    color: var(--selected-foreground-color);
>-    background-color: var(--selected-background-color);
>-}
>-
>-.scope-bar > li:active {
>-    color: var(--selected-foreground-color);
>-    background-color: var(--selected-background-color-active);
>-}
>-
>-.scope-bar > li.selected:active {
>-    background-color: var(--selected-background-color-active);
>-}
>-
> @media (prefers-color-scheme: dark) {
>     .scope-bar > li {
>         color: var(--text-color);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>index 17f508ad42daaf80ca45ff7bc5f8e04a7937348a..a1678dfeeceac39abd284f1e83c5531559ce63a1 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>@@ -31,8 +31,8 @@
>     color: hsl(0, 0%, 70%);
>     -webkit-user-select: text;
> 
>-    --background-color-selected: hsl(210, 98%, 93%);
>-    --border-color-selected: hsl(225, 91%, 70%);
>+    --background-color-selected: -apple-system-selected-text-background;
>+    --border-color-selected: -apple-system-selected-content-background;
> }
> 
> .spreadsheet-style-declaration-editor .property {
>@@ -180,11 +180,6 @@ body:matches(.window-docked-inactive, .window-inactive) .spreadsheet-style-decla
> }
> 
> @media (prefers-color-scheme: dark) {
>-    .spreadsheet-style-declaration-editor {
>-        --background-color-selected: hsl(230, 51%, 36%);
>-        --border-color-selected: hsl(216, 98%, 67%);
>-    }
>-
>     .spreadsheet-style-declaration-editor :matches(.name, .value).editing {
>         outline-color: var(--background-color-secondary) !important;
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TextEditor.css b/Source/WebInspectorUI/UserInterface/Views/TextEditor.css
>index 54219be3aa4e4bf2ccbf4a3c82baa05e9375c82f..9ccab2147a21fd8ba916025639adb02ac7d1f229 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TextEditor.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TextEditor.css
>@@ -57,13 +57,14 @@
> 
>     z-index: -2;
> 
>-    border-image-source: image-set(url(../Images/BreakpointInactive.png) 1x, url(../Images/BreakpointInactive@2x.png) 2x);
>-    border-image-slice: 3 7 3 3 fill;
>-    border-width: 3px 7px 3px 3px;
>+    -webkit-clip-path: polygon(0% 50%, 5px 100%, 100% 100%, 100% 0, 5px 0);
>+    transform: scaleX(-1);
>+    background-color: -apple-system-control-accent;
>+    filter: grayscale();
> }
> 
> .text-editor > .CodeMirror .breakpoint-resolved .CodeMirror-linenumber::before {
>-    border-image-source: image-set(url(../Images/Breakpoint.png) 1x, url(../Images/Breakpoint@2x.png) 2x);
>+    filter: none;
> }
> 
> .text-editor > .CodeMirror .breakpoint-auto-continue:not(.breakpoint-disabled) .CodeMirror-linenumber::before {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Variables.css b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>index ea103b6b2925ad8688da7f0ee83dfd51e622e219..0437c60a361b6f058be9328e2678919fb3bd38c7 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Variables.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>@@ -45,9 +45,9 @@
>     --background-color-content: white;
>     --background-color-code: white;
> 
>-    --selected-foreground-color: white;
>+    --selected-foreground-color: -apple-system-alternate-selected-text;
>     --selected-secondary-text-color: hsla(0, 100%, 100%, 0.7);
>-    --selected-background-color: hsl(212, 92%, 54%);
>+    --selected-background-color: -apple-system-selected-content-background;
>     --selected-background-color-unfocused: hsl(0, 0%, 83%);
>     --selected-background-color-active: hsl(218, 85%, 52%);
>     --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
>@@ -56,8 +56,8 @@
>     --glyph-color: hsl(0, 0%, 30%);
>     --glyph-color-pressed: hsl(0, 0%, 15%);
>     --glyph-color-disabled: hsla(0, 0%, 30%, 0.55);
>-    --glyph-color-active: hsl(212, 92%, 54%);
>-    --glyph-color-active-pressed: hsl(218, 85%, 52%);
>+    --glyph-color-active: -apple-system-control-accent;
>+    --glyph-color-active-pressed: -apple-system-control-accent;
> 
>     --border-color: hsl(0, 0%, 70%);
>     --border-color-dark: hsl(0, 0%, 57%);
>@@ -144,8 +144,7 @@
> }
> 
> body.window-inactive {
>-    /* FIXME: Use CSS4 color blend functions once they're available. */
>-    --selected-background-color: hsla(212, 92%, 54%, 0.5);
>+    --selected-background-color: -apple-system-unemphasized-selected-content-background;
> 
>     --glyph-color-active: hsla(212, 92%, 54%, 0.5);
>     --glyph-color: hsla(0, 0%, 30%, 0.65);
>@@ -191,10 +190,8 @@ body.window-inactive * {
>         --color-button: hsl(0, 0%, 99%);
>         --color-button-active: var(--text-color-active);
> 
>-        --selected-foreground-color: var(--text-color-active);
>         --selected-secondary-text-color: hsla(0, 0%, var(--foreground-lightness), 0.7);
>         --selected-secondary-text-color-active: hsla(0, 0%, var(--foreground-lightness), 0.85);
>-        --selected-background-color: hsl(219, 80%, 43%);
>         --selected-background-color-unfocused: hsla(0, 0%, var(--foreground-lightness), 0.15);
>         --selected-background-color-active: hsl(218, 85%, 62%);
>         --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
>@@ -203,8 +200,6 @@ body.window-inactive * {
>         --glyph-color: hsl(0, 0%, 80%);
>         --glyph-color-pressed: hsl(0, 0%, 100%);
>         --glyph-color-disabled: hsla(0, 0%, 80%, 0.4);
>-        --glyph-color-active: hsl(212, 100%, 71%);
>-        --glyph-color-active-pressed: hsl(212, 92%, 74%);
>         --glyph-color-inactive: hsl(0, 0%, 36%);
> 
>         --border-color: hsl(0, 0%, 33%);
>@@ -274,8 +269,6 @@ body.window-inactive * {
>     }
> 
>     body.window-inactive {
>-        --selected-background-color: hsla(212, 92%, 64%, 0.5);
>-
>         --glyph-color-active: var(--selected-background-color);
>         --glyph-color: hsl(0, 0%, 52%);
>         --glyph-color-disabled: hsla(0, 0%, 52%, 0.4);

Actions: View | Formatted Diff | Diff

Attachments on bug 193507: 359300 | 359303 | 359304 | 359305 | 359306 | 359307 | 359320 | 359322 | 359323 | 362263 | 362947 | 362954 | 362956 | 362957 | 362963 | 363035