1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/markupview/test/browser_markupview_html_edit_03.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,180 @@
1.4 +/* vim: set ts=2 et sw=2 tw=80: */
1.5 +/* Any copyright is dedicated to the Public Domain.
1.6 + http://creativecommons.org/publicdomain/zero/1.0/ */
1.7 +
1.8 +"use strict";
1.9 +
1.10 +// Test that outerHTML editing keybindings work as expected and that *special*
1.11 +// elements like <html>, <body> and <head> can be edited correctly.
1.12 +
1.13 +const TEST_URL = "data:text/html," +
1.14 + "<!DOCTYPE html>" +
1.15 + "<head><meta charset='utf-8' /></head>" +
1.16 + "<body>" +
1.17 + "<div id=\"keyboard\"></div>" +
1.18 + "</body>" +
1.19 + "</html>";
1.20 +const SELECTOR = "#keyboard";
1.21 +const OLD_HTML = '<div id="keyboard"></div>';
1.22 +const NEW_HTML = '<div id="keyboard">Edited</div>';
1.23 +
1.24 +let test = asyncTest(function*() {
1.25 + let {inspector} = yield addTab(TEST_URL).then(openInspector);
1.26 +
1.27 + inspector.markup._frame.focus();
1.28 +
1.29 + info("Checking that pressing escape cancels edits");
1.30 + yield testEscapeCancels(inspector);
1.31 +
1.32 + info("Checking that pressing F2 commits edits");
1.33 + yield testF2Commits(inspector);
1.34 +
1.35 + info("Checking that editing the <body> element works like other nodes");
1.36 + yield testBody(inspector);
1.37 +
1.38 + info("Checking that editing the <head> element works like other nodes");
1.39 + yield testHead(inspector);
1.40 +
1.41 + info("Checking that editing the <html> element works like other nodes");
1.42 + yield testDocumentElement(inspector);
1.43 +
1.44 + info("Checking (again) that editing the <html> element works like other nodes");
1.45 + yield testDocumentElement2(inspector);
1.46 +});
1.47 +
1.48 +function testEscapeCancels(inspector) {
1.49 + let def = promise.defer();
1.50 + let node = getNode(SELECTOR);
1.51 +
1.52 + selectNode(node, inspector).then(() => {
1.53 + inspector.markup.htmlEditor.on("popupshown", function onPopupShown() {
1.54 + inspector.markup.htmlEditor.off("popupshown", onPopupShown);
1.55 +
1.56 + ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
1.57 + is(node.outerHTML, OLD_HTML, "The node is starting with old HTML.");
1.58 +
1.59 + inspector.markup.htmlEditor.on("popuphidden", function onPopupHidden() {
1.60 + inspector.markup.htmlEditor.off("popuphidden", onPopupHidden);
1.61 + ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
1.62 +
1.63 + let node = getNode(SELECTOR);
1.64 + is(node.outerHTML, OLD_HTML, "Escape cancels edits");
1.65 + def.resolve();
1.66 + });
1.67 +
1.68 + inspector.markup.htmlEditor.editor.setText(NEW_HTML);
1.69 +
1.70 + EventUtils.sendKey("ESCAPE", inspector.markup.htmlEditor.doc.defaultView);
1.71 + });
1.72 +
1.73 + EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
1.74 + });
1.75 +
1.76 + return def.promise;
1.77 +}
1.78 +
1.79 +function testF2Commits(inspector) {
1.80 + let def = promise.defer();
1.81 + let node = getNode(SELECTOR);
1.82 +
1.83 + inspector.markup.htmlEditor.on("popupshown", function onPopupShown() {
1.84 + inspector.markup.htmlEditor.off("popupshown", onPopupShown);
1.85 +
1.86 + ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
1.87 + is(node.outerHTML, OLD_HTML, "The node is starting with old HTML.");
1.88 +
1.89 + inspector.once("markupmutation", (e, aMutations) => {
1.90 + ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
1.91 +
1.92 + let node = getNode(SELECTOR);
1.93 + is(node.outerHTML, NEW_HTML, "F2 commits edits - the node has new HTML.");
1.94 + def.resolve();
1.95 + });
1.96 +
1.97 + inspector.markup.htmlEditor.editor.setText(NEW_HTML);
1.98 + EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
1.99 + });
1.100 +
1.101 + inspector.markup._frame.contentDocument.documentElement.focus();
1.102 + EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
1.103 +
1.104 + return def.promise;
1.105 +}
1.106 +
1.107 +function testBody(inspector) {
1.108 + let body = getNode("body");
1.109 + let bodyHTML = '<body id="updated"><p></p></body>';
1.110 + let bodyFront = inspector.markup.walker.frontForRawNode(body);
1.111 + let doc = content.document;
1.112 +
1.113 + let mutated = inspector.once("markupmutation");
1.114 + inspector.markup.updateNodeOuterHTML(bodyFront, bodyHTML, body.outerHTML);
1.115 +
1.116 + return mutated.then(mutations => {
1.117 + is(getNode("body").outerHTML, bodyHTML, "<body> HTML has been updated");
1.118 + is(doc.querySelectorAll("head").length, 1, "no extra <head>s have been added");
1.119 + return inspector.once("inspector-updated");
1.120 + });
1.121 +}
1.122 +
1.123 +function testHead(inspector) {
1.124 + let head = getNode("head");
1.125 + let headHTML = '<head id="updated"><title>New Title</title><script>window.foo="bar";</script></head>';
1.126 + let headFront = inspector.markup.walker.frontForRawNode(head);
1.127 + let doc = content.document;
1.128 +
1.129 + let mutated = inspector.once("markupmutation");
1.130 + inspector.markup.updateNodeOuterHTML(headFront, headHTML, head.outerHTML);
1.131 +
1.132 + return mutated.then(mutations => {
1.133 + is(doc.title, "New Title", "New title has been added");
1.134 + is(doc.defaultView.foo, undefined, "Script has not been executed");
1.135 + is(doc.querySelector("head").outerHTML, headHTML, "<head> HTML has been updated");
1.136 + is(doc.querySelectorAll("body").length, 1, "no extra <body>s have been added");
1.137 + return inspector.once("inspector-updated");
1.138 + });
1.139 +}
1.140 +
1.141 +function testDocumentElement(inspector) {
1.142 + let doc = content.document;
1.143 + let docElement = doc.documentElement;
1.144 + let docElementHTML = '<html id="updated" foo="bar"><head><title>Updated from document element</title><script>window.foo="bar";</script></head><body><p>Hello</p></body></html>';
1.145 + let docElementFront = inspector.markup.walker.frontForRawNode(docElement);
1.146 +
1.147 + let mutated = inspector.once("markupmutation");
1.148 + inspector.markup.updateNodeOuterHTML(docElementFront, docElementHTML, docElement.outerHTML);
1.149 +
1.150 + return mutated.then(mutations => {
1.151 + is(doc.title, "Updated from document element", "New title has been added");
1.152 + is(doc.defaultView.foo, undefined, "Script has not been executed");
1.153 + is(doc.documentElement.id, "updated", "<html> ID has been updated");
1.154 + is(doc.documentElement.className, "", "<html> class has been updated");
1.155 + is(doc.documentElement.getAttribute("foo"), "bar", "<html> attribute has been updated");
1.156 + is(doc.documentElement.outerHTML, docElementHTML, "<html> HTML has been updated");
1.157 + is(doc.querySelectorAll("head").length, 1, "no extra <head>s have been added");
1.158 + is(doc.querySelectorAll("body").length, 1, "no extra <body>s have been added");
1.159 + is(doc.body.textContent, "Hello", "document.body.textContent has been updated");
1.160 + });
1.161 +}
1.162 +
1.163 +function testDocumentElement2(inspector) {
1.164 + let doc = content.document;
1.165 + let docElement = doc.documentElement;
1.166 + let docElementHTML = '<html class="updated" id="somethingelse"><head><title>Updated again from document element</title><script>window.foo="bar";</script></head><body><p>Hello again</p></body></html>';
1.167 + let docElementFront = inspector.markup.walker.frontForRawNode(docElement);
1.168 +
1.169 + let mutated = inspector.once("markupmutation");
1.170 + inspector.markup.updateNodeOuterHTML(docElementFront, docElementHTML, docElement.outerHTML);
1.171 +
1.172 + return mutated.then(mutations => {
1.173 + is(doc.title, "Updated again from document element", "New title has been added");
1.174 + is(doc.defaultView.foo, undefined, "Script has not been executed");
1.175 + is(doc.documentElement.id, "somethingelse", "<html> ID has been updated");
1.176 + is(doc.documentElement.className, "updated", "<html> class has been updated");
1.177 + is(doc.documentElement.getAttribute("foo"), null, "<html> attribute has been removed");
1.178 + is(doc.documentElement.outerHTML, docElementHTML, "<html> HTML has been updated");
1.179 + is(doc.querySelectorAll("head").length, 1, "no extra <head>s have been added");
1.180 + is(doc.querySelectorAll("body").length, 1, "no extra <body>s have been added");
1.181 + is(doc.body.textContent, "Hello again", "document.body.textContent has been updated");
1.182 + });
1.183 +}
