diff --git a/devtools/client/performance-new/components/panel/DevToolsPanel.js b/devtools/client/performance-new/components/panel/DevToolsPanel.js index 60597bf89566..8f1b8fb344e6 100644 --- a/devtools/client/performance-new/components/panel/DevToolsPanel.js +++ b/devtools/client/performance-new/components/panel/DevToolsPanel.js @@ -23,6 +23,8 @@ /** * @typedef {StateProps & OwnProps} Props * @typedef {import("../../@types/perf").State} StoreState + * @typedef {import("../../@types/perf").RecordingState} RecordingState + * @typedef {import("../../@types/perf").PanelWindow} PanelWindow */ "use strict"; @@ -50,8 +52,13 @@ const DevToolsPresetSelection = createFactory( const OnboardingMessage = createFactory( require("resource://devtools/client/performance-new/components/panel/OnboardingMessage.js") ); +const ToolboxHighlightController = createFactory( + require("resource://devtools/client/performance-new/components/panel/ToolboxHighlightController.js") +); const selectors = require("resource://devtools/client/performance-new/store/selectors.js"); +const anyWindow = /** @type {any} */ (window); +const panelWindow = /** @type {PanelWindow} */ (anyWindow); /** * This is the top level component for the DevTools panel. @@ -77,6 +84,9 @@ class DevToolsPanel extends PureComponent { div( { className: `perf perf-devtools` }, RecordingButton({ perfFront, onProfileReceived }), + panelWindow.gToolbox + ? ToolboxHighlightController({ toolbox: panelWindow.gToolbox }) + : null, Description(), hr({ className: "perf-presets-hr" }), DevToolsPresetSelection({ onEditSettingsLinkClicked }) diff --git a/devtools/client/performance-new/components/panel/ToolboxHighlightController.js b/devtools/client/performance-new/components/panel/ToolboxHighlightController.js new file mode 100644 index 000000000000..9d9d594aa0e2 --- /dev/null +++ b/devtools/client/performance-new/components/panel/ToolboxHighlightController.js @@ -0,0 +1,61 @@ +/* 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/. */ +// @ts-check + +/** + * @typedef {Object} StateProps + * @property {RecordingState} recordingState + */ + +/** + * @typedef {Object} OwnProps + * @property {any} toolbox + */ + +/** + * @typedef {StateProps & OwnProps} Props + * @typedef {import("../../@types/perf").State} StoreState + * @typedef {import("../../@types/perf").RecordingState} RecordingState + */ + +"use strict"; + +const { + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const { + connect, +} = require("resource://devtools/client/shared/vendor/react-redux.js"); +const selectors = require("resource://devtools/client/performance-new/store/selectors.js"); + +/** + * @extends {React.PureComponent} + */ +class ToolboxHighlightController extends PureComponent { + /** @param {Props} prevProps */ + componentDidUpdate(prevProps) { + const { recordingState, toolbox } = this.props; + if (recordingState === "recording") { + toolbox.highlightTool("performance"); + } else if (prevProps.recordingState === "recording") { + toolbox.unhighlightTool("performance"); + } + } + + render() { + return null; + } +} + +/** + * @param {StoreState} state + * @returns {StateProps} + */ +function mapStateToProps(state) { + return { + recordingState: selectors.getRecordingState(state), + }; +} + +module.exports = connect(mapStateToProps)(ToolboxHighlightController); diff --git a/devtools/client/performance-new/components/panel/moz.build b/devtools/client/performance-new/components/panel/moz.build index 8ec2435693aa..4063f5d333a4 100644 --- a/devtools/client/performance-new/components/panel/moz.build +++ b/devtools/client/performance-new/components/panel/moz.build @@ -10,4 +10,5 @@ DevToolsModules( "OnboardingMessage.js", "ProfilerEventHandling.js", "RecordingButton.js", + "ToolboxHighlightController.js", ) diff --git a/devtools/client/performance-new/test/browser/browser_devtools-record-capture.js b/devtools/client/performance-new/test/browser/browser_devtools-record-capture.js index 8b0122f069ff..4f0accf3eb06 100644 --- a/devtools/client/performance-new/test/browser/browser_devtools-record-capture.js +++ b/devtools/client/performance-new/test/browser/browser_devtools-record-capture.js @@ -152,6 +152,12 @@ async function setPresetCaptureAndAssertUrl({ "Clicking the start recording button sends in a request to start recording." ); + is( + document.defaultView.gToolbox.isHighlighted("performance"), + false, + "The Performance panel in not highlighted yet." + ); + const captureRecording = await getActiveButtonFromText( document, "Capture recording" @@ -164,6 +170,13 @@ async function setPresetCaptureAndAssertUrl({ "its recording" ); + is( + document.defaultView.gToolbox.isHighlighted("performance"), + true, + "The Performance Panel in the Devtools Tab is highlighted when the profiler " + + "is recording" + ); + info("Click the button to capture the recording."); captureRecording.click(); @@ -180,6 +193,12 @@ async function setPresetCaptureAndAssertUrl({ "The profiler is available to record again." ); + is( + document.defaultView.gToolbox.isHighlighted("performance"), + false, + "The Performance panel in not highlighted anymore when the profiler is stopped" + ); + info( "If the DevTools successfully injects a profile into the page, then the " + "fake frontend will rename the title of the page."