Merge branch 'development' into releases/3.3.4-beta2

Author: tidy-dev

app/src/ui/diff/side-by-side-diff-row.tsx

@@ -19,6 +19,12 @@ import { WhitespaceHintPopover } from './whitespace-hint-popover'
 import { TooltipDirection } from '../lib/tooltip'
 import { Button } from '../lib/button'
 
+enum DiffRowPrefix {
+  Added = '+',
+  Deleted = '-',
+  Nothing = '\u{A0}',
+}
+
 interface ISideBySideDiffRowProps {
   /**
    * The row data. This contains most of the information used to render the row.
@@ -219,7 +225,7 @@ export class SideBySideDiffRow extends React.Component<
                   isSelected
                 )}
                 {this.renderHunkHandle()}
-                {this.renderContent(row.data)}
+                {this.renderContent(row.data, DiffRowPrefix.Added)}
                 {this.renderWhitespaceHintPopover(DiffColumn.After)}
               </div>
             </div>
@@ -235,7 +241,7 @@ export class SideBySideDiffRow extends React.Component<
             </div>
             <div className={afterClasses}>
               {this.renderLineNumber(lineNumber, DiffColumn.After, isSelected)}
-              {this.renderContent(row.data)}
+              {this.renderContent(row.data, DiffRowPrefix.Added)}
               {this.renderWhitespaceHintPopover(DiffColumn.After)}
             </div>
             {this.renderHunkHandle()}
@@ -257,7 +263,7 @@ export class SideBySideDiffRow extends React.Component<
                   isSelected
                 )}
                 {this.renderHunkHandle()}
-                {this.renderContent(row.data)}
+                {this.renderContent(row.data, DiffRowPrefix.Deleted)}
                 {this.renderWhitespaceHintPopover(DiffColumn.Before)}
               </div>
             </div>
@@ -271,12 +277,12 @@ export class SideBySideDiffRow extends React.Component<
           >
             <div className={beforeClasses}>
               {this.renderLineNumber(lineNumber, DiffColumn.Before, isSelected)}
-              {this.renderContent(row.data)}
+              {this.renderContent(row.data, DiffRowPrefix.Deleted)}
               {this.renderWhitespaceHintPopover(DiffColumn.Before)}
             </div>
             <div className={afterClasses}>
               {this.renderLineNumber(undefined, DiffColumn.After)}
-              {this.renderContentFromString('')}
+              {this.renderContentFromString('', [])}
               {this.renderWhitespaceHintPopover(DiffColumn.After)}
             </div>
             {this.renderHunkHandle()}
@@ -296,7 +302,7 @@ export class SideBySideDiffRow extends React.Component<
                 DiffColumn.Before,
                 before.isSelected
               )}
-              {this.renderContent(before)}
+              {this.renderContent(before, DiffRowPrefix.Deleted)}
               {this.renderWhitespaceHintPopover(DiffColumn.Before)}
             </div>
             <div
@@ -308,7 +314,7 @@ export class SideBySideDiffRow extends React.Component<
                 DiffColumn.After,
                 after.isSelected
               )}
-              {this.renderContent(after)}
+              {this.renderContent(after, DiffRowPrefix.Added)}
               {this.renderWhitespaceHintPopover(DiffColumn.After)}
             </div>
             {this.renderHunkHandle()}
@@ -338,23 +344,28 @@ export class SideBySideDiffRow extends React.Component<
 
   private renderContentFromString(
     content: string,
-    tokens: ReadonlyArray<ILineTokens> = []
+    tokens: ReadonlyArray<ILineTokens> = [],
+    prefix: DiffRowPrefix = DiffRowPrefix.Nothing
   ) {
     return this.renderContent({ content, tokens, noNewLineIndicator: false })
   }
 
   private renderContent(
-    data: Pick<IDiffRowData, 'content' | 'noNewLineIndicator' | 'tokens'>
+    data: Pick<IDiffRowData, 'content' | 'noNewLineIndicator' | 'tokens'>,
+    prefix: DiffRowPrefix = DiffRowPrefix.Nothing
   ) {
     return (
       <div className="content" onContextMenu={this.props.onContextMenuText}>
-        {syntaxHighlightLine(data.content, data.tokens)}
-        {data.noNewLineIndicator && (
-          <Octicon
-            symbol={narrowNoNewlineSymbol}
-            title="No newline at end of file"
-          />
-        )}
+        <div className="prefix">&nbsp;&nbsp;{prefix}&nbsp;&nbsp;</div>
+        <div className="content-wrapper">
+          {syntaxHighlightLine(data.content, data.tokens)}
+          {data.noNewLineIndicator && (
+            <Octicon
+              symbol={narrowNoNewlineSymbol}
+              title="No newline at end of file"
+            />
+          )}
+        </div>
       </div>
     )
   }

app/styles/ui/_side-by-side-diff.scss

@@ -163,7 +163,7 @@
   }
 
   .content {
-    padding-left: var(--spacing);
+    display: flex;
     white-space: pre-wrap;
     overflow-y: auto;
     flex-grow: 1;
@@ -175,9 +175,8 @@
       user-select: text;
     }
 
-    &:before {
-      content: ' ';
-      padding-right: var(--spacing);
+    .prefix {
+      user-select: none;
     }
 
     .octicon {
@@ -264,20 +263,6 @@
       }
     }
 
-    &.added,
-    &.modified {
-      .after .content:before {
-        content: '+';
-      }
-    }
-
-    &.deleted,
-    &.modified {
-      .before .content:before {
-        content: '-';
-      }
-    }
-
     &.context .before,
     &.context .after {
       background: var(--diff-background-color);