1281118 - Make it Easy to Use Custom Syntax Highlighting

Status: NEW

(DevTools :: Framework, enhancement, P3)

Description

[Jens]

This idea was raised in https://bugzilla.mozilla.org/show_bug.cgi?id=1273130#c6 and https://hacks.mozilla.org/2016/06/developer-edition-49-network-request-stack-traces-and-more/#comment-19975

Most editors support customizing/theming their syntax highlighting. I myself use the dark "mustang" color scheme on vim, others prefer solarized... Chrome also has different devtools themes done by users, e.g. http://devthemez.com/themes/chrome-developer-tools or https://chrome.google.com/webstore/detail/devtools-theme-zero-dark/bomhdjeadceaggdgfoefmpeafkjhegbo

Please add:

* Make it technical easy to create a custom color theme. Ideally this would be just a single css file that can be incorporated by a user. (AFAIU most color settings are in css vars already anyway)

* Add technical documentation about how custom color schemes can be created and used on MDN

Following Firefox' claim "Make it your own" (https://www.mozilla.org/en-US/firefox/desktop/customize/) this makes especially sense for developers: These are very picky about the colorization, many will like the ones they are used from their editors/IDEs (a matter of being familiar with it for years).

Comment 1

[Daniel Parejo]

+1, this is a great idea.

Also, since we are asking: make them easy to share. Maybe even on its own repository. 
I promise you it will be active. But no "download this file nonsense", this is the 21st century. The lookup and installation must be built-in (like most IDEs allow you to search and install plugins from the program itself)


Cause: In case you don't implement the "Darcula" theme yourselves (as you should, but whatever), I hope for someone to implement it and share it.

Comment 2

[Mark Fischer, Jr.]

(In reply to Daniel Parejo from comment #1)
> But no "download this file nonsense", this
> is the 21st century. The lookup and installation must be built-in (like most
> IDEs allow you to search and install plugins from the program itself)

This. Possibly set it up the way the light themes/personas addon db is set up.

Also, fwiw, I would totally port gruvbox for the firefox dev tools in a heartbeat, giving the ability.

Comment 3

[MuxX]

+1000

Why is it no possible to implement a few well coded color schemes like Dark Soda, Monokai, Molokai, Tomorrow Theme, Dracula and so on? This is only a few lines of extra css code. Is this really so hard to implement???  I don't think so. Please have a look to all those good color schemes and implement a few of them or give users the chance to easily modify the themes! That's all we need!

Here is a list of a fwe color schemes: http://www.slant.co/topics/358/~color-themes-for-text-editors

Comment 4

[Megury]

great idea

Comment 6

[Patrick Brosset <:pbro>]

Yes, we should do this.
Note that custom CSS can already be loaded in Firefox though: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin

Comment 7

[Brian Grinstead [:bgrins]]

So sounds like task here is to provide some templates for userChrome.css that override some of the main variables in devtools to provide different syntax highlighting colors?

I believe this should mostly be these variables:

--theme-highlight-green
--theme-highlight-blue
--theme-highlight-bluegrey
--theme-highlight-purple
--theme-highlight-lightorange
--theme-highlight-orange
--theme-highlight-red
--theme-highlight-pink
--theme-highlight-gray

Then if you want to change the mapping of which color is used for which token, you'll need to override rules like: .cm-s-mozilla .cm-variable-2, etc to use whichever color you want it to map to: https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/light-theme.css#201.  See also the CodeMirror theme demo: https://codemirror.net/demo/theme.html

Comment 8

[MuxXer]

@ Brian: I know that, thx.

I tried to adjust it with my own userChrome.css. To do that I put an userChrome.css file into the chrome folder. Everything works fine but I have a few questions for which I cant find any answers:

In the inspector field on the left side, where the html content is shown, there are some lines where the colors are not so bright like in other lines. Can somebody explain why and how to avoid it?

See image: http://i.stack.imgur.com/qla5Q.png

Comment 9

[Patrick Brosset <:pbro>]

(In reply to MuxXer from comment #8)
> In the inspector field on the left side, where the html content is shown,
> there are some lines where the colors are not so bright like in other lines.
> Can somebody explain why and how to avoid it?
The inspector does this automatically to show nodes that are hidden in the page differently than those that are shown. This was done in bug 911209.
This is simply done with a .7 opacity in CSS:
http://searchfox.org/mozilla-central/rev/d1276b5b84e6cf7991c8e640b5e0ffffd54575a6/devtools/client/themes/markup.css#312-316
So I guess you can easily override this in your userChrome.css file.

Comment 10

[MuxX]

@ Patrick:

Thx Bro! You made my day!