chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -0,0 +1,74 @@
+// Copyright 2024 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 Root from '../../../core/root/root.js';
+import type * as Trace from '../../../models/trace/trace.js';
+import {raf, renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
+import {describeWithEnvironment, enableFeatureForTest} from '../../../testing/EnvironmentHelpers.js';
+import {TraceLoader} from '../../../testing/TraceLoader.js';
+
+import * as Components from './components.js';
+
+describeWithEnvironment('Sidebar', () => {
+  async function renderSidebar(
+      parsedTrace: Trace.Handlers.Types.ParsedTrace,
+      insights: Trace.Insights.Types.TraceInsightSets|null,
+      ): Promise<Components.Sidebar.SidebarWidget> {
+    const container = document.createElement('div');
+    renderElementIntoDOM(container);
+    const sidebar = new Components.Sidebar.SidebarWidget();
+    sidebar.markAsRoot();
+    sidebar.setParsedTrace(parsedTrace);
+    sidebar.setInsights(insights);
+    sidebar.show(container);
+    await raf();
+    return sidebar;
+  }
+
+  beforeEach(() => {
+    enableFeatureForTest(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS);
+    enableFeatureForTest(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS);
+  });
+
+  it('renders with two tabs for insights & annotations', async function() {
+    const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+
+    const sidebar = await renderSidebar(parsedTrace, insights);
+    const tabbedPane = sidebar.element.querySelector('.tabbed-pane')?.shadowRoot;
+    assert.isOk(tabbedPane);
+    const tabs = Array.from(tabbedPane.querySelectorAll('[role="tab"]'));
+    assert.lengthOf(tabs, 2);
+    const labels = tabs.map(elem => elem.getAttribute('aria-label'));
+    assert.deepEqual(labels, ['Insights', 'Annotations']);
+  });
+
+  it('selects the insights tab by default', async function() {
+    const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+
+    const sidebar = await renderSidebar(parsedTrace, insights);
+    const tabbedPane = sidebar.element.querySelector('.tabbed-pane')?.shadowRoot;
+    assert.isOk(tabbedPane);
+
+    const tabs = Array.from(tabbedPane.querySelectorAll('[role="tab"]'));
+    const selectedTabLabels =
+        tabs.filter(tab => tab.classList.contains('selected')).map(elem => elem.getAttribute('aria-label'));
+    assert.deepEqual(selectedTabLabels, ['Insights']);
+  });
+
+  it('disables the insights tab if there are no insights', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const sidebar = await renderSidebar(parsedTrace, null);
+    const tabbedPane = sidebar.element.querySelector('.tabbed-pane')?.shadowRoot;
+    assert.isOk(tabbedPane);
+    const tabs = Array.from(tabbedPane.querySelectorAll('[role="tab"]'));
+
+    const disabledTabLabels =
+        tabs.filter(tab => tab.classList.contains('disabled')).map(elem => elem.getAttribute('aria-label'));
+    assert.deepEqual(disabledTabLabels, ['Insights']);
+
+    const selectedTabLabels =
+        tabs.filter(tab => tab.classList.contains('selected')).map(elem => elem.getAttribute('aria-label'));
+    assert.deepEqual(selectedTabLabels, ['Annotations']);
+  });
+});

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

@@ -74,26 +74,36 @@ export class SidebarWidget extends UI.Widget.VBox {
   constructor() {
     super();
     this.setMinimumSize(MIN_SIDEBAR_WIDTH_PX, 0);
-  }
-
-  override wasShown(): void {
-    this.#userHasOpenedSidebarOnce.set(true);
-    this.#tabbedPane.show(this.element);
-    if (!this.#tabbedPane.hasTab(SidebarTabs.INSIGHTS) &&
-        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS)) {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS)) {
       this.#tabbedPane.appendTab(
           SidebarTabs.INSIGHTS, 'Insights', this.#insightsView, undefined, undefined, false, false, 0,
           'timeline.insights-tab');
     }
