Bug 1395997 - Use the photon styles for the DevTools splitter color. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Sat, 02 Sep 2017 13:40:09 -0400
changeset 427953 74b0ceebc6d142547b5c55c3d7b2550478c000c1
parent 427952 95089cbed4161a64d1016b1202be07067c6194ba
child 427954 f5d99e9f3d7bf19c8a222db97bedc924da27fd58
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
bugs1395997
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 1395997 - Use the photon styles for the DevTools splitter color. r=pbro
devtools/client/themes/commandline-browser.css
devtools/client/themes/commandline.css
devtools/client/themes/variables.css
--- a/devtools/client/themes/commandline-browser.css
+++ b/devtools/client/themes/commandline-browser.css
@@ -9,29 +9,29 @@
 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
    We are copy/pasting variables from light-theme and dark-theme,
    since they aren't loaded in this context (within browser.css). */
 #browser-bottombox[devtoolstheme="light"] #developer-toolbar {
   --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */
   --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */
   --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */
   --gcli-input-color: #393f4c; /* --theme-body-color */
-  --gcli-border-color: #dde1e4; /* --theme-splitter-color */
+  --gcli-border-color: #e0e0e1; /* --theme-splitter-color */
   --selection-background: #4c9ed9; /* --theme-selection-background */
   --selection-color: #f5f7fa; /* --theme-selection-color */
   --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
   --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
 }
 
 #browser-bottombox[devtoolstheme="dark"] #developer-toolbar {
   --gcli-background-color: #272b35; /* --theme-toolbar-background */
   --gcli-input-background: #272b35; /* --theme-tab-toolbar-background */
   --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */
   --gcli-input-color: #b6babf; /* --theme-body-color-alt */
-  --gcli-border-color: #454d5d; /* --theme-splitter-color */
+  --gcli-border-color: #3c3c3d; /* --theme-splitter-color */
   --selection-background: #5675b9; /* --theme-selection-background */
   --selection-color: #f5f7fa; /* --theme-selection-color */
   --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme); /* --theme-command-line-image */
   --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus); /* --theme-command-line-image-focus */
 }
 
 #developer-toolbar {
   -moz-appearance: none;
--- a/devtools/client/themes/commandline.css
+++ b/devtools/client/themes/commandline.css
@@ -9,24 +9,24 @@
 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
    We are copy/pasting variables from light-theme and dark-theme,
    since they aren't loaded in this context (within commandlineoutput.xhtml
    and commandlinetooltip.xhtml). */
 :root[devtoolstheme="light"] {
   --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */
   --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */
   --gcli-input-color: #393f4c; /* --theme-body-color */
-  --gcli-border-color: #dde1e4; /* --theme-splitter-color */
+  --gcli-border-color: #e0e0e1; /* --theme-splitter-color */
 }
 
 :root[devtoolstheme="dark"] {
   --gcli-background-color: #272b35; /* --theme-toolbar-background */
   --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */
   --gcli-input-color: #b6babf; /* --theme-body-color-alt */
-  --gcli-border-color: #454d5d; /* --theme-splitter-color */
+  --gcli-border-color: #3c3c3d; /* --theme-splitter-color */
 }
 
 .gcli-body {
   margin: 0;
   font: message-box;
   color: var(--gcli-input-color);
 }
 
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -1,21 +1,23 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* 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/. */
 
 /* Variable declarations for light and dark devtools themes.
  * Colors are taken from:
  * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors.
- * Changes should be kept in sync with commandline.css and commandline.inc.css.
  */
 
-/* IMPORTANT NOTE:
- * This file is parsed in js (see client/shared/theme.js)
+/*
+ * IMPORTANT NOTE
+ * 1. Changes should be kept in sync with commandline.css and commandline-browser.css.
+ *
+ * 2. This file is parsed in js (see client/shared/theme.js)
  * so the formatting should be consistent (i.e. no '}' inside a rule).
  */
 
 :root.theme-light {
   --theme-body-background: white;
   --theme-sidebar-background: white;
   --theme-contrast-background: #e6b064;
 
@@ -23,17 +25,21 @@
   --theme-toolbar-background: #fcfcfc;
   --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);
   --theme-selection-background: var(--blue-55);
   --theme-selection-background-hover: #F0F9FE;
   --theme-selection-color: #f5f7fa;
-  --theme-splitter-color: #dde1e4;
+
+  /* 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-alt: #585959;
   --theme-body-color-inactive: #999797;
   --theme-content-color1: #292e33;
   --theme-content-color2: #8fa1b2;
@@ -91,17 +97,21 @@
   --theme-toolbar-background: #272b35;
   --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);
   --theme-selection-background: #204E8A;
   --theme-selection-background-hover: #353B48;
   --theme-selection-color: #f5f7fa;
-  --theme-splitter-color: #454d5d;
+
+  /* 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-alt: #b6babf;
   --theme-body-color-inactive: #8fa1b2;
   --theme-content-color1: #a9bacb;
   --theme-content-color2: #8fa1b2;