Closed Bug 680465 Opened 13 years ago Closed 13 years ago

Source Editor syntax highlighting for CSS is a bit confusing


(DevTools :: General, defect, P2)



(Not tracked)

Firefox 11


(Reporter: cedricv, Unassigned)



(Whiteboard: [sourceeditor][orion])

SourceEditor in CSS mode does not highlight according to CSS syntax.

/* comment */ is not highlighted at all
but //comment is (whereas this is not valid CSS)

Some/most property names are not highlighted, eg.:
border-collapse, -moz-border-radius, ...

It probably makes sense _not_ to highlight properties through some property list but through a pattern (eg. "[a-z-]+\:").
The highlighting should be about syntax, not about potential support of property (which anyways is difficult to do since there is frequently new properties and also -webkit- or even -ms- prefixed properties should be highlighted as usual).
The CSS highlighting code from upstream, Orion, is unfortunately still "experimental". Indeed, it needs more work.

When this bug is prioritized, I'll look into updating the upstream code and fixing it as necessary. Thanks for your report!
Please don't highlight obsolete -moz-prefixed properties like -moz-border-radius.
(In reply to j.j. from comment #2)
> Please don't highlight obsolete -moz-prefixed properties like
> -moz-border-radius.

Why? It's still valid CSS syntax (and supported for older browsers).
And there is still more valid properties added every other month... having a static list of words does not scale.

The fact it is obsolete (and/or unknown) could be visible in another way, for instance red underline like or in a symbol in the gutter :)

In fact, we'll have a tool (called the CSS Doctor) who should be able to provide diagnostics such as this, and much more.
(In reply to Cedric Vivier [cedricv] from comment #3)
> Why? It's still valid CSS syntax (and supported for older browsers).

If there is a property list, we should remove those properties ASAP. 
IMHO there is consensus that we should not spam the web with -moz-prefixes an should not encourage people to use it.

If the highlighting is syntax driven, ok then. A special highlighting for common vendor prefixes -ms, -webkit, -o, -moz, might be useful.

(just my 0,02 Euro, ask David Baron for a more sound view)
BTW, maintaining a CSS property list is not trivial.
Maintaining a property list including all important vendor specific properties seems nearly impossible.
Good idea :)
With syntax/pattern driven highlighting, \-[a-z-]+\: (notice the prefix "-") could be highlighted a bit differently [and we do not have to keep track of all CSS prefixes that exists out there]
You will miss the very common mso-prefix (notice the missing "-"), which spams the world since MS Office is able to create HTML files.
That's probably fine, because it does nothing in web browsers (I hope and assume).
Whiteboard: [sourceeditor][orion]
The situation is mostly unchanged upstream with the latest Orion. They now recognize /* comments */ in CSS mode, but the rest of the problems mentioned in comment 0 are still valid.
We're doing developer tool prioritization, filter on 'brontozaur'
to ignore the spam.
Priority: -- → P2
Depends on: 702331
This is fixed now by bug 702331.

Please note that support for highlighting more properties and an improved CSS parser will come at a later date. Upstream is preparing a rewrite of the CSS syntax highlighting code.
Closed: 13 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 11
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.