Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
"use strict";
loader.lazyRequireGetter(
this,
["clearNamedTimeout", "setNamedTimeout"],
true
);
loader.lazyRequireGetter(
this,
"naturalSortCaseInsensitive",
true
);
loader.lazyGetter(this, "standardSessionString", () => {
const l10n = new Localization(["devtools/client/storage.ftl"], true);
return l10n.formatValueSync("storage-expires-session");
});
const AFTER_SCROLL_DELAY = 100;
// Different types of events emitted by the Various components of the
// TableWidget.
const EVENTS = {
CELL_EDIT: "cell-edit",
COLUMN_SORTED: "column-sorted",
COLUMN_TOGGLED: "column-toggled",
FIELDS_EDITABLE: "fields-editable",
HEADER_CONTEXT_MENU: "header-context-menu",
ROW_EDIT: "row-edit",
ROW_CONTEXT_MENU: "row-context-menu",
ROW_REMOVED: "row-removed",
ROW_SELECTED: "row-selected",
ROW_UPDATED: "row-updated",
TABLE_CLEARED: "table-cleared",
TABLE_FILTERED: "table-filtered",
SCROLL_END: "scroll-end",
};
Object.defineProperty(this, "EVENTS", {
value: EVENTS,
enumerable: true,
writable: false,
});
/**
* A table widget with various features like resizble/toggleable columns,
* sorting, keyboard navigation etc.
*
* @param {Node} node
* The container element for the table widget.
* @param {object} options
* - initialColumns: map of key vs display name for initial columns of
* the table. See @setupColumns for more info.
* - uniqueId: the column which will be the unique identifier of each
* entry in the table. Default: name.
* - wrapTextInElements: Don't ever use 'value' attribute on labels.
* Default: false.
* - emptyText: Localization ID for the text to display when there are
* no entries in the table to display.
* - highlightUpdated: true to highlight the changed/added row.
* - removableColumns: Whether columns are removeable. If set to false,
* the context menu in the headers will not appear.
* - firstColumn: key of the first column that should appear.
* - cellContextMenuId: ID of a <menupopup> element to be set as a
* context menu of every cell.
*/
function TableWidget(node, options = {}) {
EventEmitter.decorate(this);
this.document = node.ownerDocument;
this.window = this.document.defaultView;
this._parent = node;
const {
initialColumns,
emptyText,
uniqueId,
highlightUpdated,
removableColumns,
firstColumn,
wrapTextInElements,
cellContextMenuId,
l10n,
} = options;
this.emptyText = emptyText || "";
this.uniqueId = uniqueId || "name";
this.wrapTextInElements = wrapTextInElements || false;
this.firstColumn = firstColumn || "";
this.highlightUpdated = highlightUpdated || false;
this.removableColumns = removableColumns !== false;
this.cellContextMenuId = cellContextMenuId;
this.l10n = l10n;
this.tbody = this.document.createXULElement("hbox");
this.tbody.className = "table-widget-body theme-body";
this.tbody.setAttribute("flex", "1");
this.tbody.setAttribute("tabindex", "0");
this._parent.appendChild(this.tbody);
this.afterScroll = this.afterScroll.bind(this);
this.tbody.addEventListener("scroll", this.onScroll.bind(this));
// Prepare placeholder
this.placeholder = this.document.createElement("div");
this.placeholder.className = "plain table-widget-empty-text";
this._parent.appendChild(this.placeholder);
this.setPlaceholder(this.emptyText);
this.items = new Map();
this.columns = new Map();
// Setup the column headers context menu to allow users to hide columns at
// will.
if (this.removableColumns) {
this.onPopupCommand = this.onPopupCommand.bind(this);
this.setupHeadersContextMenu();
}
if (initialColumns) {
this.setColumns(initialColumns, uniqueId);
}
this.bindSelectedRow = id => {
this.selectedRow = id;
};
this.on(EVENTS.ROW_SELECTED, this.bindSelectedRow);
this.onChange = this.onChange.bind(this);
this.onEditorDestroyed = this.onEditorDestroyed.bind(this);
this.onEditorTab = this.onEditorTab.bind(this);
this.onKeydown = this.onKeydown.bind(this);
this.onMousedown = this.onMousedown.bind(this);
this.onRowRemoved = this.onRowRemoved.bind(this);
this.document.addEventListener("keydown", this.onKeydown);
this.document.addEventListener("mousedown", this.onMousedown);
}
TableWidget.prototype = {
items: null,
editBookmark: null,
scrollIntoViewOnUpdate: null,
/**
* Return true if the table body has a scrollbar.
*/
get hasScrollbar() {
return this.tbody.scrollHeight > this.tbody.clientHeight;
},
/**
* Getter for the headers context menu popup id.
*/
get headersContextMenu() {
if (this.menupopup) {
return this.menupopup.id;
}
return null;
},
/**
* Select the row corresponding to the json object `id`
*/
set selectedRow(id) {
for (const column of this.columns.values()) {
if (id || id === "") {
column.selectRow(id[this.uniqueId] || id);
} else {
column.selectedRow = null;
column.selectRow(null);
}
}
},
/**
* Is a row currently selected?
*
* @return {Boolean}
* true or false.
*/
get hasSelectedRow() {
return (
this.columns.get(this.uniqueId) &&
this.columns.get(this.uniqueId).selectedRow
);
},
/**
* Returns the json object corresponding to the selected row.
*/
get selectedRow() {
return this.items.get(this.columns.get(this.uniqueId).selectedRow);
},
/**
* Selects the row at index `index`.
*/
set selectedIndex(index) {
for (const column of this.columns.values()) {
column.selectRowAt(index);
}
},
/**
* Returns the index of the selected row.
*/
get selectedIndex() {
return this.columns.get(this.uniqueId).selectedIndex;
},
/**
* Returns the index of the selected row disregarding hidden rows.
*/
get visibleSelectedIndex() {
const column = this.firstVisibleColumn;
const cells = column.visibleCellNodes;
for (let i = 0; i < cells.length; i++) {
if (cells[i].classList.contains("theme-selected")) {
return i;
}
}
return -1;
},
/**
* Returns the first visible column.
*/
get firstVisibleColumn() {
for (const column of this.columns.values()) {
if (column._private) {
continue;
}
if (column.column.clientHeight > 0) {
return column;
}
}
return null;
},
/**
* returns all editable columns.
*/
get editableColumns() {
const filter = columns => {
columns = [...columns].filter(col => {
if (col.clientWidth === 0) {
return false;
}
const cell = col.querySelector(".table-widget-cell");
for (const selector of this._editableFieldsEngine.selectors) {
if (cell.matches(selector)) {
return true;
}
}
return false;
});
return columns;
};
const columns = this._parent.querySelectorAll(".table-widget-column");
return filter(columns);
},
/**
* Emit all cell edit events.
*/
onChange(data) {
const changedField = data.change.field;
const colName = changedField.parentNode.id;
const column = this.columns.get(colName);
const uniqueId = column.table.uniqueId;
const itemIndex = column.cellNodes.indexOf(changedField);
const items = {};
for (const [name, col] of this.columns) {
items[name] = col.cellNodes[itemIndex].value;
}
const change = {
host: this.host,
key: uniqueId,
field: colName,
oldValue: data.change.oldValue,
newValue: data.change.newValue,
items,
};
// 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
// save the uniqueId in editBookmark.
this.editBookmark =
colName === uniqueId ? change.newValue : items[uniqueId];
this.emit(EVENTS.CELL_EDIT, change);
},
onEditorDestroyed() {
this._editableFieldsEngine = null;
},
/**
* Called by the inplace editor when Tab / Shift-Tab is pressed in edit-mode.
* Because tables are live any row, column, cell or table can be added,
* deleted or moved by deleting and adding e.g. a row again.
*
* This presents various challenges when navigating via the keyboard so please
* keep this in mind whenever editing this method.
*
* @param {Event} event
* Keydown event
*/
onEditorTab(event) {
const textbox = event.target;
const editor = this._editableFieldsEngine;
if (textbox.id !== editor.INPUT_ID) {
return;
}
const column = textbox.parentNode;
// Changing any value can change the position of the row depending on which
// column it is currently sorted on. In addition to this, the table cell may
// have been edited and had to be recreated when the user has pressed tab or
// shift+tab. Both of these situations require us to recover our target,
// select the appropriate row and move the textbox on to the next cell.
if (editor.changePending) {
// We need to apply a change, which can mean that the position of cells
// within the table can change. Because of this we need to wait for
// EVENTS.ROW_EDIT and then move the textbox.
this.once(EVENTS.ROW_EDIT, uniqueId => {
let columnObj;
const cols = this.editableColumns;
let rowIndex = this.visibleSelectedIndex;
const colIndex = cols.indexOf(column);
let newIndex;
// If the row has been deleted we should bail out.
if (!uniqueId) {
return;
}
// Find the column we need to move to.
if (event.shiftKey) {
// Navigate backwards on shift tab.
if (colIndex === 0) {
if (rowIndex === 0) {
return;
}
newIndex = cols.length - 1;
} else {
newIndex = colIndex - 1;
}
} else if (colIndex === cols.length - 1) {
const id = cols[0].id;
columnObj = this.columns.get(id);
const maxRowIndex = columnObj.visibleCellNodes.length - 1;
if (rowIndex === maxRowIndex) {
return;
}
newIndex = 0;
} else {
newIndex = colIndex + 1;
}
const newcol = cols[newIndex];
columnObj = this.columns.get(newcol.id);
// Select the correct row even if it has moved due to sorting.
const dataId = editor.currentTarget.getAttribute("data-id");
if (this.items.get(dataId)) {
this.emit(EVENTS.ROW_SELECTED, dataId);
} else {
this.emit(EVENTS.ROW_SELECTED, uniqueId);
}
// EVENTS.ROW_SELECTED may have changed the selected row so let's save
// the result in rowIndex.
rowIndex = this.visibleSelectedIndex;
// Edit the appropriate cell.
const cells = columnObj.visibleCellNodes;
const cell = cells[rowIndex];
editor.edit(cell);
// Remove flash-out class... it won't have been auto-removed because the
// cell was hidden for editing.
cell.classList.remove("flash-out");
});
}
// Begin cell edit. We always do this so that we can begin editing even in
// the case that the previous edit will cause the row to move.
const cell = this.getEditedCellOnTab(event, column);
editor.edit(cell);
// Prevent default input tabbing behaviour
event.preventDefault();
},
/**
* Get the cell that will be edited next on tab / shift tab and highlight the
* appropriate row. Edits etc. are not taken into account.
*
* This is used to tab from one field to another without editing and makes the
* editor much more responsive.
*
* @param {Event} event
* Keydown event
*/
getEditedCellOnTab(event, column) {
let cell = null;
const cols = this.editableColumns;
const rowIndex = this.visibleSelectedIndex;
const colIndex = cols.indexOf(column);
const maxCol = cols.length - 1;
const maxRow = this.columns.get(column.id).visibleCellNodes.length - 1;
if (event.shiftKey) {
// Navigate backwards on shift tab.
if (colIndex === 0) {
if (rowIndex === 0) {
this._editableFieldsEngine.completeEdit();
return null;
}
column = cols[cols.length - 1];
const cells = this.columns.get(column.id).visibleCellNodes;
cell = cells[rowIndex - 1];
const rowId = cell.getAttribute("data-id");
this.emit(EVENTS.ROW_SELECTED, rowId);
} else {
column = cols[colIndex - 1];
const cells = this.columns.get(column.id).visibleCellNodes;
cell = cells[rowIndex];
}
} else if (colIndex === maxCol) {
// If in the rightmost column on the last row stop editing.
if (rowIndex === maxRow) {
this._editableFieldsEngine.completeEdit();
return null;
}
// If in the rightmost column of a row then move to the first column of
// the next row.
column = cols[0];
const cells = this.columns.get(column.id).visibleCellNodes;
cell = cells[rowIndex + 1];
const rowId = cell.getAttribute("data-id");
this.emit(EVENTS.ROW_SELECTED, rowId);
} else {
// Navigate forwards on tab.
column = cols[colIndex + 1];
const cells = this.columns.get(column.id).visibleCellNodes;
cell = cells[rowIndex];
}
return cell;
},
/**
* Reset the editable fields engine if the currently edited row is removed.
*
* @param {String} event
* The event name "event-removed."
* @param {Object} row
* The values from the removed row.
*/
onRowRemoved(row) {
if (!this._editableFieldsEngine || !this._editableFieldsEngine.isEditing) {
return;
}
const removedKey = row[this.uniqueId];
const column = this.columns.get(this.uniqueId);
if (removedKey in column.items) {
return;
}
// The target is lost so we need to hide the remove the textbox from the DOM
// and reset the target nodes.
this.onEditorTargetLost();
},
/**
* Cancel an edit because the edit target has been lost.
*/
onEditorTargetLost() {
const editor = this._editableFieldsEngine;
if (!editor || !editor.isEditing) {
return;
}
editor.cancelEdit();
},
/**
* Keydown event handler for the table. Used for keyboard navigation amongst
* rows.
*/
onKeydown(event) {
// If we are in edit mode bail out.
if (this._editableFieldsEngine && this._editableFieldsEngine.isEditing) {
return;
}
// We need to get the first *visible* selected cell. Some columns are hidden
// e.g. because they contain a unique compound key for cookies that is never
// displayed in the UI. To do this we get all selected cells and filter out
// any that are hidden.
const selectedCells = [
...this.tbody.querySelectorAll(".theme-selected"),
].filter(cell => cell.clientWidth > 0);
// Select the first visible selected cell.
const selectedCell = selectedCells[0];
if (!selectedCell) {
return;
}
let colName;
let column;
let visibleCells;
let index;
let cell;
switch (event.keyCode) {
case KeyCodes.DOM_VK_UP:
event.preventDefault();
colName = selectedCell.parentNode.id;
column = this.columns.get(colName);
visibleCells = column.visibleCellNodes;
index = visibleCells.indexOf(selectedCell);
if (index > 0) {
index--;
} else {
index = visibleCells.length - 1;
}
cell = visibleCells[index];
this.emit(EVENTS.ROW_SELECTED, cell.getAttribute("data-id"));
break;
case KeyCodes.DOM_VK_DOWN:
event.preventDefault();
colName = selectedCell.parentNode.id;
column = this.columns.get(colName);
visibleCells = column.visibleCellNodes;
index = visibleCells.indexOf(selectedCell);
if (index === visibleCells.length - 1) {
index = 0;
} else {
index++;
}
cell = visibleCells[index];
this.emit(EVENTS.ROW_SELECTED, cell.getAttribute("data-id"));
break;
}
},
/**
* Close any editors if the area "outside the table" is clicked. In reality,
* the table covers the whole area but there are labels filling the top few
* rows. This method clears any inline editors if an area outside a textbox or
* label is clicked.
*/
onMousedown({ target }) {
const localName = target.localName;
if (localName === "input" || !this._editableFieldsEngine) {
return;
}
// Force any editor fields to hide due to XUL focus quirks.
this._editableFieldsEngine.blur();
},
/**
* Make table fields editable.
*
* @param {String|Array} editableColumns
* An array or comma separated list of editable column names.
*/
makeFieldsEditable(editableColumns) {
const selectors = [];
if (typeof editableColumns === "string") {
editableColumns = [editableColumns];
}
for (const id of editableColumns) {
selectors.push("#" + id + " .table-widget-cell");
}
for (const [name, column] of this.columns) {
if (!editableColumns.includes(name)) {
column.column.setAttribute("readonly", "");
}
}
if (this._editableFieldsEngine) {
this._editableFieldsEngine.selectors = selectors;
this._editableFieldsEngine.items = this.items;
} else {
this._editableFieldsEngine = new EditableFieldsEngine({
root: this.tbody,
onTab: this.onEditorTab,
onTriggerEvent: "dblclick",
selectors,
items: this.items,
});
this._editableFieldsEngine.on("change", this.onChange);
this._editableFieldsEngine.on("destroyed", this.onEditorDestroyed);
this.on(EVENTS.ROW_REMOVED, this.onRowRemoved);
this.on(EVENTS.TABLE_CLEARED, this._editableFieldsEngine.cancelEdit);
this.emit(EVENTS.FIELDS_EDITABLE, this._editableFieldsEngine);
}
},
destroy() {
this.off(EVENTS.ROW_SELECTED, this.bindSelectedRow);
this.off(EVENTS.ROW_REMOVED, this.onRowRemoved);
this.document.removeEventListener("keydown", this.onKeydown);
this.document.removeEventListener("mousedown", this.onMousedown);
if (this._editableFieldsEngine) {
this.off(EVENTS.TABLE_CLEARED, this._editableFieldsEngine.cancelEdit);
this._editableFieldsEngine.off("change", this.onChange);
this._editableFieldsEngine.off("destroyed", this.onEditorDestroyed);
this._editableFieldsEngine.destroy();
this._editableFieldsEngine = null;
}
if (this.menupopup) {
this.menupopup.removeEventListener("command", this.onPopupCommand);
this.menupopup.remove();
}
},
/**
* Sets the localization ID of the description to be shown when the table is empty.
*
* @param {String} l10nID
* The ID of the localization string.
* @param {String} learnMoreURL
* A URL referring to a website with further information related to
* the data shown in the table widget.
*/
setPlaceholder(l10nID, learnMoreURL) {
if (learnMoreURL) {
let placeholderLink = this.placeholder.firstElementChild;
if (!placeholderLink) {
placeholderLink = this.document.createElement("a");
placeholderLink.setAttribute("target", "_blank");
placeholderLink.setAttribute("data-l10n-name", "learn-more-link");
this.placeholder.appendChild(placeholderLink);
}
placeholderLink.setAttribute("href", learnMoreURL);
} else {
// Remove link element if no learn more URL is given
this.placeholder.firstElementChild?.remove();
}
this.l10n.setAttributes(this.placeholder, l10nID);
},
/**
* Prepares the context menu for the headers of the table columns. This
* context menu allows users to toggle various columns, only with an exception
* of the unique columns and when only two columns are visible in the table.
*/
setupHeadersContextMenu() {
let popupset = this.document.getElementsByTagName("popupset")[0];
if (!popupset) {
popupset = this.document.createXULElement("popupset");
this.document.documentElement.appendChild(popupset);
}
this.menupopup = this.document.createXULElement("menupopup");
this.menupopup.id = "table-widget-column-select";
this.menupopup.addEventListener("command", this.onPopupCommand);
popupset.appendChild(this.menupopup);
this.populateMenuPopup();
},
/**
* 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(privateColumns = []) {
if (!this.menupopup) {
return;
}
while (this.menupopup.firstChild) {
this.menupopup.firstChild.remove();
}
for (const column of this.columns.values()) {
if (privateColumns.includes(column.id)) {
continue;
}
const menuitem = this.document.createXULElement("menuitem");
menuitem.setAttribute("label", column.header.getAttribute("value"));
menuitem.setAttribute("data-id", column.id);
menuitem.setAttribute("type", "checkbox");
menuitem.setAttribute("checked", !column.hidden);
if (column.id == this.uniqueId) {
menuitem.setAttribute("disabled", "true");
}
this.menupopup.appendChild(menuitem);
}
const checked = this.menupopup.querySelectorAll("menuitem[checked]");
if (checked.length == 2) {
checked[checked.length - 1].setAttribute("disabled", "true");
}
},
/**
* Event handler for the `command` event on the column headers context menu
*/
onPopupCommand(event) {
const item = event.originalTarget;
let checked = !!item.getAttribute("checked");
const id = item.getAttribute("data-id");
this.emit(EVENTS.HEADER_CONTEXT_MENU, id, checked);
checked = this.menupopup.querySelectorAll("menuitem[checked]");
const disabled = this.menupopup.querySelectorAll("menuitem[disabled]");
if (checked.length == 2) {
checked[checked.length - 1].setAttribute("disabled", "true");
} else if (disabled.length > 1) {
disabled[disabled.length - 1].removeAttribute("disabled");
}
},
/**
* Creates the columns in the table. Without calling this method, data cannot
* be inserted into the table unless `initialColumns` was supplied.
*
* @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
* The id of the column on which the table will be initially sorted on.
* @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(
columns,
sortOn = this.sortedOn,
hiddenColumns = [],
privateColumns = []
) {
for (const column of this.columns.values()) {
column.destroy();
}
this.columns.clear();
if (!(sortOn in columns)) {
sortOn = null;
}
if (!(this.firstColumn in columns)) {
this.firstColumn = null;
}
if (this.firstColumn) {
this.columns.set(
this.firstColumn,
new Column(this, this.firstColumn, columns[this.firstColumn])
);
}
for (const id in columns) {
if (!sortOn) {
sortOn = id;
}
if (this.firstColumn && id == this.firstColumn) {
continue;
}
this.columns.set(id, new Column(this, id, columns[id]));
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(privateColumns);
},
/**
* Returns true if the passed string or the row json object corresponds to the
* selected item in the table.
*/
isSelected(item) {
if (typeof item == "object") {
item = item[this.uniqueId];
}
return this.selectedRow && item == this.selectedRow[this.uniqueId];
},
/**
* Selects the row corresponding to the `id` json.
*/
selectRow(id) {
this.selectedRow = id;
},
/**
* Selects the next row. Cycles over to the first row if last row is selected
*/
selectNextRow() {
for (const column of this.columns.values()) {
column.selectNextRow();
}
},
/**
* Selects the previous row. Cycles over to the last row if first row is
* selected.
*/
selectPreviousRow() {
for (const column of this.columns.values()) {
column.selectPreviousRow();
}
},
/**
* Clears any selected row.
*/
clearSelection() {
this.selectedIndex = -1;
},
/**
* Adds a row into the table.
*
* @param {object} item
* The object from which the key-value pairs will be taken and added
* into the row. This object can have any arbitarary key value pairs,
* but only those will be used whose keys match to the ids of the
* columns.
* @param {boolean} suppressFlash
* true to not flash the row while inserting the row.
*/
push(item, suppressFlash) {
if (!this.sortedOn || !this.columns) {
console.error("Can't insert item without defining columns first");
return;
}
if (this.items.has(item[this.uniqueId])) {
this.update(item);
return;
}
if (this.editBookmark && !this.items.has(this.editBookmark)) {
// Key has been updated... update bookmark.
this.editBookmark = item[this.uniqueId];
}
const index = this.columns.get(this.sortedOn).push(item);
for (const [key, column] of this.columns) {
if (key != this.sortedOn) {
column.insertAt(item, index);
}
column.updateZebra();
}
this.items.set(item[this.uniqueId], item);
this.tbody.removeAttribute("empty");
if (!suppressFlash) {
this.emit(EVENTS.ROW_UPDATED, item[this.uniqueId]);
}
this.emit(EVENTS.ROW_EDIT, item[this.uniqueId]);
},
/**
* Removes the row associated with the `item` object.
*/
remove(item) {
if (typeof item != "object") {
item = this.items.get(item);
}
if (!item) {
return;
}
const removed = this.items.delete(item[this.uniqueId]);
if (!removed) {
return;
}
for (const column of this.columns.values()) {
column.remove(item);
column.updateZebra();
}
if (this.items.size === 0) {
this.selectedRow = null;
this.tbody.setAttribute("empty", "empty");
}
this.emit(EVENTS.ROW_REMOVED, item);
},
/**
* Updates the items in the row corresponding to the `item` object previously
* used to insert the row using `push` method. The linking is done via the
* `uniqueId` key's value.
*/
update(item) {
const oldItem = this.items.get(item[this.uniqueId]);
if (!oldItem) {
return;
}
this.items.set(item[this.uniqueId], item);
let changed = false;
for (const column of this.columns.values()) {
if (item[column.id] != oldItem[column.id]) {
column.update(item);
changed = true;
}
}
if (changed) {
this.emit(EVENTS.ROW_UPDATED, item[this.uniqueId]);
this.emit(EVENTS.ROW_EDIT, item[this.uniqueId]);
}
},
/**
* Removes all of the rows from the table.
*/
clear() {
this.items.clear();
for (const column of this.columns.values()) {
column.clear();
}
this.tbody.setAttribute("empty", "empty");
this.setPlaceholder(this.emptyText);
this.selectedRow = null;
this.emit(EVENTS.TABLE_CLEARED, this);
},
/**
* Sorts the table by a given column.
*
* @param {string} column
* The id of the column on which the table should be sorted.
*/
sortBy(column) {
this.emit(EVENTS.COLUMN_SORTED, column);
this.sortedOn = column;
if (!this.items.size) {
return;
}
// First sort the column to "sort by" explicitly.
const sortedItems = this.columns.get(column).sort([...this.items.values()]);
// Then, sort all the other columns (id !== column) only based on the
// sortedItems provided by the first sort.
// Each column keeps track of the fact that it is the "sort by" column or
// not, so this will not shuffle the items and will just make sure each
// column displays the correct value.
for (const [id, col] of this.columns) {
if (id !== column) {
col.sort(sortedItems);
}
}
},
/**
* Filters the table based on a specific value
*
* @param {String} value: The filter value
* @param {Array} ignoreProps: Props to ignore while filtering
*/
filterItems(value, ignoreProps = []) {
if (this.filteredValue == value) {
return;
}
if (this._editableFieldsEngine) {
this._editableFieldsEngine.completeEdit();
}
this.filteredValue = value;
if (!value) {
this.emit(EVENTS.TABLE_FILTERED, []);
return;
}
// Shouldn't be case-sensitive
value = value.toLowerCase();
const itemsToHide = [...this.items.keys()];
// Loop through all items and hide unmatched items
for (const [id, val] of this.items) {
for (const prop in val) {
const column = this.columns.get(prop);
if (ignoreProps.includes(prop) || column.hidden) {
continue;
}
const propValue = val[prop].toString().toLowerCase();
if (propValue.includes(value)) {
itemsToHide.splice(itemsToHide.indexOf(id), 1);
break;
}
}
}
this.emit(EVENTS.TABLE_FILTERED, itemsToHide);
},
/**
* Calls the afterScroll function when the user has stopped scrolling
*/
onScroll() {
clearNamedTimeout("table-scroll");
setNamedTimeout("table-scroll", AFTER_SCROLL_DELAY, this.afterScroll);
},
/**
* Emits the "scroll-end" event when the whole table is scrolled
*/
afterScroll() {
const maxScrollTop = this.tbody.scrollHeight - this.tbody.clientHeight;
// Emit scroll-end event when 9/10 of the table is scrolled
if (this.tbody.scrollTop >= 0.9 * maxScrollTop) {
this.emit("scroll-end");
}
},
};
TableWidget.EVENTS = EVENTS;
module.exports.TableWidget = TableWidget;
/**
* A single column object in the table.
*
* @param {TableWidget} table
* The table object to which the column belongs.
* @param {string} id
* Id of the column.
* @param {String} header
* 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;
this.id = id;
this.uniqueId = table.uniqueId;
this.wrapTextInElements = table.wrapTextInElements;
this.table = table;
this.cells = [];
this.items = {};
this.highlightUpdated = table.highlightUpdated;
this.column = this.document.createElementNS(HTML_NS, "div");
this.column.id = id;
this.column.className = "table-widget-column";
this.tbody.appendChild(this.column);
this.splitter = this.document.createXULElement("splitter");
this.splitter.className = "devtools-side-splitter";
this.tbody.appendChild(this.splitter);
this.header = this.document.createXULElement("label");
this.header.className = "devtools-toolbar table-widget-column-header";
this.header.setAttribute("value", header);
this.column.appendChild(this.header);
if (table.headersContextMenu) {
this.header.setAttribute("context", table.headersContextMenu);
}
this.toggleColumn = this.toggleColumn.bind(this);
this.table.on(EVENTS.HEADER_CONTEXT_MENU, this.toggleColumn);
this.onColumnSorted = this.onColumnSorted.bind(this);
this.table.on(EVENTS.COLUMN_SORTED, this.onColumnSorted);
this.onRowUpdated = this.onRowUpdated.bind(this);
this.table.on(EVENTS.ROW_UPDATED, this.onRowUpdated);
this.onTableFiltered = this.onTableFiltered.bind(this);
this.table.on(EVENTS.TABLE_FILTERED, this.onTableFiltered);
this.onClick = this.onClick.bind(this);
this.onMousedown = this.onMousedown.bind(this);
this.column.addEventListener("click", this.onClick);
this.column.addEventListener("mousedown", this.onMousedown);
}
Column.prototype = {
// items is a cell-id to cell-index map. It is basically a reverse map of the
// this.cells object and is used to quickly reverse lookup a cell by its id
// instead of looping through the cells array. This reverse map is not kept
// upto date in sync with the cells array as updating it is in itself a loop
// through all the cells of the columns. Thus update it on demand when it goes
// out of sync with this.cells.
items: null,
// _itemsDirty is a flag which becomes true when this.items goes out of sync
// with this.cells
_itemsDirty: null,
selectedRow: null,
cells: null,
/**
* Gets whether the table is sorted on this column or not.
* 0 - not sorted.
* 1 - ascending order
* 2 - descending order
*/
get sorted() {
return this._sortState || 0;
},
/**
* Returns a boolean indicating whether the column is hidden.
*/
get hidden() {
return this.column.hidden;
},
/**
* 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) {
if (!value) {
this.header.removeAttribute("sorted");
} else {
this.header.setAttribute(
"sorted",
value == 1 ? "ascending" : "descending"
);
}
this._sortState = value;
},
/**
* Gets the selected row in the column.
*/
get selectedIndex() {
if (!this.selectedRow) {
return -1;
}
return this.items[this.selectedRow];
},
get cellNodes() {
return [...this.column.querySelectorAll(".table-widget-cell")];
},
get visibleCellNodes() {
const editor = this.table._editableFieldsEngine;
const nodes = this.cellNodes.filter(node => {
// If the cell is currently being edited we should class it as visible.
if (editor && editor.currentTarget === node) {
return true;
}
return node.clientWidth !== 0;
});
return nodes;
},
/**
* Called when the column is sorted by.
*
* @param {string} column
* The id of the column being sorted by.
*/
onColumnSorted(column) {
if (column != this.id) {
this.sorted = 0;
return;
} else if (this.sorted == 0 || this.sorted == 2) {
this.sorted = 1;
} else {
this.sorted = 2;
}
this.updateZebra();
},
onTableFiltered(itemsToHide) {
this._updateItems();
if (!this.cells) {
return;
}
for (const cell of this.cells) {
cell.hidden = false;
}
for (const id of itemsToHide) {
this.cells[this.items[id]].hidden = true;
}
this.updateZebra();
},
/**
* 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
* @param {string} id
* The unique id of the object associated with the row.
*/
onRowUpdated(id) {
this._updateItems();
if (this.highlightUpdated && this.items[id] != null) {
if (this.table.scrollIntoViewOnUpdate) {
const 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
// save the uniqueId in editBookmark. Here we send the signal that the
// row has been edited and that the row needs to be selected again.
this.table.emit(EVENTS.ROW_SELECTED, this.table.editBookmark);
this.table.editBookmark = null;
}
this.cells[this.items[id]].flash();
}
this.updateZebra();
},
destroy() {
this.table.off(EVENTS.COLUMN_SORTED, this.onColumnSorted);
this.table.off(EVENTS.HEADER_CONTEXT_MENU, this.toggleColumn);
this.table.off(EVENTS.ROW_UPDATED, this.onRowUpdated);
this.table.off(EVENTS.TABLE_FILTERED, this.onTableFiltered);
this.column.removeEventListener("click", this.onClick);
this.column.removeEventListener("mousedown", this.onMousedown);
this.splitter.remove();
this.column.remove();
this.cells = null;
this.items = null;
this.selectedRow = null;
},
/**
* Selects the row at the `index` index
*/
selectRowAt(index) {
if (this.selectedRow != null) {
this.cells[this.items[this.selectedRow]].classList.remove(
"theme-selected"
);
}
const cell = this.cells[index];
if (cell) {
cell.classList.add("theme-selected");
this.selectedRow = cell.id;
} else {
this.selectedRow = null;
}
},
/**
* Selects the row with the object having the `uniqueId` value as `id`
*/
selectRow(id) {
this._updateItems();
this.selectRowAt(this.items[id]);
},
/**
* Selects the next row. Cycles to first if last row is selected.
*/
selectNextRow() {
this._updateItems();
let index = this.items[this.selectedRow] + 1;
if (index == this.cells.length) {
index = 0;
}
this.selectRowAt(index);
},
/**
* Selects the previous row. Cycles to last if first row is selected.
*/
selectPreviousRow() {
this._updateItems();
let index = this.items[this.selectedRow] - 1;
if (index == -1) {
index = this.cells.length - 1;
}
this.selectRowAt(index);
},
/**
* Pushes the `item` object into the column. If this column is sorted on,
* then inserts the object at the right position based on the column's id
* key's value.
*
* @returns {number}
* The index of the currently pushed item.
*/
push(item) {
const value = item[this.id];
if (this.sorted) {
let index;
if (this.sorted == 1) {
index = this.cells.findIndex(element => {
return (
naturalSortCaseInsensitive(
value,
element.value,
standardSessionString
) === -1
);
});
} else {
index = this.cells.findIndex(element => {
return (
naturalSortCaseInsensitive(
value,
element.value,
standardSessionString
) === 1
);
});
}
index = index >= 0 ? index : this.cells.length;
if (index < this.cells.length) {
this._itemsDirty = true;
}
this.items[item[this.uniqueId]] = index;
this.cells.splice(index, 0, new Cell(this, item, this.cells[index]));
return index;
}
this.items[item[this.uniqueId]] = this.cells.length;
return this.cells.push(new Cell(this, item)) - 1;
},
/**
* Inserts the `item` object at the given `index` index in the table.
*/
insertAt(item, index) {
if (index < this.cells.length) {
this._itemsDirty = true;
}
this.items[item[this.uniqueId]] = index;
this.cells.splice(index, 0, new Cell(this, item, this.cells[index]));
this.updateZebra();
},
/**
* Event handler for the command event coming from the header context menu.
* Toggles the column if it was requested by the user.
* When called explicitly without parameters, it toggles the corresponding
* column.
*
* @param {string} event
* The name of the event. i.e. EVENTS.HEADER_CONTEXT_MENU
* @param {string} id
* Id of the column to be toggled
* @param {string} checked
* true if the column is visible
*/
toggleColumn(id, checked) {
if (!arguments.length) {
// Act like a toggling method when called with no params
id = this.id;
checked = this.column.hidden;
}
if (id != this.id) {
return;
}
if (checked) {
this.column.hidden = false;
this.tbody.insertBefore(this.splitter, this.column.nextSibling);
} else {
this.column.hidden = true;
this.splitter.remove();
}
},
/**
* Removes the corresponding item from the column and hide the last visible
* splitter with CSS, so we do not add splitter elements for hidden columns.
*/
remove(item) {
this._updateItems();
const index = this.items[item[this.uniqueId]];
if (index == null) {
return;
}
if (index < this.cells.length) {
this._itemsDirty = true;
}
this.cells[index].destroy();
this.cells.splice(index, 1);
delete this.items[item[this.uniqueId]];
},
/**
* Updates the corresponding item from the column.
*/
update(item) {
this._updateItems();
const index = this.items[item[this.uniqueId]];
if (index == null) {
return;
}
this.cells[index].value = item[this.id];
},
/**
* Updates the `this.items` cell-id vs cell-index map to be in sync with
* `this.cells`.
*/
_updateItems() {
if (!this._itemsDirty) {
return;
}
for (let i = 0; i < this.cells.length; i++) {
this.items[this.cells[i].id] = i;
}
this._itemsDirty = false;
},
/**
* Clears the current column
*/
clear() {
this.cells = [];
this.items = {};
this._itemsDirty = false;
while (this.header.nextSibling) {
this.header.nextSibling.remove();
}
},
/**
* Sorts the given items and returns the sorted list if the table was sorted
* by this column.
*/
sort(items) {
// Only sort the array if we are sorting based on this column
if (this.sorted == 1) {
items.sort((a, b) => {
const val1 = Node.isInstance(a[this.id])
? a[this.id].textContent
: a[this.id];
const val2 = Node.isInstance(b[this.id])
? b[this.id].textContent
: b[this.id];
return naturalSortCaseInsensitive(val1, val2, standardSessionString);
});
} else if (this.sorted > 1) {
items.sort((a, b) => {
const val1 = Node.isInstance(a[this.id])
? a[this.id].textContent
: a[this.id];
const val2 = Node.isInstance(b[this.id])
? b[this.id].textContent
: b[this.id];
return naturalSortCaseInsensitive(val2, val1, standardSessionString);
});
}
if (this.selectedRow) {
this.cells[this.items[this.selectedRow]].classList.remove(
"theme-selected"
);
}
this.items = {};
// Otherwise, just use the sorted array passed to update the cells value.
for (const [i, item] of items.entries()) {
// Sometimes we would reach the situation in which we were trying to sort
// and item that was no longer available in the TableWidget.
// We should find exactly what is triggering it.
if (!this.cells[i]) {
continue;
}
this.items[item[this.uniqueId]] = i;
this.cells[i].value = item[this.id];
this.cells[i].id = item[this.uniqueId];
}
if (this.selectedRow) {
this.cells[this.items[this.selectedRow]].classList.add("theme-selected");
}
this._itemsDirty = false;
this.updateZebra();
return items;
},
updateZebra() {
this._updateItems();
let i = 0;
for (const cell of this.cells) {
if (!cell.hidden) {
i++;
}
const even = !(i % 2);
cell.classList.toggle("even", even);
}
},
/**
* Click event handler for the column. Used to detect click on header for
* for sorting.
*/
onClick(event) {
const target = event.originalTarget;
if (target.nodeType !== target.ELEMENT_NODE || target == this.column) {
return;
}
if (event.button == 0 && target == this.header) {
this.table.sortBy(this.id);
}
},
/**
* Mousedown event handler for the column. Used to select rows.
*/
onMousedown(event) {
const target = event.originalTarget;
if (
target.nodeType !== target.ELEMENT_NODE ||
target == this.column ||
target == this.header
) {
return;
}
if (event.button == 0) {
const closest = target.closest("[data-id]");
if (!closest) {
return;
}
const dataid = closest.getAttribute("data-id");
this.table.emit(EVENTS.ROW_SELECTED, dataid);
}
},
};
/**
* A single cell in a column
*
* @param {Column} column
* The column object to which the cell belongs.
* @param {object} item
* 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
*/
function Cell(column, item, nextCell) {
const document = column.document;
this.wrapTextInElements = column.wrapTextInElements;
this.label = document.createXULElement("label");
this.label.setAttribute("crop", "end");
this.label.className = "plain table-widget-cell";
if (nextCell) {
column.column.insertBefore(this.label, nextCell.label);
} else {
column.column.appendChild(this.label);
}
if (column.table.cellContextMenuId) {
this.label.setAttribute("context", column.table.cellContextMenuId);
this.label.addEventListener("contextmenu", () => {
// Make the ID of the clicked cell available as a property on the table.
// It's then available for the popupshowing or command handler.
column.table.contextMenuRowId = this.id;
});
}
this.value = item[column.id];
this.id = item[column.uniqueId];
}
Cell.prototype = {
set id(value) {
this._id = value;
this.label.setAttribute("data-id", value);
},
get id() {
return this._id;
},
get hidden() {
return this.label.hidden;
},
set hidden(value) {
this.label.hidden = value;
},
set value(value) {
this._value = value;
if (value == null) {
this.label.setAttribute("value", "");
return;
}
if (this.wrapTextInElements && !Node.isInstance(value)) {
const span = this.label.ownerDocument.createElementNS(HTML_NS, "span");
span.textContent = value;
value = span;
}
if (Node.isInstance(value)) {
this.label.removeAttribute("value");
while (this.label.firstChild) {
this.label.firstChild.remove();
}
this.label.appendChild(value);
} else {
this.label.setAttribute("value", value + "");
}
},
get value() {
return this._value;
},
get classList() {
return this.label.classList;
},
/**
* Flashes the cell for a brief time. This when done for with cells in all
* columns, makes it look like the row is being highlighted/flashed.
*/
flash() {
if (!this.label.parentNode) {
return;
}
this.label.classList.remove("flash-out");
// Cause a reflow so that the animation retriggers on adding back the class
let a = this.label.parentNode.offsetWidth; // eslint-disable-line
const onAnimEnd = () => {
this.label.classList.remove("flash-out");
this.label.removeEventListener("animationend", onAnimEnd);
};
this.label.addEventListener("animationend", onAnimEnd);
this.label.classList.add("flash-out");
},
focus() {
this.label.focus();
},
scrollIntoView() {
this.label.scrollIntoView(false);
},
destroy() {
this.label.remove();
this.label = null;
},
};
/**
* Simple widget to make nodes matching a CSS selector editable.
*
* @param {Object} options
* An object with the following format:
* {
* // The node that will act as a container for the editor e.g. a
* // div or table.
* root: someNode,
*
* // The onTab event to be handled by the caller.
* onTab: function(event) { ... }
*
* // Optional event used to trigger the editor. By default this is
* // dblclick.
* onTriggerEvent: "dblclick",
*
* // Array or comma separated string of CSS Selectors matching
* // elements that are to be made editable.
* selectors: [
* "#name .table-widget-cell",
* "#value .table-widget-cell"
* ]
* }
*/
function EditableFieldsEngine(options) {
EventEmitter.decorate(this);
if (!Array.isArray(options.selectors)) {
options.selectors = [options.selectors];
}
this.root = options.root;
this.selectors = options.selectors;
this.onTab = options.onTab;
this.onTriggerEvent = options.onTriggerEvent || "dblclick";
this.items = options.items;
this.edit = this.edit.bind(this);
this.cancelEdit = this.cancelEdit.bind(this);
this.destroy = this.destroy.bind(this);
this.onTrigger = this.onTrigger.bind(this);
this.root.addEventListener(this.onTriggerEvent, this.onTrigger);
}
EditableFieldsEngine.prototype = {
INPUT_ID: "inlineEditor",
get changePending() {
return this.isEditing && this.textbox.value !== this.currentValue;
},
get isEditing() {
return this.root && !this.textbox.hidden;
},
get textbox() {
if (!this._textbox) {
const doc = this.root.ownerDocument;
this._textbox = doc.createElementNS(HTML_NS, "input");
this._textbox.id = this.INPUT_ID;
this.onKeydown = this.onKeydown.bind(this);
this._textbox.addEventListener("keydown", this.onKeydown);
this.completeEdit = this.completeEdit.bind(this);
doc.addEventListener("blur", this.completeEdit);
}
return this._textbox;
},
/**
* Called when a trigger event is detected (default is dblclick).
*
* @param {EventTarget} target
* Calling event's target.
*/
onTrigger({ target }) {
this.edit(target);
},
/**
* Handle keydowns when in edit mode:
* - <escape> revert the value and close the textbox.
* - <return> apply the value and close the textbox.
* - <tab> Handled by the consumer's `onTab` callback.
* - <shift><tab> Handled by the consumer's `onTab` callback.
*
* @param {Event} event
* The calling event.
*/
onKeydown(event) {
if (!this.textbox) {
return;
}
switch (event.keyCode) {
case KeyCodes.DOM_VK_ESCAPE:
this.cancelEdit();
event.preventDefault();
break;
case KeyCodes.DOM_VK_RETURN:
this.completeEdit();
break;
case KeyCodes.DOM_VK_TAB:
if (this.onTab) {
this.onTab(event);
}
break;
}
},
/**
* Overlay the target node with an edit field.
*
* @param {Node} target
* Dom node to be edited.
*/
edit(target) {
if (!target) {
return;
}
// Some item names and values are not parsable by the client or server so should not be
// editable.
const name = target.getAttribute("data-id");
const item = this.items.get(name);
if ("isValueEditable" in item && !item.isValueEditable) {
return;
}
target.scrollIntoView(false);
target.focus();
if (!target.matches(this.selectors.join(","))) {
return;
}
// If we are actively editing something complete the edit first.
if (this.isEditing) {
this.completeEdit();
}
this.copyStyles(target, this.textbox);
target.parentNode.insertBefore(this.textbox, target);
this.currentTarget = target;
this.textbox.value = this.currentValue = target.value;
target.hidden = true;
this.textbox.hidden = false;
this.textbox.focus();
this.textbox.select();
},
completeEdit() {
if (!this.isEditing) {
return;
}
const oldValue = this.currentValue;
const newValue = this.textbox.value;
const changed = oldValue !== newValue;
this.textbox.hidden = true;
if (!this.currentTarget) {
return;
}
this.currentTarget.hidden = false;
if (changed) {
this.currentTarget.value = newValue;
const data = {
change: {
field: this.currentTarget,
oldValue,
newValue,
},
};
this.emit("change", data);
}
},
/**
* Cancel an edit.
*/
cancelEdit() {
if (!this.isEditing) {
return;
}
if (this.currentTarget) {
this.currentTarget.hidden = false;
}
this.textbox.hidden = true;
},
/**
* Stop edit mode and apply changes.
*/
blur() {
if (this.isEditing) {
this.completeEdit();
}
},
/**
* Copies various styles from one node to another.
*
* @param {Node} source
* The node to copy styles from.
* @param {Node} destination [description]
* The node to copy styles to.
*/
copyStyles(source, destination) {
const style = source.ownerDocument.defaultView.getComputedStyle(source);
const props = [
"borderTopWidth",
"borderRightWidth",
"borderBottomWidth",
"borderLeftWidth",
"fontFamily",
"fontSize",
"fontWeight",
"height",
"marginTop",
"marginRight",
"marginBottom",
"marginLeft",
"marginInlineStart",
"marginInlineEnd",
];
for (const prop of props) {
destination.style[prop] = style[prop];
}
// We need to set the label width to 100% to work around a XUL flex bug.
destination.style.width = "100%";
},
/**
* Destroys all editors in the current document.
*/
destroy() {
if (this.textbox) {
this.textbox.removeEventListener("keydown", this.onKeydown);
this.textbox.remove();
}
if (this.root) {
this.root.removeEventListener(this.onTriggerEvent, this.onTrigger);
this.root.ownerDocument.removeEventListener("blur", this.completeEdit);
}
this._textbox = this.root = this.selectors = this.onTab = null;
this.currentTarget = this.currentValue = null;
this.emit("destroyed");
},
};