Bug 1498150 - Show network location category but with disabled message;r=ladybenko,daisuke

Depends on D9122
This is a follow up to the first patch that restores the category, but shows a "disabled"
message instead of the content

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

--HG--
extra : moz-landing-system : lando

devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css

@@ -5,3 +5,7 @@
 .connect-page__usb__toggle-button {
   margin-top: calc(var(--base-distance) * 4);
 }
+
+.connect-page__disabled-section {
+  color: var(--grey-40);
+}

devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js

@@ -24,6 +24,8 @@ const ConnectSteps = createFactory(require("./ConnectSteps"));
 const NetworkLocationsForm = createFactory(require("./NetworkLocationsForm"));
 const NetworkLocationsList = createFactory(require("./NetworkLocationsList"));
 
+const { PREFERENCES } = require("../../constants");
+
 const USB_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
 const WIFI_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
 const GLOBE_ICON_SRC = "chrome://devtools/skin/images/globe.svg";
@@ -156,10 +158,6 @@ class ConnectPage extends PureComponent {
   renderNetwork() {
     const { dispatch, networkEnabled, networkLocations } = this.props;
 
-    if (!networkEnabled) {
-      return null;
-    }
-
     return Localized(
       {
         id: "about-debugging-connect-network",
@@ -171,9 +169,30 @@ class ConnectPage extends PureComponent {
           icon: GLOBE_ICON_SRC,
           title: "Via Network Location",
         },
-        NetworkLocationsList({ dispatch, networkLocations }),
-        dom.hr({ className: "separator separator--breathe" }),
-        NetworkLocationsForm({ dispatch }),
+        ...(
+          networkEnabled ?
+          [
+            NetworkLocationsList({ dispatch, networkLocations }),
+            dom.hr({ className: "separator separator--breathe" }),
+            NetworkLocationsForm({ dispatch }),
+          ] : [
+            // We are using an array for this single element because of the spread
+            // operator (...). The spread operator avoids React warnings about missing
+            // keys.
+            Localized(
+              {
+                id: "about-debugging-connect-network-disabled",
+                $pref: PREFERENCES.NETWORK_ENABLED,
+              },
+              dom.div(
+                {
+                  className: "connect-page__disabled-section",
+                },
+                "about-debugging-connect-network-disabled"
+              )
+            ),
+          ]
+        )
       )
     );
   }

devtools/client/aboutdebugging-new/src/constants.js

@@ -62,6 +62,11 @@ const PAGES = {
   CONNECT: "connect",
 };
 
+const PREFERENCES = {
+  // Temporary preference without any default value until network locations are enabled.
+  NETWORK_ENABLED: "devtools.aboutdebugging.network",
+};
+
 const RUNTIME_PREFERENCE = {
   CONNECTION_PROMPT: "devtools.debugger.prompt-connection",
 };
@@ -94,6 +99,7 @@ module.exports = Object.assign({}, {
   DEBUG_TARGETS,
   DEBUG_TARGET_PANE,
   PAGES,
+  PREFERENCES,
   RUNTIME_PREFERENCE,
   RUNTIMES,
   SERVICE_WORKER_FETCH_STATES,

devtools/client/aboutdebugging-new/src/create-store.js

@@ -20,8 +20,7 @@ const workerComponentDataMiddleware = require("./middleware/worker-component-dat
 const { getDebugTargetCollapsibilities } = require("./modules/debug-target-collapsibilities");
 const { getNetworkLocations } = require("./modules/network-locations");
 
-// Temporary preference without any default value until network locations are enabled.
-const NETWORK_ENABLED_PREF = "devtools.aboutdebugging.network";
+const { PREFERENCES } = require("./constants");
 
 function configureStore() {
   const initialState = {
@@ -42,7 +41,7 @@ function configureStore() {
 function getUiState() {
   const collapsibilities = getDebugTargetCollapsibilities();
   const locations = getNetworkLocations();
-  const networkEnabled = Services.prefs.getBoolPref(NETWORK_ENABLED_PREF, false);
+  const networkEnabled = Services.prefs.getBoolPref(PREFERENCES.NETWORK_ENABLED, false);
   return new UiState(locations, collapsibilities, networkEnabled);
 }
 

devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl

@@ -77,6 +77,11 @@ about-debugging-connect-usb-step-plug-device = Connect the USB Device to your co
 about-debugging-connect-network
   .title = Via Network Location
 
+# Temporary text displayed when network location support is turned off via preferences.
+# { $pref } is the name of the preference that enables network locations
+# Do not localize
+about-debugging-connect-network-disabled = Network location support currently under development. You can enable it with the preference "{ $pref }".
+
 # Below are the titles for the various categories of debug targets that can be found
 # on "runtime" pages of about:debugging.
 # Title of the temporary extensions category (only available for "This Firefox" runtime).