Bug 1594062 - searchbar part - When selecting a one-off button with the keyboard, update the searchbar header accordingly. r=Standard8
authorMarco Bonardo <mbonardo@mozilla.com>
Tue, 19 Nov 2019 15:53:44 +0000
changeset 502644 7f80960886b9a5fafee81e6b95fe87ad5ace04c6
parent 502643 86d5143e79c8cbb6ea759f8eecfb31e41be3ea42
child 502645 44bb8023055ce5553735b036dd60c09429907dae
push id100950
push usermak77@bonardo.net
push dateTue, 19 Nov 2019 16:12:45 +0000
treeherderautoland@44bb8023055c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersStandard8
bugs1594062
milestone72.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 1594062 - searchbar part - When selecting a one-off button with the keyboard, update the searchbar header accordingly. r=Standard8 Show the selected one-off button engine in the searchbar header. Differential Revision: https://phabricator.services.mozilla.com/D53784
browser/components/search/content/autocomplete-popup.js
browser/components/search/test/browser/browser_searchbar_keyboard_navigation.js
--- a/browser/components/search/content/autocomplete-popup.js
+++ b/browser/components/search/content/autocomplete-popup.js
@@ -31,17 +31,29 @@
           // Uncollapse as long as we have a view which has >= 1 row.
           // The autocomplete binding itself will take care of uncollapsing later,
           // if we currently have no rows but end up having some in the future
           // when the search string changes
           this.richlistbox.collapsed = this.matchCount == 0;
         }
 
         // Show the current default engine in the top header of the panel.
