chrome-devtools-frontend 1.0.1003647 → 1.0.1004895

package/front_end/panels/network/components/RequestHeadersView.css

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2022 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.header {
+  background-color: var(--color-background-elevation-1);
+  border-bottom: var(--legacy-divider-border);
+  border-top: var(--legacy-divider-border);
+  line-height: 25px;
+  padding: 0 5px;
+}
+
+.header::marker {
+  color: rgb(110 110 110); /* stylelint-disable-line plugin/use_theme_colors */
+  /* See: crbug.com/1152736 for color variable migration. */
+  font-size: 11px;
+  line-height: 1;
+}
+
+.header:focus {
+  background-color: var(--legacy-focus-bg-color);
+}
+
+.row {
+  display: flex;
+  line-height: 20px;
+  padding-left: 25px;
+}
+
+.row:first-of-type {
+  margin-top: 2px;
+}
+
+.row:last-child {
+  margin-bottom: 10px;
+}
+
+.header-name {
+  color: var(--color-primary);
+  font-weight: bold;
+  width: 160px;
+  flex-shrink: 0;
+}
+
+.header-value {
+  word-break: break-all;
+  user-select: text;
+}
+
+.green-circle::before,
+.red-circle::before,
+.yellow-circle::before {
+  content: "";
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  vertical-align: text-top;
+  margin-right: 2px;
+}
+
+.green-circle::before {
+  background-color: var(--color-accent-green);
+}
+
+.red-circle::before {
+  background-color: var(--color-accent-red);
+}
+
+.yellow-circle::before {
+  background-color: var(--issue-color-yellow);
+}
+
+.status-with-comment {
+  color: var(--color-text-secondary);
+}

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -0,0 +1,262 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../../core/common/common.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import {assertNotNullOrUndefined} from '../../../core/platform/platform.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import requestHeadersViewStyles from './RequestHeadersView.css.js';
+
+const {render, html} = LitHtml;
+
+const UIStrings = {
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  fromMemoryCache: '(from memory cache)',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  fromServiceWorker: '(from `service worker`)',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  fromSignedexchange: '(from signed-exchange)',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  fromPrefetchCache: '(from prefetch cache)',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  fromDiskCache: '(from disk cache)',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  fromWebBundle: '(from Web Bundle)',
+  /**
+  *@description Section header for a list of the main aspects of a http request
+  */
+  general: 'General',
+  /**
+  *@description The URL of a request
+  */
+  requestUrl: 'Request URL',
+  /**
+  *@description The HTTP method of a request
+  */
+  requestMethod: 'Request Method',
+  /**
+  *@description HTTP response code
+  */
+  statusCode: 'Status Code',
+  /**
+  *@description Text in Network Log View Columns of the Network panel
+  */
+  remoteAddress: 'Remote Address',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  referrerPolicy: 'Referrer Policy',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestHeadersView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class RequestHeadersView extends UI.Widget.VBox {
+  readonly #headersView = new RequestHeadersComponent();
+  readonly #request: SDK.NetworkRequest.NetworkRequest;
+
+  constructor(request: SDK.NetworkRequest.NetworkRequest) {
+    super();
+    this.#request = request;
+    this.contentElement.appendChild(this.#headersView);
+  }
+
+  wasShown(): void {
+    this.#request.addEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged, this.#refreshHeadersView, this);
+    this.#request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.#refreshHeadersView, this);
+    this.#refreshHeadersView();
+  }
+
+  willHide(): void {
+    this.#request.removeEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged, this.#refreshHeadersView, this);
+    this.#request.removeEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.#refreshHeadersView, this);
+  }
+
+  #refreshHeadersView(): void {
+    this.#headersView.data = {
+      request: this.#request,
+    };
+  }
+}
+
+export interface RequestHeadersComponentData {
+  request: SDK.NetworkRequest.NetworkRequest;
+}
+
+export class RequestHeadersComponent extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-request-headers`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #request?: Readonly<SDK.NetworkRequest.NetworkRequest>;
+
+  set data(data: RequestHeadersComponentData) {
+    this.#request = data.request;
+    this.#render();
+  }
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles];
+  }
+
+  #render(): void {
+    assertNotNullOrUndefined(this.#request);
+
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    render(html`
+      ${this.#renderGeneralSection()}
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+
+  #renderGeneralSection(): LitHtml.TemplateResult {
+    assertNotNullOrUndefined(this.#request);
+
+    let coloredCircleClassName = 'red-circle';
+    if (this.#request.statusCode < 300 || this.#request.statusCode === 304) {
+      coloredCircleClassName = 'green-circle';
+    } else if (this.#request.statusCode < 400) {
+      coloredCircleClassName = 'yellow-circle';
+    }
+
+    let statusText = this.#request.statusCode + ' ' + this.#request.statusText;
+    let statusTextHasComment = false;
+    if (this.#request.cachedInMemory()) {
+      statusText += ' ' + i18nString(UIStrings.fromMemoryCache);
+      statusTextHasComment = true;
+    } else if (this.#request.fetchedViaServiceWorker) {
+      statusText += ' ' + i18nString(UIStrings.fromServiceWorker);
+      statusTextHasComment = true;
+    } else if (this.#request.redirectSourceSignedExchangeInfoHasNoErrors()) {
+      statusText += ' ' + i18nString(UIStrings.fromSignedexchange);
+      statusTextHasComment = true;
+    } else if (this.#request.webBundleInnerRequestInfo()) {
+      statusText += ' ' + i18nString(UIStrings.fromWebBundle);
+      statusTextHasComment = true;
+    } else if (this.#request.fromPrefetchCache()) {
+      statusText += ' ' + i18nString(UIStrings.fromPrefetchCache);
+      statusTextHasComment = true;
+    } else if (this.#request.cached()) {
+      statusText += ' ' + i18nString(UIStrings.fromDiskCache);
+      statusTextHasComment = true;
+    }
+
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    return html`
+      <${Category.litTagName} .data=${{name: 'general', title: i18nString(UIStrings.general)} as CategoryData}>
+        <div class="row">
+          <div class="header-name">${i18nString(UIStrings.requestUrl)}:</div>
+          <div class="header-value">${this.#request.url()}</div>
+        </div>
+        ${this.#request.statusCode? html`
+          <div class="row">
+            <div class="header-name">${i18nString(UIStrings.requestMethod)}:</div>
+            <div class="header-value">${this.#request.requestMethod}</div>
+          </div>
+          <div class="row">
+            <div class="header-name">${i18nString(UIStrings.statusCode)}:</div>
+            <div class="header-value ${coloredCircleClassName} ${statusTextHasComment ? 'status-with-comment' : ''}">${statusText}</div>
+          </div>
+        ` : ''}
+        ${this.#request.remoteAddress()? html`
+          <div class="row">
+            <div class="header-name">${i18nString(UIStrings.remoteAddress)}:</div>
+            <div class="header-value">${this.#request.remoteAddress()}</div>
+          </div>
+        ` : ''}
+        ${this.#request.referrerPolicy()? html`
+          <div class="row">
+            <div class="header-name">${i18nString(UIStrings.referrerPolicy)}:</div>
+            <div class="header-value">${this.#request.referrerPolicy()}</div>
+          </div>
+        ` : ''}
+      </${Category.litTagName}>
+    `;
+    // clang-format on
+  }
+}
+
+export interface CategoryData {
+  name: string;
+  title: Common.UIString.LocalizedString;
+}
+
+export class Category extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-request-headers-category`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #expandedSetting?: Common.Settings.Setting<boolean>;
+  #title: Common.UIString.LocalizedString = Common.UIString.LocalizedEmptyString;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles];
+  }
+
+  set data(data: CategoryData) {
+    this.#title = data.title;
+    this.#expandedSetting =
+        Common.Settings.Settings.instance().createSetting('request-info-' + data.name + '-category-expanded', true);
+    this.#render();
+  }
+
+  #render(): void {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    render(html`
+      <details ?open=${this.#expandedSetting ? this.#expandedSetting.get() : true} @toggle=${this.#onToggle}>
+        <summary class="header" @keydown=${this.#onSummaryKeyDown}>${this.#title}</summary>
+        <slot></slot>
+      </details>
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+
+  #onSummaryKeyDown(event: KeyboardEvent): void {
+    if (!event.target) {
+      return;
+    }
+    const summaryElement = event.target as HTMLElement;
+    const detailsElement = summaryElement.parentElement as HTMLDetailsElement;
+    if (!detailsElement) {
+      throw new Error('<details> element is not found for a <summary> element');
+    }
+    switch (event.key) {
+      case 'ArrowLeft':
+        detailsElement.open = false;
+        break;
+      case 'ArrowRight':
+        detailsElement.open = true;
+        break;
+    }
+  }
+
+  #onToggle(event: Event): void {
+    this.#expandedSetting?.set((event.target as HTMLDetailsElement).open);
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-request-headers', RequestHeadersComponent);
+ComponentHelpers.CustomElements.defineComponent('devtools-request-headers-category', Category);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-request-headers': RequestHeadersComponent;
+    'devtools-request-headers-category': Category;
+  }
+}

package/front_end/panels/network/components/components.ts

@@ -2,8 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as RequestHeadersView from './RequestHeadersView.js';
 import * as RequestTrustTokensView from './RequestTrustTokensView.js';
 
 export {
+  RequestHeadersView,
   RequestTrustTokensView,
 };

package/front_end/panels/network/forward/UIRequestLocation.ts

@@ -24,6 +24,7 @@ export enum UIRequestTabs {
   Cookies = 'cookies',
   EventSource = 'eventSource',
   Headers = 'headers',
+  HeadersComponent = 'headersComponent',
   Payload = 'payload',
   Initiator = 'initiator',
   Preview = 'preview',

package/front_end/panels/network/networkLogView.css

@@ -70,7 +70,7 @@
   flex: none;
 }
 
-.network-log-grid.data-grid table.data {
+.network-log-grid.data-grid tbody {
   background: transparent;
 }
 
@@ -397,8 +397,8 @@
   /* This is part of the large color block declared above, but should not be
    extracted out. */
   /* stylelint-disable no-descending-specificity */
-  .network-log-grid.data-grid table.data tr.revealed.selected,
-  .network-log-grid.data-grid:focus table.data tr.revealed.selected,
+  .network-log-grid.data-grid tbody tr.revealed.selected,
+  .network-log-grid.data-grid:focus tbody tr.revealed.selected,
   .network-log-grid.data-grid:focus tr.selected .network-dim-cell,
   .network-log-grid.data-grid tr.selected .network-dim-cell,
   .network-log-grid.data-grid:focus tr.selected .initiator-column .devtools-link,

package/front_end/panels/network/requestHeadersTree.css

@@ -59,6 +59,12 @@
   display: none;
 }
 
+.tree-outline li .headers-title-left {
+  min-width: 50%;
+  display: flex;
+  justify-content: space-between;
+}
+
 .tree-outline li .header-toggle {
   display: none;
 }

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -183,8 +183,7 @@ const UIStrings = {
   /**
   *@description Text in Heap Snapshot View of a profiler tool
   */
-  treatGlobalObjectsAsRoots:
-      'Treat global objects as roots (recommended, unchecking this exposes internal nodes and introduces excessive detail, but might help debugging cycles in retaining paths)',
+  exposeInternals: 'Expose internals (includes additional implementation-specific details)',
   /**
   *@description Text in Heap Snapshot View of a profiler tool
   * This option turns on inclusion of numerical values in the heap snapshot.
@@ -1182,7 +1181,7 @@ export class StatisticsPerspective extends Perspective {
 export class HeapSnapshotProfileType extends
     Common.ObjectWrapper.eventMixin<HeapSnapshotProfileTypeEventTypes, typeof ProfileType>(ProfileType)
         implements SDK.TargetManager.SDKModelObserver<SDK.HeapProfilerModel.HeapProfilerModel> {
-  readonly treatGlobalObjectsAsRoots: Common.Settings.Setting<boolean>;
+  readonly exposeInternals: Common.Settings.Setting<boolean>;
   readonly captureNumericValue: Common.Settings.Setting<boolean>;
   customContentInternal: HTMLElement|null;
   constructor(id?: string, title?: string) {
@@ -1196,8 +1195,7 @@ export class HeapSnapshotProfileType extends
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.HeapProfilerModel.HeapProfilerModel, SDK.HeapProfilerModel.Events.ReportHeapSnapshotProgress,
         this.reportHeapSnapshotProgress, this);
-    this.treatGlobalObjectsAsRoots =
-        Common.Settings.Settings.instance().createSetting('treatGlobalObjectsAsRoots', true);
+    this.exposeInternals = Common.Settings.Settings.instance().createSetting('exposeInternals', false);
     this.captureNumericValue = Common.Settings.Settings.instance().createSetting('captureNumericValue', false);
     this.customContentInternal = null;
   }
@@ -1241,13 +1239,13 @@ export class HeapSnapshotProfileType extends
 
   customContent(): Element|null {
     const optionsContainer = document.createElement('div');
-    const showOptionToNotTreatGlobalObjectsAsRoots =
-        Root.Runtime.experiments.isEnabled('showOptionToNotTreatGlobalObjectsAsRoots');
-    const omitParagraphElement = !showOptionToNotTreatGlobalObjectsAsRoots;
-    if (showOptionToNotTreatGlobalObjectsAsRoots) {
-      const treatGlobalObjectsAsRootsCheckbox = UI.SettingsUI.createSettingCheckbox(
-          i18nString(UIStrings.treatGlobalObjectsAsRoots), this.treatGlobalObjectsAsRoots, omitParagraphElement);
-      optionsContainer.appendChild(treatGlobalObjectsAsRootsCheckbox);
+    const showOptionToExposeInternalsInHeapSnapshot =
+        Root.Runtime.experiments.isEnabled('showOptionToExposeInternalsInHeapSnapshot');
+    const omitParagraphElement = !showOptionToExposeInternalsInHeapSnapshot;
+    if (showOptionToExposeInternalsInHeapSnapshot) {
+      const exposeInternalsInHeapSnapshotCheckbox = UI.SettingsUI.createSettingCheckbox(
+          i18nString(UIStrings.exposeInternals), this.exposeInternals, omitParagraphElement);
+      optionsContainer.appendChild(exposeInternalsInHeapSnapshotCheckbox);
     }
     const captureNumericValueCheckbox = UI.SettingsUI.createSettingCheckbox(
         UIStrings.captureNumericValue, this.captureNumericValue, omitParagraphElement);
@@ -1284,8 +1282,8 @@ export class HeapSnapshotProfileType extends
 
     await heapProfilerModel.takeHeapSnapshot({
       reportProgress: true,
-      treatGlobalObjectsAsRoots: this.treatGlobalObjectsAsRoots.get(),
       captureNumericValue: this.captureNumericValue.get(),
+      exposeInternals: this.exposeInternals.get(),
     });
     profile = this.profileBeingRecorded() as HeapProfileHeader;
     if (!profile) {

package/front_end/panels/profiler/LiveHeapProfileView.ts

@@ -292,7 +292,6 @@ export class LiveHeapProfileView extends UI.Widget.VBox {
     if (!node || !node.url) {
       return;
     }
-    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
     const sourceCode =
         Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(node.url as Platform.DevToolsPath.UrlString);
     if (sourceCode) {

package/front_end/panels/screencast/ScreencastView.ts

@@ -744,7 +744,6 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     if (match) {
       url = match[1];
     }
-    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.inspectedURLChanged(
         url as Platform.DevToolsPath.UrlString);
     this.navigationUrl.value = decodeURI(url);

package/front_end/panels/settings/SettingsScreen.ts

@@ -509,7 +509,6 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
       case 'settings.show':
         void SettingsScreen.showSettingsScreen({focusTabHeader: true} as ShowSettingsScreenOptions);
         return true;
-      // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
       case 'settings.documentation':
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(UI.UIUtils.addReferrerToURL(
             'https://developer.chrome.com/docs/devtools/' as Platform.DevToolsPath.UrlString));

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -86,6 +86,12 @@ const UIStrings = {
   *@description Text in Call Stack Sidebar Pane of the Sources panel when some call frames have warnings
   */
   callFrameWarnings: 'Some call frames have warnings',
+  /**
+   * @description A contex menu item in the Call Stack Sidebar Pane. "Restart" is a verb and
+   * "frame" is a noun. "Frame" refers to an individual item in the call stack, i.e. a call frame.
+   * The user opens this context menu by selecting a specific call frame in the call stack sidebar pane.
+   */
+  restartFrame: 'Restart frame',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/CallStackSidebarPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -384,6 +390,13 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
       return;
     }
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    const debuggerCallFrame = itemToCallFrame.get(item);
+    if (debuggerCallFrame) {
+      contextMenu.defaultSection().appendItem(i18nString(UIStrings.restartFrame), () => {
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.StackFrameRestarted);
+        void debuggerCallFrame.restart();
+      }, !debuggerCallFrame.canBeRestarted);
+    }
     contextMenu.defaultSection().appendItem(i18nString(UIStrings.copyStackTrace), this.copyStackTrace.bind(this));
     if (item.uiLocation) {
       this.appendIgnoreListURLContextMenuItems(contextMenu, item.uiLocation.uiSourceCode);

package/front_end/panels/sources/NavigatorView.ts

@@ -28,8 +28,6 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-// TODO(crbug.com/1253323): Casts to Branded Types will be removed from this file when migration to branded types is complete.
-
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -311,13 +311,14 @@ export class OpenLinearMemoryInspector extends UI.Widget.VBox implements UI.Cont
   }
 
   private isMemoryObjectProperty(obj: SDK.RemoteObject.RemoteObject): boolean {
-    const isWasmMemory = obj.type === 'object' && obj.subtype &&
+    const isWasmOrBuffer = obj.type === 'object' && obj.subtype &&
         LinearMemoryInspector.LinearMemoryInspectorController.ACCEPTED_MEMORY_TYPES.includes(obj.subtype);
-    if (isWasmMemory) {
+    if (isWasmOrBuffer) {
       return true;
     }
 
-    if (obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode) {
+    const isWasmDWARF = obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode;
+    if (isWasmDWARF) {
       return obj.inspectableAddress !== undefined;
     }
 

package/front_end/panels/sources/SourcesSearchScope.ts

@@ -28,8 +28,6 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-// TODO(crbug.com/1253323): Casts to Branded Types will be removed from this file when migration to branded types is complete.
-
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Bindings from '../../models/bindings/bindings.js';

package/front_end/panels/sources/sourcesView.css

@@ -45,6 +45,10 @@
   z-index: 0;
 }
 
+.sources-toolbar .toolbar {
+  cursor: default;
+}
+
 .source-frame-debugger-script {
   --override-debugger-background-tint: rgb(255 255 194 / 50%);
 

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -130,6 +130,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     [x: string]: Element,
   };
   scrollContainerInternal: Element;
+  private dataContainerInternal: Element;
   private readonly dataTable: Element;
   protected inline: boolean;
   private columnsArray: ColumnDescriptor[];
@@ -190,8 +191,9 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     this.dataTableHeaders = {};
 
-    this.scrollContainerInternal = this.element.createChild('div', 'data-container');
-    this.dataTable = this.scrollContainerInternal.createChild('table', 'data');
+    this.dataContainerInternal = this.element.createChild('div', 'data-container');
+    this.dataTable = this.dataContainerInternal.createChild('table', 'data');
+    this.scrollContainerInternal = this.dataContainerInternal;
 
     // FIXME: Add a createCallback which is different from editCallback and has different
     // behavior when creating a new node.
@@ -1539,6 +1541,18 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.topFillerRow;
   }
 
+  // Note on the following methods:
+  // The header row is a child of the scrollable container, and uses position: sticky
+  // so it can visually obscure other elements below it in the grid. We need to manually
+  // subtract the header's height when calculating the actual client area in which
+  // data rows are visible. However, if a caller has set a different scroll container
+  // then we report 0 height and the caller is expected to ensure their chosen scroll
+  // container's height matches the visible scrollable data area as seen by the user.
+
+  protected headerHeightInScroller(): number {
+    return this.scrollContainer === this.dataContainerInternal ? this.headerHeight() : 0;
+  }
+
   protected headerHeight(): number {
     return this.dataTableHeadInternal.offsetHeight;
   }

package/front_end/ui/legacy/components/data_grid/ViewportDataGrid.ts

@@ -172,7 +172,7 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
       delete this.updateAnimationFrameId;
     }
 
-    const clientHeight = this.scrollContainer.clientHeight - this.headerHeight();
+    const clientHeight = this.scrollContainer.clientHeight - this.headerHeightInScroller();
     let scrollTop: number = this.scrollContainer.scrollTop;
     const currentScrollTop = scrollTop;
     const maxScrollTop = Math.max(0, this.contentHeight() - clientHeight);
@@ -249,7 +249,7 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     }
     const toY = fromY + node.nodeSelfHeight();
     let scrollTop: number = this.scrollContainer.scrollTop;
-    const visibleHeight = this.scrollContainer.offsetHeight - this.headerHeight();
+    const visibleHeight = this.scrollContainer.offsetHeight - this.headerHeightInScroller();
     if (scrollTop > fromY) {
       scrollTop = fromY;
       this.stickToBottom = false;

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1003647"
+  "version": "1.0.1004895"
 }