Bug 27147 - JS Syntax Highlight is incorrect for keyword followed by string or regexp
Summary: JS Syntax Highlight is incorrect for keyword followed by string or regexp
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P3 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2009-07-10 02:32 PDT by Keishi Hattori
Modified: 2009-10-27 11:33 PDT (History)
5 users (show)

See Also:


Attachments
testcase - inspect and see the syntax highlight for src.js (1.75 KB, application/zip)
2009-07-10 02:32 PDT, Keishi Hattori
no flags Details
Patch (3.49 KB, patch)
2009-07-10 04:02 PDT, Keishi Hattori
commit-queue: commit-queue-
Details | Formatted Diff | Diff
New Javascript Synax Highlighter (39.41 KB, patch)
2009-10-11 22:01 PDT, Keishi Hattori
no flags Details | Formatted Diff | Diff
proposed patch (23.14 KB, patch)
2009-10-25 16:32 PDT, Keishi Hattori
timothy: review-
Details | Formatted Diff | Diff
proposed patch with tests (26.75 KB, patch)
2009-10-25 21:47 PDT, Keishi Hattori
no flags Details | Formatted Diff | Diff
fixed some minor stuff (26.72 KB, patch)
2009-10-25 21:57 PDT, Keishi Hattori
timothy: review-
Details | Formatted Diff | Diff
proposed patch (27.22 KB, patch)
2009-10-27 08:03 PDT, Keishi Hattori
timothy: review+
commit-queue: commit-queue-
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Keishi Hattori 2009-07-10 02:32:39 PDT
Created attachment 32553 [details]
testcase - inspect and see the syntax highlight for src.js

JS Syntax Highlight is wrong when a string or regexp immediately follows a keyword without a space. (ex. return"foo"; )
Comment 1 Keishi Hattori 2009-07-10 04:02:04 PDT
Created attachment 32554 [details]
Patch

all-minified.js at slashdot.org looks much better with this patch.
Comment 2 Timothy Hatcher 2009-09-11 19:59:54 PDT
Wait, why was this marked obsolete?
Comment 3 WebKit Commit Bot 2009-09-11 20:10:53 PDT
Comment on attachment 32554 [details]
Patch

Rejecting patch 32554 from commit-queue.

This patch will require manual commit. Failed to run "['git', 'svn', 'dcommit']"  exit_code: 1  cwd: None
Comment 4 Eric Seidel (no email) 2009-09-14 09:52:51 PDT
Comment on attachment 32554 [details]
Patch

You were bitten by bug 28316.  Will have a fix this week, sorry.
Comment 5 WebKit Commit Bot 2009-09-14 10:31:01 PDT
Comment on attachment 32554 [details]
Patch

Rejecting patch 32554 from commit-queue.

This patch will require manual commit. ['WebKitTools/Scripts/run-webkit-tests', '--no-launch-safari', '--quiet', '--exit-after-n-failures=1'] failed with exit code 1
Comment 6 Eric Seidel (no email) 2009-09-14 10:38:36 PDT
Comment on attachment 32554 [details]
Patch

