tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

OnboardingMessage.js (3493B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 // @ts-check
      5 
      6 /**
      7 * @typedef {{}} Props - This is an empty object.
      8 */
      9 
     10 /**
     11 * @typedef {object} State
     12 * @property {boolean} isOnboardingEnabled
     13 */
     14 
     15 /**
     16 * @typedef {import("../../@types/perf").PanelWindow} PanelWindow
     17 */
     18 
     19 "use strict";
     20 
     21 const {
     22  PureComponent,
     23  createFactory,
     24 } = require("resource://devtools/client/shared/vendor/react.mjs");
     25 const {
     26  b,
     27  button,
     28  div,
     29  p,
     30 } = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     31 const Localized = createFactory(
     32  require("resource://devtools/client/shared/vendor/fluent-react.js").Localized
     33 );
     34 
     35 const { openDocLink } = require("resource://devtools/client/shared/link.js");
     36 
     37 const LEARN_MORE_URL = "https://profiler.firefox.com/docs";
     38 const ONBOARDING_PREF = "devtools.performance.new-panel-onboarding";
     39 
     40 /**
     41 * This component provides a temporary onboarding message for users migrating
     42 * from the old DevTools performance panel.
     43 *
     44 * @augments {React.PureComponent<Props>}
     45 */
     46 class OnboardingMessage extends PureComponent {
     47  /**
     48   * @param {Props} props
     49   */
     50  constructor(props) {
     51    super(props);
     52 
     53    // The preference has no default value for new profiles.
     54    // If it is missing, default to true to show the message by default.
     55    const isOnboardingEnabled = Services.prefs.getBoolPref(
     56      ONBOARDING_PREF,
     57      true
     58    );
     59 
     60    /** @type {State} */
     61    this.state = { isOnboardingEnabled };
     62  }
     63 
     64  componentDidMount() {
     65    Services.prefs.addObserver(ONBOARDING_PREF, this.onPreferenceUpdated);
     66  }
     67 
     68  componentWillUnmount() {
     69    Services.prefs.removeObserver(ONBOARDING_PREF, this.onPreferenceUpdated);
     70  }
     71 
     72  handleCloseIconClick = () => {
     73    Services.prefs.setBoolPref(ONBOARDING_PREF, false);
     74  };
     75 
     76  handleLearnMoreClick = () => {
     77    openDocLink(LEARN_MORE_URL, {});
     78  };
     79 
     80  /**
     81   * Update the state whenever the devtools.performance.new-panel-onboarding
     82   * preference is updated.
     83   */
     84  onPreferenceUpdated = () => {
     85    const value = Services.prefs.getBoolPref(ONBOARDING_PREF, true);
     86    this.setState({ isOnboardingEnabled: value });
     87  };
     88 
     89  render() {
     90    const { isOnboardingEnabled } = this.state;
     91    if (!isOnboardingEnabled) {
     92      return null;
     93    }
     94 
     95    /** @type {any} */
     96    const anyWindow = window;
     97 
     98    // If gToolbox is not defined on window, the component is rendered in
     99    // about:debugging, and no onboarding message should be displayed.
    100    if (!anyWindow.gToolbox) {
    101      return null;
    102    }
    103 
    104    const learnMoreLink = button({
    105      className: "perf-external-link",
    106      onClick: this.handleLearnMoreClick,
    107    });
    108 
    109    const closeButton = Localized(
    110      {
    111        id: "perftools-onboarding-close-button",
    112        attrs: { "aria-label": true },
    113      },
    114      button({
    115        className:
    116          "perf-onboarding-close-button perf-photon-button perf-photon-button-ghost",
    117        onClick: this.handleCloseIconClick,
    118      })
    119    );
    120 
    121    return div(
    122      { className: "perf-onboarding" },
    123      div(
    124        { className: "perf-onboarding-message" },
    125        Localized(
    126          {
    127            id: "perftools-onboarding-message",
    128            b: b(),
    129            a: learnMoreLink,
    130          },
    131          p({ className: "perf-onboarding-message-row" })
    132        )
    133      ),
    134      closeButton
    135    );
    136  }
    137 }
    138 
    139 module.exports = OnboardingMessage;