chrome-devtools-frontend 1.0.944427 → 1.0.944903

package/front_end/models/text_utils/ContentProvider.ts

@@ -29,10 +29,9 @@
  */
 
 import type * as Common from '../../core/common/common.js';
-import type * as Platform from '../../core/platform/platform.js';
 
 export abstract class ContentProvider {
-  abstract contentURL(): Platform.DevToolsPath.RawPathString;
+  abstract contentURL(): string;
   abstract contentType(): Common.ResourceType.ResourceType;
   abstract contentEncoded(): Promise<boolean>;
   abstract requestContent(): Promise<DeferredContent>;

package/front_end/models/text_utils/StaticContentProvider.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import type * as Common from '../../core/common/common.js';
-import type * as Platform from '../../core/platform/platform.js';
 
 import type {ContentProvider, DeferredContent, SearchMatch} from './ContentProvider.js';
 import {performSearchInContent} from './TextUtils.js';
@@ -30,8 +29,8 @@ export class StaticContentProvider implements ContentProvider {
   }
 
   // TODO(crbug.com/1253323): Cast to PawPathString will be removed when migration to branded types is complete.
-  contentURL(): Platform.DevToolsPath.RawPathString {
-    return this.contentURLInternal as Platform.DevToolsPath.RawPathString;
+  contentURL(): string {
+    return this.contentURLInternal;
   }
 
   contentType(): Common.ResourceType.ResourceType {

package/front_end/models/workspace/UISourceCode.ts

@@ -192,8 +192,8 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   // TODO(crbug.com/1253323): Cast to RawPathString will be removed when migration to branded types is complete.
-  contentURL(): Platform.DevToolsPath.RawPathString {
-    return this.url() as Platform.DevToolsPath.RawPathString;
+  contentURL(): string {
+    return this.url();
   }
 
   contentType(): Common.ResourceType.ResourceType {

package/front_end/panels/animation/animationTimeline.css

@@ -24,6 +24,8 @@
   margin-bottom: -1px;
   background-color: var(--color-background-elevation-1);
   display: flex;
+  flex-direction: column;
+  justify-content: space-around;
   align-items: center;
   flex: 0 0 150px;
 }

package/front_end/panels/application/ReportingApiView.ts

@@ -5,22 +5,36 @@
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ApplicationComponents from './components/components.js';
+import type * as Protocol from '../../generated/protocol.js';
 
 import {ReportingApiReportsView} from './ReportingApiReportsView.js';
 
 export class ReportingApiView extends UI.SplitWidget.SplitWidget {
+  private readonly endpointsGrid = new ApplicationComponents.EndpointsGrid.EndpointsGrid();
+  private endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
+
   constructor() {
     super(/* isVertical: */ false, /* secondIsSidebar: */ true);
+    this.endpoints = new Map();
     const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
     const networkManager = mainTarget && mainTarget.model(SDK.NetworkManager.NetworkManager);
     if (networkManager) {
+      networkManager.addEventListener(
+          SDK.NetworkManager.Events.ReportingApiEndpointsChangedForOrigin,
+          event => this.onEndpointsChangedForOrigin(event.data), this);
+
       const reportingApiReportsView = new ReportingApiReportsView(networkManager);
       const reportingApiEndpointsView = new UI.Widget.VBox();
       reportingApiEndpointsView.setMinimumSize(0, 40);
-      reportingApiEndpointsView.contentElement.appendChild(new ApplicationComponents.EndpointsGrid.EndpointsGrid());
+      reportingApiEndpointsView.contentElement.appendChild(this.endpointsGrid);
       this.setMainWidget(reportingApiReportsView);
       this.setSidebarWidget(reportingApiEndpointsView);
       networkManager.enableReportingApi();
     }
   }
+
+  private onEndpointsChangedForOrigin(data: Protocol.Network.ReportingApiEndpointsChangedForOriginEvent): void {
+    this.endpoints.set(data.origin, data.endpoints);
+    this.endpointsGrid.data = {endpoints: this.endpoints};
+  }
 }

package/front_end/panels/application/components/EndpointsGrid.ts

@@ -3,9 +3,12 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
+import type * as Protocol from '../../../generated/protocol.js';
+
 import reportingApiGridStyles from './reportingApiGrid.css.js';
 
 const UIStrings = {
@@ -20,30 +23,86 @@ export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {render, html} = LitHtml;
 
+export interface EndpointsGridData {
+  endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
+}
+
 export class EndpointsGrid extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-resources-endpoints-grid`;
 
   private readonly shadow = this.attachShadow({mode: 'open'});
+  private endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]> = new Map();
 
   connectedCallback(): void {
     this.shadow.adoptedStyleSheets = [reportingApiGridStyles];
     this.render();
   }
 
-  // TODO(crbug.com/1200732): Display info about currently configured endpoints
+  set data(data: EndpointsGridData) {
+    this.endpoints = data.endpoints;
+    this.render();
+  }
+
   private render(): void {
+    const endpointsGridData: DataGrid.DataGridController.DataGridControllerData = {
+      columns: [
+        {
+          id: 'origin',
+          title: i18n.i18n.lockedString('Origin'),
+          widthWeighting: 30,
+          hideable: false,
+          visible: true,
+        },
+        {
+          id: 'name',
+          title: i18n.i18n.lockedString('Name'),
+          widthWeighting: 20,
+          hideable: false,
+          visible: true,
+        },
+        {
+          id: 'url',
+          title: i18n.i18n.lockedString('URL'),
+          widthWeighting: 30,
+          hideable: false,
+          visible: true,
+        },
+      ],
+      rows: this.buildReportRows(),
+    };
+
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
       <div class="reporting-container">
         <div class="reporting-header">${i18n.i18n.lockedString('Endpoints')}</div>
-        <div class="reporting-placeholder">
-          <div>${i18nString(UIStrings.noEndpointsToDisplay)}</div>
-        </div>
+        ${this.endpoints.size > 0 ? html`
+          <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
+              endpointsGridData as DataGrid.DataGridController.DataGridControllerData}>
+          </${DataGrid.DataGridController.DataGridController.litTagName}>
+        ` : html`
+          <div class="reporting-placeholder">
+            <div>${i18nString(UIStrings.noEndpointsToDisplay)}</div>
+          </div>
+        `}
       </div>
     `, this.shadow);
     // clang-format on
   }
+
+  private buildReportRows(): DataGrid.DataGridUtils.Row[] {
+    return Array.from(this.endpoints)
+        .map(([origin, endpointArray]) => endpointArray.map(endpoint => {
+          return {
+            cells: [
+              {columnId: 'origin', value: origin},
+              {columnId: 'name', value: endpoint.groupName},
+              {columnId: 'url', value: endpoint.url},
+            ],
+          };
+        }))
+        .flat();
+  }
 }
 
 ComponentHelpers.CustomElements.defineComponent('devtools-resources-endpoints-grid', EndpointsGrid);

package/front_end/panels/application/components/FrameDetailsView.ts

@@ -47,10 +47,6 @@ const UIStrings = {
   */
   document: 'Document',
   /**
-  *@description Text for web URLs
-  */
-  url: 'URL',
-  /**
   *@description Title for a link to the Sources panel
   */
   clickToRevealInSourcesPanel: 'Click to reveal in Sources panel',
@@ -67,10 +63,6 @@ const UIStrings = {
   */
   clickToRevealInNetworkPanelMight: 'Click to reveal in Network panel (might require page reload)',
   /**
-  *@description Text for the origin of something
-  */
-  origin: 'Origin',
-  /**
   *@description Related node label in Timeline UIUtils of the Performance panel
   */
   ownerElement: 'Owner Element',
@@ -117,11 +109,11 @@ const UIStrings = {
   /**
   *@description Row title for in the Frame Details view
   */
-  crossoriginIsolated: 'Cross-Origin Isolated',
+  crossoriginIsolated: '`Cross-Origin` Isolated',
   /**
   *@description Explanatory text in the Frame Details view
   */
-  localhostIsAlwaysASecureContext: 'Localhost is always a secure context',
+  localhostIsAlwaysASecureContext: '`Localhost` is always a secure context',
   /**
   *@description Explanatory text in the Frame Details view
   */
@@ -131,14 +123,6 @@ const UIStrings = {
   */
   theFramesSchemeIsInsecure: 'The frame\'s scheme is insecure',
   /**
-  *@description Row title in the Frame Details view
-  */
-  crossoriginEmbedderPolicy: 'Cross-Origin Embedder Policy',
-  /**
-  *@description Row title in the Frame Details view
-  */
-  crossoriginOpenerPolicy: 'Cross-Origin Opener Policy',
-  /**
   *@description This label specifies the server endpoints to which the server is reporting errors
   *and warnings through the Report-to API. Following this label will be the URL of the server.
   */
@@ -150,7 +134,8 @@ const UIStrings = {
   /**
   *@description Explanatory text in the Frame Details view for the API availability section
   */
-  availabilityOfCertainApisDepends: 'Availability of certain APIs depends on the document being cross-origin isolated.',
+  availabilityOfCertainApisDepends:
+      'Availability of certain APIs depends on the document being `cross-origin` isolated.',
   /**
   *@description Description of the SharedArrayBuffer status
   */
@@ -167,20 +152,20 @@ const UIStrings = {
   *@description Tooltip for the SharedArrayBuffer availability status
   */
   sharedarraybufferConstructorIs:
-      'SharedArrayBuffer constructor is available and SABs can be transferred via postMessage',
+      '`SharedArrayBuffer` constructor is available and `SABs` can be transferred via `postMessage`',
   /**
   *@description Tooltip for the SharedArrayBuffer availability status
   */
   sharedarraybufferConstructorIsAvailable:
-      'SharedArrayBuffer constructor is available but SABs cannot be transferred via postMessage',
+      '`SharedArrayBuffer` constructor is available but `SABs` cannot be transferred via `postMessage`',
   /**
   *@description Explanation for the SharedArrayBuffer availability status
   */
-  willRequireCrossoriginIsolated: '⚠️ will require cross-origin isolated context in the future',
+  willRequireCrossoriginIsolated: '⚠️ will require `cross-origin` isolated context in the future',
   /**
   *@description Explanation for the SharedArrayBuffer availability status
   */
-  requiresCrossoriginIsolated: 'requires cross-origin isolated context',
+  requiresCrossoriginIsolated: 'requires `cross-origin` isolated context',
   /**
    *@description Explanation for the SharedArrayBuffer availability status in case the transfer of a SAB requires the
    * permission policy `cross-origin-isolated` to be enabled (e.g. because the message refers to the situation in an iframe).
@@ -194,11 +179,12 @@ const UIStrings = {
   /**
   *@description Tooltip for the Measure Memory availability status
   */
-  thePerformanceAPI: 'The performance.measureUserAgentSpecificMemory() API is available',
+  thePerformanceAPI: 'The `performance.measureUserAgentSpecificMemory()` API is available',
   /**
   *@description Tooltip for the Measure Memory availability status
   */
-  thePerformancemeasureuseragentspecificmemory: 'The performance.measureUserAgentSpecificMemory() API is not available',
+  thePerformancemeasureuseragentspecificmemory:
+      'The `performance.measureUserAgentSpecificMemory()` API is not available',
   /**
   *@description Entry in the API availability section of the frame details view
   */
@@ -211,12 +197,13 @@ const UIStrings = {
   *@description Label for a stack trace. If a frame is created programmatically (i.e. via JavaScript), there is a
   * stack trace for the line of code which caused the creation of the iframe. This is the stack trace we are showing here.
   */
-  creationStackTrace: 'Frame Creation Stack Trace',
+  creationStackTrace: 'Frame Creation `Stack Trace`',
   /**
   *@description Tooltip for 'Frame Creation Stack Trace' explaining that the stack
   *trace shows where in the code the frame has been created programmatically
   */
-  creationStackTraceExplanation: 'This frame was created programmatically. The stack trace shows where this happened.',
+  creationStackTraceExplanation:
+      'This frame was created programmatically. The `stack trace` shows where this happened.',
   /**
   *@description Text descripting why a frame has been indentified as an advertisement.
   */
@@ -230,11 +217,11 @@ const UIStrings = {
   *@description Text descripting why a frame has been indentified as an advertisement.
   */
   createdByAdScriptExplanation:
-      'There was an ad script in the (async) stack when this frame was created. Examining the creation stack trace of this frame might provide more insight.',
+      'There was an ad script in the `(async) stack` when this frame was created. Examining the creation `stack trace` of this frame might provide more insight.',
   /**
    *@description Label for a list of origin trials that associated with at least one token.
    */
-  originTrials: 'Origin Trials',
+  // originTrials: 'Origin Trials',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/FrameDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -330,7 +317,7 @@ export class FrameDetailsReportView extends HTMLElement {
 
     return LitHtml.html`
     <${ReportView.ReportView.ReportSectionHeader.litTagName}>
-      ${i18nString(UIStrings.originTrials)}
+      ${i18n.i18n.lockedString('Origin Trials')}
       <${IconButton.IconButton.IconButton.litTagName} class="inline-button" .data="${{
       clickHandler: refreshOriginTrials,
       groups: [
@@ -356,7 +343,7 @@ export class FrameDetailsReportView extends HTMLElement {
     return LitHtml.html`
       <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.document)}</${
         ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.url)}</${
+      <${ReportView.ReportView.ReportKey.litTagName}>${i18n.i18n.lockedString('URL')}</${
         ReportView.ReportView.ReportKey.litTagName}>
       <${ReportView.ReportView.ReportValue.litTagName}>
         <div class="inline-items">
@@ -462,7 +449,7 @@ export class FrameDetailsReportView extends HTMLElement {
   private maybeRenderOrigin(): LitHtml.TemplateResult|{} {
     if (this.frame && this.frame.securityOrigin && this.frame.securityOrigin !== '://') {
       return LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.origin)}</${
+        <${ReportView.ReportView.ReportKey.litTagName}>${i18n.i18n.lockedString('Origin')}</${
           ReportView.ReportView.ReportKey.litTagName}>
         <${ReportView.ReportView.ReportValue.litTagName}>
           <div class="text-ellipsis" title=${this.frame.securityOrigin}>${this.frame.securityOrigin}</div>
@@ -622,11 +609,11 @@ export class FrameDetailsReportView extends HTMLElement {
         return LitHtml.html`
           ${
             this.maybeRenderCrossOriginStatus(
-                info.coep, i18nString(UIStrings.crossoriginEmbedderPolicy),
+                info.coep, i18n.i18n.lockedString('Cross-Origin Embedder Policy (COEP)'),
                 Protocol.Network.CrossOriginEmbedderPolicyValue.None)}
           ${
             this.maybeRenderCrossOriginStatus(
-                info.coop, i18nString(UIStrings.crossoriginOpenerPolicy),
+                info.coop, i18n.i18n.lockedString('Cross-Origin Opener Policy (COOP)'),
                 Protocol.Network.CrossOriginOpenerPolicyValue.UnsafeNone)}
         `;
       }

package/front_end/panels/snippets/ScriptSnippetFileSystem.ts

@@ -41,7 +41,7 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
   private readonly snippetsSetting: Common.Settings.Setting<Snippet[]>;
   constructor() {
     // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
-    super('snippet://' as Platform.DevToolsPath.UrlString, 'snippets');
+    super('snippet://', 'snippets');
     this.lastSnippetIdentifierSetting =
         Common.Settings.Settings.instance().createSetting('scriptSnippets_lastIdentifier', 0);
     this.snippetsSetting = Common.Settings.Settings.instance().createSetting('scriptSnippets', []);

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -702,8 +702,8 @@ export class DebuggerPlugin extends Plugin {
       if (this.popoverHelper.isPopoverVisible()) {
         this.popoverHelper.hidePopover();
         event.consume();
+        return true;
       }
-      return true;
     }
     if (ctrlDown && this.executionLocation) {
       this.setControlDown(true);

package/front_end/panels/sources/NavigatorView.ts

@@ -851,7 +851,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       // TODO(crbug.com/1253323): Cast to RawPathString will be removed when migration to branded types is complete.
       const folderPath = Common.ParsedURL.ParsedURL.capFilePrefix(
           Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.completeURL(project, path) as
-              Platform.DevToolsPath.RawPathString,
+              Platform.DevToolsPath.UrlString,
           Host.Platform.isWin());
       contextMenu.revealSection().appendItem(
           i18nString(UIStrings.openFolder),

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -380,7 +380,6 @@ export class UISourceCodeFrame extends
     const location = this.editorLocationToUILocation(lineNumber, columnNumber);
     contextMenu.appendApplicableItems(
         new Workspace.UISourceCode.UILocation(this.uiSourceCodeInternal, location.lineNumber, location.columnNumber));
-    contextMenu.appendApplicableItems(this);
     for (const plugin of this.plugins) {
       plugin.populateTextAreaContextMenu(contextMenu, lineNumber, columnNumber);
     }

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -46,7 +46,7 @@ import type {PerformanceModel} from './PerformanceModel.js';
 import {FlameChartStyle, Selection, TimelineFlameChartMarker} from './TimelineFlameChartView.js';
 import {TimelineSelection} from './TimelinePanel.js';
 import type {TimelineCategory} from './TimelineUIUtils.js';
-import {TimelineUIUtils} from './TimelineUIUtils.js';
+import {TimelineUIUtils, assignLayoutShiftsToClusters} from './TimelineUIUtils.js';
 
 const UIStrings = {
   /**
@@ -768,7 +768,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
     const metricEvents: SDK.TracingModel.Event[] = [];
     const lcpEvents = [];
-    const layoutShifts = [];
+    const layoutShifts: SDK.TracingModel.Event[] = [];
     const timelineModel = this.performanceModel.timelineModel();
     for (const track of this.model.tracks()) {
       for (const event of track.events) {
@@ -807,38 +807,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     }
 
     if (layoutShifts.length) {
-      const gapTimeInMs = 1000;
-      const limitTimeInMs = 5000;
-      let firstTimestamp = Number.NEGATIVE_INFINITY;
-      let previousTimestamp = Number.NEGATIVE_INFINITY;
-      let maxScore = 0;
-      let currentClusterId = 1;
-      let currentClusterScore = 0;
-      let currentCluster = new Set<SDK.TracingModel.Event>();
-
-      for (const e of layoutShifts) {
-        if (e.args['data']['had_recent_input'] || e.args['data']['weighted_score_delta'] === undefined) {
-          continue;
-        }
-
-        if (e.startTime - firstTimestamp > limitTimeInMs || e.startTime - previousTimestamp > gapTimeInMs) {
-          firstTimestamp = e.startTime;
-
-          for (const layoutShift of currentCluster) {
-            layoutShift.args['data']['_current_cluster_score'] = currentClusterScore;
-            layoutShift.args['data']['_current_cluster_id'] = currentClusterId;
-          }
-
-          currentClusterId += 1;
-          currentClusterScore = 0;
-          currentCluster = new Set();
-        }
-
-        previousTimestamp = e.startTime;
-        currentClusterScore += e.args['data']['weighted_score_delta'];
-        currentCluster.add(e);
-        maxScore = Math.max(maxScore, currentClusterScore);
-      }
+      assignLayoutShiftsToClusters(layoutShifts);
     }
 
     metricEvents.sort(SDK.TracingModel.Event.compareStartTime);

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -2421,9 +2421,13 @@ export class TimelineUIUtils {
         contentHelper.appendTextRow(i18nString(UIStrings.score), eventData['score'].toPrecision(4));
         contentHelper.appendTextRow(
             i18nString(UIStrings.cumulativeScore), eventData['cumulative_score'].toPrecision(4));
-        contentHelper.appendTextRow(i18nString(UIStrings.currentClusterId), eventData['_current_cluster_id']);
-        contentHelper.appendTextRow(
-            i18nString(UIStrings.currentClusterScore), eventData['_current_cluster_score'].toPrecision(4));
+        if ('_current_cluster_id' in eventData) {
+          contentHelper.appendTextRow(i18nString(UIStrings.currentClusterId), eventData['_current_cluster_id']);
+        }
+        if ('_current_cluster_score' in eventData) {
+          contentHelper.appendTextRow(
+              i18nString(UIStrings.currentClusterScore), eventData['_current_cluster_score'].toPrecision(4));
+        }
         contentHelper.appendTextRow(
             i18nString(UIStrings.hadRecentInput),
             eventData['had_recent_input'] ? i18nString(UIStrings.yes) : i18nString(UIStrings.no));
@@ -3783,3 +3787,47 @@ export interface TimelineMarkerStyle {
   tall: boolean;
   lowPriority: boolean;
 }
+
+export function assignLayoutShiftsToClusters(layoutShifts: readonly SDK.TracingModel.Event[]): void {
+  const gapTimeInMs = 1000;
+  const limitTimeInMs = 5000;
+  let firstTimestamp = Number.NEGATIVE_INFINITY;
+  let previousTimestamp = Number.NEGATIVE_INFINITY;
+  let currentClusterId = 0;
+  let currentClusterScore = 0;
+  let currentCluster = new Set<SDK.TracingModel.Event>();
+
+  for (const event of layoutShifts) {
+    if (event.args['data']['had_recent_input'] || event.args['data']['weighted_score_delta'] === undefined) {
+      continue;
+    }
+
+    if (event.startTime - firstTimestamp > limitTimeInMs || event.startTime - previousTimestamp > gapTimeInMs) {
+      // This means the event does not fit into the current session/cluster, so we need to start a new cluster.
+      firstTimestamp = event.startTime;
+
+      // Update all the layout shifts we found in this cluster to associate them with the cluster.
+      for (const layoutShift of currentCluster) {
+        layoutShift.args['data']['_current_cluster_score'] = currentClusterScore;
+        layoutShift.args['data']['_current_cluster_id'] = currentClusterId;
+      }
+
+      // Increment the cluster ID and reset the data.
+      currentClusterId += 1;
+      currentClusterScore = 0;
+      currentCluster = new Set();
+    }
+
+    // Store the timestamp of the previous layout shift.
+    previousTimestamp = event.startTime;
+    // Update the score of the current cluster and store this event in that cluster
+    currentClusterScore += event.args['data']['weighted_score_delta'];
+    currentCluster.add(event);
+  }
+
+  // The last cluster we find may not get closed out - so if not, update all the shifts that we associate with it.
+  for (const layoutShift of currentCluster) {
+    layoutShift.args['data']['_current_cluster_score'] = currentClusterScore;
+    layoutShift.args['data']['_current_cluster_id'] = currentClusterId;
+  }
+}

package/front_end/services/window_bounds/WindowBoundsService.ts

@@ -0,0 +1,27 @@
+// Copyright 2021 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 Legacy from '../../ui/legacy/legacy.js';
+
+export interface WindowBoundsService {
+  getDevToolsBoundingElement(): HTMLElement;
+}
+
+let windowBoundsServiceImplInstance: WindowBoundsServiceImpl;
+export class WindowBoundsServiceImpl implements WindowBoundsService {
+  static instance(opts: {
+    forceNew: boolean|null,
+  } = {forceNew: null}): WindowBoundsServiceImpl {
+    const {forceNew} = opts;
+    if (!windowBoundsServiceImplInstance || forceNew) {
+      windowBoundsServiceImplInstance = new WindowBoundsServiceImpl();
+    }
+
+    return windowBoundsServiceImplInstance;
+  }
+
+  getDevToolsBoundingElement(): HTMLElement {
+    return Legacy.InspectorView.InspectorView.maybeGetInspectorViewInstance()?.element || document.body;
+  }
+}

package/front_end/services/window_bounds/window_bounds.ts

@@ -0,0 +1,9 @@
+// Copyright 2021 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 WindowBoundsService from './WindowBoundsService.js';
+
+export {
+  WindowBoundsService,
+};

package/front_end/third_party/codemirror.next/bundle.ts

@@ -39,7 +39,7 @@ export {
 } from '@codemirror/state';
 export {StreamLanguage, StreamParser, StringStream} from '@codemirror/stream-parser';
 export {Line, Text, TextIterator} from '@codemirror/text';
-export {showTooltip, Tooltip, tooltips, TooltipView} from '@codemirror/tooltip';
+export { repositionTooltips,showTooltip, Tooltip, tooltips, TooltipView} from '@codemirror/tooltip';
 export {
   Command, Decoration, DecorationSet, drawSelection, EditorView,
   highlightSpecialChars, KeyBinding, keymap, MatchDecorator, placeholder,