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.

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

mercurial