Bug 1873977 - Reset hover element region when retrying screenshot. r=sfoster

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

browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs

@@ -850,6 +850,8 @@ export class ScreenshotsOverlay {
     this.showPreviewContainer();
     this.#dispatchEvent("Screenshots:ShowPanel");
     this.#previousDimensions = null;
+    this.#cachedEle = null;
+    this.hoverElementRegion.resetDimensions();
   }
 
   /**

browser/components/screenshots/tests/browser/browser.toml

@@ -43,3 +43,5 @@ skip-if = ["!crashreporter"]
 ["browser_screenshots_test_toolbar_button.js"]
 
 ["browser_screenshots_test_visible.js"]
+
+["browser_test_element_picker.js"]

browser/components/screenshots/tests/browser/browser_test_element_picker.js

@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(async function test_element_picker() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      await clearAllTelemetryEvents();
+      let helper = new ScreenshotsHelper(browser);
+
+      helper.triggerUIFromToolbar();
+      await helper.waitForOverlay();
+
+      await helper.clickTestPageElement();
+
+      let rect = await helper.getTestPageElementRect();
+      let region = await helper.getSelectionRegionDimensions();
+
+      is(
+        region.left,
+        rect.left,
+        "The selected region left is the same as the element left"
+      );
+      is(
+        region.right,
+        rect.right,
+        "The selected region right is the same as the element right"
+      );
+      is(
+        region.top,
+        rect.top,
+        "The selected region top is the same as the element top"
+      );
+      is(
+        region.bottom,
+        rect.bottom,
+        "The selected region bottom is the same as the element bottom"
+      );
+
+      mouse.click(10, 10);
+      await helper.waitForStateChange("crosshairs");
+
+      let hoverElementRegionValid = await helper.isHoverElementRegionValid();
+
+      ok(!hoverElementRegionValid, "Hover element rect is null");
+
+      mouse.click(10, 10);
+      await helper.waitForStateChange("crosshairs");
+    }
+  );
+});

browser/components/screenshots/tests/browser/head.js

@@ -177,7 +177,7 @@ class ScreenshotsHelper {
     );
   }
 
-  async getHoverElementRect() {
+  getHoverElementRect() {
     return ContentTask.spawn(this.browser, null, async () => {
       let screenshotsChild = content.windowGlobalChild.getActor(
         "ScreenshotsComponent"
@@ -186,6 +186,15 @@ class ScreenshotsHelper {
     });
   }
 
+  isHoverElementRegionValid() {
+    return ContentTask.spawn(this.browser, null, async () => {
+      let screenshotsChild = content.windowGlobalChild.getActor(
+        "ScreenshotsComponent"
+      );
+      return screenshotsChild.overlay.hoverElementRegion.isRegionValid;
+    });
+  }
+
   async waitForHoverElementRect() {
     return TestUtils.waitForCondition(async () => {
       let rect = await this.getHoverElementRect();
@@ -203,7 +212,6 @@ class ScreenshotsHelper {
         );
 
         let dimensions = screenshotsChild.overlay.selectionRegion.dimensions;
-        // return dimensions.boxWidth;
         await ContentTaskUtils.waitForCondition(() => {
           dimensions = screenshotsChild.overlay.selectionRegion.dimensions;
           return dimensions.width !== currWidth;
@@ -372,11 +380,15 @@ class ScreenshotsHelper {
     mouse.click(x, y);
   }
 
-  async clickTestPageElement() {
-    let rect = await ContentTask.spawn(this.browser, [], async () => {
+  getTestPageElementRect() {
+    return ContentTask.spawn(this.browser, [], async () => {
       let ele = content.document.getElementById("testPageElement");
       return ele.getBoundingClientRect();
     });
+  }
+
+  async clickTestPageElement() {
+    let rect = await this.getTestPageElementRect();
 
     let x = Math.floor(rect.x + rect.width / 2);
     let y = Math.floor(rect.y + rect.height / 2);