chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

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

@@ -6,7 +6,7 @@ import type * as Common from '../../core/common/common.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';
+import {createTarget, expectConsoleLogs, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
 import {
   describeWithMockConnection,
   setMockConnectionResponseHandler,
@@ -133,25 +133,24 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
     setMockConnectionResponseHandler('Storage.setSharedStorageTracking', () => ({}));
   });
 
-  // Flaking on multiple bots on CQ.
-  it.skip('[crbug.com/40278557] shows cookies for all frames', async () => {
+  it('shows cookies for all frames', async () => {
     Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
     const sidebar = await Application.ResourcesPanel.ResourcesPanel.showAndGetSidebar();
     const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
     assert.exists(resourceTreeModel);
     sinon.stub(resourceTreeModel, 'frames').returns([
       {
-        url: 'http://www.example.com/',
+        url: 'https://example.com/',
         unreachableUrl: () => null,
         resourceTreeModel: () => resourceTreeModel,
       } as unknown as SDK.ResourceTreeModel.ResourceTreeFrame,
       {
-        url: 'http://www.example.com/admin/',
+        url: 'https://example.com/admin/',
         unreachableUrl: () => null,
         resourceTreeModel: () => resourceTreeModel,
       } as unknown as SDK.ResourceTreeModel.ResourceTreeFrame,
       {
-        url: 'http://www.example.org/',
+        url: 'https://example.org/',
         unreachableUrl: () => null,
         resourceTreeModel: () => resourceTreeModel,
       } as unknown as SDK.ResourceTreeModel.ResourceTreeFrame,
@@ -160,8 +159,7 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
 
     assert.strictEqual(sidebar.cookieListTreeElement.childCount(), 2);
     assert.deepEqual(
-        sidebar.cookieListTreeElement.children().map(e => e.title),
-        ['http://www.example.com', 'http://www.example.org']);
+        sidebar.cookieListTreeElement.children().map(e => e.title), ['https://example.com', 'https://example.org']);
   });
 
   it('shows shared storages and events for origins using shared storage', async () => {
@@ -415,6 +413,9 @@ describeWithMockConnection('IDBDatabaseTreeElement', () => {
   beforeEach(() => {
     stubNoopSettings();
   });
+  expectConsoleLogs({
+    error: ['Error: No LanguageSelector instance exists yet.'],
+  });
 
   it('only becomes selectable after database is updated', () => {
     const target = createTarget();
@@ -439,6 +440,10 @@ describeWithMockConnection('ResourcesSection', () => {
       target = createTarget();
     });
 
+    expectConsoleLogs({
+      error: ['Error: No LanguageSelector instance exists yet.'],
+    });
+
     it('adds tree elements for a frame and resource', () => {
       SDK.TargetManager.TargetManager.instance().setScopeTarget(inScope ? target : null);
       const panel = Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -92,178 +92,178 @@ import {TrustTokensTreeElement} from './TrustTokensTreeElement.js';
 
 const UIStrings = {
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   application: 'Application',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   storage: 'Storage',
   /**
-   *@description Text in Application Panelthat shows if no local 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
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   localStorage: 'Local storage',
   /**
-   *@description Text in the Application panel describing the local storage tab.
+   * @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
+   * @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.
+   * @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.
+   * @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
+   * @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
+   * @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.
+   * @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
+   * @description Text for extension session storage in Application panel
    */
   extensionSessionStorage: 'Session',
   /**
-   *@description Text for extension local storage in Application panel
+   * @description Text for extension local storage in Application panel
    */
   extensionLocalStorage: 'Local',
   /**
-   *@description Text for extension sync storage in Application panel
+   * @description Text for extension sync storage in Application panel
    */
   extensionSyncStorage: 'Sync',
   /**
-   *@description Text for extension managed storage in Application panel
+   * @description Text for extension managed storage in Application panel
    */
   extensionManagedStorage: 'Managed',
   /**
-   *@description Text for web cookies
+   * @description Text for web cookies
    */
   cookies: 'Cookies',
   /**
-   *@description Text in the Application Panel 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
+   * @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
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   backgroundServices: 'Background services',
   /**
-   *@description Text for rendering frames
+   * @description Text for rendering frames
    */
   frames: 'Frames',
   /**
-   *@description Text that appears on a button for the manifest resource type filter.
+   * @description Text that appears on a button for the manifest resource type filter.
    */
   manifest: 'Manifest',
   /**
-   *@description Text in App Manifest View of the Application panel
+   * @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
+   * @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
+   * @description Text in App Manifest View of the Application panel
    */
   appManifest: 'Manifest',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   indexeddb: 'IndexedDB',
   /**
-   *@description Text in Application Panel if no indexedDB is detected
+   * @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.
+   * @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
+   * @description A context menu item in the Application Panel Sidebar of the Application panel
    */
   refreshIndexeddb: 'Refresh IndexedDB',
   /**
-   *@description Tooltip in Application Panel Sidebar of the Application panel
-   *@example {1.0} PH1
+   * @description Tooltip in Application Panel Sidebar of the Application panel
+   * @example {1.0} PH1
    */
   versionSEmpty: 'Version: {PH1} (empty)',
   /**
-   *@description Tooltip in Application Panel Sidebar of the Application panel
-   *@example {1.0} PH1
+   * @description Tooltip in Application Panel Sidebar of the Application panel
+   * @example {1.0} PH1
    */
   versionS: 'Version: {PH1}',
   /**
-   *@description Text to clear content
+   * @description Text to clear content
    */
   clear: 'Clear',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
-   *@example {"key path"} PH1
+   * @description Text in Application Panel Sidebar of the Application panel
+   * @example {"key path"} PH1
    */
   keyPathS: 'Key path: {PH1}',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   localFiles: 'Local Files',
   /**
-   *@description Tooltip in Application Panel Sidebar of the Application panel
-   *@example {https://example.com} PH1
+   * @description Tooltip in Application Panel Sidebar of the Application panel
+   * @example {https://example.com} PH1
    */
   cookiesUsedByFramesFromS: 'Cookies used by frames from {PH1}',
   /**
-   *@description Text in Frames View of the Application panel
+   * @description Text in Frames View of the Application panel
    */
   openedWindows: 'Opened Windows',
   /**
-   *@description Text in Frames View of the Application panel
+   * @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
+   * @description Label for plural of worker type: web workers
    */
   webWorkers: 'Web Workers',
   /**
-   *@description Label in frame tree for unavailable document
+   * @description Label in frame tree for unavailable document
    */
   documentNotAvailable: 'No document detected',
   /**
-   *@description Description of content of unavailable document in Application panel
+   * @description Description of content of unavailable document in Application panel
    */
   theContentOfThisDocumentHasBeen:
       'The content of this document has been generated dynamically via \'document.write()\'.',
   /**
-   *@description Text in Frames View of the Application panel
+   * @description Text in Frames View of the Application panel
    */
   windowWithoutTitle: 'Window without title',
   /**
-   *@description Default name for worker
+   * @description Default name for worker
    */
   worker: 'worker',
   /**
-   *@description Description text for describing the dedicated worker tab.
+   * @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.',
   /**
@@ -285,8 +285,8 @@ const UIStrings = {
    */
   applicationSidebarPanel: 'Application panel sidebar',
   /**
-   *@description Tooltip in Application Panel Sidebar of the Application panel
-   *@example {https://example.com} PH1
+   * @description Tooltip in Application Panel Sidebar of the Application panel
+   * @example {https://example.com} PH1
    */
   thirdPartyPhaseout: 'Cookies from {PH1} may have been blocked due to third-party cookie phaseout.',
   /**
@@ -377,7 +377,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     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();
+    this.sidebarTree.setHideOverflow(true);
 
     this.sidebarTree.element.classList.add('filter-all');
     // Listener needs to have been set up before the elements are added
@@ -640,8 +640,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
 
     this.cacheStorageListTreeElement.initialize();
     const backgroundServiceModel = this.target?.model(BackgroundServiceModel) || null;
-    this.backgroundFetchTreeElement && this.backgroundFetchTreeElement.initialize(backgroundServiceModel);
-    this.backgroundSyncTreeElement && this.backgroundSyncTreeElement.initialize(backgroundServiceModel);
+    this.backgroundFetchTreeElement.initialize(backgroundServiceModel);
+    this.backgroundSyncTreeElement.initialize(backgroundServiceModel);
     this.notificationsTreeElement.initialize(backgroundServiceModel);
     this.paymentHandlerTreeElement.initialize(backgroundServiceModel);
     this.periodicBackgroundSyncTreeElement.initialize(backgroundServiceModel);
@@ -1193,7 +1193,7 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
 
   onInvoke(): void {
     this.view.getManifestElement().scrollIntoView();
-    UI.ARIAUtils.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
   }
 
   showManifestView(): void {
@@ -1225,7 +1225,7 @@ export class ManifestChildTreeElement extends ApplicationPanelTreeElement {
   onInvoke(): void {
     (this.parent as AppManifestTreeElement)?.showManifestView();
     this.#sectionElement.scrollIntoView();
-    UI.ARIAUtils.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
   }
   // direct focus to the corresponding element
   onInvokeElementKeydown(event: KeyboardEvent): void {
@@ -1856,7 +1856,6 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
     // Note that we cannot use `cookieDomainInternal` here since it contains scheme.
     if (IssuesManager.RelatedIssue.hasThirdPartyPhaseoutCookieIssueForDomain(cookieUrl.domain())) {
       icon.name = 'warning-filled';
-      icon.classList.add('warn-icon');
       this.tooltip = i18nString(UIStrings.thirdPartyPhaseout, {PH1: this.cookieDomainInternal});
     }
     this.setLeadingIcons([icon]);

package/front_end/panels/application/BackForwardCacheTreeElement.ts

@@ -15,7 +15,7 @@ import type {ResourcesPanel} from './ResourcesPanel.js';
 
 const UIStrings = {
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   backForwardCache: 'Back/forward cache',
 } as const;

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

@@ -6,7 +6,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import {dispatchClickEvent} from '../../testing/DOMHelpers.js';
-import {createTarget} from '../../testing/EnvironmentHelpers.js';
+import {createTarget, registerActions} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -35,13 +35,13 @@ describeWithMockConnection('BackgroundServiceView', () => {
     target = createTarget();
     backgroundServiceModel = target.model(Resources.BackgroundServiceModel.BackgroundServiceModel);
     manager = target.model(SDK.StorageKeyManager.StorageKeyManager);
-    UI.ActionRegistration.maybeRemoveActionExtension('background-service.toggle-recording');
-    UI.ActionRegistration.registerActionExtension({
+    registerActions([{
       actionId: 'background-service.toggle-recording',
       category: UI.ActionRegistration.ActionCategory.BACKGROUND_SERVICES,
       title: () => 'mock' as Platform.UIString.LocalizedString,
       toggleable: true,
-    });
+    }]);
+
     sinon.stub(UI.ShortcutRegistry.ShortcutRegistry, 'instance').returns({
       shortcutTitleForAction: () => {},
       shortcutsForAction: () => [new UI.KeyboardShortcut.KeyboardShortcut(
@@ -51,10 +51,6 @@ describeWithMockConnection('BackgroundServiceView', () => {
     view = new Resources.BackgroundServiceView.BackgroundServiceView(serviceName, backgroundServiceModel);
   });
 
-  afterEach(() => {
-    UI.ActionRegistration.maybeRemoveActionExtension('background-service.toggle-recording');
-  });
-
   it('updates event list when main storage key changes', () => {
     assert.exists(backgroundServiceModel);
     assert.exists(manager);

package/front_end/panels/application/BackgroundServiceView.ts

@@ -23,118 +23,117 @@ import backgroundServiceViewStyles from './backgroundServiceView.css.js';
 
 const UIStrings = {
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   backgroundFetch: 'Background fetch',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   backgroundSync: 'Background sync',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   pushMessaging: 'Push messaging',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   notifications: 'Notifications',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   paymentHandler: 'Payment handler',
   /**
-   *@description Text in the Periodic Background Service View of the Application panel
+   * @description Text in the Periodic Background Service View of the Application panel
    */
   periodicBackgroundSync: 'Periodic background sync',
   /**
-   *@description Text to clear content
+   * @description Text to clear content
    */
   clear: 'Clear',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon download button in the Background Service View of the Application panel
+   * @description Tooltip text that appears when hovering over the largeicon download button in the Background Service View of the Application panel
    */
   saveEvents: 'Save events',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   showEventsFromOtherDomains: 'Show events from other domains',
   /**
-   *@description Text of a checkbox to show events for other storage keys
+   * @description Text of a checkbox to show events for other storage keys
    */
   showEventsForOtherStorageKeys: 'Show events from other storage partitions',
   /**
-   *@description Title of an action under the Background Services category that can be invoked through the Command Menu
+   * @description Title of an action under the Background Services category that can be invoked through the Command Menu
    */
   stopRecordingEvents: 'Stop recording events',
   /**
-   *@description Title of an action under the Background Services category that can be invoked through the Command Menu
+   * @description Title of an action under the Background Services category that can be invoked through the Command Menu
    */
   startRecordingEvents: 'Start recording events',
   /**
-   *@description Text for timestamps of items
+   * @description Text for timestamps of items
    */
   timestamp: 'Timestamp',
   /**
-   *@description Text that refers to some events
+   * @description Text that refers to some events
    */
   event: 'Event',
   /**
-   *@description Text for the origin of something
+   * @description Text for the origin of something
    */
   origin: 'Origin',
   /**
-   *@description Text for the storage key of something
+   * @description Text for the storage key of something
    */
   storageKey: 'Storage Key',
   /**
-   *@description Text in Background Service View of the Application panel. The Scope is a URL associated with the Service Worker, which limits which pages/sites the Service Worker operates on.
+   * @description Text in Background Service View of the Application panel. The Scope is a URL associated with the Service Worker, which limits which pages/sites the Service Worker operates on.
    */
   swScope: 'Service Worker Scope',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   instanceId: 'Instance ID',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   backgroundServices: 'Background services',
   /**
-   *@description Text in Background Service View of the Application panel.
+   * @description Text in Background Service View of the Application panel.
    *             An event here refers to a background service event that is an entry in a table.
    */
   noEventSelected: 'No event selected',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   selectAnEventToViewMetadata: 'Select an event to view its metadata',
   /**
-   *@description Text in Background Service View of the Application panel
-   *@example {Background Fetch} PH1
+   * @description Text in Background Service View of the Application panel
+   * @example {Background Fetch} PH1
    */
   recordingSActivity: 'Recording {PH1} activity…',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   noRecording: 'No recording yet',
   /**
-   *@description Inform users that DevTools are recording/waiting for events in the Periodic Background Sync tool of the Application panel
-   *@example {Background Fetch} PH1
+   * @description Inform users that DevTools are recording/waiting for events in the Periodic Background Sync tool of the Application panel
+   * @example {Background Fetch} PH1
    */
   devtoolsWillRecordAllSActivity: 'DevTools will record all {PH1} activity for up to 3 days, even when closed.',
   /**
-   *@description Text in Background Service View of the Application panel to instruct the user on how to start a recording for
+   * @description Text in Background Service View of the Application panel to instruct the user on how to start a recording for
    * background services.
-   *
-   *@example {Start recording events} PH1
-   *@example {Ctrl + E} PH2
+   * @example {Start recording events} PH1
+   * @example {Ctrl + E} PH2
    */
   startRecordingToDebug: 'Start to debug background services by using the "{PH1}" button or by pressing {PH2}.',
   /**
-   *@description Text to show an item is empty
+   * @description Text to show an item is empty
    */
   empty: 'empty',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   noMetadataForThisEvent: 'No metadata for this event',
 } as const;
@@ -178,12 +177,13 @@ export class BackgroundServiceView extends UI.Widget.VBox {
   }
 
   constructor(serviceName: Protocol.BackgroundService.ServiceName, model: BackgroundServiceModel) {
-    super(true);
+    super({
+      jslog: `${VisualLogging.pane().context(Platform.StringUtilities.toKebabCase(serviceName))}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(emptyWidgetStyles, backgroundServiceViewStyles);
 
     this.serviceName = serviceName;
-    const kebabName = Platform.StringUtilities.toKebabCase(serviceName);
-    this.element.setAttribute('jslog', `${VisualLogging.pane().context(kebabName)}`);
 
     this.model = model;
     this.model.addEventListener(Events.RecordingStateChanged, this.onRecordingStateChanged, this);
@@ -483,22 +483,24 @@ export class BackgroundServiceView extends UI.Widget.VBox {
       return;
     }
 
-    const emptyWidget = new UI.EmptyWidget.EmptyWidget('', '');
+    let emptyWidget: UI.EmptyWidget.EmptyWidget;
     if (this.dataGrid.rootNode().children.length) {
-      emptyWidget.header = i18nString(UIStrings.noEventSelected);
-      emptyWidget.text = i18nString(UIStrings.selectAnEventToViewMetadata);
+      emptyWidget = new UI.EmptyWidget.EmptyWidget(
+          i18nString(UIStrings.noEventSelected), i18nString(UIStrings.selectAnEventToViewMetadata));
     } else if (this.recordButton.isToggled()) {
       // Inform users that we are recording/waiting for events.
       const featureName = BackgroundServiceView.getUIString(this.serviceName).toLowerCase();
-      emptyWidget.header = i18nString(UIStrings.recordingSActivity, {PH1: featureName});
-      emptyWidget.text = i18nString(UIStrings.devtoolsWillRecordAllSActivity, {PH1: featureName});
+      emptyWidget = new UI.EmptyWidget.EmptyWidget(
+          i18nString(UIStrings.recordingSActivity, {PH1: featureName}),
+          i18nString(UIStrings.devtoolsWillRecordAllSActivity, {PH1: featureName}));
     } else {
       const recordShortcuts =
           UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('background-service.toggle-recording')[0];
-      emptyWidget.header = i18nString(UIStrings.noRecording);
-      emptyWidget.text = i18nString(
-          UIStrings.startRecordingToDebug,
-          {PH1: i18nString(UIStrings.startRecordingEvents), PH2: recordShortcuts.title()});
+      emptyWidget = new UI.EmptyWidget.EmptyWidget(
+          i18nString(UIStrings.noRecording), i18nString(UIStrings.startRecordingToDebug, {
+            PH1: i18nString(UIStrings.startRecordingEvents),
+            PH2: recordShortcuts.title(),
+          }));
       emptyWidget.link = this.createLearnMoreLink();
 
       const button = UI.UIUtils.createTextButton(