-    if (!this.#tabbedPane.hasTab(SidebarTabs.ANNOTATIONS) &&
-        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS)) {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS)) {
       this.#tabbedPane.appendTab(
-          'annotations', 'Annotations', this.#annotationsView, undefined, undefined, false, false, 1,
+          SidebarTabs.ANNOTATIONS, 'Annotations', this.#annotationsView, undefined, undefined, false, false, 1,
           'timeline.annotations-tab');
-      this.#updateAnnotationsCountBadge();
     }
-    // TODO: automatically select the right tab depending on what content is
-    // available to us.
+
+    // Default the selected tab to Insights. In wasShown() we will change this
+    // if this is a trace that has no insights.
+    this.#tabbedPane.selectTab(SidebarTabs.INSIGHTS);
+  }
+
+  override wasShown(): void {
+    this.#userHasOpenedSidebarOnce.set(true);
+    this.#tabbedPane.show(this.element);
+    this.#updateAnnotationsCountBadge();
+
+    // Swap to the Annotations tab if:
+    // 1. Insights is currently selected.
+    // 2. The Insights tab is disabled (which means we have no insights for this trace)
+    // 3. The annotations tab exists (we can remove this check once annotations
+    //    are non-experimental)
+    if (this.#tabbedPane.selectedTabId === SidebarTabs.INSIGHTS &&
+        this.#tabbedPane.tabIsDisabled(SidebarTabs.INSIGHTS) && this.#tabbedPane.hasTab(SidebarTabs.ANNOTATIONS)) {
+      this.#tabbedPane.selectTab(SidebarTabs.ANNOTATIONS);
+    }
   }
 
   setAnnotations(
@@ -125,10 +135,19 @@ export class SidebarWidget extends UI.Widget.VBox {
 
   setInsights(insights: Trace.Insights.Types.TraceInsightSets|null): void {
     this.#insightsView.setInsights(insights);
+
+    this.#tabbedPane.setTabEnabled(
+        SidebarTabs.INSIGHTS,
+        insights !== null,
+    );
   }
 
   setActiveInsight(activeInsight: ActiveInsight|null): void {
     this.#insightsView.setActiveInsight(activeInsight);
+
+    if (activeInsight) {
+      this.#tabbedPane.selectTab(SidebarTabs.INSIGHTS);
+    }
   }
 }
 

package/front_end/panels/timeline/components/SidebarAnnotationsTab.test.ts

@@ -220,4 +220,70 @@ describeWithEnvironment('SidebarAnnotationsTab', () => {
     assert.strictEqual(annotationLabelElements[1].innerText, 'New Entry Label 2');
     assert.strictEqual(annotationLabelElements[2].innerText, 'Labelled Time Range');
   });
