Backed out 3 changesets (bug 1539344) for devtools failures on browser_toolbox_target.js. CLOSED TREE
authorCosmin Sabou <csabou@mozilla.com>
Tue, 09 Apr 2019 14:03:07 +0300
changeset 468545 ae6b824bbe75f21fba58d990de702d25799ce200
parent 468544 dfef5e9b459d20352443637a47b24fe9f26070e4
child 468546 a8e6fd651ef20b6940782870c2764a66949a542e
push id82649
push usercsabou@mozilla.com
push dateTue, 09 Apr 2019 11:29:42 +0000
treeherderautoland@a8e6fd651ef2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1539344
milestone68.0a1
backs out878f78400ed7123ddfc8b431c9dfc6225dfcbc1b
8b3d1e3ae296e9f4ae5fdda6a8bb4660ea8a1150
29b64aed34748dda4d58f5d3f373f831eacc72b0
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 3 changesets (bug 1539344) for devtools failures on browser_toolbox_target.js. CLOSED TREE Backed out changeset 878f78400ed7 (bug 1539344) Backed out changeset 8b3d1e3ae296 (bug 1539344) Backed out changeset 29b64aed3474 (bug 1539344)
devtools/client/aboutdebugging-new/src/actions/debug-targets.js
devtools/client/aboutdebugging-new/src/constants.js
devtools/client/aboutdebugging-new/src/types/debug-target.js
devtools/client/framework/components/DebugTargetInfo.js
devtools/client/framework/components/ToolboxToolbar.js
devtools/client/framework/test/jest/components/__snapshots__/debug-target-info.test.js.snap
devtools/client/framework/test/jest/components/debug-target-info.test.js
devtools/client/framework/toolbox.js
devtools/client/locales/en-US/toolbox.properties
devtools/client/shared/remote-debugging/constants.js
devtools/client/shared/remote-debugging/moz.build
devtools/client/shared/remote-debugging/remote-client-manager.js
devtools/client/themes/toolbox.css
--- a/devtools/client/aboutdebugging-new/src/actions/debug-targets.js
+++ b/devtools/client/aboutdebugging-new/src/actions/debug-targets.js
@@ -52,24 +52,24 @@ function inspectDebugTarget(type, id) {
       // actor is cached in the client instance. Instead we should pass an id that does
       // not depend on the client (such as the worker url). This will be fixed in
       // Bug 1539328.
       // Once the target is destroyed after closing the toolbox, the front will be gone
       // and can no longer be used. When debugging This Firefox, workers are regularly
       // updated so this is not an issue. On remote runtimes however, trying to inspect a
       // worker a second time after closing the corresponding about:devtools-toolbox tab
       // will fail. See Bug 1534201.
-      window.open(`about:devtools-toolbox?type=${type}&id=${id}`);
+      window.open(`about:devtools-toolbox?type=${type.toLowerCase()}&id=${id}`);
     } else {
-      window.open(`about:devtools-toolbox?type=${type}&id=${id}` +
+      window.open(`about:devtools-toolbox?type=${type.toLowerCase()}&id=${id}` +
                   `&remoteId=${remoteId}`);
     }
 
     dispatch(Actions.recordTelemetryEvent("inspect", {
-      "target_type": type.toUpperCase(),
+      "target_type": type,
       "runtime_type": runtime.type,
     }));
   };
 }
 
 function installTemporaryExtension() {
   const message = l10n.getString("about-debugging-tmp-extension-install-message");
   return async (dispatch, getState) => {
--- a/devtools/client/aboutdebugging-new/src/constants.js
+++ b/devtools/client/aboutdebugging-new/src/constants.js
@@ -1,16 +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/. */
 
 "use strict";
 
-const { CONNECTION_TYPES, DEBUG_TARGET_TYPES } =
-  require("devtools/client/shared/remote-debugging/constants");
+const { CONNECTION_TYPES } =
+  require("devtools/client/shared/remote-debugging/remote-client-manager");
 
 const actionTypes = {
   ADB_ADDON_INSTALL_START: "ADB_ADDON_INSTALL_START",
   ADB_ADDON_INSTALL_SUCCESS: "ADB_ADDON_INSTALL_SUCCESS",
   ADB_ADDON_INSTALL_FAILURE: "ADB_ADDON_INSTALL_FAILURE",
   ADB_ADDON_UNINSTALL_START: "ADB_ADDON_UNINSTALL_START",
   ADB_ADDON_UNINSTALL_SUCCESS: "ADB_ADDON_UNINSTALL_SUCCESS",
   ADB_ADDON_UNINSTALL_FAILURE: "ADB_ADDON_UNINSTALL_FAILURE",
@@ -62,17 +62,22 @@ const actionTypes = {
   UPDATE_RUNTIME_MULTIE10S_SUCCESS: "UPDATE_RUNTIME_MULTIE10S_SUCCESS",
   USB_RUNTIMES_SCAN_START: "USB_RUNTIMES_SCAN_START",
   USB_RUNTIMES_SCAN_SUCCESS: "USB_RUNTIMES_SCAN_SUCCESS",
   WATCH_RUNTIME_FAILURE: "WATCH_RUNTIME_FAILURE",
   WATCH_RUNTIME_START: "WATCH_RUNTIME_START",
   WATCH_RUNTIME_SUCCESS: "WATCH_RUNTIME_SUCCESS",
 };
 
-const DEBUG_TARGETS = DEBUG_TARGET_TYPES;
+const DEBUG_TARGETS = {
+  EXTENSION: "EXTENSION",
+  PROCESS: "PROCESS",
+  TAB: "TAB",
+  WORKER: "WORKER",
+};
 
 const DEBUG_TARGET_PANE = {
   INSTALLED_EXTENSION: "installedExtension",
   PROCESSES: "processes",
   OTHER_WORKER: "otherWorker",
   SERVICE_WORKER: "serviceWorker",
   SHARED_WORKER: "sharedWorker",
   TAB: "tab",
--- a/devtools/client/aboutdebugging-new/src/types/debug-target.js
+++ b/devtools/client/aboutdebugging-new/src/types/debug-target.js
@@ -1,16 +1,15 @@
 /* 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 PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { DEBUG_TARGETS } = require("../constants");
 
 const extensionTargetDetails = {
   // actor ID for this extention.
   actor: PropTypes.string.isRequired,
   location: PropTypes.string.isRequired,
   // manifestURL points to the manifest.json file. This URL is only valid when debugging
   // local extensions so it might be null.
   manifestURL: PropTypes.string,
@@ -55,13 +54,13 @@ const debugTarget = {
   icon: PropTypes.string.isRequired,
   // unique id for the target (unique in the scope of the application lifecycle).
   // - extensions: {String} extension id (for instance "someextension@mozilla.org")
   // - tabs: {Number} outerWindowID
   // - workers: {String} id for the WorkerTargetActor corresponding to the worker
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   // display name for the debug target.
   name: PropTypes.string.isRequired,
-  // one of "extension", "tab", "worker", "process".
-  type: PropTypes.oneOf(Object.values(DEBUG_TARGETS)).isRequired,
+  // one of "EXTENSION", "TAB", "WORKER".
+  type: PropTypes.string.isRequired,
 };
 
 exports.debugTarget = PropTypes.shape(debugTarget);
--- a/devtools/client/framework/components/DebugTargetInfo.js
+++ b/devtools/client/framework/components/DebugTargetInfo.js
@@ -1,125 +1,89 @@
 /* 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 dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { CONNECTION_TYPES, DEBUG_TARGET_TYPES } =
-  require("devtools/client/shared/remote-debugging/constants");
+const { CONNECTION_TYPES } =
+  require("devtools/client/shared/remote-debugging/remote-client-manager");
 
 /**
  * This is header that should be displayed on top of the toolbox when using
  * about:devtools-toolbox.
  */
 class DebugTargetInfo extends PureComponent {
   static get propTypes() {
     return {
-      debugTargetData: PropTypes.shape({
-        connectionType: PropTypes.oneOf(Object.values(CONNECTION_TYPES)).isRequired,
-        deviceDescription: PropTypes.shape({
-          brandName: PropTypes.string.isRequired,
-          channel: PropTypes.string.isRequired,
-          deviceName: PropTypes.string,
-          version: PropTypes.string.isRequired,
-        }).isRequired,
-        targetType: PropTypes.oneOf(Object.values(DEBUG_TARGET_TYPES)).isRequired,
+      deviceDescription: PropTypes.shape({
+        brandName: PropTypes.string.isRequired,
+        channel: PropTypes.string.isRequired,
+        connectionType: PropTypes.string.isRequired,
+        deviceName: PropTypes.string,
+        version: PropTypes.string.isRequired,
       }).isRequired,
       L10N: PropTypes.object.isRequired,
       toolbox: PropTypes.object.isRequired,
     };
   }
 
   getRuntimeText() {
-    const { debugTargetData, L10N } = this.props;
-    const { brandName, version } = debugTargetData.deviceDescription;
-    const { connectionType } = debugTargetData;
+    const { deviceDescription, L10N } = this.props;
+    const { brandName, version, connectionType } = deviceDescription;
 
     return (connectionType === CONNECTION_TYPES.THIS_FIREFOX)
       ? L10N.getFormatStr("toolbox.debugTargetInfo.runtimeLabel.thisFirefox", version)
       : L10N.getFormatStr("toolbox.debugTargetInfo.runtimeLabel", brandName, version);
   }
 
   getAssetsForConnectionType() {
-    const { connectionType } = this.props.debugTargetData;
+    const { connectionType } = this.props.deviceDescription;
 
     switch (connectionType) {
       case CONNECTION_TYPES.USB:
         return {
           image: "chrome://devtools/skin/images/aboutdebugging-usb-icon.svg",
           l10nId: "toolbox.debugTargetInfo.connection.usb",
         };
       case CONNECTION_TYPES.NETWORK:
         return {
           image: "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg",
           l10nId: "toolbox.debugTargetInfo.connection.network",
         };
     }
   }
 
-  getAssetsForDebugTargetType() {
-    const { targetType } = this.props.debugTargetData;
-
-    // TODO: https://bugzilla.mozilla.org/show_bug.cgi?id=1520723
-    //       Show actual favicon (currently toolbox.target.activeTab.favicon
-    //       is unpopulated)
-    const favicon = "chrome://devtools/skin/images/globe.svg";
-
-    switch (targetType) {
-      case DEBUG_TARGET_TYPES.EXTENSION:
-        return {
-          image: "chrome://devtools/skin/images/debugging-addons.svg",
-          l10nId: "toolbox.debugTargetInfo.targetType.extension",
-        };
-      case DEBUG_TARGET_TYPES.PROCESS:
-        return {
-          image: "chrome://devtools/skin/images/settings.svg",
-          l10nId: "toolbox.debugTargetInfo.targetType.process",
-        };
-      case DEBUG_TARGET_TYPES.TAB:
-        return {
-          image: favicon,
-          l10nId: "toolbox.debugTargetInfo.targetType.tab",
-        };
-      case DEBUG_TARGET_TYPES.WORKER:
-        return {
-          image: "chrome://devtools/skin/images/debugging-workers.svg",
-          l10nId: "toolbox.debugTargetInfo.targetType.worker",
-        };
-    }
-  }
-
   shallRenderConnection() {
-    const { connectionType } = this.props.debugTargetData;
+    const { connectionType } = this.props.deviceDescription;
     const renderableTypes = [
       CONNECTION_TYPES.USB,
       CONNECTION_TYPES.NETWORK,
     ];
 
     return renderableTypes.includes(connectionType);
   }
 
   renderConnection() {
-    const { connectionType } = this.props.debugTargetData;
+    const { connectionType } = this.props.deviceDescription;
     const { image, l10nId } = this.getAssetsForConnectionType();
 
     return dom.span(
       {
         className: "iconized-label js-connection-info",
       },
       dom.img({ src: image, alt: `${connectionType} icon`}),
       this.props.L10N.getStr(l10nId),
     );
   }
 
   renderRuntime() {
-    const { channel, deviceName } = this.props.debugTargetData.deviceDescription;
+    const { channel, deviceName } = this.props.deviceDescription;
 
     const channelIcon =
       (channel === "release" || channel === "beta" || channel === "aurora") ?
       `chrome://devtools/skin/images/aboutdebugging-firefox-${ channel }.svg` :
       "chrome://devtools/skin/images/aboutdebugging-firefox-nightly.svg";
 
     return dom.span(
       {
@@ -129,24 +93,26 @@ class DebugTargetInfo extends PureCompon
       dom.b({ className: "devtools-ellipsis-text" }, this.getRuntimeText()),
       dom.span({ className: "devtools-ellipsis-text" }, deviceName),
     );
   }
 
   renderTarget() {
     const title = this.props.toolbox.target.name;
     const url = this.props.toolbox.target.url;
-
-    const { image, l10nId } = this.getAssetsForDebugTargetType();
+    // TODO: https://bugzilla.mozilla.org/show_bug.cgi?id=1520723
+    //       Show actual favicon (currently toolbox.target.activeTab.favicon
+    //       is unpopulated)
+    const favicon = "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
 
     return dom.span(
       {
         className: "iconized-label",
       },
-      dom.img({ src: image, alt: this.props.L10N.getStr(l10nId)}),
+      dom.img({ src: favicon, alt: "favicon"}),
       title ? dom.b({ className: "devtools-ellipsis-text js-target-title"}, title) : null,
       dom.span({ className: "devtools-ellipsis-text" }, url),
     );
   }
 
   render() {
     return dom.header(
       {
--- a/devtools/client/framework/components/ToolboxToolbar.js
+++ b/devtools/client/framework/components/ToolboxToolbar.js
@@ -91,21 +91,20 @@ class ToolboxToolbar extends Component {
       toolbox: PropTypes.object,
       // Call back function to detect tabs order updated.
       onTabsOrderUpdated: PropTypes.func.isRequired,
       // Count of visible toolbox buttons which is used by ToolboxTabs component
       // to recognize that the visibility of toolbox buttons were changed.
       // Because in the component we cannot compare the visibility since the
       // button definition instance in toolboxButtons will be unchanged.
       visibleToolboxButtonCount: PropTypes.number,
-      // Data to show debug target info, if needed
-      debugTargetData: PropTypes.shape({
-        deviceDescription: PropTypes.object.isRequired,
-        targetType: PropTypes.string.isRequired,
-      }),
+      // Flag whether need to show DebugTargetInfo.
+      showDebugTargetInfo: PropTypes.bool,
+      // Device description for DebugTargetInfo component.
+      deviceDescription: PropTypes.object,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.hideMenu = this.hideMenu.bind(this);
     this.createFrameList = this.createFrameList.bind(this);
@@ -418,17 +417,17 @@ class ToolboxToolbar extends Component {
     );
   }
 
   /**
    * The render function is kept fairly short for maintainability. See the individual
    * render functions for how each of the sections is rendered.
    */
   render() {
-    const { L10N, debugTargetData, toolbox} = this.props;
+    const {deviceDescription, L10N, showDebugTargetInfo, toolbox} = this.props;
     const classnames = ["devtools-tabbar"];
     const startButtons = this.renderToolboxButtonsStart();
     const endButtons = this.renderToolboxButtonsEnd();
 
     if (!startButtons) {
       classnames.push("devtools-tabbar-has-start");
     }
     if (!endButtons) {
@@ -444,19 +443,18 @@ class ToolboxToolbar extends Component {
           startButtons,
           ToolboxTabs(this.props),
           endButtons,
           this.renderToolboxControls()
         )
       )
       : div({ className: classnames.join(" ") });
 
-    const debugTargetInfo = debugTargetData
-      ? DebugTargetInfo({ debugTargetData, L10N, toolbox })
-      : null;
+    const debugTargetInfo =
+      showDebugTargetInfo ? DebugTargetInfo({ deviceDescription, L10N, toolbox }) : null;
 
     if (toolbox.target.canRewind) {
       return div(
         {},
         WebReplayPlayer({
           toolbox: toolbox,
         }),
         debugTargetInfo,
--- a/devtools/client/framework/test/jest/components/__snapshots__/debug-target-info.test.js.snap
+++ b/devtools/client/framework/test/jest/components/__snapshots__/debug-target-info.test.js.snap
@@ -1,115 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DebugTargetInfo component Connection info renders the expected snapshot for USB Release target 1`] = `
+exports[`DebugTargetInfo component renders the expected snapshot for This Firefox target 1`] = `
 <header
   className="debug-target-info js-debug-target-info"
 >
   <span
-    className="iconized-label js-connection-info"
-  >
-    <img
-      alt="usb icon"
-      src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
-    />
-    toolbox.debugTargetInfo.connection.usb
-  </span>
-  <span
     className="iconized-label"
   >
     <img
       className="channel-icon"
       src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
     />
     <b
       className="devtools-ellipsis-text"
     >
-      toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
+      toolbox.debugTargetInfo.runtimeLabel.thisFirefox-1.0.0
     </b>
     <span
       className="devtools-ellipsis-text"
-    >
-      usbDeviceName
-    </span>
+    />
   </span>
   <span
     className="iconized-label"
   >
     <img
-      alt="toolbox.debugTargetInfo.targetType.tab"
-      src="chrome://devtools/skin/images/globe.svg"
+      alt="favicon"
+      src="chrome://devtools/skin/images/aboutdebugging-globe-icon.svg"
     />
     <b
       className="devtools-ellipsis-text js-target-title"
     >
       Test Tab Name
     </b>
     <span
       className="devtools-ellipsis-text"
     >
       http://some.target/url
     </span>
   </span>
 </header>
 `;
 
-exports[`DebugTargetInfo component Target icon renders the expected snapshot for a process target 1`] = `
-<header
-  className="debug-target-info js-debug-target-info"
->
-  <span
-    className="iconized-label js-connection-info"
-  >
-    <img
-      alt="usb icon"
-      src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
-    />
-    toolbox.debugTargetInfo.connection.usb
-  </span>
-  <span
-    className="iconized-label"
-  >
-    <img
-      className="channel-icon"
-      src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
-    />
-    <b
-      className="devtools-ellipsis-text"
-    >
-      toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
-    </b>
-    <span
-      className="devtools-ellipsis-text"
-    >
-      usbDeviceName
-    </span>
-  </span>
-  <span
-    className="iconized-label"
-  >
-    <img
-      alt="toolbox.debugTargetInfo.targetType.process"
-      src="chrome://devtools/skin/images/settings.svg"
-    />
-    <b
-      className="devtools-ellipsis-text js-target-title"
-    >
-      Test Tab Name
-    </b>
-    <span
-      className="devtools-ellipsis-text"
-    >
-      http://some.target/url
-    </span>
-  </span>
-</header>
-`;
-
-exports[`DebugTargetInfo component Target icon renders the expected snapshot for a tab target 1`] = `
+exports[`DebugTargetInfo component renders the expected snapshot for USB Release target 1`] = `
 <header
   className="debug-target-info js-debug-target-info"
 >
   <span
     className="iconized-label js-connection-info"
   >
     <img
       alt="usb icon"
@@ -134,138 +71,34 @@ exports[`DebugTargetInfo component Targe
     >
       usbDeviceName
     </span>
   </span>
   <span
     className="iconized-label"
   >
     <img
-      alt="toolbox.debugTargetInfo.targetType.tab"
-      src="chrome://devtools/skin/images/globe.svg"
+      alt="favicon"
+      src="chrome://devtools/skin/images/aboutdebugging-globe-icon.svg"
     />
     <b
       className="devtools-ellipsis-text js-target-title"
     >
       Test Tab Name
     </b>
     <span
       className="devtools-ellipsis-text"
     >
       http://some.target/url
     </span>
   </span>
 </header>
 `;
 
-exports[`DebugTargetInfo component Target icon renders the expected snapshot for a worker target 1`] = `
-<header
-  className="debug-target-info js-debug-target-info"
->
-  <span
-    className="iconized-label js-connection-info"
-  >
-    <img
-      alt="usb icon"
-      src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
-    />
-    toolbox.debugTargetInfo.connection.usb
-  </span>
-  <span
-    className="iconized-label"
-  >
-    <img
-      className="channel-icon"
-      src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
-    />
-    <b
-      className="devtools-ellipsis-text"
-    >
-      toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
-    </b>
-    <span
-      className="devtools-ellipsis-text"
-    >
-      usbDeviceName
-    </span>
-  </span>
-  <span
-    className="iconized-label"
-  >
-    <img
-      alt="toolbox.debugTargetInfo.targetType.worker"
-      src="chrome://devtools/skin/images/debugging-workers.svg"
-    />
-    <b
-      className="devtools-ellipsis-text js-target-title"
-    >
-      Test Tab Name
-    </b>
-    <span
-      className="devtools-ellipsis-text"
-    >
-      http://some.target/url
-    </span>
-  </span>
-</header>
-`;
-
-exports[`DebugTargetInfo component Target icon renders the expected snapshot for an extension target 1`] = `
-<header
-  className="debug-target-info js-debug-target-info"
->
-  <span
-    className="iconized-label js-connection-info"
-  >
-    <img
-      alt="usb icon"
-      src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
-    />
-    toolbox.debugTargetInfo.connection.usb
-  </span>
-  <span
-    className="iconized-label"
-  >
-    <img
-      className="channel-icon"
-      src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
-    />
-    <b
-      className="devtools-ellipsis-text"
-    >
-      toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
-    </b>
-    <span
-      className="devtools-ellipsis-text"
-    >
-      usbDeviceName
-    </span>
-  </span>
-  <span
-    className="iconized-label"
-  >
-    <img
-      alt="toolbox.debugTargetInfo.targetType.extension"
-      src="chrome://devtools/skin/images/debugging-addons.svg"
-    />
-    <b
-      className="devtools-ellipsis-text js-target-title"
-    >
-      Test Tab Name
-    </b>
-    <span
-      className="devtools-ellipsis-text"
-    >
-      http://some.target/url
-    </span>
-  </span>
-</header>
-`;
-
-exports[`DebugTargetInfo component Target title renders the expected snapshot for This Firefox target 1`] = `
+exports[`DebugTargetInfo component renders the expected snapshot for a Toolbox with an unnamed target 1`] = `
 <header
   className="debug-target-info js-debug-target-info"
 >
   <span
     className="iconized-label"
   >
     <img
       className="channel-icon"
@@ -279,59 +112,18 @@ exports[`DebugTargetInfo component Targe
     <span
       className="devtools-ellipsis-text"
     />
   </span>
   <span
     className="iconized-label"
   >
     <img
-      alt="toolbox.debugTargetInfo.targetType.tab"
-      src="chrome://devtools/skin/images/globe.svg"
-    />
-    <b
-      className="devtools-ellipsis-text js-target-title"
-    >
-      Test Tab Name
-    </b>
-    <span
-      className="devtools-ellipsis-text"
-    >
-      http://some.target/url
-    </span>
-  </span>
-</header>
-`;
-
-exports[`DebugTargetInfo component Target title renders the expected snapshot for a Toolbox with an unnamed target 1`] = `
-<header
-  className="debug-target-info js-debug-target-info"
->
-  <span
-    className="iconized-label"
-  >
-    <img
-      className="channel-icon"
-      src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
-    />
-    <b
-      className="devtools-ellipsis-text"
-    >
-      toolbox.debugTargetInfo.runtimeLabel.thisFirefox-1.0.0
-    </b>
-    <span
-      className="devtools-ellipsis-text"
-    />
-  </span>
-  <span
-    className="iconized-label"
-  >
-    <img
-      alt="toolbox.debugTargetInfo.targetType.tab"
-      src="chrome://devtools/skin/images/globe.svg"
+      alt="favicon"
+      src="chrome://devtools/skin/images/aboutdebugging-globe-icon.svg"
     />
     <span
       className="devtools-ellipsis-text"
     >
       http://some.target/without/a/name
     </span>
   </span>
 </header>
--- a/devtools/client/framework/test/jest/components/debug-target-info.test.js
+++ b/devtools/client/framework/test/jest/components/debug-target-info.test.js
@@ -5,18 +5,17 @@
 
 /**
  * Unit tests for the DebugTargetInfo component.
  */
 
 const renderer = require("react-test-renderer");
 const React = require("devtools/client/shared/vendor/react");
 const DebugTargetInfo = React.createFactory(require("devtools/client/framework/components/DebugTargetInfo"));
-const { CONNECTION_TYPES, DEBUG_TARGET_TYPES } =
-  require("devtools/client/shared/remote-debugging/constants");
+const { CONNECTION_TYPES } = require("devtools/client/shared/remote-debugging/remote-client-manager");
 
 /**
  * Stub for the L10N property expected by the DebugTargetInfo component.
  */
 const stubL10N = {
   getStr: id => id,
   getFormatStr: (id, ...args) => [id, ...args].join("-"),
 };
@@ -37,121 +36,75 @@ const TEST_TOOLBOX = {
 const TEST_TOOLBOX_NO_NAME = {
   target: {
     url: "http://some.target/without/a/name",
   },
 };
 
 const USB_DEVICE_DESCRIPTION = {
   brandName: "usbRuntimeBrandName",
+  connectionType: CONNECTION_TYPES.USB,
   channel: "release",
   deviceName: "usbDeviceName",
   version: "1.0.0",
 };
 
 const THIS_FIREFOX_DEVICE_DESCRIPTION = {
   brandName: "thisFirefoxRuntimeBrandName",
+  connectionType: CONNECTION_TYPES.THIS_FIREFOX,
   channel: "release",
   version: "1.0.0",
 };
 
-const USB_TARGET_INFO = {
-  debugTargetData: {
-    connectionType: CONNECTION_TYPES.USB,
-    deviceDescription: USB_DEVICE_DESCRIPTION,
-    targetType: DEBUG_TARGET_TYPES.TAB,
-  },
+const USB_TARGET_INFO = DebugTargetInfo({
+  deviceDescription: USB_DEVICE_DESCRIPTION,
   toolbox: TEST_TOOLBOX,
   L10N: stubL10N,
-};
+});
 
-const THIS_FIREFOX_TARGET_INFO = {
-  debugTargetData: {
-    connectionType: CONNECTION_TYPES.THIS_FIREFOX,
-    deviceDescription: THIS_FIREFOX_DEVICE_DESCRIPTION,
-    targetType: DEBUG_TARGET_TYPES.TAB,
-  },
+const THIS_FIREFOX_TARGET_INFO = DebugTargetInfo({
+  deviceDescription: THIS_FIREFOX_DEVICE_DESCRIPTION,
   toolbox: TEST_TOOLBOX,
   L10N: stubL10N,
-};
+});
 
-const THIS_FIREFOX_NO_NAME_TARGET_INFO = {
-  debugTargetData: {
-    connectionType: CONNECTION_TYPES.THIS_FIREFOX,
-    deviceDescription: THIS_FIREFOX_DEVICE_DESCRIPTION,
-    targetType: DEBUG_TARGET_TYPES.TAB,
-  },
+const THIS_FIREFOX_NO_NAME_TARGET_INFO = DebugTargetInfo({
+  deviceDescription: THIS_FIREFOX_DEVICE_DESCRIPTION,
   toolbox: TEST_TOOLBOX_NO_NAME,
   L10N: stubL10N,
-};
+});
 
 describe("DebugTargetInfo component", () => {
-  describe("Connection info", () => {
-    it("displays connection info for USB Release target", () => {
-      const component = renderer.create(DebugTargetInfo(USB_TARGET_INFO));
-      expect(findByClassName(component.root, "js-connection-info").length).toEqual(1);
-    });
-
-    it("renders the expected snapshot for USB Release target", () => {
-      const component = renderer.create(DebugTargetInfo(USB_TARGET_INFO));
-      expect(component.toJSON()).toMatchSnapshot();
-    });
-
-    it("hides the connection info for This Firefox target", () => {
-      const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_TARGET_INFO));
-      expect(findByClassName(component.root, "js-connection-info").length).toEqual(0);
-    });
+  it("displays connection info for USB Release target", () => {
+    const targetInfo = renderer.create(USB_TARGET_INFO);
+    expect(findByClassName(targetInfo.root, "js-connection-info").length).toEqual(1);
   });
 
-  describe("Target title", () => {
-    it("displays the target title if the target of the Toolbox has a name", () => {
-      const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_TARGET_INFO));
-      expect(findByClassName(component.root, "js-target-title").length).toEqual(1);
-    });
+  it("renders the expected snapshot for USB Release target", () => {
+    const targetInfo = renderer.create(USB_TARGET_INFO);
+    expect(targetInfo.toJSON()).toMatchSnapshot();
+  });
 
-    it("renders the expected snapshot for This Firefox target", () => {
-      const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_TARGET_INFO));
-      expect(component.toJSON()).toMatchSnapshot();
-    });
+  it("hides the connection info for This Firefox target", () => {
+    const targetInfo = renderer.create(THIS_FIREFOX_TARGET_INFO);
+    expect(findByClassName(targetInfo.root, "js-connection-info").length).toEqual(0);
+  });
 
-    it("doesn't display the target title if the target of the Toolbox has no name", () => {
-      const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_NO_NAME_TARGET_INFO));
-      expect(findByClassName(component.root, "js-target-title").length).toEqual(0);
-    });
-
-    it("renders the expected snapshot for a Toolbox with an unnamed target", () => {
-      const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_NO_NAME_TARGET_INFO));
-      expect(component.toJSON()).toMatchSnapshot();
-    });
+  it("displays the target title if the target of the Toolbox has a name", () => {
+    const targetInfo = renderer.create(THIS_FIREFOX_TARGET_INFO);
+    expect(findByClassName(targetInfo.root, "js-target-title").length).toEqual(1);
   });
 
-  describe("Target icon", () => {
-    const buildProps = (base, extraDebugTargetData) => {
-      const props = Object.assign({}, base);
-      Object.assign(props.debugTargetData, extraDebugTargetData);
-      return props;
-    };
-
-    it("renders the expected snapshot for a tab target", () => {
-      const props = buildProps(USB_TARGET_INFO, { targetType: DEBUG_TARGET_TYPES.TAB });
-      const component = renderer.create(DebugTargetInfo(props));
-      expect(component.toJSON()).toMatchSnapshot();
-    });
+  it("renders the expected snapshot for This Firefox target", () => {
+    const targetInfo = renderer.create(THIS_FIREFOX_TARGET_INFO);
+    expect(targetInfo.toJSON()).toMatchSnapshot();
+  });
 
-    it("renders the expected snapshot for a worker target", () => {
-      const props = buildProps(USB_TARGET_INFO, { targetType: DEBUG_TARGET_TYPES.WORKER });
-      const component = renderer.create(DebugTargetInfo(props));
-      expect(component.toJSON()).toMatchSnapshot();
-    });
+  it("doesn't display the target title if the target of the Toolbox has no name", () => {
+    const targetInfo = renderer.create(THIS_FIREFOX_NO_NAME_TARGET_INFO);
+    expect(findByClassName(targetInfo.root, "js-target-title").length).toEqual(0);
+  });
 
-    it("renders the expected snapshot for an extension target", () => {
-      const props = buildProps(USB_TARGET_INFO, { targetType: DEBUG_TARGET_TYPES.EXTENSION });
-      const component = renderer.create(DebugTargetInfo(props));
-      expect(component.toJSON()).toMatchSnapshot();
-    });
-
-    it("renders the expected snapshot for a process target", () => {
-      const props = buildProps(USB_TARGET_INFO, { targetType: DEBUG_TARGET_TYPES.PROCESS });
-      const component = renderer.create(DebugTargetInfo(props));
-      expect(component.toJSON()).toMatchSnapshot();
-    });
+  it("renders the expected snapshot for a Toolbox with an unnamed target", () => {
+    const targetInfo = renderer.create(THIS_FIREFOX_NO_NAME_TARGET_INFO);
+    expect(targetInfo.toJSON()).toMatchSnapshot();
   });
 });
--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -449,18 +449,19 @@ Toolbox.prototype = {
       if (isToolboxURL) {
         // Update the URL so that onceDOMReady watch for the right url.
         this._URL = this.win.location.href;
       }
 
       if (this.hostType === Toolbox.HostType.PAGE) {
         // Displays DebugTargetInfo which shows the basic information of debug target,
         // if `about:devtools-toolbox` URL opens directly.
-        // DebugTargetInfo requires this._debugTargetData to be populated
-        this._debugTargetData = await this._getDebugTargetData();
+        // DebugTargetInfo requires this._deviceDescription to be populated
+        this._showDebugTargetInfo = true;
+        this._deviceDescription = await this._getDeviceDescription();
       }
 
       const domHelper = new DOMHelpers(this.win);
       const domReady = new Promise(resolve => {
         domHelper.onceDOMReady(() => {
           resolve();
         }, this._URL);
       });
@@ -601,32 +602,22 @@ Toolbox.prototype = {
     }.bind(this))().catch(e => {
       console.error("Exception while opening the toolbox", String(e), e);
       // While the exception stack is correctly printed in the Browser console when
       // passing `e` to console.error, it is not on the stdout, so print it via dump.
       dump(e.stack + "\n");
     });
   },
 
-  _getDebugTargetData: async function() {
-    const url = new URL(this.win.location);
-    const searchParams = new this.win.URLSearchParams(url.search);
-
-    const targetType = searchParams.get("type");
-
+  _getDeviceDescription: async function() {
     const deviceFront = await this.target.client.mainRoot.getFront("device");
-    const deviceDescription = await deviceFront.getDescription();
-    const remoteId = searchParams.get("remoteId");
+    const description = await deviceFront.getDescription();
+    const remoteId = new this.win.URLSearchParams(this.win.location.href).get("remoteId");
     const connectionType = remoteClientManager.getConnectionTypeByRemoteId(remoteId);
-
-    return {
-      connectionType,
-      deviceDescription,
-      targetType,
-    };
+    return Object.assign({}, description, { connectionType });
   },
 
   _onTargetClosed: async function() {
     const win = this.win; // .destroy() will set this.win to null
 
     // clean up the toolbox
     this.destroy();
     // NOTE: we should await this.destroy() to ensure a proper clean up.
@@ -1210,17 +1201,18 @@ Toolbox.prototype = {
       currentToolId: this.currentToolId,
       selectTool: this.selectTool,
       toggleOptions: this.toggleOptions,
       toggleSplitConsole: this.toggleSplitConsole,
       toggleNoAutohide: this.toggleNoAutohide,
       closeToolbox: this.closeToolbox,
       focusButton: this._onToolbarFocus,
       toolbox: this,
-      debugTargetData: this._debugTargetData,
+      showDebugTargetInfo: this._showDebugTargetInfo,
+      deviceDescription: this._deviceDescription,
       onTabsOrderUpdated: this._onTabsOrderUpdated,
     });
 
     this.component = this.ReactDOM.render(element, this._componentMount);
   },
 
   /**
    * Reset tabindex attributes across all focusable elements inside the toolbar.
--- a/devtools/client/locales/en-US/toolbox.properties
+++ b/devtools/client/locales/en-US/toolbox.properties
@@ -245,24 +245,16 @@ toolbox.debugTargetInfo.targetLabel=%1$S
 toolbox.debugTargetInfo.type.tab=tab
 
 # LOCALIZATION NOTE (toolbox.debugTargetInfo.connection.*): This is displayed in the
 # toolbox header in about:devtools-toolbox, to indicate how the connection to the
 # runtime being inspected was made.
 toolbox.debugTargetInfo.connection.usb=USB
 toolbox.debugTargetInfo.connection.network=Network
 
-# LOCALIZATION NOTE (toolbox.debugTargetInfo.targetType.*): This is displayed as the
-# alt attribute for an icon in the toolbox header in about:devtools-toolbox,
-# to indicate what is the type of the debug target being inspected.
-toolbox.debugTargetInfo.targetType.extension=Extension
-toolbox.debugTargetInfo.targetType.process=Process
-toolbox.debugTargetInfo.targetType.tab=Tab
-toolbox.debugTargetInfo.targetType.worker=Worker
-
 # LOCALIZATION NOTE (browserToolbox.statusMessage): This is the label
 # shown next to status details when the Browser Toolbox fails to connect or
 # appears to be taking a while to do so.
 browserToolbox.statusMessage=Browser Toolbox connection status:
 
 # LOCALIZATION NOTE (toolbox.replay.jumpMessage): This is the label
 # shown in the web replay timeline marker
 toolbox.replay.jumpMessage=Jump to message %1$S
deleted file mode 100644
--- a/devtools/client/shared/remote-debugging/constants.js
+++ /dev/null
@@ -1,24 +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 CONNECTION_TYPES = {
-  NETWORK: "network",
-  THIS_FIREFOX: "this-firefox",
-  UNKNOWN: "unknown",
-  USB: "usb",
-};
-
-const DEBUG_TARGET_TYPES = {
-  EXTENSION: "extension",
-  PROCESS: "process",
-  TAB: "tab",
-  WORKER: "worker",
-};
-
-module.exports = {
-  CONNECTION_TYPES,
-  DEBUG_TARGET_TYPES,
-};
--- a/devtools/client/shared/remote-debugging/moz.build
+++ b/devtools/client/shared/remote-debugging/moz.build
@@ -1,16 +1,15 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # 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(
-    'constants.js',
     'remote-client-manager.js',
     'version-checker.js',
 )
 
 XPCSHELL_TESTS_MANIFESTS += [
     'test/unit/xpcshell.ini'
 ]
 
--- a/devtools/client/shared/remote-debugging/remote-client-manager.js
+++ b/devtools/client/shared/remote-debugging/remote-client-manager.js
@@ -1,15 +1,21 @@
 /* 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 { CONNECTION_TYPES } = require("devtools/client/shared/remote-debugging/constants");
+/* connection types for remote clients */
+const CONNECTION_TYPES = {
+  NETWORK: "network",
+  THIS_FIREFOX: "this-firefox",
+  UNKNOWN: "unknown",
+  USB: "usb",
+};
 
 /**
  * This class is designed to be a singleton shared by all DevTools to get access to
  * existing clients created for remote debugging.
  */
 class RemoteClientManager {
   constructor() {
     this._clients = new Map();
@@ -115,9 +121,10 @@ class RemoteClientManager {
       this._removeClientByKey(key);
     }
   }
 }
 
 // Expose a singleton of RemoteClientManager.
 module.exports = {
   remoteClientManager: new RemoteClientManager(),
+  CONNECTION_TYPES,
 };
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -33,21 +33,16 @@
   padding: 0 24px;
   white-space: nowrap;
 }
 
 .debug-target-info .iconized-label:not(:last-child) {
   border-inline-end: 1px solid var(--theme-splitter-color);
 }
 
-.debug-target-info .iconized-label img {
-  width: 20px;
-  height: 20px;
-}
-
 .debug-target-info img {
   -moz-context-properties: fill;
   fill: var(--theme-toolbar-icon-color);
 }
 
 /* Toolbox tabbar */
 
 .devtools-tabbar {