Bug 1582573 - Re-indent XUL strings in non-calendar custom elements. r=mkmelin
authorPaul Morris <paul@thunderbird.net>
Thu, 19 Sep 2019 21:18:40 -0400
changeset 36894 a55d5e1c611a347d559d1853af54df68ebcc3d8d
parent 36893 a652580e14da13ea74917ec27d4e87849d16a392
child 36895 17251ea3e878df8d8016b5d4bb53307e8e0ad468
push id395
push userclokep@gmail.com
push dateMon, 02 Dec 2019 19:38:57 +0000
reviewersmkmelin
bugs1582573
Bug 1582573 - Re-indent XUL strings in non-calendar custom elements. r=mkmelin
chat/content/chat-account-richlistitem.js
chat/content/chat-tooltip.js
mail/base/content/button-menu-button.js
mail/base/content/mailWidgets.js
mail/base/content/tabbrowser-tab.js
mail/base/content/toolbarbutton-menu-button.js
mail/components/activity/content/activity-widgets.js
mail/components/im/content/chat-contact.js
mail/components/im/content/chat-conversation-info.js
mail/components/im/content/chat-imconv.js
mail/components/im/content/toolbarbutton-badge-button.js
mailnews/base/search/content/searchWidgets.js
mailnews/db/gloda/content/autocomplete-richlistitem.js
--- a/chat/content/chat-account-richlistitem.js
+++ b/chat/content/chat-account-richlistitem.js
@@ -49,48 +49,51 @@
         }
         // Prevent from loading an account wizzard
         event.stopPropagation();
       });
 
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-        <vbox flex="1">
-          <hbox flex="1" align="top">
-            <vbox>
-              <stack>
-                <image class="accountIcon"></image>
-                <image class="accountStateIcon"></image>
-              </stack>
+          <vbox flex="1">
+            <hbox flex="1" align="top">
+              <vbox>
+                <stack>
+                  <image class="accountIcon"></image>
+                  <image class="accountStateIcon"></image>
+                </stack>
+                <spacer flex="1"></spacer>
+              </vbox>
+              <vbox flex="1" align="start">
+                <label crop="end" class="accountName"></label>
+                <label class="connecting" crop="end" value="&account.connecting;"></label>
+                <label class="connected" crop="end"></label>
+                <label class="disconnecting" crop="end" value="&account.disconnecting;"></label>
+                <label class="disconnected" crop="end" value="&account.disconnected;"></label>
+                <description class="error error-description"></description>
+                <description class="error error-reconnect"></description>
+                <label class="addException text-link" onclick="gAccountManager.addException()"
+                       data-l10n-id="certmgr-add-exception"></label>
+                <spacer flex="1"></spacer>
+              </vbox>
+              <checkbox label="&account.autoSignOn.label;"
+                        dir="reverse"
+                        class="autoSignOn"
+                        accesskey="&account.autoSignOn.accesskey;"
+                        oncommand="gAccountManager.autologin()"></checkbox>
+            </hbox>
+            <hbox flex="1" class="account-buttons">
+              <button class="disconnectButton" command="cmd_disconnect"></button>
+              <button class="connectButton" command="cmd_connect"></button>
               <spacer flex="1"></spacer>
