Bug 921686 - Firefox css inspector doesn't find the correct url for some images. r=mratcliffe

browser/devtools/styleinspector/rule-view.js

@@ -1748,8 +1748,8 @@ function TextPropertyEditor(aRuleEditor, aProperty)
   this.browserWindow = this.doc.defaultView.top;
   this.removeOnRevert = this.prop.value === "";
 
-  let sheet = this.prop.rule.sheet;
-  let href = sheet ? (sheet.href || sheet.nodeHref) : null;
+  let domRule = this.prop.rule.domRule;
+  let href = domRule ? domRule.href : null;
   if (href) {
     this.sheetURI = IOService.newURI(href, null, null);
   }

browser/devtools/styleinspector/test/browser_styleinspector_bug_677930_urls_clickable.html

@@ -14,7 +14,9 @@
 
     <div class="base64">Background image with base64 url (loaded from external css)</div>
 
-    <div class="inline" style="background: url(test-image.png);">Background image with relative path (loaded from style attribute)</div>';
+    <div class="inline" style="background: url(test-image.png);">Background image with relative path (loaded from style attribute)</div>
+
+    <div class="inline-resolved" style="background-image: url(./test-image.png)">Background image with resolved relative path (loaded from style attribute)</div>
 
     <div class="noimage">No background image :(</div>
   </body>

browser/devtools/styleinspector/test/browser_styleinspector_bug_677930_urls_clickable.js

@@ -26,12 +26,14 @@ function selectNode(aInspector, aRuleView)
   let inline = doc.querySelector(".inline");
   let base64 = doc.querySelector(".base64");
   let noimage = doc.querySelector(".noimage");
+  let inlineresolved = doc.querySelector(".inline-resolved");
 
   ok(relative, "captain, we have the relative div");
   ok(absolute, "captain, we have the absolute div");
   ok(inline, "captain, we have the inline div");
   ok(base64, "captain, we have the base64 div");
   ok(noimage, "captain, we have the noimage div");
+  ok(inlineresolved, "captain, we have the inlineresolved div");
 
   inspector.selection.setNode(relative);
   inspector.once("inspector-updated", () => {
@@ -61,12 +63,20 @@ function selectNode(aInspector, aRuleView)
           ok (base64Link, "Link exists for base64 node");
           ok (base64Link.getAttribute("href"), BASE_64_URL);
 
-          inspector.selection.setNode(noimage);
+          inspector.selection.setNode(inlineresolved);
           inspector.once("inspector-updated", () => {
-            is(inspector.selection.node, noimage, "selection matches the inline element");
-            let noimageLink = contentDoc.querySelector(".ruleview-propertycontainer a");
-            ok (!noimageLink, "There is no link for the node with no background image");
-            finishUp();
+            is(inspector.selection.node, inlineresolved, "selection matches the style tag element");
+            let inlineResolvedLink = contentDoc.querySelector(".ruleview-propertycontainer a");
+            ok (inlineResolvedLink, "Link exists for style tag node");
+            ok (inlineResolvedLink.getAttribute("href"), TEST_IMAGE);
+
+            inspector.selection.setNode(noimage);
+            inspector.once("inspector-updated", () => {
+              is(inspector.selection.node, noimage, "selection matches the inline element");
+              let noimageLink = contentDoc.querySelector(".ruleview-propertycontainer a");
+              ok (!noimageLink, "There is no link for the node with no background image");
+              finishUp();
+            });
           });
         });
       });