Each XUL element has an attributes property that contains an array of all its attributes. This section summarizes some of the general XUL attributes that developers find useful, including debug.
An object becomes flexible when the flex attribute is placed on the element. Flexible objects can shrink or grow as the box shrinks and grows. Whenever extra space is left over in a box, the flexible objects are expanded to fill that space. Flex is specified as a numerical value, and all flex is relative. For example, a child with a flex of 2 is twice as flexible as a child with a flex of 1, as Example 3-20 shows. The flex attribute is invaluable for positioning elements in the box model.
The style attribute allows you to apply CSS style properties to your XUL element directly within the content. The attribute lets you access CSS properties (including width, height, min-width, min-height, max-width, and max-height), which give you more control over the size of your widget.
<button style="height: 20px; background-color: blue;" />
Don't use the style attribute too often, though, especially if you want to have more than one theme for your application. See the section Section 4.2.1.3 in Chapter 4 for information about how this attribute can make your application less modular and, for some, a better way to apply style to your XUL documents.
The persist attribute preserves the state and appearance of a widget on an attribute-by-attribute basis. This feature is useful for properties that change or are set by users during a session, such as window size and positioning, splitter state, and the visibility of certain elements.
<splitter id="sidebar-splitter" collapse="before"
persist="state hidden" align="center" orient="vertical">When the state of the splitter changes -- when a user handles the <grippy> and collapses the splitter, for example, and then quits -- the persist attribute preserves the splitter state and its visibility for the next session.
Many of XUL elements, particularly container elements like box and toolbar, support the debug attribute as a useful tool for developers. If debug is set to true, extra borders are drawn around the element and all its children, with different color coding for each level. This setting can be used to check the orientation and the flexibility of elements. debug displays horizontal boxes with a blue border and vertical boxes with a red border, for example, making it easy to see subtle differences or layout bugs. The border above the element will be straight for nonflexible elements and grooved for flexible elements.