home *** CD-ROM | disk | FTP | other *** search
/ Revista do CD-ROM 123 / cdrom123.iso / essenc / extens / wweb / Web Developer.xpi / chrome / webdeveloper.jar / content / webdeveloper / images.js < prev    next >
Encoding:
JavaScript  |  2004-11-21  |  31.6 KB  |  778 lines
  1. // Displays all image dimensions
  2. function webdeveloper_displayImageDimensions(element, applyStyle)
  3. {
  4.     const content      = window.document.getElementById("content");
  5.     const mainTabBox   = content.mTabBox;
  6.     const documentList = webdeveloper_getDocuments(content.browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  7.     const stringBundle = document.getElementById("webdeveloper-string-bundle");
  8.     const heightText   = stringBundle.getString("webdeveloper_height");
  9.     const widthText    = stringBundle.getString("webdeveloper_width");
  10.  
  11.     var dimensions       = null;
  12.     var height           = null;
  13.     var imageElement     = null;
  14.     var imageElementList = null;
  15.     var pageDocument     = null;
  16.     var spanElement      = null;
  17.     var spanElementList  = null;
  18.     var width            = null;
  19.  
  20.     // Loop through the documents
  21.     for(var i = 0; i < documentList.length; i++)
  22.     {
  23.         pageDocument     = documentList[i];
  24.         imageElementList = pageDocument.getElementsByTagName("img");
  25.         spanElementList  = pageDocument.getElementsByTagName("span");
  26.  
  27.         // Loop through all the span tags
  28.         for(var j = 0; j < spanElementList.length; j++)
  29.         {
  30.             spanElement = spanElementList[j];
  31.  
  32.             // If the class exists and is set to webdeveloper-dimensions-span
  33.             if(spanElement.hasAttribute("class") && spanElement.getAttribute("class") == "webdeveloper-dimensions-span")
  34.             {
  35.                 spanElement.parentNode.removeChild(spanElement);
  36.                 j--;
  37.             }
  38.         }
  39.  
  40.         // Loop through all the img tags
  41.         for(j = 0; j < imageElementList.length; j++)
  42.         {
  43.             dimensions   = null;
  44.             imageElement = imageElementList[j];
  45.             height       = imageElement.getAttribute("height");
  46.             width        = imageElement.getAttribute("width");
  47.  
  48.             // If the width and height are set
  49.             if(width && height)
  50.             {
  51.                 dimensions = width + "x" + height;
  52.             }
  53.             else if(width)
  54.             {
  55.                 dimensions = widthText + "=" + width;
  56.             }
  57.             else if(height)
  58.             {
  59.                 dimensions = heightText + "=" + height;
  60.             }
  61.  
  62.             // If the element is checked and the dimensions are set
  63.             if(element.getAttribute("checked") && dimensions)
  64.             {
  65.                 spanElement = pageDocument.createElement("span");
  66.  
  67.                 spanElement.setAttribute("class", "webdeveloper-dimensions-span");
  68.                 spanElement.appendChild(pageDocument.createTextNode(dimensions));
  69.                 imageElement.parentNode.insertBefore(spanElement, imageElement);
  70.             }
  71.  
  72.             height = null;
  73.             width  = null;
  74.         }
  75.     }
  76.  
  77.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/display_image_dimensions.css", "webdeveloper-display-image-dimensions", applyStyle);
  78.     webdeveloper_toggleFeatureTooltipStyles(element, "webdeveloper-display-image-dimensions-tooltips", ".webdeveloper-dimensions-span");
  79. }
  80.  
  81. // Displays all image file sizes
  82. function webdeveloper_displayImageFileSizes(element, applyStyle)
  83. {
  84.     const content          = window.document.getElementById("content");
  85.     const httpCacheSession = Components.classes["@mozilla.org/network/cache-service;1"].getService(Components.interfaces.nsICacheService).createSession("HTTP", 0, true);
  86.     const mainTabBox       = content.mTabBox;
  87.     const documentList     = webdeveloper_getDocuments(content.browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  88.  
  89.     var cacheEntry       = null;
  90.     var fileSize         = null;
  91.     var imageElement     = null;
  92.     var imageElementList = null;
  93.     var pageDocument     = null;
  94.     var spanElement      = null;
  95.     var spanElementList  = null;
  96.  
  97.     // Loop through the documents
  98.     for(var i = 0; i < documentList.length; i++)
  99.     {
  100.         pageDocument     = documentList[i];
  101.         imageElementList = pageDocument.getElementsByTagName("img");
  102.         spanElementList  = pageDocument.getElementsByTagName("span");
  103.  
  104.         // Loop through all the span tags
  105.         for(var j = 0; j < spanElementList.length; j++)
  106.         {
  107.             spanElement = spanElementList[j];
  108.  
  109.             // If the class exists and is set to webdeveloper-file-sizes-span
  110.             if(spanElement.hasAttribute("class") && spanElement.getAttribute("class") == "webdeveloper-file-sizes-span")
  111.             {
  112.                 spanElement.parentNode.removeChild(spanElement);
  113.                 j--;
  114.             }
  115.         }
  116.  
  117.         // Loop through all the img tags
  118.         for(j = 0; j < imageElementList.length; j++)
  119.         {
  120.             fileSize     = null;
  121.             imageElement = imageElementList[j];
  122.  
  123.             // If the element is checked
  124.             if(element.getAttribute("checked"))
  125.             {
  126.                 // Try to get the file size
  127.                 try
  128.                 {
  129.                     cacheEntry = httpCacheSession.openCacheEntry(imageElement.src, Components.interfaces.nsICache.ACCESS_READ, false);
  130.  
  131.                     // If there is a cache entry
  132.                     if(cacheEntry)
  133.                     {
  134.                         fileSize = cacheEntry.dataSize;
  135.  
  136.                         // If there is a file size
  137.                         if(fileSize)
  138.                         {
  139.                             spanElement = pageDocument.createElement("span");
  140.  
  141.                             spanElement.setAttribute("class", "webdeveloper-file-sizes-span");
  142.                             spanElement.appendChild(pageDocument.createTextNode(webdeveloper_formatFileSize(fileSize)));
  143.                             imageElement.parentNode.insertBefore(spanElement, imageElement);
  144.                         }
  145.                     }
  146.                 }
  147.                 catch(exception)
  148.                 {
  149.                     // Do nothing
  150.                 }
  151.             }
  152.         }
  153.     }
  154.  
  155.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/display_image_file_sizes.css", "webdeveloper-display-image-file-sizes", applyStyle);
  156.     webdeveloper_toggleFeatureTooltipStyles(element, "webdeveloper-display-image-file-sizes-tooltips", ".webdeveloper-file-sizes-span");
  157. }
  158.  
  159. // Displays all image paths
  160. function webdeveloper_displayImagePaths(element, applyStyle)
  161. {
  162.     const content      = window.document.getElementById("content");
  163.     const mainTabBox   = content.mTabBox;
  164.     const documentList = webdeveloper_getDocuments(content.browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  165.     const stringBundle = document.getElementById("webdeveloper-string-bundle");
  166.     const srcText      = stringBundle.getString("webdeveloper_src");
  167.  
  168.     var imageElement     = null;
  169.     var imageElementList = null;
  170.     var pageDocument     = null;
  171.     var spanElement      = null;
  172.     var spanElementList  = null;
  173.     var src              = null;
  174.  
  175.     // Loop through the documents
  176.     for(var i = 0; i < documentList.length; i++)
  177.     {
  178.         pageDocument     = documentList[i];
  179.         imageElementList = pageDocument.getElementsByTagName("img");
  180.         spanElementList  = pageDocument.getElementsByTagName("span");
  181.  
  182.         // Loop through all the span tags
  183.         for(var j = 0; j < spanElementList.length; j++)
  184.         {
  185.             spanElement = spanElementList[j];
  186.  
  187.             // If the class exists and is set to webdeveloper-path-span
  188.             if(spanElement.hasAttribute("class") && spanElement.getAttribute("class") == "webdeveloper-path-span")
  189.             {
  190.                 spanElement.parentNode.removeChild(spanElement);
  191.                 j--;
  192.             }
  193.         }
  194.  
  195.         // Loop through all the img tags
  196.         for(j = 0; j < imageElementList.length; j++)
  197.         {
  198.             imageElement = imageElementList[j];
  199.             spanElement  = pageDocument.createElement("span");
  200.             src          = imageElement.getAttribute("src");
  201.  
  202.             // If the element is checked and the src is set
  203.             if(element.getAttribute("checked") && src)
  204.             {
  205.                 spanElement.setAttribute("class", "webdeveloper-path-span");
  206.                 spanElement.appendChild(pageDocument.createTextNode(srcText + "=" + src));
  207.                 imageElement.parentNode.insertBefore(spanElement, imageElement);
  208.             }
  209.         }
  210.     }
  211.  
  212.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/display_image_paths.css", "webdeveloper-display-image-paths", applyStyle);
  213.     webdeveloper_toggleFeatureTooltipStyles(element, "webdeveloper-display-image-paths-tooltips", ".webdeveloper-path-span");
  214. }
  215.  
  216. // Finds all the broken images on the page
  217. function webdeveloper_findBrokenImages()
  218. {
  219.     const content            = window.document.getElementById("content");
  220.     const mainTabBox         = content.mTabBox;
  221.     const documentList       = webdeveloper_getDocuments(content.browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  222.     const oldTab             = getBrowser().selectedTab;
  223.     const oldURL             = window.content.document.documentURI;
  224.     const preferencesService = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("");
  225.     const request            = new XMLHttpRequest();
  226.     const stringBundle       = document.getElementById("webdeveloper-string-bundle");
  227.     const title              = stringBundle.getFormattedString("webdeveloper_findBrokenImagesTitle", [oldURL]);
  228.  
  229.     var backgroundImage = null;
  230.     var brokenURLs      = null;
  231.     var documentURL     = null;
  232.     var element         = null;
  233.     var generatedPage   = null;
  234.     var headerElement   = null;
  235.     var image           = null;
  236.     var imageList       = null;
  237.     var linkElement     = null;
  238.     var pageDocument    = null;
  239.     var pElement        = null;
  240.     var preElement      = null;
  241.  
  242.     generatedPage = webdeveloper_generatePage("");
  243.  
  244.     // This must be done to make generated content render
  245.     request.open("GET", "about:blank", false);
  246.     request.send("");
  247.  
  248.     generatedPage.content.document.title = title;
  249.  
  250.     linkElement = generatedPage.content.document.createElement("link");
  251.     linkElement.setAttribute("href", "chrome://webdeveloper/content/stylesheets/generated_content.css");
  252.     linkElement.setAttribute("media", "all");
  253.     linkElement.setAttribute("rel", "stylesheet");
  254.     linkElement.setAttribute("type", "text/css");
  255.     generatedPage.content.document.getElementsByTagName("head")[0].appendChild(linkElement);
  256.  
  257.     headerElement = generatedPage.content.document.createElement("h1");
  258.     headerElement.appendChild(generatedPage.content.document.createTextNode(title));
  259.     generatedPage.content.document.body.appendChild(headerElement);
  260.  
  261.     // Loop through the documents
  262.     for(var i = 0; i < documentList.length; i++)
  263.     {
  264.         brokenURLs   = "";
  265.         pageDocument = documentList[i];
  266.         documentURL  = pageDocument.documentURI;
  267.         imageList    = pageDocument.getElementsByTagName("img");
  268.  
  269.         headerElement = generatedPage.content.document.createElement("h2");
  270.         linkElement   = generatedPage.content.document.createElement("a");
  271.         linkElement.setAttribute("href", documentURL);
  272.         linkElement.appendChild(generatedPage.content.document.createTextNode(documentURL));
  273.         headerElement.appendChild(linkElement);
  274.         generatedPage.content.document.body.appendChild(headerElement);
  275.  
  276.         // Loop through all the images
  277.         for(var j = 0; j < imageList.length; j++)
  278.         {
  279.             image = imageList[j];
  280.  
  281.             // If the image is broken
  282.             if(!image.naturalWidth)
  283.             {
  284.                 brokenURLs += "\n" + image.src;
  285.             }
  286.         }
  287.  
  288.         const treeWalker = pageDocument.createTreeWalker(pageDocument.body, NodeFilter.SHOW_ELEMENT, null, false);
  289.  
  290.         // While the tree walker has more nodes
  291.         while((element = treeWalker.nextNode()) != null)
  292.         {
  293.             backgroundImage = element.ownerDocument.defaultView.getComputedStyle(element, "").getPropertyCSSValue("background-image");
  294.  
  295.             // If this element has a background image and it is a URL
  296.             if(backgroundImage && backgroundImage.primitiveType == CSSPrimitiveValue.CSS_URI)
  297.             {
  298.                 image     = new Image();
  299.                 image.src = backgroundImage.getStringValue();
  300.  
  301.                 // If the image is broken
  302.                 if(!image.naturalWidth)
  303.                 {
  304.                     brokenURLs += "\n" + image.src;
  305.                 }
  306.             }
  307.         }
  308.  
  309.         // If there are no broken images
  310.         if(brokenURLs == "")
  311.         {
  312.             pElement = generatedPage.content.document.createElement("p");
  313.             pElement.appendChild(generatedPage.content.document.createTextNode(stringBundle.getString("webdeveloper_noBrokenImages")));
  314.             generatedPage.content.document.body.appendChild(pElement);
  315.         }
  316.         else
  317.         {
  318.             preElement = generatedPage.content.document.createElement("pre");
  319.             preElement.appendChild(generatedPage.content.document.createTextNode(brokenURLs));
  320.             generatedPage.content.document.body.appendChild(preElement);
  321.         }
  322.     }
  323.  
  324.     // If the open tabs in background preference is set to true
  325.     if(preferencesService.prefHasUserValue("webdeveloper.open.tabs.background") && preferencesService.getBoolPref("webdeveloper.open.tabs.background"))
  326.     {
  327.         getBrowser().selectedTab = oldTab;
  328.     }
  329. }
  330.  
  331. // Hides/shows all background images
  332. function webdeveloper_hideBackgroundImages(element, applyStyle)
  333. {
  334.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/hide_background_images.css", "webdeveloper-hide-background-images", applyStyle);
  335. }
  336.  
  337. // Hides/shows all the images
  338. function webdeveloper_hideImages(element, id, applyStyle)
  339. {
  340.     const content      = window.document.getElementById("content");
  341.     const hide         = element.getAttribute("checked");
  342.     const mainTabBox   = content.mTabBox;
  343.     const documentList = webdeveloper_getDocuments(content.browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  344.  
  345.     var inputElement     = null;
  346.     var inputElementList = null;
  347.     var pageDocument     = null;
  348.  
  349.     // Loop through the documents
  350.     for(var i = 0; i < documentList.length; i++)
  351.     {
  352.         pageDocument     = documentList[i];
  353.         inputElementList = pageDocument.getElementsByTagName("input");
  354.  
  355.         // Loop through all the input tags
  356.         for(var j = 0; j < inputElementList.length; j++)
  357.         {
  358.             inputElement = inputElementList[j];
  359.  
  360.             // If hiding images and the element is an image
  361.             if(hide && inputElement.hasAttribute("type") && inputElement.getAttribute("type") == "image")
  362.             {
  363.                 inputElement.setAttribute("type", "submit");
  364.  
  365.                 // If the element has a class attribute
  366.                 if(inputElement.hasAttribute("class"))
  367.                 {
  368.                     inputElement.setAttribute("class", inputElement.getAttribute("class") + " webdeveloper-image");
  369.                 }
  370.                 else
  371.                 {
  372.                     inputElement.setAttribute("class", "webdeveloper-image");
  373.                 }
  374.             }
  375.             else if(inputElement.hasAttribute("class") && inputElement.getAttribute("class").indexOf("webdeveloper-image") != -1)
  376.             {
  377.                 inputElement.setAttribute("type", "image");
  378.                 inputElement.setAttribute("class", webdeveloper_removeSubstring(inputElement.getAttribute("class"), "webdeveloper-image").trim());
  379.             }
  380.             else
  381.             {
  382.                 // This stops the fields reordering
  383.                 inputElement.setAttribute("type", inputElement.getAttribute("type"));
  384.             }
  385.         }
  386.     }
  387.  
  388.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/hide_images.css", id, applyStyle);
  389. }
  390.  
  391. // Makes all the images invisible
  392. function webdeveloper_makeImagesInvisible(element, id, applyStyle)
  393. {
  394.     const content      = window.document.getElementById("content");
  395.     const mainTabBox   = content.mTabBox;
  396.     const documentList = webdeveloper_getDocuments(content.browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  397.     const invisible    = element.getAttribute("checked");
  398.  
  399.     var image            = null;
  400.     var imageList        = null;
  401.     var inputElement     = null;
  402.     var inputElementList = null;
  403.     var pageDocument     = null;
  404.  
  405.     // Loop through the documents
  406.     for(var i = 0; i < documentList.length; i++)
  407.     {
  408.         pageDocument     = documentList[i];
  409.         imageList        = pageDocument.getElementsByTagName("img");
  410.         inputElementList = pageDocument.getElementsByTagName("input");
  411.  
  412.         // Loop through all the input tags
  413.         for(var j = 0; j < inputElementList.length; j++)
  414.         {
  415.             inputElement = inputElementList[j];
  416.  
  417.             // If making images invisible and the element is an image
  418.             if(invisible && inputElement.hasAttribute("type") && inputElement.getAttribute("type") == "image")
  419.             {
  420.                 inputElement.setAttribute("type", "submit");
  421.  
  422.                 // If the element has a class attribute
  423.                 if(inputElement.hasAttribute("class"))
  424.                 {
  425.                     inputElement.setAttribute("class", inputElement.getAttribute("class") + " webdeveloper-image");
  426.                 }
  427.                 else
  428.                 {
  429.                     inputElement.setAttribute("class", "webdeveloper-image");
  430.                 }
  431.             }
  432.             else if(inputElement.hasAttribute("class") && inputElement.getAttribute("class").indexOf("webdeveloper-image") != -1)
  433.             {
  434.                 inputElement.setAttribute("type", "image");
  435.                 inputElement.setAttribute("class", webdeveloper_removeSubstring(inputElement.getAttribute("class"), "webdeveloper-image").trim());
  436.             }
  437.             else
  438.             {
  439.                 // This stops the fields reordering
  440.                 inputElement.setAttribute("type", inputElement.getAttribute("type"));
  441.             }
  442.         }
  443.  
  444.         // Loop through all the images
  445.         for(j = 0; j < imageList.length; j++)
  446.         {
  447.             image = imageList[j];
  448.  
  449.             // If making images invisible
  450.             if(invisible)
  451.             {
  452.                 // If the image width is not set and the image is not broken
  453.                 if(!image.getAttribute("width") && image.naturalWidth)
  454.                 {
  455.                     image.setAttribute("width", image.naturalWidth);
  456.                 }
  457.  
  458.                 // If the image height is not set and the image is not broken
  459.                 if(!image.getAttribute("height") && image.naturalHeight)
  460.                 {
  461.                     image.setAttribute("height", image.naturalHeight);
  462.                 }
  463.  
  464.                 image.setAttribute("src", "chrome://webdeveloper/content/spacer.gif?" + image.getAttribute("src"));
  465.             }
  466.             else
  467.             {
  468.                 image.setAttribute("src", webdeveloper_removeSubstring(image.getAttribute("src"), "chrome://webdeveloper/content/spacer.gif?"));
  469.             }
  470.         }
  471.     }
  472.  
  473.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/make_images_invisible.css", id, applyStyle);
  474. }
  475.  
  476. // Outlines all the images with adjusted dimensions
  477. function webdeveloper_outlineImagesWithAdjustedDimensions(element, applyStyle)
  478. {
  479.     const content      = window.document.getElementById("content");
  480.     const mainTabBox   = content.mTabBox;
  481.     const documentList = webdeveloper_getDocuments(content.browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  482.  
  483.     var imageElement     = null;
  484.     var imageElementList = null;
  485.     var naturalHeight    = null;
  486.     var naturalWidth     = null;
  487.     var pageDocument     = null;
  488.  
  489.     // Loop through the documents
  490.     for(var i = 0; i < documentList.length; i++)
  491.     {
  492.         pageDocument     = documentList[i];
  493.         imageElementList = pageDocument.getElementsByTagName("img");
  494.  
  495.         // Loop through all the img tags
  496.         for(var j = 0; j < imageElementList.length; j++)
  497.         {
  498.             imageElement  = imageElementList[j];
  499.             naturalHeight = imageElement.naturalHeight;
  500.             naturalWidth  = imageElement.naturalWidth;
  501.  
  502.             // If outlining
  503.             if(element.getAttribute("checked"))
  504.             {
  505.                 // If the width or height has been adjusted
  506.                 if((naturalWidth && imageElement.hasAttribute("width") && imageElement.getAttribute("width") != naturalWidth)
  507.                     || (naturalHeight && imageElement.hasAttribute("height") && imageElement.getAttribute("height") != naturalHeight))
  508.                 {
  509.                     // If the image has a class attribute
  510.                     if(imageElement.hasAttribute("class"))
  511.                     {
  512.                         imageElement.setAttribute("class", imageElement.getAttribute("class") + " webdeveloper-adjusted-image");
  513.                     }
  514.                     else
  515.                     {
  516.                         imageElement.setAttribute("class", "webdeveloper-adjusted-image");
  517.                     }
  518.                 }
  519.             }
  520.             else if(imageElement.hasAttribute("class") && imageElement.getAttribute("class").indexOf("webdeveloper-adjusted-image") != -1)
  521.             {
  522.                 imageElement.setAttribute("class", webdeveloper_removeSubstring(imageElement.getAttribute("class"), "webdeveloper-adjusted-image").trim());
  523.             }
  524.         }
  525.     }
  526.  
  527.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_with_adjusted_dimensions.css", "webdeveloper-outline-images-with-adjusted-dimensions", applyStyle);
  528. }
  529.  
  530. // Outlines all the images with empty alt attributes
  531. function webdeveloper_outlineImagesWithEmptyAltAttributes(element, applyStyle)
  532. {
  533.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_with_empty_alt_attributes.css", "webdeveloper-outline-images-with-empty-alt-attributes", applyStyle);
  534. }
  535.  
  536. // Outlines all the images without alt attributes
  537. function webdeveloper_outlineImagesWithoutAltAttributes(element, applyStyle)
  538. {
  539.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_without_alt_attributes.css", "webdeveloper-outline-images-without-alt-attributes", applyStyle);
  540. }
  541.  
  542. // Outlines all the images without dimensions
  543. function webdeveloper_outlineImagesWithoutDimensions(element, applyStyle)
  544. {
  545.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_without_dimensions.css", "webdeveloper-outline-images-without-dimensions", applyStyle);
  546. }
  547.  
  548. // Outlines all the images without title attributes
  549. function webdeveloper_outlineImagesWithoutTitleAttributes(element, applyStyle)
  550. {
  551.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_without_title_attributes.css", "webdeveloper-outline-images-without-title-attributes", applyStyle);
  552. }
  553.  
  554. // Outputs the image information
  555. function webdeveloper_outputImageInformation(image, generatedPage)
  556. {
  557.     const stringBundle = document.getElementById("webdeveloper-string-bundle");
  558.  
  559.     var imageElement = generatedPage.content.document.createElement("img");
  560.     var imageSrc     = image.src;
  561.     var linkElement  = generatedPage.content.document.createElement("a");
  562.     var pElement     = generatedPage.content.document.createElement("p");
  563.  
  564.     imageElement.setAttribute("src", imageSrc);
  565.     pElement.appendChild(imageElement);
  566.     generatedPage.content.document.body.appendChild(pElement);
  567.  
  568.     //  Path
  569.     pElement = generatedPage.content.document.createElement("p");
  570.     linkElement.setAttribute("href", imageSrc);
  571.     linkElement.appendChild(generatedPage.content.document.createTextNode(imageSrc));
  572.     pElement.appendChild(linkElement);
  573.     generatedPage.content.document.body.appendChild(pElement);
  574.  
  575.     //  Dimensions
  576.     pElement = generatedPage.content.document.createElement("p");
  577.     pElement.appendChild(generatedPage.content.document.createTextNode(image.naturalWidth + "x" + image.naturalHeight));
  578.     generatedPage.content.document.body.appendChild(pElement);
  579.  
  580.     generatedPage.content.document.body.appendChild(generatedPage.content.document.createElement("hr"));
  581. }
  582.  
  583. // Replaces all images with their alt attributes
  584. function webdeveloper_replaceImagesWithAltAttributes(element, applyStyle)
  585. {
  586.     const content      = window.document.getElementById("content");
  587.     const mainTabBox   = content.mTabBox;
  588.     const documentList = webdeveloper_getDocuments(content.browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  589.  
  590.     var altAttribute     = null;
  591.     var imageElement     = null;
  592.     var imageElementList = null;
  593.     var pageDocument     = null;
  594.     var previousElement  = null;
  595.     var spanElement      = null;
  596.  
  597.     // Loop through the documents
  598.     for(var i = 0; i < documentList.length; i++)
  599.     {
  600.         pageDocument     = documentList[i];
  601.         imageElementList = pageDocument.getElementsByTagName("img");
  602.  
  603.         // Loop through all the img tags
  604.         for(var j = 0; j < imageElementList.length; j++)
  605.         {
  606.             imageElement    = imageElementList[j];
  607.             altAttribute    = imageElement.getAttribute("alt");
  608.             previousElement = imageElement.previousSibling;
  609.             spanElement     = pageDocument.createElement("span");
  610.  
  611.             // If the previous element is an element with class webdeveloper-alt-span
  612.             if(previousElement && previousElement.nodeType == 1 && previousElement.getAttribute("class") == "webdeveloper-alt-span")
  613.             {
  614.                 previousElement.parentNode.removeChild(previousElement);
  615.             }
  616.  
  617.             // If the element is checked and the alt attribute exists
  618.             if(element.getAttribute("checked") && altAttribute)
  619.             {
  620.                 spanElement.setAttribute("class", "webdeveloper-alt-span");
  621.                 spanElement.appendChild(pageDocument.createTextNode(altAttribute));
  622.                 imageElement.parentNode.insertBefore(spanElement, imageElement);
  623.             }
  624.         }
  625.     }
  626.  
  627.     webdeveloper_hideImages(element, "webdeveloper-replace-images-with-alt-attributes", applyStyle);
  628. }
  629.  
  630. // Sorts two images
  631. function webdeveloper_sortImages(imageOne, imageTwo)
  632. {
  633.     const imageOneSrc = imageOne.src;
  634.     const imageTwoSrc = imageTwo.src;
  635.  
  636.     var sortValue = 1;
  637.  
  638.     // If the images are equal
  639.     if(imageOneSrc == imageTwoSrc)
  640.     {
  641.         sortValue = 0;
  642.     }
  643.     else if(imageOneSrc < imageTwoSrc)
  644.     {
  645.         sortValue = -1;
  646.     }
  647.  
  648.     return sortValue;
  649. }
  650.  
  651. // Tidies a list of images by removing duplicates and sorting
  652. function webdeveloper_tidyImages(imageList)
  653. {
  654.     var image              = null;
  655.     var newImageList       = new Array();
  656.     var newImageListLength = new Array();
  657.     var tidiedImageList    = new Array();
  658.  
  659.     // Loop through the images
  660.     for(var i = 0; i < imageList.length; i++)
  661.     {
  662.         image = imageList[i];
  663.  
  664.         // If this image is set
  665.         if(image.src)
  666.         {
  667.             newImageList.push(image);
  668.         }
  669.     }
  670.  
  671.     newImageList.sort(webdeveloper_sortImages);
  672.     newImageListLength = newImageList.length;
  673.  
  674.     // Loop through the images
  675.     for(i = 0; i < newImageListLength; i++)
  676.     {
  677.         image = newImageList[i];
  678.  
  679.         // If this is not the last image and the image is the same as the next image
  680.         if(i + 1 < newImageListLength && image.src == newImageList[i + 1].src)
  681.         {
  682.             continue;
  683.         }
  684.  
  685.         tidiedImageList.push(image);
  686.     }
  687.  
  688.     return tidiedImageList;
  689. }
  690.  
  691. // Displays all the images for the page
  692. function webdeveloper_viewImageInformation()
  693. {
  694.     const content            = window.document.getElementById("content");
  695.     const mainTabBox         = content.mTabBox;
  696.     const documentList       = webdeveloper_getDocuments(content.browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  697.     const oldTab             = getBrowser().selectedTab;
  698.     const oldURL             = window.content.document.documentURI;
  699.     const preferencesService = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("");
  700.     const request            = new XMLHttpRequest();
  701.     const stringBundle       = document.getElementById("webdeveloper-string-bundle");
  702.     const title              = stringBundle.getFormattedString("webdeveloper_viewImageInformationTitle", [oldURL]);
  703.  
  704.     var backgroundImage = null;
  705.     var documentURL     = null;
  706.     var element         = null;
  707.     var generatedPage   = null;
  708.     var headerElement   = null;
  709.     var image           = null;
  710.     var imageList       = null;
  711.     var linkElement     = null;
  712.     var pageDocument    = null;
  713.     var pElement        = null;
  714.  
  715.     generatedPage = webdeveloper_generatePage("");
  716.  
  717.     // This must be done to make generated content render
  718.     request.open("GET", "about:blank", false);
  719.     request.send("");
  720.  
  721.     generatedPage.content.document.title = title;
  722.  
  723.     linkElement = generatedPage.content.document.createElement("link");
  724.     linkElement.setAttribute("href", "chrome://webdeveloper/content/stylesheets/generated_content.css");
  725.     linkElement.setAttribute("media", "all");
  726.     linkElement.setAttribute("rel", "stylesheet");
  727.     linkElement.setAttribute("type", "text/css");
  728.     generatedPage.content.document.getElementsByTagName("head")[0].appendChild(linkElement);
  729.  
  730.     headerElement = generatedPage.content.document.createElement("h1");
  731.     headerElement.appendChild(generatedPage.content.document.createTextNode(title));
  732.     generatedPage.content.document.body.appendChild(headerElement);
  733.  
  734.     // Loop through the documents
  735.     for(var i = 0; i < documentList.length; i++)
  736.     {
  737.         pageDocument = documentList[i];
  738.         documentURL  = pageDocument.documentURI;
  739.         imageList    = webdeveloper_tidyImages(pageDocument.getElementsByTagName("img"));
  740.  
  741.         headerElement = generatedPage.content.document.createElement("h2");
  742.         linkElement   = generatedPage.content.document.createElement("a");
  743.         linkElement.setAttribute("href", documentURL);
  744.         linkElement.appendChild(generatedPage.content.document.createTextNode(documentURL));
  745.         headerElement.appendChild(linkElement);
  746.         generatedPage.content.document.body.appendChild(headerElement);
  747.  
  748.         // Loop through the images
  749.         for(var j = 0; j < imageList.length; j++)
  750.         {
  751.             webdeveloper_outputImageInformation(imageList[j], generatedPage);
  752.         }
  753.  
  754.         const treeWalker = pageDocument.createTreeWalker(pageDocument.body, NodeFilter.SHOW_ELEMENT, null, false);
  755.  
  756.         // While the tree walker has more nodes
  757.         while((element = treeWalker.nextNode()) != null)
  758.         {
  759.             backgroundImage = element.ownerDocument.defaultView.getComputedStyle(element, "").getPropertyCSSValue("background-image");
  760.  
  761.             // If this element has a background image and it is a URL
  762.             if(backgroundImage && backgroundImage.primitiveType == CSSPrimitiveValue.CSS_URI)
  763.             {
  764.                 image     = new Image();
  765.                 image.src = backgroundImage.getStringValue();
  766.  
  767.                 webdeveloper_outputImageInformation(image, generatedPage);
  768.             }
  769.         }
  770.     }
  771.  
  772.     // If the open tabs in background preference is set to true
  773.     if(preferencesService.prefHasUserValue("webdeveloper.open.tabs.background") && preferencesService.getBoolPref("webdeveloper.open.tabs.background"))
  774.     {
  775.         getBrowser().selectedTab = oldTab;
  776.     }
  777. }
  778.