Merge pull request #182 from ator-dev/highlight-tools-organise

Group highlight tools in dir, separate stylesheets
searchmarkers · Sep 8, 2024 · f955dd8 · f955dd8
2 parents 5422b73 + 213842a
commit f955dd8
Show file tree

Hide file tree

Showing 25 changed files with 144 additions and 90 deletions.
diff --git a/src/background.mts b/src/background.mts
@@ -5,8 +5,8 @@
  */
 
 import "/dist/modules/namespace/normalize.mjs";
-import type { ConfigURLFilters, ResearchInstance, SearchSites, URLFilter } from "./modules/storage.mjs";
-import { Bank, Config, configInitialize } from "./modules/storage.mjs";
+import type { ConfigURLFilters, ResearchInstance, SearchSites, URLFilter } from "/dist/modules/storage.mjs";
+import { Bank, Config, configInitialize } from "/dist/modules/storage.mjs";
 import { parseCommand } from "/dist/modules/commands.mjs";
 import type * as Message from "/dist/modules/messaging.mjs";
 import { sendTabMessage } from "/dist/modules/messaging/tab.mjs";

diff --git a/src/content.mts b/src/content.mts
@@ -5,14 +5,13 @@
  */
 
 /* eslint-disable indent */ // TODO remove
-import type { ConfigValues } from "./modules/storage.mjs";
+import type { ConfigValues } from "/dist/modules/storage.mjs";
 import type { CommandInfo } from "/dist/modules/commands.mjs";
 import type * as Message from "/dist/modules/messaging.mjs";
 import { sendBackgroundMessage } from "/dist/modules/messaging/background.mjs";
 import { type MatchMode, MatchTerm, termEquals, TermTokens, TermPatterns } from "/dist/modules/match-term.mjs";
 import { EleID } from "/dist/modules/common.mjs";
 import { type AbstractEngineManager, EngineManager } from "/dist/modules/highlight/engine-manager.mjs";
-import { Style } from "/dist/modules/style.mjs";
 import { type AbstractToolbar, type ControlButtonName } from "/dist/modules/interface/toolbar.mjs";
 import { Toolbar } from "/dist/modules/interface/toolbars/toolbar.mjs";
 import { assert, itemsMatch } from "/dist/modules/common.mjs";
@@ -235,15 +234,13 @@ interface TermAppender<Async = true> {
 	};
 	const updateTermStatus = (term: MatchTerm) => getToolbarOrNull()?.updateTermStatus(term);
 	const highlighter: AbstractEngineManager = new EngineManager(updateTermStatus, termTokens, termPatterns);
