Web Inspector: add CSS variables for common border/background colors
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 17 Feb 2016 20:29:50 +0000 (20:29 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 17 Feb 2016 20:29:50 +0000 (20:29 +0000)
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):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@196713 268f45cc-cd09-0410-ab3c-d52691b4dbfc

23 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/DataGrid.css
Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
Source/WebInspectorUI/UserInterface/Views/FilterBar.css
Source/WebInspectorUI/UserInterface/Views/FindBanner.css
Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/Main.css
Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css
Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css
Source/WebInspectorUI/UserInterface/Views/NavigationBar.css
Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css
Source/WebInspectorUI/UserInterface/Views/QuickConsole.css
Source/WebInspectorUI/UserInterface/Views/Sidebar.css
Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css
Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/Toolbar.css
Source/WebInspectorUI/UserInterface/Views/Variables.css
Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css

index d4d64ca..d488971 100644 (file)
@@ -1,5 +1,106 @@
 2016-02-17  Matt Baker  <mattbaker@apple.com>
 
+        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):
+
+2016-02-17  Matt Baker  <mattbaker@apple.com>
+
         Web Inspector: Add singular and plural cases for "Ignore n times before stopping" label in breakpoint editor
         https://bugs.webkit.org/show_bug.cgi?id=154335
         <rdar://problem/24655491>
