tor-browser

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

FontMetadata.js (4385B)

      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 const { openContentLink } = require("resource://devtools/client/shared/link");
     13 
     14 const {
     15  getStr,
     16 } = require("resource://devtools/client/inspector/fonts/utils/l10n.js");
     17 const Types = require("resource://devtools/client/inspector/fonts/types.js");
     18 
     19 const isMacOS = Services.appinfo.OS === "Darwin";
     20 const MAX_STRING_LENGTH = 250;
     21 
     22 class FontMetadata extends PureComponent {
     23  static get propTypes() {
     24    return {
     25      font: PropTypes.shape(Types.font).isRequired,
     26    };
     27  }
     28 
     29  constructor() {
     30    super();
     31 
     32    this.state = { expanded: {} };
     33  }
     34 
     35  /**
     36   * Handle displaying potentially long font properties (e.g. License).
     37   * If the string is larger than MAX_STRING_LENGTH, the string gets truncated
     38   * and we display a twisty button to reveal the full text.
     39   *
     40   * @param {string} fontProperty: The font property to render
     41   * @returns {string | Array<ReactElement>}
     42   */
     43  renderExpandableString(fontProperty) {
     44    const str = this.props.font[fontProperty];
     45    if (str.length <= MAX_STRING_LENGTH) {
     46      return str;
     47    }
     48    const expanded = !!this.state.expanded[fontProperty];
     49 
     50    const toggleExpanded = () => {
     51      this.setState({
     52        expanded: { ...this.state.expanded, [fontProperty]: !expanded },
     53      });
     54    };
     55 
     56    const title = getStr("fontinspector.showFullText");
     57 
     58    return [
     59      dom.button(
     60        {
     61          className: "theme-twisty",
     62          title,
     63          "aria-expanded": expanded,
     64          onClick: toggleExpanded,
     65        },
     66        ""
     67      ),
     68      !expanded ? str.substring(0, MAX_STRING_LENGTH) : str,
     69      !expanded
     70        ? dom.button({
     71            onClick: toggleExpanded,
     72            title,
     73            className: "font-truncated-string-expander",
     74          })
     75        : null,
     76    ];
     77  }
     78 
     79  render() {
     80    const { font } = this.props;
     81 
     82    const dlItems = [];
     83 
     84    if (font.version) {
     85      dlItems.push(
     86        dom.dt({}, getStr("fontinspector.fontVersion")),
     87        // font.version might already have the `Version` prefix, remove it.
     88        dom.dd({}, font.version.replace(/^version(\s|:)*/i, ""))
     89      );
     90    }
     91 
     92    const onClickLink = e => {
     93      e.preventDefault();
     94      openContentLink(e.target.href, {
     95        inBackground: isMacOS ? e.metaKey : e.ctrlKey,
     96        relatedToCurrent: true,
     97      });
     98    };
     99 
    100    if (font.designer) {
    101      dlItems.push(
    102        dom.dt({}, getStr("fontinspector.fontDesigner")),
    103        dom.dd(
    104          {},
    105          font.designerUrl && URL.canParse(font.designerUrl)
    106            ? dom.a(
    107                {
    108                  href: font.designerUrl,
    109                  onClick: onClickLink,
    110                },
    111                font.designer
    112              )
    113            : font.designer
    114        )
    115      );
    116    }
    117 
    118    if (font.manufacturer) {
    119      dlItems.push(
    120        dom.dt({}, getStr("fontinspector.fontManufacturer")),
    121        dom.dd({}, font.manufacturer)
    122      );
    123    }
    124 
    125    if (font.vendorUrl) {
    126      dlItems.push(
    127        dom.dt({}, getStr("fontinspector.fontVendor")),
    128        dom.dd(
    129          {},
    130          dom.a({ href: font.vendorUrl, onClick: onClickLink }, font.vendorUrl)
    131        )
    132      );
    133    }
    134 
    135    if (font.description) {
    136      dlItems.push(
    137        dom.dt({}, getStr("fontinspector.fontDescription")),
    138        dom.dd({}, this.renderExpandableString("description"))
    139      );
    140    }
    141 
    142    if (font.license) {
    143      dlItems.push(
    144        dom.dt({}, getStr("fontinspector.fontLicense")),
    145        dom.dd({}, this.renderExpandableString("license"))
    146      );
    147    }
    148 
    149    if (font.licenseUrl) {
    150      dlItems.push(
    151        dom.dt({}, getStr("fontinspector.fontLicenseInfoUrl")),
    152        dom.dd(
    153          {},
    154          dom.a(
    155            { href: font.licenseUrl, onClick: onClickLink },
    156            font.licenseUrl
    157          )
    158        )
    159      );
    160    }
    161 
    162    if (!dlItems) {
    163      return null;
    164    }
    165 
    166    return dom.dl({}, dlItems);
    167  }
    168 }
    169 
    170 module.exports = FontMetadata;