add an alternative to chrome.storage.local

src/js/ConfigStorage.js

@@ -0,0 +1,41 @@
+'use strict';
+
+// idea here is to abstract around the use of chrome.storage.local as it functions differently from "localStorage" and IndexedDB
+// localStorage deals with strings, not objects, so the objects have been serialized.
+var ConfigStorage = {
+    // key can be one string, or array of strings
+    get: function(key, callback) {
+        //console.log('Abstraction.get',key);
+        if (Array.isArray(key)) {
+            var obj = {};
+            key.forEach(function (element) {
+                try {
+                    obj = {...obj, ...JSON.parse(window.localStorage.getItem(element))};
+                } catch (e) {
+                    // is okay
+                }
+            });
+            callback(obj);
+        } else {
+            var keyValue = window.localStorage.getItem(key);
+            if (keyValue) {
+                var obj = {};
+                try {
+                    obj = JSON.parse(keyValue);
+                } catch (e) {
+                    // It's fine if we fail that parse
+                }
+                callback(obj);
+            } else {
+                callback({});
+            }
+        }
+    },
+    // set takes an object like {'userLanguageSelect':'DEFAULT'}
+    set: function(input) {
+        //console.log('Abstraction.set',input);
+        Object.keys(input).forEach(function (element) {
+            window.localStorage.setItem(element, JSON.stringify(input));
+        });
+    }
+}

src/js/gui.js

