tor-browser

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

MessageListHeader.js (3285B)

      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  Component,
      9 } = require("resource://devtools/client/shared/vendor/react.mjs");
     10 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     11 const {
     12  MESSAGE_HEADERS,
     13 } = require("resource://devtools/client/netmonitor/src/constants.js");
     14 const {
     15  L10N,
     16 } = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
     17 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     18 const {
     19  connect,
     20 } = require("resource://devtools/client/shared/vendor/react-redux.js");
     21 const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
     22 
     23 // Components
     24 const MessageListHeaderContextMenu = require("resource://devtools/client/netmonitor/src/components/messages/MessageListHeaderContextMenu.js");
     25 
     26 /**
     27 * Renders the message list header.
     28 */
     29 class MessageListHeader extends Component {
     30  static get propTypes() {
     31    return {
     32      columns: PropTypes.object.isRequired,
     33      toggleColumn: PropTypes.func.isRequired,
     34      resetColumns: PropTypes.func.isRequired,
     35    };
     36  }
     37 
     38  constructor(props) {
     39    super(props);
     40 
     41    this.onContextMenu = this.onContextMenu.bind(this);
     42  }
     43 
     44  onContextMenu(evt) {
     45    evt.preventDefault();
     46    const { resetColumns, toggleColumn, columns } = this.props;
     47 
     48    if (!this.contextMenu) {
     49      this.contextMenu = new MessageListHeaderContextMenu({
     50        toggleColumn,
     51        resetColumns,
     52      });
     53    }
     54    this.contextMenu.open(evt, columns);
     55  }
     56 
     57  /**
     58   * Helper method to get visibleColumns.
     59   */
     60  getVisibleColumns() {
     61    const { columns } = this.props;
     62    return MESSAGE_HEADERS.filter(header => columns[header.name]);
     63  }
     64 
     65  /**
     66   * Render one column header from the table headers.
     67   */
     68  renderColumn({ name, width = "10%" }) {
     69    const label = L10N.getStr(`netmonitor.ws.toolbar.${name}`);
     70 
     71    return dom.th(
     72      {
     73        key: name,
     74        id: `message-list-${name}-header-box`,
     75        className: `message-list-column message-list-${name}`,
     76        scope: "col",
     77        style: { width },
     78      },
     79      dom.button(
     80        {
     81          id: `message-list-${name}-button`,
     82          className: `message-list-header-button`,
     83          title: label,
     84        },
     85        dom.div({ className: "button-text" }, label),
     86        dom.div({ className: "button-icon" })
     87      )
     88    );
     89  }
     90 
     91  /**
     92   * Render all columns in the table header.
     93   */
     94  renderColumns() {
     95    const visibleColumns = this.getVisibleColumns();
     96    return visibleColumns.map(header => this.renderColumn(header));
     97  }
     98 
     99  render() {
    100    return dom.thead(
    101      { className: "message-list-headers-group" },
    102      dom.tr(
    103        {
    104          className: "message-list-headers",
    105          onContextMenu: this.onContextMenu,
    106        },
    107        this.renderColumns()
    108      )
    109    );
    110  }
    111 }
    112 
    113 module.exports = connect(
    114  state => ({
    115    columns: state.messages.columns,
    116  }),
    117  dispatch => ({
    118    toggleColumn: column => dispatch(Actions.toggleMessageColumn(column)),
    119    resetColumns: () => dispatch(Actions.resetMessageColumns()),
    120  })
    121 )(MessageListHeader);