Test for Bug 1323700

From f34094bae31e216228d5c2da2f2461d03df38302 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Fri, 2 Feb 2018 20:42:28 +0100 Subject: Add a "copy full CSS path" option to the inspector's menu Issue #3 --- devtools/shared/specs/node.js | 6 + devtools/shared/tests/mochitest/chrome.ini | 3 +- .../tests/mochitest/test_css-logic-getCssPath.html | 121 +++++++++++++++++++++ 3 files changed, 129 insertions(+), 1 deletion(-) create mode 100644 devtools/shared/tests/mochitest/test_css-logic-getCssPath.html (limited to 'devtools/shared') diff --git a/devtools/shared/specs/node.js b/devtools/shared/specs/node.js index ea3d1b264..022d7f1ac 100644 --- a/devtools/shared/specs/node.js +++ b/devtools/shared/specs/node.js @@ -37,6 +37,12 @@ const nodeSpec = generateActorSpec({ value: RetVal("string") } }, + getCssPath: { + request: {}, + response: { + value: RetVal("string") + } + }, scrollIntoView: { request: {}, response: {} diff --git a/devtools/shared/tests/mochitest/chrome.ini b/devtools/shared/tests/mochitest/chrome.ini index 85ece7c48..3e4e028d1 100644 --- a/devtools/shared/tests/mochitest/chrome.ini +++ b/devtools/shared/tests/mochitest/chrome.ini @@ -2,6 +2,7 @@ tags = devtools skip-if = os == 'android' -[test_eventemitter_basic.html] +[test_css-logic-getCssPath.html] [test_devtools_extensions.html] +[test_eventemitter_basic.html] skip-if = os == 'linux' && debug # Bug 1205739 diff --git a/devtools/shared/tests/mochitest/test_css-logic-getCssPath.html b/devtools/shared/tests/mochitest/test_css-logic-getCssPath.html new file mode 100644 index 000000000..2c444308a --- /dev/null +++ b/devtools/shared/tests/mochitest/test_css-logic-getCssPath.html @@ -0,0 +1,121 @@ + + + + + + Test for Bug 1323700 + + + + + + +

