[diffs] CodeView: Ctrl+F

packages/diffs/src/components/File.ts

@@ -37,6 +37,7 @@ import type {
   PrePropertiesConfig,
   RenderFileMetadata,
   RenderRange,
+  SearchLineDecoration,
   SelectedLineRange,
   ThemeTypes,
 } from '../types';
@@ -76,6 +77,7 @@ export interface FileRenderProps<LAnnotation> {
   preventEmit?: boolean;
   lineAnnotations?: LineAnnotation<LAnnotation>[];
   renderRange?: RenderRange;
+  searchDecorations?: readonly SearchLineDecoration[];
 }
 
 export interface FileHydrateProps<LAnnotation> extends Omit<
@@ -612,6 +614,7 @@ export class File<
     deferManagers = false,
     lineAnnotations,
     renderRange,
+    searchDecorations,
   }: FileRenderProps<LAnnotation>): boolean {
     // postpone background tokenizing to next frame for avoiding UI freeze
     // during render
@@ -651,6 +654,7 @@ export class File<
       this.setLineAnnotations(lineAnnotations);
     }
     this.fileRenderer.setLineAnnotations(this.lineAnnotations);
+    this.fileRenderer.setSearchDecorations(searchDecorations);
 
     const { disableErrorHandling = false, disableFileHeader = false } =
       this.options;

packages/diffs/src/components/FileDiff.ts

