Web Inspector: Use system accent color throughout UI
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 27 Feb 2019 01:28:02 +0000 (01:28 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 27 Feb 2019 01:28:02 +0000 (01:28 +0000)
https://bugs.webkit.org/show_bug.cgi?id=193507
<rdar://problem/47327971>

Reviewed by Timothy Hatcher.

* 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.
Replace breakpoint pixel art with an SVG image that can be styled in CSS.

* UserInterface/Images/CSSVariable.svg:
* UserInterface/Images/CubicBezier.svg:
* UserInterface/Images/UserInputPrompt.svg:
Remove fill color since it is now styled in CSS.

* UserInterface/Views/BezierEditor.css:
(.bezier-editor > .bezier-preview > div):
(@media (prefers-color-scheme: dark)):
(.bezier-editor > .bezier-container .control-handle):
(.bezier-editor > .bezier-container .control-line):
Use system accent color for control handles.

* UserInterface/Views/BreakpointTreeElement.css:
(.item.breakpoint .status > .status-image):
(.item.breakpoint .status > .status-image.resolved):
Use system accent color for breakpoint fill, with a dark outline
to match Xcode and make the button stand out against the selection.

* UserInterface/Views/BreakpointTreeElement.js:
(WI.BreakpointTreeElement.prototype._updateStatus):

* UserInterface/Views/ButtonNavigationItem.css:
(.navigation-bar .item.button > .glyph):

* UserInterface/Views/ConsolePrompt.js:
(WI.ConsolePrompt):

* UserInterface/Views/DOMBreakpointTreeElement.js:
* UserInterface/Views/DOMTreeContentView.css:
(.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint):
(.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.disabled,):
(.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.subtree):
(.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.disabled): Deleted.
(.content-view.dom-tree .tree-outline.dom.breakpoints-disabled li .status-image.breakpoint): Deleted.
(.content-view.dom-tree .tree-outline.dom.breakpoints-disabled li .status-image.breakpoint.disabled): Deleted.

* 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):
Use the system accent color for the "pseudo-class enabled" marker.
(@media (prefers-color-scheme: dark)):
(.tree-outline.dom:focus li.selected .selection-area): Deleted.
Use --selected-background-color for selection and hover styles, which is
set to the system highlight color if available.

* UserInterface/Views/InlineSwatch.css:
(.inline-swatch:matches(.bezier, .spring, .variable)):
(.inline-swatch:matches(.bezier, .spring)): Deleted.
(.inline-swatch.variable): Deleted.

* UserInterface/Views/InlineSwatch.js:
(WI.InlineSwatch):

* 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/QuickConsole.css:
(.quick-console > .console-prompt > .glyph):
(.quick-console > .console-prompt::before): Deleted.

