RetroZilla/extensions/editor/cascades/resources/content/tabsOverlay.xul

<?xml version="1.0"?>
<!-- ***** BEGIN LICENSE BLOCK *****
   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
   -
   - The contents of this file are subject to the Mozilla Public License Version
   - 1.1 (the "License"); you may not use this file except in compliance with
   - the License. You may obtain a copy of the License at
   - http://www.mozilla.org/MPL/
   -
   - Software distributed under the License is distributed on an "AS IS" basis,
   - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
   - for the specific language governing rights and limitations under the
   - License.
   -
   - The Original Code is CaScadeS, a stylesheet editor for Composer.
   -
   - The Initial Developer of the Original Code is
   - Daniel Glazman.
   - Portions created by the Initial Developer are Copyright (C) 2002
   - the Initial Developer. All Rights Reserved.
   -
   - Contributor(s):
   -   Original author: Daniel Glazman (daniel@glazman.org)
   -
   - Alternatively, the contents of this file may be used under the terms of
   - either the GNU General Public License Version 2 or later (the "GPL"), or
   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
   - in which case the provisions of the GPL or the LGPL are applicable instead
   - of those above. If you wish to allow use of your version of this file only
   - under the terms of either the GPL or the LGPL, and not to allow others to
   - use your version of this file under the terms of the MPL, indicate your
   - decision by deleting the provisions above and replace them with the notice
   - and other provisions required by the LGPL or the GPL. If you do not delete
   - the provisions above, a recipient may use your version of this file under
   - the terms of any one of the MPL, the GPL or the LGPL.
   -
   - ***** END LICENSE BLOCK ***** -->

<!DOCTYPE window SYSTEM "chrome://cascades/locale/EdCssProps.dtd">

