<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[50411] trunk</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/50411">50411</a></dd>
<dt>Author</dt> <dd>eric@webkit.org</dd>
<dt>Date</dt> <dd>2009-11-02 09:27:50 -0800 (Mon, 02 Nov 2009)</dd>
</dl>

<h3>Log Message</h3>
<pre>2009-11-02  Keishi Hattori  &lt;casey.hattori@gmail.com&gt;

        Reviewed by Timothy Hatcher.

        Web Inspector: Rewrite CSSSourceSyntaxHighlighter so it shares more code
        https://bugs.webkit.org/show_bug.cgi?id=30907

        * inspector/css-syntax-highlight-expected.txt: Added.
        * inspector/css-syntax-highlight.html: Added.
        * inspector/javascript-syntax-highlight-expected.txt:
2009-11-02  Keishi Hattori  &lt;casey.hattori@gmail.com&gt;

        Reviewed by Timothy Hatcher.

        Web Inspector: Rewrite CSSSourceSyntaxHighlighter so it shares more code
        https://bugs.webkit.org/show_bug.cgi?id=30907

        Test: inspector/css-syntax-highlight.html

        * inspector/front-end/ElementsTreeOutline.js:
        * inspector/front-end/SourceFrame.js:
        (WebInspector.SourceFrame.prototype.syntaxHighlightCSS):
        (WebInspector.SourceSyntaxHighlighter):
        (WebInspector.SourceSyntaxHighlighter.prototype.process.processChunk):
        (WebInspector.SourceSyntaxHighlighter.prototype.process.moveToNextLine):
        (WebInspector.SourceSyntaxHighlighter.prototype.process):
        (WebInspector.SourceSyntaxHighlighter.prototype.lex):
        (WebInspector.SourceSyntaxHighlighter.prototype.appendNonToken):
        (WebInspector.SourceSyntaxHighlighter.prototype.syntaxHighlightNode):
        (WebInspector.CSSSourceSyntaxHighlighter):
        * inspector/front-end/inspectorSyntaxHighlight.css:</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsinspectorjavascriptsyntaxhighlightexpectedtxt">trunk/LayoutTests/inspector/javascript-syntax-highlight-expected.txt</a></li>
