Eclipse 4, CSS, and the CSS Spy

One of the coolest features of the Eclipse 4 Application Platform is (IMHO) its new CSS support for styling widgets. I cannot bring myself to embed font choices, sizes, or backgrounds in code any more!

But creating CSS can be infuriating. CSS is very much like AOP, except that the selectors seem much more difficult to reason about than a pointcut. I could not see why my CSS selector either identified too many items or too few.

This was frustrating enough that I whipped up a little tool to help, called the CSS Spy, that has been contributed to the E4 Tools.

The CSS Spy window

Once installed, you can bring up the Spy on the active window with Shift-Alt-F4 (or ⇧⌥F4 on the Mac). The Spy shows the widget tree for the current window, with the initial selection is set to the control under the cursor. For each widget, the spy shows the CSS class and CSS ids for the different widgets. When a widget is selected, the Spy highlights where that widget is located on-screen with a red box, and also shows the current CSS properties for that element, the computed properties that were actually applied to the element, and other useful information for CSS use. The property table is editable, so you can also change the CSS property for an element and see the effect immediately.

Selecting a widget highlights its location on-screen

But I think the killer feature is the CSS selector search bar. You can enter any selector, and all matching widgets are highlighted. For example, you can identify the buttons with Button, or radio buttons with Button[style~='SWT.RADIO'].

CSS Spy identifying all radio buttons

E4’s model elements are partially exposed to CSS. When a model element is rendered, the containing widget (usually an SWT Composite), is annotated with the corresponding model element’s class names as a CSS class name. So you could select all MParts with .MPart.

CSS Spy identifying all E4 MPart model elements

We also expose the tag elements on a model element as a CSS class too. The E4 Workbench, which maintains binary compatibility with the Eclipse 3.x workbench APIs, adds tags to MParts to identify their type, such as Editor or View. For example, here I’m highlighting the view parts in the Eclipse IDE:

The CSS Spy lists all SWT properties applicable to a widget, not parts. It may seem a semantic quibble, but we actually have a prototype CSS engine that operates directly against the modelled workbench parts too.

You can select the widgets that correspond to modelled workbench pieces through class selectors. For example, the widgets for MParts are selectable by “.MPart”. You can then look at the properties shown for each of those widgets.

Oh and yes: you need to include the spy bundle. Not sure I’d want to ship it as part of a product though. If you need to run it in a deployed app, use the p2 director to install it from the command-line.

I will not ship it but I want to inspect the properties of my RCP. This is what I did – I added CSS Spy feature to my target and added e4.tools.css.spy as a dependency to the plugin where I have the Application.e4xmi. The usual Alt+Shift+F5 didn’t work and I thought of adding the OpenSpyHandler to one of my commands but the class selection dialog for the e4xmi form editor doesn’t show me OpenSpyHandler at all. Should I open the CssSpyDialog from my handler or do something special? I think there is some magic in SpyInstaller but I can’t understand much. Have you posted this in some other place?