Bug 1300291 - Fix background-color and icon color of all-tabs-menu; r=ntim, a=gchang
authorJan Odvarko <odvarko@gmail.com>
Wed, 21 Sep 2016 16:10:21 +0200
changeset 358038 11e57e6e570e148280048ed1c4274d84d85bfcf6
parent 358037 f55da68af640fdfcdc8d3abd39da2b7a4856b26e
child 358039 9fdbac8eb078d4b70885f764cfd62930d038239d
push id1324
push usermtabara@mozilla.com
push dateMon, 16 Jan 2017 13:07:44 +0000
treeherdermozilla-release@a01c49833940 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim, gchang
bugs1300291
milestone51.0a2
Bug 1300291 - Fix background-color and icon color of all-tabs-menu; r=ntim, a=gchang
devtools/client/jsonview/css/toolbar.css
devtools/client/shared/components/tabs/tabs.css
devtools/client/themes/firebug-theme.css
devtools/client/themes/variables.css
--- a/devtools/client/jsonview/css/toolbar.css
+++ b/devtools/client/jsonview/css/toolbar.css
@@ -32,17 +32,17 @@
   border: 1px solid transparent;
 }
 
 /******************************************************************************/
 /* Firebug Theme */
 
 .theme-firebug .toolbar {
   border-bottom: 1px solid rgb(170, 188, 207);
-  background-color: rgb(219, 234, 249) !important;
+  background-color: var(--theme-tab-toolbar-background) !important;
   background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
 }
 
 .theme-firebug .toolbar .btn {
   border-radius: 2px;
   color: #141414;
   background-color: white;
 }
--- a/devtools/client/shared/components/tabs/tabs.css
+++ b/devtools/client/shared/components/tabs/tabs.css
@@ -127,17 +127,16 @@
 
 .theme-dark .tabs .tabs-menu-item:hover:active a {
   color: var(--theme-selection-color);
 }
 
 /* Firebug Theme */
 
 .theme-firebug .tabs .tabs-navigation {
-  background-color: rgb(219, 234, 249);
   background-image: linear-gradient(rgba(253, 253, 253, 0.2), rgba(253, 253, 253, 0));
   padding-top: 3px;
   padding-left: 3px;
   border-bottom: 1px solid rgb(170, 188, 207);
 }
 
 .theme-firebug .tabs .tabs-menu {
   margin-bottom: -1px;
--- a/devtools/client/themes/firebug-theme.css
+++ b/devtools/client/themes/firebug-theme.css
@@ -67,17 +67,17 @@
   ID in the selector. */
 .theme-firebug .devtools-tabbar,
 .theme-firebug .devtools-sidebar-tabs tabs {
   background-image: linear-gradient(rgba(253, 253, 253, 0.2), rgba(253, 253, 253, 0));
   border-bottom: 1px solid rgb(170, 188, 207) !important;
 }
 
 .theme-firebug .devtools-sidebar-tabs tabs {
-  background-color: rgb(219, 234, 249) !important;
+  background-color: var(--theme-tab-toolbar-background) !important;
   background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
 }
 
 /* Add a negative bottom margin to overlap bottom border
   of the parent element (see also the next comment for 'tabs') */
 .theme-firebug .devtools-tab,
 .theme-firebug .devtools-sidebar-tabs tab {
   margin: 3px 0 -1px 0;
@@ -163,17 +163,17 @@
 }
 
 /* Toolbar */
 
 .theme-firebug .theme-toolbar,
 .theme-firebug toolbar,
 .theme-firebug .devtools-toolbar {
   border-bottom: 1px solid rgb(170, 188, 207) !important;
-  background-color: rgb(219, 234, 249) !important;
+  background-color: var(--theme-tab-toolbar-background) !important;
   background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
   padding-inline-end: 4px;
 }
 
 /* The vbox for panel content also uses theme-toolbar class from some reason
  but it shouldn't have the padding as defined above, so fix it here */
 .theme-firebug #toolbox-deck > .toolbox-panel.theme-toolbar {
   padding-inline-end: 0;
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -134,17 +134,17 @@
   --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus);
 }
 
 :root.theme-firebug {
   --theme-body-background: #fcfcfc;
   --theme-sidebar-background: #fcfcfc;
   --theme-contrast-background: #e6b064;
 
-  --theme-tab-toolbar-background: #ebeced;
+  --theme-tab-toolbar-background: #d8eaf9;
   --theme-toolbar-background: #f0f1f2;
   --theme-selection-background: #3399ff;
   --theme-selection-background-semitransparent: rgba(128,128,128,0.2);
   --theme-selection-color: white;
   --theme-splitter-color: #aabccf;
   --theme-comment: green;
 
   --theme-body-color: #18191a;