Optimizing layout and style

As you try to achieve an optimal layout for small screens such as those on BlackBerry smartphones, the Elements panel can be a very useful tool. The Elements panel allows you to view the DOM and trace style values for an element to see where values are applied, how they have been inherited, and where style values have been superseded. You can adjust style settings to tweak the appearance of the webpage components to achieve the desired result. The changes you make to the webpage are applied in near real time in the BlackBerry Browser, so you can see how your changes affect the appearance of the content. Once you achieve the results you want, you can propagate the updated values into the source file.

The Elements panel

You can click the Elements icon on the toolbar to display the Elements panel.

The Elements panel is divided into two sections. On the left is the document pane, which displays the DOM tree of the HTML source document. Each element is displayed as a separate node. You can expand the nodes of the DOM tree to view the children of a container element. The document pane of the Elements panel is a good tool to use to view the source of a page. Since the panel displays the page as a tree, the document is easy to view and to navigate, even when the original webpage is minified or poorly formatted and difficult to read. Within the document pane, you can edit aspects of the DOM, such as attribute values or text.

On the right is a set of collapsible panes that display various pieces of information related to the element currently selected in the document pane. Some of these panes, such as Computed Style and Event Listeners, are informative; you use them simply to track information about the element. Other panes are editable and let you change the styles or properties associated with the selected element. You can edit content in the following panes: