|
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/ */ |
|
4 |
|
5 "use strict"; |
|
6 |
|
7 // Test that outerHTML editing keybindings work as expected and that *special* |
|
8 // elements like <html>, <body> and <head> can be edited correctly. |
|
9 |
|
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>'; |
|
20 |
|
21 let test = asyncTest(function*() { |
|
22 let {inspector} = yield addTab(TEST_URL).then(openInspector); |
|
23 |
|
24 inspector.markup._frame.focus(); |
|
25 |
|
26 info("Checking that pressing escape cancels edits"); |
|
27 yield testEscapeCancels(inspector); |
|
28 |
|
29 info("Checking that pressing F2 commits edits"); |
|
30 yield testF2Commits(inspector); |
|
31 |
|
32 info("Checking that editing the <body> element works like other nodes"); |
|
33 yield testBody(inspector); |
|
34 |
|
35 info("Checking that editing the <head> element works like other nodes"); |
|
36 yield testHead(inspector); |
|
37 |
|
38 info("Checking that editing the <html> element works like other nodes"); |
|
39 yield testDocumentElement(inspector); |
|
40 |
|
41 info("Checking (again) that editing the <html> element works like other nodes"); |
|
42 yield testDocumentElement2(inspector); |
|
43 }); |
|
44 |
|
45 function testEscapeCancels(inspector) { |
|
46 let def = promise.defer(); |
|
47 let node = getNode(SELECTOR); |
|
48 |
|
49 selectNode(node, inspector).then(() => { |
|
50 inspector.markup.htmlEditor.on("popupshown", function onPopupShown() { |
|
51 inspector.markup.htmlEditor.off("popupshown", onPopupShown); |
|
52 |
|
53 ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible"); |
|
54 is(node.outerHTML, OLD_HTML, "The node is starting with old HTML."); |
|
55 |
|
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"); |
|
59 |
|
60 let node = getNode(SELECTOR); |
|
61 is(node.outerHTML, OLD_HTML, "Escape cancels edits"); |
|
62 def.resolve(); |
|
63 }); |
|
64 |
|
65 inspector.markup.htmlEditor.editor.setText(NEW_HTML); |
|
66 |
|
67 EventUtils.sendKey("ESCAPE", inspector.markup.htmlEditor.doc.defaultView); |
|
68 }); |
|
69 |
|
70 EventUtils.sendKey("F2", inspector.markup._frame.contentWindow); |
|
71 }); |
|
72 |
|
73 return def.promise; |
|
74 } |
|
75 |
|
76 function testF2Commits(inspector) { |
|
77 let def = promise.defer(); |
|
78 let node = getNode(SELECTOR); |
|
79 |
|
80 inspector.markup.htmlEditor.on("popupshown", function onPopupShown() { |
|
81 inspector.markup.htmlEditor.off("popupshown", onPopupShown); |
|
82 |
|
83 ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible"); |
|
84 is(node.outerHTML, OLD_HTML, "The node is starting with old HTML."); |
|
85 |
|
86 inspector.once("markupmutation", (e, aMutations) => { |
|
87 ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible"); |
|
88 |
|
89 let node = getNode(SELECTOR); |
|
90 is(node.outerHTML, NEW_HTML, "F2 commits edits - the node has new HTML."); |
|
91 def.resolve(); |
|
92 }); |
|
93 |
|
94 inspector.markup.htmlEditor.editor.setText(NEW_HTML); |
|
95 EventUtils.sendKey("F2", inspector.markup._frame.contentWindow); |
|
96 }); |
|
97 |
|
98 inspector.markup._frame.contentDocument.documentElement.focus(); |
|
99 EventUtils.sendKey("F2", inspector.markup._frame.contentWindow); |
|
100 |
|
101 return def.promise; |
|
102 } |
|
103 |
|
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; |
|
109 |
|
110 let mutated = inspector.once("markupmutation"); |
|
111 inspector.markup.updateNodeOuterHTML(bodyFront, bodyHTML, body.outerHTML); |
|
112 |
|
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 } |
|
119 |
|
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; |
|
125 |
|
126 let mutated = inspector.once("markupmutation"); |
|
127 inspector.markup.updateNodeOuterHTML(headFront, headHTML, head.outerHTML); |
|
128 |
|
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 } |
|
137 |
|
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); |
|
143 |
|
144 let mutated = inspector.once("markupmutation"); |
|
145 inspector.markup.updateNodeOuterHTML(docElementFront, docElementHTML, docElement.outerHTML); |
|
146 |
|
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 } |
|
159 |
|
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); |
|
165 |
|
166 let mutated = inspector.once("markupmutation"); |
|
167 inspector.markup.updateNodeOuterHTML(docElementFront, docElementHTML, docElement.outerHTML); |
|
168 |
|
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 } |