[GM3Restyling] Update EmptyWidget headlines for the Application panel

Previously, selected tabs in the application panel had a static
headline. Since we are now differentiating between e.g. having
cookies and no cookies, we need to allow for switching the headline.

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

Author: ktran

front_end/panels/application/ApplicationPanelSidebar.ts

@@ -98,6 +98,11 @@ const UIStrings = {
    *@description Text in Application Panel Sidebar of the Application panel
    */
   storage: 'Storage',
+  /**
+   *@description Text in Application Panelthat shows if no local storage
+   *             can be shown.
+   */
+  noLocalStorage: 'No local storage detected',
   /**
    *@description Text in Application Panel Sidebar of the Application panel
    */
@@ -106,10 +111,18 @@ const UIStrings = {
    *@description Text in Application Panel Sidebar of the Application panel
    */
   sessionStorage: 'Session storage',
+  /**
+   *@description Text in Application Panel if no session storage can be shown.
+   */
+  noSessionStorage: 'No session storage detected',
   /**
    *@description Text in Application Panel Sidebar of the Application panel
    */
   extensionStorage: 'Extension storage',
+  /**
+   *@description Text in Application Panel if no extension storage can be shown
+   */
+  noExtensionStorage: 'No extension storage detected',
   /**
    *@description Text for extension session storage in Application panel
    */
@@ -130,6 +143,10 @@ const UIStrings = {
    *@description Text for web cookies
    */
   cookies: 'Cookies',
+  /**
+   *@description Text in Application Panel Sidebar if no cookies are set
+   */
+  noCookies: 'No cookies set',
   /**
    *@description Text in Application Panel Sidebar of the Application panel
    */
@@ -154,6 +171,10 @@ const UIStrings = {
    *@description Text in Application Panel Sidebar of the Application panel
    */
   indexeddb: 'IndexedDB',
+  /**
+   *@description Text in Application Panel if no indexedDB is detected
+   */
+  noIndexeddb: 'No indexedDB detected',
   /**
    *@description A context menu item in the Application Panel Sidebar of the Application panel
    */
@@ -344,17 +365,17 @@ 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), 'local-storage');
+    this.localStorageListTreeElement = new ExpandableApplicationPanelTreeElement(
+        panel, i18nString(UIStrings.localStorage), i18nString(UIStrings.noLocalStorage), '', 'local-storage');
     this.localStorageListTreeElement.setLink(
         'https://developer.chrome.com/docs/devtools/storage/localstorage/?utm_source=devtools' as
         Platform.DevToolsPath.UrlString);
     const localStorageIcon = IconButton.Icon.create('table');
     this.localStorageListTreeElement.setLeadingIcons([localStorageIcon]);
 
     storageTreeElement.appendChild(this.localStorageListTreeElement);
-    this.sessionStorageListTreeElement =
-        new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.sessionStorage), 'session-storage');
+    this.sessionStorageListTreeElement = new ExpandableApplicationPanelTreeElement(
+        panel, i18nString(UIStrings.sessionStorage), i18nString(UIStrings.noSessionStorage), '', 'session-storage');
     this.sessionStorageListTreeElement.setLink(
         'https://developer.chrome.com/docs/devtools/storage/sessionstorage/?utm_source=devtools' as
         Platform.DevToolsPath.UrlString);
@@ -363,8 +384,9 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
 
     storageTreeElement.appendChild(this.sessionStorageListTreeElement);
 
-    this.extensionStorageListTreeElement =
-        new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.extensionStorage), 'extension-storage');
+    this.extensionStorageListTreeElement = new ExpandableApplicationPanelTreeElement(
+        panel, i18nString(UIStrings.extensionStorage), i18nString(UIStrings.noExtensionStorage), '',
+        'extension-storage');
     this.extensionStorageListTreeElement.setLink(
         'https://developer.chrome.com/docs/extensions/reference/api/storage/?utm_source=devtools' as
         Platform.DevToolsPath.UrlString);
