From 15f260742e01c8a923cd3f4b48a416e13d41cec9 Mon Sep 17 00:00:00 2001
From: Felix Fung <ffung@mozilla.com>
Date: Thu, 26 Jan 2012 16:10:00 -0500
Subject: [PATCH] Bug 275223 - Enable Tree View Columns to be Sorted in Page
 Info. r=db48x

---
 browser/base/content/pageinfo/pageInfo.js     | 85 +++++++++++++++----
 browser/base/content/pageinfo/pageInfo.xul    | 22 +++--
 browser/components/preferences/cookies.xul    |  2 +-
 browser/components/preferences/jar.mn         |  1 -
 browser/components/preferences/permissions.js | 14 ++-
 .../components/preferences/permissions.xul    |  2 +-
 toolkit/content/jar.mn                        |  1 +
 .../content/treeUtils.js                      | 27 ++++--
 8 files changed, 116 insertions(+), 38 deletions(-)
 rename browser/components/preferences/permissionsutils.js => toolkit/content/treeUtils.js (88%)

diff --git a/browser/base/content/pageinfo/pageInfo.js b/browser/base/content/pageinfo/pageInfo.js
index 30c7f5accd5..0b9ef978723 100644
--- a/browser/base/content/pageinfo/pageInfo.js
+++ b/browser/base/content/pageinfo/pageInfo.js
@@ -42,17 +42,18 @@
 # ***** END LICENSE BLOCK *****
 
 //******** define a js object to implement nsITreeView
-function pageInfoTreeView(copycol)
+function pageInfoTreeView(treeid, copycol)
 {
   // copycol is the index number for the column that we want to add to
   // the copy-n-paste buffer when the user hits accel-c
+  this.treeid = treeid;
   this.copycol = copycol;
   this.rows = 0;
   this.tree = null;
   this.data = [ ];
   this.selection = null;
-  this.sortcol = null;
-  this.sortdir = 0;
+  this.sortcol = -1;
+  this.sortdir = false;
 }
 
 pageInfoTreeView.prototype = {
@@ -121,6 +122,25 @@ pageInfoTreeView.prototype = {
     }
   },
 
+  onPageMediaSort : function(columnname)
+  {
+    var tree = document.getElementById(this.treeid);
+    var treecol = tree.columns.getNamedColumn(columnname);
+
+    this.sortdir =
+      gTreeUtils.sort(
+        tree,
+        this,
+        this.data,
+        treecol.index,
+        function textComparator(a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); },
+        this.sortcol,
+        this.sortdir
+      );
+
+    this.sortcol = treecol.index;
+  },
+
   getRowProperties: function(row, prop) { },
   getCellProperties: function(row, column, prop) { },
   getColumnProperties: function(column, prop) { },
@@ -166,9 +186,8 @@ const COPYCOL_META_CONTENT = 1;
 const COPYCOL_IMAGE = COL_IMAGE_ADDRESS;
 
 // one nsITreeView for each tree in the window
-var gMetaView = new pageInfoTreeView(COPYCOL_META_CONTENT);
-var gImageView = new pageInfoTreeView(COPYCOL_IMAGE);
-
+var gMetaView = new pageInfoTreeView('metatree', COPYCOL_META_CONTENT);
+var gImageView = new pageInfoTreeView('imagetree', COPYCOL_IMAGE);
 
 var atomSvc = Components.classes["@mozilla.org/atom-service;1"]
                         .getService(Components.interfaces.nsIAtomService);
@@ -187,6 +206,44 @@ gImageView.getCellProperties = function(row, col, props) {
     props.AppendElement(this._ltrAtom);
 };
 
+gImageView.getCellText = function(row, column) {
+  var value = this.data[row][column.index];
+  if (column.index == COL_IMAGE_SIZE) {
+    if (value == -1) {
+      return gStrings.unknown;
+    } else {
+      var kbSize = Number(Math.round(value / 1024 * 100) / 100);
+      return gBundle.getFormattedString("mediaFileSize", [kbSize]);
+    }
+  }
+  return value || "";
+};
+
+gImageView.onPageMediaSort = function(columnname) {
+  var tree = document.getElementById(this.treeid);
+  var treecol = tree.columns.getNamedColumn(columnname);
+
+  var comparator;
+  if (treecol.index == COL_IMAGE_SIZE) {
+    comparator = function numComparator(a, b) { return a - b; };
+  } else {
+    comparator = function textComparator(a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); };
+  }
+
+  this.sortdir =
+    gTreeUtils.sort(
+      tree,
+      this,
+      this.data,
+      treecol.index,
+      comparator,
+      this.sortcol,
+      this.sortdir
+    );
+
+  this.sortcol = treecol.index;
+};
+
 var gImageHash = { };
 
 // localized strings (will be filled in when the document is loaded)
