Add setting to always compute hintables (#287)

* Add setting to always compute hintables

* Make alwaysComputeHintables disabled by default

Author: david-tejada

src/common/settings.ts

@@ -21,6 +21,7 @@ export const defaultSettings = {
 	hintsToggleHosts: new Map<string, boolean>(),
 	hintsTogglePaths: new Map<string, boolean>(),
 	hintsToggleTabs: new Map<number, boolean>(),
+	alwaysComputeHintables: false,
 	enableNotifications: true,
 	toastPosition: "top-center",
 	toastTransition: "bounce",

src/content/hints/HintClass.ts

@@ -16,6 +16,7 @@ import {
 	getCachedSettingAll,
 } from "../settings/cacheSettings";
 import { refresh } from "../wrappers/refresh";
+import { getToggles } from "../settings/toggles";
 import { matchesStagedSelector } from "./customSelectorsStaging";
 import { getElementToPositionHint } from "./getElementToPositionHint";
 import { getAptContainer, getContextForHint } from "./getContextForHint";
@@ -72,6 +73,11 @@ const processHintQueue = debounce(() => {
 
 	const toCache = [];
 
+	// The hints might be off but being computed because of alwaysComputeHintables
+	// being enabled. In that case we do all the calculations up to this point but
+	// we don't attach hints.
+	if (!getToggles().computed) return;
+
 	for (const hint of queue) {
 		// We need to render the hint but hide it so we can calculate its size for
 		// positioning it and so we can have a transition.
@@ -680,6 +686,17 @@ export class HintClass implements Hint {
 		)
 			delete this.target.dataset["hint"];
 	}
+
+	hide() {
+		setStyleProperties(this.inner, {
+			display: "none",
+			opacity: "0%",
+		});
+	}
+
+	show() {
+		addToHintQueue(this);
+	}
 	/* eslint-enable @typescript-eslint/no-dynamic-delete */
 
 	/**

src/content/observe.ts

@@ -1,32 +1,61 @@
+import { getCachedSetting } from "./settings/cacheSettings";
 import { getToggles } from "./settings/toggles";
 import {
 	addWrappersFrom,
 	mutationObserver,
 	disconnectObservers,
 } from "./wrappers/ElementWrapperClass";
-import { clearWrappersAll } from "./wrappers/wrappers";
+import {
+	showHintsAll,
+	clearWrappersAll,
+	hideHintsAll,
+} from "./wrappers/wrappers";
 
 let enabled = false;
 const config = { attributes: true, childList: true, subtree: true };
 
 export async function updateHintsEnabled() {
 	const newEnabled = getToggles().computed;
+	const alwaysComputeHintables = getCachedSetting("alwaysComputeHintables");
+
+	// Here we assume that just one change of state takes place. That is, in the
+	// same call to this function, either the hints have been switched or the
+	// setting alwaysComputeHintables has changed. Not both at the same time. This
+	// function is also called when the content script first runs.
 
+	// 1. disabled -> enabled
 	if (!enabled && newEnabled) {
+		if (alwaysComputeHintables) {
+			showHintsAll();
+		} else {
+			await observe();
+		}
+
+		// 2. enabled -> disabled
+	} else if (enabled && !newEnabled) {
+		if (alwaysComputeHintables) {
+			hideHintsAll();
+		} else {
+			disconnectObservers();
+			clearWrappersAll();
+		}
+
+		// 3. !alwaysComputeHintables -> alwaysComputeHintables
+	} else if (!enabled && alwaysComputeHintables) {
 		await observe();
-		enabled = true;
-	}
 
-	if (enabled && !newEnabled) {
+		// 4. alwaysComputeHintables -> !alwaysComputeHintables
+	} else if (!enabled && !alwaysComputeHintables) {
 		disconnectObservers();
 		clearWrappersAll();
-		enabled = false;
 	}
+
+	enabled = newEnabled;
 }
 
 export default async function observe() {
 	enabled = getToggles().computed;
-	if (enabled) {
+	if (enabled || getCachedSetting("alwaysComputeHintables")) {
 		// We observe all the initial elements before any mutation
 		if (document.body) addWrappersFrom(document.body);
 

src/content/settings/watchSettingsChanges.ts

@@ -36,6 +36,10 @@ async function handleSettingsChanges(
 		await notifyTogglesStatus();
 	}
 
+	if ("alwaysComputeHintables" in changes) {
+		await updateHintsEnabled();
+	}
+
 	if ("keyboardClicking" in changes) {
 		const keyboardClicking = getCachedSetting("keyboardClicking");
 

src/content/wrappers/wrappers.ts

@@ -1,4 +1,5 @@
 import { ElementWrapper } from "../../typings/ElementWrapper";
+import { getToggles } from "../settings/toggles";
 import { deepGetElements } from "../utils/deepGetElements";
 
 const wrappersAll: Map<Element, ElementWrapper> = new Map();
@@ -34,6 +35,11 @@ export function getWrapper(
 	}
 
 	if (Array.isArray(key)) {
+		// The hints might be off and all hintedWrappers only exist because of
+		// alwaysComputeHintables being on. In that case we make as if there weren't
+		// any hinted wrappers for any given hint string.
+		if (!getToggles().computed) return [];
+
 		result = [];
 		for (const string of key) {
 			if (wrappersHinted.has(string)) {
@@ -107,3 +113,15 @@ export function clearWrappersAll() {
 	wrappersAll.clear();
 	wrappersHinted.clear();
 }
+
+export function hideHintsAll() {
+	for (const wrapper of wrappersHinted.values()) {
+		wrapper?.hint?.hide();
+	}
+}
+
+export function showHintsAll() {
+	for (const wrapper of wrappersHinted.values()) {
+		wrapper?.hint?.show();
+	}
+}

src/settings/SettingsComponent.tsx

@@ -69,6 +69,23 @@ export function SettingsComponent() {
 	return (
 		<div className="Settings">
 			<SettingsGroup label="General">
+				<SettingRow>
+					<Toggle
+						label="Always compute hintable elements"
+						isPressed={settings.alwaysComputeHintables}
+						onClick={() => {
+							handleChange(
+								"alwaysComputeHintables",
+								!settings.alwaysComputeHintables
+							);
+						}}
+					>
+						<p className="explanation">
+							Always compute what elements should be hinted even if the hints
+							are toggled off. This makes switching hints on quicker.
+						</p>
+					</Toggle>
+				</SettingRow>
 				<SettingRow>
 					<Toggle
 						label="Show What's New page after updating"

src/typings/Hint.ts

@@ -47,6 +47,8 @@ export interface Hint {
 	 * @returns
 	 */
 	release(keepInCache?: boolean, removeElement?: boolean): void;
+	hide(): void;
+	show(): void;
 	reattach(): void;
 	applyDefaultStyle(): void;
 	keyHighlight(): void;

src/typings/StorageSchema.ts

@@ -54,6 +54,9 @@ export const zStorageSchema = z.object({
 	hintsTogglePaths: z.map(z.string(), z.boolean()),
 	hintsToggleTabs: z.map(z.number(), z.boolean()),
 
+	// Always compute hintables
+	alwaysComputeHintables: z.boolean(),
+
 	// Notifications
 	enableNotifications: z.boolean(),
 	toastPosition: z.enum([