opendev/gerrit
Code Issues Proposed changes

ES6ify /gr-diff-cursor/*

Browse Source 
Bug: Issue 6179
Change-Id: Ic0371d79def610897a122b6706f59a219f876d9c
This commit is contained in:
Kasper Nilsson
2017-05-16 14:09:53 -07:00
parent 858f5bee35
commit 20c8a5e14f
2 changed files with 100 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor.js
View File

@@ -14,23 +14,23 @@
(function() {
'use strict';
var DiffSides = {
const DiffSides = {
LEFT: 'left',
RIGHT: 'right',
};
var DiffViewMode = {
const DiffViewMode = {
SIDE_BY_SIDE: 'SIDE_BY_SIDE',
UNIFIED: 'UNIFIED_DIFF',
};
var ScrollBehavior = {
const ScrollBehavior = {
KEEP_VISIBLE: 'keep-visible',
NEVER: 'never',
};
var LEFT_SIDE_CLASS = 'target-side-left';
var RIGHT_SIDE_CLASS = 'target-side-right';
const LEFT_SIDE_CLASS = 'target-side-left';
const RIGHT_SIDE_CLASS = 'target-side-right';
Polymer({
is: 'gr-diff-cursor',
@@ -54,9 +54,7 @@
*/
diffs: {
type: Array,
value: function() {
return [];
},
value() { return []; },
},
/**
@@ -87,30 +85,30 @@
'_diffsChanged(diffs.splices)',
],
attached: function() {
attached() {
// Catch when users are scrolling as the view loads.
this.listen(window, 'scroll', '_handleWindowScroll');
},
detached: function() {
detached() {
this.unlisten(window, 'scroll', '_handleWindowScroll');
},
moveLeft: function() {
moveLeft() {
this.side = DiffSides.LEFT;
if (this._isTargetBlank()) {
this.moveUp();
}
},
moveRight: function() {
moveRight() {
this.side = DiffSides.RIGHT;
if (this._isTargetBlank()) {
this.moveUp();
}
},
moveDown: function() {
moveDown() {
if (this._getViewMode() === DiffViewMode.SIDE_BY_SIDE) {
this.$.cursorManager.next(this._rowHasSide.bind(this));
} else {
@@ -118,7 +116,7 @@
}
},
moveUp: function() {
moveUp() {
if (this._getViewMode() === DiffViewMode.SIDE_BY_SIDE) {
this.$.cursorManager.previous(this._rowHasSide.bind(this));
} else {
@@ -126,31 +124,31 @@
}
},
moveToNextChunk: function() {
moveToNextChunk() {
this.$.cursorManager.next(this._isFirstRowOfChunk.bind(this),
function(target) {
target => {
return target.parentNode.scrollHeight;
});
this._fixSide();
},
moveToPreviousChunk: function() {
moveToPreviousChunk() {
this.$.cursorManager.previous(this._isFirstRowOfChunk.bind(this));
this._fixSide();
},
moveToNextCommentThread: function() {
moveToNextCommentThread() {
this.$.cursorManager.next(this._rowHasThread.bind(this));
this._fixSide();
},
moveToPreviousCommentThread: function() {
moveToPreviousCommentThread() {
this.$.cursorManager.previous(this._rowHasThread.bind(this));
this._fixSide();
},
moveToLineNumber: function(number, side, opt_path) {
var row = this._findRowByNumberAndFile(number, side, opt_path);
moveToLineNumber(number, side, opt_path) {
const row = this._findRowByNumberAndFile(number, side, opt_path);
if (row) {
this.side = side;
this.$.cursorManager.setCursor(row);
@@ -161,8 +159,8 @@
* Get the line number element targeted by the cursor row and side.
* @return {DOMElement}
*/
getTargetLineElement: function() {
var lineElSelector = '.lineNum';
getTargetLineElement() {
let lineElSelector = '.lineNum';
if (!this.diffRow) {
return;
@@ -175,20 +173,20 @@
return this.diffRow.querySelector(lineElSelector);
},
getTargetDiffElement: function() {
getTargetDiffElement() {
// Find the parent diff element of the cursor row.
for (var diff = this.diffRow; diff; diff = diff.parentElement) {
for (let diff = this.diffRow; diff; diff = diff.parentElement) {
if (diff.tagName === 'GR-DIFF') { return diff; }
}
return null;
},
moveToFirstChunk: function() {
moveToFirstChunk() {
this.$.cursorManager.moveToStart();
this.moveToNextChunk();
},
reInitCursor: function() {
reInitCursor() {
this._updateStops();
if (this.initialLineNumber) {
this.moveToLineNumber(this.initialLineNumber, this.side);
@@ -198,14 +196,14 @@
}
},
_handleWindowScroll: function() {
_handleWindowScroll() {
if (this._listeningForScroll) {
this._scrollBehavior = ScrollBehavior.NEVER;
this._listeningForScroll = false;
}
},
handleDiffUpdate: function() {
handleDiffUpdate() {
this._updateStops();
if (!this.diffRow) {
@@ -215,7 +213,7 @@
this._listeningForScroll = false;
},
_handleDiffRenderStart: function() {
_handleDiffRenderStart() {
this._listeningForScroll = true;
},
@@ -225,12 +223,12 @@
* Returns an empty string if an address is not available.
* @return {String}
*/
getAddress: function() {
getAddress() {
if (!this.diffRow) { return ''; }
// Get the line-number cell targeted by the cursor. If the mode is unified
// then prefer the revision cell if available.
var cell;
let cell;
if (this._getViewMode() === DiffViewMode.UNIFIED) {
cell = this.diffRow.querySelector('.lineNum.right');
if (!cell) {
@@ -241,13 +239,13 @@
}
if (!cell) { return ''; }
var number = cell.getAttribute('data-value');
const number = cell.getAttribute('data-value');
if (!number || number === 'FILE') { return ''; }
return (cell.matches('.left') ? 'b' : '') + number;
},
_getViewMode: function() {
_getViewMode() {
if (!this.diffRow) {
return null;
}
@@ -259,20 +257,20 @@
}
},
_rowHasSide: function(row) {
var selector = (this.side === DiffSides.LEFT ? '.left' : '.right') +
_rowHasSide(row) {
const selector = (this.side === DiffSides.LEFT ? '.left' : '.right') +
' + .content';
return !!row.querySelector(selector);
},
_isFirstRowOfChunk: function(row) {
var parentClassList = row.parentNode.classList;
_isFirstRowOfChunk(row) {
const parentClassList = row.parentNode.classList;
return parentClassList.contains('section') &&
parentClassList.contains('delta') &&
!row.previousSibling;
},
_rowHasThread: function(row) {
_rowHasThread(row) {
return row.querySelector('gr-diff-comment-thread');
},
@@ -280,7 +278,7 @@
* If we jumped to a row where there is no content on the current side then
* switch to the alternate side.
*/
_fixSide: function() {
_fixSide() {
if (this._getViewMode() === DiffViewMode.SIDE_BY_SIDE &&
this._isTargetBlank()) {
this.side = this.side === DiffSides.LEFT ?
@@ -288,24 +286,24 @@
}
},
_isTargetBlank: function() {
_isTargetBlank() {
if (!this.diffRow) {
return false;
}
var actions = this._getActionsForRow();
const actions = this._getActionsForRow();
return (this.side === DiffSides.LEFT && !actions.left) ||
(this.side === DiffSides.RIGHT && !actions.right);
},
_rowChanged: function(newRow, oldRow) {
_rowChanged(newRow, oldRow) {
if (oldRow) {
oldRow.classList.remove(LEFT_SIDE_CLASS, RIGHT_SIDE_CLASS);
}
this._updateSideClass();
},
_updateSideClass: function() {
_updateSideClass() {
if (!this.diffRow) {
return;
}
@@ -315,12 +313,12 @@
this.diffRow);
},
_isActionType: function(type) {
_isActionType(type) {
return type !== 'blank' && type !== 'contextControl';
},
_getActionsForRow: function() {
var actions = {left: false, right: false};
_getActionsForRow() {
const actions = {left: false, right: false};
if (this.diffRow) {
actions.left = this._isActionType(
this.diffRow.getAttribute('left-type'));
@@ -330,14 +328,14 @@
return actions;
},
_getStops: function() {
_getStops() {
return this.diffs.reduce(
function(stops, diff) {
(stops, diff) => {
return stops.concat(diff.getCursorStops());
}, []);
},
_updateStops: function() {
_updateStops() {
this.$.cursorManager.stops = this._getStops();
},
@@ -346,14 +344,14 @@
* removed from the cursor.
* @private
*/
_diffsChanged: function(changeRecord) {
_diffsChanged(changeRecord) {
if (!changeRecord) { return; }
this._updateStops();
var splice;
var i;
for (var spliceIdx = 0;
let splice;
let i;
for (let spliceIdx = 0;
changeRecord.indexSplices &&
spliceIdx < changeRecord.indexSplices.length;
spliceIdx++) {
@@ -377,18 +375,16 @@
}
},
_findRowByNumberAndFile: function(targetNumber, side, opt_path) {
var stops;
_findRowByNumberAndFile(targetNumber, side, opt_path) {
let stops;
if (opt_path) {
var diff = this.diffs.filter(function(diff) {
return diff.path === opt_path;
})[0];
const diff = this.diffs.filter(diff => diff.path === opt_path)[0];
stops = diff.getCursorStops();
} else {
stops = this.$.cursorManager.stops;
}
var selector;
for (var i = 0; i < stops.length; i++) {
let selector;
for (let i = 0; i < stops.length; i++) {
selector = '.lineNum.' + side + '[data-value="' + targetNumber + '"]';
if (stops[i].querySelector(selector)) {
return stops[i];

87
polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor_test.html
View File

@@ -38,20 +38,20 @@ limitations under the License.
</test-fixture>
<script>
suite('gr-diff-cursor tests', function() {
var sandbox;
var cursorElement;
var diffElement;
var mockDiffResponse;
suite('gr-diff-cursor tests', () => {
let sandbox;
let cursorElement;
let diffElement;
let mockDiffResponse;
setup(function(done) {
setup(done => {
sandbox = sinon.sandbox.create();
stub('gr-rest-api-interface', {
getLoggedIn: function() { return Promise.resolve(false); },
getLoggedIn() { return Promise.resolve(false); },
});
var fixtureElems = fixture('basic');
const fixtureElems = fixture('basic');
mockDiffResponse = fixtureElems[0];
diffElement = fixtureElems[1];
cursorElement = fixtureElems[2];
@@ -59,27 +59,27 @@ limitations under the License.
// Register the diff with the cursor.
cursorElement.push('diffs', diffElement);
diffElement.$.restAPI.getDiffPreferences().then(function(prefs) {
diffElement.$.restAPI.getDiffPreferences().then(prefs => {
diffElement.prefs = prefs;
});
sandbox.stub(diffElement, '_getDiff', function() {
sandbox.stub(diffElement, '_getDiff', () => {
return Promise.resolve(mockDiffResponse.diffResponse);
});
sandbox.stub(diffElement, '_getDiffComments', function() {
sandbox.stub(diffElement, '_getDiffComments', () => {
return Promise.resolve({baseComments: [], comments: []});
});
sandbox.stub(diffElement, '_getDiffDrafts', function() {
sandbox.stub(diffElement, '_getDiffDrafts', () => {
return Promise.resolve({baseComments: [], comments: []});
});
sandbox.stub(diffElement, '_getDiffRobotComments', function() {
sandbox.stub(diffElement, '_getDiffRobotComments', () => {
return Promise.resolve({baseComments: [], comments: []});
});
var setupDone = function() {
const setupDone = () => {
cursorElement.moveToFirstChunk();
diffElement.removeEventListener('render', setupDone);
done();
@@ -89,13 +89,13 @@ limitations under the License.
diffElement.reload();
});
teardown(() => { sandbox.restore(); });
teardown(() => sandbox.restore());
test('diff cursor functionality (side-by-side)', function() {
test('diff cursor functionality (side-by-side)', () => {
// The cursor has been initialized to the first delta.
assert.isOk(cursorElement.diffRow);
var firstDeltaRow = diffElement.$$('.section.delta .diff-row');
const firstDeltaRow = diffElement.$$('.section.delta .diff-row');
assert.equal(cursorElement.diffRow, firstDeltaRow);
cursorElement.moveDown();
@@ -109,7 +109,7 @@ limitations under the License.
assert.equal(cursorElement.diffRow, firstDeltaRow);
});
test('cursor scroll behavior', function() {
test('cursor scroll behavior', () => {
cursorElement._handleDiffRenderStart();
assert.equal(cursorElement._scrollBehavior, 'keep-visible');
@@ -120,11 +120,10 @@ limitations under the License.
assert.equal(cursorElement._scrollBehavior, 'keep-visible');
});
suite('unified diff', function() {
setup(function(done) {
suite('unified diff', () => {
setup(done => {
// We must allow the diff to re-render after setting the viewMode.
var renderHandler = function() {
const renderHandler = function() {
diffElement.removeEventListener('render', renderHandler);
cursorElement.reInitCursor();
done();
@@ -133,11 +132,11 @@ limitations under the License.
diffElement.viewMode = 'UNIFIED_DIFF';
});
test('diff cursor functionality (unified)', function() {
test('diff cursor functionality (unified)', () => {
// The cursor has been initialized to the first delta.
assert.isOk(cursorElement.diffRow);
var firstDeltaRow = diffElement.$$('.section.delta .diff-row');
let firstDeltaRow = diffElement.$$('.section.delta .diff-row');
assert.equal(cursorElement.diffRow, firstDeltaRow);
firstDeltaRow = diffElement.$$('.section.delta .diff-row');
@@ -155,19 +154,19 @@ limitations under the License.
});
});
test('cursor side functionality', function() {
test('cursor side functionality', () => {
// The side only applies to side-by-side mode, which should be the default
// mode.
assert.equal(diffElement.viewMode, 'SIDE_BY_SIDE');
var firstDeltaSection = diffElement.$$('.section.delta');
var firstDeltaRow = firstDeltaSection.querySelector('.diff-row');
const firstDeltaSection = diffElement.$$('.section.delta');
const firstDeltaRow = firstDeltaSection.querySelector('.diff-row');
// Because the first delta in this diff is on the right, it should be set
// to the right side.
assert.equal(cursorElement.side, 'right');
assert.equal(cursorElement.diffRow, firstDeltaRow);
var firstIndex = cursorElement.$.cursorManager.index;
const firstIndex = cursorElement.$.cursorManager.index;
// Move the side to the left. Because this delta only has a right side, we
// should be moved up to the previous line where there is content on the
@@ -191,16 +190,16 @@ limitations under the License.
firstDeltaSection.nextSibling);
});
test('chunk skip functionality', function() {
var chunks = Polymer.dom(diffElement.root).querySelectorAll(
test('chunk skip functionality', () => {
const chunks = Polymer.dom(diffElement.root).querySelectorAll(
'.section.delta');
var indexOfChunk = function(chunk) {
const indexOfChunk = function(chunk) {
return Array.prototype.indexOf.call(chunks, chunk);
};
// We should be initialized to the first chunk. Since this chunk only has
// content on the right side, our side should be right.
var currentIndex = indexOfChunk(cursorElement.diffRow.parentElement);
let currentIndex = indexOfChunk(cursorElement.diffRow.parentElement);
assert.equal(currentIndex, 0);
assert.equal(cursorElement.side, 'right');
@@ -209,17 +208,17 @@ limitations under the License.
// Since this chunk only has content on the left side. we should have been
// automatically mvoed over.
var previousIndex = currentIndex;
const previousIndex = currentIndex;
currentIndex = indexOfChunk(cursorElement.diffRow.parentElement);
assert.equal(currentIndex, previousIndex + 1);
assert.equal(cursorElement.side, 'left');
});
test('initialLineNumber disabled', function(done) {
var moveToNumStub = sandbox.stub(cursorElement, 'moveToLineNumber');
var moveToChunkStub = sandbox.stub(cursorElement, 'moveToFirstChunk');
test('initialLineNumber disabled', done => {
const moveToNumStub = sandbox.stub(cursorElement, 'moveToLineNumber');
const moveToChunkStub = sandbox.stub(cursorElement, 'moveToFirstChunk');
diffElement.addEventListener('render', function() {
diffElement.addEventListener('render', () => {
assert.isFalse(moveToNumStub.called);
assert.isTrue(moveToChunkStub.called);
done();
@@ -228,11 +227,11 @@ limitations under the License.
diffElement.reload();
});
test('initialLineNumber enabled', function(done) {
var moveToNumStub = sandbox.stub(cursorElement, 'moveToLineNumber');
var moveToChunkStub = sandbox.stub(cursorElement, 'moveToFirstChunk');
test('initialLineNumber enabled', done => {
const moveToNumStub = sandbox.stub(cursorElement, 'moveToLineNumber');
const moveToChunkStub = sandbox.stub(cursorElement, 'moveToFirstChunk');
diffElement.addEventListener('render', function() {
diffElement.addEventListener('render', () => {
assert.isFalse(moveToChunkStub.called);
assert.isTrue(moveToNumStub.called);
assert.equal(moveToNumStub.lastCall.args[0], 10);
@@ -246,7 +245,7 @@ limitations under the License.
diffElement.reload();
});
test('getAddress', function() {
test('getAddress', () => {
// It should initialize to the first chunk: line 5 of the revision.
assert.equal(cursorElement.getAddress(), '5');
@@ -271,9 +270,9 @@ limitations under the License.
assert.equal(cursorElement.getAddress(), '');
});
test('_findRowByNumberAndFile', function() {
test('_findRowByNumberAndFile', () => {
// Get the first ab row after the first chunk.
var row = Polymer.dom(diffElement.root).querySelectorAll('tr')[8];
const row = Polymer.dom(diffElement.root).querySelectorAll('tr')[8];
// It should be line 8 on the right, but line 5 on the left.
assert.equal(cursorElement._findRowByNumberAndFile(8, 'right'), row);