Bug 201499, support editable tree cells, r=jan, sr=neil

2006-07-07 13:59:01 +00:00 · 2006-07-07 13:59:01 +00:00 · 69527fd4de
--- a/content/base/src/nsGkAtomList.h
+++ b/content/base/src/nsGkAtomList.h
@ -283,6 +283,7 @@ GK_ATOM(dropBefore, "dropBefore")
 GK_ATOM(dropOn, "dropOn")
 GK_ATOM(dt, "dt")
 GK_ATOM(editable, "editable")
+GK_ATOM(editing, "editing")
 GK_ATOM(editor, "editor")
 GK_ATOM(editorDisplayList, "EditorDisplay-List")
 GK_ATOM(element, "element")
--- a/layout/xul/base/src/tree/src/nsTreeBodyFrame.cpp
+++ b/layout/xul/base/src/tree/src/nsTreeBodyFrame.cpp
@ -1201,7 +1201,7 @@ nsTreeBodyFrame::GetCoordsForCellItem(PRInt32 aRow, nsITreeColumn* aCol, const n
    // X and Y coords, and a guess at the width and height. The width is the 
    // remaining width we have left to traverse in the cell, which will be the
    // widest possible value for the text rect, and the row height. 
-    nsRect textRect(cellX, cellRect.y, remainWidth, mRowHeight);
+    nsRect textRect(cellX, cellRect.y, remainWidth, cellRect.height);

    // Measure the width of the text. If the width of the text is greater than 
    // the remaining width available, then we just assume that the text has 
@ -1215,10 +1215,19 @@ nsTreeBodyFrame::GetCoordsForCellItem(PRInt32 aRow, nsITreeColumn* aCol, const n
    nscoord height;
    fm->GetHeight(height);

+    nsMargin textMargin;
+    textContext->GetStyleMargin()->GetMargin(textMargin);
+    textRect.Deflate(textMargin);
+
+    // Center the text. XXX Obey vertical-align style prop?
+    if (height < textRect.height) {
+      textRect.y += (textRect.height - height) / 2;
+      textRect.height = height;
+    }
+
    nsMargin bp(0,0,0,0);
    GetBorderPadding(textContext, bp);
-    
-    textRect.height = height + bp.top + bp.bottom;
+    textRect.height += bp.top + bp.bottom;

    rc->SetFont(fm);
    nscoord width;
@ -1880,6 +1889,10 @@ nsTreeBodyFrame::PrefillPropertyArray(PRInt32 aRowIndex, nsTreeColumn* aCol)
      mScratchArray->AppendElement(nsXULAtoms::odd);
    else
      mScratchArray->AppendElement(nsXULAtoms::even);
+
+    nsIContent* baseContent = GetBaseElement();
+    if (baseContent && baseContent->HasAttr(kNameSpaceID_None, nsXULAtoms::editing))
+      mScratchArray->AppendElement(nsXULAtoms::editing);
  }

  if (aCol) {
--- a/themes/classic/global/mac/tree.css
+++ b/themes/classic/global/mac/tree.css
@ -350,3 +350,24 @@ treechildren[alternatingbackground="true"]::-moz-tree-row(odd, selected, focus)
 treechildren[alternatingbackground="true"]::-moz-tree-cell-text(odd, selected, focus) {
  color: HighlightText;
 }
+
+/* ::::: editable tree ::::: */
+
+treechildren::-moz-tree-row(selected, editing) {
+  background-color: transparent;
+}
+
+treechildren::-moz-tree-cell-text(selected, editing) {
+  color: inherit;
+}
+
+.tree-input {
+  -moz-appearance: none;
+  border: 1px solid Highlight;
+  -moz-border-top-colors: Highlight;
+  -moz-border-bottom-colors: Highlight;
+  -moz-border-left-colors: Highlight;
+  -moz-border-right-colors: Highlight;
+  margin: 0 0 0 -3px;
+  padding: 1px;
+}
--- a/themes/classic/global/win/tree.css
+++ b/themes/classic/global/win/tree.css
@ -380,3 +380,25 @@ treechildren[alternatingbackground="true"]::-moz-tree-row(odd, selected, focus)
 treechildren[alternatingbackground="true"]::-moz-tree-cell-text(odd, selected, focus) {
  color: HighlightText;
 }
+
+/* ::::: editable tree ::::: */
+
+treechildren::-moz-tree-row(selected, editing) {
+  background-color: transparent;
+  border: none;
+}
+
+treechildren::-moz-tree-cell-text(selected, editing) {
+  color: inherit;
+}
+
+.tree-input {
+  -moz-appearance: none;
+  border: 1px solid Highlight;
+  -moz-border-top-colors: Highlight;
+  -moz-border-bottom-colors: Highlight;
+  -moz-border-left-colors: Highlight;
+  -moz-border-right-colors: Highlight;
+  margin: 0 0 0 -4px;
+  padding: 1px;
+}
--- a/themes/modern/global/tree.css
+++ b/themes/modern/global/tree.css
@ -349,3 +349,24 @@ treechildren.gridlines::-moz-tree-cell {
 treechildren.gridlines::-moz-tree-row {
  border: none;
 }
+
+/* ::::: editable tree ::::: */
+
+treechildren::-moz-tree-row(selected, editing) {
+  background-color: transparent;
+}
+
+treechildren::-moz-tree-cell-text(selected, editing) {
+  color: inherit;
+}
+
+.tree-input {
+  -moz-appearance: none;
+  border: 1px solid #C7D0D9;
+  -moz-border-top-colors: #C7D0D9;
+  -moz-border-bottom-colors: #C7D0D9;
+  -moz-border-left-colors: #C7D0D9;
+  -moz-border-right-colors: #C7D0D9;
+  margin: 0 0 0 -4px;
+  padding: 1px;
+}
--- a/toolkit/content/widgets/tree.xml
+++ b/toolkit/content/widgets/tree.xml
@ -21,7 +21,7 @@
 #else
          return aEvent.ctrlKey;
 #endif
-        ]]></body>       
+        ]]></body>
      </method>
    </implementation>
  </binding>
