Bug 1471284 - Adjust appearance of throttling menu to match other controls; r=Honza
authorHemanth Kumar Veeranki <hems.india1997@gmail.com>
Tue, 17 Jul 2018 15:39:39 +0530
changeset 427461 54e79326147a7618d4b08f24c74e3c8ef03ba4f3
parent 427460 98f85087087437839ab2a29bc470bf08e581bfce
child 427462 afcfe1cd7c552fd0fb79405d4755a346358c55e2
push id34306
push usercsabou@mozilla.com
push dateFri, 20 Jul 2018 21:41:18 +0000
treeherdermozilla-central@d6a5e8aea651 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1471284
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1471284 - Adjust appearance of throttling menu to match other controls; r=Honza MozReview-Commit-ID: 5Xl9poqc8B8
devtools/client/netmonitor/src/assets/styles/Toolbar.css
devtools/client/netmonitor/src/components/Toolbar.js
--- a/devtools/client/netmonitor/src/assets/styles/Toolbar.css
+++ b/devtools/client/netmonitor/src/assets/styles/Toolbar.css
@@ -73,36 +73,48 @@
   background-image: var(--play-icon-url);
 }
 
 .devtools-button.devtools-har-button {
   margin: 0 0 0 2px;
   padding: 0;
 }
 
-.network-monitor .devtools-button.devtools-har-button:hover {
-  background: var(--toolbarbutton-hover-background);
-  border-color: var(--toolbarbutton-hover-border-color);
+/* style for dropdown button */
+.devtools-drop-down-button {
+  background-image: var(--drop-down-icon-url)  !important;
+  background-repeat: no-repeat !important;
+  margin-inline-start: 6px;
+  fill: var(--theme-toolbar-photon-icon-color);
+  -moz-context-properties: fill;
 }
 
-/* HAR button has label and icon, so make sure they don't overlap */
-.devtools-button.devtools-har-button::before {
-  content: "HAR";
-  color: var(--theme-body-color);
-  width: 21px;
-  padding-right: 12px;
-  background-image: var(--drop-down-icon-url);
-  background-position: right center;
-  fill: var(--theme-toolbar-photon-icon-color);
-  height: 17px;
+/* 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;
 }
 
-/* Make sure the HAR button label is vertically centered on Mac */
-:root[platform="mac"] .devtools-button.devtools-har-button::before {
-  height: 14px;
+/* HAR button */
+
+#devtools-har-button {
+  width: 35px;
+  padding-right: 12px;
+  background-position: right center;
+}
+
+/* Make sure spacing between text and icon is uniform */
+#devtools-har-button .title {
+  width: 24px;
+}
+
+#devtools-har-button:not(:hover) {
+  background-color: transparent;
 }
 
 .devtools-checkbox {
   position: relative;
   vertical-align: middle;
   bottom: 1px;
 }
 
@@ -123,36 +135,24 @@
 /* Throttling Button */
 
 #global-network-throttling-selector:not(:hover) {
   background-color: transparent;
 }
 
 #global-network-throttling-selector {
   width: 92px;
-  padding-right: 12px;
-  background-image: var(--drop-down-icon-url);
-  background-position: right 6px;
-  background-repeat: no-repeat;
-  fill: var(--theme-toolbar-photon-icon-color);
-  margin-inline-start: 6px;
+  background-position: right 4px center;
   padding-left: 0;
-  -moz-context-properties: fill;
+  overflow: hidden;
 }
 
-#global-network-throttling-selector > option.divider {
-  border-top: 1px solid var(--theme-splitter-color);
-  height: 0px;
-  padding: 0;
-  font-size: 0px;
-}
-
-/* Make sure the Throttle button icon is vertically centered on Mac */
-:root[platform="mac"] #global-network-throttling-selector {
-  background-position-y: 5px;
+/* 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 {
   border: none;
   box-shadow: none;
   background-color: var(--theme-body-background);
--- a/devtools/client/netmonitor/src/components/Toolbar.js
+++ b/devtools/client/netmonitor/src/components/Toolbar.js
@@ -4,25 +4,25 @@
 
 "use strict";
 
 const Services = require("Services");
 const { Component, createFactory } = 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 { connect } = require("devtools/client/shared/redux/visibility-handler-connect");
-
 const Actions = require("../actions/index");
 const { FILTER_SEARCH_DELAY, FILTER_TAGS } = require("../constants");
 const {
   getDisplayedRequests,
   getRecordingState,
   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");
 
 // MDN
 const {
   getFilterBoxURL,
 } = require("../utils/mdn-utils");
 const LEARN_MORE_URL = getFilterBoxURL();
@@ -46,24 +46,27 @@ const DEVTOOLS_ENABLE_PERSISTENT_LOG_PRE
 const TOOLBAR_FILTER_LABELS = FILTER_TAGS.concat("all").reduce((o, tag) =>
   Object.assign(o, { [tag]: L10N.getStr(`netmonitor.toolbar.filter.${tag}`) }), {});
 const ENABLE_PERSISTENT_LOGS_TOOLTIP =
   L10N.getStr("netmonitor.toolbar.enablePersistentLogs.tooltip");
 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/netmonitor/src/utils/menu", true);
 loader.lazyRequireGetter(this, "HarMenuUtils", "devtools/client/netmonitor/src/har/har-menu-utils", true);
 
 // Throttling
 const Types = require("devtools/client/shared/components/throttling/types");
-const NetworkThrottlingSelector = createFactory(require("devtools/client/shared/components/throttling/NetworkThrottlingSelector"));
+const throttlingProfiles = require("devtools/client/shared/components/throttling/profiles");
 const { changeNetworkThrottling } = require("devtools/client/shared/components/throttling/actions");
 
 /**
  * Network monitor toolbar component.
  *
  * Toolbar contains a set of useful tools to control network requests
  * as well as set of filters for filtering the content.
  */
@@ -279,38 +282,76 @@ class Toolbar extends Component {
   }
 
   /**
    * Render network throttling selector 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) {
+    const {
+      networkThrottling,
       onChangeNetworkThrottling,
     } = this.props;
 
-    return NetworkThrottlingSelector({
-      className: "devtools-button",
-      networkThrottling,
-      onChangeNetworkThrottling,
+    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: menuButton });
   }
 
   /**
    * Render drop down button with HAR related actions.
    */
   renderHarButton() {
     return button({
       id: "devtools-har-button",
       title: TOOLBAR_HAR_BUTTON,
-      className: "devtools-button devtools-har-button",
+      className: "devtools-button devtools-har-button devtools-drop-down-button",
       onClick: evt => {
         this.showHarMenu(evt.target);
       },
-    });
+    },
+    dom.span({className: "title"},
+      "HAR")
+    );
   }
 
   showHarMenu(menuButton) {
     const {
       actions,
       connector,
       displayedRequests,
       openSplitConsole,