Bug 1262829 - added a hover state to light/dark themes and change color scheme for device selector; r=jryans

devtools/client/responsive.html/images/select-arrow.svg

@@ -8,22 +8,30 @@
         display: none;
       }
       #light {
-        fill: #dde1e4; /* --theme-splitter-color */
+        fill: #999797;
       }
-      #light-selected {
+      #light-hovered {
         fill: #393f4c; /* --theme-body-color */
       }
+      #light-selected {
+        fill: #3b3b3b;
+      }
       #dark {
-        fill: #8fa1b2; /* --theme-body-color */
+        fill: #c6ccd0;
+      }
+      #dark-hovered {
+        fill: #dde1e4;
       }
       #dark-selected {
-        fill: #f5f7fa; /* --theme-selection-color */
+        fill: #fcfcfc;
       }
     </style>
     <path id="base-path" d="M7.9 16.3c-.3 0-.6-.1-.8-.4l-4-4.8c-.2-.3-.3-.5-.1-.8.1-.3.5-.3.9-.3h8c.4 0 .7 0 .9.3.2.4.1.6-.1.9l-4 4.8c-.2.3-.5.3-.8.3zM7.8 0c.3 0 .6.1.7.4L12.4 5c.2.3.3.4.1.7-.1.4-.5.3-.8.3H3.9c-.4 0-.8.1-.9-.2-.2-.4-.1-.6.1-.9L7 .3c.2-.3.5-.3.8-.3z"/>
   </defs>
   <use xlink:href="#base-path" id="light"/>
+  <use xlink:href="#base-path" id="light-hovered"/>
   <use xlink:href="#base-path" id="light-selected"/>
   <use xlink:href="#base-path" id="dark"/>
+  <use xlink:href="#base-path" id="dark-hovered"/>
   <use xlink:href="#base-path" id="dark-selected"/>
 </svg>

devtools/client/responsive.html/index.css

@@ -9,8 +9,12 @@
   --rdm-box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
   --submit-button-active-background-color: rgba(0,0,0,0.12);
   --submit-button-active-color: var(--theme-body-color);
-  --viewport-active-color: var(--theme-body-color);
+  --viewport-color: #999797;
+  --viewport-hover-color: var(--theme-body-color);
+  --viewport-active-color: #3b3b3b;
   --viewport-selection-arrow: url("./images/select-arrow.svg#light");
+  --viewport-selection-arrow-hovered:
+    url("./images/select-arrow.svg#light-hovered");
   --viewport-selection-arrow-selected:
     url("./images/select-arrow.svg#light-selected");
 }
@@ -19,8 +23,12 @@
   --rdm-box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26);
   --submit-button-active-background-color: var(--toolbar-tab-hover-active);
   --submit-button-active-color: var(--theme-selection-color);
-  --viewport-active-color: var(--theme-selection-color);
+  --viewport-color: #c6ccd0;
+  --viewport-hover-color: #dde1e4;
+  --viewport-active-color: #fcfcfc;
   --viewport-selection-arrow: url("./images/select-arrow.svg#dark");
+  --viewport-selection-arrow-hovered:
+    url("./images/select-arrow.svg#dark-hovered");
   --viewport-selection-arrow-selected:
     url("./images/select-arrow.svg#dark-selected");
 }
@@ -173,7 +181,7 @@ html, body {
   background-repeat: no-repeat;
   background-size: 7px;
   border: none;
-  color: var(--theme-body-color-inactive);
+  color: var(--viewport-color);
   height: 100%;
   padding: 0 16px 0 0;
   text-align: center;
@@ -186,20 +194,27 @@ html, body {
   color: var(--viewport-active-color);
 }
 
+.viewport-device-selector:hover {
+  background-image: var(--viewport-selection-arrow-hovered);
+  color: var(--viewport-hover-color);
+}
+
 .viewport-device-selector:focus {
   background-image: var(--viewport-selection-arrow-selected);
-  /* Remove the outline from the select box */
-  color: transparent;
-  text-shadow: 0 0 0 var(--viewport-active-color);
+  color: var(--viewport-active-color);
 }
 
 .viewport-device-selector > option {
-  background-color: var(--theme-toolbar-background);
-  color: var(--viewport-active-color);
   text-align: left;
   padding: 5px 10px;
 }
 
+.viewport-device-selector > option,
+.viewport-device-selector > option:hover,
+.viewport-device-selector:hover > option:hover {
+  color: var(--viewport-active-color);
+}
+
 .viewport-rotate-button {
   position: absolute;
   right: 0;