Fix ranged comment layer highlighting on the left side
The attribute `data-side` must be set for the HTML element that is
passed into the layers' `annotate()` methods. During the gr-diff
refactoring the layers were changed to annotate the `gr-diff-text`
element, not the parent `div`. Thus the attribute must be set for
`gr-diff-text`.
Release-Notes: skip
Google-Bug-Id: b/300083386
Change-Id: Ic679c46340de292db53bf1cd2d06548e38404481
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 6293224..da84b34 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
@@ -556,6 +556,7 @@
const textElement = line?.text && !this.layersApplied
? html`<gr-diff-text
${ref(this.contentRef(side))}
+ data-side=${ifDefined(side)}
.text=${line?.text}
.tabSize=${this.tabSize}
.lineLimit=${this.lineLength}
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row_test.ts b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row_test.ts
index 61ea055..d07475c 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row_test.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row_test.ts
@@ -56,7 +56,7 @@
data-side="left"
id="left-content-1"
>
- <gr-diff-text> lorem ipsum </gr-diff-text>
+ <gr-diff-text data-side="left"> lorem ipsum </gr-diff-text>
</div>
</div>
</td>
@@ -78,7 +78,7 @@
data-side="right"
id="right-content-1"
>
- <gr-diff-text> lorem ipsum </gr-diff-text>
+ <gr-diff-text data-side="right"> lorem ipsum </gr-diff-text>
</div>
</td>
</tr>
@@ -136,7 +136,7 @@
data-side="right"
id="right-content-1"
>
- <gr-diff-text> lorem ipsum </gr-diff-text>
+ <gr-diff-text data-side="right"> lorem ipsum </gr-diff-text>
</div>
</td>
</tr>
@@ -190,7 +190,7 @@
data-side="right"
id="right-content-1"
>
- <gr-diff-text> lorem ipsum </gr-diff-text>
+ <gr-diff-text data-side="right"> lorem ipsum </gr-diff-text>
</div>
</td>
<slot name="post-right-line-1"></slot>
@@ -238,7 +238,7 @@
data-side="left"
id="left-content-1"
>
- <gr-diff-text> lorem ipsum </gr-diff-text>
+ <gr-diff-text data-side="left"> lorem ipsum </gr-diff-text>
</div>
</td>
<td class="blankLineNum gr-diff right"></td>
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section_test.ts b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section_test.ts
index b184be3..2277330 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section_test.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section_test.ts
@@ -159,7 +159,7 @@
data-side="left"
id="left-content-1"
>
- <gr-diff-text>asdf</gr-diff-text>
+ <gr-diff-text data-side="left">asdf</gr-diff-text>
</div>
</td>
<td class="gr-diff lineNum right" data-value="1">
@@ -180,7 +180,7 @@
data-side="right"
id="right-content-1"
>
- <gr-diff-text>asdf </gr-diff-text>
+ <gr-diff-text data-side="right">asdf </gr-diff-text>
</div>
</td>
</tr>
@@ -210,7 +210,7 @@
data-side="left"
id="left-content-1"
>
- <gr-diff-text> qwer</gr-diff-text>
+ <gr-diff-text data-side="left"> qwer</gr-diff-text>
</div>
</td>
<td class="gr-diff lineNum right" data-value="1">
@@ -231,7 +231,7 @@
data-side="right"
id="right-content-1"
>
- <gr-diff-text>qwer </gr-diff-text>
+ <gr-diff-text data-side="right">qwer </gr-diff-text>
</div>
</td>
</tr>
@@ -261,7 +261,7 @@
data-side="left"
id="left-content-1"
>
- <gr-diff-text>zxcv </gr-diff-text>
+ <gr-diff-text data-side="left">zxcv </gr-diff-text>
</div>
</td>
<td class="gr-diff lineNum right" data-value="1">
@@ -282,7 +282,7 @@
data-side="right"
id="right-content-1"
>
- <gr-diff-text>zxcv </gr-diff-text>
+ <gr-diff-text data-side="right">zxcv </gr-diff-text>
</div>
</td>
</tr>
