Changeset 265120 in webkit


Ignore:
Timestamp:
Jul 30, 2020 5:12:06 PM (4 years ago)
Author:
Nikita Vasilyev
Message:

Web Inspector: on Big Sur, match OS background, text, and border colors
​https://bugs.webkit.org/show_bug.cgi?id=214366
<rdar://problem/65617290>

Reviewed by Devin Rousso.

Refactoring:

  • Remove --background-color-code because it was always the same value as --background-color-content.
  • Replace commonly hardcoded hsl(0, 0%, 97%) background with --background-color-intermediate.
  • UserInterface/Views/AnimationDetailsSidebarPanel.css:

(.sidebar > .panel.details.animation > .content > .details-section.animation-keyframes .details-section):
(.sidebar > .panel.details.animation > .content > .details-section.animation-keyframes .details-section .row.styles .CodeMirror):

  • UserInterface/Views/BoxShadowEditor.css:

(.box-shadow-editor > table > tr > td > input[type="text"]):

  • UserInterface/Views/BreakpointActionView.css:

(@media (prefers-color-scheme: dark) .breakpoint-action-eval-editor):

  • UserInterface/Views/BreakpointPopoverController.css:

(.edit-breakpoint-popover-condition):

  • UserInterface/Views/ChangesDetailsSidebarPanel.css:

(.sidebar > .panel.changes-panel .css-rule):

  • UserInterface/Views/ComputedStyleSection.css:

(.computed-style-section .computed-property-item.expanded):
(.computed-style-properties.details-section > .content,):

  • UserInterface/Views/ConsolePrompt.css:

(.console-prompt):
(.console-prompt > .CodeMirror-scroll):

  • UserInterface/Views/CookiePopover.css:

(.popover .cookie-popover-content > table > tr > td > input:matches([type="text"], [type="datetime-local"])):

  • UserInterface/Views/DetailsSection.css:

(.details-section .details-section):
(.details-section .details-section > .header):
Refactor. --background-color-content is the same color value.

(.details-section .details-section:not(.collapsed) > .header):
Refactor. --border-color-secondary is the same color value.

(.details-section > .content > .group:nth-child(even)):
(.details-section > .content > .group > .row:matches(.empty, .text)):
(@media (prefers-color-scheme: dark) .details-section > .header > label,):

  • UserInterface/Views/DividerNavigationItem.css:

(.navigation-bar .item.divider):
Don't use hairline dividers. MacOS Catalina and Big Sur don't use hairline borders.

  • UserInterface/Views/GraphicsOverviewContentView.css:

(.content-view.graphics-overview > section > .header):
(@media (prefers-color-scheme: dark) .content-view.graphics-overview):

  • UserInterface/Views/LocalResourceOverridePopover.css:

(.popover .local-resource-override-popover-content .editor):

  • UserInterface/Views/LogContentView.css:

(@media (prefers-color-scheme: dark) .console-messages):

  • UserInterface/Views/QuickConsole.css:

(.quick-console):

  • UserInterface/Views/ScopeChainDetailsSidebarPanel.css:

(@media (prefers-color-scheme: dark) .watch-expression-editor):

  • UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:

(.spreadsheet-css-declaration):
(.spreadsheet-css-declaration.locked):

  • UserInterface/Views/SyntaxHighlightingDefaultTheme.css:

(@media (prefers-color-scheme: dark) .cm-s-default,):

  • UserInterface/Views/TabBar.css:

(body.big-sur.docked .tab-bar > .border.bottom):

  • UserInterface/Views/URLBreakpointPopover.css:

(.popover .url-breakpoint-content > .editor-wrapper > .editor):

  • UserInterface/Views/Variables.css:

