Backed out 2 changesets (bug 1494543) for causing Devtools failures in browser/base/content/test/static/browser_parsable_css.js. CLOSED TREE
authorDorel Luca <dluca@mozilla.com>
Mon, 15 Oct 2018 12:14:17 +0300
changeset 489596 63123603efb86845916f5b92c2ac5cc7e89883bc
parent 489595 6c9eb32ab7ed9291f2bdb55f9aa66ea5b00d7e0d
child 489597 a3f38e1f3be40607863c9df74a2f8d64c4ab7e72
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
bugs1494543
milestone64.0a1
backs out744747bb295cbb4a02dbf9960e5f7676822834c6
5a54f333b855138687b5b71e33c1c6144fc7fbe5
Backed out 2 changesets (bug 1494543) for causing Devtools failures in browser/base/content/test/static/browser_parsable_css.js. CLOSED TREE Backed out changeset 744747bb295c (bug 1494543) Backed out changeset 5a54f333b855 (bug 1494543)
devtools/client/aboutdebugging-new/aboutdebugging.css
devtools/client/aboutdebugging-new/src/actions/runtimes.js
devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
devtools/client/aboutdebugging-new/src/components/sidebar/DeviceSidebarItemAction.css
devtools/client/aboutdebugging-new/src/components/sidebar/DeviceSidebarItemAction.js
devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarFixedItem.css
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarFixedItem.js
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.js
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.css
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js
devtools/client/aboutdebugging-new/src/components/sidebar/moz.build
devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js
devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
devtools/shared/adb/adb-scanner.js
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -11,19 +11,17 @@
 @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/WorkerDetail.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/DeviceSidebarItemAction.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarFixedItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.css";
 
 :root {
   /* Import css variables from common.css */
   --text-color: var(--in-content-page-color);
 
   /* */
   /* Variables with values from common.css, which are hardcoded there */
   /* */
--- a/devtools/client/aboutdebugging-new/src/actions/runtimes.js
+++ b/devtools/client/aboutdebugging-new/src/actions/runtimes.js
@@ -50,43 +50,43 @@ async function createNetworkClient(host,
 }
 
 async function createUSBClient(socketPath) {
   const port = await ADB.prepareTCPConnection(socketPath);
   return createNetworkClient("localhost", port);
 }
 
 async function createClientForRuntime(runtime) {
-  const { extra, type } = runtime;
+  const { connectionParameters, type } = runtime;
 
   if (type === RUNTIMES.THIS_FIREFOX) {
     return createLocalClient();
   } else if (type === RUNTIMES.NETWORK) {
-    const { host, port } = extra.connectionParameters;
+    const { host, port } = connectionParameters;
     return createNetworkClient(host, port);
   } else if (type === RUNTIMES.USB) {
-    const { socketPath } = extra.connectionParameters;
+    const { socketPath } = connectionParameters;
     return createUSBClient(socketPath);
   }
 
   return null;
 }
 
 async function getRuntimeInfo(runtime, client) {
-  const { extra, type } = runtime;
+  const { model, type } = runtime;
   const deviceFront = await client.mainRoot.getFront("device");
   const { brandName: name, channel, version } = await deviceFront.getDescription();
   const icon =
     (channel === "release" || channel === "beta" || channel === "aurora")
       ? `chrome://devtools/skin/images/aboutdebugging-firefox-${ channel }.svg`
       : "chrome://devtools/skin/images/aboutdebugging-firefox-nightly.svg";
 
   return {
     icon,
-    deviceName: extra ? extra.deviceName : undefined,
+    model,
     name,
     type,
     version,
   };
 }
 
 function connectRuntime(id) {
   return async (dispatch, getState) => {
--- a/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
@@ -13,42 +13,42 @@ const Localized = createFactory(FluentRe
 
 /**
  * This component displays runtime information.
  */
 class RuntimeInfo extends PureComponent {
   static get propTypes() {
     return {
       icon: PropTypes.string.isRequired,
-      deviceName: PropTypes.string,
+      model: PropTypes.string,
       name: PropTypes.string.isRequired,
       version: PropTypes.string.isRequired,
     };
   }
 
   render() {
-    const { icon, deviceName, name, version } = this.props;
+    const { icon, model, name, version } = this.props;
 
     return dom.h1(
       {
         className: "runtime-info",
       },
       dom.img(
         {
           className: "runtime-info__icon",
           src: icon,
         }
       ),
       Localized(
         {
-          id: deviceName ? "about-debugging-runtime-info-with-model"
-                          : "about-debugging-runtime-info",
+          id: model ? "about-debugging-runtime-info-with-model"
+                    : "about-debugging-runtime-info",
           $name: name,
-          $deviceName: deviceName,
+          $model: model,
           $version: version,
         },
-        dom.label({}, `${ name } on ${ deviceName } (${ version })`)
+        dom.label({}, `${ name } on ${ model } (${ version })`)
       )
     );
   }
 }
 
 module.exports = RuntimeInfo;
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/DeviceSidebarItemAction.css
@@ -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/. */
+
+.sidebar-item__connect-button {
+  font-size: 0.8em;
+}
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/DeviceSidebarItemAction.js
@@ -0,0 +1,57 @@
+/* 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 { createFactory, 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");
+
+const FluentReact = require("devtools/client/shared/vendor/fluent-react");
+const Localized = createFactory(FluentReact.Localized);
+
+const Actions = require("../../actions/index");
+
+/**
+ * This component displays actions for sidebar items representing a device.
+ */
+class DeviceSidebarItemAction extends PureComponent {
+  static get propTypes() {
+    return {
+      connected: PropTypes.bool.isRequired,
+      dispatch: PropTypes.func.isRequired,
+      runtimeId: PropTypes.string.isRequired,
+    };
+  }
+
+  render() {
+    const { connected } = this.props;
+    if (connected) {
+      return Localized(
+        {
+          id: "about-debugging-sidebar-item-connected-label"
+        },
+        dom.span({}, "Connected")
+      );
+    }
+
+    return Localized(
+      {
+        id: "about-debugging-sidebar-item-connect-button"
+      },
+      dom.button(
+        {
+          className: "sidebar-item__connect-button",
+          onClick: () => {
+            const { dispatch, runtimeId } = this.props;
+            dispatch(Actions.connectRuntime(runtimeId));
+          }
+        },
+        "Connect"
+      )
+    );
+  }
+}
+
+module.exports = DeviceSidebarItemAction;
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
@@ -8,18 +8,18 @@ const { createFactory, PureComponent } =
 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);
 
 const { PAGES, RUNTIMES } = require("../../constants");
 
-const SidebarFixedItem = createFactory(require("./SidebarFixedItem"));
-const SidebarRuntimeItem = createFactory(require("./SidebarRuntimeItem"));
+const DeviceSidebarItemAction = createFactory(require("./DeviceSidebarItemAction"));
+const SidebarItem = createFactory(require("./SidebarItem"));
 const FIREFOX_ICON = "chrome://devtools/skin/images/aboutdebugging-firefox-logo.svg";
 const CONNECT_ICON = "chrome://devtools/skin/images/aboutdebugging-connect-icon.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 {
@@ -53,58 +53,66 @@ class Sidebar extends PureComponent {
 
   renderSidebarItems(icon, runtimes) {
     const { dispatch, selectedPage } = this.props;
 
     return runtimes.map(runtime => {
       const pageId = runtime.type + "-" + runtime.id;
       const runtimeHasConnection = !!runtime.connection;
 
-      return SidebarRuntimeItem({
+      const connectComponent = DeviceSidebarItemAction({
+        connected: runtimeHasConnection,
+        dispatch,
+        runtimeId: runtime.id,
+      });
+
+      return SidebarItem({
+        connectComponent,
         id: pageId,
-        deviceName: runtime.extra.deviceName,
         dispatch,
         icon,
-        isConnected: runtimeHasConnection,
         isSelected: selectedPage === pageId,
         key: pageId,
         name: runtime.name,
         runtimeId: runtime.id,
+        selectable: runtimeHasConnection,
       });
     });
   }
 
   render() {
     const { dispatch, selectedPage } = this.props;
 
     return dom.aside(
       {
         className: `sidebar ${this.props.className || ""}`,
       },
       dom.ul(
         {},
         Localized(
           { id: "about-debugging-sidebar-this-firefox", attrs: { name: true } },
-          SidebarFixedItem({
+          SidebarItem({
             id: PAGES.THIS_FIREFOX,
             dispatch,
             icon: FIREFOX_ICON,
             isSelected: PAGES.THIS_FIREFOX === selectedPage,
             name: "This Firefox",
             runtimeId: RUNTIMES.THIS_FIREFOX,
+            selectable: true,
           })
         ),
         Localized(
           { id: "about-debugging-sidebar-connect", attrs: { name: true } },
-          SidebarFixedItem({
+          SidebarItem({
             id: PAGES.CONNECT,
             dispatch,
             icon: CONNECT_ICON,
             isSelected: PAGES.CONNECT === selectedPage,
             name: "Connect",
+            selectable: true,
           })
         ),
         dom.hr(),
         this.renderDevices()
       )
     );
   }
 }
deleted file mode 100644
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarFixedItem.css
+++ /dev/null
@@ -1,31 +0,0 @@
-/* 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/. */
-
-/*
- * Layout of a fixed sidebar item
- *
- *  +--------+----------------+
- *  | Icon   | Name           |
- *  +--------+----------------+
- */
-
-.sidebar-fixed-item {
-  align-items: center;
-  border-radius: 2px;
-  display: grid;
-  grid-template-columns: 34px 1fr;
-  font-size: 16px;
-  height: 48px;
-  padding-inline-end: 10px;
-  padding-inline-start: 10px;
-}
-
-.sidebar-fixed-item__icon {
-  fill: currentColor;
-  height: 24px;
-  margin-inline-end: 9px;
-  width: 24px;
-  -moz-context-properties: fill;
-}
-
deleted file mode 100644
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarFixedItem.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/* 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, 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 SidebarItem = createFactory(require("./SidebarItem"));
-
-const Actions = require("../../actions/index");
-
-/**
- * This component displays a fixed item in the Sidebar component.
- */
-class SidebarFixedItem extends PureComponent {
-  static get propTypes() {
-    return {
-      dispatch: PropTypes.func.isRequired,
-      icon: PropTypes.string.isRequired,
-      id: PropTypes.string.isRequired,
-      isSelected: PropTypes.bool.isRequired,
-      name: PropTypes.string.isRequired,
-      runtimeId: PropTypes.string,
-    };
-  }
-
-  render() {
-    const {
-      dispatch,
-      id,
-      icon,
-      isSelected,
-      name,
-      runtimeId,
-    } = this.props;
-
-    return SidebarItem(
-      {
-        isSelected,
-        selectable: true,
-        className: "sidebar-fixed-item",
-        onSelect: () => {
-          dispatch(Actions.selectPage(id, runtimeId));
-        }
-      },
-      dom.img(
-        {
-          className: "sidebar-fixed-item__icon",
-          src: icon,
-        }
-      ),
-      dom.span(
-        {
-          className: "ellipsis-text",
-          title: name,
-        },
-        name
-      )
-    );
-  }
-}
-
-module.exports = SidebarFixedItem;
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css
@@ -4,28 +4,48 @@
 
 .sidebar-item {
   /* Import css variables from common.css */
   --sidebar-text-color: var(--in-content-category-text);
   --sidebar-selected-color: var(--in-content-category-text-selected);
   --sidebar-background-hover: var(--in-content-category-background-hover);
 }
 
+/*
+ * Layout of a sidebar item
+ *
+ *  +--------+----------------+---------------------------+
+ *  | Icon   | Name           | Connect button (optional) |
+ *  +--------+----------------+---------------------------+
+ */
 .sidebar-item {
+  align-items: center;
+  border-radius: 2px;
   color: var(--sidebar-text-color);
-  border-radius: 2px;
+  display: grid;
+  grid-template-columns: 34px auto max-content;
+  font-size: 16px;
+  height: 48px;
   padding-inline-end: 10px;
   padding-inline-start: 10px;
   transition: background-color 150ms;
   -moz-user-select: none;
 }
 
 .sidebar-item:not(.sidebar-item--selectable) {
   opacity: 0.5;
 }
 
 .sidebar-item--selectable:hover {
   background-color: var(--sidebar-background-hover);
 }
 
+.sidebar-item__icon {
+  fill: currentColor;
+  height: 24px;
+  margin-inline-end: 9px;
+  width: 24px;
+  -moz-context-properties: fill;
+}
+
 .sidebar-item--selected {
   color: var(--sidebar-selected-color);
 }
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.js
@@ -3,46 +3,61 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 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");
 
+const Actions = require("../../actions/index");
+
 /**
- * This component is used as a wrapper by items in the sidebar.
+ * This component displays an item of the Sidebar component.
  */
 class SidebarItem extends PureComponent {
   static get propTypes() {
     return {
-      children: PropTypes.arrayOf(PropTypes.element).isRequired,
-      className: PropTypes.string,
+      connectComponent: PropTypes.any,
+      dispatch: PropTypes.func.isRequired,
+      icon: PropTypes.string.isRequired,
+      id: PropTypes.string.isRequired,
       isSelected: PropTypes.bool.isRequired,
+      name: PropTypes.string.isRequired,
+      runtimeId: PropTypes.string,
       selectable: PropTypes.bool.isRequired,
-      onSelect: PropTypes.func.isRequired,
     };
   }
 
   onItemClick() {
-    this.props.onSelect();
+    const { id, dispatch, runtimeId } = this.props;
+    dispatch(Actions.selectPage(id, runtimeId));
   }
 
   render() {
-    const {children, className, isSelected, selectable } = this.props;
+    const { connectComponent, icon, isSelected, name, selectable } = this.props;
 
     return dom.li(
       {
         className: "sidebar-item js-sidebar-item" +
-                   (className ? ` ${className}` : "") +
                    (isSelected ?
                       " sidebar-item--selected js-sidebar-item-selected" :
                       ""
                    ) +
                    (selectable ? " sidebar-item--selectable" : ""),
         onClick: selectable ? () => this.onItemClick() : null
       },
-      children
+      dom.img({
+        className: "sidebar-item__icon",
+        src: icon,
+      }),
+      dom.span(
+        {
+          className: "ellipsis-text",
+          title: name,
+        },
+        name),
+      connectComponent ? connectComponent : null
     );
   }
 }
 
 module.exports = SidebarItem;
deleted file mode 100644
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/* 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/. */
-
-/*
- * Layout of a runtime sidebar item
- *
- *  +--------+----------------+---------------------------+
- *  | Icon   | Runtime name   | Connect button            |
- *  +--------+----------------+---------------------------+
- */
-
-.sidebar-runtime-item {
-  font-size: 0.8em;
-  align-items: center;
-  display: grid;
-  grid-column-gap: var(--base-distance);
-  grid-template-columns: 20px 1fr auto;
-}
-
-.sidebar-runtime-item__icon {
-  fill: currentColor;
-  -moz-context-properties: fill;
-  margin-inline-end: var(--base-distance);
-}
deleted file mode 100644
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/* 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 { createFactory, 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");
-
-const FluentReact = require("devtools/client/shared/vendor/fluent-react");
-const Localized = createFactory(FluentReact.Localized);
-
-const SidebarItem = createFactory(require("./SidebarItem"));
-const Actions = require("../../actions/index");
-
-/**
- * This component displays a runtime item of the Sidebar component.
- */
-class SidebarRuntimeItem extends PureComponent {
-  static get propTypes() {
-    return {
-      id: PropTypes.string.isRequired,
-      deviceName: PropTypes.string,
-      dispatch: PropTypes.func.isRequired,
-      // Provided by wrapping the component with FluentReact.withLocalization.
-      getString: PropTypes.func.isRequired,
-      icon: PropTypes.string.isRequired,
-      isConnected: PropTypes.bool.isRequired,
-      isSelected: PropTypes.bool.isRequired,
-      name: PropTypes.string.isRequired,
-      runtimeId: PropTypes.string.isRequired,
-    };
-  }
-
-  renderConnectButton() {
-    return Localized(
-      {
-        id: "about-debugging-sidebar-item-connect-button"
-      },
-      dom.button(
-        {
-          className: "sidebar-item__connect-button",
-          onClick: () => {
-            const { dispatch, runtimeId } = this.props;
-            dispatch(Actions.connectRuntime(runtimeId));
-          }
-        },
-        "Connect"
-      )
-    );
-  }
-
-  renderNameWithDevice(name, device) {
-    return dom.span(
-      {
-        className: "ellipsis-text",
-        title: `${name} (${device})`
-      },
-      `${name}`,
-      dom.br({}),
-      device
-    );
-  }
-
-  renderName(name) {
-    return dom.span(
-      {
-        className: "ellipsis-text",
-        title: name
-      },
-      `${name}`
-    );
-  }
-
-  render() {
-    const {
-      deviceName,
-      dispatch,
-      getString,
-      icon,
-      id,
-      isConnected,
-      isSelected,
-      name,
-      runtimeId,
-    } = this.props;
-
-    const connectionStatus = isConnected ?
-      getString("aboutdebugging-sidebar-runtime-connection-status-connected") :
-      getString("aboutdebugging-sidebar-runtime-connection-status-disconnected");
-
-    return SidebarItem(
-      {
-        isSelected,
-        selectable: isConnected,
-        className: "sidebar-runtime-item",
-        onSelect: () => {
-          dispatch(Actions.selectPage(id, runtimeId));
-        }
-      },
-      dom.img(
-        {
-          className: "sidebar-runtime-item__icon " +
-            `${isConnected ? "sidebar-runtime-item__icon--connected" : "" }`,
-          src: icon,
-          alt: connectionStatus,
-          title: connectionStatus
-        }
-      ),
-      deviceName ? this.renderNameWithDevice(name, deviceName) : this.renderName(name),
-      !isConnected ? this.renderConnectButton() : null
-    );
-  }
-}
-
-module.exports = FluentReact.withLocalization(SidebarRuntimeItem);
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/moz.build
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/moz.build
@@ -1,14 +1,12 @@
 # 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(
+    'DeviceSidebarItemAction.css',
+    'DeviceSidebarItemAction.js',
     'Sidebar.css',
     'Sidebar.js',
-    'SidebarFixedItem.css',
-    'SidebarFixedItem.js',
     'SidebarItem.css',
     'SidebarItem.js',
-    'SidebarRuntimeItem.css',
-    'SidebarRuntimeItem.js',
 )
--- a/devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js
+++ b/devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js
@@ -77,41 +77,37 @@ function runtimesReducer(state = Runtime
       return _updateRuntimeById(id, { connection: null }, state);
     }
 
     case NETWORK_LOCATIONS_UPDATED: {
       const { locations } = action;
       const networkRuntimes = locations.map(location => {
         const [ host, port ] = location.split(":");
         return {
+          connectionParameters: { host, port },
           id: location,
-          extra: {
-            connectionParameters: { host, port },
-          },
           name: location,
           type: RUNTIMES.NETWORK,
         };
       });
       return Object.assign({}, state, { networkRuntimes });
     }
 
     case UNWATCH_RUNTIME_SUCCESS: {
       return Object.assign({}, state, { selectedRuntimeId: null });
     }
 
     case USB_RUNTIMES_UPDATED: {
       const { runtimes } = action;
       const usbRuntimes = runtimes.map(runtime => {
         return {
+          connectionParameters: { socketPath: runtime._socketPath },
           id: runtime.id,
-          extra: {
-            connectionParameters: { socketPath: runtime._socketPath },
-            deviceName: runtime.deviceName,
-          },
-          name: runtime.shortName,
+          model: runtime._model,
+          name: runtime.name,
           type: RUNTIMES.USB,
         };
       });
       return Object.assign({}, state, { usbRuntimes });
     }
 
     case WATCH_RUNTIME_SUCCESS: {
       const { id } = action.runtime;
--- a/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
+++ b/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
@@ -8,21 +8,16 @@
 # Sidebar heading for selecting the currently running instance of Firefox
 about-debugging-sidebar-this-firefox =
   .name = This Firefox
 
 # Sidebar heading for connecting to some remote source
 about-debugging-sidebar-connect =
   .name = Connect
 
-# Connection status (connected) for runtime items in the sidebar
-aboutdebugging-sidebar-runtime-connection-status-connected = Connected
-# Connection status (disconnected) for runtime items in the sidebar
-aboutdebugging-sidebar-runtime-connection-status-disconnected = Disconnected
-
 # Text displayed in the about:debugging sidebar when no device was found.
 about-debugging-sidebar-no-devices = No devices discovered
 
 # Text displayed in buttons found in sidebar items representing remote runtimes.
 # Clicking on the button will attempt to connect to the runtime.
 about-debugging-sidebar-item-connect-button = Connect
 
 # Temporary text displayed in sidebar items representing remote runtimes after
@@ -173,13 +168,13 @@ about-debugging-worker-status-stopped = 
 # about:debugging, so such service workers are considered as registering.
 about-debugging-worker-status-registering = Registering
 
 # Displayed for runtime info in runtime pages.
 # { $name } is brand name such as "Firefox Nightly"
 # { $version } is version such as "64.0a1"
 about-debugging-runtime-info = { $name } ({ $version })
 
-# Displayed for runtime info in runtime page when we display the device model as well.
+# Displayed for runtime info in runtime page when we display the model as well.
 # { $name } is brand name such as "Firefox Nightly"
 # { $version } is version such as "64.0a1"
-# { $deviceName } is model name of device
-about-debugging-runtime-info-with-model = { $name } on { $deviceName } ({ $version })
+# { $model } is model name of device
+about-debugging-runtime-info-with-model = { $name } on { $model } ({ $version })
--- a/devtools/shared/adb/adb-scanner.js
+++ b/devtools/shared/adb/adb-scanner.js
@@ -139,57 +139,43 @@ FirefoxOnAndroidRuntime.detect = async f
     dumpn("Found " + runtime.name);
     runtimes.push(runtime);
   }
   return runtimes;
 };
 
 FirefoxOnAndroidRuntime.prototype = Object.create(Runtime.prototype);
 
-FirefoxOnAndroidRuntime.prototype._channel = function() {
-  const packageName = this._packageName();
-
-  switch (packageName) {
-    case "org.mozilla.firefox":
-      return "";
-    case "org.mozilla.firefox_beta":
-      return "Beta";
-    case "org.mozilla.fennec":
-    case "org.mozilla.fennec_aurora":
-      // This package name is now the one for Firefox Nightly distributed
-      // through the Google Play Store since "dawn project"
-      // cf. https://bugzilla.mozilla.org/show_bug.cgi?id=1357351#c8
-      return "Nightly";
-    default:
-      return "Custom";
-  }
-};
-
-FirefoxOnAndroidRuntime.prototype._packageName = function() {
-  // If using abstract socket address, it is "@org.mozilla.firefox/..."
-  // If using path base socket, it is "/data/data/<package>...""
-  // Until Fennec 62 only supports path based UNIX domain socket, but
-  // Fennec 63+ supports both path based and abstract socket.
-  return this._socketPath.startsWith("@") ?
-    this._socketPath.substr(1).split("/")[0] :
-    this._socketPath.split("/")[3];
-};
-
-Object.defineProperty(FirefoxOnAndroidRuntime.prototype, "shortName", {
-  get() {
-    return `Firefox ${this._channel()}`;
-  }
-});
-
-Object.defineProperty(FirefoxOnAndroidRuntime.prototype, "deviceName", {
-  get() {
-    return this._model || this.device.id;
-  }
-});
-
 Object.defineProperty(FirefoxOnAndroidRuntime.prototype, "name", {
   get() {
-    const channel = this._channel();
-    return "Firefox " + channel + " on Android (" + this.deviceName + ")";
+    // If using abstract socket address, it is "@org.mozilla.firefox/..."
+    // If using path base socket, it is "/data/data/<package>...""
+    // Until Fennec 62 only supports path based UNIX domain socket, but
+    // Fennec 63+ supports both path based and abstract socket.
+    const packageName = this._socketPath.startsWith("@") ?
+                        this._socketPath.substr(1).split("/")[0] :
+                        this._socketPath.split("/")[3];
+    let channel;
+    switch (packageName) {
+      case "org.mozilla.firefox":
+        channel = "";
+        break;
+      case "org.mozilla.firefox_beta":
+        channel = " Beta";
+        break;
+      case "org.mozilla.fennec_aurora":
+        // This package name is now the one for Firefox Nightly distributed
+        // through the Google Play Store since "dawn project"
+        // cf. https://bugzilla.mozilla.org/show_bug.cgi?id=1357351#c8
+        channel = " Nightly";
+        break;
+      case "org.mozilla.fennec":
+        channel = " Nightly";
+        break;
+      default:
+        channel = " Custom";
+    }
+    return "Firefox" + channel + " on Android (" +
+           (this._model || this.device.id) + ")";
   }
 });
 
 exports.ADBScanner = ADBScanner;