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:

CSS Spy identifying all widgets that are a view part

Find out more

I’ve only provided a taste here of what you can do with CSS. If you’d like to find out more, be sure to come to my session at EclipseCon 2012 (North American edition) where I’ll highlight how you can take advantage of the CSS support in your own Eclipse applications.

Getting & Installing the CSS Spy

To install the CSS Spy, you need to be running on the Juno stream (i.e., Eclipse Platform 4.2 M5 or later). If you’re not already, then install one of the development-stream packages. Then use Help → Install New Software and install the “E4 CSS Spy” from the update site at http://download.eclipse.org/e4/updates/0.12-I-builds.

Please report bugs to the Eclipse Bugzilla. Missing features? Fork the code and submit a patch!

[Updated 2012/06/27 as I had the wrong shortcut key combination. Sorry for the confusion!]

About these ads