Add background color to blank line cells
Release-Notes: skip
Change-Id: I62104276f77a05b4d11daf928f67c2a27dce256b
Google-Bug-Id: b/279877967
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row.ts b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row.ts
index 8ef2f82..6293224 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row.ts
@@ -325,7 +325,7 @@
const lineNumber = this.lineNumber(side);
const isBlank = line?.type === GrDiffLineType.BLANK;
if (!line || !lineNumber || isBlank || this.layersApplied) {
- const blankClass = isBlank && !this.unifiedDiff ? 'blankLineNum' : '';
+ const blankClass = isBlank ? 'blankLineNum' : '';
return html`<td
${ref(this.lineNumberRef(side))}
class=${diffClasses(side, blankClass)}
diff --git a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element_test.ts b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element_test.ts
index 56336f0..8cc5324 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element_test.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element_test.ts
@@ -294,7 +294,7 @@
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
- <td class="gr-diff left"></td>
+ <td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="5">
<button
aria-label="5 added"
@@ -320,7 +320,7 @@
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
- <td class="gr-diff left"></td>
+ <td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="6">
<button
aria-label="6 added"
@@ -346,7 +346,7 @@
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
- <td class="gr-diff left"></td>
+ <td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="7">
<button
aria-label="7 added"
@@ -567,7 +567,7 @@
10
</button>
</td>
- <td class="gr-diff right"></td>
+ <td class="blankLineNum gr-diff right"></td>
<td class="content gr-diff left no-intraline-info remove">
<div
class="contentText gr-diff"
@@ -593,7 +593,7 @@
11
</button>
</td>
- <td class="gr-diff right"></td>
+ <td class="blankLineNum gr-diff right"></td>
<td class="content gr-diff left no-intraline-info remove">
<div
class="contentText gr-diff"
@@ -619,7 +619,7 @@
12
</button>
</td>
- <td class="gr-diff right"></td>
+ <td class="blankLineNum gr-diff right"></td>
<td class="content gr-diff left no-intraline-info remove">
<div
class="contentText gr-diff"
@@ -645,7 +645,7 @@
13
</button>
</td>
- <td class="gr-diff right"></td>
+ <td class="blankLineNum gr-diff right"></td>
<td class="content gr-diff left no-intraline-info remove">
<div
class="contentText gr-diff"
@@ -662,7 +662,7 @@
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
- <td class="gr-diff left"></td>
+ <td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="13">
<button
aria-label="13 added"
@@ -688,7 +688,7 @@
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
- <td class="gr-diff left"></td>
+ <td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="14">
<button
aria-label="14 added"
@@ -727,7 +727,7 @@
16
</button>
</td>
- <td class="gr-diff right"></td>
+ <td class="blankLineNum gr-diff right"></td>
<td class="content gr-diff left remove">
<div
class="contentText gr-diff"
@@ -742,7 +742,7 @@
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
- <td class="gr-diff left"></td>
+ <td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="15">
<button
aria-label="15 added"
@@ -1011,7 +1011,7 @@
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
- <td class="gr-diff left"></td>
+ <td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="40">
<button
aria-label="40 added"
@@ -1037,7 +1037,7 @@
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
- <td class="gr-diff left"></td>
+ <td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="41">
<button
aria-label="41 added"
@@ -1063,7 +1063,7 @@
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
- <td class="gr-diff left"></td>
+ <td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="42">
<button
aria-label="42 added"
@@ -1089,7 +1089,7 @@
tabindex="-1"
>
<td class="blame gr-diff" data-line-number="0"></td>
- <td class="gr-diff left"></td>
+ <td class="blankLineNum gr-diff left"></td>
<td class="gr-diff lineNum right" data-value="43">
<button
aria-label="43 added"
diff --git a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-styles.ts b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-styles.ts
index 1b908cd..e5a5e65 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-styles.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-styles.ts
@@ -46,7 +46,8 @@
border-collapse: collapse;
table-layout: fixed;
}
- td.lineNum {
+ td.lineNum,
+ td.blankLineNum {
/* Enforces background whenever lines wrap */
background-color: var(--diff-blank-background-color);
}