-            </vbox>
-            <vbox flex="1" align="start">
-              <label crop="end" class="accountName"></label>
-              <label class="connecting" crop="end" value="&account.connecting;"></label>
-              <label class="connected" crop="end"></label>
-              <label class="disconnecting" crop="end" value="&account.disconnecting;"></label>
-              <label class="disconnected" crop="end" value="&account.disconnected;"></label>
-              <description class="error error-description"></description>
-              <description class="error error-reconnect"></description>
-              <label class="addException text-link" onclick="gAccountManager.addException()"
-                data-l10n-id="certmgr-add-exception"></label>
-              <spacer flex="1"></spacer>
-            </vbox>
-            <checkbox label="&account.autoSignOn.label;" dir="reverse" class="autoSignOn"
-              accesskey="&account.autoSignOn.accesskey;" oncommand="gAccountManager.autologin()"></checkbox>
-          </hbox>
-          <hbox flex="1" class="account-buttons">
-            <button class="disconnectButton" command="cmd_disconnect"></button>
-            <button class="connectButton" command="cmd_connect"></button>
-            <spacer flex="1"></spacer>
-            <button command="cmd_edit"></button>
-          </hbox>
-        </vbox>
-    `,
+              <button command="cmd_edit"></button>
+            </hbox>
+          </vbox>
+          `,
           ["chrome://chat/locale/accounts.dtd"]
         )
       );
       this.initializeAttributeInheritance();
     }
 
     set autoLogin(val) {
       if (val) {
--- a/chat/content/chat-tooltip.js
+++ b/chat/content/chat-tooltip.js
@@ -185,48 +185,48 @@
 
     connectedCallback() {
       if (this.delayConnectedCallback()) {
         return;
       }
       this.textContent = "";
       this.appendChild(
         MozXULElement.parseXULToFragment(`
-        <vbox class="largeTooltip">
-          <hbox align="start" crop="end" flex="1">
-            <vbox flex="1">
-              <stack>
-                <!-- The box around the user icon is a workaround for bug 955673. -->
-                <box class="userIconHolder">
-                  <image class="userIcon"></image>
-                </box>
-                <image class="statusTypeIcon status"></image>
-              </stack>
-              <spacer flex="1"></spacer>
-            </vbox>
-            <stack class="displayNameMessageBox" flex="1">
+          <vbox class="largeTooltip">
+            <hbox align="start" crop="end" flex="1">
               <vbox flex="1">
-                <hbox align="start" flex="1">
-                  <description class="tooltipDisplayName" flex="1" crop="end"></description>
-                  <image class="tooltipProtoIcon status"></image>
-                </hbox>
+                <stack>
+                  <!-- The box around the user icon is a workaround for bug 955673. -->
+                  <box class="userIconHolder">
+                    <image class="userIcon"></image>
+                  </box>
+                  <image class="statusTypeIcon status"></image>
+                </stack>
                 <spacer flex="1"></spacer>
               </vbox>
-              <description class="tooltipMessage"></description>
-            </stack>
-          </hbox>
-          <grid>
-            <columns>
-              <column></column>
-              <column flex="1"></column>
-            </columns>
-            <rows class="tooltipRows"></rows>
-          </grid>
-        </vbox>
-      `)
+              <stack class="displayNameMessageBox" flex="1">
+                <vbox flex="1">
+                  <hbox align="start" flex="1">
+                    <description class="tooltipDisplayName" flex="1" crop="end"></description>
+                    <image class="tooltipProtoIcon status"></image>
+                  </hbox>
+                  <spacer flex="1"></spacer>
+                </vbox>
+                <description class="tooltipMessage"></description>
+              </stack>
+            </hbox>
+            <grid>
+              <columns>
+                <column></column>
+                <column flex="1"></column>
+              </columns>
+              <rows class="tooltipRows"></rows>
+            </grid>
+          </vbox>
+        `)
       );
       this.initializeAttributeInheritance();
     }
 
     get bundle() {
       if (!this._bundle) {
         this._bundle = Services.strings.createBundle(
           "chrome://chat/locale/imtooltip.properties"
--- a/mail/base/content/button-menu-button.js
+++ b/mail/base/content/button-menu-button.js
@@ -24,20 +24,20 @@
         ".button-menubutton-button": "disabled",
         ".button-menubutton-dropmarker": "open,disabled",
       };
     }
 
     static get menubuttonFragment() {
       let frag = document.importNode(
         MozXULElement.parseXULToFragment(`
-        <hbox class="box-inherit button-box" align="center" pack="center" flex="1">
-          <button class="box-inherit button-menubutton-button" allowevents="true" flex="1"></button>
-          <dropmarker class="button-menubutton-dropmarker"></dropmarker>
-        </hbox>`),
+          <hbox class="box-inherit button-box" align="center" pack="center" flex="1">
+            <button class="box-inherit button-menubutton-button" allowevents="true" flex="1"></button>
+            <dropmarker class="button-menubutton-dropmarker"></dropmarker>
+          </hbox>`),
         true
       );
       Object.defineProperty(this, "menubuttonFragment", { value: frag });
       return frag;
     }
 
     connectedCallback() {
       if (this.delayConnectedCallback() || this._hasConnected) {
--- a/mail/base/content/mailWidgets.js
+++ b/mail/base/content/mailWidgets.js
@@ -493,18 +493,21 @@
       // parsing stage to take effect.
       // So, remove the existing treecolpicker, and add a new one.
       if (treecolpicker) {
         treecolpicker.remove();
       }
       if (!this.querySelector("treecolpicker[is=thread-pane-treecolpicker]")) {
         this.appendChild(
           MozXULElement.parseXULToFragment(`
-        <treecolpicker is="thread-pane-treecolpicker" class="treecol-image" fixed="true"></treecolpicker>
-      `)
+            <treecolpicker is="thread-pane-treecolpicker"
+                           class="treecol-image"
+                           fixed="true">
+            </treecolpicker>
+          `)
         );
       }
       // Exceptionally apply super late, so we get the other goodness from there
       // now that the treecolpicker is corrected.
       super.connectedCallback();
     }
   }
   customElements.define("thread-pane-treecols", MozThreadPaneTreecols, {
@@ -523,27 +526,36 @@
         return;
       }
       let popup = this.querySelector(`menupopup[anonid="popup"]`);
 
       // We'll add an "Apply columns to..." menu
       popup.appendChild(
         MozXULElement.parseXULToFragment(
           `
-      <menu class="applyTo-menu" label="&columnPicker.applyTo.label;">
-        <menupopup>
-          <menu class="applyToFolder-menu" label="&columnPicker.applyToFolder.label;">
-            <menupopup is="folder-menupopup" class="applyToFolder" showFileHereLabel="true" position="start_before"></menupopup>
+          <menu class="applyTo-menu" label="&columnPicker.applyTo.label;">
+            <menupopup>
+              <menu class="applyToFolder-menu"
+                    label="&columnPicker.applyToFolder.label;">
+                <menupopup is="folder-menupopup"
+                           class="applyToFolder"
+                           showFileHereLabel="true"
+                           position="start_before"></menupopup>
+              </menu>
+              <menu class="applyToFolderAndChildren-menu"
+                    label="&columnPicker.applyToFolderAndChildren.label;">
+                <menupopup is="folder-menupopup"
+                           class="applyToFolderAndChildren"
+                           showFileHereLabel="true"
+                           showAccountsFileHere="true"
+                           position="start_before"></menupopup>
+              </menu>
+            </menupopup>
           </menu>
-          <menu class="applyToFolderAndChildren-menu" label="&columnPicker.applyToFolderAndChildren.label;">
-            <menupopup is="folder-menupopup" class="applyToFolderAndChildren" showFileHereLabel="true" showAccountsFileHere="true" position="start_before"></menupopup>
-          </menu>
-        </menupopup>
-      </menu>
-    `,
+          `,
           ["chrome://messenger/locale/messenger.dtd"]
         )
       );
 
       let confirmApply = (destFolder, useChildren) => {
         // Confirm the action with the user.
         let bundle = document.getElementById("bundle_messenger");
         let title = useChildren
@@ -733,24 +745,30 @@
       }
 
       static get fragment() {
         // Accessibility information of these nodes will be
         // presented on XULComboboxAccessible generated from <menulist>;
         // hide these nodes from the accessibility tree.
         return document.importNode(
           MozXULElement.parseXULToFragment(`
-        <textbox class="menulist-input" allowevents="true" flex="1"/>
-        <hbox class="menulist-label-box" flex="1" role="none">
-          <image class="menulist-icon" role="none"/>
-          <label class="menulist-label" crop="right" flex="1" role="none"/>
-          <label class="menulist-highlightable-label" crop="right" flex="1" role="none"/>
-        </hbox>
-        <dropmarker class="menulist-dropmarker" type="menu" role="none"/>
-      `),
+            <textbox class="menulist-input" allowevents="true" flex="1"/>
+            <hbox class="menulist-label-box" flex="1" role="none">
+              <image class="menulist-icon" role="none"/>
+              <label class="menulist-label"
+                     crop="right"
+                     flex="1"
+                     role="none"/>
+              <label class="menulist-highlightable-label"
+                     crop="right"
+                     flex="1"
+                     role="none"/>
+            </hbox>
+            <dropmarker class="menulist-dropmarker" type="menu" role="none"/>
+          `),
           true
         );
       }
 
       static get inheritedAttributes() {
         let attrs = super.inheritedAttributes;
         attrs[".menulist-input"] = "value,disabled";
         attrs[".menulist-description"] = "value=description";
--- a/mail/base/content/tabbrowser-tab.js
+++ b/mail/base/content/tabbrowser-tab.js
@@ -33,32 +33,33 @@
       if (this.delayConnectedCallback() || this.hasChildNodes()) {
         return;
       }
 
       this.setAttribute("is", "tabmail-tab");
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-        <stack class="tab-stack" flex="1" closetabtext="&closeTab.label;">
-          <vbox class="tab-background">
-            <hbox class="tab-line"></hbox>
-          </vbox>
-          <hbox class="tab-content" align="center">
-            <image class="tab-throbber" role="presentation"></image>
-            <image class="tab-icon-image" role="presentation"></image>
-            <hbox class="tab-label-container"
-                  onoverflow="this.setAttribute('textoverflow', 'true');"
-                  onunderflow="this.removeAttribute('textoverflow');" flex="1">
-              <label class="tab-text tab-label" role="presentation"></label>
+          <stack class="tab-stack" flex="1" closetabtext="&closeTab.label;">
+            <vbox class="tab-background">
+              <hbox class="tab-line"></hbox>
+            </vbox>
+            <hbox class="tab-content" align="center">
+              <image class="tab-throbber" role="presentation"></image>
+              <image class="tab-icon-image" role="presentation"></image>
+              <hbox class="tab-label-container"
+                    onoverflow="this.setAttribute('textoverflow', 'true');"
+                    onunderflow="this.removeAttribute('textoverflow');"
+                    flex="1">
+                <label class="tab-text tab-label" role="presentation"></label>
+              </hbox>
+              <image class="tab-close-button close-icon"/>
             </hbox>
-            <image class="tab-close-button close-icon"/>
-          </hbox>
-        </stack>
-      `,
+          </stack>
+          `,
           ["chrome://messenger/locale/tabmail.dtd"]
         )
       );
 
       this.addEventListener("mouseover", event => {
         document.tab = this;
         if (event.originalTarget.classList.contains("tab-close-button")) {
           this.mOverCloseButton = true;
--- a/mail/base/content/toolbarbutton-menu-button.js
+++ b/mail/base/content/toolbarbutton-menu-button.js
@@ -24,19 +24,22 @@
         ".toolbarbutton-menubutton-button":
           "command,hidden,disabled,align,dir,pack,orient,tooltiptext=buttontooltiptext",
         ".toolbarbutton-menubutton-dropmarker": "open,disabled",
       };
     }
     static get menubuttonFragment() {
       let frag = document.importNode(
         MozXULElement.parseXULToFragment(`
-        <toolbarbutton class="box-inherit toolbarbutton-menubutton-button" flex="1" allowevents="true"></toolbarbutton>
-        <dropmarker type="menu-button" class="toolbarbutton-menubutton-dropmarker"></dropmarker>
-      `),
+          <toolbarbutton class="box-inherit toolbarbutton-menubutton-button"
+                         flex="1"
+                         allowevents="true"></toolbarbutton>
+          <dropmarker type="menu-button"
+                      class="toolbarbutton-menubutton-dropmarker"></dropmarker>
+        `),
         true
       );
       Object.defineProperty(this, "menubuttonFragment", { value: frag });
       return frag;
     }
 
     /** @override */
     get _hasConnected() {
--- a/mail/components/activity/content/activity-widgets.js
+++ b/mail/components/activity/content/activity-widgets.js
@@ -139,36 +139,36 @@
         },
         QueryInterface: ChromeUtils.generateQI([Ci.nsIActivityListener]),
       };
 
       this._activity.addListener(this.activityListener);
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-        <hbox flex="1">
-          <vbox pack="center" class="eventIconBox">
-            <image></image>
-          </vbox>
-          <vbox pack="start" flex="1">
-            <hbox align="center" flex="1">
-              <label crop="center" flex="1" class="displayText"></label>
-              <label class="dateTime"></label>
-            </hbox>
-            <hbox align="center" flex="1">
-              <label crop="end" flex="1" class="statusText"></label>
-              <button class="undo mini-button"
-                tooltiptext="&cmd.undo.label;" cmd="cmd_undo"
-                ondblclick="event.stopPropagation();"
-                oncommand="activity.undoHandler.undo(activity);">
-              </button>
-            </hbox>
-          </vbox>
-        </hbox>
-      `,
+          <hbox flex="1">
+            <vbox pack="center" class="eventIconBox">
+              <image></image>
+            </vbox>
+            <vbox pack="start" flex="1">
+              <hbox align="center" flex="1">
+                <label crop="center" flex="1" class="displayText"></label>
+                <label class="dateTime"></label>
+              </hbox>
+              <hbox align="center" flex="1">
+                <label crop="end" flex="1" class="statusText"></label>
+                <button class="undo mini-button"
+                        tooltiptext="&cmd.undo.label;" cmd="cmd_undo"
+                        ondblclick="event.stopPropagation();"
+                        oncommand="activity.undoHandler.undo(activity);">
+                </button>
+              </hbox>
+            </vbox>
+          </hbox>
+          `,
           ["chrome://messenger/locale/activity.dtd"]
         )
       );
 
       this.setAttribute("class", "activityitem");
 
       this._activity.QueryInterface(Ci.nsIActivityEvent);
 
