diff --git a/README.md b/README.md index 9e4a17b..480736d 100644 --- a/README.md +++ b/README.md @@ -113,6 +113,8 @@ Finally, we also publish the release to GitHub for those followers. ### Links +Facebook & Twitter icons CC-Attrib http://fairheadcreative.com. + - [Licence](./LICENSE.txt) - [Contributing](./CONTRIBUTING.md) - [Code Of Conduct](./CODE_OF_CONDUCT.md) diff --git a/webextension/css/popup.css b/webextension/css/popup.css index 845d519..af78306 100644 --- a/webextension/css/popup.css +++ b/webextension/css/popup.css @@ -242,7 +242,8 @@ table { min-block-size: 400px; } -.panel.onboarding { +.panel.onboarding, +.achievement-panel { align-items: center; block-size: 360px; margin-block-end: 16px; @@ -887,3 +888,53 @@ span ~ .panel-header-text { font-size: 14px !important; padding-block-end: 6px; } + +/* Achievement panel elements */ +.share-ctas { + padding-block-end: 0.5em; + padding-block-start: 0.5em; + padding-inline-end: 0.5em; + padding-inline-start: 0.5em; + text-align: center; +} + +.cta-link { + text-decoration: none; +} + +.cta { + color: #fff; + font-size: 0.7em; + font-weight: bold; + margin-block-end: 0.4em; + margin-block-start: 0.4em; + margin-inline-end: 0.4em; + margin-inline-start: 0.4em; + padding-block-end: 0.5em; + padding-block-start: 0.5em; + padding-inline-end: 0.5em; + padding-inline-start: 0.5em; + text-transform: uppercase; +} + +.cta-icon { + height: 18px; + padding-right: 0.5em; + vertical-align: middle; +} + +.fb-share-cta { + background: #375496; +} + +.fb-share-cta .cta-icon { + margin-block-start: -5px; +} + +.tweet-cta { + background: #37bae7; +} + +.amo-rate-cta { + background: #0f1126; +} diff --git a/webextension/img/amo-icon.svg b/webextension/img/amo-icon.svg new file mode 100644 index 0000000..69357cf --- /dev/null +++ b/webextension/img/amo-icon.svg @@ -0,0 +1 @@ + Created with Sketch. \ No newline at end of file diff --git a/webextension/img/webicon-facebook.svg b/webextension/img/webicon-facebook.svg new file mode 100755 index 0000000..39a3cae --- /dev/null +++ b/webextension/img/webicon-facebook.svg @@ -0,0 +1,14 @@ + + + + + + + + + + diff --git a/webextension/img/webicon-twitter.svg b/webextension/img/webicon-twitter.svg new file mode 100755 index 0000000..6b05f3f --- /dev/null +++ b/webextension/img/webicon-twitter.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + diff --git a/webextension/js/background/messageHandler.js b/webextension/js/background/messageHandler.js index d791d70..1971953 100644 --- a/webextension/js/background/messageHandler.js +++ b/webextension/js/background/messageHandler.js @@ -115,7 +115,7 @@ const messageHandler = { // Don't count firefox-default, firefox-private, nor our own confirm page loads if (tab.cookieStoreId !== "firefox-default" && tab.cookieStoreId !== "firefox-private" && - tab.url.indexOf("confirm-page.html") === -1) { + !tab.url.startsWith("moz-extension")) { // increment the counter of container tabs opened this.incrementCountOfContainerTabsOpened(); } @@ -130,14 +130,20 @@ const messageHandler = { async incrementCountOfContainerTabsOpened() { const key = "containerTabsOpened"; - const count = await browser.storage.local.get(key); - let countOfContainerTabsOpened = count[key]; - if (countOfContainerTabsOpened === null) { - countOfContainerTabsOpened = 1; - } else { - countOfContainerTabsOpened += 1; - } + const count = await browser.storage.local.get({[key]: 0}); + const countOfContainerTabsOpened = ++count[key]; browser.storage.local.set({[key]: countOfContainerTabsOpened}); + + // When the user opens their _ tab, give them the achievement + if (countOfContainerTabsOpened === 100) { + const storage = await browser.storage.local.get({achievements: []}); + storage.achievements.push({"name": "manyContainersOpened", "done": false}); + // use set and spread to create a unique array + const achievements = [...new Set(storage.achievements)]; + browser.storage.local.set({achievements}); + browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"}); + browser.browserAction.setBadgeText({text: "NEW"}); + } }, async unhideContainer(cookieStoreId) { diff --git a/webextension/js/popup.js b/webextension/js/popup.js index 394ddde..37666c1 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -22,6 +22,7 @@ const P_CONTAINERS_EDIT = "containersEdit"; const P_CONTAINER_INFO = "containerInfo"; const P_CONTAINER_EDIT = "containerEdit"; const P_CONTAINER_DELETE = "containerDelete"; +const P_CONTAINERS_ACHIEVEMENT = "containersAchievement"; /** * Escapes any occurances of &, ", <, > or / with XML entities. @@ -90,8 +91,8 @@ const Logic = { // Routing to the correct panel. // If localStorage is disabled, we don't show the onboarding. - const data = await browser.storage.local.get([ONBOARDING_STORAGE_KEY]); - let onboarded = data[ONBOARDING_STORAGE_KEY]; + const onboardingData = await browser.storage.local.get([ONBOARDING_STORAGE_KEY]); + let onboarded = onboardingData[ONBOARDING_STORAGE_KEY]; if (!onboarded) { onboarded = 0; this.setOnboardingStage(onboarded); @@ -99,7 +100,7 @@ const Logic = { switch (onboarded) { case 5: - this.showPanel(P_CONTAINERS_LIST); + this.showAchievementOrContainersListPanel(); break; case 4: this.showPanel(P_ONBOARDING_5); @@ -121,6 +122,37 @@ const Logic = { }, + async showAchievementOrContainersListPanel() { + // Do we need to show an achievement panel? + let showAchievements = false; + const achievementsStorage = await browser.storage.local.get({achievements: []}); + for (const achievement of achievementsStorage.achievements) { + if (!achievement.done) { + showAchievements = true; + } + } + if (showAchievements) { + this.showPanel(P_CONTAINERS_ACHIEVEMENT); + } else { + this.showPanel(P_CONTAINERS_LIST); + } + }, + + // In case the user wants to click multiple actions, + // they have to click the "Done" button to stop the panel + // from showing + async setAchievementDone(achievementName) { + const achievementsStorage = await browser.storage.local.get({achievements: []}); + const achievements = achievementsStorage.achievements; + achievements.forEach((achievement, index, achievementsArray) => { + if (achievement.name === achievementName) { + achievement.done = true; + achievementsArray[index] = achievement; + } + }); + browser.storage.local.set({achievements}); + }, + setOnboardingStage(stage) { return browser.storage.local.set({ [ONBOARDING_STORAGE_KEY]: stage @@ -1015,4 +1047,25 @@ Logic.registerPanel(P_CONTAINER_DELETE, { }, }); +// P_CONTAINERS_ACHIEVEMENT: Page for achievement. +// ---------------------------------------------------------------------------- + +Logic.registerPanel(P_CONTAINERS_ACHIEVEMENT, { + panelSelector: ".achievement-panel", + + // This method is called when the object is registered. + initialize() { + // Set done and move to the containers list panel. + Logic.addEnterHandler(document.querySelector("#achievement-done-button"), async function () { + await Logic.setAchievementDone("manyContainersOpened"); + Logic.showPanel(P_CONTAINERS_LIST); + }); + }, + + // This method is called when the panel is shown. + prepare() { + return Promise.resolve(null); + }, +}); + Logic.init(); diff --git a/webextension/popup.html b/webextension/popup.html index 5a78320..8cde498 100644 --- a/webextension/popup.html +++ b/webextension/popup.html @@ -67,6 +67,34 @@ Done +
+ You achieved a Containers milestone! +

100 tabs!

+

You've opened 100 Container tabs.

+

If you enjoy Containers, help us spread the word!

+

+ + + addons.mozilla.org Icon + Rate + + + + + Facebook Icon + Share + + + + + Twitter Icon + Tweet + + +

+ Done +
+

Current Tab