Fix line number padding and size
Separate the CSS classes for the line number td and button. Move all
styling to the button and make it take the full size of the td, so that
the entire line number area is clickable and a button.
Change-Id: Icd7078afa0d71c3066c665c6e3d9b7f442b916fe
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 f4a8073..dabf884d 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),
