diff options
Diffstat (limited to 'application/basilisk/base/content/contentSearchUI.js')
| -rw-r--r-- | application/basilisk/base/content/contentSearchUI.js | 896 |
1 files changed, 0 insertions, 896 deletions
diff --git a/application/basilisk/base/content/contentSearchUI.js b/application/basilisk/base/content/contentSearchUI.js deleted file mode 100644 index 509532a88..000000000 --- a/application/basilisk/base/content/contentSearchUI.js +++ /dev/null @@ -1,896 +0,0 @@ -/* 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"; - -this.ContentSearchUIController = (function() { - -const MAX_DISPLAYED_SUGGESTIONS = 6; -const SUGGESTION_ID_PREFIX = "searchSuggestion"; -const ONE_OFF_ID_PREFIX = "oneOff"; - -const HTML_NS = "http://www.w3.org/1999/xhtml"; - -/** - * Creates a new object that manages search suggestions and their UI for a text - * box. - * - * The UI consists of an html:table that's inserted into the DOM after the given - * text box and styled so that it appears as a dropdown below the text box. - * - * @param inputElement - * Search suggestions will be based on the text in this text box. - * Assumed to be an html:input. xul:textbox is untested but might work. - * @param tableParent - * The suggestion table is appended as a child to this element. Since - * the table is absolutely positioned and its top and left values are set - * to be relative to the top and left of the page, either the parent and - * all its ancestors should not be positioned elements (i.e., their - * positions should be "static"), or the parent's position should be the - * top left of the page. - * @param healthReportKey - * This will be sent with the search data for FHR to record the search. - * @param searchPurpose - * Sent with search data, see nsISearchEngine.getSubmission. - * @param idPrefix - * The IDs of elements created by the object will be prefixed with this - * string. - */ -function ContentSearchUIController(inputElement, tableParent, healthReportKey, - searchPurpose, idPrefix = "") { - this.input = inputElement; - this._idPrefix = idPrefix; - this._healthReportKey = healthReportKey; - this._searchPurpose = searchPurpose; - - let tableID = idPrefix + "searchSuggestionTable"; - this.input.autocomplete = "off"; - this.input.setAttribute("aria-autocomplete", "true"); - this.input.setAttribute("aria-controls", tableID); - tableParent.appendChild(this._makeTable(tableID)); - - this.input.addEventListener("keypress", this); - this.input.addEventListener("input", this); - this.input.addEventListener("focus", this); - this.input.addEventListener("blur", this); - window.addEventListener("ContentSearchService", this); - - this._stickyInputValue = ""; - this._hideSuggestions(); - - this._getSearchEngines(); - this._getStrings(); -} - -ContentSearchUIController.prototype = { - - _oneOffButtons: [], - // Setting up the one off buttons causes an uninterruptible reflow. If we - // receive the list of engines while the newtab page is loading, this reflow - // may regress performance - so we set this flag and only set up the buttons - // if it's set when the suggestions table is actually opened. - _pendingOneOffRefresh: undefined, - - get defaultEngine() { - return this._defaultEngine; - }, - - set defaultEngine(engine) { - if (this._defaultEngine && this._defaultEngine.icon) { - URL.revokeObjectURL(this._defaultEngine.icon); - } - let icon; - if (engine.iconBuffer) { - icon = this._getFaviconURIFromBuffer(engine.iconBuffer); - } else { - icon = this._getImageURIForCurrentResolution( - "chrome://mozapps/skin/places/defaultFavicon.png"); - } - this._defaultEngine = { - name: engine.name, - icon, - }; - this._updateDefaultEngineHeader(); - - if (engine && document.activeElement == this.input) { - this._speculativeConnect(); - } - }, - - get engines() { - return this._engines; - }, - - set engines(val) { - this._engines = val; - this._pendingOneOffRefresh = true; - }, - - // The selectedIndex is the index of the element with the "selected" class in - // the list obtained by concatenating the suggestion rows, one-off buttons, and - // search settings button. - get selectedIndex() { - let allElts = [...this._suggestionsList.children, - ...this._oneOffButtons, - document.getElementById("contentSearchSettingsButton")]; - for (let i = 0; i < allElts.length; ++i) { - let elt = allElts[i]; - if (elt.classList.contains("selected")) { - return i; - } - } - return -1; - }, - - set selectedIndex(idx) { - // Update the table's rows, and the input when there is a selection. - this._table.removeAttribute("aria-activedescendant"); - this.input.removeAttribute("aria-activedescendant"); - - let allElts = [...this._suggestionsList.children, - ...this._oneOffButtons, - document.getElementById("contentSearchSettingsButton")]; - // If we are selecting a suggestion and a one-off is selected, don't deselect it. - let excludeIndex = idx < this.numSuggestions && this.selectedButtonIndex > -1 ? - this.numSuggestions + this.selectedButtonIndex : -1; - for (let i = 0; i < allElts.length; ++i) { - let elt = allElts[i]; - let ariaSelectedElt = i < this.numSuggestions ? elt.firstChild : elt; - if (i == idx) { - elt.classList.add("selected"); - ariaSelectedElt.setAttribute("aria-selected", "true"); - this.input.setAttribute("aria-activedescendant", ariaSelectedElt.id); - } else if (i != excludeIndex) { - elt.classList.remove("selected"); - ariaSelectedElt.setAttribute("aria-selected", "false"); - } - } - }, - - get selectedButtonIndex() { - let elts = [...this._oneOffButtons, - document.getElementById("contentSearchSettingsButton")]; - for (let i = 0; i < elts.length; ++i) { - if (elts[i].classList.contains("selected")) { - return i; - } - } - return -1; - }, - - set selectedButtonIndex(idx) { - let elts = [...this._oneOffButtons, - document.getElementById("contentSearchSettingsButton")]; - for (let i = 0; i < elts.length; ++i) { - let elt = elts[i]; - if (i == idx) { - elt.classList.add("selected"); - elt.setAttribute("aria-selected", "true"); - } else { - elt.classList.remove("selected"); - elt.setAttribute("aria-selected", "false"); - } - } - }, - - get selectedEngineName() { - let selectedElt = this._oneOffsTable.querySelector(".selected"); - if (selectedElt) { - return selectedElt.engineName; - } - return this.defaultEngine.name; - }, - - get numSuggestions() { - return this._suggestionsList.children.length; - }, - - selectAndUpdateInput(idx) { - this.selectedIndex = idx; - let newValue = this.suggestionAtIndex(idx) || this._stickyInputValue; - // Setting the input value when the value has not changed commits the current - // IME composition, which we don't want to do. - if (this.input.value != newValue) { - this.input.value = newValue; - } - this._updateSearchWithHeader(); - }, - - suggestionAtIndex(idx) { - let row = this._suggestionsList.children[idx]; - return row ? row.textContent : null; - }, - - deleteSuggestionAtIndex(idx) { - // Only form history suggestions can be deleted. - if (this.isFormHistorySuggestionAtIndex(idx)) { - let suggestionStr = this.suggestionAtIndex(idx); - this._sendMsg("RemoveFormHistoryEntry", suggestionStr); - this._suggestionsList.children[idx].remove(); - this.selectAndUpdateInput(-1); - } - }, - - isFormHistorySuggestionAtIndex(idx) { - let row = this._suggestionsList.children[idx]; - return row && row.classList.contains("formHistory"); - }, - - addInputValueToFormHistory() { - this._sendMsg("AddFormHistoryEntry", this.input.value); - }, - - handleEvent(event) { - this["_on" + event.type[0].toUpperCase() + event.type.substr(1)](event); - }, - - _onCommand(aEvent) { - if (this.selectedButtonIndex == this._oneOffButtons.length) { - // Settings button was selected. - this._sendMsg("ManageEngines"); - return; - } - - this.search(aEvent); - - if (aEvent) { - aEvent.preventDefault(); - } - }, - - search(aEvent) { - if (!this.defaultEngine) { - return; // Not initialized yet. - } - - let searchText = this.input; - let searchTerms; - if (this._table.hidden || - aEvent.originalTarget.id == "contentSearchDefaultEngineHeader" || - aEvent instanceof KeyboardEvent) { - searchTerms = searchText.value; - } else { - searchTerms = this.suggestionAtIndex(this.selectedIndex) || searchText.value; - } - // Send an event that will perform a search and Firefox Health Report will - // record that a search from the healthReportKey passed to the constructor. - let eventData = { - engineName: this.selectedEngineName, - searchString: searchTerms, - healthReportKey: this._healthReportKey, - searchPurpose: this._searchPurpose, - originalEvent: { - shiftKey: aEvent.shiftKey, - ctrlKey: aEvent.ctrlKey, - metaKey: aEvent.metaKey, - altKey: aEvent.altKey, - }, - }; - if ("button" in aEvent) { - eventData.originalEvent.button = aEvent.button; - } - - if (this.suggestionAtIndex(this.selectedIndex)) { - eventData.selection = { - index: this.selectedIndex, - kind: undefined, - }; - if (aEvent instanceof MouseEvent) { - eventData.selection.kind = "mouse"; - } else if (aEvent instanceof KeyboardEvent) { - eventData.selection.kind = "key"; - } - } - - this._sendMsg("Search", eventData); - this.addInputValueToFormHistory(); - }, - - _onInput() { - if (!this.input.value) { - this._stickyInputValue = ""; - this._hideSuggestions(); - } else if (this.input.value != this._stickyInputValue) { - // Only fetch new suggestions if the input value has changed. - this._getSuggestions(); - this.selectAndUpdateInput(-1); - } - this._updateSearchWithHeader(); - }, - - _onKeypress(event) { - let selectedIndexDelta = 0; - let selectedSuggestionDelta = 0; - let selectedOneOffDelta = 0; - - switch (event.keyCode) { - case event.DOM_VK_UP: - if (this._table.hidden) { - return; - } - if (event.getModifierState("Accel")) { - if (event.shiftKey) { - selectedSuggestionDelta = -1; - break; - } - this._cycleCurrentEngine(true); - break; - } - if (event.altKey) { - selectedOneOffDelta = -1; - break; - } - selectedIndexDelta = -1; - break; - case event.DOM_VK_DOWN: - if (this._table.hidden) { - this._getSuggestions(); - return; - } - if (event.getModifierState("Accel")) { - if (event.shiftKey) { - selectedSuggestionDelta = 1; - break; - } - this._cycleCurrentEngine(false); - break; - } - if (event.altKey) { - selectedOneOffDelta = 1; - break; - } - selectedIndexDelta = 1; - break; - case event.DOM_VK_TAB: - if (this._table.hidden) { - return; - } - // Shift+tab when either the first or no one-off is selected, as well as - // tab when the settings button is selected, should change focus as normal. - if ((this.selectedButtonIndex <= 0 && event.shiftKey) || - this.selectedButtonIndex == this._oneOffButtons.length && !event.shiftKey) { - return; - } - selectedOneOffDelta = event.shiftKey ? -1 : 1; - break; - case event.DOM_VK_RIGHT: - // Allow normal caret movement until the caret is at the end of the input. - if (this.input.selectionStart != this.input.selectionEnd || - this.input.selectionEnd != this.input.value.length) { - return; - } - if (this.numSuggestions && this.selectedIndex >= 0 && - this.selectedIndex < this.numSuggestions) { - this.input.value = this.suggestionAtIndex(this.selectedIndex); - this.input.setAttribute("selection-index", this.selectedIndex); - this.input.setAttribute("selection-kind", "key"); - } else { - // If we didn't select anything, make sure to remove the attributes - // in case they were populated last time. - this.input.removeAttribute("selection-index"); - this.input.removeAttribute("selection-kind"); - } - this._stickyInputValue = this.input.value; - this._hideSuggestions(); - return; - case event.DOM_VK_RETURN: - this._onCommand(event); - return; - case event.DOM_VK_DELETE: - if (this.selectedIndex >= 0) { - this.deleteSuggestionAtIndex(this.selectedIndex); - } - return; - case event.DOM_VK_ESCAPE: - if (!this._table.hidden) { - this._hideSuggestions(); - } - return; - default: - return; - } - - let currentIndex = this.selectedIndex; - if (selectedIndexDelta) { - let newSelectedIndex = currentIndex + selectedIndexDelta; - if (newSelectedIndex < -1) { - newSelectedIndex = this.numSuggestions + this._oneOffButtons.length; - } - // If are moving up from the first one off, we have to deselect the one off - // manually because the selectedIndex setter tries to exclude the selected - // one-off (which is desirable for accel+shift+up/down). - if (currentIndex == this.numSuggestions && selectedIndexDelta == -1) { - this.selectedButtonIndex = -1; - } - this.selectAndUpdateInput(newSelectedIndex); - } else if (selectedSuggestionDelta) { - let newSelectedIndex; - if (currentIndex >= this.numSuggestions || currentIndex == -1) { - // No suggestion already selected, select the first/last one appropriately. - newSelectedIndex = selectedSuggestionDelta == 1 ? - 0 : this.numSuggestions - 1; - } else { - newSelectedIndex = currentIndex + selectedSuggestionDelta; - } - if (newSelectedIndex >= this.numSuggestions) { - newSelectedIndex = -1; - } - this.selectAndUpdateInput(newSelectedIndex); - } else if (selectedOneOffDelta) { - let newSelectedIndex; - let currentButton = this.selectedButtonIndex; - if (currentButton == -1 || currentButton == this._oneOffButtons.length) { - // No one-off already selected, select the first/last one appropriately. - newSelectedIndex = selectedOneOffDelta == 1 ? - 0 : this._oneOffButtons.length - 1; - } else { - newSelectedIndex = currentButton + selectedOneOffDelta; - } - // Allow selection of the settings button via the tab key. - if (newSelectedIndex == this._oneOffButtons.length && - event.keyCode != event.DOM_VK_TAB) { - newSelectedIndex = -1; - } - this.selectedButtonIndex = newSelectedIndex; - } - - // Prevent the input's caret from moving. - event.preventDefault(); - }, - - _currentEngineIndex: -1, - _cycleCurrentEngine(aReverse) { - if ((this._currentEngineIndex == this._engines.length - 1 && !aReverse) || - (this._currentEngineIndex == 0 && aReverse)) { - return; - } - this._currentEngineIndex += aReverse ? -1 : 1; - let engineName = this._engines[this._currentEngineIndex].name; - this._sendMsg("SetCurrentEngine", engineName); - }, - - _onFocus() { - if (this._mousedown) { - return; - } - // When the input box loses focus to something in our table, we refocus it - // immediately. This causes the focus highlight to flicker, so we set a - // custom attribute which consumers should use for focus highlighting. This - // attribute is removed only when we do not immediately refocus the input - // box, thus eliminating flicker. - this.input.setAttribute("keepfocus", "true"); - this._speculativeConnect(); - }, - - _onBlur() { - if (this._mousedown) { - // At this point, this.input has lost focus, but a new element has not yet - // received it. If we re-focus this.input directly, the new element will - // steal focus immediately, so we queue it instead. - setTimeout(() => this.input.focus(), 0); - return; - } - this.input.removeAttribute("keepfocus"); - this._hideSuggestions(); - }, - - _onMousemove(event) { - let idx = this._indexOfTableItem(event.target); - if (idx >= this.numSuggestions) { - this.selectedButtonIndex = idx - this.numSuggestions; - return; - } - this.selectedIndex = idx; - }, - - _onMouseup(event) { - if (event.button == 2) { - return; - } - this._onCommand(event); - }, - - _onMouseout(event) { - // We only deselect one-off buttons and the settings button when they are - // moused out. - let idx = this._indexOfTableItem(event.originalTarget); - if (idx >= this.numSuggestions) { - this.selectedButtonIndex = -1; - } - }, - - _onClick(event) { - this._onMouseup(event); - }, - - _onContentSearchService(event) { - let methodName = "_onMsg" + event.detail.type; - if (methodName in this) { - this[methodName](event.detail.data); - } - }, - - _onMsgFocusInput(event) { - this.input.focus(); - }, - - _onMsgSuggestions(suggestions) { - // Ignore the suggestions if their search string or engine doesn't match - // ours. Due to the async nature of message passing, this can easily happen - // when the user types quickly. - if (this._stickyInputValue != suggestions.searchString || - this.defaultEngine.name != suggestions.engineName) { - return; - } - - this._clearSuggestionRows(); - - // Position and size the table. - let { left } = this.input.getBoundingClientRect(); - this._table.style.top = this.input.offsetHeight + "px"; - this._table.style.minWidth = this.input.offsetWidth + "px"; - this._table.style.maxWidth = (window.innerWidth - left - 40) + "px"; - - // Add the suggestions to the table. - let searchWords = - new Set(suggestions.searchString.trim().toLowerCase().split(/\s+/)); - for (let i = 0; i < MAX_DISPLAYED_SUGGESTIONS; i++) { - let type, idx; - if (i < suggestions.formHistory.length) { - [type, idx] = ["formHistory", i]; - } else { - let j = i - suggestions.formHistory.length; - if (j < suggestions.remote.length) { - [type, idx] = ["remote", j]; - } else { - break; - } - } - this._suggestionsList.appendChild( - this._makeTableRow(type, suggestions[type][idx], i, searchWords)); - } - - if (this._table.hidden) { - this.selectedIndex = -1; - if (this._pendingOneOffRefresh) { - this._setUpOneOffButtons(); - delete this._pendingOneOffRefresh; - } - this._currentEngineIndex = - this._engines.findIndex(aEngine => aEngine.name == this.defaultEngine.name); - this._table.hidden = false; - this.input.setAttribute("aria-expanded", "true"); - this._originalDefaultEngine = { - name: this.defaultEngine.name, - icon: this.defaultEngine.icon, - }; - } - }, - - _onMsgSuggestionsCancelled() { - if (!this._table.hidden) { - this._hideSuggestions(); - } - }, - - _onMsgState(state) { - this.engines = state.engines; - // No point updating the default engine (and the header) if there's no change. - if (this.defaultEngine && - this.defaultEngine.name == state.currentEngine.name && - this.defaultEngine.icon == state.currentEngine.icon) { - return; - } - this.defaultEngine = state.currentEngine; - }, - - _onMsgCurrentState(state) { - this._onMsgState(state); - }, - - _onMsgCurrentEngine(engine) { - this.defaultEngine = engine; - this._pendingOneOffRefresh = true; - }, - - _onMsgStrings(strings) { - this._strings = strings; - this._updateDefaultEngineHeader(); - this._updateSearchWithHeader(); - document.getElementById("contentSearchSettingsButton").textContent = - this._strings.searchSettings; - this.input.setAttribute("placeholder", this._strings.searchPlaceholder); - }, - - _updateDefaultEngineHeader() { - let header = document.getElementById("contentSearchDefaultEngineHeader"); - header.firstChild.setAttribute("src", this.defaultEngine.icon); - if (!this._strings) { - return; - } - while (header.firstChild.nextSibling) { - header.firstChild.nextSibling.remove(); - } - header.appendChild(document.createTextNode( - this._strings.searchHeader.replace("%S", this.defaultEngine.name))); - }, - - _updateSearchWithHeader() { - if (!this._strings) { - return; - } - let searchWithHeader = document.getElementById("contentSearchSearchWithHeader"); - if (this.input.value) { - searchWithHeader.innerHTML = this._strings.searchForSomethingWith; - searchWithHeader.querySelector(".contentSearchSearchWithHeaderSearchText").textContent = this.input.value; - } else { - searchWithHeader.textContent = this._strings.searchWithHeader; - } - }, - - _speculativeConnect() { - if (this.defaultEngine) { - this._sendMsg("SpeculativeConnect", this.defaultEngine.name); - } - }, - - _makeTableRow(type, suggestionStr, currentRow, searchWords) { - let row = document.createElementNS(HTML_NS, "tr"); - row.dir = "auto"; - row.classList.add("contentSearchSuggestionRow"); - row.classList.add(type); - row.setAttribute("role", "presentation"); - row.addEventListener("mousemove", this); - row.addEventListener("mouseup", this); - - let entry = document.createElementNS(HTML_NS, "td"); - let img = document.createElementNS(HTML_NS, "div"); - img.setAttribute("class", "historyIcon"); - entry.appendChild(img); - entry.classList.add("contentSearchSuggestionEntry"); - entry.setAttribute("role", "option"); - entry.id = this._idPrefix + SUGGESTION_ID_PREFIX + currentRow; - entry.setAttribute("aria-selected", "false"); - - let suggestionWords = suggestionStr.trim().toLowerCase().split(/\s+/); - for (let i = 0; i < suggestionWords.length; i++) { - let word = suggestionWords[i]; - let wordSpan = document.createElementNS(HTML_NS, "span"); - if (searchWords.has(word)) { - wordSpan.classList.add("typed"); - } - wordSpan.textContent = word; - entry.appendChild(wordSpan); - if (i < suggestionWords.length - 1) { - entry.appendChild(document.createTextNode(" ")); - } - } - - row.appendChild(entry); - return row; - }, - - // Converts favicon array buffer into a data URI. - _getFaviconURIFromBuffer(buffer) { - let blob = new Blob([buffer]); - return URL.createObjectURL(blob); - }, - - // Adds "@2x" to the name of the given PNG url for "retina" screens. - _getImageURIForCurrentResolution(uri) { - if (window.devicePixelRatio > 1) { - return uri.replace(/\.png$/, "@2x.png"); - } - return uri; - }, - - _getSearchEngines() { - this._sendMsg("GetState"); - }, - - _getStrings() { - this._sendMsg("GetStrings"); - }, - - _getSuggestions() { - this._stickyInputValue = this.input.value; - if (this.defaultEngine) { - this._sendMsg("GetSuggestions", { - engineName: this.defaultEngine.name, - searchString: this.input.value, - }); - } - }, - - _clearSuggestionRows() { - while (this._suggestionsList.firstElementChild) { - this._suggestionsList.firstElementChild.remove(); - } - }, - - _hideSuggestions() { - this.input.setAttribute("aria-expanded", "false"); - this.selectedIndex = -1; - this.selectedButtonIndex = -1; - this._currentEngineIndex = -1; - this._table.hidden = true; - }, - - _indexOfTableItem(elt) { - if (elt.classList.contains("contentSearchOneOffItem")) { - return this.numSuggestions + this._oneOffButtons.indexOf(elt); - } - if (elt.classList.contains("contentSearchSettingsButton")) { - return this.numSuggestions + this._oneOffButtons.length; - } - while (elt && elt.localName != "tr") { - elt = elt.parentNode; - } - if (!elt) { - throw new Error("Element is not a row"); - } - return elt.rowIndex; - }, - - _makeTable(id) { - this._table = document.createElementNS(HTML_NS, "table"); - this._table.id = id; - this._table.hidden = true; - this._table.classList.add("contentSearchSuggestionTable"); - this._table.setAttribute("role", "presentation"); - - // When the search input box loses focus, we want to immediately give focus - // back to it if the blur was because the user clicked somewhere in the table. - // onBlur uses the _mousedown flag to detect this. - this._table.addEventListener("mousedown", () => { this._mousedown = true; }); - document.addEventListener("mouseup", () => { delete this._mousedown; }); - - // Deselect the selected element on mouseout if it wasn't a suggestion. - this._table.addEventListener("mouseout", this); - - // If a search is loaded in the same tab, ensure the suggestions dropdown - // is hidden immediately when the page starts loading and not when it first - // appears, in order to provide timely feedback to the user. - window.addEventListener("beforeunload", () => { this._hideSuggestions(); }); - - let headerRow = document.createElementNS(HTML_NS, "tr"); - let header = document.createElementNS(HTML_NS, "td"); - headerRow.setAttribute("class", "contentSearchHeaderRow"); - header.setAttribute("class", "contentSearchHeader"); - let iconImg = document.createElementNS(HTML_NS, "img"); - header.appendChild(iconImg); - header.id = "contentSearchDefaultEngineHeader"; - headerRow.appendChild(header); - headerRow.addEventListener("click", this); - this._table.appendChild(headerRow); - - let row = document.createElementNS(HTML_NS, "tr"); - row.setAttribute("class", "contentSearchSuggestionsContainer"); - let cell = document.createElementNS(HTML_NS, "td"); - cell.setAttribute("class", "contentSearchSuggestionsContainer"); - this._suggestionsList = document.createElementNS(HTML_NS, "table"); - this._suggestionsList.setAttribute("class", "contentSearchSuggestionsList"); - cell.appendChild(this._suggestionsList); - row.appendChild(cell); - this._table.appendChild(row); - this._suggestionsList.setAttribute("role", "listbox"); - - this._oneOffsTable = document.createElementNS(HTML_NS, "table"); - this._oneOffsTable.setAttribute("class", "contentSearchOneOffsTable"); - this._oneOffsTable.classList.add("contentSearchSuggestionsContainer"); - this._oneOffsTable.setAttribute("role", "group"); - this._table.appendChild(this._oneOffsTable); - - headerRow = document.createElementNS(HTML_NS, "tr"); - header = document.createElementNS(HTML_NS, "td"); - headerRow.setAttribute("class", "contentSearchHeaderRow"); - header.setAttribute("class", "contentSearchHeader"); - headerRow.appendChild(header); - header.id = "contentSearchSearchWithHeader"; - this._oneOffsTable.appendChild(headerRow); - - let button = document.createElementNS(HTML_NS, "button"); - button.setAttribute("class", "contentSearchSettingsButton"); - button.classList.add("contentSearchHeaderRow"); - button.classList.add("contentSearchHeader"); - button.id = "contentSearchSettingsButton"; - button.addEventListener("click", this); - button.addEventListener("mousemove", this); - this._table.appendChild(button); - - return this._table; - }, - - _setUpOneOffButtons() { - // Sometimes we receive a CurrentEngine message from the ContentSearch service - // before we've received a State message - i.e. before we have our engines. - if (!this._engines) { - return; - } - - while (this._oneOffsTable.firstChild.nextSibling) { - this._oneOffsTable.firstChild.nextSibling.remove(); - } - - this._oneOffButtons = []; - - let engines = this._engines.filter(aEngine => aEngine.name != this.defaultEngine.name) - .filter(aEngine => !aEngine.hidden); - if (!engines.length) { - this._oneOffsTable.hidden = true; - return; - } - - const kDefaultButtonWidth = 49; // 48px + 1px border. - let rowWidth = this.input.offsetWidth - 2; // 2px border. - let enginesPerRow = Math.floor(rowWidth / kDefaultButtonWidth); - let buttonWidth = Math.floor(rowWidth / enginesPerRow); - - let row = document.createElementNS(HTML_NS, "tr"); - let cell = document.createElementNS(HTML_NS, "td"); - row.setAttribute("class", "contentSearchSuggestionsContainer"); - cell.setAttribute("class", "contentSearchSuggestionsContainer"); - - for (let i = 0; i < engines.length; ++i) { - let engine = engines[i]; - if (i > 0 && i % enginesPerRow == 0) { - row.appendChild(cell); - this._oneOffsTable.appendChild(row); - row = document.createElementNS(HTML_NS, "tr"); - cell = document.createElementNS(HTML_NS, "td"); - row.setAttribute("class", "contentSearchSuggestionsContainer"); - cell.setAttribute("class", "contentSearchSuggestionsContainer"); - } - let button = document.createElementNS(HTML_NS, "button"); - button.setAttribute("class", "contentSearchOneOffItem"); - let img = document.createElementNS(HTML_NS, "img"); - let uri; - if (engine.iconBuffer) { - uri = this._getFaviconURIFromBuffer(engine.iconBuffer); - } else { - uri = this._getImageURIForCurrentResolution( - "chrome://browser/skin/search-engine-placeholder.png"); - } - img.setAttribute("src", uri); - img.addEventListener("load", function imgLoad() { - img.removeEventListener("load", imgLoad); - URL.revokeObjectURL(uri); - }); - button.appendChild(img); - button.style.width = buttonWidth + "px"; - button.setAttribute("title", engine.name); - - button.engineName = engine.name; - button.addEventListener("click", this); - button.addEventListener("mousemove", this); - - if (engines.length - i <= enginesPerRow - (i % enginesPerRow)) { - button.classList.add("last-row"); - } - - if ((i + 1) % enginesPerRow == 0) { - button.classList.add("end-of-row"); - } - - button.id = ONE_OFF_ID_PREFIX + i; - cell.appendChild(button); - this._oneOffButtons.push(button); - } - row.appendChild(cell); - this._oneOffsTable.appendChild(row); - this._oneOffsTable.hidden = false; - }, - - _sendMsg(type, data = null) { - dispatchEvent(new CustomEvent("ContentSearchClient", { - detail: { - type, - data, - }, - })); - }, -}; - -return ContentSearchUIController; -})(); |