Attachment 362263 Details for Bug 193507 – Patch

[patch] Patch

bug-193507-20190217172800.patch (text/plain), 22.71 KB, created by Matt Baker on 2019-02-17 17:28:21 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Matt Baker

Created: 2019-02-17 17:28:21 PST

Size: 22.71 KB

patch

obsolete

>Subversion Revision: 241652
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index b5d0e93e669d410d4c8fd2808e44de8507e0ab32..c8fe10fc57185369134c367f43fb393df31b99bb 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,84 @@
>+2019-02-17  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):
>+        (.tree-outline.dom li.pseudo-class-enabled > .selection-area::before):
>+        (@media (prefers-color-scheme: dark)):
>+        (.tree-outline.dom:focus li.selected .selection-area): Deleted.
>+        Use system highlight color for selected and hovered DOM tree elements.
>+
>+        * UserInterface/Views/NetworkDetailView.css:
>+        (.network .network-detail .navigation-bar .item.radio.button.text-only:before):
>+        (.network .network-detail .navigation-bar .item.radio.button.text-only.selected):
>+        (@media (prefers-color-scheme: dark)):
>+        (.network-detail .item.close > .glyph):
>+        * 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: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: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):
>+        (.text-editor > .CodeMirror .has-breakpoint.multiple-breakpoints .CodeMirror-linenumber::before):
>+        (@keyframes text-editor-highlight-fadeout):
>+        (@keyframes text-editor-hovered-expression-highlight-fadeout):
>+        Replace breakpoint raster images with a -webkit-clip-path property.
>+
>+        * UserInterface/Views/Variables.css:
>+        (:root):
>+        (body:matches(.mojave)):
>+        (@media (prefers-color-scheme: dark)):
>+        Add custom property overrides for system colors where supported.
>+
> 2019-02-17  Matt Baker  <mattbaker@apple.com>
> 
>         Web Inspector: Frontend performance is very slow reloading theverge.com - 50% of time in TreeOutline _indexOfTreeElement
>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..1ed30d9e0431ece028703f5595b7163075e84692 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css
>@@ -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: var(--glyph-color-active);
>+    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..cc84257e96307b88967918b3c400639b3da59274 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: var(--selected-background-color-unfocused);
> }
> 
> .tree-outline.dom li.elements-drag-over .selection-area {
>     margin-top: -2px;
>-    border-top: 2px solid hsl(209, 100%, 49%);
>+    border-top: 2px solid var(--selected-background-color);
> }
> 
>-.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: var(--selected-background-color);
>+}
>+
>+.tree-outline.dom li.hovered:not(.selected) .selection-area {
>+    opacity: 0.15;
> }
> 
> .tree-outline.dom li.last-selected > span::after {
>@@ -155,7 +155,7 @@ body[dir=rtl] .tree-outline.dom li:matches(.hovered, .selected) + ol.children.ex
>     width: 5px;
>     height: 5px;
>     content: "";
>-    background-color: var(--selected-background-color);
>+    background-color: var(--glyph-color-active);
>     border-radius: 50%;
> }
> 
>@@ -313,18 +313,6 @@ body[dir=rtl] .tree-outline.dom li.parent.shadow::after {
> }
> 
> @media (prefers-color-scheme: dark) {
>-    .tree-outline.dom li.elements-drag-over .selection-area {
>-        border-top-color: var(--selected-background-color);
>-    }
>-
>-    .tree-outline.dom li.selected .selection-area {
>-        background-color: var(--background-color-selected);
>-    }
>-
>-    .tree-outline.dom:focus li.selected .selection-area {
>-        background-color: var(--selected-background-color);
>-    }
>-
>     .tree-outline.dom .shadow {
>         color: var(--text-color);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css b/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css
>index b51dc3b64f188f3f1d9b31fa85dcf5b24bc5ba2e..4cc0f41092165ad0ee3e4224bd0dc02d652b326f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css
>@@ -59,9 +59,12 @@
>     background-color: inherit;
> }
> 
>+.network .network-detail .navigation-bar .item.radio.button.text-only:before {
>+    display: none;
>+}
>+
> .network .network-detail .navigation-bar .item.radio.button.text-only.selected {
>-    color: var(--selected-background-color);
>-    background-color: white;
>+    color: var(--glyph-color-active);
> }
> 
> .network-detail > .content-browser {
>@@ -80,9 +83,4 @@
>     .network-detail .item.close > .glyph {
>         background-color: hsla(0, 0%, 100%, 0.2);
>     }
>-
>-    .network .network-detail .navigation-bar .item.radio.button.text-only.selected {
>-        background-color: unset;
>-        color: var(--glyph-color-active);
>-    }
> }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css b/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css
>index 5540dbe8439968dd05973828d94846cbbd3a30af..d56d84e20c88f7e29414fbc4cc24ef3aa876d4ed 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css
>@@ -31,21 +31,35 @@
>     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 {
>+.navigation-bar .item.radio.button.text-only:matches(.selected, :hover) {
>     color: var(--selected-foreground-color);
>-    background-color: var(--selected-background-color);
> }
> 
>-.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: var(--glyph-color-active);
>+}
>+
>+.navigation-bar .item.radio.button.text-only:not(.selected):hover::before {
>+    opacity: 0.5;
> }
> 
>-.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..1d16c878e3d6f1f29b731a427a384f5caa11f1b7 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
>@@ -29,18 +29,45 @@
> }
> 
> .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: var(--selected-foreground-color);
>+}
>+
>+.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: var(--glyph-color-active);
>+}
>+
>+.scope-bar > li:not(.selected):hover::before {
>+    opacity: 0.5;
>+}
>+
>+.scope-bar > li.selected:active::before {
>+    filter: brightness(0.7);
>+}
>+
> .scope-bar > li.multiple {
>     position: relative;
> }
>@@ -97,25 +124,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 9e6439b06fb0ab4ed6e9e85c158ea2e613458404..9579e5508f0ceae91fcaccc124e7f4c89ae16d06 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>@@ -31,8 +31,8 @@
>     color: var(--text-color-tertiary);
>     -webkit-user-select: text;
> 
>-    --background-color-selected: hsl(210, 98%, 93%);
>-    --border-color-selected: hsl(225, 91%, 70%);
>+    --background-color-selected: var(--selected-text-background-color);
>+    --border-color-selected: var(--selected-background-color);
> }
> 
> .spreadsheet-style-declaration-editor .property {
>@@ -189,11 +189,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..1d882601d3de017f1450b12d1876ad31df26a690 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: var(--glyph-color-active);
>+    filter: grayscale() brightness(1.2);
> }
> 
> .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 {
>@@ -77,7 +78,7 @@
> .text-editor > .CodeMirror .has-breakpoint.multiple-breakpoints .CodeMirror-linenumber::before {
>     content: "\2022\2022\2022"; /* &middot;&middot;&middot; */
>     color: white;
>-    line-height: 6px;
>+    line-height: 13px;
>     text-align: center;
>     text-indent: -1px;
> }
>@@ -117,7 +118,7 @@
> }
> 
> @keyframes text-editor-highlight-fadeout {
>-    from { background-color: highlight; }
>+    from { background-color: var(--selected-text-background-color); }
> }
> 
> .text-editor > .CodeMirror .hovered-expression-highlight {
>@@ -126,7 +127,7 @@
> }
> 
> @keyframes text-editor-hovered-expression-highlight-fadeout {
>-    from { background-color: highlight; }
>+    from { background-color: var(--selected-text-background-color); }
>     to { background-color: hsla(0, 0%, 0%, 0.1); }
> }
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Variables.css b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>index 3eac5b98ed38be60fb729fe1d6046a53dbdcc0ff..3d7e3d9c21bb33cfc1826ab10a4b3853155a82a2 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Variables.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>@@ -57,6 +57,7 @@
>     --selected-background-color-active: hsl(218, 85%, 52%);
>     --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
>     --selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
>+    --selected-text-background-color: hsl(210, 98%, 93%);
> 
>     --glyph-color: hsl(0, 0%, 30%);
>     --glyph-color-pressed: hsl(0, 0%, 15%);
>@@ -169,6 +170,15 @@ body.window-inactive * {
>     --border-color-dark: hsl(0, 0%, 72%);
> }
> 
>+body:matches(.mojave) {
>+    --selected-foreground-color: -apple-system-alternate-selected-text;
>+    --selected-background-color: -apple-system-selected-content-background;
>+    --selected-text-background-color: -apple-system-selected-text-background;
>+
>+    --glyph-color-active: -apple-system-control-accent;
>+    --glyph-color-active-pressed: -apple-system-control-accent;
>+}
>+
> @media (prefers-color-scheme: dark) {
> 
>     :root {
>@@ -211,6 +221,7 @@ body.window-inactive * {
>         --selected-background-color-active: hsl(218, 85%, 62%);
>         --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
>         --selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
>+        --selected-text-background-color: hsl(230, 51%, 36%);
> 
>         --glyph-color: hsl(0, 0%, 80%);
>         --glyph-color-pressed: hsl(0, 0%, 100%);

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