diff --git a/devtools/client/netmonitor/src/connector/index.js b/devtools/client/netmonitor/src/connector/index.js index b1f23a22696e..2bdab70a982d 100644 --- a/devtools/client/netmonitor/src/connector/index.js +++ b/devtools/client/netmonitor/src/connector/index.js @@ -512,6 +512,9 @@ class Connector { async updateNetworkThrottling(enabled, profile) { if (!enabled) { this.networkFront.clearNetworkThrottling(); + await this.commands.targetConfigurationCommand.updateConfiguration({ + setTabOffline: false, + }); } else { // The profile can be either a profile id which is used to // search the predefined throttle profiles or a profile object @@ -520,6 +523,9 @@ class Connector { profile = throttlingProfiles.find(({ id }) => id == profile); } const { download, upload, latency } = profile; + await this.commands.targetConfigurationCommand.updateConfiguration({ + setTabOffline: !download, + }); await this.networkFront.setNetworkThrottling({ downloadThroughput: download, uploadThroughput: upload, diff --git a/devtools/client/shared/components/throttling/profiles.js b/devtools/client/shared/components/throttling/profiles.js index 85dc3b115847..7e573cacde46 100644 --- a/devtools/client/shared/components/throttling/profiles.js +++ b/devtools/client/shared/components/throttling/profiles.js @@ -99,6 +99,12 @@ const profiles = [ upload: 15 * MBps, latency: 2, }, + { + id: "Offline", + download: 0, + upload: 0, + latency: 5, + }, ].map(profile => new ThrottlingProfile(profile)); module.exports = profiles; diff --git a/devtools/docs/user/network_monitor/throttling/index.rst b/devtools/docs/user/network_monitor/throttling/index.rst index 344e4d83d02d..66dabf45b4c0 100644 --- a/devtools/docs/user/network_monitor/throttling/index.rst +++ b/devtools/docs/user/network_monitor/throttling/index.rst @@ -32,6 +32,7 @@ The table below lists the numbers associated with each network type, but please Regular 4G/LTE, 4 Mbps, 3 Mbps, 20 DSL, 2 Mbps, 1 Mbps, 5 Wi-Fi, 30 Mbps, 15 Mbps, 2 + Offline, 0 Mbps, 0 Mbps, 5 Network Monitor Features ************************ diff --git a/devtools/docs/user/responsive_design_mode/index.rst b/devtools/docs/user/responsive_design_mode/index.rst index cf11458e2a7d..58c2b1485c8c 100644 --- a/devtools/docs/user/responsive_design_mode/index.rst +++ b/devtools/docs/user/responsive_design_mode/index.rst @@ -202,6 +202,11 @@ The table below lists the numbers associated with each network type, but please - 15 Mb/s - 2 + * - Offline + - 0 Mb/s + - 0 Mb/s + - 5 + To select a network, click the list box that's initially labeled "No throttling": .. image:: rdm_throttling.png diff --git a/devtools/server/actors/target-configuration.js b/devtools/server/actors/target-configuration.js index 489b89722dfb..5b0070629e1c 100644 --- a/devtools/server/actors/target-configuration.js +++ b/devtools/server/actors/target-configuration.js @@ -47,6 +47,8 @@ const SUPPORTED_OPTIONS = { restoreFocus: true, // Enable service worker testing over HTTP (instead of HTTPS only). serviceWorkersTestingEnabled: true, + // Set the current tab offline + setTabOffline: true, // Enable touch events simulation touchEventsOverride: true, // Use simplified highlighters when prefers-reduced-motion is enabled. @@ -266,6 +268,9 @@ class TargetConfigurationActor extends Actor { case "cacheDisabled": this._setCacheDisabled(value); break; + case "setTabOffline": + this._setTabOffline(value); + break; } } @@ -282,6 +287,7 @@ class TargetConfigurationActor extends Actor { this._setServiceWorkersTestingEnabled(false); this._setPrintSimulationEnabled(false); this._setCacheDisabled(false); + this._setTabOffline(false); // Restore the color scheme simulation only if it was explicitly updated // by this actor. This will avoid side effects caused when destroying additional @@ -453,6 +459,17 @@ class TargetConfigurationActor extends Actor { } } + /** + * Set the browsing context to offline. + * + * @param {Boolean} offline: Whether the network throttling is set to offline + */ + _setTabOffline(offline) { + if (!this._browsingContext.isDiscarded) { + this._browsingContext.forceOffline = offline; + } + } + destroy() { Services.obs.removeObserver( this._onBrowsingContextAttached, diff --git a/devtools/shared/commands/target-configuration/tests/browser_target_configuration_command.js b/devtools/shared/commands/target-configuration/tests/browser_target_configuration_command.js index 84ba79f46c42..47dab1baa929 100644 --- a/devtools/shared/commands/target-configuration/tests/browser_target_configuration_command.js +++ b/devtools/shared/commands/target-configuration/tests/browser_target_configuration_command.js @@ -62,6 +62,34 @@ add_task(async function () { "Option colorSchemeSimulation was set, with a string value" ); + await targetConfigurationCommand.updateConfiguration({ + setTabOffline: true, + }); + compareOptions( + targetConfigurationCommand.configuration, + { + cacheDisabled: false, + colorSchemeSimulation: "dark", + javascriptEnabled: false, + setTabOffline: true, + }, + "Option setTabOffline was set on" + ); + + await targetConfigurationCommand.updateConfiguration({ + setTabOffline: false, + }); + compareOptions( + targetConfigurationCommand.configuration, + { + setTabOffline: false, + cacheDisabled: false, + colorSchemeSimulation: "dark", + javascriptEnabled: false, + }, + "Option setTabOffline was set off" + ); + targetCommand.destroy(); await commands.destroy(); }); diff --git a/devtools/shared/specs/target-configuration.js b/devtools/shared/specs/target-configuration.js index bfad03fe4805..8db15ff77dfa 100644 --- a/devtools/shared/specs/target-configuration.js +++ b/devtools/shared/specs/target-configuration.js @@ -23,6 +23,7 @@ types.addDictType("target-configuration.configuration", { reloadOnTouchSimulationToggle: "nullable:boolean", restoreFocus: "nullable:boolean", serviceWorkersTestingEnabled: "nullable:boolean", + setTabOffline: "nullable:boolean", touchEventsOverride: "nullable:string", }); diff --git a/toolkit/components/telemetry/Events.yaml b/toolkit/components/telemetry/Events.yaml index ad619816e044..01099b6fb7f1 100644 --- a/toolkit/components/telemetry/Events.yaml +++ b/toolkit/components/telemetry/Events.yaml @@ -2353,7 +2353,7 @@ devtools.main: release_channel_collection: opt-out expiry_version: never extra_keys: - mode: No throttling, GPRS, Regular 2G, Good 2G, Regular 3G, Good 3G, Regular 4G / LTE, DSL or WI-FI. + mode: No throttling, GPRS, Regular 2G, Good 2G, Regular 3G, Good 3G, Regular 4G / LTE, DSL, WI-FI, or Offline. session_id: The toolbox session start time e.g. 13963. tool_timer: objects: ["animationinspector", "compatibilityview", "computedview", "changesview", "fontinspector", "layoutview", "ruleview"]