devtools/client/performance-new/components/panel/Description.js

   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 "use strict";
  11
  12 const {
  13   PureComponent,
  14   createFactory,
  15 } = require("resource://devtools/client/shared/vendor/react.js");
  16 const {
  17   div,
  18   button,
  19   p,
  20 } = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
  21 const Localized = createFactory(
  22   require("resource://devtools/client/shared/vendor/fluent-react.js").Localized
  23 );
  24
  25 /**
  26  * This component provides a helpful description for what is going on in the component
  27  * and provides some external links.
  28  * @extends {React.PureComponent<Props>}
  29  */
  30 class Description extends PureComponent {
  31   /**
  32    * @param {React.MouseEvent<HTMLButtonElement>} event
  33    */
  34   handleLinkClick = event => {
  35     const {
  36       openDocLink,
  37     } = require("resource://devtools/client/shared/link.js");
  38
  39     /** @type HTMLButtonElement */
  40     const target = /** @type {any} */ (event.target);
  41
  42     openDocLink(target.value, {});
  43   };
  44
  45   render() {
  46     return div(
  47       { className: "perf-description" },
  48       Localized(
  49         {
  50           id: "perftools-description-intro",
  51           a: button({
  52             className: "perf-external-link",
  53             onClick: this.handleLinkClick,
  54             value: "https://profiler.firefox.com",
  55           }),
  56         },
  57         p({})
  58       )
  59     );
  60   }
  61 }
  62
  63 module.exports = Description;