foo.diff

diff --git a/src/devtools/client/webconsole/components/FilterBar/ConsoleSettings.js b/src/devtools/client/webconsole/components/FilterBar/ConsoleSettings.js
index 655efd4d..0e55cf79 100644
--- a/src/devtools/client/webconsole/components/FilterBar/ConsoleSettings.js
+++ b/src/devtools/client/webconsole/components/FilterBar/ConsoleSettings.js
@@ -5,7 +5,7 @@
 "use strict";
 
 // React & Redux
-const { Component } = require("react");
+const React = require("react");
 const { connect } = require("react-redux");
 const { createFactory } = require("react");
 const PropTypes = require("prop-types");
@@ -13,6 +13,7 @@ const PropTypes = require("prop-types");
 const { actions } = require("ui/actions");
 const { l10n } = require("devtools/client/webconsole/utils/messages");
 const { selectors } = require("ui/reducers");
+const Dropdown = require("ui/components/shared/Dropdown").default;
 
 // Additional Components
 const MenuButton = createFactory(require("devtools/client/shared/components/menu/MenuButton"));
@@ -22,7 +23,7 @@ const MenuList = createFactory(require("devtools/client/shared/components/menu/M
 
 const { FILTERS } = require("devtools/client/webconsole/constants");
 
-class ConsoleSettings extends Component {
+class ConsoleSettings extends React.Component {
   static get propTypes() {
     return {
       timestampsVisible: PropTypes.bool.isRequired,
@@ -146,17 +147,28 @@ class ConsoleSettings extends Component {
   }
 
   render() {
-    return MenuButton(
-      {
-        menuId: "webconsole-console-settings-menu-button",
-        toolboxDoc: document,
-        className: "devtools-button webconsole-console-settings-menu-button",
-        title: "Console Settings",
-      },
-      // We pass the children in a function so we don't require the MenuItem and MenuList
-      // components until we need to display them (i.e. when the button is clicked).
-      () => this.renderMenuItems()
+    return (
+      <Dropdown
+        buttonContent={<div>Yo</div>}
+        setExpanded={() => {}}
+        expanded={false}
+        buttonStyle={"secondary"}
+      >
+        <div>Hi</div>
+      </Dropdown>
     );
+    // This our console settings thing...
+    // return MenuButton(
+    //   {
+    //     menuId: "webconsole-console-settings-menu-button",
+    //     toolboxDoc: document,
+    //     className: "devtools-button webconsole-console-settings-menu-button",
+    //     title: "Console Settings",
+    //   },
+    //   // We pass the children in a function so we don't require the MenuItem and MenuList
+    //   // components until we need to display them (i.e. when the button is clicked).
+    //   () => this.renderMenuItems()
+    // );
   }
 }
 
diff --git a/src/devtools/client/webconsole/components/FilterBar/Events.js b/src/devtools/client/webconsole/components/FilterBar/Events.js
index 713f5b81..c3dca968 100644
--- a/src/devtools/client/webconsole/components/FilterBar/Events.js
+++ b/src/devtools/client/webconsole/components/FilterBar/Events.js
@@ -16,6 +16,7 @@ export function Events() {
     </>
   );
 
+  // Events dropdown
   return (
     <div className="event-breakpoints">
       <Dropdown