Identity "large" file patches by diff byte size, not line count

lib/controllers/file-patch-controller.js

@@ -1,5 +1,4 @@
 import path from 'path';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Point} from 'atom';
@@ -12,7 +11,7 @@ import {autobind} from '../helpers';
 
 export default class FilePatchController extends React.Component {
   static propTypes = {
-    largeDiffLineThreshold: PropTypes.number,
+    largeDiffByteThreshold: PropTypes.number,
     getRepositoryForWorkdir: PropTypes.func.isRequired,
     workingDirectoryPath: PropTypes.string.isRequired,
     commandRegistry: PropTypes.object.isRequired,
@@ -30,7 +29,7 @@ export default class FilePatchController extends React.Component {
   }
 
   static defaultProps = {
-    largeDiffLineThreshold: 1000,
+    largeDiffByteThreshold: 32768,
     switchboard: new Switchboard(),
   }
 
@@ -218,7 +217,7 @@ export default class FilePatchController extends React.Component {
             commandRegistry={this.props.commandRegistry}
             tooltips={this.props.tooltips}
             displayLargeDiffMessage={!this.shouldDisplayLargeDiff(this.state.filePatch)}
-            lineCount={this.lineCount}
+            byteCount={this.byteCount}
             handleShowDiffClick={this.handleShowDiffClick}
             hunks={hunks}
             executableModeChange={executableModeChange}
@@ -254,9 +253,8 @@ export default class FilePatchController extends React.Component {
       return true;
     }
 
-    const lineCount = filePatch.getHunks().reduce((acc, hunk) => hunk.getLines().length, 0);
-    this.lineCount = lineCount;
-    return lineCount < this.props.largeDiffLineThreshold;
+    this.byteCount = filePatch.getByteSize();
+    return this.byteCount < this.props.largeDiffByteThreshold;
   }
 
   onDidChangeTitle(callback) {

lib/models/file-patch.js

@@ -55,6 +55,10 @@ class Patch {
     return this.hunks;
   }
 
+  getByteSize() {
+    return this.getHunks().reduce((acc, hunk) => acc + hunk.getByteSize(), 0);
+  }
+
   clone(opts = {}) {
     return new Patch({
       status: opts.status !== undefined ? opts.status : this.status,
@@ -120,6 +124,10 @@ export default class FilePatch {
     return this.getNewFile().getSymlink();
   }
 
+  getByteSize() {
+    return this.getPatch().getByteSize();
+  }
+
   didChangeExecutableMode() {
     const oldMode = this.getOldMode();
     const newMode = this.getNewMode();

lib/models/hunk-line.js

@@ -86,4 +86,8 @@ export default class HunkLine {
   toString() {
     return this.getOrigin() + (this.getStatus() === 'nonewline' ? ' ' : '') + this.getText();
   }
+
+  getByteSize() {
+    return Buffer.byteLength(this.getText(), 'utf8');
+  }
 }

lib/models/hunk.js

@@ -76,4 +76,8 @@ export default class Hunk {
   toString() {
     return this.getLines().reduce((a, b) => a + b.toString() + '\n', this.getHeader());
   }
+
+  getByteSize() {
+    return this.getLines().reduce((acc, line) => acc + line.getByteSize(), 0);
+  }
 }

lib/views/file-patch-view.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import {CompositeDisposable, Disposable} from 'event-kit';
 import cx from 'classnames';
+import bytes from 'bytes';
 
 import HunkView from './hunk-view';
 import SimpleTooltip from '../atom/simple-tooltip';
@@ -48,7 +48,7 @@ export default class FilePatchView extends React.Component {
     didDiveIntoCorrespondingFilePatch: PropTypes.func.isRequired,
     switchboard: PropTypes.instanceOf(Switchboard),
     displayLargeDiffMessage: PropTypes.bool,
-    lineCount: PropTypes.number,
+    byteCount: PropTypes.number,
     handleShowDiffClick: PropTypes.func.isRequired,
   }
 
@@ -82,7 +82,8 @@ export default class FilePatchView extends React.Component {
     this.disposables.add(new Disposable(() => window.removeEventListener('mouseup', this.mouseup)));
   }
 
-  componentWillReceiveProps(nextProps) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const hunksChanged = this.props.hunks.length !== nextProps.hunks.length ||
       this.props.hunks.some((hunk, index) => hunk !== nextProps.hunks[index]);
 
@@ -146,10 +147,12 @@ export default class FilePatchView extends React.Component {
   }
 
   renderLargeDiffMessage() {
+    const human = bytes.format(this.props.byteCount);
+
     return (
       <div className="large-file-patch">
         <p>
-          This is a large diff of {this.props.lineCount} lines. For performance reasons, it is not rendered by default.
+          This is a large {human} diff. For performance reasons, it is not rendered by default.
         </p>
         <button className="btn btn-primary" onClick={this.props.handleShowDiffClick}>Show Diff</button>
       </div>

package.json

@@ -38,6 +38,7 @@
     "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
     "babel-plugin-transform-object-rest-spread": "6.26.0",
     "babel-preset-react": "6.24.1",
+    "bytes": "^3.0.0",
     "classnames": "2.2.5",
     "compare-sets": "1.0.1",
     "dugite": "^1.66.0",

test/controllers/file-patch-controller.test.js

@@ -97,9 +97,8 @@ describe('FilePatchController', function() {
       getFilePatchForPath = sinon.stub(repository, 'getFilePatchForPath');
     });
 
-    describe('when the FilePatch has many lines', function() {
+    describe('when the FilePatch is too large', function() {
       it('renders a confirmation widget', async function() {
-
         const hunk1 = new Hunk(0, 0, 1, 1, '', [
           new HunkLine('line-1', 'added', 1, 1),
           new HunkLine('line-2', 'added', 2, 2),
@@ -112,9 +111,9 @@ describe('FilePatchController', function() {
 
         getFilePatchForPath.returns(filePatch);
 
-        const wrapper = mount(React.cloneElement(component, {largeDiffLineThreshold: 5}));
+        const wrapper = mount(React.cloneElement(component, {largeDiffByteThreshold: 5}));
 
-        await assert.async.match(wrapper.text(), /large diff/);
+        await assert.async.match(wrapper.text(), /large .+ diff/);
       });
 
       it('renders the full diff when the confirmation is clicked', async function() {
@@ -129,7 +128,7 @@ describe('FilePatchController', function() {
         const filePatch = createFilePatch(filePath, filePath, 'modified', [hunk]);
         getFilePatchForPath.returns(filePatch);
 
-        const wrapper = mount(React.cloneElement(component, {largeDiffLineThreshold: 5}));
+        const wrapper = mount(React.cloneElement(component, {largeDiffByteThreshold: 5}));
 
         await assert.async.isTrue(wrapper.update().find('.large-file-patch').exists());
         wrapper.find('.large-file-patch').find('button').simulate('click');
@@ -152,7 +151,7 @@ describe('FilePatchController', function() {
         getFilePatchForPath.returns(filePatch1);
 
         const wrapper = mount(React.cloneElement(component, {
-          filePath: filePatch1.getPath(), largeDiffLineThreshold: 5,
+          filePath: filePatch1.getPath(), largeDiffByteThreshold: 5,
         }));
 
         await assert.async.isTrue(wrapper.update().find('.large-file-patch').exists());