ES6ify /gr-diff-selection/* Bug: Issue 6179 Change-Id: I2c929b863c22dc28df7b571002d6ea927b8e631e
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection.js b/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection.js index fa1aeb2..ecddba2 100644 --- a/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection.js +++ b/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection.js
@@ -18,13 +18,13 @@ * Possible CSS classes indicating the state of selection. Dynamically added/ * removed based on where the user clicks within the diff. */ - var SelectionClass = { + const SelectionClass = { COMMENT: 'selected-comment', LEFT: 'selected-left', RIGHT: 'selected-right', }; - var getNewCache = function() { return {left: null, right: null}; }; + const getNewCache = () => { return {left: null, right: null}; }; Polymer({ is: 'gr-diff-selection', @@ -43,11 +43,11 @@ ], listeners: { - 'copy': '_handleCopy', - 'down': '_handleDown', + copy: '_handleCopy', + down: '_handleDown', }, - attached: function() { + attached() { this.classList.add(SelectionClass.RIGHT); }, @@ -59,19 +59,19 @@ return this._cachedDiffBuilder; }, - _diffChanged: function() { + _diffChanged() { this._linesCache = getNewCache(); }, - _handleDown: function(e) { - var lineEl = this.diffBuilder.getLineElByChild(e.target); + _handleDown(e) { + const lineEl = this.diffBuilder.getLineElByChild(e.target); if (!lineEl) { return; } - var commentSelected = + const commentSelected = this._elementDescendedFromClass(e.target, 'gr-diff-comment'); - var side = this.diffBuilder.getSideByLineEl(lineEl); - var targetClasses = []; + const side = this.diffBuilder.getSideByLineEl(lineEl); + const targetClasses = []; targetClasses.push(side === 'left' ? SelectionClass.LEFT : SelectionClass.RIGHT); @@ -80,23 +80,23 @@ targetClasses.push(SelectionClass.COMMENT); } // Remove any selection classes that do not belong. - for (var key in SelectionClass) { + for (const key in SelectionClass) { if (SelectionClass.hasOwnProperty(key)) { - var className = SelectionClass[key]; - if (targetClasses.indexOf(className) === -1) { + const className = SelectionClass[key]; + if (!targetClasses.includes(className)) { this.classList.remove(SelectionClass[key]); } } } // Add new selection classes iff they are not already present. - for (var i = 0; i < targetClasses.length; i++) { - if (!this.classList.contains(targetClasses[i])) { - this.classList.add(targetClasses[i]); + for (const _class of targetClasses) { + if (!this.classList.contains(_class)) { + this.classList.add(_class); } } }, - _getCopyEventTarget: function(e) { + _getCopyEventTarget(e) { return Polymer.dom(e).rootTarget; }, @@ -108,7 +108,7 @@ * @param {!string} className * @return {boolean} */ - _elementDescendedFromClass: function(element, className) { + _elementDescendedFromClass(element, className) { while (!element.classList.contains(className)) { if (!element.parentElement || element === this.diffBuilder.diffElement) { @@ -119,20 +119,20 @@ return true; }, - _handleCopy: function(e) { - var commentSelected = false; - var target = this._getCopyEventTarget(e); + _handleCopy(e) { + let commentSelected = false; + const target = this._getCopyEventTarget(e); if (target.type === 'textarea') { return; } if (!this._elementDescendedFromClass(target, 'diff-row')) { return; } if (this.classList.contains(SelectionClass.COMMENT)) { commentSelected = true; } - var lineEl = this.diffBuilder.getLineElByChild(target); + const lineEl = this.diffBuilder.getLineElByChild(target); if (!lineEl) { return; } - var side = this.diffBuilder.getSideByLineEl(lineEl); - var text = this._getSelectedText(side, commentSelected); + const side = this.diffBuilder.getSideByLineEl(lineEl); + const text = this._getSelectedText(side, commentSelected); if (text) { e.clipboardData.setData('Text', text); e.preventDefault(); @@ -148,19 +148,20 @@ * @param {boolean} Whether or not a comment is selected. * @return {string} The selected text. */ - _getSelectedText: function(side, commentSelected) { - var sel = window.getSelection(); + _getSelectedText(side, commentSelected) { + const sel = window.getSelection(); if (sel.rangeCount != 1) { return; // No multi-select support yet. } if (commentSelected) { return this._getCommentLines(sel, side); } - var range = GrRangeNormalizer.normalize(sel.getRangeAt(0)); - var startLineEl = this.diffBuilder.getLineElByChild(range.startContainer); - var endLineEl = this.diffBuilder.getLineElByChild(range.endContainer); - var startLineNum = parseInt(startLineEl.getAttribute('data-value'), 10); - var endLineNum = parseInt(endLineEl.getAttribute('data-value'), 10); + const range = GrRangeNormalizer.normalize(sel.getRangeAt(0)); + const startLineEl = + this.diffBuilder.getLineElByChild(range.startContainer); + const endLineEl = this.diffBuilder.getLineElByChild(range.endContainer); + const startLineNum = parseInt(startLineEl.getAttribute('data-value'), 10); + const endLineNum = parseInt(endLineEl.getAttribute('data-value'), 10); return this._getRangeFromDiff(startLineNum, range.startOffset, endLineNum, range.endOffset, side); @@ -176,9 +177,9 @@ * @param {!string} side The side that is currently selected. * @return {string} The selected diff text. */ - _getRangeFromDiff: function(startLineNum, startOffset, endLineNum, - endOffset, side) { - var lines = this._getDiffLines(side).slice(startLineNum - 1, endLineNum); + _getRangeFromDiff(startLineNum, startOffset, endLineNum, endOffset, side) { + const lines = + this._getDiffLines(side).slice(startLineNum - 1, endLineNum); if (lines.length) { lines[lines.length - 1] = lines[lines.length - 1] .substring(0, endOffset); @@ -193,17 +194,13 @@ * @param {!string} side The side that is currently selected. * @return {Array.string} An array of strings indexed by line number. */ - _getDiffLines: function(side) { + _getDiffLines(side) { if (this._linesCache[side]) { return this._linesCache[side]; } - var lines = []; - var chunk; - var key = side === 'left' ? 'a' : 'b'; - for (var chunkIndex = 0; - chunkIndex < this.diff.content.length; - chunkIndex++) { - chunk = this.diff.content[chunkIndex]; + let lines = []; + const key = side === 'left' ? 'a' : 'b'; + for (const chunk of this.diff.content) { if (chunk.ab) { lines = lines.concat(chunk.ab); } else if (chunk[key]) { @@ -222,16 +219,16 @@ * @param {!string} side The side that is currently selected. * @return {string} The selected comment text. */ - _getCommentLines: function(sel, side) { - var range = GrRangeNormalizer.normalize(sel.getRangeAt(0)); - var content = []; + _getCommentLines(sel, side) { + const range = GrRangeNormalizer.normalize(sel.getRangeAt(0)); + const content = []; // Query the diffElement for comments. - var messages = this.diffBuilder.diffElement.querySelectorAll( - '.side-by-side [data-side="' + side + - '"] .message *, .unified .message *'); + const messages = this.diffBuilder.diffElement.querySelectorAll( + `.side-by-side [data-side="${side + }"] .message *, .unified .message *`); - for (var i = 0; i < messages.length; i++) { - var el = messages[i]; + for (let i = 0; i < messages.length; i++) { + const el = messages[i]; // Check if the comment element exists inside the selection. if (sel.containsNode(el, true)) { // Padded elements require newlines for accurate spacing. @@ -262,10 +259,10 @@ * @param {Range} range The normalized selection range. * @return {string} The text within the selection. */ - _getTextContentForRange: function(domNode, sel, range) { + _getTextContentForRange(domNode, sel, range) { if (!sel.containsNode(domNode, true)) { return ''; } - var text = ''; + let text = ''; if (domNode instanceof Text) { text = domNode.textContent; if (domNode === range.endContainer) { @@ -275,9 +272,8 @@ text = text.substring(range.startOffset); } } else { - for (var i = 0; i < domNode.childNodes.length; i++) { - text += this._getTextContentForRange(domNode.childNodes[i], - sel, range); + for (const childNode of domNode.childNodes) { + text += this._getTextContentForRange(childNode, sel, range); } } return text;
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection_test.html b/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection_test.html index 3eeba90..39555b4 100644 --- a/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection_test.html +++ b/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection_test.html
@@ -101,13 +101,13 @@ </test-fixture> <script> - suite('gr-diff-selection', function() { - var element; - var sandbox; + suite('gr-diff-selection', () => { + let element; + let sandbox; - var emulateCopyOn = function(target) { - var fakeEvent = { - target: target, + const emulateCopyOn = function(target) { + const fakeEvent = { + target, preventDefault: sandbox.stub(), clipboardData: { setData: sandbox.stub(), @@ -118,7 +118,7 @@ return fakeEvent; }; - setup(function() { + setup(() => { element = fixture('basic'); sandbox = sinon.sandbox.create(); sandbox.stub(element, '_getCopyEventTarget'); @@ -145,11 +145,11 @@ }; }); - teardown(function() { + teardown(() => { sandbox.restore(); }); - test('applies selected-left on left side click', function() { + test('applies selected-left on left side click', () => { element.classList.add('selected-right'); element._cachedDiffBuilder.getSideByLineEl.returns('left'); MockInteractions.down(element); @@ -160,7 +160,7 @@ 'removes selected-right'); }); - test('applies selected-right on right side click', function() { + test('applies selected-right on right side click', () => { element.classList.add('selected-left'); element._cachedDiffBuilder.getSideByLineEl.returns('right'); MockInteractions.down(element); @@ -170,41 +170,41 @@ element.classList.contains('selected-left'), 'removes selected-left'); }); - test('ignores copy for non-content Element', function() { + test('ignores copy for non-content Element', () => { sandbox.stub(element, '_getSelectedText'); emulateCopyOn(element.querySelector('.not-diff-row')); assert.isFalse(element._getSelectedText.called); }); - test('asks for text for left side Elements', function() { + test('asks for text for left side Elements', () => { element._cachedDiffBuilder.getSideByLineEl.returns('left'); sandbox.stub(element, '_getSelectedText'); emulateCopyOn(element.querySelector('div.contentText')); assert.deepEqual(['left', false], element._getSelectedText.lastCall.args); }); - test('reacts to copy for content Elements', function() { + test('reacts to copy for content Elements', () => { sandbox.stub(element, '_getSelectedText'); emulateCopyOn(element.querySelector('div.contentText')); assert.isTrue(element._getSelectedText.called); }); - test('copy event is prevented for content Elements', function() { + test('copy event is prevented for content Elements', () => { sandbox.stub(element, '_getSelectedText'); element._cachedDiffBuilder.getSideByLineEl.returns('left'); element._getSelectedText.returns('test'); - var event = emulateCopyOn(element.querySelector('div.contentText')); + const event = emulateCopyOn(element.querySelector('div.contentText')); assert.isTrue(event.preventDefault.called); }); - test('inserts text into clipboard on copy', function() { + test('inserts text into clipboard on copy', () => { sandbox.stub(element, '_getSelectedText').returns('the text'); - var event = emulateCopyOn(element.querySelector('div.contentText')); + const event = emulateCopyOn(element.querySelector('div.contentText')); assert.deepEqual( ['Text', 'the text'], event.clipboardData.setData.lastCall.args); }); - test('copies content correctly', function() { + test('copies content correctly', () => { // Fetch the line number. element._cachedDiffBuilder.getLineElByChild = function(child) { while (!child.classList.contains('content') && child.parentElement) { @@ -216,9 +216,9 @@ element.classList.add('selected-left'); element.classList.remove('selected-right'); - var selection = window.getSelection(); + const selection = window.getSelection(); selection.removeAllRanges(); - var range = document.createRange(); + const range = document.createRange(); range.setStart(element.querySelector('div.contentText').firstChild, 3); range.setEnd( element.querySelectorAll('div.contentText')[4].firstChild, 2); @@ -226,13 +226,13 @@ assert.equal(element._getSelectedText('left'), 'ba\nzin\nga'); }); - test('copies comments', function() { + test('copies comments', () => { element.classList.add('selected-left'); element.classList.add('selected-comment'); element.classList.remove('selected-right'); - var selection = window.getSelection(); + const selection = window.getSelection(); selection.removeAllRanges(); - var range = document.createRange(); + const range = document.createRange(); range.setStart( element.querySelector('.gr-formatted-text *').firstChild, 3); range.setEnd( @@ -242,14 +242,14 @@ element._getSelectedText('left', true)); }); - test('respects astral chars in comments', function() { + test('respects astral chars in comments', () => { element.classList.add('selected-left'); element.classList.add('selected-comment'); element.classList.remove('selected-right'); - var selection = window.getSelection(); + const selection = window.getSelection(); selection.removeAllRanges(); - var range = document.createRange(); - var nodes = element.querySelectorAll('.gr-formatted-text *'); + const range = document.createRange(); + const nodes = element.querySelectorAll('.gr-formatted-text *'); range.setStart(nodes[2].childNodes[2], 13); range.setEnd(nodes[2].childNodes[2], 23); selection.addRange(range); @@ -257,15 +257,15 @@ element._getSelectedText('left', true)); }); - test('defers to default behavior for textarea', function() { + test('defers to default behavior for textarea', () => { element.classList.add('selected-left'); element.classList.remove('selected-right'); - var selectedTextSpy = sandbox.spy(element, '_getSelectedText'); + const selectedTextSpy = sandbox.spy(element, '_getSelectedText'); emulateCopyOn(element.querySelector('textarea')); assert.isFalse(selectedTextSpy.called); }); - test('regression test for 4794', function() { + test('regression test for 4794', () => { element._cachedDiffBuilder.getLineElByChild = function(child) { while (!child.classList.contains('content') && child.parentElement) { child = child.parentElement; @@ -276,9 +276,9 @@ element.classList.add('selected-right'); element.classList.remove('selected-left'); - var selection = window.getSelection(); + const selection = window.getSelection(); selection.removeAllRanges(); - var range = document.createRange(); + const range = document.createRange(); range.setStart( element.querySelectorAll('div.contentText')[1].firstChild, 4); range.setEnd( @@ -287,12 +287,12 @@ assert.equal(element._getSelectedText('right'), ' other'); }); - suite('_getTextContentForRange', function() { - var selection; - var range; - var nodes; + suite('_getTextContentForRange', () => { + let selection; + let range; + let nodes; - setup(function() { + setup(() => { element.classList.add('selected-left'); element.classList.add('selected-comment'); element.classList.remove('selected-right'); @@ -302,7 +302,7 @@ nodes = element.querySelectorAll('.gr-formatted-text *'); }); - test('multi level element contained in range', function() { + test('multi level element contained in range', () => { range.setStart(nodes[2].childNodes[0], 1); range.setEnd(nodes[2].childNodes[2], 7); selection.addRange(range); @@ -311,7 +311,7 @@ }); - test('multi level element as startContainer of range', function() { + test('multi level element as startContainer of range', () => { range.setStart(nodes[2].childNodes[1], 0); range.setEnd(nodes[2].childNodes[2], 7); selection.addRange(range); @@ -319,7 +319,7 @@ 'a differ'); }); - test('startContainer === endContainer', function() { + test('startContainer === endContainer', () => { range.setStart(nodes[0].firstChild, 2); range.setEnd(nodes[0].firstChild, 12); selection.addRange(range); @@ -328,7 +328,7 @@ }); }); - test('cache is reset when diff changes', function() { + test('cache is reset when diff changes', () => { element._linesCache = {left: 'test', right: 'test'}; element.diff = {}; flushAsynchronousOperations();