diff options
Diffstat (limited to 'comm/mail/components/customizableui/content/panelUI.js')
| -rw-r--r-- | comm/mail/components/customizableui/content/panelUI.js | 882 |
1 files changed, 882 insertions, 0 deletions
diff --git a/comm/mail/components/customizableui/content/panelUI.js b/comm/mail/components/customizableui/content/panelUI.js new file mode 100644 index 0000000000..bad418abb4 --- /dev/null +++ b/comm/mail/components/customizableui/content/panelUI.js @@ -0,0 +1,882 @@ +/* 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-globals-from ../../../base/content/globalOverlay.js */ +/* import-globals-from ../../../base/content/mailCore.js */ +/* import-globals-from ../../../base/content/mailWindowOverlay.js */ +/* import-globals-from ../../../base/content/messenger.js */ +/* import-globals-from ../../../extensions/mailviews/content/msgViewPickerOverlay.js */ + +var { ExtensionParent } = ChromeUtils.importESModule( + "resource://gre/modules/ExtensionParent.sys.mjs" +); +var { ExtensionSupport } = ChromeUtils.import( + "resource:///modules/ExtensionSupport.jsm" +); +var { ShortcutUtils } = ChromeUtils.importESModule( + "resource://gre/modules/ShortcutUtils.sys.mjs" +); +var { AppConstants } = ChromeUtils.importESModule( + "resource://gre/modules/AppConstants.sys.mjs" +); +var { UIDensity } = ChromeUtils.import("resource:///modules/UIDensity.jsm"); +var { XPCOMUtils } = ChromeUtils.importESModule( + "resource://gre/modules/XPCOMUtils.sys.mjs" +); + +ChromeUtils.defineESModuleGetters(this, { + AppMenuNotifications: "resource://gre/modules/AppMenuNotifications.sys.mjs", + CustomizableUI: "resource:///modules/CustomizableUI.sys.mjs", + PanelMultiView: "resource:///modules/PanelMultiView.sys.mjs", +}); +ChromeUtils.defineModuleGetter( + this, + "ExtensionsUI", + "resource:///modules/ExtensionsUI.jsm" +); + +/** + * Maintains the state and dispatches events for the main menu panel. + */ +const PanelUI = { + /** Panel events that we listen for. */ + get kEvents() { + return [ + "popupshowing", + "popupshown", + "popuphiding", + "popuphidden", + "ViewShowing", + ]; + }, + /** + * Used for lazily getting and memoizing elements from the document. Lazy + * getters are set in init, and memoizing happens after the first retrieval. + */ + get kElements() { + return { + mainView: "appMenu-mainView", + multiView: "appMenu-multiView", + menuButton: "button-appmenu", + panel: "appMenu-popup", + addonNotificationContainer: "appMenu-addon-banners", + navbar: "mail-bar3", + }; + }, + + kAppMenuButtons: new Set(), + + _initialized: false, + _notifications: null, + + init() { + this._initElements(); + this.initAppMenuButton("button-appmenu", "mail-toolbox"); + + this.menuButton = this.menuButtonMail; + + Services.obs.addObserver(this, "fullscreen-nav-toolbox"); + Services.obs.addObserver(this, "appMenu-notifications"); + + XPCOMUtils.defineLazyPreferenceGetter( + this, + "autoHideToolbarInFullScreen", + "browser.fullscreen.autohide", + false, + (pref, previousValue, newValue) => { + // On OSX, or with autohide preffed off, MozDOMFullscreen is the only + // event we care about, since fullscreen should behave just like non + // fullscreen. Otherwise, we don't want to listen to these because + // we'd just be spamming ourselves with both of them whenever a user + // opened a video. + if (newValue) { + window.removeEventListener("MozDOMFullscreen:Entered", this); + window.removeEventListener("MozDOMFullscreen:Exited", this); + window.addEventListener("fullscreen", this); + } else { + window.addEventListener("MozDOMFullscreen:Entered", this); + window.addEventListener("MozDOMFullscreen:Exited", this); + window.removeEventListener("fullscreen", this); + } + + this._updateNotifications(false); + }, + autoHidePref => autoHidePref && Services.appinfo.OS !== "Darwin" + ); + + if (this.autoHideToolbarInFullScreen) { + window.addEventListener("fullscreen", this); + } else { + window.addEventListener("MozDOMFullscreen:Entered", this); + window.addEventListener("MozDOMFullscreen:Exited", this); + } + + window.addEventListener("activate", this); + + Services.obs.notifyObservers( + null, + "appMenu-notifications-request", + "refresh" + ); + + this._initialized = true; + }, + + _initElements() { + for (let [k, v] of Object.entries(this.kElements)) { + // Need to do fresh let-bindings per iteration + let getKey = k; + let id = v; + this.__defineGetter__(getKey, function () { + delete this[getKey]; + // eslint-disable-next-line consistent-return + return (this[getKey] = document.getElementById(id)); + }); + } + }, + + initAppMenuButton(id, toolboxId) { + let button = document.getElementById(id); + if (!button) { + // If not in the document, the button should be in the toolbox palette, + // which isn't part of the document. + let toolbox = document.getElementById(toolboxId); + if (toolbox) { + button = toolbox.palette.querySelector(`#${id}`); + } + } + + if (button) { + button.addEventListener("mousedown", PanelUI); + button.addEventListener("keypress", PanelUI); + + this.kAppMenuButtons.add(button); + } + }, + + _eventListenersAdded: false, + _ensureEventListenersAdded() { + if (this._eventListenersAdded) { + return; + } + this._addEventListeners(); + }, + + _addEventListeners() { + for (let event of this.kEvents) { + this.panel.addEventListener(event, this); + } + this._eventListenersAdded = true; + }, + + _removeEventListeners() { + for (let event of this.kEvents) { + this.panel.removeEventListener(event, this); + } + this._eventListenersAdded = false; + }, + + uninit() { + this._removeEventListeners(); + + Services.obs.removeObserver(this, "fullscreen-nav-toolbox"); + Services.obs.removeObserver(this, "appMenu-notifications"); + + window.removeEventListener("MozDOMFullscreen:Entered", this); + window.removeEventListener("MozDOMFullscreen:Exited", this); + window.removeEventListener("fullscreen", this); + window.removeEventListener("activate", this); + + [this.menuButtonMail, this.menuButtonChat].forEach(button => { + // There's no chat button in the messageWindow.xhtml context. + if (button) { + button.removeEventListener("mousedown", this); + button.removeEventListener("keypress", this); + } + }); + }, + + /** + * Opens the menu panel if it's closed, or closes it if it's open. + * + * @param event the event that triggers the toggle. + */ + toggle(event) { + // Don't show the panel if the window is in customization mode, + // since this button doubles as an exit path for the user in this case. + if (document.documentElement.hasAttribute("customizing")) { + return; + } + + // Since we have several menu buttons, make sure the current one is used. + // This works for now, but in the long run, if we're showing badges etc. + // then the current menuButton needs to be set when the app's view/tab + // changes, not just when the menu is toggled. + this.menuButton = event.target; + + this._ensureEventListenersAdded(); + if (this.panel.state == "open") { + this.hide(); + } else if (this.panel.state == "closed") { + this.show(event); + } + }, + + /** + * Opens the menu panel. If the event target has a child with the + * toolbarbutton-icon attribute, the panel will be anchored on that child. + * Otherwise, the panel is anchored on the event target itself. + * + * @param aEvent the event (if any) that triggers showing the menu. + */ + show(aEvent) { + this._ensureShortcutsShown(); + (async () => { + await this.ensureReady(); + + if ( + this.panel.state == "open" || + document.documentElement.hasAttribute("customizing") + ) { + return; + } + + let domEvent = null; + if (aEvent && aEvent.type != "command") { + domEvent = aEvent; + } + + // We try to use the event.target to account for clicks triggered + // from the #button-chat-appmenu. In case the opening of the menu isn't + // triggered by a click event, fallback to the main menu button as anchor. + let anchor = this._getPanelAnchor( + aEvent ? aEvent.target : this.menuButton + ); + await PanelMultiView.openPopup(this.panel, anchor, { + triggerEvent: domEvent, + }); + })().catch(console.error); + }, + + /** + * If the menu panel is being shown, hide it. + */ + hide() { + if (document.documentElement.hasAttribute("customizing")) { + return; + } + + PanelMultiView.hidePopup(this.panel); + }, + + observe(subject, topic, status) { + switch (topic) { + case "fullscreen-nav-toolbox": + if (this._notifications) { + this._updateNotifications(false); + } + break; + case "appMenu-notifications": + // Don't initialize twice. + if (status == "init" && this._notifications) { + break; + } + this._notifications = AppMenuNotifications.notifications; + this._updateNotifications(true); + break; + } + }, + + handleEvent(event) { + // Ignore context menus and menu button menus showing and hiding: + if (event.type.startsWith("popup") && event.target != this.panel) { + return; + } + switch (event.type) { + case "popupshowing": + initAppMenuPopup(); + // Fall through + case "popupshown": + if (event.type == "popupshown") { + CustomizableUI.addPanelCloseListeners(this.panel); + } + // Fall through + case "popuphiding": + // Fall through + case "popuphidden": + this._updateNotifications(); + this._updatePanelButton(event.target); + if (event.type == "popuphidden") { + CustomizableUI.removePanelCloseListeners(this.panel); + } + break; + case "mousedown": + if (event.button == 0) { + this.toggle(event); + } + break; + case "keypress": + if (event.key == " " || event.key == "Enter") { + this.toggle(event); + event.stopPropagation(); + } + break; + case "MozDOMFullscreen:Entered": + case "MozDOMFullscreen:Exited": + case "fullscreen": + case "activate": + this._updateNotifications(); + break; + case "ViewShowing": + PanelUI._handleViewShowingEvent(event); + break; + } + }, + + /** + * When a ViewShowing event happens when a <panelview> element is shown, + * do any required set up for that particular view. + * + * @param {ViewShowingEvent} event - ViewShowing event. + */ + _handleViewShowingEvent(event) { + // Typically event.target for "ViewShowing" is a <panelview> element. + PanelUI._ensureShortcutsShown(event.target); + + switch (event.target.id) { + case "appMenu-foldersView": + this._onFoldersViewShow(event); + break; + case "appMenu-addonsView": + initAddonPrefsMenu( + event.target.querySelector(".panel-subview-body"), + "toolbarbutton", + "subviewbutton subviewbutton-iconic", + "subviewbutton subviewbutton-iconic" + ); + break; + case "appMenu-toolbarsView": + onViewToolbarsPopupShowing( + event, + "mail-toolbox", + document.getElementById("appmenu_quickFilterBar"), + "toolbarbutton", + "subviewbutton subviewbutton-iconic", + true + ); + break; + case "appMenu-preferencesLayoutView": + PanelUI._onPreferencesLayoutViewShow(event); + break; + // View + case "appMenu-viewMessagesTagsView": + PanelUI._refreshDynamicView(event, RefreshTagsPopup); + break; + case "appMenu-viewMessagesCustomViewsView": + PanelUI._refreshDynamicView(event, RefreshCustomViewsPopup); + break; + } + }, + + /** + * Refreshes some views that are dynamically populated. Typically called by + * event listeners responding to a ViewShowing event. It calls a given refresh + * function (that populates the view), passing appmenu-specific arguments. + * + * @param {ViewShowingEvent} event - ViewShowing event. + * @param {Function} refreshFunction - Function that refreshes a particular view. + */ + _refreshDynamicView(event, refreshFunction) { + refreshFunction( + event.target.querySelector(".panel-subview-body"), + "toolbarbutton", + "subviewbutton subviewbutton-iconic", + "toolbarseparator" + ); + }, + + get isReady() { + return !!this._isReady; + }, + + /** + * Registering the menu panel is done lazily for performance reasons. This + * method is exposed so that CustomizationMode can force panel-readyness in the + * event that customization mode is started before the panel has been opened + * by the user. + * + * @param aCustomizing (optional) set to true if this was called while entering + * customization mode. If that's the case, we trust that customization + * mode will handle calling beginBatchUpdate and endBatchUpdate. + * + * @returns a Promise that resolves once the panel is ready to roll. + */ + async ensureReady() { + if (this._isReady) { + return; + } + + await window.delayedStartupPromise; + this._ensureEventListenersAdded(); + this.panel.hidden = false; + this._isReady = true; + }, + + /** + * Shows a subview in the panel with a given ID. + * + * @param aViewId the ID of the subview to show. + * @param aAnchor the element that spawned the subview. + */ + async showSubView(aViewId, aAnchor) { + this._ensureEventListenersAdded(); + let viewNode = document.getElementById(aViewId); + if (!viewNode) { + console.error("Could not show panel subview with id: " + aViewId); + return; + } + + if (!aAnchor) { + console.error( + "Expected an anchor when opening subview with id: " + aViewId + ); + return; + } + + let container = aAnchor.closest("panelmultiview"); + if (container) { + container.showSubView(aViewId, aAnchor); + } + }, + + /** + * NB: The enable- and disableSingleSubviewPanelAnimations methods only + * affect the hiding/showing animations of single-subview panels (tempPanel + * in the showSubView method). + */ + disableSingleSubviewPanelAnimations() { + this._disableAnimations = true; + }, + + enableSingleSubviewPanelAnimations() { + this._disableAnimations = false; + }, + + /** + * Sets the anchor node into the open or closed state, depending + * on the state of the panel. + */ + _updatePanelButton() { + this.menuButton.open = + this.panel.state == "open" || this.panel.state == "showing"; + }, + + /** + * Event handler for showing the Preferences/Layout view. Removes "checked" + * from all layout menu items and then checks the current layout menu item. + * + * @param {ViewShowingEvent} event - ViewShowing event. + */ + _onPreferencesLayoutViewShow(event) { + event.target + .querySelectorAll("[name='viewlayoutgroup']") + .forEach(item => item.removeAttribute("checked")); + + InitViewLayoutStyleMenu(event, true); + }, + + /** + * Event listener for showing the Folders view. + * + * @param {ViewShowingEvent} event - ViewShowing event. + */ + _onFoldersViewShow(event) { + let about3Pane = document.getElementById("tabmail").currentAbout3Pane; + let folder = about3Pane.gFolder; + + const paneHeaderMenuitem = event.target.querySelector( + '[name="paneheader"]' + ); + if (about3Pane.folderPane.isFolderPaneHeaderHidden()) { + paneHeaderMenuitem.removeAttribute("checked"); + } else { + paneHeaderMenuitem.setAttribute("checked", "true"); + } + + let { activeModes, canBeCompact, isCompact } = about3Pane.folderPane; + if (isCompact) { + activeModes.push("compact"); + } + + for (let item of event.target.querySelectorAll('[name="viewmessages"]')) { + let mode = item.getAttribute("value"); + if (activeModes.includes(mode)) { + item.setAttribute("checked", "true"); + if (mode == "all") { + item.disabled = activeModes.length == 1; + } + } else { + item.removeAttribute("checked"); + } + if (mode == "compact") { + item.disabled = !canBeCompact; + } + } + + goUpdateCommand("cmd_properties"); + let propertiesMenuItem = document.getElementById("appmenu_properties"); + if (folder?.server.type == "nntp") { + document.l10n.setAttributes( + propertiesMenuItem, + "menu-edit-newsgroup-properties" + ); + } else { + document.l10n.setAttributes( + propertiesMenuItem, + "menu-edit-folder-properties" + ); + } + + let favoriteFolderMenu = document.getElementById("appmenu_favoriteFolder"); + if (folder?.getFlag(Ci.nsMsgFolderFlags.Favorite)) { + favoriteFolderMenu.setAttribute("checked", "true"); + } else { + favoriteFolderMenu.removeAttribute("checked"); + } + }, + + _onToolsMenuShown(event) { + let noAccounts = MailServices.accounts.accounts.length == 0; + event.target.querySelector("#appmenu_searchCmd").disabled = noAccounts; + event.target.querySelector("#appmenu_filtersCmd").disabled = noAccounts; + }, + + _updateNotifications(notificationsChanged) { + let notifications = this._notifications; + if (!notifications || !notifications.length) { + if (notificationsChanged) { + this._clearAllNotifications(); + } + return; + } + + let doorhangers = notifications.filter( + n => !n.dismissed && !n.options.badgeOnly + ); + + if (this.panel.state == "showing" || this.panel.state == "open") { + // If the menu is already showing, then we need to dismiss all notifications + // since we don't want their doorhangers competing for attention + doorhangers.forEach(n => { + n.dismissed = true; + if (n.options.onDismissed) { + n.options.onDismissed(window); + } + }); + this._clearBadge(); + if (!notifications[0].options.badgeOnly) { + this._showBannerItem(notifications[0]); + } + } else if (doorhangers.length > 0) { + // Only show the doorhanger if the window is focused and not fullscreen + if ( + (window.fullScreen && this.autoHideToolbarInFullScreen) || + Services.focus.activeWindow !== window + ) { + this._showBadge(doorhangers[0]); + this._showBannerItem(doorhangers[0]); + } else { + this._clearBadge(); + } + } else { + this._showBadge(notifications[0]); + this._showBannerItem(notifications[0]); + } + }, + + _clearAllNotifications() { + this._clearBadge(); + this._clearBannerItem(); + }, + + _formatDescriptionMessage(n) { + let text = {}; + let array = n.options.message.split("<>"); + text.start = array[0] || ""; + text.name = n.options.name || ""; + text.end = array[1] || ""; + return text; + }, + + _showBadge(notification) { + let badgeStatus = this._getBadgeStatus(notification); + for (let menuButton of this.kAppMenuButtons) { + menuButton.setAttribute("badge-status", badgeStatus); + } + }, + + // "Banner item" here refers to an item in the hamburger panel menu. They will + // typically show up as a colored row in the panel. + _showBannerItem(notification) { + const supportedIds = [ + "update-downloading", + "update-available", + "update-manual", + "update-unsupported", + "update-restart", + ]; + if (!supportedIds.includes(notification.id)) { + return; + } + + if (!this._panelBannerItem) { + this._panelBannerItem = this.mainView.querySelector(".panel-banner-item"); + } + + let l10nId = "appmenuitem-banner-" + notification.id; + document.l10n.setAttributes(this._panelBannerItem, l10nId); + + this._panelBannerItem.setAttribute("notificationid", notification.id); + this._panelBannerItem.hidden = false; + this._panelBannerItem.notification = notification; + }, + + _clearBadge() { + for (let menuButton of this.kAppMenuButtons) { + menuButton.removeAttribute("badge-status"); + } + }, + + _clearBannerItem() { + if (this._panelBannerItem) { + this._panelBannerItem.notification = null; + this._panelBannerItem.hidden = true; + } + }, + + _onNotificationButtonEvent(event, type) { + let notificationEl = getNotificationFromElement(event.target); + + if (!notificationEl) { + throw new Error( + "PanelUI._onNotificationButtonEvent: couldn't find notification element" + ); + } + + if (!notificationEl.notification) { + throw new Error( + "PanelUI._onNotificationButtonEvent: couldn't find notification" + ); + } + + let notification = notificationEl.notification; + + if (type == "secondarybuttoncommand") { + AppMenuNotifications.callSecondaryAction(window, notification); + } else { + AppMenuNotifications.callMainAction(window, notification, true); + } + }, + + _onBannerItemSelected(event) { + let target = event.target; + if (!target.notification) { + throw new Error( + "menucommand target has no associated action/notification" + ); + } + + event.stopPropagation(); + AppMenuNotifications.callMainAction(window, target.notification, false); + }, + + _getPopupId(notification) { + return "appMenu-" + notification.id + "-notification"; + }, + + _getBadgeStatus(notification) { + return notification.id; + }, + + _getPanelAnchor(candidate) { + let iconAnchor = candidate.badgeStack || candidate.icon; + return iconAnchor || candidate; + }, + + _ensureShortcutsShown(view = this.mainView) { + if (view.hasAttribute("added-shortcuts")) { + return; + } + view.setAttribute("added-shortcuts", "true"); + for (let button of view.querySelectorAll("toolbarbutton[key]")) { + let keyId = button.getAttribute("key"); + let key = document.getElementById(keyId); + if (!key) { + continue; + } + button.setAttribute("shortcut", ShortcutUtils.prettifyShortcut(key)); + } + }, + + folderViewMenuOnCommand(event) { + let about3Pane = document.getElementById("tabmail").currentAbout3Pane; + if (!about3Pane) { + return; + } + + let mode = event.target.getAttribute("value"); + if (mode == "toggle-header") { + about3Pane.folderPane.toggleHeader(event.target.hasAttribute("checked")); + return; + } + + let activeModes = about3Pane.folderPane.activeModes; + let index = activeModes.indexOf(mode); + if (event.target.hasAttribute("checked")) { + if (index == -1) { + activeModes.push(mode); + } + } else if (index >= 0) { + activeModes.splice(index, 1); + } + about3Pane.folderPane.activeModes = activeModes; + + this._onFoldersViewShow({ target: event.target.parentNode }); + }, + + folderCompactMenuOnCommand(event) { + let about3Pane = document.getElementById("tabmail").currentAbout3Pane; + if (!about3Pane) { + return; + } + + about3Pane.folderPane.isCompact = event.target.hasAttribute("checked"); + }, + + setUIDensity(event) { + // Loops through all available options and uncheck them. This is necessary + // since the toolbarbuttons don't uncheck themselves even if they're radio. + for (let item of event.originalTarget + .closest(".panel-subview-body") + .querySelectorAll("toolbarbutton")) { + // Skip this item if it's the one clicked. + if (item == event.originalTarget) { + continue; + } + + item.removeAttribute("checked"); + } + // Update the UI density. + UIDensity.setMode(event.originalTarget.mode); + }, +}; + +XPCOMUtils.defineConstant(this, "PanelUI", PanelUI); + +/** + * Gets the currently selected locale for display. + * + * @returns the selected locale + */ +function getLocale() { + return Services.locale.appLocaleAsBCP47; +} + +/** + * Given a DOM node inside a <popupnotification>, return the parent <popupnotification>. + */ +function getNotificationFromElement(aElement) { + return aElement.closest("popupnotification"); +} + +/** + * This object is Thunderbird's version of the same object in + * browser/base/content/browser-addons.js. + */ +var gExtensionsNotifications = { + initialized: false, + init() { + this.updateAlerts(); + this.boundUpdate = this.updateAlerts.bind(this); + ExtensionsUI.on("change", this.boundUpdate); + this.initialized = true; + }, + + uninit() { + // uninit() can race ahead of init() in some cases, if that happens, + // we have no handler to remove. + if (!this.initialized) { + return; + } + ExtensionsUI.off("change", this.boundUpdate); + }, + + get l10n() { + if (this._l10n) { + return this._l10n; + } + return (this._l10n = new Localization( + ["messenger/addonNotifications.ftl", "branding/brand.ftl"], + true + )); + }, + + _createAddonButton(l10nId, addon, callback) { + let text = this.l10n.formatValueSync(l10nId, { addonName: addon.name }); + let button = document.createXULElement("toolbarbutton"); + button.setAttribute("wrap", "true"); + button.setAttribute("label", text); + button.setAttribute("tooltiptext", text); + const DEFAULT_EXTENSION_ICON = + "chrome://messenger/skin/icons/new/compact/extension.svg"; + button.setAttribute("image", addon.iconURL || DEFAULT_EXTENSION_ICON); + button.className = "addon-banner-item subviewbutton"; + + button.addEventListener("command", callback); + PanelUI.addonNotificationContainer.appendChild(button); + }, + + updateAlerts() { + let gBrowser = document.getElementById("tabmail"); + let sideloaded = ExtensionsUI.sideloaded; + let updates = ExtensionsUI.updates; + + let container = PanelUI.addonNotificationContainer; + + while (container.firstChild) { + container.firstChild.remove(); + } + + let items = 0; + for (let update of updates) { + if (++items > 4) { + break; + } + this._createAddonButton( + "webext-perms-update-menu-item", + update.addon, + evt => { + ExtensionsUI.showUpdate(gBrowser, update); + } + ); + } + + for (let addon of sideloaded) { + if (++items > 4) { + break; + } + this._createAddonButton("webext-perms-sideload-menu-item", addon, evt => { + // We need to hide the main menu manually because the toolbarbutton is + // removed immediately while processing this event, and PanelUI is + // unable to identify which panel should be closed automatically. + PanelUI.hide(); + ExtensionsUI.showSideloaded(gBrowser, addon); + }); + } + }, +}; + +addEventListener("unload", () => gExtensionsNotifications.uninit(), { + once: true, +}); |