Bug 1505124 - UX implementation for the Connect Page. r=daisuke,Ola
☠☠ backed out by 080df795170f ☠ ☠
authorBelén Albeza <balbeza@mozilla.com>
Fri, 15 Mar 2019 08:50:03 +0000
changeset 525020 6af97458ab5dbadc25bd9fb39f9526e69e483ab1
parent 525019 781fba7bac687ef83bc40bfa4f8e7f7800eaff27
child 525021 080df795170f98952d63dd362990cbe2eb35834f
push id2032
push userffxbld-merge
push dateMon, 13 May 2019 09:36:57 +0000
treeherdermozilla-release@455c1065dcbe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdaisuke, Ola
bugs1505124
milestone67.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 1505124 - UX implementation for the Connect Page. r=daisuke,Ola Differential Revision: https://phabricator.services.mozilla.com/D21542
devtools/client/aboutdebugging-new/aboutdebugging.css
devtools/client/aboutdebugging-new/src/base.css
devtools/client/aboutdebugging-new/src/components/App.css
devtools/client/aboutdebugging-new/src/components/App.js
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/ConnectSection.css
devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js
devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css
devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.js
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
devtools/client/aboutdebugging-new/src/components/connect/moz.build
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtools.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_routes.js
devtools/client/aboutdebugging-new/test/browser/head.js
devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
devtools/client/themes/variables.css
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -11,16 +11,17 @@
 /*
 * Components
 */
 @import "resource://devtools/client/aboutdebugging-new/src/components/App.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/ProfilerDialog.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeActions.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css";
+@import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionDetail.css";
--- a/devtools/client/aboutdebugging-new/src/base.css
+++ b/devtools/client/aboutdebugging-new/src/base.css
@@ -45,16 +45,17 @@
 
   /* Typography from Photon */
   --body-10-font-size: 13px;
   --body-10-font-weight: 400;
   --body-20-font-size: 15px;
   --body-20-font-weight: 700;
   --caption-20-font-size: 13px;
   --caption-20-font-weight: 400;
+  --caption-20-color: var(--grey-50);
   --display-20-font-size: 36px;
   --display-20-font-weight: 200;
   --title-20-font-size: 17px;
   --title-20-font-weight: 600;
   --title-30-font-size: 22px;
   --title-30-font-weight: 300;
 
   /* Global layout vars */
@@ -64,18 +65,19 @@
   /* Global styles */
   --base-font-style: message-box;
   --base-font-size: var(--body-10-font-size);
   --base-font-weight: var(--body-10-font-weight);
   --base-line-height: 1.8;
   --message-font-size: 13px; /* Body 10 in Photon - https://design.firefox.com/photon/visuals/typography.html */
   --button-font-size: var(--base-font-size);
   --micro-font-size: 11px;
+  --monospace-font-family: monospace;
 
-  --monospace-font-family: monospace;
+  --card-separator-color: var(--grey-20);
 
   /*
    * Variables particular to about:debugging
    */
   --alt-heading-icon-size: calc(var(--base-unit) * 6);
   --alt-heading-icon-gap: var(--base-unit);
   --main-heading-icon-size: calc(var(--base-unit) * 17); /* 4px * 17 = 68px */
   --main-heading-icon-gap: calc(var(--base-unit) * 3);
