chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/application/preloading/components/PreloadingDisabledInfobar.ts

@@ -23,73 +23,73 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Infobar text for disabled case
+   * @description Infobar text for disabled case
    */
   infobarPreloadingIsDisabled: 'Speculative loading is disabled',
   /**
-   *@description Infobar text for force-enabled case
+   * @description Infobar text for force-enabled case
    */
   infobarPreloadingIsForceEnabled: 'Speculative loading is force-enabled',
   /**
-   *@description Title for dialog
+   * @description Title for dialog
    */
   titleReasonsPreventingPreloading: 'Reasons preventing speculative loading',
   /**
-   *@description Header in dialog
+   * @description Header in dialog
    */
   headerDisabledByPreference: 'User settings or extensions',
   /**
-   *@description Description in dialog
-   *@example {Preload pages settings (linked to chrome://settings/performance)} PH1
-   *@example {Extensions settings (linked to chrome://extensions)} PH2
+   * @description Description in dialog
+   * @example {Preload pages settings (linked to chrome://settings/performance)} PH1
+   * @example {Extensions settings (linked to chrome://extensions)} PH2
    */
   descriptionDisabledByPreference:
       'Speculative loading is disabled because of user settings or an extension. Go to {PH1} to update your preference. Go to {PH2} to disable any extension that blocks speculative loading.',
   /**
-   *@description Text of link
+   * @description Text of link
    */
   preloadingPagesSettings: 'Preload pages settings',
   /**
-   *@description Text of link
+   * @description Text of link
    */
   extensionsSettings: 'Extensions settings',
   /**
-   *@description Header in dialog
+   * @description Header in dialog
    */
   headerDisabledByDataSaver: 'Data Saver',
   /**
-   *@description Description in dialog
+   * @description Description in dialog
    */
   descriptionDisabledByDataSaver: 'Speculative loading is disabled because of the operating system\'s Data Saver mode.',
   /**
-   *@description Header in dialog
+   * @description Header in dialog
    */
   headerDisabledByBatterySaver: 'Battery Saver',
   /**
-   *@description Description in dialog
+   * @description Description in dialog
    */
   descriptionDisabledByBatterySaver:
       'Speculative loading is disabled because of the operating system\'s Battery Saver mode.',
   /**
-   *@description Header in dialog
+   * @description Header in dialog
    */
   headerDisabledByHoldbackPrefetchSpeculationRules: 'Prefetch was disabled, but is force-enabled now',
   /**
-   *@description Description in infobar
+   * @description Description in infobar
    */
   descriptionDisabledByHoldbackPrefetchSpeculationRules:
       'Prefetch is forced-enabled because DevTools is open. When DevTools is closed, prefetch will be disabled because this browser session is part of a holdback group used for performance comparisons.',
   /**
-   *@description Header in dialog
+   * @description Header in dialog
    */
   headerDisabledByHoldbackPrerenderSpeculationRules: 'Prerendering was disabled, but is force-enabled now',
   /**
-   *@description Description in infobar
+   * @description Description in infobar
    */
   descriptionDisabledByHoldbackPrerenderSpeculationRules:
       'Prerendering is forced-enabled because DevTools is open. When DevTools is closed, prerendering will be disabled because this browser session is part of a holdback group used for performance comparisons.',
   /**
-   *@description Footer link for more details
+   * @description Footer link for more details
    */
   footerLearnMore: 'Learn more',
 } as const;
@@ -98,7 +98,6 @@ const str_ =
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: Protocol.Preload.PreloadEnabledStateUpdatedEvent = {
     disabledByPreference: false,
@@ -179,11 +178,11 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
     return html`
       <div id='contents'>
         <devtools-report>
-          ${this.#maybeDisalebByPreference()}
-          ${this.#maybeDisalebByDataSaver()}
-          ${this.#maybeDisalebByBatterySaver()}
-          ${this.#maybeDisalebByHoldbackPrefetchSpeculationRules()}
-          ${this.#maybeDisalebByHoldbackPrerenderSpeculationRules()}
+          ${this.#maybeDisableByPreference()}
+          ${this.#maybeDisableByDataSaver()}
+          ${this.#maybeDisableByBatterySaver()}
+          ${this.#maybeDisableByHoldbackPrefetchSpeculationRules()}
+          ${this.#maybeDisableByHoldbackPrerenderSpeculationRules()}
         </devtools-report>
         <div id='footer'>
           ${learnMoreLink}
@@ -208,7 +207,7 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
     `;
   }
 
