Bug 1747195 - [devtools] Put rule media query above the selector. r=jdescottes.

This is preliminary work before showing the @layer information above the rule view as well.

Differential Revision: https://phabricator.services.mozilla.com/D136619

devtools/client/inspector/rules/test/browser_rules_content_01.js

@@ -41,17 +41,21 @@ add_task(async function() {
   await selectNode("#testid", inspector);
 
   let linkText = getRuleViewLinkTextByIndex(view, 1);
+  is(linkText, "inline:3", "link text at index 1 has expected content.");
+
+  const mediaText = getRuleViewMediaTextByIndex(view, 1);
   is(
-    linkText,
-    "inline:3 @screen and (min-width: 10px)",
-    "link text at index 1 contains media query text."
+    mediaText,
+    "@media screen and (min-width: 10px)",
+    "media text at index 1 has expected content"
   );
 
   linkText = getRuleViewLinkTextByIndex(view, 2);
+  is(linkText, "inline:7", "link text at index 2 has expected content.");
   is(
-    linkText,
-    "inline:7",
-    "link text at index 2 contains no media query text."
+    getRuleViewMediaElementByIndex(view, 2),
+    null,
+    "There is no media text element for rule at index 2"
   );
 
   const selector = getRuleViewRuleEditor(view, 2).selectorText;
@@ -66,3 +70,13 @@ add_task(async function() {
     ".unmatched should not be matched."
   );
 });
+
+function getRuleViewMediaElementByIndex(view, ruleIndex) {
+  return view.styleDocument.querySelector(
+    `.ruleview-rule:nth-of-type(${ruleIndex + 1}) .ruleview-rule-parent-data`
+  );
+}
+
+function getRuleViewMediaTextByIndex(view, ruleIndex) {
+  return getRuleViewMediaElementByIndex(view, ruleIndex)?.textContent;
+}

devtools/client/inspector/rules/views/rule-editor.js

@@ -135,6 +135,18 @@ RuleEditor.prototype = {
 
     this.updateSourceLink();
 
+    if (this.rule.mediaText) {
+      const text = `@media ${this.rule.mediaText}`;
+      createChild(this.element, "span", {
+        class: "ruleview-rule-parent-data theme-link",
+        // We force the string to be LTR in CSS, but for some reason, the `@` char is seen
+        // as not part of the string in the tooltip, and is displayed "at the end" of the
+        // string in RTL locales. To workaround this, we force LTR with \u202D
+        title: `\u202A${text}`,
+        textContent: text,
+      });
+    }
+
     const code = createChild(this.element, "div", {
       class: "ruleview-code",
     });
@@ -302,10 +314,6 @@ RuleEditor.prototype = {
       sourceTextContent += ":" + line;
       title += ":" + line;
     }
-    if (this.rule.mediaText) {
-      sourceTextContent += " @" + this.rule.mediaText;
-      title += " @" + this.rule.mediaText;
-    }
 
     const sourceLabel = this.element.querySelector(
       ".ruleview-rule-source-label"

devtools/client/themes/rules.css

@@ -148,10 +148,6 @@
   padding: 0;
 }
 
-.ruleview-code {
-  direction: ltr;
-}
-
 .ruleview-property:not(:hover) > .ruleview-enableproperty {
   pointer-events: none;
 }
@@ -267,6 +263,7 @@
 .ruleview-rule {
   border-bottom: 1px solid var(--theme-splitter-color);
   padding: 2px 4px;
+  direction: ltr;
 }
 
 #ruleview-container-focusable > .ruleview-rule:last-child {
@@ -696,6 +693,17 @@
   border-bottom-color: hsl(0,0%,50%);
 }
 
+/* @media and @layer rule info element */
+.ruleview-rule-parent-data {
+  max-width: 100%;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* we only want to have it displayed on a single line. The whole string is available on
+     the title attribute of the element anyway */
+  white-space: nowrap;
+}
+
 .ruleview-selectorcontainer {
   word-wrap: break-word;
   cursor: text;