summaryrefslogtreecommitdiffstats
path: root/browser/components/search/content/searchbar.js
diff options
context:
space:
mode:
Diffstat (limited to 'browser/components/search/content/searchbar.js')
-rw-r--r--browser/components/search/content/searchbar.js907
1 files changed, 907 insertions, 0 deletions
diff --git a/browser/components/search/content/searchbar.js b/browser/components/search/content/searchbar.js
new file mode 100644
index 0000000000..986a1b4d82
--- /dev/null
+++ b/browser/components/search/content/searchbar.js
@@ -0,0 +1,907 @@
+/* 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/. */
+
+"use strict";
+
+/* globals XULCommandEvent */
+
+// This is loaded into chrome windows with the subscript loader. Wrap in
+// a block to prevent accidentally leaking globals onto `window`.
+{
+ const lazy = {};
+
+ ChromeUtils.defineESModuleGetters(lazy, {
+ FormHistory: "resource://gre/modules/FormHistory.sys.mjs",
+ SearchSuggestionController:
+ "resource://gre/modules/SearchSuggestionController.sys.mjs",
+ });
+
+ /**
+ * Defines the search bar element.
+ */
+ class MozSearchbar extends MozXULElement {
+ static get inheritedAttributes() {
+ return {
+ ".searchbar-textbox":
+ "disabled,disableautocomplete,searchengine,src,newlines",
+ ".searchbar-search-button": "addengines",
+ };
+ }
+
+ static get markup() {
+ return `
+ <stringbundle src="chrome://browser/locale/search.properties"></stringbundle>
+ <hbox class="searchbar-search-button" data-l10n-id="searchbar-icon" role="button" keyNav="false" aria-expanded="false" aria-controls="PopupSearchAutoComplete" aria-haspopup="true">
+ <image class="searchbar-search-icon"></image>
+ <image class="searchbar-search-icon-overlay"></image>
+ </hbox>
+ <html:input class="searchbar-textbox" is="autocomplete-input" type="search" data-l10n-id="searchbar-input" autocompletepopup="PopupSearchAutoComplete" autocompletesearch="search-autocomplete" autocompletesearchparam="searchbar-history" maxrows="10" completeselectedindex="true" minresultsforpopup="0"/>
+ <menupopup class="textbox-contextmenu"></menupopup>
+ <hbox class="search-go-container" align="center">
+ <image class="search-go-button urlbar-icon" role="button" keyNav="false" hidden="true" onclick="handleSearchCommand(event);" data-l10n-id="searchbar-submit"></image>
+ </hbox>
+ `;
+ }
+
+ constructor() {
+ super();
+
+ MozXULElement.insertFTLIfNeeded("browser/search.ftl");
+
+ this.destroy = this.destroy.bind(this);
+ this._setupEventListeners();
+ let searchbar = this;
+ this.observer = {
+ observe(aEngine, aTopic, aVerb) {
+ if (aTopic == "browser-search-engine-modified") {
+ // Make sure the engine list is refetched next time it's needed
+ searchbar._engines = null;
+
+ // Update the popup header and update the display after any modification.
+ searchbar._textbox.popup.updateHeader();
+ searchbar.updateDisplay();
+ }
+ },
+ QueryInterface: ChromeUtils.generateQI(["nsIObserver"]),
+ };
+
+ this._ignoreFocus = false;
+ this._engines = null;
+ this.telemetrySelectedIndex = -1;
+ }
+
+ connectedCallback() {
+ // Don't initialize if this isn't going to be visible
+ if (this.closest("#BrowserToolbarPalette")) {
+ return;
+ }
+
+ this.appendChild(this.constructor.fragment);
+ this.initializeAttributeInheritance();
+
+ // Don't go further if in Customize mode.
+ if (this.parentNode.parentNode.localName == "toolbarpaletteitem") {
+ return;
+ }
+
+ // Ensure we get persisted widths back, if we've been in the palette:
+ let storedWidth = Services.xulStore.getValue(
+ document.documentURI,
+ this.parentNode.id,
+ "width"
+ );
+ if (storedWidth) {
+ this.parentNode.setAttribute("width", storedWidth);
+ this.parentNode.style.width = storedWidth + "px";
+ }
+
+ this._stringBundle = this.querySelector("stringbundle");
+ this._textbox = this.querySelector(".searchbar-textbox");
+
+ this._menupopup = null;
+ this._pasteAndSearchMenuItem = null;
+
+ this._setupTextboxEventListeners();
+ this._initTextbox();
+
+ window.addEventListener("unload", this.destroy);
+
+ Services.obs.addObserver(this.observer, "browser-search-engine-modified");
+
+ this._initialized = true;
+
+ (window.delayedStartupPromise || Promise.resolve()).then(() => {
+ window.requestIdleCallback(() => {
+ Services.search
+ .init()
+ .then(aStatus => {
+ // Bail out if the binding's been destroyed
+ if (!this._initialized) {
+ return;
+ }
+
+ // Ensure the popup header is updated if the user has somehow
+ // managed to open the popup before the search service has finished
+ // initializing.
+ this._textbox.popup.updateHeader();
+ // Refresh the display (updating icon, etc)
+ this.updateDisplay();
+ BrowserSearch.updateOpenSearchBadge();
+ })
+ .catch(status =>
+ console.error(
+ "Cannot initialize search service, bailing out:",
+ status
+ )
+ );
+ });
+ });
+
+ // Wait until the popupshowing event to avoid forcing immediate
+ // attachment of the search-one-offs binding.
+ this.textbox.popup.addEventListener(
+ "popupshowing",
+ () => {
+ let oneOffButtons = this.textbox.popup.oneOffButtons;
+ // Some accessibility tests create their own <searchbar> that doesn't
+ // use the popup binding below, so null-check oneOffButtons.
+ if (oneOffButtons) {
+ oneOffButtons.telemetryOrigin = "searchbar";
+ // Set .textbox first, since the popup setter will cause
+ // a _rebuild call that uses it.
+ oneOffButtons.textbox = this.textbox;
+ oneOffButtons.popup = this.textbox.popup;
+ }
+ },
+ { capture: true, once: true }
+ );
+ }
+
+ async getEngines() {
+ if (!this._engines) {
+ this._engines = await Services.search.getVisibleEngines();
+ }
+ return this._engines;
+ }
+
+ set currentEngine(val) {
+ if (PrivateBrowsingUtils.isWindowPrivate(window)) {
+ Services.search.setDefaultPrivate(
+ val,
+ Ci.nsISearchService.CHANGE_REASON_USER_SEARCHBAR
+ );
+ } else {
+ Services.search.setDefault(
+ val,
+ Ci.nsISearchService.CHANGE_REASON_USER_SEARCHBAR
+ );
+ }
+ }
+
+ get currentEngine() {
+ let currentEngine;
+ if (PrivateBrowsingUtils.isWindowPrivate(window)) {
+ currentEngine = Services.search.defaultPrivateEngine;
+ } else {
+ currentEngine = Services.search.defaultEngine;
+ }
+ // Return a dummy engine if there is no currentEngine
+ return currentEngine || { name: "", uri: null };
+ }
+
+ /**
+ * textbox is used by sanitize.js to clear the undo history when
+ * clearing form information.
+ *
+ * @returns {HTMLInputElement}
+ */
+ get textbox() {
+ return this._textbox;
+ }
+
+ set value(val) {
+ this._textbox.value = val;
+ }
+
+ get value() {
+ return this._textbox.value;
+ }
+
+ destroy() {
+ if (this._initialized) {
+ this._initialized = false;
+ window.removeEventListener("unload", this.destroy);
+
+ Services.obs.removeObserver(
+ this.observer,
+ "browser-search-engine-modified"
+ );
+ }
+
+ // Make sure to break the cycle from _textbox to us. Otherwise we leak
+ // the world. But make sure it's actually pointing to us.
+ // Also make sure the textbox has ever been constructed, otherwise the
+ // _textbox getter will cause the textbox constructor to run, add an
+ // observer, and leak the world too.
+ if (
+ this._textbox &&
+ this._textbox.mController &&
+ this._textbox.mController.input &&
+ this._textbox.mController.input.wrappedJSObject ==
+ this.nsIAutocompleteInput
+ ) {
+ this._textbox.mController.input = null;
+ }
+ }
+
+ focus() {
+ this._textbox.focus();
+ }
+
+ select() {
+ this._textbox.select();
+ }
+
+ setIcon(element, uri) {
+ element.setAttribute("src", uri);
+ }
+
+ updateDisplay() {
+ this._textbox.title = this._stringBundle.getFormattedString("searchtip", [
+ this.currentEngine.name,
+ ]);
+ }
+
+ updateGoButtonVisibility() {
+ this.querySelector(".search-go-button").hidden = !this._textbox.value;
+ }
+
+ openSuggestionsPanel(aShowOnlySettingsIfEmpty) {
+ if (this._textbox.open) {
+ return;
+ }
+
+ this._textbox.showHistoryPopup();
+ let searchIcon = document.querySelector(".searchbar-search-button");
+ searchIcon.setAttribute("aria-expanded", "true");
+
+ if (this._textbox.value) {
+ // showHistoryPopup does a startSearch("") call, ensure the
+ // controller handles the text from the input box instead:
+ this._textbox.mController.handleText();
+ } else if (aShowOnlySettingsIfEmpty) {
+ this.setAttribute("showonlysettings", "true");
+ }
+ }
+
+ async selectEngine(aEvent, isNextEngine) {
+ // Stop event bubbling now, because the rest of this method is async.
+ aEvent.preventDefault();
+ aEvent.stopPropagation();
+
+ // Find the new index.
+ let engines = await this.getEngines();
+ let currentName = this.currentEngine.name;
+ let newIndex = -1;
+ let lastIndex = engines.length - 1;
+ for (let i = lastIndex; i >= 0; --i) {
+ if (engines[i].name == currentName) {
+ // Check bounds to cycle through the list of engines continuously.
+ if (!isNextEngine && i == 0) {
+ newIndex = lastIndex;
+ } else if (isNextEngine && i == lastIndex) {
+ newIndex = 0;
+ } else {
+ newIndex = i + (isNextEngine ? 1 : -1);
+ }
+ break;
+ }
+ }
+
+ this.currentEngine = engines[newIndex];
+
+ this.openSuggestionsPanel();
+ }
+
+ handleSearchCommand(aEvent, aEngine, aForceNewTab) {
+ let where = "current";
+ let params;
+ const newTabPref = Services.prefs.getBoolPref("browser.search.openintab");
+
+ // Open ctrl/cmd clicks on one-off buttons in a new background tab.
+ if (
+ aEvent &&
+ aEvent.originalTarget.classList.contains("search-go-button")
+ ) {
+ if (aEvent.button == 2) {
+ return;
+ }
+ where = whereToOpenLink(aEvent, false, true);
+ if (
+ newTabPref &&
+ !aEvent.altKey &&
+ !aEvent.getModifierState("AltGraph") &&
+ where == "current" &&
+ !gBrowser.selectedTab.isEmpty
+ ) {
+ where = "tab";
+ }
+ } else if (aForceNewTab) {
+ where = "tab";
+ if (Services.prefs.getBoolPref("browser.tabs.loadInBackground")) {
+ where += "-background";
+ }
+ } else {
+ if (
+ (KeyboardEvent.isInstance(aEvent) &&
+ (aEvent.altKey || aEvent.getModifierState("AltGraph"))) ^
+ newTabPref &&
+ !gBrowser.selectedTab.isEmpty
+ ) {
+ where = "tab";
+ }
+ if (
+ MouseEvent.isInstance(aEvent) &&
+ (aEvent.button == 1 || aEvent.getModifierState("Accel"))
+ ) {
+ where = "tab";
+ params = {
+ inBackground: true,
+ };
+ }
+ }
+ this.handleSearchCommandWhere(aEvent, aEngine, where, params);
+ }
+
+ handleSearchCommandWhere(aEvent, aEngine, aWhere, aParams = {}) {
+ let textBox = this._textbox;
+ let textValue = textBox.value;
+
+ let selectedIndex = this.telemetrySelectedIndex;
+ let isOneOff = false;
+
+ BrowserSearchTelemetry.recordSearchSuggestionSelectionMethod(
+ aEvent,
+ "searchbar",
+ selectedIndex
+ );
+
+ if (selectedIndex == -1) {
+ isOneOff =
+ this.textbox.popup.oneOffButtons.eventTargetIsAOneOff(aEvent);
+ }
+
+ if (aWhere === "tab" && !!aParams.inBackground) {
+ // Keep the focus in the search bar.
+ aParams.avoidBrowserFocus = true;
+ } else if (
+ aWhere !== "window" &&
+ aEvent.keyCode === KeyEvent.DOM_VK_RETURN
+ ) {
+ // Move the focus to the selected browser when keyup the Enter.
+ aParams.avoidBrowserFocus = true;
+ this._needBrowserFocusAtEnterKeyUp = true;
+ }
+
+ // This is a one-off search only if oneOffRecorded is true.
+ this.doSearch(textValue, aWhere, aEngine, aParams, isOneOff);
+ }
+
+ doSearch(aData, aWhere, aEngine, aParams, isOneOff = false) {
+ let textBox = this._textbox;
+ let engine = aEngine || this.currentEngine;
+
+ // Save the current value in the form history
+ if (
+ aData &&
+ !PrivateBrowsingUtils.isWindowPrivate(window) &&
+ lazy.FormHistory.enabled &&
+ aData.length <=
+ lazy.SearchSuggestionController.SEARCH_HISTORY_MAX_VALUE_LENGTH
+ ) {
+ lazy.FormHistory.update({
+ op: "bump",
+ fieldname: textBox.getAttribute("autocompletesearchparam"),
+ value: aData,
+ source: engine.name,
+ }).catch(error =>
+ console.error("Saving search to form history failed:", error)
+ );
+ }
+
+ let submission = engine.getSubmission(aData, null, "searchbar");
+
+ // If we hit here, we come either from a one-off, a plain search or a suggestion.
+ const details = {
+ isOneOff,
+ isSuggestion: !isOneOff && this.telemetrySelectedIndex != -1,
+ };
+
+ this.telemetrySelectedIndex = -1;
+
+ BrowserSearchTelemetry.recordSearch(
+ gBrowser.selectedBrowser,
+ engine,
+ "searchbar",
+ details
+ );
+
+ // Record when the user uses the search bar
+ Services.prefs.setStringPref(
+ "browser.search.widget.lastUsed",
+ new Date().toISOString()
+ );
+
+ // null parameter below specifies HTML response for search
+ let params = {
+ postData: submission.postData,
+ globalHistoryOptions: {
+ triggeringSearchEngine: engine.name,
+ },
+ };
+ if (aParams) {
+ for (let key in aParams) {
+ params[key] = aParams[key];
+ }
+ }
+ openTrustedLinkIn(submission.uri.spec, aWhere, params);
+ }
+
+ disconnectedCallback() {
+ this.destroy();
+ while (this.firstChild) {
+ this.firstChild.remove();
+ }
+ }
+
+ /**
+ * Determines if we should select all the text in the searchbar based on the
+ * searchbar state, and whether the selection is empty.
+ */
+ _maybeSelectAll() {
+ if (
+ !this._preventClickSelectsAll &&
+ document.activeElement == this._textbox &&
+ this._textbox.selectionStart == this._textbox.selectionEnd
+ ) {
+ this.select();
+ }
+ }
+
+ _setupEventListeners() {
+ this.addEventListener("click", event => {
+ this._maybeSelectAll();
+ });
+
+ this.addEventListener(
+ "DOMMouseScroll",
+ event => {
+ if (event.getModifierState("Accel")) {
+ this.selectEngine(event, event.detail > 0);
+ }
+ },
+ true
+ );
+
+ this.addEventListener("input", event => {
+ this.updateGoButtonVisibility();
+ });
+
+ this.addEventListener("drop", event => {
+ this.updateGoButtonVisibility();
+ });
+
+ this.addEventListener(
+ "blur",
+ event => {
+ // Reset the flag since we can't capture enter keyup event if the event happens
+ // after moving the focus.
+ this._needBrowserFocusAtEnterKeyUp = false;
+
+ // If the input field is still focused then a different window has
+ // received focus, ignore the next focus event.
+ this._ignoreFocus = document.activeElement == this._textbox;
+ },
+ true
+ );
+
+ this.addEventListener(
+ "focus",
+ event => {
+ // Speculatively connect to the current engine's search URI (and
+ // suggest URI, if different) to reduce request latency
+ this.currentEngine.speculativeConnect({
+ window,
+ originAttributes: gBrowser.contentPrincipal.originAttributes,
+ });
+
+ if (this._ignoreFocus) {
+ // This window has been re-focused, don't show the suggestions
+ this._ignoreFocus = false;
+ return;
+ }
+
+ // Don't open the suggestions if there is no text in the textbox.
+ if (!this._textbox.value) {
+ return;
+ }
+
+ // Don't open the suggestions if the mouse was used to focus the
+ // textbox, that will be taken care of in the click handler.
+ if (
+ Services.focus.getLastFocusMethod(window) &
+ Services.focus.FLAG_BYMOUSE
+ ) {
+ return;
+ }
+
+ this.openSuggestionsPanel();
+ },
+ true
+ );
+
+ this.addEventListener("mousedown", event => {
+ this._preventClickSelectsAll = this._textbox.focused;
+ // Ignore right clicks
+ if (event.button != 0) {
+ return;
+ }
+
+ // Ignore clicks on the search go button.
+ if (event.originalTarget.classList.contains("search-go-button")) {
+ return;
+ }
+
+ // Ignore clicks on menu items in the input's context menu.
+ if (event.originalTarget.localName == "menuitem") {
+ return;
+ }
+
+ let isIconClick = event.originalTarget.classList.contains(
+ "searchbar-search-button"
+ );
+
+ // Hide popup when icon is clicked while popup is open
+ if (isIconClick && this.textbox.popup.popupOpen) {
+ this.textbox.popup.closePopup();
+ let searchIcon = document.querySelector(".searchbar-search-button");
+ searchIcon.setAttribute("aria-expanded", "false");
+ } else if (isIconClick || this._textbox.value) {
+ // Open the suggestions whenever clicking on the search icon or if there
+ // is text in the textbox.
+ this.openSuggestionsPanel(true);
+ }
+ });
+ }
+
+ _setupTextboxEventListeners() {
+ this.textbox.addEventListener("input", event => {
+ this.textbox.popup.removeAttribute("showonlysettings");
+ });
+
+ this.textbox.addEventListener("dragover", event => {
+ let types = event.dataTransfer.types;
+ if (
+ types.includes("text/plain") ||
+ types.includes("text/x-moz-text-internal")
+ ) {
+ event.preventDefault();
+ }
+ });
+
+ this.textbox.addEventListener("drop", event => {
+ let dataTransfer = event.dataTransfer;
+ let data = dataTransfer.getData("text/plain");
+ if (!data) {
+ data = dataTransfer.getData("text/x-moz-text-internal");
+ }
+ if (data) {
+ event.preventDefault();
+ this.textbox.value = data;
+ this.openSuggestionsPanel();
+ }
+ });
+
+ this.textbox.addEventListener("contextmenu", event => {
+ if (!this._menupopup) {
+ this._buildContextMenu();
+ }
+
+ this._textbox.closePopup();
+
+ // Make sure the context menu isn't opened via keyboard shortcut. Check for text selection
+ // before updating the state of any menu items.
+ if (event.button) {
+ this._maybeSelectAll();
+ }
+
+ // Update disabled state of menu items
+ for (let item of this._menupopup.querySelectorAll("menuitem[cmd]")) {
+ let command = item.getAttribute("cmd");
+ let controller =
+ document.commandDispatcher.getControllerForCommand(command);
+ item.disabled = !controller.isCommandEnabled(command);
+ }
+
+ let pasteEnabled = document.commandDispatcher
+ .getControllerForCommand("cmd_paste")
+ .isCommandEnabled("cmd_paste");
+ this._pasteAndSearchMenuItem.disabled = !pasteEnabled;
+
+ this._menupopup.openPopupAtScreen(event.screenX, event.screenY, true);
+
+ event.preventDefault();
+ });
+ }
+
+ _initTextbox() {
+ if (this.parentNode.parentNode.localName == "toolbarpaletteitem") {
+ return;
+ }
+
+ this.setAttribute("role", "combobox");
+ this.setAttribute("aria-owns", this.textbox.popup.id);
+
+ // This overrides the searchParam property in autocomplete.xml. We're
+ // hijacking this property as a vehicle for delivering the privacy
+ // information about the window into the guts of nsSearchSuggestions.
+ // Note that the setter is the same as the parent. We were not sure whether
+ // we can override just the getter. If that proves to be the case, the setter
+ // can be removed.
+ Object.defineProperty(this.textbox, "searchParam", {
+ get() {
+ return (
+ this.getAttribute("autocompletesearchparam") +
+ (PrivateBrowsingUtils.isWindowPrivate(window) ? "|private" : "")
+ );
+ },
+ set(val) {
+ this.setAttribute("autocompletesearchparam", val);
+ },
+ });
+
+ Object.defineProperty(this.textbox, "selectedButton", {
+ get() {
+ return this.popup.oneOffButtons.selectedButton;
+ },
+ set(val) {
+ this.popup.oneOffButtons.selectedButton = val;
+ },
+ });
+
+ // This is implemented so that when textbox.value is set directly (e.g.,
+ // by tests), the one-off query is updated.
+ this.textbox.onBeforeValueSet = aValue => {
+ if (this.textbox.popup._oneOffButtons) {
+ this.textbox.popup.oneOffButtons.query = aValue;
+ }
+ return aValue;
+ };
+
+ // Returns true if the event is handled by us, false otherwise.
+ this.textbox.onBeforeHandleKeyDown = aEvent => {
+ if (aEvent.getModifierState("Accel")) {
+ if (
+ aEvent.keyCode == KeyEvent.DOM_VK_DOWN ||
+ aEvent.keyCode == KeyEvent.DOM_VK_UP
+ ) {
+ this.selectEngine(aEvent, aEvent.keyCode == KeyEvent.DOM_VK_DOWN);
+ return true;
+ }
+ return false;
+ }
+
+ if (
+ (AppConstants.platform == "macosx" &&
+ aEvent.keyCode == KeyEvent.DOM_VK_F4) ||
+ (aEvent.getModifierState("Alt") &&
+ (aEvent.keyCode == KeyEvent.DOM_VK_DOWN ||
+ aEvent.keyCode == KeyEvent.DOM_VK_UP))
+ ) {
+ if (!this.textbox.openSearch()) {
+ aEvent.preventDefault();
+ aEvent.stopPropagation();
+ return true;
+ }
+ }
+
+ let popup = this.textbox.popup;
+ let searchIcon = document.querySelector(".searchbar-search-button");
+ searchIcon.setAttribute("aria-expanded", popup.popupOpen);
+ if (popup.popupOpen) {
+ let suggestionsHidden =
+ popup.richlistbox.getAttribute("collapsed") == "true";
+ let numItems = suggestionsHidden ? 0 : popup.matchCount;
+ return popup.oneOffButtons.handleKeyDown(aEvent, numItems, true);
+ } else if (aEvent.keyCode == KeyEvent.DOM_VK_ESCAPE) {
+ if (this.textbox.editor.canUndo) {
+ this.textbox.editor.undoAll();
+ } else {
+ this.textbox.select();
+ }
+ return true;
+ }
+ return false;
+ };
+
+ // This method overrides the autocomplete binding's openPopup (essentially
+ // duplicating the logic from the autocomplete popup binding's
+ // openAutocompletePopup method), modifying it so that the popup is aligned with
+ // the inner textbox, but sized to not extend beyond the search bar border.
+ this.textbox.openPopup = () => {
+ // Entering customization mode after the search bar had focus causes
+ // the popup to appear again, due to focus returning after the
+ // hamburger panel closes. Don't open in that spurious event.
+ if (document.documentElement.getAttribute("customizing") == "true") {
+ return;
+ }
+
+ let popup = this.textbox.popup;
+ let searchIcon = document.querySelector(".searchbar-search-button");
+ if (!popup.mPopupOpen) {
+ // Initially the panel used for the searchbar (PopupSearchAutoComplete
+ // in browser.xhtml) is hidden to avoid impacting startup / new
+ // window performance. The base binding's openPopup would normally
+ // call the overriden openAutocompletePopup in
+ // browser-search-autocomplete-result-popup binding to unhide the popup,
+ // but since we're overriding openPopup we need to unhide the panel
+ // ourselves.
+ popup.hidden = false;
+
+ // Don't roll up on mouse click in the anchor for the search UI.
+ if (popup.id == "PopupSearchAutoComplete") {
+ popup.setAttribute("norolluponanchor", "true");
+ }
+
+ popup.mInput = this.textbox;
+ // clear any previous selection, see bugs 400671 and 488357
+ popup.selectedIndex = -1;
+
+ // Ensure the panel has a meaningful initial size and doesn't grow
+ // unconditionally.
+ let { width } = window.windowUtils.getBoundsWithoutFlushing(this);
+ if (popup.oneOffButtons) {
+ // We have a min-width rule on search-panel-one-offs to show at
+ // least 4 buttons, so take that into account here.
+ width = Math.max(width, popup.oneOffButtons.buttonWidth * 4);
+ }
+
+ popup.style.setProperty("--panel-width", width + "px");
+ popup._invalidate();
+ popup.openPopup(this, "after_start");
+ searchIcon.setAttribute("aria-expanded", "true");
+ }
+ };
+
+ this.textbox.openSearch = () => {
+ if (!this.textbox.popupOpen) {
+ this.openSuggestionsPanel();
+ return false;
+ }
+ return true;
+ };
+
+ this.textbox.handleEnter = event => {
+ // Toggle the open state of the add-engine menu button if it's
+ // selected. We're using handleEnter for this instead of listening
+ // for the command event because a command event isn't fired.
+ if (
+ this.textbox.selectedButton &&
+ this.textbox.selectedButton.getAttribute("anonid") ==
+ "addengine-menu-button"
+ ) {
+ this.textbox.selectedButton.open = !this.textbox.selectedButton.open;
+ return true;
+ }
+ // Otherwise, "call super": do what the autocomplete binding's
+ // handleEnter implementation does.
+ return this.textbox.mController.handleEnter(false, event || null);
+ };
+
+ // override |onTextEntered| in autocomplete.xml
+ this.textbox.onTextEntered = event => {
+ this.textbox.editor.clearUndoRedo();
+
+ let engine;
+ let oneOff = this.textbox.selectedButton;
+ if (oneOff) {
+ if (!oneOff.engine) {
+ oneOff.doCommand();
+ return;
+ }
+ engine = oneOff.engine;
+ }
+ if (this.textbox.popupSelectedIndex != -1) {
+ this.telemetrySelectedIndex = this.textbox.popupSelectedIndex;
+ this.textbox.popupSelectedIndex = -1;
+ }
+ this.handleSearchCommand(event, engine);
+ };
+
+ this.textbox.onbeforeinput = event => {
+ if (event.data && this._needBrowserFocusAtEnterKeyUp) {
+ // Ignore char key input while processing enter key.
+ event.preventDefault();
+ }
+ };
+
+ this.textbox.onkeyup = event => {
+ // Pressing Enter key while pressing Meta key, and next, even when
+ // releasing Enter key before releasing Meta key, the keyup event is not
+ // fired. Therefore, if Enter keydown is detecting, continue the post
+ // processing for Enter key when any keyup event is detected.
+ if (this._needBrowserFocusAtEnterKeyUp) {
+ this._needBrowserFocusAtEnterKeyUp = false;
+ gBrowser.selectedBrowser.focus();
+ }
+ };
+ }
+
+ _buildContextMenu() {
+ const raw = `
+ <menuitem data-l10n-id="text-action-undo" cmd="cmd_undo"/>
+ <menuitem data-l10n-id="text-action-redo" cmd="cmd_redo"/>
+ <menuseparator/>
+ <menuitem data-l10n-id="text-action-cut" cmd="cmd_cut"/>
+ <menuitem data-l10n-id="text-action-copy" cmd="cmd_copy"/>
+ <menuitem data-l10n-id="text-action-paste" cmd="cmd_paste"/>
+ <menuitem class="searchbar-paste-and-search"/>
+ <menuitem data-l10n-id="text-action-delete" cmd="cmd_delete"/>
+ <menuitem data-l10n-id="text-action-select-all" cmd="cmd_selectAll"/>
+ <menuseparator/>
+ <menuitem class="searchbar-clear-history"/>
+ `;
+
+ this._menupopup = this.querySelector(".textbox-contextmenu");
+
+ let frag = MozXULElement.parseXULToFragment(raw);
+
+ // Insert attributes that come from localized properties
+ this._pasteAndSearchMenuItem = frag.querySelector(
+ ".searchbar-paste-and-search"
+ );
+ this._pasteAndSearchMenuItem.setAttribute(
+ "label",
+ this._stringBundle.getString("cmd_pasteAndSearch")
+ );
+
+ let clearHistoryItem = frag.querySelector(".searchbar-clear-history");
+ clearHistoryItem.setAttribute(
+ "label",
+ this._stringBundle.getString("cmd_clearHistory")
+ );
+ clearHistoryItem.setAttribute(
+ "accesskey",
+ this._stringBundle.getString("cmd_clearHistory_accesskey")
+ );
+
+ this._menupopup.appendChild(frag);
+
+ this._menupopup.addEventListener("command", event => {
+ switch (event.originalTarget) {
+ case this._pasteAndSearchMenuItem:
+ this.select();
+ goDoCommand("cmd_paste");
+ this.handleSearchCommand(event);
+ break;
+ case clearHistoryItem:
+ let param = this.textbox.getAttribute("autocompletesearchparam");
+ lazy.FormHistory.update({ op: "remove", fieldname: param });
+ this.textbox.value = "";
+ break;
+ default:
+ let cmd = event.originalTarget.getAttribute("cmd");
+ if (cmd) {
+ let controller =
+ document.commandDispatcher.getControllerForCommand(cmd);
+ controller.doCommand(cmd);
+ }
+ break;
+ }
+ });
+ }
+ }
+
+ customElements.define("searchbar", MozSearchbar);
+}