diff options
Diffstat (limited to 'browser/components/customizableui/content/panelUI.js')
| -rw-r--r-- | browser/components/customizableui/content/panelUI.js | 558 |
1 files changed, 558 insertions, 0 deletions
diff --git a/browser/components/customizableui/content/panelUI.js b/browser/components/customizableui/content/panelUI.js new file mode 100644 index 000000000..66fa0c184 --- /dev/null +++ b/browser/components/customizableui/content/panelUI.js @@ -0,0 +1,558 @@ +/* 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/. */ + +XPCOMUtils.defineLazyModuleGetter(this, "CustomizableUI", + "resource:///modules/CustomizableUI.jsm"); +XPCOMUtils.defineLazyModuleGetter(this, "ScrollbarSampler", + "resource:///modules/ScrollbarSampler.jsm"); +XPCOMUtils.defineLazyModuleGetter(this, "ShortcutUtils", + "resource://gre/modules/ShortcutUtils.jsm"); +XPCOMUtils.defineLazyModuleGetter(this, "AppConstants", + "resource://gre/modules/AppConstants.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"]; + }, + /** + * 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 { + contents: "PanelUI-contents", + mainView: "PanelUI-mainView", + multiView: "PanelUI-multiView", + helpView: "PanelUI-helpView", + menuButton: "PanelUI-menu-button", + panel: "PanelUI-popup", + scroller: "PanelUI-contents-scroller" + }; + }, + + _initialized: false, + init: function() { + 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]; + return this[getKey] = document.getElementById(id); + }); + } + + this.menuButton.addEventListener("mousedown", this); + this.menuButton.addEventListener("keypress", this); + this._overlayScrollListenerBoundFn = this._overlayScrollListener.bind(this); + window.matchMedia("(-moz-overlay-scrollbars)").addListener(this._overlayScrollListenerBoundFn); + CustomizableUI.addListener(this); + this._initialized = true; + }, + + _eventListenersAdded: false, + _ensureEventListenersAdded: function() { + if (this._eventListenersAdded) + return; + this._addEventListeners(); + }, + + _addEventListeners: function() { + for (let event of this.kEvents) { + this.panel.addEventListener(event, this); + } + + this.helpView.addEventListener("ViewShowing", this._onHelpViewShow, false); + this._eventListenersAdded = true; + }, + + uninit: function() { + for (let event of this.kEvents) { + this.panel.removeEventListener(event, this); + } + this.helpView.removeEventListener("ViewShowing", this._onHelpViewShow); + this.menuButton.removeEventListener("mousedown", this); + this.menuButton.removeEventListener("keypress", this); + window.matchMedia("(-moz-overlay-scrollbars)").removeListener(this._overlayScrollListenerBoundFn); + CustomizableUI.removeListener(this); + this._overlayScrollListenerBoundFn = null; + }, + + /** + * Customize mode extracts the mainView and puts it somewhere else while the + * user customizes. Upon completion, this function can be called to put the + * panel back to where it belongs in normal browsing mode. + * + * @param aMainView + * The mainView node to put back into place. + */ + setMainView: function(aMainView) { + this._ensureEventListenersAdded(); + this.multiView.setMainView(aMainView); + }, + + /** + * Opens the menu panel if it's closed, or closes it if it's + * open. + * + * @param aEvent the event that triggers the toggle. + */ + toggle: function(aEvent) { + // 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; + } + this._ensureEventListenersAdded(); + if (this.panel.state == "open") { + this.hide(); + } else if (this.panel.state == "closed") { + this.show(aEvent); + } + }, + + /** + * 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: function(aEvent) { + return new Promise(resolve => { + this.ensureReady().then(() => { + if (this.panel.state == "open" || + document.documentElement.hasAttribute("customizing")) { + resolve(); + return; + } + + let editControlPlacement = CustomizableUI.getPlacementOfWidget("edit-controls"); + if (editControlPlacement && editControlPlacement.area == CustomizableUI.AREA_PANEL) { + updateEditUIVisibility(); + } + + let personalBookmarksPlacement = CustomizableUI.getPlacementOfWidget("personal-bookmarks"); + if (personalBookmarksPlacement && + personalBookmarksPlacement.area == CustomizableUI.AREA_PANEL) { + PlacesToolbarHelper.customizeChange(); + } + + let anchor; + if (!aEvent || + aEvent.type == "command") { + anchor = this.menuButton; + } else { + anchor = aEvent.target; + } + + this.panel.addEventListener("popupshown", function onPopupShown() { + this.removeEventListener("popupshown", onPopupShown); + resolve(); + }); + + let iconAnchor = + document.getAnonymousElementByAttribute(anchor, "class", + "toolbarbutton-icon"); + this.panel.openPopup(iconAnchor || anchor); + }, (reason) => { + console.error("Error showing the PanelUI menu", reason); + }); + }); + }, + + /** + * If the menu panel is being shown, hide it. + */ + hide: function() { + if (document.documentElement.hasAttribute("customizing")) { + return; + } + + this.panel.hidePopup(); + }, + + handleEvent: function(aEvent) { + // Ignore context menus and menu button menus showing and hiding: + if (aEvent.type.startsWith("popup") && + aEvent.target != this.panel) { + return; + } + switch (aEvent.type) { + case "popupshowing": + this._adjustLabelsForAutoHyphens(); + // Fall through + case "popupshown": + // Fall through + case "popuphiding": + // Fall through + case "popuphidden": + this._updatePanelButton(aEvent.target); + break; + case "mousedown": + if (aEvent.button == 0) + this.toggle(aEvent); + break; + case "keypress": + this.toggle(aEvent); + break; + } + }, + + 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. + * + * @return a Promise that resolves once the panel is ready to roll. + */ + ensureReady: function(aCustomizing=false) { + if (this._readyPromise) { + return this._readyPromise; + } + this._readyPromise = Task.spawn(function*() { + if (!this._initialized) { + yield new Promise(resolve => { + let delayedStartupObserver = (aSubject, aTopic, aData) => { + if (aSubject == window) { + Services.obs.removeObserver(delayedStartupObserver, "browser-delayed-startup-finished"); + resolve(); + } + }; + Services.obs.addObserver(delayedStartupObserver, "browser-delayed-startup-finished", false); + }); + } + + this.contents.setAttributeNS("http://www.w3.org/XML/1998/namespace", "lang", + getLocale()); + if (!this._scrollWidth) { + // In order to properly center the contents of the panel, while ensuring + // that we have enough space on either side to show a scrollbar, we have to + // do a bit of hackery. In particular, we calculate a new width for the + // scroller, based on the system scrollbar width. + this._scrollWidth = + (yield ScrollbarSampler.getSystemScrollbarWidth()) + "px"; + let cstyle = window.getComputedStyle(this.scroller); + let widthStr = cstyle.width; + // Get the calculated padding on the left and right sides of + // the scroller too. We'll use that in our final calculation so + // that if a scrollbar appears, we don't have the contents right + // up against the edge of the scroller. + let paddingLeft = cstyle.paddingLeft; + let paddingRight = cstyle.paddingRight; + let calcStr = [widthStr, this._scrollWidth, + paddingLeft, paddingRight].join(" + "); + this.scroller.style.width = "calc(" + calcStr + ")"; + } + + if (aCustomizing) { + CustomizableUI.registerMenuPanel(this.contents); + } else { + this.beginBatchUpdate(); + try { + CustomizableUI.registerMenuPanel(this.contents); + } finally { + this.endBatchUpdate(); + } + } + this._updateQuitTooltip(); + this.panel.hidden = false; + this._isReady = true; + }.bind(this)).then(null, Cu.reportError); + + return this._readyPromise; + }, + + /** + * Switch the panel to the main view if it's not already + * in that view. + */ + showMainView: function() { + this._ensureEventListenersAdded(); + this.multiView.showMainView(); + }, + + /** + * Switch the panel to the help view if it's not already + * in that view. + */ + showHelpView: function(aAnchor) { + this._ensureEventListenersAdded(); + this.multiView.showSubView("PanelUI-helpView", aAnchor); + }, + + /** + * 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. + * @param aPlacementArea the CustomizableUI area that aAnchor is in. + */ + showSubView: Task.async(function*(aViewId, aAnchor, aPlacementArea) { + this._ensureEventListenersAdded(); + let viewNode = document.getElementById(aViewId); + if (!viewNode) { + Cu.reportError("Could not show panel subview with id: " + aViewId); + return; + } + + if (!aAnchor) { + Cu.reportError("Expected an anchor when opening subview with id: " + aViewId); + return; + } + + if (aPlacementArea == CustomizableUI.AREA_PANEL) { + this.multiView.showSubView(aViewId, aAnchor); + } else if (!aAnchor.open) { + aAnchor.open = true; + + let tempPanel = document.createElement("panel"); + tempPanel.setAttribute("type", "arrow"); + tempPanel.setAttribute("id", "customizationui-widget-panel"); + tempPanel.setAttribute("class", "cui-widget-panel"); + tempPanel.setAttribute("viewId", aViewId); + if (aAnchor.getAttribute("tabspecific")) { + tempPanel.setAttribute("tabspecific", true); + } + if (this._disableAnimations) { + tempPanel.setAttribute("animate", "false"); + } + tempPanel.setAttribute("context", ""); + document.getElementById(CustomizableUI.AREA_NAVBAR).appendChild(tempPanel); + // If the view has a footer, set a convenience class on the panel. + tempPanel.classList.toggle("cui-widget-panelWithFooter", + viewNode.querySelector(".panel-subview-footer")); + + let multiView = document.createElement("panelmultiview"); + multiView.setAttribute("id", "customizationui-widget-multiview"); + multiView.setAttribute("nosubviews", "true"); + tempPanel.appendChild(multiView); + multiView.setAttribute("mainViewIsSubView", "true"); + multiView.setMainView(viewNode); + viewNode.classList.add("cui-widget-panelview"); + + let viewShown = false; + let panelRemover = () => { + viewNode.classList.remove("cui-widget-panelview"); + if (viewShown) { + CustomizableUI.removePanelCloseListeners(tempPanel); + tempPanel.removeEventListener("popuphidden", panelRemover); + + let evt = new CustomEvent("ViewHiding", {detail: viewNode}); + viewNode.dispatchEvent(evt); + } + aAnchor.open = false; + + this.multiView.appendChild(viewNode); + tempPanel.remove(); + }; + + // Emit the ViewShowing event so that the widget definition has a chance + // to lazily populate the subview with things. + let detail = { + blockers: new Set(), + addBlocker(aPromise) { + this.blockers.add(aPromise); + }, + }; + + let evt = new CustomEvent("ViewShowing", { bubbles: true, cancelable: true, detail }); + viewNode.dispatchEvent(evt); + + let cancel = evt.defaultPrevented; + if (detail.blockers.size) { + try { + let results = yield Promise.all(detail.blockers); + cancel = cancel || results.some(val => val === false); + } catch (e) { + Components.utils.reportError(e); + cancel = true; + } + } + + if (cancel) { + panelRemover(); + return; + } + + viewShown = true; + CustomizableUI.addPanelCloseListeners(tempPanel); + tempPanel.addEventListener("popuphidden", panelRemover); + + let iconAnchor = + document.getAnonymousElementByAttribute(aAnchor, "class", + "toolbarbutton-icon"); + + if (iconAnchor && aAnchor.id) { + iconAnchor.setAttribute("consumeanchor", aAnchor.id); + } + tempPanel.openPopup(iconAnchor || aAnchor, "bottomcenter topright"); + } + }), + + /** + * NB: The enable- and disableSingleSubviewPanelAnimations methods only + * affect the hiding/showing animations of single-subview panels (tempPanel + * in the showSubView method). + */ + disableSingleSubviewPanelAnimations: function() { + this._disableAnimations = true; + }, + + enableSingleSubviewPanelAnimations: function() { + this._disableAnimations = false; + }, + + onWidgetAfterDOMChange: function(aNode, aNextNode, aContainer, aWasRemoval) { + if (aContainer != this.contents) { + return; + } + if (aWasRemoval) { + aNode.removeAttribute("auto-hyphens"); + } + }, + + onWidgetBeforeDOMChange: function(aNode, aNextNode, aContainer, aIsRemoval) { + if (aContainer != this.contents) { + return; + } + if (!aIsRemoval && + (this.panel.state == "open" || + document.documentElement.hasAttribute("customizing"))) { + this._adjustLabelsForAutoHyphens(aNode); + } + }, + + /** + * Signal that we're about to make a lot of changes to the contents of the + * panels all at once. For performance, we ignore the mutations. + */ + beginBatchUpdate: function() { + this._ensureEventListenersAdded(); + this.multiView.ignoreMutations = true; + }, + + /** + * Signal that we're done making bulk changes to the panel. We now pay + * attention to mutations. This automatically synchronizes the multiview + * container with whichever view is displayed if the panel is open. + */ + endBatchUpdate: function(aReason) { + this._ensureEventListenersAdded(); + this.multiView.ignoreMutations = false; + }, + + _adjustLabelsForAutoHyphens: function(aNode) { + let toolbarButtons = aNode ? [aNode] : + this.contents.querySelectorAll(".toolbarbutton-1"); + for (let node of toolbarButtons) { + let label = node.getAttribute("label"); + if (!label) { + continue; + } + if (label.includes("\u00ad")) { + node.setAttribute("auto-hyphens", "off"); + } else { + node.removeAttribute("auto-hyphens"); + } + } + }, + + /** + * Sets the anchor node into the open or closed state, depending + * on the state of the panel. + */ + _updatePanelButton: function() { + this.menuButton.open = this.panel.state == "open" || + this.panel.state == "showing"; + }, + + _onHelpViewShow: function(aEvent) { + // Call global menu setup function + buildHelpMenu(); + + let helpMenu = document.getElementById("menu_HelpPopup"); + let items = this.getElementsByTagName("vbox")[0]; + let attrs = ["oncommand", "onclick", "label", "key", "disabled"]; + let NSXUL = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; + + // Remove all buttons from the view + while (items.firstChild) { + items.removeChild(items.firstChild); + } + + // Add the current set of menuitems of the Help menu to this view + let menuItems = Array.prototype.slice.call(helpMenu.getElementsByTagName("menuitem")); + let fragment = document.createDocumentFragment(); + for (let node of menuItems) { + if (node.hidden) + continue; + let button = document.createElementNS(NSXUL, "toolbarbutton"); + // Copy specific attributes from a menuitem of the Help menu + for (let attrName of attrs) { + if (!node.hasAttribute(attrName)) + continue; + button.setAttribute(attrName, node.getAttribute(attrName)); + } + button.setAttribute("class", "subviewbutton"); + fragment.appendChild(button); + } + items.appendChild(fragment); + }, + + _updateQuitTooltip: function() { + if (AppConstants.platform == "win") { + return; + } + + let tooltipId = AppConstants.platform == "macosx" ? + "quit-button.tooltiptext.mac" : + "quit-button.tooltiptext.linux2"; + + let brands = Services.strings.createBundle("chrome://branding/locale/brand.properties"); + let stringArgs = [brands.GetStringFromName("brandShortName")]; + + let key = document.getElementById("key_quitApplication"); + stringArgs.push(ShortcutUtils.prettifyShortcut(key)); + let tooltipString = CustomizableUI.getLocalizedProperty({x: tooltipId}, "x", stringArgs); + let quitButton = document.getElementById("PanelUI-quit"); + quitButton.setAttribute("tooltiptext", tooltipString); + }, + + _overlayScrollListenerBoundFn: null, + _overlayScrollListener: function(aMQL) { + ScrollbarSampler.resetSystemScrollbarWidth(); + this._scrollWidth = null; + }, +}; + +XPCOMUtils.defineConstant(this, "PanelUI", PanelUI); + +/** + * Gets the currently selected locale for display. + * @return the selected locale or "en-US" if none is selected + */ +function getLocale() { + try { + let chromeRegistry = Cc["@mozilla.org/chrome/chrome-registry;1"] + .getService(Ci.nsIXULChromeRegistry); + return chromeRegistry.getSelectedLocale("browser"); + } catch (ex) { + return "en-US"; + } +} |