Editing the Eclipse 4 Workbench CSS

the overall look of eclipse 4 is controlled with css stylesheets. the css files take the same form as those for a browser, but underlying model is understandably different. minimally, this means that the names of the things you can play with are different. additionally, there are a few extra things you can play with to tweak the behaviour. i’m just starting to wade into, so please consider this a start of a discovery log rather than any sort of authoritative “how to”.

unfortunately, the documentation on eclipse 4 css is a little scant. the underlying model, which can be used to sort out the names of the various model elements in the workbench, is captured in the eclipse wiki . there is also some information regarding how various css properties map to swt widgets.

i started by locating the actual css files themselves. they’re found in the org.eclipse.platform bundle which is located in the “r4_head” branch of the eclipse.platform git repository. i decided to fork the github clone of this repository and work in that fork. the css files are in the ./platform/org.eclipse.platform/css directory.

i cloned the repository locally, checked out the the “r4_head” branch, loaded–with a little help from egit –the org.eclipse.platform plug-in project, and navigated to the gtk css file (i’m running fedora 14 linux).

from here, i started playing. the css editor component provided by the web tools’ source editing project provides considerable help for standard sorts of css things (i.e. the stuff supported by browsers like background colours). i took additional inspiration from the other css files. the first thing i did was remove the background image on the workbench window’s toolbar and replaced it with a solid color ( bug 372448 ). while i was at it, i changed the background colour of the toolbar widgets to the same colour:

.mtrimbar#org-eclipse-ui-main-toolbar {
background-color: #e2e2e2;
}

.mtrimbar#org-eclipse-ui-main-toolbar toolbar {
background-color: #e2e2e2;
}

the “.mtrimbar” model element represents the various holders of tool bars in the workbench, including the main window as well as view/editor stacks. adding “#org-eclipse-ui-main-toolbar” focuses the style properties on the main window tool bar. the first entry applies to the tool bar area itself. the second entry applies to the swt toolbar instances contained within the tool bar area. i may be getting some of the names mixed up.

to test the changes, i launched an instance of eclipse using the modified plug-in in my workspace with the default target. i discovered that i was able to test some changes without requiring a restart by instead just changing the theme in the preferences (i.e. switch the theme and then switch back).

unfortunately, some changes require a restart to test. i believe that this is a point-in-time problem, and i’m planning to open bugs to address specific issues that i uncover.

i did discover some ongoing work in the e4 incubator project to provide a xtext -based css editor (you may notice the little xtext nature decoration on the project icon). it provides a little more content assist help, but doesn’t provide much help with the edit/test cycle.

i’m thinking that just having a “reapply current theme css” command might be enough to make the edit/test cycle bearable. that shouldn’t be too hard to build. i’ll let you know how it turns out.