Repository: jupyter/nbdime (language: python)

Issue:
CM6: Fix border styles / line spacing
With CM 6, the chunk highlighting is now with `border` style directly on the line elements. This occupies vertical space. We should consider whether a different styling method can be used, or compensate for this space by different CSS rules.


Discussion / hints:

Fix patch:
diff --git a/packages/nbdime/src/styles/diff.css b/packages/nbdime/src/styles/diff.css
index 511873c2..991632ee 100644
--- a/packages/nbdime/src/styles/diff.css
+++ b/packages/nbdime/src/styles/diff.css
@@ -152,8 +152,8 @@
 }
 
 .jp-Notebook-diff .cm-line {
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
+  /* enable positioning pseudo-elements relative to line */
+  position: relative;
 }
 
 /* Color diff highlighting according to style vars */
@@ -161,12 +161,16 @@
   background-color: var(--jp-diff-deleted-color2);
 }
 
-.jp-Notebook-diff .cm-merge-r-chunk-start {
-  border-top: 1px solid var(--jp-diff-deleted-color0);
-}
-
-.jp-Notebook-diff .cm-merge-r-chunk-end {
-  border-bottom: 1px solid var(--jp-diff-deleted-color0);
+/* border-top/bottom without taking up space */
+.jp-Notebook-diff .cm-merge-r-chunk-start::before,
+.jp-Notebook-diff .cm-merge-r-chunk-end::after {
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: var(--jp-diff-deleted-color0);
+  display: block;
+  position: absolute;
+  left: 0px;
 }
 
 .jp-Notebook-diff .cm-merge-r-connect {
@@ -187,12 +191,17 @@
   background-color: var(--jp-diff-added-color2);
 }
 
-.jp-Notebook-diff .cm-diff-right-editor .cm-merge-r-chunk-start {
-  border-top: 1px solid var(--jp-diff-added-color0);
-}
-
-.jp-Notebook-diff .cm-diff-right-editor .cm-merge-r-chunk-end {
-  border-bottom: 1px solid var(--jp-diff-added-color0);
+/* border-top/bottom without taking up space */
+.jp-Notebook-diff .cm-diff-right-editor .cm-merge-r-chunk-start::before,
+.jp-Notebook-diff .cm-diff-right-editor .cm-merge-r-chunk-end::after
+{
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: var(--jp-diff-added-color0);
+  display: block;
+  position: absolute;
+  left: 0px;
 }
 
 .jp-Notebook-diff .cm-diff-right-editor .cm-merge-r-connect {
diff --git a/packages/nbdime/src/styles/merge.css b/packages/nbdime/src/styles/merge.css
index 88aee153..7d675d5c 100644
--- a/packages/nbdime/src/styles/merge.css
+++ b/packages/nbdime/src/styles/merge.css
@@ -76,27 +76,31 @@
   width: 100%;
 }
 
-.jp-Notebook-merge .cm-merge-spacer {
-  background-color: #eee;
+.jp-Notebook-merge .cm-line {
+  /* enable positioning pseudo-elements relative to line */
+  position: relative;
 }
 
-.jp-Notebook-merge .cm-line {
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
+.jp-Notebook-merge .cm-merge-spacer {
+  background-color: #eee;
 }
 
 .jp-Notebook-merge .cm-merge-r-chunk {
   background-color: var(--jp-merge-remote-color2);
 }
 
-.jp-Notebook-merge .cm-merge-r-chunk-start,
-.jp-Notebook-merge .cm-merge-m-chunk-start-remote {
-  border-top: 1px solid var(--jp-merge-remote-color1);
-}
-
-.jp-Notebook-merge .cm-merge-r-chunk-end,
-.jp-Notebook-merge .cm-merge-m-chunk-end-remote {
-  border-bottom: 1px solid var(--jp-merge-remote-color1);
+/* border-top/bottom without taking up space */
+.jp-Notebook-merge .cm-merge-r-chunk-start::before,
+.jp-Notebook-merge .cm-merge-m-chunk-start-remote::before,
+.jp-Notebook-merge .cm-merge-r-chunk-end::after,
+.jp-Notebook-merge .cm-merge-m-chunk-end-remote::after {
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: var(--jp-merge-remote-color1);
+  display: block;
+  position: absolute;
+  left: 0px;
 }
 
 .jp-Notebook-merge .cm-merge-r-connect {
@@ -125,14 +129,18 @@
   background-color: var(--jp-merge-local-color2);
 }
 
-.jp-Notebook-merge .cm-merge-l-chunk-start,
-.jp-Notebook-merge .cm-merge-m-chunk-start-local {
-  border-top: 1px solid var(--jp-merge-local-color1);
-}
-
-.jp-Notebook-merge .cm-merge-l-chunk-end,
-.jp-Notebook-merge .cm-merge-m-chunk-end-local {
-  border-bottom: 1px solid var(--jp-merge-local-color1);
+/* border-top/bottom without taking up space */
+.jp-Notebook-merge .cm-merge-l-chunk-start::before,
+.jp-Notebook-merge .cm-merge-m-chunk-start-local::before,
+.jp-Notebook-merge .cm-merge-l-chunk-end::after,
+.jp-Notebook-merge .cm-merge-m-chunk-end-local::after {
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: var(--jp-merge-local-color1);
+  display: block;
+  position: absolute;
+  left: 0px;
 }
 
 .jp-Notebook-merge .cm-merge-l-connect {
@@ -161,24 +169,30 @@
   background-color: #ffb;
 }
 
-.jp-Notebook-merge .cm-merge-m-chunk-start-custom {
-  border-top: 1px solid #fe6;
-}
-
-.jp-Notebook-merge .cm-merge-m-chunk-end-custom {
-  border-bottom: 1px solid #fe6;
+.jp-Notebook-merge .cm-merge-m-chunk-start-custom::before,
+.jp-Notebook-merge .cm-merge-m-chunk-end-custom::after {
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: #fe6;
+  display: block;
+  position: absolute;
+  left: 0px;
 }
 
 .jp-Notebook-merge .cm-merge-l-chunk.cm-merge-r-chunk {
   background: var(--jp-merge-both-color2);
 }
 
-.jp-Notebook-merge .cm-merge-l-chunk-start.cm-merge-r-chunk-start {
-  border-top: 1px solid var(--jp-merge-both-color1);
-}
-
-.jp-Notebook-merge .cm-merge-l-chunk-end.cm-merge-r-chunk-end {
-  border-bottom: 1px solid var(--jp-merge-both-color1);
+.jp-Notebook-merge .cm-merge-l-chunk-start.cm-merge-r-chunk-start::before,
+.jp-Notebook-merge .cm-merge-l-chunk-end.cm-merge-r-chunk-end::after {
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: var(--jp-merge-both-color1);
+  display: block;
+  position: absolute;
+  left: 0px;
 }
 
 .jp-Notebook-merge


Test patch:
diff --git a/ui-tests/tests/nbdime-diff-test1.spec.ts-snapshots/diff-test1-take-a-snapshot-at-opening-1-linux.png b/ui-tests/tests/nbdime-diff-test1.spec.ts-snapshots/diff-test1-take-a-snapshot-at-opening-1-linux.png
index 348ea952..7ea294f0 100644
Binary files a/ui-tests/tests/nbdime-diff-test1.spec.ts-snapshots/diff-test1-take-a-snapshot-at-opening-1-linux.png and b/ui-tests/tests/nbdime-diff-test1.spec.ts-snapshots/diff-test1-take-a-snapshot-at-opening-1-linux.png differ
diff --git a/ui-tests/tests/nbdime-diff-test1.spec.ts-snapshots/diff-test1-take-a-snapshot-at-opening-1-win32.png b/ui-tests/tests/nbdime-diff-test1.spec.ts-snapshots/diff-test1-take-a-snapshot-at-opening-1-win32.png
index 1f81a3a1..5aea0a78 100644
Binary files a/ui-tests/tests/nbdime-diff-test1.spec.ts-snapshots/diff-test1-take-a-snapshot-at-opening-1-win32.png and b/ui-tests/tests/nbdime-diff-test1.spec.ts-snapshots/diff-test1-take-a-snapshot-at-opening-1-win32.png differ
diff --git a/ui-tests/tests/nbdime-diff-test2.spec.ts-snapshots/diff-test2-take-a-snapshot-at-opening-1-linux.png b/ui-tests/tests/nbdime-diff-test2.spec.ts-snapshots/diff-test2-take-a-snapshot-at-opening-1-linux.png
index 6474c924..ad187f9f 100644
Binary files a/ui-tests/tests/nbdime-diff-test2.spec.ts-snapshots/diff-test2-take-a-snapshot-at-opening-1-linux.png and b/ui-tests/tests/nbdime-diff-test2.spec.ts-snapshots/diff-test2-take-a-snapshot-at-opening-1-linux.png differ
diff --git a/ui-tests/tests/nbdime-diff-test2.spec.ts-snapshots/diff-test2-take-a-snapshot-at-opening-1-win32.png b/ui-tests/tests/nbdime-diff-test2.spec.ts-snapshots/diff-test2-take-a-snapshot-at-opening-1-win32.png
index cbf2c8c8..ba492803 100644
Binary files a/ui-tests/tests/nbdime-diff-test2.spec.ts-snapshots/diff-test2-take-a-snapshot-at-opening-1-win32.png and b/ui-tests/tests/nbdime-diff-test2.spec.ts-snapshots/diff-test2-take-a-snapshot-at-opening-1-win32.png differ
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 c6a3f72e..282f9c5b 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 60087911..fab0d4f6 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/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 4d4288e9..13c1dfa3 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 9a2b5d4c..983e104b 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 38b371b8..520d7c54 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 05db3ea1..dd40b435 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 e30c8df1..43e2c7b7 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 a8778d6c..a5460e4d 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 0896a9ec..5f89dc0d 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 4be31e30..3cedbf51 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 b4d9a582..74cbb12e 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 df43919b..c2804767 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 ab0790cb..efe21835 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 2fe4eb69..84a362a8 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 ab0790cb..efe21835 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 2fe4eb69..84a362a8 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 ab0790cb..efe21835 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 2fe4eb69..84a362a8 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