Bug 1120570 - Fix media query in rule view link text r=bgrins

browser/devtools/styleinspector/rule-view.js

@@ -435,11 +435,8 @@ function Rule(aElementStyle, aOptions) {
   this.keyframes = aOptions.keyframes || null;
   this._modificationDepth = 0;
 
-  if (this.domRule) {
-    let parentRule = this.domRule.parentRule;
-    if (parentRule && parentRule.type == Ci.nsIDOMCSSRule.MEDIA_RULE) {
-      this.mediaText = parentRule.mediaText;
-    }
+  if (this.domRule && this.domRule.mediaText) {
+    this.mediaText = this.domRule.mediaText;
   }
 
   // Populate the text properties with the style's current cssText
@@ -507,7 +504,7 @@ Rule.prototype = {
    * The rule's line within a stylesheet
    */
   get ruleLine() {
-    return this.domRule ? this.domRule.line : null;
+    return this.domRule ? this.domRule.line : "";
   },
 
   /**
@@ -529,10 +526,12 @@ Rule.prototype = {
     if (this._originalSourceStrings) {
       return promise.resolve(this._originalSourceStrings);
     }
-    return this.domRule.getOriginalLocation().then(({href, line}) => {
+    return this.domRule.getOriginalLocation().then(({href, line, mediaText}) => {
+      let mediaString = mediaText ? " @" + mediaText : "";
+
       let sourceStrings = {
-        full: href + ":" + line,
-        short: CssLogic.shortSource({href: href}) + ":" + line
+        full: (href || CssLogic.l10n("rule.sourceInline")) + ":" + line + mediaString,
+        short: CssLogic.shortSource({href: href}) + ":" + line + mediaString
       };
 
       this._originalSourceStrings = sourceStrings;

browser/devtools/styleinspector/test/browser_ruleview_content_01.js

@@ -12,8 +12,10 @@ add_task(function*() {
 
   info("Creating the test document");
   let style = "" +
-    "#testid {" +
-    "  background-color: blue;" +
+    "@media screen and (min-width: 10px) {" +
+    "  #testid {" +
+    "    background-color: blue;" +
+    "  }" +
     "}" +
     ".testclass, .unmatched {" +
     "  background-color: green;" +
@@ -35,6 +37,15 @@ function* testContentAfterNodeSelection(inspector, ruleView) {
     "After highlighting null, has a no-results element again.");
 
   yield selectNode("#testid", inspector);
+
+  let linkText = getRuleViewLinkTextByIndex(ruleView, 1);
+  is(linkText, "inline:1 @screen and (min-width: 10px)",
+    "link text at index 1 contains media query text.");
+
+  linkText = getRuleViewLinkTextByIndex(ruleView, 2);
+  is(linkText, "inline:1",
+    "link text at index 2 contains no media query text.");
+
   let classEditor = getRuleViewRuleEditor(ruleView, 2);
   is(classEditor.selectorText.querySelector(".ruleview-selector-matched").textContent,
     ".testclass", ".textclass should be matched.");

browser/devtools/styleinspector/test/head.js

@@ -693,6 +693,17 @@ function getRuleViewLinkByIndex(view, index) {
   return links[index];
 }
 
+/**
+ * Get rule-link text from the rule-view given its index
+ * @param {CssRuleView} view The instance of the rule-view panel
+ * @param {Number} index The index of the link to get
+ * @return {String} The string at this index
+ */
+function getRuleViewLinkTextByIndex(view, index) {
+  let link = getRuleViewLinkByIndex(view, index);
+  return link.querySelector(".source-link-label").value;
+}
+
 /**
  * Get the rule editor from the rule-view given its index
  * @param {CssRuleView} view The instance of the rule-view panel

toolkit/devtools/server/actors/styles.js

@@ -991,6 +991,17 @@ var StyleRuleActor = protocol.ActorClass({
 
     if (this.rawRule.parentRule) {
       form.parentRule = this.pageStyle._styleRef(this.rawRule.parentRule).actorID;
+
+      // CSS rules that we call media rules are STYLE_RULES that are children
+      // of MEDIA_RULEs. We need to check the parentRule to check if a rule is
+      // a media rule so we do this here instead of in the switch statement
+      // below.
+      if (this.rawRule.parentRule.type === Ci.nsIDOMCSSRule.MEDIA_RULE) {
+        form.media = [];
+        for (let i = 0, n = this.rawRule.parentRule.media.length; i < n; i++) {
+          form.media.push(this.rawRule.parentRule.media.item(i));
+        }
+      }
     }
     if (this.rawRule.parentStyleSheet) {
       form.parentStyleSheet = this.pageStyle._sheetRef(this.rawRule.parentStyleSheet).actorID;
@@ -1014,12 +1025,6 @@ var StyleRuleActor = protocol.ActorClass({
       case Ci.nsIDOMCSSRule.IMPORT_RULE:
         form.href = this.rawRule.href;
         break;
-      case Ci.nsIDOMCSSRule.MEDIA_RULE:
-        form.media = [];
-        for (let i = 0, n = this.rawRule.media.length; i < n; i++) {
-          form.media.push(this.rawRule.media.item(i));
-        }
-        break;
       case Ci.nsIDOMCSSRule.KEYFRAMES_RULE:
         form.cssText = this.rawRule.cssText;
         form.name = this.rawRule.name;
@@ -1245,9 +1250,10 @@ var StyleRuleFront = protocol.FrontClass(StyleRuleActor, {
     if (this._originalLocation) {
       return promise.resolve(this._originalLocation);
     }
-
     let parentSheet = this.parentStyleSheet;
     if (!parentSheet) {
+      // This rule doesn't belong to a stylesheet so it is an inline style.
+      // Inline styles do not have any mediaText so we can return early.
       return promise.resolve(this.location);
     }
     return parentSheet.getOriginalLocation(this.line, this.column)
@@ -1255,8 +1261,9 @@ var StyleRuleFront = protocol.FrontClass(StyleRuleActor, {
         let location = {
           href: source,
           line: line,
-          column: column
-        }
+          column: column,
+          mediaText: this.mediaText
+        };
         if (fromSourceMap === false) {
           location.source = this.parentStyleSheet;
         }
@@ -1265,7 +1272,7 @@ var StyleRuleFront = protocol.FrontClass(StyleRuleActor, {
         }
         this._originalLocation = location;
         return location;
-      })
+      });
   }
 });
 

toolkit/devtools/server/actors/stylesheets.js

@@ -713,7 +713,7 @@ let StyleSheetActor = protocol.ActorClass({
         source: this.href,
         line: line,
         column: column
-      }
+      };
     });
   }, {
     request: {