Changeset 196713 in webkit


Ignore:
Timestamp:
Feb 17, 2016 12:29:50 PM (8 years ago)
Author:
Matt Baker
Message:

Web Inspector: add CSS variables for common border/background colors
https://bugs.webkit.org/show_bug.cgi?id=154302
<rdar://problem/24680944>

Reviewed by Timothy Hatcher.

Added CSS variables for commonly used border and background colors, and removed
duplicate CSS variables with less generic names. Inactive border colors declared in
rules with a body.window-inactive selector have been removed. A new rule using this
selector in Variables.css sets "--border-color" to the inactive color.

  • UserInterface/Views/CSSStyleDetailsSidebarPanel.css:

(.sidebar > .panel.details.css-style > .content > .pseudo-classes):
(.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container)):
(.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section:not(.filter-section-has-label)):

  • UserInterface/Views/DataGrid.css:

(.data-grid.inline):
(.data-grid th):
(.data-grid :matches(th, td):not(:last-child)):
(body.window-inactive .data-grid th): Deleted.
(body.window-inactive .data-grid :matches(th, td):not(:last-child)): Deleted.

  • UserInterface/Views/DebuggerSidebarPanel.css:

(.sidebar > .panel.navigation.debugger.paused .details-section.scripts):

  • UserInterface/Views/DetailsSection.css:

(.details-section):
(.details-section .details-section:first-child):
(.details-section > .header):
(.details-section > .content > .group):
(.details-section > .content > .group:nth-child(even) > .row:matches(.simple:first-child > *, :not(.simple):first-child)):

  • UserInterface/Views/FilterBar.css:

(.filter-bar):

  • UserInterface/Views/FindBanner.css:

(.find-banner):
(body.window-inactive .find-banner): Deleted.

  • UserInterface/Views/LayerTreeDetailsSidebarPanel.css:

(.panel.details.layer-tree .bottom-bar):

  • UserInterface/Views/Main.css:

