Bug 1397133 - Adjust the sidebar and accordion background colors for the dark theme. r=bgrins
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 06 Sep 2017 17:27:31 -0400
changeset 428884 83228a8eab3304bf076adae195c971851ca40601
parent 428883 0bfc1c5663505f9e394384072f9fe29b6bc91f43
child 428885 9a7fde903010acbe233ffddd9a9f11dcb0ab69b9
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1397133
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1397133 - Adjust the sidebar and accordion background colors for the dark theme. r=bgrins
devtools/client/inspector/layout/components/Accordion.css
devtools/client/netmonitor/index.html
devtools/client/shared/components/tabs/tabs.css
devtools/client/themes/rules.css
devtools/client/themes/variables.css
--- a/devtools/client/inspector/layout/components/Accordion.css
+++ b/devtools/client/inspector/layout/components/Accordion.css
@@ -1,24 +1,35 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /**
- * This file should not be modified and is a duplicate from the debugger.html project.
- * Any changes to this file should be imported from the upstream debugger.html project.
+ * This file is a duplicate from the debugger.html project and has diverged in terms of
+ * some of styles that are kept. Any changes to the styles in this file should be synced
+ * back to the appropriate styles in the debugger.html project.
+ * Create a pull request at https://github.com/devtools-html/debugger.html to sync
+ * any changes to the existing styles.
  */
 
+:root {
+  --accordion-header-background: var(--theme-toolbar-background);
+}
+
+:root.theme-dark {
+  --accordion-header-background: #141416;
+}
+
 .accordion {
-  background-color: var(--theme-body-background);
+  background-color: var(--theme-sidebar-background);
   width: 100%;
 }
 
 .accordion ._header {
-  background-color: var(--theme-toolbar-background);
+  background-color: var(--accordion-header-background);
   border-bottom: 1px solid var(--theme-splitter-color);
   cursor: pointer;
   font-size: 12px;
   padding: 4px;
   transition: all 0.25s ease;
   width: 100%;
   align-items: center;
   display: flex;
--- a/devtools/client/netmonitor/index.html
+++ b/devtools/client/netmonitor/index.html
@@ -4,17 +4,17 @@
 <!DOCTYPE html>
 <html dir="">
   <head>
     <link rel="stylesheet" href="chrome://devtools/content/shared/widgets/widgets.css"/>
     <link rel="stylesheet" href="chrome://devtools/skin/widgets.css"/>
     <link rel="stylesheet" href="chrome://devtools/content/netmonitor/src/assets/styles/netmonitor.css"/>
     <script src="chrome://devtools/content/shared/theme-switching.js"></script>
   </head>
-  <body class="theme-sidebar" role="application">
+  <body class="theme-body" role="application">
     <div id="mount"></div>
     <script>
       "use strict";
 
       const { BrowserLoader } = Components.utils.import("resource://devtools/client/shared/browser-loader.js", {});
       const require = window.windowRequire = BrowserLoader({
         baseURI: "resource://devtools/client/netmonitor/",
         window,
--- a/devtools/client/shared/components/tabs/tabs.css
+++ b/devtools/client/shared/components/tabs/tabs.css
@@ -2,17 +2,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Tabs General Styles */
 
 .tabs {
   height: 100%;
-  background: var(--theme-body-background);
+  background: var(--theme-sidebar-background);
   display: flex;
   flex-direction: column;
 }
 
 .tabs .tabs-menu {
   list-style: none;
   padding: 0;
   margin: 0;
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -1,28 +1,31 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* CSS Variables specific to this panel that aren't defined by the themes */
 .theme-light {
   --rule-highlight-background-color: #ffee99;
   --rule-overridden-item-border-color: var(--theme-content-color3);
+  --rule-header-background-color: var(--theme-toolbar-background);
 }
 
 .theme-dark {
   --rule-highlight-background-color: #594724;
   --rule-overridden-item-border-color: var(--theme-content-color1);
+  --rule-header-background-color: #141416;
 }
 
 .theme-firebug {
   --rule-highlight-background-color: #ffee99;
   --rule-property-name: darkgreen;
   --rule-property-value: darkblue;
   --rule-overridden-item-border-color: var(--theme-content-color2);
+  --rule-header-background-color: var(--theme-header-background);
 }
 
 /* Rule View Tabpanel */
 
 #sidebar-panel-ruleview {
   margin: 0;
   display: flex;
   flex-direction: column;
@@ -214,17 +217,17 @@
   color: #0000FF;
 }
 
 .ruleview-rule-source:not([unselectable]):hover {
   text-decoration: underline;
 }
 
 .ruleview-header {
-  background-color: var(--theme-toolbar-background);
+  background-color: var(--rule-header-background-color);
   border-bottom: 1px solid var(--theme-splitter-color);
   font-size: 12px;
   padding: 4px;
   width: 100%;
   align-items: center;
   display: flex;
 
   -moz-user-select: none;
@@ -234,17 +237,16 @@
   font-family: var(--proportional-font-family);
   font-weight: bold;
   color: inherit;
   border: none;
   margin: 4px 0;
   padding: 3px 4px 2px 4px;
   line-height: inherit;
   min-height: 0;
-  background: var(--theme-header-background);
 }
 
 :root[platform="win"] .ruleview-header,
 :root[platform="linux"] .ruleview-header {
   margin-top: 4px;
 }
 
 .ruleview-expandable-header {
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -88,17 +88,17 @@
   --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme);
   --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus);
 
   --theme-codemirror-gutter-background: #f4f4f4;
 }
 
 :root.theme-dark {
   --theme-body-background: var(--grey-80);
-  --theme-sidebar-background: var(--grey-80);
+  --theme-sidebar-background: var(--grey-90);
   --theme-contrast-background: #ffb35b;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-90);
   --theme-toolbar-background: var(--grey-90);
   --theme-toolbar-background-hover: #20232B;
   --theme-toolbar-background-alt: #2F343E;
   --theme-toolbar-hover: rgba(110, 120, 130, 0.1);