@@ -585,15 +642,8 @@ function addImage(url, type, alt, elem, isBg)
       catch(ex2) { }
     }
 
-    var sizeText;
-    if (cacheEntryDescriptor) {
-      var pageSize = cacheEntryDescriptor.dataSize;
-      var kbSize = formatNumber(Math.round(pageSize / 1024 * 100) / 100);
-      sizeText = gBundle.getFormattedString("mediaFileSize", [kbSize]);
-    }
-    else
-      sizeText = gStrings.unknown;
-    gImageView.addRow([url, type, sizeText, alt, 1, elem, isBg]);
+    var dataSize = (cacheEntryDescriptor) ? cacheEntryDescriptor.dataSize : -1;
+    gImageView.addRow([url, type, dataSize, alt, 1, elem, isBg]);
 
     // Add the observer, only once.
     if (gImageView.data.length == 1) {
@@ -700,7 +750,10 @@ function getSelectedImage(tree)
     return null;
 
   // Only works if only one item is selected
-  var clickedRow = tree.currentIndex;
+  var clickedRow = tree.view.selection.currentIndex;
+  if (clickedRow == -1)
+    return null;
+
   // image-node
   return gImageView.data[clickedRow][COL_IMAGE_NODE];
 }
diff --git a/browser/base/content/pageinfo/pageInfo.xul b/browser/base/content/pageinfo/pageInfo.xul
index 3cb71a5ce85..e1f9bb122a6 100644
--- a/browser/base/content/pageinfo/pageInfo.xul
+++ b/browser/base/content/pageinfo/pageInfo.xul
@@ -66,6 +66,7 @@
 
   <script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
   <script type="application/javascript" src="chrome://global/content/contentAreaUtils.js"/>
+  <script type="application/javascript" src="chrome://global/content/treeUtils.js"/>
   <script type="application/javascript" src="chrome://browser/content/pageinfo/pageInfo.js"/>
   <script type="application/javascript" src="chrome://browser/content/pageinfo/feeds.js"/>
   <script type="application/javascript" src="chrome://browser/content/pageinfo/permissions.js"/>
@@ -192,10 +193,12 @@
         <tree id="metatree" flex="1" hidecolumnpicker="true" contextmenu="picontext">
           <treecols>
             <treecol id="meta-name"    label="&generalMetaName;"
-                     persist="width" flex="1"/>
+                     persist="width" flex="1"
+                     onclick="gMetaView.onPageMediaSort('meta-name');"/>
             <splitter class="tree-splitter"/>
             <treecol id="meta-content" label="&generalMetaContent;"
-                     persist="width" flex="4"/>
+                     persist="width" flex="4"
+                     onclick="gMetaView.onPageMediaSort('meta-content');"/>
           </treecols>
           <treechildren flex="1"/>
         </tree>        
@@ -218,19 +221,24 @@
             ondragstart="onBeginLinkDrag(event,'image-address','image-alt')">
         <treecols>
           <treecol sortSeparators="true" primary="true" persist="width" flex="10"
-                        width="10" id="image-address" label="&mediaAddress;"/>
+                        width="10" id="image-address" label="&mediaAddress;"
+                        onclick="gImageView.onPageMediaSort('image-address');"/>
           <splitter class="tree-splitter"/>
           <treecol sortSeparators="true" persist="hidden width" flex="2"
-                        width="2"  id="image-type"    label="&mediaType;"/>
+                        width="2"  id="image-type"    label="&mediaType;"
+                        onclick="gImageView.onPageMediaSort('image-type');"/>
           <splitter class="tree-splitter"/>
           <treecol sortSeparators="true" hidden="true" persist="hidden width" flex="2"
