Bug 1709405: Make settings button compact. r=desktop-theme-reviewers,harry

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

browser/components/search/SearchOneOffs.jsm

@@ -148,6 +148,10 @@ class SearchOneOffs {
     return this.container.getAttribute(...args);
   }
 
+  hasAttribute(...args) {
+    return this.container.hasAttribute(...args);
+  }
+
   setAttribute(...args) {
     this.container.setAttribute(...args);
   }
@@ -194,18 +198,12 @@ class SearchOneOffs {
 
   /**
    * Width in pixels of the one-off buttons.
+   * NOTE: Used in browser/components/search/content/searchbar.js only.
    */
   get buttonWidth() {
     return 48;
   }
 
-  /**
-   * Height in pixels of the one-off buttons.
-   */
-  get buttonHeight() {
-    return 32;
-  }
-
   /**
    * The popup that contains the one-offs.
    *
@@ -275,7 +273,13 @@ class SearchOneOffs {
     if (this.isViewOpen) {
       let isOneOffSelected =
         this.selectedButton &&
-        this.selectedButton.classList.contains("searchbar-engine-one-off-item");
+        this.selectedButton.classList.contains(
+          "searchbar-engine-one-off-item"
+        ) &&
+        !(
+          this.selectedButton == this.settingsButtonCompact &&
+          this.hasAttribute("is_searchbar")
+        );
       // Typing de-selects the settings or opensearch buttons at the bottom
       // of the search panel, as typing shows the user intends to search.
       if (this.selectedButton && !isOneOffSelected) {
@@ -478,7 +482,10 @@ class SearchOneOffs {
       this.spacerCompact.setAttribute("flex", "1");
     }
 
-    let engines = (await this.getEngineInfo()).engines;
+    // Ensure we can refer to the settings buttons by ID:
+    let origin = this.telemetryOrigin;
+    this.settingsButton.id = origin + "-anon-search-settings";
+    this.settingsButtonCompact.id = origin + "-anon-search-settings-compact";
 
     if (this.popup) {
       let buttonsWidth = this.popup.clientWidth;
@@ -495,33 +502,17 @@ class SearchOneOffs {
         --buttonsWidth;
       }
 
+      // 8 is for the margin-inline of the setting button.
+      buttonsWidth -= this.settingsButtonCompact.clientWidth + 8;
+
       // If the header string is very long, then the searchbar buttons will
       // overflow their container unless max-width is set.
       this.buttons.style.setProperty("max-width", `${buttonsWidth}px`);
-
-      // In very narrow windows, we should always have at least one button
-      // per row.
-      buttonsWidth = Math.max(buttonsWidth, this.buttonWidth);
-
-      let enginesPerRow = Math.floor(buttonsWidth / this.buttonWidth);
-      // There will be an empty area of:
-      //   buttonsWidth - enginesPerRow * this.buttonWidth  px
-      // at the end of each row.
-
-      // If the <div> with the list of search engines doesn't have
-      // a fixed height, the panel will be sized incorrectly, causing the bottom
-      // of the suggestion <tree> to be hidden.
-      let engineCount = engines.length + addEngines.length;
-      let rowCount = Math.ceil(engineCount / enginesPerRow);
-      let height = rowCount * this.buttonHeight;
-      this.buttons.style.setProperty("height", `${height}px`);
     }
-    // Ensure we can refer to the settings buttons by ID:
-    let origin = this.telemetryOrigin;
-    this.settingsButton.id = origin + "-anon-search-settings";
-    this.settingsButtonCompact.id = origin + "-anon-search-settings-compact";
 
+    let engines = (await this.getEngineInfo()).engines;
     this._rebuildEngineList(engines, addEngines);
+
     this.dispatchEvent(new Event("rebuild"));
   }
 

browser/components/search/content/autocomplete-popup.js

@@ -108,7 +108,7 @@
       <menuseparator class="searchbar-separator"/>
       <richlistbox class="autocomplete-richlistbox search-panel-tree" flex="1"></richlistbox>
       <menuseparator class="searchbar-separator"/>
-      <hbox class="search-one-offs"></hbox>
+      <hbox class="search-one-offs" compact="true" is_searchbar="true"/>
     `;
     }
 

browser/components/search/test/browser/browser_searchbar_keyboard_navigation.js

@@ -146,7 +146,7 @@ add_task(async function test_arrows() {
   }
 
   ok(
-    textbox.selectedButton.classList.contains("search-setting-button"),
+    textbox.selectedButton.classList.contains("search-setting-button-compact"),
     "the settings item should be selected"
   );
   await checkHeader(Services.search.defaultEngine);
@@ -160,7 +160,7 @@ add_task(async function test_arrows() {
   info("now test the up arrow key");
   EventUtils.synthesizeKey("KEY_ArrowUp");
   ok(
-    textbox.selectedButton.classList.contains("search-setting-button"),
+    textbox.selectedButton.classList.contains("search-setting-button-compact"),
     "the settings item should be selected"
   );
   await checkHeader(Services.search.defaultEngine);
@@ -215,7 +215,7 @@ add_task(async function test_typing_clears_button_selection() {
 
   EventUtils.synthesizeKey("KEY_ArrowUp");
   ok(
-    textbox.selectedButton.classList.contains("search-setting-button"),
+    textbox.selectedButton.classList.contains("search-setting-button-compact"),
     "the settings item should be selected"
   );
 
@@ -253,7 +253,7 @@ add_task(async function test_tab() {
   // One more <tab> selects the settings button.
   EventUtils.synthesizeKey("KEY_Tab");
   ok(
-    textbox.selectedButton.classList.contains("search-setting-button"),
+    textbox.selectedButton.classList.contains("search-setting-button-compact"),
     "the settings item should be selected"
   );
 
@@ -283,7 +283,7 @@ add_task(async function test_shift_tab() {
   // Press up once to select the last button.
   EventUtils.synthesizeKey("KEY_ArrowUp");
   ok(
-    textbox.selectedButton.classList.contains("search-setting-button"),
+    textbox.selectedButton.classList.contains("search-setting-button-compact"),
     "the settings item should be selected"
   );
 
@@ -413,7 +413,7 @@ add_task(async function test_alt_up() {
   // Cleanup for the next test.
   EventUtils.synthesizeKey("KEY_ArrowDown");
   ok(
-    textbox.selectedButton.classList.contains("search-setting-button"),
+    textbox.selectedButton.classList.contains("search-setting-button-compact"),
     "the settings item should be selected"
   );
   EventUtils.synthesizeKey("KEY_ArrowDown");
@@ -593,7 +593,7 @@ add_task(async function test_open_search() {
   // Pressing up once selects the setting button...
   EventUtils.synthesizeKey("KEY_ArrowUp");
   ok(
-    textbox.selectedButton.classList.contains("search-setting-button"),
+    textbox.selectedButton.classList.contains("search-setting-button-compact"),
     "the settings item should be selected"
   );
 
@@ -634,7 +634,7 @@ add_task(async function test_open_search() {
   // Pressing down on the last engine item selects the settings button.
   EventUtils.synthesizeKey("KEY_ArrowDown");
   ok(
-    textbox.selectedButton.classList.contains("search-setting-button"),
+    textbox.selectedButton.classList.contains("search-setting-button-compact"),
     "the settings item should be selected"
   );
 

browser/components/search/test/browser/browser_searchbar_openpopup.js

@@ -201,21 +201,18 @@ add_task(async function open_empty_hiddenOneOffs() {
     set: [["browser.search.hiddenOneOffs", engines.map(e => e.name).join(",")]],
   });
 
-  let oneOffButtons = searchPopup.searchOneOffsContainer.querySelector(
-    ".search-panel-one-offs"
-  );
   textbox.value = "foo";
   let promise = promiseEvent(searchPopup, "popupshown");
   EventUtils.synthesizeMouseAtCenter(textbox, {});
   await promise;
 
   Assert.ok(
-    oneOffButtons.hasAttribute("hidden"),
-    "The one-offs buttons should have the hidden attribute."
+    searchPopup.searchOneOffsContainer.hasAttribute("hidden"),
+    "The one-offs buttons container should have the hidden attribute."
   );
   Assert.ok(
-    BrowserTestUtils.is_hidden(oneOffButtons),
-    "The one-off buttons should be hidden."
+    BrowserTestUtils.is_hidden(searchPopup.searchOneOffsContainer),
+    "The one-off buttons container should be hidden."
   );
 
   promise = promiseEvent(searchPopup, "popuphidden");

browser/components/search/test/browser/browser_searchbar_smallpanel_keyboard_navigation.js

@@ -108,7 +108,7 @@ add_task(async function test_arrows() {
   }
 
   ok(
-    textbox.selectedButton.classList.contains("search-setting-button"),
+    textbox.selectedButton.classList.contains("search-setting-button-compact"),
     "the settings item should be selected"
   );
   EventUtils.synthesizeKey("KEY_ArrowDown");
@@ -120,7 +120,7 @@ add_task(async function test_arrows() {
   info("now test the up arrow key");
   EventUtils.synthesizeKey("KEY_ArrowUp");
   ok(
-    textbox.selectedButton.classList.contains("search-setting-button"),
+    textbox.selectedButton.classList.contains("search-setting-button-compact"),
     "the settings item should be selected"
   );
 
@@ -167,7 +167,7 @@ add_task(async function test_tab() {
   // One more <tab> selects the settings button.
   EventUtils.synthesizeKey("KEY_Tab");
   ok(
-    textbox.selectedButton.classList.contains("search-setting-button"),
+    textbox.selectedButton.classList.contains("search-setting-button-compact"),
     "the settings item should be selected"
   );
 
@@ -204,7 +204,7 @@ add_task(async function test_shift_tab() {
   // Press up once to select the last button.
   EventUtils.synthesizeKey("KEY_ArrowUp");
   ok(
-    textbox.selectedButton.classList.contains("search-setting-button"),
+    textbox.selectedButton.classList.contains("search-setting-button-compact"),
     "the settings item should be selected"
   );
 
@@ -321,7 +321,7 @@ add_task(async function test_alt_up() {
   // Cleanup for the next test.
   EventUtils.synthesizeKey("KEY_ArrowDown");
   ok(
-    textbox.selectedButton.classList.contains("search-setting-button"),
+    textbox.selectedButton.classList.contains("search-setting-button-compact"),
     "the settings item should be selected"
   );
   EventUtils.synthesizeKey("KEY_ArrowDown");
@@ -400,7 +400,7 @@ add_task(async function test_open_search() {
   // Pressing up once selects the setting button...
   EventUtils.synthesizeKey("KEY_ArrowUp");
   ok(
-    textbox.selectedButton.classList.contains("search-setting-button"),
+    textbox.selectedButton.classList.contains("search-setting-button-compact"),
     "the settings item should be selected"
   );
 
@@ -441,7 +441,7 @@ add_task(async function test_open_search() {
   // Pressing down on the last engine item selects the settings button.
   EventUtils.synthesizeKey("KEY_ArrowDown");
   ok(
-    textbox.selectedButton.classList.contains("search-setting-button"),
+    textbox.selectedButton.classList.contains("search-setting-button-compact"),
     "the settings item should be selected"
   );
 

browser/themes/shared/searchbar.inc.css

@@ -225,6 +225,7 @@
 .search-setting-button-compact {
   max-height: 32px;
   align-self: end;
+  margin-inline: var(--arrowpanel-menuitem-margin);
 }
 
 .search-setting-button-compact > .button-box > .button-icon {
@@ -233,3 +234,7 @@
   fill: currentColor;
   fill-opacity: var(--urlbar-icon-fill-opacity);
 }
+
+.search-one-offs[compact=true] .searchbar-separator {
+  display: none;
+}