Bug 1393385 - Update about:preferences category menu to match the spec r=jaws

--HG--
extra : rebase_source : e01fc7a0004d5d14716347837ed74b6daf26ab44

browser/themes/shared/incontentprefs/preferences.inc.css

@@ -655,6 +655,7 @@ separator.thin:not([orient="vertical"]) {
 .help-button:visited {
   color: var(--in-content-category-text);
   text-decoration: none;
+  border-radius: 2px;
 }
 
 .face-sad {

toolkit/themes/shared/in-content/common.inc.css

@@ -22,9 +22,14 @@
   --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: rgba(12,12,13,0.8);
+  --in-content-category-text-active: #0c0c0d;
   --in-content-category-text-selected: #0a84ff;
-  --in-content-category-hover: rgba(12,12,13,0.1);
+  --in-content-category-text-selected-active: #0060df;
+  --in-content-category-background-hover: rgba(12,12,13,0.1);
+  --in-content-category-background-active: rgba(12,12,13,0.15);
+  --in-content-category-background-selected-hover: rgba(12,12,13,0.15);
+  --in-content-category-background-selected-active: rgba(12,12,13,0.2);
   --in-content-tab-color: #424f5a;
   --in-content-link-color: #0a84ff;
   --in-content-link-color-hover: #0060df;
@@ -655,7 +660,12 @@ xul|*.radio-label-box {
 }
 
 *|*.category:hover {
-  background-color: var(--in-content-category-hover);
+  background-color: var(--in-content-category-background-hover);
+  border-radius: 2px;
+}
+
+*|*.category:hover:active {
+  background-color: var(--in-content-category-background-active);
 }
 
 *|*.category[selected],
@@ -664,6 +674,17 @@ xul|*.radio-label-box {
   background: none;
 }
 
+*|*.category[selected]:hover,
+*|*.category.selected:hover {
+  background-color: var(--in-content-category-background-selected-hover);
+}
+
+*|*.category[selected]:hover:active,
+*|*.category.selected:hover:active {
+  color: var(--in-content-category-text-selected-active);
+  background-color: var(--in-content-category-background-selected-active);
+}
+
 *|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] {
   border: var(--in-content-category-border-focus);
   border-inline-start: none;