Bug 1847565 - [devtools] Speedup StyleSheetsManager#getStyleSheetRule…

…CountAndAtRules . 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
dothq · Aug 9, 2023 · e58c09a · e58c09a
1 parent b957e64
commit e58c09a
Showing 1 changed file with 56 additions and 54 deletions.
diff --git a/devtools/server/actors/utils/stylesheets-manager.js b/devtools/server/actors/utils/stylesheets-manager.js
@@ -512,68 +512,70 @@ class StyleSheetsManager extends EventEmitter {
 
     this._mqlList = [];
 
-    const document = styleSheet.associatedDocument;
-    const win = document?.ownerGlobal;
-    const CSSGroupingRule = win?.CSSGroupingRule;
+    // Accessing the stylesheet associated window might be slow due to cross compartment
+    // wrappers, so only retrieve it if it's needed.
+    let win;
+    const getStyleSheetAssociatedWindow = () => {
+      if (!win) {
+        win = styleSheet.associatedDocument?.ownerGlobal;
+      }
+      return win;
+    };
 
     const styleSheetRules =
       InspectorUtils.getAllStyleSheetCSSStyleRules(styleSheet);
     const ruleCount = styleSheetRules.length;
     // 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, …)
-      if (CSSGroupingRule && CSSGroupingRule.isInstance(rule)) {
-        const line = InspectorUtils.getRelativeRuleLine(rule);
-        const column = InspectorUtils.getRuleColumn(rule);
-
-        const className = ChromeUtils.getClassName(rule);
-        if (className === "CSSMediaRule") {
-          let matches = false;
-
-          try {
-            const mql = win.matchMedia(rule.media.mediaText);
-            matches = mql.matches;
-            mql.onchange = this._onMatchesChange.bind(
-              this,
-              resourceId,
-              atRules.length
-            );
-            this._mqlList.push(mql);
-          } 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,
-          });
+      const className = ChromeUtils.getClassName(rule);
+      if (className === "CSSMediaRule") {
+        let matches = false;
+
+        try {
+          const mql = getStyleSheetAssociatedWindow().matchMedia(
+            rule.media.mediaText
+          );
+          matches = mql.matches;
+          mql.onchange = this._onMatchesChange.bind(
+            this,
+            resourceId,
+            atRules.length
+          );
+          this._mqlList.push(mql);
+        } catch (e) {
+          // Ignored
         }
+
+        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 };