LineHeight.js (3314B)
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 createFactory, 9 PureComponent, 10 } = require("resource://devtools/client/shared/vendor/react.mjs"); 11 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs"); 12 13 const FontPropertyValue = createFactory( 14 require("resource://devtools/client/inspector/fonts/components/FontPropertyValue.js") 15 ); 16 17 const { 18 getStr, 19 } = require("resource://devtools/client/inspector/fonts/utils/l10n.js"); 20 const { 21 getUnitFromValue, 22 getStepForUnit, 23 } = require("resource://devtools/client/inspector/fonts/utils/font-utils.js"); 24 25 class LineHeight extends PureComponent { 26 static get propTypes() { 27 return { 28 disabled: PropTypes.bool.isRequired, 29 onChange: PropTypes.func.isRequired, 30 value: PropTypes.string.isRequired, 31 }; 32 } 33 34 constructor(props) { 35 super(props); 36 this.historicMax = {}; 37 } 38 39 render() { 40 // When the initial value of "line-height" is "normal", the parsed value 41 // is not a number (NaN). Guard by setting the default value to 1.2. 42 // This will be the starting point for changing the value by dragging the slider. 43 // @see https://searchfox.org/mozilla-central/rev/1133b6716d9a8131c09754f3f29288484896b8b6/layout/generic/ReflowInput.cpp#2786 44 const isKeywordValue = this.props.value === "normal"; 45 const value = isKeywordValue ? 1.2 : parseFloat(this.props.value); 46 47 // When values for line-height are be unitless, getUnitFromValue() returns null. 48 // In that case, set the unit to an empty string for special treatment in conversion. 49 const unit = getUnitFromValue(this.props.value) || ""; 50 let max; 51 switch (unit) { 52 case "": 53 case "em": 54 case "rem": 55 max = 2; 56 break; 57 case "vh": 58 case "vw": 59 case "vmin": 60 case "vmax": 61 max = 15; 62 break; 63 case "%": 64 max = 200; 65 break; 66 default: 67 max = 108; 68 break; 69 } 70 71 // Allow the upper bound to increase so it accomodates the out-of-bounds value. 72 max = Math.max(max, value); 73 // Ensure we store the max value ever reached for this unit type. This will be the 74 // max value of the input and slider. Without this memoization, the value and slider 75 // thumb get clamped at the upper bound while decrementing an out-of-bounds value. 76 this.historicMax[unit] = this.historicMax[unit] 77 ? Math.max(this.historicMax[unit], max) 78 : max; 79 80 return FontPropertyValue({ 81 allowOverflow: true, 82 disabled: this.props.disabled, 83 label: getStr("fontinspector.lineHeightLabelCapitalized"), 84 min: 0, 85 max: this.historicMax[unit], 86 name: "line-height", 87 onChange: this.props.onChange, 88 step: getStepForUnit(unit), 89 // Show the value input and unit only when the value is not a keyword. 90 showInput: !isKeywordValue, 91 showUnit: !isKeywordValue, 92 unit, 93 unitOptions: ["", "em", "%", "px"], 94 value, 95 // Show the value as a read-only label if it's a keyword. 96 valueLabel: isKeywordValue ? this.props.value : null, 97 }); 98 } 99 } 100 101 module.exports = LineHeight;