CSS source view should be syntax highlighted

• Component: Web Inspector (Deprecated)
• Status: RESOLVED FIXED

[Adam Roben (:aroben)]

The CSS source view in the Inspector should be syntax highlighted, just like the HTML source view already is.

[Adam Roben (:aroben)]

<rdar://problem/5712817>

[Adam Roben (:aroben)]

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).

[Joseph Pecoraro]

Created attachment 40583 [details]
[PATCH] CSS Syntax Highlighter Version 1

[Joseph Pecoraro]

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.

[Joseph Pecoraro]

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

[Joseph Pecoraro]

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?

[Timothy Hatcher]

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.

[Joseph Pecoraro]

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.

[Joseph Pecoraro]

Created attachment 40587 [details]
[TEST CASE] Test Case for CSS @rules and more

[Joseph Pecoraro]

Created attachment 40588 [details]
[PATCH] CSS Syntax Highlighter Version 2 (with @rules)

Adds @rule support.

[Joseph Pecoraro]

Landed in 49071: http://trac.webkit.org/changeset/49071
r49071 = 8be9b2e636f7308fc897efc67375c568c39ac631 (trunk)