svelte: Remove full page scrolling of repo pages (#62024)

This commit removes the full page scrolling behavior for repo root,
directory and file pages. The implementation had several issues.

In the new implementation the scroll container is CodeMirror itself. It
provides the following behavior:

- Show the top of the file when navigating to a new file.
- Scroll the selected line into view when opening a URL containing a
  position.
- Do not scroll when selecting a line (currently broken).
- Restore previous scroll position when navigating backward or forward
  in the browser history.
- Toggling the blame view maintains the current line view (well, almost but 
  that's as best as we can do at the moment).

Additional changes in this commit:

- Removed logic to enable/disable full page scrolling.
- Remove CSS for making elements `sticky`.
- Update "scroll selected line into view" logic to prevent scrolling
  when restoring the previous scroll position.
- Update `codemirror/view` to include a recent fix for a scroll related
  bug.

Author: fkling

client/web-sveltekit/src/lib/CodeMirrorBlob.svelte

@@ -28,8 +28,6 @@
         languages: string[]
     }
 
-    const extensionsCompartment = new Compartment()
-
     const defaultTheme = EditorView.theme({
         '&': {
             height: '100%',
@@ -42,6 +40,7 @@
             lineHeight: '1rem',
             fontFamily: 'var(--code-font-family)',
             fontSize: 'var(--code-font-size)',
+            overflow: 'auto',
         },
         '.cm-content': {
             padding: 0,
@@ -106,20 +105,12 @@
         defaultTheme,
         linkify,
     ]
-
-    function configureSyntaxHighlighting(content: string, lsif: string): Extension {
-        return lsif ? syntaxHighlight.of({ content, lsif }) : []
-    }
-
-    function configureMiscSettings({ wrapLines }: { wrapLines: boolean }): Extension {
-        return [wrapLines ? EditorView.lineWrapping : []]
-    }
 </script>
 
 <script lang="ts">
     import '$lib/highlight.scss'
 
-    import { Compartment, EditorState, type Extension } from '@codemirror/state'
+    import { EditorState, type Extension } from '@codemirror/state'
     import { EditorView } from '@codemirror/view'
     import { createEventDispatcher, onMount } from 'svelte'
 
@@ -136,14 +127,22 @@
         linkify,
         createCodeIntelExtension,
         syncSelection,
-        temporaryTooltip,
         showBlame as showBlameColumn,
         blameData as blameDataFacet,
         type BlameHunkData,
+        lockFirstVisibleLine,
+        temporaryTooltip,
     } from '$lib/web'
 
     import BlameDecoration from './blame/BlameDecoration.svelte'
     import { type Range, staticHighlights } from './codemirror/static-highlights'
+    import {
+        createCompartments,
+        restoreScrollSnapshot,
+        type ExtensionType,
+        type ScrollSnapshot,
+        getScrollSnapshot as getScrollSnapshot_internal,
+    } from './codemirror/utils'
     import { goToDefinition, openImplementations, openReferences } from './repo/blob'
 
     export let blobInfo: BlobInfo
@@ -152,21 +151,34 @@
     export let selectedLines: LineOrPositionOrRange | null = null
     export let codeIntelAPI: CodeIntelAPI
     export let staticHighlightRanges: Range[] = []
+    /**
+     * The initial scroll position when the editor is first mounted.
+     * Changing the value afterwards has no effect.
+     */
+    export let initialScrollPosition: ScrollSnapshot | null = null
 
     export let showBlame: boolean = false
     export let blameData: BlameHunkData | undefined = undefined
 
+    export function getScrollSnapshot(): ScrollSnapshot | null {
+        return view ? getScrollSnapshot_internal(view) : null
+    }
+
     const dispatch = createEventDispatcher<{ selectline: SelectedLineRange }>()
+    const extensionsCompartment = createCompartments({
+        selectableLineNumbers: null,
+        syntaxHighlighting: null,
+        lineWrapping: null,
+        temporaryTooltip,
+        codeIntelExtension: null,
+        staticExtensions,
+        staticHighlightExtension: null,
+        blameDataExtension: null,
+        blameColumnExtension: null,
+    })
 
-    let editor: EditorView
     let container: HTMLDivElement | null = null
-
-    const lineNumbers = selectableLineNumbers({
-        onSelection(range) {
-            dispatch('selectline', range)
-        },
-        initialSelection: selectedLines?.line === undefined ? null : selectedLines,
-    })
+    let view: EditorView | undefined = undefined
 
     $: documentInfo = {
         repoName: blobInfo.repoName,
@@ -198,8 +210,8 @@
             }
         },
     })
-    $: settings = configureMiscSettings({ wrapLines })
-    $: sh = configureSyntaxHighlighting(blobInfo.content, highlights)
+    $: lineWrapping = wrapLines ? EditorView.lineWrapping : []
+    $: syntaxHighlighting = highlights ? syntaxHighlight.of({ content: blobInfo.content, lsif: highlights }) : []
     $: staticHighlightExtension = staticHighlights(staticHighlightRanges)
 
     $: blameColumnExtension = showBlame
