diff --git a/webextension/css/popup.css b/webextension/css/popup.css
index f81f463..6edbabf 100644
--- a/webextension/css/popup.css
+++ b/webextension/css/popup.css
@@ -8,6 +8,10 @@ table {
margin-bottom: 0;
}
+.onboarding * {
+ text-align: center;
+}
+
.popup-bumper {
width: 100%;
padding: .5em;
diff --git a/webextension/img/onboarding-1.png b/webextension/img/onboarding-1.png
new file mode 100644
index 0000000..afd54d4
Binary files /dev/null and b/webextension/img/onboarding-1.png differ
diff --git a/webextension/img/onboarding-2.png b/webextension/img/onboarding-2.png
new file mode 100644
index 0000000..cd648ac
Binary files /dev/null and b/webextension/img/onboarding-2.png differ
diff --git a/webextension/js/popup.js b/webextension/js/popup.js
index 0978b12..fb3fbd2 100644
--- a/webextension/js/popup.js
+++ b/webextension/js/popup.js
@@ -1,4 +1,4 @@
-/* global browser, window, document */
+/* global browser, window, document, localStorage */
const CONTAINER_HIDE_SRC = '/img/container-hide.svg';
const CONTAINER_UNHIDE_SRC = '/img/container-unhide.svg';
@@ -40,6 +40,33 @@ function showContainerTabs(containerId) {
hideorshowIcon.src = CONTAINER_HIDE_SRC;
}
+if (localStorage.getItem('onboarded2')) {
+ for (const element of document.querySelectorAll('.onboarding')) {
+ element.classList.add('hide');
+ }
+ document.querySelector('#container-panel').classList.remove('hide');
+} else if (localStorage.getItem('onboarded1')) {
+ document.querySelector('.onboarding-panel-1').classList.add('hide');
+ document.querySelector('#container-panel').classList.add('hide');
+} else {
+ document.querySelector('.onboarding-panel-2').classList.add('hide');
+ document.querySelector('#container-panel').classList.add('hide');
+}
+
+document.querySelector('#onboarding-next-button').addEventListener('click', ()=> {
+ localStorage.setItem('onboarded1', true);
+ document.querySelector('.onboarding-panel-2').classList.remove('hide');
+ document.querySelector('.onboarding-panel-1').classList.add('hide');
+ document.querySelector('#container-panel').classList.add('hide');
+});
+
+document.querySelector('#onboarding-done-button').addEventListener('click', ()=> {
+ localStorage.setItem('onboarded2', true);
+ document.querySelector('.onboarding-panel-1').classList.add('hide');
+ document.querySelector('.onboarding-panel-2').classList.add('hide');
+ document.querySelector('#container-panel').classList.remove('hide');
+});
+
browser.runtime.sendMessage({method: 'query'}).then(identities=> {
const identitiesListElement = document.querySelector('.identities-list');
@@ -101,9 +128,8 @@ browser.runtime.sendMessage({method: 'query'}).then(identities=> {
});
});
-
document.querySelector('#edit-containers-link').addEventListener('click', ()=> {
- browser.runtime.sendMessage('open-containers-preferences').then(()=> {
+ browser.runtime.sendMessage({method: 'open-containers-preferences'}).then(()=> {
window.close();
});
});
diff --git a/webextension/popup.html b/webextension/popup.html
index 4b69a48..725f234 100644
--- a/webextension/popup.html
+++ b/webextension/popup.html
@@ -6,23 +6,46 @@
- 
- 
+ 
+ 
+