Bug 1388997 - Add hover effects for menu list to match Photon visual spec. draft
authorEvan Tseng <evan@tseng.io>
Fri, 11 Aug 2017 11:58:11 +0800
changeset 649734 7f3e05c6b5a66f7f45d6d49d11895acae5920143
parent 649646 ea10b09efae8a00314def0d51c0f681348aebdba
child 727167 9cc654927a4f7cb48b7e59c84743f337305b1748
push id75127
push userbmo:evan@tseng.io
push dateMon, 21 Aug 2017 07:31:20 +0000
bugs1388997
milestone57.0a1
Bug 1388997 - Add hover effects for menu list to match Photon visual spec. MozReview-Commit-ID: 5EmyvOM09fV
browser/themes/shared/incontentprefs/preferences.inc.css
toolkit/themes/shared/extensions/extensions.inc.css
toolkit/themes/shared/in-content/common.inc.css
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -626,35 +626,35 @@ separator.thin:not([orient="vertical"]) 
 
 .help-button {
   position: fixed;
   left: 0;
   bottom: 36px;
   background-image: url("chrome://global/skin/icons/help.svg");
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
-  fill-opacity: 0.8;
   font-size: 13px;
-  line-height: 16px;
-  height: 16px;
-  background-position: 8px;
+  line-height: 36px;
+  height: 36px;
+  width: 168px;
+  background-position: left 10px top 10px;
+  background-size: 16px;
   padding-inline-start: 38px;
-  margin-inline-start: 44px;
+  margin-inline-start: 34px;
   white-space: nowrap;
 }
 
 .help-button:-moz-locale-dir(rtl) {
-  background-position: right 8px top 0;
+  background-position: right 10px top 10px;
   left: auto;
   right: 0;
 }
 
 .help-button:hover {
   fill: currentColor;
-  fill-opacity: 0.9;
 }
 
 .help-button:link,
 .help-button:visited {
   color: var(--in-content-category-text);
   text-decoration: none;
 }
 
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -147,20 +147,16 @@ button.warning {
 
 
 /*** category selector ***/
 
 #categories {
   padding-top: 0;
 }
 
-.category[selected="true"]:hover {
-  color: #0060df;
-}
-
 .category[disabled] {
   overflow: hidden;
   height: 0;
   min-height: 0;
   opacity: 0;
   transition-property: min-height, opacity;
   transition-duration: 1s, 0.8s;
 }
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -20,16 +20,17 @@
   --in-content-item-hover: rgba(0,149,221,0.25);
   --in-content-item-selected: #0a84ff;
   --in-content-border-highlight: #0a84ff;
   --in-content-border-focus: #0a84ff;
   --in-content-border-color: #d7d7db;
   --in-content-category-border-focus: 1px dotted #0a84ff;
   --in-content-category-text: #0c0c0d;
   --in-content-category-text-selected: #0a84ff;
+  --in-content-category-hover: rgba(12,12,13,0.1);
   --in-content-tab-color: #424f5a;
   --in-content-link-color: #0a84ff;
   --in-content-link-color-hover: #0060df;
   --in-content-link-color-active: #ff9500;
   --in-content-link-color-visited: #551a8b;
   --in-content-primary-button-background: #0a84ff;
   --in-content-primary-button-background-hover: #0060df;
   --in-content-primary-button-background-active: #003EAA;
@@ -334,16 +335,17 @@ html|*.help-button {
   background-position: center center;
   background-size: contain;
 }
 
 html|*.help-button:hover {
   fill: white;
   stroke: #808080;
   stroke-opacity: 1;
+  background-color: var(--in-content-category-hover);
 }
 
 html|*.help-button:hover:active {
   stroke: #666;
 }
 
 xul|*.spinbuttons-button {
   min-height: initial;
@@ -635,28 +637,33 @@ xul|*.radio-label-box {
 /* Category List */
 
 *|*#categories {
   -moz-appearance: none;
   background-color: initial; /* override the background-color set on all richlistboxes in common.inc.css */
   padding-top: 70px;
   margin: 0;
   border-width: 0;
+  width: 240px;
 }
 
 *|*.category {
-  width: 240px;
   min-height: 48px;
   -moz-appearance: none;
   color: var(--in-content-category-text);
-  padding-inline-start: 44px;
+  margin-inline-start: 34px;
   padding-inline-end: 10px;
+  padding-inline-start: 10px;
   transition: background-color 150ms;
 }
 
+*|*.category:hover {
+  background-color: var(--in-content-category-hover);
+}
+
 *|*.category[selected],
 *|*.category.selected {
   color: var(--in-content-category-text-selected);
   background: none;
 }
 
 *|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] {
   border: var(--in-content-category-border-focus);
@@ -689,24 +696,26 @@ xul|*.radio-label-box {
     width: 118px;
   }
 
   .category-icon ~ .category-name {
     display: none;
   }
 
   .category {
-    padding-inline-start: 47px; /* make category icons align center */
+    padding-inline-start: 13px; /* make category icons align center */
+    margin-inline-end: 40px;
   }
 
   .help-button {
     font-size: 0 !important;
-    margin-inline-start: 51px !important; /* make the question mark icon align center */
-    background-position: 0px !important;
+    margin-inline-start: 41px !important; /* make the question mark icon align center */
+    background-position: 10px !important;
     padding-inline-start: 0px !important;
+    width: 36px !important;
   }
 
   .main-content {
     padding-left: 0;
     padding-right: 0;
   }
 
   .pane-container {