RPP: fix font family in screenshots

A fix we applied to the TimelineFlameChartView a long long time ago in
the age of interaction tests to pick the right font was not correctly
adapting to the Roboto font that gets set in test_setup.ts.

Curiously this did not replicate on my Cloudtop, but did reliably on the
bots, which caused these tests to be skipped.

I think in this new world we can greatly simplify here and just always
use the platform font, as we only run screenshots on Linux.

If this works and these tests are stable now, I will follow up with a
CL to remove `perf_ui/Font.ts` as we don't need that module now we just
use the host font.

Bug: 453626439, 453630637, 453629222
Change-Id: I6006cee53142e5bb8e0c9ae091490967c90dd360
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7079233
Reviewed-by: Peter Müller <[email protected]>
Reviewed-by: Piotr Paulski <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>
Reviewed-by: Philip Pfaffe <[email protected]>

Author: jackfranklin

front_end/panels/timeline/TimelineFlameChartView.test.ts

@@ -77,36 +77,33 @@ describeWithEnvironment('TimelineFlameChartView', function() {
       Common.Settings.Settings.instance().createSetting('timeline-flamechart-network-view-group-expansion', {}).set({});
     });
 
-    // Flaky
-    it.skip(
-        '[crbug.com/453626439] renders the network and other tracks in collapsed and expanded modes', async function() {
-          const parsedTrace = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
-          const mockViewDelegate = new MockViewDelegate();
-
-          const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
-          flameChartView.updateCountersGraphToggle(false);  // don't care about the memory view in this test
-          renderWidgetInVbox(flameChartView);
-          // IMPORTANT: order is important; for the flame chart view to render properly
-          // it must be in the DOM before we set the model, so it can calculate and
-          // set heights.
-          flameChartView.setModel(parsedTrace, new Map());
-
-          // Most of the network content is in the first ~700ms of this trace
-          const {min} = parsedTrace.data.Meta.traceBounds;
-          const interestingRange = Trace.Helpers.Timing.milliToMicro(Trace.Types.Timing.Milli(700));
-          const max = Trace.Types.Timing.Micro(min + interestingRange);
-          const newBounds = microsecondsTraceWindow(min, max);
-          TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(newBounds);
-          await raf();
-
-          await assertScreenshot('timeline/flamechart_view_network_collapsed.png');
-          flameChartView.getNetworkFlameChart().toggleGroupExpand(0);
-          await raf();
-          await assertScreenshot('timeline/flamechart_view_network_expanded.png');
-        });
+    it('renders the network and other tracks in collapsed and expanded modes', async function() {
+      const parsedTrace = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+      const mockViewDelegate = new MockViewDelegate();
+
+      const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
+      flameChartView.updateCountersGraphToggle(false);  // don't care about the memory view in this test
+      renderWidgetInVbox(flameChartView);
+      // IMPORTANT: order is important; for the flame chart view to render properly
+      // it must be in the DOM before we set the model, so it can calculate and
+      // set heights.
+      flameChartView.setModel(parsedTrace, new Map());
+
+      // Most of the network content is in the first ~700ms of this trace
+      const {min} = parsedTrace.data.Meta.traceBounds;
+      const interestingRange = Trace.Helpers.Timing.milliToMicro(Trace.Types.Timing.Milli(700));
+      const max = Trace.Types.Timing.Micro(min + interestingRange);
+      const newBounds = microsecondsTraceWindow(min, max);
+      TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(newBounds);
+      await raf();
+
+      await assertScreenshot('timeline/flamechart_view_network_collapsed.png');
+      flameChartView.getNetworkFlameChart().toggleGroupExpand(0);
+      await raf();
+      await assertScreenshot('timeline/flamechart_view_network_expanded.png');
+    });
 
-    // Flaky
-    it.skip('[crbug.com/453630637] does not show the network track when there is no network request', async function() {
+    it('does not show the network track when there is no network request', async function() {
       const parsedTrace = await TraceLoader.traceEngine(this, 'slow-interaction-keydown.json.gz');
       const mockViewDelegate = new MockViewDelegate();
       const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
@@ -116,8 +113,7 @@ describeWithEnvironment('TimelineFlameChartView', function() {
       await assertScreenshot('timeline/flamechart_view_no_network_events.png');
     });
 
-    // Flaky
-    it.skip('[crbug.com/453622839] shows the details for a selected network event', async function() {
+    it('shows the details for a selected network event', async function() {
       const parsedTrace = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
       const mockViewDelegate = new MockViewDelegate();
 
@@ -153,8 +149,7 @@ describeWithEnvironment('TimelineFlameChartView', function() {
       await assertScreenshot('timeline/timeline_with_network_selection.png');
     });
 
-    // Flaky
-    it.skip('[crbug.com/453629222] shows the details for a selected main thread event', async function() {
+    it('shows the details for a selected main thread event', async function() {
       const parsedTrace = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
       const mockViewDelegate = new MockViewDelegate();
 

front_end/testing/TraceHelpers.ts

@@ -637,14 +637,13 @@ export function renderWidgetInVbox(widget: UI.Widget.Widget, opts: {
   flexAuto?: boolean,
 } = {}): void {
   const target = document.createElement('div');
-  target.innerHTML = `<style>${UI.inspectorCommonStyles}</style>`;
   target.classList.add('vbox');
   target.classList.toggle('flex-auto', Boolean(opts.flexAuto));
   target.style.width = (opts.width ?? 800) + 'px';
   target.style.height = (opts.height ?? 600) + 'px';
   widget.markAsRoot();
   widget.show(target);
-  renderElementIntoDOM(target);
+  renderElementIntoDOM(target, {includeCommonStyles: true});
 }
 
 export function getMainThread(data: Trace.Handlers.ModelHandlers.Renderer.RendererHandlerData):

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

@@ -3,8 +3,6 @@
 // found in the LICENSE file.
 import * as Host from '../../../../core/host/host.js';
 
-let fontFamily: string|null = null;
-
 /**
  * Because we run our UI in a couple of contexts (actual app & test
  * environments) and on multiple platforms, the font is not consistent, so this
@@ -19,18 +17,7 @@ let fontFamily: string|null = null;
  * to ensure that the screenshot tests are consistent.
  **/
 export function getFontFamilyForCanvas(): string {
-  if (fontFamily) {
-    return fontFamily;
-  }
-
-  const bodyStyles = getComputedStyle(document.body);
-  if (bodyStyles.fontFamily) {
-    fontFamily = bodyStyles.fontFamily;
-  } else {
-    fontFamily = Host.Platform.fontFamily();
-  }
-
-  return fontFamily;
+  return Host.Platform.fontFamily();
 }
 
 export const DEFAULT_FONT_SIZE = '11px';