Bug 1639925 - implement 'wrap' support in toolbarbuttons on a single element instead of 2, r=bgrins

This unifies toolbarbutton-text and toolbarbutton-multiline-text. We now
always use toolbarbutton-text for the button's text, but can either use
textContent or the value attribute, depending on the value of the wrap
attribute. This reduces DOM size and consumer complexity, at the cost of
adding some logic to toolbarbutton.js itself.

Differential Revision: https://phabricator.services.mozilla.com/D76383

browser/themes/shared/customizableui/panelUI.inc.css

@@ -365,7 +365,7 @@ panelview[id^=PanelUI-webext-] {
 }
 
 panelview:not([mainview]) .toolbarbutton-text,
-.cui-widget-panel toolbarbutton:not([wrap]) > .toolbarbutton-text,
+.cui-widget-panel .toolbarbutton-text,
 #overflowMenu-customize-button > .toolbarbutton-text {
   text-align: start;
   display: -moz-box;
@@ -1021,7 +1021,6 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
   background-color: @appmenuWarningBackgroundColorActiveBrightText@;
 }
 
-#customization-palette .toolbarbutton-multiline-text,
 #customization-palette .toolbarbutton-text {
   display: none;
 }
@@ -1084,12 +1083,6 @@ panelview .toolbarbutton-1,
   padding-inline-start: 8px; /* See '.subviewbutton-iconic > .toolbarbutton-text' rule above. */
 }
 
-.panel-banner-item > .toolbarbutton-multiline-text {
-  margin: 0;
-  padding: 0;
-  padding-inline-start: 8px; /* See '.subviewbutton-iconic > .toolbarbutton-text' rule above. */
-}
-
 .subviewbutton-iconic > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
@@ -1746,7 +1739,7 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
 }
 
 .subviewbutton-back > .toolbarbutton-text {
-  /* !important to override .cui-widget-panel toolbarbutton:not([wrap]) > .toolbarbutton-text
+  /* !important to override .cui-widget-panel .toolbarbutton-text
    * selector further down. */
   display: none !important;
 }

toolkit/content/widgets/toolbarbutton.js

@@ -32,11 +32,12 @@
 
   class MozToolbarbutton extends MozElements.ButtonBase {
     static get inheritedAttributes() {
+      // Note: if you remove 'wrap' or 'label' from the inherited attributes,
+      // you'll need to add them to observedAttributes.
       return {
         ".toolbarbutton-icon":
           "validate,src=image,label,type,consumeanchor,triggeringprincipal=iconloadingprincipal",
-        ".toolbarbutton-text": "value=label,accesskey,crop,dragover-top,wrap",
-        ".toolbarbutton-multiline-text": "text=label,accesskey,wrap",
+        ".toolbarbutton-text": "accesskey,crop,dragover-top,wrap",
         ".toolbarbutton-menu-dropmarker": "disabled,label",
 
         ".toolbarbutton-badge": "text=badge,style=badgeStyle",
@@ -48,7 +49,6 @@
         MozXULElement.parseXULToFragment(`
         <image class="toolbarbutton-icon"></image>
         <label class="toolbarbutton-text" crop="right" flex="1"></label>
-        <label class="toolbarbutton-multiline-text" flex="1"></label>
         `),
         true
       );
@@ -64,7 +64,6 @@
           <html:label class="toolbarbutton-badge"/>
         </stack>
         <label class="toolbarbutton-text" crop="right" flex="1"/>
-        <label class="toolbarbutton-multiline-text" flex="1"/>
         `),
         true
       );
@@ -87,6 +86,42 @@
       return this.querySelector(":scope > .toolbarbutton-text") != null;
     }
 
+    get _textNode() {
+      let node = this.getElementForAttrInheritance(".toolbarbutton-text");
+      if (node) {
+        Object.defineProperty(this, "_textNode", { value: node });
+      }
+      return node;
+    }
+
+    _setLabel() {
+      let label = this.getAttribute("label") || "";
+      let hasLabel = this.hasAttribute("label");
+      if (this.getAttribute("wrap") == "true") {
+        this._textNode.removeAttribute("value");
+        this._textNode.textContent = label;
+      } else {
+        this._textNode.textContent = "";
+        if (hasLabel) {
+          this._textNode.setAttribute("value", label);
+        } else {
+          this._textNode.removeAttribute("value");
+        }
+      }
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (oldValue === newValue || !this.initializedAttributeInheritance) {
+        return;
+      }
+      // Deal with single/multiline label inheritance:
+      if (name == "label" || name == "wrap") {
+        this._setLabel();
+      }
+      // The normal implementation will deal with everything else.
+      super.attributeChangedCallback(name, oldValue, newValue);
+    }
+
     connectedCallback() {
       if (this.delayConnectedCallback()) {
         return;
@@ -157,6 +192,7 @@
       }
 
       this.initializeAttributeInheritance();
+      this._setLabel();
     }
 
     get icon() {
@@ -172,7 +208,10 @@
     }
 
     get multilineLabel() {
-      return this.querySelector(".toolbarbutton-multiline-text");
+      if (this.getAttribute("wrap") == "true") {
+        return this._textNode;
+      }
+      return null;
     }
 
     get dropmarker() {

toolkit/content/xul.css

@@ -118,10 +118,7 @@ label html|span.accesskey {
 /********** toolbarbutton **********/
 
 toolbar[mode="icons"] .toolbarbutton-text,
-toolbar[mode="icons"] .toolbarbutton-multiline-text,
 toolbar[mode="text"] .toolbarbutton-icon,
-.toolbarbutton-multiline-text:not([wrap="true"]),
-.toolbarbutton-text[wrap="true"],
 html|label.toolbarbutton-badge:empty {
   display: none;
 }

xpcom/ds/StaticAtoms.py

@@ -1199,7 +1199,6 @@ STATIC_ATOMS = [
     Atom("tokenize", "tokenize"),
     Atom("toolbar", "toolbar"),
     Atom("toolbarbutton", "toolbarbutton"),
-    Atom("toolbarbuttonMultilineText", "toolbarbutton-multiline-text"),
     Atom("toolbaritem", "toolbaritem"),
     Atom("toolbarpaletteitem", "toolbarpaletteitem"),
     Atom("toolbox", "toolbox"),