Adding upstream version 110.0.1.upstream/110.0.1upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

36 files changed, 6711 insertions, 0 deletions

diff --git a/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs b/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs
new file mode 100644
index 0000000000..18c2227d2b
--- /dev/null
+++ b/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs
@@ -0,0 +1,2028 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * The Screenshots overlay is inserted into the document's
+ * canvasFrame anonymous content container (see dom/webidl/Document.webidl).
+ *
+ * This container gets cleared automatically when the document navigates.
+ *
+ * Since the overlay markup is inserted in the canvasFrame using
+ * insertAnonymousContent, this means that it can be modified using the API
+ * described in AnonymousContent.webidl.
+ *
+ * Any mutation of this content must be via the AnonymousContent API.
+ * This is similar in design to [devtools' highlighters](https://firefox-source-docs.mozilla.org/devtools/tools/highlighters.html#inserting-content-in-the-page),
+ * though as Screenshots doesnt need to work on XUL documents, or allow multiple kinds of
+ * highlight/overlay our case is a little simpler.
+ *
+ * To retrieve the AnonymousContent instance, use the `content` getter.
+ */
+
+/* States:
+
+  "crosshairs":
+    Nothing has happened, and the crosshairs will follow the movement of the mouse
+  "draggingReady":
+    The user has pressed the mouse button, but hasn't moved enough to create a selection
+  "dragging":
+    The user has pressed down a mouse button, and is dragging out an area far enough to show a selection
+  "selected":
+    The user has selected an area
+  "resizing":
+    The user is resizing the selection
+
+  A pointerdown goes from crosshairs to dragging.
+  A pointerup goes from dragging to selected
+  A click outside of the selection goes from selected to crosshairs
+  A pointerdown on one of the draggers goes from selected to resizing
+
+  */
+
+import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";
+
+const lazy = {};
+
+XPCOMUtils.defineLazyGetter(lazy, "overlayLocalization", () => {
+  return new Localization(["browser/screenshotsOverlay.ftl"], true);
+});
+
+const STYLESHEET_URL =
+  "chrome://browser/content/screenshots/overlay/overlay.css";
+
+// An autoselection smaller than these will be ignored entirely:
+const MIN_DETECT_ABSOLUTE_HEIGHT = 10;
+const MIN_DETECT_ABSOLUTE_WIDTH = 30;
+// An autoselection smaller than these will not be preferred:
+const MIN_DETECT_HEIGHT = 30;
+const MIN_DETECT_WIDTH = 100;
+// An autoselection bigger than either of these will be ignored:
+let MAX_DETECT_HEIGHT = 700;
+let MAX_DETECT_WIDTH = 1000;
+
+const doNotAutoselectTags = {
+  H1: true,
+  H2: true,
+  H3: true,
+  H4: true,
+  H5: true,
+  H6: true,
+};
+
+class AnonymousContentOverlay {
+  constructor(contentDocument, screenshotsChild) {
+    this.listeners = new Map();
+    this.elements = new Map();
+
+    this.screenshotsChild = screenshotsChild;
+
+    this.contentDocument = contentDocument;
+    // aliased for easier diffs/maintenance of the event management code borrowed from devtools highlighters
+    this.pageListenerTarget = contentDocument.ownerGlobal;
+
+    this.overlayFragment = null;
+
+    this.overlayId = "screenshots-overlay-container";
+    this.previewId = "preview-container";
+    this.selectionId = "selection-container";
+    this.hoverBoxId = "hover-highlight";
+
+    this._initialized = false;
+
+    this.moverIds = [
+      "mover-left",
+      "mover-top",
+      "mover-right",
+      "mover-bottom",
+      "mover-topLeft",
+      "mover-topRight",
+      "mover-bottomLeft",
+      "mover-bottomRight",
+    ];
+  }
+  get content() {
+    if (!this._content || Cu.isDeadWrapper(this._content)) {
+      return null;
+    }
+    return this._content;
+  }
+  async initialize() {
+    if (this._initialized) {
+      return;
+    }
+
+    let document = this.contentDocument;
+    let window = document.ownerGlobal;
+
+    // Inject stylesheet
+    if (!this.overlayFragment) {
+      try {
+        window.windowUtils.loadSheetUsingURIString(
+          STYLESHEET_URL,
+          window.windowUtils.AGENT_SHEET
+        );
+      } catch {
+        // The method fails if the url is already loaded.
+      }
+      // Inject markup for the overlay UI
+      this.overlayFragment = this.buildOverlay();
+    }
+
+    this._content = document.insertAnonymousContent(
+      this.overlayFragment.children[0]
+    );
+
+    this.addEventListeners();
+
+    this.hoverElementBox = new HoverElementBox(
+      this.hoverBoxId,
+      this.content,
+      document
+    );
+
+    this.previewLayer = new PreviewLayer(this.previewId, this.content);
+    this.selectionLayer = new SelectionLayer(
+      this.selectionId,
+      this.content,
+      this.hoverElementBox
+    );
+
+    this.screenshotsContainer = new ScreenshotsContainerLayer(
+      this.overlayId,
+      this.content,
+      this.previewLayer,
+      this.selectionLayer
+    );
+
+    this.stateHandler = new StateHandler(
+      this.screenshotsContainer,
+      this.screenshotsChild
+    );
+
+    this.screenshotsContainer.updateSize(window);
+
+    this.stateHandler.setState("crosshairs");
+
+    this._initialized = true;
+  }
+
+  /**
+   * The Anonymous Content doesn't shrink when the window is resized so we need
+   * to find the largest element that isn't the Anonymous Content and we will
+   * use that width and height.
+   * Otherwise we will fallback to the documentElement scroll width and height
+   * @param eventType If "resize", we called this from a resize event so we will
+   *  try shifting the SelectionBox.
+   *  If "scroll", we called this from a scroll event so we will redraw the buttons
+   */
+  updateScreenshotsSize(eventType) {
+    this.stateHandler.updateScreenshotsContainerSize(
+      this.contentDocument.ownerGlobal,
+      eventType
+    );
+  }
+
+  /**
+   * Add required event listeners to the overlay
+   */
+  addEventListeners() {
+    this.addEventListenerForElement(
+      "screenshots-cancel-button",
+      "click",
+      (event, targetId) => {
+        this.screenshotsChild.requestCancelScreenshot();
+      }
+    );
+    this.addEventListenerForElement("cancel", "click", (event, targetId) => {
+      this.screenshotsChild.requestCancelScreenshot();
+    });
+    this.addEventListenerForElement("copy", "click", (event, targetId) => {
+      this.screenshotsChild.requestCopyScreenshot(
+        this.screenshotsContainer.getSelectionLayerBoxDimensions()
+      );
+    });
+    this.addEventListenerForElement("download", "click", (event, targetId) => {
+      this.screenshotsChild.requestDownloadScreenshot(
+        this.screenshotsContainer.getSelectionLayerBoxDimensions()
+      );
+    });
+
+    // The pointerdown event is added to the selection buttons to prevent the
+    // pointerdown event from occurring on the "screenshots-overlay-container"
+    this.addEventListenerForElement(
+      "cancel",
+      "pointerdown",
+      (event, targetId) => {
+        event.stopPropagation();
+      }
+    );
+    this.addEventListenerForElement(
+      "copy",
+      "pointerdown",
+      (event, targetId) => {
+        event.stopPropagation();
+      }
+    );
+    this.addEventListenerForElement(
+      "download",
+      "pointerdown",
+      (event, targetId) => {
+        event.stopPropagation();
+      }
+    );
+
+    this.addEventListenerForElement(
+      this.overlayId,
+      "pointerdown",
+      (event, targetId) => {
+        this.dragStart(event, targetId);
+      }
+    );
+    this.addEventListenerForElement(
+      this.overlayId,
+      "pointerup",
+      (event, targetId) => {
+        this.dragEnd(event, targetId);
+      }
+    );
+    this.addEventListenerForElement(
+      this.overlayId,
+      "pointermove",
+      (event, targetId) => {
+        this.drag(event, targetId);
+      }
+    );
+
+    for (let id of this.moverIds.concat(["highlight"])) {
+      this.addEventListenerForElement(id, "pointerdown", (event, targetId) => {
+        this.dragStart(event, targetId);
+      });
+      this.addEventListenerForElement(id, "pointerup", (event, targetId) => {
+        this.dragEnd(event, targetId);
+      });
+      this.addEventListenerForElement(id, "pointermove", (event, targetId) => {
+        this.drag(event, targetId);
+      });
+    }
+  }
+
+  /**
+   * Removes all event listeners and removes the overlay from the Anonymous Content
+   */
+  tearDown() {
+    if (this._content) {
+      this._removeAllListeners();
+      try {
+        this.contentDocument.removeAnonymousContent(this._content);
+      } catch (e) {
+        // If the current window isn't the one the content was inserted into, this
+        // will fail, but that's fine.
+      }
+    }
+    this._initialized = false;
+  }
+
+  /**
+   * Creates the document fragment that will be added to the Anonymous Content
+   * @returns document fragment that can be injected into the Anonymous Content
+   */
+  buildOverlay() {
+    let [
+      cancel,
+      instructions,
+      download,
+      copy,
+    ] = lazy.overlayLocalization.formatMessagesSync([
+      { id: "screenshots-overlay-cancel-button" },
+      { id: "screenshots-overlay-instructions" },
+      { id: "screenshots-overlay-download-button" },
+      { id: "screenshots-overlay-copy-button" },
+    ]);
+
+    const htmlString = `
+    <div id="screenshots-component">
+      <div id="${this.overlayId}">
+        <div id="${this.previewId}">
+          <div class="fixed-container">
+            <div class="face-container">
+              <div class="eye left"><div id="left-eye" class="eyeball"></div></div>
+              <div class="eye right"><div id="right-eye" class="eyeball"></div></div>
+              <div class="face"></div>
+            </div>
+            <div class="preview-instructions">${instructions.value}</div>
+            <div class="cancel-shot" id="screenshots-cancel-button">${cancel.value}</div>
+          </div>
+        </div>
+        <div id="${this.hoverBoxId}"></div>
+        <div id="${this.selectionId}" style="display:none;">
+          <div id="bgTop" class="bghighlight" style="display:none;"></div>
+          <div id="bgBottom" class="bghighlight" style="display:none;"></div>
+          <div id="bgLeft" class="bghighlight" style="display:none;"></div>
+          <div id="bgRight" class="bghighlight" style="display:none;"></div>
+          <div id="highlight" class="highlight" style="display:none;">
+            <div id="mover-topLeft" class="mover-target direction-topLeft">
+              <div class="mover"></div>
+            </div>
+            <div id="mover-top" class="mover-target direction-top">
+              <div class="mover"></div>
+            </div>
+            <div id="mover-topRight" class="mover-target direction-topRight">
+              <div class="mover"></div>
+            </div>
+            <div id="mover-left" class="mover-target direction-left">
+              <div class="mover"></div>
+            </div>
+            <div id="mover-right" class="mover-target direction-right">
+              <div class="mover"></div>
+            </div>
+            <div id="mover-bottomLeft" class="mover-target direction-bottomLeft">
+              <div class="mover"></div>
+            </div>
+            <div id="mover-bottom" class="mover-target direction-bottom">
+              <div class="mover"></div>
+            </div>
+            <div id="mover-bottomRight" class="mover-target direction-bottomRight">
+              <div class="mover"></div>
+            </div>
+          </div>
+          <div id="buttons" style="display:none;">
+            <button id="cancel" class="screenshots-button" title="${cancel.value}" aria-label="${cancel.value}"><img/></button>
+            <button id="copy" class="screenshots-button" title="${copy.value}" aria-label="${copy.value}"><img/>${copy.value}</button>
+            <button id="download" class="screenshots-button" title="${download.value}" aria-label="${download.value}"><img/>${download.value}</button>
+          </div>
+        </div>
+      </div>
+    </div>`;
+
+    const parser = new this.contentDocument.ownerGlobal.DOMParser();
+    const tmpDoc = parser.parseFromSafeString(htmlString, "text/html");
+    const fragment = this.contentDocument.createDocumentFragment();
+
+    fragment.appendChild(tmpDoc.body.children[0]);
+    return fragment;
+  }
+
+  // The event tooling is borrowed directly from devtools' highlighters (CanvasFrameAnonymousContentHelper)
+  /**
+   * Add an event listener to one of the elements inserted in the canvasFrame
+   * native anonymous container.
+   * Like other methods in this helper, this requires the ID of the element to
+   * be passed in.
+   *
+   * Note that if the content page navigates, the event listeners won't be
+   * added again.
+   *
+   * Also note that unlike traditional DOM events, the events handled by
+   * listeners added here will propagate through the document only through
+   * bubbling phase, so the useCapture parameter isn't supported.
+   * It is possible however to call e.stopPropagation() to stop the bubbling.
+   *
+   * IMPORTANT: the chrome-only canvasFrame insertion API takes great care of
+   * not leaking references to inserted elements to chrome JS code. That's
+   * because otherwise, chrome JS code could freely modify native anon elements
+   * inside the canvasFrame and probably change things that are assumed not to
+   * change by the C++ code managing this frame.
+   * See https://wiki.mozilla.org/DevTools/Highlighter#The_AnonymousContent_API
+   * Unfortunately, the inserted nodes are still available via
+   * event.originalTarget, and that's what the event handler here uses to check
+   * that the event actually occured on the right element, but that also means
+   * consumers of this code would be able to access the inserted elements.
+   * Therefore, the originalTarget property will be nullified before the event
+   * is passed to your handler.
+   *
+   * IMPL DETAIL: A single event listener is added per event types only, at
+   * browser level and if the event originalTarget is found to have the provided
+   * ID, the callback is executed (and then IDs of parent nodes of the
+   * originalTarget are checked too).
+   *
+   * @param {String} id
+   * @param {String} type
+   * @param {Function} handler
+   */
+  addEventListenerForElement(id, type, handler) {
+    if (typeof id !== "string") {
+      throw new Error(
+        "Expected a string ID in addEventListenerForElement but got: " + id
+      );
+    }
+
+    // If no one is listening for this type of event yet, add one listener.
+    if (!this.listeners.has(type)) {
+      const target = this.pageListenerTarget;
+      target.addEventListener(type, this, true);
+      // Each type entry in the map is a map of ids:handlers.
+      this.listeners.set(type, new Map());
+    }
+
+    const listeners = this.listeners.get(type);
+    listeners.set(id, handler);
+  }
+
+  /**
+   * Remove an event listener from one of the elements inserted in the
+   * canvasFrame native anonymous container.
+   * @param {String} id
+   * @param {String} type
+   */
+  removeEventListenerForElement(id, type) {
+    const listeners = this.listeners.get(type);
+    if (!listeners) {
+      return;
+    }
+    listeners.delete(id);
+
+    // If no one is listening for event type anymore, remove the listener.
+    if (!listeners.size) {
+      const target = this.pageListenerTarget;
+      target.removeEventListener(type, this, true);
+    }
+  }
+
+  handleEvent(event) {
+    const listeners = this.listeners.get(event.type);
+    if (!listeners) {
+      return;
+    }
+
+    // Hide the originalTarget property to avoid exposing references to native
+    // anonymous elements. See addEventListenerForElement's comment.
+    let isPropagationStopped = false;
+    const eventProxy = new Proxy(event, {
+      get: (obj, name) => {
+        if (name === "originalTarget") {
+          return null;
+        } else if (name === "stopPropagation") {
+          return () => {
+            isPropagationStopped = true;
+          };
+        }
+        return obj[name];
+      },
+    });
+
+    // Start at originalTarget, bubble through ancestors and call handlers when
+    // needed.
+    let node = event.originalTarget;
+    while (node) {
+      let nodeId = node.id;
+      if (nodeId) {
+        const handler = listeners.get(node.id);
+        if (handler) {
+          handler(eventProxy, nodeId);
+          if (isPropagationStopped) {
+            break;
+          }
+        }
+        if (nodeId == this.overlayId) {
+          break;
+        }
+      }
+      node = node.parentNode;
+    }
+  }
+
+  _removeAllListeners() {
+    if (this.pageListenerTarget) {
+      const target = this.pageListenerTarget;
+      for (const [type] of this.listeners) {
+        target.removeEventListener(type, this, true);
+      }
+    }
+    this.listeners.clear();
+  }
+
+  /**
+   * Pass the pointer down event to the state handler
+   * @param event The pointer down event
+   * @param targetId The target element id
+   */
+  dragStart(event, targetId) {
+    this.stateHandler.dragStart(event, targetId);
+  }
+
+  /**
+   * Pass the pointer move event to the state handler
+   * @param event The pointer move event
+   * @param targetId The target element id
+   */
+  drag(event, targetId) {
+    this.stateHandler.drag(event, targetId);
+  }
+
+  /**
+   * Pass the pointer up event to the state handler
+   * @param event The pointer up event
+   * @param targetId The target element id
+   */
+  dragEnd(event, targetId) {
+    this.stateHandler.dragEnd(event);
+  }
+}
+
+export var ScreenshotsOverlayChild = {
+  AnonymousContentOverlay,
+};
+
+/**
+ * The StateHandler class handles the state of the overlay
+ */
+class StateHandler {
+  #state;
+  #lastBox;
+  #moverId;
+  #lastX;
+  #lastY;
+  #screenshotsContainer;
+  #screenshotsChild;
+
+  constructor(screenshotsContainer, screenshotsChild) {
+    this.#state = "crosshairs";
+    this.#lastBox = {};
+
+    this.#screenshotsContainer = screenshotsContainer;
+    this.#screenshotsChild = screenshotsChild;
+  }
+
+  setState(newState) {
+    this.#state = newState;
+    this.start();
+  }
+
+  getState() {
+    return this.#state;
+  }
+
+  /**
+   * At the start of the some states we need to perform some actions
+   */
+  start() {
+    switch (this.#state) {
+      case "crosshairs": {
+        this.crosshairsStart();
+        break;
+      }
+      case "draggingReady": {
+        this.draggingReadyStart();
+        break;
+      }
+      case "dragging": {
+        this.draggingStart();
+        break;
+      }
+      case "selected": {
+        this.selectedStart();
+        break;
+      }
+      case "resizing": {
+        this.resizingStart();
+        break;
+      }
+    }
+  }
+
+  /**
+   * Returns the x and y coordinates of the event
+   * @param event The mouse or touch event
+   * @returns object containing the x and y coordinates of the mouse
+   */
+  getCoordinates(event) {
+    const { clientX: viewX, clientY: viewY, pageX, pageY } = event;
+
+    MAX_DETECT_HEIGHT = Math.max(event.target.clientHeight + 100, 700);
+    MAX_DETECT_WIDTH = Math.max(event.target.clientWidth + 100, 1000);
+
+    return { viewX, viewY, pageX, pageY };
+  }
+
+  /**
+   * Handles the mousedown/touchstart event depending on the state
+   * @param event The mousedown or touchstart event
+   * @param targetId The id of the event target
+   */
+  dragStart(event, targetId) {
+    const { pageX, pageY } = this.getCoordinates(event);
+
+    switch (this.#state) {
+      case "crosshairs": {
+        this.crosshairsDragStart(pageX, pageY);
+        break;
+      }
+      case "selected": {
+        this.selectedDragStart(pageX, pageY, targetId);
+        break;
+      }
+    }
+  }
+
+  /**
+   * Handles the move event depending on the state
+   * @param event The mousemove or touchmove event
+   * @param targetId The id of the event target
+   */
+  drag(event, targetId) {
+    const { pageX, pageY, viewX, viewY } = this.getCoordinates(event);
+
+    switch (this.#state) {
+      case "crosshairs": {
+        this.crosshairsMove(pageX, pageY, viewX, viewY, targetId);
+        break;
+      }
+      case "draggingReady": {
+        this.draggingReadyDrag(pageX, pageY);
+        break;
+      }
+      case "dragging": {
+        this.draggingDrag(pageX, pageY);
+        break;
+      }
+      case "resizing": {
+        this.resizingDrag(pageX, pageY);
+        break;
+      }
+    }
+  }
+
+  /**
+   * Handles the move event depending on the state
+   * @param event The mouseup event
+   * @param targetId The id of the event target
+   */
+  dragEnd(event, targetId) {
+    const { pageX, pageY, viewX, viewY } = this.getCoordinates(event);
+
+    switch (this.#state) {
+      case "draggingReady": {
+        this.draggingReadyDragEnd(pageX - viewX, pageY - viewY);
+        break;
+      }
+      case "dragging": {
+        this.draggingDragEnd(pageX, pageY, targetId);
+        break;
+      }
+      case "resizing": {
+        this.resizingDragEnd(pageX, pageY, targetId);
+        break;
+      }
+    }
+  }
+
+  /**
+   * Hide the box and highlighter and show the overlay at the start of crosshairs state
+   */
+  crosshairsStart() {
+    this.#screenshotsContainer.hideSelectionLayer();
+    this.#screenshotsContainer.showPreviewLayer();
+    this.#screenshotsChild.showPanel();
+  }
+
+  /**
+   *
+   */
+  draggingReadyStart() {
+    this.#screenshotsChild.hidePanel();
+  }
+
+  /**
+   * Hide the overlay and draw the box at the start of dragging state
+   */
+  draggingStart() {
+    this.#screenshotsContainer.hidePreviewLayer();
+    this.#screenshotsContainer.hideButtonsLayer();
+    this.#screenshotsContainer.drawSelectionBox();
+  }
+
+  /**
+   * Show the buttons at the start of the selected state
+   */
+  selectedStart() {
+    this.#screenshotsContainer.drawButtonsLayer();
+  }
+
+  /**
+   * Hide the buttons and store width and height of box at the start of the resizing state
+   */
+  resizingStart() {
+    this.#screenshotsContainer.hideButtonsLayer();
+    let {
+      width,
+      height,
+    } = this.#screenshotsContainer.getSelectionLayerBoxDimensions();
+    this.#lastBox = {
+      width,
+      height,
+    };
+  }
+
+  /**
+   * Set the initial box coordinates and set the state to "draggingReady"
+   * @param clientX x coordinate
+   * @param clientY y coordinate
+   */
+  crosshairsDragStart(clientX, clientY) {
+    this.#screenshotsContainer.setSelectionBoxDimensions({
+      left: clientX,
+      top: clientY,
+      right: clientX,
+      bottom: clientY,
+    });
+
+    this.setState("draggingReady");
+  }
+
+  /**
+   * If the background is clicked we set the state to crosshairs
+   * otherwise set the state to resizing
+   * @param clientX x coordinate
+   * @param clientY y coordinate
+   * @param targetId The id of the event target
+   */
+  selectedDragStart(clientX, clientY, targetId) {
+    if (targetId === this.#screenshotsContainer.id) {
+      this.setState("crosshairs");
+      return;
+    }
+    this.#moverId = targetId;
+    this.#lastX = clientX;
+    this.#lastY = clientY;
+
+    this.setState("resizing");
+  }
+
+  /**
+   * Handles the pointer move for the crosshairs state
+   * @param pageX x pointer position
+   * @param pageY y pointer position
+   * @param viewX x pointer position in viewport
+   * @param viewY y pointer position in viewport
+   * @param targetId The id of the target element
+   */
+  crosshairsMove(pageX, pageY, viewX, viewY, targetId) {
+    this.#screenshotsContainer.drawPreviewEyes(pageX, pageY);
+
+    this.#screenshotsContainer.handleElementHover(viewX, viewY, targetId);
+  }
+
+  /**
+   * Set the bottom and right coordinates of the box and draw the box
+   * @param clientX x coordinate
+   * @param clientY y coordinate
+   */
+  draggingDrag(clientX, clientY) {
+    this.#screenshotsContainer.setSelectionBoxDimensions({
+      right: clientX,
+      bottom: clientY,
+    });
+
+    this.#screenshotsContainer.drawSelectionBox();
+  }
+
+  /**
+   * If the mouse has moved at least 40 pixels then set the state to "dragging"
+   * @param clientX x coordinate
+   * @param clientY y coordinate
+   */
+  draggingReadyDrag(clientX, clientY) {
+    this.#screenshotsContainer.setSelectionBoxDimensions({
+      right: clientX,
+      bottom: clientY,
+    });
+
+    if (this.#screenshotsContainer.selectionBoxDistance() > 40) {
+      this.setState("dragging");
+    }
+  }
+
+  /**
+   * Depending on what mover was selected we will resize the box accordingly
+   * @param clientX x coordinate
+   * @param clientY y coordinate
+   */
+  resizingDrag(clientX, clientY) {
+    switch (this.#moverId) {
+      case "mover-topLeft": {
+        this.#screenshotsContainer.setSelectionBoxDimensions({
+          left: clientX,
+          top: clientY,
+        });
+        break;
+      }
+      case "mover-top": {
+        this.#screenshotsContainer.setSelectionBoxDimensions({ top: clientY });
+        break;
+      }
+      case "mover-topRight": {
+        this.#screenshotsContainer.setSelectionBoxDimensions({
+          top: clientY,
+          right: clientX,
+        });
+        break;
+      }
+      case "mover-right": {
+        this.#screenshotsContainer.setSelectionBoxDimensions({
+          right: clientX,
+        });
+        break;
+      }
+      case "mover-bottomRight": {
+        this.#screenshotsContainer.setSelectionBoxDimensions({
+          right: clientX,
+          bottom: clientY,
+        });
+        break;
+      }
+      case "mover-bottom": {
+        this.#screenshotsContainer.setSelectionBoxDimensions({
+          bottom: clientY,
+        });
+        break;
+      }
+      case "mover-bottomLeft": {
+        this.#screenshotsContainer.setSelectionBoxDimensions({
+          left: clientX,
+          bottom: clientY,
+        });
+        break;
+      }
+      case "mover-left": {
+        this.#screenshotsContainer.setSelectionBoxDimensions({ left: clientX });
+        break;
+      }
+      case "highlight": {
+        let lastBox = this.#lastBox;
+        let diffX = this.#lastX - clientX;
+        let diffY = this.#lastY - clientY;
+
+        let newLeft;
+        let newRight;
+        let newTop;
+        let newBottom;
+
+        // Unpack SelectionBox dimensions to use here
+        let {
+          boxLeft,
+          boxTop,
+          boxRight,
+          boxBottom,
+          boxWidth,
+          boxHeight,
+          scrollWidth,
+          scrollHeight,
+        } = this.#screenshotsContainer.getSelectionLayerDimensions();
+
+        // wait until all 4 if elses have completed before setting box dimensions
+        if (boxWidth <= lastBox.width && boxLeft === 0) {
+          newLeft = boxRight - lastBox.width;
+        } else {
+          newLeft = boxLeft;
+        }
+
+        if (boxWidth <= lastBox.width && boxRight === scrollWidth) {
+          newRight = boxLeft + lastBox.width;
+        } else {
+          newRight = boxRight;
+        }
+
+        if (boxHeight <= lastBox.height && boxTop === 0) {
+          newTop = boxBottom - lastBox.height;
+        } else {
+          newTop = boxTop;
+        }
+
+        if (boxHeight <= lastBox.height && boxBottom === scrollHeight) {
+          newBottom = boxTop + lastBox.height;
+        } else {
+          newBottom = boxBottom;
+        }
+
+        this.#screenshotsContainer.setSelectionBoxDimensions({
+          left: newLeft - diffX,
+          top: newTop - diffY,
+          right: newRight - diffX,
+          bottom: newBottom - diffY,
+        });
+
+        this.#lastX = clientX;
+        this.#lastY = clientY;
+        break;
+      }
+    }
+    this.#screenshotsContainer.drawSelectionBox();
+  }
+
+  /**
+   * Draw the selection box from the hover element box if it exists
+   * Else set the state to "crosshairs"
+   */
+  draggingReadyDragEnd(scrollX, scrollY) {
+    if (this.#screenshotsContainer.hoverElementBoxRect) {
+      this.#screenshotsContainer.hidePreviewLayer();
+      this.#screenshotsContainer.updateSelectionBoxFromRect(scrollX, scrollY);
+      this.#screenshotsContainer.drawSelectionBox();
+      this.setState("selected");
+    } else {
+      this.setState("crosshairs");
+    }
+  }
+
+  /**
+   * Draw the box one last time and set the state to "selected"
+   * @param clientX x coordinate
+   * @param clientY y coordinate
+   */
+  draggingDragEnd(clientX, clientY) {
+    this.#screenshotsContainer.setSelectionBoxDimensions({
+      right: clientX,
+      bottom: clientY,
+    });
+    this.#screenshotsContainer.sortSelectionLayerBoxCoords();
+    this.setState("selected");
+  }
+
+  /**
+   * Draw the box one last time and set the state to "selected"
+   * @param clientX x coordinate
+   * @param clientY y coordinate
+   */
+  resizingDragEnd(clientX, clientY, targetId) {
+    this.resizingDrag(clientX, clientY, targetId);
+    this.#screenshotsContainer.sortSelectionLayerBoxCoords();
+    this.setState("selected");
+  }
+
+  /**
+   * The page was resized or scrolled. We need to update the
+   * ScreenshotsContainer size so we don't draw outside the window bounds
+   * If the current state is "selected" and this was called from a resize event
+   * then we need to maybe shift the SelectionBox
+   * @param win The window object of the page
+   * @param eventType If this was called from a resize event
+   */
+  updateScreenshotsContainerSize(win, eventType) {
+    this.#screenshotsContainer.updateSize(win);
+
+    if (this.#state === "selected" && eventType === "resize") {
+      this.#screenshotsContainer.shiftSelectionLayerBox();
+    } else if (this.#state && eventType === "scroll") {
+      this.#screenshotsContainer.drawButtonsLayer();
+      if (this.#state === "crosshairs") {
+        this.#screenshotsContainer.handleElementScroll();
+      }
+    }
+  }
+}
+
+class AnonLayer {
+  id;
+  content;
+
+  constructor(id, content) {
+    this.id = id;
+    this.content = content;
+  }
+
+  /**
+   * Show element with id this.id
+   */
+  show() {
+    this.content.removeAttributeForElement(this.id, "style");
+  }
+
+  /**
+   * Hide element with id this.id
+   */
+  hide() {
+    this.content.setAttributeForElement(this.id, "style", "display:none;");
+  }
+}
+
+class HoverElementBox extends AnonLayer {
+  #document;
+  #rect;
+  #lastX;
+  #lastY;
+
+  constructor(id, content, document) {
+    super(id, content);
+
+    this.#document = document;
+  }
+
+  get rect() {
+    return this.#rect;
+  }
+
+  /**
+   * Draws the hover box over an element from the given rect
+   * @param rect The rect to draw the hover element box
+   */
+  drawHoverBox(rect) {
+    if (!rect) {
+      this.hide();
+    } else {
+      let maxHeight = this.selectionLayer.scrollHeight;
+      let maxWidth = this.selectionLayer.scrollWidth;
+      let top = this.#document.documentElement.scrollTop + rect.top;
+      top = top > 0 ? top : 0;
+      let left = this.#document.documentElement.scrollLeft + rect.left;
+      left = left > 0 ? left : 0;
+      let height =
+        rect.top + rect.height > maxHeight ? maxHeight - rect.top : rect.height;
+      let width =
+        rect.left + rect.width > maxWidth ? maxWidth - rect.left : rect.width;
+
+      this.content.setAttributeForElement(
+        this.id,
+        "style",
+        `top:${top}px;left:${left}px;height:${height}px;width:${width}px;`
+      );
+    }
+  }
+
+  /**
+   * Handles when the user moves the mouse over an element
+   * @param viewX The viewport x coordinate
+   * @param viewY The viewport y coordinate
+   * @param targetId The target element id
+   */
+  handleElementHover(viewX, viewY, targetId) {
+    if (targetId === "screenshots-overlay-container") {
+      let ele = this.getElementFromPoint(viewX, viewY);
+
+      if (this.cachedEle && this.cachedEle === ele) {
+        // Still hovering over the same element
+        return;
+      }
+      this.cachedEle = ele;
+
+      this.getBestRectForElement(ele);
+
+      this.#lastX = viewX;
+      this.#lastY = viewY;
+    }
+  }
+
+  /**
+   * Handles moving the rect when the user has scrolled but not moved the mouse
+   * It uses the last x and y viewport coordinates to find the new element at the mouse position
+   */
+  handleElementScroll() {
+    if (this.#lastX && this.#lastY) {
+      this.cachedEle = null;
+      this.handleElementHover(
+        this.#lastX,
+        this.#lastY,
+        "screenshots-overlay-container"
+      );
+    }
+  }
+
+  /**
+   * Finds an element for the given coordinates within the viewport
+   * @param x The viewport x coordinate
+   * @param y The viewport y coordinate
+   * @returns An element location at the given coordinates
+   */
+  getElementFromPoint(x, y) {
+    this.setPointerEventsNone();
+    let ele;
+    try {
+      ele = this.#document.elementFromPoint(x, y);
+    } finally {
+      this.resetPointerEvents();
+    }
+
+    return ele;
+  }
+
+  /**
+   * Gets the rect for an element if getBoundingClientRect exists
+   * @param ele The element to get the rect from
+   * @returns The bounding client rect of the element or null
+   */
+  getBoundingClientRect(ele) {
+    if (!ele.getBoundingClientRect) {
+      return null;
+    }
+
+    return ele.getBoundingClientRect();
+  }
+
+  /**
+   * This function takes an element and finds a suitable rect to draw the hover box on
+   * @param ele The element to find a suitale rect of
+   */
+  getBestRectForElement(ele) {
+    let lastRect;
+    let lastNode;
+    let rect;
+    let attemptExtend = false;
+    let node = ele;
+    while (node) {
+      rect = this.getBoundingClientRect(node);
+      if (!rect) {
+        rect = lastRect;
+        break;
+      }
+      if (rect.width < MIN_DETECT_WIDTH || rect.height < MIN_DETECT_HEIGHT) {
+        // Avoid infinite loop for elements with zero or nearly zero height,
+        // like non-clearfixed float parents with or without borders.
+        break;
+      }
+      if (rect.width > MAX_DETECT_WIDTH || rect.height > MAX_DETECT_HEIGHT) {
+        // Then the last rectangle is better
+        rect = lastRect;
+        attemptExtend = true;
+        break;
+      }
+      if (rect.width >= MIN_DETECT_WIDTH && rect.height >= MIN_DETECT_HEIGHT) {
+        if (!doNotAutoselectTags[node.tagName]) {
+          break;
+        }
+      }
+      lastRect = rect;
+      lastNode = node;
+      node = node.parentNode;
+    }
+    if (rect && node) {
+      const evenBetter = this.evenBetterElement(node);
+      if (evenBetter) {
+        node = lastNode = evenBetter;
+        rect = this.getBoundingClientRect(evenBetter);
+        attemptExtend = false;
+      }
+    }
+    if (rect && attemptExtend) {
+      let extendNode = lastNode.nextSibling;
+      while (extendNode) {
+        if (extendNode.nodeType === this.#document.ELEMENT_NODE) {
+          break;
+        }
+        extendNode = extendNode.nextSibling;
+        if (!extendNode) {
+          const parent = lastNode.parentNode;
+          for (let i = 0; i < parent.childNodes.length; i++) {
+            if (parent.childNodes[i] === lastNode) {
+              extendNode = parent.childNodes[i + 1];
+            }
+          }
+        }
+      }
+      if (extendNode) {
+        const extendRect = this.getBoundingClientRect(extendNode);
+        let x = Math.min(rect.x, extendRect.x);
+        let y = Math.min(rect.y, extendRect.y);
+        let width = Math.max(rect.right, extendRect.right) - x;
+        let height = Math.max(rect.bottom, extendRect.bottom) - y;
+        const combinedRect = new DOMRect(x, y, width, height);
+        if (
+          combinedRect.width <= MAX_DETECT_WIDTH &&
+          combinedRect.height <= MAX_DETECT_HEIGHT
+        ) {
+          rect = combinedRect;
+        }
+      }
+    }
+
+    if (
+      rect &&
+      (rect.width < MIN_DETECT_ABSOLUTE_WIDTH ||
+        rect.height < MIN_DETECT_ABSOLUTE_HEIGHT)
+    ) {
+      rect = null;
+    }
+
+    if (!rect) {
+      this.hide();
+    } else {
+      this.drawHoverBox(rect);
+    }
+
+    this.#rect = rect;
+  }
+
+  /**
+   * This finds a better element by looking for elements with role article
+   * @param node The currently hovered node
+   * @returns A better node or null
+   */
+  evenBetterElement(node) {
+    let el = node.parentNode;
+    const ELEMENT_NODE = this.#document.ELEMENT_NODE;
+    while (el && el.nodeType === ELEMENT_NODE) {
+      if (!el.getAttribute) {
+        return null;
+      }
+      if (el.getAttribute("role") === "article") {
+        const rect = this.getBoundingClientRect(el);
+        if (!rect) {
+          return null;
+        }
+        if (
+          rect.width <= MAX_DETECT_WIDTH &&
+          rect.height <= MAX_DETECT_HEIGHT
+        ) {
+          return el;
+        }
+        return null;
+      }
+      el = el.parentNode;
+    }
+    return null;
+  }
+
+  /**
+   * The pointer events need to be removed temporarily so we can find the
+   * correct element from document.elementFromPoint()
+   * If the pointer events are on for the screenshots elements, then we will always
+   * get the screenshots elements as the elements from a given point
+   */
+  setPointerEventsNone() {
+    this.content.setAttributeForElement(
+      "screenshots-component",
+      "style",
+      "pointer-events:none;"
+    );
+
+    let temp = this.content.getAttributeForElement(
+      "screenshots-overlay-container",
+      "style"
+    );
+    this.content.setAttributeForElement(
+      "screenshots-overlay-container",
+      "style",
+      temp + "pointer-events:none;"
+    );
+  }
+
+  /**
+   * Return the pointer events to the original state because we found the element
+   */
+  resetPointerEvents() {
+    this.content.setAttributeForElement("screenshots-component", "style", "");
+
+    let temp = this.content.getAttributeForElement(
+      "screenshots-overlay-container",
+      "style"
+    );
+    this.content.setAttributeForElement(
+      "screenshots-overlay-container",
+      "style",
+      temp.replace("pointer-events:none;", "")
+    );
+  }
+}
+
+class SelectionLayer extends AnonLayer {
+  #selectionBox;
+  #hoverElementBox;
+  #buttons;
+  #hidden;
+  /**
+   * the documentDimensions follows the below structure
+   * {
+   *    scrollWidth: the total document width
+   *    scrollHeight: the total document height
+   *    scrollX: the x scrolled offset
+   *    scrollY: the y scrolled offset
+   *    innerWidth: the viewport width
+   *    innerHeight: the viewport height
+   * }
+   */
+  #documentDimensions;
+
+  constructor(id, content, hoverElementBox) {
+    super(id, content);
+    this.#selectionBox = new SelectionBox(content, this);
+    this.#buttons = new ButtonsLayer("buttons", content, this);
+    this.#hoverElementBox = hoverElementBox;
+    this.#hoverElementBox.selectionLayer = this;
+
+    this.#hidden = true;
+    this.#documentDimensions = {};
+  }
+
+  /**
+   * Hide the buttons layer
+   */
+  hideButtons() {
+    this.#buttons.hide();
+  }
+
+  /**
+   * Call
+   */
+  drawButtonsLayer() {
+    this.#buttons.show();
+  }
+
+  /**
+   * Hide the selection-container element
+   */
+  hide() {
+    super.hide();
+    this.#hidden = true;
+  }
+
+  /**
+   * Draw the SelectionBox
+   */
+  drawSelectionBox() {
+    if (this.#hidden) {
+      this.show();
+      this.#hidden = false;
+    }
+    this.#selectionBox.show();
+  }
+
+  /**
+   * Sort the SelectionBox coordinates
+   */
+  sortSelectionBoxCoords() {
+    this.#selectionBox.sortCoords();
+  }
+
+  /**
+   * Sets the SelectionBox dimensions
+   * @param {Object} dims The new box dimensions
+   *  {
+   *    left: new left dimension value or undefined
+   *    top: new top dimension value or undefined
+   *    right: new right dimension value or undefined
+   *    bottom: new bottom dimension value or undefined
+   *   }
+   */
+  setSelectionBoxDimensions(dims) {
+    if (dims.left) {
+      this.#selectionBox.left = dims.left;
+    }
+    if (dims.top) {
+      this.#selectionBox.top = dims.top;
+    }
+    if (dims.right) {
+      this.#selectionBox.right = dims.right;
+    }
+    if (dims.bottom) {
+      this.#selectionBox.bottom = dims.bottom;
+    }
+  }
+
+  /**
+   * Gets the selections box dimensions
+   * @returns {Object}
+   *  {
+   *    x1: the left dimension value
+   *    y1: the top dimension value
+   *    width: the width of the selected region
+   *    height: the height of the selected region
+   *  }
+   */
+  getSelectionBoxDimensions() {
+    return this.#selectionBox.getDimensions();
+  }
+
+  /**
+   * Returns the box dimensions and the page dimensions
+   * @returns {Object}
+   *  {
+   *    boxLeft: the left position of the box
+   *    boxTop: the top position of the box
+   *    boxRight: the right position of the box
+   *    boxBottom: the bottom position of the box
+   *    scrollWidth: the total document width
+   *    scrollHeight: the total document height
+   *    scrollX: the x scrolled offset
+   *    scrollY: the y scrolled offset
+   *    innerWidth: the viewport width
+   *    innerHeight: the viewport height
+   *  }
+   */
+  getDimensions() {
+    return {
+      boxLeft: this.#selectionBox.left,
+      boxTop: this.#selectionBox.top,
+      boxRight: this.#selectionBox.right,
+      boxBottom: this.#selectionBox.bottom,
+      boxWidth: this.#selectionBox.width,
+      boxHeight: this.#selectionBox.height,
+      ...this.#documentDimensions,
+    };
+  }
+
+  /**
+   * Gets the diagonal distance of the SelectionBox
+   * @returns The diagonal distance of the SelectionBox
+   */
+  getSelectionBoxDistance() {
+    return this.#selectionBox.distance;
+  }
+
+  /**
+   * Shift the SelectionBox so that it is always within the document
+   */
+  shiftSelectionBox() {
+    this.#selectionBox.shiftBox();
+  }
+
+  /**
+   * Update the box coordinates from the hover element rect
+   */
+  updateSelectionBoxFromRect(scrollX, scrollY) {
+    this.#selectionBox.updateBoxFromRect(
+      this.#hoverElementBox.rect,
+      scrollX,
+      scrollY
+    );
+  }
+
+  /**
+   * Handles when the user moves the mouse over an element
+   * @param viewX The viewport x coordinate
+   * @param viewY The viewport y coordinate
+   * @param targetId The target element id
+   */
+  handleElementHover(viewX, viewY, targetId) {
+    this.#hoverElementBox.handleElementHover(viewX, viewY, targetId);
+  }
+
+  /**
+   * Handles moving the rect when the user has scrolled but not moved the mouse
+   * It uses the last x and y viewport coordinates to find the new element at the mouse position
+   */
+  handleElementScroll() {
+    this.#hoverElementBox.handleElementScroll();
+  }
+
+  hideHoverElementSelection() {
+    this.#hoverElementBox.hide();
+  }
+
+  get hoverElementBoxRect() {
+    return this.#hoverElementBox.rect;
+  }
+
+  get scrollWidth() {
+    return this.#documentDimensions.scrollWidth;
+  }
+  set scrollWidth(val) {
+    this.#documentDimensions.scrollWidth = val;
+  }
+
+  get scrollHeight() {
+    return this.#documentDimensions.scrollHeight;
+  }
+  set scrollHeight(val) {
+    this.#documentDimensions.scrollHeight = val;
+  }
+
+  get scrollX() {
+    return this.#documentDimensions.scrollX;
+  }
+  set scrollX(val) {
+    this.#documentDimensions.scrollX = val;
+  }
+
+  get scrollY() {
+    return this.#documentDimensions.scrollY;
+  }
+  set scrollY(val) {
+    this.#documentDimensions.scrollY = val;
+  }
+
+  get innerWidth() {
+    return this.#documentDimensions.innerWidth;
+  }
+  set innerWidth(val) {
+    this.#documentDimensions.innerWidth = val;
+  }
+
+  get innerHeight() {
+    return this.#documentDimensions.innerHeight;
+  }
+  set innerHeight(val) {
+    this.#documentDimensions.innerHeight = val;
+  }
+}
+
+/**
+ * The SelectionBox class handles drawing the highlight and background
+ */
+class SelectionBox extends AnonLayer {
+  #x1;
+  #x2;
+  #y1;
+  #y2;
+  #xOffset;
+  #yOffset;
+  #selectionLayer;
+
+  constructor(content, selectionLayer) {
+    super("", content);
+
+    this.#selectionLayer = selectionLayer;
+
+    this.#x1 = 0;
+    this.#x2 = 0;
+    this.#y1 = 0;
+    this.#y2 = 0;
+    this.#xOffset = 0;
+    this.#yOffset = 0;
+  }
+
+  /**
+   * Draw the selected region for screenshotting
+   */
+  show() {
+    this.content.setAttributeForElement(
+      "highlight",
+      "style",
+      `top:${this.top}px;left:${this.left}px;height:${this.height}px;width:${this.width}px;`
+    );
+
+    this.content.setAttributeForElement(
+      "bgTop",
+      "style",
+      `top:0px;height:${this.top}px;left:0px;width:100%;`
+    );
+
+    this.content.setAttributeForElement(
+      "bgBottom",
+      "style",
+      `top:${this.bottom}px;height:calc(100% - ${this.bottom}px);left:0px;width:100%;`
+    );
+
+    this.content.setAttributeForElement(
+      "bgLeft",
+      "style",
+      `top:${this.top}px;height:${this.height}px;left:0px;width:${this.left}px;`
+    );
+
+    this.content.setAttributeForElement(
+      "bgRight",
+      "style",
+      `top:${this.top}px;height:${this.height}px;left:${this.right}px;width:calc(100% - ${this.right}px);`
+    );
+  }
+
+  /**
+   * Update the box coordinates from the rect
+   * @param rect The hover element box
+   * @param scrollX The x offset the page is scrolled
+   * @param scrollY The y offset the page is scrolled
+   */
+  updateBoxFromRect(rect, scrollX, scrollY) {
+    this.top = rect.top + scrollY;
+    this.left = rect.left + scrollX;
+    this.right = rect.right + scrollX;
+    this.bottom = rect.bottom + scrollY;
+  }
+
+  /**
+   * Hide the selected region
+   */
+  hide() {
+    this.content.setAttributeForElement("highlight", "style", "display:none;");
+    this.content.setAttributeForElement("bgTop", "style", "display:none;");
+    this.content.setAttributeForElement("bgBottom", "style", "display:none;");
+    this.content.setAttributeForElement("bgLeft", "style", "display:none;");
+    this.content.setAttributeForElement("bgRight", "style", "display:none;");
+  }
+
+  /**
+   * The box should never appear outside the document so the SelectionBox will
+   * be shifted if the bounds of the box are outside the documents width or height
+   */
+  shiftBox() {
+    let didShift = false;
+    let xDiff = this.right - this.#selectionLayer.scrollWidth;
+    if (xDiff > 0) {
+      this.right -= xDiff;
+      this.left -= xDiff;
+
+      didShift = true;
+    }
+
+    let yDiff = this.bottom - this.#selectionLayer.scrollHeight;
+    if (yDiff > 0) {
+      let curWidth = this.width;
+
+      this.bottom -= yDiff;
+      this.top = this.bottom - curWidth;
+
+      didShift = true;
+    }
+
+    if (didShift) {
+      this.show();
+      this.#selectionLayer.drawButtonsLayer();
+    }
+  }
+
+  /**
+   * Sort the coordinates so x1 < x2 and y1 < y2
+   */
+  sortCoords() {
+    if (this.#x1 > this.#x2) {
+      [this.#x1, this.#x2] = [this.#x2, this.#x1];
+    }
+    if (this.#y1 > this.#y2) {
+      [this.#y1, this.#y2] = [this.#y2, this.#y1];
+    }
+  }
+
+  /**
+   * Gets the dimensions of the currently selected region
+   * @returns {Object}
+   *  {
+   *    x1: the left dimension value
+   *    y1: the top dimension value
+   *    width: the width of the selected region
+   *    height: the height of the selected region
+   *  }
+   */
+  getDimensions() {
+    return {
+      x1: this.left,
+      y1: this.top,
+      width: this.width,
+      height: this.height,
+    };
+  }
+
+  get distance() {
+    return Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2));
+  }
+
+  get xOffset() {
+    return this.#xOffset;
+  }
+  set xOffset(val) {
+    this.#xOffset = val;
+  }
+
+  get yOffset() {
+    return this.#yOffset;
+  }
+  set yOffset(val) {
+    this.#yOffset = val;
+  }
+
+  get top() {
+    return Math.min(this.#y1, this.#y2);
+  }
+  set top(val) {
+    this.#y1 = val > 0 ? val : 0;
+  }
+
+  get left() {
+    return Math.min(this.#x1, this.#x2);
+  }
+  set left(val) {
+    this.#x1 = val > 0 ? val : 0;
+  }
+
+  get right() {
+    return Math.max(this.#x1, this.#x2);
+  }
+  set right(val) {
+    this.#x2 =
+      val > this.#selectionLayer.scrollWidth
+        ? this.#selectionLayer.scrollWidth
+        : val;
+  }
+
+  get bottom() {
+    return Math.max(this.#y1, this.#y2);
+  }
+  set bottom(val) {
+    this.#y2 =
+      val > this.#selectionLayer.scrollHeight
+        ? this.#selectionLayer.scrollHeight
+        : val;
+  }
+
+  get width() {
+    return Math.abs(this.#x2 - this.#x1);
+  }
+  get height() {
+    return Math.abs(this.#y2 - this.#y1);
+  }
+}
+
+class ButtonsLayer extends AnonLayer {
+  #selectionLayer;
+
+  constructor(id, content, selectionLayer) {
+    super(id, content);
+
+    this.#selectionLayer = selectionLayer;
+  }
+
+  /**
+   * Draw the buttons. Check if the box is too near the bottom or left of the
+   * viewport and adjust the buttons accordingly
+   */
+  show() {
+    let {
+      boxLeft,
+      boxTop,
+      boxRight,
+      boxBottom,
+      scrollX,
+      scrollY,
+      innerWidth,
+      innerHeight,
+    } = this.#selectionLayer.getDimensions();
+
+    if (
+      boxTop > scrollY + innerHeight ||
+      boxBottom < scrollY ||
+      boxLeft > scrollX + innerWidth ||
+      boxRight < scrollX
+    ) {
+      // The box is offscreen so need to draw the buttons
+      return;
+    }
+
+    let top = boxBottom;
+    let leftOrRight = `right:calc(100% - ${boxRight}px);`;
+
+    if (scrollY + innerHeight - boxBottom < 70) {
+      if (boxBottom < scrollY + innerHeight) {
+        top = boxBottom - 60;
+      } else if (scrollY + innerHeight - boxTop < 70) {
+        top = boxTop - 60;
+      } else {
+        top = scrollY + innerHeight - 60;
+      }
+    }
+    if (boxRight < 265) {
+      leftOrRight = `left:${boxLeft}px;`;
+    }
+
+    this.content.setAttributeForElement(
+      "buttons",
+      "style",
+      `top:${top}px;${leftOrRight}`
+    );
+  }
+}
+
+class PreviewLayer extends AnonLayer {
+  constructor(id, content) {
+    super(id, content);
+  }
+
+  /**
+   * Draw the eyeballs facing the mouse
+   * @param clientX x pointer position
+   * @param clientY y pointer position
+   * @param width width of the viewport
+   * @param height height of the viewport
+   */
+  drawEyes(clientX, clientY, width, height) {
+    const xpos = Math.floor((10 * (clientX - width / 2)) / width);
+    const ypos = Math.floor((10 * (clientY - height / 2)) / height);
+    const move = `transform:translate(${xpos}px, ${ypos}px);`;
+    this.content.setAttributeForElement("left-eye", "style", move);
+    this.content.setAttributeForElement("right-eye", "style", move);
+  }
+}
+
+class ScreenshotsContainerLayer extends AnonLayer {
+  #width;
+  #height;
+  #previewLayer;
+  #selectionLayer;
+
+  constructor(id, content, previewLayer, selectionLayer) {
+    super(id, content);
+
+    this.#previewLayer = previewLayer;
+    this.#selectionLayer = selectionLayer;
+  }
+
+  /**
+   * Hide the SelectionLayer
+   */
+  hideSelectionLayer() {
+    this.#selectionLayer.hide();
+  }
+
+  /**
+   * Show the PreviewLayer
+   */
+  showPreviewLayer() {
+    this.#previewLayer.show();
+  }
+
+  /**
+   * Hide the PreviewLayer
+   */
+  hidePreviewLayer() {
+    this.#previewLayer.hide();
+    this.#selectionLayer.hideHoverElementSelection();
+  }
+
+  /**
+   * Show the ButtonsLayer
+   */
+  drawButtonsLayer() {
+    this.#selectionLayer.drawButtonsLayer();
+  }
+
+  /**
+   * Hide the ButtonsLayer
+   */
+  hideButtonsLayer() {
+    this.#selectionLayer.hideButtons();
+  }
+
+  /**
+   * Show the SelectionBox
+   */
+  drawSelectionBox() {
+    this.#selectionLayer.drawSelectionBox();
+  }
+
+  /**
+   * Update the box coordinates from the hover element rect
+   */
+  updateSelectionBoxFromRect(scrollX, scrollY) {
+    this.#selectionLayer.updateSelectionBoxFromRect(scrollX, scrollY);
+  }
+
+  /**
+   * Handles when the user moves the mouse over an element
+   * @param viewX The viewport x coordinate
+   * @param viewY The viewport y coordinate
+   * @param targetId The target element id
+   */
+  handleElementHover(viewX, viewY, targetId) {
+    this.#selectionLayer.handleElementHover(viewX, viewY, targetId);
+  }
+
+  /**
+   * Handles moving the rect when the user has scrolled but not moved the mouse
+   * It uses the last x and y viewport coordinates to find the new element at the mouse position
+   */
+  handleElementScroll() {
+    this.#selectionLayer.handleElementScroll();
+  }
+
+  /**
+   * Draw the eyes in the PreviewLayer
+   * @param clientX The x mouse position
+   * @param clientY The y mouse position
+   */
+  drawPreviewEyes(clientX, clientY) {
+    this.#previewLayer.drawEyes(
+      clientX - this.#selectionLayer.scrollX,
+      clientY - this.#selectionLayer.scrollY,
+      this.#selectionLayer.innerWidth,
+      this.#selectionLayer.innerHeight
+    );
+  }
+
+  /**
+   * Get the diagonal distance of the SelectionBox
+   * @returns The diagonal distance of the currently selected region
+   */
+  selectionBoxDistance() {
+    return this.#selectionLayer.getSelectionBoxDistance();
+  }
+
+  /**
+   * Sort the coordinates of the SelectionBox
+   */
+  sortSelectionLayerBoxCoords() {
+    this.#selectionLayer.sortSelectionBoxCoords();
+  }
+
+  /**
+   * Get the SelectionLayer dimensions
+   * @returns {Object}
+   *  {
+   *    x1: the left dimension value
+   *    y1: the top dimension value
+   *    width: the width of the selected region
+   *    height: the height of the selected region
+   *  }
+   */
+  getSelectionLayerBoxDimensions() {
+    return this.#selectionLayer.getSelectionBoxDimensions();
+  }
+
+  /**
+   * Gets the SelectionBox and page dimensions
+   * @returns {Object}
+   *  {
+   *    boxLeft: the left position of the box
+   *    boxTop: the top position of the box
+   *    boxRight: the right position of the box
+   *    boxBottom: the bottom position of the box
+   *    scrollWidth: the total document width
+   *    scrollHeight: the total document height
+   *    scrollX: the x scrolled offset
+   *    scrollY: the y scrolled offset
+   *    innerWidth: the viewport width
+   *    innerHeight: the viewport height
+   *  }
+   */
+  getSelectionLayerDimensions() {
+    return this.#selectionLayer.getDimensions();
+  }
+
+  /**
+   * Shift the SelectionBox
+   */
+  shiftSelectionLayerBox() {
+    this.#selectionLayer.shiftSelectionBox();
+  }
+
+  /**
+   * Set the respective dimensions of the SelectionBox
+   * @param {Object} boxDimensionObject The new box dimensions
+   *  {
+   *    left: new left dimension value or undefined
+   *    top: new top dimension value or undefined
+   *    right: new right dimension value or undefined
+   *    bottom: new bottom dimension value or undefined
+   *   }
+   */
+  setSelectionBoxDimensions(boxDimensionObject) {
+    this.#selectionLayer.setSelectionBoxDimensions(boxDimensionObject);
+  }
+
+  /**
+   * The screenshots-overlay-container doesn't shrink with the window when the
+   * window is resized so we have to manually find the width and height of the
+   * window by looping throught the documentElement's children
+   * If the children mysteriously have a height or width of 0 then we will
+   * fallback to the scrollWidth and scrollHeight which can cause the container
+   * to be larger than the window dimensions
+   * @param win The window object
+   */
+  updateSize(win) {
+    let { innerWidth, innerHeight, scrollX, scrollY } = win;
+    this.#selectionLayer.innerWidth = innerWidth;
+    this.#selectionLayer.innerHeight = innerHeight;
+    this.#selectionLayer.scrollX = scrollX;
+    this.#selectionLayer.scrollY = scrollY;
+
+    const doc = win.document.documentElement;
+    let width = Math.max.apply(
+      null,
+      Array.from(doc.children, x => x.scrollWidth)
+    );
+    let height = Math.max.apply(
+      null,
+      Array.from(doc.children, x => x.scrollHeight)
+    );
+
+    if (width < 1) {
+      width = doc.scrollWidth;
+    } else if (width < innerWidth) {
+      width = innerWidth;
+    }
+
+    if (height < 1) {
+      height = doc.scrollHeight;
+    } else if (height < innerHeight) {
+      height = innerHeight;
+    }
+
+    this.#selectionLayer.scrollWidth = width;
+    this.#selectionLayer.scrollHeight = height;
+
+    this.#width = width;
+    this.#height = height;
+
+    this.drawScreenshotsContainer();
+  }
+
+  /**
+   * Return the dimensions of the screenshots container
+   * @returns {Object}
+   *  width: the container width
+   *  height: the container height
+   */
+  getDimension() {
+    return { width: this.#width, height: this.#height };
+  }
+
+  /**
+   * Draw the screenshots container
+   */
+  drawScreenshotsContainer() {
+    this.content.setAttributeForElement(
+      this.id,
+      "style",
+      `top:0;left:0;width:${this.#width}px;height:${this.#height}px;`
+    );
+  }
+
+  get hoverElementBoxRect() {
+    return this.#selectionLayer.hoverElementBoxRect;
+  }
+}
diff --git a/browser/components/screenshots/ScreenshotsUtils.sys.mjs b/browser/components/screenshots/ScreenshotsUtils.sys.mjs
new file mode 100644
index 0000000000..d0f827acf3
--- /dev/null
+++ b/browser/components/screenshots/ScreenshotsUtils.sys.mjs
@@ -0,0 +1,459 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { getFilename } from "chrome://browser/content/screenshots/fileHelpers.mjs";
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  Downloads: "resource://gre/modules/Downloads.sys.mjs",
+  FileUtils: "resource://gre/modules/FileUtils.sys.mjs",
+  PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.sys.mjs",
+});
+
+const PanelPosition = "bottomright topright";
+const PanelOffsetX = -33;
+const PanelOffsetY = -8;
+
+export class ScreenshotsComponentParent extends JSWindowActorParent {
+  async receiveMessage(message) {
+    let browser = message.target.browsingContext.topFrameElement;
+    switch (message.name) {
+      case "Screenshots:CancelScreenshot":
+        await ScreenshotsUtils.closePanel(browser);
+        break;
+      case "Screenshots:CopyScreenshot":
+        await ScreenshotsUtils.closePanel(browser);
+        let copyBox = message.data;
+        ScreenshotsUtils.copyScreenshotFromRegion(copyBox, browser);
+        break;
+      case "Screenshots:DownloadScreenshot":
+        await ScreenshotsUtils.closePanel(browser);
+        let { title, downloadBox } = message.data;
+        ScreenshotsUtils.downloadScreenshotFromRegion(
+          title,
+          downloadBox,
+          browser
+        );
+        break;
+      case "Screenshots:ShowPanel":
+        ScreenshotsUtils.createOrDisplayButtons(browser);
+        break;
+      case "Screenshots:HidePanel":
+        ScreenshotsUtils.closePanel(browser);
+        break;
+    }
+  }
+
+  didDestroy() {
+    // When restoring a crashed tab the browser is null
+    let browser = this.browsingContext.topFrameElement;
+    if (browser) {
+      ScreenshotsUtils.closePanel(browser);
+    }
+  }
+}
+
+export var ScreenshotsUtils = {
+  initialized: false,
+  initialize() {
+    if (!this.initialized) {
+      if (
+        !Services.prefs.getBoolPref(
+          "screenshots.browser.component.enabled",
+          false
+        )
+      ) {
+        return;
+      }
+      Services.obs.addObserver(this, "menuitem-screenshot");
+      Services.obs.addObserver(this, "screenshots-take-screenshot");
+      this.initialized = true;
+      if (Cu.isInAutomation) {
+        Services.obs.notifyObservers(null, "screenshots-component-initialized");
+      }
+    }
+  },
+  uninitialize() {
+    if (this.initialized) {
+      Services.obs.removeObserver(this, "menuitem-screenshot");
+      Services.obs.removeObserver(this, "screenshots-take-screenshot");
+      this.initialized = false;
+    }
+  },
+  handleEvent(event) {
+    if (event.type === "keydown" && event.key === "Escape") {
+      this.closePanel(event.view.gBrowser.selectedBrowser, true);
+    }
+  },
+  observe(subj, topic, data) {
+    let { gBrowser } = subj;
+    let browser = gBrowser.selectedBrowser;
+
+    switch (topic) {
+      case "menuitem-screenshot":
+        let success = this.closeDialogBox(browser);
+        if (!success || data === "retry") {
+          // only toggle the buttons if no dialog box is found because
+          // if dialog box is found then the buttons are hidden and we return early
+          // else no dialog box is found and we need to toggle the buttons
+          // or if retry because the dialog box was closed and we need to show the panel
+          this.togglePanelAndOverlay(browser);
+        }
+        break;
+      case "screenshots-take-screenshot":
+        // need to close the preview because screenshot was taken
+        this.closePanel(browser, true);
+
+        // init UI as a tab dialog box
+        let dialogBox = gBrowser.getTabDialogBox(browser);
+
+        let { dialog } = dialogBox.open(
+          `chrome://browser/content/screenshots/screenshots.html?browsingContextId=${browser.browsingContext.id}`,
+          {
+            features: "resizable=no",
+            sizeTo: "available",
+            allowDuplicateDialogs: false,
+          }
+        );
+        this.doScreenshot(browser, dialog, data);
+    }
+    return null;
+  },
+  /**
+   * Notify screenshots when screenshot command is used.
+   * @param window The current window the screenshot command was used.
+   * @param type The type of screenshot taken. Used for telemetry.
+   */
+  notify(window, type) {
+    if (Services.prefs.getBoolPref("screenshots.browser.component.enabled")) {
+      Services.obs.notifyObservers(
+        window.event.currentTarget.ownerGlobal,
+        "menuitem-screenshot"
+      );
+    } else {
+      Services.obs.notifyObservers(null, "menuitem-screenshot-extension", type);
+    }
+  },
+  /**
+   * Creates and returns a Screenshots actor.
+   * @param browser The current browser.
+   * @returns JSWindowActor The screenshot actor.
+   */
+  getActor(browser) {
+    let actor = browser.browsingContext.currentWindowGlobal.getActor(
+      "ScreenshotsComponent"
+    );
+    return actor;
+  },
+  /**
+   * Open the panel buttons and call child actor to open the overlay
+   * @param browser The current browser
+   */
+  openPanel(browser) {
+    let actor = this.getActor(browser);
+    actor.sendQuery("Screenshots:ShowOverlay");
+    this.createOrDisplayButtons(browser);
+  },
+  /**
+   * Close the panel and call child actor to close the overlay
+   * @param browser The current browser
+   * @param {bool} closeOverlay Whether or not to
+   * send a message to the child to close the overly.
+   * Defaults to false. Will be false when called from didDestroy.
+   */
+  async closePanel(browser, closeOverlay = false) {
+    let buttonsPanel = browser.ownerDocument.querySelector(
+      "#screenshotsPagePanel"
+    );
+    if (buttonsPanel && buttonsPanel.state !== "closed") {
+      buttonsPanel.hidePopup();
+    }
+    buttonsPanel?.ownerDocument.removeEventListener("keydown", this);
+    if (closeOverlay) {
+      let actor = this.getActor(browser);
+      await actor.sendQuery("Screenshots:HideOverlay");
+    }
+  },
+  /**
+   * If the buttons panel exists and is open we will hide both the panel
+   * and the overlay. If the overlay is showing, we will hide the overlay.
+   * Otherwise create or display the buttons.
+   * @param browser The current browser.
+   */
+  async togglePanelAndOverlay(browser) {
+    let buttonsPanel = browser.ownerDocument.querySelector(
+      "#screenshotsPagePanel"
+    );
+    let isOverlayShowing = await this.getActor(browser).sendQuery(
+      "Screenshots:isOverlayShowing"
+    );
+    if (buttonsPanel && (isOverlayShowing || buttonsPanel.state !== "closed")) {
+      buttonsPanel.hidePopup();
+      let actor = this.getActor(browser);
+      return actor.sendQuery("Screenshots:HideOverlay");
+    }
+    let actor = this.getActor(browser);
+    actor.sendQuery("Screenshots:ShowOverlay");
+    return this.createOrDisplayButtons(browser);
+  },
+  /**
+   * Gets the screenshots dialog box
+   * @param browser The selected browser
+   * @returns Screenshots dialog box if it exists otherwise null
+   */
+  getDialog(browser) {
+    let currTabDialogBox = browser.tabDialogBox;
+    let browserContextId = browser.browsingContext.id;
+    if (currTabDialogBox) {
+      currTabDialogBox.getTabDialogManager();
+      let manager = currTabDialogBox.getTabDialogManager();
+      let dialogs = manager.hasDialogs && manager.dialogs;
+      if (dialogs.length) {
+        for (let dialog of dialogs) {
+          if (
+            dialog._openedURL.endsWith(
+              `browsingContextId=${browserContextId}`
+            ) &&
+            dialog._openedURL.includes("screenshots.html")
+          ) {
+            return dialog;
+          }
+        }
+      }
+    }
+    return null;
+  },
+  /**
+   * Closes the dialog box it it exists
+   * @param browser The selected browser
+   */
+  closeDialogBox(browser) {
+    let dialog = this.getDialog(browser);
+    if (dialog) {
+      dialog.close();
+      return true;
+    }
+    return false;
+  },
+  /**
+   * If the buttons panel does not exist then we will replace the buttons
+   * panel template with the buttons panel then open the buttons panel and
+   * show the screenshots overaly.
+   * @param browser The current browser.
+   */
+  createOrDisplayButtons(browser) {
+    let doc = browser.ownerDocument;
+    let buttonsPanel = doc.querySelector("#screenshotsPagePanel");
+    if (!buttonsPanel) {
+      let template = doc.querySelector("#screenshotsPagePanelTemplate");
+      let clone = template.content.cloneNode(true);
+      template.replaceWith(clone);
+      buttonsPanel = doc.querySelector("#screenshotsPagePanel");
+    }
+
+    buttonsPanel.ownerDocument.addEventListener("keydown", this);
+
+    let anchor = doc.querySelector("#navigator-toolbox");
+    buttonsPanel.openPopup(anchor, PanelPosition, PanelOffsetX, PanelOffsetY);
+  },
+  /**
+   * Gets the full page bounds from the screenshots child actor.
+   * @param browser The current browser.
+   * @returns { object }
+   *    Contains the full page bounds from the screenshots child actor.
+   */
+  fetchFullPageBounds(browser) {
+    let actor = this.getActor(browser);
+    return actor.sendQuery("Screenshots:getFullPageBounds");
+  },
+  /**
+   * Gets the visible bounds from the screenshots child actor.
+   * @param browser The current browser.
+   * @returns { object }
+   *    Contains the visible bounds from the screenshots child actor.
+   */
+  fetchVisibleBounds(browser) {
+    let actor = this.getActor(browser);
+    return actor.sendQuery("Screenshots:getVisibleBounds");
+  },
+  /**
+   * Add screenshot-ui to the dialog box and then take the screenshot
+   * @param browser The current browser.
+   * @param dialog The dialog box to show the screenshot preview.
+   * @param type The type of screenshot taken.
+   */
+  async doScreenshot(browser, dialog, type) {
+    await dialog._dialogReady;
+    let screenshotsUI = dialog._frame.contentDocument.createElement(
+      "screenshots-ui"
+    );
+    dialog._frame.contentDocument.body.appendChild(screenshotsUI);
+
+    let rect;
+    if (type === "full-page") {
+      rect = await this.fetchFullPageBounds(browser);
+    } else {
+      rect = await this.fetchVisibleBounds(browser);
+    }
+    return this.takeScreenshot(browser, dialog, rect);
+  },
+  /**
+   * Take the screenshot and add the image to the dialog box
+   * @param browser The current browser.
+   * @param dialog The dialog box to show the screenshot preview.
+   * @param rect DOMRect containing bounds of the screenshot.
+   */
+  async takeScreenshot(browser, dialog, rect) {
+    let { canvas, snapshot } = await this.createCanvas(rect, browser);
+
+    let newImg = dialog._frame.contentDocument.createElement("img");
+    let url = canvas.toDataURL();
+
+    newImg.id = "placeholder-image";
+
+    newImg.src = url;
+    dialog._frame.contentDocument
+      .getElementById("preview-image-div")
+      .appendChild(newImg);
+
+    if (Cu.isInAutomation) {
+      Services.obs.notifyObservers(null, "screenshots-preview-ready");
+    }
+
+    snapshot.close();
+  },
+  /**
+   * Creates a canvas and draws a snapshot of the screenshot on the canvas
+   * @param box The bounds of screenshots
+   * @param browser The current browser
+   * @returns The canvas and snapshot in an object
+   */
+  async createCanvas(box, browser) {
+    let rect = new DOMRect(box.x1, box.y1, box.width, box.height);
+    let { devicePixelRatio } = box;
+
+    let browsingContext = BrowsingContext.get(browser.browsingContext.id);
+
+    let snapshot = await browsingContext.currentWindowGlobal.drawSnapshot(
+      rect,
+      devicePixelRatio,
+      "rgb(255,255,255)"
+    );
+
+    let canvas = browser.ownerDocument.createElementNS(
+      "http://www.w3.org/1999/xhtml",
+      "html:canvas"
+    );
+    let context = canvas.getContext("2d");
+
+    canvas.width = snapshot.width;
+    canvas.height = snapshot.height;
+
+    context.drawImage(snapshot, 0, 0);
+
+    return { canvas, snapshot };
+  },
+  /**
+   * Copy the screenshot
+   * @param region The bounds of the screenshots
+   * @param browser The current browser
+   */
+  async copyScreenshotFromRegion(region, browser) {
+    let { canvas, snapshot } = await this.createCanvas(region, browser);
+
+    let url = canvas.toDataURL();
+
+    this.copyScreenshot(url, browser);
+
+    snapshot.close();
+  },
+  /**
+   * Copy the image to the clipboard
+   * @param dataUrl The image data
+   */
+  copyScreenshot(dataUrl) {
+    // Guard against missing image data.
+    if (!dataUrl) {
+      return;
+    }
+
+    const imageTools = Cc["@mozilla.org/image/tools;1"].getService(
+      Ci.imgITools
+    );
+
+    const base64Data = dataUrl.replace("data:image/png;base64,", "");
+
+    const image = atob(base64Data);
+    const imgDecoded = imageTools.decodeImageFromBuffer(
+      image,
+      image.length,
+      "image/png"
+    );
+
+    const transferable = Cc[
+      "@mozilla.org/widget/transferable;1"
+    ].createInstance(Ci.nsITransferable);
+    transferable.init(null);
+    transferable.addDataFlavor("image/png");
+    transferable.setTransferData("image/png", imgDecoded);
+
+    Services.clipboard.setData(
+      transferable,
+      null,
+      Services.clipboard.kGlobalClipboard
+    );
+  },
+  /**
+   * Download the screenshot
+   * @param title The title of the current page
+   * @param box The bounds of the screenshot
+   * @param browser The current browser
+   */
+  async downloadScreenshotFromRegion(title, box, browser) {
+    let { canvas, snapshot } = await this.createCanvas(box, browser);
+
+    let dataUrl = canvas.toDataURL();
+
+    await this.downloadScreenshot(title, dataUrl, browser);
+
+    snapshot.close();
+  },
+  /**
+   * Download the screenshot
+   * @param title The title of the current page or null and getFilename will get the title
+   * @param dataUrl The image data
+   * @param browser The current browser
+   */
+  async downloadScreenshot(title, dataUrl, browser) {
+    // Guard against missing image data.
+    if (!dataUrl) {
+      return;
+    }
+
+    let filename = await getFilename(title, browser);
+
+    const targetFile = new lazy.FileUtils.File(filename);
+
+    // Create download and track its progress.
+    try {
+      const download = await lazy.Downloads.createDownload({
+        source: dataUrl,
+        target: targetFile,
+      });
+
+      let isPrivate = lazy.PrivateBrowsingUtils.isWindowPrivate(
+        browser.ownerGlobal
+      );
+      const list = await lazy.Downloads.getList(
+        isPrivate ? lazy.Downloads.PRIVATE : lazy.Downloads.PUBLIC
+      );
+      // add the download to the download list in the Downloads list in the Browser UI
+      list.add(download);
+
+      // Await successful completion of the save via the download manager
+      await download.start();
+    } catch (ex) {}
+  },
+};
diff --git a/browser/components/screenshots/content/cancel.svg b/browser/components/screenshots/content/cancel.svg
new file mode 100644
index 0000000000..0c176be25f
--- /dev/null
+++ b/browser/components/screenshots/content/cancel.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10.5 8.7L5.2 3.3c-.5-.5-1.3-.5-1.8 0s-.5 1.3 0 1.8l5.3 5.3-5.3 5.3c-.5.5-.5 1.3 0 1.8s1.3.5 1.8 0l5.3-5.3 5.3 5.3c.5.5 1.3.5 1.8 0s.5-1.3 0-1.8l-5.3-5.3 5.3-5.3c.5-.5.5-1.3 0-1.8s-1.3-.5-1.8 0l-5.3 5.4z" fill="context-fill #3e3d40"/></svg>
diff --git a/browser/components/screenshots/content/copied-notification.svg b/browser/components/screenshots/content/copied-notification.svg
new file mode 100644
index 0000000000..2310b41aef
--- /dev/null
+++ b/browser/components/screenshots/content/copied-notification.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="context-fill" d="M44.121 24.879l-9-9A3 3 0 0 0 33 15h-3v-3a3 3 0 0 0-.879-2.121l-9-9A3 3 0 0 0 18 0H9a6 6 0 0 0-6 6v21a6 6 0 0 0 6 6h9v9a6 6 0 0 0 6 6h15a6 6 0 0 0 6-6V27a3 3 0 0 0-.879-2.121zM37.758 27H33v-4.758zm-15-15H18V7.242zM18 21v6H9V6h6v7.5a1.5 1.5 0 0 0 1.5 1.5H24a6 6 0 0 0-6 6zm6 21V21h6v7.5a1.5 1.5 0 0 0 1.5 1.5H39v12z"/></svg>
\ No newline at end of file
diff --git a/browser/components/screenshots/content/copy.svg b/browser/components/screenshots/content/copy.svg
new file mode 100644
index 0000000000..3e3d49122c
--- /dev/null
+++ b/browser/components/screenshots/content/copy.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="context-fill #3e3d40" d="M14.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/></svg>
diff --git a/browser/components/screenshots/content/download-white.svg b/browser/components/screenshots/content/download-white.svg
new file mode 100644
index 0000000000..bb6a7de845
--- /dev/null
+++ b/browser/components/screenshots/content/download-white.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.1 12L4.9 7.9c-.5-.5-1.3-.5-1.8 0s-.5 1.3 0 1.8l6.2 6.2c.5.5 1.3.5 1.8 0l6.2-6.2c.5-.5.5-1.3 0-1.8s-1.3-.5-1.8 0L11.6 12V1.2C11.6.6 11 0 10.3 0c-.7 0-1.2.6-1.2 1.2V12zM4 20c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2h12.5c.7 0 1.2.6 1.2 1.2s-.5 1.2-1.2 1.2H4z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/browser/components/screenshots/content/download.svg b/browser/components/screenshots/content/download.svg
new file mode 100644
index 0000000000..a85f745937
--- /dev/null
+++ b/browser/components/screenshots/content/download.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.1 12L4.9 7.9c-.5-.5-1.3-.5-1.8 0s-.5 1.3 0 1.8l6.2 6.2c.5.5 1.3.5 1.8 0l6.2-6.2c.5-.5.5-1.3 0-1.8s-1.3-.5-1.8 0L11.6 12V1.2C11.6.6 11 0 10.3 0c-.7 0-1.2.6-1.2 1.2V12zM4 20c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2h12.5c.7 0 1.2.6 1.2 1.2s-.5 1.2-1.2 1.2H4z" fill="context-fill #3e3d40"/></svg>
diff --git a/browser/components/screenshots/content/icon-welcome-face-without-eyes.svg b/browser/components/screenshots/content/icon-welcome-face-without-eyes.svg
new file mode 100644
index 0000000000..138308af57
--- /dev/null
+++ b/browser/components/screenshots/content/icon-welcome-face-without-eyes.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#fff}</style><g id="Visual-design"><g id="_x31_.2-Div-selection" transform="translate(-575 -503)"><g id="Introduction" transform="translate(250 503)"><g id="icon-welcomeface" transform="translate(325)"><g id="Layer_1_1_"><path id="Shape" class="st0" d="M11.4.9v2.9h-6c-.9 0-1.5.8-1.5 1.5v6H.8V3.8C.8 2.1 2.2.7 3.9.7h7.6v.2h-.1z"/><path id="Shape_1_" class="st0" d="M63.2 11.4h-3.1v-6c0-.8-.6-1.5-1.5-1.5h-6v-3h7.6c1.7 0 3.1 1.4 3.1 3.1l-.1 7.4z"/><path id="Shape_2_" class="st0" d="M52.6 63.2v-3.1h6c.9 0 1.5-.6 1.5-1.5v-6h3.1v7.6c0 1.7-1.4 3.1-3.1 3.1l-7.5-.1z"/><path id="Shape_3_" class="st0" d="M.8 52.7h3.1v6c0 .9.6 1.5 1.5 1.5h6v3.1H3.8c-1.7 0-3.1-1.4-3.1-3.1l.1-7.5z"/><path id="Shape_6_" class="st0" d="M33.3 49.2H33c-4.6-.1-7.8-3.6-7.9-3.8-.6-.8-.6-2 .1-2.7.8-.8 1.9-.6 2.6.1 0 0 2.3 2.6 5.2 2.6 1.8 0 3.6-.9 5.2-2.6.8-.8 1.9-.8 2.7 0s.8 1.9 0 2.7c-2.2 2.4-4.9 3.7-7.6 3.7z"/></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/browser/components/screenshots/content/menu-fullpage.svg b/browser/components/screenshots/content/menu-fullpage.svg
new file mode 100644
index 0000000000..6552ef8cdd
--- /dev/null
+++ b/browser/components/screenshots/content/menu-fullpage.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 46"><path id="bg" d="M7 42h32V5.1H7z" fill="context-stroke #00fdff"/><g id="frame" transform="translate(0 6)"><path d="M40 5c.5 0 1 .4 1 1v24c0 .5-.5 1-1 1H6c-.6 0-1-.5-1-1V6c0-.6.4-1 1-1h34zM7 29h32V7H7v22z" fill="context-fill"/><path id="Fill-4" fill="context-fill" d="M7 7h32V5H7z"/><path id="Fill-6" fill="context-fill" d="M7 31h32v-2H7z"/></g><path id="dash" d="M38 11h1V9h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm-1 1h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-2-3H7v3h2v-1H8v-2zm-1-1h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1V9H7v2zm2-6H7v3h1V6h1V5zm1 1h2V5h-2v1zm3 0h2V5h-2v1zm3 0h2V5h-2v1zm3 0h2V5h-2v1zm3 0h2V5h-2v1zm3 0h2V5h-2v1zm3 0h2V5h-2v1zm3 0h2V5h-2v1zm3 0h2V5h-2v1zm5-1h-2v1h1v2h1V5z" fill="context-fill" opacity="0.5"/></svg>
\ No newline at end of file
diff --git a/browser/components/screenshots/content/menu-visible.svg b/browser/components/screenshots/content/menu-visible.svg
new file mode 100644
index 0000000000..98cb1bfd3e
--- /dev/null
+++ b/browser/components/screenshots/content/menu-visible.svg
@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 46"><path d="M5 12c0-.6.5-1 1-1h34c.6 0 1 .5 1 1v24c0 .6-.5 1-1 1H6c-.6 0-1-.5-1-1V12zm2 23V13h32v22H7z" fill="context-fill"/><path d="M7 35h32V13H7z" fill="context-stroke #00fdff"/><path id="dash" d="M38 19h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm0 3h1v-2h-1v2zm-1 1h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-3 0h2v-1h-2v1zm-2-3H7v3h2v-1H8v-2zm-1-1h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm0-3h1v-2H7v2zm2-6H7v3h1v-2h1v-1zm1 1h2v-1h-2v1zm3 0h2v-1h-2v1zm3 0h2v-1h-2v1zm3 0h2v-1h-2v1zm3 0h2v-1h-2v1zm3 0h2v-1h-2v1zm3 0h2v-1h-2v1zm3 0h2v-1h-2v1zm3 0h2v-1h-2v1zm5-1h-2v1h1v2h1v-3z" fill="context-fill" opacity="0.5"/></svg>
\ No newline at end of file
diff --git a/browser/components/screenshots/content/screenshots.css b/browser/components/screenshots/content/screenshots.css
new file mode 100644
index 0000000000..48fe7c3038
--- /dev/null
+++ b/browser/components/screenshots/content/screenshots.css
@@ -0,0 +1,535 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html,
+body {
+  padding:  0;
+  margin:  0;
+  background-color: transparent;
+  height: 100vh;
+  width: 100vw;
+}
+
+.button,
+.preview-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 400;
+  height: 40px;
+  min-width: 40px;
+  outline: none;
+  padding: 0 10px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: background 150ms cubic-bezier(0.07, 0.95, 0, 1), border 150ms cubic-bezier(0.07, 0.95, 0, 1);
+  user-select: none;
+  white-space: nowrap;
+}
+
+button img {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.button.hidden,
+.hidden.preview-button {
+  display: none;
+}
+
+.button.small,
+.small.preview-button {
+  height: 32px;
+  line-height: 32px;
+  padding: 0 8px;
+}
+
+.button.active,
+.active.preview-button {
+  background-color: #dedede;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  .button.active,
+  .active.preview-button {
+    background-color: ButtonFace;
+  }
+}
+
+.button.tiny,
+.tiny.preview-button {
+  font-size: 14px;
+  height: 26px;
+  border: 1px solid #c7c7c7;
+}
+
+.button.tiny:hover,
+.tiny.preview-button:hover,
+.button.tiny:focus,
+.tiny.preview-button:focus {
+  background: #ededf0;
+  border-color: #989898;
+}
+
+.button.tiny:active,
+.tiny.preview-button:active {
+  background: #dedede;
+  border-color: #989898;
+}
+
+.button.block-button,
+.block-button.preview-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: 0;
+  border-inline-end: 1px solid #c7c7c7;
+  box-shadow: none;
+  border-radius: 0;
+  flex-shrink: 0;
+  font-size: 20px;
+  height: 100px;
+  line-height: 100%;
+  overflow: hidden;
+}
+
+@media (max-width: 719px) {
+  .button.block-button,
+  .block-button.preview-button {
+    justify-content: flex-start;
+    font-size: 16px;
+    height: 72px;
+    margin-inline-end: 10px;
+    padding: 0 5px;
+  }
+}
+
+.button.block-button:hover,
+.block-button.preview-button:hover {
+  background: #ededf0;
+}
+
+.button.block-button:active,
+.block-button.preview-button:active {
+  background: #dedede;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  .button.block-button:hover,
+  .block-button.preview-button:hover {
+    background-color: ButtonText;
+  }
+
+  .button.block-button:active,
+  .block-button.preview-button:active {
+    background-color: ButtonFace;
+  }
+}
+
+.button.download,
+.download.preview-button,
+.button.flag,
+.flag.preview-button {
+  background-repeat: no-repeat;
+  background-size: 50%;
+  background-position: center;
+  margin-inline-end: 10px;
+  transition: background-color 150ms cubic-bezier(0.07, 0.95, 0, 1);
+}
+
+.button.download,
+.download.highlight-button-retry,
+.download.highlight-button-cancel,
+.download.highlight-button-download,
+.download.highlight-button-copy {
+  background-image: url("chrome://browser/content/screenshots/download.svg");
+}
+
+.button.download:hover,
+.download.preview-button:hover {
+  background-color: #ededf0;
+}
+
+.button.download:active,
+.download.preview-button:active {
+  background-color: #dedede;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  .button.download:hover,
+  .download.preview-button:hover {
+    background-color: ButtonText;
+    color: ButtonFace;
+  }
+
+  .button.download:active,
+  .download.preview-button:active {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+}
+
+.button.primary,
+.primary.highlight-retry-cancel,
+.primary.highlight-button-cancel,
+.highlight-button-download,
+.primary.highlight-button-copy {
+  background-color: #0a84ff;
+  color: #fff;
+}
+
+.button.primary:hover,
+.primary.highlight-button-retry:hover,
+.primary.highlight-button-cancel:hover,
+.highlight-button-download:hover,
+.primary.highlight-button-copy:hover,
+.button.primary:focus,
+.primary.highlight-button-retry:focus,
+.primary.highlight-button-cancel:focus,
+.highlight-button-download:focus,
+.primary.highlight-button-copy:focus {
+  background-color: #0072e5;
+}
+
+.button.primary:active,
+.primary.highlight-button-retry:active,
+.primary.highlight-button-cancel:active,
+.highlight-button-download:active,
+.primary.highlight-button-copy:active {
+  background-color: #0065cc;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  .button.primary,
+  .primary.highlight-retry-cancel,
+  .primary.highlight-button-cancel,
+  .highlight-button-download,
+  .primary.highlight-button-copy {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  .button.primary:hover,
+  .primary.highlight-button-retry:hover,
+  .primary.highlight-button-cancel:hover,
+  .highlight-button-download:hover,
+  .primary.highlight-button-copy:hover,
+  .button.primary:focus,
+  .primary.highlight-button-retry:focus,
+  .primary.highlight-button-cancel:focus,
+  .highlight-button-download:focus,
+  .primary.highlight-button-copy:focus {
+    background-color: ButtonText;
+    color: ButtonFace;
+  }
+
+  .button.primary:active,
+  .primary.highlight-button-retry:active,
+  .primary.highlight-button-cancel:active,
+  .highlight-button-download:active,
+  .primary.highlight-button-copy:active {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+}
+
+.button.secondary,
+.highlight-button-retry,
+.highlight-button-cancel,
+.secondary.highlight-button-download,
+.highlight-button-copy {
+  background-color: #f9f9fa;
+  color: #38383d;
+}
+
+.button.secondary:hover,
+.highlight-button-retry:hover,
+.highlight-button-cancel:hover,
+.secondary.highlight-button-download:hover,
+.highlight-button-copy:hover {
+  background-color: #ededf0;
+}
+
+.button.secondary:active,
+.highlight-button-retry:active,
+.highlight-button-cancel:active,
+.secondary.highlight-button-download:active,
+.highlight-button-copy:active {
+  background-color: #dedede;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  .button.secondary,
+  .highlight-button-retry,
+  .highlight-button-cancel,
+  .secondary.highlight-button-download,
+  .highlight-button-copy {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  .button.secondary:hover,
+  .highlight-button-retry:hover,
+  .highlight-button-cancel:hover,
+  .secondary.highlight-button-download:hover,
+  .highlight-button-copy:hover {
+    background-color: ButtonText;
+    color: ButtonFace;
+  }
+
+  .button.secondary:active,
+  .highlight-button-retry:active,
+  .highlight-button-cancel:active,
+  .secondary.highlight-button-download:active,
+  .highlight-button-copy:active {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+}
+
+.button.transparent,
+.transparent.preview-button {
+  background-color: transparent;
+  color: #38383d;
+}
+
+.button.transparent:hover,
+.transparent.preview-button:hover {
+  background-color: #ededf0;
+}
+
+.button.transparent:focus,
+.transparent.preview-button:focus,
+.button.transparent:active,
+.transparent.preview-button:active {
+  background-color: #dedede;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  .button.transparent,
+  .transparent.preview-button {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  .button.transparent:hover,
+  .transparent.preview-button:hover {
+    background-color: ButtonText;
+    color: ButtonFace;
+  }
+
+  .button.transparent:focus,
+  .transparent.preview-button:focus,
+  .button.transparent:active,
+  .transparent.preview-button:active {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+}
+
+.button.warning,
+.warning.preview-button {
+  color: #fff;
+  background: #d92215;
+}
+
+.button.warning:hover,
+.warning.preview-button:hover,
+.button.warning:focus,
+.warning.preview-button:focus {
+  background: #b81d12;
+}
+
+.button.warning:active,
+.warning.preview-button:active {
+  background: #a11910;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  .button.warning,
+  .warning.preview-button {
+    color: ButtonText;
+    background-color: ButtonFace;
+  }
+
+  .button.warning:hover,
+  .warning.preview-button:hover,
+  .button.warning:focus,
+  .warning.preview-button:focus {
+    background-color: ButtonText;
+    color: ButtonFace;
+  }
+
+  .button.warning:active,
+  .warning.preview-button:active {
+    background-color: ButtonFace;
+  }
+}
+
+@keyframes bounce {
+  0% {
+    transform: translateX(-40px);
+  }
+  100% {
+    transform: translate(190px);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  70% {
+    opacity: 0.25;
+    transform: scale(1.04);
+  }
+  100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+}
+
+.highlight {
+  border-radius: 1px;
+  border: 2px dashed rgba(255, 255, 255, 0.8);
+  box-sizing: border-box;
+  cursor: move;
+  position: absolute;
+  z-index: 9999999999;
+}
+
+/* When prefers contrast is fully supported, we should change these quereies to cover both high and low prefers contrast cases */
+@media (forced-colors: active) {
+  .highlight {
+    border: 2px dashed white;
+    opacity: 1.0;
+  }
+}
+
+.highlight-button-cancel {
+  margin: 5px;
+  width: 40px;
+}
+
+.highlight-button-download {
+  margin: 5px;
+  width: auto;
+  font-size: 18px;
+}
+
+.highlight-button-download img {
+  height: 16px;
+  width: 16px;
+}
+
+.highlight-button-download:-moz-locale-dir(rtl) {
+  flex-direction: column-reverse;
+}
+
+.highlight-button-download img:-moz-locale-dir(ltr) {
+  padding-inline-end: 8px;
+}
+
+.highlight-button-download img:-moz-locale-dir(rtl) {
+  padding-inline-start: 8px;
+}
+
+.highlight-button-copy {
+  margin: 5px;
+  width: auto;
+}
+
+.highlight-button-copy img {
+  height: 16px;
+  width: 16px;
+}
+
+.highlight-button-copy:-moz-locale-dir(rtl) {
+  flex-direction: column-reverse;
+}
+
+.highlight-button-copy img:-moz-locale-dir(ltr) {
+  padding-inline-end: 8px;
+}
+
+.highlight-button-copy img:-moz-locale-dir(rtl) {
+  padding-inline-start: 8px;
+}
+
+.preview-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-inline-end: 4px;
+  inset-inline-end: 0;
+  width: 100%;
+  height: 60px;
+  border-radius: 4px 4px 0 0;
+  background: rgba(249, 249, 250, 0.8);
+  top: 0;
+  border: 1px solid rgba(249, 249, 250, 0.2);
+  border-bottom: 0;
+  box-sizing: border-box;
+}
+
+.preview-image {
+  background-color: rgba(249, 249, 250, 0.8);
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+.preview-image-area {
+  margin: 10%;
+  margin-top: 2%;
+}
+
+.image-view {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: column;
+}
+
+.left {
+  margin-inline-start: 0;
+}
+
+.right {
+  margin-inline-start: 20px;
+}
+
+#placeholder-image {
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.06);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/browser/components/screenshots/content/screenshots.html b/browser/components/screenshots/content/screenshots.html
new file mode 100644
index 0000000000..e7ccc26797
--- /dev/null
+++ b/browser/components/screenshots/content/screenshots.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this file,
+   - You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <meta http-equiv="Content-Security-Policy" content="default-src chrome:;img-src data:; object-src 'none'">
+
+    <link rel="localization" href="browser/screenshots.ftl">
+
+    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+    <link rel="stylesheet" href="chrome://browser/content/screenshots/screenshots.css">
+    <script defer src="chrome://browser/content/screenshots/screenshots.js"></script>
+  </head>
+
+  <body>
+    <template id="screenshots-dialog-template">
+      <div class="image-view">
+        <div class="preview-buttons">
+          <button class="highlight-button-retry preview-button" data-l10n-id="screenshots-retry-button-title">
+            <img src="chrome://global/skin/icons/reload.svg"/>
+          </button>
+          <button class="highlight-button-cancel preview-button" data-l10n-id="screenshots-cancel-button-title">
+            <img src="chrome://browser/content/screenshots/cancel.svg"/>
+          </button>
+          <button class="highlight-button-copy preview-button" data-l10n-id="screenshots-copy-button-title">
+            <img src="chrome://browser/content/screenshots/copy.svg"/>
+            <span data-l10n-id="screenshots-copy-button"/>
+          </button>
+          <button class="highlight-button-download preview-button" data-l10n-id="screenshots-download-button-title">
+            <img src="chrome://browser/content/screenshots/download-white.svg"/>
+            <span data-l10n-id="screenshots-download-button"/>
+          </button>
+        </div>
+        <div class="preview-image">
+          <div id="preview-image-div" class="preview-image-area">
+          </div>
+        </div>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/browser/components/screenshots/content/screenshots.js b/browser/components/screenshots/content/screenshots.js
new file mode 100644
index 0000000000..1436b3803f
--- /dev/null
+++ b/browser/components/screenshots/content/screenshots.js
@@ -0,0 +1,97 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* eslint-env mozilla/browser-window */
+
+"use strict";
+
+const { XPCOMUtils } = ChromeUtils.importESModule(
+  "resource://gre/modules/XPCOMUtils.sys.mjs"
+);
+
+ChromeUtils.defineESModuleGetters(this, {
+  Downloads: "resource://gre/modules/Downloads.sys.mjs",
+  FileUtils: "resource://gre/modules/FileUtils.sys.mjs",
+  ScreenshotsUtils: "resource:///modules/ScreenshotsUtils.sys.mjs",
+});
+
+class ScreenshotsUI extends HTMLElement {
+  constructor() {
+    super();
+  }
+  async connectedCallback() {
+    this.initialize();
+  }
+
+  initialize() {
+    if (this._initialized) {
+      return;
+    }
+    this._initialized = true;
+    let template = this.ownerDocument.getElementById(
+      "screenshots-dialog-template"
+    );
+    let templateContent = template.content;
+    this.appendChild(templateContent.cloneNode(true));
+
+    this._retryButton = this.querySelector(".highlight-button-retry");
+    this._retryButton.addEventListener("click", this);
+    this._cancelButton = this.querySelector(".highlight-button-cancel");
+    this._cancelButton.addEventListener("click", this);
+    this._copyButton = this.querySelector(".highlight-button-copy");
+    this._copyButton.addEventListener("click", this);
+    this._downloadButton = this.querySelector(".highlight-button-download");
+    this._downloadButton.addEventListener("click", this);
+  }
+
+  close() {
+    URL.revokeObjectURL(document.getElementById("placeholder-image").src);
+    window.close();
+  }
+
+  async handleEvent(event) {
+    if (event.type == "click" && event.currentTarget == this._cancelButton) {
+      this.close();
+    } else if (
+      event.type == "click" &&
+      event.currentTarget == this._copyButton
+    ) {
+      this.saveToClipboard(
+        this.ownerDocument.getElementById("placeholder-image").src
+      );
+    } else if (
+      event.type == "click" &&
+      event.currentTarget == this._downloadButton
+    ) {
+      await this.saveToFile(
+        this.ownerDocument.getElementById("placeholder-image").src
+      );
+    } else if (
+      event.type == "click" &&
+      event.currentTarget == this._retryButton
+    ) {
+      Services.obs.notifyObservers(
+        window.parent.ownerGlobal,
+        "menuitem-screenshot",
+        "retry"
+      );
+    }
+  }
+
+  async saveToFile(dataUrl) {
+    await ScreenshotsUtils.downloadScreenshot(
+      null,
+      dataUrl,
+      window.parent.ownerGlobal.gBrowser.selectedBrowser
+    );
+
+    this.close();
+  }
+
+  saveToClipboard(dataUrl) {
+    ScreenshotsUtils.copyScreenshot(dataUrl);
+
+    this.close();
+  }
+}
+customElements.define("screenshots-ui", ScreenshotsUI);
diff --git a/browser/components/screenshots/fileHelpers.mjs b/browser/components/screenshots/fileHelpers.mjs
new file mode 100644
index 0000000000..172c8584f2
--- /dev/null
+++ b/browser/components/screenshots/fileHelpers.mjs
@@ -0,0 +1,278 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const { XPCOMUtils } = ChromeUtils.importESModule(
+  "resource://gre/modules/XPCOMUtils.sys.mjs"
+);
+
+const { AppConstants } = ChromeUtils.import(
+  "resource://gre/modules/AppConstants.jsm"
+);
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  FileUtils: "resource://gre/modules/FileUtils.sys.mjs",
+  ScreenshotsUtils: "resource:///modules/ScreenshotsUtils.sys.mjs",
+});
+
+XPCOMUtils.defineLazyModuleGetters(lazy, {
+  Downloads: "resource://gre/modules/Downloads.jsm",
+  DownloadPaths: "resource://gre/modules/DownloadPaths.jsm",
+  DownloadLastDir: "resource://gre/modules/DownloadLastDir.jsm",
+});
+
+/**
+ * Gets the filename automatically or by a file picker depending on "browser.download.useDownloadDir"
+ * @param filenameTitle The title of the current page
+ * @param browser The current browser
+ * @returns Path of the chosen filename
+ */
+export async function getFilename(filenameTitle, browser) {
+  if (filenameTitle === null) {
+    filenameTitle = await lazy.ScreenshotsUtils.getActor(browser).sendQuery(
+      "Screenshots:getDocumentTitle"
+    );
+  }
+  const date = new Date();
+  /* eslint-disable no-control-regex */
+  filenameTitle = filenameTitle
+    .replace(/[\\/]/g, "_")
+    .replace(/[\u200e\u200f\u202a-\u202e]/g, "")
+    .replace(/[\x00-\x1f\x7f-\x9f:*?|"<>;,+=\[\]]+/g, " ")
+    .replace(/^[\s\u180e.]+|[\s\u180e.]+$/g, "");
+  /* eslint-enable no-control-regex */
+  filenameTitle = filenameTitle.replace(/\s{1,4000}/g, " ");
+  const currentDateTime = new Date(
+    date.getTime() - date.getTimezoneOffset() * 60 * 1000
+  ).toISOString();
+  const filenameDate = currentDateTime.substring(0, 10);
+  const filenameTime = currentDateTime.substring(11, 19).replace(/:/g, "-");
+  let clipFilename = `Screenshot ${filenameDate} at ${filenameTime} ${filenameTitle}`;
+
+  // Crop the filename size at less than 246 bytes, so as to leave
+  // room for the extension and an ellipsis [...]. Note that JS
+  // strings are UTF16 but the filename will be converted to UTF8
+  // when saving which could take up more space, and we want a
+  // maximum of 255 bytes (not characters). Here, we iterate
+  // and crop at shorter and shorter points until we fit into
+  // 255 bytes.
+  let suffix = "";
+  for (let cropSize = 246; cropSize >= 0; cropSize -= 32) {
+    if (new Blob([clipFilename]).size > 246) {
+      clipFilename = clipFilename.substring(0, cropSize);
+      suffix = "[...]";
+    } else {
+      break;
+    }
+  }
+
+  clipFilename += suffix;
+
+  let extension = ".png";
+  let filename = clipFilename + extension;
+
+  let useDownloadDir = Services.prefs.getBoolPref(
+    "browser.download.useDownloadDir"
+  );
+  if (useDownloadDir) {
+    const downloadsDir = await lazy.Downloads.getPreferredDownloadsDirectory();
+    const downloadsDirExists = await IOUtils.exists(downloadsDir);
+    if (downloadsDirExists) {
+      // If filename is absolute, it will override the downloads directory and
+      // still be applied as expected.
+      filename = PathUtils.join(downloadsDir, filename);
+    }
+  } else {
+    let fileInfo = new FileInfo(filename);
+    let file;
+
+    let fpParams = {
+      fpTitleKey: "SaveImageTitle",
+      fileInfo,
+      contentType: "image/png",
+      saveAsType: 0,
+      file,
+    };
+
+    let accepted = await promiseTargetFile(fpParams, browser.ownerGlobal);
+    if (!accepted) {
+      return null;
+    }
+
+    filename = fpParams.file.path;
+  }
+
+  return filename;
+}
+
+// The below functions are a modified copy from toolkit/content/contentAreaUtils.js
+/**
+ * Structure for holding info about a URL and the target filename it should be
+ * saved to.
+ * @param aFileName The target filename
+ */
+class FileInfo {
+  constructor(aFileName) {
+    this.fileName = aFileName;
+    this.fileBaseName = aFileName.replace(".png", "");
+    this.fileExt = "png";
+  }
+}
+
+const ContentAreaUtils = {
+  get stringBundle() {
+    delete this.stringBundle;
+    return (this.stringBundle = Services.strings.createBundle(
+      "chrome://global/locale/contentAreaCommands.properties"
+    ));
+  },
+};
+
+function makeFilePicker() {
+  const fpContractID = "@mozilla.org/filepicker;1";
+  const fpIID = Ci.nsIFilePicker;
+  return Cc[fpContractID].createInstance(fpIID);
+}
+
+function getMIMEService() {
+  const mimeSvcContractID = "@mozilla.org/mime;1";
+  const mimeSvcIID = Ci.nsIMIMEService;
+  const mimeSvc = Cc[mimeSvcContractID].getService(mimeSvcIID);
+  return mimeSvc;
+}
+
+function getMIMEInfoForType(aMIMEType, aExtension) {
+  if (aMIMEType || aExtension) {
+    try {
+      return getMIMEService().getFromTypeAndExtension(aMIMEType, aExtension);
+    } catch (e) {}
+  }
+  return null;
+}
+
+// This is only used after the user has entered a filename.
+function validateFileName(aFileName) {
+  let processed = lazy.DownloadPaths.sanitize(aFileName) || "_";
+  if (AppConstants.platform == "android") {
+    // If a large part of the filename has been sanitized, then we
+    // will use a default filename instead
+    if (processed.replace(/_/g, "").length <= processed.length / 2) {
+      // We purposefully do not use a localized default filename,
+      // which we could have done using
+      // ContentAreaUtils.stringBundle.GetStringFromName("DefaultSaveFileName")
+      // since it may contain invalid characters.
+      let original = processed;
+      processed = "download";
+
+      // Preserve a suffix, if there is one
+      if (original.includes(".")) {
+        let suffix = original.split(".").pop();
+        if (suffix && !suffix.includes("_")) {
+          processed += "." + suffix;
+        }
+      }
+    }
+  }
+  return processed;
+}
+
+function appendFiltersForContentType(
+  aFilePicker,
+  aContentType,
+  aFileExtension
+) {
+  let mimeInfo = getMIMEInfoForType(aContentType, aFileExtension);
+  if (mimeInfo) {
+    let extString = "";
+    for (let extension of mimeInfo.getFileExtensions()) {
+      if (extString) {
+        extString += "; ";
+      } // If adding more than one extension,
+      // separate by semi-colon
+      extString += "*." + extension;
+    }
+
+    if (extString) {
+      aFilePicker.appendFilter(mimeInfo.description, extString);
+    }
+  }
+
+  // Always append the all files (*) filter
+  aFilePicker.appendFilters(Ci.nsIFilePicker.filterAll);
+}
+
+/**
+ * Given the Filepicker Parameters (aFpP), show the file picker dialog,
+ * prompting the user to confirm (or change) the fileName.
+ * @param aFpP
+ *        A structure (see definition in internalSave(...) method)
+ *        containing all the data used within this method.
+ * @param window
+ *        The window used for opening the file picker
+ * @return Promise
+ * @resolve a boolean. When true, it indicates that the file picker dialog
+ *          is accepted.
+ */
+function promiseTargetFile(aFpP, window) {
+  return (async function() {
+    let downloadLastDir = new lazy.DownloadLastDir(window);
+
+    // Default to the user's default downloads directory configured
+    // through download prefs.
+    let dirPath = await lazy.Downloads.getPreferredDownloadsDirectory();
+    let dirExists = await IOUtils.exists(dirPath);
+    let dir = new lazy.FileUtils.File(dirPath);
+
+    // We must prompt for the file name explicitly.
+    // If we must prompt because we were asked to...
+    let file = await new Promise(resolve => {
+      downloadLastDir.getFileAsync(null, function getFileAsyncCB(aFile) {
+        resolve(aFile);
+      });
+    });
+    if (file && (await IOUtils.exists(file.path))) {
+      dir = file;
+      dirExists = true;
+    }
+
+    if (!dirExists) {
+      // Default to desktop.
+      dir = Services.dirsvc.get("Desk", Ci.nsIFile);
+    }
+
+    let fp = makeFilePicker();
+    let titleKey = aFpP.fpTitleKey;
+    fp.init(
+      window,
+      ContentAreaUtils.stringBundle.GetStringFromName(titleKey),
+      Ci.nsIFilePicker.modeSave
+    );
+
+    fp.displayDirectory = dir;
+    fp.defaultExtension = aFpP.fileInfo.fileExt;
+    fp.defaultString = aFpP.fileInfo.fileName;
+    appendFiltersForContentType(fp, aFpP.contentType, aFpP.fileInfo.fileExt);
+
+    let result = await new Promise(resolve => {
+      fp.open(function(aResult) {
+        resolve(aResult);
+      });
+    });
+    if (result == Ci.nsIFilePicker.returnCancel || !fp.file) {
+      return false;
+    }
+
+    // Do not store the last save directory as a pref inside the private browsing mode
+    downloadLastDir.setFile(null, fp.file.parent);
+
+    fp.file.leafName = validateFileName(fp.file.leafName);
+
+    aFpP.saveAsType = fp.filterIndex;
+    aFpP.file = fp.file;
+    aFpP.fileURL = fp.fileURL;
+
+    return true;
+  })();
+}
diff --git a/browser/components/screenshots/jar.mn b/browser/components/screenshots/jar.mn
new file mode 100644
index 0000000000..0e3d87ba11
--- /dev/null
+++ b/browser/components/screenshots/jar.mn
@@ -0,0 +1,23 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+browser.jar:
+        content/browser/screenshots/cancel.svg                         (content/cancel.svg)
+        content/browser/screenshots/copied-notification.svg            (content/copied-notification.svg)
+        content/browser/screenshots/copy.svg                           (content/copy.svg)
+        content/browser/screenshots/download-white.svg                 (content/download-white.svg)
+        content/browser/screenshots/download.svg                       (content/download.svg)
+        content/browser/screenshots/fileHelpers.mjs
+        content/browser/screenshots/icon-welcome-face-without-eyes.svg (content/icon-welcome-face-without-eyes.svg)
+        content/browser/screenshots/menu-fullpage.svg                  (content/menu-fullpage.svg)
+        content/browser/screenshots/menu-visible.svg                   (content/menu-visible.svg)
+        content/browser/screenshots/screenshots.js                     (content/screenshots.js)
+        content/browser/screenshots/screenshots-buttons.js             (screenshots-buttons.js)
+        content/browser/screenshots/screenshots-buttons.css            (screenshots-buttons.css)
+        content/browser/screenshots/screenshots.css                    (content/screenshots.css)
+        content/browser/screenshots/screenshots.html                   (content/screenshots.html)
+        content/browser/screenshots/overlay/                           (overlay/**)
+
+
+% content screenshots-overlay %overlay/
diff --git a/browser/components/screenshots/moz.build b/browser/components/screenshots/moz.build
new file mode 100644
index 0000000000..73b03cd0bd
--- /dev/null
+++ b/browser/components/screenshots/moz.build
@@ -0,0 +1,19 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+EXTRA_JS_MODULES += [
+    "ScreenshotsOverlayChild.sys.mjs",
+    "ScreenshotsUtils.sys.mjs",
+]
+
+JAR_MANIFESTS += ["jar.mn"]
+
+with Files("**"):
+    BUG_COMPONENT = ("Firefox", "Screenshots")
+
+BROWSER_CHROME_MANIFESTS += [
+    "tests/browser/browser.ini",
+]
diff --git a/browser/components/screenshots/overlay/overlay.css b/browser/components/screenshots/overlay/overlay.css
new file mode 100644
index 0000000000..0c03e18ce7
--- /dev/null
+++ b/browser/components/screenshots/overlay/overlay.css
@@ -0,0 +1,435 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:-moz-native-anonymous #screenshots-component {
+  width: 100%;
+  height: 100%;
+  overflow: clip;
+  user-select: none;
+  pointer-events: auto;
+  touch-action: none;
+}
+
+/**
+ * Overlay content is position: fixed as we need to allow for the possiblily
+ * of the document scrolling or changing size while the overlay is visible
+ */
+:-moz-native-anonymous #screenshots-overlay-container {
+  /*
+  Content CSS applying to the html element can impact the overlay.
+  To avoid that, possible cases have been set to initial.
+  */
+  text-transform: initial;
+  text-indent: initial;
+  letter-spacing: initial;
+  word-spacing: initial;
+  color: initial;
+  direction: initial;
+  writing-mode: initial;
+  z-index: 1;
+  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;
+}
+
+:-moz-native-anonymous #screenshots-overlay-container[dragging] {
+  cursor: grabbing;
+}
+
+:-moz-native-anonymous #screenshots-cancel-button {
+  background-color: transparent;
+  width: fit-content;
+  cursor: pointer;
+  outline: none;
+  border-radius: 3px;
+  border: 1px #9b9b9b solid;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
+  font-size: 16px;
+  margin-top: 40px;
+  padding: 10px 25px;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  :-moz-native-anonymous #screenshots-cancel-button {
+    border-color: ButtonBorder;
+  }
+}
+
+:-moz-native-anonymous .screenshots-button {
+  cursor: pointer;
+  appearance: none;
+  pointer-events: auto;
+  background-color: #f9f9fa;
+  color: #38383d;
+  border: 0;
+  border-radius: 3px;
+  font-size: 16px;
+  font-weight: 400;
+  height: 40px;
+  min-width: 40px;
+  outline: none;
+  padding: 0 10px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: background 150ms cubic-bezier(0.07, 0.95, 0, 1), border 150ms cubic-bezier(0.07, 0.95, 0, 1);
+  user-select: none;
+  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,
+:-moz-native-anonymous #download:hover {
+  background-color: #52525e;
+  color: #fff;
+}
+
+:-moz-native-anonymous .screenshots-button:hover > img {
+  fill: #fff;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  :-moz-native-anonymous .screenshots-button {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  :-moz-native-anonymous .screenshots-button:hover {
+    background-color: ButtonText;
+    color: ButtonFace;
+  }
+}
+
+:-moz-native-anonymous button img {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+:-moz-native-anonymous #buttons {
+  position: absolute;
+  margin: 10px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:-moz-native-anonymous #cancel {
+  width: 40px;
+}
+
+:-moz-native-anonymous #cancel > img {
+  color: #38383d;
+  content: url('chrome://browser/content/screenshots/cancel.svg');
+  width: 20px;
+  height: 20px;
+  padding: 10px 0;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  :-moz-native-anonymous #cancel > img {
+    color: ButtonText;
+  }
+
+  :-moz-native-anonymous #cancel:hover > img {
+    color: ButtonFace;
+  }
+}
+
+:-moz-native-anonymous #copy > img {
+  color: #38383d;
+  content: url('chrome://browser/content/screenshots/copy.svg');
+  width: 16px;
+  height: 16px;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  :-moz-native-anonymous #copy > img {
+    color: ButtonText;
+  }
+
+  :-moz-native-anonymous #copy:hover > img {
+    color: ButtonFace;
+  }
+}
+
+:-moz-native-anonymous #download {
+  background-color: #0a84ff;
+  color: #fff;
+}
+
+:-moz-native-anonymous #download > img {
+  content: url('chrome://browser/content/screenshots/download.svg');
+  width: 16px;
+  height: 16px;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  :-moz-native-anonymous #download {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  :-moz-native-anonymous #download:hover {
+    background-color: ButtonText;
+    color: ButtonFace;
+  }
+}
+
+:-moz-native-anonymous .fixed-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: center;
+  inset-inline-start: 0;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+:-moz-native-anonymous .face-container {
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+
+:-moz-native-anonymous .face {
+  width: 62px;
+  height: 62px;
+  display: block;
+  background-image: url("chrome://browser/content/screenshots/icon-welcome-face-without-eyes.svg");
+}
+
+:-moz-native-anonymous .eye {
+  background-color: #fff;
+  width: 10px;
+  height: 14px;
+  position: absolute;
+  border-radius: 100%;
+  overflow: hidden;
+  inset-inline-start: 16px;
+  top: 19px;
+}
+
+:-moz-native-anonymous .eyeball {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background-color: #000;
+  border-radius: 50%;
+  inset-inline-start: 2px;
+  top: 4px;
+  z-index: 10;
+}
+
+:-moz-native-anonymous .left {
+  margin-inline-start: 0;
+}
+
+:-moz-native-anonymous .right {
+  margin-inline-start: 20px;
+}
+
+:-moz-native-anonymous .preview-instructions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: pulse 125mm cubic-bezier(0.07, 0.95, 0, 1);
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
+  font-size: 24px;
+  line-height: 32px;
+  text-align: center;
+  padding-top: 20px;
+  width: 400px;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  :-moz-native-anonymous .preview-instructions {
+    color: CanvasText;
+  }
+}
+
+:-moz-native-anonymous #hover-highlight {
+  animation: fade-in 125ms forwards cubic-bezier(0.07, 0.95, 0, 1);
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 1px;
+  pointer-events: none;
+  position: absolute;
+  z-index: 11;
+}
+
+:-moz-native-anonymous #hover-highlight::before {
+  border: 2px dashed rgba(255, 255, 255, 0.4);
+  bottom: 0;
+  content: "";
+  inset-inline-start: 0;
+  position: absolute;
+  inset-inline-end: 0;
+  top: 0;
+}
+
+:-moz-native-anonymous .bghighlight {
+  background-color: rgba(0, 0, 0, 0.7);
+  position: absolute;
+  overflow: clip;
+}
+
+:-moz-native-anonymous .highlight {
+  border-radius: 1px;
+  border: 2px dashed rgba(255, 255, 255, 0.8);
+  box-sizing: border-box;
+  cursor: move;
+  position: absolute;
+  pointer-events: auto;
+  z-index: 2;
+}
+
+:-moz-native-anonymous .mover-target {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 5;
+  pointer-events: auto;
+}
+
+:-moz-native-anonymous .mover-target.direction-topLeft {
+  cursor: nwse-resize;
+  height: 60px;
+  left: -30px;
+  top: -30px;
+  width: 60px;
+}
+
+:-moz-native-anonymous .mover-target.direction-top {
+  cursor: ns-resize;
+  height: 60px;
+  inset-inline-start: 0;
+  top: -30px;
+  width: 100%;
+  z-index: 4;
+}
+
+:-moz-native-anonymous .mover-target.direction-topRight {
+  cursor: nesw-resize;
+  height: 60px;
+  right: -30px;
+  top: -30px;
+  width: 60px;
+}
+
+:-moz-native-anonymous .mover-target.direction-left {
+  cursor: ew-resize;
+  height: 100%;
+  left: -30px;
+  top: 0;
+  width: 60px;
+  z-index: 4;
+}
+
+:-moz-native-anonymous .mover-target.direction-right {
+  cursor: ew-resize;
+  height: 100%;
+  right: -30px;
+  top: 0;
+  width: 60px;
+  z-index: 4;
+}
+
+:-moz-native-anonymous .mover-target.direction-bottomLeft {
+  bottom: -30px;
+  cursor: nesw-resize;
+  height: 60px;
+  left: -30px;
+  width: 60px;
+}
+
+:-moz-native-anonymous .mover-target.direction-bottom {
+  bottom: -30px;
+  cursor: ns-resize;
+  height: 60px;
+  inset-inline-start: 0;
+  width: 100%;
+  z-index: 4;
+}
+
+:-moz-native-anonymous .mover-target.direction-bottomRight {
+  bottom: -30px;
+  cursor: nwse-resize;
+  height: 60px;
+  right: -30px;
+  width: 60px;
+}
+
+:-moz-native-anonymous .mover-target:hover .mover {
+  transform: scale(1.05);
+}
+
+:-moz-native-anonymous .mover {
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+  height: 16px;
+  opacity: 1;
+  position: relative;
+  transition: transform 125ms cubic-bezier(0.07, 0.95, 0, 1);
+  width: 16px;
+}
+
+:-moz-native-anonymous .small-selection .mover {
+  height: 10px;
+  width: 10px;
+}
+
+:-moz-native-anonymous .direction-topLeft .mover,
+:-moz-native-anonymous .direction-left .mover,
+:-moz-native-anonymous .direction-bottomLeft .mover {
+  left: -1px;
+}
+
+:-moz-native-anonymous .direction-topLeft .mover,
+:-moz-native-anonymous .direction-top .mover,
+:-moz-native-anonymous .direction-topRight .mover {
+  top: -1px;
+}
+
+:-moz-native-anonymous .direction-topRight .mover,
+:-moz-native-anonymous .direction-right .mover,
+:-moz-native-anonymous .direction-bottomRight .mover {
+  right: -1px;
+}
+
+:-moz-native-anonymous .direction-bottomRight .mover,
+:-moz-native-anonymous .direction-bottom .mover,
+:-moz-native-anonymous .direction-bottomLeft .mover {
+  bottom: -1px;
+}
diff --git a/browser/components/screenshots/screenshots-buttons.css b/browser/components/screenshots/screenshots-buttons.css
new file mode 100644
index 0000000000..fcf6519e35
--- /dev/null
+++ b/browser/components/screenshots/screenshots-buttons.css
@@ -0,0 +1,31 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.all-buttons-container button {
+  background-position: center top;
+  background-repeat: no-repeat;
+  background-size: 46px 46px;
+  border: 1px solid transparent;
+  height: 100%;
+  min-width: 90px;
+  padding: 46px 5px 5px;
+}
+
+.all-buttons-container button:hover {
+  background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent));
+}
+
+.all-buttons-container .full-page {
+  background-image: url("chrome://browser/content/screenshots/menu-fullpage.svg");
+}
+
+.all-buttons-container .visible-page {
+  background-image: url("chrome://browser/content/screenshots/menu-visible.svg");
+}
+
+.full-page, .visible-page {
+  -moz-context-properties: fill, stroke;
+  fill: buttonText;
+  stroke: #00fdff;
+}
diff --git a/browser/components/screenshots/screenshots-buttons.js b/browser/components/screenshots/screenshots-buttons.js
new file mode 100644
index 0000000000..6ea9c2eee3
--- /dev/null
+++ b/browser/components/screenshots/screenshots-buttons.js
@@ -0,0 +1,55 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* eslint-env mozilla/browser-window */
+
+"use strict";
+
+// This is loaded into chrome windows with the subscript loader. Wrap in
+// a block to prevent accidentally leaking globals onto `window`.
+{
+  class ScreenshotsButtons extends MozXULElement {
+    static get markup() {
+      return `
+      <html:link rel="stylesheet" href="chrome://browser/content/screenshots/screenshots-buttons.css"/>
+      <html:div id="screenshots-buttons" class="all-buttons-container">
+        <html:button class="visible-page" data-l10n-id="screenshots-save-visible-button"></html:button>
+        <html:button class="full-page" data-l10n-id="screenshots-save-page-button"></html:button>
+      </html:div>
+      `;
+    }
+
+    connectedCallback() {
+      const shadowRoot = this.attachShadow({ mode: "open" });
+      document.l10n.connectRoot(shadowRoot);
+
+      let fragment = MozXULElement.parseXULToFragment(this.constructor.markup);
+      this.shadowRoot.append(fragment);
+
+      let button1 = shadowRoot.querySelector(".visible-page");
+      button1.onclick = function() {
+        Services.obs.notifyObservers(
+          gBrowser.ownerGlobal,
+          "screenshots-take-screenshot",
+          "visible"
+        );
+      };
+
+      let button2 = shadowRoot.querySelector(".full-page");
+      button2.onclick = function() {
+        Services.obs.notifyObservers(
+          gBrowser.ownerGlobal,
+          "screenshots-take-screenshot",
+          "full-page"
+        );
+      };
+    }
+
+    disconnectedCallback() {
+      document.l10n.disconnectRoot(this.shadowRoot);
+    }
+  }
+  customElements.define("screenshots-buttons", ScreenshotsButtons, {
+    extends: "toolbar",
+  });
+}
diff --git a/browser/components/screenshots/tests/browser/browser.ini b/browser/components/screenshots/tests/browser/browser.ini
new file mode 100644
index 0000000000..47cafe5bb2
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/browser.ini
@@ -0,0 +1,25 @@
+[DEFAULT]
+support-files =
+  head.js
+  test-page.html
+  short-test-page.html
+
+prefs =
+  extensions.screenshots.disabled=false
+  screenshots.browser.component.enabled=true
+
+[browser_screenshots_drag_scroll_test.js]
+[browser_screenshots_drag_test.js]
+[browser_screenshots_focus_test.js]
+[browser_screenshots_overlay_panel_sync.js]
+[browser_screenshots_page_unload.js]
+[browser_screenshots_short_page_test.js]
+[browser_screenshots_test_downloads.js]
+[browser_screenshots_test_escape.js]
+[browser_screenshots_test_full_page.js]
+skip-if = (!debug && os == 'win' && os_version == '6.1') # Bug 1746281
+[browser_screenshots_test_page_crash.js]
+skip-if = !crashreporter
+[browser_screenshots_test_toggle_pref.js]
+[browser_screenshots_test_toolbar_button.js]
+[browser_screenshots_test_visible.js]
diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_drag_scroll_test.js b/browser/components/screenshots/tests/browser/browser_screenshots_drag_scroll_test.js
new file mode 100644
index 0000000000..77d361b26b
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/browser_screenshots_drag_scroll_test.js
@@ -0,0 +1,317 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test that screenshots overlay covers the entire page
+ */
+add_task(async function test_overlayCoversEntirePage() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+
+      helper.triggerUIFromToolbar();
+
+      await helper.waitForOverlay();
+
+      await helper.dragOverlay(10, 10, 500, 500);
+
+      let dimensions = await helper.getSelectionLayerDimensions();
+      info(JSON.stringify(dimensions));
+      is(
+        dimensions.scrollWidth,
+        4000,
+        "The overlay spans the entire width of the page"
+      );
+
+      is(
+        dimensions.scrollHeight,
+        4000,
+        "The overlay spans the entire height of the page"
+      );
+    }
+  );
+});
+
+/**
+ * Test dragging screenshots box off top left of screen
+ */
+add_task(async function test_draggingBoxOffTopLeft() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+
+      helper.triggerUIFromToolbar();
+
+      await helper.waitForOverlay();
+
+      let startX = 10;
+      let startY = 10;
+      let endX = 500;
+      let endY = 500;
+      await helper.dragOverlay(startX, startY, endX, endY);
+
+      mouse.down(
+        startX + Math.floor((endX - startX) / 2),
+        startY + Math.floor((endY - startY) / 2)
+      );
+
+      await helper.waitForStateChange("resizing");
+      let state = await helper.getOverlayState();
+      is(state, "resizing", "The overlay is in the resizing state");
+
+      mouse.move(10, 10);
+
+      // We moved the box to the edge of the screen so we need to wait until the box size is updated
+      await helper.waitForSelectionBoxSizeChange(490);
+
+      let dimensions = await helper.getSelectionBoxDimensions();
+
+      is(dimensions.x1, 0, "The box x1 position is now 0");
+      is(dimensions.y1, 0, "The box y1 position is now 0");
+      is(dimensions.width, 255, "The box width is now 255");
+      is(dimensions.height, 255, "The box height is now 255");
+
+      mouse.move(
+        startX + Math.floor((endX - startX) / 2),
+        startY + Math.floor((endY - startY) / 2)
+      );
+
+      mouse.up(
+        startX + Math.floor((endX - startX) / 2),
+        startY + Math.floor((endY - startY) / 2)
+      );
+
+      // We moved the box off the edge of the screen so we need to wait until the box size is updated
+      await helper.waitForSelectionBoxSizeChange(255);
+
+      dimensions = await helper.getSelectionBoxDimensions();
+
+      is(dimensions.x1, 10, "The box x1 position is now 10 again");
+      is(dimensions.y1, 10, "The box y1 position is now 10 again");
+      is(dimensions.width, 490, "The box width is now 490 again");
+      is(dimensions.height, 490, "The box height is now 490 again");
+    }
+  );
+});
+
+/**
+ * Test dragging screenshots box off bottom right of screen
+ */
+add_task(async function test_draggingBoxOffBottomRight() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+
+      let contentInfo = await helper.getContentDimensions();
+      info(JSON.stringify(contentInfo));
+      ok(contentInfo, "Got dimensions back from the content");
+
+      await helper.scrollContentWindow(4000, 4000);
+
+      helper.triggerUIFromToolbar();
+
+      await helper.waitForOverlay();
+
+      let startX = contentInfo.scrollWidth - 500;
+      let startY = contentInfo.scrollHeight - 500;
+      let endX = contentInfo.scrollWidth - 20;
+      let endY = contentInfo.scrollHeight - 20;
+
+      await helper.dragOverlay(startX, startY, endX, endY);
+
+      // move box off the bottom right of the screen
+      mouse.down(
+        startX + Math.floor((endX - startX) / 2),
+        startY + Math.floor((endY - startY) / 2)
+      );
+      mouse.move(
+        startX + 50 + Math.floor((endX - startX) / 2),
+        startY + 50 + Math.floor((endY - startY) / 2)
+      );
+
+      await helper.waitForStateChange("resizing");
+      let state = await helper.getOverlayState();
+      is(state, "resizing", "The overlay is in the resizing state");
+
+      mouse.move(endX, endY);
+
+      // We moved the box to the edge of the screen so we need to wait until the box size is updated
+      await helper.waitForSelectionBoxSizeChange(480);
+
+      let dimensions = await helper.getSelectionBoxDimensions();
+
+      is(dimensions.x1, startX + 240, "The box x1 position is now 3748");
+      is(dimensions.y1, startY + 240, "The box y1 position is now 3756");
+      is(dimensions.width, 252, "The box width is now 252");
+      is(dimensions.height, 244, "The box height is now 244");
+
+      mouse.move(
+        startX + Math.floor((endX - startX) / 2),
+        startY + Math.floor((endY - startY) / 2)
+      );
+
+      mouse.up(
+        startX + Math.floor((endX - startX) / 2),
+        startY + Math.floor((endY - startY) / 2)
+      );
+
+      // We moved the box off the edge of the screen so we need to wait until the box size is updated
+      await helper.waitForSelectionBoxSizeChange(252);
+
+      dimensions = await helper.getSelectionBoxDimensions();
+
+      is(dimensions.x1, startX, "The box x1 position is now 3508 again");
+      is(dimensions.y1, startY, "The box y1 position is now 3516 again");
+      is(dimensions.width, 480, "The box width is now 480 again");
+      is(dimensions.height, 480, "The box height is now 480 again");
+    }
+  );
+});
+
+/**
+ * test scrolling while screenshots is open
+ */
+add_task(async function test_scrollingScreenshotsOpen() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+
+      let contentInfo = await helper.getContentDimensions();
+      info(JSON.stringify(contentInfo));
+      ok(contentInfo, "Got dimensions back from the content");
+
+      helper.triggerUIFromToolbar();
+
+      await helper.waitForOverlay();
+
+      let startX = 10;
+      let startY = 10;
+      let endX = 100;
+      let endY = 100;
+
+      await helper.dragOverlay(startX, startY, endX, endY);
+
+      let scrollX = 1000;
+      let scrollY = 1000;
+
+      await helper.scrollContentWindow(scrollX, scrollY);
+
+      let dimensions = await helper.getSelectionBoxDimensions();
+
+      is(dimensions.x1, startX, "The box x1 position is 10");
+      is(dimensions.y1, startY, "The box y1 position is 10");
+      is(dimensions.width, endX - startX, "The box width is now 90");
+      is(dimensions.height, endY - startY, "The box height is now 90");
+
+      // reset screenshots box
+      mouse.click(scrollX + startX, scrollY + endY);
+      await helper.waitForStateChange("crosshairs");
+
+      await helper.dragOverlay(
+        scrollX + startX,
+        scrollY + startY,
+        scrollX + endX,
+        scrollY + endY
+      );
+
+      await helper.scrollContentWindow(0, 0);
+
+      dimensions = await helper.getSelectionBoxDimensions();
+
+      is(dimensions.x1, scrollX + startX, "The box x1 position is 1010");
+      is(dimensions.y1, scrollY + startY, "The box y1 position is 1010");
+      is(dimensions.width, endX - startX, "The box width is now 90");
+      is(dimensions.height, endY - startY, "The box height is now 90");
+
+      // reset screenshots box
+      mouse.click(10, 10);
+      await helper.waitForStateChange("crosshairs");
+
+      await helper.dragOverlay(
+        startX,
+        startY,
+        contentInfo.clientWidth - 10,
+        contentInfo.clientHeight - 10
+      );
+
+      await helper.scrollContentWindow(
+        contentInfo.clientWidth - 20,
+        contentInfo.clientHeight - 20
+      );
+
+      mouse.down(contentInfo.clientWidth - 10, contentInfo.clientHeight - 10);
+
+      await helper.waitForStateChange("resizing");
+
+      mouse.move(
+        contentInfo.clientWidth * 2 - 30,
+        contentInfo.clientHeight * 2 - 30
+      );
+
+      mouse.up(
+        contentInfo.clientWidth * 2 - 30,
+        contentInfo.clientHeight * 2 - 30
+      );
+
+      await helper.waitForStateChange("selected");
+
+      dimensions = await helper.getSelectionLayerDimensions();
+      info(JSON.stringify(dimensions));
+      is(dimensions.boxLeft, startX, "The box left is 10");
+      is(dimensions.boxTop, startY, "The box top is 10");
+      is(
+        dimensions.boxRight,
+        contentInfo.clientWidth * 2 - 30,
+        "The box right is 2 x clientWidth - 30"
+      );
+      is(
+        dimensions.boxBottom,
+        contentInfo.clientHeight * 2 - 30,
+        "The box right is 2 x clientHeight - 30"
+      );
+      is(
+        dimensions.boxWidth,
+        contentInfo.clientWidth * 2 - 40,
+        "The box right is 2 x clientWidth - 40"
+      );
+      is(
+        dimensions.boxHeight,
+        contentInfo.clientHeight * 2 - 40,
+        "The box right is 2 x clientHeight - 40"
+      );
+      is(
+        dimensions.scrollWidth,
+        4000,
+        "The overlay spans the entire width of the page"
+      );
+      is(
+        dimensions.scrollHeight,
+        4000,
+        "The overlay spans the entire height of the page"
+      );
+    }
+  );
+});
diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_drag_test.js b/browser/components/screenshots/tests/browser/browser_screenshots_drag_test.js
new file mode 100644
index 0000000000..aba38dccc0
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/browser_screenshots_drag_test.js
@@ -0,0 +1,475 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * This function drags to a 490x490 area and copies to the clipboard
+ */
+add_task(async function() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+
+      helper.triggerUIFromToolbar();
+
+      await helper.waitForOverlay();
+
+      await helper.dragOverlay(10, 10, 500, 500);
+
+      let clipboardChanged = helper.waitForRawClipboardChange();
+
+      helper.clickCopyButton();
+
+      info("Waiting for clipboard change");
+      await clipboardChanged;
+
+      let result = await helper.getImageSizeAndColorFromClipboard();
+
+      info("result: " + JSON.stringify(result, null, 2));
+
+      let expected = Math.floor(
+        490 * (await getContentDevicePixelRatio(browser))
+      );
+
+      Assert.equal(
+        result.width,
+        expected,
+        `The copied image from the overlay is ${expected}px in width`
+      );
+      Assert.equal(
+        result.height,
+        expected,
+        `The copied image from the overlay is ${expected}px in height`
+      );
+    }
+  );
+});
+
+/**
+ * This function drags a 1.5 zoomed browser to a 490x490 area and copies to the clipboard
+ */
+add_task(async function() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      const zoom = 1.5;
+      let helper = new ScreenshotsHelper(browser);
+      helper.zoomBrowser(zoom);
+
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+
+      helper.triggerUIFromToolbar();
+
+      await helper.waitForOverlay();
+
+      await helper.dragOverlay(10, 10, 500, 500);
+
+      let clipboardChanged = helper.waitForRawClipboardChange();
+
+      helper.clickCopyButton();
+
+      info("Waiting for clipboard change");
+      await clipboardChanged;
+
+      let result = await helper.getImageSizeAndColorFromClipboard();
+      result.zoom = zoom;
+      result.devicePixelRatio = window.devicePixelRatio;
+      result.contentDevicePixelRatio = await getContentDevicePixelRatio(
+        browser
+      );
+
+      info("result: " + JSON.stringify(result, null, 2));
+
+      let expected = Math.floor(
+        490 * (await getContentDevicePixelRatio(browser))
+      );
+
+      Assert.equal(
+        result.width,
+        expected,
+        `The copied image from the overlay is ${expected}px in width`
+      );
+      Assert.equal(
+        result.height,
+        expected,
+        `The copied image from the overlay is ${expected}px in height`
+      );
+    }
+  );
+});
+
+/**
+ * This function drags an area and clicks elsewhere
+ * on the overlay to go back to the crosshairs state
+ */
+add_task(async function() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+
+      helper.triggerUIFromToolbar();
+
+      await helper.waitForOverlay();
+
+      await helper.dragOverlay(10, 10, 100, 100);
+
+      // click outside overlay
+      mouse.click(200, 200);
+
+      await helper.waitForStateChange("crosshairs");
+      let state = await helper.getOverlayState();
+      Assert.equal(state, "crosshairs", "The state is back to crosshairs");
+    }
+  );
+});
+
+/**
+ * This function drags an area and clicks the
+ * cancel button to cancel the overlay
+ */
+add_task(async function() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+
+      helper.triggerUIFromToolbar();
+
+      await helper.waitForOverlay();
+
+      await helper.dragOverlay(10, 10, 300, 300);
+
+      helper.clickCancelButton();
+
+      await helper.waitForOverlayClosed();
+
+      ok(!(await helper.isOverlayInitialized()), "Overlay is not initialized");
+    }
+  );
+});
+
+/**
+ * This function drags a 490x490 area and moves it along the edges
+ * and back to the center to confirm that the original size is preserved
+ */
+add_task(async function() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+
+      helper.triggerUIFromToolbar();
+
+      await helper.waitForOverlay();
+
+      await helper.dragOverlay(10, 10, 500, 500);
+
+      let startX = 10;
+      let startY = 10;
+      let endX = 500;
+      let endY = 500;
+
+      mouse.down(
+        Math.floor((endX - startX) / 2),
+        Math.floor((endY - startY) / 2)
+      );
+
+      await helper.waitForStateChange("resizing");
+      let state = await helper.getOverlayState();
+      Assert.equal(state, "resizing", "The overlay is in the resizing state");
+
+      mouse.move(10, 10);
+
+      mouse.move(contentInfo.clientWidth - 10, contentInfo.clientHeight - 10);
+
+      mouse.up(
+        Math.floor((endX - startX) / 2),
+        Math.floor((endY - startY) / 2)
+      );
+
+      let clipboardChanged = helper.waitForRawClipboardChange();
+
+      helper.clickCopyButton();
+
+      info("Waiting for clipboard change");
+      await clipboardChanged;
+
+      let result = await helper.getImageSizeAndColorFromClipboard();
+
+      info("result: " + JSON.stringify(result, null, 2));
+
+      let expected = Math.floor(
+        490 * (await getContentDevicePixelRatio(browser))
+      );
+
+      Assert.equal(
+        result.width,
+        expected,
+        `The copied image from the overlay is ${expected}px in width`
+      );
+      Assert.equal(
+        result.height,
+        expected,
+        `The copied image from the overlay is ${expected}px in height`
+      );
+    }
+  );
+});
+
+/**
+ * This function drags a 490x490 area and resizes it to a 300x300 area
+ *  with the 4 sides of the box
+ */
+add_task(async function() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+
+      helper.triggerUIFromToolbar();
+
+      await helper.waitForOverlay();
+
+      await helper.dragOverlay(10, 10, 500, 500);
+
+      let startX = 10;
+      let startY = 10;
+      let endX = 500;
+      let endY = 500;
+
+      let x = Math.floor((endX - startX) / 2);
+
+      // drag top
+      mouse.down(x, 10);
+
+      await helper.waitForStateChange("resizing");
+      let state = await helper.getOverlayState();
+      Assert.equal(state, "resizing", "The overlay is in the resizing state");
+
+      mouse.move(x, 100);
+      mouse.up(x, 100);
+
+      await helper.waitForStateChange("selected");
+      state = await helper.getOverlayState();
+      Assert.equal(state, "selected", "The overlay is in the selected state");
+
+      // drag bottom
+      mouse.down(x, 500);
+
+      await helper.waitForStateChange("resizing");
+      state = await helper.getOverlayState();
+      Assert.equal(state, "resizing", "The overlay is in the resizing state");
+
+      mouse.move(x, 400);
+      mouse.up(x, 400);
+
+      await helper.waitForStateChange("selected");
+      state = await helper.getOverlayState();
+      Assert.equal(state, "selected", "The overlay is in the selected state");
+
+      // drag right
+      let y = Math.floor((endY - startY) / 2);
+      mouse.down(500, y);
+
+      await helper.waitForStateChange("resizing");
+      state = await helper.getOverlayState();
+      Assert.equal(state, "resizing", "The overlay is in the resizing state");
+
+      mouse.move(400, y);
+      mouse.up(400, y);
+
+      await helper.waitForStateChange("selected");
+      state = await helper.getOverlayState();
+      Assert.equal(state, "selected", "The overlay is in the selected state");
+
+      // drag left
+      mouse.down(10, y);
+
+      await helper.waitForStateChange("resizing");
+      state = await helper.getOverlayState();
+      Assert.equal(state, "resizing", "The overlay is in the resizing state");
+
+      mouse.move(100, y);
+      mouse.up(100, y);
+
+      await helper.waitForStateChange("selected");
+      state = await helper.getOverlayState();
+      Assert.equal(state, "selected", "The overlay is in the selected state");
+
+      let clipboardChanged = helper.waitForRawClipboardChange();
+
+      helper.endX = 400;
+      helper.endY = 400;
+
+      helper.clickCopyButton();
+
+      info("Waiting for clipboard change");
+      await clipboardChanged;
+
+      let result = await helper.getImageSizeAndColorFromClipboard();
+
+      info("result: " + JSON.stringify(result, null, 2));
+
+      let expected = Math.floor(
+        300 * (await getContentDevicePixelRatio(browser))
+      );
+
+      Assert.equal(
+        result.width,
+        expected,
+        `The copied image from the overlay is ${expected}px in width`
+      );
+      Assert.equal(
+        result.height,
+        expected,
+        `The copied image from the overlay is ${expected}px in height`
+      );
+    }
+  );
+});
+
+/**
+ * This function drags a 490x490 area and resizes it to a 300x300 area
+ *  with the 4 corners of the box
+ */
+add_task(async function() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+
+      helper.triggerUIFromToolbar();
+
+      await helper.waitForOverlay();
+
+      await helper.dragOverlay(10, 10, 500, 500);
+
+      // drag topright
+      mouse.down(500, 10);
+
+      await helper.waitForStateChange("resizing");
+      let state = await helper.getOverlayState();
+      Assert.equal(state, "resizing", "The overlay is in the resizing state");
+
+      mouse.move(450, 50);
+      mouse.up(450, 50);
+
+      await helper.waitForStateChange("selected");
+      state = await helper.getOverlayState();
+      Assert.equal(state, "selected", "The overlay is in the selected state");
+
+      // drag bottomright
+      mouse.down(450, 500);
+
+      await helper.waitForStateChange("resizing");
+      state = await helper.getOverlayState();
+      Assert.equal(state, "resizing", "The overlay is in the resizing state");
+
+      mouse.move(400, 450);
+      mouse.up(400, 450);
+
+      await helper.waitForStateChange("selected");
+      state = await helper.getOverlayState();
+      Assert.equal(state, "selected", "The overlay is in the selected state");
+
+      // drag bottomleft
+      mouse.down(10, 450);
+
+      await helper.waitForStateChange("resizing");
+      state = await helper.getOverlayState();
+      Assert.equal(state, "resizing", "The overlay is in the resizing state");
+
+      mouse.move(50, 400);
+      mouse.up(50, 400);
+
+      await helper.waitForStateChange("selected");
+      state = await helper.getOverlayState();
+      Assert.equal(state, "selected", "The overlay is in the selected state");
+
+      // drag topleft
+      mouse.down(50, 50);
+
+      await helper.waitForStateChange("resizing");
+      state = await helper.getOverlayState();
+      Assert.equal(state, "resizing", "The overlay is in the resizing state");
+
+      mouse.move(100, 100);
+      mouse.up(100, 100);
+
+      await helper.waitForStateChange("selected");
+      state = await helper.getOverlayState();
+      Assert.equal(state, "selected", "The overlay is in the selected state");
+
+      let clipboardChanged = helper.waitForRawClipboardChange();
+
+      helper.endX = 400;
+      helper.endY = 400;
+
+      helper.clickCopyButton();
+
+      info("Waiting for clipboard change");
+      await clipboardChanged;
+
+      let result = await helper.getImageSizeAndColorFromClipboard();
+
+      info("result: " + JSON.stringify(result, null, 2));
+
+      let expected = Math.floor(
+        300 * (await getContentDevicePixelRatio(browser))
+      );
+
+      Assert.equal(
+        result.width,
+        expected,
+        `The copied image from the overlay is ${expected}px in width`
+      );
+      Assert.equal(
+        result.height,
+        expected,
+        `The copied image from the overlay is ${expected}px in height`
+      );
+    }
+  );
+});
diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_focus_test.js b/browser/components/screenshots/tests/browser/browser_screenshots_focus_test.js
new file mode 100644
index 0000000000..d992327128
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/browser_screenshots_focus_test.js
@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(async function testPanelFocused() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+
+      helper.triggerUIFromToolbar();
+
+      await helper.waitForOverlay();
+
+      EventUtils.synthesizeKey("KEY_Tab");
+
+      let screenshotsButtons = gBrowser.selectedBrowser.ownerDocument
+        .querySelector("#screenshotsPagePanel")
+        .querySelector("screenshots-buttons").shadowRoot;
+
+      let focusedElement = screenshotsButtons.querySelector(".visible-page");
+
+      is(
+        focusedElement,
+        screenshotsButtons.activeElement,
+        "Visible button is focused"
+      );
+    }
+  );
+});
diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_overlay_panel_sync.js b/browser/components/screenshots/tests/browser/browser_screenshots_overlay_panel_sync.js
new file mode 100644
index 0000000000..b66a4d2b57
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/browser_screenshots_overlay_panel_sync.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+async function waitOnTabSwitch() {
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(r => setTimeout(r, 300));
+}
+
+add_task(async function test_overlay_and_panel_state() {
+  let tab1 = await BrowserTestUtils.openNewForegroundTab(gBrowser, TEST_PAGE);
+
+  let screenshotsTab = await BrowserTestUtils.openNewForegroundTab(
+    gBrowser,
+    TEST_PAGE
+  );
+  let browser = screenshotsTab.linkedBrowser;
+
+  let helper = new ScreenshotsHelper(browser);
+
+  helper.triggerUIFromToolbar();
+
+  await helper.waitForOverlay();
+
+  helper.assertPanelVisible();
+
+  await helper.dragOverlay(10, 10, 500, 500);
+
+  await helper.waitForStateChange("selected");
+  let state = await helper.getOverlayState();
+  is(state, "selected", "The overlay is in the selected state");
+
+  helper.assertPanelNotVisible();
+
+  mouse.click(600, 600);
+
+  await helper.waitForStateChange("crosshairs");
+  state = await helper.getOverlayState();
+  is(state, "crosshairs", "The overlay is in the crosshairs state");
+
+  await helper.waitForOverlay();
+
+  helper.assertPanelVisible();
+
+  await BrowserTestUtils.switchTab(gBrowser, tab1);
+  await BrowserTestUtils.switchTab(gBrowser, screenshotsTab);
+
+  await helper.waitForOverlayClosed();
+
+  Assert.ok(!(await helper.isOverlayInitialized()), "Overlay is closed");
+  helper.assertPanelNotVisible();
+
+  helper.triggerUIFromToolbar();
+
+  await helper.waitForOverlay();
+
+  helper.assertPanelVisible();
+
+  await helper.dragOverlay(10, 10, 500, 500);
+
+  await helper.waitForStateChange("selected");
+  state = await helper.getOverlayState();
+  is(state, "selected", "The overlay is in the selected state");
+
+  await BrowserTestUtils.switchTab(gBrowser, tab1);
+  await BrowserTestUtils.switchTab(gBrowser, screenshotsTab);
+
+  Assert.ok(await helper.isOverlayInitialized(), "Overlay is open");
+  helper.assertPanelNotVisible();
+  state = await helper.getOverlayState();
+  is(state, "selected", "The overlay is in the selected state");
+
+  helper.triggerUIFromToolbar();
+  await helper.waitForOverlayClosed();
+
+  Assert.ok(!(await helper.isOverlayInitialized()), "Overlay is closed");
+  helper.assertPanelNotVisible();
+
+  gBrowser.removeTab(tab1);
+  gBrowser.removeTab(screenshotsTab);
+});
diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_page_unload.js b/browser/components/screenshots/tests/browser/browser_screenshots_page_unload.js
new file mode 100644
index 0000000000..dea97978e4
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/browser_screenshots_page_unload.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+  http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(async function test() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      await SpecialPowers.spawn(browser, [TEST_PAGE], url => {
+        let a = content.document.createElement("a");
+        a.id = "clickMe";
+        a.href = url;
+        a.textContent = "Click me to unload page";
+        content.document.querySelector("body").appendChild(a);
+      });
+
+      let helper = new ScreenshotsHelper(browser);
+
+      // click toolbar button so panel shows
+      helper.triggerUIFromToolbar();
+
+      let panel = gBrowser.selectedBrowser.ownerDocument.querySelector(
+        "#screenshotsPagePanel"
+      );
+      await BrowserTestUtils.waitForMutationCondition(
+        panel,
+        { attributes: true },
+        () => {
+          return BrowserTestUtils.is_visible(panel);
+        }
+      );
+      ok(BrowserTestUtils.is_visible(panel), "Panel buttons are visible");
+
+      await ContentTask.spawn(browser, null, async () => {
+        let screenshotsChild = content.windowGlobalChild.getActor(
+          "ScreenshotsComponent"
+        );
+        Assert.ok(screenshotsChild._overlay._initialized, "The overlay exists");
+      });
+
+      await SpecialPowers.spawn(browser, [], () => {
+        content.document.querySelector("#clickMe").click();
+      });
+
+      await BrowserTestUtils.waitForMutationCondition(
+        panel,
+        { attributes: true },
+        () => {
+          return BrowserTestUtils.is_hidden(panel);
+        }
+      );
+      ok(
+        BrowserTestUtils.is_hidden(panel),
+        "Panel buttons are hidden after page unload"
+      );
+
+      await ContentTask.spawn(browser, null, async () => {
+        let screenshotsChild = content.windowGlobalChild.getActor(
+          "ScreenshotsComponent"
+        );
+        Assert.ok(
+          !screenshotsChild._overlay._initialized,
+          "The overlay doesn't exist"
+        );
+      });
+    }
+  );
+});
diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_short_page_test.js b/browser/components/screenshots/tests/browser/browser_screenshots_short_page_test.js
new file mode 100644
index 0000000000..5772eeb7c3
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/browser_screenshots_short_page_test.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * This test ensures the overlay is covering the entire window event thought the body is only 100px by 100px
+ */
+add_task(async function() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: SHORT_TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+
+      helper.triggerUIFromToolbar();
+
+      await helper.waitForOverlay();
+
+      await helper.dragOverlay(10, 10, 500, 500);
+
+      let dimensions = await helper.getSelectionLayerDimensions();
+      Assert.equal(
+        dimensions.scrollWidth,
+        contentInfo.clientWidth,
+        "The overlay spans the width of the window"
+      );
+
+      Assert.equal(
+        dimensions.scrollHeight,
+        contentInfo.clientHeight,
+        "The overlay spans the height of the window"
+      );
+    }
+  );
+});
diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_test_downloads.js b/browser/components/screenshots/tests/browser/browser_screenshots_test_downloads.js
new file mode 100644
index 0000000000..45dc960fc6
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_downloads.js
@@ -0,0 +1,137 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const MockFilePicker = SpecialPowers.MockFilePicker;
+
+add_setup(async function() {
+  let tmpDir = PathUtils.join(
+    PathUtils.tempDir,
+    "testsavedir" + Math.floor(Math.random() * 2 ** 32)
+  );
+  // Create this dir if it doesn't exist (ignores existing dirs)
+  await IOUtils.makeDirectory(tmpDir);
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      ["browser.download.start_downloads_in_tmp_dir", true],
+      ["browser.helperApps.deleteTempFileOnExit", true],
+      ["browser.download.folderList", 2],
+      ["browser.download.dir", tmpDir],
+    ],
+  });
+
+  MockFilePicker.init(window);
+  MockFilePicker.useAnyFile();
+  MockFilePicker.returnValue = MockFilePicker.returnOK;
+
+  registerCleanupFunction(async () => {
+    Services.prefs.clearUserPref("browser.download.dir");
+    Services.prefs.clearUserPref("browser.download.folderList");
+
+    MockFilePicker.cleanup();
+  });
+});
+
+function waitForFilePicker() {
+  return new Promise(resolve => {
+    MockFilePicker.showCallback = () => {
+      MockFilePicker.showCallback = null;
+      ok(true, "Saw the file picker");
+      resolve();
+    };
+  });
+}
+
+add_task(async function test_download_without_filepicker() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.download.useDownloadDir", true]],
+  });
+
+  let publicDownloads = await Downloads.getList(Downloads.PUBLIC);
+  // First ensure we catch the download finishing.
+  let downloadFinishedPromise = new Promise(resolve => {
+    publicDownloads.addView({
+      onDownloadChanged(download) {
+        info("Download changed!");
+        if (download.succeeded || download.error) {
+          info("Download succeeded or errored");
+          publicDownloads.removeView(this);
+          resolve(download);
+        }
+      },
+    });
+  });
+
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+
+      helper.triggerUIFromToolbar();
+      await helper.waitForOverlay();
+      await helper.dragOverlay(10, 10, 500, 500);
+
+      helper.clickDownloadButton();
+
+      info("wait for download to finish");
+      let download = await downloadFinishedPromise;
+
+      ok(download.succeeded, "Download should succeed");
+
+      await publicDownloads.removeFinished();
+    }
+  );
+});
+
+add_task(async function test_download_with_filepicker() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.download.useDownloadDir", false]],
+  });
+
+  let publicDownloads = await Downloads.getList(Downloads.PUBLIC);
+  // First ensure we catch the download finishing.
+  let downloadFinishedPromise = new Promise(resolve => {
+    publicDownloads.addView({
+      onDownloadChanged(download) {
+        info("Download changed!");
+        if (download.succeeded || download.error) {
+          info("Download succeeded or errored");
+          publicDownloads.removeView(this);
+          resolve(download);
+        }
+      },
+    });
+  });
+
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+
+      helper.triggerUIFromToolbar();
+      await helper.waitForOverlay();
+      await helper.dragOverlay(10, 10, 500, 500);
+
+      let filePicker = waitForFilePicker();
+
+      helper.clickDownloadButton();
+
+      await filePicker;
+      ok(true, "Export file picker opened");
+
+      info("wait for download to finish");
+      let download = await downloadFinishedPromise;
+
+      ok(download.succeeded, "Download should succeed");
+
+      await publicDownloads.removeFinished();
+    }
+  );
+});
diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_test_escape.js b/browser/components/screenshots/tests/browser/browser_screenshots_test_escape.js
new file mode 100644
index 0000000000..09605fd316
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_escape.js
@@ -0,0 +1,25 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(async function test_fullpageScreenshot() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+
+      // click toolbar button so panel shows
+      helper.triggerUIFromToolbar();
+
+      await helper.waitForOverlay();
+
+      EventUtils.synthesizeKey("KEY_Escape");
+
+      await helper.waitForOverlayClosed();
+    }
+  );
+});
diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_test_full_page.js b/browser/components/screenshots/tests/browser/browser_screenshots_test_full_page.js
new file mode 100644
index 0000000000..cf83537d87
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_full_page.js
@@ -0,0 +1,192 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(async function test_fullpageScreenshot() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+
+      // click toolbar button so panel shows
+      helper.triggerUIFromToolbar();
+
+      let panel = gBrowser.selectedBrowser.ownerDocument.querySelector(
+        "#screenshotsPagePanel"
+      );
+      await BrowserTestUtils.waitForMutationCondition(
+        panel,
+        { attributes: true },
+        () => {
+          return BrowserTestUtils.is_visible(panel);
+        }
+      );
+      ok(BrowserTestUtils.is_visible(panel), "Panel buttons are visible");
+
+      let screenshotReady = TestUtils.topicObserved(
+        "screenshots-preview-ready"
+      );
+
+      // click the full page button in panel
+      let visiblePage = panel
+        .querySelector("screenshots-buttons")
+        .shadowRoot.querySelector(".full-page");
+      visiblePage.click();
+
+      let dialog = helper.getDialog();
+
+      await screenshotReady;
+
+      let copyButton = dialog._frame.contentDocument.querySelector(
+        ".highlight-button-copy"
+      );
+      ok(copyButton, "Got the copy button");
+
+      let clipboardChanged = helper.waitForRawClipboardChange();
+
+      // click copy button on dialog box
+      copyButton.click();
+
+      info("Waiting for clipboard change");
+      await clipboardChanged;
+
+      let result = await helper.getImageSizeAndColorFromClipboard();
+      info("result: " + JSON.stringify(result, null, 2));
+      info("contentInfo: " + JSON.stringify(contentInfo, null, 2));
+
+      Assert.equal(
+        contentInfo.scrollWidth,
+        result.width,
+        "Widths should be equal"
+      );
+
+      Assert.equal(
+        contentInfo.scrollHeight,
+        result.height,
+        "Heights should be equal"
+      );
+
+      // top left
+      Assert.equal(111, result.color.topLeft[0], "R color value");
+      Assert.equal(111, result.color.topLeft[1], "G color value");
+      Assert.equal(111, result.color.topLeft[2], "B color value");
+
+      // top right
+      Assert.equal(55, result.color.topRight[0], "R color value");
+      Assert.equal(155, result.color.topRight[1], "G color value");
+      Assert.equal(155, result.color.topRight[2], "B color value");
+
+      // bottom left
+      Assert.equal(105, result.color.bottomLeft[0], "R color value");
+      Assert.equal(55, result.color.bottomLeft[1], "G color value");
+      Assert.equal(105, result.color.bottomLeft[2], "B color value");
+
+      // bottom right
+      Assert.equal(52, result.color.bottomRight[0], "R color value");
+      Assert.equal(127, result.color.bottomRight[1], "G color value");
+      Assert.equal(152, result.color.bottomRight[2], "B color value");
+    }
+  );
+});
+
+add_task(async function test_fullpageScreenshotScrolled() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      await SpecialPowers.spawn(browser, [], () => {
+        content.scrollTo(0, 2008);
+      });
+
+      let helper = new ScreenshotsHelper(browser);
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+
+      // click toolbar button so panel shows
+      helper.triggerUIFromToolbar();
+
+      let panel = gBrowser.selectedBrowser.ownerDocument.querySelector(
+        "#screenshotsPagePanel"
+      );
+      await BrowserTestUtils.waitForMutationCondition(
+        panel,
+        { attributes: true },
+        () => {
+          return BrowserTestUtils.is_visible(panel);
+        }
+      );
+      ok(BrowserTestUtils.is_visible(panel), "Panel buttons are visible");
+
+      let screenshotReady = TestUtils.topicObserved(
+        "screenshots-preview-ready"
+      );
+
+      // click the full page button in panel
+      let visiblePage = panel
+        .querySelector("screenshots-buttons")
+        .shadowRoot.querySelector(".full-page");
+      visiblePage.click();
+
+      let dialog = helper.getDialog();
+
+      await screenshotReady;
+
+      let copyButton = dialog._frame.contentDocument.querySelector(
+        ".highlight-button-copy"
+      );
+      ok(copyButton, "Got the copy button");
+
+      let clipboardChanged = helper.waitForRawClipboardChange();
+
+      // click copy button on dialog box
+      copyButton.click();
+
+      info("Waiting for clipboard change");
+      await clipboardChanged;
+
+      let result = await helper.getImageSizeAndColorFromClipboard();
+      info("result: " + JSON.stringify(result, null, 2));
+      info("contentInfo: " + JSON.stringify(contentInfo, null, 2));
+
+      Assert.equal(
+        contentInfo.scrollWidth,
+        result.width,
+        "Widths should be equal"
+      );
+
+      Assert.equal(
+        contentInfo.scrollHeight,
+        result.height,
+        "Heights should be equal"
+      );
+
+      // top left
+      Assert.equal(111, result.color.topLeft[0], "R color value");
+      Assert.equal(111, result.color.topLeft[1], "G color value");
+      Assert.equal(111, result.color.topLeft[2], "B color value");
+
+      // top right
+      Assert.equal(55, result.color.topRight[0], "R color value");
+      Assert.equal(155, result.color.topRight[1], "G color value");
+      Assert.equal(155, result.color.topRight[2], "B color value");
+
+      // bottom left
+      Assert.equal(105, result.color.bottomLeft[0], "R color value");
+      Assert.equal(55, result.color.bottomLeft[1], "G color value");
+      Assert.equal(105, result.color.bottomLeft[2], "B color value");
+
+      // bottom right
+      Assert.equal(52, result.color.bottomRight[0], "R color value");
+      Assert.equal(127, result.color.bottomRight[1], "G color value");
+      Assert.equal(152, result.color.bottomRight[2], "B color value");
+    }
+  );
+});
diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_test_page_crash.js b/browser/components/screenshots/tests/browser/browser_screenshots_test_page_crash.js
new file mode 100644
index 0000000000..ab5afe49a1
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_page_crash.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(async function test_fullpageScreenshot() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+
+      // click toolbar button so UI shows
+      helper.triggerUIFromToolbar();
+
+      let panel = gBrowser.selectedBrowser.ownerDocument.querySelector(
+        "#screenshotsPagePanel"
+      );
+      await BrowserTestUtils.waitForMutationCondition(
+        panel,
+        { attributes: true },
+        () => {
+          return BrowserTestUtils.is_visible(panel);
+        }
+      );
+      ok(BrowserTestUtils.is_visible(panel), "Panel buttons are visible");
+
+      await ContentTask.spawn(browser, null, async () => {
+        let screenshotsChild = content.windowGlobalChild.getActor(
+          "ScreenshotsComponent"
+        );
+        Assert.ok(screenshotsChild._overlay._initialized, "The overlay exists");
+      });
+
+      let waitForPanelHide = BrowserTestUtils.waitForMutationCondition(
+        panel,
+        { attributes: true },
+        () => {
+          return BrowserTestUtils.is_hidden(panel);
+        }
+      );
+
+      await BrowserTestUtils.crashFrame(browser);
+
+      await waitForPanelHide;
+      ok(
+        BrowserTestUtils.is_hidden(panel),
+        "Panel buttons are hidden after page crash"
+      );
+
+      await ContentTask.spawn(browser, null, async () => {
+        let screenshotsChild = content.windowGlobalChild.getActor(
+          "ScreenshotsComponent"
+        );
+        Assert.ok(!screenshotsChild._overlay, "The overlay doesn't exist");
+      });
+
+      let tab = gBrowser.getTabForBrowser(browser);
+
+      SessionStore.reviveCrashedTab(tab);
+
+      ok(
+        BrowserTestUtils.is_hidden(panel),
+        "Panel buttons are hidden after page crash"
+      );
+    }
+  );
+});
diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_test_toggle_pref.js b/browser/components/screenshots/tests/browser/browser_screenshots_test_toggle_pref.js
new file mode 100644
index 0000000000..b778c63163
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_toggle_pref.js
@@ -0,0 +1,288 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const { sinon } = ChromeUtils.import("resource://testing-common/Sinon.jsm");
+const { XPCOMUtils } = ChromeUtils.importESModule(
+  "resource://gre/modules/XPCOMUtils.sys.mjs"
+);
+
+ChromeUtils.defineESModuleGetters(this, {
+  ScreenshotsUtils: "resource:///modules/ScreenshotsUtils.sys.mjs",
+});
+XPCOMUtils.defineLazyGetter(this, "ExtensionManagement", () => {
+  const { Management } = ChromeUtils.import(
+    "resource://gre/modules/Extension.jsm"
+  );
+  return Management;
+});
+
+add_task(async function test() {
+  let observerSpy = sinon.spy();
+  let notifierSpy = sinon.spy();
+
+  let observerStub = sinon
+    .stub(ScreenshotsUtils, "observe")
+    .callsFake(observerSpy);
+  let notifierStub = sinon
+    .stub(ScreenshotsUtils, "notify")
+    .callsFake(function(window, type) {
+      notifierSpy();
+      ScreenshotsUtils.notify.wrappedMethod.apply(this, arguments);
+    });
+
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      function awaitExtensionEvent(eventName, id) {
+        return new Promise(resolve => {
+          let listener = (_eventName, ...args) => {
+            let extension = args[0];
+            if (_eventName === eventName && extension.id == id) {
+              ExtensionManagement.off(eventName, listener);
+              resolve();
+            }
+          };
+          ExtensionManagement.on(eventName, listener);
+        });
+      }
+      const SCREENSHOT_EXTENSION = "screenshots@mozilla.org";
+
+      let helper = new ScreenshotsHelper(browser);
+
+      ok(observerSpy.notCalled, "Observer not called");
+      helper.triggerUIFromToolbar();
+      Assert.equal(observerSpy.callCount, 1, "Observer function called once");
+
+      ok(notifierSpy.notCalled, "Notifier not called");
+      EventUtils.synthesizeKey("s", { accelKey: true, shiftKey: true });
+
+      await TestUtils.waitForCondition(() => notifierSpy.callCount == 1);
+      Assert.equal(notifierSpy.callCount, 1, "Notify function called once");
+
+      await TestUtils.waitForCondition(() => observerSpy.callCount == 2);
+      Assert.equal(observerSpy.callCount, 2, "Observer function called twice");
+
+      let menu = document.getElementById("contentAreaContextMenu");
+      let popupshown = BrowserTestUtils.waitForPopupEvent(menu, "shown");
+      EventUtils.synthesizeMouseAtCenter(document.body, {
+        type: "contextmenu",
+      });
+      await popupshown;
+      Assert.equal(menu.state, "open", "Context menu is open");
+
+      let popuphidden = BrowserTestUtils.waitForPopupEvent(menu, "hidden");
+      menu.activateItem(menu.querySelector("#context-take-screenshot"));
+      await popuphidden;
+
+      Assert.equal(observerSpy.callCount, 3, "Observer function called thrice");
+
+      const COMPONENT_PREF = "screenshots.browser.component.enabled";
+      await SpecialPowers.pushPrefEnv({
+        set: [[COMPONENT_PREF, false]],
+      });
+      ok(!Services.prefs.getBoolPref(COMPONENT_PREF), "Extension enabled");
+      await awaitExtensionEvent("ready", SCREENSHOT_EXTENSION);
+
+      helper.triggerUIFromToolbar();
+      Assert.equal(
+        observerSpy.callCount,
+        3,
+        "Observer function still called thrice"
+      );
+
+      await SpecialPowers.spawn(
+        browser,
+        ["#firefox-screenshots-preselection-iframe"],
+        async function(iframeSelector) {
+          info(
+            `in waitForUIContent content function, iframeSelector: ${iframeSelector}`
+          );
+          let iframe;
+          await ContentTaskUtils.waitForCondition(() => {
+            iframe = content.document.querySelector(iframeSelector);
+            if (!iframe || !ContentTaskUtils.is_visible(iframe)) {
+              info("in waitForUIContent, no visible iframe yet");
+              return false;
+            }
+            return true;
+          });
+          // wait a frame for the screenshots UI to finish any init
+          await new content.Promise(res => content.requestAnimationFrame(res));
+        }
+      );
+
+      helper.triggerUIFromToolbar();
+      await SpecialPowers.spawn(
+        browser,
+        ["#firefox-screenshots-preselection-iframe"],
+        async function(iframeSelector) {
+          info(
+            `in waitForUIContent content function, iframeSelector: ${iframeSelector}`
+          );
+          let iframe;
+          await ContentTaskUtils.waitForCondition(() => {
+            iframe = content.document.querySelector(iframeSelector);
+            if (!iframe || !ContentTaskUtils.is_visible(iframe)) {
+              info("in waitForUIContent, no visible iframe yet");
+              return true;
+            }
+            return false;
+          });
+          // wait a frame for the screenshots UI to finish any init
+          await new content.Promise(res => content.requestAnimationFrame(res));
+        }
+      );
+
+      popupshown = BrowserTestUtils.waitForPopupEvent(menu, "shown");
+      EventUtils.synthesizeMouseAtCenter(document.body, {
+        type: "contextmenu",
+      });
+      await popupshown;
+      Assert.equal(menu.state, "open", "Context menu is open");
+
+      popuphidden = BrowserTestUtils.waitForPopupEvent(menu, "hidden");
+      menu.activateItem(menu.querySelector("#context-take-screenshot"));
+      await popuphidden;
+
+      Assert.equal(
+        observerSpy.callCount,
+        3,
+        "Observer function still called thrice"
+      );
+
+      await SpecialPowers.spawn(
+        browser,
+        ["#firefox-screenshots-preselection-iframe"],
+        async function(iframeSelector) {
+          info(
+            `in waitForUIContent content function, iframeSelector: ${iframeSelector}`
+          );
+          let iframe;
+          await ContentTaskUtils.waitForCondition(() => {
+            iframe = content.document.querySelector(iframeSelector);
+            if (!iframe || !ContentTaskUtils.is_visible(iframe)) {
+              info("in waitForUIContent, no visible iframe yet");
+              return false;
+            }
+            return true;
+          });
+          // wait a frame for the screenshots UI to finish any init
+          await new content.Promise(res => content.requestAnimationFrame(res));
+        }
+      );
+
+      helper.triggerUIFromToolbar();
+      await SpecialPowers.spawn(
+        browser,
+        ["#firefox-screenshots-preselection-iframe"],
+        async function(iframeSelector) {
+          info(
+            `in waitForUIContent content function, iframeSelector: ${iframeSelector}`
+          );
+          let iframe;
+          await ContentTaskUtils.waitForCondition(() => {
+            iframe = content.document.querySelector(iframeSelector);
+            if (!iframe || !ContentTaskUtils.is_visible(iframe)) {
+              return true;
+            }
+            info("in waitForUIContent, iframe still visible");
+            info(iframe);
+            return false;
+          });
+          // wait a frame for the screenshots UI to finish any init
+          await new content.Promise(res => content.requestAnimationFrame(res));
+        }
+      );
+
+      let componentReady = TestUtils.topicObserved(
+        "screenshots-component-initialized"
+      );
+
+      await SpecialPowers.pushPrefEnv({
+        set: [[COMPONENT_PREF, true]],
+      });
+      ok(Services.prefs.getBoolPref(COMPONENT_PREF), "Component enabled");
+      // Needed for component to initialize
+      await componentReady;
+
+      helper.triggerUIFromToolbar();
+      Assert.equal(
+        observerSpy.callCount,
+        4,
+        "Observer function called four times"
+      );
+
+      const SCREENSHOTS_PREF = "extensions.screenshots.disabled";
+      await SpecialPowers.pushPrefEnv({
+        set: [[SCREENSHOTS_PREF, true]],
+      });
+      ok(Services.prefs.getBoolPref(SCREENSHOTS_PREF), "Screenshots disabled");
+    }
+  );
+
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      const SCREENSHOTS_PREF = "extensions.screenshots.disabled";
+      ok(Services.prefs.getBoolPref(SCREENSHOTS_PREF), "Screenshots disabled");
+
+      ok(
+        document.getElementById("screenshot-button").disabled,
+        "Toolbar button disabled"
+      );
+
+      let menu = document.getElementById("contentAreaContextMenu");
+      let popupshown = BrowserTestUtils.waitForPopupEvent(menu, "shown");
+      EventUtils.synthesizeMouseAtCenter(document.body, {
+        type: "contextmenu",
+      });
+      await popupshown;
+      Assert.equal(menu.state, "open", "Context menu is open");
+
+      ok(
+        menu.querySelector("#context-take-screenshot").hidden,
+        "Take screenshot is not in context menu"
+      );
+
+      let popuphidden = BrowserTestUtils.waitForPopupEvent(menu, "hidden");
+      menu.hidePopup();
+      await popuphidden;
+
+      await SpecialPowers.pushPrefEnv({
+        set: [[SCREENSHOTS_PREF, false]],
+      });
+      ok(!Services.prefs.getBoolPref(SCREENSHOTS_PREF), "Screenshots enabled");
+    }
+  );
+
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      const SCREENSHOTS_PREF = "extensions.screenshots.disabled";
+      ok(!Services.prefs.getBoolPref(SCREENSHOTS_PREF), "Screenshots enabled");
+
+      let helper = new ScreenshotsHelper(browser);
+
+      helper.triggerUIFromToolbar();
+      Assert.equal(
+        observerSpy.callCount,
+        5,
+        "Observer function called for the fifth time"
+      );
+    }
+  );
+
+  observerStub.restore();
+  notifierStub.restore();
+});
diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_test_toolbar_button.js b/browser/components/screenshots/tests/browser/browser_screenshots_test_toolbar_button.js
new file mode 100644
index 0000000000..5ad7d32192
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_toolbar_button.js
@@ -0,0 +1,26 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(async function testScreenshotButtonDisabled() {
+  info("Test the Screenshots button in the panel");
+
+  let screenshotBtn = document.getElementById("screenshot-button");
+  Assert.ok(screenshotBtn, "The screenshots button was added to the nav bar");
+
+  await BrowserTestUtils.withNewTab("https://example.com/", () => {
+    Assert.equal(
+      screenshotBtn.disabled,
+      false,
+      "Screenshots button is enabled"
+    );
+  });
+  await BrowserTestUtils.withNewTab("about:home", () => {
+    Assert.equal(
+      screenshotBtn.disabled,
+      false,
+      "Screenshots button is still enabled on about pages"
+    );
+  });
+});
diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_test_visible.js b/browser/components/screenshots/tests/browser/browser_screenshots_test_visible.js
new file mode 100644
index 0000000000..a23d07140e
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_visible.js
@@ -0,0 +1,374 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(async function test_visibleScreenshot() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      let helper = new ScreenshotsHelper(browser);
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+      let devicePixelRatio = await getContentDevicePixelRatio(browser);
+
+      // click toolbar button so panel shows
+      helper.triggerUIFromToolbar();
+
+      await helper.waitForOverlay();
+
+      let screenshotReady = TestUtils.topicObserved(
+        "screenshots-preview-ready"
+      );
+
+      let panel = gBrowser.selectedBrowser.ownerDocument.querySelector(
+        "#screenshotsPagePanel"
+      );
+
+      // click the visible page button in panel
+      let visiblePageButton = panel
+        .querySelector("screenshots-buttons")
+        .shadowRoot.querySelector(".visible-page");
+      visiblePageButton.click();
+
+      let dialog = helper.getDialog();
+
+      await screenshotReady;
+
+      let copyButton = dialog._frame.contentDocument.querySelector(
+        ".highlight-button-copy"
+      );
+      ok(copyButton, "Got the copy button");
+
+      let clipboardChanged = helper.waitForRawClipboardChange();
+
+      // click copy button on dialog box
+      copyButton.click();
+
+      info("Waiting for clipboard change");
+      await clipboardChanged;
+
+      let result = await helper.getImageSizeAndColorFromClipboard();
+      info("result: " + JSON.stringify(result, null, 2));
+      info("contentInfo: " + JSON.stringify(contentInfo, null, 2));
+
+      let expectedWidth = Math.floor(
+        devicePixelRatio * contentInfo.clientWidth
+      );
+      Assert.equal(result.width, expectedWidth, "Widths should be equal");
+
+      let expectedHeight = Math.floor(
+        devicePixelRatio * contentInfo.clientHeight
+      );
+      Assert.equal(result.height, expectedHeight, "Heights should be equal");
+
+      // top left
+      Assert.equal(111, result.color.topLeft[0], "R color value");
+      Assert.equal(111, result.color.topLeft[1], "G color value");
+      Assert.equal(111, result.color.topLeft[2], "B color value");
+
+      // top right
+      Assert.equal(111, result.color.topRight[0], "R color value");
+      Assert.equal(111, result.color.topRight[1], "G color value");
+      Assert.equal(111, result.color.topRight[2], "B color value");
+
+      // bottom left
+      Assert.equal(111, result.color.bottomLeft[0], "R color value");
+      Assert.equal(111, result.color.bottomLeft[1], "G color value");
+      Assert.equal(111, result.color.bottomLeft[2], "B color value");
+
+      // bottom right
+      Assert.equal(111, result.color.bottomRight[0], "R color value");
+      Assert.equal(111, result.color.bottomRight[1], "G color value");
+      Assert.equal(111, result.color.bottomRight[2], "B color value");
+    }
+  );
+});
+
+add_task(async function test_visibleScreenshotScrolled() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      await SpecialPowers.spawn(browser, [], () => {
+        content.scrollTo(0, 2008);
+      });
+
+      let helper = new ScreenshotsHelper(browser);
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+
+      // click toolbar button so panel shows
+      helper.triggerUIFromToolbar();
+
+      let panel = gBrowser.selectedBrowser.ownerDocument.querySelector(
+        "#screenshotsPagePanel"
+      );
+      await BrowserTestUtils.waitForMutationCondition(
+        panel,
+        { attributes: true },
+        () => {
+          return BrowserTestUtils.is_visible(panel);
+        }
+      );
+      ok(BrowserTestUtils.is_visible(panel), "Panel buttons are visible");
+
+      let screenshotReady = TestUtils.topicObserved(
+        "screenshots-preview-ready"
+      );
+
+      // click the visible page button in panel
+      let visiblePageButton = panel
+        .querySelector("screenshots-buttons")
+        .shadowRoot.querySelector(".visible-page");
+      visiblePageButton.click();
+
+      let dialog = helper.getDialog();
+
+      await screenshotReady;
+
+      let copyButton = dialog._frame.contentDocument.querySelector(
+        ".highlight-button-copy"
+      );
+      ok(copyButton, "Got the copy button");
+
+      let clipboardChanged = helper.waitForRawClipboardChange();
+
+      // click copy button on dialog box
+      copyButton.click();
+
+      info("Waiting for clipboard change");
+      await clipboardChanged;
+
+      let result = await helper.getImageSizeAndColorFromClipboard();
+
+      info("result: " + JSON.stringify(result, null, 2));
+      info("contentInfo: " + JSON.stringify(contentInfo, null, 2));
+
+      let expectedWidth = Math.floor(
+        devicePixelRatio * contentInfo.clientWidth
+      );
+      Assert.equal(result.width, expectedWidth, "Widths should be equal");
+
+      let expectedHeight = Math.floor(
+        devicePixelRatio * contentInfo.clientHeight
+      );
+      Assert.equal(result.height, expectedHeight, "Heights should be equal");
+
+      // top left
+      Assert.equal(105, result.color.topLeft[0], "R color value");
+      Assert.equal(55, result.color.topLeft[1], "G color value");
+      Assert.equal(105, result.color.topLeft[2], "B color value");
+
+      // top right
+      Assert.equal(105, result.color.topRight[0], "R color value");
+      Assert.equal(55, result.color.topRight[1], "G color value");
+      Assert.equal(105, result.color.topRight[2], "B color value");
+
+      // bottom left
+      Assert.equal(105, result.color.bottomLeft[0], "R color value");
+      Assert.equal(55, result.color.bottomLeft[1], "G color value");
+      Assert.equal(105, result.color.bottomLeft[2], "B color value");
+
+      // bottom right
+      Assert.equal(105, result.color.bottomRight[0], "R color value");
+      Assert.equal(55, result.color.bottomRight[1], "G color value");
+      Assert.equal(105, result.color.bottomRight[2], "B color value");
+    }
+  );
+});
+
+add_task(async function test_visibleScreenshotScrolled() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      await SpecialPowers.spawn(browser, [], () => {
+        content.scrollTo(2004, 0);
+      });
+
+      let helper = new ScreenshotsHelper(browser);
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+
+      // click toolbar button so panel shows
+      helper.triggerUIFromToolbar();
+
+      let panel = gBrowser.selectedBrowser.ownerDocument.querySelector(
+        "#screenshotsPagePanel"
+      );
+      await BrowserTestUtils.waitForMutationCondition(
+        panel,
+        { attributes: true },
+        () => {
+          return BrowserTestUtils.is_visible(panel);
+        }
+      );
+      ok(BrowserTestUtils.is_visible(panel), "Panel buttons are visible");
+
+      let screenshotReady = TestUtils.topicObserved(
+        "screenshots-preview-ready"
+      );
+
+      // click the visible page button in panel
+      let visiblePageButton = panel
+        .querySelector("screenshots-buttons")
+        .shadowRoot.querySelector(".visible-page");
+      visiblePageButton.click();
+
+      let dialog = helper.getDialog();
+
+      await screenshotReady;
+
+      let copyButton = dialog._frame.contentDocument.querySelector(
+        ".highlight-button-copy"
+      );
+      ok(copyButton, "Got the copy button");
+
+      let clipboardChanged = helper.waitForRawClipboardChange();
+
+      // click copy button on dialog box
+      copyButton.click();
+
+      info("Waiting for clipboard change");
+      await clipboardChanged;
+
+      let result = await helper.getImageSizeAndColorFromClipboard();
+
+      info("result: " + JSON.stringify(result, null, 2));
+      info("contentInfo: " + JSON.stringify(contentInfo, null, 2));
+
+      let expectedWidth = Math.floor(
+        devicePixelRatio * contentInfo.clientWidth
+      );
+      Assert.equal(result.width, expectedWidth, "Widths should be equal");
+
+      let expectedHeight = Math.floor(
+        devicePixelRatio * contentInfo.clientHeight
+      );
+      Assert.equal(result.height, expectedHeight, "Heights should be equal");
+
+      // top left
+      Assert.equal(55, result.color.topLeft[0], "R color value");
+      Assert.equal(155, result.color.topLeft[1], "G color value");
+      Assert.equal(155, result.color.topLeft[2], "B color value");
+
+      // top right
+      Assert.equal(55, result.color.topRight[0], "R color value");
+      Assert.equal(155, result.color.topRight[1], "G color value");
+      Assert.equal(155, result.color.topRight[2], "B color value");
+
+      // bottom left
+      Assert.equal(55, result.color.bottomLeft[0], "R color value");
+      Assert.equal(155, result.color.bottomLeft[1], "G color value");
+      Assert.equal(155, result.color.bottomLeft[2], "B color value");
+
+      // bottom right
+      Assert.equal(55, result.color.bottomRight[0], "R color value");
+      Assert.equal(155, result.color.bottomRight[1], "G color value");
+      Assert.equal(155, result.color.bottomRight[2], "B color value");
+    }
+  );
+});
+
+add_task(async function test_visibleScreenshotScrolled() {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: TEST_PAGE,
+    },
+    async browser => {
+      await SpecialPowers.spawn(browser, [], () => {
+        content.scrollTo(2004, 2008);
+      });
+
+      let helper = new ScreenshotsHelper(browser);
+      let contentInfo = await helper.getContentDimensions();
+      ok(contentInfo, "Got dimensions back from the content");
+
+      // click toolbar button so panel shows
+      helper.triggerUIFromToolbar();
+
+      let panel = gBrowser.selectedBrowser.ownerDocument.querySelector(
+        "#screenshotsPagePanel"
+      );
+      await BrowserTestUtils.waitForMutationCondition(
+        panel,
+        { attributes: true },
+        () => {
+          return BrowserTestUtils.is_visible(panel);
+        }
+      );
+      ok(BrowserTestUtils.is_visible(panel), "Panel buttons are visible");
+
+      let screenshotReady = TestUtils.topicObserved(
+        "screenshots-preview-ready"
+      );
+
+      // click the visible page button in panel
+      let visiblePageButton = panel
+        .querySelector("screenshots-buttons")
+        .shadowRoot.querySelector(".visible-page");
+      visiblePageButton.click();
+
+      let dialog = helper.getDialog();
+
+      await screenshotReady;
+
+      let copyButton = dialog._frame.contentDocument.querySelector(
+        ".highlight-button-copy"
+      );
+      ok(copyButton, "Got the copy button");
+
+      let clipboardChanged = helper.waitForRawClipboardChange();
+
+      // click copy button on dialog box
+      copyButton.click();
+
+      info("Waiting for clipboard change");
+      await clipboardChanged;
+
+      let result = await helper.getImageSizeAndColorFromClipboard();
+
+      info("result: " + JSON.stringify(result, null, 2));
+      info("contentInfo: " + JSON.stringify(contentInfo, null, 2));
+
+      let expectedWidth = Math.floor(
+        devicePixelRatio * contentInfo.clientWidth
+      );
+      Assert.equal(result.width, expectedWidth, "Widths should be equal");
+
+      let expectedHeight = Math.floor(
+        devicePixelRatio * contentInfo.clientHeight
+      );
+      Assert.equal(result.height, expectedHeight, "Heights should be equal");
+
+      // top left
+      Assert.equal(52, result.color.topLeft[0], "R color value");
+      Assert.equal(127, result.color.topLeft[1], "G color value");
+      Assert.equal(152, result.color.topLeft[2], "B color value");
+
+      // top right
+      Assert.equal(52, result.color.topRight[0], "R color value");
+      Assert.equal(127, result.color.topRight[1], "G color value");
+      Assert.equal(152, result.color.topRight[2], "B color value");
+
+      // bottom left
+      Assert.equal(52, result.color.bottomLeft[0], "R color value");
+      Assert.equal(127, result.color.bottomLeft[1], "G color value");
+      Assert.equal(152, result.color.bottomLeft[2], "B color value");
+
+      // bottom right
+      Assert.equal(52, result.color.bottomRight[0], "R color value");
+      Assert.equal(127, result.color.bottomRight[1], "G color value");
+      Assert.equal(152, result.color.bottomRight[2], "B color value");
+    }
+  );
+});
diff --git a/browser/components/screenshots/tests/browser/head.js b/browser/components/screenshots/tests/browser/head.js
new file mode 100644
index 0000000000..cda6aed601
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/head.js
@@ -0,0 +1,496 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_ROOT = getRootDirectory(gTestPath).replace(
+  "chrome://mochitests/content",
+  "http://example.com"
+);
+
+const TEST_PAGE = TEST_ROOT + "test-page.html";
+const SHORT_TEST_PAGE = TEST_ROOT + "short-test-page.html";
+
+const gScreenshotUISelectors = {
+  panelButtons: "#screenshotsPagePanel",
+  fullPageButton: "button.full-page",
+  visiblePageButton: "button.visible-page",
+  copyButton: "button.highlight-button-copy",
+};
+
+// MouseEvents is for the mouse events on the Anonymous content
+const MouseEvents = {
+  mouse: new Proxy(
+    {},
+    {
+      get: (target, name) =>
+        async function(x, y, selector = ":root") {
+          if (name === "click") {
+            this.down(x, y);
+            this.up(x, y);
+          } else {
+            await safeSynthesizeMouseEventInContentPage(selector, x, y, {
+              type: "mouse" + name,
+            });
+          }
+        },
+    }
+  ),
+};
+
+const { mouse } = MouseEvents;
+
+class ScreenshotsHelper {
+  constructor(browser) {
+    this.browser = browser;
+    this.selector = gScreenshotUISelectors;
+  }
+
+  get toolbarButton() {
+    return document.getElementById("screenshot-button");
+  }
+
+  /**
+   * Click the screenshots button in the toolbar
+   */
+  triggerUIFromToolbar() {
+    let button = this.toolbarButton;
+    ok(
+      BrowserTestUtils.is_visible(button),
+      "The screenshot toolbar button is visible"
+    );
+    button.click();
+  }
+
+  async waitForPanel() {
+    return BrowserTestUtils.waitForCondition(async () => {
+      return gBrowser.selectedBrowser.ownerDocument.querySelector(
+        "#screenshotsPagePanel"
+      );
+    });
+  }
+
+  async waitForOverlay() {
+    let panel = gBrowser.selectedBrowser.ownerDocument.querySelector(
+      "#screenshotsPagePanel"
+    );
+    if (!panel) {
+      panel = await this.waitForPanel();
+    }
+    await BrowserTestUtils.waitForMutationCondition(
+      panel,
+      { attributes: true },
+      () => {
+        return BrowserTestUtils.is_visible(panel);
+      }
+    );
+    ok(BrowserTestUtils.is_visible(panel), "Panel buttons are visible");
+
+    await BrowserTestUtils.waitForCondition(async () => {
+      let init = await this.isOverlayInitialized();
+      return init;
+    });
+    info("Overlay is visible");
+  }
+
+  async waitForOverlayClosed() {
+    let panel = gBrowser.selectedBrowser.ownerDocument.querySelector(
+      "#screenshotsPagePanel"
+    );
+    if (!panel) {
+      panel = await this.waitForPanel();
+    }
+    await BrowserTestUtils.waitForMutationCondition(
+      panel,
+      { attributes: true },
+      () => {
+        return BrowserTestUtils.is_hidden(panel);
+      }
+    );
+    ok(BrowserTestUtils.is_hidden(panel), "Panel buttons are hidden");
+
+    await BrowserTestUtils.waitForCondition(async () => {
+      let init = !(await this.isOverlayInitialized());
+      info("Is overlay initialized: " + !init);
+      return init;
+    });
+    info("Overlay is not visible");
+  }
+
+  async isOverlayInitialized() {
+    return SpecialPowers.spawn(this.browser, [], () => {
+      let screenshotsChild = content.windowGlobalChild.getActor(
+        "ScreenshotsComponent"
+      );
+      return screenshotsChild?._overlay?._initialized;
+    });
+  }
+
+  async getOverlayState() {
+    return ContentTask.spawn(this.browser, null, async () => {
+      let screenshotsChild = content.windowGlobalChild.getActor(
+        "ScreenshotsComponent"
+      );
+      return screenshotsChild._overlay.stateHandler.getState();
+    });
+  }
+
+  async waitForStateChange(newState) {
+    await BrowserTestUtils.waitForCondition(async () => {
+      let state = await this.getOverlayState();
+      return state === newState;
+    });
+  }
+
+  async waitForSelectionBoxSizeChange(currentWidth) {
+    await ContentTask.spawn(
+      this.browser,
+      [currentWidth],
+      async ([currWidth]) => {
+        let screenshotsChild = content.windowGlobalChild.getActor(
+          "ScreenshotsComponent"
+        );
+
+        let dimensions = screenshotsChild._overlay.screenshotsContainer.getSelectionLayerDimensions();
+        // return dimensions.boxWidth;
+        await ContentTaskUtils.waitForCondition(() => {
+          dimensions = screenshotsChild._overlay.screenshotsContainer.getSelectionLayerDimensions();
+          return dimensions.boxWidth !== currWidth;
+        }, "Wait for selection box width change");
+      }
+    );
+  }
+
+  async dragOverlay(startX, startY, endX, endY) {
+    await this.waitForStateChange("crosshairs");
+    let state = await this.getOverlayState();
+    Assert.equal(state, "crosshairs", "The overlay is in the crosshairs state");
+
+    mouse.down(startX, startY);
+
+    await this.waitForStateChange("draggingReady");
+    state = await this.getOverlayState();
+    Assert.equal(
+      state,
+      "draggingReady",
+      "The overlay is in the draggingReady state"
+    );
+
+    mouse.move(endX, endY);
+
+    await this.waitForStateChange("dragging");
+    state = await this.getOverlayState();
+    Assert.equal(state, "dragging", "The overlay is in the dragging state");
+
+    mouse.up(endX, endY);
+
+    await this.waitForStateChange("selected");
+    state = await this.getOverlayState();
+    Assert.equal(state, "selected", "The overlay is in the selected state");
+
+    this.endX = endX;
+    this.endY = endY;
+  }
+
+  async scrollContentWindow(x, y) {
+    await ContentTask.spawn(this.browser, [x, y], async ([xPos, yPos]) => {
+      content.window.scroll(xPos, yPos);
+    });
+  }
+
+  clickDownloadButton() {
+    mouse.click(this.endX - 60, this.endY + 30);
+  }
+
+  clickCopyButton(overrideX = null, overrideY = null) {
+    // click copy button with last x and y position from dragOverlay
+    // the middle of the copy button is last X - 163 and last Y + 30.
+    // Ex. 500, 500 would be 336, 530
+    if (overrideX && overrideY) {
+      mouse.click(overrideX - 166, overrideY + 30);
+    } else {
+      mouse.click(this.endX - 166, this.endY + 30);
+    }
+  }
+
+  clickCancelButton() {
+    // click copy button with last x and y position from dragOverlay
+    // the middle of the copy button is last X - 230 and last Y + 30.
+    // Ex. 500, 500 would be 270, 530
+    mouse.click(this.endX - 230, this.endY + 30);
+  }
+
+  async zoomBrowser(zoom) {
+    await SpecialPowers.spawn(this.browser, [zoom], zoomLevel => {
+      const { Layout } = ChromeUtils.import(
+        "chrome://mochitests/content/browser/accessible/tests/browser/Layout.jsm"
+      );
+      Layout.zoomDocument(content.document, zoomLevel);
+    });
+  }
+
+  /**
+   * Gets the dialog box
+   * @returns The dialog box
+   */
+  getDialog() {
+    let currDialogBox = this.browser.tabDialogBox;
+    let manager = currDialogBox.getTabDialogManager();
+    let dialogs = manager.hasDialogs && manager.dialogs;
+    return dialogs[0];
+  }
+
+  assertPanelVisible() {
+    let panel = gBrowser.selectedBrowser.ownerDocument.querySelector(
+      "#screenshotsPagePanel"
+    );
+    Assert.ok(
+      BrowserTestUtils.is_visible(panel),
+      "Screenshots panel is visible"
+    );
+  }
+
+  assertPanelNotVisible() {
+    let panel = gBrowser.selectedBrowser.ownerDocument.querySelector(
+      "#screenshotsPagePanel"
+    );
+    Assert.ok(
+      BrowserTestUtils.is_hidden(panel),
+      "Screenshots panel is not visible"
+    );
+  }
+
+  /**
+   * Copied from screenshots extension
+   * Returns a promise that resolves when the clipboard data has changed
+   * Otherwise rejects
+   */
+  waitForRawClipboardChange() {
+    const initialClipboardData = Date.now().toString();
+    SpecialPowers.clipboardCopyString(initialClipboardData);
+
+    let promiseChanged = TestUtils.waitForCondition(() => {
+      let data;
+      try {
+        data = getRawClipboardData("image/png");
+      } catch (e) {
+        console.log("Failed to get image/png clipboard data:", e);
+        return false;
+      }
+      return data && initialClipboardData !== data;
+    });
+    return promiseChanged;
+  }
+
+  /**
+   * Gets the client and scroll demensions on the window
+   * @returns { Object }
+   *   clientHeight The visible height
+   *   clientWidth The visible width
+   *   scrollHeight The scrollable height
+   *   scrollWidth The scrollable width
+   */
+  getContentDimensions() {
+    return SpecialPowers.spawn(this.browser, [], async function() {
+      let doc = content.document.documentElement;
+      return {
+        clientHeight: doc.clientHeight,
+        clientWidth: doc.clientWidth,
+        scrollHeight: doc.scrollHeight,
+        scrollWidth: doc.scrollWidth,
+      };
+    });
+  }
+
+  getSelectionLayerDimensions() {
+    return ContentTask.spawn(this.browser, null, async () => {
+      let screenshotsChild = content.windowGlobalChild.getActor(
+        "ScreenshotsComponent"
+      );
+      Assert.ok(screenshotsChild._overlay._initialized, "The overlay exists");
+
+      return screenshotsChild._overlay.screenshotsContainer.getSelectionLayerDimensions();
+    });
+  }
+
+  getSelectionBoxDimensions() {
+    return ContentTask.spawn(this.browser, null, async () => {
+      let screenshotsChild = content.windowGlobalChild.getActor(
+        "ScreenshotsComponent"
+      );
+      Assert.ok(screenshotsChild._overlay._initialized, "The overlay exists");
+
+      return screenshotsChild._overlay.screenshotsContainer.getSelectionLayerBoxDimensions();
+    });
+  }
+
+  /**
+   * Clicks an element on the screen
+   * @param eleSel The selector for the element to click
+   */
+  async clickUIElement(eleSel) {
+    await SpecialPowers.spawn(this.browser, [eleSel], async function(
+      eleSelector
+    ) {
+      info(
+        `in clickScreenshotsUIElement content function, eleSelector: ${eleSelector}`
+      );
+      const EventUtils = ContentTaskUtils.getEventUtils(content);
+      let ele = content.document.querySelector(eleSelector);
+      info(`Found the thing to click: ${eleSelector}: ${!!ele}`);
+
+      EventUtils.synthesizeMouseAtCenter(ele, {});
+      // wait a frame for the screenshots UI to finish any init
+      await new content.Promise(res => content.requestAnimationFrame(res));
+    });
+  }
+
+  /**
+   * Copied from screenshots extension
+   * A helper that returns the size of the image that was just put into the clipboard by the
+   * :screenshot command.
+   * @return The {width, height, color} dimension and color object.
+   */
+  async getImageSizeAndColorFromClipboard() {
+    let flavor = "image/png";
+    let image = getRawClipboardData(flavor);
+    ok(image, "screenshot data exists on the clipboard");
+
+    // Due to the differences in how images could be stored in the clipboard the
+    // checks below are needed. The clipboard could already provide the image as
+    // byte streams or as image container. If it's not possible obtain a
+    // byte stream, the function throws.
+
+    if (image instanceof Ci.imgIContainer) {
+      image = Cc["@mozilla.org/image/tools;1"]
+        .getService(Ci.imgITools)
+        .encodeImage(image, flavor);
+    }
+
+    if (!(image instanceof Ci.nsIInputStream)) {
+      throw new Error("Unable to read image data");
+    }
+
+    const binaryStream = Cc["@mozilla.org/binaryinputstream;1"].createInstance(
+      Ci.nsIBinaryInputStream
+    );
+    binaryStream.setInputStream(image);
+    const available = binaryStream.available();
+    const buffer = new ArrayBuffer(available);
+    is(
+      binaryStream.readArrayBuffer(available, buffer),
+      available,
+      "Read expected amount of data"
+    );
+
+    // We are going to load the image in the content page to measure its size.
+    // We don't want to insert the image directly in the browser's document
+    // which could mess all sorts of things up
+    return SpecialPowers.spawn(this.browser, [buffer], async function(_buffer) {
+      const img = content.document.createElement("img");
+      const loaded = new Promise(r => {
+        img.addEventListener("load", r, { once: true });
+      });
+      const url = content.URL.createObjectURL(
+        new Blob([_buffer], { type: "image/png" })
+      );
+
+      img.src = url;
+      content.document.documentElement.appendChild(img);
+
+      info("Waiting for the clipboard image to load in the content page");
+      await loaded;
+
+      let canvas = content.document.createElementNS(
+        "http://www.w3.org/1999/xhtml",
+        "html:canvas"
+      );
+      let context = canvas.getContext("2d");
+      canvas.width = img.width;
+      canvas.height = img.height;
+      context.drawImage(img, 0, 0);
+      let topLeft = context.getImageData(0, 0, 1, 1);
+      let topRight = context.getImageData(img.width - 1, 0, 1, 1);
+      let bottomLeft = context.getImageData(0, img.height - 1, 1, 1);
+      let bottomRight = context.getImageData(
+        img.width - 1,
+        img.height - 1,
+        1,
+        1
+      );
+
+      img.remove();
+      content.URL.revokeObjectURL(url);
+
+      return {
+        width: img.width,
+        height: img.height,
+        color: {
+          topLeft: topLeft.data,
+          topRight: topRight.data,
+          bottomLeft: bottomLeft.data,
+          bottomRight: bottomRight.data,
+        },
+      };
+    });
+  }
+}
+
+/**
+ * Get the raw clipboard data
+ * @param flavor Type of data to get from clipboard
+ * @returns The data from the clipboard
+ */
+function getRawClipboardData(flavor) {
+  const whichClipboard = Services.clipboard.kGlobalClipboard;
+  const xferable = Cc["@mozilla.org/widget/transferable;1"].createInstance(
+    Ci.nsITransferable
+  );
+  xferable.init(null);
+  xferable.addDataFlavor(flavor);
+  Services.clipboard.getData(xferable, whichClipboard);
+  let data = {};
+  try {
+    // xferable.getTransferData(flavor, data);
+    xferable.getAnyTransferData({}, data);
+    info(JSON.stringify(data, null, 2));
+  } catch (e) {
+    info(e);
+  }
+  data = data.value || null;
+  return data;
+}
+
+/**
+ * Synthesize a mouse event on an element, after ensuring that it is visible
+ * in the viewport.
+ *
+ * @param {String} selector: The node selector to get the node target for the event.
+ * @param {number} x
+ * @param {number} y
+ * @param {object} options: Options that will be passed to BrowserTestUtils.synthesizeMouse
+ */
+async function safeSynthesizeMouseEventInContentPage(
+  selector,
+  x,
+  y,
+  options = {}
+) {
+  let context = gBrowser.selectedBrowser.browsingContext;
+  BrowserTestUtils.synthesizeMouse(selector, x, y, options, context);
+}
+
+add_setup(async () => {
+  CustomizableUI.addWidgetToArea(
+    "screenshot-button",
+    CustomizableUI.AREA_NAVBAR
+  );
+  let screenshotBtn = document.getElementById("screenshot-button");
+  Assert.ok(screenshotBtn, "The screenshots button was added to the nav bar");
+});
+
+function getContentDevicePixelRatio(browser) {
+  return SpecialPowers.spawn(browser, [], async function() {
+    return content.window.devicePixelRatio;
+  });
+}
diff --git a/browser/components/screenshots/tests/browser/short-test-page.html b/browser/components/screenshots/tests/browser/short-test-page.html
new file mode 100644
index 0000000000..4ba4f10394
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/short-test-page.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Screenshots</title>
+</head>
+<body style="height:100px; width:100px;">
+</body>
+</html>
diff --git a/browser/components/screenshots/tests/browser/test-page.html b/browser/components/screenshots/tests/browser/test-page.html
new file mode 100644
index 0000000000..9f9ae8d652
--- /dev/null
+++ b/browser/components/screenshots/tests/browser/test-page.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Screenshots</title>
+</head>
+<body style="height:4000px; width:4000px; background-repeat: no-repeat; background-size: 4008px 4016px; background-color: rgb(111, 111, 111); background-image:linear-gradient(to right, transparent 50%, rgba(0, 200, 200, 0.5) 50%),linear-gradient(to bottom, transparent 50%, rgba(100, 0, 100, 0.5) 50%);">
+</body>
+</html>