ES6ify /gr-diff-highlight/*
Bug: Issue 6179
Change-Id: I82ae4ef1557dafdcaf80e332c2c713fcc609a006
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-annotation.js b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-annotation.js
index bb5b938..e20542c 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-annotation.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-annotation.js
@@ -18,12 +18,12 @@
if (window.GrAnnotation) { return; }
// TODO(wyatta): refactor this to be <MARK> rather than <HL>.
- var ANNOTATION_TAG = 'HL';
+ const ANNOTATION_TAG = 'HL';
// Astral code point as per https://mathiasbynens.be/notes/javascript-unicode
- var REGEX_ASTRAL_SYMBOL = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
+ const REGEX_ASTRAL_SYMBOL = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
- var GrAnnotation = {
+ const GrAnnotation = {
/**
* The DOM API textContent.length calculation is broken when the text
@@ -31,11 +31,11 @@
* @param {Text} A text node.
* @return {Number} The length of the text.
*/
- getLength: function(node) {
+ getLength(node) {
return this.getStringLength(node.textContent);
},
- getStringLength: function(str) {
+ getStringLength(str) {
return str.replace(REGEX_ASTRAL_SYMBOL, '_').length;
},
@@ -44,14 +44,13 @@
* element. If the element has child elements, the range is split and
* applied as deeply as possible.
*/
- annotateElement: function(parent, offset, length, cssClass) {
- var nodes = [].slice.apply(parent.childNodes);
- var node;
- var nodeLength;
- var subLength;
+ annotateElement(parent, offset, length, cssClass) {
+ const nodes = [].slice.apply(parent.childNodes);
+ let node;
+ let nodeLength;
+ let subLength;
- for (var i = 0; i < nodes.length; i++) {
- node = nodes[i];
+ for (const node of nodes) {
nodeLength = this.getLength(node);
// If the current node is completely before the offset.
@@ -85,8 +84,8 @@
*
* @return {!Element} Wrapped node.
*/
- wrapInHighlight: function(node, cssClass) {
- var hl;
+ wrapInHighlight(node, cssClass) {
+ let hl;
if (node.tagName === ANNOTATION_TAG) {
hl = node;
hl.classList.add(cssClass);
@@ -108,7 +107,7 @@
* @param {string} cssClass
* @param {boolean=} opt_firstPart
*/
- splitAndWrapInHighlight: function(node, offset, cssClass, opt_firstPart) {
+ splitAndWrapInHighlight(node, offset, cssClass, opt_firstPart) {
if (this.getLength(node) === offset || offset === 0) {
return this.wrapInHighlight(node, cssClass);
} else {
@@ -130,14 +129,14 @@
* @param {number} offset
* @return {!Node} Trailing Node.
*/
- splitNode: function(element, offset) {
+ splitNode(element, offset) {
if (element instanceof Text) {
return this.splitTextNode(element, offset);
}
- var tail = element.cloneNode(false);
+ const tail = element.cloneNode(false);
element.parentElement.insertBefore(tail, element.nextSibling);
// Skip nodes before offset.
- var node = element.firstChild;
+ let node = element.firstChild;
while (node &&
this.getLength(node) <= offset ||
this.getLength(node) === 0) {
@@ -163,17 +162,17 @@
* @param {number} offset
* @return {!Text} Trailing Text Node.
*/
- splitTextNode: function(node, offset) {
+ splitTextNode(node, offset) {
if (node.textContent.match(REGEX_ASTRAL_SYMBOL)) {
// TODO (viktard): Polyfill Array.from for IE10.
- var head = Array.from(node.textContent);
- var tail = head.splice(offset);
- var parent = node.parentNode;
+ const head = Array.from(node.textContent);
+ const tail = head.splice(offset);
+ const parent = node.parentNode;
// Split the content of the original node.
node.textContent = head.join('');
- var tailNode = document.createTextNode(tail.join(''));
+ const tailNode = document.createTextNode(tail.join(''));
if (parent) {
parent.insertBefore(tailNode, node.nextSibling);
}
@@ -183,8 +182,8 @@
}
},
- _annotateText: function(node, offset, length, cssClass) {
- var nodeLength = this.getLength(node);
+ _annotateText(node, offset, length, cssClass) {
+ const nodeLength = this.getLength(node);
// There are four cases:
// 1) Entire node is highlighted.
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-annotation_test.html b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-annotation_test.html
index 0a03539..b25b4fb 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-annotation_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-annotation_test.html
@@ -33,18 +33,18 @@
</test-fixture>
<script>
- suite('annotation', function() {
- var str;
- var parent;
- var textNode;
+ suite('annotation', () => {
+ let str;
+ let parent;
+ let textNode;
- setup(function() {
+ setup(() => {
parent = fixture('basic');
textNode = parent.childNodes[0];
str = textNode.textContent;
});
- test('_annotateText Case 1', function() {
+ test('_annotateText Case 1', () => {
GrAnnotation._annotateText(textNode, 0, str.length, 'foobar');
assert.equal(parent.childNodes.length, 1);
@@ -54,10 +54,10 @@
assert.equal(parent.childNodes[0].childNodes[0].textContent, str);
});
- test('_annotateText Case 2', function() {
- var length = 12;
- var substr = str.substr(0, length);
- var remainder = str.substr(length);
+ test('_annotateText Case 2', () => {
+ const length = 12;
+ const substr = str.substr(0, length);
+ const remainder = str.substr(length);
GrAnnotation._annotateText(textNode, 0, length, 'foobar');
@@ -72,11 +72,11 @@
assert.equal(parent.childNodes[1].textContent, remainder);
});
- test('_annotateText Case 3', function() {
- var index = 12;
- var length = str.length - index;
- var remainder = str.substr(0, index);
- var substr = str.substr(index);
+ test('_annotateText Case 3', () => {
+ const index = 12;
+ const length = str.length - index;
+ const remainder = str.substr(0, index);
+ const substr = str.substr(index);
GrAnnotation._annotateText(textNode, index, length, 'foobar');
@@ -91,13 +91,13 @@
assert.equal(parent.childNodes[1].childNodes[0].textContent, substr);
});
- test('_annotateText Case 4', function() {
- var index = str.indexOf('dolor');
- var length = 'dolor '.length;
+ test('_annotateText Case 4', () => {
+ const index = str.indexOf('dolor');
+ const length = 'dolor '.length;
- var remainderPre = str.substr(0, index);
- var substr = str.substr(index, length);
- var remainderPost = str.substr(index + length);
+ const remainderPre = str.substr(0, index);
+ const substr = str.substr(index, length);
+ const remainderPost = str.substr(index + length);
GrAnnotation._annotateText(textNode, index, length, 'foobar');
@@ -115,42 +115,42 @@
assert.equal(parent.childNodes[2].textContent, remainderPost);
});
- test('_annotateElement design doc example', function() {
- var layers = [
+ test('_annotateElement design doc example', () => {
+ const layers = [
'amet, ',
'inceptos ',
'amet, ',
- 'et, suspendisse ince'
+ 'et, suspendisse ince',
];
// Apply the layers successively.
- layers.forEach(function(layer, i) {
+ layers.forEach((layer, i) => {
GrAnnotation.annotateElement(
- parent, str.indexOf(layer), layer.length, 'layer-' + (i + 1));
+ parent, str.indexOf(layer), layer.length, `layer-${i + 1}`);
});
assert.equal(parent.textContent, str);
// Layer 1:
- var layer1 = parent.querySelectorAll('.layer-1');
+ const layer1 = parent.querySelectorAll('.layer-1');
assert.equal(layer1.length, 1);
assert.equal(layer1[0].textContent, layers[0]);
assert.equal(layer1[0].parentElement, parent);
// Layer 2:
- var layer2 = parent.querySelectorAll('.layer-2');
+ const layer2 = parent.querySelectorAll('.layer-2');
assert.equal(layer2.length, 1);
assert.equal(layer2[0].textContent, layers[1]);
assert.equal(layer2[0].parentElement, parent);
// Layer 3:
- var layer3 = parent.querySelectorAll('.layer-3');
+ const layer3 = parent.querySelectorAll('.layer-3');
assert.equal(layer3.length, 1);
assert.equal(layer3[0].textContent, layers[2]);
assert.equal(layer3[0].parentElement, layer1[0]);
// Layer 4:
- var layer4 = parent.querySelectorAll('.layer-4');
+ const layer4 = parent.querySelectorAll('.layer-4');
assert.equal(layer4.length, 3);
assert.equal(layer4[0].textContent, 'et, ');
@@ -168,13 +168,13 @@
layers[3]);
});
- test('splitTextNode', function() {
- var helloString = 'hello';
- var asciiString = 'ASCII';
- var unicodeString = 'Unic💢de';
+ test('splitTextNode', () => {
+ const helloString = 'hello';
+ const asciiString = 'ASCII';
+ const unicodeString = 'Unic💢de';
- var node;
- var tail;
+ let node;
+ let tail;
// Non-unicode path:
node = document.createTextNode(helloString + asciiString);
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.js b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.js
index e32d7d6..895f777 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.js
@@ -42,7 +42,7 @@
return this._cachedDiffBuilder;
},
- _enableSelectionObserver: function(loggedIn, isAttached) {
+ _enableSelectionObserver(loggedIn, isAttached) {
if (loggedIn && isAttached) {
this.listen(document, 'selectionchange', '_handleSelectionChange');
} else {
@@ -50,11 +50,11 @@
}
},
- isRangeSelected: function() {
+ isRangeSelected() {
return !!this.$$('gr-selection-action-box');
},
- _handleSelectionChange: function() {
+ _handleSelectionChange() {
// Can't use up or down events to handle selection started and/or ended in
// in comment threads or outside of diff.
// Debounce removeActionBox to give it a chance to react to click/tap.
@@ -62,31 +62,31 @@
this.debounce('selectionChange', this._handleSelection, 200);
},
- _handleCommentMouseOver: function(e) {
- var comment = e.detail.comment;
+ _handleCommentMouseOver(e) {
+ const comment = e.detail.comment;
if (!comment.range) { return; }
- var lineEl = this.diffBuilder.getLineElByChild(e.target);
- var side = this.diffBuilder.getSideByLineEl(lineEl);
- var index = this._indexOfComment(side, comment);
+ const lineEl = this.diffBuilder.getLineElByChild(e.target);
+ const side = this.diffBuilder.getSideByLineEl(lineEl);
+ const index = this._indexOfComment(side, comment);
if (index !== undefined) {
this.set(['comments', side, index, '__hovering'], true);
}
},
- _handleCommentMouseOut: function(e) {
- var comment = e.detail.comment;
+ _handleCommentMouseOut(e) {
+ const comment = e.detail.comment;
if (!comment.range) { return; }
- var lineEl = this.diffBuilder.getLineElByChild(e.target);
- var side = this.diffBuilder.getSideByLineEl(lineEl);
- var index = this._indexOfComment(side, comment);
+ const lineEl = this.diffBuilder.getLineElByChild(e.target);
+ const side = this.diffBuilder.getSideByLineEl(lineEl);
+ const index = this._indexOfComment(side, comment);
if (index !== undefined) {
this.set(['comments', side, index, '__hovering'], false);
}
},
- _indexOfComment: function(side, comment) {
- var idProp = comment.id ? 'id' : '__draftID';
- for (var i = 0; i < this.comments[side].length; i++) {
+ _indexOfComment(side, comment) {
+ const idProp = comment.id ? 'id' : '__draftID';
+ for (let i = 0; i < this.comments[side].length; i++) {
if (comment[idProp] &&
this.comments[side][i][idProp] === comment[idProp]) {
return i;
@@ -94,8 +94,8 @@
}
},
- _normalizeRange: function(domRange) {
- var range = GrRangeNormalizer.normalize(domRange);
+ _normalizeRange(domRange) {
+ const range = GrRangeNormalizer.normalize(domRange);
return this._fixTripleClickSelection({
start: this._normalizeSelectionSide(
range.startContainer, range.startOffset),
@@ -115,19 +115,19 @@
* @param {!Range} domRange DOM Range object
* @return {!Object} fixed normalized range
*/
- _fixTripleClickSelection: function(range, domRange) {
+ _fixTripleClickSelection(range, domRange) {
if (!range.start) {
// Selection outside of current diff.
return range;
}
- var start = range.start;
- var end = range.end;
- var endsAtOtherSideLineNum =
+ const start = range.start;
+ const end = range.end;
+ const endsAtOtherSideLineNum =
domRange.endOffset === 0 &&
domRange.endContainer.nodeName === 'TD' &&
(domRange.endContainer.classList.contains('left') ||
domRange.endContainer.classList.contains('right'));
- var endsOnOtherSideStart = endsAtOtherSideLineNum ||
+ const endsOnOtherSideStart = endsAtOtherSideLineNum ||
end &&
end.column === 0 &&
end.line === start.line &&
@@ -160,33 +160,33 @@
* column: Number
* }}
*/
- _normalizeSelectionSide: function(node, offset) {
- var column;
+ _normalizeSelectionSide(node, offset) {
+ let column;
if (!this.contains(node)) {
return;
}
- var lineEl = this.diffBuilder.getLineElByChild(node);
+ const lineEl = this.diffBuilder.getLineElByChild(node);
if (!lineEl) {
return;
}
- var side = this.diffBuilder.getSideByLineEl(lineEl);
+ const side = this.diffBuilder.getSideByLineEl(lineEl);
if (!side) {
return;
}
- var line = this.diffBuilder.getLineNumberByChild(lineEl);
+ const line = this.diffBuilder.getLineNumberByChild(lineEl);
if (!line) {
return;
}
- var contentText = this.diffBuilder.getContentByLineEl(lineEl);
+ const contentText = this.diffBuilder.getContentByLineEl(lineEl);
if (!contentText) {
return;
}
- var contentTd = contentText.parentElement;
+ const contentTd = contentText.parentElement;
if (!contentTd.contains(node)) {
node = contentText;
column = 0;
} else {
- var thread = contentTd.querySelector('gr-diff-comment-thread');
+ const thread = contentTd.querySelector('gr-diff-comment-thread');
if (thread && thread.contains(node)) {
column = this._getLength(contentText);
node = contentText;
@@ -196,28 +196,28 @@
}
return {
- node: node,
- side: side,
- line: line,
- column: column,
+ node,
+ side,
+ line,
+ column,
};
},
- _handleSelection: function() {
- var selection = window.getSelection();
+ _handleSelection() {
+ const selection = window.getSelection();
if (selection.rangeCount != 1) {
return;
}
- var range = selection.getRangeAt(0);
+ const range = selection.getRangeAt(0);
if (range.collapsed) {
return;
}
- var normalizedRange = this._normalizeRange(range);
- var start = normalizedRange.start;
+ const normalizedRange = this._normalizeRange(range);
+ const start = normalizedRange.start;
if (!start) {
return;
}
- var end = normalizedRange.end;
+ const end = normalizedRange.end;
if (!end) {
return;
}
@@ -229,7 +229,7 @@
// TODO (viktard): Drop empty first and last lines from selection.
- var actionBox = document.createElement('gr-selection-action-box');
+ const actionBox = document.createElement('gr-selection-action-box');
Polymer.dom(this.root).appendChild(actionBox);
actionBox.range = {
startLine: start.line,
@@ -251,22 +251,22 @@
}
},
- _createComment: function(e) {
+ _createComment(e) {
this._removeActionBox();
},
- _removeActionBoxDebounced: function() {
+ _removeActionBoxDebounced() {
this.debounce('removeActionBox', this._removeActionBox, 10);
},
- _removeActionBox: function() {
- var actionBox = this.$$('gr-selection-action-box');
+ _removeActionBox() {
+ const actionBox = this.$$('gr-selection-action-box');
if (actionBox) {
Polymer.dom(this.root).removeChild(actionBox);
}
},
- _convertOffsetToColumn: function(el, offset) {
+ _convertOffsetToColumn(el, offset) {
if (el instanceof Element && el.classList.contains('content')) {
return offset;
}
@@ -290,16 +290,16 @@
* @param {function(Node):boolean} callback
* @param {Object=} opt_flags If flags.left is true, traverse left.
*/
- _traverseContentSiblings: function(startNode, callback, opt_flags) {
- var travelLeft = opt_flags && opt_flags.left;
- var node = startNode;
+ _traverseContentSiblings(startNode, callback, opt_flags) {
+ const travelLeft = opt_flags && opt_flags.left;
+ let node = startNode;
while (node) {
if (node instanceof Element &&
node.tagName !== 'HL' &&
node.tagName !== 'SPAN') {
break;
}
- var nextNode = travelLeft ? node.previousSibling : node.nextSibling;
+ const nextNode = travelLeft ? node.previousSibling : node.nextSibling;
if (callback(node)) {
break;
}
@@ -314,7 +314,7 @@
* @param {!Node} node
* @return {number}
*/
- _getLength: function(node) {
+ _getLength(node) {
if (node instanceof Element && node.classList.contains('content')) {
return this._getLength(node.querySelector('.contentText'));
} else {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight_test.html b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight_test.html
index 827437c..c1254bd 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight_test.html
@@ -124,39 +124,39 @@
</test-fixture>
<script>
- suite('gr-diff-highlight', function() {
- var element;
- var sandbox;
+ suite('gr-diff-highlight', () => {
+ let element;
+ let sandbox;
- setup(function() {
+ setup(() => {
sandbox = sinon.sandbox.create();
element = fixture('basic')[1];
});
- teardown(function() {
+ teardown(() => {
sandbox.restore();
});
- suite('selectionchange event handling', function() {
- var emulateSelection = function() {
+ suite('selectionchange event handling', () => {
+ const emulateSelection = function() {
document.dispatchEvent(new CustomEvent('selectionchange'));
element.flushDebouncer('selectionChange');
element.flushDebouncer('removeActionBox');
};
- setup(function() {
+ setup(() => {
sandbox.stub(element, '_handleSelection');
sandbox.stub(element, '_removeActionBox');
});
- test('enabled if logged in', function() {
+ test('enabled if logged in', () => {
element.loggedIn = true;
emulateSelection();
assert.isTrue(element._handleSelection.called);
assert.isTrue(element._removeActionBox.called);
});
- test('ignored if logged out', function() {
+ test('ignored if logged out', () => {
element.loggedIn = false;
emulateSelection();
assert.isFalse(element._handleSelection.called);
@@ -164,10 +164,10 @@
});
});
- suite('comment events', function() {
- var builder;
+ suite('comment events', () => {
+ let builder;
- setup(function() {
+ setup(() => {
builder = {
getContentsByLineRange: sandbox.stub().returns([]),
getLineElByChild: sandbox.stub().returns({}),
@@ -176,25 +176,25 @@
element._cachedDiffBuilder = builder;
});
- test('comment-mouse-over from line comments is ignored', function() {
+ test('comment-mouse-over from line comments is ignored', () => {
sandbox.stub(element, 'set');
element.fire('comment-mouse-over', {comment: {}});
assert.isFalse(element.set.called);
});
- test('comment-mouse-over from ranged comment causes set', function() {
+ test('comment-mouse-over from ranged comment causes set', () => {
sandbox.stub(element, 'set');
sandbox.stub(element, '_indexOfComment').returns(0);
element.fire('comment-mouse-over', {comment: {range: {}}});
assert.isTrue(element.set.called);
});
- test('comment-mouse-out from line comments is ignored', function() {
+ test('comment-mouse-out from line comments is ignored', () => {
element.fire('comment-mouse-over', {comment: {}});
assert.isFalse(builder.getContentsByLineRange.called);
});
- test('on create-comment action box is removed', function() {
+ test('on create-comment action box is removed', () => {
sandbox.stub(element, '_removeActionBox');
element.fire('create-comment', {
comment: {
@@ -205,21 +205,21 @@
});
});
- suite('selection', function() {
- var diff;
- var builder;
- var contentStubs;
+ suite('selection', () => {
+ let diff;
+ let builder;
+ let contentStubs;
- var stubContent = function(line, side, opt_child) {
- var contentTd = diff.querySelector(
- '.' + side + '.lineNum[data-value="' + line + '"] ~ .content');
- var contentText = contentTd.querySelector('.contentText');
- var lineEl = diff.querySelector(
- '.' + side + '.lineNum[data-value="' + line + '"]');
+ const stubContent = (line, side, opt_child) => {
+ const contentTd = diff.querySelector(
+ `.${side}.lineNum[data-value="${line}"] ~ .content`);
+ const contentText = contentTd.querySelector('.contentText');
+ const lineEl = diff.querySelector(
+ `.${side}.lineNum[data-value="${line}"]`);
contentStubs.push({
- lineEl: lineEl,
- contentTd: contentTd,
- contentText: contentText,
+ lineEl,
+ contentTd,
+ contentText,
});
builder.getContentByLineEl.withArgs(lineEl).returns(contentText);
builder.getLineNumberByChild.withArgs(lineEl).returns(line);
@@ -228,34 +228,29 @@
return contentText;
};
- var emulateSelection = function(
- startNode, startOffset, endNode, endOffset) {
- var selection = window.getSelection();
- var range = document.createRange();
+ const emulateSelection = (startNode, startOffset, endNode, endOffset) => {
+ const selection = window.getSelection();
+ const range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
selection.addRange(range);
element._handleSelection();
};
- var getActionRange = function() {
- return Polymer.dom(element.root).querySelector(
- 'gr-selection-action-box').range;
- };
+ const getActionRange = () =>
+ Polymer.dom(element.root).querySelector(
+ 'gr-selection-action-box').range;
- var getActionSide = function() {
- return Polymer.dom(element.root).querySelector(
- 'gr-selection-action-box').side;
- };
+ const getActionSide = () =>
+ Polymer.dom(element.root).querySelector(
+ 'gr-selection-action-box').side;
- var getLineElByChild = function(node) {
- var stubs = contentStubs.find(function(stub) {
- return stub.contentTd.contains(node);
- });
+ const getLineElByChild = node => {
+ const stubs = contentStubs.find(stub => stub.contentTd.contains(node));
return stubs && stubs.lineEl;
};
- setup(function() {
+ setup(() => {
contentStubs = [];
stub('gr-selection-action-box', {
placeAbove: sandbox.stub(),
@@ -264,20 +259,20 @@
builder = {
getContentByLine: sandbox.stub(),
getContentByLineEl: sandbox.stub(),
- getLineElByChild: getLineElByChild,
+ getLineElByChild,
getLineNumberByChild: sandbox.stub(),
getSideByLineEl: sandbox.stub(),
};
element._cachedDiffBuilder = builder;
});
- teardown(function() {
+ teardown(() => {
contentStubs = null;
window.getSelection().removeAllRanges();
});
- test('single line', function() {
- var content = stubContent(138, 'left');
+ test('single line', () => {
+ const content = stubContent(138, 'left');
emulateSelection(content.firstChild, 5, content.firstChild, 12);
assert.isTrue(element.isRangeSelected());
assert.deepEqual(getActionRange(), {
@@ -289,9 +284,9 @@
assert.equal(getActionSide(), 'left');
});
- test('multiline', function() {
- var startContent = stubContent(119, 'right');
- var endContent = stubContent(120, 'right');
+ test('multiline', () => {
+ const startContent = stubContent(119, 'right');
+ const endContent = stubContent(120, 'right');
emulateSelection(
startContent.firstChild, 10, endContent.lastChild, 7);
assert.isTrue(element.isRangeSelected());
@@ -304,9 +299,9 @@
assert.equal(getActionSide(), 'right');
});
- test('multiline grow end highlight over tabs', function() {
- var startContent = stubContent(119, 'right');
- var endContent = stubContent(120, 'right');
+ test('multiline grow end highlight over tabs', () => {
+ const startContent = stubContent(119, 'right');
+ const endContent = stubContent(120, 'right');
emulateSelection(startContent.firstChild, 10, endContent.firstChild, 2);
assert.isTrue(element.isRangeSelected());
assert.deepEqual(getActionRange(), {
@@ -318,16 +313,16 @@
assert.equal(getActionSide(), 'right');
});
- test('collapsed', function() {
- var content = stubContent(138, 'left');
+ test('collapsed', () => {
+ const content = stubContent(138, 'left');
emulateSelection(content.firstChild, 5, content.firstChild, 5);
assert.isOk(window.getSelection().getRangeAt(0).startContainer);
assert.isFalse(element.isRangeSelected());
});
- test('starts inside hl', function() {
- var content = stubContent(140, 'left');
- var hl = content.querySelector('.foo');
+ test('starts inside hl', () => {
+ const content = stubContent(140, 'left');
+ const hl = content.querySelector('.foo');
emulateSelection(hl.firstChild, 2, hl.nextSibling, 7);
assert.isTrue(element.isRangeSelected());
assert.deepEqual(getActionRange(), {
@@ -339,9 +334,9 @@
assert.equal(getActionSide(), 'left');
});
- test('ends inside hl', function() {
- var content = stubContent(140, 'left');
- var hl = content.querySelector('.bar');
+ test('ends inside hl', () => {
+ const content = stubContent(140, 'left');
+ const hl = content.querySelector('.bar');
emulateSelection(hl.previousSibling, 2, hl.firstChild, 3);
assert.isTrue(element.isRangeSelected());
assert.deepEqual(getActionRange(), {
@@ -352,9 +347,9 @@
});
});
- test('multiple hl', function() {
- var content = stubContent(140, 'left');
- var hl = content.querySelectorAll('hl')[4];
+ test('multiple hl', () => {
+ const content = stubContent(140, 'left');
+ const hl = content.querySelectorAll('hl')[4];
emulateSelection(content.firstChild, 2, hl.firstChild, 2);
assert.isTrue(element.isRangeSelected());
assert.deepEqual(getActionRange(), {
@@ -366,34 +361,34 @@
assert.equal(getActionSide(), 'left');
});
- test('starts outside of diff', function() {
- var contentText = stubContent(140, 'left');
- var contentTd = contentText.parentElement;
+ test('starts outside of diff', () => {
+ const contentText = stubContent(140, 'left');
+ const contentTd = contentText.parentElement;
emulateSelection(contentTd.previousElementSibling, 0,
contentText.firstChild, 2);
assert.isFalse(element.isRangeSelected());
});
- test('ends outside of diff', function() {
- var content = stubContent(140, 'left');
+ test('ends outside of diff', () => {
+ const content = stubContent(140, 'left');
emulateSelection(content.nextElementSibling.firstChild, 2,
content.firstChild, 2);
assert.isFalse(element.isRangeSelected());
});
- test('starts and ends on different sides', function() {
- var startContent = stubContent(140, 'left');
- var endContent = stubContent(130, 'right');
+ test('starts and ends on different sides', () => {
+ const startContent = stubContent(140, 'left');
+ const endContent = stubContent(130, 'right');
emulateSelection(startContent.firstChild, 2, endContent.firstChild, 2);
assert.isFalse(element.isRangeSelected());
});
- test('starts in comment thread element', function() {
- var startContent = stubContent(140, 'left');
- var comment = startContent.parentElement.querySelector(
+ test('starts in comment thread element', () => {
+ const startContent = stubContent(140, 'left');
+ const comment = startContent.parentElement.querySelector(
'gr-diff-comment-thread');
- var endContent = stubContent(141, 'left');
+ const endContent = stubContent(141, 'left');
emulateSelection(comment.firstChild, 2, endContent.firstChild, 4);
assert.isTrue(element.isRangeSelected());
assert.deepEqual(getActionRange(), {
@@ -405,9 +400,9 @@
assert.equal(getActionSide(), 'left');
});
- test('ends in comment thread element', function() {
- var content = stubContent(140, 'left');
- var comment = content.parentElement.querySelector(
+ test('ends in comment thread element', () => {
+ const content = stubContent(140, 'left');
+ const comment = content.parentElement.querySelector(
'gr-diff-comment-thread');
emulateSelection(content.firstChild, 4, comment.firstChild, 1);
assert.isTrue(element.isRangeSelected());
@@ -420,27 +415,27 @@
assert.equal(getActionSide(), 'left');
});
- test('starts in context element', function() {
- var contextControl =
+ test('starts in context element', () => {
+ const contextControl =
diff.querySelector('.contextControl').querySelector('gr-button');
- var content = stubContent(146, 'right');
+ const content = stubContent(146, 'right');
emulateSelection(contextControl, 0, content.firstChild, 7);
// TODO (viktard): Select nearest line.
assert.isFalse(element.isRangeSelected());
});
- test('ends in context element', function() {
- var contextControl =
+ test('ends in context element', () => {
+ const contextControl =
diff.querySelector('.contextControl').querySelector('gr-button');
- var content = stubContent(141, 'left');
+ const content = stubContent(141, 'left');
emulateSelection(content.firstChild, 2, contextControl, 1);
// TODO (viktard): Select nearest line.
assert.isFalse(element.isRangeSelected());
});
- test('selection containing context element', function() {
- var startContent = stubContent(130, 'right');
- var endContent = stubContent(146, 'right');
+ test('selection containing context element', () => {
+ const startContent = stubContent(130, 'right');
+ const endContent = stubContent(146, 'right');
emulateSelection(startContent.firstChild, 3, endContent.firstChild, 14);
assert.isTrue(element.isRangeSelected());
assert.deepEqual(getActionRange(), {
@@ -452,8 +447,8 @@
assert.equal(getActionSide(), 'right');
});
- test('ends at a tab', function() {
- var content = stubContent(140, 'left');
+ test('ends at a tab', () => {
+ const content = stubContent(140, 'left');
emulateSelection(
content.firstChild, 1, content.querySelector('span'), 0);
assert.isTrue(element.isRangeSelected());
@@ -466,8 +461,8 @@
assert.equal(getActionSide(), 'left');
});
- test('starts at a tab', function() {
- var content = stubContent(140, 'left');
+ test('starts at a tab', () => {
+ const content = stubContent(140, 'left');
emulateSelection(
content.querySelectorAll('hl')[3], 0,
content.querySelectorAll('span')[1].nextSibling, 1);
@@ -481,21 +476,21 @@
assert.equal(getActionSide(), 'left');
});
- test('properly accounts for syntax highlighting', function() {
- var content = stubContent(140, 'left');
- var spy = sinon.spy(element, '_normalizeRange');
+ test('properly accounts for syntax highlighting', () => {
+ const content = stubContent(140, 'left');
+ const spy = sinon.spy(element, '_normalizeRange');
emulateSelection(
content.querySelectorAll('hl')[3], 0,
content.querySelectorAll('span')[1], 0);
- var spyCall = spy.getCall(0);
- var range = window.getSelection().getRangeAt(0);
+ const spyCall = spy.getCall(0);
+ const range = window.getSelection().getRangeAt(0);
assert.notDeepEqual(spyCall.returnValue, range);
});
- test('GrRangeNormalizer._getTextOffset computes text offset', function() {
- var content = stubContent(140, 'left');
- var child = content.lastChild.lastChild;
- var result = GrRangeNormalizer._getTextOffset(content, child);
+ test('GrRangeNormalizer._getTextOffset computes text offset', () => {
+ let content = stubContent(140, 'left');
+ let child = content.lastChild.lastChild;
+ let result = GrRangeNormalizer._getTextOffset(content, child);
assert.equal(result, 75);
content = stubContent(146, 'right');
child = content.lastChild;
@@ -508,15 +503,15 @@
// TODO (viktard): Only empty lines selected.
// TODO (viktard): Unified mode.
- suite('triple click', function() {
- test('_fixTripleClickSelection', function() {
- var fakeRange = {
+ suite('triple click', () => {
+ test('_fixTripleClickSelection', () => {
+ const fakeRange = {
startContainer: '',
startOffset: '',
endContainer: '',
- endOffset: ''
+ endOffset: '',
};
- var fixedRange = {};
+ const fixedRange = {};
sandbox.stub(GrRangeNormalizer, 'normalize').returns(fakeRange);
sandbox.stub(element, '_normalizeSelectionSide');
sandbox.stub(element, '_fixTripleClickSelection').returns(fixedRange);
@@ -524,9 +519,9 @@
assert.isTrue(element._fixTripleClickSelection.called);
});
- test('left pane', function() {
- var startNode = stubContent(138, 'left');
- var endNode =
+ test('left pane', () => {
+ const startNode = stubContent(138, 'left');
+ const endNode =
stubContent(119, 'right').parentElement.previousElementSibling;
builder.getLineNumberByChild.withArgs(endNode).returns(119);
emulateSelection(startNode, 0, endNode, 0);
@@ -538,9 +533,9 @@
});
});
- test('right pane', function() {
- var startNode = stubContent(119, 'right');
- var endNode =
+ test('right pane', () => {
+ const startNode = stubContent(119, 'right');
+ const endNode =
stubContent(140, 'left').parentElement.previousElementSibling;
emulateSelection(startNode, 0, endNode, 0);
assert.deepEqual(getActionRange(), {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-range-normalizer.js b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-range-normalizer.js
index e870169..0b0131e 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-range-normalizer.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-range-normalizer.js
@@ -18,9 +18,9 @@
if (window.GrRangeNormalizer) { return; }
// Astral code point as per https://mathiasbynens.be/notes/javascript-unicode
- var REGEX_ASTRAL_SYMBOL = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
+ const REGEX_ASTRAL_SYMBOL = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
- var GrRangeNormalizer = {
+ const GrRangeNormalizer = {
/**
* Remap DOM range to whole lines of a diff if necessary. If the start or
* end containers are DOM elements that are singular pieces of syntax
@@ -31,23 +31,23 @@
* @return {Object} A modified version of the range that correctly accounts
* for syntax highlighting.
*/
- normalize: function(range) {
- var startContainer = this._getContentTextParent(range.startContainer);
- var startOffset = range.startOffset + this._getTextOffset(startContainer,
- range.startContainer);
- var endContainer = this._getContentTextParent(range.endContainer);
- var endOffset = range.endOffset + this._getTextOffset(endContainer,
+ normalize(range) {
+ const startContainer = this._getContentTextParent(range.startContainer);
+ const startOffset = range.startOffset +
+ this._getTextOffset(startContainer, range.startContainer);
+ const endContainer = this._getContentTextParent(range.endContainer);
+ const endOffset = range.endOffset + this._getTextOffset(endContainer,
range.endContainer);
return {
- startContainer: startContainer,
- startOffset: startOffset,
- endContainer: endContainer,
- endOffset: endOffset,
+ startContainer,
+ startOffset,
+ endContainer,
+ endOffset,
};
},
- _getContentTextParent: function(target) {
- var element = target;
+ _getContentTextParent(target) {
+ let element = target;
if (element.nodeName === '#text') {
element = element.parentElement;
}
@@ -69,18 +69,18 @@
* @param {!Element} child The child element being searched for.
* @return {number}
*/
- _getTextOffset: function(node, child) {
- var count = 0;
- var stack = [node];
+ _getTextOffset(node, child) {
+ let count = 0;
+ let stack = [node];
while (stack.length) {
- var n = stack.pop();
+ const n = stack.pop();
if (n === child) {
break;
}
if (n.childNodes && n.childNodes.length !== 0) {
- var arr = [];
- for (var i = 0; i < n.childNodes.length; i++) {
- arr.push(n.childNodes[i]);
+ const arr = [];
+ for (const childNode of n.childNodes) {
+ arr.push(childNode);
}
arr.reverse();
stack = stack.concat(arr);
@@ -97,7 +97,7 @@
* @param {Text} A text node.
* @return {Number} The length of the text.
*/
- _getLength: function(node) {
+ _getLength(node) {
return node.textContent.replace(REGEX_ASTRAL_SYMBOL, '_').length;
},
};
