Bug 1363970 - Disable touch simulation when color picker is active. r=gl,rcaliman

This patch manually disables touch simulation in places where the color picker is enabled. Alternatively, doing this from InspectorActor's `pickColorFromPage` method requires that we get the associated RDM emulationActor for the tab, which turned out to be more complicated than I thought.

Getting and setting the picker state on the emulation factor retrieved via `getActorByID` does not match the emulationActor handling the touch events. So setting the picker state is indeed working it's just not setting it on the correct one. I'm unsure of how to go about this as the RDM emulationActor and the Inspector actor are entirely separate of each other.

So for now, we disable touch simulation in places where color picker is being enabled. Let me know what you think about this @pbro and @gl .

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

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/inspector.js

@@ -1679,12 +1679,14 @@ Inspector.prototype = {
   },
 
   startEyeDropperListeners: function() {
+    this.toolbox.tellRDMAboutPickerState(true);
     this.inspectorFront.once("color-pick-canceled", this.onEyeDropperDone);
     this.inspectorFront.once("color-picked", this.onEyeDropperDone);
     this.walker.once("new-root", this.onEyeDropperDone);
   },
 
   stopEyeDropperListeners: function() {
+    this.toolbox.tellRDMAboutPickerState(false);
     this.inspectorFront.off("color-pick-canceled", this.onEyeDropperDone);
     this.inspectorFront.off("color-picked", this.onEyeDropperDone);
     this.walker.off("new-root", this.onEyeDropperDone);

devtools/client/menus.js

@@ -66,6 +66,11 @@ loader.lazyImporter(
   "ProfilerMenuButton",
   "resource://devtools/client/performance-new/popup/menu-button.jsm"
 );
+loader.lazyRequireGetter(
+  this,
+  "ResponsiveUIManager",
+  "devtools/client/responsive/manager"
+);
 
 exports.menuitems = [
   {
@@ -154,6 +159,25 @@ exports.menuitems = [
       const target = await TargetFactory.forTab(window.gBrowser.selectedTab);
       await target.attach();
       const inspectorFront = await target.getFront("inspector");
+
+      // If RDM is active, disable touch simulation events if they're enabled.
+      // Similarly, enable them when the color picker is done picking.
+      if (
+        ResponsiveUIManager.isActiveForTab(target.tab) &&
+        target.actorHasMethod("emulation", "setElementPickerState")
+      ) {
+        const ui = ResponsiveUIManager.getResponsiveUIForTab(target.tab);
+        await ui.emulationFront.setElementPickerState(true);
+
+        inspectorFront.once("color-picked", async () => {
+          await ui.emulationFront.setElementPickerState(false);
+        });
+
+        inspectorFront.once("color-pick-canceled", async () => {
+          await ui.emulationFront.setElementPickerState(false);
+        });
+      }
+
       inspectorFront.pickColorFromPage({ copyOnSelect: true, fromMenu: true });
     },
     checkbox: true,

devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js

@@ -241,6 +241,9 @@ class SwatchColorPickerTooltip extends SwatchBasedEditorTooltip {
     // cancelling picker(if it is already selected) on opening eye-dropper
     toolbox.nodePicker.cancel();
 
+    // disable simulating touch events if RDM is active
+    toolbox.tellRDMAboutPickerState(true);
+
     // pickColorFromPage will focus the content document. If the devtools are in a
     // separate window, the colorpicker tooltip will be closed before pickColorFromPage
     // resolves. Flip the flag early to avoid issues with onTooltipHidden().
@@ -270,6 +273,9 @@ class SwatchColorPickerTooltip extends SwatchBasedEditorTooltip {
   }
 
   _onEyeDropperDone() {
+    // enable simulating touch events if RDM is active
+    this.inspector.toolbox.tellRDMAboutPickerState(false);
+
     this.eyedropperOpen = false;
     this.activeSwatch = null;
   }