+
+  it('does not display multiple not started annotations for one entry', async function() {
+    const component = new SidebarAnnotationsTab();
+    const defaultTraceEvents = await TraceLoader.rawEvents(null, 'basic.json.gz');
+    renderElementIntoDOM(component);
+
+    // Create Empty Entry Label Annotation (considered not started)
+    const entryLabelAnnotation: Trace.Types.File.Annotation = {
+      type: 'ENTRY_LABEL',
+      entry: defaultTraceEvents[0],
+      label: '',
+    };
+
+    // Create Entries link that only has 'to' entry (considered not started)
+    const entriesLink: Trace.Types.File.Annotation = {
+      type: 'ENTRIES_LINK',
+      entryFrom: defaultTraceEvents[0],
+      state: Trace.Types.File.EntriesLinkState.CREATION_NOT_STARTED,
+    };
+
+    component.annotations = [entryLabelAnnotation, entriesLink];
+    assert.isNotNull(component.shadowRoot);
+
+    await coordinator.done();
+
+    const annotationsWrapperElement = component.shadowRoot.querySelector<HTMLElement>('.annotations');
+    assert.isNotNull(annotationsWrapperElement);
+
+    // Ensure there is only one annotation displayed
+    const annotationIdentifierElements = component.shadowRoot.querySelectorAll<HTMLElement>('.annotation-identifier');
+    assert.strictEqual(annotationIdentifierElements.length, 1);
+  });
+
+  it('displays multiple not started annotations if they are not different entries', async function() {
+    const component = new SidebarAnnotationsTab();
+    const defaultTraceEvents = await TraceLoader.rawEvents(null, 'basic.json.gz');
+    renderElementIntoDOM(component);
+
+    // Create Empty Entry Label Annotation (considered not started)
+    const entryLabelAnnotation: Trace.Types.File.Annotation = {
+      type: 'ENTRY_LABEL',
+      entry: defaultTraceEvents[0],
+      label: '',
+    };
+
+    // Create Entries link that only has 'to' entry (considered not started).
+    // Not started link is on a different entry than the other not started annotation
+    const entriesLink: Trace.Types.File.Annotation = {
+      type: 'ENTRIES_LINK',
+      entryFrom: defaultTraceEvents[1],
+      state: Trace.Types.File.EntriesLinkState.CREATION_NOT_STARTED,
+    };
+
+    component.annotations = [entryLabelAnnotation, entriesLink];
+    assert.isNotNull(component.shadowRoot);
+
+    await coordinator.done();
+
+    const annotationsWrapperElement = component.shadowRoot.querySelector<HTMLElement>('.annotations');
+    assert.isNotNull(annotationsWrapperElement);
+
+    // Ensure both annotations are displayed
+    const annotationIdentifierElements = component.shadowRoot.querySelectorAll<HTMLElement>('.annotation-identifier');
+    assert.strictEqual(annotationIdentifierElements.length, 2);
+  });
+
 });

package/front_end/panels/timeline/components/SidebarAnnotationsTab.ts

@@ -8,8 +8,8 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as TraceBounds from '../../../services/trace_bounds/trace_bounds.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import * as Settings from '../../../ui/components/settings/settings.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import type * as Settings from '../../../ui/components/settings/settings.js';
 import * as ThemeSupport from '../../../ui/legacy/theme_support/theme_support.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -18,9 +18,13 @@ import {nameForEntry} from './EntryName.js';
 import {RemoveAnnotation, RevealAnnotation} from './Sidebar.js';
 import sidebarAnnotationsTabStyles from './sidebarAnnotationsTab.css.js';
 
+const {html} = LitHtml;
+
 const diagramImageUrl = new URL('../../../Images/performance-panel-diagram.svg', import.meta.url).toString();
 const entryLabelImageUrl = new URL('../../../Images/performance-panel-entry-label.svg', import.meta.url).toString();
 const timeRangeImageUrl = new URL('../../../Images/performance-panel-time-range.svg', import.meta.url).toString();
