Bug 1156659 - Added offline network throttling to devtools. r=devtools-reviewers,bomsy,devtools-backward-compat-reviewers

Depends on D187704

Differential Revision: https://phabricator.services.mozilla.com/D187705

Author: DylanOToole2

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,

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;

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
 ************************

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

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,

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();
 });

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",
 });
 

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"]