Bug 1058249 - Allow TableWidget to append DOMNodes as Cell values. r=bgrins, f=Optimizer

browser/devtools/shared/test/browser_tableWidget_basic.js

@@ -108,11 +108,15 @@ function populateTable() {
     col3: "value27",
     col4: "value34"
   });
+
+  let span = doc.createElement("span");
+  span.textContent = "domnode";
+
   table.push({
     col1: "id9",
     col2: "value11",
     col3: "value23",
-    col4: "value38"
+    col4: span
   });
 }
 
@@ -135,7 +139,7 @@ function testTreeItemInsertedCorrectly() {
 }
 
 /**
- * Tests if the API exposed by TreeWidget works properly
+ * Tests if the API exposed by TableWidget works properly
  */
 function testAPI() {
   info("Testing TableWidget API");
@@ -300,22 +304,48 @@ function testAPI() {
   // Calling it on an unsorted column should sort by it in ascending manner
   table.sortBy("col2");
   let cell = table.tbody.children[2].firstChild.children[2];
-  while(cell) {
-    ok(cell.value >= cell.previousSibling.value, "Sorting is in ascending order");
-    cell = cell.nextSibling;
-  }
+  checkAscendingOrder(cell);
+
   // Calling it again should sort by it in descending manner
   table.sortBy("col2");
   let cell = table.tbody.children[2].firstChild.lastChild.previousSibling;
-  while(cell != cell.parentNode.firstChild) {
-    ok(cell.value >= cell.nextSibling.value, "Sorting is in descending order");
-    cell = cell.previousSibling;
-  }
+  checkDescendingOrder(cell);
+
   // Calling it again should sort by it in ascending manner
   table.sortBy("col2");
   let cell = table.tbody.children[2].firstChild.children[2];
+  checkAscendingOrder(cell);
+
+  table.clear();
+  populateTable();
+
+  // testing if sorting works should sort by ascending manner
+  table.sortBy("col4");
+  let cell = table.tbody.children[6].firstChild.children[1];
+  is(cell.textContent, "domnode", "DOMNode sorted correctly");
+  checkAscendingOrder(cell.nextSibling);
+
+  // Calling it again should sort it in descending order
+  table.sortBy("col4");
+  let cell = table.tbody.children[6].firstChild.children[9];
+  is(cell.textContent, "domnode", "DOMNode sorted correctly");
+  checkDescendingOrder(cell.previousSibling);
+}
+
+function checkAscendingOrder(cell) {
   while(cell) {
-    ok(cell.value >= cell.previousSibling.value, "Sorting is in ascending order");
+    let currentCell = cell.value || cell.textContent;
+    let prevCell = cell.previousSibling.value || cell.previousSibling.textContent;
+    ok(currentCell >= prevCell, "Sorting is in ascending order");
     cell = cell.nextSibling;
   }
 }
+
+function checkDescendingOrder(cell) {
+  while(cell != cell.parentNode.firstChild) {
+    let currentCell = cell.value || cell.textContent;
+    let nextCell = cell.nextSibling.value || cell.nextSibling.textContent;
+    ok(currentCell >= nextCell, "Sorting is in descending order");
+    cell = cell.previousSibling;
+  }
+}

browser/devtools/shared/widgets/TableWidget.js

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const { Cu } = require("chrome");
+const {Cc, Ci, Cu} = require("chrome");
 
 const EventEmitter = require("devtools/toolkit/event-emitter");
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
@@ -754,15 +754,22 @@ Column.prototype = {
    * by this column.
    */
   sort: function(items) {
-
     // Only sort the array if we are sorting based on this column
     if (this.sorted == 1) {
       items.sort((a, b) => {
-        return a[this.id] > b[this.id]
+        let val1 = (a[this.id] instanceof Ci.nsIDOMNode) ?
+            a[this.id].textContent : a[this.id];
+        let val2 = (b[this.id] instanceof Ci.nsIDOMNode) ?
+            b[this.id].textContent : b[this.id];
+        return val1 > val2;
       });
     } else if (this.sorted > 1) {
       items.sort((a, b) => {
-        return b[this.id] > a[this.id]
+        let val1 = (a[this.id] instanceof Ci.nsIDOMNode) ?
+            a[this.id].textContent : a[this.id];
+        let val2 = (b[this.id] instanceof Ci.nsIDOMNode) ?
+            b[this.id].textContent : b[this.id];
+        return val2 > val1;
       });
     }
 
@@ -806,8 +813,18 @@ Column.prototype = {
       return;
     }
     if (event.button == 0) {
-      this.table.emit(EVENTS.ROW_SELECTED,
-        event.originalTarget.getAttribute("data-id"));
+      let target = event.originalTarget;
+      let dataid = null;
+
+      while (target) {
+        dataid = target.getAttribute("data-id");
+        if (dataid) {
+          break;
+        }
+        target = target.parentNode;
+      }
+
+      this.table.emit(EVENTS.ROW_SELECTED, dataid);
     }
   },
 
@@ -854,7 +871,9 @@ Column.prototype = {
  * @param {Column} column
  *        The column object to which the cell belongs.
  * @param {object} item
- *        The object representing the row.
+ *        The object representing the row. It contains a key value pair
+ *        representing the column id and its associated value. The value
+ *        can be a DOMNode that is appended or a string value.
  * @param {Cell} nextCell
  *        The cell object which is next to this cell. null if this cell is last
  *        cell of the column
@@ -892,10 +911,23 @@ Cell.prototype = {
       this.label.setAttribute("value", "");
       return;
     }
-    if (value.length > MAX_VISIBLE_STRING_SIZE) {
+
+    if (!(value instanceof Ci.nsIDOMNode) &&
+        value.length > MAX_VISIBLE_STRING_SIZE) {
       value = value .substr(0, MAX_VISIBLE_STRING_SIZE) + "\u2026"; // …
     }
-    this.label.setAttribute("value", value + "");
+
+    if (value instanceof Ci.nsIDOMNode) {
+      this.label.removeAttribute("value");
+
+      while (this.label.firstChild) {
+        this.label.removeChild(this.label.firstChild);
+      }
+
+      this.label.appendChild(value);
+    } else {
+      this.label.setAttribute("value", value + "");
+    }
   },
 
   get value() {