michael@0: /* vim: set ts=2 et sw=2 tw=80: */
michael@0: /* Any copyright is dedicated to the Public Domain.
michael@0: http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0:
michael@0: "use strict";
michael@0:
michael@0: // Test that outerHTML editing keybindings work as expected and that *special*
michael@0: // elements like , and can be edited correctly.
michael@0:
michael@0: const TEST_URL = "data:text/html," +
michael@0: "" +
michael@0: "" +
michael@0: "" +
michael@0: "" +
michael@0: "" +
michael@0: "";
michael@0: const SELECTOR = "#keyboard";
michael@0: const OLD_HTML = '';
michael@0: const NEW_HTML = 'Edited
';
michael@0:
michael@0: let test = asyncTest(function*() {
michael@0: let {inspector} = yield addTab(TEST_URL).then(openInspector);
michael@0:
michael@0: inspector.markup._frame.focus();
michael@0:
michael@0: info("Checking that pressing escape cancels edits");
michael@0: yield testEscapeCancels(inspector);
michael@0:
michael@0: info("Checking that pressing F2 commits edits");
michael@0: yield testF2Commits(inspector);
michael@0:
michael@0: info("Checking that editing the element works like other nodes");
michael@0: yield testBody(inspector);
michael@0:
michael@0: info("Checking that editing the element works like other nodes");
michael@0: yield testHead(inspector);
michael@0:
michael@0: info("Checking that editing the element works like other nodes");
michael@0: yield testDocumentElement(inspector);
michael@0:
michael@0: info("Checking (again) that editing the element works like other nodes");
michael@0: yield testDocumentElement2(inspector);
michael@0: });
michael@0:
michael@0: function testEscapeCancels(inspector) {
michael@0: let def = promise.defer();
michael@0: let node = getNode(SELECTOR);
michael@0:
michael@0: selectNode(node, inspector).then(() => {
michael@0: inspector.markup.htmlEditor.on("popupshown", function onPopupShown() {
michael@0: inspector.markup.htmlEditor.off("popupshown", onPopupShown);
michael@0:
michael@0: ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
michael@0: is(node.outerHTML, OLD_HTML, "The node is starting with old HTML.");
michael@0:
michael@0: inspector.markup.htmlEditor.on("popuphidden", function onPopupHidden() {
michael@0: inspector.markup.htmlEditor.off("popuphidden", onPopupHidden);
michael@0: ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
michael@0:
michael@0: let node = getNode(SELECTOR);
michael@0: is(node.outerHTML, OLD_HTML, "Escape cancels edits");
michael@0: def.resolve();
michael@0: });
michael@0:
michael@0: inspector.markup.htmlEditor.editor.setText(NEW_HTML);
michael@0:
michael@0: EventUtils.sendKey("ESCAPE", inspector.markup.htmlEditor.doc.defaultView);
michael@0: });
michael@0:
michael@0: EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
michael@0: });
michael@0:
michael@0: return def.promise;
michael@0: }
michael@0:
michael@0: function testF2Commits(inspector) {
michael@0: let def = promise.defer();
michael@0: let node = getNode(SELECTOR);
michael@0:
michael@0: inspector.markup.htmlEditor.on("popupshown", function onPopupShown() {
michael@0: inspector.markup.htmlEditor.off("popupshown", onPopupShown);
michael@0:
michael@0: ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
michael@0: is(node.outerHTML, OLD_HTML, "The node is starting with old HTML.");
michael@0:
michael@0: inspector.once("markupmutation", (e, aMutations) => {
michael@0: ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
michael@0:
michael@0: let node = getNode(SELECTOR);
michael@0: is(node.outerHTML, NEW_HTML, "F2 commits edits - the node has new HTML.");
michael@0: def.resolve();
michael@0: });
michael@0:
michael@0: inspector.markup.htmlEditor.editor.setText(NEW_HTML);
michael@0: EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
michael@0: });
michael@0:
michael@0: inspector.markup._frame.contentDocument.documentElement.focus();
michael@0: EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
michael@0:
michael@0: return def.promise;
michael@0: }
michael@0:
michael@0: function testBody(inspector) {
michael@0: let body = getNode("body");
michael@0: let bodyHTML = '';
michael@0: let bodyFront = inspector.markup.walker.frontForRawNode(body);
michael@0: let doc = content.document;
michael@0:
michael@0: let mutated = inspector.once("markupmutation");
michael@0: inspector.markup.updateNodeOuterHTML(bodyFront, bodyHTML, body.outerHTML);
michael@0:
michael@0: return mutated.then(mutations => {
michael@0: is(getNode("body").outerHTML, bodyHTML, " HTML has been updated");
michael@0: is(doc.querySelectorAll("head").length, 1, "no extra s have been added");
michael@0: return inspector.once("inspector-updated");
michael@0: });
michael@0: }
michael@0:
michael@0: function testHead(inspector) {
michael@0: let head = getNode("head");
michael@0: let headHTML = 'New Title';
michael@0: let headFront = inspector.markup.walker.frontForRawNode(head);
michael@0: let doc = content.document;
michael@0:
michael@0: let mutated = inspector.once("markupmutation");
michael@0: inspector.markup.updateNodeOuterHTML(headFront, headHTML, head.outerHTML);
michael@0:
michael@0: return mutated.then(mutations => {
michael@0: is(doc.title, "New Title", "New title has been added");
michael@0: is(doc.defaultView.foo, undefined, "Script has not been executed");
michael@0: is(doc.querySelector("head").outerHTML, headHTML, " HTML has been updated");
michael@0: is(doc.querySelectorAll("body").length, 1, "no extra s have been added");
michael@0: return inspector.once("inspector-updated");
michael@0: });
michael@0: }
michael@0:
michael@0: function testDocumentElement(inspector) {
michael@0: let doc = content.document;
michael@0: let docElement = doc.documentElement;
michael@0: let docElementHTML = 'Updated from document elementHello
';
michael@0: let docElementFront = inspector.markup.walker.frontForRawNode(docElement);
michael@0:
michael@0: let mutated = inspector.once("markupmutation");
michael@0: inspector.markup.updateNodeOuterHTML(docElementFront, docElementHTML, docElement.outerHTML);
michael@0:
michael@0: return mutated.then(mutations => {
michael@0: is(doc.title, "Updated from document element", "New title has been added");
michael@0: is(doc.defaultView.foo, undefined, "Script has not been executed");
michael@0: is(doc.documentElement.id, "updated", " ID has been updated");
michael@0: is(doc.documentElement.className, "", " class has been updated");
michael@0: is(doc.documentElement.getAttribute("foo"), "bar", " attribute has been updated");
michael@0: is(doc.documentElement.outerHTML, docElementHTML, " HTML has been updated");
michael@0: is(doc.querySelectorAll("head").length, 1, "no extra s have been added");
michael@0: is(doc.querySelectorAll("body").length, 1, "no extra s have been added");
michael@0: is(doc.body.textContent, "Hello", "document.body.textContent has been updated");
michael@0: });
michael@0: }
michael@0:
michael@0: function testDocumentElement2(inspector) {
michael@0: let doc = content.document;
michael@0: let docElement = doc.documentElement;
michael@0: let docElementHTML = 'Updated again from document elementHello again
';
michael@0: let docElementFront = inspector.markup.walker.frontForRawNode(docElement);
michael@0:
michael@0: let mutated = inspector.once("markupmutation");
michael@0: inspector.markup.updateNodeOuterHTML(docElementFront, docElementHTML, docElement.outerHTML);
michael@0:
michael@0: return mutated.then(mutations => {
michael@0: is(doc.title, "Updated again from document element", "New title has been added");
michael@0: is(doc.defaultView.foo, undefined, "Script has not been executed");
michael@0: is(doc.documentElement.id, "somethingelse", " ID has been updated");
michael@0: is(doc.documentElement.className, "updated", " class has been updated");
michael@0: is(doc.documentElement.getAttribute("foo"), null, " attribute has been removed");
michael@0: is(doc.documentElement.outerHTML, docElementHTML, " HTML has been updated");
michael@0: is(doc.querySelectorAll("head").length, 1, "no extra s have been added");
michael@0: is(doc.querySelectorAll("body").length, 1, "no extra s have been added");
michael@0: is(doc.body.textContent, "Hello again", "document.body.textContent has been updated");
michael@0: });
michael@0: }