<li><a href="#trunkWebCoreChangeLog">trunk/WebCore/ChangeLog</a></li>
<li><a href="#trunkWebCoreinspectorfrontendElementsTreeOutlinejs">trunk/WebCore/inspector/front-end/ElementsTreeOutline.js</a></li>
<li><a href="#trunkWebCoreinspectorfrontendSourceFramejs">trunk/WebCore/inspector/front-end/SourceFrame.js</a></li>
<li><a href="#trunkWebCoreinspectorfrontendinspectorSyntaxHighlightcss">trunk/WebCore/inspector/front-end/inspectorSyntaxHighlight.css</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsinspectorcsssyntaxhighlightexpectedtxt">trunk/LayoutTests/inspector/css-syntax-highlight-expected.txt</a></li>
<li><a href="#trunkLayoutTestsinspectorcsssyntaxhighlighthtml">trunk/LayoutTests/inspector/css-syntax-highlight.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (50410 => 50411)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2009-11-02 17:03:14 UTC (rev 50410)
+++ trunk/LayoutTests/ChangeLog        2009-11-02 17:27:50 UTC (rev 50411)
</span><span class="lines">@@ -1,3 +1,14 @@
</span><ins>+2009-11-02  Keishi Hattori  &lt;casey.hattori@gmail.com&gt;
+
+        Reviewed by Timothy Hatcher.
+
+        Web Inspector: Rewrite CSSSourceSyntaxHighlighter so it shares more code
+        https://bugs.webkit.org/show_bug.cgi?id=30907
+
+        * inspector/css-syntax-highlight-expected.txt: Added.
+        * inspector/css-syntax-highlight.html: Added.
+        * inspector/javascript-syntax-highlight-expected.txt:
+
</ins><span class="cx"> 2009-11-02  Chris Fleizach  &lt;cfleizach@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Reviewed by Beth Dakin.
</span></span></pre></div>
<a id="trunkLayoutTestsinspectorcsssyntaxhighlightexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/inspector/css-syntax-highlight-expected.txt (0 => 50411)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/css-syntax-highlight-expected.txt                                (rev 0)
+++ trunk/LayoutTests/inspector/css-syntax-highlight-expected.txt        2009-11-02 17:27:50 UTC (rev 50411)
</span><span class="lines">@@ -0,0 +1,11 @@
</span><ins>+Tests that CSSSourceSyntaxHighlighter detects the tokens.
+
+webkit-css-selector
+webkit-css-selector,*,webkit-css-selector
+webkit-css-at-rule,*,webkit-css-url,*
+webkit-css-at-rule,*,webkit-css-url,*,webkit-css-keyword,*,webkit-css-keyword,*
+webkit-css-at-rule,*,webkit-css-keyword,*,webkit-css-selector,*,webkit-css-property,*,webkit-css-keyword,*
+webkit-css-at-rule,*,webkit-css-property,*
+webkit-css-selector,*,webkit-css-property,*,webkit-css-keyword,*
+webkit-css-selector,*,webkit-css-property,*,webkit-css-keyword,*,webkit-css-important,*
+
</ins></span></pre></div>
<a id="trunkLayoutTestsinspectorcsssyntaxhighlighthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/inspector/css-syntax-highlight.html (0 => 50411)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/css-syntax-highlight.html                                (rev 0)
+++ trunk/LayoutTests/inspector/css-syntax-highlight.html        2009-11-02 17:27:50 UTC (rev 50411)
</span><span class="lines">@@ -0,0 +1,65 @@
</span><ins>+&lt;html&gt;
+&lt;head&gt;
+&lt;script src=&quot;evaluate-in-frontend.js&quot;&gt;&lt;/script&gt;
+&lt;script&gt;
+
+function doit()
+{
+    function callback(result)
+    {
+        for (var i = 0; i &lt; result.length; ++i)
+            output(result[i]);
+        notifyDone();
+    }
+    evaluateInWebInspector(&quot;doitAndDump&quot;, callback);
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload=&quot;onload()&quot;&gt;
+&lt;p&gt;
+Tests that CSSSourceSyntaxHighlighter detects the tokens.
+&lt;/p&gt;
+
+&lt;div id=&quot;frontend-script&quot; style=&quot;display:none&quot;&gt;
+function doitAndDump(testController) {
+    testController.waitUntilDone();
+    setTimeout(function() {
+        var result = [];
+        
+        result.push(dumpSyntaxHighlight(&quot;a[href='/']&quot;));
+        result.push(dumpSyntaxHighlight(&quot;#content &gt; a:hover&quot;));
+        result.push(dumpSyntaxHighlight(&quot;@import url(style.css);&quot;));
+        result.push(dumpSyntaxHighlight(&quot;@import url(\&quot;style.css\&quot;) projection, tv;&quot;));
+        result.push(dumpSyntaxHighlight(&quot;@media screen { body { color: red; } }&quot;));
+        result.push(dumpSyntaxHighlight(&quot;@font-face { font-family: MyHelvetica; }&quot;));
+        result.push(dumpSyntaxHighlight(&quot;p { color: color; red: red; }&quot;));
+        result.push(dumpSyntaxHighlight(&quot;p { color: red !important; }&quot;));
+        
+        testController.notifyDone(result);
+        
+    }, 0);
+}
+function dumpSyntaxHighlight(str) {
+    var node = document.createElement(&quot;span&quot;);
+    node.textContent = str;
+    var javascriptSyntaxHighlighter = new WebInspector.CSSSourceSyntaxHighlighter(null, null);
+    javascriptSyntaxHighlighter.syntaxHighlightNode(node);
+    var node_parts = [];
+    for (var i = 0; i &lt; node.childNodes.length; i++) {
+        if (node.childNodes[i].getAttribute) {
+            node_parts.push(node.childNodes[i].getAttribute(&quot;class&quot;));
+        } else {
+            node_parts.push(&quot;*&quot;);
+        }
+    }
+    return node_parts.join(&quot;,&quot;);
+}
+&lt;/div&gt;
+
+&lt;div id=&quot;output&quot;&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsinspectorjavascriptsyntaxhighlightexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/inspector/javascript-syntax-highlight-expected.txt (50410 => 50411)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/javascript-syntax-highlight-expected.txt        2009-11-02 17:03:14 UTC (rev 50410)
+++ trunk/LayoutTests/inspector/javascript-syntax-highlight-expected.txt        2009-11-02 17:27:50 UTC (rev 50411)
</span><span class="lines">@@ -3,12 +3,12 @@
</span><span class="cx"> webkit-javascript-keyword,webkit-javascript-string,*
</span><span class="cx"> webkit-javascript-regexp
</span><span class="cx"> webkit-javascript-comment
</span><del>-webkit-javascript-number,*,webkit-javascript-number,*,webkit-javascript-regexp,*,webkit-javascript-string,*
-webkit-javascript-string,*,webkit-javascript-number
-webkit-javascript-keyword,*,webkit-javascript-number,webkit-javascript-comment,*,webkit-javascript-number
-webkit-javascript-comment,webkit-javascript-regexp,*,webkit-javascript-string,*
</del><ins>+webkit-javascript-number,*,webkit-javascript-number,*,webkit-javascript-regexp,*,webkit-javascript-ident,*,webkit-javascript-string,*
+webkit-javascript-string,*,webkit-javascript-ident,*,webkit-javascript-number
+webkit-javascript-keyword,*,webkit-javascript-ident,*,webkit-javascript-number,webkit-javascript-comment,*,webkit-javascript-number
+webkit-javascript-comment,webkit-javascript-regexp,*,webkit-javascript-ident,*,webkit-javascript-string,*
</ins><span class="cx"> webkit-javascript-string,*
</span><span class="cx"> webkit-javascript-string,*
</span><span class="cx"> webkit-javascript-string,*
</span><del>-*,webkit-javascript-comment,*
</del><ins>+webkit-javascript-ident,webkit-javascript-comment,webkit-javascript-ident
</ins><span class="cx"> 
</span></span></pre></div>
<a id="trunkWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/WebCore/ChangeLog (50410 => 50411)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/WebCore/ChangeLog        2009-11-02 17:03:14 UTC (rev 50410)
+++ trunk/WebCore/ChangeLog        2009-11-02 17:27:50 UTC (rev 50411)
</span><span class="lines">@@ -1,3 +1,25 @@
</span><ins>+2009-11-02  Keishi Hattori  &lt;casey.hattori@gmail.com&gt;
+
+        Reviewed by Timothy Hatcher.
+
+        Web Inspector: Rewrite CSSSourceSyntaxHighlighter so it shares more code
+        https://bugs.webkit.org/show_bug.cgi?id=30907
+
+        Test: inspector/css-syntax-highlight.html
+
+        * inspector/front-end/ElementsTreeOutline.js:
+        * inspector/front-end/SourceFrame.js:
+        (WebInspector.SourceFrame.prototype.syntaxHighlightCSS):
+        (WebInspector.SourceSyntaxHighlighter):
+        (WebInspector.SourceSyntaxHighlighter.prototype.process.processChunk):
+        (WebInspector.SourceSyntaxHighlighter.prototype.process.moveToNextLine):
+        (WebInspector.SourceSyntaxHighlighter.prototype.process):
+        (WebInspector.SourceSyntaxHighlighter.prototype.lex):
+        (WebInspector.SourceSyntaxHighlighter.prototype.appendNonToken):
+        (WebInspector.SourceSyntaxHighlighter.prototype.syntaxHighlightNode):
+        (WebInspector.CSSSourceSyntaxHighlighter):
+        * inspector/front-end/inspectorSyntaxHighlight.css:
+
</ins><span class="cx"> 2009-11-02  Chris Fleizach  &lt;cfleizach@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Reviewed by Beth Dakin.
</span></span></pre></div>
<a id="trunkWebCoreinspectorfrontendElementsTreeOutlinejs"></a>
<div class="modfile"><h4>Modified: trunk/WebCore/inspector/front-end/ElementsTreeOutline.js (50410 => 50411)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/WebCore/inspector/front-end/ElementsTreeOutline.js        2009-11-02 17:03:14 UTC (rev 50410)
+++ trunk/WebCore/inspector/front-end/ElementsTreeOutline.js        2009-11-02 17:27:50 UTC (rev 50411)
</span><span class="lines">@@ -850,8 +850,8 @@
</span><span class="cx">                         var newNode = document.createElement(&quot;span&quot;);
</span><span class="cx">                         newNode.textContent = node.textContent;
</span><span class="cx">                         
</span><del>-                        var cssSyntaxHighlighter = new WebInspector.CSSSourceSyntaxHighligher(null, null);
-                        cssSyntaxHighlighter.syntaxHighlightLine(newNode, null);
</del><ins>+                        var cssSyntaxHighlighter = new WebInspector.CSSSourceSyntaxHighlighter(null, null);
+                        cssSyntaxHighlighter.syntaxHighlightNode(newNode);
</ins><span class="cx">                         
</span><span class="cx">                         info.title = &quot;&lt;span class=\&quot;webkit-html-text-node webkit-html-css-node\&quot;&gt;&quot; + newNode.innerHTML.replace(/^[\n\r]*/, &quot;&quot;).replace(/\s*$/, &quot;&quot;) + &quot;&lt;/span&gt;&quot;;
</span><span class="cx">                     } else {
</span></span></pre></div>
<a id="trunkWebCoreinspectorfrontendSourceFramejs"></a>
<div class="modfile"><h4>Modified: trunk/WebCore/inspector/front-end/SourceFrame.js (50410 => 50411)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/WebCore/inspector/front-end/SourceFrame.js        2009-11-02 17:03:14 UTC (rev 50410)
+++ trunk/WebCore/inspector/front-end/SourceFrame.js        2009-11-02 17:27:50 UTC (rev 50411)
</span><span class="lines">@@ -731,20 +731,20 @@
</span><span class="cx">         if (!table)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        var cssSyntaxHighlighter = new WebInspector.CSSSourceSyntaxHighligher(table, this);
</del><ins>+        var cssSyntaxHighlighter = new WebInspector.CSSSourceSyntaxHighlighter(table, this);
</ins><span class="cx">         cssSyntaxHighlighter.process();
</span><span class="cx">     }
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> WebInspector.SourceFrame.prototype.__proto__ = WebInspector.Object.prototype;
</span><span class="cx"> 
</span><del>-WebInspector.SourceSyntaxHighligher = function(table, sourceFrame)
</del><ins>+WebInspector.SourceSyntaxHighlighter = function(table, sourceFrame)
</ins><span class="cx"> {
</span><span class="cx">     this.table = table;
</span><span class="cx">     this.sourceFrame = sourceFrame;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-WebInspector.SourceSyntaxHighligher.prototype = {
</del><ins>+WebInspector.SourceSyntaxHighlighter.prototype = {
</ins><span class="cx">     createSpan: function(content, className)
</span><span class="cx">     {
</span><span class="cx">         var span = document.createElement(&quot;span&quot;);
</span><span class="lines">@@ -753,234 +753,1088 @@
</span><span class="cx">         return span;
</span><span class="cx">     },
</span><span class="cx"> 
</span><del>-    generateFinder: function(regex, matchNumber, className)
-    {
-        return function(str) {
-            var match = regex.exec(str);
-            if (!match)
-                return null;
-            this.previousMatchLength = match[matchNumber].length;
-            return this.createSpan(match[matchNumber], className);
-        };
-    },
-
</del><span class="cx">     process: function()
</span><span class="cx">     {
</span><span class="cx">         // Split up the work into chunks so we don't block the
</span><span class="cx">         // UI thread while processing.
</span><span class="cx"> 
</span><del>-        var i = 0;
</del><span class="cx">         var rows = this.table.rows;
</span><span class="cx">         var rowsLength = rows.length;
</span><del>-        var previousCell = null;
-        const linesPerChunk = 10;
-
</del><ins>+        const tokensPerChunk = 100;
+        const lineLengthLimit = 20000;
+        
+        var boundProcessChunk = processChunk.bind(this);
+        var processChunkInterval = setInterval(boundProcessChunk, 25);
+        boundProcessChunk();
+        
</ins><span class="cx">         function processChunk()
</span><span class="cx">         {
</span><del>-            for (var end = Math.min(i + linesPerChunk, rowsLength); i &lt; end; ++i) {
-                var row = rows[i];
-                if (!row)
-                    continue;
-                var cell = row.cells[1];
-                if (!cell)
-                    continue;
-                this.syntaxHighlightLine(cell, previousCell);
-                if (i &lt; (end - 1))
-                    this.deleteContinueFlags(previousCell);
-                previousCell = cell;
</del><ins>+            for (var i = 0; i &lt; tokensPerChunk; i++) {
+                if (this.cursor &gt;= this.lineCode.length)
+                    moveToNextLine.call(this);
+                if (this.lineIndex &gt;= rowsLength) {
+                    this.sourceFrame.dispatchEventToListeners(&quot;syntax highlighting complete&quot;);
+                    return;
+                }
+                if (this.cursor &gt; lineLengthLimit) {
+                    var codeFragment = this.lineCode.substring(this.cursor);
+                    this.nonToken += codeFragment;
+                    this.cursor += codeFragment.length;
+                }
+
+                this.lex();
</ins><span class="cx">             }
</span><del>-
-            if (i &gt;= rowsLength &amp;&amp; processChunkInterval) {
-                this.deleteContinueFlags(previousCell);
-                delete this.previousMatchLength;
</del><ins>+        }
+        
+        function moveToNextLine()
+        {
+            this.appendNonToken();
+            
+            var row = rows[this.lineIndex];
+            var line = row ? row.cells[1] : null;
+            if (line &amp;&amp; this.lineFragment) {
+                Element.prototype.removeChildren.call(line);
+                
+                line.appendChild(this.lineFragment);
+                if (this.messageBubble)
+                    line.appendChild(this.messageBubble);
+                this.lineFragment = null;
+            }
+            this.lineIndex++;
+            if (this.lineIndex &gt;= rowsLength &amp;&amp; processChunkInterval) {
</ins><span class="cx">                 clearInterval(processChunkInterval);
</span><del>-
</del><span class="cx">                 this.sourceFrame.dispatchEventToListeners(&quot;syntax highlighting complete&quot;);
</span><ins>+                return;
</ins><span class="cx">             }
</span><ins>+            row = rows[this.lineIndex];
+            line = row ? row.cells[1] : null;
+            
+            this.messageBubble = null;
+            if (line.lastChild &amp;&amp; line.lastChild.nodeType === Node.ELEMENT_NODE &amp;&amp; line.lastChild.hasStyleClass(&quot;webkit-html-message-bubble&quot;)) {
+                this.messageBubble = line.lastChild;
+                line.removeChild(this.messageBubble);
+            }
+
+            this.lineCode = line.textContent;
+            this.lineFragment = document.createDocumentFragment();
+            this.cursor = 0;
+            if (!line)
+                moveToNextLine();
</ins><span class="cx">         }
</span><ins>+    },
+    
+    lex: function()
+    {
+        var token = null;
+        var codeFragment = this.lineCode.substring(this.cursor);
+        
+        for (var i = 0; i &lt; this.rules.length; i++) {
+            var rule = this.rules[i];
+            var ruleContinueStateCondition = typeof rule.continueStateCondition === &quot;undefined&quot; ? this.ContinueState.None : rule.continueStateCondition;
+            if (this.continueState === ruleContinueStateCondition) {
+                if (typeof rule.lexStateCondition !== &quot;undefined&quot; &amp;&amp; this.lexState !== rule.lexStateCondition)
+                    continue;
+                var match = rule.pattern.exec(codeFragment);
+                if (match) {
+                    token = match[0];
+                    if (token) {
+                        if (!rule.dontAppendNonToken)
+                            this.appendNonToken();
+                        return rule.action.call(this, token);
+                    }
+                }
+            }
+        }
+        this.nonToken += codeFragment[0];
+        this.cursor++;
+    },
+    
+    appendNonToken: function ()
+    {
+        if (this.nonToken.length &gt; 0) {
+            this.lineFragment.appendChild(document.createTextNode(this.nonToken));
+            this.nonToken = &quot;&quot;;
+        }
+    },
+    
+    syntaxHighlightNode: function(node)
+    {
+        this.lineCode = node.textContent;
+        this.lineFragment = document.createDocumentFragment();
+        this.cursor = 0;
+        while (true) {
+            if (this.cursor &gt;= this.lineCode.length) {
+                var codeFragment = this.lineCode.substring(this.cursor);
+                this.nonToken += codeFragment;
+                this.cursor += codeFragment.length;
+                this.appendNonToken();
+                while (node.firstChild)
+                    node.removeChild(node.firstChild);
+                node.appendChild(this.lineFragment);
+                this.lineFragment =null;
+                return;
+            }
</ins><span class="cx"> 
</span><del>-        var boundProcessChunk = processChunk.bind(this);
-        var processChunkInterval = setInterval(boundProcessChunk, 25);
-        boundProcessChunk();
</del><ins>+            this.lex();
+        }
</ins><span class="cx">     }
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-WebInspector.CSSSourceSyntaxHighligher = function(table, sourceFrame) {
-    WebInspector.SourceSyntaxHighligher.call(this, table, sourceFrame);
</del><ins>+WebInspector.CSSSourceSyntaxHighlighter = function(table, sourceFrame) {
+    WebInspector.SourceSyntaxHighlighter.call(this, table, sourceFrame);
</ins><span class="cx"> 
</span><del>-    this.findNumber = this.generateFinder(/^((-?(\d+|\d*\.\d+))|^(#[a-fA-F0-9]{3,6}))(?:\D|$)/, 1, &quot;webkit-css-number&quot;);
-    this.findUnits = this.generateFinder(/^(px|em|pt|in|cm|mm|pc|ex)(?:\W|$)/, 1, &quot;webkit-css-unit&quot;);
-    this.findKeyword = this.generateFinder(/^(rgba?|hsla?|var)(?:\W|$)/, 1, &quot;webkit-css-keyword&quot;);
-    this.findSingleLineString = this.generateFinder(/^&quot;(?:[^&quot;\\]|\\.)*&quot;|^'([^'\\]|\\.)*'/, 0, &quot;webkit-css-string&quot;); // &quot; this quote keeps Xcode happy
-    this.findSingleLineComment = this.generateFinder(/^\/\*.*?\*\//, 0, &quot;webkit-css-comment&quot;);
-    this.findMultilineCommentStart = this.generateFinder(/^\/\*.*$/, 0, &quot;webkit-css-comment&quot;);
-    this.findMultilineCommentEnd = this.generateFinder(/^.*?\*\//, 0, &quot;webkit-css-comment&quot;);
-    this.findSelector = this.generateFinder(/^([#\.]?[_a-zA-Z].*?)(?:\W|$)/, 1, &quot;webkit-css-selector&quot;);
-    this.findProperty = this.generateFinder(/^(-?[_a-z0-9][_a-z0-9-]*\s*)(?:\:)/, 1, &quot;webkit-css-property&quot;);
-    this.findGenericIdent = this.generateFinder(/^([@-]?[_a-z0-9][_a-z0-9-]*)(?:\W|$)/, 1, &quot;webkit-css-string&quot;);
-}
-
-WebInspector.CSSSourceSyntaxHighligher.prototype = {
-    deleteContinueFlags: function(cell)
</del><ins>+    this.LexState = {
+        Initial: 1,
+        DeclarationProperty: 2,
+        DeclarationValue: 3,
+        AtMedia: 4,
+        AtRule: 5,
+        AtKeyframes: 6
+    };
+    this.ContinueState = {
+        None: 0,
+        Comment: 1
+    };
+    
+    this.nonToken = &quot;&quot;;
+    this.cursor = 0;
+    this.lineIndex = -1;
+    this.lineCode = &quot;&quot;;
+    this.lineFragment = null;
+    this.lexState = this.LexState.Initial;
+    this.continueState = this.ContinueState.None;
+    
+    const urlPattern = /^url\(\s*(?:(?:&quot;(?:[^\\\&quot;]|(?:\\[\da-f]{1,6}\s?|\.))*&quot;|'(?:[^\\\']|(?:\\[\da-f]{1,6}\s?|\.))*')|(?:[!#$%&amp;*-~\w]|(?:\\[\da-f]{1,6}\s?|\.))*)\s*\)/i;
+    const stringPattern = /^(?:&quot;(?:[^\\\&quot;]|(?:\\[\da-f]{1,6}\s?|\.))*&quot;|'(?:[^\\\']|(?:\\[\da-f]{1,6}\s?|\.))*')/i;
+    const identPattern = /^-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*/i;
+    const startBlockPattern = /^{/i;
+    const endBlockPattern = /^}/i;
+    this.rules = [{
+        pattern: /^\/\*[^\*]*\*+([^\/*][^*]*\*+)*\//i,
+        action: commentAction
+    }, {
+        pattern: /^(?:\/\*(?:[^\*]|\*[^\/])*)/i,
+        action: commentStartAction
+    }, {
+        pattern: /^(?:(?:[^\*]|\*[^\/])*\*+\/)/i,
+        action: commentEndAction,
+        continueStateCondition: this.ContinueState.Comment
+    }, {
+        pattern: /^.*/i,
+        action: commentMiddleAction,
+        continueStateCondition: this.ContinueState.Comment
+    }, {
+        pattern: /^(?:(?:-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*|\*)(?:#-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*|\.-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*|\[\s*-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*\s*(?:(?:=|~=|\|=)\s*(?:-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*|(?:&quot;(?:[^\\\&quot;]|(?:\\[\da-f]{1,6}\s?|\.))*&quot;|'(?:[^\\\']|(?:\\[\da-f]{1,6}\s?|\.))*'))\s*)?\]|:(?:-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*|-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*\(\s*(?:-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*\s*)?\)))*|(?:#-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*|\.-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*|\[\s*-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*\s*(?:(?:=|~=|\|=)\s*(?:-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*|(?:&quot;(?:[^\\\&quot;]|(?:\\[\da-f]{1,6}\s?|\.))*&quot;|'(?:[^\\\']|(?:\\[\da-f]{1,6}\s?|\.))*'))\s*)?\]|:(?:-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*|-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*\(\s*(?:-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*\s*)?\)))+)/i,
+        action: selectorAction,
+        lexStateCondition: this.LexState.Initial
+    }, {
+        pattern: startBlockPattern,
+        action: startRulesetBlockAction,
+        lexStateCondition: this.LexState.Initial,
+        dontAppendNonToken: true
+    }, {
+        pattern: identPattern,
+        action: propertyAction,
+        lexStateCondition: this.LexState.DeclarationProperty,
+        dontAppendNonToken: true
+    }, {
+        pattern: /^:/i,
+        action: declarationColonAction,
+        lexStateCondition: this.LexState.DeclarationProperty,
+        dontAppendNonToken: true
+    }, {
+        pattern: /^(?:#(?:[\da-f]{6}|[\da-f]{3})|rgba\(\s*(?:\d+|\d*\.\d+)%?\s*,\s*(?:\d+|\d*\.\d+)%?\s*,\s*(?:\d+|\d*\.\d+)%?\s*,\s*(?:\d+|\d*\.\d+)%?\s*\)|hsla\(\s*(?:\d+|\d*\.\d+)%?\s*,\s*(?:\d+|\d*\.\d+)%?\s*,\s*(?:\d+|\d*\.\d+)%?\s*,\s*(?:\d+|\d*\.\d+)%?\s*\)|rgb\(\s*(?:\d+|\d*\.\d+)%?\s*,\s*(?:\d+|\d*\.\d+)%?\s*,\s*(?:\d+|\d*\.\d+)%?\s*\)|hsl\(\s*(?:\d+|\d*\.\d+)%?\s*,\s*(?:\d+|\d*\.\d+)%?\s*,\s*(?:\d+|\d*\.\d+)%?\s*\))/i,
+        action: colorAction,
+        lexStateCondition: this.LexState.DeclarationValue
+    }, {
+        pattern: /^(?:(?:\d+|\d*\.\d+)(?:em|rem|__qem|ex|px|cm|mm|in|pt|pc|deg|rad|grad|turn|ms|s|Hz|kHz|%)?)/i,
+        action: numvalueAction,
+        lexStateCondition: this.LexState.DeclarationValue
+    }, {
+        pattern: urlPattern,
+        action: urlAction,
+        lexStateCondition: this.LexState.DeclarationValue
+    }, {
+        pattern: stringPattern,
+        action: stringAction,
+        lexStateCondition: this.LexState.DeclarationValue
+    }, {
+        pattern: /^!\s*important/i,
+        action: importantAction,
+        lexStateCondition: this.LexState.DeclarationValue
+    }, {
+        pattern: identPattern,
+        action: valueIdentAction,
+        lexStateCondition: this.LexState.DeclarationValue,
+        dontAppendNonToken: true
+    }, {
+        pattern: /^;/i,
+        action: declarationSemicolonAction,
+        lexStateCondition: this.LexState.DeclarationValue,
+        dontAppendNonToken: true
+    }, {
+        pattern: endBlockPattern,
+        action: endRulesetBlockAction,
+        lexStateCondition: this.LexState.DeclarationProperty,
+        dontAppendNonToken: true
+    }, {
+        pattern: endBlockPattern,
+        action: endRulesetBlockAction,
+        lexStateCondition: this.LexState.DeclarationValue,
+        dontAppendNonToken: true
+    }, {
+        pattern: /^@media/i,
+        action: atMediaAction,
+        lexStateCondition: this.LexState.Initial
+    }, {
+        pattern: startBlockPattern,
+        action: startAtMediaBlockAction,
+        lexStateCondition: this.LexState.AtMedia,
+        dontAppendNonToken: true
+    }, {
+        pattern: /^@-webkit-keyframes/i,
+        action: atKeyframesAction,
+        lexStateCondition: this.LexState.Initial
+    }, {
+        pattern: startBlockPattern,
+        action: startAtMediaBlockAction,
+        lexStateCondition: this.LexState.AtKeyframes,
+        dontAppendNonToken: true
+    }, {
+        pattern: /^@-?(?:\w|(?:\\[\da-f]{1,6}\s?|\.))(?:[-\w]|(?:\\[\da-f]{1,6}\s?|\.))*/i,
+        action: atRuleAction,
+        lexStateCondition: this.LexState.Initial
+    }, {
+        pattern: /^;/i,
+        action: endAtRuleAction,
+        lexStateCondition: this.LexState.AtRule
+    }, {
+        pattern: urlPattern,
+        action: urlAction,
+        lexStateCondition: this.LexState.AtRule
+    }, {
+        pattern: stringPattern,
+        action: stringAction,
+        lexStateCondition: this.LexState.AtRule
+    }, {
+        pattern: stringPattern,
+        action: stringAction,
+        lexStateCondition: this.LexState.AtKeyframes
+    }, {
+        pattern: identPattern,
+        action: atRuleIdentAction,
+        lexStateCondition: this.LexState.AtRule,
+        dontAppendNonToken: true
+    }, {
+        pattern: identPattern,
+        action: atRuleIdentAction,
+        lexStateCondition: this.LexState.AtMedia,
+        dontAppendNonToken: true
+    }, {
+        pattern: startBlockPattern,
+        action: startAtRuleBlockAction,
+        lexStateCondition: this.LexState.AtRule,
+        dontAppendNonToken: true
+    }];
+    
+    function commentAction(token)
</ins><span class="cx">     {
</span><del>-        if (!cell)
-            return;
-        delete cell._commentContinues;
-        delete cell._inSelector;
-    },
-
-    findPseudoClass: function(str)
</del><ins>+        this.cursor += token.length;
+        this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-comment&quot;));
+    }
+    
+    function commentStartAction(token)
</ins><span class="cx">     {
</span><del>-        var match = /^(::?)([_a-z0-9][_a-z0-9-]*)/.exec(str);
-        if (!match)
-            return null;
-        this.previousMatchLength = match[0].length;
-        var span = document.createElement(&quot;span&quot;);
-        span.appendChild(document.createTextNode(match[1]));
-        span.appendChild(this.createSpan(match[2], &quot;webkit-css-pseudo-class&quot;));
-        return span;
-    },
-
-    findURL: function(str)
</del><ins>+        this.cursor += token.length;
+        this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-comment&quot;));
+        this.continueState = this.ContinueState.Comment;
+    }
+    
+    function commentEndAction(token)
</ins><span class="cx">     {
</span><del>-        var match = /^(?:local|url)\(([^\)]*?)\)/.exec(str);
-        if (!match)
-            return null;
-        this.previousMatchLength = match[0].length;
-        var innerUrlSpan = this.createSpan(match[1], &quot;webkit-css-url&quot;);
-        var outerSpan = document.createElement(&quot;span&quot;);
-        outerSpan.appendChild(this.createSpan(&quot;url&quot;, &quot;webkit-css-keyword&quot;));
-        outerSpan.appendChild(document.createTextNode(&quot;(&quot;));
-        outerSpan.appendChild(innerUrlSpan);
-        outerSpan.appendChild(document.createTextNode(&quot;)&quot;));
-        return outerSpan;
-    },
</del><ins>+        this.cursor += token.length;
+        this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-comment&quot;));
+        this.continueState = this.ContinueState.None;
+    }
</ins><span class="cx"> 
</span><del>-    findAtRule: function(str)
</del><ins>+    function commentMiddleAction(token)
</ins><span class="cx">     {
</span><del>-        var match = /^@[_a-z0-9][_a-z0-9-]*(?:\W|$)/.exec(str);
-        if (!match)
-            return null;
-        this.previousMatchLength = match[0].length;
-        return this.createSpan(match[0], &quot;webkit-css-at-rule&quot;);
-    },
-
-    syntaxHighlightLine: function(line, prevLine)
</del><ins>+        this.cursor += token.length;
+        this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-comment&quot;));
+    }
+    
+    function selectorAction(token)
</ins><span class="cx">     {
</span><del>-        var code = line.textContent;
-        while (line.firstChild)
-            line.removeChild(line.firstChild);
</del><ins>+        this.cursor += token.length;
+        this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-selector&quot;));
+    }
+    
+    function startRulesetBlockAction(token)
+    {
+        this.cursor += token.length;
+        this.nonToken += token;
+        this.lexState = this.LexState.DeclarationProperty;
+    }
+    
+    function endRulesetBlockAction(token)
+    {
+        this.cursor += token.length;
+        this.nonToken += token;
+        this.lexState = this.LexState.Initial;
+    }
+    
+    const propertyKeywords = {
+        &quot;background&quot;: true,
+        &quot;background-attachment&quot;: true,
+        &quot;background-clip&quot;: true,
+        &quot;background-color&quot;: true,
+        &quot;background-image&quot;: true,
+        &quot;background-origin&quot;: true,
+        &quot;background-position&quot;: true,
+        &quot;background-position-x&quot;: true,
+        &quot;background-position-y&quot;: true,
+        &quot;background-repeat&quot;: true,
+        &quot;background-repeat-x&quot;: true,
+        &quot;background-repeat-y&quot;: true,
+        &quot;background-size&quot;: true,
+        &quot;border&quot;: true,
+        &quot;border-bottom&quot;: true,
+        &quot;border-bottom-color&quot;: true,
+        &quot;border-bottom-left-radius&quot;: true,
+        &quot;border-bottom-right-radius&quot;: true,
+        &quot;border-bottom-style&quot;: true,
+        &quot;border-bottom-width&quot;: true,
+        &quot;border-collapse&quot;: true,
+        &quot;border-color&quot;: true,
+        &quot;border-left&quot;: true,
+        &quot;border-left-color&quot;: true,
+        &quot;border-left-style&quot;: true,
+        &quot;border-left-width&quot;: true,
+        &quot;border-radius&quot;: true,
+        &quot;border-right&quot;: true,
+        &quot;border-right-color&quot;: true,
+        &quot;border-right-style&quot;: true,
+        &quot;border-right-width&quot;: true,
+        &quot;border-spacing&quot;: true,
+        &quot;border-style&quot;: true,
+        &quot;border-top&quot;: true,
+        &quot;border-top-color&quot;: true,
+        &quot;border-top-left-radius&quot;: true,
+        &quot;border-top-right-radius&quot;: true,
+        &quot;border-top-style&quot;: true,
+        &quot;border-top-width&quot;: true,
+        &quot;border-width&quot;: true,
+        &quot;bottom&quot;: true,
+        &quot;caption-side&quot;: true,
+        &quot;clear&quot;: true,
+        &quot;clip&quot;: true,
+        &quot;color&quot;: true,
+        &quot;content&quot;: true,
+        &quot;counter-increment&quot;: true,
+        &quot;counter-reset&quot;: true,
+        &quot;cursor&quot;: true,
+        &quot;direction&quot;: true,
+        &quot;display&quot;: true,
+        &quot;empty-cells&quot;: true,
+        &quot;float&quot;: true,
+        &quot;font&quot;: true,
+        &quot;font-family&quot;: true,
+        &quot;font-size&quot;: true,
+        &quot;font-stretch&quot;: true,
+        &quot;font-style&quot;: true,
+        &quot;font-variant&quot;: true,
+        &quot;font-weight&quot;: true,
+        &quot;height&quot;: true,
+        &quot;left&quot;: true,
+        &quot;letter-spacing&quot;: true,
+        &quot;line-height&quot;: true,
+        &quot;list-style&quot;: true,
+        &quot;list-style-image&quot;: true,
+        &quot;list-style-position&quot;: true,
+        &quot;list-style-type&quot;: true,
+        &quot;margin&quot;: true,
+        &quot;margin-bottom&quot;: true,
+        &quot;margin-left&quot;: true,
+        &quot;margin-right&quot;: true,
+        &quot;margin-top&quot;: true,
+        &quot;max-height&quot;: true,
+        &quot;max-width&quot;: true,
+        &quot;min-height&quot;: true,
+        &quot;min-width&quot;: true,
+        &quot;opacity&quot;: true,
+        &quot;orphans&quot;: true,
+        &quot;outline&quot;: true,
+        &quot;outline-color&quot;: true,
+        &quot;outline-offset&quot;: true,
+        &quot;outline-style&quot;: true,
+        &quot;outline-width&quot;: true,
+        &quot;overflow&quot;: true,
+        &quot;overflow-x&quot;: true,
+        &quot;overflow-y&quot;: true,
+        &quot;padding&quot;: true,
+        &quot;padding-bottom&quot;: true,
+        &quot;padding-left&quot;: true,
+        &quot;padding-right&quot;: true,
+        &quot;padding-top&quot;: true,
+        &quot;page&quot;: true,
+        &quot;page-break-after&quot;: true,
+        &quot;page-break-before&quot;: true,
+        &quot;page-break-inside&quot;: true,
+        &quot;pointer-events&quot;: true,
+        &quot;position&quot;: true,
+        &quot;quotes&quot;: true,
+        &quot;resize&quot;: true,
+        &quot;right&quot;: true,
+        &quot;size&quot;: true,
+        &quot;src&quot;: true,
+        &quot;table-layout&quot;: true,
+        &quot;text-align&quot;: true,
+        &quot;text-decoration&quot;: true,
+        &quot;text-indent&quot;: true,
+        &quot;text-line-through&quot;: true,
+        &quot;text-line-through-color&quot;: true,
+        &quot;text-line-through-mode&quot;: true,
+        &quot;text-line-through-style&quot;: true,
+        &quot;text-line-through-width&quot;: true,
+        &quot;text-overflow&quot;: true,
+        &quot;text-overline&quot;: true,
+        &quot;text-overline-color&quot;: true,
+        &quot;text-overline-mode&quot;: true,
+        &quot;text-overline-style&quot;: true,
+        &quot;text-overline-width&quot;: true,
+        &quot;text-rendering&quot;: true,
+        &quot;text-shadow&quot;: true,
+        &quot;text-transform&quot;: true,
+        &quot;text-underline&quot;: true,
+        &quot;text-underline-color&quot;: true,
+        &quot;text-underline-mode&quot;: true,
+        &quot;text-underline-style&quot;: true,
+        &quot;text-underline-width&quot;: true,
+        &quot;top&quot;: true,
+        &quot;unicode-bidi&quot;: true,
+        &quot;unicode-range&quot;: true,
+        &quot;vertical-align&quot;: true,
+        &quot;visibility&quot;: true,
+        &quot;white-space&quot;: true,
+        &quot;widows&quot;: true,
+        &quot;width&quot;: true,
+        &quot;word-break&quot;: true,
+        &quot;word-spacing&quot;: true,
+        &quot;word-wrap&quot;: true,
+        &quot;z-index&quot;: true,
+        &quot;zoom&quot;: true,
+        &quot;-webkit-animation&quot;: true,
+        &quot;-webkit-animation-delay&quot;: true,
+        &quot;-webkit-animation-direction&quot;: true,
+        &quot;-webkit-animation-duration&quot;: true,
+        &quot;-webkit-animation-iteration-count&quot;: true,
+        &quot;-webkit-animation-name&quot;: true,
+        &quot;-webkit-animation-play-state&quot;: true,
+        &quot;-webkit-animation-timing-function&quot;: true,
+        &quot;-webkit-appearance&quot;: true,
+        &quot;-webkit-backface-visibility&quot;: true,
+        &quot;-webkit-background-clip&quot;: true,
+        &quot;-webkit-background-composite&quot;: true,
+        &quot;-webkit-background-origin&quot;: true,
+        &quot;-webkit-background-size&quot;: true,
+        &quot;-webkit-binding&quot;: true,
+        &quot;-webkit-border-fit&quot;: true,
+        &quot;-webkit-border-horizontal-spacing&quot;: true,
+        &quot;-webkit-border-image&quot;: true,
+        &quot;-webkit-border-radius&quot;: true,
+        &quot;-webkit-border-vertical-spacing&quot;: true,
+        &quot;-webkit-box-align&quot;: true,
+        &quot;-webkit-box-direction&quot;: true,
+        &quot;-webkit-box-flex&quot;: true,
+        &quot;-webkit-box-flex-group&quot;: true,
+        &quot;-webkit-box-lines&quot;: true,
+        &quot;-webkit-box-ordinal-group&quot;: true,
+        &quot;-webkit-box-orient&quot;: true,
+        &quot;-webkit-box-pack&quot;: true,
+        &quot;-webkit-box-reflect&quot;: true,
+        &quot;-webkit-box-shadow&quot;: true,
+        &quot;-webkit-box-sizing&quot;: true,
+        &quot;-webkit-column-break-after&quot;: true,
+        &quot;-webkit-column-break-before&quot;: true,
+        &quot;-webkit-column-break-inside&quot;: true,
+        &quot;-webkit-column-count&quot;: true,
+        &quot;-webkit-column-gap&quot;: true,
+        &quot;-webkit-column-rule&quot;: true,
+        &quot;-webkit-column-rule-color&quot;: true,
+        &quot;-webkit-column-rule-style&quot;: true,
+        &quot;-webkit-column-rule-width&quot;: true,
+        &quot;-webkit-column-width&quot;: true,
+        &quot;-webkit-columns&quot;: true,
+        &quot;-webkit-font-size-delta&quot;: true,
+        &quot;-webkit-font-smoothing&quot;: true,
+        &quot;-webkit-highlight&quot;: true,
+        &quot;-webkit-line-break&quot;: true,
+        &quot;-webkit-line-clamp&quot;: true,
+        &quot;-webkit-margin-bottom-collapse&quot;: true,
+        &quot;-webkit-margin-collapse&quot;: true,
+        &quot;-webkit-margin-start&quot;: true,
+        &quot;-webkit-margin-top-collapse&quot;: true,
+        &quot;-webkit-marquee&quot;: true,
+        &quot;-webkit-marquee-direction&quot;: true,
+        &quot;-webkit-marquee-increment&quot;: true,
+        &quot;-webkit-marquee-repetition&quot;: true,
+        &quot;-webkit-marquee-speed&quot;: true,
+        &quot;-webkit-marquee-style&quot;: true,
+        &quot;-webkit-mask&quot;: true,
+        &quot;-webkit-mask-attachment&quot;: true,
+        &quot;-webkit-mask-box-image&quot;: true,
+        &quot;-webkit-mask-clip&quot;: true,
+        &quot;-webkit-mask-composite&quot;: true,
+        &quot;-webkit-mask-image&quot;: true,
+        &quot;-webkit-mask-origin&quot;: true,
+        &quot;-webkit-mask-position&quot;: true,
+        &quot;-webkit-mask-position-x&quot;: true,
+        &quot;-webkit-mask-position-y&quot;: true,
+        &quot;-webkit-mask-repeat&quot;: true,
+        &quot;-webkit-mask-repeat-x&quot;: true,
+        &quot;-webkit-mask-repeat-y&quot;: true,
+        &quot;-webkit-mask-size&quot;: true,
+        &quot;-webkit-match-nearest-mail-blockquote-color&quot;: true,
+        &quot;-webkit-nbsp-mode&quot;: true,
+        &quot;-webkit-padding-start&quot;: true,
+        &quot;-webkit-perspective&quot;: true,
+        &quot;-webkit-perspective-origin&quot;: true,
+        &quot;-webkit-perspective-origin-x&quot;: true,
+        &quot;-webkit-perspective-origin-y&quot;: true,
+        &quot;-webkit-rtl-ordering&quot;: true,
+        &quot;-webkit-text-decorations-in-effect&quot;: true,
+        &quot;-webkit-text-fill-color&quot;: true,
+        &quot;-webkit-text-security&quot;: true,
+        &quot;-webkit-text-size-adjust&quot;: true,
+        &quot;-webkit-text-stroke&quot;: true,
+        &quot;-webkit-text-stroke-color&quot;: true,
+        &quot;-webkit-text-stroke-width&quot;: true,
+        &quot;-webkit-transform&quot;: true,
+        &quot;-webkit-transform-origin&quot;: true,
+        &quot;-webkit-transform-origin-x&quot;: true,
+        &quot;-webkit-transform-origin-y&quot;: true,
+        &quot;-webkit-transform-origin-z&quot;: true,
+        &quot;-webkit-transform-style&quot;: true,
+        &quot;-webkit-transition&quot;: true,
+        &quot;-webkit-transition-delay&quot;: true,
+        &quot;-webkit-transition-duration&quot;: true,
+        &quot;-webkit-transition-property&quot;: true,
+        &quot;-webkit-transition-timing-function&quot;: true,
+        &quot;-webkit-user-drag&quot;: true,
+        &quot;-webkit-user-modify&quot;: true,
+        &quot;-webkit-user-select&quot;: true,
+        &quot;-webkit-variable-declaration-block&quot;: true
+    };
+    function propertyAction(token)
+    {
+        this.cursor += token.length;
+        if (token in propertyKeywords) {
+            this.appendNonToken.call(this);
+            this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-property&quot;));
+        } else
+            this.nonToken += token;
+    }
+    
+    function declarationColonAction(token)
+    {
+        this.cursor += token.length;
+        this.nonToken += token;
+        this.lexState = this.LexState.DeclarationValue;
+    }
</ins><span class="cx"> 
</span><del>-        var token;
-        var tmp = 0;
-        var i = 0;
-        this.previousMatchLength = 0;
</del><ins>+    const valueKeywords = {
+        &quot;inherit&quot;: true,
+        &quot;initial&quot;: true,
+        &quot;none&quot;: true,
+        &quot;hidden&quot;: true,
+        &quot;inset&quot;: true,
+        &quot;groove&quot;: true,
+        &quot;ridge&quot;: true,
+        &quot;outset&quot;: true,
+        &quot;dotted&quot;: true,
+        &quot;dashed&quot;: true,
+        &quot;solid&quot;: true,
+        &quot;double&quot;: true,
+        &quot;caption&quot;: true,
+        &quot;icon&quot;: true,
+        &quot;menu&quot;: true,
+        &quot;message-box&quot;: true,
+        &quot;small-caption&quot;: true,
+        &quot;-webkit-mini-control&quot;: true,
+        &quot;-webkit-small-control&quot;: true,
+        &quot;-webkit-control&quot;: true,
+        &quot;status-bar&quot;: true,
+        &quot;italic&quot;: true,
+        &quot;oblique&quot;: true,
+        &quot;all&quot;: true,
+        &quot;small-caps&quot;: true,
+        &quot;normal&quot;: true,
+        &quot;bold&quot;: true,
+        &quot;bolder&quot;: true,
+        &quot;lighter&quot;: true,
+        &quot;xx-small&quot;: true,
+        &quot;x-small&quot;: true,
+        &quot;small&quot;: true,
+        &quot;medium&quot;: true,
+        &quot;large&quot;: true,
+        &quot;x-large&quot;: true,
+        &quot;xx-large&quot;: true,
+        &quot;-webkit-xxx-large&quot;: true,
+        &quot;smaller&quot;: true,
+        &quot;larger&quot;: true,
+        &quot;wider&quot;: true,
+        &quot;narrower&quot;: true,
+        &quot;ultra-condensed&quot;: true,
+        &quot;extra-condensed&quot;: true,
+        &quot;condensed&quot;: true,
+        &quot;semi-condensed&quot;: true,
+        &quot;semi-expanded&quot;: true,
+        &quot;expanded&quot;: true,
+        &quot;extra-expanded&quot;: true,
+        &quot;ultra-expanded&quot;: true,
+        &quot;serif&quot;: true,
+        &quot;sans-serif&quot;: true,
+        &quot;cursive&quot;: true,
+        &quot;fantasy&quot;: true,
+        &quot;monospace&quot;: true,
+        &quot;-webkit-body&quot;: true,
+        &quot;aqua&quot;: true,
+        &quot;black&quot;: true,
+        &quot;blue&quot;: true,
+        &quot;fuchsia&quot;: true,
+        &quot;gray&quot;: true,
+        &quot;green&quot;: true,
+        &quot;lime&quot;: true,
+        &quot;maroon&quot;: true,
+        &quot;navy&quot;: true,
+        &quot;olive&quot;: true,
+        &quot;orange&quot;: true,
+        &quot;purple&quot;: true,
+        &quot;red&quot;: true,
+        &quot;silver&quot;: true,
+        &quot;teal&quot;: true,
+        &quot;white&quot;: true,
+        &quot;yellow&quot;: true,
+        &quot;transparent&quot;: true,
+        &quot;-webkit-link&quot;: true,
+        &quot;-webkit-activelink&quot;: true,
+        &quot;activeborder&quot;: true,
+        &quot;activecaption&quot;: true,
+        &quot;appworkspace&quot;: true,
+        &quot;background&quot;: true,
+        &quot;buttonface&quot;: true,
+        &quot;buttonhighlight&quot;: true,
+        &quot;buttonshadow&quot;: true,
+        &quot;buttontext&quot;: true,
+        &quot;captiontext&quot;: true,
+        &quot;graytext&quot;: true,
+        &quot;highlight&quot;: true,
+        &quot;highlighttext&quot;: true,
+        &quot;inactiveborder&quot;: true,
+        &quot;inactivecaption&quot;: true,
+        &quot;inactivecaptiontext&quot;: true,
+        &quot;infobackground&quot;: true,
+        &quot;infotext&quot;: true,
+        &quot;match&quot;: true,
+        &quot;menutext&quot;: true,
+        &quot;scrollbar&quot;: true,
+        &quot;threeddarkshadow&quot;: true,
+        &quot;threedface&quot;: true,
+        &quot;threedhighlight&quot;: true,
+        &quot;threedlightshadow&quot;: true,
+        &quot;threedshadow&quot;: true,
+        &quot;window&quot;: true,
+        &quot;windowframe&quot;: true,
+        &quot;windowtext&quot;: true,
+        &quot;-webkit-focus-ring-color&quot;: true,
+        &quot;currentcolor&quot;: true,
+        &quot;grey&quot;: true,
+        &quot;-webkit-text&quot;: true,
+        &quot;repeat&quot;: true,
+        &quot;repeat-x&quot;: true,
+        &quot;repeat-y&quot;: true,
+        &quot;no-repeat&quot;: true,
+        &quot;clear&quot;: true,
+        &quot;copy&quot;: true,
+        &quot;source-over&quot;: true,
+        &quot;source-in&quot;: true,
+        &quot;source-out&quot;: true,
+        &quot;source-atop&quot;: true,
+        &quot;destination-over&quot;: true,
+        &quot;destination-in&quot;: true,
+        &quot;destination-out&quot;: true,
+        &quot;destination-atop&quot;: true,
+        &quot;xor&quot;: true,
+        &quot;plus-darker&quot;: true,
+        &quot;plus-lighter&quot;: true,
+        &quot;baseline&quot;: true,
+        &quot;middle&quot;: true,
+        &quot;sub&quot;: true,
+        &quot;super&quot;: true,
+        &quot;text-top&quot;: true,
+        &quot;text-bottom&quot;: true,
+        &quot;top&quot;: true,
+        &quot;bottom&quot;: true,
+        &quot;-webkit-baseline-middle&quot;: true,
+        &quot;-webkit-auto&quot;: true,
+        &quot;left&quot;: true,
+        &quot;right&quot;: true,
+        &quot;center&quot;: true,
+        &quot;justify&quot;: true,
+        &quot;-webkit-left&quot;: true,
+        &quot;-webkit-right&quot;: true,
+        &quot;-webkit-center&quot;: true,
+        &quot;outside&quot;: true,
+        &quot;inside&quot;: true,
+        &quot;disc&quot;: true,
+        &quot;circle&quot;: true,
+        &quot;square&quot;: true,
+        &quot;decimal&quot;: true,
+        &quot;decimal-leading-zero&quot;: true,
+        &quot;lower-roman&quot;: true,
+        &quot;upper-roman&quot;: true,
+        &quot;lower-greek&quot;: true,
+        &quot;lower-alpha&quot;: true,
+        &quot;lower-latin&quot;: true,
+        &quot;upper-alpha&quot;: true,
+        &quot;upper-latin&quot;: true,
+        &quot;hebrew&quot;: true,
+        &quot;armenian&quot;: true,
+        &quot;georgian&quot;: true,
+        &quot;cjk-ideographic&quot;: true,
+        &quot;hiragana&quot;: true,
+        &quot;katakana&quot;: true,
+        &quot;hiragana-iroha&quot;: true,
+        &quot;katakana-iroha&quot;: true,
+        &quot;inline&quot;: true,
+        &quot;block&quot;: true,
+        &quot;list-item&quot;: true,
+        &quot;run-in&quot;: true,
+        &quot;compact&quot;: true,
+        &quot;inline-block&quot;: true,
+        &quot;table&quot;: true,
+        &quot;inline-table&quot;: true,
+        &quot;table-row-group&quot;: true,
+        &quot;table-header-group&quot;: true,
+        &quot;table-footer-group&quot;: true,
+        &quot;table-row&quot;: true,
+        &quot;table-column-group&quot;: true,
+        &quot;table-column&quot;: true,
+        &quot;table-cell&quot;: true,
+        &quot;table-caption&quot;: true,
+        &quot;-webkit-box&quot;: true,
+        &quot;-webkit-inline-box&quot;: true,
+        &quot;-wap-marquee&quot;: true,
+        &quot;auto&quot;: true,
+        &quot;crosshair&quot;: true,
+        &quot;default&quot;: true,
+        &quot;pointer&quot;: true,
+        &quot;move&quot;: true,
+        &quot;vertical-text&quot;: true,
+        &quot;cell&quot;: true,
+        &quot;context-menu&quot;: true,
+        &quot;alias&quot;: true,
+        &quot;progress&quot;: true,
+        &quot;no-drop&quot;: true,
+        &quot;not-allowed&quot;: true,
+        &quot;-webkit-zoom-in&quot;: true,
+        &quot;-webkit-zoom-out&quot;: true,
+        &quot;e-resize&quot;: true,
+        &quot;ne-resize&quot;: true,
+        &quot;nw-resize&quot;: true,
+        &quot;n-resize&quot;: true,
+        &quot;se-resize&quot;: true,
+        &quot;sw-resize&quot;: true,
+        &quot;s-resize&quot;: true,
+        &quot;w-resize&quot;: true,
+        &quot;ew-resize&quot;: true,
+        &quot;ns-resize&quot;: true,
+        &quot;nesw-resize&quot;: true,
+        &quot;nwse-resize&quot;: true,
+        &quot;col-resize&quot;: true,
+        &quot;row-resize&quot;: true,
+        &quot;text&quot;: true,
+        &quot;wait&quot;: true,
+        &quot;help&quot;: true,
+        &quot;all-scroll&quot;: true,
+        &quot;-webkit-grab&quot;: true,
+        &quot;-webkit-grabbing&quot;: true,
+        &quot;ltr&quot;: true,
+        &quot;rtl&quot;: true,
+        &quot;capitalize&quot;: true,
+        &quot;uppercase&quot;: true,
+        &quot;lowercase&quot;: true,
+        &quot;visible&quot;: true,
+        &quot;collapse&quot;: true,
+        &quot;above&quot;: true,
+        &quot;absolute&quot;: true,
+        &quot;always&quot;: true,
+        &quot;avoid&quot;: true,
+        &quot;below&quot;: true,
+        &quot;bidi-override&quot;: true,
+        &quot;blink&quot;: true,
+        &quot;both&quot;: true,
+        &quot;close-quote&quot;: true,
+        &quot;crop&quot;: true,
+        &quot;cross&quot;: true,
+        &quot;embed&quot;: true,
+        &quot;fixed&quot;: true,
+        &quot;hand&quot;: true,
+        &quot;hide&quot;: true,
+        &quot;higher&quot;: true,
+        &quot;invert&quot;: true,
+        &quot;landscape&quot;: true,
+        &quot;level&quot;: true,
+        &quot;line-through&quot;: true,
+        &quot;local&quot;: true,
+        &quot;loud&quot;: true,
+        &quot;lower&quot;: true,
+        &quot;-webkit-marquee&quot;: true,
+        &quot;mix&quot;: true,
+        &quot;no-close-quote&quot;: true,
+        &quot;no-open-quote&quot;: true,
+        &quot;nowrap&quot;: true,
+        &quot;open-quote&quot;: true,
+        &quot;overlay&quot;: true,
+        &quot;overline&quot;: true,
+        &quot;portrait&quot;: true,
+        &quot;pre&quot;: true,
+        &quot;pre-line&quot;: true,
+        &quot;pre-wrap&quot;: true,
+        &quot;relative&quot;: true,
+        &quot;scroll&quot;: true,
+        &quot;separate&quot;: true,
+        &quot;show&quot;: true,
+        &quot;static&quot;: true,
+        &quot;thick&quot;: true,
+        &quot;thin&quot;: true,
+        &quot;underline&quot;: true,
+        &quot;-webkit-nowrap&quot;: true,
+        &quot;stretch&quot;: true,
+        &quot;start&quot;: true,
+        &quot;end&quot;: true,
+        &quot;reverse&quot;: true,
+        &quot;horizontal&quot;: true,
+        &quot;vertical&quot;: true,
+        &quot;inline-axis&quot;: true,
+        &quot;block-axis&quot;: true,
+        &quot;single&quot;: true,
+        &quot;multiple&quot;: true,
+        &quot;forwards&quot;: true,
+        &quot;backwards&quot;: true,
+        &quot;ahead&quot;: true,
+        &quot;up&quot;: true,
+        &quot;down&quot;: true,
+        &quot;slow&quot;: true,
+        &quot;fast&quot;: true,
+        &quot;infinite&quot;: true,
+        &quot;slide&quot;: true,
+        &quot;alternate&quot;: true,
+        &quot;read-only&quot;: true,
+        &quot;read-write&quot;: true,
+        &quot;read-write-plaintext-only&quot;: true,
+        &quot;element&quot;: true,
+        &quot;ignore&quot;: true,
+        &quot;intrinsic&quot;: true,
+        &quot;min-intrinsic&quot;: true,
+        &quot;clip&quot;: true,
+        &quot;ellipsis&quot;: true,
+        &quot;discard&quot;: true,
+        &quot;dot-dash&quot;: true,
+        &quot;dot-dot-dash&quot;: true,
+        &quot;wave&quot;: true,
+        &quot;continuous&quot;: true,
+        &quot;skip-white-space&quot;: true,
+        &quot;break-all&quot;: true,
+        &quot;break-word&quot;: true,
+        &quot;space&quot;: true,
+        &quot;after-white-space&quot;: true,
+        &quot;checkbox&quot;: true,
+        &quot;radio&quot;: true,
+        &quot;push-button&quot;: true,
+        &quot;square-button&quot;: true,
+        &quot;button&quot;: true,
+        &quot;button-bevel&quot;: true,
+        &quot;default-button&quot;: true,
+        &quot;list-button&quot;: true,
+        &quot;listbox&quot;: true,
+        &quot;listitem&quot;: true,
+        &quot;media-fullscreen-button&quot;: true,
+        &quot;media-mute-button&quot;: true,
+        &quot;media-play-button&quot;: true,
+        &quot;media-seek-back-button&quot;: true,
+        &quot;media-seek-forward-button&quot;: true,
+        &quot;media-rewind-button&quot;: true,
+        &quot;media-return-to-realtime-button&quot;: true,
+        &quot;media-slider&quot;: true,
+        &quot;media-sliderthumb&quot;: true,
+        &quot;media-volume-slider-container&quot;: true,
+        &quot;media-volume-slider&quot;: true,
+        &quot;media-volume-sliderthumb&quot;: true,
+        &quot;media-controls-background&quot;: true,
+        &quot;media-current-time-display&quot;: true,
+        &quot;media-time-remaining-display&quot;: true,
+        &quot;menulist&quot;: true,
+        &quot;menulist-button&quot;: true,
+        &quot;menulist-text&quot;: true,
+        &quot;menulist-textfield&quot;: true,
+        &quot;slider-horizontal&quot;: true,
+        &quot;slider-vertical&quot;: true,
+        &quot;sliderthumb-horizontal&quot;: true,
+        &quot;sliderthumb-vertical&quot;: true,
+        &quot;caret&quot;: true,
+        &quot;searchfield&quot;: true,
+        &quot;searchfield-decoration&quot;: true,
+        &quot;searchfield-results-decoration&quot;: true,
+        &quot;searchfield-results-button&quot;: true,
+        &quot;searchfield-cancel-button&quot;: true,
+        &quot;textfield&quot;: true,
+        &quot;textarea&quot;: true,
+        &quot;caps-lock-indicator&quot;: true,
+        &quot;round&quot;: true,
+        &quot;border&quot;: true,
+        &quot;border-box&quot;: true,
+        &quot;content&quot;: true,
+        &quot;content-box&quot;: true,
+        &quot;padding&quot;: true,
+        &quot;padding-box&quot;: true,
+        &quot;contain&quot;: true,
+        &quot;cover&quot;: true,
+        &quot;logical&quot;: true,
+        &quot;visual&quot;: true,
+        &quot;lines&quot;: true,
+        &quot;running&quot;: true,
+        &quot;paused&quot;: true,
+        &quot;flat&quot;: true,
+        &quot;preserve-3d&quot;: true,
+        &quot;ease&quot;: true,
+        &quot;linear&quot;: true,
+        &quot;ease-in&quot;: true,
+        &quot;ease-out&quot;: true,
+        &quot;ease-in-out&quot;: true,
+        &quot;document&quot;: true,
+        &quot;reset&quot;: true,
+        &quot;visiblePainted&quot;: true,
+        &quot;visibleFill&quot;: true,
+        &quot;visibleStroke&quot;: true,
+        &quot;painted&quot;: true,
+        &quot;fill&quot;: true,
+        &quot;stroke&quot;: true,
+        &quot;antialiased&quot;: true,
+        &quot;subpixel-antialiased&quot;: true,
+        &quot;optimizeSpeed&quot;: true,
+        &quot;optimizeLegibility&quot;: true,
+        &quot;geometricPrecision&quot;: true
+    };
+    function valueIdentAction(token) {
+        this.cursor += token.length;
+        if (token in valueKeywords) {
+            this.appendNonToken.call(this);
+            this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-keyword&quot;));
+        } else
+            this.nonToken += token;
+    }
</ins><span class="cx"> 
</span><del>-        if (prevLine) {
-            if (prevLine._commentContinues) {
-                if (!(token = this.findMultilineCommentEnd(code))) {
-                    token = this.createSpan(code, &quot;webkit-javascript-comment&quot;);
-                    line._commentContinues = true;
-                }
-            }
-            if (token) {
-                i += this.previousMatchLength ? this.previousMatchLength : code.length;
-                tmp = i;
-                line.appendChild(token);
-            }
</del><ins>+    function numvalueAction(token)
+    {
+        this.cursor += token.length;
+        this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-number&quot;));
+    }
+    
+    function declarationSemicolonAction(token)
+    {
+        this.cursor += token.length;
+        this.nonToken += token;
+        this.lexState = this.LexState.DeclarationProperty;
+    }
+    
+    function urlAction(token)
+    {
+        this.cursor += token.length;
+        this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-url&quot;));
+    }
+    
+    function stringAction(token)
+    {
+        this.cursor += token.length;
+        this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-string&quot;));
+    }
+    
+    function colorAction(token)
+    {
+        this.cursor += token.length;
+        this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-color&quot;));
+    }
+    
+    function importantAction(token)
+    {
+        this.cursor += token.length;
+        this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-important&quot;));
+    }
+    
+    function atMediaAction(token)
+    {
+        this.cursor += token.length;
+        this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-at-rule&quot;));
+        this.lexState = this.LexState.AtMedia;
+    }
+    
+    function startAtMediaBlockAction(token)
+    {
+        this.cursor += token.length;
+        this.nonToken += token;
+        this.lexState = this.LexState.Initial;
+    }
+    
+    function atKeyframesAction(token)
+    {
+        this.cursor += token.length;
+        this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-at-rule&quot;));
+        this.lexState = this.LexState.AtKeyframes;
+    }
+    
+    function startAtKeyframesBlockAction(token)
+    {
+        this.cursor += token.length;
+        this.nonToken += token;
+        this.lexState = this.LexState.Initial;
+    }
+    
+    function atRuleAction(token) {
+        this.cursor += token.length;
+        this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-at-rule&quot;));
+        this.lexState = this.LexState.AtRule;
+    }
+    
+    function endAtRuleAction(token) {
+        this.cursor += token.length;
+        this.nonToken += token;
+        this.lexState = this.LexState.Initial;
+    }
+    
+    function startAtRuleBlockAction(token)
+    {
+        this.cursor += token.length;
+        this.nonToken += token;
+        this.lexState = this.LexState.DeclarationProperty;
+    }
+    
+    const mediaTypes = [&quot;all&quot;, &quot;aural&quot;, &quot;braille&quot;, &quot;embossed&quot;, &quot;handheld&quot;, &quot;print&quot;, &quot;projection&quot;, &quot;screen&quot;, &quot;tty&quot;, &quot;tv&quot;];
+    function atRuleIdentAction(token) {
+        this.cursor += token.length;
+        if (mediaTypes.indexOf(token) === -1)
+            this.nonToken += token;
+        else {
+            this.appendNonToken.call(this);
+            this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-css-keyword&quot;));
</ins><span class="cx">         }
</span><del>-
-        var inSelector = (prevLine &amp;&amp; prevLine._inSelector); // inside a selector, we can now parse properties and values
-        var inAtRuleBlock = (prevLine &amp;&amp; prevLine._inAtRuleBlock); // inside an @rule block, but not necessarily inside a selector yet
-        var atRuleStarted = (prevLine &amp;&amp; prevLine._atRuleStarted); // we received an @rule, we may stop the @rule at a semicolon or open a block and become inAtRuleBlock
-        var atRuleIsSelector = (prevLine &amp;&amp; prevLine._atRuleIsSelector); // when this @rule opens a block it immediately goes into parsing properties and values instead of selectors
-
-        for ( ; i &lt; code.length; ++i) {
-            var codeFragment = code.substr(i);
-            var prevChar = code[i - 1];
-            var currChar = codeFragment[0];
-            token = this.findSingleLineComment(codeFragment);
-            if (!token) {
-                if ((token = this.findMultilineCommentStart(codeFragment)))
-                    line._commentContinues = true;
-                else if (currChar === &quot;;&quot; &amp;&amp; !inAtRuleBlock)
-                    atRuleStarted = false;
-                else if (currChar === &quot;}&quot;) {
-                    if (inSelector &amp;&amp; inAtRuleBlock &amp;&amp; atRuleIsSelector) {
-                        inSelector = false;
-                        inAtRuleBlock = false;
-                        atRuleStarted = false;
-                    } else if (inSelector) {
-                        inSelector = false;
-                    } else if (inAtRuleBlock) {
-                        inAtRuleBlock = false;
-                        atRuleStarted = false;
-                    }
-                } else if (currChar === &quot;{&quot;) {
-                    if (!atRuleStarted || inAtRuleBlock) {
-                        inSelector = true;
-                    } else if (!inAtRuleBlock &amp;&amp; atRuleIsSelector) {
-                        inAtRuleBlock = true;
-                        inSelector = true;
-                    } else if (!inAtRuleBlock) {
-                        inAtRuleBlock = true;
-                        inSelector = false;
-                    }
-                } else if (inSelector) {
-                    if (!prevChar || /^\d/.test(prevChar)) {
-                        token = this.findUnits(codeFragment);
-                    } else if (!prevChar || /^\W/.test(prevChar)) {
-                        token = this.findNumber(codeFragment) ||
-                                this.findKeyword(codeFragment) ||
-                                this.findURL(codeFragment) ||
-                                this.findProperty(codeFragment) ||
-                                this.findAtRule(codeFragment) ||
-                                this.findGenericIdent(codeFragment) ||
-                                this.findSingleLineString(codeFragment);
-                    }
-                } else if (!inSelector) {
-                    if (atRuleStarted &amp;&amp; !inAtRuleBlock)
-                        token = this.findURL(codeFragment); // for @import
-                    if (!token) {
-                        token = this.findSelector(codeFragment) ||
-                                this.findPseudoClass(codeFragment) ||
-                                this.findAtRule(codeFragment);
-                    }
-                }
-            }
-
-            if (token) {
-                if (currChar === &quot;@&quot;) {
-                    atRuleStarted = true;
-
-                    // The @font-face, @page, and @variables at-rules do not contain selectors like other at-rules
-                    // instead it acts as a selector and contains properties and values.
-                    var text = token.textContent;
-                    atRuleIsSelector = /font-face/.test(text) || /page/.test(text) || /variables/.test(text);
-                }
-
-                if (tmp !== i)
-                    line.appendChild(document.createTextNode(code.substring(tmp, i)));
-                line.appendChild(token);
-                i += this.previousMatchLength - 1;
-                tmp = i + 1;
-            }
-        }
-
-        line._inSelector = inSelector;
-        line._inAtRuleBlock = inAtRuleBlock;
-        line._atRuleStarted = atRuleStarted;
-        line._atRuleIsSelector = atRuleIsSelector;
-
-        if (tmp &lt; code.length)
-            line.appendChild(document.createTextNode(code.substring(tmp, i)));
</del><span class="cx">     }
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-WebInspector.CSSSourceSyntaxHighligher.prototype.__proto__ = WebInspector.SourceSyntaxHighligher.prototype;
</del><ins>+WebInspector.CSSSourceSyntaxHighlighter.prototype.__proto__ = WebInspector.SourceSyntaxHighlighter.prototype;
</ins><span class="cx"> 
</span><span class="cx"> WebInspector.JavaScriptSourceSyntaxHighlighter = function(table, sourceFrame) {
</span><del>-    WebInspector.SourceSyntaxHighligher.call(this, table, sourceFrame);
</del><ins>+    WebInspector.SourceSyntaxHighlighter.call(this, table, sourceFrame);
</ins><span class="cx"> 
</span><span class="cx">     this.LexState = {
</span><span class="cx">         Initial: 1,
</span><span class="lines">@@ -1003,82 +1857,82 @@
</span><span class="cx">     this.continueState = this.ContinueState.None;
</span><span class="cx">     
</span><span class="cx">     this.rules = [{
</span><del>-            pattern: /^(?:\/\/.*)/,
-            action: singleLineCommentAction
-        }, {
-            pattern: /^(?:\/\*(?:[^\*]|\*[^\/])*\*+\/)/,
-            action: multiLineSingleLineCommentAction
-        }, {
-            pattern: /^(?:\/\*(?:[^\*]|\*[^\/])*)/,
-            action: multiLineCommentStartAction
-        }, {
-            pattern: /^(?:(?:[^\*]|\*[^\/])*\*+\/)/,
-            action: multiLineCommentEndAction,
-            continueStateCondition: this.ContinueState.Comment
-        }, {
-            pattern: /^.*/,
-            action: multiLineCommentMiddleAction,
-            continueStateCondition: this.ContinueState.Comment
-        }, {
-            pattern: /^(?:(?:0|[1-9]\d*)\.\d+?(?:[eE](?:\d+|\+\d+|-\d+))?|\.\d+(?:[eE](?:\d+|\+\d+|-\d+))?|(?:0|[1-9]\d*)(?:[eE](?:\d+|\+\d+|-\d+))?|0x[0-9a-fA-F]+|0X[0-9a-fA-F]+)/,
-            action: numericLiteralAction
-        }, {
-            pattern: /^(?:&quot;(?:[^&quot;\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*&quot;|'(?:[^'\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*')/,
-            action: stringLiteralAction
-        }, {
-            pattern: /^(?:'(?:[^'\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*)\\$/,
-            action: singleQuoteStringStartAction
-        }, {
-            pattern: /^(?:(?:[^'\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*')/,
-            action: singleQuoteStringEndAction,
-            continueStateCondition: this.ContinueState.SingleQuoteString
-        }, {
-            pattern: /^(?:(?:[^'\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*)\\$/,
-            action: singleQuoteStringMiddleAction,
-            continueStateCondition: this.ContinueState.SingleQuoteString
-        }, {
-            pattern: /^(?:&quot;(?:[^&quot;\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*)\\$/,
-            action: doubleQuoteStringStartAction
-        }, {
-            pattern: /^(?:(?:[^&quot;\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*&quot;)/,
-            action: doubleQuoteStringEndAction,
-            continueStateCondition: this.ContinueState.DoubleQuoteString
-        }, {
-            pattern: /^(?:(?:[^&quot;\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*)\\$/,
-            action: doubleQuoteStringMiddleAction,
-            continueStateCondition: this.ContinueState.DoubleQuoteString
-        }, {
-            pattern: /^(?:(?:[a-zA-Z]|[$_]|\\(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F]))(?:(?:[a-zA-Z]|[$_]|\\(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F]))|[0-9])*)/,
-            action: identOrKeywordAction,
-            dontAppendNonToken: true
-        }, {
-            pattern: /^\)/,
-            action: rightParenAction,
-            dontAppendNonToken: true
-        }, {
-            pattern: /^(?:&lt;=|&gt;=|===|==|!=|!==|\+\+|\-\-|&lt;&lt;|&gt;&gt;|&gt;&gt;&gt;|&amp;&amp;|\|\||\+=|\-=|\*=|%=|&lt;&lt;=|&gt;&gt;=|&gt;&gt;&gt;=|&amp;=|\|=|^=|[{}\(\[\]\.;,&lt;&gt;\+\-\*%&amp;\|\^!~\?:=])/,
-            action: punctuatorAction,
-            dontAppendNonToken: true
-        }, {
-            pattern: /^(?:\/=?)/,
-            action: divPunctuatorAction,
-            stateCondition: this.LexState.DivisionAllowed,
-            dontAppendNonToken: true
-        }, {
-            pattern: /^(?:\/(?:(?:\\.)|[^\\*\/])(?:(?:\\.)|[^\\/])*\/(?:(?:[a-zA-Z]|[$_]|\\(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F]))|[0-9])*)/,
-            action: regExpLiteralAction
-        }, {
-            pattern: /^(?:\/(?:(?:\\.)|[^\\*\/])(?:(?:\\.)|[^\\/])*)\\$/,
-            action: regExpStartAction
-        }, {
-            pattern: /^(?:(?:(?:\\.)|[^\\/])*\/(?:(?:[a-zA-Z]|[$_]|\\(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F]))|[0-9])*)/,
-            action: regExpEndAction,
-            continueStateCondition: this.ContinueState.RegExp
-        }, {
-            pattern: /^(?:(?:(?:\\.)|[^\\/])*)\\$/,
-            action: regExpMiddleAction,
-            continueStateCondition: this.ContinueState.RegExp
-        }];
</del><ins>+        pattern: /^(?:\/\/.*)/,
+        action: singleLineCommentAction
+    }, {
+        pattern: /^(?:\/\*(?:[^\*]|\*[^\/])*\*+\/)/,
+        action: multiLineSingleLineCommentAction
+    }, {
+        pattern: /^(?:\/\*(?:[^\*]|\*[^\/])*)/,
+        action: multiLineCommentStartAction
+    }, {
+        pattern: /^(?:(?:[^\*]|\*[^\/])*\*+\/)/,
+        action: multiLineCommentEndAction,
+        continueStateCondition: this.ContinueState.Comment
+    }, {
+        pattern: /^.*/,
+        action: multiLineCommentMiddleAction,
+        continueStateCondition: this.ContinueState.Comment
+    }, {
+        pattern: /^(?:(?:0|[1-9]\d*)\.\d+?(?:[eE](?:\d+|\+\d+|-\d+))?|\.\d+(?:[eE](?:\d+|\+\d+|-\d+))?|(?:0|[1-9]\d*)(?:[eE](?:\d+|\+\d+|-\d+))?|0x[0-9a-fA-F]+|0X[0-9a-fA-F]+)/,
+        action: numericLiteralAction
+    }, {
+        pattern: /^(?:&quot;(?:[^&quot;\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*&quot;|'(?:[^'\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*')/,
+        action: stringLiteralAction
+    }, {
+        pattern: /^(?:'(?:[^'\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*)\\$/,
+        action: singleQuoteStringStartAction
+    }, {
+        pattern: /^(?:(?:[^'\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*')/,
+        action: singleQuoteStringEndAction,
+        continueStateCondition: this.ContinueState.SingleQuoteString
+    }, {
+        pattern: /^(?:(?:[^'\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*)\\$/,
+        action: singleQuoteStringMiddleAction,
+        continueStateCondition: this.ContinueState.SingleQuoteString
+    }, {
+        pattern: /^(?:&quot;(?:[^&quot;\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*)\\$/,
+        action: doubleQuoteStringStartAction
+    }, {
+        pattern: /^(?:(?:[^&quot;\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*&quot;)/,
+        action: doubleQuoteStringEndAction,
+        continueStateCondition: this.ContinueState.DoubleQuoteString
+    }, {
+        pattern: /^(?:(?:[^&quot;\\]|\\(?:['&quot;\bfnrtv]|[^'&quot;\bfnrtv0-9xu]|0|x[0-9a-fA-F][0-9a-fA-F]|(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])))*)\\$/,
+        action: doubleQuoteStringMiddleAction,
+        continueStateCondition: this.ContinueState.DoubleQuoteString
+    }, {
+        pattern: /^(?:(?:[a-zA-Z]|[$_]|\\(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F]))(?:(?:[a-zA-Z]|[$_]|\\(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F]))|[0-9])*)/,
+        action: identOrKeywordAction,
+        dontAppendNonToken: true
+    }, {
+        pattern: /^\)/,
+        action: rightParenAction,
+        dontAppendNonToken: true
+    }, {
+        pattern: /^(?:&lt;=|&gt;=|===|==|!=|!==|\+\+|\-\-|&lt;&lt;|&gt;&gt;|&gt;&gt;&gt;|&amp;&amp;|\|\||\+=|\-=|\*=|%=|&lt;&lt;=|&gt;&gt;=|&gt;&gt;&gt;=|&amp;=|\|=|^=|[{}\(\[\]\.;,&lt;&gt;\+\-\*%&amp;\|\^!~\?:=])/,
+        action: punctuatorAction,
+        dontAppendNonToken: true
+    }, {
+        pattern: /^(?:\/=?)/,
+        action: divPunctuatorAction,
+        lexStateCondition: this.LexState.DivisionAllowed,
+        dontAppendNonToken: true
+    }, {
+        pattern: /^(?:\/(?:(?:\\.)|[^\\*\/])(?:(?:\\.)|[^\\/])*\/(?:(?:[a-zA-Z]|[$_]|\\(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F]))|[0-9])*)/,
+        action: regExpLiteralAction
+    }, {
+        pattern: /^(?:\/(?:(?:\\.)|[^\\*\/])(?:(?:\\.)|[^\\/])*)\\$/,
+        action: regExpStartAction
+    }, {
+        pattern: /^(?:(?:(?:\\.)|[^\\/])*\/(?:(?:[a-zA-Z]|[$_]|\\(?:u[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F]))|[0-9])*)/,
+        action: regExpEndAction,
+        continueStateCondition: this.ContinueState.RegExp
+    }, {
+        pattern: /^(?:(?:(?:\\.)|[^\\/])*)\\$/,
+        action: regExpMiddleAction,
+        continueStateCondition: this.ContinueState.RegExp
+    }];
</ins><span class="cx">     
</span><span class="cx">     function singleLineCommentAction(token)
</span><span class="cx">     {
</span><span class="lines">@@ -1198,7 +2052,8 @@
</span><span class="cx">         const keywords = [&quot;null&quot;, &quot;true&quot;, &quot;false&quot;, &quot;break&quot;, &quot;case&quot;, &quot;catch&quot;, &quot;const&quot;, &quot;default&quot;, &quot;finally&quot;, &quot;for&quot;, &quot;instanceof&quot;, &quot;new&quot;, &quot;var&quot;, &quot;continue&quot;, &quot;function&quot;, &quot;return&quot;, &quot;void&quot;, &quot;delete&quot;, &quot;if&quot;, &quot;this&quot;, &quot;do&quot;, &quot;while&quot;, &quot;else&quot;, &quot;in&quot;, &quot;switch&quot;, &quot;throw&quot;, &quot;try&quot;, &quot;typeof&quot;, &quot;with&quot;, &quot;debugger&quot;, &quot;class&quot;, &quot;enum&quot;, &quot;export&quot;, &quot;extends&quot;, &quot;import&quot;, &quot;super&quot;, &quot;get&quot;, &quot;set&quot;];
</span><span class="cx">         this.cursor += token.length;
</span><span class="cx">         if (keywords.indexOf(token) === -1) {
</span><del>-            this.nonToken += token;
</del><ins>+            this.appendNonToken();
+            this.lineFragment.appendChild(this.createSpan(token, &quot;webkit-javascript-ident&quot;));
</ins><span class="cx">             this.lexState = this.LexState.DivisionAllowed;
</span><span class="cx">         } else {
</span><span class="cx">             this.appendNonToken();
</span><span class="lines">@@ -1229,132 +2084,4 @@
</span><span class="cx">     }
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-WebInspector.JavaScriptSourceSyntaxHighlighter.prototype = {
-    process: function()
-    {
-        // Split up the work into chunks so we don't block the
-        // UI thread while processing.
-
-        var rows = this.table.rows;
-        var rowsLength = rows.length;
-        const tokensPerChunk = 100;
-        const lineLengthLimit = 20000;
-        
-        var boundProcessChunk = processChunk.bind(this);
-        var processChunkInterval = setInterval(boundProcessChunk, 25);
-        boundProcessChunk();
-        
-        function processChunk()
-        {
-            for (var i = 0; i &lt; tokensPerChunk; i++) {
-                if (this.cursor &gt;= this.lineCode.length)
-                    moveToNextLine.call(this);
-                if (this.lineIndex &gt;= rowsLength) {
-                    this.sourceFrame.dispatchEventToListeners(&quot;syntax highlighting complete&quot;);
-                    return;
-                }
-                if (this.cursor &gt; lineLengthLimit) {
-                    var codeFragment = this.lineCode.substring(this.cursor);
-                    this.nonToken += codeFragment;
-                    this.cursor += codeFragment.length;
-                }
-
-                this.lex();
-            }
-        }
-        
-        function moveToNextLine()
-        {
-            this.appendNonToken();
-            
-            var row = rows[this.lineIndex];
-            var line = row ? row.cells[1] : null;
-            if (line &amp;&amp; this.lineFragment) {
-                Element.prototype.removeChildren.call(line);
-                
-                line.appendChild(this.lineFragment);
-                if (this.messageBubble)
-                    line.appendChild(this.messageBubble);
-                this.lineFragment = null;
-            }
-            this.lineIndex++;
-            if (this.lineIndex &gt;= rowsLength &amp;&amp; processChunkInterval) {
-                clearInterval(processChunkInterval);
-                this.sourceFrame.dispatchEventToListeners(&quot;syntax highlighting complete&quot;);
-                return;
-            }
-            row = rows[this.lineIndex];
-            line = row ? row.cells[1] : null;
-            
-            this.messageBubble = null;
-            if (line.lastChild &amp;&amp; line.lastChild.nodeType === Node.ELEMENT_NODE &amp;&amp; line.lastChild.hasStyleClass(&quot;webkit-html-message-bubble&quot;)) {
-                this.messageBubble = line.lastChild;
-                line.removeChild(this.messageBubble);
-            }
-
-            this.lineCode = line.textContent;
-            this.lineFragment = document.createDocumentFragment();
-            this.cursor = 0;
-            if (!line)
-                moveToNextLine();
-        }
-    },
-    
-    lex: function()
-    {
-        var token = null;
-        var codeFragment = this.lineCode.substring(this.cursor);
-        
-        for (var i = 0; i &lt; this.rules.length; i++) {
-            var rule = this.rules[i];
-            var ruleContinueStateCondition = typeof rule.continueStateCondition === &quot;undefined&quot; ? this.ContinueState.None : rule.continueStateCondition;
-            if (this.continueState === ruleContinueStateCondition) {
-                if (typeof rule.stateCondition !== &quot;undefined&quot; &amp;&amp; this.lexState !== rule.stateCondition)
-                    continue;
-                var match = rule.pattern.exec(codeFragment);
-                if (match) {
-                    token = match[0];
-                    if (token) {
-                        if (!rule.dontAppendNonToken)
-                            this.appendNonToken();
-                        return rule.action.call(this, token);
-                    }
-                }
-            }
-        }
-        this.nonToken += codeFragment[0];
-        this.cursor++;
-    },
-    
-    appendNonToken: function ()
-    {
-        if (this.nonToken.length &gt; 0) {
-            this.lineFragment.appendChild(document.createTextNode(this.nonToken));
-            this.nonToken = &quot;&quot;;
-        }
-    },
-    
-    syntaxHighlightNode: function(node)
-    {
-        this.lineCode = node.textContent;
-        this.lineFragment = document.createDocumentFragment();
-        this.cursor = 0;
-        while (true) {
-            if (this.cursor &gt;= this.lineCode.length) {
-                var codeFragment = this.lineCode.substring(this.cursor);
-                this.nonToken += codeFragment;
-                this.cursor += codeFragment.length;
-                this.appendNonToken();
-                while (node.firstChild)
-                    node.removeChild(node.firstChild);
-                node.appendChild(this.lineFragment);
-                this.lineFragment =null;
-                return;
-            }
-
-            this.lex();
-        }
-    }
-}
-
-WebInspector.JavaScriptSourceSyntaxHighlighter.prototype.__proto__ = WebInspector.SourceSyntaxHighligher.prototype;
</del><ins>+WebInspector.JavaScriptSourceSyntaxHighlighter.prototype.__proto__ = WebInspector.SourceSyntaxHighlighter.prototype;
</ins></span></pre></div>
<a id="trunkWebCoreinspectorfrontendinspectorSyntaxHighlightcss"></a>
<div class="modfile"><h4>Modified: trunk/WebCore/inspector/front-end/inspectorSyntaxHighlight.css (50410 => 50411)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/WebCore/inspector/front-end/inspectorSyntaxHighlight.css        2009-11-02 17:03:14 UTC (rev 50410)
+++ trunk/WebCore/inspector/front-end/inspectorSyntaxHighlight.css        2009-11-02 17:27:50 UTC (rev 50411)
</span><span class="lines">@@ -26,34 +26,30 @@
</span><span class="cx">  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-.webkit-css-comment { 
-    color: rgb(0, 116, 0);
-}
</del><ins>+ .webkit-css-comment { 
+     color: rgb(0, 116, 0);
+ }
</ins><span class="cx"> 
</span><del>-.webkit-css-string, .webkit-css-keyword, .webkit-css-unit {
-    color: rgb(7, 144, 154);
-}
</del><ins>+ .webkit-css-url, .webkit-css-color, .webkit-css-string, .webkit-css-keyword {
+     color: rgb(7, 144, 154);
+ }
</ins><span class="cx"> 
</span><del>-.webkit-css-number {
-    color: rgb(50, 0, 255);
-}
</del><ins>+ .webkit-css-number {
+     color: rgb(50, 0, 255);
+ }
</ins><span class="cx"> 
</span><del>-.webkit-css-property, .webkit-css-at-rule {
-    color: rgb(200, 0, 0);
-}
</del><ins>+ .webkit-css-property, .webkit-css-at-rule {
+     color: rgb(200, 0, 0);
+ }
</ins><span class="cx"> 
</span><del>-.webkit-css-url {
-    color: rgb(0, 0, 0);
-}
</del><ins>+ .webkit-css-selector {
+     rgb(0, 0, 0);
+ }
</ins><span class="cx"> 
</span><del>-.webkit-css-selector {
-    color: rgb(0, 0, 0);
-}
</del><ins>+ .webkit-css-important {
+     color: rgb(200, 0, 180);
+ }
</ins><span class="cx"> 
</span><del>-.webkit-css-pseudo-class {
-    color: rgb(128, 128, 128);
-}
-
</del><span class="cx"> .webkit-javascript-comment {
</span><span class="cx">     color: rgb(0, 116, 0);
</span><span class="cx"> }
</span></span></pre>
</div>
</div>

</body>
</html>