[webkit-changes] [WebKit/WebKit] d0dcfc: Web Inspector: Add precise editing controls for va...

[Razvan Caliman - Apple]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: d0dcfc4c0662f638e82d05512843ff0000a66c05
      https://github.com/WebKit/WebKit/commit/d0dcfc4c0662f638e82d05512843ff0000a66c05
  Author: Razvan Caliman <rcaliman at apple.com>
  Date:   2023-03-03 (Fri, 03 Mar 2023)

  Changed paths:
    M LayoutTests/inspector/model/font-styles-conversion.html
    M Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
    M Source/WebInspectorUI/UserInterface/Models/FontStyles.js
    M Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
    M Source/WebInspectorUI/UserInterface/Views/FontDetailsPanel.js
    M Source/WebInspectorUI/UserInterface/Views/FontVariationDetailsSectionRow.css
    M Source/WebInspectorUI/UserInterface/Views/FontVariationDetailsSectionRow.js
    M Source/WebInspectorUI/UserInterface/Views/Variables.css

  Log Message:
  -----------
  Web Inspector: Add precise editing controls for variation axes in Fonts sidebar panel
https://bugs.webkit.org/show_bug.cgi?id=253199

Reviewed by Patrick Angle.

Adds input fields to the Fonts siderbar panel to allow editing variation axis values.

HTML number input fields accept and display any character, so we restrict keyboard
input to just the ones that make up number values supported as axis values.

The warning for an invalid input is delayed while a user is typing to allow them to finish.

An input can accept and display and invalid value. It will be marked with a warning.
However, the value written to the stylesheet will be either:
- the default axis value when the input value is invalid;
- the clamped min/max value when the input value is out of bounds;

When focus is moved away from an invalid input,
it will update to reflect the actual value used.

Holding the ArrowUp/ArrowDown keys increments/decrements the value within
the bounds of the min/max range with the corresponding step for that axis.

Holding the Shift key will increase the step by an order of magnitude.
Holding the Alt/Option key will decrease the step by an order of magnitude.

* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:
* Source/WebInspectorUI/UserInterface/Models/FontStyles.js:
Ensure values written to CSS properties are strings.

(WI.FontStyles.axisValueToFontPropertyValue):
* Source/WebInspectorUI/UserInterface/Views/FontDetailsPanel.js:
(WI.FontDetailsPanel.prototype.update):
* Source/WebInspectorUI/UserInterface/Views/FontVariationDetailsSectionRow.css:
(.details-section > .content > .group > .row.font-variation > input[type="number"]):
(.details-section > .content > .group > .row.font-variation:has(.warning) > input[type="number"]):
(.details-section > .content > .group > .row.font-variation > input[type="number"]::-webkit-inner-spin-button):
(.details-section > .content > .group > .row.font-variation > .value): Deleted.
(.details-section > .content > .group > .row.font-variation:has(.warning) > .value): Deleted.
* Source/WebInspectorUI/UserInterface/Views/FontVariationDetailsSectionRow.js:
(WI.FontVariationDetailsSectionRow):
(WI.FontVariationDetailsSectionRow.prototype.set value):
(WI.FontVariationDetailsSectionRow.prototype._getAxisResolution):
(WI.FontVariationDetailsSectionRow.prototype._showValidity):
(WI.FontVariationDetailsSectionRow.prototype._handleValueBlurEvent):
(WI.FontVariationDetailsSectionRow.prototype._handleValueInputEvent):
(WI.FontVariationDetailsSectionRow.prototype._handleValueKeydownEvent):

Canonical link: https://commits.webkit.org/261162@main