Bug 460146 - CSS3 border-image images should appear in Page Info -> Media; r=db48x

browser/base/content/pageinfo/pageInfo.js

@@ -341,6 +341,9 @@ function onLoadPageInfo()
   gStrings.notSet = gBundle.getString("notset");
   gStrings.mediaImg = gBundle.getString("mediaImg");
   gStrings.mediaBGImg = gBundle.getString("mediaBGImg");
+  gStrings.mediaBorderImg = gBundle.getString("mediaBorderImg");
+  gStrings.mediaListImg = gBundle.getString("mediaListImg");
+  gStrings.mediaCursor = gBundle.getString("mediaCursor");
   gStrings.mediaObject = gBundle.getString("mediaObject");
   gStrings.mediaEmbed = gBundle.getString("mediaEmbed");
   gStrings.mediaLink = gBundle.getString("mediaLink");
@@ -663,13 +666,35 @@ function addImage(url, type, alt, elem, isBg)
 
 function grabAll(elem)
 {
-  // check for background images, any node may have multiple
+  // check for images defined in CSS (e.g. background, borders), any node may have multiple
   var computedStyle = elem.ownerDocument.defaultView.getComputedStyle(elem, "");
+
   if (computedStyle) {
-    Array.forEach(computedStyle.getPropertyCSSValue("background-image"), function (url) {
-      if (url.primitiveType == CSSPrimitiveValue.CSS_URI)
-        addImage(url.getStringValue(), gStrings.mediaBGImg, gStrings.notSet, elem, true);
-    });
+    var addImgFunc = function (label, val) {
+      if (val.primitiveType == CSSPrimitiveValue.CSS_URI) {
+        addImage(val.getStringValue(), label, gStrings.notSet, elem, true);
+      }
+      else if (val.primitiveType == CSSPrimitiveValue.CSS_STRING) {
+        // This is for -moz-image-rect.
+        // TODO: Reimplement once bug 714757 is fixed
+        var strVal = val.getStringValue();
+        if (strVal.search(/^.*url\(\"?/) > -1) {
+          url = strVal.replace(/^.*url\(\"?/,"").replace(/\"?\).*$/,"");
+          addImage(url, label, gStrings.notSet, elem, true);
+        }
+      }
+      else if (val.cssValueType == CSSValue.CSS_VALUE_LIST) {
+        // recursively resolve multiple nested CSS value lists
+        for (var i = 0; i < val.length; i++)
+          addImgFunc(label, val.item(i));
+      }
+    };
+
+    addImgFunc(gStrings.mediaBGImg, computedStyle.getPropertyCSSValue("background-image"));
+    addImgFunc(gStrings.mediaBorderImg, computedStyle.getPropertyCSSValue("-moz-border-image-source"));
+    // TODO: support unprefixed "border-image" once bug 713643 is fixed.
+    addImgFunc(gStrings.mediaListImg, computedStyle.getPropertyCSSValue("list-style-image"));
+    addImgFunc(gStrings.mediaCursor, computedStyle.getPropertyCSSValue("cursor"));
   }
 
   // one swi^H^H^Hif-else to rule them all

browser/base/content/test/Makefile.in

@@ -123,6 +123,7 @@ _BROWSER_FILES = \
                  browser_bug441778.js \
                  browser_popupNotification.js \
                  browser_bug455852.js \
+                 browser_bug460146.js \
                  browser_bug462673.js \
                  browser_bug477014.js \
                  browser_bug479408.js \

browser/base/content/test/browser_bug460146.js

@@ -0,0 +1,51 @@
+/* Check proper image url retrieval from all kinds of elements/styles */
+
+function test() {
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  
+  gBrowser.selectedBrowser.addEventListener("load", function () {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+
+    var doc = gBrowser.contentDocument;
+    var pageInfo = BrowserPageInfo(doc, "mediaTab");
+
+    pageInfo.addEventListener("load", function () {
+      pageInfo.removeEventListener("load", arguments.callee, true);
+      pageInfo.onFinished.push(function () {
+        executeSoon(function () {
+          var imageTree = pageInfo.document.getElementById("imagetree");
+          var imageRowsNum = imageTree.view.rowCount;
+
+          ok(imageTree, "Image tree is null (media tab is broken)");
+
+          ok(imageRowsNum == 7, "Number of images listed: " +
+                                imageRowsNum + ", should be 7");
+
+          pageInfo.close();
+          gBrowser.removeCurrentTab();
+          finish();
+        });
+      });
+    }, true);
+  }, true);
+
+  content.location =
+    "data:text/html," +
+    "<html>" +
+    "  <head>" +
+    "    <title>Test for media tab</title>" +
+    "    <link rel='shortcut icon' href='file:///dummy_icon.ico'>" + // Icon
+    "  </head>" +
+    "  <body style='background-image:url(about:logo?a);'>" + // Background
+    "    <img src='file:///dummy_image.gif'>" + // Image
+    "    <ul>" +
+    "      <li style='list-style:url(about:logo?b);'>List Item 1</li>" + // Bullet
+    "    </ul>  " +
+    "    <div style='-moz-border-image: url(about:logo?c) 20 20 20 20;'>test</div>" + // Border
+    "    <a href='' style='cursor: url(about:logo?d),default;'>test link</a>" + // Cursor
+    "    <object type='image/svg+xml' width=20 height=20 data='file:///dummy_object.svg'></object>" + // Object
+    "  </body>" +
+    "</html>";
+}

browser/locales/en-US/chrome/browser/pageInfo.properties

@@ -51,6 +51,9 @@ mediaImg=Image
 mediaVideo=Video
 mediaAudio=Audio
 mediaBGImg=Background
+mediaBorderImg=Border
+mediaListImg=Bullet
+mediaCursor=Cursor
 mediaObject=Object
 mediaEmbed=Embed
 mediaLink=Icon