From 28f4165fb6c6e2345daaa57aaea257214cf64d3d Mon Sep 17 00:00:00 2001
From: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Fri, 26 Mar 2021 09:46:32 +0000
Subject: [PATCH] Bug 1685268 - [devtools] Watch for stylesheet resources from
 inspector front instead of inspector panel. r=ochameau.

This was previously done in the inspector panel initialization phase, after the
inspector front was created, which could lead to races.
Since the pageStyle actor requires stylesheets to being watched (when watcher
support is enabled), we do this in the inspector front, before creating the
page style actor.
We put the resourceWatcher instance on targetFront from resourceWatcher#_onTargetAvailable
so we can use it from everywhere.

Differential Revision: https://phabricator.services.mozilla.com/D109470
---
 devtools/client/fronts/inspector.js           | 15 ++++++++++++++
 devtools/client/fronts/style-rule.js          |  2 +-
 devtools/client/inspector/inspector.js        | 20 -------------------
 devtools/shared/resources/resource-watcher.js |  6 ++++++
 4 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/devtools/client/fronts/inspector.js b/devtools/client/fronts/inspector.js
index 429d18411c12..4d47532e304b 100644
--- a/devtools/client/fronts/inspector.js
+++ b/devtools/client/fronts/inspector.js
@@ -51,6 +51,21 @@ class InspectorFront extends FrontClassWithSpec(inspectorSpec) {
       return this.initialized;
     }
 
+    // If the server-side support for stylesheet resources is enabled, we need to start
+    // to watch for them before instanciating the pageStyle actor (which does use the
+    // watcher and assume we're already watching for stylesheets).
+    const { resourceWatcher } = this.targetFront;
+    if (
+      resourceWatcher?.hasResourceWatcherSupport(
+        resourceWatcher.TYPES.STYLESHEET
+      )
+    ) {
+      await resourceWatcher.watchResources([resourceWatcher.TYPES.STYLESHEET], {
+        // we simply want to start the watcher, we don't have to do anything with those resources.
+        onAvailable: () => {},
+      });
+    }
+
     this.initialized = await Promise.all([
       this._getWalker(),
       this._getPageStyle(),
diff --git a/devtools/client/fronts/style-rule.js b/devtools/client/fronts/style-rule.js
index fa4a03841c5b..0790b07dd140 100644
--- a/devtools/client/fronts/style-rule.js
+++ b/devtools/client/fronts/style-rule.js
@@ -110,7 +110,7 @@ class StyleRuleFront extends FrontClassWithSpec(styleRuleSpec) {
   }
 
   get parentStyleSheet() {
-    const resourceWatcher = this.parentFront.resourceWatcher;
+    const resourceWatcher = this.targetFront.resourceWatcher;
     if (resourceWatcher) {
       return resourceWatcher.getResourceById(
         resourceWatcher.TYPES.STYLESHEET,
diff --git a/devtools/client/inspector/inspector.js b/devtools/client/inspector/inspector.js
index 6c86f6079950..b782de9bc5fb 100644
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -203,21 +203,6 @@ Inspector.prototype = {
       r => (this._resolveMarkupViewInitialized = r)
     );
 
-    // If the server-side stylesheet watcher is enabled, we should start to watch
-    // stylesheet resources before instanciating the inspector front since pageStyle
-    // actor should refer the watcher.
-    if (
-      this.toolbox.resourceWatcher.hasResourceWatcherSupport(
-        this.toolbox.resourceWatcher.TYPES.STYLESHEET
-      )
-    ) {
-      this._isServerSideStyleSheetWatcherEnabled = true;
-      await this.toolbox.resourceWatcher.watchResources(
-        [this.toolbox.resourceWatcher.TYPES.STYLESHEET],
-        { onAvailable: this.onResourceAvailable }
-      );
-    }
-
     await this.toolbox.targetList.watchTargets(
       [this.toolbox.targetList.TYPES.FRAME],
       this._onTargetAvailable,
@@ -271,11 +256,6 @@ Inspector.prototype = {
   async initInspectorFront(targetFront) {
     this.inspectorFront = await targetFront.getFront("inspector");
     this.walker = this.inspectorFront.walker;
-
-    // PageStyle front need the resource watcher when the server-side stylesheet watcher is enabled.
-    if (this._isServerSideStyleSheetWatcherEnabled) {
-      this.inspectorFront.pageStyle.resourceWatcher = this.toolbox.resourceWatcher;
-    }
   },
 
   get toolbox() {
diff --git a/devtools/shared/resources/resource-watcher.js b/devtools/shared/resources/resource-watcher.js
index 09f4dfb470bd..4abc6a4a386e 100644
--- a/devtools/shared/resources/resource-watcher.js
+++ b/devtools/shared/resources/resource-watcher.js
@@ -301,6 +301,12 @@ class ResourceWatcher {
    *        composed of a BrowsingContextTargetFront or ContentProcessTargetFront.
    */
   async _onTargetAvailable({ targetFront, isTargetSwitching }) {
+    // We put the resourceWatcher on the targetFront so it can be retrieved in the
+    // inspector and style-rule fronts. This might be removed in the future if/when we
+    // turn the resourceWatcher into a Command.
+    // ⚠️ This shouldn't be used anywhere else ⚠️
+    targetFront.resourceWatcher = this;
+
     const resources = [];
     if (isTargetSwitching) {
       this._onWillNavigate(targetFront);