@@ -122,17 +124,16 @@ a:hover {
 a:active {
   color: var(--link-color-active);
 }
 
 p, h1 {
   margin: 0;
 }
 
-
 /*
 * Utils
 */
 
 /* text that needs to be cut with … */
 .ellipsis-text {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -144,16 +145,23 @@ p, h1 {
   font-family: var(--monospace-font-family);
 }
 
 /* Text that is not selectable */
 .unselectable-text {
   -moz-user-select: none;
 }
 
+/* Links that need to look like current text */
+.undecorated-link,
+.undecorated-link:hover {
+  text-decoration: none;
+  color: currentColor;
+}
+
 /*
 * Typography
 */
 
 /* Main style for heading (i.e. h1) */
 .main-heading {
   font-size: var(--display-20-font-size);
   font-weight: var(--display-20-font-weight);
@@ -189,19 +197,18 @@ p, h1 {
 .main-subheading__icon {
   width: 100%;
   fill: currentColor;
   -moz-context-properties: fill;
 }
 
 /* Alternative style for a heading (i.e. h1) */
 .alt-heading {
-  font-weight: 300;
-  font-size: 1.46em;
-  line-height: 1.2; /* odd value - from common.inc.css */
+  font-weight: var(--title-20-font-weight);
+  font-size: var(--title-20-font-size);
 
   margin-block-start: 0;
   margin-block-end: calc(var(--base-unit) * 4);
 }
 
 /* Alternative style for a subheading (i.e. h2). It features an icon */
 /* +--------+-------------+
 *  | [Icon] | Lorem ipsum |
@@ -249,53 +256,72 @@ p, h1 {
 /*
 Form controls
 */
 .default-button, .default-input {
   box-sizing: border-box;
   font-size: 1em;
 }
 
-/* standard, normal button */
-.default-button {
+/* Buttons from Photon */
+.default-button, .primary-button {
   -moz-appearance: none;
-  color: var(--grey-90); /* Note: this is from Photon Default button */
-  background-color: var(--grey-90-a10); /* Note: this is from Photon Default button */
-  font-size: var(--button-font-size); /* Note: this is from Photon Default button */
-
   margin: 0;
-  height: calc(var(--base-unit) * 8); /* Note: this is from Photon, not common.css */
+  height: calc(var(--base-unit) * 8);
   padding-inline-start: calc(var(--base-unit) * 5);
   padding-inline-end: calc(var(--base-unit) * 5);
 
   border: none;
   border-radius: calc(var(--base-unit) / 2);
+
+  font-size: var(--button-font-size);
+}
+
+/* Disabled state for buttons from Photon */
+.default-button:disabled, .primary-button:disabled {
+  opacity: 0.4;
+}
+
+/* Smaller variant size for buttons, from Photon */
+.default-button--micro, .primary-button--micro {
+  padding-inline-start: calc(2 * var(--base-unit));
+  padding-inline-end: calc(2 * var(--base-unit));
+  font-size: var(--micro-font-size);
+  height: calc(var(--base-unit) * 6);
+}
+
+/* Photon button representing a primary action */
+.primary-button {
+  color: var(--white-100);
+  background-color: var(--blue-60);
+}
+
+.primary-button:enabled:hover {
+  background-color: var(--blue-70);
+}
+
+.primary-button:enabled:active {
+  background-color: var(--blue-80);
+}
+
+/* Photon standard button */
+.default-button {
+  color: var(--grey-90); /* Note: this is from Photon Default button */
+  background-color: var(--grey-90-a10); /* Note: this is from Photon Default button */
 }
 
 .default-button:enabled:hover {
   background: var(--grey-90-a20); /* Note: this is from Photon Default button */
 }
 
 .default-button:enabled:active {
   background: var(--grey-90-a30); /* Note: this is from Photon Default button */
 }
 
-.default-button:disabled {
-  opacity: 0.4; /* Note: this is from Photon Default button */
-}
-
-/* smaller size for a default button */
-.default-button--micro {
-  padding-inline-start: calc(2 * var(--base-unit));
-  padding-inline-end: calc(2 * var(--base-unit));
-  font-size: var(--micro-font-size);
-  height: calc(var(--base-unit) * 6);
-}
-
-/* ghost button. icon button with no background from Photon guidelines */
+/* Photon ghost button. Icon button with no background */
 .ghost-button {
   border: none;
   border-radius: calc(var(--base-unit) / 2);
   fill: var(--grey-90-a80);
   height: calc(var(--base-unit) * 8);
   padding: calc(var(--base-unit) * 2);
   width: calc(var(--base-unit) * 8);
 
@@ -305,30 +331,30 @@ Form controls
 .ghost-button:hover {
   background-color: var(--grey-30);
 }
 
 .ghost-button:active {
   background-color: var(--grey-40);
 }
 
-/* standard inputs */
+/* Standard inputs */
 .default-input {
   line-height: unset;
   padding: 0 calc(var(--base-unit) * 2);
   height: 100%;
 
   border: 1px solid var(--box-border-color);
   border-radius: 2px;
   color: var(--text-color);
   background-color: var(--box-background);
 }
 
+/* Standard checkbox, from Photon */
 .default-checkbox {
-  /* Note: this styles are from Photon, not common.css */
   height: calc(var(--base-unit) * 4);
   margin-inline-end: var(--base-unit);
   width: calc(var(--base-unit) * 4);
 }
 
 /*
 * Other UI components
 */
@@ -356,23 +382,20 @@ Form controls
   background: var(--warning-50);
 }
 
 .badge--error {
   background: var(--error-50);
 }
 
 /*
- * Card style which is used in debug target item and so on.
+ * Card UI, from Photon
  */
 .card {
   background-color: var(--white-100); /* from common.inc.css */
   border-radius: var(--base-unit); /* from common.inc.css */
   box-shadow: 0 1px 4px var(--grey-90-a10); /* from common.inc.css */
-  padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
-  padding-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
 }
 
-.undecorated-link,
-.undecorated-link:hover {
-  text-decoration: none;
-  color: currentColor;
+.card__heading {
+  font-size: var(--title-20-font-size); /* Note: this is from Photon Title 20 */
+  font-weight: var(--title-20-font-weight); /* Note: this is from Photon Title 20 */
 }
--- a/devtools/client/aboutdebugging-new/src/components/App.css
+++ b/devtools/client/aboutdebugging-new/src/components/App.css
@@ -48,13 +48,8 @@
 
   /* we want to scroll only the main content, not the sidebar */
   overflow-y: auto;
 }
 
 .page {
   max-width: var(--page-width);
 }
-
-.page__section {
-  margin-block-end: calc(var(--base-unit) * 12);
-  --section-inline-margin: calc(var(--alt-heading-icon-size) + var(--alt-heading-icon-gap));
-}
--- a/devtools/client/aboutdebugging-new/src/components/App.js
+++ b/devtools/client/aboutdebugging-new/src/components/App.js
@@ -125,29 +125,29 @@ class App extends PureComponent {
     // a different runtime
     return RuntimePage({ dispatch, key: runtimeId, runtimeId });
   }
 
   renderRoutes() {
     return Switch(
       {},
       Route({
-        path: "/connect",
+        path: "/setup",
         render: () => this.renderConnect(),
       }),
       Route({
         path: "/runtime/:runtimeId",
         render: routeProps => this.renderRuntime(routeProps),
       }),
       // default route when there's no match which includes "/"
       // TODO: the url does not match "/" means invalid URL,
       // in this case maybe we'd like to do something else than a redirect.
       // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1509897
       Route({
-        render: () => Redirect({ to: "/connect"}),
+        render: () => Redirect({ to: "/setup"}),
       })
     );
   }
 
   render() {
     const {
       adbAddonStatus,
       dispatch,
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css
@@ -1,11 +1,43 @@
 /* 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/. */
 
-.connect-page__usb__toggle-button {
-  margin-top: calc(var(--base-unit) * 4);
-}
-
 .connect-page__disabled-section {
   color: var(--grey-40);
 }
+
+.connect-page__breather {
+  margin-block-start: calc(var(--base-unit) * 6);
+}
+
+/*
+ *   +--------+----------------------+
+ *   | USB    |            |<button> |
+ *   +--------+            |         |
+ *   | status |            |         |
+ *   +--------+----------------------+
+ */
+.connect-page__usb-section__heading {
+  display: grid;
+  align-items: center;
+  grid-template-areas: "title  . toggle"
+                       "status . toggle";
+  grid-template-columns: auto 1fr auto;
+  grid-column-gap: calc(var(--base-unit) * 2);
+}
+
+.connect-page__usb-section__heading__toggle {
+  grid-area: toggle;
+}
+
+.connect-page__usb-section__heading__title {
+  grid-area: title;
+  line-height: 1;
+}
+.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);
+}
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
@@ -14,26 +14,26 @@ const Localized = createFactory(FluentRe
 const {
   USB_STATES,
 } = require("../../constants");
 
 const Actions = require("../../actions/index");
 
 loader.lazyRequireGetter(this, "ADB_ADDON_STATES", "devtools/shared/adb/adb-addon", true);
 
+const Link = createFactory(require("devtools/client/shared/vendor/react-router-dom").Link);
 const ConnectSection = createFactory(require("./ConnectSection"));
 const ConnectSteps = createFactory(require("./ConnectSteps"));
 const NetworkLocationsForm = createFactory(require("./NetworkLocationsForm"));
 const NetworkLocationsList = createFactory(require("./NetworkLocationsList"));
 
-const { PREFERENCES, PAGE_TYPES } = require("../../constants");
+const { PREFERENCES, PAGE_TYPES, RUNTIMES } = require("../../constants");
 const Types = require("../../types/index");
 
-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 USB_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-usb-icon.svg";
 const GLOBE_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
 
 class ConnectPage extends PureComponent {
   static get propTypes() {
     return {
       adbAddonStatus: Types.adbAddonStatus,
       dispatch: PropTypes.func.isRequired,
       // Provided by wrapping the component with FluentReact.withLocalization.
@@ -45,55 +45,16 @@ class ConnectPage extends PureComponent 
   }
 
   // TODO: avoid the use of this method
   // https://bugzilla.mozilla.org/show_bug.cgi?id=1508688
   componentWillMount() {
     this.props.dispatch(Actions.selectPage(PAGE_TYPES.CONNECT));
   }
 
-  renderWifi() {
-    const { getString, wifiEnabled } = this.props;
-
-    return Localized(
-      {
-        id: "about-debugging-connect-wifi",
-        attrs: { title: true },
-      },
-      ConnectSection(
-        {
-          icon: WIFI_ICON_SRC,
-          title: "Via WiFi",
-        },
-        wifiEnabled
-          ? ConnectSteps(
-            {
-              steps: [
-                getString("about-debugging-connect-wifi-step-same-network"),
-                getString("about-debugging-connect-wifi-step-open-firefox"),
-                getString("about-debugging-connect-wifi-step-open-options"),
-                getString("about-debugging-connect-wifi-step-enable-debug"),
-              ],
-            })
-          : Localized(
-            {
-              id: "about-debugging-connect-wifi-disabled",
-              $pref: PREFERENCES.WIFI_ENABLED,
-            },
-            dom.div(
-              {
-                className: "connect-page__disabled-section",
-              },
-              "about-debugging-connect-wifi-disabled"
-            )
-          )
-      )
-    );
-  }
-
   onToggleUSBClick() {
     const { adbAddonStatus } = this.props;
     const isAddonInstalled = adbAddonStatus === ADB_ADDON_STATES.INSTALLED;
     if (isAddonInstalled) {
       this.props.dispatch(Actions.uninstallAdbAddon());
     } else {
       this.props.dispatch(Actions.installAdbAddon());
     }
@@ -105,123 +66,159 @@ class ConnectPage extends PureComponent 
         return USB_STATES.ENABLED_USB;
       case ADB_ADDON_STATES.UNINSTALLED:
         return USB_STATES.DISABLED_USB;
       default:
         return USB_STATES.UPDATING_USB;
     }
   }
 
+  renderUsbStatus() {
+    const statusTextId = {
+      [USB_STATES.ENABLED_USB]: "about-debugging-setup-usb-status-enabled",
+      [USB_STATES.DISABLED_USB]: "about-debugging-setup-usb-status-disabled",
+      [USB_STATES.UPDATING_USB]: "about-debugging-setup-usb-status-updating",
+    }[this.getUsbStatus()];
+
+    return Localized(
+      {
+        id: statusTextId,
+      },
+      dom.span(
+        {
+          className: "connect-page__usb-section__heading__status",
+        },
+        statusTextId,
+      ),
+    );
+  }
+
   renderUsbToggleButton() {
     const usbStatus = this.getUsbStatus();
 
     const localizedStates = {
-      [USB_STATES.ENABLED_USB]: "about-debugging-connect-usb-disable-button",
-      [USB_STATES.DISABLED_USB]: "about-debugging-connect-usb-enable-button",
-      [USB_STATES.UPDATING_USB]: "about-debugging-connect-usb-updating-button",
+      [USB_STATES.ENABLED_USB]: "about-debugging-setup-usb-disable-button",
+      [USB_STATES.DISABLED_USB]: "about-debugging-setup-usb-enable-button",
+      [USB_STATES.UPDATING_USB]: "about-debugging-setup-usb-updating-button",
     };
     const localizedState = localizedStates[usbStatus];
 
     // Disable the button while the USB status is updating.
     const disabled = usbStatus === USB_STATES.UPDATING_USB;
 
     return Localized(
       {
         id: localizedState,
       },
       dom.button(
         {
           className:
-            "default-button connect-page__usb__toggle-button " +
+            "default-button connect-page__usb-section__heading__toggle " +
             "js-connect-usb-toggle-button",
           disabled,
           onClick: () => this.onToggleUSBClick(),
         },
         localizedState
       )
     );
   }
 
   renderUsb() {
     const { adbAddonStatus, getString } = this.props;
     const isAddonInstalled = adbAddonStatus === ADB_ADDON_STATES.INSTALLED;
-    return Localized(
+    return ConnectSection(
       {
-        id: "about-debugging-connect-usb",
-        attrs: { title: true },
+        icon: USB_ICON_SRC,
+        title: dom.div(
+          {
+            className: "connect-page__usb-section__heading",
+          },
+          Localized(
+            { id: "about-debugging-setup-usb-title" },
+            dom.span(
+              {
+                className: "connect-page__usb-section__heading__title",
+              },
+              "USB",
+            ),
+          ),
+          this.renderUsbStatus(),
+          this.renderUsbToggleButton(),
+        ),
       },
-      ConnectSection(
-        {
-          icon: USB_ICON_SRC,
-          title: "Via USB",
-        },
-        isAddonInstalled
-          ? ConnectSteps(
+      isAddonInstalled
+        ? ConnectSteps(
+          {
+            steps: [
+              {
+                localizationId: "about-debugging-setup-usb-step-enable-dev-menu",
+                url: "https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE#Setting_up_the_Android_device",
+              },
+              {
+                localizationId: "about-debugging-setup-usb-step-enable-debug",
+                url: "https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE#Setting_up_the_Android_device",
+              },
+              {
+                localizationId: "about-debugging-setup-usb-step-enable-debug-firefox",
+                url: "https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE#Setting_up_the_Android_device",
+              },
+              { localizationId: "about-debugging-setup-usb-step-plug-device" },
+            ],
+          }
+        )
+        : Localized(
+          {
+            id: "about-debugging-setup-usb-disabled",
+          },
+          dom.aside(
             {
-              steps: [
-                getString("about-debugging-connect-usb-step-enable-dev-menu"),
-                getString("about-debugging-connect-usb-step-enable-debug"),
-                getString("about-debugging-connect-usb-step-plug-device"),
-              ],
-            }
-          )
-          : Localized(
-            {
-              id: "about-debugging-connect-usb-disabled",
+              className: "js-connect-usb-disabled-message",
             },
-            dom.aside(
-              {
-                className: "js-connect-usb-disabled-message",
-              },
-              "Enabling this will download and add the required Android USB debugging " +
-                "components to Firefox."
-            )
-          ),
-        this.renderUsbToggleButton()
-      )
+            "Enabling this will download and add the required Android USB debugging " +
+              "components to Firefox."
+          )
+        ),
     );
   }
 
   renderNetwork() {
     const { dispatch, networkEnabled, networkLocations } = this.props;
 
     return Localized(
       {
         id: "about-debugging-connect-network",
         attrs: { title: true },
       },
       ConnectSection(
         {
-          className: "connect-page__network",
+          className: "connect-page__breather",
           icon: GLOBE_ICON_SRC,
-          title: "Via Network Location",
-        },
-        ...(networkEnabled
-          ? [
+          title: "Network Location",
+          extraContent: networkEnabled
+            ? dom.div(
+              {},
               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"
-                )
-              ),
-          ])
+            )
+            : null,
+        },
+        networkEnabled
+          ? null
+          : Localized(
+            {
+                id: "about-debugging-connect-network-disabled",
+                $pref: PREFERENCES.NETWORK_ENABLED,
+            },
+            dom.div(
+              {
+                className: "connect-page__disabled-section",
+              },
+              "about-debugging-connect-network-disabled"
+            )
+          ),
       )
     );
   }
 
   render() {
     return dom.article(
       {
         className: "page connect-page js-connect-page",
@@ -229,19 +226,72 @@ class ConnectPage extends PureComponent 
       Localized(
         {
           id: "about-debugging-connect-title",
         },
         dom.h1(
           {
             className: "alt-heading",
           },
-          "Connect a Device"
+          "Setup"
+        ),
+      ),
+      Localized(
+        {
+          id: "about-debugging-setup-intro",
+        },
+        dom.p(
+          {},
+          "Configure the connection method you wish to remotely debug your device with."
         )
       ),
-      this.renderWifi(),
-      this.renderUsb(),
-      this.renderNetwork()
+      Localized(
+        {
+          id: "about-debugging-setup-link-android-devices",
+        },
+        dom.p(
+          {},
+          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(
+          {
+            id: "about-debugging-setup-connect-heading",
+          },
+          dom.h1(
+            {
+              className: "alt-heading",
+            },
+            "Connect a device",
+          ),
+        ),
+        this.renderUsb(),
+        this.renderNetwork()
+      ),
     );
   }
 }
 
 module.exports = FluentReact.withLocalization(ConnectPage);
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css
@@ -0,0 +1,48 @@
+/* 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/. */
+
+.connect-section {
+  --icon-size: calc(var(--base-unit) * 9);
+  --header-col-gap: calc(var(--base-unit) * 2);
+}
+
+/*
+ *  +--------+----------------+
+ *  | <icon> |  <heading> 1fr |
+ *  +--------+----------------+
+ */
+.connect-section__header {
+  display: grid;
+  grid-template-areas: "icon heading";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: var(--icon-size);
+  grid-column-gap: var(--header-col-gap);
+  align-items: center;
+
+  padding-block: calc(var(--base-unit) * 4);
+  padding-inline: calc(var(--base-unit) * 5);
+}
+
+.connect-section__header__title {
+  grid-area: heading;
+}
+
+.connect-section__header__icon {
+  grid-area: icon;
+  width: var(--icon-size);
+  height: var(--icon-size);
+}
+
+.connect-section__content {
+  line-height: 1.5;
+  padding-inline-start: calc(var(--base-unit) * 5
+    + var(--header-col-gap) + var(--icon-size));
+  padding-inline-end: calc(var(--base-unit) * 5);
+  padding-block-end: calc(var(--base-unit) * 4);
+}
+
+.connect-section__extra {
+  border-block-start: 1px solid var(--card-separator-color);
+  padding-block-end: calc(var(--base-unit) * 4);
+}
\ No newline at end of file
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js
@@ -6,38 +6,64 @@
 
 const { PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 class ConnectSection extends PureComponent {
   static get propTypes() {
     return {
-      children: PropTypes.node.isRequired,
+      children: PropTypes.node,
       className: PropTypes.string,
+      extraContent: PropTypes.node,
       icon: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
+      title: PropTypes.node.isRequired,
     };
   }
 
+  renderExtraContent() {
+    const { extraContent } = this.props;
+    return dom.section(
+      {
+        className: "connect-section__extra",
+      },
+      extraContent,
+    );
+  }
+
   render() {
+    const { extraContent } = this.props;
+
     return dom.section(
       {
-        className: `page__section ${this.props.className || ""}`,
+        className: `card connect-section ${this.props.className || ""}`,
       },
-      dom.h2(
+      dom.header(
         {
-          className: "alt-subheading",
+          className: "connect-section__header",
         },
         dom.img(
           {
-            className: "alt-subheading__icon",
+            className: "connect-section__header__icon",
             src: this.props.icon,
-          }
+          },
         ),
-        this.props.title
+        dom.h1(
+          {
+            className: "card__heading connect-section__header__title",
+          },
+          this.props.title,
+        ),
       ),
       this.props.children
+        ? dom.div(
+          {
+            className: "connect-section__content",
+          },
+          this.props.children
+        )
+        : null,
+      extraContent ? this.renderExtraContent() : null,
     );
   }
 }
 
 module.exports = ConnectSection;
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css
@@ -1,13 +1,13 @@
 /* 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/. */
 
 .connect-page__step-list {
   list-style-type: decimal;
   list-style-position: outside;
-  margin-inline-start: calc(var(--section-inline-margin) + var(--base-unit) * 4);
+  margin-inline-start: calc(var(--base-unit) * 4);
 }
 
 .connect-page__step {
   padding-inline-start: var(--base-unit);
 }
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.js
@@ -1,34 +1,53 @@
 /* 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("devtools/client/shared/vendor/react");
+const { PureComponent, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
+const FluentReact = require("devtools/client/shared/vendor/fluent-react");
+const Localized = createFactory(FluentReact.Localized);
+
 class ConnectSteps extends PureComponent {
   static get propTypes() {
     return {
-      steps: PropTypes.arrayOf(PropTypes.string).isRequired,
+      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 => dom.li(
-        {
-          className: "connect-page__step",
-          key: step,
-        },
-        step)
+      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,
+            },
+            step
+          )
+        )
       )
     );
   }
 }
 
 module.exports = ConnectSteps;
--- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css
+++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css
@@ -9,9 +9,11 @@
  *  | "Host:port" | Input              | Add button |
  *  +-------------+--------------------+------------+
  */
 .connect-page__network-form {
   display: grid;
   grid-column-gap: calc(var(--base-unit) * 2);
   grid-template-columns: auto 1fr auto;
   align-items: center;
+  padding-block-start: calc(var(--base-unit) * 4);
+  padding-inline: calc(var(--base-unit) * 6);
 }
--- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
@@ -63,17 +63,17 @@ class NetworkLocationsForm extends PureC
         },
       }),
       Localized(
         {
           id: "about-debugging-network-locations-add-button",
         },
         dom.button(
           {
-            className: "default-button js-network-form-submit-button",
+            className: "primary-button js-network-form-submit-button",
           },
           "Add"
         )
       )
     );
   }
 }
 
--- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css
+++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css
@@ -4,13 +4,17 @@
 
 /*
  * Layout of a network location item
  *
  *  +-------------------------------------+---------------+
  *  | Location (eg localhost:8080)        | Remove button |
  *  +-------------------------------------+---------------+
  */
-.connect-page__network-location {
+.network-location {
   display: grid;
   grid-template-columns: auto max-content;
-  margin: calc(var(--base-unit) * 2) 0;
-}
\ No newline at end of file
+  align-items: center;
+
+  padding-block: calc(var(--base-unit) * 2);
+  padding-inline: calc(var(--base-unit) * 6);
+  border-bottom: 1px solid var(--card-separator-color);
+}
--- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
@@ -23,17 +23,17 @@ class NetworkLocationsList extends PureC
   }
 
   renderList() {
     return dom.ul(
       {},
       this.props.networkLocations.map(location =>
         dom.li(
           {
-            className: "connect-page__network-location js-network-location",
+            className: "network-location js-network-location",
             key: location,
           },
           dom.span(
             {
               className: "ellipsis-text js-network-location-value",
             },
             location
           ),
@@ -43,35 +43,23 @@ class NetworkLocationsList extends PureC
             },
             dom.button(
               {
                 className: "default-button js-network-location-remove-button",
                 onClick: () => {
                   this.props.dispatch(Actions.removeNetworkLocation(location));
                 },
               },
-              "Remove"
-            )
+              "Remove",
+            ),
           )
         )
       )
     );
   }
 
