[GM3Restyling] Update coverage panel Before: https://imgur.com/a/wjucuQY After: https://imgur.com/a/6T8Aix0 Bug: 325443331 Change-Id: I6c3520910aed19b72093476cac744cf7ebe89a81 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6263085 Reviewed-by: Kateryna Prokopenko <kprokopenko@chromium.org> Commit-Queue: Kim-Anh Tran <kimanh@chromium.org>

diff --git a/front_end/panels/coverage/CoverageView.test.ts b/front_end/panels/coverage/CoverageView.test.ts
index 225ab27..a275580 100644
--- a/front_end/panels/coverage/CoverageView.test.ts
+++ b/front_end/panels/coverage/CoverageView.test.ts

@@ -6,15 +6,17 @@
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import {dispatchClickEvent} from '../../testing/DOMHelpers.js';
 import {createTarget, registerNoopActions} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import {activate, getMainFrame, navigate} from '../../testing/ResourceTreeHelpers.js';
 import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
 import * as Coverage from './coverage.js';
 
 const isShowingLandingPage = (view: Coverage.CoverageView.CoverageView) => {
-  return Boolean(view.contentElement.querySelector('.landing-page'));
+  return Boolean(view.contentElement.querySelector('.empty-state'));
 };
 
 const isShowingResults = (view: Coverage.CoverageView.CoverageView) => {
@@ -91,6 +93,22 @@
     ]);
   });
 
+  it('dispatches a record/reload action when the button is clicked', () => {
+    const view = Coverage.CoverageView.CoverageView.instance();
+    assert.isTrue(isShowingLandingPage(view));
+
+    const button = view.contentElement.querySelector('.empty-state devtools-button');
+    assert.exists(button);
+
+    const toggleSpy =
+        sinon.spy(UI.ActionRegistry.ActionRegistry.instance().getAction('coverage.toggle-recording'), 'execute');
+    const reloadSpy =
+        sinon.spy(UI.ActionRegistry.ActionRegistry.instance().getAction('coverage.start-with-reload'), 'execute');
+
+    dispatchClickEvent(button);
+    assert.isTrue(toggleSpy.calledOnce || reloadSpy.calledOnce);
+  });
+
   it('can handle back/forward cache navigations', async () => {
     const {startSpy, stopSpy, target} = setupTargetAndModels();
     const view = Coverage.CoverageView.CoverageView.instance();

diff --git a/front_end/panels/coverage/CoverageView.ts b/front_end/panels/coverage/CoverageView.ts
index 310e9e8..0dcaa69 100644
--- a/front_end/panels/coverage/CoverageView.ts
+++ b/front_end/panels/coverage/CoverageView.ts

@@ -11,6 +11,7 @@
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -63,14 +64,27 @@
   contentScripts: 'Content scripts',
   /**
    *@description Message in Coverage View of the Coverage tab
-   *@example {record button icon} PH1
    */
-  clickTheReloadButtonSToReloadAnd: 'Click the reload button {PH1} to reload and start capturing coverage.',
+  noCoverageData: 'No coverage data',
   /**
    *@description Message in Coverage View of the Coverage tab
-   *@example {record button icon} PH1
    */
-  clickTheRecordButtonSToStart: 'Click the record button {PH1} to start capturing coverage.',
+  reloadPage: 'Reload page',
+  /**
+   *@description Message in Coverage View of the Coverage tab
+   */
+  startRecording: 'Start recording',
+
+  /**
+   *@description Message in Coverage View of the Coverage tab
+   *@example {Reload page} PH1
+   */
+  clickTheReloadButtonSToReloadAnd: 'Click the "{PH1}" button to reload and start capturing coverage.',
+  /**
+   *@description Message in Coverage View of the Coverage tab
+   *@example {Start recording} PH1
+   */
+  clickTheRecordButtonSToStart: 'Click the "{PH1}" button to start capturing coverage.',
   /**
    *@description Message in the Coverage View explaining that DevTools could not capture coverage.
    */
@@ -257,21 +271,24 @@
   }
 
   private buildLandingPage(): UI.Widget.VBox {
-    const widget = new UI.Widget.VBox();
-    let message;
+    const widget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noCoverageData), '');
+    widget.appendLink('https://developer.chrome.com/docs/devtools/coverage' as Platform.DevToolsPath.UrlString);
     if (this.startWithReloadButton) {
-      this.inlineReloadButton =
-          UI.UIUtils.createInlineButton(UI.Toolbar.Toolbar.createActionButton('coverage.start-with-reload'));
-      message = i18n.i18n.getFormatLocalizedString(
-          str_, UIStrings.clickTheReloadButtonSToReloadAnd, {PH1: this.inlineReloadButton});
+      const action = UI.ActionRegistry.ActionRegistry.instance().getAction('coverage.start-with-reload');
+      if (action) {
+        widget.text = i18nString(UIStrings.clickTheReloadButtonSToReloadAnd, {PH1: i18nString(UIStrings.reloadPage)});
+        const button = UI.UIUtils.createTextButton(
+            i18nString(UIStrings.reloadPage), () => action.execute(),
+            {jslogContext: action.id(), variant: Buttons.Button.Variant.TONAL});
+        widget.contentElement.append(button);
+      }
     } else {
-      const recordButton =
-          UI.UIUtils.createInlineButton(UI.Toolbar.Toolbar.createActionButton(this.toggleRecordAction));
-      message = i18n.i18n.getFormatLocalizedString(str_, UIStrings.clickTheRecordButtonSToStart, {PH1: recordButton});
+      widget.text = i18nString(UIStrings.clickTheRecordButtonSToStart, {PH1: i18nString(UIStrings.startRecording)});
+      const button = UI.UIUtils.createTextButton(
+          i18nString(UIStrings.startRecording), () => this.toggleRecordAction.execute(),
+          {jslogContext: this.toggleRecordAction.id(), variant: Buttons.Button.Variant.TONAL});
+      widget.contentElement.append(button);
     }
