# Outlook Relook

A Chrome extension that reskins Outlook Web App (outlook.office.com) with minimalist themes and granular control over visual clutter.

## Features

- **Switchable themes:** Swiss (Helvetica minimalism) and Material (clean, subtle elevation)
- **Light & Dark modes** with system preference detection
- **~40 granular toggles** for density, element hiding, readability, and behavior
- **MutationObserver** suppresses dynamically injected clutter (Copilot, banners, suggested replies)
- **Behavior patches:** auto-collapse ribbon, suppress contact hover cards, auto-advance after delete, toast management
- **Gmail-style keyboard navigation:** j/k to move, x/Space to multi-select, # delete, e archive, Shift+i/u read/unread, v move
- **Quick actions:** "Mark all as read" button, Ctrl+Shift+K folder jump
- **Settings sync** across Chrome instances via chrome.storage.sync
- **Export/Import/Reset** settings

## Install (Development)

1. Clone this repo
2. Open `chrome://extensions` in Chrome
3. Enable "Developer mode" (top-right toggle)
4. Click "Load unpacked" and select this directory
5. Open [outlook.office.com](https://outlook.office.com) — the extension activates automatically

## Usage

Click the extension icon to open the settings panel. Changes apply immediately — no page reload needed.

### Keyboard Shortcuts

**Message list (Gmail-style):**
- `j` / `Down Arrow` — Next message
- `k` / `Up Arrow` — Previous message
- `x` / `Space` — Toggle select
- `Shift+Down` / `Shift+Up` — Extend selection
- `#` — Delete selected
- `e` — Archive selected
- `Shift+i` — Mark read
- `Shift+u` — Mark unread
- `v` — Move to folder
- `Escape` — Deselect all
- `Enter` / `o` — Open message

**Global:**
- `Ctrl+Shift+K` (or `Cmd+Shift+K` on Mac) — Quick folder jump

## Development

No build step. Edit files, reload the extension at `chrome://extensions`, refresh the OWA tab.

- `themes/base.css` — density/spacing/hiding rules (always loaded)
- `themes/swiss.css` / `themes/material.css` — theme-specific styles
- `content/` — content scripts (observer, behavior, injector)
- `popup/` — settings panel
- `selectors-test.html` — offline selector verification

### Selector Strategy

OWA uses obfuscated class names. Selectors prioritize `aria-label`, `data-*`, and `role` attributes over class names. See `content/selectors.js` for the registry.

When selectors break after an OWA update, check the console for `[Outlook Relook]` warnings, inspect the live DOM, and update `selectors.js`.

## Adding a New Theme

1. Create `themes/yourtheme.css` — define the same CSS custom properties as `swiss.css`
2. Add an option to the theme dropdown in `popup/popup.html`
3. That's it — the content script handles injection automatically

## Adding a New Toggle

1. Add the key and default to `DEFAULTS` in both `content/settings-defaults.js` and `popup/popup.js`
2. Add the toggle HTML to the appropriate section in `popup/popup.html`
3. If CSS-based: add a `data-or-*` attribute mapping in `content/content.js` and the CSS rule in `themes/base.css`
4. If observer-based: add a selector entry to `content/selectors.js` and a mapping in `content/observer.js`
5. If behavior-based: add a setup function in `content/behavior.js`