+ + + + -- cgit v1.2.3 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/shared/css/color.js | 32 +++++++++++++++++++----------- devtools/shared/fronts/css-properties.js | 34 ++++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+), 11 deletions(-) (limited to 'devtools/shared') diff --git a/devtools/shared/css/color.js b/devtools/shared/css/color.js index b354043d7..98ddeff19 100644 --- a/devtools/shared/css/color.js +++ b/devtools/shared/css/color.js @@ -28,6 +28,10 @@ const SPECIALVALUES = new Set([ * Usage: * let {colorUtils} = require("devtools/shared/css/color"); * let color = new colorUtils.CssColor("red"); + * // In order to support css-color-4 color function, pass true to the + * // second argument. + * // e.g. + * // let color = new colorUtils.CssColor("red", true); * * color.authored === "red" * color.hasAlpha === false @@ -58,8 +62,9 @@ const SPECIALVALUES = new Set([ * Valid values for COLOR_UNIT_PREF are contained in CssColor.COLORUNIT. */ -function CssColor(colorValue) { +function CssColor(colorValue, supportsCssColor4ColorFunction = false) { this.newColor(colorValue); + this.cssColor4 = supportsCssColor4ColorFunction; } module.exports.colorUtils = { @@ -92,6 +97,9 @@ CssColor.prototype = { // A lower-cased copy of |authored|. lowerCased: null, + // Whether the value should be parsed using css-color-4 rules. + cssColor4: false, + _setColorUnitUppercase: function (color) { // Specifically exclude the case where the color is // case-insensitive. This makes it so that "#000" isn't @@ -136,7 +144,7 @@ CssColor.prototype = { }, get valid() { - return isValidCSSColor(this.authored); + return isValidCSSColor(this.authored, this.cssColor4); }, /** @@ -393,7 +401,7 @@ CssColor.prototype = { * appropriate. */ _getRGBATuple: function () { - let tuple = colorToRGBA(this.authored); + let tuple = colorToRGBA(this.authored, this.cssColor4); tuple.a = parseFloat(tuple.a.toFixed(1)); @@ -481,11 +489,13 @@ function roundTo(number, digits) { * Color in the form of hex, hsl, hsla, rgb, rgba. * @param {Number} alpha * Alpha value for the color, between 0 and 1. + * @param {Boolean} useCssColor4ColorFunction + * use css-color-4 color function or not. * @return {String} * Converted color with `alpha` value in rgba form. */ -function setAlpha(colorValue, alpha) { - let color = new CssColor(colorValue); +function setAlpha(colorValue, alpha, useCssColor4ColorFunction = false) { + let color = new CssColor(colorValue, useCssColor4ColorFunction); // Throw if the color supplied is not valid. if (!color.valid) { @@ -1049,12 +1059,11 @@ function parseOldStyleRgb(lexer, hasAlpha) { * color's components. Any valid CSS color form can be passed in. * * @param {String} name the color - * @param {Boolean} oldColorFunctionSyntax use old color function syntax or the - * css-color-4 syntax + * @param {Boolean} useCssColor4ColorFunction use css-color-4 color function or not. * @return {Object} an object of the form {r, g, b, a}; or null if the * name was not a valid color */ -function colorToRGBA(name, oldColorFunctionSyntax = true) { +function colorToRGBA(name, useCssColor4ColorFunction = false) { name = name.trim().toLowerCase(); if (name in cssColors) { @@ -1089,7 +1098,7 @@ function colorToRGBA(name, oldColorFunctionSyntax = true) { let hsl = func.text === "hsl" || func.text === "hsla"; let vals; - if (oldColorFunctionSyntax) { + if (!useCssColor4ColorFunction) { let hasAlpha = (func.text === "rgba" || func.text === "hsla"); vals = hsl ? parseOldStyleHsl(lexer, hasAlpha) : parseOldStyleRgb(lexer, hasAlpha); } else { @@ -1110,8 +1119,9 @@ function colorToRGBA(name, oldColorFunctionSyntax = true) { * Check whether a string names a valid CSS color. * * @param {String} name The string to check + * @param {Boolean} useCssColor4ColorFunction use css-color-4 color function or not. * @return {Boolean} True if the string is a CSS color name. */ -function isValidCSSColor(name) { - return colorToRGBA(name) !== null; +function isValidCSSColor(name, useCssColor4ColorFunction = false) { + return colorToRGBA(name, useCssColor4ColorFunction) !== null; } diff --git a/devtools/shared/fronts/css-properties.js b/devtools/shared/fronts/css-properties.js index 9b3172a22..d61bb4b07 100644 --- a/devtools/shared/fronts/css-properties.js +++ b/devtools/shared/fronts/css-properties.js @@ -46,6 +46,20 @@ const CssPropertiesFront = FrontClassWithSpec(cssPropertiesSpec, { } }); +/** + * Query the feature supporting status in the featureSet. + * + * @param {Hashmap} featureSet the feature set hashmap + * @param {String} feature the feature name string + * @return {Boolean} has the feature or not + */ +function hasFeature(featureSet, feature) { + if (feature in featureSet) { + return featureSet[feature]; + } + return false; +} + /** * Ask questions to a CSS database. This class does not care how the database * gets loaded in, only the questions that you can ask to it. @@ -62,10 +76,16 @@ function CssProperties(db) { this.properties = db.properties; this.pseudoElements = db.pseudoElements; + // supported feature + this.cssColor4ColorFunction = hasFeature(db.supportedFeature, + "css-color-4-color-function"); + this.isKnown = this.isKnown.bind(this); this.isInherited = this.isInherited.bind(this); this.supportsType = this.supportsType.bind(this); this.isValidOnClient = this.isValidOnClient.bind(this); + this.supportsCssColor4ColorFunction = + this.supportsCssColor4ColorFunction.bind(this); // A weakly held dummy HTMLDivElement to test CSS properties on the client. this._dummyElements = new WeakMap(); @@ -181,6 +201,15 @@ CssProperties.prototype = { } return []; }, + + /** + * Checking for the css-color-4 color function support. + * + * @return {Boolean} Return true if the server supports css-color-4 color function. + */ + supportsCssColor4ColorFunction() { + return this.cssColor4ColorFunction; + }, }; /** @@ -292,6 +321,11 @@ function normalizeCssData(db) { reattachCssColorValues(db); + // If there is no supportedFeature in db, create an empty one. + if (!db.supportedFeature) { + db.supportedFeature = {}; + } + return db; } -- cgit v1.2.3 From 56bd82c6fce2bce285baeec700a1eb3ecee2c7c6 Mon Sep 17 00:00:00 2001 From: wolfbeast Date: Wed, 28 Jun 2017 10:10:53 +0200 Subject: Devtools gcli commands - fix the help. --- devtools/shared/gcli/source/lib/gcli/commands/commands.js | 6 +++--- devtools/shared/gcli/source/lib/gcli/commands/help.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'devtools/shared') diff --git a/devtools/shared/gcli/source/lib/gcli/commands/commands.js b/devtools/shared/gcli/source/lib/gcli/commands/commands.js index 67793b2dc..0af4be620 100644 --- a/devtools/shared/gcli/source/lib/gcli/commands/commands.js +++ b/devtools/shared/gcli/source/lib/gcli/commands/commands.js @@ -335,10 +335,10 @@ Parameter.prototype.toJson = function() { }; // Values do not need to be serializable, so we don't try. For the client - // side (which doesn't do any executing) we don't actually care what the - // default value is, just that it exists + // side (which doesn't do any executing) we only care whether default value is + // undefined, null, or something else. if (this.paramSpec.defaultValue !== undefined) { - json.defaultValue = {}; + json.defaultValue = (this.paramSpec.defaultValue === null) ? null : {}; } if (this.paramSpec.description != null) { json.description = this.paramSpec.description; diff --git a/devtools/shared/gcli/source/lib/gcli/commands/help.js b/devtools/shared/gcli/source/lib/gcli/commands/help.js index 317f80240..7d1cc9087 100644 --- a/devtools/shared/gcli/source/lib/gcli/commands/help.js +++ b/devtools/shared/gcli/source/lib/gcli/commands/help.js @@ -69,7 +69,7 @@ function getHelpManData(commandData, context) { } else { // We need defaultText to work the text version of defaultValue - input = l10n.lookupFormat('helpManOptional'); + input = l10n.lookup('helpManOptional'); /* var val = param.type.stringify(param.defaultValue); input = Promise.resolve(val).then(function(defaultValue) { -- cgit v1.2.3