-  #maybeDisalebByPreference(): Lit.LitTemplate {
+  #maybeDisableByPreference(): Lit.LitTemplate {
     const preloadingSettingLink = new ChromeLink.ChromeLink.ChromeLink();
     preloadingSettingLink.href = 'chrome://settings/performance' as Platform.DevToolsPath.UrlString;
     preloadingSettingLink.textContent = i18nString(UIStrings.preloadingPagesSettings);
@@ -221,26 +220,26 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
         this.#data.disabledByPreference, i18nString(UIStrings.headerDisabledByPreference), description);
   }
 
-  #maybeDisalebByDataSaver(): Lit.LitTemplate {
+  #maybeDisableByDataSaver(): Lit.LitTemplate {
     return this.#maybeKeyValue(
         this.#data.disabledByDataSaver, i18nString(UIStrings.headerDisabledByDataSaver),
         i18nString(UIStrings.descriptionDisabledByDataSaver));
   }
 
-  #maybeDisalebByBatterySaver(): Lit.LitTemplate {
+  #maybeDisableByBatterySaver(): Lit.LitTemplate {
     return this.#maybeKeyValue(
         this.#data.disabledByBatterySaver, i18nString(UIStrings.headerDisabledByBatterySaver),
         i18nString(UIStrings.descriptionDisabledByBatterySaver));
   }
 
-  #maybeDisalebByHoldbackPrefetchSpeculationRules(): Lit.LitTemplate {
+  #maybeDisableByHoldbackPrefetchSpeculationRules(): Lit.LitTemplate {
     return this.#maybeKeyValue(
         this.#data.disabledByHoldbackPrefetchSpeculationRules,
         i18nString(UIStrings.headerDisabledByHoldbackPrefetchSpeculationRules),
         i18nString(UIStrings.descriptionDisabledByHoldbackPrefetchSpeculationRules));
   }
 
-  #maybeDisalebByHoldbackPrerenderSpeculationRules(): Lit.LitTemplate {
+  #maybeDisableByHoldbackPrerenderSpeculationRules(): Lit.LitTemplate {
     return this.#maybeKeyValue(
         this.#data.disabledByHoldbackPrerenderSpeculationRules,
         i18nString(UIStrings.headerDisabledByHoldbackPrerenderSpeculationRules),

package/front_end/panels/application/preloading/components/PreloadingGrid.ts

@@ -22,19 +22,19 @@ const {PreloadingStatus} = SDK.PreloadingModel;
 
 const UIStrings = {
   /**
-   *@description Column header: Action of preloading (prefetch/prerender)
+   * @description Column header: Action of preloading (prefetch/prerender)
    */
   action: 'Action',
   /**
-   *@description Column header: A rule set of preloading
+   * @description Column header: A rule set of preloading
    */
   ruleSet: 'Rule set',
   /**
-   *@description Column header: Status of preloading attempt
+   * @description Column header: Status of preloading attempt
    */
   status: 'Status',
   /**
-   *@description Status: Prerender failed, but prefetch is available
+   * @description Status: Prerender failed, but prefetch is available
    */
   prefetchFallbackReady: 'Prefetch fallback ready',
 } as const;
@@ -108,10 +108,8 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
                     ${(hasError || hasWarning) ?  html`
                       <devtools-icon
                         name=${hasWarning ? 'warning-filled' : 'cross-circle-filled'}
+                        class='medium'
                         style=${styleMap({
-                          width: '16px',
-                          height: '16px',
-                          color: hasWarning ? 'var(--sys-color-warning)' : 'var(--sys-color-error)',
                           'vertical-align': 'sub',
                         })}
                       ></devtools-icon>` : ''}

package/front_end/panels/application/preloading/components/PreloadingMismatchedHeadersGrid.test.ts

