diff options
Diffstat (limited to 'browser/components/screenshots')
49 files changed, 9587 insertions, 0 deletions
diff --git a/browser/components/screenshots/ScreenshotsHelperChild.sys.mjs b/browser/components/screenshots/ScreenshotsHelperChild.sys.mjs new file mode 100644 index 0000000000..550c3fb13c --- /dev/null +++ b/browser/components/screenshots/ScreenshotsHelperChild.sys.mjs @@ -0,0 +1,47 @@ +/* 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 { + getBestRectForElement, + getElementFromPoint, +} from "chrome://browser/content/screenshots/overlayHelpers.mjs"; + +/** + * This class is used to get the dimensions of hovered elements within iframes. + * The main content process cannot get the dimensions of elements within + * iframes so a message will be send to this actor to get the dimensions of the + * element for a given point inside the iframe. + */ +export class ScreenshotsHelperChild extends JSWindowActorChild { + receiveMessage(message) { + if (message.name === "ScreenshotsHelper:GetElementRectFromPoint") { + return this.getBestElementRectFromPoint(message.data); + } + return null; + } + + async getBestElementRectFromPoint(data) { + let { x, y } = data; + + x -= this.contentWindow.mozInnerScreenX; + y -= this.contentWindow.mozInnerScreenY; + + let { ele, rect } = await getElementFromPoint(x, y, this.document); + + if (!rect) { + rect = getBestRectForElement(ele, this.document); + } + + if (rect) { + rect = { + left: rect.left + this.contentWindow.mozInnerScreenX, + right: rect.right + this.contentWindow.mozInnerScreenX, + top: rect.top + this.contentWindow.mozInnerScreenY, + bottom: rect.bottom + this.contentWindow.mozInnerScreenY, + }; + } + + return rect; + } +} diff --git a/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs b/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs new file mode 100644 index 0000000000..5d96a46c88 --- /dev/null +++ b/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs @@ -0,0 +1,1593 @@ +/* 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 + * anonymous content container (see dom/webidl/Document.webidl). + * + * This container gets cleared automatically when the document navigates. + * + * To retrieve the AnonymousContent instance, use the `content` getter. + */ + +/* + * Below are the states of the screenshots overlay + * 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 + */ + +import { + setMaxDetectHeight, + setMaxDetectWidth, + getBestRectForElement, + getElementFromPoint, + Region, + WindowDimensions, +} from "chrome://browser/content/screenshots/overlayHelpers.mjs"; + +import { AppConstants } from "resource://gre/modules/AppConstants.sys.mjs"; +import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs"; + +const STATES = { + CROSSHAIRS: "crosshairs", + DRAGGING_READY: "draggingReady", + DRAGGING: "dragging", + SELECTED: "selected", + RESIZING: "resizing", +}; + +const lazy = {}; + +ChromeUtils.defineLazyGetter(lazy, "overlayLocalization", () => { + return new Localization(["browser/screenshotsOverlay.ftl"], true); +}); + +const SCREENSHOTS_LAST_SAVED_METHOD_PREF = + "screenshots.browser.component.last-saved-method"; + +XPCOMUtils.defineLazyPreferenceGetter( + lazy, + "SCREENSHOTS_LAST_SAVED_METHOD", + SCREENSHOTS_LAST_SAVED_METHOD_PREF, + "download" +); + +const REGION_CHANGE_THRESHOLD = 5; +const SCROLL_BY_EDGE = 20; + +export class ScreenshotsOverlay { + #content; + #initialized = false; + #state = ""; + #moverId; + #cachedEle; + #lastPageX; + #lastPageY; + #lastClientX; + #lastClientY; + #previousDimensions; + #methodsUsed; + + get markup() { + 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" }, + ]); + + return ` + <template> + <link rel="stylesheet" href="chrome://browser/content/screenshots/overlay/overlay.css" /> + <div id="screenshots-component"> + <div id="preview-container" hidden> + <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> + <button class="screenshots-button ghost-button" id="screenshots-cancel-button">${cancel.value}</button> + </div> + <div id="hover-highlight" hidden></div> + <div id="selection-container" hidden> + <div id="top-background" class="bghighlight"></div> + <div id="bottom-background" class="bghighlight"></div> + <div id="left-background" class="bghighlight"></div> + <div id="right-background" class="bghighlight"></div> + <div id="highlight" class="highlight" tabindex="0"> + <div id="mover-topLeft" class="mover-target direction-topLeft" tabindex="0"> + <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" tabindex="0"> + <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" tabindex="0"> + <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" tabindex="0"> + <div class="mover"></div> + </div> + <div id="selection-size-container"> + <span id="selection-size"></span> + </div> + </div> + </div> + <div id="buttons-container" hidden> + <div class="buttons-wrapper"> + <button id="cancel" class="screenshots-button" title="${cancel.value}" aria-label="${cancel.value}" tabindex="0"><img/></button> + <button id="copy" class="screenshots-button" title="${copy.value}" aria-label="${copy.value}" tabindex="0"><img/>${copy.value}</button> + <button id="download" class="screenshots-button primary" title="${download.value}" aria-label="${download.value}" tabindex="0"><img/>${download.value}</button> + </div> + </div> + </div> + </template>`; + } + + get fragment() { + if (!this.overlayTemplate) { + let parser = new DOMParser(); + let doc = parser.parseFromString(this.markup, "text/html"); + this.overlayTemplate = this.document.importNode( + doc.querySelector("template"), + true + ); + } + let fragment = this.overlayTemplate.content.cloneNode(true); + return fragment; + } + + get initialized() { + return this.#initialized; + } + + get state() { + return this.#state; + } + + get methodsUsed() { + return this.#methodsUsed; + } + + constructor(contentDocument) { + this.document = contentDocument; + this.window = contentDocument.ownerGlobal; + + this.windowDimensions = new WindowDimensions(); + this.selectionRegion = new Region(this.windowDimensions); + this.hoverElementRegion = new Region(this.windowDimensions); + this.resetMethodsUsed(); + } + + get content() { + if (!this.#content || Cu.isDeadWrapper(this.#content)) { + return null; + } + return this.#content; + } + + getElementById(id) { + return this.content.root.getElementById(id); + } + + async initialize() { + if (this.initialized) { + return; + } + + this.windowDimensions.reset(); + + this.#content = this.document.insertAnonymousContent(); + this.#content.root.appendChild(this.fragment); + + this.initializeElements(); + await this.updateWindowDimensions(); + + this.#setState(STATES.CROSSHAIRS); + + this.#initialized = true; + } + + /** + * Get all the elements that will be used. + */ + initializeElements() { + this.previewCancelButton = this.getElementById("screenshots-cancel-button"); + this.cancelButton = this.getElementById("cancel"); + this.copyButton = this.getElementById("copy"); + this.downloadButton = this.getElementById("download"); + + this.previewContainer = this.getElementById("preview-container"); + this.hoverElementContainer = this.getElementById("hover-highlight"); + this.selectionContainer = this.getElementById("selection-container"); + this.buttonsContainer = this.getElementById("buttons-container"); + this.screenshotsContainer = this.getElementById("screenshots-component"); + + this.leftEye = this.getElementById("left-eye"); + this.rightEye = this.getElementById("right-eye"); + + this.leftBackgroundEl = this.getElementById("left-background"); + this.topBackgroundEl = this.getElementById("top-background"); + this.rightBackgroundEl = this.getElementById("right-background"); + this.bottomBackgroundEl = this.getElementById("bottom-background"); + this.highlightEl = this.getElementById("highlight"); + + this.topLeftMover = this.getElementById("mover-topLeft"); + this.topRightMover = this.getElementById("mover-topRight"); + this.bottomLeftMover = this.getElementById("mover-bottomLeft"); + this.bottomRightMover = this.getElementById("mover-bottomRight"); + + this.selectionSize = this.getElementById("selection-size"); + } + + /** + * Removes all event listeners and removes the overlay from the Anonymous Content + */ + tearDown(options = {}) { + if (this.#content) { + if (!(options.doNotResetMethods === true)) { + this.resetMethodsUsed(); + } + try { + this.document.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; + this.#setState(""); + } + + resetMethodsUsed() { + this.#methodsUsed = { + element: 0, + region: 0, + move: 0, + resize: 0, + }; + } + + /** + * Returns the x and y coordinates of the event relative to both the + * viewport and the page. + * @param {Event} event The event + * @returns + * { + * clientX: The x position relative to the viewport + * clientY: The y position relative to the viewport + * pageX: The x position relative to the entire page + * pageY: The y position relative to the entire page + * } + */ + getCoordinatesFromEvent(event) { + const { clientX, clientY, pageX, pageY } = event; + + return { clientX, clientY, pageX, pageY }; + } + + handleEvent(event) { + if (event.button > 0) { + return; + } + + switch (event.type) { + case "click": + this.handleClick(event); + break; + case "pointerdown": + this.handlePointerDown(event); + break; + case "pointermove": + this.handlePointerMove(event); + break; + case "pointerup": + this.handlePointerUp(event); + break; + case "keydown": + this.handleKeyDown(event); + break; + case "keyup": + this.handleKeyUp(event); + break; + } + } + + handleClick(event) { + switch (event.originalTarget.id) { + case "screenshots-cancel-button": + case "cancel": + this.maybeCancelScreenshots(); + break; + case "copy": + this.#dispatchEvent("Screenshots:Copy", { + region: this.selectionRegion.dimensions, + }); + break; + case "download": + this.#dispatchEvent("Screenshots:Download", { + region: this.selectionRegion.dimensions, + }); + break; + } + } + + maybeCancelScreenshots() { + if (this.#state === STATES.CROSSHAIRS) { + this.#dispatchEvent("Screenshots:Close", { + reason: "overlay_cancel", + }); + } else { + this.#setState(STATES.CROSSHAIRS); + } + } + + /** + * Handles the pointerdown event depending on the state. + * Early return when a pointer down happens on a button. + * @param {Event} event The pointerown event + */ + handlePointerDown(event) { + if ( + event.originalTarget.id === "screenshots-cancel-button" || + event.originalTarget.closest("#buttons-container") === + this.buttonsContainer + ) { + event.stopPropagation(); + return; + } + + const { pageX, pageY } = this.getCoordinatesFromEvent(event); + + switch (this.#state) { + case STATES.CROSSHAIRS: { + this.crosshairsDragStart(pageX, pageY); + break; + } + case STATES.SELECTED: { + this.selectedDragStart(pageX, pageY, event.originalTarget.id); + break; + } + } + } + + /** + * Handles the pointermove event depending on the state + * @param {Event} event The pointermove event + */ + handlePointerMove(event) { + const { pageX, pageY, clientX, clientY } = + this.getCoordinatesFromEvent(event); + + switch (this.#state) { + case STATES.CROSSHAIRS: { + this.crosshairsMove(clientX, clientY); + break; + } + case STATES.DRAGGING_READY: { + this.draggingReadyDrag(pageX, pageY); + break; + } + case STATES.DRAGGING: { + this.draggingDrag(pageX, pageY); + break; + } + case STATES.RESIZING: { + this.resizingDrag(pageX, pageY); + break; + } + } + } + + /** + * Handles the pointerup event depending on the state + * @param {Event} event The pointerup event + */ + handlePointerUp(event) { + const { pageX, pageY, clientX, clientY } = + this.getCoordinatesFromEvent(event); + + switch (this.#state) { + case STATES.DRAGGING_READY: { + this.draggingReadyDragEnd(pageX - clientX, pageY - clientY); + break; + } + case STATES.DRAGGING: { + this.draggingDragEnd(pageX, pageY, event.originalTarget.id); + break; + } + case STATES.RESIZING: { + this.resizingDragEnd(pageX, pageY); + break; + } + } + } + + /** + * Handles when a keydown occurs in the screenshots component. + * @param {Event} event The keydown event + */ + handleKeyDown(event) { + switch (event.key) { + case "ArrowLeft": + this.handleArrowLeftKeyDown(event); + break; + case "ArrowUp": + this.handleArrowUpKeyDown(event); + break; + case "ArrowRight": + this.handleArrowRightKeyDown(event); + break; + case "ArrowDown": + this.handleArrowDownKeyDown(event); + break; + case "Tab": + this.maybeLockFocus(event); + break; + case "Escape": + this.maybeCancelScreenshots(); + break; + } + } + + /** + * Gets the accel key depending on the platform. + * metaKey for macOS. ctrlKey for Windows and Linux. + * @param {Event} event The keydown event + * @returns {Boolean} True if the accel key is pressed, false otherwise. + */ + getAccelKey(event) { + if (AppConstants.platform === "macosx") { + return event.metaKey; + } + return event.ctrlKey; + } + + /** + * Move the region or its left or right side to the left. + * Just the arrow key will move the region by 1px. + * Arrow key + shift will move the region by 10px. + * Arrow key + control/meta will move to the edge of the window. + * @param {Event} event The keydown event + */ + handleArrowLeftKeyDown(event) { + switch (event.originalTarget.id) { + case "highlight": + if (this.getAccelKey(event)) { + let width = this.selectionRegion.width; + this.selectionRegion.left = this.windowDimensions.scrollX; + this.selectionRegion.right = this.windowDimensions.scrollX + width; + break; + } + + this.selectionRegion.right -= 10 ** event.shiftKey; + // eslint-disable-next-line no-fallthrough + case "mover-topLeft": + case "mover-bottomLeft": + if (this.getAccelKey(event)) { + this.selectionRegion.left = this.windowDimensions.scrollX; + break; + } + + this.selectionRegion.left -= 10 ** event.shiftKey; + this.scrollIfByEdge( + this.selectionRegion.left, + this.windowDimensions.scrollY + this.windowDimensions.clientHeight / 2 + ); + break; + case "mover-topRight": + case "mover-bottomRight": + if (this.getAccelKey(event)) { + let left = this.selectionRegion.left; + this.selectionRegion.left = this.windowDimensions.scrollX; + this.selectionRegion.right = left; + if (event.originalTarget.id === "mover-topRight") { + this.topLeftMover.focus({ focusVisible: true }); + } else if (event.originalTarget.id === "mover-bottomRight") { + this.bottomLeftMover.focus({ focusVisible: true }); + } + break; + } + + this.selectionRegion.right -= 10 ** event.shiftKey; + if (this.selectionRegion.x1 >= this.selectionRegion.x2) { + this.selectionRegion.sortCoords(); + if (event.originalTarget.id === "mover-topRight") { + this.topLeftMover.focus({ focusVisible: true }); + } else if (event.originalTarget.id === "mover-bottomRight") { + this.bottomLeftMover.focus({ focusVisible: true }); + } + } + break; + default: + return; + } + + if (this.#state !== STATES.RESIZING) { + this.#setState(STATES.RESIZING); + } + + event.preventDefault(); + this.drawSelectionContainer(); + } + + /** + * Move the region or its top or bottom side upward. + * Just the arrow key will move the region by 1px. + * Arrow key + shift will move the region by 10px. + * Arrow key + control/meta will move to the edge of the window. + * @param {Event} event The keydown event + */ + handleArrowUpKeyDown(event) { + switch (event.originalTarget.id) { + case "highlight": + if (this.getAccelKey(event)) { + let height = this.selectionRegion.height; + this.selectionRegion.top = this.windowDimensions.scrollY; + this.selectionRegion.bottom = this.windowDimensions.scrollY + height; + break; + } + + this.selectionRegion.bottom -= 10 ** event.shiftKey; + // eslint-disable-next-line no-fallthrough + case "mover-topLeft": + case "mover-topRight": + if (this.getAccelKey(event)) { + this.selectionRegion.top = this.windowDimensions.scrollY; + break; + } + + this.selectionRegion.top -= 10 ** event.shiftKey; + this.scrollIfByEdge( + this.windowDimensions.scrollX + this.windowDimensions.clientWidth / 2, + this.selectionRegion.top + ); + break; + case "mover-bottomLeft": + case "mover-bottomRight": + if (this.getAccelKey(event)) { + let top = this.selectionRegion.top; + this.selectionRegion.top = this.windowDimensions.scrollY; + this.selectionRegion.bottom = top; + if (event.originalTarget.id === "mover-bottomLeft") { + this.topLeftMover.focus({ focusVisible: true }); + } else if (event.originalTarget.id === "mover-bottomRight") { + this.topRightMover.focus({ focusVisible: true }); + } + break; + } + + this.selectionRegion.bottom -= 10 ** event.shiftKey; + if (this.selectionRegion.y1 >= this.selectionRegion.y2) { + this.selectionRegion.sortCoords(); + if (event.originalTarget.id === "mover-bottomLeft") { + this.topLeftMover.focus({ focusVisible: true }); + } else if (event.originalTarget.id === "mover-bottomRight") { + this.topRightMover.focus({ focusVisible: true }); + } + } + break; + default: + return; + } + + if (this.#state !== STATES.RESIZING) { + this.#setState(STATES.RESIZING); + } + + event.preventDefault(); + this.drawSelectionContainer(); + } + + /** + * Move the region or its left or right side to the right. + * Just the arrow key will move the region by 1px. + * Arrow key + shift will move the region by 10px. + * Arrow key + control/meta will move to the edge of the window. + * @param {Event} event The keydown event + */ + handleArrowRightKeyDown(event) { + switch (event.originalTarget.id) { + case "highlight": + if (this.getAccelKey(event)) { + let width = this.selectionRegion.width; + let { scrollX, clientWidth } = this.windowDimensions.dimensions; + this.selectionRegion.right = scrollX + clientWidth; + this.selectionRegion.left = this.selectionRegion.right - width; + break; + } + + this.selectionRegion.left += 10 ** event.shiftKey; + // eslint-disable-next-line no-fallthrough + case "mover-topRight": + case "mover-bottomRight": + if (this.getAccelKey(event)) { + this.selectionRegion.right = + this.windowDimensions.scrollX + this.windowDimensions.clientWidth; + break; + } + + this.selectionRegion.right += 10 ** event.shiftKey; + this.scrollIfByEdge( + this.selectionRegion.right, + this.windowDimensions.scrollY + this.windowDimensions.clientHeight / 2 + ); + break; + case "mover-topLeft": + case "mover-bottomLeft": + if (this.getAccelKey(event)) { + let right = this.selectionRegion.right; + this.selectionRegion.right = + this.windowDimensions.scrollX + this.windowDimensions.clientWidth; + this.selectionRegion.left = right; + if (event.originalTarget.id === "mover-topLeft") { + this.topRightMover.focus({ focusVisible: true }); + } else if (event.originalTarget.id === "mover-bottomLeft") { + this.bottomRightMover.focus({ focusVisible: true }); + } + break; + } + + this.selectionRegion.left += 10 ** event.shiftKey; + if (this.selectionRegion.x1 >= this.selectionRegion.x2) { + this.selectionRegion.sortCoords(); + if (event.originalTarget.id === "mover-topLeft") { + this.topRightMover.focus({ focusVisible: true }); + } else if (event.originalTarget.id === "mover-bottomLeft") { + this.bottomRightMover.focus({ focusVisible: true }); + } + } + break; + default: + return; + } + + if (this.#state !== STATES.RESIZING) { + this.#setState(STATES.RESIZING); + } + + event.preventDefault(); + this.drawSelectionContainer(); + } + + /** + * Move the region or its top or bottom side downward. + * Just the arrow key will move the region by 1px. + * Arrow key + shift will move the region by 10px. + * Arrow key + control/meta will move to the edge of the window. + * @param {Event} event The keydown event + */ + handleArrowDownKeyDown(event) { + switch (event.originalTarget.id) { + case "highlight": + if (this.getAccelKey(event)) { + let height = this.selectionRegion.height; + let { scrollY, clientHeight } = this.windowDimensions.dimensions; + this.selectionRegion.bottom = scrollY + clientHeight; + this.selectionRegion.top = this.selectionRegion.bottom - height; + break; + } + + this.selectionRegion.top += 10 ** event.shiftKey; + // eslint-disable-next-line no-fallthrough + case "mover-bottomLeft": + case "mover-bottomRight": + if (this.getAccelKey(event)) { + this.selectionRegion.bottom = + this.windowDimensions.scrollY + this.windowDimensions.clientHeight; + break; + } + + this.selectionRegion.bottom += 10 ** event.shiftKey; + this.scrollIfByEdge( + this.windowDimensions.scrollX + this.windowDimensions.clientWidth / 2, + this.selectionRegion.bottom + ); + break; + case "mover-topLeft": + case "mover-topRight": + if (this.getAccelKey(event)) { + let bottom = this.selectionRegion.bottom; + this.selectionRegion.bottom = + this.windowDimensions.scrollY + this.windowDimensions.clientHeight; + this.selectionRegion.top = bottom; + if (event.originalTarget.id === "mover-topLeft") { + this.bottomLeftMover.focus({ focusVisible: true }); + } else if (event.originalTarget.id === "mover-topRight") { + this.bottomRightMover.focus({ focusVisible: true }); + } + break; + } + + this.selectionRegion.top += 10 ** event.shiftKey; + if (this.selectionRegion.y1 >= this.selectionRegion.y2) { + this.selectionRegion.sortCoords(); + if (event.originalTarget.id === "mover-topLeft") { + this.bottomLeftMover.focus({ focusVisible: true }); + } else if (event.originalTarget.id === "mover-topRight") { + this.bottomRightMover.focus({ focusVisible: true }); + } + } + break; + default: + return; + } + + if (this.#state !== STATES.RESIZING) { + this.#setState(STATES.RESIZING); + } + + event.preventDefault(); + this.drawSelectionContainer(); + } + + /** + * We lock focus to the overlay when a region is selected. + * Can still escape with shift + F6. + * @param {Event} event The keydown event + */ + maybeLockFocus(event) { + if (this.#state !== STATES.SELECTED) { + return; + } + + event.preventDefault(); + if (event.originalTarget.id === "highlight" && event.shiftKey) { + this.downloadButton.focus({ focusVisible: true }); + } else if (event.originalTarget.id === "download" && !event.shiftKey) { + this.highlightEl.focus({ focusVisible: true }); + } else { + // The content document can listen for keydown events and prevent moving + // focus so we manually move focus to the next element here. + let direction = event.shiftKey + ? Services.focus.MOVEFOCUS_BACKWARD + : Services.focus.MOVEFOCUS_FORWARD; + Services.focus.moveFocus( + this.window, + null, + direction, + Services.focus.FLAG_BYKEY + ); + } + } + + /** + * Set the focus to the most recent saved method. + * This will default to the download button. + */ + setFocusToActionButton() { + if (lazy.SCREENSHOTS_LAST_SAVED_METHOD === "copy") { + this.copyButton.focus({ focusVisible: true }); + } else { + this.downloadButton.focus({ focusVisible: true }); + } + } + + /** + * Handles when a keydown occurs in the screenshots component. + * All we need to do on keyup is set the state to selected. + * @param {Event} event The keydown event + */ + handleKeyUp(event) { + switch (event.key) { + case "ArrowLeft": + case "ArrowUp": + case "ArrowRight": + case "ArrowDown": + switch (event.originalTarget.id) { + case "highlight": + case "mover-bottomLeft": + case "mover-bottomRight": + case "mover-topLeft": + case "mover-topRight": + event.preventDefault(); + this.#setState(STATES.SELECTED); + break; + } + break; + } + } + + /** + * Dispatch a custom event to the ScreenshotsComponentChild actor + * @param {String} eventType The name of the event + * @param {object} detail Extra details to send to the child actor + */ + #dispatchEvent(eventType, detail) { + this.window.dispatchEvent( + new CustomEvent(eventType, { + bubbles: true, + detail, + }) + ); + } + + /** + * Set a new state for the overlay + * @param {String} newState + */ + #setState(newState) { + if (this.#state === STATES.SELECTED && newState === STATES.CROSSHAIRS) { + this.#dispatchEvent("Screenshots:RecordEvent", { + eventName: "started", + reason: "overlay_retry", + }); + } + if (newState !== this.#state) { + this.#dispatchEvent("Screenshots:OverlaySelection", { + hasSelection: newState == STATES.SELECTED, + }); + } + this.#state = newState; + + switch (this.#state) { + case STATES.CROSSHAIRS: { + this.crosshairsStart(); + break; + } + case STATES.DRAGGING_READY: { + this.draggingReadyStart(); + break; + } + case STATES.DRAGGING: { + this.draggingStart(); + break; + } + case STATES.SELECTED: { + this.selectedStart(); + break; + } + case STATES.RESIZING: { + this.resizingStart(); + break; + } + } + } + + /** + * Hide hover element, selection and buttons containers. + * Show the preview container and the panel. + * This is the initial state of the overlay. + */ + crosshairsStart() { + this.hideHoverElementContainer(); + this.hideSelectionContainer(); + this.hideButtonsContainer(); + this.showPreviewContainer(); + this.#dispatchEvent("Screenshots:ShowPanel"); + this.#previousDimensions = null; + this.#cachedEle = null; + this.hoverElementRegion.resetDimensions(); + } + + /** + * Hide the panel because we have started dragging. + */ + draggingReadyStart() { + this.#dispatchEvent("Screenshots:HidePanel"); + } + + /** + * Hide the preview, hover element and buttons containers. + * Show the selection container. + */ + draggingStart() { + this.hidePreviewContainer(); + this.hideButtonsContainer(); + this.hideHoverElementContainer(); + this.drawSelectionContainer(); + } + + /** + * Hide the preview and hover element containers. + * Draw the selection and buttons containers. + */ + selectedStart() { + this.hidePreviewContainer(); + this.hideHoverElementContainer(); + this.drawSelectionContainer(); + this.drawButtonsContainer(); + } + + /** + * Hide the buttons container. + * Store the width and height of the current selected region. + * The dimensions will be used when moving the region along the edge of the + * page and for recording telemetry. + */ + resizingStart() { + this.hideButtonsContainer(); + let { width, height } = this.selectionRegion.dimensions; + this.#previousDimensions = { width, height }; + } + + /** + * Dragging has started so we set the initial selection region and set the + * state to draggingReady. + * @param {Number} pageX The x position relative to the page + * @param {Number} pageY The y position relative to the page + */ + crosshairsDragStart(pageX, pageY) { + this.selectionRegion.dimensions = { + left: pageX, + top: pageY, + right: pageX, + bottom: pageY, + }; + + this.#setState(STATES.DRAGGING_READY); + } + + /** + * If the background is clicked we set the state to crosshairs + * otherwise set the state to resizing + * @param {Number} pageX The x position relative to the page + * @param {Number} pageY The y position relative to the page + * @param {String} targetId The id of the event target + */ + selectedDragStart(pageX, pageY, targetId) { + if (targetId === this.screenshotsContainer.id) { + this.#setState(STATES.CROSSHAIRS); + return; + } + this.#moverId = targetId; + this.#lastPageX = pageX; + this.#lastPageY = pageY; + + this.#setState(STATES.RESIZING); + } + + /** + * Draw the eyes in the preview container and find the element currently + * being hovered. + * @param {Number} clientX The x position relative to the viewport + * @param {Number} clientY The y position relative to the viewport + */ + crosshairsMove(clientX, clientY) { + this.drawPreviewEyes(clientX, clientY); + + this.handleElementHover(clientX, clientY); + } + + /** + * Set the selection region dimensions and if the region is at least 40 + * pixels diagnally in distance, set the state to dragging. + * @param {Number} pageX The x position relative to the page + * @param {Number} pageY The y position relative to the page + */ + draggingReadyDrag(pageX, pageY) { + this.selectionRegion.dimensions = { + right: pageX, + bottom: pageY, + }; + + if (this.selectionRegion.distance > 40) { + this.#setState(STATES.DRAGGING); + } + } + + /** + * Scroll if along the edge of the viewport, update the selection region + * dimensions and draw the selection container. + * @param {Number} pageX The x position relative to the page + * @param {Number} pageY The y position relative to the page + */ + draggingDrag(pageX, pageY) { + this.scrollIfByEdge(pageX, pageY); + this.selectionRegion.dimensions = { + right: pageX, + bottom: pageY, + }; + + this.drawSelectionContainer(); + } + + /** + * Resize the selection region depending on the mover that started the resize. + * @param {Number} pageX The x position relative to the page + * @param {Number} pageY The y position relative to the page + */ + resizingDrag(pageX, pageY) { + this.scrollIfByEdge(pageX, pageY); + switch (this.#moverId) { + case "mover-topLeft": { + this.selectionRegion.dimensions = { + left: pageX, + top: pageY, + }; + break; + } + case "mover-top": { + this.selectionRegion.dimensions = { top: pageY }; + break; + } + case "mover-topRight": { + this.selectionRegion.dimensions = { + top: pageY, + right: pageX, + }; + break; + } + case "mover-right": { + this.selectionRegion.dimensions = { + right: pageX, + }; + break; + } + case "mover-bottomRight": { + this.selectionRegion.dimensions = { + right: pageX, + bottom: pageY, + }; + break; + } + case "mover-bottom": { + this.selectionRegion.dimensions = { + bottom: pageY, + }; + break; + } + case "mover-bottomLeft": { + this.selectionRegion.dimensions = { + left: pageX, + bottom: pageY, + }; + break; + } + case "mover-left": { + this.selectionRegion.dimensions = { left: pageX }; + break; + } + case "highlight": { + let diffX = this.#lastPageX - pageX; + let diffY = this.#lastPageY - pageY; + + let newLeft; + let newRight; + let newTop; + let newBottom; + + // Unpack dimensions to use here + let { + left: boxLeft, + top: boxTop, + right: boxRight, + bottom: boxBottom, + width: boxWidth, + height: boxHeight, + } = this.selectionRegion.dimensions; + let { scrollWidth, scrollHeight } = this.windowDimensions.dimensions; + + // wait until all 4 if elses have completed before setting box dimensions + if (boxWidth <= this.#previousDimensions.width && boxLeft === 0) { + newLeft = boxRight - this.#previousDimensions.width; + } else { + newLeft = boxLeft; + } + + if ( + boxWidth <= this.#previousDimensions.width && + boxRight === scrollWidth + ) { + newRight = boxLeft + this.#previousDimensions.width; + } else { + newRight = boxRight; + } + + if (boxHeight <= this.#previousDimensions.height && boxTop === 0) { + newTop = boxBottom - this.#previousDimensions.height; + } else { + newTop = boxTop; + } + + if ( + boxHeight <= this.#previousDimensions.height && + boxBottom === scrollHeight + ) { + newBottom = boxTop + this.#previousDimensions.height; + } else { + newBottom = boxBottom; + } + + this.selectionRegion.dimensions = { + left: newLeft - diffX, + top: newTop - diffY, + right: newRight - diffX, + bottom: newBottom - diffY, + }; + + this.#lastPageX = pageX; + this.#lastPageY = pageY; + break; + } + } + this.drawSelectionContainer(); + } + + /** + * If there is a valid element region, update and draw the selection + * container and set the state to selected. + * Otherwise set the state to crosshairs. + */ + draggingReadyDragEnd() { + if (this.hoverElementRegion.isRegionValid) { + this.selectionRegion.dimensions = this.hoverElementRegion.dimensions; + this.#setState(STATES.SELECTED); + this.setFocusToActionButton(); + this.#dispatchEvent("Screenshots:RecordEvent", { + eventName: "selected", + reason: "element", + }); + this.#methodsUsed.element += 1; + } else { + this.#setState(STATES.CROSSHAIRS); + } + } + + /** + * Update the selection region dimensions and set the state to selected. + * @param {Number} pageX The x position relative to the page + * @param {Number} pageY The y position relative to the page + */ + draggingDragEnd(pageX, pageY) { + this.selectionRegion.dimensions = { + right: pageX, + bottom: pageY, + }; + this.selectionRegion.sortCoords(); + this.#setState(STATES.SELECTED); + this.maybeRecordRegionSelected(); + this.#methodsUsed.region += 1; + this.setFocusToActionButton(); + } + + /** + * Update the selection region dimensions by calling `resizingDrag` and set + * the state to selected. + * @param {Number} pageX The x position relative to the page + * @param {Number} pageY The y position relative to the page + */ + resizingDragEnd(pageX, pageY) { + this.resizingDrag(pageX, pageY); + this.selectionRegion.sortCoords(); + this.#setState(STATES.SELECTED); + this.setFocusToActionButton(); + this.maybeRecordRegionSelected(); + if (this.#moverId === "highlight") { + this.#methodsUsed.move += 1; + } else { + this.#methodsUsed.resize += 1; + } + } + + maybeRecordRegionSelected() { + let { width, height } = this.selectionRegion.dimensions; + + if ( + !this.#previousDimensions || + (Math.abs(this.#previousDimensions.width - width) > + REGION_CHANGE_THRESHOLD && + Math.abs(this.#previousDimensions.height - height) > + REGION_CHANGE_THRESHOLD) + ) { + this.#dispatchEvent("Screenshots:RecordEvent", { + eventName: "selected", + reason: "region_selection", + }); + } + this.#previousDimensions = { width, height }; + } + + /** + * Draw the preview eyes pointer towards the mouse. + * @param {Number} clientX The x position relative to the viewport + * @param {Number} clientY The y position relative to the viewport + */ + drawPreviewEyes(clientX, clientY) { + let { clientWidth, clientHeight } = this.windowDimensions.dimensions; + const xpos = Math.floor((10 * (clientX - clientWidth / 2)) / clientWidth); + const ypos = Math.floor((10 * (clientY - clientHeight / 2)) / clientHeight); + const move = `transform:translate(${xpos}px, ${ypos}px);`; + this.leftEye.style = move; + this.rightEye.style = move; + } + + showPreviewContainer() { + this.previewContainer.hidden = false; + } + + hidePreviewContainer() { + this.previewContainer.hidden = true; + } + + updatePreviewContainer() { + let { clientWidth, clientHeight } = this.windowDimensions.dimensions; + this.previewContainer.style.width = `${clientWidth}px`; + this.previewContainer.style.height = `${clientHeight}px`; + } + + /** + * Update the screenshots overlay container based on the window dimensions. + */ + updateScreenshotsOverlayContainer() { + let { scrollWidth, scrollHeight } = this.windowDimensions.dimensions; + this.screenshotsContainer.style = `width:${scrollWidth}px;height:${scrollHeight}px;`; + } + + showScreenshotsOverlayContainer() { + this.screenshotsContainer.hidden = false; + } + + hideScreenshotsOverlayContainer() { + this.screenshotsContainer.hidden = true; + } + + /** + * Draw the hover element container based on the hover element region. + */ + drawHoverElementRegion() { + this.showHoverElementContainer(); + + let { top, left, width, height } = this.hoverElementRegion.dimensions; + + this.hoverElementContainer.style = `top:${top}px;left:${left}px;width:${width}px;height:${height}px;`; + } + + showHoverElementContainer() { + this.hoverElementContainer.hidden = false; + } + + hideHoverElementContainer() { + this.hoverElementContainer.hidden = true; + } + + /** + * Draw each background element and the highlight element base on the + * selection region. + */ + drawSelectionContainer() { + this.showSelectionContainer(); + + let { top, left, right, bottom, width, height } = + this.selectionRegion.dimensions; + + this.highlightEl.style = `top:${top}px;left:${left}px;width:${width}px;height:${height}px;`; + + this.leftBackgroundEl.style = `top:${top}px;width:${left}px;height:${height}px;`; + this.topBackgroundEl.style.height = `${top}px`; + this.rightBackgroundEl.style = `top:${top}px;left:${right}px;width:calc(100% - ${right}px);height:${height}px;`; + this.bottomBackgroundEl.style = `top:${bottom}px;height:calc(100% - ${bottom}px);`; + + this.updateSelectionSizeText(); + } + + updateSelectionSizeText() { + let dpr = this.windowDimensions.devicePixelRatio; + let { width, height } = this.selectionRegion.dimensions; + + let [selectionSizeTranslation] = + lazy.overlayLocalization.formatMessagesSync([ + { + id: "screenshots-overlay-selection-region-size", + args: { + width: Math.floor(width * dpr), + height: Math.floor(height * dpr), + }, + }, + ]); + this.selectionSize.textContent = selectionSizeTranslation.value; + } + + showSelectionContainer() { + this.selectionContainer.hidden = false; + } + + hideSelectionContainer() { + this.selectionContainer.hidden = true; + } + + /** + * Draw the buttons container in the bottom right corner of the selection + * container if possible. + * The buttons will be visible in the viewport if the selection container + * is within the viewport, otherwise skip drawing the buttons. + */ + drawButtonsContainer() { + this.showButtonsContainer(); + + let { + left: boxLeft, + top: boxTop, + right: boxRight, + bottom: boxBottom, + } = this.selectionRegion.dimensions; + let { clientWidth, clientHeight, scrollX, scrollY } = + this.windowDimensions.dimensions; + + if ( + boxTop > scrollY + clientHeight || + boxBottom < scrollY || + boxLeft > scrollX + clientWidth || + boxRight < scrollX + ) { + // The box is offscreen so need to draw the buttons + return; + } + + let top = boxBottom; + + if (scrollY + clientHeight - boxBottom < 70) { + if (boxBottom < scrollY + clientHeight) { + top = boxBottom - 60; + } else if (scrollY + clientHeight - boxTop < 70) { + top = boxTop - 60; + } else { + top = scrollY + clientHeight - 60; + } + } + + if (boxRight < 300) { + this.buttonsContainer.style.left = `${boxLeft}px`; + this.buttonsContainer.style.right = ""; + } else { + this.buttonsContainer.style.right = `calc(100% - ${boxRight}px)`; + this.buttonsContainer.style.left = ""; + } + + this.buttonsContainer.style.top = `${top}px`; + } + + showButtonsContainer() { + this.buttonsContainer.hidden = false; + } + + hideButtonsContainer() { + this.buttonsContainer.hidden = true; + } + + /** + * Set the pointer events to none on the screenshots elements so + * elementFromPoint can find the real element at the given point. + */ + setPointerEventsNone() { + this.screenshotsContainer.style.pointerEvents = "none"; + } + + resetPointerEvents() { + this.screenshotsContainer.style.pointerEvents = ""; + } + + /** + * Try to find a reasonable element for a given point. + * If a reasonable element is found, draw the hover element container for + * that element region. + * @param {Number} clientX The x position relative to the viewport + * @param {Number} clientY The y position relative to the viewport + */ + async handleElementHover(clientX, clientY) { + this.setPointerEventsNone(); + let promise = getElementFromPoint(clientX, clientY, this.document); + this.resetPointerEvents(); + let { ele, rect } = await promise; + + if ( + this.#cachedEle && + !this.window.HTMLIFrameElement.isInstance(this.#cachedEle) && + this.#cachedEle === ele + ) { + // Still hovering over the same element + return; + } + this.#cachedEle = ele; + + if (!rect) { + // this means we found an element that wasn't an iframe + rect = getBestRectForElement(ele, this.document); + } + + if (rect) { + let { scrollX, scrollY } = this.windowDimensions.dimensions; + let { left, top, right, bottom } = rect; + let newRect = { + left: left + scrollX, + top: top + scrollY, + right: right + scrollX, + bottom: bottom + scrollY, + }; + this.hoverElementRegion.dimensions = newRect; + this.drawHoverElementRegion(); + } else { + this.hoverElementRegion.resetDimensions(); + this.hideHoverElementContainer(); + } + } + + /** + * Scroll the viewport if near one or both of the edges. + * @param {Number} pageX The x position relative to the page + * @param {Number} pageY The y position relative to the page + */ + scrollIfByEdge(pageX, pageY) { + let { scrollX, scrollY, clientWidth, clientHeight } = + this.windowDimensions.dimensions; + + if (pageY - scrollY < SCROLL_BY_EDGE) { + // Scroll up + this.scrollWindow(0, -(SCROLL_BY_EDGE - (pageY - scrollY))); + } else if (scrollY + clientHeight - pageY < SCROLL_BY_EDGE) { + // Scroll down + this.scrollWindow(0, SCROLL_BY_EDGE - (scrollY + clientHeight - pageY)); + } + + if (pageX - scrollX <= SCROLL_BY_EDGE) { + // Scroll left + this.scrollWindow(-(SCROLL_BY_EDGE - (pageX - scrollX)), 0); + } else if (scrollX + clientWidth - pageX <= SCROLL_BY_EDGE) { + // Scroll right + this.scrollWindow(SCROLL_BY_EDGE - (scrollX + clientWidth - pageX), 0); + } + } + + /** + * Scroll the window by the given amount. + * @param {Number} x The x amount to scroll + * @param {Number} y The y amount to scroll + */ + scrollWindow(x, y) { + this.window.scrollBy(x, y); + this.updateScreenshotsOverlayDimensions("scroll"); + } + + /** + * The page was resized or scrolled. We need to update the screenshots + * container size so we don't draw outside the page bounds. + * @param {String} eventType will be "scroll" or "resize" + */ + async updateScreenshotsOverlayDimensions(eventType) { + let updateWindowDimensionsPromise = this.updateWindowDimensions(); + + if (this.#state === STATES.CROSSHAIRS) { + if (eventType === "resize") { + this.hideHoverElementContainer(); + this.#cachedEle = null; + } else if (eventType === "scroll") { + if (this.#lastClientX && this.#lastClientY) { + this.#cachedEle = null; + this.handleElementHover(this.#lastClientX, this.#lastClientY); + } + } + } else if (this.#state === STATES.SELECTED) { + await updateWindowDimensionsPromise; + this.selectionRegion.shift(); + this.drawSelectionContainer(); + this.drawButtonsContainer(); + this.updateSelectionSizeText(); + } + } + + /** + * Returns the window's dimensions for the current window. + * + * @return {Object} An object containing window dimensions + * { + * clientWidth: The width of the viewport + * clientHeight: The height of the viewport + * scrollWidth: The width of the enitre page + * scrollHeight: The height of the entire page + * scrollX: The X scroll offset of the viewport + * scrollY: The Y scroll offest of the viewport + * scrollMinX: The X mininmun the viewport can scroll to + * scrollMinY: The Y mininmun the viewport can scroll to + * } + */ + getDimensionsFromWindow() { + let { + innerHeight, + innerWidth, + scrollMaxY, + scrollMaxX, + scrollMinY, + scrollMinX, + scrollY, + scrollX, + } = this.window; + + let scrollWidth = innerWidth + scrollMaxX - scrollMinX; + let scrollHeight = innerHeight + scrollMaxY - scrollMinY; + let clientHeight = innerHeight; + let clientWidth = innerWidth; + + const scrollbarHeight = {}; + const scrollbarWidth = {}; + this.window.windowUtils.getScrollbarSize( + false, + scrollbarWidth, + scrollbarHeight + ); + scrollWidth -= scrollbarWidth.value; + scrollHeight -= scrollbarHeight.value; + clientWidth -= scrollbarWidth.value; + clientHeight -= scrollbarHeight.value; + + return { + clientWidth, + clientHeight, + scrollWidth, + scrollHeight, + scrollX, + scrollY, + scrollMinX, + scrollMinY, + }; + } + + /** + * We have to be careful not to draw the overlay larger than the document + * because the overlay is absolutely position and within the document so we + * can cause the document to overflow when it shouldn't. To mitigate this, + * we will temporarily position the overlay to position fixed with width and + * height 100% so the overlay is within the document bounds. Then we will get + * the dimensions of the document to correctly draw the overlay. + */ + async updateWindowDimensions() { + // Setting the screenshots container attribute "resizing" will make the + // overlay fixed position with width and height of 100% percent so it + // does not draw outside the actual document. + this.screenshotsContainer.toggleAttribute("resizing", true); + + await new Promise(r => this.window.requestAnimationFrame(r)); + + let { + clientWidth, + clientHeight, + scrollWidth, + scrollHeight, + scrollX, + scrollY, + scrollMinX, + scrollMinY, + } = this.getDimensionsFromWindow(); + this.screenshotsContainer.toggleAttribute("resizing", false); + + this.windowDimensions.dimensions = { + clientWidth, + clientHeight, + scrollWidth, + scrollHeight, + scrollX, + scrollY, + scrollMinX, + scrollMinY, + devicePixelRatio: this.window.devicePixelRatio, + }; + + this.updatePreviewContainer(); + this.updateScreenshotsOverlayContainer(); + + setMaxDetectHeight(Math.max(clientHeight + 100, 700)); + setMaxDetectWidth(Math.max(clientWidth + 100, 1000)); + } +} diff --git a/browser/components/screenshots/ScreenshotsUtils.sys.mjs b/browser/components/screenshots/ScreenshotsUtils.sys.mjs new file mode 100644 index 0000000000..68e4f896bf --- /dev/null +++ b/browser/components/screenshots/ScreenshotsUtils.sys.mjs @@ -0,0 +1,993 @@ +/* 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"; +import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs"; + +const SCREENSHOTS_LAST_SCREENSHOT_METHOD_PREF = + "screenshots.browser.component.last-screenshot-method"; +const SCREENSHOTS_LAST_SAVED_METHOD_PREF = + "screenshots.browser.component.last-saved-method"; + +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", +}); + +XPCOMUtils.defineLazyServiceGetters(lazy, { + AlertsService: ["@mozilla.org/alerts-service;1", "nsIAlertsService"], +}); + +XPCOMUtils.defineLazyPreferenceGetter( + lazy, + "SCREENSHOTS_LAST_SAVED_METHOD", + SCREENSHOTS_LAST_SAVED_METHOD_PREF, + "download" +); + +XPCOMUtils.defineLazyPreferenceGetter( + lazy, + "SCREENSHOTS_LAST_SCREENSHOT_METHOD", + SCREENSHOTS_LAST_SCREENSHOT_METHOD_PREF, + "visible" +); + +ChromeUtils.defineLazyGetter(lazy, "screenshotsLocalization", () => { + return new Localization(["browser/screenshots.ftl"], true); +}); + +// The max dimension for a canvas is 32,767 https://searchfox.org/mozilla-central/rev/f40d29a11f2eb4685256b59934e637012ea6fb78/gfx/cairo/cairo/src/cairo-image-surface.c#62. +// The max number of pixels for a canvas is 472,907,776 pixels (i.e., 22,528 x 20,992) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size +// We have to limit screenshots to these dimensions otherwise it will cause an error. +export const MAX_CAPTURE_DIMENSION = 32766; +export const MAX_CAPTURE_AREA = 472907776; +export const MAX_SNAPSHOT_DIMENSION = 1024; + +export class ScreenshotsComponentParent extends JSWindowActorParent { + async receiveMessage(message) { + let region, title; + let browser = message.target.browsingContext.topFrameElement; + // ignore message from child actors with no associated browser element + if (!browser) { + return; + } + if ( + ScreenshotsUtils.getUIPhase(browser) == UIPhases.CLOSED && + !ScreenshotsUtils.browserToScreenshotsState.has(browser) + ) { + // We've already exited or never opened and there's no UI or state that could + // handle this message. We additionally check for screenshot-state to ensure we + // don't ignore an overlay message when there is no current selection - which + // otherwise looks like the UIPhases.CLOSED state. + return; + } + switch (message.name) { + case "Screenshots:CancelScreenshot": + let { reason } = message.data; + ScreenshotsUtils.cancel(browser, reason); + break; + case "Screenshots:CopyScreenshot": + ScreenshotsUtils.closePanel(browser); + ({ region } = message.data); + await ScreenshotsUtils.copyScreenshotFromRegion(region, browser); + ScreenshotsUtils.exit(browser); + break; + case "Screenshots:DownloadScreenshot": + ScreenshotsUtils.closePanel(browser); + ({ title, region } = message.data); + await ScreenshotsUtils.downloadScreenshotFromRegion( + title, + region, + browser + ); + ScreenshotsUtils.exit(browser); + break; + case "Screenshots:OverlaySelection": + ScreenshotsUtils.setPerBrowserState(browser, { + hasOverlaySelection: message.data.hasSelection, + }); + break; + case "Screenshots:ShowPanel": + ScreenshotsUtils.openPanel(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.exit(browser); + } + } +} + +export class ScreenshotsHelperParent extends JSWindowActorParent { + receiveMessage(message) { + switch (message.name) { + case "ScreenshotsHelper:GetElementRectFromPoint": + let cxt = BrowsingContext.get(message.data.bcId); + return cxt.currentWindowGlobal + .getActor("ScreenshotsHelper") + .sendQuery("ScreenshotsHelper:GetElementRectFromPoint", message.data); + } + return null; + } +} + +export const UIPhases = { + CLOSED: 0, // nothing showing + INITIAL: 1, // panel and overlay showing + OVERLAYSELECTION: 2, // something selected in the overlay + PREVIEW: 3, // preview dialog showing +}; + +export var ScreenshotsUtils = { + browserToScreenshotsState: new WeakMap(), + initialized: false, + methodsUsed: {}, + + /** + * Figures out which of various states the screenshots UI is in, for the given browser. + * @param browser The selected browser + * @returns One of the `UIPhases` constants + */ + getUIPhase(browser) { + let perBrowserState = this.browserToScreenshotsState.get(browser); + if (perBrowserState?.previewDialog) { + return UIPhases.PREVIEW; + } + const buttonsPanel = this.panelForBrowser(browser); + if (buttonsPanel && !buttonsPanel.hidden) { + return UIPhases.INITIAL; + } + if (perBrowserState?.hasOverlaySelection) { + return UIPhases.OVERLAYSELECTION; + } + return UIPhases.CLOSED; + }, + + resetMethodsUsed() { + this.methodsUsed = { fullpage: 0, visible: 0 }; + }, + + initialize() { + if (!this.initialized) { + if ( + !Services.prefs.getBoolPref( + "screenshots.browser.component.enabled", + false + ) + ) { + return; + } + this.resetMethodsUsed(); + Services.telemetry.setEventRecordingEnabled("screenshots", true); + Services.obs.addObserver(this, "menuitem-screenshot"); + this.initialized = true; + if (Cu.isInAutomation) { + Services.obs.notifyObservers(null, "screenshots-component-initialized"); + } + } + }, + + uninitialize() { + if (this.initialized) { + Services.obs.removeObserver(this, "menuitem-screenshot"); + this.initialized = false; + } + }, + + handleEvent(event) { + // Escape should cancel and exit + if (event.type === "keydown" && event.key === "Escape") { + let browser = event.view.gBrowser.selectedBrowser; + this.cancel(browser, "escape"); + } + }, + + observe(subj, topic, data) { + let { gBrowser } = subj; + let browser = gBrowser.selectedBrowser; + + switch (topic) { + case "menuitem-screenshot": { + const uiPhase = this.getUIPhase(browser); + if (uiPhase !== UIPhases.CLOSED) { + // toggle from already-open to closed + this.cancel(browser, data); + return; + } + this.start(browser, data); + break; + } + } + }, + + /** + * 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", + type + ); + } else { + Services.obs.notifyObservers(null, "menuitem-screenshot-extension", type); + } + }, + + /** + * Creates/gets 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; + }, + + /** + * Show the Screenshots UI and start the capture flow + * @param browser The current browser. + * @param reason [string] Optional reason string passed along when recording telemetry events + */ + start(browser, reason = "") { + const uiPhase = this.getUIPhase(browser); + switch (uiPhase) { + case UIPhases.CLOSED: + this.captureFocusedElement(browser, "previousFocusRef"); + this.showPanelAndOverlay(browser, reason); + break; + case UIPhases.INITIAL: + // nothing to do, panel & overlay are already open + break; + case UIPhases.PREVIEW: { + this.closeDialogBox(browser); + this.showPanelAndOverlay(browser, reason); + break; + } + } + }, + + /** + * Exit the Screenshots UI for the given browser + * Closes any of open UI elements (preview dialog, panel, overlay) and cleans up internal state. + * @param browser The current browser. + */ + exit(browser) { + this.captureFocusedElement(browser, "currentFocusRef"); + this.closeDialogBox(browser); + this.closePanel(browser); + this.closeOverlay(browser); + this.resetMethodsUsed(); + this.attemptToRestoreFocus(browser); + + this.browserToScreenshotsState.delete(browser); + if (Cu.isInAutomation) { + Services.obs.notifyObservers(null, "screenshots-exit"); + } + }, + + /** + * Cancel/abort the screenshots operation for the given browser + * + * @param browser The current browser. + */ + cancel(browser, reason) { + this.recordTelemetryEvent("canceled", reason, {}); + this.exit(browser); + }, + + /** + * Update internal UI state associated with the given browser + * + * @param browser The current browser. + * @param nameValues {object} An object with one or more named property values + */ + setPerBrowserState(browser, nameValues = {}) { + if (!this.browserToScreenshotsState.has(browser)) { + // we should really have this state already, created when the preview dialog was opened + this.browserToScreenshotsState.set(browser, {}); + } + let perBrowserState = this.browserToScreenshotsState.get(browser); + Object.assign(perBrowserState, nameValues); + }, + + /** + * Attempt to place focus on the element that had focus before screenshots UI was shown + * + * @param browser The current browser. + */ + attemptToRestoreFocus(browser) { + const document = browser.ownerDocument; + const window = browser.ownerGlobal; + + const doFocus = () => { + // Move focus it back to where it was previously. + prevFocus.setAttribute("refocused-by-panel", true); + try { + let fm = Services.focus; + fm.setFocus(prevFocus, fm.FLAG_NOSCROLL); + } catch (e) { + prevFocus.focus(); + } + prevFocus.removeAttribute("refocused-by-panel"); + let focusedElement; + try { + focusedElement = document.commandDispatcher.focusedElement; + if (!focusedElement) { + focusedElement = document.activeElement; + } + } catch (ex) { + focusedElement = document.activeElement; + } + }; + + let perBrowserState = this.browserToScreenshotsState.get(browser) || {}; + let prevFocus = perBrowserState.previousFocusRef?.get(); + let currentFocus = perBrowserState.currentFocusRef?.get(); + delete perBrowserState.currentFocusRef; + + // Avoid changing focus if focus changed during exit - perhaps exit was caused + // by a user action which resulted in focus moving + let nowFocus; + try { + nowFocus = document.commandDispatcher.focusedElement; + } catch (e) { + nowFocus = document.activeElement; + } + if (nowFocus && nowFocus != currentFocus) { + return; + } + + let dialog = this.getDialog(browser); + let panel = this.panelForBrowser(browser); + + if (prevFocus) { + // Try to restore focus + try { + if (document.commandDispatcher.focusedWindow != window) { + // Focus has already been set to a different window + return; + } + } catch (ex) {} + + if (!currentFocus) { + doFocus(); + return; + } + while (currentFocus) { + if ( + (dialog && currentFocus == dialog) || + (panel && currentFocus == panel) || + currentFocus == browser + ) { + doFocus(); + return; + } + currentFocus = currentFocus.parentNode; + if ( + currentFocus && + currentFocus.nodeType == currentFocus.DOCUMENT_FRAGMENT_NODE && + currentFocus.host + ) { + // focus was in a shadowRoot, we'll try the host", + currentFocus = currentFocus.host; + } + } + doFocus(); + } + }, + + /** + * Set a flag so we don't try to exit when preview dialog next closes. + * + * @param browser The current browser. + * @param reason [string] Optional reason string passed along when recording telemetry events + */ + scheduleRetry(browser, reason) { + let perBrowserState = this.browserToScreenshotsState.get(browser); + if (!perBrowserState?.closedPromise) { + console.warn( + "Expected perBrowserState with a closedPromise for the preview dialog" + ); + return; + } + this.setPerBrowserState(browser, { exitOnPreviewClose: false }); + perBrowserState?.closedPromise.then(() => { + this.start(browser, reason); + }); + }, + + /** + * Open the tab dialog for preview + * + * @param browser The current browser + */ + async openPreviewDialog(browser) { + let dialogBox = browser.ownerGlobal.gBrowser.getTabDialogBox(browser); + let { dialog, closedPromise } = await dialogBox.open( + `chrome://browser/content/screenshots/screenshots.html?browsingContextId=${browser.browsingContext.id}`, + { + features: "resizable=no", + sizeTo: "available", + allowDuplicateDialogs: false, + }, + browser + ); + + this.setPerBrowserState(browser, { + previewDialog: dialog, + exitOnPreviewClose: true, + closedPromise: closedPromise.finally(() => { + this.onDialogClose(browser); + }), + }); + return dialog; + }, + + /** + * Take a weak-reference to whatever element currently has focus and associate it with + * the UI state for this browser. + * + * @param browser The current browser. + * @param {string} stateRefName The property name for this element reference. + */ + captureFocusedElement(browser, stateRefName) { + let document = browser.ownerDocument; + let focusedElement; + try { + focusedElement = document.commandDispatcher.focusedElement; + if (!focusedElement) { + focusedElement = document.activeElement; + } + } catch (ex) { + focusedElement = document.activeElement; + } + this.setPerBrowserState(browser, { + [stateRefName]: Cu.getWeakReference(focusedElement), + }); + }, + + /** + * Returns the buttons panel for the given browser + * @param browser The current browser + * @returns The buttons panel + */ + panelForBrowser(browser) { + return browser.ownerDocument.getElementById("screenshotsPagePanel"); + }, + + /** + * Create the buttons container from its template, for this browser + * @param browser The current browser + * @returns The buttons panel + */ + createPanelForBrowser(browser) { + let buttonsPanel = this.panelForBrowser(browser); + if (!buttonsPanel) { + let doc = browser.ownerDocument; + let template = doc.getElementById("screenshotsPagePanelTemplate"); + let fragmentClone = template.content.cloneNode(true); + buttonsPanel = fragmentClone.firstElementChild; + template.replaceWith(buttonsPanel); + + let anchor = browser.ownerDocument.querySelector("#navigator-toolbox"); + anchor.appendChild(buttonsPanel); + } + + return this.panelForBrowser(browser); + }, + + /** + * Open the buttons panel. + * @param browser The current browser + */ + openPanel(browser) { + let buttonsPanel = this.panelForBrowser(browser); + if (!buttonsPanel.hidden) { + return; + } + buttonsPanel.hidden = false; + buttonsPanel.ownerDocument.addEventListener("keydown", this); + + buttonsPanel + .querySelector("screenshots-buttons") + .focusButton(lazy.SCREENSHOTS_LAST_SCREENSHOT_METHOD); + }, + + /** + * Close the panel + * @param browser The current browser + */ + closePanel(browser) { + let buttonsPanel = this.panelForBrowser(browser); + if (!buttonsPanel) { + return; + } + buttonsPanel.hidden = true; + buttonsPanel.ownerDocument.removeEventListener("keydown", this); + }, + + /** + * 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 showPanelAndOverlay(browser, data) { + let actor = this.getActor(browser); + actor.sendAsyncMessage("Screenshots:ShowOverlay"); + this.createPanelForBrowser(browser); + this.recordTelemetryEvent("started", data, {}); + this.openPanel(browser); + }, + + /** + * Close the overlay UI, and clear out internal state if there was an overlay selection + * The overlay lives in the child document; so although closing is actually async, we assume success. + * @param browser The current browser. + */ + closeOverlay(browser, options = {}) { + let actor = this.getActor(browser); + actor?.sendAsyncMessage("Screenshots:HideOverlay", options); + + if (this.browserToScreenshotsState.has(browser)) { + this.setPerBrowserState(browser, { + hasOverlaySelection: false, + }); + } + }, + + /** + * 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 perBrowserState = this.browserToScreenshotsState.get(browser); + if (perBrowserState?.previewDialog) { + perBrowserState.previewDialog.close(); + return true; + } + return false; + }, + + /** + * Callback fired when the preview dialog window closes + * Will exit the screenshots UI if the `exitOnPreviewClose` flag is set for this browser + * @param browser The associated browser + */ + onDialogClose(browser) { + let perBrowserState = this.browserToScreenshotsState.get(browser); + if (!perBrowserState) { + return; + } + delete perBrowserState.previewDialog; + if (perBrowserState?.exitOnPreviewClose) { + this.exit(browser); + } + }, + + /** + * Gets the screenshots button if it is visible, otherwise it will get the + * element that the screenshots button is nested under. If the screenshots + * button doesn't exist then we will default to the navigator toolbox. + * @param browser The selected browser + * @returns The anchor element for the ConfirmationHint + */ + getWidgetAnchor(browser) { + let window = browser.ownerGlobal; + let widgetGroup = window.CustomizableUI.getWidget("screenshot-button"); + let widget = widgetGroup?.forWindow(window); + let anchor = widget?.anchor; + + // Check if the anchor exists and is visible + if ( + !anchor || + !anchor.isConnected || + !window.isElementVisible(anchor.parentNode) + ) { + // Use the hamburger button if the screenshots button isn't available + anchor = browser.ownerDocument.getElementById("PanelUI-menu-button"); + } + return anchor; + }, + + /** + * Indicate that the screenshot has been copied via ConfirmationHint. + * @param browser The selected browser + */ + showCopiedConfirmationHint(browser) { + let anchor = this.getWidgetAnchor(browser); + + browser.ownerGlobal.ConfirmationHint.show( + anchor, + "confirmation-hint-screenshot-copied" + ); + }, + + /** + * 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"); + }, + + showAlertMessage(title, message) { + lazy.AlertsService.showAlertNotification(null, title, message); + }, + + /** + * The max dimension of any side of a canvas is 32767 and the max canvas area is + * 124925329. If the width or height is greater or equal to 32766 we will crop the + * screenshot to the max width. If the area is still too large for the canvas + * we will adjust the height so we can successfully capture the screenshot. + * @param {Object} rect The dimensions of the screenshot. The rect will be + * modified in place + */ + cropScreenshotRectIfNeeded(rect) { + let cropped = false; + let width = rect.width * rect.devicePixelRatio; + let height = rect.height * rect.devicePixelRatio; + + if (width > MAX_CAPTURE_DIMENSION) { + width = MAX_CAPTURE_DIMENSION; + cropped = true; + } + if (height > MAX_CAPTURE_DIMENSION) { + height = MAX_CAPTURE_DIMENSION; + cropped = true; + } + if (width * height > MAX_CAPTURE_AREA) { + height = Math.floor(MAX_CAPTURE_AREA / width); + cropped = true; + } + + rect.width = Math.floor(width / rect.devicePixelRatio); + rect.height = Math.floor(height / rect.devicePixelRatio); + rect.right = rect.left + rect.width; + rect.bottom = rect.top + rect.height; + + if (cropped) { + let [errorTitle, errorMessage] = + lazy.screenshotsLocalization.formatMessagesSync([ + { id: "screenshots-too-large-error-title" }, + { id: "screenshots-too-large-error-details" }, + ]); + this.showAlertMessage(errorTitle.value, errorMessage.value); + this.recordTelemetryEvent("failed", "screenshot_too_large", null); + } + }, + + /** + * Open and add screenshot-ui to the dialog box and then take the screenshot + * @param browser The current browser. + * @param type The type of screenshot taken. + */ + async doScreenshot(browser, type) { + this.closePanel(browser); + this.closeOverlay(browser, { doNotResetMethods: true }); + + let dialog = await this.openPreviewDialog(browser); + await dialog._dialogReady; + let screenshotsUI = + dialog._frame.contentDocument.createElement("screenshots-ui"); + dialog._frame.contentDocument.body.appendChild(screenshotsUI); + + screenshotsUI.focusButton(lazy.SCREENSHOTS_LAST_SAVED_METHOD); + + let rect; + let lastUsedMethod; + if (type === "full_page") { + rect = await this.fetchFullPageBounds(browser); + lastUsedMethod = "fullpage"; + } else { + rect = await this.fetchVisibleBounds(browser); + lastUsedMethod = "visible"; + } + + Services.prefs.setStringPref( + SCREENSHOTS_LAST_SCREENSHOT_METHOD_PREF, + lastUsedMethod + ); + this.methodsUsed[lastUsedMethod] += 1; + this.recordTelemetryEvent("selected", type, {}); + 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 = 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"); + } + }, + + /** + * Creates a canvas and draws a snapshot of the screenshot on the canvas + * @param region The bounds of screenshots + * @param browser The current browser + * @returns The canvas + */ + async createCanvas(region, browser) { + region.left = Math.round(region.left); + region.right = Math.round(region.right); + region.top = Math.round(region.top); + region.bottom = Math.round(region.bottom); + region.width = Math.round(region.right - region.left); + region.height = Math.round(region.bottom - region.top); + + this.cropScreenshotRectIfNeeded(region); + + let { devicePixelRatio } = region; + + let browsingContext = BrowsingContext.get(browser.browsingContext.id); + + let canvas = browser.ownerDocument.createElementNS( + "http://www.w3.org/1999/xhtml", + "html:canvas" + ); + let context = canvas.getContext("2d"); + + canvas.width = region.width * devicePixelRatio; + canvas.height = region.height * devicePixelRatio; + + for ( + let startLeft = region.left; + startLeft < region.right; + startLeft += MAX_SNAPSHOT_DIMENSION + ) { + for ( + let startTop = region.top; + startTop < region.bottom; + startTop += MAX_SNAPSHOT_DIMENSION + ) { + let height = + startTop + MAX_SNAPSHOT_DIMENSION > region.bottom + ? region.bottom - startTop + : MAX_SNAPSHOT_DIMENSION; + let width = + startLeft + MAX_SNAPSHOT_DIMENSION > region.right + ? region.right - startLeft + : MAX_SNAPSHOT_DIMENSION; + let rect = new DOMRect(startLeft, startTop, width, height); + + let snapshot = await browsingContext.currentWindowGlobal.drawSnapshot( + rect, + devicePixelRatio, + "rgb(255,255,255)" + ); + + context.drawImage( + snapshot, + (startLeft - region.left) * devicePixelRatio, + (startTop - region.top) * devicePixelRatio, + width * devicePixelRatio, + height * devicePixelRatio + ); + + snapshot.close(); + } + } + + return canvas; + }, + + /** + * Copy the screenshot + * @param region The bounds of the screenshots + * @param browser The current browser + */ + async copyScreenshotFromRegion(region, browser) { + let canvas = await this.createCanvas(region, browser); + let url = canvas.toDataURL(); + + await this.copyScreenshot(url, browser, { + object: "overlay_copy", + }); + }, + + /** + * Copy the image to the clipboard + * This is called from the preview dialog + * @param dataUrl The image data + * @param browser The current browser + * @param data Telemetry data + */ + async copyScreenshot(dataUrl, browser, data) { + // 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 + ); + + this.showCopiedConfirmationHint(browser); + + let extra = await this.getActor(browser).sendQuery( + "Screenshots:GetMethodsUsed" + ); + this.recordTelemetryEvent("copy", data.object, { + ...extra, + ...this.methodsUsed, + }); + this.resetMethodsUsed(); + + Services.prefs.setStringPref(SCREENSHOTS_LAST_SAVED_METHOD_PREF, "copy"); + }, + + /** + * Download the screenshot + * @param title The title of the current page + * @param region The bounds of the screenshot + * @param browser The current browser + */ + async downloadScreenshotFromRegion(title, region, browser) { + let canvas = await this.createCanvas(region, browser); + let dataUrl = canvas.toDataURL(); + + await this.downloadScreenshot(title, dataUrl, browser, { + object: "overlay_download", + }); + }, + + /** + * Download the screenshot + * This is called from the preview dialog + * @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 + * @param data Telemetry data + */ + async downloadScreenshot(title, dataUrl, browser, data) { + // 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) {} + + let extra = await this.getActor(browser).sendQuery( + "Screenshots:GetMethodsUsed" + ); + this.recordTelemetryEvent("download", data.object, { + ...extra, + ...this.methodsUsed, + }); + this.resetMethodsUsed(); + + Services.prefs.setStringPref( + SCREENSHOTS_LAST_SAVED_METHOD_PREF, + "download" + ); + }, + + recordTelemetryEvent(type, object, args) { + if (args) { + for (let key of Object.keys(args)) { + args[key] = args[key].toString(); + } + } + Services.telemetry.recordEvent("screenshots", type, object, null, args); + }, +}; 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..506f3658c9 --- /dev/null +++ b/browser/components/screenshots/content/screenshots.css @@ -0,0 +1,68 @@ +/* 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 { + height: 100vh; + width: 100vw; +} + +.image-view { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} + +.preview-buttons { + display: flex; + align-items: center; + justify-content: flex-end; + width: 100%; + border: 0; + box-sizing: border-box; + margin: 4px 0; + margin-inline-start: calc(-2% + 4px); +} + +.preview-button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + text-align: center; + user-select: none; + white-space: nowrap; + min-height: 36px; + font-size: 15px; + min-width: 36px; +} + +.preview-button > img { + -moz-context-properties: fill; + fill: currentColor; + width: 16px; + height: 16px; +} + +#download > img, +#copy > img { + margin-inline-end: 5px; +} + +.preview-image { + height: 100%; + width: 100%; + overflow: auto; +} + +#preview-image-div { + margin: 2%; + margin-top: 0; +} + +#placeholder-image { + width: 100%; + height: 100%; +} diff --git a/browser/components/screenshots/content/screenshots.html b/browser/components/screenshots/content/screenshots.html new file mode 100644 index 0000000000..88c71fb4fe --- /dev/null +++ b/browser/components/screenshots/content/screenshots.html @@ -0,0 +1,68 @@ +<!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 + id="retry" + class="preview-button" + data-l10n-id="screenshots-retry-button-title" + > + <img src="chrome://global/skin/icons/reload.svg" /> + </button> + <button + id="cancel" + class="preview-button" + data-l10n-id="screenshots-cancel-button-title" + > + <img src="chrome://global/skin/icons/close.svg" /> + </button> + <button + id="copy" + class="preview-button" + data-l10n-id="screenshots-copy-button-title" + > + <img src="chrome://global/skin/icons/edit-copy.svg" /> + <span data-l10n-id="screenshots-copy-button" /> + </button> + <button + id="download" + class="preview-button primary" + data-l10n-id="screenshots-download-button-title" + > + <img src="chrome://browser/skin/downloads/downloads.svg" /> + <span data-l10n-id="screenshots-download-button" /> + </button> + </div> + <div class="preview-image"> + <div id="preview-image-div"></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..9e47570e07 --- /dev/null +++ b/browser/components/screenshots/content/screenshots.js @@ -0,0 +1,105 @@ +/* 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"; + +ChromeUtils.defineESModuleGetters(this, { + ScreenshotsUtils: "resource:///modules/ScreenshotsUtils.sys.mjs", +}); + +class ScreenshotsUI extends HTMLElement { + constructor() { + super(); + // we get passed the <browser> as a param via TabDialogBox.open() + this.openerBrowser = window.arguments[0]; + } + 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("#retry"); + this._retryButton.addEventListener("click", this); + this._cancelButton = this.querySelector("#cancel"); + this._cancelButton.addEventListener("click", this); + this._copyButton = this.querySelector("#copy"); + this._copyButton.addEventListener("click", this); + this._downloadButton = this.querySelector("#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(); + ScreenshotsUtils.recordTelemetryEvent("canceled", "preview_cancel", {}); + } 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 + ) { + ScreenshotsUtils.scheduleRetry(this.openerBrowser, "preview_retry"); + this.close(); + } + } + + async saveToFile(dataUrl) { + await ScreenshotsUtils.downloadScreenshot( + null, + dataUrl, + this.openerBrowser, + { object: "preview_download" } + ); + this.close(); + } + + async saveToClipboard(dataUrl) { + await ScreenshotsUtils.copyScreenshot(dataUrl, this.openerBrowser, { + object: "preview_copy", + }); + this.close(); + } + + /** + * Set the focus to the most recent saved method. + * This will default to the download button. + * @param {String} buttonToFocus + */ + focusButton(buttonToFocus) { + if (buttonToFocus === "copy") { + this._copyButton.focus({ focusVisible: true }); + } else { + this._downloadButton.focus({ focusVisible: true }); + } + } +} +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..42cb868bea --- /dev/null +++ b/browser/components/screenshots/fileHelpers.mjs @@ -0,0 +1,269 @@ +/* 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 { AppConstants } = ChromeUtils.importESModule( + "resource://gre/modules/AppConstants.sys.mjs" +); + +const lazy = {}; + +ChromeUtils.defineESModuleGetters(lazy, { + DownloadLastDir: "resource://gre/modules/DownloadLastDir.sys.mjs", + DownloadPaths: "resource://gre/modules/DownloadPaths.sys.mjs", + Downloads: "resource://gre/modules/Downloads.sys.mjs", + FileUtils: "resource://gre/modules/FileUtils.sys.mjs", + ScreenshotsUtils: "resource:///modules/ScreenshotsUtils.sys.mjs", +}); + +/** + * 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, { + compressWhitespaces: false, + allowInvalidFilenames: true, + }) || "_"; + 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("UntitledSaveFileName") + // 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 win + * 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, win) { + return (async function () { + let downloadLastDir = new lazy.DownloadLastDir(win); + + // 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 downloadLastDir.getFileAsync(null); + 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( + win, + 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); + + aFpP.saveAsType = fp.filterIndex; + aFpP.file = fp.file; + aFpP.file.leafName = validateFileName(aFpP.file.leafName); + + return true; + })(); +} diff --git a/browser/components/screenshots/jar.mn b/browser/components/screenshots/jar.mn new file mode 100644 index 0000000000..7a4e2ed73a --- /dev/null +++ b/browser/components/screenshots/jar.mn @@ -0,0 +1,24 @@ +# 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/browser/screenshots/overlayHelpers.mjs + + +% content screenshots-overlay %overlay/ diff --git a/browser/components/screenshots/moz.build b/browser/components/screenshots/moz.build new file mode 100644 index 0000000000..c66eed8f49 --- /dev/null +++ b/browser/components/screenshots/moz.build @@ -0,0 +1,20 @@ +# -*- 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 += [ + "ScreenshotsHelperChild.sys.mjs", + "ScreenshotsOverlayChild.sys.mjs", + "ScreenshotsUtils.sys.mjs", +] + +JAR_MANIFESTS += ["jar.mn"] + +with Files("**"): + BUG_COMPONENT = ("Firefox", "Screenshots") + +BROWSER_CHROME_MANIFESTS += [ + "tests/browser/browser.toml", +] diff --git a/browser/components/screenshots/overlay/overlay.css b/browser/components/screenshots/overlay/overlay.css new file mode 100644 index 0000000000..6eeda8b44c --- /dev/null +++ b/browser/components/screenshots/overlay/overlay.css @@ -0,0 +1,349 @@ +/* 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 url("chrome://global/skin/in-content/common.css"); + +:host { + display: contents; +} + +[hidden] { + display: none !important; +} + +#screenshots-component { + position: absolute; + inset: 0; + font: message-box; + user-select: none; + touch-action: none; + pointer-events: auto; + cursor: crosshair; + + &[dragging] { + cursor: grabbing; + } + + &[resizing] { + position: fixed; + width: 100% !important; + height: 100% !important; + } +} + +#selection-container { + overflow: clip; + position: absolute; + inset: 0; + pointer-events: none; +} + +#preview-container { + overflow: clip; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: sticky; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.7); +} + +#buttons-container { + position: absolute; + margin: 10px 0; + cursor: auto; +} + +#selection-size, +#buttons-container { + padding: 4px; + background-color: var(--in-content-page-background); + color: var(--in-content-text-color); + border-radius: 4px; +} + +.buttons-wrapper, +#selection-size-container { + display: flex; + align-items: center; + justify-content: center; +} + +.screenshots-button { + display: inline-flex; + align-items: center; + cursor: pointer; + text-align: center; + user-select: none; + white-space: nowrap; + z-index: 6; + min-width: 32px; + margin-inline: 4px; +} + +#selection-size-container { + width: 100%; + height: 100%; + pointer-events: none; +} + +#screenshots-cancel-button { + margin-top: 20px; + border-color: #fff; + color: #fff; + + @media (prefers-contrast) { + background-color: var(--in-content-button-background); + color: var(--in-content-button-text-color); + border-color: var(--in-content-button-border-color); + } +} + +#screenshots-cancel-button:hover { + background-color: #fff; + color: #000; + + @media (prefers-contrast) { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); + border-color: var(--in-content-button-border-color-hover); + } +} + +.screenshots-button > img { + -moz-context-properties: fill; + fill: currentColor; + width: 16px; + height: 16px; + pointer-events: none; +} + +#cancel > img { + content: url("chrome://global/skin/icons/close.svg"); +} + +#copy > img { + content: url("chrome://global/skin/icons/edit-copy.svg"); +} + +#download > img { + content: url("chrome://browser/skin/downloads/downloads.svg"); +} + +#download > img, +#copy > img { + margin-inline-end: 5px; +} + +.face-container { + position: relative; + width: 64px; + height: 64px; +} + +.face { + width: 62px; + height: 62px; + display: block; + background-image: url("chrome://browser/content/screenshots/icon-welcome-face-without-eyes.svg"); +} + +.eye { + background-color: #fff; + width: 10px; + height: 14px; + position: absolute; + border-radius: 100%; + overflow: hidden; + inset-inline-start: 16px; + top: 19px; +} + +.eyeball { + position: absolute; + width: 6px; + height: 6px; + background-color: #000; + border-radius: 50%; + inset-inline-start: 2px; + top: 4px; + z-index: 10; +} + +.left { + margin-inline-start: 0; +} + +.right { + margin-inline-start: 20px; +} + +.preview-instructions { + display: flex; + align-items: center; + justify-content: center; + animation: pulse 125ms cubic-bezier(0.07, 0.95, 0, 1); + color: #fff; + font-size: 24px; + line-height: 32px; + text-align: center; + padding: 20px; + width: 400px; + + @media (prefers-contrast) { + color: CanvasText; + background-color: Canvas; + } +} + +#hover-highlight { + animation: fade-in 125ms forwards cubic-bezier(0.07, 0.95, 0, 1); + background: rgba(255, 255, 255, 0.2); + border: 2px dashed rgba(255, 255, 255, 0.4); + border-radius: 1px; + box-sizing: border-box; + pointer-events: none; + position: absolute; + z-index: 11; +} + +#top-background { + top: 0; + left: 0; + width: 100%; +} + +#left-background { + left: 0; +} + +#bottom-background { + left: 0; + width: 100%; +} + +.bghighlight { + background-color: rgba(0, 0, 0, 0.7); + position: absolute; + overflow: clip; + pointer-events: none; + /* FIXME(bug 1859421): This shouldn't be needed */ + z-index: -1; +} + +.highlight { + border: 2px dashed rgba(255, 255, 255, 0.8); + box-sizing: border-box; + cursor: move; + position: absolute; + pointer-events: auto; + z-index: 2; + outline-offset: 8px; +} + +.mover-target { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + z-index: 5; + pointer-events: auto; + outline-offset: -15px; +} + +.mover-target.direction-topLeft { + cursor: nwse-resize; + height: 60px; + left: -30px; + top: -30px; + width: 60px; +} + +.mover-target.direction-top { + cursor: ns-resize; + height: 60px; + inset-inline-start: 0; + top: -30px; + width: 100%; + z-index: 4; +} + +.mover-target.direction-topRight { + cursor: nesw-resize; + height: 60px; + right: -30px; + top: -30px; + width: 60px; +} + +.mover-target.direction-left { + cursor: ew-resize; + height: 100%; + left: -30px; + top: 0; + width: 60px; + z-index: 4; +} + +.mover-target.direction-right { + cursor: ew-resize; + height: 100%; + right: -30px; + top: 0; + width: 60px; + z-index: 4; +} + +.mover-target.direction-bottomLeft { + bottom: -30px; + cursor: nesw-resize; + height: 60px; + left: -30px; + width: 60px; +} + +.mover-target.direction-bottom { + bottom: -30px; + cursor: ns-resize; + height: 60px; + inset-inline-start: 0; + width: 100%; + z-index: 4; +} + +.mover-target.direction-bottomRight { + bottom: -30px; + cursor: nwse-resize; + height: 60px; + right: -30px; + width: 60px; +} + +.mover-target:hover .mover { + transform: scale(1.05); +} + +.mover { + background-color: #fff; + border-radius: 50%; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); + transition: transform 125ms cubic-bezier(0.07, 0.95, 0, 1); + position: relative; + height: 16px; + width: 16px; + pointer-events: none; + + @media (prefers-contrast) { + background-color: ButtonText; + } +} + +.small-selection .mover { + height: 10px; + width: 10px; +} diff --git a/browser/components/screenshots/overlayHelpers.mjs b/browser/components/screenshots/overlayHelpers.mjs new file mode 100644 index 0000000000..70a1bd86d0 --- /dev/null +++ b/browser/components/screenshots/overlayHelpers.mjs @@ -0,0 +1,497 @@ +/* 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/. */ + +// 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, +}; + +/** + * 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 + */ +function getBoundingClientRect(ele) { + if (!ele.getBoundingClientRect) { + return null; + } + + return ele.getBoundingClientRect(); +} + +export function setMaxDetectHeight(maxHeight) { + MAX_DETECT_HEIGHT = maxHeight; +} + +export function setMaxDetectWidth(maxWidth) { + MAX_DETECT_WIDTH = maxWidth; +} + +/** + * This function will try to get an element from a given point in the doc. + * This function is recursive because when sending a message to the + * ScreenshotsHelper, the ScreenshotsHelper will call into this function. + * This only occurs when the element at the given point is an iframe. + * + * If the element is an iframe, we will send a message to the ScreenshotsHelper + * actor in the correct context to get the element at the given point. + * The message will return the "getBestRectForElement" for the element at the + * given point. + * + * If the element is not an iframe, then we will just return the element. + * + * @param {Number} x The x coordinate + * @param {Number} y The y coordinate + * @param {Document} doc The document + * @returns {Object} + * ele: The element for a given point (x, y) + * rect: The rect for the given point if ele is an iframe + * otherwise null + */ +export async function getElementFromPoint(x, y, doc) { + let ele = null; + let rect = null; + try { + ele = doc.elementFromPoint(x, y); + // if the element is an iframe, we need to send a message to that browsing context + // to get the coordinates of the element in the iframe + if (doc.defaultView.HTMLIFrameElement.isInstance(ele)) { + let actor = + ele.browsingContext.parentWindowContext.windowGlobalChild.getActor( + "ScreenshotsHelper" + ); + rect = await actor.sendQuery( + "ScreenshotsHelper:GetElementRectFromPoint", + { + x: x + ele.ownerGlobal.mozInnerScreenX, + y: y + ele.ownerGlobal.mozInnerScreenY, + bcId: ele.browsingContext.id, + } + ); + + if (rect) { + rect = { + left: rect.left - ele.ownerGlobal.mozInnerScreenX, + right: rect.right - ele.ownerGlobal.mozInnerScreenX, + top: rect.top - ele.ownerGlobal.mozInnerScreenY, + bottom: rect.bottom - ele.ownerGlobal.mozInnerScreenY, + }; + } + } + } catch (e) { + console.error(e); + } + + return { ele, rect }; +} + +/** + * This function takes an element and finds a suitable rect to draw the hover box on + * @param {Element} ele The element to find a suitale rect of + * @param {Document} doc The current document + * @returns A suitable rect or null + */ +export function getBestRectForElement(ele, doc) { + let lastRect; + let lastNode; + let rect; + let attemptExtend = false; + let node = ele; + while (node) { + rect = 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 = evenBetterElement(node, doc); + if (evenBetter) { + node = lastNode = evenBetter; + rect = getBoundingClientRect(evenBetter); + attemptExtend = false; + } + } + if (rect && attemptExtend) { + let extendNode = lastNode.nextSibling; + while (extendNode) { + if (extendNode.nodeType === doc.ELEMENT_NODE) { + break; + } + extendNode = extendNode.nextSibling; + if (!extendNode) { + const parentNode = lastNode.parentNode; + for (let i = 0; i < parentNode.childNodes.length; i++) { + if (parentNode.childNodes[i] === lastNode) { + extendNode = parentNode.childNodes[i + 1]; + } + } + } + } + if (extendNode) { + const extendRect = 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; + } + + return rect; +} + +/** + * This finds a better element by looking for elements with role article + * @param {Element} node The currently hovered node + * @param {Document} doc The current document + * @returns A better node or null + */ +function evenBetterElement(node, doc) { + let el = node.parentNode; + const ELEMENT_NODE = doc.ELEMENT_NODE; + while (el && el.nodeType === ELEMENT_NODE) { + if (!el.getAttribute) { + return null; + } + if (el.getAttribute("role") === "article") { + const rect = 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; +} + +export class Region { + #x1; + #x2; + #y1; + #y2; + #xOffset; + #yOffset; + #windowDimensions; + + constructor(windowDimensions) { + this.resetDimensions(); + this.#windowDimensions = windowDimensions; + } + + /** + * Sets the dimensions if the given dimension is defined. + * Otherwise will reset the dimensions + * @param {Object} dims The new region 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 + * } + */ + set dimensions(dims) { + if (dims == null) { + this.resetDimensions(); + return; + } + + if (dims.left != null) { + this.left = dims.left; + } + if (dims.top != null) { + this.top = dims.top; + } + if (dims.right != null) { + this.right = dims.right; + } + if (dims.bottom != null) { + this.bottom = dims.bottom; + } + } + + get dimensions() { + return { + left: this.left, + top: this.top, + right: this.right, + bottom: this.bottom, + width: this.width, + height: this.height, + }; + } + + get isRegionValid() { + return this.#x1 + this.#x2 + this.#y1 + this.#y2 > 0; + } + + resetDimensions() { + this.#x1 = 0; + this.#x2 = 0; + this.#y1 = 0; + this.#y2 = 0; + this.#xOffset = 0; + this.#yOffset = 0; + } + + /** + * 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]; + } + } + + /** + * The region should never appear outside the document so the region will + * be shifted if the region is outside the page's width or height. + */ + shift() { + let didShift = false; + let xDiff = this.right - this.#windowDimensions.scrollWidth; + if (xDiff > 0) { + this.left -= xDiff; + this.right -= xDiff; + + didShift = true; + } + + let yDiff = this.bottom - this.#windowDimensions.scrollHeight; + if (yDiff > 0) { + this.top -= yDiff; + this.bottom -= yDiff; + + didShift = true; + } + + return didShift; + } + + /** + * The diagonal distance of the region + */ + 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 = Math.min(this.#windowDimensions.scrollHeight, Math.max(0, val)); + } + + get left() { + return Math.min(this.#x1, this.#x2); + } + set left(val) { + this.#x1 = Math.min(this.#windowDimensions.scrollWidth, Math.max(0, val)); + } + + get right() { + return Math.max(this.#x1, this.#x2); + } + set right(val) { + this.#x2 = Math.min(this.#windowDimensions.scrollWidth, Math.max(0, val)); + } + + get bottom() { + return Math.max(this.#y1, this.#y2); + } + set bottom(val) { + this.#y2 = Math.min(this.#windowDimensions.scrollHeight, Math.max(0, val)); + } + + get width() { + return Math.abs(this.#x2 - this.#x1); + } + get height() { + return Math.abs(this.#y2 - this.#y1); + } + + get x1() { + return this.#x1; + } + get x2() { + return this.#x2; + } + get y1() { + return this.#y1; + } + get y2() { + return this.#y2; + } +} + +export class WindowDimensions { + #clientHeight = null; + #clientWidth = null; + #scrollHeight = null; + #scrollWidth = null; + #scrollX = null; + #scrollY = null; + #scrollMinX = null; + #scrollMinY = null; + #devicePixelRatio = null; + + set dimensions(dimensions) { + if (dimensions.clientHeight != null) { + this.#clientHeight = dimensions.clientHeight; + } + if (dimensions.clientWidth != null) { + this.#clientWidth = dimensions.clientWidth; + } + if (dimensions.scrollHeight != null) { + this.#scrollHeight = dimensions.scrollHeight; + } + if (dimensions.scrollWidth != null) { + this.#scrollWidth = dimensions.scrollWidth; + } + if (dimensions.scrollX != null) { + this.#scrollX = dimensions.scrollX; + } + if (dimensions.scrollY != null) { + this.#scrollY = dimensions.scrollY; + } + if (dimensions.scrollMinX != null) { + this.#scrollMinX = dimensions.scrollMinX; + } + if (dimensions.scrollMinY != null) { + this.#scrollMinY = dimensions.scrollMinY; + } + if (dimensions.devicePixelRatio != null) { + this.#devicePixelRatio = dimensions.devicePixelRatio; + } + } + + get dimensions() { + return { + clientHeight: this.#clientHeight, + clientWidth: this.#clientWidth, + scrollHeight: this.#scrollHeight, + scrollWidth: this.#scrollWidth, + scrollX: this.#scrollX, + scrollY: this.#scrollY, + scrollMinX: this.#scrollMinX, + scrollMinY: this.#scrollMinY, + devicePixelRatio: this.#devicePixelRatio, + }; + } + + get clientWidth() { + return this.#clientWidth; + } + + get clientHeight() { + return this.#clientHeight; + } + + get scrollWidth() { + return this.#scrollWidth; + } + + get scrollHeight() { + return this.#scrollHeight; + } + + get scrollX() { + return this.#scrollX; + } + + get scrollY() { + return this.#scrollY; + } + + get scrollMinX() { + return this.#scrollMinX; + } + + get scrollMinY() { + return this.#scrollMinY; + } + + get devicePixelRatio() { + return this.#devicePixelRatio; + } + + reset() { + this.#clientHeight = 0; + this.#clientWidth = 0; + this.#scrollHeight = 0; + this.#scrollWidth = 0; + this.#scrollX = 0; + this.#scrollY = 0; + this.#scrollMinX = 0; + this.#scrollMinY = 0; + } +} diff --git a/browser/components/screenshots/screenshots-buttons.css b/browser/components/screenshots/screenshots-buttons.css new file mode 100644 index 0000000000..82b075bccb --- /dev/null +++ b/browser/components/screenshots/screenshots-buttons.css @@ -0,0 +1,35 @@ +/* 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/. */ + +:host { + position: absolute; + /* position about 4px above the container ensuring overlap with toolbar/chrome */ + top: -8px; + inset-inline-end: 10px; + z-index: 3; + padding: 12px; + background-color: var(--arrowpanel-background); + color: var(--arrowpanel-color); + border-radius: var(--arrowpanel-border-radius); +} + +.full-page { + background-image: url("chrome://browser/content/screenshots/menu-fullpage.svg"); +} + +.visible-page { + background-image: url("chrome://browser/content/screenshots/menu-visible.svg"); +} + +.full-page, .visible-page { + -moz-context-properties: fill, stroke; + fill: currentColor; + stroke: var(--color-accent-primary); + background-position: center top; + background-repeat: no-repeat; + background-size: 46px 46px; + min-width: 90px; + padding: 46px 5px 5px; + margin: 2px; +} diff --git a/browser/components/screenshots/screenshots-buttons.js b/browser/components/screenshots/screenshots-buttons.js new file mode 100644 index 0000000000..864505ae2f --- /dev/null +++ b/browser/components/screenshots/screenshots-buttons.js @@ -0,0 +1,68 @@ +/* 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`. +{ + ChromeUtils.defineESModuleGetters(this, { + ScreenshotsUtils: "resource:///modules/ScreenshotsUtils.sys.mjs", + }); + + class ScreenshotsButtons extends MozXULElement { + static get markup() { + return ` + <html:link rel="stylesheet" href="chrome://global/skin/global.css"/> + <html:link rel="stylesheet" href="chrome://browser/content/screenshots/screenshots-buttons.css"/> + <html:button class="visible-page footer-button" data-l10n-id="screenshots-save-visible-button"></html:button> + <html:button class="full-page footer-button" data-l10n-id="screenshots-save-page-button"></html:button> + `; + } + + connectedCallback() { + const shadowRoot = this.attachShadow({ mode: "open" }); + document.l10n.connectRoot(shadowRoot); + + let fragment = MozXULElement.parseXULToFragment(this.constructor.markup); + this.shadowRoot.append(fragment); + + let visibleButton = shadowRoot.querySelector(".visible-page"); + visibleButton.onclick = function () { + ScreenshotsUtils.doScreenshot(gBrowser.selectedBrowser, "visible"); + }; + + let fullpageButton = shadowRoot.querySelector(".full-page"); + fullpageButton.onclick = function () { + ScreenshotsUtils.doScreenshot(gBrowser.selectedBrowser, "full_page"); + }; + } + + disconnectedCallback() { + document.l10n.disconnectRoot(this.shadowRoot); + } + + /** + * Focus the last used button. + * This will default to the visible page button. + * @param {String} buttonToFocus + */ + focusButton(buttonToFocus) { + if (buttonToFocus === "fullpage") { + this.shadowRoot + .querySelector(".full-page") + .focus({ focusVisible: true }); + } else { + this.shadowRoot + .querySelector(".visible-page") + .focus({ focusVisible: true }); + } + } + } + + customElements.define("screenshots-buttons", ScreenshotsButtons, { + extends: "toolbar", + }); +} diff --git a/browser/components/screenshots/tests/browser/browser.toml b/browser/components/screenshots/tests/browser/browser.toml new file mode 100644 index 0000000000..b363c14732 --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser.toml @@ -0,0 +1,55 @@ +[DEFAULT] +support-files = [ + "head.js", + "iframe-test-page.html", + "first-iframe.html", + "second-iframe.html", + "test-page.html", + "short-test-page.html", + "large-test-page.html", + "test-page-resize.html", +] + +prefs = [ + "extensions.screenshots.disabled=false", + "screenshots.browser.component.enabled=true", +] + +["browser_iframe_test.js"] + +["browser_overlay_keyboard_test.js"] + +["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_telemetry_tests.js"] + +["browser_screenshots_test_downloads.js"] + +["browser_screenshots_test_escape.js"] + +["browser_screenshots_test_full_page.js"] + +["browser_screenshots_test_page_crash.js"] +skip-if = ["!crashreporter"] + +["browser_screenshots_test_screenshot_too_big.js"] + +["browser_screenshots_test_toggle_pref.js"] + +["browser_screenshots_test_toolbar_button.js"] + +["browser_screenshots_test_visible.js"] + +["browser_test_element_picker.js"] + +["browser_test_resize.js"] diff --git a/browser/components/screenshots/tests/browser/browser_iframe_test.js b/browser/components/screenshots/tests/browser/browser_iframe_test.js new file mode 100644 index 0000000000..bb853fbe28 --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_iframe_test.js @@ -0,0 +1,123 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +add_task(async function test_selectingElementsInIframes() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: IFRAME_TEST_PAGE, + }, + async browser => { + let helper = new ScreenshotsHelper(browser); + helper.triggerUIFromToolbar(); + + // There are two iframes in the test page. One iframe is nested in the + // other so we SpecialPowers.spawn into the iframes to get the + // dimension/position of the elements within each iframe. + let elementDimensions = await SpecialPowers.spawn( + browser, + [], + async () => { + let divDims = content.document + .querySelector("div") + .getBoundingClientRect(); + + let iframe = content.document.querySelector("iframe"); + let iframesDivsDimArr = await SpecialPowers.spawn( + iframe, + [], + async () => { + let iframeDivDims = content.document + .querySelector("div") + .getBoundingClientRect(); + + // Element within the first iframe + iframeDivDims = { + left: iframeDivDims.left + content.window.mozInnerScreenX, + top: iframeDivDims.top + content.window.mozInnerScreenY, + width: iframeDivDims.width, + height: iframeDivDims.height, + }; + + let nestedIframe = content.document.querySelector("iframe"); + let nestedIframeDivDims = await SpecialPowers.spawn( + nestedIframe, + [], + async () => { + let secondIframeDivDims = content.document + .querySelector("div") + .getBoundingClientRect(); + + // Element within the nested iframe + secondIframeDivDims = { + left: + secondIframeDivDims.left + + content.document.defaultView.mozInnerScreenX, + top: + secondIframeDivDims.top + + content.document.defaultView.mozInnerScreenY, + width: secondIframeDivDims.width, + height: secondIframeDivDims.height, + }; + + return secondIframeDivDims; + } + ); + + return [iframeDivDims, nestedIframeDivDims]; + } + ); + + // Offset each element position for the browser window + for (let dims of iframesDivsDimArr) { + dims.left -= content.window.mozInnerScreenX; + dims.top -= content.window.mozInnerScreenY; + } + + return [divDims].concat(iframesDivsDimArr); + } + ); + + info(JSON.stringify(elementDimensions, null, 2)); + + for (let el of elementDimensions) { + let x = el.left + el.width / 2; + let y = el.top + el.height / 2; + + mouse.move(x, y); + await helper.waitForHoverElementRect(el.width, el.height); + mouse.click(x, y); + + await helper.waitForStateChange("selected"); + + let dimensions = await helper.getSelectionRegionDimensions(); + + is( + dimensions.left, + el.left, + "The region left position matches the elements left position" + ); + is( + dimensions.top, + el.top, + "The region top position matches the elements top position" + ); + is( + dimensions.width, + el.width, + "The region width matches the elements width" + ); + is( + dimensions.height, + el.height, + "The region height matches the elements height" + ); + + mouse.click(500, 500); + await helper.waitForStateChange("crosshairs"); + } + } + ); +}); diff --git a/browser/components/screenshots/tests/browser/browser_overlay_keyboard_test.js b/browser/components/screenshots/tests/browser/browser_overlay_keyboard_test.js new file mode 100644 index 0000000000..592587a67d --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_overlay_keyboard_test.js @@ -0,0 +1,748 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; +const KEY_TO_EXPECTED_POSITION_ARRAY = [ + [ + "ArrowRight", + { + top: 10, + left: 20, + bottom: 20, + right: 30, + }, + ], + [ + "ArrowDown", + { + top: 20, + left: 20, + bottom: 30, + right: 30, + }, + ], + [ + "ArrowLeft", + { + top: 20, + left: 10, + bottom: 30, + right: 20, + }, + ], + [ + "ArrowUp", + { + top: 10, + left: 10, + bottom: 20, + right: 20, + }, + ], + ["ArrowDown", { top: 20, left: 10, bottom: 30, right: 20 }], + [ + "ArrowRight", + { + top: 20, + left: 20, + bottom: 30, + right: 30, + }, + ], + [ + "ArrowUp", + { + top: 10, + left: 20, + bottom: 20, + right: 30, + }, + ], + [ + "ArrowLeft", + { + top: 10, + left: 10, + bottom: 20, + right: 20, + }, + ], +]; + +const SHIFT_PLUS_KEY_TO_EXPECTED_POSITION_ARRAY = [ + [ + "ArrowRight", + { + top: 100, + left: 200, + bottom: 200, + right: 300, + }, + ], + [ + "ArrowDown", + { + top: 200, + left: 200, + bottom: 300, + right: 300, + }, + ], + [ + "ArrowLeft", + { + top: 200, + left: 100, + bottom: 300, + right: 200, + }, + ], + [ + "ArrowUp", + { + top: 100, + left: 100, + bottom: 200, + right: 200, + }, + ], + ["ArrowDown", { top: 200, left: 100, bottom: 300, right: 200 }], + [ + "ArrowRight", + { + top: 200, + left: 200, + bottom: 300, + right: 300, + }, + ], + [ + "ArrowUp", + { + top: 100, + left: 200, + bottom: 200, + right: 300, + }, + ], + [ + "ArrowLeft", + { + top: 100, + left: 100, + bottom: 200, + right: 200, + }, + ], +]; + +/** + * + */ +add_task(async function test_moveRegionWithKeyboard() { + 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(); + + // Because the screenshots state won't go from draggingReady to + // dragging until the diagonal distance is 40px, we have to resize + // it to get the region to 10px x 10px + await helper.dragOverlay(10, 10, 100, 100); + mouse.down(100, 100); + await helper.assertStateChange("resizing"); + mouse.move(20, 20); + mouse.up(20, 20); + await helper.assertStateChange("selected"); + + await SpecialPowers.spawn( + browser, + [KEY_TO_EXPECTED_POSITION_ARRAY], + async keyToExpectedPositionArray => { + function assertSelectionRegionDimensions( + actualDimensions, + expectedDimensions + ) { + is( + actualDimensions.top, + expectedDimensions.top, + "Top dimension is correct" + ); + is( + actualDimensions.left, + expectedDimensions.left, + "Left dimension is correct" + ); + is( + actualDimensions.bottom, + expectedDimensions.bottom, + "Bottom dimension is correct" + ); + is( + actualDimensions.right, + expectedDimensions.right, + "Right dimension is correct" + ); + } + + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + + // Test moving each corner of the region + screenshotsChild.overlay.topLeftMover.focus(); + + // Check that initial position is correct + assertSelectionRegionDimensions( + screenshotsChild.overlay.selectionRegion.dimensions, + { + top: 10, + left: 10, + bottom: 20, + right: 20, + } + ); + + for (let [key, expectedDimensions] of keyToExpectedPositionArray) { + EventUtils.synthesizeKey(key, { repeat: 20 }, content); + assertSelectionRegionDimensions( + screenshotsChild.overlay.selectionRegion.dimensions, + expectedDimensions + ); + } + + // Test moving the highlight element + screenshotsChild.overlay.highlightEl.focus(); + + // Check that initial position is correct + assertSelectionRegionDimensions( + screenshotsChild.overlay.selectionRegion.dimensions, + { + top: 10, + left: 10, + bottom: 20, + right: 20, + } + ); + + for (let [key, expectedDimensions] of keyToExpectedPositionArray) { + EventUtils.synthesizeKey(key, { repeat: 10 }, content); + assertSelectionRegionDimensions( + screenshotsChild.overlay.selectionRegion.dimensions, + expectedDimensions + ); + } + } + ); + + helper.triggerUIFromToolbar(); + await helper.waitForOverlayClosed(); + } + ); +}); + +add_task(async function test_moveRegionWithKeyboardWithShift() { + 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(100, 100, 200, 200); + + await SpecialPowers.spawn( + browser, + [SHIFT_PLUS_KEY_TO_EXPECTED_POSITION_ARRAY], + async shiftPlusKeyToExpectedPositionArray => { + function assertSelectionRegionDimensions( + actualDimensions, + expectedDimensions + ) { + is( + actualDimensions.top, + expectedDimensions.top, + "Top dimension is correct" + ); + is( + actualDimensions.left, + expectedDimensions.left, + "Left dimension is correct" + ); + is( + actualDimensions.bottom, + expectedDimensions.bottom, + "Bottom dimension is correct" + ); + is( + actualDimensions.right, + expectedDimensions.right, + "Right dimension is correct" + ); + } + + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + + // Test moving each corner of the region + screenshotsChild.overlay.topLeftMover.focus(); + + // Check that initial position is correct + assertSelectionRegionDimensions( + screenshotsChild.overlay.selectionRegion.dimensions, + { + top: 100, + left: 100, + bottom: 200, + right: 200, + } + ); + + for (let [ + key, + expectedDimensions, + ] of shiftPlusKeyToExpectedPositionArray) { + EventUtils.synthesizeKey( + key, + { repeat: 20, shiftKey: true }, + content + ); + assertSelectionRegionDimensions( + screenshotsChild.overlay.selectionRegion.dimensions, + expectedDimensions + ); + } + + // Test moving the highlight element + screenshotsChild.overlay.highlightEl.focus(); + + // Check that initial position is correct + assertSelectionRegionDimensions( + screenshotsChild.overlay.selectionRegion.dimensions, + { + top: 100, + left: 100, + bottom: 200, + right: 200, + } + ); + + for (let [ + key, + expectedDimensions, + ] of shiftPlusKeyToExpectedPositionArray) { + EventUtils.synthesizeKey( + key, + { repeat: 10, shiftKey: true }, + content + ); + assertSelectionRegionDimensions( + screenshotsChild.overlay.selectionRegion.dimensions, + expectedDimensions + ); + } + } + ); + + helper.triggerUIFromToolbar(); + await helper.waitForOverlayClosed(); + } + ); +}); + +add_task(async function test_moveRegionWithKeyboardWithAccelKey() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: TEST_PAGE, + }, + async browser => { + let helper = new ScreenshotsHelper(browser); + + await helper.scrollContentWindow(100, 100); + + let contentWindowDimensions = await helper.getContentDimensions(); + ok(contentWindowDimensions, "Got dimensions back from the content"); + + helper.triggerUIFromToolbar(); + + await helper.waitForOverlay(); + + await helper.dragOverlay(100, 100, 200, 200); + + info("Test moving the the highlight element"); + await SpecialPowers.spawn( + browser, + [contentWindowDimensions], + async contentDimensions => { + function assertSelectionRegionDimensions( + actualDimensions, + expectedDimensions + ) { + is( + actualDimensions.top, + expectedDimensions.top, + "Top dimension is correct" + ); + is( + actualDimensions.left, + expectedDimensions.left, + "Left dimension is correct" + ); + is( + actualDimensions.bottom, + expectedDimensions.bottom, + "Bottom dimension is correct" + ); + is( + actualDimensions.right, + expectedDimensions.right, + "Right dimension is correct" + ); + } + + let { scrollX, scrollY, clientHeight, clientWidth } = + contentDimensions; + + const HIGHLIGHT_CONTROL_PLUS_KEY_TO_EXPECTED_POSITION_ARRAY = [ + [ + "ArrowRight", + { + top: scrollY, + left: scrollX + clientWidth - 100, + bottom: scrollY + 100, + right: scrollX + clientWidth, + }, + ], + [ + "ArrowDown", + { + top: scrollY + clientHeight - 100, + left: scrollX + clientWidth - 100, + bottom: scrollY + clientHeight, + right: scrollX + clientWidth, + }, + ], + [ + "ArrowLeft", + { + top: scrollY + clientHeight - 100, + left: scrollX, + bottom: scrollY + clientHeight, + right: scrollX + 100, + }, + ], + [ + "ArrowUp", + { + top: scrollY, + left: scrollX, + bottom: scrollY + 100, + right: scrollX + 100, + }, + ], + [ + "ArrowDown", + { + top: scrollY + clientHeight - 100, + left: scrollX, + bottom: scrollY + clientHeight, + right: scrollX + 100, + }, + ], + [ + "ArrowRight", + { + top: scrollY + clientHeight - 100, + left: scrollX + clientWidth - 100, + bottom: scrollY + clientHeight, + right: scrollX + clientWidth, + }, + ], + [ + "ArrowUp", + { + top: scrollY, + left: scrollX + clientWidth - 100, + bottom: scrollY + 100, + right: scrollX + clientWidth, + }, + ], + [ + "ArrowLeft", + { + top: scrollY, + left: scrollX, + bottom: scrollY + 100, + right: scrollX + 100, + }, + ], + ]; + + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + screenshotsChild.overlay.highlightEl.focus(); + + // Move the region around in a clockwise direction + // Check that original position is correct + assertSelectionRegionDimensions( + screenshotsChild.overlay.selectionRegion.dimensions, + { + top: 100, + left: 100, + bottom: 200, + right: 200, + } + ); + + for (let [ + key, + expectedDimensions, + ] of HIGHLIGHT_CONTROL_PLUS_KEY_TO_EXPECTED_POSITION_ARRAY) { + EventUtils.synthesizeKey(key, { accelKey: true }, content); + assertSelectionRegionDimensions( + screenshotsChild.overlay.selectionRegion.dimensions, + expectedDimensions + ); + } + } + ); + + mouse.click(300, 300); + await helper.assertStateChange("crosshairs"); + + await helper.dragOverlay(200, 200, 300, 300); + + info("Test moving the corners clockwise"); + await SpecialPowers.spawn( + browser, + [contentWindowDimensions], + async contentDimensions => { + function assertSelectionRegionDimensions( + actualDimensions, + expectedDimensions + ) { + is( + actualDimensions.top, + expectedDimensions.top, + "Top dimension is correct" + ); + is( + actualDimensions.left, + expectedDimensions.left, + "Left dimension is correct" + ); + is( + actualDimensions.bottom, + expectedDimensions.bottom, + "Bottom dimension is correct" + ); + is( + actualDimensions.right, + expectedDimensions.right, + "Right dimension is correct" + ); + } + + let { scrollX, scrollY, clientHeight, clientWidth } = + contentDimensions; + + const CONTROL_PLUS_KEY_TO_EXPECTED_POSITION_ARRAY = [ + [ + "ArrowRight", + { + top: scrollY + 100, + left: scrollX + 100 + 100, + bottom: scrollY + 100 + 100, + right: scrollX + clientWidth, + }, + ], + [ + "ArrowDown", + { + top: scrollY + 100 + 100, + left: scrollX + 100 + 100, + bottom: scrollY + clientHeight, + right: scrollX + clientWidth, + }, + ], + [ + "ArrowLeft", + { + top: scrollY + 100 + 100, + left: scrollX, + bottom: scrollY + clientHeight, + right: scrollX + 100 + 100, + }, + ], + [ + "ArrowUp", + { + top: scrollY, + left: scrollX, + bottom: scrollY + 100 + 100, + right: scrollX + 100 + 100, + }, + ], + ]; + + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + screenshotsChild.overlay.topLeftMover.focus(); + + // Move the region around in a clockwise direction + // Check that original position is correct + assertSelectionRegionDimensions( + screenshotsChild.overlay.selectionRegion.dimensions, + { + top: 200, + left: 200, + bottom: 300, + right: 300, + } + ); + + for (let [ + key, + expectedDimensions, + ] of CONTROL_PLUS_KEY_TO_EXPECTED_POSITION_ARRAY) { + EventUtils.synthesizeKey(key, { accelKey: true }, content); + assertSelectionRegionDimensions( + screenshotsChild.overlay.selectionRegion.dimensions, + expectedDimensions + ); + } + } + ); + + mouse.click(400, 400); + await helper.assertStateChange("crosshairs"); + + await helper.dragOverlay(200, 200, 300, 300); + + info("Test moving the corners counter clockwise"); + await SpecialPowers.spawn( + browser, + [contentWindowDimensions], + async contentDimensions => { + function assertSelectionRegionDimensions( + actualDimensions, + expectedDimensions + ) { + is( + actualDimensions.top, + expectedDimensions.top, + "Top dimension is correct" + ); + is( + actualDimensions.left, + expectedDimensions.left, + "Left dimension is correct" + ); + is( + actualDimensions.bottom, + expectedDimensions.bottom, + "Bottom dimension is correct" + ); + is( + actualDimensions.right, + expectedDimensions.right, + "Right dimension is correct" + ); + } + + let { scrollX, scrollY, clientHeight, clientWidth } = + contentDimensions; + + const CONTROL_PLUS_KEY_TO_EXPECTED_POSITION_ARRAY = [ + [ + "ArrowDown", + { + top: scrollY + 100 + 100, + left: scrollX + 100, + bottom: scrollY + clientHeight, + right: scrollX + 100 + 100, + }, + ], + [ + "ArrowRight", + { + top: scrollY + 100 + 100, + left: scrollX + 100 + 100, + bottom: scrollY + clientHeight, + right: scrollX + clientWidth, + }, + ], + [ + "ArrowUp", + { + top: scrollY, + left: scrollX + 100 + 100, + bottom: scrollY + 100 + 100, + right: scrollX + clientWidth, + }, + ], + [ + "ArrowLeft", + { + top: scrollY, + left: scrollX, + bottom: scrollY + 100 + 100, + right: scrollX + 100 + 100, + }, + ], + ]; + + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + screenshotsChild.overlay.topLeftMover.focus(); + + // Move the region around in a clockwise direction + // Check that original position is correct + assertSelectionRegionDimensions( + screenshotsChild.overlay.selectionRegion.dimensions, + { + top: 200, + left: 200, + bottom: 300, + right: 300, + } + ); + + for (let [ + key, + expectedDimensions, + ] of CONTROL_PLUS_KEY_TO_EXPECTED_POSITION_ARRAY) { + EventUtils.synthesizeKey(key, { accelKey: true }, content); + assertSelectionRegionDimensions( + screenshotsChild.overlay.selectionRegion.dimensions, + expectedDimensions + ); + } + } + ); + } + ); +}); 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..7fdb084ca6 --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_screenshots_drag_scroll_test.js @@ -0,0 +1,465 @@ +/* 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(); + info(JSON.stringify(contentInfo, null, 2)); + ok(contentInfo, "Got dimensions back from the content"); + + helper.triggerUIFromToolbar(); + + await helper.waitForOverlay(); + await helper.dragOverlay(10, 10, 500, 500); + + let { scrollWidth, scrollHeight } = + await helper.getScreenshotsOverlayDimensions(); + + is( + scrollWidth, + contentInfo.scrollWidth, + "The overlay spans the entire width of the page" + ); + + is( + scrollHeight, + contentInfo.scrollHeight, + "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.assertStateChange("resizing"); + + 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.waitForSelectionRegionSizeChange(490); + + let dimensions = await helper.getSelectionRegionDimensions(); + + is(dimensions.left, 0, "The box x1 position is now 0"); + is(dimensions.top, 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.waitForSelectionRegionSizeChange(255); + + dimensions = await helper.getSelectionRegionDimensions(); + + is(dimensions.left, 10, "The box x1 position is now 10 again"); + is(dimensions.top, 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( + contentInfo.scrollWidth - contentInfo.clientWidth, + contentInfo.scrollHeight - contentInfo.clientHeight + ); + + 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.assertStateChange("resizing"); + + 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.waitForSelectionRegionSizeChange(480); + + let dimensions = await helper.getSelectionRegionDimensions(); + + is(dimensions.left, startX + 240, "The box x1 position is now 3748"); + is(dimensions.top, startY + 240, "The box y1 position is now 3756"); + is(dimensions.width, 260, "The box width is now 260"); + is(dimensions.height, 260, "The box height is now 260"); + + 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.waitForSelectionRegionSizeChange(252); + + dimensions = await helper.getSelectionRegionDimensions(); + + is(dimensions.left, startX, "The box x1 position is now 3508 again"); + is(dimensions.top, 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.getSelectionRegionDimensions(); + + is(dimensions.left, startX, "The box x1 position is 10"); + is(dimensions.top, 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 + await helper.escapeKeyInContent(); + await helper.assertStateChange("crosshairs"); + + await helper.dragOverlay( + scrollX + startX, + scrollY + startY, + scrollX + endX, + scrollY + endY + ); + + await helper.scrollContentWindow(0, 0); + + dimensions = await helper.getSelectionRegionDimensions(); + + is(dimensions.left, scrollX + startX, "The box x1 position is 1010"); + is(dimensions.top, 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 + await helper.escapeKeyInContent(); + await helper.assertStateChange("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.assertStateChange("resizing"); + + mouse.move( + contentInfo.clientWidth * 2 - 30, + contentInfo.clientHeight * 2 - 30 + ); + + mouse.up( + contentInfo.clientWidth * 2 - 30, + contentInfo.clientHeight * 2 - 30 + ); + + await helper.assertStateChange("selected"); + + let { left, top, right, bottom, width, height } = + await helper.getSelectionRegionDimensions(); + let { scrollWidth, scrollHeight } = + await helper.getScreenshotsOverlayDimensions(); + + is(left, startX, "The box left is 10"); + is(top, startY, "The box top is 10"); + is( + right, + contentInfo.clientWidth * 2 - 30, + "The box right is 2 x clientWidth - 30" + ); + is( + bottom, + contentInfo.clientHeight * 2 - 30, + "The box right is 2 x clientHeight - 30" + ); + is( + width, + contentInfo.clientWidth * 2 - 40, + "The box right is 2 x clientWidth - 40" + ); + is( + height, + contentInfo.clientHeight * 2 - 40, + "The box right is 2 x clientHeight - 40" + ); + is( + scrollWidth, + contentInfo.scrollWidth, + "The overlay spans the entire width of the page" + ); + is( + scrollHeight, + contentInfo.scrollHeight, + "The overlay spans the entire height of the page" + ); + } + ); +}); + +/** + * test scroll if by edge + */ +add_task(async function test_scrollIfByEdge() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: TEST_PAGE, + }, + async browser => { + let helper = new ScreenshotsHelper(browser); + + let windowX = 1000; + let windowY = 1000; + + await helper.scrollContentWindow(windowX, windowY); + + await TestUtils.waitForTick(); + + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + let { scrollX, scrollY } = await helper.getContentDimensions(); + + is(scrollX, windowX, "Window x position is 1000"); + is(scrollY, windowY, "Window y position is 1000"); + + let startX = 1100; + let startY = 1100; + let endX = 1010; + let endY = 1010; + + // The window won't scroll if the state is draggingReady so we move to + // get into the dragging state and then move again to scroll the window + mouse.down(startX, startY); + await helper.assertStateChange("draggingReady"); + mouse.move(1050, 1050); + await helper.assertStateChange("dragging"); + mouse.move(endX, endY); + mouse.up(endX, endY); + await helper.assertStateChange("selected"); + + windowX = 990; + windowY = 990; + await helper.waitForScrollTo(windowX, windowY); + + ({ scrollX, scrollY } = await helper.getContentDimensions()); + + is(scrollX, windowX, "Window x position is 990"); + is(scrollY, windowY, "Window y position is 990"); + + let contentInfo = await helper.getContentDimensions(); + + endX = windowX + contentInfo.clientWidth - 10; + endY = windowY + contentInfo.clientHeight - 10; + + info( + `starting to drag overlay to ${endX}, ${endY} in test\nclientInfo: ${JSON.stringify( + contentInfo + )}\n` + ); + await helper.dragOverlay(startX, startY, endX, endY, "selected"); + + windowX = 1000; + windowY = 1000; + await helper.waitForScrollTo(windowX, windowY); + + ({ scrollX, scrollY } = await helper.getContentDimensions()); + + is(scrollX, windowX, "Window x position is 1000"); + is(scrollY, windowY, "Window y position is 1000"); + } + ); +}); + +add_task(async function test_scrollIfByEdgeWithKeyboard() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: TEST_PAGE, + }, + async browser => { + let helper = new ScreenshotsHelper(browser); + + let windowX = 1000; + let windowY = 1000; + + await helper.scrollContentWindow(windowX, windowY); + + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + let { scrollX, scrollY, clientWidth, clientHeight } = + await helper.getContentDimensions(); + + is(scrollX, windowX, "Window x position is 1000"); + is(scrollY, windowY, "Window y position is 1000"); + + await helper.dragOverlay(1020, 1020, 1120, 1120); + + await helper.moveOverlayViaKeyboard("highlight", [ + { key: "ArrowLeft", options: { shiftKey: true } }, + { key: "ArrowLeft", options: {} }, + { key: "ArrowUp", options: { shiftKey: true } }, + { key: "ArrowUp", options: {} }, + ]); + + windowX = 989; + windowY = 989; + await helper.waitForScrollTo(windowX, windowY); + + ({ scrollX, scrollY, clientWidth, clientHeight } = + await helper.getContentDimensions()); + + is(scrollX, windowX, "Window x position is 989"); + is(scrollY, windowY, "Window y position is 989"); + + mouse.click(1200, 1200); + await helper.assertStateChange("crosshairs"); + await helper.dragOverlay( + scrollX + clientWidth - 100 - 20, + scrollY + clientHeight - 100 - 20, + scrollX + clientWidth - 20, + scrollY + clientHeight - 20 + ); + + await helper.moveOverlayViaKeyboard("highlight", [ + { key: "ArrowRight", options: { shiftKey: true } }, + { key: "ArrowRight", options: {} }, + { key: "ArrowDown", options: { shiftKey: true } }, + { key: "ArrowDown", options: {} }, + ]); + + windowX = 1000; + windowY = 1000; + await helper.waitForScrollTo(windowX, windowY); + + ({ scrollX, scrollY } = await helper.getContentDimensions()); + + is(scrollX, windowX, "Window x position is 1000"); + is(scrollY, windowY, "Window y position is 1000"); + } + ); +}); 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..605e0ae75c --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_screenshots_drag_test.js @@ -0,0 +1,488 @@ +/* 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 dragTest() { + 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 expected = Math.floor( + 490 * (await getContentDevicePixelRatio(browser)) + ); + + helper.triggerUIFromToolbar(); + + await helper.waitForOverlay(); + + await helper.dragOverlay(10, 10, 500, 500); + + let clipboardChanged = helper.waitForRawClipboardChange( + expected, + expected + ); + + await helper.clickCopyButton(); + + info("Waiting for clipboard change"); + let result = await clipboardChanged; + + info("result: " + JSON.stringify(result, null, 2)); + + 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 dragTest1Point5Zoom() { + 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"); + let expected = Math.floor( + 50 * (await getContentDevicePixelRatio(browser)) + ); + + helper.triggerUIFromToolbar(); + + await helper.waitForOverlay(); + + await helper.dragOverlay(300, 100, 350, 150); + + let clipboardChanged = helper.waitForRawClipboardChange( + expected, + expected + ); + + await helper.clickCopyButton(); + + info("Waiting for clipboard change"); + let result = await clipboardChanged; + + result.zoom = zoom; + result.devicePixelRatio = window.devicePixelRatio; + result.contentDevicePixelRatio = await getContentDevicePixelRatio( + browser + ); + + info("result: " + JSON.stringify(result, null, 2)); + + 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 clickOverlayResetState() { + 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.assertStateChange("crosshairs"); + } + ); +}); + +/** + * This function drags an area and clicks the + * cancel button to restart the overlay + */ +add_task(async function overlayCancelButton() { + 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); + + await helper.clickCancelButton(); + + await helper.assertStateChange("crosshairs"); + } + ); +}); + +/** + * 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 preserveBoxSizeWhenMovingOutOfWindowBounds() { + 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"); + let expected = Math.floor( + 490 * (await getContentDevicePixelRatio(browser)) + ); + + 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.assertStateChange("resizing"); + + mouse.move(10, 10); + + mouse.move(contentInfo.clientWidth - 10, contentInfo.clientHeight - 10); + + mouse.up( + Math.floor((endX - startX) / 2), + Math.floor((endY - startY) / 2) + ); + + await helper.assertStateChange("selected"); + + let clipboardChanged = helper.waitForRawClipboardChange( + expected, + expected + ); + + await helper.clickCopyButton(); + + info("Waiting for clipboard change"); + let result = await clipboardChanged; + + info("result: " + JSON.stringify(result, null, 2)); + + 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 resizeAllEdges() { + 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 expected = Math.floor( + 300 * (await getContentDevicePixelRatio(browser)) + ); + + 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.assertStateChange("resizing"); + + mouse.move(x, 100); + mouse.up(x, 100); + + await helper.assertStateChange("selected"); + + // drag bottom + mouse.down(x, 500); + + await helper.assertStateChange("resizing"); + + mouse.move(x, 400); + mouse.up(x, 400); + + await helper.assertStateChange("selected"); + + // drag right + let y = Math.floor((endY - startY) / 2); + mouse.down(500, y); + + await helper.assertStateChange("resizing"); + + mouse.move(400, y); + mouse.up(400, y); + + await helper.assertStateChange("selected"); + + // drag left + mouse.down(10, y); + + await helper.assertStateChange("resizing"); + + mouse.move(100, y); + mouse.up(100, y); + + await helper.assertStateChange("selected"); + + let clipboardChanged = helper.waitForRawClipboardChange( + expected, + expected + ); + + helper.endX = 400; + helper.endY = 400; + + await helper.clickCopyButton(); + + info("Waiting for clipboard change"); + let result = await clipboardChanged; + + info("result: " + JSON.stringify(result, null, 2)); + + 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 resizeAllCorners() { + 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 expected = Math.floor( + 300 * (await getContentDevicePixelRatio(browser)) + ); + + helper.triggerUIFromToolbar(); + + await helper.waitForOverlay(); + + await helper.dragOverlay(10, 10, 500, 500); + + // drag topright + mouse.down(500, 10); + + await helper.assertStateChange("resizing"); + + mouse.move(450, 50); + mouse.up(450, 50); + + await helper.assertStateChange("selected"); + + // drag bottomright + mouse.down(450, 500); + + await helper.assertStateChange("resizing"); + + mouse.move(400, 450); + mouse.up(400, 450); + + await helper.assertStateChange("selected"); + + // drag bottomleft + mouse.down(10, 450); + + await helper.assertStateChange("resizing"); + + mouse.move(50, 400); + mouse.up(50, 400); + + await helper.assertStateChange("selected"); + + // drag topleft + mouse.down(50, 50); + + await helper.assertStateChange("resizing"); + + mouse.move(100, 100); + mouse.up(100, 100); + + await helper.assertStateChange("selected"); + + let clipboardChanged = helper.waitForRawClipboardChange( + expected, + expected + ); + + helper.endX = 400; + helper.endY = 400; + + await helper.clickCopyButton(); + + info("Waiting for clipboard change"); + let result = await clipboardChanged; + + info("result: " + JSON.stringify(result, null, 2)); + + 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 tests clicking the overlay with the different mouse buttons + */ +add_task(async function test_otherMouseButtons() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: TEST_PAGE, + }, + async browser => { + let helper = new ScreenshotsHelper(browser); + helper.triggerUIFromToolbar(); + + await helper.waitForOverlay(); + + await helper.dragOverlay(10, 10, 100, 100); + + // click outside overlay + mouse.click(200, 200, { button: 1 }); + mouse.click(200, 200, { button: 2 }); + + await TestUtils.waitForTick(); + + await helper.assertStateChange("selected"); + + mouse.click(200, 200); + + await helper.assertStateChange("crosshairs"); + + mouse.down(10, 10, { button: 1 }); + mouse.move(100, 100, { button: 1 }); + mouse.up(100, 100, { button: 1 }); + + await TestUtils.waitForTick(); + + await helper.assertStateChange("crosshairs"); + + mouse.down(10, 10, { button: 2 }); + mouse.move(100, 100, { button: 2 }); + mouse.up(100, 100, { button: 2 }); + + await TestUtils.waitForTick(); + + await helper.assertStateChange("crosshairs"); + } + ); +}); 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..367f62205e --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_screenshots_focus_test.js @@ -0,0 +1,384 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const SCREENSHOTS_EVENTS = [ + { category: "screenshots", method: "started", object: "toolbar_button" }, + { category: "screenshots", method: "canceled", object: "escape" }, +]; + +const SCREENSHOTS_LAST_SCREENSHOT_METHOD_PREF = + "screenshots.browser.component.last-screenshot-method"; +const SCREENSHOTS_LAST_SAVED_METHOD_PREF = + "screenshots.browser.component.last-saved-method"; + +async function restoreFocusOnEscape(initialFocusElem, helper) { + info( + `restoreFocusOnEscape, focusedElement: ${Services.focus.focusedElement.localName}#${Services.focus.focusedElement.id}` + ); + is( + window, + BrowserWindowTracker.getTopWindow(), + "Our window is the top window" + ); + + let gotFocus; + if (Services.focus.focusedElement !== initialFocusElem) { + gotFocus = BrowserTestUtils.waitForEvent(initialFocusElem, "focus"); + await SimpleTest.promiseFocus(initialFocusElem.ownerGlobal); + Services.focus.setFocus(initialFocusElem, Services.focus.FLAG_BYKEY); + info( + `Waiting to place focus on initialFocusElem: ${initialFocusElem.localName}#${initialFocusElem.id}` + ); + await gotFocus; + } + is( + Services.focus.focusedElement, + initialFocusElem, + `The initial element #${initialFocusElem.id} has focus` + ); + + helper.assertPanelNotVisible(); + // open Screenshots with the keyboard shortcut + info( + "Triggering screenshots UI with the ctrl+shift+s and waiting for the panel" + ); + EventUtils.synthesizeKey("s", { shiftKey: true, accelKey: true }); + + let button = await helper.getPanelButton(".visible-page"); + info("Panel is now visible, got button: " + button.className); + info( + `focusedElement: ${Services.focus.focusedElement.localName}.${Services.focus.focusedElement.className}` + ); + + await BrowserTestUtils.waitForCondition(async () => { + return button.getRootNode().activeElement === button; + }, "The first button in the panel should have focus"); + + info( + "Sending Escape to dismiss the screenshots UI and for the panel to be closed" + ); + + let exitObserved = TestUtils.topicObserved("screenshots-exit"); + EventUtils.synthesizeKey("KEY_Escape"); + await helper.waitForPanelClosed(); + await exitObserved; + info("Waiting for the initialFocusElem to be the focusedElement"); + await BrowserTestUtils.waitForCondition(async () => { + return Services.focus.focusedElement === initialFocusElem; + }, "The initially focused element should have focus"); + + info( + `Screenshots did exit, focusedElement: ${Services.focus.focusedElement.localName}#${Services.focus.focusedElement.id}` + ); + helper.assertPanelNotVisible(); +} + +add_task(async function testPanelFocused() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: TEST_PAGE, + }, + async browser => { + await clearAllTelemetryEvents(); + let helper = new ScreenshotsHelper(browser); + + info("Opening Screenshots and waiting for the panel"); + helper.triggerUIFromToolbar(); + + let button = await helper.getPanelButton(".visible-page"); + info("Panel is now visible, got button: " + button.className); + info( + `focusedElement: ${Services.focus.focusedElement.localName}.${Services.focus.focusedElement.className}` + ); + + info("Waiting for the button to be the activeElement"); + await BrowserTestUtils.waitForCondition(() => { + return button.getRootNode().activeElement === button; + }, "The first button in the panel should have focus"); + + info("Sending Escape to close Screenshots"); + let exitObserved = TestUtils.topicObserved("screenshots-exit"); + EventUtils.synthesizeKey("KEY_Escape"); + + info("waiting for the panel to be closed"); + await helper.waitForPanelClosed(); + info("waiting for the overlay to be closed"); + await helper.waitForOverlayClosed(); + await exitObserved; + + info("Checking telemetry"); + await assertScreenshotsEvents(SCREENSHOTS_EVENTS); + helper.assertPanelNotVisible(); + } + ); +}); + +add_task(async function testRestoreFocusToChromeOnEscape() { + for (let focusSelector of [ + "#urlbar-input", // A focusable HTML chrome element + "tab[selected='true']", // The selected tab element + ]) { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: TEST_PAGE, + }, + async browser => { + let helper = new ScreenshotsHelper(browser); + helper.assertPanelNotVisible(); + let initialFocusElem = document.querySelector(focusSelector); + await SimpleTest.promiseFocus(window); + await restoreFocusOnEscape(initialFocusElem, helper); + } + ); + } +}); + +add_task(async function testRestoreFocusToToolbarbuttonOnEscape() { + const focusId = "PanelUI-menu-button"; // a toolbarbutton + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: TEST_PAGE, + }, + async browser => { + let helper = new ScreenshotsHelper(browser); + helper.assertPanelNotVisible(); + let initialFocusElem = document.getElementById(focusId); + await SimpleTest.promiseFocus(window); + await restoreFocusOnEscape(initialFocusElem, helper); + } + ); +}).skip(); // Bug 1867687 + +add_task(async function testRestoreFocusToContentOnEscape() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: 'data:text/html;charset=utf-8,%3Cinput type%3D"text" id%3D"field"%3E', + }, + async browser => { + let helper = new ScreenshotsHelper(browser); + await SimpleTest.promiseFocus(browser); + await BrowserTestUtils.synthesizeMouse("#field", 2, 2, {}, browser); + + let initialFocusElem = Services.focus.focusedElement; + await restoreFocusOnEscape(initialFocusElem, helper); + + is( + initialFocusElem, + document.activeElement, + "The browser element has focus" + ); + let focusId = await SpecialPowers.spawn(browser, [], () => { + return content.document.activeElement.id; + }); + is(focusId, "field", "The button in the content document has focus"); + } + ); +}); + +add_task(async function test_focusLastUsedMethod() { + await SpecialPowers.pushPrefEnv({ + set: [ + [SCREENSHOTS_LAST_SCREENSHOT_METHOD_PREF, ""], + [SCREENSHOTS_LAST_SAVED_METHOD_PREF, ""], + ["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: SHORT_TEST_PAGE, + }, + async browser => { + let helper = new ScreenshotsHelper(browser); + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + let expectedFocusedButton = await helper.getPanelButton(".visible-page"); + + await BrowserTestUtils.waitForCondition(() => { + return ( + expectedFocusedButton.getRootNode().activeElement === + expectedFocusedButton + ); + }, "The visible button in the panel should have focus"); + + is( + Services.focus.focusedElement, + expectedFocusedButton, + "The visible button in the panel should have focus" + ); + + let screenshotReady = TestUtils.topicObserved( + "screenshots-preview-ready" + ); + let fullpageButton = await helper.getPanelButton(".full-page"); + fullpageButton.click(); + await screenshotReady; + + let dialog = helper.getDialog(); + let retryButton = dialog._frame.contentDocument.getElementById("retry"); + retryButton.click(); + + await helper.waitForOverlay(); + + expectedFocusedButton = await helper.getPanelButton(".full-page"); + + await BrowserTestUtils.waitForCondition(() => { + return ( + expectedFocusedButton.getRootNode().activeElement === + expectedFocusedButton + ); + }, "The full page button in the panel should have focus"); + + is( + Services.focus.focusedElement, + expectedFocusedButton, + "The full button in the panel should have focus" + ); + + screenshotReady = TestUtils.topicObserved("screenshots-preview-ready"); + let visiblepageButton = await helper.getPanelButton(".visible-page"); + visiblepageButton.click(); + await screenshotReady; + + dialog = helper.getDialog(); + retryButton = dialog._frame.contentDocument.getElementById("retry"); + retryButton.click(); + + await helper.waitForOverlay(); + + expectedFocusedButton = await helper.getPanelButton(".visible-page"); + + await BrowserTestUtils.waitForCondition(() => { + return ( + expectedFocusedButton.getRootNode().activeElement === + expectedFocusedButton + ); + }, "The visible button in the panel should have focus"); + + is( + Services.focus.focusedElement, + expectedFocusedButton, + "The visible button in the panel should have focus" + ); + + screenshotReady = TestUtils.topicObserved("screenshots-preview-ready"); + expectedFocusedButton.click(); + await screenshotReady; + + dialog = helper.getDialog(); + + expectedFocusedButton = + dialog._frame.contentDocument.getElementById("download"); + + await BrowserTestUtils.waitForCondition(() => { + return ( + expectedFocusedButton.getRootNode().activeElement === + expectedFocusedButton + ); + }, "The download button in the preview dialog should have focus"); + + is( + Services.focus.focusedElement, + expectedFocusedButton, + "The download button in the preview dialog should have focus" + ); + + let screenshotExit = TestUtils.topicObserved("screenshots-exit"); + let copyButton = dialog._frame.contentDocument.getElementById("copy"); + copyButton.click(); + await screenshotExit; + + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + let visibleButton = await helper.getPanelButton(".visible-page"); + + screenshotReady = TestUtils.topicObserved("screenshots-preview-ready"); + visibleButton.click(); + await screenshotReady; + + dialog = helper.getDialog(); + + expectedFocusedButton = + dialog._frame.contentDocument.getElementById("copy"); + + await BrowserTestUtils.waitForCondition(() => { + return ( + expectedFocusedButton.getRootNode().activeElement === + expectedFocusedButton + ); + }, "The copy button in the preview dialog should have focus"); + + is( + Services.focus.focusedElement, + expectedFocusedButton, + "The copy button in the preview dialog should have focus" + ); + + screenshotExit = TestUtils.topicObserved("screenshots-exit"); + let downloadButton = + dialog._frame.contentDocument.getElementById("download"); + downloadButton.click(); + + await Promise.all([screenshotExit, downloadFinishedPromise]); + + await publicDownloads.removeFinished(); + + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + visibleButton = await helper.getPanelButton(".visible-page"); + + screenshotReady = TestUtils.topicObserved("screenshots-preview-ready"); + visibleButton.click(); + await screenshotReady; + + dialog = helper.getDialog(); + + expectedFocusedButton = + dialog._frame.contentDocument.getElementById("download"); + + await BrowserTestUtils.waitForCondition(() => { + return ( + expectedFocusedButton.getRootNode().activeElement === + expectedFocusedButton + ); + }, "The download button in the preview dialog should have focus"); + + is( + Services.focus.focusedElement, + expectedFocusedButton, + "The download button in the preview dialog should have focus" + ); + + screenshotExit = TestUtils.topicObserved("screenshots-exit"); + helper.triggerUIFromToolbar(); + await screenshotExit; + } + ); + + await SpecialPowers.popPrefEnv(); +}); 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..0f54255dc0 --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_screenshots_overlay_panel_sync.js @@ -0,0 +1,74 @@ +/* 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.assertStateChange("selected"); + + helper.assertPanelNotVisible(); + + mouse.click(600, 600); + + await helper.assertStateChange("crosshairs"); + + 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.assertStateChange("selected"); + + await BrowserTestUtils.switchTab(gBrowser, tab1); + await BrowserTestUtils.switchTab(gBrowser, screenshotsTab); + + Assert.ok(await helper.isOverlayInitialized(), "Overlay is open"); + helper.assertPanelNotVisible(); + + 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..fbb5788a5a --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_screenshots_page_unload.js @@ -0,0 +1,42 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const SCREENSHOTS_EVENTS = [ + { category: "screenshots", method: "started", object: "toolbar_button" }, + { category: "screenshots", method: "canceled", object: "navigation" }, +]; + +add_task(async function test() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: SHORT_TEST_PAGE, + }, + async browser => { + await clearAllTelemetryEvents(); + await SpecialPowers.spawn(browser, [SHORT_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(); + await helper.waitForOverlay(); + + await SpecialPowers.spawn(browser, [], () => { + content.document.querySelector("#clickMe").click(); + }); + + await helper.waitForOverlayClosed(); + + await assertScreenshotsEvents(SCREENSHOTS_EVENTS); + } + ); +}); 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..bebc70e915 --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_screenshots_short_page_test.js @@ -0,0 +1,123 @@ +/* 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 smaller than the viewport + */ +add_task(async function test_overlay() { + 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 { scrollWidth, scrollHeight } = + await helper.getScreenshotsOverlayDimensions(); + Assert.equal( + scrollWidth, + contentInfo.clientWidth, + "The overlay spans the width of the window" + ); + + Assert.equal( + scrollHeight, + contentInfo.clientHeight, + "The overlay spans the height of the window" + ); + } + ); +}); + +add_task(async function test_window_resize() { + 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"); + + const originalWindowWidth = window.outerWidth; + const originalWindowHeight = window.outerHeight; + + const BIG_WINDOW_SIZE = 920; + const SMALL_WINDOW_SIZE = 620; + + await helper.resizeContentWindow(SMALL_WINDOW_SIZE, SMALL_WINDOW_SIZE); + + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + await helper.dragOverlay(10, 10, 100, 100); + + let dimensions = await helper.getScreenshotsOverlayDimensions(); + let oldWidth = dimensions.scrollWidth; + let oldHeight = dimensions.scrollHeight; + + await helper.resizeContentWindow(BIG_WINDOW_SIZE, BIG_WINDOW_SIZE); + await helper.waitForSelectionLayerDimensionChange(oldWidth, oldHeight); + + contentInfo = await helper.getContentDimensions(); + dimensions = await helper.getScreenshotsOverlayDimensions(); + 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" + ); + + oldWidth = dimensions.scrollWidth; + oldHeight = dimensions.scrollHeight; + + await helper.resizeContentWindow(SMALL_WINDOW_SIZE, SMALL_WINDOW_SIZE); + await helper.waitForSelectionLayerDimensionChange(oldWidth, oldHeight); + + contentInfo = await helper.getContentDimensions(); + dimensions = await helper.getScreenshotsOverlayDimensions(); + 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" + ); + + Assert.less( + dimensions.scrollWidth, + BIG_WINDOW_SIZE, + "Screenshots overlay is smaller than the big window width" + ); + Assert.less( + dimensions.scrollHeight, + BIG_WINDOW_SIZE, + "Screenshots overlay is smaller than the big window height" + ); + + await helper.resizeContentWindow( + originalWindowWidth, + originalWindowHeight + ); + } + ); +}); diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_telemetry_tests.js b/browser/components/screenshots/tests/browser/browser_screenshots_telemetry_tests.js new file mode 100644 index 0000000000..782ffa3fd3 --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_screenshots_telemetry_tests.js @@ -0,0 +1,466 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const STARTED_AND_CANCELED_EVENTS = [ + { category: "screenshots", method: "started", object: "toolbar_button" }, + { category: "screenshots", method: "canceled", object: "toolbar_button" }, + { category: "screenshots", method: "started", object: "shortcut" }, + { category: "screenshots", method: "canceled", object: "shortcut" }, + { category: "screenshots", method: "started", object: "context_menu" }, + { category: "screenshots", method: "canceled", object: "context_menu" }, + { category: "screenshots", method: "started", object: "quick_actions" }, + { category: "screenshots", method: "canceled", object: "quick_actions" }, +]; + +const STARTED_RETRY_EVENTS = [ + { category: "screenshots", method: "started", object: "toolbar_button" }, + { category: "screenshots", method: "selected", object: "visible" }, + { category: "screenshots", method: "started", object: "preview_retry" }, +]; + +const CANCEL_EVENTS = [ + { category: "screenshots", method: "started", object: "toolbar_button" }, + { category: "screenshots", method: "selected", object: "full_page" }, + { category: "screenshots", method: "canceled", object: "preview_cancel" }, + { category: "screenshots", method: "started", object: "toolbar_button" }, + { category: "screenshots", method: "canceled", object: "overlay_cancel" }, +]; + +const COPY_EVENTS = [ + { category: "screenshots", method: "started", object: "toolbar_button" }, + { category: "screenshots", method: "selected", object: "visible" }, + { category: "screenshots", method: "copy", object: "preview_copy" }, + { category: "screenshots", method: "started", object: "toolbar_button" }, + { category: "screenshots", method: "copy", object: "overlay_copy" }, +]; + +const CONTENT_EVENTS = [ + { category: "screenshots", method: "selected", object: "region_selection" }, + { category: "screenshots", method: "selected", object: "region_selection" }, + { category: "screenshots", method: "started", object: "overlay_retry" }, + { category: "screenshots", method: "selected", object: "element" }, +]; + +const EXTRA_OVERLAY_EVENTS = [ + { category: "screenshots", method: "started", object: "toolbar_button" }, + { + category: "screenshots", + method: "copy", + object: "overlay_copy", + extra: { + element: "1", + region: "1", + move: "1", + resize: "1", + fullpage: "0", + visible: "0", + }, + }, +]; + +const EXTRA_EVENTS = [ + { category: "screenshots", method: "started", object: "toolbar_button" }, + { category: "screenshots", method: "selected", object: "visible" }, + { category: "screenshots", method: "started", object: "preview_retry" }, + { category: "screenshots", method: "selected", object: "full_page" }, + { + category: "screenshots", + method: "copy", + object: "preview_copy", + extra: { + element: "0", + region: "0", + move: "0", + resize: "0", + fullpage: "1", + visible: "1", + }, + }, +]; + +add_task(async function test_started_and_canceled_events() { + await SpecialPowers.pushPrefEnv({ + set: [ + ["browser.urlbar.quickactions.enabled", true], + ["browser.urlbar.suggest.quickactions", true], + ["browser.urlbar.shortcuts.quickactions", true], + ], + }); + + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: SHORT_TEST_PAGE, + }, + async browser => { + await clearAllTelemetryEvents(); + let helper = new ScreenshotsHelper(browser); + let screenshotExit; + + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + screenshotExit = TestUtils.topicObserved("screenshots-exit"); + helper.triggerUIFromToolbar(); + await helper.waitForOverlayClosed(); + await screenshotExit; + + EventUtils.synthesizeKey("s", { shiftKey: true, accelKey: true }); + await helper.waitForOverlay(); + + screenshotExit = TestUtils.topicObserved("screenshots-exit"); + EventUtils.synthesizeKey("s", { shiftKey: true, accelKey: true }); + await helper.waitForOverlayClosed(); + await screenshotExit; + + let contextMenu = document.getElementById("contentAreaContextMenu"); + let popupShownPromise = BrowserTestUtils.waitForEvent( + contextMenu, + "popupshown" + ); + await BrowserTestUtils.synthesizeMouseAtPoint( + 50, + 50, + { + type: "contextmenu", + button: 2, + }, + browser + ); + await popupShownPromise; + + contextMenu.activateItem( + contextMenu.querySelector("#context-take-screenshot") + ); + await helper.waitForOverlay(); + + popupShownPromise = BrowserTestUtils.waitForEvent( + contextMenu, + "popupshown" + ); + await BrowserTestUtils.synthesizeMouseAtPoint( + 50, + 50, + { + type: "contextmenu", + button: 2, + }, + browser + ); + await popupShownPromise; + + screenshotExit = TestUtils.topicObserved("screenshots-exit"); + contextMenu.activateItem( + contextMenu.querySelector("#context-take-screenshot") + ); + await helper.waitForOverlayClosed(); + await screenshotExit; + + await UrlbarTestUtils.promiseAutocompleteResultPopup({ + window, + value: "screenshot", + waitForFocus: SimpleTest.waitForFocus, + }); + let { result } = await UrlbarTestUtils.getDetailsOfResultAt(window, 1); + Assert.equal(result.type, UrlbarUtils.RESULT_TYPE.DYNAMIC); + Assert.equal(result.providerName, "quickactions"); + + info("Trigger the screenshot mode"); + EventUtils.synthesizeKey("KEY_ArrowDown", {}, window); + EventUtils.synthesizeKey("KEY_Enter", {}, window); + await helper.waitForOverlay(); + + await UrlbarTestUtils.promiseAutocompleteResultPopup({ + window, + value: "screenshot", + waitForFocus: SimpleTest.waitForFocus, + }); + ({ result } = await UrlbarTestUtils.getDetailsOfResultAt(window, 1)); + Assert.equal(result.type, UrlbarUtils.RESULT_TYPE.DYNAMIC); + Assert.equal(result.providerName, "quickactions"); + + info("Trigger the screenshot mode"); + screenshotExit = TestUtils.topicObserved("screenshots-exit"); + EventUtils.synthesizeKey("KEY_ArrowDown", {}, window); + EventUtils.synthesizeKey("KEY_Enter", {}, window); + await helper.waitForOverlayClosed(); + await screenshotExit; + + await assertScreenshotsEvents(STARTED_AND_CANCELED_EVENTS); + } + ); +}); + +add_task(async function test_started_retry() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: TEST_PAGE, + }, + async browser => { + await clearAllTelemetryEvents(); + let helper = new ScreenshotsHelper(browser); + + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + let panel = await helper.waitForPanel(); + + 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(); + await screenshotReady; + + let dialog = helper.getDialog(); + let retryButton = dialog._frame.contentDocument.getElementById("retry"); + ok(retryButton, "Got the retry button"); + retryButton.click(); + + await helper.waitForOverlay(); + + await assertScreenshotsEvents(STARTED_RETRY_EVENTS); + } + ); +}); + +add_task(async function test_canceled() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: TEST_PAGE, + }, + async browser => { + await clearAllTelemetryEvents(); + let helper = new ScreenshotsHelper(browser); + + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + let panel = await helper.waitForPanel(); + + let screenshotReady = TestUtils.topicObserved( + "screenshots-preview-ready" + ); + + // click the full page button in panel + let fullPageButton = panel + .querySelector("screenshots-buttons") + .shadowRoot.querySelector(".full-page"); + fullPageButton.click(); + await screenshotReady; + + let dialog = helper.getDialog(); + let cancelButton = dialog._frame.contentDocument.getElementById("cancel"); + ok(cancelButton, "Got the cancel button"); + + let screenshotExit = TestUtils.topicObserved("screenshots-exit"); + cancelButton.click(); + + await helper.waitForOverlayClosed(); + await screenshotExit; + + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + screenshotExit = TestUtils.topicObserved("screenshots-exit"); + await helper.clickPreviewCancelButton(); + + await helper.waitForOverlayClosed(); + await screenshotExit; + + await assertScreenshotsEvents(CANCEL_EVENTS); + } + ); +}); + +add_task(async function test_copy() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: TEST_PAGE, + }, + async browser => { + await clearAllTelemetryEvents(); + let helper = new ScreenshotsHelper(browser); + let contentInfo = await helper.getContentDimensions(); + ok(contentInfo, "Got dimensions back from the content"); + let devicePixelRatio = await getContentDevicePixelRatio(browser); + + let expectedWidth = Math.floor( + devicePixelRatio * contentInfo.clientWidth + ); + let expectedHeight = Math.floor( + devicePixelRatio * contentInfo.clientHeight + ); + + helper.triggerUIFromToolbar(); + info("waiting for overlay"); + await helper.waitForOverlay(); + + info("waiting for panel"); + let panel = await helper.waitForPanel(); + + 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(); + info("clicked visible page, waiting for screenshots-preview-ready"); + await screenshotReady; + + let dialog = helper.getDialog(); + let copyButton = dialog._frame.contentDocument.getElementById("copy"); + + let screenshotExit = TestUtils.topicObserved("screenshots-exit"); + let clipboardChanged = helper.waitForRawClipboardChange( + expectedWidth, + expectedHeight + ); + + // click copy button on dialog box + info("clicking the copy button"); + copyButton.click(); + + info("Waiting for clipboard change"); + await clipboardChanged; + info("waiting for screenshot exit"); + await screenshotExit; + + helper.triggerUIFromToolbar(); + info("waiting for overlay again"); + await helper.waitForOverlay(); + + await helper.dragOverlay(50, 50, 300, 300); + + clipboardChanged = helper.waitForRawClipboardChange( + devicePixelRatio * 250, + devicePixelRatio * 250 + ); + + screenshotExit = TestUtils.topicObserved("screenshots-exit"); + await helper.clickCopyButton(); + + info("Waiting for clipboard change"); + await clipboardChanged; + info("Waiting for exit again"); + await screenshotExit; + + info("Waiting for assertScreenshotsEvents"); + await assertScreenshotsEvents(COPY_EVENTS); + } + ); +}); + +add_task(async function test_content_events() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: TEST_PAGE, + }, + async browser => { + await clearAllTelemetryEvents(); + let helper = new ScreenshotsHelper(browser); + + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + await helper.dragOverlay(50, 50, 300, 300); + + await helper.dragOverlay(300, 300, 333, 333, "selected"); + + await helper.dragOverlay(150, 150, 200, 200, "selected"); + + mouse.click(11, 11); + await helper.assertStateChange("crosshairs"); + + await helper.clickTestPageElement(); + + let screenshotExit = TestUtils.topicObserved("screenshots-exit"); + + await helper.clickCopyButton(); + + info("Waiting for exit"); + await screenshotExit; + + await assertScreenshotsEvents(CONTENT_EVENTS, "content", false); + await assertScreenshotsEvents(EXTRA_OVERLAY_EVENTS); + } + ); +}); + +add_task(async function test_extra_telemetry() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: TEST_PAGE, + }, + async browser => { + await clearAllTelemetryEvents(); + let helper = new ScreenshotsHelper(browser); + let contentInfo = await helper.getContentDimensions(); + ok(contentInfo, "Got dimensions back from the content"); + + helper.triggerUIFromToolbar(); + info("waiting for overlay"); + await helper.waitForOverlay(); + + info("waiting for panel"); + let panel = await helper.waitForPanel(); + + 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(); + info("clicked visible page, waiting for screenshots-preview-ready"); + await screenshotReady; + + let dialog = helper.getDialog(); + let retryButton = dialog._frame.contentDocument.getElementById("retry"); + retryButton.click(); + + info("waiting for panel"); + panel = await helper.waitForPanel(); + + screenshotReady = TestUtils.topicObserved("screenshots-preview-ready"); + + // click the full page button in panel + let fullPageButton = panel + .querySelector("screenshots-buttons") + .shadowRoot.querySelector(".full-page"); + fullPageButton.click(); + await screenshotReady; + + let screenshotExit = TestUtils.topicObserved("screenshots-exit"); + + dialog = helper.getDialog(); + let copyButton = dialog._frame.contentDocument.getElementById("copy"); + retryButton.click(); + // click copy button on dialog box + info("clicking the copy button"); + copyButton.click(); + + info("waiting for screenshot exit"); + await screenshotExit; + + info("Waiting for assertScreenshotsEvents"); + await assertScreenshotsEvents(EXTRA_EVENTS); + } + ); +}); 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..770a7ae06b --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_downloads.js @@ -0,0 +1,186 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const SCREENSHOTS_EVENTS = [ + { category: "screenshots", method: "started", object: "toolbar_button" }, + { category: "screenshots", method: "download", object: "overlay_download" }, + { category: "screenshots", method: "started", object: "toolbar_button" }, + { category: "screenshots", method: "selected", object: "visible" }, + { category: "screenshots", method: "download", object: "preview_download" }, +]; + +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 => { + await clearAllTelemetryEvents(); + let helper = new ScreenshotsHelper(browser); + + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + await helper.dragOverlay(10, 10, 500, 500); + + await helper.clickDownloadButton(); + + info("wait for download to finish"); + let download = await downloadFinishedPromise; + + ok(download.succeeded, "Download should succeed"); + + await publicDownloads.removeFinished(); + + await waitForScreenshotsEventCount(2); + + 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 downloadButton = + dialog._frame.contentDocument.getElementById("download"); + ok(downloadButton, "Got the download button"); + + let screenshotExit = TestUtils.topicObserved("screenshots-exit"); + // click download button on dialog box + downloadButton.click(); + + info("wait for download to finish"); + download = await downloadFinishedPromise; + + ok(download.succeeded, "Download should succeed"); + + await publicDownloads.removeFinished(); + await screenshotExit; + await assertScreenshotsEvents(SCREENSHOTS_EVENTS); + } + ); +}); + +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(); + let screenshotExit = TestUtils.topicObserved("screenshots-exit"); + await 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(); + await screenshotExit; + } + ); +}); 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..73db436ff1 --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_escape.js @@ -0,0 +1,35 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const SCREENSHOTS_EVENTS = [ + { category: "screenshots", method: "started", object: "toolbar_button" }, + { category: "screenshots", method: "canceled", object: "escape" }, +]; + +add_task(async function test_fullpageScreenshot() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: TEST_PAGE, + }, + async browser => { + await clearAllTelemetryEvents(); + let helper = new ScreenshotsHelper(browser); + + // click toolbar button so panel shows + helper.triggerUIFromToolbar(); + + await helper.waitForOverlay(); + + EventUtils.synthesizeKey("KEY_F6", { shiftKey: true }); + + EventUtils.synthesizeKey("KEY_Escape"); + + await helper.waitForOverlayClosed(); + + await assertScreenshotsEvents(SCREENSHOTS_EVENTS); + } + ); +}); 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..51cda963d9 --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_full_page.js @@ -0,0 +1,175 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +function assertRange(lhs, rhsMin, rhsMax, msg) { + Assert.ok(lhs >= rhsMin && lhs <= rhsMax, msg); +} + +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"); + let devicePixelRatio = await getContentDevicePixelRatio(browser); + + let expectedWidth = Math.floor( + devicePixelRatio * contentInfo.scrollWidth + ); + let expectedHeight = Math.floor( + devicePixelRatio * contentInfo.scrollHeight + ); + + // click toolbar button so panel shows + helper.triggerUIFromToolbar(); + + let panel = await helper.waitForPanel(); + + 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.getElementById("copy"); + ok(copyButton, "Got the copy button"); + + let clipboardChanged = helper.waitForRawClipboardChange( + expectedWidth, + expectedHeight + ); + + // click copy button on dialog box + copyButton.click(); + + info("Waiting for clipboard change"); + let result = await clipboardChanged; + + info("result: " + JSON.stringify(result, null, 2)); + info("contentInfo: " + JSON.stringify(contentInfo, null, 2)); + + Assert.equal(result.width, expectedWidth, "Widths should be equal"); + Assert.equal(result.height, expectedHeight, "Heights should be equal"); + + // top left + assertRange(result.color.topLeft[0], 110, 111, "R color value"); + assertRange(result.color.topLeft[1], 110, 111, "G color value"); + assertRange(result.color.topLeft[2], 110, 111, "B color value"); + + // top right + assertRange(result.color.topRight[0], 55, 56, "R color value"); + assertRange(result.color.topRight[1], 155, 156, "G color value"); + assertRange(result.color.topRight[2], 155, 156, "B color value"); + + // bottom left + assertRange(result.color.bottomLeft[0], 105, 106, "R color value"); + assertRange(result.color.bottomLeft[1], 55, 56, "G color value"); + assertRange(result.color.bottomLeft[2], 105, 106, "B color value"); + + // bottom right + assertRange(result.color.bottomRight[0], 52, 53, "R color value"); + assertRange(result.color.bottomRight[1], 127, 128, "G color value"); + assertRange(result.color.bottomRight[2], 152, 153, "B color value"); + } + ); +}); + +add_task(async function test_fullpageScreenshotScrolled() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: TEST_PAGE, + }, + async browser => { + let helper = new ScreenshotsHelper(browser); + + await SpecialPowers.spawn(browser, [], () => { + content.scrollTo(0, 2008); + }); + let contentInfo = await helper.getContentDimensions(); + ok(contentInfo, "Got dimensions back from the content"); + let devicePixelRatio = await getContentDevicePixelRatio(browser); + + let expectedWidth = Math.floor( + devicePixelRatio * contentInfo.scrollWidth + ); + let expectedHeight = Math.floor( + devicePixelRatio * contentInfo.scrollHeight + ); + + // click toolbar button so panel shows + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + let panel = await helper.waitForPanel(); + + 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.getElementById("copy"); + ok(copyButton, "Got the copy button"); + + let clipboardChanged = helper.waitForRawClipboardChange( + expectedWidth, + expectedHeight + ); + + // click copy button on dialog box + copyButton.click(); + + info("Waiting for clipboard change"); + let result = await clipboardChanged; + + info("result: " + JSON.stringify(result, null, 2)); + info("contentInfo: " + JSON.stringify(contentInfo, null, 2)); + + Assert.equal(result.width, expectedWidth, "Widths should be equal"); + Assert.equal(result.height, expectedHeight, "Heights should be equal"); + + // top left + assertRange(result.color.topLeft[0], 110, 111, "R color value"); + assertRange(result.color.topLeft[1], 110, 111, "G color value"); + assertRange(result.color.topLeft[2], 110, 111, "B color value"); + + // top right + assertRange(result.color.topRight[0], 55, 56, "R color value"); + assertRange(result.color.topRight[1], 155, 156, "G color value"); + assertRange(result.color.topRight[2], 155, 156, "B color value"); + + // bottom left + assertRange(result.color.bottomLeft[0], 105, 106, "R color value"); + assertRange(result.color.bottomLeft[1], 55, 56, "G color value"); + assertRange(result.color.bottomLeft[2], 105, 106, "B color value"); + + // bottom right + assertRange(result.color.bottomRight[0], 52, 53, "R color value"); + assertRange(result.color.bottomRight[1], 127, 128, "G color value"); + assertRange(result.color.bottomRight[2], 152, 153, "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..bed9d006db --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_page_crash.js @@ -0,0 +1,54 @@ +/* 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(); + await helper.waitForOverlay(); + + let panel = await helper.waitForPanel(gBrowser.selectedBrowser); + + let waitForPanelHide = BrowserTestUtils.waitForMutationCondition( + panel, + { attributes: true }, + () => { + return BrowserTestUtils.isHidden(panel); + } + ); + + await BrowserTestUtils.crashFrame(browser); + + await waitForPanelHide; + ok( + BrowserTestUtils.isHidden(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.isHidden(panel), + "Panel buttons are hidden after page crash" + ); + } + ); +}); diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_test_screenshot_too_big.js b/browser/components/screenshots/tests/browser/browser_screenshots_test_screenshot_too_big.js new file mode 100644 index 0000000000..4e2da3d494 --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_screenshot_too_big.js @@ -0,0 +1,90 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const SCREENSHOTS_EVENTS = [ + { category: "screenshots", method: "failed", object: "screenshot_too_large" }, + { category: "screenshots", method: "failed", object: "screenshot_too_large" }, + { category: "screenshots", method: "failed", object: "screenshot_too_large" }, + { category: "screenshots", method: "failed", object: "screenshot_too_large" }, +]; + +const { sinon } = ChromeUtils.importESModule( + "resource://testing-common/Sinon.sys.mjs" +); +ChromeUtils.defineESModuleGetters(this, { + ScreenshotsUtils: "resource:///modules/ScreenshotsUtils.sys.mjs", +}); + +add_task(async function test_screenshot_too_large_cropped() { + await clearAllTelemetryEvents(); + const screenshotsLocalization = new Localization( + ["browser/screenshots.ftl"], + true + ); + + let [errorTitle, errorMessage] = screenshotsLocalization.formatMessagesSync([ + { id: "screenshots-too-large-error-title" }, + { id: "screenshots-too-large-error-details" }, + ]); + let showAlertMessageStub = sinon + .stub(ScreenshotsUtils, "showAlertMessage") + .callsFake(function (title, message) { + is(title, errorTitle.value, "Got error title"); + is(message, errorMessage.value, "Got error message"); + }); + + let rect = { x: 0, y: 0, width: 40000, height: 40000, devicePixelRatio: 1 }; + + ScreenshotsUtils.cropScreenshotRectIfNeeded(rect); + + is( + rect.width, + MAX_CAPTURE_DIMENSION, + `The width is ${MAX_CAPTURE_DIMENSION}` + ); + is( + rect.height, + Math.floor(MAX_CAPTURE_AREA / MAX_CAPTURE_DIMENSION), + `The height is ${MAX_CAPTURE_AREA} / ${MAX_CAPTURE_DIMENSION}` + ); + + rect.width = 40000; + rect.hegith = 1; + + ScreenshotsUtils.cropScreenshotRectIfNeeded(rect); + + is( + rect.width, + MAX_CAPTURE_DIMENSION, + `The width was cropped to the max capture dimension (${MAX_CAPTURE_DIMENSION}).` + ); + + rect.width = 1; + rect.height = 40000; + + ScreenshotsUtils.cropScreenshotRectIfNeeded(rect); + + is( + rect.height, + MAX_CAPTURE_DIMENSION, + `The height was cropped to the max capture dimension (${MAX_CAPTURE_DIMENSION}).` + ); + + rect.width = 25000; + rect.height = 25000; + + ScreenshotsUtils.cropScreenshotRectIfNeeded(rect); + + is(rect.width, 25000, "The width was not cropped"); + is( + rect.height, + Math.floor(MAX_CAPTURE_AREA / 25000), + `The height was cropped to ${MAX_CAPTURE_AREA / 25000}` + ); + + showAlertMessageStub.restore(); + + await assertScreenshotsEvents(SCREENSHOTS_EVENTS); +}); 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..0aafba8fb3 --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_toggle_pref.js @@ -0,0 +1,289 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const { sinon } = ChromeUtils.importESModule( + "resource://testing-common/Sinon.sys.mjs" +); + +ChromeUtils.defineESModuleGetters(this, { + ScreenshotsUtils: "resource:///modules/ScreenshotsUtils.sys.mjs", +}); +ChromeUtils.defineLazyGetter(this, "ExtensionManagement", () => { + const { Management } = ChromeUtils.importESModule( + "resource://gre/modules/Extension.sys.mjs" + ); + 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: SHORT_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.isVisible(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.isVisible(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.isVisible(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.isVisible(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: SHORT_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: SHORT_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(); + + await SpecialPowers.popPrefEnv(); +}); 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..7b7a46f73d --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_visible.js @@ -0,0 +1,356 @@ +/* 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); + + let expectedWidth = Math.floor( + devicePixelRatio * contentInfo.clientWidth + ); + let expectedHeight = Math.floor( + devicePixelRatio * contentInfo.clientHeight + ); + + // 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.getElementById("copy"); + ok(copyButton, "Got the copy button"); + + let clipboardChanged = helper.waitForRawClipboardChange( + expectedWidth, + expectedHeight + ); + + // click copy button on dialog box + copyButton.click(); + + info("Waiting for clipboard change"); + let result = await clipboardChanged; + + info("result: " + JSON.stringify(result, null, 2)); + info("contentInfo: " + JSON.stringify(contentInfo, null, 2)); + + Assert.equal(result.width, expectedWidth, "Widths should be equal"); + 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_visibleScreenshotScrolledY() { + 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"); + let devicePixelRatio = await getContentDevicePixelRatio(browser); + + let expectedWidth = Math.floor( + devicePixelRatio * contentInfo.clientWidth + ); + let expectedHeight = Math.floor( + devicePixelRatio * contentInfo.clientHeight + ); + + // click toolbar button so panel shows + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + let panel = gBrowser.selectedBrowser.ownerDocument.querySelector( + "#screenshotsPagePanel" + ); + + 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.getElementById("copy"); + ok(copyButton, "Got the copy button"); + + let clipboardChanged = helper.waitForRawClipboardChange( + expectedWidth, + expectedHeight + ); + + // click copy button on dialog box + copyButton.click(); + + info("Waiting for clipboard change"); + let result = await clipboardChanged; + + // let result = await helper.getImageSizeAndColorFromClipboard(); + // debugger; + + info("result: " + JSON.stringify(result, null, 2)); + info("contentInfo: " + JSON.stringify(contentInfo, null, 2)); + + Assert.equal(result.width, expectedWidth, "Widths should be equal"); + 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_visibleScreenshotScrolledX() { + 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"); + let devicePixelRatio = await getContentDevicePixelRatio(browser); + + let expectedWidth = Math.floor( + devicePixelRatio * contentInfo.clientWidth + ); + let expectedHeight = Math.floor( + devicePixelRatio * contentInfo.clientHeight + ); + + // click toolbar button so panel shows + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + let panel = gBrowser.selectedBrowser.ownerDocument.querySelector( + "#screenshotsPagePanel" + ); + + 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.getElementById("copy"); + ok(copyButton, "Got the copy button"); + + let clipboardChanged = helper.waitForRawClipboardChange( + expectedWidth, + expectedHeight + ); + + // click copy button on dialog box + copyButton.click(); + + info("Waiting for clipboard change"); + let result = await clipboardChanged; + + info("result: " + JSON.stringify(result, null, 2)); + info("contentInfo: " + JSON.stringify(contentInfo, null, 2)); + + Assert.equal(result.width, expectedWidth, "Widths should be equal"); + 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_visibleScreenshotScrolledXAndY() { + 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"); + let devicePixelRatio = await getContentDevicePixelRatio(browser); + + let expectedWidth = Math.floor( + devicePixelRatio * contentInfo.clientWidth + ); + let expectedHeight = Math.floor( + devicePixelRatio * contentInfo.clientHeight + ); + + // click toolbar button so panel shows + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + let panel = gBrowser.selectedBrowser.ownerDocument.querySelector( + "#screenshotsPagePanel" + ); + + 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.getElementById("copy"); + ok(copyButton, "Got the copy button"); + + let clipboardChanged = helper.waitForRawClipboardChange( + expectedWidth, + expectedHeight + ); + + // click copy button on dialog box + copyButton.click(); + + info("Waiting for clipboard change"); + let result = await clipboardChanged; + + info("result: " + JSON.stringify(result, null, 2)); + info("contentInfo: " + JSON.stringify(contentInfo, null, 2)); + + Assert.equal(result.width, expectedWidth, "Widths should be equal"); + 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/browser_test_element_picker.js b/browser/components/screenshots/tests/browser/browser_test_element_picker.js new file mode 100644 index 0000000000..17ed2a0190 --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_test_element_picker.js @@ -0,0 +1,56 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +add_task(async function test_element_picker() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: TEST_PAGE, + }, + async browser => { + await clearAllTelemetryEvents(); + let helper = new ScreenshotsHelper(browser); + + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + await helper.clickTestPageElement(); + + let rect = await helper.getTestPageElementRect(); + let region = await helper.getSelectionRegionDimensions(); + + is( + region.left, + rect.left, + "The selected region left is the same as the element left" + ); + is( + region.right, + rect.right, + "The selected region right is the same as the element right" + ); + is( + region.top, + rect.top, + "The selected region top is the same as the element top" + ); + is( + region.bottom, + rect.bottom, + "The selected region bottom is the same as the element bottom" + ); + + mouse.click(10, 10); + await helper.waitForStateChange("crosshairs"); + + let hoverElementRegionValid = await helper.isHoverElementRegionValid(); + + ok(!hoverElementRegionValid, "Hover element rect is null"); + + mouse.click(10, 10); + await helper.waitForStateChange("crosshairs"); + } + ); +}); diff --git a/browser/components/screenshots/tests/browser/browser_test_resize.js b/browser/components/screenshots/tests/browser/browser_test_resize.js new file mode 100644 index 0000000000..b249a346d6 --- /dev/null +++ b/browser/components/screenshots/tests/browser/browser_test_resize.js @@ -0,0 +1,100 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const windowWidth = 768; + +add_task(async function test_window_resize() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: RESIZE_TEST_PAGE, + }, + async browser => { + let helper = new ScreenshotsHelper(browser); + await helper.resizeContentWindow(windowWidth, window.outerHeight); + const originalContentDimensions = await helper.getContentDimensions(); + info(JSON.stringify(originalContentDimensions, null, 2)); + + await helper.zoomBrowser(1.5); + + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + await helper.scrollContentWindow(windowWidth, window.outerHeight); + + await helper.clickTestPageElement("hello"); + + await helper.zoomBrowser(1); + + await helper.waitForOverlaySizeChangeTo( + originalContentDimensions.scrollWidth, + originalContentDimensions.scrollHeight + ); + + let contentDims = await helper.getContentDimensions(); + info(JSON.stringify(contentDims, null, 2)); + + is( + contentDims.scrollWidth, + originalContentDimensions.scrollWidth, + "Width of page is back to original" + ); + is( + contentDims.scrollHeight, + originalContentDimensions.scrollHeight, + "Height of page is back to original" + ); + } + ); +}); + +add_task(async function test_window_resize_vertical_writing_mode() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: RESIZE_TEST_PAGE, + }, + async browser => { + await SpecialPowers.spawn(browser, [], () => { + content.document.documentElement.style = "writing-mode: vertical-lr;"; + }); + + let helper = new ScreenshotsHelper(browser); + await helper.resizeContentWindow(windowWidth, window.outerHeight); + const originalContentDimensions = await helper.getContentDimensions(); + info(JSON.stringify(originalContentDimensions, null, 2)); + + await helper.zoomBrowser(1.5); + + helper.triggerUIFromToolbar(); + await helper.waitForOverlay(); + + await helper.scrollContentWindow(windowWidth, window.outerHeight); + + await helper.clickTestPageElement("hello"); + + await helper.zoomBrowser(1); + + await helper.waitForOverlaySizeChangeTo( + originalContentDimensions.scrollWidth, + originalContentDimensions.scrollHeight + ); + + let contentDims = await helper.getContentDimensions(); + info(JSON.stringify(contentDims, null, 2)); + + is( + contentDims.scrollWidth, + originalContentDimensions.scrollWidth, + "Width of page is back to original" + ); + is( + contentDims.scrollHeight, + originalContentDimensions.scrollHeight, + "Height of page is back to original" + ); + } + ); +}); diff --git a/browser/components/screenshots/tests/browser/first-iframe.html b/browser/components/screenshots/tests/browser/first-iframe.html new file mode 100644 index 0000000000..9b0c123486 --- /dev/null +++ b/browser/components/screenshots/tests/browser/first-iframe.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<html lang="en"> + <head> + <meta charset="utf-8"> + <style> + div { + font-size: 40px; + margin: 30px; + width: 234px; + height: 51px; + color: blue; + } + </style> + </head> +<body> + <div>Hello world!</div> + <iframe + width="300" + height="300" + src="https://example.org/browser/browser/components/screenshots/tests/browser/second-iframe.html" + ></iframe> +</body> +</html> diff --git a/browser/components/screenshots/tests/browser/head.js b/browser/components/screenshots/tests/browser/head.js new file mode 100644 index 0000000000..171e3b8c41 --- /dev/null +++ b/browser/components/screenshots/tests/browser/head.js @@ -0,0 +1,951 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const { TelemetryTestUtils } = ChromeUtils.importESModule( + "resource://testing-common/TelemetryTestUtils.sys.mjs" +); +const { UrlbarTestUtils } = ChromeUtils.importESModule( + "resource://testing-common/UrlbarTestUtils.sys.mjs" +); + +const TEST_ROOT = getRootDirectory(gTestPath).replace( + "chrome://mochitests/content", + "https://example.com" +); + +const TEST_PAGE = TEST_ROOT + "test-page.html"; +const SHORT_TEST_PAGE = TEST_ROOT + "short-test-page.html"; +const LARGE_TEST_PAGE = TEST_ROOT + "large-test-page.html"; +const IFRAME_TEST_PAGE = TEST_ROOT + "iframe-test-page.html"; +const RESIZE_TEST_PAGE = TEST_ROOT + "test-page-resize.html"; + +const { MAX_CAPTURE_DIMENSION, MAX_CAPTURE_AREA } = ChromeUtils.importESModule( + "resource:///modules/ScreenshotsUtils.sys.mjs" +); + +const gScreenshotUISelectors = { + panel: "#screenshotsPagePanel", + fullPageButton: "button.full-page", + visiblePageButton: "button.visible-page", + copyButton: "button.#copy", +}; + +// MouseEvents is for the mouse events on the Anonymous content +const MouseEvents = { + mouse: new Proxy( + {}, + { + get: (target, name) => + async function (x, y, options = {}) { + if (name === "click") { + this.down(x, y, options); + this.up(x, y, options); + } else { + await safeSynthesizeMouseEventInContentPage(":root", x, y, { + type: "mouse" + name, + ...options, + }); + } + }, + } + ), +}; + +const { mouse } = MouseEvents; + +class ScreenshotsHelper { + constructor(browser) { + this.browser = browser; + this.selector = gScreenshotUISelectors; + } + + get toolbarButton() { + return this.browser.ownerDocument.getElementById("screenshot-button"); + } + + get panel() { + return this.browser.ownerDocument.querySelector(this.selector.panel); + } + + /** + * Click the screenshots button in the toolbar + */ + triggerUIFromToolbar() { + let button = this.toolbarButton; + ok( + BrowserTestUtils.isVisible(button), + "The screenshot toolbar button is visible" + ); + button.click(); + } + + async getPanelButton(selector) { + let panel = await this.waitForPanel(); + let screenshotsButtons = panel.querySelector("screenshots-buttons"); + ok(screenshotsButtons, "Found the screenshots-buttons"); + let button = screenshotsButtons.shadowRoot.querySelector(selector); + ok(button, `Found ${selector} button`); + return button; + } + + async waitForPanel() { + let panel = this.panel; + await BrowserTestUtils.waitForCondition(async () => { + if (!panel) { + panel = this.panel; + } + return panel && BrowserTestUtils.isVisible(panel); + }); + return panel; + } + + async waitForOverlay() { + const panel = await this.waitForPanel(); + ok(BrowserTestUtils.isVisible(panel), "Panel buttons are visible"); + + await BrowserTestUtils.waitForCondition(async () => { + let init = await this.isOverlayInitialized(); + return init; + }); + info("Overlay is visible"); + } + + async waitForPanelClosed() { + let panel = this.panel; + if (!panel) { + info("waitForPanelClosed: Panel doesnt exist"); + return; + } + if (panel.hidden) { + info("waitForPanelClosed: panel is already hidden"); + return; + } + info("waitForPanelClosed: waiting for the panel to become hidden"); + await BrowserTestUtils.waitForMutationCondition( + panel, + { attributes: true }, + () => { + return BrowserTestUtils.isHidden(panel); + } + ); + ok(BrowserTestUtils.isHidden(panel), "Panel buttons are hidden"); + info("waitForPanelClosed, panel is hidden: " + panel.hidden); + } + + async waitForOverlayClosed() { + await this.waitForPanelClosed(); + 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; + }); + } + + waitForStateChange(newState) { + return SpecialPowers.spawn(this.browser, [newState], async state => { + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + + await ContentTaskUtils.waitForCondition(() => { + info(`got ${screenshotsChild.overlay.state}. expected ${state}`); + return screenshotsChild.overlay.state === state; + }, `Wait for overlay state to be ${state}`); + + return screenshotsChild.overlay.state; + }); + } + + async assertStateChange(newState) { + let currentState = await this.waitForStateChange(newState); + + is( + currentState, + newState, + `The current state is ${currentState}, expected ${newState}` + ); + } + + getHoverElementRect() { + return ContentTask.spawn(this.browser, null, async () => { + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + return screenshotsChild.overlay.hoverElementRegion.dimensions; + }); + } + + isHoverElementRegionValid() { + return ContentTask.spawn(this.browser, null, async () => { + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + return screenshotsChild.overlay.hoverElementRegion.isRegionValid; + }); + } + + async waitForHoverElementRect(expectedWidth, expectedHeight) { + return SpecialPowers.spawn( + this.browser, + [expectedWidth, expectedHeight], + async (width, height) => { + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + let dimensions; + await ContentTaskUtils.waitForCondition(() => { + dimensions = screenshotsChild.overlay.hoverElementRegion.dimensions; + return dimensions.width === width && dimensions.height === height; + }, "The hover element region is the expected width and height"); + return dimensions; + } + ); + } + + async waitForSelectionRegionSizeChange(currentWidth) { + await ContentTask.spawn( + this.browser, + [currentWidth], + async ([currWidth]) => { + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + + let dimensions = screenshotsChild.overlay.selectionRegion.dimensions; + await ContentTaskUtils.waitForCondition(() => { + dimensions = screenshotsChild.overlay.selectionRegion.dimensions; + return dimensions.width !== currWidth; + }, "Wait for selection box width change"); + } + ); + } + + /** + * This will drag an overlay starting at the given startX and startY coordinates and ending + * at the given endX and endY coordinates. + * + * endY should be at least 70px from the bottom of window and endX should be at least + * 265px from the left of the window. If these requirements are not met then the + * overlay buttons (cancel, copy, download) will be positioned different from the default + * and the methods to click the overlay buttons will not work unless the updated + * position coordinates are supplied. + * See https://searchfox.org/mozilla-central/rev/af78418c4b5f2c8721d1a06486cf4cf0b33e1e8d/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs#1789,1798 + * for how the overlay buttons are positioned when the overlay rect is near the bottom or + * left edge of the window. + * + * Note: The distance of the rect should be greater than 40 to enter in the "dragging" state. + * See https://searchfox.org/mozilla-central/rev/af78418c4b5f2c8721d1a06486cf4cf0b33e1e8d/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs#809 + * @param {Number} startX The starting X coordinate. The left edge of the overlay rect. + * @param {Number} startY The starting Y coordinate. The top edge of the overlay rect. + * @param {Number} endX The end X coordinate. The right edge of the overlay rect. + * @param {Number} endY The end Y coordinate. The bottom edge of the overlay rect. + */ + async dragOverlay( + startX, + startY, + endX, + endY, + expectedStartingState = "crosshairs" + ) { + await this.assertStateChange(expectedStartingState); + + mouse.down(startX, startY); + + await Promise.any([ + this.waitForStateChange("draggingReady"), + this.waitForStateChange("resizing"), + ]); + Assert.ok(true, "The overlay is in the draggingReady or resizing state"); + + mouse.move(endX, endY); + + await Promise.any([ + this.waitForStateChange("dragging"), + this.waitForStateChange("resizing"), + ]); + Assert.ok(true, "The overlay is in the dragging or resizing state"); + + mouse.up(endX, endY); + + await this.assertStateChange("selected"); + + this.endX = endX; + this.endY = endY; + } + + async moveOverlayViaKeyboard(mover, events) { + await SpecialPowers.spawn( + this.browser, + [mover, events], + async (moverToFocus, eventsArr) => { + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + + let overlay = screenshotsChild.overlay; + + switch (moverToFocus) { + case "highlight": + overlay.highlightEl.focus({ focusVisible: true }); + break; + case "mover-bottomLeft": + overlay.bottomLeftMover.focus({ focusVisible: true }); + break; + case "mover-bottomRight": + overlay.bottomRightMover.focus({ focusVisible: true }); + break; + case "mover-topLeft": + overlay.topLeftMover.focus({ focusVisible: true }); + break; + case "mover-topRight": + overlay.topRightMover.focus({ focusVisible: true }); + break; + } + screenshotsChild.overlay.highlightEl.focus(); + + for (let event of eventsArr) { + EventUtils.synthesizeKey( + event.key, + { type: "keydown", ...event.options }, + content + ); + + await ContentTaskUtils.waitForCondition( + () => overlay.state === "resizing", + "Wait for overlay state to be resizing" + ); + + EventUtils.synthesizeKey( + event.key, + { type: "keyup", ...event.options }, + content + ); + + await ContentTaskUtils.waitForCondition( + () => overlay.state === "selected", + "Wait for overlay state to be selected" + ); + } + } + ); + } + + async scrollContentWindow(x, y) { + let promise = BrowserTestUtils.waitForContentEvent(this.browser, "scroll"); + let contentDims = await this.getContentDimensions(); + await ContentTask.spawn( + this.browser, + [x, y, contentDims], + async ([xPos, yPos, cDims]) => { + content.window.scroll(xPos, yPos); + + info(JSON.stringify(cDims, null, 2)); + const scrollbarHeight = {}; + const scrollbarWidth = {}; + content.window.windowUtils.getScrollbarSize( + false, + scrollbarWidth, + scrollbarHeight + ); + + await ContentTaskUtils.waitForCondition(() => { + function isCloseEnough(a, b, diff) { + return Math.abs(a - b) <= diff; + } + + info( + `scrollbarWidth: ${scrollbarWidth.value}, scrollbarHeight: ${scrollbarHeight.value}` + ); + info( + `scrollX: ${content.window.scrollX}, scrollY: ${content.window.scrollY}, scrollMaxX: ${content.window.scrollMaxX}, scrollMaxY: ${content.window.scrollMaxY}` + ); + + // Sometimes (read intermittently) the scroll width/height will be + // off by the width/height of the scrollbar when we are expecting the + // page to be scrolled to the very end. To mitigate this, we check + // that the below differences are within the scrollbar width/height. + return ( + (content.window.scrollX === xPos || + isCloseEnough( + cDims.clientWidth + content.window.scrollX, + cDims.scrollWidth, + scrollbarWidth.value + 1 + )) && + (content.window.scrollY === yPos || + isCloseEnough( + cDims.clientHeight + content.window.scrollY, + cDims.scrollHeight, + scrollbarHeight.value + 1 + )) + ); + }, `Waiting for window to scroll to ${xPos}, ${yPos}`); + } + ); + await promise; + } + + async waitForScrollTo(x, y) { + await ContentTask.spawn(this.browser, [x, y], async ([xPos, yPos]) => { + await ContentTaskUtils.waitForCondition(() => { + info( + `Got scrollX: ${content.window.scrollX}. scrollY: ${content.window.scrollY}` + ); + return ( + content.window.scrollX === xPos && content.window.scrollY === yPos + ); + }, `Waiting for window to scroll to ${xPos}, ${yPos}`); + }); + } + + async resizeContentWindow(width, height) { + this.browser.ownerGlobal.resizeTo(width, height); + await TestUtils.waitForCondition( + () => window.outerHeight === height && window.outerWidth === width, + "Waiting for window to resize" + ); + } + + async clickDownloadButton() { + let { centerX: x, centerY: y } = await ContentTask.spawn( + this.browser, + null, + async () => { + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + let { left, top, width, height } = + screenshotsChild.overlay.downloadButton.getBoundingClientRect(); + let centerX = left + width / 2; + let centerY = top + height / 2; + return { centerX, centerY }; + } + ); + + info(`clicking download button at ${x}, ${y}`); + mouse.click(x, y); + } + + async clickCopyButton() { + let { centerX: x, centerY: y } = await ContentTask.spawn( + this.browser, + null, + async () => { + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + let { left, top, width, height } = + screenshotsChild.overlay.copyButton.getBoundingClientRect(); + let centerX = left + width / 2; + let centerY = top + height / 2; + return { centerX, centerY }; + } + ); + + info(`clicking copy button at ${x}, ${y}`); + mouse.click(x, y); + } + + async clickCancelButton() { + let { centerX: x, centerY: y } = await ContentTask.spawn( + this.browser, + null, + async () => { + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + let { left, top, width, height } = + screenshotsChild.overlay.cancelButton.getBoundingClientRect(); + let centerX = left + width / 2; + let centerY = top + height / 2; + return { centerX, centerY }; + } + ); + + info(`clicking cancel button at ${x}, ${y}`); + mouse.click(x, y); + } + + async clickPreviewCancelButton() { + let { centerX: x, centerY: y } = await ContentTask.spawn( + this.browser, + null, + async () => { + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + let { left, top, width, height } = + screenshotsChild.overlay.previewCancelButton.getBoundingClientRect(); + let centerX = left + width / 2; + let centerY = top + height / 2; + return { centerX, centerY }; + } + ); + + info(`clicking cancel button at ${x}, ${y}`); + mouse.click(x, y); + } + + escapeKeyInContent() { + return SpecialPowers.spawn(this.browser, [], () => { + EventUtils.synthesizeKey("KEY_Escape", {}, content); + }); + } + + getTestPageElementRect(elementId = "testPageElement") { + return ContentTask.spawn(this.browser, [elementId], async id => { + let ele = content.document.getElementById(id); + return ele.getBoundingClientRect(); + }); + } + + async clickTestPageElement(elementId = "testPageElement") { + let rect = await this.getTestPageElementRect(elementId); + let dims = await this.getContentDimensions(); + + let x = Math.floor(rect.x + dims.scrollX + rect.width / 2); + let y = Math.floor(rect.y + dims.scrollY + rect.height / 2); + + mouse.move(x, y); + await this.waitForHoverElementRect(rect.width, rect.height); + mouse.down(x, y); + await this.assertStateChange("draggingReady"); + mouse.up(x, y); + await this.assertStateChange("selected"); + } + + async zoomBrowser(zoom) { + let promise = BrowserTestUtils.waitForContentEvent(this.browser, "resize"); + await SpecialPowers.spawn(this.browser, [zoom], zoomLevel => { + const { Layout } = ChromeUtils.importESModule( + "chrome://mochitests/content/browser/accessible/tests/browser/Layout.sys.mjs" + ); + Layout.zoomDocument(content.document, zoomLevel); + }); + await promise; + } + + /** + * 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() { + info("assertPanelVisible, panel.hidden:" + this.panel?.hidden); + Assert.ok( + BrowserTestUtils.isVisible(this.panel), + "Screenshots panel is visible" + ); + } + + assertPanelNotVisible() { + info("assertPanelNotVisible, panel.hidden:" + this.panel?.hidden); + Assert.ok( + !this.panel || BrowserTestUtils.isHidden(this.panel), + "Screenshots panel is not visible" + ); + } + + /** + * Copied from screenshots extension + * Returns a promise that resolves when the clipboard data has changed + * Otherwise rejects + */ + waitForRawClipboardChange(epectedWidth, expectedHeight) { + const initialClipboardData = Date.now().toString(); + SpecialPowers.clipboardCopyString(initialClipboardData); + + return TestUtils.waitForCondition( + async () => { + let data; + try { + data = await this.getImageSizeAndColorFromClipboard(); + } catch (e) { + console.log("Failed to get image/png clipboard data:", e); + return false; + } + if ( + data && + initialClipboardData !== data && + data.height === expectedHeight && + data.width === epectedWidth + ) { + return data; + } + return false; + }, + "Waiting for screenshot to copy to clipboard", + 200 + ); + } + + /** + * 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 + * scrollX The scroll x position + * scrollY The scroll y position + */ + getContentDimensions() { + return SpecialPowers.spawn(this.browser, [], async function () { + let { + innerWidth, + innerHeight, + scrollMaxX, + scrollMaxY, + scrollX, + scrollY, + } = content.window; + let width = innerWidth + scrollMaxX; + let height = innerHeight + scrollMaxY; + + const scrollbarHeight = {}; + const scrollbarWidth = {}; + content.window.windowUtils.getScrollbarSize( + false, + scrollbarWidth, + scrollbarHeight + ); + width -= scrollbarWidth.value; + height -= scrollbarHeight.value; + innerWidth -= scrollbarWidth.value; + innerHeight -= scrollbarHeight.value; + + return { + clientHeight: innerHeight, + clientWidth: innerWidth, + scrollHeight: height, + scrollWidth: width, + scrollX, + scrollY, + }; + }); + } + + async getScreenshotsOverlayDimensions() { + return ContentTask.spawn(this.browser, null, async () => { + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + Assert.ok(screenshotsChild.overlay.initialized, "The overlay exists"); + + let screenshotsContainer = screenshotsChild.overlay.screenshotsContainer; + + await ContentTaskUtils.waitForCondition(() => { + return !screenshotsContainer.hasAttribute("resizing"); + }, "Waiting for overlay to be done resizing"); + + info( + `${screenshotsContainer.style.width} ${ + screenshotsContainer.style.height + } ${screenshotsContainer.hasAttribute("resizing")}` + ); + + return { + scrollWidth: screenshotsContainer.scrollWidth, + scrollHeight: screenshotsContainer.scrollHeight, + }; + }); + } + + async waitForSelectionLayerDimensionChange(oldWidth, oldHeight) { + await ContentTask.spawn( + this.browser, + [oldWidth, oldHeight], + async ([prevWidth, prevHeight]) => { + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + + await ContentTaskUtils.waitForCondition(() => { + let screenshotsContainer = + screenshotsChild.overlay.screenshotsContainer; + info( + `old height: ${prevHeight}. new height: ${screenshotsContainer.scrollHeight}.\nold width: ${prevWidth}. new width: ${screenshotsContainer.scrollWidth}` + ); + return ( + screenshotsContainer.scrollHeight !== prevHeight && + screenshotsContainer.scrollWidth !== prevWidth + ); + }, "Wait for selection box width change"); + } + ); + } + + waitForOverlaySizeChangeTo(width, height) { + return ContentTask.spawn( + this.browser, + [width, height], + async ([newWidth, newHeight]) => { + await ContentTaskUtils.waitForCondition(() => { + let { + innerHeight, + innerWidth, + scrollMaxY, + scrollMaxX, + scrollMinY, + scrollMinX, + } = content.window; + let scrollWidth = innerWidth + scrollMaxX - scrollMinX; + let scrollHeight = innerHeight + scrollMaxY - scrollMinY; + + const scrollbarHeight = {}; + const scrollbarWidth = {}; + content.window.windowUtils.getScrollbarSize( + false, + scrollbarWidth, + scrollbarHeight + ); + scrollWidth -= scrollbarWidth.value; + scrollHeight -= scrollbarHeight.value; + info( + `${scrollHeight}, ${newHeight}, ${scrollWidth}, ${newWidth}, ${content.window.scrollMaxX}` + ); + return scrollHeight === newHeight && scrollWidth === newWidth; + }, "Wait for document size change"); + } + ); + } + + getSelectionRegionDimensions() { + return ContentTask.spawn(this.browser, null, async () => { + let screenshotsChild = content.windowGlobalChild.getActor( + "ScreenshotsComponent" + ); + Assert.ok(screenshotsChild.overlay.initialized, "The overlay exists"); + + return screenshotsChild.overlay.selectionRegion.dimensions; + }); + } + + /** + * 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); + if (!image) { + return false; + } + + // 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); + info( + `${binaryStream.readArrayBuffer( + available, + buffer + )} read, ${available} available` + ); + + // 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, + SpecialPowers.wrap(window).browsingContext.currentWindowContext + ); + 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, + 0 + ); + 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; + }); +} + +async function clearAllTelemetryEvents() { + // Clear everything. + info("Clearing all telemetry events"); + await TestUtils.waitForCondition(() => { + Services.telemetry.clearEvents(); + let events = Services.telemetry.snapshotEvents( + Ci.nsITelemetry.DATASET_PRERELEASE_CHANNELS, + true + ); + let content = events.content; + let parent = events.parent; + + return (!content && !parent) || (!content.length && !parent.length); + }); +} + +async function waitForScreenshotsEventCount(count, process = "parent") { + await TestUtils.waitForCondition( + () => { + let events = TelemetryTestUtils.getEvents( + { category: "screenshots" }, + { process } + ); + + info(`Got ${events?.length} event(s)`); + info(`Actual events: ${JSON.stringify(events, null, 2)}`); + return events.length === count ? events : null; + }, + `Waiting for ${count} ${process} event(s).`, + 200, + 100 + ); +} + +async function assertScreenshotsEvents( + expectedEvents, + process = "parent", + clearEvents = true +) { + info(`Expected events: ${JSON.stringify(expectedEvents, null, 2)}`); + // Make sure we have recorded the correct number of events + await waitForScreenshotsEventCount(expectedEvents.length, process); + + TelemetryTestUtils.assertEvents( + expectedEvents, + { category: "screenshots" }, + { clear: clearEvents, process } + ); +} diff --git a/browser/components/screenshots/tests/browser/iframe-test-page.html b/browser/components/screenshots/tests/browser/iframe-test-page.html new file mode 100644 index 0000000000..5439552734 --- /dev/null +++ b/browser/components/screenshots/tests/browser/iframe-test-page.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<html lang="en"> + <head> + <title>Screenshots</title> + <style> + div { + font-size: 40px; + margin: 30px; + width: 233px; + height: 50px; + color: green; + } + </style> + </head> + <body> + <div>Hello world!</div> + <iframe + width="500" + height="500" + src="https://example.com/browser/browser/components/screenshots/tests/browser/first-iframe.html" + ></iframe> + </body> +</html> diff --git a/browser/components/screenshots/tests/browser/large-test-page.html b/browser/components/screenshots/tests/browser/large-test-page.html new file mode 100644 index 0000000000..ab2eb8d601 --- /dev/null +++ b/browser/components/screenshots/tests/browser/large-test-page.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Screenshots</title> +</head> +<body style="height:40000px; width:40000px; background-repeat: no-repeat; background-size: 40008px 40016px; 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> diff --git a/browser/components/screenshots/tests/browser/second-iframe.html b/browser/components/screenshots/tests/browser/second-iframe.html new file mode 100644 index 0000000000..ca5de26bb9 --- /dev/null +++ b/browser/components/screenshots/tests/browser/second-iframe.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html lang="en"> + <head> + <meta charset="utf-8"> + <style> + div { + font-size: 40px; + margin: 30px; + width: 235px; + height: 52px; + color: red; + } + </style> + </head> +<body> + <div>Hello world!</div> +</body> +</html> 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..7718892f8c --- /dev/null +++ b/browser/components/screenshots/tests/browser/short-test-page.html @@ -0,0 +1,8 @@ +<html lang="en"> +<head> + <title>Screenshots</title> +</head> +<body> + <div style="height:500px; width:500px; background-color: blue;"></div> +</body> +</html> diff --git a/browser/components/screenshots/tests/browser/test-page-resize.html b/browser/components/screenshots/tests/browser/test-page-resize.html new file mode 100644 index 0000000000..dea57909b4 --- /dev/null +++ b/browser/components/screenshots/tests/browser/test-page-resize.html @@ -0,0 +1,25 @@ +<html> +<head> + <title>Screenshots</title> +</head> +<body> + <div style="display: flex;flex-flow: row wrap;gap: 8px;"> + <div style="height:100px; width:100px; background-color: blue;"></div> + <div style="height:100px; width:100px; background-color: blue;"></div> + <div style="height:100px; width:100px; background-color: blue;"></div> + <div style="height:100px; width:100px; background-color: blue;"></div> + <div style="height:100px; width:100px; background-color: blue;"></div> + <div style="height:100px; width:100px; background-color: blue;"></div> + </div> + <div style="display: flex;flex-direction: column;gap: 8px;"> + <div style="height:100px; width:100px; background-color: red;"></div> + <div style="height:100px; width:100px; background-color: red;"></div> + <div style="height:100px; width:100px; background-color: red;"></div> + <div style="height:100px; width:100px; background-color: red;"></div> + <div style="height:100px; width:100px; background-color: red;"></div> + <div style="height:100px; width:100px; background-color: red;"></div> + <div style="height:100px; width:100px; background-color: red;"></div> + <div id="hello" style="height:100px; width:100px; background-color: red;"></div> + </div> +</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..5ddc1d6eb6 --- /dev/null +++ b/browser/components/screenshots/tests/browser/test-page.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <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%);"> + <div id="testPageElement" style="position:absolute; top:91px; left:93px; width:92px; height:94px; border:solid red;"></div> + <script> + // Make sure the screenshots overlay anonymous document always receives events + // that web content would normally be able to intercept, as that could break the + // overlay + function disabledEvent(event) { + event.preventDefault(); + event.stopImmediatePropagation(); + } + + window.addEventListener("click", disabledEvent, true); + window.addEventListener("pointerdown", disabledEvent, true); + window.addEventListener("pointermove", disabledEvent, true); + window.addEventListener("mousemove", disabledEvent, true); + window.addEventListener("pointerup", disabledEvent, true); + window.addEventListener("keydown", disabledEvent, true); + window.addEventListener("keyup", disabledEvent, true); + </script> +</body> +</html> |
