OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 "use strict"; | 5 "use strict"; |
6 | 6 |
7 var xmlTreeViewerCSS = privateScriptController.import("DocumentXMLTreeViewer.css
"); | 7 var nodeParentPairs = []; |
8 | 8 var tree; |
9 privateScriptController.installClass("Document", function(DocumentPrototype) { | 9 |
10 var nodeParentPairs = []; | 10 function prepareWebKitXMLViewer() |
11 var tree; | 11 { |
12 | 12 var html = createHTMLElement('html'); |
13 function prepareWebKitXMLViewer(noStyleMessage) | 13 var head = createHTMLElement('head'); |
| 14 html.appendChild(head); |
| 15 var style = createHTMLElement('style'); |
| 16 style.id = 'xml-viewer-style'; |
| 17 head.appendChild(style); |
| 18 var body = createHTMLElement('body'); |
| 19 html.appendChild(body); |
| 20 var sourceXML = createHTMLElement('div'); |
| 21 sourceXML.id = 'webkit-xml-viewer-source-xml'; |
| 22 body.appendChild(sourceXML); |
| 23 |
| 24 var child; |
| 25 while (child = document.firstChild) { |
| 26 document.removeChild(child); |
| 27 if (child.nodeType != Node.DOCUMENT_TYPE_NODE) |
| 28 sourceXML.appendChild(child); |
| 29 } |
| 30 document.appendChild(html); |
| 31 |
| 32 var header = createHTMLElement('div'); |
| 33 body.appendChild(header); |
| 34 header.classList.add('header'); |
| 35 var headerSpan = createHTMLElement('span'); |
| 36 header.appendChild(headerSpan); |
| 37 headerSpan.textContent = "This XML file does not appear to have any style in
formation " + |
| 38 "associated with it. The document tree is shown below."; |
| 39 header.appendChild(createHTMLElement('br')); |
| 40 |
| 41 tree = createHTMLElement('div'); |
| 42 body.appendChild(tree); |
| 43 tree.classList.add('pretty-print'); |
| 44 window.onload = sourceXMLLoaded; |
| 45 } |
| 46 |
| 47 function sourceXMLLoaded() |
| 48 { |
| 49 var sourceXML = document.getElementById('webkit-xml-viewer-source-xml'); |
| 50 if (!sourceXML) |
| 51 return; // Stop if some XML tree extension is already processing this do
cument |
| 52 |
| 53 for (var child = sourceXML.firstChild; child; child = child.nextSibling) |
| 54 nodeParentPairs.push({parentElement: tree, node: child}); |
| 55 |
| 56 for (var i = 0; i < nodeParentPairs.length; i++) |
| 57 processNode(nodeParentPairs[i].parentElement, nodeParentPairs[i].node); |
| 58 |
| 59 initButtons(); |
| 60 |
| 61 return false; |
| 62 } |
| 63 |
| 64 // Tree processing. |
| 65 |
| 66 function processNode(parentElement, node) |
| 67 { |
| 68 var map = processNode.processorsMap; |
| 69 if (!map) { |
| 70 map = {}; |
| 71 processNode.processorsMap = map; |
| 72 map[Node.PROCESSING_INSTRUCTION_NODE] = processProcessingInstruction; |
| 73 map[Node.ELEMENT_NODE] = processElement; |
| 74 map[Node.COMMENT_NODE] = processComment; |
| 75 map[Node.TEXT_NODE] = processText; |
| 76 map[Node.CDATA_SECTION_NODE] = processCDATA; |
| 77 } |
| 78 if (processNode.processorsMap[node.nodeType]) |
| 79 processNode.processorsMap[node.nodeType].call(this, parentElement, node)
; |
| 80 } |
| 81 |
| 82 function processElement(parentElement, node) |
| 83 { |
| 84 if (!node.firstChild) |
| 85 processEmptyElement(parentElement, node); |
| 86 else { |
| 87 var child = node.firstChild; |
| 88 if (child.nodeType == Node.TEXT_NODE && isShort(child.nodeValue) && !chi
ld.nextSibling) |
| 89 processShortTextOnlyElement(parentElement, node); |
| 90 else |
| 91 processComplexElement(parentElement, node); |
| 92 } |
| 93 } |
| 94 |
| 95 function processEmptyElement(parentElement, node) |
| 96 { |
| 97 var line = createLine(); |
| 98 line.appendChild(createTag(node, false, true)); |
| 99 parentElement.appendChild(line); |
| 100 } |
| 101 |
| 102 function processShortTextOnlyElement(parentElement, node) |
| 103 { |
| 104 var line = createLine(); |
| 105 line.appendChild(createTag(node, false, false)); |
| 106 for (var child = node.firstChild; child; child = child.nextSibling) |
| 107 line.appendChild(createText(child.nodeValue)); |
| 108 line.appendChild(createTag(node, true, false)); |
| 109 parentElement.appendChild(line); |
| 110 } |
| 111 |
| 112 function processComplexElement(parentElement, node) |
| 113 { |
| 114 var collapsible = createCollapsible(); |
| 115 |
| 116 collapsible.expanded.start.appendChild(createTag(node, false, false)); |
| 117 for (var child = node.firstChild; child; child = child.nextSibling) |
| 118 nodeParentPairs.push({parentElement: collapsible.expanded.content, node:
child}); |
| 119 collapsible.expanded.end.appendChild(createTag(node, true, false)); |
| 120 |
| 121 collapsible.collapsed.content.appendChild(createTag(node, false, false)); |
| 122 collapsible.collapsed.content.appendChild(createText('...')); |
| 123 collapsible.collapsed.content.appendChild(createTag(node, true, false)); |
| 124 parentElement.appendChild(collapsible); |
| 125 } |
| 126 |
| 127 function processComment(parentElement, node) |
| 128 { |
| 129 if (isShort(node.nodeValue)) { |
| 130 var line = createLine(); |
| 131 line.appendChild(createComment('<!-- ' + node.nodeValue + ' -->')); |
| 132 parentElement.appendChild(line); |
| 133 } else { |
| 134 var collapsible = createCollapsible(); |
| 135 |
| 136 collapsible.expanded.start.appendChild(createComment('<!--')); |
| 137 collapsible.expanded.content.appendChild(createComment(node.nodeValue)); |
| 138 collapsible.expanded.end.appendChild(createComment('-->')); |
| 139 |
| 140 collapsible.collapsed.content.appendChild(createComment('<!--')); |
| 141 collapsible.collapsed.content.appendChild(createComment('...')); |
| 142 collapsible.collapsed.content.appendChild(createComment('-->')); |
| 143 parentElement.appendChild(collapsible); |
| 144 } |
| 145 } |
| 146 |
| 147 function processCDATA(parentElement, node) |
| 148 { |
| 149 if (isShort(node.nodeValue)) { |
| 150 var line = createLine(); |
| 151 line.appendChild(createText('<![CDATA[ ' + node.nodeValue + ' ]]>')); |
| 152 parentElement.appendChild(line); |
| 153 } else { |
| 154 var collapsible = createCollapsible(); |
| 155 |
| 156 collapsible.expanded.start.appendChild(createText('<![CDATA[')); |
| 157 collapsible.expanded.content.appendChild(createText(node.nodeValue)); |
| 158 collapsible.expanded.end.appendChild(createText(']]>')); |
| 159 |
| 160 collapsible.collapsed.content.appendChild(createText('<![CDATA[')); |
| 161 collapsible.collapsed.content.appendChild(createText('...')); |
| 162 collapsible.collapsed.content.appendChild(createText(']]>')); |
| 163 parentElement.appendChild(collapsible); |
| 164 } |
| 165 } |
| 166 |
| 167 function processProcessingInstruction(parentElement, node) |
| 168 { |
| 169 if (isShort(node.nodeValue)) { |
| 170 var line = createLine(); |
| 171 line.appendChild(createComment('<?' + node.nodeName + ' ' + node.nodeVal
ue + '?>')); |
| 172 parentElement.appendChild(line); |
| 173 } else { |
| 174 var collapsible = createCollapsible(); |
| 175 |
| 176 collapsible.expanded.start.appendChild(createComment('<?' + node.nodeNam
e)); |
| 177 collapsible.expanded.content.appendChild(createComment(node.nodeValue)); |
| 178 collapsible.expanded.end.appendChild(createComment('?>')); |
| 179 |
| 180 collapsible.collapsed.content.appendChild(createComment('<?' + node.node
Name)); |
| 181 collapsible.collapsed.content.appendChild(createComment('...')); |
| 182 collapsible.collapsed.content.appendChild(createComment('?>')); |
| 183 parentElement.appendChild(collapsible); |
| 184 } |
| 185 } |
| 186 |
| 187 function processText(parentElement, node) |
| 188 { |
| 189 parentElement.appendChild(createText(node.nodeValue)); |
| 190 } |
| 191 |
| 192 // Processing utils. |
| 193 |
| 194 function trim(value) |
| 195 { |
| 196 return value.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); |
| 197 } |
| 198 |
| 199 function isShort(value) |
| 200 { |
| 201 return trim(value).length <= 50; |
| 202 } |
| 203 |
| 204 // Tree rendering. |
| 205 |
| 206 function createHTMLElement(elementName) |
| 207 { |
| 208 return document.createElementNS('http://www.w3.org/1999/xhtml', elementName) |
| 209 } |
| 210 |
| 211 function createCollapsible() |
| 212 { |
| 213 var collapsible = createHTMLElement('div'); |
| 214 collapsible.classList.add('collapsible'); |
| 215 collapsible.expanded = createHTMLElement('div'); |
| 216 collapsible.expanded.classList.add('expanded'); |
| 217 collapsible.appendChild(collapsible.expanded); |
| 218 |
| 219 collapsible.expanded.start = createLine(); |
| 220 collapsible.expanded.start.appendChild(createCollapseButton()); |
| 221 collapsible.expanded.appendChild(collapsible.expanded.start); |
| 222 |
| 223 collapsible.expanded.content = createHTMLElement('div'); |
| 224 collapsible.expanded.content.classList.add('collapsible-content'); |
| 225 collapsible.expanded.appendChild(collapsible.expanded.content); |
| 226 |
| 227 collapsible.expanded.end = createLine(); |
| 228 collapsible.expanded.appendChild(collapsible.expanded.end); |
| 229 |
| 230 collapsible.collapsed = createHTMLElement('div'); |
| 231 collapsible.collapsed.classList.add('collapsed'); |
| 232 collapsible.collapsed.classList.add('hidden'); |
| 233 collapsible.appendChild(collapsible.collapsed); |
| 234 collapsible.collapsed.content = createLine(); |
| 235 collapsible.collapsed.content.appendChild(createExpandButton()); |
| 236 collapsible.collapsed.appendChild(collapsible.collapsed.content); |
| 237 |
| 238 return collapsible; |
| 239 } |
| 240 |
| 241 function createButton() |
| 242 { |
| 243 var button = createHTMLElement('span'); |
| 244 button.classList.add('button'); |
| 245 return button; |
| 246 } |
| 247 |
| 248 function createCollapseButton(str) |
| 249 { |
| 250 var button = createButton(); |
| 251 button.classList.add('collapse-button'); |
| 252 return button; |
| 253 } |
| 254 |
| 255 function createExpandButton(str) |
| 256 { |
| 257 var button = createButton(); |
| 258 button.classList.add('expand-button'); |
| 259 return button; |
| 260 } |
| 261 |
| 262 function createComment(commentString) |
| 263 { |
| 264 var comment = createHTMLElement('span'); |
| 265 comment.classList.add('comment'); |
| 266 comment.classList.add('html-comment'); |
| 267 comment.textContent = commentString; |
| 268 return comment; |
| 269 } |
| 270 |
| 271 function createText(value) |
| 272 { |
| 273 var text = createHTMLElement('span'); |
| 274 text.textContent = trim(value); |
| 275 text.classList.add('text'); |
| 276 return text; |
| 277 } |
| 278 |
| 279 function createLine() |
| 280 { |
| 281 var line = createHTMLElement('div'); |
| 282 line.classList.add('line'); |
| 283 return line; |
| 284 } |
| 285 |
| 286 function createTag(node, isClosing, isEmpty) |
| 287 { |
| 288 var tag = createHTMLElement('span'); |
| 289 tag.classList.add('html-tag'); |
| 290 |
| 291 var stringBeforeAttrs = '<'; |
| 292 if (isClosing) |
| 293 stringBeforeAttrs += '/'; |
| 294 stringBeforeAttrs += node.nodeName; |
| 295 var textBeforeAttrs = document.createTextNode(stringBeforeAttrs); |
| 296 tag.appendChild(textBeforeAttrs); |
| 297 |
| 298 if (!isClosing) { |
| 299 for (var i = 0; i < node.attributes.length; i++) |
| 300 tag.appendChild(createAttribute(node.attributes[i])); |
| 301 } |
| 302 |
| 303 var stringAfterAttrs = ''; |
| 304 if (isEmpty) |
| 305 stringAfterAttrs += '/'; |
| 306 stringAfterAttrs += '>'; |
| 307 var textAfterAttrs = document.createTextNode(stringAfterAttrs); |
| 308 tag.appendChild(textAfterAttrs); |
| 309 |
| 310 return tag; |
| 311 } |
| 312 |
| 313 function createAttribute(attributeNode) |
| 314 { |
| 315 var attribute = createHTMLElement('span'); |
| 316 attribute.classList.add('html-attribute'); |
| 317 |
| 318 var attributeName = createHTMLElement('span'); |
| 319 attributeName.classList.add('html-attribute-name'); |
| 320 attributeName.textContent = attributeNode.name; |
| 321 |
| 322 var textBefore = document.createTextNode(' '); |
| 323 var textBetween = document.createTextNode('="'); |
| 324 |
| 325 var attributeValue = createHTMLElement('span'); |
| 326 attributeValue.classList.add('html-attribute-value'); |
| 327 attributeValue.textContent = attributeNode.value; |
| 328 |
| 329 var textAfter = document.createTextNode('"'); |
| 330 |
| 331 attribute.appendChild(textBefore); |
| 332 attribute.appendChild(attributeName); |
| 333 attribute.appendChild(textBetween); |
| 334 attribute.appendChild(attributeValue); |
| 335 attribute.appendChild(textAfter); |
| 336 return attribute; |
| 337 } |
| 338 |
| 339 function expandFunction(sectionId) |
| 340 { |
| 341 return function() |
14 { | 342 { |
15 var html = createHTMLElement('html'); | 343 document.querySelector('#' + sectionId + ' > .expanded').className = 'ex
panded'; |
16 var head = createHTMLElement('head'); | 344 document.querySelector('#' + sectionId + ' > .collapsed').className = 'c
ollapsed hidden'; |
17 html.appendChild(head); | 345 }; |
18 var style = createHTMLElement('style'); | 346 } |
19 style.id = 'xml-viewer-style'; | 347 |
20 style.appendChild(document.createTextNode(xmlTreeViewerCSS)); | 348 function collapseFunction(sectionId) |
21 head.appendChild(style); | 349 { |
22 var body = createHTMLElement('body'); | 350 return function() |
23 html.appendChild(body); | |
24 var sourceXML = createHTMLElement('div'); | |
25 sourceXML.id = 'webkit-xml-viewer-source-xml'; | |
26 body.appendChild(sourceXML); | |
27 | |
28 var child; | |
29 while (child = document.firstChild) { | |
30 document.removeChild(child); | |
31 if (child.nodeType != Node.DOCUMENT_TYPE_NODE) | |
32 sourceXML.appendChild(child); | |
33 } | |
34 document.appendChild(html); | |
35 | |
36 var header = createHTMLElement('div'); | |
37 body.appendChild(header); | |
38 header.classList.add('header'); | |
39 var headerSpan = createHTMLElement('span'); | |
40 header.appendChild(headerSpan); | |
41 headerSpan.textContent = noStyleMessage; | |
42 header.appendChild(createHTMLElement('br')); | |
43 | |
44 tree = createHTMLElement('div'); | |
45 body.appendChild(tree); | |
46 tree.classList.add('pretty-print'); | |
47 window.onload = sourceXMLLoaded; | |
48 } | |
49 | |
50 function sourceXMLLoaded() | |
51 { | 351 { |
52 var sourceXML = document.getElementById('webkit-xml-viewer-source-xml'); | 352 document.querySelector('#' + sectionId + ' > .expanded').className = 'ex
panded hidden'; |
53 if (!sourceXML) | 353 document.querySelector('#' + sectionId + ' > .collapsed').className = 'c
ollapsed'; |
54 return; // Stop if some XML tree extension is already processing thi
s document | 354 }; |
55 | 355 } |
56 for (var child = sourceXML.firstChild; child; child = child.nextSibling) | 356 |
57 nodeParentPairs.push({parentElement: tree, node: child}); | 357 function initButtons() |
58 | 358 { |
59 for (var i = 0; i < nodeParentPairs.length; i++) | 359 var sections = document.querySelectorAll('.collapsible'); |
60 processNode(nodeParentPairs[i].parentElement, nodeParentPairs[i].nod
e); | 360 for (var i = 0; i < sections.length; i++) { |
61 | 361 var sectionId = 'collapsible' + i; |
62 initButtons(); | 362 sections[i].id = sectionId; |
63 | 363 |
64 return false; | 364 var expandedPart = sections[i].querySelector('#' + sectionId + ' > .expa
nded'); |
65 } | 365 var collapseButton = expandedPart.querySelector('.collapse-button'); |
66 | 366 collapseButton.onclick = collapseFunction(sectionId); |
67 // Tree processing. | 367 collapseButton.onmousedown = handleButtonMouseDown; |
68 | 368 |
69 function processNode(parentElement, node) | 369 var collapsedPart = sections[i].querySelector('#' + sectionId + ' > .col
lapsed'); |
70 { | 370 var expandButton = collapsedPart.querySelector('.expand-button'); |
71 var map = processNode.processorsMap; | 371 expandButton.onclick = expandFunction(sectionId); |
72 if (!map) { | 372 expandButton.onmousedown = handleButtonMouseDown; |
73 map = {}; | 373 } |
74 processNode.processorsMap = map; | 374 |
75 map[Node.PROCESSING_INSTRUCTION_NODE] = processProcessingInstruction
; | 375 } |
76 map[Node.ELEMENT_NODE] = processElement; | 376 |
77 map[Node.COMMENT_NODE] = processComment; | 377 function handleButtonMouseDown(e) |
78 map[Node.TEXT_NODE] = processText; | 378 { |
79 map[Node.CDATA_SECTION_NODE] = processCDATA; | 379 // To prevent selection on double click |
80 } | 380 e.preventDefault(); |
81 if (processNode.processorsMap[node.nodeType]) | 381 } |
82 processNode.processorsMap[node.nodeType].call(this, parentElement, n
ode); | 382 |
83 } | 383 prepareWebKitXMLViewer(); |
84 | |
85 function processElement(parentElement, node) | |
86 { | |
87 if (!node.firstChild) | |
88 processEmptyElement(parentElement, node); | |
89 else { | |
90 var child = node.firstChild; | |
91 if (child.nodeType == Node.TEXT_NODE && isShort(child.nodeValue) &&
!child.nextSibling) | |
92 processShortTextOnlyElement(parentElement, node); | |
93 else | |
94 processComplexElement(parentElement, node); | |
95 } | |
96 } | |
97 | |
98 function processEmptyElement(parentElement, node) | |
99 { | |
100 var line = createLine(); | |
101 line.appendChild(createTag(node, false, true)); | |
102 parentElement.appendChild(line); | |
103 } | |
104 | |
105 function processShortTextOnlyElement(parentElement, node) | |
106 { | |
107 var line = createLine(); | |
108 line.appendChild(createTag(node, false, false)); | |
109 for (var child = node.firstChild; child; child = child.nextSibling) | |
110 line.appendChild(createText(child.nodeValue)); | |
111 line.appendChild(createTag(node, true, false)); | |
112 parentElement.appendChild(line); | |
113 } | |
114 | |
115 function processComplexElement(parentElement, node) | |
116 { | |
117 var collapsible = createCollapsible(); | |
118 | |
119 collapsible.expanded.start.appendChild(createTag(node, false, false)); | |
120 for (var child = node.firstChild; child; child = child.nextSibling) | |
121 nodeParentPairs.push({parentElement: collapsible.expanded.content, n
ode: child}); | |
122 collapsible.expanded.end.appendChild(createTag(node, true, false)); | |
123 | |
124 collapsible.collapsed.content.appendChild(createTag(node, false, false))
; | |
125 collapsible.collapsed.content.appendChild(createText('...')); | |
126 collapsible.collapsed.content.appendChild(createTag(node, true, false)); | |
127 parentElement.appendChild(collapsible); | |
128 } | |
129 | |
130 function processComment(parentElement, node) | |
131 { | |
132 if (isShort(node.nodeValue)) { | |
133 var line = createLine(); | |
134 line.appendChild(createComment('<!-- ' + node.nodeValue + ' -->')); | |
135 parentElement.appendChild(line); | |
136 } else { | |
137 var collapsible = createCollapsible(); | |
138 | |
139 collapsible.expanded.start.appendChild(createComment('<!--')); | |
140 collapsible.expanded.content.appendChild(createComment(node.nodeValu
e)); | |
141 collapsible.expanded.end.appendChild(createComment('-->')); | |
142 | |
143 collapsible.collapsed.content.appendChild(createComment('<!--')); | |
144 collapsible.collapsed.content.appendChild(createComment('...')); | |
145 collapsible.collapsed.content.appendChild(createComment('-->')); | |
146 parentElement.appendChild(collapsible); | |
147 } | |
148 } | |
149 | |
150 function processCDATA(parentElement, node) | |
151 { | |
152 if (isShort(node.nodeValue)) { | |
153 var line = createLine(); | |
154 line.appendChild(createText('<![CDATA[ ' + node.nodeValue + ' ]]>'))
; | |
155 parentElement.appendChild(line); | |
156 } else { | |
157 var collapsible = createCollapsible(); | |
158 | |
159 collapsible.expanded.start.appendChild(createText('<![CDATA[')); | |
160 collapsible.expanded.content.appendChild(createText(node.nodeValue))
; | |
161 collapsible.expanded.end.appendChild(createText(']]>')); | |
162 | |
163 collapsible.collapsed.content.appendChild(createText('<![CDATA[')); | |
164 collapsible.collapsed.content.appendChild(createText('...')); | |
165 collapsible.collapsed.content.appendChild(createText(']]>')); | |
166 parentElement.appendChild(collapsible); | |
167 } | |
168 } | |
169 | |
170 function processProcessingInstruction(parentElement, node) | |
171 { | |
172 if (isShort(node.nodeValue)) { | |
173 var line = createLine(); | |
174 line.appendChild(createComment('<?' + node.nodeName + ' ' + node.nod
eValue + '?>')); | |
175 parentElement.appendChild(line); | |
176 } else { | |
177 var collapsible = createCollapsible(); | |
178 | |
179 collapsible.expanded.start.appendChild(createComment('<?' + node.nod
eName)); | |
180 collapsible.expanded.content.appendChild(createComment(node.nodeValu
e)); | |
181 collapsible.expanded.end.appendChild(createComment('?>')); | |
182 | |
183 collapsible.collapsed.content.appendChild(createComment('<?' + node.
nodeName)); | |
184 collapsible.collapsed.content.appendChild(createComment('...')); | |
185 collapsible.collapsed.content.appendChild(createComment('?>')); | |
186 parentElement.appendChild(collapsible); | |
187 } | |
188 } | |
189 | |
190 function processText(parentElement, node) | |
191 { | |
192 parentElement.appendChild(createText(node.nodeValue)); | |
193 } | |
194 | |
195 // Processing utils. | |
196 | |
197 function trim(value) | |
198 { | |
199 return value.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); | |
200 } | |
201 | |
202 function isShort(value) | |
203 { | |
204 return trim(value).length <= 50; | |
205 } | |
206 | |
207 // Tree rendering. | |
208 | |
209 function createHTMLElement(elementName) | |
210 { | |
211 return document.createElementNS('http://www.w3.org/1999/xhtml', elementN
ame) | |
212 } | |
213 | |
214 function createCollapsible() | |
215 { | |
216 var collapsible = createHTMLElement('div'); | |
217 collapsible.classList.add('collapsible'); | |
218 collapsible.expanded = createHTMLElement('div'); | |
219 collapsible.expanded.classList.add('expanded'); | |
220 collapsible.appendChild(collapsible.expanded); | |
221 | |
222 collapsible.expanded.start = createLine(); | |
223 collapsible.expanded.start.appendChild(createCollapseButton()); | |
224 collapsible.expanded.appendChild(collapsible.expanded.start); | |
225 | |
226 collapsible.expanded.content = createHTMLElement('div'); | |
227 collapsible.expanded.content.classList.add('collapsible-content'); | |
228 collapsible.expanded.appendChild(collapsible.expanded.content); | |
229 | |
230 collapsible.expanded.end = createLine(); | |
231 collapsible.expanded.appendChild(collapsible.expanded.end); | |
232 | |
233 collapsible.collapsed = createHTMLElement('div'); | |
234 collapsible.collapsed.classList.add('collapsed'); | |
235 collapsible.collapsed.classList.add('hidden'); | |
236 collapsible.appendChild(collapsible.collapsed); | |
237 collapsible.collapsed.content = createLine(); | |
238 collapsible.collapsed.content.appendChild(createExpandButton()); | |
239 collapsible.collapsed.appendChild(collapsible.collapsed.content); | |
240 | |
241 return collapsible; | |
242 } | |
243 | |
244 function createButton() | |
245 { | |
246 var button = createHTMLElement('span'); | |
247 button.classList.add('button'); | |
248 return button; | |
249 } | |
250 | |
251 function createCollapseButton(str) | |
252 { | |
253 var button = createButton(); | |
254 button.classList.add('collapse-button'); | |
255 return button; | |
256 } | |
257 | |
258 function createExpandButton(str) | |
259 { | |
260 var button = createButton(); | |
261 button.classList.add('expand-button'); | |
262 return button; | |
263 } | |
264 | |
265 function createComment(commentString) | |
266 { | |
267 var comment = createHTMLElement('span'); | |
268 comment.classList.add('comment'); | |
269 comment.classList.add('html-comment'); | |
270 comment.textContent = commentString; | |
271 return comment; | |
272 } | |
273 | |
274 function createText(value) | |
275 { | |
276 var text = createHTMLElement('span'); | |
277 text.textContent = trim(value); | |
278 text.classList.add('text'); | |
279 return text; | |
280 } | |
281 | |
282 function createLine() | |
283 { | |
284 var line = createHTMLElement('div'); | |
285 line.classList.add('line'); | |
286 return line; | |
287 } | |
288 | |
289 function createTag(node, isClosing, isEmpty) | |
290 { | |
291 var tag = createHTMLElement('span'); | |
292 tag.classList.add('html-tag'); | |
293 | |
294 var stringBeforeAttrs = '<'; | |
295 if (isClosing) | |
296 stringBeforeAttrs += '/'; | |
297 stringBeforeAttrs += node.nodeName; | |
298 var textBeforeAttrs = document.createTextNode(stringBeforeAttrs); | |
299 tag.appendChild(textBeforeAttrs); | |
300 | |
301 if (!isClosing) { | |
302 for (var i = 0; i < node.attributes.length; i++) | |
303 tag.appendChild(createAttribute(node.attributes[i])); | |
304 } | |
305 | |
306 var stringAfterAttrs = ''; | |
307 if (isEmpty) | |
308 stringAfterAttrs += '/'; | |
309 stringAfterAttrs += '>'; | |
310 var textAfterAttrs = document.createTextNode(stringAfterAttrs); | |
311 tag.appendChild(textAfterAttrs); | |
312 | |
313 return tag; | |
314 } | |
315 | |
316 function createAttribute(attributeNode) | |
317 { | |
318 var attribute = createHTMLElement('span'); | |
319 attribute.classList.add('html-attribute'); | |
320 | |
321 var attributeName = createHTMLElement('span'); | |
322 attributeName.classList.add('html-attribute-name'); | |
323 attributeName.textContent = attributeNode.name; | |
324 | |
325 var textBefore = document.createTextNode(' '); | |
326 var textBetween = document.createTextNode('="'); | |
327 | |
328 var attributeValue = createHTMLElement('span'); | |
329 attributeValue.classList.add('html-attribute-value'); | |
330 attributeValue.textContent = attributeNode.value; | |
331 | |
332 var textAfter = document.createTextNode('"'); | |
333 | |
334 attribute.appendChild(textBefore); | |
335 attribute.appendChild(attributeName); | |
336 attribute.appendChild(textBetween); | |
337 attribute.appendChild(attributeValue); | |
338 attribute.appendChild(textAfter); | |
339 return attribute; | |
340 } | |
341 | |
342 function expandFunction(sectionId) | |
343 { | |
344 return function() | |
345 { | |
346 document.querySelector('#' + sectionId + ' > .expanded').className =
'expanded'; | |
347 document.querySelector('#' + sectionId + ' > .collapsed').className
= 'collapsed hidden'; | |
348 }; | |
349 } | |
350 | |
351 function collapseFunction(sectionId) | |
352 { | |
353 return function() | |
354 { | |
355 document.querySelector('#' + sectionId + ' > .expanded').className =
'expanded hidden'; | |
356 document.querySelector('#' + sectionId + ' > .collapsed').className
= 'collapsed'; | |
357 }; | |
358 } | |
359 | |
360 function initButtons() | |
361 { | |
362 var sections = document.querySelectorAll('.collapsible'); | |
363 for (var i = 0; i < sections.length; i++) { | |
364 var sectionId = 'collapsible' + i; | |
365 sections[i].id = sectionId; | |
366 | |
367 var expandedPart = sections[i].querySelector('#' + sectionId + ' > .
expanded'); | |
368 var collapseButton = expandedPart.querySelector('.collapse-button'); | |
369 collapseButton.onclick = collapseFunction(sectionId); | |
370 collapseButton.onmousedown = handleButtonMouseDown; | |
371 | |
372 var collapsedPart = sections[i].querySelector('#' + sectionId + ' >
.collapsed'); | |
373 var expandButton = collapsedPart.querySelector('.expand-button'); | |
374 expandButton.onclick = expandFunction(sectionId); | |
375 expandButton.onmousedown = handleButtonMouseDown; | |
376 } | |
377 | |
378 } | |
379 | |
380 function handleButtonMouseDown(e) | |
381 { | |
382 // To prevent selection on double click | |
383 e.preventDefault(); | |
384 } | |
385 | |
386 DocumentPrototype.transformDocumentToTreeView = function(noStyleMessage) { | |
387 prepareWebKitXMLViewer(noStyleMessage); | |
388 } | |
389 }); | |
390 | |
OLD | NEW |