[GM3Restyling] Update a number of EmptyWidget view titles

This updates the empty widget view headers from:

ServiceWorkerCacheViews.ts
LayerDetailsView.ts
ResourceWebSocketFrameView.ts
DataGridWithPreview.ts

They all provide a panel for viewing their content (message, cache, ..).

Screenshot: https://imgur.com/a/3yrNaax
Bug: 325443331
Change-Id: I0d753e5d2fae02dc98da26a24462decdce8fb500
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6170715
Auto-Submit: Kim-Anh Tran <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: ktran

front_end/panels/application/CookieItemsView.ts

@@ -51,6 +51,10 @@ const UIStrings = {
    *@description Text for web cookies
    */
   cookies: 'Cookies',
+  /**
+   *@description Text in Cookie Items View of the Application panel to indicate that no cookie has been selected for preview
+   */
+  noCookieSelected: 'No cookie selected',
   /**
    *@description Text in Cookie Items View of the Application panel
    */
@@ -199,7 +203,8 @@ export class CookieItemsView extends StorageItemsView {
     this.splitWidget.installResizer(resizer);
 
     this.previewWidget = new CookiePreviewWidget();
-    this.emptyWidget = new UI.EmptyWidget.EmptyWidget('', i18nString(UIStrings.selectACookieToPreviewItsValue));
+    this.emptyWidget = new UI.EmptyWidget.EmptyWidget(
+        i18nString(UIStrings.noCookieSelected), i18nString(UIStrings.selectACookieToPreviewItsValue));
     this.emptyWidget.show(this.previewPanel.contentElement);
 
     this.onlyIssuesFilterUI = new UI.Toolbar.ToolbarCheckbox(

front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -37,6 +37,10 @@ const UIStrings = {
    *@description Text in Service Worker Cache Views of the Application panel
    */
   filterByPath: 'Filter by path',
+  /**
+   *@description Text in Service Worker Cache Views of the Application panel that shows if no cache entry is selected for preview
+   */
+  noCacheEntrySelected: 'No cache entry selected',
   /**
    *@description Text in Service Worker Cache Views of the Application panel
    */
@@ -191,7 +195,8 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
       this.preview.detach();
     }
     if (!preview) {
-      preview = new UI.EmptyWidget.EmptyWidget('', i18nString(UIStrings.selectACacheEntryAboveToPreview));
+      preview = new UI.EmptyWidget.EmptyWidget(
+          i18nString(UIStrings.noCacheEntrySelected), i18nString(UIStrings.selectACacheEntryAboveToPreview));
     }
     this.preview = preview;
     this.preview.show(this.previewPanel.element);

front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -50,6 +50,10 @@ const UIStrings = {
    *@description Text in Layer Details View of the Layers panel
    */
   selectALayerToSeeItsDetails: 'Select a layer to see its details',
+  /**
+   *@description Text in Layer Details View of the Layers panel if no layer is selected for viewing its content
+   */
+  noLayerSelected: 'No layer selected',
   /**
    *@description Element text content in Layer Details View of the Layers panel
    *@example {Touch event handler} PH1
@@ -179,10 +183,12 @@ export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes
   constructor(layerViewHost: LayerViewHost) {
     super(true);
     this.element.setAttribute('jslog', `${VisualLogging.pane('layers-details')}`);
+    this.contentElement.classList.add('layer-details-container');
 
     this.layerViewHost = layerViewHost;
     this.layerViewHost.registerView(this);
-    this.emptyWidget = new UI.EmptyWidget.EmptyWidget('', i18nString(UIStrings.selectALayerToSeeItsDetails));
+    this.emptyWidget = new UI.EmptyWidget.EmptyWidget(
+        i18nString(UIStrings.noLayerSelected), i18nString(UIStrings.selectALayerToSeeItsDetails));
     this.layerSnapshotMap = this.layerViewHost.getLayerSnapshotMap();
 
     this.buildContent();

front_end/panels/layer_viewer/layerDetailsView.css

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+.layer-details-container:has(.empty-view-scroller) {
+  display: flex;
+}
+
 table td {
   padding-left: 8px;
 }

front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -59,6 +59,10 @@ const UIStrings = {
    *@description Text to filter result items
    */
   filter: 'Filter',
+  /**
+   *@description Text in Resource Web Socket Frame View of the Network panel that shows if no message is selected for viewing its content
+   */
+  noMessageSelected: 'No message selected',
   /**
    *@description Text in Resource Web Socket Frame View of the Network panel
    */
@@ -237,7 +241,8 @@ export class ResourceWebSocketFrameView extends UI.Widget.VBox {
     mainContainer.setMinimumSize(0, 72);
     this.splitWidget.setMainWidget(mainContainer);
 
-    this.frameEmptyWidget = new UI.EmptyWidget.EmptyWidget('', i18nString(UIStrings.selectMessageToBrowseItsContent));
+    this.frameEmptyWidget = new UI.EmptyWidget.EmptyWidget(
+        i18nString(UIStrings.noMessageSelected), i18nString(UIStrings.selectMessageToBrowseItsContent));
     this.splitWidget.setSidebarWidget(this.frameEmptyWidget);
 
     this.selectedNode = null;

front_end/ui/legacy/components/data_grid/DataGridWithPreview.test.ts

@@ -101,7 +101,8 @@ describeWithEnvironment('DataGridWithPreview', () => {
     await raf();
 
     // Check preview was updated.
-    assert.strictEqual(dataGridWithPreview.previewPanelForTesting.element.innerText, 'Select a value to preview');
+    assert.strictEqual(
+        dataGridWithPreview.previewPanelForTesting.element.innerText, 'No value selected\nSelect a value to preview');
   });
 
   it('preview changed when value changes', async () => {

front_end/ui/legacy/components/data_grid/DataGridWithPreview.ts

@@ -34,6 +34,10 @@ import {ARIAUtils, EmptyWidget, SplitWidget, Widget} from '../../legacy.js';
 import {type ColumnDescriptor, DataGridImpl, DataGridNode, Events} from './DataGrid.js';
 
 const UIStrings = {
+  /**
+   *@description Text that shows in the Applicaiton Panel if no value is selected for preview
+   */
+  noPreviewSelected: 'No value selected',
   /**
    *@description Preview text when viewing storage in Application panel
    */
@@ -275,7 +279,8 @@ export class DataGridWithPreview {
       this.#preview.detach();
     }
     if (!preview) {
-      preview = new EmptyWidget.EmptyWidget('', i18nString(UIStrings.selectAValueToPreview));
+      preview = new EmptyWidget.EmptyWidget(
+          i18nString(UIStrings.noPreviewSelected), i18nString(UIStrings.selectAValueToPreview));
     }
     this.#previewValue = value;
     this.#preview = preview;