Bug 1464796 - (Part 3) Show metadata for all used fonts. r=pbro draft
authorRazvan Caliman <rcaliman@mozilla.com>
Wed, 06 Jun 2018 14:34:19 +0200
changeset 808652 df376cd399136737e362c49b7beb6f7ac386b594
parent 808651 ba6d8d38cd897df2a4daf6deb5dcac13f4af3488
child 808653 49f604534f4993f6dcede7413aef54e8a0548b2f
push id113452
push userbmo:rcaliman@mozilla.com
push dateWed, 20 Jun 2018 09:12:20 +0000
reviewerspbro
bugs1464796
milestone62.0a1
Bug 1464796 - (Part 3) Show metadata for all used fonts. r=pbro MozReview-Commit-ID: cImy4JVAcu
devtools/client/inspector/fonts/components/FontEditor.js
--- a/devtools/client/inspector/fonts/components/FontEditor.js
+++ b/devtools/client/inspector/fonts/components/FontEditor.js
@@ -74,33 +74,43 @@ class FontEditor extends PureComponent {
         step: this.getAxisStep(axis.minValue, axis.maxValue),
         label: axis.name,
         name: axis.tag,
         onChange: this.props.onPropertyChange,
         unit: null
       });
     });
   }
-
-  renderFontFamily(font, onToggleFontHighlight) {
+  /**
+   * Render font family, font name, and metadata for all fonts used on selected node.
+   *
+   * @param {Array} fonts
+   *        Fonts used on selected node.
+   * @param {Function} onToggleFontHighlight
+   *        Callback to trigger in-context highlighting of text that uses a font.
+   * @return {DOMNode}
+   */
+  renderFontFamily(fonts, onToggleFontHighlight) {
     return dom.label(
       {
         className: "font-control font-control-family",
       },
       dom.span(
         {
           className: "font-control-label",
         },
         getStr("fontinspector.fontFamilyLabel")
       ),
       dom.div(
         {
           className: "font-control-box",
         },
-        FontMeta({ font, onToggleFontHighlight })
+        fonts.map(font => {
+          return FontMeta({ font, onToggleFontHighlight });
+        })
       )
     );
   }
 
   renderFontSize(value) {
     return FontSize({
       onChange: this.props.onPropertyChange,
       value,
@@ -193,17 +203,17 @@ class FontEditor extends PureComponent {
     });
     const hasWeightAxis = hasFontAxes && font.variationAxes.find(axis => {
       return axis.tag === "wght";
     });
 
     return dom.div(
       {},
       // Always render UI for font family, format and font file URL.
-      this.renderFontFamily(font, onToggleFontHighlight),
+      this.renderFontFamily(fonts, onToggleFontHighlight),
       // Render UI for font variation instances if they are defined.
       hasFontInstances && this.renderInstances(font.variationInstances, instance),
       // Always render UI for font size.
       this.renderFontSize(properties["font-size"]),
       // Render UI for font weight if no "wght" registered axis is defined.
       !hasWeightAxis && this.renderFontWeight(properties["font-weight"]),
       // Render UI for font style if no "slnt" or "ital" registered axis is defined.
       !hasSlantOrItalicAxis && this.renderFontStyle(properties["font-style"]),