* UserInterface/Views/RadioButtonNavigationItem.css:
(.navigation-bar .item.radio.button.text-only):
(.navigation-bar .item.radio.button.text-only::before):
(.navigation-bar .item.radio.button.text-only:matches(.selected, :hover)):
(.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.
Use system accent color for selection and hover styles. Since it isn't
yet possible to derive new colors from the accent color in CSS, fake it
with a ::before pseudo-element that can have have `filter` or `opacity`
effects applied to it without altering the button text color.

* UserInterface/Views/RenderingFrameTimelineOverviewGraph.css:
(.timeline-overview-graph.rendering-frame > .frame-marker):
Use system accent color for selected frame marker.

* UserInterface/Views/ScopeBar.css:
(.scope-bar > li):
(.scope-bar > li::before):
(.scope-bar.default-item-selected > li.multiple.selected::before):
(.scope-bar > li:matches(.selected, :hover)):
(.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.

* UserInterface/Views/SettingsTabContentView.css:
(.content-view.settings .navigation-bar .item.radio.button.text-only:before):

* 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 pixel art with a solid color (the system accent
color) clipped to the shape of a breakpoint.

* UserInterface/Views/TimelineRecordFrame.css:
(.timeline-record-frame.selected):

* UserInterface/Views/URLBreakpointTreeElement.js:

* UserInterface/Views/Variables.css:
(:root):
(body.window-inactive):
(@media (prefers-color-scheme: dark)):
(body.mac-platform:not(.sierra, .high-sierra)):
Add custom property overrides for system colors where supported.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@242118 268f45cc-cd09-0410-ab3c-d52691b4dbfc

30 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Images/Breakpoint.png [deleted file]
Source/WebInspectorUI/UserInterface/Images/Breakpoint.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Images/Breakpoint@2x.png [deleted file]
Source/WebInspectorUI/UserInterface/Images/BreakpointInactive.png [deleted file]
Source/WebInspectorUI/UserInterface/Images/BreakpointInactive@2x.png [deleted file]
Source/WebInspectorUI/UserInterface/Images/CSSVariable.svg
Source/WebInspectorUI/UserInterface/Images/CubicBezier.svg
Source/WebInspectorUI/UserInterface/Images/UserInputPrompt.svg
Source/WebInspectorUI/UserInterface/Views/BezierEditor.css
Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css
Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css
Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.js
Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js
Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css
Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css
Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js
Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css
Source/WebInspectorUI/UserInterface/Views/QuickConsole.css
Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css
Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css
Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
Source/WebInspectorUI/UserInterface/Views/TextEditor.css
Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css
Source/WebInspectorUI/UserInterface/Views/URLBreakpointTreeElement.js
Source/WebInspectorUI/UserInterface/Views/Variables.css

index f0064cc..32c5045 100644 (file)
@@ -1,3 +1,145 @@
+2019-02-26  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 Timothy Hatcher.
+
+        * 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.
+        Replace breakpoint pixel art with an SVG image that can be styled in CSS.
+
+        * UserInterface/Images/CSSVariable.svg:
+        * UserInterface/Images/CubicBezier.svg:
+        * UserInterface/Images/UserInputPrompt.svg:
+        Remove fill color since it is now styled in CSS.
+
+        * UserInterface/Views/BezierEditor.css:
+        (.bezier-editor > .bezier-preview > div):
+        (@media (prefers-color-scheme: dark)):
+        (.bezier-editor > .bezier-container .control-handle):
+        (.bezier-editor > .bezier-container .control-line):
+        Use system accent color for control handles.
+
+        * UserInterface/Views/BreakpointTreeElement.css:
+        (.item.breakpoint .status > .status-image):
+        (.item.breakpoint .status > .status-image.resolved):
+        Use system accent color for breakpoint fill, with a dark outline
+        to match Xcode and make the button stand out against the selection.
+
+        * UserInterface/Views/BreakpointTreeElement.js:
+        (WI.BreakpointTreeElement.prototype._updateStatus):
+
+        * UserInterface/Views/ButtonNavigationItem.css:
+        (.navigation-bar .item.button > .glyph):
+
+        * UserInterface/Views/ConsolePrompt.js:
+        (WI.ConsolePrompt):
+
+        * UserInterface/Views/DOMBreakpointTreeElement.js:
+        * UserInterface/Views/DOMTreeContentView.css:
+        (.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint):
+        (.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.disabled,):
+        (.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.subtree):
+        (.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.disabled): Deleted.
+        (.content-view.dom-tree .tree-outline.dom.breakpoints-disabled li .status-image.breakpoint): Deleted.
+        (.content-view.dom-tree .tree-outline.dom.breakpoints-disabled li .status-image.breakpoint.disabled): Deleted.
+
+        * 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):
+        Use the system accent color for the "pseudo-class enabled" marker.
+        (@media (prefers-color-scheme: dark)):
+        (.tree-outline.dom:focus li.selected .selection-area): Deleted.
+        Use --selected-background-color for selection and hover styles, which is
+        set to the system highlight color if available.
+
+        * UserInterface/Views/InlineSwatch.css:
+        (.inline-swatch:matches(.bezier, .spring, .variable)):
+        (.inline-swatch:matches(.bezier, .spring)): Deleted.
+        (.inline-swatch.variable): Deleted.
+
+        * UserInterface/Views/InlineSwatch.js:
+        (WI.InlineSwatch):
+
+        * 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/QuickConsole.css:
+        (.quick-console > .console-prompt > .glyph):
+        (.quick-console > .console-prompt::before): Deleted.
+
+        * UserInterface/Views/RadioButtonNavigationItem.css:
+        (.navigation-bar .item.radio.button.text-only):
+        (.navigation-bar .item.radio.button.text-only::before):
+        (.navigation-bar .item.radio.button.text-only:matches(.selected, :hover)):
+        (.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.
+        Use system accent color for selection and hover styles. Since it isn't
+        yet possible to derive new colors from the accent color in CSS, fake it
+        with a ::before pseudo-element that can have have `filter` or `opacity`
+        effects applied to it without altering the button text color.
+
+        * UserInterface/Views/RenderingFrameTimelineOverviewGraph.css:
+        (.timeline-overview-graph.rendering-frame > .frame-marker):
+        Use system accent color for selected frame marker.
+
+        * UserInterface/Views/ScopeBar.css:
+        (.scope-bar > li):
+        (.scope-bar > li::before):
+        (.scope-bar.default-item-selected > li.multiple.selected::before):
+        (.scope-bar > li:matches(.selected, :hover)):
+        (.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.
+
+        * UserInterface/Views/SettingsTabContentView.css:
+        (.content-view.settings .navigation-bar .item.radio.button.text-only:before):
+
+        * 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 pixel art with a solid color (the system accent
+        color) clipped to the shape of a breakpoint.
+
+        * UserInterface/Views/TimelineRecordFrame.css:
+        (.timeline-record-frame.selected):
+
+        * UserInterface/Views/URLBreakpointTreeElement.js:
+
+        * UserInterface/Views/Variables.css:
+        (:root):
+        (body.window-inactive):
+        (@media (prefers-color-scheme: dark)):
+        (body.mac-platform:not(.sierra, .high-sierra)):
+        Add custom property overrides for system colors where supported.
+
 2019-02-26  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: Search: no results when opening to Search tab
diff --git a/Source/WebInspectorUI/UserInterface/Images/Breakpoint.png b/Source/WebInspectorUI/UserInterface/Images/Breakpoint.png
deleted file mode 100644 (file)
index 9b104d9..0000000
Binary files a/Source/WebInspectorUI/UserInterface/Images/Breakpoint.png and /dev/null differ
diff --git a/Source/WebInspectorUI/UserInterface/Images/Breakpoint.svg b/Source/WebInspectorUI/UserInterface/Images/Breakpoint.svg
new file mode 100644 (file)
index 0000000..f168e62
--- /dev/null
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2019 Apple Inc. All rights reserved. -->
+<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 (file)
index 53301b6..0000000
Binary files a/Source/WebInspectorUI/UserInterface/Images/Breakpoint@2x.png and /dev/null differ
diff --git a/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive.png b/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive.png
deleted file mode 100644 (file)
index 04eea60..0000000
Binary files a/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive.png and /dev/null differ
diff --git a/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive@2x.png b/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive@2x.png
deleted file mode 100644 (file)
index 1986ca0..0000000
Binary files a/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive@2x.png and /dev/null differ
index f6ea14b..3b214dd 100644 (file)
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Copyright © 2017 Devin Rousso <webkit@devinrousso.com>. All rights reserved. -->
 <svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
-    <rect fill="hsl(212, 92%, 54%)" x="0" y="0" width="16" height="16" rx="3" ry="3"/>
+    <rect fill="currentColor" x="0" y="0" width="16" height="16" rx="3" ry="3"/>
     <rect fill="white" x="3.5" y="4.5" width="9" height="2.5"/>
     <rect fill="white" x="3.5" y="9" width="9" height="2.5"/>
 </svg>
index 430df7d..98e2904 100644 (file)
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Copyright © 2015 Apple Inc. All rights reserved. -->
 <svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
-    <rect fill="hsl(212, 92%, 54%)" x="0" y="0" width="16" height="16" rx="3" ry="3"/>
+    <rect fill="currentColor" x="0" y="0" width="16" height="16" rx="3" ry="3"/>
     <path fill="none" stroke="white" stroke-width="3" d="M 4 14 C 4.5 2.5 11.5 13.5 12 2"/>
 </svg>
index 4a606ef..126a88d 100644 (file)
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Copyright © 2013 Apple Inc. All rights reserved. -->
 <svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 10 10">
-    <path fill="rgb(77, 153, 255)" d="M 7.910156 5.402344 C 7.859375 5.535156 7.78125 5.65625 7.675781 5.765625 L 4.730469 8.710938 C 4.324219 9.117188 3.664062 9.117188 3.257812 8.710938 C 2.851562 8.304688 2.851562 7.644531 3.257812 7.238281 L 5.484375 5.011719 L 3.265625 2.792969 C 2.859375 2.386719 2.859375 1.726562 3.265625 1.320312 C 3.671875 0.914062 4.332031 0.914062 4.738281 1.320312 L 7.683594 4.265625 C 7.992188 4.574219 8.066406 5.023438 7.910156 5.402344 Z"/>
+    <path d="M 7.910156 5.402344 C 7.859375 5.535156 7.78125 5.65625 7.675781 5.765625 L 4.730469 8.710938 C 4.324219 9.117188 3.664062 9.117188 3.257812 8.710938 C 2.851562 8.304688 2.851562 7.644531 3.257812 7.238281 L 5.484375 5.011719 L 3.265625 2.792969 C 2.859375 2.386719 2.859375 1.726562 3.265625 1.320312 C 3.671875 0.914062 4.332031 0.914062 4.738281 1.320312 L 7.683594 4.265625 C 7.992188 4.574219 8.066406 5.023438 7.910156 5.402344 Z"/>
 </svg>
index 82701a2..999a3ff 100644 (file)
@@ -49,7 +49,7 @@ body[dir=rtl] .bezier-editor {
 .bezier-editor > .bezier-preview > div {
     width: 20px;
     height: 20px;
-    background-color: var(--selected-background-color);
+    background-color: var(--glyph-color-active);
     border-radius: 50%;
 }
 
@@ -168,14 +168,14 @@ body[dir=rtl] .bezier-editor > .number-input-container > input {
     }
 
     .bezier-editor > .bezier-preview > div {
-        background-color: var(--selected-background-color-active);
+        background-color: var(--glyph-color-active);
     }
 
     .bezier-editor > .bezier-container .control-handle {
-        fill: var(--selected-background-color-active);
+        fill: var(--glyph-color-active);
     }
 
     .bezier-editor > .bezier-container .control-line {
-        stroke: var(--selected-background-color-active);
+        stroke: var(--glyph-color-active);
     }
 }
index fe26a98..1ed30d9 100644 (file)
  */
 
 .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 {
index cf7948a..32d149a 100644 (file)
@@ -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)
index 6eff0c0..b863e6c 100644 (file)
@@ -54,6 +54,7 @@
 
 .navigation-bar .item.button > .glyph {
     color: var(--glyph-color);
+    opacity: var(--glyph-opacity);
 }
 
 .navigation-bar .item.button:not(.disabled):active > .glyph {
index 6503bf3..053e8f0 100644 (file)
@@ -33,6 +33,8 @@ WI.ConsolePrompt = class ConsolePrompt extends WI.View
 
         this.element.classList.add("console-prompt", WI.SyntaxHighlightedStyleClassName);
 
+        this.element.appendChild(WI.ImageUtilities.useSVGSymbol("Images/UserInputPrompt.svg", "glyph"));
+
         this._delegate = delegate || null;
 
         this._codeMirror = WI.CodeMirrorEditor.create(this.element, {
index 4b2c5d0..5cef409 100644 (file)
@@ -38,7 +38,7 @@ WI.DOMBreakpointTreeElement = class DOMBreakpointTreeElement extends WI.GeneralT
         const subtitle = null;
         super(["breakpoint", "dom", className], title, subtitle, breakpoint);
 
-        this.status = document.createElement("img");
+        this.status = WI.ImageUtilities.useSVGSymbol("Images/Breakpoint.svg");
         this.status.classList.add("status-image", "resolved");
 
         this.tooltipHandledSeparately = true;
index 85719d5..487d066 100644 (file)
@@ -61,33 +61,21 @@ body[dir=rtl] .content-view.dom-tree .tree-outline.dom li .status-image {
 
 .content-view.dom-tree .tree-outline.dom li .status-image.breakpoint {
     width: 15px;
-    fill: var(--breakpoint-fill-color);
-    stroke: var(--breakpoint-stroke-color);
-    stroke-width: 1px;
+    fill: var(--glyph-color-active);
 }
 
 body:not(.window-inactive) .content-view.dom-tree .tree-outline.dom:focus li.selected .status-image.breakpoint {
     stroke: white;
 }
 
-.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.disabled {
-    fill: var(--breakpoint-disabled-fill-color);
-    stroke: var(--breakpoint-disabled-stroke-color);
-}
-
+.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.disabled,
 .content-view.dom-tree .tree-outline.dom.breakpoints-disabled li .status-image.breakpoint {
-    fill: var(--breakpoint-unresolved-fill-color);
-    stroke: var(--breakpoint-unresolved-stroke-color);
-}
-
-.content-view.dom-tree .tree-outline.dom.breakpoints-disabled li .status-image.breakpoint.disabled {
-    fill: var(--breakpoint-unresolved-disabled-fill-color);
-    stroke: var(--breakpoint-unresolved-disabled-stroke-color);
+    filter: grayscale();
 }
 
 .content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.subtree {
     fill: none;
-    opacity: 0.6;
+    stroke: var(--glyph-color-active);
 }
 
 .content-view.dom-tree .tree-outline.dom li.expanded .status-image.breakpoint.subtree {
index bebb04d..3b1362e 100644 (file)
     --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;
 }
 
 .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.3;
 }
 
 .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);
     }
index 890a945..f975cfb 100644 (file)
     background-repeat: no-repeat;
 }
 
-.inline-swatch:matches(.bezier, .spring) {
-    content: url(../Images/CubicBezier.svg);
-}
-
-.inline-swatch.variable {
-    content: url(../Images/CSSVariable.svg);
+.inline-swatch:matches(.bezier, .spring, .variable) {
+    color: var(--glyph-color-active);
 }
 
 .inline-swatch:matches(.bezier, .spring, .variable) {
index 84b5bc6..2a46442 100644 (file)
@@ -32,7 +32,13 @@ WI.InlineSwatch = class InlineSwatch extends WI.Object
 
         this._type = type;
 
-        this._swatchElement = document.createElement("span");
+        if (this._type === WI.InlineSwatch.Type.Bezier || this._type === WI.InlineSwatch.Type.Spring)
+            this._swatchElement = WI.ImageUtilities.useSVGSymbol("Images/CubicBezier.svg");
+        else if (this._type === WI.InlineSwatch.Type.Variable)
+            this._swatchElement = WI.ImageUtilities.useSVGSymbol("Images/CSSVariable.svg");
+        else
+            this._swatchElement = document.createElement("span");
+
         this._swatchElement.classList.add("inline-swatch", this._type.split("-").lastValue);
 
         this._boundSwatchElementClicked = null;
index b51dc3b..4cc0f41 100644 (file)
     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);
-    }
 }
index 4d10399..99fb49c 100644 (file)
@@ -58,7 +58,7 @@
     pointer-events: none;
 }
 
-.quick-console > .console-prompt::before {
+.quick-console > .console-prompt > .glyph {
     position: relative;
     z-index: 1;
 
@@ -70,7 +70,7 @@
     width: 12px;
     height: 12px;
 
-    content: url(../Images/UserInputPrompt.svg);
+    fill: var(--glyph-color-active);
 }
 
 .quick-console > .console-prompt > .CodeMirror {
index 5540dbe..329d56a 100644 (file)
     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;
+    padding: 2px 9px 4px;
+    border: none;
+    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::before {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 3px;
+    opacity: var(--glyph-opacity);
+    z-index: -1;
 }
 
-.navigation-bar .item.radio.button.text-only:active {
+.navigation-bar .item.radio.button.text-only:matches(.selected, :hover) {
     color: var(--selected-foreground-color);
-    background-color: var(--selected-background-color-active);
 }
 
-.navigation-bar .item.radio.button.text-only.selected:active {
-    background-color: var(--selected-background-color-active);
+.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::before {
+    filter: brightness(0.8);
 }
index f1c1604..ee1faca 100644 (file)
@@ -53,7 +53,7 @@
     height: 3px;
     top: -5px;
 
-    background: linear-gradient(to right, hsl(210, 100%, 49%), hsl(210, 100%, 49%)) no-repeat 1px 0;
+    background: linear-gradient(to right, var(--glyph-color-active), var(--glyph-color-active)) no-repeat 1px 0;
 
     pointer-events: none;
 }
index 3050842..ecef8eb 100644 (file)
 }
 
 .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::before {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 3px;
+    opacity: var(--glyph-opacity);
+    z-index: -1;
+}
+
+.scope-bar.default-item-selected > li.multiple.selected::before {
+    display: none;
+}
+
+.scope-bar > li:matches(.selected, :hover) {
+    color: var(--selected-foreground-color);
+}
+
+.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.6);
+}
+
 .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);
