JavaScript & CSS syntax highlighting

[Fred]

Add JavaScript & CSS syntax highlighting to source code viewer.

[Ian-ianmacfarlane (ian-ianmacfarlane)]

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-UK; rv:1.8.1b2) Gecko/20060821 Firefox/2.0b2
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-UK; rv:1.8.1b2) Gecko/20060821 Firefox/2.0b2

View source does not currently appear to know how to do syntax highlighting CSS. This would be a very useful feature for web developers. Lots of open source editors can do this already, so it probably wouldn't be too hard to find a suitable highlighting method to copy.

I guess this could possibly extend to viewing text/css or .css files as well without using View Source.

(I find it hard to believe that there is not already a bug for this, but I really couldn't find anything like it in Bugzilla)

Reproducible: Always

[Sciguyryan (sciguyryan)]

Marking this as new because I didn't find any simmilar matches after a few searches. If this is a duplicate them please re-mark it.

-- Ryan

[Ehsan-mozilla (ehsan-mozilla)]

It would also be nice if the syntax highlighting is extended to the CSS content embedded in HTML source.

[L. David Baron (dbaron)]

*** Bug 510532 has been marked as a duplicate of this bug. ***

[Irakli Gozalishvili (rfobic)]

Currently veiw-source: on .js .json and .css files is absolutely useless in fact there is no diff between two:

view-source:https://github.com/Gozala/graphquire/raw/v0.3.0/graphquire.js
https://github.com/Gozala/graphquire/raw/v0.3.0/graphquire.js

Small improvements like syntax highlighting and line numbers would make a huge difference!

[Gabe Gorelick (gabegorelick)]

The correct package is chromium-browser.

[Rcampbell-mozilla (rcampbell-mozilla)]

I'm going to move this into the source editor component. This is still an issue.

[Jordan-i (jordan-i)]

Discussion of using codemirror for this was had, which would solve this with nice syntax highlighting.

[Jgriffiths-t (jgriffiths-t)]

If we do this, are we considering doing it for html view source as well? It would be great if the syntax highlighting matched the user's theme settings.

[J. Ryan Stinnett (jryans)]

(In reply to Jeff Griffiths (:canuckistani) from comment #3)
> If we do this, are we considering doing it for html view source as well? It
> would be great if the syntax highlighting matched the user's theme settings.

That would be my assumption: we would likely transition to the same (read-only) editor-like thing (most likely our source editor widget) for all file types, including HTML, and highlighting, etc. would be based on whatever that editor does for different file types.

The current HTML view source tool is not easily extensible for other file types at all. It's a special mode of Gecko's HTML parser, so there's no obvious way to just "enable" JS, etc. support. Something would need to parse the JS, emit tags for highlighting, etc. which editors already know how to do.

One problem we'd have to contend with is that the current HTML view source is able to handle very large documents efficiently because of its design. Some people (at least bz, IIRC) would be sad if the new approach was slow for these cases.

Some day this could also tie into our plans for a resources view in the toolbox, in which case it could be a true editor, not just read-only.

[J. Ryan Stinnett (jryans)]

Switching to an editor in general would not be too hard here, but I've learned there are many edge cases with view source and extra features I wasn't originally aware of. Also, we need to be sure of the perf, as in comment 4.

[Launchpad Janitor (janitor)]

Status changed to 'Confirmed' because the bug affects multiple users.