chrome-devtools-frontend 1.0.1593959 → 1.0.1595925

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -43,6 +43,7 @@ import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
+import * as UIComponentUtils from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -555,18 +556,15 @@ export class ElementsTreeOutline extends
           }
           return link;
         },
-        link => {
+        async link => {
           const listItem = UI.UIUtils.enclosingNodeOrSelfWithNodeName(link, 'li');
           if (!listItem) {
-            return null;
+            return undefined;
           }
 
           const treeElement =
               (UI.TreeOutline.TreeElement.getTreeElementBylistItemNode(listItem) as ElementsTreeElement | undefined);
-          if (!treeElement) {
-            return null;
-          }
-          return treeElement.node();
+          return await UIComponentUtils.ImagePreview.loadPrecomputedFeatures(treeElement?.node());
         });
 
     this.updateRecords = new Map();

package/front_end/panels/elements/ImagePreviewPopover.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import type * as Platform from '../../core/platform/platform.js';
-import type * as SDK from '../../core/sdk/sdk.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -15,13 +14,15 @@ import * as UI from '../../ui/legacy/legacy.js';
  */
 export class ImagePreviewPopover {
   private readonly getLinkElement: (arg0: Event) => Element | null;
-  private readonly getDOMNode: (arg0: Element) => SDK.DOMModel.DOMNode | null;
   private readonly popover: UI.PopoverHelper.PopoverHelper;
+
+  #getNodeFeatures: (link: Element) => Promise<Components.ImagePreview.PrecomputedFeatures|undefined>;
+
   constructor(
       container: HTMLElement, getLinkElement: (arg0: Event) => Element | null,
-      getDOMNode: (arg0: Element) => SDK.DOMModel.DOMNode | null) {
+      getNodeFeatures: (arg0: Element) => Promise<Components.ImagePreview.PrecomputedFeatures|undefined>) {
     this.getLinkElement = getLinkElement;
-    this.getDOMNode = getDOMNode;
+    this.#getNodeFeatures = getNodeFeatures;
     this.popover =
         new UI.PopoverHelper.PopoverHelper(container, this.handleRequest.bind(this), 'elements.image-preview');
     this.popover.setTimeout(0, 100);
@@ -39,11 +40,7 @@ export class ImagePreviewPopover {
     return {
       box: link.boxInWindow(),
       show: async (popover: UI.GlassPane.GlassPane) => {
-        const node = this.getDOMNode((link));
-        if (!node) {
-          return false;
-        }
-        const precomputedFeatures = await Components.ImagePreview.ImagePreview.loadDimensionsForNode(node);
+        const precomputedFeatures = await this.#getNodeFeatures(link);
         const preview = await Components.ImagePreview.ImagePreview.build(href, true, {
           precomputedFeatures,
           align: Components.ImagePreview.Align.CENTER,

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -807,6 +807,7 @@ export class StylePropertiesSection {
     let scopeIndex = 0;
     let supportsIndex = 0;
     let nestingIndex = 0;
+    let navigationsIndex = 0;
     this.nestingLevel = 0;
     for (const ruleType of rule.ruleTypes) {
       let ancestorRuleElement;
@@ -829,6 +830,9 @@ export class StylePropertiesSection {
         case Protocol.CSS.CSSRuleType.StartingStyleRule:
           ancestorRuleElement = this.createStartingStyleElement();
           break;
+        case Protocol.CSS.CSSRuleType.NavigationRule:
+          ancestorRuleElement = this.createNavigationElement(rule.navigations[navigationsIndex++]);
+          break;
       }
       if (ancestorRuleElement) {
         this.#ancestorRuleListElement.prepend(ancestorRuleElement);
@@ -1007,6 +1011,27 @@ export class StylePropertiesSection {
     return supportsElement;
   }
 
+  protected createNavigationElement(navigation: SDK.CSSNavigation.CSSNavigation): ElementsComponents.CSSQuery.CSSQuery
+      |undefined {
+    if (!navigation.text) {
+      return;
+    }
+
+    let onQueryTextClick;
+    if (navigation.styleSheetId) {
+      onQueryTextClick = this.handleQueryRuleClick.bind(this, navigation);
+    }
+
+    const navigationElement = new ElementsComponents.CSSQuery.CSSQuery();
+    navigationElement.data = {
+      queryPrefix: '@navigation',
+      queryText: navigation.text,
+      onQueryTextClick,
+      jslogContext: 'navigation',
+    };
+    return navigationElement;
+  }
+
   protected createNestingElement(nestingSelector?: string): HTMLElement|undefined {
     if (!nestingSelector) {
       return;
@@ -1419,6 +1444,8 @@ export class StylePropertiesSection {
         success = await cssModel.setSupportsText(query.styleSheetId, range, newContent);
       } else if (query instanceof SDK.CSSScope.CSSScope) {
         success = await cssModel.setScopeText(query.styleSheetId, range, newContent);
+      } else if (query instanceof SDK.CSSNavigation.CSSNavigation) {
+        success = await cssModel.setNavigationText(query.styleSheetId, range, newContent);
       } else {
         success = await cssModel.setMediaText(query.styleSheetId, range, newContent);
       }
@@ -1871,6 +1898,9 @@ export class FunctionRuleSection extends StylePropertiesSection {
     if ('supports' in condition) {
       return this.createSupportsElement(condition.supports);
     }
+    if ('navigation' in condition) {
+      return this.createNavigationElement(condition.navigation);
+    }
     return;
   }
 

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -236,13 +236,19 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.contentElement.addEventListener('copy', this.clipboardCopy.bind(this));
 
     this.boundOnScroll = this.onScroll.bind(this);
-    this.imagePreviewPopover = new ImagePreviewPopover(this.contentElement, event => {
-      const link = event.composedPath()[0];
-      if (link instanceof Element) {
-        return link;
-      }
-      return null;
-    }, () => this.node());
+    this.imagePreviewPopover = new ImagePreviewPopover(
+        this.contentElement,
+        event => {
+          const link = event.composedPath()[0];
+          if (link instanceof Element) {
+            return link;
+          }
+          return null;
+        },
+        async () => {
+          const features = await Components.ImagePreview.loadPrecomputedFeatures(this.node());
+          return features;
+        });
 
     UI.ViewManager.ViewManager.instance().addEventListener(UI.ViewManager.Events.VIEW_VISIBILITY_CHANGED, event => {
       if (event.data.revealedViewId === 'animations' || event.data.hiddenViewId === 'animations') {

package/front_end/panels/elements/elements-meta.ts

@@ -110,9 +110,13 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Elements category. Whether to show/hide code comments in HTML.
    */
+  htmlComments: 'HTML comments',
+  /**
+   * @description Title of an option under the Elements category that can be invoked through the Command Menu
+   */
   showHtmlComments: 'Show `HTML` comments',
   /**
-   * @description Title of a setting under the Elements category. Whether to show/hide code comments in HTML.
+   * @description Title of an option under the Elements category that can be invoked through the Command Menu
    */
   hideHtmlComments: 'Hide `HTML` comments',
   /**
@@ -126,12 +130,12 @@ const UIStrings = {
    * the inspect tooltip (an information pane that hovers next to selected DOM elements) has extra
    * detail.
    */
-  showDetailedInspectTooltip: 'Show detailed inspect tooltip',
+  detailedInspectTooltip: 'Detailed inspect tooltip',
   /**
    * @description Title of a setting under the Elements category in Settings. Turns on a mode where
    * hovering over CSS properties in the Styles pane will display a popover with documentation.
    */
-  showCSSDocumentationTooltip: 'Show CSS documentation tooltip',
+  CSSDocumentationTooltip: 'CSS documentation tooltip',
   /**
    * @description A context menu item (command) in the Elements panel that copy the styles of
    * the HTML element.
@@ -146,7 +150,7 @@ const UIStrings = {
    * @description Title of a setting under the Elements category. Whether to show/hide hide
    * the shadow DOM nodes of HTML elements that are built into the browser (e.g. the <input> element).
    */
-  showUserAgentShadowDOM: 'Show user agent shadow `DOM`',
+  userAgentShadowDOM: 'User agent shadow `DOM`',
   /**
    * @description Command for showing the 'Computed' tool. Displays computed CSS styles in Elements sidebar.
    */
@@ -489,7 +493,7 @@ Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
   storageType: Common.Settings.SettingStorageType.SYNCED,
   order: 1,
-  title: i18nLazyString(UIStrings.showUserAgentShadowDOM),
+  title: i18nLazyString(UIStrings.userAgentShadowDOM),
   settingName: 'show-ua-shadow-dom',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: false,
@@ -528,7 +532,7 @@ Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
   storageType: Common.Settings.SettingStorageType.SYNCED,
   order: 3,
-  title: i18nLazyString(UIStrings.showHtmlComments),
+  title: i18nLazyString(UIStrings.htmlComments),
   settingName: 'show-html-comments',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,
@@ -558,7 +562,7 @@ Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
   storageType: Common.Settings.SettingStorageType.SYNCED,
   order: 5,
-  title: i18nLazyString(UIStrings.showDetailedInspectTooltip),
+  title: i18nLazyString(UIStrings.detailedInspectTooltip),
   settingName: 'show-detailed-inspect-tooltip',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,
@@ -581,7 +585,7 @@ Common.Settings.registerSettingExtension({
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
   storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.showCSSDocumentationTooltip),
+  title: i18nLazyString(UIStrings.CSSDocumentationTooltip),
   settingName: 'show-css-property-documentation-on-hover',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,

package/front_end/panels/issues/AffectedSelectivePermissionsInterventionView.ts

@@ -0,0 +1,120 @@
+// Copyright 2026 The Chromium Authors
+// 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 type * as Platform from '../../core/platform/platform.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 type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
+import * as Components from '../../ui/legacy/components/utils/utils.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
+
+import {AffectedResourcesView} from './AffectedResourcesView.js';
+
+const UIStrings = {
+  /**
+   * @description Label for number of affected resources indication in issue view
+   */
+  nViolations: '{n, plural, =1 {# violation} other {# violations}}',
+  /**
+   * @description Title for the API column in the Selective Permissions Intervention affected resources list
+   */
+  api: 'API',
+  /**
+   * @description Title for the Script column in the Selective Permissions Intervention affected resources list
+   */
+  script: 'Script',
+  /**
+   * @description Title for the Ad Ancestry column in the Selective Permissions Intervention affected resources list
+   */
+  adAncestry: 'Ad Ancestry',
+  /**
+   * @description Text for unknown value
+   */
+  unknown: 'unknown',
+  /**
+   * @description Text for loading state
+   */
+  loading: 'loading…',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/issues/AffectedSelectivePermissionsInterventionView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class AffectedSelectivePermissionsInterventionView extends AffectedResourcesView {
+  readonly #linkifier = new Components.Linkifier.Linkifier();
+
+  protected getResourceNameWithCount(count: number): string {
+    return i18nString(UIStrings.nViolations, {n: count});
+  }
+
+  #render(): void {
+    const issues = Array.from(this.issue.getSelectivePermissionsInterventionIssues());
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(
+        html`
+      <tr>
+        <td class="affected-resource-header">${i18nString(UIStrings.api)}</td>
+        <td class="affected-resource-header">${i18nString(UIStrings.script)}</td>
+        <td class="affected-resource-header">${i18nString(UIStrings.adAncestry)}</td>
+      </tr>
+      ${issues.map(issue => this.#renderDetail(issue))}
+    `,
+        this.affectedResources, {host: this});
+    this.updateAffectedResourceCount(issues.length);
+  }
+
+  #renderDetail(issue: IssuesManager.SelectivePermissionsInterventionIssue.SelectivePermissionsInterventionIssue):
+      LitTemplate {
+    const details = issue.details();
+    const issuesModel = issue.model();
+
+    const stackTracePromise = (details.stackTrace && issuesModel) ?
+        this.#resolveStackTrace(details.stackTrace, issuesModel) :
+        Promise.resolve(html`<span>${i18nString(UIStrings.unknown)}</span>`);
+
+    const target = issuesModel ? issuesModel.target() : null;
+
+    return html`
+      <tr class="affected-resource-directive">
+        <td>${details.apiName}</td>
+        <td>${Directives.until(stackTracePromise, html`<span>${i18nString(UIStrings.loading)}</span>`)}</td>
+        <td class="affected-resource-cell">
+          <div class="ad-ancestry-list">
+            ${(details.adAncestry?.adAncestryChain || []).map(script => {
+      const link = this.#linkifier.linkifyScriptLocation(
+          target, script.scriptId, script.name as Platform.DevToolsPath.UrlString, 0);
+      return html`<div>${link}</div>`;
+    })}
+            ${
+        details.adAncestry?.rootScriptFilterlistRule ?
+            html`<div>Rule: ${details.adAncestry.rootScriptFilterlistRule}</div>` :
+            nothing}
+          </div>
+        </td>
+      </tr>
+    `;
+  }
+
+  async #resolveStackTrace(stackTrace: Protocol.Runtime.StackTrace, issuesModel: SDK.IssuesModel.IssuesModel):
+      Promise<LitTemplate> {
+    const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+    const stackTraceTranslated =
+        await debuggerWorkspaceBinding.createStackTraceFromProtocolRuntime(stackTrace, issuesModel.target());
+    return html`
+      <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {
+      stackTrace: stackTraceTranslated,
+      options: {expandable: true},
+    })}>
+      </devtools-widget>
+    `;
+  }
+
+  update(): void {
+    this.requestResolver.clear();
+    this.#linkifier.reset();
+    this.#render();
+  }
+}

package/front_end/panels/issues/IssueView.ts

@@ -29,6 +29,7 @@ import {AffectedMetadataAllowedSitesView} from './AffectedMetadataAllowedSitesVi
 import {AffectedPartitioningBlobURLView} from './AffectedPartitioningBlobURLView.js';
 import {AffectedPermissionElementsView} from './AffectedPermissionElementsView.js';
 import {AffectedItem, AffectedResourcesView, extractShortPath} from './AffectedResourcesView.js';
+import {AffectedSelectivePermissionsInterventionView} from './AffectedSelectivePermissionsInterventionView.js';
 import {AffectedSharedArrayBufferIssueDetailsView} from './AffectedSharedArrayBufferIssueDetailsView.js';
 import {AffectedSourcesView} from './AffectedSourcesView.js';
 import {AffectedTrackingSitesView} from './AffectedTrackingSitesView.js';
@@ -260,6 +261,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
       new AffectedDescendantsWithinSelectElementView(this, this.#issue, 'disallowed-select-descendants-details'),
       new AffectedPartitioningBlobURLView(this, this.#issue, 'partitioning-blob-url-details'),
       new AffectedPermissionElementsView(this, this.#issue, 'permission-element-elements'),
+      new AffectedSelectivePermissionsInterventionView(this, this.#issue, 'selective-permissions-intervention-details'),
     ];
     this.#hiddenIssuesMenu = new Components.HideIssuesMenu.HideIssuesMenu();
     this.#aggregatedIssuesCount = null;

package/front_end/panels/issues/IssuesPane.ts

@@ -110,6 +110,10 @@ const UIStrings = {
    * @description Category title for a group of permission element issues
    */
   permissionElement: 'PEPC Element',
+  /**
+   * @description Category title for the different 'Selective Permissions Intervention' issues.
+   */
+  selectivePermissionsIntervention: 'Selective Permissions Intervention',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/issues/IssuesPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -153,6 +157,8 @@ class IssueCategoryView extends UI.TreeOutline.TreeElement {
         return i18nString(UIStrings.generic);
       case IssuesManager.Issue.IssueCategory.PERMISSION_ELEMENT:
         return i18nString(UIStrings.permissionElement);
+      case IssuesManager.Issue.IssueCategory.SELECTIVE_PERMISSIONS_INTERVENTION:
+        return i18nString(UIStrings.selectivePermissionsIntervention);
       case IssuesManager.Issue.IssueCategory.OTHER:
         return i18nString(UIStrings.other);
     }

package/front_end/panels/issues/issues.ts

@@ -2,11 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as AffectedSelectivePermissionsInterventionView from './AffectedSelectivePermissionsInterventionView.js';
 import * as IssueRevealer from './IssueRevealer.js';
 import * as IssuesPane from './IssuesPane.js';
 import * as IssueView from './IssueView.js';
 
 export {
+  AffectedSelectivePermissionsInterventionView,
   IssueRevealer,
   IssuesPane,
   IssueView,

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -11,6 +11,7 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import {Link} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 
 import {type LighthouseController, type Preset, Presets, RuntimeSettings} from './LighthouseController.js';
 import type {LighthousePanel} from './LighthousePanel.js';
@@ -55,6 +56,78 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const renderStartView = (
+    _input: Record<string, never>,
+    output: {
+      helpText?: HTMLElement,
+      warningText?: HTMLElement,
+      modeFormElements?: HTMLElement,
+      deviceTypeFormElements?: HTMLElement,
+      categoriesFormElements?: HTMLElement,
+    },
+    target: HTMLElement,
+    ): void => {
+  // clang-format off
+  render(
+    html`
+      <form class="lighthouse-start-view">
+        <header class="hbox">
+          <div class="lighthouse-logo"></div>
+          <div class="lighthouse-title">
+            ${i18nString(UIStrings.generateLighthouseReport)}
+          </div>
+          <div class="lighthouse-start-button-container"></div>
+        </header>
+        <div
+          ${Directives.ref(e => {
+            output.helpText = e as HTMLElement;
+          })}
+          class="lighthouse-help-text hidden"
+        ></div>
+        <div class="lighthouse-options hbox">
+          <div class="lighthouse-form-section">
+            <div
+              class="lighthouse-form-elements"
+              ${Directives.ref(e => {
+                output.modeFormElements = e as HTMLElement;
+              })}
+            ></div>
+          </div>
+          <div class="lighthouse-form-section">
+            <div
+              class="lighthouse-form-elements"
+              ${Directives.ref(e => {
+                output.deviceTypeFormElements = e as HTMLElement;
+              })}
+            ></div>
+          </div>
+          <div class="lighthouse-form-categories">
+            <fieldset class="lighthouse-form-section lighthouse-form-categories-fieldset">
+              <legend class="lighthouse-form-section-label">
+                ${i18nString(UIStrings.categories)}
+              </legend>
+              <div
+                class="lighthouse-form-elements"
+                ${Directives.ref(e => {
+                  output.categoriesFormElements = e as HTMLElement;
+                })}
+              ></div>
+            </fieldset>
+          </div>
+        </div>
+        <div
+          ${Directives.ref(e => {
+            output.warningText = e as HTMLElement;
+          })}
+          class="lighthouse-warning-text hidden"
+        ></div>
+      </form>
+    `,
+    target,
+  );
+  // clang-format on
+};
+
 export class StartView extends UI.Widget.Widget {
   private controller: LighthouseController;
   private panel: LighthousePanel;
@@ -145,13 +218,11 @@ export class StartView extends UI.Widget.Widget {
     }
   }
 
-  private populateFormControls(fragment: UI.Fragment.Fragment, mode?: string): void {
+  private populateFormControls(deviceTypeFormElements: Element, categoryFormElements: Element, mode?: string): void {
     // Populate the device type
-    const deviceTypeFormElements = fragment.$('device-type-form-elements');
     this.populateRuntimeSettingAsRadio('lighthouse.device-type', i18nString(UIStrings.device), deviceTypeFormElements);
 
     // Populate the categories
-    const categoryFormElements = fragment.$('categories-form-elements') as HTMLElement;
 
     this.checkboxes = [];
     for (const preset of Presets) {
@@ -174,44 +245,34 @@ export class StartView extends UI.Widget.Widget {
     this.populateRuntimeSettingAsToolbarDropdown('lighthouse.throttling', this.#settingsToolbar);
 
     const {mode} = this.controller.getFlags();
-    this.populateStartButton(mode);
 
-    const fragment = UI.Fragment.Fragment.build`
-<form class="lighthouse-start-view">
-  <header class="hbox">
-    <div class="lighthouse-logo"></div>
-    <h1 class="lighthouse-title">${i18nString(UIStrings.generateLighthouseReport)}</h1>
-    <div class="lighthouse-start-button-container" $="start-button-container">${this.startButton}</div>
-  </header>
-  <div $="help-text" class="lighthouse-help-text hidden"></div>
-  <div class="lighthouse-options hbox">
-    <div class="lighthouse-form-section">
-      <div class="lighthouse-form-elements" $="mode-form-elements"></div>
-    </div>
-    <div class="lighthouse-form-section">
-      <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
-    </div>
-    <div class="lighthouse-form-categories">
-      <fieldset class="lighthouse-form-section lighthouse-form-categories-fieldset">
-        <legend class="lighthouse-form-section-label">${i18nString(UIStrings.categories)}</legend>
-        <div class="lighthouse-form-elements" $="categories-form-elements"></div>
-      </fieldset>
-    </div>
-  </div>
-  <div $="warning-text" class="lighthouse-warning-text hidden"></div>
-</form>
-    `;
-
-    this.helpText = fragment.$('help-text');
-    this.warningText = fragment.$('warning-text');
-
-    const modeFormElements = fragment.$('mode-form-elements');
-    this.populateRuntimeSettingAsRadio('lighthouse.mode', i18nString(UIStrings.mode), modeFormElements);
+    const output = {
+      helpText: undefined as HTMLElement | undefined,
+      warningText: undefined as HTMLElement | undefined,
+      modeFormElements: undefined as HTMLElement | undefined,
+      deviceTypeFormElements: undefined as HTMLElement | undefined,
+      categoriesFormElements: undefined as HTMLElement | undefined,
+    };
+
+    renderStartView(
+        {},
+        output,
+        this.contentElement,
+    );
 
-    this.populateFormControls(fragment, mode);
+    this.helpText = output.helpText;
+    this.warningText = output.warningText;
 
-    this.contentElement.textContent = '';
-    this.contentElement.append(fragment.element());
+    const modeFormElements = output.modeFormElements;
+    const deviceTypeFormElements = output.deviceTypeFormElements;
+    const categoriesFormElements = output.categoriesFormElements;
+
+    if (!modeFormElements || !deviceTypeFormElements || !categoriesFormElements) {
+      throw new Error('Required elements not found in template');
+    }
+
+    this.populateRuntimeSettingAsRadio('lighthouse.mode', i18nString(UIStrings.mode), modeFormElements);
+    this.populateFormControls(deviceTypeFormElements, categoriesFormElements, mode);
 
     this.refresh();
   }

package/front_end/panels/lighthouse/LighthouseTimespanView.ts

@@ -7,6 +7,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 
 import lighthouseDialogStyles from './lighthouseDialog.css.js';
 import type {LighthousePanel} from './LighthousePanel.js';
@@ -37,6 +38,43 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseTimespanView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const renderTimespanView = (
+    input: {
+      cancelButton: Element,
+      endButton: Element,
+    },
+    output: {
+      statusHeader?: HTMLElement,
+      contentContainer?: HTMLElement,
+    },
+    target: ShadowRoot,
+    ): void => {
+  // clang-format off
+  render(
+    html`
+      <div class="lighthouse-view vbox">
+        <span
+          ${Directives.ref(e => {
+            output.statusHeader = e as HTMLElement;
+          })}
+          class="header"
+        ></span>
+        <span
+          ${Directives.ref(e => {
+            output.contentContainer = e as HTMLElement;
+          })}
+          class="lighthouse-dialog-text"
+        ></span>
+        <div class="lighthouse-action-buttons hbox">
+          ${input.cancelButton} ${input.endButton}
+        </div>
+      </div>
+    `,
+    target,
+  );
+  // clang-format on
+};
+
 export class TimespanView extends UI.Dialog.Dialog {
   private panel: LighthousePanel;
   private statusHeader: Element|null;
@@ -90,20 +128,21 @@ export class TimespanView extends UI.Dialog.Dialog {
       className: 'cancel',
       jslogContext: 'lighthouse.cancel',
     });
-    const fragment = UI.Fragment.Fragment.build`
-  <div class="lighthouse-view vbox">
-  <span $="status-header" class="header"></span>
-  <span $="call-to-action" class="lighthouse-dialog-text"></span>
-  <div class="lighthouse-action-buttons hbox">
-  ${cancelButton}
-  ${this.endButton}
-  </div>
-  </div>
-  `;
-
-    this.statusHeader = fragment.$('status-header');
-    this.contentContainer = fragment.$('call-to-action');
-    dialogRoot.appendChild(fragment.element());
+
+    const output = {
+      statusHeader: undefined as HTMLElement | undefined,
+      contentContainer: undefined as HTMLElement | undefined,
+    };
+
+    renderTimespanView(
+        {
+          cancelButton,
+          endButton: this.endButton,
+        },
+        output, dialogRoot);
+
+    this.statusHeader = output.statusHeader ?? null;
+    this.contentContainer = output.contentContainer ?? null;
 
     this.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
     this.setMaxContentSize(new Geometry.Size(500, 400));