Commit 548c459f authored by Joel Einbinder's avatar Joel Einbinder Committed by Commit Bot

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

Bug: 860286
Change-Id: Iec7cf205d6b240cb54b113690e61414e12685df9
Reviewed-on: https://chromium-review.googlesource.com/c/1278160Reviewed-by: default avatarAndrey Lushnikov <lushnikov@chromium.org>
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Cr-Commit-Position: refs/heads/master@{#599378}
parent 8c7eeb6d
...@@ -130,20 +130,7 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement { ...@@ -130,20 +130,7 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement {
const swatch = InlineEditor.ColorSwatch.create(); const swatch = InlineEditor.ColorSwatch.create();
swatch.setColor(color); swatch.setColor(color);
swatch.setFormat(Common.Color.detectColorFormat(swatch.color())); swatch.setFormat(Common.Color.detectColorFormat(swatch.color()));
const swatchIcon = new Elements.ColorSwatchPopoverIcon(this, swatchPopoverHelper, swatch); this._addColorContrastInfo(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);
}
return swatch; return swatch;
} }
...@@ -175,10 +162,22 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement { ...@@ -175,10 +162,22 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement {
swatch.setColor(color); swatch.setColor(color);
swatch.setFormat(Common.Color.detectColorFormat(swatch.color())); swatch.setFormat(Common.Color.detectColorFormat(swatch.color()));
swatch.setText(text, computedValue); swatch.setText(text, computedValue);
new Elements.ColorSwatchPopoverIcon(this, swatchPopoverHelper, swatch); this._addColorContrastInfo(new Elements.ColorSwatchPopoverIcon(this, swatchPopoverHelper, swatch));
return 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} * @return {string}
*/ */
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment