diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/server/actors/highlighters/remote-node-picker-notice.js | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | devtools/server/actors/highlighters/remote-node-picker-notice.js | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/devtools/server/actors/highlighters/remote-node-picker-notice.js b/devtools/server/actors/highlighters/remote-node-picker-notice.js new file mode 100644 index 0000000000..64b131d2a2 --- /dev/null +++ b/devtools/server/actors/highlighters/remote-node-picker-notice.js @@ -0,0 +1,188 @@ +/* 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/. */ + +"use strict"; + +const { + CanvasFrameAnonymousContentHelper, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); + +loader.lazyGetter(this, "HighlightersBundle", () => { + return new Localization(["devtools/shared/highlighters.ftl"], true); +}); + +loader.lazyGetter(this, "isAndroid", () => { + return Services.appinfo.OS === "Android"; +}); + +/** + * The RemoteNodePickerNotice is a class that displays a notice in a remote debugged page. + * This is used to signal to users they can click/tap an element to select it in the + * about:devtools-toolbox toolbox inspector. + */ +class RemoteNodePickerNotice { + #highlighterEnvironment; + #previousHoveredElement; + + rootElementId = "node-picker-notice-root"; + hideButtonId = "node-picker-notice-hide-button"; + infoNoticeElementId = "node-picker-notice-info"; + + /** + * @param {highlighterEnvironment} highlighterEnvironment + */ + constructor(highlighterEnvironment) { + this.#highlighterEnvironment = highlighterEnvironment; + + this.markup = new CanvasFrameAnonymousContentHelper( + this.#highlighterEnvironment, + this.#buildMarkup + ); + this.isReady = this.markup.initialize(); + } + + #buildMarkup = () => { + const container = this.markup.createNode({ + attributes: { class: "highlighter-container" }, + }); + + // Wrapper element. + const wrapper = this.markup.createNode({ + parent: container, + attributes: { + id: this.rootElementId, + hidden: "true", + overlay: "true", + }, + }); + + const toolbar = this.markup.createNode({ + parent: wrapper, + attributes: { + id: "node-picker-notice-toolbar", + class: "toolbar", + }, + }); + + this.markup.createNode({ + parent: toolbar, + attributes: { + id: "node-picker-notice-icon", + class: isAndroid ? "touch" : "", + }, + }); + + const actionStr = HighlightersBundle.formatValueSync( + isAndroid + ? "remote-node-picker-notice-action-touch" + : "remote-node-picker-notice-action-desktop" + ); + + this.markup.createNode({ + nodeType: "span", + parent: toolbar, + text: HighlightersBundle.formatValueSync("remote-node-picker-notice", { + action: actionStr, + }), + attributes: { + id: this.infoNoticeElementId, + }, + }); + + this.markup.createNode({ + nodeType: "button", + parent: toolbar, + text: HighlightersBundle.formatValueSync( + "remote-node-picker-notice-hide-button" + ), + attributes: { + id: this.hideButtonId, + }, + }); + + return container; + }; + + destroy() { + // hide will nullify take care of this.#abortController. + this.hide(); + this.markup.destroy(); + this.#highlighterEnvironment = null; + this.#previousHoveredElement = null; + } + + /** + * We can't use event listener directly on the anonymous content because they aren't + * working while the page is paused. + * This is called from the NodePicker instance for easier events management. + * + * @param {ClickEvent} + */ + onClick(e) { + const target = e.originalTarget || e.target; + const targetId = target?.id; + + if (targetId === this.hideButtonId) { + this.hide(); + } + } + + /** + * Since we can't use :hover in the CSS for the anonymous content as it wouldn't work + * when the page is paused, we have to roll our own implementation, adding a `.hover` + * class for the element we want to style on hover (e.g. the close button). + * This is called from the NodePicker instance for easier events management. + * + * @param {MouseMoveEvent} + */ + handleHoveredElement(e) { + const hideButton = this.markup.getElement(this.hideButtonId); + + const target = e.originalTarget || e.target; + const targetId = target?.id; + + // If the user didn't change targets, do nothing + if (this.#previousHoveredElement?.id === targetId) { + return; + } + + if (targetId === this.hideButtonId) { + hideButton.classList.add("hover"); + } else { + hideButton.classList.remove("hover"); + } + this.#previousHoveredElement = target; + } + + getMarkupRootElement() { + return this.markup.getElement(this.rootElementId); + } + + async show() { + if (this.#highlighterEnvironment.isXUL) { + return false; + } + await this.isReady; + + // Show the highlighter's root element. + const root = this.getMarkupRootElement(); + root.removeAttribute("hidden"); + root.setAttribute("overlay", "true"); + + return true; + } + + hide() { + if (this.#highlighterEnvironment.isXUL) { + return; + } + + // Hide the overlay. + this.getMarkupRootElement().setAttribute("hidden", "true"); + // Reset the hover state + this.markup.getElement(this.hideButtonId).classList.remove("hover"); + this.#previousHoveredElement = null; + } +} +exports.RemoteNodePickerNotice = RemoteNodePickerNotice; |