chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/application/components/SharedStorageMetadataView.ts

@@ -16,35 +16,35 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Text in SharedStorage Metadata View of the Application panel
+   * @description Text in SharedStorage Metadata View of the Application panel
    */
   sharedStorage: 'Shared storage',
   /**
-   *@description The time when the origin most recently created its shared storage database
+   * @description The time when the origin most recently created its shared storage database
    */
   creation: 'Creation Time',
   /**
-   *@description The placeholder text if there is no creation time because the origin is not yet using shared storage.
+   * @description The placeholder text if there is no creation time because the origin is not yet using shared storage.
    */
   notYetCreated: 'Not yet created',
   /**
-   *@description The number of entries currently in the origin's database
+   * @description The number of entries currently in the origin's database
    */
   numEntries: 'Number of Entries',
   /**
-   *@description The number of bits remaining in the origin's shared storage privacy budget
+   * @description The number of bits remaining in the origin's shared storage privacy budget
    */
   entropyBudget: 'Entropy Budget for Fenced Frames',
   /**
-   *@description Hover text for `entropyBudget` giving a more detailed explanation
+   * @description Hover text for `entropyBudget` giving a more detailed explanation
    */
   budgetExplanation: 'Remaining data leakage allowed within a 24-hour period for this origin in bits of entropy',
   /**
-   *@description Label for a button which when clicked causes the budget to be reset to the max.
+   * @description Label for a button which when clicked causes the budget to be reset to the max.
    */
   resetBudget: 'Reset Budget',
   /**
-   *@description The number of bytes used by entries currently in the origin's database
+   * @description The number of bytes used by entries currently in the origin's database
    */
   numBytesUsed: 'Number of Bytes Used',
 } as const;

package/front_end/panels/application/components/StackTrace.ts

@@ -8,7 +8,6 @@ import '../../../ui/components/expandable_list/expandable_list.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
-import * as Bindings from '../../../models/bindings/bindings.js';
 import * as Components from '../../../ui/legacy/components/utils/utils.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -20,19 +19,19 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Error message stating that something went wrong when tring to render stack trace
+   * @description Error message stating that something went wrong when trying to render stack trace
    */
   cannotRenderStackTrace: 'Cannot render stack trace',
   /**
-   *@description A link to show more frames in the stack trace if more are available. Never 0.
+   * @description A link to show more frames in the stack trace if more are available. Never 0.
    */
   showSMoreFrames: '{n, plural, =1 {Show # more frame} other {Show # more frames}}',
   /**
-   *@description A link to rehide frames that are by default hidden.
+   * @description A link to rehide frames that are by default hidden.
    */
   showLess: 'Show less',
   /**
-   *@description Label for a stack trace. If a frame is created programmatically (i.e. via JavaScript), there is a
+   * @description Label for a stack trace. If a frame is created programmatically (i.e. via JavaScript), there is a
    * stack trace for the line of code which caused the creation of the iframe. This is the stack trace we are showing here.
    */
   creationStackTrace: 'Frame Creation `Stack Trace`',
