Improved look of action messages. (Save, Delete, Edit, etc...)

README.md

@@ -4,8 +4,8 @@ Easy Session Manager allows you to manage your Firefox session by backing up or
 # Download
 https://addons.mozilla.org/en-US/firefox/addon/easy-session-manager/
 
-# Version: 0.0.7
+# Version: 0.1.0
-Added override message for session edits.
+Improved look of action messages. (Save, Delete, Edit, etc...)
 
 # Images
 ![1 Default interface with no sessions. ](images/pic1.png)

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": " Easy Session Manager",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "description": " Easy Session Manager allows you to manage your Firefox session by backing up or loading your saved sessions.",
 
   "applications": {

src/pages/import.html

@@ -29,6 +29,8 @@ body, html {
 
     </span>
 
+
+<script src="../scripts/sweetalert.min.js"></script>
 <script src="../scripts/background.js"></script>
 </body>
 </html>

src/pages/sessionManager.html

@@ -34,11 +34,14 @@
     <button type="button" name="delete">
         Delete <img class="icon" src="../images/icons/delete.png" alt="Delete Image"/>
     </button>
+
 </center>
 
-
 <a id="downloadAnchorElem" href="#"></a>
+
+
 <script src="../scripts/events.js"></script>
+<script src="../scripts/sweetalert.min.js"></script>
 <script src="../scripts/sessionManager.js"></script>
 
 </body>

src/scripts/background.js

@@ -1,53 +1,47 @@
 const regexp = /^[a-zA-Z0-9-_]+$/; // Alphanumeric, dash, underscore
 
+const processor = (obj, enteryName = '',
+                   message  = "What is this session's name? Allowed: a-z, A-Z, -, _") => {
+    let data       = obj.target.result;
+    let inputTag   = document.createElement("INPUT");
+    inputTag.value = enteryName;
 
-const alertMessage = (type, message) => {
+    swal(message, {
-    let msgTag    = document.getElementById("allertMessage");
+        content: inputTag,
-    let text      = document.createTextNode(message);
+        buttons: true,
-    let fontColor = "rgba(255, 255, 255, 1)";
+    }).then((value) => {
-    let bgColor   = "";
+        if (value) {
-
+            enteryName = inputTag.value.replace(/ /g, "_");
-    if (type === "success") {
+            if (enteryName) {
-        bgColor   = "rgba(72, 125, 25, 1)";
+                if (enteryName.search(regexp) == -1) {
-    } else if (type === "warning") {
+                    processor(obj, enteryName, "Please try again...\nAllowed: a-z, A-Z, -, _")
-        bgColor   = "rgba(195, 123, 0, 1)";
+                    return ;
-    } else if (type === "error") {
-        bgColor   = "rgba(125, 45, 25, 1)";
                 }
 
-    msgTag.style.backgroundColor = bgColor;
-    msgTag.style.color           = fontColor;
-    msgTag.style.display         = "block";
-    msgTag.append(text);
-
-    setTimeout(function () {
-        let msgTag           = document.getElementById("allertMessage");
-        msgTag.innerHTML     = "";
-        msgTag.style.display = "none";
-    }, 4000);
-}
-
-const processor = (obj, enteryName = '') => {
-    let data  = obj.target.result;
-
-    do {
-        enteryName = prompt("What is this session's name? Allowed: a-z, A-Z, -, _", '' + enteryName);
-        if (enteryName == null) break
-    } while (enteryName.search(regexp) == -1);
-
-    if (enteryName) {
                 try {
                     console.log("Importing session...");
                     JSON.parse(data);
                     browser.storage.local.set({[enteryName]: data});
-            alertMessage("success", "Imported file successfully.")
+                    swal("Imported file successfully.", {
+                        icon: "success",
+                    });
                 } catch (e) {
-            alertMessage("error", "Failed to import data. Not a JSON parsable file.");
+                    swal("Failed to import data. Not a JSON parsable file.", {
+                        icon: "error",
+                    });
                     return ;
                 }
             } else {
-        alertMessage("warning", "Canceled import.");
+                swal("Canceled import.", {
+                    icon: "warning",
+                });
             }
+        } else {
+            swal("Canceled import.", {
+                icon: "warning",
+            });
+        }
+    });
 };
 
 document.getElementById("inputId").onchange = (e) => {

src/scripts/events.js

@@ -26,8 +26,6 @@ document.addEventListener("click", (e) => {
                 deleteFromStorage();
             else if (e.target.name == "edit")
                 editSession();
-        } else {
-            alertMessage("warning", "Select a session first...");
         }
     }
 });

src/scripts/sessionManager.js

@@ -1,44 +1,24 @@
-const regexp       = /^[a-zA-Z0-9-_]+$/; // Alphanumeric, dash, underscore
 const storage      = browser.storage.local;
 const windowSys    = browser.windows;
+const regexp       = /^[a-zA-Z0-9-_]+$/; // Alphanumeric, dash, underscore
 
-const alertMessage = (type, message) => {
-    let msgTag    = document.getElementById("allertMessage");
-    let text      = document.createTextNode(message);
-    let fontColor = "rgba(255, 255, 255, 1)";
-    let bgColor   = "";
 
-    if (type === "success") {
+const saveSession = (message = "What is this session's name? Allowed: a-z, A-Z, -, _") => {
-        bgColor   = "rgba(72, 125, 25, 1)";
+    let inputTag   = document.createElement("INPUT");
-    } else if (type === "warning") {
+    inputTag.value = new Date().toLocaleString().split(',')[0].replace(/\//g, '-');
-        bgColor   = "rgba(195, 123, 0, 1)";
+
-    } else if (type === "error") {
+    swal(message, {
-        bgColor   = "rgba(125, 45, 25, 1)";
+        content: inputTag,
+        buttons: true,
+    }).then((value) => {
+        if (value) {
+            let enteryName = inputTag.value.replace(/ /g, "_");
+            if (enteryName) {
+                if (enteryName.search(regexp) == -1) {
+                    saveSession("Please try again...\nAllowed: a-z, A-Z, -, _")
+                    return ;
                 }
 
-    msgTag.style.backgroundColor = bgColor;
-    msgTag.style.color           = fontColor;
-    msgTag.style.display         = "block";
-    msgTag.innerHTML             = "";
-    msgTag.append(text);
-
-    setTimeout(function () {
-        let msgTag           = document.getElementById("allertMessage");
-        msgTag.innerHTML     = "";
-        msgTag.style.display = "none";
-    }, 3000);
-}
-
-const saveSession = () => {
-    let enteryName = '';
-
-    do {
-        enteryName = prompt("What is this session's name? Allowed: a-z, A-Z, -, _",
-                            new Date().toLocaleString().split(',')[0].replace(/\//g, '-'));
-        if (enteryName == null) break
-    } while (enteryName.search(regexp) == -1);
-
-    if (enteryName) {
                 console.log("Saving session...");
                 windowSys.getAll({ populate: true, windowTypes: ["normal"] }).then((windows) => {
                     let sessionData = {};
@@ -61,24 +41,103 @@ const saveSession = () => {
                     }
                 });
             } else {
-        alertMessage("warning", "Canceled save...");
+                swal("Canceled save...", {
+                    icon: "warning",
+                });
             }
+        } else {
+            swal("Canceled save...", {
+                icon: "warning",
+            });
+        }
+    });
 }
 
-const saveToStorage = (name, data) => {
+const editSession = (message = "Editing selected session... Allowed: a-z, A-Z, -, _") => {
+    let id         = selectedItem.innerHTML;
+    let inputTag   = document.createElement("INPUT");
+    inputTag.value = id;
+
+    swal(message, {
+        content: inputTag,
+        buttons: true,
+    }).then((value) => {
+        if (value) {
+            let newName = inputTag.value.replace(/ /g, "_");
+
+            if (newName) {
+                if (newName.search(regexp) == -1) {
+                    editSession("Please try again...\nAllowed: a-z, A-Z, -, _")
+                    return ;
+                }
+
+                storage.get(id).then((storageResults) => {
+                    storage.remove(id);
+                    json = JSON.parse(storageResults[id]);
+                    saveToStorage(newName, JSON.stringify(json), true);
+                });
+
+                selectedItem.textContent = newName;
+            } else {
+                swal("Canceled edit...", {
+                    icon: "warning",
+                });
+            }
+        } else {
+            swal("Canceled edit...", {
+                icon: "warning",
+            });
+        }
+    });
+}
+
+const saveToStorage = (name, data, fromEdit = false) => {
     storage.get(name).then((storageResults) => {
         let json = null;
         try {
             json = JSON.parse(storageResults[name]);
-            alertMessage("success", "Overwrote session...");
+            swal("Overwrote session...", {
+                icon: "warning",
+            });
         } catch (e) {
-            alertMessage("success", "Saved session...");
+            if (fromEdit) {  // minor logic fix
+                swal("Overwrote session...", {
+                    icon: "warning",
+                });
+            } else {
+                swal("Saved session...", {
+                    icon: "success",
+                });
+            }
         } finally {
             storage.set({[name]: data});
         }
     });
 }
 
+const deleteFromStorage = () => {
+    swal({
+        title: "Are you sure?",
+        text: "Do you wish to delete session:\n" + selectedItem.innerHTML + "?",
+        icon: "warning",
+        buttons: true,
+        dangerMode: true,
+    }).then((willDelete) => {
+        if (willDelete) {
+            storage.remove(selectedItem.innerHTML).then(() => {
+                selectedItem.parentElement.removeChild(selectedItem);
+            });
+            swal("Deleted session successfully...", {
+                icon: "success",
+            });
+        } else {
+            swal("Canceled deletion...", {
+                icon: "warning",
+            });
+        }
+    });
+}
+
 const importSession = () => {
     browser.tabs.create({
       url: browser.extension.getURL("../pages/import.html"),
@@ -90,8 +149,7 @@ const downloadSession = () => {
     var dlAnchorElem = document.getElementById('downloadAnchorElem');
     let id           = selectedItem.innerHTML;
     fileName         = "session:" + id + ":" +
-                        new Date().toLocaleString().split(',')[0]
+                        new Date().toLocaleString().split(',')[0].replace(/\//g, "-") + ".json";
-                                                   .replace(/\//g, "-") + ".json";
 
     storage.get(id).then((storageResults) => {
         let json    = JSON.parse(storageResults[id]);
@@ -103,40 +161,6 @@ const downloadSession = () => {
 
 }
 
-const deleteFromStorage = () => {
-    let action =  confirm("Do you wish to delete session: " + selectedItem.innerHTML + "?");
-
-    if (action) {
-        storage.remove(selectedItem.innerHTML).then(() => {
-            selectedItem.parentElement.removeChild(selectedItem);
-        });
-        alertMessage("success", "Deleted session successfully...");
-    } else {
-        alertMessage("warning", "Canceled deletion...");
-    }
-}
-
-const editSession = () => {
-    let id      = selectedItem.innerHTML;
-    let newName = '';
-
-    do {
-        newName = prompt("Editing selected session... Allowed: a-z, A-Z, -, _", id);
-        if (newName == null) break
-    } while (newName.search(regexp) == -1);
-
-    if (newName) {
-        storage.get(id).then((storageResults) => {
-            storage.remove(id);
-            json = JSON.parse(storageResults[id]);
-            saveToStorage(newName, JSON.stringify(json));
-        });
-        selectedItem.textContent = newName;
-    } else {
-        alertMessage("warning", "Canceled edit...");
-    }
-}
-
 const loadSession = (id = null) => {
     console.log("Loading session...");
     try {

src/styles/styles.css

@@ -1,4 +1,9 @@
-body { width: 450px; }
+body {
+    width: 450px;
+    height: 520px;
+    overflow-x: hidden;
+}
+
 ul, li { list-style: none; }
 
 li {
@@ -19,19 +24,10 @@ button {
     color: #000000;
 }
 
-#allertMessage {
-    position: absolute;
-    top: 5%;
-    z-index: 999;
-    width: 50%;
-    left: 25%;
-    padding: 0.5em;
-    text-align: center;
-    display: none;
-}
-
 #savedSessions {
-    max-height: 15em;
+    height: 445px;
+    min-height: 445px;
+    max-height: 445px;
     overflow-x: hidden;
     overflow-y: auto;
 }