FontSize.js (2402B)
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 FontSize 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 const value = parseFloat(this.props.value); 41 const unit = getUnitFromValue(this.props.value); 42 let max; 43 switch (unit) { 44 case "em": 45 case "rem": 46 max = 4; 47 break; 48 case "vh": 49 case "vw": 50 case "vmin": 51 case "vmax": 52 max = 10; 53 break; 54 case "%": 55 max = 200; 56 break; 57 default: 58 max = 72; 59 break; 60 } 61 62 // Allow the upper bound to increase so it accomodates the out-of-bounds value. 63 max = Math.max(max, value); 64 // Ensure we store the max value ever reached for this unit type. This will be the 65 // max value of the input and slider. Without this memoization, the value and slider 66 // thumb get clamped at the upper bound while decrementing an out-of-bounds value. 67 this.historicMax[unit] = this.historicMax[unit] 68 ? Math.max(this.historicMax[unit], max) 69 : max; 70 71 return FontPropertyValue({ 72 allowOverflow: true, 73 disabled: this.props.disabled, 74 label: getStr("fontinspector.fontSizeLabel"), 75 min: 0, 76 max: this.historicMax[unit], 77 name: "font-size", 78 onChange: this.props.onChange, 79 step: getStepForUnit(unit), 80 unit, 81 unitOptions: ["em", "rem", "%", "px", "pt", "vh", "vw"], 82 value, 83 }); 84 } 85 } 86 87 module.exports = FontSize;