<overlay id="tabsOverlay" 
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <!-- FONT AND TEXT PANEL -->
  <vbox id="textTabPanel">
    <hbox>
      <vbox>
        <label value="&fontFamily.label;"/>
        <radiogroup id="fontFamilyRadiogroup"
                    class="big-left-margin">
          <radio id="noFontFamilyRadio"
                 selected="true"
                 label="&unspecifiedValue.label;"
                 oncommand="onFontFamilySelect('');"/>
          <radio id="predefFontFamilyRadio"
                 label="&predefFontFamilyRadio.label;"
                 oncommand="onFontFamilySelect('-predefined');"/>
          <menulist class="big-left-margin" id="predefFontFamilyMenulist">
            <menupopup>
              <menuitem label="Arial, Helvetica, sans-serif"
                        id="sansSerifFontFamilyMenuitem"
                        value="Arial,Helvetica,sans-serif"
                        oncommand="onFontFamilySelect('Arial,Helvetica,sans-serif');"/>
              <menuitem label="Times New Roman, Times, serif"
                        id="serifFontFamilyMenuitem"
                        value="Times New Roman,Times,serif"
                        oncommand="onFontFamilySelect('Times New Roman,Times,serif');"/>
              <menuitem label="Courier New, Courier, monospace"
                        id="monospaceFontFamilyMenuitem"
                        value="Courier New,Courier,monospace"
                        oncommand="onFontFamilySelect('Courier New,Courier,monospace');"/>
            </menupopup>
          </menulist>
          <radio id="customFontFamilyRadio"
                 label="&useCustomFontFamily.label;"
                 oncommand="onFontFamilySelect('-user-defined');"/>
        </radiogroup>
        <menulist id="customFontFamilyInput"
                  size="12"
                  editable="true"
                  disabled="true"
                  class="big-left-margin"
                  oninput="ChangeValueOnInput(this, 'font-family', 'brownFoxLabel');">
          <menupopup onpopupshowing="initLocalFontFaceMenu(this)">
          <!-- Local font face items added at by initLocalFontFaceMenu() -->
          </menupopup>
        </menulist>
        <separator class="groove"/>
        <grid>
          <columns><column/><column flex="1"/></columns>
          <rows>
            <row align="center">
              <label value="&fontSize.label;"/>
              <hbox align="center">
                <menulist editable="true"
                          style="width: 8em"
                          id="fontSizeInput"
                          oninput="ChangeValueOnInput(this, 'font-size', 'brownFoxLabel');"
                          oncommand="DoMenulistCommand(this, 'font-size', 'brownFoxLabel');">
                  <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'font-size', 'brownFoxLabel', true);">
                    <menuseparator/>
                    <menuitem label="&largerFontSize.label;"
                              value='larger'/>
                    <menuitem label="&smallerFontSize.label;"
                              value='smaller'/>
                    <menuseparator/>
                    <menuitem label="&xxsmallFontSize.label;"
                              value='xx-small'/>
                    <menuitem label="&xsmallFontSize.label;"
                              value='x-small'/>
                    <menuitem label="&smallFontSize.label;"
                              value='small'/>
                    <menuitem label="&mediumFontSize.label;"
                              value='medium'/>
                    <menuitem label="&largeFontSize.label;"
                              value='large'/>
                    <menuitem label="&xlargeFontSize.label;"
                              value='x-large'/>
                    <menuitem label="&xxlargeFontSize.label;"
                              value='xx-large'/>
                  </menupopup>
                </menulist>
                <spinbuttons onup="Spinbutton(1, 'fontSizeInput');"
                             ondown="Spinbutton(-1, 'fontSizeInput');"/>
              </hbox>
            </row>
            <row align="center">
              <label value="&lineHeight.label;"/>
              <hbox align="center">
                <menulist editable="true"
                          style="width: 8em"
                          id="lineHeightInput"
                          oninput="ChangeValueOnInput(this, 'line-height', null);"
                          oncommand="DoMenulistCommand(this, 'line-height', null);">
                  <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'line-height', null, true);">
                    <menuseparator/>
                    <menuitem label="&normalLineHeight.label;"
                              value='normal'/>
                  </menupopup>
                </menulist>
                <spinbuttons onup="Spinbutton(1, 'lineHeightInput');"
                             ondown="Spinbutton(-1, 'lineHeightInput');"/>
              </hbox>
            </row>
          </rows>
        </grid>
      </vbox>
      <separator orient="vertical" class="groove" style="width: 3px"/>
      <vbox>
          <grid>
            <columns><column/><column/><column/></columns>
            <rows>
              <row align="center">
                <label value="&color.label;"/>
                <textbox id="textColorInput"
                         size="10" 
                         oninput="onColorZoneInput(this, 'color', 'brownFoxLabel', 'textCW');"/>
                <button id="colorButton"
                        class="color-button"
                        oncommand="GetColorAndUpdate('textCW');">
                  <spacer id="textCW" class="color-well"/>
                </button>
              </row>
              <row align="center">
                <label value="&fontWeight.label;"/>
                <menulist id="fontWeightMenulist"
                          oncommand="DoMenulistCommand(this, 'font-weight', 'brownFoxLabel');">
                  <menupopup>
                    <menuitem label="&unspecifiedValue.label;"
                              id="unspecifiedFontWeightMenu"
                              value='inherit'/>
                    <menuseparator/>
                    <menuitem label="&normalValue.label;"
                              id="normalFontWeightMenu"
                              value='normal'/>
                    <menuitem label="&boldValue.label;"
                              id="boldFontWeightMenu"
                              value='bold'/>
                    <menuseparator/>
                    <menuitem label="&bolderValue.label;"
                              id="bolderFontWeightMenu"
                              value='bolder'/>
                    <menuitem label="&lighterValue.label;"
                              id="lighterFontWeightMenu"
                              value='lighter'/>
                    <menuseparator/>
                    <menuitem label="&inheritedValue.label;"
                              id="inheritFontWeightMenu"
                              value='inherit'/>
                  </menupopup>
                </menulist>
              </row>
              <row align="center">
                <label value="&fontStyle.label;"/>
                <menulist id="fontStyleMenulist"
                          oncommand="DoMenulistCommand(this, 'font-style', 'brownFoxLabel');">
                  <menupopup>
                    <menuitem label="&unspecifiedValue.label;"
                              id="unspecifiedFontStyleMenu"
                              value=''/>
                    <menuseparator/>
                    <menuitem label="&normalValue.label;"
                              id ="normalFontStyleMenu"
                              value='normal'/>
                    <menuitem label="&italicValue.label;"
                              id="italicFontStyleMenu"
                              value='italic'/>
                    <menuitem label="&obliqueValue.label;"
                              id="obliqueFontStyleMenu"
                              value='oblique'/>
                    <menuseparator/>
                    <menuitem label="&inheritedValue.label;"
                              id="inheritFontStyleMenu"
                              value='inherit'/>
                  </menupopup>
                </menulist>
              </row>
              <row align="center">
                <label value="&textTransform.label;"/>
                <menulist id="textTransformMenulist"
                          oncommand="DoMenulistCommand(this, 'text-transform', 'brownFoxLabel');">
                  <menupopup>
                    <menuitem label="&unspecifiedValue.label;"
                              id="unspecifiedTextTransformMenu"
                              value=''/>
                    <menuseparator/>
                    <menuitem label="&noneTextTransformValue.label;"
                              id="noneTextTransformMenu"
                              value='none'/>
                    <menuitem label="&lowercaseValue.label;"
                              id="lowercaseTextTransformMenu"
                              value='lowercase'/>
                    <menuitem label="&uppercaseValue.label;"
                              id="uppercaseTextTransformMenu"
                              value='uppercase'/>
                    <menuitem label="&capitalizeValue.label;"
                              id="capitalizeTextTransformMenu"
                              value='capitalize'/>
                    <menuseparator/>
                    <menuitem label="&inheritedValue.label;"
                              id="inheritTextTransformMenu"
                              value='inherit'/>
                  </menupopup>
                </menulist>
              </row>
              <row align="center">
                <label value="&textAlign.label;"/>
                <menulist id="textAlignMenulist"
                          oncommand="DoMenulistCommand(this, 'text-align', 'brownFoxLabel');">
                  <menupopup>
                    <menuitem label="&unspecifiedValue.label;" id="unspecifiedTextAlignMenu"
                              value=''/>
                    <menuseparator/>
                    <menuitem label="&leftTextAlign.label;"
                              id="leftTextAlignMenu"
                              value='left'/>
                    <menuitem label="&rightTextAlign.label;"
                              id="rightTextAlignMenu"
                              value='right'/>
                    <menuitem label="&centerTextAlign.label;"
                              id="centerTextAlignMenu"
                              value='center'/>
                    <menuitem label="&justifyTextAlign.label;"
                              id="justifyTextAlignMenu"
                              value='justify'/>
                  </menupopup>
                </menulist>
              </row>
            </rows>
          </grid>
          <separator class="groove"/>
          <label value="&textDecoration.label;"/>
          <hbox align="center">
            <checkbox id="overlineTextDecorationCheckbox"
                      label="&overlineTextDecoration.label;"
                      class="big-left-margin"
                      oncommand="onTextDecorationChange();"/>
            <spacer flex="1"/>
            <checkbox id="noneTextDecorationCheckbox"
                      label="&noneTextDecoration.label;"
                      class="big-left-margin"
                      oncommand="onNoneTextDecorationChange();"/>
          </hbox>
          <checkbox id="linethroughTextDecorationCheckbox"
                    label="&linethroughTextDecoration.label;"
                    class="big-left-margin"
                    oncommand="onTextDecorationChange();"/>
          <checkbox id="underlineTextDecorationCheckbox"
                    label="Underline"
                    class="big-left-margin"
                    oncommand="onTextDecorationChange();"/>
          <checkbox id="blinkTextDecorationCheckbox"
                    label="&blinkTextDecoration.label;"
                    class="big-left-margin"
                    oncommand="onTextDecorationChange();"/>
      </vbox>
    </hbox>
    
    <!-- we cannot use a xul label here because text-transform does not work on labels *sigh* -->
    <html:p id="brownFoxLabel">&exampleSentence.label;</html:p>
  </vbox>


  <!-- BACKGROUND PANEL -->
  <vbox id="backgroundTabPanel">
    <grid>
      <columns><column/><column/></columns>
      <rows>
        <row align="center">
          <label value="&backgroundColor.label;"/>
          <textbox size="10"
                   id="backgroundColorInput"
                   oninput="onColorZoneInput(this, 'background-color', 'backgroundPreview', 'backgroundCW');
                            onColorZoneInput(this, 'background-color', 'brownFoxLabel', 'backgroundCW');"/>
          <hbox>
            <button id="backgroundcolorButton"
                    class="color-button"
                    oncommand="GetColorAndUpdate('backgroundCW');">
              <spacer id="backgroundCW"
                      class="color-well"/>
            </button>
          </hbox>
        </row>
        <row align="center">
          <label value="&opacity.label;"/>
          <scrollbar flex="1"
              id="opacityScrollbar"
              align="horizontal"
              curpos="0"
              maxpos="1000"
              increment="10"
              pageincrement="100"/>
          <label id="opacityLabel" value="transparent"/>
        </row>
        <row align="center">
          <label value="&backgroundImage.label;"/>
          <textbox id="backgroundImageInput"
                   oninput="ChangeImageSrc();"
                   flex="1"/>
          <hbox>
            <button label="&chooseFileButton.label;"
                    oncommand="chooseFile('img', 'backgroundImageInput');"/>
          </hbox>
        </row>
        <row align="center">
          <label value="&backgroundRepeat.label;"
                 id="backgroundRepeatLabel"/>
          <menulist id="backgroundRepeatMenulist"
                    oncommand="DoMenulistCommand(this, 'background-repeat', 'backgroundPreview');">
            <menupopup>
              <menuitem label="&norepeatBackgroundRepeat.label;"
                        id="norepeatBackgroundRepeatMenu"
                        value='no-repeat'/>
              <menuitem label="&repeatxBackgroundRepeat.label;"
                        id="horizontallyBackgroundRepeatMenu"
                        value='repeat-x'/>
              <menuitem label="&repeatyBackgroundRepeat.label;"
                        id="verticallyBackgroundRepeatMenu"
                        value='repeat-y'/>
              <menuitem label="&repeatBackgroundRepeat.label;"
                        id="repeatBackgroundRepeatMenu"
                        value='repeat'/>
            </menupopup>
          </menulist>
        </row>
        <row align="center">
          <spacer/>
          <checkbox label="&backgroundAttachmentCheckbox.label;"
                    id="backgroundAttachmentCheckbox"
                    oncommand="onBackgroundAttachmentChange();"/>
        </row>
        <row align="baseline">
          <label value="&backgroundPosition.label;"
                 id="backgroundPositionLabel"/>
          <grid>
            <columns><column/><column/><column/><column/></columns>
            <rows>
              <row align="center">
                <spacer/>
                <radiogroup orient="horizontal" id="xBackgroundPositionRadiogroup">
                  <radio label="&leftXBackgroundPosition.label;"
                         selected="true"
                         value="left"
                         id="leftXBackgroundPositionRadio"
                         oncommand="onBackGroundPositionSelect();"/>
                  <radio label="&centerXBackgroundPosition.label;"
                         value="center"
                         id="centerXBackgroundPositionRadio"
                         oncommand="onBackGroundPositionSelect();"/>
                  <radio label="&rightXBackgroundPosition.label;"
                         value="right"
                         id="rightXBackgroundPositionRadio"
                         oncommand="onBackGroundPositionSelect();"/>
                </radiogroup>
              </row>
              <row align="center">
                <vbox>
                  <radiogroup id="yBackgroundPositionRadiogroup">
                    <radio label="&topYBackgroundPosition.label;"
                           selected="true"
                           value="top"
                           id="topYBackgroundPositionRadio"
                           oncommand="onBackGroundPositionSelect();"/>
                    <radio label="&centerYBackgroundPosition.label;"
                           value="center"
                           id="centerYBackgroundPositionRadio"
                           oncommand="onBackGroundPositionSelect();"/>
                    <radio label="&bottomYBackgroundPosition.label;"
                           value="bottom"
                           id="bottomYBackgroundPositionRadio"
                           oncommand="onBackGroundPositionSelect();"/>
                  </radiogroup>
                </vbox>
                <html:p style="border:1px solid black; height: 10em"
                        id="backgroundPreview">
                  
                </html:p>
              </row>
            </rows>
          </grid>
        </row>
      </rows>
    </grid>
  </vbox>


  <!-- BORDER PANEL -->
  <vbox id="borderTabPanel">
    <checkbox id="allFourBordersSame"
              label="&useBorderShorthand.label;"
              oncommand="ToggleFourBorderSidesSameStyle(this);"/>
    <separator class="groove"/>
    <grid>
      <columns><column/><column/><column flex="1"/><column/><column flex="1"/><column/></columns>
      <rows>
        <row align="center">
          <spacer/>
          <label style="text-align: center"
                 value="&borderStyle.label;"/>
          <spacer/>
          <label style="text-align: center"
                 value="&borderWidth.label;"/>
          <spacer/>
          <label style="text-align: center"
                 value="&borderColor.label;"/>
        </row>
        <row align="center">
          <label value="&topBorder.label;"/>
          <menulist id="topBorderStyleMenulist"
                    style="width: 10em"
                    oncommand="DoMenulistCommand(this, 'border-top-style', 'borderPreview');">
            <menupopup>
              <menuitem label="&unspecifiedValue.label;"
                        id="unspecifiedtopBorderStyle"
                        value=''/>
              <menuseparator/>
              <menuitem label="&noneBorderStyle.label;"
                        id="nonetopBorderStyle"
                        value='none'/>
              <menuseparator/>
              <menuitem label="&hiddenBorderStyle.label;"
                        id="hiddentopBorderStyle"
                        value='hidden'/>
              <menuitem label="&solidBorderStyle.label;"
                        id="solidtopBorderStyle"
                        value='solid'/>
              <menuitem label="&dottedBorderStyle.label;"
                        id="dottedtopBorderStyle"
                        value='dotted'/>
              <menuitem label="&dashedBorderStyle.label;"
                        id="dashedtopBorderStyle"
                        value='dashed'/>
              <menuitem label="&doubleBorderStyle.label;"
                        id="doubletopBorderStyle"
                        value='double'/>
              <menuitem label="&grooveBorderStyle.label;"
                        id="groovetopBorderStyle"
                        value='groove'/>
              <menuitem label="&ridgeBorderStyle.label;"
                        id="ridgetopBorderStyle"
                        value='ridge'/>
              <menuitem label="&insetBorderStyle.label;"
                        id="insettopBorderStyle"
                        value='inset'/>
              <menuitem label="&outsetBorderStyle.label;"
                        id="outsettopBorderStyle"
                        value='outset'/>
            </menupopup>
          </menulist>
          <spacer/>
          <hbox align="center">
            <menulist editable="true"
                      style="width: 8em"
                      id="topBorderWidthInput"
                      oninput="ChangeValueOnInput(this, 'border-top-width', 'borderPreview');
                               IfFourSidesSameStyle('border', 'width', null,
                                                    'allFourBordersSame', 'borderPreview', this);">
              <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'border-top-width', null, false);"/>
            </menulist>
            <spinbuttons onup="Spinbutton(1, 'topBorderWidthInput');"
                         ondown="Spinbutton(-1, 'topBorderWidthInput');"/>
          </hbox>
          <spacer/>
          <textbox id="topBorderColorInput"
                   size="10" 
                   oninput="onColorZoneInput(this, 'border-top-color', 'borderPreview', 'bordertopCW');
                            IfFourSidesSameStyle('border', 'color', null,
                                                 'allFourBordersSame', 'borderPreview', this);"/>
          <button id="topBorderColorButton"
                  class="color-button"
                  oncommand="GetColorAndUpdate('bordertopCW');">
            <spacer id="bordertopCW" class="color-well"/>
          </button>
        </row>
        <row align="center">
          <label value="&leftBorder.label;"/>
          <menulist id="leftBorderStyleMenulist" style="width: 10em"
                    oncommand="DoMenulistCommand(this, 'border-left-style', 'borderPreview');">
            <menupopup>
              <menuitem label="&unspecifiedValue.label;"
                        id="unspecifiedleftBorderStyle"
                        value=''/>
              <menuseparator/>
              <menuitem label="&noneBorderStyle.label;"
                        id="noneleftBorderStyle"
                        value='none'/>
              <menuseparator/>
              <menuitem label="&hiddenBorderStyle.label;"
                        id="hiddenleftBorderStyle"
                        value='hidden'/>
              <menuitem label="&solidBorderStyle.label;"
                        id="solidleftBorderStyle"
                        value='solid'/>

              <menuitem label="&dottedBorderStyle.label;"
                        id="dottedleftBorderStyle"
                        value='dotted'/>
              <menuitem label="&dashedBorderStyle.label;"
                        id="dashedleftBorderStyle"
                        value='dashed'/>
              <menuitem label="&doubleBorderStyle.label;"
                        id="doubleleftBorderStyle"
                        value='double'/>
              <menuitem label="&grooveBorderStyle.label;"
                        id="grooveleftBorderStyle"
                        value='groove'/>
              <menuitem label="&ridgeBorderStyle.label;"
                        id="ridgeleftBorderStyle"
                        value='ridge'/>
              <menuitem label="&insetBorderStyle.label;"
                        id="insetleftBorderStyle"
                        value='inset'/>
              <menuitem label="&outsetBorderStyle.label;"
                        id="outsetleftBorderStyle"
                        value='outset'/>
            </menupopup>
          </menulist>
          <spacer/>
          <hbox align="center">
            <menulist editable="true"
                      style="width: 8em"
                      id="leftBorderWidthInput"
                      oninput="ChangeValueOnInput(this, 'border-left-width', 'borderPreview');">
              <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'border-left-width', null, false);"/>
            </menulist>
            <spinbuttons onup="Spinbutton(1, 'leftBorderWidthInput');"
                         ondown="Spinbutton(-1, 'leftBorderWidthInput');"/>
          </hbox>              
          <spacer/>
          <textbox id="leftBorderColorInput"
                   size="10" 
                   oninput="onColorZoneInput(this, 'border-left-color', 'borderPreview', 'borderleftCW');"/>
          <button id="leftBorderColorButton"
                  class="color-button"
                  oncommand="GetColorAndUpdate('borderleftCW');">
            <spacer id="borderleftCW" class="color-well"/>
          </button>
        </row>
        <row align="center">
          <label value="&rightBorder.label;"/>
          <menulist id="rightBorderStyleMenulist" style="width: 10em"
                    oncommand="DoMenulistCommand(this, 'border-right-style', 'borderPreview');">
            <menupopup>
              <menuitem label="&unspecifiedValue.label;"
                        id="unspecifiedrightBorderStyle"
                        value=''/>
              <menuseparator/>
              <menuitem label="&noneBorderStyle.label;"
                        id="nonerightBorderStyle"
                        value='none'/>
              <menuseparator/>
              <menuitem label="&hiddenBorderStyle.label;"
                        id="hiddenrightBorderStyle"
                        value='hidden'/>
              <menuitem label="&solidBorderStyle.label;"
                        id="solidrightBorderStyle"
                        value='solid'/>

              <menuitem label="&dottedBorderStyle.label;"
                        id="dottedrightBorderStyle"
                        value='dotted'/>
              <menuitem label="&dashedBorderStyle.label;"
                        id="dashedrightBorderStyle"
                        value='dashed'/>
              <menuitem label="&doubleBorderStyle.label;"
                        id="doublerightBorderStyle"
                        value='double'/>
              <menuitem label="&grooveBorderStyle.label;"
                        id="grooverightBorderStyle"
                        value='groove'/>
              <menuitem label="&ridgeBorderStyle.label;"
                        id="ridgerightBorderStyle"
                        value='ridge'/>
              <menuitem label="&insetBorderStyle.label;"
                        id="insetrightBorderStyle"
                        value='inset'/>
              <menuitem label="&outsetBorderStyle.label;"
                        id="outsetrightBorderStyle"
                        value='outset'/>
            </menupopup>
          </menulist>
          <spacer/>
          <hbox align="center">
            <menulist editable="true"
                      style="width: 8em"
                      id="rightBorderWidthInput"
                      oninput="ChangeValueOnInput(this, 'border-right-width', 'borderPreview');">
              <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'border-right-width', null, false);"/>
            </menulist>
            <spinbuttons onup="Spinbutton(1, 'rightBorderWidthInput');"
                         ondown="Spinbutton(-1, 'rightBorderWidthInput');"/>
          </hbox>
          <spacer/>
          <textbox id="rightBorderColorInput"
                   size="10" 
                   oninput="onColorZoneInput(this, 'border-right-color', 'borderPreview', 'borderrightCW');"/>
          <button id="rightBorderColorButton"
                  class="color-button"
                  oncommand="GetColorAndUpdate('borderrightCW');">
            <spacer id="borderrightCW" class="color-well"/>
          </button>
        </row>
        <row align="center">
          <label value="&bottomBorder.label;"/>
          <menulist id="bottomBorderStyleMenulist" style="width: 10em"
                    oncommand="DoMenulistCommand(this, 'border-bottom-style', 'borderPreview');">
            <menupopup>
              <menuitem label="&unspecifiedValue.label;"
                        id="unspecifiedbottomBorderStyle"
                        value=''/>
              <menuseparator/>
              <menuitem label="&noneBorderStyle.label;"
                        id="nonebottomBorderStyle"
                        value='none'/>
              <menuseparator/>
              <menuitem label="&hiddenBorderStyle.label;"
                        id="hiddenbottomBorderStyle"
                        value='hidden'/>
              <menuitem label="&solidBorderStyle.label;"
                        id="solidbottomBorderStyle"
                        value='solid'/>

              <menuitem label="&dottedBorderStyle.label;"
                        id="dottedbottomBorderStyle"
                        value='dotted'/>
              <menuitem label="&dashedBorderStyle.label;"
                        id="dashedbottomBorderStyle"
                        value='dashed'/>
              <menuitem label="&doubleBorderStyle.label;"
                        id="doublebottomBorderStyle"
                        value='double'/>
              <menuitem label="&grooveBorderStyle.label;"
                        id="groovebottomBorderStyle"
                        value='groove'/>
              <menuitem label="&ridgeBorderStyle.label;"
                        id="ridgebottomBorderStyle"
                        value='ridge'/>
              <menuitem label="&insetBorderStyle.label;"
                        id="insetbottomBorderStyle"
                        value='inset'/>
              <menuitem label="&outsetBorderStyle.label;"
                        id="outsetbottomBorderStyle"
                        value='outset'/>
            </menupopup>
          </menulist>
          <spacer/>
          <hbox align="center">
            <menulist editable="true"
                      style="width: 8em"
                      id="bottomBorderWidthInput"
                      oninput="ChangeValueOnInput(this, 'border-bottom-width', 'borderPreview');">
              <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'border-bottom-width', null, false);"/>
            </menulist>
            <spinbuttons onup="Spinbutton(1, 'bottomBorderWidthInput');"
                         ondown="Spinbutton(-1, 'bottomBorderWidthInput');"/>
          </hbox>
          <spacer/>
          <textbox id="bottomBorderColorInput"
                   size="10" 
                   oninput="onColorZoneInput(this, 'border-bottom-color', 'borderPreview', 'borderbottomCW');"/>
          <button id="bottomBorderColorButton"
                  class="color-button"
                  oncommand="GetColorAndUpdate('borderbottomCW');">
            <spacer id="borderbottomCW" class="color-well"/>
          </button>
        </row>
      </rows>
    </grid>
    <hbox flex="1">
      <spacer flex="1"/>
      <groupbox flex="1"><caption label="&borderPreview.label;"/>
        <html:p style="height: 75px" id="borderPreview"> </html:p>
      </groupbox>
      <spacer flex="1"/>
    </hbox>
  </vbox>



  <!-- BOX TAB PANEL -->
  <vbox id="boxTabPanel">
    <grid>
      <columns><column/><column/><column flex="1"/><column/><column/></columns>
      <rows>
        <row align="center">
          <label value="&display.label;"/>
          <menulist id="displayMenulist"
                    oncommand="DoMenulistCommand(this, 'display', null);">
            <menupopup>
              <menuitem label="&unspecifiedValue.label;"
                        id="unspecifiedDisplayMenuitem"
                        value=""/>
              <menuseparator/>
              <menuitem label="&noneDisplay.label;"
                        id="noneDisplayMenuitem"
                        value='none'/>
              <menuseparator/>
              <menuitem label="&inlineDisplay.label;"
                        id="inlineDisplayMenuitem"
                        value='inline'/>
              <menuitem label="&blockDisplay.label;"
                        id="blockDisplayMenuitem"
                        value='block'/>
              <menuitem label="&runinDisplay.label;" disabled="true"
                        id="runinDisplayMenuitem"
                        value='run-in'/>
              <menuitem label="&compactDisplay.label;" disabled="true"
                        id="compactDisplayMenuitem"
                        value='compact'/>
              <menuseparator/>
              <menuitem label="&listitemDisplay.label;"
                        id="listitemDisplayMenuitem"
                        value='list-item'/>
              <menuseparator/>
              <menuitem label="&tableDisplay.label;"
                        id="tableDisplayMenuitem"
                        value='table'/>
              <menuitem label="&tablerowDisplay.label;"
                        id="tablerowDisplayMenuitem"
                        value='table-row'/>
              <menuitem label="&tablecellDisplay.label;"
                        id="tablecellDisplayMenuitem"
                        value='table-cell'/>
              <menuitem label="&tablecaptionDisplay.label;"
                        id="tablecaptionDisplayMenuitem"
                        value='table-caption'/>
              <menuitem label="&inlinetableDisplay.label;"
                        id="inlinetableDisplayMenuitem"
                        value='inline-table'/>
              <menuitem label="&tablecolumnDisplay.label;"
                        id="tablecolumnDisplayMenuitem"
                        value='table-column'/>
              <menuitem label="&tablerowgroupDisplay.label;"
                        id="tablerowgroupDisplayMenuitem"
                        value='table-row-group'/>
              <menuitem label="&tableheadergroupDisplay.label;"
                        id="tableheadergroupDisplayMenuitem"
                        value='table-header-group'/>
              <menuitem label="&tablefootergroupDisplay.label;"
                        id="tablefootergroupDisplayMenuitem"
                        value='table-footer-group'/>
              <menuitem label="&tablecolumngroupDisplay.label;"
                        id="tablecolumngroupDisplayMenuitem"
                        value='table-column-group'/>
            </menupopup>
          </menulist>
          <spacer/>
          <label value="&visibility.label;"/>
          <menulist style="min-width: 12em"
                    id="visibilityMenulist"
                    oncommand="DoMenulistCommand(this, 'visibility', null);">
            <menupopup>
              <menuitem label="&unspecifiedValue.label;"
                        id="unspecifiedVisibilityMenuitem"
                        value=''/>
              <menuseparator/>
              <menuitem label="&visibleVisibility.label;"
                        id="visibleVisibilityMenuitem"
                        value='visible'/>
              <menuitem label="&hiddenVisibility.label;"
                        id="hiddenVisibilityMenuitem"
                        value='hidden'/>
              <menuitem label="&collapseVisibility.label;"
                        id="collapseVisibilityMenuitem"
                        value='collapse'/>
            </menupopup>
          </menulist>
        </row>
        <row align="center">
          <label value="Float:"/>
          <menulist id="floatMenulist"
                    oncommand="DoMenulistCommand(this, 'float', null);">
            <menupopup>
              <menuitem label="&unspecifiedValue.label;" id="unspecifiedFloatMenuitem"
                        value=''/>
              <menuseparator/>
              <menuitem label="&leftFloat.label;"
                        id="leftFloatMenuitem"
                        value='left'/>
              <menuitem label="&rightFloat.label;"
                        id="rightFloatMenuitem"
                        value='right'/>
              <menuitem label="&noneFloat.label;"
                        id="noneFloatMenuitem"
                        value='none'/>
            </menupopup>
          </menulist>
          <spacer/>
          <label value="&clear.label;"/>
          <menulist id="clearMenulist"
                    oncommand="DoMenulistCommand(this, 'clear', null);">
            <menupopup>
              <menuitem label="&unspecifiedValue.label;"
                        id="unspecifiedClearMenuitem"
                        value=''/>
              <menuseparator/>
              <menuitem label="&noneClear.label;"
                        id="noneClearMenuitem"
                        value='none'/>
              <menuseparator/>
              <menuitem label="&leftClear.label;"
                        id="leftClearMenuitem"
                        value='left'/>
              <menuitem label="&rightClear.label;"
                        id="rightClearMenuitem"
                        value='right'/>
              <menuitem label="&bothClear.label;"
                        id="bothClearMenuitem"
                        value='both'/>
            </menupopup>
          </menulist>
        </row>
        <row align="center">
          <label value="&position.label;"/>
          <menulist id="positionMenulist"
                    oncommand="DoMenulistCommand(this, 'position', null);">
            <menupopup>
              <menuitem label="&unspecifiedValue.label;"
                        id="unspecifiedPositionMenuitem"
                        value=''/>
              <menuseparator/>
              <menuitem label="&staticPosition.label;"
                        id="staticPositionMenuitem"
                        value='static'/>
              <menuitem label="&fixedPosition.label;"
                        id="fixedPositionMenuitem"
                        value='fixed'/>
              <menuitem label="&absolutePosition.label;"
                        id="absolutePositionMenuitem"
                        value='absolute'/>
              <menuitem label="&relativePosition.label;"
                        id="relativePositionMenuitem"
                        value='relative'/>
            </menupopup>
          </menulist>
          <spacer/>
          <label value="&overflow.label;"/>
          <menulist style="min-width: 12em"
                    id="overflowMenulist"
                    oncommand="DoMenulistCommand(this, 'overflow', null);">
            <menupopup>
              <menuitem label="&unspecifiedValue.label;"
                        id="unspecifiedOverflowMenuitem"
                        value=''/>
              <menuseparator/>
              <menuitem label="&visibleOverflow.label;"
                        id="visibleOverflowMenuitem"
                        value='visible'/>
              <menuitem label="&hiddenOverflow.label;"
                        id="hiddenOverflowMenuitem"
                        value='hidden'/>
              <menuitem label="&scrollOverflow.label;"
                        id="scrollOverflowMenuitem"
                        value='scroll'/>
              <menuitem label="&autoOverflow.label;"
                        id="autoOverflowMenuitem"
                        value='auto'/>
            </menupopup>
          </menulist>
        </row>
        <row align="center">
          <label value="&zIndex.label;"/>
          <textbox size="6" id="zindexInput"
                   oninput="ChangeValueOnInput(this, 'z-index', null);"/>
        </row>
      </rows>
    </grid>
    <separator class="groove"/>
    <grid>
      <columns>
        <column/><column/>
        <column flex="1"/>
        <column/><column/>
      </columns>
      <rows>
        <row align="center">
          <label value="&width.label;"/>
          <hbox align="center">
            <menulist editable="true" style="width: 10em"
                      id="widthEditableMenulist"
                      oninput="ChangeValueOnInput(this, 'width', null);">
              <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'width', null, true);"/>
            </menulist>
            <spinbuttons onup="Spinbutton(1, 'widthEditableMenulist');"
                         ondown="Spinbutton(-1, 'widthEditableMenulist');"/>
          </hbox>
          <spacer/>
          <label value="&height.label;"/>
          <hbox align="center">
            <menulist editable="true" style="width: 10em"
                      id="heightEditableMenulist"
                      oninput="ChangeValueOnInput(this, 'height', null);">
              <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'height', null, true);"/>
            </menulist>
            <spinbuttons onup="Spinbutton(1, 'heightEditableMenulist');"
                         ondown="Spinbutton(-1, 'heightEditableMenulist');"/>
          </hbox>
        </row>
        <row align="center">
          <label value="&minWidth.label;"/>
          <hbox align="center">
            <menulist editable="true"  style="width: 10em"
                      id="minwidthEditableMenulist"
                      oninput="ChangeValueOnInput(this, 'min-width', null);">
              <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'min-width', null, true);"/>
            </menulist>
            <spinbuttons onup="Spinbutton(1, 'minwidthEditableMenulist');"
                         ondown="Spinbutton(-1, 'minwidthEditableMenulist');"/>
          </hbox>
          <spacer/>
          <label value="&minHeight.label;"/>
          <hbox align="center">
            <menulist editable="true" style="width: 10em"
                      id="minheightEditableMenulist"
                      oninput="ChangeValueOnInput(this, 'min-height', null);">
              <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'min-height', null, true);"/>
            </menulist>
            <spinbuttons onup="Spinbutton(1, 'minheightEditableMenulist');"
                         ondown="Spinbutton(-1, 'minheightEditableMenulist');"/>
          </hbox>
        </row>
        <row align="center">
          <label value="&maxWidth.label;"/>
          <hbox align="center">
            <menulist editable="true" style="width: 10em"
                      id="maxwidthEditableMenulist"
                      oninput="ChangeValueOnInput(this, 'max-width', null);">
              <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'max-width', null, true);"/>
            </menulist>
            <spinbuttons onup="Spinbutton(1, 'maxwidthEditableMenulist');"
                         ondown="Spinbutton(-1, 'maxwidthEditableMenulist');"/>
          </hbox>
          <spacer/>
          <label value="&maxHeight.label;"/>
          <hbox align="center">
            <menulist editable="true" style="width: 10em"
                      id="maxheightEditableMenulist"
                      oninput="ChangeValueOnInput(this, 'max-height', null);">
              <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'max-height', null, true);"/>
            </menulist>
            <spinbuttons onup="Spinbutton(1, 'maxheightEditableMenulist');"
                         ondown="Spinbutton(-1, 'maxheightEditableMenulist');"/>
          </hbox>
        </row>
      </rows>
    </grid>
    <separator class="groove"/>
    <grid flex="1">
      <columns><column/><column/><column flex="1"/><column/><column flex="1"/><column/></columns>
      <rows>
        <row>
          <spacer/>
          <label value="&margins.label;"/>
          <spacer flex="1"/>
          <label value="&paddings.label;"/>
          <spacer flex="1"/>
          <label value="&offsets.label;"/>
        </row>
        <row align="center">
          <label value="&top.label;"/>
          <menulist editable="true" style="width: 8em"
                    id="margintopEditableMenulist"
                    oninput="ChangeValueOnInput(this, 'margin-top', null);">
            <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'margin-top', null, true);"/>
          </menulist>
          <spacer flex="1"/>
          <menulist editable="true" style="width: 8em"
                    id="paddingtopEditableMenulist"
                    oninput="ChangeValueOnInput(this, 'padding-top', null);">
            <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'padding-top', null, true);"/>
          </menulist>
          <spacer flex="1"/>
          <menulist editable="true" style="width: 8em"
                    id="topEditableMenulist"
                    oninput="ChangeValueOnInput(this, 'top', null);">
            <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'top', null, true);"/>
          </menulist>
        </row>
        <row align="center">
          <label value="&left.label;"/>
          <menulist editable="true" style="width: 8em"
                    id="marginleftEditableMenulist"
                    oninput="ChangeValueOnInput(this, 'margin-left', null);">
            <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'margin-left', null, true);"/>
          </menulist>
          <spacer flex="1"/>
          <menulist editable="true" style="width: 8em"
                    id="paddingleftEditableMenulist"
                    oninput="ChangeValueOnInput(this, 'padding-left', null);">
            <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'padding-left', null, true);"/>
          </menulist>
          <spacer flex="1"/>
          <menulist editable="true" style="width: 8em"
                    id="leftEditableMenulist"
                    oninput="ChangeValueOnInput(this, 'left', null);">
            <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'left', null, true);"/>
          </menulist>
        </row>
        <row align="center">
          <label value="&right.label;"/>
          <menulist editable="true" style="width: 8em"
                    id="marginrightEditableMenulist"
                    oninput="ChangeValueOnInput(this, 'margin-right', null);">
            <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'margin-right', null, true);"/>
          </menulist>
          <spacer flex="1"/>
          <menulist editable="true" style="width: 8em"
                    id="paddingrightEditableMenulist"
                    oninput="ChangeValueOnInput(this, 'padding-right', null);">
            <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'padding-right', null, true);"/>
          </menulist>
          <spacer flex="1"/>
          <menulist editable="true" style="width: 8em"
                    id="rightEditableMenulist"
                    oninput="ChangeValueOnInput(this, 'right', null);">
            <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'right', null, true);"/>
          </menulist>
        </row>
        <row align="center">
          <label value="&bottom.label;"/>
          <menulist editable="true" style="width: 8em"
                    id="marginbottomEditableMenulist"
                    oninput="ChangeValueOnInput(this, 'margin-bottom', null);">
            <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'margin-bottom', null, true);"/>
          </menulist>
          <spacer flex="1"/>
          <menulist editable="true" style="width: 8em"
                    id="paddingbottomEditableMenulist"
                    oninput="ChangeValueOnInput(this, 'padding-bottom', null);">
            <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'padding-bottom', null, true);"/>
          </menulist>
          <spacer flex="1"/>
          <menulist editable="true" style="width: 8em"
                    id="bottomEditableMenulist"
                    oninput="ChangeValueOnInput(this, 'bottom', null);">
            <menupopup onpopupshowing="InitLengthUnitMenuPopup(this, 'bottom', null, true);"/>
          </menulist>
        </row>
      </rows>
    </grid>
  </vbox>


    <!-- AURAL TAB PANEL-->
  <vbox id="auralTabPanel">
    <hbox align="center">
      <label value="&volume.label;"/>
      <scrollbar flex="1"
          id="volumeScrollbar"
          align="horizontal"
          curpos="500"
          maxpos="1000"
          increment="10"
          pageincrement="100"/>
      <menulist editable="true" style="width: 8em"
                id="volumeMenulist"
                oninput="ChangeValueOnInput(this, 'volume', null); UpdateScrollbar(this, 'volumeScrollbar');">
        <menupopup>
          <menuitem label="&xsoftVolume.label;"/>
          <menuitem label="&softVolume.label;"/>
          <menuitem label="&mediumVolume.label;"/>
          <menuitem label="&loudVolume.label;"/>
          <menuitem label="&xloudVolume.label;"/>
        </menupopup>
      </menulist>
      <checkbox id="muteVolumeCheckbox"
                oncommand="MuteVolume(this)"
                label="&muteVolume.label;"/>
    </hbox>
    <separator class="groove"/>
    <grid flex="1">
      <columns><column/><column/><column flex="1"/><column/><column/><column/></columns>
      <rows>
        <row align="center">
          <label value="&speak.label;"/>
          <menulist id="speakMenulist"
                    oncommand="DoMenulistCommand(this, 'speak', null);">
            <menupopup>
              <menuitem label="&unspecifiedValue.label;"
                        id="unspecifiedSpeakMenu"
                        value=''/>
              <menuseparator/>
              <menuitem label="&noneSpeak.label;"
                        id="noneSpeakMenu"
                        value='none'/>
              <menuitem label="&normalSpeak.label;"
                        id="normalSpeakMenu"
                        value='normal'/>
              <menuitem label="&spelloutSpeak.label;"
                        id="spelloutSpeakMenu"
                        value='spell-out'/>
            </menupopup>
          </menulist>
          <spacer flex="1"/>
          <label value="&speechRate.label;"/>
          <menulist editable="true"
                    id="speechRateMenulist"
                    oncommand="DoMenulistCommand(this, 'speak', null);">
            <menupopup>
              <menuitem label="&unspecifiedValue.label;"
                        id="unspecifiedSpeechRateMenu"
                        value=''/>
              <menuseparator/>
              <menuitem label="&slowerSpeechRate.label;"
                        id="slowerSpeechRateMenu"
                        value='slower'/>
              <menuitem label="&fasterSpeechRate.label;"
                        id="fasterSpeechRateMenu"
                        value='faster'/>
              <menuseparator/>
              <menuitem label="&xslowSpeechRate.label;"
                        id="xslowSpeechRateMenu"
                        value='x-slow'/>
              <menuitem label="&slowSpeechRate.label;"
                        id="slowSpeechRateMenu"
                        value='slow'/>
              <menuitem label="&mediumSpeechRate.label;"
                        id="mediumSpeechRateMenu"
                        value='medium'/>
              <menuitem label="&fastSpeechRate.label;"
                        id="fastSpeechRateMenu"
                        value='fast'/>
              <menuitem label="&xfastSpeechRate.label;"
                        id="xfastSpeechRateMenu"
                        value='x-fast'/>
            </menupopup>
          </menulist>
        </row>
        <!-- WORK IN PROGRESS UNDER THIS LINE -->
        <row align="center">
          <label value="Pause before:"/>
          <textbox/>
          <spacer/>
          <label value="Cue before:"/>
          <textbox id="cueBeforeInput"
                   oninput=""
                   flex="1"/>
          <!-- from eddialogoverlay.Xul -->
          <button label="Choose file" oncommand="chooseFile('sound', 'cueBeforeInput')"/>
        </row>
        <row align="center">
          <label value="Pause after:"/>
          <textbox/>
          <spacer/>
          <label value="Cue after:"/>
          <textbox id="cueAfterInput"
                   oninput=""
                   flex="1"/>
          <!-- from eddialogoverlay.Xul -->
          <button label="Choose file" oncommand = "chooseFile('sound', 'cueAfterInput')"/>
        </row>
      </rows>
    </grid>
  </vbox>

</overlay>