5 files changed, 54 insertions, 23 deletions
diff --git a/devtools/server/actors/utils/custom-formatters.js b/devtools/server/actors/utils/custom-formatters.js
index e4ae20dad7..f6d8cab797 100644
--- a/devtools/server/actors/utils/custom-formatters.js
+++ b/devtools/server/actors/utils/custom-formatters.js
@@ -71,7 +71,7 @@ function customFormatterHeader(objectActor) {
     return null;
   }
 
-  const targetActor = objectActor.thread._parent;
+  const { targetActor } = objectActor.thread;
 
   const {
     customFormatterConfigDbgObj: configDbgObj,
@@ -253,7 +253,7 @@ async function customFormatterBody(objectActor, formatter) {
 
   const customFormatterIndex = global.devtoolsFormatters.indexOf(formatter);
 
-  const targetActor = objectActor.thread._parent;
+  const { targetActor } = objectActor.thread;
   try {
     const { customFormatterConfigDbgObj, customFormatterObjectTagDepth } =
       objectActor.hooks;
diff --git a/devtools/server/actors/utils/inactive-property-helper.js b/devtools/server/actors/utils/inactive-property-helper.js
index 759c2e6215..3f6e748167 100644
--- a/devtools/server/actors/utils/inactive-property-helper.js
+++ b/devtools/server/actors/utils/inactive-property-helper.js
@@ -21,6 +21,11 @@ const TEXT_WRAP_BALANCE_LIMIT = Services.prefs.getIntPref(
   10
 );
 
+const ALIGN_CONTENT_BLOCKS = Services.prefs.getBoolPref(
+  "layout.css.align-content.blocks.enabled",
+  false
+);
+
 const VISITED_MDN_LINK = "https://developer.mozilla.org/docs/Web/CSS/:visited";
 const VISITED_INVALID_PROPERTIES = allCssPropertiesExcept([
   "all",
@@ -227,12 +232,29 @@ class InactivePropertyHelper {
       // See https://bugzilla.mozilla.org/show_bug.cgi?id=1598730
       {
         invalidProperties: ["align-content"],
-        when: () =>
-          !this.style["align-content"].includes("baseline") &&
-          !this.gridContainer &&
-          !this.flexContainer,
-        fixId: "inactive-css-not-grid-or-flex-container-fix",
-        msgId: "inactive-css-not-grid-or-flex-container",
+        when: () => {
+          if (this.style["align-content"].includes("baseline")) {
+            return false;
+          }
+          const supportedDisplay = [
+            "flex",
+            "inline-flex",
+            "grid",
+            "inline-grid",
+            // Uncomment table-cell when Bug 1883357 is fixed.
+            // "table-cell"
+          ];
+          if (ALIGN_CONTENT_BLOCKS) {
+            supportedDisplay.push("block", "inline-block");
+          }
+          return !this.checkComputedStyle("display", supportedDisplay);
+        },
+        fixId: ALIGN_CONTENT_BLOCKS
+          ? "inactive-css-not-grid-or-flex-or-block-container-fix"
+          : "inactive-css-not-grid-or-flex-container-fix",
+        msgId: ALIGN_CONTENT_BLOCKS
+          ? "inactive-css-property-because-of-display"
+          : "inactive-css-not-grid-or-flex-container",
       },
       // column-gap and shorthands used on non-grid or non-flex or non-multi-col container.
       {
@@ -1223,11 +1245,8 @@ class InactivePropertyHelper {
 
   /**
    * Check if a node is a grid item.
-   *
-   * @param {DOMNode} node
-   *        The node to check.
    */
-  isGridItem(node) {
+  isGridItem() {
     return !!this.getParentGridElement(this.node);
   }
 
diff --git a/devtools/server/actors/utils/logEvent.js b/devtools/server/actors/utils/logEvent.js
index 88b166619e..5f40085fde 100644
--- a/devtools/server/actors/utils/logEvent.js
+++ b/devtools/server/actors/utils/logEvent.js
@@ -34,7 +34,7 @@ function logEvent({ threadActor, frame, level, expression, bindings }) {
 
   // TODO remove this branch when (#1592584) lands (#1609540)
   if (isWorker) {
-    threadActor._parent._consoleActor.evaluateJS({
+    threadActor.targetActor._consoleActor.evaluateJS({
       text: `console.log(...${expression})`,
       bindings: { displayName, ...bindings },
       url: sourceActor.url,
@@ -76,7 +76,7 @@ function logEvent({ threadActor, frame, level, expression, bindings }) {
     value = value.unsafeDereference();
   }
 
-  const targetActor = threadActor._parent;
+  const targetActor = threadActor.targetActor;
   const message = {
     filename: sourceActor.url,
     lineNumber: line,
diff --git a/devtools/server/actors/utils/sources-manager.js b/devtools/server/actors/utils/sources-manager.js
index b80da69bfa..fda37a3184 100644
--- a/devtools/server/actors/utils/sources-manager.js
+++ b/devtools/server/actors/utils/sources-manager.js
@@ -341,8 +341,13 @@ class SourcesManager extends EventEmitter {
     return this.blackBoxedSources.set(url, ranges);
   }
 
+  /**
+   * List all currently registered source actors.
+   *
+   * @return Iterator<SourceActor>
+   */
   iter() {
-    return [...this._sourceActors.values()];
+    return this._sourceActors.values();
   }
 
   /**
@@ -429,15 +434,15 @@ class SourcesManager extends EventEmitter {
     // Without this check, the cache may return stale data that doesn't match
     // the document shown in the browser.
     let loadFromCache = canUseCache;
-    if (canUseCache && this._thread._parent.browsingContext) {
+    if (canUseCache && this._thread.targetActor.browsingContext) {
       loadFromCache = !(
-        this._thread._parent.browsingContext.defaultLoadFlags ===
+        this._thread.targetActor.browsingContext.defaultLoadFlags ===
         Ci.nsIRequest.LOAD_BYPASS_CACHE
       );
     }
 
     // Fetch the sources with the same principal as the original document
-    const win = this._thread._parent.window;
+    const win = this._thread.targetActor.window;
     let principal, cacheKey;
     // On xpcshell, we don't have a window but a Sandbox
     if (!isWorker && win instanceof Ci.nsIDOMWindow) {
diff --git a/devtools/server/actors/utils/stylesheets-manager.js b/devtools/server/actors/utils/stylesheets-manager.js
index 838e5be602..a9c0705e8d 100644
--- a/devtools/server/actors/utils/stylesheets-manager.js
+++ b/devtools/server/actors/utils/stylesheets-manager.js
@@ -640,10 +640,14 @@ class StyleSheetsManager extends EventEmitter {
       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
+    // This returns the following type of at-rules:
+    // - CSSMediaRule
+    // - CSSContainerRule
+    // - 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,
+    };
   }
 
   /**