/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ "use strict"; const {Cc, Ci, Cu} = require("chrome"); const {Services} = Cu.import("resource://gre/modules/Services.jsm", {}); const COLOR_UNIT_PREF = "devtools.defaultColorUnit"; const REGEX_JUST_QUOTES = /^""$/; const REGEX_RGB_3_TUPLE = /^rgb\(([\d.]+),\s*([\d.]+),\s*([\d.]+)\)$/i; const REGEX_RGBA_4_TUPLE = /^rgba\(([\d.]+),\s*([\d.]+),\s*([\d.]+),\s*([\d.]+|1|0)\)$/i; const REGEX_HSL_3_TUPLE = /^\bhsl\(([\d.]+),\s*([\d.]+%),\s*([\d.]+%)\)$/i; /** * This regex matches: * - #F00 * - #FF0000 * - hsl() * - hsla() * - rgb() * - rgba() * - red * * It also matches css keywords e.g. "background-color" otherwise * "background" would be replaced with #6363CE ("background" is a platform * color). */ const REGEX_ALL_COLORS = /#[0-9a-fA-F]{3}\b|#[0-9a-fA-F]{6}\b|hsl\(.*?\)|hsla\(.*?\)|rgba?\(.*?\)|\b[a-zA-Z-]+\b/g; const SPECIALVALUES = new Set([ "currentcolor", "initial", "inherit", "transparent", "unset" ]); /** * This module is used to convert between various color types. * * Usage: * let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}); * let {colorUtils} = devtools.require("devtools/css-color"); * let color = new colorUtils.CssColor("red"); * * color.authored === "red" * color.hasAlpha === false * color.valid === true * color.transparent === false // transparent has a special status. * color.name === "red" // returns hex or rgba when no name available. * color.hex === "#F00" // returns shortHex when available else returns * longHex. If alpha channel is present then we * return this.rgba. * color.longHex === "#FF0000" // If alpha channel is present then we return * this.rgba. * color.rgb === "rgb(255, 0, 0)" // If alpha channel is present then we return * this.rgba. * color.rgba === "rgba(255, 0, 0, 1)" * color.hsl === "hsl(0, 100%, 50%)" * color.hsla === "hsla(0, 100%, 50%, 1)" // If alpha channel is present * then we return this.rgba. * * color.toString() === "#F00"; // Outputs the color type determined in the * COLOR_UNIT_PREF constant (above). * // Color objects can be reused * color.newColor("green") === "#0F0"; // true * * let processed = colorUtils.processCSSString("color:red; background-color:green;"); * // Returns "color:#F00; background-color:#0F0;" * * Valid values for COLOR_UNIT_PREF are contained in CssColor.COLORUNIT. */ function CssColor(colorValue) { this.newColor(colorValue); } module.exports.colorUtils = { CssColor: CssColor, processCSSString: processCSSString, rgbToHsl: rgbToHsl }; /** * Values used in COLOR_UNIT_PREF */ CssColor.COLORUNIT = { "authored": "authored", "hex": "hex", "name": "name", "rgb": "rgb", "hsl": "hsl" }; CssColor.prototype = { authored: null, get hasAlpha() { if (!this.valid) { return false; } return this._getRGBATuple().a !== 1; }, get valid() { return this._validateColor(this.authored); }, /** * Return true for all transparent values e.g. rgba(0, 0, 0, 0). */ get transparent() { try { let tuple = this._getRGBATuple(); return !(tuple.r || tuple.g || tuple.b || tuple.a); } catch(e) { return false; } }, get specialValue() { return SPECIALVALUES.has(this.authored) ? this.authored : null; }, get name() { if (!this.valid) { return ""; } if (this.specialValue) { return this.specialValue; } try { let tuple = this._getRGBATuple(); if (tuple.a !== 1) { return this.rgb; } let {r, g, b} = tuple; return DOMUtils.rgbToColorName(r, g, b); } catch(e) { return this.hex; } }, get hex() { if (!this.valid) { return ""; } if (this.specialValue) { return this.specialValue; } if (this.hasAlpha) { return this.rgba; } let hex = this.longHex; if (hex.charAt(1) == hex.charAt(2) && hex.charAt(3) == hex.charAt(4) && hex.charAt(5) == hex.charAt(6)) { hex = "#" + hex.charAt(1) + hex.charAt(3) + hex.charAt(5); } return hex; }, get longHex() { if (!this.valid) { return ""; } if (this.specialValue) { return this.specialValue; } if (this.hasAlpha) { return this.rgba; } return this.rgb.replace(/\brgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)/gi, function(_, r, g, b) { return "#" + ((1 << 24) + (r << 16) + (g << 8) + (b << 0)).toString(16).substr(-6).toUpperCase(); }); }, get rgb() { if (!this.valid) { return ""; } if (this.specialValue) { return this.specialValue; } if (!this.hasAlpha) { if (this.authored.startsWith("rgb(")) { // The color is valid and begins with rgb(. Return the authored value. return this.authored; } let tuple = this._getRGBATuple(); return "rgb(" + tuple.r + ", " + tuple.g + ", " + tuple.b + ")"; } return this.rgba; }, get rgba() { if (!this.valid) { return ""; } if (this.specialValue) { return this.specialValue; } if (this.authored.startsWith("rgba(")) { // The color is valid and begins with rgba(. Return the authored value. return this.authored; } let components = this._getRGBATuple(); return "rgba(" + components.r + ", " + components.g + ", " + components.b + ", " + components.a + ")"; }, get hsl() { if (!this.valid) { return ""; } if (this.specialValue) { return this.specialValue; } if (this.authored.startsWith("hsl(")) { // The color is valid and begins with hsl(. Return the authored value. return this.authored; } if (this.hasAlpha) { return this.hsla; } return this._hslNoAlpha(); }, get hsla() { if (!this.valid) { return ""; } if (this.specialValue) { return this.specialValue; } if (this.authored.startsWith("hsla(")) { // The color is valid and begins with hsla(. Return the authored value. return this.authored; } if (this.hasAlpha) { let a = this._getRGBATuple().a; return this._hslNoAlpha().replace("hsl", "hsla").replace(")", ", " + a + ")"); } return this._hslNoAlpha().replace("hsl", "hsla").replace(")", ", 1)"); }, /** * Change color * * @param {String} color * Any valid color string */ newColor: function(color) { this.authored = color.toLowerCase(); return this; }, /** * Return a string representing a color of type defined in COLOR_UNIT_PREF. */ toString: function() { let color; let defaultUnit = Services.prefs.getCharPref(COLOR_UNIT_PREF); let unit = CssColor.COLORUNIT[defaultUnit]; switch(unit) { case CssColor.COLORUNIT.authored: color = this.authored; break; case CssColor.COLORUNIT.hex: color = this.hex; break; case CssColor.COLORUNIT.hsl: color = this.hsl; break; case CssColor.COLORUNIT.name: color = this.name; break; case CssColor.COLORUNIT.rgb: color = this.rgb; break; default: color = this.rgb; } return color; }, /** * Returns a RGBA 4-Tuple representation of a color or transparent as * appropriate. */ _getRGBATuple: function() { let win = Services.appShell.hiddenDOMWindow; let doc = win.document; let span = doc.createElement("span"); span.style.color = this.authored; let computed = win.getComputedStyle(span).color; if (computed === "transparent") { return {r: 0, g: 0, b: 0, a: 0}; } let rgba = computed.match(REGEX_RGBA_4_TUPLE); if (rgba) { let [, r, g, b, a] = rgba; return {r: r, g: g, b: b, a: a}; } else { let rgb = computed.match(REGEX_RGB_3_TUPLE); let [, r, g, b] = rgb; return {r: r, g: g, b: b, a: 1}; } }, _hslNoAlpha: function() { let {r, g, b} = this._getRGBATuple(); if (this.authored.startsWith("hsl(")) { // We perform string manipulations on our output so let's ensure that it // is formatted as we expect. let [, h, s, l] = this.authored.match(REGEX_HSL_3_TUPLE); return "hsl(" + h + ", " + s + ", " + l + ")"; } let [h,s,l] = rgbToHsl([r,g,b]); return "hsl(" + h + ", " + s + "%, " + l + "%)"; }, /** * This method allows comparison of CssColor objects using ===. */ valueOf: function() { return this.rgba; }, _validateColor: function(color) { if (typeof color !== "string" || color === "") { return false; } let win = Services.appShell.hiddenDOMWindow; let doc = win.document; // Create a black span in a hidden window. let span = doc.createElement("span"); span.style.color = "rgb(0, 0, 0)"; // Attempt to set the color. If the color is no longer black we know that // color is valid. span.style.color = color; if (span.style.color !== "rgb(0, 0, 0)") { return true; } // If the color is black then the above check will have failed. We change // the span to white and attempt to reapply the color. If the span is not // white then we know that the color is valid otherwise we return invalid. span.style.color = "rgb(255, 255, 255)"; span.style.color = color; return span.style.color !== "rgb(255, 255, 255)"; }, }; /** * Process a CSS string * * @param {String} value * CSS string e.g. "color:red; background-color:green;" * @return {String} * Converted CSS String e.g. "color:#F00; background-color:#0F0;" */ function processCSSString(value) { if (value && REGEX_JUST_QUOTES.test(value)) { return value; } let colorPattern = REGEX_ALL_COLORS; value = value.replace(colorPattern, function(match) { let color = new CssColor(match); if (color.valid) { return color; } return match; }); return value; } /** * Convert rgb value to hsl * * @param {array} rgb * Array of rgb values * @return {array} * Array of hsl values. */ function rgbToHsl([r,g,b]) { r = r / 255; g = g / 255; b = b / 255; let max = Math.max(r, g, b); let min = Math.min(r, g, b); let h; let s; let l = (max + min) / 2; if(max == min){ h = s = 0; } else { let d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch(max) { case r: h = ((g - b) / d) % 6; break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h *= 60; if (h < 0) { h += 360; } } return [Math.round(h), Math.round(s * 100), Math.round(l * 100)]; } loader.lazyGetter(this, "DOMUtils", function () { return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils); });