[e2e] Add simple 'Pause button' e2e test

This CL adds an e2e test that checks the CUJ of the pause button.
That is clicking it stops the script.

The test replaces an existing "browser_test" in `Tests.js` that is
flaky on linux and mac and caused issues with a V8 CL:
https://crrev.com/c/3867311

R=kimanh@chromium.org

Bug: 1246907,1289529
Change-Id: I2a639d7029c01c1b04c1a89bc027a809fcf020bc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3867522
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>
Commit-Queue: Simon Zünd <szuend@chromium.org>

test/e2e/resources/sources/BUILD.gn

@@ -24,6 +24,7 @@ copy_to_gen("sources") {
     "filesystem/special-characters.html",
     "filesystem/with space.js",
     "filesystem/with%20space.js",
+    "infinity-loop.html",
     "inline-variable.html",
     "inline-variable.js",
     "live-edit-moving-breakpoint.html",

test/e2e/resources/sources/infinity-loop.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script>
+  function loop() {
+    console.log('Console marker the test can wait for');
+    while (true) {
+      // do nothing.
+    }
+  }
+</script>

test/e2e/sources/BUILD.gn

@@ -25,6 +25,7 @@ node_ts_library("sources") {
     "live-edit-moving-breakpoint_test.ts",
     "navigation_test.ts",
     "overrides_test.ts",
+    "pause-button_test.ts",
     "popover_test.ts",
     "restart-frame_test.ts",
     "script-in-multiple-workers_test.ts",

test/e2e/sources/pause-button_test.ts

@@ -0,0 +1,55 @@
+// Copyright 2022 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 {assert} from 'chai';
+
+import {
+  click,
+  getBrowserAndPages,
+  goToResource,
+  step,
+  waitFor,
+} from '../../shared/helper.js';
+import {describe, it} from '../../shared/mocha-extensions.js';
+import {
+  navigateToConsoleTab,
+  waitForLastConsoleMessageToHaveContent,
+} from '../helpers/console-helpers.js';
+import {
+  executionLineHighlighted,
+  getOpenSources,
+  openSourcesPanel,
+  PAUSE_BUTTON,
+  PAUSE_INDICATOR_SELECTOR,
+} from '../helpers/sources-helpers.js';
+
+describe('Sources Tab', () => {
+  it('pauses the script when clicking the "Pause" button', async () => {
+    const {target} = getBrowserAndPages();
+    await step('navigate to page', async () => {
+      await goToResource('sources/infinity-loop.html');
+    });
+
+    await step('kick off the infinity loop', async () => {
+      await target.evaluate('setTimeout(loop, 0)');
+    });
+
+    await step('wait for the marker console message to show up', async () => {
+      await navigateToConsoleTab();
+      await waitForLastConsoleMessageToHaveContent('Console marker the test can wait for');
+    });
+
+    await step('click the pause button', async () => {
+      await openSourcesPanel();
+      await click(PAUSE_BUTTON);
+    });
+
+    await step('wait for the pause in the loop function', async () => {
+      await waitFor(PAUSE_INDICATOR_SELECTOR);
+      await executionLineHighlighted();
+
+      assert.deepStrictEqual(await getOpenSources(), ['infinity-loop.html']);
+    });
+  });
+});