Contrast in Syntax Highlighting

[nilshoerrmann]

This has been an issue for me for quite a long time: I think the contrast of the syntax highlighting is far to low. It's not easy to scan the XML source quickly because things cannot be distinguished easily.

The old styles where quite colourful but easier to look at:

(I hijacked this image from Nick's blog.)

It would be nice if at least the node and attribute names could make use of different colours.

[nickdunn]

Agreed.

[remie]

Is there a preferred color schema?
I'll be doing some work on my debugdevkit extension fork next weekend...

[nickdunn]

I suppose everyone has their own preferences. The above screenshot shows the colouring prior to about Symphony 2.0.7 at which point it changed to what we have presently:

I'm personally accustomed to my own Textmate style:

But I'm aware it's only my own taste.

I think the older styling of green/orange/blue/white was a lot easier to use. Greater contrast is needed.

[remie]

hehe, maybe there should be multiple themes :)

[remie]

which actually is not that hard to implement... if there is a documented list of classes / unique identifiers, everyone can create their own CSS. Allowing this to be uploaded from the preferences screen and selecting the current stylesheet is doable.

[nickdunn]

As an aside, I also much preferred having Monaco in the font stack. The browser default (on OSX at least) looks very much like Courier and looks too small and ugly. I'm all for falling back to browser defaults where possible (e.g. form controls) but I'd much rather it was still Monaco/11px ;-)

[nilshoerrmann]

Beside the contrast, it would be nice if the core information – parameters and events – could be set apart from the rest so that you know "this is system data" and "this is my content area".

@nickdunn: I'd say your Textmate style is nice but it's not that rich in contrast as well. But it uses colours what makes it easier to differentiate things.

[remie]

Just for my understanding: is there a Symphony UX / UI team that makes decisions on these requests? Or can I just create my own interpretation of this feature request, send a pull request, and see if it gets accepted?

[nilshoerrmann]

Nick is lead of the UX/UI working group with @eKoeS, @klaftertief and myself as members.

[remie]

In that case: @nickdunn, do you want to give input on the request to create sections (parameters / events versus content), or do you want me to come up with a initial implementation?

[nilshoerrmann]

hehe, maybe there should be multiple themes :)

Actually this seems like a good idea because syntax highlighting is always a matter of taste.

[nickdunn]

I think I would rather a single theme that satisfies everyone. Less configuration, the 80/20 and all that jazz. Very few people have complained about the debug theme (has anyone, until now?), so I don't think we need to provide any configuration. People seem to be happy to use what comes with Symphony, provided it is as simple and beautiful as the rest of the system. Custom themes sounds a bit like a gimmick for little gain.

[nilshoerrmann]

Well, I remember that I complained when the current theme was introduced – but that's not a critical mass, I guess :)
Regarding the themes: I think it would be a nice feature but you are right that less configuration is more the Symphony way of doing things.

As long as the reading experience improves I'll be happy with what I get.

[remie]

So what do you want to do with this feature request?
Since it is established that this is a very subjective matter, what kind of adjustments to the current schema do you think are valuable?

EDIT: reading back the other comments, I guess that would mean the old styling and a font change

[remie]

Euh guys... i've downloaded and installed every version of Symphony from 2.0.3 to 2.1.0, but I have not seen a debugger with the cheerful color scheme as shown in the screenshot. They all have the seem gray / blue look. I've gone from Debugger 1.0.1 to the current version, and I can't find it. So I guess I will need some help here.

[nickdunn]

Hmm interesting. I'll do some digging!

For reference, Symphony's backend UI uses this for stack for code, which equates to 12px.

110%/1.5 Monaco, Consolas, 'Andale Mono', monospace

[nickdunn]

The old styles must have been removed when the debugging environment was removed from the core and put into an extension (what became known as devkits). From a very old Symphony project:

debug.css https://gist.github.com/1193113
code.css https://gist.github.com/1193112

[nilshoerrmann]

I think you'll have to look at the 2.0.0 to 2.0.3 releases before the devkits have been introduced as separate extension - they were part of the core before.

[nilshoerrmann]

The installable code is here: https://github.com/symphonycms/symphony-2/tree/rev5

[remie]

Great, I will give it a try and see if I manage to do some magic!

[remie]

I've updated the styling to go back to the Symphony 2.0 styling (thanks Nick for digging up the css).
However, I still feel adding support for themes is a nice to have... I personally prefer the current white, gray and blue styling and would vote against my pull request without the ability to choose themes :D

[brendo]

@nilshoerrmann, can you take a look at this issue again now that the styles for 2.3 are pretty much there. In particular, your tweets indicate you've been working on error styling, which includes an XML panel, so maybe there is some economies between the two?

[nilshoerrmann]

I can see if I find some time during the Hackathon.
The error styling uses a light colour scheme and there is no syntax highlighting so I'm not sure if there is an intersection.

[brendo]

Ok, well perhaps something that can be looked at as a low priority then and potentially revisited in a 2.3.x release.