(body.docked.bottom):
(body.docked.right):
(#split-content-browser):
(#split-content-browser > .navigation-bar):
(body.window-inactive.docked.bottom): Deleted.
(body.window-inactive.docked.right): Deleted.
(body.window-inactive #split-content-browser): Deleted.

  • UserInterface/Views/MemoryCategoryView.css:

(.memory-category-view):
(.memory-category-view > .details):
(body.window-inactive .memory-category-view): Deleted.
(body.window-inactive .memory-category-view > .details): Deleted.

  • UserInterface/Views/MemoryTimelineView.css:

(.timeline-view.memory):
(.timeline-view.memory > .content > .overview):
(.timeline-view.memory > .content > .details > .subtitle):
(.timeline-view.memory > .content > .overview > .divider):
(body.window-inactive .timeline-view.memory): Deleted.
(body.window-inactive .timeline-view.memory > .content > .overview): Deleted.
(body.window-inactive .timeline-view.memory > .content > .details > .subtitle): Deleted.
(body.window-inactive .timeline-view.memory > .content > .overview > .divider): Deleted.

  • UserInterface/Views/NavigationBar.css:

(.navigation-bar):
(body.window-inactive .navigation-bar): Deleted.

  • UserInterface/Views/NavigationSidebarPanel.css:

(.sidebar > .panel.navigation > .overflow-shadow):
(body.window-inactive .sidebar > .panel.navigation > .overflow-shadow): Deleted.

  • UserInterface/Views/NetworkSidebarPanel.css:

(.sidebar > .panel.navigation.network > .title-bar):
(body.window-inactive .sidebar > .panel.navigation.network > .title-bar): Deleted.

  • UserInterface/Views/OverviewTimelineView.css:

(.timeline-view.overview > .timeline-ruler > .header):
(body.window-inactive .timeline-view.overview > .timeline-ruler > .header): Deleted.

  • UserInterface/Views/QuickConsole.css:

(.quick-console):
(body.window-inactive .quick-console): Deleted.

  • UserInterface/Views/Sidebar.css:

(.sidebar):
(.sidebar.left):
(.sidebar.right):
(body.window-inactive .sidebar.left): Deleted.
(body.window-inactive .sidebar.right): Deleted.

  • UserInterface/Views/TimelineDataGrid.css:

(.data-grid.timeline th):
(body.window-inactive .data-grid.timeline th): Deleted.

  • UserInterface/Views/TimelineRuler.css:

(.timeline-ruler > .header):
(body.window-inactive .timeline-ruler > .header): Deleted.

  • UserInterface/Views/TimelineSidebarPanel.css:

(.sidebar > .panel.navigation.timeline > .title-bar):
(.sidebar > .panel.navigation.timeline > .title-bar.timeline-events):
(body.window-inactive .sidebar > .panel.navigation.timeline > .title-bar): Deleted.
(body.window-inactive .sidebar > .panel.navigation.timeline > .title-bar.timeline-events): Deleted.

  • UserInterface/Views/Toolbar.css:

(body.latest-mac .toolbar .dashboard-container):

  • UserInterface/Views/Variables.css:

(:root):
(body.window-inactive *):

  • UserInterface/Views/VisualStyleSelectorSection.css:

(.details-section.visual-style-selector-section:not(.collapsed) > .header):
(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider):

Location:
trunk/Source/WebInspectorUI
Files:
23 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebInspectorUI/ChangeLog

    r196692 r196713  
     12016-02-17  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: add CSS variables for common border/background colors
     4        https://bugs.webkit.org/show_bug.cgi?id=154302
     5        <rdar://problem/24680944>
     6
     7        Reviewed by Timothy Hatcher.
     8
     9        Added CSS variables for commonly used border and background colors, and removed
     10        duplicate CSS variables with less generic names. Inactive border colors declared in
     11        rules with a body.window-inactive selector have been removed. A new rule using this
     12        selector in Variables.css sets "--border-color" to the inactive color.
     13
     14        * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
     15        (.sidebar > .panel.details.css-style > .content > .pseudo-classes):
     16        (.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container)):
     17        (.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section:not(.filter-section-has-label)):
     18        * UserInterface/Views/DataGrid.css:
     19        (.data-grid.inline):
     20        (.data-grid th):
     21        (.data-grid :matches(th, td):not(:last-child)):
     22        (body.window-inactive .data-grid th): Deleted.
     23        (body.window-inactive .data-grid :matches(th, td):not(:last-child)): Deleted.
     24        * UserInterface/Views/DebuggerSidebarPanel.css:
     25        (.sidebar > .panel.navigation.debugger.paused .details-section.scripts):
     26        * UserInterface/Views/DetailsSection.css:
     27        (.details-section):
     28        (.details-section .details-section:first-child):
     29        (.details-section > .header):
     30        (.details-section > .content > .group):
     31        (.details-section > .content > .group:nth-child(even) > .row:matches(.simple:first-child > *, :not(.simple):first-child)):
     32        * UserInterface/Views/FilterBar.css:
     33        (.filter-bar):
     34        * UserInterface/Views/FindBanner.css:
     35        (.find-banner):
     36        (body.window-inactive .find-banner): Deleted.
     37        * UserInterface/Views/LayerTreeDetailsSidebarPanel.css:
     38        (.panel.details.layer-tree .bottom-bar):
     39        * UserInterface/Views/Main.css:
     40        (body.docked.bottom):
     41        (body.docked.right):
     42        (#split-content-browser):
     43        (#split-content-browser > .navigation-bar):
     44        (body.window-inactive.docked.bottom): Deleted.
     45        (body.window-inactive.docked.right): Deleted.
     46        (body.window-inactive #split-content-browser): Deleted.
     47        * UserInterface/Views/MemoryCategoryView.css:
     48        (.memory-category-view):
     49        (.memory-category-view > .details):
     50        (body.window-inactive .memory-category-view): Deleted.
     51        (body.window-inactive .memory-category-view > .details): Deleted.
     52        * UserInterface/Views/MemoryTimelineView.css:
     53        (.timeline-view.memory):
     54        (.timeline-view.memory > .content > .overview):
     55        (.timeline-view.memory > .content > .details > .subtitle):
     56        (.timeline-view.memory > .content > .overview > .divider):
     57        (body.window-inactive .timeline-view.memory): Deleted.
     58        (body.window-inactive .timeline-view.memory > .content > .overview): Deleted.
     59        (body.window-inactive .timeline-view.memory > .content > .details > .subtitle): Deleted.
     60        (body.window-inactive .timeline-view.memory > .content > .overview > .divider): Deleted.
     61        * UserInterface/Views/NavigationBar.css:
     62        (.navigation-bar):
     63        (body.window-inactive .navigation-bar): Deleted.
     64        * UserInterface/Views/NavigationSidebarPanel.css:
     65        (.sidebar > .panel.navigation > .overflow-shadow):
     66        (body.window-inactive .sidebar > .panel.navigation > .overflow-shadow): Deleted.
     67        * UserInterface/Views/NetworkSidebarPanel.css:
     68        (.sidebar > .panel.navigation.network > .title-bar):
     69        (body.window-inactive .sidebar > .panel.navigation.network > .title-bar): Deleted.
     70        * UserInterface/Views/OverviewTimelineView.css:
     71        (.timeline-view.overview > .timeline-ruler > .header):
     72        (body.window-inactive .timeline-view.overview > .timeline-ruler > .header): Deleted.
     73        * UserInterface/Views/QuickConsole.css:
     74        (.quick-console):
     75        (body.window-inactive .quick-console): Deleted.
     76        * UserInterface/Views/Sidebar.css:
     77        (.sidebar):
     78        (.sidebar.left):
     79        (.sidebar.right):
     80        (body.window-inactive .sidebar.left): Deleted.
     81        (body.window-inactive .sidebar.right): Deleted.
     82        * UserInterface/Views/TimelineDataGrid.css:
     83        (.data-grid.timeline th):
     84        (body.window-inactive .data-grid.timeline th): Deleted.
     85        * UserInterface/Views/TimelineRuler.css:
     86        (.timeline-ruler > .header):
     87        (body.window-inactive .timeline-ruler > .header): Deleted.
     88        * UserInterface/Views/TimelineSidebarPanel.css:
     89        (.sidebar > .panel.navigation.timeline > .title-bar):
     90        (.sidebar > .panel.navigation.timeline > .title-bar.timeline-events):
     91        (body.window-inactive .sidebar > .panel.navigation.timeline > .title-bar): Deleted.
     92        (body.window-inactive .sidebar > .panel.navigation.timeline > .title-bar.timeline-events): Deleted.
     93        * UserInterface/Views/Toolbar.css:
     94        (body.latest-mac .toolbar .dashboard-container):
     95        * UserInterface/Views/Variables.css:
     96        (:root):
     97        (body.window-inactive *):
     98        * UserInterface/Views/VisualStyleSelectorSection.css:
     99        (.details-section.visual-style-selector-section:not(.collapsed) > .header):
     100        (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider):
     101
    11022016-02-17  Matt Baker  <mattbaker@apple.com>
    2103
  • trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css

    r196236 r196713  
    4141.sidebar > .panel.details.css-style > .content > .pseudo-classes {
    4242    padding: 6px 10px;
    43     border-bottom: 1px solid hsl(0, 0%, 70%);
     43    border-bottom: 1px solid var(--border-color);
    4444
    4545    display: flex;
     
    7272    width: 100%;
    7373    background-color: white;
    74     border-top: 1px solid hsl(0, 0%, 70%);
     74    border-top: 1px solid var(--border-color);
    7575}
    7676
     
    183183    margin-top: 0;
    184184    border-top: none;
    185     border-bottom: 1px solid hsl(0, 0%, 70%);
     185    border-bottom: 1px solid var(--border-color);
    186186}
    187187
  • trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css

    r196620 r196713  
    5959
    6060.data-grid.inline {
    61     border: 1px solid hsl(0, 0%, 70%);
     61    border: 1px solid var(--border-color);
    6262}
    6363
     
    7676    background-color: white;
    7777
    78     border-bottom: 1px solid hsl(0, 0%, 70%);
     78    border-bottom: 1px solid var(--border-color);
    7979
    8080    font-weight: normal;
     
    8787}
    8888
    89 body.window-inactive .data-grid th {
    90     border-bottom-color: hsl(0, 0%, 85%);
    91 }
    92 
    9389.data-grid :matches(th, td):not(:last-child) {
    94     border-right: 1px solid hsl(0, 0%, 70%);
    95 }
    96 
    97 body.window-inactive .data-grid :matches(th, td):not(:last-child) {
    98     border-right-color: hsl(0, 0%, 85%);
     90    border-right: 1px solid var(--border-color);
    9991}
    10092
  • trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css

    r192283 r196713  
    5858
    5959.sidebar > .panel.navigation.debugger.paused .details-section.scripts {
    60     border-bottom: 1px solid hsl(0, 0%, 70%);
     60    border-bottom: 1px solid var(--border-color);
    6161}
    6262
  • trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css

    r196169 r196713  
    2626.details-section {
    2727    font-size: 10px;
    28     background-color: hsl(0, 0%, 94%);
    29     border-bottom: 1px solid hsl(0, 0%, 70%);
     28    background-color: var(--panel-background-color);
     29    border-bottom: 1px solid var(--border-color);
    3030}
    3131
     
    4040
    4141.details-section .details-section:first-child {
    42     border-top: 1px solid hsl(0, 0%, 70%);
     42    border-top: 1px solid var(--border-color);
    4343}
    4444
     
    4848    height: 23px;
    4949
    50     background-color: hsl(0, 0%, 94%);
     50    background-color: var(--panel-background-color);
    5151    color: hsl(0, 0%, 22%);
    5252
     
    160160.details-section > .content > .group {
    161161    display: table-row-group;
    162     border-bottom: 1px solid hsl(0, 0%, 70%);
     162    border-bottom: 1px solid var(--border-color);
    163163}
    164164
     
    172172
    173173.details-section > .content > .group:nth-child(even) > .row:matches(.simple:first-child > *, :not(.simple):first-child) {
    174     border-top: 1px solid hsl(0, 0%, 70%);
     174    border-top: 1px solid var(--border-color);
    175175}
    176176
  • trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.css

    r191004 r196713  
    3232    overflow: hidden;
    3333
    34     background-color: hsl(0, 0%, 94%);
     34    background-color: var(--panel-background-color);
    3535}
    3636
  • trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css

    r196634 r196713  
    2525
    2626.find-banner {
    27     border-bottom: 1px solid hsl(0, 0%, 70%);
     27    border-bottom: 1px solid var(--border-color);
    2828
    2929    position: absolute;
     
    4343
    4444    z-index: var(--z-index-header);
    45 }
    46 
    47 body.window-inactive .find-banner {
    48     border-bottom-color: hsl(0, 0%, 85%);
    4945}
    5046
  • trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.css

    r187105 r196713  
    5959    bottom: 0;
    6060    width: 100%;
    61     border-top: 1px solid hsl(0, 0%, 70%);
     61    border-top: 1px solid var(--border-color);
    6262    background-color: white;
    6363}
  • trunk/Source/WebInspectorUI/UserInterface/Views/Main.css

    r195512 r196713  
    6161
    6262body.docked.bottom {
    63     border-top: 1px solid hsl(0, 0%, 78%);
     63    border-top: 1px solid var(--border-color);
    6464}
    6565
    6666body.docked.right {
    67     border-left: 1px solid hsl(0, 0%, 70%);
    68 }
    69 
    70 body.window-inactive.docked.bottom {
    71     border-top-color: hsl(0, 0%, 85%);
    72 }
    73 
    74 body.window-inactive.docked.right {
    75     border-left-color: hsl(0, 0%, 85%);
     67    border-left: 1px solid var(--border-color);
    7668}
    7769
     
    157149
    158150#split-content-browser {
    159     border-top: 1px solid hsl(0, 0%, 70%);
    160 }
    161 
    162 body.window-inactive #split-content-browser {
    163     border-top-color: hsl(0, 0%, 85%);
     151    border-top: 1px solid var(--border-color);
    164152}
    165153
     
    167155    cursor: row-resize;
    168156
    169     background-color: hsl(0, 0%, 94%);
     157    background-color: var(--panel-background-color);
    170158}
    171159
  • trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css

    r195999 r196713  
    2626.memory-category-view {
    2727    display: flex;
    28     border-bottom: 1px solid var(--memory-active-divider-color);
     28    border-bottom: 1px solid var(--border-color);
    2929}
    3030
     
    3333    padding-left: 15px;
    3434    padding-top: 10px;
    35     border-right: 1px solid var(--memory-active-divider-color);
     35    border-right: 1px solid var(--border-color);
    3636    font-family: '-webkit-system-font';
    3737    font-size: 12px;
    3838    color: hsl(0, 0%, 70%);
    39 }
    40 
    41 body.window-inactive .memory-category-view {
    42     border-bottom-color: var(--memory-inactive-divider-color);
    43 }
    44 
    45 body.window-inactive .memory-category-view > .details {
    46     border-right-color: var(--memory-inactive-divider-color);
    4739}
    4840
  • trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css

    r195999 r196713  
    2626.timeline-view.memory {
    2727    overflow: scroll;
    28     border-top: 1px solid var(--memory-active-divider-color);
    29 }
    30 
    31 body.window-inactive .timeline-view.memory {
    32     border-top-color: var(--memory-inactive-divider-color);
     28    border-top: 1px solid var(--border-color);
    3329}
    3430
     
    4137    padding: 10px;
    4238    margin-bottom: 10px;
    43     border-bottom: 1px solid var(--memory-active-divider-color);
     39    border-bottom: 1px solid var(--border-color);
    4440}
    4541
     
    5753.timeline-view.memory > .content > .details > .subtitle {
    5854    padding: 10px;
    59     border-bottom: 1px solid var(--memory-active-divider-color);
     55    border-bottom: 1px solid var(--border-color);
    6056}
    6157
     
    8076
    8177.timeline-view.memory > .content > .overview > .divider {
    82     border-right: 1px solid var(--memory-active-divider-color);
     78    border-right: 1px solid var(--border-color);
    8379    margin-left: 10px;
    8480    margin-right: 10px;
    85 }
    86 
    87 body.window-inactive .timeline-view.memory > .content > .overview {
    88     border-bottom-color: var(--memory-inactive-divider-color);
    89 }
    90 
    91 body.window-inactive .timeline-view.memory > .content > .details > .subtitle {
    92     border-bottom-color: var(--memory-inactive-divider-color);
    93 }
    94 
    95 body.window-inactive .timeline-view.memory > .content > .overview > .divider {
    96     border-right-color: var(--memory-inactive-divider-color);
    9781}
    9882
  • trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.css

    r187105 r196713  
    3030
    3131    box-shadow: inset hsla(0, 0%, 100%, 0.2) 0 1px 0;
    32     border-bottom: 1px solid hsl(0, 0%, 70%);
     32    border-bottom: 1px solid var(--border-color);
    3333
    3434    height: 29px;
     
    3838
    3939    outline: none;
    40 }
    41 
    42 body.window-inactive .navigation-bar {
    43     border-bottom-color: hsl(0, 0%, 85%);
    4440}
    4541
  • trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css

    r195303 r196713  
    4646    opacity: 0;
    4747
    48     border-bottom: 1px solid hsl(0, 0%, 70%);
     48    border-bottom: 1px solid var(--border-color);
    4949}
    5050
     
    5252    top: 28px;
    5353    bottom: initial;
    54 }
    55 
    56 body.window-inactive .sidebar > .panel.navigation > .overflow-shadow {
    57     border-bottom-color: hsl(0, 0%, 85%);
    5854}
    5955
  • trunk/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css

    r195303 r196713  
    4343    height: 23px;
    4444
    45     border-bottom: 1px solid hsl(0, 0%, 70%);
    46     background-color: hsl(0, 0%, 94%);
     45    border-bottom: 1px solid var(--border-color);
     46    background-color: var(--panel-background-color);
    4747    color: hsl(0, 0%, 22%);
    4848
     
    5757    white-space: nowrap;
    5858    overflow: hidden;
    59 }
    60 
    61 body.window-inactive .sidebar > .panel.navigation.network > .title-bar {
    62     border-bottom-color: hsl(0, 0%, 85%);
    6359}
    6460
  • trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css

    r187105 r196713  
    3333
    3434.timeline-view.overview > .timeline-ruler > .header {
    35     border-top: 1px solid hsl(0, 0%, 70%);
     35    border-top: 1px solid var(--border-color);
    3636    height: 23px;
    37 }
    38 
    39 body.window-inactive .timeline-view.overview > .timeline-ruler > .header {
    40     border-top-color: hsl(0, 0%, 85%);
    4137}
    4238
  • trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css

    r187105 r196713  
    3131
    3232    background-color: white;
    33     border-top: 1px solid hsl(0, 0%, 74%);
     33    border-top: 1px solid var(--border-color);
    3434    padding: 3px 0 4px;
    3535
     
    3838
    3939    font-family: Menlo, monospace;
    40 }
    41 
    42 body.window-inactive .quick-console {
    43     border-top-color: hsl(0, 0%, 85%);
    4440}
    4541
  • trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.css

    r187105 r196713  
    2727    position: relative;
    2828
    29     background-color: hsl(0, 0%, 94%);
     29    background-color: var(--panel-background-color);
    3030}
    3131
     
    7878
    7979.sidebar.left {
    80     border-right: 1px solid hsl(0, 0%, 70%);
     80    border-right: 1px solid var(--border-color);
    8181}
    8282
    8383.sidebar.right {
    84     border-left: 1px solid hsl(0, 0%, 70%);
     84    border-left: 1px solid var(--border-color);
    8585}
    86 
    87 body.window-inactive .sidebar.left {
    88     border-right-color: hsl(0, 0%, 85%);
    89 }
    90 
    91 body.window-inactive .sidebar.right {
    92     border-left-color: hsl(0, 0%, 85%);
    93 }
  • trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css

    r195303 r196713  
    2525
    2626.data-grid.timeline th {
    27     border-top: 1px solid hsl(0, 0%, 70%);
    28 }
    29 
    30 body.window-inactive .data-grid.timeline th {
    31     border-top-color: hsl(0, 0%, 85%);
     27    border-top: 1px solid var(--border-color);
    3228}
    3329
  • trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css

    r195519 r196713  
    4444
    4545.timeline-ruler > .header {
    46     border-bottom: 1px solid hsl(0, 0%, 70%);
     46    border-bottom: 1px solid var(--border-color);
    4747
    4848    position: absolute;
     
    5151    right: 0;
    5252    height: 29px;
    53 }
    54 
    55 body.window-inactive .timeline-ruler > .header {
    56     border-bottom-color: hsl(0, 0%, 85%);
    5753}
    5854
  • trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css

    r195303 r196713  
    5858    height: 29px;
    5959
    60     border-bottom: 1px solid hsl(0, 0%, 70%);
    61     background-color: hsl(0, 0%, 94%);
     60    border-bottom: 1px solid var(--border-color);
     61    background-color: var(--panel-background-color);
    6262    color: hsl(0, 0%, 22%);
    6363
     
    7272    white-space: nowrap;
    7373    overflow: hidden;
    74 }
    75 
    76 body.window-inactive .sidebar > .panel.navigation.timeline > .title-bar {
    77     border-bottom-color: hsl(0, 0%, 85%);
    7874}
    7975
     
    10197    display: flex;
    10298    height: 23px;
    103     border-top: 1px solid hsl(0, 0%, 70%);
     99    border-top: 1px solid var(--border-color);
    104100}
    105101
     
    118114.sidebar > .panel.navigation.timeline > .title-bar.timeline-events > .title-bar-scope-bar > .default-item-selected > .multiple .arrows {
    119115    color: black;
    120 }
    121 
    122 body.window-inactive .sidebar > .panel.navigation.timeline > .title-bar.timeline-events {
    123     border-top-color: hsl(0, 0%, 85%);
    124116}
    125117
  • trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css

    r192134 r196713  
    153153body.latest-mac .toolbar .search-bar > input[type="search"],
    154154body.latest-mac .toolbar .dashboard-container {
    155     background-image: linear-gradient(hsl(0, 0%, 99%), hsl(0, 0%, 94%));
     155    background-image: linear-gradient(hsl(0, 0%, 99%), var(--panel-background-color));
    156156    box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px;
    157157
  • trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css

    r195999 r196713  
    11/*
    2  * Copyright (C) 2015 Apple Inc. All rights reserved.
     2 * Copyright (C) 2015-2016 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
     
    3333    --z-index-uncaught-exception-sheet: 4096;
    3434
     35    --border-color: hsl(0, 0%, 70%);
     36    --panel-background-color: hsl(0, 0%, 94%);
     37
    3538    --console-secondary-text-color: hsla(0, 0%, 0%, 0.33);
    3639
     
    4144    --syntax-highlight-symbol-color: hsl(172, 45%, 45%);
    4245
    43     --memory-active-divider-color: hsl(0, 0%, 70%);
    44     --memory-inactive-divider-color: hsl(0, 0%, 85%);
    4546    --memory-javascript-fill-color: hsl(269, 65%, 75%);
    4647    --memory-javascript-stroke-color: hsl(269, 33%, 50%);
     
    5455    --memory-max-comparison-stroke-color: hsl(220, 10%, 55%);
    5556}
     57
     58body.window-inactive * {
     59    --border-color: hsl(0, 0%, 85%);
     60}
  • trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css

    r193913 r196713  
    3030
    3131.details-section.visual-style-selector-section:not(.collapsed) > .header {
    32     border-bottom: 1px solid hsl(0, 0%, 70%);
     32    border-bottom: 1px solid var(--border-color);
    3333}
    3434
     
    106106    padding: 2px;
    107107    background-color: hsl(0, 0%, 95%);
    108     border-color: hsl(0, 0%, 70%);
     108    border-color: var(--border-color);
    109109    border-style: solid;
    110110    border-width: 1px 0;
Note: See TracChangeset for help on using the changeset viewer.