--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -312,17 +312,17 @@ checkbox:-moz-focusring {
 
 .devtools-button.checked::before,
 .devtools-toolbarbutton:not([label])[checked=true] > image,
 .devtools-toolbarbutton:not([label])[open=true] > image {
   fill: var(--theme-toolbar-checked-color);
 }
 
 /* Button states */
-.devtools-toolbarbutton[label]:not([type=menu-button]),
+.devtools-toolbarbutton[label],
 .devtools-toolbarbutton[standalone],
 .devtools-button[data-standalone],
 .devtools-button:not(:empty) {
   background: var(--toolbarbutton-background);
   padding: 0 5px;
 }
 
 .devtools-toolbarbutton:not([label]):hover,

--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -192,38 +192,21 @@ a {
 
 .hidden-message {
   display: block;
   visibility: hidden;
   height: 0;
   overflow: hidden;
 }
 
-/* WebConsole colored drops */
-
 .webconsole-filter-button {
   -moz-user-focus: normal;
 }
 
-.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
-  content: "";
-  display: inline-block;
-  height: 8px;
-  width: 8px;
-  border-radius: 50%;
-  margin-inline-start: 5px;
-  border-width: 1px;
-  border-style: solid;
-}
-
 /* Network styles */
-.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#444444, #000000);
-  border-color: #777;
-}
 
 .theme-dark .message[severity=error],
 .theme-dark .message.error {
   background-color: rgba(235, 83, 104, 0.17);
 }
 
 .console-string {
   color: var(--theme-highlight-lightorange);
@@ -292,20 +275,16 @@ a {
   font-size: 10px;
   padding: 1px 2px;
   line-height: 10px;
   margin-inline-start: 0;
   margin-inline-end: 1ex;
 }
 
 /* CSS styles */
-.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#2DC3F3, #00B6F0);
-  border-color: #1BA2CC;
-}
 
 .message[category=cssparser] > .indent,
 .message.cssparser > .indent  {
   border-inline-end: solid #00b6f0 6px;
 }
 
 .message[category=cssparser][severity=error] > .icon::before,
 .message.cssparser.error > .icon::before {
@@ -313,20 +292,16 @@ a {
 }
 
 .message[category=cssparser][severity=warn] > .icon::before,
 .message.cssparser.warn > .icon::before {
   background-position: -24px -12px;
 }
 
 /* JS styles */
-.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#FCB142, #FB9500);
-  border-color: #E98A00;
-}
 
 .message[category=exception] > .indent,
 .message.exception > .indent {
   border-inline-end: solid #fb9500 6px;
 }
 
 .message[category=exception][severity=error] > .icon::before,
 .message.exception.error > .icon::before {
@@ -334,20 +309,16 @@ a {
 }
 
 .message[category=exception][severity=warn] > .icon::before,
 .message.exception.warn > .icon::before {
   background-position: -24px -24px;
 }
 
 /* Web Developer styles */
-.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#B9B9B9, #AAAAAA);
-  border-color: #929292;
-}
 
 .message[category=console] > .indent,
 .message.console-api > .indent {
   border-inline-end: solid #cbcbcb 6px;
 }
 
 .message[category=console][severity=error] > .icon::before,
 .message[category=output][severity=error] > .icon::before,
@@ -362,21 +333,16 @@ a {
 
 .message[category=console][severity=info] > .icon::before,
 .message[category=server][severity=info] > .icon::before {
   background-position: -36px -36px;
 }
 
 /* Server Logging Styles */
 
-.webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(rgb(144, 176, 144), rgb(99, 151, 99));
-  border-color: rgb(76, 143, 76);
-}
-
 .message[category=server] > .indent,
 .message.server > .indent {
   border-inline-end: solid #90B090 6px;
 }
 
 /* Input and output styles */
 .message[category=input] > .indent,
 .message[category=output] > .indent,
