<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<!DOCTYPE dialog SYSTEM "chrome://xtrastuff/locale/xtrastuff.dtd">
<!--
 Translation of the above 'Document Type Declaration' ('DTDec'):
 DOCTYPE:	The 'doctype', or set of markup declarations that provide a grammar (element types, entities, etc.) for
 			this class of documents.
 overlay:	Specifies the root element of this document; here, it has the tagname 'overlay'.  Although somewhat redundant,
 			this MUST match the tagname of the root element of this document.  This root element will usually appear shortly
 			after the DOCTYPE declaration.
 SYSTEM:	Says that the following string is a reference to a local, or 'system' file.  An alternative to this is to
 			reference a 'formal public identifier', for which you would use the keyword 'PUBLIC'.
 "...":		Is the file (or identifier) being referenced; here, the referenced file contains entities with appropriate
 			locale strings.
-->

<window	title="Width test dialog"
		style="overflow:auto;"
		xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
		
		<!-- Container, to be able to have scrollbars for the window's content, if desired. -->
		<box orient="vertical" style="overflow:auto;" flex="1">
			<hbox style="background-color:#ff0000;">
				<description flex="1" style="background-color:#00ff00;">Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me</description>
				<spacer flex="99999"/>
			</hbox>

			<spacer style="height:4em;"/>

			<hbox style="background-color:#ff0000;">
				<description flex="0" style="background-color:#00ff00; width:45em;">Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me Wrap me</description>
				<spacer flex="99999"/>
			</hbox>
			
			<spacer style="height:4em;"/>
			
			<radiogroup flex="1" id="rgrpTabClose" orient="vertical">
				<radio flex="1" id="radioTabEvery" value="0" label="Close button on every tab Close button on every tab"/>
				<radio flex="1" id="radioTabActive" value="1" label="Close button on active tab Close button on active tab"/>
				<radio flex="1" id="radioTabRight" value="2" label="Close button at the right of the tab bar Close button at the right of the tab bar"/>
				<radio flex="1" id="radioTabNone" value="3" label="Remove all tab close buttons Remove all tab close buttons"/>
			</radiogroup>
			
			<spacer style="height:4em;"/>
			
			<description>Boxes:</description>
			<description>With width="1":</description>
			<hbox equalsize="always">
				<vbox width="1" flex="1" style="background-color:#00ff00;">
					<description>
						This is a very long description that makes the left vbox wider than the right one, unless a 50% width is enforced for both vboxes.  Lots of text is in this vbox, lots lots lots lots lots lots.
					</description>
					<button label="Very long button label indeed, takes lots of space"/>
				</vbox>
				<vbox width="1" flex="1" style="background-color:#ff0000;">
					<label>blah</label>
				</vbox>
			</hbox>
			
			<spacer style="height:4em;"/>
			
			<description>Without:</description>
			<hbox>
				<vbox flex="1" style="background-color:#00ff00;">
					<description>
						This is a very long description that makes the left vbox wider than the right one, unless a 50% width is enforced for both vboxes.  Lots of text is in this vbox, lots lots lots lots lots lots.
					</description>
					<button label="Very long button label indeed, takes lots of space"/>
				</vbox>
				<vbox flex="1" style="background-color:#ff0000;">
					<description>
						Small text description.
					</description>
					<button label="Small"/>
				</vbox>
			</hbox>
			
			<spacer style="height:4em;"/>
					
			<description>Grids:</description>
			<description>Using width="1":</description>
			<grid>
				<columns>
					<column flex="1" width="1"/>
					<column flex="1" width="1"/>
				</columns>
				<rows>
					<row>
						<!-- Column 1 -->
						<vbox style="background-color:#00ff00;">
							<description>
								This is a very long description that makes the left vbox wider than the right one, unless a 50% width is enforced for both vboxes.  Lots of text is in this vbox, lots lots lots lots lots lots.
							</description>
							<button label="Very long button label indeed, takes lots of space"/>
						</vbox>
						
						<!-- Column 2 -->
						<vbox style="background-color:#ff0000;">
							<description>
								Small text description.
							</description>
							<button label="Small"/>
						</vbox>
					</row>
				</rows>
			</grid>
			
			<spacer style="height:4em;"/>
			
			<description>Using style="width:50%":</description>
			<grid>
				<columns>
					<column flex="1" style="width:50%"/>
					<column flex="1" style="width:50%"/>
				</columns>
				<rows>
					<row>
						<!-- Column 1 -->
						<vbox style="background-color:#00ff00;">
							<description>
								This is a very long description that makes the left vbox wider than the right one, unless a 50% width is enforced for both vboxes.  Lots of text is in this vbox, lots lots lots lots lots lots.
							</description>
							<button label="Very long button label indeed, takes lots of space"/>
						</vbox>
						
						<!-- Column 2 -->
						<vbox style="background-color:#ff0000;">
							<description>
								Small text description.
							</description>
							<button label="Small"/>
						</vbox>
					</row>
				</rows>
			</grid>
		</box>
</window>
