feat: ability to enable and disable elements on a page like buttons, …

…links, ... etc

src/contents/content.tsx

@@ -27,7 +27,7 @@ export const createShadowRoot = (shadowHost) => {
 	return shadowHost.attachShadow({ mode: 'open' });
 };
 
-const { setAttribute, setProperty, setSaccadesStyle, getAttribute } = documentParser.makeHandlers(document);
+const { setAttribute, setProperty, setSaccadesStyle, getAttribute, amendClasses } = documentParser.makeHandlers(document);
 
 const contentLogStyle = 'background-color: pink';
 
@@ -150,6 +150,14 @@ const IndexContent = () => {
 		setAttribute('saccades-color', prefs.saccadesColor);
 		setAttribute('fixation-strength', prefs.fixationStrength);
 		setAttribute('saccades-interval', prefs.saccadesInterval);
+
+		const getPrefsClasses = (addedOrRemoved: boolean) =>
+			Object.entries(prefs.symanticTags)
+				.filter(([, value]) => value === addedOrRemoved)
+				.map(([element]) => `br-exclusions-${element}`);
+
+		amendClasses('add', getPrefsClasses(false));
+		amendClasses('remove', getPrefsClasses(true));
 	}, [prefs, tabSession]);
 
 	useEffect(() => {
@@ -179,7 +187,7 @@ const IndexContent = () => {
 		);
 	};
 
-	return showDebugOverLay();
+	return !!prefs?.showContentDebugOverlay && showDebugOverLay();
 };
 
 export default IndexContent;

src/popup/HtmlNodeToggles.tsx

