Bug 1540110 - Add help text with links to mdn in the Setup page. r=jdescottes,daisuke,Ola,Harald,flod
authorBelén Albeza <balbeza@mozilla.com>
Wed, 15 May 2019 12:29:57 +0000
changeset 473911 d865d7a290f8c93bfca4ad532878fbc0e4403b62
parent 473910 f6ae1491321623380e67115dc649d6b22ff84c6d
child 473912 10571a393265c39d8b42627b2f0a3c0c2c79f842
child 474117 fd32e1c1f0edf5dcbe8eeb592d00052ff03dc5e7
push id36018
push userrgurzau@mozilla.com
push dateWed, 15 May 2019 15:58:16 +0000
treeherdermozilla-central@d865d7a290f8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, daisuke, Ola, Harald, flod
bugs1540110
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1540110 - Add help text with links to mdn in the Setup page. r=jdescottes,daisuke,Ola,Harald,flod Differential Revision: https://phabricator.services.mozilla.com/D30649
devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css
devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.js
devtools/client/locales/en-US/aboutdebugging.ftl
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css
@@ -33,8 +33,18 @@
 }
 .connect-page__usb-section__heading__status {
   grid-area: status;
   line-height: 1;
   font-size: var(--caption-20-font-size);
   font-weight: var(--caption-20-font-weight);
   color: var(--caption-20-color);
 }
+
+.connect-page__troubleshoot {
+  font-size: var(--body-10-font-size);
+  font-weight: var(--body-10-font-weight);
+  margin-block-start: calc(var(--base-unit) * 2);
+}
+
+.connect-page__troubleshoot--network {
+  padding-inline: calc(var(--base-unit) * 6);
+}
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
@@ -26,16 +26,21 @@ const NetworkLocationsForm = createFacto
 const NetworkLocationsList = createFactory(require("./NetworkLocationsList"));
 
 const { PAGE_TYPES, RUNTIMES } = require("../../constants");
 const Types = require("../../types/index");
 
 const USB_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-usb-icon.svg";
 const GLOBE_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
 
+const TROUBLESHOOT_USB_URL =
+  "https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_over_USB";
+const TROUBLESHOOT_NETWORK_URL =
+  "https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_over_a_network";
+
 class ConnectPage extends PureComponent {
   static get propTypes() {
     return {
       adbAddonStatus: Types.adbAddonStatus,
       dispatch: PropTypes.func.isRequired,
       networkLocations: PropTypes.arrayOf(Types.location).isRequired,
     };
   }
@@ -140,43 +145,43 @@ class ConnectPage extends PureComponent 
           this.renderUsbToggleButton(),
         ),
       },
       isAddonInstalled
         ? ConnectSteps(
           {
             steps: [
               {
-                localizationId: "about-debugging-setup-usb-step-enable-dev-menu",
-                url: "https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_over_USB",
+                localizationId: "about-debugging-setup-usb-step-enable-dev-menu2",
+              },
+              {
+                localizationId: "about-debugging-setup-usb-step-enable-debug2",
               },
               {
-                localizationId: "about-debugging-setup-usb-step-enable-debug",
-                url: "https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_over_USB",
+                localizationId: "about-debugging-setup-usb-step-enable-debug-firefox2",
               },
               {
-                localizationId: "about-debugging-setup-usb-step-enable-debug-firefox",
-                url: "https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_over_USB",
+                localizationId: "about-debugging-setup-usb-step-plug-device",
               },
-              { localizationId: "about-debugging-setup-usb-step-plug-device" },
             ],
           }
         )
         : Localized(
           {
             id: "about-debugging-setup-usb-disabled",
           },
           dom.aside(
             {
               className: "qa-connect-usb-disabled-message",
             },
             "Enabling this will download and add the required Android USB debugging " +
               "components to Firefox."
           )
         ),
