1 var webdeveloper_elementInformationBlockSelected
= false;
2 var webdeveloper_informationElement
= null;
4 // Creates the element information block
5 function webdeveloper_createElementInformationBlock(ownerDocument
)
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");
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
);
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
);
26 definitionElement
= ownerDocument
.createElement("dd");
27 listElement
= ownerDocument
.createElement("dl");
28 termElement
= ownerDocument
.createElement("dt");
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
);
37 definitionElement
= ownerDocument
.createElement("dd");
38 listElement
= ownerDocument
.createElement("dl");
39 termElement
= ownerDocument
.createElement("dt");
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
);
48 definitionElement
= ownerDocument
.createElement("dd");
49 listElement
= ownerDocument
.createElement("dl");
50 termElement
= ownerDocument
.createElement("dt");
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
);
59 definitionElement
= ownerDocument
.createElement("dd");
60 listElement
= ownerDocument
.createElement("dl");
61 termElement
= ownerDocument
.createElement("dt");
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
);
70 divElement
.setAttribute("id", "webdeveloper-element-information");
71 webdeveloper_getDocumentBodyElement(ownerDocument
).appendChild(divElement
);
74 // Called when the element information is deselected
75 function webdeveloper_deselectElementInformation(event
)
77 webdeveloper_elementInformationBlockSelected
= false;
80 // Displays information about the element
81 function webdeveloper_displayElementInformation(element
)
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
;
93 // If the element is set
96 checked
= element
.getAttribute("checked");
100 var currentDocument
= contentWindow
.document
;
102 element
= document
.getElementById("webdeveloper-display-element-information-menu");
104 // If the display element information element is set
105 if(currentDocument
.getElementById("webdeveloper-display-element-information"))
110 webdeveloper_configureElement(element
, "checked", checked
);
113 webdeveloper_configureElement(document
.getElementById("webdeveloper-information-text-toolbar"), "hidden", !checked
);
115 // Loop through the documents
116 for(var i
= 0; i
< documentLength
; i
++)
118 pageDocument
= documentList
[i
];
120 // If displaying element information
123 webdeveloper_createElementInformationBlock(pageDocument
);
125 // If this is the content document
126 if(pageDocument
== contentDocument
)
128 divElement
= pageDocument
.getElementById("webdeveloper-element-information");
130 // If the div element was found
133 divElement
.style
.left
= (leftOffset
+ 5) + "px";
134 divElement
.style
.top
= (topOffset
+ 5) + "px";
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);
145 divElement
= pageDocument
.getElementById("webdeveloper-element-information");
147 // Try to remove the event listener
150 pageDocument
.removeEventListener("click", webdeveloper_displayElementInformationForElement
, false);
157 // Try to remove the event listener
160 pageDocument
.removeEventListener("keypress", webdeveloper_displayElementInformationKeyPress
, false);
167 // Try to remove the event listener
170 pageDocument
.removeEventListener("mousemove", webdeveloper_displayElementInformationMouseMove
, false);
177 // Try to remove the event listener
180 pageDocument
.removeEventListener("mouseover", webdeveloper_displayElementInformationMouseOver
, false);
187 webdeveloper_removeElement(divElement
);
188 webdeveloper_removeElementOutline(webdeveloper_informationElement
);
192 // If not displaying element information
195 webdeveloper_elementInformationBlockSelected
= false;
196 webdeveloper_informationElement
= null;
199 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/display_element_information.css", "webdeveloper-display-element-information");
202 // Displays information about the specific element
203 function webdeveloper_displayElementInformationForElement(event
)
205 var element
= event
.target
;
207 // If the element is set
210 var elementName
= element
.tagName
;
211 var ownerDocument
= element
.ownerDocument
;
213 // If the element has a name and it is not scrollbar and it has an owner document
214 if(elementName
&& elementName
!= "scrollbar" && ownerDocument
)
216 var divElement
= ownerDocument
.getElementById("webdeveloper-element-information");
218 // If the div element was found
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
))
224 var definitionElement
= ownerDocument
.getElementById("webdeveloper-element-information-attributes");
225 var headerElements
= divElement
.getElementsByTagName("h2");
226 var outlineElement
= null;
228 var stringBundle
= document
.getElementById("webdeveloper-string-bundle");
229 var tableElement
= null;
230 var tableCellElement
= null;
231 var tableRowElement
= null;
233 webdeveloper_removeElementOutline(element
);
235 // If header elements were found
236 if(headerElements
.length
> 0)
238 var headerElement
= headerElements
[0];
240 // If the header element is set
243 webdeveloper_removeAllChildElements(headerElement
);
245 headerElement
.appendChild(ownerDocument
.createTextNode(webdeveloper_getElementDescription(element
)));
249 // If the definition element is set
250 if(definitionElement
)
252 var elementAttribute
= null;
253 var elementAttributes
= element
.attributes
;
254 var elementAttributesLength
= elementAttributes
.length
;
256 webdeveloper_removeAllChildElements(definitionElement
);
258 // If there are no attributes
259 if(elementAttributesLength
== 0)
261 definitionElement
.appendChild(ownerDocument
.createTextNode(stringBundle
.getString("webdeveloper_none")));
265 // Loop through the attributes
266 for(var i
= 0; i
< elementAttributesLength
; i
++)
268 elementAttribute
= elementAttributes
[i
];
269 pElement
= ownerDocument
.createElement("p");
271 pElement
.appendChild(ownerDocument
.createTextNode(elementAttribute
.name
+ " = " + elementAttribute
.value
));
272 definitionElement
.appendChild(pElement
);
277 definitionElement
= ownerDocument
.getElementById("webdeveloper-element-information-position");
279 // If the definition element is set
280 if(definitionElement
)
282 tableElement
= ownerDocument
.createElement("table");
283 tableCellElement
= ownerDocument
.createElement("td");
284 tableRowElement
= ownerDocument
.createElement("tr");
286 webdeveloper_removeAllChildElements(definitionElement
);
288 tableCellElement
.appendChild(ownerDocument
.createTextNode(stringBundle
.getString("webdeveloper_left") + ": " + webdeveloper_getElementPositionX(element
) + "px"));
289 tableRowElement
.appendChild(tableCellElement
);
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
);
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
);
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
);
308 definitionElement
= ownerDocument
.getElementById("webdeveloper-element-information-other");
310 // If the definition element is set
311 if(definitionElement
)
313 var fontFamily
= element
.ownerDocument
.defaultView
.getComputedStyle(element
, null).getPropertyCSSValue("font-family");
314 var fontSize
= element
.ownerDocument
.defaultView
.getComputedStyle(element
, null).getPropertyCSSValue("font-size");
316 tableElement
= ownerDocument
.createElement("table");
318 webdeveloper_removeAllChildElements(definitionElement
);
320 // If this element has a font family
323 tableCellElement
= ownerDocument
.createElement("td");
324 tableRowElement
= ownerDocument
.createElement("tr");
325 tableCellElement
.appendChild(ownerDocument
.createTextNode(stringBundle
.getString("webdeveloper_fontFamily") + ":"));
326 tableRowElement
.appendChild(tableCellElement
);
328 tableCellElement
= ownerDocument
.createElement("td");
329 tableCellElement
.appendChild(ownerDocument
.createTextNode(fontFamily
.cssText
));
330 tableRowElement
.appendChild(tableCellElement
);
331 tableElement
.appendChild(tableRowElement
);
334 // If this element has a font size
337 tableCellElement
= ownerDocument
.createElement("td");
338 tableRowElement
= ownerDocument
.createElement("tr");
339 tableCellElement
.appendChild(ownerDocument
.createTextNode(stringBundle
.getString("webdeveloper_fontSize") + ":"));
340 tableRowElement
.appendChild(tableCellElement
);
342 tableCellElement
= ownerDocument
.createElement("td");
343 tableCellElement
.appendChild(ownerDocument
.createTextNode(fontSize
.cssText
));
344 tableRowElement
.appendChild(tableCellElement
);
345 tableElement
.appendChild(tableRowElement
);
348 // If the table has child nodes
349 if(tableElement
.hasChildNodes())
351 definitionElement
.appendChild(tableElement
);
355 definitionElement
= ownerDocument
.getElementById("webdeveloper-element-information-ancestors");
357 // If the definition element is set
358 if(definitionElement
)
360 var ancestorList
= webdeveloper_getElementAncestors(element
);
361 var ancestorLength
= ancestorList
.length
;
363 webdeveloper_removeAllChildElements(definitionElement
);
365 // If there are no ancestors
366 if(ancestorLength
== 0)
368 definitionElement
.appendChild(ownerDocument
.createTextNode(stringBundle
.getString("webdeveloper_none")));
372 // Loop through the ancestors
373 for(i
= 0; i
< ancestorLength
; i
++)
375 pElement
= ownerDocument
.createElement("p");
377 pElement
.appendChild(ownerDocument
.createTextNode(webdeveloper_getElementDescription(ancestorList
[i
])));
378 definitionElement
.appendChild(pElement
);
383 definitionElement
= ownerDocument
.getElementById("webdeveloper-element-information-children");
385 // If the definition element is set
386 if(definitionElement
)
388 var children
= webdeveloper_getElementChildren(element
);
389 var childLength
= children
.length
;
391 webdeveloper_removeAllChildElements(definitionElement
);
393 // If there are no children
396 definitionElement
.appendChild(ownerDocument
.createTextNode(stringBundle
.getString("webdeveloper_none")));
400 // Loop through the children
401 for(i
= 0; i
< childLength
; i
++)
403 pElement
= ownerDocument
.createElement("p");
405 pElement
.appendChild(ownerDocument
.createTextNode(webdeveloper_getElementDescription(children
[i
])));
406 definitionElement
.appendChild(pElement
);
411 element
.style
.MozOutline
= "1px solid #ff0000";
413 // Force the style sheet to refresh
414 divElement
.setAttribute("class", "force-width");
415 divElement
.removeAttribute("class");
417 event
.preventDefault();
424 // Keypress event for display element information
425 function webdeveloper_displayElementInformationKeyPress(event
)
427 webdeveloper_copyElementAncestors(event
);
430 // Move event for display element information
431 function webdeveloper_displayElementInformationMouseMove(event
)
433 // If the element information block is selected
434 if(webdeveloper_elementInformationBlockSelected
)
436 webdeveloper_moveElementInformationBlock(event
);
440 var element
= event
.target
;
442 // If the element is set
445 var ownerDocument
= element
.ownerDocument
;
447 // If the owner document is set
450 var divElement
= ownerDocument
.getElementById("webdeveloper-element-information");
452 // If the div element was found
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
))
458 var outlineElement
= webdeveloper_addElementOutline(event
, webdeveloper_informationElement
);
460 // If the outline element is set
463 webdeveloper_informationElement
= outlineElement
;
473 // Mouseover event for display element information
474 function webdeveloper_displayElementInformationMouseOver(event
)
476 var element
= event
.target
;
478 // If the element is set
481 var ownerDocument
= element
.ownerDocument
;
483 // If the owner document is set
486 var divElement
= ownerDocument
.getElementById("webdeveloper-element-information");
488 // If the div element was found
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
))
494 webdeveloper_displayElementAncestors(event
);
502 // Move the element information block
503 function webdeveloper_moveElementInformationBlock(event
)
505 var element
= event
.target
;
507 // If the element is set
510 var ownerDocument
= element
.ownerDocument
;
512 // If the target has an owner document
515 var divElement
= ownerDocument
.getElementById("webdeveloper-element-information");
517 // If the div element was found
520 divElement
.style
.left
= (event
.pageX
- 5) + "px";
521 divElement
.style
.top
= (event
.pageY
- 5) + "px";
527 // Called when the element information is selected
528 function webdeveloper_selectElementInformation(event
)
530 // If the click was not a right click
531 if(event
.button
!= 2)
533 webdeveloper_elementInformationBlockSelected
= true;
537 // Toggles an element information block
538 function webdeveloper_toggleElementInformationBlock(event
)
540 var element
= event
.target
;
542 // If there is a target element
545 // If the element has a class attribute
546 if(element
.hasAttribute("class"))
548 element
.removeAttribute("class");
552 element
.setAttribute("class", "collapsed");