summaryrefslogtreecommitdiffstats
path: root/devtools/client/performance-new/components/panel/OnboardingMessage.js
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/performance-new/components/panel/OnboardingMessage.js')
-rw-r--r--devtools/client/performance-new/components/panel/OnboardingMessage.js138
1 files changed, 138 insertions, 0 deletions
diff --git a/devtools/client/performance-new/components/panel/OnboardingMessage.js b/devtools/client/performance-new/components/panel/OnboardingMessage.js
new file mode 100644
index 0000000000..614215c6e6
--- /dev/null
+++ b/devtools/client/performance-new/components/panel/OnboardingMessage.js
@@ -0,0 +1,138 @@
+/* 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 {{}} Props - This is an empty object.
+ */
+
+/**
+ * @typedef {Object} State
+ * @property {boolean} isOnboardingEnabled
+ */
+
+/**
+ * @typedef {import("../../@types/perf").PanelWindow} PanelWindow
+ */
+
+"use strict";
+
+const {
+ PureComponent,
+ createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+ b,
+ button,
+ div,
+ p,
+} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const Localized = createFactory(
+ require("resource://devtools/client/shared/vendor/fluent-react.js").Localized
+);
+
+const { openDocLink } = require("resource://devtools/client/shared/link.js");
+
+const LEARN_MORE_URL = "https://profiler.firefox.com/docs";
+const ONBOARDING_PREF = "devtools.performance.new-panel-onboarding";
+
+/**
+ * This component provides a temporary onboarding message for users migrating
+ * from the old DevTools performance panel.
+ * @extends {React.PureComponent<Props>}
+ */
+class OnboardingMessage extends PureComponent {
+ /**
+ * @param {Props} props
+ */
+ constructor(props) {
+ super(props);
+
+ // The preference has no default value for new profiles.
+ // If it is missing, default to true to show the message by default.
+ const isOnboardingEnabled = Services.prefs.getBoolPref(
+ ONBOARDING_PREF,
+ true
+ );
+
+ /** @type {State} */
+ this.state = { isOnboardingEnabled };
+ }
+
+ componentDidMount() {
+ Services.prefs.addObserver(ONBOARDING_PREF, this.onPreferenceUpdated);
+ }
+
+ componentWillUnmount() {
+ Services.prefs.removeObserver(ONBOARDING_PREF, this.onPreferenceUpdated);
+ }
+
+ handleCloseIconClick = () => {
+ Services.prefs.setBoolPref(ONBOARDING_PREF, false);
+ };
+
+ handleLearnMoreClick = () => {
+ openDocLink(LEARN_MORE_URL, {});
+ };
+
+ /**
+ * Update the state whenever the devtools.performance.new-panel-onboarding
+ * preference is updated.
+ */
+ onPreferenceUpdated = () => {
+ const value = Services.prefs.getBoolPref(ONBOARDING_PREF, true);
+ this.setState({ isOnboardingEnabled: value });
+ };
+
+ render() {
+ const { isOnboardingEnabled } = this.state;
+ if (!isOnboardingEnabled) {
+ return null;
+ }
+
+ /** @type {any} */
+ const anyWindow = window;
+
+ // If gToolbox is not defined on window, the component is rendered in
+ // about:debugging, and no onboarding message should be displayed.
+ if (!anyWindow.gToolbox) {
+ return null;
+ }
+
+ const learnMoreLink = button({
+ className: "perf-external-link",
+ onClick: this.handleLearnMoreClick,
+ });
+
+ const closeButton = Localized(
+ {
+ id: "perftools-onboarding-close-button",
+ attrs: { "aria-label": true },
+ },
+ button({
+ className:
+ "perf-onboarding-close-button perf-photon-button perf-photon-button-ghost",
+ onClick: this.handleCloseIconClick,
+ })
+ );
+
+ return div(
+ { className: "perf-onboarding" },
+ div(
+ { className: "perf-onboarding-message" },
+ Localized(
+ {
+ id: "perftools-onboarding-message",
+ b: b(),
+ a: learnMoreLink,
+ },
+ p({ className: "perf-onboarding-message-row" })
+ )
+ ),
+ closeButton
+ );
+ }
+}
+
+module.exports = OnboardingMessage;