@@ -532,21 +498,16 @@ textbox.jsterm-input-node[focused="true"
 
 /* Security styles */
 
 .message[category=security] > .indent,
 .message.security > .indent {
   border-inline-end: solid red 6px;
 }
 
-.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#FF3030, #FF7D7D);
-  border-color: #D12C2C;
-}
-
 .message[category=security][severity=error] > .icon::before,
 .message.security.error > .icon::before {
   background-position: -12px -48px;
 }
 
 .message[category=security][severity=warn] > .icon::before,
 .message.security.warn > .icon::before {
   background-position: -24px -48px;
@@ -649,72 +610,39 @@ a.learn-more-link.webconsole-learn-more-
 
 .elementNode:hover .open-inspector:active,
 .open-inspector:active {
   filter: var(--theme-icon-checked-filter) brightness(0.9);
 }
 
 
 /* Old console frontend filters */
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-  -moz-appearance: none;
-  color: inherit;
-  border-width: 0;
-  -moz-box-orient: horizontal;
-  padding: 0;
-}
-
-.devtools-toolbarbutton[type=menu-button] {
-  padding: 0 1px;
-  -moz-box-align: stretch;
-  --toolbarbutton-checked-color: var(--theme-body-color);
-  --toolbarbutton-checked-background: var(--theme-selection-background-hover);
-}
-
-.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
-  margin-inline-end: 4px;
-}
 
 .devtools-menulist > .menulist-dropmarker {
   -moz-appearance: none;
   display: -moz-box;
   list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
   -moz-box-align: center;
   min-width: 16px;
 }
 
-.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
+.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker {
   -moz-appearance: none !important;
   list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
   -moz-box-align: center;
   padding: 0 3px;
 }
 
 @media (max-width: 500px) {
   .message > .timestamp {
     display: none;
   }
-  .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
-    display: none;
-  }
-  .hud-console-filter-toolbar .webconsole-filter-button {
-    min-width: 40px;
-  }
   .hud-console-filter-toolbar .webconsole-clear-console-button {
     min-width: 25px;
   }
