Partially uses message passing for database interaction.

manage/manage.js

@@ -1,17 +1,35 @@
 var Manager = {
-
+
+    // Style storage
+    createItems: function(){
+        safari.self.tab.dispatchMessage('items');
+    },
+
+    removeItem: function(key){
+        safari.self.tab.dispatchMessage('removeItem', key);
+    },
+
+    getItem: function(key){
+        safari.self.tab.canLoad('getItem', key);
+    },
+
+    setItem: function(key, values){
+        safari.self.tab.dispatchMessage('setItem', [key, values]);
+    },
+
+    // Manager application
     start: function(){
         const newLink = $('new'),
               domainLabels = $$('span.label'),
               form = $('form');
-        styleStorage.each(Manager.createItem);
-        
+        Manager.createItems();
+
         /* Events for the "New User CSS" sidebar link. */
         newLink.addEvent('click', function(event){
             Manager.markCurrent(this);
             Manager.bindNewForm();
         });
-        
+
         /* Events for the Includes/Excludes domain labels. */
         domainLabels.addEvents({
             expand: function(e){
@@ -33,7 +51,7 @@ var Manager = {
                 this.fireEvent('toggle');
             }
         });
-        
+
         /* Disable save button */
         form.addEvents({
             keyup: function(e){
@@ -44,30 +62,30 @@ var Manager = {
                 }
             },
         });
-        
+
         /* Defaults */
         newLink.fireEvent('click');
     },
-    
+
     $n: function(key) { return 'item-'+key; },
     $p: function(key) { return $(Manager.$n(key)); },
     $a: function(key) { return Manager.$p(key).getChildren('a')[0]; },
-    
+
     reloadStyles: function(){
         safari.self.tab.dispatchMessage('reloadStyles');
     },
-    
+
     setTitle: function(title){
         $('title').set('text', title);
     },
-    
+
     setDomainsLabelState: function(includes, excludes){
         const includeLabel = $('label-includes'),
               excludeLabel = $('label-excludes');
         includeLabel.fireEvent(includes ? 'expand' : 'hide');
         excludeLabel.fireEvent(excludes ? 'expand' : 'hide');
     },
-    
+
     createItem: function(key, data){
         const list = $('list');
         var item = new Element('li', {id: Manager.$n(key)}),
@@ -91,7 +109,7 @@ var Manager = {
                     click: function(event){
                         var key = this.hash.substr(7),
                             element = Manager.$p(key);
-                        
+
                         if (Manager.$a(key).hasClass('current')) {
                             var prev = element.getPrevious(),
                                 next = element.getNext(),
@@ -104,15 +122,15 @@ var Manager = {
                             target.fireEvent('click');
                         }
                         element.destroy();
-                        styleStorage.removeItem(key);
+                        Manager.removeItem(key);
                         Manager.reloadStyles();
                     }
                 }
             });
         item.grab(link).grab(delete_link).inject(list);
         return item;
     },
-    
+
     markCurrent: function(element){
         $$('.current').each(function(c){
             c.removeClass('current');
@@ -121,7 +139,7 @@ var Manager = {
             element = Manager.$a(element);
         element.addClass('current');
     },
-    
+
     constructDataFromForm: function(data, form){
         data.name = form.name.value;
         data.enabled = form.enabled.checked;
@@ -130,32 +148,32 @@ var Manager = {
         data.styles = form.styles.value;
         return data;
     },
-    
+
     bindForm: function(data, fn){
         const form = $('form');
         if (data.domains === undefined)  data.domains = [];
         if (data.excludes === undefined) data.excludes = [];
-        
+
         form.name.set('value', data.name);
         form.domains.set('text', data.domains.join('\n'));
         form.excludes.set('text', data.excludes.join('\n'));
         form.styles.set('text', data.styles);
         form.enabled.set('checked', data.enabled);
-        
+
         form.domains.value = data.domains.join('\n');
         form.excludes.value = data.excludes.join('\n');
         form.styles.value = data.styles === undefined ? null : data.styles;
-        
+
         form.fireEvent('keyup');
-        
+
         /* Display */
         if ($chk(data.domains[0]) && $chk(data.excludes[0]))
             Manager.setDomainsLabelState(true, true);
         else if (!$chk(data.domains[0]) && $chk(data.excludes[0]))
             Manager.setDomainsLabelState(false, true);
         else
             Manager.setDomainsLabelState(true, false);
-        
+
         form.removeEvents('submit'); // Cleanup
         if (fn) {
             form.addEvent('submit', function(event){
@@ -165,12 +183,12 @@ var Manager = {
             });
         }
     },
-    
+
     bindEditForm: function(key){
-        var data = styleStorage.getItem(key);
+        var data = Manager.getItem(key);
         Manager.setTitle(data.name);
         Manager.bindForm(data, function(formData){
-            styleStorage.setItem(key, formData);
+            Manager.setItem(key, formData);
             Manager.reloadStyles();
             // Always update display
             var name = formData.name,
@@ -184,13 +202,13 @@ var Manager = {
                 element.addClass('disabled');
         });
     },
-    
+
     bindNewForm: function(){
         Manager.setTitle('New User CSS');
         Manager.bindForm({}, function(formData){
             var key = new Date().getTime();
             if (formData.styles && formData.domains) {
-                styleStorage.setItem(key, formData);
+                Manager.setItem(key, formData);
                 if (!formData.name)
                     formData.name = key;
                 var item = Manager.createItem(key, formData);
@@ -201,7 +219,18 @@ var Manager = {
             }
         });
     }
-    
+
 };
 
+function handleMessage(event) {
+    switch (event.name) {
+    case 'items':
+        event.message.each(function(item){
+            Manager.createItem(item.key, item.data);
+        });
+        break;
+    }
+}
+
+safari.self.addEventListener("message", handleMessage, false);
 window.addEvent('domready', function(){ Manager.start(); });

share/storage.js

@@ -1,5 +1,5 @@
 var styleStorage = {
-    
+
     getItem: function(key) {
         var jsonString = localStorage.getItem(key);
         if (jsonString) {
@@ -9,18 +9,18 @@ var styleStorage = {
             return data;
         }
     },
-    
+
     setItem: function(key, data) {
         var jsonString = JSON.stringify(data);
         localStorage.setItem(key, jsonString);
         return;
     },
-    
+
     removeItem: function(key) {
         localStorage.removeItem(key);
         return;
     },
-    
+
     each: function(fn) {
         for (var i = localStorage.length - 1; i >= 0; i--){
             var key = localStorage.key(i);
@@ -30,7 +30,7 @@ var styleStorage = {
             }
         }
     },
-    
+
     makeConsistent: function() {
         styleStorage.each(function(key, data){
             // Build 2: enable/disable checkbox.
@@ -45,5 +45,5 @@ var styleStorage = {
             }
         });
     }
-    
+
 };

usercss/globals.js

@@ -50,6 +50,23 @@ function handleMessage(event) {
     case 'reloadStyles':
         reloadStyles();
         break;
+    case 'getItem':
+        var item = styleStorage.getItem(event.message);
+        event.target.page.dispatchMessage('getItem', item);
+        break;
+    case 'removeItem':
+        stylestorage.removeItem(event.message);
+        break;
+    case 'setItem':
+        styleStorage.setItem(event.message[0], event.message[1]);
+        break;
+    case 'items':
+        var items = [];
+        styleStorage.each(function(key, data){
+            items.push({'key': key, 'data': data});
+        });
+        event.target.page.dispatchMessage('items', items);
+        break;
     default:
         break;
     }
@@ -68,4 +85,4 @@ function handleValidate(event) {
 safari.application.addEventListener('command', handleCommand, false);
 safari.application.addEventListener('message', handleMessage, false);
 safari.application.addEventListener('validate', handleValidate, false);
-reloadStyles();
+reloadStyles();