Add possibility to change view mode (split or unified)

manifest.json

@@ -19,5 +19,8 @@
         "styles/style.css"
       ]
     }
+  ],
+  "permissions": [
+    "storage"
   ]
-}
+}

scripts/script.js

@@ -21,6 +21,14 @@ let numberOfChangedFiles = 0;
 let numberOfAdditions = 0;
 let numberOfDeletions = 0;
 
+const VIEW_MODE_SPLIT = "split";
+const VIEW_MODE_UNIFIED = "unified";
+const VIEW_MODE_DEFAULT_VALUE = VIEW_MODE_SPLIT;
+
+let viewMode = '';
+
+let editedLines = '';
+
 /**
  * Contains general informations about the patch file
  * Ex : how many lines are added, deleted, ect..
@@ -58,7 +66,9 @@ class Diff {
         // If this is a new file, don't print the "old code" bloc
         if (this.oldCode !== '') {
             let bloc1 = document.createElement('bloc');
-            bloc1.className = 'left-bloc';
+            if (viewMode == VIEW_MODE_SPLIT) {
+                bloc1.className = 'left-bloc';
+            }
             bloc1.innerHTML = this.oldCode;
             codeBloc.appendChild(bloc1);
             // Bind scroll event on both code blocs
@@ -75,10 +85,12 @@ class Diff {
         linesAdd.innerHTML = this.newCodeLineNumber;
         linesDel.innerHTML = this.oldCodeLineNumber;
 
-        codeBloc.appendChild(linesBloc);
-        linesBloc.appendChild(linesDel);
-        linesBloc.appendChild(linesAdd);
-        codeBloc.appendChild(bloc2);
+        if (viewMode == VIEW_MODE_SPLIT) {
+            codeBloc.appendChild(linesBloc);
+            linesBloc.appendChild(linesDel);
+            linesBloc.appendChild(linesAdd);
+            codeBloc.appendChild(bloc2);
+        }
 
         HtmlElement.appendChild(blocMeta);
         HtmlElement.appendChild(codeBloc);
@@ -87,87 +99,127 @@ class Diff {
     //@TODO Add function print side by side and print inline
 }
 
-// Extract optional file's metadata.
-extractFileInfo();
+function init() {
+    document.getElementsByTagName("pre")[0].innerHTML = '';
 
-lines.forEach(function (line) {
+    lines = content.split("\n");
 
-    if (line.startsWith('@@ ', 0)) {
-        updateLastDiff();
+    initial = 0;
+    initialLength = 0;
+    edited = 0;
+    editedLength = 0;
 
-        let lineSplited = line.split(' ');
+    newLineDeleted = '';
+    newLineAdded = '';
+    diffInfoLines = '';
+    linesNumberAdded = '';
+    linesNumberDeleted = '';
 
-        diffInfoLines += line + '</br>';
+    numberOfChangedFiles = 0;
+    numberOfAdditions = 0;
+    numberOfDeletions = 0;
 
-        let diff = new Diff();
-        diff.meta = diffInfoLines;
-        diffsArrays.push(diff);
-        diffInfoLines = '';
+    editedLines = '';
 
-        initial = lineSplited[1].split(',');
-        initialLength = initial[1];
-        initial = initial[0].replace('-', '');
+    fileInfoLines = '';
 
-        edited = lineSplited[2].split(',');
-        editedLength = edited[1];
-        edited = edited[0].replace('+', '');
+    diffsArrays = [];
+}
 
-    }
-    else if (line.startsWith('+++ ', 0) || line.startsWith('--- ', 0)) {
-        diffInfoLines += line + '</br>';
-    }
-    else if (line.startsWith('+', 0)) {
-        newLineAdded += '<span class="line"><span class="plus">' + line + '</span></span>\n';
-        linesNumberAdded += '<span>' + initial + '</span>';
-        initial++;
-        numberOfAdditions++;
-    }
-    else if (line.startsWith('-', 0)) {
-        newLineDeleted += '<span class="line"><span class="minus">' + line + '</span></span>\n';
-        linesNumberDeleted += '<span>' + edited + '</span>';
-        edited++;
-        numberOfDeletions++;
-    }
-    else if (line.startsWith(' ', 0)) {
-        linesNumberAdded += '<span>' + initial + '</span>';
-        linesNumberDeleted += '<span>' + edited + '</span>';
-        newLineAdded += '<span class="line"><span>' + line + '</span></span>\n';
-        newLineDeleted += '<span class="line"><span>' + line + '</span></span>\n';
-        initial++;
-        edited++;
-    }
-    else if (line.startsWith('diff', 0)) {
-        line = colorFileName(line);
-        diffInfoLines += line;
-        numberOfChangedFiles++;
-    }
-    else {
-        diffInfoLines += line + '</br>';
-    }
+function scanLines() {
+    lines.forEach(function (line) {
 
-});
+        if (line.startsWith('@@ ', 0)) {
+            updateLastDiff();
 
-// Update the last diff of the diffArray
-updateLastDiff();
+            let lineSplited = line.split(' ');
 
-// Print the whole diffArray
-printCodeBlock();
+            diffInfoLines += line + '</br>';
+
+            let diff = new Diff();
+            diff.meta = diffInfoLines;
+            diffsArrays.push(diff);
+            diffInfoLines = '';
+
+            initial = lineSplited[1].split(',');
+            initialLength = initial[1];
+            initial = initial[0].replace('-', '');
+
+            edited = lineSplited[2].split(',');
+            editedLength = edited[1];
+            edited = edited[0].replace('+', '');
+
+        }
+        else if (line.startsWith('+++ ', 0) || line.startsWith('--- ', 0)) {
+            diffInfoLines += line + '</br>';
+        }
+        else if (line.startsWith('+', 0)) {
+            let editedLine = '<span class="line"><span class="plus">' + line + '</span></span>\n';
+            if (viewMode == VIEW_MODE_SPLIT) {
+                newLineAdded += editedLine;
+            } else {
+                editedLines += editedLine;
+            }
+            linesNumberAdded += '<span>' + initial + '</span>';
+            initial++;
+            numberOfAdditions++;
+        }
+        else if (line.startsWith('-', 0)) {
+            let editedLine = '<span class="line"><span class="minus">' + line + '</span></span>\n';
+            if (viewMode == VIEW_MODE_SPLIT) {
+                newLineDeleted += editedLine;
+            } else {
+                editedLines += editedLine;
+            }
+            linesNumberDeleted += '<span>' + edited + '</span>';
+            edited++;
+            numberOfDeletions++;
+        }
+        else if (line.startsWith(' ', 0)) {
+            let editedLine = '<span class="line"><span>' + line + '</span></span>\n';
+            linesNumberAdded += '<span>' + initial + '</span>';
+            linesNumberDeleted += '<span>' + edited + '</span>';
+            if (viewMode == VIEW_MODE_SPLIT) {
+                newLineAdded += editedLine;
+                newLineDeleted += editedLine;
+            } else {
+                editedLines += editedLine;
+            }
+            initial++;
+            edited++;
+        }
+        else if (line.startsWith('diff', 0)) {
+            line = colorFileName(line);
+            diffInfoLines += line;
+            numberOfChangedFiles++;
+        }
+        else {
+            diffInfoLines += line + '</br>';
+        }
+
+    });
+}
 
 /**
  * Add code to the last diff object of the diffArray.
  */
 function updateLastDiff() {
     // Check if there is new code to add on the diff object.
-    if (newLineAdded !== '' || newLineDeleted !== '') {
+    if ((viewMode == VIEW_MODE_SPLIT && (newLineAdded !== '' || newLineDeleted !== '')) || (viewMode == VIEW_MODE_UNIFIED && editedLines !== '')) {
 
         // Get the last diff of the array
         let diff = diffsArrays[diffsArrays.length - 1];
-        diff.oldCode = newLineDeleted;
-        diff.oldCodeLineNumber = linesNumberDeleted;
-        diff.newCodeLineNumber = linesNumberAdded;
-        diff.newCode = newLineAdded;
+        if (viewMode == VIEW_MODE_SPLIT) {
+            diff.oldCode = newLineDeleted;
+            diff.oldCodeLineNumber = linesNumberDeleted;
+            diff.newCodeLineNumber = linesNumberAdded;
+            diff.newCode = newLineAdded;
+        } else {
+            diff.oldCode = editedLines;
+        }
 
         // Reset the temporary code variables .
+        editedLines = '';
         newLineDeleted = '';
         linesNumberDeleted = '';
         linesNumberAdded = '';
@@ -258,8 +310,29 @@ function scrollEvent(event) {
     }
 }
 
-// Print introduction block
-printIntroBlock();
+function changeViewMode(viewModeRequested) {
+    viewMode = viewModeRequested;
+
+    browser.storage.local.set({
+        dpc_view_mode: viewMode
+    });
+
+    setSelectedButton();
+
+    init();
+
+// Extract optional file's metadata.
+    extractFileInfo();
+
+    scanLines();
+
+// Update the last diff of the diffArray
+    updateLastDiff();
+
+// Print the whole diffArray
+    printCodeBlock();
+
+}
 
 /**
  * Print introduction block containing info about number of changed files, additions, and deletions
@@ -270,7 +343,12 @@ function printIntroBlock() {
         return
     }
 
-    let blockIntro = document.createElement('blockIntro');
+
+}
+
+function printHeaderBlock() {
+    let headerBlock = document.createElement('header');
+    headerBlock.innerHTML = '';
 
     // Set text for changed files
     let changedFilesText = numberOfChangedFiles + ' ' + (numberOfChangedFiles > 1 ? 'files' : 'file') + '  changed';
@@ -281,8 +359,53 @@ function printIntroBlock() {
     // Set text for deletions
     let deletionsText = numberOfDeletions + ' ' + (numberOfAdditions > 1 ? 'deletions' : 'deletion') + '(-)';
 
-    // Print the block
-    blockIntro.innerHTML = "<p><span class='changed-files'>" + changedFilesText + "</span>, " +
-        "<span class='additions'>" + additionsText + "</span> <span class='deletions'>" + deletionsText + "</span></p>";
-    document.body.insertBefore(blockIntro, document.body.firstChild);
+    headerBlock.innerHTML += '<div class="file-info"><span class="changed-files">' + changedFilesText + '</span>, ' +
+        '<span class="additions">' + additionsText + '</span> <span class="deletions">' + deletionsText + '</span></divp>';
+    headerBlock.innerHTML += '<div class="view-mode"><button id="unified">Unified</button><button id="split">Split</button></div>';
+
+    document.body.insertBefore(headerBlock, document.body.firstChild);
+
+    document.querySelectorAll(".view-mode button").forEach((element) => {
+        element.addEventListener('click', () => {
+            changeViewMode(element.id);
+        });
+    });
+}
+
+function setSelectedButton() {
+    if (viewMode == VIEW_MODE_SPLIT) {
+        document.querySelector('.view-mode button#split').classList.add("selected");
+        document.querySelector('.view-mode button#unified').classList.remove("selected");
+    } else {
+        document.querySelector('.view-mode button#split').classList.remove("selected");
+        document.querySelector('.view-mode button#unified').classList.add("selected");
+    }
 }
+
+let promises = [];
+
+promises.push(browser.storage.local.get('dpc_view_mode').then(function (res) {
+    console.log(viewMode);
+    viewMode = res.dpc_view_mode;
+    if (typeof viewMode === 'undefined') {
+        viewMode = VIEW_MODE_DEFAULT_VALUE;
+    }
+    console.log(viewMode);
+}));
+
+Promise.all(promises).then(function() {
+    // Extract optional file's metadata.
+    extractFileInfo();
+    scanLines();
+
+    // Update the last diff of the diffArray
+    updateLastDiff();
+
+    // Print the whole diffArray
+    printCodeBlock();
+
+    // Print header block
+    printHeaderBlock();
+
+    setSelectedButton();
+});