diff --git a/README.md b/README.md index b78d67c..e127bb3 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,28 @@ # Focused Browsing -A browser extension that hides distracting content on LinkedIn and YouTube, letting you use these sites productively without getting pulled into endless scrolling. +A browser extension that hides distracting content on LinkedIn, YouTube, and X, letting you use these sites productively without getting pulled into endless scrolling. ## What it does Instead of blocking entire websites, Focused Browsing selectively hides the parts that waste your time while keeping the parts you actually need. -### LinkedIn -- **Full focus mode**: Hides the feed and side panels (news, trending, "Add to your feed"). Replaces the feed with an inspirational quote. -- **Custom focus mode**: Hides only the side panels while keeping the main feed visible. Useful when you want to browse your feed without sidebar distractions. - -### YouTube -- **Focus mode**: Hides recommended videos, comments, and suggestions while preserving video playback. +### Supported sites +- **LinkedIn**: Focused mode hides the feed and side panels. Unfocused mode restores the feed but still hides the side panels. +- **YouTube**: Focused mode hides recommendations, comments, and suggestion rails while preserving video playback. Unfocused mode restores the standard page around the video player. +- **X**: Focused mode hides the home feed and sidebar. Unfocused mode restores the feed but still hides the sidebar. ## How to use it ### Toggle focus mode -Press **Left Shift + Right Shift** on any supported site to cycle through focus modes. - -With custom focus enabled for LinkedIn, the cycle is: -**Full Focus** → **Custom Focus** → **Unfocused** → **Full Focus** - -Without custom focus, it toggles between **Full Focus** and **Unfocused**. +Press **Left Shift + Right Shift** on any supported site to switch between **Focused** and **Unfocused**. +On LinkedIn and X, **Unfocused** still keeps the side panels hidden. ### Extension popup -Click the extension icon to access settings: -- **LinkedIn** / **YouTube** toggles: Enable or disable the extension per site -- **Custom focus** (under LinkedIn): Enable the custom focus mode that hides only side panels -- **Show inspirational quotes**: Toggle motivational quotes that replace hidden feeds -- **Text size**: Adjust quote text size (S / M / L / XL) +Click the extension icon for a compact status view and shortcut reference. + +### Settings page +The popup's `Open Settings` action opens the separate extension settings page. +That page is scaffold-only today and does not expose user controls yet. ## Installation @@ -36,7 +30,7 @@ Click the extension icon to access settings: 2. Run `npm run build` 3. Open your browser's extension page (`chrome://extensions`, `edge://extensions`, or `brave://extensions`) 4. Enable "Developer mode" -5. Click "Load unpacked" and select the `dist` folder +5. Click "Load unpacked" and select the `extension-build` folder ## Browser support @@ -50,11 +44,10 @@ Click the extension icon to access settings: ## Troubleshooting **Extension not working?** -- Make sure the site is enabled in the popup -- Try refreshing the page after enabling a site +- Refresh the current page on a supported site **Keyboard shortcut not working?** -- Confirm you're on a supported site with the extension enabled for it +- Confirm you're on a supported site **Content not hiding?** - Try toggling the extension off and on for that site diff --git a/build.js b/build.js index 98ceb85..dcc575a 100644 --- a/build.js +++ b/build.js @@ -29,6 +29,7 @@ async function build() { 'background': 'src/ts/background.ts', 'focus': 'src/ts/focus/focus.ts', 'popup': 'src/popup/popup.ts', + 'options': 'src/options/options.ts', }, bundle: true, outdir: 'extension-build', @@ -56,6 +57,12 @@ async function build() { } fs.copyFileSync('src/popup/popup.html', 'extension-build/popup/popup.html'); fs.copyFileSync('src/popup/popup.css', 'extension-build/popup/popup.css'); + + if (!fs.existsSync('extension-build/options')) { + fs.mkdirSync('extension-build/options'); + } + fs.copyFileSync('src/options/options.html', 'extension-build/options/options.html'); + fs.copyFileSync('src/options/options.css', 'extension-build/options/options.css'); fs.copyFileSync('src/manifest.json', 'extension-build/manifest.json'); diff --git a/reports/selector-health/selector-health-report.json b/reports/selector-health/selector-health-report.json index 7f31497..5480619 100644 --- a/reports/selector-health/selector-health-report.json +++ b/reports/selector-health/selector-health-report.json @@ -1,5 +1,5 @@ { - "generatedAt": "2026-03-09T15:43:48.835Z", + "generatedAt": "2026-03-10T19:05:41.743Z", "thresholds": { "warn": { "maxWarningRatio": 0.2, diff --git a/src/manifest.json b/src/manifest.json index ed33aee..f7ed2d2 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -8,6 +8,10 @@ "default_title": "Focused Browsing", "default_popup": "popup/popup.html" }, + "options_ui": { + "page": "options/options.html", + "open_in_tab": true + }, "icons": { "16": "icons/logox16.png", "48": "icons/logox48.png", diff --git a/src/options/options.css b/src/options/options.css new file mode 100644 index 0000000..0f34f10 --- /dev/null +++ b/src/options/options.css @@ -0,0 +1,54 @@ +:root { + --paper: #f5f7fa; + --ink: #0f172a; + --muted: #5b6474; + --rule: #dbe4f0; + --accent: #3b82f6; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + min-height: 100vh; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + background: var(--paper); + color: var(--ink); +} + +.page { + width: min(960px, calc(100vw - 48px)); + margin: 0 auto; + padding: 48px 0 72px; +} + +.hero { + display: grid; + gap: 14px; + padding: 0 0 32px; +} + +.hero-index { + font-size: 12px; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--accent); +} + +.hero-title { + max-width: 720px; + font-size: clamp(40px, 7vw, 72px); + line-height: 0.96; + letter-spacing: -0.05em; +} + +@media (max-width: 800px) { + .page { + width: min(100vw - 32px, 960px); + padding-top: 32px; + } +} diff --git a/src/options/options.html b/src/options/options.html new file mode 100644 index 0000000..9f1e17c --- /dev/null +++ b/src/options/options.html @@ -0,0 +1,17 @@ + + + + + Focused Browsing Settings + + + +
+
+
Focused Browsing / Settings
+

Settings

