diff --git a/devtools/client/aboutdebugging-new/src/actions/runtimes.js b/devtools/client/aboutdebugging-new/src/actions/runtimes.js index 159c98d38147..7b40df5d6479 100644 --- a/devtools/client/aboutdebugging-new/src/actions/runtimes.js +++ b/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, diff --git a/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js index 70022d3f9950..5aaa7e25d4be 100644 --- a/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js +++ b/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 })`) + ) ); } } diff --git a/devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js b/devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js index 192768c69e5b..b8dc700a6275 100644 --- a/devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js +++ b/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, diff --git a/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl b/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl index 39cb9a007f19..7bcb5f07f7d9 100644 --- a/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl +++ b/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 })