summaryrefslogtreecommitdiffstats
path: root/browser/components/urlbar/UrlbarView.sys.mjs
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--browser/components/urlbar/UrlbarView.sys.mjs3355
1 files changed, 3355 insertions, 0 deletions
diff --git a/browser/components/urlbar/UrlbarView.sys.mjs b/browser/components/urlbar/UrlbarView.sys.mjs
new file mode 100644
index 0000000000..fe6b0e6ce0
--- /dev/null
+++ b/browser/components/urlbar/UrlbarView.sys.mjs
@@ -0,0 +1,3355 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { AppConstants } from "resource://gre/modules/AppConstants.sys.mjs";
+import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+ L10nCache: "resource:///modules/UrlbarUtils.sys.mjs",
+ UrlbarPrefs: "resource:///modules/UrlbarPrefs.sys.mjs",
+ UrlbarProviderQuickSuggest:
+ "resource:///modules/UrlbarProviderQuickSuggest.sys.mjs",
+ UrlbarProviderTopSites: "resource:///modules/UrlbarProviderTopSites.sys.mjs",
+ UrlbarProvidersManager: "resource:///modules/UrlbarProvidersManager.sys.mjs",
+ UrlbarProviderWeather: "resource:///modules/UrlbarProviderWeather.sys.mjs",
+ UrlbarResult: "resource:///modules/UrlbarResult.sys.mjs",
+ UrlbarSearchOneOffs: "resource:///modules/UrlbarSearchOneOffs.sys.mjs",
+ UrlbarTokenizer: "resource:///modules/UrlbarTokenizer.sys.mjs",
+ UrlbarUtils: "resource:///modules/UrlbarUtils.sys.mjs",
+});
+
+XPCOMUtils.defineLazyModuleGetters(lazy, {
+ BrowserWindowTracker: "resource:///modules/BrowserWindowTracker.jsm",
+ ObjectUtils: "resource://gre/modules/ObjectUtils.jsm",
+});
+
+XPCOMUtils.defineLazyServiceGetter(
+ lazy,
+ "styleSheetService",
+ "@mozilla.org/content/style-sheet-service;1",
+ "nsIStyleSheetService"
+);
+
+// Query selector for selectable elements in results.
+const SELECTABLE_ELEMENT_SELECTOR = "[role=button], [selectable]";
+const KEYBOARD_SELECTABLE_ELEMENT_SELECTOR =
+ "[role=button]:not([keyboard-inaccessible]), [selectable]";
+
+const ZERO_PREFIX_HISTOGRAM_DWELL_TIME = "FX_URLBAR_ZERO_PREFIX_DWELL_TIME_MS";
+const ZERO_PREFIX_SCALAR_ABANDONMENT = "urlbar.zeroprefix.abandonment";
+const ZERO_PREFIX_SCALAR_ENGAGEMENT = "urlbar.zeroprefix.engagement";
+const ZERO_PREFIX_SCALAR_EXPOSURE = "urlbar.zeroprefix.exposure";
+
+const RESULT_MENU_COMMANDS = {
+ DISMISS: "dismiss",
+ HELP: "help",
+};
+
+const getBoundsWithoutFlushing = element =>
+ element.ownerGlobal.windowUtils.getBoundsWithoutFlushing(element);
+
+// Used to get a unique id to use for row elements, it wraps at 9999, that
+// should be plenty for our needs.
+let gUniqueIdSerial = 1;
+function getUniqueId(prefix) {
+ return prefix + (gUniqueIdSerial++ % 9999);
+}
+
+/**
+ * Receives and displays address bar autocomplete results.
+ */
+export class UrlbarView {
+ // Stale rows are removed on a timer with this timeout.
+ static removeStaleRowsTimeout = 400;
+
+ /**
+ * @param {UrlbarInput} input
+ * The UrlbarInput instance belonging to this UrlbarView instance.
+ */
+ constructor(input) {
+ this.input = input;
+ this.panel = input.panel;
+ this.controller = input.controller;
+ this.document = this.panel.ownerDocument;
+ this.window = this.document.defaultView;
+
+ this.#mainContainer = this.panel.querySelector(".urlbarView-body-inner");
+ this.#rows = this.panel.querySelector(".urlbarView-results");
+ this.resultMenu = this.panel.querySelector(".urlbarView-result-menu");
+ this.#resultMenuCommands = new WeakMap();
+
+ this.#rows.addEventListener("mousedown", this);
+
+ // For the horizontal fade-out effect, set the overflow attribute on result
+ // rows when they overflow.
+ this.#rows.addEventListener("overflow", this);
+ this.#rows.addEventListener("underflow", this);
+
+ this.resultMenu.addEventListener("command", this);
+ this.resultMenu.addEventListener("popupshowing", this);
+
+ // `noresults` is used to style the one-offs without their usual top border
+ // when no results are present.
+ this.panel.setAttribute("noresults", "true");
+
+ this.controller.setView(this);
+ this.controller.addQueryListener(this);
+ // This is used by autoOpen to avoid flickering results when reopening
+ // previously abandoned searches.
+ this.queryContextCache = new QueryContextCache(5);
+
+ // We cache l10n strings to avoid Fluent's async lookup.
+ this.#l10nCache = new lazy.L10nCache(this.document.l10n);
+
+ for (let viewTemplate of UrlbarView.dynamicViewTemplatesByName.values()) {
+ if (viewTemplate.stylesheet) {
+ addDynamicStylesheet(this.window, viewTemplate.stylesheet);
+ }
+ }
+ }
+
+ get oneOffSearchButtons() {
+ if (!this.#oneOffSearchButtons) {
+ this.#oneOffSearchButtons = new lazy.UrlbarSearchOneOffs(this);
+ this.#oneOffSearchButtons.addEventListener(
+ "SelectedOneOffButtonChanged",
+ this
+ );
+ }
+ return this.#oneOffSearchButtons;
+ }
+
+ /**
+ * Whether the panel is open.
+ *
+ * @returns {boolean}
+ */
+ get isOpen() {
+ return this.input.hasAttribute("open");
+ }
+
+ get allowEmptySelection() {
+ let { heuristicResult } = this.#queryContext || {};
+ return !heuristicResult || !this.#shouldShowHeuristic(heuristicResult);
+ }
+
+ get selectedRowIndex() {
+ if (!this.isOpen) {
+ return -1;
+ }
+
+ let selectedRow = this.#getSelectedRow();
+
+ if (!selectedRow) {
+ return -1;
+ }
+
+ return selectedRow.result.rowIndex;
+ }
+
+ set selectedRowIndex(val) {
+ if (!this.isOpen) {
+ throw new Error(
+ "UrlbarView: Cannot select an item if the view isn't open."
+ );
+ }
+
+ if (val < 0) {
+ this.#selectElement(null);
+ return;
+ }
+
+ let items = Array.from(this.#rows.children).filter(r =>
+ this.#isElementVisible(r)
+ );
+ if (val >= items.length) {
+ throw new Error(`UrlbarView: Index ${val} is out of bounds.`);
+ }
+
+ // Select the first selectable element inside the row. If it doesn't
+ // contain a selectable element, clear the selection.
+ let row = items[val];
+ let element = this.#getNextSelectableElement(row);
+ if (this.#getRowFromElement(element) != row) {
+ element = null;
+ }
+
+ this.#selectElement(element);
+ }
+
+ get selectedElementIndex() {
+ if (!this.isOpen || !this.#selectedElement) {
+ return -1;
+ }
+
+ return this.#selectedElement.elementIndex;
+ }
+
+ /**
+ * @returns {UrlbarResult}
+ * The currently selected result.
+ */
+ get selectedResult() {
+ if (!this.isOpen) {
+ return null;
+ }
+
+ return this.#getSelectedRow()?.result;
+ }
+
+ /**
+ * @returns {Element}
+ * The currently selected element.
+ */
+ get selectedElement() {
+ if (!this.isOpen) {
+ return null;
+ }
+
+ return this.#selectedElement;
+ }
+
+ /**
+ * @returns {boolean}
+ * Whether the SPACE key should activate the selected element (if any)
+ * instead of adding to the input value.
+ */
+ shouldSpaceActivateSelectedElement() {
+ // We want SPACE to activate buttons only.
+ if (this.selectedElement?.getAttribute("role") != "button") {
+ return false;
+ }
+ // Make sure the input field is empty, otherwise the user might want to add
+ // a space to the current search string. As it stands, selecting a button
+ // should always clear the input field, so this is just an extra safeguard.
+ if (this.input.value) {
+ return false;
+ }
+ return true;
+ }
+
+ /**
+ * Clears selection, regardless of view status.
+ */
+ clearSelection() {
+ this.#selectElement(null, { updateInput: false });
+ }
+
+ /**
+ * @returns {number}
+ * The number of visible results in the view. Note that this may be larger
+ * than the number of results in the current query context since the view
+ * may be showing stale results.
+ */
+ get visibleRowCount() {
+ let sum = 0;
+ for (let row of this.#rows.children) {
+ sum += Number(this.#isElementVisible(row));
+ }
+ return sum;
+ }
+
+ /**
+ * Returns the result of the row containing the given element, or the result
+ * of the element if it itself is a row.
+ *
+ * @param {Element} element
+ * An element in the view.
+ * @returns {UrlbarResult}
+ * The result of the element's row.
+ */
+ getResultFromElement(element) {
+ return element?.classList.contains("urlbarView-result-menuitem")
+ ? this.#resultMenuResult
+ : this.#getRowFromElement(element)?.result;
+ }
+
+ /**
+ * @param {number} index
+ * The index from which to fetch the result.
+ * @returns {UrlbarResult}
+ * The result at `index`. Null if the view is closed or if there are no
+ * results.
+ */
+ getResultAtIndex(index) {
+ if (
+ !this.isOpen ||
+ !this.#rows.children.length ||
+ index >= this.#rows.children.length
+ ) {
+ return null;
+ }
+
+ return this.#rows.children[index].result;
+ }
+
+ /**
+ * @param {UrlbarResult} result A result.
+ * @returns {boolean} True if the given result is selected.
+ */
+ resultIsSelected(result) {
+ if (this.selectedRowIndex < 0) {
+ return false;
+ }
+
+ return result.rowIndex == this.selectedRowIndex;
+ }
+
+ /**
+ * Moves the view selection forward or backward.
+ *
+ * @param {number} amount
+ * The number of steps to move.
+ * @param {object} options Options object
+ * @param {boolean} [options.reverse]
+ * Set to true to select the previous item. By default the next item
+ * will be selected.
+ * @param {boolean} [options.userPressedTab]
+ * Set to true if the user pressed Tab to select a result. Default false.
+ */
+ selectBy(amount, { reverse = false, userPressedTab = false } = {}) {
+ if (!this.isOpen) {
+ throw new Error(
+ "UrlbarView: Cannot select an item if the view isn't open."
+ );
+ }
+
+ // Freeze results as the user is interacting with them, unless we are
+ // deferring events while waiting for critical results.
+ if (!this.input.eventBufferer.isDeferringEvents) {
+ this.controller.cancelQuery();
+ }
+
+ if (!userPressedTab) {
+ let { selectedRowIndex } = this;
+ let end = this.visibleRowCount - 1;
+ if (selectedRowIndex == -1) {
+ this.selectedRowIndex = reverse ? end : 0;
+ return;
+ }
+ let endReached = selectedRowIndex == (reverse ? 0 : end);
+ if (endReached) {
+ if (this.allowEmptySelection) {
+ this.#selectElement(null);
+ } else {
+ this.selectedRowIndex = reverse ? end : 0;
+ }
+ return;
+ }
+ this.selectedRowIndex = Math.max(
+ 0,
+ Math.min(end, selectedRowIndex + amount * (reverse ? -1 : 1))
+ );
+ return;
+ }
+
+ // Tab key handling below.
+
+ // Do not set aria-activedescendant if the user is moving to a
+ // tab-to-search result with the Tab key. If
+ // accessibility.tabToSearch.announceResults is set, the tab-to-search
+ // result was announced to the user as they typed. We don't set
+ // aria-activedescendant so the user doesn't think they have to press
+ // Enter to enter search mode. See bug 1647929.
+ const isSkippableTabToSearchAnnounce = selectedElt => {
+ let result = this.getResultFromElement(selectedElt);
+ let skipAnnouncement =
+ result?.providerName == "TabToSearch" &&
+ !this.#announceTabToSearchOnSelection &&
+ lazy.UrlbarPrefs.get("accessibility.tabToSearch.announceResults");
+ if (skipAnnouncement) {
+ // Once we skip setting aria-activedescendant once, we should not skip
+ // it again if the user returns to that result.
+ this.#announceTabToSearchOnSelection = true;
+ }
+ return skipAnnouncement;
+ };
+
+ let selectedElement = this.#selectedElement;
+
+ // We cache the first and last rows since they will not change while
+ // selectBy is running.
+ let firstSelectableElement = this.#getFirstSelectableElement();
+ // #getLastSelectableElement will not return an element that is over
+ // maxResults and thus may be hidden and not selectable.
+ let lastSelectableElement = this.#getLastSelectableElement();
+
+ if (!selectedElement) {
+ selectedElement = reverse
+ ? lastSelectableElement
+ : firstSelectableElement;
+ this.#selectElement(selectedElement, {
+ setAccessibleFocus: !isSkippableTabToSearchAnnounce(selectedElement),
+ });
+ return;
+ }
+ let endReached = reverse
+ ? selectedElement == firstSelectableElement
+ : selectedElement == lastSelectableElement;
+ if (endReached) {
+ if (this.allowEmptySelection) {
+ selectedElement = null;
+ } else {
+ selectedElement = reverse
+ ? lastSelectableElement
+ : firstSelectableElement;
+ }
+ this.#selectElement(selectedElement, {
+ setAccessibleFocus: !isSkippableTabToSearchAnnounce(selectedElement),
+ });
+ return;
+ }
+
+ while (amount-- > 0) {
+ let next = reverse
+ ? this.#getPreviousSelectableElement(selectedElement)
+ : this.#getNextSelectableElement(selectedElement);
+ if (!next) {
+ break;
+ }
+ selectedElement = next;
+ }
+ this.#selectElement(selectedElement, {
+ setAccessibleFocus: !isSkippableTabToSearchAnnounce(selectedElement),
+ });
+ }
+
+ async acknowledgeFeedback(result) {
+ let row = this.#rows.children[result.rowIndex];
+ if (!row) {
+ return;
+ }
+
+ let l10n = { id: "firefox-suggest-feedback-acknowledgment" };
+ await this.#l10nCache.ensure(l10n);
+ if (row.result != result) {
+ return;
+ }
+
+ let { value } = this.#l10nCache.get(l10n);
+ row.setAttribute("feedback-acknowledgment", value);
+ this.window.A11yUtils.announce({
+ raw: value,
+ source: row._content.closest("[role=option]"),
+ });
+ }
+
+ acknowledgeDismissal(result) {
+ let row = this.#rows.children[result.rowIndex];
+ if (!row || row.result != result) {
+ return;
+ }
+
+ // The row is no longer selectable. It's necessary to clear the selection
+ // before replacing the row because replacement will likely create a new
+ // `urlbarView-row-inner`, which will interfere with the ability of
+ // `#selectElement()` to clear the old selection after replacement, below.
+ let isSelected = this.#getSelectedRow() == row;
+ if (isSelected) {
+ this.#selectElement(null, { updateInput: false });
+ }
+ this.#setRowSelectable(row, false);
+
+ // Replace the row with a dismissal acknowledgment tip.
+ let tip = new lazy.UrlbarResult(
+ lazy.UrlbarUtils.RESULT_TYPE.TIP,
+ lazy.UrlbarUtils.RESULT_SOURCE.OTHER_LOCAL,
+ {
+ type: "dismissalAcknowledgment",
+ titleL10n: { id: "firefox-suggest-dismissal-acknowledgment" },
+ buttons: [{ l10n: { id: "urlbar-search-tips-confirm-short" } }],
+ icon: "chrome://branding/content/icon32.png",
+ }
+ );
+ this.#updateRow(row, tip);
+ this.#updateIndices();
+
+ // If the row was selected, move the selection to the tip button.
+ if (isSelected) {
+ this.#selectElement(this.#getNextSelectableElement(row), {
+ updateInput: false,
+ });
+ }
+ }
+
+ removeAccessibleFocus() {
+ this.#setAccessibleFocus(null);
+ }
+
+ clear() {
+ this.#rows.textContent = "";
+ this.panel.setAttribute("noresults", "true");
+ this.clearSelection();
+ this.visibleResults = [];
+ }
+
+ /**
+ * Closes the view, cancelling the query if necessary.
+ *
+ * @param {object} options Options object
+ * @param {boolean} [options.elementPicked]
+ * True if the view is being closed because a result was picked.
+ * @param {boolean} [options.showFocusBorder]
+ * True if the Urlbar focus border should be shown after the view is closed.
+ */
+ close({ elementPicked = false, showFocusBorder = true } = {}) {
+ this.controller.cancelQuery();
+ // We do not show the focus border when an element is picked because we'd
+ // flash it just before the input is blurred. The focus border is removed
+ // in UrlbarInput._on_blur.
+ if (!elementPicked && showFocusBorder) {
+ this.input.removeAttribute("suppress-focus-border");
+ }
+
+ if (!this.isOpen) {
+ return;
+ }
+
+ this.#inputWidthOnLastClose = getBoundsWithoutFlushing(
+ this.input.textbox
+ ).width;
+
+ // We exit search mode preview on close since the result previewing it is
+ // implicitly unselected.
+ if (this.input.searchMode?.isPreview) {
+ this.input.searchMode = null;
+ }
+
+ this.resultMenu.hidePopup();
+ this.removeAccessibleFocus();
+ this.input.inputField.setAttribute("aria-expanded", "false");
+ this.#openPanelInstance = null;
+ this.#previousTabToSearchEngine = null;
+
+ this.input.removeAttribute("open");
+ this.input.endLayoutExtend();
+
+ // Search Tips can open the view without the Urlbar being focused. If the
+ // tip is ignored (e.g. the page content is clicked or the window loses
+ // focus) we should discard the telemetry event created when the view was
+ // opened.
+ if (!this.input.focused && !elementPicked) {
+ this.controller.engagementEvent.discard();
+ this.controller.engagementEvent.record(null, {});
+ }
+
+ this.window.removeEventListener("resize", this);
+ this.window.removeEventListener("blur", this);
+
+ this.controller.notify(this.controller.NOTIFICATIONS.VIEW_CLOSE);
+
+ if (this.#isShowingZeroPrefix) {
+ if (elementPicked) {
+ Services.telemetry.scalarAdd(ZERO_PREFIX_SCALAR_ENGAGEMENT, 1);
+ } else {
+ Services.telemetry.scalarAdd(ZERO_PREFIX_SCALAR_ABANDONMENT, 1);
+ }
+ this.#setIsShowingZeroPrefix(false);
+ }
+ }
+
+ /**
+ * This can be used to open the view automatically as a consequence of
+ * specific user actions. For Top Sites searches (without a search string)
+ * the view is opened only for mouse or keyboard interactions.
+ * If the user abandoned a search (there is a search string) the view is
+ * reopened, and we try to use cached results to reduce flickering, then a new
+ * query is started to refresh results.
+ *
+ * @param {object} options Options object
+ * @param {Event} options.event The event associated with the call to autoOpen.
+ * @param {boolean} [options.suppressFocusBorder] If true, we hide the focus border
+ * when the panel is opened. This is true by default to avoid flashing
+ * the border when the unfocused address bar is clicked.
+ * @returns {boolean} Whether the view was opened.
+ */
+ autoOpen({ event, suppressFocusBorder = true }) {
+ if (this.#pickSearchTipIfPresent(event)) {
+ return false;
+ }
+
+ if (!event) {
+ return false;
+ }
+
+ let queryOptions = { event };
+
+ if (
+ !this.input.value ||
+ (this.input.getAttribute("pageproxystate") == "valid" &&
+ !this.window.gBrowser.selectedBrowser.searchTerms)
+ ) {
+ if (!this.isOpen && ["mousedown", "command"].includes(event.type)) {
+ // Try to reuse the cached top-sites context. If it's not cached, then
+ // there will be a gap of time between when the input is focused and
+ // when the view opens that can be perceived as flicker.
+ if (!this.input.searchMode && this.queryContextCache.topSitesContext) {
+ this.onQueryResults(this.queryContextCache.topSitesContext);
+ }
+ this.input.startQuery(queryOptions);
+ if (suppressFocusBorder) {
+ this.input.toggleAttribute("suppress-focus-border", true);
+ }
+ return true;
+ }
+ return false;
+ }
+
+ // Reopen abandoned searches only if the input is focused.
+ if (!this.input.focused) {
+ return false;
+ }
+
+ // Tab switch is the only case where we requery if the view is open, because
+ // switching tabs doesn't necessarily close the view.
+ if (this.isOpen && event.type != "tabswitch") {
+ return false;
+ }
+
+ // We can reuse the current rows as they are if the input value and width
+ // haven't changed since the view was closed. The width check is related to
+ // row overflow: If we reuse the current rows, overflow and underflow events
+ // won't fire even if the view's width has changed and there are rows that
+ // do actually overflow or underflow. That means previously overflowed rows
+ // may unnecessarily show the overflow gradient, for example.
+ if (
+ this.#rows.firstElementChild &&
+ this.#queryContext.searchString == this.input.value &&
+ this.#inputWidthOnLastClose ==
+ getBoundsWithoutFlushing(this.input.textbox).width
+ ) {
+ // We can reuse the current rows.
+ queryOptions.allowAutofill = this.#queryContext.allowAutofill;
+ } else {
+ // To reduce flickering, try to reuse a cached UrlbarQueryContext. The
+ // overflow problem is addressed in this case because `onQueryResults()`
+ // starts the regular view-update process, during which the overflow state
+ // is reset on all rows.
+ let cachedQueryContext = this.queryContextCache.get(this.input.value);
+ if (cachedQueryContext) {
+ this.onQueryResults(cachedQueryContext);
+ }
+ }
+
+ this.controller.engagementEvent.discard();
+ queryOptions.searchString = this.input.value;
+ queryOptions.autofillIgnoresSelection = true;
+ queryOptions.event.interactionType = "returned";
+
+ // A search tip can be cached in results if it was shown but ignored
+ // by the user. Don't open the panel if a search tip is present or it
+ // will cause a flicker since it'll be quickly overwritten (Bug 1812261).
+ if (
+ this.#queryContext?.results?.length &&
+ this.#queryContext.results[0].type != lazy.UrlbarUtils.RESULT_TYPE.TIP
+ ) {
+ this.#openPanel();
+ }
+
+ // If we had cached results, this will just refresh them, avoiding results
+ // flicker, otherwise there may be some noise.
+ this.input.startQuery(queryOptions);
+ if (suppressFocusBorder) {
+ this.input.toggleAttribute("suppress-focus-border", true);
+ }
+ return true;
+ }
+
+ // UrlbarController listener methods.
+ onQueryStarted(queryContext) {
+ this.#queryWasCancelled = false;
+ this.#queryUpdatedResults = false;
+ this.#openPanelInstance = null;
+ if (!queryContext.searchString) {
+ this.#previousTabToSearchEngine = null;
+ }
+ this.#startRemoveStaleRowsTimer();
+
+ // Cache l10n strings so they're available when we update the view as
+ // results arrive. This is a no-op for strings that are already cached.
+ // `#cacheL10nStrings` is async but we don't await it because doing so would
+ // require view updates to be async. Instead we just opportunistically cache
+ // and if there's a cache miss we fall back to `l10n.setAttributes`.
+ this.#cacheL10nStrings();
+ }
+
+ onQueryCancelled(queryContext) {
+ this.#queryWasCancelled = true;
+ this.#cancelRemoveStaleRowsTimer();
+ }
+
+ onQueryFinished(queryContext) {
+ this.#cancelRemoveStaleRowsTimer();
+ if (this.#queryWasCancelled) {
+ return;
+ }
+
+ // At this point the query finished successfully. If it returned some
+ // results, remove stale rows. Otherwise remove all rows.
+ if (this.#queryUpdatedResults) {
+ this.#removeStaleRows();
+ } else {
+ this.clear();
+ }
+
+ // Now that the view has finished updating for this query, call
+ // `#setIsShowingZeroPrefix()`.
+ this.#setIsShowingZeroPrefix(!queryContext.searchString);
+
+ // If the query returned results, we're done.
+ if (this.#queryUpdatedResults) {
+ return;
+ }
+
+ // If search mode isn't active, close the view.
+ if (!this.input.searchMode) {
+ this.close();
+ return;
+ }
+
+ // Search mode is active. If the one-offs should be shown, make sure they
+ // are enabled and show the view.
+ let openPanelInstance = (this.#openPanelInstance = {});
+ this.oneOffSearchButtons.willHide().then(willHide => {
+ if (!willHide && openPanelInstance == this.#openPanelInstance) {
+ this.oneOffSearchButtons.enable(true);
+ this.#openPanel();
+ }
+ });
+ }
+
+ onQueryResults(queryContext) {
+ this.queryContextCache.put(queryContext);
+ this.#queryContext = queryContext;
+
+ if (!this.isOpen) {
+ this.clear();
+ }
+ this.#queryUpdatedResults = true;
+ this.#updateResults();
+
+ let firstResult = queryContext.results[0];
+
+ if (queryContext.lastResultCount == 0) {
+ // Clear the selection when we get a new set of results.
+ this.#selectElement(null, {
+ updateInput: false,
+ });
+
+ // Show the one-off search buttons unless any of the following are true:
+ // * The first result is a search tip
+ // * The search string is empty
+ // * The search string starts with an `@` or a search restriction
+ // character
+ this.oneOffSearchButtons.enable(
+ firstResult.providerName != "UrlbarProviderSearchTips" &&
+ queryContext.trimmedSearchString[0] != "@" &&
+ (queryContext.trimmedSearchString[0] !=
+ lazy.UrlbarTokenizer.RESTRICT.SEARCH ||
+ queryContext.trimmedSearchString.length != 1)
+ );
+ }
+
+ if (!this.selectedElement && !this.oneOffSearchButtons.selectedButton) {
+ if (firstResult.heuristic) {
+ // Select the heuristic result. The heuristic may not be the first
+ // result added, which is why we do this check here when each result is
+ // added and not above.
+ if (this.#shouldShowHeuristic(firstResult)) {
+ this.#selectElement(this.#getFirstSelectableElement(), {
+ updateInput: false,
+ setAccessibleFocus:
+ this.controller._userSelectionBehavior == "arrow",
+ });
+ } else {
+ this.input.setResultForCurrentValue(firstResult);
+ }
+ } else if (
+ firstResult.payload.providesSearchMode &&
+ queryContext.trimmedSearchString != "@"
+ ) {
+ // Filtered keyword offer results can be in the first position but not
+ // be heuristic results. We do this so the user can press Tab to select
+ // them, resembling tab-to-search. In that case, the input value is
+ // still associated with the first result.
+ this.input.setResultForCurrentValue(firstResult);
+ }
+ }
+
+ // Announce tab-to-search results to screen readers as the user types.
+ // Check to make sure we don't announce the same engine multiple times in
+ // a row.
+ let secondResult = queryContext.results[1];
+ if (
+ secondResult?.providerName == "TabToSearch" &&
+ lazy.UrlbarPrefs.get("accessibility.tabToSearch.announceResults") &&
+ this.#previousTabToSearchEngine != secondResult.payload.engine
+ ) {
+ let engine = secondResult.payload.engine;
+ this.window.A11yUtils.announce({
+ id: secondResult.payload.isGeneralPurposeEngine
+ ? "urlbar-result-action-before-tabtosearch-web"
+ : "urlbar-result-action-before-tabtosearch-other",
+ args: { engine },
+ });
+ this.#previousTabToSearchEngine = engine;
+ // Do not set aria-activedescendant when the user tabs to the result
+ // because we already announced it.
+ this.#announceTabToSearchOnSelection = false;
+ }
+
+ // If we update the selected element, a new unique ID is generated for it.
+ // We need to ensure that aria-activedescendant reflects this new ID.
+ if (this.selectedElement && !this.oneOffSearchButtons.selectedButton) {
+ let aadID = this.input.inputField.getAttribute("aria-activedescendant");
+ if (aadID && !this.document.getElementById(aadID)) {
+ this.#setAccessibleFocus(this.selectedElement);
+ }
+ }
+
+ this.#openPanel();
+
+ if (firstResult.heuristic) {
+ // The heuristic result may be a search alias result, so apply formatting
+ // if necessary. Conversely, the heuristic result of the previous query
+ // may have been an alias, so remove formatting if necessary.
+ this.input.formatValue();
+ }
+
+ if (queryContext.deferUserSelectionProviders.size) {
+ // DeferUserSelectionProviders block user selection until the result is
+ // shown, so it's the view's duty to remove them.
+ // Doing it sooner, like when the results are added by the provider,
+ // would not suffice because there's still a delay before those results
+ // reach the view.
+ queryContext.results.forEach(r => {
+ queryContext.deferUserSelectionProviders.delete(r.providerName);
+ });
+ }
+ }
+
+ /**
+ * Handles removing a result from the view when it is removed from the query,
+ * and attempts to select the new result on the same row.
+ *
+ * This assumes that the result rows are in index order.
+ *
+ * @param {number} index The index of the result that has been removed.
+ */
+ onQueryResultRemoved(index) {
+ let rowToRemove = this.#rows.children[index];
+ rowToRemove.remove();
+
+ this.#updateIndices();
+
+ if (rowToRemove != this.#getSelectedRow()) {
+ return;
+ }
+
+ // Select the row at the same index, if possible.
+ let newSelectionIndex = index;
+ if (index >= this.#queryContext.results.length) {
+ newSelectionIndex = this.#queryContext.results.length - 1;
+ }
+ if (newSelectionIndex >= 0) {
+ this.selectedRowIndex = newSelectionIndex;
+ }
+ }
+
+ openResultMenu(result, anchor) {
+ this.#resultMenuResult = result;
+
+ if (AppConstants.platform == "macosx") {
+ // `openPopup(anchor)` doesn't use a native context menu, which is very
+ // noticeable on Mac. Use `openPopup()` with x and y coords instead. See
+ // bug 1831760 and bug 1710459.
+ let rect = getBoundsWithoutFlushing(anchor);
+ rect = this.window.windowUtils.toScreenRectInCSSUnits(
+ rect.x,
+ rect.y,
+ rect.width,
+ rect.height
+ );
+ this.resultMenu.openPopup(null, {
+ x: rect.x,
+ y: rect.y + rect.height,
+ });
+ } else {
+ this.resultMenu.openPopup(anchor, "bottomright topright");
+ }
+
+ anchor.toggleAttribute("open", true);
+ let listener = event => {
+ if (event.target == this.resultMenu) {
+ anchor.removeAttribute("open");
+ this.resultMenu.removeEventListener("popuphidden", listener);
+ }
+ };
+ this.resultMenu.addEventListener("popuphidden", listener);
+ }
+
+ /**
+ * Clears the result menu commands cache, removing the cached commands for all
+ * results. This is useful when the commands for one or more results change
+ * while the results remain in the view.
+ */
+ invalidateResultMenuCommands() {
+ this.#resultMenuCommands = new WeakMap();
+ }
+
+ /**
+ * Passes DOM events for the view to the on_<event type> methods.
+ *
+ * @param {Event} event
+ * DOM event from the <view>.
+ */
+ handleEvent(event) {
+ let methodName = "on_" + event.type;
+ if (methodName in this) {
+ this[methodName](event);
+ } else {
+ throw new Error("Unrecognized UrlbarView event: " + event.type);
+ }
+ }
+
+ static dynamicViewTemplatesByName = new Map();
+
+ /**
+ * Registers the view template for a dynamic result type. A view template is
+ * a plain object that describes the DOM subtree for a dynamic result type.
+ * When a dynamic result is shown in the urlbar view, its type's view template
+ * is used to construct the part of the view that represents the result.
+ *
+ * The specified view template will be available to the urlbars in all current
+ * and future browser windows until it is unregistered. A given dynamic
+ * result type has at most one view template. If this method is called for a
+ * dynamic result type more than once, the view template in the last call
+ * overrides those in previous calls.
+ *
+ * @param {string} name
+ * The view template will be registered for the dynamic result type with
+ * this name.
+ * @param {object} viewTemplate
+ * This object describes the DOM subtree for the given dynamic result type.
+ * It should be a tree-like nested structure with each object in the nesting
+ * representing a DOM element to be created. This tree-like structure is
+ * achieved using the `children` property described below. Each object in
+ * the structure may include the following properties:
+ *
+ * {string} name
+ * The name of the object. It is required for all objects in the
+ * structure except the root object and serves two important functions:
+ * (1) The element created for the object will automatically have a class
+ * named `urlbarView-dynamic-${dynamicType}-${name}`, where
+ * `dynamicType` is the name of the dynamic result type. The element
+ * will also automatically have an attribute "name" whose value is
+ * this name. The class and attribute allow the element to be styled
+ * in CSS.
+ * (2) The name is used when updating the view. See
+ * UrlbarProvider.getViewUpdate().
+ * Names must be unique within a view template, but they don't need to be
+ * globally unique. i.e., two different view templates can use the same
+ * names, and other DOM elements can use the same names in their IDs and
+ * classes. The name also suffixes the dynamic element's ID: an element
+ * with name `data` will get the ID `urlbarView-row-{unique number}-data`.
+ * If there is no name provided for the root element, the root element
+ * will not get an ID.
+ * {string} tag
+ * The tag name of the object. It is required for all objects in the
+ * structure except the root object and declares the kind of element that
+ * will be created for the object: span, div, img, etc.
+ * {object} [attributes]
+ * An optional mapping from attribute names to values. For each
+ * name-value pair, an attribute is added to the element created for the
+ * object. The `id` attribute is reserved and cannot be set by the
+ * provider. Element IDs are passed back to the provider in getViewUpdate
+ * if they are needed.
+ * {array} [children]
+ * An optional list of children. Each item in the array must be an object
+ * as described here. For each item, a child element as described by the
+ * item is created and added to the element created for the parent object.
+ * {array} [classList]
+ * An optional list of classes. Each class will be added to the element
+ * created for the object by calling element.classList.add().
+ * {boolean} [overflowable]
+ * If true, the element's overflow status will be tracked in order to
+ * fade it out when needed.
+ * {string} [stylesheet]
+ * An optional stylesheet URL. This property is valid only on the root
+ * object in the structure. The stylesheet will be loaded in all browser
+ * windows so that the dynamic result type view may be styled.
+ */
+ static addDynamicViewTemplate(name, viewTemplate) {
+ this.dynamicViewTemplatesByName.set(name, viewTemplate);
+ if (viewTemplate.stylesheet) {
+ for (let window of lazy.BrowserWindowTracker.orderedWindows) {
+ addDynamicStylesheet(window, viewTemplate.stylesheet);
+ }
+ }
+ }
+
+ /**
+ * Unregisters the view template for a dynamic result type.
+ *
+ * @param {string} name
+ * The view template will be unregistered for the dynamic result type with
+ * this name.
+ */
+ static removeDynamicViewTemplate(name) {
+ let viewTemplate = this.dynamicViewTemplatesByName.get(name);
+ if (!viewTemplate) {
+ return;
+ }
+ this.dynamicViewTemplatesByName.delete(name);
+ if (viewTemplate.stylesheet) {
+ for (let window of lazy.BrowserWindowTracker.orderedWindows) {
+ removeDynamicStylesheet(window, viewTemplate.stylesheet);
+ }
+ }
+ }
+
+ // Private properties and methods below.
+ #announceTabToSearchOnSelection;
+ #inputWidthOnLastClose = 0;
+ #l10nCache;
+ #mainContainer;
+ #mousedownSelectedElement;
+ #openPanelInstance;
+ #oneOffSearchButtons;
+ #previousTabToSearchEngine;
+ #queryContext;
+ #queryUpdatedResults;
+ #queryWasCancelled;
+ #removeStaleRowsTimer;
+ #resultMenuResult;
+ #resultMenuCommands;
+ #rows;
+ #selectedElement;
+ #zeroPrefixStopwatchInstance = null;
+
+ #createElement(name) {
+ return this.document.createElementNS("http://www.w3.org/1999/xhtml", name);
+ }
+
+ #openPanel() {
+ if (this.isOpen) {
+ return;
+ }
+ this.controller.userSelectionBehavior = "none";
+
+ this.panel.removeAttribute("actionoverride");
+
+ this.#enableOrDisableRowWrap();
+
+ this.input.inputField.setAttribute("aria-expanded", "true");
+
+ this.input.toggleAttribute("suppress-focus-border", true);
+ this.input.toggleAttribute("open", true);
+ this.input.startLayoutExtend();
+
+ this.window.addEventListener("resize", this);
+ this.window.addEventListener("blur", this);
+
+ this.controller.notify(this.controller.NOTIFICATIONS.VIEW_OPEN);
+ }
+
+ #shouldShowHeuristic(result) {
+ if (!result?.heuristic) {
+ throw new Error("A heuristic result must be given");
+ }
+ return (
+ !lazy.UrlbarPrefs.get("experimental.hideHeuristic") ||
+ result.type == lazy.UrlbarUtils.RESULT_TYPE.TIP
+ );
+ }
+
+ /**
+ * Whether a result is a search suggestion.
+ *
+ * @param {UrlbarResult} result The result to examine.
+ * @returns {boolean} Whether the result is a search suggestion.
+ */
+ #resultIsSearchSuggestion(result) {
+ return Boolean(
+ result &&
+ result.type == lazy.UrlbarUtils.RESULT_TYPE.SEARCH &&
+ result.payload.suggestion
+ );
+ }
+
+ /**
+ * Checks whether the given row index can be update to the result we want
+ * to apply. This is used in #updateResults to avoid flickering of results, by
+ * reusing existing rows.
+ *
+ * @param {number} rowIndex Index of the row to examine.
+ * @param {UrlbarResult} result The result we'd like to apply.
+ * @param {boolean} seenSearchSuggestion Whether the view update has
+ * encountered an existing row with a search suggestion result.
+ * @returns {boolean} Whether the row can be updated to this result.
+ */
+ #rowCanUpdateToResult(rowIndex, result, seenSearchSuggestion) {
+ // The heuristic result must always be current, thus it's always compatible.
+ if (result.heuristic) {
+ return true;
+ }
+ let row = this.#rows.children[rowIndex];
+ if (result.hasSuggestedIndex != row.result.hasSuggestedIndex) {
+ // Don't replace a suggestedIndex result with a non-suggestedIndex result
+ // or vice versa.
+ return false;
+ }
+ if (
+ result.hasSuggestedIndex &&
+ result.suggestedIndex != row.result.suggestedIndex
+ ) {
+ // Don't replace a suggestedIndex result with another suggestedIndex
+ // result if the suggestedIndex values are different.
+ return false;
+ }
+ let resultIsSearchSuggestion = this.#resultIsSearchSuggestion(result);
+ // If the row is same type, just update it.
+ if (
+ resultIsSearchSuggestion == this.#resultIsSearchSuggestion(row.result)
+ ) {
+ return true;
+ }
+ // If the row has a different type, update it if we are in a compatible
+ // index range.
+ // In practice we don't want to overwrite a search suggestion with a non
+ // search suggestion, but we allow the opposite.
+ return resultIsSearchSuggestion && seenSearchSuggestion;
+ }
+
+ #updateResults() {
+ // TODO: For now this just compares search suggestions to the rest, in the
+ // future we should make it support any type of result. Or, even better,
+ // results should be grouped, thus we can directly update groups.
+
+ // Walk rows and find an insertion index for results. To avoid flicker, we
+ // skip rows until we find one compatible with the result we want to apply.
+ // If we couldn't find a compatible range, we'll just update.
+ let results = this.#queryContext.results;
+ if (results[0]?.heuristic && !this.#shouldShowHeuristic(results[0])) {
+ // Exclude the heuristic.
+ results = results.slice(1);
+ }
+ let rowIndex = 0;
+ let resultIndex = 0;
+ let visibleSpanCount = 0;
+ let seenMisplacedResult = false;
+ let seenSearchSuggestion = false;
+
+ // We can have more rows than the visible ones.
+ for (
+ ;
+ rowIndex < this.#rows.children.length && resultIndex < results.length;
+ ++rowIndex
+ ) {
+ let row = this.#rows.children[rowIndex];
+ if (this.#isElementVisible(row)) {
+ visibleSpanCount += lazy.UrlbarUtils.getSpanForResult(row.result);
+ }
+ // Continue updating rows as long as we haven't encountered a new
+ // suggestedIndex result that couldn't replace a current result.
+ if (!seenMisplacedResult) {
+ let result = results[resultIndex];
+ // skip this result if it is supposed to be hidden from the view.
+ if (result.exposureResultHidden) {
+ this.#addExposure(result);
+ resultIndex++;
+ continue;
+ }
+ seenSearchSuggestion =
+ seenSearchSuggestion ||
+ (!row.result.heuristic && this.#resultIsSearchSuggestion(row.result));
+ if (
+ this.#rowCanUpdateToResult(rowIndex, result, seenSearchSuggestion)
+ ) {
+ // We can replace the row's current result with the new one.
+ this.#updateRow(row, result);
+ resultIndex++;
+ continue;
+ }
+ if (result.hasSuggestedIndex || row.result.hasSuggestedIndex) {
+ seenMisplacedResult = true;
+ }
+ }
+ row.setAttribute("stale", "true");
+ }
+
+ // Mark all the remaining rows as stale and update the visible span count.
+ // We include stale rows in the count because we should never show more than
+ // maxResults spans at one time. Later we'll remove stale rows and unhide
+ // excess non-stale rows.
+ for (; rowIndex < this.#rows.children.length; ++rowIndex) {
+ let row = this.#rows.children[rowIndex];
+ row.setAttribute("stale", "true");
+ if (this.#isElementVisible(row)) {
+ visibleSpanCount += lazy.UrlbarUtils.getSpanForResult(row.result);
+ }
+ }
+
+ // Add remaining results, if we have fewer rows than results.
+ for (; resultIndex < results.length; ++resultIndex) {
+ let result = results[resultIndex];
+ // skip this result if it is supposed to be hidden from the view.
+ if (result.exposureResultHidden) {
+ this.#addExposure(result);
+ continue;
+ }
+ let row = this.#createRow();
+ this.#updateRow(row, result);
+ if (!seenMisplacedResult && result.hasSuggestedIndex) {
+ if (result.isSuggestedIndexRelativeToGroup) {
+ // We can't know at this point what the right index of a group-
+ // relative suggestedIndex result will be. To avoid all all possible
+ // flicker, don't make it (and all rows after it) visible until stale
+ // rows are removed.
+ seenMisplacedResult = true;
+ } else {
+ // We need to check whether the new suggestedIndex result will end up
+ // at its right index if we append it here. The "right" index is the
+ // final index the result will occupy once the update is done and all
+ // stale rows have been removed. We could use a more flexible
+ // definition, but we use this strict one in order to avoid all
+ // perceived flicker and movement of suggestedIndex results. Once
+ // stale rows are removed, the final number of rows in the view will
+ // be the new result count, so we base our arithmetic here on it.
+ let finalIndex =
+ result.suggestedIndex >= 0
+ ? Math.min(results.length - 1, result.suggestedIndex)
+ : Math.max(0, results.length + result.suggestedIndex);
+ if (this.#rows.children.length != finalIndex) {
+ seenMisplacedResult = true;
+ }
+ }
+ }
+ let newVisibleSpanCount =
+ visibleSpanCount + lazy.UrlbarUtils.getSpanForResult(result);
+ if (
+ newVisibleSpanCount <= this.#queryContext.maxResults &&
+ !seenMisplacedResult
+ ) {
+ // The new row can be visible.
+ visibleSpanCount = newVisibleSpanCount;
+ } else {
+ // The new row must be hidden at first because the view is already
+ // showing maxResults spans, or we encountered a new suggestedIndex
+ // result that couldn't be placed in the right spot. We'll show it when
+ // stale rows are removed.
+ this.#setRowVisibility(row, false);
+ }
+ this.#rows.appendChild(row);
+ }
+
+ this.#updateIndices();
+ }
+
+ #createRow() {
+ let item = this.#createElement("div");
+ item.className = "urlbarView-row";
+ item._elements = new Map();
+ item._buttons = new Map();
+
+ // A note about row selection. Any element in a row that can be selected
+ // will have the `selectable` attribute set on it. For typical rows, the
+ // selectable element is not the `.urlbarView-row` itself but rather the
+ // `.urlbarView-row-inner` inside it. That's because the `.urlbarView-row`
+ // also contains the row's buttons, which should not be selected when the
+ // main part of the row -- `.urlbarView-row-inner` -- is selected.
+ //
+ // Since it's the row itself and not the row-inner that is a child of the
+ // `role=listbox` element (the rows container, `this.#rows`), screen readers
+ // will not automatically recognize the row-inner as a listbox option. To
+ // compensate, we set `role=option` on the row-inner and `role=presentation`
+ // on the row itself so that screen readers ignore it.
+ item.setAttribute("role", "presentation");
+
+ return item;
+ }
+
+ #createRowContent(item, result) {
+ // The url is the only element that can wrap, thus all the other elements
+ // are child of noWrap.
+ let noWrap = this.#createElement("span");
+ noWrap.className = "urlbarView-no-wrap";
+ item._content.appendChild(noWrap);
+
+ let favicon = this.#createElement("img");
+ favicon.className = "urlbarView-favicon";
+ noWrap.appendChild(favicon);
+ item._elements.set("favicon", favicon);
+
+ let typeIcon = this.#createElement("span");
+ typeIcon.className = "urlbarView-type-icon";
+ noWrap.appendChild(typeIcon);
+
+ let tailPrefix = this.#createElement("span");
+ tailPrefix.className = "urlbarView-tail-prefix";
+ noWrap.appendChild(tailPrefix);
+ item._elements.set("tailPrefix", tailPrefix);
+ // tailPrefix holds text only for alignment purposes so it should never be
+ // read to screen readers.
+ tailPrefix.toggleAttribute("aria-hidden", true);
+
+ let tailPrefixStr = this.#createElement("span");
+ tailPrefixStr.className = "urlbarView-tail-prefix-string";
+ tailPrefix.appendChild(tailPrefixStr);
+ item._elements.set("tailPrefixStr", tailPrefixStr);
+
+ let tailPrefixChar = this.#createElement("span");
+ tailPrefixChar.className = "urlbarView-tail-prefix-char";
+ tailPrefix.appendChild(tailPrefixChar);
+ item._elements.set("tailPrefixChar", tailPrefixChar);
+
+ let title = this.#createElement("span");
+ title.classList.add("urlbarView-title", "urlbarView-overflowable");
+ noWrap.appendChild(title);
+ item._elements.set("title", title);
+
+ let tagsContainer = this.#createElement("span");
+ tagsContainer.classList.add("urlbarView-tags", "urlbarView-overflowable");
+ noWrap.appendChild(tagsContainer);
+ item._elements.set("tagsContainer", tagsContainer);
+
+ let titleSeparator = this.#createElement("span");
+ titleSeparator.className = "urlbarView-title-separator";
+ noWrap.appendChild(titleSeparator);
+ item._elements.set("titleSeparator", titleSeparator);
+
+ let action = this.#createElement("span");
+ action.className = "urlbarView-action";
+ noWrap.appendChild(action);
+ item._elements.set("action", action);
+
+ let url = this.#createElement("span");
+ url.className = "urlbarView-url";
+ item._content.appendChild(url);
+ item._elements.set("url", url);
+ }
+
+ /**
+ * @param {Element} node
+ * The element to set attributes on.
+ * @param {object} attributes
+ * Attribute names to values mapping. For each name-value pair, an
+ * attribute is set on the element, except for `null` as a value which
+ * signals an attribute should be removed, and `undefined` in which case
+ * the attribute won't be set nor removed. The `id` attribute is reserved
+ * and cannot be set here.
+ */
+ #setDynamicAttributes(node, attributes) {
+ if (!attributes) {
+ return;
+ }
+ for (let [name, value] of Object.entries(attributes)) {
+ if (name == "id") {
+ // IDs are managed externally to ensure they are unique.
+ console.error(
+ `Not setting id="${value}", as dynamic attributes may not include IDs.`
+ );
+ continue;
+ }
+ if (value === undefined) {
+ continue;
+ }
+ if (value === null) {
+ node.removeAttribute(name);
+ } else if (typeof value == "boolean") {
+ node.toggleAttribute(name, value);
+ } else {
+ node.setAttribute(name, value);
+ }
+ }
+ }
+
+ #createRowContentForDynamicType(item, result) {
+ let { dynamicType } = result.payload;
+ let provider = lazy.UrlbarProvidersManager.getProvider(result.providerName);
+ let viewTemplate =
+ provider.getViewTemplate?.(result) ||
+ UrlbarView.dynamicViewTemplatesByName.get(dynamicType);
+ if (!viewTemplate) {
+ console.error(`No viewTemplate found for ${result.providerName}`);
+ }
+ this.#buildViewForDynamicType(
+ dynamicType,
+ item._content,
+ item._elements,
+ viewTemplate
+ );
+ this.#setRowSelectable(item, item._content.hasAttribute("selectable"));
+ }
+
+ #buildViewForDynamicType(type, parentNode, elementsByName, template) {
+ // Set attributes on parentNode.
+ this.#setDynamicAttributes(parentNode, template.attributes);
+ // Add classes to parentNode's classList.
+ if (template.classList) {
+ parentNode.classList.add(...template.classList);
+ }
+ if (template.overflowable) {
+ parentNode.classList.add("urlbarView-overflowable");
+ }
+ if (template.name) {
+ parentNode.setAttribute("name", template.name);
+ elementsByName.set(template.name, parentNode);
+ }
+ // Recurse into children.
+ for (let childTemplate of template.children || []) {
+ let child = this.#createElement(childTemplate.tag);
+ child.classList.add(`urlbarView-dynamic-${type}-${childTemplate.name}`);
+ parentNode.appendChild(child);
+ this.#buildViewForDynamicType(type, child, elementsByName, childTemplate);
+ }
+ }
+
+ #createRowContentForBestMatch(item, result) {
+ item._content.toggleAttribute("selectable", true);
+
+ let favicon = this.#createElement("img");
+ favicon.className = "urlbarView-favicon";
+ item._content.appendChild(favicon);
+ item._elements.set("favicon", favicon);
+
+ let typeIcon = this.#createElement("span");
+ typeIcon.className = "urlbarView-type-icon";
+ item._content.appendChild(typeIcon);
+
+ let body = this.#createElement("span");
+ body.className = "urlbarView-row-body";
+ item._content.appendChild(body);
+
+ let top = this.#createElement("div");
+ top.className = "urlbarView-row-body-top";
+ body.appendChild(top);
+
+ let noWrap = this.#createElement("div");
+ noWrap.className = "urlbarView-row-body-top-no-wrap";
+ top.appendChild(noWrap);
+ item._elements.set("noWrap", noWrap);
+
+ let title = this.#createElement("span");
+ title.classList.add("urlbarView-title", "urlbarView-overflowable");
+ noWrap.appendChild(title);
+ item._elements.set("title", title);
+
+ let titleSeparator = this.#createElement("span");
+ titleSeparator.className = "urlbarView-title-separator";
+ noWrap.appendChild(titleSeparator);
+ item._elements.set("titleSeparator", titleSeparator);
+
+ let url = this.#createElement("span");
+ url.className = "urlbarView-url";
+ top.appendChild(url);
+ item._elements.set("url", url);
+
+ let bottom = this.#createElement("div");
+ bottom.className = "urlbarView-row-body-bottom";
+ body.appendChild(bottom);
+ item._elements.set("bottom", bottom);
+ }
+
+ #createRowContentForRichSuggestion(item, result) {
+ item._content.toggleAttribute("selectable", true);
+
+ let favicon = this.#createElement("img");
+ favicon.className = "urlbarView-favicon";
+ item._content.appendChild(favicon);
+ item._elements.set("favicon", favicon);
+
+ let body = this.#createElement("span");
+ body.classList.add("urlbarView-no-wrap", "urlbarView-overflowable");
+ item._content.appendChild(body);
+
+ let title = this.#createElement("span");
+ title.classList.add("urlbarView-title");
+ body.appendChild(title);
+ item._elements.set("title", title);
+
+ let description = this.#createElement("small");
+ description.className = "urlbarView-description";
+ body.appendChild(description);
+ item._elements.set("description", description);
+
+ let titleSeparator = this.#createElement("span");
+ titleSeparator.className = "urlbarView-title-separator";
+ body.appendChild(titleSeparator);
+ item._elements.set("titleSeparator", titleSeparator);
+
+ let action = this.#createElement("span");
+ action.className = "urlbarView-action";
+ body.appendChild(action);
+ item._elements.set("action", action);
+
+ let url = this.#createElement("span");
+ url.className = "urlbarView-url";
+ item._content.appendChild(url);
+ item._elements.set("url", url);
+ }
+
+ #addRowButtons(item, result) {
+ for (let i = 0; i < result.payload.buttons?.length; i++) {
+ this.#addRowButton(item, {
+ name: i.toString(),
+ ...result.payload.buttons[i],
+ });
+ }
+
+ // TODO: `buttonText` is intended only for WebExtensions. We should remove
+ // it and the WebExtensions urlbar API since we're no longer using it.
+ if (result.payload.buttonText) {
+ this.#addRowButton(item, {
+ name: "tip",
+ url: result.payload.buttonUrl,
+ });
+ item._buttons.get("tip").textContent = result.payload.buttonText;
+ }
+
+ if (!lazy.UrlbarPrefs.get("resultMenu")) {
+ if (result.payload.isBlockable) {
+ this.#addRowButton(item, {
+ name: "block",
+ command: "dismiss",
+ l10n: result.payload.blockL10n,
+ });
+ }
+ if (result.payload.helpUrl) {
+ this.#addRowButton(item, {
+ name: "help",
+ command: "help",
+ url: result.payload.helpUrl,
+ l10n: result.payload.helpL10n,
+ });
+ }
+ } else if (this.#getResultMenuCommands(result)) {
+ this.#addRowButton(item, {
+ name: "menu",
+ l10n: {
+ id: result.showFeedbackMenu
+ ? "urlbar-result-menu-button-feedback"
+ : "urlbar-result-menu-button",
+ },
+ attributes: lazy.UrlbarPrefs.get("resultMenu.keyboardAccessible")
+ ? null
+ : {
+ "keyboard-inaccessible": true,
+ },
+ });
+ }
+ }
+
+ #addRowButton(item, { name, command, l10n, url, attributes }) {
+ let button = this.#createElement("span");
+ this.#setDynamicAttributes(button, attributes);
+ button.id = `${item.id}-button-${name}`;
+ button.classList.add("urlbarView-button", "urlbarView-button-" + name);
+ button.setAttribute("role", "button");
+ button.dataset.name = name;
+ if (l10n) {
+ this.#setElementL10n(button, l10n);
+ }
+ if (command) {
+ button.dataset.command = command;
+ }
+ if (url) {
+ button.dataset.url = url;
+ }
+ item._buttons.set(name, button);
+ item.appendChild(button);
+ }
+
+ // eslint-disable-next-line complexity
+ #updateRow(item, result) {
+ let oldResult = item.result;
+ let oldResultType = item.result && item.result.type;
+ let provider = lazy.UrlbarProvidersManager.getProvider(result.providerName);
+ item.result = result;
+ item.removeAttribute("stale");
+ item.id = getUniqueId("urlbarView-row-");
+
+ let needsNewContent =
+ oldResultType === undefined ||
+ (oldResultType == lazy.UrlbarUtils.RESULT_TYPE.DYNAMIC) !=
+ (result.type == lazy.UrlbarUtils.RESULT_TYPE.DYNAMIC) ||
+ (oldResultType == lazy.UrlbarUtils.RESULT_TYPE.DYNAMIC &&
+ result.type == lazy.UrlbarUtils.RESULT_TYPE.DYNAMIC &&
+ oldResult.payload.dynamicType != result.payload.dynamicType) ||
+ // Dynamic results that implement getViewTemplate will
+ // always need updating.
+ provider?.getViewTemplate ||
+ oldResult.isBestMatch != result.isBestMatch ||
+ oldResult.payload.isRichSuggestion != result.payload.isRichSuggestion ||
+ (!lazy.UrlbarPrefs.get("resultMenu") &&
+ (!!result.payload.helpUrl != item._buttons.has("help") ||
+ !!result.payload.isBlockable != item._buttons.has("block"))) ||
+ !!this.#getResultMenuCommands(result) != item._buttons.has("menu") ||
+ !lazy.ObjectUtils.deepEqual(
+ oldResult.payload.buttons,
+ result.payload.buttons
+ );
+
+ if (needsNewContent) {
+ while (item.lastChild) {
+ item.lastChild.remove();
+ }
+ item._elements.clear();
+ item._buttons.clear();
+ item._content = this.#createElement("span");
+ item._content.className = "urlbarView-row-inner";
+ item.appendChild(item._content);
+ item.removeAttribute("tip-type");
+ item.removeAttribute("dynamicType");
+ item.removeAttribute("feedback-acknowledgment");
+ if (item.result.type == lazy.UrlbarUtils.RESULT_TYPE.DYNAMIC) {
+ this.#createRowContentForDynamicType(item, result);
+ } else if (item.result.isBestMatch) {
+ this.#createRowContentForBestMatch(item, result);
+ } else if (result.payload.isRichSuggestion) {
+ this.#createRowContentForRichSuggestion(item, result);
+ } else {
+ this.#createRowContent(item, result);
+ }
+ this.#addRowButtons(item, result);
+ }
+ item._content.id = item.id + "-inner";
+
+ if (
+ result.type == lazy.UrlbarUtils.RESULT_TYPE.SEARCH &&
+ !result.payload.providesSearchMode &&
+ !result.payload.inPrivateWindow
+ ) {
+ item.setAttribute("type", "search");
+ } else if (result.type == lazy.UrlbarUtils.RESULT_TYPE.REMOTE_TAB) {
+ item.setAttribute("type", "remotetab");
+ } else if (result.type == lazy.UrlbarUtils.RESULT_TYPE.TAB_SWITCH) {
+ item.setAttribute("type", "switchtab");
+ } else if (result.type == lazy.UrlbarUtils.RESULT_TYPE.TIP) {
+ item.setAttribute("type", "tip");
+ item.setAttribute("tip-type", result.payload.type);
+
+ // Due to role=button, the button and help icon can sometimes become
+ // focused. We want to prevent that because the input should always be
+ // focused instead. (This happens when input.search("", { focus: false })
+ // is called, a tip is the first result but not heuristic, and the user
+ // tabs the into the button from the navbar buttons. The input is skipped
+ // and the focus goes straight to the tip button.)
+ item.addEventListener("focus", () => this.input.focus(), true);
+
+ if (
+ result.providerName == "UrlbarProviderSearchTips" ||
+ result.payload.type == "dismissalAcknowledgment"
+ ) {
+ // For a11y, we treat search tips as alerts. We use A11yUtils.announce
+ // instead of role="alert" because role="alert" will only fire an alert
+ // event when the alert (or something inside it) is the root of an
+ // insertion. In this case, the entire tip result gets inserted into the
+ // a11y tree as a single insertion, so no alert event would be fired.
+ this.window.A11yUtils.announce(result.payload.titleL10n);
+ }
+ } else if (result.source == lazy.UrlbarUtils.RESULT_SOURCE.BOOKMARKS) {
+ item.setAttribute("type", "bookmark");
+ } else if (result.type == lazy.UrlbarUtils.RESULT_TYPE.DYNAMIC) {
+ item.setAttribute("type", "dynamic");
+ this.#updateRowForDynamicType(item, result);
+ return;
+ } else if (result.providerName == "TabToSearch") {
+ item.setAttribute("type", "tabtosearch");
+ } else if (result.isBestMatch) {
+ item.setAttribute("type", "bestmatch");
+ this.#updateRowForBestMatch(item, result);
+ return;
+ } else {
+ item.removeAttribute("type");
+ }
+
+ let favicon = item._elements.get("favicon");
+ if (
+ result.type == lazy.UrlbarUtils.RESULT_TYPE.SEARCH ||
+ result.type == lazy.UrlbarUtils.RESULT_TYPE.KEYWORD
+ ) {
+ favicon.src = this.#iconForResult(result);
+ } else {
+ favicon.src = result.payload.icon || lazy.UrlbarUtils.ICON.DEFAULT;
+ }
+
+ let title = item._elements.get("title");
+ this.#setResultTitle(result, title);
+
+ if (result.payload.tail && result.payload.tailOffsetIndex > 0) {
+ this.#fillTailSuggestionPrefix(item, result);
+ title.setAttribute("aria-label", result.payload.suggestion);
+ item.toggleAttribute("tail-suggestion", true);
+ } else {
+ item.removeAttribute("tail-suggestion");
+ title.removeAttribute("aria-label");
+ }
+
+ this.#updateOverflowTooltip(title, result.title);
+
+ let tagsContainer = item._elements.get("tagsContainer");
+ if (tagsContainer) {
+ tagsContainer.textContent = "";
+ if (result.payload.tags && result.payload.tags.length) {
+ tagsContainer.append(
+ ...result.payload.tags.map((tag, i) => {
+ const element = this.#createElement("span");
+ element.className = "urlbarView-tag";
+ this.#addTextContentWithHighlights(
+ element,
+ tag,
+ result.payloadHighlights.tags[i]
+ );
+ return element;
+ })
+ );
+ }
+ }
+
+ let action = item._elements.get("action");
+ let actionSetter = null;
+ let isVisitAction = false;
+ let setURL = false;
+ let isRowSelectable = true;
+ switch (result.type) {
+ case lazy.UrlbarUtils.RESULT_TYPE.TAB_SWITCH:
+ actionSetter = () => {
+ this.#setElementL10n(action, {
+ id: "urlbar-result-action-switch-tab",
+ });
+ };
+ setURL = true;
+ break;
+ case lazy.UrlbarUtils.RESULT_TYPE.REMOTE_TAB:
+ actionSetter = () => {
+ this.#removeElementL10n(action);
+ action.textContent = result.payload.device;
+ };
+ setURL = true;
+ break;
+ case lazy.UrlbarUtils.RESULT_TYPE.SEARCH:
+ if (result.payload.inPrivateWindow) {
+ if (result.payload.isPrivateEngine) {
+ actionSetter = () => {
+ this.#setElementL10n(action, {
+ id: "urlbar-result-action-search-in-private-w-engine",
+ args: { engine: result.payload.engine },
+ });
+ };
+ } else {
+ actionSetter = () => {
+ this.#setElementL10n(action, {
+ id: "urlbar-result-action-search-in-private",
+ });
+ };
+ }
+ } else if (result.providerName == "TabToSearch") {
+ actionSetter = () => {
+ this.#setElementL10n(action, {
+ id: result.payload.isGeneralPurposeEngine
+ ? "urlbar-result-action-tabtosearch-web"
+ : "urlbar-result-action-tabtosearch-other-engine",
+ args: { engine: result.payload.engine },
+ });
+ };
+ } else if (!result.payload.providesSearchMode) {
+ actionSetter = () => {
+ this.#setElementL10n(action, {
+ id: "urlbar-result-action-search-w-engine",
+ args: { engine: result.payload.engine },
+ });
+ };
+ }
+ break;
+ case lazy.UrlbarUtils.RESULT_TYPE.KEYWORD:
+ isVisitAction = result.payload.input.trim() == result.payload.keyword;
+ break;
+ case lazy.UrlbarUtils.RESULT_TYPE.OMNIBOX:
+ actionSetter = () => {
+ this.#removeElementL10n(action);
+ action.textContent = result.payload.content;
+ };
+ break;
+ case lazy.UrlbarUtils.RESULT_TYPE.TIP:
+ isRowSelectable = false;
+ break;
+ default:
+ if (result.heuristic && !result.payload.title) {
+ isVisitAction = true;
+ } else if (
+ result.providerName != lazy.UrlbarProviderQuickSuggest.name
+ ) {
+ setURL = true;
+ }
+ break;
+ }
+
+ this.#setRowSelectable(item, isRowSelectable);
+
+ if (result.providerName == "TabToSearch") {
+ action.toggleAttribute("slide-in", true);
+ } else {
+ action.removeAttribute("slide-in");
+ }
+
+ if (result.payload.isPinned) {
+ item.toggleAttribute("pinned", true);
+ } else {
+ item.removeAttribute("pinned");
+ }
+
+ if (
+ result.payload.isSponsored &&
+ result.type != lazy.UrlbarUtils.RESULT_TYPE.TAB_SWITCH
+ ) {
+ item.toggleAttribute("sponsored", true);
+ actionSetter = () => {
+ this.#setElementL10n(action, {
+ id: "urlbar-result-action-sponsored",
+ });
+ };
+ } else {
+ item.removeAttribute("sponsored");
+ }
+
+ if (
+ result.providerName == lazy.UrlbarProviderQuickSuggest.name &&
+ result.payload.isSponsored
+ ) {
+ item.toggleAttribute("firefox-suggest-sponsored", true);
+ } else {
+ item.removeAttribute("firefox-suggest-sponsored");
+ }
+
+ if (result.payload.isRichSuggestion) {
+ let description = item._elements.get("description");
+ description.textContent = result.payload.description;
+ item.setAttribute("rich-suggestion", "with-icon");
+ } else if (lazy.UrlbarPrefs.get("richSuggestions.featureGate")) {
+ // We need to modify the layout of standard urlbar results when
+ // richSuggestions are enabled so the titles align.
+ item.setAttribute("rich-suggestion", "no-icon");
+ } else {
+ item.removeAttribute("rich-suggestion");
+ }
+
+ let url = item._elements.get("url");
+ if (setURL) {
+ item.setAttribute("has-url", "true");
+ this.#addTextContentWithHighlights(
+ url,
+ result.payload.displayUrl,
+ result.payloadHighlights.displayUrl || []
+ );
+ this.#updateOverflowTooltip(url, result.payload.displayUrl);
+ } else {
+ item.removeAttribute("has-url");
+ url.textContent = "";
+ this.#updateOverflowTooltip(url, "");
+ }
+
+ if (isVisitAction) {
+ actionSetter = () => {
+ this.#setElementL10n(action, {
+ id: "urlbar-result-action-visit",
+ });
+ };
+ title.setAttribute("isurl", "true");
+ } else {
+ title.removeAttribute("isurl");
+ }
+
+ if (actionSetter) {
+ actionSetter();
+ item._originalActionSetter = actionSetter;
+ item.setAttribute("has-action", "true");
+ } else {
+ item._originalActionSetter = () => {
+ this.#removeElementL10n(action);
+ action.textContent = "";
+ };
+ item._originalActionSetter();
+ item.removeAttribute("has-action");
+ }
+
+ if (!title.hasAttribute("isurl")) {
+ title.setAttribute("dir", "auto");
+ } else {
+ title.removeAttribute("dir");
+ }
+ }
+
+ #setRowSelectable(item, isRowSelectable) {
+ item.toggleAttribute("row-selectable", isRowSelectable);
+ item._content.toggleAttribute("selectable", isRowSelectable);
+ if (isRowSelectable) {
+ item._content.setAttribute("role", "option");
+ } else {
+ item._content.removeAttribute("role");
+ }
+ }
+
+ #iconForResult(result, iconUrlOverride = null) {
+ return (
+ (result.source == lazy.UrlbarUtils.RESULT_SOURCE.HISTORY &&
+ (result.type == lazy.UrlbarUtils.RESULT_TYPE.SEARCH ||
+ result.type == lazy.UrlbarUtils.RESULT_TYPE.KEYWORD) &&
+ lazy.UrlbarUtils.ICON.HISTORY) ||
+ iconUrlOverride ||
+ result.payload.icon ||
+ (result.type == lazy.UrlbarUtils.RESULT_TYPE.SEARCH &&
+ result.payload.trending &&
+ lazy.UrlbarUtils.ICON.TRENDING) ||
+ ((result.type == lazy.UrlbarUtils.RESULT_TYPE.SEARCH ||
+ result.type == lazy.UrlbarUtils.RESULT_TYPE.KEYWORD) &&
+ lazy.UrlbarUtils.ICON.SEARCH_GLASS) ||
+ lazy.UrlbarUtils.ICON.DEFAULT
+ );
+ }
+
+ async #updateRowForDynamicType(item, result) {
+ item.setAttribute("dynamicType", result.payload.dynamicType);
+
+ let idsByName = new Map();
+ for (let [name, node] of item._elements) {
+ node.id = `${item.id}-${name}`;
+ idsByName.set(name, node.id);
+ }
+
+ // First, apply highlighting. We do this before updating via getViewUpdate
+ // so the dynamic provider can override the highlighting by setting the
+ // textContent of the highlighted node, if it wishes.
+ for (let [payloadName, highlights] of Object.entries(
+ result.payloadHighlights
+ )) {
+ if (!highlights.length) {
+ continue;
+ }
+ // Highlighting only works if the dynamic element name is the same as the
+ // highlighted payload property name.
+ let nodeToHighlight = item.querySelector(`#${item.id}-${payloadName}`);
+ this.#addTextContentWithHighlights(
+ nodeToHighlight,
+ result.payload[payloadName],
+ highlights
+ );
+ }
+
+ // Get the view update from the result's provider.
+ let provider = lazy.UrlbarProvidersManager.getProvider(result.providerName);
+ let viewUpdate = await provider.getViewUpdate(result, idsByName);
+ if (item.result != result) {
+ return;
+ }
+
+ // Update each node in the view by name.
+ for (let [nodeName, update] of Object.entries(viewUpdate)) {
+ let node = item.querySelector(`#${item.id}-${nodeName}`);
+ this.#setDynamicAttributes(node, update.attributes);
+ if (update.style) {
+ for (let [styleName, value] of Object.entries(update.style)) {
+ node.style[styleName] = value;
+ }
+ }
+ if (update.l10n) {
+ if (update.l10n.cacheable) {
+ await this.#l10nCache.ensureAll([update.l10n]);
+ if (item.result != result) {
+ return;
+ }
+ }
+ this.#setElementL10n(node, update.l10n);
+ } else if (update.textContent) {
+ node.textContent = update.textContent;
+ }
+ }
+ }
+
+ #updateRowForBestMatch(item, result) {
+ this.#setRowSelectable(item, true);
+
+ let favicon = item._elements.get("favicon");
+ favicon.src = this.#iconForResult(result);
+
+ let title = item._elements.get("title");
+ this.#setResultTitle(result, title);
+ this.#updateOverflowTooltip(title, result.title);
+
+ let url = item._elements.get("url");
+ this.#addTextContentWithHighlights(
+ url,
+ result.payload.displayUrl,
+ result.payloadHighlights.displayUrl || []
+ );
+ this.#updateOverflowTooltip(url, result.payload.displayUrl);
+
+ let bottom = item._elements.get("bottom");
+ if (result.payload.isSponsored) {
+ this.#setElementL10n(bottom, { id: "urlbar-result-action-sponsored" });
+ } else {
+ this.#removeElementL10n(bottom);
+ }
+ }
+
+ /**
+ * Performs a final pass over all rows in the view after a view update, stale
+ * rows are removed, and other changes to the number of rows. Sets `rowIndex`
+ * on each result, updates row labels, and performs other tasks that must be
+ * deferred until all rows have been updated.
+ */
+ #updateIndices() {
+ this.visibleResults = [];
+
+ // `currentLabel` is the last-seen row label as we iterate through the rows.
+ // When we encounter a label that's different from `currentLabel`, we add it
+ // to the row and set it to `currentLabel`; we remove the labels for all
+ // other rows, and therefore no label will appear adjacent to itself. (A
+ // label may appear more than once, but there will be at least one different
+ // label in between.) Each row's label is determined by `#rowLabel()`.
+ let currentLabel;
+
+ for (let i = 0; i < this.#rows.children.length; i++) {
+ let item = this.#rows.children[i];
+ item.result.rowIndex = i;
+
+ let visible = this.#isElementVisible(item);
+ if (visible) {
+ if (item.result.exposureResultType) {
+ this.#addExposure(item.result);
+ }
+ this.visibleResults.push(item.result);
+ }
+
+ let newLabel = this.#updateRowLabel(item, visible, currentLabel);
+ if (newLabel) {
+ currentLabel = newLabel;
+ }
+ }
+
+ let selectableElement = this.#getFirstSelectableElement();
+ let uiIndex = 0;
+ while (selectableElement) {
+ selectableElement.elementIndex = uiIndex++;
+ selectableElement = this.#getNextSelectableElement(selectableElement);
+ }
+
+ if (this.visibleResults.length) {
+ this.panel.removeAttribute("noresults");
+ } else {
+ this.panel.setAttribute("noresults", "true");
+ }
+ }
+
+ /**
+ * Sets or removes the group label from a row. Designed to be called
+ * iteratively over each row.
+ *
+ * @param {Element} item
+ * A row in the view.
+ * @param {boolean} isVisible
+ * Whether the row is visible. This can be computed by the method itself,
+ * but it's a parameter as an optimization since the caller is expected to
+ * know it.
+ * @param {object} currentLabel
+ * The current group label during row iteration.
+ * @returns {object}
+ * If the given row should not have a label, returns null. Otherwise returns
+ * an l10n object for the label's l10n string: `{ id, args }`
+ */
+ #updateRowLabel(item, isVisible, currentLabel) {
+ let label;
+ if (isVisible) {
+ label = this.#rowLabel(item, currentLabel);
+ if (label && lazy.ObjectUtils.deepEqual(label, currentLabel)) {
+ label = null;
+ }
+ }
+
+ // When the row-inner is selected, screen readers won't naturally read the
+ // label because it's a pseudo-element of the row, not the row-inner. To
+ // compensate, for rows that have labels we add an element to the row-inner
+ // with `aria-label` and no text content. Rows that don't have labels won't
+ // have this element.
+ let groupAriaLabel = item._elements.get("groupAriaLabel");
+
+ if (!label) {
+ this.#removeElementL10n(item, { attribute: "label" });
+ if (groupAriaLabel) {
+ groupAriaLabel.remove();
+ item._elements.delete("groupAriaLabel");
+ }
+ return null;
+ }
+
+ this.#setElementL10n(item, {
+ attribute: "label",
+ id: label.id,
+ args: label.args,
+ });
+
+ if (!groupAriaLabel) {
+ groupAriaLabel = this.#createElement("span");
+ groupAriaLabel.className = "urlbarView-group-aria-label";
+ item._content.insertBefore(groupAriaLabel, item._content.firstChild);
+ item._elements.set("groupAriaLabel", groupAriaLabel);
+ }
+
+ // `aria-label` must be a string, not an l10n ID, so first fetch the
+ // localized value and then set it as the attribute. There's no relevant
+ // aria attribute that uses l10n IDs.
+ this.#l10nCache.ensure(label).then(() => {
+ let message = this.#l10nCache.get(label);
+ groupAriaLabel.setAttribute("aria-label", message?.attributes.label);
+ });
+
+ return label;
+ }
+
+ /**
+ * Returns the group label to use for a row. Designed to be called iteratively
+ * over each row.
+ *
+ * @param {Element} row
+ * A row in the view.
+ * @param {object} currentLabel
+ * The current group label during row iteration.
+ * @returns {object}
+ * If the current row should not have a label, returns null. Otherwise
+ * returns an l10n object for the label's l10n string: `{ id, args }`
+ */
+ #rowLabel(row, currentLabel) {
+ if (!lazy.UrlbarPrefs.get("groupLabels.enabled")) {
+ return null;
+ }
+
+ if (
+ row.result.isBestMatch &&
+ row.result.providerName == lazy.UrlbarProviderQuickSuggest.name &&
+ row.result.payload.telemetryType == "amo"
+ ) {
+ return { id: "urlbar-group-addon" };
+ }
+
+ if (
+ row.result.isBestMatch ||
+ row.result.providerName == lazy.UrlbarProviderWeather.name
+ ) {
+ return { id: "urlbar-group-best-match" };
+ }
+
+ if (!this.#queryContext?.searchString || row.result.heuristic) {
+ return null;
+ }
+
+ if (row.result.providerName == lazy.UrlbarProviderQuickSuggest.name) {
+ return { id: "urlbar-group-firefox-suggest" };
+ }
+
+ switch (row.result.type) {
+ case lazy.UrlbarUtils.RESULT_TYPE.KEYWORD:
+ case lazy.UrlbarUtils.RESULT_TYPE.REMOTE_TAB:
+ case lazy.UrlbarUtils.RESULT_TYPE.TAB_SWITCH:
+ case lazy.UrlbarUtils.RESULT_TYPE.URL:
+ return { id: "urlbar-group-firefox-suggest" };
+ case lazy.UrlbarUtils.RESULT_TYPE.SEARCH:
+ // Show "{ $engine } suggestions" if it's not the first label.
+ if (currentLabel && row.result.payload.suggestion) {
+ let engineName =
+ row.result.payload.engine || Services.search.defaultEngine.name;
+ return {
+ id: "urlbar-group-search-suggestions",
+ args: { engine: engineName },
+ };
+ }
+ break;
+ case lazy.UrlbarUtils.RESULT_TYPE.DYNAMIC:
+ if (row.result.providerName == "quickactions") {
+ return { id: "urlbar-group-quickactions" };
+ }
+ break;
+ }
+
+ return null;
+ }
+
+ #setRowVisibility(row, visible) {
+ row.style.display = visible ? "" : "none";
+ if (
+ !visible &&
+ row.result.type != lazy.UrlbarUtils.RESULT_TYPE.TIP &&
+ row.result.type != lazy.UrlbarUtils.RESULT_TYPE.DYNAMIC
+ ) {
+ // Reset the overflow state of elements that can overflow in case their
+ // content changes while they're hidden. When making the row visible
+ // again, we'll get new overflow events if needed.
+ this.#setElementOverflowing(row._elements.get("title"), false);
+ this.#setElementOverflowing(row._elements.get("url"), false);
+ let tagsContainer = row._elements.get("tagsContainer");
+ if (tagsContainer) {
+ this.#setElementOverflowing(tagsContainer, false);
+ }
+ }
+ }
+
+ /**
+ * Returns true if the given element and its row are both visible.
+ *
+ * @param {Element} element
+ * An element in the view.
+ * @returns {boolean}
+ * True if the given element and its row are both visible.
+ */
+ #isElementVisible(element) {
+ if (!element || element.style.display == "none") {
+ return false;
+ }
+ let row = this.#getRowFromElement(element);
+ return row && row.style.display != "none";
+ }
+
+ #removeStaleRows() {
+ let row = this.#rows.lastElementChild;
+ while (row) {
+ let next = row.previousElementSibling;
+ if (row.hasAttribute("stale")) {
+ row.remove();
+ } else {
+ this.#setRowVisibility(row, true);
+ }
+ row = next;
+ }
+ this.#updateIndices();
+ }
+
+ #startRemoveStaleRowsTimer() {
+ this.#removeStaleRowsTimer = this.window.setTimeout(() => {
+ this.#removeStaleRowsTimer = null;
+ this.#removeStaleRows();
+ }, UrlbarView.removeStaleRowsTimeout);
+ }
+
+ #cancelRemoveStaleRowsTimer() {
+ if (this.#removeStaleRowsTimer) {
+ this.window.clearTimeout(this.#removeStaleRowsTimer);
+ this.#removeStaleRowsTimer = null;
+ }
+ }
+
+ #selectElement(
+ element,
+ { updateInput = true, setAccessibleFocus = true } = {}
+ ) {
+ if (element && !element.matches(KEYBOARD_SELECTABLE_ELEMENT_SELECTOR)) {
+ throw new Error("Element is not keyboard-selectable");
+ }
+
+ if (this.#selectedElement) {
+ this.#selectedElement.toggleAttribute("selected", false);
+ this.#selectedElement.removeAttribute("aria-selected");
+ this.#getSelectedRow()?.toggleAttribute("selected", false);
+ }
+ let row = this.#getRowFromElement(element);
+ if (element) {
+ element.toggleAttribute("selected", true);
+ element.setAttribute("aria-selected", "true");
+ if (row?.hasAttribute("row-selectable")) {
+ row?.toggleAttribute("selected", true);
+ }
+ }
+ this.#setAccessibleFocus(setAccessibleFocus && element);
+ this.#selectedElement = element;
+
+ let result = row?.result;
+ if (updateInput) {
+ let urlOverride = null;
+ if (element?.classList?.contains("urlbarView-button-help")) {
+ urlOverride = result.payload.helpUrl;
+ } else if (element?.classList?.contains("urlbarView-button")) {
+ // Clear the input when a button is selected.
+ urlOverride = "";
+ }
+ this.input.setValueFromResult({ result, urlOverride });
+ } else {
+ this.input.setResultForCurrentValue(result);
+ }
+
+ let provider = lazy.UrlbarProvidersManager.getProvider(
+ result?.providerName
+ );
+ if (provider) {
+ provider.tryMethod("onSelection", result, element);
+ }
+ }
+
+ /**
+ * Returns the element closest to the given element that can be
+ * selected/picked. If the element itself can be selected, it's returned. If
+ * there is no such element, null is returned.
+ *
+ * @param {Element} element
+ * An element in the view.
+ * @param {object} [options]
+ * Options object.
+ * @param {boolean} [options.byMouse]
+ * If true, include elements that are only selectable by mouse.
+ * @returns {Element}
+ * The closest element that can be picked including the element itself, or
+ * null if there is no such element.
+ */
+ #getClosestSelectableElement(element, { byMouse = false } = {}) {
+ let closest = element.closest(
+ byMouse
+ ? SELECTABLE_ELEMENT_SELECTOR
+ : KEYBOARD_SELECTABLE_ELEMENT_SELECTOR
+ );
+ if (closest && this.#isElementVisible(closest)) {
+ return closest;
+ }
+ // When clicking on a gap within a row or on its border or padding, treat
+ // this as if the main part was clicked.
+ if (
+ element.classList.contains("urlbarView-row") &&
+ element.hasAttribute("row-selectable")
+ ) {
+ return element._content;
+ }
+ return null;
+ }
+
+ /**
+ * Returns true if the given element is keyboard-selectable.
+ *
+ * @param {Element} element
+ * The element to test.
+ * @returns {boolean}
+ * True if the element is selectable and false if not.
+ */
+ #isSelectableElement(element) {
+ return this.#getClosestSelectableElement(element) == element;
+ }
+
+ /**
+ * Returns the first keyboard-selectable element in the view.
+ *
+ * @returns {Element}
+ * The first selectable element in the view.
+ */
+ #getFirstSelectableElement() {
+ let element = this.#rows.firstElementChild;
+ if (element && !this.#isSelectableElement(element)) {
+ element = this.#getNextSelectableElement(element);
+ }
+ return element;
+ }
+
+ /**
+ * Returns the last keyboard-selectable element in the view.
+ *
+ * @returns {Element}
+ * The last selectable element in the view.
+ */
+ #getLastSelectableElement() {
+ let element = this.#rows.lastElementChild;
+ if (element && !this.#isSelectableElement(element)) {
+ element = this.#getPreviousSelectableElement(element);
+ }
+ return element;
+ }
+
+ /**
+ * Returns the next keyboard-selectable element after the given element. If
+ * the element is the last selectable element, returns null.
+ *
+ * @param {Element} element
+ * An element in the view.
+ * @returns {Element}
+ * The next selectable element after `element` or null if `element` is the
+ * last selectable element.
+ */
+ #getNextSelectableElement(element) {
+ let row = this.#getRowFromElement(element);
+ if (!row) {
+ return null;
+ }
+
+ let next = row.nextElementSibling;
+ let selectables = [
+ ...row.querySelectorAll(KEYBOARD_SELECTABLE_ELEMENT_SELECTOR),
+ ];
+ if (selectables.length) {
+ let index = selectables.indexOf(element);
+ if (index < selectables.length - 1) {
+ next = selectables[index + 1];
+ }
+ }
+
+ if (next && !this.#isSelectableElement(next)) {
+ next = this.#getNextSelectableElement(next);
+ }
+
+ return next;
+ }
+
+ /**
+ * Returns the previous keyboard-selectable element before the given element.
+ * If the element is the first selectable element, returns null.
+ *
+ * @param {Element} element
+ * An element in the view.
+ * @returns {Element}
+ * The previous selectable element before `element` or null if `element` is
+ * the first selectable element.
+ */
+ #getPreviousSelectableElement(element) {
+ let row = this.#getRowFromElement(element);
+ if (!row) {
+ return null;
+ }
+
+ let previous = row.previousElementSibling;
+ let selectables = [
+ ...row.querySelectorAll(KEYBOARD_SELECTABLE_ELEMENT_SELECTOR),
+ ];
+ if (selectables.length) {
+ let index = selectables.indexOf(element);
+ if (index < 0) {
+ previous = selectables[selectables.length - 1];
+ } else if (index > 0) {
+ previous = selectables[index - 1];
+ }
+ }
+
+ if (previous && !this.#isSelectableElement(previous)) {
+ previous = this.#getPreviousSelectableElement(previous);
+ }
+
+ return previous;
+ }
+
+ /**
+ * Returns the currently selected row. Useful when this.#selectedElement may
+ * be a non-row element, such as a descendant element of RESULT_TYPE.TIP.
+ *
+ * @returns {Element}
+ * The currently selected row, or ancestor row of the currently selected
+ * item.
+ */
+ #getSelectedRow() {
+ return this.#getRowFromElement(this.#selectedElement);
+ }
+
+ /**
+ * @param {Element} element
+ * An element that is potentially a row or descendant of a row.
+ * @returns {Element}
+ * The row containing `element`, or `element` itself if it is a row.
+ */
+ #getRowFromElement(element) {
+ return element?.closest(".urlbarView-row");
+ }
+
+ #setAccessibleFocus(item) {
+ if (item) {
+ this.input.inputField.setAttribute("aria-activedescendant", item.id);
+ } else {
+ this.input.inputField.removeAttribute("aria-activedescendant");
+ }
+ }
+
+ /**
+ * Sets `result`'s title in `titleNode`'s DOM.
+ *
+ * @param {UrlbarResult} result
+ * The result for which the title is being set.
+ * @param {Element} titleNode
+ * The DOM node for the result's tile.
+ */
+ #setResultTitle(result, titleNode) {
+ if (result.payload.titleL10n) {
+ this.#setElementL10n(titleNode, result.payload.titleL10n);
+ return;
+ }
+
+ // TODO: `text` is intended only for WebExtensions. We should remove it and
+ // the WebExtensions urlbar API since we're no longer using it.
+ if (result.payload.text) {
+ titleNode.textContent = result.payload.text;
+ return;
+ }
+
+ if (result.payload.providesSearchMode) {
+ // Keyword offers are the only result that require a localized title.
+ // We localize the title instead of using the action text as a title
+ // because some keyword offer results use both a title and action text
+ // (e.g. tab-to-search).
+ this.#setElementL10n(titleNode, {
+ id: "urlbar-result-action-search-w-engine",
+ args: { engine: result.payload.engine },
+ });
+ return;
+ }
+
+ this.#removeElementL10n(titleNode);
+ this.#addTextContentWithHighlights(
+ titleNode,
+ result.title,
+ result.titleHighlights
+ );
+ }
+
+ /**
+ * Adds text content to a node, placing substrings that should be highlighted
+ * inside <em> nodes.
+ *
+ * @param {Element} parentNode
+ * The text content will be added to this node.
+ * @param {string} textContent
+ * The text content to give the node.
+ * @param {Array} highlights
+ * The matches to highlight in the text.
+ */
+ #addTextContentWithHighlights(parentNode, textContent, highlights) {
+ parentNode.textContent = "";
+ if (!textContent) {
+ return;
+ }
+ highlights = (highlights || []).concat([[textContent.length, 0]]);
+ let index = 0;
+ for (let [highlightIndex, highlightLength] of highlights) {
+ if (highlightIndex - index > 0) {
+ parentNode.appendChild(
+ this.document.createTextNode(
+ textContent.substring(index, highlightIndex)
+ )
+ );
+ }
+ if (highlightLength > 0) {
+ let strong = this.#createElement("strong");
+ strong.textContent = textContent.substring(
+ highlightIndex,
+ highlightIndex + highlightLength
+ );
+ parentNode.appendChild(strong);
+ }
+ index = highlightIndex + highlightLength;
+ }
+ }
+
+ /**
+ * Adds markup for a tail suggestion prefix to a row.
+ *
+ * @param {Element} item
+ * The node for the result row.
+ * @param {UrlbarResult} result
+ * A UrlbarResult representing a tail suggestion.
+ */
+ #fillTailSuggestionPrefix(item, result) {
+ let tailPrefixStrNode = item._elements.get("tailPrefixStr");
+ let tailPrefixStr = result.payload.suggestion.substring(
+ 0,
+ result.payload.tailOffsetIndex
+ );
+ tailPrefixStrNode.textContent = tailPrefixStr;
+
+ let tailPrefixCharNode = item._elements.get("tailPrefixChar");
+ tailPrefixCharNode.textContent = result.payload.tailPrefix;
+ }
+
+ #enableOrDisableRowWrap() {
+ if (getBoundsWithoutFlushing(this.input.textbox).width < 650) {
+ this.#rows.setAttribute("wrap", "true");
+ } else {
+ this.#rows.removeAttribute("wrap");
+ }
+ }
+
+ /**
+ * @param {Element} element
+ * The element
+ * @returns {boolean}
+ * Whether we track this element's overflow status in order to fade it out
+ * and add a tooltip when needed.
+ */
+ #canElementOverflow(element) {
+ let { classList } = element;
+ return (
+ classList.contains("urlbarView-overflowable") ||
+ classList.contains("urlbarView-url")
+ );
+ }
+
+ /**
+ * Marks an element as overflowing or not overflowing.
+ *
+ * @param {Element} element
+ * The element
+ * @param {boolean} overflowing
+ * Whether the element is overflowing
+ */
+ #setElementOverflowing(element, overflowing) {
+ element.toggleAttribute("overflow", overflowing);
+ this.#updateOverflowTooltip(element);
+ }
+
+ /**
+ * Sets an overflowing element's tooltip, or removes the tooltip if the
+ * element isn't overflowing. Also optionally updates the string that should
+ * be used as the tooltip in case of overflow.
+ *
+ * @param {Element} element
+ * The element
+ * @param {string} [tooltip]
+ * The string that should be used in the tooltip. This will be stored and
+ * re-used next time the element overflows.
+ */
+ #updateOverflowTooltip(element, tooltip) {
+ if (typeof tooltip == "string") {
+ element._tooltip = tooltip;
+ }
+ if (element.hasAttribute("overflow") && element._tooltip) {
+ element.setAttribute("title", element._tooltip);
+ } else {
+ element.removeAttribute("title");
+ }
+ }
+
+ /**
+ * If the view is open and showing a single search tip, this method picks it
+ * and closes the view. This counts as an engagement, so this method should
+ * only be called due to user interaction.
+ *
+ * @param {event} event
+ * The user-initiated event for the interaction. Should not be null.
+ * @returns {boolean}
+ * True if this method picked a tip, false otherwise.
+ */
+ #pickSearchTipIfPresent(event) {
+ if (
+ !this.isOpen ||
+ !this.#queryContext ||
+ this.#queryContext.results.length != 1
+ ) {
+ return false;
+ }
+ let result = this.#queryContext.results[0];
+ if (result.type != lazy.UrlbarUtils.RESULT_TYPE.TIP) {
+ return false;
+ }
+ let buttons = this.#rows.firstElementChild._buttons;
+ let tipButton = buttons.get("tip") || buttons.get("0");
+ if (!tipButton) {
+ throw new Error("Expected a tip button");
+ }
+ this.input.pickElement(tipButton, event);
+ return true;
+ }
+
+ /**
+ * Caches some l10n strings used by the view. Strings that are already cached
+ * are not cached again.
+ *
+ * Note:
+ * Currently strings are never evicted from the cache, so do not cache
+ * strings whose arguments include the search string or other values that
+ * can cause the cache to grow unbounded. Suitable strings include those
+ * without arguments or those whose arguments depend on a small set of
+ * static values like search engine names.
+ */
+ async #cacheL10nStrings() {
+ let idArgs = [
+ ...this.#cacheL10nIDArgsForSearchService(),
+ { id: "urlbar-result-action-search-bookmarks" },
+ { id: "urlbar-result-action-search-history" },
+ { id: "urlbar-result-action-search-in-private" },
+ { id: "urlbar-result-action-search-tabs" },
+ { id: "urlbar-result-action-switch-tab" },
+ { id: "urlbar-result-action-visit" },
+ ];
+
+ if (lazy.UrlbarPrefs.get("groupLabels.enabled")) {
+ idArgs.push({ id: "urlbar-group-firefox-suggest" });
+ if (
+ (lazy.UrlbarPrefs.get("bestMatchEnabled") &&
+ lazy.UrlbarPrefs.get("suggest.bestmatch")) ||
+ (lazy.UrlbarPrefs.get("weatherFeatureGate") &&
+ lazy.UrlbarPrefs.get("suggest.weather"))
+ ) {
+ idArgs.push({ id: "urlbar-group-best-match" });
+ }
+ }
+
+ if (
+ lazy.UrlbarPrefs.get("quickSuggestEnabled") &&
+ lazy.UrlbarPrefs.get("suggest.quicksuggest.sponsored")
+ ) {
+ idArgs.push({ id: "urlbar-result-action-sponsored" });
+ }
+
+ await this.#l10nCache.ensureAll(idArgs);
+ }
+
+ /**
+ * A helper for l10n string caching that returns `{ id, args }` objects for
+ * strings that depend on the search service.
+ *
+ * @returns {Array}
+ * Array of `{ id, args }` objects, possibly empty.
+ */
+ #cacheL10nIDArgsForSearchService() {
+ // The search service may not be initialized if the user opens the view very
+ // quickly after startup. Skip caching related strings in that case. Strings
+ // are cached opportunistically every time the view opens, so they'll be
+ // cached soon. We could use the search service's async methods, which
+ // internally await initialization, but that would allow previously cached
+ // out-of-date strings to appear in the view while the async calls are
+ // ongoing. Generally there's no reason for our string-caching paths to be
+ // async and it may even be a bad idea (except for the final necessary
+ // `this.#l10nCache.ensureAll()` call).
+ if (!Services.search.hasSuccessfullyInitialized) {
+ return [];
+ }
+
+ let idArgs = [];
+
+ let { defaultEngine, defaultPrivateEngine } = Services.search;
+ let engineNames = [defaultEngine?.name, defaultPrivateEngine?.name].filter(
+ name => name
+ );
+
+ if (defaultPrivateEngine) {
+ idArgs.push({
+ id: "urlbar-result-action-search-in-private-w-engine",
+ args: { engine: defaultPrivateEngine.name },
+ });
+ }
+
+ let engineStringIDs = [
+ "urlbar-result-action-tabtosearch-web",
+ "urlbar-result-action-tabtosearch-other-engine",
+ "urlbar-result-action-search-w-engine",
+ ];
+ for (let id of engineStringIDs) {
+ idArgs.push(...engineNames.map(name => ({ id, args: { engine: name } })));
+ }
+
+ if (lazy.UrlbarPrefs.get("groupLabels.enabled")) {
+ idArgs.push(
+ ...engineNames.map(name => ({
+ id: "urlbar-group-search-suggestions",
+ args: { engine: name },
+ }))
+ );
+ }
+
+ return idArgs;
+ }
+
+ /**
+ * Sets an element's textContent or attribute to a cached l10n string. If the
+ * string isn't cached, then this falls back to the async `l10n.setAttributes`
+ * using the given l10n ID and args. The string will pop in as a result, but
+ * there's no way around it.
+ *
+ * @param {Element} element
+ * The element to set.
+ * @param {object} options
+ * Options object.
+ * @param {string} options.id
+ * The l10n string ID.
+ * @param {object} options.args
+ * The l10n string arguments.
+ * @param {string} options.attribute
+ * If you're setting an attribute string, then pass the name of the
+ * attribute. In that case, the string in the Fluent file should define a
+ * value for the attribute, like ".foo = My value for the foo attribute".
+ * If you're setting the element's textContent, then leave this undefined.
+ * @param {boolean} options.excludeArgsFromCacheKey
+ * Pass true if the string was cached using a key that excluded arguments.
+ */
+ #setElementL10n(
+ element,
+ {
+ id,
+ args = undefined,
+ attribute = undefined,
+ excludeArgsFromCacheKey = false,
+ }
+ ) {
+ let message = this.#l10nCache.get({ id, args, excludeArgsFromCacheKey });
+ if (message) {
+ element.removeAttribute("data-l10n-id");
+ if (attribute) {
+ element.setAttribute(attribute, message.attributes[attribute]);
+ } else {
+ element.textContent = message.value;
+ }
+ } else {
+ if (attribute) {
+ element.setAttribute("data-l10n-attrs", attribute);
+ }
+ this.document.l10n.setAttributes(element, id, args);
+ }
+ }
+
+ /**
+ * Removes textContent and attributes set by `#setElementL10n`.
+ *
+ * @param {Element} element
+ * The element that should be acted on
+ * @param {object} options
+ * Options object
+ * @param {string} [options.attribute]
+ * If you passed an attribute to `#setElementL10n`, then pass it here too.
+ */
+ #removeElementL10n(element, { attribute = undefined } = {}) {
+ if (attribute) {
+ element.removeAttribute(attribute);
+ element.removeAttribute("data-l10n-attrs");
+ } else {
+ element.textContent = "";
+ }
+ element.removeAttribute("data-l10n-id");
+ }
+
+ get #isShowingZeroPrefix() {
+ return !!this.#zeroPrefixStopwatchInstance;
+ }
+
+ #setIsShowingZeroPrefix(isShowing) {
+ if (!!isShowing == !!this.#zeroPrefixStopwatchInstance) {
+ return;
+ }
+
+ if (!isShowing) {
+ TelemetryStopwatch.finish(
+ ZERO_PREFIX_HISTOGRAM_DWELL_TIME,
+ this.#zeroPrefixStopwatchInstance
+ );
+ this.#zeroPrefixStopwatchInstance = null;
+ return;
+ }
+
+ this.#zeroPrefixStopwatchInstance = {};
+ TelemetryStopwatch.start(
+ ZERO_PREFIX_HISTOGRAM_DWELL_TIME,
+ this.#zeroPrefixStopwatchInstance
+ );
+
+ Services.telemetry.scalarAdd(ZERO_PREFIX_SCALAR_EXPOSURE, 1);
+ }
+
+ /**
+ * @param {UrlbarResult} result
+ * The result to get menu commands for.
+ * @returns {Array}
+ * Array of menu commands available for the result, null if there are none.
+ */
+ #getResultMenuCommands(result) {
+ if (!lazy.UrlbarPrefs.get("resultMenu")) {
+ return null;
+ }
+ if (this.#resultMenuCommands.has(result)) {
+ return this.#resultMenuCommands.get(result);
+ }
+
+ let commands = lazy.UrlbarProvidersManager.getProvider(
+ result.providerName
+ )?.tryMethod("getResultCommands", result);
+ if (commands) {
+ this.#resultMenuCommands.set(result, commands);
+ return commands;
+ }
+
+ commands = [];
+ if (
+ result.source == lazy.UrlbarUtils.RESULT_SOURCE.HISTORY &&
+ !result.autofill
+ ) {
+ commands.push(
+ {
+ name: RESULT_MENU_COMMANDS.DISMISS,
+ l10n: { id: "urlbar-result-menu-remove-from-history" },
+ },
+ {
+ name: RESULT_MENU_COMMANDS.HELP,
+ l10n: { id: "urlbar-result-menu-learn-more" },
+ }
+ );
+ }
+ if (result.payload.isBlockable) {
+ commands.push({
+ name: RESULT_MENU_COMMANDS.DISMISS,
+ l10n: result.payload.blockL10n,
+ });
+ }
+ if (result.payload.helpUrl) {
+ commands.push({
+ name: RESULT_MENU_COMMANDS.HELP,
+ l10n: result.payload.helpL10n,
+ });
+ }
+ let rv = commands.length ? commands : null;
+ this.#resultMenuCommands.set(result, rv);
+ return rv;
+ }
+
+ #populateResultMenu(
+ menupopup = this.resultMenu,
+ commands = this.#getResultMenuCommands(this.#resultMenuResult)
+ ) {
+ menupopup.textContent = "";
+ for (let data of commands) {
+ if (data.children) {
+ let popup = this.document.createXULElement("menupopup");
+ this.#populateResultMenu(popup, data.children);
+ let menu = this.document.createXULElement("menu");
+ this.#setElementL10n(menu, data.l10n);
+ menu.appendChild(popup);
+ menupopup.appendChild(menu);
+ continue;
+ }
+ if (data.name == "separator") {
+ menupopup.appendChild(this.document.createXULElement("menuseparator"));
+ continue;
+ }
+ let menuitem = this.document.createXULElement("menuitem");
+ menuitem.dataset.command = data.name;
+ menuitem.classList.add("urlbarView-result-menuitem");
+ this.#setElementL10n(menuitem, data.l10n);
+ menupopup.appendChild(menuitem);
+ }
+ }
+
+ // Event handlers below.
+
+ on_SelectedOneOffButtonChanged() {
+ if (!this.isOpen || !this.#queryContext) {
+ return;
+ }
+
+ let engine = this.oneOffSearchButtons.selectedButton?.engine;
+ let source = this.oneOffSearchButtons.selectedButton?.source;
+
+ let localSearchMode;
+ if (source) {
+ localSearchMode = lazy.UrlbarUtils.LOCAL_SEARCH_MODES.find(
+ m => m.source == source
+ );
+ }
+
+ for (let item of this.#rows.children) {
+ let result = item.result;
+
+ let isPrivateSearchWithoutPrivateEngine =
+ result.payload.inPrivateWindow && !result.payload.isPrivateEngine;
+ let isSearchHistory =
+ result.type == lazy.UrlbarUtils.RESULT_TYPE.SEARCH &&
+ result.source == lazy.UrlbarUtils.RESULT_SOURCE.HISTORY;
+ let isSearchSuggestion = result.payload.suggestion && !isSearchHistory;
+
+ // For one-off buttons having a source, we update the action for the
+ // heuristic result, or for any non-heuristic that is a remote search
+ // suggestion or a private search with no private engine.
+ if (
+ !result.heuristic &&
+ !isSearchSuggestion &&
+ !isPrivateSearchWithoutPrivateEngine
+ ) {
+ continue;
+ }
+
+ // If there is no selected button and we are in full search mode, it is
+ // because the user just confirmed a one-off button, thus starting a new
+ // query. Don't change the heuristic result because it would be
+ // immediately replaced with the search mode heuristic, causing flicker.
+ if (
+ result.heuristic &&
+ !engine &&
+ !localSearchMode &&
+ this.input.searchMode &&
+ !this.input.searchMode.isPreview
+ ) {
+ continue;
+ }
+
+ let action = item.querySelector(".urlbarView-action");
+ let favicon = item.querySelector(".urlbarView-favicon");
+ let title = item.querySelector(".urlbarView-title");
+
+ // If a one-off button is the only selection, force the heuristic result
+ // to show its action text, so the engine name is visible.
+ if (
+ result.heuristic &&
+ !this.selectedElement &&
+ (localSearchMode || engine)
+ ) {
+ item.setAttribute("show-action-text", "true");
+ } else {
+ item.removeAttribute("show-action-text");
+ }
+
+ // If an engine is selected, update search results to use that engine.
+ // Otherwise, restore their original engines.
+ if (result.type == lazy.UrlbarUtils.RESULT_TYPE.SEARCH) {
+ if (engine) {
+ if (!result.payload.originalEngine) {
+ result.payload.originalEngine = result.payload.engine;
+ }
+ result.payload.engine = engine.name;
+ } else if (result.payload.originalEngine) {
+ result.payload.engine = result.payload.originalEngine;
+ delete result.payload.originalEngine;
+ }
+ }
+
+ // If the result is the heuristic and a one-off is selected (i.e.,
+ // localSearchMode || engine), then restyle it to look like a search
+ // result; otherwise, remove such styling. For restyled results, we
+ // override the usual result-picking behaviour in UrlbarInput.pickResult.
+ if (result.heuristic) {
+ title.textContent =
+ localSearchMode || engine
+ ? this.#queryContext.searchString
+ : result.title;
+
+ // Set the restyled-search attribute so the action text and title
+ // separator are shown or hidden via CSS as appropriate.
+ if (localSearchMode || engine) {
+ item.setAttribute("restyled-search", "true");
+ } else {
+ item.removeAttribute("restyled-search");
+ }
+ }
+
+ // Update result action text.
+ if (localSearchMode) {
+ // Update the result action text for a local one-off.
+ let name = lazy.UrlbarUtils.getResultSourceName(localSearchMode.source);
+ this.#setElementL10n(action, {
+ id: `urlbar-result-action-search-${name}`,
+ });
+ if (result.heuristic) {
+ item.setAttribute("source", name);
+ }
+ } else if (engine && !result.payload.inPrivateWindow) {
+ // Update the result action text for an engine one-off.
+ this.#setElementL10n(action, {
+ id: "urlbar-result-action-search-w-engine",
+ args: { engine: engine.name },
+ });
+ } else {
+ // No one-off is selected. If we replaced the action while a one-off
+ // button was selected, it should be restored.
+ if (item._originalActionSetter) {
+ item._originalActionSetter();
+ if (result.heuristic) {
+ favicon.src = result.payload.icon || lazy.UrlbarUtils.ICON.DEFAULT;
+ }
+ } else {
+ console.error("An item is missing the action setter");
+ }
+ item.removeAttribute("source");
+ }
+
+ // Update result favicons.
+ let iconOverride = localSearchMode?.icon || engine?.iconURI?.spec;
+ if (!iconOverride && (localSearchMode || engine)) {
+ // For one-offs without an icon, do not allow restyled URL results to
+ // use their own icons.
+ iconOverride = lazy.UrlbarUtils.ICON.SEARCH_GLASS;
+ }
+ if (
+ result.heuristic ||
+ (result.payload.inPrivateWindow && !result.payload.isPrivateEngine)
+ ) {
+ // If we just changed the engine from the original engine and it had an
+ // icon, then make sure the result now uses the new engine's icon or
+ // failing that the default icon. If we changed it back to the original
+ // engine, go back to the original or default icon.
+ favicon.src = this.#iconForResult(result, iconOverride);
+ }
+ }
+ }
+
+ on_blur(event) {
+ // If the view is open without the input being focused, it will not close
+ // automatically when the window loses focus. We might be in this state
+ // after a Search Tip is shown on an engine homepage.
+ if (!lazy.UrlbarPrefs.get("ui.popup.disable_autohide")) {
+ this.close();
+ }
+ }
+
+ on_mousedown(event) {
+ if (event.button == 2) {
+ // Ignore right clicks.
+ return;
+ }
+
+ let element = this.#getClosestSelectableElement(event.target, {
+ byMouse: true,
+ });
+ if (!element) {
+ // Ignore clicks on elements that can't be selected/picked.
+ return;
+ }
+
+ this.window.top.addEventListener("mouseup", this);
+
+ // Select the element and open a speculative connection unless it's a
+ // button. Buttons are special in the two ways listed below. Some buttons
+ // may be exceptions to these two criteria, but to provide a consistent UX
+ // and avoid complexity, we apply this logic to all of them.
+ //
+ // (1) Some buttons do not close the view when clicked, like the block and
+ // menu buttons. Clicking these buttons should not have any side effects in
+ // the view or input beyond their primary purpose. For example, the block
+ // button should remove the row but it should not change the input value or
+ // page proxy state, and ideally it shouldn't change the input's selection
+ // or caret either. It probably also shouldn't change the view's selection
+ // (if the removed row isn't selected), but that may be more debatable.
+ //
+ // It may be possible to select buttons on mousedown and then clear the
+ // selection on mouseup as usual while meeting these requirements. However,
+ // it's not simple because clearing the selection has surprising side
+ // effects in the input like the ones mentioned above.
+ //
+ // (2) Most buttons don't have URLs, so there's nothing to speculatively
+ // connect to. If a button does have a URL, it's typically different from
+ // the primary URL of its related result, so it's not critical to open a
+ // speculative connection anyway.
+ if (!element.classList.contains("urlbarView-button")) {
+ this.#mousedownSelectedElement = element;
+ this.#selectElement(element, { updateInput: false });
+ this.controller.speculativeConnect(
+ this.selectedResult,
+ this.#queryContext,
+ "mousedown"
+ );
+ }
+ }
+
+ on_mouseup(event) {
+ if (event.button == 2) {
+ // Ignore right clicks.
+ return;
+ }
+
+ this.window.top.removeEventListener("mouseup", this);
+
+ // When mouseup outside of browser, as the target will not be element,
+ // ignore it.
+ let element =
+ event.target.nodeType === event.target.ELEMENT_NODE
+ ? this.#getClosestSelectableElement(event.target, { byMouse: true })
+ : null;
+ if (element) {
+ this.input.pickElement(element, event);
+ }
+
+ // If the element that was selected on mousedown is still in the view, clear
+ // the selection. Do it after calling `pickElement()` above since code that
+ // reacts to picks may assume the selected element is the picked element.
+ //
+ // If the element is no longer in the view, then it must be because its row
+ // was removed in response to the pick. If the element was not a button, we
+ // selected it on mousedown and then `onQueryResultRemoved()` selected the
+ // next row; we shouldn't unselect it here. If the element was a button,
+ // then we didn't select anything on mousedown; clearing the selection seems
+ // like it would be harmless, but it has side effects in the input we want
+ // to avoid (see `on_mousedown()`).
+ if (this.#mousedownSelectedElement?.isConnected) {
+ this.#selectElement(null);
+ }
+ this.#mousedownSelectedElement = null;
+ }
+
+ on_overflow(event) {
+ if (
+ event.detail == 1 /* horizontal overflow */ &&
+ this.#canElementOverflow(event.target)
+ ) {
+ this.#setElementOverflowing(event.target, true);
+ }
+ }
+
+ on_underflow(event) {
+ if (
+ event.detail == 1 /* horizontal underflow */ &&
+ this.#canElementOverflow(event.target)
+ ) {
+ this.#setElementOverflowing(event.target, false);
+ }
+ }
+
+ on_resize() {
+ this.#enableOrDisableRowWrap();
+ }
+
+ on_command(event) {
+ if (event.currentTarget == this.resultMenu) {
+ let result = this.#resultMenuResult;
+ this.#resultMenuResult = null;
+ let menuitem = event.target;
+ switch (menuitem.dataset.command) {
+ case RESULT_MENU_COMMANDS.HELP:
+ menuitem.dataset.url =
+ result.payload.helpUrl ||
+ Services.urlFormatter.formatURLPref("app.support.baseURL") +
+ "awesome-bar-result-menu";
+ break;
+ }
+ this.input.pickResult(result, event, menuitem);
+ }
+ }
+
+ on_popupshowing(event) {
+ if (event.target == this.resultMenu) {
+ this.#populateResultMenu();
+ }
+ }
+
+ /**
+ * Add result to exposure set on the controller.
+ *
+ * @param {UrlbarResult} result UrlbarResult for which to record an exposure.
+ */
+ #addExposure(result) {
+ this.controller.engagementEvent.addExposure(result);
+ }
+}
+
+/**
+ * Implements a QueryContext cache, working as a circular buffer, when a new
+ * entry is added at the top, the last item is remove from the bottom.
+ */
+class QueryContextCache {
+ #cache;
+ #size;
+ #topSitesContext;
+ #topSitesListener;
+
+ /**
+ * Constructor.
+ *
+ * @param {number} size The number of entries to keep in the cache.
+ */
+ constructor(size) {
+ this.#size = size;
+ this.#cache = [];
+
+ // We store the top-sites context separately since it will often be needed
+ // and therefore shouldn't be evicted except when the top sites change.
+ this.#topSitesContext = null;
+ this.#topSitesListener = () => (this.#topSitesContext = null);
+ lazy.UrlbarProviderTopSites.addTopSitesListener(this.#topSitesListener);
+ }
+
+ /**
+ * @returns {number} The number of entries to keep in the cache.
+ */
+ get size() {
+ return this.#size;
+ }
+
+ /**
+ * @returns {UrlbarQueryContext} The cached top-sites context or null if none.
+ */
+ get topSitesContext() {
+ return this.#topSitesContext;
+ }
+
+ /**
+ * Adds a new entry to the cache.
+ *
+ * @param {UrlbarQueryContext} queryContext The UrlbarQueryContext to add.
+ * Note: QueryContexts without results are ignored and not added. Contexts
+ * with an empty searchString that are not the top-sites context are
+ * also ignored.
+ */
+ put(queryContext) {
+ if (!queryContext.results.length) {
+ return;
+ }
+
+ let searchString = queryContext.searchString;
+ if (!searchString) {
+ // Cache the context if it's the top-sites context. An empty search string
+ // doesn't necessarily imply top sites since there are other queries that
+ // use it too, like search mode. If any result is from the top-sites
+ // provider, assume the context is top sites.
+ if (
+ queryContext.results?.some(
+ r => r.providerName == lazy.UrlbarProviderTopSites.name
+ )
+ ) {
+ this.#topSitesContext = queryContext;
+ }
+ return;
+ }
+
+ let index = this.#cache.findIndex(e => e.searchString == searchString);
+ if (index != -1) {
+ if (this.#cache[index] == queryContext) {
+ return;
+ }
+ this.#cache.splice(index, 1);
+ }
+ if (this.#cache.unshift(queryContext) > this.size) {
+ this.#cache.length = this.size;
+ }
+ }
+
+ get(searchString) {
+ return this.#cache.find(e => e.searchString == searchString);
+ }
+}
+
+/**
+ * Adds a dynamic result type stylesheet to a specified window.
+ *
+ * @param {Window} window
+ * The window to which to add the stylesheet.
+ * @param {string} stylesheetURL
+ * The stylesheet's URL.
+ */
+async function addDynamicStylesheet(window, stylesheetURL) {
+ // Try-catch all of these so that failing to load a stylesheet doesn't break
+ // callers and possibly the urlbar. If a stylesheet does fail to load, the
+ // dynamic results that depend on it will appear broken, but at least we
+ // won't break the whole urlbar.
+ try {
+ let uri = Services.io.newURI(stylesheetURL);
+ let sheet = await lazy.styleSheetService.preloadSheetAsync(
+ uri,
+ Ci.nsIStyleSheetService.AGENT_SHEET
+ );
+ window.windowUtils.addSheet(sheet, Ci.nsIDOMWindowUtils.AGENT_SHEET);
+ } catch (ex) {
+ console.error(`Error adding dynamic stylesheet: ${ex}`);
+ }
+}
+
+/**
+ * Removes a dynamic result type stylesheet from the view's window.
+ *
+ * @param {Window} window
+ * The window from which to remove the stylesheet.
+ * @param {string} stylesheetURL
+ * The stylesheet's URL.
+ */
+function removeDynamicStylesheet(window, stylesheetURL) {
+ // Try-catch for the same reason as desribed in addDynamicStylesheet.
+ try {
+ window.windowUtils.removeSheetUsingURIString(
+ stylesheetURL,
+ Ci.nsIDOMWindowUtils.AGENT_SHEET
+ );
+ } catch (ex) {
+ console.error(`Error removing dynamic stylesheet: ${ex}`);
+ }
+}