Title: [239760] trunk/Source/WebInspectorUI
Revision
239760
Author
nvasil...@apple.com
Date
2019-01-08 18:03:03 -0800 (Tue, 08 Jan 2019)

Log Message

Web Inspector: Use prefers-color-scheme instead of prefers-dark-interface
https://bugs.webkit.org/show_bug.cgi?id=193265

Reviewed by Timothy Hatcher.

* UserInterface/Views/AuditTestContentView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/AuditTestGroupContentView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/BezierEditor.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/BoxModelDetailsSectionRow.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/BreakpointActionView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/BreakpointPopoverController.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ButtonNavigationItem.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ButtonToolbarItem.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/CallFrameView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/CanvasContentView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/CanvasOverviewContentView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/CanvasSidebarPanel.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/CanvasTabContentView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/CodeMirrorOverrides.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/CompletionSuggestionsView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ComputedStyleDetailsPanel.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ComputedStyleSection.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ConsoleMessageView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ConsolePrompt.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/DOMNodeDetailsSidebarPanel.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/DOMTreeOutline.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/DataGrid.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/DebuggerDashboardView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/DebuggerSidebarPanel.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/DefaultDashboardView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/DetailsSection.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/DividerNavigationItem.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/Editing.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/FindBanner.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/FontResourceContentView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/FormattedValue.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/HoverMenu.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ImageResourceContentView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/IndexedDatabaseObjectStoreContentView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/LogContentView.css:
(@media (prefers-color-scheme: dark)):

* UserInterface/Views/Main.css:
(:root):

(@media (prefers-color-scheme: dark)):
* UserInterface/Views/NetworkDetailView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/NetworkTableContentView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/NewTabContentView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ObjectPreviewView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ObjectTreePropertyTreeElement.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/OpenResourceDialog.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ProgressView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/QuickConsole.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/RecordingActionTreeElement.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/RecordingContentView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/RecordingStateDetailsSidebarPanel.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ResourceSecurityContentView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ResourceSizesContentView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ResourceTimingBreakdownView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ScopeBar.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ScopeChainDetailsSidebarPanel.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/SearchBar.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/SearchSidebarPanel.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/SettingsTabContentView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ShaderProgramContentView.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/ShaderProgramTreeElement.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/SourceCodeTextEditor.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/SyntaxHighlightingDefaultTheme.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/TabBar.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/Table.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/TextEditor.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/TimelineDataGrid.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/TimelineIcons.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/TimelineOverview.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/Toolbar.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/TreeOutline.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/URLBreakpointPopover.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/Variables.css:
(@media (prefers-color-scheme: dark)):
* UserInterface/Views/WebSocketContentView.css:
(@media (prefers-color-scheme: dark)):

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (239759 => 239760)


