Collapse empty sides of diffs (#281)

* collapse empty sides of diffs

* test case

* format

Author: danvk

testdata/manyfiles/left/drop.txt

@@ -0,0 +1,11 @@
+100
+101
+102
+103
+104
+105
+106
+107
+108
+109
+110

testdata/manyfiles/right/add.txt

@@ -0,0 +1,11 @@
+200
+201
+202
+203
+204
+205
+206
+207
+208
+209
+210

ts/codediff/codediff.tsx

@@ -316,7 +316,9 @@ const CodeDiffView = React.memo((props: CodeDiffViewProps) => {
     copyOnlyMatching(e.nativeEvent, 'td.' + (isLeft ? 'before' : 'after'));
   };
 
-  const divClassName = 'diff' + (selectingState ? ` selecting-${selectingState}` : '');
+  const diffType = beforeLines.length === 0 ? 'add' : afterLines.length === 0 ? 'delete' : 'change';
+  const divClassName =
+    `diff diff-${diffType}` + (selectingState ? ` selecting-${selectingState}` : '');
   const tableClassName = 'diff' + (params.wordWrap ? ' word-wrap' : '');
   return (
     <div className={divClassName} onMouseDown={handleMouseDown} onCopy={handleCopy}>

webdiff/static/codediff.js/codediff.css

@@ -66,6 +66,12 @@ table.diff tr.skip-row td {
   padding: 0.5em;
 }
 
+/* Partially collapse empty sides of diffs */
+.diff.diff-add td.before,
+.diff.diff-delete td.after {
+  width: 51ch;
+}
+
 .line-no, .code {
   padding: 2px;
   height: 1.11em;