diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /devtools/server/actors/highlighters/fonts.js | |
parent | Initial commit. (diff) | |
download | firefox-esr-upstream.tar.xz firefox-esr-upstream.zip |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/server/actors/highlighters/fonts.js')
-rw-r--r-- | devtools/server/actors/highlighters/fonts.js | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/devtools/server/actors/highlighters/fonts.js b/devtools/server/actors/highlighters/fonts.js new file mode 100644 index 0000000000..0fe6b066c7 --- /dev/null +++ b/devtools/server/actors/highlighters/fonts.js @@ -0,0 +1,121 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + "loadSheet", + "resource://devtools/shared/layout/utils.js", + true +); +loader.lazyRequireGetter( + this, + "removeSheet", + "resource://devtools/shared/layout/utils.js", + true +); + +// How many text runs are we highlighting at a time. There may be many text runs, and we +// want to prevent performance problems. +const MAX_TEXT_RANGES = 100; + +// This stylesheet is inserted into the page to customize the color of the selected text +// runs. +// Note that this color is defined as --highlighter-content-color in the highlighters.css +// file, and corresponds to the box-model content color. We want to give it an opacity of +// 0.6 here. +const STYLESHEET_URI = + "data:text/css," + + encodeURIComponent( + "::selection{background-color:hsl(197,71%,73%,.6)!important;}" + ); + +/** + * This highlighter highlights runs of text in the page that have been rendered given a + * certain font. The highlighting is done with window selection ranges, so no extra + * markup is being inserted into the content page. + */ +class FontsHighlighter { + constructor(highlighterEnv) { + this.env = highlighterEnv; + } + + destroy() { + this.hide(); + this.env = this.currentNode = null; + } + + get currentNodeDocument() { + if (!this.currentNode) { + return this.env.document; + } + + if (this.currentNode.nodeType === this.currentNode.DOCUMENT_NODE) { + return this.currentNode; + } + + return this.currentNode.ownerDocument; + } + + /** + * Show the highlighter for a given node. + * @param {DOMNode} node The node in which we want to search for text runs. + * @param {Object} options A bunch of options that can be set: + * - {String} name The actual font name to look for in the node. + * - {String} CSSFamilyName The CSS font-family name given to this font. + */ + show(node, options) { + this.currentNode = node; + const doc = this.currentNodeDocument; + + // Get all of the fonts used to render content inside the node. + const searchRange = doc.createRange(); + searchRange.selectNodeContents(node); + + const fonts = InspectorUtils.getUsedFontFaces(searchRange, MAX_TEXT_RANGES); + + // Find the ones we want, based on the provided option. + const matchingFonts = fonts.filter( + f => f.CSSFamilyName === options.CSSFamilyName && f.name === options.name + ); + if (!matchingFonts.length) { + return; + } + + // Load the stylesheet that will customize the color of the highlighter (using a + // ::selection rule). + loadSheet(this.env.window, STYLESHEET_URI); + + // Create a multi-selection in the page to highlight the text runs. + const selection = doc.defaultView.getSelection(); + selection.removeAllRanges(); + + for (const matchingFont of matchingFonts) { + for (const range of matchingFont.ranges) { + selection.addRange(range); + } + } + } + + hide() { + // No node was highlighted before, don't need to continue any further. + if (!this.currentNode) { + return; + } + + try { + removeSheet(this.env.window, STYLESHEET_URI); + } catch (e) { + // Silently fail here as we might not have inserted the stylesheet at all. + } + + // Simply remove all current ranges in the seletion. + const doc = this.currentNodeDocument; + const selection = doc.defaultView.getSelection(); + selection.removeAllRanges(); + } +} + +exports.FontsHighlighter = FontsHighlighter; |