gecko-dev/xpfe/browser/samples/tab.xul

<?xml version="1.0"?> 

<!DOCTYPE window> 

<window style="height: 100%; width: 100%;" 
xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 

<vbox flex="1">
  <tabbox orient="vertical" flex="100%" >
     <tabs orient="horizontal">
      <tab selected="true" label="centered"/>
      <tab label="percent"/>
      <tab label="html"/>
      <tab><html:img src="resource:/res/toolbar/stop.gif"/></tab>
      <tab label="native"/>
      <tab label="iframe"/>
      <tab label="dialog"/>
      <spacer flex="1"/>
     </tabs>
   
    <tabpanels flex="100%" style="border: 2px outset gray">

       <!-- tab 1 -->
       <hbox>
         <spacer flex="100%"/> 
         <vbox> 
          <spacer flex="100%"/> 
                <button class="push" label="centered"/>
          <!--html:button>This is a test</html:button-->
          <spacer flex="100%"/> 
         </vbox> 
         <spacer flex="100%"/> 
      </hbox> 

      <!-- tab2 -->
      <hbox>
          <button class="push" label="10%" flex="10%"/>
            <button class="push" label="20%" flex="20%"/>
          <button class="push" label="30%" flex="30%"/>
          <button class="push" label="40%" flex="40%"/>
      </hbox> 

            <!-- tab3 -->
      <html:div>
        This is just some basic html.
                                <html:input type="text" value="text" flex="100%"/>
      </html:div>

            <!-- tab4 -->
      <toolbox>  
         <toolbar>
          <button id="back-button" align="bottom" label="Back"/>  
          <button src="resource:/res/toolbar/forward.gif" align="bottom" label="Forward"/>
          <button src="resource:/res/toolbar/reload.gif" align="bottom" label="Reload"/>
          <button src="resource:/res/toolbar/stop.gif" align="bottom" label="Stop"/>
          <button src="resource:/res/toolbar/home.gif" align="bottom" label="Home"/>
          <button src="resource:/res/toolbar/print.gif" align="bottom" label="Print"/> 
        
                  <spacer flex="100%"/>

            <button src="resource:/res/throbber/anims00.gif"/>
    
        </toolbar>

        <toolbar>
          <button src="resource:/res/toolbar/location.gif" label="Mozilla" />
          <button src="resource:/res/toolbar/location.gif" label="ABC News"/>
        </toolbar>
      </toolbox>

          <!-- tab 5 -->
          <vbox>
              <html:input type="text" value="text" flex="100%"/>
          </vbox>

          <html:iframe src="http://www.yahoo.com" />

      <!-- tab 6 -->
      <vbox>
      <html:div>
        Category:
      </html:div>
      <hbox flex="100%">
           <html:div style="width: 100px; background-color: rgb(255,255,255)">
            table
           </html:div>

        <vbox flex="100%">
          <hbox style="margin: 10px; margin-top: 0; margin-bottom: 0; background-color: #8080c0; color: white">
             <html:div><html:B>Navigator</html:B></html:div>
               <spacer flex="100%"/>
             <html:div>Specify you preferences for browsing the web</html:div>
          </hbox>

          <vbox style="margin: 10px; padding: 10px; border: 2px groove white">
             <html:div><html:input type="radio"/>Blank Page  </html:div>
             <html:div><html:input type="radio"/>Home Page   </html:div>
             <html:div><html:input type="radio"/>Last Visited</html:div>
          </vbox>

          <vbox style="margin: 10px; padding: 10px; border: 2px groove white">
             <html:div>Clicking the home button will take you to this page.</html:div>
             <hbox>
              <html:div>Location: </html:div> 
              <html:input type="text" flex="100%"/>
             </hbox>
               <hbox>
              <spacer flex="100%"/>
              <html:input disabled="true" type="button" value="Use current page"/>
              <spacer style="width:10px"/>
              <html:input type="button" value="Browse"/>
             </hbox>
          </vbox>

          <vbox style="margin: 10px; padding: 10px; border: 2px groove white">
             <html:div>History is a list a pages you have previously visited.</html:div>
               <hbox>
               <html:div>Pages in history expire in: <html:input type="text" value="9"/> days. </html:div>
               <spacer flex="100%"/>
               <html:input type="button" value="Clear History"/>
             </hbox>
            <hbox>
               <html:div>Clear the list of sites on the location bar.</html:div>
               <spacer flex="100%"/>
               <html:input type="button" value="Clear Location Bar"/>
             </hbox>
          </vbox>

          <spacer flex="100%"/>

        </vbox>
        
      </hbox>
        <hbox style="margin: 5px;">
           <spacer flex="100%"/>
           <html:input type="button" value="Ok"/>
           <spacer style="width:10px"/>
           <html:input type="button" value="Cancel"/>
           <spacer style="width:10px"/>
           <html:input type="button" value="Help"/>
         </hbox>
    </vbox>


     </tabpanels> 
  </tabbox>
</vbox>

</window>