Bug 1384566 - Fix incorrect tooltip position by wrapping hbox r=mconley
authorRicky Chien <ricky060709@gmail.com>
Fri, 28 Jul 2017 08:28:26 +0800
changeset 420488 78b337ef1476d54e06be6691b64a4583bf05346d
parent 420487 7af941648ca6696d49cbeb5f37b7c81b9292e824
child 420489 114785959b0c805b921d3cbe1384caa850914339
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs1384566
milestone56.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 1384566 - Fix incorrect tooltip position by wrapping hbox r=mconley MozReview-Commit-ID: 8R8q4JQCe4w
browser/components/preferences/fonts.xul
browser/components/preferences/in-content-new/findInPage.js
browser/components/preferences/in-content-new/main.xul
browser/components/preferences/in-content-new/privacy.xul
browser/components/preferences/in-content-new/search.xul
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/components/preferences/fonts.xul
+++ b/browser/components/preferences/fonts.xul
@@ -39,50 +39,53 @@
     <script type="application/javascript" src="chrome://browser/content/preferences/fonts.js"/>
 
     <!-- Fonts for: [ Language ] -->
     <groupbox>
       <caption>
         <hbox align="center">
           <label accesskey="&language.accesskey;" control="selectLangs">&language.label;</label>
         </hbox>
-        <menulist id="selectLangs" preference="font.language.group"
-                  onsyncfrompreference="return gFontsDialog.readFontLanguageGroup();">
-          <menupopup>
-            <menuitem value="ar"              label="&font.langGroup.arabic;"/>
-            <menuitem value="x-armn"          label="&font.langGroup.armenian;"/>
-            <menuitem value="x-beng"          label="&font.langGroup.bengali;"/>
-            <menuitem value="zh-CN"           label="&font.langGroup.simpl-chinese;"/>
-            <menuitem value="zh-HK"           label="&font.langGroup.trad-chinese-hk;"/>
-            <menuitem value="zh-TW"           label="&font.langGroup.trad-chinese;"/>
-            <menuitem value="x-cyrillic"      label="&font.langGroup.cyrillic;"/>
-            <menuitem value="x-devanagari"    label="&font.langGroup.devanagari;"/>
-            <menuitem value="x-ethi"          label="&font.langGroup.ethiopic;"/>
-            <menuitem value="x-geor"          label="&font.langGroup.georgian;"/>
-            <menuitem value="el"              label="&font.langGroup.el;"/>
-            <menuitem value="x-gujr"          label="&font.langGroup.gujarati;"/>
-            <menuitem value="x-guru"          label="&font.langGroup.gurmukhi;"/>
-            <menuitem value="he"              label="&font.langGroup.hebrew;"/>
-            <menuitem value="ja"              label="&font.langGroup.japanese;"/>
-            <menuitem value="x-knda"          label="&font.langGroup.kannada;"/>
-            <menuitem value="x-khmr"          label="&font.langGroup.khmer;"/>
-            <menuitem value="ko"              label="&font.langGroup.korean;"/>
-            <menuitem value="x-western"       label="&font.langGroup.latin;"/>
-            <menuitem value="x-mlym"          label="&font.langGroup.malayalam;"/>
-            <menuitem value="x-math"          label="&font.langGroup.math;"/>
-            <menuitem value="x-orya"          label="&font.langGroup.odia;"/>
-            <menuitem value="x-sinh"          label="&font.langGroup.sinhala;"/>
-            <menuitem value="x-tamil"         label="&font.langGroup.tamil;"/>
-            <menuitem value="x-telu"          label="&font.langGroup.telugu;"/>
-            <menuitem value="th"              label="&font.langGroup.thai;"/>
-            <menuitem value="x-tibt"          label="&font.langGroup.tibetan;"/>
-            <menuitem value="x-cans"          label="&font.langGroup.canadian;"/>
-            <menuitem value="x-unicode"       label="&font.langGroup.other;"/>
-          </menupopup>
-        </menulist>
+        <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+        <hbox>
+          <menulist id="selectLangs" preference="font.language.group"
+                    onsyncfrompreference="return gFontsDialog.readFontLanguageGroup();">
+            <menupopup>
+              <menuitem value="ar"              label="&font.langGroup.arabic;"/>
+              <menuitem value="x-armn"          label="&font.langGroup.armenian;"/>
+              <menuitem value="x-beng"          label="&font.langGroup.bengali;"/>
+              <menuitem value="zh-CN"           label="&font.langGroup.simpl-chinese;"/>
+              <menuitem value="zh-HK"           label="&font.langGroup.trad-chinese-hk;"/>
+              <menuitem value="zh-TW"           label="&font.langGroup.trad-chinese;"/>
+              <menuitem value="x-cyrillic"      label="&font.langGroup.cyrillic;"/>
+              <menuitem value="x-devanagari"    label="&font.langGroup.devanagari;"/>
+              <menuitem value="x-ethi"          label="&font.langGroup.ethiopic;"/>
+              <menuitem value="x-geor"          label="&font.langGroup.georgian;"/>
+              <menuitem value="el"              label="&font.langGroup.el;"/>
+              <menuitem value="x-gujr"          label="&font.langGroup.gujarati;"/>
+              <menuitem value="x-guru"          label="&font.langGroup.gurmukhi;"/>
+              <menuitem value="he"              label="&font.langGroup.hebrew;"/>
+              <menuitem value="ja"              label="&font.langGroup.japanese;"/>
+              <menuitem value="x-knda"          label="&font.langGroup.kannada;"/>
+              <menuitem value="x-khmr"          label="&font.langGroup.khmer;"/>
+              <menuitem value="ko"              label="&font.langGroup.korean;"/>
+              <menuitem value="x-western"       label="&font.langGroup.latin;"/>
+              <menuitem value="x-mlym"          label="&font.langGroup.malayalam;"/>
+              <menuitem value="x-math"          label="&font.langGroup.math;"/>
+              <menuitem value="x-orya"          label="&font.langGroup.odia;"/>
+              <menuitem value="x-sinh"          label="&font.langGroup.sinhala;"/>
+              <menuitem value="x-tamil"         label="&font.langGroup.tamil;"/>
+              <menuitem value="x-telu"          label="&font.langGroup.telugu;"/>
+              <menuitem value="th"              label="&font.langGroup.thai;"/>
+              <menuitem value="x-tibt"          label="&font.langGroup.tibetan;"/>
+              <menuitem value="x-cans"          label="&font.langGroup.canadian;"/>
+              <menuitem value="x-unicode"       label="&font.langGroup.other;"/>
+            </menupopup>
+          </menulist>
+        </hbox>
       </caption>
 
       <grid>
         <columns>
           <column/>
           <column flex="1"/>
           <column/>
           <column/>
