Bug 715075 - Page Info reads image width and height synchronously after setting src, leads to 0px x 0px if the image isn't in your cache (e.g. after clearing cache). r=mak

browser/base/content/pageinfo/pageInfo.js

@@ -979,18 +979,33 @@ function makePreview(row)
 
     var isProtocolAllowed = checkProtocol(gImageView.data[row]);
 
+    function updateMediaDimensions(physWidth, physHeight, width, height) {
+      var imageSize = "";
+      if (width != physWidth || height != physHeight) {
+        imageSize = gBundle.getFormattedString("mediaDimensionsScaled",
+                                               [formatNumber(physWidth),
+                                                formatNumber(physHeight),
+                                                formatNumber(width),
+                                                formatNumber(height)]);
+      }
+      else {
+        imageSize = gBundle.getFormattedString("mediaDimensions",
+                                               [formatNumber(width),
+                                                formatNumber(height)]);
+      }
+      setItemValue("imagedimensiontext", imageSize);
+    };
+
     var newImage = new Image;
     newImage.id = "thepreviewimage";
-    var physWidth = 0, physHeight = 0;
-    var width = 0, height = 0;
 
-    if ((item instanceof HTMLLinkElement || item instanceof HTMLInputElement ||
-         item instanceof HTMLImageElement ||
-         item instanceof SVGImageElement ||
-         (item instanceof HTMLObjectElement && mimeType.startsWith("image/")) || isBG) && isProtocolAllowed) {
-      newImage.setAttribute("src", url);
-      physWidth = newImage.width || 0;
-      physHeight = newImage.height || 0;
+    function readImageDimensions() {
+      // Check if another media has been loaded in the meanwhile.
+      if (newImage.getAttribute("src") != url)
+        return;
+
+      var physWidth = newImage.width || 0;
+      var physHeight = newImage.height || 0;
 
       // "width" and "height" attributes must be set to newImage,
       // even if there is no "width" or "height attribute in item;
@@ -1011,11 +1026,26 @@ function makePreview(row)
         newImage.height = item.height.baseVal.value;
       }
 
-      width = newImage.width;
-      height = newImage.height;
+      var width = newImage.width;
+      var height = newImage.height;
 
-      document.getElementById("theimagecontainer").collapsed = false
+      document.getElementById("theimagecontainer").collapsed = false;
       document.getElementById("brokenimagecontainer").collapsed = true;
+
+      updateMediaDimensions(physWidth, physHeight, width, height);
+    };
+
+    if ((item instanceof HTMLLinkElement || item instanceof HTMLInputElement ||
+         item instanceof HTMLImageElement ||
+         item instanceof SVGImageElement ||
+         (item instanceof HTMLObjectElement && mimeType.startsWith("image/")) || isBG) && isProtocolAllowed) {
+      newImage.setAttribute("src", url);
+      // Hide the field by default, so it's shown only when available.
+      setItemValue("imagedimensiontext", "");
+
+      // Wait for the image to be loaded before checking its
+      // dimensions, because it may not have been cached yet.
+      newImage.onload = readImageDimensions;
     }
 #ifdef MOZ_MEDIA
     else if (item instanceof HTMLVideoElement && isProtocolAllowed) {
@@ -1023,11 +1053,11 @@ function makePreview(row)
       newImage.id = "thepreviewimage";
       newImage.mozLoadFrom(item);
       newImage.controls = true;
-      width = physWidth = item.videoWidth;
-      height = physHeight = item.videoHeight;
 
       document.getElementById("theimagecontainer").collapsed = false;
       document.getElementById("brokenimagecontainer").collapsed = true;
+
+      updateMediaDimensions(item.videoWidth, item.videoHeight, item.videoWidth, item.videoHeight);
     }
     else if (item instanceof HTMLAudioElement && isProtocolAllowed) {
       newImage = new Audio;
@@ -1038,6 +1068,8 @@ function makePreview(row)
 
       document.getElementById("theimagecontainer").collapsed = false;
       document.getElementById("brokenimagecontainer").collapsed = true;
+
+      setItemValue("imagedimensiontext", "");
     }
 #endif
     else {
@@ -1045,24 +1077,9 @@ function makePreview(row)
       // or elements not [yet] handled (e.g., object, embed).
       document.getElementById("brokenimagecontainer").collapsed = false;
       document.getElementById("theimagecontainer").collapsed = true;
-    }
 
-    var imageSize = "";
-    if (url && !isAudio) {
-      if (width != physWidth || height != physHeight) {
-        imageSize = gBundle.getFormattedString("mediaDimensionsScaled",
-                                               [formatNumber(physWidth),
-                                                formatNumber(physHeight),
-                                                formatNumber(width),
-                                                formatNumber(height)]);
+      setItemValue("imagedimensiontext", "");
     }
-      else {
-        imageSize = gBundle.getFormattedString("mediaDimensions",
-                                               [formatNumber(width),
-                                                formatNumber(height)]);
-      }
-    }
-    setItemValue("imagedimensiontext", imageSize);
 
     makeBlockImage(url);