[DevTools] fix(styles): color contrast info for css variables

Bug: 860286
Change-Id: Iec7cf205d6b240cb54b113690e61414e12685df9
Reviewed-on: https://chromium-review.googlesource.com/c/1278160Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Cr-Commit-Position: refs/heads/master@{#599378}

third_party/blink/renderer/devtools/front_end/elements/StylePropertyTreeElement.js

@@ -130,20 +130,7 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement {
     const swatch = InlineEditor.ColorSwatch.create();
     swatch.setColor(color);
     swatch.setFormat(Common.Color.detectColorFormat(swatch.color()));
-    const swatchIcon = new Elements.ColorSwatchPopoverIcon(this, swatchPopoverHelper, swatch);
-
-    /**
-     * @param {?SDK.CSSModel.ContrastInfo} contrastInfo
-     */
-    function computedCallback(contrastInfo) {
-      swatchIcon.setContrastInfo(contrastInfo);
-    }
-
-    if (Runtime.experiments.isEnabled('colorContrastRatio') && this.property.name === 'color' &&
-        this._parentPane.cssModel() && this.node()) {
-      const cssModel = this._parentPane.cssModel();
-      cssModel.backgroundColorsPromise(this.node().id).then(computedCallback);
-    }
+    this._addColorContrastInfo(new Elements.ColorSwatchPopoverIcon(this, swatchPopoverHelper, swatch));
 
     return swatch;
   }
@@ -175,10 +162,22 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement {
     swatch.setColor(color);
     swatch.setFormat(Common.Color.detectColorFormat(swatch.color()));
     swatch.setText(text, computedValue);
-    new Elements.ColorSwatchPopoverIcon(this, swatchPopoverHelper, swatch);
+    this._addColorContrastInfo(new Elements.ColorSwatchPopoverIcon(this, swatchPopoverHelper, swatch));
     return swatch;
   }
 
+  /**
+   * @param {!Elements.ColorSwatchPopoverIcon} swatchIcon
+   */
+  async _addColorContrastInfo(swatchIcon) {
+    if (!Runtime.experiments.isEnabled('colorContrastRatio') || this.property.name !== 'color' ||
+        !this._parentPane.cssModel() || !this.node())
+      return;
+    const cssModel = this._parentPane.cssModel();
+    const contrastInfo = await cssModel.backgroundColorsPromise(this.node().id);
+    swatchIcon.setContrastInfo(contrastInfo);
+  }
+
   /**
    * @return {string}
    */