Bug 1329907 - Use opacity to clear the treecell text while editing instead of changing the value. r=jaws, a=jcristau
authorNeil Deakin <neil@mozilla.com>
Wed, 11 Jan 2017 08:07:37 -0500
changeset 353805 7a4a33b8e52241f5e01276a2dce89382d940f60f
parent 353804 62d73eeb27e00faa33b57711282401183ee93c3b
child 353806 c47910706101e816c10076e75a798ba01b87d1fc
push id6812
push userryanvm@gmail.com
push dateTue, 24 Jan 2017 19:16:57 +0000
treeherdermozilla-esr52@82d7cc4c6fe4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, jcristau
bugs1329907
milestone52.0
Bug 1329907 - Use opacity to clear the treecell text while editing instead of changing the value. r=jaws, a=jcristau
toolkit/content/widgets/tree.xml
toolkit/themes/linux/global/tree.css
toolkit/themes/osx/global/tree.css
toolkit/themes/windows/global/tree.css
--- a/toolkit/content/widgets/tree.xml
+++ b/toolkit/content/widgets/tree.xml
@@ -380,48 +380,46 @@
 
             input.value = this.view.getCellText(row, column);
             var selectText = function selectText() {
               input.select();
               input.inputField.focus();
             }
             setTimeout(selectText, 0);
 
-            // Clear the text because we don't want the text appearing underneath the input.
-            this.view.setCellText(row, column, "");
-            // Save the original text so we can restore it after stoping editing.
-            input.setAttribute("data-original-text", input.value);
-
             this._editingRow = row;
             this._editingColumn = column;
             this.setAttribute("editing", "true");
+
+            box.invalidateCell(row, column);
             return true;
           ]]>
         </body>
       </method>
 
       <method name="stopEditing">
         <parameter name="accept"/>
         <body>
           <![CDATA[
             if (!this._editingColumn)
               return;
 
             var input = this.inputField;
             var editingRow = this._editingRow;
             var editingColumn = this._editingColumn;
-            var value = accept ? input.value : input.getAttribute("data-original-text");
             this._editingRow = -1;
             this._editingColumn = null;
-            this.view.setCellText(editingRow, editingColumn, value);
 
+            if (accept) {
+              var value = input.value;
+              this.view.setCellText(editingRow, editingColumn, value);
+            }
             input.hidden = true;
             input.value = "";
             this.removeAttribute("editing");
-            input.removeAttribute("data-original-text");
           ]]>
         </body>
       </method>
 
       <method name="_moveByOffset">
         <parameter name="offset"/>
         <parameter name="edge"/>
         <parameter name="event"/>
@@ -1234,18 +1232,20 @@
         var view = this.parentNode.view;
         var row = view.selection.currentIndex;
 
         if (row == -1)
           return;
 
         var cell = tbo.getCellAt(event.clientX, event.clientY);
 
-        if (cell.childElt != "twisty")
+        if (cell.childElt != "twisty") {
+          view.selection.currentColumn = cell.col;
           this.parentNode.startEditing(row, cell.col);
+        }
 
         if (this.parentNode._editingColumn || !view.isContainer(row))
           return;
 
         // Cyclers and twisties respond to single clicks, not double clicks
         if (cell.col && !cell.col.cycler && cell.childElt != "twisty")
           this.parentNode.changeOpenState(row);
       ]]>
--- a/toolkit/themes/linux/global/tree.css
+++ b/toolkit/themes/linux/global/tree.css
@@ -336,16 +336,27 @@ treechildren::-moz-tree-row(selected, ed
   background-color: transparent;
   border: none;
 }
 
 treechildren::-moz-tree-cell-text(selected, editing) {
   color: inherit;
 }
 
+treechildren::-moz-tree-cell(active, selected, focus, editing),
+tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, focus, editing),
+tree[seltype="text"] > treechildren::-moz-tree-cell(active, selected, focus, editing) {
+  background-color: transparent;
+  border: none;
+}
+
+treechildren::-moz-tree-cell-text(active, selected, editing) {
+  opacity: 0;
+}
+
 .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;
--- a/toolkit/themes/osx/global/tree.css
+++ b/toolkit/themes/osx/global/tree.css
@@ -278,8 +278,19 @@ treechildren.gridlines::-moz-tree-row {
 .tree-input {
   -moz-appearance: none;
   border-width: 0;
   box-shadow: @focusRingShadow@;
   margin: 0;
   margin-inline-start: -2px;
   padding: 2px 1px 1px;
 }
+
+treechildren::-moz-tree-cell(active, selected, focus, editing),
+tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, focus, editing),
+tree[seltype="text"] > treechildren::-moz-tree-cell(active, selected, focus, editing) {
+  background-color: transparent;
+  border: none;
+}
+
+treechildren::-moz-tree-cell-text(active, selected, editing) {
+  opacity: 0;
+}
--- a/toolkit/themes/windows/global/tree.css
+++ b/toolkit/themes/windows/global/tree.css
@@ -341,16 +341,27 @@ treechildren::-moz-tree-row(selected, ed
   background-color: transparent;
   border: none;
 }
 
 treechildren::-moz-tree-cell-text(selected, editing) {
   color: inherit;
 }
 
+treechildren::-moz-tree-cell(active, selected, focus, editing),
+tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, focus, editing),
+tree[seltype="text"] > treechildren::-moz-tree-cell(active, selected, focus, editing) {
+  background-color: transparent;
+  border: none;
+}
+
+treechildren::-moz-tree-cell-text(active, selected, editing) {
+  opacity: 0;
+}
+
 .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;