@@ -232,27 +232,29 @@
           "value=contextDisplayText,tooltiptext=contextDisplayTextTip",
       };
     }
     constructor() {
       super();
 
       this.appendChild(
         MozXULElement.parseXULToFragment(`
-        <vbox flex="1">
-          <hbox>
-            <vbox pack="start">
-              <label crop="left" class="contextDisplayText"></label>
+          <vbox flex="1">
+            <hbox>
+              <vbox pack="start">
+                <label crop="left" class="contextDisplayText"></label>
+              </vbox>
+            </hbox>
+            <vbox pack="center">
+              <richlistbox class="activitygroupbox activityview"
+                           seltype="multiple"
+                           flex="1"></richlistbox>
             </vbox>
-          </hbox>
-          <vbox pack="center">
-            <richlistbox class="activitygroupbox activityview" seltype="multiple" flex="1"></richlistbox>
           </vbox>
-        </vbox>
-      `)
+        `)
       );
 
       this.contextType = "";
 
       this.contextObj = null;
     }
 
     connectedCallback() {
@@ -309,48 +311,59 @@
       super.connectedCallback();
       if (this.delayConnectedCallback() || this.hasChildNodes()) {
         return;
       }
 
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-        <hbox flex="1" class="activityContentBox">
-          <vbox pack="center" class="processIconBox">
-            <image></image>
-          </vbox>
-          <vbox flex="1">
-            <label crop="center" flex="2" class="displayText"></label>
-            <hbox>
-              <vbox flex="1">
-                <html:progress value="0" max="100" flex="1" class="progressmeter"></html:progress>
-              </vbox>
-              <button class="resume mini-button" tooltiptext="&cmd.resume.label;"
-                cmd="cmd_resume" ondblclick="event.stopPropagation();"
-                oncommand="activity.pauseHandler.resume(activity);">
-              </button>
-              <button class="pause mini-button" tooltiptext="&cmd.pause.label;"
-                cmd="cmd_pause" ondblclick="event.stopPropagation();"
-                oncommand="activity.pauseHandler.pause(activity);">
-              </button>
-              <button class="retry mini-button" tooltiptext="&cmd.retry.label;"
-                cmd="cmd_retry" ondblclick="event.stopPropagation();"
-                oncommand="activity.retryHandler.retry(activity);">
-              </button>
-              <button class="cancel mini-button" tooltiptext="&cmd.cancel.label;"
-                cmd="cmd_cancel" ondblclick="event.stopPropagation();"
-                oncommand="activity.cancelHandler.cancel(activity);">
-              </button>
-            </hbox>
-            <label flex="1" crop="right" class="statusText"></label>
-            <spacer flex="1"></spacer>
-          </vbox>
-        </hbox>
-    `,
+          <hbox flex="1" class="activityContentBox">
+            <vbox pack="center" class="processIconBox">
+              <image></image>
+            </vbox>
+            <vbox flex="1">
+              <label crop="center" flex="2" class="displayText"></label>
+              <hbox>
+                <vbox flex="1">
+                  <html:progress value="0"
+                                 max="100"
+                                 flex="1"
+                                 class="progressmeter"></html:progress>
+                </vbox>
+                <button class="resume mini-button"
+                        tooltiptext="&cmd.resume.label;"
+                        cmd="cmd_resume"
+                        ondblclick="event.stopPropagation();"
+                        oncommand="activity.pauseHandler.resume(activity);">
+                </button>
+                <button class="pause mini-button"
+                        tooltiptext="&cmd.pause.label;"
+                        cmd="cmd_pause"
+                        ondblclick="event.stopPropagation();"
+                        oncommand="activity.pauseHandler.pause(activity);">
+                </button>
+                <button class="retry mini-button"
+                        tooltiptext="&cmd.retry.label;"
+                        cmd="cmd_retry"
+                        ondblclick="event.stopPropagation();"
+                        oncommand="activity.retryHandler.retry(activity);">
+                </button>
+                <button class="cancel mini-button"
+                        tooltiptext="&cmd.cancel.label;"
+                        cmd="cmd_cancel"
+                        ondblclick="event.stopPropagation();"
+                        oncommand="activity.cancelHandler.cancel(activity);">
+                </button>
+              </hbox>
+              <label flex="1" crop="right" class="statusText"></label>
+              <spacer flex="1"></spacer>
+            </vbox>
+          </hbox>
+          `,
           ["chrome://messenger/locale/activity.dtd"]
         )
       );
 
       this._activity.QueryInterface(Ci.nsIActivityProcess);
 
       this.activityListener = {
         onStateChanged: (activity, oldState) => {
@@ -571,35 +584,37 @@
         QueryInterface: ChromeUtils.generateQI([Ci.nsIActivityListener]),
       };
 
       this._activity.addListener(this.activityListener);
 
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-        <hbox flex="1">
-          <vbox pack="center" class="warningIconBox">
-            <image></image>
-          </vbox>
-          <vbox pack="start" flex="1">
-            <hbox align="center" flex="1">
-              <label crop="center" flex="1" class="displayText"></label>
-              <label class="dateTime"></label>
-              <button class="recover mini-button" tooltiptext="&cmd.recover.label"
-                cmd="cmd_recover" ondblclick="event.stopPropagation();"
-                oncommand="activity.recoveryHandler.recover(activity);">
-              </button>
-            </hbox>
-            <hbox align="center" flex="1">
-              <label crop="end" flex="1" class="statusText"></label>
-            </hbox>
-          </vbox>
-        </hbox>
-      `,
+          <hbox flex="1">
+            <vbox pack="center" class="warningIconBox">
+              <image></image>
+            </vbox>
+            <vbox pack="start" flex="1">
+              <hbox align="center" flex="1">
+                <label crop="center" flex="1" class="displayText"></label>
+                <label class="dateTime"></label>
+                <button class="recover mini-button"
+                        tooltiptext="&cmd.recover.label"
+                        cmd="cmd_recover"
+                        ondblclick="event.stopPropagation();"
+                        oncommand="activity.recoveryHandler.recover(activity);">
+                </button>
+              </hbox>
+              <hbox align="center" flex="1">
+                <label crop="end" flex="1" class="statusText"></label>
+              </hbox>
+            </vbox>
+          </hbox>
+          `,
           ["chrome://messenger/locale/activity.dtd"]
         )
       );
 
       this.setAttribute("class", "activityitem");
 
       this._activity.QueryInterface(Ci.nsIActivityWarning);
 
--- a/mail/components/im/content/chat-contact.js
+++ b/mail/components/im/content/chat-contact.js
@@ -89,32 +89,37 @@
             this.group.updateContactPosition(subject);
           }
         }.bind(this),
       };
 
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-        <vbox class="box-line"></vbox>
-        <stack class="prplBuddyIcon" mousethrough="always">
-          <image class="protoIcon"></image>
-          <image class="statusIcon"></image>
-        </stack>
-        <hbox flex="1" class="contact-hbox" mousethrough="always">
-          <label crop="end" flex="1" mousethrough="always"
-            class="contactDisplayName blistDisplayName">
-          </label>
-          <label crop="end" flex="100000" mousethrough="always"
-            class="contactStatusText">
-          </label>
-          <button class="startChatBubble" tooltiptext="&openConversationButton.tooltip;">
-          </button>
-        </hbox>
-      `,
+          <vbox class="box-line"></vbox>
+          <stack class="prplBuddyIcon" mousethrough="always">
+            <image class="protoIcon"></image>
+            <image class="statusIcon"></image>
+          </stack>
+          <hbox flex="1" class="contact-hbox" mousethrough="always">
+            <label crop="end"
+                   flex="1"
+                   mousethrough="always"
+                   class="contactDisplayName blistDisplayName">
+            </label>
+            <label crop="end"
+                   flex="100000"
+                   mousethrough="always"
+                   class="contactStatusText">
+            </label>
+            <button class="startChatBubble"
+                    tooltiptext="&openConversationButton.tooltip;">
+            </button>
+          </hbox>
+          `,
           ["chrome://messenger/locale/chat.dtd"]
         )
       );
 
       this.initializeAttributeInheritance();
     }
 
     get displayName() {
--- a/mail/components/im/content/chat-conversation-info.js
+++ b/mail/components/im/content/chat-conversation-info.js
@@ -53,57 +53,69 @@
     connectedCallback() {
       if (this.hasChildNodes() || this.delayConnectedCallback()) {
         return;
       }
       this.setAttribute("orient", "vertical");
 
       this.appendChild(
         MozXULElement.parseXULToFragment(`
-      <linkset>
-        <html:link rel="localization" href="messenger/otr/chat.ftl"/>
-      </linkset>
+          <linkset>
+            <html:link rel="localization" href="messenger/otr/chat.ftl"/>
+          </linkset>
 
-      <hbox class="displayUserAccount" flex="1">
-        <stack class="statusImageStack">
-          <box class="userIconHolder">
-            <image class="userIcon" mousethrough="always"></image>
-          </box>
-          <image class="statusTypeIcon"></image>
-        </stack>
-        <stack class="displayNameAndstatusMessageStack" mousethrough="always" flex="1">
-          <hbox align="center" flex="1">
-            <description class="displayName" flex="1" crop="end">
-            </description>
-            <image class="prplIcon"></image>
+          <hbox class="displayUserAccount" flex="1">
+            <stack class="statusImageStack">
+              <box class="userIconHolder">
+                <image class="userIcon" mousethrough="always"></image>
+              </box>
+              <image class="statusTypeIcon"></image>
+            </stack>
+            <stack class="displayNameAndstatusMessageStack"
+                   mousethrough="always"
+                   flex="1">
+              <hbox align="center" flex="1">
+                <description class="displayName" flex="1" crop="end">
+                </description>
+                <image class="prplIcon"></image>
+              </hbox>
+              <description class="statusMessage"
+                           mousethrough="never"
+                           crop="end"
+                           flex="100000"/>
+              <html:input class="statusMessageInput input-inline"
+                          hidden="hidden"/>
+            </stack>
           </hbox>
-          <description class="statusMessage" mousethrough="never" crop="end" flex="100000"/>
-          <html:input class="statusMessageInput input-inline" hidden="hidden"/>
-        </stack>
-      </hbox>
-      <hbox class="otr-container" align="left" valign="middle" hidden="true">
-        <label class="otr-label" crop="end" data-l10n-id="state-label" flex="1"/>
-        <toolbarbutton id="otrButton"
-                       mode="dialog"
-                       class="otr-button toolbarbutton-1"
-                       type="menu"
-                       label="Insecure"
-                       data-l10n-id="start-tooltip">
-          <menupopup class="otr-menu-popup">
-            <menuitem class="otr-start" data-l10n-id="start-label"
-                      oncommand='this.closest("chat-conversation-info").onOtrStartClicked();'/>
-            <menuitem class="otr-end" data-l10n-id="end-label"
-                      oncommand='this.closest("chat-conversation-info").onOtrEndClicked();'/>
-            <menuitem class="otr-auth" data-l10n-id="auth-label"
-                      oncommand='this.closest("chat-conversation-info").onOtrAuthClicked();'/>
-          </menupopup>
-        </toolbarbutton>
-      </hbox>
-      <hbox id="otr-notification-box"></hbox>
-    `)
+          <hbox class="otr-container"
+                align="left"
+                valign="middle"
+                hidden="true">
+            <label class="otr-label"
+                   crop="end"
+                   data-l10n-id="state-label"
+                   flex="1"/>
+            <toolbarbutton id="otrButton"
+                           mode="dialog"
+                           class="otr-button toolbarbutton-1"
+                           type="menu"
+                           label="Insecure"
+                           data-l10n-id="start-tooltip">
+              <menupopup class="otr-menu-popup">
+                <menuitem class="otr-start" data-l10n-id="start-label"
+                          oncommand='this.closest("chat-conversation-info").onOtrStartClicked();'/>
+                <menuitem class="otr-end" data-l10n-id="end-label"
+                          oncommand='this.closest("chat-conversation-info").onOtrEndClicked();'/>
+                <menuitem class="otr-auth" data-l10n-id="auth-label"
+                          oncommand='this.closest("chat-conversation-info").onOtrAuthClicked();'/>
+              </menupopup>
+            </toolbarbutton>
+          </hbox>
+          <hbox id="otr-notification-box"></hbox>
+        `)
       );
 
       this.topic.addEventListener("click", this.startEditTopic.bind(this));
 
       if (Services.prefs.getBoolPref("chat.otr.enable")) {
         let otrButton = this.querySelector(".otr-button");
         otrButton.addEventListener("command", this.otrButtonClicked);
         OTRUI.setNotificationBox(gNotification.notificationbox);
--- a/mail/components/im/content/chat-imconv.js
+++ b/mail/components/im/content/chat-imconv.js
@@ -56,35 +56,39 @@
           }
         },
         true
       );
 
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-        <vbox class="box-line"></vbox>
-        <button class="closeConversationButton close-icon"
-                tooltiptext="&closeConversationButton.tooltip;"></button>
-        <stack class="prplBuddyIcon" mousethrough="always">
-          <image class="protoIcon"></image>
-          <image class="statusIcon"></image>
-        </stack>
-        <hbox flex="1" class="conv-hbox" mousethrough="always">
-          <label crop="end" flex="1" mousethrough="always"
-                 class="convDisplayName blistDisplayName">
-          </label>
-          <label class="convUnreadCount" crop="end" mousethrough="never"></label>
-          <box class="convUnreadTargetedCount">
-            <label class="convUnreadTargetedCountLabel"
-                   crop="end" mousethrough="never"></label>
-          </box>
-          <spacer flex="1000000"></spacer>
-        </hbox>
-      `,
+          <vbox class="box-line"></vbox>
+          <button class="closeConversationButton close-icon"
+                  tooltiptext="&closeConversationButton.tooltip;"></button>
+          <stack class="prplBuddyIcon" mousethrough="always">
+            <image class="protoIcon"></image>
+            <image class="statusIcon"></image>
+          </stack>
+          <hbox flex="1" class="conv-hbox" mousethrough="always">
+            <label crop="end"
+                   flex="1"
+                   mousethrough="always"
+                   class="convDisplayName blistDisplayName">
+            </label>
+            <label class="convUnreadCount"
+                   crop="end"
+                   mousethrough="never"></label>
+            <box class="convUnreadTargetedCount">
+              <label class="convUnreadTargetedCountLabel"
+                     crop="end" mousethrough="never"></label>
+            </box>
+            <spacer flex="1000000"></spacer>
+          </hbox>
+          `,
           ["chrome://messenger/locale/chat.dtd"]
         )
       );
 
       this.convView = null;
 
       this.directedUnreadCount = 0;
 
