[Colors] Create dedicated classes for HSL and HWB colors
This allows us to keep track of clipping/powerless components in these
spaces as well. Before the info was silently dropped when converting to RGB.
Drive-by: Fix a typo and introduce ColorXD utility types to denote "raw" multichannel colors.
Bug: 1073895
Change-Id: Ifbddd0f2ec8c9fafdc3e08429552030f228ddece
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4190009
Commit-Queue: Philip Pfaffe <pfaffe@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Ergün Erdoğmuş <ergunsh@chromium.org>
Auto-Submit: Philip Pfaffe <pfaffe@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
diff --git a/inspector_overlay/highlight_common.ts b/inspector_overlay/highlight_common.ts
index 29daa82..8bb46d4 100644
--- a/inspector_overlay/highlight_common.ts
+++ b/inspector_overlay/highlight_common.ts
@@ -28,7 +28,12 @@
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
// THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-import {rgbaToHsla, rgbaToHwba} from '../front_end/core/common/ColorUtils.js'; // eslint-disable-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es_modules_import
+import {
+ rgbaToHsla,
+ rgbaToHwba,
+ type Color4D,
+} from '../front_end/core/common/ColorUtils.js';
import {type Bounds, type PathCommands, type Quad} from './common.js';
@@ -254,11 +259,11 @@
return buildPath(commands, bounds, emulationScaleFactor);
}
-export function parseHexa(hexa: string): Array<number> {
- return (hexa.match(/#(\w\w)(\w\w)(\w\w)(\w\w)/) || []).slice(1).map(c => parseInt(c, 16) / 255);
+export function parseHexa(hexa: string): Color4D {
+ return (hexa.match(/#(\w\w)(\w\w)(\w\w)(\w\w)/) || []).slice(1).map(c => parseInt(c, 16) / 255) as Color4D;
}
-export function formatRgba(rgba: number[], colorFormat: 'rgb'|'hsl'|'hwb'): string {
+export function formatRgba(rgba: Color4D, colorFormat: 'rgb'|'hsl'|'hwb'): string {
if (colorFormat === 'rgb') {
const [r, g, b, a] = rgba;
// rgb(r g b [ / a])
@@ -270,14 +275,14 @@
const [h, s, l, a] = rgbaToHsla(rgba);
// hsl(hdeg s l [ / a])
return `hsl(${Math.round(h * 360)}deg ${Math.round(s * 100)} ${Math.round(l * 100)}${
- a === 1 ? '' : ' / ' + Math.round(a * 100) / 100})`;
+ a === 1 ? '' : ' / ' + Math.round((a ?? 1) * 100) / 100})`;
}
if (colorFormat === 'hwb') {
const [h, w, b, a] = rgbaToHwba(rgba);
// hwb(hdeg w b [ / a])
return `hwb(${Math.round(h * 360)}deg ${Math.round(w * 100)} ${Math.round(b * 100)}${
- a === 1 ? '' : ' / ' + Math.round(a * 100) / 100})`;
+ a === 1 ? '' : ' / ' + Math.round((a ?? 1) * 100) / 100})`;
}
throw new Error('NOT_REACHED');
diff --git a/inspector_overlay/tool_highlight.ts b/inspector_overlay/tool_highlight.ts
index d6c0936..7dcfa56 100644
--- a/inspector_overlay/tool_highlight.ts
+++ b/inspector_overlay/tool_highlight.ts
@@ -572,8 +572,8 @@
}
function addContrastRow(fgColor: ColorRgba, contrast: ContrastInfo) {
- const parsedFgColor = fgColor.slice();
- const parsedBgColor = contrast.backgroundColorUnclampedRgba.slice();
+ const parsedFgColor = fgColor.slice() as ColorRgba;
+ const parsedBgColor = contrast.backgroundColorUnclampedRgba.slice() as ColorRgba;
// Merge text opacity into the alpha channel of the color.
parsedFgColor[3] *= contrast.textOpacity;
const valueElement = addRow('Contrast', '', 'element-info-value-contrast');