Bug 1741634 - ensure search input doesn't move mid-search due to differing content width, r=jaws,preferences-reviewers

Differential Revision: https://phabricator.services.mozilla.com/D133128

browser/components/preferences/findInPage.js

@@ -64,6 +64,17 @@ var gSearchResultsPane = {
     this.searchFunction(event);
   },
 
+  /**
+   * This stops the search input from moving, when typing in it
+   * changes which items in the prefs are visible.
+   */
+  fixInputPosition() {
+    let innerContainer = document.querySelector(".sticky-inner-container");
+    let width = window.windowUtils.getBoundsWithoutFlushing(innerContainer)
+      .width;
+    innerContainer.style.maxWidth = width + "px";
+  },
+
   /**
    * Check that the text content contains the query string.
    *
@@ -235,6 +246,8 @@ var gSearchResultsPane = {
       return;
     }
 
+    let firstQuery = !this.query && query;
+    let endQuery = !query && this.query;
     let subQuery = this.query && query.includes(this.query);
     this.query = query;
 
@@ -251,6 +264,10 @@ var gSearchResultsPane = {
     let srHeader = document.getElementById("header-searchResults");
     let noResultsEl = document.getElementById("no-results-message");
     if (this.query) {
+      // If this is the first query, fix the search input in place.
+      if (firstQuery) {
+        this.fixInputPosition();
+      }
       // Showing the Search Results Tag
       await gotoPref("paneSearchResults");
       srHeader.hidden = false;
@@ -353,6 +370,11 @@ var gSearchResultsPane = {
         }
       }
     } else {
+      if (endQuery) {
+        document
+          .querySelector(".sticky-inner-container")
+          .style.removeProperty("max-width");
+      }
       noResultsEl.hidden = true;
       document.getElementById("sorry-message-query").textContent = "";
       // Going back to General when cleared

browser/components/preferences/preferences.xhtml

@@ -189,24 +189,26 @@
 
     <vbox class="main-content" flex="1" align="start">
       <vbox class="pane-container">
-        <hbox class="sticky-container" pack="end" align="start">
-          <hbox id="policies-container" class="info-box-container smaller-font-size" flex="1" hidden="true">
-            <hbox class="info-icon-container">
-              <image class="info-icon"></image>
-            </hbox>
-            <hbox align="center" flex="1">
-              <label flex="1"
-                     href="about:policies"
-                     useoriginprincipal="true"
-                     is="text-link"
-                     data-l10n-id="managed-notice"/>
+        <hbox class="sticky-container">
+          <hbox class="sticky-inner-container" pack="end" align="start">
+            <hbox id="policies-container" class="info-box-container smaller-font-size" flex="1" hidden="true">
+              <hbox class="info-icon-container">
+                <image class="info-icon"></image>
+              </hbox>
+              <hbox align="center" flex="1">
+                <label flex="1"
+                       href="about:policies"
+                       useoriginprincipal="true"
+                       is="text-link"
+                       data-l10n-id="managed-notice"/>
+              </hbox>
             </hbox>
+            <search-textbox
+              id="searchInput"
+              data-l10n-id="search-input-box2"
+              data-l10n-attrs="placeholder, style"
+              hidden="true"/>
           </hbox>
-          <search-textbox
-            id="searchInput"
-            data-l10n-id="search-input-box2"
-            data-l10n-attrs="placeholder, style"
-            hidden="true"/>
         </hbox>
         <vbox id="mainPrefPane">
 #include searchResults.inc.xhtml

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

@@ -28,6 +28,8 @@
   vertical-align: top; /* See bug 1606130 */
   display: -moz-box;
   -moz-box-orient: vertical;
+
+  --main-pane-width: 664px;
 }
 
 * {
@@ -51,7 +53,7 @@
 .pane-container {
   /* A workaround to keep the container always float on the `top: 0` (Bug 1377009) */
   display: block;
-  width: 664px;
+  width: var(--main-pane-width);
 }
 
 #mainPrefPane {
@@ -965,6 +967,11 @@ image.update-throbber {
   padding-inline: 4px;
 }
 
+.sticky-inner-container {
+  -moz-box-flex: 1;
+  max-width: var(--main-pane-width);
+}
+
 .search-tooltip {
   max-width: 150px;
   font-size: 1.25rem;