--- trunk/Source/WebInspectorUI/ChangeLog	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/ChangeLog	2019-01-09 02:03:03 UTC (rev 239760)
@@ -1,3 +1,162 @@
+2019-01-08  Nikita Vasilyev  <nvasil...@apple.com>
+
+        Web Inspector: Use prefers-color-scheme instead of prefers-dark-interface
+        https://bugs.webkit.org/show_bug.cgi?id=193265
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/AuditTestContentView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/AuditTestGroupContentView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/BezierEditor.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/BoxModelDetailsSectionRow.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/BreakpointActionView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/BreakpointPopoverController.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ButtonNavigationItem.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ButtonToolbarItem.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/CallFrameView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/CanvasContentView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/CanvasOverviewContentView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/CanvasSidebarPanel.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/CanvasTabContentView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/CodeMirrorOverrides.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/CompletionSuggestionsView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ComputedStyleDetailsPanel.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ComputedStyleSection.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ConsoleMessageView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ConsolePrompt.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/DOMNodeDetailsSidebarPanel.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/DOMTreeOutline.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/DataGrid.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/DebuggerDashboardView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/DebuggerSidebarPanel.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/DefaultDashboardView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/DetailsSection.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/DividerNavigationItem.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/Editing.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/FindBanner.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/FontResourceContentView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/FormattedValue.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/HoverMenu.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ImageResourceContentView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/IndexedDatabaseObjectStoreContentView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/LogContentView.css:
+        (@media (prefers-color-scheme: dark)):
+
+        * UserInterface/Views/Main.css:
+        (:root):
+
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/NetworkDetailView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/NetworkTableContentView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/NewTabContentView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ObjectPreviewView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ObjectTreePropertyTreeElement.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/OpenResourceDialog.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ProgressView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/QuickConsole.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/RecordingActionTreeElement.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/RecordingContentView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/RecordingStateDetailsSidebarPanel.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ResourceSecurityContentView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ResourceSizesContentView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ResourceTimingBreakdownView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ScopeBar.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ScopeChainDetailsSidebarPanel.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/SearchBar.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/SearchSidebarPanel.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/SettingsTabContentView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ShaderProgramContentView.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ShaderProgramTreeElement.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/SourceCodeTextEditor.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/SyntaxHighlightingDefaultTheme.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/TabBar.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/Table.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/TextEditor.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/TimelineDataGrid.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/TimelineIcons.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/TimelineOverview.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/Toolbar.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/TreeOutline.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/URLBreakpointPopover.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/Variables.css:
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/WebSocketContentView.css:
+        (@media (prefers-color-scheme: dark)):
+
 2019-01-07  Devin Rousso  <drou...@apple.com>
 
         Web Inspector: Audit: run arrow shouldn't be visible when running tests

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -96,7 +96,7 @@
     display: none;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .content-view.audit-test {
         --audit-test-header-background-color: hsla(0, 0%, 23%, 0.7);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestGroupContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestGroupContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestGroupContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -145,7 +145,7 @@
     margin-bottom: var(--audit-test-vertical-space);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .content-view.audit-test-group > header > .percentage-pass {
         /* FIXME: Use CSS4 color blend functions once they're available. */
         color: hsla(0, 0%, 88%, 0.5);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -150,7 +150,7 @@
     padding-right: var(--bezier-editor-number-input-padding-start);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .bezier-editor > .bezier-preview-timing {
         border-top-color: var(--text-color-tertiary);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -109,7 +109,7 @@
     vertical-align: middle;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .details-section .row.box-model {
         color: var(--text-color);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -112,7 +112,7 @@
     overflow: hidden;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .breakpoint-action-block-body {
         border-color: var(--text-color-quaternary);
         background-color: unset;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -89,7 +89,7 @@
     margin-left: var(--edit-breakpoint-popover-option-margin-end);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .popover .edit-breakpoint-popover-content > table > tr > th {
         color: var(--text-color-secondary);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -73,7 +73,7 @@
     color: var(--glyph-color-disabled);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .navigation-bar .item.button {
         color: var(--text-color-secondary);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -62,7 +62,7 @@
     opacity: 0.35 !important;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .toolbar .item.button {
         color: var(--color-button);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -79,7 +79,7 @@
     color: hsla(0, 0%, 0%, 0.2);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .call-frame .subtitle,
     .call-frame .subtitle .source-link {
         color: hsla(0, 0%, var(--foreground-lightness), 0.6);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -55,7 +55,7 @@
     opacity: 0.5;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .content-view.canvas:not(.tab) {
         background-color: unset;
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -191,7 +191,7 @@
     -webkit-appearance: none;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .content-view.canvas-overview {
         background-color: unset;
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -98,7 +98,7 @@
     margin-bottom: 4px;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .sidebar > .panel.navigation.canvas > .navigation-bar > .item.record-start-stop.disabled {
         filter: grayscale() invert();
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -43,7 +43,7 @@
     content: image-set(url(../Images/DocumentGL.png) 1x, url(../Images/documen...@2x.png) 2x);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon {
         filter: invert(88%);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -118,7 +118,7 @@
     display: initial;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .CodeMirror-cursor {
         border-left-color: hsl(0, 0%, var(--foreground-lightness));
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -76,7 +76,7 @@
     color: white;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .completion-suggestions {
         background-color: var(--overlay-background);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -56,7 +56,7 @@
     height: var(--disclosure-button-size);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .computed-with-traces .details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content) {
         background-color: var(--background-color);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -157,7 +157,7 @@
     display: block;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .computed-style-section .computed-property-item.expanded {
         background-color: var(--background-color-code);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -285,7 +285,7 @@
     display: inline-block;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .console-message .syntax-highlighted {
         background-color: unset;
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -36,7 +36,7 @@
     overflow: hidden;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .console-prompt {
         background-color: var(--background-color-code);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -61,7 +61,7 @@
     -webkit-appearance: none;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter:hover {
         filter: brightness(1.25);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -312,7 +312,7 @@
     border-bottom: 1px solid hsl(47, 82%, 60%);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .tree-outline.dom li.elements-drag-over .selection-area {
         border-top-color: var(--selected-background-color);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -429,7 +429,7 @@
     color: var(--selected-foreground-color);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .data-grid td .subtitle {
         color: var(--selected-secondary-text-color);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -201,7 +201,7 @@
     height: 14px;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .toolbar .dashboard.debugger {
         color: var(--text-color);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -111,7 +111,7 @@
     border-bottom: none;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .sidebar > .panel.navigation.debugger .warning-banner {
         background-color: var(--yellow-highlight-background-color);
         color: var(--yellow-highlight-text-color);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -182,7 +182,7 @@
     50% { opacity: 0.6; }
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .toolbar .dashboard.default > .item > div {
         /* FIXME: introduce a variable for opacity and use it for both text and icons */
         color: hsla(0, 100%, 100%, 0.2);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -329,7 +329,7 @@
     }
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .details-section > .header {
         color: var(--text-color);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -38,7 +38,7 @@
     }
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .navigation-bar .item.divider {
         --divider-background: hsl(0, 0%, 40%);
         background-image: linear-gradient(var(--divider-background), var(--divider-background));

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Editing.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/Editing.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Editing.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -52,7 +52,7 @@
     display: none;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .editing {
         background-color: var(--background-color-secondary);
         outline-color: var(--text-color-tertiary) !important;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -307,7 +307,7 @@
     background-color: white;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .find-banner > button.segmented {
         background: transparent !important;
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -109,7 +109,7 @@
     background-color: lightgrey;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .content-view.resource.font .preview > .line {
         border-left-color: var(--text-color-quaternary);
         border-right-color: var(--text-color-quaternary);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -78,7 +78,7 @@
     right: -2px;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .formatted-object,
     .formatted-node,
     .formatted-error,

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -215,7 +215,7 @@
     opacity: 0.5;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label {
         color: var(--text-color-secondary);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -66,7 +66,7 @@
     pointer-events: all;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .hover-menu > svg > :matches(path, rect) {
         stroke: hsla(0, 0%, 100%, 0.3);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -46,7 +46,7 @@
     margin: auto 0;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .content-view.resource.image {
         background: var(--background-color-content);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -48,7 +48,7 @@
     top: 2px;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .content-view.indexed-database-object-store > .data-grid tr.selected {
         background-color: hsl(210, 0%, 30%) !important;
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -254,7 +254,7 @@
         alt: attr(data-labelprefix);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .console-messages {
         background-color: var(--background-color-code);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/Main.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Main.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -27,6 +27,10 @@
     box-sizing: border-box;
 }
 
+:root {
+    supported-color-schemes: light dark;
+}
+
 body {
     font-family: -webkit-system-font, sans-serif;
     font-size: 11px;
@@ -383,7 +387,7 @@
     background-position: 10px 10px, 10px 0px, 0 0, 0 10px;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .go-to-arrow {
         filter: invert();
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -72,7 +72,7 @@
     bottom: 0;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .network-detail {
         background-color: var(--background-color);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -304,7 +304,7 @@
     background-color: var(--network-response-color);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .network-table .cell.domain > .lock {
         filter: var(--filter-invert);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -89,7 +89,7 @@
     margin-top: 8px;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .new-tab.tab.content-view {
         background-color: var(--background-color-content);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -48,7 +48,7 @@
     line-height: 16px;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .object-preview .name {
         color: var(--syntax-highlight-boolean-color);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -151,7 +151,7 @@
     color: red;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .object-tree-property .getter,
     .object-tree-property .setter {
         filter: invert();

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -216,7 +216,7 @@
     color: hsla(0, 0%, 100%, 0.9);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .open-resource-dialog {
         background-color: var(--overlay-background);
         border-color: hsla(0, 0%, var(--foreground-lightness), 0.2);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ProgressView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ProgressView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ProgressView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -55,7 +55,7 @@
     margin: 0 auto;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .progress-view > .titles > .title {
         color: var(--text-color-secondary);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -108,7 +108,7 @@
     opacity: 1;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .CodeMirror .jump-to-symbol-highlight,
     .meta-key-pressed .spreadsheet-css-declaration:not(.locked) :matches(.name, .value):not(.editing):hover {
         color: var(--syntax-highlight-link-color) !important;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -234,7 +234,7 @@
     margin-top: 2px;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .item.action:not(.initial-state)::before {
         color: unset;
         opacity: 0.4;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -87,7 +87,7 @@
     z-index: 10;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .content-view:not(.tab).recording {
         background-color: unset;
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -48,7 +48,7 @@
     vertical-align: -1px;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .sidebar > .panel.details.recording-state > .content .data-grid tr.modified {
         color: var(--green-highlight-text-color);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSecurityContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSecurityContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSecurityContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -53,7 +53,7 @@
     color: var(--text-color);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     body[dir] .resource-security > section:matches(.connection, .certificate) > .details {
         border-color: var(--network-pseudo-header-color);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -117,7 +117,7 @@
     -webkit-margin-start: 3px;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .resource-sizes > .content .label {
         color: var(--text-color-secondary);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -68,7 +68,7 @@
     height: 14px;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .resource-timing-breakdown > table > tr.header:not(.total-row) > td {
         color: var(--text-color);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -116,7 +116,7 @@
     background-color: var(--selected-background-color-active);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .scope-bar > li {
         color: var(--text-color);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -64,7 +64,7 @@
     top: 1px;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .watch-_expression_-editor {
         background-color: var(--background-color-code);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SearchBar.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SearchBar.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SearchBar.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -53,7 +53,7 @@
     background-color: white;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     :matches(.search-bar, .filter-bar) > input[type="search"],
     .search-bar > input[type="search"]:not(:placeholder-shown) {
         border-color: var(--background-color-selected);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -79,7 +79,7 @@
     top: calc(var(--navigation-bar-height) + 40px - 1px);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .sidebar > .panel.navigation.search.changed > .banner {
         background-color: var(--yellow-highlight-background-color);
         color: var(--yellow-highlight-text-color);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -127,7 +127,7 @@
     margin-right: var(--settings-input-number-margin-start);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .content-view.settings .navigation-bar {
         background-color: var(--background-color-content);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -61,7 +61,7 @@
     top: 18px;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .content-view.shader-program > .text-editor.shader {
         --border-start-style: 1px solid var(--text-color-quaternary);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -41,7 +41,7 @@
     opacity: 0.5;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .item.shader-program .status > img {
         filter: invert();
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -183,7 +183,7 @@
     }
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .source-code.text-editor > .CodeMirror .issue-widget {
         color: hsl(0, 0%, var(--foreground-lightness));
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -179,7 +179,7 @@
     pointer-events: none;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .spreadsheet-style-declaration-editor {
         --background-color-selected: hsl(230, 51%, 36%);
         --border-color-selected: hsl(216, 98%, 67%);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -133,7 +133,7 @@
     padding-left: var(--css-declaration-horizontal-padding);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .spreadsheet-css-declaration {
         background: var(--background-color-code);
         color: var(--text-color-tertiary);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -52,7 +52,7 @@
     display: none;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .sidebar > .panel.details.css-style > .content > .rules .section-header {
         color: var(--text-color-secondary);
         border-bottom-color: hsla(0, 0%, var(--foreground-lightness), 0.2);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -125,7 +125,7 @@
     color: rgb(201, 192, 166);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .CodeMirror {
         color: var(--text-color);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -358,7 +358,7 @@
     pointer-events: none;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .tab-bar {
         background-image: none;
         background-color: hsl(0, 0%, 23%);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Table.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/Table.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Table.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -177,7 +177,7 @@
     text-align: center;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .table > .header > .sortable:active {
         background-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -130,7 +130,7 @@
     to { background-color: hsla(0, 0%, 0%, 0.1); }
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .text-editor > .CodeMirror .execution-line {
         background-color: hsla(89, 100%, 51%, 0.25) !important;
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -55,7 +55,7 @@
     top: 2px;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .data-grid th:matches(.sort-ascending, .sort-descending) {
         background: var(--background-color-selected);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -133,7 +133,7 @@
     content: url(../Images/LowPower.svg);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .time-icon .icon {
         filter: invert();
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -234,7 +234,7 @@
     right: 0;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:nth-child(even) {
         background: var(--background-color-alternate);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -223,7 +223,7 @@
     }
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     body .toolbar {
         background-image: linear-gradient(to bottom, hsl(0, 0%, 25%), hsl(0, 0%, 22%));
         box-shadow: none;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -255,7 +255,7 @@
     content: "\00A0\2014\00A0"; /* &nbsp;&mdash;&nbsp; */;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .tree-outline .item .subtitle {
         color: var(--text-color-secondary);
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -62,7 +62,7 @@
     overflow: hidden;
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .popover .url-breakpoint-content > .editor-wrapper > .editor {
         -webkit-appearance: unset;
         border-color: var(--text-color-quaternary);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -157,7 +157,7 @@
     --border-color-dark: hsl(0, 0%, 72%);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
 
     :root {
         color: var(--text-color);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css (239759 => 239760)


--- trunk/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css	2019-01-09 01:28:13 UTC (rev 239759)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css	2019-01-09 02:03:03 UTC (rev 239760)
@@ -80,7 +80,7 @@
     color: hsl(3, 96%, 27%);
 }
 
-@media (prefers-dark-interface) {
+@media (prefers-color-scheme: dark) {
     .web-socket.content-view .data-grid table.data tr.revealed {
         border-bottom-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
     }
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to