DevTools: Close picker for contrast background color on Esc

Also disable the bg color picker button upon selection.

Bug: 40140133
Change-Id: I49858d36717bdcf0b7556577f9109cc3b708328b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6444747
Reviewed-by: Alex Rudenko <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Alexander Pavlov <[email protected]>

Author: Alexander Pavlov

front_end/ui/legacy/components/color_picker/ContrastDetails.ts

@@ -465,6 +465,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     const color = Common.Color.Legacy.fromRGBA(rgba);
     this.contrastInfo.setBgColor(color);
     this.toggleBackgroundColorPickerInternal(false);
+    this.bgColorPickerButton.toggled(false);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
   }
 }

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

@@ -229,7 +229,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
   private srgbOverlay: SrgbOverlay.SrgbOverlay.SrgbOverlay;
   private contrastOverlay: ContrastOverlay|undefined;
   private contrastDetails: ContrastDetails|undefined;
-  private readonly contrastDetailsBackgroundColorPickedToggledBound:
+  private readonly contrastDetailsBackgroundColorPickerToggledBound:
       ((event: Common.EventTarget.EventTargetEvent<boolean>) => void)|undefined;
   private readonly palettes: Map<string, Palette>;
   private readonly palettePanel: HTMLElement;
@@ -399,8 +399,8 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
           this.contrastInfo, this.contentElement, this.toggleColorPicker.bind(this),
           this.contrastPanelExpandedChanged.bind(this), this.colorSelected.bind(this));
 
-      this.contrastDetailsBackgroundColorPickedToggledBound =
-          this.contrastDetailsBackgroundColorPickedToggled.bind(this);
+      this.contrastDetailsBackgroundColorPickerToggledBound =
+          this.contrastDetailsBackgroundColorPickerToggled.bind(this);
     }
 
     this.element.classList.add('flex-none');
@@ -572,7 +572,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     return true;
   }
 
-  private contrastDetailsBackgroundColorPickedToggled(event: {
+  private contrastDetailsBackgroundColorPickerToggled(event: {
     data: unknown,
   }): void {
     if (event.data) {
@@ -1355,19 +1355,19 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
       this.colorPickerButton.setToggled(false);
     }
 
-    if (this.contrastDetails && this.contrastDetailsBackgroundColorPickedToggledBound) {
+    if (this.contrastDetails && this.contrastDetailsBackgroundColorPickerToggledBound) {
       this.contrastDetails.addEventListener(
           ContrastDetailsEvents.BACKGROUND_COLOR_PICKER_WILL_BE_TOGGLED,
-          this.contrastDetailsBackgroundColorPickedToggledBound);
+          this.contrastDetailsBackgroundColorPickerToggledBound);
     }
   }
 
   override willHide(): void {
     void this.toggleColorPicker(false);
-    if (this.contrastDetails && this.contrastDetailsBackgroundColorPickedToggledBound) {
+    if (this.contrastDetails && this.contrastDetailsBackgroundColorPickerToggledBound) {
       this.contrastDetails.removeEventListener(
           ContrastDetailsEvents.BACKGROUND_COLOR_PICKER_WILL_BE_TOGGLED,
-          this.contrastDetailsBackgroundColorPickedToggledBound);
+          this.contrastDetailsBackgroundColorPickerToggledBound);
     }
   }
 
@@ -1376,9 +1376,10 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
       enabled = this.colorPickerButton.isToggled();
     }
 
-    // This is to make sure that only one picker is open at a time
-    // Also have a look at this.contrastDetailsBackgroundColorPickedToggled
-    if (this.contrastDetails && enabled && this.contrastDetails.backgroundColorPickerEnabled()) {
+    // This is to make sure that only one picker is open at a time (enabled is true) and
+    // the background color picker gets dismissed whenever the popup is closed by an Esc (enabled is false).
+    // Also have a look at this.contrastDetailsBackgroundColorPickedToggled.
+    if (this.contrastDetails?.backgroundColorPickerEnabled()) {
       this.contrastDetails.toggleBackgroundColorPicker(false);
     }