From 4220adbc69dd357aaadeda8142def01624f06b79 Mon Sep 17 00:00:00 2001
From: Gabriel Luong <gabriel.luong@gmail.com>
Date: Fri, 1 Sep 2017 10:47:11 -0400
Subject: [PATCH] Bug 1391003 - Use the new photon line selection and hover
 background colors in devtool. r=bgrins

---
 devtools/client/debugger/new/debugger.css              |  4 ++--
 .../client/inspector/markup/views/markup-container.js  | 10 ++++------
 devtools/client/jsonview/css/toolbar.css               |  2 +-
 .../client/netmonitor/src/assets/styles/netmonitor.css |  2 +-
 devtools/client/shared/components/tree/tree-view.css   |  2 +-
 devtools/client/shared/test/browser_theme.js           |  2 +-
 devtools/client/shared/widgets/cubic-bezier.css        |  2 +-
 devtools/client/themes/animationinspector.css          |  3 ++-
 devtools/client/themes/common.css                      |  2 +-
 devtools/client/themes/dark-theme.css                  |  5 -----
 devtools/client/themes/light-theme.css                 |  4 ----
 devtools/client/themes/markup.css                      |  5 +++++
 devtools/client/themes/tooltips.css                    |  2 +-
 devtools/client/themes/variables.css                   | 10 +++++-----
 devtools/client/themes/webconsole.css                  |  2 +-
 15 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/devtools/client/debugger/new/debugger.css b/devtools/client/debugger/new/debugger.css
index 73a8eab186f6..84171bea14c5 100644
--- a/devtools/client/debugger/new/debugger.css
+++ b/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,
diff --git a/devtools/client/inspector/markup/views/markup-container.js b/devtools/client/inspector/markup/views/markup-container.js
index d2a449481b4d..71a62b0fa45f 100644
--- a/devtools/client/inspector/markup/views/markup-container.js
+++ b/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");
       }
     }
   },
diff --git a/devtools/client/jsonview/css/toolbar.css b/devtools/client/jsonview/css/toolbar.css
index 7efe85e44b2c..7dbedf031c53 100644
--- a/devtools/client/jsonview/css/toolbar.css
+++ b/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);
 }
 
diff --git a/devtools/client/netmonitor/src/assets/styles/netmonitor.css b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
index cda03ac63921..b1b4cc618272 100644
--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/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) {
diff --git a/devtools/client/shared/components/tree/tree-view.css b/devtools/client/shared/components/tree/tree-view.css
index ff56bc1c60c9..a6a19bd62438 100644
--- a/devtools/client/shared/components/tree/tree-view.css
+++ b/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 {
diff --git a/devtools/client/shared/test/browser_theme.js b/devtools/client/shared/test/browser_theme.js
index 6e0fb913b28d..ba25eb365111 100644
--- a/devtools/client/shared/test/browser_theme.js
+++ b/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",
diff --git a/devtools/client/shared/widgets/cubic-bezier.css b/devtools/client/shared/widgets/cubic-bezier.css
index 7a808dc86222..27c96f73c62b 100644
--- a/devtools/client/shared/widgets/cubic-bezier.css
+++ b/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);
 }
diff --git a/devtools/client/themes/animationinspector.css b/devtools/client/themes/animationinspector.css
index 39a8f1c7842c..97eb1decb42b 100644
--- a/devtools/client/themes/animationinspector.css
+++ b/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 {
diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css
index 50c53e8cf8f7..95abea02224b 100644
--- a/devtools/client/themes/common.css
+++ b/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],
diff --git a/devtools/client/themes/dark-theme.css b/devtools/client/themes/dark-theme.css
index 3b57a2cea5a3..2665864a9b54 100644
--- a/devtools/client/themes/dark-theme.css
+++ b/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,
diff --git a/devtools/client/themes/light-theme.css b/devtools/client/themes/light-theme.css
index 25e5ee5f7507..eb99c1f5b416 100644
--- a/devtools/client/themes/light-theme.css
+++ b/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);
diff --git a/devtools/client/themes/markup.css b/devtools/client/themes/markup.css
index 823681cc6800..ee5fca8de247 100644
--- a/devtools/client/themes/markup.css
+++ b/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;
diff --git a/devtools/client/themes/tooltips.css b/devtools/client/themes/tooltips.css
index e5db9735d8ea..5ab07f2bc8b4 100644
--- a/devtools/client/themes/tooltips.css
+++ b/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 {
diff --git a/devtools/client/themes/variables.css b/devtools/client/themes/variables.css
index 4f42b57af7e5..56788d839e14 100644
--- a/devtools/client/themes/variables.css
+++ b/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;
diff --git a/devtools/client/themes/webconsole.css b/devtools/client/themes/webconsole.css
index bf38d00fc01e..4e55e233bac0 100644
--- a/devtools/client/themes/webconsole.css
+++ b/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 {