test: Migrate TimelineOverview interactions to MiniMap unit tests

R=alexrudenko@chromium.org

Fixed: 413414809
Change-Id: I0ff370083a1a8e95dc89606b49ecb1b4fa706cd6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6616830
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>

Author: jackfranklin

front_end/panels/timeline/TimelineMiniMap.test.ts

@@ -3,42 +3,52 @@
 // found in the LICENSE file.
 
 import * as Trace from '../../models/trace/trace.js';
-import {raf, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
+import {assertScreenshot, raf, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import {getMainThread} from '../../testing/TraceHelpers.js';
 import {TraceLoader} from '../../testing/TraceLoader.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
 import * as TimelineComponents from './components/components.js';
 import * as Timeline from './timeline.js';
 
 describeWithEnvironment('TimelineMiniMap', function() {
-  it('always shows the responsiveness, CPU activity and network panel', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
-
+  async function renderMiniMapForScreenshot(parsedTrace: Trace.Handlers.Types.ParsedTrace): Promise<void> {
     const container = document.createElement('div');
+    container.style.flex = 'none';
+    container.style.display = 'flex';
+    container.style.position = 'relative';
+    container.style.width = '600px';
+    container.style.height = '200px';
+    container.innerHTML = `<style>${UI.inspectorCommonStyles}</style>`;
     renderElementIntoDOM(container);
 
     const minimap = new Timeline.TimelineMiniMap.TimelineMiniMap();
     minimap.markAsRoot();
     minimap.show(container);
-
     minimap.setData({
       parsedTrace,
       settings: {
-        showMemory: false,
-        showScreenshots: false,
+        showMemory: true,
+        showScreenshots: true,
       },
     });
-
+    // This needs to happen once the MiniMap is in the DOM in order to first set the trace bounds.
+    TraceBounds.TraceBounds.BoundsManager.instance().resetWithNewBounds(parsedTrace.Meta.traceBounds);
+
+    // Now we can zoom into the main thread activity; this means the resize handles are
+    // not both on the edge of the screen, so it's a more representative screenshot.
+    const mainThread = getMainThread(parsedTrace.Renderer);
+    const zoomedWindow = Trace.Extras.MainThreadActivity.calculateWindow(
+        parsedTrace.Meta.traceBounds,
+        mainThread.entries,
+    );
+    TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(zoomedWindow);
     await raf();
-    assert.exists(container.querySelector('#timeline-overview-responsiveness'));
-    assert.exists(container.querySelector('#timeline-overview-cpu-activity'));
-    assert.exists(container.querySelector('#timeline-overview-network'));
-    assert.isNull(container.querySelector('#timeline-overview-filmstrip'));
-    assert.isNull(container.querySelector('#timeline-overview-memory'));
-    minimap.detach();
-  });
+  }
 
-  it('will show the other panels if they are set to visible', async function() {
+  it('always shows the responsiveness, CPU activity and network panel', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
 
     const container = document.createElement('div');
@@ -51,18 +61,29 @@ describeWithEnvironment('TimelineMiniMap', function() {
     minimap.setData({
       parsedTrace,
       settings: {
-        showMemory: true,
-        showScreenshots: true,
+        showMemory: false,
+        showScreenshots: false,
       },
     });
 
     await raf();
     assert.exists(container.querySelector('#timeline-overview-responsiveness'));
     assert.exists(container.querySelector('#timeline-overview-cpu-activity'));
     assert.exists(container.querySelector('#timeline-overview-network'));
-    assert.exists(container.querySelector('#timeline-overview-filmstrip'));
-    assert.exists(container.querySelector('#timeline-overview-memory'));
-    minimap.detach();
+    assert.isNull(container.querySelector('#timeline-overview-filmstrip'));
+    assert.isNull(container.querySelector('#timeline-overview-memory'));
+  });
+
+  it('shows memory and screenshots also if they are set to be visible', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
+    await renderMiniMapForScreenshot(parsedTrace);
+    await assertScreenshot('timeline/minimap_with_memory_and_screenshots.png');
+  });
+
+  it('highlights long tasks in red', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'one-second-interaction.json.gz');
+    await renderMiniMapForScreenshot(parsedTrace);
+    await assertScreenshot('timeline/minimap_long_task.png');
   });
 
   it('creates the first breadcrumb', async function() {
@@ -92,6 +113,7 @@ describeWithEnvironment('TimelineMiniMap', function() {
     assert.lengthOf(TimelineComponents.Breadcrumbs.flattenBreadcrumbs(minimap.breadcrumbs.initialBreadcrumb), 1);
     assert.deepEqual(minimap.breadcrumbs.initialBreadcrumb, {window: parsedTrace.Meta.traceBounds, child: null});
   });
+
   it('stores breadcrumbs to be serialized', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
     const minimap = new Timeline.TimelineMiniMap.TimelineMiniMap();

front_end/panels/timeline/timelineMiniMap.css

@@ -8,23 +8,6 @@
   position: relative;
 }
 
-.timeline-sidebar-floating-icon {
-  position: absolute;
-  top: 5px;
-  left: 10px;
-  z-index: 999;
-  border: none;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  box-shadow: var(--drop-shadow-depth-1);
-  background: var(--sys-color-cdt-base-container);
-
-  &:hover {
-    background: var(--sys-color-base-container-elevated);
-  }
-}
-
 .timeline-minimap .overview-strip {
   margin-top: 2px;
   justify-content: center;

front_end/ui/components/docs/performance_panel/BUILD.gn

@@ -12,7 +12,6 @@ ts_library("ts") {
     "layout_shift_details.ts",
     "network_request_details.ts",
     "network_request_tooltip.ts",
-    "overview.ts",
     "track_example.ts",
   ]
   deps = [
@@ -36,7 +35,6 @@ copy_to_gen("performance_panel") {
     "layout_shift_details.html",
     "network_request_details.html",
     "network_request_tooltip.html",
-    "overview.html",
     "track_example.html",
   ]