Bug 14359 - CSS source view should be syntax highlighted
Summary: CSS source view should be syntax highlighted
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 523.x (Safari 3)
Hardware: All All
: P2 Enhancement
Assignee: Joseph Pecoraro
Keywords: InRadar
Depends on:
Reported: 2007-06-24 00:12 PDT by Adam Roben (:aroben)
Modified: 2009-10-03 19:54 PDT (History)
3 users (show)

See Also:

[PATCH] CSS Syntax Highlighter Version 1 (28.86 KB, patch)
2009-10-03 14:23 PDT, Joseph Pecoraro
timothy: review+
Details | Formatted Diff | Diff
[IMAGE] Comparison to Dashcode (335.71 KB, image/png)
2009-10-03 14:29 PDT, Joseph Pecoraro
no flags Details
[TEST CASE] Test Case for CSS @rules and more (1.33 KB, text/css)
2009-10-03 19:36 PDT, Joseph Pecoraro
no flags Details
[PATCH] CSS Syntax Highlighter Version 2 (with @rules) (31.26 KB, patch)
2009-10-03 19:42 PDT, Joseph Pecoraro
timothy: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
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
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
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?

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:

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)