Permalink
Browse files

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

Bug: 860286
Change-Id: Iec7cf205d6b240cb54b113690e61414e12685df9
Reviewed-on: https://chromium-review.googlesource.com/c/1278160
Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#599378}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 548c459fb7741b83bd517b12882f533b04a5513e
  • Loading branch information...
JoelEinbinder authored and Commit Bot committed Oct 12, 2018
1 parent dcb92bc commit aa5d8239f8be0f88d3db247c270ba34313822d47
Showing with 14 additions and 15 deletions.
  1. +14 −15 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}
*/

0 comments on commit aa5d823

Please sign in to comment.