git-svn-id: svn://euphorik.ch/pompage@45 02bbb61a-6d21-0410-aba0-cb053bdfd66a
[pompage.git] / doc / webdeveloper / images.js
1 // Displays all alt attributes
2 function webdeveloper_displayAltAttributes(element)
3 {
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;
12 var text = null;
13
14 // Loop through the documents
15 for(var i = 0; i < documentLength; i++)
16 {
17 pageDocument = documentList[i];
18
19 // Need to do this to stop the feature running twice
20 webdeveloper_removeAllElementsByXPath(pageDocument, "//span[@class='webdeveloper-display-alt-attributes']");
21
22 // If the element is checked
23 if(checked)
24 {
25 imageElementList = pageDocument.images;
26 imageElementsLength = imageElementList.length;
27
28 // Loop through all the image elements
29 for(var j = 0; j < imageElementsLength; j++)
30 {
31 imageElement = imageElementList[j];
32
33 // If the alt attribute is set
34 if(imageElement.hasAttribute("alt"))
35 {
36 spanElement = pageDocument.createElement("span");
37 text = "Alt=" + imageElement.getAttribute("alt");
38
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);
43 }
44 }
45 }
46 }
47
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");
50 }
51
52 // Displays all image dimensions
53 function webdeveloper_displayImageDimensions(element)
54 {
55 var checked = element.getAttribute("checked");
56 var dimensions = null;
57 var documentList = webdeveloper_getDocuments(webdeveloper_getContentWindow());
58 var documentLength = documentList.length;
59 var height = null;
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");
67 var width = null;
68 var widthText = stringBundle.getString("webdeveloper_width");
69
70 // Loop through the documents
71 for(var i = 0; i < documentLength; i++)
72 {
73 pageDocument = documentList[i];
74
75 // Need to do this to stop the feature running twice
76 webdeveloper_removeAllElementsByXPath(pageDocument, "//span[@class='webdeveloper-display-image-dimensions']");
77
78 // If the element is checked
79 if(checked)
80 {
81 imageElementList = pageDocument.images;
82 imageElementsLength = imageElementList.length;
83
84 // Loop through all the image elements
85 for(var j = 0; j < imageElementsLength; j++)
86 {
87 dimensions = null;
88 imageElement = imageElementList[j];
89 height = imageElement.height;
90 width = imageElement.width;
91
92 // If the width and height are set
93 if(width && height)
94 {
95 dimensions = width + "x" + height;
96 }
97 else if(width)
98 {
99 dimensions = widthText + "=" + width;
100 }
101 else if(height)
102 {
103 dimensions = heightText + "=" + height;
104 }
105
106 // If the dimensions are set
107 if(dimensions)
108 {
109 spanElement = pageDocument.createElement("span");
110
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);
115 }
116
117 height = null;
118 width = null;
119 }
120 }
121 }
122
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");
125 }
126
127 // Displays all image file sizes
128 function webdeveloper_displayImageFileSizes(element)
129 {
130 var checked = element.getAttribute("checked");
131 var documentList = webdeveloper_getDocuments(webdeveloper_getContentWindow());
132 var documentLength = documentList.length;
133 var fileSize = null;
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");
141 var text = null;
142
143 // Loop through the documents
144 for(var i = 0; i < documentLength; i++)
145 {
146 pageDocument = documentList[i];
147
148 // Need to do this to stop the feature running twice
149 webdeveloper_removeAllElementsByXPath(pageDocument, "//span[@class='webdeveloper-display-image-file-sizes']");
150
151 // If the element is checked
152 if(checked)
153 {
154 imageElementList = pageDocument.images;
155 imageElementsLength = imageElementList.length;
156
157 // Loop through all the image elements
158 for(var j = 0; j < imageElementsLength; j++)
159 {
160 imageElement = imageElementList[j];
161 fileSize = webdeveloper_getFileSize(imageElement.src);
162
163 // If there is a file size
164 if(fileSize)
165 {
166 spanElement = pageDocument.createElement("span");
167 text = fileSizeText + "=" + webdeveloper_formatFileSize(fileSize);
168
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);
173 }
174 }
175 }
176 }
177
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");
180 }
181
182 // Displays all image paths
183 function webdeveloper_displayImagePaths(element)
184 {
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;
193 var src = null;
194 var stringBundle = document.getElementById("webdeveloper-string-bundle");
195 var srcText = stringBundle.getString("webdeveloper_src");
196 var text = null;
197
198 // Loop through the documents
199 for(var i = 0; i < documentLength; i++)
200 {
201 pageDocument = documentList[i];
202
203 // Need to do this to stop the feature running twice
204 webdeveloper_removeAllElementsByXPath(pageDocument, "//span[@class='webdeveloper-display-image-paths']");
205
206 // If the element is checked
207 if(checked)
208 {
209 imageElementList = pageDocument.images;
210 imageElementsLength = imageElementList.length;
211
212 // Loop through all the image elements
213 for(var j = 0; j < imageElementsLength; j++)
214 {
215 imageElement = imageElementList[j];
216 spanElement = pageDocument.createElement("span");
217 src = imageElement.getAttribute("src");
218
219 // If the src is set
220 if(src)
221 {
222 text = srcText + "=" + src;
223
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);
228 }
229 }
230 }
231 }
232
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");
235 }
236
237 // Finds all the broken images on the page
238 function webdeveloper_findBrokenImages()
239 {
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;
245 var image = null;
246 var imageLength = null;
247 var imageList = null;
248 var imageSrc = 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;
259 var pElement = 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]);
264
265 generatedDocument.title = title;
266
267 webdeveloper_addGeneratedStyles(generatedDocument);
268
269 headerElement.appendChild(generatedDocument.createTextNode(title));
270 bodyElement.appendChild(headerElement);
271
272 webdeveloper_addGeneratedTools(generatedDocument);
273
274 // Loop through the documents
275 for(var i = 0; i < documentLength; i++)
276 {
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");
286
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);
293
294 // Loop through all the images
295 for(var j = 0; j < imageLength; j++)
296 {
297 image = imageList[j];
298 imageSrc = image.src;
299
300 // If the image is broken
301 if(!image.naturalWidth && !image.naturalHeight)
302 {
303 listItemElement = generatedDocument.createElement("li");
304 linkElement = generatedDocument.createElement("a");
305
306 linkElement.setAttribute("href", imageSrc);
307 linkElement.appendChild(generatedDocument.createTextNode(imageSrc));
308 listItemElement.appendChild(linkElement);
309 listElement.appendChild(listItemElement);
310 }
311 }
312
313 // If there are no broken images
314 if(listElement.hasChildNodes())
315 {
316 divElement.appendChild(listElement);
317 }
318 else
319 {
320 pElement = generatedDocument.createElement("p");
321
322 pElement.appendChild(generatedDocument.createTextNode(stringBundle.getString("webdeveloper_noBrokenImages")));
323 divElement.appendChild(pElement);
324 }
325
326 divElement.setAttribute("class", "output");
327 bodyElement.appendChild(divElement);
328 }
329
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);
334
335 scriptElement = generatedDocument.createElement("script");
336
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);
341
342 // If the open tabs in background preference is set to true
343 if(webdeveloper_getBooleanPreference("webdeveloper.open.tabs.background", true))
344 {
345 getBrowser().selectedTab = oldTab;
346 }
347 }
348
349 // Hides/shows all background images
350 function webdeveloper_hideBackgroundImages(element)
351 {
352 webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/hide_background_images.css", "webdeveloper-hide-background-images");
353 }
354
355 // Hides/shows all the images
356 function webdeveloper_hideImages(element, id)
357 {
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;
365
366 // Loop through the documents
367 for(var i = 0; i < documentLength; i++)
368 {
369 pageDocument = documentList[i];
370 inputElementList = pageDocument.getElementsByTagName("input");
371 inputElementsLength = inputElementList.length;
372
373 // Loop through all the input tags
374 for(var j = 0; j < inputElementsLength; j++)
375 {
376 inputElement = inputElementList[j];
377
378 // If hiding images and the element is an image
379 if(hide && inputElement.hasAttribute("type") && inputElement.getAttribute("type").toLowerCase() == "image")
380 {
381 inputElement.className += " webdeveloper-image";
382
383 inputElement.setAttribute("type", "submit");
384 }
385 else if(inputElement.className.indexOf("webdeveloper-image") != -1)
386 {
387 inputElement.className = webdeveloper_removeSubstring(inputElement.className, "webdeveloper-image");
388
389 inputElement.setAttribute("type", "image");
390 }
391 else
392 {
393 // This stops the fields reordering
394 inputElement.setAttribute("type", inputElement.getAttribute("type"));
395 }
396 }
397 }
398
399 webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/hide_images.css", id);
400 }
401
402 // Makes all the images full size
403 function webdeveloper_makeImagesFullSize()
404 {
405 var documentList = webdeveloper_getDocuments(webdeveloper_getContentWindow());
406 var documentLength = documentList.length;
407 var image = null;
408 var imageLength = null;
409 var imageList = null;
410 var pageDocument = null;
411
412 // Loop through the documents
413 for(var i = 0; i < documentLength; i++)
414 {
415 pageDocument = documentList[i];
416 imageList = pageDocument.images;
417 imageLength = imageList.length;
418
419 // Loop through all the images
420 for(var j = 0; j < imageLength; j++)
421 {
422 image = imageList[j];
423
424 // If the image width is set
425 if(image.hasAttribute("width"))
426 {
427 image.removeAttribute("width");
428 }
429
430 // If the image height is set
431 if(image.hasAttribute("height"))
432 {
433 image.removeAttribute("height");
434 }
435 }
436 }
437 }
438
439 // Makes all the images invisible
440 function webdeveloper_makeImagesInvisible(element, id)
441 {
442 var documentList = webdeveloper_getDocuments(webdeveloper_getContentWindow());
443 var documentLength = documentList.length;
444 var image = null;
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;
452
453 // Loop through the documents
454 for(var i = 0; i < documentLength; i++)
455 {
456 pageDocument = documentList[i];
457 imageList = pageDocument.images;
458 imageLength = imageList.length;
459 inputElementList = pageDocument.getElementsByTagName("input");
460 inputElementsLength = inputElementList.length;
461
462 // Loop through all the input tags
463 for(var j = 0; j < inputElementsLength; j++)
464 {
465 inputElement = inputElementList[j];
466
467 // If making images invisible and the element is an image
468 if(invisible && inputElement.hasAttribute("type") && inputElement.getAttribute("type").toLowerCase() == "image")
469 {
470 inputElement.className += " webdeveloper-image";
471
472 inputElement.setAttribute("type", "submit");
473 }
474 else if(inputElement.className.indexOf("webdeveloper-image") != -1)
475 {
476 inputElement.className = webdeveloper_removeSubstring(inputElement.className, "webdeveloper-image");
477
478 inputElement.setAttribute("type", "image");
479 }
480 else
481 {
482 // This stops the fields reordering
483 inputElement.setAttribute("type", inputElement.getAttribute("type"));
484 }
485 }
486
487 // Loop through all the images
488 for(j = 0; j < imageLength; j++)
489 {
490 image = imageList[j];
491
492 // If making images invisible
493 if(invisible)
494 {
495 // If the image width is not set and the image is not broken
496 if(!image.hasAttribute("width") && image.naturalWidth)
497 {
498 image.setAttribute("width", image.naturalWidth);
499 }
500
501 // If the image height is not set and the image is not broken
502 if(!image.hasAttribute("height") && image.naturalHeight)
503 {
504 image.setAttribute("height", image.naturalHeight);
505 }
506
507 image.setAttribute("src", "chrome://webdeveloper/content/images/spacer.gif?" + image.getAttribute("src"));
508 }
509 else
510 {
511 image.setAttribute("src", webdeveloper_removeSubstring(image.getAttribute("src"), "chrome://webdeveloper/content/images/spacer.gif?"));
512 }
513 }
514 }
515
516 webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/make_images_invisible.css", id);
517 }
518
519 // Outlines all images
520 function webdeveloper_outlineAllImages(element)
521 {
522 webdeveloper_outlineBackgroundImages(element, false);
523 webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_all_images.css", "webdeveloper-outline-all-images");
524 }
525
526 // Outlines all background images
527 function webdeveloper_outlineBackgroundImages(element, toggleStyleSheet)
528 {
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;
534 var node = null;
535 var pageDocument = null;
536 var treeWalker = null;
537
538 // Loop through the documents
539 for(var i = 0; i < documentLength; i++)
540 {
541 pageDocument = documentList[i];
542 treeWalker = pageDocument.createTreeWalker(webdeveloper_getDocumentBodyElement(pageDocument), NodeFilter.SHOW_ELEMENT, null, false);
543
544 // While the tree walker has more nodes
545 while((node = treeWalker.nextNode()) != null)
546 {
547 backgroundImage = node.ownerDocument.defaultView.getComputedStyle(node, null).getPropertyCSSValue("background-image");
548
549 // If this element has a background image and it is a URL
550 if(backgroundImage && backgroundImage.primitiveType == cssURI)
551 {
552 // If the element is checked
553 if(checked)
554 {
555 // If the style sheet should be toggled
556 if(toggleStyleSheet)
557 {
558 node.style.MozOutline = "1px solid #ff0000";
559 }
560 else
561 {
562 node.style.MozOutline = "1px solid #0000ff";
563 }
564 }
565 else
566 {
567 webdeveloper_removeElementOutline(node);
568 }
569 }
570 }
571 }
572
573 // If the style sheet should be toggled
574 if(toggleStyleSheet)
575 {
576 webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/empty.css", "webdeveloper-outline-background-images");
577 }
578 }
579
580 // Outlines all the images with adjusted dimensions
581 function webdeveloper_outlineImagesWithAdjustedDimensions(element)
582 {
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;
592
593 // Loop through the documents
594 for(var i = 0; i < documentLength; i++)
595 {
596 pageDocument = documentList[i];
597 imageElementList = pageDocument.images;
598 imageElementsLength = imageElementList.length;
599
600 // Loop through all the img tags
601 for(var j = 0; j < imageElementsLength; j++)
602 {
603 imageElement = imageElementList[j];
604 naturalHeight = imageElement.naturalHeight;
605 naturalWidth = imageElement.naturalWidth;
606
607 // If outlining
608 if(checked)
609 {
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))
613 {
614 imageElement.className += " webdeveloper-adjusted-image";
615 }
616 }
617 else if(imageElement.className.indexOf("webdeveloper-adjusted-image") != -1)
618 {
619 imageElement.className = webdeveloper_removeSubstring(imageElement.className, "webdeveloper-adjusted-image");
620 }
621 }
622 }
623
624 webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_with_adjusted_dimensions.css", "webdeveloper-outline-images-with-adjusted-dimensions");
625 }
626
627 // Outlines all the images with oversized dimensions
628 function webdeveloper_outlineImagesWithOversizedDimensions(element)
629 {
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;
639
640 // Loop through the documents
641 for(var i = 0; i < documentLength; i++)
642 {
643 pageDocument = documentList[i];
644 imageElementList = pageDocument.images;
645 imageElementsLength = imageElementList.length;
646
647 // Loop through all the img tags
648 for(var j = 0; j < imageElementsLength; j++)
649 {
650 imageElement = imageElementList[j];
651 naturalHeight = imageElement.naturalHeight;
652 naturalWidth = imageElement.naturalWidth;
653
654 // If outlining
655 if(checked)
656 {
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))
660 {
661 imageElement.className += " webdeveloper-oversized-image";
662 }
663 }
664 else if(imageElement.className.indexOf("webdeveloper-oversized-image") != -1)
665 {
666 imageElement.className = webdeveloper_removeSubstring(imageElement.className, "webdeveloper-oversized-image");
667 }
668 }
669 }
670
671 webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_with_oversized_dimensions.css", "webdeveloper-outline-images-with-oversized-dimensions");
672 }
673
674 // Outlines all the images with empty alt attributes
675 function webdeveloper_outlineImagesWithEmptyAltAttributes(element)
676 {
677 webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_with_empty_alt_attributes.css", "webdeveloper-outline-images-with-empty-alt-attributes");
678 }
679
680 // Outlines all the images without alt attributes
681 function webdeveloper_outlineImagesWithoutAltAttributes(element)
682 {
683 webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_without_alt_attributes.css", "webdeveloper-outline-images-without-alt-attributes");
684 }
685
686 // Outlines all the images without dimensions
687 function webdeveloper_outlineImagesWithoutDimensions(element)
688 {
689 webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_without_dimensions.css", "webdeveloper-outline-images-without-dimensions");
690 }
691
692 // Outlines all the images without title attributes
693 function webdeveloper_outlineImagesWithoutTitleAttributes(element)
694 {
695 webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_without_title_attributes.css", "webdeveloper-outline-images-without-title-attributes");
696 }
697
698 // Replaces all images with their alt attributes
699 function webdeveloper_replaceImagesWithAltAttributes(element)
700 {
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;
711
712 // Loop through the documents
713 for(var i = 0; i < documentLength; i++)
714 {
715 pageDocument = documentList[i];
716
717 // Need to do this to stop the feature running twice
718 webdeveloper_removeAllElementsByXPath(pageDocument, "//span[@class='webdeveloper-replace-images-with-alt-attributes']");
719
720 // If the element is checked
721 if(checked)
722 {
723 imageElementList = pageDocument.images;
724 imageElementsLength = imageElementList.length;
725
726 // Loop through all the img tags
727 for(var j = 0; j < imageElementsLength; j++)
728 {
729 imageElement = imageElementList[j];
730 altAttribute = imageElement.getAttribute("alt");
731 spanElement = pageDocument.createElement("span");
732
733 // If the alt attribute is set
734 if(altAttribute)
735 {
736 spanElement.setAttribute("class", "webdeveloper-replace-images-with-alt-attributes");
737 spanElement.appendChild(pageDocument.createTextNode(altAttribute));
738 imageElement.parentNode.insertBefore(spanElement, imageElement);
739 }
740 }
741 }
742 }
743
744 webdeveloper_hideImages(element, "webdeveloper-replace-images-with-alt-attributes");
745 }
746
747 // Toggles external site images
748 function webdeveloper_toggleExternalSiteImages(element)
749 {
750 var imageBehavior = 1;
751 var legacyImageBehavior = 0;
752
753 // If disabling external images
754 if(element.getAttribute("checked"))
755 {
756 imageBehavior = 3;
757 legacyImageBehavior = 1;
758 }
759
760 webdeveloper_setIntegerPreference("network.image.imageBehavior", legacyImageBehavior);
761 webdeveloper_setIntegerPreference("permissions.default.image", imageBehavior);
762 BrowserReload();
763 }
764
765 // Toggles image animations
766 function webdeveloper_toggleImageAnimations(element)
767 {
768 var imageBehavior = "normal";
769
770 // If disabling images
771 if(element.getAttribute("checked"))
772 {
773 imageBehavior = "none";
774 }
775
776 webdeveloper_setStringPreference("image.animation_mode", imageBehavior);
777 BrowserReload();
778 }
779
780 // Toggles images
781 function webdeveloper_toggleImages(element)
782 {
783 var imageBehavior = 1;
784 var legacyImageBehavior = 0;
785
786 // If disabling images
787 if(element.getAttribute("checked"))
788 {
789 imageBehavior = 2;
790 legacyImageBehavior = 2;
791 }
792
793 webdeveloper_setIntegerPreference("network.image.imageBehavior", legacyImageBehavior);
794 webdeveloper_setIntegerPreference("permissions.default.image", imageBehavior);
795 BrowserReload();
796 }
797
798 // Updates the disable images menu
799 function webdeveloper_updateDisableImagesMenu(suffix)
800 {
801 var checked = false;
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);
806
807 // If the image preference value is set to 2
808 if(disableImagesPreferenceValue == 2)
809 {
810 disableImagesChecked = true;
811 }
812 else if(disableImagesPreferenceValue == 3)
813 {
814 disableExternalSiteImagesChecked = true;
815 }
816
817 // If the image animation preference is set to none
818 if(webdeveloper_getStringPreference("image.animation_mode", false) == "none")
819 {
820 checked = true;
821 }
822
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);
827 }
828
829 // Updates the images menu
830 function webdeveloper_updateImagesMenu(suffix)
831 {
832 var disableImagesChecked = false;
833 var disableImagesPreferenceValue = webdeveloper_getIntegerPreference("permissions.default.image", true);
834
835 // If the image preference value is set to 2
836 if(disableImagesPreferenceValue == 2)
837 {
838 disableImagesChecked = true;
839 }
840
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");
855 }
856
857 // Updates the outline images menu
858 function webdeveloper_updateOutlineImagesMenu(suffix)
859 {
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");
867 }
868
869 // Displays all the images for the page
870 function webdeveloper_viewImageInformation()
871 {
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;
878 var fileSize = null;
879 var height = 0;
880 var image = null;
881 var imageElement = null;
882 var imageLength = null;
883 var imageList = new Array();
884 var imageSrc = null;
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;
893 var pElement = null;
894 var scriptElement = generatedDocument.createElement("script");
895 var shade = false;
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;
901 var width = 0;
902
903 generatedDocument.title = title;
904
905 webdeveloper_addGeneratedStyles(generatedDocument);
906
907 headerElement.appendChild(generatedDocument.createTextNode(title));
908 bodyElement.appendChild(headerElement);
909
910 webdeveloper_addGeneratedTools(generatedDocument);
911
912 // Loop through the documents
913 for(var i = 0; i < documentLength; i++)
914 {
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");
922
923 linkElement.setAttribute("href", documentURL);
924 linkElement.appendChild(generatedDocument.createTextNode(documentURL));
925 headerElement.appendChild(linkElement);
926 bodyElement.appendChild(headerElement);
927
928 // If the tidy information preference is set
929 if(webdeveloper_getBooleanPreference("webdeveloper.information.tidy", true))
930 {
931 imageList = webdeveloper_tidyImages(imageList);
932 }
933
934 headerElement = generatedDocument.createElement("h3");
935 imageLength = imageList.length;
936
937 spanElement.setAttribute("class", "expanded pivot");
938 headerElement.appendChild(spanElement);
939
940 // If there is one image
941 if(imageLength == 1)
942 {
943 headerElement.appendChild(generatedDocument.createTextNode(imageLength + " " + stringBundle.getString("webdeveloper_image").toLowerCase()));
944 }
945 else
946 {
947 headerElement.appendChild(generatedDocument.createTextNode(imageLength + " " + stringBundle.getString("webdeveloper_images").toLowerCase()));
948 }
949
950 bodyElement.appendChild(headerElement);
951
952 // Loop through the images
953 for(var j = 0; j < imageLength; j++)
954 {
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");
961 shade = true;
962 tableElement = generatedDocument.createElement("table");
963 width = image.naturalWidth;
964
965 imageElement.setAttribute("src", imageSrc);
966 pElement.appendChild(imageElement);
967 divElement.appendChild(pElement);
968
969 // Src
970 cellDataElement = generatedDocument.createElement("td");
971 cellHeaderElement = generatedDocument.createElement("th");
972 linkElement = generatedDocument.createElement("a");
973 tableRowElement = generatedDocument.createElement("tr");
974
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);
982
983 // If there is a width
984 if(width)
985 {
986 cellDataElement = generatedDocument.createElement("td");
987 cellHeaderElement = generatedDocument.createElement("th");
988 tableRowElement = generatedDocument.createElement("tr");
989
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);
996 }
997
998 // If there is a height
999 if(height)
1000 {
1001 cellDataElement = generatedDocument.createElement("td");
1002 cellHeaderElement = generatedDocument.createElement("th");
1003 shade = !shade;
1004 tableRowElement = generatedDocument.createElement("tr");
1005
1006 // If this cell should be shaded
1007 if(shade)
1008 {
1009 cellDataElement.setAttribute("class", "shaded");
1010 }
1011
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);
1017 }
1018
1019 // If there is a file size
1020 if(fileSize)
1021 {
1022 cellDataElement = generatedDocument.createElement("td");
1023 cellHeaderElement = generatedDocument.createElement("th");
1024 shade = !shade;
1025 tableRowElement = generatedDocument.createElement("tr");
1026
1027 // If this cell should be shaded
1028 if(shade)
1029 {
1030 cellDataElement.setAttribute("class", "shaded");
1031 }
1032
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);
1038 }
1039
1040 // If there is an alt attribute
1041 if(image.hasAttribute("alt"))
1042 {
1043 cellDataElement = generatedDocument.createElement("td");
1044 cellHeaderElement = generatedDocument.createElement("th");
1045 shade = !shade;
1046 tableRowElement = generatedDocument.createElement("tr");
1047
1048 // If this cell should be shaded
1049 if(shade)
1050 {
1051 cellDataElement.setAttribute("class", "shaded");
1052 }
1053
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);
1059 }
1060
1061 // If there is a title attribute
1062 if(image.hasAttribute("title"))
1063 {
1064 cellDataElement = generatedDocument.createElement("td");
1065 cellHeaderElement = generatedDocument.createElement("th");
1066 shade = !shade;
1067 tableRowElement = generatedDocument.createElement("tr");
1068
1069 // If this cell should be shaded
1070 if(shade)
1071 {
1072 cellDataElement.setAttribute("class", "shaded");
1073 }
1074
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);
1080 }
1081
1082 divElement.appendChild(tableElement);
1083 divElement.appendChild(generatedDocument.createElement("hr"));
1084 }
1085
1086 divElement.setAttribute("class", "output");
1087 bodyElement.appendChild(divElement);
1088 }
1089
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);
1094
1095 scriptElement = generatedDocument.createElement("script");
1096
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);
1101
1102 // If the open tabs in background preference is set to true
1103 if(webdeveloper_getBooleanPreference("webdeveloper.open.tabs.background", true))
1104 {
1105 getBrowser().selectedTab = oldTab;
1106 }
1107 }