From f388d3e51fb706e5dcb9d6ccce23627ce49ad57b Mon Sep 17 00:00:00 2001 From: Cristian Tuns Date: Thu, 2 May 2024 12:14:10 -0400 Subject: [PATCH] Backed out changeset 91e7087aef18 (bug 1801957) for causing bc failures in browser_keyboard_tests.js CLOSED TREE --- .../actors/ScreenshotsComponentChild.sys.mjs | 29 +- browser/components/BrowserGlue.sys.mjs | 1 - .../ScreenshotsOverlayChild.sys.mjs | 435 ++++------------ .../screenshots/ScreenshotsUtils.sys.mjs | 191 +------ .../screenshots/screenshots-buttons.css | 6 +- .../screenshots/screenshots-buttons.js | 21 +- .../screenshots/tests/browser/browser.toml | 2 - .../browser/browser_keyboard_shortcuts.js | 4 +- .../tests/browser/browser_keyboard_tests.js | 489 ------------------ .../browser/browser_overlay_keyboard_test.js | 3 + .../browser/browser_screenshots_focus_test.js | 104 +--- .../browser_screenshots_telemetry_tests.js | 10 +- .../browser_screenshots_test_downloads.js | 2 +- .../browser_screenshots_test_full_page.js | 4 +- .../browser_screenshots_test_visible.js | 8 +- .../screenshots/tests/browser/head.js | 4 +- 16 files changed, 164 insertions(+), 1149 deletions(-) delete mode 100644 browser/components/screenshots/tests/browser/browser_keyboard_tests.js diff --git a/browser/actors/ScreenshotsComponentChild.sys.mjs b/browser/actors/ScreenshotsComponentChild.sys.mjs index 9e5148734b38..9cbfa13322c3 100644 --- a/browser/actors/ScreenshotsComponentChild.sys.mjs +++ b/browser/actors/ScreenshotsComponentChild.sys.mjs @@ -48,11 +48,6 @@ export class ScreenshotsComponentChild extends JSWindowActorChild { return this.removeEventListeners(); case "Screenshots:AddEventListeners": return this.addEventListeners(); - case "Screenshots:MoveFocusToContent": - return this.focusOverlay(); - case "Screenshots:ClearFocus": - Services.focus.clearFocus(this.contentWindow); - return null; } return null; } @@ -104,8 +99,8 @@ export class ScreenshotsComponentChild extends JSWindowActorChild { this.requestDownloadScreenshot(event.detail.region); break; case "Screenshots:OverlaySelection": { - let { hasSelection, overlayState } = event.detail; - this.sendOverlaySelection({ hasSelection, overlayState }); + let { hasSelection } = event.detail; + this.sendOverlaySelection({ hasSelection }); break; } case "Screenshots:RecordEvent": { @@ -114,13 +109,10 @@ export class ScreenshotsComponentChild extends JSWindowActorChild { break; } case "Screenshots:ShowPanel": - this.sendAsyncMessage("Screenshots:ShowPanel"); + this.showPanel(); break; case "Screenshots:HidePanel": - this.sendAsyncMessage("Screenshots:HidePanel"); - break; - case "Screenshots:FocusPanel": - this.sendAsyncMessage("Screenshots:MoveFocusToParent", event.detail); + this.hidePanel(); break; } } @@ -159,6 +151,14 @@ export class ScreenshotsComponentChild extends JSWindowActorChild { this.endScreenshotsOverlay({ doNotResetMethods: true }); } + showPanel() { + this.sendAsyncMessage("Screenshots:ShowPanel"); + } + + hidePanel() { + this.sendAsyncMessage("Screenshots:HidePanel"); + } + getDocumentTitle() { return this.document.title; } @@ -173,11 +173,6 @@ export class ScreenshotsComponentChild extends JSWindowActorChild { return methodsUsed; } - focusOverlay() { - this.contentWindow.focus(); - this.#overlay.focus(); - } - /** * Resolves when the document is ready to have an overlay injected into it. * diff --git a/browser/components/BrowserGlue.sys.mjs b/browser/components/BrowserGlue.sys.mjs index fcbc9b60e458..7fb320cdb3a0 100644 --- a/browser/components/BrowserGlue.sys.mjs +++ b/browser/components/BrowserGlue.sys.mjs @@ -732,7 +732,6 @@ let JSWINDOWACTORS = { "Screenshots:OverlaySelection": {}, "Screenshots:RecordEvent": {}, "Screenshots:ShowPanel": {}, - "Screenshots:FocusPanel": {}, }, }, enablePreference: "screenshots.browser.component.enabled", diff --git a/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs b/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs index 07ed2bd51778..0f7c1e3fed7c 100644 --- a/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs +++ b/browser/components/screenshots/ScreenshotsOverlayChild.sys.mjs @@ -133,19 +133,19 @@ export class ScreenshotsOverlay {
+
+
+
-
-
-
-
-
-
-
+
+
+
+
@@ -305,10 +305,6 @@ export class ScreenshotsOverlay { }; } - focus() { - this.previewCancelButton.focus({ focusVisible: true }); - } - /** * Returns the x and y coordinates of the event relative to both the * viewport and the page. @@ -507,51 +503,35 @@ export class ScreenshotsOverlay { * @param {Event} event The keydown event */ handleKeyDown(event) { - if (event.key === "Escape") { - this.maybeCancelScreenshots(); - return; - } - - switch (this.#state) { - case STATES.CROSSHAIRS: - this.crosshairsKeyDown(event); + switch (event.key) { + case "ArrowLeft": + this.handleArrowLeftKeyDown(event); break; - case STATES.DRAGGING: - this.draggingKeyDown(event); + case "ArrowUp": + this.handleArrowUpKeyDown(event); break; - case STATES.RESIZING: - this.resizingKeyDown(event); + case "ArrowRight": + this.handleArrowRightKeyDown(event); break; - case STATES.SELECTED: - this.selectedKeyDown(event); + case "ArrowDown": + this.handleArrowDownKeyDown(event); break; - } - } - - /** - * Handles when a keyup 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 (this.#state) { - case STATES.RESIZING: - 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, { doNotMoveFocus: true }); - break; - } - break; + case "Tab": + this.maybeLockFocus(event); + break; + case "Escape": + this.maybeCancelScreenshots(); + break; + case this.copyKey.toLowerCase(): + if (this.state === "selected" && this.getAccelKey(event)) { + event.preventDefault(); + this.copySelectedRegion(); + } + break; + case this.downloadKey.toLowerCase(): + if (this.state === "selected" && this.getAccelKey(event)) { + event.preventDefault(); + this.downloadSelectedRegion(); } break; } @@ -570,175 +550,6 @@ export class ScreenshotsOverlay { return event.ctrlKey; } - crosshairsKeyDown(event) { - switch (event.key) { - case "ArrowLeft": - case "ArrowUp": - case "ArrowRight": - case "ArrowDown": - // Do nothing so we can prevent default below - break; - case "Tab": - this.maybeLockFocus(event); - return; - case "Enter": - if (this.hoverElementRegion.isRegionValid) { - event.preventDefault(); - this.draggingReadyStart(); - this.draggingReadyDragEnd(); - return; - } - // eslint-disable-next-line no-fallthrough - case " ": { - if (Services.appinfo.isWayland) { - return; - } - - if (event.originalTarget === this.previewCancelButton) { - return; - } - - event.preventDefault(); - // The left and top coordinates from cursorRegion are relative to - // the client window so we need to add the scroll offset of the page to - // get the correct coordinates. - let x = {}; - let y = {}; - this.window.windowUtils.getLastOverWindowPointerLocationInCSSPixels( - x, - y - ); - this.crosshairsDragStart( - x.value + this.windowDimensions.scrollX, - y.value + this.windowDimensions.scrollY - ); - this.#setState(STATES.DRAGGING); - break; - } - default: - return; - } - - // Prevent scrolling with arrow keys - event.preventDefault(); - } - - /** - * Handles a keydown event for the dragging state. - * @param {Event} event The keydown event - */ - draggingKeyDown(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 "Enter": - case " ": - event.preventDefault(); - this.#setState(STATES.SELECTED); - return; - default: - return; - } - - this.drawSelectionContainer(); - } - - /** - * Handles a keydown event for the resizing state. - * @param {Event} event The keydown event - */ - resizingKeyDown(event) { - switch (event.key) { - case "ArrowLeft": - this.resizingArrowLeftKeyDown(event); - break; - case "ArrowUp": - this.resizingArrowUpKeyDown(event); - break; - case "ArrowRight": - this.resizingArrowRightKeyDown(event); - break; - case "ArrowDown": - this.resizingArrowDownKeyDown(event); - break; - } - } - - selectedKeyDown(event) { - let isSelectionElement = event.originalTarget.closest( - "#selection-container" - ); - switch (event.key) { - case "ArrowLeft": - if (isSelectionElement) { - this.resizingArrowLeftKeyDown(event); - } - break; - case "ArrowUp": - if (isSelectionElement) { - this.resizingArrowUpKeyDown(event); - } - break; - case "ArrowRight": - if (isSelectionElement) { - this.resizingArrowRightKeyDown(event); - } - break; - case "ArrowDown": - if (isSelectionElement) { - this.resizingArrowDownKeyDown(event); - } - break; - case "Tab": - this.maybeLockFocus(event); - break; - case " ": - if (!event.originalTarget.closest("#buttons-container")) { - event.preventDefault(); - } - break; - case this.copyKey.toLowerCase(): - if (this.state === "selected" && this.getAccelKey(event)) { - event.preventDefault(); - this.copySelectedRegion(); - } - break; - case this.downloadKey.toLowerCase(): - if (this.state === "selected" && this.getAccelKey(event)) { - event.preventDefault(); - this.downloadSelectedRegion(); - } - break; - } - } - - /** - * 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 - */ - resizingArrowLeftKeyDown(event) { - this.handleArrowLeftKeyDown(event); - - if (this.#state !== STATES.RESIZING) { - this.#setState(STATES.RESIZING); - } - - this.drawSelectionContainer(); - } - /** * Move the region or its left or right side to the left. * Just the arrow key will move the region by 1px. @@ -747,7 +558,6 @@ export class ScreenshotsOverlay { * @param {Event} event The keydown event */ handleArrowLeftKeyDown(event) { - let exponent = event.shiftKey ? 1 : 0; switch (event.originalTarget.id) { case "highlight": if (this.getAccelKey(event)) { @@ -757,7 +567,7 @@ export class ScreenshotsOverlay { break; } - this.selectionRegion.right -= 10 ** exponent; + this.selectionRegion.right -= 10 ** event.shiftKey; // eslint-disable-next-line no-fallthrough case "mover-topLeft": case "mover-bottomLeft": @@ -766,7 +576,7 @@ export class ScreenshotsOverlay { break; } - this.selectionRegion.left -= 10 ** exponent; + this.selectionRegion.left -= 10 ** event.shiftKey; this.scrollIfByEdge( this.selectionRegion.left, this.windowDimensions.scrollY + this.windowDimensions.clientHeight / 2 @@ -786,7 +596,7 @@ export class ScreenshotsOverlay { break; } - this.selectionRegion.right -= 10 ** exponent; + this.selectionRegion.right -= 10 ** event.shiftKey; if (this.selectionRegion.x1 >= this.selectionRegion.x2) { this.selectionRegion.sortCoords(); if (event.originalTarget.id === "mover-topRight") { @@ -800,23 +610,11 @@ export class ScreenshotsOverlay { return; } - event.preventDefault(); - } - - /** - * 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 - */ - resizingArrowUpKeyDown(event) { - this.handleArrowUpKeyDown(event); - if (this.#state !== STATES.RESIZING) { this.#setState(STATES.RESIZING); } + event.preventDefault(); this.drawSelectionContainer(); } @@ -828,7 +626,6 @@ export class ScreenshotsOverlay { * @param {Event} event The keydown event */ handleArrowUpKeyDown(event) { - let exponent = event.shiftKey ? 1 : 0; switch (event.originalTarget.id) { case "highlight": if (this.getAccelKey(event)) { @@ -838,7 +635,7 @@ export class ScreenshotsOverlay { break; } - this.selectionRegion.bottom -= 10 ** exponent; + this.selectionRegion.bottom -= 10 ** event.shiftKey; // eslint-disable-next-line no-fallthrough case "mover-topLeft": case "mover-topRight": @@ -847,7 +644,7 @@ export class ScreenshotsOverlay { break; } - this.selectionRegion.top -= 10 ** exponent; + this.selectionRegion.top -= 10 ** event.shiftKey; this.scrollIfByEdge( this.windowDimensions.scrollX + this.windowDimensions.clientWidth / 2, this.selectionRegion.top @@ -867,7 +664,7 @@ export class ScreenshotsOverlay { break; } - this.selectionRegion.bottom -= 10 ** exponent; + this.selectionRegion.bottom -= 10 ** event.shiftKey; if (this.selectionRegion.y1 >= this.selectionRegion.y2) { this.selectionRegion.sortCoords(); if (event.originalTarget.id === "mover-bottomLeft") { @@ -881,23 +678,11 @@ export class ScreenshotsOverlay { return; } - event.preventDefault(); - } - - /** - * 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 - */ - resizingArrowRightKeyDown(event) { - this.handleArrowRightKeyDown(event); - if (this.#state !== STATES.RESIZING) { this.#setState(STATES.RESIZING); } + event.preventDefault(); this.drawSelectionContainer(); } @@ -909,7 +694,6 @@ export class ScreenshotsOverlay { * @param {Event} event The keydown event */ handleArrowRightKeyDown(event) { - let exponent = event.shiftKey ? 1 : 0; switch (event.originalTarget.id) { case "highlight": if (this.getAccelKey(event)) { @@ -920,7 +704,7 @@ export class ScreenshotsOverlay { break; } - this.selectionRegion.left += 10 ** exponent; + this.selectionRegion.left += 10 ** event.shiftKey; // eslint-disable-next-line no-fallthrough case "mover-topRight": case "mover-bottomRight": @@ -930,7 +714,7 @@ export class ScreenshotsOverlay { break; } - this.selectionRegion.right += 10 ** exponent; + this.selectionRegion.right += 10 ** event.shiftKey; this.scrollIfByEdge( this.selectionRegion.right, this.windowDimensions.scrollY + this.windowDimensions.clientHeight / 2 @@ -951,7 +735,7 @@ export class ScreenshotsOverlay { break; } - this.selectionRegion.left += 10 ** exponent; + this.selectionRegion.left += 10 ** event.shiftKey; if (this.selectionRegion.x1 >= this.selectionRegion.x2) { this.selectionRegion.sortCoords(); if (event.originalTarget.id === "mover-topLeft") { @@ -965,7 +749,12 @@ export class ScreenshotsOverlay { return; } + if (this.#state !== STATES.RESIZING) { + this.#setState(STATES.RESIZING); + } + event.preventDefault(); + this.drawSelectionContainer(); } /** @@ -975,18 +764,7 @@ export class ScreenshotsOverlay { * Arrow key + control/meta will move to the edge of the window. * @param {Event} event The keydown event */ - resizingArrowDownKeyDown(event) { - this.handleArrowDownKeyDown(event); - - if (this.#state !== STATES.RESIZING) { - this.#setState(STATES.RESIZING); - } - - this.drawSelectionContainer(); - } - handleArrowDownKeyDown(event) { - let exponent = event.shiftKey ? 1 : 0; switch (event.originalTarget.id) { case "highlight": if (this.getAccelKey(event)) { @@ -997,7 +775,7 @@ export class ScreenshotsOverlay { break; } - this.selectionRegion.top += 10 ** exponent; + this.selectionRegion.top += 10 ** event.shiftKey; // eslint-disable-next-line no-fallthrough case "mover-bottomLeft": case "mover-bottomRight": @@ -1007,7 +785,7 @@ export class ScreenshotsOverlay { break; } - this.selectionRegion.bottom += 10 ** exponent; + this.selectionRegion.bottom += 10 ** event.shiftKey; this.scrollIfByEdge( this.windowDimensions.scrollX + this.windowDimensions.clientWidth / 2, this.selectionRegion.bottom @@ -1028,7 +806,7 @@ export class ScreenshotsOverlay { break; } - this.selectionRegion.top += 10 ** exponent; + this.selectionRegion.top += 10 ** event.shiftKey; if (this.selectionRegion.y1 >= this.selectionRegion.y2) { this.selectionRegion.sortCoords(); if (event.originalTarget.id === "mover-topLeft") { @@ -1042,7 +820,12 @@ export class ScreenshotsOverlay { return; } + if (this.#state !== STATES.RESIZING) { + this.#setState(STATES.RESIZING); + } + event.preventDefault(); + this.drawSelectionContainer(); } /** @@ -1051,39 +834,27 @@ export class ScreenshotsOverlay { * @param {Event} event The keydown event */ maybeLockFocus(event) { - event.preventDefault(); + if (this.#state !== STATES.SELECTED) { + return; + } - switch (this.#state) { - case STATES.CROSSHAIRS: - if (event.shiftKey) { - this.#dispatchEvent("Screenshots:FocusPanel", { - direction: "backward", - }); - } else { - this.#dispatchEvent("Screenshots:FocusPanel", { - direction: "forward", - }); - } - break; - case STATES.SELECTED: - 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 - ); - } - break; + 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 + ); } } @@ -1099,6 +870,31 @@ export class ScreenshotsOverlay { } } + /** + * 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; + } + } + /** * All of the selection ranges were recorded at initialization. The ranges * are removed when focus is set to the buttons so we add the selection @@ -1130,9 +926,8 @@ export class ScreenshotsOverlay { /** * Set a new state for the overlay * @param {String} newState - * @param {Object} options (optional) Options for calling start of state method */ - #setState(newState, options = {}) { + #setState(newState) { if (this.#state === STATES.SELECTED && newState === STATES.CROSSHAIRS) { this.#dispatchEvent("Screenshots:RecordEvent", { eventName: "started", @@ -1141,13 +936,7 @@ export class ScreenshotsOverlay { } if (newState !== this.#state) { this.#dispatchEvent("Screenshots:OverlaySelection", { - hasSelection: [ - STATES.DRAGGING_READY, - STATES.DRAGGING, - STATES.RESIZING, - STATES.SELECTED, - ].includes(newState), - overlayState: newState, + hasSelection: newState == STATES.SELECTED, }); } this.#state = newState; @@ -1166,7 +955,7 @@ export class ScreenshotsOverlay { break; } case STATES.SELECTED: { - this.selectedStart(options); + this.selectedStart(); break; } case STATES.RESIZING: { @@ -1226,16 +1015,11 @@ export class ScreenshotsOverlay { * Hide the preview and hover element containers. * Draw the selection and buttons containers. */ - selectedStart(options) { - this.selectionRegion.sortCoords(); + selectedStart() { this.hidePreviewContainer(); this.hideHoverElementContainer(); this.drawSelectionContainer(); this.drawButtonsContainer(); - - if (!options.doNotMoveFocus) { - this.setFocusToActionButton(); - } } /** @@ -1462,6 +1246,7 @@ export class ScreenshotsOverlay { if (this.hoverElementRegion.isRegionValid) { this.selectionRegion.dimensions = this.hoverElementRegion.dimensions; this.#setState(STATES.SELECTED); + this.setFocusToActionButton(); this.#dispatchEvent("Screenshots:RecordEvent", { eventName: "selected", reason: "element", @@ -1482,9 +1267,11 @@ export class ScreenshotsOverlay { right: pageX, bottom: pageY, }; + this.selectionRegion.sortCoords(); this.#setState(STATES.SELECTED); this.maybeRecordRegionSelected(); this.#methodsUsed.region += 1; + this.setFocusToActionButton(); } /** @@ -1495,7 +1282,9 @@ export class ScreenshotsOverlay { */ 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; @@ -1702,10 +1491,6 @@ export class ScreenshotsOverlay { this.buttonsContainer.hidden = true; } - updateCursorRegion(left, top) { - this.cursorRegion = { left, top, right: left, bottom: top }; - } - /** * Set the pointer events to none on the screenshots elements so * elementFromPoint can find the real element at the given point. diff --git a/browser/components/screenshots/ScreenshotsUtils.sys.mjs b/browser/components/screenshots/ScreenshotsUtils.sys.mjs index 476126b412be..6e19194c4036 100644 --- a/browser/components/screenshots/ScreenshotsUtils.sys.mjs +++ b/browser/components/screenshots/ScreenshotsUtils.sys.mjs @@ -91,7 +91,6 @@ export class ScreenshotsComponentParent extends JSWindowActorParent { case "Screenshots:OverlaySelection": ScreenshotsUtils.setPerBrowserState(browser, { hasOverlaySelection: message.data.hasSelection, - overlayState: message.data.overlayState, }); break; case "Screenshots:ShowPanel": @@ -100,9 +99,6 @@ export class ScreenshotsComponentParent extends JSWindowActorParent { case "Screenshots:HidePanel": ScreenshotsUtils.closePanel(browser); break; - case "Screenshots:MoveFocusToParent": - ScreenshotsUtils.focusPanel(browser, message.data); - break; } } @@ -195,7 +191,11 @@ export var ScreenshotsUtils = { handleEvent(event) { switch (event.type) { case "keydown": - this.handleKeyDownEvent(event); + if (event.key === "Escape") { + // Escape should cancel and exit + let browser = event.view.gBrowser.selectedBrowser; + this.cancel(browser, "escape"); + } break; case "TabSelect": this.handleTabSelect(event); @@ -209,33 +209,6 @@ export var ScreenshotsUtils = { } }, - handleKeyDownEvent(event) { - let browser = - event.view.browsingContext.topChromeWindow.gBrowser.selectedBrowser; - if (!browser) { - return; - } - - switch (event.key) { - case "Escape": - // The chromeEventHandler in the child actor will handle events that - // don't match this - if (event.target.parentElement === this.panelForBrowser(browser)) { - this.cancel(browser, "escape"); - } - break; - case "ArrowLeft": - case "ArrowUp": - case "ArrowRight": - case "ArrowDown": - this.handleArrowKeyDown(event, browser); - break; - case "Tab": - this.maybeLockFocus(event); - break; - } - }, - /** * When we swap docshells for a given screenshots browser, we need to update * the browserToScreenshotsState WeakMap to the correct browser. If the old @@ -300,104 +273,6 @@ export var ScreenshotsUtils = { } }, - /** - * If the overlay state is crosshairs or dragging, move the native cursor - * respective to the arrow key pressed. - * @param {Event} event A keydown event - * @param {Browser} browser The selected browser - * @returns - */ - handleArrowKeyDown(event, browser) { - if (Services.appinfo.isWayland) { - return; - } - - let { overlayState } = this.browserToScreenshotsState.get(browser); - - if (!["crosshairs", "dragging"].includes(overlayState)) { - return; - } - - let left = 0; - let top = 0; - let exponent = event.shiftKey ? 1 : 0; - switch (event.key) { - case "ArrowLeft": - left -= 10 ** exponent; - break; - case "ArrowUp": - top -= 10 ** exponent; - break; - case "ArrowRight": - left += 10 ** exponent; - break; - case "ArrowDown": - top += 10 ** exponent; - break; - default: - return; - } - - // Clear and move focus to browser so the child actor can capture events - this.clearContentFocus(browser); - Services.focus.clearFocus(browser.ownerGlobal); - Services.focus.setFocus(browser, 0); - - let x = {}; - let y = {}; - let win = browser.ownerGlobal; - win.windowUtils.getLastOverWindowPointerLocationInCSSPixels(x, y); - - this.moveCursor( - { - left: (x.value + left) * win.devicePixelRatio, - top: (y.value + top) * win.devicePixelRatio, - }, - browser - ); - }, - - /** - * Move the native cursor to the given position. Clamp the position to the - * window just in case. - * @param {Object} position An object containing the left and top position - * @param {Browser} browser The selected browser - */ - moveCursor(position, browser) { - let { left, top } = position; - let win = browser.ownerGlobal; - - const windowLeft = win.mozInnerScreenX * win.devicePixelRatio; - const windowTop = win.mozInnerScreenY * win.devicePixelRatio; - const contentTop = - (win.mozInnerScreenY + (win.innerHeight - browser.clientHeight)) * - win.devicePixelRatio; - const windowRight = - (win.mozInnerScreenX + win.innerWidth) * win.devicePixelRatio; - const windowBottom = - (win.mozInnerScreenY + win.innerHeight) * win.devicePixelRatio; - - left += windowLeft; - top += windowTop; - - // Clamp left and top to content dimensions - let parsedLeft = Math.round( - Math.min(Math.max(left, windowLeft), windowRight) - ); - let parsedTop = Math.round( - Math.min(Math.max(top, contentTop), windowBottom) - ); - - win.windowUtils.sendNativeMouseEvent( - parsedLeft, - parsedTop, - win.windowUtils.NATIVE_MOUSE_MESSAGE_MOVE, - 0, - 0, - win.document.documentElement - ); - }, - observe(subj, topic, data) { let { gBrowser } = subj; let browser = gBrowser.selectedBrowser; @@ -460,12 +335,6 @@ export var ScreenshotsUtils = { browser.addEventListener("SwapDocShells", this); let gBrowser = browser.getTabBrowser(); gBrowser.tabContainer.addEventListener("TabSelect", this); - - // Wayland doesn't support `sendNativeMouseEvent` which is what the - // keydown event is used for. - if (!Services.appinfo.isWayland) { - browser.addEventListener("keydown", this); - } break; } case UIPhases.INITIAL: @@ -495,9 +364,6 @@ export var ScreenshotsUtils = { browser.removeEventListener("SwapDocShells", this); const gBrowser = browser.getTabBrowser(); gBrowser.tabContainer.removeEventListener("TabSelect", this); - if (!Services.appinfo.isWayland) { - browser.removeEventListener("keydown", this); - } this.browserToScreenshotsState.delete(browser); if (Cu.isInAutomation) { @@ -530,53 +396,6 @@ export var ScreenshotsUtils = { Object.assign(perBrowserState, nameValues); }, - maybeLockFocus(event) { - let browser = event.view.gBrowser.selectedBrowser; - - if (!Services.focus.focusedElement) { - event.preventDefault(); - this.focusPanel(browser); - return; - } - - let target = event.explicitOriginalTarget; - - if (!target.closest("moz-button-group")) { - return; - } - - let isElementFirst = !!target.nextElementSibling; - - if ( - (isElementFirst && event.shiftKey) || - (!isElementFirst && !event.shiftKey) - ) { - event.preventDefault(); - this.moveFocusToContent(browser); - } - }, - - focusPanel(browser, { direction } = {}) { - let buttonsPanel = this.panelForBrowser(browser); - if (direction) { - buttonsPanel - .querySelector("screenshots-buttons") - .focusButton(direction === "forward" ? "first" : "last"); - } else { - buttonsPanel - .querySelector("screenshots-buttons") - .focusButton(lazy.SCREENSHOTS_LAST_SCREENSHOT_METHOD); - } - }, - - moveFocusToContent(browser) { - this.getActor(browser).sendAsyncMessage("Screenshots:MoveFocusToContent"); - }, - - clearContentFocus(browser) { - this.getActor(browser).sendAsyncMessage("Screenshots:ClearFocus"); - }, - /** * Attempt to place focus on the element that had focus before screenshots UI was shown * diff --git a/browser/components/screenshots/screenshots-buttons.css b/browser/components/screenshots/screenshots-buttons.css index ccb092174ed6..b63308d8b4e0 100644 --- a/browser/components/screenshots/screenshots-buttons.css +++ b/browser/components/screenshots/screenshots-buttons.css @@ -14,15 +14,15 @@ border-radius: var(--arrowpanel-border-radius); } -#full-page { +.full-page { background-image: url("chrome://browser/content/screenshots/menu-fullpage.svg"); } -#visible-page { +.visible-page { background-image: url("chrome://browser/content/screenshots/menu-visible.svg"); } -#full-page, #visible-page { +.full-page, .visible-page { -moz-context-properties: fill, stroke; fill: currentColor; /* stroke is the secondary fill color used to define the viewport shape in the SVGs */ diff --git a/browser/components/screenshots/screenshots-buttons.js b/browser/components/screenshots/screenshots-buttons.js index e501da5a51bc..9ac8dab2cf4b 100644 --- a/browser/components/screenshots/screenshots-buttons.js +++ b/browser/components/screenshots/screenshots-buttons.js @@ -20,10 +20,9 @@ - - + + - `; } @@ -42,12 +41,12 @@ this.shadowRoot.append(ScreenshotsButtons.fragment); - let visibleButton = shadowRoot.getElementById("visible-page"); + let visibleButton = this.shadowRoot.querySelector(".visible-page"); visibleButton.onclick = function () { ScreenshotsUtils.doScreenshot(gBrowser.selectedBrowser, "visible"); }; - let fullpageButton = shadowRoot.getElementById("full-page"); + let fullpageButton = this.shadowRoot.querySelector(".full-page"); fullpageButton.onclick = function () { ScreenshotsUtils.doScreenshot(gBrowser.selectedBrowser, "full_page"); }; @@ -66,19 +65,11 @@ await this.shadowRoot.querySelector("moz-button-group").updateComplete; if (buttonToFocus === "fullpage") { this.shadowRoot - .getElementById("full-page") + .querySelector(".full-page") .focus({ focusVisible: true }); - } else if (buttonToFocus === "first") { - this.shadowRoot - .querySelector("moz-button-group") - .firstElementChild.focus({ focusVisible: true }); - } else if (buttonToFocus === "last") { - this.shadowRoot - .querySelector("moz-button-group") - .lastElementChild.focus({ focusVisible: true }); } else { this.shadowRoot - .getElementById("visible-page") + .querySelector(".visible-page") .focus({ focusVisible: true }); } } diff --git a/browser/components/screenshots/tests/browser/browser.toml b/browser/components/screenshots/tests/browser/browser.toml index 5923088b3146..976a0037c805 100644 --- a/browser/components/screenshots/tests/browser/browser.toml +++ b/browser/components/screenshots/tests/browser/browser.toml @@ -21,8 +21,6 @@ skip-if = ["os == 'linux'"] ["browser_keyboard_shortcuts.js"] -["browser_keyboard_tests.js"] - ["browser_overlay_keyboard_test.js"] ["browser_screenshots_drag_scroll_test.js"] diff --git a/browser/components/screenshots/tests/browser/browser_keyboard_shortcuts.js b/browser/components/screenshots/tests/browser/browser_keyboard_shortcuts.js index 66ab25f1c6cc..bca96f333f51 100644 --- a/browser/components/screenshots/tests/browser/browser_keyboard_shortcuts.js +++ b/browser/components/screenshots/tests/browser/browser_keyboard_shortcuts.js @@ -56,7 +56,7 @@ add_task(async function test_download_shortcut() { "screenshots-preview-ready" ); - let visibleButton = await helper.getPanelButton("#visible-page"); + let visibleButton = await helper.getPanelButton(".visible-page"); visibleButton.click(); await screenshotReady; @@ -108,7 +108,7 @@ add_task(async function test_copy_shortcut() { "screenshots-preview-ready" ); - let visibleButton = await helper.getPanelButton("#visible-page"); + let visibleButton = await helper.getPanelButton(".visible-page"); visibleButton.click(); await screenshotReady; diff --git a/browser/components/screenshots/tests/browser/browser_keyboard_tests.js b/browser/components/screenshots/tests/browser/browser_keyboard_tests.js deleted file mode 100644 index fa75f7d13397..000000000000 --- a/browser/components/screenshots/tests/browser/browser_keyboard_tests.js +++ /dev/null @@ -1,489 +0,0 @@ -/* 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: 100, - left: 100, - bottom: 100, - right: 110, - }, - ], - [ - "ArrowDown", - { - top: 100, - left: 100, - bottom: 110, - right: 110, - }, - ], - [ - "ArrowLeft", - { - top: 100, - left: 100, - bottom: 110, - right: 100, - }, - ], - [ - "ArrowUp", - { - top: 100, - left: 100, - bottom: 100, - right: 100, - }, - ], - ["ArrowDown", { top: 100, left: 100, bottom: 110, right: 100 }], - [ - "ArrowRight", - { - top: 100, - left: 100, - bottom: 110, - right: 110, - }, - ], - [ - "ArrowUp", - { - top: 100, - left: 100, - bottom: 100, - right: 110, - }, - ], - [ - "ArrowLeft", - { - top: 100, - left: 100, - bottom: 100, - right: 100, - }, - ], -]; - -const SHIFT_PLUS_KEY_TO_EXPECTED_POSITION_ARRAY = [ - [ - "ArrowRight", - { - top: 100, - left: 100, - bottom: 100, - right: 200, - }, - ], - [ - "ArrowDown", - { - top: 100, - left: 100, - bottom: 200, - right: 200, - }, - ], - [ - "ArrowLeft", - { - top: 100, - left: 100, - bottom: 200, - right: 100, - }, - ], - [ - "ArrowUp", - { - top: 100, - left: 100, - bottom: 100, - right: 100, - }, - ], - ["ArrowDown", { top: 100, left: 100, bottom: 200, right: 100 }], - [ - "ArrowRight", - { - top: 100, - left: 100, - bottom: 200, - right: 200, - }, - ], - [ - "ArrowUp", - { - top: 100, - left: 100, - bottom: 100, - right: 200, - }, - ], - [ - "ArrowLeft", - { - top: 100, - left: 100, - bottom: 100, - right: 100, - }, - ], -]; - -add_task(async function test_focusMovesToContentOnArrowKeydown() { - await BrowserTestUtils.withNewTab( - { - gBrowser, - url: TEST_PAGE, - }, - async browser => { - let helper = new ScreenshotsHelper(browser); - helper.triggerUIFromToolbar(); - await helper.waitForOverlay(); - - let visibleButton = await helper.getPanelButton("#visible-page"); - visibleButton.focus(); - - await BrowserTestUtils.waitForCondition(() => { - return visibleButton.getRootNode().activeElement === visibleButton; - }, "The visible button in the panel should have focus"); - info( - `Actual focused id: ${Services.focus.focusedElement.id}. Expected focused id: ${visibleButton.id}` - ); - is( - Services.focus.focusedElement, - visibleButton, - "The visible button in the panel should have focus" - ); - - EventUtils.synthesizeKey("ArrowLeft"); - - // Focus should move to the content document - let fullpageButton = await helper.getPanelButton("#full-page"); - await BrowserTestUtils.waitForCondition(() => { - return ( - fullpageButton.getRootNode().activeElement !== fullpageButton && - visibleButton.getRootNode().activeElement !== visibleButton - ); - }, "The visible and full page buttons do not have focus"); - Assert.notEqual( - Services.focus.focusedElement, - visibleButton, - "The visible button does not have focus" - ); - Assert.notEqual( - Services.focus.focusedElement, - fullpageButton, - "The full page button does not have focus" - ); - - await ContentTask.spawn(browser, null, async () => { - let screenshotsChild = content.windowGlobalChild.getActor( - "ScreenshotsComponent" - ); - - let { left: currentCursorX, top: currentCursorY } = - screenshotsChild.overlay.cursorRegion; - - let rect = content.document - .getElementById("testPageElement") - .getBoundingClientRect(); - - let repeatShiftLeft = Math.round((currentCursorX - rect.right) / 10); - EventUtils.synthesizeKey( - "ArrowLeft", - { repeat: repeatShiftLeft, shiftKey: true }, - content - ); - - let repeatLeft = (currentCursorX - rect.right) % 10; - EventUtils.synthesizeKey("ArrowLeft", { repeat: repeatLeft }, content); - - let repeatShiftRight = Math.round((currentCursorY - rect.bottom) / 10); - EventUtils.synthesizeKey( - "ArrowUp", - { repeat: repeatShiftRight, shiftKey: true }, - content - ); - - let repeatRight = (currentCursorY - rect.bottom) % 10; - EventUtils.synthesizeKey("ArrowUp", { repeat: repeatRight }, content); - - await ContentTaskUtils.waitForCondition(() => { - return screenshotsChild.overlay.hoverElementRegion.isRegionValid; - }, "Wait for hover element region to be valid"); - - EventUtils.synthesizeKey("Enter", {}, content); - }); - - 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" - ); - } - ); -}); - -add_task(async function test_createRegionWithKeyboard() { - await BrowserTestUtils.withNewTab( - { - gBrowser, - url: TEST_PAGE, - }, - async browser => { - let helper = new ScreenshotsHelper(browser); - - helper.triggerUIFromToolbar(); - await helper.waitForOverlay(); - - mouse.move(100, 100); - - 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 stateChangePromise = expectedState => - ContentTaskUtils.waitForCondition(() => { - info( - `got ${screenshotsChild.overlay.state}. expected ${expectedState}` - ); - return screenshotsChild.overlay.state === expectedState; - }, `Wait for overlay state to be ${expectedState}`); - - let screenshotsChild = content.windowGlobalChild.getActor( - "ScreenshotsComponent" - ); - - await ContentTaskUtils.waitForCondition(() => { - return ( - screenshotsChild.overlay.cursorRegion.left === 100 && - screenshotsChild.overlay.cursorRegion.top === 100 - ); - }, "Wait for cursor region to be at 10, 10"); - - EventUtils.synthesizeKey(" ", {}, content); - - let expectedState = "dragging"; - await stateChangePromise(expectedState); - - for (let [key, expectedDimensions] of keyToExpectedPositionArray) { - EventUtils.synthesizeKey(key, { repeat: 10 }, content); - info(`Key: ${key}`); - info( - `Actual dimensions: ${JSON.stringify( - screenshotsChild.overlay.selectionRegion.dimensions, - null, - 2 - )}` - ); - info( - `Expected dimensions: ${JSON.stringify( - expectedDimensions, - null, - 2 - )}` - ); - assertSelectionRegionDimensions( - screenshotsChild.overlay.selectionRegion.dimensions, - expectedDimensions - ); - } - - EventUtils.synthesizeKey("ArrowRight", { repeat: 10 }, content); - EventUtils.synthesizeKey("ArrowDown", { repeat: 10 }, content); - - EventUtils.synthesizeKey(" ", {}, content); - expectedState = "selected"; - await stateChangePromise(expectedState); - } - ); - - let region = await helper.getSelectionRegionDimensions(); - - is(region.left, 100, "The selected region left is 100"); - is(region.right, 110, "The selected region right is 110"); - is(region.top, 100, "The selected region top is 100"); - is(region.bottom, 110, "The selected region bottom is 110"); - - helper.triggerUIFromToolbar(); - await helper.waitForOverlayClosed(); - } - ); -}); - -add_task(async function test_createRegionWithKeyboardWithShift() { - await BrowserTestUtils.withNewTab( - { - gBrowser, - url: TEST_PAGE, - }, - async browser => { - let helper = new ScreenshotsHelper(browser); - - helper.triggerUIFromToolbar(); - await helper.waitForOverlay(); - - mouse.move(100, 100); - - await SpecialPowers.spawn( - browser, - [SHIFT_PLUS_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 stateChangePromise = expectedState => - ContentTaskUtils.waitForCondition(() => { - info( - `got ${screenshotsChild.overlay.state}. expected ${expectedState}` - ); - return screenshotsChild.overlay.state === expectedState; - }, `Wait for overlay state to be ${expectedState}`); - - let screenshotsChild = content.windowGlobalChild.getActor( - "ScreenshotsComponent" - ); - - await ContentTaskUtils.waitForCondition(() => { - return ( - screenshotsChild.overlay.cursorRegion.left === 100 && - screenshotsChild.overlay.cursorRegion.top === 100 - ); - }, "Wait for cursor region to be at 10, 10"); - - EventUtils.synthesizeKey(" ", {}, content); - - let expectedState = "dragging"; - await stateChangePromise(expectedState); - - for (let [key, expectedDimensions] of keyToExpectedPositionArray) { - EventUtils.synthesizeKey( - key, - { repeat: 10, shiftKey: true }, - content - ); - info(`Key: ${key}`); - info( - `Actual dimensions: ${JSON.stringify( - screenshotsChild.overlay.selectionRegion.dimensions, - null, - 2 - )}` - ); - info( - `Expected dimensions: ${JSON.stringify( - expectedDimensions, - null, - 2 - )}` - ); - assertSelectionRegionDimensions( - screenshotsChild.overlay.selectionRegion.dimensions, - expectedDimensions - ); - } - - EventUtils.synthesizeKey( - "ArrowRight", - { repeat: 10, shiftKey: true }, - content - ); - EventUtils.synthesizeKey( - "ArrowDown", - { repeat: 10, shiftKey: true }, - content - ); - - EventUtils.synthesizeKey(" ", {}, content); - expectedState = "selected"; - await stateChangePromise(expectedState); - } - ); - - let region = await helper.getSelectionRegionDimensions(); - - is(region.left, 100, "The selected region left is 100"); - is(region.right, 200, "The selected region right is 200"); - is(region.top, 100, "The selected region top is 100"); - is(region.bottom, 200, "The selected region bottom is 200"); - - helper.triggerUIFromToolbar(); - await helper.waitForOverlayClosed(); - } - ); -}); diff --git a/browser/components/screenshots/tests/browser/browser_overlay_keyboard_test.js b/browser/components/screenshots/tests/browser/browser_overlay_keyboard_test.js index 71b93b5c0656..592587a67d7d 100644 --- a/browser/components/screenshots/tests/browser/browser_overlay_keyboard_test.js +++ b/browser/components/screenshots/tests/browser/browser_overlay_keyboard_test.js @@ -136,6 +136,9 @@ const SHIFT_PLUS_KEY_TO_EXPECTED_POSITION_ARRAY = [ ], ]; +/** + * + */ add_task(async function test_moveRegionWithKeyboard() { await BrowserTestUtils.withNewTab( { diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_focus_test.js b/browser/components/screenshots/tests/browser/browser_screenshots_focus_test.js index c8e3142c601a..e2b412dc1c90 100644 --- a/browser/components/screenshots/tests/browser/browser_screenshots_focus_test.js +++ b/browser/components/screenshots/tests/browser/browser_screenshots_focus_test.js @@ -46,7 +46,7 @@ async function restoreFocusOnEscape(initialFocusElem, helper) { ); EventUtils.synthesizeKey("s", { shiftKey: true, accelKey: true }); - let button = await helper.getPanelButton("#visible-page"); + 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}` @@ -88,7 +88,7 @@ add_task(async function testPanelFocused() { info("Opening Screenshots and waiting for the panel"); helper.triggerUIFromToolbar(); - let button = await helper.getPanelButton("#visible-page"); + 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}` @@ -215,7 +215,7 @@ add_task(async function test_focusLastUsedMethod() { helper.triggerUIFromToolbar(); await helper.waitForOverlay(); - let expectedFocusedButton = await helper.getPanelButton("#visible-page"); + let expectedFocusedButton = await helper.getPanelButton(".visible-page"); await BrowserTestUtils.waitForCondition(() => { return ( @@ -233,7 +233,7 @@ add_task(async function test_focusLastUsedMethod() { let screenshotReady = TestUtils.topicObserved( "screenshots-preview-ready" ); - let fullpageButton = await helper.getPanelButton("#full-page"); + let fullpageButton = await helper.getPanelButton(".full-page"); fullpageButton.click(); await screenshotReady; @@ -242,7 +242,7 @@ add_task(async function test_focusLastUsedMethod() { await helper.waitForOverlay(); - expectedFocusedButton = await helper.getPanelButton("#full-page"); + expectedFocusedButton = await helper.getPanelButton(".full-page"); await BrowserTestUtils.waitForCondition(() => { return ( @@ -258,7 +258,7 @@ add_task(async function test_focusLastUsedMethod() { ); screenshotReady = TestUtils.topicObserved("screenshots-preview-ready"); - let visiblepageButton = await helper.getPanelButton("#visible-page"); + let visiblepageButton = await helper.getPanelButton(".visible-page"); visiblepageButton.click(); await screenshotReady; @@ -267,7 +267,7 @@ add_task(async function test_focusLastUsedMethod() { await helper.waitForOverlay(); - expectedFocusedButton = await helper.getPanelButton("#visible-page"); + expectedFocusedButton = await helper.getPanelButton(".visible-page"); await BrowserTestUtils.waitForCondition(() => { return ( @@ -309,7 +309,7 @@ add_task(async function test_focusLastUsedMethod() { helper.triggerUIFromToolbar(); await helper.waitForOverlay(); - let visibleButton = await helper.getPanelButton("#visible-page"); + let visibleButton = await helper.getPanelButton(".visible-page"); screenshotReady = TestUtils.topicObserved("screenshots-preview-ready"); visibleButton.click(); @@ -341,7 +341,7 @@ add_task(async function test_focusLastUsedMethod() { helper.triggerUIFromToolbar(); await helper.waitForOverlay(); - visibleButton = await helper.getPanelButton("#visible-page"); + visibleButton = await helper.getPanelButton(".visible-page"); screenshotReady = TestUtils.topicObserved("screenshots-preview-ready"); visibleButton.click(); @@ -370,89 +370,3 @@ add_task(async function test_focusLastUsedMethod() { await SpecialPowers.popPrefEnv(); }); - -add_task(async function testFocusedIsLocked() { - await BrowserTestUtils.withNewTab( - { - gBrowser, - url: TEST_PAGE, - }, - async browser => { - let helper = new ScreenshotsHelper(browser); - helper.triggerUIFromToolbar(); - await helper.waitForOverlay(); - - let panel = await helper.waitForPanel(); - let mozButtonGroup = panel - .querySelector("screenshots-buttons") - .shadowRoot.querySelector("moz-button-group"); - let firstButton = mozButtonGroup.firstElementChild; - let lastButton = mozButtonGroup.lastElementChild; - - firstButton.focus(); - - await BrowserTestUtils.waitForCondition(() => { - return firstButton.getRootNode().activeElement === firstButton; - }, "The first button in the panel should have focus"); - info( - `Actual focused id: ${Services.focus.focusedElement.id}. Expected focused id: ${firstButton.id}` - ); - is( - Services.focus.focusedElement, - firstButton, - "The first button in the panel should have focus" - ); - - EventUtils.synthesizeKey("KEY_Tab"); - - await BrowserTestUtils.waitForCondition(() => { - return lastButton.getRootNode().activeElement === lastButton; - }, "The last button in the panel should have focus"); - info( - `Actual focused id: ${Services.focus.focusedElement.id}. Expected focused id: ${lastButton.id}` - ); - is( - Services.focus.focusedElement, - lastButton, - "The last button in the panel should have focus" - ); - - EventUtils.synthesizeKey("KEY_Tab"); - - // Focus should move to the content document - await BrowserTestUtils.waitForCondition(() => { - return ( - firstButton.getRootNode().activeElement !== firstButton && - lastButton.getRootNode().activeElement !== lastButton - ); - }, "The first and last buttons do not have focus"); - Assert.notEqual( - Services.focus.focusedElement, - firstButton, - "The first button does not have focus" - ); - Assert.notEqual( - Services.focus.focusedElement, - lastButton, - "The last button does not have focus" - ); - - EventUtils.synthesizeKey("KEY_Tab"); - - info( - `Actual focused id: ${Services.focus.focusedElement.id}. Expected focused id: ${firstButton.id}` - ); - await BrowserTestUtils.waitForCondition(() => { - return firstButton.getRootNode().activeElement === firstButton; - }, "The first button in the panel should have focus"); - info( - `Actual focused id: ${Services.focus.focusedElement.id}. Expected focused id: ${firstButton.id}` - ); - is( - Services.focus.focusedElement, - firstButton, - "The first button in the panel should have focus" - ); - } - ); -}); diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_telemetry_tests.js b/browser/components/screenshots/tests/browser/browser_screenshots_telemetry_tests.js index 1b9ecd0e7977..0ce55eb08e15 100644 --- a/browser/components/screenshots/tests/browser/browser_screenshots_telemetry_tests.js +++ b/browser/components/screenshots/tests/browser/browser_screenshots_telemetry_tests.js @@ -205,7 +205,7 @@ add_task(async function test_started_retry() { // click the visible page button in panel let visiblePageButton = panel .querySelector("screenshots-buttons") - .shadowRoot.querySelector("#visible-page"); + .shadowRoot.querySelector(".visible-page"); visiblePageButton.click(); await screenshotReady; @@ -242,7 +242,7 @@ add_task(async function test_canceled() { // click the full page button in panel let fullPageButton = panel .querySelector("screenshots-buttons") - .shadowRoot.querySelector("#full-page"); + .shadowRoot.querySelector(".full-page"); fullPageButton.click(); await screenshotReady; @@ -303,7 +303,7 @@ add_task(async function test_copy() { // click the visible page button in panel let visiblePageButton = panel .querySelector("screenshots-buttons") - .shadowRoot.querySelector("#visible-page"); + .shadowRoot.querySelector(".visible-page"); visiblePageButton.click(); info("clicked visible page, waiting for screenshots-preview-ready"); await screenshotReady; @@ -413,7 +413,7 @@ add_task(async function test_extra_telemetry() { // click the visible page button in panel let visiblePageButton = panel .querySelector("screenshots-buttons") - .shadowRoot.querySelector("#visible-page"); + .shadowRoot.querySelector(".visible-page"); visiblePageButton.click(); info("clicked visible page, waiting for screenshots-preview-ready"); await screenshotReady; @@ -429,7 +429,7 @@ add_task(async function test_extra_telemetry() { // click the full page button in panel let fullPageButton = panel .querySelector("screenshots-buttons") - .shadowRoot.querySelector("#full-page"); + .shadowRoot.querySelector(".full-page"); fullPageButton.click(); await screenshotReady; diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_test_downloads.js b/browser/components/screenshots/tests/browser/browser_screenshots_test_downloads.js index b98499c51682..66959baa5bd0 100644 --- a/browser/components/screenshots/tests/browser/browser_screenshots_test_downloads.js +++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_downloads.js @@ -109,7 +109,7 @@ add_task(async function test_download_without_filepicker() { // click the visible page button in panel let visiblePageButton = panel .querySelector("screenshots-buttons") - .shadowRoot.querySelector("#visible-page"); + .shadowRoot.querySelector(".visible-page"); visiblePageButton.click(); await screenshotReady; 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 index 92b136d3a6ed..8cbda11e32e5 100644 --- a/browser/components/screenshots/tests/browser/browser_screenshots_test_full_page.js +++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_full_page.js @@ -41,7 +41,7 @@ add_task(async function test_fullpageScreenshot() { // click the full page button in panel let visiblePage = panel .querySelector("screenshots-buttons") - .shadowRoot.querySelector("#full-page"); + .shadowRoot.querySelector(".full-page"); visiblePage.click(); await screenshotReady; @@ -136,7 +136,7 @@ add_task(async function test_fullpageScreenshotScrolled() { // click the full page button in panel let visiblePage = panel .querySelector("screenshots-buttons") - .shadowRoot.querySelector("#full-page"); + .shadowRoot.querySelector(".full-page"); visiblePage.click(); await screenshotReady; diff --git a/browser/components/screenshots/tests/browser/browser_screenshots_test_visible.js b/browser/components/screenshots/tests/browser/browser_screenshots_test_visible.js index 7c207cc8cf41..d2bbd4b906e7 100644 --- a/browser/components/screenshots/tests/browser/browser_screenshots_test_visible.js +++ b/browser/components/screenshots/tests/browser/browser_screenshots_test_visible.js @@ -45,7 +45,7 @@ add_task(async function test_visibleScreenshot() { // click the visible page button in panel let visiblePageButton = panel .querySelector("screenshots-buttons") - .shadowRoot.querySelector("#visible-page"); + .shadowRoot.querySelector(".visible-page"); visiblePageButton.click(); await screenshotReady; @@ -142,7 +142,7 @@ add_task(async function test_visibleScreenshotScrolledY() { // click the visible page button in panel let visiblePageButton = panel .querySelector("screenshots-buttons") - .shadowRoot.querySelector("#visible-page"); + .shadowRoot.querySelector(".visible-page"); visiblePageButton.click(); await screenshotReady; @@ -239,7 +239,7 @@ add_task(async function test_visibleScreenshotScrolledX() { // click the visible page button in panel let visiblePageButton = panel .querySelector("screenshots-buttons") - .shadowRoot.querySelector("#visible-page"); + .shadowRoot.querySelector(".visible-page"); visiblePageButton.click(); await screenshotReady; @@ -336,7 +336,7 @@ add_task(async function test_visibleScreenshotScrolledXAndY() { // click the visible page button in panel let visiblePageButton = panel .querySelector("screenshots-buttons") - .shadowRoot.querySelector("#visible-page"); + .shadowRoot.querySelector(".visible-page"); visiblePageButton.click(); await screenshotReady; diff --git a/browser/components/screenshots/tests/browser/head.js b/browser/components/screenshots/tests/browser/head.js index 177b986b6a5b..93652b2be90b 100644 --- a/browser/components/screenshots/tests/browser/head.js +++ b/browser/components/screenshots/tests/browser/head.js @@ -28,8 +28,8 @@ const { MAX_CAPTURE_DIMENSION, MAX_CAPTURE_AREA } = ChromeUtils.importESModule( const gScreenshotUISelectors = { panel: "#screenshotsPagePanel", - fullPageButton: "button#full-page", - visiblePageButton: "button#visible-page", + fullPageButton: "button.full-page", + visiblePageButton: "button.visible-page", copyButton: "button.#copy", };