[webkit-changes] [WebKit/WebKit] b948d0: Web Inspector: Add editing capabilities for font v...

Thu Jan 5 13:04:43 PST 2023

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: b948d0181bcf2490758c678c97fac81e9392fbbe
      https://github.com/WebKit/WebKit/commit/b948d0181bcf2490758c678c97fac81e9392fbbe
  Author: Razvan Caliman <rcaliman at apple.com>
  Date:   2023-01-05 (Thu, 05 Jan 2023)

  Changed paths:
    M LayoutTests/inspector/model/font-calculate-properties-expected.txt
    M LayoutTests/inspector/model/font-calculate-properties.html
    A LayoutTests/inspector/model/font-styles-write-variation-expected.txt
    A LayoutTests/inspector/model/font-styles-write-variation.html
    M Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
    M Source/WebInspectorUI/UserInterface/Main.html
    M Source/WebInspectorUI/UserInterface/Models/Font.js
    A Source/WebInspectorUI/UserInterface/Models/FontStyles.js
    M Source/WebInspectorUI/UserInterface/Models/FontVariationAxis.js
    M Source/WebInspectorUI/UserInterface/Test.html
    M Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
    M Source/WebInspectorUI/UserInterface/Views/DetailsSectionRow.js
    M Source/WebInspectorUI/UserInterface/Views/DetailsSectionSimpleRow.js
    M Source/WebInspectorUI/UserInterface/Views/FontDetailsPanel.js
    A Source/WebInspectorUI/UserInterface/Views/FontVariationDetailsSectionRow.css
    A Source/WebInspectorUI/UserInterface/Views/FontVariationDetailsSectionRow.js
    M Source/WebInspectorUI/UserInterface/Views/Variables.css

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

Reviewed by Patrick Angle.

Variable fonts expose variation axes to control specific aspects of the font,
like thickness, stretch or slant. The Fonts sidebar panel already lists the
available variation axes for the primary font used on the selected node.

This patch augments the Fonts sidebar panel with editing controls to interactively
adjust the values for variation axes and get immediate visual feedback of the results.

There are two types of variation axes: registered and custom.

Registered axes values map to a corresponding CSS font property:
`wght` -> font-weight
`wdth` -> font-stretch
`ital` -> font-style
`slnt` -> font-style

Custom axes and their values are always written to `font-variation-settings`.

If a registered axis is declared in the value of `font-variation-settings`,
its value must always be written there instead of the corresponding font property
else it will be overriden by the value of `font-variation-settings`.

In this implementation, all edits made using the controls in the Fonts sidebar panel
are written to the selected node's inline style to ensure immediate visual feedback
at the expense of scoping the font style changes very narrowly to the selected node only.

A future iteration will improve this by identifying the appropriate CSS rules
in the cascade to write to.

* LayoutTests/inspector/model/font-calculate-properties-expected.txt:
* LayoutTests/inspector/model/font-calculate-properties.html:
* LayoutTests/inspector/model/font-styles-write-variation-expected.txt: Added.
* LayoutTests/inspector/model/font-styles-write-variation.html: Added.

Updated existing test to use the new `WI.FontStyles` model.
Added new test to validate variation axis writing logic.

* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:
* Source/WebInspectorUI/UserInterface/Main.html:
* Source/WebInspectorUI/UserInterface/Models/Font.js:
(WI.Font.prototype.variationAxis):
(WI.Font):
(WI.Font.prototype.calculateFontProperties): Deleted.
(WI.Font.prototype._calculateProperties): Deleted.
(WI.Font.prototype._calculateFontFeatureAxes): Deleted.
(WI.Font.prototype._calculateFontVariationAxes): Deleted.
(WI.Font.prototype._parseFontFeatureOrVariationSettings): Deleted.

Moved parsing-related logic from `WI.Font` to a new `WI.FontStyles` model.
This object maintains state of edits made to variation axes over time.
It handles where to write variation axis values.

* Source/WebInspectorUI/UserInterface/Models/FontStyles.js: Copied from Source/WebInspectorUI/UserInterface/Models/Font.js.
(WI.FontStyles):
(WI.FontStyles.prototype.get featuresMap):
(WI.FontStyles.prototype.get variationsMap):
(WI.FontStyles.prototype.get propertiesMap):
(WI.FontStyles.prototype.get significantChangeSinceLastRefresh):
(WI.FontStyles.fontPropertyForAxisTag):
(WI.FontStyles.axisValueToFontPropertyValue):
(WI.FontStyles.fontPropertyValueToAxisValue):
(WI.FontStyles.prototype.writeFontVariation):
(WI.FontStyles.prototype.refresh):
(WI.FontStyles.prototype._calculateFontProperties):
(WI.FontStyles.prototype._calculateProperties):
(WI.FontStyles.prototype._calculateFontFeatureAxes):
(WI.FontStyles.prototype._calculateFontVariationAxes):
(WI.FontStyles.prototype._parseFontFeatureOrVariationSettings):

