Hidden Creator Feature #2: DOM Inspector

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.

Last week I told you how to get a selection
hiearchy display in Studio Creator. This week I'll show you how to inspect the
rendered DOM for your web page. The feature is not very polished since
it's just something I added to help me debug rendering bugs in the CSS2
layout engine, not a product level feature, but it can be useful for others too. For example,
people working on JSF components get an easy way to view the HTML
rendered from a component.

Here's roughly how it works: you press some modifier keys, then click
on the design surface over the component you're interested in. The
closest CSS2 box will be selected (shown with a red border). Various
properties of that box are now shown in the property sheet. Now you
can press Esc repeatedly to select the parent box and the property
sheet is updated. Take a look at the screenshot fragment on the right. I have
a button inside a grid panel, and I've selected the <table> box in
the box hierarchy which corresponds to the grid panel component. The property
sheet is showing the html element and its attributes, the component name, the
rendered html (use the ... button to see it all; that's what's showing in the
(mostly clipped) dialog box on the left).

For all boxes you will see the current page position (x,y), the
size (width, height), the margins, the border width, etc.

You will also see the current CSS styles computed for the element.
This is somewhat helpful, except it has some limitations. I have
a better CSS inspector now that will find its way into the product some day...

One thing that's really useful for component authors (and was invaluable
for me in proving that a bug was in a component's renderer rather than
in the designer :-) is the ability to see the html rendered by a
component. When you get to a box that is the "top level box" for
a particular component, the "Rendered HTML" string for that component
is displayed. For example, if you drop a grid panel, with a button in it,
then DOM-select the button and hit Escape up to the <table> box
rendered by the grid panel, you'll see that the Grid Panel has this
"Rendered HTML" property value:

<?xml version="1.0" encoding="UTF-8"?>
<table id="form1:gridPanel1" style="left: 696px; top: 48px; position: absolute">
<tbody>
<tr>
<td>
<input id="form1:button1" name="form1:button1" type="submit" value="Submit"/>
</td>
</tr>
</tbody>
</table>
</p>

So now I just need to tell you what the modifier keys are. In Creator 1.0, up to patch 2, press control and shift, then click. Starting with patch 3 I had to move the feature to control-alt instead, because in patch 3 control-shift is assigned to a new designer feature that I'll blog about as soon as patch 3 goes out the door!

Usual warning: this is not a supported feature, don't file bugs, etc. etc. Use at your own risk.