summaryrefslogtreecommitdiffstats
path: root/devtools/client/shared/components/throttling
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /devtools/client/shared/components/throttling
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/shared/components/throttling')
-rw-r--r--devtools/client/shared/components/throttling/NetworkThrottlingMenu.js100
-rw-r--r--devtools/client/shared/components/throttling/actions.js22
-rw-r--r--devtools/client/shared/components/throttling/moz.build13
-rw-r--r--devtools/client/shared/components/throttling/profiles.js122
-rw-r--r--devtools/client/shared/components/throttling/reducer.js29
-rw-r--r--devtools/client/shared/components/throttling/types.js17
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,
+};