It would appear we have a flakey worker test. :(
fast/workers/dedicated-worker-lifecycle.html -> failed

Also, looks like you have tabs in your ChangeLog, so this would have failed anyway.  Leaving cq-.
Comment 7 Eric Seidel (no email) 2009-09-18 12:02:38 PDT
A quick git log search says this hasn't been landed yet.  If you'd like to post a tab-less patch, we'd be happy to cq+ this again.
Comment 8 Joseph Pecoraro 2009-10-03 21:54:27 PDT
Hmm, it looks like when checking for a String or a Number it first checks the previous character to make sure it was empty (thus scanning a new line) or a non-alpha character:

  ...
  else if (!prevChar || /^\W/.test(prevChar)) { 
    token = findNumber(codeFragment, code[i - 1]) || 
      findKeyword(codeFragment, code[i - 1]) || 
      findSingleLineString(codeFragment) || 
      findSingleLineRegExp(codeFragment);
  ...

This has been around since the beginning:
http://trac.webkit.org/changeset/34657/trunk/WebCore/page/inspector/SourceFrame.js

Tim, was there a reason for this check or is it just an optimization? Dropping that check fixes this edge case, but I don't know what types of affects it would have on the speed of the parsing.  Keishi's solution did just this, he moved the regex and string checks out of this constraint.

As for Keishi's patch which he said improves "all-minified.js" on slashdot. Syntax highlighting that file crashes Safari 4.0.3, WebKit r49073, and even TextMate my editor (which uses a similar syntax highlighting procedure).
Comment 9 Keishi Hattori 2009-10-11 22:01:21 PDT
Created attachment 41019 [details]
New Javascript Synax Highlighter

I'm sorry for the bad patch. 

I have rewritten the syntax highlighter from scratch. 
It now uses similar logic as a proper ECMAScript tokenizer so it should not confuse DIV and REGEXP anymore.
It also can figure out IDENT tokens(even with Unicode characters too). It's turned off right now to cut down on the number of elements but maybe we could use it in the future for the debugger to show variable values.
I also changed it to process 100 tokens at a time. 
It was still beach balling with minified JS so I put a limit on the number of characters per line it will color.
Comment 10 Eric Seidel (no email) 2009-10-19 15:13:43 PDT
Comment on attachment 32554 [details]
Patch

Clearing Tim's r+ on this obsolete patch.
Comment 11 Keishi Hattori 2009-10-25 16:32:35 PDT
Created attachment 41833 [details]
proposed patch

Dropped unicode letter support. Uses [a-zA-Z] as unicode letter regexp.

Fixed syntax highlighting in ElementsTreeOutline.

I'll try to come up with some tests next.
Comment 12 Timothy Hatcher 2009-10-25 16:57:19 PDT
Comment on attachment 41833 [details]
proposed patch


> +    this.LEXSTATE = {
> +        INITIAL: 1,
> +        DIV_ALLOWED: 2,
> +    };
> +    this.CONTINUESTATE = {
> +        NONE: 0,
> +        COMMENT: 1,
> +        SINGLEQUOTESTRING: 2,
> +        DOUBLEQUOTESTRING: 3,
> +        REGEXP: 4
> +    };

These should not be all caps. Make them CamelCase.
Comment 13 Keishi Hattori 2009-10-25 21:47:56 PDT
Created attachment 41841 [details]
proposed patch with tests

> These should not be all caps. Make them CamelCase.
Fixed.

Added  some tests.
Comment 14 Keishi Hattori 2009-10-25 21:57:39 PDT
Created attachment 41842 [details]
fixed some minor stuff
Comment 15 Timothy Hatcher 2009-10-26 10:28:57 PDT
Comment on attachment 41842 [details]
fixed some minor stuff


> +        DivAllowed: 2,

I assume this means division allowed. Spell it out in the constant.


> +    this.state = this.LexState.Initial;

This be this.lexState to match the constant names. Or the constant name should just be this.State.


> +    }
> +    
> +    
> +    function singleQuoteStringStartAction(token)

Extra blank line here.


> +        var keywords = ["null", "true", "false", "break", "case", "catch", "const", "default", "finally", "for", "instanceof", "new", "var", "continue", "function", "return", "void", "delete", "if", "this", "do", "while", "else", "in", "switch", "throw", "try", "typeof", "with", "debugger", "class", "enum", "export", "extends", "import", "super", "get", "set"];

Use "const keywords" instead of "var keywords".


> +        if (keywords.indexOf(token) < 0) {

=== -1 is better here, since it is speced to return only -1. Or flip it to be !== -1 if you want.


> +            var i;
> +            for (i = 0; i < tokensPerChunk; i++) {

Put the var i in the for loop:

for (var i = 0; …


> +                var messageBubble = line.lastChild;
> +                if (messageBubble && messageBubble.nodeType === Node.ELEMENT_NODE && messageBubble.hasStyleClass("webkit-html-message-bubble"))
> +                    line.removeChild(messageBubble);
> +                else
> +                    messageBubble = null;

I think it would be better to start messageBubble out as null and assign it only after confirming the type and class on the lastChild.


> +                while (line.firstChild)
> +                    line.removeChild(line.firstChild);

We have a helper for this. Calling line.removeChildren() should do.


> +                this.lineFragment =null;

Missing a space after the "=".


> +    appendNonToken: function () {

Brace on the next line.


> +    syntaxHighlightNode: function(node) {

Ditto.


> +        while (1) {

Use "true".


> +        result.push(dumpSyntaxHighlight("return'foo';"));
> +        result.push(dumpSyntaxHighlight("/\\\//"));
> +        result.push(dumpSyntaxHighlight("//ig';"));
> +        result.push(dumpSyntaxHighlight("1 / 2 + /a/.test('a');"));
> +        result.push(dumpSyntaxHighlight("\"\\\"/\".length / 2"));
> +        result.push(dumpSyntaxHighlight("var foo = 1/****//2"));
> +        result.push(dumpSyntaxHighlight("/*comment*//.*/.test('a')"));

You should write some more tests that are multi-line and deal with things like message bubbles and nodes directly.

Can be another patch.
Comment 16 Timothy Hatcher 2009-10-26 10:30:49 PDT
Nice work BTW! You should apply this to the CSS highlighter and make them share more code.
Comment 17 Keishi Hattori 2009-10-27 08:03:53 PDT
Created attachment 41953 [details]
proposed patch

> You should write some more tests that are multi-line and deal with things like
> message bubbles and nodes directly.

I added some multiline tests. 
I tried to write a message bubble test like this
http://gist.github.com/219610
But I get the timeout error. The event doesn't seem to be getting dispatched but I couldn't figure out more.
Comment 18 WebKit Commit Bot 2009-10-27 10:01:32 PDT
Comment on attachment 41953 [details]
proposed patch

Rejecting patch 41953 from commit-queue.

Failed to run "['/Users/eseidel/Projects/CommitQueue/WebKitTools/Scripts/svn-apply', '--reviewer', 'Timothy Hatcher', '--force']" exit_code: 2
patching file WebCore/ChangeLog
Hunk #1 succeeded at 1 with fuzz 3.
patching file WebCore/inspector/front-end/ElementsTreeOutline.js
patching file WebCore/inspector/front-end/SourceFrame.js
patching file LayoutTests/ChangeLog
Hunk #1 succeeded at 1 with fuzz 3.
patching file LayoutTests/inspector/javascript-syntax-highlight-expected.txt
Died at /Users/eseidel/Projects/CommitQueue/WebKitTools/Scripts/svn-apply line 438, <> line 638.
Comment 19 Eric Seidel (no email) 2009-10-27 10:09:11 PDT
My apologies.  False rejection.  I'm working on a fix to svn-apply right now.  bug 30826
Comment 20 Eric Seidel (no email) 2009-10-27 10:38:59 PDT
Comment on attachment 41953 [details]
proposed patch

svn-apply fixed.  Trying again.
Comment 21 WebKit Commit Bot 2009-10-27 11:10:44 PDT
Comment on attachment 41953 [details]
proposed patch

Rejecting patch 41953 from commit-queue.

Failed to run "['git', 'svn', 'dcommit']" exit_code: 1
Last 500 characters of output:
.html
	M	WebCore/ChangeLog
	M	WebCore/inspector/front-end/ElementsTreeOutline.js
	M	WebCore/inspector/front-end/SourceFrame.js
A repository hook failed: MERGE request failed on '/repository/webkit/trunk': Commit blocked by pre-commit hook (exit code 1) with output:
svnlook: Can't write to stream: Broken pipe

    The following ChangeLog files contain OOPS:

        trunk/LayoutTests/ChangeLog

    Please don't ever say "OOPS" in a ChangeLog file.
 at /usr/local/libexec/git-core//git-svn line 469
Comment 22 Timothy Hatcher 2009-10-27 11:27:14 PDT
Committed r50162: <http://trac.webkit.org/changeset/50162>
Comment 23 Eric Seidel (no email) 2009-10-27 11:33:43 PDT
 5         Need a short description and bug URL (OOPS!)

in the LayoutTests ChangeLog was the problem. :(

Thank you for taking care of this Tim.