--- a/mail/components/im/content/toolbarbutton-badge-button.js
+++ b/mail/components/im/content/toolbarbutton-badge-button.js
@@ -26,26 +26,26 @@
     }
     connectedCallback() {
       if (this.delayConnectedCallback() || this.hasChildNodes()) {
         return;
       }
       this.setAttribute("is", "toolbarbutton-badge-button");
       this.appendChild(
         MozXULElement.parseXULToFragment(`
-        <stack>
-          <hbox>
-            <image class="toolbarbutton-icon"></image>
-          </hbox>
-          <box class="badgeButton-badge">
-            <label class="badgeButton-badgeLabel"></label>
-          </box>
-        </stack>
-        <label class="toolbarbutton-text" crop="right" flex="1"></label>
-      `)
+          <stack>
+            <hbox>
+              <image class="toolbarbutton-icon"></image>
+            </hbox>
+            <box class="badgeButton-badge">
+              <label class="badgeButton-badgeLabel"></label>
+            </box>
+          </stack>
+          <label class="toolbarbutton-text" crop="right" flex="1"></label>
+        `)
       );
 
       this._badgeCount = 0;
       this.initializeAttributeInheritance();
     }
 
     set badgeCount(val) {
       return this._setBadgeCount(val);
--- a/mailnews/base/search/content/searchWidgets.js
+++ b/mailnews/base/search/content/searchWidgets.js
@@ -51,46 +51,46 @@
     }
   }
 
   class MozRuleactiontargetPriority extends MozXULElement {
     connectedCallback() {
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-      <menulist class="ruleactionitem" flex="1">
-        <menupopup>
-          <menuitem value="6" label="&highestPriorityCmd.label;"></menuitem>
-          <menuitem value="5" label="&highPriorityCmd.label;"></menuitem>
-          <menuitem value="4" label="&normalPriorityCmd.label;"></menuitem>
-          <menuitem value="3" label="&lowPriorityCmd.label;"></menuitem>
-          <menuitem value="2" label="&lowestPriorityCmd.label;"></menuitem>
-        </menupopup>
-      </menulist>
-      `,
+          <menulist class="ruleactionitem" flex="1">
+            <menupopup>
+              <menuitem value="6" label="&highestPriorityCmd.label;"></menuitem>
+              <menuitem value="5" label="&highPriorityCmd.label;"></menuitem>
+              <menuitem value="4" label="&normalPriorityCmd.label;"></menuitem>
+              <menuitem value="3" label="&lowPriorityCmd.label;"></menuitem>
+              <menuitem value="2" label="&lowestPriorityCmd.label;"></menuitem>
+            </menupopup>
+          </menulist>
+          `,
           ["chrome://messenger/locale/FilterEditor.dtd"]
         )
       );
 
       updateParentNode(this.closest(".ruleaction"));
     }
   }
 
   class MozRuleactiontargetJunkscore extends MozXULElement {
     connectedCallback() {
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-      <menulist class="ruleactionitem" flex="1">
-        <menupopup>
-          <menuitem value="100" label="&junk.label;"/>
-          <menuitem value="0" label="&notJunk.label;"/>
-        </menupopup>
-      </menulist>
-      `,
+          <menulist class="ruleactionitem" flex="1">
+            <menupopup>
+              <menuitem value="100" label="&junk.label;"/>
+              <menuitem value="0" label="&notJunk.label;"/>
+            </menupopup>
+          </menulist>
+          `,
           ["chrome://messenger/locale/FilterEditor.dtd"]
         )
       );
 
       updateParentNode(this.closest(".ruleaction"));
     }
   }
 
@@ -130,29 +130,29 @@
     }
   }
 
   class MozRuleactiontargetFolder extends MozXULElement {
     connectedCallback() {
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-      <menulist class="ruleactionitem
-                folderMenuItem"
-                flex="1"
-                displayformat="verbose">
-        <menupopup is="folder-menupopup"
-                   mode="filing"
-                   class="menulist-menupopup"
-                   showRecent="true"
-                   recentLabel="&recentFolders.label;"
-                   showFileHereLabel="true">
-        </menupopup>
-      </menulist>
-      `,
+          <menulist class="ruleactionitem
+                    folderMenuItem"
+                    flex="1"
+                    displayformat="verbose">
+            <menupopup is="folder-menupopup"
+                       mode="filing"
+                       class="menulist-menupopup"
+                       showRecent="true"
+                       recentLabel="&recentFolders.label;"
+                       showFileHereLabel="true">
+            </menupopup>
+          </menulist>
+          `,
           ["chrome://messenger/locale/messenger.dtd"]
         )
       );
 
       this.menulist = this.querySelector("menulist");
 
       this.menulist.addEventListener("command", event => {
         this.setPicker(event);
@@ -699,62 +699,120 @@
       // Initialize strings.
       const bundle = Services.strings.createBundle(
         "chrome://messenger/locale/messenger.properties"
       );
 
       if (!this.hasChildNodes()) {
         this.appendChild(
           MozXULElement.parseXULToFragment(`
-        <html:input flex="1" class="input-inline search-value-textbox" inherits="disabled"/>
-        <menulist flex="1" class="search-value-menulist" inherits="disabled">
-          <menupopup class="search-value-popup">
-            <menuitem value="6" stringTag="priorityHighest" class="search-value-menuitem"></menuitem>
-            <menuitem value="5" stringTag="priorityHigh" class="search-value-menuitem"></menuitem>
-            <menuitem value="4" stringTag="priorityNormal" class="search-value-menuitem"></menuitem>
-            <menuitem value="3" stringTag="priorityLow" class="search-value-menuitem"></menuitem>
-            <menuitem value="2" stringTag="priorityLowest" class="search-value-menuitem"></menuitem>
-          </menupopup>
-        </menulist>
-        <menulist flex="1" class="search-value-menulist" inherits="disabled">
-          <menupopup class="search-value-popup">
-            <menuitem value="2" stringTag="replied" class="search-value-menuitem"></menuitem>
-            <menuitem value="1" stringTag="read" class="search-value-menuitem"></menuitem>
-            <menuitem value="65536" stringTag="new" class="search-value-menuitem"></menuitem>
-            <menuitem value="4096" stringTag="forwarded" class="search-value-menuitem"></menuitem>
-            <menuitem value="4" stringTag="flagged" class="search-value-menuitem"></menuitem>
-          </menupopup>
-        </menulist>
-        <html:input flex="1" class="input-inline search-value-textbox" inherits="disabled"/>
-        <menulist is="menulist-addrbooks" flex="1" class="search-value-menulist" inherits="disabled" localonly="true"/>
-        <menulist flex="1" class="search-value-menulist" inherits="disabled">
-          <menupopup class="search-value-popup"></menupopup>
-        </menulist>
-        <menulist flex="1" class="search-value-menulist" inherits="disabled">
-          <menupopup class="search-value-popup">
-            <menuitem value="2" stringTag="junk" class="search-value-menuitem"></menuitem>
-          </menupopup>
-        </menulist>
-        <menulist flex="1" class="search-value-menulist" inherits="disabled">
-          <menupopup class="search-value-popup">
-            <menuitem value="0" stringTag="hasAttachments" class="search-value-menuitem"></menuitem>
-          </menupopup>
-        </menulist>
-        <menulist flex="1" class="search-value-menulist" inherits="disabled">
-          <menupopup class="search-value-popup">
-            <menuitem value="plugin" stringTag="junkScoreOriginPlugin" class="search-value-menuitem"></menuitem>
-            <menuitem value="user" stringTag="junkScoreOriginUser" class="search-value-menuitem"></menuitem>
-            <menuitem value="filter" stringTag="junkScoreOriginFilter" class="search-value-menuitem"></menuitem>
-            <menuitem value="whitelist" stringTag="junkScoreOriginWhitelist" class="search-value-menuitem"></menuitem>
-            <menuitem value="imapflag" stringTag="junkScoreOriginImapFlag" class="search-value-menuitem"></menuitem>
-          </menupopup>
-        </menulist>
-        <html:input type="number" class="input-inline search-value-textbox" inherits="disabled"/>
-        <hbox flex="1" class="search-value-custom" inherits="disabled"></hbox>
-      `)
+            <html:input flex="1"
+                        class="input-inline search-value-textbox"
+                        inherits="disabled"/>
+            <menulist flex="1"
+                      class="search-value-menulist"
+                      inherits="disabled">
+              <menupopup class="search-value-popup">
+                <menuitem value="6"
+                          stringTag="priorityHighest"
+                          class="search-value-menuitem"></menuitem>
+                <menuitem value="5"
+                          stringTag="priorityHigh"
+                          class="search-value-menuitem"></menuitem>
+                <menuitem value="4"
+                          stringTag="priorityNormal"
+                          class="search-value-menuitem"></menuitem>
+                <menuitem value="3"
+                          stringTag="priorityLow"
+                          class="search-value-menuitem"></menuitem>
+                <menuitem value="2"
+                          stringTag="priorityLowest"
+                          class="search-value-menuitem"></menuitem>
+              </menupopup>
+            </menulist>
+            <menulist flex="1"
+                      class="search-value-menulist"
+                      inherits="disabled">
+              <menupopup class="search-value-popup">
+                <menuitem value="2"
+                          stringTag="replied"
+                          class="search-value-menuitem"></menuitem>
+                <menuitem value="1"
+                          stringTag="read"
+                          class="search-value-menuitem"></menuitem>
+                <menuitem value="65536"
+                          stringTag="new"
+                          class="search-value-menuitem"></menuitem>
+                <menuitem value="4096"
+                          stringTag="forwarded"
+                          class="search-value-menuitem"></menuitem>
+                <menuitem value="4"
+                          stringTag="flagged"
+                          class="search-value-menuitem"></menuitem>
+              </menupopup>
+            </menulist>
+            <html:input flex="1"
+                        class="input-inline search-value-textbox"
+                        inherits="disabled"/>
+            <menulist is="menulist-addrbooks"
+                      flex="1"
+                      class="search-value-menulist"
+                      inherits="disabled"
+                      localonly="true"/>
+            <menulist flex="1"
+                      class="search-value-menulist"
+                      inherits="disabled">
+              <menupopup class="search-value-popup"></menupopup>
+            </menulist>
+            <menulist flex="1"
+                      class="search-value-menulist"
+                      inherits="disabled">
+              <menupopup class="search-value-popup">
+                <menuitem value="2"
+                          stringTag="junk"
+                          class="search-value-menuitem"></menuitem>
+              </menupopup>
+            </menulist>
+            <menulist flex="1"
+                      class="search-value-menulist"
+                      inherits="disabled">
+              <menupopup class="search-value-popup">
+                <menuitem value="0"
+                          stringTag="hasAttachments"
+                          class="search-value-menuitem"></menuitem>
+              </menupopup>
+            </menulist>
+            <menulist flex="1"
+                      class="search-value-menulist"
+                      inherits="disabled">
+              <menupopup class="search-value-popup">
+                <menuitem value="plugin"
+                          stringTag="junkScoreOriginPlugin"
+                          class="search-value-menuitem"></menuitem>
+                <menuitem value="user"
+                          stringTag="junkScoreOriginUser"
+                          class="search-value-menuitem"></menuitem>
+                <menuitem value="filter"
+                          stringTag="junkScoreOriginFilter"
+                          class="search-value-menuitem"></menuitem>
+                <menuitem value="whitelist"
+                          stringTag="junkScoreOriginWhitelist"
+                          class="search-value-menuitem"></menuitem>
+                <menuitem value="imapflag"
+                          stringTag="junkScoreOriginImapFlag"
+                          class="search-value-menuitem"></menuitem>
+              </menupopup>
+            </menulist>
+            <html:input type="number"
+                        class="input-inline search-value-textbox"
+                        inherits="disabled"/>
+            <hbox flex="1"
+                  class="search-value-custom"
+                  inherits="disabled"></hbox>
+          `)
         );
 
         // Initialize the priority picker.
         this.fillStringsForChildren(
           this.childNodes[1].querySelector("menupopup"),
           bundle
         );
 
