CM6: Fix spacing between editors (#728)

* Fix vertical spacing between editors, to have everything from a single cell spaced together.

* Update Playwright Snapshots

* Update Playwright Snapshots

* Fix white remaining gap in the local and remote editors.

* Fix style for chunk start and end in either and mixed cases.

* Fix linting issues.

* Restore borders for the editors.

* Fix some css leftovers in merge.css for chunk start and end, replacing them using ::before and ::after.

* Update Playwright Snapshots

* Update Playwright Snapshots

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

RELEASE.md

@@ -109,4 +109,4 @@ Here is a summary of the steps to cut a new release:
 
 If the package is not on conda forge yet, check the documentation to learn how to add it: https://conda-forge.org/docs/maintainer/adding_pkgs.html
 
-Otherwise a bot should pick up the new version publish to PyPI, and open a new PR on the feedstock repository automatically.
+Otherwise a bot should pick up the new version publish to PyPI, and open a new PR on the feedstock repository automatically.

packages/nbdime/src/common/collapsible.css

@@ -50,10 +50,18 @@ button.jp-CollapsiblePanel-header-icon:active {
   height: 100%;
 
   /* only transition on transform properties which are hardware accelerated = way better performances */
-  -webkit-transition: -webkit-transform 0.3s ease, height 0.3s;
-  -moz-transition: -moz-transform 0.3s ease, height 0.3s;
-  -ms-transition: -ms-transform 0.3s ease, height 0.3s;
-  transition: transform 0.3s ease, height 0.3s;
+  -webkit-transition:
+    -webkit-transform 0.3s ease,
+    height 0.3s;
+  -moz-transition:
+    -moz-transform 0.3s ease,
+    height 0.3s;
+  -ms-transition:
+    -ms-transform 0.3s ease,
+    height 0.3s;
+  transition:
+    transform 0.3s ease,
+    height 0.3s;
 }
 
 .jp-CollapsiblePanel-opened {

packages/nbdime/src/common/dragpanel.css

@@ -5,7 +5,8 @@
 |----------------------------------------------------------------------------*/
 
 .jp-DragPanel-dragHandle {
-  background: radial-gradient(rgba(255, 255, 255, 0.6) 30%, transparent 31%) 0 0,
+  background:
+    radial-gradient(rgba(255, 255, 255, 0.6) 30%, transparent 31%) 0 0,
     radial-gradient(transparent 19%, rgba(0, 0, 0, 0.4) 20%, transparent 50%) 0
       1px;
   background-size: 6px 6px;
@@ -19,4 +20,4 @@
 .lm-mod-drag-image {
   left: 0px;
   top: 0px;
-}
+}

packages/nbdime/src/common/mergeview.ts

@@ -143,7 +143,7 @@ const baseTheme = EditorView.baseTheme({
     border: 'var(--jp-border-width) solid var(--jp-border-color1)',
     fontSize: '90%',
     padding: '0 3px',
-    borderRadius: '4px'
+    borderRadius: '4px',
   },
 });
 

packages/nbdime/src/styles/common.css

@@ -24,23 +24,25 @@
 .nbdime-root .cm-merge-4pane {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
   grid-auto-rows: minmax(18px, auto);
 }
 
 .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 {
@@ -86,6 +88,8 @@
   vertical-align: top;
   width: 100%;
   background-color: var(--jp-cell-editor-background);
+  border: var(--codemirror-border);
+  border-radius: 0px;
 }
 
 .nbdime-root .cm-merge-pane-rightmost {

packages/nbdime/src/styles/merge.css

@@ -43,7 +43,6 @@
   flex-grow: 1;
 }
 
-
 .jp-Notebook-merge .jp-conflicted-cellId .jp-Merge-cellHeader-title {
   align-self: center;
   text-align: center;
@@ -123,15 +122,20 @@
 }
 
 .jp-Notebook-merge
-  .cm-merge-r-chunk-end-empty
+  .cm-merge-r-chunk-end-empty::after
   + .cm-linewidget
   .cm-merge-spacer,
 .jp-Notebook-merge
-  .cm-merge-m-chunk-end-remote-empty
+  .cm-merge-m-chunk-end-remote-empty::after
   + .cm-linewidget
   .cm-merge-spacer {
-  border-bottom: 1px solid var(--jp-merge-remote-color1);
-  background-color: var(--jp-merge-remote-color3);
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: var(--jp-merge-remote-color1);
+  display: block;
+  position: absolute;
+  left: 0px;
 }
 
 .jp-Notebook-merge .cm-merge-l-chunk {
@@ -226,22 +230,41 @@
   z-index: 3;
 }
 
-.jp-Notebook-merge .cm-merge-m-chunk-start-either,
-.jp-Notebook-merge .cm-merge-m-chunk-start-mixed:not(.cm-merge-m-chunk-custom) {
-  border-top: 1px solid var(--jp-merge-either-color1);
+.jp-Notebook-merge .cm-merge-m-chunk-start-either::before,
+.jp-Notebook-merge
+  .cm-merge-m-chunk-start-mixed:not(.cm-merge-m-chunk-custom)::before {
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: var(--jp-merge-either-color1);
+  display: block;
+  position: absolute;
+  left: 0px;
 }
 
-.jp-Notebook-merge .cm-merge-m-chunk-end-either,
-.jp-Notebook-merge .cm-merge-m-chunk-end-mixed:not(.cm-merge-m-chunk-custom) {
-  border-bottom: 1px solid var(--jp-merge-either-color1);
+.jp-Notebook-merge .cm-merge-m-chunk-end-either::after,
+.jp-Notebook-merge
+  .cm-merge-m-chunk-end-mixed:not(.cm-merge-m-chunk-custom)::after {
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: var(--jp-merge-either-color1);
+  display: block;
+  position: absolute;
+  left: 0px;
 }
 
 .jp-Notebook-merge
-  .cm-merge-m-chunk-end-either-empty
+  .cm-merge-m-chunk-end-either-empty::after
   + .cm-linewidget
   .cm-merge-spacer {
-  border-bottom: 1px solid var(--jp-merge-either-color1);
-  background-color: var(--jp-merge-either-color2);
+    content: '';
+    width: 100%;
+    height: 1px;
+    background: var(--jp-merge-either-color1);
+    display: block;
+    position: absolute;
+    left: 0px;
 }
 
 .jp-Notebook-merge .cm-central-editor .cm-line .cm-merge-m-deleted,

ui-tests/tests/nbdime-merge-test1.spec.ts

@@ -27,7 +27,7 @@ test.describe('merge test1', () => {
   test('choose left version for conflict', async ({ page }) => {
     await page
       .locator('.cm-merge-left-editor')
-      .nth(1)  // This select the cell; 0 being the notebook metadata
+      .nth(1) // This select the cell; 0 being the notebook metadata
       .locator('.jp-Merge-gutter-picker')
       .last()
       .click();
@@ -38,7 +38,7 @@ test.describe('merge test1', () => {
   test('choose central version for conflict', async ({ page }) => {
     await page
       .locator('.cm-central-editor')
-      .nth(1)  // This select the cell; 0 being the notebook metadata
+      .nth(1) // This select the cell; 0 being the notebook metadata
       .locator('.jp-Merge-gutter-picker')
       .nth(2)
       .click();
@@ -49,7 +49,7 @@ test.describe('merge test1', () => {
   test('choose right version for conflict', async ({ page }) => {
     await page
       .locator('.cm-merge-right-editor')
-      .nth(1)  // This select the cell; 0 being the notebook metadata
+      .nth(1) // This select the cell; 0 being the notebook metadata
       .locator('.jp-Merge-gutter-picker')
       .last()
       .click();

ui-tests/tests/nbdime-merge-test2.spec.ts

@@ -18,7 +18,7 @@ test.describe('merge test2 ', () => {
   test('choose left version', async ({ page }) => {
     await page
       .locator('.cm-merge-left-editor')
-      .nth(1)  // This select the cell; 0 being the notebook metadata
+      .nth(1) // This select the cell; 0 being the notebook metadata
       .locator('.jp-Merge-gutter-picker')
       .last()
       .click();
@@ -28,7 +28,7 @@ test.describe('merge test2 ', () => {
   test('choose central version', async ({ page }) => {
     await page
       .locator('.cm-central-editor')
-      .nth(1)  // This select the cell; 0 being the notebook metadata
+      .nth(1) // This select the cell; 0 being the notebook metadata
       .locator('.jp-Merge-gutter-picker')
       .nth(2)
       .click();
@@ -38,7 +38,7 @@ test.describe('merge test2 ', () => {
   test('choose right version', async ({ page }) => {
     await page
       .locator('.cm-merge-right-editor')
-      .nth(1)  // This select the cell; 0 being the notebook metadata
+      .nth(1) // This select the cell; 0 being the notebook metadata
       .locator('.jp-Merge-gutter-picker')
       .last()
       .click();

ui-tests/tests/nbdime-merge-test6.spec.ts

@@ -10,7 +10,7 @@ test.describe('merge test6', () => {
   });
 
   test('take a snapshot at opening', async ({ page }) => {
-    await page.getByText('Hide unchanged cells').click()
+    await page.getByText('Hide unchanged cells').click();
     await page.getByText('a = "hello the world"').waitFor();
     // Check that single editor are not collapsed; added cell and unchanged cell
     expect.soft(await page.locator('#main').screenshot()).toMatchSnapshot();