Bug 432750 - [Themes] Provide a way to define a Color & Font profile in CSS
Summary: [Themes] Provide a way to define a Color & Font profile in CSS
Status: NEW
Alias: None
Product: Platform
Classification: Eclipse Project
Component: UI (show other bugs)
Version: 4.4   Edit
Hardware: PC All
: P3 enhancement (vote)
Target Milestone: ---   Edit
Assignee: Platform UI Triaged CLA
QA Contact:
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2014-04-14 11:22 EDT by Andrea Guarinoni CLA
Modified: 2014-05-11 06:26 EDT (History)
2 users (show)

See Also:


Attachments
Color & Font profiles (228.01 KB, image/jpeg)
2014-04-14 11:22 EDT, Andrea Guarinoni CLA
no flags Details
Syntax coloring mockup in HTML5 (3.92 KB, text/html)
2014-04-14 15:03 EDT, Timo Kinnunen CLA
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Andrea Guarinoni CLA 2014-04-14 11:22:37 EDT
Created attachment 241974 [details]
Color & Font profiles

Currently it is not possible to create or extend a Color & Fonts profile (named 'Color and Font theme' in Preferences > General > Appearance) but only override the current Default one.

With the new bridge, it would be useful and reasonable to allow for a 'Theme' the possibility to create an associated 'Color and Font theme' that can be switched and customized from a user indipendently from the others (like a profile for syntax coloring). 

It might be also appropriate to give the user the possibility to create/save its own Color and Font profile starting from the one selected (I attached a sample screen for it).

The syntax for CSS might be something like:

    PreferenceNode.Dark#org-eclipse-ui-editors {
   	    preferences:
        'AbstractTextEditor.Color.Background=25,25,25',
        'AbstractTextEditor.Color.Background.SystemDefault=false',
        ...;
    }

or

    .Dark PreferenceNode#org-eclipse-ui-editors {
   	    preferences:
        'AbstractTextEditor.Color.Background=25,25,25',
        'AbstractTextEditor.Color.Background.SystemDefault=false',
        ...;
    }


and, if extended also to not-PreferenceNode properties:    

    ColorDefinition.Dark#org-eclipse-ui-workbench-ACTIVE_TAB_BG_START {
        color: #2B2C2D;
        category: '#org-eclipse-ui-presentation-default';
        label: 'Active, selected part background begin';
    }
    ...

where the '.Class' in the CSS selector string is the Color & Font theme/profile's name that is extended or overridden if it already exists or that is created if it doesn't exist. 

Omitting the '.Class' might have two meaning:
1) override the Default theme value (that should be how is performed now, like 'PreferenceNode.Default#org-eclipse-ui-editors' selector);
2) override the properties changed with that selector in all the Color & Font themes/profiles (that probably is what is expected from that syntax).

From a pure CSS point of view, there should be only one element with the same ID (and then, everything in the selector before an ID should be redundant), but since in the current parser implementation a similar syntax has already been used, it can make sense to consider a Color & Font theme/profile like a wide CSS Class.
 
What do you think? Is there a better way to do that or the implementation can be too complicated for this purpose?
Comment 1 Timo Kinnunen CLA 2014-04-14 15:03:37 EDT
Created attachment 241982 [details]
Syntax coloring mockup in HTML5

I heard the words syntax coloring mentioned so I came running :)

This is the level of difficulty how I would like to be able to customize things, syntax coloring in this case:

body { 
background-color: #202020; 
color: #6897bb; 
}
.source-code {
  font-family: 'Source Code Pro Semibold', 'Trebuchet MS', Arial, Helvetica, sans-serif;
  font-size: 9pt;
}

.comment                                 { color: #626262; }
.comment.task-tag                        { color: rgb(171, 31, 54); }
.annotation.element                      { color: rgb(141,218,248); }
.annotation                              { color: rgb(104,151,187); }
.javaclass                               { color: rgb( 18,144,195); }
.brace                                   { color: rgb(  0,128,128); }
.operator                                { color: rgb(217,232,247); }
.keyword                                 { color: rgb(104,151,187); }
.keyword-return                          { color: rgb(104,151,187); }
.number                                  { color: rgb(220, 50, 47); }
.string                                  { color: rgb(221, 40,103); }
.variable.parameter.declared             { color: rgb(128,242,246); }
.variable.parameter                      { color: rgb(128,242,246); }
.variable.boxed                          { color: rgb(211, 54,130); }
.variable.declared                       { color: rgb(237,127, 72); }
.variable                                { color: rgb(255,191, 38); }
.field                                   { color: rgb(121,171,255); }
.field.inherited                         { color: rgb(205,246,104); }
.field.static                            { color: rgb(141,218,248); }
.field.static.constant                   { color: rgb(204,129,186); }
.method                                  { color: rgb(128,246,167); }
.method.static                           { color: rgb( 23,198,163); }
.method.abstract                         { color: rgb(150,236, 63); }
.method.inherited                        { color: rgb(128,246,167); }
.method.declared                         { color: rgb(167,236, 33); }

That all works too to recreate very faithfully my syntax coloring preferences from a little while ago. The attachment is a fully valid and self-contained HTML5 file for trying this at home.