index 9df6efc..4cb61ea 100644 (file)
     background-color: inherit;
 }
 
+.content-view.settings .navigation-bar .item.radio.button.text-only:before {
+    display: none;
+}
+
 .content-view.settings .navigation-bar .item.radio.button.text-only.selected {
     color: var(--selected-background-color)
 }
index 9e6439b..9579e55 100644 (file)
@@ -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;
     }
index 54219be..1d88260 100644 (file)
 
     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;
 }
 }
 
 @keyframes text-editor-highlight-fadeout {
-    from { background-color: highlight; }
+    from { background-color: var(--selected-text-background-color); }
 }
 
 .text-editor > .CodeMirror .hovered-expression-highlight {
 }
 
 @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); }
 }
 
index dbc6bd1..f73e788 100644 (file)
@@ -50,7 +50,7 @@
 }
 
 .timeline-record-frame.selected {
-    background: linear-gradient(to right, hsl(210, 98%, 96%), hsl(210, 98%, 96%)) no-repeat 1px -1px;
+    background: linear-gradient(to right, var(--selected-text-background-color), var(--selected-text-background-color)) no-repeat 1px -1px;
 }
 
 body.window-inactive .timeline-record-frame.selected {
index e6e9769..87a3d72 100644 (file)
@@ -43,7 +43,7 @@ WI.URLBreakpointTreeElement = class URLBreakpointTreeElement extends WI.GeneralT
 
         super(["breakpoint", "url", className], title, subtitle, breakpoint);
 
-        this.status = document.createElement("img");
+        this.status = WI.ImageUtilities.useSVGSymbol("Images/Breakpoint.svg");
         this.status.classList.add("status-image", "resolved");
 
         this.tooltipHandledSeparately = true;
index cc9d35c..2c8f8ac 100644 (file)
     --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%);
     --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-opacity: 1;
 
     --border-color: hsl(0, 0%, 70%);
     --border-color-dark: hsl(0, 0%, 57%);
 
     --value-changed-highlight: hsla(83, 100%, 48%, 0.4);
 
