git-svn-id: svn://euphorik.ch/pompage@45 02bbb61a-6d21-0410-aba0-cb053bdfd66a
[pompage.git] / doc / webdeveloper / features / display_element_information.js
1 var webdeveloper_elementInformationBlockSelected = false;
2 var webdeveloper_informationElement = null;
3
4 // Creates the element information block
5 function webdeveloper_createElementInformationBlock(ownerDocument)
6 {
7 var definitionElement = ownerDocument.createElement("dd");
8 var divElement = ownerDocument.createElement("div");
9 var headerElement = ownerDocument.createElement("h2");
10 var listElement = ownerDocument.createElement("dl");
11 var stringBundle = document.getElementById("webdeveloper-string-bundle");
12 var termElement = ownerDocument.createElement("dt");
13
14 headerElement.addEventListener("mousedown", webdeveloper_selectElementInformation, false);
15 headerElement.addEventListener("mouseup", webdeveloper_deselectElementInformation, false);
16 headerElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_elementInformation")));
17 divElement.appendChild(headerElement);
18
19 termElement.addEventListener("click", webdeveloper_toggleElementInformationBlock, false);
20 termElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_attributes")));
21 definitionElement.setAttribute("id", "webdeveloper-element-information-attributes");
22 listElement.appendChild(termElement);
23 listElement.appendChild(definitionElement);
24 divElement.appendChild(listElement);
25
26 definitionElement = ownerDocument.createElement("dd");
27 listElement = ownerDocument.createElement("dl");
28 termElement = ownerDocument.createElement("dt");
29
30 termElement.addEventListener("click", webdeveloper_toggleElementInformationBlock, false);
31 termElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_position")));
32 definitionElement.setAttribute("id", "webdeveloper-element-information-position");
33 listElement.appendChild(termElement);
34 listElement.appendChild(definitionElement);
35 divElement.appendChild(listElement);
36
37 definitionElement = ownerDocument.createElement("dd");
38 listElement = ownerDocument.createElement("dl");
39 termElement = ownerDocument.createElement("dt");
40
41 termElement.addEventListener("click", webdeveloper_toggleElementInformationBlock, false);
42 termElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_other")));
43 definitionElement.setAttribute("id", "webdeveloper-element-information-other");
44 listElement.appendChild(termElement);
45 listElement.appendChild(definitionElement);
46 divElement.appendChild(listElement);
47
48 definitionElement = ownerDocument.createElement("dd");
49 listElement = ownerDocument.createElement("dl");
50 termElement = ownerDocument.createElement("dt");
51
52 termElement.addEventListener("click", webdeveloper_toggleElementInformationBlock, false);
53 termElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_ancestors")));
54 definitionElement.setAttribute("id", "webdeveloper-element-information-ancestors");
55 listElement.appendChild(termElement);
56 listElement.appendChild(definitionElement);
57 divElement.appendChild(listElement);
58
59 definitionElement = ownerDocument.createElement("dd");
60 listElement = ownerDocument.createElement("dl");
61 termElement = ownerDocument.createElement("dt");
62
63 termElement.addEventListener("click", webdeveloper_toggleElementInformationBlock, false);
64 termElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_children")));
65 definitionElement.setAttribute("id", "webdeveloper-element-information-children");
66 listElement.appendChild(termElement);
67 listElement.appendChild(definitionElement);
68 divElement.appendChild(listElement);
69
70 divElement.setAttribute("id", "webdeveloper-element-information");
71 webdeveloper_getDocumentBodyElement(ownerDocument).appendChild(divElement);
72 }
73
74 // Called when the element information is deselected
75 function webdeveloper_deselectElementInformation(event)
76 {
77 webdeveloper_elementInformationBlockSelected = false;
78 }
79
80 // Displays information about the element
81 function webdeveloper_displayElementInformation(element)
82 {
83 var checked = true;
84 var contentDocument = webdeveloper_getContentDocument();
85 var contentWindow = webdeveloper_getContentWindow();
86 var divElement = null;
87 var documentList = webdeveloper_getDocuments(contentWindow);
88 var documentLength = documentList.length;
89 var leftOffset = contentWindow.pageXOffset;
90 var pageDocument = null;
91 var topOffset = contentWindow.pageYOffset;
92
93 // If the element is set
94 if(element)
95 {
96 checked = element.getAttribute("checked");
97 }
98 else
99 {
100 var currentDocument = contentWindow.document;
101
102 element = document.getElementById("webdeveloper-display-element-information-menu");
103
104 // If the display element information element is set
105 if(currentDocument.getElementById("webdeveloper-display-element-information"))
106 {
107 checked = false;
108 }
109
110 webdeveloper_configureElement(element, "checked", checked);
111 }
112
113 webdeveloper_configureElement(document.getElementById("webdeveloper-information-text-toolbar"), "hidden", !checked);
114
115 // Loop through the documents
116 for(var i = 0; i < documentLength; i++)
117 {
118 pageDocument = documentList[i];
119
120 // If displaying element information
121 if(checked)
122 {
123 webdeveloper_createElementInformationBlock(pageDocument);
124
125 // If this is the content document
126 if(pageDocument == contentDocument)
127 {
128 divElement = pageDocument.getElementById("webdeveloper-element-information");
129
130 // If the div element was found
131 if(divElement)
132 {
133 divElement.style.left = (leftOffset + 5) + "px";
134 divElement.style.top = (topOffset + 5) + "px";
135 }
136 }
137
138 pageDocument.addEventListener("click", webdeveloper_displayElementInformationForElement, false);
139 pageDocument.addEventListener("keypress", webdeveloper_displayElementInformationKeyPress, false);
140 pageDocument.addEventListener("mousemove", webdeveloper_displayElementInformationMouseMove, false);
141 pageDocument.addEventListener("mouseover", webdeveloper_displayElementInformationMouseOver, false);
142 }
143 else
144 {
145 divElement = pageDocument.getElementById("webdeveloper-element-information");
146
147 // Try to remove the event listener
148 try
149 {
150 pageDocument.removeEventListener("click", webdeveloper_displayElementInformationForElement, false);
151 }
152 catch(exception)
153 {
154 // Do nothing
155 }
156
157 // Try to remove the event listener
158 try
159 {
160 pageDocument.removeEventListener("keypress", webdeveloper_displayElementInformationKeyPress, false);
161 }
162 catch(exception)
163 {
164 // Do nothing
165 }
166
167 // Try to remove the event listener
168 try
169 {
170 pageDocument.removeEventListener("mousemove", webdeveloper_displayElementInformationMouseMove, false);
171 }
172 catch(exception)
173 {
174 // Do nothing
175 }
176
177 // Try to remove the event listener
178 try
179 {
180 pageDocument.removeEventListener("mouseover", webdeveloper_displayElementInformationMouseOver, false);
181 }
182 catch(exception)
183 {
184 // Do nothing
185 }
186
187 webdeveloper_removeElement(divElement);
188 webdeveloper_removeElementOutline(webdeveloper_informationElement);
189 }
190 }
191
192 // If not displaying element information
193 if(!checked)
194 {
195 webdeveloper_elementInformationBlockSelected = false;
196 webdeveloper_informationElement = null;
197 }
198
199 webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/display_element_information.css", "webdeveloper-display-element-information");
200 }
201
202 // Displays information about the specific element
203 function webdeveloper_displayElementInformationForElement(event)
204 {
205 var element = event.target;
206
207 // If the element is set
208 if(element)
209 {
210 var elementName = element.tagName;
211 var ownerDocument = element.ownerDocument;
212
213 // If the element has a name and it is not scrollbar and it has an owner document
214 if(elementName && elementName != "scrollbar" && ownerDocument)
215 {
216 var divElement = ownerDocument.getElementById("webdeveloper-element-information");
217
218 // If the div element was found
219 if(divElement)
220 {
221 // If the element is not the div element and the div element is not an ancestor of the element
222 if(element != divElement && !webdeveloper_isAncestor(element, divElement))
223 {
224 var definitionElement = ownerDocument.getElementById("webdeveloper-element-information-attributes");
225 var headerElements = divElement.getElementsByTagName("h2");
226 var outlineElement = null;
227 var pElement = null;
228 var stringBundle = document.getElementById("webdeveloper-string-bundle");
229 var tableElement = null;
230 var tableCellElement = null;
231 var tableRowElement = null;
232
233 webdeveloper_removeElementOutline(element);
234
235 // If header elements were found
236 if(headerElements.length > 0)
237 {
238 var headerElement = headerElements[0];
239
240 // If the header element is set
241 if(headerElement)
242 {
243 webdeveloper_removeAllChildElements(headerElement);
244
245 headerElement.appendChild(ownerDocument.createTextNode(webdeveloper_getElementDescription(element)));
246 }
247 }
248
249 // If the definition element is set
250 if(definitionElement)
251 {
252 var elementAttribute = null;
253 var elementAttributes = element.attributes;
254 var elementAttributesLength = elementAttributes.length;
255
256 webdeveloper_removeAllChildElements(definitionElement);
257
258 // If there are no attributes
259 if(elementAttributesLength == 0)
260 {
261 definitionElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_none")));
262 }
263 else
264 {
265 // Loop through the attributes
266 for(var i = 0; i < elementAttributesLength; i++)
267 {
268 elementAttribute = elementAttributes[i];
269 pElement = ownerDocument.createElement("p");
270
271 pElement.appendChild(ownerDocument.createTextNode(elementAttribute.name + " = " + elementAttribute.value));
272 definitionElement.appendChild(pElement);
273 }
274 }
275 }
276
277 definitionElement = ownerDocument.getElementById("webdeveloper-element-information-position");
278
279 // If the definition element is set
280 if(definitionElement)
281 {
282 tableElement = ownerDocument.createElement("table");
283 tableCellElement = ownerDocument.createElement("td");
284 tableRowElement = ownerDocument.createElement("tr");
285
286 webdeveloper_removeAllChildElements(definitionElement);
287
288 tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_left") + ": " + webdeveloper_getElementPositionX(element) + "px"));
289 tableRowElement.appendChild(tableCellElement);
290
291 tableCellElement = ownerDocument.createElement("td");
292 tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_top") + ": " + webdeveloper_getElementPositionY(element) + "px"));
293 tableRowElement.appendChild(tableCellElement);
294 tableElement.appendChild(tableRowElement);
295
296 tableCellElement = ownerDocument.createElement("td");
297 tableRowElement = ownerDocument.createElement("tr");
298 tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_width") + ": " + element.clientWidth + "px"));
299 tableRowElement.appendChild(tableCellElement);
300
301 tableCellElement = ownerDocument.createElement("td");
302 tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_height") + ": " + element.clientHeight + "px"));
303 tableRowElement.appendChild(tableCellElement);
304 tableElement.appendChild(tableRowElement);
305 definitionElement.appendChild(tableElement);
306 }
307
308 definitionElement = ownerDocument.getElementById("webdeveloper-element-information-other");
309
310 // If the definition element is set
311 if(definitionElement)
312 {
313 var fontFamily = element.ownerDocument.defaultView.getComputedStyle(element, null).getPropertyCSSValue("font-family");
314 var fontSize = element.ownerDocument.defaultView.getComputedStyle(element, null).getPropertyCSSValue("font-size");
315
316 tableElement = ownerDocument.createElement("table");
317
318 webdeveloper_removeAllChildElements(definitionElement);
319
320 // If this element has a font family
321 if(fontFamily)
322 {
323 tableCellElement = ownerDocument.createElement("td");
324 tableRowElement = ownerDocument.createElement("tr");
325 tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_fontFamily") + ":"));
326 tableRowElement.appendChild(tableCellElement);
327
328 tableCellElement = ownerDocument.createElement("td");
329 tableCellElement.appendChild(ownerDocument.createTextNode(fontFamily.cssText));
330 tableRowElement.appendChild(tableCellElement);
331 tableElement.appendChild(tableRowElement);
332 }
333
334 // If this element has a font size
335 if(fontSize)
336 {
337 tableCellElement = ownerDocument.createElement("td");
338 tableRowElement = ownerDocument.createElement("tr");
339 tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_fontSize") + ":"));
340 tableRowElement.appendChild(tableCellElement);
341
342 tableCellElement = ownerDocument.createElement("td");
343 tableCellElement.appendChild(ownerDocument.createTextNode(fontSize.cssText));
344 tableRowElement.appendChild(tableCellElement);
345 tableElement.appendChild(tableRowElement);
346 }
347
348 // If the table has child nodes
349 if(tableElement.hasChildNodes())
350 {
351 definitionElement.appendChild(tableElement);
352 }
353 }
354
355 definitionElement = ownerDocument.getElementById("webdeveloper-element-information-ancestors");
356
357 // If the definition element is set
358 if(definitionElement)
359 {
360 var ancestorList = webdeveloper_getElementAncestors(element);
361 var ancestorLength = ancestorList.length;
362
363 webdeveloper_removeAllChildElements(definitionElement);
364
365 // If there are no ancestors
366 if(ancestorLength == 0)
367 {
368 definitionElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_none")));
369 }
370 else
371 {
372 // Loop through the ancestors
373 for(i = 0; i < ancestorLength; i++)
374 {
375 pElement = ownerDocument.createElement("p");
376
377 pElement.appendChild(ownerDocument.createTextNode(webdeveloper_getElementDescription(ancestorList[i])));
378 definitionElement.appendChild(pElement);
379 }
380 }
381 }
382
383 definitionElement = ownerDocument.getElementById("webdeveloper-element-information-children");
384
385 // If the definition element is set
386 if(definitionElement)
387 {
388 var children = webdeveloper_getElementChildren(element);
389 var childLength = children.length;
390
391 webdeveloper_removeAllChildElements(definitionElement);
392
393 // If there are no children
394 if(childLength == 0)
395 {
396 definitionElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_none")));
397 }
398 else
399 {
400 // Loop through the children
401 for(i = 0; i < childLength; i++)
402 {
403 pElement = ownerDocument.createElement("p");
404
405 pElement.appendChild(ownerDocument.createTextNode(webdeveloper_getElementDescription(children[i])));
406 definitionElement.appendChild(pElement);
407 }
408 }
409 }
410
411 element.style.MozOutline = "1px solid #ff0000";
412
413 // Force the style sheet to refresh
414 divElement.setAttribute("class", "force-width");
415 divElement.removeAttribute("class");
416
417 event.preventDefault();
418 }
419 }
420 }
421 }
422 }
423
424 // Keypress event for display element information
425 function webdeveloper_displayElementInformationKeyPress(event)
426 {
427 webdeveloper_copyElementAncestors(event);
428 }
429
430 // Move event for display element information
431 function webdeveloper_displayElementInformationMouseMove(event)
432 {
433 // If the element information block is selected
434 if(webdeveloper_elementInformationBlockSelected)
435 {
436 webdeveloper_moveElementInformationBlock(event);
437 }
438 else
439 {
440 var element = event.target;
441
442 // If the element is set
443 if(element)
444 {
445 var ownerDocument = element.ownerDocument;
446
447 // If the owner document is set
448 if(ownerDocument)
449 {
450 var divElement = ownerDocument.getElementById("webdeveloper-element-information");
451
452 // If the div element was found
453 if(divElement)
454 {
455 // If the element is not the div element and the div element is not an ancestor of the element
456 if(element != divElement && !webdeveloper_isAncestor(element, divElement))
457 {
458 var outlineElement = webdeveloper_addElementOutline(event, webdeveloper_informationElement);
459
460 // If the outline element is set
461 if(outlineElement)
462 {
463 webdeveloper_informationElement = outlineElement;
464 }
465 }
466
467 }
468 }
469 }
470 }
471 }
472
473 // Mouseover event for display element information
474 function webdeveloper_displayElementInformationMouseOver(event)
475 {
476 var element = event.target;
477
478 // If the element is set
479 if(element)
480 {
481 var ownerDocument = element.ownerDocument;
482
483 // If the owner document is set
484 if(ownerDocument)
485 {
486 var divElement = ownerDocument.getElementById("webdeveloper-element-information");
487
488 // If the div element was found
489 if(divElement)
490 {
491 // If the element is not the div element and the div element is not an ancestor of the element
492 if(element != divElement && !webdeveloper_isAncestor(element, divElement))
493 {
494 webdeveloper_displayElementAncestors(event);
495 }
496
497 }
498 }
499 }
500 }
501
502 // Move the element information block
503 function webdeveloper_moveElementInformationBlock(event)
504 {
505 var element = event.target;
506
507 // If the element is set
508 if(element)
509 {
510 var ownerDocument = element.ownerDocument;
511
512 // If the target has an owner document
513 if(ownerDocument)
514 {
515 var divElement = ownerDocument.getElementById("webdeveloper-element-information");
516
517 // If the div element was found
518 if(divElement)
519 {
520 divElement.style.left = (event.pageX - 5) + "px";
521 divElement.style.top = (event.pageY - 5) + "px";
522 }
523 }
524 }
525 }
526
527 // Called when the element information is selected
528 function webdeveloper_selectElementInformation(event)
529 {
530 // If the click was not a right click
531 if(event.button != 2)
532 {
533 webdeveloper_elementInformationBlockSelected = true;
534 }
535 }
536
537 // Toggles an element information block
538 function webdeveloper_toggleElementInformationBlock(event)
539 {
540 var element = event.target;
541
542 // If there is a target element
543 if(element)
544 {
545 // If the element has a class attribute
546 if(element.hasAttribute("class"))
547 {
548 element.removeAttribute("class");
549 }
550 else
551 {
552 element.setAttribute("class", "collapsed");
553 }
554 }
555 }