opendev/gerrit
Code Issues Proposed changes

Change the background color of blank areas in diff

Browse Source 
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
This commit is contained in:
Ben Rohlfs
2020-01-21 17:05:51 +01:00
parent e25b2154b4
commit beb28f7418
3 changed files with 29 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
View File

@@ -37,11 +37,6 @@ limitations under the License.
: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 @@ limitations under the License.
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 @@ limitations under the License.
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 @@ limitations under the License.
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 @@ limitations under the License.
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 @@ limitations under the License.
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;

2
polygerrit-ui/app/styles/themes/app-theme.html
View File

@@ -125,7 +125,7 @@ html {
--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);

2
polygerrit-ui/app/styles/themes/dark-theme.html
View File

@@ -85,7 +85,7 @@ limitations under the License.
--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);