tor-browser

browser-pageActions.js (30797B)

---

/* 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/. */

var BrowserPageActions = {
 _panelNode: null,
 /**
  * The main page action button in the urlbar (DOM node)
  */
 get mainButtonNode() {
   delete this.mainButtonNode;
   return (this.mainButtonNode = document.getElementById("pageActionButton"));
 },

 /**
  * The main page action panel DOM node (DOM node)
  */
 get panelNode() {
   // Lazy load the page action panel the first time we need to display it
   if (!this._panelNode) {
     this.initializePanel();
   }
   delete this.panelNode;
   return (this.panelNode = this._panelNode);
 },

 /**
  * The panelmultiview node in the main page action panel (DOM node)
  */
 get multiViewNode() {
   delete this.multiViewNode;
   return (this.multiViewNode = document.getElementById(
     "pageActionPanelMultiView"
   ));
 },

 /**
  * The main panelview node in the main page action panel (DOM node)
  */
 get mainViewNode() {
   delete this.mainViewNode;
   return (this.mainViewNode = document.getElementById(
     "pageActionPanelMainView"
   ));
 },

 /**
  * The vbox body node in the main panelview node (DOM node)
  */
 get mainViewBodyNode() {
   delete this.mainViewBodyNode;
   return (this.mainViewBodyNode = this.mainViewNode.querySelector(
     ".panel-subview-body"
   ));
 },

 /**
  * Inits.  Call to init.
  */
 init() {
   this.placeAllActionsInUrlbar();
   this._onPanelShowing = this._onPanelShowing.bind(this);
 },

 _onPanelShowing() {
   this.initializePanel();
   for (let action of PageActions.actionsInPanel(window)) {
     let buttonNode = this.panelButtonNodeForActionID(action.id);
     action.onShowingInPanel(buttonNode);
   }
 },

 placeLazyActionsInPanel() {
   let actions = this._actionsToLazilyPlaceInPanel;
   this._actionsToLazilyPlaceInPanel = [];
   for (let action of actions) {
     this._placeActionInPanelNow(action);
   }
 },

 // Actions placed in the panel aren't actually placed until the panel is
 // subsequently opened.
 _actionsToLazilyPlaceInPanel: [],

 /**
  * Places all registered actions in the urlbar.
  */
 placeAllActionsInUrlbar() {
   let urlbarActions = PageActions.actionsInUrlbar(window);
   for (let action of urlbarActions) {
     this.placeActionInUrlbar(action);
   }
   this._updateMainButtonAttributes();
 },

 /**
  * Initializes the panel if necessary.
  */
 initializePanel() {
   // Lazy load the page action panel the first time we need to display it
   if (!this._panelNode) {
     let template = document.getElementById("pageActionPanelTemplate");
     template.replaceWith(template.content);
     this._panelNode = document.getElementById("pageActionPanel");
     this._panelNode.addEventListener("popupshowing", this._onPanelShowing);
   }

   for (let action of PageActions.actionsInPanel(window)) {
     this.placeActionInPanel(action);
   }
   this.placeLazyActionsInPanel();
 },

 /**
  * Adds or removes as necessary DOM nodes for the given action.
  *
  * @param  action (PageActions.Action, required)
  *         The action to place.
  */
 placeAction(action) {
   this.placeActionInPanel(action);
   this.placeActionInUrlbar(action);
   this._updateMainButtonAttributes();
 },

 /**
  * Adds or removes as necessary DOM nodes for the action in the panel.
  *
  * @param  action (PageActions.Action, required)
  *         The action to place.
  */
 placeActionInPanel(action) {
   if (this._panelNode && this.panelNode.state != "closed") {
     this._placeActionInPanelNow(action);
   } else {
     // This method may be called for the same action more than once
     // (e.g. when an extension does call pageAction.show/hidden to
     // enable or disable its own pageAction and we will have to
     // update the urlbar overflow panel accordingly).
     //
     // Ensure we don't add the same actions more than once (otherwise we will
     // not remove all the entries in _removeActionFromPanel).
     if (
       this._actionsToLazilyPlaceInPanel.findIndex(a => a.id == action.id) >= 0
     ) {
       return;
     }
     // Lazily place the action in the panel the next time it opens.
     this._actionsToLazilyPlaceInPanel.push(action);
   }
 },

 _placeActionInPanelNow(action) {
   if (action.shouldShowInPanel(window)) {
     this._addActionToPanel(action);
   } else {
     this._removeActionFromPanel(action);
   }
 },

 _addActionToPanel(action) {
   let id = this.panelButtonNodeIDForActionID(action.id);
   let node = document.getElementById(id);
   if (node) {
     return;
   }
   this._maybeNotifyBeforePlacedInWindow(action);
   node = this._makePanelButtonNodeForAction(action);
   node.id = id;
   let insertBeforeNode = this._getNextNode(action, false);
   this.mainViewBodyNode.insertBefore(node, insertBeforeNode);
   this.updateAction(action, null, {
     panelNode: node,
   });
   this._updateActionDisabledInPanel(action, node);
   action.onPlacedInPanel(node);
   this._addOrRemoveSeparatorsInPanel();
 },

 _removeActionFromPanel(action) {
   let lazyIndex = this._actionsToLazilyPlaceInPanel.findIndex(
     a => a.id == action.id
   );
   if (lazyIndex >= 0) {
     this._actionsToLazilyPlaceInPanel.splice(lazyIndex, 1);
   }
   let node = this.panelButtonNodeForActionID(action.id);
   if (!node) {
     return;
   }
   node.remove();
   if (action.getWantsSubview(window)) {
     let panelViewNodeID = this._panelViewNodeIDForActionID(action.id, false);
     let panelViewNode = document.getElementById(panelViewNodeID);
     if (panelViewNode) {
       panelViewNode.remove();
     }
   }
   this._addOrRemoveSeparatorsInPanel();
 },

 _addOrRemoveSeparatorsInPanel() {
   let actions = PageActions.actionsInPanel(window);
   let ids = [
     PageActions.ACTION_ID_BUILT_IN_SEPARATOR,
     PageActions.ACTION_ID_TRANSIENT_SEPARATOR,
   ];
   for (let id of ids) {
     let sep = actions.find(a => a.id == id);
     if (sep) {
       this._addActionToPanel(sep);
     } else {
       let node = this.panelButtonNodeForActionID(id);
       if (node) {
         node.remove();
       }
     }
   }
 },

 _updateMainButtonAttributes() {
   this.mainButtonNode.toggleAttribute(
     "multiple-children",
     PageActions.actions.length > 1
   );
 },

 /**
  * Returns the node before which an action's node should be inserted.
  *
  * @param  action (PageActions.Action, required)
  *         The action that will be inserted.
  * @param  forUrlbar (bool, required)
  *         True if you're inserting into the urlbar, false if you're inserting
  *         into the panel.
  * @return (DOM node, maybe null) The DOM node before which to insert the
  *         given action.  Null if the action should be inserted at the end.
  */
 _getNextNode(action, forUrlbar) {
   let actions = forUrlbar
     ? PageActions.actionsInUrlbar(window)
     : PageActions.actionsInPanel(window);
   let index = actions.findIndex(a => a.id == action.id);
   if (index < 0) {
     return null;
   }
   for (let i = index + 1; i < actions.length; i++) {
     let node = forUrlbar
       ? this.urlbarButtonNodeForActionID(actions[i].id)
       : this.panelButtonNodeForActionID(actions[i].id);
     if (node) {
       return node;
     }
   }
   return null;
 },

 _maybeNotifyBeforePlacedInWindow(action) {
   if (!this._isActionPlacedInWindow(action)) {
     action.onBeforePlacedInWindow(window);
   }
 },

 _isActionPlacedInWindow(action) {
   if (this.panelButtonNodeForActionID(action.id)) {
     return true;
   }
   let urlbarNode = this.urlbarButtonNodeForActionID(action.id);
   return urlbarNode && !urlbarNode.hidden;
 },

 _makePanelButtonNodeForAction(action) {
   if (action.__isSeparator) {
     let node = document.createXULElement("toolbarseparator");
     return node;
   }
   let buttonNode = document.createXULElement("toolbarbutton");
   buttonNode.classList.add(
     "subviewbutton",
     "subviewbutton-iconic",
     "pageAction-panel-button"
   );
   if (action.isBadged) {
     buttonNode.setAttribute("badged", "true");
   }
   buttonNode.setAttribute("actionid", action.id);
   buttonNode.addEventListener("command", event => {
     this.doCommandForAction(action, event, buttonNode);
   });
   return buttonNode;
 },

 _makePanelViewNodeForAction(action, forUrlbar) {
   let panelViewNode = document.createXULElement("panelview");
   panelViewNode.id = this._panelViewNodeIDForActionID(action.id, forUrlbar);
   panelViewNode.classList.add("PanelUI-subView");
   let bodyNode = document.createXULElement("vbox");
   bodyNode.id = panelViewNode.id + "-body";
   bodyNode.classList.add("panel-subview-body");
   panelViewNode.appendChild(bodyNode);
   return panelViewNode;
 },

 /**
  * Shows or hides a panel for an action.  You can supply your own panel;
  * otherwise one is created.
  *
  * @param  action (PageActions.Action, required)
  *         The action for which to toggle the panel.  If the action is in the
  *         urlbar, then the panel will be anchored to it.  Otherwise, a
  *         suitable anchor will be used.
  * @param  panelNode (DOM node, optional)
  *         The panel to use.  This method takes a hands-off approach with
  *         regard to your panel in terms of attributes, styling, etc.
  * @param  event (DOM event, optional)
  *         The event which triggered this panel.
  */
 togglePanelForAction(action, panelNode = null, event = null) {
   let aaPanelNode = this.activatedActionPanelNode;
   if (panelNode) {
     // Note that this particular code path will not prevent the panel from
     // opening later if PanelMultiView.showPopup was called but the panel has
     // not been opened yet.
     if (panelNode.state != "closed") {
       PanelMultiView.hidePopup(panelNode);
       return;
     }
     if (aaPanelNode) {
       PanelMultiView.hidePopup(aaPanelNode);
     }
   } else if (aaPanelNode) {
     PanelMultiView.hidePopup(aaPanelNode);
     return;
   } else {
     panelNode = this._makeActivatedActionPanelForAction(action);
   }

   // Hide the main panel before showing the action's panel.
   PanelMultiView.hidePopup(this.panelNode);

   let anchorNode = this.panelAnchorNodeForAction(action);
   PanelMultiView.openPopup(panelNode, anchorNode, {
     position: "bottomright topright",
     triggerEvent: event,
   }).catch(console.error);
 },

 _makeActivatedActionPanelForAction(action) {
   let panelNode = document.createXULElement("panel");
   panelNode.id = this._activatedActionPanelID;
   panelNode.classList.add("cui-widget-panel", "panel-no-padding");
   panelNode.setAttribute("actionID", action.id);
   panelNode.setAttribute("role", "group");
   panelNode.setAttribute("type", "arrow");
   panelNode.setAttribute("flip", "slide");
   panelNode.setAttribute("noautofocus", "true");
   panelNode.setAttribute("tabspecific", "true");

   let panelViewNode = null;
   let iframeNode = null;

   if (action.getWantsSubview(window)) {
     let multiViewNode = document.createXULElement("panelmultiview");
     panelViewNode = this._makePanelViewNodeForAction(action, true);
     multiViewNode.setAttribute("mainViewId", panelViewNode.id);
     multiViewNode.appendChild(panelViewNode);
     panelNode.appendChild(multiViewNode);
   } else if (action.wantsIframe) {
     iframeNode = document.createXULElement("iframe");
     iframeNode.setAttribute("type", "content");
     panelNode.appendChild(iframeNode);
   }

   let popupSet = document.getElementById("mainPopupSet");
   popupSet.appendChild(panelNode);
   panelNode.addEventListener(
     "popuphidden",
     () => {
       PanelMultiView.removePopup(panelNode);
     },
     { once: true }
   );

   if (iframeNode) {
     panelNode.addEventListener(
       "popupshowing",
       () => {
         action.onIframeShowing(iframeNode, panelNode);
       },
       { once: true }
     );
     panelNode.addEventListener(
       "popupshown",
       () => {
         iframeNode.focus();
       },
       { once: true }
     );
     panelNode.addEventListener(
       "popuphiding",
       () => {
         action.onIframeHiding(iframeNode, panelNode);
       },
       { once: true }
     );
     panelNode.addEventListener(
       "popuphidden",
       () => {
         action.onIframeHidden(iframeNode, panelNode);
       },
       { once: true }
     );
   }

   if (panelViewNode) {
     action.onSubviewPlaced(panelViewNode);
     panelNode.addEventListener(
       "popupshowing",
       () => {
         action.onSubviewShowing(panelViewNode);
       },
       { once: true }
     );
   }

   return panelNode;
 },

 /**
  * Returns the node in the urlbar to which popups for the given action should
  * be anchored.  If the action is null, a sensible anchor is returned.
  *
  * @param  action (PageActions.Action, optional)
  *         The action you want to anchor.
  * @param  event (DOM event, optional)
  *         This is used to display the feedback panel on the right node when
  *         the command can be invoked from both the main panel and another
  *         location, such as an activated action panel or a button.
  * @return (DOM node) The node to which the action should be anchored.
  */
 panelAnchorNodeForAction(action, event) {
   if (event && event.target.closest("panel") == this.panelNode) {
     return this.mainButtonNode;
   }

   // Try each of the following nodes in order, using the first that's visible.
   let potentialAnchorNodes = [
     document.getElementById(action?.anchorIDOverride),
     document.getElementById(
       action && this.urlbarButtonNodeIDForActionID(action.id)
     ),
     document.getElementById(this.mainButtonNode.id),
     document.getElementById("identity-icon"),
   ];
   for (let node of potentialAnchorNodes) {
     if (node && !node.hidden) {
       let bounds = window.windowUtils.getBoundsWithoutFlushing(node);
       if (bounds.height > 0 && bounds.width > 0) {
         return node;
       }
     }
   }
   let id = action ? action.id : "<no action>";
   throw new Error(`PageActions: No anchor node for ${id}`);
 },

 get activatedActionPanelNode() {
   return document.getElementById(this._activatedActionPanelID);
 },

 get _activatedActionPanelID() {
   return "pageActionActivatedActionPanel";
 },

 /**
  * Adds or removes as necessary a DOM node for the given action in the urlbar.
  *
  * @param  action (PageActions.Action, required)
  *         The action to place.
  */
 placeActionInUrlbar(action) {
   let id = this.urlbarButtonNodeIDForActionID(action.id);
   let node = document.getElementById(id);

   if (!action.shouldShowInUrlbar(window)) {
     if (node) {
       if (action.__urlbarNodeInMarkup) {
         node.hidden = true;
       } else {
         node.remove();
       }
     }
     return;
   }

   let newlyPlaced = false;
   if (action.__urlbarNodeInMarkup) {
     this._maybeNotifyBeforePlacedInWindow(action);
     // Allow the consumer to add the node in response to the
     // onBeforePlacedInWindow notification.
     node = document.getElementById(id);
     if (!node) {
       return;
     }
     newlyPlaced = node.hidden;
     node.hidden = false;
   } else if (!node) {
     newlyPlaced = true;
     this._maybeNotifyBeforePlacedInWindow(action);
     node = this._makeUrlbarButtonNode(action);
     node.id = id;
   }

   if (!newlyPlaced) {
     return;
   }

   let insertBeforeNode = this._getNextNode(action, true);
   this.mainButtonNode.parentNode.insertBefore(node, insertBeforeNode);
   this.updateAction(action, null, {
     urlbarNode: node,
   });
   action.onPlacedInUrlbar(node);
 },

 _makeUrlbarButtonNode(action) {
   let buttonNode = document.createXULElement("hbox");
   buttonNode.classList.add("urlbar-page-action");
   if (action.extensionID) {
     buttonNode.classList.add("urlbar-addon-page-action");
   }
   buttonNode.setAttribute("actionid", action.id);
   buttonNode.setAttribute("role", "button");
   let commandHandler = event => {
     this.doCommandForAction(action, event, buttonNode);
   };
   buttonNode.addEventListener("click", commandHandler);
   buttonNode.addEventListener("keypress", commandHandler);

   let imageNode = document.createXULElement("image");
   imageNode.classList.add("urlbar-icon");
   buttonNode.appendChild(imageNode);
   return buttonNode;
 },

 /**
  * Removes all the DOM nodes of the given action.
  *
  * @param  action (PageActions.Action, required)
  *         The action to remove.
  */
 removeAction(action) {
   this._removeActionFromPanel(action);
   this._removeActionFromUrlbar(action);
   action.onRemovedFromWindow(window);
   this._updateMainButtonAttributes();
 },

 _removeActionFromUrlbar(action) {
   let node = this.urlbarButtonNodeForActionID(action.id);
   if (node) {
     node.remove();
   }
 },

 /**
  * Updates the DOM nodes of an action to reflect either a changed property or
  * all properties.
  *
  * @param  action (PageActions.Action, required)
  *         The action to update.
  * @param  propertyName (string, optional)
  *         The name of the property to update.  If not given, then DOM nodes
  *         will be updated to reflect the current values of all properties.
  * @param  opts (object, optional)
  *         - panelNode: The action's node in the panel to update.
  *         - urlbarNode: The action's node in the urlbar to update.
  *         - value: If a property name is passed, this argument may contain
  *           its current value, in order to prevent a further look-up.
  */
 updateAction(action, propertyName = null, opts = {}) {
   let anyNodeGiven = "panelNode" in opts || "urlbarNode" in opts;
   let panelNode = anyNodeGiven
     ? opts.panelNode || null
     : this.panelButtonNodeForActionID(action.id);
   let urlbarNode = anyNodeGiven
     ? opts.urlbarNode || null
     : this.urlbarButtonNodeForActionID(action.id);
   let value = opts.value || undefined;
   if (propertyName) {
     this[this._updateMethods[propertyName]](
       action,
       panelNode,
       urlbarNode,
       value
     );
   } else {
     for (let name of ["iconURL", "title", "tooltip", "wantsSubview"]) {
       this[this._updateMethods[name]](action, panelNode, urlbarNode, value);
     }
   }
 },

 _updateMethods: {
   disabled: "_updateActionDisabled",
   iconURL: "_updateActionIconURL",
   title: "_updateActionLabeling",
   tooltip: "_updateActionTooltip",
   wantsSubview: "_updateActionWantsSubview",
 },

 _updateActionDisabled(
   action,
   panelNode,
   urlbarNode,
   disabled = action.getDisabled(window)
 ) {
   // Extension page actions should behave like a transient action,
   // and be hidden from the urlbar overflow menu if they
   // are disabled (as in the urlbar when the overflow menu isn't available)
   //
   // TODO(Bug 1704139): as a follow up we may look into just set on all
   // extension pageActions `_transient: true`, at least once we sunset
   // the proton preference and we don't need the pre-Proton behavior anymore,
   // and remove this special case.
   const isProtonExtensionAction = action.extensionID;

   if (action.__transient || isProtonExtensionAction) {
     this.placeActionInPanel(action);
   } else {
     this._updateActionDisabledInPanel(action, panelNode, disabled);
   }
   this.placeActionInUrlbar(action);
 },

 _updateActionDisabledInPanel(
   action,
   panelNode,
   disabled = action.getDisabled(window)
 ) {
   if (panelNode) {
     if (disabled) {
       panelNode.setAttribute("disabled", "true");
     } else {
       panelNode.removeAttribute("disabled");
     }
   }
 },

 _updateActionIconURL(
   action,
   panelNode,
   urlbarNode,
   properties = action.getIconProperties(window)
 ) {
   for (let [prop, value] of Object.entries(properties)) {
     if (panelNode) {
       panelNode.style.setProperty(prop, value);
     }
     if (urlbarNode) {
       urlbarNode.style.setProperty(prop, value);
     }
   }
 },

 _updateActionLabeling(
   action,
   panelNode,
   urlbarNode,
   title = action.getTitle(window)
 ) {
   if (panelNode) {
     panelNode.setAttribute("label", title);
   }
   if (urlbarNode) {
     urlbarNode.setAttribute("aria-label", title);
     // tooltiptext falls back to the title, so update it too if necessary.
     let tooltip = action.getTooltip(window);
     if (!tooltip) {
       urlbarNode.setAttribute("tooltiptext", title);
     }
   }
 },

 _updateActionTooltip(
   action,
   panelNode,
   urlbarNode,
   tooltip = action.getTooltip(window)
 ) {
   if (urlbarNode) {
     if (!tooltip) {
       tooltip = action.getTitle(window);
     }
     if (tooltip) {
       urlbarNode.setAttribute("tooltiptext", tooltip);
     }
   }
 },

 _updateActionWantsSubview(
   action,
   panelNode,
   urlbarNode,
   wantsSubview = action.getWantsSubview(window)
 ) {
   if (!panelNode) {
     return;
   }
   let panelViewID = this._panelViewNodeIDForActionID(action.id, false);
   let panelViewNode = document.getElementById(panelViewID);
   panelNode.classList.toggle("subviewbutton-nav", wantsSubview);
   if (!wantsSubview) {
     if (panelViewNode) {
       panelViewNode.remove();
     }
     return;
   }
   if (!panelViewNode) {
     panelViewNode = this._makePanelViewNodeForAction(action, false);
     this.multiViewNode.appendChild(panelViewNode);
     action.onSubviewPlaced(panelViewNode);
   }
 },

 doCommandForAction(action, event, buttonNode) {
   if (event && event.type == "click" && event.button != 0) {
     return;
   }
   if (event && event.type == "keypress") {
     if (event.key != " " && event.key != "Enter") {
       return;
     }
     event.stopPropagation();
   }
   // If we're in the panel, open a subview inside the panel:
   // Note that we can't use this.panelNode.contains(buttonNode) here
   // because of XBL boundaries breaking Element.contains.
   if (
     action.getWantsSubview(window) &&
     buttonNode &&
     buttonNode.closest("panel") == this.panelNode
   ) {
     let panelViewNodeID = this._panelViewNodeIDForActionID(action.id, false);
     let panelViewNode = document.getElementById(panelViewNodeID);
     action.onSubviewShowing(panelViewNode);
     this.multiViewNode.showSubView(panelViewNode, buttonNode);
     return;
   }
   // Otherwise, hide the main popup in case it was open:
   PanelMultiView.hidePopup(this.panelNode);

   let aaPanelNode = this.activatedActionPanelNode;
   if (!aaPanelNode || aaPanelNode.getAttribute("actionID") != action.id) {
     action.onCommand(event, buttonNode);
   }
   if (action.getWantsSubview(window) || action.wantsIframe) {
     this.togglePanelForAction(action, null, event);
   }
 },

 /**
  * Returns the action for a node.
  *
  * @param  node (DOM node, required)
  *         A button DOM node, either one that's shown in the page action panel
  *         or the urlbar.
  * @return (PageAction.Action) If the node has a related action and the action
  *         is not a separator, then the action is returned.  Otherwise null is
  *         returned.
  */
 actionForNode(node) {
   if (!node) {
     return null;
   }
   let actionID = this._actionIDForNodeID(node.id);
   let action = PageActions.actionForID(actionID);
   if (!action) {
     // When a page action is clicked, `node` will be an ancestor of
     // a node corresponding to an action. `node` will be the page action node
     // itself when a page action is selected with the keyboard. That's because
     // the semantic meaning of page action is on an hbox that contains an
     // <image>.
     for (let n = node.parentNode; n && !action; n = n.parentNode) {
       if (n.id == "page-action-buttons" || n.localName == "panelview") {
         // We reached the page-action-buttons or panelview container.
         // Stop looking; no action was found.
         break;
       }
       actionID = this._actionIDForNodeID(n.id);
       action = PageActions.actionForID(actionID);
     }
   }
   return action && !action.__isSeparator ? action : null;
 },

 /**
  * The given action's top-level button in the main panel.
  *
  * @param  actionID (string, required)
  *         The action ID.
  * @return (DOM node) The action's button in the main panel.
  */
 panelButtonNodeForActionID(actionID) {
   return document.getElementById(this.panelButtonNodeIDForActionID(actionID));
 },

 /**
  * The ID of the given action's top-level button in the main panel.
  *
  * @param  actionID (string, required)
  *         The action ID.
  * @return (string) The ID of the action's button in the main panel.
  */
 panelButtonNodeIDForActionID(actionID) {
   return `pageAction-panel-${actionID}`;
 },

 /**
  * The given action's button in the urlbar.
  *
  * @param  actionID (string, required)
  *         The action ID.
  * @return (DOM node) The action's urlbar button node.
  */
 urlbarButtonNodeForActionID(actionID) {
   return document.getElementById(
     this.urlbarButtonNodeIDForActionID(actionID)
   );
 },

 /**
  * The ID of the given action's button in the urlbar.
  *
  * @param  actionID (string, required)
  *         The action ID.
  * @return (string) The ID of the action's urlbar button node.
  */
 urlbarButtonNodeIDForActionID(actionID) {
   let action = PageActions.actionForID(actionID);
   if (action && action.urlbarIDOverride) {
     return action.urlbarIDOverride;
   }
   return `pageAction-urlbar-${actionID}`;
 },

 // The ID of the given action's panelview.
 _panelViewNodeIDForActionID(actionID, forUrlbar) {
   let placementID = forUrlbar ? "urlbar" : "panel";
   return `pageAction-${placementID}-${actionID}-subview`;
 },

 // The ID of the action corresponding to the given top-level button in the
 // panel or button in the urlbar.
 _actionIDForNodeID(nodeID) {
   if (!nodeID) {
     return null;
   }
   let match = nodeID.match(/^pageAction-(?:panel|urlbar)-(.+)$/);
   if (match) {
     return match[1];
   }
   // Check all the urlbar ID overrides.
   for (let action of PageActions.actions) {
     if (action.urlbarIDOverride && action.urlbarIDOverride == nodeID) {
       return action.id;
     }
   }
   return null;
 },

 /**
  * Call this when the main page action button in the urlbar is activated.
  *
  * @param  event (DOM event, required)
  *         The click or whatever event.
  */
 mainButtonClicked(event) {
   event.stopPropagation();
   if (
     // On mac, ctrl-click will send a context menu event from the widget, so
     // we don't want to bring up the panel when ctrl key is pressed.
     (event.type == "mousedown" &&
       (event.button != 0 ||
         (AppConstants.platform == "macosx" && event.ctrlKey))) ||
     (event.type == "keypress" &&
       event.charCode != KeyEvent.DOM_VK_SPACE &&
       event.keyCode != KeyEvent.DOM_VK_RETURN)
   ) {
     return;
   }

   // If the activated-action panel is open and anchored to the main button,
   // close it.
   let panelNode = this.activatedActionPanelNode;
   if (panelNode && panelNode.anchorNode.id == this.mainButtonNode.id) {
     PanelMultiView.hidePopup(panelNode);
     return;
   }

   if (this.panelNode.state == "open") {
     PanelMultiView.hidePopup(this.panelNode);
   } else if (this.panelNode.state == "closed") {
     this.showPanel(event);
   }
 },

 /**
  * Show the page action panel
  *
  * @param  event (DOM event, optional)
  *         The event that triggers showing the panel. (such as a mouse click,
  *         if the user clicked something to open the panel)
  */
 showPanel(event = null) {
   this.panelNode.hidden = false;
   PanelMultiView.openPopup(this.panelNode, this.mainButtonNode, {
     position: "bottomright topright",
     triggerEvent: event,
   }).catch(console.error);
 },

 /**
  * Call this on the context menu's popupshowing event.
  *
  * @param  event (DOM event, required)
  *         The popupshowing event.
  * @param  popup (DOM node, required)
  *         The context menu popup DOM node.
  */
 async onContextMenuShowing(event, popup) {
   if (event.target != popup) {
     return;
   }

   let action = this.actionForNode(popup.triggerNode);
   // Only extension actions provide a context menu.
   if (!action?.extensionID) {
     this._contextAction = null;
     event.preventDefault();
     return;
   }
   this._contextAction = action;

   let removeExtension = popup.querySelector(".removeExtensionItem");
   let { extensionID } = this._contextAction;
   let addon = extensionID && (await AddonManager.getAddonByID(extensionID));
   removeExtension.hidden = !addon;
   if (addon) {
     removeExtension.disabled = !(
       addon.permissions & AddonManager.PERM_CAN_UNINSTALL
     );
   }
 },

 /**
  * Call this from the menu item in the context menu that opens about:addons.
  */
 openAboutAddonsForContextAction() {
   if (!this._contextAction) {
     return;
   }
   let action = this._contextAction;
   this._contextAction = null;

   let viewID = "addons://detail/" + encodeURIComponent(action.extensionID);
   window.BrowserAddonUI.openAddonsMgr(viewID);
 },

 /**
  * Call this from the menu item in the context menu that removes an add-on.
  */
 removeExtensionForContextAction() {
   if (!this._contextAction) {
     return;
   }
   let action = this._contextAction;
   this._contextAction = null;

   BrowserAddonUI.removeAddon(action.extensionID, "pageAction");
 },

 _contextAction: null,

 /**
  * Call this on tab switch or when the current <browser>'s location changes.
  */
 onLocationChange() {
   for (let action of PageActions.actions) {
     action.onLocationChange(window);
   }
 },
};

// built-in actions below //////////////////////////////////////////////////////

// bookmark
BrowserPageActions.bookmark = {
 onShowingInPanel(buttonNode) {
   if (buttonNode.label == "null") {
     BookmarkingUI.updateBookmarkPageMenuItem();
   }
 },

 onCommand(event) {
   PanelMultiView.hidePopup(BrowserPageActions.panelNode);
   BookmarkingUI.onStarCommand(event);
 },
};