Change the background color of blank areas in diff
The background color behind a diff should be gray, not red/green
depending on what changed in the line above.
The background color of blank areas on the other side of the diff of
where the comments are should be gray, not white.
To accomplish this the existing background color rules had to be
changed to use .contextText, which is the div nested in the <td>
element. The <td> element itself should get the blank background
color, while the .contextText element gets the red/green color.
Change-Id: I37b1391a9c071f686e6d687b7f72e48d6f66956e
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 fe64a1b..dea9789 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -37,11 +37,6 @@
:host(.no-left) .sideBySide .right:not([data-value]) + td {
display: none;
}
- ::slotted(*) .thread-group {
- display: block;
- max-width: var(--content-width, 80ch);
- white-space: normal;
- }
:host {
font-family: var(--monospace-font-family, ''), 'Roboto Mono';
font-size: var(--font-size, var(--font-size-code, 12px));
@@ -52,6 +47,7 @@
display: block;
max-width: var(--content-width, 80ch);
white-space: normal;
+ background-color: var(--diff-blank-background-color);
}
.diffContainer {
display: flex;
@@ -67,7 +63,7 @@
table-layout: fixed;
}
.lineNum {
- background-color: var(--table-header-background-color);
+ background-color: var(--diff-blank-background-color);
}
.image-diff .gr-diff {
text-align: center;
@@ -94,13 +90,16 @@
color: var(--primary-text-color);
}
.content {
+ background-color: var(--diff-blank-background-color);
+ }
+ .contentText {
background-color: var(--view-background-color);
}
.blank {
background-color: var(--diff-blank-background-color);
}
.image-diff .content {
- background-color: var(--table-header-background-color);
+ background-color: var(--diff-blank-background-color);
}
.full-width {
width: 100%;
@@ -135,48 +134,48 @@
min-width: var(--content-width, 80ch);
width: var(--content-width, 80ch);
}
- .content.add .intraline,
+ .content.add .contentText .intraline,
/* If there are no intraline info, consider everything changed */
- .content.add.no-intraline-info,
- .delta.total .content.add {
+ .content.add.no-intraline-info .contentText,
+ .delta.total .content.add .contentText {
background-color: var(--dark-add-highlight-color);
}
- .content.add {
+ .content.add .contentText {
background-color: var(--light-add-highlight-color);
}
- .content.remove .intraline,
+ .content.remove .contentText .intraline,
/* If there are no intraline info, consider everything changed */
- .content.remove.no-intraline-info,
- .delta.total .content.remove {
+ .content.remove.no-intraline-info .contentText,
+ .delta.total .content.remove .contentText {
background-color: var(--dark-remove-highlight-color);
}
- .content.remove {
+ .content.remove .contentText {
background-color: var(--light-remove-highlight-color);
}
/* dueToRebase */
- .dueToRebase .content.add .intraline,
- .delta.total.dueToRebase .content.add {
+ .dueToRebase .content.add .contentText .intraline,
+ .delta.total.dueToRebase .content.add .contentText {
background-color: var(--dark-rebased-add-highlight-color);
}
- .dueToRebase .content.add {
+ .dueToRebase .content.add .contentText {
background-color: var(--light-rebased-add-highlight-color);
}
- .dueToRebase .content.remove .intraline,
- .delta.total.dueToRebase .content.remove {
+ .dueToRebase .content.remove .contentText .intraline,
+ .delta.total.dueToRebase .content.remove .contentText {
background-color: var(--dark-rebased-remove-highlight-color);
}
- .dueToRebase .content.remove {
+ .dueToRebase .content.remove .contentText {
background-color: var(--light-remove-add-highlight-color);
}
/* ignoredWhitespaceOnly */
- .ignoredWhitespaceOnly .content.add .intraline,
- .delta.total.ignoredWhitespaceOnly .content.add,
- .ignoredWhitespaceOnly .content.add,
- .ignoredWhitespaceOnly .content.remove .intraline,
- .delta.total.ignoredWhitespaceOnly .content.remove,
- .ignoredWhitespaceOnly .content.remove {
+ .ignoredWhitespaceOnly .content.add .contentText .intraline,
+ .delta.total.ignoredWhitespaceOnly .content.add .contentText,
+ .ignoredWhitespaceOnly .content.add .contentText,
+ .ignoredWhitespaceOnly .content.remove .contentText .intraline,
+ .delta.total.ignoredWhitespaceOnly .content.remove .contentText,
+ .ignoredWhitespaceOnly .content.remove .contentText {
background: none;
}
@@ -281,8 +280,7 @@
width: 200px;
}
/** Support the line length indicator **/
- .full-width td.content,
- .full-width td.blank {
+ .full-width td.content .contentText {
/* Base 64 encoded 1x1px of #ddd */
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+x8AAr8B3gzOjaQAAAAASUVORK5CYII=');
background-position: var(--line-limit) 0;
diff --git a/polygerrit-ui/app/styles/themes/app-theme.html b/polygerrit-ui/app/styles/themes/app-theme.html
index 369af2b..eff3d80 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.html
+++ b/polygerrit-ui/app/styles/themes/app-theme.html
@@ -125,7 +125,7 @@
--dark-rebased-add-highlight-color: #d7d7f9;
--dark-rebased-remove-highlight-color: #f7e8b7;
--dark-remove-highlight-color: #ffcdd2;
- --diff-blank-background-color: white;
+ --diff-blank-background-color: var(--background-color-secondary);
--diff-context-control-background-color: #fff7d4;
--diff-context-control-border-color: #f6e6a5;
--diff-context-control-color: var(--deemphasized-text-color);
diff --git a/polygerrit-ui/app/styles/themes/dark-theme.html b/polygerrit-ui/app/styles/themes/dark-theme.html
index 80243dc..b515179 100644
--- a/polygerrit-ui/app/styles/themes/dark-theme.html
+++ b/polygerrit-ui/app/styles/themes/dark-theme.html
@@ -85,7 +85,7 @@
--dark-rebased-add-highlight-color: rgba(11, 255, 155, 0.15);
--dark-rebased-remove-highlight-color: rgba(255, 139, 6, 0.15);
--dark-remove-highlight-color: #62110f;
- --diff-blank-background-color: #212121;
+ --diff-blank-background-color: var(--background-color-secondary);
--diff-context-control-background-color: #333311;
--diff-context-control-border-color: var(--border-color);
--diff-context-control-color: var(--deemphasized-text-color);
