2 files changed, 65 insertions, 15 deletions

diff --git a/browser/components/screenshots/overlay/overlay.css b/browser/components/screenshots/overlay/overlay.css
index b042f0b0c2..d8aeb1f907 100644
--- a/browser/components/screenshots/overlay/overlay.css
+++ b/browser/components/screenshots/overlay/overlay.css
@@ -53,7 +53,7 @@
   justify-content: center;
   position: sticky;
   top: 0;
-  left: 0;
+  inset-inline: 0;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.7);
@@ -74,6 +74,11 @@
   border-radius: 4px;
 }
 
+#selection-size {
+  border: var(--border-width) solid var(--in-content-border-color);
+  box-shadow: var(--shadow-30);
+}
+
 .buttons-wrapper,
 #selection-size-container {
   display: flex;
@@ -107,7 +112,7 @@
   border-color: #fff;
   color: #fff;
 
-  @media (prefers-contrast) {
+  @media (forced-colors) {
     background-color: var(--in-content-button-background);
     color: var(--in-content-button-text-color);
     border-color: var(--in-content-button-border-color);
@@ -118,7 +123,7 @@
   background-color: #fff;
   color: #000;
 
-  @media (prefers-contrast) {
+  @media (forced-colors) {
     background-color: var(--in-content-button-background-hover);
     color: var(--in-content-button-text-color-hover);
     border-color: var(--in-content-button-border-color-hover);
@@ -154,7 +159,7 @@
   width: 64px;
   height: 64px;
 
-  @media (prefers-contrast) {
+  @media (forced-colors) {
     display: none;
   }
 }
@@ -208,7 +213,7 @@
   padding: 20px;
   width: 400px;
 
-  @media (prefers-contrast) {
+  @media (forced-colors) {
     color: CanvasText;
     background-color: Canvas;
   }
@@ -351,7 +356,7 @@
   width: 16px;
   pointer-events: none;
 
-  @media (prefers-contrast) {
+  @media (forced-colors) {
     background-color: ButtonText;
   }
 }
diff --git a/browser/components/screenshots/overlayHelpers.mjs b/browser/components/screenshots/overlayHelpers.mjs
index 70a1bd86d0..e91200a8f5 100644
--- a/browser/components/screenshots/overlayHelpers.mjs
+++ b/browser/components/screenshots/overlayHelpers.mjs
@@ -402,6 +402,8 @@ export class WindowDimensions {
   #scrollY = null;
   #scrollMinX = null;
   #scrollMinY = null;
+  #scrollMaxX = null;
+  #scrollMaxY = null;
   #devicePixelRatio = null;
 
   set dimensions(dimensions) {
@@ -429,6 +431,12 @@ export class WindowDimensions {
     if (dimensions.scrollMinY != null) {
       this.#scrollMinY = dimensions.scrollMinY;
     }
+    if (dimensions.scrollMaxX != null) {
+      this.#scrollMaxX = dimensions.scrollMaxX;
+    }
+    if (dimensions.scrollMaxY != null) {
+      this.#scrollMaxY = dimensions.scrollMaxY;
+    }
     if (dimensions.devicePixelRatio != null) {
       this.#devicePixelRatio = dimensions.devicePixelRatio;
     }
@@ -436,15 +444,19 @@ export class WindowDimensions {
 
   get dimensions() {
     return {
-      clientHeight: this.#clientHeight,
-      clientWidth: this.#clientWidth,
-      scrollHeight: this.#scrollHeight,
-      scrollWidth: this.#scrollWidth,
-      scrollX: this.#scrollX,
-      scrollY: this.#scrollY,
-      scrollMinX: this.#scrollMinX,
-      scrollMinY: this.#scrollMinY,
-      devicePixelRatio: this.#devicePixelRatio,
+      clientHeight: this.clientHeight,
+      clientWidth: this.clientWidth,
+      scrollHeight: this.scrollHeight,
+      scrollWidth: this.scrollWidth,
+      scrollX: this.scrollX,
+      scrollY: this.scrollY,
+      pageScrollX: this.pageScrollX,
+      pageScrollY: this.pageScrollY,
+      scrollMinX: this.scrollMinX,
+      scrollMinY: this.scrollMinY,
+      scrollMaxX: this.scrollMaxX,
+      scrollMaxY: this.scrollMaxY,
+      devicePixelRatio: this.devicePixelRatio,
     };
   }
 
@@ -465,10 +477,18 @@ export class WindowDimensions {
   }
 
   get scrollX() {
+    return this.#scrollX - this.scrollMinX;
+  }
+
+  get pageScrollX() {
     return this.#scrollX;
   }
 
   get scrollY() {
+    return this.#scrollY - this.scrollMinY;
+  }
+
+  get pageScrollY() {
     return this.#scrollY;
   }
 
@@ -480,10 +500,33 @@ export class WindowDimensions {
     return this.#scrollMinY;
   }
 
+  get scrollMaxX() {
+    return this.#scrollMaxX;
+  }
+
+  get scrollMaxY() {
+    return this.#scrollMaxY;
+  }
+
   get devicePixelRatio() {
     return this.#devicePixelRatio;
   }
 
+  isInViewport(rect) {
+    // eslint-disable-next-line no-shadow
+    let { left, top, right, bottom } = rect;
+
+    if (
+      left > this.scrollX + this.clientWidth ||
+      right < this.scrollX ||
+      top > this.scrollY + this.clientHeight ||
+      bottom < this.scrollY
+    ) {
+      return false;
+    }
+    return true;
+  }
+
   reset() {
     this.#clientHeight = 0;
     this.#clientWidth = 0;
@@ -493,5 +536,7 @@ export class WindowDimensions {
     this.#scrollY = 0;
     this.#scrollMinX = 0;
     this.#scrollMinY = 0;
+    this.#scrollMaxX = 0;
+    this.#scrollMaxY = 0;
   }
 }