chrome-devtools-frontend 1.0.925655 → 1.0.927419

package/front_end/models/timeline_model/TimelineFrameModel.ts

@@ -44,6 +44,7 @@ export class TimelineFrameModel {
   private frameById!: {
     [x: number]: TimelineFrame,
   };
+  private beginFrameQueue!: TimelineFrameBeginFrameQueue;
   private minimumRecordTime!: number;
   private lastFrame!: TimelineFrame|null;
   private mainFrameCommitted!: boolean;
@@ -115,6 +116,7 @@ export class TimelineFrameModel {
     this.minimumRecordTime = Infinity;
     this.frames = [];
     this.frameById = {};
+    this.beginFrameQueue = new TimelineFrameBeginFrameQueue();
     this.lastFrame = null;
     this.lastLayerTree = null;
     this.mainFrameCommitted = false;
@@ -130,21 +132,28 @@ export class TimelineFrameModel {
     this.currentTaskTimeByCategory = {};
   }
 
-  handleBeginFrame(startTime: number): void {
+  handleBeginFrame(startTime: number, seqId: number): void {
     if (!this.lastFrame) {
       this.startFrame(startTime);
     }
     this.lastBeginFrame = startTime;
+
+    this.beginFrameQueue.addFrameIfNotExists(seqId, startTime, false);
   }
 
-  handleDroppedFrame(startTime: number): void {
+  handleDroppedFrame(startTime: number, seqId: number): void {
     if (!this.lastFrame) {
       this.startFrame(startTime);
     }
-    this.lastDroppedFrame = startTime;
+
+    // This line handles the case where no BeginFrame event is issued for
+    // the dropped frame. In this situation, add a BeginFrame to the queue
+    // as if it actually occurred.
+    this.beginFrameQueue.addFrameIfNotExists(seqId, startTime, true);
+    this.beginFrameQueue.setDropped(seqId, true);
   }
 
-  handleDrawFrame(startTime: number): void {
+  handleDrawFrame(startTime: number, seqId: number): void {
     if (!this.lastFrame) {
       this.startFrame(startTime);
       return;
@@ -158,20 +167,27 @@ export class TimelineFrameModel {
                                                           (this.lastBeginFrame || this.lastNeedsBeginFrame);
         if (idleTimeEnd > this.lastFrame.startTime) {
           this.lastFrame.idle = true;
-          this.startFrame(idleTimeEnd);
-          if (this.framePendingActivation) {
-            this.commitPendingFrame();
-          }
           this.lastBeginFrame = null;
         }
         this.lastNeedsBeginFrame = null;
       }
-      if (this.lastDroppedFrame) {
-        this.lastFrame.dropped = true;
-        this.startFrame(this.lastDroppedFrame);
-        this.lastDroppedFrame = null;
+
+      const framesToVisualize = this.beginFrameQueue.processPendingBeginFramesOnDrawFrame(seqId);
+
+      // Visualize the current frame and all pending frames before it.
+      for (const frame of framesToVisualize) {
+        const isLastFrameIdle = this.lastFrame.idle;
+
+        // If |frame| is the first frame after an idle period, the CPU time
+        // will be logged ("committed") under |frame| if applicable.
+        this.startFrame(frame.startTime);
+        if (isLastFrameIdle && this.framePendingActivation) {
+          this.commitPendingFrame();
+        }
+        if (frame.isDropped) {
+          this.lastFrame.dropped = true;
+        }
       }
-      this.startFrame(startTime);
     }
     this.mainFrameCommitted = false;
   }
@@ -292,21 +308,9 @@ export class TimelineFrameModel {
 
     const timestamp = event.startTime;
     if (event.name === RecordType.BeginFrame) {
-      this.handleBeginFrame(timestamp);
+      this.handleBeginFrame(timestamp, event.args['frameSeqId']);
     } else if (event.name === RecordType.DrawFrame) {
-      if (event.phase === 'I') {
-        // Legacy behavior: If DrawFrame is an instant event, then it is not
-        // supposed to contain frame presentation info; use the event time of
-        // DrawFrame in this case.
-        // TODO(mjzhang): Remove this legacy support when the migration to
-        // using presentation time as frame boundary is stablized.
-        this.handleDrawFrame(timestamp);
-      } else if (event.args['presentationTimestamp']) {
-        // Current behavior: Use the presentation timestamp. If the non-instant
-        // DrawFrame event contains no such timestamp, then the presentation did
-        // not happen and therefore the event will not be processed.
-        this.handleDrawFrame(event.args['presentationTimestamp'] / 1000);
-      }
+      this.handleDrawFrame(timestamp, event.args['frameSeqId']);
     } else if (event.name === RecordType.ActivateLayerTree) {
       this.handleActivateLayerTree();
     } else if (event.name === RecordType.RequestMainThreadFrame) {
@@ -314,7 +318,7 @@ export class TimelineFrameModel {
     } else if (event.name === RecordType.NeedsBeginFrameChanged) {
       this.handleNeedFrameChanged(timestamp, event.args['data'] && event.args['data']['needsBeginFrame']);
     } else if (event.name === RecordType.DroppedFrame) {
-      this.handleDroppedFrame(timestamp);
+      this.handleDroppedFrame(timestamp, event.args['frameSeqId']);
     }
   }
 
@@ -535,3 +539,78 @@ export class PendingFrame {
     this.triggerTime = triggerTime;
   }
 }
+
+// The parameters of an impl-side BeginFrame.
+class BeginFrameInfo {
+  seqId: number;
+  startTime: number;
+  isDropped: boolean;
+  constructor(seqId: number, startTime: number, isDropped: boolean) {
+    this.seqId = seqId;
+    this.startTime = startTime;
+    this.isDropped = isDropped;
+  }
+}
+
+// A queue of BeginFrames pending visualization.
+// BeginFrames are added into this queue as they occur; later when their
+// corresponding DrawFrames occur (or lack thereof), the BeginFrames are removed
+// from the queue and their timestamps are used for visualization.
+export class TimelineFrameBeginFrameQueue {
+  private queueFrames!: number[];
+
+  // Maps frameSeqId to BeginFrameInfo.
+  private mapFrames!: {
+    [x: number]: BeginFrameInfo,
+  };
+
+  constructor() {
+    this.queueFrames = [];
+    this.mapFrames = {};
+  }
+
+  // Add a BeginFrame to the queue, if it does not already exit.
+  addFrameIfNotExists(seqId: number, startTime: number, isDropped: boolean): void {
+    if (!(seqId in this.mapFrames)) {
+      this.mapFrames[seqId] = new BeginFrameInfo(seqId, startTime, isDropped);
+      this.queueFrames.push(seqId);
+    }
+  }
+
+  // Set a BeginFrame in queue as dropped.
+  setDropped(seqId: number, isDropped: boolean): void {
+    if (seqId in this.mapFrames) {
+      this.mapFrames[seqId].isDropped = isDropped;
+    }
+  }
+
+  processPendingBeginFramesOnDrawFrame(seqId: number): BeginFrameInfo[] {
+    const framesToVisualize: BeginFrameInfo[] = [];
+
+    // Do not visualize this frame in the rare case where the current DrawFrame
+    // does not have a corresponding BeginFrame.
+    if (seqId in this.mapFrames) {
+      // Pop all BeginFrames before the current frame, and add only the dropped
+      // ones in |frames_to_visualize|.
+      // Non-dropped frames popped here are BeginFrames that are never
+      // drawn (but not considered dropped either for some reason).
+      // Those frames do not require an proactive visualization effort and will
+      // be naturally presented as continuationss of other frames.
+      while (this.queueFrames[0] !== seqId) {
+        const currentSeqId = this.queueFrames[0];
+        if (this.mapFrames[currentSeqId].isDropped) {
+          framesToVisualize.push(this.mapFrames[currentSeqId]);
+        }
+
+        delete this.mapFrames[currentSeqId];
+        this.queueFrames.shift();
+      }
+
+      // Pop the BeginFrame associated with the current DrawFrame.
+      framesToVisualize.push(this.mapFrames[seqId]);
+      delete this.mapFrames[seqId];
+      this.queueFrames.shift();
+    }
+    return framesToVisualize;
+  }
+}

package/front_end/panels/application/ReportingApiReportsView.ts

@@ -0,0 +1,89 @@
+// 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 i18n from '../../core/i18n/i18n.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import type * as DataGrid from '../../ui/components/data_grid/data_grid.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
+import * as ApplicationComponents from './components/components.js';
+
+import reportingApiReportsViewStyles from './reportingApiReportsView.css.js';
+
+const UIStrings = {
+  /**
+  *@description Placeholder text instructing the user how to display a Reporting API
+  *report body (https://developers.google.com/web/updates/2018/09/reportingapi#sending).
+  */
+  clickToDisplayBody: 'Click on any report to display its body',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/application/ReportingApiReportsView.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class ReportingApiReportsView extends UI.SplitWidget.SplitWidget {
+  private readonly reportsGrid = new ApplicationComponents.ReportsGrid.ReportsGrid();
+  private reports: Protocol.Network.ReportingApiReport[] = [];
+
+  constructor(networkManager: SDK.NetworkManager.NetworkManager) {
+    super(/* isVertical: */ false, /* secondIsSidebar: */ true);
+    const topPanel = new UI.Widget.VBox();
+    const bottomPanel = new UI.Widget.VBox();
+    const resizer = topPanel.element.createChild('div');
+    this.setMainWidget(topPanel);
+    this.setSidebarWidget(bottomPanel);
+    this.installResizer(resizer);
+
+    topPanel.contentElement.appendChild(this.reportsGrid);
+    this.reportsGrid.addEventListener('cellfocused', this.onFocus.bind(this));
+
+    bottomPanel.contentElement.classList.add('placeholder');
+    const centered = bottomPanel.contentElement.createChild('div');
+    centered.textContent = i18nString(UIStrings.clickToDisplayBody);
+
+    networkManager.addEventListener(
+        SDK.NetworkManager.Events.ReportingApiReportAdded, event => this.onReportAdded(event.data), this);
+    networkManager.addEventListener(
+        SDK.NetworkManager.Events.ReportingApiReportUpdated, event => this.onReportUpdated(event.data), this);
+  }
+
+  wasShown(): void {
+    super.wasShown();
+    const sbw = this.sidebarWidget();
+    if (sbw) {
+      sbw.registerCSSFiles([reportingApiReportsViewStyles]);
+    }
+  }
+
+  private onReportAdded(report: Protocol.Network.ReportingApiReport): void {
+    this.reports.push(report);
+    this.reportsGrid.data = {reports: this.reports};
+  }
+
+  private onReportUpdated(report: Protocol.Network.ReportingApiReport): void {
+    const index = this.reports.findIndex(oldReport => oldReport.id === report.id);
+    this.reports[index] = report;
+    this.reportsGrid.data = {reports: this.reports};
+  }
+
+  private async onFocus(event: Event): Promise<void> {
+    const focusedEvent = event as DataGrid.DataGridEvents.BodyCellFocusedEvent;
+    const cell = focusedEvent.data.row.cells.find(cell => cell.columnId === 'id');
+    const report = cell && this.reports.find(report => report.id === cell.value);
+    if (report) {
+      const jsonView = await SourceFrame.JSONView.JSONView.createView(JSON.stringify(report.body));
+      if (jsonView) {
+        this.setSidebarWidget(jsonView);
+      }
+    }
+  }
+
+  getReports(): Protocol.Network.ReportingApiReport[] {
+    return this.reports;
+  }
+
+  getReportsGrid(): ApplicationComponents.ReportsGrid.ReportsGrid {
+    return this.reportsGrid;
+  }
+}

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -7,7 +7,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
-import * as ApplicationComponents from './components/components.js';
+import {ReportingApiView} from './ReportingApiView.js';
 
 const UIStrings = {
   /**
@@ -19,7 +19,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/application/ReportingApiTreeEle
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
-  private view?: ApplicationComponents.ReportingApiView.ReportingApiView;
+  private view?: ReportingApiView;
 
   constructor(storagePanel: ResourcesPanel) {
     super(storagePanel, i18nString(UIStrings.reportingApi), false);
@@ -34,7 +34,7 @@ export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = new ApplicationComponents.ReportingApiView.ReportingApiView();
+      this.view = new ReportingApiView();
     }
     this.showView(this.view);
     return false;

package/front_end/panels/application/ReportingApiView.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 SDK from '../../core/sdk/sdk.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as ApplicationComponents from './components/components.js';
+
+import {ReportingApiReportsView} from './ReportingApiReportsView.js';
+
+export class ReportingApiView extends UI.SplitWidget.SplitWidget {
+  constructor() {
+    super(/* isVertical: */ false, /* secondIsSidebar: */ true);
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const networkManager = mainTarget && mainTarget.model(SDK.NetworkManager.NetworkManager);
+    if (networkManager) {
+      const reportingApiReportsView = new ReportingApiReportsView(networkManager);
+      const resizer = reportingApiReportsView.element.createChild('div');
+      const reportingApiEndpointsView = new UI.Widget.VBox();
+      reportingApiEndpointsView.contentElement.appendChild(new ApplicationComponents.EndpointsGrid.EndpointsGrid());
+      this.setMainWidget(reportingApiReportsView);
+      this.setSidebarWidget(reportingApiEndpointsView);
+      this.installResizer(resizer);
+      networkManager.enableReportingApi();
+    }
+  }
+}

package/front_end/panels/application/application.ts

@@ -15,6 +15,7 @@ import * as DOMStorageModel from './DOMStorageModel.js';
 import * as IndexedDBModel from './IndexedDBModel.js';
 import * as IndexedDBViews from './IndexedDBViews.js';
 import * as OpenedWindowDetailsView from './OpenedWindowDetailsView.js';
+import * as ReportingApiReportsView from './ReportingApiReportsView.js';
 import * as ResourcesPanel from './ResourcesPanel.js';
 import * as ServiceWorkerCacheViews from './ServiceWorkerCacheViews.js';
 import * as ServiceWorkersView from './ServiceWorkersView.js';
@@ -36,6 +37,7 @@ export {
   IndexedDBModel,
   IndexedDBViews,
   OpenedWindowDetailsView,
+  ReportingApiReportsView,
   ResourcesPanel,
   ServiceWorkerCacheViews,
   ServiceWorkersView,

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

@@ -0,0 +1,55 @@
+// 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 i18n from '../../../core/i18n/i18n.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import reportingApiGridStyles from './reportingApiGrid.css.js';
+
+const UIStrings = {
+  /**
+  *@description Placeholder text when there are no Reporting API endpoints.
+  *(https://developers.google.com/web/updates/2018/09/reportingapi#tldr)
+  */
+  noEndpointsToDisplay: 'No endpoints to display',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/EndpointsGrid.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const {render, html} = LitHtml;
+
+export class EndpointsGrid extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-resources-endpoints-grid`;
+
+  private readonly shadow = this.attachShadow({mode: 'open'});
+
+  connectedCallback(): void {
+    this.shadow.adoptedStyleSheets = [reportingApiGridStyles];
+    this.render();
+  }
+
+  // TODO(crbug.com/1200732): Display info about currently configured endpoints
+  private render(): void {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    render(html`
+      <div class="reporting-container">
+        <div class="reporting-header">Endpoints</div>
+        <div class="reporting-placeholder">
+          <div>${i18nString(UIStrings.noEndpointsToDisplay)}</div>
+        </div>
+      </div>
+    `, this.shadow);
+    // clang-format on
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-resources-endpoints-grid', EndpointsGrid);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-resources-endpoints-grid': EndpointsGrid;
+  }
+}

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

@@ -0,0 +1,144 @@
+// 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 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 * as Root from '../../../core/root/root.js';
+
+import reportingApiGridStyles from './reportingApiGrid.css.js';
+
+const UIStrings = {
+  /**
+  *@description Placeholder text when there are no Reporting API reports.
+  *(https://developers.google.com/web/updates/2018/09/reportingapi#sending)
+  */
+  noReportsToDisplay: 'No reports to display',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/ReportsGrid.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const {render, html} = LitHtml;
+
+export interface ReportsGridData {
+  reports: Protocol.Network.ReportingApiReport[];
+}
+
+export class ReportsGrid extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-resources-reports-grid`;
+
+  private readonly shadow = this.attachShadow({mode: 'open'});
+  private reports: Protocol.Network.ReportingApiReport[] = [];
+  private protocolMonitorExperimentEnabled = false;
+
+  connectedCallback(): void {
+    this.shadow.adoptedStyleSheets = [reportingApiGridStyles];
+    this.protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocolMonitor');
+    this.render();
+  }
+
+  set data(data: ReportsGridData) {
+    this.reports = data.reports;
+    this.render();
+  }
+
+  private render(): void {
+    const reportsGridData: DataGrid.DataGridController.DataGridControllerData = {
+      columns: [
+        {
+          id: 'url',
+          title: i18n.i18n.lockedString('URL'),
+          widthWeighting: 30,
+          hideable: false,
+          visible: true,
+        },
+        {
+          id: 'type',
+          title: i18n.i18n.lockedString('Type'),
+          widthWeighting: 10,
+          hideable: false,
+          visible: true,
+        },
+        {
+          id: 'status',
+          title: i18n.i18n.lockedString('Status'),
+          widthWeighting: 10,
+          hideable: false,
+          visible: true,
+        },
+        {
+          id: 'destination',
+          title: i18n.i18n.lockedString('Destination'),
+          widthWeighting: 10,
+          hideable: false,
+          visible: true,
+        },
+        {
+          id: 'timestamp',
+          title: i18n.i18n.lockedString('Timestamp'),
+          widthWeighting: 20,
+          hideable: false,
+          visible: true,
+        },
+        {
+          id: 'body',
+          title: i18n.i18n.lockedString('Body'),
+          widthWeighting: 20,
+          hideable: false,
+          visible: true,
+        },
+      ],
+      rows: this.buildReportRows(),
+    };
+
+    if (this.protocolMonitorExperimentEnabled) {
+      reportsGridData.columns.unshift(
+          {id: 'id', title: 'ID', widthWeighting: 30, hideable: false, visible: true},
+      );
+    }
+
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    render(html`
+      <div class="reporting-container">
+        <div class="reporting-header">Reports</div>
+        ${this.reports.length > 0 ? html`
+          <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
+              reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
+          </${DataGrid.DataGridController.DataGridController.litTagName}>
+        ` : html`
+          <div class="reporting-placeholder">
+            <div>${i18nString(UIStrings.noReportsToDisplay)}</div>
+          </div>
+        `}
+      </div>
+    `, this.shadow);
+    // clang-format on
+  }
+
+  private buildReportRows(): DataGrid.DataGridUtils.Row[] {
+    return this.reports.map(report => ({
+                              cells: [
+                                {columnId: 'id', value: report.id},
+                                {columnId: 'url', value: report.initiatorUrl},
+                                {columnId: 'type', value: report.type},
+                                {columnId: 'status', value: report.status},
+                                {columnId: 'destination', value: report.destination},
+                                {columnId: 'timestamp', value: new Date(report.timestamp * 1000).toLocaleString()},
+                                {columnId: 'body', value: JSON.stringify(report.body)},
+                              ],
+                            }));
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-resources-reports-grid', ReportsGrid);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-resources-reports-grid': ReportsGrid;
+  }
+}

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

@@ -2,16 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as EndpointsGrid from './EndpointsGrid.js';
 import * as FrameDetailsView from './FrameDetailsView.js';
 import * as OriginTrialTreeView from './OriginTrialTreeView.js';
-import * as ReportingApiView from './ReportingApiView.js';
+import * as ReportsGrid from './ReportsGrid.js';
 import * as StackTrace from './StackTrace.js';
 import * as TrustTokensView from './TrustTokensView.js';
 
 export {
+  EndpointsGrid,
   FrameDetailsView,
   OriginTrialTreeView,
-  ReportingApiView,
+  ReportsGrid,
   StackTrace,
   TrustTokensView,
 };

package/front_end/panels/application/components/reportingApiGrid.css

@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+
+:host {
+  overflow: auto;
+  height: 100%;
+}
+
+.reporting-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.reporting-header {
+  font-size: 15px;
+  background-color: var(--color-background-elevation-1);
+  padding: 1px 4px;
+}
+
+.reporting-placeholder {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+devtools-data-grid-controller {
+  border: 1px solid var(--color-details-hairline);
+}

package/front_end/panels/application/reportingApiReportsView.css

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}

package/front_end/panels/console/ConsoleView.ts

@@ -93,6 +93,10 @@ const UIStrings = {
   */
   groupSimilarMessagesInConsole: 'Group similar messages in console',
   /**
+  *@description Title of a setting under the Console category that can be invoked through the Command Menu
+  */
+  showCorsErrorsInConsole: 'Show `CORS` errors in console',
+  /**
   * @description Tooltip for the the console sidebar toggle in the Console panel. Command to
   * open/show the sidebar.
   */
@@ -257,6 +261,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
   private readonly showSettingsPaneButton: UI.Toolbar.ToolbarSettingToggle;
   private readonly progressToolbarItem: UI.Toolbar.ToolbarItem;
   private readonly groupSimilarSetting: Common.Settings.Setting<boolean>;
+  private readonly showCorsErrorsSetting: Common.Settings.Setting<boolean>;
   private readonly preserveLogCheckbox: UI.Toolbar.ToolbarSettingCheckbox;
   private readonly hideNetworkMessagesCheckbox: UI.Toolbar.ToolbarSettingCheckbox;
   private readonly timestampsSetting: Common.Settings.Setting<unknown>;
@@ -366,6 +371,13 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     this.groupSimilarSetting.addChangeListener(() => this.updateMessageList());
     const groupSimilarToggle = new UI.Toolbar.ToolbarSettingCheckbox(
         this.groupSimilarSetting, i18nString(UIStrings.groupSimilarMessagesInConsole));
+    this.showCorsErrorsSetting = Common.Settings.Settings.instance().moduleSetting('consoleShowsCorsErrors');
+    this.showCorsErrorsSetting.addChangeListener(() => {
+      Host.userMetrics.showCorsErrorsSettingChanged(this.showCorsErrorsSetting.get());
+      this.updateMessageList();
+    });
+    const showCorsErrorsToggle = new UI.Toolbar.ToolbarSettingCheckbox(
+        this.showCorsErrorsSetting, i18nString(UIStrings.showCorsErrorsInConsole));
 
     const toolbar = new UI.Toolbar.Toolbar('console-main-toolbar', this.consoleToolbarContainer);
     toolbar.makeWrappable(true);
@@ -428,6 +440,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     settingsToolbarLeft.appendToolbarItem(this.preserveLogCheckbox);
     settingsToolbarLeft.appendToolbarItem(filterByExecutionContextCheckbox);
     settingsToolbarLeft.appendToolbarItem(groupSimilarToggle);
+    settingsToolbarLeft.appendToolbarItem(showCorsErrorsToggle);
 
     const settingsToolbarRight = new UI.Toolbar.Toolbar('', settingsPane.element);
     settingsToolbarRight.makeVertical();
@@ -862,6 +875,10 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
   }
 
   private appendMessageToEnd(viewMessage: ConsoleViewMessage, preventCollapse?: boolean): void {
+    if (viewMessage.consoleMessage().category === Protocol.Log.LogEntryCategory.Cors &&
+        !this.showCorsErrorsSetting.get()) {
+      return;
+    }
     if (!this.shouldMessageBeVisible(viewMessage)) {
       this.hiddenByFilterCount++;
       return;