Posted by: Brian de Alwis | February 16, 2012

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

EclipseCon 2012

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

Responses

  1. Thanks, thats a cool feature. I used in in my last Eclipse 4 training and the participants really liked it.

  2. [...] CSS Spy is a handy resource for figuring out how to refer the various parts of the user interface and [...]

  3. Ctrl-Alt-F4 is actually a really bad shortcut on Linux, it switches to a text concole.

    • I made a mistake in the shortcut: it’s actually Shift-Alt-F4. Sorry for the confusion!

  4. 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?

    • 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.

    • BTW: could you expand on what’s bad about the shortcut?

      • 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.

  5. didn’t run at windows. Shortcur Alt-Shift-F4 exits the application.

    • 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.

  6. 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?

    • The Spy is self-contained in the org.eclipse.e4.tools.css.spy bundle. It uses a model processor for automatic installation on startup.

  7. […] 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 […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

Follow

Get every new post delivered to your Inbox.

Join 149 other followers