Merge "Pre-render the comment thread element"

This commit is contained in:
Andrew Bonventre
2016-08-09 21:20:07 +00:00
committed by Gerrit Code Review
2 changed files with 38 additions and 20 deletions

View File

@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../gr-diff-comment-thread/gr-diff-comment-thread.html">
<link rel="import" href="../gr-diff-processor/gr-diff-processor.html">
<link rel="import" href="../gr-ranged-comment-layer/gr-ranged-comment-layer.html">
<link rel="import" href="../gr-syntax-layer/gr-syntax-layer.html">
<dom-module id="gr-diff-builder">
<template>
<div class="contentWrapper">
@@ -85,6 +85,10 @@ limitations under the License.
this._createIntralineLayer(),
this.$.rangeLayer,
];
this.async(function() {
this._preRenderThread();
});
},
render: function(comments, prefs) {
@@ -309,6 +313,25 @@ limitations under the License.
},
};
},
/**
* In pages with large diffs, creating the first comment thread can be
* slow because nested Polymer elements (particularly
* iron-autogrow-textarea) add style elements to the document head,
* which, in turn, triggers a reflow on the page. Create a hidden
* thread, attach it to the page, and remove it so the stylesheet will
* already exist and the user's comment will be quick to load.
* @see https://gerrit-review.googlesource.com/c/82213/
*/
_preRenderThread: function() {
var thread = document.createElement('gr-diff-comment-thread');
thread.setAttribute('hidden', true);
thread.addDraft();
var parent = Polymer.dom(this.root);
parent.appendChild(thread);
Polymer.dom.flush();
parent.removeChild(thread);
},
});
})();
</script>

View File

@@ -182,6 +182,10 @@ limitations under the License.
});
test('comment thread creation', function() {
var l3 = {id: 'l3', line: 3, updated: '2016-08-09 00:42:32.000000000'};
var l5 = {id: 'l5', line: 5, updated: '2016-08-09 00:42:32.000000000'};
var r5 = {id: 'r5', line: 5, updated: '2016-08-09 00:42:32.000000000'};
builder._comments = {
meta: {
changeNum: '42',
@@ -192,13 +196,8 @@ limitations under the License.
path: '/path/to/foo',
projectConfig: {foo: 'bar'},
},
left: [
{id: 'l3', line: 3},
{id: 'l5', line: 5},
],
right: [
{id: 'r5', line: 5},
],
left: [l3, l5],
right: [r5],
};
function checkThreadProps(threadEl, patchNum, side, comments) {
@@ -214,26 +213,24 @@ limitations under the License.
line.beforeNumber = 5;
line.afterNumber = 5;
var threadEl = builder._commentThreadForLine(line);
checkThreadProps(threadEl, '3', 'REVISION',
[{id: 'l5', line: 5}, {id: 'r5', line: 5}]);
checkThreadProps(threadEl, '3', 'REVISION', [l5, r5]);
threadEl = builder._commentThreadForLine(line, GrDiffBuilder.Side.RIGHT);
checkThreadProps(threadEl, '3', 'REVISION', [{id: 'r5', line: 5}]);
checkThreadProps(threadEl, '3', 'REVISION', [r5]);
threadEl = builder._commentThreadForLine(line, GrDiffBuilder.Side.LEFT);
checkThreadProps(threadEl, '3', 'PARENT', [{id: 'l5', line: 5}]);
checkThreadProps(threadEl, '3', 'PARENT', [l5]);
builder._comments.meta.patchRange.basePatchNum = '1';
threadEl = builder._commentThreadForLine(line);
checkThreadProps(threadEl, '3', 'REVISION',
[{id: 'l5', line: 5}, {id: 'r5', line: 5}]);
checkThreadProps(threadEl, '3', 'REVISION', [l5, r5]);
threadEl = builder._commentThreadForLine(line, GrDiffBuilder.Side.LEFT);
checkThreadProps(threadEl, '1', 'REVISION', [{id: 'l5', line: 5}]);
checkThreadProps(threadEl, '1', 'REVISION', [l5]);
threadEl = builder._commentThreadForLine(line, GrDiffBuilder.Side.RIGHT);
checkThreadProps(threadEl, '3', 'REVISION', [{id: 'r5', line: 5}]);
checkThreadProps(threadEl, '3', 'REVISION', [r5]);
builder._comments.meta.patchRange.basePatchNum = 'PARENT';
@@ -241,15 +238,13 @@ limitations under the License.
line.beforeNumber = 5;
line.afterNumber = 5;
threadEl = builder._commentThreadForLine(line);
checkThreadProps(threadEl, '3', 'PARENT',
[{id: 'l5', line: 5}, {id: 'r5', line: 5}]);
checkThreadProps(threadEl, '3', 'PARENT', [l5, r5]);
line = new GrDiffLine(GrDiffLine.Type.ADD);
line.beforeNumber = 3;
line.afterNumber = 5;
threadEl = builder._commentThreadForLine(line);
checkThreadProps(threadEl, '3', 'REVISION',
[{id: 'l3', line: 3}, {id: 'r5', line: 5}]);
checkThreadProps(threadEl, '3', 'REVISION', [l3, r5]);
});
suite('intraline differences', function() {