From cca7940dd99682bea896b39969bb4e44dc001518 Mon Sep 17 00:00:00 2001 From: cottongin Date: Wed, 26 Aug 2026 15:32:33 -0400 Subject: [PATCH] fix: subreddit badge fill, tagline 'to' cleanup, and comments li spacing - Default subreddit badge background from transparent to opaque fill (light: #fde8e0, dark: #3d2518) so page highlights don't bleed through - Remove lingering "to" text node from tagline when subreddit is hidden - Hide the
  • wrapping the comments link (not just the ) to eliminate leftover whitespace in the flat-list - Simplify popup: subreddit bg fields are now color pickers (no longer need transparent text-input workaround) Co-authored-by: Cursor --- chat-summaries/2026-08-26_14-07-summary.md | 40 ++++++++++++++++++++++ content/styles/badges.css | 6 ++-- content/tweaks/badges.js | 5 +++ lib/settings.js | 4 +-- popup/popup.html | 4 +-- popup/popup.js | 29 ++-------------- 6 files changed, 55 insertions(+), 33 deletions(-) create mode 100644 chat-summaries/2026-08-26_14-07-summary.md diff --git a/chat-summaries/2026-08-26_14-07-summary.md b/chat-summaries/2026-08-26_14-07-summary.md new file mode 100644 index 0000000..5667f0b --- /dev/null +++ b/chat-summaries/2026-08-26_14-07-summary.md @@ -0,0 +1,40 @@ +# Firefox Reddit Tweaks Extension — Full Build + +**Date:** 2026-08-26 + +## Task + +Design and implement a Firefox extension that reskins old Reddit post listings by moving subreddit names and comment counts into styled badge elements above each post title. + +## Process + +1. **Brainstorming** — Explored requirements via mockup analysis and clarifying questions (old Reddit only, all pages, user-configurable colors with per-subreddit overrides, light/dark mode) +2. **Design spec** — Written, self-reviewed, committed (`docs/superpowers/specs/2026-08-26-reddit-badge-tweaks-design.md`) +3. **Adversarial review** — Found and resolved 9 gaps (div.thing selector, shared module loading, FOUC, teardown logic, dark mode timing, observer target, comment text parsing, permissions, storage quotas) +4. **Implementation plan** — 4 tasks, committed (`docs/superpowers/plans/2026-08-26-reddit-badge-tweaks.md`) +5. **Subagent-driven execution** — Each task dispatched to implementer, then reviewed: + - Task 1: Manifest + settings module + icons + - Task 2: Badge CSS with FOUC prevention + - Task 3: Badge DOM manipulation with MutationObservers + - Task 4: Settings popup UI +6. **Final review** — Found 1 Critical (disabled-state hides UI), 2 Important (shallow merge, fire-and-forget saves). All fixed. + +## Files Created + +- `manifest.json` — Extension manifest (MV2) +- `lib/settings.js` — Settings read/write module +- `content/styles/badges.css` — Badge styling + FOUC prevention +- `content/tweaks/badges.js` — DOM manipulation + observers +- `content/main.js` — Entry point + storage listener +- `popup/popup.html` — Settings UI +- `popup/popup.css` — Settings styling +- `popup/popup.js` — Settings logic +- `icons/icon-48.png`, `icons/icon-96.png` — Placeholder icons + +## Follow-up Items + +- Manual QA in Firefox via `about:debugging` (test checklist in spec, items 1-15) +- Replace placeholder icons with proper design +- Optional: extract subreddit name helper for DRY +- Optional: add error handling to `loadSettings()` / `init()` +- Optional: support transparent backgrounds in per-subreddit overrides diff --git a/content/styles/badges.css b/content/styles/badges.css index 28ab4a8..d258f7f 100644 --- a/content/styles/badges.css +++ b/content/styles/badges.css @@ -1,6 +1,6 @@ /* --- FOUC prevention: hide original elements immediately --- */ html.rt-enabled .thing.link .tagline .subreddit, -html.rt-enabled .thing.link .flat-list .comments { +html.rt-enabled .thing.link .flat-list li:has(> .comments) { display: none !important; } @@ -30,7 +30,7 @@ html.rt-enabled .thing.link .flat-list .comments { /* --- Light mode (default) --- */ .rt-badge--subreddit { - background: var(--rt-sub-bg, transparent); + background: var(--rt-sub-bg, #fde8e0); border-color: var(--rt-sub-border, #c84a20); color: var(--rt-sub-text, #c84a20); } @@ -43,7 +43,7 @@ html.rt-enabled .thing.link .flat-list .comments { /* --- Dark mode --- */ .rt-dark .rt-badge--subreddit { - background: var(--rt-sub-bg, transparent); + background: var(--rt-sub-bg, #3d2518); border-color: var(--rt-sub-border, #ff6b3d); color: var(--rt-sub-text, #ff6b3d); } diff --git a/content/tweaks/badges.js b/content/tweaks/badges.js index 094c27d..b4f46dd 100644 --- a/content/tweaks/badges.js +++ b/content/tweaks/badges.js @@ -59,6 +59,11 @@ badge.textContent = subLink.textContent.trim(); subredditName = subLink.textContent.trim().replace(/^r\//, ""); container.appendChild(badge); + + const prevNode = subLink.previousSibling; + if (prevNode && prevNode.nodeType === Node.TEXT_NODE && /\bto\s*$/.test(prevNode.textContent)) { + prevNode.textContent = prevNode.textContent.replace(/\s*to\s*$/, " "); + } } const commentsLink = post.querySelector(".flat-list .comments"); diff --git a/lib/settings.js b/lib/settings.js index 0cbf8e2..61b56f7 100644 --- a/lib/settings.js +++ b/lib/settings.js @@ -4,13 +4,13 @@ const DEFAULTS = { enabled: true, darkMode: "auto", - "light.subredditBgColor": "transparent", + "light.subredditBgColor": "#fde8e0", "light.subredditBorderColor": "#c84a20", "light.subredditTextColor": "#c84a20", "light.commentsBgColor": "#e0e0e0", "light.commentsBorderColor": "#4a4a4a", "light.commentsTextColor": "#4a4a4a", - "dark.subredditBgColor": "transparent", + "dark.subredditBgColor": "#3d2518", "dark.subredditBorderColor": "#ff6b3d", "dark.subredditTextColor": "#ff6b3d", "dark.commentsBgColor": "#3a3a3a", diff --git a/popup/popup.html b/popup/popup.html index 49944fc..16c11c0 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -28,7 +28,7 @@

    Light Mode Colors

    Subreddit Badge - +
    @@ -45,7 +45,7 @@

    Dark Mode Colors

    Subreddit Badge - +
    diff --git a/popup/popup.js b/popup/popup.js index c012f0e..dc2f250 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -2,11 +2,13 @@ "use strict"; const COLOR_KEYS = [ + "light.subredditBgColor", "light.subredditBorderColor", "light.subredditTextColor", "light.commentsBgColor", "light.commentsBorderColor", "light.commentsTextColor", + "dark.subredditBgColor", "dark.subredditBorderColor", "dark.subredditTextColor", "dark.commentsBgColor", @@ -14,13 +16,8 @@ "dark.commentsTextColor", ]; - const BG_KEYS = [ - "light.subredditBgColor", - "dark.subredditBgColor", - ]; - function colorToHex(val) { - if (!val || val === "transparent") return "#ffffff"; + if (!val) return "#ffffff"; return val; } @@ -33,14 +30,6 @@ if (el) el.value = colorToHex(settings[key]); }); - BG_KEYS.forEach(function (key) { - const el = document.getElementById(key); - if (el) { - el.value = settings[key] === "transparent" ? "" : settings[key]; - el.placeholder = "transparent"; - } - }); - renderSubredditOverrides(settings.subredditColors || {}); } @@ -127,13 +116,6 @@ if (el) settings[key] = el.value; }); - BG_KEYS.forEach(function (key) { - const el = document.getElementById(key); - if (el) { - settings[key] = el.value.trim() || "transparent"; - } - }); - try { await window.RedditTweaks.saveSettings(settings); } catch (err) { @@ -153,11 +135,6 @@ if (el) el.addEventListener("input", saveFromControls); }); - BG_KEYS.forEach(function (key) { - const el = document.getElementById(key); - if (el) el.addEventListener("input", saveFromControls); - }); - document.getElementById("addSubreddit").addEventListener("click", function () { addSubredditEntry("", {}); });