--- a/devtools/client/aboutdebugging/aboutdebugging.css
+++ b/devtools/client/aboutdebugging/aboutdebugging.css
@@ -192,8 +192,16 @@ button {
   flex-direction: column;
   width: 100%;
   height: 100%;
 }
 
 .error-page .error-page-details {
   color: gray;
 }
+
+.remote-form input {
+  margin: 0 5px;
+}
+
+.remote-form input::placeholder {
+  font-style: italic;
+}

--- a/devtools/client/aboutdebugging/components/aboutdebugging.js
+++ b/devtools/client/aboutdebugging/components/aboutdebugging.js
@@ -3,36 +3,32 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* eslint-env browser */
 
 "use strict";
 
 const { createFactory, createClass, DOM: dom } =
   require("devtools/client/shared/vendor/react");
-const { ConnectionManager, Connection } =
-  require("devtools/shared/client/connection-manager");
-const { RuntimeScanners } = require("devtools/client/webide/modules/runtimes");
 const Services = require("Services");
 
 loader.lazyRequireGetter(this, "DebuggerClient",
   "devtools/shared/client/main", true);
-loader.lazyRequireGetter(this, "DebuggerServer",
-  "devtools/server/main", true);
 
 const PanelMenu = createFactory(require("./panel-menu"));
