Bug 1519577 Mark badged page action toolbarbuttons before inserting r=Gijs
authorAndrew Swan <aswan@mozilla.com>
Tue, 14 May 2019 20:39:38 -0700
changeset 474977 595c3065e9ac64ed1d4ada38c3a83c6ba2a0ff91
parent 474976 82d77e63f4d3971ee341c6a49daacc6524e9d80c
child 474978 c8e9b6a81194dff2d37b4f67d23a419fd4587e49
push id113185
push useraswan@mozilla.com
push dateWed, 22 May 2019 23:25:35 +0000
treeherdermozilla-inbound@c8e9b6a81194 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1519577
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1519577 Mark badged page action toolbarbuttons before inserting r=Gijs The "add search engine" page action wants to use badged toolbarbuttons, but it does this by adding the "badged-button" class (which changes the XBL binding) after the button has already been created and added to the DOM. To avoid having to switch between non-badged and badged buttons when toolbarbutton is converted to custom elements, add a property to page actions so that the badged status can be determined when the element is created. Differential Revision: https://phabricator.services.mozilla.com/D31940
browser/base/content/browser-pageActions.js
browser/modules/PageActions.jsm
--- a/browser/base/content/browser-pageActions.js
+++ b/browser/base/content/browser-pageActions.js
@@ -234,16 +234,19 @@ var BrowserPageActions = {
       return node;
     }
     let buttonNode = document.createXULElement("toolbarbutton");
     buttonNode.classList.add(
       "subviewbutton",
       "subviewbutton-iconic",
       "pageAction-panel-button"
     );
+    if (action.isBadged) {
+      buttonNode.classList.add("badged-button");
+    }
     buttonNode.setAttribute("actionid", action.id);
     buttonNode.addEventListener("command", event => {
       this.doCommandForAction(action, event, buttonNode);
     });
     return buttonNode;
   },
 
   _makePanelViewNodeForAction(action, forUrlbar) {
@@ -1121,30 +1124,29 @@ BrowserPageActions.addSearchEngine = {
     this.action.setTitle(title, window);
     this.action.setIconURL(this.engines[0].icon, window);
   },
 
   onShowingInPanel() {
     this._updateTitleAndIcon();
     this.action.setWantsSubview(this.engines.length > 1, window);
     let button = BrowserPageActions.panelButtonNodeForActionID(this.action.id);
-    button.classList.add("badged-button");
     button.setAttribute("image", this.engines[0].icon);
     button.setAttribute("uri", this.engines[0].uri);
     button.setAttribute("crop", "center");
   },
 
   onSubviewShowing(panelViewNode) {
     let body = panelViewNode.querySelector(".panel-subview-body");
     while (body.firstChild) {
       body.firstChild.remove();
     }
     for (let engine of this.engines) {
       let button = document.createXULElement("toolbarbutton");
-      button.classList.add("subviewbutton", "subviewbutton-iconic");
+      button.classList.add("subviewbutton", "subviewbutton-iconic", "badged-button");
       button.setAttribute("label", engine.title);
       button.setAttribute("image", engine.icon);
       button.setAttribute("uri", engine.uri);
       button.addEventListener("command", event => {
         let panelNode = panelViewNode.closest("panel");
         PanelMultiView.hidePopup(panelNode);
         this._installEngine(button.getAttribute("uri"),
                             button.getAttribute("image"));
--- a/browser/modules/PageActions.jsm
+++ b/browser/modules/PageActions.jsm
@@ -450,16 +450,19 @@ var PageActions = {
  * @param extensionID (string, optional)
  *        If the action lives in an extension, pass its ID.
  * @param iconURL (string or object, optional)
  *        The URL string of the action's icon.  Usually you want to specify an
  *        icon in CSS, but this option is useful if that would be a pain for
  *        some reason.  You can also pass an object that maps pixel sizes to
  *        URLs, like { 16: url16, 32: url32 }.  The best size for the user's
  *        screen will be used.
+ * @param isBadged (bool, optional)
+ *        If true, the toolbarbutton for this action will get the
+ *        "badged-button" class.
  * @param onBeforePlacedInWindow (function, optional)
  *        Called before the action is placed in the window:
  *        onBeforePlacedInWindow(window)
  *        * window: The window that the action will be placed in.
  * @param onCommand (function, optional)
  *        Called when the action is clicked, but only if it has neither a
  *        subview nor an iframe:
  *        onCommand(event, buttonNode)
@@ -532,16 +535,17 @@ var PageActions = {
 function Action(options) {
   setProperties(this, options, {
     id: true,
     title: !options._isSeparator,
     anchorIDOverride: false,
     disabled: false,
     extensionID: false,
     iconURL: false,
+    isBadged: false,
     labelForHistogram: false,
     onBeforePlacedInWindow: false,
     onCommand: false,
     onIframeHiding: false,
     onIframeHidden: false,
     onIframeShowing: false,
     onLocationChange: false,
     onPlacedInPanel: false,
@@ -811,16 +815,20 @@ Action.prototype = {
 
   /**
    * True if the action is shown in an iframe (bool)
    */
   get wantsIframe() {
     return this._wantsIframe || false;
   },
 
+  get isBadged() {
+    return this._isBadged || false;
+  },
+
   get labelForHistogram() {
     // The histogram label value has a length limit of 20 and restricted to a
     // pattern. See MAX_LABEL_LENGTH and CPP_IDENTIFIER_PATTERN in
     // toolkit/components/telemetry/parse_histograms.py
     return this._labelForHistogram
       || this._id.replace(/_\w{1}/g, match => match[1].toUpperCase()).substr(0, 20);
   },
 
@@ -1179,16 +1187,17 @@ var gBuiltInActions = [
     },
   },
 
   // add search engine
   {
     id: "addSearchEngine",
     // The title is set in browser-pageActions.js.
     title: "",
+    isBadged: true,
     _transient: true,
     onShowingInPanel(buttonNode) {
       browserPageActions(buttonNode).addSearchEngine.onShowingInPanel();
     },
     onCommand(event, buttonNode) {
       browserPageActions(buttonNode).addSearchEngine
         .onCommand(event, buttonNode);
     },