From c5b36455dcd1d8b573a72bb91d96d451e4abd0ab Mon Sep 17 00:00:00 2001
From: Evan Tseng <evan@tseng.io>
Date: Fri, 11 Aug 2017 11:58:11 +0800
Subject: [PATCH] Bug 1388997 - Add hover effects for menu list to match Photon
 visual spec. r=jaws

MozReview-Commit-ID: 5EmyvOM09fV

--HG--
extra : rebase_source : c635adfacbf2dc8432e5289e7a95dc28c520c906
---
 .../shared/incontentprefs/preferences.inc.css | 14 +++++++-------
 .../shared/extensions/extensions.inc.css      |  4 ----
 .../themes/shared/in-content/common.inc.css   | 19 ++++++++++++++-----
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/browser/themes/shared/incontentprefs/preferences.inc.css b/browser/themes/shared/incontentprefs/preferences.inc.css
index 359e57b94228..8fbf67d8060e 100644
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -631,25 +631,25 @@ separator.thin:not([orient="vertical"]) {
   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,
diff --git a/toolkit/themes/shared/extensions/extensions.inc.css b/toolkit/themes/shared/extensions/extensions.inc.css
index 76905bd35bd8..bbd1c95859b7 100644
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -152,10 +152,6 @@ button.warning {
   padding-top: 0;
 }
 
-.category[selected="true"]:hover {
-  color: #0060df;
-}
-
 .category[disabled] {
   overflow: hidden;
   height: 0;
diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css
index 3f92b539ad29..10c4b368efeb 100644
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -25,6 +25,7 @@
   --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;
@@ -339,6 +340,7 @@ html|*.help-button:hover {
   fill: white;
   stroke: #808080;
   stroke-opacity: 1;
+  background-color: var(--in-content-category-hover);
 }
 
 html|*.help-button:hover:active {
@@ -640,18 +642,23 @@ xul|*.radio-label-box {
   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);
@@ -694,14 +701,16 @@ xul|*.radio-label-box {
   }
 
   .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 {