@@ -209,46 +212,49 @@
           </row>
         </rows>
       </grid>
       <separator class="thin"/>
       <hbox flex="1">
         <spacer flex="1"/>
         <hbox align="center" pack="end">
           <label accesskey="&minSize.accesskey;" control="minSize">&minSize.label;</label>
-          <menulist id="minSize">
-            <menupopup>
-              <menuitem value="0" label="&minSize.none;"/>
-              <menuitem value="9" label="9"/>
-              <menuitem value="10" label="10"/>
-              <menuitem value="11" label="11"/>
-              <menuitem value="12" label="12"/>
-              <menuitem value="13" label="13"/>
-              <menuitem value="14" label="14"/>
-              <menuitem value="15" label="15"/>
-              <menuitem value="16" label="16"/>
-              <menuitem value="17" label="17"/>
-              <menuitem value="18" label="18"/>
-              <menuitem value="20" label="20"/>
-              <menuitem value="22" label="22"/>
-              <menuitem value="24" label="24"/>
-              <menuitem value="26" label="26"/>
-              <menuitem value="28" label="28"/>
-              <menuitem value="30" label="30"/>
-              <menuitem value="32" label="32"/>
-              <menuitem value="34" label="34"/>
-              <menuitem value="36" label="36"/>
-              <menuitem value="40" label="40"/>
-              <menuitem value="44" label="44"/>
-              <menuitem value="48" label="48"/>
-              <menuitem value="56" label="56"/>
-              <menuitem value="64" label="64"/>
-              <menuitem value="72" label="72"/>
-            </menupopup>
-          </menulist>
+          <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+          <hbox>
+            <menulist id="minSize">
+              <menupopup>
+                <menuitem value="0" label="&minSize.none;"/>
+                <menuitem value="9" label="9"/>
+                <menuitem value="10" label="10"/>
+                <menuitem value="11" label="11"/>
+                <menuitem value="12" label="12"/>
+                <menuitem value="13" label="13"/>
+                <menuitem value="14" label="14"/>
+                <menuitem value="15" label="15"/>
+                <menuitem value="16" label="16"/>
+                <menuitem value="17" label="17"/>
+                <menuitem value="18" label="18"/>
+                <menuitem value="20" label="20"/>
+                <menuitem value="22" label="22"/>
+                <menuitem value="24" label="24"/>
+                <menuitem value="26" label="26"/>
+                <menuitem value="28" label="28"/>
+                <menuitem value="30" label="30"/>
+                <menuitem value="32" label="32"/>
+                <menuitem value="34" label="34"/>
+                <menuitem value="36" label="36"/>
+                <menuitem value="40" label="40"/>
+                <menuitem value="44" label="44"/>
+                <menuitem value="48" label="48"/>
+                <menuitem value="56" label="56"/>
+                <menuitem value="64" label="64"/>
+                <menuitem value="72" label="72"/>
+              </menupopup>
+            </menulist>
+          </hbox>
         </hbox>
       </hbox>
       <separator/>
       <separator class="groove"/>
       <hbox>
         <checkbox id="useDocumentFonts"
                   label="&allowPagesToUseOwn.label;" accesskey="&allowPagesToUseOwn.accesskey;"
                   preference="browser.display.use_document_fonts"
@@ -259,34 +265,37 @@
 
     <!-- Text Encoding -->
     <groupbox>
       <caption><label>&languages.customize.Fallback2.grouplabel;</label></caption>
       <description>&languages.customize.Fallback2.desc;</description>
       <hbox align="center">
         <label accesskey="&languages.customize.Fallback2.accesskey;"
                control="DefaultCharsetList">&languages.customize.Fallback2.label;</label>
-        <menulist id="DefaultCharsetList" preference="intl.charset.fallback.override">
-          <menupopup>
-            <menuitem label="&languages.customize.Fallback.auto;"        value=""/>
-            <menuitem label="&languages.customize.Fallback.arabic;"      value="windows-1256"/>
-            <menuitem label="&languages.customize.Fallback.baltic;"      value="windows-1257"/>
-            <menuitem label="&languages.customize.Fallback.ceiso;"       value="ISO-8859-2"/>
-            <menuitem label="&languages.customize.Fallback.cewindows;"   value="windows-1250"/>
-            <!-- Using gbk instead of GBK for compat with previously-stored prefs.
-                 The value gets normalized in dom/encoding/FallbackEncoding.cpp. -->
-            <menuitem label="&languages.customize.Fallback.simplified;"  value="gbk"/>
-            <menuitem label="&languages.customize.Fallback.traditional;" value="Big5"/>
-            <menuitem label="&languages.customize.Fallback.cyrillic;"    value="windows-1251"/>
-            <menuitem label="&languages.customize.Fallback.greek;"       value="ISO-8859-7"/>
-            <menuitem label="&languages.customize.Fallback.hebrew;"      value="windows-1255"/>
-            <menuitem label="&languages.customize.Fallback.japanese;"    value="Shift_JIS"/>
-            <menuitem label="&languages.customize.Fallback.korean;"      value="EUC-KR"/>
-            <menuitem label="&languages.customize.Fallback.thai;"        value="windows-874"/>
-            <menuitem label="&languages.customize.Fallback.turkish;"     value="windows-1254"/>
-            <menuitem label="&languages.customize.Fallback.vietnamese;"  value="windows-1258"/>
-            <menuitem label="&languages.customize.Fallback.other;"       value="windows-1252"/>
-          </menupopup>
-        </menulist>
+        <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+        <hbox>
+          <menulist id="DefaultCharsetList" preference="intl.charset.fallback.override">
+            <menupopup>
+              <menuitem label="&languages.customize.Fallback.auto;"        value=""/>
+              <menuitem label="&languages.customize.Fallback.arabic;"      value="windows-1256"/>
+              <menuitem label="&languages.customize.Fallback.baltic;"      value="windows-1257"/>
+              <menuitem label="&languages.customize.Fallback.ceiso;"       value="ISO-8859-2"/>
+              <menuitem label="&languages.customize.Fallback.cewindows;"   value="windows-1250"/>
+              <!-- Using gbk instead of GBK for compat with previously-stored prefs.
+                  The value gets normalized in dom/encoding/FallbackEncoding.cpp. -->
+              <menuitem label="&languages.customize.Fallback.simplified;"  value="gbk"/>
+              <menuitem label="&languages.customize.Fallback.traditional;" value="Big5"/>
+              <menuitem label="&languages.customize.Fallback.cyrillic;"    value="windows-1251"/>
+              <menuitem label="&languages.customize.Fallback.greek;"       value="ISO-8859-7"/>
+              <menuitem label="&languages.customize.Fallback.hebrew;"      value="windows-1255"/>
+              <menuitem label="&languages.customize.Fallback.japanese;"    value="Shift_JIS"/>
+              <menuitem label="&languages.customize.Fallback.korean;"      value="EUC-KR"/>
+              <menuitem label="&languages.customize.Fallback.thai;"        value="windows-874"/>
+              <menuitem label="&languages.customize.Fallback.turkish;"     value="windows-1254"/>
+              <menuitem label="&languages.customize.Fallback.vietnamese;"  value="windows-1258"/>
+              <menuitem label="&languages.customize.Fallback.other;"       value="windows-1252"/>
+            </menupopup>
+          </menulist>
+        </hbox>
       </hbox>
     </groupbox>
   </prefpane>
 </prefwindow>