@@ -216,51 +228,96 @@
         : []
     $: blameDataExtension = blameDataFacet(blameData)
 
-    $: extensions = [
-        sh,
-        settings,
-        lineNumbers,
-        temporaryTooltip,
-        codeIntelExtension,
-        staticExtensions,
-        staticHighlightExtension,
-        blameColumnExtension,
-        blameDataExtension,
-    ]
+    // Reinitialize the editor when its content changes. Update only the extensions when they change.
+    $: update(view => {
+        // blameColumnExtension is omitted here. It's updated separately below because we need to
+        // apply additional effects when it changes (but only when it changes).
+        const extensions: Partial<ExtensionType<typeof extensionsCompartment>> = {
+            codeIntelExtension,
+            lineWrapping,
+            syntaxHighlighting,
+            staticHighlightExtension,
+            blameDataExtension,
+        }
+        if (view.state.sliceDoc() !== blobInfo.content) {
+            view.setState(createEditorState(blobInfo, extensions))
+        } else {
+            extensionsCompartment.update(view, extensions)
+        }
+    })
 
-    function update(blobInfo: BlobInfo, extensions: Extension, range: LineOrPositionOrRange | null) {
-        if (editor) {
-            // TODO(fkling): Find a way to combine this into a single transaction.
-            if (editor.state.sliceDoc() !== blobInfo.content) {
-                editor.setState(
-                    EditorState.create({ doc: blobInfo.content, extensions: extensionsCompartment.of(extensions) })
-                )
-            } else {
-                editor.dispatch({ effects: [extensionsCompartment.reconfigure(extensions)] })
-            }
-            editor.dispatch({
-                effects: setSelectedLines.of(range?.line && isValidLineRange(range, editor.state.doc) ? range : null),
-            })
+    // Show/hide the blame column and ensure that the style changes do not change the scroll position
+    $: update(view => {
+        extensionsCompartment.update(view, { blameColumnExtension }, ...lockFirstVisibleLine(view))
+    })
 
-            if (range) {
-                syncSelection(editor, range)
-            }
+    // Update the selected lines. This will scroll the selected lines into view. Also set the editor's
+    // selection (essentially the cursor position) to the selected lines. This is necessary in case the
+    // selected range references a symbol.
+    $: update(view => {
+        view.dispatch({
+            effects: setSelectedLines.of(
+                selectedLines?.line && isValidLineRange(selectedLines, view.state.doc) ? selectedLines : null
+            ),
+        })
+        if (selectedLines) {
+            syncSelection(view, selectedLines)
         }
-    }
-
-    $: update(blobInfo, extensions, selectedLines)
+    })
 
     onMount(() => {
         if (container) {
-            editor = new EditorView({
-                state: EditorState.create({ doc: blobInfo.content, extensions: extensionsCompartment.of(extensions) }),
+            view = new EditorView({
+                // On first render initialize all extensions
+                state: createEditorState(blobInfo, {
+                    codeIntelExtension,
+                    lineWrapping,
+                    syntaxHighlighting,
+                    staticHighlightExtension,
+                    blameDataExtension,
+                    blameColumnExtension,
+                }),
                 parent: container,
             })
             if (selectedLines) {
-                syncSelection(editor, selectedLines)
+                syncSelection(view, selectedLines)
             }
+            if (initialScrollPosition) {
+                restoreScrollSnapshot(view, initialScrollPosition)
+            }
+        }
+        return () => {
+            view?.destroy()
         }
     })
+
+    // Helper function to update the editor state whithout depending on the view variable
+    // (those updates should only run on subsequent updates)
+    function update(updater: (view: EditorView) => void) {
+        if (view) {
+            updater(view)
+        }
+    }
+
+    function createEditorState(blobInfo: BlobInfo, extensions: Partial<ExtensionType<typeof extensionsCompartment>>) {
+        return EditorState.create({
+            doc: blobInfo.content,
+            extensions: extensionsCompartment.init({
+                selectableLineNumbers: selectableLineNumbers({
+                    onSelection(range) {
+                        dispatch('selectline', range)
+                    },
+                    initialSelection: selectedLines?.line === undefined ? null : selectedLines,
+                    // We don't want to scroll the selected line into view when a scroll position is explicitly set.
+                    skipInitialScrollIntoView: initialScrollPosition !== null,
+                }),
+                ...extensions,
+            }),
+            selection: {
+                anchor: 0,
+            },
+        })
+    }
 </script>
 
 {#if browser}
@@ -273,9 +330,10 @@
 
 <style lang="scss">
     .root {
-        display: contents;
         --blame-decoration-width: 400px;
         --blame-recency-width: 4px;
+
+        height: 100%;
     }
     pre {
         margin: 0;