opendev/gerrit
Code Issues Proposed changes

Calculate cursor stops after change list rendered

Browse Source 
Polymer.dom.flush is expensive operation, we can use afterNextRender,
so we don't interrupt polymer rendering. It saves around 100 ms on
dashboard.

Change-Id: I5137397d5893e933f602f335c597136581e33ad2
This commit is contained in:
Milutin Kristofic
2019-10-17 13:10:36 +02:00
parent ec34988b63
commit 28dc0891d3
2 changed files with 40 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.js
View File

@@ -366,9 +366,10 @@
_sectionsChanged() { _sectionsChanged() {
// Flush DOM operations so that the list item elements will be loaded. // Flush DOM operations so that the list item elements will be loaded.
Polymer.dom.flush(); Polymer.RenderStatus.afterNextRender(this, () => {
this.$.cursor.stops = this._getListItems(); this.$.cursor.stops = this._getListItems();
this.$.cursor.moveToStart(); this.$.cursor.moveToStart();
});
}, },
_isOutgoing(section) { _isOutgoing(section) {

70
polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_test.html
View File

@@ -172,11 +172,11 @@ limitations under the License.
{_number: 2}, {_number: 2},
]; ];
flushAsynchronousOperations(); flushAsynchronousOperations();
const elementItems = Polymer.dom(element.root).querySelectorAll( Polymer.RenderStatus.afterNextRender(element, () => {
'gr-change-list-item'); const elementItems = Polymer.dom(element.root).querySelectorAll(
assert.equal(elementItems.length, 3); 'gr-change-list-item');
assert.equal(elementItems.length, 3);
flush(() => {
assert.isTrue(elementItems[0].hasAttribute('selected')); assert.isTrue(elementItems[0].hasAttribute('selected'));
MockInteractions.pressAndReleaseKeyOn(element, 74, null, 'j'); MockInteractions.pressAndReleaseKeyOn(element, 74, null, 'j');
assert.equal(element.selectedIndex, 1); assert.equal(element.selectedIndex, 1);
@@ -470,42 +470,44 @@ limitations under the License.
}, },
]; ];
flushAsynchronousOperations(); flushAsynchronousOperations();
const elementItems = Polymer.dom(element.root).querySelectorAll( Polymer.RenderStatus.afterNextRender(element, () => {
'gr-change-list-item'); const elementItems = Polymer.dom(element.root).querySelectorAll(
assert.equal(elementItems.length, 9); 'gr-change-list-item');
assert.equal(elementItems.length, 9);
MockInteractions.pressAndReleaseKeyOn(element, 74); // 'j' MockInteractions.pressAndReleaseKeyOn(element, 74); // 'j'
assert.equal(element.selectedIndex, 1); assert.equal(element.selectedIndex, 1);
MockInteractions.pressAndReleaseKeyOn(element, 74); // 'j' MockInteractions.pressAndReleaseKeyOn(element, 74); // 'j'
const navStub = sandbox.stub(Gerrit.Nav, 'navigateToChange'); const navStub = sandbox.stub(Gerrit.Nav, 'navigateToChange');
assert.equal(element.selectedIndex, 2); assert.equal(element.selectedIndex, 2);
MockInteractions.pressAndReleaseKeyOn(element, 13); // 'enter' MockInteractions.pressAndReleaseKeyOn(element, 13); // 'enter'
assert.deepEqual(navStub.lastCall.args[0], {_number: 2}, assert.deepEqual(navStub.lastCall.args[0], {_number: 2},
'Should navigate to /c/2/'); 'Should navigate to /c/2/');
MockInteractions.pressAndReleaseKeyOn(element, 75); // 'k' MockInteractions.pressAndReleaseKeyOn(element, 75); // 'k'
assert.equal(element.selectedIndex, 1); assert.equal(element.selectedIndex, 1);
MockInteractions.pressAndReleaseKeyOn(element, 13); // 'enter' MockInteractions.pressAndReleaseKeyOn(element, 13); // 'enter'
assert.deepEqual(navStub.lastCall.args[0], {_number: 1}, assert.deepEqual(navStub.lastCall.args[0], {_number: 1},
'Should navigate to /c/1/'); 'Should navigate to /c/1/');
MockInteractions.pressAndReleaseKeyOn(element, 74); // 'j' MockInteractions.pressAndReleaseKeyOn(element, 74); // 'j'
MockInteractions.pressAndReleaseKeyOn(element, 74); // 'j' MockInteractions.pressAndReleaseKeyOn(element, 74); // 'j'
MockInteractions.pressAndReleaseKeyOn(element, 74); // 'j' MockInteractions.pressAndReleaseKeyOn(element, 74); // 'j'
assert.equal(element.selectedIndex, 4); assert.equal(element.selectedIndex, 4);
MockInteractions.pressAndReleaseKeyOn(element, 13); // 'enter' MockInteractions.pressAndReleaseKeyOn(element, 13); // 'enter'
assert.deepEqual(navStub.lastCall.args[0], {_number: 4}, assert.deepEqual(navStub.lastCall.args[0], {_number: 4},
'Should navigate to /c/4/'); 'Should navigate to /c/4/');
MockInteractions.pressAndReleaseKeyOn(element, 82); // 'r' MockInteractions.pressAndReleaseKeyOn(element, 82); // 'r'
const change = element._changeForIndex(element.selectedIndex); const change = element._changeForIndex(element.selectedIndex);
assert.equal(change.reviewed, true, assert.equal(change.reviewed, true,
'Should mark change as reviewed'); 'Should mark change as reviewed');
MockInteractions.pressAndReleaseKeyOn(element, 82); // 'r' MockInteractions.pressAndReleaseKeyOn(element, 82); // 'r'
assert.equal(change.reviewed, false, assert.equal(change.reviewed, false,
'Should mark change as unreviewed'); 'Should mark change as unreviewed');
});
}); });
test('highlight attribute is updated correctly', () => { test('highlight attribute is updated correctly', () => {