+        this.renderTroubleshootText(RUNTIMES.USB),
     );
   }
 
   renderNetwork() {
     const { dispatch, networkLocations } = this.props;
 
     return Localized(
       {
@@ -186,18 +191,54 @@ class ConnectPage extends PureComponent 
       ConnectSection({
         className: "connect-page__breather",
         icon: GLOBE_ICON_SRC,
         title: "Network Location",
         extraContent: dom.div(
           {},
           NetworkLocationsList({ dispatch, networkLocations }),
           NetworkLocationsForm({ dispatch, networkLocations }),
+          this.renderTroubleshootText(RUNTIMES.NETWORK),
         ),
-      })
+      },
+      )
+    );
+  }
+
+  renderTroubleshootText(connectionType) {
+    const localizationId = connectionType === RUNTIMES.USB
+      ? "about-debugging-setup-usb-troubleshoot"
+      : "about-debugging-setup-network-troubleshoot";
+
+    const className = "connect-page__troubleshoot connect-page__troubleshoot--" +
+      `${connectionType === RUNTIMES.USB ? "usb" : "network"}`;
+
+    const url = connectionType === RUNTIMES.USB
+      ? TROUBLESHOOT_USB_URL
+      : TROUBLESHOOT_NETWORK_URL;
+
+    return dom.aside(
+      {
+        className,
+      },
+      Localized(
+        {
+          id: localizationId,
+          a: dom.a(
+            {
+              href: url,
+              target: "_blank",
+            }
+          ),
+        },
+        dom.p(
+          {},
+          localizationId,
+        ),
+      )
     );
   }
 
   render() {
     return dom.article(
       {
         className: "page connect-page qa-connect-page",
       },
@@ -216,42 +257,25 @@ class ConnectPage extends PureComponent 
         {
           id: "about-debugging-setup-intro",
         },
         dom.p(
           {},
           "Configure the connection method you wish to remotely debug your device with."
         )
       ),
-      dom.p(
-        {},
-        Localized(
-          {
-            id: "about-debugging-setup-link-android-devices",
-          },
-          dom.a(
-            {
-              href: "https://support.mozilla.org/kb/will-firefox-work-my-mobile-device#w_android-devices",
-              target: "_blank",
-            },
-            "View list of supported android devices"
-          )
-        ),
-      ),
       Localized(
         {
           id: "about-debugging-setup-this-firefox",
           a: Link({
             to: `/runtime/${RUNTIMES.THIS_FIREFOX}`,
           }),
         },
         dom.p(
-          {
-            className: "connect-page__breather",
-          },
+          {},
           "about-debugging-setup-this-firefox",
         ),
       ),
       dom.section(
         {
           className: "connect-page__breather",
         },
         Localized(
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.js
@@ -12,42 +12,37 @@ const FluentReact = require("devtools/cl
 const Localized = createFactory(FluentReact.Localized);
 
 class ConnectSteps extends PureComponent {
   static get propTypes() {
     return {
       steps: PropTypes.arrayOf(
         PropTypes.shape({
           localizationId: PropTypes.string.isRequired,
-          url: PropTypes.string,
         }).isRequired,
       ),
     };
   }
 
   render() {
     return dom.ul(
       {
         className: "connect-page__step-list",
       },
       ...this.props.steps.map(step =>
         Localized(
           {
             id: step.localizationId,
-            a: step.url ? dom.a({
-              href: step.url,
-              target: "_blank",
-            }) : null,
           },
           dom.li(
             {
               className: "connect-page__step",
-              key: step,
+              key: step.localizationId,
             },
-            step
+            step.localizationId
           )
         )
       )
     );
   }
 }
 
 module.exports = ConnectSteps;
--- a/devtools/client/locales/en-US/aboutdebugging.ftl
+++ b/devtools/client/locales/en-US/aboutdebugging.ftl
@@ -96,20 +96,16 @@ about-debugging-refresh-usb-devices-butt
 # Setup Page strings
 
 # Title of the Setup page.
 about-debugging-setup-title = Setup
 
 # Introduction text in the Setup page to explain how to configure remote debugging.
 about-debugging-setup-intro = Configure the connection method you wish to remotely debug your device with.
 
-# Link displayed in the Setup page that leads to MDN page with list of supported devices.
-# Temporarily leads to https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device#w_android-devices
-about-debugging-setup-link-android-devices = View list of supported Android devices
-
 # Explanatory text in the Setup page about what the 'This Firefox' page is for
 about-debugging-setup-this-firefox = Use <a>{ about-debugging-this-firefox-runtime-name }</a> to debug tabs, extensions and service workers on this version of { -brand-shorter-name }.
 
 # Title of the heading Connect section of the Setup page.
 about-debugging-setup-connect-heading = Connect a Device
 
 # USB section of the Setup page
 about-debugging-setup-usb-title = USB
@@ -129,31 +125,39 @@ about-debugging-setup-usb-disable-button
 about-debugging-setup-usb-updating-button = Updating…
 
 # USB section of the Setup page (USB status)
 about-debugging-setup-usb-status-enabled = Enabled
 about-debugging-setup-usb-status-disabled = Disabled
 about-debugging-setup-usb-status-updating = Updating…
 
 # USB section step by step guide
-about-debugging-setup-usb-step-enable-dev-menu = Enable Developer menu on your Android device. <a>Learn how</a>
+about-debugging-setup-usb-step-enable-dev-menu2 = Enable Developer menu on your Android device.
 
 # USB section step by step guide
-about-debugging-setup-usb-step-enable-debug = Enable USB Debugging in the Android Developer Menu. <a>Learn how</a>
+about-debugging-setup-usb-step-enable-debug2 = Enable USB Debugging in the Android Developer Menu.
 
 # USB section step by step guide
-about-debugging-setup-usb-step-enable-debug-firefox = Enable USB Debugging in Firefox on the Android device. <a>Learn how</a>
+about-debugging-setup-usb-step-enable-debug-firefox2 = Enable USB Debugging in Firefox on the Android device.
 
 # USB section step by step guide
 about-debugging-setup-usb-step-plug-device = Connect the Android device to your computer.
 
+# Text shown in the USB section of the setup page with a link to troubleshoot connection errors.
+# The link goes to https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_over_USB
+about-debugging-setup-usb-troubleshoot = Problems connecting to the USB device? <a>Troubleshoot</a>
+
 # Network section of the Setup page
 about-debugging-setup-network =
   .title = Network Location
 
+# Text shown in the Network section of the setup page with a link to troubleshoot connection errors.
+# The link goes to https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_over_a_network
+about-debugging-setup-network-troubleshoot = Problems connecting via network location? <a>Troubleshoot</a>
+
 # Text of a button displayed after the network locations "Host" input.
 # Clicking on it will add the new network location to the list.
 about-debugging-network-locations-add-button = Add
 
 # Text to display when there are no locations to show.
 about-debugging-network-locations-empty-text = No network locations have been added yet.
 
 # Text of the label for the text input that allows users to add new network locations in