chrome-devtools-frontend 1.0.1004171 → 1.0.1005672

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -41,6 +41,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -237,6 +238,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   private searchHighlightsVisible?: boolean;
   selectionElement?: HTMLDivElement;
   private hintElement?: HTMLElement;
+  #slot?: Adorners.Adorner.Adorner;
   private contentElement: HTMLElement;
 
   constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
@@ -422,6 +424,21 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.expandedChildrenLimitInternal = expandedChildrenLimit;
   }
 
+  createSlotLink(nodeShortcut: SDK.DOMModel.DOMNodeShortcut|null): void {
+    if (nodeShortcut) {
+      const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
+          ElementsComponents.AdornerManager.RegisteredAdorners.SLOT);
+      this.#slot = this.adornSlot(config);
+      const deferredNode = nodeShortcut.deferredNode;
+      this.#slot.addEventListener('click', () => {
+        deferredNode.resolve(node => {
+          void Common.Revealer.reveal(node);
+        });
+      });
+      this.#slot.addEventListener('mousedown', e => e.consume(), false);
+    }
+  }
+
   private createSelection(): void {
     const contentElement = this.contentElement;
     if (!contentElement) {
@@ -1314,6 +1331,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       if (!this.isClosingTagInternal && this.adornerContainer) {
         this.contentElement.append(this.adornerContainer);
       }
+      if (this.#slot) {
+        this.contentElement.append(this.#slot);
+      }
       this.highlightResult = [];
       delete this.selectionElement;
       delete this.hintElement;
@@ -1936,6 +1956,27 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     return adorner;
   }
 
+  adornSlot({name}: {name: string}): Adorners.Adorner.Adorner {
+    const linkIcon = new IconButton.Icon.Icon();
+    linkIcon
+        .data = {iconName: 'ic_show_node_16x16', color: 'var(--color-text-disabled)', width: '12px', height: '12px'};
+    const slotText = document.createElement('span');
+    slotText.textContent = name;
+    const adornerContent = document.createElement('span');
+    adornerContent.append(linkIcon);
+    adornerContent.append(slotText);
+    adornerContent.classList.add('adorner-with-icon');
+    const adorner = new Adorners.Adorner.Adorner();
+    adorner.data = {
+      name,
+      content: adornerContent,
+    };
+    this.adorners.push(adorner);
+    ElementsPanel.instance().registerAdorner(adorner);
+    this.updateAdorners();
+    return adorner;
+  }
+
   removeAdorner(adornerToRemove: Adorners.Adorner.Adorner): void {
     const adorners = this.adorners;
     ElementsPanel.instance().deregisterAdorner(adornerToRemove);

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1180,6 +1180,11 @@ export class ElementsTreeOutline extends
         !node.parentNode.parentNode) {
       treeElement.setCollapsible(false);
     }
+
+    if (node.hasAssignedSlot()) {
+      treeElement.createSlotLink(node.assignedSlot);
+    }
+
     treeElement.selectable = Boolean(this.selectEnabled);
     return treeElement;
   }

package/front_end/panels/elements/components/AdornerManager.ts

@@ -29,6 +29,7 @@ export enum RegisteredAdorners {
   AD = 'ad',
   SCROLL_SNAP = 'scroll-snap',
   CONTAINER = 'container',
+  SLOT = 'slot',
 }
 
 // This enum-like const object serves as the authoritative registry for all the
@@ -65,6 +66,12 @@ export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorn
         category: AdornerCategories.LAYOUT,
         enabledByDefault: true,
       };
+    case RegisteredAdorners.SLOT:
+      return {
+        name: 'slot',
+        category: AdornerCategories.LAYOUT,
+        enabledByDefault: true,
+      };
   }
 }
 

package/front_end/panels/elements/elementsTreeOutline.css

@@ -27,6 +27,15 @@
   display: none;
 }
 
+.adorner-with-icon {
+  display: flex;
+  justify-content: center;
+}
+
+.adorner-with-icon *:not(:last-child) {
+  margin-right: 2px;
+}
+
 .elements-disclosure {
   width: 100%;
   display: inline-block;

package/front_end/panels/network/NetworkItemView.ts

@@ -30,12 +30,14 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as NetworkComponents from './components/components.js';
 
+import * as NetworkComponents from './components/components.js';
 import {EventSourceMessagesView} from './EventSourceMessagesView.js';
+
 import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import {RequestCookiesView} from './RequestCookiesView.js';
 import {RequestHeadersView} from './RequestHeadersView.js';
@@ -130,6 +132,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   private requestInternal: SDK.NetworkRequest.NetworkRequest;
   private readonly resourceViewTabSetting: Common.Settings.Setting<NetworkForward.UIRequestLocation.UIRequestTabs>;
   private readonly headersView: RequestHeadersView;
+  private readonly headersViewComponent: NetworkComponents.RequestHeadersView.RequestHeadersView;
   private payloadView: RequestPayloadView|null;
   private readonly responseView: RequestResponseView|undefined;
   private cookiesView: RequestCookiesView|null;
@@ -149,6 +152,12 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     this.appendTab(
         NetworkForward.UIRequestLocation.UIRequestTabs.Headers, i18nString(UIStrings.headers), this.headersView,
         i18nString(UIStrings.headers));
+    this.headersViewComponent = new NetworkComponents.RequestHeadersView.RequestHeadersView(request);
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
+      this.appendTab(
+          NetworkForward.UIRequestLocation.UIRequestTabs.HeadersComponent, i18nString(UIStrings.headers),
+          this.headersViewComponent, i18nString(UIStrings.headers));
+    }
 
     this.payloadView = null;
     void this.maybeAppendPayloadPanel();

package/front_end/panels/network/RequestHeadersView.ts

@@ -451,7 +451,7 @@ export class RequestHeadersView extends UI.Widget.VBox {
     if (headersText) {
       const toggleButton = this.createHeadersToggleButton(this.showRequestHeadersText);
       toggleButton.addEventListener('click', this.toggleRequestHeadersText.bind(this), false);
-      treeElement.listItemElement.appendChild(toggleButton);
+      treeElement.listItemElement.querySelector('.headers-title-left')?.appendChild(toggleButton);
     }
   }
 

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/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/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/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/components/text_editor/config.ts

@@ -253,7 +253,6 @@ export function baseConfiguration(text: string): CM.Extension {
     indentUnit.instance(),
     CM.Prec.lowest(CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.codeEditor)})),
     detectLineSeparator(text),
-    autocompletion,
     CM.tooltips({
       tooltipSpace: getTooltipSpace,
     }),

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;
   }