Bug 1530334 - Port browser_ext_themes_autocomplete_popup.js to work with QuantumBar. r=mak
☠☠ backed out by 7520d595404d ☠ ☠
authorMark Banner <standard8@mozilla.com>
Fri, 08 Mar 2019 14:54:59 +0000
changeset 521048 bff0dee7c2ef
parent 521047 3c6fab986e99
child 521049 8d02942b98f5
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [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
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/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}`);
 });