--- a/browser/components/preferences/in-content-new/findInPage.js
+++ b/browser/components/preferences/in-content-new/findInPage.js
@@ -18,29 +18,16 @@ var gSearchResultsPane = {
     this.searchInput = document.getElementById("searchInput");
     this.searchInput.hidden = !Services.prefs.getBoolPref("browser.preferences.search");
     if (!this.searchInput.hidden) {
       this.searchInput.addEventListener("command", this);
       window.addEventListener("load", () => {
         this.searchInput.focus();
         this.initializeCategories();
       });
-
-      // Throttling the resize event to reduce the callback frequency
-      let callbackId;
-      window.addEventListener("resize", () => {
-        if (!callbackId) {
-          callbackId = window.requestAnimationFrame(() => {
-            this.listSearchTooltips.forEach((anchorNode) => {
-              this.calculateTooltipPosition(anchorNode);
-            });
-            callbackId = null;
-          });
-        }
-      });
     }
     let strings = this.strings;
     this.searchInput.placeholder = AppConstants.platform == "win" ?
       strings.getString("searchInput.labelWin") :
       strings.getString("searchInput.labelUnix");
   },
 
   handleEvent(event) {
@@ -433,28 +420,18 @@ var gSearchResultsPane = {
     this.calculateTooltipPosition(anchorNode);
   },
 
   calculateTooltipPosition(anchorNode) {
     let searchTooltip = anchorNode.tooltipNode;
     // In order to get the up-to-date position of each of the nodes that we're
     // putting tooltips on, we have to flush layout intentionally, and that
     // this is the result of a XUL limitation (bug 1363730).
-    let anchorRect = anchorNode.getBoundingClientRect();
     let tooltipRect = searchTooltip.getBoundingClientRect();
-    let parentRect = anchorNode.parentElement.getBoundingClientRect();
-
-    let offSetLeft = (anchorRect.width / 2) - (tooltipRect.width / 2);
-    let relativeOffset = anchorRect.left - parentRect.left;
-    offSetLeft += relativeOffset > 0 ? relativeOffset : 0;
-    // 20.5 is reserved for tooltip position
-    let offSetTop = anchorRect.top - parentRect.top - 20.5;
-
-    searchTooltip.style.setProperty("left", `${offSetLeft}px`);
-    searchTooltip.style.setProperty("top", `${offSetTop}px`);
+    searchTooltip.style.setProperty("left", `calc(50% - ${(tooltipRect.width / 2)}px)`);
   },
 
   /**
    * Remove all search tooltips that were created.
    */
   removeAllSearchTooltips() {
     let searchTooltips = Array.from(document.querySelectorAll(".search-tooltip"));
     for (let searchTooltip of searchTooltips) {
--- a/browser/components/preferences/in-content-new/main.xul
+++ b/browser/components/preferences/in-content-new/main.xul
@@ -427,23 +427,26 @@
                 label="&browserContainersEnabled.label;"
                 accesskey="&browserContainersEnabled.accesskey;"
                 preference="privacy.userContext.enabled"
                 onsyncfrompreference="return gPrivacyPane.readBrowserContainersCheckbox();"/>
       <label id="browserContainersLearnMore" class="learnMore text-link">
         &browserContainersLearnMore.label;
       </label>
       <spacer flex="1"/>
-      <button id="browserContainersSettings"
-              class="accessory-button"
-              label="&browserContainersSettings.label;"
-              accesskey="&browserContainersSettings.accesskey;"
-              searchkeywords="&addButton.label;
-                              &preferencesButton.label;
-                              &removeButton.label;"/>
+      <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+      <hbox>
+        <button id="browserContainersSettings"
+                class="accessory-button"
+                label="&browserContainersSettings.label;"
+                accesskey="&browserContainersSettings.accesskey;"
+                searchkeywords="&addButton.label;
+                                &preferencesButton.label;
+                                &removeButton.label;"/>
+      </hbox>
     </hbox>
 </groupbox>
 
 <hbox id="languageAndAppearanceCategory"
       class="subcategory"
       hidden="true"
       data-category="paneGeneral">
   <label class="header-name" flex="1">&languageAndAppearance.label;</label>
@@ -452,151 +455,166 @@
 <!-- Fonts and Colors -->
 <groupbox id="fontsGroup" data-category="paneGeneral" hidden="true">
   <caption><label>&fontsAndColors.label;</label></caption>
 
   <vbox>
     <hbox id="fontSettings">
       <hbox align="center" flex="1">
         <label control="defaultFont" accesskey="&defaultFont2.accesskey;">&defaultFont2.label;</label>
-        <menulist id="defaultFont" flex="1" delayprefsave="true" onsyncfrompreference="return FontBuilder.readFontSelection(this);"/>
+        <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+        <hbox flex="1">
+          <menulist id="defaultFont" flex="1" delayprefsave="true" onsyncfrompreference="return FontBuilder.readFontSelection(this);"/>
+        </hbox>
         <label id="defaultFontSizeLabel" control="defaultFontSize" accesskey="&defaultSize2.accesskey;">&defaultSize2.label;</label>
-        <menulist id="defaultFontSize" delayprefsave="true">
-          <menupopup>
-            <menuitem value="9" label="9"/>
-            <menuitem value="10" label="10"/>
-            <menuitem value="11" label="11"/>
-            <menuitem value="12" label="12"/>
-            <menuitem value="13" label="13"/>
-            <menuitem value="14" label="14"/>
-            <menuitem value="15" label="15"/>
-            <menuitem value="16" label="16"/>
-            <menuitem value="17" label="17"/>
-            <menuitem value="18" label="18"/>
-            <menuitem value="20" label="20"/>
-            <menuitem value="22" label="22"/>
-            <menuitem value="24" label="24"/>
-            <menuitem value="26" label="26"/>
-            <menuitem value="28" label="28"/>
-            <menuitem value="30" label="30"/>
-            <menuitem value="32" label="32"/>
-            <menuitem value="34" label="34"/>
-            <menuitem value="36" label="36"/>
-            <menuitem value="40" label="40"/>
-            <menuitem value="44" label="44"/>
-            <menuitem value="48" label="48"/>
-            <menuitem value="56" label="56"/>
-            <menuitem value="64" label="64"/>
-            <menuitem value="72" label="72"/>
-          </menupopup>
-        </menulist>
+        <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+        <hbox>
+          <menulist id="defaultFontSize" delayprefsave="true">
+            <menupopup>
+              <menuitem value="9" label="9"/>
+              <menuitem value="10" label="10"/>
+              <menuitem value="11" label="11"/>
+              <menuitem value="12" label="12"/>
+              <menuitem value="13" label="13"/>
+              <menuitem value="14" label="14"/>
+              <menuitem value="15" label="15"/>
+              <menuitem value="16" label="16"/>
+              <menuitem value="17" label="17"/>
+              <menuitem value="18" label="18"/>
+              <menuitem value="20" label="20"/>
+              <menuitem value="22" label="22"/>
+              <menuitem value="24" label="24"/>
+              <menuitem value="26" label="26"/>
+              <menuitem value="28" label="28"/>
+              <menuitem value="30" label="30"/>
+              <menuitem value="32" label="32"/>
+              <menuitem value="34" label="34"/>
+              <menuitem value="36" label="36"/>
+              <menuitem value="40" label="40"/>
+              <menuitem value="44" label="44"/>
+              <menuitem value="48" label="48"/>
+              <menuitem value="56" label="56"/>
+              <menuitem value="64" label="64"/>
+              <menuitem value="72" label="72"/>
+            </menupopup>
+          </menulist>
+        </hbox>
       </hbox>
       <spacer flex="1" />
-      <button id="advancedFonts"
-              class="accessory-button"
-              icon="select-font"
-              label="&advancedFonts.label;"
-              accesskey="&advancedFonts.accesskey;"
-              searchkeywords="&fontsDialog.title;
-                              &language.label;
-                              &size.label;
-                              &proportional.label;
-                              &serif.label;
-                              &sans-serif.label;
-                              &monospace.label;
-                              &font.langGroup.latin;
-                              &font.langGroup.japanese;
-                              &font.langGroup.trad-chinese;
-                              &font.langGroup.simpl-chinese;
-                              &font.langGroup.trad-chinese-hk;
-                              &font.langGroup.korean;
-                              &font.langGroup.cyrillic;
-                              &font.langGroup.el;
-                              &font.langGroup.other;
-                              &font.langGroup.thai;
-                              &font.langGroup.hebrew;
-                              &font.langGroup.arabic;
-                              &font.langGroup.devanagari;
-                              &font.langGroup.tamil;
-                              &font.langGroup.armenian;
-                              &font.langGroup.bengali;
-                              &font.langGroup.canadian;
-                              &font.langGroup.ethiopic;
-                              &font.langGroup.georgian;
-                              &font.langGroup.gujarati;
-                              &font.langGroup.gurmukhi;
-                              &font.langGroup.khmer;
-                              &font.langGroup.malayalam;
-                              &font.langGroup.math;
-                              &font.langGroup.odia;
-                              &font.langGroup.telugu;
-                              &font.langGroup.kannada;
-                              &font.langGroup.sinhala;
-                              &font.langGroup.tibetan;
-                              &minSize.label;
-                              &minSize.none;
-                              &useDefaultFontSerif.label;
-                              &useDefaultFontSansSerif.label;
-                              &allowPagesToUseOwn.label;
-                              &languages.customize.Fallback2.grouplabel;
-                              &languages.customize.Fallback2.label;
-                              &languages.customize.Fallback2.desc;
-                              &languages.customize.Fallback.auto;
-                              &languages.customize.Fallback.arabic;
-                              &languages.customize.Fallback.baltic;
-                              &languages.customize.Fallback.ceiso;
-                              &languages.customize.Fallback.cewindows;
-                              &languages.customize.Fallback.simplified;
-                              &languages.customize.Fallback.traditional;
-                              &languages.customize.Fallback.cyrillic;
-                              &languages.customize.Fallback.greek;
-                              &languages.customize.Fallback.hebrew;
-                              &languages.customize.Fallback.japanese;
-                              &languages.customize.Fallback.korean;
-                              &languages.customize.Fallback.thai;
-                              &languages.customize.Fallback.turkish;
-                              &languages.customize.Fallback.vietnamese;
-                              &languages.customize.Fallback.other;"/>
+      <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+      <hbox>
+        <button id="advancedFonts"
+                class="accessory-button"
+                icon="select-font"
+                label="&advancedFonts.label;"
+                accesskey="&advancedFonts.accesskey;"
+                searchkeywords="&fontsDialog.title;
+                                &language.label;
+                                &size.label;
+                                &proportional.label;
+                                &serif.label;
+                                &sans-serif.label;
+                                &monospace.label;
+                                &font.langGroup.latin;
+                                &font.langGroup.japanese;
+                                &font.langGroup.trad-chinese;
+                                &font.langGroup.simpl-chinese;
+                                &font.langGroup.trad-chinese-hk;
+                                &font.langGroup.korean;
+                                &font.langGroup.cyrillic;
+                                &font.langGroup.el;
+                                &font.langGroup.other;
+                                &font.langGroup.thai;
+                                &font.langGroup.hebrew;
+                                &font.langGroup.arabic;
+                                &font.langGroup.devanagari;
+                                &font.langGroup.tamil;
+                                &font.langGroup.armenian;
+                                &font.langGroup.bengali;
+                                &font.langGroup.canadian;
+                                &font.langGroup.ethiopic;
+                                &font.langGroup.georgian;
+                                &font.langGroup.gujarati;
+                                &font.langGroup.gurmukhi;
+                                &font.langGroup.khmer;
+                                &font.langGroup.malayalam;
+                                &font.langGroup.math;
+                                &font.langGroup.odia;
+                                &font.langGroup.telugu;
+                                &font.langGroup.kannada;
+                                &font.langGroup.sinhala;
+                                &font.langGroup.tibetan;
+                                &minSize.label;
+                                &minSize.none;
+                                &useDefaultFontSerif.label;
+                                &useDefaultFontSansSerif.label;
+                                &allowPagesToUseOwn.label;
+                                &languages.customize.Fallback2.grouplabel;
+                                &languages.customize.Fallback2.label;
+                                &languages.customize.Fallback2.desc;
+                                &languages.customize.Fallback.auto;
+                                &languages.customize.Fallback.arabic;
+                                &languages.customize.Fallback.baltic;
+                                &languages.customize.Fallback.ceiso;
+                                &languages.customize.Fallback.cewindows;
+                                &languages.customize.Fallback.simplified;
+                                &languages.customize.Fallback.traditional;
+                                &languages.customize.Fallback.cyrillic;
+                                &languages.customize.Fallback.greek;
+                                &languages.customize.Fallback.hebrew;
+                                &languages.customize.Fallback.japanese;
+                                &languages.customize.Fallback.korean;
+                                &languages.customize.Fallback.thai;
+                                &languages.customize.Fallback.turkish;
+                                &languages.customize.Fallback.vietnamese;
+                                &languages.customize.Fallback.other;"/>
+      </hbox>
     </hbox>
     <hbox id="colorsSettings">
       <spacer flex="1" />
-      <button id="colors"
-              class="accessory-button"
-              icon="select-color"
-              label="&colors.label;"
-              accesskey="&colors.accesskey;"
-              searchkeywords="&overrideDefaultPageColors.label;
-                              &overrideDefaultPageColors.always.label;
-                              &overrideDefaultPageColors.auto.label;
-                              &overrideDefaultPageColors.never.label;
-                              &useSystemColors.label;
-                              &underlineLinks.label;
-                              &linkColor.label;
-                              &visitedLinkColor.label;"/>
+      <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+      <hbox>
+        <button id="colors"
+                class="accessory-button"
+                icon="select-color"
+                label="&colors.label;"
+                accesskey="&colors.accesskey;"
+                searchkeywords="&overrideDefaultPageColors.label;
+                                &overrideDefaultPageColors.always.label;
+                                &overrideDefaultPageColors.auto.label;
+                                &overrideDefaultPageColors.never.label;
+                                &useSystemColors.label;
+                                &underlineLinks.label;
+                                &linkColor.label;
+                                &visitedLinkColor.label;"/>
+      </hbox>
     </hbox>
   </vbox>
 </groupbox>
 
 <!-- Languages -->
 <groupbox id="languagesGroup" data-category="paneGeneral" hidden="true">
   <caption><label>&language2.label;</label></caption>
 
   <hbox id="languagesBox" align="center">
     <description flex="1" control="chooseLanguage">&chooseLanguage.label;</description>
-    <button id="chooseLanguage"
-            class="accessory-button"
-            label="&chooseButton.label;"
-            accesskey="&chooseButton.accesskey;"
-            searchkeywords="&languages.customize.Header;
-                            &languages.customize.description;
-                            &languages.customize.moveUp.label;
-                            &languages.customize.moveDown.label;
-                            &languages.customize.deleteButton.label;
-                            &languages.customize.selectLanguage.label;
-                            &languages.customize.addButton.label;"/>
+    <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+    <hbox>
+      <button id="chooseLanguage"
+              class="accessory-button"
+              label="&chooseButton.label;"
+              accesskey="&chooseButton.accesskey;"
+              searchkeywords="&languages.customize.Header;
+                              &languages.customize.description;
+                              &languages.customize.moveUp.label;
+                              &languages.customize.moveDown.label;
+                              &languages.customize.deleteButton.label;
+                              &languages.customize.selectLanguage.label;
+                              &languages.customize.addButton.label;"/>
+    </hbox>
   </hbox>
 
   <hbox id="translationBox" hidden="true">
     <hbox align="center" flex="1">
       <checkbox id="translate" preference="browser.translation.detectLanguage"
                 label="&translateWebPages.label;." accesskey="&translateWebPages.accesskey;"
                 onsyncfrompreference="return gMainPane.updateButtons('translateButton',
                                               'browser.translation.detectLanguage');"/>
@@ -740,16 +758,17 @@
         &updateApplication.version.pre;<label id="version"/>&updateApplication.version.post;
         <label id="releasenotes" class="learnMore text-link" hidden="true">&releaseNotes.link;</label>
       </description>
       <description id="distribution" class="text-blurb" hidden="true"/>
       <description id="distributionId" class="text-blurb" hidden="true"/>
     </vbox>
 #ifdef MOZ_UPDATER
     <spacer flex="1"/>
+    <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
     <vbox>
       <button id="showUpdateHistory"
               class="accessory-button"
               label="&updateHistory2.label;"
               accesskey="&updateHistory2.accesskey;"
               preference="app.update.disable_button.showUpdateHistory"
               searchkeywords="&history.title; &history.intro;"/>
     </vbox>
@@ -957,33 +976,36 @@
       data-category="paneGeneral">
   <label class="header-name" flex="1">&networkProxy.label;</label>
 </hbox>
 
 <!-- Network Proxy-->
 <groupbox id="connectionGroup" data-category="paneGeneral" hidden="true">
   <hbox align="center">
     <description flex="1" control="connectionSettings">&connectionDesc.label;</description>
-    <button id="connectionSettings"
-            class="accessory-button"
-            icon="network"
-            label="&connectionSettings.label;"
-            accesskey="&connectionSettings.accesskey;"
-            searchkeywords="&connectionsDialog.title;
-                            &noProxyTypeRadio.label;
-                            &WPADTypeRadio.label;
-                            &systemTypeRadio.label;
-                            &manualTypeRadio.label;
-                            &http.label;
-                            &ssl.label;
-                            &ftp.label;
-                            &socks.label;
-                            &socks4.label;
-                            &socks5.label;
-                            &noproxy.label;
-                            &noproxyExplain.label;
-                            &shareproxy.label;
-                            &autoTypeRadio.label;
-                            &reload.label;
-                            &autologinproxy.label;
-                            &socksRemoteDNS.label2;"/>
+    <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+    <hbox>
+      <button id="connectionSettings"
+              class="accessory-button"
+              icon="network"
+              label="&connectionSettings.label;"
+              accesskey="&connectionSettings.accesskey;"
+              searchkeywords="&connectionsDialog.title;
+                              &noProxyTypeRadio.label;
+                              &WPADTypeRadio.label;
+                              &systemTypeRadio.label;
+                              &manualTypeRadio.label;
+                              &http.label;
+                              &ssl.label;
+                              &ftp.label;
+                              &socks.label;
+                              &socks4.label;
+                              &socks5.label;
+                              &noproxy.label;
+                              &noproxyExplain.label;
+                              &shareproxy.label;
+                              &autoTypeRadio.label;
+                              &reload.label;
+                              &autologinproxy.label;
+                              &socksRemoteDNS.label2;"/>
+    </hbox>
   </hbox>
 </groupbox>
--- a/browser/components/preferences/in-content-new/privacy.xul
+++ b/browser/components/preferences/in-content-new/privacy.xul
@@ -184,80 +184,92 @@
 
   <vbox id="passwordSettings">
     <hbox id="savePasswordsBox">
       <checkbox id="savePasswords"
                 label="&rememberLogins1.label;" accesskey="&rememberLogins1.accesskey;"
                 preference="signon.rememberSignons"
                 onsyncfrompreference="return gPrivacyPane.readSavePasswords();"
                 flex="1" />
-      <button id="passwordExceptions"
-              class="accessory-button"
-              label="&passwordExceptions.label;"
-              accesskey="&passwordExceptions.accesskey;"
-              preference="pref.privacy.disable_button.view_passwords_exceptions"
-              searchkeywords="&address.label;"/>
+      <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+      <hbox>
+        <button id="passwordExceptions"
+                class="accessory-button"
+                label="&passwordExceptions.label;"
+                accesskey="&passwordExceptions.accesskey;"
+                preference="pref.privacy.disable_button.view_passwords_exceptions"
+                searchkeywords="&address.label;"/>
+      </hbox>
     </hbox>
     <hbox id="showPasswordBox" pack="end">
-      <button id="showPasswords"
-              class="accessory-button"
-              label="&savedLogins.label;" accesskey="&savedLogins.accesskey;"
-              preference="pref.privacy.disable_button.view_passwords"
-              searchkeywords="&savedLogins.title;"/>
+      <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+      <hbox>
+        <button id="showPasswords"
+                class="accessory-button"
+                label="&savedLogins.label;" accesskey="&savedLogins.accesskey;"
+                preference="pref.privacy.disable_button.view_passwords"
+                searchkeywords="&savedLogins.title;"/>
+      </hbox>
     </hbox>
   </vbox>
   <hbox id="masterPasswordRow">
     <checkbox id="useMasterPassword"
               label="&useMasterPassword.label;"
               accesskey="&useMasterPassword.accesskey;"
               flex="1"/>
-    <button id="changeMasterPassword"
-            class="accessory-button"
-            label="&changeMasterPassword.label;"
-            accesskey="&changeMasterPassword.accesskey;"/>
+    <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+    <hbox>
+      <button id="changeMasterPassword"
+              class="accessory-button"
+              label="&changeMasterPassword.label;"
+              accesskey="&changeMasterPassword.accesskey;"/>
+    </hbox>
   </hbox>
 </groupbox>
 
 <!-- History -->
 <groupbox id="historyGroup" data-category="panePrivacy" hidden="true">
   <caption><label>&history.label;</label></caption>
   <hbox align="center">
     <label id="historyModeLabel"
            control="historyMode"
            accesskey="&historyHeader2.pre.accesskey;">&historyHeader2.pre.label;
     </label>
-    <menulist id="historyMode">
-      <menupopup>
-        <menuitem label="&historyHeader.remember.label;" value="remember" searchkeywords="&rememberDescription.label;
-                                                                                          &rememberActions.pre.label;
-                                                                                          &rememberActions.clearHistory.label;
-                                                                                          &rememberActions.middle.label;
-                                                                                          &rememberActions.removeCookies.label;
-                                                                                          &rememberActions.post.label;"/>
-        <menuitem label="&historyHeader.dontremember.label;" value="dontremember" searchkeywords="&dontrememberDescription.label;
-                                                                                                  &dontrememberActions.pre.label;
-                                                                                                  &dontrememberActions.clearHistory.label;
-                                                                                                  &dontrememberActions.post.label;"/>
-        <menuitem label="&historyHeader.custom.label;" value="custom" searchkeywords="&privateBrowsingPermanent2.label;
-                                                                                      &rememberHistory2.label;
-                                                                                      &rememberSearchForm.label;
-                                                                                      &acceptCookies.label;
-                                                                                      &cookieExceptions.label;
-                                                                                      &acceptThirdParty.pre.label;
-                                                                                      &acceptThirdParty.always.label;
-                                                                                      &acceptThirdParty.visited.label;
-                                                                                      &acceptThirdParty.never.label;
-                                                                                      &keepUntil.label;
-                                                                                      &expire.label;
-                                                                                      &close.label;
-                                                                                      &showCookies.label;
-                                                                                      &clearOnClose.label;
-                                                                                      &clearOnCloseSettings.label;"/>
-      </menupopup>
-    </menulist>
+    <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+    <hbox>
+      <menulist id="historyMode">
+        <menupopup>
+          <menuitem label="&historyHeader.remember.label;" value="remember" searchkeywords="&rememberDescription.label;
+                                                                                            &rememberActions.pre.label;
+                                                                                            &rememberActions.clearHistory.label;
+                                                                                            &rememberActions.middle.label;
+                                                                                            &rememberActions.removeCookies.label;
+                                                                                            &rememberActions.post.label;"/>
+          <menuitem label="&historyHeader.dontremember.label;" value="dontremember" searchkeywords="&dontrememberDescription.label;
+                                                                                                    &dontrememberActions.pre.label;
+                                                                                                    &dontrememberActions.clearHistory.label;
+                                                                                                    &dontrememberActions.post.label;"/>
+          <menuitem label="&historyHeader.custom.label;" value="custom" searchkeywords="&privateBrowsingPermanent2.label;
+                                                                                        &rememberHistory2.label;
+                                                                                        &rememberSearchForm.label;
+                                                                                        &acceptCookies.label;
+                                                                                        &cookieExceptions.label;
+                                                                                        &acceptThirdParty.pre.label;
+                                                                                        &acceptThirdParty.always.label;
+                                                                                        &acceptThirdParty.visited.label;
+                                                                                        &acceptThirdParty.never.label;
+                                                                                        &keepUntil.label;
+                                                                                        &expire.label;
+                                                                                        &close.label;
+                                                                                        &showCookies.label;
+                                                                                        &clearOnClose.label;
+                                                                                        &clearOnCloseSettings.label;"/>
+        </menupopup>
+      </menulist>
+    </hbox>
     <label>&historyHeader.post.label;</label>
   </hbox>
   <deck id="historyPane">
     <vbox id="historyRememberPane">
       <hbox align="center" flex="1">
         <vbox flex="1">
           <description>&rememberDescription.label;</description>
           <separator class="thin"/>
@@ -472,32 +484,38 @@
                     preference="privacy.trackingprotection.pbmode.enabled"
                     accesskey="&trackingProtectionPBM6.accesskey;"/>
           <label flex="1">&trackingProtectionPBM6.label;<label id="trackingProtectionPBMLearnMore"
                  class="learnMore text-link">&trackingProtectionPBMLearnMore.label;</label>
           </label>
         </hbox>
       </vbox>
       <vbox id="trackingProtectionAdvancedSettings">
-        <button id="trackingProtectionExceptions"
-                class="accessory-button"
-                hidden="true"
-                label="&trackingProtectionExceptions.label;"
-                accesskey="&trackingProtectionExceptions.accesskey;"
-                preference="pref.privacy.disable_button.tracking_protection_exceptions"
-                searchkeywords="&removepermission.label;
-                                &removeallpermissions.label;
-                                &button.cancel.label;
-                                &button.ok.label;"/>
-        <button id="changeBlockList"
-                class="accessory-button"
-                label="&changeBlockList2.label;"
-                accesskey="&changeBlockList2.accesskey;"
-                preference="pref.privacy.disable_button.change_blocklist"
-                searchkeywords="&button.cancel.label; &button.ok.label;"/>
+        <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+        <hbox>
+          <button id="trackingProtectionExceptions"
+                  class="accessory-button"
+                  hidden="true"
+                  label="&trackingProtectionExceptions.label;"
+                  accesskey="&trackingProtectionExceptions.accesskey;"
+                  preference="pref.privacy.disable_button.tracking_protection_exceptions"
+                  searchkeywords="&removepermission.label;
+                                  &removeallpermissions.label;
+                                  &button.cancel.label;
+                                  &button.ok.label;"/>
+        </hbox>
+        <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+        <hbox>
+          <button id="changeBlockList"
+                  class="accessory-button"
+                  label="&changeBlockList2.label;"
+                  accesskey="&changeBlockList2.accesskey;"
+                  preference="pref.privacy.disable_button.change_blocklist"
+                  searchkeywords="&button.cancel.label; &button.ok.label;"/>
+        </hbox>
       </vbox>
     </hbox>
     <vbox id="doNotTrackLearnMoreBox">
       <label>&doNotTrack.description;<label
       class="learnMore text-link" href="https://www.mozilla.org/dnt"
       >&doNotTrack.learnMore.label;</label></label>
       <radiogroup id="doNotTrackRadioGroup" aria-labelledby="doNotTrackDesc" preference="privacy.donottrackheader.enabled">
         <radio value="false" label="&doNotTrack.default.label;"/>
@@ -549,40 +567,46 @@
   </vbox>
 
   <hbox align="start">
     <checkbox id="popupPolicy" preference="dom.disable_open_during_load"
               label="&blockPopups.label;" accesskey="&blockPopups.accesskey;"
               onsyncfrompreference="return gPrivacyPane.updateButtons('popupPolicyButton',
                                          'dom.disable_open_during_load');"
               flex="1" />
-    <button id="popupPolicyButton"
-            class="accessory-button"
-            label="&popupExceptions.label;"
-            accesskey="&popupExceptions.accesskey;"
-            searchkeywords="&address.label; &button.cancel.label; &button.ok.label;"/>
+    <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+    <hbox>
+      <button id="popupPolicyButton"
+              class="accessory-button"
+              label="&popupExceptions.label;"
+              accesskey="&popupExceptions.accesskey;"
+              searchkeywords="&address.label; &button.cancel.label; &button.ok.label;"/>
+    </hbox>
   </hbox>
 
   <hbox id="addonInstallBox">
     <checkbox id="warnAddonInstall"
               label="&warnOnAddonInstall.label;"
               accesskey="&warnOnAddonInstall.accesskey;"
               preference="xpinstall.whitelist.required"
               onsyncfrompreference="return gPrivacyPane.readWarnAddonInstall();"
               flex="1" />
-    <button id="addonExceptions"
-            class="accessory-button"
-            label="&addonExceptions.label;"
-            accesskey="&addonExceptions.accesskey;"
-            searchkeywords="&address.label;
-                            &allow.label;
-                            &removepermission.label;
-                            &removeallpermissions.label;
-                            &button.cancel.label;
-                            &button.ok.label;"/>
+    <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+    <hbox>
+      <button id="addonExceptions"
+              class="accessory-button"
+              label="&addonExceptions.label;"
+              accesskey="&addonExceptions.accesskey;"
+              searchkeywords="&address.label;
+                              &allow.label;
+                              &removepermission.label;
+                              &removeallpermissions.label;
+                              &button.cancel.label;
+                              &button.ok.label;"/>
+    </hbox>
   </hbox>
 </groupbox>
 
 <hbox id="dataCollectionCategory"
       class="subcategory"
       hidden="true"
       data-category="panePrivacy">
   <label class="header-name" flex="1">&dataCollection.label;</label>
@@ -667,75 +691,87 @@
     <checkbox id="enableOCSP"
               label="&enableOCSP.label;"
               accesskey="&enableOCSP.accesskey;"
               onsyncfrompreference="return gPrivacyPane.readEnableOCSP();"
               onsynctopreference="return gPrivacyPane.writeEnableOCSP();"
               preference="security.OCSP.enabled"
               flex="1" />
     <vbox>
-      <button id="viewCertificatesButton"
-              class="accessory-button"
-              label="&viewCerts2.label;"
-              accesskey="&viewCerts2.accesskey;"
-              preference="security.disable_button.openCertManager"
-              searchkeywords="&certmgr.tab.mine;
-                              &certmgr.tab.others2;
-                              &certmgr.tab.websites3;
-                              &certmgr.tab.ca;
-                              &certmgr.tab.orphan2;
-                              &certmgr.mine;
-                              &certmgr.others;
-                              &certmgr.websites2;
-                              &certmgr.cas;
-                              &certmgr.orphans;
-                              &certmgr.certname;
-                              &certmgr.tokenname;
-                              &certmgr.view2.label;
-                              &certmgr.export.label;
-                              &certmgr.delete2.label;"/>
-      <button id="viewSecurityDevicesButton"
-              class="accessory-button"
-              label="&viewSecurityDevices2.label;"
-              accesskey="&viewSecurityDevices2.accesskey;"
-              preference="security.disable_button.openDeviceManager"
-              searchkeywords="&devmgr.title;
-                              &devmgr.devlist.label;
-                              &devmgr.details.title;
-                              &devmgr.details.title2;
-                              &devmgr.button.login.label;
-                              &devmgr.button.logout.label;
-                              &devmgr.button.changepw.label;
-                              &devmgr.button.load.label;
-                              &devmgr.button.unload.label;"/>
+      <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+      <hbox>
+        <button id="viewCertificatesButton"
+                class="accessory-button"
+                label="&viewCerts2.label;"
+                accesskey="&viewCerts2.accesskey;"
+                preference="security.disable_button.openCertManager"
+                searchkeywords="&certmgr.tab.mine;
+                                &certmgr.tab.others2;
+                                &certmgr.tab.websites3;
+                                &certmgr.tab.ca;
+                                &certmgr.tab.orphan2;
+                                &certmgr.mine;
+                                &certmgr.others;
+                                &certmgr.websites2;
+                                &certmgr.cas;
+                                &certmgr.orphans;
+                                &certmgr.certname;
+                                &certmgr.tokenname;
+                                &certmgr.view2.label;
+                                &certmgr.export.label;
+                                &certmgr.delete2.label;"/>
+      </hbox>
+      <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+      <hbox>
+        <button id="viewSecurityDevicesButton"
+                class="accessory-button"
+                label="&viewSecurityDevices2.label;"
+                accesskey="&viewSecurityDevices2.accesskey;"
+                preference="security.disable_button.openDeviceManager"
+                searchkeywords="&devmgr.title;
+                                &devmgr.devlist.label;
+                                &devmgr.details.title;
+                                &devmgr.details.title2;
+                                &devmgr.button.login.label;
+                                &devmgr.button.logout.label;
+                                &devmgr.button.changepw.label;
+                                &devmgr.button.load.label;
+                                &devmgr.button.unload.label;"/>
+      </hbox>
     </vbox>
   </hbox>
 </groupbox>
 
 <!-- Offline apps -->
 <groupbox id="offlineGroup" data-category="panePrivacy" hidden="true" data-hidden-from-search="true">
   <caption><label>&offlineStorage2.label;</label></caption>
 
   <hbox align="center">
     <label id="actualAppCacheSize" flex="1"/>
-    <button id="clearOfflineAppCacheButton"
-            class="accessory-button"
-            icon="clear"
-            label="&clearOfflineAppCacheNow.label;" accesskey="&clearOfflineAppCacheNow.accesskey;"/>
+    <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+    <hbox>
+      <button id="clearOfflineAppCacheButton"
+              class="accessory-button"
+              icon="clear"
+              label="&clearOfflineAppCacheNow.label;" accesskey="&clearOfflineAppCacheNow.accesskey;"/>
+    </hbox>
   </hbox>
   <hbox align="center">
     <checkbox id="offlineNotify"
               label="&offlineStorageNotify.label;" accesskey="&offlineStorageNotify.accesskey;"
               preference="browser.offline-apps.notify"
               onsyncfrompreference="return gPrivacyPane.readOfflineNotify();"
               flex="1" />
-    <button id="offlineNotifyExceptions"
-            class="accessory-button"
-            label="&offlineStorageNotifyExceptions.label;"
-            accesskey="&offlineStorageNotifyExceptions.accesskey;"/>
+    <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+    <hbox>
+      <button id="offlineNotifyExceptions"
+              class="accessory-button"
+              label="&offlineStorageNotifyExceptions.label;"
+              accesskey="&offlineStorageNotifyExceptions.accesskey;"/>
+    </hbox>
   </hbox>
   <hbox>
     <vbox flex="1">
       <label id="offlineAppsListLabel">&offlineAppsList2.label;</label>
       <listbox id="offlineAppsList"
               flex="1"
               aria-labelledby="offlineAppsListLabel">
       </listbox>
--- a/browser/components/preferences/in-content-new/search.xul
+++ b/browser/components/preferences/in-content-new/search.xul
@@ -26,19 +26,22 @@
       <label class="header-name" flex="1">&paneSearch.title;</label>
     </hbox>
 
     <!-- Default Search Engine -->
     <groupbox id="defaultEngineGroup" data-category="paneSearch">
       <caption label="&defaultSearchEngine.label;"/>
       <label>&chooseYourDefaultSearchEngine2.label;</label>
       <hbox>
-        <menulist id="defaultEngine">
-          <menupopup/>
-        </menulist>
+        <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+        <hbox>
+          <menulist id="defaultEngine">
+            <menupopup/>
+          </menulist>
+        </hbox>
       </hbox>
       <checkbox id="suggestionsInSearchFieldsCheckbox"
                 label="&provideSearchSuggestions.label;"
                 accesskey="&provideSearchSuggestions.accesskey;"
                 preference="browser.search.suggest.enabled"/>
       <vbox class="indent">
         <checkbox id="urlBarSuggestion" label="&showURLBarSuggestions2.label;"
                   accesskey="&showURLBarSuggestions2.accesskey;"
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -663,16 +663,17 @@ groupbox {
 
 .search-tooltip {
   font-size: 1.25rem;
   position: absolute;
   padding: 0 10px;
   background-color: #ffe900;
   border: 1px solid #d7b600;
   -moz-user-select: none;
+  bottom: 35px;
 }
 
 .search-tooltip:hover,
 .search-tooltip:hover::before {
   opacity: .1;
 }
 
 .search-tooltip::before {