Source code
Revision control
Copy as Markdown
Other Tools
/* 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
"use strict";
const {
createFactory,
PureComponent,
} = require("resource://devtools/client/shared/vendor/react.js");
const {
connect,
} = require("resource://devtools/client/shared/vendor/react-redux.js");
const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
const {
article,
aside,
h2,
header,
li,
p,
time,
ul,
} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
const {
getUnicodeUrl,
} = require("resource://devtools/client/shared/unicode-url.js");
const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
const Localized = createFactory(FluentReact.Localized);
const Types = require("resource://devtools/client/application/src/types/index.js");
const {
unregisterWorker,
} = require("resource://devtools/client/application/src/actions/workers.js");
const UIButton = createFactory(
require("resource://devtools/client/application/src/components/ui/UIButton.js")
);
const Worker = createFactory(
require("resource://devtools/client/application/src/components/service-workers/Worker.js")
);
/**
* This component is dedicated to display a service worker registration, along
* the list of attached workers to it.
* It displays information about the registration as well as an Unregister
* button.
*/
class Registration extends PureComponent {
static get propTypes() {
return {
className: PropTypes.string,
isDebugEnabled: PropTypes.bool.isRequired,
registration: PropTypes.shape(Types.registration).isRequired,
// this prop get automatically injected via `connect`
dispatch: PropTypes.func.isRequired,
};
}
constructor(props) {
super(props);
this.unregister = this.unregister.bind(this);
}
unregister() {
this.props.dispatch(unregisterWorker(this.props.registration));
}
isActive() {
const { workers } = this.props.registration;
return workers.some(
x => x.state === Ci.nsIServiceWorkerInfo.STATE_ACTIVATED
);
}
formatScope(scope) {
const [, remainder] = getUnicodeUrl(scope).split("://");
// remove the last slash from the url, if present
// or return the full scope if there's no remainder
return remainder ? remainder.replace(/\/$/, "") : scope;
}
render() {
const { registration, isDebugEnabled, className } = this.props;
const unregisterButton = this.isActive()
? Localized(
{ id: "serviceworker-worker-unregister" },
UIButton({
onClick: this.unregister,
className: "js-unregister-button",
})
)
: null;
const lastUpdated = registration.lastUpdateTime
? Localized(
{
id: "serviceworker-worker-updated",
// XXX: $date should normally be a Date object, but we pass the timestamp as a
// convert to a valid timestamp in milliseconds by dividing by 1000.
$date: registration.lastUpdateTime / 1000,
time: time({ className: "js-sw-updated" }),
},
p({ className: "registration__updated-time" })
)
: null;
const scope = h2(
{
title: registration.scope,
className: "registration__scope js-sw-scope devtools-ellipsis-text",
},
this.formatScope(registration.scope)
);
return li(
{ className: className ? className : "" },
article(
{ className: "registration js-sw-container" },
header({ className: "registration__header" }, scope, lastUpdated),
aside({ className: "registration__controls" }, unregisterButton),
// render list of workers
ul(
{ className: "registration__workers" },
registration.workers.map(worker => {
return li(
{
key: worker.id,
className: "registration__workers-item",
},
Worker({
worker,
isDebugEnabled,
})
);
})
)
)
);
}
}
const mapDispatchToProps = dispatch => ({ dispatch });
module.exports = connect(mapDispatchToProps)(Registration);