forked from mirrors/gecko-dev
83b479b588
The problem I'm trying to solve: There is currently no way to create a selected region in the screenshots overlay with the keyboard. I recently added support for resizing a selected region in bug 1801954, but a user still needs to create a region with the mouse before the keyboard can be used. I tried to look at what other browsers are doing in this scenario. Unfortunately there isn't much to go off. Most browsers, I can't even take a screenshot and the only browser that I found to have keyboard support for screenshots is MS Edge. In Edge, when you open screenshots, if your mouse isn't over the content area it will immediately move your mouse to the center of the page. If your mouse is over the content, it remains in place. Then, arrow keys will move the cursor around and you can hit space/enter to start creating a region. I didn't like that Edge moved the mouse immediately after opening screenshots so I took a different approach. My approach: Screenshots will not move the mouse until an arrow key is pressed. How it works: If your cursor is above the content and an arrow key is pressed, the cursor will move in the direction of the arrow key that was pressed. If your cursor is not above the content and a arrow key is pressed, the cursor will be moved to the middle of the content. Screenshots will not move the cursor until an arrow key is pressed. When moving around the overlay with the keyboard: only hitting an arrow key will move the cursor around by 1px. If shift + arrow key, the cursor will move around by 10px. When space is clicked while moving the cursor, it will start a region. Moving the arrow keys allows the region to sized. When the cursor is above an element and the hover element rect is visible, hitting enter will select that region. If no hover element region exists, enter will behave the same as space. I am also keeping the screenshots UI focused in this patch. Tab/shift + tab will keep focus to screenshots UI. Shift + F6 will escape the focus loop I've made in this patch if needed. Although, if a user has entered screenshots, it makes sense that for the current time, only screenshots UI is focusable. Differential Revision: https://phabricator.services.mozilla.com/D197703
90 lines
3.1 KiB
JavaScript
90 lines
3.1 KiB
JavaScript
/* 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 #template = null;
|
|
|
|
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:moz-button-group>
|
|
<html:button id="visible-page" class="screenshot-button footer-button" data-l10n-id="screenshots-save-visible-button"></html:button>
|
|
<html:button id="full-page" class="screenshot-button footer-button primary" data-l10n-id="screenshots-save-page-button"></html:button>
|
|
</html:moz-button-group>
|
|
|
|
`;
|
|
}
|
|
|
|
static get fragment() {
|
|
if (!ScreenshotsButtons.#template) {
|
|
ScreenshotsButtons.#template = MozXULElement.parseXULToFragment(
|
|
ScreenshotsButtons.markup
|
|
);
|
|
}
|
|
return ScreenshotsButtons.#template;
|
|
}
|
|
|
|
connectedCallback() {
|
|
const shadowRoot = this.attachShadow({ mode: "open" });
|
|
document.l10n.connectRoot(shadowRoot);
|
|
|
|
this.shadowRoot.append(ScreenshotsButtons.fragment);
|
|
|
|
let visibleButton = shadowRoot.getElementById("visible-page");
|
|
visibleButton.onclick = function () {
|
|
ScreenshotsUtils.doScreenshot(gBrowser.selectedBrowser, "visible");
|
|
};
|
|
|
|
let fullpageButton = shadowRoot.getElementById("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
|
|
*/
|
|
async focusButton(buttonToFocus) {
|
|
await this.shadowRoot.querySelector("moz-button-group").updateComplete;
|
|
if (buttonToFocus === "fullpage") {
|
|
this.shadowRoot
|
|
.getElementById("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")
|
|
.focus({ focusVisible: true });
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("screenshots-buttons", ScreenshotsButtons, {
|
|
extends: "toolbar",
|
|
});
|
|
}
|