Wayne Beaton is employed by The Eclipse Foundation where he works as an evangelist, spreading the word and helping folks adopt Eclipse technologies. Wayne has extensive experience in object-oriented software development and is a strong proponent of refactoring, unit testing, and agile development methodologies. He is also the editor-in-chief of Eclipse Corner, PMC Lead for the Technology Project, Project Lead for the Examples Project, and an advisor for osbootcamp. In 1982, he received the prestigious Chief Scouts Award from then-Governor General Edward Schreyer. In 1984 his team was selected to represent beautiful British Columbia in the Kinsmen Voyageur Relay. In his spare time, he writes down meaningless accomplishments from his youth in a lame attempt to impress the reader. Wayne is a DZone MVB and is not an employee of DZone and has posted 75 posts at DZone. You can read more from them at their website. View Full User Profile

Eclipse 4 and the CSS Spy

03.13.2012
| 6293 views |
  • submit to reddit

I’ve been learning about styling using CSS in Eclipse 4. I’m capturing some of the steps that I’ve been following with these posts. Think of this as more of a journal than any sort of “how to” on the topic.

The CSS Spy is a handy resource for figuring out how to refer the various parts of the user interface and sorting out the kinds of properties that you can apply. It lets you drill into the properties of the various UI elements, but doesn’t yet let you actually modify any values and modify many of them. [correction: CSS Spy lets you change some of the properties]

Rather than install the CSS spy into my Eclipse for RCP and RAP Developers Juno M5 instance (available on the “Developer Downloads” page), I pulled the code from the e4 Incubator project‘s Tools Git repository, and have been running it in a debug launch of Eclipse. Being incubator code, it’s a little rough around the edges, but it’s still a pretty useful bit of software.

The first rough bit that I encountered was the key sequence to open the CSS Spy: Alt+Ctrl+F4 means something to Fedora 14 and, instead of getting the CSS Spy, keying that particular combination switched me to a new terminal. Instead, I used the handy “Quick Access” feature to open the CSS Spy (just type “CSS Spy” into the entry field and click on the corresponding entry in the popup).

The CSS Spy provides a handy hierarchical breakdown of the workbench UI. It shows the part type, its corresponding CSS Class and–if specified–the CSS Id. When you click on an entry in the tree, it outlines the corresponding UI element in the workbench. In the above snapshot, I’ve highlighted the CTabFolder that’s shown highlighted in red. This particular instance of CTabFolder has the “MPartStack” CSS Class and id “topLeft”. Using this information, I can apply styles as generally or specifically as I’d like.

There are several other parts that share the same CSS class. I can style them all with an class entry in my CSS file:

.MPartStack {
font-size: 11;
simple: false;
mru-visible: false;
outer-keyline-color: #B4B4B4;
background-color: #E2E2E2;
}

I can specifically target the “topleft” MPartStack by including the id in my CSS file:

.MPartStack#topleft {
outer-keyline-color: #000000;
}

With this combination of styles, the “topleft” stack will be outlined in black (#000000), but all other stacks will be oulined in a medium-darkish grey (#B4B4B4). The “topleft” stack will inherit all of the remaining properties from the more general entry.

One of the things I started exploring today is how one might set the background colour of an element to a colour defined by the system. i.e. how do you leverage system properties when stylin’? More–hopefully–on this later.

Published at DZone with permission of Wayne Beaton, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)