sty() {
    const { isFontFaceRuleExpanded } = this.state;

    return dom.button({
      className: "theme-twisty",
      onClick: this.onFontFaceRuleToggle,
      "aria-expanded": isFontFaceRuleExpanded,
      title: getStr("fontinspector.showFullText"),
    });
  }

  renderFontFamilyName(family) {
    if (!family) {
      return null;
    }

    return dom.div({ className: "font-family-name" }, family);
  }

  render() {
    const { font, onPreviewClick, onToggleFontHighlight } = this.props;

    const { CSSFamilyName, previewUrl, rule, ruleText } = font;

    return dom.li(
      {
        className: "font",
      },
      dom.div(
        {},
        this.renderFontFamilyName(CSSFamilyName),
        FontName({ font, onToggleFontHighlight })
      ),
      FontOrigin({ font }),
      FontPreview({ onPreviewClick, previewUrl }),
      this.renderFontCSSCode(rule, ruleText),
      FontMetadata({ font })
    );
  }
}

module.exports = Font;
PK