-  renderEmpty() {
-    return Localized(
-      {
-        id: "about-debugging-network-locations-empty-text",
-      },
-      dom.p(
-        {},
-        "No network locations have been added yet."
-      )
-    );
-  }
-
   render() {
     return this.props.networkLocations.length > 0 ?
-      this.renderList() : this.renderEmpty();
+      this.renderList() : null;
   }
 }
 
 module.exports = NetworkLocationsList;
--- a/devtools/client/aboutdebugging-new/src/components/connect/moz.build
+++ b/devtools/client/aboutdebugging-new/src/components/connect/moz.build
@@ -1,15 +1,16 @@
 # 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(
     'ConnectPage.css',
     'ConnectPage.js',
+    'ConnectSection.css',
     'ConnectSection.js',
     'ConnectSteps.css',
     'ConnectSteps.js',
     'NetworkLocationsForm.css',
     'NetworkLocationsForm.js',
     'NetworkLocationsList.css',
     'NetworkLocationsList.js',
 )
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
@@ -14,16 +14,19 @@
  */
 .debug-target-item {
   display: grid;
   grid-template-columns: calc(var(--base-unit) * 8) 1fr max-content;
   grid-column-gap: calc(var(--base-unit) * 2);
   grid-template-areas: "icon name   action"
                        ".    detail detail";
   margin-block-end: calc(var(--base-unit) * 4);
+
+  padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
+  padding-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
 }
 
 .debug-target-item__icon {
   grid-area: icon;
   width: 100%;
 }
 
 .debug-target-item__name {
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
@@ -16,17 +16,17 @@ const Types = require("../../types/index
 loader.lazyRequireGetter(this, "ADB_ADDON_STATES", "devtools/shared/adb/adb-addon", true);
 
 const Message = createFactory(require("../shared/Message"));
 const SidebarItem = createFactory(require("./SidebarItem"));
 const SidebarFixedItem = createFactory(require("./SidebarFixedItem"));
 const SidebarRuntimeItem = createFactory(require("./SidebarRuntimeItem"));
 const RefreshDevicesButton = createFactory(require("./RefreshDevicesButton"));
 const FIREFOX_ICON = "chrome://devtools/skin/images/aboutdebugging-firefox-logo.svg";
-const CONNECT_ICON = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
+const CONNECT_ICON = "chrome://devtools/skin/images/settings.svg";
 const GLOBE_ICON = "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
 const USB_ICON = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
 
 class Sidebar extends PureComponent {
   static get propTypes() {
     return {
       adbAddonStatus: Types.adbAddonStatus,
       className: PropTypes.string,
@@ -128,24 +128,24 @@ class Sidebar extends PureComponent {
 
     return dom.aside(
       {
         className: `sidebar ${this.props.className || ""}`,
       },
       dom.ul(
         {},
         Localized(
-          { id: "about-debugging-sidebar-connect", attrs: { name: true } },
+          { id: "about-debugging-sidebar-setup", attrs: { name: true } },
           SidebarFixedItem({
             dispatch,
             icon: CONNECT_ICON,
             isSelected: PAGE_TYPES.CONNECT === selectedPage,
             key: PAGE_TYPES.CONNECT,
-            name: "Connect",
-            to: "/connect",
+            name: "Setup",
+            to: "/setup",
           })
         ),
         Localized(
           { id: "about-debugging-sidebar-this-firefox", attrs: { name: true } },
           SidebarFixedItem({
             icon: FIREFOX_ICON,
             isSelected: PAGE_TYPES.RUNTIME === selectedPage &&
               selectedRuntimeId === RUNTIMES.THIS_FIREFOX,
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtools.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtools.js
@@ -12,17 +12,17 @@ Services.scriptloader.loadSubScript(CHRO
 
 add_task(async function() {
   info("Force all debug target panes to be expanded");
   prepareCollapsibilitiesTest();
 
   const { document, tab, window } = await openAboutDebugging();
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
-  const connectSidebarItem = findSidebarItemByText("Connect", document);
+  const connectSidebarItem = findSidebarItemByText("Setup", document);
   const connectLink = connectSidebarItem.querySelector(".js-sidebar-link");
   ok(connectSidebarItem, "Found the Connect sidebar item");
 
   info("Open devtools on the current about:debugging tab");
   const toolbox = await openToolboxForTab(tab, "inspector");
   const inspector = toolbox.getPanel("inspector");
 
   info("DevTools starts workers, wait for requests to settle");
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js
@@ -17,17 +17,17 @@ const TAB_URL_2 = "data:text/html,<title
 add_task(async function() {
   info("Force all debug target panes to be expanded");
   prepareCollapsibilitiesTest();
 
   const { document, tab, window } = await openAboutDebugging();
   const AboutDebugging = window.AboutDebugging;
   await selectThisFirefoxPage(document, AboutDebugging.store);
 
-  const connectSidebarItem = findSidebarItemByText("Connect", document);
+  const connectSidebarItem = findSidebarItemByText("Setup", document);
   const connectLink = connectSidebarItem.querySelector(".js-sidebar-link");
   ok(connectSidebarItem, "Found the Connect sidebar item");
 
   const thisFirefoxSidebarItem = findSidebarItemByText("This Firefox", document);
   const thisFirefoxLink = thisFirefoxSidebarItem.querySelector(".js-sidebar-link");
   ok(thisFirefoxSidebarItem, "Found the ThisFirefox sidebar item");
   ok(isSidebarItemSelected(thisFirefoxSidebarItem),
     "ThisFirefox sidebar item is selected by default");
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_routes.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_routes.js
@@ -1,20 +1,20 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 /**
- * Test that the initial route is /connect
+ * Test that the initial route is /setup
  */
 add_task(async function() {
-  info("Check root route redirects to connect page");
+  info("Check root route redirects to setup page");
   const { document, tab } = await openAboutDebugging();
-  is(document.location.hash, "#/connect");
+  is(document.location.hash, "#/setup");
 
   await removeTab(tab);
 });
 
 /**
  * Test that the routes in about:debugging show the proper views and document.title
  */
 add_task(async function() {
@@ -31,24 +31,24 @@ add_task(async function() {
   ok(infoLabel.includes("Firefox"), "Runtime is displayed as Firefox");
   ok(!infoLabel.includes(" on "), "Runtime is not associated to any device");
   is(
       document.title,
       "Debugging - Runtime / this-firefox",
       "Checking title for 'runtime' page"
   );
 
-  info("Check 'Connect' page");
-  document.location.hash = "#/connect";
+  info("Check 'Setup' page");
+  document.location.hash = "#/setup";
   await waitUntil(() => document.querySelector(".js-connect-page"));
-  ok(true, "Connect page has been shown");
+  ok(true, "Setup page has been shown");
   is(
       document.title,
-      "Debugging - Connect",
-      "Checking title for 'connect' page"
+      "Debugging - Setup",
+      "Checking title for 'setup' page"
   );
 
   info("Check 'USB device runtime' page");
   // connect to a mocked USB runtime
   mocks.createUSBRuntime("1337id", {
     deviceName: "Fancy Phone",
     name: "Lorem ipsum",
   });
@@ -70,24 +70,24 @@ add_task(async function() {
 
 /**
  * Test that an invalid route redirects to / (currently This Firefox page)
  */
 add_task(async function() {
   info("Check an invalid route redirects to root");
   const { document, tab } = await openAboutDebugging();
 
-  info("Waiting for a non connect page to load");
+  info("Waiting for a non setup page to load");
   document.location.hash = "#/runtime/this-firefox";
   await waitUntil(() => document.querySelector(".js-runtime-page"));
 
   info("Update hash & wait for a redirect to root (connect page)");
   document.location.hash = "#/lorem-ipsum";
   await waitUntil(() => document.querySelector(".js-connect-page"));
   is(
       document.title,
-      "Debugging - Connect",
-      "Checking title for 'connect' page"
+      "Debugging - Setup",
+      "Checking title for 'setup' page"
   );
-  is(document.location.hash, "#/connect", "Redirected to root");
+  is(document.location.hash, "#/setup", "Redirected to root");
 
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/head.js
+++ b/devtools/client/aboutdebugging-new/test/browser/head.js
@@ -192,17 +192,17 @@ async function selectThisFirefoxPage(doc
 }
 
 /**
  * Navigate to the Connect page. Resolves when the Connect page is rendered.
  */
 async function selectConnectPage(doc) {
   const sidebarItems = doc.querySelectorAll(".js-sidebar-item");
   const connectSidebarItem = [...sidebarItems].find(element => {
-    return element.textContent === "Connect";
+    return element.textContent === "Setup";
   });
   ok(connectSidebarItem, "Sidebar contains a Connect item");
   const connectLink = connectSidebarItem.querySelector(".js-sidebar-link");
   ok(connectLink, "Sidebar contains a Connect link");
 
   info("Click on the Connect link in the sidebar");
   connectLink.click();
 
--- a/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
+++ b/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
@@ -12,18 +12,18 @@
 # toolbox.debugTargetInfo.runtimeLabel.thisFirefox. See 1520525.
 about-debugging-this-firefox-runtime-name = This Firefox
 
 # Sidebar heading for selecting the currently running instance of Firefox
 about-debugging-sidebar-this-firefox =
   .name = { about-debugging-this-firefox-runtime-name }
 
 # Sidebar heading for connecting to some remote source
-about-debugging-sidebar-connect =
-  .name = Connect
+about-debugging-sidebar-setup =
+  .name = Setup
 
 # Text displayed in the about:debugging sidebar when USB devices discovery is enabled.
 about-debugging-sidebar-usb-enabled = USB enabled
 
 # Text displayed in the about:debugging sidebar when USB devices discovery is disabled
 # (for instance because the mandatory ADB extension is not installed).
 about-debugging-sidebar-usb-disabled = USB disabled
 
@@ -55,61 +55,49 @@ about-debugging-sidebar-runtime-item-nam
 # locations).
 about-debugging-sidebar-runtime-item-name-no-device =
   .title = { $displayName }
 
 # Temporary text displayed in a sidebar button to refresh USB devices. Temporary
 # UI, do not localize.
 about-debugging-refresh-usb-devices-button = Refresh devices
 
-# Title of the Connect page.
-about-debugging-connect-title = Connect a Device
-
-# WiFi section of the Connect page
-about-debugging-connect-wifi =
-  .title = Via WiFi
+# Title of the Setup page.
+about-debugging-connect-title = Setup
 
-# Temporary text displayed when wifi support is turned off via preferences.
-# { $pref } is the name of the preference that enables wifi
-# Do not localize
-about-debugging-connect-wifi-disabled = WiFi debugging currently under development. You can enable it with the preference “{ $pref }”.
-
-# WiFi section step by step guide
-about-debugging-connect-wifi-step-same-network = Ensure that your browser and device are on the same network
+# Explanatory text in the Setup page about what the 'This Firefox' page is for
+about-debugging-setup-this-firefox = Use <a>This Firefox</a> to debug tags, extensions and service workers on this version of Firefox.
 
-# WiFi section step by step guide
-about-debugging-connect-wifi-step-open-firefox = Open Firefox for Android
-
-# WiFi section step by step guide
-about-debugging-connect-wifi-step-open-options = Go to Options -> Settings -> Advanced
-
-# WiFi section step by step guide
-about-debugging-connect-wifi-step-enable-debug = Enable Remote Debugging via WiFi in the Developer Tools section
+# USB section of the Setup page
+about-debugging-setup-usb-title = USB
+about-debugging-setup-usb-disabled = Enabling this will download and add the required Android USB debugging components to Firefox.
+about-debugging-setup-usb-enable-button = Enable USB Devices
+about-debugging-setup-usb-disable-button = Disable USB Devices
+about-debugging-setup-usb-updating-button = Updating…
 
-# USB section of the Connect page
-about-debugging-connect-usb =
-  .title = Via USB
-
-about-debugging-connect-usb-disabled = Enabling this will download and add the required Android USB debugging components to Firefox.
-about-debugging-connect-usb-enable-button = Enable USB Devices
-about-debugging-connect-usb-disable-button = Disable USB Devices
-about-debugging-connect-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-connect-usb-step-enable-dev-menu = Enable Developer menu on your Android device
+about-debugging-setup-usb-step-enable-dev-menu = Enable Developer menu on your Android device. <a>Learn how</a>
 
 # USB section step by step guide
-about-debugging-connect-usb-step-enable-debug = Enable USB Debugging on the Android Developer Menu
+about-debugging-setup-usb-step-enable-debug = Enable USB Debugging in the Android Developer Menu. <a>Learn how</a>
 
 # USB section step by step guide
-about-debugging-connect-usb-step-plug-device = Connect the USB Device to your computer
+about-debugging-setup-usb-step-enable-debug-firefox = Enable USB Debugging in Firefox on the Android device. <a>Learn how</a>
+
+# USB section step by step guide
+about-debugging-setup-usb-step-plug-device = Connect the Android device to your computer.
 
 # Network section of the Connect page
 about-debugging-connect-network =
-  .title = Via Network Location
+  .title = 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.
@@ -284,17 +272,17 @@ about-debugging-connection-prompt-disabl
 
 # Title of the application displayed in the tab
 -application-title = Debugging
 
 # Page title of connect / runtime page
 # Part of "about-debugging-page-title" string defined below
 about-debugging-page-title-selected-page =
   { $selectedPage ->
-     [connect] Connect
+     [connect] Setup
      *[runtime] Runtime
   }
 
 # Page title with the runtime displayed in the tab
 # { $selectedRuntimeId } is the id of the current runtime, such as "this-firefox", "localhost:6080", ...
 about-debugging-page-title-with-runtime = { -application-title } - { about-debugging-page-title-selected-page } / { $selectedRuntimeId }
 
 # Page title without the runtime displayed in the tab
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -218,16 +218,17 @@
   --purple-60: #8000d7;
 
   --blue-30: #75baff;
   --blue-40: #45a1ff;
   --blue-50: #0a84ff;
   --blue-55: #0074e8;
   --blue-60: #0060df;
   --blue-70: #003eaa;
+  --blue-80: #002275;
 
   --teal-60: #00c8d7;
   --teal-70: #008ea4;
 
   --red-20: #ffb3d2;
   --red-40: #ff3b6b;
   --red-50: #ff0039;
   --red-60: #d70022;