[devtools] Fix eyedropper for contrast details

This fixes the color popover when the contrast details
are show and also has a color picker for the background.

Bug: chromium:959012
Change-Id: Iddbd397b9417a331397c3e07fd3690ea5e306710
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1789225Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Jan Scheffler <janscheffler@google.com>
Cr-Commit-Position: refs/heads/master@{#697506}

third_party/blink/renderer/devtools/front_end/color_picker/ContrastDetails.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-ColorPicker.ContrastDetails = class {
+ColorPicker.ContrastDetails = class extends Common.Object {
   /**
    * @param {!ColorPicker.ContrastInfo} contrastInfo
    * @param {!Element} contentElement
@@ -10,6 +10,7 @@ ColorPicker.ContrastDetails = class {
    * @param {function()} expandedChangedCallback
    */
   constructor(contrastInfo, contentElement, toggleMainColorPickerCallback, expandedChangedCallback) {
+    super();
     /** @type {!ColorPicker.ContrastInfo} */
     this._contrastInfo = contrastInfo;
 
@@ -80,7 +81,7 @@ ColorPicker.ContrastDetails = class {
     this._bgColorPickerButton =
         new UI.ToolbarToggle(Common.UIString('Toggle background color picker'), 'largeicon-eyedropper');
     this._bgColorPickerButton.addEventListener(
-        UI.ToolbarButton.Events.Click, this._toggleBackgroundColorPicker.bind(this, undefined));
+        UI.ToolbarButton.Events.Click, this._toggleBackgroundColorPicker.bind(this, undefined, true));
     pickerToolbar.appendToolbarItem(this._bgColorPickerButton);
     this._bgColorPickedBound = this._bgColorPicked.bind(this);
 
@@ -221,13 +222,33 @@ ColorPicker.ContrastDetails = class {
     return this._expanded;
   }
 
+  /**
+   * @returns {boolean}
+   */
+  backgroundColorPickerEnabled() {
+    return this._bgColorPickerButton.toggled();
+  }
+
+  /**
+   * @param {boolean} enabled
+   */
+
+  toggleBackgroundColorPicker(enabled) {
+    this._toggleBackgroundColorPicker(enabled, false);
+  }
+
   /**
    * @param {boolean=} enabled
+   * @param {boolean=} shouldTriggerEvent
    */
-  _toggleBackgroundColorPicker(enabled) {
+  _toggleBackgroundColorPicker(enabled, shouldTriggerEvent = true) {
     if (enabled === undefined)
       enabled = !this._bgColorPickerButton.toggled();
     this._bgColorPickerButton.setToggled(enabled);
+
+    if (shouldTriggerEvent)
+      this.dispatchEventToListeners(ColorPicker.ContrastDetails.Events.BackgroundColorPickerWillBeToggled, enabled);
+
     InspectorFrontendHost.setEyeDropperActive(enabled);
     if (enabled) {
       InspectorFrontendHost.events.addEventListener(
@@ -251,6 +272,10 @@ ColorPicker.ContrastDetails = class {
   }
 };
 
+ColorPicker.ContrastDetails.Events = {
+  BackgroundColorPickerWillBeToggled: Symbol('BackgroundColorPickerWillBeToggled')
+};
+
 ColorPicker.ContrastDetails.Swatch = class {
   /**
    * @param {!Element} parentElement

third_party/blink/renderer/devtools/front_end/color_picker/Spectrum.js

@@ -122,6 +122,9 @@ ColorPicker.Spectrum = class extends UI.VBox {
       this._contrastDetails = new ColorPicker.ContrastDetails(
           this._contrastInfo, this.contentElement, this._toggleColorPicker.bind(this),
           this._contrastPanelExpanded.bind(this));
+
+      this._contrastDetailsBackgroundColorPickedToggledBound =
+          this._contrastDetailsBackgroundColorPickedToggled.bind(this);
     }
 
     this.element.classList.add('flex-none');
@@ -218,6 +221,11 @@ ColorPicker.Spectrum = class extends UI.VBox {
     }
   }
 
+  _contrastDetailsBackgroundColorPickedToggled({data: enabled}) {
+    if (enabled)
+      this._toggleColorPicker(false);
+  }
+
   _contrastPanelExpanded() {
     this._contrastOverlay.setVisible(this._contrastDetails.expanded());
     this._resizeForSelectedPalette(true);
@@ -844,6 +852,12 @@ ColorPicker.Spectrum = class extends UI.VBox {
     this._innerSetColor(
         undefined, undefined, undefined /* colorName */, undefined, ColorPicker.Spectrum._ChangeSource.Model);
     this._toggleColorPicker(true);
+
+    if (this._contrastDetails) {
+      this._contrastDetails.addEventListener(
+          ColorPicker.ContrastDetails.Events.BackgroundColorPickerWillBeToggled,
+          this._contrastDetailsBackgroundColorPickedToggledBound);
+    }
   }
 
   /**
@@ -851,6 +865,11 @@ ColorPicker.Spectrum = class extends UI.VBox {
    */
   willHide() {
     this._toggleColorPicker(false);
+    if (this._contrastDetails) {
+      this._contrastDetails.removeEventListener(
+          ColorPicker.ContrastDetails.Events.BackgroundColorPickerWillBeToggled,
+          this._contrastDetailsBackgroundColorPickedToggledBound);
+    }
   }
 
   /**
@@ -861,6 +880,12 @@ ColorPicker.Spectrum = class extends UI.VBox {
     if (enabled === undefined)
       enabled = !this._colorPickerButton.toggled();
     this._colorPickerButton.setToggled(enabled);
+
+    // 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._contrastDetails.toggleBackgroundColorPicker(false);
+
     InspectorFrontendHost.setEyeDropperActive(enabled);
     if (enabled) {
       InspectorFrontendHost.events.addEventListener(