Skip to content
This repository was archived by the owner on Jul 16, 2025. It is now read-only.

Commit 488c16d

Browse files
asieduernest12asieduernest12
authored
Merge pull request #136 from asieduernest12/master
updated popup ui, fixation split enhancements and bookmarklet update
2 parents c50eede + ebbe257 commit 488c16d

File tree

10 files changed

+169
-129
lines changed

10 files changed

+169
-129
lines changed

‎src/Background/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ const commandListener = async (command) => {
7676
chrome.tabs.sendMessage(
7777
activeTab.id,
7878
{
79-
type: 'setFixationStemOpacity',
80-
data: prefs.fixationStemOpacity,
79+
type: 'setFixationEdgeOpacity',
80+
data: prefs.fixationEdgeOpacity,
8181
},
8282
() => Logger.LogLastError(),
8383
);

‎src/Bookmarklet/esbuild.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ build({
2424
<a href='javascript:${outputScript.replace('ACTION_TO_FIRE', 'fireFixationStrengthTransition')};' aria-role="button" aria-description="toggle fixation strength">Toggle FixationStrength</a>
2525
<a href='javascript:${outputScript.replace('ACTION_TO_FIRE', 'fireSaccadesIntervalTransition')};' aria-role="button" aria-description="toggle saccades interval">Toggle SaccadesInterval</a>
2626
<a href='javascript:${outputScript.replace('ACTION_TO_FIRE', 'fireSaccadesColorTransition')};' aria-role="button" aria-description="toggle saccades color">Toggle SaccadesColor</a>
27-
<a href='javascript:${outputScript.replace('ACTION_TO_FIRE', 'fireFixationStemOpacityTransition')};' aria-role="button" aria-description="toggle fixation stem opacity">Toggle FixationStemOpacity</a>
27+
<a href='javascript:${outputScript.replace('ACTION_TO_FIRE', 'firefixationEdgeOpacityTransition')};' aria-role="button" aria-description="toggle fixation edge opacity">Toggle fixationEdgeOpacity</a>
2828
<p>Drag any of the links above onto your bookmark bar to save it as a bookmarklet which works on any site just like the full extension</p>
2929
3030
`,

‎src/Bookmarklet/index.js‎

Lines changed: 49 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,33 @@ import Logger from '../Logger';
33
import { defaultPrefs } from '../Preferences';
44

55
const {
6-
saccadesInterval, fixationStrength, saccadesColor, saccadesStyle, fixationStemOpacity,
6+
saccadesInterval, fixationStrength, saccadesColor, saccadesStyle, fixationEdgeOpacity,
77
} = {
88
...defaultPrefs,
99
};
1010
function writeInitialConfigsToDom() {
11-
document.body.setAttribute(
12-
'saccades-interval',
13-
document.body.getAttribute('saccades-interval') ?? saccadesInterval,
14-
);
15-
document.body.setAttribute(
16-
'fixation-strength',
17-
document.body.getAttribute('fixation-strength') ?? fixationStrength,
18-
);
19-
document.body.setAttribute(
20-
'saccades-color',
21-
document.body.getAttribute('saccades-color') ?? saccadesColor,
22-
);
11+
setAttribute('saccades-interval', getAttribute('saccades-interval') ?? saccadesInterval);
12+
setAttribute('fixation-strength', getAttribute('fixation-strength') ?? fixationStrength);
13+
setAttribute('saccades-color', getAttribute('saccades-color') ?? saccadesColor);
2314

2415
// console.log(saccadesStyle);
2516
if (/bold/i.test(saccadesStyle)) {
2617
const [, value] = saccadesStyle.split('-');
27-
const oldValue = document.body.style.getPropertyValue('--br-boldness');
18+
const oldValue = getProperty('--br-boldness');
2819
const nextValue = !Number.isNaN(oldValue) && oldValue !== '' ? oldValue : value;
29-
document.body.style.setProperty('--br-boldness', nextValue);
20+
setProperty('--br-boldness', nextValue);
3021
}
3122

3223
if (/line/i.test(saccadesStyle)) {
3324
const [value] = saccadesStyle.split('-');
34-
const oldValue = document.body.style.getPropertyValue('--br-line-style');
25+
const oldValue = getProperty('--br-line-style');
3526
const nextValue = !Number.isNaN(oldValue) && oldValue !== '' ? oldValue : value;
36-
document.body.style.setProperty('--br-line-style', nextValue);
27+
setProperty('--br-line-style', nextValue);
3728
}
3829

39-
document.body.setAttribute(
40-
'fixation-stem-opacity',
41-
document.body.getAttribute('fixation-stem-opacity') ?? fixationStemOpacity,
30+
setProperty(
31+
'--fixation-edge-opacity',
32+
getProperty('--fixation-edge-opacity') ?? `${fixationEdgeOpacity}%`,
4233
);
4334
}
4435

@@ -53,7 +44,8 @@ const stateTransitions = {
5344
['', 1],
5445
[1, 2],
5546
[2, 3],
56-
[3, 1],
47+
[3, 4],
48+
[4, 1],
5749
],
5850
'saccades-interval': [
5951
[null, 1],
@@ -72,12 +64,14 @@ const stateTransitions = {
7264
['dark', 'dark-100'],
7365
['dark-100', ''],
7466
],
75-
'fixation-stem-opacity': [
76-
[null, '100'],
77-
[0, 100],
78-
[100, 80],
79-
[80, 40],
80-
[40, 0],
67+
'--fixation-edge-opacity': [
68+
[null, '25%'],
69+
['', '25%'],
70+
['25%', '50%'],
71+
['50%', '75%'],
72+
['75%', '100%'],
73+
['80%', '25%'],
74+
['100%', '25%'],
8175
],
8276
};
8377

@@ -87,36 +81,50 @@ const stateTransitions = {
8781
* @returns {[targetState,nextState]}
8882
*/
8983
function getStateTransitionEntry(stateTransitionKey, currentActiveState) {
90-
return stateTransitions[stateTransitionKey].find(([state]) => `${state}` === `${currentActiveState}`);
84+
return stateTransitions[stateTransitionKey].find(
85+
([state]) => `${state}` === `${currentActiveState}`,
86+
);
9187
}
9288

93-
function toggleStateEngine(stateTransitionKey, /** @type {(property, value)} */ callback) {
94-
const currentActiveState = document.body.getAttribute(stateTransitionKey);
95-
Logger.logInfo('stateTransitionKey', stateTransitionKey, 'currentActiveState', currentActiveState, 'nextState', stateTransitions[stateTransitionKey]);
96-
97-
let updateCallback;
98-
99-
if (!updateCallback) {
100-
updateCallback = (attribute, value) => document.body.setAttribute(attribute, value);
101-
} else {
102-
updateCallback = callback;
103-
}
89+
function toggleStateEngine(
90+
stateTransitionKey,
91+
/** @type {(property, value)} */ callbackSetter = setAttribute,
92+
/** @type {(identified) => string} */ callbackGetter = getAttribute,
93+
) {
94+
const currentActiveState = callbackGetter(stateTransitionKey);
10495

10596
const [, nextState] = getStateTransitionEntry(stateTransitionKey, currentActiveState);
10697

107-
updateCallback(stateTransitionKey, nextState);
98+
Logger.logInfo(
99+
'stateTransitionKey',
100+
stateTransitionKey,
101+
'currentActiveState',
102+
currentActiveState,
103+
'nextState',
104+
nextState,
105+
stateTransitions[stateTransitionKey],
106+
);
107+
callbackSetter(stateTransitionKey, nextState);
108108

109109
if (document.body.getAttribute('br-mode') !== 'on') {
110110
toggleReadingMode();
111111
}
112112
}
113113

114+
const setProperty = (property, value) => {
115+
Logger.logInfo({ setProperty, property, value });
116+
document.body.style.setProperty(property, value);
117+
};
118+
const setAttribute = (attribute, value) => document.body.setAttribute(attribute, value);
119+
const getProperty = (property) => document.body.style.getPropertyValue(property);
120+
const getAttribute = (attribute) => document.body.getAttribute(attribute);
121+
114122
const callableActions = {
115123
fireReadingToggle: toggleReadingMode,
116124
fireFixationStrengthTransition: () => toggleStateEngine('fixation-strength'),
117125
fireSaccadesIntervalTransition: () => toggleStateEngine('saccades-interval'),
118126
fireSaccadesColorTransition: () => toggleStateEngine('saccades-color'),
119-
fireFixationStemOpacityTransition: () => toggleStateEngine('fixation-stem-opacity'),
127+
firefixationEdgeOpacityTransition: () => toggleStateEngine('--fixation-edge-opacity', setProperty, getProperty),
120128
};
121129

122130
const actionToFire = 'ACTION_TO_FIRE';

‎src/ContentScript/contentStyle.scss‎

Lines changed: 14 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
$maxFixations: 3;
1+
$maxFixations: 4;
22
$maxSaccadesInterval: 4;
3+
$activeFixationOpacity: 100%;
34

45
//define colors for fixations
56
$hue1: #3aa757ff;
@@ -8,49 +9,42 @@ $hue3: #561f37ff;
89
$hue4: rgb(68, 155, 255);
910
$delta: 8%;
1011

11-
$saccadesColorsBase: (
12-
0,
13-
$hue1),
14-
(1, $hue2),
15-
(2, $hue3),
16-
(3, $hue4
17-
);
12+
$saccadesColorsBase: (0,$hue1),(1, $hue2),(2, $hue3),(3, $hue4);
1813

1914
/**
2015
generate (3) fixation-strength variants
2116
*/
22-
@mixin makeFixation($fixationStrength, $saccadesColor, $stemOpacity) {
17+
@mixin makeFixation($fixationStrength, $saccadesColor) {
2318
$fixationsAllowed: $fixationStrength;
2419

2520
@for $fixationsAllowed from 1 through $fixationStrength {
2621
[fixation-strength="#{$fixationsAllowed}"] {
2722
display: inline;
28-
--fixation-stem-opacity: #{$stemOpacity+"%"};
29-
font-weight: var(--br-boldness) ;
23+
--fixation-edge-opacity: $activeFixationOpacity;
24+
font-weight: var(--br-boldness);
3025
line-height: var(--br-line-height, initial);
3126
color: #{$saccadesColor};
3227
text-decoration: var(--br-line-style) underline 2px;
28+
text-underline-offset: 3px;
3329
}
3430
}
3531
}
3632

3733
// generate all saccades-interval variants
38-
@mixin makeSaccades($fixationStrength, $stemOpacity, $edgeOpacity) {
34+
@mixin makeSaccades($fixationStrength) {
3935
@for $saccadesIndex from 0 through $maxSaccadesInterval {
4036
&[saccades-interval="#{$saccadesIndex}"][fixation-strength="#{$fixationStrength}"] br-bold:nth-of-type(#{$saccadesIndex + 1}n + 1) {
4137

4238
//for each saccade variant, make 3 fixation-strength variants
43-
// fixation-strength variants are applied inclusively from 1 through 3
44-
@include makeFixation($fixationStrength, var(--saccadesColor), $stemOpacity);
39+
// fixation-strength variants are applied inclusively from 1 through 4
40+
@include makeFixation($fixationStrength, var(--saccadesColor));
4541
}
4642

47-
br-bold *, br-edge {
48-
opacity: var(--fixation-stem-opacity);
43+
br-bold *,
44+
br-edge {
45+
opacity: var(--fixation-edge-opacity, $activeFixationOpacity);
4946
}
5047

51-
br-span {
52-
--fixation-stem-opacity: #{$edgeOpacity+"%"};
53-
}
5448
}
5549
}
5650

@@ -70,28 +64,8 @@ $saccadesColorsBase: (
7064

7165
[br-mode=on] {
7266
@for $fixationStrength from 1 through $maxFixations {
73-
// make fixation-stem-opacity
74-
$opacity: 0;
75-
$stemOpacity:none;
76-
$edgeOpacity: none;
77-
78-
@while $opacity <=100 {
79-
80-
@if $opacity < 20 {
81-
$stemOpacity:100;
82-
$edgeOpacity: 100;
83-
}@else{
84-
$stemOpacity:$opacity;
85-
$edgeOpacity: 130 - $stemOpacity
86-
}
87-
88-
&[fixation-stem-opacity="#{$opacity}"] {
89-
@include makeSaccades($fixationStrength, $stemOpacity, $edgeOpacity);
90-
}
91-
92-
$opacity: $opacity + 20;
93-
}
9467

68+
@include makeSaccades($fixationStrength);
9569
}
9670

9771
@each $id,

‎src/ContentScript/documentParser.js‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import Logger from '../Logger';
22
import contentStyle from './contentStyle.scss';
33
import NodeObserver from './observer';
4+
import { defaultPrefs } from '../Preferences';
45

5-
const FIXATION_BREAK_RATIO = 0.33;
6-
const FIXATION_LOWER_BOUND = 0;
7-
const DEFAULT_SACCADES_INTERVAL = 0;
8-
const DEFAULT_FIXATION_STRENGTH = 3;
9-
const BR_WORD_STEM_PERCENTAGE = 0.65;
6+
const {
7+
MAX_FIXATION_PARTS, FIXATION_LOWER_BOUND, BR_WORD_STEM_PERCENTAGE,
8+
} = defaultPrefs;
109

1110
// which tag's content should be ignored from bolded
1211
const IGNORE_NODE_TAGS = ['STYLE', 'SCRIPT', 'BR-SPAN', 'BR-FIXATION', 'BR-BOLD', 'BR-EDGE', 'SVG'];
@@ -32,23 +31,27 @@ function highlightText(sentenceText) {
3231
}
3332

3433
function makeFixations(/** @type string */ textContent) {
35-
const fixationWidth = Math.round(textContent.length * FIXATION_BREAK_RATIO);
34+
const COMPUTED_MAX_FIXATION_PARTS = textContent.length >= MAX_FIXATION_PARTS
35+
? MAX_FIXATION_PARTS : textContent.length;
3636

37-
if (fixationWidth === FIXATION_LOWER_BOUND) { return `<br-fixation fixation-strength="1">${textContent}</br-fixation>`; }
37+
const fixationWidth = Math.ceil(textContent.length * (1 / COMPUTED_MAX_FIXATION_PARTS));
3838

39-
const start = textContent.substring(0, fixationWidth);
40-
const end = textContent.substring(textContent.length - fixationWidth, textContent.length);
39+
if (fixationWidth === FIXATION_LOWER_BOUND) {
40+
return `<br-fixation fixation-strength="1">${textContent}</br-fixation>`;
41+
}
42+
43+
const fixationsSplits = new Array(COMPUTED_MAX_FIXATION_PARTS).fill(null).map((item, index) => {
44+
const wordStartBoundary = index * fixationWidth;
45+
const wordEndBoundary = wordStartBoundary + fixationWidth > textContent.length
46+
? textContent.length : wordStartBoundary + fixationWidth;
4147

42-
const weakFixation = `<br-fixation fixation-strength="1">${start}</br-fixation>`;
43-
const strongFixation = `<br-fixation fixation-strength="3">${end}</br-fixation>`;
44-
const mildFixation = textContent.length - fixationWidth * 2 > 0
45-
? `<br-fixation fixation-strength="2">${textContent.substring(
46-
fixationWidth,
47-
textContent.length - fixationWidth,
48-
)}</br-fixation>`
49-
: '';
48+
return `<br-fixation fixation-strength="${index + 1}">${textContent.slice(
49+
wordStartBoundary,
50+
wordEndBoundary,
51+
)}</br-fixation>`;
52+
});
5053

51-
return weakFixation + mildFixation + strongFixation;
54+
return fixationsSplits.join('');
5255
}
5356

5457
function parseNode(/** @type Element */ node) {

‎src/ContentScript/index.js‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ const setSaccadesColor = (color = '') => {
2525
document.body.setAttribute('saccades-color', color);
2626
};
2727

28-
const setFixationStemOpacity = (opacity) => {
29-
Logger.logInfo('fixation-stem-opacity', opacity);
30-
document.body.setAttribute('fixation-stem-opacity', opacity);
28+
const setFixationEdgeOpacity = (opacity) => {
29+
Logger.logInfo('fixation-edge-opacity', `${opacity}%`);
30+
document.body.style.setProperty('--fixation-edge-opacity', `${opacity}%`);
3131
};
3232

3333
const setSaccadesStyle = (style) => {
@@ -52,10 +52,7 @@ const setReadingMode = (
5252
) => {
5353
Logger.logInfo('reading-mode', readingMode);
5454
documentParser.setReadingMode(readingMode, document);
55-
chrome.runtime.sendMessage(
56-
{ message: 'setIconBadgeText', data: readingMode },
57-
(response) => Logger.LogLastError(),
58-
);
55+
chrome.runtime.sendMessage({ message: 'setIconBadgeText', data: readingMode }, (response) => Logger.LogLastError());
5956
};
6057

6158
const onChromeRuntimeMessage = (message, sender, sendResponse) => {
@@ -99,8 +96,8 @@ const onChromeRuntimeMessage = (message, sender, sendResponse) => {
9996
sendResponse({ success: true });
10097
break;
10198
}
102-
case 'setFixationStemOpacity': {
103-
setFixationStemOpacity(message.data);
99+
case 'setFixationEdgeOpacity': {
100+
setFixationEdgeOpacity(message.data);
104101
break;
105102
}
106103

@@ -136,7 +133,7 @@ docReady(async () => {
136133
setLineHeight(prefs.lineHeight);
137134
setSaccadesColor(prefs.saccadesColor);
138135
setSaccadesStyle(prefs.saccadesStyle);
139-
setFixationStemOpacity(prefs.fixationStemOpacity ?? defaultPrefs().fixationStemOpacity);
136+
setFixationEdgeOpacity(prefs.fixationEdgeOpacity ?? defaultPrefs().fixationEdgeOpacity);
140137
},
141138
onStartup: (prefs) => {
142139
chrome.runtime.sendMessage({ message: 'setIconBadgeText', data: prefs.onPageLoad }, () => Logger.LogLastError());

0 commit comments

Comments
 (0)