From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- devtools/server/actors/highlighters/selector.js | 97 +++++++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 devtools/server/actors/highlighters/selector.js (limited to 'devtools/server/actors/highlighters/selector.js') diff --git a/devtools/server/actors/highlighters/selector.js b/devtools/server/actors/highlighters/selector.js new file mode 100644 index 0000000000..249060fd3b --- /dev/null +++ b/devtools/server/actors/highlighters/selector.js @@ -0,0 +1,97 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + isNodeValid, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); +const { + BoxModelHighlighter, +} = require("resource://devtools/server/actors/highlighters/box-model.js"); + +// How many maximum nodes can be highlighted at the same time by the SelectorHighlighter +const MAX_HIGHLIGHTED_ELEMENTS = 100; + +/** + * The SelectorHighlighter runs a given selector through querySelectorAll on the + * document of the provided context node and then uses the BoxModelHighlighter + * to highlight the matching nodes + */ +class SelectorHighlighter { + constructor(highlighterEnv) { + this.highlighterEnv = highlighterEnv; + this._highlighters = []; + } + + /** + * Show a BoxModelHighlighter on each node that matches a given selector. + * + * @param {DOMNode} node + * A context node used to get the document element on which to run + * querySelectorAll(). This node will not be highlighted. + * @param {Object} options + * Configuration options for SelectorHighlighter. + * All of the options for BoxModelHighlighter.show() are also valid here. + * @param {String} options.selector + * Required. CSS selector used with querySelectorAll() to find matching elements. + */ + async show(node, options = {}) { + this.hide(); + + if (!isNodeValid(node) || !options.selector) { + return false; + } + + let nodes = []; + try { + nodes = [...node.ownerDocument.querySelectorAll(options.selector)]; + } catch (e) { + // It's fine if the provided selector is invalid, `nodes` will be an empty array. + } + + // Prevent passing the `selector` option to BoxModelHighlighter + delete options.selector; + + const promises = []; + for (let i = 0; i < Math.min(nodes.length, MAX_HIGHLIGHTED_ELEMENTS); i++) { + promises.push(this._showHighlighter(nodes[i], options)); + } + + await Promise.all(promises); + return true; + } + + /** + * Create an instance of BoxModelHighlighter, wait for it to be ready + * (see CanvasFrameAnonymousContentHelper.initialize()), + * then show the highlighter on the given node with the given configuration options. + * + * @param {DOMNode} node + * Node to be highlighted + * @param {Object} options + * Configuration options for the BoxModelHighlighter + * @return {Promise} Promise that resolves when the BoxModelHighlighter is ready + */ + async _showHighlighter(node, options) { + const highlighter = new BoxModelHighlighter(this.highlighterEnv); + await highlighter.isReady; + + highlighter.show(node, options); + this._highlighters.push(highlighter); + } + + hide() { + for (const highlighter of this._highlighters) { + highlighter.destroy(); + } + this._highlighters = []; + } + + destroy() { + this.hide(); + this.highlighterEnv = null; + } +} +exports.SelectorHighlighter = SelectorHighlighter; -- cgit v1.2.3