Attachment 342690 Details for Bug 186606 – Patch

[patch] Patch

patch.txt (text/plain), 53.62 KB, created by Nikita Vasilyev on 2018-06-13 13:47:38 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Nikita Vasilyev

Created: 2018-06-13 13:47:38 PDT

Size: 53.62 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 97bb0f13837..5959f81a805 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,232 @@
>+2018-06-13  Nikita Vasilyev  <nvasilyev@apple.com>
>+
>+        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  <mitz@apple.com>
> 
>         [Xcode] Clean up and modernize some build setting definitions
>diff --git a/Source/WebInspectorUI/UserInterface/Main.html b/Source/WebInspectorUI/UserInterface/Main.html
>index ad0e4af33df..d6ae8ed3d47 100644
>--- a/Source/WebInspectorUI/UserInterface/Main.html
>+++ b/Source/WebInspectorUI/UserInterface/Main.html
>@@ -237,6 +237,8 @@
>     <link rel="stylesheet" href="Controllers/CodeMirrorDragToAdjustNumberController.css">
>     <link rel="stylesheet" href="Controllers/CodeMirrorTokenTrackingController.css">
> 
>+    <link rel="stylesheet" href="Views/DarkMode.css">
>+
>     <link rel="stylesheet" href="Debug/UncaughtExceptionReporter.css">
>     <link rel="stylesheet" href="Debug/DebugContentView.css">
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DarkMode.css b/Source/WebInspectorUI/UserInterface/Views/DarkMode.css
>new file mode 100644
>index 00000000000..f38914357c0
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Views/DarkMode.css
>@@ -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();
>+    }
>+
>+}

Actions: View | Formatted Diff | Diff

Attachments on bug 186606: 342687 | 342688 | 342690