RPP: remove annotations experiment

Keeps the feature, but removes the experiment flag (which had been
enabled by default for all users).

Fixed: 377234926
Change-Id: Ib89e7d93b63f3841804aeb382a5af425358b512e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6055037
Reviewed-by: Nancy Li <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>
Commit-Queue: Nancy Li <[email protected]>

Author: jackfranklin

front_end/core/host/UserMetrics.ts

@@ -1013,7 +1013,6 @@ export enum DevtoolsExperiments {
   'timeline-enhanced-traces' = 90,
   'timeline-compiled-sources' = 91,
   'timeline-debug-mode' = 93,
-  'perf-panel-annotations' = 94,
   'timeline-rpp-sidebar' = 95,
   'timeline-observations' = 96,
   'timeline-server-timings' = 98,

front_end/core/root/Runtime.ts

@@ -293,7 +293,6 @@ export const enum ExperimentName {
   NETWORK_PANEL_FILTER_BAR_REDESIGN = 'network-panel-filter-bar-redesign',
   AUTOFILL_VIEW = 'autofill-view',
   TIMELINE_SHOW_POST_MESSAGE_EVENTS = 'timeline-show-postmessage-events',
-  TIMELINE_ANNOTATIONS = 'perf-panel-annotations',
   TIMELINE_INSIGHTS = 'timeline-rpp-sidebar',
   TIMELINE_DEBUG_MODE = 'timeline-debug-mode',
   TIMELINE_OBSERVATIONS = 'timeline-observations',

front_end/entrypoints/main/MainImpl.ts

@@ -379,11 +379,6 @@ export class MainImpl {
         'Performance panel: show postMessage dispatch and handling flows',
     );
 
-    Root.Runtime.experiments.register(
-        Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS,
-        'Performance panel: enable annotations',
-    );
-
     Root.Runtime.experiments.register(
         Root.Runtime.ExperimentName.TIMELINE_INSIGHTS,
         'Performance panel: enable performance insights',
@@ -423,7 +418,6 @@ export class MainImpl {
       Root.Runtime.ExperimentName.AUTOFILL_VIEW,
       Root.Runtime.ExperimentName.TIMELINE_INSIGHTS,
       Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS,
-      Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS,
       Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN,
       Root.Runtime.ExperimentName.FLOATING_ENTRY_POINTS_FOR_AI_ASSISTANCE,
       ...(Root.Runtime.Runtime.queryParam('isChromeForTesting') ? ['protocol-monitor'] : []),

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -312,23 +312,22 @@ export class TimelineFlameChartView extends
     this.detailsSplitWidget.setSidebarWidget(this.detailsView);
     this.detailsSplitWidget.show(this.element);
 
+    // Event listeners for annotations.
     this.onMainAddEntryLabelAnnotation = this.onAddEntryLabelAnnotation.bind(this, this.mainDataProvider);
     this.onNetworkAddEntryLabelAnnotation = this.onAddEntryLabelAnnotation.bind(this, this.networkDataProvider);
     this.#onMainEntriesLinkAnnotationCreated = event =>
         this.onEntriesLinkAnnotationCreate(this.mainDataProvider, event.data.entryFromIndex);
     this.#onNetworkEntriesLinkAnnotationCreated = event =>
         this.onEntriesLinkAnnotationCreate(this.networkDataProvider, event.data.entryFromIndex);
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS)) {
-      this.mainFlameChart.addEventListener(
-          PerfUI.FlameChart.Events.ENTRY_LABEL_ANNOTATION_ADDED, this.onMainAddEntryLabelAnnotation, this);
-      this.networkFlameChart.addEventListener(
-          PerfUI.FlameChart.Events.ENTRY_LABEL_ANNOTATION_ADDED, this.onNetworkAddEntryLabelAnnotation, this);
+    this.mainFlameChart.addEventListener(
+        PerfUI.FlameChart.Events.ENTRY_LABEL_ANNOTATION_ADDED, this.onMainAddEntryLabelAnnotation, this);
+    this.networkFlameChart.addEventListener(
+        PerfUI.FlameChart.Events.ENTRY_LABEL_ANNOTATION_ADDED, this.onNetworkAddEntryLabelAnnotation, this);
 
-      this.mainFlameChart.addEventListener(
-          PerfUI.FlameChart.Events.ENTRIES_LINK_ANNOTATION_CREATED, this.#onMainEntriesLinkAnnotationCreated, this);
-      this.networkFlameChart.addEventListener(
-          PerfUI.FlameChart.Events.ENTRIES_LINK_ANNOTATION_CREATED, this.#onNetworkEntriesLinkAnnotationCreated, this);
-    }
+    this.mainFlameChart.addEventListener(
+        PerfUI.FlameChart.Events.ENTRIES_LINK_ANNOTATION_CREATED, this.#onMainEntriesLinkAnnotationCreated, this);
+    this.networkFlameChart.addEventListener(
+        PerfUI.FlameChart.Events.ENTRIES_LINK_ANNOTATION_CREATED, this.#onNetworkEntriesLinkAnnotationCreated, this);
 
     this.detailsView.addEventListener(TimelineTreeView.Events.TREE_ROW_HOVERED, node => {
       if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS)) {
@@ -910,30 +909,30 @@ export class TimelineFlameChartView extends
     this.delegate.select(selectionFromRangeMilliSeconds(
         Trace.Types.Timing.MilliSeconds(startTime), Trace.Types.Timing.MilliSeconds(endTime)));
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS)) {
-      const bounds = Trace.Helpers.Timing.traceWindowFromMilliSeconds(
-          Trace.Types.Timing.MilliSeconds(startTime),
-          Trace.Types.Timing.MilliSeconds(endTime),
-      );
+    // We need to check if the user is updating the range because they are
+    // creating a time range annotation.
+    const bounds = Trace.Helpers.Timing.traceWindowFromMilliSeconds(
+        Trace.Types.Timing.MilliSeconds(startTime),
+        Trace.Types.Timing.MilliSeconds(endTime),
+    );
 
-      // If the current time range annotation exists, the range selection
-      // for it is in progress and we need to update its bounds.
-      //
-      // When the range selection is finished, the current range is set to null.
-      // If the current selection is null, create a new time range annotations.
-      if (this.#timeRangeSelectionAnnotation) {
-        this.#timeRangeSelectionAnnotation.bounds = bounds;
-        ModificationsManager.activeManager()?.updateAnnotation(this.#timeRangeSelectionAnnotation);
-      } else {
-        this.#timeRangeSelectionAnnotation = {
-          type: 'TIME_RANGE',
-          label: '',
-          bounds,
-        };
-        // Before creating a new range, make sure to delete the empty ranges.
-        ModificationsManager.activeManager()?.deleteEmptyRangeAnnotations();
-        ModificationsManager.activeManager()?.createAnnotation(this.#timeRangeSelectionAnnotation);
-      }
+    // If the current time range annotation exists, the range selection
+    // for it is in progress and we need to update its bounds.
+    //
+    // When the range selection is finished, the current range is set to null.
+    // If the current selection is null, create a new time range annotations.
+    if (this.#timeRangeSelectionAnnotation) {
+      this.#timeRangeSelectionAnnotation.bounds = bounds;
+      ModificationsManager.activeManager()?.updateAnnotation(this.#timeRangeSelectionAnnotation);
+    } else {
+      this.#timeRangeSelectionAnnotation = {
+        type: 'TIME_RANGE',
+        label: '',
+        bounds,
+      };
+      // Before creating a new range, make sure to delete the empty ranges.
+      ModificationsManager.activeManager()?.deleteEmptyRangeAnnotations();
+      ModificationsManager.activeManager()?.createAnnotation(this.#timeRangeSelectionAnnotation);
     }
   }
 

front_end/panels/timeline/TimelinePanel.ts

@@ -679,7 +679,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   }
 
   #setActiveInsight(insight: TimelineComponents.Sidebar.ActiveInsight|null): void {
-    if (insight && this.#panelSidebarEnabled()) {
+    if (insight) {
       this.#splitWidget.showBoth();
     }
     this.#sideBar.setActiveInsight(insight);
@@ -974,20 +974,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     return checkboxItem;
   }
 
-  /**
-   * Users don't explicitly opt in to the sidebar, but if they opt into either
-   * Insights or Annotations, we will show the sidebar.
-   */
-  #panelSidebarEnabled(): boolean {
-    const sidebarEnabled = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS) ||
-        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS);
-    return sidebarEnabled;
-  }
   #addSidebarIconToToolbar(): void {
-    if (!this.#panelSidebarEnabled()) {
-      return;
-    }
-
     if (this.panelToolbar.hasItem(this.#sidebarToggleButton)) {
       return;
     }
@@ -1030,18 +1017,9 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       this.selectFileToLoad();
     });
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS)) {
-      this.saveButton = new UI.Toolbar.ToolbarMenuButton(
-          this.populateDownloadMenu.bind(this), true, true, 'timeline.save-to-file-more-options', 'download');
-      this.saveButton.setTitle(i18nString(UIStrings.saveProfile));
-    } else {
-      this.saveButton = new UI.Toolbar.ToolbarButton(
-          i18nString(UIStrings.saveProfile), 'download', undefined, 'timeline.save-to-file');
-      this.saveButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, _event => {
-        Host.userMetrics.actionTaken(Host.UserMetrics.Action.PerfPanelTraceExported);
-        void this.saveToFile();
-      });
-    }
+    this.saveButton = new UI.Toolbar.ToolbarMenuButton(
+        this.populateDownloadMenu.bind(this), true, true, 'timeline.save-to-file-more-options', 'download');
+    this.saveButton.setTitle(i18nString(UIStrings.saveProfile));
 
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ENHANCED_TRACES)) {
       this.saveButton.element.addEventListener('contextmenu', event => {
@@ -1278,9 +1256,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
     const traceEvents = this.#traceEngineModel.rawTraceEvents(this.#viewMode.traceIndex);
     const metadata = this.#traceEngineModel.metadata(this.#viewMode.traceIndex);
-    // Save modifications into the metadata if modifications experiment is on
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS) && metadata &&
-        addModifications) {
+
+    if (metadata && addModifications) {
       metadata.modifications = ModificationsManager.activeManager()?.toJSON();
     } else if (metadata) {
       delete metadata.modifications;
@@ -1990,7 +1967,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
    * We automatically show the sidebar in only 2 scenarios:
    * 1. The user has never seen it before, so we show it once to aid discovery
    * 2. The user had it open, and we hid it (for example, during recording), so now we need to bring it back.
-   * We also check that the experiments are enabled, else we reveal an entirely empty sidebar.
    */
   #showSidebarIfRequired(): void {
     if (Root.Runtime.Runtime.queryParam('disable-auto-performance-sidebar-reveal') !== null) {
@@ -1999,9 +1975,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
     const needToRestore = this.#restoreSidebarVisibilityOnTraceLoad;
     const userHasSeenSidebar = this.#sideBar.userHasOpenedSidebarOnce();
-    const experimentsEnabled = this.#panelSidebarEnabled();
 
-    if (experimentsEnabled && (!userHasSeenSidebar || needToRestore)) {
+    if (!userHasSeenSidebar || needToRestore) {
       this.#splitWidget.showBoth();
     }
     this.#restoreSidebarVisibilityOnTraceLoad = false;

front_end/panels/timeline/components/Sidebar.test.ts

@@ -28,7 +28,6 @@ describeWithEnvironment('Sidebar', () => {
 
   beforeEach(() => {
     enableFeatureForTest(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS);
-    enableFeatureForTest(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS);
   });
 
   it('renders with two tabs for insights & annotations', async function() {

front_end/panels/timeline/components/Sidebar.ts

@@ -77,11 +77,9 @@ export class SidebarWidget extends UI.Widget.VBox {
           SidebarTabs.INSIGHTS, 'Insights', this.#insightsView, undefined, undefined, false, false, 0,
           'timeline.insights-tab');
     }
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS)) {
-      this.#tabbedPane.appendTab(
-          SidebarTabs.ANNOTATIONS, 'Annotations', this.#annotationsView, undefined, undefined, false, false, 1,
-          'timeline.annotations-tab');
-    }
+    this.#tabbedPane.appendTab(
+        SidebarTabs.ANNOTATIONS, 'Annotations', this.#annotationsView, undefined, undefined, false, false, 1,
+        'timeline.annotations-tab');
 
     // Default the selected tab to Insights. In wasShown() we will change this
     // if this is a trace that has no insights.

front_end/testing/EnvironmentHelpers.ts

@@ -123,7 +123,6 @@ const REGISTERED_EXPERIMENTS = [
   'font-editor',
   Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN,
   Root.Runtime.ExperimentName.AUTOFILL_VIEW,
-  Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS,
   Root.Runtime.ExperimentName.TIMELINE_INSIGHTS,
   Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE,
   Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS,

front_end/ui/components/docs/performance_panel/basic.ts

@@ -102,9 +102,8 @@ const traceUrl = params.get('loadTimelineFromURL');
 const nodeMode = params.get('isNode');
 const isNodeMode = nodeMode === 'true' ? true : false;
 
-// These are both enabled by default in Chrome M131 and will be removed in M132.
+// This experiment is enabled by default in Chrome M131.
 Root.Runtime.experiments.setEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS, true);
-Root.Runtime.experiments.setEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS, true);
 
 const timeline = Timeline.TimelinePanel.TimelinePanel.instance({forceNew: true, isNode: isNodeMode});
 const container = document.getElementById('container');

front_end/ui/legacy/components/perf_ui/ChartViewport.ts

@@ -3,9 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../../core/common/common.js';
-import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
-import * as Root from '../../../../core/root/root.js';
 import * as Coordinator from '../../../components/render_coordinator/render_coordinator.js';
 import * as UI from '../../legacy.js';
 
@@ -33,7 +31,6 @@ export class ChartViewport extends UI.Widget.VBox {
   private vScrollElement: HTMLElement;
   private vScrollContent: HTMLElement;
   private readonly selectionOverlay: HTMLElement;
-  private selectedTimeSpanLabel: HTMLElement;
   private cursorElement: HTMLElement;
   private isDraggingInternal!: boolean;
   private totalHeight!: number;
@@ -59,8 +56,6 @@ export class ChartViewport extends UI.Widget.VBox {
 
   #config: Config;
 
-  #usingNewOverlayForTimeRange = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS);
-
   constructor(delegate: ChartViewportDelegate, config: Config) {
     super();
     this.#config = config;
@@ -89,17 +84,11 @@ export class ChartViewport extends UI.Widget.VBox {
     this.vScrollElement.addEventListener('scroll', this.onScroll.bind(this), false);
 
     this.selectionOverlay = this.contentElement.createChild('div', 'chart-viewport-selection-overlay hidden');
-    this.selectedTimeSpanLabel = this.selectionOverlay.createChild('div', 'time-span');
 
     this.cursorElement = this.contentElement.createChild('div', 'chart-cursor-element hidden');
-    if (this.#usingNewOverlayForTimeRange) {
-      this.cursorElement.classList.add('using-new-overlays');
-    }
 
     this.reset();
-
     this.rangeSelectionStart = null;
-
     this.rangeSelectionEnd = null;
   }
 
@@ -112,7 +101,6 @@ export class ChartViewport extends UI.Widget.VBox {
     this.rangeSelectionEnabled = false;
     this.rangeSelectionStart = null;
     this.rangeSelectionEnd = null;
-    this.updateRangeSelectionOverlay();
   }
 
   isDragging(): boolean {
@@ -268,13 +256,6 @@ export class ChartViewport extends UI.Widget.VBox {
     this.isDraggingInternal = true;
     this.selectionOffsetShiftX = event.offsetX - event.pageX;
     this.selectionStartX = event.offsetX;
-    if (!this.#usingNewOverlayForTimeRange) {
-      const style = this.selectionOverlay.style;
-      style.left = this.selectionStartX + 'px';
-      style.width = '1px';
-      this.selectedTimeSpanLabel.textContent = '';
-      this.selectionOverlay.classList.remove('hidden');
-    }
     return true;
   }
 
@@ -300,7 +281,6 @@ export class ChartViewport extends UI.Widget.VBox {
     }
     this.rangeSelectionStart = Math.min(startTime, endTime);
     this.rangeSelectionEnd = Math.max(startTime, endTime);
-    this.updateRangeSelectionOverlay();
     this.delegate.updateRangeSelection(this.rangeSelectionStart, this.rangeSelectionEnd);
   }
 
@@ -321,25 +301,6 @@ export class ChartViewport extends UI.Widget.VBox {
     this.setRangeSelection(start, end);
   }
 
-  private updateRangeSelectionOverlay(): void {
-    if (this.#usingNewOverlayForTimeRange) {
-      return;
-    }
-
-    const rangeSelectionStart = this.rangeSelectionStart || 0;
-    const rangeSelectionEnd = this.rangeSelectionEnd || 0;
-    const margin = 100;
-    const left =
-        Platform.NumberUtilities.clamp(this.timeToPosition(rangeSelectionStart), -margin, this.offsetWidth + margin);
-    const right =
-        Platform.NumberUtilities.clamp(this.timeToPosition(rangeSelectionEnd), -margin, this.offsetWidth + margin);
-    const style = this.selectionOverlay.style;
-    style.left = left + 'px';
-    style.width = (right - left) + 'px';
-    const timeSpan = rangeSelectionEnd - rangeSelectionStart;
-    this.selectedTimeSpanLabel.textContent = i18n.TimeUtilities.preciseMillisToString(timeSpan, 2);
-  }
-
   private onScroll(): void {
     this.scrollTop = this.vScrollElement.scrollTop;
     this.scheduleUpdate();
@@ -472,7 +433,6 @@ export class ChartViewport extends UI.Widget.VBox {
   }
 
   override update(): void {
-    this.updateRangeSelectionOverlay();
     this.delegate.update();
   }