Most contents of `WI.FontStyles` are copied over from `WI.Font` verbatim.

* Source/WebInspectorUI/UserInterface/Test.html:
* Source/WebInspectorUI/UserInterface/Views/DetailsSection.css:
(.details-section > .content > .group:has(.row.font-variation)):
(.details-section > .content > .group > .row:is(.simple, .font-variation):has(.warning)):
(.details-section > .content > .group > .row:is(.simple, .font-variation) > .warning):
(.details-section > .content > .group > .row.simple:has(.warning)): Deleted.
(.details-section > .content > .group > .row.simple > .warning): Deleted.
* Source/WebInspectorUI/UserInterface/Views/FontDetailsPanel.js:
(WI.FontDetailsPanel):
(WI.FontDetailsPanel.prototype.refresh):
(WI.FontDetailsPanel.prototype.detached):
(WI.FontDetailsPanel.prototype.layout):
(WI.FontDetailsPanel.prototype.initialLayout):
(WI.FontDetailsPanel.prototype._createDetailsSectionRowForProperty):
(WI.FontDetailsPanel.prototype._formatPropertyValue):
(WI.FontDetailsPanel.prototype._handleFontVariationValueChanged):
(WI.FontDetailsPanel.prototype._formatSizeValue): Deleted.
(WI.FontDetailsPanel.prototype._formatStyleValue): Deleted.
(WI.FontDetailsPanel.prototype._formatSimpleSingleValue): Deleted.
(WI.FontDetailsPanel.prototype._formatVariationValue): Deleted.
(WI.FontDetailsPanel.prototype._createVariationValueElement): Deleted.
(WI.FontDetailsPanel.prototype._hasVariationValue): Deleted.

Inside `FontDetailsPanel.layout()` the structure for editing controls is created.
Inside `FontDetailsPanel.refresh()` the values for editing controls are updated.
This ensures the UI remains in sync when changes occur in the Styles sidebar panel
or new styles apply as a result of DOM mutations, matching media queries, etc.

* Source/WebInspectorUI/UserInterface/Views/FontVariationDetailsSectionRow.css: Added.
(.details-section > .content > .group > .row.font-variation):
(.details-section > .content > .group > .row.font-variation > .label:not(:empty)):
(.details-section > .content > .group > .row.font-variation > .tag):
(.details-section > .content > .group > .row.font-variation > .value):
(.details-section > .content > .group > .row.font-variation > .variation-range):
(.details-section > .content > .group > .row.font-variation > .variation-range > input[type="range"]):
(.details-section > .content > .group > .row.font-variation > .variation-range > input[type="range"]::-webkit-slider-thumb):
(.details-section > .content > .group > .row.font-variation > .variation-range > input[type="range"]::-webkit-slider-thumb:active):
(.details-section > .content > .group > .row.font-variation > .variation-range > input[type="range"]::-webkit-slider-runnable-track):
(.details-section > .content > .group > .row.font-variation > .variation-range > input[type="range"]::before,):
(.details-section > .content > .group > .row.font-variation > .variation-range > input[type="range"]::after):
(.details-section > .content > .group > .row.font-variation > .variation-range > .variation-minvalue):
(.details-section > .content > .group > .row.font-variation > .variation-range > .variation-maxvalue):
* Source/WebInspectorUI/UserInterface/Views/FontVariationDetailsSectionRow.js: Added.
(WI.FontVariationDetailsSectionRow):
(WI.FontVariationDetailsSectionRow.prototype.get tag):
(WI.FontVariationDetailsSectionRow.prototype.set tag):
(WI.FontVariationDetailsSectionRow.prototype.get label):
(WI.FontVariationDetailsSectionRow.prototype.set label):
(WI.FontVariationDetailsSectionRow.prototype.get value):
(WI.FontVariationDetailsSectionRow.prototype.set value):
(WI.FontVariationDetailsSectionRow.prototype.get warningMessage):
(WI.FontVariationDetailsSectionRow.prototype.set warningMessage):
(WI.FontVariationDetailsSectionRow.prototype._formatAxisValueAsString):
(WI.FontVariationDetailsSectionRow.prototype._getAxisResolution):

`WI.FontVariationDetailsSectionRow` encapsulates the layout for editing controls:
the interactive slider, the track with min/max values, warnings for out-of-range values.

* Source/WebInspectorUI/UserInterface/Views/Variables.css:
(:root):
(@media (prefers-color-scheme: dark) :root):

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