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

Wed, 13 Jun 2018 14:27:01 -0700

Title: [232811] trunk/Source/WebInspectorUI
Revision
232811
Author
[email protected]
Date
2018-06-13 14:26:34 -0700 (Wed, 13 Jun 2018)

Log Message

Web Inspector: open source Dark Mode
https://bugs.webkit.org/show_bug.cgi?id=186606

Reviewed by Timothy Hatcher.

The dark mode is currently only available on macOS Mojave via prefers-dark-interface CSS media query.

* UserInterface/Main.html:
* UserInterface/Views/DarkMode.css: Added.
(@media (prefers-dark-interface)):
(:root):
(body.window-inactive):
(body.window-inactive *):
(#main):
(.tree-outline.dom li.selected .selection-area):
(.tab-bar > .item > .icon):
(.go-to-arrow):
(.resource-link,):
(.expand-list-button):
(:matches(img, canvas).show-grid):
(.formatted-object,):
(.formatted-null,):
(.editing):
(.editing, .editing *):
(.text-editor > .CodeMirror .execution-line):
(.text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext),):
(.details-section > .header):
(.details-section > .header > label):
(.details-section .details-section,):
(.details-section .details-section:not(.collapsed) > .header):
(.details-section > .content > .group > .row.simple > .label):
(.details-section > .content > .group:nth-child(even)):
(.details-section > .content > .group > .row:matches(.empty, .text)):
(.data-grid th):
(.data-grid td .subtitle):
(.data-grid:matches(:focus, .force-focus) tr.selected td .subtitle):
(body:not(.window-inactive, .window-docked-inactive) .data-grid:matches(:focus, .force-focus) tr.editable.selected .cell-content > input):
(.data-grid tr.editable .cell-content > input):
(.data-grid td.spanning):
(.object-tree,):
(.object-preview .name):
(.object-preview > .size):
(.tab-bar):
(.tab-bar > .item):
(.tab-bar > .item > .title):
(.tab-bar > .item:not(.disabled).selected):
(.tab-bar:not(.animating) > .item:not(.selected):hover):
(.tab-bar > .item > .close):
(body.window-inactive .tab-bar):
(body.window-inactive .tab-bar > .item):
(body.window-inactive .tab-bar > .item.selected):
(body.window-inactive .tab-bar > .item > .title):
(body .toolbar):
(body.window-inactive .toolbar):
(body.latest-mac .toolbar .item.button,):
(body.latest-mac .toolbar .search-bar > input[type="search"]):
(body.latest-mac .toolbar .search-bar > input[type="search"]:focus):
(body.latest-mac .toolbar .search-bar > input[type="search"]::placeholder):
(body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"]::placeholder):
(body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"]::-webkit-search-results-button):
(body.latest-mac .toolbar .dashboard-container):
(body.latest-mac .toolbar .item.button:active):
(body.latest-mac.window-inactive .toolbar .item.button,):
(.navigation-bar .item.divider):
(.toolbar .item.button):
(.toolbar .item.button:not(.disabled):active):
(.toolbar .item.button:not(.disabled):matches(:focus, .activate.activated)):
(.toolbar .item.button:not(.disabled):active:matches(:focus, .activate.activated)):
(.toolbar .dashboard.default > .item > div):
(.toolbar .dashboard.default > .item.enabled > div):
(.toolbar .dashboard.default > .item.enabled:hover):
(.toolbar .dashboard.default > .item.enabled:hover > div):
(.toolbar .dashboard.default > .resourcesCount > img,):
(body.latest-mac .toolbar .dashboard .item.button):
(.dashboard-container .advance-arrow):
(.toolbar .dashboard.debugger):
(.dashboard.debugger .navigation-bar .item.button > .glyph):
(.dashboard.debugger > .location .function-name):
(.dashboard.debugger > .location .go-to-link):
(.dashboard.debugger > .divider):
(.popover .edit-breakpoint-popover-content > label.toggle):
(.popover .edit-breakpoint-popover-content > table > tr > th):
(.breakpoint-action-block-body):
(.breakpoint-action-block-body > .description):
(.breakpoint-action-append-button,):
(.popover .xhr-breakpoint-content > .editor-wrapper > .editor):
(.navigation-bar .item.button):
(.spreadsheet-style-declaration-editor .property:not(.disabled) .value):
(.spreadsheet-css-declaration):
(.spreadsheet-css-declaration .selector:focus,):
(.spreadsheet-css-declaration.locked .origin::after):
(.spreadsheet-css-declaration .origin .go-to-link,):
(.spreadsheet-style-declaration-editor :matches(.name, .value).editing):
(.spreadsheet-style-declaration-editor .property.has-warning):
(.spreadsheet-style-declaration-editor .property.has-warning .warning):
(.spreadsheet-css-declaration .media-label):
(.quick-console):
(.syntax-highlighted,):
(.cm-s-default,):
(.CodeMirror .jump-to-symbol-highlight,):
(.console-prompt):
(.completion-suggestions):
(.completion-suggestions-container > .item):
(.CodeMirror-cursor):
(.CodeMirror .CodeMirror-gutters):
(.cm-s-default .cm-link):
(.cm-s-default .cm-m-xml.cm-attribute,):
(.cm-s-default .cm-meta):
(.cm-s-default .cm-variable-3):
(.cm-s-default .cm-builtin):
(.tree-outline .item .subtitle):
(.object-tree-property .getter,):
(.item.object-tree-property.prototype-property):
(.object-tree-property.prototype-property:hover,):
(.object-tree-property .value.error):
(.tree-outline.dom):
(.tree-outline.dom li.selected + ol.children.expanded):
(.tree-outline.dom .shadow):
(.tree-outline.dom li.parent.shadow + ol.children.expanded,):
(.showing-find-banner .tree-outline.dom .search-highlight):
(.sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter:hover):
(.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label):
(.spreadsheet-css-declaration.locked):
(.spreadsheet-css-declaration .selector.style-attribute):
(.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > *):
(.inline-swatch):
(.spreadsheet-style-panel .section-header):
(.spreadsheet-style-panel .section-header .node-link:hover):
(.computed-style-properties.details-section):
(.details-section.style-box-model:not(.collapsed) > :matches(.header, .content)):
(.table,):
(.table > .header > .sortable:active):
(.table > .header > :matches(.sort-ascending, .sort-descending)):
(.table > .header > :matches(.sort-ascending, .sort-descending)::after):
(.scope-bar > li):
(.timeline-overview > .navigation-bar.timelines):
(.timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:nth-child(even)):
(.timeline-overview.edit-instruments > .tree-outline.timelines .item:not(:first-child),):
(.time-icon .icon):
(.data-grid th:matches(.sort-ascending, .sort-descending)):
(.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple):
(.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows):
(.content-view.settings .navigation-bar):
(.content-view.settings .navigation-bar .item.radio.button.text-only.selected):
(.new-tab.tab.content-view):
(.filter-bar > input[type="search"]):
(.filter-bar > input[type="search"]::placeholder):
(.filter-bar > input[type="search"]:focus):
(.content-view.resource.image):
(.console-messages):
(.console-item):
(.console-messages:focus .console-item.selected):
(.console-messages:focus .console-item.selected + .console-item):
(.console-session:first-of-type .console-session-header):
(.console-session:not(:first-of-type) .console-session-header):
(.console-messages a):
(.console-messages a:hover):
(.console-messages:focus .console-item.selected::after):
(.console-error-level):
(.console-error-level:not(.filtered-out, .filtered-out-by-search), .console-error-level:not(.filtered-out, .filtered-out-by-search) + .console-item):
(.console-warning-level):
(.console-warning-level:not(.filtered-out, .filtered-out-by-search), .console-warning-level:not(.filtered-out, .filtered-out-by-search) + .console-item):
(.search-in-progress .console-item:not(.filtered-out-by-search) .highlighted):
(.search-in-progress .console-item:not(.filtered-out-by-search) .highlighted.selected):
(.source-code.text-editor > .CodeMirror .error):
(.source-code.text-editor > .CodeMirror .warning):
(.source-code.text-editor > .CodeMirror .issue-widget):
(.source-code.text-editor > .CodeMirror .issue-widget.inline.warning):
(.source-code.text-editor > .CodeMirror .issue-widget.inline.warning > .arrow):
(.source-code.text-editor > .CodeMirror .issue-widget.inline.error):
(.source-code.text-editor > .CodeMirror .issue-widget.inline.error > .arrow):
(.console-message .syntax-highlighted):
(.console-warning-level .console-message-text):
(.console-error-level .console-message-text):
(.console-user-command > .console-message-text):
(.console-message .repeat-count):
(.call-frame .subtitle,):
(.call-frame:hover .subtitle .source-link,):
(.call-frame .separator):
(.quick-console.showing-log):
(.find-banner.console-find-banner > input[type=search]:not(:placeholder-shown)):
(.network-resource-detail):
(.network-resource-detail .item.close > .glyph):
(.network .network-resource-detail .navigation-bar .item.radio.button.text-only.selected):
(.resource-headers .value):
(.network-table .cell.domain > .lock):
(.resource-sizes > .content .label):
(.popover.waterfall-popover):
(.resource-timing-breakdown > table > tr.header:not(.total-row) > td):
(.resource-timing-breakdown > table > tr > td.label,):
(.resource-timing-breakdown > table hr):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule):
(.content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon):
(.web-socket.content-view .data-grid table.data tr.revealed):
(.web-socket.content-view .data-grid.variable-height-rows table.data tr.outgoing):
(.web-socket.content-view .data-grid.variable-height-rows table.data tr.non-text-frame):
(.item.action:not(.initial-state)::before):
(.tree-outline .item.action.visual:not(.selected, .invalid)):
(.item.action:not(.initial-state) > .icon):
(.tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon):
(.content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon,):
(.content-view.canvas > .preview > img,):
(.content-view.canvas-overview):
(.content-view.canvas-overview .content-view.canvas):
(.content-view.canvas-overview .content-view.canvas.is-recording):
(.content-view.canvas-overview .content-view.canvas.is-recording > header):
(.content-view.canvas-overview .content-view.canvas > header > .titles > .title):
(.content-view.canvas-overview .content-view.canvas > header > .titles > .subtitle,):
(.content-view.canvas-overview .content-view.canvas > footer > .recordings::before):
(.content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .subtitle):
(.content-view.canvas:not(.tab)):
(.content-view:not(.tab).recording):
(.content-view:not(.tab).recording > header > .slider-container):
(.content-view:not(.tab).recording > header > .slider-container > input[type=range]):
(.sidebar > .panel.details.recording-state > .content > .data-grid tr.modified):
(.progress-view > .titles > .title):
(.progress-view > .titles > .subtitle):
(.indeterminate-progress-spinner):
(.content-view.shader-program > .text-editor.shader):
(.content-view.shader-program > .text-editor.shader > .type-title):
(.item.shader-program .status > img):
(.open-resource-dialog):
(.open-resource-dialog > .field > input):
(.open-resource-dialog > .field > input::placeholder):
(.open-resource-dialog > .tree-outline .item.selected):
(.open-resource-dialog > .field::before):

Modified Paths

Added Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (232810 => 232811)


--- trunk/Source/WebInspectorUI/ChangeLog	2018-06-13 21:21:21 UTC (rev 232810)
+++ trunk/Source/WebInspectorUI/ChangeLog	2018-06-13 21:26:34 UTC (rev 232811)
@@ -1,3 +1,232 @@
+2018-06-13  Nikita Vasilyev  <[email protected]>
+
+        Web Inspector: open source Dark Mode
+        https://bugs.webkit.org/show_bug.cgi?id=186606
+
+        Reviewed by Timothy Hatcher.
+
+        The dark mode is currently only available on macOS Mojave via prefers-dark-interface CSS media query.
+
+        * UserInterface/Main.html:
+        * UserInterface/Views/DarkMode.css: Added.
+        (@media (prefers-dark-interface)):
+        (:root):
+        (body.window-inactive):
+        (body.window-inactive *):
+        (#main):
+        (.tree-outline.dom li.selected .selection-area):
+        (.tab-bar > .item > .icon):
+        (.go-to-arrow):
+        (.resource-link,):
+        (.expand-list-button):
+        (:matches(img, canvas).show-grid):
+        (.formatted-object,):
+        (.formatted-null,):
+        (.editing):
+        (.editing, .editing *):
+        (.text-editor > .CodeMirror .execution-line):
+        (.text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext),):
+        (.details-section > .header):
+        (.details-section > .header > label):
+        (.details-section .details-section,):
+        (.details-section .details-section:not(.collapsed) > .header):
+        (.details-section > .content > .group > .row.simple > .label):
+        (.details-section > .content > .group:nth-child(even)):
+        (.details-section > .content > .group > .row:matches(.empty, .text)):
+        (.data-grid th):
+        (.data-grid td .subtitle):
+        (.data-grid:matches(:focus, .force-focus) tr.selected td .subtitle):
+        (body:not(.window-inactive, .window-docked-inactive) .data-grid:matches(:focus, .force-focus) tr.editable.selected .cell-content > input):
+        (.data-grid tr.editable .cell-content > input):
+        (.data-grid td.spanning):
+        (.object-tree,):
+        (.object-preview .name):
+        (.object-preview > .size):
+        (.tab-bar):
+        (.tab-bar > .item):
+        (.tab-bar > .item > .title):
+        (.tab-bar > .item:not(.disabled).selected):
+        (.tab-bar:not(.animating) > .item:not(.selected):hover):
+        (.tab-bar > .item > .close):
+        (body.window-inactive .tab-bar):
+        (body.window-inactive .tab-bar > .item):
+        (body.window-inactive .tab-bar > .item.selected):
+        (body.window-inactive .tab-bar > .item > .title):
+        (body .toolbar):
+        (body.window-inactive .toolbar):
+        (body.latest-mac .toolbar .item.button,):
+        (body.latest-mac .toolbar .search-bar > input[type="search"]):
+        (body.latest-mac .toolbar .search-bar > input[type="search"]:focus):
+        (body.latest-mac .toolbar .search-bar > input[type="search"]::placeholder):
+        (body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"]::placeholder):
+        (body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"]::-webkit-search-results-button):
+        (body.latest-mac .toolbar .dashboard-container):
+        (body.latest-mac .toolbar .item.button:active):
+        (body.latest-mac.window-inactive .toolbar .item.button,):
+        (.navigation-bar .item.divider):
+        (.toolbar .item.button):
+        (.toolbar .item.button:not(.disabled):active):
+        (.toolbar .item.button:not(.disabled):matches(:focus, .activate.activated)):
+        (.toolbar .item.button:not(.disabled):active:matches(:focus, .activate.activated)):
+        (.toolbar .dashboard.default > .item > div):
+        (.toolbar .dashboard.default > .item.enabled > div):
+        (.toolbar .dashboard.default > .item.enabled:hover):
+        (.toolbar .dashboard.default > .item.enabled:hover > div):
+        (.toolbar .dashboard.default > .resourcesCount > img,):
+        (body.latest-mac .toolbar .dashboard .item.button):
+        (.dashboard-container .advance-arrow):
+        (.toolbar .dashboard.debugger):
+        (.dashboard.debugger .navigation-bar .item.button > .glyph):
+        (.dashboard.debugger > .location .function-name):
+        (.dashboard.debugger > .location .go-to-link):
+        (.dashboard.debugger > .divider):
+        (.popover .edit-breakpoint-popover-content > label.toggle):
+        (.popover .edit-breakpoint-popover-content > table > tr > th):
+        (.breakpoint-action-block-body):
+        (.breakpoint-action-block-body > .description):
+        (.breakpoint-action-append-button,):
+        (.popover .xhr-breakpoint-content > .editor-wrapper > .editor):
+        (.navigation-bar .item.button):
+        (.spreadsheet-style-declaration-editor .property:not(.disabled) .value):
+        (.spreadsheet-css-declaration):
+        (.spreadsheet-css-declaration .selector:focus,):
+        (.spreadsheet-css-declaration.locked .origin::after):
+        (.spreadsheet-css-declaration .origin .go-to-link,):
+        (.spreadsheet-style-declaration-editor :matches(.name, .value).editing):
+        (.spreadsheet-style-declaration-editor .property.has-warning):
+        (.spreadsheet-style-declaration-editor .property.has-warning .warning):
+        (.spreadsheet-css-declaration .media-label):
+        (.quick-console):
+        (.syntax-highlighted,):
+        (.cm-s-default,):
+        (.CodeMirror .jump-to-symbol-highlight,):
+        (.console-prompt):
+        (.completion-suggestions):
+        (.completion-suggestions-container > .item):
+        (.CodeMirror-cursor):
+        (.CodeMirror .CodeMirror-gutters):
+        (.cm-s-default .cm-link):
+        (.cm-s-default .cm-m-xml.cm-attribute,):
+        (.cm-s-default .cm-meta):
+        (.cm-s-default .cm-variable-3):
+        (.cm-s-default .cm-builtin):
+        (.tree-outline .item .subtitle):
+        (.object-tree-property .getter,):
+        (.item.object-tree-property.prototype-property):
+        (.object-tree-property.prototype-property:hover,):
+        (.object-tree-property .value.error):
+        (.tree-outline.dom):
+        (.tree-outline.dom li.selected + ol.children.expanded):
+        (.tree-outline.dom .shadow):
+        (.tree-outline.dom li.parent.shadow + ol.children.expanded,):
+        (.showing-find-banner .tree-outline.dom .search-highlight):
+        (.sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter:hover):
+        (.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label):
+        (.spreadsheet-css-declaration.locked):
+        (.spreadsheet-css-declaration .selector.style-attribute):
+        (.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > *):
+        (.inline-swatch):
+        (.spreadsheet-style-panel .section-header):
+        (.spreadsheet-style-panel .section-header .node-link:hover):
+        (.computed-style-properties.details-section):
+        (.details-section.style-box-model:not(.collapsed) > :matches(.header, .content)):
+        (.table,):
+        (.table > .header > .sortable:active):
+        (.table > .header > :matches(.sort-ascending, .sort-descending)):
+        (.table > .header > :matches(.sort-ascending, .sort-descending)::after):
+        (.scope-bar > li):
+        (.timeline-overview > .navigation-bar.timelines):
+        (.timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:nth-child(even)):
+        (.timeline-overview.edit-instruments > .tree-outline.timelines .item:not(:first-child),):
+        (.time-icon .icon):
+        (.data-grid th:matches(.sort-ascending, .sort-descending)):
+        (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple):
+        (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows):
+        (.content-view.settings .navigation-bar):
+        (.content-view.settings .navigation-bar .item.radio.button.text-only.selected):
+        (.new-tab.tab.content-view):
+        (.filter-bar > input[type="search"]):
+        (.filter-bar > input[type="search"]::placeholder):
+        (.filter-bar > input[type="search"]:focus):
+        (.content-view.resource.image):
+        (.console-messages):
+        (.console-item):
+        (.console-messages:focus .console-item.selected):
+        (.console-messages:focus .console-item.selected + .console-item):
+        (.console-session:first-of-type .console-session-header):
+        (.console-session:not(:first-of-type) .console-session-header):
+        (.console-messages a):
+        (.console-messages a:hover):
+        (.console-messages:focus .console-item.selected::after):
+        (.console-error-level):
+        (.console-error-level:not(.filtered-out, .filtered-out-by-search), .console-error-level:not(.filtered-out, .filtered-out-by-search) + .console-item):
+        (.console-warning-level):
+        (.console-warning-level:not(.filtered-out, .filtered-out-by-search), .console-warning-level:not(.filtered-out, .filtered-out-by-search) + .console-item):
+        (.search-in-progress .console-item:not(.filtered-out-by-search) .highlighted):
+        (.search-in-progress .console-item:not(.filtered-out-by-search) .highlighted.selected):
+        (.source-code.text-editor > .CodeMirror .error):
+        (.source-code.text-editor > .CodeMirror .warning):
+        (.source-code.text-editor > .CodeMirror .issue-widget):
+        (.source-code.text-editor > .CodeMirror .issue-widget.inline.warning):
+        (.source-code.text-editor > .CodeMirror .issue-widget.inline.warning > .arrow):
+        (.source-code.text-editor > .CodeMirror .issue-widget.inline.error):
+        (.source-code.text-editor > .CodeMirror .issue-widget.inline.error > .arrow):
+        (.console-message .syntax-highlighted):
+        (.console-warning-level .console-message-text):
+        (.console-error-level .console-message-text):
+        (.console-user-command > .console-message-text):
+        (.console-message .repeat-count):
+        (.call-frame .subtitle,):
+        (.call-frame:hover .subtitle .source-link,):
+        (.call-frame .separator):
+        (.quick-console.showing-log):
+        (.find-banner.console-find-banner > input[type=search]:not(:placeholder-shown)):
+        (.network-resource-detail):
+        (.network-resource-detail .item.close > .glyph):
+        (.network .network-resource-detail .navigation-bar .item.radio.button.text-only.selected):
+        (.resource-headers .value):
+        (.network-table .cell.domain > .lock):
+        (.resource-sizes > .content .label):
+        (.popover.waterfall-popover):
+        (.resource-timing-breakdown > table > tr.header:not(.total-row) > td):
+        (.resource-timing-breakdown > table > tr > td.label,):
+        (.resource-timing-breakdown > table hr):
+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule):
+        (.content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon):
+        (.web-socket.content-view .data-grid table.data tr.revealed):
+        (.web-socket.content-view .data-grid.variable-height-rows table.data tr.outgoing):
+        (.web-socket.content-view .data-grid.variable-height-rows table.data tr.non-text-frame):
+        (.item.action:not(.initial-state)::before):
+        (.tree-outline .item.action.visual:not(.selected, .invalid)):
+        (.item.action:not(.initial-state) > .icon):
+        (.tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon):
+        (.content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon,):
+        (.content-view.canvas > .preview > img,):
+        (.content-view.canvas-overview):
+        (.content-view.canvas-overview .content-view.canvas):
+        (.content-view.canvas-overview .content-view.canvas.is-recording):
+        (.content-view.canvas-overview .content-view.canvas.is-recording > header):
+        (.content-view.canvas-overview .content-view.canvas > header > .titles > .title):
+        (.content-view.canvas-overview .content-view.canvas > header > .titles > .subtitle,):
+        (.content-view.canvas-overview .content-view.canvas > footer > .recordings::before):
+        (.content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .subtitle):
+        (.content-view.canvas:not(.tab)):
+        (.content-view:not(.tab).recording):
+        (.content-view:not(.tab).recording > header > .slider-container):
+        (.content-view:not(.tab).recording > header > .slider-container > input[type=range]):
+        (.sidebar > .panel.details.recording-state > .content > .data-grid tr.modified):
+        (.progress-view > .titles > .title):
+        (.progress-view > .titles > .subtitle):
+        (.indeterminate-progress-spinner):
+        (.content-view.shader-program > .text-editor.shader):
+        (.content-view.shader-program > .text-editor.shader > .type-title):
+        (.item.shader-program .status > img):
+        (.open-resource-dialog):
+        (.open-resource-dialog > .field > input):
+        (.open-resource-dialog > .field > input::placeholder):
+        (.open-resource-dialog > .tree-outline .item.selected):
+        (.open-resource-dialog > .field::before):
+
 2018-06-09  Dan Bernstein  <[email protected]>
 
         [Xcode] Clean up and modernize some build setting definitions

Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (232810 => 232811)


--- trunk/Source/WebInspectorUI/UserInterface/Main.html	2018-06-13 21:21:21 UTC (rev 232810)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html	2018-06-13 21:26:34 UTC (rev 232811)
@@ -237,6 +237,8 @@
     <link rel="stylesheet" href=""
     <link rel="stylesheet" href=""
 
+    <link rel="stylesheet" href=""
+
     <link rel="stylesheet" href=""
     <link rel="stylesheet" href=""

Added: trunk/Source/WebInspectorUI/UserInterface/Views/DarkMode.css (0 => 232811)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DarkMode.css	                        (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DarkMode.css	2018-06-13 21:26:34 UTC (rev 232811)
@@ -0,0 +1,1283 @@
+/*
+ * Copyright (C) 2018 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+@media (prefers-dark-interface) {
+
+    /* FIXME: Use CSS4 color functions once they're available. */
+
+    :root {
+        color: var(--text-color);
+
+        --text-color: hsl(0, 0%, 88%);
+        --text-color-active: white;
+        --text-color-secondary: hsl(0, 0%, 65%);
+
+        /* Disabled text/glyphs */
+        --text-color-tertiary: hsl(0, 0%, 50%);
+
+        /* Dividers, separators, background fills */
+        --text-color-quaternary: hsl(0, 0%, 33%);
+
+        /* Deprecated */
+        --text-color-gray-dark: hsl(0, 0%, 75%);
+        --text-color-gray-medium: var(--text-color-secondary);
+
+        --background-color: hsl(0, 0%, 24%);
+        --background-color-secondary: hsl(0, 0%, 27%);
+        --background-color-tertiary: hsl(0, 0%, 31%);
+
+        --background-color-content: hsl(0, 0%, 21%);
+        --background-color-code: hsl(0, 0%, 21%);
+
+        --background-color-alternate: hsla(0, 0%, var(--foreground-lightness), 0.05);
+        --background-color-selected: hsla(0, 0%, var(--foreground-lightness), 0.1);
+
+        --color-button: hsl(0, 0%, 99%);
+        --color-button-active: var(--text-color-active);
+
+        --selected-foreground-color: var(--text-color-active);
+        --selected-secondary-text-color: hsla(0, 0%, var(--foreground-lightness), 0.7);
+        --selected-secondary-text-color-active: hsla(0, 0%, var(--foreground-lightness), 0.85);
+        --selected-background-color: hsl(210, 96%, 43%);
+        --selected-background-color-unfocused: hsla(0, 0%, var(--foreground-lightness), 0.15);
+        --selected-background-color-active: hsl(218, 85%, 62%);
+        --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
+        --selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
+
+        --glyph-color: hsl(0, 0%, 80%);
+        --glyph-color-pressed: hsl(0, 0%, 100%);
+        --glyph-color-disabled: hsla(0, 0%, 80%, 0.4);
+        --glyph-color-active: hsl(212, 100%, 71%);
+        --glyph-color-active-pressed: hsl(212, 92%, 74%);
+        --glyph-color-inactive: hsl(0, 0%, 36%);
+
+        --border-color: hsl(0, 0%, 33%);
+        --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
+
+        --border-color-secondary: hsl(0, 0%, 27%);
+
+        --button-background-color: hsl(0, 0%, 43%);
+        --button-background-color-hover: var(--button-background-color);
+        --button-background-color-pressed: hsl(0, 0%, 55%);
+        --button-background-color-inactive: hsl(0, 0%, 28%);
+
+        --dashboard-background-color: hsl(0, 0%, 36%);
+
+        --panel-background-color: hsl(0, 0%, 24%);
+        --panel-background-color-light: hsl(0, 0%, 29%);
+
+        --error-text-color: hsl(0, 86%, 65%);
+
+        --green-highlight-background-color: hsl(120, 15%, 28%);
+        --green-highlight-text-color: hsl(80, 75%, 80%);
+
+        --yellow-highlight-background-color: hsl(3, 20%, 26%);
+        --yellow-highlight-text-color: hsl(50, 96%, 87%);
+
+        --value-changed-highlight: var(--green-highlight-background-color);
+        --value-visual-highlight: var(--yellow-highlight-background-color);
+
+        --syntax-highlight-number-color: hsl(276, 100%, 85%);
+        --syntax-highlight-boolean-color: hsl(299, 71%, 80%);
+        --syntax-highlight-string-color: hsl(28, 84%, 63%);
+        --syntax-highlight-link-color: hsl(223, 100%, 77%);
+        --syntax-highlight-regexp-color: hsl(20, 100%, 64%);
+        --syntax-highlight-symbol-color: hsl(172, 45%, 65%);
+        --syntax-highlight-comment-color: hsl(119, 40%, 72%);
+        --syntax-highlight-regex-group-color: var(--text-color-gray-medium);
+
+        --console-secondary-text-color: hsla(0, 0%, 100%, 0.33);
+
+        --warning-background-color: hsla(21, 100%, 51%, 0.12);
+        --error-background-color: hsla(0, 100%, 50%, 0.15);
+
+        --even-zebra-stripe-row-background-color: var(--background-color);
+        --odd-zebra-stripe-row-background-color: var(--background-color-secondary);
+        --transparent-stripe-background-gradient: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 100%, 0.03) 50%, hsla(0, 0%, 100%, 0.03)) top left / 100% 40px;
+
+        --search-highlight-text-color: hsl(60, 100%, 50%);
+        --search-highlight-text-color-active: hsl(0, 0%, 0%);
+        --search-highlight-background-color: hsla(53, 83%, 53%, 0.2);
+        --search-highlight-background-color-active: hsl(60, 100%, 50%);
+        --search-highlight-underline-color: hsla(60, 100%, 50%, 0.5);
+
+        /* Invert colors yet preserve the hue */
+        --filter-invert: invert(100%) hue-rotate(180deg);
+
+        --foreground-lightness: 100%;
+
+        /* TODO: Use the same variable for the default theme */
+        --overlay-background: hsla(0, 0%, 24%, 0.9);
+
+        --console-message-separator: var(--text-color-quaternary);
+    }
+
+    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);
+    }
+
+    body.window-inactive * {
+        /* FIXME: these properties are duplicated so that they have higher specificity than WebKit's stylesheet.
+        Otherwise, the variable definition inside 'body.window-inactive *' in OpenSource overrides with a lighter color.
+        When merging to open source, we should guard the existing .window-inactive style with 
+        '@media not (prefers-dark-interface)' to avoid applying the definition too broadly. */
+        --border-color: hsl(0, 0%, 33%);
+        --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
+    }
+
+    /*
+    FIXME: Selectively invert images
+    Images that should not be inverted:
+    - User data from websites;
+    - Most colored icons;
+
+    Images that should be inverted:
+    - Grayscale icons.
+
+    img {
+        filter: var(--filter-invert);
+    }
+    */
+
+    #main {
+        background-color: var(--background-color-content);
+    }
+
+    .tree-outline.dom li.selected .selection-area {
+        background-color: var(--background-color-selected);
+    }
+
+    .tab-bar > .item > .icon {
+        filter: var(--filter-invert);
+    }
+
+
+    /* Main.css */
+    .go-to-arrow {
+        filter: invert();
+    }
+
+    .resource-link,
+    .go-to-link {
+        color: var(--text-color-secondary);
+    }
+
+    .expand-list-button {
+        color: inherit;
+    }
+
+    :matches(img, canvas).show-grid {
+        background-color: white;
+        --checkerboard-dark-square: hsl(0, 0%, 80%);
+        background-image: linear-gradient(315deg, transparent 75%, var(--checkerboard-dark-square) 75%), linear-gradient(45deg, transparent 75%, var(--checkerboard-dark-square) 75%), linear-gradient(315deg, var(--checkerboard-dark-square) 25%, transparent 25%), linear-gradient(45deg, var(--checkerboard-dark-square) 25%, transparent 25%);
+    }
+
+
+    /* FormattedValue.css */
+    .formatted-object,
+    .formatted-node,
+    .formatted-error,
+    .formatted-map,
+    .formatted-set,
+    .formatted-weakmap,
+    .formatted-weakset {
+        color: var(--text-color);
+    }
+    .formatted-null,
+    .formatted-undefined {
+        color: var(--text-color-secondary);
+    }
+
+
+    /* Editing.css */
+    .editing {
+        background-color: var(--background-color-secondary);
+        outline-color: var(--text-color-tertiary) !important;
+    }
+
+    .editing, .editing * {
+        color: var(--text-color-active) !important;
+    }
+
+
+    /* TextEditor.css */
+    .text-editor > .CodeMirror .execution-line {
+        background-color: hsla(99, 100%, 51%, 0.3) !important;
+    }
+    .text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext),
+    .text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext) + .CodeMirror-widget {
+        background-color: hsl(99, 96%, 19%);
+    }
+
+
+    /* DetailsSection.css */
+    .details-section > .header {
+        color: var(--text-color);
+    }
+    .details-section > .header > label {
+        color: var(--text-color-secondary);
+    }
+    .details-section .details-section,
+    .details-section .details-section > .header,
+    .details-section.computed-style-properties:not(.collapsed) > .header{
+        background-color: var(--background-color);
+    }
+    .details-section .details-section:not(.collapsed) > .header {
+        border-bottom-color: var(--border-color-secondary);
+    }
+    .details-section > .content > .group > .row.simple > .label {
+        color: var(--text-color-secondary);
+    }
+    .details-section > .content > .group:nth-child(even) {
+        background-color: unset;
+    }
+    .details-section > .content > .group > .row:matches(.empty, .text) {
+        color: var(--text-color-secondary);
+    }
+
+
+    /* DataGrid.css */
+    .data-grid th {
+        background-color: var(--background-color);
+    }
+
+    .data-grid td .subtitle {
+        color: var(--selected-secondary-text-color);
+    }
+
+    .data-grid:matches(:focus, .force-focus) tr.selected td .subtitle {
+        color: hsla(0, 0%, var(--foreground-lightness), 0.9);
+    }
+
+    body:not(.window-inactive, .window-docked-inactive) .data-grid:matches(:focus, .force-focus) tr.editable.selected .cell-content > input {
+        color: var(--text-color);
+    }
+
+    .data-grid tr.editable .cell-content > input {
+        color: inherit;
+    }
+
+    .data-grid td.spanning {
+        color: var(--text-color-secondary);
+        background-color: unset;
+    }
+
+
+    /* ObjectTreeView.css */
+    .object-tree,
+    .object-preview {
+        color: var(--text-color);
+    }
+    .object-preview .name {
+        color: var(--syntax-highlight-boolean-color);
+    }
+    .object-preview > .size {
+        color: var(--console-secondary-text-color);
+    }
+
+
+    /* TabBar.css */
+    .tab-bar {
+        background-image: none;
+        background-color: hsl(0, 0%, 23%);
+
+        --tab-item-border-color: hsl(0, 0%, 36%);
+
+        /* FIXME: Use semantic colors */
+        --tab-item-dark-border-color: var(--tab-item-border-color);
+        --tab-item-medium-border-color: var(--tab-item-border-color);
+        --tab-item-light-border-color: var(--tab-item-border-color);
+        --tab-item-extra-light-border-color: var(--tab-item-border-color);
+    }
+
+    .tab-bar > .item {
+        background-image: none;
+        background-color: hsl(0, 0%, 17%);
+    }
+
+    .tab-bar > .item > .title {
+        color: white !important;
+    }
+
+    .tab-bar > .item:not(.disabled).selected {
+        background-image: none;
+        background-color: hsl(0, 0%, 21%);
+        border-top-color: hsl(0, 0%, 37%);
+    }
+
+    .tab-bar:not(.animating) > .item:not(.selected):hover {
+        background-color: hsl(0, 0%, 15%);
+    }
+
+    .tab-bar > .item > .close {
+        filter: var(--filter-invert);
+    }
+
+    body.window-inactive .tab-bar {
+        --tab-item-border-color: hsl(0, 0%, 34%);
+        border-bottom-color: var(--tab-item-border-color);
+
+        background-image: none !important;
+        background-color: hsl(0, 0%, 17%) !important;
+    }
+
+    body.window-inactive .tab-bar > .item {
+        background-image: none !important;
+        background-color: hsl(0, 0%, 17%) !important;
+    }
+
+    body.window-inactive .tab-bar > .item.selected {
+        background-color: var(--background-color) !important;
+    }
+
+    body.window-inactive .tab-bar > .item > .title {
+        color: hsl(0, 0%, 58%) !important;
+    }
+
+
+    /* Toolbar.css */
+    body .toolbar {
+        background-image: linear-gradient(to bottom, hsl(0, 0%, 25%), hsl(0, 0%, 22%));
+        border-top: 1px solid hsla(0, 0%, 100%, 0.3);
+        box-shadow: none;
+    }
+
+    body.window-inactive .toolbar {
+        background-color: var(--background-color);
+    }
+
+    body.latest-mac .toolbar .item.button,
+    body.latest-mac .toolbar .search-bar > input[type="search"] {
+        background-image: none;
+        background-color: var(--button-background-color);
+        border-color: var(--button-background-color);
+        border-top-color: hsla(0, 100%, 100%, 0.2);
+        box-shadow: none;
+    }
+
+    body.latest-mac .toolbar .search-bar > input[type="search"] {
+        color: var(--text-color);
+    }
+
+    body.latest-mac .toolbar .search-bar > input[type="search"]:focus {
+        color: var(--text-color-active);
+
+        /* FIXME: Use native outline for the default theme as well. */
+        box-shadow: unset;
+        transition: unset;
+        outline: -webkit-focus-ring-color auto 5px;
+        outline-offset: -3px;
+    }
+
+    body.latest-mac .toolbar .search-bar > input[type="search"]::placeholder {
+        color: var(--text-color-secondary);
+    }
+
+    body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"]::placeholder {
+        color: var(--text-color-tertiary);
+    }
+
+    body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"]::-webkit-search-results-button {
+        /* Setting `color` has no effect on the magnifying glass icon. */
+        opacity: 0.5;
+    }
+
+    body.latest-mac .toolbar .dashboard-container {
+        background-image: none;
+        background-color: var(--dashboard-background-color);
+        border-color: var(--dashboard-background-color);
+        border-top-color: hsla(0, 100%, 100%, 0.1);
+        box-shadow: none;
+    }
+
+    body.latest-mac .toolbar .item.button:active {
+        background-image: none;
+        border-top-color: hsla(0, 100%, 100%, 0.2);
+        box-shadow: none;
+    }
+
+    body.latest-mac.window-inactive .toolbar .item.button,
+    body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"],
+    body.latest-mac.window-inactive .toolbar .dashboard-container {
+        opacity: 1;
+        color: var(--glyph-color);
+        border-color: transparent;
+        border-top-color: hsla(0, 100%, 100%, 0.1);
+        background-image: none;
+        background: var(--button-background-color-inactive);
+    }
+
+
+    /* DividerNavigationItem.css */
+    .navigation-bar .item.divider {
+        --divider-background: hsl(0, 0%, 40%);
+        background-image: linear-gradient(var(--divider-background), var(--divider-background));
+    }
+
+
+    /* ButtonToolbarItem.css */
+    .toolbar .item.button {
+        color: var(--color-button);
+    }
+
+    .toolbar .item.button:not(.disabled):active {
+        color: var(--color-button-active);
+        background-image: none;
+        background: var(--button-background-color-pressed);
+    }
+
+    .toolbar .item.button:not(.disabled):matches(:focus, .activate.activated) {
+        color: var(--glyph-color-active);
+    }
+
+    .toolbar .item.button:not(.disabled):active:matches(:focus, .activate.activated) {
+        color: var(--glyph-color-active-pressed);
+    }
+
+
+    /* DefaultDashboardView.css */
+    .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);
+    }
+
+    .toolbar .dashboard.default > .item.enabled > div {
+        color: var(--glyph-color);
+    }
+
+    .toolbar .dashboard.default > .item.enabled:hover {
+        border-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
+    }
+
+    .toolbar .dashboard.default > .item.enabled:hover > div {
+        color: hsla(0, 100%, 100%, 0.85);
+    }
+
+    .toolbar .dashboard.default > .resourcesCount > img,
+    .toolbar .dashboard.default > .resourcesSize > img,
+    .toolbar .dashboard.default > .time > img,
+    .toolbar .dashboard.default > .logs > img,
+    .toolbar .dashboard.default > .errors:not(.enabled) > img,
+    .toolbar .dashboard.default > .issues:not(.enabled) > img {
+        filter: var(--filter-invert);
+    }
+
+    body.latest-mac .toolbar .dashboard .item.button {
+        background: unset;
+    }
+
+    .dashboard-container .advance-arrow {
+        filter: var(--filter-invert);
+    }
+
+
+    /* DebuggerDashboardView.css */
+    .toolbar .dashboard.debugger {
+        color: var(--text-color);
+    }
+
+    .dashboard.debugger .navigation-bar .item.button > .glyph {
+        color: var(--glyph-color-active);
+    }
+
+    .dashboard.debugger > .location .function-name {
+        color: var(--text-color-active);
+    }
+
+    .dashboard.debugger > .location .go-to-link {
+        padding-bottom: 1px;
+        -webkit-text-decoration-color: var(--text-color-secondary);
+    }
+
+    .dashboard.debugger > .divider {
+        background-image: linear-gradient(var(--text-color-tertiary), var(--text-color-tertiary));
+    }
+
+
+    /* BreakpointPopoverController.css */
+    .popover .edit-breakpoint-popover-content > label.toggle {
+        color: unset;
+    }
+
+    .popover .edit-breakpoint-popover-content > table > tr > th {
+        color: var(--text-color-secondary);
+    }
+
+
+    /* BreakpointActionView.css */
+    .breakpoint-action-block-body {
+        border-color: var(--text-color-quaternary);
+        background-color: unset;
+        box-shadow: unset;
+    }
+
+    .breakpoint-action-block-body > .description {
+        color: var(--text-color-secondary);
+    }
+
+    .breakpoint-action-append-button,
+    .breakpoint-action-remove-button {
+        filter: invert();
+    }
+
+
+    /* XHRBreakpointPopover.css */
+    .popover .xhr-breakpoint-content > .editor-wrapper > .editor {
+        -webkit-appearance: unset;
+        border-color: var(--text-color-quaternary);
+        background: var(--background-color-code);
+    }
+
+
+    /* ButtonNavigationItem.css */
+    .navigation-bar .item.button {
+        color: var(--text-color-secondary);
+    }
+
+
+    /* SpreadsheetStyle*.css */
+    .spreadsheet-style-declaration-editor .property:not(.disabled) .value {
+        color: rgb(227, 227, 227)
+    }
+
+    .spreadsheet-css-declaration {
+        color: hsl(0, 0%, 30%);
+        border-bottom-color: var(--text-color-quaternary);
+    }
+
+    .spreadsheet-css-declaration .selector:focus,
+    .spreadsheet-css-declaration .selector > .matched {
+        color: var(--text-color);
+    }
+
+    .spreadsheet-css-declaration.locked .origin::after {
+        filter: var(--filter-invert);
+    }
+
+    .spreadsheet-css-declaration .origin .go-to-link,
+    .spreadsheet-css-declaration .origin .go-to-link:hover {
+        color: var(--text-color-secondary);
+    }
+
+    .spreadsheet-style-declaration-editor :matches(.name, .value).editing {
+        outline-color: var(--background-color-secondary) !important;
+    }
+
+    .spreadsheet-style-declaration-editor .property.has-warning {
+        background-color: hsl(2, 50%, 25%);
+    }
+
+    .spreadsheet-style-declaration-editor .property.has-warning .warning {
+        filter: invert(100%) hue-rotate(150deg);
+    }
+
+    .spreadsheet-css-declaration .media-label {
+        color: var(--text-color);
+    }
+
+
+    /* QuickConsole.css */
+    .quick-console {
+        background-color: var(--background-color-code);
+        color: var(--text-color);
+        border-top: 1px solid var(--border-color);
+    }
+
+
+    .syntax-highlighted,
+    .cm-s-default,
+    .CodeMirror {
+        color: var(--text-color);
+    }
+
+    .cm-s-default,
+    .CodeMirror {
+        background-color: var(--background-color-code);
+    }
+
+    .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;
+    }
+
+
+    /* ConsolePrompt.css */
+    .console-prompt {
+        background-color: var(--background-color-code);
+    }
+
+
+    /* CompletionSuggestionsView.css */
+    .completion-suggestions {
+        background-color: var(--overlay-background);
+    }
+
+    .completion-suggestions-container > .item {
+        color: var(--text-color);
+    }
+
+
+    /* CodeMirrorOverrides.css */
+    .CodeMirror-cursor {
+        border-left-color: hsl(0, 0%, var(--foreground-lightness));
+    }
+
+    .CodeMirror .CodeMirror-gutters {
+        background-color: var(--background-color);
+        border-right-color: var(--text-color-quaternary);
+    }
+
+    .cm-s-default .cm-link {
+        color: var(--syntax-highlight-link-color);
+    }
+
+
+    /* SyntaxHighlightingDefaultTheme.css */
+    .cm-s-default .cm-m-xml.cm-attribute,
+    .syntax-highlighted .html-attribute-name {
+        color: hsl(27, 100%, 80%);
+    }
+
+    .cm-s-default .cm-meta {
+        color: hsl(0, 0%, 60%);
+    }
+
+    .cm-s-default .cm-variable-3 {
+        color: hsl(160, 69%, 64%);
+    }
+
+    .cm-s-default .cm-builtin {
+        color: hsl(218, 64%, 76%);
+    }
+
+
+    /* TreeOutline.css */
+    .tree-outline .item .subtitle {
+        color: var(--text-color-secondary);
+    }
+
+
+    /* ObjectTreePropertyTreeElement.css */
+    .object-tree-property .getter,
+    .object-tree-property .setter {
+        filter: invert();
+    }
+
+    .item.object-tree-property.prototype-property {
+        border-color: hsla(0, 0%, var(--foreground-lightness), 0.06);
+        background-color: hsla(0, 0%, var(--foreground-lightness), 0.03);
+    }
+
+    .object-tree-property.prototype-property:hover,
+    .object-tree-property.prototype-property:focus {
+        border-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
+    }
+
+    .object-tree-property .value.error {
+        color: hsl(0, 100%, 60%);
+    }
+
+
+    /* DOMTreeOutline.css */
+    .tree-outline.dom {
+        color: var(--text-color);
+    }
+
+    .tree-outline.dom li.selected + ol.children.expanded {
+        border-color: hsl(0, 0%, 27%);
+    }
+
+    .tree-outline.dom .shadow {
+        color: var(--text-color);
+    }
+
+    /* FIXME: extract this as a variable. It's slightly different from var(background-color-secondary),
+    but close enough for now. It needs to use partial translucency so that the selection area shines through. */
+    .tree-outline.dom li.parent.shadow + ol.children.expanded,
+    .tree-outline.dom li.parent.shadow::after {
+        background-color: hsla(0, 0%, 90%, 0.1);
+    }
+
+    .showing-find-banner .tree-outline.dom .search-highlight {
+        /* FIXME: This should use a variable. */
+        background-color: hsla(53, 83%, 53%, 0.8);
+    }
+
+    /* DOMNodeDetailsSidebarPanel.css */
+    .sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter:hover {
+        filter: brightness(1.25);
+    }
+
+
+    /* GeneralStyleDetailsSidebarPanel.css */
+    .sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label {
+        color: var(--text-color-secondary);
+    }
+
+
+    /* SpreadsheetCSSStyleDeclarationSection.css */
+    .spreadsheet-css-declaration {
+        background: var(--background-color-code);
+        color: var(--text-color-tertiary);
+    }
+
+    .spreadsheet-css-declaration.locked {
+        background: var(--background-color);
+    }
+
+    .spreadsheet-css-declaration .selector.style-attribute {
+        color: var(--text-color-secondary);
+    }
+
+
+    /* SpreadsheetCSSStyleDeclarationEditor.css */
+    .spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > * {
+        text-decoration: line-through;
+        -webkit-text-decoration-color: hsla(0, 0%, var(--text-color), 0.6);
+    }
+
+
+    /* InlineSwatch.css */
+    .inline-swatch {
+        background: var(--background-color);
+    }
+
+
+    /* SpreadsheetRulesStyleDetailsPanel.css */
+    .spreadsheet-style-panel .section-header {
+        color: var(--text-color-secondary);
+        border-bottom: 0.5px solid hsla(0, 0%, var(--background-color), 0.2);
+    }
+
+    .spreadsheet-style-panel .section-header .node-link:hover {
+        color: var(--text-color);
+    }
+
+
+    /* ComputedStyleDetailsPanel.css */
+    .computed-style-properties.details-section {
+        background-color: var(--background-color);
+    }
+
+    .details-section.style-box-model:not(.collapsed) > :matches(.header, .content) {
+        background-color: var(--background-color);
+    }
+
+
+    /* Table.css */
+    .table,
+    .table > .header {
+        background: var(--background-color);
+    }
+
+    .table > .header > .sortable:active {
+        background-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
+    }
+
+    .table > .header > :matches(.sort-ascending, .sort-descending) {
+        background: var(--background-color-selected);
+    }
+
+    .table > .header > :matches(.sort-ascending, .sort-descending)::after {
+        filter: invert();
+    }
+
+
+    /* ScopeBar.css */
+    .scope-bar > li {
+        color: var(--text-color);
+    }
+
+
+    /* TimelineOverview.css */
+    .timeline-overview > .navigation-bar.timelines {
+        background-color: var(--background-color);
+    }
+
+    .timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:nth-child(even) {
+        background: var(--background-color-alternate);
+    }
+
+    .timeline-overview.edit-instruments > .tree-outline.timelines .item:not(:first-child),
+    .timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child) {
+        border-top-color: hsla(0, 0%, var(--foreground-lightness), 0.09);
+    }
+
+
+    /* TimelineIcons.css */
+    .time-icon .icon {
+        filter: invert();
+    }
+
+
+    /* TimelineDataGrid.css */
+    .data-grid th:matches(.sort-ascending, .sort-descending) {
+        background: var(--background-color-selected);
+    }
+
+
+    /* TimelineRecordingContentView.css */
+    .content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple {
+        color: var(--text-color);
+    }
+
+    .content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows {
+        color: unset;
+    }
+
+
+    /* SettingsTabContentView.css */
+    .content-view.settings .navigation-bar {
+        background-color: var(--background-color-content);
+    }
+
+    .content-view.settings .navigation-bar .item.radio.button.text-only.selected {
+        color: var(--glyph-color-active);
+    }
+
+
+    /* NewTabContentView.css */
+    .new-tab.tab.content-view {
+        background-color: var(--background-color-content);
+    }
+
+
+    /* FilterBar.css */
+    .filter-bar > input[type="search"] {
+        border-color: var(--background-color-selected);
+        background-color: var(--background-color-alternate);
+    }
+
+    .filter-bar > input[type="search"]::placeholder {
+        color: var(--text-color-secondary);
+    }
+
+    .filter-bar > input[type="search"]:focus {
+        background-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
+        color: var(--text-color-active);
+    }
+
+
+    /* ImageResourceContentView.css */
+    .content-view.resource.image {
+        background: var(--background-color-content);
+    }
+
+
+    /* LogContentView.css */
+    .console-messages {
+        background-color: var(--background-color-code);
+    }
+
+    .console-item {
+        border-top-color: var(--console-message-separator);
+    }
+
+    .console-messages {
+        --background-color-selected: hsl(233, 30%, 30%);
+        --border-color-selected: hsl(224, 30%, 35%);
+        --border-color-error: hsla(20, 100%, 50%, 0.12);
+        --border-color-warning: hsla(40, 100%, 50%, 0.12);
+    }
+
+    .console-messages:focus .console-item.selected {
+        background-color: var(--background-color-selected);
+        border-color: var(--border-color-selected);
+    }
+
+    .console-messages:focus .console-item.selected + .console-item {
+        border-color: var(--border-color-selected);
+    }
+
+    .console-session:first-of-type .console-session-header {
+        color: var(--text-color-tertiary);
+    }
+
+    .console-session:not(:first-of-type) .console-session-header {
+        color: unset;
+        background-color: unset;
+    }
+
+    .console-messages a {
+        color: var(--selected-secondary-text-color);
+        cursor: pointer;
+    }
+
+    .console-messages a:hover {
+        color: var(--selected-secondary-text-color-active);
+    }
+
+    .console-messages:focus .console-item.selected::after {
+        background: hsl(210, 100%, 75%);
+    }
+
+    .console-error-level {
+        background-color: var(--error-background-color);
+        border-color: var(--border-color-error);
+    }
+
+    .console-error-level:not(.filtered-out, .filtered-out-by-search), .console-error-level:not(.filtered-out, .filtered-out-by-search) + .console-item {
+        border-top-color: var(--border-color-error);
+    }
+
+    .console-warning-level {
+        background-color: var(--warning-background-color);
+        border-color: var(--border-color-warning);
+    }
+
+    .console-warning-level:not(.filtered-out, .filtered-out-by-search), .console-warning-level:not(.filtered-out, .filtered-out-by-search) + .console-item {
+        border-top-color: var(--border-color-warning);
+    }
+
+    .search-in-progress .console-item:not(.filtered-out-by-search) .highlighted {
+        color: var(--search-highlight-text-color);
+        background-color: var(--search-highlight-background-color);
+        border-bottom-color: var(--search-highlight-underline-color);
+    }
+
+    .search-in-progress .console-item:not(.filtered-out-by-search) .highlighted.selected {
+        color: var(--search-highlight-text-color-active);
+        background-color: var(--search-highlight-background-color-active);
+    }
+
+
+    /* SourceCodeTextEditor.css */
+    .source-code.text-editor > .CodeMirror .error {
+        background-color: var(--error-background-color);
+    }
+
+    .source-code.text-editor > .CodeMirror .warning {
+        background-color: var(--warning-background-color);
+    }
+
+    .source-code.text-editor > .CodeMirror .issue-widget {
+        color: hsl(0, 0%, var(--foreground-lightness));
+        --warning-background-color: hsl(43, 100%, 23%);
+        --error-background-color: hsl(11, 70%, 32%);
+    }
+
+    .source-code.text-editor > .CodeMirror .issue-widget.inline.warning {
+        background-color: var(--warning-background-color);
+    }
+
+    .source-code.text-editor > .CodeMirror .issue-widget.inline.warning > .arrow {
+        border-right-color: var(--warning-background-color);
+    }
+
+    .source-code.text-editor > .CodeMirror .issue-widget.inline.error {
+        background-color: var(--error-background-color);
+    }
+
+    .source-code.text-editor > .CodeMirror .issue-widget.inline.error > .arrow {
+        border-right-color: var(--error-background-color);
+    }
+
+
+    /* ConsoleMessageView.css */
+    .console-message .syntax-highlighted {
+        background-color: unset;
+    }
+
+    .console-warning-level .console-message-text {
+        color: hsl(53, 80%, 55%);
+    }
+
+    .console-error-level .console-message-text {
+        color: hsl(10, 100%, 70%);
+    }
+
+    .console-user-command > .console-message-text {
+        color: hsl(209, 100%, 70%);
+    }
+
+    .console-message .repeat-count {
+        background-color: hsl(218, 70%, 48%);
+    }
+
+
+    /* CallFrameView.css */
+    .call-frame .subtitle,
+    .call-frame .subtitle .source-link {
+        color: hsla(0, 0%, var(--foreground-lightness), 0.6);
+    }
+
+    .call-frame:hover .subtitle .source-link,
+    .call-frame:focus .subtitle .source-link {
+        color: hsl(0, 0%, var(--foreground-lightness));
+    }
+
+    .call-frame .separator {
+        color: hsla(0, 0%, var(--foreground-lightness), 0.2);
+    }
+
+
+    /* QuickConsole.css */
+    .quick-console.showing-log {
+        border-top-color: var(--console-message-separator) !important;
+    }
+
+
+    /* FindBanner.css */
+    .find-banner.console-find-banner > input[type=search]:not(:placeholder-shown) {
+        color: unset;
+        background-color: unset;
+    }
+
+
+    /* NetworkResourceDetailView.css */
+    .network-resource-detail {
+        background-color: var(--background-color);
+    }
+
+    .network-resource-detail .item.close > .glyph {
+        background-color: hsla(0, 0%, 100%, 0.2);
+    }
+
+    .network .network-resource-detail .navigation-bar .item.radio.button.text-only.selected {
+        background-color: unset;
+        color: var(--glyph-color-active);
+    }
+
+    .resource-headers .value {
+        color: var(--text-color);
+    }
+
+
+    /* NetworkTableContentView.css */
+    .network-table .cell.domain > .lock {
+        filter: var(--filter-invert);
+    }
+
+
+    /* ResourceSizesContentView.css */
+    .resource-sizes > .content .label {
+        color: var(--text-color-secondary);
+    }
+
+
+    /* ResourceTimingBreakdownView.css */
+    .popover.waterfall-popover {
+        --popover-background-color: var(--panel-background-color);
+    }
+
+    .resource-timing-breakdown > table > tr.header:not(.total-row) > td {
+        color: var(--text-color);
+    }
+
+    .resource-timing-breakdown > table > tr > td.label,
+    .resource-timing-breakdown > table > tr > td.time {
+        color: var(--text-color-secondary);
+    }
+
+    .resource-timing-breakdown > table hr {
+        border-color: var(--text-color-quaternary);
+    }
+
+
+    /* GeneralStyleDetailsSidebarPanel.css */
+    .sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
+        filter: var(--filter-invert);
+    }
+
+
+    /* CanvasTabContentView.css */
+    .content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon {
+        filter: invert(88%);
+    }
+
+
+    /* WebSocketContentView.css */
+    .web-socket.content-view .data-grid table.data tr.revealed {
+        border-bottom-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
+    }
+
+    .web-socket.content-view .data-grid.variable-height-rows table.data tr.outgoing {
+        background-color: var(--green-highlight-background-color);
+        color: var(--green-highlight-text-color);
+    }
+
+    .web-socket.content-view .data-grid.variable-height-rows table.data tr.non-text-frame {
+        background-color: var(--yellow-highlight-background-color);
+        color: var(--yellow-highlight-text-color);
+    }
+
+
+    /* RecordingActionTreeElement.css */
+    .item.action:not(.initial-state)::before {
+        color: unset;
+        opacity: 0.4;
+    }
+
+    .tree-outline .item.action.visual:not(.selected, .invalid) {
+        color: var(--green-highlight-text-color);
+    }
+
+    .item.action:not(.initial-state) > .icon {
+        filter: invert();
+    }
+
+    .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon {
+        filter: invert();
+        opacity: 0.8;
+    }
+
+
+    /* CanvasTabContentView.css */
+    .content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon,
+    .content-view.tab.canvas .navigation-bar > .item .canvas.canvas-2d .icon,
+    .content-view.tab.canvas .navigation-bar > .item .canvas.webgl .icon,
+    .content-view.tab.canvas .navigation-bar > .item .recording > .icon {
+        filter: invert();
+    }
+
+    .content-view.canvas > .preview > img,
+    .content-view.canvas .preview-container > canvas {
+        background-color: white;
+    }
+
+
+    /* CanvasOverviewContentView.css */
+    .content-view.canvas-overview {
+        background-color: unset;
+    }
+
+    .content-view.canvas-overview .content-view.canvas {
+        background-color: var(--background-color-secondary);
+    }
+
+    .content-view.canvas-overview .content-view.canvas.is-recording {
+        --recording-color: hsl(0, 100%, 39%);
+        border-color: var(--recording-color);
+    }
+
+    .content-view.canvas-overview .content-view.canvas.is-recording > header {
+        background-color: var(--recording-color);
+    }
+
+    .content-view.canvas-overview .content-view.canvas > header > .titles > .title {
+        color: var(--text-color);
+    }
+
+    .content-view.canvas-overview .content-view.canvas > header > .titles > .subtitle,
+    .content-view.canvas-overview .content-view.canvas > footer .memory-cost {
+        color: var(--text-color-secondary);
+    }
+
+    .content-view.canvas-overview .content-view.canvas > footer > .recordings::before {
+        filter: invert();
+    }
+
+    .content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .subtitle {
+        color: unset;
+        opacity: 0.5
+    }
+
+
+    /* CanvasContentView.css */
+    .content-view.canvas:not(.tab) {
+        background-color: unset;
+    }
+
+
+    /* RecordingContentView.css */
+    .content-view:not(.tab).recording {
+        background-color: unset;
+    }
+
+    .content-view:not(.tab).recording > header > .slider-container {
+        background-color: unset;
+        border-color: var(--border-color-secondary);
+    }
+
+    .content-view:not(.tab).recording > header > .slider-container > input[type=range] {
+        background: none;
+    }
+
+
+    /* RecordingStateDetailsSidebarPanel.css */
+    .sidebar > .panel.details.recording-state > .content > .data-grid tr.modified {
+        color: var(--green-highlight-text-color);
+    }
+
+
+    /* ProgressView.css */
+    .progress-view > .titles > .title {
+        color: var(--text-color-secondary);
+    }
+
+    .progress-view > .titles > .subtitle {
+        color: var(--text-color-tertiary);
+    }
+
+    .indeterminate-progress-spinner {
+        filter: invert();
+    }
+
+
+    /* ShaderProgramContentView.css */
+    .content-view.shader-program > .text-editor.shader {
+        --border-start-style: 1px solid var(--text-color-quaternary);
+    }
+
+    .content-view.shader-program > .text-editor.shader > .type-title {
+        background-color: var(--background-color);
+        border-bottom-color: var(--text-color-quaternary);
+    }
+
+
+    /* ShaderProgramTreeElement.css */
+    .item.shader-program .status > img {
+        filter: invert();
+    }
+
+
+    /* OpenResourceDialog.css */
+    .open-resource-dialog {
+        background-color: var(--overlay-background);
+        border-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
+    }
+
+    .open-resource-dialog > .field > input {
+        color: var(--text-color-active);
+    }
+
+    .open-resource-dialog > .field > input::placeholder {
+        color: var(--text-color-secondary);
+    }
+
+    .open-resource-dialog > .tree-outline .item.selected {
+        background-color: var(--selected-background-color);
+        color: white;
+    }
+
+    .open-resource-dialog > .field::before {
+        filter: invert();
+    }
+
+}

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

Reply via email to