Repository: jupyter/nbdime (language: python)

Issue:
CM6: Conflicting cell ops (deleted/added) are missing color highlighting
Old look (CM5):
![image](https://github.com/jupyter/nbdime/assets/510760/40aa9144-6712-481f-8edb-f8408be610f4)

New look (CM6):
![image](https://github.com/jupyter/nbdime/assets/510760/1e4262a4-dddc-46a6-9596-5fae11eca084)

While it is still possible to distinguish which cells as being added or removed, we should ensure there is still color highlighting via background color to these full cells to make it easier to visually distinguish.


Discussion / hints:

Fix patch:
diff --git a/packages/nbdime/package.json b/packages/nbdime/package.json
index 63db0e3f..90520f3a 100644
--- a/packages/nbdime/package.json
+++ b/packages/nbdime/package.json
@@ -16,7 +16,7 @@
   ],
   "scripts": {
     "build": "tsc --project . && node scripts/copy-files.js",
-    "build:dev": "tsc --project .",
+    "build:dev": "npm run build",
     "clean": "rimraf test/build lib tsconfig.tsbuildinfo",
     "prepublishOnly": "npm run build",
     "test": "jest --coverage",
diff --git a/packages/nbdime/src/common/mergeview.ts b/packages/nbdime/src/common/mergeview.ts
index 221d78a2..8e0fb10c 100644
--- a/packages/nbdime/src/common/mergeview.ts
+++ b/packages/nbdime/src/common/mergeview.ts
@@ -1491,6 +1491,8 @@ export class MergeView extends Panel {
       value,
     });
 
+    this.addClass('jp-Mergeview-root');
+
     // START MERGE CASE
     if (merged) {
       this.addClass('cm-merge-grid-panel');
@@ -1628,6 +1630,7 @@ export class MergeView extends Panel {
         } else if (remote.deleted) {
           this._base.addClass('cm-merge-pane-deleted');
         }
+        this._base.addClass('cm-merge-pane');
       } else {
         panes = 2;
         this.addWidget(this._base);
diff --git a/packages/nbdime/src/styles/common.css b/packages/nbdime/src/styles/common.css
index e1e635d5..7263f091 100644
--- a/packages/nbdime/src/styles/common.css
+++ b/packages/nbdime/src/styles/common.css
@@ -1,3 +1,11 @@
+.nbdime-root .cm-merge-pane {
+  background-color: var(--jp-cell-editor-background);
+}
+
+.nbdime-root .jp-Mergeview-root {
+  border: var(--codemirror-border);
+}
+
 .nbdime-root .cm-merge-1pane {
   display: grid;
   /* editor */
@@ -25,24 +33,23 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: minmax(18px, auto);
+  gap: var(--jp-border-width);
+  background-color: var(--jp-cell-editor-border-color);
 }
 
 .nbdime-root .cm-merge-left-editor {
   grid-column: 1;
   grid-row: 1;
-  background-color: var(--jp-cell-editor-background);
 }
 
 .nbdime-root .cm-central-editor {
   grid-column: 2;
   grid-row: 1;
-  background-color: var(--jp-cell-editor-background);
 }
 
 .nbdime-root .cm-merge-right-editor {
   grid-column: 3;
   grid-row: 1;
-  background-color: var(--jp-cell-editor-background);
 }
 
 .nbdime-root .cm-merge-4pane > .cm-merge-editor {
@@ -87,9 +94,7 @@
   white-space: normal;
   vertical-align: top;
   width: 100%;
-  background-color: var(--jp-cell-editor-background);
-  border: var(--codemirror-border);
-  border-radius: 0px;
+  background-color: transparent;
 }
 
 .nbdime-root .cm-merge-pane-rightmost {
diff --git a/packages/nbdime/src/styles/diff.css b/packages/nbdime/src/styles/diff.css
index e0ff0f2c..02a48d65 100644
--- a/packages/nbdime/src/styles/diff.css
+++ b/packages/nbdime/src/styles/diff.css
@@ -19,8 +19,7 @@
 
 /* Match input border of unchanged cell source */
 .jp-Notebook-diff .jp-Diff-unchanged .cm-merge-pane-unchanged {
-  border: var(--jp-border-width) solid
-    var(--jp-private-notebook-cell-editor-border);
+  border: var(--codemirror-border);
 }
 
 /* Do not use border between unchanged cells */
@@ -223,14 +222,19 @@
   background-color: var(--jp-diff-added-color2);
 }
 
-.jp-Notebook-diff .cm-merge-pane-deleted > .cm-editor,
+/* Unset outer border from common */
+.jp-Notebook-diff .jp-Mergeview-root.cm-merge-1pane {
+  border: unset;
+}
+
+.jp-Notebook-diff .cm-merge-pane-deleted,
 .jp-Notebook-diff .jp-Diff-deleted .jp-Diff-renderedOutput,
 .jp-Cellrow-outputs .jp-Diff-twoway .jp-Diff-base {
   background-color: var(--jp-diff-deleted-color2);
   border: solid 1px var(--jp-diff-deleted-color0);
 }
 
-.jp-Notebook-diff .cm-merge-pane-added > .cm-editor,
+.jp-Notebook-diff .cm-merge-pane-added,
 .jp-Notebook-diff .jp-Diff-added .jp-Diff-renderedOutput,
 .jp-Cellrow-outputs .jp-Diff-twoway .jp-Diff-remote {
   background-color: var(--jp-diff-added-color2);
diff --git a/packages/nbdime/src/styles/merge.css b/packages/nbdime/src/styles/merge.css
index 800060bc..efc1cda8 100644
--- a/packages/nbdime/src/styles/merge.css
+++ b/packages/nbdime/src/styles/merge.css
@@ -20,11 +20,6 @@
   margin-top: 20px;
 }
 
-.jp-Notebook-merge .cm-merge-pane-final {
-  width: 100%;
-  border-top: var(--codemirror-border);
-}
-
 .jp-Notebook-merge .jp-Output-result img {
   max-width: 100%;
 }
@@ -287,6 +282,14 @@
   margin-left: 25%;
 }
 
+.jp-Notebook-merge .jp-Merge-oneway-local .cm-merge-pane {
+  background-color: var(--jp-merge-local-color2);
+}
+
+.jp-Notebook-merge .jp-Merge-oneway-remote .cm-merge-pane {
+  background-color: var(--jp-merge-remote-color2);
+}
+
 .jp-Notebook-merge .jp-Merge-gutter-picker {
   width: 16px;
   text-align: right;


Test patch:
diff --git a/ui-tests/tests/nbdime-diff-test3.spec.ts-snapshots/diff-test3-take-a-snapshot-at-opening-1-linux.png b/ui-tests/tests/nbdime-diff-test3.spec.ts-snapshots/diff-test3-take-a-snapshot-at-opening-1-linux.png
index 28a161eb..750226ec 100644
Binary files a/ui-tests/tests/nbdime-diff-test3.spec.ts-snapshots/diff-test3-take-a-snapshot-at-opening-1-linux.png and b/ui-tests/tests/nbdime-diff-test3.spec.ts-snapshots/diff-test3-take-a-snapshot-at-opening-1-linux.png differ
diff --git a/ui-tests/tests/nbdime-diff-test3.spec.ts-snapshots/diff-test3-take-a-snapshot-at-opening-1-win32.png b/ui-tests/tests/nbdime-diff-test3.spec.ts-snapshots/diff-test3-take-a-snapshot-at-opening-1-win32.png
index b253a34e..6b19e602 100644
Binary files a/ui-tests/tests/nbdime-diff-test3.spec.ts-snapshots/diff-test3-take-a-snapshot-at-opening-1-win32.png and b/ui-tests/tests/nbdime-diff-test3.spec.ts-snapshots/diff-test3-take-a-snapshot-at-opening-1-win32.png differ
diff --git a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/3-panels-view-1-linux.png b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/3-panels-view-1-linux.png
index c48be9c7..e852c02f 100644
Binary files a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/3-panels-view-1-linux.png and b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/3-panels-view-1-linux.png differ
diff --git a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/3-panels-view-1-win32.png b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/3-panels-view-1-win32.png
index b34e6ab5..6d9d658d 100644
Binary files a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/3-panels-view-1-win32.png and b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/3-panels-view-1-win32.png differ
diff --git a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-central-version-for-conflict-1-linux.png b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-central-version-for-conflict-1-linux.png
index 6809abfe..ab4322f2 100644
Binary files a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-central-version-for-conflict-1-linux.png and b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-central-version-for-conflict-1-linux.png differ
diff --git a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-central-version-for-conflict-1-win32.png b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-central-version-for-conflict-1-win32.png
index 4c31e73e..e7dabd62 100644
Binary files a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-central-version-for-conflict-1-win32.png and b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-central-version-for-conflict-1-win32.png differ
diff --git a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-left-version-for-conflict-1-linux.png b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-left-version-for-conflict-1-linux.png
index 9b4e81ed..68f5c76d 100644
Binary files a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-left-version-for-conflict-1-linux.png and b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-left-version-for-conflict-1-linux.png differ
diff --git a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-left-version-for-conflict-1-win32.png b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-left-version-for-conflict-1-win32.png
index 3e95832c..8fdacdfb 100644
Binary files a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-left-version-for-conflict-1-win32.png and b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-left-version-for-conflict-1-win32.png differ
diff --git a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-right-version-for-conflict-1-linux.png b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-right-version-for-conflict-1-linux.png
index 7c121d65..8d4c14c3 100644
Binary files a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-right-version-for-conflict-1-linux.png and b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-right-version-for-conflict-1-linux.png differ
diff --git a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-right-version-for-conflict-1-win32.png b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-right-version-for-conflict-1-win32.png
index 3de23850..d99e67d4 100644
Binary files a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-right-version-for-conflict-1-win32.png and b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-choose-right-version-for-conflict-1-win32.png differ
diff --git a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-take-a-snapshot-at-opening-1-linux.png b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-take-a-snapshot-at-opening-1-linux.png
index 6481403b..949aae7e 100644
Binary files a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-take-a-snapshot-at-opening-1-linux.png and b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-take-a-snapshot-at-opening-1-linux.png differ
diff --git a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-take-a-snapshot-at-opening-1-win32.png b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-take-a-snapshot-at-opening-1-win32.png
index 0dc81daf..09b45ab1 100644
Binary files a/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-take-a-snapshot-at-opening-1-win32.png and b/ui-tests/tests/nbdime-merge-test1.spec.ts-snapshots/merge-test1-take-a-snapshot-at-opening-1-win32.png differ
diff --git a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-central-version-1-linux.png b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-central-version-1-linux.png
index 21605950..c1128624 100644
Binary files a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-central-version-1-linux.png and b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-central-version-1-linux.png differ
diff --git a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-central-version-1-win32.png b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-central-version-1-win32.png
index f69e8b21..1e93170a 100644
Binary files a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-central-version-1-win32.png and b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-central-version-1-win32.png differ
diff --git a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-left-version-1-linux.png b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-left-version-1-linux.png
index 8a8e37c4..e3167406 100644
Binary files a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-left-version-1-linux.png and b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-left-version-1-linux.png differ
diff --git a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-left-version-1-win32.png b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-left-version-1-win32.png
index 937c89e5..4c86a6d7 100644
Binary files a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-left-version-1-win32.png and b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-left-version-1-win32.png differ
diff --git a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-right-version-1-linux.png b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-right-version-1-linux.png
index 8a8e37c4..e3167406 100644
Binary files a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-right-version-1-linux.png and b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-right-version-1-linux.png differ
diff --git a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-right-version-1-win32.png b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-right-version-1-win32.png
index 937c89e5..4c86a6d7 100644
Binary files a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-right-version-1-win32.png and b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-choose-right-version-1-win32.png differ
diff --git a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-take-a-snapshot-at-opening-1-linux.png b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-take-a-snapshot-at-opening-1-linux.png
index 8a8e37c4..e3167406 100644
Binary files a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-take-a-snapshot-at-opening-1-linux.png and b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-take-a-snapshot-at-opening-1-linux.png differ
diff --git a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-take-a-snapshot-at-opening-1-win32.png b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-take-a-snapshot-at-opening-1-win32.png
index 937c89e5..4c86a6d7 100644
Binary files a/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-take-a-snapshot-at-opening-1-win32.png and b/ui-tests/tests/nbdime-merge-test2.spec.ts-snapshots/merge-test2-take-a-snapshot-at-opening-1-win32.png differ
diff --git a/ui-tests/tests/nbdime-merge-test4.spec.ts-snapshots/merge-test4-should-synchronize-the-collapse-status-between-editor-1-linux.png b/ui-tests/tests/nbdime-merge-test4.spec.ts-snapshots/merge-test4-should-synchronize-the-collapse-status-between-editor-1-linux.png
index b6971a00..ed8eb9ee 100644
Binary files a/ui-tests/tests/nbdime-merge-test4.spec.ts-snapshots/merge-test4-should-synchronize-the-collapse-status-between-editor-1-linux.png and b/ui-tests/tests/nbdime-merge-test4.spec.ts-snapshots/merge-test4-should-synchronize-the-collapse-status-between-editor-1-linux.png differ
diff --git a/ui-tests/tests/nbdime-merge-test4.spec.ts-snapshots/merge-test4-should-synchronize-the-collapse-status-between-editor-1-win32.png b/ui-tests/tests/nbdime-merge-test4.spec.ts-snapshots/merge-test4-should-synchronize-the-collapse-status-between-editor-1-win32.png
index 83f1a87e..85d9ac6f 100644
Binary files a/ui-tests/tests/nbdime-merge-test4.spec.ts-snapshots/merge-test4-should-synchronize-the-collapse-status-between-editor-1-win32.png and b/ui-tests/tests/nbdime-merge-test4.spec.ts-snapshots/merge-test4-should-synchronize-the-collapse-status-between-editor-1-win32.png differ
diff --git a/ui-tests/tests/nbdime-merge-test5.spec.ts-snapshots/merge-test5-take-a-snapshot-at-opening-1-linux.png b/ui-tests/tests/nbdime-merge-test5.spec.ts-snapshots/merge-test5-take-a-snapshot-at-opening-1-linux.png
index 0dc42feb..72ba7ae5 100644
Binary files a/ui-tests/tests/nbdime-merge-test5.spec.ts-snapshots/merge-test5-take-a-snapshot-at-opening-1-linux.png and b/ui-tests/tests/nbdime-merge-test5.spec.ts-snapshots/merge-test5-take-a-snapshot-at-opening-1-linux.png differ
diff --git a/ui-tests/tests/nbdime-merge-test5.spec.ts-snapshots/merge-test5-take-a-snapshot-at-opening-1-win32.png b/ui-tests/tests/nbdime-merge-test5.spec.ts-snapshots/merge-test5-take-a-snapshot-at-opening-1-win32.png
index e9a9c597..d8011f98 100644
Binary files a/ui-tests/tests/nbdime-merge-test5.spec.ts-snapshots/merge-test5-take-a-snapshot-at-opening-1-win32.png and b/ui-tests/tests/nbdime-merge-test5.spec.ts-snapshots/merge-test5-take-a-snapshot-at-opening-1-win32.png differ
diff --git a/ui-tests/tests/nbdime-merge-test6.spec.ts-snapshots/merge-test6-take-a-snapshot-at-opening-1-linux.png b/ui-tests/tests/nbdime-merge-test6.spec.ts-snapshots/merge-test6-take-a-snapshot-at-opening-1-linux.png
index db0a3f48..35f61178 100644
Binary files a/ui-tests/tests/nbdime-merge-test6.spec.ts-snapshots/merge-test6-take-a-snapshot-at-opening-1-linux.png and b/ui-tests/tests/nbdime-merge-test6.spec.ts-snapshots/merge-test6-take-a-snapshot-at-opening-1-linux.png differ
diff --git a/ui-tests/tests/nbdime-merge-test6.spec.ts-snapshots/merge-test6-take-a-snapshot-at-opening-1-win32.png b/ui-tests/tests/nbdime-merge-test6.spec.ts-snapshots/merge-test6-take-a-snapshot-at-opening-1-win32.png
index dd3d5574..8f3f5071 100644
Binary files a/ui-tests/tests/nbdime-merge-test6.spec.ts-snapshots/merge-test6-take-a-snapshot-at-opening-1-win32.png and b/ui-tests/tests/nbdime-merge-test6.spec.ts-snapshots/merge-test6-take-a-snapshot-at-opening-1-win32.png differ