Bug 1401442 - Add a hbox to orient help button's icon and text horizontally and match the visual spec. draft
authorEvan Tseng <evan@tseng.io>
Tue, 07 Nov 2017 15:54:34 +0800
changeset 693992 ff9fcf9a72dab9c753e65f076fa3f56924b058ad
parent 693830 c2fe4b3b1b930b3e7fdb84eae44cec165394f322
child 739224 b52bc0363f9cb7915cefb6728018d80ed88ba95b
push id88010
push userbmo:evan@tseng.io
push dateTue, 07 Nov 2017 08:06:09 +0000
bugs1401442
milestone58.0a1
Bug 1401442 - Add a hbox to orient help button's icon and text horizontally and match the visual spec. MozReview-Commit-ID: AFuVTqLodZU
browser/components/preferences/in-content/preferences.xul
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/components/preferences/in-content/preferences.xul
+++ b/browser/components/preferences/in-content/preferences.xul
@@ -171,17 +171,19 @@
           <label class="category-name" flex="1">&paneSync1.title;</label>
         </richlistitem>
       </richlistbox>
 
       <spacer flex="1"/>
 
       <hbox class="help-button" pack="center">
         <label class="text-link">
-          <image class="help-icon"/><label class="help-label" flex="1">&helpButton2.label;</label>
+          <hbox align="center">
+            <image class="help-icon"/><label class="help-label" flex="1">&helpButton2.label;</label>
+          </hbox>
         </label>
       </hbox>
     </vbox>
 
     <keyset>
       <key key="&focusSearch1.key;" modifiers="accel" id="focusSearch1" oncommand="gSearchResultsPane.searchInput.focus();"/>
     </keyset>
 
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -659,16 +659,17 @@ button > hbox > label {
 }
 
 .help-icon:hover {
   fill: currentColor !important;
 }
 
 .help-label {
   margin: 0 4px;
+  line-height: 22px;
   -moz-user-select: none;
 }
 
 @media (max-width: 830px) {
   .help-button > .text-link {
     -moz-box-flex: 0;
     width: 36px;
     height: 36px;