Bug 1391003 - Use the new photon line selection and hover background colors in devtool. r=bgrins

devtools/client/debugger/new/debugger.css

@@ -829,7 +829,7 @@ html .arrow.expanded svg {
 }
 
 .theme-dark .managed-tree .tree .node.focused {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
   padding-bottom: 2px;
 }
 
@@ -2199,7 +2199,7 @@ html[dir="rtl"] .editor-mount {
 }
 
 .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,

devtools/client/inspector/markup/views/markup-container.js

@@ -624,17 +624,15 @@ MarkupContainer.prototype = {
     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");
       }
     }
   },

devtools/client/jsonview/css/toolbar.css

@@ -38,6 +38,6 @@
 }
 
 .toolbar .btn:not([disabled]):hover:active {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
 }
 

devtools/client/netmonitor/src/assets/styles/netmonitor.css

@@ -742,7 +742,7 @@ body,
 }
 
 .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) {

devtools/client/shared/components/tree/tree-view.css

@@ -182,7 +182,7 @@
 
 .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 {

devtools/client/shared/test/browser_theme.js

@@ -92,7 +92,7 @@ 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",

devtools/client/shared/widgets/cubic-bezier.css

@@ -212,6 +212,6 @@
 
 .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);
 }

devtools/client/themes/animationinspector.css

@@ -337,6 +337,7 @@ body {
 
 .animation-timeline .time-body {
   top: var(--toolbar-height);
+  z-index: 3;
 }
 
 .progress-tick-container .progress-tick,
@@ -377,7 +378,7 @@ body {
 }
 
 .animation-timeline .animation.selected {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
 }
 
 .animation-timeline .animation:last-child {

devtools/client/themes/common.css

@@ -342,7 +342,7 @@ checkbox:-moz-focusring {
 
 .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/client/themes/dark-theme.css

@@ -27,10 +27,6 @@ body {
   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);
@@ -58,7 +54,6 @@ body {
   color: var(--theme-highlight-blue);
 }
 
-
 .theme-comment,
 .cm-s-mozilla .cm-meta,
 .cm-s-mozilla .cm-hr,

devtools/client/themes/light-theme.css

@@ -27,10 +27,6 @@ body {
   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);

devtools/client/themes/markup.css

@@ -175,6 +175,11 @@ ul.children + .tag-line::before {
   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;

devtools/client/themes/tooltips.css

@@ -396,7 +396,7 @@
 }
 
 .stack-frame-call:hover {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
 }
 
 .stack-frame-async {

devtools/client/themes/variables.css

@@ -25,8 +25,8 @@
   --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;
@@ -93,8 +93,8 @@
   --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;
@@ -159,7 +159,7 @@
   --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;

devtools/client/themes/webconsole.css

@@ -630,7 +630,7 @@ a.learn-more-link.webconsole-learn-more-link {
   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 {