Better handle near hueless colors.

Bug:489704048
Change-Id: I61443c2bf3a39149d8336f922a70d7039e396abc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7750005
Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>
Commit-Queue: Yulun Zeng <yulunz@chromium.org>

Author: yulunz

front_end/core/common/Color.ts

@@ -684,6 +684,7 @@ export interface Color {
 
 const EPSILON = 0.01;
 const WIDE_RANGE_EPSILON = 1;  // For comparisons on channels with a wider range than [0,1]
+const STRICT_EPSILON = 1e-4;
 function equals(a: number[], b: number[], accuracy?: number): boolean;
 function equals(a: number|null, b: number|null, accuracy?: number): boolean;
 function equals(a: number|null|number[], b: number|null|number[], accuracy = EPSILON): boolean {
@@ -994,7 +995,7 @@ export class LCH implements Color {
   // See "powerless" component definitions in
   // https://www.w3.org/TR/css-color-4/#specifying-lab-lch
   isHuePowerless(): boolean {
-    return equals(this.c, 0);
+    return equals(this.c, 0, STRICT_EPSILON);
   }
   static fromSpec(spec: ColorParameterSpec, text: string): LCH|null {
     const L = parsePercentage(spec[0], [0, 100]) ?? parseNumber(spec[0]);
@@ -1592,7 +1593,7 @@ export class HSL implements Color {
     this.l = clamp(l, {min: 0, max: 1});
     s = equals(this.l, 0) || equals(this.l, 1) ? 0 : s;
     this.s = clamp(s, {min: 0, max: 1});
-    h = equals(this.s, 0) ? 0 : h;
+    h = equals(this.s, 0, STRICT_EPSILON) ? 0 : h;
     this.h = normalizeHue(h * 360) / 360;
     this.alpha = clamp(alpha ?? null, {min: 0, max: 1});
     this.#authoredText = authoredText;

front_end/ui/legacy/components/color_picker/Spectrum.test.ts

@@ -73,6 +73,30 @@ describeWithEnvironment('ColorPicker aka Spectrum', () => {
     textInputs.forEach(decrement);
     assert.strictEqual(spectrum.color.asString(), 'rgb(127 253 0 / 29%)');
   });
+
+  it('updates hue correctly for near-grayscale colors', () => {
+    const spectrum = new ColorPicker.Spectrum.Spectrum();
+    const colorElement = spectrum.contentElement.querySelector('.spectrum-color') as HTMLElement;
+    assert.exists(colorElement);
+
+    // Scenario 1: Input #3c3d3d only
+    spectrum.setColor(Common.Color.parse('#3c3d3d') as Common.Color.Color);
+    // Hue should be 0.5 (Cyan). getColorFromHsva returns rgb(0, 255, 255) for h=0.5, s=1, v=1.
+    assert.strictEqual(colorElement.style.backgroundColor, 'rgb(0, 255, 255)');
+
+    // Scenario 2: Input #3d3d3d only
+    spectrum.setColor(Common.Color.parse('#3d3d3d') as Common.Color.Color);
+    // #3d3d3d should not be powerless, so it updates to its own calculated hue (0).
+    // Hue 0 corresponds to Red.
+    assert.strictEqual(colorElement.style.backgroundColor, 'rgb(255, 0, 0)');
+
+    // Scenario 3: First #3c3d3d and then #3d3d3d
+    spectrum.setColor(Common.Color.parse('#3c3d3d') as Common.Color.Color);
+    assert.strictEqual(colorElement.style.backgroundColor, 'rgb(0, 255, 255)');
+    spectrum.setColor(Common.Color.parse('#3d3d3d') as Common.Color.Color);
+    // Since it is not powerless, it should update and be Red.
+    assert.strictEqual(colorElement.style.backgroundColor, 'rgb(255, 0, 0)');
+  });
 });
 
 describeWithMockConnection('PaletteGenerator', () => {