Bug 1396103 - Updates the font color for the body, tabs and accordion/headers to match the photon styles. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Fri, 08 Sep 2017 11:02:01 -0400
changeset 429266 814746fc67081ba90d2b2b8b32cf3e0590b650b0
parent 429265 2b23fd4108d10f8e829902819962ab017c877acb
child 429267 65372115ac3b5dd3783c70d1a9a528add950fb72
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)
reviewerspbro
bugs1396103
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 1396103 - Updates the font color for the body, tabs and accordion/headers to match the photon styles. r=pbro
devtools/client/inspector/layout/components/Accordion.css
devtools/client/shared/components/tabs/tabs.css
devtools/client/themes/animationinspector.css
devtools/client/themes/rules.css
devtools/client/themes/toolbox.css
devtools/client/themes/variables.css
--- a/devtools/client/inspector/layout/components/Accordion.css
+++ b/devtools/client/inspector/layout/components/Accordion.css
@@ -21,16 +21,17 @@
 .accordion {
   background-color: var(--theme-sidebar-background);
   width: 100%;
 }
 
 .accordion ._header {
   background-color: var(--accordion-header-background);
   border-bottom: 1px solid var(--theme-splitter-color);
+  color: var(--theme-toolbar-color);
   cursor: pointer;
   font-size: 12px;
   padding: 4px;
   transition: all 0.25s ease;
   width: 100%;
   align-items: center;
   display: flex;
 
--- a/devtools/client/shared/components/tabs/tabs.css
+++ b/devtools/client/shared/components/tabs/tabs.css
@@ -76,17 +76,17 @@
   border-bottom: 1px solid var(--theme-splitter-color);
   background: var(--theme-tab-toolbar-background);
 }
 
 .theme-dark .tabs .tabs-menu-item,
 .theme-light .tabs .tabs-menu-item {
   margin: 0;
   padding: 0;
-  color: var(--theme-content-color1);
+  color: var(--theme-toolbar-color);
 }
 
 .theme-dark .tabs .tabs-menu-item:last-child,
 .theme-light:not(.theme-firebug) .tabs .tabs-menu-item:last-child {
   border-inline-end-width: 1px;
 }
 
 .theme-dark .tabs .tabs-menu-item a,
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -104,17 +104,16 @@ html {
 
 body {
   margin: 0;
   padding: 0;
   display : flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
-  color: var(--theme-content-color3);
 }
 
 /* The top toolbar, containing the toggle-all button. And the timeline toolbar,
    containing playback control buttons, shown only when there are animations
    displayed in the timeline */
 
 #global-toolbar,
 #timeline-toolbar {
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -219,16 +219,17 @@
 
 .ruleview-rule-source:not([unselectable]):hover {
   text-decoration: underline;
 }
 
 .ruleview-header {
   background: var(--rule-header-background-color);
   border-bottom: 1px solid var(--theme-splitter-color);
+  color: var(--theme-toolbar-color);
   font-size: 12px;
   padding: 4px;
   width: 100%;
   align-items: center;
   display: flex;
 
   -moz-user-select: none;
 }
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -135,22 +135,18 @@
   min-width: 24px;
 }
 
 /* Save space on the tab-strip in Firebug theme */
 .theme-firebug .devtools-tab {
   -moz-box-flex: initial;
 }
 
-.theme-dark .devtools-tab {
-  color: var(--theme-body-color-alt);
-}
-
-.theme-light .devtools-tab {
-  color: var(--theme-body-color);
+.devtools-tab {
+  color: var(--theme-toolbar-color);
 }
 
 .theme-dark .devtools-tab:hover {
   color: #ced3d9;
 }
 
 .devtools-tab:hover {
   background-color: var(--theme-toolbar-hover);
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -19,16 +19,17 @@
 :root.theme-light {
   --theme-body-background: white;
   --theme-sidebar-background: white;
   --theme-contrast-background: #e6b064;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-10);
   --theme-toolbar-background: var(--grey-10);
+  --theme-toolbar-color: var(--grey-90);
   --theme-toolbar-background-hover: rgba(221, 225, 228, 0.66);
   --theme-toolbar-background-alt: #f5f5f5;
   --theme-toolbar-hover: rgba(170, 170, 170, .2);
   --theme-toolbar-hover-active: rgba(170, 170, 170, .4);
 
   /* Selection */
   --theme-selection-background: var(--blue-55);
   --theme-selection-background-hover: #F0F9FE;
@@ -36,17 +37,17 @@
 
   /* Border color that splits the toolbars/panels/headers.
    * This needs to be sync with commandline.css and commandline-browser.css. */
   --theme-splitter-color: #e0e0e1;
 
   --theme-comment: #696969;
   --theme-comment-alt: #ccd1d5;
 
-  --theme-body-color: #393f4c;
+  --theme-body-color: var(--grey-60);
   --theme-body-color-alt: #585959;
   --theme-body-color-inactive: #999797;
   --theme-content-color1: #292e33;
   --theme-content-color2: #8fa1b2;
   --theme-content-color3: #667380;
 
   --theme-highlight-green: #2cbb0f;
   --theme-highlight-blue: #0088cc;
@@ -94,16 +95,17 @@
 :root.theme-dark {
   --theme-body-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-color: var(--grey-40);
   --theme-toolbar-background-hover: #20232B;
   --theme-toolbar-background-alt: #2F343E;
   --theme-toolbar-hover: rgba(110, 120, 130, 0.1);
   --theme-toolbar-hover-active: rgba(110, 120, 130, 0.2);
 
   /* Selection */
   --theme-selection-background: #204E8A;
   --theme-selection-background-hover: #353B48;
@@ -111,21 +113,21 @@
 
   /* Border color that splits the toolbars/panels/headers.
    * This needs to be sync with commandline.css and commandline-browser.css. */
   --theme-splitter-color: #3c3c3d;
 
   --theme-comment: #757873;
   --theme-comment-alt: #5a6375;
 
-  --theme-body-color: #8fa1b2;
+  --theme-body-color: var(--grey-40);
   --theme-body-color-alt: #b6babf;
-  --theme-body-color-inactive: #8fa1b2;
+  --theme-body-color-inactive: var(--grey-40);
   --theme-content-color1: #a9bacb;
-  --theme-content-color2: #8fa1b2;
+  --theme-content-color2: var(--grey-40);
   --theme-content-color3: #5f7387;
 
   --theme-highlight-green: #00ff7f;
   --theme-highlight-blue: #46afe3;
   --theme-highlight-bluegrey: #5e88b0;
   --theme-highlight-purple: #bcb8db;
   --theme-highlight-lightorange: #d99b28;
   --theme-highlight-orange: #d96629;