Add options and options saving

background.js

@@ -1,6 +1,11 @@
 
 _tabbro_ = function() {
     
+    // Options
+    this.options = {
+        "autoStickyTabs":true,
+    }
+    
     // Database version
     this.__VERSION = 1;
     
@@ -15,12 +20,14 @@ _tabbro_ = function() {
     
     // Storage engine
     this._storage = chrome.storage.local;
+    this._cloudstorage = chrome.storage.local;
     
     // the next created window should be stored in the tree window at this index. null for disabled
     this.nextCreatedWindowIndex = null
     
     // Action hook - called when we've done something that potentionally could require SAVING and/or any of the guis to be updated
     this.hook_repaint == null
+    
     this.notify = function() {
         tabbro.updateCount()
         if(this.hook_repaint!=null) {
@@ -29,7 +36,6 @@ _tabbro_ = function() {
         this.save()
     }
     
-    
     // TREE HELPERS
     this.t_getWindow = function(winid) {
         for(var i in this.tree) {
@@ -39,7 +45,6 @@ _tabbro_ = function() {
         }
     }
     
-    
     this.t_getWindowFromTab = function(tabid) {
         // Return the window the specified tab id belongs to
         for(var w in this.tree) {
@@ -51,7 +56,6 @@ _tabbro_ = function() {
         }
     }
     
-    
     this.t_getTab = function(tabid) {
         for(var w in this.tree) {
             for(var t in this.tree[w].tabs) {
@@ -62,20 +66,17 @@ _tabbro_ = function() {
         }
     }
     
-    
     this.t_windowHasTab = function(winid, tabid) {
         // Determine if the specified window by id contains tab specified by tabid
         // TODO
     }
     
-    
     this.t_addTabtoWindow = function(winid, tab, index) {
         // Add a tab record to a window specified by winid
         var win = this.t_getWindow(winid)
         if(win) win.tabs.splice(index, 0, tab)
     }
     
-    
     this.t_removeTab = function(tabid) {
         // Removed tab record
         var thewindow = this.t_getWindowFromTab(tabid)
@@ -87,7 +88,6 @@ _tabbro_ = function() {
         }
     }
     
-    
     this.t_removeWindow = function(winid) {
         // Remove window
         for(var i in this.tree) {
@@ -98,7 +98,6 @@ _tabbro_ = function() {
         }
     }
     
-    
     // UI UTIL FUNCTIONS
     this.ui_delete_tab = function(winindex, tabindex) {
         // Delete tab at tabindex from window at windowindex
@@ -115,7 +114,6 @@ _tabbro_ = function() {
         this.notify()
     }
     
-    
     this.ui_delete_window = function(winindex) {
         // Delete window at windowindex
         var window = this.tree[winindex]
@@ -130,7 +128,6 @@ _tabbro_ = function() {
         this.notify()
     }
     
-    
     this.ui_stick_tab = function(winindex, tabindex) {
         // Toggle sticky state for tab at tabindex from window at windowindex
         this.tree[winindex].tabs[tabindex].sticky = !this.tree[winindex].tabs[tabindex].sticky
@@ -141,7 +138,6 @@ _tabbro_ = function() {
         this.notify()
     }
     
-    
     this.ui_stick_window = function(winindex) {
         // Toggle sticky state for window at windowindex
         this.tree[winindex].sticky = !this.tree[winindex].sticky
@@ -152,7 +148,6 @@ _tabbro_ = function() {
         this.notify()
     }
     
-    
     this.ui_open_window = function(winindex) {
         var bro = this
         // Open saved window at index winindex
@@ -209,7 +204,6 @@ _tabbro_ = function() {
         })
     }
     
-    
     this.ui_open_tab = function(winindex, tabindex) {
         // Open a single tab
         var tab = this.tree[winindex].tabs[tabindex]
@@ -223,13 +217,9 @@ _tabbro_ = function() {
     
     this.ui_rename_window = function(winindex, newname) {
         this.tree[winindex].name = newname
-        this.bro.notify()
+        this.notify()
     }
     
-    
-    
-    
-    
     this.getCount = function() {
         // Return count of loaded tabs
         var count = 0;
@@ -243,13 +233,11 @@ _tabbro_ = function() {
         return count;
     }
     
-    
     this.updateCount = function() {
         // Update open tab count badge
         chrome.browserAction.setBadgeText({"text":this.getCount()+""})
     }
     
-    
     // Entry point - load previous session data or create a database 
     this.load = function() {
         var bro = this
@@ -269,9 +257,18 @@ _tabbro_ = function() {
             }
             bro.setup()
         })
+        
+        this._storage.get("tabbro_options", function(_data){
+            if(_data.tabbro_options==undefined) {
+                // Use defaults
+            } else {
+                for(var i in _data.tabbro_options) {
+                    bro.options[i] = _data.tabbro_options[i]
+                }
+            }
+        })
     }
     
-    
     this.setup = function() {
         // Set the notification color
         chrome.browserAction.setBadgeBackgroundColor({"color":"#990000"})
@@ -285,7 +282,6 @@ _tabbro_ = function() {
         //console.log("Tabbro v" + this.__VERSION + " ready!")
     }
     
-    
     this.loadInitialTree = function() {
         // Add all open windows/tabs to the database tree
         var bro = this
@@ -323,7 +319,6 @@ _tabbro_ = function() {
         })
     }
     
-    
     this.pruneData = function() {
         // If any non-sticky windows are in our data from a previous session, remove them
         var pruneWindows = []
@@ -364,7 +359,6 @@ _tabbro_ = function() {
         //console.log("after pruneData: tree length: " + this.tree.length)
     }
     
-    
     this.pruneWindowsTabsForClose = function(win) {
         // Remove non-sticky tabs from a window
         var pruneTabs = []
@@ -380,13 +374,13 @@ _tabbro_ = function() {
         }
     }
     
-    
     this.save = function() {
         // Save data to chrome
-        //this._storage.set({"tabbro":this.data})
+        this._storage.set({"tabbro":this.data})
+        // Save options to cloud
+        this._cloudstorage.set({"tabbro_options":this.options})
     }
     
-    
     this.addListeners = function() {
         var bro = this
         
@@ -462,7 +456,8 @@ _tabbro_ = function() {
             tab = bro.t_getTab(tabid)
             
             if(tab) chrome.tabs.get(tabid, function(_tab) {
-                if(_tab == null || tab == null) debugger
+                if(_tab == null) debugger
+                if(tab == null) debugger
                 tab.title = _tab.title
                 tab.url = _tab.url
                 tab.pinned = _tab.pinned
@@ -552,6 +547,13 @@ _tabbro_ = function() {
         })
     }
     
+    this.update_setting = function(settingName, newValue) {
+        if(typeof(this.options[settingName]) != "undefined") {
+            this.options[settingName] = newValue
+        }
+        this.save()
+    }
+    
     this.load()
 }
 

manifest.json

@@ -17,5 +17,6 @@
         "unlimitedStorage",
         "activeTab",
         "notifications", "idle", "chrome://favicon/"
-     ]
+    ],
+    "options_page": "options.html"
 }

options.html

@@ -1,14 +1,36 @@
 <!doctype html>
 <html>
     <head>
-        <title>TAB BRO</title>
+        <title>TABBRO OPTIONS</title>
         <link href="style.css" rel="stylesheet" type="text/css" />
+        <link href="libs/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
+        <script src="options.js"></script>
     </head>
-    <body>
+    <body class="options-page">
         <div class="wrapper">
-            Wello!<br>
+            <h1>Tabbro Options</h1>
-            <a href="popup.html">Main</a>
+            <ul>
+                <li>
+                    <label class="clearfix">
+                        <input type="checkbox" class="toggle" id="autoStickyTabs" value="1" />
+                        <strong>Auto-sticky tabs</strong>
+                    </label>
+                    <div class="answer">
+                        <span class="on">When a new tab is opened, it will be sticky if the parent window is sticky.</span>
+                        <span class="off">When a new tab is opened, it will not be sticky. If the parent window is closed, only stick tabs are saved.</span>
+                    </div>
+                </li>
+            </ul>
+            <br />
+            <br />
+            <br />
+            <h1>Dump Data</h1>
+            <input type="text" name="dumpout" id="dumpout" value="" />
+            <br />
+            <br />
+            <br />
+            <h1>Load Data</h1>
+            <input type="text" name="dumpin" id="dumpin" value="Paste JSON here (Not functional yet)" />
         </div>
     </body>
-</html>
+</html>
-

options.js

@@ -0,0 +1,50 @@
+var tabbro = null;
+
+document.addEventListener('DOMContentLoaded', function() {
+    chrome.runtime.getBackgroundPage(function(page) {
+        tabbro = page.tabbro
+        setup()
+    })
+});
+
+function setup() {
+    // Data dump
+    document.getElementById("dumpout").value = JSON.stringify(tabbro.tree)
+    
+    // Set initial option state
+    for(var i in tabbro.options) {
+        var input = document.getElementById(i);
+        var value = tabbro.options[i]
+        if(typeof value == "boolean") {
+            input.checked = value
+        }
+        input.onchange = function() {
+            var settingName = this.getAttribute("id")
+            var newValue = null
+            if(this.getAttribute("type")=="checkbox") {
+                newValue =  this.checked
+                if(newValue) {
+                    this.parentElement.parentElement.childNodes[3].childNodes[1].style.display=""
+                    this.parentElement.parentElement.childNodes[3].childNodes[3].style.display="none"
+                } else {
+                    this.parentElement.parentElement.childNodes[3].childNodes[1].style.display="none"
+                    this.parentElement.parentElement.childNodes[3].childNodes[3].style.display=""
+                }
+            }
+            tabbro.update_setting(settingName, newValue)
+        }
+        input.onchange()
+    }
+    
+    // Select-all listener for data dump field
+    var dumpout = document.getElementById("dumpout")
+    dumpout.onclick = function() {
+        this.setSelectionRange(0,9999999)
+    }
+    dumpout.onkeyup = dumpout.onchange = dumpout.onkeydown = function() {
+        this.value = JSON.stringify(tabbro.tree)
+    }
+    
+    
+}
+

popup.html

@@ -6,7 +6,7 @@
         <link href="libs/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
         <script src="popup.js"></script>
     </head>
-    <body>
+    <body class="popup-page">
         <div class="wrapper">
             <ul id="root"></ul>
             <!--<a href="options.html">Options</a>

style.css

@@ -41,6 +41,10 @@ table {
   border-collapse: collapse;
   border-spacing: 0; }
 
+h1 {
+  font-size: 18px;
+  margin: 5px 0px 15px 0px; }
+
 /* CLEARFIX */
 .clearfix:after {
   visibility: hidden;
@@ -63,14 +67,34 @@ table {
 /* STYLES */
 /* GLOBAL */
 body {
-  width: 420px;
-  height: auto;
-  padding: 5px 0px;
-  margin: 0;
   font-family: Open sans;
-  font-size: 12px;
+  font-size: 12px; }
-  max-height: 700px;
+  body.popup-page {
-  overflow-y: auto; }
+    width: 420px;
+    height: auto;
+    padding: 5px 0px;
+    margin: 0;
+    max-height: 700px;
+    overflow-y: auto; }
+  body.options-page {
+    padding: 10px 20px; }
+    body.options-page .wrapper {
+      max-width: 600px;
+      margin: 0px auto; }
+    body.options-page input {
+      display: block; }
+      body.options-page input.toggle {
+        float: left; }
+      body.options-page input#dumpin, body.options-page input#dumpout {
+        display: block;
+        width: 100%; }
+    body.options-page strong {
+      font-weight: bold;
+      padding: 4px 0px 10px 5px;
+      display: block; }
+    body.options-page .answer span {
+      display: block;
+      margin-left: 20px; }
 
 @-webkit-keyframes nopenopenope {
   0% {

style.scss

@@ -40,6 +40,10 @@ table {
     border-collapse: collapse;
     border-spacing: 0;
 }
+h1 {
+    font-size: 18px;
+    margin: 5px 0px 15px 0px;
+}
 /* CLEARFIX */
 .clearfix:after {
     visibility: hidden;
@@ -61,14 +65,44 @@ table {
 
 /* GLOBAL */
 body {
-    width: 420px;
-    height: auto;
-    padding: 5px 0px;
-    margin: 0;
     font-family: Open sans;
     font-size: 12px;
-    max-height: 700px;
+    
-    overflow-y: auto;
+    &.popup-page {
+        width: 420px;
+        height: auto;
+        padding: 5px 0px;
+        margin: 0;
+        max-height: 700px;
+        overflow-y: auto;
+    }
+    
+    &.options-page {
+        padding: 10px 20px;
+        .wrapper {
+            max-width: 600px;
+            margin: 0px auto;
+        }
+        input {
+            display: block;
+            &.toggle {
+                float: left;
+            }
+            &#dumpin, &#dumpout {
+                display: block;
+                width: 100%;
+            }
+        }
+        strong {
+            font-weight: bold;
+            padding: 4px 0px 10px 5px;
+            display: block;
+        }
+        .answer span {
+            display: block;
+            margin-left: 20px;
+        }
+    }
 }
 @-webkit-keyframes nopenopenope {
     0% {