chrome-devtools-frontend 1.0.998281 → 1.0.999791

package/front_end/panels/application/IndexedDBViews.ts

@@ -28,14 +28,17 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import indexedDBViewsStyles from './indexedDBViews.css.js';
 import * as i18n from '../../core/i18n/i18n.js';
+
+import indexedDBViewsStyles from './indexedDBViews.css.js';
+
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {Database, DatabaseId, Entry, Index, IndexedDBModel, ObjectStore, ObjectStoreMetadata} from './IndexedDBModel.js';
+import type {
+  Database, DatabaseId, Entry, Index, IndexedDBModel, ObjectStore, ObjectStoreMetadata} from './IndexedDBModel.js';
 
 const UIStrings = {
   /**

package/front_end/panels/console/ConsoleView.ts

@@ -56,7 +56,15 @@ import {ConsoleFilter, FilterType} from './ConsoleFilter.js';
 import {ConsolePinPane} from './ConsolePinPane.js';
 import {ConsolePrompt, Events as ConsolePromptEvents} from './ConsolePrompt.js';
 import {ConsoleSidebar, Events} from './ConsoleSidebar.js';
-import {ConsoleCommand, ConsoleCommandResult, ConsoleGroupViewMessage, ConsoleTableMessageView, ConsoleViewMessage, getMessageForElement, MaxLengthForLinks} from './ConsoleViewMessage.js';
+import {
+  ConsoleCommand,
+  ConsoleCommandResult,
+  ConsoleGroupViewMessage,
+  ConsoleTableMessageView,
+  ConsoleViewMessage,
+  getMessageForElement,
+  MaxLengthForLinks,
+} from './ConsoleViewMessage.js';
 
 import type {ConsoleViewportElement, ConsoleViewportProvider} from './ConsoleViewport.js';
 import {ConsoleViewport} from './ConsoleViewport.js';

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -14,7 +14,9 @@ import * as UI from '../../ui/legacy/legacy.js';
 import type * as Protocol from '../../generated/protocol.js';
 
 import cssOverviewCompletedViewStyles from './cssOverviewCompletedView.css.js';
-import type {OverviewController, PopulateNodesEvent, PopulateNodesEventNodes, PopulateNodesEventNodeTypes} from './CSSOverviewController.js';
+import type {
+  OverviewController, PopulateNodesEvent, PopulateNodesEventNodes, PopulateNodesEventNodeTypes} from
+  './CSSOverviewController.js';
 import {Events as CSSOverViewControllerEvents} from './CSSOverviewController.js';
 import {CSSOverviewSidebarPanel, SidebarEvents} from './CSSOverviewSidebarPanel.js';
 import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';

package/front_end/panels/elements/PropertiesWidget.ts

@@ -212,4 +212,3 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     this.registerCSSFiles([propertiesWidgetStyles]);
   }
 }
-

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -61,7 +61,13 @@ import {StylePropertyHighlighter} from './StylePropertyHighlighter.js';
 import stylesSidebarPaneStyles from './stylesSidebarPane.css.js';
 
 import type {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
-import {StylePropertiesSection, BlankStylePropertiesSection, KeyframePropertiesSection, HighlightPseudoStylePropertiesSection} from './StylePropertiesSection.js';
+import {
+  StylePropertiesSection,
+  BlankStylePropertiesSection,
+  KeyframePropertiesSection,
+  HighlightPseudoStylePropertiesSection,
+} from './StylePropertiesSection.js';
+
 import * as LayersWidget from './LayersWidget.js';
 
 const UIStrings = {

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -399,14 +399,16 @@ export const Presets: Preset[] = [
     title: i18nLazyString(UIStrings.performance),
     description: i18nLazyString(UIStrings.howLongDoesThisAppTakeToShow),
     plugin: false,
+    supportedModes: ['navigation', 'timespan', 'snapshot'],
   },
   {
     setting: Common.Settings.Settings.instance().createSetting(
-        'lighthouse.cat_pwa', true, Common.Settings.SettingStorageType.Synced),
-    configID: 'pwa',
-    title: i18nLazyString(UIStrings.progressiveWebApp),
-    description: i18nLazyString(UIStrings.doesThisPageMeetTheStandardOfA),
+        'lighthouse.cat_a11y', true, Common.Settings.SettingStorageType.Synced),
+    configID: 'accessibility',
+    title: i18nLazyString(UIStrings.accessibility),
+    description: i18nLazyString(UIStrings.isThisPageUsableByPeopleWith),
     plugin: false,
+    supportedModes: ['navigation', 'snapshot'],
   },
   {
     setting: Common.Settings.Settings.instance().createSetting(
@@ -415,14 +417,7 @@ export const Presets: Preset[] = [
     title: i18nLazyString(UIStrings.bestPractices),
     description: i18nLazyString(UIStrings.doesThisPageFollowBestPractices),
     plugin: false,
-  },
-  {
-    setting: Common.Settings.Settings.instance().createSetting(
-        'lighthouse.cat_a11y', true, Common.Settings.SettingStorageType.Synced),
-    configID: 'accessibility',
-    title: i18nLazyString(UIStrings.accessibility),
-    description: i18nLazyString(UIStrings.isThisPageUsableByPeopleWith),
-    plugin: false,
+    supportedModes: ['navigation', 'timespan', 'snapshot'],
   },
   {
     setting: Common.Settings.Settings.instance().createSetting(
@@ -431,6 +426,16 @@ export const Presets: Preset[] = [
     title: i18nLazyString(UIStrings.seo),
     description: i18nLazyString(UIStrings.isThisPageOptimizedForSearch),
     plugin: false,
+    supportedModes: ['navigation', 'snapshot'],
+  },
+  {
+    setting: Common.Settings.Settings.instance().createSetting(
+        'lighthouse.cat_pwa', true, Common.Settings.SettingStorageType.Synced),
+    configID: 'pwa',
+    title: i18nLazyString(UIStrings.progressiveWebApp),
+    description: i18nLazyString(UIStrings.doesThisPageMeetTheStandardOfA),
+    plugin: false,
+    supportedModes: ['navigation'],
   },
   {
     setting: Common.Settings.Settings.instance().createSetting(
@@ -439,6 +444,7 @@ export const Presets: Preset[] = [
     configID: 'lighthouse-plugin-publisher-ads',
     title: i18nLazyString(UIStrings.publisherAds),
     description: i18nLazyString(UIStrings.isThisPageOptimizedForAdSpeedAnd),
+    supportedModes: ['navigation'],
   },
 ];
 
@@ -567,6 +573,7 @@ export interface Preset {
   title: () => Common.UIString.LocalizedString;
   description: () => Common.UIString.LocalizedString;
   plugin: boolean;
+  supportedModes: string[];
 }
 export interface RuntimeSetting {
   setting: Common.Settings.Setting<string|boolean>;

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -12,7 +12,8 @@ import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Emulation from '../emulation/emulation.js';
 
-import type {AuditProgressChangedEvent, PageAuditabilityChangedEvent, PageWarningsChangedEvent} from './LighthouseController.js';
+import type {
+  AuditProgressChangedEvent, PageAuditabilityChangedEvent, PageWarningsChangedEvent} from './LighthouseController.js';
 import {Events, LighthouseController} from './LighthouseController.js';
 import lighthousePanelStyles from './lighthousePanel.css.js';
 import type {LighthouseRun} from './LighthouseProtocolService.js';
@@ -174,7 +175,7 @@ export class LighthousePanel extends UI.Panel.Panel {
       return;
     }
 
-    this.startView.updateMode();
+    this.startView.refresh();
 
     this.unauditableExplanation = evt.data.helpText;
     this.startView.setUnauditableExplanation(evt.data.helpText);

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -102,20 +102,26 @@ export class StartView extends UI.Widget.Widget {
     }
   }
 
-  protected populateFormControls(fragment: UI.Fragment.Fragment): void {
+  protected populateFormControls(fragment: UI.Fragment.Fragment, mode?: string): void {
     // Populate the device type
     const deviceTypeFormElements = fragment.$('device-type-form-elements');
     this.populateRuntimeSettingAsRadio('lighthouse.device_type', i18nString(UIStrings.device), deviceTypeFormElements);
 
     // Populate the categories
-    const categoryFormElements = fragment.$('categories-form-elements');
-    const pluginFormElements = fragment.$('plugins-form-elements');
+    const categoryFormElements = fragment.$('categories-form-elements') as HTMLElement;
+    categoryFormElements.textContent = '';
+    const pluginFormElements = fragment.$('plugins-form-elements') as HTMLElement;
+    pluginFormElements.textContent = '';
     for (const preset of Presets) {
       const formElements = preset.plugin ? pluginFormElements : categoryFormElements;
       preset.setting.setTitle(preset.title());
       const checkbox = new UI.Toolbar.ToolbarSettingCheckbox(preset.setting, preset.description());
       const row = formElements.createChild('div', 'vbox lighthouse-launcher-row');
       row.appendChild(checkbox.element);
+      if (mode && !preset.supportedModes.includes(mode)) {
+        checkbox.setEnabled(false);
+        checkbox.setIndeterminate(true);
+      }
     }
     UI.ARIAUtils.markAsGroup(categoryFormElements);
     UI.ARIAUtils.setAccessibleName(categoryFormElements, i18nString(UIStrings.categories));
@@ -181,7 +187,7 @@ export class StartView extends UI.Widget.Widget {
     this.contentElement.style.overflow = 'auto';
   }
 
-  updateMode(): void {
+  refresh(): void {
     // Do nothing in default case.
   }
 

package/front_end/panels/lighthouse/LighthouseStartViewFR.ts

@@ -46,6 +46,52 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class StartViewFR extends StartView {
   protected render(): void {
     super.render();
+    this.refresh();
+  }
+
+  private createStartButton(mode: string): HTMLButtonElement {
+    let buttonLabel: Platform.UIString.LocalizedString;
+    let callback: () => void;
+
+    if (mode === 'timespan') {
+      buttonLabel = i18nString(UIStrings.startTimespan);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseTimespanStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else if (mode === 'snapshot') {
+      buttonLabel = i18nString(UIStrings.analyzeSnapshot);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else {
+      buttonLabel = i18nString(UIStrings.analyzeNavigation);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    }
+
+    return UI.UIUtils.createTextButton(
+        buttonLabel,
+        callback,
+        /* className */ '',
+        /* primary */ true,
+    );
+  }
+
+  refresh(): void {
+    const {mode} = this.controller.getFlags();
+
+    this.startButton = this.createStartButton(mode);
+
     const fragment = UI.Fragment.Fragment.build`
 <form class="lighthouse-start-view-fr">
   <header class="hbox">
@@ -82,7 +128,7 @@ export class StartViewFR extends StartView {
     this.warningText = fragment.$('warning-text');
 
     // The previous radios are removed later and don't exist on the new fragment yet.
-    this.populateFormControls(fragment);
+    this.populateFormControls(fragment, mode);
 
     // Populate the Lighthouse mode
     const modeFormElements = fragment.$('mode-form-elements');
@@ -90,7 +136,9 @@ export class StartViewFR extends StartView {
 
     this.contentElement.textContent = '';
     this.contentElement.append(fragment.element());
-    this.updateMode();
+
+    // Ensure the correct layout is used after refresh.
+    this.onResize();
   }
 
   onResize(): void {
@@ -107,50 +155,4 @@ export class StartViewFR extends StartView {
       optionsEl.classList.toggle('narrow', useNarrowLayout);
     }
   }
-
-  updateMode(): void {
-    const {mode} = this.controller.getFlags();
-
-    let buttonLabel: Platform.UIString.LocalizedString;
-    let callback: () => void;
-
-    if (mode === 'timespan') {
-      buttonLabel = i18nString(UIStrings.startTimespan);
-      callback = (): void => {
-        this.controller.dispatchEventToListeners(
-            Events.RequestLighthouseTimespanStart,
-            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
-        );
-      };
-    } else if (mode === 'snapshot') {
-      buttonLabel = i18nString(UIStrings.analyzeSnapshot);
-      callback = (): void => {
-        this.controller.dispatchEventToListeners(
-            Events.RequestLighthouseStart,
-            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
-        );
-      };
-    } else {
-      buttonLabel = i18nString(UIStrings.analyzeNavigation);
-      callback = (): void => {
-        this.controller.dispatchEventToListeners(
-            Events.RequestLighthouseStart,
-            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
-        );
-      };
-    }
-
-    this.startButton = UI.UIUtils.createTextButton(
-        buttonLabel,
-        callback,
-        /* className */ '',
-        /* primary */ true,
-    );
-
-    const startButtonContainerEl = this.contentElement.querySelector('.lighthouse-start-button-container');
-    if (startButtonContainerEl) {
-      startButtonContainerEl.textContent = '';
-      startButtonContainerEl.appendChild(this.startButton);
-    }
-  }
 }

package/front_end/panels/lighthouse/LighthouseTimespanView.ts

@@ -71,13 +71,20 @@ export class TimespanView extends UI.Dialog.Dialog {
     const dialogRoot = UI.Utils.createShadowRootWithCoreStyles(
         this.contentElement, {cssFile: [lighthouseDialogStyles], delegatesFocus: undefined});
 
-    this.endButton = UI.UIUtils.createTextButton(i18nString(UIStrings.endTimespan), this.endTimespan.bind(this));
+    this.endButton = UI.UIUtils.createTextButton(
+        i18nString(UIStrings.endTimespan),
+        this.endTimespan.bind(this),
+        undefined,
+        true,
+    );
     const cancelButton = UI.UIUtils.createTextButton(i18nString(UIStrings.cancel), this.cancel.bind(this));
     const fragment = UI.Fragment.Fragment.build`
   <div class="lighthouse-view vbox">
   <h2 $="status-header"></h2>
-  ${this.endButton}
+  <div class="lighthouse-action-buttons hbox">
   ${cancelButton}
+  ${this.endButton}
+  </div>
   </div>
   `;
 

package/front_end/panels/lighthouse/lighthouseDialog.css

@@ -117,3 +117,8 @@
   display: block;
   margin-top: 5px;
 }
+
+.lighthouse-action-buttons {
+  align-self: end;
+  column-gap: 8px;
+}

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -170,16 +170,16 @@ input[type="radio"]:focus {
 
 .lighthouse-options {
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: 1fr 1fr;
   grid-template-rows: auto auto;
 }
 
 .lighthouse-options.narrow {
-  grid-template-columns: auto;
+  grid-template-columns: 1fr;
   grid-template-rows: auto auto auto;
 }
 
 .lighthouse-options.wide {
-  grid-template-columns: auto auto auto;
+  grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: auto;
 }

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -11,7 +11,9 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {MobileThrottlingSelector} from './MobileThrottlingSelector.js';
 import {NetworkThrottlingSelector} from './NetworkThrottlingSelector.js';
 
-import type {Conditions, ConditionsList, MobileThrottlingConditionsGroup, NetworkThrottlingConditionsGroup} from './ThrottlingPresets.js';
+import type {
+  Conditions, ConditionsList, MobileThrottlingConditionsGroup, NetworkThrottlingConditionsGroup} from
+  './ThrottlingPresets.js';
 import {ThrottlingPresets} from './ThrottlingPresets.js';
 
 const UIStrings = {

package/front_end/panels/network/NetworkLogView.ts

@@ -57,7 +57,11 @@ import {Events, NetworkGroupNode, NetworkRequestNode} from './NetworkDataGridNod
 import {NetworkFrameGrouper} from './NetworkFrameGrouper.js';
 import {NetworkLogViewColumns} from './NetworkLogViewColumns.js';
 import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
-import {NetworkTimeBoundary, NetworkTransferDurationCalculator, NetworkTransferTimeCalculator} from './NetworkTimeCalculator.js';
+import {
+  NetworkTimeBoundary,
+  NetworkTransferDurationCalculator,
+  NetworkTransferTimeCalculator,
+} from './NetworkTimeCalculator.js';
 
 const UIStrings = {
   /**

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -14,7 +14,9 @@ import type {NetworkNode} from './NetworkDataGridNode.js';
 import {NetworkRequestNode} from './NetworkDataGridNode.js';
 import type {NetworkLogView} from './NetworkLogView.js';
 import {NetworkManageCustomHeadersView} from './NetworkManageCustomHeadersView.js';
-import type {NetworkTimeCalculator, NetworkTransferDurationCalculator, NetworkTransferTimeCalculator} from './NetworkTimeCalculator.js';
+import type {
+  NetworkTimeCalculator, NetworkTransferDurationCalculator, NetworkTransferTimeCalculator} from
+  './NetworkTimeCalculator.js';
 import {NetworkWaterfallColumn} from './NetworkWaterfallColumn.js';
 import {RequestInitiatorView} from './RequestInitiatorView.js';
 

package/front_end/panels/network/RequestTimingView.ts

@@ -102,7 +102,7 @@ const UIStrings = {
   /**
   *@description Text in Request Timing View of the Network panel
   */
-  waitingTtfb: 'Waiting (TTFB)',
+  waitingTtfb: 'Waiting for server response',
   /**
   *@description Text in Signed Exchange Info View of the Network panel
   */

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -38,7 +38,14 @@ import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type {HeapSnapshotGridNode} from './HeapSnapshotGridNodes.js';
-import {AllocationGridNode, HeapSnapshotConstructorNode, HeapSnapshotGenericObjectNode, HeapSnapshotRetainingObjectNode, HeapSnapshotObjectNode, HeapSnapshotDiffNode} from './HeapSnapshotGridNodes.js';
+import {
+  AllocationGridNode,
+  HeapSnapshotConstructorNode,
+  HeapSnapshotGenericObjectNode,
+  HeapSnapshotRetainingObjectNode,
+  HeapSnapshotObjectNode,
+  HeapSnapshotDiffNode,
+} from './HeapSnapshotGridNodes.js';
 import type {HeapSnapshotProxy} from './HeapSnapshotProxy.js';
 import type {HeapProfileHeader} from './HeapSnapshotView.js';
 import type {DataDisplayDelegate} from './ProfileHeader.js';

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -38,7 +38,9 @@ import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type {ChildrenProvider} from './ChildrenProvider.js';
-import type {AllocationDataGrid, HeapSnapshotConstructorsDataGrid, HeapSnapshotDiffDataGrid, HeapSnapshotSortableDataGrid} from './HeapSnapshotDataGrids.js';
+import type {
+  AllocationDataGrid, HeapSnapshotConstructorsDataGrid, HeapSnapshotDiffDataGrid, HeapSnapshotSortableDataGrid} from
+  './HeapSnapshotDataGrids.js';
 import {HeapSnapshotSortableDataGridEvents} from './HeapSnapshotDataGrids.js';
 import type {HeapSnapshotProviderProxy, HeapSnapshotProxy} from './HeapSnapshotProxy.js';
 import type {DataDisplayDelegate} from './ProfileHeader.js';

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -44,7 +44,14 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type {HeapSnapshotSortableDataGrid} from './HeapSnapshotDataGrids.js';
-import {AllocationDataGrid, HeapSnapshotSortableDataGridEvents, HeapSnapshotConstructorsDataGrid, HeapSnapshotDiffDataGrid, HeapSnapshotRetainmentDataGrid, HeapSnapshotContainmentDataGrid} from './HeapSnapshotDataGrids.js';
+import {
+  AllocationDataGrid,
+  HeapSnapshotSortableDataGridEvents,
+  HeapSnapshotConstructorsDataGrid,
+  HeapSnapshotDiffDataGrid,
+  HeapSnapshotRetainmentDataGrid,
+  HeapSnapshotContainmentDataGrid,
+} from './HeapSnapshotDataGrids.js';
 import type {AllocationGridNode, HeapSnapshotGridNode} from './HeapSnapshotGridNodes.js';
 import {HeapSnapshotGenericObjectNode} from './HeapSnapshotGridNodes.js';
 import type {HeapSnapshotProxy} from './HeapSnapshotProxy.js';
@@ -53,7 +60,12 @@ import type {IdsRangeChangedEvent} from './HeapTimelineOverview.js';
 import {HeapTimelineOverview, Events, Samples} from './HeapTimelineOverview.js';
 import * as ModuleUIStrings from './ModuleUIStrings.js';
 import type {DataDisplayDelegate} from './ProfileHeader.js';
-import {Events as ProfileHeaderEvents, ProfileEvents as ProfileTypeEvents, ProfileHeader, ProfileType} from './ProfileHeader.js';
+import {
+  Events as ProfileHeaderEvents,
+  ProfileEvents as ProfileTypeEvents,
+  ProfileHeader,
+  ProfileType,
+} from './ProfileHeader.js';
 import {ProfileSidebarTreeElement} from './ProfileSidebarTreeElement.js';
 import {instance} from './ProfileTypeRegistry.js';
 

package/front_end/panels/sources/SourcesPanel.ts

@@ -45,7 +45,13 @@ import {DebuggerPausedMessage} from './DebuggerPausedMessage.js';
 import sourcesPanelStyles from './sourcesPanel.css.js';
 
 import type {NavigatorView} from './NavigatorView.js';
-import {ContentScriptsNavigatorView, FilesNavigatorView, NetworkNavigatorView, OverridesNavigatorView, SnippetsNavigatorView} from './SourcesNavigator.js';
+import {
+  ContentScriptsNavigatorView,
+  FilesNavigatorView,
+  NetworkNavigatorView,
+  OverridesNavigatorView,
+  SnippetsNavigatorView,
+} from './SourcesNavigator.js';
 import {Events, SourcesView} from './SourcesView.js';
 import {ThreadsSidebarPane} from './ThreadsSidebarPane.js';
 import {UISourceCodeFrame} from './UISourceCodeFrame.js';

package/front_end/panels/timeline/TimelineController.ts

@@ -90,7 +90,7 @@ export class TimelineController implements SDK.TargetManager.SDKModelObserver<SD
     // 'disabled-by-default-v8.cpu_profiler'
     //   └ default: on, option: enableJSSampling
     const categoriesArray = [
-      '-*',
+      Root.Runtime.experiments.isEnabled('timelineShowAllEvents') ? '*' : '-*',
       TimelineModel.TimelineModel.TimelineModelImpl.Category.Console,
       TimelineModel.TimelineModel.TimelineModelImpl.Category.UserTiming,
       'devtools.timeline',

package/front_end/panels/timeline/TimelineEventOverview.ts

@@ -53,10 +53,6 @@ const UIStrings = {
   /**
   *@description Text in Timeline Event Overview of the Performance panel
   */
-  fps: 'FPS',
-  /**
-  *@description Text in Timeline Event Overview of the Performance panel
-  */
   heap: 'HEAP',
   /**
   *@description Heap size label text content in Timeline Event Overview of the Performance panel
@@ -485,62 +481,6 @@ export class TimelineFilmStripOverview extends TimelineEventOverview {
   static readonly Padding = 2;
 }
 
-export class TimelineEventOverviewFrames extends TimelineEventOverview {
-  constructor() {
-    super('framerate', i18nString(UIStrings.fps));
-  }
-
-  update(): void {
-    super.update();
-    if (!this.model) {
-      return;
-    }
-    const frames = this.model.frames();
-    if (!frames.length) {
-      return;
-    }
-    const height = this.height();
-    const padding = Number(window.devicePixelRatio);
-    const baseFrameDurationMs = 1e3 / 60;
-    const visualHeight = height - 2 * padding;
-    const timeOffset = this.model.timelineModel().minimumRecordTime();
-    const timeSpan = this.model.timelineModel().maximumRecordTime() - timeOffset;
-    const scale = this.width() / timeSpan;
-    const baseY = height - padding;
-    const ctx = this.context();
-    const bottomY = baseY + 10 * window.devicePixelRatio;
-    let x = 0;
-    let y: number = bottomY;
-
-    const lineWidth = window.devicePixelRatio;
-    const offset = lineWidth & 1 ? 0.5 : 0;
-    const tickDepth = 1.5 * window.devicePixelRatio;
-    ctx.beginPath();
-    ctx.moveTo(0, y);
-    for (let i = 0; i < frames.length; ++i) {
-      const frame = frames[i];
-      x = Math.round((frame.startTime - timeOffset) * scale) + offset;
-      ctx.lineTo(x, y);
-      ctx.lineTo(x, y + tickDepth);
-      y = frame.idle ? bottomY :
-                       Math.round(baseY - visualHeight * Math.min(baseFrameDurationMs / frame.duration, 1)) - offset;
-      ctx.lineTo(x, y + tickDepth);
-      ctx.lineTo(x, y);
-    }
-    const lastFrame = frames[frames.length - 1];
-    if (lastFrame) {
-      x = Math.round((lastFrame.startTime + lastFrame.duration - timeOffset) * scale) + offset;
-    }
-    ctx.lineTo(x, y);
-    ctx.lineTo(x, bottomY);
-    ctx.fillStyle = 'hsl(110, 50%, 88%)';
-    ctx.strokeStyle = 'hsl(110, 50%, 60%)';
-    ctx.lineWidth = lineWidth;
-    ctx.fill();
-    ctx.stroke();
-  }
-}
-
 export class TimelineEventOverviewMemory extends TimelineEventOverview {
   private heapSizeLabel: HTMLElement;
   constructor() {

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -131,12 +131,6 @@ const UIStrings = {
   occurrencesS: 'Occurrences: {PH1}',
   /**
   *@description Text in Timeline Flame Chart Data Provider of the Performance panel
-  *@example {10ms} PH1
-  *@example {100.0} PH2
-  */
-  sFfps: '{PH1} ~ {PH2} fps',
-  /**
-  *@description Text in Timeline Flame Chart Data Provider of the Performance panel
   */
   idleFrame: 'Idle Frame',
   /**
@@ -1005,9 +999,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
     } else if (type === EntryType.Frame) {
       const frame = (this.entryData[entryIndex] as TimelineModel.TimelineFrameModel.TimelineFrame);
-      time = i18nString(
-          UIStrings.sFfps,
-          {PH1: i18n.TimeUtilities.preciseMillisToString(frame.duration, 1), PH2: (1000 / frame.duration).toFixed(0)});
+      time = i18n.TimeUtilities.preciseMillisToString(frame.duration, 1);
 
       if (frame.idle) {
         title = i18nString(UIStrings.idleFrame);

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -17,7 +17,10 @@ import type {PerformanceModel, WindowChangedEvent} from './PerformanceModel.js';
 import {Events as PerformanceModelEvents} from './PerformanceModel.js';
 import {TimelineDetailsView} from './TimelineDetailsView.js';
 import {TimelineRegExp} from './TimelineFilters.js';
-import {Events as TimelineFlameChartDataProviderEvents, TimelineFlameChartDataProvider} from './TimelineFlameChartDataProvider.js';
+import {
+  Events as TimelineFlameChartDataProviderEvents,
+  TimelineFlameChartDataProvider,
+} from './TimelineFlameChartDataProvider.js';
 import {TimelineFlameChartNetworkDataProvider} from './TimelineFlameChartNetworkDataProvider.js';
 import type {TimelineModeViewDelegate} from './TimelinePanel.js';
 import {TimelineSelection} from './TimelinePanel.js';

package/front_end/panels/timeline/TimelineHistoryManager.ts

@@ -10,7 +10,11 @@ import * as UI from '../../ui/legacy/legacy.js';
 import timelineHistoryManagerStyles from './timelineHistoryManager.css.js';
 
 import type {PerformanceModel} from './PerformanceModel.js';
-import {TimelineEventOverviewCPUActivity, TimelineEventOverviewFrames, TimelineEventOverviewNetwork, TimelineEventOverviewResponsiveness} from './TimelineEventOverview.js';
+import {
+  TimelineEventOverviewCPUActivity,
+  TimelineEventOverviewNetwork,
+  TimelineEventOverviewResponsiveness,
+} from './TimelineEventOverview.js';
 
 const UIStrings = {
   /**
@@ -81,7 +85,6 @@ export class TimelineHistoryManager {
 
     this.allOverviews = [
       {constructor: TimelineEventOverviewResponsiveness, height: 3},
-      {constructor: TimelineEventOverviewFrames, height: 16},
       {constructor: TimelineEventOverviewCPUActivity, height: 20},
       {constructor: TimelineEventOverviewNetwork, height: 8},
     ];