Add slots for post-line content projection
This adds a slot after every proper line that allows to display
arbitrary contextual information inside of the diff.
The terms "left" and "right" in the slot name do not specify the physical location where this slot is displayed but rather qualify the line number that is referenced.
So post-left-line-35 is supposed to mean "The slot after the row that contains the left file's 35th line". Thus, for a given diff in side-by-side mode, "post-left-line-35" and "post-right-line-72" might be placed between the same two diff rows, while with unified-diff mode they would sit in different row-gaps.
Release-Notes: skip
Change-Id: I5d4f86310abaefc73972e722aa85c1abbe7a6008
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 13a6b00..b97ae59 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
@@ -160,6 +160,8 @@
${this.renderLineNumberCell(Side.RIGHT)}
${this.renderSignCell(Side.RIGHT)} ${this.renderContentCell(Side.RIGHT)}
</tr>
+ ${this.renderPostLineSlot(Side.LEFT)}
+ ${this.renderPostLineSlot(Side.RIGHT)}
`;
if (this.addTableWrapperForTesting) {
return html`<table>
@@ -456,6 +458,13 @@
id=${this.contentId(side)}
>${textElement}</div>`;
}
+
+ private renderPostLineSlot(side: Side) {
+ const lineNumber = this.lineNumber(side);
+ return lineNumber && Number.isInteger(lineNumber)
+ ? html`<slot name="post-${side}-line-${lineNumber}"></slot>`
+ : nothing;
+ }
}
declare global {
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 1c7b311..42d30aa 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
@@ -87,6 +87,8 @@
</div>
</td>
</tr>
+ <slot name="post-left-line-1"></slot>
+ <slot name="post-right-line-1"></slot>
</tbody>
</table>
`
@@ -147,6 +149,8 @@
</div>
</td>
</tr>
+ <slot name="post-left-line-1"></slot>
+ <slot name="post-right-line-1"></slot>
</tbody>
</table>
`
@@ -201,6 +205,7 @@
<slot name="right-1"> </slot>
</div>
</td>
+ <slot name="post-right-line-1"></slot>
</tr>
</tbody>
</table>
@@ -257,6 +262,7 @@
<div class="contentText gr-diff" data-side="right"></div>
</td>
</tr>
+ <slot name="post-left-line-1"></slot>
</tbody>
</table>
`
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 14f4536..381f9b2 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
@@ -126,8 +126,14 @@
element,
/* HTML */ `
<gr-diff-row class="left-1 right-1"> </gr-diff-row>
+ <slot name="post-left-line-1"></slot>
+ <slot name="post-right-line-1"></slot>
<gr-diff-row class="left-1 right-1"> </gr-diff-row>
+ <slot name="post-left-line-1"></slot>
+ <slot name="post-right-line-1"></slot>
<gr-diff-row class="left-1 right-1"> </gr-diff-row>
+ <slot name="post-left-line-1"></slot>
+ <slot name="post-right-line-1"></slot>
<table>
<tbody class="both gr-diff section">
<tr
