diff --git a/src/_locales b/src/_locales index 0a88c3e..30aab7b 160000 --- a/src/_locales +++ b/src/_locales @@ -1 +1 @@ -Subproject commit 0a88c3ecc6e76fc4ad6650f25691cb6fa36b86ea +Subproject commit 30aab7b6d876f02d22186bb534e84eefd8e1a2da diff --git a/src/css/popup.css b/src/css/popup.css index 0f3cc9c..b0532b7 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -26,10 +26,18 @@ src: url("/fonts/Inter-Medium.woff2") format("woff2"); } +@font-face { + font-family: "Inter-SemiBold"; + font-style: normal; + font-weight: 700; + src: url("/fonts/Inter-SemiBold.woff2") format("woff2"); +} + [data-theme="light"], :root { --fontInter: "Inter", sans-serif; --fontInterMedium: "Inter-Medium", sans-serif; + --fontInterSemiBold: "Inter-SemiBold", sans-serif; --fontMetropolis: "Metropolis", sans-serif; --fontMetropolisLight: "Metropolis-Light", sans-serif; --iconArrowLeft: url("/img/arrow-icon-left.svg"); @@ -1651,8 +1659,20 @@ input[type=text] { background-color: var(--button-bg-hover-color-primary); } +#survey-achievement-done-button { + color: var(--button-bg-color-primary); + transition: color 0.1s ease; + font-size: 14px; + padding-inline: 3px; + padding-block: 1px; + border-radius: 1px; + text-align: center; + margin-inline: auto; +} + .onboarding-button:focus, -.half-onboarding-button:focus { +.half-onboarding-button:focus, +#survey-achievement-done-button:focus { box-shadow: 0 0 0 2px var(--button-bg-color-secondary), 0 0 0 4px var(--button-bg-focus-color-primary); @@ -2409,3 +2429,52 @@ tr:hover > td > .reset-button { .searchbar input { inline-size: 100%; } + +/* Survey Popup */ + +.survey-blurb, +#survey-panel h3.onboarding-title { + text-align: center; + margin-inline: auto; +} + +#survey-panel h3.onboarding-title { + max-inline-size: 100%; + font-family: var(--fontInterSemiBold); + line-height: 24px; + margin-block-end: 12px; +} + +#survey-panel { + padding-block: 40px; + padding-inline: 0; +} + +.survey-blurb { + margin-block-end: 16px; + margin-inline: 24px; +} + +#survey-img { + block-size: 180px; + margin-block-end: 16px; +} + +#survey-button { + padding-block: 4px; + padding-inline: 16px; + margin-block: 0 8px; + min-block-size: 32px; +} + +.share-ctas.survey-back { + margin-inline: auto; +} + +#survey-achievement-done-button:hover { + color: var(--button-bg-hover-color-primary); +} + +#survey-achievement-done-button:active { + color: var(--button-bg-active-color-primary); +} diff --git a/src/fonts/Inter-SemiBold.woff2 b/src/fonts/Inter-SemiBold.woff2 new file mode 100644 index 0000000..4ef2081 Binary files /dev/null and b/src/fonts/Inter-SemiBold.woff2 differ diff --git a/src/img/survey.svg b/src/img/survey.svg new file mode 100644 index 0000000..0016969 --- /dev/null +++ b/src/img/survey.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/js/background/messageHandler.js b/src/js/background/messageHandler.js index 1335d4d..3033843 100644 --- a/src/js/background/messageHandler.js +++ b/src/js/background/messageHandler.js @@ -257,6 +257,8 @@ const messageHandler = { browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"}); browser.browserAction.setBadgeText({text: "NEW"}); } + + this.maybePrepareSurveyAchievementOnUpdate(countOfContainerTabsOpened); }, async onFocusChangedCallback(windowId) { @@ -273,7 +275,34 @@ const messageHandler = { }).catch((e) => { throw e; }); - } + }, + + async maybePrepareSurveyAchievementOnUpdate(countOpened) { + if (countOpened < 10) { + return; + } + + // Show the survey only for English locales (en or en-*). + const uiLang = browser.i18n.getUILanguage(); + const lang = (uiLang || "").toLowerCase(); + if (lang !== "en" && !lang.startsWith("en-")) { + return; + } + + // Check if already scheduled in the past; if so, do not show again. + const achievementsStorage = await browser.storage.local.get({ achievements: [] }); + const achievements = achievementsStorage.achievements; + const existing = achievements.find(a => a.name === "surveyFinal"); + if (existing) { + return; + } + + // Ensure the achievement exists and is pending. + achievements.push({ name: "surveyFinal", done: false }); + browser.storage.local.set({ achievements }); + browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"}); + browser.browserAction.setBadgeText({text: "NEW"}); + }, }; // Lets do this last as theme manager did a check before connecting before diff --git a/src/js/popup.js b/src/js/popup.js index e2a1203..7b1f470 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -31,6 +31,7 @@ const P_CONTAINER_INFO = "containerInfo"; const P_CONTAINER_EDIT = "containerEdit"; const P_CONTAINER_DELETE = "containerDelete"; const P_CONTAINERS_ACHIEVEMENT = "containersAchievement"; +const P_SURVEY_ACHIEVEMENT = "surveyAchievement"; const P_CONTAINER_ASSIGNMENTS = "containerAssignments"; const P_CLEAR_CONTAINER_STORAGE = "clearContainerStorage"; @@ -147,6 +148,11 @@ const Logic = { return; } + if (achievement.name === "surveyFinal") { + this.showPanel(P_SURVEY_ACHIEVEMENT); + return; + } + // We have found an unknown achievement. Let's mark it as done. achievement.done = true; saveAchievements = true; @@ -2383,6 +2389,30 @@ Logic.registerPanel(P_CONTAINERS_ACHIEVEMENT, { }, }); +// P_SURVEY_ACHIEVEMENT: A simple survey view. +// ---------------------------------------------------------------------------- + +Logic.registerPanel(P_SURVEY_ACHIEVEMENT, { + panelSelector: ".survey-panel", + + // This method is called when the object is registered. + initialize() { + Utils.addEnterHandler(document.querySelector("#survey-achievement-done-button"), async () => { + await Logic.setAchievementDone("surveyFinal"); + Logic.showPanel(P_CONTAINERS_LIST); + }); + Utils.addEnterHandler(document.querySelector("#survey-button"), async () => { + await Logic.setAchievementDone("surveyFinal"); + window.close(); + }); + }, + + // This method is called when the panel is shown. + prepare() { + return Promise.resolve(null); + }, +}); + Logic.init(); window.addEventListener("resize", function () { diff --git a/src/popup.html b/src/popup.html index 5a87ae9..9a27223 100644 --- a/src/popup.html +++ b/src/popup.html @@ -106,6 +106,19 @@ +
+ + +

Help Improve Containers

+

Please take 5 minutes to share your experiences with the add-on! This will help us effectively prioritize improvements.

+

Learn more about the research here.

+

Thank you for using Multi-Account Containers!

+

+ Take Survey +

+ Back +
+