[Issue#115] : add onboarding page when extension is first installed

_locales/en/messages.json

@@ -29,5 +29,14 @@
     "enableDarkTheme": {
         "message": "Dark mode",
         "description": "This text is displayed in the popup when the extension icon is clicked"
+    },
+
+    "thankInstallation": {
+        "message": "Thank you for installing Survol",
+        "description": "Text displayed on the onboarding page on installation"
+    },
+    "survolUpdated": {
+        "message": "Survol has been updated",
+        "description": "Text displayed on the onboarding page on update"
     }
 }

_locales/fr/messages.json

@@ -29,5 +29,14 @@
     "enableDarkTheme": {
         "message": "Mode sombre",
         "description": "This text is displayed in the popup when the extension icon is clicked"
+    },
+
+    "thankInstallation": {
+        "message": "Merci d'avoir installé Survol",
+        "description": "Text displayed on the onboarding page on installation"
+    },
+    "survolUpdated": {
+        "message": "Survol a été mis à jour",
+        "description": "Text displayed on the onboarding page on update"
     }
 }

css/onboarding/onboarding.css

@@ -0,0 +1,173 @@
+body {
+    text-align: center;
+    margin: 0px;
+    font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
+    transition: ease-in-out 0.2s;
+}
+
+body.dark-theme {
+    background-color: rgb(24, 26, 27);
+    color: white!important;
+}
+
+.extension-container {
+    min-height: 100vh;
+    position: absolute;
+    width: 40vw;
+    border-right: solid lightgray 1px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}
+
+.dark-theme .extension-container {
+    border-right: solid gray 1px;
+}
+
+.changelog-container {
+    width: calc(60vw - 48px);
+    margin-left: 40vw;
+    padding: 24px;
+}
+
+.changelog-header h2 {
+    display: inline!important;
+}
+
+.changelog-header a {
+    color: #007AFF;
+    font-size: 22px;
+}
+
+.grid-container {
+    width: 70%;
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.logo {
+    transform: scale(0.75);
+}
+
+.popup .title {
+    margin: 0px;
+}
+
+.popup .subtitle {
+    font-size: 18px;
+    margin-top: 16px;
+    margin-bottom: 4px;
+}
+
+.popup p {
+    font-size: 18px;
+    margin-top: 0px;
+    margin-bottom: 12px;
+}
+
+.popup .currentURL {
+    font-size: 18px;
+    font-style: italic;
+}
+
+.release-section {
+    text-align: left;
+}
+
+.release-section li,
+.release-section div {
+    font-size: 16px;
+}
+
+.release-section div {
+    margin-left: -20px;
+    margin-bottom: 12Px;
+    margin-top: 12px;
+}
+
+
+/* w3schools switch
+The switch - the box around the slider */
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+
+/* Hide default HTML checkbox */
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+
+/* The slider */
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked+.slider {
+    background-color: #28d431;
+}
+
+input:focus+.slider {
+    box-shadow: 0 0 1px#28d431;
+}
+
+input:checked+.slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}
+
+
+/* Rounded sliders */
+
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+h1 {
+    font-size: 36px;
+    margin: 0px;
+}
+
+h2 {
+    font-size: 24px;
+}
+
+p {
+    font-size: 18px;
+}

css/popup/popup.css

@@ -3,7 +3,8 @@ body {
     text-align: center;
     margin: 0px;
     padding: 12px;
-    font-family: "Segoe UI", Tahoma, system-ui, sans-serif
+    font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
+    transition: ease-in-out 0.2s;
 }
 
 body.dark-theme {

html/onboarding.html

@@ -0,0 +1,46 @@
+<head>
+    <script type="module" src="../js/utils/onboardingBootstrap.js"></script>
+    <link rel="stylesheet" href="../css/onboarding/onboarding.css">
+    <title>Survol - Settings</title>
+</head>
+
+<body class="container" id="body">
+    <div class="extension-container">
+        <img src="../images/logo.png" style="margin-right:auto; margin-left:auto;" class="logo" height="172" width="172" />
+        <h1 id="welcomeMessage">Survol</h1>
+
+        <div class="grid-container">
+            <div>
+                <h2 class="subtitle" id="generalSettings">General settings</h2>
+                <p id="allowMetadata">Allow meta-data preview ? (if disabled Survol will only preview youtube, twitter, wikipedia, ...)
+                </p>
+                <label class="switch">
+                    <input type="checkbox" id="previewMetadata" checked>
+                    <span class="slider round"></span>
+                </label>
+            </div>
+            <br>
+            <div>
+                <p id="enableDarkTheme">Enable dark mode ?
+                </p>
+                <label class="switch">
+                    <input type="checkbox" id="darkThemeCheckbox" checked>
+                    <span class="slider round"></span>
+                </label>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="changelog-container">
+        <div class="changelog-header">
+            <h2 class="subtitle">Changelog - </h2><a href="https://github.com/mdolr/survol" target="_blank">Github</a>
+        </div>
+        <div id="releaseSection" class="release-section"></div>
+    </div>
+    <!--<div class="nav">
+
+    </div>
+
+    -->
+</body>

js/background/auxiliary.js

@@ -48,4 +48,42 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
     }
 
     return true;
+});
+
+const DEFAULT_SETTINGS = {
+    version: '0.6.0',
+    disabledDomains: ['survol.me'],
+    previewMetadata: true,
+    darkThemeToggle: false,
+    installationType: 'install'
+};
+
+// When the extension is installed
+chrome.runtime.onInstalled.addListener(() => {
+
+    // Initialize settings
+    chrome.storage.local.get(Object.keys(DEFAULT_SETTINGS), (res) => {
+
+        // In order to chose between "Thanks for installing the extension" and "Survol has been updated"
+        let oldVersion = res.version;
+
+        res.version = DEFAULT_SETTINGS.version;
+
+        if (res.installationType) {
+            res.installationType = (res.version == oldVersion) ? 'none' : 'update';
+        }
+
+        Object.keys(DEFAULT_SETTINGS).forEach((key) => {
+            res[key] = res[key] || DEFAULT_SETTINGS[key];
+        });
+
+        // Save settings then open onboarding page
+        chrome.storage.local.set(res, () => {
+
+            // If there has been an update or the extension has just been installed
+            if (res.installationType == 'update' || res.installationType == 'install') {
+                chrome.tabs.create({ url: chrome.runtime.getURL('./html/onboarding.html') });
+            }
+        });
+    });
 });