A XBL binding is available to add a CSS policy toggler to your dialogs. It provides the user with the following choice:

  1. set HTML attributes only
  2. set CSS inline styles when possible
  3. set CSS style rules or inline styles when possible
  4. reuse existing styles rules

You must add the following stylesheet to your XUL dialog:

<?xml-stylesheet href="chrome://bluegriffon/skin/bluegriffonDialogs.css"
type="text/css"?>

Then insert the <csstoggler> element in the XUL markup of your dialog. This element can have children, they will be displayed only in the cases 2 and 3 of the available CSS policies above.

The <csstoggler> element can hold the controls attribute. The value of that attribute is a comma-separated list of IDs in the dialog. When the CSS policy disables the OK button of the dialog, the corresponding elements will be disabled too.

Example taken from the Table Insertion dialog (chrome://bluegriffon/content/dialogs/insertTable.xul):
<csstoggler id="cssToggler"
            controls="sizeSelector">
  <groupbox orient="vertical">
    <caption label="&cssExtras.label;"/>
    <checkbox id="collapseBorders"
              label="&collapseBorders.label;"/>
    <checkbox id="hideEmptyCells"
              label="&hideEmptyCells.label;"/>
    <checkbox id="fixedLayout"
              label="&fixedLayout.label;"/>
  </groupbox>
</csstoggler>

Initialization

The <csstoggler> binding must be initialized through its init() method.

Properties

cssPolicy integer
  1. set HTML attributes only
  2. set CSS inline styles when possible
  3. set CSS style rules or inline styles when possible
  4. reuse existing styles rules
newID
newClass
strings if cssPolicy is equal to 3, these properties hold the ID and class the user typed in the dialog
reusedID
reusedClass
strings if cssPolicy is equal to 4, these properties hold the ID and class the user chose in the dialog
Visual example from the Table Insertion dialog:

CSS policy 1

CSS policy 2

CSS policy 3

CSS policy 4