chrome-devtools-frontend 1.0.1386602 → 1.0.1418433

package/front_end/panels/animation/animationTimeline.css

@@ -40,12 +40,12 @@
 }
 
 path.animation-keyframe {
-  fill-opacity: 0.2;
+  fill-opacity: 20%;
 }
 
 .animation-node-selected path.animation-keyframe,
 svg.animation-ui g:first-child:hover path.animation-keyframe {
-  fill-opacity: 0.4;
+  fill-opacity: 40%;
 }
 
 line.animation-line {
@@ -102,10 +102,6 @@ circle.animation-keyframe-point:active {
   flex: 0 0 auto;
 }
 
-.animation-timeline-toolbar {
-  display: inline-block;
-}
-
 .animation-timeline-header {
   height: 28px;
   border-bottom: 1px solid var(--sys-color-divider);
@@ -228,10 +224,7 @@ circle.animation-keyframe-point:active {
 
 svg.animation-timeline-grid {
   position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
 }
@@ -282,7 +275,7 @@ svg.animation-ui path:focus-visible {
 
 .animation-keyframe-step line {
   stroke-width: 2;
-  stroke-opacity: 0.3;
+  stroke-opacity: 30%;
 }
 
 text.animation-timeline-grid-label {
@@ -305,6 +298,7 @@ text.animation-timeline-grid-label {
   position: relative;
 
   & .screenshot-arrow {
+    /* stylelint-disable-next-line custom-property-pattern */
     background-image: var(--image-file-popoverArrows);
     background-position: 0 76px;
     width: 19px;
@@ -360,9 +354,8 @@ text.animation-timeline-grid-label {
 .animation-timeline-rows,
 .animation-timeline-rows-hint {
   flex-grow: 1;
-  overflow-y: auto;
+  overflow: hidden auto;
   z-index: 1;
-  overflow-x: hidden;
 }
 
 .animation-timeline-rows-hint {
@@ -382,7 +375,7 @@ text.animation-timeline-grid-label {
   padding: 10px;
 }
 
-.toolbar.animation-controls-toolbar {
+.animation-controls-toolbar {
   flex: 0 0 auto;
 }
 
@@ -537,7 +530,7 @@ text.animation-timeline-grid-label {
   outline-offset: 2px;
 }
 
-.animation-playback-rate-button:not(.selected):not([disabled]):hover {
+.animation-playback-rate-button:not(.selected, [disabled]):hover {
   background: var(--sys-color-state-hover-on-subtle);
 }
 

package/front_end/panels/application/AppManifestView.test.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import {getCleanTextContentFromElements} from '../../testing/DOMHelpers.js';
@@ -13,6 +13,8 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import * as Application from './application.js';
 
+const {urlString} = Platform.DevToolsPath;
+
 describeWithMockConnection('AppManifestView', () => {
   const FIXTURES_96X96_URL = `${new URL('./fixtures/96x96.png', import.meta.url)}`;
   const FIXTURES_320X320_URL = `${new URL('./fixtures/320x320.png', import.meta.url)}`;
@@ -28,7 +30,7 @@ describeWithMockConnection('AppManifestView', () => {
     const tabTarget = createTarget({type: SDK.Target.Type.TAB});
     createTarget({parentTarget: tabTarget, subtype: 'prerender'});
     target = createTarget({parentTarget: tabTarget});
-    emptyView = new UI.EmptyWidget.EmptyWidget('');
+    emptyView = new UI.EmptyWidget.EmptyWidget('', '');
     reportView = new UI.ReportView.ReportView('');
     throttler = new Common.Throttler.Throttler(0);
   });
@@ -41,7 +43,7 @@ describeWithMockConnection('AppManifestView', () => {
     const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
     assert.exists(resourceTreeModel);
 
-    const URL = 'http://example.com' as Platform.DevToolsPath.UrlString;
+    const URL = urlString`http://example.com`;
     const fetchAppManifest = sinon.stub(resourceTreeModel, 'fetchAppManifest');
     fetchAppManifest.onCall(0).resolves({url: URL, data: null, errors: []});
     fetchAppManifest.onCall(1).resolves({url: URL, data: '{}', errors: []});
@@ -78,7 +80,7 @@ describeWithMockConnection('AppManifestView', () => {
     const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
     assert.exists(resourceTreeModel);
 
-    const URL = 'https://www.example.com' as Platform.DevToolsPath.UrlString;
+    const URL = urlString`https://www.example.com`;
     const fetchAppManifest = sinon.stub(resourceTreeModel, 'fetchAppManifest');
     fetchAppManifest.resolves({url: URL, data: '{"display_override": ["window-controls-overlay"]}', errors: []});
 
@@ -108,21 +110,21 @@ describeWithMockConnection('AppManifestView', () => {
       height: 512,
       formatted: '512×512px',
     } as Application.AppManifestView.ParsedSize];
-    assert.deepStrictEqual(parsed, expected);
+    assert.deepEqual(parsed, expected);
   });
 
   it('can handle missing ‘sizes’-field', async () => {
     view = new Application.AppManifestView.AppManifestView(emptyView, reportView, throttler);
     const parsed = view.parseSizes(
         undefined as unknown as string, 'Icon' as Platform.UIString.LocalizedString, 'https://web.dev/image.html', []);
-    assert.deepStrictEqual(parsed, []);
+    assert.deepEqual(parsed, []);
   });
 
   async function renderWithWarnings(manifest: string): Promise<string[]> {
     const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
     assert.exists(resourceTreeModel);
 
-    const URL = window.location.origin as Platform.DevToolsPath.UrlString;
+    const URL = urlString`${window.location.origin}`;
     const fetchAppManifest = sinon.stub(resourceTreeModel, 'fetchAppManifest');
     fetchAppManifest.resolves({url: URL, data: manifest, errors: []});
 
@@ -181,7 +183,7 @@ describeWithMockConnection('AppManifestView', () => {
       'Richer PWA Install UI won’t be available on mobile. Please add at least one screenshot for which form_factor is not set or set to a value other than wide.',
       'Most operating systems require square icons. Please include at least one square icon in the array.',
     ];
-    assert.deepStrictEqual(actual, expected);
+    assert.deepEqual(actual, expected);
   });
 
   it('displays warnings for too many mobile screenshots', async () => {
@@ -224,7 +226,7 @@ describeWithMockConnection('AppManifestView', () => {
       'No more than 5 screenshots will be displayed on mobile. The rest will be ignored.',
       'Most operating systems require square icons. Please include at least one square icon in the array.',
     ];
-    assert.deepStrictEqual(actual, expected);
+    assert.deepEqual(actual, expected);
   });
 
   it('displays warnings for too many desktop screenshots and wrong aspect ratio', async () => {
@@ -292,7 +294,7 @@ describeWithMockConnection('AppManifestView', () => {
       'No more than 8 screenshots will be displayed on desktop. The rest will be ignored.',
       'Most operating systems require square icons. Please include at least one square icon in the array.',
     ];
-    assert.deepStrictEqual(actual, expected);
+    assert.deepEqual(actual, expected);
   });
 
   it('displays "form-factor", "platform" and "label" properties for screenshots', async () => {
@@ -312,10 +314,10 @@ describeWithMockConnection('AppManifestView', () => {
     const screenshotSection =
         reportView.element.shadowRoot?.querySelectorAll<HTMLDivElement>('.report-section')[7] || null;
     assert.instanceOf(screenshotSection, HTMLDivElement);
-    assert.deepStrictEqual(
+    assert.deepEqual(
         getCleanTextContentFromElements(screenshotSection, '.report-field-name').slice(0, 3),
         ['Form factor', 'Label', 'Platform']);
-    assert.deepStrictEqual(
+    assert.deepEqual(
         getCleanTextContentFromElements(screenshotSection, '.report-field-value').slice(0, 3),
         ['wide', 'Dummy Screenshot', 'windows']);
   });

package/front_end/panels/application/AppManifestView.ts

@@ -450,14 +450,14 @@ export type ParsedSize = {
   formatted: string,
 };
 
-type Screenshot = {
-  src: string,
-  type?: string,
-  sizes?: string,
-  label?: string,
-  form_factor?: string,  // eslint-disable-line @typescript-eslint/naming-convention
-  platform?: string,
-};
+interface Screenshot {
+  src: string;
+  type?: string;
+  sizes?: string;
+  label?: string;
+  form_factor?: string;  // eslint-disable-line @typescript-eslint/naming-convention
+  platform?: string;
+}
 
 export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
     implements SDK.TargetManager.Observer {
@@ -493,6 +493,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
       emptyView: UI.EmptyWidget.EmptyWidget, reportView: UI.ReportView.ReportView,
       throttler: Common.Throttler.Throttler) {
     super(true);
+    this.registerRequiredCSS(appManifestViewStyles);
 
     this.contentElement.classList.add('manifest-container');
     this.contentElement.setAttribute('jslog', `${VisualLogging.pane('manifest')}`);
@@ -504,7 +505,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.emptyView.hideWidget();
 
     this.reportView = reportView;
-
+    this.reportView.registerRequiredCSS(appManifestViewStyles);
     this.reportView.element.classList.add('manifest-view-header');
     this.reportView.show(this.contentElement);
     this.reportView.hideWidget();
@@ -1091,7 +1092,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     try {
       await result;
       return {wrapper, image};
-    } catch (e) {
+    } catch {
     }
     return null;
   }
@@ -1235,11 +1236,6 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     field.appendChild(wrapper);
     return {imageResourceErrors, squareSizedIconAvailable, naturalWidth, naturalHeight};
   }
-  override wasShown(): void {
-    super.wasShown();
-    this.reportView.registerCSSFiles([appManifestViewStyles]);
-    this.registerCSSFiles([appManifestViewStyles]);
-  }
 
   private async appendWindowControlsToSection(
       overlayModel: SDK.OverlayModel.OverlayModel, url: Platform.DevToolsPath.UrlString,
@@ -1259,7 +1255,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
       await this.overlayModel?.toggleWindowControlsToolbar(wcoOsCheckbox.checkboxElement.checked);
     });
 
-    const osSelectElement = (wcoOsCheckbox.createChild('select', 'chrome-select') as HTMLSelectElement);
+    const osSelectElement = wcoOsCheckbox.createChild('select');
     osSelectElement.appendChild(UI.UIUtils.createOption('Windows', SDK.OverlayModel.EmulatedOSType.WINDOWS, 'windows'));
     osSelectElement.appendChild(UI.UIUtils.createOption('macOS', SDK.OverlayModel.EmulatedOSType.MAC, 'macos'));
     osSelectElement.appendChild(UI.UIUtils.createOption('Linux', SDK.OverlayModel.EmulatedOSType.LINUX, 'linux'));
@@ -1289,7 +1285,7 @@ export const enum Events {
   MANIFEST_RENDERED = 'ManifestRendered',
 }
 
-export type EventTypes = {
-  [Events.MANIFEST_DETECTED]: boolean,
-  [Events.MANIFEST_RENDERED]: void,
-};
+export interface EventTypes {
+  [Events.MANIFEST_DETECTED]: boolean;
+  [Events.MANIFEST_RENDERED]: void;
+}

package/front_end/panels/application/ApplicationPanelSidebar.test.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import type * as Common from '../../core/common/common.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
@@ -12,12 +12,12 @@ import {
   setMockConnectionResponseHandler,
 } from '../../testing/MockConnection.js';
 import {createResource, getMainFrame} from '../../testing/ResourceTreeHelpers.js';
-import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as Application from './application.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+const {urlString} = Platform.DevToolsPath;
 
 class SharedStorageTreeElementListener {
   #sidebar: Application.ApplicationPanelSidebar.ApplicationPanelSidebar;
@@ -145,7 +145,7 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
     resourceTreeModel.dispatchEventToListeners(SDK.ResourceTreeModel.Events.CachedResourcesLoaded, resourceTreeModel);
 
     assert.strictEqual(sidebar.cookieListTreeElement.childCount(), 2);
-    assert.deepStrictEqual(
+    assert.deepEqual(
         sidebar.cookieListTreeElement.children().map(e => e.title),
         ['http://www.example.com', 'http://www.example.org']);
   });
@@ -180,7 +180,7 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
     assert.isTrue(setTrackingSpy.calledOnceWithExactly({enable: true}));
 
     assert.strictEqual(sidebar.sharedStorageListTreeElement.childCount(), 3);
-    assert.deepStrictEqual(sidebar.sharedStorageListTreeElement.children().map(e => e.title), [
+    assert.deepEqual(sidebar.sharedStorageListTreeElement.children().map(e => e.title), [
       TEST_ORIGIN_A,
       TEST_ORIGIN_B,
       TEST_ORIGIN_C,
@@ -221,12 +221,11 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
       if (useTreeView) {
         assert.strictEqual(sidebar.extensionStorageListTreeElement!.childCount(), 1);
         assert.strictEqual(sidebar.extensionStorageListTreeElement!.children()[0].title, TEST_EXTENSION_NAME);
-        assert.deepStrictEqual(
+        assert.deepEqual(
             sidebar.extensionStorageListTreeElement!.children()[0].children().map(e => e.title), ['Session', 'Local']);
       } else {
         assert.strictEqual(sidebar.extensionStorageListTreeElement!.childCount(), 2);
-        assert.deepStrictEqual(
-            sidebar.extensionStorageListTreeElement!.children().map(e => e.title), ['Session', 'Local']);
+        assert.deepEqual(sidebar.extensionStorageListTreeElement!.children().map(e => e.title), ['Session', 'Local']);
       }
 
       extensionStorageModel.dispatchEventToListeners(
@@ -281,7 +280,7 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
     Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
     const sidebar = await Application.ResourcesPanel.ResourcesPanel.showAndGetSidebar();
     const components = expectedCall.split('.');
-    assert.strictEqual(components.length, 2);
+    assert.lengthOf(components, 2);
     // @ts-ignore
     const object = sidebar[components[0]];
     assert.exists(object);
@@ -300,7 +299,7 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
     SDK.TargetManager.TargetManager.instance().setScopeTarget(inScope ? target : null);
     const expectedCall = await getExpectedCall(expectedCallString);
     const model = target.model(modelClass);
-    await coordinator.done({waitForWork: true});
+    await RenderCoordinator.done({waitForWork: true});
     assert.exists(model);
     const data = [{...MOCK_EVENT_ITEM, model}] as Common.EventTarget.EventPayloadToRestParameters<Events, T>;
     model.dispatchEventToListeners(event as Platform.TypeScriptUtilities.NoUnion<T>, ...data);
@@ -365,7 +364,7 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
     sinon.stub(model, getter).returns([MOCK_GETTER_ITEM]);
     SDK.TargetManager.TargetManager.instance().setScopeTarget(target);
     await new Promise(resolve => setTimeout(resolve, 0));
-    assert.strictEqual(expectedCall.called, true);
+    assert.isTrue(expectedCall.called);
   };
 
   it('adds DOM storage element after scope change',
@@ -437,7 +436,7 @@ describeWithMockConnection('ResourcesSection', () => {
       assert.strictEqual(treeElement.childCount(), 0);
       const frame = getMainFrame(target);
 
-      const url = 'http://example.com' as Platform.DevToolsPath.UrlString;
+      const url = urlString`http://example.com`;
       assert.strictEqual(treeElement.firstChild()?.childCount() ?? 0, 0);
       createResource(frame, url, 'text/html', '');
       assert.strictEqual(treeElement.firstChild()?.childCount() ?? 0, inScope ? 1 : 0);
@@ -449,7 +448,7 @@ describeWithMockConnection('ResourcesSection', () => {
       const treeElement = new UI.TreeOutline.TreeElement();
       new Application.ApplicationPanelSidebar.ResourcesSection(panel, treeElement);
 
-      const url = 'http://example.com' as Platform.DevToolsPath.UrlString;
+      const url = urlString`http://example.com`;
       createResource(getMainFrame(target), url, 'text/html', '');
       assert.strictEqual(treeElement.firstChild()?.childCount() ?? 0, 0);
 

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -98,18 +98,43 @@ 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
    */
   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
    */
   sessionStorage: 'Session storage',
+  /**
+   *@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
    */
   extensionStorage: 'Extension storage',
+  /**
+   *@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
    */
@@ -130,6 +155,14 @@ const UIStrings = {
    *@description Text for web cookies
    */
   cookies: 'Cookies',
+  /**
+   *@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
    */
@@ -146,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
    */
@@ -154,6 +192,14 @@ 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 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
    */
@@ -190,6 +236,10 @@ 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
    */
@@ -197,7 +247,7 @@ const UIStrings = {
   /**
    *@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
    */
@@ -211,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
    */
@@ -234,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_);
@@ -268,9 +326,9 @@ export namespace SharedStorageTreeElementDispatcher {
     origin: string;
   }
 
-  export type EventTypes = {
-    [Events.SHARED_STORAGE_TREE_ELEMENT_ADDED]: SharedStorageTreeElementAddedEvent,
-  };
+  export interface EventTypes {
+    [Events.SHARED_STORAGE_TREE_ELEMENT_ADDED]: SharedStorageTreeElementAddedEvent;
+  }
 }
 
 export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.TargetManager.Observer {
@@ -315,10 +373,10 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
 
   constructor(panel: ResourcesPanel) {
     super();
-
     this.panel = panel;
 
     this.sidebarTree = new UI.TreeOutline.TreeOutlineInShadow(UI.TreeOutline.TreeVariant.NAVIGATION_TREE);
+    this.sidebarTree.registerRequiredCSS(resourcesSidebarStyles);
     this.sidebarTree.element.classList.add('resources-sidebar');
     this.sidebarTree.hideOverflow();
 
@@ -344,8 +402,9 @@ 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),
+        i18nString(UIStrings.localStorageDescription), 'local-storage');
     this.localStorageListTreeElement.setLink(
         'https://developer.chrome.com/docs/devtools/storage/localstorage/?utm_source=devtools' as
         Platform.DevToolsPath.UrlString);
@@ -353,8 +412,9 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     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),
+        i18nString(UIStrings.sessionStorageDescription), 'session-storage');
     this.sessionStorageListTreeElement.setLink(
         'https://developer.chrome.com/docs/devtools/storage/sessionstorage/?utm_source=devtools' as
         Platform.DevToolsPath.UrlString);
@@ -363,8 +423,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),
+        i18nString(UIStrings.extensionStorageDescription), 'extension-storage');
     this.extensionStorageListTreeElement.setLink(
         'https://developer.chrome.com/docs/extensions/reference/api/storage/?utm_source=devtools' as
         Platform.DevToolsPath.UrlString);
@@ -379,8 +440,9 @@ 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), i18nString(UIStrings.cookiesDescription),
+        'cookies');
     this.cookieListTreeElement.setLink(
         'https://developer.chrome.com/docs/devtools/storage/cookies/?utm_source=devtools' as
         Platform.DevToolsPath.UrlString);
@@ -998,10 +1060,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
       delete this.previousHoveredElement;
     }
   }
-  override wasShown(): void {
-    super.wasShown();
-    this.sidebarTree.registerCSSFiles([resourcesSidebarStyles]);
-  }
 }
 
 export class BackgroundServiceTreeElement extends ApplicationPanelTreeElement {
@@ -1116,7 +1174,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));
@@ -1235,7 +1294,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), '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 = [];
@@ -1856,7 +1917,7 @@ export class StorageCategoryView extends UI.Widget.VBox {
     super();
 
     this.element.classList.add('storage-view');
-    this.emptyWidget = new UI.EmptyWidget.EmptyWidget('');
+    this.emptyWidget = new UI.EmptyWidget.EmptyWidget('', '');
     this.linkElement = null;
     this.emptyWidget.show(this.element);
   }
@@ -1865,6 +1926,10 @@ export class StorageCategoryView extends UI.Widget.VBox {
     this.emptyWidget.text = text;
   }
 
+  setHeadline(header: string): void {
+    this.emptyWidget.header = header;
+  }
+
   setLink(link: Platform.DevToolsPath.UrlString|null): void {
     if (link && !this.linkElement) {
       this.linkElement = this.emptyWidget.appendLink(link);
@@ -2236,7 +2301,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);
     }
@@ -2250,7 +2316,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);
     }
@@ -2267,7 +2334,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);
     }
@@ -2364,7 +2432,7 @@ export class FrameResourceTreeElement extends ApplicationPanelTreeElement {
       if (view) {
         return view;
       }
-      return new UI.EmptyWidget.EmptyWidget(this.resource.url);
+      return new UI.EmptyWidget.EmptyWidget('', this.resource.url);
     });
     return this.previewPromise;
   }
@@ -2372,7 +2440,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());
     }