introducing devtools:

   - support multifile import
   - two-step import flow
   - list import files
   - style

2 files changed, 120 insertions, 3 deletions

diff --git a/src/client/devtools.js b/src/client/devtools.js
new file mode 100644
index 00000000..1274652e
--- /dev/null
+++ b/src/client/devtools.js
@@ -0,0 +1,117 @@
+"use strict"
+
+define(['jquery', 'rz_core', 'FileSaver'],
+function($, rz_core, file_saver) {
+
+    var import_file_set;
+
+    $('debug-view__save').click(function(){
+        var json = rz_core.main_graph.save_to_json();
+        console.log('saving to local storage ' + json.length + ' bytes');
+        localStorage.setItem(key, json);
+    });
+
+    $('#debug-view__export_btn').click(function() {
+        var json = rz_core.main_graph.save_to_json(),
+            blob = new Blob([json], {type: 'application/json'}),
+            now = new Date(),
+            date_string = ('' + now.getYear() + now.getMonth() + now.getDay() + '-' +
+                now.getHours() + now.getMinutes() + now.getSeconds()),
+            filename = rz_config.rzdoc_cur__name + '-' + date_string + '.json';
+
+        console.log('saving ' + json.length + ' bytes to ' + filename);
+        file_saver(blob, filename);
+    });
+
+    $('#debug-view__url-copy a').click(function() {
+        var json = rz_core.main_graph.save_to_json();
+        // TODO use jquery BBQ $.param({json: json});
+        var encoded = document.location.origin + '/?json=' + encodeURIComponent(json);
+        window.prompt('Copy to clipboard: Ctrl-C, Enter (or Cmd-C for Mac)', encoded);
+    });
+
+    var confirm_import = function() {
+      if (!rz_core.main_graph.empty()) {
+        return confirm('Current work will be merged with the new import, are you sure?');
+      }
+      return true;
+    }
+
+    function import_file(file) {
+
+        var file_reader;
+
+        console.log(file);
+        file_reader = new FileReader();
+        file_reader.onload = (function(theFile) {
+            return function(e) {
+                var result = e.target.result;
+                if (e.target.readyState === FileReader.DONE) {
+                    console.log('file-import: done reading \'' + theFile.name + '\', byte count: ' + result.length);
+                    rz_core.load_from_json(result);
+                }
+            }
+        })(file);
+        file_reader.readAsText(file, "text/javascript");
+    }
+
+    function init_import_handlers() {
+
+        /*
+         * step1: propagate import file selection to hidden input element
+         */
+        $('#devtools__import__select-files-btn').click(function(event) {
+
+            $('#debug-view__import__input_element').click(); // trigger file selection dialog
+
+        });
+
+        /*
+         * step2: handle file selection events, enable import-execution button
+         */
+        $('#debug-view__import__input_element').on('change', function(event) {
+
+            import_file_set = event.target.files;
+
+            if (undefined === import_file_set) {
+                return;
+            }
+
+            $.map(import_file_set, function(file){
+
+                var e_file_path;
+
+                e_file_path = $('<div>');
+                e_file_path.addClass('debug-view__import__input_file_name')
+                e_file_path.text('- ' + file.name);
+                $('#debug-view__import').append(e_file_path);
+            });
+
+            $('#devtools__import__step__export').show(); // enable import exec button
+        });
+
+        /*
+         * step3: prompt for confirmation & execute import
+         */
+        $('#devtools__import__execute-import-btn').click(function(event) {
+            if (!confirm_import()) {
+                return;
+            }
+
+            $.map(import_file_set, import_file);
+        });
+    };
+    init_import_handlers();
+
+    $('debug-view__local-storage-load').click(function(){
+      if (!confirm_import()) {
+          return;
+      }
+      var json_blob = localStorage.getItem(key)
+      rz_core.load_from_json(json_blob);
+    });
+
+    return {
+        
+    }
+});
\ No newline at end of file
diff --git a/src/client/main.js b/src/client/main.js
index 4e878087..e4735afe 100644
--- a/src/client/main.js
+++ b/src/client/main.js
@@ -3,6 +3,7 @@
  */
 define([
         'buttons',
+        'devtools',
         'drag_n_drop',
         'feedback',
         'history',
@@ -13,7 +14,6 @@ define([
         'textanalysis',
         'textanalysis.ui',
         'util',
-        'view/devtools',
         'view/filter_menu',
         'view/search',
         'view/selection',
@@ -24,6 +24,7 @@ define([
  */
 function(
          buttons,
+         devtools,
          drag_n_drop,
          feedback,
          history,
@@ -34,7 +35,6 @@ function(
          textanalysis,
          textanalysis_ui,
          util,
-         devtools,
          filter_menu,
          search,
          selection
@@ -89,7 +89,7 @@ function(
 
         // setup debug
         if (util.getParameterByName('debug')) {
-            $(document.body).addClass('debug');
+            $('#devtools').show();
             rz_core.edit_graph.set_user('fakeuser');
             rz_core.main_graph.set_user('fakeuser');
             drag_n_drop.init();