(:root):
Add --separator-color, which has the same semantics as separator color from Apple HIG
(​https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/#dynamic-system-colors).
--border-color-secondary was only defined in the dark mode. Define it in the light mode, too.

(body.window-inactive):
Remove unused variable.

(body.big-sur):
(@media (prefers-color-scheme: dark) :root):
(@media (prefers-color-scheme: dark) body.big-sur):
(@media (prefers-color-scheme: dark) body.window-inactive):
(body.window-inactive *): Remove unnecessarily greedy selector.

Location:
trunk/Source/WebInspectorUI
Files:
21 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r265118 r265120  
     12020-07-30  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: on Big Sur, match OS background, text, and border colors
     4        https://bugs.webkit.org/show_bug.cgi?id=214366
     5        <rdar://problem/65617290>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Refactoring:
     10        - Remove --background-color-code because it was always the same value as --background-color-content.
     11        - Replace commonly hardcoded `hsl(0, 0%, 97%)` background with --background-color-intermediate.
     12
     13        * UserInterface/Views/AnimationDetailsSidebarPanel.css:
     14        (.sidebar > .panel.details.animation > .content > .details-section.animation-keyframes .details-section):
     15        (.sidebar > .panel.details.animation > .content > .details-section.animation-keyframes .details-section .row.styles .CodeMirror):
     16        * UserInterface/Views/BoxShadowEditor.css:
     17        (.box-shadow-editor > table > tr > td > input[type="text"]):
     18        * UserInterface/Views/BreakpointActionView.css:
     19        (@media (prefers-color-scheme: dark) .breakpoint-action-eval-editor):
     20        * UserInterface/Views/BreakpointPopoverController.css:
     21        (.edit-breakpoint-popover-condition):
     22        * UserInterface/Views/ChangesDetailsSidebarPanel.css:
     23        (.sidebar > .panel.changes-panel .css-rule):
     24        * UserInterface/Views/ComputedStyleSection.css:
     25        (.computed-style-section .computed-property-item.expanded):
     26        (.computed-style-properties.details-section > .content,):
     27        * UserInterface/Views/ConsolePrompt.css:
     28        (.console-prompt):
     29        (.console-prompt > .CodeMirror-scroll):
     30        * UserInterface/Views/CookiePopover.css:
     31        (.popover .cookie-popover-content > table > tr > td > input:matches([type="text"], [type="datetime-local"])):
     32
     33        * UserInterface/Views/DetailsSection.css:
     34        (.details-section .details-section):
     35        (.details-section .details-section > .header):
     36        Refactor. --background-color-content is the same color value.
     37
     38        (.details-section .details-section:not(.collapsed) > .header):
     39        Refactor. --border-color-secondary is the same color value.
     40
     41        (.details-section > .content > .group:nth-child(even)):
     42        (.details-section > .content > .group > .row:matches(.empty, .text)):
     43        (@media (prefers-color-scheme: dark) .details-section > .header > label,):
     44
     45        * UserInterface/Views/DividerNavigationItem.css:
     46        (.navigation-bar .item.divider):
     47        Don't use hairline dividers. MacOS Catalina and Big Sur don't use hairline borders.
     48
     49        * UserInterface/Views/GraphicsOverviewContentView.css:
     50        (.content-view.graphics-overview > section > .header):
     51        (@media (prefers-color-scheme: dark) .content-view.graphics-overview):
     52        * UserInterface/Views/LocalResourceOverridePopover.css:
     53        (.popover .local-resource-override-popover-content .editor):
     54        * UserInterface/Views/LogContentView.css:
     55        (@media (prefers-color-scheme: dark) .console-messages):
     56        * UserInterface/Views/QuickConsole.css:
     57        (.quick-console):
     58        * UserInterface/Views/ScopeChainDetailsSidebarPanel.css:
     59        (@media (prefers-color-scheme: dark) .watch-expression-editor):
     60        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
     61        (.spreadsheet-css-declaration):
     62        (.spreadsheet-css-declaration.locked):
     63        * UserInterface/Views/SyntaxHighlightingDefaultTheme.css:
     64        (@media (prefers-color-scheme: dark) .cm-s-default,):
     65        * UserInterface/Views/TabBar.css:
     66        (body.big-sur.docked .tab-bar > .border.bottom):
     67        * UserInterface/Views/URLBreakpointPopover.css:
     68        (.popover .url-breakpoint-content > .editor-wrapper > .editor):
     69
     70        * UserInterface/Views/Variables.css:
     71        (:root):
     72        Add --separator-color, which has the same semantics as `separator` color from Apple HIG
     73        (https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/#dynamic-system-colors).
     74        --border-color-secondary was only defined in the dark mode. Define it in the light mode, too.
     75
     76        (body.window-inactive):
     77        Remove unused variable.
     78
     79        (body.big-sur):
     80        (@media (prefers-color-scheme: dark) :root):
     81        (@media (prefers-color-scheme: dark) body.big-sur):
     82        (@media (prefers-color-scheme: dark) body.window-inactive):
     83        (body.window-inactive *): Remove unnecessarily greedy selector.
     84
    1852020-07-30  Devin Rousso  <drousso@apple.com>
    286

  • trunk/Source/WebInspectorUI/UserInterface/Views/AnimationDetailsSidebarPanel.css

    r255396 r265120  
    2929
    3030.sidebar > .panel.details.animation > .content > .details-section.animation-keyframes .details-section {
    31     background-color: hsl(0, 0%, 97%);
     31    background-color: var(--background-color-intermediate);
    3232}
    3333
    … …  
    4141    background-color: transparent;
    4242}
    43 
    44 @media (prefers-color-scheme: dark) {
    45     .sidebar > .panel.details.animation > .content > .details-section.animation-keyframes .details-section {
    46         background-color: hsl(0, 0%, 18%);
    47     }
    48 }

  • trunk/Source/WebInspectorUI/UserInterface/Views/BoxShadowEditor.css

    r259170 r265120  
    5252    font-family: Menlo, monospace;
    5353    text-align: end;
    54     background-color: var(--background-color-code);
     54    background-color: var(--background-color-content);
    5555    border: 1px solid var(--text-color-quaternary);
    5656    -webkit-appearance: none;

  • trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css

    r242768 r265120  
    112112
    113113    .breakpoint-action-eval-editor {
    114         background: var(--background-color-code);
     114        background: var(--background-color-content);
    115115    }
    116116}

  • trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css

    r254730 r265120  
    8585    -webkit-appearance: textfield;
    8686    border: 1px solid hsl(0, 0%, 78%);
    87     background: var(--background-color-code);
     87    background: var(--background-color-content);
    8888}
    8989

  • trunk/Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css

    r244951 r265120  
    3333    font: 11px Menlo, monospace;
    3434    color: var(--text-color-secondary);
    35     background-color: var(--background-color-code);
     35    background-color: var(--background-color-content);
    3636    -webkit-user-select: text;
    3737}

  • trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css

    r260978 r265120  
    4242.computed-style-section .computed-property-item.expanded {
    4343    padding-bottom: 2px;
    44     background-color: hsl(0, 0%, 97%);
     44    background-color: var(--background-color-intermediate);
    4545    border-top: 0.5px solid var(--text-color-quaternary);
    4646    border-bottom: 0.5px solid var(--text-color-quaternary);
    … …  
    159159    display: block;
    160160}
    161 
    162 @media (prefers-color-scheme: dark) {
    163     .computed-style-section .computed-property-item.expanded {
    164         background-color: var(--background-color-code);
    165     }
    166 }

  • trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css

    r239760 r265120  
    2525
    2626.console-prompt {
    27     background-color: white;
     27    background-color: var(--background-color-content);
    2828}
    2929
    … …  
    3636    overflow: hidden;
    3737}
    38 
    39 @media (prefers-color-scheme: dark) {
    40     .console-prompt {
    41         background-color: var(--background-color-code);
    42     }
    43 }

  • trunk/Source/WebInspectorUI/UserInterface/Views/CookiePopover.css

    r259842 r265120  
    5252    padding: 3px 4px 2px;
    5353    font-family: Menlo, monospace;
    54     background-color: var(--background-color-code);
     54    background-color: var(--background-color-content);
    5555    border: 1px solid var(--text-color-quaternary);
    5656    -webkit-appearance: none;

  • trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css

    r258058 r265120  
    3434
    3535.details-section .details-section {
    36     background-color: hsl(0, 0%, 100%);
     36    background-color: var(--background-color-content);
    3737    border-color: var(--text-color-quaternary);
    3838}
    … …  
    9090.details-section .details-section > .header {
    9191    top: 21px;
    92     background-color: hsl(0, 0%, 100%);
     92    background-color: var(--background-color-content);
    9393    font-weight: 500;
    9494
    … …  
    9898
    9999.details-section .details-section:not(.collapsed) > .header {
    100     border-bottom: 1px solid hsl(0, 0%, 87%);
     100    border-bottom: 1px solid var(--border-color-secondary);
    101101}
    102102
    … …  
    183183
    184184.details-section > .content > .group:nth-child(even) {
    185     background-color: hsl(0, 0%, 97%);
     185    background-color: var(--background-color-intermediate);
    186186}
    187187
    … …  
    257257    padding: 0 6px 7px 6px;
    258258    text-align: center;
    259     color: gray;
     259    color: var(--text-color-secondary);
    260260}
    261261
    … …  
    304304    }
    305305
    306     .details-section > .header > label {
    307         color: var(--text-color-secondary);
    308     }
    309 
    310     .details-section .details-section,
    311     .details-section .details-section > .header {
    312         background-color: var(--background-color-content);
    313     }
    314 
    315     .details-section .details-section:not(.collapsed) > .header {
    316         border-bottom-color: var(--border-color-secondary);
    317     }
    318 
     306    .details-section > .header > label,
    319307    .details-section > .content > .group > .row.simple > .label {
    320308        color: var(--text-color-secondary);
    321309    }
    322 
    323     .details-section > .content > .group:nth-child(even) {
    324         background-color: unset;
    325     }
    326 
    327     .details-section > .content > .group > .row:matches(.empty, .text) {
    328         color: var(--text-color-secondary);
    329     }
    330 }
     310}

  • trunk/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css

    r257759 r265120  
    2727    width: 1px;
    2828    height: 16px;
    29     background-color: hsl(0, 0%, 74%);
     29    background-color: var(--separator-color);
    3030}
    31 
    32 @media (-webkit-min-device-pixel-ratio: 2) {
    33     .navigation-bar .item.divider {
    34         width: 0.5px;
    35     }
    36 }
    37 
    38 @media (prefers-color-scheme: dark) {
    39     .navigation-bar .item.divider {
    40         background-color: hsl(0, 0%, 40%);
    41     }
    42 }

  • trunk/Source/WebInspectorUI/UserInterface/Views/GraphicsOverviewContentView.css

    r265118 r265120  
    4949    margin-top: -1px;
    5050    -webkit-padding-start: 8px;
    51     background-color: hsl(0, 0%, 97%);
     51    background-color: var(--background-color-intermediate);
    5252    border-top: 1px solid var(--border-color);
    5353    border-bottom: 1px solid var(--border-color);
    … …  
    7676        background-color: hsl(0, 0%, 14%);
    7777    }
    78 
    79     .content-view.graphics-overview > section > .header {
    80         background-color: hsl(0, 0%, 21%);
    81     }
    8278}
    8379

  • trunk/Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.css

    r254730 r265120  
    5858    -webkit-appearance: unset;
    5959    border: 1px solid hsl(0, 0%, 78%);
    60     background: var(--background-color-code);
     60    background: var(--background-color-content);
    6161    border-color: var(--text-color-quaternary);
    6262}

  • trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css

    r253404 r265120  
    243243@media (prefers-color-scheme: dark) {
    244244    .console-messages {
    245         background-color: var(--background-color-code);
     245        background-color: var(--background-color-content);
    246246    }
    247247

  • trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css

    r255191 r265120  
    3232
    3333    color: var(--text-color);
    34     background-color: var(--background-color-code);
     34    background-color: var(--background-color-content);
    3535    border-top: 1px solid var(--border-color);
    3636    padding: 3px 0 4px;

  • trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css

    r249504 r265120  
    6767@media (prefers-color-scheme: dark) {
    6868    .watch-expression-editor {
    69         background-color: var(--background-color-code);
     69        background-color: var(--background-color-content);
    7070    }
    7171}

  • trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css

    r248602 r265120  
    3030    font-size: 11px;
    3131    color: var(--text-color-tertiary);
    32     background: var(--background-color-code);
     32    background: var(--background-color-content);
    3333    border-bottom: 0.5px solid var(--text-color-quaternary);
    3434    -webkit-user-select: text;
    … …  
    133133
    134134.spreadsheet-css-declaration.locked {
    135     background-color: hsl(0, 0%, 97%)
     135    background-color: var(--background-color-intermediate);
    136136}
    137137
    … …  
    158158
    159159@media (prefers-color-scheme: dark) {
    160     .spreadsheet-css-declaration.locked {
    161         background: var(--background-color);
    162     }
    163 
    164160    .spreadsheet-css-declaration .selector.style-attribute {
    165161        color: var(--text-color-secondary);

  • trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css

    r248898 r265120  
    140140    .cm-s-default,
    141141    .CodeMirror {
    142         background-color: var(--background-color-code);
     142        background-color: var(--background-color-content);
    143143    }
    144144

  • trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css

    r264410 r265120  
    9292}
    9393
     94body.big-sur.docked .tab-bar > .border.bottom {
     95    background-color: var(--border-color);
     96}
     97
    9498body.window-inactive .tab-bar > .border {
    9599    background-color: var(--tab-item-light-border-color);

  • trunk/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css

    r254730 r265120  
    4141    -webkit-appearance: textfield;
    4242    border: 1px solid hsl(0, 0%, 78%);
    43     background: var(--background-color-code);
     43    background: var(--background-color-content);
    4444}
    4545

  • trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css

    r263402 r265120  
    4646    --text-color-quaternary: hsl(0, 0%, 85%);
    4747
     48    --separator-color: hsla(0, 0%, var(--foreground-lightness), 0.15);
     49
    4850    --background-color: white;
    4951
    5052    --background-color-content: white;
    51     --background-color-code: white;
     53    --background-color-intermediate: hsl(0, 0%, 97%);
    5254
    5355    --background-color-unfocused: hsla(0, 0%, calc(100% - var(--foreground-lightness)), 0.8);
    … …  
    8183
    8284    --border-color: hsl(0, 0%, 70%);
    83     --border-color-dark: hsl(0, 0%, 57%);
     85    --border-color-secondary: hsl(0, 0%, 87%);
    8486
    8587    --button-background-color: white;
    … …  
    202204
    203205    --color-picker-width: 256px;
     206
     207    --sorted-header-font-weight: 500;
    204208}
    205209
    … …  
    211215    --glyph-color-disabled: hsla(0, 0%, 30%, 0.35);
    212216    --glyph-opacity: 0.6;
    213 }
    214 
    215 body.window-inactive * {
     217
    216218    --border-color: hsl(0, 0%, 85%);
    217     --border-color-dark: hsl(0, 0%, 72%);
     219}
     220
     221body.big-sur {
     222    --text-color: hsl(0, 0%, 15%);
     223
     224    --background-color-intermediate: hsl(0, 0%, 98.5%);
     225
     226    --panel-background-color: hsl(0, 0%, 96%);
     227    --panel-background-color-light: hsl(0, 0%, 98%);
     228
     229    --separator-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
     230
     231    --border-color: hsl(0, 0%, 87%);
     232    --border-color-secondary: hsl(0, 0%, 91%);
     233
     234    --sorted-header-font-weight: 700;
    218235}
    219236
    … …  
    251268
    252269        --background-color-content: hsl(0, 0%, 21%);
    253         --background-color-code: hsl(0, 0%, 21%);
     270        --background-color-intermediate: hsl(0, 0%, 23%);
    254271
    255272        --gray-background-color: hsl(0, 0%, 50%);
    … …  
    359376    }
    360377
     378    body.big-sur {
     379        --glyph-color: hsl(0, 0%, 69%);
     380        --glyph-color-pressed: hsl(0, 0%, 100%);
     381    }
     382
    361383    body.window-inactive {
     384        --border-color: hsl(0, 0%, 33%);
     385
    362386        --selected-background-color: hsla(212, 92%, 64%, 0.5);
    363387
    … …  
    366390    }
    367391
    368     body.window-inactive * {
    369         /* These properties are duplicated so that they have higher specificity than WebKit's stylesheet.
    370         Otherwise, the variable definition inside 'body.window-inactive *' in OpenSource overrides with a lighter color.
    371         When merging to open source, we should guard the existing .window-inactive style with
    372         '@media not all' to avoid applying the definition too broadly. */
    373         --border-color: hsl(0, 0%, 33%);
    374         --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
     392    body.big-sur {
     393        --text-color: hsl(0, 0%, 85%);
     394
     395        --background-color: hsl(0, 0%, 20%);
     396        --background-color-secondary: hsl(0, 0%, 23%);
     397        --background-color-tertiary: hsl(0, 0%, 27%);
     398
     399        --background-color-content: hsl(0, 0%, 17%);
     400        --background-color-intermediate: hsl(0, 0%, 19%);
     401
     402        --panel-background-color: hsl(0, 0%, 20%);
     403        --panel-background-color-light: hsl(0, 0%, 25%);
     404
     405        --border-color: hsl(0, 0%, 30%);
     406        --border-color-secondary: hsl(0, 0%, 24%);
    375407    }
    376408}
Note: See TracChangeset for help on using the changeset viewer.