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

Tue, 26 Feb 2019 17:29:51 -0800

Title: [242118] trunk/Source/WebInspectorUI
Revision
242118
Author
[email protected]
Date
2019-02-26 17:28:02 -0800 (Tue, 26 Feb 2019)

Log Message

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/[email protected]: Removed.
* UserInterface/Images/BreakpointInactive.png: Removed.
* UserInterface/Images/[email protected]: 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.

Modified Paths

Added Paths

Removed Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (242117 => 242118)


--- trunk/Source/WebInspectorUI/ChangeLog	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/ChangeLog	2019-02-27 01:28:02 UTC (rev 242118)
@@ -1,3 +1,145 @@
+2019-02-26  Matt Baker  <[email protected]>
+
+        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/[email protected]: Removed.
+        * UserInterface/Images/BreakpointInactive.png: Removed.
+        * UserInterface/Images/[email protected]: 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  <[email protected]>
 
         Web Inspector: Search: no results when opening to Search tab

Deleted: trunk/Source/WebInspectorUI/UserInterface/Images/Breakpoint.png (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Images/Breakpoint.png	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Breakpoint.png	2019-02-27 01:28:02 UTC (rev 242118)
@@ -1,5 +0,0 @@
-\x89PNG
-
-������-IHDR������!������-������'\x8A"������PIDATxci=\xF4��\xB03\xC0\xF0@9\xE2sc:\x82\xFE\xB8s08\xE2\xEB\xC01\x80\xF803\x821\xC08i08\xE2\xE6hH��\xF1P\x9A\xE8ܡ;\xE2ˉ\x87@\xCCsĠ\xA8;��\xB7\x86BkYգ��������IEND\xAEB`\x82
\ No newline at end of file

Added: trunk/Source/WebInspectorUI/UserInterface/Images/Breakpoint.svg (0 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Images/Breakpoint.svg	                        (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Breakpoint.svg	2019-02-27 01:28:02 UTC (rev 242118)
@@ -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>

Deleted: trunk/Source/WebInspectorUI/UserInterface/Images/[email protected] (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Images/[email protected]	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/[email protected]	2019-02-27 01:28:02 UTC (rev 242118)
@@ -1,6 +0,0 @@
-\x89PNG
-
-������-IHDR������B������������\x89\x8Ar������\x96IDATxbi=\xF4\x84`? f\xC0\x85GR@<��\xB4g\xC76��\x86\xA3P\xD1Q\xB3��\x98\xC6v0;\xB0\xB0\x80^\xA9R\x88\x97{\x89\xD6\xF1-\xF0'p\xEF$!\x84\xF5\x84\xB0[*B\xD8"!\xAC%\x84\x9D\x92\xC2B\xD8#-!l\x93\x98\xD6\xC2.)\x93C`v\x8D\x92\xBC,\x83\x9D\xCF'?T\x9FQ8tIN\x8E\xE1\xC1\xEAa\x86\xA9\xAEf\xAAc\xBC-IBp\xC1\xF3\xBB\x99	\xB7C\xE5\xB4\xD7��������IEND\xAEB`\x82
\ No newline at end of file

Deleted: trunk/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive.png (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive.png	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive.png	2019-02-27 01:28:02 UTC (rev 242118)
@@ -1,5 +0,0 @@
-\x89PNG
-
-������-IHDR������!������-������'\x8A"������QIDATxc\x983o\xC1\xFF\xC0~@\xCC��\xC3\xE5\x88@̍\xE9\xFA\xE3\xCE\xC1\xE0\x88_@\xACw\xC4��\xE2\xC3@\xCCv\xC4��\xE3\xA4\xC1\xE0\x88\x9B\xA3!\xC4G@ib\xA0s\x87\xEE\x88/'1\xCC\x83\xA2\xEE����7ի\xFE\xAB>\x95��������IEND\xAEB`\x82
\ No newline at end of file

Deleted: trunk/Source/WebInspectorUI/UserInterface/Images/[email protected] (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Images/[email protected]	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/[email protected]	2019-02-27 01:28:02 UTC (rev 242118)
@@ -1,5 +0,0 @@
-\x89PNG
-
-������-IHDR������B������������\x89\x8Ar������\x96IDATxb\x983o\xC1\xFF\x82\xFD\x80\x98I\xF1��О\xDB��P\x8EBEG\xCDl`C\xD8\xC1\xEC\xC0
-l\xC0z\xA5J!^\xEE%Z\xFCŷ\xC0\x9F\xC0\xBD\x93\x84\xD6\xC2n\xA9a\x8BD\x84\xB0\x96vJFa\x8F4\x84\xB0MbBXG\xBB\xA4pL\x81\xD9!x4JB\xF0\xB2v>\x9F\xFCP}F\xE1\xD0%9!8\x86\xAB\x87\xA6\xBA\x9A\xA9\x8E\xF168$\xFD	\xC1\xCFK\xB02\xE05��������IEND\xAEB`\x82
\ No newline at end of file

Modified: trunk/Source/WebInspectorUI/UserInterface/Images/CSSVariable.svg (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Images/CSSVariable.svg	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/CSSVariable.svg	2019-02-27 01:28:02 UTC (rev 242118)
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Copyright © 2017 Devin Rousso <[email protected]>. 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>

Modified: trunk/Source/WebInspectorUI/UserInterface/Images/CubicBezier.svg (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Images/CubicBezier.svg	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/CubicBezier.svg	2019-02-27 01:28:02 UTC (rev 242118)
@@ -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>

Modified: trunk/Source/WebInspectorUI/UserInterface/Images/UserInputPrompt.svg (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Images/UserInputPrompt.svg	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/UserInputPrompt.svg	2019-02-27 01:28:02 UTC (rev 242118)
@@ -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>

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -49,7 +49,7 @@
 .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 @@
     }
 
     .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);
     }
 }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -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 {

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js	2019-02-27 01:28:02 UTC (rev 242118)
@@ -48,8 +48,9 @@
         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 @@
         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)

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -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 {

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.js (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.js	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.js	2019-02-27 01:28:02 UTC (rev 242118)
@@ -33,6 +33,8 @@
 
         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, {

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js	2019-02-27 01:28:02 UTC (rev 242118)
@@ -38,7 +38,7 @@
         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;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -61,9 +61,7 @@
 
 .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 {
@@ -70,24 +68,14 @@
     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);
+    filter: grayscale();
 }
 
-.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);
-}
-
 .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 {

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -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,18 +62,22 @@
 }
 
 .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 {
     content: " = $0";
     color: var(--console-secondary-text-color);
@@ -155,7 +155,7 @@
     width: 5px;
     height: 5px;
     content: "";
-    background-color: var(--selected-background-color);
+    background-color: var(--glyph-color-active);
     border-radius: 50%;
 }
 
@@ -313,18 +313,6 @@
 }
 
 @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);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -46,14 +46,10 @@
     background-repeat: no-repeat;
 }
 
-.inline-swatch:matches(.bezier, .spring) {
-    content: url(../Images/CubicBezier.svg);
+.inline-swatch:matches(.bezier, .spring, .variable) {
+    color: var(--glyph-color-active);
 }
 
-.inline-swatch.variable {
-    content: url(../Images/CSSVariable.svg);
-}
-
 .inline-swatch:matches(.bezier, .spring, .variable) {
     margin-right: 2px;
 }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js	2019-02-27 01:28:02 UTC (rev 242118)
@@ -32,7 +32,13 @@
 
         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;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -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);
-    }
 }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -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 {

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -31,21 +31,37 @@
     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);
+}

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -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;
 }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -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::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 @@
     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);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -45,6 +45,10 @@
     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)
 }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -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 @@
 }
 
 @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;
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -57,13 +57,14 @@
 
     z-index: -2;
 
-    border-image-source: image-set(url(../Images/BreakpointInactive.png) 1x, url(../Images/[email protected]) 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/[email protected]) 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); }
 }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -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 {

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/URLBreakpointTreeElement.js (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/URLBreakpointTreeElement.js	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/URLBreakpointTreeElement.js	2019-02-27 01:28:02 UTC (rev 242118)
@@ -43,7 +43,7 @@
 
         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;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (242117 => 242118)


--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css	2019-02-27 01:13:50 UTC (rev 242117)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css	2019-02-27 01:28:02 UTC (rev 242118)
@@ -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%);
@@ -63,6 +64,7 @@
     --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%);
@@ -91,15 +93,6 @@
 
     --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 @@
     /* 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 @@
         --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 {
         --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 @@
         --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;
+}

_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to