@@ -345,7 +345,7 @@ GUI_control.prototype.content_ready = function (callback) {
 }
 
 GUI_control.prototype.selectDefaultTabWhenConnected = function() {
-    chrome.storage.local.get(['rememberLastTab', 'lastTab'], function (result) {
+    ConfigStorage.get(['rememberLastTab', 'lastTab'], function (result) {
         if (!(result.rememberLastTab 
                 && !!result.lastTab 
                 && result.lastTab.substring(4) != "cli")) {

src/js/localization.js

@@ -125,7 +125,7 @@ i18n.localizePage = function() {
  * returns the current locale to the callback
  */
 function getStoredUserLocale(cb) {
-    chrome.storage.local.get('userLanguageSelect', function (result) {
+    ConfigStorage.get('userLanguageSelect', function (result) {
         var userLanguage = 'DEFAULT';
         if (result.userLanguageSelect) {
             userLanguage = result.userLanguageSelect

src/js/main.js

@@ -30,7 +30,7 @@ function getNwGui() {
 function checkSetupAnalytics(callback) {
     if (!analytics) {
         setTimeout(function () {
-            chrome.storage.local.get(['userId', 'analyticsOptOut', 'checkForConfiguratorUnstableVersions', ], function (result) {
+            ConfigStorage.get(['userId', 'analyticsOptOut', 'checkForConfiguratorUnstableVersions', ], function (result) {
                 if (!analytics) {
                     setupAnalytics(result);
                 }
@@ -55,7 +55,7 @@ function setupAnalytics(result) {
         var uid = new ShortUniqueId();
         userId = uid.randomUUID(13);
 
-        chrome.storage.local.set({ 'userId': userId });
+        ConfigStorage.set({ 'userId': userId });
     }
 
     var optOut = !!result.analyticsOptOut;
@@ -134,7 +134,7 @@ function startProcess() {
         checkForConfiguratorUpdates();
     }
 
-    chrome.storage.local.get('logopen', function (result) {
+    ConfigStorage.get('logopen', function (result) {
         if (result.logopen) {
             $("#showlog").trigger('click');
         }
@@ -151,7 +151,7 @@ function startProcess() {
     // Tabs
     $("#tabs ul.mode-connected li").click(function() {
         // store the first class of the current tab (omit things like ".active")
-        chrome.storage.local.set({
+        ConfigStorage.set({
             lastTab: $(this).attr("class").split(' ')[0]
         });
     });
@@ -311,7 +311,7 @@ function startProcess() {
                 // translate to user-selected language
                 i18n.localizePage();
 
-                chrome.storage.local.get('permanentExpertMode', function (result) {
+                ConfigStorage.get('permanentExpertMode', function (result) {
                     if (result.permanentExpertMode) {
                         $('div.permanentExpertMode input').prop('checked', true);
                     }
@@ -319,21 +319,21 @@ function startProcess() {
                     $('div.permanentExpertMode input').change(function () {
                         var checked = $(this).is(':checked');
 
-                        chrome.storage.local.set({'permanentExpertMode': checked});
+                        ConfigStorage.set({'permanentExpertMode': checked});
 
                         $('input[name="expertModeCheckbox"]').prop('checked', checked).change();
                     }).change();
                 });
 
-                chrome.storage.local.get('rememberLastTab', function (result) {
+                ConfigStorage.get('rememberLastTab', function (result) {
                     $('div.rememberLastTab input')
                         .prop('checked', !!result.rememberLastTab)
-                        .change(function() { chrome.storage.local.set({rememberLastTab: $(this).is(':checked')}) })
+                        .change(function() { ConfigStorage.set({rememberLastTab: $(this).is(':checked')}) })
                         .change();
                 });
 
                 if (GUI.operating_system !== 'ChromeOS') {
-                    chrome.storage.local.get('checkForConfiguratorUnstableVersions', function (result) {
+                    ConfigStorage.get('checkForConfiguratorUnstableVersions', function (result) {
                         if (result.checkForConfiguratorUnstableVersions) {
                             $('div.checkForConfiguratorUnstableVersions input').prop('checked', true);
                         }
@@ -341,7 +341,7 @@ function startProcess() {
                         $('div.checkForConfiguratorUnstableVersions input').change(function () {
                             var checked = $(this).is(':checked');
 
-                            chrome.storage.local.set({'checkForConfiguratorUnstableVersions': checked});
+                            ConfigStorage.set({'checkForConfiguratorUnstableVersions': checked});
 
                             checkForConfiguratorUpdates();
                         });
@@ -350,7 +350,7 @@ function startProcess() {
                     $('div.checkForConfiguratorUnstableVersions').hide();
                 }
 
-                chrome.storage.local.get('analyticsOptOut', function (result) {
+                ConfigStorage.get('analyticsOptOut', function (result) {
                     if (result.analyticsOptOut) {
                         $('div.analyticsOptOut input').prop('checked', true);
                     }
@@ -358,7 +358,7 @@ function startProcess() {
                     $('div.analyticsOptOut input').change(function () {
                         var checked = $(this).is(':checked');
 
-                        chrome.storage.local.set({'analyticsOptOut': checked});
+                        ConfigStorage.set({'analyticsOptOut': checked});
 
                         checkSetupAnalytics(function (analytics) {
                             if (checked) {
@@ -379,7 +379,7 @@ function startProcess() {
                     .change(function () {
                         var checked = $(this).is(':checked');
 
-                        chrome.storage.local.set({'cliAutoComplete': checked});
+                        ConfigStorage.set({'cliAutoComplete': checked});
                         CliAutoComplete.setEnabled(checked);
                     }).change();
 
@@ -388,11 +388,11 @@ function startProcess() {
                     .change(function () {
                         var checked = $(this).is(':checked');
 
-                        chrome.storage.local.set({'darkTheme': checked});
+                        ConfigStorage.set({'darkTheme': checked});
                         DarkTheme.setConfig(checked);
                     }).change();
 
-                chrome.storage.local.get('userLanguageSelect', function (result) {
+                ConfigStorage.get('userLanguageSelect', function (result) {
 
                     var userLanguage_e = $('div.userLanguage select');
                     var languagesAvailables = i18n.getLanguagesAvailables();
@@ -411,7 +411,7 @@ function startProcess() {
                         var languageSelected = $(this).val();
 
                         // Select the new language, a restart is required
-                        chrome.storage.local.set({'userLanguageSelect': languageSelected});
+                        ConfigStorage.set({'userLanguageSelect': languageSelected});
                     });
                 });
 
@@ -519,7 +519,7 @@ function startProcess() {
             $("#content").removeClass('logopen');
             $(".tab_container").removeClass('logopen');
             $("#scrollicon").removeClass('active');
-            chrome.storage.local.set({'logopen': false});
+            ConfigStorage.set({'logopen': false});
 
             state = false;
         } else {
@@ -528,7 +528,7 @@ function startProcess() {
             $("#content").addClass('logopen');
             $(".tab_container").addClass('logopen');
             $("#scrollicon").addClass('active');
-            chrome.storage.local.set({'logopen': true});
+            ConfigStorage.set({'logopen': true});
 
             state = true;
         }
@@ -536,7 +536,7 @@ function startProcess() {
         $(this).data('state', state);
     });
 
-    chrome.storage.local.get('permanentExpertMode', function (result) {
+    ConfigStorage.get('permanentExpertMode', function (result) {
         if (result.permanentExpertMode) {
             $('input[name="expertModeCheckbox"]').prop('checked', true);
         }
@@ -553,11 +553,11 @@ function startProcess() {
         }).change();
     });
 
-    chrome.storage.local.get('cliAutoComplete', function (result) {
+    ConfigStorage.get('cliAutoComplete', function (result) {
         CliAutoComplete.setEnabled(typeof result.cliAutoComplete == 'undefined' || result.cliAutoComplete); // On by default
     });
 
-    chrome.storage.local.get('darkTheme', function (result) {
+    ConfigStorage.get('darkTheme', function (result) {
         DarkTheme.setConfig(result.darkTheme);
     });
 };
@@ -569,7 +569,7 @@ function checkForConfiguratorUpdates() {
 }
 
 function notifyOutdatedVersion(releaseData) {
-    chrome.storage.local.get('checkForConfiguratorUnstableVersions', function (result) {
+    ConfigStorage.get('checkForConfiguratorUnstableVersions', function (result) {
         var showUnstableReleases = false;
         if (result.checkForConfiguratorUnstableVersions) {
             showUnstableReleases = true;

src/js/serial_backend.js

@@ -24,10 +24,10 @@ function initializeSerialBackend() {
     GUI.updateManualPortVisibility();
 
     $('#port-override').change(function () {
-        chrome.storage.local.set({'portOverride': $('#port-override').val()});
+        ConfigStorage.set({'portOverride': $('#port-override').val()});
     });
 
-    chrome.storage.local.get('portOverride', function (data) {
+    ConfigStorage.get('portOverride', function (data) {
         $('#port-override').val(data.portOverride);
     });
 
@@ -103,7 +103,7 @@ function initializeSerialBackend() {
     });
 
     // auto-connect
-    chrome.storage.local.get('auto_connect', function (result) {
+    ConfigStorage.get('auto_connect', function (result) {
         if (result.auto_connect === 'undefined' || result.auto_connect) {
             // default or enabled by user
             GUI.auto_connect = true;
@@ -135,7 +135,7 @@ function initializeSerialBackend() {
                 if (!GUI.connected_to && !GUI.connecting_to) $('select#baud').prop('disabled', false);
             }
 
-            chrome.storage.local.set({'auto_connect': GUI.auto_connect});
+            ConfigStorage.set({'auto_connect': GUI.auto_connect});
         });
     });
 
@@ -201,15 +201,15 @@ function onOpen(openInfo) {
         GUI.log(i18n.getMessage('serialPortOpened', [openInfo.connectionId]));
 
         // save selected port with chrome.storage if the port differs
-        chrome.storage.local.get('last_used_port', function (result) {
+        ConfigStorage.get('last_used_port', function (result) {
             if (result.last_used_port) {
                 if (result.last_used_port != GUI.connected_to) {
                     // last used port doesn't match the one found in local db, we will store the new one
-                    chrome.storage.local.set({'last_used_port': GUI.connected_to});
+                    ConfigStorage.set({'last_used_port': GUI.connected_to});
                 }
             } else {
                 // variable isn't stored yet, saving
-                chrome.storage.local.set({'last_used_port': GUI.connected_to});
+                ConfigStorage.set({'last_used_port': GUI.connected_to});
             }
         });
 

src/js/tabs/auxiliary.js

@@ -498,11 +498,11 @@ TABS.auxiliary.initialize = function (callback) {
         }
 
         let hideUnusedModes = false;
-        chrome.storage.local.get('hideUnusedModes', function (result) {
+        ConfigStorage.get('hideUnusedModes', function (result) {
             $("input#switch-toggle-unused")
                 .change(function() {
                     hideUnusedModes = $(this).prop("checked");
-                    chrome.storage.local.set({ hideUnusedModes: hideUnusedModes });
+                    ConfigStorage.set({ hideUnusedModes: hideUnusedModes });
                     update_ui();
                 })
                 .prop("checked", !!result.hideUnusedModes)

src/js/tabs/logging.js

@@ -100,7 +100,7 @@ TABS.logging.initialize = function (callback) {
             }
         });
 
-        chrome.storage.local.get('logging_file_entry', function (result) {
+        ConfigStorage.get('logging_file_entry', function (result) {
             if (result.logging_file_entry) {
                 chrome.fileSystem.restoreEntry(result.logging_file_entry, function (entry) {
                     fileEntry = entry;
@@ -261,7 +261,7 @@ TABS.logging.initialize = function (callback) {
                         fileEntry = fileEntryWritable;
 
                         // save entry for next use
-                        chrome.storage.local.set({'logging_file_entry': chrome.fileSystem.retainEntry(fileEntry)});
+                        ConfigStorage.set({'logging_file_entry': chrome.fileSystem.retainEntry(fileEntry)});
 
                         // reset sample counter in UI
                         $('.samples').text(0);

src/js/tabs/motors.js

@@ -260,26 +260,6 @@ TABS.motors.initialize = function (callback) {
             }
         });
 
-        // set refresh speeds according to configuration saved in storage
-        chrome.storage.local.get(['motors_tab_sensor_settings', 'motors_tab_gyro_settings', 'motors_tab_accel_settings'], function (result) {
-            if (result.motors_tab_sensor_settings) {
-                var sensor = result.motors_tab_sensor_settings.sensor;
-                $('.tab-motors select[name="sensor_choice"]').val(result.motors_tab_sensor_settings.sensor);
-            }
-
-            if (result.motors_tab_gyro_settings) {
-                TABS.motors.sensorGyroRate = result.motors_tab_gyro_settings.rate;
-                TABS.motors.sensorGyroScale = result.motors_tab_gyro_settings.scale;
-            }
-
-            if (result.motors_tab_accel_settings) {
-                TABS.motors.sensorAccelRate = result.motors_tab_accel_settings.rate;
-                TABS.motors.sensorAccelScale = result.motors_tab_accel_settings.scale;
-            }
-            $('.tab-motors .sensor select:first').change();
-        });
-
-
         function loadScaleSelector(selectorValues, selectedValue) {
             $('.tab-motors select[name="scale"]').find('option').remove();
 
@@ -296,7 +276,7 @@ TABS.motors.initialize = function (callback) {
 
         $('.tab-motors .sensor select').change(function(){
             TABS.motors.sensor = $('.tab-motors select[name="sensor_choice"]').val()
-            chrome.storage.local.set({'motors_tab_sensor_settings': {'sensor': TABS.motors.sensor}});
+            ConfigStorage.set({'motors_tab_sensor_settings': {'sensor': TABS.motors.sensor}});
 
             switch(TABS.motors.sensor){
             case "gyro":
@@ -314,7 +294,6 @@ TABS.motors.initialize = function (callback) {
             $('.tab-motors .rate select:first').change();
         });
 
-
         $('.tab-motors .rate select, .tab-motors .scale select').change(function () {
             var rate = parseInt($('.tab-motors select[name="rate"]').val(), 10);
             var scale = parseFloat($('.tab-motors select[name="scale"]').val());
@@ -323,7 +302,7 @@ TABS.motors.initialize = function (callback) {
 
             switch(TABS.motors.sensor) {
             case "gyro":
-                chrome.storage.local.set({'motors_tab_gyro_settings': {'rate': rate, 'scale': scale}});
+                ConfigStorage.set({'motors_tab_gyro_settings': {'rate': rate, 'scale': scale}});
                 TABS.motors.sensorGyroRate = rate;
                 TABS.motors.sensorGyroScale = scale;
 
@@ -334,7 +313,7 @@ TABS.motors.initialize = function (callback) {
                 }, rate, true);
                 break;
             case "accel":
-                chrome.storage.local.set({'motors_tab_accel_settings': {'rate': rate, 'scale': scale}});
+                ConfigStorage.set({'motors_tab_accel_settings': {'rate': rate, 'scale': scale}});
                 TABS.motors.sensorAccelRate = rate;
                 TABS.motors.sensorAccelScale = scale;
                 accel_helpers = initGraphHelpers('#graph', samples_accel_i, [-scale, scale]);
@@ -402,6 +381,27 @@ TABS.motors.initialize = function (callback) {
             }
         });
 
+
+        // set refresh speeds according to configuration saved in storage
+        ConfigStorage.get(['motors_tab_sensor_settings', 'motors_tab_gyro_settings', 'motors_tab_accel_settings'], function (result) {
+            if (result.motors_tab_sensor_settings) {
+                var sensor = result.motors_tab_sensor_settings.sensor;
+                $('.tab-motors select[name="sensor_choice"]').val(result.motors_tab_sensor_settings.sensor);
+            }
+
+            if (result.motors_tab_gyro_settings) {
+                TABS.motors.sensorGyroRate = result.motors_tab_gyro_settings.rate;
+                TABS.motors.sensorGyroScale = result.motors_tab_gyro_settings.scale;
+            }
+
+            if (result.motors_tab_accel_settings) {
+                TABS.motors.sensorAccelRate = result.motors_tab_accel_settings.rate;
+                TABS.motors.sensorAccelScale = result.motors_tab_accel_settings.scale;
+            }
+            $('.tab-motors .sensor select:first').change();
+        });
+
+
         // Amperage
         function power_data_pull() {
             motor_voltage_e.text(i18n.getMessage('motorsVoltageValue', [ANALOG.voltage]));

src/js/tabs/receiver.js

@@ -62,7 +62,7 @@ TABS.receiver.initialize = function (callback) {
         // translate to user-selected language
         i18n.localizePage();
 
-        chrome.storage.local.get('rx_refresh_rate', function (result) {
+        ConfigStorage.get('rx_refresh_rate', function (result) {
             if (result.rx_refresh_rate) {
                 $('select[name="rx_refresh_rate"]').val(result.rx_refresh_rate).change();
             } else {
@@ -424,7 +424,7 @@ TABS.receiver.initialize = function (callback) {
             var plot_update_rate = parseInt($(this).val(), 10);
 
             // save update rate
-            chrome.storage.local.set({'rx_refresh_rate': plot_update_rate});
+            ConfigStorage.set({'rx_refresh_rate': plot_update_rate});
 
             function get_rc_data() {
                 MSP.send_message(MSPCodes.MSP_RC, false, false, update_ui);

src/js/tabs/sensors.js

@@ -239,19 +239,9 @@ TABS.sensors.initialize = function (callback) {
 
             $('.tab-sensors .rate select:first').change();
 
-            chrome.storage.local.set({'graphs_enabled': checkboxes});
+            ConfigStorage.set({'graphs_enabled': checkboxes});
         });
 
-        chrome.storage.local.get('graphs_enabled', function (result) {
-            if (result.graphs_enabled) {
-                var checkboxes = $('.tab-sensors .info .checkboxes input');
-                for (var i = 0; i < result.graphs_enabled.length; i++) {
-                    checkboxes.eq(i).not(':disabled').prop('checked', result.graphs_enabled[i]).change();
-                }
-            } else {
-                $('.tab-sensors .info input:lt(4):not(:disabled)').prop('checked', true).change();
-            }
-        });
 
         // Always start with default/empty sensor data array, clean slate all
         initSensorData();
@@ -303,31 +293,6 @@ TABS.sensors.initialize = function (callback) {
             }
         });
 
-        // set refresh speeds according to configuration saved in storage
-        chrome.storage.local.get('sensor_settings', function (result) {
-            if (result.sensor_settings) {
-                $('.tab-sensors select[name="gyro_refresh_rate"]').val(result.sensor_settings.rates.gyro);
-                $('.tab-sensors select[name="gyro_scale"]').val(result.sensor_settings.scales.gyro);
-
-                $('.tab-sensors select[name="accel_refresh_rate"]').val(result.sensor_settings.rates.accel);
-                $('.tab-sensors select[name="accel_scale"]').val(result.sensor_settings.scales.accel);
-
-                $('.tab-sensors select[name="mag_refresh_rate"]').val(result.sensor_settings.rates.mag);
-                $('.tab-sensors select[name="mag_scale"]').val(result.sensor_settings.scales.mag);
-
-                $('.tab-sensors select[name="baro_refresh_rate"]').val(result.sensor_settings.rates.baro);
-                $('.tab-sensors select[name="sonar_refresh_rate"]').val(result.sensor_settings.rates.sonar);
-
-                $('.tab-sensors select[name="debug_refresh_rate"]').val(result.sensor_settings.rates.debug);
-
-                // start polling data by triggering refresh rate change event
-                $('.tab-sensors .rate select:first').change();
-            } else {
-                // start polling immediatly (as there is no configuration saved in the storage)
-                $('.tab-sensors .rate select:first').change();
-            }
-        });
-
         $('.tab-sensors .rate select, .tab-sensors .scale select').change(function () {
             // if any of the select fields change value, all of the select values are grabbed
             // and timers are re-initialized with the new settings
@@ -353,7 +318,7 @@ TABS.sensors.initialize = function (callback) {
             var fastest = d3.min([rates.gyro, rates.accel, rates.mag]);
 
             // store current/latest refresh rates in the storage
-            chrome.storage.local.set({'sensor_settings': {'rates': rates, 'scales': scales}});
+            ConfigStorage.set({'sensor_settings': {'rates': rates, 'scales': scales}});
 
             // re-initialize domains with new scales
             gyroHelpers = initGraphHelpers('#gyro', samples_gyro_i, [-scales.gyro, scales.gyro]);
@@ -454,6 +419,41 @@ TABS.sensors.initialize = function (callback) {
             }
         });
 
+        ConfigStorage.get('graphs_enabled', function (result) {
+            if (result.graphs_enabled) {
+                var checkboxes = $('.tab-sensors .info .checkboxes input');
+                for (var i = 0; i < result.graphs_enabled.length; i++) {
+                    checkboxes.eq(i).not(':disabled').prop('checked', result.graphs_enabled[i]).change();
+                }
+            } else {
+                $('.tab-sensors .info input:lt(4):not(:disabled)').prop('checked', true).change();
+            }
+            // set refresh speeds according to configuration saved in storage
+            ConfigStorage.get('sensor_settings', function (result) {
+                if (result.sensor_settings) {
+                    $('.tab-sensors select[name="gyro_refresh_rate"]').val(result.sensor_settings.rates.gyro);
+                    $('.tab-sensors select[name="gyro_scale"]').val(result.sensor_settings.scales.gyro);
+
+                    $('.tab-sensors select[name="accel_refresh_rate"]').val(result.sensor_settings.rates.accel);
+                    $('.tab-sensors select[name="accel_scale"]').val(result.sensor_settings.scales.accel);
+
+                    $('.tab-sensors select[name="mag_refresh_rate"]').val(result.sensor_settings.rates.mag);
+                    $('.tab-sensors select[name="mag_scale"]').val(result.sensor_settings.scales.mag);
+
+                    $('.tab-sensors select[name="baro_refresh_rate"]').val(result.sensor_settings.rates.baro);
+                    $('.tab-sensors select[name="sonar_refresh_rate"]').val(result.sensor_settings.rates.sonar);
+
+                    $('.tab-sensors select[name="debug_refresh_rate"]').val(result.sensor_settings.rates.debug);
+
+                    // start polling data by triggering refresh rate change event
+                    $('.tab-sensors .rate select:first').change();
+                } else {
+                    // start polling immediatly (as there is no configuration saved in the storage)
+                    $('.tab-sensors .rate select:first').change();
+                }
+            });
+        });
+
         // status data pulled via separate timer with static speed
         GUI.interval_add('status_pull', function status_pull() {
             MSP.send_message(MSPCodes.MSP_STATUS);

src/main.html

@@ -110,6 +110,7 @@
     <script type="text/javascript" src="./node_modules/inflection/inflection.min.js"></script>
     <script type="text/javascript" src="./js/libraries/analytics.js"></script>
     <script type="text/javascript" src="./js/injected_methods.js"></script>
+    <script type="text/javascript" src="./js/ConfigStorage.js"></script>
     <script type="text/javascript" src="./js/data_storage.js"></script>
     <script type="text/javascript" src="./js/fc.js"></script>
     <script type="text/javascript" src="./js/port_handler.js"></script>