index 93fa65f..3a733bd 100644 (file)
@@ -40,7 +40,7 @@
 
 .sidebar > .panel.details.css-style > .content > .pseudo-classes {
     padding: 6px 10px;
-    border-bottom: 1px solid hsl(0, 0%, 70%);
+    border-bottom: 1px solid var(--border-color);
 
     display: flex;
     flex-flow: row wrap;
@@ -71,7 +71,7 @@
     position: absolute;
     width: 100%;
     background-color: white;
-    border-top: 1px solid hsl(0, 0%, 70%);
+    border-top: 1px solid var(--border-color);
 }
 
 .sidebar > .panel.details.css-style > .content ~ .options-container {
 .sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section:not(.filter-section-has-label) {
     margin-top: 0;
     border-top: none;
-    border-bottom: 1px solid hsl(0, 0%, 70%);
+    border-bottom: 1px solid var(--border-color);
 }
 
 .sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section > .header > .selector > .filter-matching {
index 638a227..bf7eefd 100644 (file)
@@ -58,7 +58,7 @@
 }
 
 .data-grid.inline {
-    border: 1px solid hsl(0, 0%, 70%);
+    border: 1px solid var(--border-color);
 }
 
 .data-grid.no-header > table.header {
@@ -75,7 +75,7 @@
 
     background-color: white;
 
-    border-bottom: 1px solid hsl(0, 0%, 70%);
+    border-bottom: 1px solid var(--border-color);
 
     font-weight: normal;
 
     overflow: hidden;
 }
 
-body.window-inactive .data-grid th {
-    border-bottom-color: hsl(0, 0%, 85%);
-}
-
 .data-grid :matches(th, td):not(:last-child) {
-    border-right: 1px solid hsl(0, 0%, 70%);
-}
-
-body.window-inactive .data-grid :matches(th, td):not(:last-child) {
-    border-right-color: hsl(0, 0%, 85%);
+    border-right: 1px solid var(--border-color);
 }
 
 .data-grid th.sortable:active {
index 6b53776..1b2c081 100644 (file)
@@ -57,7 +57,7 @@
 }
 
 .sidebar > .panel.navigation.debugger.paused .details-section.scripts {
-    border-bottom: 1px solid hsl(0, 0%, 70%);
+    border-bottom: 1px solid var(--border-color);
 }
 
 .sidebar > .panel.navigation.debugger .details-section.scripts .header {
index ea840a0..5e00482 100644 (file)
@@ -25,8 +25,8 @@
 
 .details-section {
     font-size: 10px;
-    background-color: hsl(0, 0%, 94%);
-    border-bottom: 1px solid hsl(0, 0%, 70%);
+    background-color: var(--panel-background-color);
+    border-bottom: 1px solid var(--border-color);
 }
 
 .details-section .details-section {
@@ -39,7 +39,7 @@
 }
 
 .details-section .details-section:first-child {
-    border-top: 1px solid hsl(0, 0%, 70%);
+    border-top: 1px solid var(--border-color);
 }
 
 .details-section > .header {
@@ -47,7 +47,7 @@
     top: -1px;
     height: 23px;
 
-    background-color: hsl(0, 0%, 94%);
+    background-color: var(--panel-background-color);
     color: hsl(0, 0%, 22%);
 
     white-space: nowrap;
 
 .details-section > .content > .group {
     display: table-row-group;
-    border-bottom: 1px solid hsl(0, 0%, 70%);
+    border-bottom: 1px solid var(--border-color);
 }
 
 .details-section > .content > .group:last-child {
 }
 
 .details-section > .content > .group:nth-child(even) > .row:matches(.simple:first-child > *, :not(.simple):first-child) {
-    border-top: 1px solid hsl(0, 0%, 70%);
+    border-top: 1px solid var(--border-color);
 }
 
 .details-section > .content > .group > .row.simple {
index cc55131..3d444b4 100644 (file)
@@ -31,7 +31,7 @@
     white-space: nowrap;
     overflow: hidden;
 
-    background-color: hsl(0, 0%, 94%);
+    background-color: var(--panel-background-color);
 }
 
 .filter-bar > .navigation-bar {
index 9efca36..e869f23 100644 (file)
@@ -24,7 +24,7 @@
  */
 
 .find-banner {
-    border-bottom: 1px solid hsl(0, 0%, 70%);
+    border-bottom: 1px solid var(--border-color);
 
     position: absolute;
     top: -22px;
     z-index: var(--z-index-header);
 }
 
-body.window-inactive .find-banner {
-    border-bottom-color: hsl(0, 0%, 85%);
-}
-
 .find-banner.showing {
     top: 0;
     transition-timing-function: ease-out;
index a7caffc..54bb2cb 100644 (file)
@@ -58,7 +58,7 @@
     display: flex;
     bottom: 0;
     width: 100%;
-    border-top: 1px solid hsl(0, 0%, 70%);
+    border-top: 1px solid var(--border-color);
     background-color: white;
 }
 
index fc0bb2f..9655478 100644 (file)
@@ -60,19 +60,11 @@ body:not(.mavericks) {
 }
 
 body.docked.bottom {
-    border-top: 1px solid hsl(0, 0%, 78%);
+    border-top: 1px solid var(--border-color);
 }
 
 body.docked.right {
-    border-left: 1px solid hsl(0, 0%, 70%);
-}
-
-body.window-inactive.docked.bottom {
-    border-top-color: hsl(0, 0%, 85%);
-}
-
-body.window-inactive.docked.right {
-    border-left-color: hsl(0, 0%, 85%);
+    border-left: 1px solid var(--border-color);
 }
 
 #docked-resizer {
@@ -156,17 +148,13 @@ body.docked.right #navigation-sidebar.collapsed > .resizer {
 }
 
 #split-content-browser {
-    border-top: 1px solid hsl(0, 0%, 70%);
-}
-
-body.window-inactive #split-content-browser {
-    border-top-color: hsl(0, 0%, 85%);
+    border-top: 1px solid var(--border-color);
 }
 
 #split-content-browser > .navigation-bar {
     cursor: row-resize;
 
-    background-color: hsl(0, 0%, 94%);
+    background-color: var(--panel-background-color);
 }
 
 #split-content-browser > .navigation-bar .item:not(.flexible-space) {