@ -29,9 +29,12 @@
  <binding id="tree" extends="chrome://global/content/bindings/tree.xml#tree-base">
    <content hidevscroll="true" hidehscroll="true">
      <children includes="treecols"/>
-      <xul:treerows class="tree-rows" flex="1" xbl:inherits="hidevscroll">
-        <children/>
-      </xul:treerows>
+      <xul:stack flex="1">
+        <xul:treerows class="tree-rows" flex="1" xbl:inherits="hidevscroll">
+          <children/>
+        </xul:treerows>
+        <xul:textbox anonid="input" class="tree-input" left="0" top="0" hidden="true"/>
+      </xul:stack>
      <xul:hbox xbl:inherits="collapsed=hidehscroll">
        <xul:scrollbar orient="horizontal" flex="1" increment="16"/>
        <xul:scrollcorner xbl:inherits="collapsed=hidevscroll"/>
@ -103,11 +106,29 @@
                onset="if (val) this.setAttribute('enableColumnDrag', 'true');
                       else this.removeAttribute('enableColumnDrag'); return val;"/>

+      <field name="mInputField">null</field>
+
+      <property name="inputField" readonly="true">
+        <getter><![CDATA[
+          if (!this.mInputField)
+            this.mInputField = document.getAnonymousElementByAttribute(this, "anonid", "input");
+          return this.mInputField;
+        ]]></getter>
+      </property>
+
      <property name="disableKeyNavigation"
                onget="return this.hasAttribute('disableKeyNavigation');"
                onset="if (val) this.setAttribute('disableKeyNavigation', 'true');
                       else this.removeAttribute('disableKeyNavigation'); return val;"/>

+      <field name="_editingRow">-1</field>
+      <field name="_editingColumn">null</field>
+
+      <property name="editingRow" readonly="true"
+                onget="return this._editingRow;"/>
+      <property name="editingColumn" readonly="true"
+                onget="return this._editingColumn;"/>
+
      <property name="_selectDelay" 
                onset="this.setAttribute('_selectDelay', val);"
                onget="return this.getAttribute('_selectDelay') || 50;"/>
@ -222,7 +243,7 @@
          }
        ]]></body>
      </method>
-      
+
      <property name="_cellSelType">
        <getter>
          <![CDATA[
@ -252,11 +273,87 @@
        ]]></body>
      </method>