+const deleteAnnotationImageUrl =
+    new URL('../../../Images/performance-panel-delete-annotation.svg', import.meta.url).toString();
 
 const UIStrings = {
   /**
@@ -52,6 +56,15 @@ const UIStrings = {
    * @description Text for how to create a time range selection and add note.
    */
   timeRangeTutorialDescription: 'Shift-drag in the flamechart then type to create a time range annotation.',
+  /**
+   * @description  Title for deleting annotations.
+   */
+  deleteAnnotationTutorialTitle: 'Delete an annotation',
+  /**
+   * @description Text for how to access an annotation delete function.
+   */
+  deleteAnnotationTutorialDescription:
+      'Hover over the list in the sidebar with Annotations tab selected to access the delete function.',
   /**
    * @description Text used to describe the delete button to screen readers.
    * @example {"A paint event annotated with the text hello world"} PH1
@@ -81,7 +94,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/SidebarAnno
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class SidebarAnnotationsTab extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-performance-sidebar-annotations`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
   #annotations: Trace.Types.File.Annotation[] = [];
@@ -97,31 +109,83 @@ export class SidebarAnnotationsTab extends HTMLElement {
   }
 
   set annotations(annotations: Trace.Types.File.Annotation[]) {
-    this.#annotations = annotations.sort((firstAnnotation, secondAnnotation) => {
-      function getAnnotationTimestamp(annotation: Trace.Types.File.Annotation): Trace.Types.Timing.MicroSeconds {
-        if (Trace.Types.File.isEntryLabelAnnotation(annotation)) {
-          return annotation.entry.ts;
-        }
-        if (Trace.Types.File.isEntriesLinkAnnotation(annotation)) {
-          return annotation.entryFrom.ts;
-        }
-        if (Trace.Types.File.isTimeRangeAnnotation(annotation)) {
-          return annotation.bounds.min;
+    this.#annotations = this.#processAnnotationsList(annotations);
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  set annotationEntryToColorMap(annotationEntryToColorMap: Map<Trace.Types.Events.Event, string>) {
+    this.#annotationEntryToColorMap = annotationEntryToColorMap;
+  }
+
+  #processAnnotationsList(annotations: Trace.Types.File.Annotation[]): Trace.Types.File.Annotation[] {
+    // When an entry is double-clicked, we create two annotations (a label and an entries connection) for the user to choose from.
+    // The one not selected is deleted when the user makes their selection.
+    // To avoid excessive activity in the sidebar (adding and removing annotations), only show one 'not started' annotation associated with an entry.
+    //
+    // If we encounter an annotation for an entry that hasn't started creation, add that entry to the 'entriesWithNotStartedAnnotation'
+    // set. This allows us to filter out any subsequent not started annotations for the same entry.
+    const entriesWithNotStartedAnnotation = new Set();
+
+    const processedAnnotations = annotations.filter(annotation => {
+      if (this.#isAnnotationCreationStarted(annotation)) {
+        return true;
+      }
+
+      if (annotation.type === 'ENTRIES_LINK' || annotation.type === 'ENTRY_LABEL') {
+        const annotationEntry = annotation.type === 'ENTRIES_LINK' ? annotation.entryFrom : annotation.entry;
+
+        if (entriesWithNotStartedAnnotation.has(annotationEntry)) {
+          return false;
         }
-        // This part of code shouldn't be reached. If it is here then the annotation has an invalid type, so return the
-        // max timestamp to push it to the end.
-        console.error('Invalid annotation type.');
-        // Since we need to compare the values, so use `MAX_SAFE_INTEGER` instead of `MAX_VALUE`.
-        return Trace.Types.Timing.MicroSeconds(Number.MAX_SAFE_INTEGER);
+
+        entriesWithNotStartedAnnotation.add(annotationEntry);
       }
 
-      return getAnnotationTimestamp(firstAnnotation) - getAnnotationTimestamp(secondAnnotation);
+      return true;
     });
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+
+    // Sort annotations by timestamp.
+    processedAnnotations.sort(
+        (firstAnnotation, secondAnnotation) =>
+            this.#getAnnotationTimestamp(firstAnnotation) - this.#getAnnotationTimestamp(secondAnnotation),
+    );
+
+    return processedAnnotations;
   }
 
-  set annotationEntryToColorMap(annotationEntryToColorMap: Map<Trace.Types.Events.Event, string>) {
-    this.#annotationEntryToColorMap = annotationEntryToColorMap;
+  #getAnnotationTimestamp(annotation: Trace.Types.File.Annotation): Trace.Types.Timing.MicroSeconds {
+    switch (annotation.type) {
+      case 'ENTRY_LABEL': {
+        return annotation.entry.ts;
+      }
+      case 'ENTRIES_LINK': {
+        return annotation.entryFrom.ts;
+      }
+      case 'TIME_RANGE': {
+        return annotation.bounds.min;
+      }
+      default: {
+        Platform.assertNever(annotation, `Invalid annotation type ${annotation}`);
+      }
+    }
+  }
+
+  #isAnnotationCreationStarted(annotation: Trace.Types.File.Annotation): boolean {
+    // Consider the annotation not started if:
+    // ENTRY_LABEL - label is empty
+    // ENTRIES_LINK - the connection annotation does not have the 'to' entry
+    // TIME_RANGE - range is over zero
+    switch (annotation.type) {
+      case 'ENTRY_LABEL': {
+        return annotation.label.length > 0;
+      }
+      case 'ENTRIES_LINK': {
+        return Boolean(annotation.entryTo);
+      }
+      case 'TIME_RANGE': {
+        return annotation.bounds.range > 0;
+      }
+    }
   }
 
   connectedCallback(): void {
@@ -139,7 +203,7 @@ export class SidebarAnnotationsTab extends HTMLElement {
         color: toTextColor,
       };
       // clang-format off
-      return LitHtml.html`
+      return html`
         <span class="annotation-identifier" style=${LitHtml.Directives.styleMap(styleForToAnnotationIdentifier)}>
           ${entryToName}
         </span>`;
@@ -169,7 +233,7 @@ export class SidebarAnnotationsTab extends HTMLElement {
           backgroundColor,
           color,
         };
-        return LitHtml.html`
+        return html`
               <span class="annotation-identifier" style=${LitHtml.Directives.styleMap(styleForAnnotationIdentifier)}>
                 ${entryName}
               </span>
@@ -184,7 +248,7 @@ export class SidebarAnnotationsTab extends HTMLElement {
         const timeRangeEndInMs =
             Math.round(Trace.Helpers.Timing.microSecondsToMilliseconds(annotation.bounds.max) - minTraceBoundsMilli);
 
-        return LitHtml.html`
+        return html`
               <span class="annotation-identifier time-range">
                 ${timeRangeStartInMs} - ${timeRangeEndInMs} ms
               </span>
@@ -199,18 +263,18 @@ export class SidebarAnnotationsTab extends HTMLElement {
           color: fromTextColor,
         };
         // clang-format off
-        return LitHtml.html`
+        return html`
           <div class="entries-link">
-            <span class="annotation-identifier"  style=${LitHtml.Directives.styleMap(styleForFromAnnotationIdentifier)}">
+            <span class="annotation-identifier" style=${LitHtml.Directives.styleMap(styleForFromAnnotationIdentifier)}>
               ${entryFromName}
             </span>
-            <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+            <devtools-icon class="inline-icon" .data=${{
               iconName: 'arrow-forward',
               color: 'var(--icon-default)',
               width: '18px',
               height: '18px',
             } as IconButton.Icon.IconData}>
-            </${IconButton.Icon.Icon.litTagName}>
+            </devtools-icon>
             ${this.#renderEntryToIdentifier(annotation)}
           </div>
       `;
@@ -226,7 +290,7 @@ export class SidebarAnnotationsTab extends HTMLElement {
   }
 
   #renderTutorialCard(): LitHtml.TemplateResult {
-    return LitHtml.html`
+    return html`
       <div class="annotation-tutorial-container">
       ${i18nString(UIStrings.annotationGetStarted)}
         <div class="tutorial-card">
@@ -244,6 +308,11 @@ export class SidebarAnnotationsTab extends HTMLElement {
           <div class="tutorial-title">${i18nString(UIStrings.timeRangeTutorialTitle)}</div>
           <div class="tutorial-description">${i18nString(UIStrings.timeRangeTutorialDescription)}</div>
         </div>
+        <div class="tutorial-card">
+          <div class="tutorial-image"> <img src=${deleteAnnotationImageUrl}></img></div>
+          <div class="tutorial-title">${i18nString(UIStrings.deleteAnnotationTutorialTitle)}</div>
+          <div class="tutorial-description">${i18nString(UIStrings.deleteAnnotationTutorialDescription)}</div>
+        </div>
       </div>
     `;
   }
@@ -263,14 +332,14 @@ export class SidebarAnnotationsTab extends HTMLElement {
   #render(): void {
     // clang-format off
     LitHtml.render(
-      LitHtml.html`
+      html`
         <span class="annotations">
           ${this.#annotations.length === 0 ?
             this.#renderTutorialCard() :
-            LitHtml.html`
+            html`
               ${this.#annotations.map(annotation => {
                 const label = detailedAriaDescriptionForAnnotation(annotation);
-                return LitHtml.html`
+                return html`
                   <div class="annotation-container"
                     @click=${() => this.#revealAnnotation(annotation)}
                     aria-label=${label}
@@ -289,7 +358,7 @@ export class SidebarAnnotationsTab extends HTMLElement {
                       event.stopPropagation();
                       this.dispatchEvent(new RemoveAnnotation(annotation));
                     }} jslog=${VisualLogging.action('timeline.annotation-sidebar.delete').track({click: true})}>
-                      <${IconButton.Icon.Icon.litTagName}
+                      <devtools-icon
                         class="bin-icon"
                         .data=${{
                           iconName: 'bin',
@@ -297,17 +366,17 @@ export class SidebarAnnotationsTab extends HTMLElement {
                           width: '20px',
                           height: '20px',
                         } as IconButton.Icon.IconData}
-                      >
+                      ></devtools-icon>
                     </button>
                   </div>`;
               })}
-              <${Settings.SettingCheckbox.SettingCheckbox.litTagName} class="visibility-setting" .data=${{
+              <setting-checkbox class="visibility-setting" .data=${{
                 setting: this.#annotationsHiddenSetting,
                 textOverride: 'Hide annotations',
               } as Settings.SettingCheckbox.SettingCheckboxData}>
-              </${Settings.SettingCheckbox.SettingCheckbox.litTagName}>
-        </span>`
-      }`,
+              </setting-checkbox>`
+      }
+      </span>`,
     this.#shadow, {host: this});
     // clang-format on
   }

package/front_end/panels/timeline/components/SidebarInsightsTab.test.ts

@@ -22,13 +22,23 @@ describeWithEnvironment('SidebarInsightsTab', () => {
     assert.isOk(component.shadowRoot);
 
     const navigationURLs =
-        Array.from(component.shadowRoot.querySelectorAll<HTMLElement>('details > summary')).map(elem => elem.innerText);
+        Array.from(component.shadowRoot.querySelectorAll<HTMLElement>('details > summary')).map(elem => elem.title);
     assert.deepEqual(navigationURLs, [
       'https://www.google.com/',
       'https://www.google.com/',
       'https://www.google.com/imghp?hl=en&ogbl',
       'https://www.google.com/search?q=dogs&hl=en&tbm=isch&source=hp&biw=738&bih=893&ei=_ER4YPD6D4zka4u2t8gM&oq=dogs&gs_lcp=CgNpbWcQAzICCAAyBQgAELEDMgUIABCxAzICCAAyBQgAELEDMgUIABCxAzIFCAAQsQMyAggAMgUIABCxAzIFCAAQsQM6CAgAELEDEIMBOgQIABADUI4QWOISYPsTaABwAHgAgAEiiAFxkgEBNJgBAKABAaoBC2d3cy13aXotaW1n&sclient=img&ved=0ahUKEwjw6IjVsoDwAhUM8hoKHQvbDckQ4dUDCAc&uact=5',
     ]);
+
+    const navigationURLLabels =
+        Array.from(component.shadowRoot.querySelectorAll<HTMLElement>('details > summary')).map(elem => elem.innerText);
+    assert.deepEqual(navigationURLLabels, [
+      '/',
+      '/',
+      '/imghp?hl=en&ogbl',
+      '/search?q=dogs&hl=en&tbm=isch&source=hp&biw=738&bih=893&ei=_ER4YPD…&oq=dogs&gs_lcp=CgNpbWc…&sclient=img&ved=0ahUKEw…&uact=5',
+    ]);
+
     const sets = component.shadowRoot.querySelectorAll('devtools-performance-sidebar-single-navigation');
     assert.lengthOf(sets, 4);  // same number of sets as there are navigations
   });