Skip to main content

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index] [List Home]
[e4-dev] E4 CSS Spy tool

I've just pushed up a new tool, a CSS Spy.  You open it with Shift-Alt-F4 (though you will likely need to rebind the command; there seems to be an error in how I create the binding).  The spy shows the widget tree for the current window, with the CSS class and ids for the different widgets; the initial selection is on the control under the cursor.  For each widget selected, the spy shows a highlight of where that widget is located, the current CSS properties for that element, the computed properties that were actually applied to the element, and other useful information for CSS use.

Most useful is the CSS selector search bar.  You can enter any selector, and all matching widgets are highlighted.

I find it's really useful for experimenting with CSS selectors.  For example, you can select on SWT style bits by something like "Button[style~='SWT.CHECK']".



The tool won't be built by default yet as I had to make some changes to the CSS code that I haven't yet committed to master.  To try it out, you'll need to checkout two branches:

   * the 'bdealwis/css-spy' branch of the e4-tools repo (git://git.eclipse.org/gitroot/e4/old/org.eclipse.e4.tools.git)
   * the 'bdealwis/css-spy-changes' branch of the Platform UI repo (git://git.eclipse.org/gitroot/platform/eclipse.platform.ui.git)

There is some support for a 'live' mode, where the contents updates as the cursor moves about, though I found it confusing and so it's not surfaced in the UI.

Brian.

Back to the top