Fix links in gr-diff showContext buttons
Previously, when gr-diff-builder generated context buttons, it reset the
textContent after gr-button was created. This ended up removing the
paper-button from inside gr-button, and hence lost all button like
qualities.
This change replaces with the appropriate Polymer DOM API, and modifies
the gr-button styles accordingly.
Bug: Issue 8626
Change-Id: Ic9a33c6bc74d676b21a039dd8714e4001bcda207
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
index 017f2a3..997e1ba 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
@@ -288,6 +288,7 @@
const button = this._createElement('gr-button', 'showContext');
button.setAttribute('link', true);
+ button.setAttribute('no-uppercase', true);
let text;
const groups = []; // The groups that replace this one if tapped.
@@ -306,7 +307,7 @@
[0, contextLines.length - context]);
}
- button.textContent = text;
+ Polymer.dom(button).textContent = text;
button.addEventListener('tap', e => {
e.detail = {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html
index 78efae7..129bff1 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html
@@ -95,7 +95,7 @@
let buttons = td.querySelectorAll('gr-button.showContext');
assert.equal(buttons.length, 1);
- assert.equal(buttons[0].textContent, 'Show 10 common lines');
+ assert.equal(Polymer.dom(buttons[0]).textContent, 'Show 10 common lines');
// Add another line.
line.contextGroup.lines.push('lorem upsum');
@@ -105,9 +105,9 @@
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↓');
+ assert.equal(Polymer.dom(buttons[0]).textContent, '+10↑');
+ assert.equal(Polymer.dom(buttons[1]).textContent, 'Show 11 common lines');
+ assert.equal(Polymer.dom(buttons[2]).textContent, '+10↓');
});
test('newlines 1', () => {
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 99cfb03..fc23837 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -160,12 +160,15 @@
.contextControl {
background-color: #fff7d4;
border: 1px solid #f6e6a5;
- color: rgba(0,0,0.54);
}
.contextControl gr-button {
display: inline-block;
- font-family: var(--monospace-font-family);
text-decoration: none;
+ --gr-button-color: rgba(0,0,0,.54);
+ --gr-button: {
+ font-family: var(--monospace-font-family);
+ padding: .2em;
+ }
}
.contextControl td:not(.lineNum) {
text-align: center;
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 9841564..f280c33 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
@@ -321,7 +321,7 @@
},
_handleTap(e) {
- const el = Polymer.dom(e).rootTarget;
+ const el = Polymer.dom(e).localTarget;
if (el.classList.contains('showContext')) {
this.$.diffBuilder.showContext(e.detail.groups, e.detail.section);
