RPP: fix incorrect annotations adorner count

We weren't using the de-duplicated set of annotations when counting to
update the badge. The component already does the de-duplicating, so we
can use its list of annotations to get the correct number to display.

Fixed: 393291324
Change-Id: Ie2d478de8424ca293909844359892302e011bbf6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6218245
Auto-Submit: Jack Franklin <[email protected]>
Commit-Queue: Andres Olivares <[email protected]>
Reviewed-by: Andres Olivares <[email protected]>

Author: jackfranklin

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

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Trace from '../../../models/trace/trace.js';
+import * as Trace from '../../../models/trace/trace.js';
 import {raf, renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
@@ -66,4 +66,57 @@ describeWithEnvironment('Sidebar', () => {
         tabs.filter(tab => tab.classList.contains('selected')).map(elem => elem.getAttribute('aria-label'));
     assert.deepEqual(selectedTabLabels, ['Annotations']);
   });
+
+  it('shows the count for the active annotations', async function() {
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const events = parsedTrace.Renderer.allTraceEntries;
+    const annotation1: Trace.Types.File.Annotation = {
+      type: 'ENTRY_LABEL',
+      entry: events[0],
+      label: 'Entry Label 1',
+    };
+
+    const annotation2: Trace.Types.File.Annotation = {
+      type: 'ENTRY_LABEL',
+      entry: events[1],
+      label: 'Entry Label 2',
+    };
+
+    const sidebar = await renderSidebar(parsedTrace, metadata, null);
+    sidebar.setAnnotations([annotation1, annotation2], new Map());
+    const tabbedPane = sidebar.element.querySelector('.tabbed-pane')?.shadowRoot;
+    assert.isOk(tabbedPane);
+    const annotationsTab = tabbedPane.querySelector('#tab-annotations');
+    assert.isOk(annotationsTab);
+    const countBadge = annotationsTab.querySelector<HTMLElement>('.badge');
+    assert.strictEqual(countBadge?.innerText, '2');
+  });
+
+  it('de-duplicates annotations that are pending to not show an incorrect count', async function() {
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const events = parsedTrace.Renderer.allTraceEntries;
+
+    // Create Empty Entry Label Annotation (considered not started)
+    const entryLabelAnnotation: Trace.Types.File.Annotation = {
+      type: 'ENTRY_LABEL',
+      entry: events[0],
+      label: '',
+    };
+
+    // Create Entries link that only has 'to' entry (considered not started)
+    const entriesLink: Trace.Types.File.Annotation = {
+      type: 'ENTRIES_LINK',
+      entryFrom: events[0],
+      state: Trace.Types.File.EntriesLinkState.CREATION_NOT_STARTED,
+    };
+
+    const sidebar = await renderSidebar(parsedTrace, metadata, null);
+    sidebar.setAnnotations([entryLabelAnnotation, entriesLink], new Map());
+    const tabbedPane = sidebar.element.querySelector('.tabbed-pane')?.shadowRoot;
+    assert.isOk(tabbedPane);
+    const annotationsTab = tabbedPane.querySelector('#tab-annotations');
+    assert.isOk(annotationsTab);
+    const countBadge = annotationsTab.querySelector<HTMLElement>('.badge');
+    assert.strictEqual(countBadge?.innerText, '1');
+  });
 });

front_end/panels/timeline/components/Sidebar.ts

@@ -51,8 +51,6 @@ export class SidebarWidget extends UI.Widget.VBox {
   #insightsView = new InsightsView();
   #annotationsView = new AnnotationsView();
 
-  #annotationCount = 0;
-
   /**
    * Track if the user has opened the sidebar before. We do this so that the
    * very first time they record/import a trace after the sidebar ships, we can
@@ -102,13 +100,13 @@ export class SidebarWidget extends UI.Widget.VBox {
       updatedAnnotations: Trace.Types.File.Annotation[],
       annotationEntryToColorMap: Map<Trace.Types.Events.Event, string>): void {
     this.#annotationsView.setAnnotations(updatedAnnotations, annotationEntryToColorMap);
-    this.#annotationCount = updatedAnnotations.length;
     this.#updateAnnotationsCountBadge();
   }
 
   #updateAnnotationsCountBadge(): void {
-    if (this.#annotationCount) {
-      this.#tabbedPane.setBadge('annotations', this.#annotationCount.toString());
+    const annotations = this.#annotationsView.deduplicatedAnnotations();
+    if (annotations.length) {
+      this.#tabbedPane.setBadge('annotations', annotations.length.toString());
     }
   }
 
@@ -174,4 +172,14 @@ class AnnotationsView extends UI.Widget.VBox {
     this.#component.annotationEntryToColorMap = annotationEntryToColorMap;
     this.#component.annotations = annotations;
   }
+
+  /**
+   * The component "de-duplicates" annotations to ensure implementation details
+   * about how we create pending annotations don't leak into the UI. We expose
+   * these here because we use this count to show the number of annotations in
+   * the small adorner in the sidebar tab.
+   */
+  deduplicatedAnnotations(): readonly Trace.Types.File.Annotation[] {
+    return this.#component.deduplicatedAnnotations();
+  }
 }

front_end/panels/timeline/components/SidebarAnnotationsTab.ts

@@ -110,6 +110,10 @@ export class SidebarAnnotationsTab extends HTMLElement {
     this.#annotationsHiddenSetting = Common.Settings.Settings.instance().moduleSetting('annotations-hidden');
   }
 
+  deduplicatedAnnotations(): readonly Trace.Types.File.Annotation[] {
+    return this.#annotations;
+  }
+
   set annotations(annotations: Trace.Types.File.Annotation[]) {
     this.#annotations = this.#processAnnotationsList(annotations);
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);