diff --git a/src/choice-screen.js b/src/choice-screen.js index 8c3de78..8c21b44 100644 --- a/src/choice-screen.js +++ b/src/choice-screen.js @@ -1,6 +1,6 @@ async function onboarding() { const { isOnboardingCompleted } = await browser.storage.local.get("isOnboardingCompleted"); - if (!isOnboardingCompleted) { + if (DEBUG || !isOnboardingCompleted) { await browser.tabs.create({ url: browser.extension.getURL('pages/choice-screen.html'), }); diff --git a/src/manifest.json b/src/manifest.json index 9ee95b4..091e814 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,5 +1,5 @@ { - "version": "0.1.5", + "version": "0.1.6", "browser_specific_settings": { "gecko": { "id": "search@ghostery.com" diff --git a/src/pages/choice-screen.html b/src/pages/choice-screen.html index a38d380..952d822 100644 --- a/src/pages/choice-screen.html +++ b/src/pages/choice-screen.html @@ -37,6 +37,9 @@ color: #4a4a4a; font-family: Roboto; } + body { + position: relative; + } .header { text-align: left; } @@ -72,6 +75,7 @@ } } .engine { + cursor: pointer; float: left; display: flex; width: 343px; @@ -119,6 +123,73 @@ height: 37px; margin-bottom: 8px; } + .modal { + top: 60px; + margin: 0 auto; + left: 0; + right: 0; + position: absolute; + box-sizing: border-box; + width: 902px; + max-width: 902px; + border: 1px solid #4A4A4A; + background-color: #FFFFFF; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5); + } + .modal-content .engine-logo { + height: 58px; + margin-bottom: 71px; + } + .modal-content p { + width: 528px; + color: #4A4A4A; + font-family: Roboto; + font-size: 24px; + font-weight: 500; + letter-spacing: 0; + line-height: 42px; + text-align: center; + margin: 0 auto; + } + .cancel-button { + box-sizing: border-box; + height: 44px; + width: 161.92px; + border: 2px solid #4A4A4A; + border-radius: 3.52px; + background-color: transparent; + color: #4A4A4A; + font-family: Roboto; + font-size: 14.08px; + font-weight: bold; + letter-spacing: 0; + line-height: 16px; + margin: 0 10px; + cursor: pointer; + } + .confirm-button { + height: 44px; + width: 161.92px; + border-radius: 3.52px; + border: 0; + background: linear-gradient(131.66deg, #FF7E74 0%, #00AEF0 100%); + color: #FFFFFF; + font-family: Roboto; + font-size: 14.08px; + font-weight: bold; + letter-spacing: 0; + line-height: 16px; + text-align: center; + margin: 0 10px; + cursor: pointer; + } + .buttons { + margin-top: 71px; + margin-bottom: 71px; + } + .hidden { + display: none; + } @@ -129,7 +200,7 @@

Welcome! Choose your default search

Pick a default search engine for all your searches.

- +
@@ -141,7 +212,7 @@

Pick a default search engine for all your searches.

 - +
@@ -152,7 +223,7 @@

Pick a default search engine for all your searches.

 - +
@@ -163,7 +234,7 @@

Pick a default search engine for all your searches.

 - +
@@ -176,5 +247,65 @@

Pick a default search engine for all your searches.
+ + + + \ No newline at end of file diff --git a/src/pages/common.js b/src/pages/common.js index 7188662..dab0157 100644 --- a/src/pages/common.js +++ b/src/pages/common.js @@ -2,14 +2,36 @@ document.addEventListener('DOMContentLoaded', () => { const engines = [...document.querySelectorAll('.engine')]; engines.forEach(engine => { engine.addEventListener('click', async () => { - const name = engine.dataset.name; - await browser.ghostery.setDefaultSearchEngine(name); - const currentTab = await browser.tabs.getCurrent(); - await browser.storage.local.set({ - isOnboardingCompleted: true, - }); - await browser.tabs.create({}); - browser.tabs.remove(currentTab.id); + const name = engine.dataset.modal; + const modal = document.querySelector(`#${name}-modal`); + modal.classList.remove('hidden'); }); }); -}); \ No newline at end of file + + const cancelButtons = [...document.querySelectorAll('.modal .cancel-button')]; + cancelButtons.forEach(button => { + button.addEventListener('click', closeModals); + }); + const confirmButtons = [...document.querySelectorAll('.modal .confirm-button')]; + confirmButtons.forEach(button => { + const name = button.dataset.name; + button.addEventListener('click', selectSearchEngine.bind(null, name)); + }); +}); + +async function selectSearchEngine(name) { + await browser.ghostery.setDefaultSearchEngine(name); + const currentTab = await browser.tabs.getCurrent(); + await browser.storage.local.set({ + isOnboardingCompleted: true, + }); + await browser.tabs.create({}); + browser.tabs.remove(currentTab.id); +} + +function closeModals() { + const modals = [...document.querySelectorAll('.modal')]; + modals.forEach(modal => { + modal.classList.add('hidden'); + }); +} \ No newline at end of file