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 dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
const {
connect,
} = require("resource://devtools/client/shared/vendor/react-redux.js");
const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
const Localized = createFactory(FluentReact.Localized);
const {
getCurrentRuntimeDetails,
} = require("resource://devtools/client/aboutdebugging/src/modules/runtimes-state-helper.js");
const Actions = require("resource://devtools/client/aboutdebugging/src/actions/index.js");
const Types = require("resource://devtools/client/aboutdebugging/src/types/index.js");
const {
SERVICE_WORKER_STATUSES,
} = require("resource://devtools/client/aboutdebugging/src/constants.js");
/**
* The main purpose of this component is to expose a meaningful prop
* disabledTitle that can be used with fluent localization.
*/
class _ActionButton extends PureComponent {
static get propTypes() {
return {
children: PropTypes.node,
className: PropTypes.string.isRequired,
disabled: PropTypes.bool,
disabledTitle: PropTypes.string,
onClick: PropTypes.func.isRequired,
};
}
render() {
const { className, disabled, disabledTitle, onClick } = this.props;
return dom.button(
{
className,
disabled,
onClick: () => onClick(),
title: disabled && disabledTitle ? disabledTitle : undefined,
},
this.props.children
);
}
}
const ActionButtonFactory = createFactory(_ActionButton);
/**
* This component displays buttons for service worker.
*/
class ServiceWorkerAdditionalActions extends PureComponent {
static get propTypes() {
return {
dispatch: PropTypes.func.isRequired,
// Provided by wrapping the component with FluentReact.withLocalization.
getString: PropTypes.func.isRequired,
// Provided by redux state
runtimeDetails: Types.runtimeDetails.isRequired,
target: Types.debugTarget.isRequired,
};
}
push() {
const { dispatch, target } = this.props;
dispatch(
Actions.pushServiceWorker(target.id, target.details.registrationFront)
);
}
start() {
const { dispatch, target } = this.props;
dispatch(Actions.startServiceWorker(target.details.registrationFront));
}
unregister() {
const { dispatch, target } = this.props;
dispatch(Actions.unregisterServiceWorker(target.details.registrationFront));
}
_renderButton({ className, disabled, key, labelId, onClick }) {
return Localized(
{
id: labelId,
attrs: {
disabledTitle: !!disabled,
},
key,
},
ActionButtonFactory(
{
className,
disabled,
onClick: () => onClick(),
},
labelId
)
);
}
_renderPushButton() {
return this._renderButton({
className: "default-button default-button--micro qa-push-button",
disabled: !this.props.runtimeDetails.canDebugServiceWorkers,
key: "service-worker-push-button",
labelId: "about-debugging-worker-action-push2",
onClick: this.push.bind(this),
});
}
_renderStartButton() {
return this._renderButton({
className: "default-button default-button--micro qa-start-button",
disabled: !this.props.runtimeDetails.canDebugServiceWorkers,
key: "service-worker-start-button",
labelId: "about-debugging-worker-action-start2",
onClick: this.start.bind(this),
});
}
_renderUnregisterButton() {
return this._renderButton({
className: "default-button default-button--micro qa-unregister-button",
key: "service-worker-unregister-button",
labelId: "about-debugging-worker-action-unregister",
disabled: false,
onClick: this.unregister.bind(this),
});
}
_renderActionButtons() {
const { status } = this.props.target.details;
switch (status) {
case SERVICE_WORKER_STATUSES.RUNNING:
return [this._renderUnregisterButton(), this._renderPushButton()];
case SERVICE_WORKER_STATUSES.REGISTERING:
return null;
case SERVICE_WORKER_STATUSES.STOPPED:
return [this._renderUnregisterButton(), this._renderStartButton()];
default:
console.error("Unexpected service worker status: " + status);
return null;
}
}
render() {
return dom.div(
{
className: "toolbar toolbar--right-align",
},
this._renderActionButtons()
);
}
}
const mapStateToProps = state => {
return {
runtimeDetails: getCurrentRuntimeDetails(state.runtimes),
};
};
module.exports = FluentReact.withLocalization(
connect(mapStateToProps)(ServiceWorkerAdditionalActions)
);