tor-browser

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

ToolboxTab.js (2805B)

      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 file,
      3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 "use strict";
      5 
      6 const {
      7  Component,
      8 } = require("resource://devtools/client/shared/vendor/react.mjs");
      9 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     10 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     11 const { img, button, span } = dom;
     12 
     13 class ToolboxTab extends Component {
     14  // See toolbox-toolbar propTypes for details on the props used here.
     15  static get propTypes() {
     16    return {
     17      currentToolId: PropTypes.string,
     18      focusButton: PropTypes.func,
     19      focusedButton: PropTypes.string,
     20      highlightedTools: PropTypes.object.isRequired,
     21      panelDefinition: PropTypes.object,
     22      selectTool: PropTypes.func,
     23    };
     24  }
     25 
     26  constructor(props) {
     27    super(props);
     28    this.renderIcon = this.renderIcon.bind(this);
     29  }
     30 
     31  renderIcon(definition) {
     32    const { icon } = definition;
     33    if (!icon) {
     34      return [];
     35    }
     36    return [
     37      img({
     38        alt: "",
     39        src: icon,
     40      }),
     41    ];
     42  }
     43 
     44  render() {
     45    const {
     46      panelDefinition,
     47      currentToolId,
     48      highlightedTools,
     49      selectTool,
     50      focusedButton,
     51      focusButton,
     52    } = this.props;
     53    const { id, extensionId, tooltip, label, iconOnly, badge } =
     54      panelDefinition;
     55    const isHighlighted = id === currentToolId;
     56 
     57    const className = [
     58      "devtools-tab",
     59      currentToolId === id ? "selected" : "",
     60      highlightedTools.has(id) ? "highlighted" : "",
     61      iconOnly ? "devtools-tab-icon-only" : "",
     62    ].join(" ");
     63 
     64    return button(
     65      {
     66        className,
     67        id: `toolbox-tab-${id}`,
     68        "data-id": id,
     69        "data-extension-id": extensionId,
     70        title: tooltip,
     71        type: "button",
     72        "aria-pressed": currentToolId === id ? "true" : "false",
     73        tabIndex: focusedButton === id ? "0" : "-1",
     74        onFocus: () => focusButton(id),
     75        onMouseDown: () => selectTool(id, "tab_switch"),
     76        onKeyDown: evt => {
     77          if (evt.key === "Enter" || evt.key === " ") {
     78            selectTool(id, "tab_switch");
     79          }
     80        },
     81      },
     82      span({
     83        className: "devtools-tab-line",
     84      }),
     85      ...this.renderIcon(panelDefinition),
     86      iconOnly
     87        ? null
     88        : span(
     89            {
     90              className: "devtools-tab-label",
     91            },
     92            label,
     93            badge && !isHighlighted
     94              ? span(
     95                  {
     96                    className: "devtools-tab-badge",
     97                  },
     98                  badge
     99                )
    100              : null
    101          )
    102    );
    103  }
    104 }
    105 
    106 module.exports = ToolboxTab;