browser/devtools/markupview/test/browser_markupview_html_edit_03.js@6474c204b198
browser/devtools/markupview/test/browser_markupview_html_edit_03.js
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
1 /* vim: set ts=2 et sw=2 tw=80: */
2 /* Any copyright is dedicated to the Public Domain.
3 http://creativecommons.org/publicdomain/zero/1.0/ */
5 "use strict";
7 // Test that outerHTML editing keybindings work as expected and that *special*
8 // elements like <html>, <body> and <head> can be edited correctly.
10 const TEST_URL = "data:text/html," +
11 "<!DOCTYPE html>" +
12 "<head><meta charset='utf-8' /></head>" +
13 "<body>" +
14 "<div id=\"keyboard\"></div>" +
15 "</body>" +
16 "</html>";
17 const SELECTOR = "#keyboard";
18 const OLD_HTML = '<div id="keyboard"></div>';
19 const NEW_HTML = '<div id="keyboard">Edited</div>';
21 let test = asyncTest(function*() {
22 let {inspector} = yield addTab(TEST_URL).then(openInspector);
24 inspector.markup._frame.focus();
26 info("Checking that pressing escape cancels edits");
27 yield testEscapeCancels(inspector);
29 info("Checking that pressing F2 commits edits");
30 yield testF2Commits(inspector);
32 info("Checking that editing the <body> element works like other nodes");
33 yield testBody(inspector);
35 info("Checking that editing the <head> element works like other nodes");
36 yield testHead(inspector);
38 info("Checking that editing the <html> element works like other nodes");
39 yield testDocumentElement(inspector);
41 info("Checking (again) that editing the <html> element works like other nodes");
42 yield testDocumentElement2(inspector);
43 });
45 function testEscapeCancels(inspector) {
46 let def = promise.defer();
47 let node = getNode(SELECTOR);
49 selectNode(node, inspector).then(() => {
50 inspector.markup.htmlEditor.on("popupshown", function onPopupShown() {
51 inspector.markup.htmlEditor.off("popupshown", onPopupShown);
53 ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
54 is(node.outerHTML, OLD_HTML, "The node is starting with old HTML.");
56 inspector.markup.htmlEditor.on("popuphidden", function onPopupHidden() {
57 inspector.markup.htmlEditor.off("popuphidden", onPopupHidden);
58 ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
60 let node = getNode(SELECTOR);
61 is(node.outerHTML, OLD_HTML, "Escape cancels edits");
62 def.resolve();
63 });
65 inspector.markup.htmlEditor.editor.setText(NEW_HTML);
67 EventUtils.sendKey("ESCAPE", inspector.markup.htmlEditor.doc.defaultView);
68 });
70 EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
71 });
73 return def.promise;
74 }
76 function testF2Commits(inspector) {
77 let def = promise.defer();
78 let node = getNode(SELECTOR);
80 inspector.markup.htmlEditor.on("popupshown", function onPopupShown() {
81 inspector.markup.htmlEditor.off("popupshown", onPopupShown);
83 ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
84 is(node.outerHTML, OLD_HTML, "The node is starting with old HTML.");
86 inspector.once("markupmutation", (e, aMutations) => {
87 ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
89 let node = getNode(SELECTOR);
90 is(node.outerHTML, NEW_HTML, "F2 commits edits - the node has new HTML.");
91 def.resolve();
92 });
94 inspector.markup.htmlEditor.editor.setText(NEW_HTML);
95 EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
96 });
98 inspector.markup._frame.contentDocument.documentElement.focus();
99 EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
101 return def.promise;
102 }
104 function testBody(inspector) {
105 let body = getNode("body");
106 let bodyHTML = '<body id="updated"><p></p></body>';
107 let bodyFront = inspector.markup.walker.frontForRawNode(body);
108 let doc = content.document;
110 let mutated = inspector.once("markupmutation");
111 inspector.markup.updateNodeOuterHTML(bodyFront, bodyHTML, body.outerHTML);
113 return mutated.then(mutations => {
114 is(getNode("body").outerHTML, bodyHTML, "<body> HTML has been updated");
115 is(doc.querySelectorAll("head").length, 1, "no extra <head>s have been added");
116 return inspector.once("inspector-updated");
117 });
118 }
120 function testHead(inspector) {
121 let head = getNode("head");
122 let headHTML = '<head id="updated"><title>New Title</title><script>window.foo="bar";</script></head>';
123 let headFront = inspector.markup.walker.frontForRawNode(head);
124 let doc = content.document;
126 let mutated = inspector.once("markupmutation");
127 inspector.markup.updateNodeOuterHTML(headFront, headHTML, head.outerHTML);
129 return mutated.then(mutations => {
130 is(doc.title, "New Title", "New title has been added");
131 is(doc.defaultView.foo, undefined, "Script has not been executed");
132 is(doc.querySelector("head").outerHTML, headHTML, "<head> HTML has been updated");
133 is(doc.querySelectorAll("body").length, 1, "no extra <body>s have been added");
134 return inspector.once("inspector-updated");
135 });
136 }
138 function testDocumentElement(inspector) {
139 let doc = content.document;
140 let docElement = doc.documentElement;
141 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>';
142 let docElementFront = inspector.markup.walker.frontForRawNode(docElement);
144 let mutated = inspector.once("markupmutation");
145 inspector.markup.updateNodeOuterHTML(docElementFront, docElementHTML, docElement.outerHTML);
147 return mutated.then(mutations => {
148 is(doc.title, "Updated from document element", "New title has been added");
149 is(doc.defaultView.foo, undefined, "Script has not been executed");
150 is(doc.documentElement.id, "updated", "<html> ID has been updated");
151 is(doc.documentElement.className, "", "<html> class has been updated");
152 is(doc.documentElement.getAttribute("foo"), "bar", "<html> attribute has been updated");
153 is(doc.documentElement.outerHTML, docElementHTML, "<html> HTML has been updated");
154 is(doc.querySelectorAll("head").length, 1, "no extra <head>s have been added");
155 is(doc.querySelectorAll("body").length, 1, "no extra <body>s have been added");
156 is(doc.body.textContent, "Hello", "document.body.textContent has been updated");
157 });
158 }
160 function testDocumentElement2(inspector) {
161 let doc = content.document;
162 let docElement = doc.documentElement;
163 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>';
164 let docElementFront = inspector.markup.walker.frontForRawNode(docElement);
166 let mutated = inspector.once("markupmutation");
167 inspector.markup.updateNodeOuterHTML(docElementFront, docElementHTML, docElement.outerHTML);
169 return mutated.then(mutations => {
170 is(doc.title, "Updated again from document element", "New title has been added");
171 is(doc.defaultView.foo, undefined, "Script has not been executed");
172 is(doc.documentElement.id, "somethingelse", "<html> ID has been updated");
173 is(doc.documentElement.className, "updated", "<html> class has been updated");
174 is(doc.documentElement.getAttribute("foo"), null, "<html> attribute has been removed");
175 is(doc.documentElement.outerHTML, docElementHTML, "<html> HTML has been updated");
176 is(doc.querySelectorAll("head").length, 1, "no extra <head>s have been added");
177 is(doc.querySelectorAll("body").length, 1, "no extra <body>s have been added");
178 is(doc.body.textContent, "Hello again", "document.body.textContent has been updated");
179 });
180 }