@@ -379,8 +401,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
         Platform.DevToolsPath.UrlString);
     storageTreeElement.appendChild(this.indexedDBListTreeElement);
 
-    this.cookieListTreeElement =
-        new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.cookies), 'cookies');
+    this.cookieListTreeElement = new ExpandableApplicationPanelTreeElement(
+        panel, i18nString(UIStrings.cookies), i18nString(UIStrings.noCookies), '', 'cookies');
     this.cookieListTreeElement.setLink(
         'https://developer.chrome.com/docs/devtools/storage/cookies/?utm_source=devtools' as
         Platform.DevToolsPath.UrlString);
@@ -1235,7 +1257,7 @@ 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), 'indexed-db');
+    super(storagePanel, i18nString(UIStrings.indexeddb), i18nString(UIStrings.noIndexeddb), '', 'indexed-db');
     const icon = IconButton.Icon.create('database');
     this.setLeadingIcons([icon]);
     this.idbDatabaseTreeElements = [];
@@ -1861,7 +1883,11 @@ export class StorageCategoryView extends UI.Widget.VBox {
     this.emptyWidget.show(this.element);
   }
 
-  setHeader(header: string): void {
+  setText(text: string): void {
+    this.emptyWidget.text = text;
+  }
+
+  setHeadline(header: string): void {
     this.emptyWidget.header = header;
   }
 
@@ -2236,7 +2262,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(), '', '', categoryName,
+          categoryName === 'Frames');
       this.categoryElements.set(resourceType.name(), categoryElement);
       this.appendChild(categoryElement, FrameTreeElement.presentationOrderCompare);
     }
@@ -2250,7 +2277,7 @@ 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), '', '', categoryKey);
       this.categoryElements.set(categoryKey, categoryElement);
       this.appendChild(categoryElement, FrameTreeElement.presentationOrderCompare);
     }
@@ -2267,7 +2294,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, '', '', categoryKey);
       this.categoryElements.set(categoryKey, categoryElement);
       this.appendChild(categoryElement, FrameTreeElement.presentationOrderCompare);
     }
@@ -2364,7 +2392,6 @@ export class FrameResourceTreeElement extends ApplicationPanelTreeElement {
       if (view) {
         return view;
       }
-
       return new UI.EmptyWidget.EmptyWidget('', this.resource.url);
     });
     return this.previewPromise;
@@ -2373,7 +2400,7 @@ 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.theContentOfThisDocumentHasBeen), '', '', null);
     } else {
       void this.panel.scheduleShowView(this.preparePreview());
     }

front_end/panels/application/ApplicationPanelTreeElement.ts

@@ -55,12 +55,21 @@ export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeE
   protected readonly categoryName: string;
   protected categoryLink: Platform.DevToolsPath.UrlString|null;
 