index dfeb58c..ef1e60c 100644 (file)
 
 .memory-category-view {
     display: flex;
-    border-bottom: 1px solid var(--memory-active-divider-color);
+    border-bottom: 1px solid var(--border-color);
 }
 
 .memory-category-view > .details {
     width: 150px;
     padding-left: 15px;
     padding-top: 10px;
-    border-right: 1px solid var(--memory-active-divider-color);
+    border-right: 1px solid var(--border-color);
     font-family: '-webkit-system-font';
     font-size: 12px;
     color: hsl(0, 0%, 70%);
 }
 
-body.window-inactive .memory-category-view {
-    border-bottom-color: var(--memory-inactive-divider-color);
-}
-
-body.window-inactive .memory-category-view > .details {
-    border-right-color: var(--memory-inactive-divider-color);
-}
-
 .memory-category-view > .details > .name {
     color: black;
 }
index 5e341c6..090096e 100644 (file)
 
 .timeline-view.memory {
     overflow: scroll;
-    border-top: 1px solid var(--memory-active-divider-color);
-}
-
-body.window-inactive .timeline-view.memory {
-    border-top-color: var(--memory-inactive-divider-color);
+    border-top: 1px solid var(--border-color);
 }
 
 .timeline-view.memory > .content {
@@ -40,7 +36,7 @@ body.window-inactive .timeline-view.memory {
 .timeline-view.memory > .content > .overview {
     padding: 10px;
     margin-bottom: 10px;
-    border-bottom: 1px solid var(--memory-active-divider-color);
+    border-bottom: 1px solid var(--border-color);
 }
 
 .timeline-view.memory > .content .subtitle {
@@ -56,7 +52,7 @@ body.window-inactive .timeline-view.memory {
 
 .timeline-view.memory > .content > .details > .subtitle {
     padding: 10px;
-    border-bottom: 1px solid var(--memory-active-divider-color);
+    border-bottom: 1px solid var(--border-color);
 }
 
 .timeline-view.memory > .content > .overview {
@@ -79,23 +75,11 @@ body.window-inactive .timeline-view.memory {
 }
 
 .timeline-view.memory > .content > .overview > .divider {
-    border-right: 1px solid var(--memory-active-divider-color);
+    border-right: 1px solid var(--border-color);
     margin-left: 10px;
     margin-right: 10px;
 }
 
-body.window-inactive .timeline-view.memory > .content > .overview {
-    border-bottom-color: var(--memory-inactive-divider-color);
-}
-
-body.window-inactive .timeline-view.memory > .content > .details > .subtitle {
-    border-bottom-color: var(--memory-inactive-divider-color);
-}
-
-body.window-inactive .timeline-view.memory > .content > .overview > .divider {
-    border-right-color: var(--memory-inactive-divider-color);
-}
-
 .timeline-view.memory > .content > .overview .total-usage,
 .timeline-view.memory > .content > .overview .max-percentage {
     margin: auto;
index b117f17..16d6e19 100644 (file)
@@ -29,7 +29,7 @@
     flex-wrap: wrap;
 
     box-shadow: inset hsla(0, 0%, 100%, 0.2) 0 1px 0;
-    border-bottom: 1px solid hsl(0, 0%, 70%);
+    border-bottom: 1px solid var(--border-color);
 
     height: 29px;
 
     outline: none;
 }
 
-body.window-inactive .navigation-bar {
-    border-bottom-color: hsl(0, 0%, 85%);
-}
-
 .navigation-bar .item {
     display: flex;
     align-items: center;
index 2f358f3..f4c22dc 100644 (file)
@@ -45,7 +45,7 @@
 
     opacity: 0;
 
-    border-bottom: 1px solid hsl(0, 0%, 70%);
+    border-bottom: 1px solid var(--border-color);
 }
 
 .sidebar > .panel.navigation > .overflow-shadow.top {
     bottom: initial;
 }
 
-body.window-inactive .sidebar > .panel.navigation > .overflow-shadow {
-    border-bottom-color: hsl(0, 0%, 85%);
-}
-
 .sidebar > .panel.navigation > .content .empty-content-placeholder {
     left: 0;
     right: 0;
index 51ff788..6cfc286 100644 (file)
@@ -42,8 +42,8 @@
 
     height: 23px;
 
-    border-bottom: 1px solid hsl(0, 0%, 70%);
-    background-color: hsl(0, 0%, 94%);
+    border-bottom: 1px solid var(--border-color);
+    background-color: var(--panel-background-color);
     color: hsl(0, 0%, 22%);
 
     white-space: nowrap;
     overflow: hidden;
 }
 
-body.window-inactive .sidebar > .panel.navigation.network > .title-bar {
-    border-bottom-color: hsl(0, 0%, 85%);
-}
-
 .sidebar > .panel.navigation.network.network-grid-content-view-showing > .content {
  /* This hides the scrollbar. The view shows a scrollbar, we don't need two. */
     padding-right: 16px;
index 2c1dec9..6ad403a 100644 (file)
 }
 
 .timeline-view.overview > .timeline-ruler > .header {
-    border-top: 1px solid hsl(0, 0%, 70%);
+    border-top: 1px solid var(--border-color);
     height: 23px;
 }
 
-body.window-inactive .timeline-view.overview > .timeline-ruler > .header {
-    border-top-color: hsl(0, 0%, 85%);
-}
-
 .timeline-view.overview > .timeline-ruler > .event-markers {
     top: 23px;
 }
index 7135f09..becfa0f 100644 (file)
@@ -30,7 +30,7 @@
     align-items: flex-end;
 
     background-color: white;
-    border-top: 1px solid hsl(0, 0%, 74%);
+    border-top: 1px solid var(--border-color);
     padding: 3px 0 4px;
 
     outline: none;
     font-family: Menlo, monospace;
 }
 
-body.window-inactive .quick-console {
-    border-top-color: hsl(0, 0%, 85%);
-}
-
 .quick-console.showing-log {
     border-top-color: hsl(0, 0%, 94%) !important;
 }
index 260d43c..ccd9feb 100644 (file)
@@ -26,7 +26,7 @@
 .sidebar {
     position: relative;
 
-    background-color: hsl(0, 0%, 94%);
+    background-color: var(--panel-background-color);
 }
 
 .sidebar.collapsed {
 }
 
 .sidebar.left {
-    border-right: 1px solid hsl(0, 0%, 70%);
+    border-right: 1px solid var(--border-color);
 }
 
 .sidebar.right {
-    border-left: 1px solid hsl(0, 0%, 70%);
-}
-
-body.window-inactive .sidebar.left {
-    border-right-color: hsl(0, 0%, 85%);
-}
-
-body.window-inactive .sidebar.right {
-    border-left-color: hsl(0, 0%, 85%);
+    border-left: 1px solid var(--border-color);
 }
index 72e1d42..99adcb6 100644 (file)
  */
 
 .data-grid.timeline th {
-    border-top: 1px solid hsl(0, 0%, 70%);
-}
-
-body.window-inactive .data-grid.timeline th {
-    border-top-color: hsl(0, 0%, 85%);
+    border-top: 1px solid var(--border-color);
 }
 
 .tree-outline.timeline-data-grid .item:hover {
index b675c46..31605b4 100644 (file)
@@ -43,7 +43,7 @@
 }
 
 .timeline-ruler > .header {
-    border-bottom: 1px solid hsl(0, 0%, 70%);
+    border-bottom: 1px solid var(--border-color);
 
     position: absolute;
     top: 0;
     height: 29px;
 }
 
-body.window-inactive .timeline-ruler > .header {
-    border-bottom-color: hsl(0, 0%, 85%);
-}
-
 .timeline-ruler > .header > .divider {
     position: absolute;
     width: 1px;
index 8611bfd..00f9e32 100644 (file)
@@ -57,8 +57,8 @@
 
     height: 29px;
 
-    border-bottom: 1px solid hsl(0, 0%, 70%);
-    background-color: hsl(0, 0%, 94%);
+    border-bottom: 1px solid var(--border-color);
+    background-color: var(--panel-background-color);
     color: hsl(0, 0%, 22%);
 
     white-space: nowrap;
     overflow: hidden;
 }
 
-body.window-inactive .sidebar > .panel.navigation.timeline > .title-bar {
-    border-bottom-color: hsl(0, 0%, 85%);
-}
-
 .sidebar > .panel.navigation.timeline > .title-bar.timelines {
     top: 29px;
     padding: 8px 9px;
@@ -100,7 +96,7 @@ body.window-inactive .sidebar > .panel.navigation.timeline > .title-bar {
 .sidebar > .panel.navigation.timeline > .title-bar.timeline-events {
     display: flex;
     height: 23px;
-    border-top: 1px solid hsl(0, 0%, 70%);
+    border-top: 1px solid var(--border-color);
 }
 
 .sidebar > .panel.navigation.timeline > .title-bar.timeline-events > .title-bar-scope-bar {
@@ -119,10 +115,6 @@ body.window-inactive .sidebar > .panel.navigation.timeline > .title-bar {
     color: black;
 }
 
-body.window-inactive .sidebar > .panel.navigation.timeline > .title-bar.timeline-events {
-    border-top-color: hsl(0, 0%, 85%);
-}
-
 .sidebar > .panel.navigation.timeline > .timelines-content {
     position: absolute;
     top: 58px;
index c305b9e..85f57ef 100644 (file)
@@ -152,7 +152,7 @@ body.window-inactive.legacy-mac .toolbar .dashboard-container {
 body.latest-mac .toolbar .item.button,
 body.latest-mac .toolbar .search-bar > input[type="search"],
 body.latest-mac .toolbar .dashboard-container {
-    background-image: linear-gradient(hsl(0, 0%, 99%), hsl(0, 0%, 94%));
+    background-image: linear-gradient(hsl(0, 0%, 99%), var(--panel-background-color));
     box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px;
 
     border-radius: 4px;
index 3da6ec9..931f6b9 100644 (file)
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015-2016 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
@@ -32,6 +32,9 @@
     --z-index-glass-pane-for-drag: 2048;
     --z-index-uncaught-exception-sheet: 4096;
 
+    --border-color: hsl(0, 0%, 70%);
+    --panel-background-color: hsl(0, 0%, 94%);
+
     --console-secondary-text-color: hsla(0, 0%, 0%, 0.33);
 
     --syntax-highlight-number-color: hsl(248, 100%, 40%);
@@ -40,8 +43,6 @@
     --syntax-highlight-regexp-color: hsl(20, 100%, 44%);
     --syntax-highlight-symbol-color: hsl(172, 45%, 45%);
 
-    --memory-active-divider-color: hsl(0, 0%, 70%);
-    --memory-inactive-divider-color: hsl(0, 0%, 85%);
     --memory-javascript-fill-color: hsl(269, 65%, 75%);
     --memory-javascript-stroke-color: hsl(269, 33%, 50%);
     --memory-images-fill-color: hsl(0, 65%, 75%);
@@ -53,3 +54,7 @@
     --memory-max-comparison-fill-color: hsl(220, 10%, 75%);
     --memory-max-comparison-stroke-color: hsl(220, 10%, 55%);
 }
+
+body.window-inactive * {
+    --border-color: hsl(0, 0%, 85%);
+}
index 8b7d131..717e73c 100644 (file)
@@ -29,7 +29,7 @@
 }
 
 .details-section.visual-style-selector-section:not(.collapsed) > .header {
-    border-bottom: 1px solid hsl(0, 0%, 70%);
+    border-bottom: 1px solid var(--border-color);
 }
 
 @media (-webkit-min-device-pixel-ratio: 2) {
     height: 17px;
     padding: 2px;
     background-color: hsl(0, 0%, 95%);
-    border-color: hsl(0, 0%, 70%);
+    border-color: var(--border-color);
     border-style: solid;
     border-width: 1px 0;
     z-index: var(--z-index-header);