Bug 1467572 - Part 10: Reuse the network throttling menu in the network monitor in RDM. r=Honza

- Removes the duplicate dropdown arrow icon that is used in both RDM and Network monitor
- Converts the network throttling menu in the network monitor to be a shared component that
can be used in both RDM and network monitor
- Move the common styles for the dropdown menu button into toolbars.css

--HG--
rename : devtools/client/shared/components/throttling/NetworkThrottlingSelector.js => devtools/client/shared/components/throttling/NetworkThrottlingMenu.js

devtools/client/locales/en-US/network-throttling.properties

@@ -2,7 +2,7 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-# LOCALIZATION NOTE These strings are used inside the NetworkThrottlingSelector
+# LOCALIZATION NOTE These strings are used inside the NetworkThrottlingMenu
 # component used to throttle network bandwidth.
 #
 # The correct localization of this file might be to keep it in

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

@@ -73,33 +73,13 @@
   background-image: var(--play-icon-url);
 }
 
-.devtools-button.devtools-har-button {
-  margin: 0 0 0 2px;
-  padding: 0;
-}
-
-/* style for dropdown button */
-.devtools-drop-down-button {
-  background-image: var(--select-arrow-image)  !important;
-  background-repeat: no-repeat !important;
-  margin-inline-start: 6px;
-  fill: var(--theme-toolbar-photon-icon-color);
-  -moz-context-properties: fill;
-}
-
-/* style for title holder inside a dropdown button */
-.devtools-drop-down-button .title {
-  padding-top: 0.15em;
-  text-align: center;
-  overflow: hidden;
-  display: inline-block;
-}
-
 /* HAR button */
 
 #devtools-har-button {
   width: 35px;
-  padding-right: 12px;
+  margin-inline-start: 2px;
+  padding-inline-start: 0;
+  padding-inline-end: 12px;
   background-position: right center;
 }
 
@@ -108,8 +88,10 @@
   width: 24px;
 }
 
-#devtools-har-button:not(:hover) {
-  background-color: transparent;
+/* Throttling Button */
+
+#network-throttling-menu {
+  margin-inline-start: 6px;
 }
 
 .devtools-checkbox {
@@ -132,24 +114,6 @@
   margin-inline-end: 7px;
 }
 
