[GM3Restyling] Update screenshot empty states (in Network panel)

Screenshots: https://imgur.com/a/E6WaSHB
Bug: 325443331
Change-Id: Ie53b539ffae2674c0990518f790f8f8a6b2188a9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6298127
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/network/NetworkPanel.ts

@@ -44,6 +44,7 @@ import * as Logs from '../../models/logs/logs.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -156,9 +157,18 @@ const UIStrings = {
   throttling: 'Throttling',
   /**
    *@description Text in Network Panel to tell the user to reload the page to capture screenshots.
-   *@example {Ctrl + R} PH1
+   *@example {Reload page} PH1
+   *@example {Ctrl + R} PH2
    */
-  hitSToReloadAndCaptureFilmstrip: 'Hit {PH1} to reload and capture filmstrip.',
+  reloadAndCaptureFilmstrip: 'Reload and capture filmstrip by using the "{PH1}" button or by hitting {PH2}',
+  /**
+   * @description A label for a button in the Network panel for reloading the page to capture screenshots.
+   */
+  reloadPage: 'Reload page',
+  /**
+   * @description Text in Network Panel if no filmstrips have been captured
+   */
+  noFilmstrips: 'No filmstrips captured',
   /**
    * @description A context menu item that is shown for resources in other panels
    * to open them in the Network panel.
@@ -175,11 +185,11 @@ const UIStrings = {
   /**
    *@description Text in Network Panel that is displayed whilst the recording is in progress.
    */
-  recordingFrames: 'Recording frames...',
+  recordingFrames: 'Currenty recording frames',
   /**
    *@description Text in Network Panel that is displayed when frames are being fetched.
    */
-  fetchingFrames: 'Fetching frames...',
+  fetchingFrames: 'Currently fetching frames',
   /**
    * @description Text of a button in the Network panel's toolbar that open Network Conditions panel in the drawer.
    */
@@ -623,14 +633,23 @@ export class NetworkPanel extends UI.Panel.Panel implements
   }
 
   private resetFilmStripView(): void {
-    const reloadShortcut =
-        UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('inspector-main.reload')[0];
+    const actionId = 'inspector-main.reload';
+    const reloadShortcut = UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction(actionId)[0];
+    const action = UI.ActionRegistry.ActionRegistry.instance().getAction(actionId);
 
     if (this.filmStripView) {
       this.filmStripView.reset();
-      if (reloadShortcut) {
-        this.filmStripView.setStatusText(
-            i18nString(UIStrings.hitSToReloadAndCaptureFilmstrip, {PH1: reloadShortcut.title()}));
+      if (reloadShortcut && action) {
+        const button = UI.UIUtils.createTextButton(
+            i18nString(UIStrings.reloadPage), () => action.execute(),
+            {jslogContext: actionId, variant: Buttons.Button.Variant.TONAL});
+        const placeholder = new UI.EmptyWidget.EmptyWidget(
+            i18nString(UIStrings.noFilmstrips),
+            i18nString(
+                UIStrings.reloadAndCaptureFilmstrip,
+                {PH1: i18nString(UIStrings.reloadPage), PH2: reloadShortcut.title()}));
+        placeholder.contentElement.appendChild(button);
+        this.filmStripView.setStatusPlaceholder(placeholder);
       }
     }
   }
@@ -947,7 +966,7 @@ export class FilmStripRecorder implements Trace.TracingManager.TracingManagerCli
   startRecording(): void {
     this.#collectedTraceEvents = [];
     this.filmStripView.reset();
-    this.filmStripView.setStatusText(i18nString(UIStrings.recordingFrames));
+    this.filmStripView.setStatusPlaceholder(new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.recordingFrames), ''));
     const tracingManager =
         SDK.TargetManager.TargetManager.instance().scopeTarget()?.model(Trace.TracingManager.TracingManager);
     if (this.tracingManager || !tracingManager) {
@@ -975,7 +994,7 @@ export class FilmStripRecorder implements Trace.TracingManager.TracingManagerCli
       this.resourceTreeModel.suspendReload();
     }
     this.callback = callback;
-    this.filmStripView.setStatusText(i18nString(UIStrings.fetchingFrames));
+    this.filmStripView.setStatusPlaceholder(new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.fetchingFrames), ''));
   }
 }
 

front_end/ui/legacy/components/perf_ui/FilmStripView.test.ts

@@ -12,6 +12,7 @@ import {
 } from '../../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../../testing/TraceLoader.js';
+import * as UI from '../../legacy.js';
 
 import * as PerfUI from './perf_ui.js';
 
@@ -57,6 +58,20 @@ describeWithEnvironment('FilmStripView', function() {
     filmStrip.detach();
   });
 
+  it('shows placeholder', async function() {
+    const filmStripView = new PerfUI.FilmStripView.FilmStripView();
+    filmStripView.markAsRoot();
+    filmStripView.show(document.body);
+
+    const placeholder = new UI.Widget.Widget();
+    placeholder.contentElement.textContent = 'Placeholder';
+
+    filmStripView.setStatusPlaceholder(placeholder);
+    assert.deepEqual(filmStripView.contentElement.textContent, 'Placeholder');
+
+    filmStripView.detach();
+  });
+
   describe('FilmStripView Dialog', function() {
     async function renderDialogWithTrace(filmStrip: Trace.Extras.FilmStrip.Data, selectedFrameIndex: number):
         Promise<{dialog: PerfUI.FilmStripView.Dialog, shadowRoot: ShadowRoot}> {

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

@@ -37,15 +37,14 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/perf_ui/FilmStripView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class FilmStripView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.HBox>(UI.Widget.HBox) {
-  private statusLabel: HTMLElement;
+  private statusPlaceholder?: UI.Widget.Widget;
   private zeroTime: Trace.Types.Timing.Milli = Trace.Types.Timing.Milli(0);
   #filmStrip: Trace.Extras.FilmStrip.Data|null = null;
 
   constructor() {
     super(true);
     this.registerRequiredCSS(filmStripViewStyles);
     this.contentElement.classList.add('film-strip-view');
-    this.statusLabel = this.contentElement.createChild('div', 'label');
     this.reset();
   }
 
@@ -98,6 +97,7 @@ export class FilmStripView extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
 
     const frameElements = frames.map(frame => this.createFrameElement(frame));
+    this.statusPlaceholder?.detach();
     this.contentElement.removeChildren();
     for (const element of frameElements) {
       this.contentElement.appendChild(element);
@@ -119,12 +119,15 @@ export class FilmStripView extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   reset(): void {
     this.zeroTime = Trace.Types.Timing.Milli(0);
+    this.statusPlaceholder?.detach();
     this.contentElement.removeChildren();
-    this.contentElement.appendChild(this.statusLabel);
+    this.statusPlaceholder?.show(this.contentElement);
   }
 
-  setStatusText(text: string): void {
-    this.statusLabel.textContent = text;
+  setStatusPlaceholder(element: UI.Widget.Widget): void {
+    this.statusPlaceholder?.detach();
+    this.statusPlaceholder = element;
+    this.statusPlaceholder.show(this.contentElement);
   }
 }
 

front_end/ui/legacy/components/perf_ui/filmStripView.css

@@ -15,12 +15,6 @@
   margin-top: 2px;
 }
 
-.film-strip-view .label {
-  margin: auto;
-  font-size: 18px;
-  color: var(--sys-color-token-subtle);
-}
-
 .film-strip-view .frame {
   background: none;
   border: none;