summaryrefslogtreecommitdiffstats
path: root/devtools/client/shared
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/shared')
-rw-r--r--devtools/client/shared/moz.build1
-rw-r--r--devtools/client/shared/natural-sort.js106
-rw-r--r--devtools/client/shared/widgets/TableWidget.js133
3 files changed, 214 insertions, 26 deletions
diff --git a/devtools/client/shared/moz.build b/devtools/client/shared/moz.build
index 1c61970c0..7be4a0088 100644
--- a/devtools/client/shared/moz.build
+++ b/devtools/client/shared/moz.build
@@ -35,6 +35,7 @@ DevToolsModules(
'Jsbeautify.jsm',
'key-shortcuts.js',
'keycodes.js',
+ 'natural-sort.js',
'network-throttling-profiles.js',
'node-attribute-parser.js',
'options-view.js',
diff --git a/devtools/client/shared/natural-sort.js b/devtools/client/shared/natural-sort.js
new file mode 100644
index 000000000..904d76431
--- /dev/null
+++ b/devtools/client/shared/natural-sort.js
@@ -0,0 +1,106 @@
+/*
+ * Natural Sort algorithm for Javascript - Version 0.8.1 - Released under MIT license
+ * Author: Jim Palmer (based on chunking idea from Dave Koelle)
+ *
+ * Includes pull request to move regexes out of main function for performance
+ * increases.
+ *
+ * Repository:
+ * https://github.com/overset/javascript-natural-sort/
+ */
+
+"use strict";
+
+var re = /(^([+\-]?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?(?=\D|\s|$))|^0x[\da-fA-F]+$|\d+)/g;
+var sre = /^\s+|\s+$/g; // trim pre-post whitespace
+var snre = /\s+/g; // normalize all whitespace to single ' ' character
+
+// eslint-disable-next-line
+var dre = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/;
+var hre = /^0x[0-9a-f]+$/i;
+var ore = /^0/;
+var b0re = /^\0/;
+var e0re = /\0$/;
+
+exports.naturalSortCaseSensitive =
+function naturalSortCaseSensitive(a, b) {
+ return naturalSort(a, b, false);
+};
+
+exports.naturalSortCaseInsensitive =
+function naturalSortCaseInsensitive(a, b) {
+ return naturalSort(a, b, true);
+};
+
+/**
+ * Sort numbers, strings, IP Addresses, Dates, Filenames, version numbers etc.
+ * "the way humans do."
+ *
+ * This function should only be called via naturalSortCaseSensitive and
+ * naturalSortCaseInsensitive.
+ *
+ * e.g. [3, 2, 1, 10].sort(naturalSort)
+ *
+ * @param {Object} a
+ * Passed in by Array.sort(a, b)
+ * @param {Object} b
+ * Passed in by Array.sort(a, b)
+ * @param {Boolean} insensitive
+ * Should the search be case insensitive?
+ */
+function naturalSort(a, b, insensitive) {
+ // convert all to strings strip whitespace
+ let i = function (s) {
+ return (insensitive && ("" + s).toLowerCase() || "" + s)
+ .replace(sre, "");
+ };
+ let x = i(a) || "";
+ let y = i(b) || "";
+ // chunk/tokenize
+ let xN = x.replace(re, "\0$1\0").replace(e0re, "").replace(b0re, "").split("\0");
+ let yN = y.replace(re, "\0$1\0").replace(e0re, "").replace(b0re, "").split("\0");
+ // numeric, hex or date detection
+ let xD = parseInt(x.match(hre), 16) || (xN.length !== 1 && Date.parse(x));
+ let yD = parseInt(y.match(hre), 16) || xD && y.match(dre) && Date.parse(y) || null;
+ let normChunk = function (s, l) {
+ // normalize spaces; find floats not starting with '0', string or 0 if
+ // not defined (Clint Priest)
+ return (!s.match(ore) || l == 1) &&
+ parseFloat(s) || s.replace(snre, " ").replace(sre, "") || 0;
+ };
+ let oFxNcL;
+ let oFyNcL;
+
+ // first try and sort Hex codes or Dates
+ if (yD) {
+ if (xD < yD) {
+ return -1;
+ } else if (xD > yD) {
+ return 1;
+ }
+ }
+
+ // natural sorting through split numeric strings and default strings
+ // eslint-disable-next-line
+ for (let cLoc = 0, xNl = xN.length, yNl = yN.length, numS = Math.max(xNl, yNl); cLoc < numS; cLoc++) {
+ oFxNcL = normChunk(xN[cLoc] || "", xNl);
+ oFyNcL = normChunk(yN[cLoc] || "", yNl);
+
+ // handle numeric vs string comparison - number < string - (Kyle Adams)
+ if (isNaN(oFxNcL) !== isNaN(oFyNcL)) {
+ return isNaN(oFxNcL) ? 1 : -1;
+ }
+ // if unicode use locale comparison
+ // eslint-disable-next-line
+ if (/[^\x00-\x80]/.test(oFxNcL + oFyNcL) && oFxNcL.localeCompare) {
+ let comp = oFxNcL.localeCompare(oFyNcL);
+ return comp / Math.abs(comp);
+ }
+ if (oFxNcL < oFyNcL) {
+ return -1;
+ } else if (oFxNcL > oFyNcL) {
+ return 1;
+ }
+ }
+ return null;
+}
diff --git a/devtools/client/shared/widgets/TableWidget.js b/devtools/client/shared/widgets/TableWidget.js
index 5dacd1b67..a0f0dfc11 100644
--- a/devtools/client/shared/widgets/TableWidget.js
+++ b/devtools/client/shared/widgets/TableWidget.js
@@ -8,6 +8,8 @@ loader.lazyRequireGetter(this, "setNamedTimeout",
"devtools/client/shared/widgets/view-helpers", true);
loader.lazyRequireGetter(this, "clearNamedTimeout",
"devtools/client/shared/widgets/view-helpers", true);
+loader.lazyRequireGetter(this, "naturalSortCaseInsensitive",
+ "devtools/client/shared/natural-sort", true);
const {KeyCodes} = require("devtools/client/shared/keycodes");
const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
@@ -123,6 +125,8 @@ function TableWidget(node, options = {}) {
TableWidget.prototype = {
items: null,
+ editBookmark: null,
+ scrollIntoViewOnUpdate: null,
/**
* Getter for the headers context menu popup id.
@@ -139,7 +143,12 @@ TableWidget.prototype = {
*/
set selectedRow(id) {
for (let column of this.columns.values()) {
- column.selectRow(id[this.uniqueId] || id);
+ if (id) {
+ column.selectRow(id[this.uniqueId] || id);
+ } else {
+ column.selectedRow = null;
+ column.selectRow(null);
+ }
}
},
@@ -615,8 +624,13 @@ TableWidget.prototype = {
/**
* Populates the header context menu with the names of the columns along with
* displaying which columns are hidden or visible.
+ *
+ * @param {Array} privateColumns=[]
+ * An array of column names that should never appear in the table. This
+ * allows us to e.g. have an invisible compound primary key for a
+ * table's rows.
*/
- populateMenuPopup: function () {
+ populateMenuPopup: function (privateColumns = []) {
if (!this.menupopup) {
return;
}
@@ -626,6 +640,10 @@ TableWidget.prototype = {
}
for (let column of this.columns.values()) {
+ if (privateColumns.includes(column.id)) {
+ continue;
+ }
+
let menuitem = this.document.createElementNS(XUL_NS, "menuitem");
menuitem.setAttribute("label", column.header.getAttribute("value"));
menuitem.setAttribute("data-id", column.id);
@@ -663,16 +681,21 @@ TableWidget.prototype = {
* Creates the columns in the table. Without calling this method, data cannot
* be inserted into the table unless `initialColumns` was supplied.
*
- * @param {object} columns
+ * @param {Object} columns
* A key value pair representing the columns of the table. Where the
* key represents the id of the column and the value is the displayed
* label in the header of the column.
- * @param {string} sortOn
+ * @param {String} sortOn
* The id of the column on which the table will be initially sorted on.
- * @param {array} hiddenColumns
+ * @param {Array} hiddenColumns
* Ids of all the columns that are hidden by default.
+ * @param {Array} privateColumns=[]
+ * An array of column names that should never appear in the table. This
+ * allows us to e.g. have an invisible compound primary key for a
+ * table's rows.
*/
- setColumns: function (columns, sortOn = this.sortedOn, hiddenColumns = []) {
+ setColumns: function (columns, sortOn = this.sortedOn, hiddenColumns = [],
+ privateColumns = []) {
for (let column of this.columns.values()) {
column.destroy();
}
@@ -702,13 +725,18 @@ TableWidget.prototype = {
}
this.columns.set(id, new Column(this, id, columns[id]));
- if (hiddenColumns.indexOf(id) > -1) {
+ if (hiddenColumns.includes(id) || privateColumns.includes(id)) {
+ // Hide the column.
this.columns.get(id).toggleColumn();
+
+ if (privateColumns.includes(id)) {
+ this.columns.get(id).private = true;
+ }
}
}
this.sortedOn = sortOn;
this.sortBy(this.sortedOn);
- this.populateMenuPopup();
+ this.populateMenuPopup(privateColumns);
},
/**
@@ -778,6 +806,11 @@ TableWidget.prototype = {
return;
}
+ if (this.editBookmark && !this.items.has(this.editBookmark)) {
+ // Key has been updated... update bookmark.
+ this.editBookmark = item[this.uniqueId];
+ }
+
let index = this.columns.get(this.sortedOn).push(item);
for (let [key, column] of this.columns) {
if (key != this.sortedOn) {
@@ -814,7 +847,8 @@ TableWidget.prototype = {
column.remove(item);
column.updateZebra();
}
- if (this.items.size == 0) {
+ if (this.items.size === 0) {
+ this.selectedRow = null;
this.tbody.setAttribute("empty", "empty");
}
@@ -857,6 +891,8 @@ TableWidget.prototype = {
this.tbody.setAttribute("empty", "empty");
this.setPlaceholderText(this.emptyText);
+ this.selectedRow = null;
+
this.emit(EVENTS.TABLE_CLEARED, this);
},
@@ -958,6 +994,9 @@ module.exports.TableWidget = TableWidget;
* The displayed string on the column's header.
*/
function Column(table, id, header) {
+ // By default cells are visible in the UI.
+ this._private = false;
+
this.tbody = table.tbody;
this.document = table.document;
this.window = table.window;
@@ -1041,6 +1080,23 @@ Column.prototype = {
},
/**
+ * Get the private state of the column (visibility in the UI).
+ */
+ get private() {
+ return this._private;
+ },
+
+ /**
+ * Set the private state of the column (visibility in the UI).
+ *
+ * @param {Boolean} state
+ * Private (true or false)
+ */
+ set private(state) {
+ this._private = state;
+ },
+
+ /**
* Sets the sorted value
*/
set sorted(value) {
@@ -1115,7 +1171,9 @@ Column.prototype = {
},
/**
- * Called when a row is updated.
+ * Called when a row is updated e.g. a cell is changed. This means that
+ * for a new row this method will be called once for each column. If a single
+ * cell is changed this method will be called just once.
*
* @param {string} event
* The event name of the event. i.e. EVENTS.ROW_UPDATED
@@ -1124,7 +1182,23 @@ Column.prototype = {
*/
onRowUpdated: function (event, id) {
this._updateItems();
+
if (this.highlightUpdated && this.items[id] != null) {
+ if (this.table.scrollIntoViewOnUpdate) {
+ let cell = this.cells[this.items[id]];
+
+ // When a new row is created this method is called once for each column
+ // as each cell is updated. We can only scroll to cells if they are
+ // visible. We check for visibility and once we find the first visible
+ // cell in a row we scroll it into view and reset the
+ // scrollIntoViewOnUpdate flag.
+ if (cell.label.clientHeight > 0) {
+ cell.scrollIntoView();
+
+ this.table.scrollIntoViewOnUpdate = null;
+ }
+ }
+
if (this.table.editBookmark) {
// A rows position in the table can change as the result of an edit. In
// order to ensure that the correct row is highlighted after an edit we
@@ -1136,6 +1210,7 @@ Column.prototype = {
this.cells[this.items[id]].flash();
}
+
this.updateZebra();
},
@@ -1160,15 +1235,16 @@ Column.prototype = {
*/
selectRowAt: function (index) {
if (this.selectedRow != null) {
- this.cells[this.items[this.selectedRow]].toggleClass("theme-selected");
+ this.cells[this.items[this.selectedRow]].classList.remove("theme-selected");
}
- if (index < 0) {
+
+ let cell = this.cells[index];
+ if (cell) {
+ cell.classList.add("theme-selected");
+ this.selectedRow = cell.id;
+ } else {
this.selectedRow = null;
- return;
}
- let cell = this.cells[index];
- cell.toggleClass("theme-selected");
- this.selectedRow = cell.id;
},
/**
@@ -1218,11 +1294,11 @@ Column.prototype = {
let index;
if (this.sorted == 1) {
index = this.cells.findIndex(element => {
- return value < element.value;
+ return naturalSortCaseInsensitive(value, element.value) === -1;
});
} else {
index = this.cells.findIndex(element => {
- return value > element.value;
+ return naturalSortCaseInsensitive(value, element.value) === 1;
});
}
index = index >= 0 ? index : this.cells.length;
@@ -1332,7 +1408,6 @@ Column.prototype = {
this.cells = [];
this.items = {};
this._itemsDirty = false;
- this.selectedRow = null;
while (this.header.nextSibling) {
this.header.nextSibling.remove();
}
@@ -1350,7 +1425,7 @@ Column.prototype = {
a[this.id].textContent : a[this.id];
let val2 = (b[this.id] instanceof Node) ?
b[this.id].textContent : b[this.id];
- return val1 > val2;
+ return naturalSortCaseInsensitive(val1, val2);
});
} else if (this.sorted > 1) {
items.sort((a, b) => {
@@ -1358,12 +1433,12 @@ Column.prototype = {
a[this.id].textContent : a[this.id];
let val2 = (b[this.id] instanceof Node) ?
b[this.id].textContent : b[this.id];
- return val2 > val1;
+ return naturalSortCaseInsensitive(val2, val1);
});
}
if (this.selectedRow) {
- this.cells[this.items[this.selectedRow]].toggleClass("theme-selected");
+ this.cells[this.items[this.selectedRow]].classList.remove("theme-selected");
}
this.items = {};
// Otherwise, just use the sorted array passed to update the cells value.
@@ -1373,7 +1448,7 @@ Column.prototype = {
this.cells[i].id = item[this.uniqueId];
});
if (this.selectedRow) {
- this.cells[this.items[this.selectedRow]].toggleClass("theme-selected");
+ this.cells[this.items[this.selectedRow]].classList.add("theme-selected");
}
this._itemsDirty = false;
this.updateZebra();
@@ -1387,7 +1462,9 @@ Column.prototype = {
if (!cell.hidden) {
i++;
}
- cell.toggleClass("even", !(i % 2));
+
+ let even = !(i % 2);
+ cell.classList.toggle("even", even);
}
},
@@ -1523,8 +1600,8 @@ Cell.prototype = {
return this._value;
},
- toggleClass: function (className, condition) {
- this.label.classList.toggle(className, condition);
+ get classList() {
+ return this.label.classList;
},
/**
@@ -1550,6 +1627,10 @@ Cell.prototype = {
this.label.focus();
},
+ scrollIntoView: function () {
+ this.label.scrollIntoView(false);
+ },
+
destroy: function () {
this.label.remove();
this.label = null;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-10 16:28:49 +0000