-                        width="2"  id="image-size"    label="&mediaSize;"/>
+                        width="2"  id="image-size"  label="&mediaSize;" value="size"
+                        onclick="gImageView.onPageMediaSort('image-size');"/>
           <splitter class="tree-splitter"/>
           <treecol sortSeparators="true" hidden="true" persist="hidden width" flex="4"
-                        width="4"  id="image-alt"    label="&mediaAltHeader;"/>
+                        width="4"  id="image-alt"    label="&mediaAltHeader;"
+                        onclick="gImageView.onPageMediaSort('image-alt');"/>
           <splitter class="tree-splitter"/>
           <treecol sortSeparators="true" hidden="true" persist="hidden width" flex="1"
-                        width="1"  id="image-count"    label="&mediaCount;"/>
+                        width="1"  id="image-count"    label="&mediaCount;"
+                        onclick="gImageView.onPageMediaSort('image-count');"/>
         </treecols>
         <treechildren flex="1"/>
       </tree>
diff --git a/browser/components/preferences/cookies.xul b/browser/components/preferences/cookies.xul
index 7e6a8d086ff..0e0c6177332 100644
--- a/browser/components/preferences/cookies.xul
+++ b/browser/components/preferences/cookies.xul
@@ -52,7 +52,7 @@
         persist="screenX screenY width height"
         onkeypress="gCookiesWindow.onWindowKeyPress(event);">
 
-  <script src="chrome://browser/content/preferences/permissionsutils.js"/>
+  <script src="chrome://global/content/treeUtils.js"/>
   <script src="chrome://browser/content/preferences/cookies.js"/>
 
   <stringbundle id="bundlePreferences"
diff --git a/browser/components/preferences/jar.mn b/browser/components/preferences/jar.mn
index b48987eaddf..bd1c41894f8 100644
--- a/browser/components/preferences/jar.mn
+++ b/browser/components/preferences/jar.mn
@@ -27,7 +27,6 @@ browser.jar:
 *   content/browser/preferences/main.js
 *   content/browser/preferences/permissions.xul
 *   content/browser/preferences/permissions.js
-*   content/browser/preferences/permissionsutils.js
 *   content/browser/preferences/preferences.xul
 *   content/browser/preferences/privacy.xul
 *   content/browser/preferences/privacy.js
