Merge "Change the background color of blank areas in diff"
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 0dec63f..1378f33 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.html
+++ b/polygerrit-ui/app/styles/themes/app-theme.html
@@ -127,7 +127,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 1a49f18..56452cb 100644
--- a/polygerrit-ui/app/styles/themes/dark-theme.html
+++ b/polygerrit-ui/app/styles/themes/dark-theme.html
@@ -87,7 +87,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);
