Bug 1393415 - Highlight help icon in high contrast theme r=jaws

MozReview-Commit-ID: ByEZKJzhIUM

--HG--
extra : rebase_source : 8a6181ddea120b2f4b8ea16d21d51a3fc9e65cb3

browser/components/preferences/in-content/preferences.xul

@@ -175,7 +175,10 @@
       <key key="&focusSearch1.key;" modifiers="accel" id="focusSearch1" oncommand="gSearchResultsPane.searchInput.focus();"/>
     </keyset>
 
-    <html:a class="help-button" target="_blank" aria-label="&helpButton2.label;">&helpButton2.label;</html:a>
+    <html:a class="help-button" target="_blank" aria-label="&helpButton2.label;">
+      <html:img class="help-icon" src="chrome://global/skin/icons/help.svg"/>
+      <html:span class="help-label">&helpButton2.label;</html:span>
+    </html:a>
 
     <vbox class="main-content" flex="1" align="start">
       <vbox class="pane-container">

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

@@ -611,16 +611,14 @@ button > hbox > label {
   position: fixed;
   left: 0;
   bottom: 36px;
-  background-image: url("chrome://global/skin/icons/help.svg");
+  background-image: none;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   line-height: 22px;
   height: unset;
   min-height: 36px;
   width: 168px;
-  background-position: left 10px center;
-  background-size: 16px;
-  padding-inline-start: 38px;
+  padding-inline-start: 18px;
   margin-inline-start: 34px;
 }
 
@@ -641,6 +639,28 @@ button > hbox > label {
   border-radius: 2px;
 }
 
+.help-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.help-label {
+  margin: 0 14px;
+}
+
+@media (max-width: 830px) {
+  .help-button {
+    width: 36px;
+    padding: 0;
+    justify-content: center;
+    margin-inline-start: 40px;
+  }
+
+  .help-label {
+    display: none;
+  }
+}
+
 .face-sad {
   list-style-image: url("chrome://browser/skin/preferences/in-content/face-sad.svg");
   width: 20px;

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

@@ -692,7 +692,6 @@ xul|*.radio-label-box {
 
 *|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] {
   border: var(--in-content-category-border-focus);
-  border-inline-start: none;
 }
 
 *|*.category-name {
@@ -729,14 +728,6 @@ xul|*.radio-label-box {
     margin-inline-end: 35px;
   }
 
-  .help-button {
-    font-size: 0 !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;