diff --git a/devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js b/devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js index fe5d0de4fc98..443882196c5f 100644 --- a/devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js +++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js @@ -11,6 +11,8 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); const FluentReact = require("devtools/client/shared/vendor/fluent-react"); const Localized = createFactory(FluentReact.Localized); +const FieldPair = createFactory(require("./FieldPair")); + /** * This component displays detail information for extension. */ @@ -23,20 +25,6 @@ class ExtensionDetail extends PureComponent { }; } - renderField(key, name, value, title) { - return [ - dom.dt({ key: `${ key }-dt` }, name), - dom.dd( - { - className: "ellipsis-text", - key: `${ key }-dd`, - title: title || value, - }, - value, - ), - ]; - } - renderUUID() { const { target } = this.props; const { manifestURL, uuid } = target.details; @@ -59,8 +47,37 @@ class ExtensionDetail extends PureComponent { ), ]; - const uuidName = this.props.getString("about-debugging-extension-uuid"); - return this.renderField("uuid", uuidName, value, uuid); + return Localized( + { + id: "about-debugging-extension-uuid", + attrs: { label: true }, + }, + FieldPair( + { + slug: "uuid", + label: "Internal UUID", + value, + } + ) + ); + } + + renderLocation() { + const { location } = this.props.target.details; + + return Localized( + { + id: "about-debugging-extension-location", + attrs: { label: true }, + }, + FieldPair( + { + slug: "location", + label: "Location", + value: location, + } + ) + ); } render() { @@ -68,15 +85,24 @@ class ExtensionDetail extends PureComponent { const { id, details } = target; const { location, uuid } = details; - const locationName = this.props.getString("about-debugging-extension-location"); - const idName = this.props.getString("about-debugging-extension-id"); - return dom.dl( { className: "extension-detail", }, - location ? this.renderField("location", locationName, location) : null, - this.renderField("extension", idName, id), + location ? this.renderLocation() : null, + Localized( + { + id: "about-debugging-extension-id", + attrs: { label: true }, + }, + FieldPair( + { + slug: "extension", + label: "Extension ID", + value: id, + } + ) + ), uuid ? this.renderUUID() : null, ); } diff --git a/devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.js b/devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.js new file mode 100644 index 000000000000..d26c13f67d6c --- /dev/null +++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.js @@ -0,0 +1,40 @@ +/* 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"); + +/* Renders a pair of `
` (label) + `
` (value) field. + * It also needs a 'slug' prop, which it's an ID that will be used to generate + * a React key for the dom element */ +class FieldPair extends PureComponent { + static get propTypes() { + return { + slug: PropTypes.string.isRequired, + label: PropTypes.node.isRequired, + value: PropTypes.node, + }; + } + + render() { + const { slug, label, value } = this.props; + return [ + dom.dt( + { key: `${slug}-dt` }, + label + ), + value ? dom.dd( + { + key: `${slug}-dd`, + className: "ellipsis-text", + }, + value) : null, + ]; + } +} + +module.exports = FieldPair; diff --git a/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js b/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js index 90c783f4a44e..14fc4de2c5ca 100644 --- a/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js +++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js @@ -15,6 +15,8 @@ const { SERVICE_WORKER_FETCH_STATES, } = require("../../constants"); +const FieldPair = createFactory(require("./FieldPair")); + /** * This component displays detail information for worker. */ @@ -27,61 +29,63 @@ class WorkerDetail extends PureComponent { }; } - getStatusFtlId(status) { - switch (status) { - case "running": - return "about-debugging-worker-status-running"; - case "stopped": - return "about-debugging-worker-status-stopped"; - case "registering": - return "about-debugging-worker-status-registering"; - default: - // Provided with a null id, Localized will simply use the fallback value defined - // in the component. - return null; - } - } - renderFetch() { const { fetch } = this.props.target.details; - const name = this.props.getString("about-debugging-worker-fetch"); - const label = fetch === SERVICE_WORKER_FETCH_STATES.LISTENING - ? this.props.getString("about-debugging-worker-fetch-listening") - : this.props.getString("about-debugging-worker-fetch-not-listening"); - return this.renderField("fetch", name, label); + const status = fetch === SERVICE_WORKER_FETCH_STATES.LISTENING + ? "listening" + : "not-listening"; + + return Localized( + { + id: "about-debugging-worker-fetch", + attrs: { label: true, value: true }, + $status: status, + }, + FieldPair( + { + slug: "fetch", + label: "Fetch", + value: status, + } + ) + ); } - renderField(key, name, value) { - return [ - dom.dt({ key: `${ key }-dt` }, name), - dom.dd( + renderScope() { + const { scope } = this.props.target.details; + + return Localized( + { + id: "about-debugging-worker-scope", + attrs: { label: true }, + }, + FieldPair( { - className: "ellipsis-text", - key: `${ key }-dd`, - title: value, - }, - value, + slug: "scope", + label: "Scope", + value: scope, + } ), - ]; + ); } renderStatus() { const status = this.props.target.details.status.toLowerCase(); - const ftlId = this.getStatusFtlId(status); - return dom.dt( - {}, - Localized( - { - id: ftlId, - }, - dom.span( + return FieldPair( + { + slug: "status", + label: Localized( { - className: `badge ${status === "running" ? "badge--success" : ""}`, + id: "about-debugging-worker-status", + $status: status, }, - status - ) - ) + dom.span( + { className: `badge ${status === "running" ? "badge--success" : ""}`}, + status + ) + ), + } ); } @@ -93,7 +97,7 @@ class WorkerDetail extends PureComponent { className: "worker-detail", }, fetch ? this.renderFetch() : null, - scope ? this.renderField("scope", "Scope", scope) : null, + scope ? this.renderScope() : null, status ? this.renderStatus() : null, ); } diff --git a/devtools/client/aboutdebugging-new/src/components/debugtarget/moz.build b/devtools/client/aboutdebugging-new/src/components/debugtarget/moz.build index 1b0ec17076eb..d0a84474454a 100644 --- a/devtools/client/aboutdebugging-new/src/components/debugtarget/moz.build +++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/moz.build @@ -11,6 +11,7 @@ DevToolsModules( 'DebugTargetPane.js', 'ExtensionDetail.css', 'ExtensionDetail.js', + 'FieldPair.js', 'InspectAction.js', 'ServiceWorkerAction.js', 'TabDetail.js', 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 74f107c1011f..645c522111bd 100644 --- a/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl +++ b/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl @@ -139,11 +139,13 @@ about-debugging-extension-manifest-link = Manifest URL # Text displayed for extensions in "runtime" pages, before displaying the extension's uuid. # UUIDs look like b293e463-481e-5148-a487-5aaf7a130429 -about-debugging-extension-uuid = Internal UUID +about-debugging-extension-uuid = + .label = Internal UUID # Text displayed for extensions (temporary extensions only) in "runtime" pages, before # displaying the location of the temporary extension. -about-debugging-extension-location = Location +about-debugging-extension-location = + .label = Location # Text displayed for extensions in "runtime" pages, before displaying the extension's ID. # For instance "geckoprofiler@mozilla.com" or "{ed26ddcb-5611-4512-a89a-51b8db81cfb2}". @@ -176,28 +178,29 @@ about-debugging-worker-action-start = Start # Displayed for service workers in runtime pages, # "Fetch" is an event type and should not be localized. -about-debugging-worker-fetch = Fetch +# The status is used to indicate whether the service worker is currently listening +# or not to "fetch" events. +about-debugging-worker-fetch = + .label = Fetch + .value = + { $status -> + [listening] Listening for fetch events + [not-listening] Not listening for fetch events + } -# Displayed for service workers in runtime pages, after about-debugging-worker-fetch, -# to indicate the service worker is currently listening to "fetch" events. -# "Fetch" is an event type and should not be localized. -about-debugging-worker-fetch-listening = Listening for fetch events +# Displayed for service workers in runtime pages, to indicate the status of a worker. +# For workers for which no registration could be found yet, they are considered as +# 'registering' (only active registrations are visible from about:debugging). +about-debugging-worker-status = + { $status -> + [running] Running + [stopped] Stopped + [registering] Registering + } -# Displayed for service workers in runtime pages, after about-debugging-worker-fetch, -# to indicate the service worker is not listening to "fetch" events. -# "Fetch" is an event type and should not be localized. -about-debugging-worker-fetch-not-listening = Not listening for fetch events - -# Displayed for service workers in runtime pages, for service workers in RUNNING state. -about-debugging-worker-status-running = Running - -# Displayed for service workers in runtime pages, for service workers in STOPPED state. -about-debugging-worker-status-stopped = Stopped - -# Displayed for service workers in runtime pages, for service workers for which no -# 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 service workers in runtime pages, to label the scope of a worker +about-debugging-worker-scope = + .label = Scope # Displayed for runtime info in runtime pages. # { $name } is brand name such as "Firefox Nightly"