Make "moved and changed" chunks distinct
Adds new theme variables for styling "moved and changed" chunks
separately from "moved" chunks
When no intraline diffs are available, it can be hard to spot additions
within a "moved and changed" chunk, or easily identify it as being
labelled as "moved and changed" at all.
For our internal use, the ideal long term solution is to ensure that
intraline diffs are always available in these cases. As a short term
fix, we're looking to update the colours of "moved and changed" chunks
to look like additions instead of moves. It may also be preferable to
then have separate colours for "moved and changed" then as well.
Leaving the default theme colours as-is for now, so this will be a
visual no-op for gerrit/existing users.
Google-Bug-Id: b/182852810
Change-Id: I4892ffa6dd8405d3c916a8b54aabe48d00c201ad
Release-Notes: n/a
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-builder-side-by-side.ts b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-builder-side-by-side.ts
index f7d1552..10a947d 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-builder-side-by-side.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-builder-side-by-side.ts
@@ -45,6 +45,9 @@
}
if (group.moveDetails) {
sectionEl.classList.add('dueToMove');
+ if (group.moveDetails.changed) {
+ sectionEl.classList.add('changed');
+ }
sectionEl.appendChild(this.buildMoveControls(group));
}
if (group.ignoredWhitespaceOnly) {
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-builder-unified.ts b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-builder-unified.ts
index a06701b..8eb3694 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-builder-unified.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-builder-unified.ts
@@ -44,6 +44,9 @@
}
if (group.moveDetails) {
sectionEl.classList.add('dueToMove');
+ if (group.moveDetails.changed) {
+ sectionEl.classList.add('changed');
+ }
sectionEl.appendChild(this.buildMoveControls(group));
}
if (group.ignoredWhitespaceOnly) {
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section.ts b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section.ts
index a1cde67..16c7cb3 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section.ts
@@ -81,6 +81,7 @@
if (this.group.isTotal()) extras.push('total');
if (this.group.dueToRebase) extras.push('dueToRebase');
if (this.group.moveDetails) extras.push('dueToMove');
+ if (this.group.moveDetails?.changed) extras.push('changed');
if (this.group.ignoredWhitespaceOnly) extras.push('ignoredWhitespaceOnly');
const isControl = this.group.type === GrDiffGroupType.CONTEXT_CONTROL;
diff --git a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts
index 28097df..1a2a8ad 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts
@@ -625,6 +625,14 @@
background-color: var(--diff-moved-in-background);
}
+ .dueToMove.changed .sign.add,
+ .dueToMove.changed .content.add .contentText,
+ .dueToMove.changed .moveControls.movedIn .sign.right,
+ .dueToMove.changed .moveControls.movedIn .moveHeader,
+ .delta.total.dueToMove.changed .content.add .contentText {
+ background-color: var(--diff-moved-in-changed-background);
+ }
+
.dueToMove .sign.remove,
.dueToMove .content.remove .contentText,
.dueToMove .moveControls.movedOut .moveHeader,
@@ -636,6 +644,9 @@
.delta.dueToMove .movedIn .moveHeader {
--gr-range-header-color: var(--diff-moved-in-label-color);
}
+ .delta.dueToMove.changed .movedIn .moveHeader {
+ --gr-range-header-color: var(--diff-moved-in-changed-label-color);
+ }
.delta.dueToMove .movedOut .moveHeader {
--gr-range-header-color: var(--diff-moved-out-label-color);
}
diff --git a/polygerrit-ui/app/styles/themes/app-theme.ts b/polygerrit-ui/app/styles/themes/app-theme.ts
index f6bab65..60e1a91 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.ts
+++ b/polygerrit-ui/app/styles/themes/app-theme.ts
@@ -399,6 +399,8 @@
--diff-moved-in-background: var(--cyan-50);
--diff-moved-in-label-color: var(--cyan-900);
+ --diff-moved-in-changed-background: var(--cyan-50);
+ --diff-moved-in-changed-label-color: var(--cyan-900);
--diff-moved-out-background: var(--purple-50);
--diff-moved-out-label-color: var(--purple-900);
diff --git a/polygerrit-ui/app/styles/themes/dark-theme.ts b/polygerrit-ui/app/styles/themes/dark-theme.ts
index 2330041..2836247 100644
--- a/polygerrit-ui/app/styles/themes/dark-theme.ts
+++ b/polygerrit-ui/app/styles/themes/dark-theme.ts
@@ -226,6 +226,8 @@
--diff-moved-in-background: #1d4042;
--diff-moved-in-label-color: var(--cyan-50);
+ --diff-moved-in-changed-background: #1d4042;
+ --diff-moved-in-changed-label-color: var(--cyan-50);
--diff-moved-out-background: #230e34;
--diff-moved-out-label-color: var(--purple-50);
