The Tor Browser / file revision

 <?xml version="1.0"?> 

 <!-- This Source Code Form is subject to the terms of the Mozilla Public

    - License, v. 2.0. If a copy of the MPL was not distributed with this

    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 

 <?xml-stylesheet href="gridsample.css" type="text/css"?> 

 <!DOCTYPE window> 

 <window orient="vertical" 

         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"

 		onload="start()"> 

 <script>

    var selected;

    var count = 0;

    function isCell(box)

    {

      if (box.localName == "row" || 

 	     box.localName == "column" ||

 		 box.localName == "rows" ||

 		 box.localName == "columns" ||

 		 box.localName == "grid")

 		 return false;

 	 return true;

    }

    function start()

    {

       selectIt(window.document.getElementById("rows"));

    }

    function selectIt(box)

    {

      if (!box)

 	   return;

      var a = box.getAttribute("selected");

 	 if (a != "true") {

 	   box.setAttribute("selected","true");

   	   if (selected)

 	      selected.setAttribute("selected","false");

 	   selected = box;

      }

    }

    function addCellSelectionHandle(box)

    {

 	 box.setAttribute("oncommand", "selectIt(this);");

    }

    function addRowColumnSelectionHandle(box)

    {

 	 box.setAttribute("onclick", "selectIt(this);");

    }

    function createButton(str)

    {

 	 var b = document.createElement("button");

 	 b.setAttribute("label", str+count);

 	 count++;

 	 addCellSelectionHandle(b);

 	 return b;

    }

    function createRow()

    {

 	 var b = document.createElement("row");

  	 b.setAttribute("dynamic","true");

 	 addRowColumnSelectionHandle(b);

 	 return b;

    }

    function createColumn()

    {

 	 var b = document.createElement("column");

 	 b.setAttribute("dynamic","true");

 	 addRowColumnSelectionHandle(b);

 	 return b;

    }

    function createText(str)

    {

 	 var text = document.createElement("text");

 	 text.setAttribute("value", str+count);

 	 count++;

 	 text.setAttribute("style", "font-size: 40pt");

 	 addCellSelectionHandle(text);

 	 return text;

    }

    function appendElement(element, prepend)

    {

      if (!selected)

 	    return;

      setUserAttribute(element);

 	 if (selected.localName == "rows") 

 	   appendRow(false);

      else if (selected.localName == "columns")

 	   appendColumn(false);

 	 if (selected.localName == "row" || selected.localName == "column" ) { // is row or column

 		 selected.appendChild(element); 

 	 } else {

 		  var parent = selected.parentNode;

 		  if (prepend)

 		    parent.insertBefore(element, selected);	 

 		  else {

 		    var next = selected.nextSibling;

 			if (next)

 		      parent.insertBefore(element,next);

 			else

 			  parent.appendChild(element);

 		  }

 	 }

 	 selectIt(element);

    }

    function getRows(box)

    {

       return window.document.getElementById("rows");

    }

    function getColumns(box)

    {

       return window.document.getElementById("columns");

    }

    function setUserAttribute(element)

    {

    	 var attributeBox = document.getElementById("attributebox");

 	 var valueBox = document.getElementById("valuebox");

 	 var attribute = attributeBox.value;

 	 var value = valueBox.value;

 	 if (attribute != "")

 	   element.setAttribute(attribute,value);

    }

    function appendRowColumn(rowColumn, prepend)

    {

      if (!selected)

 	    return;

      setUserAttribute(rowColumn); 

      var row = rowColumn;

 	 // first see what we are adding.

 	 if (isCell(selected)) { // if cell then select row/column

 	   selectIt(selected.parentNode);

 	 }

 	 if (selected.localName == "row" || selected.localName == "rows")

 	   if (row.localName == "column") {

 	     selectIt(getColumns(selected)); 

 		 dump("Selecting the column")

 		 dump("Selected="+selected.localName);

 		 }

 	 if (selected.localName == "column" || selected.localName == "columns")

 	   if (row.localName == "row")

 	     selectIt(getRows(selected));

 	 if (selected.localName == "rows" || selected.localName == "columns" ) 

 	 { // if rows its easy

 		 selected.appendChild(row); 

 	 } else {

 		  var parent = selected.parentNode;

 		  if (prepend)

 		    parent.insertBefore(row, selected);	 

 		  else {

 		    var next = selected.nextSibling;

 			if (next)

 		      parent.insertBefore(row,next);

 			else

 			  parent.appendChild(row);

 		  }

 	 }

      selectIt(row);

    }

  function appendRow(prepend)

  {

    var row = createRow();

    appendRowColumn(row,prepend);

  }

  function appendColumn(prepend)

  {

    var column = createColumn();

    appendRowColumn(column,prepend);

  }

  function selectRows()

  {

     var rows = getRows();

 	if (rows.firstChild)

       selectIt(rows.firstChild);

 	else

 	  selectIt(rows);

  }

  function selectColumns()

  {

     var columns = getColumns();

 	if (columns.firstChild)

       selectIt(columns.firstChild);

 	else

 	  selectIt(columns);

  }

  function nextElement()

  {

    if (!selected)

      return;

    selectIt(selected.nextSibling);

  }

  function previousElement()

  {

    if (!selected)

      return;

    selectIt(selected.previousSibling);

  }

  function selectRow()

  {

    if (!selected)

      return;

    if (selected.localName == "row")

      return;

    if (isCell(selected)) {

      if (selected.parentNode.localName == "row")

        selectIt(selected.parentNode);

    }

  }

  function selectColumn()

  {

    if (!selected)

      return;

    if (selected.localName == "column")

      return;

    if (isCell(selected)) {

      if (selected.parentNode.localName == "column")

        selectIt(selected.parentNode);

    }

  }

  function collapseGrid()

  {

 	 var grid = document.getElementById("grid");

 	 var collapsed = grid.getAttribute("collapsed");

 	 if (collapsed == "")

 	   grid.setAttribute("collapsed","true");

 	 else

    	   grid.setAttribute("collapsed","");

  }

  function collapseElement()

  {

    if (selected) {

 	 var collapsed = selected.getAttribute("collapsed");

 	 if (collapsed == "")

 	   selected.setAttribute("collapsed","true");

 	 else

    	   selected.setAttribute("collapsed","");

 	}

  }

 </script>

     <hbox flex="1" style="border: 2px inset gray; overflow: auto">

 	 <vbox flex="1">

 	  <hbox>

 		<grid id="grid" style="border: 2px solid red;">

 		   <columns id="columns">

 		   </columns>

 		   <rows start="true" id="rows">

 		   </rows>

 		</grid>

 	    <spacer flex="1"/>

       </hbox>

  	    <spacer flex="1"/>

 	 </vbox>

     </hbox>

     <grid style="background-color: blue">

 	   <columns>

              <column flex="1"/> 

              <column flex="1"/>

              <column flex="1"/>             

              <column flex="1"/>

  	   </columns>

 	 <rows>

          <row>

 		  <button label="append row" oncommand="appendRow(false);"/>

 		  <button label="prepend row" oncommand="appendRow(true);"/>

 		  <button label="append column" oncommand="appendColumn(false);"/>

 		  <button label="prepend column" oncommand="appendColumn(true);"/>

 		 </row>

         <row>

 		 <button label="append button" oncommand="appendElement(createButton('button'),false);"/>

 		 <button label="prepend button" oncommand="appendElement(createButton('button'),true);"/>

 		 <button label="append text" oncommand="appendElement(createText('text'),false);"/>

 		 <button label="prepend text" oncommand="appendElement(createText('text'),true);"/>

         </row>

 		 <row>

  	     <button label="select rows" oncommand="selectRows()"/>

 	     <button label="select columns" oncommand="selectColumns()"/>

 		 <button label="next" oncommand="nextElement()"/>

 		 <button label="previous" oncommand="previousElement()"/>

         </row>

 	<hbox align="center">

  	     <button label="collapse/uncollapse grid" flex="1" oncommand="collapseGrid()"/>

  	     <button label="collapse/uncollapse element" flex="1" oncommand="collapseElement()"/>

         </hbox>

 	<hbox>

          <text value="attribute"/>

 		 <textbox id="attributebox" value="" flex="1"/>

          <text value="value"/>

 		 <textbox id="valuebox" value="" flex="2"/>

         </hbox>

        </rows>

 	</grid>

 </window>