Bug 1847565 - [devtools] Speedup StyleSheetsManager#getStyleSheetRuleCountAndAtRules . r=devtools-reviewers,jdescottes.

Don't check if rules are instances of `CSSGroupingRule` (as `CSSStyleRule` would
match now, so it's not providing the guard we want anymore).
Avoid retrieving stylesheet window and document until it's needed, and only
compute rule line and column for the at-rules we'll return.

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

devtools/server/actors/utils/stylesheets-manager.js

@@ -512,9 +512,15 @@ class StyleSheetsManager extends EventEmitter {
 
     this._mqlList = [];
 
-    const document = styleSheet.associatedDocument;
+    // Accessing the stylesheet associated window might be slow due to cross compartment
-    const win = document?.ownerGlobal;
+    // wrappers, so only retrieve it if it's needed.
-    const CSSGroupingRule = win?.CSSGroupingRule;
+    let win;
+    const getStyleSheetAssociatedWindow = () => {
+      if (!win) {
+        win = styleSheet.associatedDocument?.ownerGlobal;
+      }
+      return win;
+    };
 
     const styleSheetRules =
       InspectorUtils.getAllStyleSheetCSSStyleRules(styleSheet);
@@ -522,58 +528,54 @@ class StyleSheetsManager extends EventEmitter {
     // We need to go through nested rules to extract all the rules we're interested in
     const atRules = [];
     for (const rule of styleSheetRules) {
-      // We only want to gather rules that can hold other rules (e.g. @media, @supports, …)
+      const className = ChromeUtils.getClassName(rule);
-      if (CSSGroupingRule && CSSGroupingRule.isInstance(rule)) {
+      if (className === "CSSMediaRule") {
-        const line = InspectorUtils.getRelativeRuleLine(rule);
+        let matches = false;
-        const column = InspectorUtils.getRuleColumn(rule);
 
-        const className = ChromeUtils.getClassName(rule);
+        try {
-        if (className === "CSSMediaRule") {
+          const mql = getStyleSheetAssociatedWindow().matchMedia(
-          let matches = false;
+            rule.media.mediaText
-
+          );
-          try {
+          matches = mql.matches;
-            const mql = win.matchMedia(rule.media.mediaText);
+          mql.onchange = this._onMatchesChange.bind(
-            matches = mql.matches;
+            this,
-            mql.onchange = this._onMatchesChange.bind(
+            resourceId,
-              this,
+            atRules.length
-              resourceId,
+          );
-              atRules.length
+          this._mqlList.push(mql);
-            );
+        } catch (e) {
-            this._mqlList.push(mql);
+          // Ignored
-          } catch (e) {
-            // Ignored
-          }
-
-          atRules.push({
-            type: "media",
-            mediaText: rule.media.mediaText,
-            conditionText: rule.conditionText,
-            matches,
-            line,
-            column,
-          });
-        } else if (className === "CSSContainerRule") {
-          atRules.push({
-            type: "container",
-            conditionText: rule.conditionText,
-            line,
-            column,
-          });
-        } else if (className === "CSSSupportsRule") {
-          atRules.push({
-            type: "support",
-            conditionText: rule.conditionText,
-            line,
-            column,
-          });
-        } else if (className === "CSSLayerBlockRule") {
-          atRules.push({
-            type: "layer",
-            layerName: rule.name,
-            line,
-            column,
-          });
         }
+
+        atRules.push({
+          type: "media",
+          mediaText: rule.media.mediaText,
+          conditionText: rule.conditionText,
+          matches,
+          line: InspectorUtils.getRelativeRuleLine(rule),
+          column: InspectorUtils.getRuleColumn(rule),
+        });
+      } else if (className === "CSSContainerRule") {
+        atRules.push({
+          type: "container",
+          conditionText: rule.conditionText,
+          line: InspectorUtils.getRelativeRuleLine(rule),
+          column: InspectorUtils.getRuleColumn(rule),
+        });
+      } else if (className === "CSSSupportsRule") {
+        atRules.push({
+          type: "support",
+          conditionText: rule.conditionText,
+          line: InspectorUtils.getRelativeRuleLine(rule),
+          column: InspectorUtils.getRuleColumn(rule),
+        });
+      } else if (className === "CSSLayerBlockRule") {
+        atRules.push({
+          type: "layer",
+          layerName: rule.name,
+          line: InspectorUtils.getRelativeRuleLine(rule),
+          column: InspectorUtils.getRuleColumn(rule),
+        });
       }
     }
     return { ruleCount, atRules };