Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: b948d0181bcf2490758c678c97fac81e9392fbbe
https://github.com/WebKit/WebKit/commit/b948d0181bcf2490758c678c97fac81e9392fbbe
Author: Razvan Caliman <[email protected]>
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
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