-    message.classList.add('message');
-    widget.contentElement.appendChild(message);
-    widget.element.classList.add('landing-page');
     return widget;
   }
 

diff --git a/front_end/panels/coverage/coverageView.css b/front_end/panels/coverage/coverageView.css
index 1f52ae8..a76eb5c 100644
--- a/front_end/panels/coverage/coverageView.css
+++ b/front_end/panels/coverage/coverageView.css

@@ -41,7 +41,6 @@
   flex: auto;
 }
 
-.landing-page,
 .bfcache-page,
 .prerender-page {
   justify-content: center;
@@ -49,7 +48,6 @@
   padding: 20px;
 }
 
-.landing-page .message,
 .bfcache-page .message,
 .prerender-page .message {
   white-space: pre-line;

diff --git a/test/e2e/helpers/coverage-helpers.ts b/test/e2e/helpers/coverage-helpers.ts
index 338e292..2dcf324 100644
--- a/test/e2e/helpers/coverage-helpers.ts
+++ b/test/e2e/helpers/coverage-helpers.ts

@@ -13,7 +13,7 @@
   // Open panel and wait for content
   await openPanelViaMoreTools('Coverage');
   await waitFor('div[aria-label="Coverage panel"]');
-  await waitFor('.coverage-results .landing-page');
+  await waitFor('.coverage-results .empty-state');
 }
 
 export async function navigateToCoverageTestSite() {
@@ -22,7 +22,7 @@
 
 export async function startInstrumentingCoverage() {
   await click(START_INSTRUMENTING_BUTTON);
-  await waitForNone('.coverage-results .landing-page');
+  await waitForNone('.coverage-results .empty-state');
 }
 
 export async function stopInstrumentingCoverage() {
@@ -32,12 +32,7 @@
 
 export async function clearCoverageContent() {
   await click('devtools-button[aria-label="Clear coverage"]');
-  await waitFor('.coverage-results .landing-page');
-}
-
-export async function getMessageContents() {
-  const messageElement = await waitFor('.coverage-results .landing-page .message');
-  return messageElement.evaluate(node => (node as HTMLElement).innerText);
+  await waitFor('.coverage-results .empty-state');
 }
 
 export async function getCoverageData(expectedCount: number) {