Bug 14359

Summary: CSS source view should be syntax highlighted
Product: WebKit Reporter: Adam Roben (:aroben) <aroben>
Component: Web Inspector (Deprecated)Assignee: Joseph Pecoraro <joepeck>
Status: RESOLVED FIXED    
Severity: Enhancement CC: hyatt, joepeck, timothy
Priority: P2 Keywords: InRadar
Version: 523.x (Safari 3)   
Hardware: All   
OS: All   
Attachments:
Description Flags
[PATCH] CSS Syntax Highlighter Version 1
timothy: review+
[IMAGE] Comparison to Dashcode
none
[TEST CASE] Test Case for CSS @rules and more
none
[PATCH] CSS Syntax Highlighter Version 2 (with @rules) timothy: review+

Description Adam Roben (:aroben) 2007-06-24 00:12:56 PDT
The CSS source view in the Inspector should be syntax highlighted, just like the HTML source view already is.
Comment 1 Adam Roben (:aroben) 2008-01-29 10:58:59 PST
<rdar://problem/5712817>
Comment 2 Adam Roben (:aroben) 2008-06-11 19:16:04 PDT
It would probably be good enough (at least as an initial implementation) to do the highlighting using JavaScript code in the Inspector (like Drosera did for syntax highlighting).
Comment 3 Joseph Pecoraro 2009-10-03 14:23:02 PDT
Created attachment 40583 [details]
[PATCH] CSS Syntax Highlighter Version 1
Comment 4 Joseph Pecoraro 2009-10-03 14:29:26 PDT
Created attachment 40585 [details]
[IMAGE] Comparison to Dashcode

This shows the comparison in colors to Dashcode.  There are minor differences:

1) Inspector's highlighter doesn't yet do @media (work in progress in the patch)
2) Inspector's highlighter colors pseudo selectors (light gray), Dashcode doesn't
3) Inspector's highlighter colors #aaabbb, Dashcode fails
4) Inspector's highlighter colors the # in hex colors, Dashcode doesn't

I'll throw up another picture.
Comment 5 Joseph Pecoraro 2009-10-03 14:31:39 PDT
A few other pictures (no need to attach):
http://grab.by/7og - notice the :hover
http://grab.by/7oh - minified code is still readable
http://grab.by/7oi - notice @media is not styled yet
Comment 6 Joseph Pecoraro 2009-10-03 14:36:46 PDT
NOTES:
I factored out the common code between the JavaScript and CSS Highlighters and thus made two classes. I did not see any noticeable performance changes. But if we want, I still have to previous version which just has the two large js/css syntax highlight methods with the duplicated code.

I don't have time to whip up a css test file for a few days.  Does anyone know of some CSS test files inside WebCore's tests that would help in testing edge cases?
Comment 7 Timothy Hatcher 2009-10-03 16:15:56 PDT
Comment on attachment 40583 [details]
[PATCH] CSS Syntax Highlighter Version 1

> +    findUrl: function(str)

Should be findURL.

> +    // TODO: Not Used Yet

Should be a FIXME.

> +        // TODO: gather until the next semicolon... ?
> +        // TODO: is multiline?

Ditto.
Comment 8 Joseph Pecoraro 2009-10-03 19:34:21 PDT
I decided to implement the At Rule code and found out it was a lot worse then I had imagined. An at rule can either be

a single statement:

  @import url(blah.css);

take a block of selectors:

  @media print {
    p { color: red; }
  }

take not selectors but css properties and values:

  @font-face {
    font-size: 14pt;
  }

So, I made a test case, implemented the parsing correctly, and compared with dashcode:
http://grab.by/7qc

I'll submit another patch for review because plenty of lines were added.
Comment 9 Joseph Pecoraro 2009-10-03 19:36:36 PDT
Created attachment 40587 [details]
[TEST CASE] Test Case for CSS @rules and more
Comment 10 Joseph Pecoraro 2009-10-03 19:42:35 PDT
Created attachment 40588 [details]
[PATCH] CSS Syntax Highlighter Version 2 (with @rules)

Adds @rule support.
Comment 11 Joseph Pecoraro 2009-10-03 19:54:06 PDT
Landed in 49071: http://trac.webkit.org/changeset/49071
r49071 = 8be9b2e636f7308fc897efc67375c568c39ac631 (trunk)