1756553 - Avoid float values when incrementing/decrementing CSS properties which expect Integer values

Status: NEW

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[Julian Descottes [:jdescottes]]

Discussed during the review for Bug 1752780, we could improve the logic to increment CSS property values in order to avoid using "small" increments (+/- 0.1) if those lead to invalid property values. This is typically the case for properties which accept only integer values (eg grid-column-start)

For instance:

• select an element with a grid-column-start property
• set the property value to 1
• increment it with alt+UP

ER: the property should have the next valid value: 2
AR: the property has the value 1.1, which is not valid for grid-column-start

We could implement this with a similar logic as what we do for units.
Assuming we want to apply a new value value1 for a property prop:

• apply value1 to prop on a hidden element
• check if the new value is valid for prop (ie gets returned when calling style.getProperty)
• if it is valid, accept value1 and return
• if not, try again with value2 = value1 + 1 (or value1 - 1 if decrementing)
• if value2 is valid, accept value2 and return
• if not, accept value1 and return (we couldn't guess a better value so we use the initial one)