Web Inspector: Implement SCSS source highlighter
[WebKit-https.git] / Source / WebCore / inspector / front-end / SourceCSSTokenizer.re2js
1 /*
2  * Copyright (C) 2009 Google Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions are
6  * met:
7  *
8  *     * Redistributions of source code must retain the above copyright
9  * notice, this list of conditions and the following disclaimer.
10  *     * Redistributions in binary form must reproduce the above
11  * copyright notice, this list of conditions and the following disclaimer
12  * in the documentation and/or other materials provided with the
13  * distribution.
14  *     * Neither the name of Google Inc. nor the names of its
15  * contributors may be used to endorse or promote products derived from
16  * this software without specific prior written permission.
17  *
18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29  */
30
31 // Generate js file as follows:
32
33 /*
34 re2c -isc Source/WebCore/inspector/front-end/SourceCSSTokenizer.re2js \
35   | sed 's|^yy\([^:]*\)*\:|case \1:|' \
36   | sed 's|[*]cursor[+][+]|this._charAt(cursor++)|' \
37   | sed 's|[[*][+][+]cursor|this._charAt(++cursor)|' \
38   | sed 's|[*]cursor|this._charAt(cursor)|' \
39   | sed 's|yych = \*\([^;]*\)|yych = this._charAt\1|' \
40   | sed 's|goto case \([^;]*\)|{ gotoCase = \1; continue; }|' \
41   | sed 's|yych <= \(0x[0-9a-fA-F]*\)|yych \<\= String.fromCharCode(\1)|' \
42   | sed 's|unsigned\ int|var|' \
43   | sed 's|var\ yych|case 1: var yych|' > Source/WebCore/inspector/front-end/SourceCSSTokenizer.js
44 */
45
46 /**
47  * @constructor
48  * @extends {WebInspector.SourceTokenizer}
49  */
50 WebInspector.SourceCSSTokenizer = function()
51 {
52     WebInspector.SourceTokenizer.call(this);
53
54     this._propertyKeywords = WebInspector.CSSCompletions.cssPropertiesMetainfoKeySet();
55     this._colorKeywords = WebInspector.CSSKeywordCompletions.colors();
56
57     this._valueKeywords = [
58         "above", "absolute", "activeborder", "activecaption", "afar", "after-white-space", "ahead", "alias", "all", "all-scroll",
59         "alternate", "always", "amharic", "amharic-abegede", "antialiased", "appworkspace", "arabic-indic", "armenian", "asterisks",
60         "auto", "avoid", "background", "backwards", "baseline", "below", "bidi-override", "binary", "bengali", "blink",
61         "block", "block-axis", "bold", "bolder", "border", "border-box", "both", "bottom", "break-all", "break-word", "button",
62         "button-bevel", "buttonface", "buttonhighlight", "buttonshadow", "buttontext", "cambodian", "capitalize", "caps-lock-indicator",
63         "caption", "captiontext", "caret", "cell", "center", "checkbox", "circle", "cjk-earthly-branch", "cjk-heavenly-stem", "cjk-ideographic",
64         "clear", "clip", "close-quote", "col-resize", "collapse", "compact", "condensed", "contain", "content", "content-box", "context-menu",
65         "continuous", "copy", "cover", "crop", "cross", "crosshair", "currentcolor", "cursive", "dashed", "decimal", "decimal-leading-zero", "default",
66         "default-button", "destination-atop", "destination-in", "destination-out", "destination-over", "devanagari", "disc", "discard", "document",
67         "dot-dash", "dot-dot-dash", "dotted", "double", "down", "e-resize", "ease", "ease-in", "ease-in-out", "ease-out", "element",
68         "ellipsis", "embed", "end", "ethiopic", "ethiopic-abegede", "ethiopic-abegede-am-et", "ethiopic-abegede-gez",
69         "ethiopic-abegede-ti-er", "ethiopic-abegede-ti-et", "ethiopic-halehame-aa-er", "ethiopic-halehame-aa-et",
70         "ethiopic-halehame-am-et", "ethiopic-halehame-gez", "ethiopic-halehame-om-et", "ethiopic-halehame-sid-et",
71         "ethiopic-halehame-so-et", "ethiopic-halehame-ti-er", "ethiopic-halehame-ti-et", "ethiopic-halehame-tig", "ew-resize", "expanded",
72         "extra-condensed", "extra-expanded", "fantasy", "fast", "fill", "fixed", "flat", "footnotes", "forwards", "from", "geometricPrecision",
73         "georgian", "graytext", "groove", "gujarati", "gurmukhi", "hand", "hangul", "hangul-consonant", "hebrew", "help",
74         "hidden", "hide", "higher", "highlight", "highlighttext", "hiragana", "hiragana-iroha", "horizontal", "hsl", "hsla", "icon", "ignore",
75         "inactiveborder", "inactivecaption", "inactivecaptiontext", "infinite", "infobackground", "infotext", "inherit", "initial", "inline",
76         "inline-axis", "inline-block", "inline-table", "inset", "inside", "intrinsic", "invert", "italic", "justify", "kannada", "katakana",
77         "katakana-iroha", "khmer", "landscape", "lao", "large", "larger", "left", "level", "lighter", "line-through", "linear", "lines",
78         "list-item", "listbox", "listitem", "local", "logical", "loud", "lower", "lower-alpha", "lower-armenian", "lower-greek",
79         "lower-hexadecimal", "lower-latin", "lower-norwegian", "lower-roman", "lowercase", "ltr", "malayalam", "match", "media-controls-background",
80         "media-current-time-display", "media-fullscreen-button", "media-mute-button", "media-play-button", "media-return-to-realtime-button",
81         "media-rewind-button", "media-seek-back-button", "media-seek-forward-button", "media-slider", "media-sliderthumb", "media-time-remaining-display",
82         "media-volume-slider", "media-volume-slider-container", "media-volume-sliderthumb", "medium", "menu", "menulist", "menulist-button",
83         "menulist-text", "menulist-textfield", "menutext", "message-box", "middle", "min-intrinsic", "mix", "mongolian", "monospace", "move", "multiple",
84         "myanmar", "n-resize", "narrower", "navy", "ne-resize", "nesw-resize", "no-close-quote", "no-drop", "no-open-quote", "no-repeat", "none",
85         "normal", "not-allowed", "nowrap", "ns-resize", "nw-resize", "nwse-resize", "oblique", "octal", "open-quote", "optimizeLegibility",
86         "optimizeSpeed", "oriya", "oromo", "outset", "outside", "overlay", "overline", "padding", "padding-box", "painted", "paused",
87         "persian", "plus-darker", "plus-lighter", "pointer", "portrait", "pre", "pre-line", "pre-wrap", "preserve-3d", "progress",
88         "push-button", "radio", "read-only", "read-write", "read-write-plaintext-only", "relative", "repeat", "repeat-x",
89         "repeat-y", "reset", "reverse", "rgb", "rgba", "ridge", "right", "round", "row-resize", "rtl", "run-in", "running", "s-resize", "sans-serif",
90         "scroll", "scrollbar", "se-resize", "searchfield", "searchfield-cancel-button", "searchfield-decoration", "searchfield-results-button",
91         "searchfield-results-decoration", "semi-condensed", "semi-expanded", "separate", "serif", "show", "sidama", "single",
92         "skip-white-space", "slide", "slider-horizontal", "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "slow",
93         "small", "small-caps", "small-caption", "smaller", "solid", "somali", "source-atop", "source-in", "source-out", "source-over",
94         "space", "square", "square-button", "start", "static", "status-bar", "stretch", "stroke", "sub", "subpixel-antialiased", "super",
95         "sw-resize", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group",
96         "table-row", "table-row-group", "telugu", "text", "text-bottom", "text-top", "textarea", "textfield", "thai", "thick", "thin",
97         "threeddarkshadow", "threedface", "threedhighlight", "threedlightshadow", "threedshadow", "tibetan", "tigre", "tigrinya-er", "tigrinya-er-abegede",
98         "tigrinya-et", "tigrinya-et-abegede", "to", "top", "transparent", "ultra-condensed", "ultra-expanded", "underline", "up", "upper-alpha", "upper-armenian",
99         "upper-greek", "upper-hexadecimal", "upper-latin", "upper-norwegian", "upper-roman", "uppercase", "urdu", "url", "vertical", "vertical-text", "visible",
100         "visibleFill", "visiblePainted", "visibleStroke", "visual", "w-resize", "wait", "wave", "white", "wider", "window", "windowframe", "windowtext",
101         "x-large", "x-small", "xor", "xx-large", "xx-small", "yellow", "-wap-marquee", "-webkit-activelink", "-webkit-auto", "-webkit-baseline-middle",
102         "-webkit-body", "-webkit-box", "-webkit-center", "-webkit-control", "-webkit-focus-ring-color", "-webkit-grab", "-webkit-grabbing",
103         "-webkit-gradient", "-webkit-inline-box", "-webkit-left", "-webkit-link", "-webkit-marquee", "-webkit-mini-control", "-webkit-nowrap", "-webkit-pictograph",
104         "-webkit-right", "-webkit-small-control", "-webkit-text", "-webkit-xxx-large", "-webkit-zoom-in", "-webkit-zoom-out",
105     ].keySet();
106
107     this._scssValueKeywords = [
108         "abs", "adjust-color", "adjust-hue", "alpha", "append", "ceil", "change-color", "comparable", "complement", "darken", "desaturate",
109         "fade-in", "fade-out", "floor", "grayscale", "hue", "ie-hex-str", "invert", "join", "length", "lighten",
110         "lightness", "max", "min", "mix", "nth", "opacify", "opacity", "percentage", "quote", "round", "saturate",
111         "saturation", "scale-color", "transparentize", "type-of", "unit", "unitless", "unquote", "zip"
112     ].keySet();
113
114     this._lexConditions = {
115         INITIAL: 0,
116         COMMENT: 1,
117         DSTRING: 2,
118         SSTRING: 3
119     };
120
121     this._parseConditions = {
122         INITIAL: 0,
123         PROPERTY: 1,
124         PROPERTY_VALUE: 2,
125         AT_RULE: 3,
126         AT_MEDIA_RULE: 4
127     };
128
129     this.case_INITIAL = 1000;
130     this.case_COMMENT = 1002;
131     this.case_DSTRING = 1003;
132     this.case_SSTRING = 1004;
133
134     this.condition = this.createInitialCondition();
135 }
136
137 WebInspector.SourceCSSTokenizer.SCSSAtRelatedKeywords = ["from", "if", "in", "through"].keySet();
138
139 WebInspector.SourceCSSTokenizer.MediaTypes = ["all", "aural", "braille", "embossed", "handheld", "import", "print", "projection", "screen", "tty", "tv"].keySet();
140
141 WebInspector.SourceCSSTokenizer.prototype = {
142     createInitialCondition: function()
143     {
144         return { lexCondition: this._lexConditions.INITIAL, parseCondition: this._parseConditions.INITIAL };
145     },
146
147     /**
148      * @param {boolean=} stringEnds
149      */
150     _stringToken: function(cursor, stringEnds)
151     {
152         if (this._isPropertyValue())
153             this.tokenType = "css-string";
154         else
155             this.tokenType = null;
156         return cursor;
157     },
158
159     _isPropertyValue: function()
160     {
161         return this._condition.parseCondition === this._parseConditions.PROPERTY_VALUE || this._condition.parseCondition === this._parseConditions.AT_RULE;
162     },
163
164     _setParseCondition: function(condition)
165     {
166         this._condition.parseCondition = condition;
167     },
168
169     nextToken: function(cursor)
170     {
171         var cursorOnEnter = cursor;
172         var gotoCase = 1;
173         var YYMARKER;
174         while (1) {
175             switch (gotoCase)
176             // Following comment is replaced with generated state machine.
177             /*!re2c
178                 re2c:define:YYCTYPE  = "var";
179                 re2c:define:YYCURSOR = cursor;
180                 re2c:define:YYGETCONDITION = "this.getLexCondition";
181                 re2c:define:YYSETCONDITION = "this.setLexCondition";
182                 re2c:condprefix = "case this.case_";
183                 re2c:condenumprefix = "this._lexConditions.";
184                 re2c:yyfill:enable = 0;
185                 re2c:labelprefix = "case ";
186                 re2c:indent:top = 2;
187                 re2c:indent:string = "    ";
188
189                 CommentContent = ([^*\r\n] | ("*"+[^/*]))*;
190                 Comment = "/*" CommentContent "*"+ "/";
191                 CommentStart = "/*" CommentContent [\r\n];
192                 CommentEnd = CommentContent "*"+ "/";
193
194                 OpenCurlyBracket = "{";
195                 CloseCurlyBracket = "}";
196
197                 Colon = ":";
198                 Semicolon = ";";
199
200                 NumericLiteral = "-"? ([0-9]+ | [0-9]* "." [0-9]+)  ("em" | "rem" | "__qem" | "ex" | "px" | "cm" |
201                     "mm" | "in" | "pt" | "pc" | "deg" | "rad" | "grad" | "turn" | "ms" | "s" | "Hz" | "kHz" | "%")?;
202
203                 ColorOrSelector = "#" [0-9A-Za-z]+;
204                 Identifier = [@!_\-0-9a-zA-Z\[\]='"/&]+;
205                 Variable = "$" Identifier;
206
207                 DoubleStringContent = ([^\r\n\"\\] | "\\" ['"\\bfnrtv])*;
208                 SingleStringContent = ([^\r\n\'\\] | "\\" ['"\\bfnrtv])*;
209                 StringLiteral = "\"" DoubleStringContent "\"" | "'" SingleStringContent "'";
210                 DoubleStringStart = "\"" DoubleStringContent "\\" [\r\n];
211                 DoubleStringEnd = DoubleStringContent "\"";
212                 SingleStringStart = "'" SingleStringContent "\\" [\r\n];
213                 SingleStringEnd = SingleStringContent "'";
214
215                 <INITIAL> Comment { this.tokenType = "css-comment"; return cursor; }
216                 <INITIAL> CommentStart => COMMENT { this.tokenType = "css-comment"; return cursor; }
217                 <COMMENT> CommentContent => COMMENT { this.tokenType = "css-comment"; return cursor; }
218                 <COMMENT> CommentEnd => INITIAL { this.tokenType = "css-comment"; return cursor; }
219
220                 <INITIAL> StringLiteral { return this._stringToken(cursor, true); }
221                 <INITIAL> DoubleStringStart => DSTRING { return this._stringToken(cursor); }
222                 <DSTRING> DoubleStringContent => DSTRING { return this._stringToken(cursor); }
223                 <DSTRING> DoubleStringEnd => INITIAL { return this._stringToken(cursor, true); }
224                 <INITIAL> SingleStringStart => SSTRING { return this._stringToken(cursor); }
225                 <SSTRING> SingleStringContent => SSTRING { return this._stringToken(cursor); }
226                 <SSTRING> SingleStringEnd => INITIAL { return this._stringToken(cursor, true); }
227
228                 <INITIAL> OpenCurlyBracket
229                 {
230                     this.tokenType = "block-start";
231                     this._condition.openBraces = (this._condition.openBraces || 0) + 1;
232                     if (this._condition.parseCondition === this._parseConditions.AT_MEDIA_RULE)
233                         this._setParseCondition(this._parseConditions.INITIAL);
234                     else
235                         this._setParseCondition(this._parseConditions.PROPERTY);
236                     return cursor;
237                 }
238
239                 <INITIAL> CloseCurlyBracket
240                 {
241                     this.tokenType = "block-end";
242                     if (this._condition.openBraces > 0)
243                         --this._condition.openBraces;
244                     this._setParseCondition(this._condition.openBraces ? this._parseConditions.PROPERTY : this._parseConditions.INITIAL);
245                     delete this._condition.atKeyword;
246                     return cursor;
247                 }
248
249                 <INITIAL> Colon
250                 {
251                     this.tokenType = null;
252                     if (this._condition.parseCondition === this._parseConditions.PROPERTY || this._condition.parseCondition === this._parseConditions.INITIAL)
253                         this._setParseCondition(this._parseConditions.PROPERTY_VALUE);
254                     return cursor;
255                 }
256
257                 <INITIAL> Semicolon
258                 {
259                     this.tokenType = null;
260                     this._setParseCondition(this._condition.openBraces ? this._parseConditions.PROPERTY : this._parseConditions.INITIAL);
261                     delete this._condition.atKeyword;
262                     return cursor;
263                 }
264
265                 <INITIAL> NumericLiteral
266                 {
267                     if (this._isPropertyValue())
268                         this.tokenType = "css-number";
269                     else
270                         this.tokenType = null;
271                     return cursor;
272                 }
273
274                 <INITIAL> ColorOrSelector
275                 {
276                     if (this._isPropertyValue())
277                         this.tokenType = "css-color";
278                     else if (this._condition.parseCondition === this._parseConditions.INITIAL)
279                         this.tokenType = "css-selector";
280                     else
281                         this.tokenType = null;
282                     return cursor;
283                 }
284
285                 <INITIAL> Variable
286                 {
287                     if (this._condition.parseCondition === this._condition.parseCondition.INITIAL || this._condition.parseCondition === this._condition.parseCondition.AT_RULE)
288                         this._setParseCondition(this._parseConditions.PROPERTY);
289                     this.tokenType = "scss-variable";
290                     return cursor;
291                 }
292
293                 <INITIAL> Identifier
294                 {
295                     var token = this._line.substring(cursorOnEnter, cursor);
296                     this.tokenType = null;
297                     if (this._condition.parseCondition === this._parseConditions.INITIAL || this._condition.parseCondition === this._parseConditions.PROPERTY) {
298                         if (token.charAt(0) === "@") {
299                             this.tokenType = "css-at-rule";
300                             this._setParseCondition(token === "@media" ? this._parseConditions.AT_MEDIA_RULE : this._parseConditions.AT_RULE);
301                             this._condition.atKeyword = token;
302                         } else if (this._condition.parseCondition === this._parseConditions.INITIAL)
303                             this.tokenType = "css-selector";
304                         else if (this._propertyKeywords.hasOwnProperty(token))
305                             this.tokenType = "css-property";
306                     } else if (this._condition.parseCondition === this._parseConditions.AT_MEDIA_RULE || this._condition.parseCondition === this._parseConditions.AT_RULE) {
307                         if (WebInspector.SourceCSSTokenizer.SCSSAtRelatedKeywords.hasOwnProperty(token))
308                             this.tokenType = "css-at-rule";
309                         else if (WebInspector.SourceCSSTokenizer.MediaTypes.hasOwnProperty(token))
310                             this.tokenType = "css-keyword";
311                     }
312                     if (this.tokenType)
313                         return cursor;
314
315                     if (this._isPropertyValue()) {
316                         var firstChar = token.charAt(0);
317                         if (firstChar === "$")
318                             this.tokenType = "scss-variable";
319                         else if (firstChar === "!")
320                             this.tokenType = "css-bang-keyword";
321                         else if (this._condition.atKeyword === "@extend")
322                             this.tokenType = "css-selector";
323                         else if (this._valueKeywords.hasOwnProperty(token) || this._scssValueKeywords.hasOwnProperty(token))
324                             this.tokenType = "css-keyword";
325                         else if (this._colorKeywords.hasOwnProperty(token)) {
326                             // FIXME: this does not convert tokens toLowerCase() for the sake of speed.
327                             this.tokenType = "css-color";
328                         }
329                     } else if (this._condition.parseCondition !== this._parseConditions.PROPERTY_VALUE)
330                         this.tokenType = "css-selector";
331                     return cursor;
332                 }
333                 <*> [^] { this.tokenType = null; return cursor; }
334             */
335         }
336     }
337 }
338
339 WebInspector.SourceCSSTokenizer.prototype.__proto__ = WebInspector.SourceTokenizer.prototype;