@@ -170,18 +169,13 @@ export class StackTrace extends HTMLElement {
       // and is handled again in the linkifier live location update callback.
       if ('link' in item && item.link) {
         const uiLocation = Components.Linkifier.Linkifier.uiLocation(item.link);
-        if (uiLocation &&
-            Bindings.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
-                uiLocation.uiSourceCode)) {
-          ignoreListHide = true;
-        }
+        ignoreListHide = Boolean(uiLocation?.isIgnoreListed());
       }
       if (this.#showHidden || !ignoreListHide) {
         if ('functionName' in item) {
           expandableRows.push(html`
           <devtools-stack-trace-row data-stack-trace-row .data=${{
-            stackTraceRowItem:
-              item,
+            stackTraceRowItem: item,
           }}></devtools-stack-trace-row>`);
         }
         if ('asyncDescription' in item) {

package/front_end/panels/application/components/StorageMetadataView.ts

@@ -18,81 +18,81 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   *@description The origin of a URL (https://web.dev/same-site-same-origin/#origin).
+   * @description The origin of a URL (https://web.dev/same-site-same-origin/#origin).
    *(for a lot of languages this does not need to be translated, please translate only where necessary)
    */
   origin: 'Origin',
   /**
-   *@description Site (https://web.dev/same-site-same-origin/#site) for the URL the user sees in the omnibox.
+   * @description Site (https://web.dev/same-site-same-origin/#site) for the URL the user sees in the omnibox.
    */
   topLevelSite: 'Top-level site',
   /**
-   *@description Text to show in the top-level site row, in case the value is opaque (https://html.spec.whatwg.org/#concept-origin-opaque).
+   * @description Text to show in the top-level site row, in case the value is opaque (https://html.spec.whatwg.org/#concept-origin-opaque).
    */
   opaque: '(opaque)',
   /**
-   *@description Whether the storage corresponds to an opaque key (similar to https://html.spec.whatwg.org/#concept-origin-opaque).
+   * @description Whether the storage corresponds to an opaque key (similar to https://html.spec.whatwg.org/#concept-origin-opaque).
    */
   isOpaque: 'Is opaque',
   /**
-   *@description Whether the storage corresponds to a third-party origin (https://web.dev/learn/privacy/third-parties/).
+   * @description Whether the storage corresponds to a third-party origin (https://web.dev/learn/privacy/third-parties/).
    */
   isThirdParty: 'Is third-party',
   /**
-   *@description Text indicating that the condition holds.
+   * @description Text indicating that the condition holds.
    */
   yes: 'Yes',
   /**
-   *@description Text indicating that the condition does not hold.
+   * @description Text indicating that the condition does not hold.
    */
   no: 'No',
   /**
-   *@description Text indicating that the storage corresponds to a third-party origin because top-level site is opaque.
+   * @description Text indicating that the storage corresponds to a third-party origin because top-level site is opaque.
    */
   yesBecauseTopLevelIsOpaque: 'Yes, because the top-level site is opaque',
   /**
-   *@description Text indicating that the storage corresponds to a third-party origin because the storage key is opaque.
+   * @description Text indicating that the storage corresponds to a third-party origin because the storage key is opaque.
    */
   yesBecauseKeyIsOpaque: 'Yes, because the storage key is opaque',
   /**
-   *@description Text indicating that the storage corresponds to a third-party origin because the origin doesn't match the top-level site.
+   * @description Text indicating that the storage corresponds to a third-party origin because the origin doesn't match the top-level site.
    */
   yesBecauseOriginNotInTopLevelSite: 'Yes, because the origin is outside of the top-level site',
   /**
-   *@description Text indicating that the storage corresponds to a third-party origin because the was a third-party origin in the ancestry chain.
+   * @description Text indicating that the storage corresponds to a third-party origin because the was a third-party origin in the ancestry chain.
    */
   yesBecauseAncestorChainHasCrossSite: 'Yes, because the ancestry chain contains a third-party origin',
   /**
-   *@description Text when something is loading.
+   * @description Text when something is loading.
    */
   loading: 'Loading…',
   /**
-   *@description The storage bucket name (https://wicg.github.io/storage-buckets/explainer#bucket-names)
+   * @description The storage bucket name (https://wicg.github.io/storage-buckets/explainer#bucket-names)
    */
   bucketName: 'Bucket name',
   /**
-   *@description The name of the default bucket (https://wicg.github.io/storage-buckets/explainer#the-default-bucket)
+   * @description The name of the default bucket (https://wicg.github.io/storage-buckets/explainer#the-default-bucket)
    *(This should not be a valid bucket name (https://wicg.github.io/storage-buckets/explainer#bucket-names))
    */
   defaultBucket: 'Default bucket',
   /**
-   *@description Text indicating that the storage is persistent (https://wicg.github.io/storage-buckets/explainer#storage-policy-persistence)
+   * @description Text indicating that the storage is persistent (https://wicg.github.io/storage-buckets/explainer#storage-policy-persistence)
    */
   persistent: 'Is persistent',
   /**
-   *@description The storage durability policy (https://wicg.github.io/storage-buckets/explainer#storage-policy-durability)
+   * @description The storage durability policy (https://wicg.github.io/storage-buckets/explainer#storage-policy-durability)
    */
   durability: 'Durability',
   /**
-   *@description The storage quota (https://wicg.github.io/storage-buckets/explainer#storage-policy-quota)
+   * @description The storage quota (https://wicg.github.io/storage-buckets/explainer#storage-policy-quota)
    */
   quota: 'Quota',
   /**
-   *@description The storage expiration (https://wicg.github.io/storage-buckets/explainer#storage-policy-expiration)
+   * @description The storage expiration (https://wicg.github.io/storage-buckets/explainer#storage-policy-expiration)
    */
   expiration: 'Expiration',
   /**
-   *@description Text indicating that no value is set
+   * @description Text indicating that no value is set
    */
   none: 'None',
   /**
@@ -100,12 +100,12 @@ const UIStrings = {
    */
   deleteBucket: 'Delete bucket',
   /**
-   *@description Text shown in the confirmation dialogue that displays before deleting the bucket.
-   *@example {bucket} PH1
+   * @description Text shown in the confirmation dialogue that displays before deleting the bucket.
+   * @example {bucket} PH1
    */
   confirmBucketDeletion: 'Delete the "{PH1}" bucket?',
   /**
-   *@description Explanation text shown in the confirmation dialogue that displays before deleting the bucket.
+   * @description Explanation text shown in the confirmation dialogue that displays before deleting the bucket.
    */
   bucketWillBeRemoved: 'The selected storage bucket and contained data will be removed.',
 } as const;
@@ -119,10 +119,6 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
   #storageKey: SDK.StorageKeyManager.StorageKey|null = null;
   #storageBucket: Protocol.Storage.StorageBucketInfo|null = null;
 
-  getShadow(): ShadowRoot {
-    return this.#shadow;
-  }
-
   setStorageKey(storageKey: string): void {
     this.#storageKey = SDK.StorageKeyManager.parseStorageKey(storageKey);
     void this.render();

package/front_end/panels/application/components/TrustTokensView.ts

@@ -25,15 +25,15 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Text for the issuer of an item
+   * @description Text for the issuer of an item
    */
   issuer: 'Issuer',
   /**
-   *@description Column header for Trust Token table
+   * @description Column header for Trust Token table
    */
   storedTokenCount: 'Stored token count',
   /**
-   *@description Hover text for an info icon in the Private State Token panel
+   * @description Hover text for an info icon in the Private State Token panel
    */
   allStoredTrustTokensAvailableIn: 'All stored private state tokens available in this browser instance.',
   /**

package/front_end/panels/application/components/frameDetailsReportView.css

@@ -66,7 +66,7 @@ button.text-link {
 
 .inline-name {
   color: var(--sys-color-token-subtle);
-  padding-right: 4px;
+  padding-inline: 4px;
   user-select: none;
   white-space: pre-line;
 }

package/front_end/panels/application/components/sharedStorageAccessGrid.css

@@ -3,25 +3,27 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-:host {
-  padding: 20px;
-  height: 100%;
-  display: flex;
-}
+@scope to (devtools-widget > *) {
+  :scope {
+    padding: 20px;
+    height: 100%;
+    display: flex;
+  }
 
-.heading {
-  font-size: 15px;
-}
+  .heading {
+    font-size: 15px;
+  }
 
-devtools-data-grid {
-  margin-top: 20px;
-}
+  devtools-data-grid {
+    margin-top: 20px;
+  }
 
-.info-icon {
-  vertical-align: text-bottom;
-  height: 14px;
-}
+  .info-icon {
+    vertical-align: text-bottom;
+    height: 14px;
+  }
 
-.no-events-message {
-  margin-top: 20px;
+  .no-events-message {
+    margin-top: 20px;
+  }
 }

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

@@ -27,76 +27,76 @@ import preloadingViewDropDownStyles from './preloadingViewDropDown.css.js';
 
 const UIStrings = {
   /**
-   *@description DropDown title for filtering preloading attempts by rule set
+   * @description DropDown title for filtering preloading attempts by rule set
    */
   filterFilterByRuleSet: 'Filter by rule set',
   /**
-   *@description DropDown text for filtering preloading attempts by rule set: No filter
+   * @description DropDown text for filtering preloading attempts by rule set: No filter
    */
   filterAllPreloads: 'All speculative loads',
   /**
-   *@description Dropdown subtitle for filtering preloading attempts by rule set
+   * @description Dropdown subtitle for filtering preloading attempts by rule set
    *             when there are no rule sets in the page.
    */
   noRuleSets: 'no rule sets',
   /**
-   *@description Text in grid: Rule set is valid
+   * @description Text in grid: Rule set is valid
    */
   validityValid: 'Valid',
   /**
-   *@description Text in grid: Rule set must be a valid JSON object
+   * @description Text in grid: Rule set must be a valid JSON object
    */
   validityInvalid: 'Invalid',
   /**
-   *@description Text in grid: Rule set contains invalid rules and they are ignored
+   * @description Text in grid: Rule set contains invalid rules and they are ignored
    */
   validitySomeRulesInvalid: 'Some rules invalid',
   /**
-   *@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',
   /**
-   *@description Text to pretty print a file
+   * @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
+   * @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
+   * @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
+   * @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
+   * @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
+   * @description Text for a learn more link
    */
   learnMore: 'Learn more',
 } as const;
@@ -158,6 +158,7 @@ class PreloadingUIUtils {
       case undefined:
         return i18nString(UIStrings.validityValid);
       case Protocol.Preload.RuleSetErrorType.SourceIsNotJsonObject:
+      case Protocol.Preload.RuleSetErrorType.InvalidRulesetLevelTag:
         return i18nString(UIStrings.validityInvalid);
       case Protocol.Preload.RuleSetErrorType.InvalidRulesSkipped:
         return i18nString(UIStrings.validitySomeRulesInvalid);
@@ -202,7 +203,7 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
   private shouldPrettyPrint = Common.Settings.Settings.instance().moduleSetting('auto-pretty-print-minified').get();
 
   constructor(model: SDK.PreloadingModel.PreloadingModel) {
-    super(/* isWebComponent */ true, /* delegatesFocus */ false);
+    super({useShadowDom: true});
     this.registerRequiredCSS(emptyWidgetStyles, preloadingViewStyles);
 
     this.model = model;
@@ -353,10 +354,12 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
   private readonly ruleSetSelector: PreloadingRuleSetSelector;
 
   constructor(model: SDK.PreloadingModel.PreloadingModel) {
-    super(/* isWebComponent */ true, /* delegatesFocus */ false);
+    super({
+      jslog: `${VisualLogging.pane('preloading-speculations')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(emptyWidgetStyles, preloadingViewStyles);
 
-    this.element.setAttribute('jslog', `${VisualLogging.pane('preloading-speculations')}`);
     this.model = model;
     SDK.TargetManager.TargetManager.instance().addScopeChangeListener(this.onScopeChange.bind(this));
     SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -510,10 +513,12 @@ export class PreloadingSummaryView extends UI.Widget.VBox {
   private readonly usedPreloading = new PreloadingComponents.UsedPreloadingView.UsedPreloadingView();
 
   constructor(model: SDK.PreloadingModel.PreloadingModel) {
-    super(/* isWebComponent */ true, /* delegatesFocus */ false);
+    super({
+      jslog: `${VisualLogging.pane('speculative-loads')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(emptyWidgetStyles, preloadingViewStyles);
 
-    this.element.setAttribute('jslog', `${VisualLogging.pane('speculative-loads')}`);
     this.model = model;
     SDK.TargetManager.TargetManager.instance().addScopeChangeListener(this.onScopeChange.bind(this));
     SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -709,7 +714,7 @@ export class PreloadingWarningsView extends UI.Widget.VBox {
   private readonly infobar = new PreloadingComponents.PreloadingDisabledInfobar.PreloadingDisabledInfobar();
 
   constructor() {
-    super(/* isWebComponent */ false, /* delegatesFocus */ false);
+    super();
     this.registerRequiredCSS(emptyWidgetStyles);
   }
 

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

@@ -21,39 +21,39 @@ const {render, html, Directives: {styleMap}} = Lit;
 
 const UIStrings = {
   /**
-   *@description Column header
+   * @description Column header
    */
   url: 'URL',
   /**
-   *@description Column header: Action of preloading (prefetch/prerender)
+   * @description Column header: Action of preloading (prefetch/prerender)
    */
   action: 'Action',
   /**
-   *@description Column header: Status of preloading attempt
+   * @description Column header: Status of preloading attempt
    */
   status: 'Status',
   /**
-   *@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/PreloadingDetailsReportView.ts

@@ -29,81 +29,81 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Text in PreloadingDetailsReportView of the Application panel if no element is selected. An element here is an item in a
+   * @description Text in PreloadingDetailsReportView of the Application panel if no element is selected. An element here is an item in a
    * table of target URLs and additional prefetching states. https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules
    */
   noElementSelected: 'No element selected',
   /**
-   *@description Text in PreloadingDetailsReportView of the Application panel to prompt user to select an element in a table. An element here is an item in a
+   * @description Text in PreloadingDetailsReportView of the Application panel to prompt user to select an element in a table. An element here is an item in a
    * table of target URLs and additional prefetching states. https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules
    */
   selectAnElementForMoreDetails: 'Select an element for more details',
   /**
-   *@description Text in details
+   * @description Text in details
    */
   detailsDetailedInformation: 'Detailed information',
   /**
-   *@description Text in details
+   * @description Text in details
    */
   detailsAction: 'Action',
   /**
-   *@description Text in details
+   * @description Text in details
    */
   detailsStatus: 'Status',
   /**
-   *@description Text in details
+   * @description Text in details
    */
   detailsTargetHint: 'Target hint',
   /**
-   *@description Text in details
+   * @description Text in details
    */
   detailsFailureReason: 'Failure reason',
   /**
-   *@description Header of rule set
+   * @description Header of rule set
    */
   detailsRuleSet: 'Rule set',
   /**
-   *@description Description: status
+   * @description Description: status
    */
   automaticallyFellBackToPrefetch: '(automatically fell back to prefetch)',
   /**
-   *@description Description: status
+   * @description Description: status
    */
   detailedStatusNotTriggered: 'Speculative load attempt is not yet triggered.',
   /**
-   *@description Description: status
+   * @description Description: status
    */
   detailedStatusPending: 'Speculative load attempt is eligible but pending.',
   /**
-   *@description Description: status
+   * @description Description: status
    */
   detailedStatusRunning: 'Speculative load is running.',
   /**
-   *@description Description: status
+   * @description Description: status
    */
   detailedStatusReady: 'Speculative load finished and the result is ready for the next navigation.',
   /**
-   *@description Description: status
+   * @description Description: status
    */
   detailedStatusSuccess: 'Speculative load finished and used for a navigation.',
   /**
-   *@description Description: status
+   * @description Description: status
    */
   detailedStatusFailure: 'Speculative load failed.',
   /**
-   *@description Description: status
+   * @description Description: status
    */
   detailedStatusFallbackToPrefetch: 'Speculative load failed, but fallback to prefetch succeeded.',
   /**
-   *@description button: Contents of button to inspect prerendered page
+   * @description button: Contents of button to inspect prerendered page
    */
   buttonInspect: 'Inspect',
   /**
-   *@description button: Title of button to inspect prerendered page
+   * @description button: Title of button to inspect prerendered page
    */
   buttonClickToInspect: 'Click to inspect prerendered page',
   /**
-   *@description button: Title of button to reveal rule set
+   * @description button: Title of button to reveal rule set
    */
   buttonClickToRevealRuleSet: 'Click to reveal rule set',
 } as const;
@@ -264,9 +264,9 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
 
     const action = PreloadingString.capitalizedAction(attempt.action);
 
-    let maybeFellback: Lit.LitTemplate = Lit.nothing;
+    let maybeFallback: Lit.LitTemplate = Lit.nothing;
     if (isFallbackToPrefetch) {
-      maybeFellback = html`${i18nString(UIStrings.automaticallyFellBackToPrefetch)}`;
+      maybeFallback = html`${i18nString(UIStrings.automaticallyFellBackToPrefetch)}`;
     }
 
     let maybeInspectButton: Lit.LitTemplate = Lit.nothing;
@@ -313,7 +313,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
         <devtools-report-key>${i18nString(UIStrings.detailsAction)}</devtools-report-key>
         <devtools-report-value>
           <div class="text-ellipsis" title="">
-            ${action} ${maybeFellback} ${maybeInspectButton}
+            ${action} ${maybeFallback} ${maybeInspectButton}
           </div>
         </devtools-report-value>
     `;