From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- .../client/inspector/fonts/actions/font-editor.js | 70 ++ .../client/inspector/fonts/actions/font-options.js | 21 + devtools/client/inspector/fonts/actions/fonts.js | 21 + devtools/client/inspector/fonts/actions/index.js | 42 + devtools/client/inspector/fonts/actions/moz.build | 12 + devtools/client/inspector/fonts/components/Font.js | 139 +++ .../client/inspector/fonts/components/FontAxis.js | 75 ++ .../inspector/fonts/components/FontEditor.js | 357 +++++++ .../client/inspector/fonts/components/FontList.js | 82 ++ .../client/inspector/fonts/components/FontName.js | 53 + .../inspector/fonts/components/FontOrigin.js | 79 ++ .../inspector/fonts/components/FontOverview.js | 80 ++ .../inspector/fonts/components/FontPreview.js | 40 + .../inspector/fonts/components/FontPreviewInput.js | 77 ++ .../fonts/components/FontPropertyValue.js | 434 ++++++++ .../client/inspector/fonts/components/FontSize.js | 87 ++ .../client/inspector/fonts/components/FontStyle.js | 69 ++ .../inspector/fonts/components/FontWeight.js | 45 + .../client/inspector/fonts/components/FontsApp.js | 71 ++ .../inspector/fonts/components/LetterSpacing.js | 105 ++ .../inspector/fonts/components/LineHeight.js | 101 ++ .../client/inspector/fonts/components/moz.build | 24 + devtools/client/inspector/fonts/fonts.js | 1112 ++++++++++++++++++++ devtools/client/inspector/fonts/moz.build | 19 + .../client/inspector/fonts/reducers/font-editor.js | 157 +++ .../inspector/fonts/reducers/font-options.js | 27 + devtools/client/inspector/fonts/reducers/fonts.js | 28 + devtools/client/inspector/fonts/reducers/moz.build | 11 + .../client/inspector/fonts/test/OstrichLicense.txt | 41 + devtools/client/inspector/fonts/test/browser.toml | 55 + .../inspector/fonts/test/browser_fontinspector.js | 94 ++ .../fonts/test/browser_fontinspector_all-fonts.js | 82 ++ .../fonts/test/browser_fontinspector_copy-URL.js | 27 + .../test/browser_fontinspector_edit-previews.js | 70 ++ ...er_fontinspector_editor-font-size-conversion.js | 85 ++ .../test/browser_fontinspector_editor-keywords.js | 44 + ...ntinspector_editor-letter-spacing-conversion.js | 71 ++ .../test/browser_fontinspector_editor-values.js | 36 + .../test/browser_fontinspector_expand-css-code.js | 34 + .../browser_fontinspector_font-type-telemetry.js | 20 + ...rowser_fontinspector_input-element-used-font.js | 23 + .../fonts/test/browser_fontinspector_no-fonts.js | 25 + .../test/browser_fontinspector_reveal-in-page.js | 100 ++ .../fonts/test/browser_fontinspector_text-node.js | 35 + .../test/browser_fontinspector_theme-change.js | 66 ++ .../fonts/test/doc_browser_fontinspector.html | 67 ++ .../test/doc_browser_fontinspector_iframe.html | 5 + devtools/client/inspector/fonts/test/head.js | 277 +++++ .../client/inspector/fonts/test/ostrich-black.ttf | Bin 0 -> 12872 bytes .../inspector/fonts/test/ostrich-regular.ttf | Bin 0 -> 12476 bytes .../client/inspector/fonts/test/test_iframe.html | 11 + devtools/client/inspector/fonts/types.js | 109 ++ .../client/inspector/fonts/utils/font-utils.js | 111 ++ devtools/client/inspector/fonts/utils/l10n.js | 14 + devtools/client/inspector/fonts/utils/moz.build | 10 + 55 files changed, 4950 insertions(+) create mode 100644 devtools/client/inspector/fonts/actions/font-editor.js create mode 100644 devtools/client/inspector/fonts/actions/font-options.js create mode 100644 devtools/client/inspector/fonts/actions/fonts.js create mode 100644 devtools/client/inspector/fonts/actions/index.js create mode 100644 devtools/client/inspector/fonts/actions/moz.build create mode 100644 devtools/client/inspector/fonts/components/Font.js create mode 100644 devtools/client/inspector/fonts/components/FontAxis.js create mode 100644 devtools/client/inspector/fonts/components/FontEditor.js create mode 100644 devtools/client/inspector/fonts/components/FontList.js create mode 100644 devtools/client/inspector/fonts/components/FontName.js create mode 100644 devtools/client/inspector/fonts/components/FontOrigin.js create mode 100644 devtools/client/inspector/fonts/components/FontOverview.js create mode 100644 devtools/client/inspector/fonts/components/FontPreview.js create mode 100644 devtools/client/inspector/fonts/components/FontPreviewInput.js create mode 100644 devtools/client/inspector/fonts/components/FontPropertyValue.js create mode 100644 devtools/client/inspector/fonts/components/FontSize.js create mode 100644 devtools/client/inspector/fonts/components/FontStyle.js create mode 100644 devtools/client/inspector/fonts/components/FontWeight.js create mode 100644 devtools/client/inspector/fonts/components/FontsApp.js create mode 100644 devtools/client/inspector/fonts/components/LetterSpacing.js create mode 100644 devtools/client/inspector/fonts/components/LineHeight.js create mode 100644 devtools/client/inspector/fonts/components/moz.build create mode 100644 devtools/client/inspector/fonts/fonts.js create mode 100644 devtools/client/inspector/fonts/moz.build create mode 100644 devtools/client/inspector/fonts/reducers/font-editor.js create mode 100644 devtools/client/inspector/fonts/reducers/font-options.js create mode 100644 devtools/client/inspector/fonts/reducers/fonts.js create mode 100644 devtools/client/inspector/fonts/reducers/moz.build create mode 100644 devtools/client/inspector/fonts/test/OstrichLicense.txt create mode 100644 devtools/client/inspector/fonts/test/browser.toml create mode 100644 devtools/client/inspector/fonts/test/browser_fontinspector.js create mode 100644 devtools/client/inspector/fonts/test/browser_fontinspector_all-fonts.js create mode 100644 devtools/client/inspector/fonts/test/browser_fontinspector_copy-URL.js create mode 100644 devtools/client/inspector/fonts/test/browser_fontinspector_edit-previews.js create mode 100644 devtools/client/inspector/fonts/test/browser_fontinspector_editor-font-size-conversion.js create mode 100644 devtools/client/inspector/fonts/test/browser_fontinspector_editor-keywords.js create mode 100644 devtools/client/inspector/fonts/test/browser_fontinspector_editor-letter-spacing-conversion.js create mode 100644 devtools/client/inspector/fonts/test/browser_fontinspector_editor-values.js create mode 100644 devtools/client/inspector/fonts/test/browser_fontinspector_expand-css-code.js create mode 100644 devtools/client/inspector/fonts/test/browser_fontinspector_font-type-telemetry.js create mode 100644 devtools/client/inspector/fonts/test/browser_fontinspector_input-element-used-font.js create mode 100644 devtools/client/inspector/fonts/test/browser_fontinspector_no-fonts.js create mode 100644 devtools/client/inspector/fonts/test/browser_fontinspector_reveal-in-page.js create mode 100644 devtools/client/inspector/fonts/test/browser_fontinspector_text-node.js create mode 100644 devtools/client/inspector/fonts/test/browser_fontinspector_theme-change.js create mode 100644 devtools/client/inspector/fonts/test/doc_browser_fontinspector.html create mode 100644 devtools/client/inspector/fonts/test/doc_browser_fontinspector_iframe.html create mode 100644 devtools/client/inspector/fonts/test/head.js create mode 100644 devtools/client/inspector/fonts/test/ostrich-black.ttf create mode 100644 devtools/client/inspector/fonts/test/ostrich-regular.ttf create mode 100644 devtools/client/inspector/fonts/test/test_iframe.html create mode 100644 devtools/client/inspector/fonts/types.js create mode 100644 devtools/client/inspector/fonts/utils/font-utils.js create mode 100644 devtools/client/inspector/fonts/utils/l10n.js create mode 100644 devtools/client/inspector/fonts/utils/moz.build (limited to 'devtools/client/inspector/fonts') diff --git a/devtools/client/inspector/fonts/actions/font-editor.js b/devtools/client/inspector/fonts/actions/font-editor.js new file mode 100644 index 0000000000..0542604d7b --- /dev/null +++ b/devtools/client/inspector/fonts/actions/font-editor.js @@ -0,0 +1,70 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + APPLY_FONT_VARIATION_INSTANCE, + RESET_EDITOR, + SET_FONT_EDITOR_DISABLED, + UPDATE_AXIS_VALUE, + UPDATE_EDITOR_STATE, + UPDATE_PROPERTY_VALUE, + UPDATE_WARNING_MESSAGE, +} = require("resource://devtools/client/inspector/fonts/actions/index.js"); + +module.exports = { + resetFontEditor() { + return { + type: RESET_EDITOR, + }; + }, + + setEditorDisabled(disabled = false) { + return { + type: SET_FONT_EDITOR_DISABLED, + disabled, + }; + }, + + applyInstance(name, values) { + return { + type: APPLY_FONT_VARIATION_INSTANCE, + name, + values, + }; + }, + + updateAxis(axis, value) { + return { + type: UPDATE_AXIS_VALUE, + axis, + value, + }; + }, + + updateFontEditor(fonts, properties = {}, id = "") { + return { + type: UPDATE_EDITOR_STATE, + fonts, + properties, + id, + }; + }, + + updateFontProperty(property, value) { + return { + type: UPDATE_PROPERTY_VALUE, + property, + value, + }; + }, + + updateWarningMessage(warning) { + return { + type: UPDATE_WARNING_MESSAGE, + warning, + }; + }, +}; diff --git a/devtools/client/inspector/fonts/actions/font-options.js b/devtools/client/inspector/fonts/actions/font-options.js new file mode 100644 index 0000000000..8dfe101edd --- /dev/null +++ b/devtools/client/inspector/fonts/actions/font-options.js @@ -0,0 +1,21 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + UPDATE_PREVIEW_TEXT, +} = require("resource://devtools/client/inspector/fonts/actions/index.js"); + +module.exports = { + /** + * Update the preview text in the font inspector + */ + updatePreviewText(previewText) { + return { + type: UPDATE_PREVIEW_TEXT, + previewText, + }; + }, +}; diff --git a/devtools/client/inspector/fonts/actions/fonts.js b/devtools/client/inspector/fonts/actions/fonts.js new file mode 100644 index 0000000000..5682e65521 --- /dev/null +++ b/devtools/client/inspector/fonts/actions/fonts.js @@ -0,0 +1,21 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + UPDATE_FONTS, +} = require("resource://devtools/client/inspector/fonts/actions/index.js"); + +module.exports = { + /** + * Update the list of fonts in the font inspector + */ + updateFonts(allFonts) { + return { + type: UPDATE_FONTS, + allFonts, + }; + }, +}; diff --git a/devtools/client/inspector/fonts/actions/index.js b/devtools/client/inspector/fonts/actions/index.js new file mode 100644 index 0000000000..21597b8c41 --- /dev/null +++ b/devtools/client/inspector/fonts/actions/index.js @@ -0,0 +1,42 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { createEnum } = require("resource://devtools/client/shared/enum.js"); + +createEnum( + [ + // Reset font editor to intial state. + "RESET_EDITOR", + + // Set the font editor disabled state which prevents users from interacting with inputs. + "SET_FONT_EDITOR_DISABLED", + + // Apply the variation settings of a font instance. + "APPLY_FONT_VARIATION_INSTANCE", + + // Update the custom font variation instance with the current axes values. + "UPDATE_CUSTOM_INSTANCE", + + // Update the value of a variable font axis. + "UPDATE_AXIS_VALUE", + + // Update font editor with applicable fonts and user-defined CSS font properties. + "UPDATE_EDITOR_STATE", + + // Update the list of fonts. + "UPDATE_FONTS", + + // Update the preview text. + "UPDATE_PREVIEW_TEXT", + + // Update the value of a CSS font property + "UPDATE_PROPERTY_VALUE", + + // Update the warning message with the reason for not showing the font editor + "UPDATE_WARNING_MESSAGE", + ], + module.exports +); diff --git a/devtools/client/inspector/fonts/actions/moz.build b/devtools/client/inspector/fonts/actions/moz.build new file mode 100644 index 0000000000..31452af580 --- /dev/null +++ b/devtools/client/inspector/fonts/actions/moz.build @@ -0,0 +1,12 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +DevToolsModules( + "font-editor.js", + "font-options.js", + "fonts.js", + "index.js", +) diff --git a/devtools/client/inspector/fonts/components/Font.js b/devtools/client/inspector/fonts/components/Font.js new file mode 100644 index 0000000000..c761a3d2f1 --- /dev/null +++ b/devtools/client/inspector/fonts/components/Font.js @@ -0,0 +1,139 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +const FontName = createFactory( + require("resource://devtools/client/inspector/fonts/components/FontName.js") +); +const FontOrigin = createFactory( + require("resource://devtools/client/inspector/fonts/components/FontOrigin.js") +); +const FontPreview = createFactory( + require("resource://devtools/client/inspector/fonts/components/FontPreview.js") +); + +const Types = require("resource://devtools/client/inspector/fonts/types.js"); + +class Font extends PureComponent { + static get propTypes() { + return { + font: PropTypes.shape(Types.font).isRequired, + onPreviewClick: PropTypes.func, + onToggleFontHighlight: PropTypes.func.isRequired, + }; + } + + constructor(props) { + super(props); + + this.state = { + isFontFaceRuleExpanded: false, + }; + + this.onFontFaceRuleToggle = this.onFontFaceRuleToggle.bind(this); + } + + // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507 + UNSAFE_componentWillReceiveProps(newProps) { + if (this.props.font.name === newProps.font.name) { + return; + } + + this.setState({ + isFontFaceRuleExpanded: false, + }); + } + + onFontFaceRuleToggle(event) { + this.setState({ + isFontFaceRuleExpanded: !this.state.isFontFaceRuleExpanded, + }); + event.stopPropagation(); + } + + renderFontCSSCode(rule, ruleText) { + if (!rule) { + return null; + } + + // Cut the rule text in 3 parts: the selector, the declarations, the closing brace. + // This way we can collapse the declarations by default and display an expander icon + // to expand them again. + const leading = ruleText.substring(0, ruleText.indexOf("{") + 1); + const body = ruleText.substring( + ruleText.indexOf("{") + 1, + ruleText.lastIndexOf("}") + ); + const trailing = ruleText.substring(ruleText.lastIndexOf("}")); + + const { isFontFaceRuleExpanded } = this.state; + + return dom.pre( + { + className: "font-css-code", + }, + this.renderFontCSSCodeTwisty(), + leading, + isFontFaceRuleExpanded + ? body + : dom.span({ + className: "font-css-code-expander", + onClick: this.onFontFaceRuleToggle, + }), + trailing + ); + } + + renderFontCSSCodeTwisty() { + const { isFontFaceRuleExpanded } = this.state; + + const attributes = { + className: "theme-twisty", + onClick: this.onFontFaceRuleToggle, + }; + if (isFontFaceRuleExpanded) { + attributes.open = "true"; + } + + return dom.span(attributes); + } + + 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) + ); + } +} + +module.exports = Font; diff --git a/devtools/client/inspector/fonts/components/FontAxis.js b/devtools/client/inspector/fonts/components/FontAxis.js new file mode 100644 index 0000000000..f695c06b29 --- /dev/null +++ b/devtools/client/inspector/fonts/components/FontAxis.js @@ -0,0 +1,75 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +const FontPropertyValue = createFactory( + require("resource://devtools/client/inspector/fonts/components/FontPropertyValue.js") +); + +const Types = require("resource://devtools/client/inspector/fonts/types.js"); + +class FontAxis extends PureComponent { + static get propTypes() { + return { + axis: PropTypes.shape(Types.fontVariationAxis), + disabled: PropTypes.bool.isRequired, + onChange: PropTypes.func.isRequired, + value: PropTypes.number.isRequired, + }; + } + + /** + * Naive implementation to get increment step for variable font axis that ensures + * fine grained control based on range of values between min and max. + * + * @param {Number} min + * Minumum value for range. + * @param {Number} max + * Maximum value for range. + * @return {Number} + * Step value used in range input for font axis. + */ + getAxisStep(min, max) { + let step = 1; + const delta = parseInt(max, 10) - parseInt(min, 10); + + if (delta <= 1) { + step = 0.001; + } else if (delta <= 10) { + step = 0.01; + } else if (delta <= 100) { + step = 0.1; + } + + return step; + } + + render() { + const { axis, value, onChange } = this.props; + + return FontPropertyValue({ + className: "font-control-axis", + disabled: this.props.disabled, + label: axis.name, + min: axis.minValue, + minLabel: true, + max: axis.maxValue, + maxLabel: true, + name: axis.tag, + nameLabel: true, + onChange, + step: this.getAxisStep(axis.minValue, axis.maxValue), + value, + }); + } +} + +module.exports = FontAxis; diff --git a/devtools/client/inspector/fonts/components/FontEditor.js b/devtools/client/inspector/fonts/components/FontEditor.js new file mode 100644 index 0000000000..b98118c9fc --- /dev/null +++ b/devtools/client/inspector/fonts/components/FontEditor.js @@ -0,0 +1,357 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +const FontAxis = createFactory( + require("resource://devtools/client/inspector/fonts/components/FontAxis.js") +); +const FontName = createFactory( + require("resource://devtools/client/inspector/fonts/components/FontName.js") +); +const FontSize = createFactory( + require("resource://devtools/client/inspector/fonts/components/FontSize.js") +); +const FontStyle = createFactory( + require("resource://devtools/client/inspector/fonts/components/FontStyle.js") +); +const FontWeight = createFactory( + require("resource://devtools/client/inspector/fonts/components/FontWeight.js") +); +const LetterSpacing = createFactory( + require("resource://devtools/client/inspector/fonts/components/LetterSpacing.js") +); +const LineHeight = createFactory( + require("resource://devtools/client/inspector/fonts/components/LineHeight.js") +); + +const { + getStr, +} = require("resource://devtools/client/inspector/fonts/utils/l10n.js"); +const Types = require("resource://devtools/client/inspector/fonts/types.js"); + +// Maximum number of font families to be shown by default. Any others will be hidden +// under a collapsed
element with a toggle to reveal them. +const MAX_FONTS = 3; + +class FontEditor extends PureComponent { + static get propTypes() { + return { + fontEditor: PropTypes.shape(Types.fontEditor).isRequired, + onInstanceChange: PropTypes.func.isRequired, + onPropertyChange: PropTypes.func.isRequired, + onToggleFontHighlight: PropTypes.func.isRequired, + }; + } + + /** + * Get an array of FontAxis components with editing controls for of the given variable + * font axes. If no axes were given, return null. + * If an axis' value was declared on the font-variation-settings CSS property or was + * changed using the font editor, use that value, otherwise use the axis default. + * + * @param {Array} fontAxes + * Array of font axis instances + * @param {Object} editedAxes + * Object with axes and values edited by the user or defined in the CSS + * declaration for font-variation-settings. + * @return {Array|null} + */ + renderAxes(fontAxes = [], editedAxes) { + if (!fontAxes.length) { + return null; + } + + return fontAxes.map(axis => { + return FontAxis({ + key: axis.tag, + axis, + disabled: this.props.fontEditor.disabled, + onChange: this.props.onPropertyChange, + minLabel: true, + maxLabel: true, + value: editedAxes[axis.tag] || axis.defaultValue, + }); + }); + } + + /** + * Render fonts used on the selected node grouped by font-family. + * + * @param {Array} fonts + * Fonts used on selected node. + * @return {DOMNode} + */ + renderUsedFonts(fonts) { + if (!fonts.length) { + return null; + } + + // Group fonts by family name. + const fontGroups = fonts.reduce((acc, font) => { + const family = font.CSSFamilyName.toString(); + acc[family] = acc[family] || []; + acc[family].push(font); + return acc; + }, {}); + + const renderedFontGroups = Object.keys(fontGroups).map(family => { + return this.renderFontGroup(family, fontGroups[family]); + }); + + const topFontsList = renderedFontGroups.slice(0, MAX_FONTS); + const moreFontsList = renderedFontGroups.slice( + MAX_FONTS, + renderedFontGroups.length + ); + + const moreFonts = !moreFontsList.length + ? null + : dom.details( + {}, + dom.summary( + {}, + dom.span( + { className: "label-open" }, + getStr("fontinspector.showMore") + ), + dom.span( + { className: "label-close" }, + getStr("fontinspector.showLess") + ) + ), + moreFontsList + ); + + return dom.label( + { + className: "font-control font-control-used-fonts", + }, + dom.span( + { + className: "font-control-label", + }, + getStr("fontinspector.fontsUsedLabel") + ), + dom.div( + { + className: "font-control-box", + }, + topFontsList, + moreFonts + ) + ); + } + + renderFontGroup(family, fonts = []) { + const group = fonts.map(font => { + return FontName({ + key: font.name, + font, + onToggleFontHighlight: this.props.onToggleFontHighlight, + }); + }); + + return dom.div( + { + key: family, + className: "font-group", + }, + dom.div( + { + className: "font-family-name", + }, + family + ), + group + ); + } + + renderFontSize(value) { + return ( + value !== null && + FontSize({ + key: `${this.props.fontEditor.id}:font-size`, + disabled: this.props.fontEditor.disabled, + onChange: this.props.onPropertyChange, + value, + }) + ); + } + + renderLineHeight(value) { + return ( + value !== null && + LineHeight({ + key: `${this.props.fontEditor.id}:line-height`, + disabled: this.props.fontEditor.disabled, + onChange: this.props.onPropertyChange, + value, + }) + ); + } + + renderLetterSpacing(value) { + return ( + value !== null && + LetterSpacing({ + key: `${this.props.fontEditor.id}:letter-spacing`, + disabled: this.props.fontEditor.disabled, + onChange: this.props.onPropertyChange, + value, + }) + ); + } + + renderFontStyle(value) { + return ( + value && + FontStyle({ + onChange: this.props.onPropertyChange, + disabled: this.props.fontEditor.disabled, + value, + }) + ); + } + + renderFontWeight(value) { + return ( + value !== null && + FontWeight({ + onChange: this.props.onPropertyChange, + disabled: this.props.fontEditor.disabled, + value, + }) + ); + } + + /** + * Get a dropdown which allows selecting between variation instances defined by a font. + * + * @param {Array} fontInstances + * Named variation instances as provided with the font file. + * @param {Object} selectedInstance + * Object with information about the currently selected variation instance. + * Example: + * { + * name: "Custom", + * values: [] + * } + * @return {DOMNode} + */ + renderInstances(fontInstances = [], selectedInstance = {}) { + // Append a "Custom" instance entry which represents the latest manual axes changes. + const customInstance = { + name: getStr("fontinspector.customInstanceName"), + values: this.props.fontEditor.customInstanceValues, + }; + fontInstances = [...fontInstances, customInstance]; + + // Generate the