Feature: CodeView should support per-item header heights

[spalger]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Allow CodeView items to specify or resolve a diffHeaderHeight. CodeView should use it for item height estimation, sticky-header positioning, and scroll calculations.

Motivation and context

I'd like to render file-level annotations, or alternate content for collapsed files, which would look better as a part of the header rather than an annotation that is indented for the line-number column. This would require that we can specify a per-item header size though as right not it causes jumps in the scrolling when headers are not a consistent size.

[spalger]

Realized today that I would like to use this for custom file views in CodeView too, for things like media file previews. Maybe just a full-width annotation though? In the case of the preview the goal is to replace the code itself with an alternate view but it needs to participate in the virtualization properly.

[amadeus]

I'm not sure I want to support dynamic heights for the header itself, because it can get tricky with regards to sticky behavior and adds some overall complexity that I'm not sure is worth the squeeze.

One workaround you could use right now is some custom CSS for file level annotations, like so:

  const fullWidthFileAnnotationCSS = /* css */ `
    [data-file] [data-gutter] {
      z-index: 1;
    }

    [data-file] [data-line-annotation='-1,-1'] [data-annotation-content] {
      width: 100cqi;
      left: 0;
      margin-inline-start: calc(
        var(--diffs-column-number-width, calc(100cqi - 100%)) * -1
      );
    }
  `;

This would allow them to stretch into the number column and the comments would flow under the sticky header

[amadeus]

for things like media file previews

This is something we definitely want to natively support, but it's just not quite at the top of our priority list at the moment