Bug 1494543 - Part 2: Add model + short runtime name to the sidebar item. r=jdescottes,daisuke

Added new getters to the ADB scanner so our runtime objects have now the information we need.

Note that the UX of the devices in this patch doesn't still match what we had in the mockups (icons don't match, and we also need a circle with a tick), but since we have another bug to handle the CSS in the Sidebar, we can always adapt it there. The information needed to display what is shown in the mockups should be passed in this patch –if I miss anything, give me a shout!

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

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

devtools/client/aboutdebugging-new/src/actions/runtimes.js

@@ -55,15 +55,15 @@ async function createUSBClient(socketPath) {
 }
 
 async function createClientForRuntime(runtime) {
-  const { connectionParameters, type } = runtime;
+  const { extra, type } = runtime;
 
   if (type === RUNTIMES.THIS_FIREFOX) {
     return createLocalClient();
   } else if (type === RUNTIMES.NETWORK) {
-    const { host, port } = connectionParameters;
+    const { host, port } = extra.connectionParameters;
     return createNetworkClient(host, port);
   } else if (type === RUNTIMES.USB) {
-    const { socketPath } = connectionParameters;
+    const { socketPath } = extra.connectionParameters;
     return createUSBClient(socketPath);
   }
 
@@ -71,7 +71,7 @@ async function createClientForRuntime(runtime) {
 }
 
 async function getRuntimeInfo(runtime, client) {
-  const { model, type } = runtime;
+  const { extra, type } = runtime;
   const deviceFront = await client.mainRoot.getFront("device");
   const { brandName: name, channel, version } = await deviceFront.getDescription();
   const icon =
@@ -81,7 +81,7 @@ async function getRuntimeInfo(runtime, client) {
 
   return {
     icon,
-    model,
+    deviceName: extra ? extra.deviceName : undefined,
     name,
     type,
     version,

devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js

@@ -18,14 +18,14 @@ class RuntimeInfo extends PureComponent {
   static get propTypes() {
     return {
       icon: PropTypes.string.isRequired,
-      model: PropTypes.string,
+      deviceName: PropTypes.string,
       name: PropTypes.string.isRequired,
       version: PropTypes.string.isRequired,
     };
   }
 
   render() {
-    const { icon, model, name, version } = this.props;
+    const { icon, deviceName, name, version } = this.props;
 
     return dom.h1(
       {
@@ -39,13 +39,13 @@ class RuntimeInfo extends PureComponent {
       ),
       Localized(
         {
-          id: model ? "about-debugging-runtime-info-with-model"
+          id: deviceName ? "about-debugging-runtime-info-with-model"
                           : "about-debugging-runtime-info",
           $name: name,
-          $model: model,
+          $deviceName: deviceName,
           $version: version,
         },
-        dom.label({}, `${ name } on ${ model } (${ version })`)
+        dom.label({}, `${ name } on ${ deviceName } (${ version })`)
       )
     );
   }

devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js

@@ -60,6 +60,7 @@ class Sidebar extends PureComponent {
 
       return SidebarRuntimeItem({
         id: pageId,
+        deviceName: runtime.extra.deviceName,
         dispatch,
         icon,
         isConnected: runtimeHasConnection,

devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.css

@@ -11,7 +11,15 @@
  */
 
 .sidebar-runtime-item {
+  font-size: 0.8em;
   align-items: center;
   display: grid;
-  grid-template-columns: 1fr max-content;
+  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);
 }

devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js

@@ -20,9 +20,12 @@ const Actions = require("../../actions/index");
 class SidebarRuntimeItem extends PureComponent {
   static get propTypes() {
     return {
-      dispatch: PropTypes.func.isRequired,
-      icon: PropTypes.string.isRequired,
       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,
@@ -48,9 +51,33 @@ class SidebarRuntimeItem extends PureComponent {
     );
   }
 
+  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,
@@ -59,6 +86,10 @@ class SidebarRuntimeItem extends PureComponent {
       runtimeId,
     } = this.props;
 
+    const connectionStatus = isConnected ?
+      getString("aboutdebugging-sidebar-runtime-connection-status-connected") :
+      getString("aboutdebugging-sidebar-runtime-connection-status-disconnected");
+
     return SidebarItem(
       {
         isSelected,
@@ -68,25 +99,19 @@ class SidebarRuntimeItem extends PureComponent {
           dispatch(Actions.selectPage(id, runtimeId));
         }
       },
-      dom.span(
-        { className: "ellipsis-text" },
       dom.img(
         {
           className: "sidebar-runtime-item__icon " +
             `${isConnected ? "sidebar-runtime-item__icon--connected" : "" }`,
           src: icon,
+          alt: connectionStatus,
+          title: connectionStatus
         }
       ),
-        dom.span(
-          {
-            title: name,
-          },
-          ` ${name}`
-        ),
-      ),
+      deviceName ? this.renderNameWithDevice(name, deviceName) : this.renderName(name),
       !isConnected ? this.renderConnectButton() : null
     );
   }
 }
 
-module.exports = SidebarRuntimeItem;
+module.exports = FluentReact.withLocalization(SidebarRuntimeItem);

devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js

@@ -82,8 +82,10 @@ function runtimesReducer(state = RuntimesState(), 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,
         };
@@ -99,10 +101,12 @@ function runtimesReducer(state = RuntimesState(), action) {
       const { runtimes } = action;
       const usbRuntimes = runtimes.map(runtime => {
         return {
-          connectionParameters: { socketPath: runtime._socketPath },
           id: runtime.id,
-          model: runtime._model,
-          name: runtime.name,
+          extra: {
+            connectionParameters: { socketPath: runtime._socketPath },
+            deviceName: runtime.deviceName,
+          },
+          name: runtime.shortName,
           type: RUNTIMES.USB,
         };
       });

devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl

@@ -13,6 +13,11 @@ about-debugging-sidebar-this-firefox =
 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
 
@@ -173,8 +178,8 @@ about-debugging-worker-status-registering = Registering
 # { $version } is version such as "64.0a1"
 about-debugging-runtime-info = { $name } ({ $version })
 
-# Displayed for runtime info in runtime page when we display the model as well.
+# Displayed for runtime info in runtime page when we display the device model as well.
 # { $name } is brand name such as "Firefox Nightly"
 # { $version } is version such as "64.0a1"
-# { $model } is model name of device
-about-debugging-runtime-info-with-model = { $name } on { $model } ({ $version })
+# { $deviceName } is model name of device
+about-debugging-runtime-info-with-model = { $name } on { $deviceName } ({ $version })

devtools/shared/adb/adb-scanner.js

@@ -144,37 +144,51 @@ FirefoxOnAndroidRuntime.detect = async function(device, model) {
 
 FirefoxOnAndroidRuntime.prototype = Object.create(Runtime.prototype);
 
-Object.defineProperty(FirefoxOnAndroidRuntime.prototype, "name", {
-  get() {
-    // 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;
+FirefoxOnAndroidRuntime.prototype._channel = function() {
+  const packageName = this._packageName();
+
   switch (packageName) {
     case "org.mozilla.firefox":
-        channel = "";
-        break;
+      return "";
     case "org.mozilla.firefox_beta":
-        channel = " Beta";
-        break;
+      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
-        channel = " Nightly";
-        break;
-      case "org.mozilla.fennec":
-        channel = " Nightly";
-        break;
+      return "Nightly";
     default:
-        channel = " Custom";
+      return "Custom";
   }
-    return "Firefox" + channel + " on Android (" +
-           (this._model || this.device.id) + ")";
+};
+
+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 + ")";
   }
 });