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 }