tor-browser

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

Device.js (3528B)

      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 {
     15  getFormatStr,
     16 } = require("resource://devtools/client/responsive/utils/l10n.js");
     17 const {
     18  parseUserAgent,
     19 } = require("resource://devtools/client/responsive/utils/ua.js");
     20 const Types = require("resource://devtools/client/responsive/types.js");
     21 
     22 const DeviceInfo = createFactory(
     23  require("resource://devtools/client/responsive/components/DeviceInfo.js")
     24 );
     25 
     26 class Device extends PureComponent {
     27  static get propTypes() {
     28    return {
     29      // props.children are the buttons rendered as part of custom device label.
     30      children: PropTypes.oneOfType([
     31        PropTypes.arrayOf(PropTypes.node),
     32        PropTypes.node,
     33      ]),
     34      device: PropTypes.shape(Types.devices).isRequired,
     35      onDeviceCheckboxChange: PropTypes.func.isRequired,
     36    };
     37  }
     38 
     39  constructor(props) {
     40    super(props);
     41 
     42    this.state = {
     43      // Whether or not the device's input label is checked.
     44      isChecked: this.props.device.isChecked,
     45    };
     46 
     47    this.onCheckboxChanged = this.onCheckboxChanged.bind(this);
     48  }
     49 
     50  onCheckboxChanged(e) {
     51    this.setState(prevState => {
     52      return { isChecked: !prevState.isChecked };
     53    });
     54 
     55    this.props.onDeviceCheckboxChange(e);
     56  }
     57 
     58  getBrowserOrOsTooltip(agent) {
     59    if (agent) {
     60      return agent.name + (agent.version ? ` ${agent.version}` : "");
     61    }
     62 
     63    return null;
     64  }
     65 
     66  getTooltip() {
     67    const { device } = this.props;
     68    const { browser, os } = parseUserAgent(device.userAgent);
     69 
     70    const browserTitle = this.getBrowserOrOsTooltip(browser);
     71    const osTitle = this.getBrowserOrOsTooltip(os);
     72    let browserAndOsTitle = null;
     73    if (browserTitle && osTitle) {
     74      browserAndOsTitle = getFormatStr(
     75        "responsive.deviceDetails.browserAndOS",
     76        browserTitle,
     77        osTitle
     78      );
     79    } else if (browserTitle || osTitle) {
     80      browserAndOsTitle = browserTitle || osTitle;
     81    }
     82 
     83    const sizeTitle = getFormatStr(
     84      "responsive.deviceDetails.size",
     85      device.width,
     86      device.height
     87    );
     88 
     89    const dprTitle = getFormatStr(
     90      "responsive.deviceDetails.DPR",
     91      device.pixelRatio
     92    );
     93 
     94    const uaTitle = getFormatStr(
     95      "responsive.deviceDetails.UA",
     96      device.userAgent
     97    );
     98 
     99    const touchTitle = getFormatStr(
    100      "responsive.deviceDetails.touch",
    101      device.touch
    102    );
    103 
    104    return (
    105      `${browserAndOsTitle ? browserAndOsTitle + "\n" : ""}` +
    106      `${sizeTitle}\n` +
    107      `${dprTitle}\n` +
    108      `${uaTitle}\n` +
    109      `${touchTitle}\n`
    110    );
    111  }
    112 
    113  render() {
    114    const { children, device } = this.props;
    115    const tooltip = this.getTooltip();
    116 
    117    return dom.label(
    118      {
    119        className: "device-label",
    120        key: device.name,
    121        title: tooltip,
    122      },
    123      dom.input({
    124        className: "device-input-checkbox",
    125        name: device.name,
    126        type: "checkbox",
    127        value: device.name,
    128        checked: device.isChecked,
    129        onChange: this.onCheckboxChanged,
    130      }),
    131      DeviceInfo({ device }),
    132      children
    133    );
    134  }
    135 }
    136 
    137 module.exports = Device;