-    --breakpoint-fill-color: hsl(212, 45%, 54%);
-    --breakpoint-stroke-color: hsl(212, 45%, 48%);
-    --breakpoint-disabled-fill-color: hsl(212, 40%, 84%);
-    --breakpoint-disabled-stroke-color: hsl(212, 40%, 78%);
-    --breakpoint-unresolved-fill-color: hsl(0, 0%, 60%);
-    --breakpoint-unresolved-stroke-color: hsl(0, 0%, 54%);
-    --breakpoint-unresolved-disabled-fill-color: hsl(0, 0%, 84%);
-    --breakpoint-unresolved-disabled-stroke-color: hsl(0, 0%, 78%);
-
     --syntax-highlight-number-color: hsl(248, 100%, 40%);
     --syntax-highlight-boolean-color: hsl(309, 85%, 35%);
     --syntax-highlight-string-color: hsl(1, 79%, 42%);
@@ -175,9 +168,9 @@ body.window-inactive {
     /* FIXME: Use CSS4 color blend functions once they're available. */
     --selected-background-color: hsla(212, 92%, 54%, 0.5);
 
-    --glyph-color-active: hsla(212, 92%, 54%, 0.5);
     --glyph-color: hsla(0, 0%, 30%, 0.65);
     --glyph-color-disabled: hsla(0, 0%, 30%, 0.35);
+    --glyph-opacity: 0.6;
 }
 
 body.window-inactive * {
@@ -227,6 +220,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%);
@@ -309,7 +303,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);
     }
@@ -323,3 +316,12 @@ body.window-inactive * {
         --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
     }
 }
+
+body.mac-platform:not(.sierra, .high-sierra) {
+    --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;
+}