-  .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
-    width: 12px;
-    height: 12px;
-    margin-inline-start: 1px;
-  }
-  .toolbarbutton-menubutton-dropmarker {
-    margin: 0px;
-  }
 }
 
 @media (max-width: 300px) {
   .hud-console-filter-toolbar {
     -moz-box-orient: vertical;
   }
   .toolbarbutton-text {
     display: -moz-box;

--- a/devtools/client/webconsole/test/browser_console_keyboard_accessibility.js
+++ b/devtools/client/webconsole/test/browser_console_keyboard_accessibility.js
@@ -72,22 +72,9 @@ add_task(async function () {
      "jsterm input is focused");
 
   info("try ctrl-f to focus filter");
   synthesizeKeyShortcut(WCUL10n.getStr("webconsole.find.key"));
   ok(!hud.jsterm.inputNode.getAttribute("focused"),
      "jsterm input is not focused");
   is(hud.ui.filterBox.getAttribute("focused"), "true",
      "filter input is focused");
-
-  if (Services.appinfo.OS == "Darwin") {
-    ok(hud.ui.getFilterState("network"), "network category is enabled");
-    EventUtils.synthesizeKey("t", {ctrlKey: true});
-    ok(!hud.ui.getFilterState("network"), "accesskey for Network works");
-    EventUtils.synthesizeKey("t", {ctrlKey: true});
-    ok(hud.ui.getFilterState("network"), "accesskey for Network works (again)");
-  } else {
-    EventUtils.synthesizeKey("n", {altKey: true});
-    let net = hud.ui.document.querySelector("toolbarbutton[category=net]");
-    is(hud.ui.document.activeElement, net,
-       "accesskey for Network category focuses the Net button");
-  }
 });

--- a/devtools/client/webconsole/test/browser_webconsole_bug_601667_filter_buttons.js
+++ b/devtools/client/webconsole/test/browser_webconsole_bug_601667_filter_buttons.js
@@ -100,38 +100,35 @@ function testMenuFilterButton(category) 
   chooseMenuItem(firstMenuItem);
   ok(!isChecked(firstMenuItem), "the first menu item for category " +
      category + " is no longer checked after clicking it");
   ok(!hud.ui.filterPrefs[prefKey], prefKey + " messages are " +
      "turned off after clicking the appropriate menu item");
   ok(isChecked(button), "the button for category " + category + " is still " +
      "checked after turning off its first menu item");
 
-  // Turn all the filters off by clicking the main part of the button.
-  let subbutton = getMainButton(button);
-  ok(subbutton, "we have the subbutton for category " + category);
-
-  clickButton(subbutton);
+  // Turn all the filters off by shift clicking the button.
+  shiftClickButton(button);
   ok(!isChecked(button), "the button for category " + category + " is " +
      "no longer checked after clicking its main part");
 
   menuItem = firstMenuItem;
   while (menuItem) {
     prefKey = menuItem.getAttribute("prefKey");
     if (prefKey) {
       ok(!isChecked(menuItem), "menu item " + prefKey + " for category " +
          category + " is no longer checked after clicking the button");
       ok(!hud.ui.filterPrefs[prefKey], prefKey + " messages are " +
          "off after clicking the button");
     }
     menuItem = menuItem.nextSibling;
   }
 
-  // Turn all the filters on by clicking the main part of the button.
-  clickButton(subbutton);
+  // Turn all the filters on by shift clicking the button.
+  shiftClickButton(button);
 
   ok(isChecked(button), "the button for category " + category + " is " +
      "checked after clicking its main part");
 
   menuItem = firstMenuItem;
   while (menuItem) {
     if (menuItem.hasAttribute("prefKey")) {
       prefKey = menuItem.getAttribute("prefKey");
@@ -161,31 +158,27 @@ function testMenuFilterButton(category) 
       chooseMenuItem(menuItem);
     }
     menuItem = menuItem.nextSibling;
   }
 
   ok(!isChecked(button), "the button for category " + category + " is " +
      "unchecked after unchecking all its filters");
 
-  // Turn all the filters on again by clicking the button.
-  clickButton(subbutton);
+  // Turn all the filters on again by shift clicking the button.
+  shiftClickButton(button);
 }
 
 function testIsolateFilterButton(category) {
   let selector = ".webconsole-filter-button[category=\"" + category + "\"]";
   let targetButton = hudBox.querySelector(selector);
   ok(targetButton, "we have the \"" + category + "\" button");
 
-  // Get the main part of the filter button.
-  let subbutton = getMainButton(targetButton);
-  ok(subbutton, "we have the subbutton for category " + category);
-
-  // Turn on all the filters by alt clicking the main part of the button.
-  altClickButton(subbutton);
+  // Turn on all the filters by alt clicking the button.
+  altClickButton(targetButton);
   ok(isChecked(targetButton), "the button for category " + category +
      " is checked after isolating for filter");
 
   // Check if all the filters for the target button are on.
   let menuItems = targetButton.querySelectorAll("menuitem");
   Array.forEach(menuItems, (item) => {
     let prefKey = item.getAttribute("prefKey");
     // The CSS/Log filter should not be checked. See bug 971798.
@@ -217,19 +210,18 @@ function testIsolateFilterButton(categor
         if (prefKey) {
           ok(!isChecked(item), "menu item " + prefKey + " for category " +
             category + " is unchecked after isolating for " + category);
           ok(!hud.ui.filterPrefs[prefKey], prefKey + " messages are " +
             "turned off after isolating for " + category);
         }
       });
 
-      // Turn all the filters on again by clicking the button.
-      let mainButton = getMainButton(filterButton);
-      clickButton(mainButton);
+      // Turn all the filters on again by shift clicking the button.
+      shiftClickButton(targetButton);
     }
   });
 }
 
 /**
  * Return the main part of the target filter button.
  */
 function getMainButton(targetButton) {
@@ -250,16 +242,20 @@ function getMainButton(targetButton) {
 function clickButton(node) {
   EventUtils.sendMouseEvent({ type: "click" }, node);
 }
 
 function altClickButton(node) {
   EventUtils.sendMouseEvent({ type: "click", altKey: true }, node);
 }
 
+function shiftClickButton(node) {
+  EventUtils.sendMouseEvent({ type: "click", shiftKey: true }, node);
+}
+
 function chooseMenuItem(node) {
   let event = document.createEvent("XULCommandEvent");
   event.initCommandEvent("command", true, true, window, 0, false, false, false,
                          false, null, 0);
   node.dispatchEvent(event);
 }
 
 function isChecked(node) {

--- a/devtools/client/webconsole/test/browser_webconsole_filter_buttons_contextmenu.js
+++ b/devtools/client/webconsole/test/browser_webconsole_filter_buttons_contextmenu.js
@@ -25,17 +25,16 @@ function testFilterButtons(aHud) {
     .then(() => testRightClick("security", hudBox, aHud))
     .then(finishTest);
 }
 
 function testRightClick(aCategory, hudBox, aHud) {
   let deferred = defer();
   let selector = ".webconsole-filter-button[category=\"" + aCategory + "\"]";
   let button = hudBox.querySelector(selector);
-  let mainButton = getMainButton(button, aHud);
   let origCheckedState = button.getAttribute("aria-pressed");
   let contextMenu = aHud.iframeWindow.document.getElementById(aCategory + "-contextmenu");
 
   function verifyContextMenuIsClosed() {
     info("verify the context menu is closed");
     is(button.getAttribute("open"), false, "The context menu for the \"" +
        aCategory + "\" button is closed");
   }
@@ -58,38 +57,23 @@ function testRightClick(aCategory, hudBo
     executeSoon(() => {
       verifyContextMenuIsClosed();
       verifyOriginalCheckedState();
       leftClickToChangeCheckedState();
     });
   }
 
   function leftClickToChangeCheckedState() {
-    info("left click the mainbutton to change checked state");
-    EventUtils.sendMouseEvent({type: "click"}, mainButton);
+    info("shift click the button to change checked state");
+    EventUtils.sendMouseEvent({type: "click", shiftKey: true}, button);
     executeSoon(() => {
       verifyContextMenuIsClosed();
       verifyNewCheckedState();
       deferred.resolve();
     });
   }
 
   verifyContextMenuIsClosed();
   info("right click the button to open the context menu");
-  waitForContextMenu(contextMenu, mainButton, verifyOriginalCheckedState,
+  waitForContextMenu(contextMenu, button, verifyOriginalCheckedState,
                      leftClickToClose);
   return deferred.promise;
 }
-
-function getMainButton(aTargetButton, aHud) {
-  let anonymousNodes = aHud.ui.document.getAnonymousNodes(aTargetButton);
-  let subbutton;
-
-  for (let i = 0; i < anonymousNodes.length; i++) {
-    let node = anonymousNodes[i];
-    if (node.classList.contains("toolbarbutton-menubutton-button")) {
-      subbutton = node;
-      break;
-    }
-  }
-
-  return subbutton;
-}

--- a/devtools/client/webconsole/webconsole.js
+++ b/devtools/client/webconsole/webconsole.js
@@ -807,21 +807,20 @@ WebConsoleFrame.prototype = {
 
         if (originalTarget.localName !== "toolbarbutton") {
           // Oddly enough, the click event is sent to the menu button when
           // selecting a menu item with the mouse. Detect this case and bail
           // out.
           break;
         }
 
-        if (!classes.contains("toolbarbutton-menubutton-button") &&
-            originalTarget.getAttribute("type") === "menu-button") {
-          // This is a filter button with a drop-down. The user clicked the
-          // drop-down, so do nothing. (The menu will automatically appear
-          // without our intervention.)
+        if (!event.getModifierState("Alt") &&
+            !event.getModifierState("Shift")) {
+          // Do nothing unless the click is modified. (The menu will
+          // automatically appear without our intervention.)
           break;
         }
 
         // Toggle on the targeted filter button, and if the user alt clicked,
         // toggle off all other filter buttons and their associated filters.
         let state = target.getAttribute("checked") !== "true";
         if (event.getModifierState("Alt")) {
           let buttons = this.document

--- a/devtools/client/webconsole/webconsole.xul
+++ b/devtools/client/webconsole/webconsole.xul
@@ -75,74 +75,74 @@ function goUpdateConsoleCommands() {
   <box class="hud-outer-wrapper devtools-responsive-container theme-body" flex="1">
     <vbox class="hud-console-wrapper devtools-main-content" flex="1">
       <toolbar class="hud-console-filter-toolbar devtools-toolbar" mode="full">
         <toolbarbutton class="webconsole-clear-console-button devtools-toolbarbutton devtools-clear-icon"
                        tooltiptext="&btnClear.tooltip;"
                        accesskey="&btnClear.accesskey;"
                        tabindex="3"/>
         <hbox class="devtools-toolbarbutton-group">
-          <toolbarbutton label="&btnPageNet.label;" type="menu-button"
+          <toolbarbutton label="&btnPageNet.label;" type="menu"
                          category="net" class="devtools-toolbarbutton webconsole-filter-button"
                          tooltiptext="&btnPageNet.tooltip;"
                          accesskeyMacOSX="&btnPageNet.accesskeyMacOSX;"
                          accesskey="&btnPageNet.accesskey;"
                          tabindex="4">
             <menupopup id="net-contextmenu">
               <menuitem label="&btnConsoleErrors;" type="checkbox" autocheck="false"
                         prefKey="network"/>
               <menuitem label="&btnConsoleWarnings;" type="checkbox" autocheck="false"
                         prefKey="netwarn"/>
               <menuitem label="&btnConsoleXhr;" type="checkbox" autocheck="false"
                         prefKey="netxhr"/>
               <menuitem label="&btnConsoleLog;" type="checkbox" autocheck="false"
                         prefKey="networkinfo"/>
             </menupopup>
           </toolbarbutton>
-          <toolbarbutton label="&btnPageCSS.label;" type="menu-button"
+          <toolbarbutton label="&btnPageCSS.label;" type="menu"
                          category="css" class="devtools-toolbarbutton webconsole-filter-button"
                          tooltiptext="&btnPageCSS.tooltip2;"
                          accesskey="&btnPageCSS.accesskey;"
                          tabindex="5">
             <menupopup id="css-contextmenu">
               <menuitem label="&btnConsoleErrors;" type="checkbox" autocheck="false"
                         prefKey="csserror"/>
               <menuitem label="&btnConsoleWarnings;" type="checkbox"
                         autocheck="false" prefKey="cssparser"/>
               <menuitem label="&btnConsoleReflows;" type="checkbox"
                         autocheck="false" prefKey="csslog"/>
             </menupopup>
           </toolbarbutton>
-          <toolbarbutton label="&btnPageJS.label;" type="menu-button"
+          <toolbarbutton label="&btnPageJS.label;" type="menu"
                          category="js" class="devtools-toolbarbutton webconsole-filter-button"
                          tooltiptext="&btnPageJS.tooltip;"
                          accesskey="&btnPageJS.accesskey;"
                          tabindex="6">
             <menupopup id="js-contextmenu">
               <menuitem label="&btnConsoleErrors;" type="checkbox"
                         autocheck="false" prefKey="exception"/>
               <menuitem label="&btnConsoleWarnings;" type="checkbox"
                         autocheck="false" prefKey="jswarn"/>
               <menuitem label="&btnConsoleLog;" type="checkbox"
                         autocheck="false" prefKey="jslog"/>
             </menupopup>
           </toolbarbutton>
-          <toolbarbutton label="&btnPageSecurity.label;" type="menu-button"
+          <toolbarbutton label="&btnPageSecurity.label;" type="menu"
                          category="security" class="devtools-toolbarbutton webconsole-filter-button"
                          tooltiptext="&btnPageSecurity.tooltip;"
                          accesskey="&btnPageSecurity.accesskey;"
                          tabindex="7">
             <menupopup id="security-contextmenu">
               <menuitem label="&btnConsoleErrors;" type="checkbox"
                         autocheck="false" prefKey="secerror"/>
               <menuitem label="&btnConsoleWarnings;" type="checkbox"
                         autocheck="false" prefKey="secwarn"/>
             </menupopup>
           </toolbarbutton>
-          <toolbarbutton label="&btnPageLogging.label;" type="menu-button"
+          <toolbarbutton label="&btnPageLogging.label;" type="menu"
                          category="logging" class="devtools-toolbarbutton webconsole-filter-button"
                          tooltiptext="&btnPageLogging.tooltip;"
                          accesskey="&btnPageLogging.accesskey3;"
                          tabindex="8">
             <menupopup id="logging-contextmenu">
               <menuitem label="&btnConsoleErrors;" type="checkbox"
                         autocheck="false" prefKey="error"/>
               <menuitem label="&btnConsoleWarnings;" type="checkbox"
@@ -155,17 +155,17 @@ function goUpdateConsoleCommands() {
               <menuitem label="&btnConsoleSharedWorkers;" type="checkbox"
                         autocheck="false" prefKey="sharedworkers"/>
               <menuitem label="&btnConsoleServiceWorkers;" type="checkbox"
                         autocheck="false" prefKey="serviceworkers"/>
               <menuitem label="&btnConsoleWindowlessWorkers;" type="checkbox"
                         autocheck="false" prefKey="windowlessworkers"/>
             </menupopup>
           </toolbarbutton>
-          <toolbarbutton label="&btnServerLogging.label;" type="menu-button"
+          <toolbarbutton label="&btnServerLogging.label;" type="menu"
                          category="server" class="devtools-toolbarbutton webconsole-filter-button"
                          tooltiptext="&btnServerLogging.tooltip;"
                          accesskey="&btnServerLogging.accesskey;"
                          tabindex="9">
             <menupopup id="server-logging-contextmenu">
               <menuitem label="&btnServerErrors;" type="checkbox"
                         autocheck="false" prefKey="servererror"/>
               <menuitem label="&btnServerWarnings;" type="checkbox"