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!]
holistic tendencies 
Thanks, thats a cool feature. I used in in my last Eclipse 4 training and the participants really liked it.
By: Lars Vogel on February 16, 2012
at 12:32 pm
[…] CSS Spy is a handy resource for figuring out how to refer the various parts of the user interface and […]
By: Eclipse 4 and the CSS Spy | Eclipse Hints, Tips, and Random Musings on February 29, 2012
at 4:52 pm
Ctrl-Alt-F4 is actually a really bad shortcut on Linux, it switches to a text concole.
By: vogella on May 10, 2012
at 8:29 pm
I made a mistake in the shortcut: it’s actually Shift-Alt-F4. Sorry for the confusion!
By: Brian de Alwis on June 27, 2012
at 11:08 am
The spy is really interesting. But also on windows not the best shortcut. I would like to start it within an rcp application. How can I do it without defining shortcuts in my application model?
By: Pitsch on June 7, 2012
at 8:52 am
The spy is opened through the “org.eclipse.e4.css.OpenSpy” command — you can trigger that in whatever way you like. You can also trigger it through the Quick Access bar.
By: Brian de Alwis on June 7, 2012
at 8:57 am
BTW: could you expand on what’s bad about the shortcut?
By: Brian de Alwis on June 7, 2012
at 9:00 am
I’m guessing :
On Windows, it’s uncomfortably close to “alt-F4”, which closes applications. I bet it’s also swiped as a global hotkey for various graphics drivers, etc.
On Linux, ctrl-alt-F4 is a global hotkey for “open TTY4”
I agree, it’s probably best opened through the quick access bar. On Ubuntu, I’d *really* like to see this integrated with the HUD menu – that would make everything quick access at a single keypress.
By: g2-295688518bbc835626d0d8c33958a4e0 on June 17, 2012
at 10:15 am
didn’t run at windows. Shortcur Alt-Shift-F4 exits the application.
By: noe on July 27, 2012
at 6:15 am
It seems Windows intercepts Shift-Alt-F4 You’ll have to rebind the keystroke, unfortunately, or invoke the Spy from the Quick Access field. I’ll look to using a different keystroke.
By: Brian de Alwis on August 8, 2012
at 10:26 am
Is it possible to use CSS Spy with RCP based application? How to configure it? Suppose I have to add a plugin dependency for css spy … any hints?
By: treboR on October 29, 2012
at 8:18 am
The Spy is self-contained in the org.eclipse.e4.tools.css.spy bundle. It uses a model processor for automatic installation on startup.
By: Brian de Alwis on October 29, 2012
at 8:21 am
[…] introduced me to the Eclipse 4 CSS Spy . There’s also a quick tutorial of it in action here . With this plugin, we can get a nice visualization of the e4 model hierarchy, along with an […]
By: I for one welcome our new e4 overlords | rgrunber on June 13, 2013
at 4:31 pm
Is it possible to get the spy list properties of my RCP? I have a E4 RCP which I launched and I want the CSS Spy to list the parts of my RCP. How to do? Should I add the bundle to my product?
By: Velganesh Subramanian on May 13, 2014
at 2:15 am
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.
By: Brian de Alwis on May 13, 2014
at 10:56 am
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?
By: Velganesh Subramanian on May 23, 2014
at 5:41 am