git-svn-id: svn://euphorik.ch/pompage@45 02bbb61a-6d21-0410-aba0-cb053bdfd66a
[pompage.git] / doc / webdeveloper / images.js
diff --git a/doc/webdeveloper/images.js b/doc/webdeveloper/images.js
new file mode 100644 (file)
index 0000000..444f372
--- /dev/null
@@ -0,0 +1,1107 @@
+// Displays all alt attributes
+function webdeveloper_displayAltAttributes(element)
+{
+    var checked             = element.getAttribute("checked");
+    var documentList        = webdeveloper_getDocuments(webdeveloper_getContentWindow());
+    var documentLength      = documentList.length;
+    var imageElement        = null;
+    var imageElementList    = null;
+    var imageElementsLength = null;
+    var pageDocument        = null;
+    var spanElement         = null;
+    var text                = null;
+
+    // Loop through the documents
+    for(var i = 0; i < documentLength; i++)
+    {
+        pageDocument = documentList[i];
+
+        // Need to do this to stop the feature running twice
+        webdeveloper_removeAllElementsByXPath(pageDocument, "//span[@class='webdeveloper-display-alt-attributes']");
+
+        // If the element is checked
+        if(checked)
+        {
+            imageElementList    = pageDocument.images;
+            imageElementsLength = imageElementList.length;
+
+            // Loop through all the image elements
+            for(var j = 0; j < imageElementsLength; j++)
+            {
+                imageElement = imageElementList[j];
+
+                // If the alt attribute is set
+                if(imageElement.hasAttribute("alt"))
+                {
+                    spanElement = pageDocument.createElement("span");
+                    text        = "Alt=" + imageElement.getAttribute("alt");
+
+                    spanElement.setAttribute("class", "webdeveloper-display-alt-attributes");
+                    spanElement.setAttribute("title", text);
+                    spanElement.appendChild(pageDocument.createTextNode(text));
+                    imageElement.parentNode.insertBefore(spanElement, imageElement);
+                }
+            }
+        }
+    }
+
+    webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/imports/tooltips.css", "webdeveloper-display-alt-attributes");
+    webdeveloper_toggleFeatureTooltipStyles(element, "webdeveloper-display-alt-attributes-tooltips", "span.webdeveloper-display-alt-attributes");
+}
+
+// Displays all image dimensions
+function webdeveloper_displayImageDimensions(element)
+{
+    var checked             = element.getAttribute("checked");
+    var dimensions          = null;
+    var documentList        = webdeveloper_getDocuments(webdeveloper_getContentWindow());
+    var documentLength      = documentList.length;
+    var height              = null;
+    var imageElement        = null;
+    var imageElementList    = null;
+    var imageElementsLength = null;
+    var pageDocument        = null;
+    var spanElement         = null;
+    var stringBundle        = document.getElementById("webdeveloper-string-bundle");
+    var heightText          = stringBundle.getString("webdeveloper_height");
+    var width               = null;
+    var widthText           = stringBundle.getString("webdeveloper_width");
+
+    // Loop through the documents
+    for(var i = 0; i < documentLength; i++)
+    {
+        pageDocument = documentList[i];
+
+        // Need to do this to stop the feature running twice
+        webdeveloper_removeAllElementsByXPath(pageDocument, "//span[@class='webdeveloper-display-image-dimensions']");
+
+        // If the element is checked
+        if(checked)
+        {
+            imageElementList    = pageDocument.images;
+            imageElementsLength = imageElementList.length;
+
+            // Loop through all the image elements
+            for(var j = 0; j < imageElementsLength; j++)
+            {
+                dimensions   = null;
+                imageElement = imageElementList[j];
+                height       = imageElement.height;
+                width        = imageElement.width;
+
+                // If the width and height are set
+                if(width && height)
+                {
+                    dimensions = width + "x" + height;
+                }
+                else if(width)
+                {
+                    dimensions = widthText + "=" + width;
+                }
+                else if(height)
+                {
+                    dimensions = heightText + "=" + height;
+                }
+
+                // If the dimensions are set
+                if(dimensions)
+                {
+                    spanElement = pageDocument.createElement("span");
+
+                    spanElement.setAttribute("class", "webdeveloper-display-image-dimensions");
+                    spanElement.setAttribute("title", dimensions);
+                    spanElement.appendChild(pageDocument.createTextNode(dimensions));
+                    imageElement.parentNode.insertBefore(spanElement, imageElement);
+                }
+
+                height = null;
+                width  = null;
+            }
+        }
+    }
+
+    webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/imports/tooltips.css", "webdeveloper-display-image-dimensions");
+    webdeveloper_toggleFeatureTooltipStyles(element, "webdeveloper-display-image-dimensions-tooltips", "span.webdeveloper-display-image-dimensions");
+}
+
+// Displays all image file sizes
+function webdeveloper_displayImageFileSizes(element)
+{
+    var checked             = element.getAttribute("checked");
+    var documentList        = webdeveloper_getDocuments(webdeveloper_getContentWindow());
+    var documentLength      = documentList.length;
+    var fileSize            = null;
+    var imageElement        = null;
+    var imageElementList    = null;
+    var imageElementsLength = null;
+    var pageDocument        = null;
+    var spanElement         = null;
+    var stringBundle        = document.getElementById("webdeveloper-string-bundle");
+    var fileSizeText        = stringBundle.getString("webdeveloper_fileSize");
+    var text                = null;
+
+    // Loop through the documents
+    for(var i = 0; i < documentLength; i++)
+    {
+        pageDocument = documentList[i];
+
+        // Need to do this to stop the feature running twice
+        webdeveloper_removeAllElementsByXPath(pageDocument, "//span[@class='webdeveloper-display-image-file-sizes']");
+
+        // If the element is checked
+        if(checked)
+        {
+            imageElementList    = pageDocument.images;
+            imageElementsLength = imageElementList.length;
+
+            // Loop through all the image elements
+            for(var j = 0; j < imageElementsLength; j++)
+            {
+                imageElement = imageElementList[j];
+                fileSize     = webdeveloper_getFileSize(imageElement.src);
+
+                // If there is a file size
+                if(fileSize)
+                {
+                    spanElement = pageDocument.createElement("span");
+                    text        = fileSizeText + "=" + webdeveloper_formatFileSize(fileSize);
+
+                    spanElement.setAttribute("class", "webdeveloper-display-image-file-sizes");
+                    spanElement.setAttribute("title", text);
+                    spanElement.appendChild(pageDocument.createTextNode(text));
+                    imageElement.parentNode.insertBefore(spanElement, imageElement);
+                }
+            }
+        }
+    }
+
+    webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/imports/tooltips.css", "webdeveloper-display-image-file-sizes");
+    webdeveloper_toggleFeatureTooltipStyles(element, "webdeveloper-display-image-file-sizes-tooltips", "span.webdeveloper-display-image-file-sizes");
+}
+
+// Displays all image paths
+function webdeveloper_displayImagePaths(element)
+{
+    var checked             = element.getAttribute("checked");
+    var documentList        = webdeveloper_getDocuments(webdeveloper_getContentWindow());
+    var documentLength      = documentList.length;
+    var imageElement        = null;
+    var imageElementList    = null;
+    var imageElementsLength = null;
+    var pageDocument        = null;
+    var spanElement         = null;
+    var src                 = null;
+    var stringBundle        = document.getElementById("webdeveloper-string-bundle");
+    var srcText             = stringBundle.getString("webdeveloper_src");
+    var text                = null;
+
+    // Loop through the documents
+    for(var i = 0; i < documentLength; i++)
+    {
+        pageDocument = documentList[i];
+
+        // Need to do this to stop the feature running twice
+        webdeveloper_removeAllElementsByXPath(pageDocument, "//span[@class='webdeveloper-display-image-paths']");
+
+        // If the element is checked
+        if(checked)
+        {
+            imageElementList    = pageDocument.images;
+            imageElementsLength = imageElementList.length;
+
+            // Loop through all the image elements
+            for(var j = 0; j < imageElementsLength; j++)
+            {
+                imageElement = imageElementList[j];
+                spanElement  = pageDocument.createElement("span");
+                src          = imageElement.getAttribute("src");
+
+                // If the src is set
+                if(src)
+                {
+                    text = srcText + "=" + src;
+
+                    spanElement.setAttribute("class", "webdeveloper-display-image-paths");
+                    spanElement.setAttribute("title", text);
+                    spanElement.appendChild(pageDocument.createTextNode(text));
+                    imageElement.parentNode.insertBefore(spanElement, imageElement);
+                }
+            }
+        }
+    }
+
+    webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/imports/tooltips.css", "webdeveloper-display-image-paths");
+    webdeveloper_toggleFeatureTooltipStyles(element, "webdeveloper-display-image-paths-tooltips", "span.webdeveloper-display-image-paths");
+}
+
+// Finds all the broken images on the page
+function webdeveloper_findBrokenImages()
+{
+    var cacheDisabled     = !webdeveloper_getBooleanPreference("browser.cache.disk.enable", false) && !webdeveloper_getBooleanPreference("browser.cache.memory.enable", false);
+    var divElement        = null;
+    var documentList      = webdeveloper_getDocuments(webdeveloper_getContentWindow());
+    var documentLength    = documentList.length;
+    var documentURL       = null;
+    var image             = null;
+    var imageLength       = null;
+    var imageList         = null;
+    var imageSrc          = null;
+    var linkElement       = null;
+    var listElement       = null;
+    var listItemElement   = null;
+    var oldTab            = getBrowser().selectedTab;
+    var oldURL            = getBrowser().currentURI.spec;
+    var generatedDocument = webdeveloper_generateDocument("");
+    var bodyElement       = webdeveloper_getDocumentBodyElement(generatedDocument);
+    var headElement       = webdeveloper_getDocumentHeadElement(generatedDocument);
+    var headerElement     = generatedDocument.createElement("h1");
+    var pageDocument      = null;
+    var pElement          = null;
+    var scriptElement     = generatedDocument.createElement("script");
+    var spanElement       = null;
+    var stringBundle      = document.getElementById("webdeveloper-string-bundle");
+    var title             = stringBundle.getFormattedString("webdeveloper_findBrokenImagesTitle", [oldURL]);
+
+    generatedDocument.title = title;
+
+    webdeveloper_addGeneratedStyles(generatedDocument);
+
+    headerElement.appendChild(generatedDocument.createTextNode(title));
+    bodyElement.appendChild(headerElement);
+
+    webdeveloper_addGeneratedTools(generatedDocument);
+
+    // Loop through the documents
+    for(var i = 0; i < documentLength; i++)
+    {
+        divElement    = generatedDocument.createElement("div");
+        headerElement = generatedDocument.createElement("h2");
+        linkElement   = generatedDocument.createElement("a");
+        listElement   = generatedDocument.createElement("ol");
+        pageDocument  = documentList[i];
+        documentURL   = pageDocument.documentURI;
+        imageList     = webdeveloper_getImagesForDocument(pageDocument, !cacheDisabled, false);
+        imageLength   = imageList.length;
+        spanElement   = generatedDocument.createElement("span");
+
+        spanElement.setAttribute("class", "expanded pivot");
+        headerElement.appendChild(spanElement);
+        linkElement.setAttribute("href", documentURL);
+        linkElement.appendChild(generatedDocument.createTextNode(documentURL));
+        headerElement.appendChild(linkElement);
+        bodyElement.appendChild(headerElement);
+
+        // Loop through all the images
+        for(var j = 0; j < imageLength; j++)
+        {
+            image    = imageList[j];
+            imageSrc = image.src;
+
+            // If the image is broken
+            if(!image.naturalWidth && !image.naturalHeight)
+            {
+                listItemElement = generatedDocument.createElement("li");
+                linkElement     = generatedDocument.createElement("a");
+
+                linkElement.setAttribute("href", imageSrc);
+                linkElement.appendChild(generatedDocument.createTextNode(imageSrc));
+                listItemElement.appendChild(linkElement);
+                listElement.appendChild(listItemElement);
+            }
+        }
+
+        // If there are no broken images
+        if(listElement.hasChildNodes())
+        {
+            divElement.appendChild(listElement);
+        }
+        else
+        {
+            pElement = generatedDocument.createElement("p");
+
+            pElement.appendChild(generatedDocument.createTextNode(stringBundle.getString("webdeveloper_noBrokenImages")));
+            divElement.appendChild(pElement);
+        }
+
+        divElement.setAttribute("class", "output");
+        bodyElement.appendChild(divElement);
+    }
+
+    scriptElement.setAttribute("defer", "defer");
+    scriptElement.setAttribute("src", "chrome://webdeveloper/content/common/xpath.js");
+    scriptElement.setAttribute("type", "text/javascript");
+    headElement.appendChild(scriptElement);
+
+    scriptElement = generatedDocument.createElement("script");
+
+    scriptElement.setAttribute("defer", "defer");
+    scriptElement.setAttribute("src", "chrome://webdeveloper/content/generated/output_pivot.js");
+    scriptElement.setAttribute("type", "text/javascript");
+    headElement.appendChild(scriptElement);
+
+    // If the open tabs in background preference is set to true
+    if(webdeveloper_getBooleanPreference("webdeveloper.open.tabs.background", true))
+    {
+        getBrowser().selectedTab = oldTab;
+    }
+}
+
+// Hides/shows all background images
+function webdeveloper_hideBackgroundImages(element)
+{
+    webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/hide_background_images.css", "webdeveloper-hide-background-images");
+}
+
+// Hides/shows all the images
+function webdeveloper_hideImages(element, id)
+{
+    var documentList        = webdeveloper_getDocuments(webdeveloper_getContentWindow());
+    var documentLength      = documentList.length;
+    var hide                = element.getAttribute("checked");
+    var inputElement        = null;
+    var inputElementList    = null;
+    var inputElementsLength = null;
+    var pageDocument        = null;
+
+    // Loop through the documents
+    for(var i = 0; i < documentLength; i++)
+    {
+        pageDocument        = documentList[i];
+        inputElementList    = pageDocument.getElementsByTagName("input");
+        inputElementsLength = inputElementList.length;
+
+        // Loop through all the input tags
+        for(var j = 0; j < inputElementsLength; j++)
+        {
+            inputElement = inputElementList[j];
+
+            // If hiding images and the element is an image
+            if(hide && inputElement.hasAttribute("type") && inputElement.getAttribute("type").toLowerCase() == "image")
+            {
+                inputElement.className += " webdeveloper-image";
+
+                inputElement.setAttribute("type", "submit");
+            }
+            else if(inputElement.className.indexOf("webdeveloper-image") != -1)
+            {
+                inputElement.className = webdeveloper_removeSubstring(inputElement.className, "webdeveloper-image");
+
+                inputElement.setAttribute("type", "image");
+            }
+            else
+            {
+                // This stops the fields reordering
+                inputElement.setAttribute("type", inputElement.getAttribute("type"));
+            }
+        }
+    }
+
+    webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/hide_images.css", id);
+}
+
+// Makes all the images full size
+function webdeveloper_makeImagesFullSize()
+{
+    var documentList   = webdeveloper_getDocuments(webdeveloper_getContentWindow());
+    var documentLength = documentList.length;
+    var image          = null;
+    var imageLength    = null;
+    var imageList      = null;
+    var pageDocument   = null;
+
+    // Loop through the documents
+    for(var i = 0; i < documentLength; i++)
+    {
+        pageDocument = documentList[i];
+        imageList    = pageDocument.images;
+        imageLength  = imageList.length;
+
+        // Loop through all the images
+        for(var j = 0; j < imageLength; j++)
+        {
+            image = imageList[j];
+
+            // If the image width is set
+            if(image.hasAttribute("width"))
+            {
+                image.removeAttribute("width");
+            }
+
+            // If the image height is set
+            if(image.hasAttribute("height"))
+            {
+                image.removeAttribute("height");
+            }
+        }
+    }
+}
+
+// Makes all the images invisible
+function webdeveloper_makeImagesInvisible(element, id)
+{
+    var documentList        = webdeveloper_getDocuments(webdeveloper_getContentWindow());
+    var documentLength      = documentList.length;
+    var image               = null;
+    var imageLength         = null;
+    var imageList           = null;
+    var inputElement        = null;
+    var inputElementList    = null;
+    var inputElementsLength = null;
+    var invisible           = element.getAttribute("checked");
+    var pageDocument        = null;
+
+    // Loop through the documents
+    for(var i = 0; i < documentLength; i++)
+    {
+        pageDocument        = documentList[i];
+        imageList           = pageDocument.images;
+        imageLength         = imageList.length;
+        inputElementList    = pageDocument.getElementsByTagName("input");
+        inputElementsLength = inputElementList.length;
+
+        // Loop through all the input tags
+        for(var j = 0; j < inputElementsLength; j++)
+        {
+            inputElement = inputElementList[j];
+
+            // If making images invisible and the element is an image
+            if(invisible && inputElement.hasAttribute("type") && inputElement.getAttribute("type").toLowerCase() == "image")
+            {
+                inputElement.className += " webdeveloper-image";
+
+                inputElement.setAttribute("type", "submit");
+            }
+            else if(inputElement.className.indexOf("webdeveloper-image") != -1)
+            {
+                inputElement.className = webdeveloper_removeSubstring(inputElement.className, "webdeveloper-image");
+
+                inputElement.setAttribute("type", "image");
+            }
+            else
+            {
+                // This stops the fields reordering
+                inputElement.setAttribute("type", inputElement.getAttribute("type"));
+            }
+        }
+
+        // Loop through all the images
+        for(j = 0; j < imageLength; j++)
+        {
+            image = imageList[j];
+
+            // If making images invisible
+            if(invisible)
+            {
+                // If the image width is not set and the image is not broken
+                if(!image.hasAttribute("width") && image.naturalWidth)
+                {
+                    image.setAttribute("width", image.naturalWidth);
+                }
+
+                // If the image height is not set and the image is not broken
+                if(!image.hasAttribute("height") && image.naturalHeight)
+                {
+                    image.setAttribute("height", image.naturalHeight);
+                }
+
+                image.setAttribute("src", "chrome://webdeveloper/content/images/spacer.gif?" + image.getAttribute("src"));
+            }
+            else
+            {
+                image.setAttribute("src", webdeveloper_removeSubstring(image.getAttribute("src"), "chrome://webdeveloper/content/images/spacer.gif?"));
+            }
+        }
+    }
+
+    webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/make_images_invisible.css", id);
+}
+
+// Outlines all images
+function webdeveloper_outlineAllImages(element)
+{
+    webdeveloper_outlineBackgroundImages(element, false);
+    webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_all_images.css", "webdeveloper-outline-all-images");
+}
+
+// Outlines all background images
+function webdeveloper_outlineBackgroundImages(element, toggleStyleSheet)
+{
+    var backgroundImage = null;
+    var checked         = element.getAttribute("checked");
+    var cssURI          = CSSPrimitiveValue.CSS_URI;
+    var documentList    = webdeveloper_getDocuments(webdeveloper_getContentWindow());
+    var documentLength  = documentList.length;
+    var node            = null;
+    var pageDocument    = null;
+    var treeWalker      = null;
+
+    // Loop through the documents
+    for(var i = 0; i < documentLength; i++)
+    {
+        pageDocument = documentList[i];
+        treeWalker   = pageDocument.createTreeWalker(webdeveloper_getDocumentBodyElement(pageDocument), NodeFilter.SHOW_ELEMENT, null, false);
+
+        // While the tree walker has more nodes
+        while((node = treeWalker.nextNode()) != null)
+        {
+            backgroundImage = node.ownerDocument.defaultView.getComputedStyle(node, null).getPropertyCSSValue("background-image");
+
+            // If this element has a background image and it is a URL
+            if(backgroundImage && backgroundImage.primitiveType == cssURI)
+            {
+                // If the element is checked
+                if(checked)
+                {
+                    // If the style sheet should be toggled
+                    if(toggleStyleSheet)
+                    {
+                        node.style.MozOutline = "1px solid #ff0000";
+                    }
+                    else
+                    {
+                        node.style.MozOutline = "1px solid #0000ff";
+                    }
+                }
+                else
+                {
+                    webdeveloper_removeElementOutline(node);
+                }
+            }
+        }
+    }
+
+    // If the style sheet should be toggled
+    if(toggleStyleSheet)
+    {
+        webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/empty.css", "webdeveloper-outline-background-images");
+    }
+}
+
+// Outlines all the images with adjusted dimensions
+function webdeveloper_outlineImagesWithAdjustedDimensions(element)
+{
+    var checked             = element.getAttribute("checked");
+    var documentList        = webdeveloper_getDocuments(webdeveloper_getContentWindow());
+    var documentLength      = documentList.length;
+    var imageElement        = null;
+    var imageElementList    = null;
+    var imageElementsLength = null;
+    var naturalHeight       = null;
+    var naturalWidth        = null;
+    var pageDocument        = null;
+
+    // Loop through the documents
+    for(var i = 0; i < documentLength; i++)
+    {
+        pageDocument        = documentList[i];
+        imageElementList    = pageDocument.images;
+        imageElementsLength = imageElementList.length;
+
+        // Loop through all the img tags
+        for(var j = 0; j < imageElementsLength; j++)
+        {
+            imageElement  = imageElementList[j];
+            naturalHeight = imageElement.naturalHeight;
+            naturalWidth  = imageElement.naturalWidth;
+
+            // If outlining
+            if(checked)
+            {
+                // If the width or height has been adjusted
+                if((naturalWidth && imageElement.hasAttribute("width") && imageElement.getAttribute("width") != naturalWidth)
+                    || (naturalHeight && imageElement.hasAttribute("height") && imageElement.getAttribute("height") != naturalHeight))
+                {
+                    imageElement.className += " webdeveloper-adjusted-image";
+                }
+            }
+            else if(imageElement.className.indexOf("webdeveloper-adjusted-image") != -1)
+            {
+                imageElement.className = webdeveloper_removeSubstring(imageElement.className, "webdeveloper-adjusted-image");
+            }
+        }
+    }
+
+    webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_with_adjusted_dimensions.css", "webdeveloper-outline-images-with-adjusted-dimensions");
+}
+
+// Outlines all the images with oversized dimensions
+function webdeveloper_outlineImagesWithOversizedDimensions(element)
+{
+    var checked             = element.getAttribute("checked");
+    var documentList        = webdeveloper_getDocuments(webdeveloper_getContentWindow());
+    var documentLength      = documentList.length;
+    var imageElement        = null;
+    var imageElementList    = null;
+    var imageElementsLength = null;
+    var naturalHeight       = null;
+    var naturalWidth        = null;
+    var pageDocument        = null;
+
+    // Loop through the documents
+    for(var i = 0; i < documentLength; i++)
+    {
+        pageDocument        = documentList[i];
+        imageElementList    = pageDocument.images;
+        imageElementsLength = imageElementList.length;
+
+        // Loop through all the img tags
+        for(var j = 0; j < imageElementsLength; j++)
+        {
+            imageElement  = imageElementList[j];
+            naturalHeight = imageElement.naturalHeight;
+            naturalWidth  = imageElement.naturalWidth;
+
+            // If outlining
+            if(checked)
+            {
+                // If the width or height has been oversized
+                if((naturalWidth && imageElement.hasAttribute("width") && imageElement.getAttribute("width") > naturalWidth)
+                        || (naturalHeight && imageElement.hasAttribute("height") && imageElement.getAttribute("height") > naturalHeight))
+                {
+                    imageElement.className += " webdeveloper-oversized-image";
+                }
+            }
+            else if(imageElement.className.indexOf("webdeveloper-oversized-image") != -1)
+            {
+                imageElement.className = webdeveloper_removeSubstring(imageElement.className, "webdeveloper-oversized-image");
+            }
+        }
+    }
+
+    webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_with_oversized_dimensions.css", "webdeveloper-outline-images-with-oversized-dimensions");
+}
+
+// Outlines all the images with empty alt attributes
+function webdeveloper_outlineImagesWithEmptyAltAttributes(element)
+{
+    webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_with_empty_alt_attributes.css", "webdeveloper-outline-images-with-empty-alt-attributes");
+}
+
+// Outlines all the images without alt attributes
+function webdeveloper_outlineImagesWithoutAltAttributes(element)
+{
+    webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_without_alt_attributes.css", "webdeveloper-outline-images-without-alt-attributes");
+}
+
+// Outlines all the images without dimensions
+function webdeveloper_outlineImagesWithoutDimensions(element)
+{
+    webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_without_dimensions.css", "webdeveloper-outline-images-without-dimensions");
+}
+
+// Outlines all the images without title attributes
+function webdeveloper_outlineImagesWithoutTitleAttributes(element)
+{
+    webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_without_title_attributes.css", "webdeveloper-outline-images-without-title-attributes");
+}
+
+// Replaces all images with their alt attributes
+function webdeveloper_replaceImagesWithAltAttributes(element)
+{
+    var altAttribute        = null;
+    var checked             = element.getAttribute("checked");
+    var documentList        = webdeveloper_getDocuments(webdeveloper_getContentWindow());
+    var documentLength      = documentList.length;
+    var imageElement        = null;
+    var imageElementList    = null;
+    var imageElementsLength = null;
+    var pageDocument        = null;
+    var previousElement     = null;
+    var spanElement         = null;
+
+    // Loop through the documents
+    for(var i = 0; i < documentLength; i++)
+    {
+        pageDocument = documentList[i];
+
+        // Need to do this to stop the feature running twice
+        webdeveloper_removeAllElementsByXPath(pageDocument, "//span[@class='webdeveloper-replace-images-with-alt-attributes']");
+
+        // If the element is checked
+        if(checked)
+        {
+            imageElementList    = pageDocument.images;
+            imageElementsLength = imageElementList.length;
+
+            // Loop through all the img tags
+            for(var j = 0; j < imageElementsLength; j++)
+            {
+                imageElement = imageElementList[j];
+                altAttribute = imageElement.getAttribute("alt");
+                spanElement  = pageDocument.createElement("span");
+
+                // If the alt attribute is set
+                if(altAttribute)
+                {
+                    spanElement.setAttribute("class", "webdeveloper-replace-images-with-alt-attributes");
+                    spanElement.appendChild(pageDocument.createTextNode(altAttribute));
+                    imageElement.parentNode.insertBefore(spanElement, imageElement);
+                }
+            }
+        }
+    }
+
+    webdeveloper_hideImages(element, "webdeveloper-replace-images-with-alt-attributes");
+}
+
+// Toggles external site images
+function webdeveloper_toggleExternalSiteImages(element)
+{
+    var imageBehavior       = 1;
+    var legacyImageBehavior = 0;
+
+    // If disabling external images
+    if(element.getAttribute("checked"))
+    {
+        imageBehavior       = 3;
+        legacyImageBehavior = 1;
+    }
+
+    webdeveloper_setIntegerPreference("network.image.imageBehavior", legacyImageBehavior);
+    webdeveloper_setIntegerPreference("permissions.default.image", imageBehavior);
+    BrowserReload();
+}
+
+// Toggles image animations
+function webdeveloper_toggleImageAnimations(element)
+{
+    var imageBehavior = "normal";
+
+    // If disabling images
+    if(element.getAttribute("checked"))
+    {
+        imageBehavior = "none";
+    }
+
+    webdeveloper_setStringPreference("image.animation_mode", imageBehavior);
+    BrowserReload();
+}
+
+// Toggles images
+function webdeveloper_toggleImages(element)
+{
+    var imageBehavior       = 1;
+    var legacyImageBehavior = 0;
+
+    // If disabling images
+    if(element.getAttribute("checked"))
+    {
+        imageBehavior       = 2;
+        legacyImageBehavior = 2;
+    }
+
+    webdeveloper_setIntegerPreference("network.image.imageBehavior", legacyImageBehavior);
+    webdeveloper_setIntegerPreference("permissions.default.image", imageBehavior);
+    BrowserReload();
+}
+
+// Updates the disable images menu
+function webdeveloper_updateDisableImagesMenu(suffix)
+{
+    var checked                          = false;
+    var disableExternalSiteImagesChecked = false;
+    var disableExternalSiteImagesMenu    = document.getElementById("webdeveloper-disable-external-site-images-" + suffix);
+    var disableImagesChecked             = false;
+    var disableImagesPreferenceValue     = webdeveloper_getIntegerPreference("permissions.default.image", true);
+
+    // If the image preference value is set to 2
+    if(disableImagesPreferenceValue == 2)
+    {
+        disableImagesChecked = true;
+    }
+    else if(disableImagesPreferenceValue == 3)
+    {
+        disableExternalSiteImagesChecked = true;
+    }
+
+    // If the image animation preference is set to none
+    if(webdeveloper_getStringPreference("image.animation_mode", false) == "none")
+    {
+        checked = true;
+    }
+
+    webdeveloper_configureElement(document.getElementById("webdeveloper-disable-all-images-" + suffix), "checked", disableImagesChecked);
+    webdeveloper_configureElement(disableExternalSiteImagesMenu, "checked", disableExternalSiteImagesChecked);
+    webdeveloper_configureElement(disableExternalSiteImagesMenu, "disabled", disableImagesChecked);
+    webdeveloper_configureElement(document.getElementById("webdeveloper-disable-image-animations-" + suffix), "checked", checked);
+}
+
+// Updates the images menu
+function webdeveloper_updateImagesMenu(suffix)
+{
+    var disableImagesChecked         = false;
+    var disableImagesPreferenceValue = webdeveloper_getIntegerPreference("permissions.default.image", true);
+
+    // If the image preference value is set to 2
+    if(disableImagesPreferenceValue == 2)
+    {
+        disableImagesChecked = true;
+    }
+
+    webdeveloper_configureElement(document.getElementById("webdeveloper-find-broken-images-" + suffix), "disabled", disableImagesChecked);
+    webdeveloper_configureElement(document.getElementById("webdeveloper-hide-background-images-" + suffix), "disabled", disableImagesChecked);
+    webdeveloper_configureElement(document.getElementById("webdeveloper-hide-images-" + suffix), "disabled", disableImagesChecked);
+    webdeveloper_configureElement(document.getElementById("webdeveloper-make-images-full-size-" + suffix), "disabled", disableImagesChecked);
+    webdeveloper_configureElement(document.getElementById("webdeveloper-make-images-invisible-" + suffix), "disabled", disableImagesChecked);
+    webdeveloper_configureElement(document.getElementById("webdeveloper-view-image-information-" + suffix), "disabled", disableImagesChecked);
+    webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-display-alt-attributes-" + suffix), "checked", "webdeveloper-display-alt-attributes");
+    webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-display-image-dimensions-" + suffix), "checked", "webdeveloper-display-image-dimensions");
+    webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-display-image-file-sizes-" + suffix), "checked", "webdeveloper-display-image-file-sizes");
+    webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-display-image-paths-" + suffix), "checked", "webdeveloper-display-image-paths");
+    webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-hide-background-images-" + suffix), "checked", "webdeveloper-hide-background-images");
+    webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-hide-images-" + suffix), "checked", "webdeveloper-hide-images");
+    webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-make-images-invisible-" + suffix), "checked", "webdeveloper-make-images-invisible");
+    webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-replace-images-with-alt-attributes-" + suffix), "checked", "webdeveloper-replace-images-with-alt-attributes");
+}
+
+// Updates the outline images menu
+function webdeveloper_updateOutlineImagesMenu(suffix)
+{
+    webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-all-images-" + suffix), "checked", "webdeveloper-outline-all-images");
+    webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-background-images-" + suffix), "checked", "webdeveloper-outline-background-images");
+    webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-images-with-adjusted-dimensions-" + suffix), "checked", "webdeveloper-outline-images-with-adjusted-dimensions");
+    webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-images-with-empty-alt-attributes-" + suffix), "checked", "webdeveloper-outline-images-with-empty-alt-attributes");
+    webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-images-without-alt-attributes-" + suffix), "checked", "webdeveloper-outline-images-without-alt-attributes");
+    webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-images-without-dimensions-" + suffix), "checked", "webdeveloper-outline-images-without-dimensions");
+    webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-images-without-title-attributes-" + suffix), "checked", "webdeveloper-outline-images-without-title-attributes");
+}
+
+// Displays all the images for the page
+function webdeveloper_viewImageInformation()
+{
+    var cellDataElement   = null;
+    var cellHeaderElement = null;
+    var divElement        = null;
+    var documentList      = webdeveloper_getDocuments(webdeveloper_getContentWindow());
+    var documentLength    = documentList.length;
+    var documentURL       = null;
+    var fileSize          = null;
+    var height            = 0;
+    var image             = null;
+    var imageElement      = null;
+    var imageLength       = null;
+    var imageList         = new Array();
+    var imageSrc          = null;
+    var linkElement       = null;
+    var oldTab            = getBrowser().selectedTab;
+    var oldURL            = getBrowser().currentURI.spec;
+    var generatedDocument = webdeveloper_generateDocument("");
+    var bodyElement       = webdeveloper_getDocumentBodyElement(generatedDocument);
+    var headElement       = webdeveloper_getDocumentHeadElement(generatedDocument);
+    var headerElement     = generatedDocument.createElement("h1");
+    var pageDocument      = null;
+    var pElement          = null;
+    var scriptElement     = generatedDocument.createElement("script");
+    var shade             = false;
+    var spanElement       = null;
+    var stringBundle      = document.getElementById("webdeveloper-string-bundle");
+    var title             = stringBundle.getFormattedString("webdeveloper_viewImageInformationTitle", [oldURL]);
+    var tableElement      = null;
+    var tableRowElement   = null;
+    var width             = 0;
+
+    generatedDocument.title = title;
+
+    webdeveloper_addGeneratedStyles(generatedDocument);
+
+    headerElement.appendChild(generatedDocument.createTextNode(title));
+    bodyElement.appendChild(headerElement);
+
+    webdeveloper_addGeneratedTools(generatedDocument);
+
+    // Loop through the documents
+    for(var i = 0; i < documentLength; i++)
+    {
+        divElement    = generatedDocument.createElement("div");
+        headerElement = generatedDocument.createElement("h2");
+        linkElement   = generatedDocument.createElement("a");
+        pageDocument  = documentList[i];
+        documentURL   = pageDocument.documentURI;
+        imageList     = webdeveloper_getImagesForDocument(pageDocument, true, true);
+        spanElement   = generatedDocument.createElement("span");
+
+        linkElement.setAttribute("href", documentURL);
+        linkElement.appendChild(generatedDocument.createTextNode(documentURL));
+        headerElement.appendChild(linkElement);
+        bodyElement.appendChild(headerElement);
+
+        // If the tidy information preference is set
+        if(webdeveloper_getBooleanPreference("webdeveloper.information.tidy", true))
+        {
+            imageList = webdeveloper_tidyImages(imageList);
+        }
+
+        headerElement = generatedDocument.createElement("h3");
+        imageLength   = imageList.length;
+
+        spanElement.setAttribute("class", "expanded pivot");
+        headerElement.appendChild(spanElement);
+
+        // If there is one image
+        if(imageLength == 1)
+        {
+            headerElement.appendChild(generatedDocument.createTextNode(imageLength + " " + stringBundle.getString("webdeveloper_image").toLowerCase()));
+        }
+        else
+        {
+            headerElement.appendChild(generatedDocument.createTextNode(imageLength + " " + stringBundle.getString("webdeveloper_images").toLowerCase()));
+        }
+
+        bodyElement.appendChild(headerElement);
+
+        // Loop through the images
+        for(var j = 0; j < imageLength; j++)
+        {
+            image        = imageList[j];
+            height       = image.naturalHeight;
+            imageElement = generatedDocument.createElement("img");
+            imageSrc     = image.src;
+            fileSize     = webdeveloper_getFileSize(imageSrc);
+            pElement     = generatedDocument.createElement("p");
+            shade        = true;
+            tableElement = generatedDocument.createElement("table");
+            width        = image.naturalWidth;
+
+            imageElement.setAttribute("src", imageSrc);
+            pElement.appendChild(imageElement);
+            divElement.appendChild(pElement);
+
+            // Src
+            cellDataElement   = generatedDocument.createElement("td");
+            cellHeaderElement = generatedDocument.createElement("th");
+            linkElement       = generatedDocument.createElement("a");
+            tableRowElement   = generatedDocument.createElement("tr");
+
+            cellHeaderElement.appendChild(generatedDocument.createTextNode(stringBundle.getString("webdeveloper_src")));
+            tableRowElement.appendChild(cellHeaderElement);
+            linkElement.setAttribute("href", imageSrc);
+            linkElement.appendChild(generatedDocument.createTextNode(imageSrc));
+            cellDataElement.appendChild(linkElement);
+            tableRowElement.appendChild(cellDataElement);
+            tableElement.appendChild(tableRowElement);
+
+            // If there is a width
+            if(width)
+            {
+                cellDataElement   = generatedDocument.createElement("td");
+                cellHeaderElement = generatedDocument.createElement("th");
+                tableRowElement   = generatedDocument.createElement("tr");
+
+                cellHeaderElement.appendChild(generatedDocument.createTextNode(stringBundle.getString("webdeveloper_width")));
+                tableRowElement.appendChild(cellHeaderElement);
+                cellDataElement.setAttribute("class", "shaded");
+                cellDataElement.appendChild(generatedDocument.createTextNode(width));
+                tableRowElement.appendChild(cellDataElement);
+                tableElement.appendChild(tableRowElement);
+            }
+
+            // If there is a height
+            if(height)
+            {
+                cellDataElement   = generatedDocument.createElement("td");
+                cellHeaderElement = generatedDocument.createElement("th");
+                shade             = !shade;
+                tableRowElement   = generatedDocument.createElement("tr");
+
+                // If this cell should be shaded
+                if(shade)
+                {
+                    cellDataElement.setAttribute("class", "shaded");
+                }
+
+                cellHeaderElement.appendChild(generatedDocument.createTextNode(stringBundle.getString("webdeveloper_height")));
+                tableRowElement.appendChild(cellHeaderElement);
+                cellDataElement.appendChild(generatedDocument.createTextNode(height));
+                tableRowElement.appendChild(cellDataElement);
+                tableElement.appendChild(tableRowElement);
+            }
+
+            // If there is a file size
+            if(fileSize)
+            {
+                cellDataElement   = generatedDocument.createElement("td");
+                cellHeaderElement = generatedDocument.createElement("th");
+                shade             = !shade;
+                tableRowElement   = generatedDocument.createElement("tr");
+
+                // If this cell should be shaded
+                if(shade)
+                {
+                    cellDataElement.setAttribute("class", "shaded");
+                }
+
+                cellHeaderElement.appendChild(generatedDocument.createTextNode(stringBundle.getString("webdeveloper_fileSize")));
+                tableRowElement.appendChild(cellHeaderElement);
+                cellDataElement.appendChild(generatedDocument.createTextNode(webdeveloper_formatFileSize(fileSize)));
+                tableRowElement.appendChild(cellDataElement);
+                tableElement.appendChild(tableRowElement);
+            }
+
+            // If there is an alt attribute
+            if(image.hasAttribute("alt"))
+            {
+                cellDataElement   = generatedDocument.createElement("td");
+                cellHeaderElement = generatedDocument.createElement("th");
+                shade             = !shade;
+                tableRowElement   = generatedDocument.createElement("tr");
+
+                // If this cell should be shaded
+                if(shade)
+                {
+                    cellDataElement.setAttribute("class", "shaded");
+                }
+
+                cellHeaderElement.appendChild(generatedDocument.createTextNode(stringBundle.getString("webdeveloper_alt")));
+                tableRowElement.appendChild(cellHeaderElement);
+                cellDataElement.appendChild(generatedDocument.createTextNode(image.getAttribute("alt")));
+                tableRowElement.appendChild(cellDataElement);
+                tableElement.appendChild(tableRowElement);
+            }
+
+            // If there is a title attribute
+            if(image.hasAttribute("title"))
+            {
+                cellDataElement   = generatedDocument.createElement("td");
+                cellHeaderElement = generatedDocument.createElement("th");
+                shade             = !shade;
+                tableRowElement   = generatedDocument.createElement("tr");
+
+                // If this cell should be shaded
+                if(shade)
+                {
+                    cellDataElement.setAttribute("class", "shaded");
+                }
+
+                cellHeaderElement.appendChild(generatedDocument.createTextNode(stringBundle.getString("webdeveloper_title")));
+                tableRowElement.appendChild(cellHeaderElement);
+                cellDataElement.appendChild(generatedDocument.createTextNode(image.getAttribute("title")));
+                tableRowElement.appendChild(cellDataElement);
+                tableElement.appendChild(tableRowElement);
+            }
+
+            divElement.appendChild(tableElement);
+            divElement.appendChild(generatedDocument.createElement("hr"));
+        }
+
+        divElement.setAttribute("class", "output");
+        bodyElement.appendChild(divElement);
+    }
+
+    scriptElement.setAttribute("defer", "defer");
+    scriptElement.setAttribute("src", "chrome://webdeveloper/content/common/xpath.js");
+    scriptElement.setAttribute("type", "text/javascript");
+    headElement.appendChild(scriptElement);
+
+    scriptElement = generatedDocument.createElement("script");
+
+    scriptElement.setAttribute("defer", "defer");
+    scriptElement.setAttribute("src", "chrome://webdeveloper/content/generated/output_pivot.js");
+    scriptElement.setAttribute("type", "text/javascript");
+    headElement.appendChild(scriptElement);
+
+    // If the open tabs in background preference is set to true
+    if(webdeveloper_getBooleanPreference("webdeveloper.open.tabs.background", true))
+    {
+        getBrowser().selectedTab = oldTab;
+    }
+}