1 // Displays all alt attributes
2 function webdeveloper_displayAltAttributes(element
)
4 var checked
= element
.getAttribute("checked");
5 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
6 var documentLength
= documentList
.length
;
7 var imageElement
= null;
8 var imageElementList
= null;
9 var imageElementsLength
= null;
10 var pageDocument
= null;
11 var spanElement
= null;
14 // Loop through the documents
15 for(var i
= 0; i
< documentLength
; i
++)
17 pageDocument
= documentList
[i
];
19 // Need to do this to stop the feature running twice
20 webdeveloper_removeAllElementsByXPath(pageDocument
, "//span[@class='webdeveloper-display-alt-attributes']");
22 // If the element is checked
25 imageElementList
= pageDocument
.images
;
26 imageElementsLength
= imageElementList
.length
;
28 // Loop through all the image elements
29 for(var j
= 0; j
< imageElementsLength
; j
++)
31 imageElement
= imageElementList
[j
];
33 // If the alt attribute is set
34 if(imageElement
.hasAttribute("alt"))
36 spanElement
= pageDocument
.createElement("span");
37 text
= "Alt=" + imageElement
.getAttribute("alt");
39 spanElement
.setAttribute("class", "webdeveloper-display-alt-attributes");
40 spanElement
.setAttribute("title", text
);
41 spanElement
.appendChild(pageDocument
.createTextNode(text
));
42 imageElement
.parentNode
.insertBefore(spanElement
, imageElement
);
48 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/imports/tooltips.css", "webdeveloper-display-alt-attributes");
49 webdeveloper_toggleFeatureTooltipStyles(element
, "webdeveloper-display-alt-attributes-tooltips", "span.webdeveloper-display-alt-attributes");
52 // Displays all image dimensions
53 function webdeveloper_displayImageDimensions(element
)
55 var checked
= element
.getAttribute("checked");
56 var dimensions
= null;
57 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
58 var documentLength
= documentList
.length
;
60 var imageElement
= null;
61 var imageElementList
= null;
62 var imageElementsLength
= null;
63 var pageDocument
= null;
64 var spanElement
= null;
65 var stringBundle
= document
.getElementById("webdeveloper-string-bundle");
66 var heightText
= stringBundle
.getString("webdeveloper_height");
68 var widthText
= stringBundle
.getString("webdeveloper_width");
70 // Loop through the documents
71 for(var i
= 0; i
< documentLength
; i
++)
73 pageDocument
= documentList
[i
];
75 // Need to do this to stop the feature running twice
76 webdeveloper_removeAllElementsByXPath(pageDocument
, "//span[@class='webdeveloper-display-image-dimensions']");
78 // If the element is checked
81 imageElementList
= pageDocument
.images
;
82 imageElementsLength
= imageElementList
.length
;
84 // Loop through all the image elements
85 for(var j
= 0; j
< imageElementsLength
; j
++)
88 imageElement
= imageElementList
[j
];
89 height
= imageElement
.height
;
90 width
= imageElement
.width
;
92 // If the width and height are set
95 dimensions
= width
+ "x" + height
;
99 dimensions
= widthText
+ "=" + width
;
103 dimensions
= heightText
+ "=" + height
;
106 // If the dimensions are set
109 spanElement
= pageDocument
.createElement("span");
111 spanElement
.setAttribute("class", "webdeveloper-display-image-dimensions");
112 spanElement
.setAttribute("title", dimensions
);
113 spanElement
.appendChild(pageDocument
.createTextNode(dimensions
));
114 imageElement
.parentNode
.insertBefore(spanElement
, imageElement
);
123 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/imports/tooltips.css", "webdeveloper-display-image-dimensions");
124 webdeveloper_toggleFeatureTooltipStyles(element
, "webdeveloper-display-image-dimensions-tooltips", "span.webdeveloper-display-image-dimensions");
127 // Displays all image file sizes
128 function webdeveloper_displayImageFileSizes(element
)
130 var checked
= element
.getAttribute("checked");
131 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
132 var documentLength
= documentList
.length
;
134 var imageElement
= null;
135 var imageElementList
= null;
136 var imageElementsLength
= null;
137 var pageDocument
= null;
138 var spanElement
= null;
139 var stringBundle
= document
.getElementById("webdeveloper-string-bundle");
140 var fileSizeText
= stringBundle
.getString("webdeveloper_fileSize");
143 // Loop through the documents
144 for(var i
= 0; i
< documentLength
; i
++)
146 pageDocument
= documentList
[i
];
148 // Need to do this to stop the feature running twice
149 webdeveloper_removeAllElementsByXPath(pageDocument
, "//span[@class='webdeveloper-display-image-file-sizes']");
151 // If the element is checked
154 imageElementList
= pageDocument
.images
;
155 imageElementsLength
= imageElementList
.length
;
157 // Loop through all the image elements
158 for(var j
= 0; j
< imageElementsLength
; j
++)
160 imageElement
= imageElementList
[j
];
161 fileSize
= webdeveloper_getFileSize(imageElement
.src
);
163 // If there is a file size
166 spanElement
= pageDocument
.createElement("span");
167 text
= fileSizeText
+ "=" + webdeveloper_formatFileSize(fileSize
);
169 spanElement
.setAttribute("class", "webdeveloper-display-image-file-sizes");
170 spanElement
.setAttribute("title", text
);
171 spanElement
.appendChild(pageDocument
.createTextNode(text
));
172 imageElement
.parentNode
.insertBefore(spanElement
, imageElement
);
178 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/imports/tooltips.css", "webdeveloper-display-image-file-sizes");
179 webdeveloper_toggleFeatureTooltipStyles(element
, "webdeveloper-display-image-file-sizes-tooltips", "span.webdeveloper-display-image-file-sizes");
182 // Displays all image paths
183 function webdeveloper_displayImagePaths(element
)
185 var checked
= element
.getAttribute("checked");
186 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
187 var documentLength
= documentList
.length
;
188 var imageElement
= null;
189 var imageElementList
= null;
190 var imageElementsLength
= null;
191 var pageDocument
= null;
192 var spanElement
= null;
194 var stringBundle
= document
.getElementById("webdeveloper-string-bundle");
195 var srcText
= stringBundle
.getString("webdeveloper_src");
198 // Loop through the documents
199 for(var i
= 0; i
< documentLength
; i
++)
201 pageDocument
= documentList
[i
];
203 // Need to do this to stop the feature running twice
204 webdeveloper_removeAllElementsByXPath(pageDocument
, "//span[@class='webdeveloper-display-image-paths']");
206 // If the element is checked
209 imageElementList
= pageDocument
.images
;
210 imageElementsLength
= imageElementList
.length
;
212 // Loop through all the image elements
213 for(var j
= 0; j
< imageElementsLength
; j
++)
215 imageElement
= imageElementList
[j
];
216 spanElement
= pageDocument
.createElement("span");
217 src
= imageElement
.getAttribute("src");
222 text
= srcText
+ "=" + src
;
224 spanElement
.setAttribute("class", "webdeveloper-display-image-paths");
225 spanElement
.setAttribute("title", text
);
226 spanElement
.appendChild(pageDocument
.createTextNode(text
));
227 imageElement
.parentNode
.insertBefore(spanElement
, imageElement
);
233 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/imports/tooltips.css", "webdeveloper-display-image-paths");
234 webdeveloper_toggleFeatureTooltipStyles(element
, "webdeveloper-display-image-paths-tooltips", "span.webdeveloper-display-image-paths");
237 // Finds all the broken images on the page
238 function webdeveloper_findBrokenImages()
240 var cacheDisabled
= !webdeveloper_getBooleanPreference("browser.cache.disk.enable", false) && !webdeveloper_getBooleanPreference("browser.cache.memory.enable", false);
241 var divElement
= null;
242 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
243 var documentLength
= documentList
.length
;
244 var documentURL
= null;
246 var imageLength
= null;
247 var imageList
= null;
249 var linkElement
= null;
250 var listElement
= null;
251 var listItemElement
= null;
252 var oldTab
= getBrowser().selectedTab
;
253 var oldURL
= getBrowser().currentURI
.spec
;
254 var generatedDocument
= webdeveloper_generateDocument("");
255 var bodyElement
= webdeveloper_getDocumentBodyElement(generatedDocument
);
256 var headElement
= webdeveloper_getDocumentHeadElement(generatedDocument
);
257 var headerElement
= generatedDocument
.createElement("h1");
258 var pageDocument
= null;
260 var scriptElement
= generatedDocument
.createElement("script");
261 var spanElement
= null;
262 var stringBundle
= document
.getElementById("webdeveloper-string-bundle");
263 var title
= stringBundle
.getFormattedString("webdeveloper_findBrokenImagesTitle", [oldURL
]);
265 generatedDocument
.title
= title
;
267 webdeveloper_addGeneratedStyles(generatedDocument
);
269 headerElement
.appendChild(generatedDocument
.createTextNode(title
));
270 bodyElement
.appendChild(headerElement
);
272 webdeveloper_addGeneratedTools(generatedDocument
);
274 // Loop through the documents
275 for(var i
= 0; i
< documentLength
; i
++)
277 divElement
= generatedDocument
.createElement("div");
278 headerElement
= generatedDocument
.createElement("h2");
279 linkElement
= generatedDocument
.createElement("a");
280 listElement
= generatedDocument
.createElement("ol");
281 pageDocument
= documentList
[i
];
282 documentURL
= pageDocument
.documentURI
;
283 imageList
= webdeveloper_getImagesForDocument(pageDocument
, !cacheDisabled
, false);
284 imageLength
= imageList
.length
;
285 spanElement
= generatedDocument
.createElement("span");
287 spanElement
.setAttribute("class", "expanded pivot");
288 headerElement
.appendChild(spanElement
);
289 linkElement
.setAttribute("href", documentURL
);
290 linkElement
.appendChild(generatedDocument
.createTextNode(documentURL
));
291 headerElement
.appendChild(linkElement
);
292 bodyElement
.appendChild(headerElement
);
294 // Loop through all the images
295 for(var j
= 0; j
< imageLength
; j
++)
297 image
= imageList
[j
];
298 imageSrc
= image
.src
;
300 // If the image is broken
301 if(!image
.naturalWidth
&& !image
.naturalHeight
)
303 listItemElement
= generatedDocument
.createElement("li");
304 linkElement
= generatedDocument
.createElement("a");
306 linkElement
.setAttribute("href", imageSrc
);
307 linkElement
.appendChild(generatedDocument
.createTextNode(imageSrc
));
308 listItemElement
.appendChild(linkElement
);
309 listElement
.appendChild(listItemElement
);
313 // If there are no broken images
314 if(listElement
.hasChildNodes())
316 divElement
.appendChild(listElement
);
320 pElement
= generatedDocument
.createElement("p");
322 pElement
.appendChild(generatedDocument
.createTextNode(stringBundle
.getString("webdeveloper_noBrokenImages")));
323 divElement
.appendChild(pElement
);
326 divElement
.setAttribute("class", "output");
327 bodyElement
.appendChild(divElement
);
330 scriptElement
.setAttribute("defer", "defer");
331 scriptElement
.setAttribute("src", "chrome://webdeveloper/content/common/xpath.js");
332 scriptElement
.setAttribute("type", "text/javascript");
333 headElement
.appendChild(scriptElement
);
335 scriptElement
= generatedDocument
.createElement("script");
337 scriptElement
.setAttribute("defer", "defer");
338 scriptElement
.setAttribute("src", "chrome://webdeveloper/content/generated/output_pivot.js");
339 scriptElement
.setAttribute("type", "text/javascript");
340 headElement
.appendChild(scriptElement
);
342 // If the open tabs in background preference is set to true
343 if(webdeveloper_getBooleanPreference("webdeveloper.open.tabs.background", true))
345 getBrowser().selectedTab
= oldTab
;
349 // Hides/shows all background images
350 function webdeveloper_hideBackgroundImages(element
)
352 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/hide_background_images.css", "webdeveloper-hide-background-images");
355 // Hides/shows all the images
356 function webdeveloper_hideImages(element
, id
)
358 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
359 var documentLength
= documentList
.length
;
360 var hide
= element
.getAttribute("checked");
361 var inputElement
= null;
362 var inputElementList
= null;
363 var inputElementsLength
= null;
364 var pageDocument
= null;
366 // Loop through the documents
367 for(var i
= 0; i
< documentLength
; i
++)
369 pageDocument
= documentList
[i
];
370 inputElementList
= pageDocument
.getElementsByTagName("input");
371 inputElementsLength
= inputElementList
.length
;
373 // Loop through all the input tags
374 for(var j
= 0; j
< inputElementsLength
; j
++)
376 inputElement
= inputElementList
[j
];
378 // If hiding images and the element is an image
379 if(hide
&& inputElement
.hasAttribute("type") && inputElement
.getAttribute("type").toLowerCase() == "image")
381 inputElement
.className
+= " webdeveloper-image";
383 inputElement
.setAttribute("type", "submit");
385 else if(inputElement
.className
.indexOf("webdeveloper-image") != -1)
387 inputElement
.className
= webdeveloper_removeSubstring(inputElement
.className
, "webdeveloper-image");
389 inputElement
.setAttribute("type", "image");
393 // This stops the fields reordering
394 inputElement
.setAttribute("type", inputElement
.getAttribute("type"));
399 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/hide_images.css", id
);
402 // Makes all the images full size
403 function webdeveloper_makeImagesFullSize()
405 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
406 var documentLength
= documentList
.length
;
408 var imageLength
= null;
409 var imageList
= null;
410 var pageDocument
= null;
412 // Loop through the documents
413 for(var i
= 0; i
< documentLength
; i
++)
415 pageDocument
= documentList
[i
];
416 imageList
= pageDocument
.images
;
417 imageLength
= imageList
.length
;
419 // Loop through all the images
420 for(var j
= 0; j
< imageLength
; j
++)
422 image
= imageList
[j
];
424 // If the image width is set
425 if(image
.hasAttribute("width"))
427 image
.removeAttribute("width");
430 // If the image height is set
431 if(image
.hasAttribute("height"))
433 image
.removeAttribute("height");
439 // Makes all the images invisible
440 function webdeveloper_makeImagesInvisible(element
, id
)
442 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
443 var documentLength
= documentList
.length
;
445 var imageLength
= null;
446 var imageList
= null;
447 var inputElement
= null;
448 var inputElementList
= null;
449 var inputElementsLength
= null;
450 var invisible
= element
.getAttribute("checked");
451 var pageDocument
= null;
453 // Loop through the documents
454 for(var i
= 0; i
< documentLength
; i
++)
456 pageDocument
= documentList
[i
];
457 imageList
= pageDocument
.images
;
458 imageLength
= imageList
.length
;
459 inputElementList
= pageDocument
.getElementsByTagName("input");
460 inputElementsLength
= inputElementList
.length
;
462 // Loop through all the input tags
463 for(var j
= 0; j
< inputElementsLength
; j
++)
465 inputElement
= inputElementList
[j
];
467 // If making images invisible and the element is an image
468 if(invisible
&& inputElement
.hasAttribute("type") && inputElement
.getAttribute("type").toLowerCase() == "image")
470 inputElement
.className
+= " webdeveloper-image";
472 inputElement
.setAttribute("type", "submit");
474 else if(inputElement
.className
.indexOf("webdeveloper-image") != -1)
476 inputElement
.className
= webdeveloper_removeSubstring(inputElement
.className
, "webdeveloper-image");
478 inputElement
.setAttribute("type", "image");
482 // This stops the fields reordering
483 inputElement
.setAttribute("type", inputElement
.getAttribute("type"));
487 // Loop through all the images
488 for(j
= 0; j
< imageLength
; j
++)
490 image
= imageList
[j
];
492 // If making images invisible
495 // If the image width is not set and the image is not broken
496 if(!image
.hasAttribute("width") && image
.naturalWidth
)
498 image
.setAttribute("width", image
.naturalWidth
);
501 // If the image height is not set and the image is not broken
502 if(!image
.hasAttribute("height") && image
.naturalHeight
)
504 image
.setAttribute("height", image
.naturalHeight
);
507 image
.setAttribute("src", "chrome://webdeveloper/content/images/spacer.gif?" + image
.getAttribute("src"));
511 image
.setAttribute("src", webdeveloper_removeSubstring(image
.getAttribute("src"), "chrome://webdeveloper/content/images/spacer.gif?"));
516 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/make_images_invisible.css", id
);
519 // Outlines all images
520 function webdeveloper_outlineAllImages(element
)
522 webdeveloper_outlineBackgroundImages(element
, false);
523 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_all_images.css", "webdeveloper-outline-all-images");
526 // Outlines all background images
527 function webdeveloper_outlineBackgroundImages(element
, toggleStyleSheet
)
529 var backgroundImage
= null;
530 var checked
= element
.getAttribute("checked");
531 var cssURI
= CSSPrimitiveValue
.CSS_URI
;
532 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
533 var documentLength
= documentList
.length
;
535 var pageDocument
= null;
536 var treeWalker
= null;
538 // Loop through the documents
539 for(var i
= 0; i
< documentLength
; i
++)
541 pageDocument
= documentList
[i
];
542 treeWalker
= pageDocument
.createTreeWalker(webdeveloper_getDocumentBodyElement(pageDocument
), NodeFilter
.SHOW_ELEMENT
, null, false);
544 // While the tree walker has more nodes
545 while((node
= treeWalker
.nextNode()) != null)
547 backgroundImage
= node
.ownerDocument
.defaultView
.getComputedStyle(node
, null).getPropertyCSSValue("background-image");
549 // If this element has a background image and it is a URL
550 if(backgroundImage
&& backgroundImage
.primitiveType
== cssURI
)
552 // If the element is checked
555 // If the style sheet should be toggled
558 node
.style
.MozOutline
= "1px solid #ff0000";
562 node
.style
.MozOutline
= "1px solid #0000ff";
567 webdeveloper_removeElementOutline(node
);
573 // If the style sheet should be toggled
576 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/empty.css", "webdeveloper-outline-background-images");
580 // Outlines all the images with adjusted dimensions
581 function webdeveloper_outlineImagesWithAdjustedDimensions(element
)
583 var checked
= element
.getAttribute("checked");
584 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
585 var documentLength
= documentList
.length
;
586 var imageElement
= null;
587 var imageElementList
= null;
588 var imageElementsLength
= null;
589 var naturalHeight
= null;
590 var naturalWidth
= null;
591 var pageDocument
= null;
593 // Loop through the documents
594 for(var i
= 0; i
< documentLength
; i
++)
596 pageDocument
= documentList
[i
];
597 imageElementList
= pageDocument
.images
;
598 imageElementsLength
= imageElementList
.length
;
600 // Loop through all the img tags
601 for(var j
= 0; j
< imageElementsLength
; j
++)
603 imageElement
= imageElementList
[j
];
604 naturalHeight
= imageElement
.naturalHeight
;
605 naturalWidth
= imageElement
.naturalWidth
;
610 // If the width or height has been adjusted
611 if((naturalWidth
&& imageElement
.hasAttribute("width") && imageElement
.getAttribute("width") != naturalWidth
)
612 || (naturalHeight
&& imageElement
.hasAttribute("height") && imageElement
.getAttribute("height") != naturalHeight
))
614 imageElement
.className
+= " webdeveloper-adjusted-image";
617 else if(imageElement
.className
.indexOf("webdeveloper-adjusted-image") != -1)
619 imageElement
.className
= webdeveloper_removeSubstring(imageElement
.className
, "webdeveloper-adjusted-image");
624 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_images_with_adjusted_dimensions.css", "webdeveloper-outline-images-with-adjusted-dimensions");
627 // Outlines all the images with oversized dimensions
628 function webdeveloper_outlineImagesWithOversizedDimensions(element
)
630 var checked
= element
.getAttribute("checked");
631 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
632 var documentLength
= documentList
.length
;
633 var imageElement
= null;
634 var imageElementList
= null;
635 var imageElementsLength
= null;
636 var naturalHeight
= null;
637 var naturalWidth
= null;
638 var pageDocument
= null;
640 // Loop through the documents
641 for(var i
= 0; i
< documentLength
; i
++)
643 pageDocument
= documentList
[i
];
644 imageElementList
= pageDocument
.images
;
645 imageElementsLength
= imageElementList
.length
;
647 // Loop through all the img tags
648 for(var j
= 0; j
< imageElementsLength
; j
++)
650 imageElement
= imageElementList
[j
];
651 naturalHeight
= imageElement
.naturalHeight
;
652 naturalWidth
= imageElement
.naturalWidth
;
657 // If the width or height has been oversized
658 if((naturalWidth
&& imageElement
.hasAttribute("width") && imageElement
.getAttribute("width") > naturalWidth
)
659 || (naturalHeight
&& imageElement
.hasAttribute("height") && imageElement
.getAttribute("height") > naturalHeight
))
661 imageElement
.className
+= " webdeveloper-oversized-image";
664 else if(imageElement
.className
.indexOf("webdeveloper-oversized-image") != -1)
666 imageElement
.className
= webdeveloper_removeSubstring(imageElement
.className
, "webdeveloper-oversized-image");
671 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_images_with_oversized_dimensions.css", "webdeveloper-outline-images-with-oversized-dimensions");
674 // Outlines all the images with empty alt attributes
675 function webdeveloper_outlineImagesWithEmptyAltAttributes(element
)
677 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_images_with_empty_alt_attributes.css", "webdeveloper-outline-images-with-empty-alt-attributes");
680 // Outlines all the images without alt attributes
681 function webdeveloper_outlineImagesWithoutAltAttributes(element
)
683 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_images_without_alt_attributes.css", "webdeveloper-outline-images-without-alt-attributes");
686 // Outlines all the images without dimensions
687 function webdeveloper_outlineImagesWithoutDimensions(element
)
689 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_images_without_dimensions.css", "webdeveloper-outline-images-without-dimensions");
692 // Outlines all the images without title attributes
693 function webdeveloper_outlineImagesWithoutTitleAttributes(element
)
695 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/outline_images_without_title_attributes.css", "webdeveloper-outline-images-without-title-attributes");
698 // Replaces all images with their alt attributes
699 function webdeveloper_replaceImagesWithAltAttributes(element
)
701 var altAttribute
= null;
702 var checked
= element
.getAttribute("checked");
703 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
704 var documentLength
= documentList
.length
;
705 var imageElement
= null;
706 var imageElementList
= null;
707 var imageElementsLength
= null;
708 var pageDocument
= null;
709 var previousElement
= null;
710 var spanElement
= null;
712 // Loop through the documents
713 for(var i
= 0; i
< documentLength
; i
++)
715 pageDocument
= documentList
[i
];
717 // Need to do this to stop the feature running twice
718 webdeveloper_removeAllElementsByXPath(pageDocument
, "//span[@class='webdeveloper-replace-images-with-alt-attributes']");
720 // If the element is checked
723 imageElementList
= pageDocument
.images
;
724 imageElementsLength
= imageElementList
.length
;
726 // Loop through all the img tags
727 for(var j
= 0; j
< imageElementsLength
; j
++)
729 imageElement
= imageElementList
[j
];
730 altAttribute
= imageElement
.getAttribute("alt");
731 spanElement
= pageDocument
.createElement("span");
733 // If the alt attribute is set
736 spanElement
.setAttribute("class", "webdeveloper-replace-images-with-alt-attributes");
737 spanElement
.appendChild(pageDocument
.createTextNode(altAttribute
));
738 imageElement
.parentNode
.insertBefore(spanElement
, imageElement
);
744 webdeveloper_hideImages(element
, "webdeveloper-replace-images-with-alt-attributes");
747 // Toggles external site images
748 function webdeveloper_toggleExternalSiteImages(element
)
750 var imageBehavior
= 1;
751 var legacyImageBehavior
= 0;
753 // If disabling external images
754 if(element
.getAttribute("checked"))
757 legacyImageBehavior
= 1;
760 webdeveloper_setIntegerPreference("network.image.imageBehavior", legacyImageBehavior
);
761 webdeveloper_setIntegerPreference("permissions.default.image", imageBehavior
);
765 // Toggles image animations
766 function webdeveloper_toggleImageAnimations(element
)
768 var imageBehavior
= "normal";
770 // If disabling images
771 if(element
.getAttribute("checked"))
773 imageBehavior
= "none";
776 webdeveloper_setStringPreference("image.animation_mode", imageBehavior
);
781 function webdeveloper_toggleImages(element
)
783 var imageBehavior
= 1;
784 var legacyImageBehavior
= 0;
786 // If disabling images
787 if(element
.getAttribute("checked"))
790 legacyImageBehavior
= 2;
793 webdeveloper_setIntegerPreference("network.image.imageBehavior", legacyImageBehavior
);
794 webdeveloper_setIntegerPreference("permissions.default.image", imageBehavior
);
798 // Updates the disable images menu
799 function webdeveloper_updateDisableImagesMenu(suffix
)
802 var disableExternalSiteImagesChecked
= false;
803 var disableExternalSiteImagesMenu
= document
.getElementById("webdeveloper-disable-external-site-images-" + suffix
);
804 var disableImagesChecked
= false;
805 var disableImagesPreferenceValue
= webdeveloper_getIntegerPreference("permissions.default.image", true);
807 // If the image preference value is set to 2
808 if(disableImagesPreferenceValue
== 2)
810 disableImagesChecked
= true;
812 else if(disableImagesPreferenceValue
== 3)
814 disableExternalSiteImagesChecked
= true;
817 // If the image animation preference is set to none
818 if(webdeveloper_getStringPreference("image.animation_mode", false) == "none")
823 webdeveloper_configureElement(document
.getElementById("webdeveloper-disable-all-images-" + suffix
), "checked", disableImagesChecked
);
824 webdeveloper_configureElement(disableExternalSiteImagesMenu
, "checked", disableExternalSiteImagesChecked
);
825 webdeveloper_configureElement(disableExternalSiteImagesMenu
, "disabled", disableImagesChecked
);
826 webdeveloper_configureElement(document
.getElementById("webdeveloper-disable-image-animations-" + suffix
), "checked", checked
);
829 // Updates the images menu
830 function webdeveloper_updateImagesMenu(suffix
)
832 var disableImagesChecked
= false;
833 var disableImagesPreferenceValue
= webdeveloper_getIntegerPreference("permissions.default.image", true);
835 // If the image preference value is set to 2
836 if(disableImagesPreferenceValue
== 2)
838 disableImagesChecked
= true;
841 webdeveloper_configureElement(document
.getElementById("webdeveloper-find-broken-images-" + suffix
), "disabled", disableImagesChecked
);
842 webdeveloper_configureElement(document
.getElementById("webdeveloper-hide-background-images-" + suffix
), "disabled", disableImagesChecked
);
843 webdeveloper_configureElement(document
.getElementById("webdeveloper-hide-images-" + suffix
), "disabled", disableImagesChecked
);
844 webdeveloper_configureElement(document
.getElementById("webdeveloper-make-images-full-size-" + suffix
), "disabled", disableImagesChecked
);
845 webdeveloper_configureElement(document
.getElementById("webdeveloper-make-images-invisible-" + suffix
), "disabled", disableImagesChecked
);
846 webdeveloper_configureElement(document
.getElementById("webdeveloper-view-image-information-" + suffix
), "disabled", disableImagesChecked
);
847 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-display-alt-attributes-" + suffix
), "checked", "webdeveloper-display-alt-attributes");
848 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-display-image-dimensions-" + suffix
), "checked", "webdeveloper-display-image-dimensions");
849 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-display-image-file-sizes-" + suffix
), "checked", "webdeveloper-display-image-file-sizes");
850 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-display-image-paths-" + suffix
), "checked", "webdeveloper-display-image-paths");
851 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-hide-background-images-" + suffix
), "checked", "webdeveloper-hide-background-images");
852 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-hide-images-" + suffix
), "checked", "webdeveloper-hide-images");
853 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-make-images-invisible-" + suffix
), "checked", "webdeveloper-make-images-invisible");
854 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-replace-images-with-alt-attributes-" + suffix
), "checked", "webdeveloper-replace-images-with-alt-attributes");
857 // Updates the outline images menu
858 function webdeveloper_updateOutlineImagesMenu(suffix
)
860 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-all-images-" + suffix
), "checked", "webdeveloper-outline-all-images");
861 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-background-images-" + suffix
), "checked", "webdeveloper-outline-background-images");
862 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-images-with-adjusted-dimensions-" + suffix
), "checked", "webdeveloper-outline-images-with-adjusted-dimensions");
863 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-images-with-empty-alt-attributes-" + suffix
), "checked", "webdeveloper-outline-images-with-empty-alt-attributes");
864 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-images-without-alt-attributes-" + suffix
), "checked", "webdeveloper-outline-images-without-alt-attributes");
865 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-images-without-dimensions-" + suffix
), "checked", "webdeveloper-outline-images-without-dimensions");
866 webdeveloper_configureElementByAppliedStyle(document
.getElementById("webdeveloper-outline-images-without-title-attributes-" + suffix
), "checked", "webdeveloper-outline-images-without-title-attributes");
869 // Displays all the images for the page
870 function webdeveloper_viewImageInformation()
872 var cellDataElement
= null;
873 var cellHeaderElement
= null;
874 var divElement
= null;
875 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
876 var documentLength
= documentList
.length
;
877 var documentURL
= null;
881 var imageElement
= null;
882 var imageLength
= null;
883 var imageList
= new Array();
885 var linkElement
= null;
886 var oldTab
= getBrowser().selectedTab
;
887 var oldURL
= getBrowser().currentURI
.spec
;
888 var generatedDocument
= webdeveloper_generateDocument("");
889 var bodyElement
= webdeveloper_getDocumentBodyElement(generatedDocument
);
890 var headElement
= webdeveloper_getDocumentHeadElement(generatedDocument
);
891 var headerElement
= generatedDocument
.createElement("h1");
892 var pageDocument
= null;
894 var scriptElement
= generatedDocument
.createElement("script");
896 var spanElement
= null;
897 var stringBundle
= document
.getElementById("webdeveloper-string-bundle");
898 var title
= stringBundle
.getFormattedString("webdeveloper_viewImageInformationTitle", [oldURL
]);
899 var tableElement
= null;
900 var tableRowElement
= null;
903 generatedDocument
.title
= title
;
905 webdeveloper_addGeneratedStyles(generatedDocument
);
907 headerElement
.appendChild(generatedDocument
.createTextNode(title
));
908 bodyElement
.appendChild(headerElement
);
910 webdeveloper_addGeneratedTools(generatedDocument
);
912 // Loop through the documents
913 for(var i
= 0; i
< documentLength
; i
++)
915 divElement
= generatedDocument
.createElement("div");
916 headerElement
= generatedDocument
.createElement("h2");
917 linkElement
= generatedDocument
.createElement("a");
918 pageDocument
= documentList
[i
];
919 documentURL
= pageDocument
.documentURI
;
920 imageList
= webdeveloper_getImagesForDocument(pageDocument
, true, true);
921 spanElement
= generatedDocument
.createElement("span");
923 linkElement
.setAttribute("href", documentURL
);
924 linkElement
.appendChild(generatedDocument
.createTextNode(documentURL
));
925 headerElement
.appendChild(linkElement
);
926 bodyElement
.appendChild(headerElement
);
928 // If the tidy information preference is set
929 if(webdeveloper_getBooleanPreference("webdeveloper.information.tidy", true))
931 imageList
= webdeveloper_tidyImages(imageList
);
934 headerElement
= generatedDocument
.createElement("h3");
935 imageLength
= imageList
.length
;
937 spanElement
.setAttribute("class", "expanded pivot");
938 headerElement
.appendChild(spanElement
);
940 // If there is one image
943 headerElement
.appendChild(generatedDocument
.createTextNode(imageLength
+ " " + stringBundle
.getString("webdeveloper_image").toLowerCase()));
947 headerElement
.appendChild(generatedDocument
.createTextNode(imageLength
+ " " + stringBundle
.getString("webdeveloper_images").toLowerCase()));
950 bodyElement
.appendChild(headerElement
);
952 // Loop through the images
953 for(var j
= 0; j
< imageLength
; j
++)
955 image
= imageList
[j
];
956 height
= image
.naturalHeight
;
957 imageElement
= generatedDocument
.createElement("img");
958 imageSrc
= image
.src
;
959 fileSize
= webdeveloper_getFileSize(imageSrc
);
960 pElement
= generatedDocument
.createElement("p");
962 tableElement
= generatedDocument
.createElement("table");
963 width
= image
.naturalWidth
;
965 imageElement
.setAttribute("src", imageSrc
);
966 pElement
.appendChild(imageElement
);
967 divElement
.appendChild(pElement
);
970 cellDataElement
= generatedDocument
.createElement("td");
971 cellHeaderElement
= generatedDocument
.createElement("th");
972 linkElement
= generatedDocument
.createElement("a");
973 tableRowElement
= generatedDocument
.createElement("tr");
975 cellHeaderElement
.appendChild(generatedDocument
.createTextNode(stringBundle
.getString("webdeveloper_src")));
976 tableRowElement
.appendChild(cellHeaderElement
);
977 linkElement
.setAttribute("href", imageSrc
);
978 linkElement
.appendChild(generatedDocument
.createTextNode(imageSrc
));
979 cellDataElement
.appendChild(linkElement
);
980 tableRowElement
.appendChild(cellDataElement
);
981 tableElement
.appendChild(tableRowElement
);
983 // If there is a width
986 cellDataElement
= generatedDocument
.createElement("td");
987 cellHeaderElement
= generatedDocument
.createElement("th");
988 tableRowElement
= generatedDocument
.createElement("tr");
990 cellHeaderElement
.appendChild(generatedDocument
.createTextNode(stringBundle
.getString("webdeveloper_width")));
991 tableRowElement
.appendChild(cellHeaderElement
);
992 cellDataElement
.setAttribute("class", "shaded");
993 cellDataElement
.appendChild(generatedDocument
.createTextNode(width
));
994 tableRowElement
.appendChild(cellDataElement
);
995 tableElement
.appendChild(tableRowElement
);
998 // If there is a height
1001 cellDataElement
= generatedDocument
.createElement("td");
1002 cellHeaderElement
= generatedDocument
.createElement("th");
1004 tableRowElement
= generatedDocument
.createElement("tr");
1006 // If this cell should be shaded
1009 cellDataElement
.setAttribute("class", "shaded");
1012 cellHeaderElement
.appendChild(generatedDocument
.createTextNode(stringBundle
.getString("webdeveloper_height")));
1013 tableRowElement
.appendChild(cellHeaderElement
);
1014 cellDataElement
.appendChild(generatedDocument
.createTextNode(height
));
1015 tableRowElement
.appendChild(cellDataElement
);
1016 tableElement
.appendChild(tableRowElement
);
1019 // If there is a file size
1022 cellDataElement
= generatedDocument
.createElement("td");
1023 cellHeaderElement
= generatedDocument
.createElement("th");
1025 tableRowElement
= generatedDocument
.createElement("tr");
1027 // If this cell should be shaded
1030 cellDataElement
.setAttribute("class", "shaded");
1033 cellHeaderElement
.appendChild(generatedDocument
.createTextNode(stringBundle
.getString("webdeveloper_fileSize")));
1034 tableRowElement
.appendChild(cellHeaderElement
);
1035 cellDataElement
.appendChild(generatedDocument
.createTextNode(webdeveloper_formatFileSize(fileSize
)));
1036 tableRowElement
.appendChild(cellDataElement
);
1037 tableElement
.appendChild(tableRowElement
);
1040 // If there is an alt attribute
1041 if(image
.hasAttribute("alt"))
1043 cellDataElement
= generatedDocument
.createElement("td");
1044 cellHeaderElement
= generatedDocument
.createElement("th");
1046 tableRowElement
= generatedDocument
.createElement("tr");
1048 // If this cell should be shaded
1051 cellDataElement
.setAttribute("class", "shaded");
1054 cellHeaderElement
.appendChild(generatedDocument
.createTextNode(stringBundle
.getString("webdeveloper_alt")));
1055 tableRowElement
.appendChild(cellHeaderElement
);
1056 cellDataElement
.appendChild(generatedDocument
.createTextNode(image
.getAttribute("alt")));
1057 tableRowElement
.appendChild(cellDataElement
);
1058 tableElement
.appendChild(tableRowElement
);
1061 // If there is a title attribute
1062 if(image
.hasAttribute("title"))
1064 cellDataElement
= generatedDocument
.createElement("td");
1065 cellHeaderElement
= generatedDocument
.createElement("th");
1067 tableRowElement
= generatedDocument
.createElement("tr");
1069 // If this cell should be shaded
1072 cellDataElement
.setAttribute("class", "shaded");
1075 cellHeaderElement
.appendChild(generatedDocument
.createTextNode(stringBundle
.getString("webdeveloper_title")));
1076 tableRowElement
.appendChild(cellHeaderElement
);
1077 cellDataElement
.appendChild(generatedDocument
.createTextNode(image
.getAttribute("title")));
1078 tableRowElement
.appendChild(cellDataElement
);
1079 tableElement
.appendChild(tableRowElement
);
1082 divElement
.appendChild(tableElement
);
1083 divElement
.appendChild(generatedDocument
.createElement("hr"));
1086 divElement
.setAttribute("class", "output");
1087 bodyElement
.appendChild(divElement
);
1090 scriptElement
.setAttribute("defer", "defer");
1091 scriptElement
.setAttribute("src", "chrome://webdeveloper/content/common/xpath.js");
1092 scriptElement
.setAttribute("type", "text/javascript");
1093 headElement
.appendChild(scriptElement
);
1095 scriptElement
= generatedDocument
.createElement("script");
1097 scriptElement
.setAttribute("defer", "defer");
1098 scriptElement
.setAttribute("src", "chrome://webdeveloper/content/generated/output_pivot.js");
1099 scriptElement
.setAttribute("type", "text/javascript");
1100 headElement
.appendChild(scriptElement
);
1102 // If the open tabs in background preference is set to true
1103 if(webdeveloper_getBooleanPreference("webdeveloper.open.tabs.background", true))
1105 getBrowser().selectedTab
= oldTab
;