Bug 1810579 - [devtools] Update comment about noop watcher for stylesheets r=devtools-reviewers,ochameau

Depends on D167164

I was hoping to remove this noop watcher thanks to the previous patch, but we have to keep it.
Updated the comment to highlight the main reason why the watchResources call is needed here.

Alternatively, instead of a no-op here, we could either
- cache the stylesheet resources in the inspector front and remove getResourceById on resourceCommand
- or automatically watch stylesheets

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

devtools/client/fronts/inspector.js

@@ -54,17 +54,13 @@ 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).
+    // Watch STYLESHEET resources to fill the ResourceCommand cache.
+    // StyleRule front's `get parentStyleSheet()` will query the cache to
+    // retrieve the resource corresponding to the parent stylesheet of a rule.
     const { resourceCommand } = this.targetFront.commands;
-
-    // Store `resourceCommand` on the inspector front as we need it later, and we might not be able to retrieve it from
-    // the targetFront as its resourceCommand property is nullified by ResourceCommand.onTargetDestroyed.
+    // Backup resourceCommand, targetFront.commands might be null in `destroy`.
     this.resourceCommand = resourceCommand;
-
     await resourceCommand.watchResources([resourceCommand.TYPES.STYLESHEET], {
-      // we simply want to start the watcher, we don't have to do anything with those resources.
       onAvailable: this.noopStylesheetListener,
     });
 

devtools/server/tests/browser/browser.ini

@@ -152,4 +152,3 @@ https_first_disabled = true
 [browser_style_utils_getFontPreviewData.js]
 [browser_styles_getRuleText.js]
 [browser_stylesheets_getTextEmpty.js]
-[browser_stylesheets_manager_early_register.js]

devtools/server/tests/browser/browser_stylesheets_manager_early_register.js

@@ -1,74 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-const CSS_CONTENT = "body { background-color: red; }";
-const TEST_URI = `data:text/html;charset=utf-8,<style>${encodeURIComponent(
-  CSS_CONTENT
-)}</style>`;
-
-// Test that registering stylesheets early in the styleSheetsManager does not
-// prevent from receiving those stylesheets when a consumer starts watching for
-// this resource.
-add_task(async function() {
-  await addTab(TEST_URI);
-
-  // addTab is overridden in this suite and returns a `browser` element, so we
-  // can't use the return value here.
-  const tab = gBrowser.selectedTab;
-
-  const commands = await CommandsFactory.forTab(tab);
-  const { resourceCommand, targetCommand } = commands;
-  await targetCommand.startListening();
-
-  const connectionPrefix = targetCommand.watcherFront.actorID.replace(
-    /watcher\d+$/,
-    ""
-  );
-
-  info("Force the stylesheet manager to register the page's stylesheet");
-  const resourceId = await ContentTask.spawn(
-    tab.linkedBrowser,
-    [connectionPrefix],
-    function(_connectionPrefix) {
-      const { TargetActorRegistry } = ChromeUtils.import(
-        "resource://devtools/server/actors/targets/target-actor-registry.jsm"
-      );
-
-      // Retrieve the target actor instance and its watcher for console messages
-      const targetActor = TargetActorRegistry.getTopLevelTargetActorForContext(
-        {
-          type: "browser-element",
-          browserId: content.browsingContext.browserId,
-        },
-        _connectionPrefix
-      );
-
-      // Register the page's stylesheet and return the resource id.
-      const styleSheetsManager = targetActor.getStyleSheetsManager();
-      const styleSheet =
-        content.browsingContext.associatedWindow.document.styleSheets[0];
-      return styleSheetsManager.getStyleSheetResourceId(styleSheet);
-    }
-  );
-
-  is(typeof resourceId, "string", "Retrieved a valid resource id");
-
-  info("Start watching for stylesheet resources");
-  const stylesheetResources = [];
-  await resourceCommand.watchResources([resourceCommand.TYPES.STYLESHEET], {
-    onAvailable: resources => stylesheetResources.push(...resources),
-  });
-
-  info("Wait until we retrieve the expected resource");
-  const styleSheetResource = await waitFor(() =>
-    stylesheetResources.find(resource => resource.resourceId === resourceId)
-  );
-  ok(
-    styleSheetResource,
-    "Found the stylesheet resource registered in the stylesheet manager earlier"
-  );
-
-  await commands.destroy();
-});