Style expanded rows differently (#282)

* style expanded rows differently

* remove log

Author: danvk

ts/codediff/codediff.tsx

@@ -203,15 +203,15 @@ const CodeDiffView = React.memo((props: CodeDiffViewProps) => {
         }
         if (num === existing.numRows) {
           // change the skip to an equal
-          return [{...op, type: 'equal'}];
+          return [{...op, type: 'equal expanded'}];
         }
 
         const {before, after} = op;
         if (num > 0) {
           return [
             {...op, before: [before[0], before[1] - num], after: [after[0], after[1] - num]},
             {
-              type: 'equal',
+              type: 'equal expanded',
               before: [before[1] - num, before[1]],
               after: [after[1] - num, after[1]],
             },
@@ -220,7 +220,7 @@ const CodeDiffView = React.memo((props: CodeDiffViewProps) => {
           num = -num;
           return [
             {
-              type: 'equal',
+              type: 'equal expanded',
               before: [before[0], before[0] + num],
               after: [after[0], after[0] + num],
             },

ts/codediff/codes.ts

@@ -10,7 +10,7 @@ export type OpCode = [
 export type LineRange = [start: number, limit: number];
 
 export interface DiffRange {
-  type: OpType | 'skip';
+  type: OpType | 'skip' | 'equal expanded';
   before: LineRange;
   after: LineRange;
   header?: string;

webdiff/static/css/style.css

@@ -44,6 +44,10 @@ td.code {
   width: 101ch;  /* per-side max line length */
 }
 
+.code.equal.expanded {
+  background-color: #f7f7f7;
+}
+
 .file-selector {
   padding-bottom: 5px;
   border-bottom: 1px solid #ccc;