Bug 1401442 - Add a hbox to orient help button's icon and text horizontally and match the visual spec. r=jaws
authorEvan Tseng <evan@tseng.io>
Tue, 07 Nov 2017 15:54:34 +0800
changeset 391233 2b35a13be86780ce10c421a97e02712438163f21
parent 391232 0596dafd4d06b0760842b09354120945329929d6
child 391234 efbc0ed871b56804ba361b8d236e448103b7f529
push id55152
push userryanvm@gmail.com
push dateFri, 10 Nov 2017 15:57:49 +0000
treeherderautoland@2b35a13be867 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1401442
milestone58.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1401442 - Add a hbox to orient help button's icon and text horizontally and match the visual spec. r=jaws 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;