<?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="colorsOverlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

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

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

      <vbox class="section" id="colorsSection" position="6">
        <grid animatable="true">
          <columns><column/><column flex="1"/></columns>
          <rows>
            <cssproperty property="color"
                         grammar="color(true)"
                         style="margin-bottom: 5px; -moz-box-align: center">
              <l10n>
                color=&color.label;
                url=https://developer.mozilla.org/en-US/docs/Web/CSS/color
              </l10n>
            </cssproperty>

            <cssproperty property="background-color"
                         grammar="color(true)"
                         style="margin-bottom: 5px; -moz-box-align: center">
              <l10n>
                background-color=&bgColor.label;
                url=https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
              </l10n>
            </cssproperty>

            <row align="top">
              <label value="&backgrounds.label;"/>
              <vbox flex="1">
                <richlistbox id="backgroundsRichlistbox" rows="6" class="listboxBg"
                             onselect="OnBackgroundSelect(this)"/>
                <hbox class="listboxBg">
                  <toolbarbutton id="addBackgroundButton" class="listboxBgPlusButton" type="menu"
                                 oncommand="AddBackground(event)">
                    <menupopup id="addBackgroundMenupopup">
                      <menuitem label="&addBackgroundLinearGradientMenuitem.label;" value="linear-gradient"/>
                      <menuitem label="&addBackgroundRadialGradientMenuitem.label;" value="radial-gradient"/>
                      <menuseparator/>
                      <menuitem label="&addBackgroundImageMenuitem.label;" value="image"/>
                    </menupopup>
                  </toolbarbutton>
                  <toolbarbutton id="removeBackgroundButton" class="listboxBgMinusButton"
                                 disabled="true"
                                 oncommand="DeleteBackground()"/>
                  
                </hbox>
              </vbox>
            </row>
          </rows>
        </grid>
      </vbox>
  </vbox>
</overlay>
