diff options
Diffstat (limited to 'devtools/client/shared/components/throttling')
6 files changed, 303 insertions, 0 deletions
diff --git a/devtools/client/shared/components/throttling/NetworkThrottlingMenu.js b/devtools/client/shared/components/throttling/NetworkThrottlingMenu.js new file mode 100644 index 0000000000..d74016686b --- /dev/null +++ b/devtools/client/shared/components/throttling/NetworkThrottlingMenu.js @@ -0,0 +1,100 @@ +/* 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("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +const throttlingProfiles = require("resource://devtools/client/shared/components/throttling/profiles.js"); +const Types = require("resource://devtools/client/shared/components/throttling/types.js"); + +// Localization +const { LocalizationHelper } = require("resource://devtools/shared/l10n.js"); +const L10N = new LocalizationHelper( + "devtools/client/locales/network-throttling.properties" +); +const NO_THROTTLING_LABEL = L10N.getStr("responsive.noThrottling"); + +loader.lazyRequireGetter( + this, + "showMenu", + "resource://devtools/client/shared/components/menu/utils.js", + 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, + }; + } + + constructor(props) { + super(props); + this.onShowThrottlingMenu = this.onShowThrottlingMenu.bind(this); + } + + onShowThrottlingMenu(event) { + const { networkThrottling, onChangeNetworkThrottling } = this.props; + + const menuItems = throttlingProfiles.profiles.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 }); + } + + render() { + const { networkThrottling } = this.props; + const label = networkThrottling.enabled + ? networkThrottling.profile + : NO_THROTTLING_LABEL; + + let title = NO_THROTTLING_LABEL; + + if (networkThrottling.enabled) { + const id = networkThrottling.profile; + const selectedProfile = throttlingProfiles.profiles.find( + profile => profile.id === id + ); + title = selectedProfile.description; + } + + return dom.button( + { + id: "network-throttling-menu", + className: "devtools-button devtools-dropdown-button", + title, + onClick: this.onShowThrottlingMenu, + }, + dom.span({ className: "title" }, label) + ); + } +} + +module.exports = NetworkThrottlingMenu; diff --git a/devtools/client/shared/components/throttling/actions.js b/devtools/client/shared/components/throttling/actions.js new file mode 100644 index 0000000000..b6a686ab22 --- /dev/null +++ b/devtools/client/shared/components/throttling/actions.js @@ -0,0 +1,22 @@ +/* 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 actionTypes = { + CHANGE_NETWORK_THROTTLING: "CHANGE_NETWORK_THROTTLING", +}; + +function changeNetworkThrottling(enabled, profile) { + return { + type: actionTypes.CHANGE_NETWORK_THROTTLING, + enabled, + profile, + }; +} + +module.exports = { + ...actionTypes, + changeNetworkThrottling, +}; diff --git a/devtools/client/shared/components/throttling/moz.build b/devtools/client/shared/components/throttling/moz.build new file mode 100644 index 0000000000..2c178219fc --- /dev/null +++ b/devtools/client/shared/components/throttling/moz.build @@ -0,0 +1,13 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "actions.js", + "NetworkThrottlingMenu.js", + "profiles.js", + "reducer.js", + "types.js", +) diff --git a/devtools/client/shared/components/throttling/profiles.js b/devtools/client/shared/components/throttling/profiles.js new file mode 100644 index 0000000000..cd61f70772 --- /dev/null +++ b/devtools/client/shared/components/throttling/profiles.js @@ -0,0 +1,122 @@ +/* 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 K = 1024; +const M = 1024 * 1024; +const Bps = 1 / 8; +const KBps = K * Bps; +const MBps = M * Bps; + +const { LocalizationHelper } = require("resource://devtools/shared/l10n.js"); +const L10N = new LocalizationHelper( + "devtools/client/locales/network-throttling.properties" +); + +/** + * Predefined network throttling profiles. + * Speeds are in bytes per second. Latency is in ms. + */ + +class ThrottlingProfile { + constructor({ id, download, upload, latency }) { + this.id = id; + this.download = download; + this.upload = upload; + this.latency = latency; + } + + get description() { + const download = this.#toDescriptionData(this.download); + const upload = this.#toDescriptionData(this.upload); + return L10N.getFormatStr( + "throttling.profile.description", + download.value, + download.unit, + upload.value, + upload.unit, + this.latency + ); + } + + #toDescriptionData(val) { + if (val % MBps === 0) { + return { value: val / MBps, unit: "Mbps" }; + } + return { value: val / KBps, unit: "Kbps" }; + } +} + +const PROFILE_CONSTANTS = { + GPRS: "GPRS", + REGULAR_2G: "Regular 2G", + GOOD_2G: "Good 2G", + REGULAR_3G: "Regular 3G", + GOOD_3G: "Good 3G", + REGULAR_4G_LTE: "Regular 4G / LTE", + DSL: "DSL", + WIFI: "Wi-Fi", + OFFLINE: "Offline", +}; + +// Should be synced with devtools/docs/user/network_monitor/throttling/index.rst +const profiles = [ + { + id: PROFILE_CONSTANTS.GPRS, + download: 50 * KBps, + upload: 20 * KBps, + latency: 500, + }, + { + id: PROFILE_CONSTANTS.REGULAR_2G, + download: 250 * KBps, + upload: 50 * KBps, + latency: 300, + }, + { + id: PROFILE_CONSTANTS.GOOD_2G, + download: 450 * KBps, + upload: 150 * KBps, + latency: 150, + }, + { + id: PROFILE_CONSTANTS.REGULAR_3G, + download: 750 * KBps, + upload: 250 * KBps, + latency: 100, + }, + { + id: PROFILE_CONSTANTS.GOOD_3G, + download: 1.5 * MBps, + upload: 750 * KBps, + latency: 40, + }, + { + id: PROFILE_CONSTANTS.REGULAR_4G_LTE, + download: 4 * MBps, + upload: 3 * MBps, + latency: 20, + }, + { + id: PROFILE_CONSTANTS.DSL, + download: 2 * MBps, + upload: 1 * MBps, + latency: 5, + }, + { + id: PROFILE_CONSTANTS.WIFI, + download: 30 * MBps, + upload: 15 * MBps, + latency: 2, + }, + { + id: PROFILE_CONSTANTS.OFFLINE, + download: 0, + upload: 0, + latency: 5, + }, +].map(profile => new ThrottlingProfile(profile)); + +module.exports = { profiles, PROFILE_CONSTANTS }; diff --git a/devtools/client/shared/components/throttling/reducer.js b/devtools/client/shared/components/throttling/reducer.js new file mode 100644 index 0000000000..ea6408fe9f --- /dev/null +++ b/devtools/client/shared/components/throttling/reducer.js @@ -0,0 +1,29 @@ +/* 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 { + CHANGE_NETWORK_THROTTLING, +} = require("resource://devtools/client/shared/components/throttling/actions.js"); + +const INITIAL_STATE = { + enabled: false, + profile: "", +}; + +function throttlingReducer(state = INITIAL_STATE, action) { + switch (action.type) { + case CHANGE_NETWORK_THROTTLING: { + return { + enabled: action.enabled, + profile: action.profile, + }; + } + default: + return state; + } +} + +module.exports = throttlingReducer; diff --git a/devtools/client/shared/components/throttling/types.js b/devtools/client/shared/components/throttling/types.js new file mode 100644 index 0000000000..a54797057d --- /dev/null +++ b/devtools/client/shared/components/throttling/types.js @@ -0,0 +1,17 @@ +/* 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 PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +/** + * Network throttling state. + */ +exports.networkThrottling = { + // Whether or not network throttling is enabled + enabled: PropTypes.bool, + // Name of the selected throttling profile + profile: PropTypes.string, +}; |