tor-browser

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

Message.js (2969B)

      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 
      5 "use strict";
      6 
      7 const {
      8  createFactory,
      9  PureComponent,
     10 } = require("resource://devtools/client/shared/vendor/react.mjs");
     11 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     12 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     13 
     14 const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
     15 const Localized = createFactory(FluentReact.Localized);
     16 
     17 const {
     18  MESSAGE_LEVEL,
     19 } = require("resource://devtools/client/aboutdebugging/src/constants.js");
     20 
     21 const ICONS = {
     22  [MESSAGE_LEVEL.ERROR]:
     23    "chrome://devtools/skin/images/aboutdebugging-error.svg",
     24  [MESSAGE_LEVEL.INFO]:
     25    "chrome://devtools/skin/images/aboutdebugging-information.svg",
     26  [MESSAGE_LEVEL.WARNING]: "chrome://devtools/skin/images/alert.svg",
     27 };
     28 const CLOSE_ICON_SRC = "chrome://devtools/skin/images/close.svg";
     29 
     30 /**
     31 * This component is designed to display a photon-style message bar. The component is
     32 * responsible for displaying the message container with the appropriate icon. The content
     33 * of the message should be passed as the children of this component.
     34 */
     35 class Message extends PureComponent {
     36  static get propTypes() {
     37    return {
     38      children: PropTypes.node.isRequired,
     39      className: PropTypes.string,
     40      isCloseable: PropTypes.bool,
     41      level: PropTypes.oneOf(Object.values(MESSAGE_LEVEL)).isRequired,
     42    };
     43  }
     44 
     45  constructor(props) {
     46    super(props);
     47    this.state = {
     48      isClosed: false,
     49    };
     50  }
     51 
     52  closeMessage() {
     53    this.setState({ isClosed: true });
     54  }
     55 
     56  renderButton(level) {
     57    return dom.button(
     58      {
     59        className:
     60          `ghost-button message__button message__button--${level} ` +
     61          `qa-message-button-close-button`,
     62        onClick: () => this.closeMessage(),
     63      },
     64      Localized(
     65        {
     66          id: "about-debugging-message-close-icon",
     67          attrs: {
     68            alt: true,
     69          },
     70        },
     71        dom.img({
     72          className: "qa-message-button-close-icon",
     73          src: CLOSE_ICON_SRC,
     74        })
     75      )
     76    );
     77  }
     78 
     79  render() {
     80    const { children, className, level, isCloseable } = this.props;
     81    const { isClosed } = this.state;
     82 
     83    if (isClosed) {
     84      return null;
     85    }
     86 
     87    return dom.aside(
     88      {
     89        className:
     90          `message message--level-${level}  qa-message` +
     91          (className ? ` ${className}` : ""),
     92      },
     93      dom.img({
     94        className: "message__icon",
     95        src: ICONS[level],
     96      }),
     97      dom.div(
     98        {
     99          className: "message__body",
    100        },
    101        children
    102      ),
    103      // if the message is closeable, render a closing button
    104      isCloseable ? this.renderButton(level) : null
    105    );
    106  }
    107 }
    108 
    109 module.exports = Message;