@@ -27,7 +27,7 @@ async function renderPreloadingMismatchedHeadersGrid(data: SDK.PreloadingModel.P
 }
 
 async function testPreloadingMismatchedHeadersGrid(
-    recievedMismatchedHeaders: Protocol.Preload.PrerenderMismatchedHeaders[], rowExpected: string[][]): Promise<void> {
+    receivedMismatchedHeaders: Protocol.Preload.PrerenderMismatchedHeaders[], rowExpected: string[][]): Promise<void> {
   const data: SDK.PreloadingModel.PrerenderAttempt = {
     action: Protocol.Preload.SpeculationAction.Prerender,
     key: {
@@ -39,7 +39,7 @@ async function testPreloadingMismatchedHeadersGrid(
     status: SDK.PreloadingModel.PreloadingStatus.FAILURE,
     prerenderStatus: Protocol.Preload.PrerenderFinalStatus.ActivationNavigationParameterMismatch,
     disallowedMojoInterface: null,
-    mismatchedHeaders: recievedMismatchedHeaders,
+    mismatchedHeaders: receivedMismatchedHeaders,
     ruleSetIds: ['ruleSetId:1'] as Protocol.Preload.RuleSetId[],
     nodeIds: [1] as Protocol.DOM.BackendNodeId[],
   };

package/front_end/panels/application/preloading/components/PreloadingMismatchedHeadersGrid.ts

@@ -15,19 +15,19 @@ import preloadingGridStyles from './preloadingGrid.css.js';
 
 const UIStrings = {
   /**
-   *@description The name of the HTTP request header.
+   * @description The name of the HTTP request header.
    */
   headerName: 'Header name',
   /**
-   *@description The value of the HTTP request header in initial navigation.
+   * @description The value of the HTTP request header in initial navigation.
    */
   initialNavigationValue: 'Value in initial navigation',
   /**
-   *@description The value of the HTTP request header in activation navigation.
+   * @description The value of the HTTP request header in activation navigation.
    */
   activationNavigationValue: 'Value in activation navigation',
   /**
-   *@description The string to indicate the value of the header is missing.
+   * @description The string to indicate the value of the header is missing.
    */
   missing: '(missing)',
 } as const;

package/front_end/panels/application/preloading/components/PreloadingString.ts

@@ -12,118 +12,118 @@ import * as Bindings from '../../../../models/bindings/bindings.js';
 
 const UIStrings = {
   /**
-   *@description  Description text for Prefetch status PrefetchFailedIneligibleRedirect.
+   * @description  Description text for Prefetch status PrefetchFailedIneligibleRedirect.
    */
   PrefetchFailedIneligibleRedirect: 'The prefetch was redirected, but the redirect URL is not eligible for prefetch.',
   /**
-   *@description  Description text for Prefetch status PrefetchFailedInvalidRedirect.
+   * @description  Description text for Prefetch status PrefetchFailedInvalidRedirect.
    */
   PrefetchFailedInvalidRedirect: 'The prefetch was redirected, but there was a problem with the redirect.',
   /**
-   *@description  Description text for Prefetch status PrefetchFailedMIMENotSupported.
+   * @description  Description text for Prefetch status PrefetchFailedMIMENotSupported.
    */
   PrefetchFailedMIMENotSupported: 'The prefetch failed because the response\'s Content-Type header was not supported.',
   /**
-   *@description  Description text for Prefetch status PrefetchFailedNetError.
+   * @description  Description text for Prefetch status PrefetchFailedNetError.
    */
   PrefetchFailedNetError: 'The prefetch failed because of a network error.',
   /**
-   *@description  Description text for Prefetch status PrefetchFailedNon2XX.
+   * @description  Description text for Prefetch status PrefetchFailedNon2XX.
    */
   PrefetchFailedNon2XX: 'The prefetch failed because of a non-2xx HTTP response status code.',
   /**
-   *@description  Description text for Prefetch status PrefetchIneligibleRetryAfter.
+   * @description  Description text for Prefetch status PrefetchIneligibleRetryAfter.
    */
   PrefetchIneligibleRetryAfter:
       'A previous prefetch to the origin got a HTTP 503 response with an Retry-After header that has not elapsed yet.',
   /**
-   *@description  Description text for Prefetch status PrefetchIsPrivacyDecoy.
+   * @description  Description text for Prefetch status PrefetchIsPrivacyDecoy.
    */
   PrefetchIsPrivacyDecoy:
       'The URL was not eligible to be prefetched because there was a registered service worker or cross-site cookies for that origin, but the prefetch was put on the network anyways and not used, to disguise that the user had some kind of previous relationship with the origin.',
   /**
-   *@description  Description text for Prefetch status PrefetchIsStale.
+   * @description  Description text for Prefetch status PrefetchIsStale.
    */
   PrefetchIsStale: 'Too much time elapsed between the prefetch and usage, so the prefetch was discarded.',
   /**
-   *@description  Description text for Prefetch status PrefetchNotEligibleBrowserContextOffTheRecord.
+   * @description  Description text for Prefetch status PrefetchNotEligibleBrowserContextOffTheRecord.
    */
   PrefetchNotEligibleBrowserContextOffTheRecord:
       'The prefetch was not performed because the browser is in Incognito or Guest mode.',
   /**
-   *@description  Description text for Prefetch status PrefetchNotEligibleDataSaverEnabled.
+   * @description  Description text for Prefetch status PrefetchNotEligibleDataSaverEnabled.
    */
   PrefetchNotEligibleDataSaverEnabled:
       'The prefetch was not performed because the operating system is in Data Saver mode.',
   /**
-   *@description  Description text for Prefetch status PrefetchNotEligibleExistingProxy.
+   * @description  Description text for Prefetch status PrefetchNotEligibleExistingProxy.
    */
   PrefetchNotEligibleExistingProxy:
       'The URL is not eligible to be prefetched, because in the default network context it is configured to use a proxy server.',
   /**
-   *@description  Description text for Prefetch status PrefetchNotEligibleHostIsNonUnique.
+   * @description  Description text for Prefetch status PrefetchNotEligibleHostIsNonUnique.
    */
   PrefetchNotEligibleHostIsNonUnique:
       'The URL was not eligible to be prefetched because its host was not unique (e.g., a non publicly routable IP address or a hostname which is not registry-controlled), but the prefetch was required to be proxied.',
   /**
-   *@description  Description text for Prefetch status PrefetchNotEligibleNonDefaultStoragePartition.
+   * @description  Description text for Prefetch status PrefetchNotEligibleNonDefaultStoragePartition.
    */
   PrefetchNotEligibleNonDefaultStoragePartition:
       'The URL was not eligible to be prefetched because it uses a non-default storage partition.',
   /**
-   *@description  Description text for Prefetch status PrefetchNotEligibleSameSiteCrossOriginPrefetchRequiredProxy.
+   * @description  Description text for Prefetch status PrefetchNotEligibleSameSiteCrossOriginPrefetchRequiredProxy.
    */
   PrefetchNotEligibleSameSiteCrossOriginPrefetchRequiredProxy:
       'The URL was not eligible to be prefetched because the default network context cannot be configured to use the prefetch proxy for a same-site cross-origin prefetch request.',
   /**
-   *@description  Description text for Prefetch status PrefetchNotEligibleSchemeIsNotHttps.
+   * @description  Description text for Prefetch status PrefetchNotEligibleSchemeIsNotHttps.
    */
   PrefetchNotEligibleSchemeIsNotHttps: 'The URL was not eligible to be prefetched because its scheme was not https:.',
   /**
-   *@description  Description text for Prefetch status PrefetchNotEligibleUserHasCookies.
+   * @description  Description text for Prefetch status PrefetchNotEligibleUserHasCookies.
    */
   PrefetchNotEligibleUserHasCookies:
       'The URL was not eligible to be prefetched because it was cross-site, but the user had cookies for that origin.',
   /**
-   *@description  Description text for Prefetch status PrefetchNotEligibleUserHasServiceWorker.
+   * @description  Description text for Prefetch status PrefetchNotEligibleUserHasServiceWorker.
    */
   PrefetchNotEligibleUserHasServiceWorker:
       'The URL was not eligible to be prefetched because there was a registered service worker for that origin, which is currently not supported.',
   /**
-   *@description  Description text for Prefetch status PrefetchNotUsedCookiesChanged.
+   * @description  Description text for Prefetch status PrefetchNotUsedCookiesChanged.
    */
   PrefetchNotUsedCookiesChanged:
       'The prefetch was not used because it was a cross-site prefetch, and cookies were added for that URL while the prefetch was ongoing, so the prefetched response is now out-of-date.',
   /**
-   *@description  Description text for Prefetch status PrefetchProxyNotAvailable.
+   * @description  Description text for Prefetch status PrefetchProxyNotAvailable.
    */
   PrefetchProxyNotAvailable:
       'A network error was encountered when trying to set up a connection to the prefetching proxy.',
   /**
-   *@description  Description text for Prefetch status PrefetchNotUsedProbeFailed.
+   * @description  Description text for Prefetch status PrefetchNotUsedProbeFailed.
    */
   PrefetchNotUsedProbeFailed: 'The prefetch was blocked by your Internet Service Provider or network administrator.',
   /**
-   *@description  Description text for Prefetch status PrefetchEvictedForNewerPrefetch.
+   * @description  Description text for Prefetch status PrefetchEvictedForNewerPrefetch.
    */
   PrefetchEvictedForNewerPrefetch:
       'The prefetch was discarded because the initiating page has too many prefetches ongoing, and this was one of the oldest.',
   /**
-   *@description Description text for Prefetch status PrefetchEvictedAfterCandidateRemoved.
+   * @description Description text for Prefetch status PrefetchEvictedAfterCandidateRemoved.
    */
   PrefetchEvictedAfterCandidateRemoved:
       'The prefetch was discarded because no speculation rule in the initating page triggers a prefetch for this URL anymore.',
   /**
-   *@description  Description text for Prefetch status PrefetchNotEligibleBatterySaverEnabled.
+   * @description  Description text for Prefetch status PrefetchNotEligibleBatterySaverEnabled.
    */
   PrefetchNotEligibleBatterySaverEnabled:
       'The prefetch was not performed because the Battery Saver setting was enabled.',
   /**
-   *@description  Description text for Prefetch status PrefetchNotEligiblePreloadingDisabled.
+   * @description  Description text for Prefetch status PrefetchNotEligiblePreloadingDisabled.
    */
   PrefetchNotEligiblePreloadingDisabled: 'The prefetch was not performed because speculative loading was disabled.',
   /**
-   *@description  Description text for Prefetch status PrefetchEvictedAfterBrowsingDataRemoved.
+   * @description  Description text for Prefetch status PrefetchEvictedAfterBrowsingDataRemoved.
    */
   PrefetchEvictedAfterBrowsingDataRemoved: 'The prefetch was discarded because browsing data was removed.',
 
@@ -148,8 +148,8 @@ const UIStrings = {
   prerenderFinalStatusNavigationRequestBlockedByCsp:
       'The prerendering navigation was blocked by a Content Security Policy.',
   /**
-   *@description Description text for PrerenderFinalStatus::kMojoBinderPolicy.
-   *@example {device.mojom.GamepadMonitor} PH1
+   * @description Description text for PrerenderFinalStatus::kMojoBinderPolicy.
+   * @example {device.mojom.GamepadMonitor} PH1
    */
   prerenderFinalStatusMojoBinderPolicy:
       'The prerendered page used a forbidden JavaScript API that is currently not supported. (Internal Mojo interface: {PH1})',
@@ -191,7 +191,7 @@ const UIStrings = {
   /**
    *  Description text for PrerenderFinalStatus::kUaChangeRequiresReload.
    */
-  prerenderFinalStatusUaChangeRequiresReload: 'Changing User Agent occured in prerendering navigation.',
+  prerenderFinalStatusUaChangeRequiresReload: 'Changing User Agent occurred in prerendering navigation.',
   /**
    *  Description text for PrerenderFinalStatus::kBlockedByClient.
    */
@@ -382,27 +382,27 @@ const UIStrings = {
   prerenderFinalStatusBrowsingDataRemoved: 'The prerendered page was unloaded because browsing data was removed.',
 
   /**
-   *@description Text in grid and details: Preloading attempt is not yet triggered.
+   * @description Text in grid and details: Preloading attempt is not yet triggered.
    */
   statusNotTriggered: 'Not triggered',
   /**
-   *@description Text in grid and details: Preloading attempt is eligible but pending.
+   * @description Text in grid and details: Preloading attempt is eligible but pending.
    */
   statusPending: 'Pending',
   /**
-   *@description Text in grid and details: Preloading is running.
+   * @description Text in grid and details: Preloading is running.
    */
   statusRunning: 'Running',
   /**
-   *@description Text in grid and details: Preloading finished and the result is ready for the next navigation.
+   * @description Text in grid and details: Preloading finished and the result is ready for the next navigation.
    */
   statusReady: 'Ready',
   /**
-   *@description Text in grid and details: Ready, then used.
+   * @description Text in grid and details: Ready, then used.
    */
   statusSuccess: 'Success',
   /**
-   *@description Text in grid and details: Preloading failed.
+   * @description Text in grid and details: Preloading failed.
    */
   statusFailure: 'Failure',
 } as const;

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

@@ -77,7 +77,7 @@ describeWithEnvironment('RuleSetDetailsView', () => {
 }
 `,
       url: 'https://example.com/speculationrules.json',
-      requestId: 'reqeustId' as Protocol.Network.RequestId,
+      requestId: 'requestId' as Protocol.Network.RequestId,
     };
     const component = await renderRuleSetDetailsView(data, false);
     assert.isUndefined(component.shadowRoot?.getElementById('error-message-text')?.textContent);
@@ -106,6 +106,33 @@ describeWithEnvironment('RuleSetDetailsView', () => {
     assert.strictEqual(textEditor.state.doc.toString(), data.sourceText);
   });
 
+  it('renders invalid rule set, invalid top-level key', async () => {
+    const data: Protocol.Preload.RuleSet = {
+      id: 'ruleSetId:1' as Protocol.Preload.RuleSetId,
+      loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
+      sourceText: `
+{
+  "prefetch": [
+    {
+      "source": "list",
+      "urls": ["/subresource.js"]
+    }
+  ],
+  "tag": "マイルール"
+}
+`,
+      backendNodeId: 1 as Protocol.DOM.BackendNodeId,
+      errorType: Protocol.Preload.RuleSetErrorType.InvalidRulesetLevelTag,
+      errorMessage: 'Tag value is invalid: must be ASCII printable.',
+    };
+    const component = await renderRuleSetDetailsView(data, false);
+    assert.deepEqual(
+        component.shadowRoot?.getElementById('error-message-text')?.textContent,
+        'Tag value is invalid: must be ASCII printable.');
+    const textEditor = component.shadowRoot?.querySelector('devtools-text-editor') as TextEditor.TextEditor.TextEditor;
+    assert.strictEqual(textEditor.state.doc.toString(), data.sourceText);
+  });
+
   it('renders invalid rule set, lacking `urls`', async () => {
     const data: Protocol.Preload.RuleSet = {
       id: 'ruleSetId:1' as Protocol.Preload.RuleSetId,

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

@@ -22,13 +22,13 @@ 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
+   * @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
+   * @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
    */
@@ -108,18 +108,12 @@ export class RuleSetDetailsView extends LegacyWrapper.LegacyWrapper.WrappableCom
     // clang-format off
     return html`
       <div class="ruleset-header">
-        <devtools-icon
-          .data=${{
-            iconName: 'cross-circle',
-            color: 'var(--icon-error)',
-            width: '16px',
-            height: '16px',
-          }}>
+        <devtools-icon name="cross-circle" class="medium">
         </devtools-icon>
         <span id="error-message-text">${this.#data.errorMessage}</span>
       </div>
     `;
-            // clang-format on
+    // clang-format on
   }
 
   #renderSource(sourceText: string): Lit.LitTemplate {

package/front_end/panels/application/preloading/components/RuleSetGrid.test.ts

@@ -156,6 +156,26 @@ describeWithEnvironment('RuleSetGrid', () => {
               },
               preloadsStatusSummary: '',
             },
+            {
+              ruleSet: {
+                id: 'ruleSetId:0.2' as Protocol.Preload.RuleSetId,
+                loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
+                sourceText: `
+{
+  "prefetch": [
+    {
+      "source": "list",
+      "urls": ["/prefetched.html"]
+    }
+  ],
+  "tag": "マイルール"
+}
+`,
+                errorType: Protocol.Preload.RuleSetErrorType.InvalidRulesetLevelTag,
+                errorMessage: 'Tag value is invalid: must be ASCII printable.',
+              },
+              preloadsStatusSummary: '',
+            },
           ],
           pageURL: urlString`https://example.com/`,
         },
@@ -163,6 +183,7 @@ describeWithEnvironment('RuleSetGrid', () => {
         [
           ['example.com/', '1 error 1 Not triggered, 2 Ready, 3 Failure'],
           ['example.com/', '1 error'],
+          ['example.com/', '1 error'],
         ],
     );
   });

package/front_end/panels/application/preloading/components/RuleSetGrid.ts

@@ -26,27 +26,27 @@ const {html, Directives: {styleMap}} = Lit;
 
 const UIStrings = {
   /**
-   *@description Column header: Short URL of rule set.
+   * @description Column header: Short URL of rule set.
    */
   ruleSet: 'Rule set',
   /**
-   *@description Column header: Show how many preloads are associated if valid, error counts if invalid.
+   * @description Column header: Show how many preloads are associated if valid, error counts if invalid.
    */
   status: 'Status',
   /**
-   *@description button: Title of button to reveal the corresponding request of rule set in Elements panel
+   * @description button: Title of button to reveal the corresponding request of rule set in Elements panel
    */
   clickToOpenInElementsPanel: 'Click to open in Elements panel',
   /**
-   *@description button: Title of button to reveal the corresponding request of rule set in Network panel
+   * @description button: Title of button to reveal the corresponding request of rule set in Network panel
    */
   clickToOpenInNetworkPanel: 'Click to open in Network panel',
   /**
-   *@description Value of status, specifying rule set contains how many errors.
+   * @description Value of status, specifying rule set contains how many errors.
    */
   errors: '{errorCount, plural, =1 {# error} other {# errors}}',
   /**
-   *@description button: Title of button to reveal preloading attempts with filter by selected rule set
+   * @description button: Title of button to reveal preloading attempts with filter by selected rule set
    */
   buttonRevealPreloadsAssociatedWithRuleSet: 'Reveal speculative loads associated with this rule set',
 } as const;
@@ -163,11 +163,9 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
                                 .action(revealInElements ? 'reveal-in-elements' : 'reveal-in-network')
                                 .track({click: true})}
                           >
-                            <devtools-icon name=${revealInElements ? 'code-circle' : 'arrow-up-down-circle'}
+                            <devtools-icon name=${revealInElements ? 'code-circle' : 'arrow-up-down-circle'} class="medium"
                               style=${styleMap({
                                 color: 'var(--icon-link)',
-                                width: '16px',
-                                height: '16px',
                                 'vertical-align': 'sub',
                               })}
                             ></devtools-icon>
@@ -179,7 +177,9 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
                     ${ruleSet.errorType !== undefined ? html`
                       <span style=${styleMap({color: 'var(--sys-color-error)'})}>
                         ${i18nString(UIStrings.errors, {errorCount: 1})}
-                      </span>` : ''} ${ruleSet.errorType !== Protocol.Preload.RuleSetErrorType.SourceIsNotJsonObject ? html`
+                      </span>` : ''} ${ruleSet.errorType !== Protocol.Preload.RuleSetErrorType.SourceIsNotJsonObject &&
+                      ruleSet.errorType !== Protocol.Preload.RuleSetErrorType.InvalidRulesetLevelTag ?
+                      html`
                       <button class="link" role="link"
                         @click=${() => this.#revealAttemptViewWithFilter(ruleSet)}
                         title=${i18nString(UIStrings.buttonRevealPreloadsAssociatedWithRuleSet)}