Styling an Eclipse Toolbar Using CSS

Question

I want to style the ToolBar of our Eclipse application using CSS:

   <extension id="product" point="org.eclipse.core.runtime.products">
      <product application="org.acme.application" name="Application">
         <!-- other stuff -->
         <property name="cssTheme" value="ourtheme" />
      </product>
   </extension>

   <extension point="org.eclipse.e4.ui.css.swt.theme">
      <theme basestylesheeturi="branding/theme.css"
            id="ourtheme"
            label="Our Theme">
   </extension>

Everything works (i.e. background-color: COLOR-WHITE makes the toolbar white). However I'm struggeling to find what CSS tags are allowed.

The Eclipse GIT Repo has a couple of CSS files, which have the following keys for the toolbar:

#org-eclipse-ui-main-toolbar {
    background-image:  url(./winXPOlive.png);
    eclipse-perspective-keyline-color: #585858;
    background-color: #515658 #515658 100%;
    handle-image: none;
    color: #EBE8E4;
}

Or that all of them? Is there a comprehensive manual somewhere? Or is CSS styling on a trial and error base?

(In case a specific use case is required: I want to add padding to the tool-items, and / or a border of some sort.)

Answer 1

I don't know of a manual listing everything.

All the CSS properties are defined using the org.eclipse.e4.ui.css.core.propertyHandler extension point so using the Eclipse plugin search will show you all the definitions. The majority of these are in the org.eclipse.e4.ui.css.swt plugin with a few in other plugins.

Definitions look like:

<extension
     point="org.eclipse.e4.ui.css.core.propertyHandler">
  <handler
        adapter="org.eclipse.e4.ui.css.swt.dom.ControlElement"
        composite="true"
        handler="org.eclipse.e4.ui.css.swt.properties.css2.CSSPropertyBackgroundSWTHandler">
     <property-name
           name="background">
     </property-name>
     <property-name
           name="background-color">
     </property-name>
     <property-name
           name="background-image">
     </property-name>
  </handler>

adapter is defined by the org.eclipse.e4.ui.css.core.elementProvider extension point, it is generally named to give a good idea of what the property applies to - any Control in this case.

You can also look at the handler class to see exactly how the properties are dealt with.