Reset image styling when diff is re-rendered
Because the image diff builder added classes directly on the diff table
element, and because the table element is reused across diff renders,
it was possible for the class to leak into the next diff render, which
may not have been an image diff. Apply the same styles without adding
classes to the table.
Bug: Issue 9651
Change-Id: Ie66a0dbd0577cce3a78c570d7055681271c5a70d
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js
index cb768ef..88ff79b 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js
@@ -35,7 +35,6 @@
GrDiffBuilderImage.prototype.constructor = GrDiffBuilderImage;
GrDiffBuilderImage.prototype.renderDiff = function() {
- this._outputEl.classList.add('image-diff');
const section = this._createElement('tbody', 'image-diff');
this._emitImagePair(section);
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index 1aba403..cd48026 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -55,7 +55,6 @@
background-color: var(--table-header-background-color);
}
.image-diff .gr-diff {
- background-color: var(--table-header-background-color);
text-align: center;
}
.image-diff img {
@@ -83,6 +82,9 @@
.content {
background-color: var(--view-background-color);
}
+ .image-diff .content {
+ background-color: var(--table-header-background-color);
+ }
.full-width {
width: 100%;
}
