Bug 1701004 - [devtools] Use a dedicated commands instance for the eyedropper menu item r=nchevobbe

Depends on D119170

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

devtools/client/inspector/test/browser.ini

@@ -48,6 +48,7 @@ support-files =
   head.js
   img_browser_inspector_highlighter-eyedropper-image.png
   shared-head.js
+  style_inspector_eyedropper_ruleview.css
   !/devtools/client/shared/test/shared-head.js
   !/devtools/client/shared/test/telemetry-test-helpers.js
   !/devtools/client/debugger/test/mochitest/helpers/context.js
@@ -76,6 +77,7 @@ skip-if = (os == 'win' && processor == 'aarch64') # bug 1533490
 [browser_inspector_destroy-after-navigation.js]
 [browser_inspector_destroy-before-ready.js]
 [browser_inspector_expand-collapse.js]
+[browser_inspector_eyedropper_ruleview.js]
 [browser_inspector_fission_frame.js]
 [browser_inspector_fission_frame_navigation.js]
 [browser_inspector_fission_switch_target.js]

devtools/client/inspector/test/browser_inspector_eyedropper_ruleview.js

@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const CSS_URI = URL_ROOT + "style_inspector_eyedropper_ruleview.css";
+
+const TEST_URI = `
+  <link href="${CSS_URI}" rel="stylesheet" type="text/css"/>
+`;
+
+// Test that opening the eyedropper before opening devtools doesn't break links
+// in the ruleview.
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const onPickerCommandHandled = new Promise(r => {
+    const listener = subject => {
+      Services.obs.removeObserver(listener, "color-picker-command-handled");
+      r(subject.wrappedJSObject);
+    };
+    Services.obs.addObserver(listener, "color-picker-command-handled");
+  });
+
+  info("Trigger the eyedropper command");
+  const menu = document.getElementById("menu_eyedropper");
+  menu.doCommand();
+
+  info("Wait for the color-picker-command-handled observable");
+  const targetFront = await onPickerCommandHandled;
+
+  info("Wait for the eye dropper to be visible");
+  const highlighterTestFront = await targetFront.getFront("highlighterTest");
+  await asyncWaitUntil(() => highlighterTestFront.isEyeDropperVisible());
+
+  info("Cancel the eye dropper and wait for the target to be destroyed");
+  EventUtils.synthesizeKey("KEY_Escape");
+  await waitFor(() => targetFront.isDestroyed());
+
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("body", inspector);
+
+  const linkText = getRuleViewLinkTextByIndex(view, 1);
+  is(
+    linkText,
+    "style_inspector_eyedropper_ruleview.css:1",
+    "link text at index 1 has the correct link."
+  );
+});

devtools/client/inspector/test/style_inspector_eyedropper_ruleview.css

@@ -0,0 +1,3 @@
+body {
+  color: red;
+}

devtools/client/menus.js

@@ -27,18 +27,15 @@
 
 const { Cu } = require("chrome");
 
+loader.lazyRequireGetter(this, "Services", "Services");
+loader.lazyRequireGetter(this, "flags", "devtools/shared/flags");
+
 loader.lazyRequireGetter(
   this,
   "gDevToolsBrowser",
   "devtools/client/framework/devtools-browser",
   true
 );
-loader.lazyRequireGetter(
-  this,
-  "TabDescriptorFactory",
-  "devtools/client/framework/tab-descriptor-factory",
-  true
-);
 loader.lazyRequireGetter(
   this,
   "ResponsiveUIManager",
@@ -50,6 +47,12 @@ loader.lazyRequireGetter(
   "devtools/client/shared/link",
   true
 );
+loader.lazyRequireGetter(
+  this,
+  "CommandsFactory",
+  "devtools/shared/commands/commands-factory",
+  true
+);
 
 loader.lazyImporter(
   this,
@@ -130,11 +133,15 @@ exports.menuitems = [
     async oncommand(event) {
       const window = event.target.ownerDocument.defaultView;
 
-      const descriptor = await TabDescriptorFactory.createDescriptorForTab(
+      // The eyedropper might be used without a toolbox, so it should use a
+      // dedicated commands instance.
+      // See Bug 1701004.
+      const commands = await CommandsFactory.forTab(
         window.gBrowser.selectedTab
       );
-      const target = await descriptor.getTarget();
-      await target.attach();
+      await commands.targetCommand.startListening();
+
+      const target = commands.targetCommand.targetFront;
       const inspectorFront = await target.getFront("inspector");
 
       // If RDM is active, disable touch simulation events if they're enabled.
@@ -161,7 +168,20 @@ exports.menuitems = [
         });
       }
 
+      // Destroy the dedicated commands instance when the color picking is
+      // finished.
+      inspectorFront.once("color-picked", () => commands.destroy());
+      inspectorFront.once("color-pick-canceled", () => commands.destroy());
+
       inspectorFront.pickColorFromPage({ copyOnSelect: true, fromMenu: true });
+
+      if (flags.testing) {
+        // Used in devtools/client/inspector/test/browser_inspector_eyedropper_ruleview.js
+        Services.obs.notifyObservers(
+          { wrappedJSObject: target },
+          "color-picker-command-handled"
+        );
+      }
     },
     checkbox: true,
   },