@@ -39,6 +39,7 @@ import type {
   BaseDiffOptions,
   CustomPreProperties,
   DiffLineAnnotation,
+  DiffSearchLineDecoration,
   DiffsEditableComponent,
   DiffsEditor,
   DiffsTextDocument,
@@ -137,6 +138,7 @@ export interface FileDiffRenderBaseProps<LAnnotation> {
   containerWrapper?: HTMLElement;
   lineAnnotations?: DiffLineAnnotation<LAnnotation>[];
   renderRange?: RenderRange;
+  searchDecorations?: readonly DiffSearchLineDecoration[];
 }
 
 export type FileDiffRenderProps<LAnnotation> =
@@ -980,6 +982,7 @@ export class FileDiff<
     fileContainer,
     containerWrapper,
     renderRange,
+    searchDecorations,
     ...fileInputProps
   }: FileDiffRenderProps<LAnnotation>): boolean {
     const fileInput = getDiffFileInput(fileInputProps, 'FileDiff.render');
@@ -1091,6 +1094,7 @@ export class FileDiff<
     this.syncInteractionOptions();
 
     this.hunksRenderer.setLineAnnotations(this.lineAnnotations);
+    this.hunksRenderer.setSearchDecorations(searchDecorations);
 
     const { disableErrorHandling = false, disableFileHeader = false } =
       this.options;

packages/diffs/src/components/VirtualizedFileDiff.ts

@@ -7,6 +7,7 @@ import type {
   FileContents,
   FileDiffMetadata,
   Hunk,
+  HunkExpansionRegion,
   HunkSeparators,
   NumericScrollLineAnchor,
   PendingCodeViewLayoutReset,
@@ -991,6 +992,10 @@ export class VirtualizedFileDiff<
     return !this.isAdvancedMode() && super.shouldSelfHealEditSession();
   }
 
+  public getExpandedHunksForSearch(): Map<number, HunkExpansionRegion> {
+    return this.hunksRenderer.getExpandedHunksMap();
+  }
+
   public setVisibility(visible: boolean): void {
     if (this.isAdvancedMode() || this.fileContainer == null) {
       return;

packages/diffs/src/editor/editor.css

@@ -115,10 +115,14 @@
 }
 [data-match-range] {
   z-index: -10;
+  border: 0;
+  border-radius: 3px;
   background-color: var(
     --diffs-editor-match-bg,
     var(--diffs-editor-selection-bg)
   );
+  outline: none;
+  box-decoration-break: clone;
 }
 [data-match-range]:not([data-focus]) {
   background-color: var(
@@ -305,219 +309,3 @@
   padding: 4px;
   pointer-events: auto;
 }
-
-/* Search Panel Widget */
-[data-search-panel] {
-  position: sticky;
-  top: 16px;
-  right: 16px;
-  z-index: 100;
-  display: flex;
-  justify-content: right;
-  flex-direction: column;
-  width: 100%;
-  /* Zero height ensures panel appears stickied immediately */
-  height: 0;
-  container: search-panel / inline-size;
-
-  [data-editor-widget] {
-    position: relative;
-    z-index: 100;
-    display: flex;
-    flex-shrink: 0;
-    align-items: stretch;
-    gap: 8px;
-    padding: 4px;
-    max-width: 100%;
-    min-width: 260px;
-    margin-inline: auto 16px;
-  }
-
-  svg {
-    display: block;
-    fill: currentColor;
-    width: 12px;
-    height: 12px;
-  }
-}
-
-[data-search-grid] {
-  display: grid;
-  grid-template-columns: auto auto auto;
-  grid-template-areas:
-    'find    matches nav'
-    'replace actions .';
-  align-items: center;
-  gap: 4px 6px;
-  width: 100%;
-}
-[data-input-box][data-find] {
-  grid-area: find;
-}
-[data-search-nav] {
-  grid-area: nav;
-}
-[data-input-box][data-replace] {
-  grid-area: replace;
-}
-[data-replace-actions] {
-  grid-area: actions;
-}
-[data-search-grid][data-mode='find'] {
-  grid-template-areas: 'find matches nav';
-}
-[data-search-grid][data-mode='find'] [data-replace-cell] {
-  display: none;
-}
-
-@container search-panel (width < 400px) {
-  [data-search-panel] [data-editor-widget] {
-    padding: 10px;
-  }
-  [data-search-grid][data-mode='replace'] {
-    grid-template-columns: auto 1fr auto;
-    grid-template-areas:
-      'find    find    find'
-      'replace replace replace'
-      'nav     matches actions';
-  }
-  [data-search-grid][data-mode='find'] {
-    grid-template-columns: auto 1fr auto;
-    grid-template-areas:
-      'find find    find'
-      'nav  matches matches';
-  }
-  [data-replace-actions] {
-    justify-self: end;
-  }
-  [data-search-grid] [data-input-box] {
-    width: auto;
-  }
-}
-
-[data-input-box] {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 200px;
-
-  input {
-    flex-grow: 1;
-    width: 100%;
-    min-width: 0;
-    font-size: 13px;
-    line-height: 24px;
-    padding-inline: 6px;
-    color: var(--diffs-fg);
-    background-color: var(--diffs-bg);
-    border: 1px solid color-mix(in lab, var(--diffs-fg) 12%, var(--diffs-bg));
-    border-radius: 6px;
-    outline: none;
-
-    &::selection {
-      background-color: color-mix(in lab, var(--diffs-fg) 8%, var(--diffs-bg));
-    }
-
-    &:focus-visible {
-      outline: 1px solid var(--diffs-modified-base);
-    }
-  }
-
-  &[data-find] input {
-    /* Space for overlaid search icon toggles */
-    padding-inline-end: 72px;
-  }
-
-  [data-search-icon] {
-    --diffs-search-icon-size: 20px;
-  }
-}
-
-[data-search-toggles] {
-  position: absolute;
-  top: 50%;
-  right: 4px;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  gap: 1px;
-}
-
-[data-matches] {
-  grid-area: matches;
-  flex-shrink: 0;
-  min-width: 50px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 20px;
-  white-space: nowrap;
-  color: color-mix(in lab, var(--diffs-fg) 50%, var(--diffs-bg));
-
-  &[data-no-matches] {
-    color: color-mix(in lab, var(--diffs-fg) 35%, var(--diffs-bg));
-  }
-}
-
-[data-replace-actions],
-[data-search-nav] {
-  display: flex;
-  align-items: center;
-}
-
-/* Every clickable control is a real <button> tagged with data-search-icon;
-   strip the UA chrome here so this single rule is the source of their
-   appearance. */
-[data-search-icon] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  appearance: none;
-  flex-shrink: 0;
-  width: var(--diffs-search-icon-size, 24px);
-  height: var(--diffs-search-icon-size, 24px);
-  margin: 0;
-  padding: 0;
-  color: color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg));
-  border: 0;
-  border-radius: var(--diffs-search-icon-radius, 4px);
-  background: none;
-  cursor: pointer;
-  transition:
-    background-color 0.1s ease-in-out,
-    color 0.1s ease-in-out;
-
-  &:disabled {
-    opacity: 0.25;
-    cursor: default;
-  }
-  &:not(:disabled):hover {
-    color: var(--diffs-fg);
-  }
-  &:focus-visible {
-    outline: 1px solid var(--diffs-modified-base);
-  }
-  &[aria-pressed='true'] {
-    color: var(--diffs-modified-base);
-  }
-}
-
-[data-search-close] {
-  --diffs-search-icon-size: 20px;
-  --diffs-search-icon-radius: 50%;
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: translate(50%, -50%);
-  color: var(--diffs-widget-bg);
-  background-color: color-mix(
-    in lab,
-    var(--diffs-widget-fg) 50%,
-    var(--diffs-bg)
-  );
-
-  &:not(:disabled):hover {
-    opacity: 1;
-    color: var(--diffs-widget-bg);
-    background-color: var(--diffs-widget-fg);
-  }
-}