+
+
+ + + diff --git a/src/options/options.html.d.ts b/src/options/options.html.d.ts new file mode 100644 index 0000000..7cac97f --- /dev/null +++ b/src/options/options.html.d.ts @@ -0,0 +1,2 @@ +declare const content: string; +export default content; diff --git a/src/options/options.test.ts b/src/options/options.test.ts new file mode 100644 index 0000000..3fbd704 --- /dev/null +++ b/src/options/options.test.ts @@ -0,0 +1,21 @@ +import optionsHtml from './options.html'; + +import './options'; + +describe('options.ts', () => { + beforeEach(() => { + document.body.innerHTML = ''; + const options = document.createElement('div'); + options.innerHTML = optionsHtml; + document.body.appendChild(options); + }); + + it('renders the separate settings scaffold', () => { + const title = document.querySelector('.hero-title') as HTMLElement; + expect(title.textContent).toBe('Settings'); + }); + + it('does not render a placeholder settings container', () => { + expect(document.querySelector('.surface')).toBeNull(); + }); +}); diff --git a/src/options/options.ts b/src/options/options.ts new file mode 100644 index 0000000..60c5350 --- /dev/null +++ b/src/options/options.ts @@ -0,0 +1,2 @@ +// Placeholder module for future options page logic. +export {}; diff --git a/src/popup/popup.css b/src/popup/popup.css index e9bd889..9ace550 100644 --- a/src/popup/popup.css +++ b/src/popup/popup.css @@ -1,4 +1,11 @@ -/* Reset and base styles */ +:root { + --paper: #f5f7fa; + --ink: #0f172a; + --muted: #5b6474; + --rule: #dbe4f0; + --accent: #2563eb; +} + * { margin: 0; padding: 0; @@ -6,328 +13,109 @@ } body { - width: 360px; - min-height: 460px; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; - background: #ffffff; - color: #1f2937; - line-height: 1.5; + width: 320px; + min-height: 270px; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + background: var(--paper); + color: var(--ink); + line-height: 1.35; } -.popup-container { - padding: 20px; +.popup-shell { + padding: 18px; display: flex; flex-direction: column; - gap: 18px; -} - -/* Header Section */ -.header { - text-align: center; - padding-bottom: 16px; - border-bottom: 1px solid #e5e7eb; + gap: 16px; } -.brand { +.index-row { display: flex; - align-items: center; - justify-content: center; - gap: 12px; - margin-bottom: 6px; + justify-content: flex-start; + padding: 0 2px; } -.logo-placeholder { - width: 32px; - height: 32px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 8px; - flex-shrink: 0; -} - -.title { - font-size: 24px; +.index-label, +.info-label { + font-size: 11px; font-weight: 700; - color: #111827; - letter-spacing: -0.025em; -} - -.tagline { - color: #6b7280; - font-size: 14px; - font-weight: 500; -} - -/* Shortcut Section */ -.shortcut-section { - background: #f9fafb; - border: 1px solid #e5e7eb; - border-radius: 12px; - padding: 16px; - text-align: center; -} - -.shortcut-label { - font-size: 14px; - font-weight: 600; - color: #374151; - margin-bottom: 10px; -} - -.shortcut-keys { - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - margin-bottom: 6px; -} - -.key { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 32px; - height: 32px; - padding: 0 8px; - background: #ffffff; - border: 2px solid #d1d5db; - border-radius: 6px; - font-family: inherit; - font-size: 14px; - font-weight: 600; - color: #374151; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--accent); } -.plus { - color: #9ca3af; - font-weight: 600; - font-size: 16px; +.top-rule { + width: 100%; + height: 4px; + border-radius: 999px; + background: var(--accent); } -.shortcut-hint { - color: #6b7280; - font-size: 12px; - font-weight: 500; +.title { + font-size: 38px; + line-height: 1.04; + letter-spacing: -0.06em; + max-width: 250px; + margin-top: 6px; } -/* Settings Section */ -.settings-section { +.info-grid { display: flex; flex-direction: column; - gap: 14px; -} - -.section-title { - font-size: 16px; - font-weight: 600; - color: #111827; - margin-bottom: 2px; + gap: 2px; + margin-top: 4px; } -.setting-row { - position: relative; +.info-row { display: flex; - align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; - border-bottom: 1px solid #f3f4f6; + border-bottom: 1px solid var(--rule); } -.setting-row:last-child { +.info-row:last-child { border-bottom: none; } -.setting-info { - flex: 1; - display: flex; - flex-direction: column; - gap: 4px; -} - -.setting-label { +.info-value { + text-align: right; font-size: 14px; font-weight: 500; - color: #111827; - cursor: pointer; + color: var(--ink); } -.setting-description { - font-size: 13px; - color: #6b7280; +.summary { + max-width: 240px; + font-size: 15px; line-height: 1.4; + color: var(--muted); } -/* Toggle Switch */ -.toggle { - position: relative; - display: inline-block; - width: 48px; - height: 24px; - cursor: pointer; - flex-shrink: 0; -} - -.toggle input[type="checkbox"] { - opacity: 0; - width: 0; - height: 0; -} - -.toggle-slider { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: #d1d5db; - border-radius: 24px; - transition: all 0.2s ease-in-out; -} - -.toggle-slider:before { - position: absolute; - content: ''; - height: 20px; - width: 20px; - left: 2px; - bottom: 2px; - background: white; - border-radius: 50%; - transition: all 0.2s ease-in-out; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -} - -.toggle input:checked + .toggle-slider { - background: #3b82f6; -} - -.toggle input:checked + .toggle-slider:before { - transform: translateX(24px); -} - -.toggle:hover .toggle-slider { - background: #9ca3af; -} - -.toggle:hover input:checked + .toggle-slider { - background: #2563eb; -} - -/* Loading spinner that replaces the toggle */ -.toggle.loading { - cursor: not-allowed; -} - -.toggle.loading .toggle-slider, -.toggle.loading .toggle-slider:before { - opacity: 0; - pointer-events: none; -} - -.toggle.loading::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 20px; - height: 20px; - margin: -10px 0 0 -10px; - border: 2px solid #e5e7eb; - border-top: 2px solid #3b82f6; - border-radius: 50%; - animation: spin 1s linear infinite; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* Size Selector */ -.size-selector { - display: flex; - gap: 4px; - flex-shrink: 0; -} - -.size-option { - display: flex; - align-items: center; - justify-content: center; - width: 36px; - height: 32px; - background: #f9fafb; - border: 1px solid #e5e7eb; - border-radius: 6px; +.options-button { + padding: 0; + border: 0; + background: transparent; + color: var(--accent); + font: inherit; font-size: 13px; - font-weight: 600; - color: #6b7280; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + text-align: right; cursor: pointer; - transition: all 0.2s ease-in-out; -} - -.size-option:hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #374151; -} - -.size-option.active { - background: #3b82f6; - border-color: #3b82f6; - color: white; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); -} - -.size-option:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.size-option:disabled:hover { - background: #f9fafb; - border-color: #e5e7eb; - color: #6b7280; -} - -/* Conditional visibility for font size setting */ -#font-size-row { - opacity: 1; - transition: opacity 0.2s ease-in-out; -} - -#font-size-row.disabled { - opacity: 0.4; -} - -#font-size-row.disabled input, -#font-size-row.disabled label, -#font-size-row.disabled .size-option { - cursor: not-allowed; } -/* Focus states for accessibility */ -.toggle input:focus + .toggle-slider { - box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); -} - -.slider-container input[type="range"]:focus { - box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); -} - -/* Sub-setting rows (indented, e.g. custom focus under LinkedIn) */ -.setting-row.sub-setting { - padding-left: 20px; +.actions { + display: flex; + justify-content: flex-end; } -.setting-row.sub-setting.disabled { - opacity: 0.4; - pointer-events: none; +.options-button:hover, +.options-button:focus-visible { + color: var(--ink); } -.setting-label:focus { - outline: 2px solid #3b82f6; - outline-offset: 2px; - border-radius: 4px; +.options-button:focus-visible { + outline: 2px solid var(--ink); + outline-offset: 3px; } diff --git a/src/popup/popup.html b/src/popup/popup.html index f22cbfa..404fca2 100644 --- a/src/popup/popup.html +++ b/src/popup/popup.html @@ -6,101 +6,32 @@ -
-
-
-

Focused Browsing

-
+
+
+ Focused Browsing
-
-
Toggle focus mode
-
- ⇧ - + - ⇧ -
-
Left Shift + Right Shift
-
+
+

Reclaim Your Focus

+

LinkedIn, YouTube, and X start in Focused mode.

