зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1589474 The new performance panel icon in devtools should be highlighted in green when the profiler is running r=julienw
Added the ToolboxHighlightController.js to Highlight the Performance Tab in Devtools when when the Profiler is on. Differential Revision: https://phabricator.services.mozilla.com/D172699
This commit is contained in:
Родитель
4c839669b4
Коммит
4cf815ba6a
|
@ -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 })
|
||||
|
|
|
@ -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<Props>}
|
||||
*/
|
||||
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);
|
|
@ -10,4 +10,5 @@ DevToolsModules(
|
|||
"OnboardingMessage.js",
|
||||
"ProfilerEventHandling.js",
|
||||
"RecordingButton.js",
|
||||
"ToolboxHighlightController.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."
|
||||
|
|
Загрузка…
Ссылка в новой задаче