[GM3Restyling] Update speculation empty states

This updates the speculation tab empty states if no rules/speculations
have been detected.

Screenshots: https://imgur.com/a/4M9V1AN
Bug: 325443331
Change-Id: I3b1a5dd7330b9167911b2fd753caf8cce99de3d7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6286307
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/application/preloading/PreloadingView.test.ts

@@ -297,7 +297,30 @@ describeWithMockConnection('PreloadingRuleSetView', () => {
     SDK.ChildTargetManager.ChildTargetManager.install();
   });
 
-  it('renders grid and details', async () => {
+  it('renders placeholder', async () => {
+    const emulator = new NavigationEmulator();
+    await emulator.openDevTools();
+    const view = createRuleSetView(emulator.primaryTarget);
+    await RenderCoordinator.done();
+
+    const placeholder = view.contentElement.querySelector('.empty-state');
+    assert.exists(placeholder);
+    assert.deepEqual(window.getComputedStyle(placeholder).display, 'flex');
+
+    const header = placeholder.querySelector('.empty-state-header')?.textContent;
+    const description = placeholder.querySelector('.empty-state-description > span')?.textContent;
+
+    assert.deepEqual(header, 'No rules detected');
+    assert.deepEqual(
+        description,
+        'On this page you will see the speculation rules used to prefetch and prerender page navigations.');
+
+    const rules = view.contentElement.querySelector('devtools-split-view');
+    assert.exists(rules);
+    assert.deepEqual(window.getComputedStyle(rules).display, 'none');
+  });
+
+  it('renders grid and details and hides placeholder', async () => {
     const emulator = new NavigationEmulator();
     await emulator.openDevTools();
     const view = createRuleSetView(emulator.primaryTarget);
@@ -340,6 +363,10 @@ describeWithMockConnection('PreloadingRuleSetView', () => {
           ['example.com/', '1 running'],
         ],
     );
+
+    const placeholder = view.contentElement.querySelector('.empty-state');
+    assert.exists(placeholder);
+    assert.deepEqual(window.getComputedStyle(placeholder).display, 'none');
   });
 
   it('shows error of rule set', async () => {
@@ -501,7 +528,28 @@ describeWithMockConnection('PreloadingAttemptView', () => {
     SDK.ChildTargetManager.ChildTargetManager.install();
   });
 
-  it('renders grid and details', async () => {
+  it('renders placeholder', async () => {
+    const emulator = new NavigationEmulator();
+    await emulator.openDevTools();
+    const view = createAttemptView(emulator.primaryTarget);
+    await RenderCoordinator.done();
+
+    const placeholder = view.contentElement.querySelector('.empty-state');
+    assert.exists(placeholder);
+    assert.deepEqual(window.getComputedStyle(placeholder).display, 'flex');
+
+    const header = placeholder.querySelector('.empty-state-header')?.textContent;
+    const description = placeholder.querySelector('.empty-state-description > span')?.textContent;
+
+    assert.deepEqual(header, 'No speculation detected');
+    assert.deepEqual(description, 'On this page you will see details on speculative loads.');
+
+    const rules = view.contentElement.querySelector('devtools-split-view');
+    assert.exists(rules);
+    assert.deepEqual(window.getComputedStyle(rules).display, 'none');
+  });
+
+  it('renders grid and details and hides placeholder', async () => {
     const emulator = new NavigationEmulator();
     await emulator.openDevTools();
     const view = createAttemptView(emulator.primaryTarget);
@@ -538,11 +586,9 @@ describeWithMockConnection('PreloadingAttemptView', () => {
         ],
     );
 
-    const placeholderHeader = preloadingDetailsComponent.shadowRoot.querySelector('.empty-state-header');
-    assert.strictEqual(placeholderHeader?.textContent?.trim(), 'No element selected');
-
-    const placeholderDescription = preloadingDetailsComponent.shadowRoot.querySelector('.empty-state-description');
-    assert.strictEqual(placeholderDescription?.textContent, 'Select an element for more details');
+    const placeholder = view.contentElement.querySelector('.empty-state');
+    assert.exists(placeholder);
+    assert.deepEqual(window.getComputedStyle(placeholder).display, 'none');
   });
 
   // See https://crbug.com/1432880

front_end/panels/application/preloading/PreloadingView.ts

@@ -79,10 +79,34 @@ const UIStrings = {
    *@description Text to pretty print a file
    */
   prettyPrint: 'Pretty print',
+  /**
+   *@description Placeholder text if there are no rules to show. https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules
+   */
+  noRulesDetected: 'No rules detected',
+  /**
+   *@description Placeholder text if there are no rules to show. https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules
+   */
+  rulesDescription: 'On this page you will see the speculation rules used to prefetch and prerender page navigations.',
+  /**
+   *@description Placeholder text if there are no speculation attempts for prefetching or prerendering urls. https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules
+   */
+  noPrefetchAttempts: 'No speculation detected',
+  /**
+   *@description Placeholder text if there are no speculation attempts for prefetching or prerendering urls. https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules
+   */
+  prefetchDescription: 'On this page you will see details on speculative loads.',
+  /**
+   *@description Text for a learn more link
+   */
+  learnMore: 'Learn more',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/PreloadingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const SPECULATION_EXPLANATION_URL =
+    'https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules' as
+    Platform.DevToolsPath.UrlString;
+
 // Used for selector, indicating no filter is specified.
 const AllRuleSetRootId = Symbol('AllRuleSetRootId');
 
@@ -219,7 +243,6 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
     this.warningsView.show(this.warningsContainer);
 
     this.ruleSetGrid.addEventListener('select', this.onRuleSetsGridCellFocused.bind(this));
-
     const onPrettyPrintToggle = (): void => {
       this.shouldPrettyPrint = !this.shouldPrettyPrint;
       this.updateRuleSetDetails();
@@ -228,6 +251,13 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
     // clang-format off
     render(
         html`
+        <div class="empty-state">
+          <span class="empty-state-header">${i18nString(UIStrings.noRulesDetected)}</span>
+          <div class="empty-state-description">
+            <span>${i18nString(UIStrings.rulesDescription)}</span>
+            ${UI.XLink.XLink.create(SPECULATION_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+          </div>
+        </div>
         <devtools-split-view .horizontal=${true} style="--min-sidebar-size: max(100vh-200px, 0px)">
           <div slot="main" class="overflow-auto" style="height: 100%">
             ${this.ruleSetGrid}
@@ -298,7 +328,7 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
       };
     });
     this.ruleSetGrid.update({rows: ruleSetRows, pageURL: pageURL()});
-
+    this.contentElement.classList.toggle('empty', ruleSetRows.length === 0);
     this.updateRuleSetDetails();
   }
 
@@ -377,6 +407,15 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
     this.preloadingGrid.addEventListener('select', this.onPreloadingGridCellFocused.bind(this));
     render(
         html`
+        <div class="empty-state">
+          <span class="empty-state-header">${i18nString(UIStrings.noPrefetchAttempts)}</span>
+          <div class="empty-state-description">
+            <span>${i18nString(UIStrings.prefetchDescription)}</span>
+            ${
+            UI.XLink.XLink.create(
+                SPECULATION_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+          </div>
+        </div>
         <devtools-split-view .horizontal=${true} style="--min-sidebar-size: 0px">
           <div slot="main" class="overflow-auto" style="height: 100%">
             ${this.preloadingGrid}
@@ -447,6 +486,7 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
       };
     });
     this.preloadingGrid.update({rows, pageURL: pageURL()});
+    this.contentElement.classList.toggle('empty', rows.length === 0);
 
     this.updatePreloadingDetails();
   }

front_end/panels/application/preloading/preloadingView.css

@@ -4,6 +4,20 @@
  * found in the LICENSE file.
  */
 
+.empty-state {
+  display: none;
+}
+
+.empty {
+  .empty-state {
+    display: flex;
+  }
+
+  devtools-split-view, .pretty-print-button, devtools-toolbar {
+    display: none;
+  }
+}
+
 .preloading-toolbar {
   background-color: var(--sys-color-cdt-base-container);
   border-bottom: 1px solid var(--sys-color-divider);