@@ -0,0 +1,32 @@
+import defaultPrefs from '~services/preferences';
+import usePrefs from '~services/usePrefs';
+import { useGetTabOriginCb } from './useGetTabOriginCb';
+
+export function HtmlNodeToggles() {
+	const [prefs, , updateConfig] = usePrefs(useGetTabOriginCb(), false);
+	const _label = chrome.i18n.getMessage('symanticElementsLabel');
+
+	if (!prefs) return <></>;
+
+	return (
+		<div className=" flex flex-column || gap-2  || w-100 p-2">
+			<label className="block text-capitalize mb-sm" id="symanticElementsLabel">
+				{_label?.length ? _label : 'Enabled Items'}
+			</label>
+
+			<div className="|| || w-100 gap-1" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)' }}>
+				{Object.entries({ ...defaultPrefs.symanticTags, ...prefs.symanticTags }).map(([key, value]) => (
+					<div key={key} className="input-container flex">
+						<input
+							type="checkbox"
+							id={`symanticTags-${key}`}
+							checked={value}
+							onChange={(event) => updateConfig(`symanticTags`, { ...prefs.symanticTags, [key]: event.target.checked })}
+						/>
+						<label htmlFor={`symanticTags-${key}`}>{key ?? chrome.i18n.getMessage(`symanticTags_${key}`)}</label>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}

src/popup/ShowInlineDebug.tsx

@@ -1,8 +1,8 @@
 import type { TabSession } from 'index';
 import { envService } from '~services/envService';
-import TabHelper from '~services/TabHelper';
 import usePrefs, { usePrefStorage } from '~services/usePrefs';
 import { useShowDebugSwitch } from './shorcut';
+import { useGetTabOriginCb } from './useGetTabOriginCb';
 
 export function ShowDebugInline({ tabSession }: { tabSession: TabSession }) {
 	const [isDebugDataVisible, setIsDebugDataVisible] = useShowDebugSwitch();
@@ -24,16 +24,25 @@ export function ShowDebugInline({ tabSession }: { tabSession: TabSession }) {
 
 	return (
 		<div className=" || flex flex-column || w-full text-wrap p-1">
-			<label htmlFor="isDebugDataVisibleInput">
-				show
-				<input
-					type="checkbox"
-					name="isDebugDataVisibleInput"
-					id="isDebugDataVisibleInput"
-					onChange={(event) => setIsDebugDataVisible(event.currentTarget.checked)}
-					checked={isDebugDataVisible}
-				/>
-			</label>
+			<div className="flex flex-row || justify-between">
+				<label htmlFor="isDebugDataVisibleInput">
+					Show
+					<input
+						type="checkbox"
+						name="isDebugDataVisibleInput"
+						id="isDebugDataVisibleInput"
+						onChange={(event) => setIsDebugDataVisible(event.currentTarget.checked)}
+						checked={isDebugDataVisible}
+					/>
+				</label>
+
+				{!envService.isProduction && (
+					<label>
+						ContentOverlay
+						<input type="checkbox" onChange={(event) => setPrefs('showContentDebugOverlay', event.target.checked)} />
+					</label>
+				)}
+			</div>
 			{isDebugDataVisible && debugData}
 		</div>
 	);

src/popup/indexNew.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import Logger from '~services/Logger';
 import TabHelper from '~services/TabHelper';
@@ -17,8 +17,10 @@ import defaultPrefs from '~services/preferences';
 import runTimeHandler from '~services/runTimeHandler';
 
 import { envService } from '~services/envService';
+import { HtmlNodeToggles } from './HtmlNodeToggles';
 import Shortcut, { ShortcutGuide } from './shorcut';
 import { ShowDebugInline } from './ShowInlineDebug';
+import { useGetTabOriginCb } from './useGetTabOriginCb';
 
 const popupLogStyle = 'background:cyan;color:brown';
 
@@ -123,11 +125,11 @@ function IndexPopupNew() {
 		(event, customValue = null) =>
 			updateConfig(field as keyof Prefs, customValue ?? event.target.value);
 
-	const updateConfig = (key: keyof Prefs, value: any, configLocal = prefs) => {
-		const newConfig = { ...configLocal, [key]: value };
+	// const updateConfig = <T extends keyof Prefs>(key: T, value: Prefs[T], configLocal = prefs, _getTabOriginfn = getTabOriginfn) => {
+	// 	const newConfig = { ...configLocal, [key]: value };
 
-		setPrefs(getTabOriginfn, newConfig.scope, newConfig);
-	};
+	// 	setPrefs(_getTabOriginfn, newConfig.scope, newConfig);
+	// };
 
 	const handleToggle = (newBrMode: boolean) => {
 		const payload = {
@@ -495,6 +497,8 @@ function IndexPopupNew() {
 							</button>
 						</div>
 					</div>
+
+					<HtmlNodeToggles />
 				</div>
 			)}
 

src/popup/indexOld.tsx

@@ -14,6 +14,7 @@ import defaultPrefs from '~services/preferences';
 import runTimeHandler from '~services/runTimeHandler';
 
 import { envService } from '~services/envService';
+import { HtmlNodeToggles } from './HtmlNodeToggles';
 import Shortcut, { ShortcutGuide } from './shorcut';
 import { ShowDebugInline } from './ShowInlineDebug';
 
@@ -485,6 +486,8 @@ function IndexPopupOld() {
 						onClick={() => updateConfig('scope', 'reset')}>
 						{chrome.i18n.getMessage('resetBtnText')}
 					</button>
+
+					<HtmlNodeToggles />
 				</div>
 			)}
 			{!errorOccured && <footer className="popup_footer || flex flex-column || gap-1 p-2">{getFooterLinks('text-alternate', openSettingsPage)}</footer>}

src/popup/shorcut.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import Logger from '~services/Logger';
 import runTimeHandler from '~services/runTimeHandler';
 
+import { envService } from '~services/envService';
 import { usePopupContext } from './context';
 
 export function useShortcut() {

src/popup/useGetTabOriginCb.tsx

@@ -0,0 +1,4 @@
+import { useCallback } from 'react';
+import TabHelper from '~services/TabHelper';
+
+export const useGetTabOriginCb = () => useCallback(async () => await TabHelper.getTabOrigin(await TabHelper.getActiveTab(true)), [TabHelper]);

src/services/documentParser.ts

@@ -194,18 +194,21 @@ function addStyles(styleText, document) {
 	document.head.appendChild(style);
 }
 
-const setAttribute = (documentRef) => (attribute, value) => {
+const amendClasses = (documentRef: typeof document) => (action: 'add' | 'remove', classList: string[]) =>
+	action === 'add' ? documentRef.body.classList.add(...classList) : document.body.classList.remove(...classList);
+
+const setAttribute = (documentRef: typeof document) => (attribute, value) => {
 	documentRef.body.setAttribute(attribute, value);
 };
-const getAttribute = (documentRef) => (attribute) => documentRef.body.getAttribute(attribute);
+const getAttribute = (documentRef: typeof document) => (attribute) => documentRef.body.getAttribute(attribute);
 
-const setProperty = (documentRef) => (property, value) => {
+const setProperty = (documentRef: typeof document) => (property, value) => {
 	documentRef.body.style.setProperty(property, value);
 };
 
-const getProperty = (documentRef) => (property) => documentRef.body.style.getPropertyValue(property);
+const getProperty = (documentRef: typeof document) => (property) => documentRef.body.style.getPropertyValue(property);
 
-const setSaccadesStyle = (documentRef) => (style) => {
+const setSaccadesStyle = (documentRef: typeof document) => (style) => {
 	Logger.logInfo('saccades-style', style);
 
 	if (/bold/i.test(style)) {
@@ -223,12 +226,13 @@ const setSaccadesStyle = (documentRef) => (style) => {
 
 export default {
 	setReadingMode,
-	makeHandlers: (documentRef) => ({
+	makeHandlers: (documentRef: typeof document) => ({
 		setAttribute: setAttribute(documentRef),
 		getAttribute: getAttribute(documentRef),
 		setProperty: setProperty(documentRef),
 		getProperty: getProperty(documentRef),
 		setSaccadesStyle: setSaccadesStyle(documentRef),
+		amendClasses: amendClasses(documentRef),
 	}),
 	hasLatex,
 };

src/services/preferences.ts

@@ -21,6 +21,23 @@ const defaultPrefs = {
 	showBeta: true,
 	transformControlPanelText: false,
 	autoOnDelay: 5_000,
+	showContentDebugOverlay: false,
+	symanticTags: {
+		nav: true,
+		footer: true,
+		aside: true,
+		a: true,
+		button: true,
+		p: true,
+		pre: true,
+		span: true,
+		code: true,
+		caption: true,
+		li: true,
+		ul: true,
+		ol: true,
+		dialog: true,
+	},
 };
 
 export default defaultPrefs;

src/services/usePrefs.tsx

@@ -84,10 +84,17 @@ const usePrefs = (getOrigin: () => Promise<string>, initialize = false, target =
 		})();
 	}, [getOrigin]);
 
+	const updateConfig = <T extends keyof Prefs>(key: T, value: Prefs[T], configLocal = outPrefs, _getTabOriginfn = getOrigin) => {
+		const newConfig = { ...configLocal, [key]: value };
+
+		setPrefsExternal(_getTabOriginfn, newConfig.scope, newConfig);
+	};
+
 	const outPrefs = getActivePrefs();
 	Logger.logInfo('%cusePrefs.return', 'background-color:lime');
 	Logger.LogTable({ privateOrigin, outPrefs, prefStore, area });
-	return [outPrefs, setPrefsExternal];
+
+	return [outPrefs, setPrefsExternal, updateConfig];
 };
 
 export default usePrefs;

src/styles/contentStyle.scss

@@ -10,7 +10,13 @@ $hue3: #561f37ff;
 $hue4: rgb(68, 155, 255);
 $delta: 8%;
 
-$saccadesColorsBase: (0, $hue1), (1, $hue2), (2, $hue3), (3, $hue4);
+$saccadesColorsBase: (
+	0,
+	$hue1),
+	(1, $hue2),
+	(2, $hue3),
+	(3, $hue4
+);
 
 /**
 	generate (3) fixation-strength variants
@@ -57,6 +63,7 @@ $saccadesColorsBase: (0, $hue1), (1, $hue2), (2, $hue3), (3, $hue4);
 }
 
 [br-mode='on'] {
+
 	br-bold *,
 	br-edge {
 		opacity: (var(--fixation-edge-opacity, $activeFixationOpacity));
@@ -71,4 +78,28 @@ $saccadesColorsBase: (0, $hue1), (1, $hue2), (2, $hue3), (3, $hue4);
 
 		@include makeColorVariants($color, $id, -$delta, 'dark');
 	}
+
+	$excludedElements: (
+		nav,
+		footer,
+		p,
+		a,
+		button,
+		aside
+	);
+
+@each $excludedElement in $excludedElements {
+
+	&.br-exclusions-#{$excludedElement} #{$excludedElement} {
+
+		& br-bold :is(*, [fixation-strength]),
+		& br-edge {
+			--fixation-edge-opacity: initial !important;
+			--br-line-height: initial !important;
+			--br-boldness: initial !important;
+			opacity: initial;
+		}
+	}
+
 }
+}