--- a/devtools/client/inspector/rules/views/text-property-editor.js
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -332,25 +332,28 @@ TextPropertyEditor.prototype = {
} else {
this.element.removeAttribute("dirty");
}
const sharedSwatchClass = "ruleview-swatch ";
const colorSwatchClass = "ruleview-colorswatch";
const bezierSwatchClass = "ruleview-bezierswatch";
const filterSwatchClass = "ruleview-filterswatch";
+ const angleSwatchClass = "ruleview-angleswatch";
let outputParser = this.ruleView._outputParser;
let parserOptions = {
colorSwatchClass: sharedSwatchClass + colorSwatchClass,
colorClass: "ruleview-color",
bezierSwatchClass: sharedSwatchClass + bezierSwatchClass,
bezierClass: "ruleview-bezier",
filterSwatchClass: sharedSwatchClass + filterSwatchClass,
filterClass: "ruleview-filter",
+ angleSwatchClass: sharedSwatchClass + angleSwatchClass,
+ angleClass: "ruleview-angle",
defaultColorType: !propDirty,
urlClass: "theme-link",
baseURI: this.sheetURI
};
let frag = outputParser.parseCssProperty(name, val, parserOptions);
this.valueSpan.innerHTML = "";
this.valueSpan.appendChild(frag);
--- a/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js
@@ -9,16 +9,17 @@
// This is more of a unit test than a mochitest-browser test, but can't be
// tested with an xpcshell test as the output-parser requires the DOM to work.
var {OutputParser} = require("devtools/client/shared/output-parser");
const COLOR_CLASS = "color-class";
const URL_CLASS = "url-class";
const CUBIC_BEZIER_CLASS = "bezier-class";
+const ANGLE_CLASS = "angle-class";
const TEST_DATA = [
{
name: "width",
value: "100%",
test: fragment => {
is(countAll(fragment), 0);
is(fragment.textContent, "100%");
@@ -155,21 +156,24 @@ const TEST_DATA = [
is(allSwatches[3].textContent, "#F06");
is(allSwatches[4].textContent, "red");
}
},
{
name: "background",
value: "-moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%)",
test: fragment => {
- is(countAll(fragment), 4);
- let allSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
- is(allSwatches.length, 2);
- is(allSwatches[0].textContent, "orange");
- is(allSwatches[1].textContent, "red");
+ is(countAll(fragment), 6);
+ let colorSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
+ is(colorSwatches.length, 2);
+ is(colorSwatches[0].textContent, "orange");
+ is(colorSwatches[1].textContent, "red");
+ let angleSwatches = fragment.querySelectorAll("." + ANGLE_CLASS);
+ is(angleSwatches.length, 1);
+ is(angleSwatches[0].textContent, "45deg");
}
},
{
name: "background",
value: "white url(http://test.com/wow_such_image.png) no-repeat top left",
test: fragment => {
is(countAll(fragment), 3);
is(countUrls(fragment), 1);
@@ -291,16 +295,17 @@ add_task(function*() {
for (let i = 0; i < TEST_DATA.length; i++) {
let data = TEST_DATA[i];
info("Output-parser test data " + i + ". {" + data.name + " : " +
data.value + ";}");
data.test(parser.parseCssProperty(data.name, data.value, {
colorClass: COLOR_CLASS,
urlClass: URL_CLASS,
bezierClass: CUBIC_BEZIER_CLASS,
+ angleClass: ANGLE_CLASS,
defaultColorType: false
}));
}
});
function countAll(fragment) {
return fragment.querySelectorAll("*").length;
}
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -149,16 +149,17 @@ devtools.jar:
skin/dark-theme.css (themes/dark-theme.css)
skin/light-theme.css (themes/light-theme.css)
skin/firebug-theme.css (themes/firebug-theme.css)
skin/toolbars.css (themes/toolbars.css)
skin/variables.css (themes/variables.css)
skin/images/add.svg (themes/images/add.svg)
skin/images/filters.svg (themes/images/filters.svg)
skin/images/filter-swatch.svg (themes/images/filter-swatch.svg)
+ skin/images/angle-swatch.svg (themes/images/angle-swatch.svg)
skin/images/pseudo-class.svg (themes/images/pseudo-class.svg)
skin/images/controls.png (themes/images/controls.png)
skin/images/controls@2x.png (themes/images/controls@2x.png)
skin/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)
skin/images/performance-icons.svg (themes/images/performance-icons.svg)
skin/widgets.css (themes/widgets.css)
skin/images/power.svg (themes/images/power.svg)
skin/images/filetypes/dir-close.svg (themes/images/filetypes/dir-close.svg)
--- a/devtools/client/shared/output-parser.js
+++ b/devtools/client/shared/output-parser.js
@@ -1,15 +1,16 @@
/* 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 {angleUtils} = require("devtools/shared/css-angle");
const {colorUtils} = require("devtools/shared/css-color");
const Services = require("Services");
const HTML_NS = "http://www.w3.org/1999/xhtml";
const BEZIER_KEYWORDS = ["linear", "ease-in-out", "ease-in", "ease-out",
"ease"];
@@ -19,16 +20,31 @@ const COLOR_TAKING_FUNCTIONS = ["linear-
"repeating-linear-gradient",
"-moz-repeating-linear-gradient",
"radial-gradient",
"-moz-radial-gradient",
"repeating-radial-gradient",
"-moz-repeating-radial-gradient",
"drop-shadow"];
+// Functions that accept an angle argument.
+const ANGLE_TAKING_FUNCTIONS = ["linear-gradient",
+ "-moz-linear-gradient",
+ "repeating-linear-gradient",
+ "-moz-repeating-linear-gradient",
+ "rotate",
+ "rotateX",
+ "rotateY",
+ "rotateZ",
+ "rotate3d",
+ "skew",
+ "skewX",
+ "skewY",
+ "hue-rotate"];
+
loader.lazyGetter(this, "DOMUtils", function() {
return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
});
/**
* This module is used to process text for output by developer tools. This means
* linking JS files with the debugger, CSS files with the style editor, JS
* functions with the debugger, placing color swatches next to colors and
@@ -43,17 +59,19 @@ loader.lazyGetter(this, "DOMUtils", func
* let parser = new OutputParser(document);
*
* parser.parseCssProperty("color", "red"); // Returns document fragment.
*/
function OutputParser(document) {
this.parsed = [];
this.doc = document;
this.colorSwatches = new WeakMap();
- this._onSwatchMouseDown = this._onSwatchMouseDown.bind(this);
+ this.angleSwatches = new WeakMap();
+ this._onColorSwatchMouseDown = this._onColorSwatchMouseDown.bind(this);
+ this._onAngleSwatchMouseDown = this._onAngleSwatchMouseDown.bind(this);
}
exports.OutputParser = OutputParser;
OutputParser.prototype = {
/**
* Parse a CSS property value given a property name.
*
@@ -62,17 +80,17 @@ OutputParser.prototype = {
* @param {String} value
* CSS Property value
* @param {Object} [options]
* Options object. For valid options and default values see
* _mergeOptions().
* @return {DocumentFragment}
* A document fragment containing color swatches etc.
*/
- parseCssProperty: function(name, value, options={}) {
+ parseCssProperty: function(name, value, options = {}) {
options = this._mergeOptions(options);
options.expectCubicBezier =
safeCssPropertySupportsType(name, DOMUtils.TYPE_TIMING_FUNCTION);
options.expectFilter = name === "filter";
options.supportsColor =
safeCssPropertySupportsType(name, DOMUtils.TYPE_COLOR) ||
safeCssPropertySupportsType(name, DOMUtils.TYPE_GRADIENT);
@@ -135,50 +153,56 @@ OutputParser.prototype = {
* @param {String} text
* Text to parse.
* @param {Object} [options]
* Options object. For valid options and default values see
* _mergeOptions().
* @return {DocumentFragment}
* A document fragment.
*/
- _parse: function(text, options={}) {
+ _parse: function(text, options = {}) {
text = text.trim();
this.parsed.length = 0;
let tokenStream = DOMUtils.getCSSLexer(text);
let parenDepth = 0;
let outerMostFunctionTakesColor = false;
let colorOK = function() {
return options.supportsColor ||
(options.expectFilter && parenDepth === 1 &&
outerMostFunctionTakesColor);
};
+ let angleOK = function(angle) {
+ return /^-?\d+\.?\d*(deg|rad|grad|turn)$/gi.test(angle);
+ };
+
while (true) {
let token = tokenStream.nextToken();
if (!token) {
break;
}
if (token.tokenType === "comment") {
continue;
}
switch (token.tokenType) {
case "function": {
- if (COLOR_TAKING_FUNCTIONS.indexOf(token.text) >= 0) {
- // The function can accept a color argument, and we know
- // it isn't special in some other way. So, we let it
- // through to the ordinary parsing loop so that colors
+ if (COLOR_TAKING_FUNCTIONS.includes(token.text) ||
+ ANGLE_TAKING_FUNCTIONS.includes(token.text)) {
+ // The function can accept a color or an angle argument, and we know
+ // it isn't special in some other way. So, we let it
+ // through to the ordinary parsing loop so that the value
// can be handled in a single place.
this._appendTextNode(text.substring(token.startOffset,
token.endOffset));
if (parenDepth === 0) {
- outerMostFunctionTakesColor = true;
+ outerMostFunctionTakesColor = COLOR_TAKING_FUNCTIONS.includes(
+ token.text);
}
++parenDepth;
} else {
let functionText = this._collectFunctionText(token, text,
tokenStream);
if (options.expectCubicBezier && token.text === "cubic-bezier") {
this._appendCubicBezier(functionText, options);
@@ -192,49 +216,61 @@ OutputParser.prototype = {
}
case "ident":
if (options.expectCubicBezier &&
BEZIER_KEYWORDS.indexOf(token.text) >= 0) {
this._appendCubicBezier(token.text, options);
} else if (colorOK() && DOMUtils.isValidCSSColor(token.text)) {
this._appendColor(token.text, options);
+ } else if (angleOK(token.text)) {
+ this._appendAngle(token.text, options);
} else {
this._appendTextNode(text.substring(token.startOffset,
token.endOffset));
}
break;
case "id":
case "hash": {
let original = text.substring(token.startOffset, token.endOffset);
if (colorOK() && DOMUtils.isValidCSSColor(original)) {
this._appendColor(original, options);
} else {
this._appendTextNode(original);
}
break;
}
-
+ case "dimension":
+ let value = text.substring(token.startOffset, token.endOffset);
+ if (angleOK(value)) {
+ this._appendAngle(value, options);
+ } else {
+ this._appendTextNode(value);
+ }
+ break;
case "url":
case "bad_url":
this._appendURL(text.substring(token.startOffset, token.endOffset),
token.text, options);
break;
case "symbol":
if (token.text === "(") {
++parenDepth;
- } else if (token.token === ")") {
+ } else if (token.text === ")") {
--parenDepth;
+ if (parenDepth === 0) {
+ outerMostFunctionTakesColor = false;
+ }
}
// falls through
default:
- this._appendTextNode(text.substring(token.startOffset,
- token.endOffset));
+ this._appendTextNode(
+ text.substring(token.startOffset, token.endOffset));
break;
}
}
let result = this._toDOM();
if (options.expectFilter && !options.filterSwatch) {
result = this._wrapFilter(text, options, result);
@@ -249,17 +285,17 @@ OutputParser.prototype = {
* @param {String} bezier
* The cubic-bezier timing function
* @param {Object} options
* Options object. For valid options and default values see
* _mergeOptions()
*/
_appendCubicBezier: function(bezier, options) {
let container = this._createNode("span", {
- "data-bezier": bezier
+ "data-bezier": bezier
});
if (options.bezierSwatchClass) {
let swatch = this._createNode("span", {
class: options.bezierSwatchClass
});
container.appendChild(swatch);
}
@@ -268,16 +304,58 @@ OutputParser.prototype = {
class: options.bezierClass
}, bezier);
container.appendChild(value);
this.parsed.push(container);
},
/**
+ * Append a angle value to the output
+ *
+ * @param {String} angle
+ * angle to append
+ * @param {Object} options
+ * Options object. For valid options and default values see
+ * _mergeOptions()
+ */
+ _appendAngle: function(angle, options) {
+ let angleObj = new angleUtils.CssAngle(angle);
+ let container = this._createNode("span", {
+ "data-angle": angle
+ });
+
+ if (options.angleSwatchClass) {
+ let swatch = this._createNode("span", {
+ class: options.angleSwatchClass
+ });
+ this.angleSwatches.set(swatch, angleObj);
+ swatch.addEventListener("mousedown", this._onAngleSwatchMouseDown, false);
+
+ // Add click listener to stop event propagation when shift key is pressed
+ // in order to prevent the value input to be focused.
+ // Bug 711942 will add a tooltip to edit angle values and we should
+ // be able to move this listener to Tooltip.js when it'll be implemented.
+ swatch.addEventListener("click", function(event) {
+ if (event.shiftKey) {
+ event.stopPropagation();
+ }
+ }, false);
+ container.appendChild(swatch);
+ }
+
+ let value = this._createNode("span", {
+ class: options.angleClass
+ }, angle);
+
+ container.appendChild(value);
+ this.parsed.push(container);
+ },
+
+ /**
* Check if a CSS property supports a specific value.
*
* @param {String} name
* CSS Property name to check
* @param {String} value
* CSS Property value to check
*/
_cssPropertySupportsValue: function(name, value) {
@@ -312,17 +390,17 @@ OutputParser.prototype = {
});
if (options.colorSwatchClass) {
let swatch = this._createNode("span", {
class: options.colorSwatchClass,
style: "background-color:" + color
});
this.colorSwatches.set(swatch, colorObj);
- swatch.addEventListener("mousedown", this._onSwatchMouseDown, false);
+ swatch.addEventListener("mousedown", this._onColorSwatchMouseDown, false);
container.appendChild(swatch);
}
if (options.defaultColorType) {
color = colorObj.toString();
container.dataset.color = color;
}
@@ -366,31 +444,46 @@ OutputParser.prototype = {
class: options.filterClass
});
value.appendChild(nodes);
container.appendChild(value);
return container;
},
- _onSwatchMouseDown: function(event) {
+ _onColorSwatchMouseDown: function(event) {
// Prevent text selection in the case of shift-click or double-click.
event.preventDefault();
if (!event.shiftKey) {
return;
}
let swatch = event.target;
let color = this.colorSwatches.get(swatch);
let val = color.nextColorUnit();
swatch.nextElementSibling.textContent = val;
},
+ _onAngleSwatchMouseDown: function(event) {
+ // Prevent text selection in the case of shift-click or double-click.
+ event.preventDefault();
+
+ if (!event.shiftKey) {
+ return;
+ }
+
+ let swatch = event.target;
+ let angle = this.angleSwatches.get(swatch);
+ let val = angle.nextAngleUnit();
+
+ swatch.nextElementSibling.textContent = val;
+ },
+
/**
* A helper function that sanitizes a possibly-unterminated URL.
*/
_sanitizeURL: function(url) {
// Re-lex the URL and add any needed termination characters.
let urlTokenizer = DOMUtils.getCSSLexer(url);
// Just read until EOF; there will only be a single token.
while (urlTokenizer.nextToken()) {
@@ -538,16 +631,19 @@ OutputParser.prototype = {
* - defaultColorType: true // Convert colors to the default type
* // selected in the options panel.
* - colorSwatchClass: "" // The class to use for color swatches.
* - colorClass: "" // The class to use for the color value
* // that follows the swatch.
* - bezierSwatchClass: "" // The class to use for bezier swatches.
* - bezierClass: "" // The class to use for the bezier value
* // that follows the swatch.
+ * - angleSwatchClass: "" // The class to use for angle swatches.
+ * - angleClass: "" // The class to use for the angle value
+ * // that follows the swatch.
* - supportsColor: false // Does the CSS property support colors?
* - urlClass: "" // The class to be used for url() links.
* - baseURI: "" // A string or nsIURI used to resolve
* // relative links.
* - filterSwatch: false // A special case for parsing a
* // "filter" property, causing the
* // parser to skip the call to
* // _wrapFilter. Used only for
@@ -557,16 +653,18 @@ OutputParser.prototype = {
*/
_mergeOptions: function(overrides) {
let defaults = {
defaultColorType: true,
colorSwatchClass: "",
colorClass: "",
bezierSwatchClass: "",
bezierClass: "",
+ angleSwatchClass: "",
+ angleClass: "",
supportsColor: false,
urlClass: "",
baseURI: "",
filterSwatch: false
};
if (typeof overrides.baseURI === "string") {
overrides.baseURI = Services.io.newURI(overrides.baseURI, null, null);
--- a/devtools/client/shared/test/browser.ini
+++ b/devtools/client/shared/test/browser.ini
@@ -14,16 +14,17 @@ support-files =
html-mdn-css-no-summary.html
html-mdn-css-no-summary-or-syntax.html
html-mdn-css-no-syntax.html
html-mdn-css-syntax-old-style.html
leakhunt.js
test-actor.js
test-actor-registry.js
+[browser_css_angle.js]
[browser_css_color.js]
[browser_cubic-bezier-01.js]
[browser_cubic-bezier-02.js]
[browser_cubic-bezier-03.js]
[browser_cubic-bezier-04.js]
[browser_cubic-bezier-05.js]
[browser_cubic-bezier-06.js]
[browser_filter-editor-01.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/shared/test/browser_css_angle.js
@@ -0,0 +1,126 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/* import-globals-from head.js */
+"use strict";
+
+const TEST_URI = "data:text/html;charset=utf-8,browser_css_angle.js";
+var {angleUtils} = require("devtools/shared/css-angle");
+
+add_task(function*() {
+ yield addTab("about:blank");
+ let [host] = yield createHost("bottom", TEST_URI);
+
+ info("Starting the test");
+ testAngleUtils();
+
+ host.destroy();
+ gBrowser.removeCurrentTab();
+});
+
+function testAngleUtils() {
+ let data = getTestData();
+
+ for (let {authored, deg, rad, grad, turn} of data) {
+ let angle = new angleUtils.CssAngle(authored);
+
+ // Check all values.
+ info("Checking values for " + authored);
+ is(angle.deg, deg, "color.deg === deg");
+ is(angle.rad, rad, "color.rad === rad");
+ is(angle.grad, grad, "color.grad === grad");
+ is(angle.turn, turn, "color.turn === turn");
+
+ testToString(angle, deg, rad, grad, turn);
+ }
+}
+
+function testToString(angle, deg, rad, grad, turn) {
+ angle.angleUnit = angleUtils.CssAngle.ANGLEUNIT.deg;
+ is(angle.toString(), deg, "toString() with deg type");
+
+ angle.angleUnit = angleUtils.CssAngle.ANGLEUNIT.rad;
+ is(angle.toString(), rad, "toString() with rad type");
+
+ angle.angleUnit = angleUtils.CssAngle.ANGLEUNIT.grad;
+ is(angle.toString(), grad, "toString() with grad type");
+
+ angle.angleUnit = angleUtils.CssAngle.ANGLEUNIT.turn;
+ is(angle.toString(), turn, "toString() with turn type");
+}
+
+function getTestData() {
+ return [{
+ authored: "0deg",
+ deg: "0deg",
+ rad: "0rad",
+ grad: "0grad",
+ turn: "0turn"
+ }, {
+ authored: "180deg",
+ deg: "180deg",
+ rad: "3.14rad",
+ grad: "200grad",
+ turn: "0.5turn"
+ }, {
+ authored: "180DEG",
+ deg: "180DEG",
+ rad: "3.14RAD",
+ grad: "200GRAD",
+ turn: "0.5TURN"
+ }, {
+ authored: `-${Math.PI}rad`,
+ deg: "-180deg",
+ rad: `-${Math.PI}rad`,
+ grad: "-200grad",
+ turn: "-0.5turn"
+ }, {
+ authored: `-${Math.PI}RAD`,
+ deg: "-180DEG",
+ rad: `-${Math.PI}RAD`,
+ grad: "-200GRAD",
+ turn: "-0.5TURN"
+ }, {
+ authored: "100grad",
+ deg: "90deg",
+ rad: "1.57rad",
+ grad: "100grad",
+ turn: "0.25turn"
+ }, {
+ authored: "100GRAD",
+ deg: "90DEG",
+ rad: "1.57RAD",
+ grad: "100GRAD",
+ turn: "0.25TURN"
+ }, {
+ authored: "-1turn",
+ deg: "-360deg",
+ rad: "-6.28rad",
+ grad: "-400grad",
+ turn: "-1turn"
+ }, {
+ authored: "-10TURN",
+ deg: "-3600DEG",
+ rad: "-62.83RAD",
+ grad: "-4000GRAD",
+ turn: "-10TURN"
+ }, {
+ authored: "inherit",
+ deg: "inherit",
+ rad: "inherit",
+ grad: "inherit",
+ turn: "inherit"
+ }, {
+ authored: "initial",
+ deg: "initial",
+ rad: "initial",
+ grad: "initial",
+ turn: "initial"
+ }, {
+ authored: "unset",
+ deg: "unset",
+ rad: "unset",
+ grad: "unset",
+ turn: "unset"
+ }];
+}
--- a/devtools/client/shared/test/browser_outputparser.js
+++ b/devtools/client/shared/test/browser_outputparser.js
@@ -17,16 +17,17 @@ function* performTest() {
let [host, , doc] = yield createHost("bottom", "data:text/html," +
"<h1>browser_outputParser.js</h1><div></div>");
let parser = new OutputParser(doc);
testParseCssProperty(doc, parser);
testParseCssVar(doc, parser);
testParseURL(doc, parser);
testParseFilter(doc, parser);
+ testParseAngle(doc, parser);
host.destroy();
}
// Class name used in color swatch.
var COLOR_TEST_CLASS = "test-class";
// Create a new CSS color-parsing test. |name| is the name of the CSS
@@ -96,18 +97,18 @@ function testParseCssProperty(doc, parse
"blur(1px) drop-shadow(0 0 0 ",
{name: "blue"},
") url(red.svg#blue)</span></span>"]),
makeColorTest("color", "currentColor", ["currentColor"]),
// Test a very long property.
makeColorTest("background-image",
- "linear-gradient(0deg, transparent 0, transparent 5%,#F00 0, #F00 10%,#FF0 0, #FF0 15%,#0F0 0, #0F0 20%,#0FF 0, #0FF 25%,#00F 0, #00F 30%,#800 0, #800 35%,#880 0, #880 40%,#080 0, #080 45%,#088 0, #088 50%,#008 0, #008 55%,#FFF 0, #FFF 60%,#EEE 0, #EEE 65%,#CCC 0, #CCC 70%,#999 0, #999 75%,#666 0, #666 80%,#333 0, #333 85%,#111 0, #111 90%,#000 0, #000 95%,transparent 0, transparent 100%)",
- ["linear-gradient(0deg, ", {name: "transparent"},
+ "linear-gradient(to left, transparent 0, transparent 5%,#F00 0, #F00 10%,#FF0 0, #FF0 15%,#0F0 0, #0F0 20%,#0FF 0, #0FF 25%,#00F 0, #00F 30%,#800 0, #800 35%,#880 0, #880 40%,#080 0, #080 45%,#088 0, #088 50%,#008 0, #008 55%,#FFF 0, #FFF 60%,#EEE 0, #EEE 65%,#CCC 0, #CCC 70%,#999 0, #999 75%,#666 0, #666 80%,#333 0, #333 85%,#111 0, #111 90%,#000 0, #000 95%,transparent 0, transparent 100%)",
+ ["linear-gradient(to left, ", {name: "transparent"},
" 0, ", {name: "transparent"},
" 5%,", {name: "#F00"},
" 0, ", {name: "#F00"},
" 10%,", {name: "#FF0"},
" 0, ", {name: "#FF0"},
" 15%,", {name: "#0F0"},
" 0, ", {name: "#0F0"},
" 20%,", {name: "#0FF"},
@@ -254,8 +255,25 @@ function testParseFilter(doc, parser) {
let frag = parser.parseCssProperty("filter", "something invalid", {
filterSwatchClass: "test-filterswatch"
});
let swatchCount = frag.querySelectorAll(".test-filterswatch").length;
is(swatchCount, 1, "filter swatch was created");
}
+function testParseAngle(doc, parser) {
+ let frag = parser.parseCssProperty("image-orientation", "90deg", {
+ angleSwatchClass: "test-angleswatch"
+ });
+
+ let swatchCount = frag.querySelectorAll(".test-angleswatch").length;
+ is(swatchCount, 1, "angle swatch was created");
+
+ frag = parser.parseCssProperty("background-image",
+ "linear-gradient(90deg, red, blue", {
+ angleSwatchClass: "test-angleswatch"
+ });
+
+ swatchCount = frag.querySelectorAll(".test-angleswatch").length;
+ is(swatchCount, 1, "angle swatch was created");
+}
+
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/angle-swatch.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12px" height="12px">
+ <mask id="angle-mask">
+ <rect width="100%" height="100%" fill="#fff"/>
+ <polygon points="6 6, 12 12, 0 12, 0 0, 6 0, 6 6"/>
+ </mask>
+ <mask id="circle-mask">
+ <circle cx="6" cy="6" r="6" fill="#fff"/>
+ </mask>
+ <circle cx="6" cy="6" r="6" fill="#fff"/>
+ <circle cx="6" cy="6" r="6" mask="url(#angle-mask)" fill="#aeb0b1"/>
+ <line x1="6" y1="0" x2="6" y2="6" stroke-width="0.5" stroke="rgba(0,0,0,0.5)"></line>
+ <line x1="6" y1="6" x2="12" y2="12" stroke-width="0.5" stroke="rgba(0,0,0,0.5)" mask="url(#circle-mask)"></line>
+</svg>
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -315,16 +315,21 @@
background-size: 1em;
}
.ruleview-filterswatch {
background: url("chrome://devtools/skin/images/filter-swatch.svg");
background-size: 1em;
}
+.ruleview-angleswatch {
+ background: url("chrome://devtools/skin/images/angle-swatch.svg");
+ background-size: 1em;
+}
+
@media (min-resolution: 1.1dppx) {
.ruleview-bezierswatch {
background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
background-size: 1em;
}
}
.ruleview-overridden {
new file mode 100644
--- /dev/null
+++ b/devtools/shared/css-angle.js
@@ -0,0 +1,348 @@
+/* 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} = require("chrome");
+
+const SPECIALVALUES = new Set([
+ "initial",
+ "inherit",
+ "unset"
+]);
+
+/**
+ * This module is used to convert between various angle units.
+ *
+ * Usage:
+ * let {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
+ * let {angleUtils} = require("devtools/shared/css-angle");
+ * let angle = new angleUtils.CssAngle("180deg");
+ *
+ * angle.authored === "180deg"
+ * angle.valid === true
+ * angle.rad === "3,14rad"
+ * angle.grad === "200grad"
+ * angle.turn === "0.5turn"
+ *
+ * angle.toString() === "180deg"; // Outputs the angle value and its unit
+ * // Angle objects can be reused
+ * angle.newAngle("-1TURN") === "-1TURN"; // true
+ */
+
+function CssAngle(angleValue) {
+ this.newAngle(angleValue);
+}
+
+module.exports.angleUtils = {
+ CssAngle: CssAngle,
+ classifyAngle: classifyAngle
+};
+
+CssAngle.ANGLEUNIT = {
+ "deg": "deg",
+ "rad": "rad",
+ "grad": "grad",
+ "turn": "turn"
+};
+
+CssAngle.prototype = {
+ _angleUnit: null,
+ _angleUnitUppercase: false,
+
+ // The value as-authored.
+ authored: null,
+ // A lower-cased copy of |authored|.
+ lowerCased: null,
+
+ get angleUnit() {
+ if (this._angleUnit === null) {
+ this._angleUnit = classifyAngle(this.authored);
+ }
+ return this._angleUnit;
+ },
+
+ set angleUnit(unit) {
+ this._angleUnit = unit;
+ },
+
+ get valid() {
+ return /^-?\d+\.?\d*(deg|rad|grad|turn)$/gi.test(this.authored);
+ },
+
+ get specialValue() {
+ return SPECIALVALUES.has(this.lowerCased) ? this.authored : null;
+ },
+
+ get deg() {
+ let invalidOrSpecialValue = this._getInvalidOrSpecialValue();
+ if (invalidOrSpecialValue !== false) {
+ return invalidOrSpecialValue;
+ }
+
+ let angleUnit = classifyAngle(this.authored);
+ if (angleUnit === CssAngle.ANGLEUNIT.deg) {
+ // The angle is valid and is in degree.
+ return this.authored;
+ }
+
+ let degValue;
+ if (angleUnit === CssAngle.ANGLEUNIT.rad) {
+ // The angle is valid and is in radian.
+ degValue = this.authoredAngleValue / (Math.PI / 180);
+ }
+
+ if (angleUnit === CssAngle.ANGLEUNIT.grad) {
+ // The angle is valid and is in gradian.
+ degValue = this.authoredAngleValue * 0.9;
+ }
+
+ if (angleUnit === CssAngle.ANGLEUNIT.turn) {
+ // The angle is valid and is in turn.
+ degValue = this.authoredAngleValue * 360;
+ }
+
+ let unitStr = CssAngle.ANGLEUNIT.deg;
+ if (this._angleUnitUppercase === true) {
+ unitStr = unitStr.toUpperCase();
+ }
+ return `${Math.round(degValue * 100) / 100}${unitStr}`;
+ },
+
+ get rad() {
+ let invalidOrSpecialValue = this._getInvalidOrSpecialValue();
+ if (invalidOrSpecialValue !== false) {
+ return invalidOrSpecialValue;
+ }
+
+ let unit = classifyAngle(this.authored);
+ if (unit === CssAngle.ANGLEUNIT.rad) {
+ // The angle is valid and is in radian.
+ return this.authored;
+ }
+
+ let radValue;
+ if (unit === CssAngle.ANGLEUNIT.deg) {
+ // The angle is valid and is in degree.
+ radValue = this.authoredAngleValue * (Math.PI / 180);
+ }
+
+ if (unit === CssAngle.ANGLEUNIT.grad) {
+ // The angle is valid and is in gradian.
+ radValue = this.authoredAngleValue * 0.9 * (Math.PI / 180);
+ }
+
+ if (unit === CssAngle.ANGLEUNIT.turn) {
+ // The angle is valid and is in turn.
+ radValue = this.authoredAngleValue * 360 * (Math.PI / 180);
+ }
+
+ let unitStr = CssAngle.ANGLEUNIT.rad;
+ if (this._angleUnitUppercase === true) {
+ unitStr = unitStr.toUpperCase();
+ }
+ return `${Math.round(radValue * 100) / 100}${unitStr}`;
+ },
+
+ get grad() {
+ let invalidOrSpecialValue = this._getInvalidOrSpecialValue();
+ if (invalidOrSpecialValue !== false) {
+ return invalidOrSpecialValue;
+ }
+
+ let unit = classifyAngle(this.authored);
+ if (unit === CssAngle.ANGLEUNIT.grad) {
+ // The angle is valid and is in gradian
+ return this.authored;
+ }
+
+ let gradValue;
+ if (unit === CssAngle.ANGLEUNIT.deg) {
+ // The angle is valid and is in degree
+ gradValue = this.authoredAngleValue / 0.9;
+ }
+
+ if (unit === CssAngle.ANGLEUNIT.rad) {
+ // The angle is valid and is in radian
+ gradValue = this.authoredAngleValue / 0.9 / (Math.PI / 180);
+ }
+
+ if (unit === CssAngle.ANGLEUNIT.turn) {
+ // The angle is valid and is in turn
+ gradValue = this.authoredAngleValue * 400;
+ }
+
+ let unitStr = CssAngle.ANGLEUNIT.grad;
+ if (this._angleUnitUppercase === true) {
+ unitStr = unitStr.toUpperCase();
+ }
+ return `${Math.round(gradValue * 100) / 100}${unitStr}`;
+ },
+
+ get turn() {
+ let invalidOrSpecialValue = this._getInvalidOrSpecialValue();
+ if (invalidOrSpecialValue !== false) {
+ return invalidOrSpecialValue;
+ }
+
+ let unit = classifyAngle(this.authored);
+ if (unit === CssAngle.ANGLEUNIT.turn) {
+ // The angle is valid and is in turn
+ return this.authored;
+ }
+
+ let turnValue;
+ if (unit === CssAngle.ANGLEUNIT.deg) {
+ // The angle is valid and is in degree
+ turnValue = this.authoredAngleValue / 360;
+ }
+
+ if (unit === CssAngle.ANGLEUNIT.rad) {
+ // The angle is valid and is in radian
+ turnValue = (this.authoredAngleValue / (Math.PI / 180)) / 360;
+ }
+
+ if (unit === CssAngle.ANGLEUNIT.grad) {
+ // The angle is valid and is in gradian
+ turnValue = this.authoredAngleValue / 400;
+ }
+
+ let unitStr = CssAngle.ANGLEUNIT.turn;
+ if (this._angleUnitUppercase === true) {
+ unitStr = unitStr.toUpperCase();
+ }
+ return `${Math.round(turnValue * 100) / 100}${unitStr}`;
+ },
+
+ /**
+ * Check whether the angle value is in the special list e.g.
+ * inherit or invalid.
+ *
+ * @return {String|Boolean}
+ * - If the current angle is a special value e.g. "inherit" then
+ * return the angle.
+ * - If the angle is invalid return an empty string.
+ * - If the angle is a regular angle e.g. 90deg so we return false
+ * to indicate that the angle is neither invalid nor special.
+ */
+ _getInvalidOrSpecialValue: function() {
+ if (this.specialValue) {
+ return this.specialValue;
+ }
+ if (!this.valid) {
+ return "";
+ }
+ return false;
+ },
+
+ /**
+ * Change angle
+ *
+ * @param {String} angle
+ * Any valid angle value + unit string
+ */
+ newAngle: function(angle) {
+ // Store a lower-cased version of the angle to help with format
+ // testing. The original text is kept as well so it can be
+ // returned when needed.
+ this.lowerCased = angle.toLowerCase();
+ this._angleUnitUppercase = (angle === angle.toUpperCase());
+ this.authored = angle;
+
+ let reg = new RegExp(
+ `(${Object.keys(CssAngle.ANGLEUNIT).join("|")})$`, "i");
+ let unitStartIdx = angle.search(reg);
+ this.authoredAngleValue = angle.substring(0, unitStartIdx);
+ this.authoredAngleUnit = angle.substring(unitStartIdx, angle.length);
+
+ return this;
+ },
+
+ nextAngleUnit: function() {
+ // Get a reordered array from the formats object
+ // to have the current format at the front so we can cycle through.
+ let formats = Object.keys(CssAngle.ANGLEUNIT);
+ let putOnEnd = formats.splice(0, formats.indexOf(this.angleUnit));
+ formats = formats.concat(putOnEnd);
+ let currentDisplayedValue = this[formats[0]];
+
+ for (let format of formats) {
+ if (this[format].toLowerCase() !== currentDisplayedValue.toLowerCase()) {
+ this.angleUnit = CssAngle.ANGLEUNIT[format];
+ break;
+ }
+ }
+ return this.toString();
+ },
+
+ /**
+ * Return a string representing a angle
+ */
+ toString: function() {
+ let angle;
+
+ switch (this.angleUnit) {
+ case CssAngle.ANGLEUNIT.deg:
+ angle = this.deg;
+ break;
+ case CssAngle.ANGLEUNIT.rad:
+ angle = this.rad;
+ break;
+ case CssAngle.ANGLEUNIT.grad:
+ angle = this.grad;
+ break;
+ case CssAngle.ANGLEUNIT.turn:
+ angle = this.turn;
+ break;
+ default:
+ angle = this.deg;
+ }
+
+ if (this._angleUnitUppercase &&
+ this.angleUnit != CssAngle.ANGLEUNIT.authored) {
+ angle = angle.toUpperCase();
+ }
+ return angle;
+ },
+
+ /**
+ * This method allows comparison of CssAngle objects using ===.
+ */
+ valueOf: function() {
+ return this.deg;
+ },
+};
+
+/**
+ * Given a color, classify its type as one of the possible angle
+ * units, as known by |CssAngle.angleUnit|.
+ *
+ * @param {String} value
+ * The angle, in any form accepted by CSS.
+ * @return {String}
+ * The angle classification, one of "deg", "rad", "grad", or "turn".
+ */
+function classifyAngle(value) {
+ value = value.toLowerCase();
+ if (value.endsWith("deg")) {
+ return CssAngle.ANGLEUNIT.deg;
+ }
+
+ if (value.endsWith("grad")) {
+ return CssAngle.ANGLEUNIT.grad;
+ }
+
+ if (value.endsWith("rad")) {
+ return CssAngle.ANGLEUNIT.rad;
+ }
+ if (value.endsWith("turn")) {
+ return CssAngle.ANGLEUNIT.turn;
+ }
+
+ return CssAngle.ANGLEUNIT.deg;
+}
+
+loader.lazyGetter(this, "DOMUtils", function() {
+ return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
+});
--- a/devtools/shared/moz.build
+++ b/devtools/shared/moz.build
@@ -34,16 +34,17 @@ MOCHITEST_CHROME_MANIFESTS += ['tests/mo
XPCSHELL_TESTS_MANIFESTS += ['tests/unit/xpcshell.ini']
JAR_MANIFESTS += ['jar.mn']
DevToolsModules(
'async-storage.js',
'async-utils.js',
'content-observer.js',
+ 'css-angle.js',
'css-color.js',
'deprecated-sync-thenables.js',
'DevToolsUtils.js',
'event-emitter.js',
'event-parsers.js',
'indentation.js',
'Loader.jsm',
'Parser.jsm',
new file mode 100644
--- /dev/null
+++ b/devtools/shared/tests/unit/test_cssAngle.js
@@ -0,0 +1,30 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test classifyAngle.
+
+"use strict";
+
+const {angleUtils} = require("devtools/shared/css-angle");
+
+const CLASSIFY_TESTS = [
+ { input: "180deg", output: "deg" },
+ { input: "-180deg", output: "deg" },
+ { input: "180DEG", output: "deg" },
+ { input: "200rad", output: "rad" },
+ { input: "-200rad", output: "rad" },
+ { input: "200RAD", output: "rad" },
+ { input: "0.5grad", output: "grad" },
+ { input: "-0.5grad", output: "grad" },
+ { input: "0.5GRAD", output: "grad" },
+ { input: "0.33turn", output: "turn" },
+ { input: "0.33TURN", output: "turn" },
+ { input: "-0.33turn", output: "turn" }
+];
+
+function run_test() {
+ for (let test of CLASSIFY_TESTS) {
+ let result = angleUtils.classifyAngle(test.input);
+ equal(result, test.output, "test classifyAngle(" + test.input + ")");
+ }
+}
--- a/devtools/shared/tests/unit/xpcshell.ini
+++ b/devtools/shared/tests/unit/xpcshell.ini
@@ -14,14 +14,15 @@ support-files =
[test_fetch-resource.js]
[test_indentation.js]
[test_independent_loaders.js]
[test_invisible_loader.js]
[test_safeErrorString.js]
[test_defineLazyPrototypeGetter.js]
[test_async-utils.js]
[test_consoleID.js]
+[test_cssAngle.js]
[test_cssColor.js]
[test_prettifyCSS.js]
[test_require_lazy.js]
[test_require.js]
[test_stack.js]
[test_executeSoon.js]
