diff options
Diffstat (limited to 'devtools/client/aboutdebugging/src/components/debugtarget/WorkerDetail.js')
-rw-r--r-- | devtools/client/aboutdebugging/src/components/debugtarget/WorkerDetail.js | 120 |
1 files changed, 120 insertions, 0 deletions
diff --git a/devtools/client/aboutdebugging/src/components/debugtarget/WorkerDetail.js b/devtools/client/aboutdebugging/src/components/debugtarget/WorkerDetail.js new file mode 100644 index 0000000000..e6c9d19116 --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/debugtarget/WorkerDetail.js @@ -0,0 +1,120 @@ +/* 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 { + 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); + +const { + SERVICE_WORKER_FETCH_STATES, +} = require("devtools/client/aboutdebugging/src/constants"); + +const FieldPair = createFactory( + require("devtools/client/aboutdebugging/src/components/debugtarget/FieldPair") +); + +const Types = require("devtools/client/aboutdebugging/src/types/index"); + +/** + * This component displays detail information for worker. + */ +class WorkerDetail extends PureComponent { + static get propTypes() { + return { + // Provided by wrapping the component with FluentReact.withLocalization. + getString: PropTypes.func.isRequired, + target: Types.debugTarget.isRequired, + }; + } + + renderFetch() { + const { fetch } = this.props.target.details; + const isListening = fetch === SERVICE_WORKER_FETCH_STATES.LISTENING; + const localizationId = isListening + ? "about-debugging-worker-fetch-listening" + : "about-debugging-worker-fetch-not-listening"; + + return Localized( + { + id: localizationId, + attrs: { + label: true, + value: true, + }, + }, + FieldPair({ + className: isListening + ? "qa-worker-fetch-listening" + : "qa-worker-fetch-not-listening", + label: "Fetch", + slug: "fetch", + value: "about-debugging-worker-fetch-value", + }) + ); + } + + renderPushService() { + const { pushServiceEndpoint } = this.props.target.details; + + return Localized( + { + id: "about-debugging-worker-push-service", + attrs: { label: true }, + }, + FieldPair({ + slug: "push-service", + label: "Push Service", + value: dom.span( + { + className: "qa-worker-push-service-value", + }, + pushServiceEndpoint + ), + }) + ); + } + + renderScope() { + const { scope } = this.props.target.details; + + return Localized( + { + id: "about-debugging-worker-scope", + attrs: { label: true }, + }, + FieldPair({ + slug: "scope", + label: "Scope", + value: scope, + }) + ); + } + + render() { + const { fetch, pushServiceEndpoint, scope } = this.props.target.details; + + const isEmptyList = !pushServiceEndpoint && !fetch && !scope && !status; + + return dom.dl( + { + className: + "debug-target-item__detail" + + (isEmptyList ? " debug-target-item__detail--empty" : ""), + }, + pushServiceEndpoint ? this.renderPushService() : null, + fetch ? this.renderFetch() : null, + scope ? this.renderScope() : null + ); + } +} + +module.exports = FluentReact.withLocalization(WorkerDetail); |