+      <method name="startEditing">
+        <parameter name="row"/>
+        <parameter name="column"/>
+        <body>
+          <![CDATA[
+            if (row < 0 || row >= this.itemCount || !column)
+              return;
+            if (column.type != Components.interfaces.nsITreeColumn.TYPE_TEXT ||
+                column.cycler || !this.view.isEditable(row, column))
+              return;
+
+            if (this._editingColumn)
+              this.stopEditing();
+
+            var input = this.inputField;
+            input.hidden = false;
+
+            var box = this.treeBoxObject;
+            var outx = {}, outy = {}, outwidth = {}, outheight = {};
+            var coords = box.getCoordsForCellItem(row, column, "text",
+                                                  outx, outy, outwidth, outheight);
+
+            var style = window.getComputedStyle(input, "");
+            var topadj = parseInt(style.borderTopWidth) + parseInt(style.paddingTop);
+            input.top = outy.value - topadj;
+
+            var left = outx.value;
+            input.left = left;
+            input.height = outheight.value + topadj +
+                           parseInt(style.borderBottomWidth) +
+                           parseInt(style.paddingBottom);
+
+            coords = box.getCoordsForCellItem(row, column, "cell",
+                                              outx, outy, outwidth, outheight);
+            input.width = outwidth.value - (left - outx.value);
+
+            input.value = this.view.getCellText(row, column);
+            var selectText = function selectText() {
+              input.select();
+              input.inputField.focus();
+            }
+            setTimeout(selectText, 0);
+
+            this._editingRow = row;
+            this._editingColumn = column;
+
+            this.setAttribute("editing", "true");
+          ]]>
+        </body>
+      </method>
+
+      <method name="stopEditing">
+        <parameter name="accept"/>
+        <body>
+          <![CDATA[
+            if (!this._editingColumn)
+              return;
+
+            var input = this.inputField;
+            if (accept) {
+              var value = input.value;
+              this.view.setCellText(this._editingRow, this._editingColumn, value);
+            }
+            this._editingRow = -1;
+            this._editingColumn = null;
+
+            input.hidden = true;
+            input.value = "";
+            this.removeAttribute("editing");
+          ]]>
+        </body>
+      </method>
+
    </implementation>
    
    <handlers>
      <handler event="DOMMouseScroll" phase="capturing">
        <![CDATA[
+          if (this._editingColumn)
+            return;
+
          var rows = event.detail;
          if (rows == NSUIEvent.SCROLL_PAGE_UP)
            this.treeBoxObject.scrollByPages(-1);
@ -266,6 +363,7 @@
            this.treeBoxObject.scrollByLines(rows);
        ]]>
      </handler>
+      <handler event="select" phase="target" action="this.stopEditing(true);"/>
      <handler event="focus">
        <![CDATA[
          this.treeBoxObject.focused = true;
@ -279,9 +377,42 @@
        ]]>
      </handler>
      <handler event="blur" action="this.treeBoxObject.focused = false;"/>
