mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-21 17:25:36 +00:00
Bug 1493695 - Extract renderField method to dedicated component. r=jdescottes,daisuke
Differential Revision: https://phabricator.services.mozilla.com/D11059 --HG-- extra : moz-landing-system : lando
This commit is contained in:
parent
1610592c49
commit
d0fd5d4a85
@ -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,
|
||||
);
|
||||
}
|
||||
|
@ -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 `<dt>` (label) + `<dd>` (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;
|
@ -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,
|
||||
);
|
||||
}
|
||||
|
@ -11,6 +11,7 @@ DevToolsModules(
|
||||
'DebugTargetPane.js',
|
||||
'ExtensionDetail.css',
|
||||
'ExtensionDetail.js',
|
||||
'FieldPair.js',
|
||||
'InspectAction.js',
|
||||
'ServiceWorkerAction.js',
|
||||
'TabDetail.js',
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user