designslife/Outcut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: keyboard nav as primary feature, design tweaks behind experimental toggle

Browse Source
This commit is contained in:
Joel Brock
2026-04-23 17:20:14 -07:00
parent 823de95891
commit 93a5888d83
4 changed files with 352 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
content/content.js
View File

@@ -1,11 +1,14 @@
// Outlook Relook — Content Script Entry Point // Outlook Relook — Content Script Entry Point
//
// Primary feature: Keyboard navigation (always active)
// Experimental: Design tweaks (themes, density, hiding, behavior) — gated by enableDesignTweaks
(function () { (function () {
'use strict'; 'use strict';
const OR = window.OutlookRelook; const OR = window.OutlookRelook;
// Map setting keys to data attributes on <html> // Map setting keys to data attributes on <html> (design tweaks only)
const SETTING_TO_ATTR = { const SETTING_TO_ATTR = {
compactTopBar: 'data-or-compact-topbar', compactTopBar: 'data-or-compact-topbar',
compactCommandBar: 'data-or-compact-commandbar', compactCommandBar: 'data-or-compact-commandbar',
@@ -34,11 +37,12 @@
darkModeEmailFix: 'data-or-darkmode-fix', darkModeEmailFix: 'data-or-darkmode-fix',
}; };
// Non-boolean attributes
const SETTING_TO_ATTR_VALUE = { const SETTING_TO_ATTR_VALUE = {
messageListFontSize: 'data-or-fontsize', messageListFontSize: 'data-or-fontsize',
}; };
let designTweaksActive = false;
function applyColorScheme(scheme) { function applyColorScheme(scheme) {
let resolved = scheme; let resolved = scheme;
if (scheme === 'system') { if (scheme === 'system') {
@@ -48,34 +52,41 @@
} }
function applySettingsToDOM(settings) { function applySettingsToDOM(settings) {
// Boolean toggles -> data attributes
for (const [key, attr] of Object.entries(SETTING_TO_ATTR)) { for (const [key, attr] of Object.entries(SETTING_TO_ATTR)) {
document.documentElement.setAttribute(attr, String(!!settings[key])); document.documentElement.setAttribute(attr, String(!!settings[key]));
} }
// Value-based attributes
for (const [key, attr] of Object.entries(SETTING_TO_ATTR_VALUE)) { for (const [key, attr] of Object.entries(SETTING_TO_ATTR_VALUE)) {
document.documentElement.setAttribute(attr, settings[key] || ''); document.documentElement.setAttribute(attr, settings[key] || '');
} }
// Color scheme
applyColorScheme(settings.colorScheme); applyColorScheme(settings.colorScheme);
// Accent color
if (settings.accentColor) { if (settings.accentColor) {
document.documentElement.style.setProperty('--or-accent-override', settings.accentColor); document.documentElement.style.setProperty('--or-accent-override', settings.accentColor);
} }
console.log('[Outlook Relook] Settings applied to DOM'); console.log('[Outlook Relook] Settings applied to DOM');
} }
function injectThemeCSS(theme) { function clearDesignFromDOM() {
// Remove existing theme stylesheet // Remove all data-or-* attributes
const existing = document.getElementById('outlook-relook-theme'); for (const attr of Object.values(SETTING_TO_ATTR)) {
if (existing) existing.remove(); document.documentElement.removeAttribute(attr);
}
for (const attr of Object.values(SETTING_TO_ATTR_VALUE)) {
document.documentElement.removeAttribute(attr);
}
document.documentElement.removeAttribute('data-outlook-relook-scheme');
document.documentElement.style.removeProperty('--or-accent-override');
// Inject the theme CSS // Remove injected theme CSS
const link = document.createElement('link'); var themeLink = document.getElementById('outlook-relook-theme');
if (themeLink) themeLink.remove();
console.log('[Outlook Relook] Design tweaks cleared from DOM');
}
function injectThemeCSS(theme) {
var existing = document.getElementById('outlook-relook-theme');
if (existing) existing.remove();
var link = document.createElement('link');
link.id = 'outlook-relook-theme'; link.id = 'outlook-relook-theme';
link.rel = 'stylesheet'; link.rel = 'stylesheet';
link.href = chrome.runtime.getURL('themes/' + theme + '.css'); link.href = chrome.runtime.getURL('themes/' + theme + '.css');
@@ -83,48 +94,60 @@
console.log('[Outlook Relook] Theme loaded: ' + theme); console.log('[Outlook Relook] Theme loaded: ' + theme);
} }
function startDesignTweaks(settings) {
applySettingsToDOM(settings);
injectThemeCSS(settings.theme);
OR.Observer.start(settings);
OR.Behavior.start(settings);
OR.Injector.start(settings);
designTweaksActive = true;
console.log('[Outlook Relook] Design tweaks enabled');
}
function stopDesignTweaks() {
OR.Observer.stop();
OR.Behavior.stop();
OR.Injector.stop();
clearDesignFromDOM();
designTweaksActive = false;
console.log('[Outlook Relook] Design tweaks disabled');
}
async function init() { async function init() {
const settings = await OR.loadSettings(); const settings = await OR.loadSettings();
console.log('[Outlook Relook] Loaded settings:', settings); console.log('[Outlook Relook] Loaded settings:', settings);
applySettingsToDOM(settings); // Keyboard navigation — always starts (gated by its own toggle internally)
injectThemeCSS(settings.theme);
// Start the MutationObserver
OR.Observer.start(settings);
// Apply behavior patches
OR.Behavior.start(settings);
// Start keyboard navigation
OR.Keyboard.start(settings); OR.Keyboard.start(settings);
// Start DOM injector (quick actions) // Design tweaks — only if enabled
OR.Injector.start(settings); if (settings.enableDesignTweaks) {
startDesignTweaks(settings);
}
// Listen for setting changes from popup // Listen for setting changes from popup
chrome.storage.onChanged.addListener((changes, area) => { chrome.storage.onChanged.addListener((changes, area) => {
if (area !== 'sync') return; if (area !== 'sync') return;
// Build updated settings object
OR.loadSettings().then((updated) => { OR.loadSettings().then((updated) => {
applySettingsToDOM(updated); // Keyboard — always update
// Update observer with new settings
OR.Observer.updateSettings(updated);
// Update behavior patches
OR.Behavior.updateSettings(updated);
// Update keyboard navigation
OR.Keyboard.updateSettings(updated); OR.Keyboard.updateSettings(updated);
// Update injector // Design tweaks — toggle on/off or update
OR.Injector.updateSettings(updated); if (updated.enableDesignTweaks) {
if (!designTweaksActive) {
// Swap theme CSS if theme changed startDesignTweaks(updated);
if (changes.theme) { } else {
injectThemeCSS(changes.theme.newValue); applySettingsToDOM(updated);
OR.Observer.updateSettings(updated);
OR.Behavior.updateSettings(updated);
OR.Injector.updateSettings(updated);
if (changes.theme) {
injectThemeCSS(changes.theme.newValue);
}
}
} else if (designTweaksActive) {
stopDesignTweaks();
} }
}); });
}); });
@@ -133,7 +156,7 @@
// Listen for system theme changes // Listen for system theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', async () => { window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', async () => {
const settings = await OR.loadSettings(); const settings = await OR.loadSettings();
if (settings.colorScheme === 'system') { if (settings.enableDesignTweaks && settings.colorScheme === 'system') {
applyColorScheme('system'); applyColorScheme('system');
} }
}); });

9
content/settings-defaults.js
View File

@@ -4,6 +4,12 @@
window.OutlookRelook = window.OutlookRelook || {}; window.OutlookRelook = window.OutlookRelook || {};
window.OutlookRelook.DEFAULTS = { window.OutlookRelook.DEFAULTS = {
// Keyboard Navigation (primary feature, always visible)
keyboardMultiSelect: true,
// Design Tweaks (experimental, hidden by default)
enableDesignTweaks: false,
// Theme & Appearance // Theme & Appearance
theme: 'swiss', theme: 'swiss',
colorScheme: 'system', // 'light' | 'dark' | 'system' colorScheme: 'system', // 'light' | 'dark' | 'system'
@@ -53,9 +59,6 @@ window.OutlookRelook.DEFAULTS = {
autoResizeCompose: true, autoResizeCompose: true,
throttleNotifications: false, throttleNotifications: false,
// Keyboard Navigation
keyboardMultiSelect: true,
// Quick Actions // Quick Actions
markAllReadButton: true, markAllReadButton: true,
quickFolderJump: true, quickFolderJump: true,

468
popup/popup.html
View File

@@ -11,220 +11,8 @@
<span class="or-version" id="version"></span> <span class="or-version" id="version"></span>
</div> </div>
<!-- Theme & Appearance --> <!-- Keyboard Navigation (primary feature, always visible) -->
<div class="or-section open" data-section="theme"> <div class="or-section open" data-section="keyboard">
<div class="or-section-header">Theme &amp; Appearance</div>
<div class="or-section-body">
<div class="or-select-row">
<label for="theme">Theme</label>
<select id="theme" data-setting="theme">
<option value="swiss">Swiss</option>
<option value="material">Material</option>
<option value="brutalist">Brutalist</option>
</select>
</div>
<div class="or-radio-group" data-setting="colorScheme">
<label><input type="radio" name="colorScheme" value="light"> Light</label>
<label><input type="radio" name="colorScheme" value="dark"> Dark</label>
<label><input type="radio" name="colorScheme" value="system"> System</label>
</div>
<div class="or-color-row">
<label for="accentColor">Accent color</label>
<input type="color" id="accentColor" data-setting="accentColor" value="#1976d2">
</div>
</div>
</div>
<!-- Density & Spacing -->
<div class="or-section" data-section="density">
<div class="or-section-header">Density &amp; Spacing</div>
<div class="or-section-body">
<div class="or-select-row">
<label for="densityPreset">Density preset</label>
<select id="densityPreset" data-setting="densityPreset">
<option value="comfortable">Comfortable</option>
<option value="compact">Compact</option>
<option value="ultra-compact">Ultra-compact</option>
</select>
</div>
<div class="or-toggle-row">
<label for="compactTopBar">Compact top bar</label>
<div class="or-switch"><input type="checkbox" id="compactTopBar" data-setting="compactTopBar"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="compactCommandBar">Compact command bar</label>
<div class="or-switch"><input type="checkbox" id="compactCommandBar" data-setting="compactCommandBar"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="compactMessageList">Compact message list</label>
<div class="or-switch"><input type="checkbox" id="compactMessageList" data-setting="compactMessageList"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="compactReadingPane">Compact reading pane</label>
<div class="or-switch"><input type="checkbox" id="compactReadingPane" data-setting="compactReadingPane"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="compactFolderPane">Compact folder pane</label>
<div class="or-switch"><input type="checkbox" id="compactFolderPane" data-setting="compactFolderPane"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="narrowDateColumn">Narrow date column</label>
<div class="or-switch"><input type="checkbox" id="narrowDateColumn" data-setting="narrowDateColumn"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="compressComposeToolbar">Compress compose toolbar</label>
<div class="or-switch"><input type="checkbox" id="compressComposeToolbar" data-setting="compressComposeToolbar"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="readingPaneMaxWidth">Reading pane max-width</label>
<div class="or-switch"><input type="checkbox" id="readingPaneMaxWidth" data-setting="readingPaneMaxWidth"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="unifiedHeader">Unified header (collapse all bars)</label>
<div class="or-switch"><input type="checkbox" id="unifiedHeader" data-setting="unifiedHeader"><span class="slider"></span></div>
</div>
</div>
</div>
<!-- Hide Elements -->
<div class="or-section" data-section="hide">
<div class="or-section-header">Hide Elements</div>
<div class="or-section-body">
<div class="or-toggle-row">
<label for="hideCopilot">Copilot (button, pane, suggestions)</label>
<div class="or-switch"><input type="checkbox" id="hideCopilot" data-setting="hideCopilot"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideSuggestedReplies">Suggested replies</label>
<div class="or-switch"><input type="checkbox" id="hideSuggestedReplies" data-setting="hideSuggestedReplies"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hidePromoBanners">Promotional banners</label>
<div class="or-switch"><input type="checkbox" id="hidePromoBanners" data-setting="hidePromoBanners"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideFocusedOtherTabs">Focused / Other tabs</label>
<div class="or-switch"><input type="checkbox" id="hideFocusedOtherTabs" data-setting="hideFocusedOtherTabs"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideSidebarAppIcons">Sidebar app icons</label>
<div class="or-switch"><input type="checkbox" id="hideSidebarAppIcons" data-setting="hideSidebarAppIcons"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideGroupsSection">Groups section</label>
<div class="or-switch"><input type="checkbox" id="hideGroupsSection" data-setting="hideGroupsSection"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideMyDayButtons">My Day / panel buttons</label>
<div class="or-switch"><input type="checkbox" id="hideMyDayButtons" data-setting="hideMyDayButtons"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideSenderAvatars">Sender avatars</label>
<div class="or-switch"><input type="checkbox" id="hideSenderAvatars" data-setting="hideSenderAvatars"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideFeatureDiscovery">Feature discovery tooltips</label>
<div class="or-switch"><input type="checkbox" id="hideFeatureDiscovery" data-setting="hideFeatureDiscovery"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideVivaInsights">Viva Insights / Briefing</label>
<div class="or-switch"><input type="checkbox" id="hideVivaInsights" data-setting="hideVivaInsights"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideUnreadOtherBanner">Unread in Other banner</label>
<div class="or-switch"><input type="checkbox" id="hideUnreadOtherBanner" data-setting="hideUnreadOtherBanner"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideActivityFeed">Activity feed banners</label>
<div class="or-switch"><input type="checkbox" id="hideActivityFeed" data-setting="hideActivityFeed"><span class="slider"></span></div>
</div>
</div>
</div>
<!-- Readability -->
<div class="or-section" data-section="readability">
<div class="or-section-header">Readability</div>
<div class="or-section-body">
<div class="or-toggle-row">
<label for="unreadDistinction">Unread distinction (bold + border)</label>
<div class="or-switch"><input type="checkbox" id="unreadDistinction" data-setting="unreadDistinction"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="previewOwnLine">Preview text on own line</label>
<div class="or-switch"><input type="checkbox" id="previewOwnLine" data-setting="previewOwnLine"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="normalizeFontWeight">Normalize font weight</label>
<div class="or-switch"><input type="checkbox" id="normalizeFontWeight" data-setting="normalizeFontWeight"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="darkModeEmailFix">Dark mode email body fix</label>
<div class="or-switch"><input type="checkbox" id="darkModeEmailFix" data-setting="darkModeEmailFix"><span class="slider"></span></div>
</div>
<div class="or-select-row">
<label for="messageListFontSize">Message list font size</label>
<select id="messageListFontSize" data-setting="messageListFontSize">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
</div>
</div>
</div>
<!-- Behavior -->
<div class="or-section" data-section="behavior">
<div class="or-section-header">Behavior</div>
<div class="or-section-body">
<div class="or-toggle-row">
<label for="autoCollapseRibbon">Auto-collapse ribbon</label>
<div class="or-switch"><input type="checkbox" id="autoCollapseRibbon" data-setting="autoCollapseRibbon"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="rememberSidebarState">Remember sidebar state</label>
<div class="or-switch"><input type="checkbox" id="rememberSidebarState" data-setting="rememberSidebarState"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="suppressContactHover">Suppress contact hover cards</label>
<div class="or-switch"><input type="checkbox" id="suppressContactHover" data-setting="suppressContactHover"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="autoAdvanceAfterDelete">Auto-advance after delete</label>
<div class="or-switch"><input type="checkbox" id="autoAdvanceAfterDelete" data-setting="autoAdvanceAfterDelete"><span class="slider"></span></div>
</div>
<div class="or-select-row">
<label for="autoDismissToasts">Auto-dismiss toasts</label>
<select id="autoDismissToasts" data-setting="autoDismissToasts">
<option value="off">Off</option>
<option value="3">3 seconds</option>
<option value="5">5 seconds</option>
<option value="10">10 seconds</option>
</select>
</div>
<div class="or-select-row">
<label for="toastPosition">Toast position</label>
<select id="toastPosition" data-setting="toastPosition">
<option value="bottom-left">Bottom-left</option>
<option value="top-right">Top-right</option>
</select>
</div>
<div class="or-toggle-row">
<label for="stickyReplyBar">Sticky Reply/Forward bar</label>
<div class="or-switch"><input type="checkbox" id="stickyReplyBar" data-setting="stickyReplyBar"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="autoResizeCompose">Auto-resize compose window</label>
<div class="or-switch"><input type="checkbox" id="autoResizeCompose" data-setting="autoResizeCompose"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="throttleNotifications">Throttle desktop notifications</label>
<div class="or-switch"><input type="checkbox" id="throttleNotifications" data-setting="throttleNotifications"><span class="slider"></span></div>
</div>
</div>
</div>
<!-- Keyboard Navigation -->
<div class="or-section" data-section="keyboard">
<div class="or-section-header">Keyboard Navigation</div> <div class="or-section-header">Keyboard Navigation</div>
<div class="or-section-body"> <div class="or-section-body">
<div class="or-toggle-row"> <div class="or-toggle-row">
@@ -232,26 +20,258 @@
<div class="or-switch"><input type="checkbox" id="keyboardMultiSelect" data-setting="keyboardMultiSelect"><span class="slider"></span></div> <div class="or-switch"><input type="checkbox" id="keyboardMultiSelect" data-setting="keyboardMultiSelect"><span class="slider"></span></div>
</div> </div>
<div style="font-size:11px;color:#888;padding:4px 0 2px;line-height:1.4;"> <div style="font-size:11px;color:#888;padding:4px 0 2px;line-height:1.4;">
j/k or arrows to navigate, x/Space to select, # delete, e archive, Shift+i read, Shift+u unread, v move, Esc deselect j/k navigate, x/Space select, # delete, e archive,
Shift+i/u read/unread, v move, f flag, p pin, Esc deselect
</div> </div>
</div> </div>
</div> </div>
<!-- Quick Actions --> <!-- Design Tweaks Master Toggle -->
<div class="or-section" data-section="actions"> <div class="or-section" data-section="design-master">
<div class="or-section-header">Quick Actions</div> <div class="or-section-header" style="cursor:default;">Design Tweaks</div>
<div class="or-section-body"> <div class="or-section-body" style="display:block;">
<div class="or-toggle-row"> <div class="or-toggle-row">
<label for="markAllReadButton">"Mark all as read" button</label> <label for="enableDesignTweaks">Enable experimental UI customization</label>
<div class="or-switch"><input type="checkbox" id="markAllReadButton" data-setting="markAllReadButton"><span class="slider"></span></div> <div class="or-switch"><input type="checkbox" id="enableDesignTweaks" data-setting="enableDesignTweaks"><span class="slider"></span></div>
</div> </div>
<div class="or-toggle-row"> <div style="font-size:11px;color:#888;padding:2px 0;line-height:1.4;">
<label for="quickFolderJump">Quick folder jump (Ctrl+Shift+K)</label> Themes, density, element hiding, and behavior patches. May conflict with OWA updates.
<div class="or-switch"><input type="checkbox" id="quickFolderJump" data-setting="quickFolderJump"><span class="slider"></span></div>
</div> </div>
</div> </div>
</div> </div>
<!-- Design Tweaks Sections (hidden when enableDesignTweaks is off) -->
<div id="designSections">
<!-- Theme & Appearance -->
<div class="or-section" data-section="theme">
<div class="or-section-header">Theme &amp; Appearance</div>
<div class="or-section-body">
<div class="or-select-row">
<label for="theme">Theme</label>
<select id="theme" data-setting="theme">
<option value="swiss">Swiss</option>
<option value="material">Material</option>
<option value="brutalist">Brutalist</option>
</select>
</div>
<div class="or-radio-group" data-setting="colorScheme">
<label><input type="radio" name="colorScheme" value="light"> Light</label>
<label><input type="radio" name="colorScheme" value="dark"> Dark</label>
<label><input type="radio" name="colorScheme" value="system"> System</label>
</div>
<div class="or-color-row">
<label for="accentColor">Accent color</label>
<input type="color" id="accentColor" data-setting="accentColor" value="#1976d2">
</div>
</div>
</div>
<!-- Density & Spacing -->
<div class="or-section" data-section="density">
<div class="or-section-header">Density &amp; Spacing</div>
<div class="or-section-body">
<div class="or-select-row">
<label for="densityPreset">Density preset</label>
<select id="densityPreset" data-setting="densityPreset">
<option value="comfortable">Comfortable</option>
<option value="compact">Compact</option>
<option value="ultra-compact">Ultra-compact</option>
</select>
</div>
<div class="or-toggle-row">
<label for="compactTopBar">Compact top bar</label>
<div class="or-switch"><input type="checkbox" id="compactTopBar" data-setting="compactTopBar"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="compactCommandBar">Compact command bar</label>
<div class="or-switch"><input type="checkbox" id="compactCommandBar" data-setting="compactCommandBar"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="compactMessageList">Compact message list</label>
<div class="or-switch"><input type="checkbox" id="compactMessageList" data-setting="compactMessageList"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="compactReadingPane">Compact reading pane</label>
<div class="or-switch"><input type="checkbox" id="compactReadingPane" data-setting="compactReadingPane"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="compactFolderPane">Compact folder pane</label>
<div class="or-switch"><input type="checkbox" id="compactFolderPane" data-setting="compactFolderPane"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="narrowDateColumn">Narrow date column</label>
<div class="or-switch"><input type="checkbox" id="narrowDateColumn" data-setting="narrowDateColumn"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="compressComposeToolbar">Compress compose toolbar</label>
<div class="or-switch"><input type="checkbox" id="compressComposeToolbar" data-setting="compressComposeToolbar"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="readingPaneMaxWidth">Reading pane max-width</label>
<div class="or-switch"><input type="checkbox" id="readingPaneMaxWidth" data-setting="readingPaneMaxWidth"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="unifiedHeader">Unified header (collapse all bars)</label>
<div class="or-switch"><input type="checkbox" id="unifiedHeader" data-setting="unifiedHeader"><span class="slider"></span></div>
</div>
</div>
</div>
<!-- Hide Elements -->
<div class="or-section" data-section="hide">
<div class="or-section-header">Hide Elements</div>
<div class="or-section-body">
<div class="or-toggle-row">
<label for="hideCopilot">Copilot (button, pane, suggestions)</label>
<div class="or-switch"><input type="checkbox" id="hideCopilot" data-setting="hideCopilot"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideSuggestedReplies">Suggested replies</label>
<div class="or-switch"><input type="checkbox" id="hideSuggestedReplies" data-setting="hideSuggestedReplies"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hidePromoBanners">Promotional banners</label>
<div class="or-switch"><input type="checkbox" id="hidePromoBanners" data-setting="hidePromoBanners"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideFocusedOtherTabs">Focused / Other tabs</label>
<div class="or-switch"><input type="checkbox" id="hideFocusedOtherTabs" data-setting="hideFocusedOtherTabs"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideSidebarAppIcons">Sidebar app icons</label>
<div class="or-switch"><input type="checkbox" id="hideSidebarAppIcons" data-setting="hideSidebarAppIcons"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideGroupsSection">Groups section</label>
<div class="or-switch"><input type="checkbox" id="hideGroupsSection" data-setting="hideGroupsSection"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideMyDayButtons">My Day / panel buttons</label>
<div class="or-switch"><input type="checkbox" id="hideMyDayButtons" data-setting="hideMyDayButtons"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideSenderAvatars">Sender avatars</label>
<div class="or-switch"><input type="checkbox" id="hideSenderAvatars" data-setting="hideSenderAvatars"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideFeatureDiscovery">Feature discovery tooltips</label>
<div class="or-switch"><input type="checkbox" id="hideFeatureDiscovery" data-setting="hideFeatureDiscovery"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideVivaInsights">Viva Insights / Briefing</label>
<div class="or-switch"><input type="checkbox" id="hideVivaInsights" data-setting="hideVivaInsights"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideUnreadOtherBanner">Unread in Other banner</label>
<div class="or-switch"><input type="checkbox" id="hideUnreadOtherBanner" data-setting="hideUnreadOtherBanner"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="hideActivityFeed">Activity feed banners</label>
<div class="or-switch"><input type="checkbox" id="hideActivityFeed" data-setting="hideActivityFeed"><span class="slider"></span></div>
</div>
</div>
</div>
<!-- Readability -->
<div class="or-section" data-section="readability">
<div class="or-section-header">Readability</div>
<div class="or-section-body">
<div class="or-toggle-row">
<label for="unreadDistinction">Unread distinction (bold + border)</label>
<div class="or-switch"><input type="checkbox" id="unreadDistinction" data-setting="unreadDistinction"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="previewOwnLine">Preview text on own line</label>
<div class="or-switch"><input type="checkbox" id="previewOwnLine" data-setting="previewOwnLine"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="normalizeFontWeight">Normalize font weight</label>
<div class="or-switch"><input type="checkbox" id="normalizeFontWeight" data-setting="normalizeFontWeight"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="darkModeEmailFix">Dark mode email body fix</label>
<div class="or-switch"><input type="checkbox" id="darkModeEmailFix" data-setting="darkModeEmailFix"><span class="slider"></span></div>
</div>
<div class="or-select-row">
<label for="messageListFontSize">Message list font size</label>
<select id="messageListFontSize" data-setting="messageListFontSize">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
</div>
</div>
</div>
<!-- Behavior -->
<div class="or-section" data-section="behavior">
<div class="or-section-header">Behavior</div>
<div class="or-section-body">
<div class="or-toggle-row">
<label for="autoCollapseRibbon">Auto-collapse ribbon</label>
<div class="or-switch"><input type="checkbox" id="autoCollapseRibbon" data-setting="autoCollapseRibbon"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="rememberSidebarState">Remember sidebar state</label>
<div class="or-switch"><input type="checkbox" id="rememberSidebarState" data-setting="rememberSidebarState"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="suppressContactHover">Suppress contact hover cards</label>
<div class="or-switch"><input type="checkbox" id="suppressContactHover" data-setting="suppressContactHover"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="autoAdvanceAfterDelete">Auto-advance after delete</label>
<div class="or-switch"><input type="checkbox" id="autoAdvanceAfterDelete" data-setting="autoAdvanceAfterDelete"><span class="slider"></span></div>
</div>
<div class="or-select-row">
<label for="autoDismissToasts">Auto-dismiss toasts</label>
<select id="autoDismissToasts" data-setting="autoDismissToasts">
<option value="off">Off</option>
<option value="3">3 seconds</option>
<option value="5">5 seconds</option>
<option value="10">10 seconds</option>
</select>
</div>
<div class="or-select-row">
<label for="toastPosition">Toast position</label>
<select id="toastPosition" data-setting="toastPosition">
<option value="bottom-left">Bottom-left</option>
<option value="top-right">Top-right</option>
</select>
</div>
<div class="or-toggle-row">
<label for="stickyReplyBar">Sticky Reply/Forward bar</label>
<div class="or-switch"><input type="checkbox" id="stickyReplyBar" data-setting="stickyReplyBar"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="autoResizeCompose">Auto-resize compose window</label>
<div class="or-switch"><input type="checkbox" id="autoResizeCompose" data-setting="autoResizeCompose"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="throttleNotifications">Throttle desktop notifications</label>
<div class="or-switch"><input type="checkbox" id="throttleNotifications" data-setting="throttleNotifications"><span class="slider"></span></div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="or-section" data-section="actions">
<div class="or-section-header">Quick Actions</div>
<div class="or-section-body">
<div class="or-toggle-row">
<label for="markAllReadButton">"Mark all as read" button</label>
<div class="or-switch"><input type="checkbox" id="markAllReadButton" data-setting="markAllReadButton"><span class="slider"></span></div>
</div>
<div class="or-toggle-row">
<label for="quickFolderJump">Quick folder jump (Ctrl+Shift+K)</label>
<div class="or-switch"><input type="checkbox" id="quickFolderJump" data-setting="quickFolderJump"><span class="slider"></span></div>
</div>
</div>
</div>
</div><!-- /designSections -->
<!-- Footer --> <!-- Footer -->
<div class="or-footer"> <div class="or-footer">
<button id="exportBtn" title="Export settings as JSON">Export</button> <button id="exportBtn" title="Export settings as JSON">Export</button>

40
popup/popup.js
View File

@@ -3,14 +3,22 @@
(function () { (function () {
'use strict'; 'use strict';
// We need access to DEFAULTS and DENSITY_PRESETS from settings-defaults.js, // Defaults — must stay in sync with content/settings-defaults.js
// but popup runs in its own context. Duplicate the defaults here. // (popup runs in its own JS context, no access to content script globals)
// (Content scripts and popup don't share a JS context.)
var DEFAULTS = { var DEFAULTS = {
// Primary feature
keyboardMultiSelect: true,
// Design tweaks master toggle
enableDesignTweaks: false,
// Theme & Appearance
theme: 'swiss', theme: 'swiss',
colorScheme: 'system', colorScheme: 'system',
accentColor: '', accentColor: '',
// Density & Spacing
densityPreset: 'compact', densityPreset: 'compact',
compactTopBar: true, compactTopBar: true,
compactCommandBar: true, compactCommandBar: true,
@@ -21,6 +29,8 @@
compressComposeToolbar: true, compressComposeToolbar: true,
readingPaneMaxWidth: true, readingPaneMaxWidth: true,
unifiedHeader: false, unifiedHeader: false,
// Hide Elements
hideCopilot: true, hideCopilot: true,
hideSuggestedReplies: true, hideSuggestedReplies: true,
hidePromoBanners: true, hidePromoBanners: true,
@@ -33,11 +43,15 @@
hideVivaInsights: true, hideVivaInsights: true,
hideUnreadOtherBanner: true, hideUnreadOtherBanner: true,
hideActivityFeed: true, hideActivityFeed: true,
// Readability
unreadDistinction: true, unreadDistinction: true,
previewOwnLine: false, previewOwnLine: false,
normalizeFontWeight: true, normalizeFontWeight: true,
darkModeEmailFix: true, darkModeEmailFix: true,
messageListFontSize: 'medium', messageListFontSize: 'medium',
// Behavior
autoCollapseRibbon: true, autoCollapseRibbon: true,
rememberSidebarState: true, rememberSidebarState: true,
suppressContactHover: true, suppressContactHover: true,
@@ -47,7 +61,8 @@
stickyReplyBar: true, stickyReplyBar: true,
autoResizeCompose: true, autoResizeCompose: true,
throttleNotifications: false, throttleNotifications: false,
keyboardMultiSelect: true,
// Quick Actions
markAllReadButton: true, markAllReadButton: true,
quickFolderJump: true, quickFolderJump: true,
}; };
@@ -85,6 +100,13 @@
}, },
}; };
// --- Design sections visibility ---
var designSections = document.getElementById('designSections');
function updateDesignSectionsVisibility(enabled) {
designSections.style.display = enabled ? 'block' : 'none';
}
// --- Load settings and populate UI --- // --- Load settings and populate UI ---
function loadUI() { function loadUI() {
chrome.storage.sync.get(DEFAULTS, function (settings) { chrome.storage.sync.get(DEFAULTS, function (settings) {
@@ -117,6 +139,9 @@
// Version // Version
var manifest = chrome.runtime.getManifest(); var manifest = chrome.runtime.getManifest();
document.getElementById('version').textContent = 'v' + manifest.version; document.getElementById('version').textContent = 'v' + manifest.version;
// Show/hide design sections
updateDesignSectionsVisibility(settings.enableDesignTweaks);
}); });
} }
@@ -140,6 +165,11 @@
for (var c = 0; c < checkboxes.length; c++) { for (var c = 0; c < checkboxes.length; c++) {
checkboxes[c].addEventListener('change', function () { checkboxes[c].addEventListener('change', function () {
saveSetting(this.dataset.setting, this.checked); saveSetting(this.dataset.setting, this.checked);
// Toggle design sections visibility when master toggle changes
if (this.dataset.setting === 'enableDesignTweaks') {
updateDesignSectionsVisibility(this.checked);
}
}); });
} }
@@ -155,7 +185,6 @@
if (settingKey === 'densityPreset' && DENSITY_PRESETS[value]) { if (settingKey === 'densityPreset' && DENSITY_PRESETS[value]) {
var preset = DENSITY_PRESETS[value]; var preset = DENSITY_PRESETS[value];
chrome.storage.sync.set(preset); chrome.storage.sync.set(preset);
// Update checkboxes in the UI
var toggleKeys = Object.keys(preset); var toggleKeys = Object.keys(preset);
for (var p = 0; p < toggleKeys.length; p++) { for (var p = 0; p < toggleKeys.length; p++) {
var checkbox = document.getElementById(toggleKeys[p]); var checkbox = document.getElementById(toggleKeys[p]);
@@ -213,7 +242,6 @@
reader.onload = function (event) { reader.onload = function (event) {
try { try {
var imported = JSON.parse(event.target.result); var imported = JSON.parse(event.target.result);
// Only import known keys
var cleaned = {}; var cleaned = {};
var defaultKeys = Object.keys(DEFAULTS); var defaultKeys = Object.keys(DEFAULTS);
for (var i = 0; i < defaultKeys.length; i++) { for (var i = 0; i < defaultKeys.length; i++) {