-
-
-
- -
- +
+
+ Sites + LinkedIn, YouTube, X
- -
-
- - Hide only side panels, keep the feed -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
-
- - Hide only the sidebar, keep the feed -
- +
+ Shortcut + Left Shift + Right Shift
-
-
-
- -
- -
- -
-
- -
-
- - - - -
-
+
+
-
+
- \ No newline at end of file + diff --git a/src/popup/popup.test.ts b/src/popup/popup.test.ts index e131b75..5533bbb 100644 --- a/src/popup/popup.test.ts +++ b/src/popup/popup.test.ts @@ -1,141 +1,33 @@ import { browser } from 'webextension-polyfill-ts'; import popupHtml from './popup.html'; -// Mock webextension-polyfill-ts import './popup'; // Import the popup script to be tested jest.mock('webextension-polyfill-ts'); describe('popup.ts', () => { beforeEach(() => { - // Reset the DOM and storage before each test document.body.innerHTML = ''; const popup = document.createElement('div'); popup.innerHTML = popupHtml; document.body.appendChild(popup); - (browser.storage.local.get as jest.Mock).mockResolvedValue({}); - (browser.storage.local.set as jest.Mock).mockClear(); + (browser.runtime.openOptionsPage as jest.Mock).mockClear(); }); - it('should load the settings from storage and initialize the UI', async () => { - const settings = { showQuote: false, textSize: 'large' }; - (browser.storage.local.get as jest.Mock).mockResolvedValue(settings); - - // Dispatch the DOMContentLoaded event to trigger the popup script - document.dispatchEvent(new Event('DOMContentLoaded')); - - await new Promise(resolve => setTimeout(resolve, 0)); // Wait for the async operations to complete - - const showQuoteCheckbox = document.getElementById('show-quote') as HTMLInputElement; - const largeSizeOption = document.querySelector('[data-size="large"]') as HTMLButtonElement; - - expect(showQuoteCheckbox.checked).toBe(false); - expect(largeSizeOption.classList.contains('active')).toBe(true); - }); - - it('should save the showQuote setting when the checkbox is changed', async () => { - document.dispatchEvent(new Event('DOMContentLoaded')); - await new Promise(resolve => setTimeout(resolve, 0)); - - const showQuoteCheckbox = document.getElementById('show-quote') as HTMLInputElement; - showQuoteCheckbox.checked = false; - showQuoteCheckbox.dispatchEvent(new Event('change')); - - expect(browser.storage.local.set).toHaveBeenCalledWith({ showQuote: false }); - }); - - it('should save the textSize setting when a size option is clicked', async () => { - document.dispatchEvent(new Event('DOMContentLoaded')); - await new Promise(resolve => setTimeout(resolve, 0)); - - const xlargeSizeOption = document.querySelector('[data-size="xlarge"]') as HTMLButtonElement; - xlargeSizeOption.click(); - - expect(browser.storage.local.set).toHaveBeenCalledWith({ textSize: 'xlarge' }); - }); - - it('should load website toggles from storage and initialize the UI', async () => { - const settings = { websiteToggles: { linkedin: false, youtube: true } }; - (browser.storage.local.get as jest.Mock).mockResolvedValue(settings); - - document.dispatchEvent(new Event('DOMContentLoaded')); - await new Promise(resolve => setTimeout(resolve, 0)); - - const linkedinToggle = document.getElementById('linkedin-toggle') as HTMLInputElement; - const youtubeToggle = document.getElementById('youtube-toggle') as HTMLInputElement; - - expect(linkedinToggle.checked).toBe(false); - expect(youtubeToggle.checked).toBe(true); + it('renders the swiss-style info rows', () => { + const labels = Array.from(document.querySelectorAll('.info-label')).map((el) => el.textContent?.trim()); + expect(labels).toEqual(['Sites', 'Shortcut']); }); - it('should default website toggles to enabled when not in storage', async () => { - (browser.storage.local.get as jest.Mock).mockResolvedValue({}); - - document.dispatchEvent(new Event('DOMContentLoaded')); - await new Promise(resolve => setTimeout(resolve, 0)); - - const linkedinToggle = document.getElementById('linkedin-toggle') as HTMLInputElement; - const youtubeToggle = document.getElementById('youtube-toggle') as HTMLInputElement; - - expect(linkedinToggle.checked).toBe(true); - expect(youtubeToggle.checked).toBe(true); - }); - - it('should save linkedin toggle setting when changed', async () => { - const currentSettings = { websiteToggles: { linkedin: true, youtube: true, x: true } }; - (browser.storage.local.get as jest.Mock).mockResolvedValue(currentSettings); - - document.dispatchEvent(new Event('DOMContentLoaded')); - await new Promise(resolve => setTimeout(resolve, 0)); - - const linkedinToggle = document.getElementById('linkedin-toggle') as HTMLInputElement; - linkedinToggle.checked = false; - linkedinToggle.dispatchEvent(new Event('change')); - - // Wait for debounce delay - await new Promise(resolve => setTimeout(resolve, 200)); - - expect(browser.storage.local.set).toHaveBeenCalledWith({ - websiteToggles: { linkedin: false, youtube: true, x: true } - }); - }); - - it('should save youtube toggle setting when changed', async () => { - const currentSettings = { websiteToggles: { linkedin: true, youtube: true, x: true } }; - (browser.storage.local.get as jest.Mock).mockResolvedValue(currentSettings); - - document.dispatchEvent(new Event('DOMContentLoaded')); - await new Promise(resolve => setTimeout(resolve, 0)); - - const youtubeToggle = document.getElementById('youtube-toggle') as HTMLInputElement; - youtubeToggle.checked = false; - youtubeToggle.dispatchEvent(new Event('change')); - - // Wait for debounce delay - await new Promise(resolve => setTimeout(resolve, 350)); - - expect(browser.storage.local.set).toHaveBeenCalledWith({ - websiteToggles: { linkedin: true, youtube: false, x: true } - }); - }); - - it('should save x toggle setting when changed', async () => { - const currentSettings = { websiteToggles: { linkedin: true, youtube: true, x: true } }; - (browser.storage.local.get as jest.Mock).mockResolvedValue(currentSettings); - + it('opens the options page from the popup button', async () => { document.dispatchEvent(new Event('DOMContentLoaded')); - await new Promise(resolve => setTimeout(resolve, 0)); - const xToggle = document.getElementById('x-toggle') as HTMLInputElement; - xToggle.checked = false; - xToggle.dispatchEvent(new Event('change')); + const button = document.getElementById('open-options') as HTMLButtonElement; + button.click(); - // Wait for debounce delay - await new Promise(resolve => setTimeout(resolve, 350)); + await Promise.resolve(); - expect(browser.storage.local.set).toHaveBeenCalledWith({ - websiteToggles: { linkedin: true, youtube: true, x: false } - }); + expect(browser.runtime.openOptionsPage).toHaveBeenCalledTimes(1); }); }); diff --git a/src/popup/popup.ts b/src/popup/popup.ts index ece4224..438c4f9 100644 --- a/src/popup/popup.ts +++ b/src/popup/popup.ts @@ -1,188 +1,12 @@ import { browser } from 'webextension-polyfill-ts'; -import { SIZE_MAP, SizeKey } from '../ts/quotes/text-size'; -import { DEFAULT_WEBSITE_TOGGLES } from '../ts/websites/website-config'; -document.addEventListener('DOMContentLoaded', async () => { - const showQuoteCheckbox = document.getElementById('show-quote') as HTMLInputElement; - const linkedinToggle = document.getElementById('linkedin-toggle') as HTMLInputElement; - const linkedinCustomFocusToggle = document.getElementById('linkedin-custom-focus') as HTMLInputElement; - const linkedinCustomFocusRow = document.getElementById('linkedin-custom-focus-row') as HTMLElement; - const youtubeToggle = document.getElementById('youtube-toggle') as HTMLInputElement; - const xToggle = document.getElementById('x-toggle') as HTMLInputElement; - const xCustomFocusToggle = document.getElementById('x-custom-focus') as HTMLInputElement; - const xCustomFocusRow = document.getElementById('x-custom-focus-row') as HTMLElement; - const sizeOptions = document.querySelectorAll('.size-option') as NodeListOf; - const fontSizeRow = document.getElementById('font-size-row') as HTMLElement; +document.addEventListener('DOMContentLoaded', () => { + const openOptionsButton = document.getElementById('open-options') as HTMLButtonElement | null; + if (!openOptionsButton) return; - const settings = await browser.storage.local.get(['showQuote', 'textSize', 'websiteToggles']); - const showQuote = settings.showQuote !== false; - const textSize = settings.textSize || 'medium'; - const websiteToggles = { ...DEFAULT_WEBSITE_TOGGLES, ...settings.websiteToggles }; - - showQuoteCheckbox.checked = showQuote; - linkedinToggle.checked = websiteToggles.linkedin; - linkedinCustomFocusToggle.checked = websiteToggles.linkedinCustomFocus || false; - updateCustomFocusRowState(websiteToggles.linkedin); - youtubeToggle.checked = websiteToggles.youtube; - xToggle.checked = websiteToggles.x !== false; - xCustomFocusToggle.checked = websiteToggles.xCustomFocus || false; - updateXCustomFocusRowState(websiteToggles.x !== false); - - updateActiveSizeOption(textSize); - updateSizeRowState(showQuote); - - showQuoteCheckbox.addEventListener('change', () => { - const checked = showQuoteCheckbox.checked; - browser.storage.local.set({ showQuote: checked }); - updateSizeRowState(checked); - }); - - // Save website toggle settings with immediate action but debounced UI - const toggleTimeouts = new Map(); - - /** Persists a website toggle change to storage with debounced loading UI. */ - const updateWebsiteToggle = async (website: 'linkedin' | 'youtube' | 'x', enabled: boolean, toggleElement: HTMLInputElement) => { - const toggleContainer = toggleElement.closest('.toggle') as HTMLElement; - - // Prevent multiple rapid clicks on the same toggle - if (toggleContainer.classList.contains('loading')) { - console.log(`${website} toggle already processing, ignoring click`); - return; - } - - // Clear any pending timeout for this specific toggle - const currentTimeout = toggleTimeouts.get(website); - if (currentTimeout) { - clearTimeout(currentTimeout); - toggleTimeouts.delete(website); - } - - console.log(`Updating ${website} toggle to: ${enabled}`); - - // Disabled → enabled requires a page reload because the content script was - // never injected for a disabled site. focus.ts reads the pendingReload flag - // on the next load and sets the initial mode to Focused. - const current = await browser.storage.local.get(['websiteToggles']); - const websiteToggles = { ...DEFAULT_WEBSITE_TOGGLES, ...current.websiteToggles }; - const wasDisabled = !websiteToggles[website]; - const isEnabling = enabled; - const isDisabledToEnabled = wasDisabled && isEnabling; - - const previousValue = websiteToggles[website]; - try { - websiteToggles[website] = enabled; - await browser.storage.local.set({ websiteToggles }); - console.log(`Storage updated for ${website}:`, websiteToggles); - } catch (error) { - console.error('Failed to update website toggle:', error); - websiteToggles[website] = previousValue; - toggleElement.checked = previousValue; - // Revert dependent row-level UI to match the reverted toggle state - if (website === 'linkedin') updateCustomFocusRowState(previousValue); - if (website === 'x') updateXCustomFocusRowState(previousValue); - return; - } - - toggleContainer.classList.add('loading'); - - // Use longer loading time ONLY for disabled-to-enabled transitions (page will reload) - // All other cases (enabled-to-disabled, or enabled-to-enabled) use short duration - const loadingDuration = isDisabledToEnabled ? 2500 : 350; - console.log(`${website} toggle loading duration: ${loadingDuration}ms (disabled-to-enabled: ${isDisabledToEnabled})`); - - const timeout = window.setTimeout(() => { - toggleContainer.classList.remove('loading'); - console.log(`${website} toggle loading complete`); - toggleTimeouts.delete(website); - }, loadingDuration); - - toggleTimeouts.set(website, timeout); - }; - - linkedinToggle.addEventListener('change', () => { - updateWebsiteToggle('linkedin', linkedinToggle.checked, linkedinToggle); - updateCustomFocusRowState(linkedinToggle.checked); - }); - - /** Persists a custom focus toggle change to storage with rollback on failure. */ - async function persistCustomFocusToggle(checkbox: HTMLInputElement, storageKey: 'linkedinCustomFocus' | 'xCustomFocus') { - const previousValue = !checkbox.checked; - try { - const current = await browser.storage.local.get(['websiteToggles']); - const toggles = { ...DEFAULT_WEBSITE_TOGGLES, ...current.websiteToggles }; - toggles[storageKey] = checkbox.checked; - await browser.storage.local.set({ websiteToggles: toggles }); - } catch (error) { - console.error(`Failed to update ${storageKey} toggle:`, error); - checkbox.checked = previousValue; - } - } - - linkedinCustomFocusToggle.addEventListener('change', () => { - persistCustomFocusToggle(linkedinCustomFocusToggle, 'linkedinCustomFocus'); - }); - - youtubeToggle.addEventListener('change', () => { - updateWebsiteToggle('youtube', youtubeToggle.checked, youtubeToggle); - }); - - xToggle.addEventListener('change', () => { - updateWebsiteToggle('x', xToggle.checked, xToggle); - updateXCustomFocusRowState(xToggle.checked); - }); - - xCustomFocusToggle.addEventListener('change', () => { - persistCustomFocusToggle(xCustomFocusToggle, 'xCustomFocus'); - }); - - sizeOptions.forEach(option => { - option.addEventListener('click', () => { - if (option.disabled) return; - - const size = option.dataset.size as SizeKey; - browser.storage.local.set({ textSize: size }); - updateActiveSizeOption(size); + openOptionsButton.addEventListener('click', () => { + browser.runtime.openOptionsPage().catch((error) => { + console.error('Failed to open options page', error); }); }); - - /** Highlights the active size button and deactivates the others. */ - function updateActiveSizeOption(activeSize: string) { - sizeOptions.forEach(option => { - const isActive = option.dataset.size === activeSize; - option.classList.toggle('active', isActive); - }); - } - - /** Enables or disables the custom focus toggle row based on the LinkedIn toggle state. */ - function updateCustomFocusRowState(linkedinEnabled: boolean) { - if (linkedinEnabled) { - linkedinCustomFocusRow.classList.remove('disabled'); - linkedinCustomFocusToggle.disabled = false; - } else { - linkedinCustomFocusRow.classList.add('disabled'); - linkedinCustomFocusToggle.disabled = true; - } - } - - /** Enables or disables the X custom focus toggle row based on the X toggle state. */ - function updateXCustomFocusRowState(xEnabled: boolean) { - if (xEnabled) { - xCustomFocusRow.classList.remove('disabled'); - xCustomFocusToggle.disabled = false; - } else { - xCustomFocusRow.classList.add('disabled'); - xCustomFocusToggle.disabled = true; - } - } - - /** Enables or disables the text size selector based on the show-quote toggle state. */ - function updateSizeRowState(showQuote: boolean) { - if (showQuote) { - fontSizeRow.classList.remove('disabled'); - sizeOptions.forEach(option => option.disabled = false); - } else { - fontSizeRow.classList.add('disabled'); - sizeOptions.forEach(option => option.disabled = true); - } - } }); diff --git a/src/ts/__mocks__/webextension-polyfill-ts.ts b/src/ts/__mocks__/webextension-polyfill-ts.ts index da1dc57..52049c2 100644 --- a/src/ts/__mocks__/webextension-polyfill-ts.ts +++ b/src/ts/__mocks__/webextension-polyfill-ts.ts @@ -25,5 +25,6 @@ export const browser = { onMessage: { addListener: jest.fn(), }, + openOptionsPage: jest.fn(() => Promise.resolve()), }, -}; \ No newline at end of file +}; diff --git a/src/ts/background.ts b/src/ts/background.ts index bcbd6d5..20ea819 100644 --- a/src/ts/background.ts +++ b/src/ts/background.ts @@ -22,19 +22,19 @@ const appState: AppState = { Unsupported: FocusMode.Unfocused, } -let activeURL: string | undefined = '' - -// Only populate missing keys on service worker startup. In MV3, the worker is -// killed and restarted frequently — reading first avoids overwriting user -// preferences (showQuote, textSize) that were changed via the popup. -// appState is always reset to Focused so each restart begins in focus mode. -browser.storage.local.get(['appState', 'showQuote', 'textSize']).then((existing) => { - browser.storage.local.set({ - appState: appState, - showQuote: existing.showQuote ?? true, - textSize: existing.textSize ?? 'medium', - }) -}) +// In MV3 the worker restarts frequently. Reset appState on startup so each +// worker begins from the same focused baseline. +async function initializeAppState(): Promise { + try { + await browser.storage.local.set({ + appState: appState, + }) + } catch (error) { + console.error('Failed to initialize app state:', error) + } +} + +void initializeAppState() // Atomically checks whether focus.js has already been injected into a tab, // and claims the loading slot if not. executeScript runs the function inside @@ -109,7 +109,6 @@ export async function loadFocusScriptOnTabChange( if (shouldLoad) { try { await loadFocusScript(tabId) - activeURL = url } catch (error) { // Injection failed after claiming the slot — clear the flag so a // future onUpdated event can retry. Without this, the tab would be diff --git a/src/ts/focus/focus.ts b/src/ts/focus/focus.ts index ca60558..991a9e2 100644 --- a/src/ts/focus/focus.ts +++ b/src/ts/focus/focus.ts @@ -4,8 +4,8 @@ * Lifecycle: * 1. Keyboard listeners attach synchronously at parse time (before initialize) * so no keypress is missed during the async init phase. - * 2. initialize() reads storage, creates managers and a site-specific controller, - * and sets up storage-change listeners. + * 2. initialize() reads storage and creates managers and a site-specific + * controller. * 3. render() applies the current focus mode to the page via the controller. * * State is shared with the background context via chrome.storage.local — the @@ -15,23 +15,12 @@ import LinkedInController from '../websites/linkedin/linkedin-controller' import YoutubeController from '../websites/youtube/youtube-controller' import XController from '../websites/x/x-controller' -import { getFromLocalStorage, setInLocalStorage } from '../storage' +import { getFromLocalStorage } from '../storage' import AppStateManager from './app-state-manager' import { browser } from 'webextension-polyfill-ts' import WebsiteController from '../websites/website-controller' import KeyPressManager from './keypress-manager' import { FocusMode, Website } from './types' -import { - isLinkedInURL, - isYouTubeURL, - isXURL, - WebsiteToggles, - DEFAULT_WEBSITE_TOGGLES, - WebsiteLoadingState, - PendingReload, - logWebsiteDetection, - logToggleChange -} from '../websites/website-config' let currentWebsite: Website = Website.Unsupported let stateManager: AppStateManager @@ -73,17 +62,15 @@ async function handleKeyEvent(e: KeyboardEvent) { } } -/** Checks for the focus mode shortcut (LShift+RShift) and toggles if the website is enabled. */ +/** Checks for the focus mode shortcut (LShift+RShift) and toggles if supported. */ async function handleKeyDown(e: KeyboardEvent): Promise { if (!keyPressManager.keyIsShortcutKey(e)) return; keyPressManager.setKeyPressedState(e.code, true); - if (keyPressManager.isShortcutPressed() && await isWebsiteEnabledForKeypress()) { - console.log('Keypress shortcut triggered - website is enabled'); + if (keyPressManager.isShortcutPressed() && currentWebsite !== Website.Unsupported) { + console.log('Keypress shortcut triggered'); toggleFocusMode(); - } else if (keyPressManager.isShortcutPressed()) { - console.log('Keypress shortcut ignored - website is disabled'); } } @@ -92,34 +79,11 @@ function handleKeyUp(): void { keyPressManager.reset(); } -/** Checks whether the current website has its toggle enabled in storage. */ -async function isWebsiteEnabledForKeypress(): Promise { - const settings = await getFromLocalStorage('websiteToggles'); - const websiteToggles: WebsiteToggles = { ...DEFAULT_WEBSITE_TOGGLES, ...settings }; - - return (currentWebsite === Website.LinkedIn && websiteToggles.linkedin) || - (currentWebsite === Website.Youtube && websiteToggles.youtube) || - (currentWebsite === Website.X && websiteToggles.x); -} - const DEFAULT_CYCLE: FocusMode[] = [FocusMode.Focused, FocusMode.Unfocused] -const CUSTOM_FOCUS_CYCLE: FocusMode[] = [FocusMode.Focused, FocusMode.CustomFocus, FocusMode.Unfocused] - -/** Returns the focus mode cycle for the current website based on custom focus settings. */ -async function getFocusCycle(): Promise { - if (currentWebsite !== Website.LinkedIn && currentWebsite !== Website.X) return DEFAULT_CYCLE - const settings = await getFromLocalStorage('websiteToggles') - const websiteToggles: WebsiteToggles = settings || DEFAULT_WEBSITE_TOGGLES - if (currentWebsite === Website.LinkedIn) { - return websiteToggles.linkedinCustomFocus ? CUSTOM_FOCUS_CYCLE : DEFAULT_CYCLE - } - return websiteToggles.xCustomFocus ? CUSTOM_FOCUS_CYCLE : DEFAULT_CYCLE -} /** Advances the focus mode to the next state in the cycle and re-renders. */ export async function toggleFocusMode() { - const cycle = await getFocusCycle() - await stateManager.updateFocusMode(currentWebsite, cycle) + await stateManager.updateFocusMode(currentWebsite, DEFAULT_CYCLE) const newMode = stateManager.getFocusMode(currentWebsite); console.log(`Toggling focus mode to: ${FocusMode[newMode]}`); render() @@ -134,42 +98,6 @@ export function render() { } } -/** Checks for a pending disabled-to-enabled reload and returns the reloaded website, if any. */ -async function handleReloadDetection(): Promise { - const pendingReload: PendingReload | null = await getFromLocalStorage('pendingReload'); - // 10s stale window: if the reload took longer than this, treat the flag as - // leftover from a previous session and discard it. - if (!pendingReload) return null; - if ((Date.now() - pendingReload.timestamp) >= 10000) { - await setInLocalStorage('pendingReload', null); - return null; - } - - console.log(`Detected reload after enabling ${pendingReload.website} from disabled state`); - - const websiteMap: Record = { - linkedin: Website.LinkedIn, - youtube: Website.Youtube, - x: Website.X, - }; - const reloadedWebsite = websiteMap[pendingReload.website]; - if (!reloadedWebsite) { - console.log(`Unknown pending reload website: "${pendingReload.website}", ignoring`); - await setInLocalStorage('pendingReload', null); - return null; - } - - await setInLocalStorage('websiteLoading', { - website: pendingReload.website, - timestamp: Date.now() - } as WebsiteLoadingState); - - await setInLocalStorage('pendingReload', null); - await setInLocalStorage('websiteLoading', null); - - return reloadedWebsite; -} - /** Creates the AppStateManager and KeyPressManager if not already initialized. */ async function initializeManagers(): Promise { if (!stateManager) { @@ -179,18 +107,14 @@ async function initializeManagers(): Promise { } } -/** Detects the current website from the URL and creates the appropriate controller if enabled. */ -async function detectAndCreateController(reloadedWebsite: Website | null): Promise { - const settings = await getFromLocalStorage('websiteToggles'); - const websiteToggles: WebsiteToggles = { ...DEFAULT_WEBSITE_TOGGLES, ...settings }; - - console.log('Initial website toggles:', websiteToggles); +/** Detects the current website from the URL and creates the appropriate controller. */ +async function detectAndCreateController(): Promise { console.log('Current URL:', document.URL); const websiteMappings = [ - { domains: ['linkedin.com'], controller: LinkedInController, website: Website.LinkedIn, enabled: websiteToggles.linkedin }, - { domains: ['youtube.com'], controller: YoutubeController, website: Website.Youtube, enabled: websiteToggles.youtube }, - { domains: ['x.com', 'twitter.com'], controller: XController, website: Website.X, enabled: websiteToggles.x }, + { domains: ['linkedin.com'], controller: LinkedInController, website: Website.LinkedIn }, + { domains: ['youtube.com'], controller: YoutubeController, website: Website.Youtube }, + { domains: ['x.com', 'twitter.com'], controller: XController, website: Website.X }, ]; let hostname: string @@ -203,20 +127,9 @@ async function detectAndCreateController(reloadedWebsite: Website | null): Promi for (const mapping of websiteMappings) { const matches = mapping.domains.some(d => hostname === d || hostname.endsWith('.' + d)) if (matches) { - - if (mapping.enabled) { - websiteController = new mapping.controller(); - currentWebsite = mapping.website; - logWebsiteDetection(Website[currentWebsite], true, true); - - if (reloadedWebsite && reloadedWebsite === currentWebsite && stateManager) { - console.log(`Setting focus mode to FOCUSED for reloaded website: ${Website[reloadedWebsite]}`); - await stateManager.setFocusMode(reloadedWebsite, FocusMode.Focused); - } - } else { - logWebsiteDetection(Website[mapping.website], false, false); - currentWebsite = mapping.website; // Still set the website type so storage listener works - } + websiteController = new mapping.controller(); + currentWebsite = mapping.website; + console.log(`Detected website: ${Website[currentWebsite]} (controller initialized)`); break; } } @@ -224,98 +137,16 @@ async function detectAndCreateController(reloadedWebsite: Website | null): Promi if (currentWebsite !== Website.Unsupported) { console.log('Website controller initialized and ready'); } else { - console.log('Unsupported or disabled website - listening for toggle changes'); + console.log('Unsupported website'); } } -/** Listens for websiteToggles storage changes to handle enable/disable and custom focus transitions. */ -function setupStorageListeners(): void { - // Always listen for website toggle changes, regardless of current state - browser.storage.onChanged.addListener(async (changes, areaName) => { - if (areaName === 'local' && changes.websiteToggles) { - const newToggles: WebsiteToggles = { ...DEFAULT_WEBSITE_TOGGLES, ...changes.websiteToggles.newValue }; - const currentURL = document.URL; - - const isLinkedin = isLinkedInURL(currentURL); - const isYoutube = isYouTubeURL(currentURL); - const isX = isXURL(currentURL); - - if (!isLinkedin && !isYoutube && !isX) return; // Not a supported website - - const website = isLinkedin ? 'linkedin' : isYoutube ? 'youtube' : 'x'; - const websiteEnum = isLinkedin ? Website.LinkedIn : isYoutube ? Website.Youtube : Website.X; - const isEnabled = isLinkedin ? newToggles.linkedin : isYoutube ? newToggles.youtube : newToggles.x; - - logToggleChange(website, isEnabled, websiteController !== null, Website[currentWebsite]); - - await handleWebsiteToggleChange(website, websiteEnum, isEnabled); - - // If custom focus was toggled off while in CustomFocus state, revert to Focused - if (stateManager && stateManager.getFocusMode(currentWebsite) === FocusMode.CustomFocus) { - const shouldRevert = - (isLinkedin && !newToggles.linkedinCustomFocus) || - (isX && !newToggles.xCustomFocus); - if (shouldRevert) { - await stateManager.setFocusMode(currentWebsite, FocusMode.Focused); - render(); - } - } - } - }); -} - /** Entry point: detects the website, creates managers and controller, and sets up listeners. */ export async function initialize() { console.log('Initializing focus script...'); - - // Phase 1: Handle reload detection - const reloadedWebsite = await handleReloadDetection(); - - // Phase 2: Initialize managers - await initializeManagers(); - - // Phase 3: Detect website and create controller - await detectAndCreateController(reloadedWebsite); - - // Phase 4: Setup storage listeners - setupStorageListeners(); -} - -/** Handles a website being toggled on or off: reloads for enable, cleans up for disable. */ -async function handleWebsiteToggleChange(website: string, websiteEnum: Website, isEnabled: boolean) { - const hasController = websiteController !== null; - const isCorrectWebsite = currentWebsite === websiteEnum; - - if (!hasController && isEnabled) { - // DISABLED → ENABLED: Need to reload for content script injection - console.log(`${website} - transitioning from DISABLED to ENABLED, triggering reload`); - await triggerReloadForWebsite(website); - - } else if (hasController && isCorrectWebsite && stateManager && websiteController && !isEnabled) { - // ENABLED → DISABLED: Instant cleanup (disable functionality entirely) - console.log(`${website} - transitioning from ENABLED to DISABLED, cleaning up controller`); - await stateManager.setFocusMode(websiteEnum, FocusMode.Unfocused); - websiteController.renderFocusMode(FocusMode.Unfocused); - - websiteController = null; - currentWebsite = Website.Unsupported; - } -} -/** Sets a pending reload flag and reloads the page for a disabled-to-enabled transition. */ -async function triggerReloadForWebsite(website: string) { - await setInLocalStorage('websiteLoading', { - website: website, - timestamp: Date.now() - }); - - await setInLocalStorage('pendingReload', { - website: website, - timestamp: Date.now(), - reason: 'disabled-to-enabled' - }); - - window.location.reload(); + await initializeManagers(); + await detectAndCreateController(); } (async function () { diff --git a/src/ts/focus/types.ts b/src/ts/focus/types.ts index f1e3187..5071e28 100644 --- a/src/ts/focus/types.ts +++ b/src/ts/focus/types.ts @@ -1,13 +1,12 @@ /** - * The three visual states a website can be in: - * Focused – all distracting regions hidden, quote injected into feed - * Unfocused – everything restored to its natural state - * CustomFocus – side panels hidden only; feed remains visible (LinkedIn, X) + * The two visual states a website can be in: + * Focused – distracting regions hidden, quote injected into feed + * Unfocused – feed visible, with low-value side distractions still hidden + * where the site controller treats that as the sensible default */ export enum FocusMode { Focused = 0, Unfocused = 1, - CustomFocus = 2, } export enum Website { diff --git a/src/ts/quotes/index.ts b/src/ts/quotes/index.ts index 894f049..40d492c 100644 --- a/src/ts/quotes/index.ts +++ b/src/ts/quotes/index.ts @@ -1,6 +1,4 @@ import { quotes } from './quotes-data'; -import { browser } from 'webextension-polyfill-ts'; -import { SIZE_MAP, SizeKey } from './text-size'; const customStyles = { quoteContainer: { @@ -19,27 +17,12 @@ const customStyles = { }, }; -const updateQuoteTextSize = (quoteElement: HTMLDivElement, textSize: string): void => { - if (!quoteElement) return; - - const sizes = SIZE_MAP[textSize as SizeKey] || SIZE_MAP.medium; - const quoteText = quoteElement.querySelector('p:first-child') as HTMLElement; - const quoteSource = quoteElement.querySelector('p:last-child') as HTMLElement; - - if (quoteText) { - quoteText.style.fontSize = sizes.quote; - } - if (quoteSource) { - quoteSource.style.fontSize = sizes.source; - } -} - const getRandomQuote = () => { const randomIndex = Math.floor(Math.random() * quotes.length); return quotes[randomIndex]; } -const createQuoteElement = async (): Promise => { +const createQuoteElement = (): HTMLDivElement => { const quote = getRandomQuote(); const quoteDiv = document.createElement('div'); quoteDiv.className = 'focus-quote'; @@ -47,16 +30,11 @@ const createQuoteElement = async (): Promise => { const quoteText = document.createElement('p'); Object.assign(quoteText.style, customStyles.quoteText); + quoteText.style.fontSize = '2rem'; const quoteSource = document.createElement('p'); Object.assign(quoteSource.style, customStyles.quoteSource); - - const settings = await browser.storage.local.get(['textSize']); - const textSize = settings.textSize || 'medium'; - const sizes = SIZE_MAP[textSize as SizeKey]; - - quoteText.style.fontSize = sizes.quote; - quoteSource.style.fontSize = sizes.source; + quoteSource.style.fontSize = '1.5rem'; quoteText.textContent = `"${quote.text}"`; quoteSource.textContent = `— ${quote.source}`; @@ -70,5 +48,4 @@ const createQuoteElement = async (): Promise => { export default { getRandomQuote, createQuoteElement, - updateQuoteTextSize, -} \ No newline at end of file +} diff --git a/src/ts/quotes/quotes.test.ts b/src/ts/quotes/quotes.test.ts index 891385e..5c2bfec 100644 --- a/src/ts/quotes/quotes.test.ts +++ b/src/ts/quotes/quotes.test.ts @@ -1,17 +1,6 @@ import quoteUtils from '.'; import { quotes } from './quotes-data'; -// Mock webextension-polyfill-ts -jest.mock('webextension-polyfill-ts', () => ({ - browser: { - storage: { - local: { - get: jest.fn().mockResolvedValue({ textSize: 'medium' }) - } - } - } -})); - describe('Quote Utils', () => { describe('getRandomQuote', () => { it('should return a valid quote object', () => { @@ -27,8 +16,8 @@ describe('Quote Utils', () => { describe('createQuoteElement', () => { let quoteElement: HTMLDivElement; - beforeEach(async () => { - quoteElement = await quoteUtils.createQuoteElement(); + beforeEach(() => { + quoteElement = quoteUtils.createQuoteElement(); }); it('should create a div with correct class', () => { @@ -75,63 +64,11 @@ describe('Quote Utils', () => { expect(matchingQuote).toBeDefined(); }); - it('should apply correct font sizes based on textSize setting', () => { + it('should apply the default font sizes', () => { const [textElement, sourceElement] = Array.from(quoteElement.children) as HTMLParagraphElement[]; - // Medium size should be applied (default) - expect(textElement.style.fontSize).toBe('2rem'); - expect(sourceElement.style.fontSize).toBe('1.5rem'); - }); - }); - - describe('updateQuoteTextSize', () => { - let quoteElement: HTMLDivElement; - - beforeEach(() => { - // Create a basic quote element structure - quoteElement = document.createElement('div'); - const textElement = document.createElement('p'); - const sourceElement = document.createElement('p'); - textElement.textContent = '"Test quote"'; - sourceElement.textContent = '— Test Author'; - quoteElement.appendChild(textElement); - quoteElement.appendChild(sourceElement); - }); - - it('should update font sizes for small text size', () => { - quoteUtils.updateQuoteTextSize(quoteElement, 'small'); - - const textElement = quoteElement.querySelector('p:first-child') as HTMLElement; - const sourceElement = quoteElement.querySelector('p:last-child') as HTMLElement; - - expect(textElement.style.fontSize).toBe('1.5rem'); - expect(sourceElement.style.fontSize).toBe('1.25rem'); - }); - - it('should update font sizes for large text size', () => { - quoteUtils.updateQuoteTextSize(quoteElement, 'large'); - - const textElement = quoteElement.querySelector('p:first-child') as HTMLElement; - const sourceElement = quoteElement.querySelector('p:last-child') as HTMLElement; - - expect(textElement.style.fontSize).toBe('2.5rem'); - expect(sourceElement.style.fontSize).toBe('2rem'); - }); - - it('should default to medium size for invalid textSize', () => { - quoteUtils.updateQuoteTextSize(quoteElement, 'invalid'); - - const textElement = quoteElement.querySelector('p:first-child') as HTMLElement; - const sourceElement = quoteElement.querySelector('p:last-child') as HTMLElement; - expect(textElement.style.fontSize).toBe('2rem'); expect(sourceElement.style.fontSize).toBe('1.5rem'); }); - - it('should handle null quoteElement gracefully', () => { - expect(() => { - quoteUtils.updateQuoteTextSize(null as any, 'medium'); - }).not.toThrow(); - }); }); }); diff --git a/src/ts/quotes/text-size.ts b/src/ts/quotes/text-size.ts deleted file mode 100644 index b23b7b0..0000000 --- a/src/ts/quotes/text-size.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const SIZE_MAP = { - small: { quote: '1.5rem', source: '1.25rem' }, - medium: { quote: '2rem', source: '1.5rem' }, - large: { quote: '2.5rem', source: '2rem' }, - xlarge: { quote: '4rem', source: '3rem' } -} - -export type SizeKey = keyof typeof SIZE_MAP \ No newline at end of file diff --git a/src/ts/websites/linkedin/linkedin-controller.test.ts b/src/ts/websites/linkedin/linkedin-controller.test.ts new file mode 100644 index 0000000..91bff9d --- /dev/null +++ b/src/ts/websites/linkedin/linkedin-controller.test.ts @@ -0,0 +1,43 @@ +import LinkedInController from './linkedin-controller' +import LinkedInUtils from './linkedin-utils' + +jest.mock('./linkedin-utils', () => ({ + __esModule: true, + default: { + isHomePage: jest.fn(), + getLinkedInFeed: jest.fn(), + getLinkedInPanels: jest.fn(), + hasFeedLoaded: jest.fn(), + isFeedHidden: jest.fn(), + arePanelsHidden: jest.fn(), + }, +})) + +describe('LinkedInController', () => { + beforeEach(() => { + jest.clearAllMocks() + }) + + it('keeps panels hidden in unfocused mode while restoring the feed', () => { + const feed = document.createElement('div') + const panel = document.createElement('aside') + + Object.defineProperty(document, 'URL', { + value: 'https://www.linkedin.com/feed/', + writable: true, + }) + + ;(LinkedInUtils.isHomePage as jest.Mock).mockReturnValue(true) + ;(LinkedInUtils.getLinkedInFeed as jest.Mock).mockReturnValue(feed) + ;(LinkedInUtils.getLinkedInPanels as jest.Mock).mockReturnValue([panel]) + ;(LinkedInUtils.arePanelsHidden as jest.Mock).mockReturnValue(false) + + const controller = new LinkedInController() + controller.unfocus() + + expect(panel.style.display).toBe('') + expect(panel.style.visibility).toBe('hidden') + expect(panel.style.opacity).toBe('0') + expect(panel.style.pointerEvents).toBe('none') + }) +}) diff --git a/src/ts/websites/linkedin/linkedin-controller.ts b/src/ts/websites/linkedin/linkedin-controller.ts index c3f21f0..4253f3a 100644 --- a/src/ts/websites/linkedin/linkedin-controller.ts +++ b/src/ts/websites/linkedin/linkedin-controller.ts @@ -6,6 +6,7 @@ export default class LinkedInController extends WebsiteController { protected readonly quotePosition = 'prepend' as const private readonly quoteElementId = 'focus-mode-linkedin-quote' + private readonly concealedPanels = new Map() protected getFeedElement(): HTMLElement | null { return LinkedInUtils.getLinkedInFeed() as HTMLElement | null @@ -31,6 +32,7 @@ export default class LinkedInController extends WebsiteController { /** Hides the feed and side panels, sets up observers for both. */ focus() { console.log('LinkedInController: Entering focus mode.') + this.restoreConcealedPanels() // Immediate blocking if (LinkedInUtils.isHomePage(document.URL)) { @@ -60,22 +62,18 @@ export default class LinkedInController extends WebsiteController { }) } - /** Hides only the side panels while keeping the feed visible. */ - customFocus() { - console.log('LinkedInController: Entering custom focus mode (panels only).') - - // Stop any existing watchers before setting up new ones + /** Shows the feed but keeps nuisance side panels hidden. */ + unfocus() { + console.log('LinkedInController: Entering unfocused mode (feed visible, panels hidden).') this.stopWatchingAll() this.clearAllIntervals() + this.restoreConcealedPanels() if (LinkedInUtils.isHomePage(document.URL)) { - // Show feed (in case coming from full focus) this.setFeedVisibility(true) - // Hide side panels this.hidePanels() } - // Only watch for panel distractions, not feed this.setupDistraction({ name: 'linkedin-panel', observeTarget: PANEL_OBSERVE_TARGETS, @@ -86,22 +84,34 @@ export default class LinkedInController extends WebsiteController { }) } - /** Stops all observers and restores all hidden elements. */ - unfocus() { - console.log('LinkedInController: Exiting focus mode.') - this.stopWatchingAll() - this.clearAllIntervals() + /** Hides panels found via CSS selectors (PANEL_SELECTORS). */ + private hidePanels(): void { + LinkedInUtils.getLinkedInPanels().forEach((panel) => { + this.concealPanel(panel) + }) + } - if (LinkedInUtils.isHomePage(document.URL)) { - this.setFeedVisibility(true) + private concealPanel(panel: HTMLElement): void { + if (!this.concealedPanels.has(panel)) { + this.concealedPanels.set(panel, { + visibility: panel.style.visibility, + opacity: panel.style.opacity, + pointerEvents: panel.style.pointerEvents, + }) } + + panel.style.setProperty('visibility', 'hidden', 'important') + panel.style.setProperty('opacity', '0', 'important') + panel.style.setProperty('pointer-events', 'none', 'important') } - /** Hides panels found via CSS selectors (PANEL_SELECTORS). */ - private hidePanels(): void { - LinkedInUtils.getLinkedInPanels().forEach((panel) => { - this.hideElement(panel) + private restoreConcealedPanels(): void { + this.concealedPanels.forEach((styles, panel) => { + restoreInlineStyle(panel, 'visibility', styles.visibility) + restoreInlineStyle(panel, 'opacity', styles.opacity) + restoreInlineStyle(panel, 'pointer-events', styles.pointerEvents) }) + this.concealedPanels.clear() } } @@ -109,3 +119,18 @@ export default class LinkedInController extends WebsiteController { // which kills any observer attached to them const FEED_OBSERVE_TARGETS = '.scaffold-layout__main, main#workspace, [role="main"], body' const PANEL_OBSERVE_TARGETS = 'body' + +interface ConcealedPanelStyles { + visibility: string + opacity: string + pointerEvents: string +} + +function restoreInlineStyle(element: HTMLElement, property: string, value: string): void { + if (value === '') { + element.style.removeProperty(property) + return + } + + element.style.setProperty(property, value) +} diff --git a/src/ts/websites/website-config.ts b/src/ts/websites/website-config.ts deleted file mode 100644 index aeb98bd..0000000 --- a/src/ts/websites/website-config.ts +++ /dev/null @@ -1,59 +0,0 @@ -export function isLinkedInURL(url: string): boolean { - try { - const hostname = new URL(url).hostname - return hostname === 'linkedin.com' || hostname.endsWith('.linkedin.com') - } catch { - return false - } -} - -export function isYouTubeURL(url: string): boolean { - try { - const hostname = new URL(url).hostname - return hostname === 'youtube.com' || hostname.endsWith('.youtube.com') - } catch { - return false - } -} - -export function isXURL(url: string): boolean { - try { - const hostname = new URL(url).hostname - return hostname === 'x.com' || hostname.endsWith('.x.com') - || hostname === 'twitter.com' || hostname.endsWith('.twitter.com') - } catch { - return false - } -} - -export interface WebsiteToggles { - linkedin: boolean - youtube: boolean - x: boolean - linkedinCustomFocus?: boolean - xCustomFocus?: boolean -} - -export const DEFAULT_WEBSITE_TOGGLES: WebsiteToggles = { linkedin: true, youtube: true, x: true } - -export interface WebsiteLoadingState { - website: string - timestamp: number -} - -export interface PendingReload { - website: string - timestamp: number - reason: string -} - -export function logWebsiteDetection(website: string, enabled: boolean, hasController: boolean): void { - const status = enabled ? 'enabled' : 'disabled' - const controllerStatus = hasController ? 'controller initialized' : 'no controller initialized' - console.log(`Detected website: ${website} (${status}) - ${controllerStatus}`) -} - -export function logToggleChange(website: string, isEnabled: boolean, hasController: boolean, currentWebsite: string): void { - console.log(`${website} toggle changed to: ${isEnabled}`) - console.log(`Current state - controller: ${hasController ? 'exists' : 'null'}, website: ${currentWebsite}`) -} \ No newline at end of file diff --git a/src/ts/websites/website-controller.ts b/src/ts/websites/website-controller.ts index d1fcdae..ff6dd4b 100644 --- a/src/ts/websites/website-controller.ts +++ b/src/ts/websites/website-controller.ts @@ -1,6 +1,5 @@ import { FocusMode } from './../focus/types' import DistractionWatcher, { DistractionTarget } from './distraction-watcher' -import { browser } from 'webextension-polyfill-ts' import quoteUtils from '../quotes' export interface DistractionConfig { @@ -30,10 +29,6 @@ export default abstract class WebsiteController { // Element hiding: stores original display values for restoration protected hiddenDisplayValues: Map = new Map() - constructor() { - this.addStorageListener() - } - // --- Element hiding via inline style.display --- // Works on all sites regardless of CSP. No