Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: 27d35b7ad29b94423461b00135cd606693711c41
https://github.com/WebKit/WebKit/commit/27d35b7ad29b94423461b00135cd606693711c41
Author: Devin Rousso <[email protected]>
Date: 2026-03-16 (Mon, 16 Mar 2026)
Changed paths:
M Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
M Source/WebInspectorUI/UserInterface/Views/ColorPicker.css
M Source/WebInspectorUI/UserInterface/Views/ColorPicker.js
Log Message:
-----------
Web Inspector: improve UX of color picker value component inputs
https://bugs.webkit.org/show_bug.cgi?id=309963
Reviewed by BJ Burg.
- drop the `%` labels after the `<input>` for `S` and `L` as that consumes a
lot of space and is often smushed into the subsequent text (i.e. not clear what
it refers to)
- hide the up/down arrows inside each `<input>` since they take up space and
are such small targets to click (and there's already keyboard shortcuts for the
same thing)
- decrease the padding inside and around each `<input>` so that there's more
space for the number value
- ensure that when switching from a non-alpha format to an alpha format (e.g.
HSL to HSLA, RGB to RGBA, etc.) that the alpha `<input>` at least shows `1`
* Source/WebInspectorUI/UserInterface/Views/ColorPicker.js:
(WI.ColorPicker.prototype._needsAlphaColorInput): Added.
(WI.ColorPicker.prototype._createColorInputsIfNeeded):
(WI.ColorPicker.prototype._showColorComponentInputs):
* Source/WebInspectorUI/UserInterface/Views/ColorPicker.css:
(.color-picker > .color-inputs-wrapper > .color-inputs > label): Renamed from
`.color-picker > .color-inputs-wrapper > .color-inputs > div`.
(.color-picker > .color-inputs-wrapper > .color-inputs > label + label): Added.
(.color-picker > .color-inputs-wrapper > .color-inputs > label > input):
Renamed from `.color-picker > .color-inputs-wrapper > .color-inputs input`.
(.color-picker > .color-inputs-wrapper > .color-inputs > label >
input::-webkit-inner-spin-button): Added.
* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:
Canonical link: https://commits.webkit.org/309367@main
To unsubscribe from these emails, change your notification settings at
https://github.com/WebKit/WebKit/settings/notifications
