Bug 1539344 - Part 2: display target type icon in DebugTargetInfo component r=jdescottes,Ola

Differential Revision: https://phabricator.services.mozilla.com/D25375

--HG--
extra : moz-landing-system : lando

devtools/client/framework/components/DebugTargetInfo.js

@@ -6,7 +6,7 @@
 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 } =
+const { CONNECTION_TYPES, DEBUG_TARGET_TYPES } =
   require("devtools/client/shared/remote-debugging/constants");
 
 /**
@@ -16,12 +16,15 @@ const { CONNECTION_TYPES } =
 class DebugTargetInfo extends PureComponent {
   static get propTypes() {
     return {
-      deviceDescription: PropTypes.shape({
-        brandName: PropTypes.string.isRequired,
-        channel: PropTypes.string.isRequired,
-        connectionType: PropTypes.string.isRequired,
-        deviceName: PropTypes.string,
-        version: PropTypes.string.isRequired,
+      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,
       }).isRequired,
       L10N: PropTypes.object.isRequired,
       toolbox: PropTypes.object.isRequired,
@@ -29,8 +32,9 @@ class DebugTargetInfo extends PureComponent {
   }
 
   getRuntimeText() {
-    const { deviceDescription, L10N } = this.props;
-    const { brandName, version, connectionType } = deviceDescription;
+    const { debugTargetData, L10N } = this.props;
+    const { brandName, version } = debugTargetData.deviceDescription;
+    const { connectionType } = debugTargetData;
 
     return (connectionType === CONNECTION_TYPES.THIS_FIREFOX)
       ? L10N.getFormatStr("toolbox.debugTargetInfo.runtimeLabel.thisFirefox", version)
@@ -38,7 +42,7 @@ class DebugTargetInfo extends PureComponent {
   }
 
   getAssetsForConnectionType() {
-    const { connectionType } = this.props.deviceDescription;
+    const { connectionType } = this.props.debugTargetData;
 
     switch (connectionType) {
       case CONNECTION_TYPES.USB:
@@ -54,8 +58,40 @@ class DebugTargetInfo extends PureComponent {
     }
   }
 
+  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.deviceDescription;
+    const { connectionType } = this.props.debugTargetData;
     const renderableTypes = [
       CONNECTION_TYPES.USB,
       CONNECTION_TYPES.NETWORK,
@@ -65,7 +101,7 @@ class DebugTargetInfo extends PureComponent {
   }
 
   renderConnection() {
-    const { connectionType } = this.props.deviceDescription;
+    const { connectionType } = this.props.debugTargetData;
     const { image, l10nId } = this.getAssetsForConnectionType();
 
     return dom.span(
@@ -78,7 +114,7 @@ class DebugTargetInfo extends PureComponent {
   }
 
   renderRuntime() {
-    const { channel, deviceName } = this.props.deviceDescription;
+    const { channel, deviceName } = this.props.debugTargetData.deviceDescription;
 
     const channelIcon =
       (channel === "release" || channel === "beta" || channel === "aurora") ?
@@ -98,16 +134,14 @@ class DebugTargetInfo extends PureComponent {
   renderTarget() {
     const title = this.props.toolbox.target.name;
     const url = this.props.toolbox.target.url;
-    // 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";
+
+    const { image, l10nId } = this.getAssetsForDebugTargetType();
 
     return dom.span(
       {
         className: "iconized-label",
       },
-      dom.img({ src: favicon, alt: "favicon"}),
+      dom.img({ src: image, alt: this.props.L10N.getStr(l10nId)}),
       title ? dom.b({ className: "devtools-ellipsis-text js-target-title"}, title) : null,
       dom.span({ className: "devtools-ellipsis-text" }, url),
     );

devtools/client/framework/components/ToolboxToolbar.js

@@ -96,10 +96,11 @@ class ToolboxToolbar extends Component {
       // Because in the component we cannot compare the visibility since the
       // button definition instance in toolboxButtons will be unchanged.
       visibleToolboxButtonCount: PropTypes.number,
-      // Flag whether need to show DebugTargetInfo.
-      showDebugTargetInfo: PropTypes.bool,
-      // Device description for DebugTargetInfo component.
-      deviceDescription: PropTypes.object,
+      // Data to show debug target info, if needed
+      debugTargetData: PropTypes.shape({
+        deviceDescription: PropTypes.object.isRequired,
+        targetType: PropTypes.string.isRequired,
+      }),
     };
   }
 
@@ -422,7 +423,7 @@ class ToolboxToolbar extends Component {
    * render functions for how each of the sections is rendered.
    */
   render() {
-    const {deviceDescription, L10N, showDebugTargetInfo, toolbox} = this.props;
+    const { L10N, debugTargetData, toolbox} = this.props;
     const classnames = ["devtools-tabbar"];
     const startButtons = this.renderToolboxButtonsStart();
     const endButtons = this.renderToolboxButtonsEnd();
@@ -448,8 +449,9 @@ class ToolboxToolbar extends Component {
       )
       : div({ className: classnames.join(" ") });
 
-    const debugTargetInfo =
-      showDebugTargetInfo ? DebugTargetInfo({ deviceDescription, L10N, toolbox }) : null;
+    const debugTargetInfo = debugTargetData
+      ? DebugTargetInfo({ debugTargetData, L10N, toolbox })
+      : null;
 
     if (toolbox.target.canRewind) {
       return div(

devtools/client/framework/test/jest/components/__snapshots__/debug-target-info.test.js.snap

@@ -24,8 +24,8 @@ exports[`DebugTargetInfo component renders the expected snapshot for This Firefo
     className="iconized-label"
   >
     <img
-      alt="favicon"
-      src="chrome://devtools/skin/images/aboutdebugging-globe-icon.svg"
+      alt="toolbox.debugTargetInfo.targetType.tab"
+      src="chrome://devtools/skin/images/globe.svg"
     />
     <b
       className="devtools-ellipsis-text js-target-title"
@@ -76,8 +76,8 @@ exports[`DebugTargetInfo component renders the expected snapshot for USB Release
     className="iconized-label"
   >
     <img
-      alt="favicon"
-      src="chrome://devtools/skin/images/aboutdebugging-globe-icon.svg"
+      alt="toolbox.debugTargetInfo.targetType.tab"
+      src="chrome://devtools/skin/images/globe.svg"
     />
     <b
       className="devtools-ellipsis-text js-target-title"
@@ -117,8 +117,8 @@ exports[`DebugTargetInfo component renders the expected snapshot for a Toolbox w
     className="iconized-label"
   >
     <img
-      alt="favicon"
-      src="chrome://devtools/skin/images/aboutdebugging-globe-icon.svg"
+      alt="toolbox.debugTargetInfo.targetType.tab"
+      src="chrome://devtools/skin/images/globe.svg"
     />
     <span
       className="devtools-ellipsis-text"

devtools/client/framework/test/jest/components/debug-target-info.test.js

@@ -10,7 +10,8 @@
 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 } = require("devtools/client/shared/remote-debugging/constants");
+const { CONNECTION_TYPES, DEBUG_TARGET_TYPES } =
+  require("devtools/client/shared/remote-debugging/constants");
 
 /**
  * Stub for the L10N property expected by the DebugTargetInfo component.
@@ -55,19 +56,31 @@ const THIS_FIREFOX_DEVICE_DESCRIPTION = {
 };
 
 const USB_TARGET_INFO = DebugTargetInfo({
-  deviceDescription: USB_DEVICE_DESCRIPTION,
+  debugTargetData: {
+    connectionType: CONNECTION_TYPES.USB,
+    deviceDescription: USB_DEVICE_DESCRIPTION,
+    targetType: DEBUG_TARGET_TYPES.TAB,
+  },
   toolbox: TEST_TOOLBOX,
   L10N: stubL10N,
 });
 
 const THIS_FIREFOX_TARGET_INFO = DebugTargetInfo({
-  deviceDescription: THIS_FIREFOX_DEVICE_DESCRIPTION,
+  debugTargetData: {
+    connectionType: CONNECTION_TYPES.THIS_FIREFOX,
+    deviceDescription: THIS_FIREFOX_DEVICE_DESCRIPTION,
+    targetType: DEBUG_TARGET_TYPES.TAB,
+  },
   toolbox: TEST_TOOLBOX,
   L10N: stubL10N,
 });
 
 const THIS_FIREFOX_NO_NAME_TARGET_INFO = DebugTargetInfo({
-  deviceDescription: THIS_FIREFOX_DEVICE_DESCRIPTION,
+  debugTargetData: {
+    connectionType: CONNECTION_TYPES.THIS_FIREFOX,
+    deviceDescription: THIS_FIREFOX_DEVICE_DESCRIPTION,
+    targetType: DEBUG_TARGET_TYPES.TAB,
+  },
   toolbox: TEST_TOOLBOX_NO_NAME,
   L10N: stubL10N,
 });

devtools/client/framework/toolbox.js

@@ -71,6 +71,10 @@ loader.lazyGetter(this, "domNodeConstants", () => {
   return require("devtools/shared/dom-node-constants");
 });
 
+loader.lazyGetter(this, "DEBUG_TARGET_TYPES", () => {
+  return require("devtools/client/shared/remote-debugging/constants").DEBUG_TARGET_TYPES;
+});
+
 loader.lazyGetter(this, "registerHarOverlay", () => {
   return require("devtools/client/netmonitor/src/har/toolbox-overlay").register;
 });
@@ -458,9 +462,8 @@ Toolbox.prototype = {
       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._deviceDescription to be populated
-        this._showDebugTargetInfo = true;
-        this._deviceDescription = await this._getDeviceDescription();
+        // DebugTargetInfo requires this._debugTargetData to be populated
+        this._debugTargetData = await this._getDebugTargetData();
       }
 
       const domHelper = new DOMHelpers(this.win);
@@ -615,12 +618,22 @@ Toolbox.prototype = {
     });
   },
 
-  _getDeviceDescription: async function() {
+  _getDebugTargetData: async function() {
+    const url = new URL(this.win.location);
+    const searchParams = new this.win.URLSearchParams(url.search);
+
+    const targetType = searchParams.get("type") || DEBUG_TARGET_TYPES.TAB;
+
     const deviceFront = await this.target.client.mainRoot.getFront("device");
-    const description = await deviceFront.getDescription();
-    const remoteId = new this.win.URLSearchParams(this.win.location.href).get("remoteId");
+    const deviceDescription = await deviceFront.getDescription();
+    const remoteId = searchParams.get("remoteId");
     const connectionType = remoteClientManager.getConnectionTypeByRemoteId(remoteId);
-    return Object.assign({}, description, { connectionType });
+
+    return {
+      connectionType,
+      deviceDescription,
+      targetType,
+    };
   },
 
   _onTargetClosed: async function() {
@@ -1214,8 +1227,7 @@ Toolbox.prototype = {
       closeToolbox: this.closeToolbox,
       focusButton: this._onToolbarFocus,
       toolbox: this,
-      showDebugTargetInfo: this._showDebugTargetInfo,
-      deviceDescription: this._deviceDescription,
+      debugTargetData: this._debugTargetData,
       onTabsOrderUpdated: this._onTabsOrderUpdated,
     });
 

devtools/client/locales/en-US/toolbox.properties

@@ -250,6 +250,14 @@ toolbox.debugTargetInfo.type.tab=tab
 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.

devtools/client/themes/toolbox.css

@@ -38,6 +38,11 @@
   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);