Merge "Fix line number padding and size"
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-element_test.html b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-element_test.html
index 0bb748f..0edf9b0 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-element_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-element_test.html
@@ -916,7 +916,7 @@
test('aria-labels on added line numbers', () => {
const deltaLineNumberButton = element.diffElement.querySelectorAll(
- 'button.lineNum.right')[5];
+ '.lineNumButton.right')[5];
assert.isOk(deltaLineNumberButton);
assert.equal(deltaLineNumberButton.getAttribute('aria-label'), '5 added');
@@ -924,7 +924,7 @@
test('aria-labels on removed line numbers', () => {
const deltaLineNumberButton = element.diffElement.querySelectorAll(
- 'button.lineNum.left')[10];
+ '.lineNumButton.left')[10];
assert.isOk(deltaLineNumberButton);
assert.equal(
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 7b7ea53..4b91000 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
@@ -308,7 +308,9 @@
// Both td and button need a number of classes/attributes for various
// selectors to work.
this._decorateLineEl(td, number, side);
+ td.classList.add('lineNum');
this._decorateLineEl(button, number, side);
+ button.classList.add('lineNumButton');
button.textContent = number === 'FILE' ? 'File' : number;
@@ -330,7 +332,6 @@
GrDiffBuilder.prototype._decorateLineEl = function(el, number, side) {
el.classList.add(side);
- el.classList.add('lineNum');
el.dataset.value = number;
};
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 8da366a..a5eb233 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
@@ -492,7 +492,8 @@
composed: true, bubbles: true,
}));
this.$.diffBuilder.showContext(e.detail.groups, e.detail.section);
- } else if (el.classList.contains('lineNum')) {
+ } else if (el.classList.contains('lineNum') ||
+ el.classList.contains('lineNumButton')) {
this.addDraftAtLine(el);
} else if (el.tagName === 'HL' ||
el.classList.contains('content') ||
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.js b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.js
index 7d6af0b..1ec8175 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.js
@@ -49,14 +49,17 @@
border-right: 1px solid var(--border-color);
table-layout: fixed;
}
- .lineNum {
+ .lineNumButton {
+ display: block;
+ width: 100%;
+ height: 100%;
background-color: var(--diff-blank-background-color);
}
/*
The only way to focus this (clicking) will apply our own focus styling,
so this default styling is not needed and distracting.
*/
- button.lineNum:focus {
+ .lineNumButton:focus {
outline: none;
}
.image-diff .gr-diff {
@@ -66,7 +69,7 @@
box-shadow: var(--elevation-level-1);
max-width: 50em;
}
- .image-diff .right.lineNum {
+ .image-diff .right.lineNumButton {
border-left: 1px solid var(--border-color);
}
.image-diff label,
@@ -78,9 +81,9 @@
outline: none;
user-select: none;
}
- .diff-row.target-row.target-side-left .lineNum.left,
- .diff-row.target-row.target-side-right .lineNum.right,
- .diff-row.target-row.unified .lineNum {
+ .diff-row.target-row.target-side-left .lineNumButton.left,
+ .diff-row.target-row.target-side-right .lineNumButton.right,
+ .diff-row.target-row.unified .lineNumButton {
background-color: var(--diff-selection-background-color);
color: var(--primary-text-color);
}
@@ -103,13 +106,13 @@
white-space: pre-wrap;
word-wrap: break-word;
}
- .lineNum,
+ .lineNumButton,
.content {
vertical-align: top;
white-space: pre;
}
.contextLineNum,
- .lineNum {
+ .lineNumButton {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@@ -119,7 +122,7 @@
padding: 0 var(--spacing-m);
text-align: right;
}
- .canComment .lineNum {
+ .canComment .lineNumButton {
cursor: pointer;
}
.content {
@@ -198,7 +201,7 @@
width: var(--line-height-mono, 18px);
height: var(--line-height-mono, 18px);
}
- .contextControl td:not(.lineNum) {
+ .contextControl td:not(.lineNumButton) {
text-align: center;
}
.displayLine .diff-row.target-row td {
@@ -295,13 +298,13 @@
.newlineWarning.hidden {
display: none;
}
- .lineNum.COVERED {
+ .lineNumButton.COVERED {
background-color: var(--coverage-covered, #e0f2f1);
}
- .lineNum.NOT_COVERED {
+ .lineNumButton.NOT_COVERED {
background-color: var(--coverage-not-covered, #ffd1a4);
}
- .lineNum.PARTIALLY_COVERED {
+ .lineNumButton.PARTIALLY_COVERED {
background: linear-gradient(to right bottom, var(--coverage-not-covered, #ffd1a4) 0%,
var(--coverage-not-covered, #ffd1a4) 50%,
var(--coverage-covered, #e0f2f1) 50%,
@@ -321,8 +324,8 @@
.selected-left:not(.selected-comment) .side-by-side .left + .content .contentText,
.selected-right:not(.selected-comment) .side-by-side .right + .content .contentText,
- .selected-left:not(.selected-comment) .unified .left.lineNum ~ .content:not(.both) .contentText,
- .selected-right:not(.selected-comment) .unified .right.lineNum ~ .content .contentText,
+ .selected-left:not(.selected-comment) .unified .left.lineNumButton ~ .content:not(.both) .contentText,
+ .selected-right:not(.selected-comment) .unified .right.lineNumButton ~ .content .contentText,
.selected-left.selected-comment .side-by-side .left + .content .message,
.selected-right.selected-comment .side-by-side .right + .content .message :not(.collapsedContent),
.selected-comment .unified .message :not(.collapsedContent),
