From ab97952e843bc353b2e1b84e69bfee67ccb938bb Mon Sep 17 00:00:00 2001 From: Lawrence Hook Date: Wed, 4 Feb 2026 19:15:03 -0500 Subject: [PATCH] feat: change analytics from opt-out to opt-in - Add non-blocking bottom banner prompting users to enable logging - Default log_enabled to false, track user response with log_prompt_answered - Banner shows until user clicks Sure/No thanks, dismiss hides for session only - Update settings menu icon from dots to gear - Widen sidebar to prevent "Video Player" text wrapping Co-Authored-By: Claude Opus 4.5 --- src/options/body.css | 71 +++++++++++++++++++++++++++++- src/options/feedback/feedback.html | 2 +- src/options/header.css | 12 +++-- src/options/main.html | 20 ++++++--- src/options/main.js | 30 +++++++++++++ src/shared/analytics.js | 2 +- src/shared/main.js | 4 +- 7 files changed, 127 insertions(+), 14 deletions(-) diff --git a/src/options/body.css b/src/options/body.css index a0b251d..2986753 100644 --- a/src/options/body.css +++ b/src/options/body.css @@ -390,6 +390,75 @@ html[foo=bar] { } +/* Logging Opt-in Banner */ +#log_prompt_banner { + position: fixed; + bottom: 8px; + left: 8px; + right: 8px; + z-index: 100; + + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + + background: var(--body-color); + border-radius: var(--border-radius); + font-size: 12px; + opacity: 0.9; +} + +#log_prompt_banner * { + color: var(--body-background-color); +} + +#log_prompt_text { + flex: 1; +} + +#log_prompt_buttons { + display: flex; + gap: 6px; +} + +#log_prompt_buttons button { + padding: 4px 10px; + border: none; + border-radius: var(--border-radius); + font-size: 12px; + cursor: pointer; +} + +#log_prompt_yes { + background-color: var(--body-background-color); + color: var(--body-color) !important; +} + +#log_prompt_no { + background-color: transparent; + border: 1px solid var(--box-shadow-color) !important; +} + +#log_prompt_buttons button:hover { + opacity: 0.85; +} + +#log_prompt_dismiss { + background: none; + border: none; + font-size: 16px; + cursor: pointer; + padding: 0 4px; + opacity: 0.7; + line-height: 1; +} + +#log_prompt_dismiss:hover { + opacity: 1; +} + + /* Menu Timer */ #timer_container { position: fixed; @@ -439,7 +508,7 @@ html[foo=bar] { #sidebar { height: calc(6px + var(--body-height)); - width: 140px; + width: 160px; padding: 8px 6px; overflow: hidden; diff --git a/src/options/feedback/feedback.html b/src/options/feedback/feedback.html index b7535b0..29d18d5 100644 --- a/src/options/feedback/feedback.html +++ b/src/options/feedback/feedback.html @@ -115,7 +115,7 @@
Screenshot - A visual helps a lot + If possible, attach a screenshot
Browser diff --git a/src/options/header.css b/src/options/header.css index ee75725..2c80ece 100644 --- a/src/options/header.css +++ b/src/options/header.css @@ -3,13 +3,17 @@ html[dark_mode='false'] { --svg-color: #464646 } html[dark_mode='true'] { --svg-color: #E9E9E9 } -#header-settings circle, #header-toggle path, .dark_mode circle, .dark_mode path { fill: var(--svg-color); } +#header-settings path, +#header-settings circle { + stroke: var(--svg-color); +} + /* Dark mode styling */ html[dark_mode='true'] #header-dark { display: none } html[dark_mode='false'] #header-light { display: none } @@ -169,9 +173,9 @@ html[foo=bar] } #header-settings { cursor: pointer; - height: var(--icon-dim); - max-height: var(--icon-dim); - max-width: var(--icon-dim); + height: calc(var(--icon-dim) - 6px); + max-height: calc(var(--icon-dim) - 6px); + max-width: calc(var(--icon-dim) - 6px); } #settings-menu { font-size: 14px; diff --git a/src/options/main.html b/src/options/main.html index de224c3..d78e89b 100644 --- a/src/options/main.html +++ b/src/options/main.html @@ -121,6 +121,15 @@
+ +
Menu Timer
@@ -142,8 +151,8 @@ Manage History Manage History — Advanced
-
Re-enable logging
-
Opt-out of logging
+
Enable logging
+
Disable logging
View Source Code Give Feedback @@ -203,10 +212,9 @@
- - - - + + + diff --git a/src/options/main.js b/src/options/main.js index 56ddd5d..564e2b7 100644 --- a/src/options/main.js +++ b/src/options/main.js @@ -35,6 +35,11 @@ document.addEventListener("DOMContentLoaded", () => { return acc; }, {}); + // Show logging opt-in modal if user hasn't responded yet + if (!localSettings.log_prompt_answered) { + showLogPrompt(); + } + browser.tabs.query({ currentWindow: true, active: true }, tabs => { if (!tabs || tabs.length === 0) return; const [{ url }] = tabs; @@ -439,3 +444,28 @@ function initAnnouncementBanner() { })); }); } + + +// Logging opt-in banner +function showLogPrompt() { + const banner = document.getElementById('log_prompt_banner'); + const yesBtn = document.getElementById('log_prompt_yes'); + const noBtn = document.getElementById('log_prompt_no'); + const dismissBtn = document.getElementById('log_prompt_dismiss'); + + banner.hidden = false; + + yesBtn.addEventListener('click', () => { + browser.storage.local.set({ log_enabled: true, log_prompt_answered: true }); + banner.hidden = true; + }); + + noBtn.addEventListener('click', () => { + browser.storage.local.set({ log_enabled: false, log_prompt_answered: true }); + banner.hidden = true; + }); + + dismissBtn.addEventListener('click', () => { + banner.hidden = true; + }); +} diff --git a/src/shared/analytics.js b/src/shared/analytics.js index 66aa761..7598b6e 100644 --- a/src/shared/analytics.js +++ b/src/shared/analytics.js @@ -4,7 +4,7 @@ for(h=0;h