123 lines
3.3 KiB
JavaScript
123 lines
3.3 KiB
JavaScript
/* 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,
|
|
createFactory,
|
|
} = require("resource://devtools/client/shared/vendor/react.mjs");
|
|
const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
|
|
const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
|
|
|
|
const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
|
|
const Localized = createFactory(FluentReact.Localized);
|
|
|
|
const MODE_PREF = "devtools.browsertoolbox.scope";
|
|
|
|
const MODE_VALUES = {
|
|
PARENT_PROCESS: "parent-process",
|
|
EVERYTHING: "everything",
|
|
};
|
|
|
|
const MODE_DATA = {
|
|
[MODE_VALUES.PARENT_PROCESS]: {
|
|
containerL10nId: "toolbox-mode-parent-process-container",
|
|
labelL10nId: "toolbox-mode-parent-process-label",
|
|
subLabelL10nId: "toolbox-mode-parent-process-sub-label",
|
|
},
|
|
[MODE_VALUES.EVERYTHING]: {
|
|
containerL10nId: "toolbox-mode-everything-container",
|
|
labelL10nId: "toolbox-mode-everything-label",
|
|
subLabelL10nId: "toolbox-mode-everything-sub-label",
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Toolbar displayed on top of the regular toolbar in the Browser Toolbox and Browser Console,
|
|
* displaying chrome-debugging-specific options.
|
|
*/
|
|
class ChromeDebugToolbar extends PureComponent {
|
|
static get propTypes() {
|
|
return {
|
|
isBrowserConsole: PropTypes.bool,
|
|
};
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
mode: Services.prefs.getCharPref(MODE_PREF),
|
|
};
|
|
|
|
this.onModePrefChanged = this.onModePrefChanged.bind(this);
|
|
Services.prefs.addObserver(MODE_PREF, this.onModePrefChanged);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
Services.prefs.removeObserver(MODE_PREF, this.onModePrefChanged);
|
|
}
|
|
|
|
onModePrefChanged() {
|
|
this.setState({
|
|
mode: Services.prefs.getCharPref(MODE_PREF),
|
|
});
|
|
}
|
|
|
|
renderModeItem(value) {
|
|
const { containerL10nId, labelL10nId, subLabelL10nId } = MODE_DATA[value];
|
|
|
|
const checked = this.state.mode == value;
|
|
return Localized(
|
|
{
|
|
id: containerL10nId,
|
|
attrs: { title: true },
|
|
},
|
|
dom.label(
|
|
{
|
|
className: checked ? "selected" : null,
|
|
},
|
|
dom.input({
|
|
type: `radio`,
|
|
name: `chrome-debug-mode`,
|
|
value,
|
|
checked: checked || null,
|
|
onChange: () => {
|
|
Services.prefs.setCharPref(MODE_PREF, value);
|
|
},
|
|
}),
|
|
Localized({ id: labelL10nId }, dom.span({ className: "mode__label" })),
|
|
Localized(
|
|
{ id: subLabelL10nId },
|
|
dom.span({ className: "mode__sublabel" })
|
|
)
|
|
)
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return dom.header(
|
|
{
|
|
className: "chrome-debug-toolbar",
|
|
},
|
|
dom.section(
|
|
{
|
|
className: "chrome-debug-toolbar__modes",
|
|
},
|
|
Localized(
|
|
{
|
|
id: this.props.isBrowserConsole
|
|
? "toolbox-mode-browser-console-label"
|
|
: "toolbox-mode-browser-toolbox-label",
|
|
},
|
|
dom.h3({})
|
|
),
|
|
this.renderModeItem(MODE_VALUES.PARENT_PROCESS),
|
|
this.renderModeItem(MODE_VALUES.EVERYTHING)
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
module.exports = ChromeDebugToolbar;
|