-      <handler event="keypress" keycode="vk_enter" action="this.changeOpenState(this.currentIndex);"/>
-      <handler event="keypress" keycode="vk_return" action="this.changeOpenState(this.currentIndex);"/>
-      <handler event="keypress" keycode="vk_left">
+      <handler event="blur" phase="capturing"
+               action="if (event.originalTarget == this.inputField) this.stopEditing(true);"/>
+      <handler event="keypress" keycode="vk_enter">
+        <![CDATA[
+          if (this._editingColumn) {
+            this.stopEditing(true);
+            this.focus();
+            event.stopPropagation();
+          }
+          else {
+            this.changeOpenState(this.currentIndex);
+          }
+        ]]>
+      </handler>
+      <handler event="keypress" keycode="vk_return">
+        <![CDATA[
+          if (this._editingColumn) {
+            this.stopEditing(true);
+            this.focus();
+            event.stopPropagation();
+          }
+          else {
+            this.changeOpenState(this.currentIndex);
+          }
+        ]]>
+      </handler>
+      <handler event="keypress" keycode="vk_escape">
+        <![CDATA[
+          if (this._editingColumn) {
+            this.stopEditing(false);
+            this.focus();
+            event.stopPropagation();
+          }
+        ]]>
+      </handler>
+      <handler event="keypress" keycode="vk_left" phase="target">
        <![CDATA[
         var row = this.currentIndex;
         if (row < 0)
@ -322,7 +453,7 @@
         }
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_right">
+      <handler event="keypress" keycode="vk_right" phase="target">
        <![CDATA[
          var row = this.currentIndex;
          if (row < 0)
@ -371,7 +502,8 @@
          }
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_up" modifiers="accel any">
+      <handler event="keypress" keycode="vk_up"
+               modifiers="accel any" phase="target">
        <![CDATA[
         if (this._isAccelPressed(event) && this.view.selection.single) {
           this.treeBoxObject.scrollByLines(-1);
@ -401,7 +533,8 @@
         this.treeBoxObject.ensureRowIsVisible(c);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_down" modifiers="accel any">
+      <handler event="keypress" keycode="vk_down"
+               modifiers="accel any" phase="target">
        <![CDATA[
         if (this._isAccelPressed(event) && this.view.selection.single) {
           this.treeBoxObject.scrollByLines(1);
@ -431,7 +564,8 @@
         this.treeBoxObject.ensureRowIsVisible(c);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_up" modifiers="accel any, shift">
+      <handler event="keypress" keycode="vk_up"
+               modifiers="accel any, shift" phase="target">
        <![CDATA[
         if (this.view.selection.single)
           return;
@ -444,7 +578,8 @@
         this.treeBoxObject.ensureRowIsVisible(c - 1);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_down" modifiers="accel any, shift">
+      <handler event="keypress" keycode="vk_down"
+               modifiers="accel any, shift" phase="target">
        <![CDATA[
         if (this.view.selection.single)
           return;
@ -457,7 +592,8 @@
         this.treeBoxObject.ensureRowIsVisible(c + 1);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_page_up" modifiers="accel any">
+      <handler event="keypress" keycode="vk_page_up"
+               modifiers="accel any" phase="target">
        <![CDATA[
         if (this.pageUpOrDownMovesSelection == this._isAccelPressed(event)) {
           this.treeBoxObject.scrollByPages(-1);
@ -479,7 +615,8 @@
         this.view.selection.timedSelect(i, this._selectDelay);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_page_down" modifiers="accel any">
+      <handler event="keypress" keycode="vk_page_down"
+               modifiers="accel any" phase="target">
        <![CDATA[
         if (this.pageUpOrDownMovesSelection == this._isAccelPressed(event)) {
           this.treeBoxObject.scrollByPages(1);
@ -503,7 +640,8 @@
         this.view.selection.timedSelect(i, this._selectDelay);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_page_up" modifiers="accel any, shift">
+      <handler event="keypress" keycode="vk_page_up"
+               modifiers="accel any, shift" phase="target">
        <![CDATA[
         if (this.view.selection.single)
           return;
@ -524,7 +662,8 @@
         this.view.selection.rangedSelect(-1, i, this._isAccelPressed(event));
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_page_down" modifiers="accel any, shift">
+      <handler event="keypress" keycode="vk_page_down"
+               modifiers="accel any, shift" phase="target">
        <![CDATA[
         if (this.view.selection.single)
           return;
@ -547,9 +686,10 @@
         this.view.selection.rangedSelect(-1, i, this._isAccelPressed(event));
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_home" modifiers="accel any">
+      <handler event="keypress" keycode="vk_home"
+               modifiers="accel any" phase="target">
        <![CDATA[
-          if (this.view.rowCount == 0)
+         if (this.view.rowCount == 0)
           return;
         // Normal behaviour is to select the first row
         if (!this._isAccelPressed(event))
@ -560,7 +700,8 @@
         this.treeBoxObject.ensureRowIsVisible(0);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_end" modifiers="accel any">
+      <handler event="keypress" keycode="vk_end"
+               modifiers="accel any" phase="target">
        <![CDATA[
         var l = this.view.rowCount - 1;
         if (l < 0)
@ -574,7 +715,8 @@
         this.treeBoxObject.ensureRowIsVisible(l);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_home" modifiers="accel any, shift">
+      <handler event="keypress" keycode="vk_home"
+               modifiers="accel any, shift" phase="target">
        <![CDATA[
         if (this.view.selection.single)
           return;
@ -583,7 +725,8 @@
         this.treeBoxObject.ensureRowIsVisible(0);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_end" modifiers="accel any, shift">
+      <handler event="keypress" keycode="vk_end"
+               modifiers="accel any, shift" phase="target">
        <![CDATA[
         if (this.view.selection.single)
           return;
@ -595,6 +738,9 @@
      </handler>
      <handler event="keypress">
        <![CDATA[
+         if (this._editingColumn)
+           return;
+
         var c = this.currentIndex;
         if (event.charCode == ' '.charCodeAt(0)) {
           if (!this.view.selection.isSelected(c) ||
@ -871,12 +1017,19 @@
          return;
        var b = this.parentNode.treeBoxObject;
        var row = b.view.selection.currentIndex;
-        if (row == -1 || !b.view.isContainer(row))
-          return;
-
-         var col = {};
-         var obj = {};
-         b.getCellAt(event.clientX, event.clientY, {}, col, obj);
+         if (row == -1)
+           return;
+  
+          var col = {};
+          var obj = {};
+          b.getCellAt(event.clientX, event.clientY, {}, col, obj);
+  
+          if (this.parentNode.editable)
+            this.parentNode.startEditing(row, col.value);
+ 
+          if (!b.view.isContainer(row))
+            return;
+ 

         // Cyclers and twisties respond to single clicks, not double clicks
         if (col.value && !col.value.cycler && obj.value != "twisty")
@ -1154,6 +1307,7 @@
          }
          else {
            var tree = this.parentNode.parentNode;
+            tree.stopEditing(true);
            var menuitem = document.getAnonymousElementByAttribute(this, "anonid", "menuitem");
            if (event.originalTarget == menuitem) {
              tree.columns.restoreNaturalOrder();
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@ -551,7 +551,6 @@ treecolpicker {

 tree {
  -moz-box-orient: vertical;
-  -moz-user-select: none;
  min-width: 0px;
  min-height: 0px;
  width: 10px;
--- a/toolkit/themes/pinstripe/global/tree.css
+++ b/toolkit/themes/pinstripe/global/tree.css
@ -389,3 +389,24 @@ treechildren[alternatingbackground="true"]::-moz-tree-row(odd, selected, focus)
 treechildren[alternatingbackground="true"]::-moz-tree-cell-text(odd, selected, focus) {
  color: #FFFFFF;
 }
+
+/* ::::: editable tree ::::: */
+
+treechildren::-moz-tree-row(selected, editing) {
+  background-color: transparent;
+}
+
+treechildren::-moz-tree-cell-text(selected, editing) {
+  color: inherit;
+}
+
+.tree-input {
+  -moz-appearance: none;
+   border: 1px solid Highlight;
+  -moz-border-top-colors: Highlight;
+  -moz-border-bottom-colors: Highlight;
+  -moz-border-left-colors: Highlight;
+  -moz-border-right-colors: Highlight;
+  margin: 0 0 0 -3px;
+  padding: 1px;
+}
--- a/toolkit/themes/winstripe/global/tree.css
+++ b/toolkit/themes/winstripe/global/tree.css
@ -389,3 +389,25 @@ treechildren::-moz-tree-cell-text(Name, separator) {
 treechildren::-moz-tree-cell-text(Name, separator, selected, focus) {
  color: HighlightText;
 }
+
+/* ::::: editable tree ::::: */
+
+treechildren::-moz-tree-row(selected, editing) {
+  background-color: transparent;
+  border: none;
+}
+
+treechildren::-moz-tree-cell-text(selected, editing) {
+  color: inherit;
+}
+
+.tree-input {
+  -moz-appearance: none;
+  border: 1px solid Highlight;
+  -moz-border-top-colors: Highlight;
+  -moz-border-bottom-colors: Highlight;
+  -moz-border-left-colors: Highlight;
+  -moz-border-right-colors: Highlight;
+  margin: 0 0 0 -4px;
+  padding: 1px;
+}
--- a/xpfe/global/resources/content/bindings/tree.xml
+++ b/xpfe/global/resources/content/bindings/tree.xml
@ -16,9 +16,12 @@
  <binding id="tree" extends="chrome://global/content/bindings/tree.xml#tree-base">
    <content hidevscroll="true" hidehscroll="true">
      <children includes="treecols"/>
-      <xul:treerows class="tree-rows" flex="1" xbl:inherits="hidevscroll">
-        <children/>
-      </xul:treerows>
+      <xul:stack flex="1">
+        <xul:treerows class="tree-rows" flex="1" xbl:inherits="hidevscroll">
+          <children/>
+        </xul:treerows>
+        <xul:textbox anonid="input" class="tree-input" left="0" top="0" hidden="true"/>
+      </xul:stack>
      <xul:hbox xbl:inherits="collapsed=hidehscroll">
        <xul:scrollbar orient="horizontal" flex="1" increment="16"/>
        <xul:scrollcorner xbl:inherits="collapsed=hidevscroll"/>
@ -86,11 +89,29 @@
                onset="if (val) this.setAttribute('enableColumnDrag', 'true');
                       else this.removeAttribute('enableColumnDrag'); return val;"/>

+      <field name="mInputField">null</field>
+
+      <property name="inputField" readonly="true">
+        <getter><![CDATA[
+          if (!this.mInputField)
+            this.mInputField = document.getAnonymousElementByAttribute(this, "anonid", "input");
+          return this.mInputField;
+        ]]></getter>
+      </property>
+
      <property name="disableKeyNavigation"
                onget="return this.hasAttribute('disableKeyNavigation');"
                onset="if (val) this.setAttribute('disableKeyNavigation', 'true');
                       else this.removeAttribute('disableKeyNavigation'); return val;"/>

+      <field name="_editingRow">-1</field>
+      <field name="_editingColumn">null</field>
+
+      <property name="editingRow" readonly="true"
+                onget="return this._editingRow;"/>
+      <property name="editingColumn" readonly="true"
+                onget="return this._editingColumn;"/>
+
      <property name="_selectDelay" 
                onset="this.setAttribute('_selectDelay', val);"
                onget="return this.getAttribute('_selectDelay') || 50;"/>
@ -205,7 +226,7 @@
          }
        ]]></body>
      </method>
-      
+
      <property name="_cellSelType">
        <getter>
          <![CDATA[
@ -235,11 +256,87 @@
        ]]></body>
      </method>

+      <method name="startEditing">
+        <parameter name="row"/>
+        <parameter name="column"/>
+        <body>
+          <![CDATA[
+            if (row < 0 || row >= this.itemCount || !column)
+              return;
+            if (column.type != Components.interfaces.nsITreeColumn.TYPE_TEXT ||
+                column.cycler || !this.view.isEditable(row, column))
+              return;
+
+            if (this._editingColumn)
+              this.stopEditing();
+
+            var input = this.inputField;
+            input.hidden = false;
+
+            var box = this.treeBoxObject;
+            var outx = {}, outy = {}, outwidth = {}, outheight = {};
+            var coords = box.getCoordsForCellItem(row, column, "text",
+                                                  outx, outy, outwidth, outheight);
+
+            var style = window.getComputedStyle(input, "");
+            var topadj = parseInt(style.borderTopWidth) + parseInt(style.paddingTop);
+            input.top = outy.value - topadj;
+
+            var left = outx.value;
+            input.left = left;
+            input.height = outheight.value + topadj +
+                           parseInt(style.borderBottomWidth) +
+                           parseInt(style.paddingBottom);
+
+            coords = box.getCoordsForCellItem(row, column, "cell",
+                                              outx, outy, outwidth, outheight);
+            input.width = outwidth.value - (left - outx.value);
+
+            input.value = this.view.getCellText(row, column);
+            var selectText = function selectText() {
+              input.select();
+              input.inputField.focus();
+            }
+            setTimeout(selectText, 0);
+
+            this._editingRow = row;
+            this._editingColumn = column;
+
+            this.setAttribute("editing", "true");
+          ]]>
+        </body>
+      </method>
+
+      <method name="stopEditing">
+        <parameter name="accept"/>
+        <body>
+          <![CDATA[
+            if (!this._editingColumn)
+              return;
+
+            var input = this.inputField;
+            if (accept) {
+              var value = input.value;
+              this.view.setCellText(this._editingRow, this._editingColumn, value);
+            }
+            this._editingRow = -1;
+            this._editingColumn = null;
+
+            input.hidden = true;
+            input.value = "";
+            this.removeAttribute("editing");
+          ]]>
+        </body>
+      </method>
+
    </implementation>
    
    <handlers>
      <handler event="DOMMouseScroll" phase="capturing">
        <![CDATA[
+          if (this._editingColumn)
+            return;
+
          var rows = event.detail;
          if (rows == NSUIEvent.SCROLL_PAGE_UP)
            this.treeBoxObject.scrollByPages(-1);
@ -249,11 +346,45 @@
            this.treeBoxObject.scrollByLines(rows);
        ]]>
      </handler>
+      <handler event="select" phase="target" action="this.stopEditing(true);"/>
      <handler event="focus" action="this.treeBoxObject.focused = true;"/>
      <handler event="blur" action="this.treeBoxObject.focused = false;"/>
-      <handler event="keypress" keycode="vk_enter" action="this.changeOpenState(this.currentIndex);"/>
-      <handler event="keypress" keycode="vk_return" action="this.changeOpenState(this.currentIndex);"/>
-      <handler event="keypress" keycode="vk_left">
+      <handler event="blur" phase="capturing"
+               action="if (event.originalTarget == this.inputField) this.stopEditing(true);"/>
+      <handler event="keypress" keycode="vk_enter">
+        <![CDATA[
+          if (this._editingColumn) {
+            this.stopEditing(true);
+            this.focus();
+            event.stopPropagation();
+          }
+          else {
+            this.changeOpenState(this.currentIndex);
+          }
+        ]]>
+      </handler>
+      <handler event="keypress" keycode="vk_return">
+        <![CDATA[
+          if (this._editingColumn) {
+            this.stopEditing(true);
+            this.focus();
+            event.stopPropagation();
+          }
+          else {
+            this.changeOpenState(this.currentIndex);
+          }
+        ]]>
+      </handler>
+      <handler event="keypress" keycode="vk_escape">
+        <![CDATA[
+          if (this._editingColumn) {
+            this.stopEditing(false);
+            this.focus();
+            event.stopPropagation();
+          }
+        ]]>
+      </handler>
+      <handler event="keypress" keycode="vk_left" phase="target">
        <![CDATA[
         var row = this.currentIndex;
         if (row < 0)
@ -294,7 +425,7 @@
         }
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_right">
+      <handler event="keypress" keycode="vk_right" phase="target">
        <![CDATA[
          var row = this.currentIndex;
          if (row < 0)
@ -343,7 +474,8 @@
          }
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_up" modifiers="control any">
+      <handler event="keypress" keycode="vk_up"
+               modifiers="control any" phase="target">
        <![CDATA[
         if (event.ctrlKey && this.view.selection.single) {
           this.treeBoxObject.scrollByLines(-1);
@ -373,7 +505,8 @@
         this.treeBoxObject.ensureRowIsVisible(c);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_down" modifiers="control any">
+      <handler event="keypress" keycode="vk_down"
+               modifiers="control any" phase="target">
        <![CDATA[
         if (event.ctrlKey && this.view.selection.single) {
           this.treeBoxObject.scrollByLines(1);
@ -403,7 +536,8 @@
         this.treeBoxObject.ensureRowIsVisible(c);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_up" modifiers="control any, shift">
+      <handler event="keypress" keycode="vk_up"
+               modifiers="control any, shift" phase="target">
        <![CDATA[
         if (this.view.selection.single)
           return;
@ -415,7 +549,8 @@
         this.treeBoxObject.ensureRowIsVisible(c - 1);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_down" modifiers="control any, shift">
+      <handler event="keypress" keycode="vk_down"
+               modifiers="control any, shift" phase="target">
        <![CDATA[
         if (this.view.selection.single)
           return;
@ -427,7 +562,8 @@
         this.treeBoxObject.ensureRowIsVisible(c + 1);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_page_up" modifiers="control any">
+      <handler event="keypress" keycode="vk_page_up"
+               modifiers="control any" phase="target">
        <![CDATA[
         if (this.pageUpOrDownMovesSelection == event.ctrlKey) {
           this.treeBoxObject.scrollByPages(-1);
@ -449,7 +585,8 @@
         this.view.selection.timedSelect(i, this._selectDelay);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_page_down" modifiers="control any">
+      <handler event="keypress" keycode="vk_page_down"
+               modifiers="control any" phase="target">
        <![CDATA[
         if (this.pageUpOrDownMovesSelection == event.ctrlKey) {
           this.treeBoxObject.scrollByPages(1);
@ -473,7 +610,8 @@
         this.view.selection.timedSelect(i, this._selectDelay);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_page_up" modifiers="control any, shift">
+      <handler event="keypress" keycode="vk_page_up"
+               modifiers="control any, shift" phase="target">
        <![CDATA[
         if (this.view.selection.single)
           return;
@ -494,7 +632,8 @@
         this.view.selection.rangedSelect(-1, i, event.ctrlKey);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_page_down" modifiers="control any, shift">
+      <handler event="keypress" keycode="vk_page_down"
+               modifiers="control any, shift" phase="target">
        <![CDATA[
         if (this.view.selection.single)
           return;
@ -517,9 +656,10 @@
         this.view.selection.rangedSelect(-1, i, event.ctrlKey);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_home" modifiers="control any">
+      <handler event="keypress" keycode="vk_home"
+               modifiers="control any" phase="target">
        <![CDATA[
-          if (this.view.rowCount == 0)
+         if (this.view.rowCount == 0)
           return;
         // Normal behaviour is to select the first row
         if (!event.ctrlKey)
@ -530,7 +670,8 @@
         this.treeBoxObject.ensureRowIsVisible(0);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_end" modifiers="control any">
+      <handler event="keypress" keycode="vk_end"
+               modifiers="control any" phase="target">
        <![CDATA[
         var l = this.view.rowCount - 1;
         if (l < 0)
@ -544,7 +685,8 @@
         this.treeBoxObject.ensureRowIsVisible(l);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_home" modifiers="control any, shift">
+      <handler event="keypress" keycode="vk_home"
+               modifiers="control any, shift" phase="target">
        <![CDATA[
         if (this.view.selection.single)
           return;
@ -553,7 +695,8 @@
         this.treeBoxObject.ensureRowIsVisible(0);
        ]]>
      </handler>
-      <handler event="keypress" keycode="vk_end" modifiers="control any, shift">
+      <handler event="keypress" keycode="vk_end"
+               modifiers="control any, shift" phase="target">
        <![CDATA[
         if (this.view.selection.single)
           return;
@ -565,6 +708,9 @@
      </handler>
      <handler event="keypress">
        <![CDATA[
+         if (this._editingColumn)
+           return;
+
         var c = this.currentIndex;
         if (event.charCode == ' '.charCodeAt(0) && !this.view.selection.single) {
           if (!this.view.selection.isSelected(c) || event.ctrlKey) {
@ -838,13 +984,19 @@
          return;
        var b = this.parentNode.treeBoxObject;
        var row = b.view.selection.currentIndex;
-        if (row == -1 || !b.view.isContainer(row))
+        if (row == -1)
          return;

         var col = {};
         var obj = {};
         b.getCellAt(event.clientX, event.clientY, {}, col, obj);

+         if (this.parentNode.editable)
+           this.parentNode.startEditing(row, col.value);
+
+         if (!b.view.isContainer(row))
+           return;
+
         // Cyclers and twisties respond to single clicks, not double clicks
         if (col.value && !col.value.cycler && obj.value != "twisty")
           this.parentNode.changeOpenState(row);
@ -1121,6 +1273,7 @@
          }
          else {
            var tree = this.parentNode.parentNode;
+            tree.stopEditing(true);
            var menuitem = document.getAnonymousElementByAttribute(this, "anonid", "menuitem");
            if (event.originalTarget == menuitem) {
              tree.columns.restoreNaturalOrder();
--- a/xpfe/global/resources/content/xul.css
+++ b/xpfe/global/resources/content/xul.css
@ -522,7 +522,6 @@ treecolpicker {

 tree {
  -moz-box-orient: vertical;
-  -moz-user-select: none;
  min-width: 0px;
  min-height: 0px;
  width: 10px;