-	const styleManager = new Style();
 	const termSetterInternal: TermSetter<false> = {
 		setTerms: termsNew => {
 			if (itemsMatch(terms, termsNew, termEquals)) {
 				return;
 			}
 			const termsOld: ReadonlyArray<MatchTerm> = [ ...terms ];
 			terms = termsNew;
-			styleManager.updateStyle(terms, termTokens, hues);
 			updateToolbar(termsOld, terms, null, getToolbar(), commands);
 			// Give the interface a chance to redraw before performing highlighting.
 			setTimeout(() => {
@@ -259,7 +256,6 @@ interface TermAppender<Async = true> {
 			} else {
 				terms = terms.slice(0, termIndex).concat(terms.slice(termIndex + 1));
 			}
-			styleManager.updateStyle(terms, termTokens, hues);
 			updateToolbar(termsOld, terms, { term, termIndex }, getToolbar(), commands);
 			// Give the interface a chance to redraw before performing highlighting.
 			setTimeout(() => {
@@ -269,7 +265,6 @@ interface TermAppender<Async = true> {
 		appendTerm: term => {
 			const termsOld: ReadonlyArray<MatchTerm> = [ ...terms ];
 			terms = terms.concat(term);
-			styleManager.updateStyle(terms, termTokens, hues);
 			updateToolbar(termsOld, terms, { term, termIndex: termsOld.length }, getToolbar(), commands);
 			// Give the interface a chance to redraw before performing highlighting.
 			setTimeout(() => {

diff --git a/src/modules/common.mts b/src/modules/common.mts
@@ -125,6 +125,7 @@ enum EleID {
 }
 
 enum EleClass {
+	STYLESHEET = "markmysearch--stylesheet",
 	HIGHLIGHTS_SHOWN = "mms--highlights-shown",
 	TERM = "mms--term",
 	FOCUS = "mms--focus",

diff --git a/src/modules/highlight/engine-manager.mts b/src/modules/highlight/engine-manager.mts
@@ -7,9 +7,9 @@
 import type { HighlighterCounterInterface, HighlighterWalkerInterface } from "/dist/modules/highlight/model.mjs";
 import type { Highlighter } from "/dist/modules/highlight/engine.mjs";
 import type { AbstractSpecialEngine } from "/dist/modules/highlight/special-engine.mjs";
-import type { AbstractTermCounter } from "/dist/modules/highlight/term-counter.mjs";
-import type { AbstractTermWalker } from "/dist/modules/highlight/term-walker.mjs";
-import type { AbstractTermMarker } from "/dist/modules/highlight/term-marker.mjs";
+import type { AbstractTermCounter } from "/dist/modules/highlight/tools/term-counter.mjs";
+import type { AbstractTermWalker } from "/dist/modules/highlight/tools/term-walker.mjs";
+import type { AbstractTermMarker } from "/dist/modules/highlight/tools/term-marker.mjs";
 import type { AbstractTreeEditEngine } from "/dist/modules/highlight/models/tree-edit.mjs";
 import type { AbstractTreeCacheEngine } from "/dist/modules/highlight/models/tree-cache.mjs";
 import { getContainerBlock } from "/dist/modules/highlight/container-blocks.mjs";
@@ -113,10 +113,7 @@ class EngineManager implements AbstractEngineManager {
 	}
 
 	async setEngine (preference: Engine) {
-		const highlighting = this.#highlighting;
-		if (highlighting && this.#engineData) {
-			this.#engineData.engine.deactivate();
-		}
+		this.deactivateEngine();
 		this.#engineData = await this.constructAndLinkEngineData(compatibility.highlighting.engineToUse(preference));
 	}
 
@@ -173,9 +170,9 @@ class EngineManager implements AbstractEngineManager {
 		case "ELEMENT": {
 			const [ { ElementEngine }, { TermCounter }, { TermWalker }, { TermMarker } ] = await Promise.all([
 				import("/dist/modules/highlight/engines/element.mjs"),
-				import("/dist/modules/highlight/models/tree-edit/term-counters/term-counter.mjs"),
-				import("/dist/modules/highlight/models/tree-edit/term-walkers/term-walker.mjs"),
-				import("/dist/modules/highlight/models/tree-edit/term-markers/term-marker.mjs"),
+				import("/dist/modules/highlight/tools/term-counters/tree-edit.mjs"),
+				import("/dist/modules/highlight/tools/term-walkers/tree-edit.mjs"),
+				import("/dist/modules/highlight/tools/term-markers/tree-edit.mjs"),
 			]);
 			const engine = new ElementEngine(this.#termTokens, this.#termPatterns);
 			return {
@@ -187,9 +184,9 @@ class EngineManager implements AbstractEngineManager {
 		} case "PAINT": {
 			const [ { PaintEngine }, { TermCounter }, { TermWalker }, { TermMarker } ] = await Promise.all([
 				import("/dist/modules/highlight/engines/paint.mjs"),
-				import("/dist/modules/highlight/models/tree-cache/term-counters/term-counter.mjs"),
-				import("/dist/modules/highlight/models/tree-cache/term-walkers/term-walker.mjs"),
-				import("/dist/modules/highlight/models/tree-cache/term-markers/term-marker.mjs"),
+				import("/dist/modules/highlight/tools/term-counters/tree-cache.mjs"),
+				import("/dist/modules/highlight/tools/term-walkers/tree-cache.mjs"),
+				import("/dist/modules/highlight/tools/term-markers/tree-cache.mjs"),
 			]);
 			const engine = new PaintEngine(
 				await PaintEngine.getMethodModule(this.#paintEngineMethodClass),
@@ -204,9 +201,9 @@ class EngineManager implements AbstractEngineManager {
 		} case "HIGHLIGHT": {
 			const [ { HighlightEngine }, { TermCounter }, { TermWalker }, { TermMarker } ] = await Promise.all([
 				import("/dist/modules/highlight/engines/highlight.mjs"),
-				import("/dist/modules/highlight/models/tree-cache/term-counters/term-counter.mjs"),
-				import("/dist/modules/highlight/models/tree-cache/term-walkers/term-walker.mjs"),
-				import("/dist/modules/highlight/models/tree-cache/term-markers/term-marker.mjs"),
+				import("/dist/modules/highlight/tools/term-counters/tree-cache.mjs"),
+				import("/dist/modules/highlight/tools/term-walkers/tree-cache.mjs"),
+				import("/dist/modules/highlight/tools/term-markers/tree-cache.mjs"),
 			]);
 			const engine = new HighlightEngine(this.#termTokens, this.#termPatterns);
 			return {
@@ -219,12 +216,20 @@ class EngineManager implements AbstractEngineManager {
 	}
 
 	removeEngine () {
-		if (this.#highlighting && this.#engineData) {
-			this.#engineData.engine.deactivate();
-		}
+		this.deactivateEngine();
 		this.#engineData = null;
 	}
 
+	deactivateEngine () {
+		const engineData = this.#engineData;
+		if (!engineData) {
+			return;
+		}
+		engineData.termWalker?.deactivate();
+		engineData.termMarker?.deactivate();
+		engineData.engine.deactivate();
+	}
+
 	signalPaintEngineMethod (preference: PaintEngineMethod) {
 		this.#paintEngineMethodClass = compatibility.highlighting.paintEngineMethodToUse(preference);
 	}

diff --git a/src/modules/highlight/model.mts b/src/modules/highlight/model.mts
@@ -4,7 +4,7 @@
  * Licensed under the EUPL-1.2-or-later.
  */
 
-import type { AbstractTermCounter } from "/dist/modules/highlight/term-counter.mjs";
+import type { AbstractTermCounter } from "/dist/modules/highlight/tools/term-counter.mjs";
 import type { MatchTerm } from "/dist/modules/match-term.mjs";
 
 interface HighlighterCounterInterface {

diff --git a/src/modules/highlight/term-counter.mts → src/modules/highlight/tools/term-counter.mts b/src/modules/highlight/term-counter.mts → src/modules/highlight/tools/term-counter.mts
diff --git a/...tree-cache/term-counters/term-counter.mts → ...hlight/tools/term-counters/tree-cache.mts b/...tree-cache/term-counters/term-counter.mts → ...hlight/tools/term-counters/tree-cache.mts
@@ -4,7 +4,7 @@
  * Licensed under the EUPL-1.2-or-later.
  */
 
-import type { AbstractTermCounter } from "/dist/modules/highlight/term-counter.mjs";
+import type { AbstractTermCounter } from "/dist/modules/highlight/tools/term-counter.mjs";
 import type { BaseFlow } from "/dist/modules/highlight/matcher.mjs";
 import { highlightTags } from "/dist/modules/highlight/highlight-tags.mjs";
 import type { MatchTerm } from "/dist/modules/match-term.mjs";

diff --git a/.../tree-edit/term-counters/term-counter.mts → ...ghlight/tools/term-counters/tree-edit.mts b/.../tree-edit/term-counters/term-counter.mts → ...ghlight/tools/term-counters/tree-edit.mts
@@ -4,7 +4,7 @@
  * Licensed under the EUPL-1.2-or-later.
  */
 
-import type { AbstractTermCounter } from "/dist/modules/highlight/term-counter.mjs";
+import type { AbstractTermCounter } from "/dist/modules/highlight/tools/term-counter.mjs";
 import type { MatchTerm, TermTokens } from "/dist/modules/match-term.mjs";
 import { getTermClass } from "/dist/modules/common.mjs";
 

diff --git a/src/modules/highlight/term-marker.mts → src/modules/highlight/tools/term-marker.mts b/src/modules/highlight/term-marker.mts → src/modules/highlight/tools/term-marker.mts
@@ -7,6 +7,8 @@
 import type { MatchTerm } from "/dist/modules/match-term.mjs";
 
 interface AbstractTermMarker {
+	readonly deactivate: () => void
+
 	/**
 	 * Inserts markers in the scrollbar to indicate the scroll positions of term highlights.
 	 * @param terms Terms highlighted in the page to mark the scroll position of.

diff --git a/src/modules/style.mts → ...es/highlight/tools/term-marker/common.mts b/src/modules/style.mts → ...es/highlight/tools/term-marker/common.mts
@@ -4,26 +4,11 @@
  * Licensed under the EUPL-1.2-or-later.
  */
 
-import { StyleManager } from "/dist/modules/style-manager.mjs";
-import { HTMLStylesheet } from "/dist/modules/stylesheets/html.mjs";
 import type { MatchTerm, TermTokens } from "/dist/modules/match-term.mjs";
 import { Z_INDEX_MAX, EleID, EleClass, AtRuleID, getTermClass } from "/dist/modules/common.mjs";
 
-class Style {
-	#styleManager = new StyleManager(new HTMLStylesheet(document.head));
-
-	updateStyle (
-		terms: ReadonlyArray<MatchTerm>,
-		termTokens: TermTokens,
-		hues: ReadonlyArray<number>,
-	) {
-		/** Prevents websites from taking precedence by applying !important to every rule. */
-		const makeImportant = (styleText: string) => (
-			styleText.replace(/;/g, " !important;")
-		);
-		let style = makeImportant(`
-/* || Scroll Markers */
-
+abstract class Styles {
+	static readonly mainCSS = (`
 #${EleID.MARKER_GUTTER} {
 	& {
 		display: block;
@@ -46,39 +31,29 @@ class Style {
 	}
 }
 
-/* || Term Highlights */
-
-.${EleClass.FOCUS_CONTAINER} {
-	animation: ${AtRuleID.FLASH} 1s;
-}
-`) + (`
-/* || Transitions */
-
 @keyframes ${AtRuleID.MARKER_ON} {
 	from {} to { padding-right: 16px; };
 }
 @keyframes ${AtRuleID.MARKER_OFF} {
 	from { padding-right: 16px; } to { padding-right: 0; };
 }
-@keyframes ${AtRuleID.FLASH} {
-	from { background-color: hsl(0 0% 65% / 0.8); } to {};
-}
 `
-		);
-		for (let i = 0; i < terms.length; i++) {
-			const term = terms[i];
-			const hue = hues[i % hues.length];
-			style += makeImportant(`
-/* || Term Scroll Markers */
+	);
 
+	static getTermCSS (
+		term: MatchTerm,
+		termIndex: number,
+		hues: ReadonlyArray<number>,
+		termTokens: TermTokens,
+	): string {
+		const hue = hues[termIndex % hues.length];
+		return `
 #${EleID.MARKER_GUTTER} .${getTermClass(term, termTokens)} {
 	background: hsl(${hue} 100% 44%);
 }
 `
-			);
-		}
-		this.#styleManager.setStyle(style);
+		;
 	}
 }
 
-export { Style };
+export { Styles };
diff --git a/...s/tree-cache/term-markers/term-marker.mts → ...ghlight/tools/term-markers/tree-cache.mts b/...s/tree-cache/term-markers/term-marker.mts → ...ghlight/tools/term-markers/tree-cache.mts
@@ -4,9 +4,12 @@
  * Licensed under the EUPL-1.2-or-later.
  */
 
-import type { AbstractTermMarker } from "/dist/modules/highlight/term-marker.mjs";
+import type { AbstractTermMarker } from "/dist/modules/highlight/tools/term-marker.mjs";
+import { Styles } from "/dist/modules/highlight/tools/term-marker/common.mjs";
 import type { BaseFlow } from "/dist/modules/highlight/matcher.mjs";
 import type { MatchTerm, TermTokens } from "/dist/modules/match-term.mjs";
+import { StyleManager } from "/dist/modules/style-manager.mjs";
+import { HTMLStylesheet } from "/dist/modules/stylesheets/html.mjs";
 import { EleID, getElementYRelative, getTermClass, type AllReadonly } from "/dist/modules/common.mjs";
 
 type Flow = BaseFlow<false>
@@ -16,6 +19,8 @@ class TermMarker implements AbstractTermMarker {
 
 	readonly #elementFlowsMap: AllReadonly<Map<HTMLElement, Array<Flow>>>;
 
+	readonly #styleManager = new StyleManager(new HTMLStylesheet(document.head));
+	readonly #termsStyleManager = new StyleManager(new HTMLStylesheet(document.head));
 	readonly #scrollGutter: HTMLElement;
 
 	constructor (
@@ -24,13 +29,16 @@ class TermMarker implements AbstractTermMarker {
 	) {
 		this.#termTokens = termTokens;
 		this.#elementFlowsMap = elementFlowsMap;
+		this.#styleManager.setStyle(Styles.mainCSS);
 		this.#scrollGutter = document.createElement("div");
 		this.#scrollGutter.id = EleID.MARKER_GUTTER;
 		document.body.insertAdjacentElement("afterend", this.#scrollGutter);
 	}
 
 	deactivate () {
 		this.#scrollGutter.remove();
+		this.#termsStyleManager.deactivate();
+		this.#styleManager.deactivate();
 	}
 
 	insert (
@@ -56,6 +64,11 @@ class TermMarker implements AbstractTermMarker {
 		this.#scrollGutter.innerHTML = markersHtml;
 	}
 
+	setTermsStyle (terms: ReadonlyArray<MatchTerm>, hues: ReadonlyArray<number>) {
+		const styles = terms.map((term, i) => Styles.getTermCSS(term, i, hues, this.#termTokens));
+		this.#termsStyleManager.setStyle(styles.join(""));
+	}
+
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	raise (term: MatchTerm | null, container: HTMLElement) {
 		// Depends on scroll markers refreshed Paint implementation (TODO)

diff --git a/...ls/tree-edit/term-markers/term-marker.mts → ...ighlight/tools/term-markers/tree-edit.mts b/...ls/tree-edit/term-markers/term-marker.mts → ...ighlight/tools/term-markers/tree-edit.mts
@@ -4,9 +4,12 @@
  * Licensed under the EUPL-1.2-or-later.
  */
 
-import type { AbstractTermMarker } from "/dist/modules/highlight/term-marker.mjs";
+import type { AbstractTermMarker } from "/dist/modules/highlight/tools/term-marker.mjs";
+import { Styles } from "/dist/modules/highlight/tools/term-marker/common.mjs";
 import { getContainerBlock } from "/dist/modules/highlight/container-blocks.mjs";
 import type { MatchTerm, TermTokens } from "/dist/modules/match-term.mjs";
+import { StyleManager } from "/dist/modules/style-manager.mjs";
+import { HTMLStylesheet } from "/dist/modules/stylesheets/html.mjs";
 import {
 	EleID, EleClass, getElementYRelative, elementsPurgeClass,
 	getTermClass, getTermClassToken,
@@ -15,24 +18,30 @@ import {
 class TermMarker implements AbstractTermMarker {
 	readonly #termTokens: TermTokens;
 
+	readonly #styleManager = new StyleManager(new HTMLStylesheet(document.head));
+	readonly #termsStyleManager = new StyleManager(new HTMLStylesheet(document.head));
 	readonly #scrollGutter: HTMLElement;
-	
+
 	constructor (termTokens: TermTokens) {
 		this.#termTokens = termTokens;
+		this.#styleManager.setStyle(Styles.mainCSS);
 		this.#scrollGutter = document.createElement("div");
 		this.#scrollGutter.id = EleID.MARKER_GUTTER;
 		document.body.insertAdjacentElement("afterend", this.#scrollGutter);
 	}
 
 	deactivate () {
 		this.#scrollGutter.remove();
+		this.#termsStyleManager.deactivate();
+		this.#styleManager.deactivate();
 	}
 
 	insert (
 		terms: ReadonlyArray<MatchTerm>,
 		hues: ReadonlyArray<number>,
 		highlightedElements: Iterable<HTMLElement>,
 	) {
+		this.setTermsStyle(terms, hues);
 		const regexMatchTermSelector = new RegExp(`\\b${EleClass.TERM}(?:-\\w+)+\\b`);
 		const containersInfo: Array<{
 			container: HTMLElement
@@ -67,6 +76,11 @@ class TermMarker implements AbstractTermMarker {
 		this.#scrollGutter.innerHTML = markersHtml;
 	}
 
+	setTermsStyle (terms: ReadonlyArray<MatchTerm>, hues: ReadonlyArray<number>) {
+		const styles = terms.map((term, i) => Styles.getTermCSS(term, i, hues, this.#termTokens));
+		this.#termsStyleManager.setStyle(styles.join(""));
+	}
+
 	raise (term: MatchTerm | null, container: HTMLElement) {
 		elementsPurgeClass(EleClass.FOCUS, this.#scrollGutter);
 		[6, 5, 4, 3, 2].some(precisionFactor => {

diff --git a/src/modules/highlight/term-walker.mts → src/modules/highlight/tools/term-walker.mts b/src/modules/highlight/term-walker.mts → src/modules/highlight/tools/term-walker.mts
@@ -7,6 +7,8 @@
 import type { MatchTerm } from "/dist/modules/match-term.mjs";
 
 interface AbstractTermWalker {
+	readonly deactivate: () => void
+
 	/**
 	 * Scrolls to the next (downwards) occurrence of a term in the document. Testing begins from the current selection position.
 	 * @param reverse Indicates whether elements should be tried in reverse, selecting the previous term as opposed to the next.