Bug 1771113 - [devtools] Remove stylesheets from StyleEditor on STYLESHEET resource destroyed. r=devtools-reviewers,ochameau.

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

devtools/client/styleeditor/StyleEditorUI.sys.mjs

@@ -215,6 +215,7 @@ export class StyleEditorUI extends EventEmitter {
       {
         onAvailable: this.#onResourceAvailable,
         onUpdated: this.#onResourceUpdated,
+        onDestroyed: this.#onResourceDestroyed,
       }
     );
     await this.#waitForLoadingStyleSheets();
@@ -1581,6 +1582,25 @@ export class StyleEditorUI extends EventEmitter {
     }
   };
 
+  #onResourceDestroyed = resources => {
+    for (const resource of resources) {
+      if (
+        resource.resourceType !== this.#toolbox.resourceCommand.TYPES.STYLESHEET
+      ) {
+        continue;
+      }
+
+      const editorToRemove = this.editors.find(
+        editor => editor.styleSheet.resourceId == resource.resourceId
+      );
+
+      if (editorToRemove) {
+        const { styleSheet } = editorToRemove;
+        this.#removeStyleSheet(styleSheet, editorToRemove);
+      }
+    }
+  };
+
   /**
    * Set the active item's summary element.
    *
@@ -1701,6 +1721,7 @@ export class StyleEditorUI extends EventEmitter {
       {
         onAvailable: this.#onResourceAvailable,
         onUpdated: this.#onResourceUpdated,
+        onDestroyed: this.#onResourceDestroyed,
       }
     );
     this.#commands.targetCommand.unwatchTargets({

devtools/client/styleeditor/test/browser.ini

@@ -123,6 +123,7 @@ skip-if =
 [browser_styleeditor_pretty.js]
 [browser_styleeditor_private_perwindowpb.js]
 [browser_styleeditor_reload.js]
+[browser_styleeditor_remove_stylesheet.js]
 [browser_styleeditor_resize_performance.js]
 [browser_styleeditor_scroll.js]
 [browser_styleeditor_selectstylesheet.js]

devtools/client/styleeditor/test/browser_styleeditor_remove_stylesheet.js

@@ -0,0 +1,29 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that a removed style sheet don't show up in the style editor anymore.
+
+const TESTCASE_URI = TEST_BASE_HTTPS + "simple.html";
+
+add_task(async function () {
+  const { ui } = await openStyleEditorForURL(TESTCASE_URI);
+
+  is(ui.editors.length, 2, "Two sheets present after load.");
+
+  info("Removing the <style> node");
+  const onStyleRemoved = waitFor(() => ui.editors.length == 1);
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    content.document.querySelector("style").remove();
+  });
+  await onStyleRemoved;
+  is(ui.editors.length, 1, "There's only one stylesheet remaining");
+
+  info("Removing the <link> node");
+  const onLinkRemoved = waitFor(() => !ui.editors.length);
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    content.document.querySelector("link").remove();
+  });
+  await onLinkRemoved;
+  is(ui.editors.length, 0, "There's no stylesheet displayed anymore");
+});