From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- .../framework/components/ChromeDebugToolbar.js | 123 +++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 devtools/client/framework/components/ChromeDebugToolbar.js (limited to 'devtools/client/framework/components/ChromeDebugToolbar.js') diff --git a/devtools/client/framework/components/ChromeDebugToolbar.js b/devtools/client/framework/components/ChromeDebugToolbar.js new file mode 100644 index 0000000000..b126cf78fd --- /dev/null +++ b/devtools/client/framework/components/ChromeDebugToolbar.js @@ -0,0 +1,123 @@ +/* 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.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 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; -- cgit v1.2.3