Added title toggle controls and data

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.2.1.5
+# Version: 0.2.1.6
-Fixed issues 1, 3-5
+Added title toggling option.
 
 
 # Images

src/manifest.json

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

src/pages/sessionManager.html

@@ -206,19 +206,25 @@
     <!-- Templates -->
     <template id="ulTemplate">
         <h2 class="ulHeader">
-            <label for="selectAll" title="Select All">
+            <label class="selAllLbl" for="selectAll" title="Select All">
-                <input type="checkbox" checked="true" />
+                <input class="selAll" type="checkbox" checked="true" />
                 Select All
             </label>
+
+            <label class="titleAllLbl" for="titleAll" title="Show Titles">
+                <input class="titleAll" type="checkbox" checked="true" />
+                Show Titles
+            </label>
         </h2>
         <ul class="collection">
         </ul>
     </template>
 
     <template id="liTemplate">
-        <li>
+        <li class="toggleControls">
             <input type="checkbox" id="" name="" checked="true" />
-            <label for="" title=""></label>
+            <label class="linkLbl" for="" title="" style="display:none;"></label>
+            <label class="titleLbl" for="" title=""></label>
         </li>
     </template>
 

src/scripts/utils.js

@@ -47,31 +47,57 @@ const generateSelectionWindow = (json = "", keys = null, keysLength = 0) => {
     for (let i = 0; i < keysLength; i++) {
         let ulClone       = document.importNode(ulTemplate.content, true);
         let ulTag         = ulClone.querySelector('.collection');
-        let selAll       = ulClone.querySelector('input');
         let h2Tag         = ulClone.querySelector('.ulHeader');
-        let ulLblTag     = ulClone.querySelector('label');
         let h2Txt         = document.createTextNode("Window: " + (i + 1));
+
+        let selAll        = ulClone.querySelector('.selAll');
+        let titleAll      = ulClone.querySelector('.titleAll');
+        let ulLblTag      = ulClone.querySelector('.selAllLbl');
+        let ulLblTag2     = ulClone.querySelector('.titleAllLbl');
         let store         = json[keys[i]];
         let  j            = 0;
 
         container.id      = "editSelectionContainer";
         selAll.id         = "selectAllWin" + i;
+        titleAll.id       = "selectAllTitle" + i;
         ulLblTag.htmlFor  = "selectAllWin" + i;
+        ulLblTag2.htmlFor = "selectAllTitle" + i;
+
         selAll.addEventListener("click", function (eve) {
             toggleSelect(eve.target, "Win" + i);
         });
-        h2Tag.prepend(h2Txt);
 
+
+        titleAll.addEventListener("click", function (eve) {
+            toggleTitles(eve.target, "Win" + i);
+        });
+
+
+
+        h2Tag.prepend(h2Txt);
         store.forEach(tab => {
             let liClone    = document.importNode(liTemplate.content, true);
             let inptTag    = liClone.querySelector("input");
-            let lblTag     = liClone.querySelector("label");
+            // link lbl
+            let lblTag     = liClone.querySelector(".linkLbl");
             let labelTxt   = document.createTextNode(tab.link);
+            // title lbnl
+            let lblTag2    = liClone.querySelector(".titleLbl");
+            let labelTxt2  = document.createTextNode(tab.title);
             inptTag.id     = "Win" + i + "Li" + j;
+
             lblTag.htmlFor = "Win" + i + "Li" + j;
             lblTag.title   = tab.link;
+
+            lblTag2.htmlFor = "Win" + i + "Li" + j;
+            lblTag2.title   = tab.link;
+
             inptTag.setAttribute("name", "Win" + i);  // Used for toggle select all
+
             lblTag.appendChild(labelTxt);
+            lblTag2.appendChild(labelTxt2);
+
+
             ulTag.appendChild(liClone);
             j++;
         });
@@ -131,7 +157,8 @@ const getSessionData = (windows) => {
         for (var ii = 0; ii < windows[i].tabs.length; ii++) {
             if (!windows[i].tabs[ii].url.includes("about:")) {
                 links.push(
-                    {"link" : windows[i].tabs[ii].url.trim()}
+                    {"link" : windows[i].tabs[ii].url.trim(),
+                    "title" : windows[i].tabs[ii].title.trim()}
                 );
             }
         }
@@ -151,7 +178,9 @@ const getSelectionData = (container = null, keys = null, keysLength = 0) => {
             let li = ulTags[i].children[ii];
             if (li.children[0].checked) {
                 links.push(
-                    {"link" : li.children[1].innerText.trim()}
+                    {"link" : li.children[1].title.trim(),
+                     "title" : li.children[2].innerText.trim()
+                    }
                 );
             }
         }
@@ -228,6 +257,23 @@ const toggleSelect = (source, name) => {
     }
 }
 
+const toggleTitles = (source, name) => {
+    let checkboxes = document.getElementsByName(name);
+    for (let i = 0; i < checkboxes.length; i++) {
+        const parent = checkboxes[i].parentElement;
+        const lElm   = parent.querySelector(".linkLbl");
+        const tElm   = parent.querySelector(".titleLbl");
+
+        if (tElm.style.display !== "none") {
+            tElm.style.display = "none";
+            lElm.style.display = "";
+        } else {
+            tElm.style.display = "";
+            lElm.style.display = "none";
+        }
+    }
+}
+
 const clearChildNodes = (parent) => {
     while (parent.firstChild) {
         parent.removeChild(parent.firstChild);