diff --git a/browser/components/preferences/permissions.js b/browser/components/preferences/permissions.js
index a62017b9961..105f77713a2 100644
--- a/browser/components/preferences/permissions.js
+++ b/browser/components/preferences/permissions.js
@@ -239,7 +239,8 @@ var gPermissionManager = {
         ++this._view._rowCount;
         this._tree.treeBoxObject.rowCountChanged(this._view.rowCount - 1, 1);        
         // Re-do the sort, since we inserted this new item at the end. 
-        gTreeUtils.sort(this._tree, this._view, this._permissions, 
+        gTreeUtils.sort(this._tree, this._view, this._permissions,
+                        this._permissionsComparator,
                         this._lastPermissionSortColumn, 
                         this._lastPermissionSortAscending);        
       }
@@ -254,7 +255,8 @@ var gPermissionManager = {
         // or vice versa, since if we're sorted on status, we may no
         // longer be in order. 
         if (this._lastPermissionSortColumn.id == "statusCol") {
-          gTreeUtils.sort(this._tree, this._view, this._permissions, 
+          gTreeUtils.sort(this._tree, this._view, this._permissions,
+                          this._permissionsComparator,
                           this._lastPermissionSortColumn, 
                           this._lastPermissionSortAscending);
         }
@@ -311,13 +313,19 @@ var gPermissionManager = {
   
   _lastPermissionSortColumn: "",
   _lastPermissionSortAscending: false,
+  _permissionsComparator : function (a, b)
+  {
+    return a.toLowerCase().localeCompare(b.toLowerCase());
+  },
+
   
   onPermissionSort: function (aColumn)
   {
     this._lastPermissionSortAscending = gTreeUtils.sort(this._tree, 
                                                         this._view, 
                                                         this._permissions,
-                                                        aColumn, 
+                                                        aColumn,
+                                                        this._permissionsComparator,
                                                         this._lastPermissionSortColumn, 
                                                         this._lastPermissionSortAscending);
     this._lastPermissionSortColumn = aColumn;
diff --git a/browser/components/preferences/permissions.xul b/browser/components/preferences/permissions.xul
index c380ef4fe14..4a9238914c2 100644
--- a/browser/components/preferences/permissions.xul
+++ b/browser/components/preferences/permissions.xul
@@ -54,7 +54,7 @@
         persist="screenX screenY width height"
         onkeypress="gPermissionManager.onWindowKeyPress(event);">
 
-  <script src="chrome://browser/content/preferences/permissionsutils.js"/>
+  <script src="chrome://global/content/treeUtils.js"/>
   <script src="chrome://browser/content/preferences/permissions.js"/>
 
   <stringbundle id="bundlePreferences"
diff --git a/toolkit/content/jar.mn b/toolkit/content/jar.mn
index df75c78e463..afc8549acd0 100644
--- a/toolkit/content/jar.mn
+++ b/toolkit/content/jar.mn
@@ -37,6 +37,7 @@ toolkit.jar:
 *+ content/global/globalOverlay.js            (globalOverlay.js)
 +  content/global/mozilla.xhtml               (mozilla.xhtml)
 *+ content/global/nsDragAndDrop.js            (nsDragAndDrop.js)
+*  content/global/treeUtils.js                (treeUtils.js)
 *+ content/global/viewZoomOverlay.js          (viewZoomOverlay.js)
 *+ content/global/bindings/autocomplete.xml    (widgets/autocomplete.xml)
 *+ content/global/bindings/browser.xml         (widgets/browser.xml)
diff --git a/browser/components/preferences/permissionsutils.js b/toolkit/content/treeUtils.js
similarity index 88%
rename from browser/components/preferences/permissionsutils.js
rename to toolkit/content/treeUtils.js
index 6236496bc2b..046b685beec 100644
--- a/browser/components/preferences/permissionsutils.js
+++ b/toolkit/content/treeUtils.js
@@ -21,6 +21,7 @@
 #
 # Contributor(s):
 #   Ben Goodger <ben@mozilla.org>
+#   Felix Fung <felix.the.cheshire.cat@gmail.com>
 #
 # Alternatively, the contents of this file may be used under the terms of
 # either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -46,12 +47,12 @@ var gTreeUtils = {
     aView._rowCount = 0;
     aTree.treeBoxObject.rowCountChanged(0, -oldCount);
   },
-  
+
   deleteSelectedItems: function (aTree, aView, aItems, aDeletedItems)
   {
     var selection = aTree.view.selection;
     selection.selectEventsSuppressed = true;
-    
+
     var rc = selection.getRangeCount();
     for (var i = 0; i < rc; ++i) {
       var min = { }; var max = { };
@@ -61,7 +62,7 @@ var gTreeUtils = {
         aItems[j] = null;
       }
     }
-    
+
     var nextSelection = 0;
     for (i = 0; i < aItems.length; ++i) {
       if (!aItems[i]) {
@@ -82,20 +83,28 @@ var gTreeUtils = {
     }
     selection.selectEventsSuppressed = false;
   },
-  
-  sort: function (aTree, aView, aDataSet, aColumn, 
-                  aLastSortColumn, aLastSortAscending) 
+
+  sort: function (aTree, aView, aDataSet, aColumn, aComparator,
+                  aLastSortColumn, aLastSortAscending)
   {
     var ascending = (aColumn == aLastSortColumn) ? !aLastSortAscending : true;
-    aDataSet.sort(function (a, b) { return a[aColumn].toLowerCase().localeCompare(b[aColumn].toLowerCase()); });
+    if (aDataSet.length == 0)
+      return ascending;
+
+    var numericSort = !isNaN(aDataSet[0][aColumn]);
+    var sortFunction = null;
+    if (aComparator) {
+      sortFunction = function (a, b) { return aComparator(a[aColumn], b[aColumn]); };
+    }
+    aDataSet.sort(sortFunction);
     if (!ascending)
       aDataSet.reverse();
-    
+
     aTree.view.selection.select(-1);
     aTree.view.selection.select(0);
     aTree.treeBoxObject.invalidate();
     aTree.treeBoxObject.ensureRowIsVisible(0);
-    
+
     return ascending;
   }
 };