Revert "Bug 1972505 - [devtools] Don't render rule source for inline style rule. r=devtools-reviewers,ochameau." for causing dt failures @ browser_browser_toolbox_ruleview_stylesheet.js

This reverts commit 1740b401a40bac013c70bb5b68d48aae6df16e19.

Author: Alexandru Marc

devtools/client/inspector/rules/rules.js

@@ -1672,7 +1672,7 @@ CssRuleView.prototype = {
       ? styleSheetSource === this.searchData.strictSearchValue
       : styleSheetSource.includes(this.searchValue);
 
-    if (isStyleSheetHighlighted && rule.editor.source) {
+    if (isStyleSheetHighlighted) {
       rule.editor.source.classList.add("ruleview-highlight");
     }
 

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

@@ -139,18 +139,20 @@ RuleEditor.prototype = {
     // span to be placed absolutely against.
     this.element.style.position = "relative";
 
-    // Add the source link for supported rules. inline style and pres hints are not visible
-    // in the StyleEditor, so don't show anything for such rule.
-    if (this.rule.domRule.type !== ELEMENT_STYLE) {
-      this.source = createChild(this.element, "div", {
-        class: "ruleview-rule-source theme-link",
-      });
-      this.source.addEventListener("click", this._onSourceClick);
+    // Add the source link.
+    this.source = createChild(this.element, "div", {
+      class: "ruleview-rule-source theme-link",
+    });
+    this.source.addEventListener("click", this._onSourceClick);
+
+    // inline style are not visible in the StyleEditor, so don't create an actual link
+    // element for their location.
+    const sourceLabel = this.doc.createElement(
+      this.rule.domRule.type === ELEMENT_STYLE ? "span" : "a"
+    );
+    sourceLabel.classList.add("ruleview-rule-source-label");
+    this.source.appendChild(sourceLabel);
 
-      const sourceLabel = this.doc.createElement("a");
-      sourceLabel.classList.add("ruleview-rule-source-label");
-      this.source.appendChild(sourceLabel);
-    }
     this.updateSourceLink();
 
     if (this.rule.domRule.ancestorData.length) {
@@ -494,14 +496,13 @@ RuleEditor.prototype = {
    * Called when a tool is registered or unregistered.
    */
   _onToolChanged() {
-    if (!this.source) {
-      return;
-    }
-
     // When the source editor is registered, update the source links
     // to be clickable; and if it is unregistered, update the links to
-    // be unclickable.
-    if (this.toolbox.isToolRegistered("styleeditor")) {
+    // be unclickable.  However, some links are never clickable, so
+    // filter those out first.
+    if (this.source.getAttribute("unselectable") === "permanent") {
+      // Nothing.
+    } else if (this.toolbox.isToolRegistered("styleeditor")) {
       this.source.removeAttribute("unselectable");
     } else {
       this.source.setAttribute("unselectable", "true");
@@ -573,31 +574,38 @@ RuleEditor.prototype = {
   },
 
   updateSourceLink() {
-    if (this.source) {
-      if (this.rule.isSystem) {
-        const sourceLabel = this.element.querySelector(
-          ".ruleview-rule-source-label"
-        );
-        const uaLabel = STYLE_INSPECTOR_L10N.getStr("rule.userAgentStyles");
-        sourceLabel.textContent = uaLabel + " " + this.rule.title;
-        sourceLabel.setAttribute("href", this.rule.sheet?.href);
-      } else {
-        this._updateLocation(null);
-      }
+    if (this.rule.isSystem) {
+      const sourceLabel = this.element.querySelector(
+        ".ruleview-rule-source-label"
+      );
+      const uaLabel = STYLE_INSPECTOR_L10N.getStr("rule.userAgentStyles");
+      sourceLabel.textContent = uaLabel + " " + this.rule.title;
+      sourceLabel.setAttribute("href", this.rule.sheet?.href);
+    } else {
+      this._updateLocation(null);
+    }
 
-      if (this.rule.sheet && !this.rule.isSystem) {
-        // Only get the original source link if the rule isn't a system
-        // rule and if it isn't an inline rule.
-        if (this._unsubscribeSourceMap) {
-          this._unsubscribeSourceMap();
-        }
-        this._unsubscribeSourceMap = this.sourceMapURLService.subscribeByID(
-          this.rule.sheet.resourceId,
-          this.rule.ruleLine,
-          this.rule.ruleColumn,
-          this._updateLocation
-        );
+    if (
+      this.rule.sheet &&
+      !this.rule.isSystem &&
+      this.rule.domRule.type !== ELEMENT_STYLE
+    ) {
+      // Only get the original source link if the rule isn't a system
+      // rule and if it isn't an inline rule.
+      if (this._unsubscribeSourceMap) {
+        this._unsubscribeSourceMap();
       }
+      this._unsubscribeSourceMap = this.sourceMapURLService.subscribeByID(
+        this.rule.sheet.resourceId,
+        this.rule.ruleLine,
+        this.rule.ruleColumn,
+        this._updateLocation
+      );
+      // Set "unselectable" appropriately.
+      this._onToolChanged();
+    } else if (this.rule.domRule.type === ELEMENT_STYLE) {
+      this.source.setAttribute("unselectable", "permanent");
+    } else {
       // Set "unselectable" appropriately.
       this._onToolChanged();
     }

devtools/client/inspector/test/shared-head.js

@@ -695,8 +695,8 @@ function getRuleViewSelector(view, selectorText) {
  * @return {DOMNode} The link if any at this index
  */
 function getRuleViewLinkByIndex(view, index) {
-  const ruleEl = view.styleDocument.querySelectorAll(".ruleview-rule")[index];
-  return ruleEl.querySelector(".ruleview-rule-source");
+  const links = view.styleDocument.querySelectorAll(".ruleview-rule-source");
+  return links[index];
 }
 
 /**