Attachment 348466 Details for Bug 189139 – Proposed patch @ lines 1163-1165

Proposed patch @ lines 1163-1165

DarkMode.css (text/plain), 40.11 KB, created by Jamal Nasser on 2018-08-29 19:17:02 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Jamal Nasser

Created: 2018-08-29 19:17:02 PDT

Size: 40.11 KB

patch

obsolete

>/*
> * 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(219, 80%, 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(13, 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.45);
>
>        --warning-background-color: hsla(21, 100%, 51%, 0.12);
>        --error-background-color: hsla(0, 100%, 50%, 0.15);
>
>        --network-header-color: hsl(204, 52%, 55%);
>        --network-system-color: hsl(79, 95%, 50%);
>        --network-pseudo-header-color: hsl(312, 55%, 61%);
>        --network-error-color: hsl(0, 54%, 55%);
>
>        --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(89, 100%, 51%, 0.25) !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, 85%, 30%);
>    }
>
>
>    /* 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%));
>        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);
>    }
>
>    .edit-breakpoint-popover-condition {
>        background: var(--background-color-code);
>    }
>
>
>    /* 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();
>    }
>
>    .breakpoint-action-eval-editor {
>        background: var(--background-color-code);
>    }
>
>
>    /* 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);
>    }
>
>    .CodeMirror .CodeMirror-lines .CodeMirror-matchingbracket {
>        background-color: hsla(232, 100%, 72%, 0.4);
>        border-bottom-color: hsl(206, 100%, 65%);
>    }
>
>
>    /* SyntaxHighlightingDefaultTheme.css */
>    .cm-s-default .cm-attribute {
>        color: hsl(222, 100%, 72%);
>    }
>
>    .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.elements-drag-over .selection-area {
>        border-top-color: var(--selected-background-color);
>    }
>
>    .tree-outline.dom:focus li.selected .selection-area {
>        background-color: var(--selected-background-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);
>    }
>
>
>    /* FontResourceContentView.css */
>    .content-view.resource.font .preview > .line {
>        border-left-color: var(--text-color-quaternary);
>        border-right-color: var(--text-color-quaternary);
>    }
>
>    .content-view.resource.font .metric.top {
>        background-color: var(--text-color-quaternary);
>    }
>
>    .content-view.resource.font .metric.baseline {
>        background-color: hsl(195, 100%, 37%);
>    }
>
>    .content-view.resource.font .metric.middle {
>        background-color: hsl(120, 100%, 35%);
>    }
>
>    .content-view.resource.font .metric.xheight {
>        background-color: hsl(350, 100%, 40%);
>    }
>
>    .content-view.resource.font .metric.bottom {
>        background-color: var(--text-color-quaternary);
>    }
>
>
>    /* FilterBar.css, SearchBar.css */
>    :matches(.search-bar, .filter-bar) > input[type="search"],
>    .search-bar > input[type="search"]:not(:placeholder-shown) {
>        border-color: var(--background-color-selected);
>        background-color: var(--background-color-alternate);
>    }
>
>    :matches(.search-bar, .filter-bar) > input[type="search"]::placeholder {
>        color: var(--text-color-secondary);
>    }
>
>    :matches(.search-bar, .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.warning,
>    .source-code.text-editor > .CodeMirror .issue-widget.inline.warning {
>        background-color: var(--warning-background-color);
>    }
>
>    .source-code.text-editor > .CodeMirror .issue-widget.error,
>    .source-code.text-editor > .CodeMirror .issue-widget.inline.error {
>        background-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 > input[type="search"] {
>        background-color: var(--background-color-alternate);
>        border-color: var(--background-color-selected);
>    }
>
>    .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);
>    }
>    .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle{
>        color: var(--text-color);
>    }
>
>
>    /* 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();
>    }
>
>
>    /* HoverMenu.css */
>    .hover-menu > svg > :matches(path, rect) {
>        stroke: hsla(0, 0%, 100%, 0.3);
>    }
>
>}

Actions: View

Attachments on bug 189139: 348465 | 348466 | 348468 | 348639 | 348678