seaBreezeThe Element Tree

The element tree shows the web page structure in its hierarchical nature. Containers may be collapsed and expanded using the '+' and '-' buttons in front of their entry. Elements may be selected in the tree or in the preview area; in both cases, a selected element will be marked with a red dotted rectangle arround it in the tree.
The top bar of the element tree consists of three widgets:

A Filter Input
This field allows you to filter the element tree by entering a string. The filter is activated after entering a string and leaving the input field (e.g. using the TAB key). The filter string is always interpreted as a pattern, so entering 'div' is used to filter the element IDs for the pattern '*div*'.
The filter can be removed by deleting all text from the input field.
Button
This button allows you to expand the whole tree completely.
Button
This button will contract the whole tree, the only remaining elements are the top level ones.

The elements in the tree may be moved arround. That is, you can move them up and down to change the sequence of elements, but you can also move elements into or out of a container and its sub-containers.
To move an element, you

click and hold down the mouse button on a selected or unselected element, a hand cursor is shown as a feedback for you
start to move the element carefully.
end the movement when the element is at the desired position, and depress the mouse button. The tree will be re-displayed with your moved element at the new position, and it will be selected (red dotted rectangle arround the element).

Caution:: Pay attention when moving elements in the tree! The mechanism is quite sensitive to the tiniest mouse movements, so you should stay calm and move your hand very slow and smoothly.
Hint 1:: If you want to re-sort a list of container elements (e.g. a list of DIV elements), then collaps the element tree first, expand the tree selectively, until you see the list of containers you want to resort. Now, first select an element that you want to move up or down in the list, and then click-drag the selected element to the destination position in the list, and release the mouse button.
Hint 2:: Make use of the filter before trying to re-order a long and complex list of elements. Using the filter 'Anchor' for example will only show the list of anchor elements on the page in the tree, which lets you re-order those anchors much easier.