Bug 1884072 - [devtools] Make getStyleSheetRuleCountAndAtRules faster. r=layout-reviewers,devtools-reviewers,emilio,ochameau.

We were returning the whole list of rules for a given stylesheet, and then
picking the at-rules we wanted in JS.
This patch make it so that the InspectorUtils method will only return the
at-rules we want directly, so we're building a smaller array of rule in the end.
Since `getStyleSheetRuleCountAndAtRules` also need to return the total number
of rules, this adds a simple `InspectorUtils.getStyleSheetRulesCount` method that
does that.

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

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

@@ -640,10 +640,14 @@ class StyleSheetsManager extends EventEmitter {
       return win;
     };
 
-    const styleSheetRules =
+    // This returns the following type of at-rules:
-      InspectorUtils.getAllStyleSheetCSSStyleRules(styleSheet);
+    // - CSSMediaRule
-    const ruleCount = styleSheetRules.length;
+    // - CSSContainerRule
-    // We need to go through nested rules to extract all the rules we're interested in
+    // - CSSSupportsRule
+    // - CSSLayerBlockRule
+    // New types can be added from InpsectorUtils.cpp `CollectAtRules`
+    const { atRules: styleSheetRules, ruleCount } =
+      InspectorUtils.getStyleSheetRuleCountAndAtRules(styleSheet);
     const atRules = [];
     for (const rule of styleSheetRules) {
       const className = ChromeUtils.getClassName(rule);
@@ -703,7 +707,10 @@ class StyleSheetsManager extends EventEmitter {
         });
       }
     }
-    return { ruleCount, atRules };
+    return {
+      ruleCount,
+      atRules,
+    };
   }
 
   /**

dom/chrome-webidl/InspectorUtils.webidl

@@ -23,10 +23,10 @@ namespace InspectorUtils {
   unsigned long getRelativeRuleLine(CSSRule rule);
   sequence<unsigned long> getRuleIndex(CSSRule rule);
   boolean hasRulesModifiedByCSSOM(CSSStyleSheet sheet);
-  // Get a flat list of all rules (including nested ones) of a given stylesheet.
+  // Get a flat list of specific at-rules (including nested ones) of a given stylesheet.
-  // Useful for DevTools as this is faster than in JS where we'd have a lot of
+  // Useful for DevTools (StyleEditor at-rules sidebar) as this is faster than in JS
-  // proxy access overhead building the same list.
+  // where we'd have a lot of proxy access overhead building the same list.
-  sequence<CSSRule> getAllStyleSheetCSSStyleRules(CSSStyleSheet sheet);
+  InspectorStyleSheetRuleCountAndAtRulesResult getStyleSheetRuleCountAndAtRules(CSSStyleSheet sheet);
   boolean isInheritedProperty(Document document, UTF8String property);
   sequence<DOMString> getCSSPropertyNames(optional PropertyNamesOptions options = {});
   sequence<PropertyPref> getCSSPropertyPrefs();
@@ -182,6 +182,11 @@ dictionary InspectorGetRuleBodyTextResult {
   required double endOffset;
 };
 
+dictionary InspectorStyleSheetRuleCountAndAtRulesResult {
+  required sequence<CSSRule> atRules;
+  required unsigned long ruleCount;
+};
+
 [Func="nsContentUtils::IsCallerChromeOrFuzzingEnabled",
  Exposed=Window]
 interface InspectorFontFace {

layout/inspector/InspectorUtils.cpp

@@ -399,21 +399,56 @@ bool InspectorUtils::HasRulesModifiedByCSSOM(GlobalObject& aGlobal,
   return aSheet.HasModifiedRulesForDevtools();
 }
 
-static void CollectRules(ServoCSSRuleList& aRuleList,
+static uint32_t CollectAtRules(ServoCSSRuleList& aRuleList,
-                         nsTArray<RefPtr<css::Rule>>& aResult) {
+                               Sequence<OwningNonNull<css::Rule>>& aResult) {
-  for (uint32_t i = 0, len = aRuleList.Length(); i < len; ++i) {
+  uint32_t len = aRuleList.Length();
+  uint32_t ruleCount = len;
+  for (uint32_t i = 0; i < len; ++i) {
     css::Rule* rule = aRuleList.GetRule(i);
-    aResult.AppendElement(rule);
+    // This collect rules we want to display in Devtools Style Editor toolbar.
-    if (rule->IsGroupRule()) {
+    // When adding a new StyleCssRuleType, put it in the "default" list, and
-      CollectRules(*static_cast<css::GroupRule*>(rule)->CssRules(), aResult);
+    // file a new bug with
-    }
+    // https://bugzilla.mozilla.org/enter_bug.cgi?product=DevTools&component=Style%20Editor&short_desc=Consider%20displaying%20new%20XXX%20rule%20type%20in%20at-rules%20sidebar
+    // so the DevTools team gets notified and can decide if it should be
+    // displayed.
+    switch (rule->Type()) {
+      case StyleCssRuleType::Media:
+      case StyleCssRuleType::Supports:
+      case StyleCssRuleType::LayerBlock:
+      case StyleCssRuleType::Container: {
+        Unused << aResult.AppendElement(OwningNonNull(*rule), fallible);
+        break;
       }
+      case StyleCssRuleType::Style:
+      case StyleCssRuleType::Import:
+      case StyleCssRuleType::Document:
+      case StyleCssRuleType::LayerStatement:
+      case StyleCssRuleType::FontFace:
+      case StyleCssRuleType::Page:
+      case StyleCssRuleType::Property:
+      case StyleCssRuleType::Keyframes:
+      case StyleCssRuleType::Keyframe:
+      case StyleCssRuleType::Margin:
+      case StyleCssRuleType::Namespace:
+      case StyleCssRuleType::CounterStyle:
+      case StyleCssRuleType::FontFeatureValues:
+      case StyleCssRuleType::FontPaletteValues:
+        break;
     }
 
-void InspectorUtils::GetAllStyleSheetCSSStyleRules(
+    if (rule->IsGroupRule()) {
+      ruleCount += CollectAtRules(
+          *static_cast<css::GroupRule*>(rule)->CssRules(), aResult);
+    }
+  }
+  return ruleCount;
+}
+
+void InspectorUtils::GetStyleSheetRuleCountAndAtRules(
     GlobalObject& aGlobal, StyleSheet& aSheet,
-    nsTArray<RefPtr<css::Rule>>& aResult) {
+    InspectorStyleSheetRuleCountAndAtRulesResult& aResult) {
-  CollectRules(*aSheet.GetCssRulesInternal(), aResult);
+  aResult.mRuleCount =
+      CollectAtRules(*aSheet.GetCssRulesInternal(), aResult.mAtRules);
 }
 
 /* static */

layout/inspector/InspectorUtils.h

@@ -78,9 +78,9 @@ class InspectorUtils {
   static bool HasRulesModifiedByCSSOM(GlobalObject& aGlobal,
                                       StyleSheet& aSheet);
 
-  static void GetAllStyleSheetCSSStyleRules(
+  static void GetStyleSheetRuleCountAndAtRules(
       GlobalObject& aGlobal, StyleSheet& aSheet,
-      nsTArray<RefPtr<css::Rule>>& aResult);
+      InspectorStyleSheetRuleCountAndAtRulesResult& aResult);
 
   // Utilities for working with CSS properties
   //