tor-browser

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

SidebarItem.js (2605B)

      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 {
     12  img,
     13  li,
     14  span,
     15 } = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     16 
     17 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     18 
     19 const Actions = require("resource://devtools/client/application/src/actions/index.js");
     20 const {
     21  connect,
     22 } = require("resource://devtools/client/shared/vendor/react-redux.js");
     23 
     24 const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
     25 const Localized = createFactory(FluentReact.Localized);
     26 
     27 const {
     28  PAGE_TYPES,
     29 } = require("resource://devtools/client/application/src/constants.js");
     30 const Types = require("resource://devtools/client/application/src/types/index.js");
     31 
     32 const ICONS = {
     33  [PAGE_TYPES.MANIFEST]:
     34    "chrome://devtools/skin/images/application-manifest.svg",
     35  [PAGE_TYPES.SERVICE_WORKERS]:
     36    "chrome://devtools/skin/images/debugging-workers.svg",
     37 };
     38 
     39 const LOCALIZATION_IDS = {
     40  [PAGE_TYPES.MANIFEST]: "sidebar-item-manifest",
     41  [PAGE_TYPES.SERVICE_WORKERS]: "sidebar-item-service-workers",
     42 };
     43 
     44 class SidebarItem extends PureComponent {
     45  static get propTypes() {
     46    return {
     47      page: Types.page.isRequired,
     48      isSelected: PropTypes.bool.isRequired,
     49      // this prop is automatically injected via connect
     50      dispatch: PropTypes.func.isRequired,
     51    };
     52  }
     53 
     54  render() {
     55    const { isSelected, page } = this.props;
     56 
     57    return li(
     58      {
     59        className: `sidebar-item js-sidebar-${page} ${
     60          isSelected ? "sidebar-item--selected" : ""
     61        }`,
     62        onClick: () => {
     63          const { dispatch } = this.props;
     64          dispatch(Actions.updateSelectedPage(page));
     65        },
     66        role: "link",
     67      },
     68      Localized(
     69        {
     70          id: LOCALIZATION_IDS[page],
     71          attrs: {
     72            alt: true,
     73            title: true,
     74          },
     75        },
     76        img({
     77          src: ICONS[page],
     78          className: "sidebar-item__icon",
     79        })
     80      ),
     81      Localized(
     82        {
     83          id: LOCALIZATION_IDS[page],
     84          attrs: {
     85            title: true,
     86          },
     87        },
     88        span({ className: "devtools-ellipsis-text" })
     89      )
     90    );
     91  }
     92 }
     93 
     94 const mapDispatchToProps = dispatch => ({ dispatch });
     95 module.exports = connect(mapDispatchToProps)(SidebarItem);