mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

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

MozReview-Commit-ID: DBfeUEKQNly

--HG--
extra : rebase_source : 31fba0dd2a9bbe5ca5084f1b5da81bbeb04fecdc
extra : amend_source : 4bcf6fe802bbcb9e353556d39b8790a316aefb77
This commit is contained in:
Michael Ratcliffe 2016-03-01 22:47:31 +00:00
Родитель 5f81508edb
Коммит d1d9e7893b
8 изменённых файлов: 1039 добавлений и 316 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

157
devtools/client/shared/test/browser_tableWidget_basic.js
Просмотреть файл

@ -4,61 +4,60 @@
// Tests that the table widget api works fine
"use strict";
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://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'" +
" title='Table Widget' width='600' height='500'>" +
"<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");
var doc, table;
add_task(function*() {
yield addTab("about:blank");
let [host, , doc] = yield createHost("bottom", TEST_URI);
function test() {
waitForExplicitFinish();
let win = Services.ww.openWindow(null, TEST_URI, "_blank", TEST_OPT, null);
win.addEventListener("load", function onLoad() {
win.removeEventListener("load", onLoad, false);
waitForFocus(function () {
doc = win.document;
table = new TableWidget(doc.querySelector("box"), {
initialColumns: {
col1: "Column 1",
col2: "Column 2",
col3: "Column 3",
col4: "Column 4"
},
uniqueId: "col1",
emptyText: "This is dummy empty text",
highlightUpdated: true,
removableColumns: true,
firstColumn: "col4"
});
startTests();
});
let table = new TableWidget(doc.querySelector("box"), {
initialColumns: {
col1: "Column 1",
col2: "Column 2",
col3: "Column 3",
col4: "Column 4"
},
uniqueId: "col1",
emptyText: "This is dummy empty text",
highlightUpdated: true,
removableColumns: true,
firstColumn: "col4"
});
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();
doc.defaultView.close();
doc = table = null;
host.destroy();
gBrowser.removeCurrentTab();
table = null;
finish();
}
function startTests() {
populateTable();
testTreeItemInsertedCorrectly();
testAPI();
endTests();
}
function populateTable() {
function populateTable(doc, table) {
table.push({
col1: "id1",
col2: "value10",
@ -125,25 +124,25 @@ function populateTable() {
/**
* Test if the nodes are inserted correctly in the table.
*/
function testTreeItemInsertedCorrectly() {
is(table.tbody.children.length, 4*2 /* double because splitters */,
"4 columns exist");
function testTreeItemInsertedCorrectly(doc, table) {
// double because of splitters
is(table.tbody.children.length, 4 * 2, "4 columns exist");
// 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");
is(table.tbody.children[0].firstChild.firstChild.value, "Column 4",
"Correct column header value");
for (let i = 1; i < 4; i++) {
is(table.tbody.children[i * 2].firstChild.children.length, 9 + 1 /* header */,
"Correct rows in column " + i);
is(table.tbody.children[i * 2].firstChild.firstChild.value, "Column " + i,
is(table.tbody.children[i * 2].firstChild.children.length, 9 + 1,
`Correct rows in column ${i}`);
is(table.tbody.children[i * 2].firstChild.firstChild.value, `Column ${i}`,
"Correct column header value");
}
for (let i = 1; i < 10; i++) {
is(table.tbody.children[2].firstChild.children[i].value, "id" + i,
"Correct value in row " + i);
is(table.tbody.children[2].firstChild.children[i].value, `id${i}`,
`Correct value in row ${i}`);
}
// Remove firstColumn option and reset the table
@ -155,25 +154,27 @@ function testTreeItemInsertedCorrectly() {
col3: "Column 3",
col4: "Column 4"
});
populateTable();
populateTable(doc, table);
// Check if the nodes are inserted correctly without firstColumn option
for (let i = 0; i < 4; i++) {
is(table.tbody.children[i * 2].firstChild.children.length, 9 + 1 /* header */,
"Correct rows in column " + i);
is(table.tbody.children[i * 2].firstChild.firstChild.value, "Column " + (i + 1),
"Correct column header value");
is(table.tbody.children[i * 2].firstChild.children.length, 9 + 1,
`Correct rows in column ${i}`);
is(table.tbody.children[i * 2].firstChild.firstChild.value,
`Column ${i + 1}`,
"Correct column header value");
}
for (let i = 1; i < 10; i++) {
is(table.tbody.firstChild.firstChild.children[i].value, "id" + i,
"Correct value in row " + i);
is(table.tbody.firstChild.firstChild.children[i].value, `id${i}`,
`Correct value in row ${i}`);
}
}
/**
* Tests if the API exposed by TableWidget works properly
*/
function testAPI() {
function testAPI(doc, table) {
info("Testing TableWidget API");
// Check if selectRow and selectedRow setter works as expected
// Nothing should be selected beforehand
@ -190,7 +191,7 @@ function testAPI() {
is(node2.getAttribute("data-id"), "id7", "Correct node selected");
// 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
ok(table.isSelected("id7"), "isSelected with column id works");
@ -210,7 +211,7 @@ function testAPI() {
is(node3.getAttribute("data-id"), "id4", "Correct node selected");
// 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
table.clearSelection();
@ -234,7 +235,8 @@ function testAPI() {
ok(table.isSelected("id2"), "Correct row selected after selectNextRow call");
table.selectPreviousRow();
ok(table.isSelected("id1"), "Correct row selected after selectPreviousRow call");
ok(table.isSelected("id1"),
"Correct row selected after selectPreviousRow call");
table.selectPreviousRow();
ok(table.isSelected("id9"),
@ -281,13 +283,15 @@ function testAPI() {
// testing if clear works
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");
for (let i = 0; i < 4; i++) {
is(table.tbody.children[i*2].firstChild.children.length, 1 /* header */,
"Only header in the column " + i + " after clear call");
is(table.tbody.children[i*2].firstChild.firstChild.value, "Column " + (i + 1),
"Correct column header value");
is(table.tbody.children[i * 2].firstChild.children.length, 1,
`Only header in the column ${i} after clear call`);
is(table.tbody.children[i * 2].firstChild.firstChild.value,
`Column ${i + 1}`,
"Correct column header value");
}
// testing if setColumns work
@ -296,7 +300,8 @@ function testAPI() {
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");
is(table.tbody.children[0].firstChild.firstChild.value, "Foobar",
"Correct column header value for first column");
@ -309,10 +314,11 @@ function testAPI() {
col3: "Column 3",
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");
populateTable();
populateTable(doc, table);
// testing if update works
is(doc.querySelectorAll("[data-id='id4']")[1].value, "value12",
@ -326,12 +332,12 @@ function testAPI() {
is(doc.querySelectorAll("[data-id='id4']")[1].value, "UPDATED",
"Correct value after update");
// testing if sorting works
// calling it once on an already sorted column should sort in descending manner
// testing if sorting works by calling it once on an already sorted column
// should sort descending
table.sortBy("col1");
for (let i = 1; i < 10; i++) {
is(table.tbody.firstChild.firstChild.children[i].value, "id" + (10 - i),
"Correct value in row " + i + " after descending sort by on col1");
is(table.tbody.firstChild.firstChild.children[i].value, `id${10 - i}`,
`Correct value in row ${i} after descending sort by on col1`);
}
// Calling it on an unsorted column should sort by it in ascending manner
table.sortBy("col2");
@ -349,7 +355,7 @@ function testAPI() {
checkAscendingOrder(cell);
table.clear();
populateTable();
populateTable(doc, table);
// testing if sorting works should sort by ascending manner
table.sortBy("col4");
@ -365,16 +371,17 @@ function testAPI() {
}
function checkAscendingOrder(cell) {
while(cell) {
while (cell) {
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");
cell = cell.nextSibling;
}
}
function checkDescendingOrder(cell) {
while(cell != cell.parentNode.firstChild) {
while (cell != cell.parentNode.firstChild) {
let currentCell = cell.value || cell.textContent;
let nextCell = cell.nextSibling.value || cell.nextSibling.textContent;
ok(currentCell >= nextCell, "Sorting is in descending order");

130
devtools/client/shared/test/browser_tableWidget_keyboard_interaction.js
Просмотреть файл

@ -4,10 +4,16 @@
// 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'?>" +
"<?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'" +
" title='Table Widget' width='600' height='500'>" +
"<box flex='1' class='theme-light'/></window>";
@ -25,7 +31,7 @@ function test() {
win.addEventListener("load", function onLoad() {
win.removeEventListener("load", onLoad, false);
waitForFocus(function () {
waitForFocus(function() {
doc = win.document;
table = new TableWidget(doc.querySelector("box"), {
initialColumns: {
@ -120,7 +126,8 @@ function populateTable() {
// Sends a click event on the passed DOM node in an async manner
function click(node, button = 0) {
if (button == 0) {
executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, {}, doc.defaultView));
executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, {},
doc.defaultView));
} else {
executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, {
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*() {
info("Testing keyboard interaction with the table");
info("clicking on first row");
let node = table.tbody.firstChild.firstChild.children[1];
info("clicking on the row containing id2");
let node = getNodeByValue("id2");
let event = table.once(TableWidget.EVENTS.ROW_SELECTED);
click(node);
let [name, id] = yield event;
yield event;
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 down key to select next row");
event = table.once(TableWidget.EVENTS.ROW_SELECTED);
EventUtils.sendKey("DOWN", 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");
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");
}
yield testRow("id3", "DOWN", "next row");
yield testRow("id4", "DOWN", "next row");
yield testRow("id3", "UP", "previous row");
yield testRow("id4", "DOWN", "next row");
yield testRow("id5", "DOWN", "next row");
yield testRow("id6", "DOWN", "next row");
yield testRow("id5", "UP", "previous row");
yield testRow("id4", "UP", "previous row");
yield testRow("id3", "UP", "previous row");
// selecting last item node to test edge navigation cycling case
table.selectedRow = "id9";
// pressing down now should move to first row.
node = table.tbody.firstChild.firstChild.children[1];
// node should not have selected class
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 down on last row should move to first row.
yield testRow("id1", "DOWN", "first 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
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("UP", doc.defaultView);
id = yield event;
is(id, "id9", "Correct row was selected after pressing down");
info(`Pressing ${key} to select ${destination}`);
let event = table.once(TableWidget.EVENTS.ROW_SELECTED);
EventUtils.sendKey(key, doc.defaultView);
let uniqueId = yield event;
is(id, uniqueId, `Correct row was selected after pressing ${key}`);
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++) {
is(nodes[i].getAttribute("data-id"), "id9",
is(nodes[i].getAttribute("data-id"), id,
"Correct cell selected in all columns");
}
});
}

62
devtools/client/shared/test/browser_tableWidget_mouse_interaction.js
Просмотреть файл

@ -4,17 +4,22 @@
// 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'?>" +
"<?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'" +
" title='Table Widget' width='600' height='500'>" +
"<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 Promise = require("promise");
var doc, table;
@ -25,7 +30,7 @@ function test() {
win.addEventListener("load", function onLoad() {
win.removeEventListener("load", onLoad, false);
waitForFocus(function () {
waitForFocus(function() {
doc = win.document;
table = new TableWidget(doc.querySelector("box"), {
initialColumns: {
@ -120,7 +125,8 @@ function populateTable() {
// Sends a click event on the passed DOM node in an async manner
function click(node, button = 0) {
if (button == 0) {
executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, {}, doc.defaultView));
executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, {},
doc.defaultView));
} else {
executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, {
button: button,
@ -143,7 +149,8 @@ var testMouseInteraction = Task.async(function*() {
"Node should not have selected class before clicking");
click(node);
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");
info("clicking on third row to select it");
@ -156,7 +163,7 @@ var testMouseInteraction = Task.async(function*() {
id = yield event;
ok(node2.classList.contains("theme-selected"),
"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");
ok(!node.classList.contains("theme-selected"),
"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");
ok(!node.hasAttribute("sorted"),
"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");
click(node);
id = yield event;
@ -181,15 +189,12 @@ var testMouseInteraction = Task.async(function*() {
// test context menu opening.
// hiding second column
// 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 click on the first column header");
node = table.tbody.firstChild.firstChild.firstChild;
let onPopupShown = once(table.menupopup, "popupshown");
click(node, 2);
yield event.promise;
yield onPopupShown;
is(table.menupopup.querySelectorAll("[disabled]").length, 1,
"Only 1 menuitem is disabled");
is(table.menupopup.querySelector("[disabled]"),
@ -210,15 +215,12 @@ var testMouseInteraction = Task.async(function*() {
// hiding third column
// 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");
node = table.tbody.firstChild.firstChild.firstChild;
onPopupShown = once(table.menupopup, "popupshown");
click(node, 2);
yield event.promise;
yield onPopupShown;
is(table.menupopup.querySelectorAll("[disabled]").length, 1,
"Only 1 menuitem is disabled");
// popup should be open now
@ -236,15 +238,12 @@ var testMouseInteraction = Task.async(function*() {
// opening again to see if 2 items are disabled now
// 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");
node = table.tbody.firstChild.firstChild.firstChild;
onPopupShown = once(table.menupopup, "popupshown");
click(node, 2);
yield event.promise;
yield onPopupShown;
is(table.menupopup.querySelectorAll("[disabled]").length, 2,
"2 menuitems are disabled now as only 2 columns remain visible");
is(table.menupopup.querySelectorAll("[disabled]")[0],
@ -270,15 +269,12 @@ var testMouseInteraction = Task.async(function*() {
// showing back 3rd column
// 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");
node = table.tbody.firstChild.firstChild.firstChild;
onPopupShown = once(table.menupopup, "popupshown");
click(node, 2);
yield event.promise;
yield onPopupShown;
// popup should be open now
// clicking on second column label
event = table.once(TableWidget.EVENTS.HEADER_CONTEXT_MENU);

68
devtools/client/shared/test/head.js
Просмотреть файл

@ -1,6 +1,10 @@
/* 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
* 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
Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js", this);
@ -16,8 +20,7 @@ function catchFail(func) {
return function() {
try {
return func.apply(null, arguments);
}
catch (ex) {
} catch (ex) {
ok(false, ex);
console.error(ex);
finish();
@ -29,7 +32,7 @@ function catchFail(func) {
/**
* Polls a given function waiting for the given value.
*
* @param object aOptions
* @param object options
* Options object with the following properties:
* - validator
* 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|
* function must return a trueish value.
* 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 timeout = aOptions.timeout || 5000;
let timeout = options.timeout || 5000;
let lastValue;
function wait(validatorFn, successFn, failureFn)
{
function wait(validatorFn, successFn, failureFn) {
if ((Date.now() - start) > timeout) {
// Log the failure.
ok(false, "Timed out while waiting for: " + aOptions.name);
let expected = "value" in aOptions ?
"'" + aOptions.value + "'" :
ok(false, "Timed out while waiting for: " + options.name);
let expected = "value" in options ?
"'" + options.value + "'" :
"a trueish value";
info("timeout info :: got '" + lastValue + "', expected " + expected);
failureFn(aOptions, lastValue);
failureFn(options, lastValue);
return;
}
lastValue = validatorFn(aOptions, lastValue);
let successful = "value" in aOptions ?
lastValue == aOptions.value :
lastValue = validatorFn(options, lastValue);
let successful = "value" in options ?
lastValue == options.value :
lastValue;
if (successful) {
ok(true, aOptions.name);
successFn(aOptions, lastValue);
}
else {
ok(true, options.name);
successFn(options, lastValue);
} else {
setTimeout(() => {
wait(validatorFn, successFn, failureFn);
}, 100);
}
}
wait(aOptions.validator, aOptions.success, aOptions.failure);
wait(options.validator, options.success, options.failure);
}
function oneTimeObserve(name, callback) {
return new Promise((resolve) => {
var func = function() {
let func = function() {
Services.obs.removeObserver(func, name);
if (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 iframe = yield host.create();
@ -164,7 +164,9 @@ function stopRecordingTelemetryLogs(Telemetry) {
function checkTelemetryResults(Telemetry) {
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")) {
ok(value.length === 1 && value[0] === true,
"Per user value " + histId + " has a single value of true");
@ -196,10 +198,10 @@ function checkTelemetryResults(Telemetry) {
* @param {String} 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));
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
yield new Promise(resolve => setTimeout(resolve, usageTime));
@ -264,7 +266,8 @@ function showFilterPopupPresets(widget) {
* @param {string} value
* @return {Promise}
*/
var showFilterPopupPresetsAndCreatePreset = Task.async(function*(widget, name, value) {
let showFilterPopupPresetsAndCreatePreset =
Task.async(function*(widget, name, value) {
yield showFilterPopupPresets(widget);
let onRender = widget.once("render");
@ -325,7 +328,8 @@ function checkCssSyntaxHighlighterOutput(expectedNodes, parent) {
* Check the type and content of a single node.
*/
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("Actual text content: [" + actual.textContent + "]");
@ -365,10 +369,10 @@ function checkCssSyntaxHighlighterOutput(expectedNodes, parent) {
}
info("Logging the actual nodes we have:");
for (var j = 0; j < parent.childNodes.length; j++) {
var n = parent.childNodes[j];
for (let j = 0; j < parent.childNodes.length; j++) {
let n = parent.childNodes[j];
info(j + " / " +
"nodeType: "+ n.nodeType + " / " +
"nodeType: " + n.nodeType + " / " +
"textContent: " + n.textContent);
}

810
devtools/client/shared/widgets/TableWidget.js
Просмотреть файл

@ -20,10 +20,14 @@ 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"
};
@ -102,6 +106,16 @@ function TableWidget(node, options = {}) {
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, false);
this.document.addEventListener("mousedown", this.onMousedown, false);
}
TableWidget.prototype = {
@ -150,9 +164,421 @@ TableWidget.prototype = {
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() {
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) {
this.menupopup.removeEventListener("command", this.onPopupCommand);
this.menupopup.remove();
}
},
@ -358,9 +784,12 @@ TableWidget.prototype = {
}
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]);
},
/**
@ -375,13 +804,14 @@ TableWidget.prototype = {
if (!removed) {
return;
}
for (let column of this.columns.values()) {
column.remove(item);
}
if (this.items.size == 0) {
this.tbody.setAttribute("empty", "empty");
}
this.emit(EVENTS.ROW_REMOVED, item);
},
/**
@ -405,6 +835,7 @@ TableWidget.prototype = {
}
if (changed) {
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.setPlaceholderText(this.emptyText);
this.emit(EVENTS.TABLE_CLEARED, this);
},
/**
@ -452,6 +885,10 @@ TableWidget.prototype = {
if (this.filteredValue == value) {
return;
}
if (this._editableFieldsEngine) {
this._editableFieldsEngine.completeEdit();
}
this.filteredValue = value;
if (!value) {
this.emit(EVENTS.TABLE_FILTERED, []);
@ -563,10 +1000,8 @@ function Column(table, id, header) {
this.onClick = this.onClick.bind(this);
this.onMousedown = this.onMousedown.bind(this);
this.onKeydown = this.onKeydown.bind(this);
this.column.addEventListener("click", this.onClick);
this.column.addEventListener("mousedown", this.onMousedown);
this.column.addEventListener("keydown", this.onKeydown);
}
Column.prototype = {
@ -620,6 +1055,23 @@ Column.prototype = {
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.
*
@ -665,6 +1117,15 @@ Column.prototype = {
onRowUpdated: function(event, id) {
this._updateItems();
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.updateZebra();
@ -675,6 +1136,10 @@ Column.prototype = {
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.parentNode.remove();
this.cells = null;
@ -695,7 +1160,6 @@ Column.prototype = {
}
let cell = this.cells[index];
cell.toggleClass("theme-selected");
cell.focus();
this.selectedRow = cell.id;
},
@ -924,11 +1388,13 @@ Column.prototype = {
* for sorting.
*/
onClick: function(event) {
if (event.originalTarget == this.column) {
let target = event.originalTarget;
if (target.nodeType !== target.ELEMENT_NODE || target == this.column) {
return;
}
if (event.button == 0 && event.originalTarget == this.header) {
if (event.button == 0 && target == this.header) {
this.table.sortBy(this.id);
}
},
@ -937,71 +1403,23 @@ Column.prototype = {
* Mousedown event handler for the column. Used to select rows.
*/
onMousedown: function(event) {
if (event.originalTarget == this.column ||
event.originalTarget == this.header) {
let target = event.originalTarget;
if (target.nodeType !== target.ELEMENT_NODE ||
target == this.column ||
target == this.header) {
return;
}
if (event.button == 0) {
let target = event.originalTarget;
let dataid = null;
while (target) {
dataid = target.getAttribute("data-id");
if (dataid) {
break;
}
target = target.parentNode;
let closest = target.closest("[data-id]");
if (!closest) {
return;
}
let dataid = target.getAttribute("data-id");
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.setAttribute("crop", "end");
this.label.className = "plain table-widget-cell";
if (nextCell) {
column.column.insertBefore(this.label, nextCell.label);
} 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.
*/
flash: function() {
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
@ -1114,3 +1536,263 @@ Cell.prototype = {
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
Просмотреть файл

@ -30,7 +30,7 @@ const testCases = [
{name: "c1.isDomain", value: "false"},
{name: "c1.isHttpOnly", value: "false"},
{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"},
]],
[null, [

118
devtools/client/storage/ui.js
Просмотреть файл

@ -40,6 +40,13 @@ const HIDDEN_COLUMNS = [
"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.
*
@ -75,6 +82,9 @@ var StorageUI = this.StorageUI = function StorageUI(front, target, panelWin) {
this.handleScrollEnd = this.handleScrollEnd.bind(this);
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.setAttribute("width", "300");
this.view = new VariablesView(this.sidebar.firstChild,
@ -110,6 +120,11 @@ StorageUI.prototype = {
},
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-cleared", this.onCleared);
this._panelDoc.removeEventListener("keypress", this.handleKeypress);
@ -126,6 +141,30 @@ StorageUI.prototype = {
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
* 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]);
if (!this.tree.selectedItem) {
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) {
// Do nothing
@ -227,7 +267,8 @@ StorageUI.prototype = {
}
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);
}
}
this.fetchStorageObjects(type, host, toUpdate, 2);
this.fetchStorageObjects(type, host, toUpdate, REASON.UPDATE);
} 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
* @param {array} names
* Names of particular store objects. Empty if all are requested
* @param {number} reason
* 3 for loading next 50 items, 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
* @param {Constant} reason
* See REASON constant at top of file.
*/
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];
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}) => {
if (!data.length) {
this.emit("store-objects-updated");
@ -331,6 +377,8 @@ StorageUI.prototype = {
}
this.populateTable(data, reason);
this.emit("store-objects-updated");
this.makeFieldsEditable();
}, Cu.reportError);
},
@ -369,7 +417,7 @@ StorageUI.prototype = {
this.tree.add([type, host, ...names]);
if (!this.tree.selectedItem) {
this.tree.selectedItem = [type, host, names[0], names[1]];
this.fetchStorageObjects(type, host, [name], 0);
this.fetchStorageObjects(type, host, [name], REASON.POPULATE);
}
} catch (ex) {
// Do Nothing
@ -377,7 +425,7 @@ StorageUI.prototype = {
}
if (!this.tree.selectedItem) {
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 regex = new RegExp("^([^" + kv + p + "]*" + kv + "+[^" + kv + p +
"]*" + 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)) {
return makeObject(kv, p);
}
@ -527,7 +575,7 @@ StorageUI.prototype = {
// Testing for array
for (let p of separators) {
let regex = new RegExp("^[^" + p + "]+(" + p + "+[^" + p + "]*)+$", "g");
if (value.match(regex)) {
if (value.match && value.match(regex)) {
return value.split(p.replace(/\\*/g, ""));
}
}
@ -558,7 +606,7 @@ StorageUI.prototype = {
names = [JSON.stringify(item.slice(2))];
}
this.shouldResetColumns = true;
this.fetchStorageObjects(type, host, names, 0);
this.fetchStorageObjects(type, host, names, REASON.POPULATE);
this.itemOffset = 0;
},
@ -588,6 +636,7 @@ StorageUI.prototype = {
}
}
this.table.setColumns(columns, null, HIDDEN_COLUMNS);
this.table.datatype = type;
this.shouldResetColumns = false;
this.hideSidebar();
},
@ -597,10 +646,8 @@ StorageUI.prototype = {
*
* @param {array[object]} data
* Array of objects to be populated in the storage table
* @param {number} reason
* The reason of this populateTable call. 3 for loading next 50 items,
* 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
* @param {Constant} reason
* See REASON constant at top of file.
*/
populateTable: function(data, reason) {
for (let item of data) {
@ -610,23 +657,34 @@ StorageUI.prototype = {
}
if (item.expires != null) {
item.expires = item.expires
? new Date(item.expires).toLocaleString()
? new Date(item.expires).toUTCString()
: L10N.getStr("label.expires.session");
}
if (item.creationTime != null) {
item.creationTime = new Date(item.creationTime).toLocaleString();
item.creationTime = new Date(item.creationTime).toUTCString();
}
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);
} else {
this.table.update(item);
if (item == this.table.selectedRow && !this.sidebar.hidden) {
this.displayObjectSidebar();
}
switch (reason) {
case REASON.POPULATE:
// Update without flashing the row.
this.table.push(item, true);
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;
}
},
@ -671,6 +729,6 @@ StorageUI.prototype = {
if (item.length > 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
Просмотреть файл

@ -1185,6 +1185,14 @@
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 */
.table-widget-cell {