Bug 1391003 - Use the new photon line selection and hover background colors in devtool. r=bgrins
authorGabriel Luong <gabriel.luong@gmail.com>
Fri, 01 Sep 2017 10:47:11 -0400
changeset 427952 95089cbed4161a64d1016b1202be07067c6194ba
parent 427951 5cc81a8efe158d3ea9504251cb3563d1a474e4b6
child 427953 74b0ceebc6d142547b5c55c3d7b2550478c000c1
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
bugs1391003
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 1391003 - Use the new photon line selection and hover background colors in devtool. r=bgrins
devtools/client/debugger/new/debugger.css
devtools/client/inspector/markup/views/markup-container.js
devtools/client/jsonview/css/toolbar.css
devtools/client/netmonitor/src/assets/styles/netmonitor.css
devtools/client/shared/components/tree/tree-view.css
devtools/client/shared/test/browser_theme.js
devtools/client/shared/theme.js
devtools/client/shared/widgets/cubic-bezier.css
devtools/client/themes/animationinspector.css
devtools/client/themes/common.css
devtools/client/themes/dark-theme.css
devtools/client/themes/light-theme.css
devtools/client/themes/markup.css
devtools/client/themes/tooltips.css
devtools/client/themes/variables.css
devtools/client/themes/webconsole.css
--- a/devtools/client/debugger/new/debugger.css
+++ b/devtools/client/debugger/new/debugger.css
@@ -824,17 +824,17 @@ html .arrow.expanded svg {
 
 .managed-tree .tree .node.focused {
   color: white;
   background-color: var(--theme-selection-background);
   padding-bottom: 2px;
 }
 
 .theme-dark .managed-tree .tree .node.focused {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
   padding-bottom: 2px;
 }
 
 html:not([dir="rtl"]) .managed-tree .tree .node > div {
   margin-left: 10px;
 }
 
 html[dir="rtl"] .managed-tree .tree .node > div {
@@ -2194,17 +2194,17 @@ html[dir="rtl"] .editor-mount {
   height: auto;
 }
 
 .editor.hit-marker {
   height: 14px;
 }
 
 .editor-wrapper .highlight-lines {
-  background: var(--theme-selection-background-semitransparent);
+  background: var(--theme-selection-background-hover);
 }
 
 .coverage-on .CodeMirror-code :not(.hit-marker) .CodeMirror-line,
 .coverage-on .CodeMirror-code :not(.hit-marker) .CodeMirror-gutter-wrapper {
   opacity: 0.5;
 }
 
 .editor.new-breakpoint svg {
--- a/devtools/client/inspector/markup/views/markup-container.js
+++ b/devtools/client/inspector/markup/views/markup-container.js
@@ -619,27 +619,25 @@ MarkupContainer.prototype = {
    * Highlight the currently hovered tag + its closing tag if necessary
    * (that is if the tag is expanded)
    */
   set hovered(value) {
     this.tagState.classList.remove("flash-out");
     this._hovered = value;
     if (value) {
       if (!this.selected) {
-        this.tagState.classList.add("theme-bg-darker");
+        this.tagState.classList.add("tag-hover");
       }
       if (this.closeTagLine) {
-        this.closeTagLine.querySelector(".tag-state").classList.add(
-          "theme-bg-darker");
+        this.closeTagLine.querySelector(".tag-state").classList.add("tag-hover");
       }
     } else {
-      this.tagState.classList.remove("theme-bg-darker");
+      this.tagState.classList.remove("tag-hover");
       if (this.closeTagLine) {
-        this.closeTagLine.querySelector(".tag-state").classList.remove(
-          "theme-bg-darker");
+        this.closeTagLine.querySelector(".tag-state").classList.remove("tag-hover");
       }
     }
   },
 
   /**
    * True if the container is visible in the markup tree.
    */
   get visible() {
--- a/devtools/client/jsonview/css/toolbar.css
+++ b/devtools/client/jsonview/css/toolbar.css
@@ -33,11 +33,11 @@
 }
 
 .toolbar .btn:hover {
   background: var(--toolbarbutton-hover-background);
   border: var(--toolbarbutton-hover-border);
 }
 
 .toolbar .btn:not([disabled]):hover:active {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
 }
 
--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -737,17 +737,17 @@ body,
   color: var(--theme-selection-color);
 }
 
 .request-list-item:not(.selected).odd {
   background-color: var(--table-zebra-background);
 }
 
 .request-list-item:not(.selected):hover {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
 }
 
 .request-list-item.fromCache > .requests-list-column:not(.requests-list-waterfall) {
   opacity: 0.6;
 }
 
 .theme-firebug .request-list-item:not(.selected):hover {
   background: #EFEFEF;
--- a/devtools/client/shared/components/tree/tree-view.css
+++ b/devtools/client/shared/components/tree/tree-view.css
@@ -177,17 +177,17 @@
           transparent 80%);
 }
 
 /******************************************************************************/
 /* Themes */
 
 .theme-light .treeTable .treeRow:hover,
 .theme-dark .treeTable .treeRow:hover {
-  background-color: var(--theme-selection-background-semitransparent) !important;
+  background-color: var(--theme-selection-background-hover) !important;
 }
 
 .theme-firebug .treeTable .treeRow:hover {
   background-color: var(--theme-body-background);
 }
 
 .theme-light .treeTable .treeLabel,
 .theme-dark .treeTable .treeLabel {
--- a/devtools/client/shared/test/browser_theme.js
+++ b/devtools/client/shared/test/browser_theme.js
@@ -87,17 +87,17 @@ function testGetColor() {
 
   setTheme(originalTheme);
 }
 
 function testColorExistence() {
   const vars = [
     "body-background", "sidebar-background", "contrast-background",
     "tab-toolbar-background", "toolbar-background", "selection-background",
-    "selection-color", "selection-background-semitransparent", "splitter-color",
+    "selection-color", "selection-background-hover", "splitter-color",
     "comment", "body-color", "body-color-alt", "content-color1", "content-color2",
     "content-color3", "highlight-green", "highlight-blue", "highlight-bluegrey",
     "highlight-purple", "highlight-lightorange", "highlight-orange", "highlight-red",
     "highlight-pink"
   ];
 
   for (let type of vars) {
     ok(getColor(type, "light"), `${type} is a valid color in light theme`);
--- a/devtools/client/shared/theme.js
+++ b/devtools/client/shared/theme.js
@@ -11,17 +11,18 @@
 
 const Services = require("Services");
 
 const variableFileContents = require("raw!devtools/client/themes/variables.css");
 
 const THEME_SELECTOR_STRINGS = {
   light: ":root.theme-light {",
   dark: ":root.theme-dark {",
-  firebug: ":root.theme-firebug {"
+  firebug: ":root.theme-firebug {",
+  root: ":root {",
 };
 const THEME_PREF = "devtools.theme";
 
 /**
  * Takes a theme name and returns the contents of its variable rule block.
  * The first time this runs fetches the variables CSS file and caches it.
  */
 function getThemeFile(name) {
@@ -56,16 +57,24 @@ const getTheme = exports.getTheme = () =
  * current theme is if left unset. If theme not found, falls back to "light"
  * theme. Returns null if the type cannot be found for the theme given.
  */
 /* eslint-disable no-unused-vars */
 const getColor = exports.getColor = (type, theme) => {
   let themeName = theme || getTheme();
   let themeFile = getThemeFile(themeName);
   let match = themeFile.match(new RegExp("--theme-" + type + ": (.*);"));
+  let variableMatch = match ? match[1].match(/var\((.*)\)/) : null;
+
+  // Check if the match is a color variable and retrieve the value of the color variable
+  // if needed
+  if (variableMatch) {
+    themeFile = getThemeFile("root");
+    match = themeFile.match(new RegExp(`${variableMatch[1]}: (.*);`));
+  }
 
   // Return the appropriate variable in the theme, or otherwise, null.
   return match ? match[1] : null;
 };
 
 /**
  * Set the theme preference.
  */
--- a/devtools/client/shared/widgets/cubic-bezier.css
+++ b/devtools/client/shared/widgets/cubic-bezier.css
@@ -207,11 +207,11 @@
 }
 
 .cubic-bezier-container .preset:hover canvas {
   border-color: var(--theme-selection-background);
 }
 
 .cubic-bezier-container .active-preset canvas,
 .cubic-bezier-container .active-preset:hover canvas {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
   border-color: var(--theme-selection-background);
 }
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -332,16 +332,17 @@ body {
   z-index: 3;
   height: var(--toolbar-height);
   width: 100%;
   overflow: hidden;
 }
 
 .animation-timeline .time-body {
   top: var(--toolbar-height);
+  z-index: 3;
 }
 
 .progress-tick-container .progress-tick,
 .animation-timeline .time-body .time-tick {
   -moz-user-select: none;
   position: absolute;
   height: 100%;
 }
@@ -372,17 +373,17 @@ body {
 }
 
 /* Display animations' background colors to alternate. */
 .animation-timeline .animation:nth-child(2n+1) {
   background-color: var(--even-animation-timeline-background-color);
 }
 
 .animation-timeline .animation.selected {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
 }
 
 .animation-timeline .animation:last-child {
   margin-bottom: calc(var(--timeline-animation-height) / 2);
 }
 
 .animation-timeline .animation .target {
   width: var(--timeline-sidebar-width);
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -337,17 +337,17 @@ checkbox:-moz-focusring {
 .devtools-button:empty:not(:disabled):-moz-any(:hover:active,.checked),
 .devtools-toolbarbutton:not([label]):-moz-any([checked],[open],:hover:active) {
   background: var(--toolbarbutton-hover-background);
   border-color: var(--toolbarbutton-hover-border-color);
 }
 
 .devtools-button:not(:empty):not(.checked):not(:disabled):hover:active,
 .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:hover:active {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
 }
 
 .devtools-toolbarbutton:not([disabled])[label][checked=true],
 .devtools-toolbarbutton:not([disabled])[label][open],
 .devtools-button:not(:empty).checked,
 .theme-firebug .devtools-toolbarbutton[checked],
 .theme-firebug .devtools-toolbarbutton[open],
 .theme-firebug .devtools-button.checked:empty {
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -22,20 +22,16 @@ body {
   color: var(--theme-content-color1);
 }
 
 ::-moz-selection {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
-.theme-bg-darker {
-  background-color: var(--theme-selection-background-semitransparent);
-}
-
 .theme-selected,
 .CodeMirror-hint-active {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
 .theme-bg-contrast,
 .variable-or-property:not([overridden])[changed] {
@@ -53,17 +49,16 @@ body {
  * failures in debug builds.
  */
 .theme-link:visited,
 .cm-s-mozilla .cm-link:visited,
 .CodeMirror-Tern-type {
   color: var(--theme-highlight-blue);
 }
 
-
 .theme-comment,
 .cm-s-mozilla .cm-meta,
 .cm-s-mozilla .cm-hr,
 .cm-s-mozilla .cm-comment,
 .variable-or-property .token-undefined,
 .variable-or-property .token-null,
 .CodeMirror-Tern-completion-unknown:before {
   color: var(--theme-comment);
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -22,20 +22,16 @@ body {
   color: var(--theme-body-color);
 }
 
 ::-moz-selection {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
-.theme-bg-darker {
-  background: var(--theme-selection-background-semitransparent);
-}
-
 .theme-selected,
 .CodeMirror-hint-active {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
 .theme-bg-contrast,
 .variable-or-property:not([overridden])[changed] {
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -170,16 +170,21 @@ ul.children + .tag-line::before {
 .tag-line .tag-state {
   position: absolute;
   left: -1000em;
   right: 0;
   height: 100%;
   z-index: 0;
 }
 
+.tag-line .tag-hover:not(.theme-selected) {
+  background: var(--theme-selection-background-hover);
+  z-index: -1;
+}
+
 .expander {
   display: inline-block;
   margin-left: -14px;
   vertical-align: middle;
   /* Make sure the expander still appears above the tag-state */
   position: relative;
   z-index: 1;
 }
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -391,17 +391,17 @@
 
 .stack-frame-call {
   color: var(--theme-body-color-alt);
   cursor: pointer;
   display: flex;
 }
 
 .stack-frame-call:hover {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
 }
 
 .stack-frame-async {
   color: var(--theme-body-color-inactive);
 }
 
 .stack-frame-function-name {
   color: var(--theme-highlight-blue);
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -20,18 +20,18 @@
   --theme-contrast-background: #e6b064;
 
   --theme-tab-toolbar-background: #fcfcfc;
   --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: #4c9ed9;
-  --theme-selection-background-semitransparent: rgba(76, 158, 217, 0.15);
+  --theme-selection-background: var(--blue-55);
+  --theme-selection-background-hover: #F0F9FE;
   --theme-selection-color: #f5f7fa;
   --theme-splitter-color: #dde1e4;
   --theme-comment: #696969;
   --theme-comment-alt: #ccd1d5;
 
   --theme-body-color: #393f4c;
   --theme-body-color-alt: #585959;
   --theme-body-color-inactive: #999797;
@@ -88,18 +88,18 @@
   --theme-contrast-background: #ffb35b;
 
   --theme-tab-toolbar-background: #272b35;
   --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: #5675B9;
-  --theme-selection-background-semitransparent: rgba(86, 117, 185, 0.5);
+  --theme-selection-background: #204E8A;
+  --theme-selection-background-hover: #353B48;
   --theme-selection-color: #f5f7fa;
   --theme-splitter-color: #454d5d;
   --theme-comment: #757873;
   --theme-comment-alt: #5a6375;
 
   --theme-body-color: #8fa1b2;
   --theme-body-color-alt: #b6babf;
   --theme-body-color-inactive: #8fa1b2;
@@ -154,17 +154,17 @@
   --theme-body-background: #fff;
   --theme-sidebar-background: #fcfcfc;
   --theme-contrast-background: #e6b064;
 
   --theme-tab-toolbar-background: rgb(240, 240, 240) linear-gradient(rgba(255, 255, 255, 0.8), transparent);
   --theme-toolbar-background: rgb(240, 240, 240) linear-gradient(rgba(255, 255, 255, 0.8), transparent);
   --theme-toolbar-tab-selected-background: rgb(253, 253, 253);
   --theme-selection-background: #3399ff;
-  --theme-selection-background-semitransparent: rgba(128,128,128,0.2);
+  --theme-selection-background-hover: rgba(128,128,128,0.2);
   --theme-selection-color: white;
   --theme-splitter-color: #bfbfbf;
   --theme-comment: darkgreen;
 
   --theme-body-color: #252525;
   --theme-body-color-alt: #585959;
   --theme-content-color1: #292e33;
   --theme-content-color2: #8fa1b2;
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -625,17 +625,17 @@ a.learn-more-link.webconsole-learn-more-
   -moz-box-orient: horizontal;
   padding: 0;
 }
 
 .devtools-toolbarbutton[type=menu-button] {
   padding: 0 1px;
   -moz-box-align: stretch;
   --toolbarbutton-checked-color: var(--theme-body-color);
-  --toolbarbutton-checked-background: var(--theme-selection-background-semitransparent);
+  --toolbarbutton-checked-background: var(--theme-selection-background-hover);
 }
 
 .devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
   margin-inline-end: 4px;
 }
 
 .devtools-menulist > .menulist-dropmarker {
   -moz-appearance: none;