5 Syntax

5.1 Outliner base model

      <?xml version="1.0"?>

      <?xml-stylesheet href="chrome://communicator/skin/"?>

      <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

        <outliner id="tree" flex="1">
          <outlinercols>
            <outlinercol id="Col1" label="Col1" flex="1"/>
            <outlinercol id="Col2" label="Col1" flex="1"/>
          </outlinercols>
          <outlinerchildren/>
        </outliner>

      </window>

XUL Source

5.2 Basic outliner tags

<outliner>
This is the outer element of an outliner.
<outlinercols>
This tag groups a set of columns.
<outlinercol>
This tag defines a single column in the outliner.
<outlinerchildren>
Outermost outlinerchildren defines outliner body. Other nested outlinerchildren tags store containers in an outliner content model.

5.3 Outliner content model

      <?xml version="1.0"?>

      <?xml-stylesheet href="chrome://communicator/skin/"?>

      <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

        <outliner id="tree" flex="1">
          <outlinercols>
            <outlinercol id="Col1" label="Col1" flex="1" primary="true"/>
            <outlinercol id="Col2" label="Col1" flex="1"/>
          </outlinercols>
          <outlinerchildren>
            <outlineritem>
              <outlinerrow>
                <outlinercell label="cell11"/>
                <outlinercell label="cell12"/>
              </outlinerrow>
            </outlineritem>
            <outlinerseparator/>
            <outlineritem>
              <outlinerrow>
                <outlinercell label="cell21"/>
                <outlinercell label="cell22" properties="red"/>
              </outlinerrow>
            </outlineritem>
            <outlineritem container="true" open="true">
              <outlinerrow>
                <outlinercell label="cell31"/>
                <outlinercell label="cell32"/>
              </outlinerrow>
              <outlinerchildren>
                <outlineritem>
                  <outlinerrow>
                    <outlinercell label="child11"/>
                    <outlinercell label="child12"/>
                  </outlinerrow>
                </outlineritem>
              </outlinerchildren>
            </outlineritem>
          </outlinerchildren>
        </outliner>

      </window>

XUL Source

      outlinerchildren:-moz-outliner-cell-text(red) {
        color: #FF0000;
      }

      outlinerchildren:-moz-outliner-image(Col1) {
        list-style-image: url("chrome://messenger/skin/icons/folder-closed.gif");
        padding-right: 2px;
      }

CSS Source

5.4 Outliner content model specific tags

<outlineritem>
This contains a single top level row and all its descendants. The container attribute is used to mark this row as a container, and it is optional. The open attribute is used for expanded containers.
<outlinerrow>
An element in the outlineritem element. You may optionally set the properties attribute on the outlinerrow to a whitespace-separated list of properties.
<outlinerseparator>
Special element used to draw a horizontal separating line. The properties attribute is used to compute the properties that apply to the separator.
<outlinercell>
The outlinercell element must appear within the outlinerrow element. It specifies the text and properties that apply for a cell. The label attribute is used to set the text for the cell. The properties attribute is used to compute the properties that apply to the cell, and should be a whitespace-separated list. It is optional. The ref attribute correlates a cell within and outlinerrow to the column in the outliner, and is optional.

5.5 Outliner CSS pseudo classes

:-moz-outliner-column
Mostly used to set background color of a column. (e.g. for sorting)
:-moz-outliner-row
Mostly used to set border, height and background color of a row.
:-moz-outliner-separator
Mostly used to set color of a separator.
:-moz-outliner-cell
Mostly used to set padding of a cell.
:-moz-outliner-indentation
Used to define width of indentation of primary cells in different row levels (rows that are children of a parent container)
:-moz-outliner-line
Used to define color and style of connecting lines.
:-moz-outliner-twisty
Used to define an image for the twisty (twisty is used to open and close containers)
:-moz-outliner-image:
Used to define an image for a cell
:-moz-outliner-cell-text
Mostly used to set foreground and background color of a cell text
:-moz-outliner-drop-feedback
Mostly used to set background color, width, height and margins of the drop feedback.

5.6 Common prefilled properties

Before an element is painted outliner prefills its property array with properties reflecting its current state. Then it passes this array to outliner view. Outliner view can then append its additional properties. These properties are then used to find the corresponding CSS rule.

General properties:

focus
This property is set if the outliner currently has the focus.
sorted
This property is set if the outliner view is sorted.
dragSession
This property is set if the drag session was invoked.

Properties specific for outliner rows or their children:

selected
This property is set if the row is selected (highlighted).
current
This property is set if the row is at the current cursor position (dotted rectangle).
container
This property is set if the row is a parent for following rows. Container is the row which has child rows.
open
This property is set if the row is container and is expanded.
closed
This property is set if the row is container and is closed.
leaf
This property is set for non container rows. Rows that do not have child rows.
dropOn
This property is set if the mouse cursor in a drag session is hovering over the row.
dropBefore
This property is set if the mouse cursor in a drag session is hovering before the row.
dropAfter
This property is set if the mouse cursor in a drag session is hovering after the row.

Properties specific for outliner cells:

primary
This property is set if the cell is under primary column.

Previous | Next