<?xml version="1.0"?>

<!DOCTYPE overlay [
  <!ENTITY % csspropertiesDTD SYSTEM "chrome://cssproperties/locale/cssproperties.dtd">
  %csspropertiesDTD;
  <!ENTITY % backgrounditemDTD SYSTEM "chrome://cssproperties/locale/backgrounditem.dtd" >
  %backgrounditemDTD;
]>

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

  <script type="application/x-javascript"  src="chrome://cssproperties/content/transforms.js" />

  <vbox id="propertiesBox">
      <hbox align="center"
            class="csspropertiesHeader"
            context="sectionHeaderContext"
            id="transformsSectionHeader"
            onclick="ToggleSection(event, this)"
            position="17">
        <image />
        <label value="&transformsSectionHeader.label;"/>
      </hbox>

      <vbox class="section" id="transformsSection" position="18">
        <grid>
          <columns>
            <column/>
            <column/>
            <column/>
            <column/>
            <column/>
            <column/>
            <column/>
          </columns>
          <rows>
            <row align="center">
              <spacer/>
              <label value="X" style="text-align: center"/>
              <spacer/>
              <label value="Y" style="text-align: center"/>
              <spacer/>
              <label value="Z" style="text-align: center"/>
            </row>
            <row align="center">
              <label value="&transformOrigin.label;"
                   class="text-link"
                   href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin"
                   tooltiptext="transform-origin"/>
              <menulist id="transformOriginXMenulist" editable="true"
                        bgtype="csslength" units='% px pt cm in mm pc em ex rem ch' unsigned="true"
                        oncommand="onLengthMenulistCommand(this, '% px pt cm in mm pc em ex rem ch', 'left center right', true, ReapplyTransforms)"
                        oninput="onLengthMenulistCommand(this, '% px pt cm in mm pc em ex rem ch', 'left center right', true, ReapplyTransforms)">
                <menupopup anonid="transformOriginXMenupopup"
                           onpopupshowing="PopulateLengths(this, '% px pt cm in mm pc em ex rem ch')">
                  <menuseparator/>
                  <menuitem label="&leftTransformOrigin.label;" value="left"/>
                  <menuitem label="&centerTransformOrigin.label;" value="center"/>
                  <menuitem label="&rightTransformOrigin.label;" value="right"/>
                </menupopup>
              </menulist>
              <menulist id="transformOriginYMenulist" editable="true"
                        bgtype="csslength" units='% px pt cm in mm pc em ex rem ch' unsigned="true"
                        oncommand="onLengthMenulistCommand(this, '% px pt cm in mm pc em ex rem ch', 'left center right', true, ReapplyTransforms)"
                        oninput="onLengthMenulistCommand(this, '% px pt cm in mm pc em ex rem ch', 'left center right', true, ReapplyTransforms)">
                <menupopup anonid="transformOriginYMenupopup"
                           onpopupshowing="PopulateLengths(this, '% px pt cm in mm pc em ex rem ch')">
                  <menuseparator/>
                  <menuitem label="&topTransformOrigin.label;" value="top"/>
                  <menuitem label="&centerTransformOrigin.label;" value="center"/>
                  <menuitem label="&bottomTransformOrigin.label;" value="bottom"/>
                </menupopup>
              </menulist>
              <menulist id="transformOriginZMenulist" editable="true"
                        bgtype="csslength" units='% px pt cm in mm pc em ex rem ch' unsigned="true"
                        oncommand="onLengthMenulistCommand(this, 'px pt cm in mm pc em ex rem ch', '', true, ReapplyTransforms)"
                        oninput="onLengthMenulistCommand(this, 'px pt cm in mm pc em ex rem ch', '', true, ReapplyTransforms)">
                <menupopup anonid="transformOriginZMenupopup"
                           onpopupshowing="PopulateLengths(this, 'px pt cm in mm pc em ex rem ch')"/>
              </menulist>
            </row>

            <row align="center">
              <label value="&perspectivOrigin.label;"
                   class="text-link"
                   href="https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin"
                   tooltiptext="perspective-origin"/>
              <menulist id="perspectiveOriginXMenulist" editable="true"
                        bgtype="csslength" units='% px pt cm in mm pc em ex rem ch' unsigned="true"
                        oncommand="onLengthMenulistCommand(this, '% px pt cm in mm pc em ex rem ch', 'left center right', true, ReapplyTransforms)"
                        oninput="onLengthMenulistCommand(this, '% px pt cm in mm pc em ex rem ch', 'left center right', true, ReapplyTransforms)">
                <menupopup anonid="perspectiveOriginXMenupopup"
                           onpopupshowing="PopulateLengths(this, '% px pt cm in mm pc em ex rem ch')">
                  <menuseparator/>
                  <menuitem label="&leftTransformOrigin.label;" value="left"/>
                  <menuitem label="&centerTransformOrigin.label;" value="center"/>
                  <menuitem label="&rightTransformOrigin.label;" value="right"/>
                </menupopup>
              </menulist>
              <menulist id="perspectiveOriginYMenulist" editable="true"
                        bgtype="csslength" units='% px pt cm in mm pc em ex rem ch' unsigned="true"
                        oncommand="onLengthMenulistCommand(this, '% px pt cm in mm pc em ex rem ch', 'left center right', true, ReapplyTransforms)"
                        oninput="onLengthMenulistCommand(this, '% px pt cm in mm pc em ex rem ch', 'left center right', true, ReapplyTransforms)">
                <menupopup anonid="perspectiveOriginYMenupopup"
                           onpopupshowing="PopulateLengths(this, '% px pt cm in mm pc em ex rem ch')">
                  <menuseparator/>
                  <menuitem label="&topTransformOrigin.label;" value="top"/>
                  <menuitem label="&centerTransformOrigin.label;" value="center"/>
                  <menuitem label="&bottomTransformOrigin.label;" value="bottom"/>
                </menupopup>
              </menulist>
            </row>

            <row align="center" animatable="false">
              <label value="&perspectiveDepth.label;"
                   class="text-link"
                   href="https://developer.mozilla.org/en-US/docs/Web/CSS/perspective"
                   tooltiptext="perspective"/>
              <menulist id="perspectiveMenulist" editable="true"
                        bgtype="csslength" units='% px pt cm in mm pc em ex rem ch' unsigned="true"
                        oncommand="onLengthMenulistCommand(this, 'px pt cm in mm pc em ex rem ch', 'none', true, ReapplyTransforms)"
                        oninput="onLengthMenulistCommand(this, 'px pt cm in mm pc em ex rem ch', 'none', true, ReapplyTransforms)">
                <menupopup anonid="perspectiveMenupopup"
                           onpopupshowing="PopulateLengths(this, 'px pt cm in mm pc em ex rem ch')">
                  <menuseparator/>
                  <menuitem label="&perspectiveNone.label;" value="none"/>
                </menupopup>
              </menulist>
            </row>

            <row align="center" animatable="false">
              <label value="&transformStyle.label;"
                   class="text-link"
                   href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style"
                   tooltiptext="transform-style"/>
              <hbox align="center">
                <toolbarbutton class="multibutton" label="&transformStyleFlat.label;"
                               value="flat" property="transform-style" type="checkbox"
                               id="transformStyleFlatButton" group="transform-style"
                               oncommand="ToggleProperty(this)"/>
                <toolbarbutton class="multibutton" label="&transformStyle3D.label;"
                               value="preserve-3D" property="transform-style" type="checkbox"
                               id="transformStyle3DButton" group="transform-style"
                               oncommand="ToggleProperty(this)"/>
              </hbox>
            </row>

            <row align="center" animatable="false">
              <label value="&backfaceVisibility.label;"
                   class="text-link"
                   href="https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility"
                   tooltiptext="backface-visibility"/>
              <hbox align="center">
                <toolbarbutton class="multibutton" label="&backfaceVisibilityVisible.label;"
                               value="visible" property="backface-visibility" type="checkbox"
                               id="backfaceVisibilityVisibleButton" group="backface-visibility"
                               oncommand="ToggleProperty(this)"/>
                <toolbarbutton class="multibutton" label="&backfaceVisibilityHidden.label;"
                               value="hidden" property="backface-visibility" type="checkbox"
                               id="backfaceVisibilityHiddenButton" group="backface-visibility"
                               oncommand="ToggleProperty(this)"/>
              </hbox>
            </row>
          </rows>
        </grid>

        <richlistbox id="transformsRichlistbox" rows="6"
                     onselect="OnTransformSelect(this)"/>

        <hbox class="listboxBg">
          <toolbarbutton id="addTransformButton" class="listboxBgPlusButton" type="menu"
                         oncommand="AddTransform(event)">
            <menupopup id="addTransformMenupopup">
              <menuitem label="&rotation.label;"    value="rotate"/>
              <menuitem label="&translation.label;" value="translate3d"/>
              <menuitem label="&skew.label;"        value="skew"/>
              <menuitem label="&scale.label;"       value="scale3d"/>
              <menuseparator/>
              <menuitem label="&perspective.label;" value="perspective"/>
              <menuitem label="&rotation3D.label;"  value="rotate3d"/>
            </menupopup>
          </toolbarbutton>
          <toolbarbutton id="removeTransformButton" class="listboxBgMinusButton"
                         disabled="true"
                         oncommand="DeleteTransform()"/>
          
        </hbox>
      </vbox>
  </vbox>
</overlay>
