Bug 1464796 - (Part 3) Show metadata for all used fonts. r=pbro
MozReview-Commit-ID: cImy4JVAcu
--- 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"]),