Adds "+10 lines" buttons to diff context controls
Adds two buttons to appear in context control lines in diffs. Whereas
the main button in a context control replaces the control with *all* of
the diff content that was collapsed into it, the new buttons will
instead display 10 lines of diff content either at the start or at the
end of the collapsed area.
If the number of lines collapsed into the context control are fewer than
11, the +10 buttons are not displayed.
Bug: Issue 3942
Change-Id: I03d94d8f1c0aca626e9cec9b63961c5a3e9e0759
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff-builder.js b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff-builder.js
index d2a7c25..f03687c 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff-builder.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff-builder.js
@@ -51,6 +51,14 @@
RIGHT: 'right',
};
+ GrDiffBuilder.ContextButtonType = {
+ ABOVE: 'above',
+ BELOW: 'below',
+ ALL: 'all',
+ };
+
+ var PARTIAL_CONTEXT_AMOUNT = 10;
+
GrDiffBuilder.prototype.emitDiff = function() {
for (var i = 0; i < this._groups.length; i++) {
this.emitGroup(this._groups[i]);
@@ -359,26 +367,64 @@
if (!line.contextGroup || !line.contextGroup.lines.length) {
return null;
}
- var contextLines = line.contextGroup.lines;
+
var td = this._createElement('td');
+ var showPartialLinks =
+ line.contextGroup.lines.length > PARTIAL_CONTEXT_AMOUNT;
+
+ if (showPartialLinks) {
+ td.appendChild(this._createContextButton(
+ GrDiffBuilder.ContextButtonType.ABOVE, section, line));
+ td.appendChild(document.createTextNode(' - '));
+ }
+
+ td.appendChild(this._createContextButton(
+ GrDiffBuilder.ContextButtonType.ALL, section, line));
+
+ if (showPartialLinks) {
+ td.appendChild(document.createTextNode(' - '));
+ td.appendChild(this._createContextButton(
+ GrDiffBuilder.ContextButtonType.BELOW, section, line));
+ }
+
+ return td;
+ };
+
+ GrDiffBuilder.prototype._createContextButton = function(type, section, line) {
+ var contextLines = line.contextGroup.lines;
+ var context = PARTIAL_CONTEXT_AMOUNT;
+
var button = this._createElement('gr-button', 'showContext');
button.setAttribute('link', true);
- var commonLines = contextLines.length;
- var text = 'Show ' + commonLines + ' common line';
- if (commonLines > 1) {
- text += 's';
+
+ var text;
+ var groups = []; // The groups that replace this one if tapped.
+
+ if (type === GrDiffBuilder.ContextButtonType.ALL) {
+ text = 'Show ' + contextLines.length + ' common line';
+ if (contextLines.length > 1) { text += 's'; }
+ groups.push(line.contextGroup);
+ } else if (type === GrDiffBuilder.ContextButtonType.ABOVE) {
+ text = '+' + context + '↑';
+ this._insertContextGroups(groups, contextLines,
+ [context, contextLines.length]);
+ } else if (type === GrDiffBuilder.ContextButtonType.BELOW) {
+ text = '+' + context + '↓';
+ this._insertContextGroups(groups, contextLines,
+ [0, contextLines.length - context]);
}
- text += '...';
+
button.textContent = text;
+
button.addEventListener('tap', function(e) {
e.detail = {
- group: line.contextGroup,
+ groups: groups,
section: section,
};
// Let it bubble up the DOM tree.
});
- td.appendChild(button);
- return td;
+
+ return button;
};
GrDiffBuilder.prototype._getCommentsForLine = function(comments, line,
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff-builder_test.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff-builder_test.html
index 4392de0..5905bd9 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff-builder_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff-builder_test.html
@@ -235,6 +235,35 @@
assert.equal(groups[5].adds[0].text, 'elgoog elgoog elgoog');
});
+ test('context control buttons', function() {
+ var section = {};
+ var line = {contextGroup: {lines: []}};
+
+ // Create 10 lines.
+ for (var i = 0; i < 10; i++) {
+ line.contextGroup.lines.push('lorem upsum');
+ }
+
+ // Does not include +10 buttons when there are fewer than 11 lines.
+ var td = builder._createContextControl(section, line);
+ var buttons = td.querySelectorAll('gr-button.showContext');
+
+ assert.equal(buttons.length, 1);
+ assert.equal(buttons[0].textContent, 'Show 10 common lines');
+
+ // Add another line.
+ line.contextGroup.lines.push('lorem upsum');
+
+ // Includes +10 buttons when there are at least 11 lines.
+ td = builder._createContextControl(section, line);
+ buttons = td.querySelectorAll('gr-button.showContext');
+
+ assert.equal(buttons.length, 3);
+ assert.equal(buttons[0].textContent, '+10↑');
+ assert.equal(buttons[1].textContent, 'Show 11 common lines');
+ assert.equal(buttons[2].textContent, '+10↓');
+ });
+
test('newlines', function() {
var text = 'abcdef';
assert.equal(builder._addNewlines(text, text), text);
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index 826a21e..1913270 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -125,11 +125,11 @@
background-color: var(--light-remove-highlight-color);
}
.contextControl {
- color: #849;
background-color: #fef;
+ color: #849;
}
.contextControl gr-button {
- display: block;
+ display: inline-block;
font-family: var(--monospace-font-family);
text-decoration: none;
}
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
index d813933..0056808 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
@@ -195,7 +195,7 @@
var el = Polymer.dom(e).rootTarget;
if (el.classList.contains('showContext')) {
- this._showContext(e.detail.group, e.detail.section);
+ this._showContext(e.detail.groups, e.detail.section);
} else if (el.classList.contains('lineNum')) {
this.addDraftAtLine(el);
}
@@ -363,15 +363,18 @@
return text;
},
- _showContext: function(group, sectionEl) {
+ _showContext: function(newGroups, sectionEl) {
var groups = this._builder._groups;
// TODO(viktard): Polyfill findIndex for IE10.
var contextIndex = groups.findIndex(function(group) {
return group.element == sectionEl;
});
- groups[contextIndex] = group;
- this._builder.emitGroup(group, sectionEl);
+ groups.splice.apply(groups, [contextIndex, 1].concat(newGroups));
+
+ newGroups.forEach(function(newGroup) {
+ this._builder.emitGroup(newGroup, sectionEl);
+ }.bind(this));
sectionEl.parentNode.removeChild(sectionEl);
this.async(function() {