-  constructor(resourcesPanel: ResourcesPanel, categoryName: string, settingsKey: string, settingsDefault = false) {
+  // These strings are used for the empty state in each top most tree element
+  // in the Application Panel.
+  protected emptyCategoryHeadline: string;
+  protected categoryDescription: string;
+
+  constructor(
+      resourcesPanel: ResourcesPanel, categoryName: string, emptyCategoryHeadline: string, categoryDescription: string,
+      settingsKey: string, settingsDefault = false) {
     super(resourcesPanel, categoryName, false, settingsKey);
     this.expandedSetting =
         Common.Settings.Settings.instance().createSetting('resources-' + settingsKey + '-expanded', settingsDefault);
     this.categoryName = categoryName;
     this.categoryLink = null;
+    this.emptyCategoryHeadline = emptyCategoryHeadline;
+    this.categoryDescription = categoryDescription;
   }
 
   override get itemURL(): Platform.DevToolsPath.UrlString {
@@ -73,10 +82,33 @@ export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeE
 
   override onselect(selectedByUser: boolean|undefined): boolean {
     super.onselect(selectedByUser);
-    this.resourcesPanel.showCategoryView(this.categoryName, this.categoryLink);
+    this.updateCategoryView();
     return false;
   }
 
+  private updateCategoryView(): void {
+    const headline = this.childCount() === 0 ? this.emptyCategoryHeadline : this.categoryName;
+    this.resourcesPanel.showCategoryView(this.categoryName, headline, this.categoryDescription, this.categoryLink);
+  }
+
+  override appendChild(
+      child: UI.TreeOutline.TreeElement,
+      comparator?: ((arg0: UI.TreeOutline.TreeElement, arg1: UI.TreeOutline.TreeElement) => number)|undefined): void {
+    super.appendChild(child, comparator);
+    // Only update if relevant (changing from 0 to 1 child).
+    if (this.selected && this.childCount() === 1) {
+      this.updateCategoryView();
+    }
+  }
+
+  override removeChild(child: UI.TreeOutline.TreeElement): void {
+    super.removeChild(child);
+    // Only update if relevant (changing to 0 children).
+    if (this.selected && this.childCount() === 0) {
+      this.updateCategoryView();
+    }
+  }
+
   override onattach(): void {
     super.onattach();
     if (this.expandedSetting.get()) {

front_end/panels/application/PreloadingTreeElement.ts

@@ -92,7 +92,7 @@ export class PreloadingSummaryTreeElement extends ExpandableApplicationPanelTree
   #attempt: PreloadingAttemptTreeElement|null = null;
 
   constructor(panel: ResourcesPanel) {
-    super(panel, i18nString(UIStrings.speculativeLoads), 'preloading');
+    super(panel, i18nString(UIStrings.speculativeLoads), '', '', 'preloading');
 
     const icon = IconButton.Icon.create('arrow-up-down');
     this.setLeadingIcons([icon]);
@@ -103,7 +103,7 @@ export class PreloadingSummaryTreeElement extends ExpandableApplicationPanelTree
 
   // Note that
   //
-  // - TreeElement.ensureSelection assumes TreeElement.treeOutline initalized.
+  // - TreeElement.ensureSelection assumes TreeElement.treeOutline initialized.
   // - TreeElement.treeOutline is propagated in TreeElement.appendChild.
   //
   // So, `this.constructChildren` should be called just after `parent.appendChild(this)`

front_end/panels/application/ResourcesPanel.ts

@@ -33,7 +33,6 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
   private domStorageView: DOMStorageItemsView|null;
   private extensionStorageView: ExtensionStorageItemsView|null;
   private cookieView: CookieItemsView|null;
-  private readonly emptyWidget: UI.EmptyWidget.EmptyWidget|null;
   private readonly sidebar: ApplicationPanelSidebar;
 
   private constructor() {
@@ -59,8 +58,6 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
 
     this.cookieView = null;
 
-    this.emptyWidget = null;
-
     this.sidebar = new ApplicationPanelSidebar(this);
     this.sidebar.show(this.panelSidebarElement());
   }
@@ -144,13 +141,16 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
     return view;
   }
 
-  showCategoryView(categoryName: string, categoryLink: Platform.DevToolsPath.UrlString|null): void {
+  showCategoryView(
+      categoryName: string, categoryHeadline: string, categoryDescription: string,
+      categoryLink: Platform.DevToolsPath.UrlString|null): void {
     if (!this.categoryView) {
       this.categoryView = new StorageCategoryView();
     }
     this.categoryView.element.setAttribute(
         'jslog', `${VisualLogging.pane().context(Platform.StringUtilities.toKebabCase(categoryName))}`);
-    this.categoryView.setHeader(categoryName);
+    this.categoryView.setHeadline(categoryHeadline);
+    this.categoryView.setText(categoryDescription);
     this.categoryView.setLink(categoryLink);
     this.showView(this.categoryView);
   }

front_end/panels/application/ServiceWorkerCacheTreeElement.ts

@@ -20,6 +20,10 @@ const UIStrings = {
    *@description Text in Application Panel Sidebar of the Application panel
    */
   cacheStorage: 'Cache storage',
+  /**
+   *@description Text in Application Panel if no cache storage was detected.
+   */
+  noCacheStorage: 'No cache storage detected',
   /**
    *@description A context menu item in the Application Panel Sidebar of the Application panel
    */
@@ -37,7 +41,8 @@ export class ServiceWorkerCacheTreeElement extends ExpandableApplicationPanelTre
   private storageBucket?: Protocol.Storage.StorageBucket;
 
   constructor(resourcesPanel: ResourcesPanel, storageBucket?: Protocol.Storage.StorageBucket) {
-    super(resourcesPanel, i18nString(UIStrings.cacheStorage), 'cache-storage');
+    super(
+        resourcesPanel, i18nString(UIStrings.cacheStorage), i18nString(UIStrings.noCacheStorage), '', '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

@@ -20,10 +20,17 @@ import {ServiceWorkerCacheTreeElement} from './ServiceWorkerCacheTreeElement.js'
 const UIStrings = {
   /**
    *@description Label for an item in the Application Panel Sidebar of the Application panel
-   * Storage Buckets allow developers to seperate site data into buckets so that they can be
+   * Storage Buckets allow developers to separate site data into buckets so that they can be
    * deleted independently.
    */
   storageBuckets: 'Storage buckets',
+  /**
+   *@description Text for an item in the Application Panel
+   * if no storage buckets are available to show. 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.
+   */
+  noStorageBuckets: 'No storage buckets detected',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/StorageBucketsTreeElement.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -32,7 +39,9 @@ export class StorageBucketsTreeParentElement extends ExpandableApplicationPanelT
   private bucketTreeElements: Set<StorageBucketsTreeElement> = new Set();
 
   constructor(storagePanel: ResourcesPanel) {
-    super(storagePanel, i18nString(UIStrings.storageBuckets), 'storage-buckets');
+    super(
+        storagePanel, i18nString(UIStrings.storageBuckets), i18nString(UIStrings.noStorageBuckets), '',
+        'storage-buckets');
     const icon = IconButton.Icon.create('database');
     this.setLeadingIcons([icon]);
     this.setLink(
@@ -134,7 +143,7 @@ export class StorageBucketsTreeElement extends ExpandableApplicationPanelTreeEle
       bucketInfo: Protocol.Storage.StorageBucketInfo) {
     const {bucket} = bucketInfo;
     const {origin} = SDK.StorageKeyManager.parseStorageKey(bucketInfo.bucket.storageKey);
-    super(resourcesPanel, `${bucket.name} - ${origin}`, 'storage-bucket');
+    super(resourcesPanel, `${bucket.name} - ${origin}`, '', '', 'storage-bucket');
     this.bucketModel = model;
     this.storageBucketInfo = bucketInfo;
     const icon = IconButton.Icon.create('database');

front_end/ui/legacy/EmptyWidget.ts

@@ -57,13 +57,14 @@ export class EmptyWidget extends VBox {
     this.contentElement.setAttribute('jslog', `${VisualLogging.section('empty-view')}`);
     this.#headerElement = this.contentElement.createChild('div', 'header');
     this.#headerElement.textContent = header;
-    this.#textElement = this.contentElement.createChild('div', 'description');
+    this.#textElement = this.contentElement.createChild('div', 'description').createChild('span');
     this.#textElement.textContent = text;
   }
 
   appendLink(link: Platform.DevToolsPath.UrlString): HTMLElement {
     const learnMoreLink = XLink.create(link, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more');
-    return this.#textElement.appendChild(learnMoreLink) as HTMLElement;
+    this.#textElement.insertAdjacentElement('afterend', learnMoreLink);
+    return learnMoreLink;
   }
 
   set text(text: string) {