Bug 1530334 - Port browser_ext_themes_autocomplete_popup.js to work with QuantumBar. r=mak
authorMark Banner <standard8@mozilla.com>
Sun, 10 Mar 2019 13:35:36 +0000
changeset 524285 1c9116976d7fa655caa99eff925ff25adcbf09b8
parent 524284 ea81ce60cfead1f1a655ce92af4559ca638e54f1
child 524286 6b61335177b8506c1f1d4dfb2640b91a4e07d192
push id2032
push userffxbld-merge
push dateMon, 13 May 2019 09:36:57 +0000
treeherdermozilla-release@455c1065dcbe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmak
bugs1530334
milestone67.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 1530334 - Port browser_ext_themes_autocomplete_popup.js to work with QuantumBar. r=mak Differential Revision: https://phabricator.services.mozilla.com/D22289
browser/components/urlbar/tests/UrlbarTestUtils.jsm
browser/components/urlbar/tests/browser/browser_urlbar_empty_search.js
toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
--- a/browser/components/urlbar/tests/UrlbarTestUtils.jsm
+++ b/browser/components/urlbar/tests/UrlbarTestUtils.jsm
@@ -141,16 +141,28 @@ var UrlbarTestUtils = {
    * @returns {number} the number of results.
    */
   getResultCount(win) {
     let urlbar = getUrlbarAbstraction(win);
     return urlbar.getResultCount();
   },
 
   /**
+   * Returns the results panel object associated with the window.
+   * @note generally tests should use getDetailsOfResultAt rather than
+   * accessing panel elements directly.
+   * @param {object} win The window containing the urlbar
+   * @returns {object} the results panel object.
+   */
+  getPanel(win) {
+    let urlbar = getUrlbarAbstraction(win);
+    return urlbar.panel;
+  },
+
+  /**
    * Ensures at least one search suggestion is present.
    * @param {object} win The window containing the urlbar
    * @returns {boolean} whether at least one search suggestion is present.
    */
   promiseSuggestionsPresent(win) {
     let urlbar = getUrlbarAbstraction(win);
     return urlbar.promiseSearchSuggestions();
   },
@@ -396,16 +408,24 @@ class UrlbarAbstraction {
       let actions = element.getElementsByClassName("urlbarView-action");
       let typeIcon = element.querySelector(".urlbarView-type-icon");
       let typeIconStyle = this.window.getComputedStyle(typeIcon);
       details.displayed = {
         title: element.getElementsByClassName("urlbarView-title")[0].textContent,
         action: actions.length > 0 ? actions[0].textContent : null,
         typeIcon: typeIconStyle["background-image"],
       };
+      let actionElement = element.getElementsByClassName("urlbarView-action")[0];
+      let urlElement = element.getElementsByClassName("urlbarView-url")[0];
+      details.element = {
+        action: actionElement,
+        row: element,
+        separator: urlElement || actionElement,
+        url: urlElement,
+      };
       if (details.type == UrlbarUtils.RESULT_TYPE.SEARCH) {
         details.searchParams = {
           engine: context.results[index].payload.engine,
           keyword: context.results[index].payload.keyword,
           query: context.results[index].payload.query,
           suggestion: context.results[index].payload.suggestion,
         };
       }
@@ -422,16 +442,22 @@ class UrlbarAbstraction {
       details.tags = style.includes("tag") ?
         [...element.getElementsByClassName("ac-tags")].map(e => e.textContent) : [];
       let typeIconStyle = this.window.getComputedStyle(element._typeIcon);
       details.displayed = {
         title: element._titleText.textContent,
         action: action ? element._actionText.textContent : "",
         typeIcon: typeIconStyle.listStyleImage,
       };
+      details.element = {
+        action: element._actionText,
+        row: element,
+        separator: element._separator,
+        url: element._urlText,
+      };
       if (details.type == UrlbarUtils.RESULT_TYPE.SEARCH) {
         details.searchParams = {
           engine: action.params.engineName,
           keyword: action.params.alias,
           query: action.params.input,
           suggestion: action.params.searchSuggestion,
         };
       }
--- a/browser/components/urlbar/tests/browser/browser_urlbar_empty_search.js
+++ b/browser/components/urlbar/tests/browser/browser_urlbar_empty_search.js
@@ -22,30 +22,35 @@ add_task(async function test_setup() {
 
 add_task(async function test_empty() {
   info("Test searching for nothing");
   await promiseAutocompleteResultPopup("", window, true);
   // The first search collects the results, the following ones check results
   // are the same.
   let results = [{}]; // Add a fake first result, to account for heuristic.
   for (let i = 0; i < await UrlbarTestUtils.getResultCount(window); ++i) {
-    results.push(await UrlbarTestUtils.getDetailsOfResultAt(window, i));
+    let result = await UrlbarTestUtils.getDetailsOfResultAt(window, i);
+    // Don't compare the element part of the results.
+    delete result.element;
+    results.push(result);
   }
 
   for (let str of [" ", "  "]) {
     info(`Test searching for "${str}"`);
     await promiseAutocompleteResultPopup(str, window, true);
     // Skip the heuristic result.
     Assert.ok((await UrlbarTestUtils.getDetailsOfResultAt(window, 0)).heuristic,
               "The first result is heuristic");
     let length = await UrlbarTestUtils.getResultCount(window);
     Assert.equal(length, results.length, "Comparing results count");
     for (let i = 1; i < length; ++i) {
-      Assert.deepEqual(await UrlbarTestUtils.getDetailsOfResultAt(window, i),
-                        results[i],
+      let result = await UrlbarTestUtils.getDetailsOfResultAt(window, i);
+      // Don't compare the element part of the results.
+      delete result.element;
+      Assert.deepEqual(result, results[i],
                        `Comparing result at index ${i}`);
     }
   }
   await UrlbarTestUtils.promisePopupClose(window);
 });
 
 add_task(async function test_backspace_empty() {
   info("Testing that deleting the input value via backspace closes the popup");
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
@@ -14,52 +14,19 @@ const POPUP_ACTION_COLOR_DARK = "#008f8a
 const POPUP_URL_COLOR_BRIGHT = "#45a1ff";
 const POPUP_ACTION_COLOR_BRIGHT = "#30e60b";
 
 const SEARCH_TERM = "urlbar-reflows-" + Date.now();
 const ONEOFF_URLBAR_PREF = "browser.urlbar.oneOffSearches";
 
 XPCOMUtils.defineLazyModuleGetters(this, {
   PlacesTestUtils: "resource://testing-common/PlacesTestUtils.jsm",
+  UrlbarTestUtils: "resource://testing-common/UrlbarTestUtils.jsm",
 });
 
-function promisePopupShown(popup) {
-  return new Promise(resolve => {
-    if (popup.state == "open") {
-      resolve();
-    } else {
-      popup.addEventListener("popupshown", function(event) {
-        resolve();
-      }, {once: true});
-    }
-  });
-}
-
-async function promiseAutocompleteResultPopup(inputText) {
-  gURLBar.focus();
-  gURLBar.value = inputText;
-  gURLBar.controller.startSearch(inputText);
-  await promisePopupShown(gURLBar.popup);
-  await BrowserTestUtils.waitForCondition(() => {
-    return gURLBar.controller.searchStatus >=
-      Ci.nsIAutoCompleteController.STATUS_COMPLETE_NO_MATCH;
-  });
-}
-
-async function waitForAutocompleteResultAt(index) {
-  let searchString = gURLBar.controller.searchString;
-  await BrowserTestUtils.waitForCondition(
-    () => gURLBar.popup.richlistbox.itemChildren.length > index &&
-          gURLBar.popup.richlistbox.itemChildren[index].getAttribute("ac-text") == searchString,
-    `Waiting for the autocomplete result for "${searchString}" at [${index}] to appear`);
-  // Ensure the addition is complete, for proper mouse events on the entries.
-  await new Promise(resolve => window.requestIdleCallback(resolve, {timeout: 1000}));
-  return gURLBar.popup.richlistbox.itemChildren[index];
-}
-
 add_task(async function setup() {
   await PlacesUtils.history.clear();
   const NUM_VISITS = 10;
   let visits = [];
 
   for (let i = 0; i < NUM_VISITS; ++i) {
     visits.push({
       uri: `http://example.com/urlbar-reflows-${i}`,
@@ -70,16 +37,18 @@ add_task(async function setup() {
   await PlacesTestUtils.addVisits(visits);
 
   registerCleanupFunction(async function() {
     await PlacesUtils.history.clear();
   });
 });
 
 add_task(async function test_popup_url() {
+  const quantumbar = UrlbarPrefs.get("quantumbar");
+
   // Load extension with brighttext not set
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "images": {
           "theme_frame": "image1.png",
         },
         "colors": {
@@ -111,57 +80,60 @@ add_task(async function test_popup_url()
 
   let visits = [];
 
   for (let i = 0; i < maxResults; i++) {
     visits.push({uri: makeURI("http://example.com/autocomplete/?" + i)});
   }
 
   await PlacesTestUtils.addVisits(visits);
-  await promiseAutocompleteResultPopup("example.com/autocomplete");
-  await waitForAutocompleteResultAt(maxResults - 1);
+  await UrlbarTestUtils.promiseAutocompleteResultPopup(window,
+                                                       "example.com/autocomplete",
+                                                       waitForFocus);
+  await UrlbarTestUtils.waitForAutocompleteResultAt(window, maxResults - 1);
 
-  let popup = gURLBar.popup;
-  let results = popup.richlistbox.itemChildren;
-  is(results.length, maxResults,
-     "Should get maxResults=" + maxResults + " results");
+  Assert.equal(UrlbarTestUtils.getResultCount(window), maxResults,
+               "Should get maxResults=" + maxResults + " results");
 
+  let popup = UrlbarTestUtils.getPanel(window);
   let popupCS = window.getComputedStyle(popup);
 
   Assert.equal(popupCS.backgroundColor,
                `rgb(${hexToRGB(POPUP_COLOR).join(", ")})`,
                `Popup background color should be set to ${POPUP_COLOR}`);
 
   testBorderColor(popup, POPUP_BORDER_COLOR);
 
   Assert.equal(popupCS.color,
                `rgb(${hexToRGB(POPUP_TEXT_COLOR_DARK).join(", ")})`,
                `Popup color should be set to ${POPUP_TEXT_COLOR_DARK}`);
 
   // Set the selected attribute to true to test the highlight popup properties
-  results[1].setAttribute("selected", "true");
-  let resultCS = window.getComputedStyle(results[1]);
+  UrlbarTestUtils.setSelectedIndex(window, 1);
+  let actionResult = await UrlbarTestUtils.getDetailsOfResultAt(window, 0);
+  let urlResult = await UrlbarTestUtils.getDetailsOfResultAt(window, 1);
+  let resultCS = window.getComputedStyle(urlResult.element.row);
 
   Assert.equal(resultCS.backgroundColor,
                `rgb(${hexToRGB(POPUP_SELECTED_COLOR).join(", ")})`,
                `Popup highlight background color should be set to ${POPUP_SELECTED_COLOR}`);
 
   Assert.equal(resultCS.color,
                `rgb(${hexToRGB(POPUP_SELECTED_TEXT_COLOR).join(", ")})`,
                `Popup highlight color should be set to ${POPUP_SELECTED_TEXT_COLOR}`);
 
-  results[1].removeAttribute("selected");
+  // Now set the index to somewhere not on the first two, so that we can test both
+  // url and action text colors.
+  UrlbarTestUtils.setSelectedIndex(window, 2);
 
-  let urlText = results[1]._urlText;
-  Assert.equal(window.getComputedStyle(urlText).color,
+  Assert.equal(window.getComputedStyle(urlResult.element.url).color,
                `rgb(${hexToRGB(POPUP_URL_COLOR_DARK).join(", ")})`,
                `Urlbar popup url color should be set to ${POPUP_URL_COLOR_DARK}`);
 
-  let actionText = results[1]._actionText;
-  Assert.equal(window.getComputedStyle(actionText).color,
+  Assert.equal(window.getComputedStyle(actionResult.element.action).color,
                `rgb(${hexToRGB(POPUP_ACTION_COLOR_DARK).join(", ")})`,
                `Urlbar popup action color should be set to ${POPUP_ACTION_COLOR_DARK}`);
 
   let root = document.documentElement;
   Assert.equal(root.getAttribute("lwt-popup-brighttext"),
                "",
                "brighttext should not be set!");
   Assert.equal(root.getAttribute("lwt-popup-darktext"),
@@ -198,30 +170,27 @@ add_task(async function test_popup_url()
 
   await extension.startup();
 
   popupCS = window.getComputedStyle(popup);
   Assert.equal(popupCS.color,
                `rgb(${hexToRGB(POPUP_TEXT_COLOR_BRIGHT).join(", ")})`,
                `Popup color should be set to ${POPUP_TEXT_COLOR_BRIGHT}`);
 
-  urlText = results[1]._urlText;
-  Assert.equal(window.getComputedStyle(urlText).color,
+  Assert.equal(window.getComputedStyle(urlResult.element.url).color,
                `rgb(${hexToRGB(POPUP_URL_COLOR_BRIGHT).join(", ")})`,
                `Urlbar popup url color should be set to ${POPUP_URL_COLOR_BRIGHT}`);
 
-  actionText = results[1]._actionText;
-  Assert.equal(window.getComputedStyle(actionText).color,
+  Assert.equal(window.getComputedStyle(actionResult.element.action).color,
                `rgb(${hexToRGB(POPUP_ACTION_COLOR_BRIGHT).join(", ")})`,
                `Urlbar popup action color should be set to ${POPUP_ACTION_COLOR_BRIGHT}`);
 
   // Since brighttext is enabled, the seperator color should be
   // POPUP_TEXT_COLOR_BRIGHT with added alpha.
-  let separator = results[1]._separator;
-  Assert.equal(window.getComputedStyle(separator).color,
+  Assert.equal(window.getComputedStyle(urlResult.element.separator, quantumbar ? ":before" : null).color,
                `rgba(${hexToRGB(POPUP_TEXT_COLOR_BRIGHT).join(", ")}, 0.5)`,
                `Urlbar popup separator color should be set to ${POPUP_TEXT_COLOR_BRIGHT} with alpha`);
 
   Assert.equal(root.getAttribute("lwt-popup-brighttext"),
                "true",
                "brighttext should be set to true!");
   Assert.equal(root.getAttribute("lwt-popup-darktext"),
                "",
@@ -240,13 +209,12 @@ add_task(async function test_popup_url()
 
   // Calculate what GrayText should be. May differ between platforms.
   let span = document.createXULElement("span");
   span.style.color = "GrayText";
   document.documentElement.appendChild(span);
   let GRAY_TEXT = window.getComputedStyle(span).color;
   span.remove();
 
-  separator = results[1]._separator;
-  Assert.equal(window.getComputedStyle(separator).color,
+  Assert.equal(window.getComputedStyle(urlResult.element.separator, quantumbar ? ":before" : null).color,
                GRAY_TEXT,
                `Urlbar popup separator color should be set to ${GRAY_TEXT}`);
 });