Bug 1539979 - Fix eyedropper tests for DevTools in content frame r=ochameau

Depends on D40993

I don't fully understand the failures in this test on Linux.
The only way I could get it to pass for now was to force a window focus when the test runs in a window host.
Other OSes are fine, but without this, Linux is permafailing this.

I don't have a good linux env right now, so I would like to proceed with this and
fix it in a follow up.

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

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

devtools/client/inspector/rules/test/browser_rules_eyedropper.js

@@ -46,7 +46,7 @@ add_task(async function() {
 
   const { testActor, inspector, view, toolbox } = await openRuleView();
 
-  await runTest(testActor, inspector, view);
+  await runTest(testActor, inspector, view, false);
 
   info("Reload the page to restore the initial state");
   await navigateTo(inspector, url);
@@ -54,10 +54,10 @@ add_task(async function() {
   info("Change toolbox host to WINDOW");
   await toolbox.switchHost("window");
 
-  await runTest(testActor, inspector, view);
+  await runTest(testActor, inspector, view, true);
 });
 
-async function runTest(testActor, inspector, view) {
+async function runTest(testActor, inspector, view, isWindowHost) {
   await selectNode("#div2", inspector);
 
   info("Get the background-color property from the rule-view");
@@ -77,6 +77,20 @@ async function runTest(testActor, inspector, view) {
   info("Test that pressing escape dismisses the eyedropper");
   await testESC(swatch, inspector, testActor);
 
+  if (isWindowHost) {
+    // The following code is only needed on linux otherwise the test seems to
+    // timeout when clicking again on the swatch. Both the focus and the wait
+    // seem needed to make it pass.
+    // To be fixed in Bug 1571421.
+    info("Ensure the swatch window is focused");
+    const onWindowFocus = BrowserTestUtils.waitForEvent(
+      swatch.ownerGlobal,
+      "focus"
+    );
+    swatch.ownerGlobal.focus();
+    await onWindowFocus;
+  }
+
   info("Open the eyedropper again");
   await openEyedropper(view, swatch);
 

devtools/client/inspector/rules/test/head.js

@@ -661,7 +661,7 @@ async function openEyedropper(view, swatch) {
   const onColorPickerReady = view.tooltips
     .getTooltip("colorPicker")
     .once("ready");
-  swatch.click();
+  EventUtils.synthesizeMouseAtCenter(swatch, {}, swatch.ownerGlobal);
   await onColorPickerReady;
 
   const dropperButton = tooltip.container.querySelector("#eyedropper-button");