files can be edited and saved

diff/css/style.css

@@ -10,8 +10,8 @@ body {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 13px;
   line-height: 18px;
+  margin: 10px;
   min-width: 975px;
-  padding: 20px;
 }
 
 .title {
@@ -279,10 +279,23 @@ input[type=text].form-error{
   width: 0;
 }
 
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  border: 1px solid #eee;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #e5e5e5;
+}
+
 #file1-container,
 #file2-container {
   float: left;
+  min-height: 625px;
+  min-width: 470px;
   position: relative;
+  width: 48%;
 }
 
 .input-container {
@@ -320,7 +333,7 @@ input[type=text].form-error{
   margin-top: 36px;
   overflow: hidden;
   position: relative;
-  width: 40px;
+  width: 30px;
 }
 
 #arrow-container.arrow-edit {
@@ -345,61 +358,30 @@ input[type=text].form-error{
   opacity: 1;
 }
 
-#plus-container {
-  display: none;
-  float: left;
-  height: 575px;
-  margin-right: 2px;
-  margin-top: 36px;
-  overflow: hidden;
-  position: relative;
-  width: 16px;
-  z-index: 10;
-}
-
-#plus-container div {
-  border: 1px solid #999;
-  color: #999;
-  font-size: 18px;
-  height: 14px;
-  opacity: 0;
-  text-align: center;
-  width: 14px;
-}
-
-#plus-container div.plus,
-#plus-container div.minus {
-  cursor: pointer;
-  opacity: 1;
-}
-
-#plus-container div.plus:after {
-  content: "+";
-}
-
-#plus-container div.minus:after {
-  content: "-";
-}
-
 .file-diff,
 textarea {
   background: #fafafa;
   border: 1px solid #999;
+  color: #666;
   float: left;
-  font-family: monospace;
-  font-size: 12px;
-  height: 585px;
+  font-family: mono, courier, monospace;
+  font-size: 10px;
+  height: 625px;
   line-height: 16px;
   margin-bottom: 10px;
   margin-top: 10px;
   overflow: auto;
   white-space: nowrap;
-  width: 455px;
+  width: 100%;
 }
 
 div.button.edit,
