<commit_before>import url from 'url';

import React, {PropTypes} from 'react';

export default class Tab extends React.Component {
  static propTypes = {
    selected: PropTypes.bool,
    useSelectedStyle: PropTypes.bool,
    tab: PropTypes.object,
  }

  static defaultProps = {
    selected: false,
    useSelectedStyle: true,
  }

  constructor(props) {
    super(props);
    this.state = {tab: props.tab};
  }

  componentDidMount() {
    document.addEventListener('keydown', this.onKeyDown, false);
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.onKeyDown);
  }

  onKeyDown = (event) => {
    if (!this.props.selected) {
      return;
    }

    if (event.key === 'Enter') {
      this.goToTabUrl();
      return;
    }

    if (event.key === 'm') {
      this.toggleMute();
      return;
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.tab && nextProps.tab !== this.props.tab) {
      this.setState({tab: nextProps.tab});
    }
  }

  goToTabUrl() {
    chrome.tabs.update(this.state.tab.id, {active: true}, () => {
      window.close();
    });
  }

  onClickUrl = (event) => {
    event.preventDefault();
    this.goToTabUrl();
  }

  toggleMute = () => {
    const muted = this.state.tab.mutedInfo.muted ? false : true;
    chrome.tabs.update(this.state.tab.id, {muted});
  }

  onToggleMute = (event) => {
    event.preventDefault();
    this.toggleMute();
  }

  render() {
    const {selected, useSelectedStyle} = this.props;
    const {tab} = this.state;

    let buttonCls;
    let buttonTitle;
    if (tab.mutedInfo.muted) {
      buttonCls = 'muted';
      buttonTitle = 'unmute';
    } else {
      buttonCls = 'unmuted';
      buttonTitle = 'mute';
    }

    const urlHost = url.parse(tab.url).hostname;
    const classNames = ['Tab'];
    if (selected && useSelectedStyle) {
      classNames.push('selected');
    }

    return (
      <div className={classNames.join(' ')}>
        <a  ref={(ref) => { this.tabAnchor = ref; }}
            onKeyUp={this.onKeyDown} onClick={this.onClickUrl}>
          {tab.title}<span>{urlHost}</span>
        </a>
        <button onClick={this.onToggleMute} title={buttonTitle}
          className={buttonCls}></button>
      </div>
    );
  }
}
<commit_msg>focus the other window when switching to an audible tab<commit_after>import url from 'url';

import React, {PropTypes} from 'react';

export default class Tab extends React.Component {
  static propTypes = {
    selected: PropTypes.bool,
    useSelectedStyle: PropTypes.bool,
    tab: PropTypes.object,
  }

  static defaultProps = {
    selected: false,
    useSelectedStyle: true,
  }

  constructor(props) {
    super(props);
    this.state = {tab: props.tab};
  }

  componentDidMount() {
    document.addEventListener('keydown', this.onKeyDown, false);
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.onKeyDown);
  }

  onKeyDown = (event) => {
    if (!this.props.selected) {
      return;
    }

    if (event.key === 'Enter') {
      this.goToTabUrl();
      return;
    }

    if (event.key === 'm') {
      this.toggleMute();
      return;
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.tab && nextProps.tab !== this.props.tab) {
      this.setState({tab: nextProps.tab});
    }
  }

  goToTabUrl() {
    const {tab} = this.state;
    chrome.tabs.update(tab.id, {active: true});
    // If it's in another window, focus it.
    chrome.windows.update(tab.windowId, {focused: true}, () => {
      // Close the Sound Control popup.
      window.close();
    });
  }

  onClickUrl = (event) => {
    event.preventDefault();
    this.goToTabUrl();
  }

  toggleMute = () => {
    const muted = this.state.tab.mutedInfo.muted ? false : true;
    chrome.tabs.update(this.state.tab.id, {muted});
  }

  onToggleMute = (event) => {
    event.preventDefault();
    this.toggleMute();
  }

  render() {
    const {selected, useSelectedStyle} = this.props;
    const {tab} = this.state;

    let buttonCls;
    let buttonTitle;
    if (tab.mutedInfo.muted) {
      buttonCls = 'muted';
      buttonTitle = 'unmute';
    } else {
      buttonCls = 'unmuted';
      buttonTitle = 'mute';
    }

    const urlHost = url.parse(tab.url).hostname;
    const classNames = ['Tab'];
    if (selected && useSelectedStyle) {
      classNames.push('selected');
    }

    return (
      <div className={classNames.join(' ')}>
        <a  ref={(ref) => { this.tabAnchor = ref; }}
            onKeyUp={this.onKeyDown} onClick={this.onClickUrl}>
          {tab.title}<span>{urlHost}</span>
        </a>
        <button onClick={this.onToggleMute} title={buttonTitle}
          className={buttonCls}></button>
      </div>
    );
  }
}

{'fraction_non_alphanumeric': 0.15538688593717057, 'fraction_numerical': 0.0, 'mean_word_length': 2.6021260440394838, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3332917', 'n_tokens_mistral': 1600, 'n_tokens_neox': 1570, 'n_words': 293}