Bug 1772181 - Screenshot overlay is now scrollable. r=sfoster

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

browser/actors/ScreenshotsComponentChild.jsm

@@ -15,6 +15,7 @@ const lazy = {};
 
 XPCOMUtils.defineLazyModuleGetters(lazy, {
   ScreenshotsOverlayChild: "resource:///modules/ScreenshotsOverlayChild.jsm",
+  DeferredTask: "resource://gre/modules/DeferredTask.jsm",
 });
 
 class ScreenshotsComponentChild extends JSWindowActorChild {
@@ -42,6 +43,22 @@ class ScreenshotsComponentChild extends JSWindowActorChild {
       case "beforeunload":
         this.requestCancelScreenshot();
         break;
+      case "resize":
+        if (!this._resizeTask && this._overlay?._initialized) {
+          this._resizeTask = new lazy.DeferredTask(() => {
+            this._overlay.updateScreenshotsSize("resize");
+          }, 16);
+        }
+        this._resizeTask.arm();
+        break;
+      case "scroll":
+        if (!this._scrollTask && this._overlay?._initialized) {
+          this._scrollTask = new lazy.DeferredTask(() => {
+            this._overlay.updateScreenshotsSize("scroll");
+          }, 16);
+        }
+        this._scrollTask.arm();
+        break;
     }
   }
 
@@ -125,6 +142,8 @@ class ScreenshotsComponentChild extends JSWindowActorChild {
       ));
     this.document.addEventListener("keydown", this);
     this.document.ownerGlobal.addEventListener("beforeunload", this);
+    this.contentWindow.addEventListener("resize", this);
+    this.contentWindow.addEventListener("scroll", this);
     overlay.initialize();
     return true;
   }
@@ -138,10 +157,19 @@ class ScreenshotsComponentChild extends JSWindowActorChild {
   endScreenshotsOverlay() {
     this.document.removeEventListener("keydown", this);
     this.document.ownerGlobal.removeEventListener("beforeunload", this);
+    this.contentWindow.removeEventListener("resize", this);
+    this.contentWindow.removeEventListener("scroll", this);
     this._overlay?.tearDown();
+    this._resizeTask?.disarm();
+    this._scrollTask?.disarm();
     return true;
   }
 
+  didDestroy() {
+    this._resizeTask?.disarm();
+    this._scrollTask?.disarm();
+  }
+
   /**
    * Gets the full page bounds for a full page screenshot.
    *

browser/components/screenshots/overlay/overlay.css

@@ -7,7 +7,6 @@
   height: 100%;
   overflow: clip;
   user-select: none;
-  position: fixed;
   pointer-events: auto;
   touch-action: none;
 }
@@ -29,15 +28,29 @@
   direction: initial;
   writing-mode: initial;
   z-index: 1;
-  position: fixed;
-  top: 0; left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
+  position: absolute;
   pointer-events: auto;
   cursor: crosshair;
 }
 
+:-moz-native-anonymous #preview-container {
+  background-color: rgba(0, 0, 0, 0.7);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+:-moz-native-anonymous #selection-container {
+  overflow: clip;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 :-moz-native-anonymous #screenshots-overlay-container[hidden] {
   display: none;
 }
@@ -82,6 +95,7 @@
   white-space: nowrap;
   margin: 0 5px;
   box-shadow: 0 0 0 1px rgba(12, 12, 13, 0.1), 0 2px 8px rgba(12, 12, 13, 0.1);
+  z-index: 6;
 }
 
 :-moz-native-anonymous .screenshots-button:hover {
@@ -94,7 +108,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 6;
 }
 
 :-moz-native-anonymous #cancel {
@@ -205,6 +218,7 @@
 :-moz-native-anonymous .bghighlight {
   background-color: rgba(0, 0, 0, 0.7);
   position: absolute;
+  overflow: clip;
 }
 
 :-moz-native-anonymous .highlight {