-        this.updateHeader();
+        this.updateHeader().catch(Cu.reportError);
+
+        this._oneOffButtons.addEventListener(
+          "SelectedOneOffButtonChanged",
+          this
+        );
+      });
+
+      this.addEventListener("popuphiding", event => {
+        this._oneOffButtons.removeEventListener(
+          "SelectedOneOffButtonChanged",
+          this
+        );
       });
 
       /**
        * This handles clicks on the topmost "Foo Search" header in the
        * popup (hbox.search-panel-header]).
        */
       this.addEventListener("click", event => {
         if (event.button == 2) {
@@ -195,49 +207,70 @@
         if (where == "tab" && params.inBackground) {
           searchBar.focus();
         } else {
           searchBar.value = search;
         }
       }
     }
 
-    async updateHeader() {
-      let currentEngine;
-      if (PrivateBrowsingUtils.isWindowPrivate(window)) {
-        currentEngine = await Services.search.getDefaultPrivate();
-      } else {
-        currentEngine = await Services.search.getDefault();
+    async updateHeader(engine) {
+      if (!engine) {
+        if (PrivateBrowsingUtils.isWindowPrivate(window)) {
+          engine = await Services.search.getDefaultPrivate();
+        } else {
+          engine = await Services.search.getDefault();
+        }
       }
 
-      let uri = currentEngine.iconURI;
+      let uri = engine.iconURI;
       if (uri) {
         this.setAttribute("src", uri.spec);
       } else {
         // If the default has just been changed to a provider without icon,
         // avoid showing the icon of the previous default provider.
         this.removeAttribute("src");
       }
 
       let headerText = this.bundle.formatStringFromName("searchHeader", [
-        currentEngine.name,
+        engine.name,
       ]);
       this.searchbarEngineName.setAttribute("value", headerText);
-      this.searchbarEngine.engine = currentEngine;
+      this.searchbarEngine.engine = engine;
     }
 
     /**
      * This is called when a one-off is clicked and when "search in new tab"
      * is selected from a one-off context menu.
      */
     /* eslint-disable-next-line valid-jsdoc */
     handleOneOffSearch(event, engine, where, params) {
       let searchbar = document.getElementById("searchbar");
       searchbar.handleSearchCommandWhere(event, engine, where, params);
     }
+
+    /**
+     * Passes DOM events for the popup to the _on_<event type> methods.
+     * @param {Event} event
+     *   DOM event from the <popup>.
+     */
+    handleEvent(event) {
+      let methodName = "_on_" + event.type;
+      if (methodName in this) {
+        this[methodName](event);
+      } else {
+        throw new Error("Unrecognized UrlbarView event: " + event.type);
+      }
+    }
+    _on_SelectedOneOffButtonChanged() {
+      let engine =
+        this.oneOffButtons.selectedButton &&
+        this.oneOffButtons.selectedButton.engine;
+      this.updateHeader(engine).catch(Cu.reportError);
+    }
   }
 
   customElements.define(
     "search-autocomplete-richlistbox-popup",
     MozSearchAutocompleteRichlistboxPopup,
     {
       extends: "panel",
     }
--- a/browser/components/search/test/browser/browser_searchbar_keyboard_navigation.js
+++ b/browser/components/search/test/browser/browser_searchbar_keyboard_navigation.js
@@ -22,16 +22,38 @@ function getOpenSearchItems() {
   }
 
   return os;
 }
 
 let searchbar;
 let textbox;
 
+async function checkHeader(engine) {
+  // The header can be updated after getting the engine, so we may have to
+  // wait for it.
+  let header = searchPopup.searchbarEngineName;
+  if (!header.getAttribute("value").includes(engine.name)) {
+    await new Promise(resolve => {
+      let observer = new MutationObserver(() => {
+        observer.disconnect();
+        resolve();
+      });
+      observer.observe(searchPopup.searchbarEngineName, {
+        attributes: true,
+        attributeFilter: ["value"],
+      });
+    });
+  }
+  Assert.ok(
+    header.getAttribute("value").includes(engine.name),
+    "Should have the correct engine name displayed in the header"
+  );
+}
+
 add_task(async function init() {
   searchbar = await gCUITestUtils.addSearchBar();
   registerCleanupFunction(() => {
     gCUITestUtils.removeSearchBar();
   });
   textbox = searchbar.textbox;
 
   await promiseNewEngine("testEngine.xml");
@@ -90,63 +112,71 @@ add_task(async function test_arrows() {
       i,
       "the suggestion at index " + i + " should be selected"
     );
     is(
       textbox.value,
       kValues[i],
       "the textfield value should be " + kValues[i]
     );
+    await checkHeader(Services.search.defaultEngine);
   }
 
   // Pressing down again should remove suggestion selection and change the text
   // field value back to what the user typed, and select the first one-off.
   EventUtils.synthesizeKey("KEY_ArrowDown");
   is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
   is(
     textbox.value,
     kUserValue,
     "the textfield value should be back to initial value"
   );
 
   // now cycle through the one-off items, the first one is already selected.
   for (let i = 0; i < oneOffs.length; ++i) {
+    let oneOffButton = oneOffs[i];
     is(
       textbox.selectedButton,
-      oneOffs[i],
+      oneOffButton,
       "the one-off button #" + (i + 1) + " should be selected"
     );
+    await checkHeader(oneOffButton.engine);
     EventUtils.synthesizeKey("KEY_ArrowDown");
   }
 
   ok(
     textbox.selectedButton.classList.contains("search-setting-button"),
     "the settings item should be selected"
   );
+  await checkHeader(Services.search.defaultEngine);
   EventUtils.synthesizeKey("KEY_ArrowDown");
 
   // We should now be back to the initial situation.
   is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
   ok(!textbox.selectedButton, "no one-off button should be selected");
+  await checkHeader(Services.search.defaultEngine);
 
   info("now test the up arrow key");
   EventUtils.synthesizeKey("KEY_ArrowUp");
   ok(
     textbox.selectedButton.classList.contains("search-setting-button"),
     "the settings item should be selected"
   );
+  await checkHeader(Services.search.defaultEngine);
 
   // cycle through the one-off items, the first one is already selected.
   for (let i = oneOffs.length; i; --i) {
     EventUtils.synthesizeKey("KEY_ArrowUp");
+    let oneOffButton = oneOffs[i - 1];
     is(
       textbox.selectedButton,
-      oneOffs[i - 1],
+      oneOffButton,
       "the one-off button #" + i + " should be selected"
     );
+    await checkHeader(oneOffButton.engine);
   }
 
   // Another press on up should clear the one-off selection and select the
   // last suggestion.
   EventUtils.synthesizeKey("KEY_ArrowUp");
   ok(!textbox.selectedButton, "no one-off button should be selected");
 
   for (let i = kValues.length - 1; i >= 0; --i) {
@@ -155,16 +185,17 @@ add_task(async function test_arrows() {
       i,
       "the suggestion at index " + i + " should be selected"
     );
     is(
       textbox.value,
       kValues[i],
       "the textfield value should be " + kValues[i]
     );
+    await checkHeader(Services.search.defaultEngine);
     EventUtils.synthesizeKey("KEY_ArrowUp");
   }
 
   is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
   is(
     textbox.value,
     kUserValue,
     "the textfield value should be back to initial value"