Bug 275223 - Enable Tree View Columns to be Sorted in Page Info. r=db48x

This commit is contained in:
Felix Fung 2012-01-26 16:10:00 -05:00
parent 4edf63ce72
commit 15f260742e
8 changed files with 116 additions and 38 deletions

View File

@ -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];
}

View File

@ -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>

View File

@ -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"

View File

@ -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

View File

@ -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;

View File

@ -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"

View File

@ -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)

View File

@ -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;
}
};