-/* Throttling Button */
-
-#global-network-throttling-selector:not(:hover) {
-  background-color: transparent;
-}
-
-#global-network-throttling-selector {
-  width: 92px;
-  background-position: right 4px center;
-  padding-left: 0;
-  overflow: hidden;
-}
-
-/* Make sure spacing between text and icon is uniform*/
-#global-network-throttling-selector .title{
-  width: 85%;
-}
-
 /* Filter input within the Toolbar */
 
 .devtools-toolbar-group .devtools-filterinput {

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

@@ -17,7 +17,6 @@ const {
   getTypeFilteredRequests,
 } = require("../selectors/index");
 const { autocompleteProvider } = require("../utils/filter-autocomplete-provider");
-const { LocalizationHelper } = require("devtools/shared/l10n");
 const { L10N } = require("../utils/l10n");
 const { fetchNetworkUpdatePacket } = require("../utils/request-utils");
 
@@ -28,6 +27,7 @@ const {
 const LEARN_MORE_URL = getFilterBoxURL();
 
 // Components
+const NetworkThrottlingMenu = createFactory(require("devtools/client/shared/components/throttling/NetworkThrottlingMenu"));
 const SearchBox = createFactory(require("devtools/client/shared/components/SearchBox"));
 
 const { button, div, input, label, span } = dom;
@@ -51,9 +51,6 @@ const ENABLE_PERSISTENT_LOGS_LABEL =
   L10N.getStr("netmonitor.toolbar.enablePersistentLogs.label");
 const DISABLE_CACHE_TOOLTIP = L10N.getStr("netmonitor.toolbar.disableCache.tooltip");
 const DISABLE_CACHE_LABEL = L10N.getStr("netmonitor.toolbar.disableCache.label");
-const NO_THROTTLING_LABEL = new LocalizationHelper(
-  "devtools/client/locales/network-throttling.properties"
-  ).getStr("responsive.noThrottling");
 
 // Menu
 loader.lazyRequireGetter(this, "showMenu", "devtools/client/shared/components/menu/utils", true);
@@ -61,7 +58,6 @@ loader.lazyRequireGetter(this, "HarMenuUtils", "devtools/client/netmonitor/src/h
 
 // Throttling
 const Types = require("devtools/client/shared/components/throttling/types");
-const throttlingProfiles = require("devtools/client/shared/components/throttling/profiles");
 const { changeNetworkThrottling } = require("devtools/client/shared/components/throttling/actions");
 
 /**
@@ -282,54 +278,18 @@ class Toolbar extends Component {
   }
 
   /**
-   * Render network throttling selector button.
+   * Render network throttling menu button.
    */
-  renderThrottlingSelector() {
-    const {
-      networkThrottling,
-    } = this.props;
-
-    const selectedProfile = networkThrottling.enabled ?
-      networkThrottling.profile : NO_THROTTLING_LABEL;
-    return button({
-      id: "global-network-throttling-selector",
-      title: selectedProfile,
-      className: "devtools-button devtools-drop-down-button",
-      onClick: evt => {
-        this.showThrottlingSelector(evt.target);
-      },
-    },
-    dom.span({className: "title"},
-      selectedProfile)
-    );
-  }
-
-  showThrottlingSelector(menuButton) {
+  renderThrottlingMenu() {
     const {
       networkThrottling,
       onChangeNetworkThrottling,
     } = this.props;
 
-    const menuItems = throttlingProfiles.map(profile => {
-      return {
-        label: profile.id,
-        type: "checkbox",
-        checked: networkThrottling.enabled &&
-          (profile.id == networkThrottling.profile),
-        click: () => onChangeNetworkThrottling(true, profile.id),
-      };
+    return NetworkThrottlingMenu({
+      networkThrottling,
+      onChangeNetworkThrottling,
     });
-
-    menuItems.unshift("-");
-
-    menuItems.unshift({
-      label: NO_THROTTLING_LABEL,
-      type: "checkbox",
-      checked: !networkThrottling.enabled,
-      click: () => onChangeNetworkThrottling(false, ""),
-    });
-
-    showMenu(menuItems, { button: menuButton });
   }
 
   /**
@@ -339,7 +299,7 @@ class Toolbar extends Component {
     return button({
       id: "devtools-har-button",
       title: TOOLBAR_HAR_BUTTON,
-      className: "devtools-button devtools-har-button devtools-drop-down-button",
+      className: "devtools-button devtools-dropdown-button",
       onClick: evt => {
         this.showHarMenu(evt.target);
       },
@@ -438,7 +398,7 @@ class Toolbar extends Component {
           this.renderPersistlogCheckbox(persistentLogsEnabled, togglePersistentLogs),
           this.renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache),
           this.renderSeparator(),
-          this.renderThrottlingSelector(),
+          this.renderThrottlingMenu(),
           this.renderHarButton(),
         )
       )
@@ -454,7 +414,7 @@ class Toolbar extends Component {
           this.renderPersistlogCheckbox(persistentLogsEnabled, togglePersistentLogs),
           this.renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache),
           this.renderSeparator(),
-          this.renderThrottlingSelector(),
+          this.renderThrottlingMenu(),
           this.renderHarButton(),
         ),
         span({ className: "devtools-toolbar-group devtools-toolbar-two-rows-2" },

devtools/client/responsive.html/components/Toolbar.js

@@ -10,7 +10,7 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const DevicePixelRatioSelector = createFactory(require("./DevicePixelRatioSelector"));
 const DeviceSelector = createFactory(require("./DeviceSelector"));
-const NetworkThrottlingSelector = createFactory(require("devtools/client/shared/components/throttling/NetworkThrottlingSelector"));
+const NetworkThrottlingMenu = createFactory(require("devtools/client/shared/components/throttling/NetworkThrottlingMenu"));
 const SettingsMenu = createFactory(require("./SettingsMenu"));
 const ViewportDimension = createFactory(require("./ViewportDimension"));
 
@@ -104,9 +104,10 @@ class Toolbar extends PureComponent {
           onChangePixelRatio,
         }),
         dom.div({ className: "devtools-separator" }),
-        NetworkThrottlingSelector({
+        NetworkThrottlingMenu({
           networkThrottling,
           onChangeNetworkThrottling,
+          useTopLevelWindow: true,
         }),
         dom.div({ className: "devtools-separator" }),
         dom.button({

devtools/client/responsive.html/index.css

@@ -5,7 +5,7 @@
  * CSS Variables specific to the responsive design mode
  */
 
-.theme-light {
+:root {
   --rdm-box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
   --submit-button-active-background-color: rgba(0,0,0,0.12);
   --submit-button-active-color: var(--theme-body-color);
@@ -14,7 +14,7 @@
   --viewport-active-color: #3b3b3b;
 }
 
-.theme-dark {
+:root.theme-dark {
   --rdm-box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26);
   --submit-button-active-background-color: var(--theme-toolbar-hover-active);
   --submit-button-active-color: var(--theme-selection-color);
@@ -212,12 +212,6 @@ select > option.divider {
   opacity: 1 !important;
 }
 
-#network-throttling-selector {
-  height: 15px;
-  padding-left: 0;
-  width: 103px;
-}
-
 #device-pixel-ratio-selector {
   -moz-user-select: none;
   color: var(--viewport-color);

devtools/client/shared/components/throttling/NetworkThrottlingMenu.js

@@ -0,0 +1,93 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const throttlingProfiles = require("./profiles");
+const Types = require("./types");
+
+// Localization
+const { LocalizationHelper } = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/network-throttling.properties");
+const NO_THROTTLING_LABEL = L10N.getStr("responsive.noThrottling");
+
+loader.lazyRequireGetter(this, "showMenu", "devtools/client/shared/components/menu/utils", true);
+
+/**
+ * This component represents selector button that can be used
+ * to throttle network bandwidth.
+ */
+class NetworkThrottlingMenu extends PureComponent {
+  static get propTypes() {
+    return {
+      networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
+      onChangeNetworkThrottling: PropTypes.func.isRequired,
+      useTopLevelWindow: PropTypes.bool,
+    };
+  }
+
+  static get defaultProps() {
+    return {
+      useTopLevelWindow: false,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.onShowThrottlingMenu = this.onShowThrottlingMenu.bind(this);
+  }
+
+  onShowThrottlingMenu(event) {
+    const {
+      networkThrottling,
+      onChangeNetworkThrottling,
+      useTopLevelWindow,
+    } = this.props;
+
+    const menuItems = throttlingProfiles.map(profile => {
+      return {
+        label: profile.id,
+        type: "checkbox",
+        checked: networkThrottling.enabled && profile.id == networkThrottling.profile,
+        click: () => onChangeNetworkThrottling(true, profile.id),
+      };
+    });
+
+    menuItems.unshift("-");
+
+    menuItems.unshift({
+      label: NO_THROTTLING_LABEL,
+      type: "checkbox",
+      checked: !networkThrottling.enabled,
+      click: () => onChangeNetworkThrottling(false, ""),
+    });
+
+    showMenu(menuItems, { button: event.target, useTopLevelWindow });
+  }
+
+  render() {
+    const { networkThrottling } = this.props;
+    const selectedProfile = networkThrottling.enabled ?
+      networkThrottling.profile : NO_THROTTLING_LABEL;
+
+    return (
+      dom.button(
+        {
+          id: "network-throttling-menu",
+          className: "devtools-button devtools-dropdown-button",
+          title: selectedProfile,
+          onClick: this.onShowThrottlingMenu,
+        },
+        dom.span({ className: "title" }, selectedProfile)
+      )
+    );
+  }
+}
+
+module.exports = NetworkThrottlingMenu;

devtools/client/shared/components/throttling/NetworkThrottlingSelector.js

@@ -1,112 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-const { PureComponent } = require("devtools/client/shared/vendor/react");
-const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const dom = require("devtools/client/shared/vendor/react-dom-factories");
-
-const Types = require("./types");
-const throttlingProfiles = require("./profiles");
-
-// Localization
-const { LocalizationHelper } = require("devtools/shared/l10n");
-const L10N = new LocalizationHelper(
-  "devtools/client/locales/network-throttling.properties");
-
-/**
- * This component represents selector button that can be used
- * to throttle network bandwidth.
- */
-class NetworkThrottlingSelector extends PureComponent {
-  static get propTypes() {
-    return {
-      className: PropTypes.string,
-      networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
-      onChangeNetworkThrottling: PropTypes.func.isRequired,
-    };
-  }
-
-  static get defaultProps() {
-    return {
-      className: "",
-    };
-  }
-
-  constructor(props) {
-    super(props);
-    this.onSelectChange = this.onSelectChange.bind(this);
-  }
-
-  onSelectChange({ target }) {
-    const {
-      onChangeNetworkThrottling,
-    } = this.props;
-
-    if (target.value == L10N.getStr("responsive.noThrottling")) {
-      onChangeNetworkThrottling(false, "");
-      return;
-    }
-
-    for (const profile of throttlingProfiles) {
-      if (profile.id === target.value) {
-        onChangeNetworkThrottling(true, profile.id);
-        return;
-      }
-    }
-  }
-
-  render() {
-    const {
-      className,
-      networkThrottling,
-    } = this.props;
-
-    let selectClass = className + " toolbar-dropdown";
-    let selectedProfile;
-    if (networkThrottling.enabled) {
-      selectClass += " selected";
-      selectedProfile = networkThrottling.profile;
-    } else {
-      selectedProfile = L10N.getStr("responsive.noThrottling");
-    }
-
-    const listContent = [
-      dom.option(
-        {
-          key: "disabled",
-        },
-        L10N.getStr("responsive.noThrottling")
-      ),
-      dom.option(
-        {
-          key: "divider",
-          className: "divider",
-          disabled: true,
-        }
-      ),
-      throttlingProfiles.map(profile => {
-        return dom.option(
-          {
-            key: profile.id,
-          },
-          profile.id
-        );
-      }),
-    ];
-
-    return dom.select(
-      {
-        id: "network-throttling-selector",
-        className: selectClass,
-        value: selectedProfile,
-        onChange: this.onSelectChange,
-      },
-      ...listContent
-    );
-  }
-}
-
-module.exports = NetworkThrottlingSelector;

devtools/client/shared/components/throttling/moz.build

@@ -6,7 +6,7 @@
 
 DevToolsModules(
     'actions.js',
-    'NetworkThrottlingSelector.js',
+    'NetworkThrottlingMenu.js',
     'profiles.js',
     'reducer.js',
     'types.js',

devtools/client/themes/common.css

@@ -352,7 +352,7 @@ checkbox:-moz-focusring {
 .devtools-button:empty:not(:disabled):-moz-any(:hover:active,.checked),
 .devtools-toolbarbutton:not([label]):-moz-any([checked],[open],:hover:active),
 .devtools-button[aria-haspopup="menu"][aria-expanded="true"] {
-  background: var(--toolbarbutton-hover-background);
+  background-color: var(--toolbarbutton-hover-background);
   border-color: var(--toolbarbutton-hover-border-color);
 }
 

devtools/client/themes/toolbars.css

@@ -202,3 +202,37 @@ splitter.devtools-horizontal-splitter,
 .devtools-side-splitter {
   background-color: var(--theme-splitter-color);
 }
+
+/* Dropdown Menu Button */
+.devtools-dropdown-button {
+  background-image: url("chrome://devtools/skin/images/select-arrow.svg") !important;
+  background-repeat: no-repeat !important;
+  overflow: hidden;
+  fill: var(--theme-toolbar-photon-icon-color);
+  -moz-context-properties: fill;
+}
+
+.devtools-dropdown-button:not(:hover) {
+  background-color: transparent;
+}
+
+/* Style for title holder inside the dropdown menu button */
+.devtools-dropdown-button .title {
+  display: inline-block;
+  overflow: hidden;
+  padding-top: 0.15em;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#network-throttling-menu {
+  background-position: right 4px center;
+  padding-left: 0;
+  width: 92px;
+}
+
+/* Make sure spacing between text and icon is uniform */
+#network-throttling-menu .title {
+  width: 85%;
+}

devtools/client/themes/variables.css

@@ -224,7 +224,7 @@
 
   --toolbarbutton-background: var(--theme-toolbar-hover);
   --toolbarbutton-border-color: transparent;
-  --toolbarbutton-hover-background: rgba(110,120,130,0.2);
+  --toolbarbutton-hover-background: var(--theme-toolbar-hover);
   --toolbarbutton-hover-border-color: var(--toolbarbutton-border-color);
   --toolbarbutton-focus-background: var(--theme-selection-focus-background);
   --toolbarbutton-focus-color: var(--theme-selection-focus-color);