-div.button.done{
+div.button.done,
+div.button.save {
   float: right;
+  margin-left: 16px;
+  margin-right: 0px;
+  min-width: 38px;
 }
 
 .file-diff div {

diff/js/diff.js

@@ -28,13 +28,14 @@ $(document).ready(function() {
   }, 500);
 
   $('.edit').click(function() {
-    var text = getText();
+    var text = getText(2);
     $('#arrow-container').addClass('arrow-edit');
     $('.file-diff.2').addClass('hidden');
     $('textarea.diff-text').val(text);
     $('textarea.diff-text').scrollTop($('.file-diff.1').scrollTop());
     $('textarea.diff-text').removeClass('hidden');
     $('.edit').addClass('hidden');
+    $('.save').addClass('hidden');
     $('.done').removeClass('hidden');
   });
 
@@ -48,6 +49,11 @@ $(document).ready(function() {
     $('textarea.diff-text').addClass('hidden');
     $('.edit').removeClass('hidden');
     $('.done').addClass('hidden');
+    $('.save').removeClass('hidden');
+  });
+
+  $('.save').click(function() {
+    saveFileAs();
   });
 
   $('textarea.diff-text').scroll(function () {
@@ -84,9 +90,9 @@ $(document).ready(function() {
       }
     );
 
-    var dropZone = document.getElementById('drop-zone' + i);
-    dropZone.addEventListener('dragover', handleDragOver, false);
-    dropZone.addEventListener('drop', handleDrop, false);
+    // var dropZone = document.getElementById('drop-zone' + i);
+    // dropZone.addEventListener('dragover', handleDragOver, false);
+    // dropZone.addEventListener('drop', handleDrop, false);
 
     $('.choose-url.' + i).click(function () {
       var i = $(this).attr('class').split(' ')[1];
@@ -149,8 +155,8 @@ $(document).ready(function() {
   });
 });
 
-function getText() {
-  var lines = $('.file-diff.2 div').children('.text');
+function getText(fileNum) {
+  var lines = $('.file-diff.' + fileNum + ' div').children('.text');
   var text = '';
   for (var i = 0; i < lines.length; i++) {
     if (!$(lines[i]).hasClass('hidden')) {
@@ -160,7 +166,9 @@ function getText() {
           if (!$(line[j]).hasClass('ins'))
             text += $(line[j]).html();
         } else {
-          if (!$(line[j]).hasClass('del'))
+          if (fileNum == 1 && !$(line[j]).hasClass('ins'))
+            text += $(line[j]).html();
+          if (fileNum == 2 && !$(line[j]).hasClass('del'))
             text += $(line[j]).html();
         }
       }
@@ -278,25 +286,36 @@ function saveFile(content, fileName) {
     FILE_SIZE,
     function(fs) {
       fs.root.getFile(fileName, {create: true}, function(fileEntry) {
-        fileEntry.createWriter(function(fileWriter) {
-
-          fileWriter.onwriteend = function(e) {
-            fileWriter.onwriteend = null;
-            fileWriter.truncate(content.length);
-          };
-
-          fileWriter.onerror = function(e) {
-            console.log('Write failed: ' + e.toString());
-          };
-
-          var blob = new Blob([content], {'type': 'text/plain'});
-          fileWriter.write(blob);
-
-        }, errorHandler);
+        save(fileEntry, content);
       }, errorHandler);
     },errorHandler);
 }
 
+function saveFileAs() {
+  chrome.fileSystem.chooseFile({'type': 'saveFile'}, function(fileEntry) {
+    save(fileEntry, getText(2));
+  });
+}
+
+function save(fileEntry, content) {
+  fileEntry.createWriter(function(fileWriter) {
+
+    fileWriter.onwriteend = function(e) {
+      fileWriter.onwriteend = null;
+      fileWriter.truncate(content.length);
+    };
+
+    fileWriter.onerror = function(e) {
+      console.log('Write failed: ' + e.toString());
+    };
+
+    var blob = new Blob([content], {'type': 'text/plain'});
+    fileWriter.write(blob);
+
+  }, errorHandler);
+}
+
+
 function readFileName(readFileName, fileNum) {
   window.webkitRequestFileSystem(
     window.PERSISTENT,
@@ -637,7 +656,7 @@ function createCollapsibleMatches() {
 
 function collapse(lines1, lines2, arrows, plusses, numContMatches, i) {
   if (numContMatches > 10) {
-    var firstCol = i - numContMatches + 6;
+    var firstCol = i - numContMatches + 5;
     var lastCol = i - 5;
     var numCol = lastCol - firstCol;
     var firstLine = firstCol + '-line';
@@ -682,7 +701,7 @@ function moveChunk(chunkNum) {
   $('#arrow-container .undo.' + chunkNum).removeClass('hidden');
   resetLineNums();
   setNumDiffs();
-  var text = getText();
+  var text = getText(2);
   saveFile(text, 'file1.txt');
 }
 
@@ -705,7 +724,7 @@ function undoMoveChunk(chunkNum) {
   $('#arrow-container .undo.' + chunkNum).addClass('hidden');
   resetLineNums();
   setNumDiffs();
-  var text = getText();
+  var text = getText(2);
   saveFile(text, 'file1.txt');
 }
 

diff/main.html

@@ -58,6 +58,7 @@
           <span class="pointer"></span>
         </div>
       </div>
+      <div class="button save">Save</div>
       <div class="button edit">Edit</div>
       <div class="button done hidden">Done</div>
       <br>

diff/manifest.json

@@ -1,8 +1,9 @@
 {
   "manifest_version": 2,
   "name": "Diff Tool",
-  "description": "App that displays diff of two local or remote files.",
+  "description": "View diff of two files.",
   "version": "0.1.2",
+  "offline_enabled" : true,
   "app": {
     "background": {
       "scripts": ["js/background.js"]
@@ -11,6 +12,7 @@
   "permissions": ["experimental",
                   "appWindow",
                   "unlimitedStorage",
+                  "fileSystem",
                   "<all_urls>"
                  ],
   "icons": { "16": "img/icon_16.png",

diff/tests/diff_test.html

@@ -19,7 +19,7 @@
   </head>
 
   <body>
-    <h1 id="qunit-header">Diff Packaged App Tests</h1>
+    <h1 id="qunit-header">Diff Platform App Tests</h1>
     <h2 id="qunit-banner"></h2>
     <div id="qunit-testrunner-toolbar"></div>
     <h2 id="qunit-userAgent"></h2>