tor-browser

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

FontOverview.js (2155B)

      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 Accordion = createFactory(
     15  require("resource://devtools/client/shared/components/Accordion.js")
     16 );
     17 const FontList = createFactory(
     18  require("resource://devtools/client/inspector/fonts/components/FontList.js")
     19 );
     20 
     21 const {
     22  getStr,
     23 } = require("resource://devtools/client/inspector/fonts/utils/l10n.js");
     24 const Types = require("resource://devtools/client/inspector/fonts/types.js");
     25 
     26 class FontOverview extends PureComponent {
     27  static get propTypes() {
     28    return {
     29      fontData: PropTypes.shape(Types.fontData).isRequired,
     30      fontOptions: PropTypes.shape(Types.fontOptions).isRequired,
     31      onPreviewTextChange: PropTypes.func.isRequired,
     32      onToggleFontHighlight: PropTypes.func.isRequired,
     33    };
     34  }
     35 
     36  constructor(props) {
     37    super(props);
     38    this.onToggleFontHighlightGlobal = (font, show) => {
     39      this.props.onToggleFontHighlight(font, show, false);
     40    };
     41  }
     42 
     43  renderFonts() {
     44    const { fontData, fontOptions, onPreviewTextChange } = this.props;
     45 
     46    const fonts = fontData.allFonts;
     47 
     48    if (!fonts.length) {
     49      return null;
     50    }
     51 
     52    return Accordion({
     53      items: [
     54        {
     55          header: getStr("fontinspector.allFontsOnPageHeader"),
     56          id: "font-list-details",
     57          component: FontList,
     58          componentProps: {
     59            fontOptions,
     60            fonts,
     61            onPreviewTextChange,
     62            onToggleFontHighlight: this.onToggleFontHighlightGlobal,
     63          },
     64          opened: false,
     65        },
     66      ],
     67    });
     68  }
     69 
     70  render() {
     71    return dom.div(
     72      {
     73        id: "font-container",
     74      },
     75      this.renderFonts()
     76    );
     77  }
     78 }
     79 
     80 module.exports = FontOverview;