refactor: keyboard nav as primary feature, design tweaks behind experimental toggle
This commit is contained in:
Joel Brock
@@ -1,11 +1,14 @@
|
||||
// Outlook Relook — Content Script Entry Point
|
||||
//
|
||||
// Primary feature: Keyboard navigation (always active)
|
||||
// Experimental: Design tweaks (themes, density, hiding, behavior) — gated by enableDesignTweaks
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
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 = {
|
||||
compactTopBar: 'data-or-compact-topbar',
|
||||
compactCommandBar: 'data-or-compact-commandbar',
|
||||
@@ -34,11 +37,12 @@
|
||||
darkModeEmailFix: 'data-or-darkmode-fix',
|
||||
};
|
||||
|
||||
// Non-boolean attributes
|
||||
const SETTING_TO_ATTR_VALUE = {
|
||||
messageListFontSize: 'data-or-fontsize',
|
||||
};
|
||||
|
||||
let designTweaksActive = false;
|
||||
|
||||
function applyColorScheme(scheme) {
|
||||
let resolved = scheme;
|
||||
if (scheme === 'system') {
|
||||
@@ -48,34 +52,41 @@
|
||||
}
|
||||
|
||||
function applySettingsToDOM(settings) {
|
||||
// Boolean toggles -> data attributes
|
||||
for (const [key, attr] of Object.entries(SETTING_TO_ATTR)) {
|
||||
document.documentElement.setAttribute(attr, String(!!settings[key]));
|
||||
}
|
||||
|
||||
// Value-based attributes
|
||||
for (const [key, attr] of Object.entries(SETTING_TO_ATTR_VALUE)) {
|
||||
document.documentElement.setAttribute(attr, settings[key] || '');
|
||||
}
|
||||
|
||||
// Color scheme
|
||||
applyColorScheme(settings.colorScheme);
|
||||
|
||||
// Accent color
|
||||
if (settings.accentColor) {
|
||||
document.documentElement.style.setProperty('--or-accent-override', settings.accentColor);
|
||||
}
|
||||
|
||||
console.log('[Outlook Relook] Settings applied to DOM');
|
||||
}
|
||||
|
||||
function injectThemeCSS(theme) {
|
||||
// Remove existing theme stylesheet
|
||||
const existing = document.getElementById('outlook-relook-theme');
|
||||
if (existing) existing.remove();
|
||||
function clearDesignFromDOM() {
|
||||
// Remove all data-or-* attributes
|
||||
for (const attr of Object.values(SETTING_TO_ATTR)) {
|
||||
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
|
||||
const link = document.createElement('link');
|
||||
// Remove injected theme CSS
|
||||
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.rel = 'stylesheet';
|
||||
link.href = chrome.runtime.getURL('themes/' + theme + '.css');
|
||||
@@ -83,48 +94,60 @@
|
||||
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() {
|
||||
const settings = await OR.loadSettings();
|
||||
console.log('[Outlook Relook] Loaded settings:', settings);
|
||||
|
||||
applySettingsToDOM(settings);
|
||||
injectThemeCSS(settings.theme);
|
||||
|
||||
// Start the MutationObserver
|
||||
OR.Observer.start(settings);
|
||||
|
||||
// Apply behavior patches
|
||||
OR.Behavior.start(settings);
|
||||
|
||||
// Start keyboard navigation
|
||||
// Keyboard navigation — always starts (gated by its own toggle internally)
|
||||
OR.Keyboard.start(settings);
|
||||
|
||||
// Start DOM injector (quick actions)
|
||||
OR.Injector.start(settings);
|
||||
// Design tweaks — only if enabled
|
||||
if (settings.enableDesignTweaks) {
|
||||
startDesignTweaks(settings);
|
||||
}
|
||||
|
||||
// Listen for setting changes from popup
|
||||
chrome.storage.onChanged.addListener((changes, area) => {
|
||||
if (area !== 'sync') return;
|
||||
|
||||
// Build updated settings object
|
||||
OR.loadSettings().then((updated) => {
|
||||
applySettingsToDOM(updated);
|
||||
|
||||
// Update observer with new settings
|
||||
OR.Observer.updateSettings(updated);
|
||||
|
||||
// Update behavior patches
|
||||
OR.Behavior.updateSettings(updated);
|
||||
|
||||
// Update keyboard navigation
|
||||
// Keyboard — always update
|
||||
OR.Keyboard.updateSettings(updated);
|
||||
|
||||
// Update injector
|
||||
OR.Injector.updateSettings(updated);
|
||||
|
||||
// Swap theme CSS if theme changed
|
||||
if (changes.theme) {
|
||||
injectThemeCSS(changes.theme.newValue);
|
||||
// Design tweaks — toggle on/off or update
|
||||
if (updated.enableDesignTweaks) {
|
||||
if (!designTweaksActive) {
|
||||
startDesignTweaks(updated);
|
||||
} else {
|
||||
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
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', async () => {
|
||||
const settings = await OR.loadSettings();
|
||||
if (settings.colorScheme === 'system') {
|
||||
if (settings.enableDesignTweaks && settings.colorScheme === 'system') {
|
||||
applyColorScheme('system');
|
||||
}
|
||||
});
|
||||
|
||||
@@ -4,6 +4,12 @@
|
||||
window.OutlookRelook = window.OutlookRelook || {};
|
||||
|
||||
window.OutlookRelook.DEFAULTS = {
|
||||
// Keyboard Navigation (primary feature, always visible)
|
||||
keyboardMultiSelect: true,
|
||||
|
||||
// Design Tweaks (experimental, hidden by default)
|
||||
enableDesignTweaks: false,
|
||||
|
||||
// Theme & Appearance
|
||||
theme: 'swiss',
|
||||
colorScheme: 'system', // 'light' | 'dark' | 'system'
|
||||
@@ -53,9 +59,6 @@ window.OutlookRelook.DEFAULTS = {
|
||||
autoResizeCompose: true,
|
||||
throttleNotifications: false,
|
||||
|
||||
// Keyboard Navigation
|
||||
keyboardMultiSelect: true,
|
||||
|
||||
// Quick Actions
|
||||
markAllReadButton: true,
|
||||
quickFolderJump: true,
|
||||
|
||||
Reference in New Issue
Block a user