Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-21 09:15:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Backed out changeset e78a1f8b81db (bug 1536237) for ES lint failure in /builds/worker/checkouts/gecko/devtools/client/inspector/fonts/fonts.js CLOSED TREE

Browse Source
This commit is contained in:
shindli 2019-04-01 14:38:48 +03:00
parent 0205efa9c3
commit ebbe440e94
8 changed files with 11 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
devtools/client/inspector/fonts/components/FontEditor.js
View File

@ -13,7 +13,6 @@ const FontName = createFactory(require("./FontName"));
const FontSize = createFactory(require("./FontSize"));
const FontStyle = createFactory(require("./FontStyle"));
const FontWeight = createFactory(require("./FontWeight"));
const LetterSpacing = createFactory(require("./LetterSpacing"));
const LineHeight = createFactory(require("./LineHeight"));
const { getStr } = require("../utils/l10n");
@ -162,15 +161,6 @@ class FontEditor extends PureComponent {
});
}
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,
@ -293,8 +283,6 @@ class FontEditor extends PureComponent {
this.renderFontSize(properties["font-size"]),
// Always render UI for line height.
this.renderLineHeight(properties["line-height"]),
// Always render UI for letter spacing.
this.renderLetterSpacing(properties["letter-spacing"]),
// 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.

36
devtools/client/inspector/fonts/components/FontPropertyValue.js
View File

@ -19,8 +19,6 @@ class FontPropertyValue extends PureComponent {
return {
// Whether to allow input values above the value defined by the `max` prop.
allowOverflow: PropTypes.bool,
// Whether to allow input values below the value defined by the `min` prop.
allowUnderflow: PropTypes.bool,
className: PropTypes.string,
defaultValue: PropTypes.number,
disabled: PropTypes.bool.isRequired,
@ -36,28 +34,20 @@ class FontPropertyValue extends PureComponent {
nameLabel: PropTypes.bool,
onChange: PropTypes.func.isRequired,
step: PropTypes.number,
// Whether to show the value input field.
showInput: PropTypes.bool,
// Whether to show the unit select dropdown.
showUnit: PropTypes.bool,
unit: PropTypes.string,
unitOptions: PropTypes.array,
value: PropTypes.number,
valueLabel: PropTypes.string,
};
}
static get defaultProps() {
return {
allowOverflow: false,
allowUnderflow: false,
className: "",
minLabel: false,
maxLabel: false,
nameLabel: false,
step: 1,
showInput: true,
showUnit: true,
unit: null,
unitOptions: [],
};
@ -103,7 +93,7 @@ class FontPropertyValue extends PureComponent {
/**
* Check if the given value is valid according to the constraints of this component.
* Ensure it is a number and that it does not go outside the min/max limits, unless
* allowed by the `allowOverflow` and `allowUnderflow` props.
* allowed by the `allowOverflow` props flag.
*
* @param {Number} value
* Numeric value
@ -111,19 +101,18 @@ class FontPropertyValue extends PureComponent {
* Whether the value conforms to the components contraints.
*/
isValueValid(value) {
const { allowOverflow, allowUnderflow, min, max } = this.props;
const { allowOverflow, min, max } = this.props;
if (typeof value !== "number" || isNaN(value)) {
return false;
}
// Ensure it does not go below minimum value, unless underflow is allowed.
if (min !== undefined && value < min && !allowUnderflow) {
if (min !== undefined && value < min) {
return false;
}
// Ensure it does not go over maximum value, unless overflow is allowed.
if (max !== undefined && value > max && !allowOverflow) {
// Ensure it does not exceed maximum value, unless overflow is allowed.
if (max !== undefined && value > this.props.max && !allowOverflow) {
return false;
}
@ -339,14 +328,6 @@ class FontPropertyValue extends PureComponent {
return createElement(Fragment, null, labelEl, detailEl);
}
renderValueLabel() {
if (!this.props.valueLabel) {
return null;
}
return dom.div({ className: "font-value-label" }, this.props.valueLabel);
}
render() {
// Guard against bad axis data.
if (this.props.min === this.props.max) {
@ -385,8 +366,6 @@ class FontPropertyValue extends PureComponent {
const input = dom.input(
{
...defaults,
// Remove lower limit from number input if it is allowed to underflow.
min: this.props.allowUnderflow ? null : this.props.min,
// Remove upper limit from number input if it is allowed to overflow.
max: this.props.allowOverflow ? null : this.props.max,
name: this.props.name,
@ -420,9 +399,8 @@ class FontPropertyValue extends PureComponent {
},
range
),
this.renderValueLabel(),
this.props.showInput && input,
this.props.showUnit && this.renderUnitSelect()
input,
this.renderUnitSelect()
)
);
}

96
devtools/client/inspector/fonts/components/LetterSpacing.js
View File

@ -1,96 +0,0 @@
/* 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("devtools/client/shared/vendor/react");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const FontPropertyValue = createFactory(require("./FontPropertyValue"));
const { getStr } = require("../utils/l10n");
const { getUnitFromValue, getStepForUnit } = require("../utils/font-utils");
class LineHeight extends PureComponent {
static get propTypes() {
return {
disabled: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
value: PropTypes.string.isRequired,
};
}
constructor(props) {
super(props);
// Local state for min/max bounds indexed by unit to allow user input that
// goes out-of-bounds while still providing a meaningful default range. The indexing
// by unit is needed to account for unit conversion (ex: em to px) where the operation
// may result in out-of-bounds values. Avoiding React's state and setState() because
// `value` is a prop coming from the Redux store while min/max are local. Reconciling
// value/unit changes is needlessly complicated and adds unnecessary re-renders.
this.historicMin = {};
this.historicMax = {};
}
getDefaultMinMax(unit) {
let min;
let max;
switch (unit) {
case "px":
min = -10;
max = 10;
break;
default:
min = -0.2;
max = 0.6;
break;
}
return { min, max };
}
render() {
// For a unitless or a NaN value, default unit to "em".
const unit = getUnitFromValue(this.props.value) || "em";
// When the initial value of "letter-spacing" is "normal", the parsed value
// is not a number (NaN). Guard by setting the default value to 0.
let value = parseFloat(this.props.value);
const hasKeywordValue = isNaN(value);
value = isNaN(value) ? 0 : value;
let { min, max } = this.getDefaultMinMax(unit);
min = Math.min(min, value);
max = Math.max(max, value);
// Allow lower and upper bounds to move to accomodate the incoming value.
this.historicMin[unit] = this.historicMin[unit]
? Math.min(this.historicMin[unit], min)
: min;
this.historicMax[unit] = this.historicMax[unit]
? Math.max(this.historicMax[unit], max)
: max;
return FontPropertyValue({
allowOverflow: true,
allowUnderflow: true,
disabled: this.props.disabled,
label: getStr("fontinspector.letterSpacingLabel"),
min: this.historicMin[unit],
max: this.historicMax[unit],
name: "letter-spacing",
onChange: this.props.onChange,
// Increase the increment granularity because letter spacing is very sensitive.
step: getStepForUnit(unit) / 100,
// Show the value input and unit only when the value is not a keyword.
showInput: !hasKeywordValue,
showUnit: !hasKeywordValue,
unit,
unitOptions: ["em", "rem", "px"],
value,
// Show the value as a read-only label if it's a keyword.
valueLabel: hasKeywordValue ? this.props.value : null,
});
}
}
module.exports = LineHeight;

1
devtools/client/inspector/fonts/components/moz.build
View File

@ -19,6 +19,5 @@ DevToolsModules(
'FontSize.js',
'FontStyle.js',
'FontWeight.js',
'LetterSpacing.js',
'LineHeight.js',
)

14
devtools/client/inspector/fonts/fonts.js
View File

@ -42,7 +42,6 @@ const FONT_PROPERTIES = [
"font-style",
"font-variation-settings",
"font-weight",
"letter-spacing",
"line-height",
];
const REGISTERED_AXES_TO_FONT_PROPERTIES = {
@ -169,9 +168,7 @@ class FontInspector {
// NodeFront instance of selected/target element.
const node = this.node;
// Reference node based on which to convert relative sizes like "em" and "%".
const referenceNode = (property === "line-height" || property === "letter-spacing")
? node
: node.parentNode();
const referenceNode = (property === "line-height") ? node : node.parentNode();
// Default output value to input value for a 1-to-1 conversion as a guard against
// unrecognized CSS units. It will not be correct, but it will also not break.
let out = value;
@ -281,15 +278,12 @@ class FontInspector {
out = 0;
}
// Return values limited to 3 decimals when:
// - the unit is converted from pixels to something else
// - the value is for letter spacing, regardless of unit (allow sub-pixel precision)
if (fromPx || property === "letter-spacing") {
// Return rounded pixel values. Limit other values to 3 decimals.
if (fromPx) {
// Round values like 1.000 to 1
return out === Math.round(out) ? Math.round(out) : out.toFixed(3);
}
// Round pixel values.
return Math.round(out);
}
@ -366,7 +360,6 @@ class FontInspector {
* - font-size
* - font-weight
* - font-stretch
* - letter-spacing
* - line-height
*
* This list is used to filter out values when reading CSS font properties from rules.
@ -379,7 +372,6 @@ class FontInspector {
"font-size",
"font-weight",
"font-stretch",
"letter-spacing",
"line-height",
].reduce((acc, property) => {
return acc.concat(this.cssProperties.getValues(property));

2
devtools/client/inspector/fonts/utils/font-utils.js
View File

@ -43,7 +43,7 @@ module.exports = {
* CSS unit type, like "px", "em", "rem", etc or null.
*/
getUnitFromValue(value) {
if (typeof value !== "string" || isNaN(parseFloat(value))) {
if (typeof value !== "string") {
return null;
}

4
devtools/client/locales/en-US/font-inspector.properties
View File

@ -49,10 +49,6 @@ fontinspector.showMore=Show more
# LOCALIZATION NOTE (fontinspector.showLess): Label for an expanded list of fonts.
fontinspector.showLess=Show less
# LOCALIZATION NOTE (fontinspector.letterSpacingLabel): Label for the UI to change the
# letter spacing in the font editor.
fontinspector.letterSpacingLabel=Spacing
# LOCALIZATION NOTE (fontinspector.lineHeightLabelCapitalized): Label for the UI to change the line height in the font editor.
fontinspector.lineHeightLabelCapitalized=Line Height

8
devtools/client/themes/fonts.css
View File

@ -285,14 +285,6 @@
border-right: none;
}
.font-value-label {
/* Combined width of .font-value-input and .font-value-select */
width: calc(60px + 3.8em);
margin-left: 10px;
padding-top: 2px;
padding-bottom: 4px;
}
/* Mock separator because inputs don't have distinguishable borders in dark theme */
.theme-dark .font-value-input + .font-value-select {
margin-left: 2px;