Diff
Modified: trunk/LayoutTests/ChangeLog (192039 => 192040)
--- trunk/LayoutTests/ChangeLog 2015-11-04 23:34:47 UTC (rev 192039)
+++ trunk/LayoutTests/ChangeLog 2015-11-04 23:59:48 UTC (rev 192040)
@@ -1,3 +1,13 @@
+2015-11-04 Joseph Pecoraro <pecor...@apple.com>
+
+ Web Inspector: Support #rgba and #rrggbbaa syntax
+ https://bugs.webkit.org/show_bug.cgi?id=150894
+
+ Reviewed by Timothy Hatcher.
+
+ * inspector/model/color-expected.txt: Added.
+ * inspector/model/color.html: Added.
+
2015-11-04 Wenson Hsieh <wenson_hs...@apple.com>
Fix crashing and flaky UIScriptController-based tests in fast/events/ios
Added: trunk/LayoutTests/inspector/model/color-expected.txt (0 => 192040)
--- trunk/LayoutTests/inspector/model/color-expected.txt (rev 0)
+++ trunk/LayoutTests/inspector/model/color-expected.txt 2015-11-04 23:59:48 UTC (rev 192040)
@@ -0,0 +1,121 @@
+Tests for the WebInspector.Color model object.
+
+
+== Running test suite: WebInspector.Color
+-- Running test case: WebInspector.Color.fromString
+PASS: '#000' should be detected
+PASS: '#000' was the expected 'Short HEX' format
+PASS: '#a0A' should be detected
+PASS: '#a0A' was the expected 'Short HEX' format
+PASS: '#000000' should be detected
+PASS: '#000000' was the expected 'HEX' format
+PASS: '#a0Aa0A' should be detected
+PASS: '#a0Aa0A' was the expected 'HEX' format
+PASS: '#0000' should be detected
+PASS: '#0000' was the expected 'Short HEX with Alpha' format
+PASS: '#a0Af' should be detected
+PASS: '#a0Af' was the expected 'Short HEX with Alpha' format
+PASS: '#00000000' should be detected
+PASS: '#00000000' was the expected 'HEX with Alpha' format
+PASS: '#a0Aa0Aff' should be detected
+PASS: '#a0Aa0Aff' was the expected 'HEX with Alpha' format
+PASS: 'rgb(1,2,3)' should be detected
+PASS: 'rgb(1,2,3)' was the expected 'RGB' format
+PASS: 'RGB(1,2,3)' should be detected
+PASS: 'RGB(1,2,3)' was the expected 'RGB' format
+PASS: 'rgb(999, 999, 999)' should be detected
+PASS: 'rgb(999, 999, 999)' was the expected 'RGB' format
+PASS: 'rgb( 1 , 1 , 1 )' should be detected
+PASS: 'rgb( 1 , 1 , 1 )' was the expected 'RGB' format
+PASS: 'rgba(1,2,3,0)' should be detected
+PASS: 'rgba(1,2,3,0)' was the expected 'RGBA' format
+PASS: 'RGBA(1,2,3,0)' should be detected
+PASS: 'RGBA(1,2,3,0)' was the expected 'RGBA' format
+PASS: 'rgba(999, 999, 999, 999)' should be detected
+PASS: 'rgba(999, 999, 999, 999)' was the expected 'RGBA' format
+PASS: 'rgba( 1 , 1 , 1 , 0.5 )' should be detected
+PASS: 'rgba( 1 , 1 , 1 , 0.5 )' was the expected 'RGBA' format
+PASS: 'hsl(0, 0%, 50%)' should be detected
+PASS: 'hsl(0, 0%, 50%)' was the expected 'HSL' format
+PASS: 'HSL(0, 0%, 50%)' should be detected
+PASS: 'HSL(0, 0%, 50%)' was the expected 'HSL' format
+PASS: 'hsl(999, 999%, 999%)' should be detected
+PASS: 'hsl(999, 999%, 999%)' was the expected 'HSL' format
+PASS: 'hsl( 0 , 0% , 50% )' should be detected
+PASS: 'hsl( 0 , 0% , 50% )' was the expected 'HSL' format
+PASS: 'hsla(0, 0%, 50%, 0)' should be detected
+PASS: 'hsla(0, 0%, 50%, 0)' was the expected 'HSLA' format
+PASS: 'HSLA(0, 0%, 50%, 0)' should be detected
+PASS: 'HSLA(0, 0%, 50%, 0)' was the expected 'HSLA' format
+PASS: 'hsla(999, 999%, 999%, 999)' should be detected
+PASS: 'hsla(999, 999%, 999%, 999)' was the expected 'HSLA' format
+PASS: 'hsla( 0 , 0% , 50% , 0.5 )' should be detected
+PASS: 'hsla( 0 , 0% , 50% , 0.5 )' was the expected 'HSLA' format
+PASS: 'blue' should be detected
+PASS: 'blue' was the expected 'Nickname' format
+PASS: 'BLuE' should be detected
+PASS: 'BLuE' was the expected 'Nickname' format
+PASS: 'midnightblue' should be detected
+PASS: 'midnightblue' was the expected 'Nickname' format
+PASS: 'royalblue' should be detected
+PASS: 'royalblue' was the expected 'Nickname' format
+PASS: 'steelblue' should be detected
+PASS: 'steelblue' was the expected 'Nickname' format
+PASS: 'transparent' should be detected
+PASS: 'transparent' was the expected 'Nickname' format
+
+PASS: ' #000 ' should not be detected
+PASS: '#rgb' should not be detected
+PASS: '#1' should not be detected
+PASS: '#12' should not be detected
+PASS: '#12345' should not be detected
+PASS: '#1234567' should not be detected
+PASS: '#123456789' should not be detected
+PASS: 'rgb(255, 255, 255, 0.5)' should not be detected
+PASS: 'rgba(255, 255, 255, 0.5, 1)' should not be detected
+PASS: 'hsl(0, 0%, 50%, 1)' should not be detected
+PASS: 'hsla(0, 0%, 50%, 1, 2)' should not be detected
+PASS: 'superblue' should not be detected
+
+-- Running test case: WebInspector.Color properties
+PASS: 'red' should have alpha of 1.
+PASS: 'red' should be simple.
+PASS: 'red' has rgb of [255, 0, 0].
+PASS: 'red' has rgba of [255, 0, 0, 1].
+PASS: 'red' has hsl of [0, 100, 50].
+PASS: 'red' has hsla of [0, 100, 50, 1].
+PASS: 'transparent' should have alpha of 0.
+PASS: 'transparent' should be not be simple.
+PASS: 'transparent' has rgb of [0, 0, 0].
+PASS: 'transparent' has rgba of [0, 0, 0, 0].
+PASS: 'transparent' has hsl of [0, 0, 0].
+PASS: 'transparent' has hsla of [0, 0, 0, 0].
+
+-- Running test case: WebInspector.Color.prototype.nextFormat
+PASS: All format phases of 'transparent' should be as expected.
+PASS: All format phases of 'red' should be as expected.
+PASS: All format phases of 'rgb(100, 150, 200)' should be as expected.
+PASS: All format phases of 'rgba(100, 150, 200, 0.5)' should be as expected.
+
+-- Running test case: WebInspector.Color.prototype.toString
+PASS: Color as 'Original' should be 'RED'
+PASS: Color as 'Nickname' should be 'red'
+PASS: Color as 'Short HEX' should be '#f00'
+PASS: Color as 'HEX' should be '#ff0000'
+PASS: Color as 'Short HEX with Alpha' should be '#f00f'
+PASS: Color as 'HEX with Alpha' should be '#ff0000ff'
+PASS: Color as 'RGB' should be 'rgb(255, 0, 0)'
+PASS: Color as 'RGBA' should be 'rgba(255, 0, 0, 1)'
+PASS: Color as 'HSL' should be 'hsl(0, 100%, 50%)'
+PASS: Color as 'HSLA' should be 'hsla(0, 100%, 50%, 1)'
+PASS: Color as 'Original' should be 'rgba(100, 200, 255, 0.5)'
+PASS: Color as 'Nickname' should be 'rgba(100, 200, 255, 0.5)'
+PASS: Color as 'Short HEX' should be 'rgba(100, 200, 255, 0.5)'
+PASS: Color as 'HEX' should be 'rgba(100, 200, 255, 0.5)'
+PASS: Color as 'Short HEX with Alpha' should be '#64c8ff80'
+PASS: Color as 'HEX with Alpha' should be '#64c8ff80'
+PASS: Color as 'RGB' should be 'rgba(100, 200, 255, 0.5)'
+PASS: Color as 'RGBA' should be 'rgba(100, 200, 255, 0.5)'
+PASS: Color as 'HSL' should be 'hsla(201, 100%, 70%, 0.5)'
+PASS: Color as 'HSLA' should be 'hsla(201, 100%, 70%, 0.5)'
+
Added: trunk/LayoutTests/inspector/model/color.html (0 => 192040)
--- trunk/LayoutTests/inspector/model/color.html (rev 0)
+++ trunk/LayoutTests/inspector/model/color.html 2015-11-04 23:59:48 UTC (rev 192040)
@@ -0,0 +1,262 @@
+<!doctype html>
+<html>
+<head>
+<script src=""
+<script>
+function test()
+{
+ function formatToString(format) {
+ switch (format) {
+ case WebInspector.Color.Format.Original:
+ return "Original";
+ case WebInspector.Color.Format.Nickname:
+ return "Nickname";
+ case WebInspector.Color.Format.HEX:
+ return "HEX";
+ case WebInspector.Color.Format.ShortHEX:
+ return "Short HEX";
+ case WebInspector.Color.Format.HEXAlpha:
+ return "HEX with Alpha";
+ case WebInspector.Color.Format.ShortHEXAlpha:
+ return "Short HEX with Alpha";
+ case WebInspector.Color.Format.RGB:
+ return "RGB";
+ case WebInspector.Color.Format.RGBA:
+ return "RGBA";
+ case WebInspector.Color.Format.HSL:
+ return "HSL";
+ case WebInspector.Color.Format.HSLA:
+ return "HSLA";
+ default:
+ return "Unexpected format";
+ }
+ }
+
+ let suite = InspectorTest.createAsyncSuite("WebInspector.Color");
+
+ suite.addTestCase({
+ name: "WebInspector.Color.fromString",
+ description: "Test we can detect colors from strings.",
+ test: (resolve, reject) => {
+ function testGood(string, expectedFormat) {
+ let color = WebInspector.Color.fromString(string);
+ InspectorTest.expectThat(color instanceof WebInspector.Color, `'${string}' should be detected`);
+ InspectorTest.expectThat(color && color.format === expectedFormat, `'${string}' was the expected '${formatToString(expectedFormat)}' format`);
+ }
+
+ function testBad(string) {
+ let color = WebInspector.Color.fromString(string);
+ InspectorTest.expectThat(color === null, `'${string}' should not be detected`);
+ if (color) InspectorTest.log(`'${string}' detected with format '${formatToString(color.format)}'`);
+ }
+
+ testGood("#000", WebInspector.Color.Format.ShortHEX);
+ testGood("#a0A", WebInspector.Color.Format.ShortHEX);
+ testGood("#000000", WebInspector.Color.Format.HEX);
+ testGood("#a0Aa0A", WebInspector.Color.Format.HEX);
+
+ testGood("#0000", WebInspector.Color.Format.ShortHEXAlpha);
+ testGood("#a0Af", WebInspector.Color.Format.ShortHEXAlpha);
+ testGood("#00000000", WebInspector.Color.Format.HEXAlpha);
+ testGood("#a0Aa0Aff", WebInspector.Color.Format.HEXAlpha);
+
+ testGood("rgb(1,2,3)", WebInspector.Color.Format.RGB);
+ testGood("RGB(1,2,3)", WebInspector.Color.Format.RGB);
+ testGood("rgb(999, 999, 999)", WebInspector.Color.Format.RGB);
+ testGood("rgb( 1 , 1 , 1 )", WebInspector.Color.Format.RGB);
+
+ testGood("rgba(1,2,3,0)", WebInspector.Color.Format.RGBA);
+ testGood("RGBA(1,2,3,0)", WebInspector.Color.Format.RGBA);
+ testGood("rgba(999, 999, 999, 999)", WebInspector.Color.Format.RGBA);
+ testGood("rgba( 1 , 1 , 1 , 0.5 )", WebInspector.Color.Format.RGBA);
+
+ testGood("hsl(0, 0%, 50%)", WebInspector.Color.Format.HSL);
+ testGood("HSL(0, 0%, 50%)", WebInspector.Color.Format.HSL);
+ testGood("hsl(999, 999%, 999%)", WebInspector.Color.Format.HSL);
+ testGood("hsl( 0 , 0% , 50% )", WebInspector.Color.Format.HSL);
+
+ testGood("hsla(0, 0%, 50%, 0)", WebInspector.Color.Format.HSLA);
+ testGood("HSLA(0, 0%, 50%, 0)", WebInspector.Color.Format.HSLA);
+ testGood("hsla(999, 999%, 999%, 999)", WebInspector.Color.Format.HSLA);
+ testGood("hsla( 0 , 0% , 50% , 0.5 )", WebInspector.Color.Format.HSLA);
+
+ testGood("blue", WebInspector.Color.Format.Nickname);
+ testGood("BLuE", WebInspector.Color.Format.Nickname);
+ testGood("midnightblue", WebInspector.Color.Format.Nickname);
+ testGood("royalblue", WebInspector.Color.Format.Nickname);
+ testGood("steelblue", WebInspector.Color.Format.Nickname);
+ testGood("transparent", WebInspector.Color.Format.Nickname);
+
+ InspectorTest.log("");
+
+ testBad(" #000 "); // whitespace
+ testBad("#rgb"); // bad hex
+ testBad("#1"); // 1
+ testBad("#12"); // 2
+ testBad("#12345"); // 5
+ testBad("#1234567"); // 7
+ testBad("#123456789"); // 9
+ testBad("rgb(255, 255, 255, 0.5)"); // extra values
+ testBad("rgba(255, 255, 255, 0.5, 1)"); // extra values
+ testBad("hsl(0, 0%, 50%, 1)"); // extra value
+ testBad("hsla(0, 0%, 50%, 1, 2)"); // extra values
+ testBad("superblue"); // not a nickname
+
+ // FIXME: currentColor?
+ // FIXME: Should we consider missing %s as bad? Currently we just strip them.
+ // testBad("hsl(0, 0, 50)"); // missing %s
+ // testBad("hsla(0, 0, 50, 1)"); // missing %s
+
+ resolve();
+ }
+ });
+
+ suite.addTestCase({
+ name: "WebInspector.Color properties",
+ description: "Test different color properties.",
+ test: (resolve, reject) => {
+ function shallowEqual(arr1, arr2) {
+ if (arr1.length !== arr2.length)
+ return false;
+
+ for (let i = 0; i < arr1.length; ++i) {
+ if (arr1[i] !== arr2[i])
+ return false;
+ }
+
+ return true;
+ }
+
+ let color;
+
+ color = WebInspector.Color.fromString("red");
+ InspectorTest.expectThat(color.alpha === 1, "'red' should have alpha of 1.");
+ InspectorTest.expectThat(color.simple === true, "'red' should be simple.");
+ InspectorTest.expectThat(shallowEqual(color.rgb, [255, 0, 0]), "'red' has rgb of [255, 0, 0].");
+ InspectorTest.expectThat(shallowEqual(color.rgba, [255, 0, 0, 1]), "'red' has rgba of [255, 0, 0, 1].");
+ InspectorTest.expectThat(shallowEqual(color.hsl, [0, 100, 50]), "'red' has hsl of [0, 100, 50].");
+ InspectorTest.expectThat(shallowEqual(color.hsla, [0, 100, 50, 1]), "'red' has hsla of [0, 100, 50, 1].");
+
+ color = WebInspector.Color.fromString("transparent");
+ InspectorTest.expectThat(color.alpha === 0, "'transparent' should have alpha of 0.");
+ InspectorTest.expectThat(color.simple === false, "'transparent' should be not be simple.");
+ InspectorTest.expectThat(shallowEqual(color.rgb, [0, 0, 0]), "'transparent' has rgb of [0, 0, 0].");
+ InspectorTest.expectThat(shallowEqual(color.rgba, [0, 0, 0, 0]), "'transparent' has rgba of [0, 0, 0, 0].");
+ InspectorTest.expectThat(shallowEqual(color.hsl, [0, 0, 0]), "'transparent' has hsl of [0, 0, 0].");
+ InspectorTest.expectThat(shallowEqual(color.hsla, [0, 0, 0, 0]), "'transparent' has hsla of [0, 0, 0, 0].");
+
+ resolve();
+ }
+ });
+
+ suite.addTestCase({
+ name: "WebInspector.Color.prototype.nextFormat",
+ description: "Test we can cycle through color formats for different colors.",
+ test: (resolve, reject) => {
+ function test(string, phases) {
+ let color = WebInspector.Color.fromString(string);
+ color.format = WebInspector.Color.Format.Original;
+
+ let pass = true;
+ for (let expectedNextFormat of phases) {
+ let nextFormat = color.nextFormat();
+ InspectorTest.assert(nextFormat === expectedNextFormat, `Next format '${formatToString(nextFormat)}' was not the expected '${formatToString(expectedNextFormat)}'`);
+ pass = pass && nextFormat === expectedNextFormat;
+ color.format = nextFormat;
+ }
+
+ InspectorTest.expectThat(pass, `All format phases of '${string}' should be as expected.`);
+ }
+
+ // All with alpha.
+ test("transparent", [
+ WebInspector.Color.Format.RGBA,
+ WebInspector.Color.Format.HSLA,
+ WebInspector.Color.Format.Nickname,
+ WebInspector.Color.Format.ShortHEXAlpha,
+ WebInspector.Color.Format.HEXAlpha,
+ WebInspector.Color.Format.Original,
+ ]);
+
+ // All without alpha.
+ test("red", [
+ WebInspector.Color.Format.RGB,
+ WebInspector.Color.Format.HSL,
+ WebInspector.Color.Format.Nickname,
+ WebInspector.Color.Format.ShortHEX,
+ WebInspector.Color.Format.HEX,
+ WebInspector.Color.Format.Original,
+ ]);
+
+ // No short hex or nickname.
+ test("rgb(100, 150, 200)", [
+ WebInspector.Color.Format.RGB,
+ WebInspector.Color.Format.HSL,
+ WebInspector.Color.Format.HEX,
+ WebInspector.Color.Format.Original,
+ ]);
+
+ // No short hex alpha or nickname.
+ test("rgba(100, 150, 200, 0.5)", [
+ WebInspector.Color.Format.RGBA,
+ WebInspector.Color.Format.HSLA,
+ WebInspector.Color.Format.HEXAlpha,
+ WebInspector.Color.Format.Original,
+ ]);
+
+ resolve();
+ }
+ });
+
+ suite.addTestCase({
+ name: "WebInspector.Color.prototype.toString",
+ description: "Test the different toString outputs.",
+ test: (resolve, reject) => {
+ let color;
+ function test(expected, format) {
+ let pass = color.toString(format) === expected;
+ InspectorTest.expectThat(pass, `Color as '${formatToString(format)}' should be '${expected}'`);
+ if (!pass) InspectorTest.log("WAS: " + color.toString(format));
+ }
+
+ // A color with all formats.
+ color = WebInspector.Color.fromString("RED");
+ test("RED", WebInspector.Color.Format.Original);
+ test("red", WebInspector.Color.Format.Nickname);
+ test("#f00", WebInspector.Color.Format.ShortHEX);
+ test("#ff0000", WebInspector.Color.Format.HEX);
+ test("#f00f", WebInspector.Color.Format.ShortHEXAlpha);
+ test("#ff0000ff", WebInspector.Color.Format.HEXAlpha);
+ test("rgb(255, 0, 0)", WebInspector.Color.Format.RGB);
+ test("rgba(255, 0, 0, 1)", WebInspector.Color.Format.RGBA);
+ test("hsl(0, 100%, 50%)", WebInspector.Color.Format.HSL);
+ test("hsla(0, 100%, 50%, 1)", WebInspector.Color.Format.HSLA);
+
+ // A color which cannot be some formats, those fallback to something else.
+ color = WebInspector.Color.fromString("rGbA( 100, 200, 255, 0.5 )");
+ test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.Original); // Original text ignored for some formats.
+ test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.Nickname); // fallback (rgba)
+ test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.ShortHEX); // fallback (rgba)
+ test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.HEX); // fallback (rgba)
+ test("#64c8ff80", WebInspector.Color.Format.ShortHEXAlpha); // fallback (hex alpha)
+ test("#64c8ff80", WebInspector.Color.Format.HEXAlpha);
+ test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.RGB); // fallback (rgba)
+ test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.RGBA);
+ test("hsla(201, 100%, 70%, 0.5)", WebInspector.Color.Format.HSL); // fallback (hsla)
+ test("hsla(201, 100%, 70%, 0.5)", WebInspector.Color.Format.HSLA);
+
+ // FIXME: Should we clamp rgb(300, 300, 300) => rgb(255, 255, 255) in toStrings?
+ // FIXME: Should we always stash the original string, no matter how poor?
+
+ resolve();
+ }
+ });
+
+ suite.runTestCasesAndFinish();
+}
+</script>
+</head>
+<body _onload_="runTest()">
+<p>Tests for the WebInspector.Color model object.</p>
+</body>
+</html>
Modified: trunk/Source/WebInspectorUI/ChangeLog (192039 => 192040)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-11-04 23:34:47 UTC (rev 192039)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-11-04 23:59:48 UTC (rev 192040)
@@ -1,3 +1,30 @@
+2015-11-04 Joseph Pecoraro <pecor...@apple.com>
+
+ Web Inspector: WebInspector.Color should support #rgba and #rrggbbaa syntax
+ https://bugs.webkit.org/show_bug.cgi?id=150894
+
+ Reviewed by Timothy Hatcher.
+
+ Support for hex with alpha color syntax.
+
+ * UserInterface/Models/Color.js:
+ (WebInspector.Color.fromString):
+ (WebInspector.Color.prototype.nextFormat):
+ (WebInspector.Color.prototype.copy):
+ (WebInspector.Color.prototype.toString):
+ (WebInspector.Color.prototype._toShortHEXAlphaString):
+ (WebInspector.Color.prototype._toHEXAlphaString):
+ Add support for new hex syntax. Address some minor issues
+ like case insensitivity and extra comma separate values.
+
+ * UserInterface/Views/CodeMirrorTextMarkers.js:
+ This prevent trailing hex characters from showing up
+ when cycling through color variants.
+
+ * UserInterface/Views/CodeMirrorAdditions.js:
+ When CodeMirror stops treating the new values as error
+ this will give them our hex-color styles.
+
2015-11-03 Matt Baker <mattba...@apple.com>
Web Inspector: REGRESSION (r191612): Storage sidebar panel tree outline is broken
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/Color.js (192039 => 192040)
--- trunk/Source/WebInspectorUI/UserInterface/Models/Color.js 2015-11-04 23:34:47 UTC (rev 192039)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/Color.js 2015-11-04 23:59:48 UTC (rev 192040)
@@ -55,28 +55,46 @@
}
// Simple - #hex, rgb(), nickname, hsl()
- var simple = /^(?:#([0-9a-f]{3,6})|rgb\(([^)]+)\)|(\w+)|hsl\(([^)]+)\))$/i;
+ var simple = /^(?:#([0-9a-f]{3,8})|rgb\(([^)]+)\)|(\w+)|hsl\(([^)]+)\))$/i;
var match = colorString.match(simple);
if (match) {
if (match[1]) { // hex
var hex = match[1].toUpperCase();
- if (hex.length === 3) {
+ var len = hex.length;
+ if (len === 3) {
return new WebInspector.Color(WebInspector.Color.Format.ShortHEX, [
parseInt(hex.charAt(0) + hex.charAt(0), 16),
parseInt(hex.charAt(1) + hex.charAt(1), 16),
parseInt(hex.charAt(2) + hex.charAt(2), 16),
1
]);
- } else {
+ } else if (len === 6) {
return new WebInspector.Color(WebInspector.Color.Format.HEX, [
parseInt(hex.substring(0, 2), 16),
parseInt(hex.substring(2, 4), 16),
parseInt(hex.substring(4, 6), 16),
1
]);
- }
+ } else if (len === 4) {
+ return new WebInspector.Color(WebInspector.Color.Format.ShortHEXAlpha, [
+ parseInt(hex.charAt(0) + hex.charAt(0), 16),
+ parseInt(hex.charAt(1) + hex.charAt(1), 16),
+ parseInt(hex.charAt(2) + hex.charAt(2), 16),
+ parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255
+ ]);
+ } else if (len === 8) {
+ return new WebInspector.Color(WebInspector.Color.Format.HEXAlpha, [
+ parseInt(hex.substring(0, 2), 16),
+ parseInt(hex.substring(2, 4), 16),
+ parseInt(hex.substring(4, 6), 16),
+ parseInt(hex.substring(6, 8), 16) / 255
+ ]);
+ } else
+ return null;
} else if (match[2]) { // rgb
var rgb = match[2].split(/\s*,\s*/);
+ if (rgb.length !== 3)
+ return null;
return new WebInspector.Color(WebInspector.Color.Format.RGB, [
parseInt(rgb[0]),
parseInt(rgb[1]),
@@ -94,6 +112,8 @@
return null;
} else if (match[4]) { // hsl
var hsl = match[4].replace(/%/g, "").split(/\s*,\s*/);
+ if (hsl.length !== 3)
+ return null;
return new WebInspector.Color(WebInspector.Color.Format.HSL, [
parseInt(hsl[0]),
parseInt(hsl[1]),
@@ -104,11 +124,13 @@
}
// Advanced - rgba(), hsla()
- var advanced = /^(?:rgba\(([^)]+)\)|hsla\(([^)]+)\))$/;
+ var advanced = /^(?:rgba\(([^)]+)\)|hsla\(([^)]+)\))$/i;
match = colorString.match(advanced);
if (match) {
if (match[1]) { // rgba
var rgba = match[1].split(/\s*,\s*/);
+ if (rgba.length !== 4)
+ return null;
return new WebInspector.Color(WebInspector.Color.Format.RGBA, [
parseInt(rgba[0]),
parseInt(rgba[1]),
@@ -117,6 +139,8 @@
]);
} else if (match[2]) { // hsla
var hsla = match[2].replace(/%/g, "").split(/\s*,\s*/);
+ if (hsla.length !== 4)
+ return null;
return new WebInspector.Color(WebInspector.Color.Format.HSLA, [
parseInt(hsla[0]),
parseInt(hsla[1]),
@@ -222,20 +246,22 @@
return WebInspector.Color.Format.Nickname;
if (this.simple)
return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
- else
- return WebInspector.Color.Format.Original;
+ return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEXAlpha : WebInspector.Color.Format.HEXAlpha;
case WebInspector.Color.Format.ShortHEX:
return WebInspector.Color.Format.HEX;
+ case WebInspector.Color.Format.ShortHEXAlpha:
+ return WebInspector.Color.Format.HEXAlpha;
+
case WebInspector.Color.Format.HEX:
+ case WebInspector.Color.Format.HEXAlpha:
return WebInspector.Color.Format.Original;
case WebInspector.Color.Format.Nickname:
if (this.simple)
return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
- else
- return WebInspector.Color.Format.Original;
+ return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEXAlpha : WebInspector.Color.Format.HEXAlpha;
default:
console.error("Unknown color format.");
@@ -287,6 +313,8 @@
case WebInspector.Color.Format.RGB:
case WebInspector.Color.Format.HEX:
case WebInspector.Color.Format.ShortHEX:
+ case WebInspector.Color.Format.HEXAlpha:
+ case WebInspector.Color.Format.ShortHEXAlpha:
case WebInspector.Color.Format.Nickname:
case WebInspector.Color.Format.RGBA:
return new WebInspector.Color(this.format, this.rgba);
@@ -316,6 +344,10 @@
return this._toHEXString();
case WebInspector.Color.Format.ShortHEX:
return this._toShortHEXString();
+ case WebInspector.Color.Format.HEXAlpha:
+ return this._toHEXAlphaString();
+ case WebInspector.Color.Format.ShortHEXAlpha:
+ return this._toShortHEXAlphaString();
case WebInspector.Color.Format.Nickname:
return this._toNicknameString();
}
@@ -384,6 +416,31 @@
return "#" + r + g + b;
}
+ _toShortHEXAlphaString()
+ {
+ let rgba = this.rgba;
+ let r = this._componentToHexValue(rgba[0]);
+ let g = this._componentToHexValue(rgba[1]);
+ let b = this._componentToHexValue(rgba[2]);
+ let a = this._componentToHexValue(Math.round(rgba[3] * 255));
+
+ if (r[0] === r[1] && g[0] === g[1] && b[0] === b[1] && a[0] === a[1])
+ return "#" + r[0] + g[0] + b[0] + a[0];
+ else
+ return "#" + r + g + b + a;
+ }
+
+ _toHEXAlphaString()
+ {
+ let rgba = this.rgba;
+ let r = this._componentToHexValue(rgba[0]);
+ let g = this._componentToHexValue(rgba[1]);
+ let b = this._componentToHexValue(rgba[2]);
+ let a = this._componentToHexValue(Math.round(rgba[3] * 255));
+
+ return "#" + r + g + b + a;
+ }
+
_toRGBString()
{
if (!this.simple)
@@ -524,6 +581,8 @@
Nickname: "color-format-nickname",
HEX: "color-format-hex",
ShortHEX: "color-format-short-hex",
+ HEXAlpha: "color-format-hex-alpha",
+ ShortHEXAlpha: "color-format-short-hex-alpha",
RGB: "color-format-rgb",
RGBA: "color-format-rgba",
HSL: "color-format-hsl",
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js (192039 => 192040)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js 2015-11-04 23:34:47 UTC (rev 192039)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js 2015-11-04 23:59:48 UTC (rev 192040)
@@ -253,7 +253,7 @@
function extendedCSSToken(stream, state)
{
- var hexColorRegex = /#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{3})\b/g;
+ var hexColorRegex = /#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})\b/g;
if (state._urlTokenize) {
// Call the link tokenizer instead.
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js (192039 => 192040)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js 2015-11-04 23:34:47 UTC (rev 192039)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js 2015-11-04 23:59:48 UTC (rev 192040)
@@ -85,7 +85,7 @@
function createCodeMirrorColorTextMarkers(codeMirror, range, callback)
{
// Matches rgba(0, 0, 0, 0.5), rgb(0, 0, 0), hsl(), hsla(), #fff, #ffffff, white
- var colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|\b\w+\b(?![-.]))/g;
+ var colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{8}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3,4}|\b\w+\b(?![-.]))/g;
function matchFunction(lineContent, match) {
// Act as a negative look-behind and disallow the color from being prefixing with certain characters.
return !(match.index > 0 && /[-.\"\']/.test(lineContent[match.index - 1]));
