[GM3Restyling] Update speculation rules empty states

Before: https://i.imgur.com/m9JsPn8.png
After: https://i.imgur.com/AjqG9Fr.png
Bug: 325443331
Change-Id: I27a1bb80cbb47c24ced72fdf138281ec5c9e8a5d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6285327
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/application/preloading/components/RuleSetDetailsView.css

@@ -4,6 +4,16 @@
  * found in the LICENSE file.
  */
 
+:host {
+  display: block;
+  height: 100%;
+}
+
+.placeholder {
+  display: flex;
+  height: 100%;
+}
+
 .ruleset-header {
   padding: 4px 8px;
   white-space: nowrap;

front_end/panels/application/preloading/components/RuleSetDetailsView.test.ts

@@ -26,12 +26,17 @@ async function renderRuleSetDetailsView(
 }
 
 describeWithEnvironment('RuleSetDetailsView', () => {
-  it('renders nothing if not selected', async () => {
+  it('renders placeholder if not selected', async () => {
     const data = null;
 
     const component = await renderRuleSetDetailsView(data, false);
     assert.isNotNull(component.shadowRoot);
-    assert.strictEqual(component.shadowRoot.textContent, '');
+    assert.exists(component.shadowRoot.querySelector('.empty-state'));
+
+    const header = component.shadowRoot.querySelector('.empty-state-header')?.textContent;
+    const description = component.shadowRoot.querySelector('.empty-state-description')?.textContent;
+    assert.deepEqual(header, 'No element selected');
+    assert.deepEqual(description, 'Select an element for more details');
   });
 
   it('renders rule set', async () => {

front_end/panels/application/preloading/components/RuleSetDetailsView.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as i18n from '../../../../core/i18n/i18n.js';
 import {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
@@ -11,6 +12,8 @@ import * as CodeHighlighter from '../../../../ui/components/code_highlighter/cod
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 import * as TextEditor from '../../../../ui/components/text_editor/text_editor.js';
+// eslint-disable-next-line rulesdir/es-modules-import
+import inspectorCommonStylesRaw from '../../../../ui/legacy/inspectorCommon.css.js';
 import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
@@ -20,8 +23,29 @@ import ruleSetDetailsViewStylesRaw from './RuleSetDetailsView.css.js';
 const ruleSetDetailsViewStyles = new CSSStyleSheet();
 ruleSetDetailsViewStyles.replaceSync(ruleSetDetailsViewStylesRaw.cssContent);
 
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const inspectorCommonStyles = new CSSStyleSheet();
+inspectorCommonStyles.replaceSync(inspectorCommonStylesRaw.cssContent);
+
 const {html} = Lit;
 
+const UIStrings = {
+  /**
+   *@description Text in RuleSetDetailsView of the Application panel if no element is selected. An element here is an item in a
+   *             table of speculation rules. Speculation rules define the rules when and which urls should be prefetched.
+   *             https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules
+   */
+  noElementSelected: 'No element selected',
+  /**
+   *@description Text in RuleSetDetailsView of the Application panel if no element is selected. An element here is an item in a
+   *             table of speculation rules. Speculation rules define the rules when and which urls should be prefetched.
+   *             https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules
+   */
+  selectAnElementForMoreDetails: 'Select an element for more details',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/components/RuleSetDetailsView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 type RuleSet = Protocol.Preload.RuleSet;
 
 const codeMirrorJsonType = await CodeHighlighter.CodeHighlighter.languageFromMIME('application/json');
@@ -35,7 +59,7 @@ export class RuleSetDetailsView extends LegacyWrapper.LegacyWrapper.WrappableCom
   #editorState?: CodeMirror.EditorState;
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [ruleSetDetailsViewStyles];
+    this.#shadow.adoptedStyleSheets = [ruleSetDetailsViewStyles, inspectorCommonStyles];
   }
 
   set data(data: RuleSetDetailsViewData) {
@@ -50,7 +74,17 @@ export class RuleSetDetailsView extends LegacyWrapper.LegacyWrapper.WrappableCom
   async #render(): Promise<void> {
     await RenderCoordinator.write('RuleSetDetailsView render', async () => {
       if (this.#data === null) {
-        Lit.render(Lit.nothing, this.#shadow, {host: this});
+        Lit.render(
+            html`
+          <div class="placeholder">
+            <div class="empty-state">
+              <span class="empty-state-header">${i18nString(UIStrings.noElementSelected)}</span>
+              <span class="empty-state-description">${i18nString(UIStrings.selectAnElementForMoreDetails)}</span>
+            </div>
+          </div>
+      `,
+            this.#shadow, {host: this});
+        // clang-format on
         return;
       }