Bug 1262829 - added a hover state to light/dark themes and change color scheme for device selector; r=jryans
authorJaideep Bhoosreddy <jaideepb@buffalo.edu>
Wed, 01 Jun 2016 10:56:00 +0200
changeset 341079 585d451b7795f473a253dce05369b909723d789e
parent 341078 58ae8bb46ffd90633f1fc824cea2b8b6007d3cfc
child 341080 b8e12688a664c7d44e630df66e9548381b93bd63
push id1183
push userraliiev@mozilla.com
push dateMon, 05 Sep 2016 20:01:49 +0000
treeherdermozilla-release@3148731bed45 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjryans
bugs1262829
milestone49.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 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
devtools/client/responsive.html/index.css
--- a/devtools/client/responsive.html/images/select-arrow.svg
+++ b/devtools/client/responsive.html/images/select-arrow.svg
@@ -3,27 +3,35 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
   <defs>
     <style>
       use:not(:target) {
         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>
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -4,28 +4,36 @@
 /**
  * CSS Variables specific to the responsive design mode
  */
 
 .theme-light {
   --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");
 }
 
 .theme-dark {
   --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");
 }
 
 * {
   box-sizing: border-box;
 }
 
@@ -168,43 +176,50 @@ html, body {
 .viewport-device-selector {
   -moz-appearance: none;
   background-color: var(--theme-toolbar-background);
   background-image: var(--viewport-selection-arrow);
   background-position: 136px;
   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;
   text-overflow: ellipsis;
   width: 150px;
 }
 
 .viewport-device-selector.selected {
   background-image: var(--viewport-selection-arrow-selected);
   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;
 }
 
 .viewport-rotate-button::before {
   background-image: url("./images/rotate-viewport.svg");
 }