Applies optimizations to diff comment DOM attachment
A source of latency when creating diff comments in large diffs is the
work needed to reflow the diff DOM to make room for the new comment.
This is particularly evident when adding comments to new files because
the diff is built as an addition group representing the entire file, so
the comment causes a reflow on every subsequent line.
This change optimizes this process in three ways.
* **Limit the size of ADD & REMOVE groups:** The diff processor will now
break an add or a remove chunk into a series of smaller chunks of the
same kind. This is controlled by the MAX_GROUP_SIZE constant. In this
way the number of nodes that need to be reflowed when a comment is
added to an add or remove group is limited to the number of subsequent
lines in that group plus the subsequent number of groups.
* **GPU optimize group in general:** Adds CSS properties to diff TBODY
elements (which correspond to groups, for the most part) that trigger
GPU acceleration when available.
* **Apply `table-layout: fixed;`** This style speeds up table reflow in
general.
Change-Id: Ie0e3665b7752fec67f7123cfae70ae99e6f67521
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor.js b/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor.js
index e301d94..2a1e880 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor.js
@@ -32,6 +32,16 @@
REMOVED: 'edit_a',
};
+ /**
+ * The maximum size for an addition or removal chunk before it is broken down
+ * into a series of chunks that are this size at most.
+ *
+ * Note: The value of 70 is chosen so that it is larger than the default
+ * _asyncThreshold of 64, but feel free to tune this constant to your
+ * performance needs.
+ */
+ var MAX_GROUP_SIZE = 70;
+
Polymer({
is: 'gr-diff-processor',
@@ -328,13 +338,17 @@
// If it isn't a common group, append it as-is and update line numbers.
if (!content[i].ab) {
- result.push(content[i]);
if (content[i].a) {
leftLineNum += content[i].a.length;
}
if (content[i].b) {
rightLineNum += content[i].b.length;
}
+
+ this._breakdownGroup(content[i]).forEach(function(group) {
+ result.push(group);
+ });
+
continue;
}
@@ -434,5 +448,48 @@
}
return normalized;
},
+
+ /**
+ * If a group is an addition or a removal, break it down into smaller groups
+ * of that type using the MAX_GROUP_SIZE. If the group is a shared section
+ * or a delta it is returned as the single element of the result array.
+ * @param {!Object} A raw chunk from a diff response.
+ * @return {!Array<!Array<!Object>>}
+ */
+ _breakdownGroup: function(group) {
+ var key = null;
+ if (group.a && !group.b) {
+ key = 'a';
+ } else if (group.b && !group.a) {
+ key = 'b';
+ }
+
+ if (!key) { return [group]; }
+
+ return this._breakdown(group[key], MAX_GROUP_SIZE)
+ .map(function(subgroupLines) {
+ var subGroup = {};
+ subGroup[key] = subgroupLines;
+ return subGroup;
+ });
+ },
+
+ /**
+ * Given an array and a size, return an array of arrays where no inner array
+ * is larger than that size, preserving the original order.
+ * @param {!Array<T>}
+ * @param {number}
+ * @return {!Array<!Array<T>>}
+ * @template T
+ */
+ _breakdown: function(array, size) {
+ if (!array.length) { return []; }
+ if (array.length < size) { return [array]; }
+
+ var head = array.slice(0, array.length - size);
+ var tail = array.slice(array.length - size);
+
+ return this._breakdown(head, size).concat([tail])
+ },
});
})();
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor_test.html b/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor_test.html
index 4d890ea..9d687ac 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor_test.html
@@ -510,6 +510,69 @@
assert.notOk(result[result.length - 1].afterNumber);
});
});
+
+ suite('_breakdown*', function() {
+ var sandbox;
+ setup(function() {
+ sandbox = sinon.sandbox.create();
+ });
+
+ teardown(function() {
+ sandbox.restore();
+ });
+
+ test('_breakdownGroup ignores shared groups', function() {
+ sandbox.stub(element, '_breakdown');
+ var chunk = {ab: ['blah', 'blah', 'blah']};
+ var result = element._breakdownGroup(chunk);
+ assert.deepEqual(result, [chunk]);
+ assert.isFalse(element._breakdown.called);
+ });
+
+ test('_breakdownGroup breaks down additions', function() {
+ sandbox.spy(element, '_breakdown');
+ var chunk = {b: ['blah', 'blah', 'blah']};
+ var result = element._breakdownGroup(chunk);
+ assert.deepEqual(result, [chunk]);
+ assert.isTrue(element._breakdown.called);
+ });
+
+ test('_breakdown common case', function() {
+ var array = 'Lorem ipsum dolor sit amet, suspendisse inceptos'
+ .split(' ');
+ var size = 3;
+
+ var result = element._breakdown(array, size);
+
+ result.forEach(function(subResult) {
+ assert.isAtMost(subResult.length, size);
+ });
+ var flattened = result
+ .reduce(function(a, b) { return a.concat(b); }, []);
+ assert.deepEqual(flattened, array);
+ });
+
+ test('_breakdown smaller than size', function() {
+ var array = 'Lorem ipsum dolor sit amet, suspendisse inceptos'
+ .split(' ');
+ var size = 10;
+ var expected = [array];
+
+ var result = element._breakdown(array, size);
+
+ assert.deepEqual(result, expected);
+ });
+
+ test('_breakdown empty', function() {
+ var array = [];
+ var size = 10;
+ var expected = [];
+
+ var result = element._breakdown(array, size);
+
+ assert.deepEqual(result, expected);
+ });
+ });
});
});
</script>
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index 69bd5e4..63a66a4 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -43,6 +43,14 @@
table {
border-collapse: collapse;
border-right: 1px solid #ddd;
+ table-layout: fixed;
+ }
+ table tbody {
+ -webkit-transform: translateZ(0);
+ -moz-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ -o-transform: translateZ(0);
+ transform: translateZ(0);
}
.lineNum {
background-color: #eee;
@@ -141,6 +149,7 @@
}
.tab {
display: inline-block;
+ position: relative;
}
.tab.withIndicator:before {
color: #C62828;
