Changeset 170681 in webkit

Timestamp:

Jul 1, 2014, 5:13:19 PM (12 years ago)

Author:

jonowells@apple.com

Message:

Web Inspector: Hexadecimal color values in all CSS editors are purple when they should be blue
​https://bugs.webkit.org/show_bug.cgi?id=133997

Reviewed by Joseph Pecoraro.

CodeMirror 4 removed the style for hex colors from the CSS tokenizer.
Feature has been added to CodeMirrorAdditions.js.

• UserInterface/Views/CodeMirrorAdditions.js: Added hex-color to style for a valid hexadecimal color.
• UserInterface/Views/SyntaxHighlightingDefaultTheme.css: Added selector for hexadecimal color.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/CodeMirrorAdditions.js (modified) (2 diffs)
• UserInterface/Views/SyntaxHighlightingDefaultTheme.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2014-07-01  Jonathan Wells  <jonowells@apple.com>
+
+        Web Inspector: Hexadecimal color values in all CSS editors are purple when they should be blue
+        https://bugs.webkit.org/show_bug.cgi?id=133997
+
+        Reviewed by Joseph Pecoraro.
+
+        CodeMirror 4 removed the style for hex colors from the CSS tokenizer.
+        Feature has been added to CodeMirrorAdditions.js.
+
+        * UserInterface/Views/CodeMirrorAdditions.js: Added hex-color to style for a valid hexadecimal color.
+        * UserInterface/Views/SyntaxHighlightingDefaultTheme.css: Added selector for hexadecimal color.
+
 2014-06-26  Jono Wells  <jonowells@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js

@@ -183 +183 @@
     function extendedCSSToken(stream, state)
     {
+        const hexColorRegex = /#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{3})\b/g;
+
         if (state._urlTokenize) {
             // Call the link tokenizer instead.
@@ -194 +196 @@
 
         if (style) {
-            if (style === "atom" && stream.current() === "url") {
-                // If the current text is "url" then we should expect the next string token to be a link.
-                state._expectLink = true;
-            } else if (state._expectLink && style === "atom") {
-                // We expected a string and got it. This is a link. Parse it the way we want it.
-                delete state._expectLink;
-
-                // This is a link, so setup the state to process it next.
-                state._urlTokenize = tokenizeCSSURLString;
-                state._urlBaseStyle = style;
-
-                // The url may or may not be quoted.
-                var quote = stream.current()[0];
-                state._urlQuoteCharacter = quote === "'" || quote === "\"" ? quote : ")";
-                state._unquotedURLString = state._urlQuoteCharacter === ")";
-
-                // Rewind the steam to the start of this token.
-                stream.pos = startPosition;
-
-                // Eat the open quote of the string so the string style
-                // will be used for the quote character.
-                if (!state._unquotedURLString)
-                    stream.eat(state._urlQuoteCharacter);
+            if (style === "atom") {
+                if (stream.current() === "url") {
+                    // If the current text is "url" then we should expect the next string token to be a link.
+                    state._expectLink = true;
+                } else if (state._expectLink) {
+                    // We expected a string and got it. This is a link. Parse it the way we want it.
+                    delete state._expectLink;
+
+                    // This is a link, so setup the state to process it next.
+                    state._urlTokenize = tokenizeCSSURLString;
+                    state._urlBaseStyle = style;
+
+                    // The url may or may not be quoted.
+                    var quote = stream.current()[0];
+                    state._urlQuoteCharacter = quote === "'" || quote === "\"" ? quote : ")";
+                    state._unquotedURLString = state._urlQuoteCharacter === ")";
+
+                    // Rewind the steam to the start of this token.
+                    stream.pos = startPosition;
+
+                    // Eat the open quote of the string so the string style
+                    // will be used for the quote character.
+                    if (!state._unquotedURLString)
+                        stream.eat(state._urlQuoteCharacter);
+                } else if (hexColorRegex.test(stream.current()))
+                    style = style + " hex-color";
             } else if (state._expectLink) {
                 // We expected a string and didn't get one. Cleanup.

trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css

@@ -61 +61 @@
 
 .cm-s-default .cm-number,
+.cm-s-default .cm-atom.cm-hex-color,
 .syntax-highlighted .css-number,
 .syntax-highlighted .javascript-number {