@@ -1431,48 +1489,78 @@
     connectedCallback() {
       if (this.delayConnectedCallback() || this.hasChildNodes()) {
         return;
       }
       this.setAttribute("is", "ruleaction-richlistitem");
       this.appendChild(
         MozXULElement.parseXULToFragment(
           `
-      <menulist is="ruleactiontype-menulist" flex="&filterActionTypeFlexValue;">
-        <menupopup>
-          <menuitem label="&moveMessage.label;" value="movemessage" enablefornews="false"></menuitem>
-          <menuitem label="&copyMessage.label;" value="copymessage"></menuitem>
-          <menuseparator enablefornews="false"></menuseparator>
-          <menuitem label="&forwardTo.label;" value="forwardmessage" enablefornews="false"></menuitem>
-          <menuitem label="&replyWithTemplate.label;" value="replytomessage" enablefornews="false"></menuitem>
-          <menuseparator></menuseparator>
-          <menuitem label="&markMessageRead.label;" value="markasread"></menuitem>
-          <menuitem label="&markMessageUnread.label;" value="markasunread"></menuitem>
-          <menuitem label="&markMessageStarred.label;" value="markasflagged"></menuitem>
-          <menuitem label="&setPriority.label;" value="setpriorityto"></menuitem>
-          <menuitem label="&addTag.label;" value="addtagtomessage"></menuitem>
-          <menuitem label="&setJunkScore.label;" value="setjunkscore" enablefornews="false"></menuitem>
-          <menuseparator enableforpop3="true"></menuseparator>
-          <menuitem label="&deleteMessage.label;" value="deletemessage"></menuitem>
-          <menuitem label="&deleteFromPOP.label;" value="deletefrompopserver" enableforpop3="true"></menuitem>
-          <menuitem label="&fetchFromPOP.label;" value="fetchfrompopserver" enableforpop3="true"></menuitem>
-          <menuseparator></menuseparator>
-          <menuitem label="&ignoreThread.label;" value="ignorethread"></menuitem>
-          <menuitem label="&ignoreSubthread.label;" value="ignoresubthread"></menuitem>
-          <menuitem label="&watchThread.label;" value="watchthread"></menuitem>
-          <menuseparator></menuseparator>
-          <menuitem label="&stopExecution.label;" value="stopexecution"></menuitem>
-        </menupopup>
-      </menulist>
-      <ruleactiontarget-wrapper class="ruleactiontarget" flex="&filterActionTargetFlexValue;"></ruleactiontarget-wrapper>
-      <hbox>
-        <button class="small-button" label="+" tooltiptext="&addAction.tooltip;" oncommand="this.parentNode.parentNode.addRow();"></button>
-        <button class="small-button remove-small-button" label="−" tooltiptext="&removeAction.tooltip;" oncommand="this.parentNode.parentNode.removeRow();"></button>
-      </hbox>
-    `,
+          <menulist is="ruleactiontype-menulist" flex="&filterActionTypeFlexValue;">
+            <menupopup>
+              <menuitem label="&moveMessage.label;"
+                        value="movemessage"
+                        enablefornews="false"></menuitem>
+              <menuitem label="&copyMessage.label;"
+                        value="copymessage"></menuitem>
+              <menuseparator enablefornews="false"></menuseparator>
+              <menuitem label="&forwardTo.label;"
+                        value="forwardmessage"
+                        enablefornews="false"></menuitem>
+              <menuitem label="&replyWithTemplate.label;"
+                        value="replytomessage"
+                        enablefornews="false"></menuitem>
+              <menuseparator></menuseparator>
+              <menuitem label="&markMessageRead.label;"
+                        value="markasread"></menuitem>
+              <menuitem label="&markMessageUnread.label;"
+                        value="markasunread"></menuitem>
+              <menuitem label="&markMessageStarred.label;"
+                        value="markasflagged"></menuitem>
+              <menuitem label="&setPriority.label;"
+                        value="setpriorityto"></menuitem>
+              <menuitem label="&addTag.label;"
+                        value="addtagtomessage"></menuitem>
+              <menuitem label="&setJunkScore.label;"
+                        value="setjunkscore"
+                        enablefornews="false"></menuitem>
+              <menuseparator enableforpop3="true"></menuseparator>
+              <menuitem label="&deleteMessage.label;"
+                        value="deletemessage"></menuitem>
+              <menuitem label="&deleteFromPOP.label;"
+                        value="deletefrompopserver"
+                        enableforpop3="true"></menuitem>
+              <menuitem label="&fetchFromPOP.label;"
+                        value="fetchfrompopserver"
+                        enableforpop3="true"></menuitem>
+              <menuseparator></menuseparator>
+              <menuitem label="&ignoreThread.label;"
+                        value="ignorethread"></menuitem>
+              <menuitem label="&ignoreSubthread.label;"
+                        value="ignoresubthread"></menuitem>
+              <menuitem label="&watchThread.label;"
+                        value="watchthread"></menuitem>
+              <menuseparator></menuseparator>
+              <menuitem label="&stopExecution.label;"
+                        value="stopexecution"></menuitem>
+            </menupopup>
+          </menulist>
+          <ruleactiontarget-wrapper class="ruleactiontarget"
+                                    flex="&filterActionTargetFlexValue;"></ruleactiontarget-wrapper>
+          <hbox>
+            <button class="small-button"
+                    label="+"
+                    tooltiptext="&addAction.tooltip;"
+                    oncommand="this.parentNode.parentNode.addRow();"></button>
+            <button class="small-button remove-small-button"
+                    label="−"
+                    tooltiptext="&removeAction.tooltip;"
+                    oncommand="this.parentNode.parentNode.removeRow();"></button>
+          </hbox>
+          `,
           [
             "chrome://messenger/locale/messenger.dtd",
             "chrome://messenger/locale/FilterEditor.dtd",
           ]
         )
       );
 
       this.mRuleActionType = this.querySelector("menulist");
--- a/mailnews/db/gloda/content/autocomplete-richlistitem.js
+++ b/mailnews/db/gloda/content/autocomplete-richlistitem.js
@@ -233,33 +233,39 @@
 
     connectedCallback() {
       super.connectedCallback();
       if (this.delayConnectedCallback() || this.hasChildNodes()) {
         return;
       }
       this.appendChild(
         MozXULElement.parseXULToFragment(`
-        <image class="ac-type-picture"></image>
-        <vbox>
-          <hbox>
-            <hbox class="ac-title" flex="1" onunderflow="_doUnderflow('_name');">
-              <description class="ac-normal-text ac-comment"></description>
+          <image class="ac-type-picture"></image>
+          <vbox>
+            <hbox>
+              <hbox class="ac-title"
+                    flex="1"
+                    onunderflow="_doUnderflow('_name');">
+                <description class="ac-normal-text ac-comment"></description>
+              </hbox>
+              <label class="ac-ellipsis-after ac-comment"
+                     hidden="true"></label>
             </hbox>
-            <label class="ac-ellipsis-after ac-comment" hidden="true"></label>
-          </hbox>
-          <hbox>
-            <hbox class="ac-url" flex="1" onunderflow="_doUnderflow('_identity');">
-              <description class="ac-normal-text ac-url-text"></description>
+            <hbox>
+              <hbox class="ac-url"
+                    flex="1"
+                    onunderflow="_doUnderflow('_identity');">
+                <description class="ac-normal-text ac-url-text"></description>
+              </hbox>
+              <label class="ac-ellipsis-after ac-url-text"
+                     hidden="true"></label>
+              <image class="ac-type-icon"></image>
             </hbox>
-            <label class="ac-ellipsis-after ac-url-text" hidden="true"></label>
-            <image class="ac-type-icon"></image>
-          </hbox>
-        </vbox>
-      `)
+          </vbox>
+        `)
       );
 
       let ellipsis = "\u2026";
       try {
         ellipsis = Services.prefs.getComplexValue(
           "intl.ellipsis",
           Ci.nsIPrefLocalizedString
         ).data;
@@ -492,35 +498,42 @@
     connectedCallback() {
       super.connectedCallback();
       if (this.delayConnectedCallback() || this.hasChildNodes()) {
         return;
       }
 
       this.appendChild(
         MozXULElement.parseXULToFragment(`
-        <hbox class="gloda-single-identity">
-          <image class="picture"></image>
-          <vbox>
-            <hbox>
-              <hbox class="ac-title" flex="1" onunderflow="_doUnderflow('_name');">
-                <description class="ac-normal-text ac-comment"></description>
+          <hbox class="gloda-single-identity">
+            <image class="picture"></image>
+            <vbox>
+              <hbox>
+                <hbox class="ac-title"
+                      flex="1"
+                      onunderflow="_doUnderflow('_name');">
+                  <description class="ac-normal-text ac-comment"></description>
+                </hbox>
+                <label class="ac-ellipsis-after ac-comment"
+                       hidden="true"></label>
               </hbox>
-              <label class="ac-ellipsis-after ac-comment" hidden="true"></label>
-            </hbox>
-            <hbox>
-              <hbox class="ac-url" flex="1" onunderflow="_doUnderflow('_identity');">
-                <description class="ac-normal-text ac-url-text" inherits="selected"></description>
+              <hbox>
+                <hbox class="ac-url"
+                      flex="1"
+                      onunderflow="_doUnderflow('_identity');">
+                  <description class="ac-normal-text ac-url-text"
+                               inherits="selected"></description>
+                </hbox>
+                <label class="ac-ellipsis-after ac-url-text"
+                       hidden="true"></label>
+                <image class="ac-type-icon"></image>
               </hbox>
-              <label class="ac-ellipsis-after ac-url-text" hidden="true"></label>
-              <image class="ac-type-icon"></image>
-            </hbox>
-          </vbox>
-        </hbox>
-      `)
+            </vbox>
+          </hbox>
+        `)
       );
 
       let ellipsis = "\u2026";
       try {
         ellipsis = Services.prefs.getComplexValue(
           "intl.ellipsis",
           Ci.nsIPrefLocalizedString
         ).data;