1 // Outlines all block level element names
2 function webdeveloper_outlineBlockLevelElementNames(element
)
4 webdeveloper_removeStyleSheet("webdeveloper-outline-block-level-elements-before");
5 webdeveloper_removeStyleSheet("webdeveloper-outline-block-level-elements-before-tooltips");
7 // If the show outlined element names preference is set
8 if(webdeveloper_getBooleanPreference("webdeveloper.outline.show.element.names", true))
10 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_block_level_elements_before.css", "webdeveloper-outline-block-level-elements-before");
11 webdeveloper_toggleFeatureTooltipStyles(element
, "webdeveloper-outline-block-level-elements-before-tooltips", "*:before");
15 // Outlines all block level elements
16 function webdeveloper_outlineBlockLevelElements(element
)
18 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_block_level_elements.css", "webdeveloper-outline-block-level-elements");
19 webdeveloper_outlineBlockLevelElementNames(element
);
22 // Outlines the current element
23 function webdeveloper_outlineCurrentElement(element
)
25 var checked
= element
.getAttribute("checked");
26 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
27 var documentLength
= documentList
.length
;
28 var pageDocument
= null;
30 webdeveloper_configureElement(document
.getElementById("webdeveloper-information-text-toolbar"), "hidden", !checked
);
32 // Loop through the documents
33 for(var i
= 0; i
< documentLength
; i
++)
35 pageDocument
= documentList
[i
];
37 // If outlining the element
40 pageDocument
.addEventListener("keypress", webdeveloper_outlineCurrentElementKeyPress
, false);
41 pageDocument
.addEventListener("mousemove", webdeveloper_outlineCurrentElementMouseMove
, false);
42 pageDocument
.addEventListener("mouseover", webdeveloper_outlineCurrentElementMouseOver
, false);
46 // Try to remove the event listener
49 pageDocument
.removeEventListener("keypress", webdeveloper_outlineCurrentElementKeyPress
, false);
56 // Try to remove the event listener
59 pageDocument
.removeEventListener("mousemove", webdeveloper_outlineCurrentElementMouseMove
, false);
66 // Try to remove the event listener
69 pageDocument
.removeEventListener("mouseover", webdeveloper_outlineCurrentElementMouseOver
, false);
76 webdeveloper_removeElementOutline(webdeveloper_outlineElement
);
80 // If not outlining the element
83 webdeveloper_outlineElement
= null;
86 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_current_element.css", "webdeveloper-outline-current-element");
89 // Keypress event for outline current element
90 function webdeveloper_outlineCurrentElementKeyPress(event
)
92 webdeveloper_copyElementAncestors(event
);
95 // Mouseover event for outline current element
96 function webdeveloper_outlineCurrentElementMouseMove(event
)
98 var outlineElement
= webdeveloper_addElementOutline(event
, webdeveloper_outlineElement
);
100 // If the outline element is set
103 webdeveloper_outlineElement
= outlineElement
;
107 // Mouseover event for outline current element
108 function webdeveloper_outlineCurrentElementMouseOver(event
)
110 webdeveloper_displayElementAncestors(event
);
113 // Outlines the given element
114 function webdeveloper_outlineCustomElements(element
)
116 webdeveloper_outlinedElements
= new Array();
118 // If the menu is checked
119 if(element
.getAttribute("checked"))
121 window
.openDialog("chrome://webdeveloper/content/dialogs/outline_elements.xul", "webdeveloper-outline-elements-dialog", "centerscreen,chrome,modal", webdeveloper_outlinedElements
);
123 // If the user clicked cancel in the dialog
124 if(webdeveloper_outlinedElements
.length
== 0)
126 element
.removeAttribute("checked");
130 webdeveloper_outlineElements(element
, true);
133 // Outlines all deprecated element names
134 function webdeveloper_outlineDeprecatedElementNames(element
)
136 webdeveloper_removeStyleSheet("webdeveloper-outline-deprecated-elements-before");
137 webdeveloper_removeStyleSheet("webdeveloper-outline-deprecated-elements-before-tooltips");
139 // If the show outlined element names preference is set
140 if(webdeveloper_getBooleanPreference("webdeveloper.outline.show.element.names", true))
142 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_deprecated_elements_before.css", "webdeveloper-outline-deprecated-elements-before");
143 webdeveloper_toggleFeatureTooltipStyles(element
, "webdeveloper-outline-deprecated-elements-before-tooltips", "*:before");
147 // Outlines all deprecated elements
148 function webdeveloper_outlineDeprecatedElements(element
)
150 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_deprecated_elements.css", "webdeveloper-outline-deprecated-elements");
151 webdeveloper_outlineDeprecatedElementNames(element
);
154 // Outlines the given element
155 function webdeveloper_outlineElements(element
)
157 // If the menu is checked
158 if(element
.getAttribute("checked") && webdeveloper_outlinedElements
.length
> 0)
160 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
161 var documentLength
= documentList
.length
;
162 var outlineColor
= null;
163 var outlineColorPreference
= null;
164 var outlineElement
= null;
165 var outlineElementLength
= null;
166 var outlineElementList
= null;
167 var outlineElementPreference
= null;
168 var outlineElementValue
= null;
169 var pageDocument
= null;
170 var styleElement
= null;
172 // Loop through the documents
173 for(var i
= 0; i
< documentLength
; i
++)
175 pageDocument
= documentList
[i
];
176 styleElement
= pageDocument
.createElement("style");
178 styleElement
.setAttribute("id", "webdeveloper-outline-custom-elements");
179 styleElement
.setAttribute("type", "text/css");
181 // Loop through outline colors and elements
182 for(var j
= 0; j
<= 5; j
++)
184 outlineColor
= "webdeveloper.custom." + j
+ ".color";
185 outlineColorPreference
= webdeveloper_getStringPreference(outlineColor
, true);
186 outlineElement
= "webdeveloper.custom." + j
+ ".element";
187 outlineElementPreference
= webdeveloper_getStringPreference(outlineElement
, true);
189 // If the color and element are set and not blank
190 if(outlineColorPreference
&& outlineElementPreference
)
192 outlineElementList
= outlineElementPreference
.split(",");
193 outlineElementLength
= outlineElementList
.length
;
195 // Loop through the elements
196 for(var k
= 0; k
< outlineElementLength
; k
++)
198 outlineElementValue
= outlineElementList
[k
];
200 styleElement
.appendChild(pageDocument
.createTextNode(outlineElementValue
+ " { -moz-outline: 1px solid " + outlineColorPreference
+ " !important; outline: 1px solid " + outlineColorPreference
+ " !important; }"));
202 // If the show outlined element names preference is set
203 if(webdeveloper_getBooleanPreference("webdeveloper.outline.show.element.names", true))
205 styleElement
.appendChild(pageDocument
.createTextNode(outlineElementValue
+ ":before { content: \"<" + outlineElementValue
+ ">\" !important; }"));
211 webdeveloper_getDocumentHeadElement(pageDocument
).appendChild(styleElement
);
214 webdeveloper_addAppliedStyle("webdeveloper-outline-custom-elements");
218 webdeveloper_removeStyleSheet("webdeveloper-outline-custom-elements", true);
221 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/imports/before.css", "webdeveloper-outline-custom-elements-before");
222 webdeveloper_toggleFeatureTooltipStyles(element
, "webdeveloper-outline-custom-elements-before-tooltips", "*:before");
225 // Outlines all external links
226 function webdeveloper_outlineExternalLinks(element
)
228 // If the menu is checked
229 if(element
.getAttribute("checked"))
231 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
232 var documentLength
= documentList
.length
;
234 var pageDocument
= null;
236 var styleElement
= null;
238 // Loop through the documents
239 for(var i
= 0; i
< documentLength
; i
++)
241 pageDocument
= documentList
[i
];
242 location
= pageDocument
.location
;
243 protocol
= location
.protocol
.replace(new RegExp(":", "gi"), "\\:");
244 styleElement
= pageDocument
.createElement("style");
246 styleElement
.setAttribute("id", "webdeveloper-outline-external-links");
247 styleElement
.setAttribute("type", "text/css");
248 styleElement
.appendChild(pageDocument
.createTextNode("a:not([href^=" + protocol
+ "\\/\\/" + location
.hostname
.replace(new RegExp("\\.", "gi"), "\\.") + "]) { -moz-outline: 1px solid #ff0000 !important; outline: 1px solid #ff0000 !important; }"));
249 styleElement
.appendChild(pageDocument
.createTextNode("a:not([href^=" + protocol
+ "]) { -moz-outline-style: none !important; outline-style: none !important; }"));
251 webdeveloper_getDocumentHeadElement(pageDocument
).appendChild(styleElement
);
254 webdeveloper_addAppliedStyle("webdeveloper-outline-external-links");
258 webdeveloper_removeStyleSheet("webdeveloper-outline-external-links", true);
262 // Outlines all floated elements
263 function webdeveloper_outlineFloatedElements(element
)
265 var checked
= element
.getAttribute("checked");
266 var className
= null;
267 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
268 var documentLength
= documentList
.length
;
269 var floatValue
= null;
270 var pageDocument
= null;
271 var pageElement
= null;
272 var treeWalker
= null;
274 // Loop through the documents
275 for(var i
= 0; i
< documentLength
; i
++)
277 pageDocument
= documentList
[i
];
278 treeWalker
= pageDocument
.createTreeWalker(pageDocument
, NodeFilter
.SHOW_ELEMENT
, null, false);
280 // While the tree walker has more nodes
281 while((pageElement
= treeWalker
.nextNode()) != null)
283 // If the element is checked
286 floatValue
= pageElement
.ownerDocument
.defaultView
.getComputedStyle(pageElement
, null).getPropertyCSSValue("float").cssText
;
288 // If this element is floated and it is not set to none
289 if(floatValue
&& floatValue
!= "none")
291 pageElement
.className
+= " webdeveloper-floated-element";
296 className
= pageElement
.className
;
298 // If the element has a class name and it contains webdeveloper-floated-element
299 if(className
&& className
.indexOf("webdeveloper-floated-element") != -1)
301 pageElement
.className
= webdeveloper_removeSubstring(className
, "webdeveloper-floated-element");
307 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_floated_elements.css", "webdeveloper-outline-floated-elements");
310 // Outlines all frames
311 function webdeveloper_outlineFrames(element
)
313 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_frames.css", "webdeveloper-outline-frames");
316 // Outlines all heading names
317 function webdeveloper_outlineHeadingNames(element
)
319 webdeveloper_removeStyleSheet("webdeveloper-outline-headings-before");
320 webdeveloper_removeStyleSheet("webdeveloper-outline-headings-before-tooltips");
322 // If the show outlined element names preference is set
323 if(webdeveloper_getBooleanPreference("webdeveloper.outline.show.element.names", true))
325 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_headings_before.css", "webdeveloper-outline-headings-before");
326 webdeveloper_toggleFeatureTooltipStyles(element
, "webdeveloper-outline-headings-before-tooltips", "*:before");
330 // Outlines all headings
331 function webdeveloper_outlineHeadings(element
)
333 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_headings.css", "webdeveloper-outline-headings");
334 webdeveloper_outlineHeadingNames(element
);
337 // Outlines all the links with ping attributes
338 function webdeveloper_outlineLinksWithPingAttributes(element
)
340 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_links_with_ping_attributes.css", "webdeveloper-outline-links-with-ping-attributes");
343 // Outlines all the links without title attributes
344 function webdeveloper_outlineLinksWithoutTitleAttributes(element
)
346 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_links_without_title_attributes.css", "webdeveloper-outline-links-without-title-attributes");
349 // Outlines all positioned elements of the specified position on the page
350 function webdeveloper_outlinePositionedElements(position
, element
)
352 var attributeName
= "webdeveloper-" + position
+ "-positioned-element";
353 var checked
= element
.getAttribute("checked");
354 var className
= null;
355 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
356 var documentLength
= documentList
.length
;
357 var pageDocument
= null;
358 var pageElement
= null;
359 var positionValue
= null;
360 var treeWalker
= null;
362 // Loop through the documents
363 for(var i
= 0; i
< documentLength
; i
++)
365 pageDocument
= documentList
[i
];
366 treeWalker
= pageDocument
.createTreeWalker(pageDocument
, NodeFilter
.SHOW_ELEMENT
, null, false);
368 // While the tree walker has more nodes
369 while((pageElement
= treeWalker
.nextNode()) != null)
371 // If the element is checked
374 positionValue
= pageElement
.ownerDocument
.defaultView
.getComputedStyle(pageElement
, null).getPropertyCSSValue("position").cssText
;
376 // If this element is positioned and it is the specified position
377 if(positionValue
&& positionValue
== position
)
379 pageElement
.className
+= " " + attributeName
;
382 else if(pageElement
.className
.indexOf(attributeName
) != -1)
384 pageElement
.className
= webdeveloper_removeSubstring(pageElement
.className
, attributeName
);
389 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_positioned_elements.css", "webdeveloper-outline-" + position
+ "-positioned-elements");
392 // Outlines all table captions
393 function webdeveloper_outlineTableCaptions(element
)
395 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_table_captions.css", "webdeveloper-outline-table-captions");
398 // Outlines all table cells
399 function webdeveloper_outlineTableCells(element
)
401 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_table_cells.css", "webdeveloper-outline-table-cells");
402 webdeveloper_outlineTableCellNames(element
);
405 // Outlines all table cell names
406 function webdeveloper_outlineTableCellNames(element
)
408 webdeveloper_removeStyleSheet("webdeveloper-outline-table-cells-before");
409 webdeveloper_removeStyleSheet("webdeveloper-outline-table-cells-before-tooltips");
411 // If the show outlined element names preference is set
412 if(webdeveloper_getBooleanPreference("webdeveloper.outline.show.element.names", true))
414 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_table_cells_before.css", "webdeveloper-outline-table-cells-before");
415 webdeveloper_toggleFeatureTooltipStyles(element
, "webdeveloper-outline-table-cells-before-tooltips", "*:before");
419 // Outlines all tables
420 function webdeveloper_outlineTables(element
)
422 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_tables.css", "webdeveloper-outline-all-tables");
425 // Toggle showing of element names when outlining
426 function webdeveloper_toggleShowElementNamesWhenOutlining(element
)
428 var menu
= document
.getElementById("webdeveloper-outline-block-level-elements-menu");
430 webdeveloper_enablePreference(element
, "webdeveloper.outline.show.element.names");
432 webdeveloper_configureElementByAppliedStyle(menu
, "checked", "webdeveloper-outline-block-level-elements");
433 webdeveloper_outlineBlockLevelElementNames(menu
, true);
435 menu
= document
.getElementById("webdeveloper-outline-deprecated-elements-menu");
436 webdeveloper_configureElementByAppliedStyle(menu
, "checked", "webdeveloper-outline-deprecated-elements");
437 webdeveloper_outlineDeprecatedElementNames(menu
, true);
439 menu
= document
.getElementById("webdeveloper-outline-headings-menu");
440 webdeveloper_configureElementByAppliedStyle(menu
, "checked", "webdeveloper-outline-headings");
441 webdeveloper_outlineHeadingNames(menu
, true);
443 menu
= document
.getElementById("webdeveloper-outline-table-cells-menu");
444 webdeveloper_configureElementByAppliedStyle(menu
, "checked", "webdeveloper-outline-table-cells");
445 webdeveloper_outlineTableCellNames(menu
, true);
448 // Updates the outline menu
449 function webdeveloper_updateOutlineMenu(suffix
)
451 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-block-level-elements-" + suffix
), "checked", "webdeveloper-outline-block-level-elements");
452 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-current-element-" + suffix
), "checked", "webdeveloper-outline-current-element");
453 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-custom-elements-" + suffix
), "checked", "webdeveloper-outline-custom-elements");
454 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-deprecated-elements-" + suffix
), "checked", "webdeveloper-outline-deprecated-elements");
455 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-frames-" + suffix
), "checked", "webdeveloper-outline-frames");
456 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-headings-" + suffix
), "checked", "webdeveloper-outline-headings");
457 webdeveloper_configureElement(document
.getElementById("webdeveloper-outline-show-element-names-" + suffix
), "checked", webdeveloper_getBooleanPreference("webdeveloper.outline.show.element.names", true));
460 // Updates the outline links menu
461 function webdeveloper_updateOutlineLinksMenu(suffix
)
463 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-external-links-" + suffix
), "checked", "webdeveloper-outline-external-links");
464 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-links-with-ping-attributes-" + suffix
), "checked", "webdeveloper-outline-links-with-ping-attributes");
465 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-links-without-title-attributes-" + suffix
), "checked", "webdeveloper-outline-links-without-title-attributes");
468 // Updates the outline positioned elements menu
469 function webdeveloper_updateOutlinePositionedElementsMenu(suffix
)
471 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-absolute-positioned-elements-" + suffix
), "checked", "webdeveloper-outline-absolute-positioned-elements");
472 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-fixed-positioned-elements-" + suffix
), "checked", "webdeveloper-outline-fixed-positioned-elements");
473 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-floated-elements-" + suffix
), "checked", "webdeveloper-outline-floated-elements");
474 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-relative-positioned-elements-" + suffix
), "checked", "webdeveloper-outline-relative-positioned-elements");
477 // Updates the outline tables menu
478 function webdeveloper_updateOutlineTablesMenu(suffix
)
480 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-table-captions-" + suffix
), "checked", "webdeveloper-outline-table-captions");
481 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-table-cells-" + suffix
), "checked", "webdeveloper-outline-table-cells");
482 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-all-tables-" + suffix
), "checked", "webdeveloper-outline-all-tables");