Merge pull request #358 from mrfyda/feature/collapse-viewed

feature: Hide viewed files

README.md

@@ -316,6 +316,7 @@ highlightCode(): void
 - `highlight`: syntax highlight the code on the diff: `true` or `false`, default is `true`
 - `fileListToggle`: allow the file summary list to be toggled: `true` or `false`, default is `true`
 - `fileListStartVisible`: choose if the file summary list starts visible: `true` or `false`, default is `false`
+- `fileContentToggle`: allow each file contents to be toggled: `true` or `false`, default is `true`
 
 > NOTE: All the options from Diff2Html are also valid configurations in Diff2HtmlUI
 

src/__tests__/diff2html-tests.ts

@@ -211,6 +211,10 @@ describe('Diff2Html', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">sample</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">
@@ -264,6 +268,10 @@ describe('Diff2Html', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">sample</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">
@@ -337,6 +345,10 @@ describe('Diff2Html', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">sample</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">
@@ -390,6 +402,10 @@ describe('Diff2Html', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">sample</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-files-diff\\">
                 <div class=\\"d2h-file-side-diff\\">
@@ -457,6 +473,10 @@ describe('Diff2Html', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">sample</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-files-diff\\">
                 <div class=\\"d2h-file-side-diff\\">
@@ -544,6 +564,10 @@ describe('Diff2Html', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">sample</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-files-diff\\">
                 <div class=\\"d2h-file-side-diff\\">
@@ -626,7 +650,7 @@ describe('Diff2Html', () => {
         ' \n';
       const result = html(diffExample2, { drawFileList: false });
       expect(result).toMatchInlineSnapshot(`
-"<div class=\\"d2h-wrapper\\">
+        "<div class=\\"d2h-wrapper\\">
             <div id=\\"d2h-211439\\" class=\\"d2h-file-wrapper\\" data-lang=\\"md\\">
             <div class=\\"d2h-file-header\\">
             <span class=\\"d2h-file-name-wrapper\\">
@@ -634,6 +658,10 @@ describe('Diff2Html', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">CHANGELOG.md</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">
@@ -644,10 +672,10 @@ describe('Diff2Html', () => {
             <td class=\\"d2h-info\\">
                 <div class=\\"d2h-code-line d2h-info\\">@@ -1,7 +1,6 @@</div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-cntx\\">
               <div class=\\"line-num1\\">1</div>
-<div class=\\"line-num2\\">1</div>
+        <div class=\\"line-num2\\">1</div>
             </td>
             <td class=\\"d2h-cntx\\">
                 <div class=\\"d2h-code-line d2h-cntx\\">
@@ -655,10 +683,10 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\"># Change Log</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-cntx\\">
               <div class=\\"line-num1\\">2</div>
-<div class=\\"line-num2\\">2</div>
+        <div class=\\"line-num2\\">2</div>
             </td>
             <td class=\\"d2h-cntx\\">
                 <div class=\\"d2h-code-line d2h-cntx\\">
@@ -666,10 +694,10 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\">All notable changes to this project will be documented in this file.</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-cntx\\">
               <div class=\\"line-num1\\">3</div>
-<div class=\\"line-num2\\">3</div>
+        <div class=\\"line-num2\\">3</div>
             </td>
             <td class=\\"d2h-cntx\\">
                 <div class=\\"d2h-code-line d2h-cntx\\">
@@ -677,10 +705,10 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\">This project adheres to [Semantic Versioning](http:&#x2F;&#x2F;semver.org&#x2F;).</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-del\\">
               <div class=\\"line-num1\\">4</div>
-<div class=\\"line-num2\\"></div>
+        <div class=\\"line-num2\\"></div>
             </td>
             <td class=\\"d2h-del\\">
                 <div class=\\"d2h-code-line d2h-del\\">
@@ -688,10 +716,10 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\">$a=&quot;&lt;table&gt;&lt;tr&gt;&lt;td&gt;Use the following format for additions: \` - VERSION: [feature&#x2F;patch (if applicable)] Short description of change. Links to relevant issues&#x2F;PRs.\`</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-cntx\\">
               <div class=\\"line-num1\\">5</div>
-<div class=\\"line-num2\\">4</div>
+        <div class=\\"line-num2\\">4</div>
             </td>
             <td class=\\"d2h-cntx\\">
                 <div class=\\"d2h-code-line d2h-cntx\\">
@@ -699,10 +727,10 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\">$a=&quot;&lt;table&gt;&lt;tr&gt;&lt;td&gt;</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-cntx\\">
               <div class=\\"line-num1\\">6</div>
-<div class=\\"line-num2\\">5</div>
+        <div class=\\"line-num2\\">5</div>
             </td>
             <td class=\\"d2h-cntx\\">
                 <div class=\\"d2h-code-line d2h-cntx\\">
@@ -710,10 +738,10 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\">$a=&quot;&lt;table&gt;&lt;tr&gt;&lt;td&gt;- 1.1.9: Fix around ubuntu&#x27;s inability to cache promises. [#877](https:&#x2F;&#x2F;github.com&#x2F;FredrikNoren&#x2F;ungit&#x2F;pull&#x2F;878)</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-cntx\\">
               <div class=\\"line-num1\\">7</div>
-<div class=\\"line-num2\\">6</div>
+        <div class=\\"line-num2\\">6</div>
             </td>
             <td class=\\"d2h-cntx\\">
                 <div class=\\"d2h-code-line d2h-cntx\\">
@@ -721,16 +749,16 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\">- 1.1.8:</span>
                 </div>
             </td>
-</tr>
-<tr>
+        </tr>
+        <tr>
             <td class=\\"d2h-code-linenumber d2h-info\\"></td>
             <td class=\\"d2h-info\\">
                 <div class=\\"d2h-code-line d2h-info\\">@@ -11,7 +10,7 @@ $a=&amp;quot;&amp;lt;table&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td&amp;gt;- 1.1.9: Fix around ubuntu&amp;#x27;s inability to cache promises. [#8</div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-cntx\\">
               <div class=\\"line-num1\\">11</div>
-<div class=\\"line-num2\\">10</div>
+        <div class=\\"line-num2\\">10</div>
             </td>
             <td class=\\"d2h-cntx\\">
                 <div class=\\"d2h-code-line d2h-cntx\\">
@@ -738,10 +766,10 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\">- 1.1.7:</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-cntx\\">
               <div class=\\"line-num1\\">12</div>
-<div class=\\"line-num2\\">11</div>
+        <div class=\\"line-num2\\">11</div>
             </td>
             <td class=\\"d2h-cntx\\">
                 <div class=\\"d2h-code-line d2h-cntx\\">
@@ -749,10 +777,10 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\">    - Fix diff flickering issue and optimization [#865](https:&#x2F;&#x2F;github.com&#x2F;FredrikNoren&#x2F;ungit&#x2F;pull&#x2F;865)</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-cntx\\">
               <div class=\\"line-num1\\">13</div>
-<div class=\\"line-num2\\">12</div>
+        <div class=\\"line-num2\\">12</div>
             </td>
             <td class=\\"d2h-cntx\\">
                 <div class=\\"d2h-code-line d2h-cntx\\">
@@ -760,10 +788,10 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\">    - Fix credential dialog issue [#864](https:&#x2F;&#x2F;github.com&#x2F;FredrikNoren&#x2F;ungit&#x2F;pull&#x2F;864)</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-del d2h-change\\">
               <div class=\\"line-num1\\">14</div>
-<div class=\\"line-num2\\"></div>
+        <div class=\\"line-num2\\"></div>
             </td>
             <td class=\\"d2h-del d2h-change\\">
                 <div class=\\"d2h-code-line d2h-del d2h-change\\">
@@ -771,10 +799,10 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\">    - Fix HEAD branch order when redraw [#858](https:&#x2F;&#x2F;github.com&#x2F;FredrikNoren&#x2F;ungit&#x2F;issues&#x2F;858)</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-ins d2h-change\\">
               <div class=\\"line-num1\\"></div>
-<div class=\\"line-num2\\">13</div>
+        <div class=\\"line-num2\\">13</div>
             </td>
             <td class=\\"d2h-ins d2h-change\\">
                 <div class=\\"d2h-code-line d2h-ins d2h-change\\">
@@ -782,10 +810,10 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\"><ins>4</ins>    - Fix HEAD branch order when redraw [#858](https:&#x2F;&#x2F;github.com&#x2F;FredrikNoren&#x2F;ungit&#x2F;issues&#x2F;858)</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-cntx\\">
               <div class=\\"line-num1\\">15</div>
-<div class=\\"line-num2\\">14</div>
+        <div class=\\"line-num2\\">14</div>
             </td>
             <td class=\\"d2h-cntx\\">
                 <div class=\\"d2h-code-line d2h-cntx\\">
@@ -793,10 +821,10 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\">- 1.1.6: Fix path auto complete [#861](https:&#x2F;&#x2F;github.com&#x2F;FredrikNoren&#x2F;ungit&#x2F;issues&#x2F;861)</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-cntx\\">
               <div class=\\"line-num1\\">16</div>
-<div class=\\"line-num2\\">15</div>
+        <div class=\\"line-num2\\">15</div>
             </td>
             <td class=\\"d2h-cntx\\">
                 <div class=\\"d2h-code-line d2h-cntx\\">
@@ -804,10 +832,10 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\">- 1.1.5: Update &quot;Toggle all&quot; button after commit or changing selected files [#859](https:&#x2F;&#x2F;github.com&#x2F;FredrikNoren&#x2F;ungit&#x2F;issues&#x2F;859)</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-cntx\\">
               <div class=\\"line-num1\\">17</div>
-<div class=\\"line-num2\\">16</div>
+        <div class=\\"line-num2\\">16</div>
             </td>
             <td class=\\"d2h-cntx\\">
                 <div class=\\"d2h-code-line d2h-cntx\\">
@@ -815,10 +843,10 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\">- 1.1.4: [patch] Promise refactoring</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-linenumber d2h-cntx\\">
               <div class=\\"line-num1\\">18</div>
-<div class=\\"line-num2\\">17</div>
+        <div class=\\"line-num2\\">17</div>
             </td>
             <td class=\\"d2h-cntx\\">
                 <div class=\\"d2h-code-line d2h-cntx\\">
@@ -826,14 +854,14 @@ describe('Diff2Html', () => {
                     <span class=\\"d2h-code-line-ctn\\"><br></span>
                 </div>
             </td>
-</tr>
+        </tr>
                         </tbody>
                     </table>
                 </div>
             </div>
-</div>
-</div>"
-`);
+        </div>
+        </div>"
+      `);
     });
 
     it('should generate html correctly without escaping twice', () => {
@@ -876,6 +904,10 @@ describe('Diff2Html', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">src/index.html</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">
@@ -974,6 +1006,10 @@ describe('Diff2Html', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">web/assets/javascripts/application.js</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">

src/__tests__/line-by-line-tests.ts

@@ -180,6 +180,10 @@ describe('LineByLineRenderer', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">my/file/name.js</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">
@@ -220,6 +224,10 @@ describe('LineByLineRenderer', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">my/file/name.js</span>
             <span class=\\"d2h-tag d2h-added d2h-added-tag\\">ADDED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">
@@ -260,6 +268,10 @@ describe('LineByLineRenderer', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">my/file/name.js</span>
             <span class=\\"d2h-tag d2h-deleted d2h-deleted-tag\\">DELETED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">
@@ -300,6 +312,10 @@ describe('LineByLineRenderer', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">my/file/{name1.js → name2.js}</span>
             <span class=\\"d2h-tag d2h-moved d2h-moved-tag\\">RENAMED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">
@@ -391,6 +407,10 @@ describe('LineByLineRenderer', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">sample</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">
@@ -461,6 +481,10 @@ describe('LineByLineRenderer', () => {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">sample</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-file-diff\\">
                 <div class=\\"d2h-code-wrapper\\">

src/__tests__/side-by-side-printer-tests.ts

@@ -78,13 +78,13 @@ describe('SideBySideRenderer', () => {
       const fileHtml = sideBySideRenderer.generateFileHtml(file);
 
       expect(fileHtml).toMatchInlineSnapshot(`
-Object {
+        Object {
           "left": "<tr>
             <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
             <td class=\\"d2h-info\\">
                 <div class=\\"d2h-code-side-line d2h-info\\">@@ -19,7 +19,7 @@</div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-side-linenumber d2h-cntx\\">
               19
             </td>
@@ -94,7 +94,7 @@ Object {
                     <span class=\\"d2h-code-line-ctn\\">context</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-side-linenumber d2h-del d2h-change\\">
               20
             </td>
@@ -104,7 +104,7 @@ Object {
                     <span class=\\"d2h-code-line-ctn\\"><del>removed</del></span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
               
             </td>
@@ -114,13 +114,13 @@ Object {
                     <span class=\\"d2h-code-line-ctn\\"><br></span>
                 </div>
             </td>
-</tr>",
+        </tr>",
           "right": "<tr>
             <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
             <td class=\\"d2h-info\\">
                 <div class=\\"d2h-code-side-line d2h-info\\"></div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-side-linenumber d2h-cntx\\">
               19
             </td>
@@ -130,7 +130,7 @@ Object {
                     <span class=\\"d2h-code-line-ctn\\">context</span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-side-linenumber d2h-ins d2h-change\\">
               20
             </td>
@@ -140,7 +140,7 @@ Object {
                     <span class=\\"d2h-code-line-ctn\\"><ins>added</ins></span>
                 </div>
             </td>
-</tr><tr>
+        </tr><tr>
             <td class=\\"d2h-code-side-linenumber d2h-ins\\">
               21
             </td>
@@ -150,9 +150,9 @@ Object {
                     <span class=\\"d2h-code-line-ctn\\">another added</span>
                 </div>
             </td>
-</tr>",
-}
-`);
+        </tr>",
+        }
+      `);
     });
   });
 
@@ -168,7 +168,7 @@ Object {
       });
 
       expect(fileHtml).toMatchInlineSnapshot(`
-Object {
+        Object {
           "left": "<tr>
             <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
               
@@ -179,7 +179,7 @@ Object {
                     <span class=\\"d2h-code-line-ctn\\"><br></span>
                 </div>
             </td>
-</tr>",
+        </tr>",
           "right": "<tr>
             <td class=\\"d2h-code-side-linenumber d2h-ins\\">
               30
@@ -190,9 +190,9 @@ Object {
                     <span class=\\"d2h-code-line-ctn\\">test</span>
                 </div>
             </td>
-</tr>",
-}
-`);
+        </tr>",
+        }
+      `);
     });
     it('should work for deletions', () => {
       const hoganUtils = new HoganJsUtils({});
@@ -208,7 +208,7 @@ Object {
       );
 
       expect(fileHtml).toMatchInlineSnapshot(`
-Object {
+        Object {
           "left": "<tr>
             <td class=\\"d2h-code-side-linenumber d2h-del\\">
               30
@@ -219,7 +219,7 @@ Object {
                     <span class=\\"d2h-code-line-ctn\\">test</span>
                 </div>
             </td>
-</tr>",
+        </tr>",
           "right": "<tr>
             <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
               
@@ -230,9 +230,9 @@ Object {
                     <span class=\\"d2h-code-line-ctn\\"><br></span>
                 </div>
             </td>
-</tr>",
-}
-`);
+        </tr>",
+        }
+      `);
     });
   });
 
@@ -286,6 +286,10 @@ Object {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">sample</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-files-diff\\">
                 <div class=\\"d2h-file-side-diff\\">
@@ -367,6 +371,10 @@ Object {
                 <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
             </svg>    <span class=\\"d2h-file-name\\">sample</span>
             <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
+        <label class=\\"d2h-file-collapse\\">
+            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
+            Viewed
+        </label>
             </div>
             <div class=\\"d2h-files-diff\\">
                 <div class=\\"d2h-file-side-diff\\">

src/templates/generic-file-path.mustache

@@ -3,3 +3,7 @@
     <span class="d2h-file-name">{{fileDiffName}}</span>
     {{>fileTag}}
 </span>
+<label class="d2h-file-collapse">
+    <input class="d2h-file-collapse-input" type="checkbox" name="viewed" value="viewed">
+    Viewed
+</label>

src/ui/css/diff2html.css

@@ -5,15 +5,21 @@
  *
  */
 
+.d2h-d-none {
+  display: none;
+}
+
 .d2h-wrapper {
   text-align: left;
 }
 
 .d2h-file-header {
+  display: flex;
   height: 35px;
   padding: 5px 10px;
   border-bottom: 1px solid #d8d8d8;
   background-color: #f7f7f7;
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 .d2h-file-stats {
@@ -51,7 +57,6 @@
   -ms-flex-align: center;
   align-items: center;
   width: 100%;
-  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 15px;
 }
 
@@ -67,6 +72,25 @@
   margin-bottom: 1em;
 }
 
+.d2h-file-collapse {
+  justify-content: flex-end;
+  display: flex;
+  cursor: pointer;
+  font-size: 12px;
+  align-items: center;
+  border-radius: 3px;
+  border: 1px solid #ddd;
+  padding: 4px 8px;
+}
+
+.d2h-file-collapse.d2h-selected {
+  background-color: #c8e1ff;
+}
+
+.d2h-file-collapse-input {
+  margin: 0 4px 0 0;
+}
+
 .d2h-diff-table {
   width: 100%;
   border-collapse: collapse;

src/ui/js/diff2html-ui-base.ts

@@ -15,6 +15,7 @@ export interface Diff2HtmlUIConfig extends Diff2HtmlConfig {
    * Smart selection is now enabled by default with vanilla CSS
    */
   smartSelection?: boolean;
+  fileContentToggle?: boolean;
 }
 
 export const defaultDiff2HtmlUIConfig = {
@@ -28,6 +29,7 @@ export const defaultDiff2HtmlUIConfig = {
    * Smart selection is now enabled by default with vanilla CSS
    */
   smartSelection: true,
+  fileContentToggle: true,
 };
 
 export class Diff2HtmlUI {
@@ -55,6 +57,7 @@ export class Diff2HtmlUI {
     if (this.config.synchronisedScroll) this.synchronisedScroll();
     if (this.config.highlight) this.highlightCode();
     if (this.config.fileListToggle) this.fileListToggle(this.config.fileListStartVisible);
+    if (this.config.fileContentToggle) this.fileContentToggle();
   }
 
   synchronisedScroll(): void {
@@ -108,6 +111,30 @@ export class Diff2HtmlUI {
     else hide();
   }
 
+  fileContentToggle(): void {
+    this.targetElement.querySelectorAll('.d2h-file-collapse').forEach(fileContentToggleBtn => {
+      const toggleFileContents: (selector: string) => void = selector => {
+        const fileContents: HTMLElement | null | undefined = fileContentToggleBtn
+          .closest('.d2h-file-wrapper')
+          ?.querySelector(selector);
+
+        if (fileContents !== null && fileContents !== undefined) {
+          fileContentToggleBtn.classList.toggle('d2h-selected');
+          fileContents.classList.toggle('d2h-d-none');
+        }
+      };
+
+      const toggleHandler: (e: Event) => void = e => {
+        if (fileContentToggleBtn === e.target) return;
+
+        toggleFileContents('.d2h-file-diff');
+        toggleFileContents('.d2h-files-diff');
+      };
+
+      fileContentToggleBtn.addEventListener('click', e => toggleHandler(e));
+    });
+  }
+
   highlightCode(): void {
     if (this.hljs === null) {
       throw new Error('Missing a `highlight.js` implementation. Please provide one when instantiating Diff2HtmlUI.');