Bug 1631490 - Settings dropdown should live in toolbox document r=Honza

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

devtools/client/netmonitor/src/app.js

@@ -70,6 +70,7 @@ NetMonitorApp.prototype = {
       openLink,
       openSplitConsole,
       sourceMapService,
+      toolboxDoc: toolbox.doc,
     });
 
     // Render the root Application component.

devtools/client/netmonitor/src/assets/styles/Toolbar.css

@@ -82,17 +82,6 @@
   margin-inline-end: 7px;
 }
 
-/* Options menu */
-
-#netmonitor-settings-menu-button.tooltip-container[type="doorhanger"] .menuitem > .command[role="menuseparator"] {
-  padding-top: 0;
-  margin-bottom: 6px;
-}
-
-#netmonitor-settings-menu-button.tooltip-container[type="doorhanger"] .menuitem > .command[disabled] {
-  opacity: 0.5;
-}
-
 /* Hide filter input learn more link if there is not enough
    horizontal space. */
 @media (max-width: 590px) {

devtools/client/netmonitor/src/components/App.js

@@ -52,6 +52,8 @@ class App extends Component {
       sourceMapService: PropTypes.object,
       // True if the stats panel is opened.
       statisticsOpen: PropTypes.bool.isRequired,
+      // Document which settings menu will be injected to
+      toolboxDoc: PropTypes.object.isRequired,
     };
   }
 
@@ -65,6 +67,7 @@ class App extends Component {
       openSplitConsole,
       sourceMapService,
       statisticsOpen,
+      toolboxDoc,
     } = this.props;
 
     return div(
@@ -81,6 +84,7 @@ class App extends Component {
               openSplitConsole,
               sourceMapService,
               openLink,
+              toolboxDoc,
             })
           )
         : StatisticsPanel({

devtools/client/netmonitor/src/components/MonitorPanel.js

@@ -68,6 +68,7 @@ class MonitorPanel extends Component {
       isEmpty: PropTypes.bool.isRequired,
       networkDetailsOpen: PropTypes.bool.isRequired,
       openNetworkDetails: PropTypes.func.isRequired,
+      toolboxDoc: PropTypes.object.isRequired,
       // Callback for opening split console.
       openSplitConsole: PropTypes.func,
       onNetworkDetailsResized: PropTypes.func.isRequired,
@@ -205,6 +206,7 @@ class MonitorPanel extends Component {
       openLink,
       openSplitConsole,
       sourceMapService,
+      toolboxDoc,
     } = this.props;
 
     const initialWidth = Services.prefs.getIntPref(
@@ -222,6 +224,7 @@ class MonitorPanel extends Component {
         connector,
         openSplitConsole,
         singleRow: this.state.isSingleRow,
+        toolboxDoc,
       }),
       SplitBox({
         className: "devtools-responsive-container",

devtools/client/netmonitor/src/components/Toolbar.js

@@ -54,7 +54,7 @@ const SearchBox = createFactory(
   require("devtools/client/shared/components/SearchBox")
 );
 
-const { button, div, input, label, span } = dom;
+const { button, div, input, label, span, hr } = dom;
 
 // Localization
 const FILTER_KEY_SHORTCUT = L10N.getStr(
@@ -168,6 +168,7 @@ class Toolbar extends Component {
       networkActionBarSelectedPanel: PropTypes.string.isRequired,
       hasBlockedRequests: PropTypes.bool.isRequired,
       selectedRequest: PropTypes.object,
+      toolboxDoc: PropTypes.object.isRequired,
     };
   }
 
@@ -465,10 +466,11 @@ class Toolbar extends Component {
   }
 
   renderSettingsMenuButton() {
+    const { toolboxDoc } = this.props;
     return MenuButton(
       {
         menuId: "netmonitor-settings-menu-button",
-        toolboxDoc: document,
+        toolboxDoc,
         className: "devtools-button netmonitor-settings-menu-button",
         title: L10N.getStr("netmonitor.settings.menuTooltip"),
       },
@@ -498,7 +500,7 @@ class Toolbar extends Component {
         tooltip: L10N.getStr("netmonitor.toolbar.enablePersistentLogs.tooltip"),
         onClick: () => togglePersistentLogs(),
       }),
-      MenuItem({ role: "menuseparator", key: "har-separator", label: "" }),
+      hr(),
       MenuItem({
         key: "request-list-context-import-har",
         className: "menu-item netmonitor-settings-import-har-item",

devtools/client/netmonitor/test/head.js

@@ -1018,11 +1018,15 @@ function openSettingsMenu(monitor) {
 function clickSettingsMenuItem(monitor, itemKey) {
   openSettingsMenu(monitor);
   const node = getSettingsMenuItem(monitor, itemKey);
-  node?.click();
+  node.click();
 }
 
 function getSettingsMenuItem(monitor, itemKey) {
-  const { document } = monitor.panelWin;
+  // The settings menu is injected into the toolbox document,
+  // so we must use the panelWin parent to query for items
+  const { parent } = monitor.panelWin;
+  const { document } = parent;
+
   return document.querySelector(SETTINGS_MENU_ITEMS[itemKey]);
 }
 

devtools/client/themes/tooltips.css

@@ -433,6 +433,10 @@ strong {
   box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
 }
 
+.tooltip-container[type="doorhanger"] .menuitem > .command[disabled] {
+  opacity: 0.5;
+}
+
 .tooltip-container[type="doorhanger"] .menuitem > .command[aria-checked="true"] {
   list-style-image: none;
   -moz-context-properties: fill;