Bug 1494170: Show device name for Android. r=jdescottes

Summary: Depends on D7037

Reviewers: jdescottes

Subscribers: MarcoM

Bug #: 1494170

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

--HG--
extra : rebase_source : d4aee524524093ebc3cf623da15863dea0965dcd

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

@@ -66,7 +66,8 @@ async function createClientForRuntime(runtime) {
   return null;
 }
 
-async function getRuntimeInfo(client) {
+async function getRuntimeInfo(runtime, client) {
+  const { model } = runtime;
   const deviceFront = await client.mainRoot.getFront("device");
   const { brandName: name, channel, version } = await deviceFront.getDescription();
   const icon =
@@ -76,6 +77,7 @@ async function getRuntimeInfo(client) {
 
   return {
     icon,
+    model,
     name,
     version,
   };
@@ -87,7 +89,7 @@ function connectRuntime(id) {
     try {
       const runtime = findRuntimeById(id, getState().runtimes);
       const client = await createClientForRuntime(runtime);
-      const info = await getRuntimeInfo(client);
+      const info = await getRuntimeInfo(runtime, client);
 
       dispatch({
         type: CONNECT_RUNTIME_SUCCESS,

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

@@ -4,10 +4,13 @@
 
 "use strict";
 
-const { PureComponent } = require("devtools/client/shared/vendor/react");
+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);
+
 /**
  * This component displays runtime information.
  */
@@ -15,13 +18,14 @@ class RuntimeInfo extends PureComponent {
   static get propTypes() {
     return {
       icon: PropTypes.string.isRequired,
+      model: PropTypes.string,
       name: PropTypes.string.isRequired,
       version: PropTypes.string.isRequired,
     };
   }
 
   render() {
-    const { icon, name, version } = this.props;
+    const { icon, model, name, version } = this.props;
 
     return dom.h1(
       {
@@ -33,7 +37,16 @@ class RuntimeInfo extends PureComponent {
           src: icon,
         }
       ),
-      `${ name } (${ version })`
+      Localized(
+        {
+          id: model ? "about-debugging-runtime-info-with-model"
+                    : "about-debugging-runtime-info",
+          $name: name,
+          $model: model,
+          $version: version,
+        },
+        dom.label({}, `${ name } on ${ model } (${ version })`)
+      )
     );
   }
 }

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

@@ -96,6 +96,7 @@ function runtimesReducer(state = RuntimesState(), action) {
       const usbRuntimes = runtimes.map(runtime => {
         return {
           id: runtime.id,
+          model: runtime._model,
           name: runtime.name,
           socketPath: runtime._socketPath,
           type: RUNTIMES.USB,

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

@@ -167,3 +167,14 @@ about-debugging-worker-status-stopped = Stopped
 # registration could be found yet. Only active registrations are visible from
 # 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 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 })