Bug 1384566 - Fix incorrect tooltip position by wrapping hbox r?mconley draft
authorRicky Chien <ricky060709@gmail.com>
Fri, 28 Jul 2017 08:28:26 +0800
changeset 617148 b7528aab9a63d2548de6651a8a3e9c699069bea1
parent 617144 2115821e82d267e4fe958519e5771e8d77af21f9
child 639719 1b037db35060bcccb9be07c86016b04dfbad7904
push id70945
push userbmo:rchien@mozilla.com
push dateFri, 28 Jul 2017 00:41:57 +0000
reviewersmconley
bugs1384566
milestone56.0a1
Bug 1384566 - Fix incorrect tooltip position by wrapping hbox r?mconley MozReview-Commit-ID: 8R8q4JQCe4w
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/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
@@ -25,19 +25,24 @@
           data-category="paneSearch">
       <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>
-      <menulist id="defaultEngine">
-        <menupopup/>
-      </menulist>
+      <hbox>
+        <!-- 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;"
                   preference="browser.urlbar.suggest.searches"/>
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -644,16 +644,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 {