corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1235350 - Storage Inspector needs a simplified inline editor r+pbro

Browse Source 
MozReview-Commit-ID: DBfeUEKQNly
This commit is contained in:
Michael Ratcliffe
2016-03-01 22:47:31 +00:00
parent 2ef08d8677
commit 94ec6a80bf
8 changed files with 1039 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
devtools/client/shared/test/browser_tableWidget_basic.js
View File

@@ -4,61 +4,60 @@
// Tests that the table widget api works fine // Tests that the table widget api works fine
"use strict";
const TEST_URI = "data:text/xml;charset=UTF-8,<?xml version='1.0'?>" + const TEST_URI = "data:text/xml;charset=UTF-8,<?xml version='1.0'?>" +
"<?xml-stylesheet href='chrome://global/skin/global.css'?>" + "<?xml-stylesheet href='chrome://global/skin/global.css'?>" +
"<?xml-stylesheet href='chrome://devtools/skin/light-theme.css'?>" +
"<?xml-stylesheet href='chrome://devtools/skin/widgets.css'?>" + // Uncomment these lines to help with visual debugging. When uncommented they
// dump a couple of thousand errors in the log (bug 1258285)
// "<?xml-stylesheet href='chrome://devtools/skin/light-theme.css'?>" +
// "<?xml-stylesheet href='chrome://devtools/skin/widgets.css'?>" +
"<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'" + "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'" +
" title='Table Widget' width='600' height='500'>" + " title='Table Widget' width='600' height='500'>" +
"<box flex='1' class='theme-light'/></window>"; "<box flex='1' class='theme-light'/></window>";
const TEST_OPT = "chrome,titlebar,toolbar,centerscreen,resizable,dialog=no";
const {TableWidget} = require("devtools/client/shared/widgets/TableWidget"); const {TableWidget} = require("devtools/client/shared/widgets/TableWidget");
var doc, table; add_task(function*() {
yield addTab("about:blank");
let [host, , doc] = yield createHost("bottom", TEST_URI);
function test() { let table = new TableWidget(doc.querySelector("box"), {
waitForExplicitFinish(); initialColumns: {
let win = Services.ww.openWindow(null, TEST_URI, "_blank", TEST_OPT, null); col1: "Column 1",
col2: "Column 2",
win.addEventListener("load", function onLoad() { col3: "Column 3",
win.removeEventListener("load", onLoad, false); col4: "Column 4"
},
waitForFocus(function () { uniqueId: "col1",
doc = win.document; emptyText: "This is dummy empty text",
table = new TableWidget(doc.querySelector("box"), { highlightUpdated: true,
initialColumns: { removableColumns: true,
col1: "Column 1", firstColumn: "col4"
col2: "Column 2",
col3: "Column 3",
col4: "Column 4"
},
uniqueId: "col1",
emptyText: "This is dummy empty text",
highlightUpdated: true,
removableColumns: true,
firstColumn: "col4"
});
startTests();
});
}); });
startTests(doc, table);
endTests(doc, host, table);
});
function startTests(doc, table) {
populateTable(doc, table);
testTreeItemInsertedCorrectly(doc, table);
testAPI(doc, table);
} }
function endTests() { function endTests(doc, host, table) {
table.destroy(); table.destroy();
doc.defaultView.close(); host.destroy();
doc = table = null; gBrowser.removeCurrentTab();
table = null;
finish(); finish();
} }
function startTests() { function populateTable(doc, table) {
populateTable();
testTreeItemInsertedCorrectly();
testAPI();
endTests();
}
function populateTable() {
table.push({ table.push({
col1: "id1", col1: "id1",
col2: "value10", col2: "value10",
@@ -125,25 +124,25 @@ function populateTable() {
/** /**
* Test if the nodes are inserted correctly in the table. * Test if the nodes are inserted correctly in the table.
*/ */
function testTreeItemInsertedCorrectly() { function testTreeItemInsertedCorrectly(doc, table) {
is(table.tbody.children.length, 4*2 /* double because splitters */, // double because of splitters
"4 columns exist"); is(table.tbody.children.length, 4 * 2, "4 columns exist");
// Test firstColumn option and check if the nodes are inserted correctly // Test firstColumn option and check if the nodes are inserted correctly
is(table.tbody.children[0].firstChild.children.length, 9 + 1 /* header */, is(table.tbody.children[0].firstChild.children.length, 9 + 1,
"Correct rows in column 4"); "Correct rows in column 4");
is(table.tbody.children[0].firstChild.firstChild.value, "Column 4", is(table.tbody.children[0].firstChild.firstChild.value, "Column 4",
"Correct column header value"); "Correct column header value");
for (let i = 1; i < 4; i++) { for (let i = 1; i < 4; i++) {
is(table.tbody.children[i * 2].firstChild.children.length, 9 + 1 /* header */, is(table.tbody.children[i * 2].firstChild.children.length, 9 + 1,
"Correct rows in column " + i); `Correct rows in column ${i}`);
is(table.tbody.children[i * 2].firstChild.firstChild.value, "Column " + i, is(table.tbody.children[i * 2].firstChild.firstChild.value, `Column ${i}`,
"Correct column header value"); "Correct column header value");
} }
for (let i = 1; i < 10; i++) { for (let i = 1; i < 10; i++) {
is(table.tbody.children[2].firstChild.children[i].value, "id" + i, is(table.tbody.children[2].firstChild.children[i].value, `id${i}`,
"Correct value in row " + i); `Correct value in row ${i}`);
} }
// Remove firstColumn option and reset the table // Remove firstColumn option and reset the table
@@ -155,25 +154,27 @@ function testTreeItemInsertedCorrectly() {
col3: "Column 3", col3: "Column 3",
col4: "Column 4" col4: "Column 4"
}); });
populateTable(); populateTable(doc, table);
// Check if the nodes are inserted correctly without firstColumn option // Check if the nodes are inserted correctly without firstColumn option
for (let i = 0; i < 4; i++) { for (let i = 0; i < 4; i++) {
is(table.tbody.children[i * 2].firstChild.children.length, 9 + 1 /* header */, is(table.tbody.children[i * 2].firstChild.children.length, 9 + 1,
"Correct rows in column " + i); `Correct rows in column ${i}`);
is(table.tbody.children[i * 2].firstChild.firstChild.value, "Column " + (i + 1), is(table.tbody.children[i * 2].firstChild.firstChild.value,
"Correct column header value"); `Column ${i + 1}`,
"Correct column header value");
} }
for (let i = 1; i < 10; i++) { for (let i = 1; i < 10; i++) {
is(table.tbody.firstChild.firstChild.children[i].value, "id" + i, is(table.tbody.firstChild.firstChild.children[i].value, `id${i}`,
"Correct value in row " + i); `Correct value in row ${i}`);
} }
} }
/** /**
* Tests if the API exposed by TableWidget works properly * Tests if the API exposed by TableWidget works properly
*/ */
function testAPI() { function testAPI(doc, table) {
info("Testing TableWidget API"); info("Testing TableWidget API");
// Check if selectRow and selectedRow setter works as expected // Check if selectRow and selectedRow setter works as expected
// Nothing should be selected beforehand // Nothing should be selected beforehand
@@ -190,7 +191,7 @@ function testAPI() {
is(node2.getAttribute("data-id"), "id7", "Correct node selected"); is(node2.getAttribute("data-id"), "id7", "Correct node selected");
// test if selectedIRow getter works // test if selectedIRow getter works
is(table.selectedRow["col1"], "id7", "Correct result of selectedRow getter"); is(table.selectedRow.col1, "id7", "Correct result of selectedRow getter");
// test if isSelected works // test if isSelected works
ok(table.isSelected("id7"), "isSelected with column id works"); ok(table.isSelected("id7"), "isSelected with column id works");
@@ -210,7 +211,7 @@ function testAPI() {
is(node3.getAttribute("data-id"), "id4", "Correct node selected"); is(node3.getAttribute("data-id"), "id4", "Correct node selected");
// test if selectedRow getter works // test if selectedRow getter works
is(table.selectedRow["col1"], "id4", "Correct result of selectedRow getter"); is(table.selectedRow.col1, "id4", "Correct result of selectedRow getter");
// test if clear selection works // test if clear selection works
table.clearSelection(); table.clearSelection();
@@ -234,7 +235,8 @@ function testAPI() {
ok(table.isSelected("id2"), "Correct row selected after selectNextRow call"); ok(table.isSelected("id2"), "Correct row selected after selectNextRow call");
table.selectPreviousRow(); table.selectPreviousRow();
ok(table.isSelected("id1"), "Correct row selected after selectPreviousRow call"); ok(table.isSelected("id1"),
"Correct row selected after selectPreviousRow call");
table.selectPreviousRow(); table.selectPreviousRow();
ok(table.isSelected("id9"), ok(table.isSelected("id9"),
@@ -281,13 +283,15 @@ function testAPI() {
// testing if clear works // testing if clear works
table.clear(); table.clear();
is(table.tbody.children.length, 4*2 /* double because splitters */, // double because splitters
is(table.tbody.children.length, 4 * 2,
"4 columns exist even after clear"); "4 columns exist even after clear");
for (let i = 0; i < 4; i++) { for (let i = 0; i < 4; i++) {
is(table.tbody.children[i*2].firstChild.children.length, 1 /* header */, is(table.tbody.children[i * 2].firstChild.children.length, 1,
"Only header in the column " + i + " after clear call"); `Only header in the column ${i} after clear call`);
is(table.tbody.children[i*2].firstChild.firstChild.value, "Column " + (i + 1), is(table.tbody.children[i * 2].firstChild.firstChild.value,
"Correct column header value"); `Column ${i + 1}`,
"Correct column header value");
} }
// testing if setColumns work // testing if setColumns work
@@ -296,7 +300,8 @@ function testAPI() {
col2: "Testing" col2: "Testing"
}); });
is(table.tbody.children.length, 2*2 /* double because splitters */, // double because splitters
is(table.tbody.children.length, 2 * 2,
"2 columns exist after setColumn call"); "2 columns exist after setColumn call");
is(table.tbody.children[0].firstChild.firstChild.value, "Foobar", is(table.tbody.children[0].firstChild.firstChild.value, "Foobar",
"Correct column header value for first column"); "Correct column header value for first column");
@@ -309,10 +314,11 @@ function testAPI() {
col3: "Column 3", col3: "Column 3",
col4: "Column 4" col4: "Column 4"
}); });
is(table.tbody.children.length, 4*2 /* double because splitters */, // double because splitters
is(table.tbody.children.length, 4 * 2,
"4 columns exist after second setColumn call"); "4 columns exist after second setColumn call");
populateTable(); populateTable(doc, table);
// testing if update works // testing if update works
is(doc.querySelectorAll("[data-id='id4']")[1].value, "value12", is(doc.querySelectorAll("[data-id='id4']")[1].value, "value12",
@@ -326,12 +332,12 @@ function testAPI() {
is(doc.querySelectorAll("[data-id='id4']")[1].value, "UPDATED", is(doc.querySelectorAll("[data-id='id4']")[1].value, "UPDATED",
"Correct value after update"); "Correct value after update");
// testing if sorting works // testing if sorting works by calling it once on an already sorted column
// calling it once on an already sorted column should sort in descending manner // should sort descending
table.sortBy("col1"); table.sortBy("col1");
for (let i = 1; i < 10; i++) { for (let i = 1; i < 10; i++) {
is(table.tbody.firstChild.firstChild.children[i].value, "id" + (10 - i), is(table.tbody.firstChild.firstChild.children[i].value, `id${10 - i}`,
"Correct value in row " + i + " after descending sort by on col1"); `Correct value in row ${i} after descending sort by on col1`);
} }
// Calling it on an unsorted column should sort by it in ascending manner // Calling it on an unsorted column should sort by it in ascending manner
table.sortBy("col2"); table.sortBy("col2");
@@ -349,7 +355,7 @@ function testAPI() {
checkAscendingOrder(cell); checkAscendingOrder(cell);
table.clear(); table.clear();
populateTable(); populateTable(doc, table);
// testing if sorting works should sort by ascending manner // testing if sorting works should sort by ascending manner
table.sortBy("col4"); table.sortBy("col4");
@@ -365,16 +371,17 @@ function testAPI() {
} }
function checkAscendingOrder(cell) { function checkAscendingOrder(cell) {
while(cell) { while (cell) {
let currentCell = cell.value || cell.textContent; let currentCell = cell.value || cell.textContent;
let prevCell = cell.previousSibling.value || cell.previousSibling.textContent; let prevCell = cell.previousSibling.value ||
cell.previousSibling.textContent;
ok(currentCell >= prevCell, "Sorting is in ascending order"); ok(currentCell >= prevCell, "Sorting is in ascending order");
cell = cell.nextSibling; cell = cell.nextSibling;
} }
} }
function checkDescendingOrder(cell) { function checkDescendingOrder(cell) {
while(cell != cell.parentNode.firstChild) { while (cell != cell.parentNode.firstChild) {
let currentCell = cell.value || cell.textContent; let currentCell = cell.value || cell.textContent;
let nextCell = cell.nextSibling.value || cell.nextSibling.textContent; let nextCell = cell.nextSibling.value || cell.nextSibling.textContent;
ok(currentCell >= nextCell, "Sorting is in descending order"); ok(currentCell >= nextCell, "Sorting is in descending order");

130
devtools/client/shared/test/browser_tableWidget_keyboard_interaction.js
View File

@@ -4,10 +4,16 @@
// Tests that keyboard interaction works fine with the table widget // Tests that keyboard interaction works fine with the table widget
"use strict";
const TEST_URI = "data:text/xml;charset=UTF-8,<?xml version='1.0'?>" + const TEST_URI = "data:text/xml;charset=UTF-8,<?xml version='1.0'?>" +
"<?xml-stylesheet href='chrome://global/skin/global.css'?>" + "<?xml-stylesheet href='chrome://global/skin/global.css'?>" +
"<?xml-stylesheet href='chrome://devtools/skin/light-theme.css'?>" +
"<?xml-stylesheet href='chrome://devtools/skin/widgets.css'?>" + // Uncomment these lines to help with visual debugging. When uncommented they
// dump a couple of thousand errors in the log (bug 1258285)
// "<?xml-stylesheet href='chrome://devtools/skin/light-theme.css'?>" +
// "<?xml-stylesheet href='chrome://devtools/skin/widgets.css'?>" +
"<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'" + "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'" +
" title='Table Widget' width='600' height='500'>" + " title='Table Widget' width='600' height='500'>" +
"<box flex='1' class='theme-light'/></window>"; "<box flex='1' class='theme-light'/></window>";
@@ -25,7 +31,7 @@ function test() {
win.addEventListener("load", function onLoad() { win.addEventListener("load", function onLoad() {
win.removeEventListener("load", onLoad, false); win.removeEventListener("load", onLoad, false);
waitForFocus(function () { waitForFocus(function() {
doc = win.document; doc = win.document;
table = new TableWidget(doc.querySelector("box"), { table = new TableWidget(doc.querySelector("box"), {
initialColumns: { initialColumns: {
@@ -120,7 +126,8 @@ function populateTable() {
// Sends a click event on the passed DOM node in an async manner // Sends a click event on the passed DOM node in an async manner
function click(node, button = 0) { function click(node, button = 0) {
if (button == 0) { if (button == 0) {
executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, {}, doc.defaultView)); executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, {},
doc.defaultView));
} else { } else {
executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, { executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, {
button: button, button: button,
@@ -129,99 +136,60 @@ function click(node, button = 0) {
} }
} }
function getNodeByValue(value) {
return table.tbody.querySelector("[value=" + value + "]");
}
/** /**
* Tests if pressing navigation keys on the table items does the expected behavior * Tests if pressing navigation keys on the table items does the expected
* behavior.
*/ */
var testKeyboardInteraction = Task.async(function*() { var testKeyboardInteraction = Task.async(function*() {
info("Testing keyboard interaction with the table"); info("Testing keyboard interaction with the table");
info("clicking on first row"); info("clicking on the row containing id2");
let node = table.tbody.firstChild.firstChild.children[1]; let node = getNodeByValue("id2");
let event = table.once(TableWidget.EVENTS.ROW_SELECTED); let event = table.once(TableWidget.EVENTS.ROW_SELECTED);
click(node); click(node);
let [name, id] = yield event; yield event;
node = table.tbody.firstChild.firstChild.children[2]; yield testRow("id3", "DOWN", "next row");
// node should not have selected class yield testRow("id4", "DOWN", "next row");
ok(!node.classList.contains("theme-selected"), yield testRow("id3", "UP", "previous row");
"Row should not have selected class"); yield testRow("id4", "DOWN", "next row");
info("Pressing down key to select next row"); yield testRow("id5", "DOWN", "next row");
event = table.once(TableWidget.EVENTS.ROW_SELECTED); yield testRow("id6", "DOWN", "next row");
EventUtils.sendKey("DOWN", doc.defaultView); yield testRow("id5", "UP", "previous row");
id = yield event; yield testRow("id4", "UP", "previous row");
is(id, "id2", "Correct row was selected after pressing down"); yield testRow("id3", "UP", "previous row");
ok(node.classList.contains("theme-selected"), "row has selected class");
let nodes = doc.querySelectorAll(".theme-selected");
for (let i = 0; i < nodes.length; i++) {
is(nodes[i].getAttribute("data-id"), "id2",
"Correct cell selected in all columns");
}
node = table.tbody.firstChild.firstChild.children[3];
// node should not have selected class
ok(!node.classList.contains("theme-selected"),
"Row should not have selected class");
info("Pressing down key to select next row");
event = table.once(TableWidget.EVENTS.ROW_SELECTED);
EventUtils.sendKey("DOWN", doc.defaultView);
id = yield event;
is(id, "id3", "Correct row was selected after pressing down");
ok(node.classList.contains("theme-selected"), "row has selected class");
nodes = doc.querySelectorAll(".theme-selected");
for (let i = 0; i < nodes.length; i++) {
is(nodes[i].getAttribute("data-id"), "id3",
"Correct cell selected in all columns");
}
// pressing up arrow key to select previous row
node = table.tbody.firstChild.firstChild.children[2];
// node should not have selected class
ok(!node.classList.contains("theme-selected"),
"Row should not have selected class");
info("Pressing up key to select previous row");
event = table.once(TableWidget.EVENTS.ROW_SELECTED);
EventUtils.sendKey("UP", doc.defaultView);
id = yield event;
is(id, "id2", "Correct row was selected after pressing down");
ok(node.classList.contains("theme-selected"), "row has selected class");
nodes = doc.querySelectorAll(".theme-selected");
for (let i = 0; i < nodes.length; i++) {
is(nodes[i].getAttribute("data-id"), "id2",
"Correct cell selected in all columns");
}
// selecting last item node to test edge navigation cycling case // selecting last item node to test edge navigation cycling case
table.selectedRow = "id9"; table.selectedRow = "id9";
// pressing down now should move to first row.
node = table.tbody.firstChild.firstChild.children[1]; // pressing down on last row should move to first row.
// node should not have selected class yield testRow("id1", "DOWN", "first row");
ok(!node.classList.contains("theme-selected"),
"Row should not have selected class");
info("Pressing down key on last row to select first row");
event = table.once(TableWidget.EVENTS.ROW_SELECTED);
EventUtils.sendKey("DOWN", doc.defaultView);
id = yield event;
is(id, "id1", "Correct row was selected after pressing down");
ok(node.classList.contains("theme-selected"), "row has selected class");
nodes = doc.querySelectorAll(".theme-selected");
for (let i = 0; i < nodes.length; i++) {
is(nodes[i].getAttribute("data-id"), "id1",
"Correct cell selected in all columns");
}
// pressing up now should move to last row. // pressing up now should move to last row.
node = table.tbody.firstChild.firstChild.lastChild; yield testRow("id9", "UP", "last row");
});
function* testRow(id, key, destination) {
let node = getNodeByValue(id);
// node should not have selected class // node should not have selected class
ok(!node.classList.contains("theme-selected"), ok(!node.classList.contains("theme-selected"),
"Row should not have selected class"); "Row should not have selected class");
info("Pressing down key on last row to select first row"); info(`Pressing ${key} to select ${destination}`);
event = table.once(TableWidget.EVENTS.ROW_SELECTED);
EventUtils.sendKey("UP", doc.defaultView); let event = table.once(TableWidget.EVENTS.ROW_SELECTED);
id = yield event; EventUtils.sendKey(key, doc.defaultView);
is(id, "id9", "Correct row was selected after pressing down");
let uniqueId = yield event;
is(id, uniqueId, `Correct row was selected after pressing ${key}`);
ok(node.classList.contains("theme-selected"), "row has selected class"); ok(node.classList.contains("theme-selected"), "row has selected class");
nodes = doc.querySelectorAll(".theme-selected");
let nodes = doc.querySelectorAll(".theme-selected");
for (let i = 0; i < nodes.length; i++) { for (let i = 0; i < nodes.length; i++) {
is(nodes[i].getAttribute("data-id"), "id9", is(nodes[i].getAttribute("data-id"), id,
"Correct cell selected in all columns"); "Correct cell selected in all columns");
} }
}); }

62
devtools/client/shared/test/browser_tableWidget_mouse_interaction.js
View File

@@ -4,17 +4,22 @@
// Tests that mosue interaction works fine with the table widget // Tests that mosue interaction works fine with the table widget
"use strict";
const TEST_URI = "data:text/xml;charset=UTF-8,<?xml version='1.0'?>" + const TEST_URI = "data:text/xml;charset=UTF-8,<?xml version='1.0'?>" +
"<?xml-stylesheet href='chrome://global/skin/global.css'?>" + "<?xml-stylesheet href='chrome://global/skin/global.css'?>" +
"<?xml-stylesheet href='chrome://devtools/skin/light-theme.css'?>" +
"<?xml-stylesheet href='chrome://devtools/skin/widgets.css'?>" + // Uncomment these lines to help with visual debugging. When uncommented they
// dump a couple of thousand errors in the log (bug 1258285)
// "<?xml-stylesheet href='chrome://devtools/skin/light-theme.css'?>" +
// "<?xml-stylesheet href='chrome://devtools/skin/widgets.css'?>" +
"<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'" + "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'" +
" title='Table Widget' width='600' height='500'>" + " title='Table Widget' width='600' height='500'>" +
"<box flex='1' class='theme-light'/></window>"; "<box flex='1' class='theme-light'/></window>";
const TEST_OPT = "chrome,titlebar,toolbar,centerscreen,resizable,dialog=no"; const TEST_OPT = "chrome,titlebar,toolbar,centerscreen,resizable,dialog=no";
const {TableWidget} = require("devtools/client/shared/widgets/TableWidget"); const {TableWidget} = require("devtools/client/shared/widgets/TableWidget");
const Promise = require("promise");
var doc, table; var doc, table;
@@ -25,7 +30,7 @@ function test() {
win.addEventListener("load", function onLoad() { win.addEventListener("load", function onLoad() {
win.removeEventListener("load", onLoad, false); win.removeEventListener("load", onLoad, false);
waitForFocus(function () { waitForFocus(function() {
doc = win.document; doc = win.document;
table = new TableWidget(doc.querySelector("box"), { table = new TableWidget(doc.querySelector("box"), {
initialColumns: { initialColumns: {
@@ -120,7 +125,8 @@ function populateTable() {
// Sends a click event on the passed DOM node in an async manner // Sends a click event on the passed DOM node in an async manner
function click(node, button = 0) { function click(node, button = 0) {
if (button == 0) { if (button == 0) {
executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, {}, doc.defaultView)); executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, {},
doc.defaultView));
} else { } else {
executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, { executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, {
button: button, button: button,
@@ -143,7 +149,8 @@ var testMouseInteraction = Task.async(function*() {
"Node should not have selected class before clicking"); "Node should not have selected class before clicking");
click(node); click(node);
let id = yield event; let id = yield event;
ok(node.classList.contains("theme-selected"), "Node has selected class after click"); ok(node.classList.contains("theme-selected"),
"Node has selected class after click");
is(id, "id1", "Correct row was selected"); is(id, "id1", "Correct row was selected");
info("clicking on third row to select it"); info("clicking on third row to select it");
@@ -156,7 +163,7 @@ var testMouseInteraction = Task.async(function*() {
id = yield event; id = yield event;
ok(node2.classList.contains("theme-selected"), ok(node2.classList.contains("theme-selected"),
"New node has selected class after clicking"); "New node has selected class after clicking");
is(id, "id3", "Correct table path is emitted for new node") is(id, "id3", "Correct table path is emitted for new node");
isnot(node, node2, "Old and new node are different"); isnot(node, node2, "Old and new node are different");
ok(!node.classList.contains("theme-selected"), ok(!node.classList.contains("theme-selected"),
"Old node should not have selected class after the click on new node"); "Old node should not have selected class after the click on new node");
@@ -167,7 +174,8 @@ var testMouseInteraction = Task.async(function*() {
info("clicking on the 4th coulmn header to sort the table by it"); info("clicking on the 4th coulmn header to sort the table by it");
ok(!node.hasAttribute("sorted"), ok(!node.hasAttribute("sorted"),
"Node should not have sorted attribute before clicking"); "Node should not have sorted attribute before clicking");
ok(doc.querySelector("[sorted]"), "Although, something else should be sorted on"); ok(doc.querySelector("[sorted]"),
"Although, something else should be sorted on");
isnot(doc.querySelector("[sorted]"), node, "Which is not equal to this node"); isnot(doc.querySelector("[sorted]"), node, "Which is not equal to this node");
click(node); click(node);
id = yield event; id = yield event;
@@ -181,15 +189,12 @@ var testMouseInteraction = Task.async(function*() {
// test context menu opening. // test context menu opening.
// hiding second column // hiding second column
// event listener for popupshown // event listener for popupshown
event = Promise.defer(); info("right click on the first column header");
table.menupopup.addEventListener("popupshown", function onPopupShown(e) {
table.menupopup.removeEventListener("popupshown", onPopupShown);
event.resolve();
})
info("right clicking on the first column header");
node = table.tbody.firstChild.firstChild.firstChild; node = table.tbody.firstChild.firstChild.firstChild;
let onPopupShown = once(table.menupopup, "popupshown");
click(node, 2); click(node, 2);
yield event.promise; yield onPopupShown;
is(table.menupopup.querySelectorAll("[disabled]").length, 1, is(table.menupopup.querySelectorAll("[disabled]").length, 1,
"Only 1 menuitem is disabled"); "Only 1 menuitem is disabled");
is(table.menupopup.querySelector("[disabled]"), is(table.menupopup.querySelector("[disabled]"),
@@ -210,15 +215,12 @@ var testMouseInteraction = Task.async(function*() {
// hiding third column // hiding third column
// event listener for popupshown // event listener for popupshown
event = Promise.defer();
table.menupopup.addEventListener("popupshown", function onPopupShown(e) {
table.menupopup.removeEventListener("popupshown", onPopupShown);
event.resolve();
})
info("right clicking on the first column header"); info("right clicking on the first column header");
node = table.tbody.firstChild.firstChild.firstChild; node = table.tbody.firstChild.firstChild.firstChild;
onPopupShown = once(table.menupopup, "popupshown");
click(node, 2); click(node, 2);
yield event.promise; yield onPopupShown;
is(table.menupopup.querySelectorAll("[disabled]").length, 1, is(table.menupopup.querySelectorAll("[disabled]").length, 1,
"Only 1 menuitem is disabled"); "Only 1 menuitem is disabled");
// popup should be open now // popup should be open now
@@ -236,15 +238,12 @@ var testMouseInteraction = Task.async(function*() {
// opening again to see if 2 items are disabled now // opening again to see if 2 items are disabled now
// event listener for popupshown // event listener for popupshown
event = Promise.defer();
table.menupopup.addEventListener("popupshown", function onPopupShown(e) {
table.menupopup.removeEventListener("popupshown", onPopupShown);
event.resolve();
})
info("right clicking on the first column header"); info("right clicking on the first column header");
node = table.tbody.firstChild.firstChild.firstChild; node = table.tbody.firstChild.firstChild.firstChild;
onPopupShown = once(table.menupopup, "popupshown");
click(node, 2); click(node, 2);
yield event.promise; yield onPopupShown;
is(table.menupopup.querySelectorAll("[disabled]").length, 2, is(table.menupopup.querySelectorAll("[disabled]").length, 2,
"2 menuitems are disabled now as only 2 columns remain visible"); "2 menuitems are disabled now as only 2 columns remain visible");
is(table.menupopup.querySelectorAll("[disabled]")[0], is(table.menupopup.querySelectorAll("[disabled]")[0],
@@ -270,15 +269,12 @@ var testMouseInteraction = Task.async(function*() {
// showing back 3rd column // showing back 3rd column
// event listener for popupshown // event listener for popupshown
event = Promise.defer();
table.menupopup.addEventListener("popupshown", function onPopupShown(e) {
table.menupopup.removeEventListener("popupshown", onPopupShown);
event.resolve();
})
info("right clicking on the first column header"); info("right clicking on the first column header");
node = table.tbody.firstChild.firstChild.firstChild; node = table.tbody.firstChild.firstChild.firstChild;
onPopupShown = once(table.menupopup, "popupshown");
click(node, 2); click(node, 2);
yield event.promise; yield onPopupShown;
// popup should be open now // popup should be open now
// clicking on second column label // clicking on second column label
event = table.once(TableWidget.EVENTS.HEADER_CONTEXT_MENU); event = table.once(TableWidget.EVENTS.HEADER_CONTEXT_MENU);

68
devtools/client/shared/test/head.js
View File

@@ -1,6 +1,10 @@
/* This Source Code Form is subject to the terms of the Mozilla Public /* 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 * License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* eslint no-unused-vars: [2, {"vars": "local", "args": "none"}] */
/* import-globals-from ../../framework/test/shared-head.js */
"use strict";
// shared-head.js handles imports, constants, and utility functions // shared-head.js handles imports, constants, and utility functions
Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js", this); Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js", this);
@@ -16,8 +20,7 @@ function catchFail(func) {
return function() { return function() {
try { try {
return func.apply(null, arguments); return func.apply(null, arguments);
} } catch (ex) {
catch (ex) {
ok(false, ex); ok(false, ex);
console.error(ex); console.error(ex);
finish(); finish();
@@ -29,7 +32,7 @@ function catchFail(func) {
/** /**
* Polls a given function waiting for the given value. * Polls a given function waiting for the given value.
* *
* @param object aOptions * @param object options
* Options object with the following properties: * Options object with the following properties:
* - validator * - validator
* A validator function that should return the expected value. This is * A validator function that should return the expected value. This is
@@ -53,49 +56,45 @@ function catchFail(func) {
* The expected value. If this option is omitted then the |validator| * The expected value. If this option is omitted then the |validator|
* function must return a trueish value. * function must return a trueish value.
* Each of the provided callback functions will receive two arguments: * Each of the provided callback functions will receive two arguments:
* the |aOptions| object and the last value returned by |validator|. * the |options| object and the last value returned by |validator|.
*/ */
function waitForValue(aOptions) function waitForValue(options) {
{
let start = Date.now(); let start = Date.now();
let timeout = aOptions.timeout || 5000; let timeout = options.timeout || 5000;
let lastValue; let lastValue;
function wait(validatorFn, successFn, failureFn) function wait(validatorFn, successFn, failureFn) {
{
if ((Date.now() - start) > timeout) { if ((Date.now() - start) > timeout) {
// Log the failure. // Log the failure.
ok(false, "Timed out while waiting for: " + aOptions.name); ok(false, "Timed out while waiting for: " + options.name);
let expected = "value" in aOptions ? let expected = "value" in options ?
"'" + aOptions.value + "'" : "'" + options.value + "'" :
"a trueish value"; "a trueish value";
info("timeout info :: got '" + lastValue + "', expected " + expected); info("timeout info :: got '" + lastValue + "', expected " + expected);
failureFn(aOptions, lastValue); failureFn(options, lastValue);
return; return;
} }
lastValue = validatorFn(aOptions, lastValue); lastValue = validatorFn(options, lastValue);
let successful = "value" in aOptions ? let successful = "value" in options ?
lastValue == aOptions.value : lastValue == options.value :
lastValue; lastValue;
if (successful) { if (successful) {
ok(true, aOptions.name); ok(true, options.name);
successFn(aOptions, lastValue); successFn(options, lastValue);
} } else {
else {
setTimeout(() => { setTimeout(() => {
wait(validatorFn, successFn, failureFn); wait(validatorFn, successFn, failureFn);
}, 100); }, 100);
} }
} }
wait(aOptions.validator, aOptions.success, aOptions.failure); wait(options.validator, options.success, options.failure);
} }
function oneTimeObserve(name, callback) { function oneTimeObserve(name, callback) {
return new Promise((resolve) => { return new Promise((resolve) => {
let func = function() {
var func = function() {
Services.obs.removeObserver(func, name); Services.obs.removeObserver(func, name);
if (callback) { if (callback) {
callback(); callback();
@@ -106,7 +105,8 @@ function oneTimeObserve(name, callback) {
}); });
} }
var createHost = Task.async(function*(type = "bottom", src = "data:text/html;charset=utf-8,") { let createHost =
Task.async(function*(type = "bottom", src = "data:text/html;charset=utf-8,") {
let host = new Hosts[type](gBrowser.selectedTab); let host = new Hosts[type](gBrowser.selectedTab);
let iframe = yield host.create(); let iframe = yield host.create();
@@ -164,7 +164,9 @@ function stopRecordingTelemetryLogs(Telemetry) {
function checkTelemetryResults(Telemetry) { function checkTelemetryResults(Telemetry) {
let result = Telemetry.prototype.telemetryInfo; let result = Telemetry.prototype.telemetryInfo;
for (let [histId, value] of Iterator(result)) { for (let histId in result) {
let value = result[histId];
if (histId.endsWith("OPENED_PER_USER_FLAG")) { if (histId.endsWith("OPENED_PER_USER_FLAG")) {
ok(value.length === 1 && value[0] === true, ok(value.length === 1 && value[0] === true,
"Per user value " + histId + " has a single value of true"); "Per user value " + histId + " has a single value of true");
@@ -196,10 +198,10 @@ function checkTelemetryResults(Telemetry) {
* @param {String} toolId * @param {String} toolId
*/ */
function* openAndCloseToolbox(nbOfTimes, usageTime, toolId) { function* openAndCloseToolbox(nbOfTimes, usageTime, toolId) {
for (let i = 0; i < nbOfTimes; i ++) { for (let i = 0; i < nbOfTimes; i++) {
info("Opening toolbox " + (i + 1)); info("Opening toolbox " + (i + 1));
let target = TargetFactory.forTab(gBrowser.selectedTab); let target = TargetFactory.forTab(gBrowser.selectedTab);
yield gDevTools.showToolbox(target, toolId) yield gDevTools.showToolbox(target, toolId);
// We use a timeout to check the toolbox's active time // We use a timeout to check the toolbox's active time
yield new Promise(resolve => setTimeout(resolve, usageTime)); yield new Promise(resolve => setTimeout(resolve, usageTime));
@@ -264,7 +266,8 @@ function showFilterPopupPresets(widget) {
* @param {string} value * @param {string} value
* @return {Promise} * @return {Promise}
*/ */
var showFilterPopupPresetsAndCreatePreset = Task.async(function*(widget, name, value) { let showFilterPopupPresetsAndCreatePreset =
Task.async(function*(widget, name, value) {
yield showFilterPopupPresets(widget); yield showFilterPopupPresets(widget);
let onRender = widget.once("render"); let onRender = widget.once("render");
@@ -325,7 +328,8 @@ function checkCssSyntaxHighlighterOutput(expectedNodes, parent) {
* Check the type and content of a single node. * Check the type and content of a single node.
*/ */
function checkNode(expected, actual) { function checkNode(expected, actual) {
ok(actual.textContent == expected.text, "Check that node has the expected textContent"); ok(actual.textContent == expected.text,
"Check that node has the expected textContent");
info("Expected text content: [" + expected.text + "]"); info("Expected text content: [" + expected.text + "]");
info("Actual text content: [" + actual.textContent + "]"); info("Actual text content: [" + actual.textContent + "]");
@@ -365,10 +369,10 @@ function checkCssSyntaxHighlighterOutput(expectedNodes, parent) {
} }
info("Logging the actual nodes we have:"); info("Logging the actual nodes we have:");
for (var j = 0; j < parent.childNodes.length; j++) { for (let j = 0; j < parent.childNodes.length; j++) {
var n = parent.childNodes[j]; let n = parent.childNodes[j];
info(j + " / " + info(j + " / " +
"nodeType: "+ n.nodeType + " / " + "nodeType: " + n.nodeType + " / " +
"textContent: " + n.textContent); "textContent: " + n.textContent);
} }

810
devtools/client/shared/widgets/TableWidget.js
View File

@@ -20,10 +20,14 @@ const EVENTS = {
CELL_EDIT: "cell-edit", CELL_EDIT: "cell-edit",
COLUMN_SORTED: "column-sorted", COLUMN_SORTED: "column-sorted",
COLUMN_TOGGLED: "column-toggled", COLUMN_TOGGLED: "column-toggled",
FIELDS_EDITABLE: "fields-editable",
HEADER_CONTEXT_MENU: "header-context-menu", HEADER_CONTEXT_MENU: "header-context-menu",
ROW_EDIT: "row-edit",
ROW_CONTEXT_MENU: "row-context-menu", ROW_CONTEXT_MENU: "row-context-menu",
ROW_REMOVED: "row-removed",
ROW_SELECTED: "row-selected", ROW_SELECTED: "row-selected",
ROW_UPDATED: "row-updated", ROW_UPDATED: "row-updated",
TABLE_CLEARED: "table-cleared",
TABLE_FILTERED: "table-filtered", TABLE_FILTERED: "table-filtered",
SCROLL_END: "scroll-end" SCROLL_END: "scroll-end"
}; };
@@ -102,6 +106,16 @@ function TableWidget(node, options = {}) {
this.selectedRow = id; this.selectedRow = id;
}; };
this.on(EVENTS.ROW_SELECTED, this.bindSelectedRow); 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, false);
this.document.addEventListener("mousedown", this.onMousedown, false);
} }
TableWidget.prototype = { TableWidget.prototype = {
@@ -150,9 +164,421 @@ TableWidget.prototype = {
return this.columns.get(this.uniqueId).selectedIndex; return this.columns.get(this.uniqueId).selectedIndex;
}, },
/**
* Returns the index of the selected row disregarding hidden rows.
*/
get visibleSelectedIndex() {
let cells = this.columns.get(this.uniqueId).visibleCellNodes;
for (let i = 0; i < cells.length; i++) {
if (cells[i].classList.contains("theme-selected")) {
return i;
}
}
return -1;
},
/**
* returns all editable columns.
*/
get editableColumns() {
let filter = columns => {
columns = [...columns].filter(col => {
if (col.clientWidth === 0) {
return false;
}
let cell = col.querySelector(".table-widget-cell");
for (let selector of this._editableFieldsEngine.selectors) {
if (cell.matches(selector)) {
return true;
}
}
return false;
});
return columns;
};
let columns = this._parent.querySelectorAll(".table-widget-column");
return filter(columns);
},
/**
* Emit all cell edit events.
*/
onChange: function(type, data) {
let changedField = data.change.field;
let colName = changedField.parentNode.id;
let column = this.columns.get(colName);
let uniqueId = column.table.uniqueId;
let itemIndex = column.cellNodes.indexOf(changedField);
let items = {};
for (let [name, col] of this.columns) {
items[name] = col.cellNodes[itemIndex].value;
}
let change = {
key: uniqueId,
field: colName,
oldValue: data.change.oldValue,
newValue: data.change.newValue,
items: 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: function() {
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: function(event) {
let textbox = event.target;
let editor = this._editableFieldsEngine;
if (textbox.id !== editor.INPUT_ID) {
return;
}
let 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, (e, uniqueId) => {
let cell;
let cells;
let columnObj;
let cols = this.editableColumns;
let rowIndex = this.visibleSelectedIndex;
let 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) {
let id = cols[0].id;
columnObj = this.columns.get(id);
let maxRowIndex = columnObj.visibleCellNodes.length - 1;
if (rowIndex === maxRowIndex) {
return;
}
newIndex = 0;
} else {
newIndex = colIndex + 1;
}
let newcol = cols[newIndex];
columnObj = this.columns.get(newcol.id);
// Select the correct row even if it has moved due to sorting.
let 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.
cells = columnObj.visibleCellNodes;
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.
let cell = this.getEditedCellOnTab(event, column);
editor.edit(cell);
},
/**
* 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: function(event, column) {
let cell = null;
let cols = this.editableColumns;
let rowIndex = this.visibleSelectedIndex;
let colIndex = cols.indexOf(column);
let maxCol = cols.length - 1;
let 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];
let cells = this.columns.get(column.id).visibleCellNodes;
cell = cells[rowIndex - 1];
let rowId = cell.getAttribute("data-id");
this.emit(EVENTS.ROW_SELECTED, rowId);
} else {
column = cols[colIndex - 1];
let 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];
let cells = this.columns.get(column.id).visibleCellNodes;
cell = cells[rowIndex + 1];
let rowId = cell.getAttribute("data-id");
this.emit(EVENTS.ROW_SELECTED, rowId);
} else {
// Navigate forwards on tab.
column = cols[colIndex + 1];
let 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: function(event, row) {
if (!this._editableFieldsEngine || !this._editableFieldsEngine.isEditing) {
return;
}
let removedKey = row[this.uniqueId];
let 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: function() {
let editor = this._editableFieldsEngine;
if (!editor || !editor.isEditing) {
return;
}
editor.cancelEdit();
},
/**
* Keydown event handler for the table. Used for keyboard navigation amongst
* rows.
*/
onKeydown: function(event) {
// If we are in edit mode bail out.
if (this._editableFieldsEngine && this._editableFieldsEngine.isEditing) {
return;
}
let selectedCell = this.tbody.querySelector(".theme-selected");
if (!selectedCell) {
return;
}
let colName;
let column;
let visibleCells;
let index;
let cell;
switch (event.keyCode) {
case event.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 event.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: function({target}) {
let nodeName = target.nodeName;
if (nodeName === "textbox" || !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: function(editableColumns) {
let selectors = [];
if (typeof editableColumns === "string") {
editableColumns = [editableColumns];
}
for (let id of editableColumns) {
selectors.push("#" + id + " .table-widget-cell");
}
for (let [name, column] of this.columns) {
if (!editableColumns.includes(name)) {
column.column.setAttribute("readonly", "");
}
}
if (this._editableFieldsEngine) {
this._editableFieldsEngine.selectors = selectors;
} else {
this._editableFieldsEngine = new EditableFieldsEngine({
root: this.tbody,
onTab: this.onEditorTab,
onTriggerEvent: "dblclick",
selectors: selectors
});
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: function() { destroy: function() {
this.off(EVENTS.ROW_SELECTED, this.bindSelectedRow); this.off(EVENTS.ROW_SELECTED, this.bindSelectedRow);
this.off(EVENTS.ROW_REMOVED, this.onRowRemoved);
this.document.removeEventListener("keydown", this.onKeydown, false);
this.document.removeEventListener("mousedown", this.onMousedown, false);
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) { if (this.menupopup) {
this.menupopup.removeEventListener("command", this.onPopupCommand);
this.menupopup.remove(); this.menupopup.remove();
} }
}, },
@@ -358,9 +784,12 @@ TableWidget.prototype = {
} }
this.items.set(item[this.uniqueId], item); this.items.set(item[this.uniqueId], item);
this.tbody.removeAttribute("empty"); this.tbody.removeAttribute("empty");
if (!suppressFlash) { if (!suppressFlash) {
this.emit(EVENTS.ROW_UPDATED, item[this.uniqueId]); this.emit(EVENTS.ROW_UPDATED, item[this.uniqueId]);
} }
this.emit(EVENTS.ROW_EDIT, item[this.uniqueId]);
}, },
/** /**
@@ -375,13 +804,14 @@ TableWidget.prototype = {
if (!removed) { if (!removed) {
return; return;
} }
for (let column of this.columns.values()) { for (let column of this.columns.values()) {
column.remove(item); column.remove(item);
} }
if (this.items.size == 0) { if (this.items.size == 0) {
this.tbody.setAttribute("empty", "empty"); this.tbody.setAttribute("empty", "empty");
} }
this.emit(EVENTS.ROW_REMOVED, item);
}, },
/** /**
@@ -405,6 +835,7 @@ TableWidget.prototype = {
} }
if (changed) { if (changed) {
this.emit(EVENTS.ROW_UPDATED, item[this.uniqueId]); this.emit(EVENTS.ROW_UPDATED, item[this.uniqueId]);
this.emit(EVENTS.ROW_EDIT, item[this.uniqueId]);
} }
}, },
@@ -418,6 +849,8 @@ TableWidget.prototype = {
} }
this.tbody.setAttribute("empty", "empty"); this.tbody.setAttribute("empty", "empty");
this.setPlaceholderText(this.emptyText); this.setPlaceholderText(this.emptyText);
this.emit(EVENTS.TABLE_CLEARED, this);
}, },
/** /**
@@ -452,6 +885,10 @@ TableWidget.prototype = {
if (this.filteredValue == value) { if (this.filteredValue == value) {
return; return;
} }
if (this._editableFieldsEngine) {
this._editableFieldsEngine.completeEdit();
}
this.filteredValue = value; this.filteredValue = value;
if (!value) { if (!value) {
this.emit(EVENTS.TABLE_FILTERED, []); this.emit(EVENTS.TABLE_FILTERED, []);
@@ -563,10 +1000,8 @@ function Column(table, id, header) {
this.onClick = this.onClick.bind(this); this.onClick = this.onClick.bind(this);
this.onMousedown = this.onMousedown.bind(this); this.onMousedown = this.onMousedown.bind(this);
this.onKeydown = this.onKeydown.bind(this);
this.column.addEventListener("click", this.onClick); this.column.addEventListener("click", this.onClick);
this.column.addEventListener("mousedown", this.onMousedown); this.column.addEventListener("mousedown", this.onMousedown);
this.column.addEventListener("keydown", this.onKeydown);
} }
Column.prototype = { Column.prototype = {
@@ -620,6 +1055,23 @@ Column.prototype = {
return this.items[this.selectedRow]; return this.items[this.selectedRow];
}, },
get cellNodes() {
return [...this.column.querySelectorAll(".table-widget-cell")];
},
get visibleCellNodes() {
let editor = this.table._editableFieldsEngine;
let 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. * Called when the column is sorted by.
* *
@@ -665,6 +1117,15 @@ Column.prototype = {
onRowUpdated: function(event, id) { onRowUpdated: function(event, id) {
this._updateItems(); this._updateItems();
if (this.highlightUpdated && this.items[id] != null) { if (this.highlightUpdated && this.items[id] != 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.cells[this.items[id]].flash();
} }
this.updateZebra(); this.updateZebra();
@@ -675,6 +1136,10 @@ Column.prototype = {
this.table.off(EVENTS.HEADER_CONTEXT_MENU, this.toggleColumn); this.table.off(EVENTS.HEADER_CONTEXT_MENU, this.toggleColumn);
this.table.off(EVENTS.ROW_UPDATED, this.onRowUpdated); this.table.off(EVENTS.ROW_UPDATED, this.onRowUpdated);
this.table.off(EVENTS.TABLE_FILTERED, this.onTableFiltered); this.table.off(EVENTS.TABLE_FILTERED, this.onTableFiltered);
this.column.removeEventListener("click", this.onClick);
this.column.removeEventListener("mousedown", this.onMousedown);
this.splitter.remove(); this.splitter.remove();
this.column.parentNode.remove(); this.column.parentNode.remove();
this.cells = null; this.cells = null;
@@ -695,7 +1160,6 @@ Column.prototype = {
} }
let cell = this.cells[index]; let cell = this.cells[index];
cell.toggleClass("theme-selected"); cell.toggleClass("theme-selected");
cell.focus();
this.selectedRow = cell.id; this.selectedRow = cell.id;
}, },
@@ -924,11 +1388,13 @@ Column.prototype = {
* for sorting. * for sorting.
*/ */
onClick: function(event) { onClick: function(event) {
if (event.originalTarget == this.column) { let target = event.originalTarget;
if (target.nodeType !== target.ELEMENT_NODE || target == this.column) {
return; return;
} }
if (event.button == 0 && event.originalTarget == this.header) { if (event.button == 0 && target == this.header) {
this.table.sortBy(this.id); this.table.sortBy(this.id);
} }
}, },
@@ -937,71 +1403,23 @@ Column.prototype = {
* Mousedown event handler for the column. Used to select rows. * Mousedown event handler for the column. Used to select rows.
*/ */
onMousedown: function(event) { onMousedown: function(event) {
if (event.originalTarget == this.column || let target = event.originalTarget;
event.originalTarget == this.header) {
if (target.nodeType !== target.ELEMENT_NODE ||
target == this.column ||
target == this.header) {
return; return;
} }
if (event.button == 0) { if (event.button == 0) {
let target = event.originalTarget; let closest = target.closest("[data-id]");
let dataid = null; if (!closest) {
return;
while (target) {
dataid = target.getAttribute("data-id");
if (dataid) {
break;
}
target = target.parentNode;
} }
let dataid = target.getAttribute("data-id");
this.table.emit(EVENTS.ROW_SELECTED, dataid); this.table.emit(EVENTS.ROW_SELECTED, dataid);
} }
}, },
/**
* Keydown event handler for the column. Used for keyboard navigation amongst
* rows.
*/
onKeydown: function(event) {
if (event.originalTarget == this.column ||
event.originalTarget == this.header) {
return;
}
switch (event.keyCode) {
case event.DOM_VK_ESCAPE:
case event.DOM_VK_LEFT:
case event.DOM_VK_RIGHT:
return;
case event.DOM_VK_HOME:
case event.DOM_VK_END:
return;
case event.DOM_VK_UP:
event.preventDefault();
let prevRow = event.originalTarget.previousSibling;
if (this.header == prevRow) {
prevRow = this.column.lastChild;
}
while (prevRow.hasAttribute("hidden")) {
prevRow = prevRow.previousSibling;
if (this.header == prevRow) {
prevRow = this.column.lastChild;
}
}
this.table.emit(EVENTS.ROW_SELECTED, prevRow.getAttribute("data-id"));
break;
case event.DOM_VK_DOWN:
event.preventDefault();
let nextRow = event.originalTarget.nextSibling ||
this.header.nextSibling;
while (nextRow.hasAttribute("hidden")) {
nextRow = nextRow.nextSibling ||
this.header.nextSibling;
}
this.table.emit(EVENTS.ROW_SELECTED, nextRow.getAttribute("data-id"));
break;
}
}
}; };
/** /**
@@ -1023,6 +1441,7 @@ function Cell(column, item, nextCell) {
this.label = document.createElementNS(XUL_NS, "label"); this.label = document.createElementNS(XUL_NS, "label");
this.label.setAttribute("crop", "end"); this.label.setAttribute("crop", "end");
this.label.className = "plain table-widget-cell"; this.label.className = "plain table-widget-cell";
if (nextCell) { if (nextCell) {
column.column.insertBefore(this.label, nextCell.label); column.column.insertBefore(this.label, nextCell.label);
} else { } else {
@@ -1090,10 +1509,13 @@ Cell.prototype = {
}, },
/** /**
* Flashes the cell for a brief time. This when done for ith cells in all * 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. * columns, makes it look like the row is being highlighted/flashed.
*/ */
flash: function() { flash: function() {
if (!this.label.parentNode) {
return;
}
this.label.classList.remove("flash-out"); this.label.classList.remove("flash-out");
// Cause a reflow so that the animation retriggers on adding back the class // Cause a reflow so that the animation retriggers on adding back the class
let a = this.label.parentNode.offsetWidth; // eslint-disable-line let a = this.label.parentNode.offsetWidth; // eslint-disable-line
@@ -1114,3 +1536,263 @@ Cell.prototype = {
this.label = null; 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.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) {
let doc = this.root.ownerDocument;
this._textbox = doc.createElementNS(XUL_NS, "textbox");
this._textbox.id = this.INPUT_ID;
this._textbox.setAttribute("flex", "1");
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: function({target}) {
this.edit(target);
},
/**
* Handle keypresses 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: function(event) {
if (!this.textbox) {
return;
}
switch (event.keyCode) {
case event.DOM_VK_ESCAPE:
this.cancelEdit();
event.preventDefault();
break;
case event.DOM_VK_RETURN:
this.completeEdit();
break;
case event.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: function(target) {
if (!target) {
return;
}
target.scrollIntoView();
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: function() {
if (!this.isEditing) {
return;
}
let oldValue = this.currentValue;
let newValue = this.textbox.value;
let changed = oldValue !== newValue;
this.textbox.hidden = true;
if (!this.currentTarget) {
return;
}
this.currentTarget.hidden = false;
if (changed) {
this.currentTarget.value = newValue;
let data = {
change: {
field: this.currentTarget,
oldValue: oldValue,
newValue: newValue
}
};
this.emit("change", data);
}
},
/**
* Cancel an edit.
*/
cancelEdit: function() {
if (!this.isEditing) {
return;
}
if (this.currentTarget) {
this.currentTarget.hidden = false;
}
this.textbox.hidden = true;
},
/**
* Stop edit mode and apply changes.
*/
blur: function() {
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: function(source, destination) {
let style = source.ownerGlobal.getComputedStyle(source);
let props = [
"borderTopWidth",
"borderRightWidth",
"borderBottomWidth",
"borderLeftWidth",
"fontFamily",
"fontSize",
"fontWeight",
"height",
"marginTop",
"marginRight",
"marginBottom",
"marginLeft",
"MozMarginStart",
"MozMarginEnd"
];
for (let 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: function() {
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");
},
};

2
devtools/client/storage/test/browser_storage_values.js
View File

@@ -30,7 +30,7 @@ const testCases = [
{name: "c1.isDomain", value: "false"}, {name: "c1.isDomain", value: "false"},
{name: "c1.isHttpOnly", value: "false"}, {name: "c1.isHttpOnly", value: "false"},
{name: "c1.host", value: "test1.example.org"}, {name: "c1.host", value: "test1.example.org"},
{name: "c1.expires", value: new Date(2000000000000).toLocaleString()}, {name: "c1.expires", value: new Date(2000000000000).toUTCString()},
{name: "c1.isSecure", value: "false"}, {name: "c1.isSecure", value: "false"},
]], ]],
[null, [ [null, [

118
devtools/client/storage/ui.js
View File

@@ -40,6 +40,13 @@ const HIDDEN_COLUMNS = [
"isSecure" "isSecure"
]; ];
const REASON = {
NEW_ROW: "new-row",
NEXT_50_ITEMS: "next-50-items",
POPULATE: "populate",
UPDATE: "update"
};
/** /**
* StorageUI is controls and builds the UI of the Storage Inspector. * StorageUI is controls and builds the UI of the Storage Inspector.
* *
@@ -75,6 +82,9 @@ var StorageUI = this.StorageUI = function StorageUI(front, target, panelWin) {
this.handleScrollEnd = this.handleScrollEnd.bind(this); this.handleScrollEnd = this.handleScrollEnd.bind(this);
this.table.on(TableWidget.EVENTS.SCROLL_END, this.handleScrollEnd); this.table.on(TableWidget.EVENTS.SCROLL_END, this.handleScrollEnd);
this.editItem = this.editItem.bind(this);
this.table.on(TableWidget.EVENTS.CELL_EDIT, this.editItem);
this.sidebar = this._panelDoc.getElementById("storage-sidebar"); this.sidebar = this._panelDoc.getElementById("storage-sidebar");
this.sidebar.setAttribute("width", "300"); this.sidebar.setAttribute("width", "300");
this.view = new VariablesView(this.sidebar.firstChild, this.view = new VariablesView(this.sidebar.firstChild,
@@ -110,6 +120,11 @@ StorageUI.prototype = {
}, },
destroy: function() { destroy: function() {
this.table.off(TableWidget.EVENTS.ROW_SELECTED, this.displayObjectSidebar);
this.table.off(TableWidget.EVENTS.SCROLL_END, this.handleScrollEnd);
this.table.off(TableWidget.EVENTS.CELL_EDIT, this.editItem);
this.table.destroy();
this.front.off("stores-update", this.onUpdate); this.front.off("stores-update", this.onUpdate);
this.front.off("stores-cleared", this.onCleared); this.front.off("stores-cleared", this.onCleared);
this._panelDoc.removeEventListener("keypress", this.handleKeypress); this._panelDoc.removeEventListener("keypress", this.handleKeypress);
@@ -126,6 +141,30 @@ StorageUI.prototype = {
this.table.clearSelection(); this.table.clearSelection();
}, },
getCurrentActor: function() {
let type = this.table.datatype;
return this.storageTypes[type];
},
makeFieldsEditable: function() {
let actor = this.getCurrentActor();
if (typeof actor.getEditableFields !== "undefined") {
actor.getEditableFields().then(fields => {
this.table.makeFieldsEditable(fields);
});
} else if (this.table._editableFieldsEngine) {
this.table._editableFieldsEngine.destroy();
}
},
editItem: function(eventType, data) {
let actor = this.getCurrentActor();
actor.editItem(data);
},
/** /**
* Removes the given item from the storage table. Reselects the next item in * Removes the given item from the storage table. Reselects the next item in
* the table and repopulates the sidebar with that item's data if the item * the table and repopulates the sidebar with that item's data if the item
@@ -219,7 +258,8 @@ StorageUI.prototype = {
this.tree.add([type, host, ...name]); this.tree.add([type, host, ...name]);
if (!this.tree.selectedItem) { if (!this.tree.selectedItem) {
this.tree.selectedItem = [type, host, name[0], name[1]]; this.tree.selectedItem = [type, host, name[0], name[1]];
this.fetchStorageObjects(type, host, [JSON.stringify(name)], 1); this.fetchStorageObjects(type, host, [JSON.stringify(name)],
REASON.NEW_ROW);
} }
} catch (ex) { } catch (ex) {
// Do nothing // Do nothing
@@ -227,7 +267,8 @@ StorageUI.prototype = {
} }
if (this.tree.isSelected([type, host])) { if (this.tree.isSelected([type, host])) {
this.fetchStorageObjects(type, host, added[type][host], 1); this.fetchStorageObjects(type, host, added[type][host],
REASON.NEW_ROW);
} }
} }
} }
@@ -295,9 +336,9 @@ StorageUI.prototype = {
toUpdate.push(name); toUpdate.push(name);
} }
} }
this.fetchStorageObjects(type, host, toUpdate, 2); this.fetchStorageObjects(type, host, toUpdate, REASON.UPDATE);
} catch (ex) { } catch (ex) {
this.fetchStorageObjects(type, host, changed[type][host], 2); this.fetchStorageObjects(type, host, changed[type][host], REASON.UPDATE);
} }
}, },
@@ -311,16 +352,21 @@ StorageUI.prototype = {
* Hostname * Hostname
* @param {array} names * @param {array} names
* Names of particular store objects. Empty if all are requested * Names of particular store objects. Empty if all are requested
* @param {number} reason * @param {Constant} reason
* 3 for loading next 50 items, 2 for update, 1 for new row in an * See REASON constant at top of file.
* existing table and 0 when populating a table for the first time
* for the given host/type
*/ */
fetchStorageObjects: function(type, host, names, reason) { fetchStorageObjects: function(type, host, names, reason) {
let fetchOpts = reason === 3 ? {offset: this.itemOffset} let fetchOpts = reason === REASON.NEXT_50_ITEMS ? {offset: this.itemOffset}
: {}; : {};
let storageType = this.storageTypes[type]; let storageType = this.storageTypes[type];
if (reason !== REASON.NEXT_50_ITEMS &&
reason !== REASON.UPDATE &&
reason !== REASON.NEW_ROW &&
reason !== REASON.POPULATE) {
throw new Error("Invalid reason specified");
}
storageType.getStoreObjects(host, names, fetchOpts).then(({data}) => { storageType.getStoreObjects(host, names, fetchOpts).then(({data}) => {
if (!data.length) { if (!data.length) {
this.emit("store-objects-updated"); this.emit("store-objects-updated");
@@ -331,6 +377,8 @@ StorageUI.prototype = {
} }
this.populateTable(data, reason); this.populateTable(data, reason);
this.emit("store-objects-updated"); this.emit("store-objects-updated");
this.makeFieldsEditable();
}, Cu.reportError); }, Cu.reportError);
}, },
@@ -369,7 +417,7 @@ StorageUI.prototype = {
this.tree.add([type, host, ...names]); this.tree.add([type, host, ...names]);
if (!this.tree.selectedItem) { if (!this.tree.selectedItem) {
this.tree.selectedItem = [type, host, names[0], names[1]]; this.tree.selectedItem = [type, host, names[0], names[1]];
this.fetchStorageObjects(type, host, [name], 0); this.fetchStorageObjects(type, host, [name], REASON.POPULATE);
} }
} catch (ex) { } catch (ex) {
// Do Nothing // Do Nothing
@@ -377,7 +425,7 @@ StorageUI.prototype = {
} }
if (!this.tree.selectedItem) { if (!this.tree.selectedItem) {
this.tree.selectedItem = [type, host]; this.tree.selectedItem = [type, host];
this.fetchStorageObjects(type, host, null, 0); this.fetchStorageObjects(type, host, null, REASON.POPULATE);
} }
} }
} }
@@ -518,7 +566,7 @@ StorageUI.prototype = {
let p = separators[j]; let p = separators[j];
let regex = new RegExp("^([^" + kv + p + "]*" + kv + "+[^" + kv + p + let regex = new RegExp("^([^" + kv + p + "]*" + kv + "+[^" + kv + p +
"]*" + p + "*)+$", "g"); "]*" + p + "*)+$", "g");
if (value.match(regex) && value.includes(kv) && if (value.match && value.match(regex) && value.includes(kv) &&
(value.includes(p) || value.split(kv).length == 2)) { (value.includes(p) || value.split(kv).length == 2)) {
return makeObject(kv, p); return makeObject(kv, p);
} }
@@ -527,7 +575,7 @@ StorageUI.prototype = {
// Testing for array // Testing for array
for (let p of separators) { for (let p of separators) {
let regex = new RegExp("^[^" + p + "]+(" + p + "+[^" + p + "]*)+$", "g"); let regex = new RegExp("^[^" + p + "]+(" + p + "+[^" + p + "]*)+$", "g");
if (value.match(regex)) { if (value.match && value.match(regex)) {
return value.split(p.replace(/\\*/g, "")); return value.split(p.replace(/\\*/g, ""));
} }
} }
@@ -558,7 +606,7 @@ StorageUI.prototype = {
names = [JSON.stringify(item.slice(2))]; names = [JSON.stringify(item.slice(2))];
} }
this.shouldResetColumns = true; this.shouldResetColumns = true;
this.fetchStorageObjects(type, host, names, 0); this.fetchStorageObjects(type, host, names, REASON.POPULATE);
this.itemOffset = 0; this.itemOffset = 0;
}, },
@@ -588,6 +636,7 @@ StorageUI.prototype = {
} }
} }
this.table.setColumns(columns, null, HIDDEN_COLUMNS); this.table.setColumns(columns, null, HIDDEN_COLUMNS);
this.table.datatype = type;
this.shouldResetColumns = false; this.shouldResetColumns = false;
this.hideSidebar(); this.hideSidebar();
}, },
@@ -597,10 +646,8 @@ StorageUI.prototype = {
* *
* @param {array[object]} data * @param {array[object]} data
* Array of objects to be populated in the storage table * Array of objects to be populated in the storage table
* @param {number} reason * @param {Constant} reason
* The reason of this populateTable call. 3 for loading next 50 items, * See REASON constant at top of file.
* 2 for update, 1 for new row in an existing table and 0 when
* populating a table for the first time for the given host/type
*/ */
populateTable: function(data, reason) { populateTable: function(data, reason) {
for (let item of data) { for (let item of data) {
@@ -610,23 +657,34 @@ StorageUI.prototype = {
} }
if (item.expires != null) { if (item.expires != null) {
item.expires = item.expires item.expires = item.expires
? new Date(item.expires).toLocaleString() ? new Date(item.expires).toUTCString()
: L10N.getStr("label.expires.session"); : L10N.getStr("label.expires.session");
} }
if (item.creationTime != null) { if (item.creationTime != null) {
item.creationTime = new Date(item.creationTime).toLocaleString(); item.creationTime = new Date(item.creationTime).toUTCString();
} }
if (item.lastAccessed != null) { if (item.lastAccessed != null) {
item.lastAccessed = new Date(item.lastAccessed).toLocaleString(); item.lastAccessed = new Date(item.lastAccessed).toUTCString();
} }
if (reason < 2 || reason == 3) {
this.table.push(item, reason == 0); switch (reason) {
} else { case REASON.POPULATE:
this.table.update(item); // Update without flashing the row.
if (item == this.table.selectedRow && !this.sidebar.hidden) { this.table.push(item, true);
this.displayObjectSidebar(); break;
} case REASON.NEW_ROW:
case REASON.NEXT_50_ITEMS:
// Update and flash the row.
this.table.push(item, false);
break;
case REASON.UPDATE:
this.table.update(item);
if (item == this.table.selectedRow && !this.sidebar.hidden) {
this.displayObjectSidebar();
}
break;
} }
this.shouldLoadMoreItems = true; this.shouldLoadMoreItems = true;
} }
}, },
@@ -671,6 +729,6 @@ StorageUI.prototype = {
if (item.length > 2) { if (item.length > 2) {
names = [JSON.stringify(item.slice(2))]; names = [JSON.stringify(item.slice(2))];
} }
this.fetchStorageObjects(type, host, names, 3); this.fetchStorageObjects(type, host, names, REASON.NEXT_50_ITEMS);
} }
}; };

8
devtools/client/themes/widgets.css
View File

@@ -1185,6 +1185,14 @@
background-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending"); background-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending");
} }
.theme-dark .table-widget-column[readonly] {
background-color: rgba(255,255,255,0.1);
}
.theme-light .table-widget-column[readonly] {
background-color: rgba(0,0,0,0.1);
}
/* Cells */ /* Cells */
.table-widget-cell { .table-widget-cell {