Bug 1640493 - stop including dropmarkers in all toolbarbuttons, r=mak

This makes dropmarkers 'optional extras', effectively, and opts the existing
consumers I could find (the places window on macOS, and the 'more engines'
item in the search field popup) into these dropmarkers.

This allows removing all the CSS that was hiding these items in various
places.

We deliberately do not support adding dropmarkers at runtime. I also noticed
that the 'more engines' item already adds the 'badged' attribute after
connecting the node to the DOM, which may result in it not applying properly,
and fixed this.

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

browser/components/places/content/places.xhtml

@@ -166,7 +166,7 @@
                      disabled="true"/>
 
 #ifdef XP_MACOSX
-        <toolbarbutton type="menu" class="tabbable"
+        <toolbarbutton type="menu" class="tabbable" wantdropmarker="true"
               onpopupshowing="document.getElementById('placeContent').focus()"
 #else
       <menubar id="placesMenu">
@@ -244,7 +244,7 @@
           </menupopup>
 #ifdef XP_MACOSX
         </toolbarbutton>
-        <toolbarbutton type="menu" class="tabbable"
+        <toolbarbutton type="menu" class="tabbable" wantdropmarker="true"
 #else
         </menu>
         <menu accesskey="&views.accesskey;" class="menu-iconic"
@@ -278,7 +278,7 @@
           </menupopup>
 #ifdef XP_MACOSX
         </toolbarbutton>
-        <toolbarbutton type="menu" class="tabbable"
+        <toolbarbutton type="menu" class="tabbable" wantdropmarker="true"
 #else
         </menu>
         <menu accesskey="&maintenance.accesskey;" class="menu-iconic"

browser/components/search/content/search-one-offs.js

@@ -580,10 +580,10 @@ class SearchOneOffs {
     if (tooManyEngines) {
       // Make the top-level menu button.
       let button = document.createXULElement("toolbarbutton");
-      list.appendChild(button);
       button.classList.add("addengine-menu-button", "addengine-item");
       button.setAttribute("badged", "true");
       button.setAttribute("type", "menu");
+      button.setAttribute("wantdropmarker", "true");
       button.setAttribute(
         "label",
         this.bundle.GetStringFromName("cmd_addFoundEngineMenu")
@@ -598,6 +598,7 @@ class SearchOneOffs {
       if (engine.icon) {
         button.setAttribute("image", engine.icon);
       }
+      list.appendChild(button);
 
       // Now make the button's child menupopup.
       list = document.createXULElement("menupopup");

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

@@ -1407,12 +1407,6 @@ menuitem.panel-subview-footer@menuStateActive@,
   border-radius: 50%;
 }
 
-toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
-#bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menu-dropmarker,
-#bookmarks-menu-button[overflowedItem] > .toolbarbutton-menu-dropmarker {
-  display: none;
-}
-
 #search-container[cui-areatype="menu-panel"] {
   padding-block: 6px;
 }

browser/themes/shared/toolbarbuttons.inc.css

@@ -132,11 +132,6 @@ toolbar .toolbarbutton-1 > .toolbarbutton-icon {
   height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
 }
 
-.bookmark-item > .toolbarbutton-menu-dropmarker,
-toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
-  display: none;
-}
-
 toolbar .toolbarbutton-1 > .toolbarbutton-text {
   padding-top: var(--toolbarbutton-vertical-text-padding);
   padding-bottom: 0;

toolkit/content/widgets/toolbarbutton.js

@@ -49,7 +49,7 @@
         <image class="toolbarbutton-icon"></image>
         <label class="toolbarbutton-text" crop="right" flex="1"></label>
         <label class="toolbarbutton-multiline-text" flex="1"></label>
-        <dropmarker type="menu" class="toolbarbutton-menu-dropmarker"></dropmarker>`),
+        `),
         true
       );
       Object.defineProperty(this, "fragment", { value: frag });
@@ -65,14 +65,24 @@
         </stack>
         <label class="toolbarbutton-text" crop="right" flex="1"/>
         <label class="toolbarbutton-multiline-text" flex="1"/>
-        <dropmarker anonid="dropmarker" type="menu"
-                    class="toolbarbutton-menu-dropmarker"/>`),
+        `),
         true
       );
       Object.defineProperty(this, "badgedFragment", { value: frag });
       return frag;
     }
 
+    static get dropmarkerFragment() {
+      let frag = document.importNode(
+        MozXULElement.parseXULToFragment(`
+          <dropmarker type="menu" class="toolbarbutton-menu-dropmarker"></dropmarker>
+        `),
+        true
+      );
+      Object.defineProperty(this, "dropmarkerFragment", { value: frag });
+      return frag;
+    }
+
     get _hasRendered() {
       return this.querySelector(":scope > .toolbarbutton-text") != null;
     }
@@ -109,6 +119,10 @@
 
         this.appendChild(this.constructor.badgedFragment.cloneNode(true));
 
+        if (this.hasAttribute("wantdropmarker")) {
+          this.appendChild(this.constructor.dropmarkerFragment.cloneNode(true));
+        }
+
         if (moveChildren.length) {
           let { badgeStack, icon } = this;
           for (let child of moveChildren) {
@@ -131,6 +145,10 @@
 
         this.appendChild(this.constructor.fragment.cloneNode(true));
 
+        if (this.hasAttribute("wantdropmarker")) {
+          this.appendChild(this.constructor.dropmarkerFragment.cloneNode(true));
+        }
+
         // XBL toolbarbutton explicitly places any <box> children
         // right before the menu marker.
         for (let child of moveChildren) {

toolkit/content/xul.css

@@ -117,7 +117,6 @@ label html|span.accesskey {
 
 /********** toolbarbutton **********/
 
-toolbarbutton:not([type="menu"]) > .toolbarbutton-menu-dropmarker,
 toolbar[mode="icons"] .toolbarbutton-text,
 toolbar[mode="icons"] .toolbarbutton-multiline-text,
 toolbar[mode="text"] .toolbarbutton-icon,