diff options
Diffstat (limited to 'browser/components/touchbar/MacTouchBar.sys.mjs')
| -rw-r--r-- | browser/components/touchbar/MacTouchBar.sys.mjs | 671 |
1 files changed, 671 insertions, 0 deletions
diff --git a/browser/components/touchbar/MacTouchBar.sys.mjs b/browser/components/touchbar/MacTouchBar.sys.mjs new file mode 100644 index 0000000000..5b598efc00 --- /dev/null +++ b/browser/components/touchbar/MacTouchBar.sys.mjs @@ -0,0 +1,671 @@ +/* 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 { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs"; + +const lazy = {}; + +ChromeUtils.defineESModuleGetters(lazy, { + BrowserWindowTracker: "resource:///modules/BrowserWindowTracker.sys.mjs", + UrlbarTokenizer: "resource:///modules/UrlbarTokenizer.sys.mjs", +}); + +XPCOMUtils.defineLazyServiceGetter( + lazy, + "touchBarUpdater", + "@mozilla.org/widget/touchbarupdater;1", + "nsITouchBarUpdater" +); + +// For accessing TouchBarHelper methods from static contexts in this file. +XPCOMUtils.defineLazyServiceGetter( + lazy, + "touchBarHelper", + "@mozilla.org/widget/touchbarhelper;1", + "nsITouchBarHelper" +); + +/** + * Executes a XUL command on the top window. Called by the callbacks in each + * TouchBarInput. + * + * @param {string} commandName + * A XUL command. + */ +function execCommand(commandName) { + if (!TouchBarHelper.window) { + return; + } + let command = TouchBarHelper.window.document.getElementById(commandName); + if (command) { + command.doCommand(); + } +} + +/** + * Static helper function to convert a hexadecimal string to its integer + * value. Used to convert colours to a format accepted by Apple's NSColor code. + * + * @param {string} hexString + * A hexadecimal string, optionally beginning with '#'. + */ +function hexToInt(hexString) { + if (!hexString) { + return null; + } + if (hexString.charAt(0) == "#") { + hexString = hexString.slice(1); + } + let val = parseInt(hexString, 16); + return isNaN(val) ? null : val; +} + +const kInputTypes = { + BUTTON: "button", + LABEL: "label", + MAIN_BUTTON: "mainButton", + POPOVER: "popover", + SCROLLVIEW: "scrollView", + SCRUBBER: "scrubber", +}; + +/** + * An object containing all implemented TouchBarInput objects. + */ +var gBuiltInInputs = { + Back: { + title: "back", + image: "chrome://browser/skin/back.svg", + type: kInputTypes.BUTTON, + callback: () => { + lazy.touchBarHelper.unfocusUrlbar(); + execCommand("Browser:Back"); + }, + }, + Forward: { + title: "forward", + image: "chrome://browser/skin/forward.svg", + type: kInputTypes.BUTTON, + callback: () => { + lazy.touchBarHelper.unfocusUrlbar(); + execCommand("Browser:Forward"); + }, + }, + Reload: { + title: "reload", + image: "chrome://global/skin/icons/reload.svg", + type: kInputTypes.BUTTON, + callback: () => { + lazy.touchBarHelper.unfocusUrlbar(); + execCommand("Browser:Reload"); + }, + }, + Home: { + title: "home", + image: "chrome://browser/skin/home.svg", + type: kInputTypes.BUTTON, + callback: () => { + let win = lazy.BrowserWindowTracker.getTopWindow(); + win.BrowserHome(); + }, + }, + Fullscreen: { + title: "fullscreen", + image: "chrome://browser/skin/fullscreen.svg", + type: kInputTypes.BUTTON, + callback: () => execCommand("View:FullScreen"), + }, + Find: { + title: "find", + image: "chrome://global/skin/icons/search-glass.svg", + type: kInputTypes.BUTTON, + callback: () => execCommand("cmd_find"), + }, + NewTab: { + title: "new-tab", + image: "chrome://global/skin/icons/plus.svg", + type: kInputTypes.BUTTON, + callback: () => execCommand("cmd_newNavigatorTabNoEvent"), + }, + Sidebar: { + title: "open-sidebar", + image: "chrome://browser/skin/sidebars.svg", + type: kInputTypes.BUTTON, + callback: () => { + let win = lazy.BrowserWindowTracker.getTopWindow(); + win.SidebarUI.toggle(); + }, + }, + AddBookmark: { + title: "add-bookmark", + image: "chrome://browser/skin/bookmark-hollow.svg", + type: kInputTypes.BUTTON, + callback: () => execCommand("Browser:AddBookmarkAs"), + }, + ReaderView: { + title: "reader-view", + image: "chrome://browser/skin/reader-mode.svg", + type: kInputTypes.BUTTON, + callback: () => execCommand("View:ReaderView"), + disabled: true, // Updated when the page is found to be Reader View-able. + }, + OpenLocation: { + key: "open-location", + title: "open-location", + image: "chrome://global/skin/icons/search-glass.svg", + type: kInputTypes.MAIN_BUTTON, + callback: () => lazy.touchBarHelper.toggleFocusUrlbar(), + }, + // This is a special-case `type: kInputTypes.SCRUBBER` element. + // Scrubbers are not yet generally implemented. + // See follow-up bug 1502539. + Share: { + title: "share", + image: "chrome://browser/skin/share.svg", + type: kInputTypes.SCRUBBER, + callback: () => execCommand("cmd_share"), + }, + SearchPopover: { + title: "search-popover", + image: "chrome://global/skin/icons/search-glass.svg", + type: kInputTypes.POPOVER, + children: { + SearchScrollViewLabel: { + title: "search-search-in", + type: kInputTypes.LABEL, + }, + SearchScrollView: { + key: "search-scrollview", + type: kInputTypes.SCROLLVIEW, + children: { + Bookmarks: { + title: "search-bookmarks", + type: kInputTypes.BUTTON, + callback: () => + lazy.touchBarHelper.insertRestrictionInUrlbar( + lazy.UrlbarTokenizer.RESTRICT.BOOKMARK + ), + }, + OpenTabs: { + title: "search-opentabs", + type: kInputTypes.BUTTON, + callback: () => + lazy.touchBarHelper.insertRestrictionInUrlbar( + lazy.UrlbarTokenizer.RESTRICT.OPENPAGE + ), + }, + History: { + title: "search-history", + type: kInputTypes.BUTTON, + callback: () => + lazy.touchBarHelper.insertRestrictionInUrlbar( + lazy.UrlbarTokenizer.RESTRICT.HISTORY + ), + }, + Tags: { + title: "search-tags", + type: kInputTypes.BUTTON, + callback: () => + lazy.touchBarHelper.insertRestrictionInUrlbar( + lazy.UrlbarTokenizer.RESTRICT.TAG + ), + }, + }, + }, + }, + }, +}; + +// We create a new flat object to cache strings. Since gBuiltInInputs is a +// tree, caching/retrieval of localized strings would otherwise require tree +// traversal. +var localizedStrings = {}; + +const kHelperObservers = new Set([ + "bookmark-icon-updated", + "fullscreen-painted", + "reader-mode-available", + "touchbar-location-change", + "quit-application", + "intl:app-locales-changed", + "urlbar-focus", + "urlbar-blur", +]); + +/** + * JS-implemented TouchBarHelper class. + * Provides services to the Mac Touch Bar. + */ +export class TouchBarHelper { + constructor() { + for (let topic of kHelperObservers) { + Services.obs.addObserver(this, topic); + } + // We cache our search popover since otherwise it is frequently + // created/destroyed for the urlbar-focus/blur events. + this._searchPopover = this.getTouchBarInput("SearchPopover"); + + this._inputsNotUpdated = new Set(); + } + + destructor() { + this._searchPopover = null; + for (let topic of kHelperObservers) { + Services.obs.removeObserver(this, topic); + } + } + + get activeTitle() { + if (!TouchBarHelper.window) { + return ""; + } + let tabbrowser = TouchBarHelper.window.ownerGlobal.gBrowser; + let activeTitle; + if (tabbrowser) { + activeTitle = tabbrowser.selectedBrowser.contentTitle; + } + return activeTitle; + } + + get allItems() { + let layoutItems = Cc["@mozilla.org/array;1"].createInstance( + Ci.nsIMutableArray + ); + + let window = TouchBarHelper.window; + if ( + !window || + !window.isChromeWindow || + window.document.documentElement.getAttribute("windowtype") != + "navigator:browser" + ) { + return layoutItems; + } + + // Every input must be updated at least once so that all assets (titles, + // icons) are loaded. We keep track of which inputs haven't updated and + // run an update on them ASAP. + this._inputsNotUpdated.clear(); + + for (let inputName of Object.keys(gBuiltInInputs)) { + let input = this.getTouchBarInput(inputName); + if (!input) { + continue; + } + this._inputsNotUpdated.add(inputName); + layoutItems.appendElement(input); + } + + return layoutItems; + } + + static get window() { + return lazy.BrowserWindowTracker.getTopWindow(); + } + + get document() { + if (!TouchBarHelper.window) { + return null; + } + return TouchBarHelper.window.document; + } + + get isUrlbarFocused() { + if (!TouchBarHelper.window || !TouchBarHelper.window.gURLBar) { + return false; + } + return TouchBarHelper.window.gURLBar.focused; + } + + toggleFocusUrlbar() { + if (this.isUrlbarFocused) { + this.unfocusUrlbar(); + } else { + execCommand("Browser:OpenLocation"); + } + } + + unfocusUrlbar() { + if (!this.isUrlbarFocused) { + return; + } + TouchBarHelper.window.gURLBar.blur(); + } + + static get baseWindow() { + return TouchBarHelper.window + ? TouchBarHelper.window.docShell.treeOwner.QueryInterface( + Ci.nsIBaseWindow + ) + : null; + } + + getTouchBarInput(inputName) { + if (inputName == "SearchPopover" && this._searchPopover) { + return this._searchPopover; + } + + if (!inputName || !gBuiltInInputs.hasOwnProperty(inputName)) { + return null; + } + + let inputData = gBuiltInInputs[inputName]; + + let item = new TouchBarInput(inputData); + + // Skip localization if there is already a cached localized title or if + // no title is needed. + if ( + !inputData.hasOwnProperty("title") || + localizedStrings[inputData.title] + ) { + return item; + } + + // Async l10n fills in the localized input labels after the initial load. + this._l10n.formatValue(inputData.title).then(result => { + item.title = result; + localizedStrings[inputData.title] = result; // Cache result. + // Checking TouchBarHelper.window since this callback can fire after all windows are closed. + if (TouchBarHelper.window) { + if (this._inputsNotUpdated) { + this._inputsNotUpdated.delete(inputName); + } + lazy.touchBarUpdater.updateTouchBarInputs(TouchBarHelper.baseWindow, [ + item, + ]); + } + }); + + return item; + } + + /** + * Fetches a specific Touch Bar Input by name and updates it on the Touch Bar. + * + * @param {...*} inputNames + * A key/keys to a value/values in the gBuiltInInputs object in this file. + */ + _updateTouchBarInputs(...inputNames) { + if (!TouchBarHelper.window || !inputNames.length) { + return; + } + + let inputs = []; + for (let inputName of new Set([...inputNames, ...this._inputsNotUpdated])) { + let input = this.getTouchBarInput(inputName); + if (!input) { + continue; + } + + this._inputsNotUpdated.delete(inputName); + inputs.push(input); + } + + lazy.touchBarUpdater.updateTouchBarInputs( + TouchBarHelper.baseWindow, + inputs + ); + } + + /** + * Inserts a restriction token into the Urlbar ahead of the current typed + * search term. + * + * @param {string} restrictionToken + * The restriction token to be inserted into the Urlbar. Preferably + * sourced from UrlbarTokenizer.RESTRICT. + */ + insertRestrictionInUrlbar(restrictionToken) { + if (!TouchBarHelper.window) { + return; + } + let searchString = ""; + if ( + TouchBarHelper.window.gURLBar.getAttribute("pageproxystate") != "valid" + ) { + searchString = TouchBarHelper.window.gURLBar.lastSearchString.trimStart(); + if ( + Object.values(lazy.UrlbarTokenizer.RESTRICT).includes(searchString[0]) + ) { + searchString = searchString.substring(1).trimStart(); + } + } + + TouchBarHelper.window.gURLBar.search( + `${restrictionToken} ${searchString}`, + { searchModeEntry: "touchbar" } + ); + } + + observe(subject, topic, data) { + switch (topic) { + case "touchbar-location-change": + let updatedInputs = ["Back", "Forward"]; + gBuiltInInputs.Back.disabled = + !TouchBarHelper.window.gBrowser.canGoBack; + gBuiltInInputs.Forward.disabled = + !TouchBarHelper.window.gBrowser.canGoForward; + if (subject.QueryInterface(Ci.nsIWebProgress)?.isTopLevel) { + this.activeUrl = data; + // ReaderView button is disabled on every toplevel location change + // since Reader View must determine if the new page can be Reader + // Viewed. + updatedInputs.push("ReaderView"); + gBuiltInInputs.ReaderView.disabled = !data.startsWith("about:reader"); + } + this._updateTouchBarInputs(...updatedInputs); + break; + case "fullscreen-painted": + if (TouchBarHelper.window.document.fullscreenElement) { + gBuiltInInputs.OpenLocation.title = "touchbar-fullscreen-exit"; + gBuiltInInputs.OpenLocation.image = + "chrome://browser/skin/fullscreen-exit.svg"; + gBuiltInInputs.OpenLocation.callback = () => { + TouchBarHelper.window.windowUtils.exitFullscreen(); + }; + } else { + gBuiltInInputs.OpenLocation.title = "open-location"; + gBuiltInInputs.OpenLocation.image = + "chrome://global/skin/icons/search-glass.svg"; + gBuiltInInputs.OpenLocation.callback = () => + execCommand("Browser:OpenLocation", "OpenLocation"); + } + this._updateTouchBarInputs("OpenLocation"); + break; + case "bookmark-icon-updated": + gBuiltInInputs.AddBookmark.image = + data == "starred" + ? "chrome://browser/skin/bookmark.svg" + : "chrome://browser/skin/bookmark-hollow.svg"; + this._updateTouchBarInputs("AddBookmark"); + break; + case "reader-mode-available": + gBuiltInInputs.ReaderView.disabled = false; + this._updateTouchBarInputs("ReaderView"); + break; + case "urlbar-focus": + if (!this._searchPopover) { + this._searchPopover = this.getTouchBarInput("SearchPopover"); + } + lazy.touchBarUpdater.showPopover( + TouchBarHelper.baseWindow, + this._searchPopover, + true + ); + break; + case "urlbar-blur": + if (!this._searchPopover) { + this._searchPopover = this.getTouchBarInput("SearchPopover"); + } + lazy.touchBarUpdater.showPopover( + TouchBarHelper.baseWindow, + this._searchPopover, + false + ); + break; + case "intl:app-locales-changed": + this._searchPopover = null; + localizedStrings = {}; + + // This event can fire before this._l10n updates to switch languages, + // so all the new translations are in the old language. To avoid this, + // we need to reinitialize this._l10n. + this._l10n = new Localization(["browser/touchbar/touchbar.ftl"]); + helperProto._l10n = this._l10n; + + this._updateTouchBarInputs(...Object.keys(gBuiltInInputs)); + break; + case "quit-application": + this.destructor(); + break; + } + } +} + +const helperProto = TouchBarHelper.prototype; +helperProto.QueryInterface = ChromeUtils.generateQI(["nsITouchBarHelper"]); +helperProto._l10n = new Localization(["browser/touchbar/touchbar.ftl"]); + +/** + * A representation of a Touch Bar input. + * + * @param {object} input + * An object representing a Touch Bar Input. + * Contains listed properties. + * @param {string} input.title + * The lookup key for the button's localized text title. + * @param {string} input.image + * A URL pointing to an SVG internal to Firefox. + * @param {string} input.type + * The type of Touch Bar input represented by the object. + * Must be a value from kInputTypes. + * @param {Function} input.callback + * A callback invoked when a touchbar item is touched. + * @param {string} [input.color] + * A string in hex format specifying the button's background color. + * If omitted, the default background color is used. + * @param {bool} [input.disabled] + * If `true`, the Touch Bar input is greyed out and inoperable. + * @param {Array} [input.children] + * An array of input objects that will be displayed as children of + * this input. Available only for types KInputTypes.POPOVER and + * kInputTypes.SCROLLVIEW. + */ +export class TouchBarInput { + constructor(input) { + this._key = input.key || input.title; + this._title = localizedStrings[input.title] || ""; + this._image = input.image; + this._type = input.type; + this._callback = input.callback; + this._color = hexToInt(input.color); + this._disabled = input.hasOwnProperty("disabled") ? input.disabled : false; + if (input.children) { + this._children = []; + let toLocalize = []; + for (let childData of Object.values(input.children)) { + let initializedChild = new TouchBarInput(childData); + if (!initializedChild) { + continue; + } + // Children's types are prepended by the parent's type. This is so we + // can uniquely identify a child input from a standalone input with + // the same name. (e.g. a button called "back" in a popover would be a + // "popover-button.back" vs. a "button.back"). + initializedChild.type = input.type + "-" + initializedChild.type; + this._children.push(initializedChild); + // Skip l10n for inputs without a title or those already localized. + if (childData.title && !localizedStrings[childData.title]) { + toLocalize.push(initializedChild); + } + } + this._localizeChildren(toLocalize); + } + } + + get key() { + return this._key; + } + get title() { + return this._title; + } + set title(title) { + this._title = title; + } + get image() { + return this._image ? Services.io.newURI(this._image) : null; + } + set image(image) { + this._image = image; + } + get type() { + return this._type == "" ? "button" : this._type; + } + set type(type) { + this._type = type; + } + get callback() { + return this._callback; + } + set callback(callback) { + this._callback = callback; + } + get color() { + return this._color; + } + set color(color) { + this._color = this.hexToInt(color); + } + get disabled() { + return this._disabled || false; + } + set disabled(disabled) { + this._disabled = disabled; + } + get children() { + if (!this._children) { + return null; + } + let children = Cc["@mozilla.org/array;1"].createInstance( + Ci.nsIMutableArray + ); + for (let child of this._children) { + children.appendElement(child); + } + return children; + } + + /** + * Apply Fluent l10n to child inputs. + * + * @param {Array} children + * An array of initialized TouchBarInputs. + */ + async _localizeChildren(children) { + if (!children || !children.length) { + return; + } + + let titles = await helperProto._l10n.formatValues( + children.map(child => ({ id: child.key })) + ); + // In the TouchBarInput constuctor, we filtered so children contains only + // those inputs with titles to be localized. We can be confident that the + // results in titles match up with the inputs to be localized. + children.forEach(function (child, index) { + child.title = titles[index]; + localizedStrings[child.key] = child.title; + }); + + lazy.touchBarUpdater.updateTouchBarInputs( + TouchBarHelper.baseWindow, + children + ); + } +} + +TouchBarInput.prototype.QueryInterface = ChromeUtils.generateQI([ + "nsITouchBarInput", +]); |