tor-browser

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

DevicePixelRatioMenu.js (2772B)

      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  PureComponent,
      9 } = require("resource://devtools/client/shared/vendor/react.mjs");
     10 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     11 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     12 
     13 const {
     14  getStr,
     15  getFormatStr,
     16 } = require("resource://devtools/client/responsive/utils/l10n.js");
     17 const Types = require("resource://devtools/client/responsive/types.js");
     18 
     19 loader.lazyRequireGetter(
     20  this,
     21  "showMenu",
     22  "resource://devtools/client/shared/components/menu/utils.js",
     23  true
     24 );
     25 
     26 const PIXEL_RATIO_PRESET = [1, 2, 3];
     27 
     28 class DevicePixelRatioMenu extends PureComponent {
     29  static get propTypes() {
     30    return {
     31      devices: PropTypes.shape(Types.devices).isRequired,
     32      displayPixelRatio: PropTypes.number.isRequired,
     33      onChangePixelRatio: PropTypes.func.isRequired,
     34      selectedDevice: PropTypes.string.isRequired,
     35      selectedPixelRatio: PropTypes.number.isRequired,
     36    };
     37  }
     38 
     39  constructor(props) {
     40    super(props);
     41    this.onShowDevicePixelMenu = this.onShowDevicePixelMenu.bind(this);
     42  }
     43 
     44  onShowDevicePixelMenu(event) {
     45    const { displayPixelRatio, onChangePixelRatio, selectedPixelRatio } =
     46      this.props;
     47 
     48    const menuItems = PIXEL_RATIO_PRESET.map(value => {
     49      return {
     50        label: getFormatStr("responsive.devicePixelRatioOption", value),
     51        type: "checkbox",
     52        checked:
     53          selectedPixelRatio > 0
     54            ? selectedPixelRatio === value
     55            : displayPixelRatio === value,
     56        click: () => onChangePixelRatio(+value),
     57      };
     58    });
     59 
     60    showMenu(menuItems, {
     61      button: event.target,
     62    });
     63  }
     64 
     65  render() {
     66    const { devices, displayPixelRatio, selectedDevice, selectedPixelRatio } =
     67      this.props;
     68 
     69    const isDisabled =
     70      devices.listState !== Types.loadableState.LOADED || selectedDevice !== "";
     71 
     72    let title;
     73    if (isDisabled) {
     74      title = getFormatStr("responsive.devicePixelRatio.auto", selectedDevice);
     75    } else {
     76      title = getStr("responsive.changeDevicePixelRatio");
     77    }
     78 
     79    return dom.button(
     80      {
     81        id: "device-pixel-ratio-menu",
     82        className: "devtools-button devtools-dropdown-button",
     83        disabled: isDisabled,
     84        title,
     85        onClick: this.onShowDevicePixelMenu,
     86      },
     87      dom.span(
     88        { className: "title" },
     89        getFormatStr(
     90          "responsive.devicePixelRatioOption",
     91          selectedPixelRatio || displayPixelRatio
     92        )
     93      )
     94    );
     95  }
     96 }
     97 
     98 module.exports = DevicePixelRatioMenu;