1 files changed, 21 insertions, 10 deletions
diff --git a/devtools/server/actors/utils/stylesheets-manager.js b/devtools/server/actors/utils/stylesheets-manager.js
index a9c0705e8d..1c065afd4e 100644
--- a/devtools/server/actors/utils/stylesheets-manager.js
+++ b/devtools/server/actors/utils/stylesheets-manager.js
@@ -446,10 +446,12 @@ class StyleSheetsManager extends EventEmitter {
     InspectorUtils.parseStyleSheet(styleSheet, text);
     modifiedStyleSheets.set(styleSheet, text);
 
-    const { atRules, ruleCount } =
-      this.getStyleSheetRuleCountAndAtRules(styleSheet);
-
+    // getStyleSheetRuleCountAndAtRules can be costly, so only call it when needed,
+    // i.e. when the whole stylesheet is modified, not when a rule body is.
+    let atRules, ruleCount;
     if (kind !== UPDATE_PRESERVING_RULES) {
+      ({ atRules, ruleCount } =
+        this.getStyleSheetRuleCountAndAtRules(styleSheet));
       this.#notifyPropertyChanged(resourceId, "ruleCount", ruleCount);
     }
 
@@ -465,13 +467,15 @@ class StyleSheetsManager extends EventEmitter {
       });
     }
 
-    this.#onStyleSheetUpdated({
-      resourceId,
-      updateKind: "at-rules-changed",
-      updates: {
-        resourceUpdates: { atRules },
-      },
-    });
+    if (kind !== UPDATE_PRESERVING_RULES) {
+      this.#onStyleSheetUpdated({
+        resourceId,
+        updateKind: "at-rules-changed",
+        updates: {
+          resourceUpdates: { atRules },
+        },
+      });
+    }
   }
 
   /**
@@ -705,6 +709,13 @@ class StyleSheetsManager extends EventEmitter {
           line: InspectorUtils.getRelativeRuleLine(rule),
           column: InspectorUtils.getRuleColumn(rule),
         });
+      } else if (className === "CSSPropertyRule") {
+        atRules.push({
+          type: "property",
+          propertyName: rule.name,
+          line: InspectorUtils.getRelativeRuleLine(rule),
+          column: InspectorUtils.getRuleColumn(rule),
+        });
       }
     }
     return {