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"