blob: fix gutters style conflicts

client/web/src/repo/blob/CodeMirrorBlob.tsx

@@ -151,8 +151,12 @@ const staticExtensions: Extension = [
             backgroundColor: 'var(--code-bg)',
             borderRight: 'initial',
         },
+        '.cm-content:focus-visible': {
+            outline: 'none',
+            boxShadow: 'none',
+        },
         '.cm-line': {
-            paddingLeft: '1rem',
+            paddingLeft: '0',
         },
         '.selected-line': {
             backgroundColor: 'var(--code-selection-bg)',
@@ -278,6 +282,7 @@ export const Blob: React.FunctionComponent<BlobProps> = props => {
                 navigateToLineOnAnyClick: navigateToLineOnAnyClick ?? false,
                 enableSelectionDrivenCodeNavigation,
             }),
+            codeFoldingExtension(),
             enableSelectionDrivenCodeNavigation ? tokenSelectionExtension() : [],
             enableLinkDrivenCodeNavigation
                 ? tokensAsLinks({ navigate: navigateRef.current, blobInfo, preloadGoToDefinition })
@@ -304,7 +309,6 @@ export const Blob: React.FunctionComponent<BlobProps> = props => {
                 overrideBrowserFindInPageShortcut: useFileSearch,
                 onOverrideBrowserFindInPageToggle: setUseFileSearch,
             }),
-            codeFoldingExtension(),
         ],
         // A couple of values are not dependencies (blameDecorations, blobProps,
         // hasPin, position and settings) because those are updated in effects

client/web/src/repo/blob/LegacyBlob.module.scss

@@ -107,6 +107,6 @@
     background-color: var(--body-bg);
 }
 
-:global(.cm-editor:not(:focus-within) .focus-visible) {
+:global(.cm-editor:not(:focus-within) :focus-visible) {
     box-shadow: none;
 }

client/web/src/repo/blob/codemirror/blame-decorations.tsx

@@ -220,9 +220,7 @@ const showGitBlameDecorations = Facet.define<BlameDecorationsFacetProps, BlameDe
                 // Move the start of the line to after the blame decoration.
                 // This is necessary because the start of the line is used for
                 // aligning tab characters.
-                //
-                // 1rem is the default padding-left so we have to add it here
-                paddingLeft: 'calc(var(--blame-decoration-width) + 1rem) !important',
+                paddingLeft: 'var(--blame-decoration-width) !important',
             },
             '.blame-decoration': {
                 // Remove the blame decoration from the content flow so that

client/web/src/repo/blob/codemirror/linenumbers.ts

@@ -21,9 +21,12 @@ import {
     ViewPlugin,
     ViewUpdate,
 } from '@codemirror/view'
+import classNames from 'classnames'
 
 import { isValidLineRange, MOUSE_MAIN_BUTTON, preciseOffsetAtCoords } from './utils'
 
+import { blobPropsFacet } from './index'
+
 /**
  * Represents the currently selected line range. null means no lines are
  * selected. Line numbers are 1-based.
@@ -32,6 +35,7 @@ import { isValidLineRange, MOUSE_MAIN_BUTTON, preciseOffsetAtCoords } from './ut
 export type SelectedLineRange = { line: number; character?: number; endLine?: number } | null
 
 const selectedLineDecoration = Decoration.line({
+    class: 'selected-line',
     attributes: {
         tabIndex: '-1',
         'data-line-focusable': '',
@@ -115,7 +119,7 @@ export const selectedLines = StateField.define<SelectedLineRange>({
 
                 return RectangleMarker.forRange(
                     view,
-                    'selected-line',
+                    classNames('selected-line', { ['blame-visible']: view.state.facet(blobPropsFacet).isBlameVisible }),
                     EditorSelection.range(startLine.from, Math.min(endLine.to + 1, view.state.doc.length))
                 )
             },
@@ -132,13 +136,28 @@ export const selectedLines = StateField.define<SelectedLineRange>({
             class: 'selected-lines-layer',
         }),
         EditorView.theme({
+            /**
+             * [RectangleMarker.forRange](https://sourcegraph.com/github.com/codemirror/view@a0a0b9ef5a4deaf58842422ac080030042d83065/-/blob/src/layer.ts?L60-75)
+             * returns absolutely positioned markers. Markers top position has extra 1px (6px in case blame decorations
+             * are visible) more in its `top` value breaking alignment wih the line.
+             * We compensate this spacing by setting negative margin-top.
+             */
             '.selected-lines-layer .selected-line': {
-                /**
-                 * [RectangleMarker.forRange](https://sourcegraph.com/github.com/codemirror/view@a0a0b9ef5a4deaf58842422ac080030042d83065/-/blob/src/layer.ts?L60-75)
-                 * returns absolutely positioned markers. Markers top position has extra 1px more in its `top` value breaking alignment wih the line.
-                 * We compensate this spacing by setting negative margin-top.
-                 */
                 marginTop: '-1px',
+
+                // Ensure selection marker height matches line height.
+                minHeight: '1rem',
+            },
+            '.selected-lines-layer .selected-line.blame-visible': {
+                marginTop: '-6px',
+
+                // Ensure selection marker height matches the increased line height.
+                minHeight: 'calc(1.5rem + 1px)',
+            },
+
+            // Selected line background is set by adding 'selected-line' class to the layer markers.
+            '.cm-line.selected-line': {
+                background: 'transparent',
             },
 
             /**
@@ -148,9 +167,6 @@ export const selectedLines = StateField.define<SelectedLineRange>({
              * highlight (background color) between the selected line gutters (decorated with {@link selectedLineGutterMarker}) and layer.
              * To remove this gap we move padding from `.cm-line` to the last gutter.
              */
-            '.cm-line': {
-                paddingLeft: '0 !important',
-            },
             '.cm-gutter:last-child .cm-gutterElement': {
                 paddingRight: '1rem',
             },

client/web/src/repo/blob/codemirror/token-selection/keybindings.ts

@@ -277,13 +277,6 @@ function textSelectionExtension(): Extension {
             },
             '.cm-selectionLayer .cm-selectionBackground': {
                 background: 'var(--code-selection-bg-2)',
-
-                /**
-                 * [RectangleMarker.forRange](https://sourcegraph.com/github.com/codemirror/view@a0a0b9ef5a4deaf58842422ac080030042d83065/-/blob/src/layer.ts?L60-75)
-                 * returns absolutely positioned markers. Markers top position has extra 1px more in its `top` value breaking alignment wih the line.
-                 * We compensate this spacing by setting negative margin-top.
-                 */
-                marginTop: '-1px',
             },
         }),
     ]