[GM3Restyling] Update EmptyWidget description text in application panel

This CL updates the description texts in the application panel.

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

Author: ktran

front_end/panels/application/ApplicationPanelSidebar.ts

@@ -107,6 +107,10 @@ const UIStrings = {
    *@description Text in Application Panel Sidebar of the Application panel
    */
   localStorage: 'Local storage',
+  /**
+   *@description Text in the Application panel describing the local storage tab.
+   */
+  localStorageDescription: 'On this page you can view, add, edit, and delete local storage key-value pairs.',
   /**
    *@description Text in Application Panel Sidebar of the Application panel
    */
@@ -115,6 +119,10 @@ const UIStrings = {
    *@description Text in Application Panel if no session storage can be shown.
    */
   noSessionStorage: 'No session storage detected',
+  /**
+   *@description Text in the Application panel describing the session storage tab.
+   */
+  sessionStorageDescription: 'On this page you can view, add, edit, and delete session storage key-value pairs.',
   /**
    *@description Text in Application Panel Sidebar of the Application panel
    */
@@ -123,6 +131,10 @@ const UIStrings = {
    *@description Text in Application Panel if no extension storage can be shown
    */
   noExtensionStorage: 'No extension storage detected',
+  /**
+   *@description Text in the Application panel describing the extension storage tab.
+   */
+  extensionStorageDescription: 'On this page you can view, add, edit, and delete extension storage key-value pairs.',
   /**
    *@description Text for extension session storage in Application panel
    */
@@ -144,9 +156,13 @@ const UIStrings = {
    */
   cookies: 'Cookies',
   /**
-   *@description Text in Application Panel Sidebar if no cookies are set
+   *@description Text in the Application Panel if no cookies are set
    */
   noCookies: 'No cookies set',
+  /**
+   *@description Text for web cookies
+   */
+  cookiesDescription: 'On this page you can view, add, edit, and delete cookies.',
   /**
    *@description Text in Application Panel Sidebar of the Application panel
    */
@@ -163,6 +179,11 @@ const UIStrings = {
    *@description Text in App Manifest View of the Application panel
    */
   noManifestDetected: 'No manifest detected',
+  /**
+   *@description Description text on manifests in App Manifest View of the Application panel which describes the app manifest view tab
+   */
+  manifestDescription:
+      'A manifest defines how your app appears on phone’s home screens and what the app looks like on launch.',
   /**
    *@description Text in App Manifest View of the Application panel
    */
@@ -175,6 +196,10 @@ const UIStrings = {
    *@description Text in Application Panel if no indexedDB is detected
    */
   noIndexeddb: 'No indexedDB detected',
+  /**
+   *@description Text in the Application panel describing the extension storage tab.
+   */
+  indexeddbDescription: 'On this page you can view and delete indexedDB key-value pairs and databases.',
   /**
    *@description A context menu item in the Application Panel Sidebar of the Application panel
    */
@@ -211,14 +236,18 @@ const UIStrings = {
    *@description Text in Frames View of the Application panel
    */
   openedWindows: 'Opened Windows',
+  /**
+   *@description Text in Frames View of the Application panel
+   */
+  openedWindowsDescription: 'On this page you can view windows opened via window\.open\(\).',
   /**
    *@description Label for plural of worker type: web workers
    */
   webWorkers: 'Web Workers',
   /**
    *@description Label in frame tree for unavailable document
    */
-  documentNotAvailable: 'Document not available',
+  documentNotAvailable: 'No document detected',
   /**
    *@description Description of content of unavailable document in Application panel
    */
@@ -232,6 +261,10 @@ const UIStrings = {
    *@description Default name for worker
    */
   worker: 'worker',
+  /**
+   *@description Description text for describing the dedicated worker tab.
+   */
+  workerDescription: 'On this page you can view dedicated workers that are created by the parent frame.',
   /**
    * @description Aria text for screen reader to announce they can scroll to top of manifest if invoked
    */
@@ -255,6 +288,10 @@ const UIStrings = {
    *@example {https://example.com} PH1
    */
   thirdPartyPhaseout: 'Cookies from {PH1} may have been blocked due to third-party cookie phaseout.',
+  /**
+   * @description Description text in the Application Panel describing a frame's resources
+   */
+  resourceDescription: 'On this page you can view the frame\'s resources.'
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/ApplicationPanelSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -366,7 +403,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     const storageSectionTitle = i18nString(UIStrings.storage);
     const storageTreeElement = this.addSidebarSection(storageSectionTitle, 'storage');
     this.localStorageListTreeElement = new ExpandableApplicationPanelTreeElement(
-        panel, i18nString(UIStrings.localStorage), i18nString(UIStrings.noLocalStorage), '', 'local-storage');
+        panel, i18nString(UIStrings.localStorage), i18nString(UIStrings.noLocalStorage),
+        i18nString(UIStrings.localStorageDescription), 'local-storage');
     this.localStorageListTreeElement.setLink(
         'https://developer.chrome.com/docs/devtools/storage/localstorage/?utm_source=devtools' as
         Platform.DevToolsPath.UrlString);
@@ -375,7 +413,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
 
     storageTreeElement.appendChild(this.localStorageListTreeElement);
     this.sessionStorageListTreeElement = new ExpandableApplicationPanelTreeElement(
-        panel, i18nString(UIStrings.sessionStorage), i18nString(UIStrings.noSessionStorage), '', 'session-storage');
+        panel, i18nString(UIStrings.sessionStorage), i18nString(UIStrings.noSessionStorage),
+        i18nString(UIStrings.sessionStorageDescription), 'session-storage');
     this.sessionStorageListTreeElement.setLink(
         'https://developer.chrome.com/docs/devtools/storage/sessionstorage/?utm_source=devtools' as
         Platform.DevToolsPath.UrlString);
@@ -385,8 +424,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     storageTreeElement.appendChild(this.sessionStorageListTreeElement);
 
     this.extensionStorageListTreeElement = new ExpandableApplicationPanelTreeElement(
-        panel, i18nString(UIStrings.extensionStorage), i18nString(UIStrings.noExtensionStorage), '',
-        'extension-storage');
+        panel, i18nString(UIStrings.extensionStorage), i18nString(UIStrings.noExtensionStorage),
+        i18nString(UIStrings.extensionStorageDescription), 'extension-storage');
     this.extensionStorageListTreeElement.setLink(
         'https://developer.chrome.com/docs/extensions/reference/api/storage/?utm_source=devtools' as
         Platform.DevToolsPath.UrlString);
@@ -402,7 +441,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     storageTreeElement.appendChild(this.indexedDBListTreeElement);
 
     this.cookieListTreeElement = new ExpandableApplicationPanelTreeElement(
-        panel, i18nString(UIStrings.cookies), i18nString(UIStrings.noCookies), '', 'cookies');
+        panel, i18nString(UIStrings.cookies), i18nString(UIStrings.noCookies), i18nString(UIStrings.cookiesDescription),
+        'cookies');
     this.cookieListTreeElement.setLink(
         'https://developer.chrome.com/docs/devtools/storage/cookies/?utm_source=devtools' as
         Platform.DevToolsPath.UrlString);
@@ -1138,7 +1178,8 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
     const icon = IconButton.Icon.create('document');
     this.setLeadingIcons([icon]);
     self.onInvokeElement(this.listItemElement, this.onInvoke.bind(this));
-    const emptyView = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noManifestDetected), '');
+    const emptyView = new UI.EmptyWidget.EmptyWidget(
+        i18nString(UIStrings.noManifestDetected), i18nString(UIStrings.manifestDescription));
     // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     const reportView = new UI.ReportView.ReportView(i18nString(UIStrings.appManifest));
     this.view = new AppManifestView(emptyView, reportView, new Common.Throttler.Throttler(1000));
@@ -1257,7 +1298,9 @@ export class IndexedDBTreeElement extends ExpandableApplicationPanelTreeElement
   private idbDatabaseTreeElements: IDBDatabaseTreeElement[];
   private storageBucket?: Protocol.Storage.StorageBucket;
   constructor(storagePanel: ResourcesPanel, storageBucket?: Protocol.Storage.StorageBucket) {
-    super(storagePanel, i18nString(UIStrings.indexeddb), i18nString(UIStrings.noIndexeddb), '', 'indexed-db');
+    super(
+        storagePanel, i18nString(UIStrings.indexeddb), i18nString(UIStrings.noIndexeddb),
+        i18nString(UIStrings.indexeddbDescription), 'indexed-db');
     const icon = IconButton.Icon.create('database');
     this.setLeadingIcons([icon]);
     this.idbDatabaseTreeElements = [];
@@ -2262,8 +2305,8 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
         resourceType === Common.ResourceType.resourceTypes.Document ? this : this.categoryElements.get(categoryName);
     if (!categoryElement) {
       categoryElement = new ExpandableApplicationPanelTreeElement(
-          this.section.panel, resource.resourceType().category().title(), '', '', categoryName,
-          categoryName === 'Frames');
+          this.section.panel, resource.resourceType().category().title(), '', i18nString(UIStrings.resourceDescription),
+          categoryName, categoryName === 'Frames');
       this.categoryElements.set(resourceType.name(), categoryElement);
       this.appendChild(categoryElement, FrameTreeElement.presentationOrderCompare);
     }
@@ -2277,7 +2320,8 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
     let categoryElement = this.categoryElements.get(categoryKey);
     if (!categoryElement) {
       categoryElement = new ExpandableApplicationPanelTreeElement(
-          this.section.panel, i18nString(UIStrings.openedWindows), '', '', categoryKey);
+          this.section.panel, i18nString(UIStrings.openedWindows), '', i18nString(UIStrings.openedWindowsDescription),
+          categoryKey);
       this.categoryElements.set(categoryKey, categoryElement);
       this.appendChild(categoryElement, FrameTreeElement.presentationOrderCompare);
     }
@@ -2294,8 +2338,8 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
                                                                 i18nString(UIStrings.webWorkers);
     let categoryElement = this.categoryElements.get(categoryKey);
     if (!categoryElement) {
-      categoryElement =
-          new ExpandableApplicationPanelTreeElement(this.section.panel, categoryName, '', '', categoryKey);
+      categoryElement = new ExpandableApplicationPanelTreeElement(
+          this.section.panel, categoryName, '', i18nString(UIStrings.workerDescription), categoryKey);
       this.categoryElements.set(categoryKey, categoryElement);
       this.appendChild(categoryElement, FrameTreeElement.presentationOrderCompare);
     }
@@ -2400,7 +2444,8 @@ export class FrameResourceTreeElement extends ApplicationPanelTreeElement {
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (this.resource.isGenerated) {
-      this.panel.showCategoryView(i18nString(UIStrings.theContentOfThisDocumentHasBeen), '', '', null);
+      this.panel.showCategoryView(
+          '', i18nString(UIStrings.documentNotAvailable), i18nString(UIStrings.theContentOfThisDocumentHasBeen), null);
     } else {
       void this.panel.scheduleShowView(this.preparePreview());
     }

front_end/panels/application/ServiceWorkerCacheTreeElement.ts

@@ -24,6 +24,10 @@ const UIStrings = {
    *@description Text in Application Panel if no cache storage was detected.
    */
   noCacheStorage: 'No cache storage detected',
+  /**
+   *@description Description text in Application Panel describing the cache storage tab
+   */
+  cacheStorageDescription: 'On this page you can view and delete cache data.',
   /**
    *@description A context menu item in the Application Panel Sidebar of the Application panel
    */
@@ -42,7 +46,8 @@ export class ServiceWorkerCacheTreeElement extends ExpandableApplicationPanelTre
 
   constructor(resourcesPanel: ResourcesPanel, storageBucket?: Protocol.Storage.StorageBucket) {
     super(
-        resourcesPanel, i18nString(UIStrings.cacheStorage), i18nString(UIStrings.noCacheStorage), '', 'cache-storage');
+        resourcesPanel, i18nString(UIStrings.cacheStorage), i18nString(UIStrings.noCacheStorage),
+        i18nString(UIStrings.cacheStorageDescription), 'cache-storage');
     const icon = IconButton.Icon.create('database');
     this.setLink(
         'https://developer.chrome.com/docs/devtools/storage/cache/?utm_source=devtools' as

front_end/panels/application/StorageBucketsTreeElement.ts

@@ -31,6 +31,12 @@ const UIStrings = {
    * deleted independently. https://developer.chrome.com/docs/web-platform/storage-buckets.
    */
   noStorageBuckets: 'No storage buckets detected',
+  /**
+   *@description Description text in the Application Panel describing the storage buckets tab.
+   * Storage Buckets allow developers to separate site data into buckets so that they can be
+   * deleted independently. https://developer.chrome.com/docs/web-platform/storage-buckets.
+   */
+  storageBucketsDescription: 'On this page you can view and delete storage buckets, and their associated storageAPIs.'
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/StorageBucketsTreeElement.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -40,8 +46,8 @@ export class StorageBucketsTreeParentElement extends ExpandableApplicationPanelT
 
   constructor(storagePanel: ResourcesPanel) {
     super(
-        storagePanel, i18nString(UIStrings.storageBuckets), i18nString(UIStrings.noStorageBuckets), '',
-        'storage-buckets');
+        storagePanel, i18nString(UIStrings.storageBuckets), i18nString(UIStrings.noStorageBuckets),
+        i18nString(UIStrings.storageBucketsDescription), 'storage-buckets');
     const icon = IconButton.Icon.create('database');
     this.setLeadingIcons([icon]);
     this.setLink(