+const { findDebuggerTransport } = require("../modules/connect");
 
 loader.lazyGetter(this, "AddonsPanel",
   () => createFactory(require("./addons/panel")));
 loader.lazyGetter(this, "TabsPanel",
   () => createFactory(require("./tabs/panel")));
 loader.lazyGetter(this, "WorkersPanel",
   () => createFactory(require("./workers/panel")));
 loader.lazyGetter(this, "ConnectPanel",
-  () => createFactory(require("./connect-panel")));
+  () => createFactory(require("./connect/panel")));
 
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
 const panels = [{
   id: "addons",
   name: Strings.GetStringFromName("addons"),
   icon: "chrome://devtools/skin/images/debugging-addons.svg",
@@ -50,135 +46,72 @@ const panels = [{
 }, {
   id: "connect",
   name: "Connect",
   component: ConnectPanel
 }];
 
 const defaultPanelId = "addons";
 
-// TODO: Refactor this as a shared devtools module.
-function findDebuggerTransport(href) {
-
-  // URL constructor doesn't support about: scheme
-  let url = new window.URL(href.replace("about:", "http://"));
-
-  // No query parameters -> local debugging
-  //   about:debugging
-  if (url.search.length <= 1) {
-    if (!DebuggerServer.initialized) {
-      DebuggerServer.init();
-      DebuggerServer.addBrowserActors();
-    }
-    DebuggerServer.allowChromeProcess = true;
-    return Promise.resolve(DebuggerServer.connectPipe());
-  }
-
-  let params = url.searchParams;
-
-  // Remote debugging: host + port
-  //   about:debugging?host=localhost&port=9000
-  if (params.has("host") && params.has("port")) {
-    let host = params.get("host");
-    let port = params.get("port");
-
-    // Copy/pasted from /devtools/client/framework/connect/connect.js :
-    try {
-      Services.prefs.setCharPref("devtools.debugger.remote-host", host);
-      Services.prefs.setIntPref("devtools.debugger.remote-port", port);
-    } catch (e) {
-      // Fails in e10s mode, but not a critical feature.
-    }
-    return DebuggerClient.socketConnect({ host, port });
-  }
-
-  // Remote debugging: USB/WiFi device
-  if (params.has("runtime") && params.has("type")) {
-    let id = params.get("runtime");
-    let type = params.get("type");
-    for (let runtime of RuntimeScanners.listRuntimes()) {
-      if (runtime.id !== id || runtime.type !== type) {
-        continue;
-      }
-      // Adapted from /devtools/client/webide/modules/app-manager.js:
-      // FIXME: This is probably not the right way to do this.
-      let port = Services.prefs.getIntPref("devtools.debugger.remote-port");
-      let connection = ConnectionManager.createConnection("localhost", port);
-      connection.off(Connection.Events.CONNECTED, () => {});
-      connection.off(Connection.Events.DISCONNECTED, () => {});
-      connection.resetOptions();
-      runtime.connect(connection);
-      return Promise.resolve(connection.client._transport);
-    }
-    return Promise.reject(new Error("Couldn't find runtime with spec: " + url.search));
-  }
-
-  // Unsupported runtime spec
-  //   about:debugging?hello=world
-  return Promise.reject(new Error("Invalid runtime spec: " + url.search));
-
-}
-
 module.exports = createClass({
   displayName: "AboutDebuggingApp",
 
   getInitialState() {
     return {
       client: null,
       error: null,
       selectedPanelId: defaultPanelId
     };
   },
 
   componentDidMount() {
-    dump("@@@@ getting runtime transport from spec...\n");
-    findDebuggerTransport(window.location.href).then(transport => {
-      dump("@@@@ creating DebuggerClient...\n");
-      let client = new DebuggerClient(transport);
-      dump("@@@@ connecting...\n");
-      client.connect().then(() => {
-        dump("@@@@ connected! \\o/\n");
-        this.setState({ client });
-      });
-    }).catch(error => {
-      dump("@@@@ error: " + error + "\n");
-      this.setState({ error });
-    });
     window.addEventListener("hashchange", this.onHashChange);
     this.onHashChange();
     this.props.telemetry.toolOpened("aboutdebugging");
+    this.initializeDebuggerTransport();
   },
 
   componentWillUnmount() {
     let { client } = this.state;
     if (client) {
       client.close();
     }
     window.removeEventListener("hashchange", this.onHashChange);
     this.props.telemetry.toolClosed("aboutdebugging");
     this.props.telemetry.destroy();
   },
 
+  initializeDebuggerTransport() {
+    findDebuggerTransport(window.location.href).then(transport => {
+      let client = new DebuggerClient(transport);
+      client.connect().then(() => {
+        this.setState({ client });
+      });
+    }).catch(error => {
+      this.setState({ error });
+    });
+  },
+
   onHashChange() {
     this.setState({
       selectedPanelId: window.location.hash.substr(1) || defaultPanelId
     });
   },
 
   selectPanel(panelId) {
     window.location.hash = "#" + panelId;
   },
 
   render() {
     let { client, error } = this.state;
     if (error) {
       return dom.pre(null, "Error: " + error);
     }
     if (!client) {
-      return dom.pre(null, "Connecting...")
+      return dom.pre(null, "Connecting...");
     }
 
     let { selectedPanelId } = this.state;
     let selectPanel = this.selectPanel;
     let selectedPanel = panels.find(p => p.id == selectedPanelId);
     let panel;
 
     if (selectedPanel) {

new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging/components/connect/moz.build
@@ -0,0 +1,7 @@
+# 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(
+    'panel.js',
+)

rename from devtools/client/aboutdebugging/components/connect-panel.js
rename to devtools/client/aboutdebugging/components/connect/panel.js
--- a/devtools/client/aboutdebugging/components/connect-panel.js
+++ b/devtools/client/aboutdebugging/components/connect/panel.js
@@ -3,23 +3,22 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* eslint-env browser */
 
 "use strict";
 
 const { createClass, createFactory, DOM: dom } =
   require("devtools/client/shared/vendor/react");
-const Services = require("Services");
-const { RuntimeScanners, RuntimeTypes } = require("devtools/client/webide/modules/runtimes");
+const {
+  RuntimeScanners,
+  RuntimeTypes
+} = require("devtools/client/webide/modules/runtimes");
 
-const PanelHeader = createFactory(require("./panel-header"));
-
-const Strings = Services.strings.createBundle(
-  "chrome://devtools/locale/aboutdebugging.properties");
+const PanelHeader = createFactory(require("../panel-header"));
 
 module.exports = createClass({
   displayName: "ConnectPanel",
 
   getInitialState() {
     return {
       runtimes: {
         usb: [],
@@ -56,70 +55,66 @@ module.exports = createClass({
           break;
         default:
           runtimes.other.push(runtime);
       }
     }
     this.setState({ runtimes });
   },
 
-  render() {
-    let { id } = this.props;
-    let { runtimes } = this.state;
+  renderRuntimes(runtimes) {
+    if (runtimes.length === 0) {
+      return "Nothing yet.";
+    }
 
-    // TODO: Maybe render "Enable remote debugging" pref checkbox?
-
-    // TODO: Refactor this a React component.
-    function runtimeLink (runtime) {
+    return runtimes.map(runtime => {
       return dom.a({
         href: "about:debugging?runtime=" + runtime.id + "&type=" + runtime.type,
         style: { display: "block" },
         target: "_blank",
         title: "Connect to " + runtime.name
       }, runtime.name);
-    }
+    });
+  },
+
+  render() {
+    let { id } = this.props;
+    let { runtimes } = this.state;
+
+    // TODO: Maybe render "Enable remote debugging" pref checkbox?
 
     return dom.div({
       id: id + "-panel",
       className: "panel",
       role: "tabpanel",
       "aria-labelledby": id + "-header"
     },
     PanelHeader({
       id: id + "-header",
       name: "Connect"
     }),
     dom.div({},
-      dom.h2({}, "USB devices"),
-      (runtimes.usb.length > 0
-        ? runtimes.usb.map(runtimeLink)
-        : "Nothing yet."),
-      dom.h2({}, "WiFi devices"),
-      (runtimes.wifi.length > 0
-        ? runtimes.wifi.map(runtimeLink)
-        : "Nothing yet."),
-      dom.h2({}, "Firefox OS simulators"),
-      (runtimes.simulators.length > 0
-        ? runtimes.simulators.map(runtimeLink)
-        : "Nothing yet."),
-      dom.h2({}, "Other runtimes"),
-      (runtimes.other.length > 0
-        ? runtimes.other.map(runtimeLink)
-        : "Nothing yet."),
       dom.h2({}, "Remote runtime"),
-      dom.form({ target: "_blank" },
-        dom.span({}, "Host:"),
-        dom.input({
-          name: "host",
-          placeholder: "(try localhost)",
-          style: { display: "inline" }
-        }),
-        dom.span({}, "Port:"),
-        dom.input({
-          name: "port",
-          placeholder: "(try 6080)",
-          style: { display: "inline" }
-        }),
-        dom.button({}, "Connect")
-      )
+        dom.form({
+          className: "remote-form",
+          target: "_blank",
+        },
+          dom.span({}, "Host:"),
+          dom.input({
+            name: "host",
+            placeholder: "localhost",
+            style: { display: "inline" }
+          }),
+          dom.span({}, "Port:"),
+          dom.input({
+            name: "port",
+            placeholder: "6080",
+            style: { display: "inline" }
+          }),
+          dom.button({}, "Connect")
+      ),
+      dom.h2({}, "USB devices"), this.renderRuntimes(runtimes.usb),
+      dom.h2({}, "WiFi devices"), this.renderRuntimes(runtimes.wifi),
+      dom.h2({}, "Firefox OS simulators"), this.renderRuntimes(runtimes.simulators),
+      dom.h2({}, "Other runtimes"), this.renderRuntimes(runtimes.other)
     ));
   }
 });

--- a/devtools/client/aboutdebugging/components/moz.build
+++ b/devtools/client/aboutdebugging/components/moz.build
@@ -1,18 +1,18 @@
 # 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/.
 
 DIRS += [
     'addons',
+    'connect',
     'tabs',
     'workers',
 ]
 
 DevToolsModules(
     'aboutdebugging.js',
-    'connect-panel.js',
     'panel-header.js',
     'panel-menu-entry.js',
     'panel-menu.js',
     'target-list.js',
 )

new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging/modules/connect.js
@@ -0,0 +1,78 @@
+/* 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/. */
+
+/* eslint-env browser */
+
+"use strict";
+
+const Services = require("Services");
+const { RuntimeScanners } = require("devtools/client/webide/modules/runtimes");
+const {
+  ConnectionManager,
+  Connection
+} = require("devtools/shared/client/connection-manager");
+
+loader.lazyRequireGetter(this, "DebuggerClient",
+  "devtools/shared/client/main", true);
+loader.lazyRequireGetter(this, "DebuggerServer",
+  "devtools/server/main", true);
+
+exports.findDebuggerTransport = function (href) {
+  // URL constructor doesn't support about: scheme
+  let url = new window.URL(href.replace("about:", "http://"));
+
+  // No query parameters -> local debugging
+  //   about:debugging
+  if (url.search.length <= 1) {
+    if (!DebuggerServer.initialized) {
+      DebuggerServer.init();
+      DebuggerServer.addBrowserActors();
+    }
+    DebuggerServer.allowChromeProcess = true;
+    return Promise.resolve(DebuggerServer.connectPipe());
+  }
+
+  let params = url.searchParams;
+
+  // Remote debugging: host + port
+  //   about:debugging?host=localhost&port=9000
+  if (params.has("host") && params.has("port")) {
+    let host = params.get("host");
+    let port = params.get("port");
+
+    // Copy/pasted from /devtools/client/framework/connect/connect.js :
+    try {
+      Services.prefs.setCharPref("devtools.debugger.remote-host", host);
+      Services.prefs.setIntPref("devtools.debugger.remote-port", port);
+    } catch (e) {
+      // Fails in e10s mode, but not a critical feature.
+    }
+    return DebuggerClient.socketConnect({ host, port });
+  }
+
+  // Remote debugging: USB/WiFi device
+  if (params.has("runtime") && params.has("type")) {
+    let id = params.get("runtime");
+    let type = params.get("type");
+    for (let runtime of RuntimeScanners.listRuntimes()) {
+      if (runtime.id !== id || runtime.type !== type) {
+        continue;
+      }
+      // Adapted from /devtools/client/webide/modules/app-manager.js:
+      // FIXME: This is probably not the right way to do this.
+      let port = Services.prefs.getIntPref("devtools.debugger.remote-port");
+      let connection = ConnectionManager.createConnection("localhost", port);
+      connection.off(Connection.Events.CONNECTED, () => {});
+      connection.off(Connection.Events.DISCONNECTED, () => {});
+      connection.resetOptions();
+      runtime.connect(connection);
+      return Promise.resolve(connection.client._transport);
+    }
+    return Promise.reject(new Error("Couldn't find runtime with spec: " + url.search));
+  }
+
+  // Unsupported runtime spec
+  //   about:debugging?hello=world
+  return Promise.reject(new Error("Invalid runtime spec: " + url.search));
+};

--- a/devtools/client/aboutdebugging/modules/moz.build
+++ b/devtools/client/aboutdebugging/modules/moz.build
@@ -1,8 +1,9 @@
 # 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(
     'addon.js',
+    'connect.js',
     'worker.js',
 )