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 499692 63123603efb86845916f5b92c2ac5cc7e89883bc
parent 499691 6c9eb32ab7ed9291f2bdb55f9aa66ea5b00d7e0d
child 499693 a3f38e1f3be40607863c9df74a2f8d64c4ab7e72
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1494543
milestone64.0a1
backs out744747bb295cbb4a02dbf9960e5f7676822834c6
5a54f333b855138687b5b71e33c1c6144fc7fbe5
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
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;