From f3aeeab64f6a5ae0639805b2c71e13323258e2c1 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Fri, 2 Feb 2018 20:51:18 +0100 Subject: Support for css-color-4 (finish) Issue #4 --- devtools/client/shared/output-parser.js | 17 ++++++++++++----- devtools/client/shared/test/unit/test_cssColor-03.js | 6 +++--- .../shared/widgets/tooltip/SwatchColorPickerTooltip.js | 11 ++++++++--- 3 files changed, 23 insertions(+), 11 deletions(-) (limited to 'devtools/client/shared') diff --git a/devtools/client/shared/output-parser.js b/devtools/client/shared/output-parser.js index 726c93b8b..b4fb1c6aa 100644 --- a/devtools/client/shared/output-parser.js +++ b/devtools/client/shared/output-parser.js @@ -40,8 +40,11 @@ const CSS_GRID_ENABLED_PREF = "layout.css.grid.enabled"; * where CSS_TYPES is defined in devtools/shared/css/properties-db.js * @param {Function} isValidOnClient - A function that checks if a css property * name/value combo is valid. + * @param {Function} supportsCssColor4ColorFunction - A function for checking + * the supporting of css-color-4 color function. */ -function OutputParser(document, {supportsType, isValidOnClient}) { +function OutputParser(document, + {supportsType, isValidOnClient, supportsCssColor4ColorFunction}) { this.parsed = []; this.doc = document; this.supportsType = supportsType; @@ -50,6 +53,8 @@ function OutputParser(document, {supportsType, isValidOnClient}) { this.angleSwatches = new WeakMap(); this._onColorSwatchMouseDown = this._onColorSwatchMouseDown.bind(this); this._onAngleSwatchMouseDown = this._onAngleSwatchMouseDown.bind(this); + + this.cssColor4 = supportsCssColor4ColorFunction(); } exports.OutputParser = OutputParser; @@ -188,7 +193,8 @@ OutputParser.prototype = { if (options.expectCubicBezier && token.text === "cubic-bezier") { this._appendCubicBezier(functionText, options); - } else if (colorOK() && colorUtils.isValidCSSColor(functionText)) { + } else if (colorOK() && + colorUtils.isValidCSSColor(functionText, this.cssColor4)) { this._appendColor(functionText, options); } else { this._appendTextNode(functionText); @@ -205,7 +211,8 @@ OutputParser.prototype = { options.expectDisplay && token.text === "grid" && text === token.text) { this._appendGrid(token.text, options); - } else if (colorOK() && colorUtils.isValidCSSColor(token.text)) { + } else if (colorOK() && + colorUtils.isValidCSSColor(token.text, this.cssColor4)) { this._appendColor(token.text, options); } else if (angleOK(token.text)) { this._appendAngle(token.text, options); @@ -218,7 +225,7 @@ OutputParser.prototype = { case "id": case "hash": { let original = text.substring(token.startOffset, token.endOffset); - if (colorOK() && colorUtils.isValidCSSColor(original)) { + if (colorOK() && colorUtils.isValidCSSColor(original, this.cssColor4)) { this._appendColor(original, options); } else { this._appendTextNode(original); @@ -394,7 +401,7 @@ OutputParser.prototype = { * _mergeOptions(). */ _appendColor: function (color, options = {}) { - let colorObj = new colorUtils.CssColor(color); + let colorObj = new colorUtils.CssColor(color, this.cssColor4); if (this._isValidColor(colorObj)) { let container = this._createNode("span", { diff --git a/devtools/client/shared/test/unit/test_cssColor-03.js b/devtools/client/shared/test/unit/test_cssColor-03.js index c3ef5a5c2..a081f7698 100644 --- a/devtools/client/shared/test/unit/test_cssColor-03.js +++ b/devtools/client/shared/test/unit/test_cssColor-03.js @@ -42,15 +42,15 @@ const CSS_COLOR_4_TESTS = [ function run_test() { for (let test of OLD_STYLE_TESTS) { - let ours = colorUtils.colorToRGBA(test, true); + let ours = colorUtils.colorToRGBA(test, false); let platform = DOMUtils.colorToRGBA(test); deepEqual(ours, platform, "color " + test + " matches DOMUtils"); ok(ours !== null, "'" + test + "' is a color"); } for (let test of CSS_COLOR_4_TESTS) { - let oursOld = colorUtils.colorToRGBA(test, true); - let oursNew = colorUtils.colorToRGBA(test, false); + let oursOld = colorUtils.colorToRGBA(test, false); + let oursNew = colorUtils.colorToRGBA(test, true); let platform = DOMUtils.colorToRGBA(test); notEqual(oursOld, platform, "old style parser for color " + test + " should not match DOMUtils"); diff --git a/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js b/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js index bf211b8b9..6a18ec12c 100644 --- a/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js +++ b/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js @@ -28,8 +28,12 @@ const XHTML_NS = "http://www.w3.org/1999/xhtml"; * inline editor. * @param {InspectorPanel} inspector * The inspector panel, needed for the eyedropper. + * @param {Function} supportsCssColor4ColorFunction + * A function for checking the supporting of css-color-4 color function. */ -function SwatchColorPickerTooltip(document, inspector) { +function SwatchColorPickerTooltip(document, + inspector, + {supportsCssColor4ColorFunction}) { let stylesheet = "chrome://devtools/content/shared/widgets/spectrum.css"; SwatchBasedEditorTooltip.call(this, document, stylesheet); @@ -40,6 +44,7 @@ function SwatchColorPickerTooltip(document, inspector) { this.spectrum = this.setColorPickerContent([0, 0, 0, 1]); this._onSpectrumColorChange = this._onSpectrumColorChange.bind(this); this._openEyeDropper = this._openEyeDropper.bind(this); + this.cssColor4 = supportsCssColor4ColorFunction(); } SwatchColorPickerTooltip.prototype = Heritage.extend(SwatchBasedEditorTooltip.prototype, { @@ -159,14 +164,14 @@ SwatchColorPickerTooltip.prototype = Heritage.extend(SwatchBasedEditorTooltip.pr }, _colorToRgba: function (color) { - color = new colorUtils.CssColor(color); + color = new colorUtils.CssColor(color, this.cssColor4); let rgba = color._getRGBATuple(); return [rgba.r, rgba.g, rgba.b, rgba.a]; }, _toDefaultType: function (color) { let colorObj = new colorUtils.CssColor(color); - colorObj.setAuthoredUnitFromColor(this._originalColor); + colorObj.setAuthoredUnitFromColor(this._originalColor, this.cssColor4); return colorObj.toString(); }, -- cgit v1.2.3