Stability improvements of existing screenshot tests

This CL reduces retries to 1 (no-retries) and the threshold for diffs to 0.1. This CL
also adds the following flags that should help to render in a more
stable way:

- `--disable-font-subpixel-positioning` disables subpixel positioning for fonts.
- `--disable-lcd-text` disables subpixel antialiasing.
- `--force-device-scale-factor=1` forces device scale factor to be 1.
- `--hide-scrollbars` hides scrollbars which might affect rendering.

Also, this CL imports a Roboto web font into component docs and adds a
special CSS class to force all fonts to be the same font (see
front_end/design_system_tokens.css and
front_end/ui/components/docs/component_docs_styles.css).

Bug: 401489541
Change-Id: I94e6a733d63459d1692197536511dad199ee168b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6342613
Commit-Queue: Alex Rudenko <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>

Author: OrKoN

front_end/design_system_tokens.css

@@ -491,6 +491,12 @@
     --source-code-font-family: monospace;
   }
 
+  &.platform-screenshot-test {
+    --default-font-family: roboto;
+    --monospace-font-family: roboto;
+    --source-code-font-family: roboto;
+  }
+
   --ref-typeface-weight-regular: 400;
   --ref-typeface-weight-medium: 500;
   --ref-typeface-weight-bold: 700;

front_end/ui/components/docs/component_docs_styles.css

@@ -4,10 +4,11 @@
  * found in the LICENSE file.
  */
 
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
 body {
   margin: 0;
   padding: 0;
-  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
 }
 
 #index-page h1 {

front_end/ui/components/docs/console_insight/references.ts

@@ -100,4 +100,5 @@ A direct citation is a link to a reference, but it only applies to a specific pa
     },
 
     Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
+component.disableAnimations = true;
 document.getElementById('container')?.appendChild(component);

front_end/ui/components/docs/toggle_fonts.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+const PLATFROM_SCREENSHOT_TESTS = 'platform-screenshot-test';
 const PLATFORM_MAC_CLASS = 'platform-mac';
 const PLATFORM_LINUX_CLASS = 'platform-linux';
 const PLATFORM_WINDOWS_CLASS = 'platform-windows';
@@ -34,6 +35,7 @@ export function init(): void {
   button.className = 'component-docs-ui';
 
   const loop = [
+    PLATFROM_SCREENSHOT_TESTS,
     PLATFORM_LINUX_CLASS,
     PLATFORM_MAC_CLASS,
     PLATFORM_WINDOWS_CLASS,

test/conductor/hooks.ts

@@ -82,6 +82,10 @@ function launchChrome() {
     '--site-per-process',  // Default on Desktop anyway, but ensure that we always use out-of-process frames when we intend to.
     '--host-resolver-rules=MAP *.test 127.0.0.1',
     '--disable-gpu',
+    '--disable-font-subpixel-positioning',
+    '--disable-lcd-text',
+    '--force-device-scale-factor=1',
+    '--hide-scrollbars',
     '--enable-blink-features=CSSContainerQueries,HighlightInheritance',  // TODO(crbug.com/1218390) Remove globally enabled flags and conditionally enable them
     '--disable-blink-features=WebAssemblyJSPromiseIntegration',  // TODO(crbug.com/325123665) Remove once heap snapshots work again with JSPI
     `--disable-features=${disabledFeatures.join(',')}`,
@@ -99,7 +103,7 @@ function launchChrome() {
 
   // Always set the default viewport because setting only the window size for
   // headful mode would result in much smaller actual viewport.
-  opts.defaultViewport = {width: viewportWidth, height: viewportHeight};
+  opts.defaultViewport = {width: viewportWidth, height: viewportHeight, deviceScaleFactor: 1};
   // Toggle either viewport or window size depending on headless vs not.
   if (!headless) {
     launchArgs.push(`--window-size=${windowWidth},${windowHeight}`);