Bug 1471284 - Adjust appearance of throttling menu to match other controls; r=Honza
MozReview-Commit-ID: 5Xl9poqc8B8
--- 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,