fix(editor): keep selections whole over line backgrounds and indent guides (#1568)

* fix(editor): keep selections whole over line backgrounds and indent guides

Multi-line selections could show a 1px seam between their stacked
rectangles, indent guides showed as short dashes inside a selection,
and a breakpoint or execution line hid the selection past its text.

- Snap selection rectangle edges to device pixels so stacked pieces
  share one edge.
- Paint caret-row, breakpoint and execution line backgrounds on a
  pseudo-element below the selection layer.
- Draw indent guides on a pseudo-element above the text.

* test(e2e): check the visible selection layer in the theme flow

src/features/debugger/editor/breakpointGutter.ts

@@ -84,7 +84,7 @@ class BreakpointMarker extends GutterMarker {
   }
 }
 
-const bpLine = Decoration.line({ class: styles.bpLine });
+const bpLine = Decoration.line({ class: `${styles.bpLine} cm-openidea-lineBg` });
 const DISABLED_LOOKS = new Set<BreakpointLook>(["disabled", "muted", "methodDisabled", "fieldDisabled"]);
 
 const setMarkers = StateEffect.define<RangeSet<BreakpointMarker>>();

src/features/debugger/editor/editor.module.css

@@ -126,11 +126,11 @@
 
 /* Beat the caret row (`.cm-activeLine`), as IDEA does; the suspended line wins over a breakpoint. */
 :global(.cm-editor) :global(.cm-line).bpLine {
-  background: var(--bg-breakpoint-line);
+  --openidea-line-bg: var(--bg-breakpoint-line);
 }
 
 :global(.cm-editor) :global(.cm-line).execLine {
-  background: var(--bg-debug-line);
+  --openidea-line-bg: var(--bg-debug-line);
 }
 
 .inlineValue {

src/features/debugger/editor/execution.ts

@@ -61,7 +61,7 @@ export function inlineValuesFor(text: string, values: Record<string, string>): s
 function lineDecorations(state: EditorState, exec: Exec | null): DecorationSet {
   if (!exec || exec.line >= state.doc.lines) return Decoration.none;
   const line = state.doc.line(exec.line + 1);
-  return Decoration.set([Decoration.line({ class: styles.execLine }).range(line.from)]);
+  return Decoration.set([Decoration.line({ class: `${styles.execLine} cm-openidea-lineBg` }).range(line.from)]);
 }
 
 export function executionPoint(ctx: EditorDocContext): Extension {

src/features/notebook/CellEditor.tsx

@@ -13,6 +13,7 @@ import { bracketMatching, indentOnInput, syntaxHighlighting } from "@codemirror/
 import { openideaTheme } from "@/editor/core/cm/theme";
 import { openideaHighlightStyle } from "@/editor/core/cm/highlight";
 import { selectionMarks } from "@/editor/core/cm/selectionMarks";
+import { seamlessSelection } from "@/editor/core/cm/selectionLayer";
 import { findLanguageDescription, loadSupport } from "@/editor/core/cm/languages";
 import { tx } from "@/platform/i18n";
 import type { NotebookSession } from "./session";
@@ -45,6 +46,7 @@ export function CellEditor({
       lineNumbers(),
       drawSelection(),
       selectionMarks,
+      seamlessSelection(),
       highlightActiveLine(),
       highlightSpecialChars(),
       bracketMatching(),