chrome-devtools-frontend 1.0.1521880 → 1.0.1522145

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

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+  :scope {
+    overflow: auto;
+    height: 100%;
+  }
+
+  .reporting-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .reporting-header {
+    font-size: 15px;
+    background-color: var(--sys-color-surface2);
+    padding: 1px 4px;
+    flex-shrink: 0;
+  }
+
+  devtools-data-grid {
+    flex: auto;
+  }
+
+  .inline-icon {
+    vertical-align: text-bottom;
+  }
+}

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

@@ -0,0 +1,9 @@
+/*
+ * Copyright 2025 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.default-bucket {
+  font-style: italic;
+}

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -183,29 +183,23 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
             'source-code': true,
             'breakpoint-hit': input.highlightedItem === breakpoint,
           });
-  const categoryConfigElements = new WeakMap<HTMLLIElement, SDK.CategorizedBreakpoint.Category>();
-  const trackCategoryConfigElement = (category: SDK.CategorizedBreakpoint.Category): ReturnType<typeof ref> =>
-      ref((e: Element|undefined) => {
-        if (e instanceof HTMLLIElement) {
-          categoryConfigElements.set(e, category);
-        }
-      });
-  const onExpand = ({detail: {expanded, target}}: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
-    const category = categoryConfigElements.get(target);
-    const breakpoints = category && input.categories.get(category);
-    if (!breakpoints) {
-      return;
-    }
-    if (shouldExpandCategory(breakpoints)) {
-      // Basically ignore expand/collapse when the category is expanded by default.
-      return;
-    }
-    if (expanded) {
-      output.userExpandedCategories.add(category);
-    } else {
-      output.userExpandedCategories.delete(category);
-    }
-  };
+  const onExpand =
+      (category: SDK.CategorizedBreakpoint.Category, {detail: {expanded}}: UI.TreeOutline.TreeViewElement.ExpandEvent):
+          void => {
+            const breakpoints = category && input.categories.get(category);
+            if (!breakpoints) {
+              return;
+            }
+            if (shouldExpandCategory(breakpoints)) {
+              // Basically ignore expand/collapse when the category is expanded by default.
+              return;
+            }
+            if (expanded) {
+              output.userExpandedCategories.add(category);
+            } else {
+              output.userExpandedCategories.delete(category);
+            }
+          };
 
   render(
       // clang-format off
@@ -219,17 +213,15 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     </devtools-toolbar>
     <devtools-tree
       ${ref(e => { output.defaultFocus = e; })}
-      @expand=${onExpand}
       .template=${html`
         <ul role="tree">
           ${filteredCategories.map(([category, breakpoints]) => html`
-            <li
+            <li @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => onExpand(category, e)}
                 role="treeitem"
                 jslog-context=${category}
                 aria-checked=${breakpoints.some(breakpoint => breakpoint.enabled())
                   ? breakpoints.some(breakpoint => !breakpoint.enabled()) ? 'mixed' : true
-                  : false}
-                ${trackCategoryConfigElement(category)}>
+                  : false}>
               <style>${categorizedBreakpointsSidebarPaneStyles}</style>
               <devtools-checkbox
                 class="small"

package/front_end/panels/common/BadgeNotification.ts

@@ -192,7 +192,14 @@ export class BadgeNotification extends UI.Widget.Widget {
   }
 
   async #presentStarterBadge(badge: Badges.Badge): Promise<void> {
-    const gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile();
+    const getProfileResponse = await Host.GdpClient.GdpClient.instance().getProfile();
+    // The `getProfile` call failed and returned a `null`.
+    // For that case, we don't show anything.
+    if (!getProfileResponse) {
+      return;
+    }
+
+    const hasGdpProfile = Boolean(getProfileResponse.profile);
     const receiveBadgesSettingEnabled = Badges.UserBadges.instance().isReceiveBadgesSettingEnabled();
     const googleDeveloperProgramLink = UI.XLink.XLink.create(
         'https://developers.google.com/program', lockedString('Google Developer Program'), 'badge-link', undefined,
@@ -200,14 +207,14 @@ export class BadgeNotification extends UI.Widget.Widget {
 
     // If the user already has a GDP profile and the receive badges setting enabled,
     // starter badge behaves as if it's an activity based badge.
-    if (gdpProfile && receiveBadgesSettingEnabled) {
+    if (hasGdpProfile && receiveBadgesSettingEnabled) {
       this.#presentActivityBasedBadge(badge);
       return;
     }
 
     // If the user already has a GDP profile and the receive badges setting disabled,
     // starter badge behaves as a nudge for opting into receiving badges.
-    if (gdpProfile && !receiveBadgesSettingEnabled) {
+    if (hasGdpProfile && !receiveBadgesSettingEnabled) {
       this.#show({
         message: i18nFormatString(
             UIStrings.starterBadgeAwardMessageSettingDisabled, {PH1: badge.title, PH2: googleDeveloperProgramLink}),

package/front_end/panels/network/NetworkPanel.ts

@@ -1050,7 +1050,7 @@ let searchNetworkViewInstance: SearchNetworkView;
 
 export class SearchNetworkView extends Search.SearchView.SearchView {
   private constructor() {
-    super('network', new Common.Throttler.Throttler(/* timeoutMs */ 200));
+    super('network');
   }
 
   static instance(opts: {

package/front_end/panels/search/SearchResultsPane.ts

@@ -52,23 +52,24 @@ export type View = (input: ViewInput, output: unknown, target: HTMLElement) => v
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   const {results, matches, expandedResults, onSelectMatch, onExpandSearchResult, onShowMoreMatches} = input;
 
-  const onExpand = ({detail: {expanded, target}}: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
-    const searchResultIndex = Number(target.dataset.searchResultIndex);
-    const searchResult = results[searchResultIndex];
-    if (expanded) {
-      expandedResults.add(searchResult);
-      onExpandSearchResult(searchResult);
-    } else {
-      expandedResults.delete(searchResult);
-    }
-  };
+  const onExpand =
+      (searchResult: SearchResult, {detail: {expanded}}: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
+        if (expanded) {
+          expandedResults.add(searchResult);
+          onExpandSearchResult(searchResult);
+        } else {
+          expandedResults.delete(searchResult);
+        }
+      };
 
   // clang-format off
   render(html`
-    <devtools-tree hide-overflow @expand=${onExpand} .template=${html`
+    <devtools-tree hide-overflow .template=${html`
       <ul role="tree">
-        ${results.map((searchResult, i) => html`
-          <li role="treeitem" data-search-result-index=${i} class="search-result">
+        ${results.map(searchResult => html`
+          <li @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => onExpand(searchResult, e)}
+              role="treeitem"
+              class="search-result">
             <style>${searchResultsPaneStyles}</style>
             ${renderSearchResult(searchResult)}
             <ul role="group" ?hidden=${!expandedResults.has(searchResult)}>

package/front_end/panels/search/SearchView.ts

@@ -293,12 +293,9 @@ export class SearchView extends UI.Widget.VBox {
   }>;
   #searchScope: SearchScope|null;
 
-  // We throttle adding search results, otherwise we trigger DOM layout for each
-  // result added.
-  #throttler: Common.Throttler.Throttler;
   #searchResults: SearchResult[] = [];
 
-  constructor(settingKey: string, throttler: Common.Throttler.Throttler, view = DEFAULT_VIEW) {
+  constructor(settingKey: string, view = DEFAULT_VIEW) {
     super({
       jslog: `${VisualLogging.panel('search').track({resize: true})}`,
       useShadowDom: true,
@@ -316,7 +313,6 @@ export class SearchView extends UI.Widget.VBox {
     this.#searchConfig = null;
     this.#pendingSearchConfig = null;
     this.#progress = null;
-    this.#throttler = throttler;
 
     this.#advancedSearchConfig = Common.Settings.Settings.instance().createLocalSetting(
         settingKey + '-search-config', new Workspace.SearchConfig.SearchConfig('', true, false).toPlainObject());
@@ -451,17 +447,8 @@ export class SearchView extends UI.Widget.VBox {
       return;
     }
     this.#searchResults.push(searchResult);
-    void this.#throttler.schedule(async () => this.#setSearchResults());
-  }
-
-  #setSearchResults(): void {
-    this.#searchMatchesCount = 0;
-    this.#searchResultsCount = 0;
-    this.#nonEmptySearchResultsCount = 0;
-    for (const searchResult of this.#searchResults) {
-      this.#addSearchResult(searchResult);
-    }
-    this.performUpdate();
+    this.#addSearchResult(searchResult);
+    this.requestUpdate();
   }
 
   #onSearchFinished(searchId: number, finished: boolean): void {
@@ -640,8 +627,4 @@ export class SearchView extends UI.Widget.VBox {
     this.#resetSearch();
     this.#onClearSearchInput();
   }
-
-  get throttlerForTest(): Common.Throttler.Throttler {
-    return this.#throttler;
-  }
 }

package/front_end/panels/settings/components/SyncSection.ts

@@ -11,7 +11,6 @@ import type * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
-import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Badges from '../../../models/badges/badges.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
@@ -206,8 +205,13 @@ export class SyncSection extends HTMLElement {
       return;
     }
 
-    this.#gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile() ?? undefined;
-    this.#isEligibleToCreateGdpProfile = await Host.GdpClient.GdpClient.instance().isEligibleToCreateProfile();
+    const getProfileResponse = await Host.GdpClient.GdpClient.instance().getProfile();
+    if (!getProfileResponse) {
+      return;
+    }
+
+    this.#gdpProfile = getProfileResponse.profile ?? undefined;
+    this.#isEligibleToCreateGdpProfile = getProfileResponse.isEligible;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 }
@@ -310,9 +314,7 @@ function renderGdpSectionIfNeeded({
   if (!Host.GdpClient.isGdpProfilesAvailable() || (!gdpProfile && !isEligibleToCreateProfile)) {
     return Lit.nothing;
   }
-  const hasReceiveBadgesCheckbox = receiveBadgesSetting &&
-      Host.GdpClient.getGdpProfilesEnterprisePolicy() === Root.Runtime.GdpProfilesEnterprisePolicyValue.ENABLED;
-
+  const hasReceiveBadgesCheckbox = Host.GdpClient.isBadgesEnabled() && receiveBadgesSetting;
   function renderBrand(): Lit.LitTemplate {
     // clang-format off
     return html`

package/front_end/panels/sources/SearchSourcesView.ts

@@ -17,7 +17,7 @@ export class SearchSources {
 
 export class SearchSourcesView extends Search.SearchView.SearchView {
   constructor() {
-    super('sources', new Common.Throttler.Throttler(/* timeoutMs */ 200));
+    super('sources');
   }
 
   override createScope(): Search.SearchScope.SearchScope {

package/front_end/panels/whats_new/ReleaseNoteText.ts

@@ -40,28 +40,32 @@ export function getReleaseNote(): ReleaseNote {
 }
 
 let releaseNote: ReleaseNote = {
-  version: 82,
-  header: 'What\'s new in DevTools 141',
+  version: 83,
+  header: 'What\'s new in DevTools 142',
   markdownLinks: [
     {
-      key: 'ai-insight',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-141/#ai-insight',
+      key: 'perf-ai-agent',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-142/#perf-ai-agent',
     },
     {
-      key: 'ai-chat-export',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-141/#ai-chat-export',
+      key: 'ai-code-completion',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-142/#ai-code-completion',
     },
     {
-      key: 'ipp',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-141/#ipp',
+      key: 'gdp',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-142/#gdp',
+    },
+    {
+      key: 'ai-main-button',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-142/#ai-main-button',
     },
   ],
   videoLinks: [
     {
-      description: 'See past highlights from Chrome 140',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-140' as Platform.DevToolsPath.UrlString,
+      description: 'See past highlights from Chrome 141',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-141' as Platform.DevToolsPath.UrlString,
       type: VideoType.WHATS_NEW,
     },
   ],
-  link: 'https://developer.chrome.com/blog/new-in-devtools-141/',
+  link: 'https://developer.chrome.com/blog/new-in-devtools-142/',
 };

package/front_end/panels/whats_new/resources/WNDT.md

@@ -1,8 +1,11 @@
-### [Debug the network dependency tree with Gemini](ai-insight)
-In Performance > Insights > Network dependency tree, click the corresponding AI button to discuss and debug said tree with Gemini in the 'AI assistance' panel.
+### [Full stack trace AI agent in Performance panel](perf-ai-agent)
+The Performance panel now integrates a more capable AI agent that has full access to the stack trace.
 
-### [Export your chats with Gemini](ai-chat-export)
-You can now export your current chat with Gemini or copy its response to clipboard with a click of a button.
+### [AI code completion in Sources and Console](ai-code-completion)
+Code completion powered by AI is now available in the Sources panel and the Console.
 
-### [Filter IP protected network requests](ipp)
-In the Network panel, you can now filter requests sent to IP Protection proxies.
+### [Google Developer Program support](gdp)
+The Google Developer Program, a ready-made subscription and community platform, is now in DevTools, offering a more personalized experience, a badge system, and easier discovery of new features.
+
+### [One main 'Debug with AI' button](ai-main-button)
+The primary action bar at the top of DevTools now features the primary "Debug with AI" button which opens the 'AI assistance' panel in a right-hand side bar.

package/front_end/third_party/diff/README.chromium

@@ -3,7 +3,6 @@ Short Name: diff-match-patch
 URL: https://github.com/google/diff-match-patch/tree/master/javascript
 Version: 5.60.0
 Revision: 0ae308daa77aeddb089cd6b7b0a443fca026266e
-Update Mechanism: Manual
 License: Apache-2.0
 License File: LICENSE
 Update Mechanism: Static.HardFork (https://crbug.com/422918273)

package/front_end/ui/legacy/Treeoutline.ts

@@ -1637,7 +1637,7 @@ function getTreeNodes(nodeList: NodeList|Node[]): HTMLLIElement[] {
  * <devtools-tree
  *   .template=${html`
  *     <ul role="tree">
- *        <li role="treeitem">
+ *        <li role="treeitem" @expand=${onExpand}>
  *          Tree Node Text
  *          <ul role="group">
  *            Node with subtree
@@ -1659,7 +1659,7 @@ function getTreeNodes(nodeList: NodeList|Node[]): HTMLLIElement[] {
  * tree node). If a tree node contains a <ul role="group">, that defines a subtree under that tree node. The `hidden`
  * attribute on the <ul> defines whether that subtree should render as collapsed. Note that node expanding/collapsing do
  * not reflect this state back to the attribute on the config element, those state changes are rather sent out as
- * `expand` events.
+ * `expand` events on the config element.
  *
  * Under the hood this uses TreeOutline.
  *
@@ -1687,7 +1687,6 @@ function getTreeNodes(nodeList: NodeList|Node[]): HTMLLIElement[] {
  *
  * @property template Define the tree contents
  * @event selected A node was selected
- * @event expand A subtree was expanded or collapsed
  * @attribute navigation-variant Turn this tree into the navigation variant
  * @attribute hide-overflow
  */
@@ -1704,14 +1703,12 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     });
     this.#treeOutline.addEventListener(Events.ElementExpanded, event => {
       if (event.data instanceof TreeViewTreeElement) {
-        this.dispatchEvent(new TreeViewElement.ExpandEvent(
-            {expanded: true, target: (event.data as TreeViewTreeElement).configElement}));
+        event.data.listItemElement.dispatchEvent(new TreeViewElement.ExpandEvent({expanded: true}));
       }
     });
     this.#treeOutline.addEventListener(Events.ElementCollapsed, event => {
       if (event.data instanceof TreeViewTreeElement) {
-        this.dispatchEvent(new TreeViewElement.ExpandEvent(
-            {expanded: false, target: (event.data as TreeViewTreeElement).configElement}));
+        event.data.listItemElement.dispatchEvent(new TreeViewElement.ExpandEvent({expanded: false}));
       }
     });
     this.addNodes(getTreeNodes([this]));
@@ -1832,8 +1829,8 @@ export namespace TreeViewElement {
     }
   }
 
-  export class ExpandEvent extends CustomEvent<{expanded: boolean, target: HTMLLIElement}> {
-    constructor(detail: {expanded: boolean, target: HTMLLIElement}) {
+  export class ExpandEvent extends CustomEvent<{expanded: boolean}> {
+    constructor(detail: {expanded: boolean}) {
       super('expand', {detail});
     }
   }

package/front_end/ui/legacy/UIUtils.ts

@@ -62,7 +62,6 @@ import smallBubbleStyles from './smallBubble.css.js';
 import type {ToolbarButton} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {Widget} from './Widget.js';
-import type {XWidget} from './XWidget.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -1935,27 +1934,11 @@ function updateWidgetfocusWidgetForNode(node: Node|null): void {
   }
 }
 
-function updateXWidgetfocusWidgetForNode(node: Node|null): void {
-  node = node?.parentNodeOrShadowHost() ?? null;
-  const XWidgetConstructor = customElements.get('x-widget') as Platform.Constructor.Constructor<XWidget>| undefined;
-  let widget = null;
-  while (node) {
-    if (XWidgetConstructor && node instanceof XWidgetConstructor) {
-      if (widget) {
-        node.defaultFocusedElement = widget;
-      }
-      widget = node;
-    }
-    node = node.parentNodeOrShadowHost();
-  }
-}
-
 function focusChanged(event: Event): void {
   const target = event.target as HTMLElement;
   const document = target ? target.ownerDocument : null;
   const element = document ? Platform.DOMUtilities.deepActiveElement(document) : null;
   updateWidgetfocusWidgetForNode(element);
-  updateXWidgetfocusWidgetForNode(element);
 }
 
 /**
@@ -2282,6 +2265,10 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
     }
   }
 
+  get templateRoot(): DocumentFragment|HTMLElement {
+    return this.#contentTemplate?.content ?? this;
+  }
+
   set template(template: Lit.LitTemplate) {
     if (!this.#contentTemplate) {
       this.removeChildren();

package/front_end/ui/legacy/Widget.ts

@@ -36,7 +36,6 @@ import * as Geometry from '../../models/geometry/geometry.js';
 import * as Lit from '../../ui/lit/lit.js';
 
 import {createShadowRootWithCoreStyles} from './UIUtils.js';
-import {XWidget} from './XWidget.js';
 
 // Remember the original DOM mutation methods here, since we
 // will override them below to sanity check the Widget system.
@@ -757,10 +756,6 @@ export class Widget {
       }
       let child = this.contentElement.traverseNextNode(this.contentElement);
       while (child) {
-        if (child instanceof XWidget) {
-          child.focus();
-          return;
-        }
         child = child.traverseNextNode(this.contentElement);
       }
     }

package/front_end/ui/legacy/XElement.ts

@@ -39,36 +39,3 @@ export class XElement extends HTMLElement {
     }
   }
 }
-
-class XBox extends XElement {
-  constructor(direction: string) {
-    super();
-    this.style.setProperty('display', 'flex');
-    this.style.setProperty('flex-direction', direction);
-    this.style.setProperty('justify-content', 'flex-start');
-  }
-
-  static override get observedAttributes(): string[] {
-    return super.observedAttributes.concat(['x-start', 'x-center', 'x-stretch', 'x-baseline', 'justify-content']);
-  }
-
-  override attributeChangedCallback(attr: string, oldValue: string|null, newValue: string|null): void {
-    if (attr === 'x-start' || attr === 'x-center' || attr === 'x-stretch' || attr === 'x-baseline') {
-      if (newValue === null) {
-        this.style.removeProperty('align-items');
-      } else {
-        this.style.setProperty('align-items', attr === 'x-start' ? 'flex-start' : attr.substr(2));
-      }
-      return;
-    }
-    super.attributeChangedCallback(attr, oldValue, newValue);
-  }
-}
-
-class XHBox extends XBox {
-  constructor() {
-    super('row');
-  }
-}
-
-customElements.define('x-hbox', XHBox);

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -95,7 +95,7 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
 
     this.#resizeObserver.observe(this);
     this.#updateColumns();
-    this.addNodes(this.querySelectorAll('tr'));
+    this.addNodes(this.templateRoot.querySelectorAll('tr'));
   }
 
   attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
@@ -155,7 +155,7 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
     this.#hideableColumns.clear();
     this.#columns = [];
     let hasEditableColumn = false;
-    for (const column of this.querySelectorAll('th[id]') || []) {
+    for (const column of this.templateRoot.querySelectorAll('th[id]') || []) {
       const id = column.id as Lowercase<string>;
       let title = column.textContent?.trim() || '';
       const titleDOMFragment = column.firstElementChild ? document.createDocumentFragment() : undefined;
@@ -308,7 +308,7 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
       this.#usedCreationNode = null;
       this.#dataGrid.creationNode = undefined;
     }
-    const placeholder = this.querySelector('tr[placeholder]');
+    const placeholder = this.templateRoot.querySelector('tr[placeholder]');
     if (!placeholder) {
       this.#dataGrid.creationNode?.remove();
       this.#dataGrid.creationNode = undefined;

package/front_end/ui/legacy/components/perf_ui/FilmStripView.ts

@@ -149,8 +149,7 @@ interface DialogParsedTrace {
 }
 
 export class Dialog {
-  private fragment: UI.Fragment.Fragment;
-  private readonly widget: UI.XWidget.XWidget;
+  private readonly widget: UI.Widget.Widget;
   private index: number;
   private dialog: UI.Dialog.Dialog|null = null;
 
@@ -173,21 +172,32 @@ export class Dialog {
     UI.Tooltip.Tooltip.install(prevButton, i18nString(UIStrings.previousFrame));
     const nextButton = UI.UIUtils.createTextButton('\u25B6', this.onNextFrame.bind(this));
     UI.Tooltip.Tooltip.install(nextButton, i18nString(UIStrings.nextFrame));
-    this.fragment = UI.Fragment.Fragment.build`
-      <x-widget flex=none margin='var(--sys-size-7) var(--sys-size-8) var(--sys-size-8) var(--sys-size-8)'>
-        <x-hbox overflow=auto border='var(--sys-size-1) solid var(--sys-color-divider)'>
-          <img $='image' data-film-strip-dialog-img style="max-height: 80vh; max-width: 80vw;"></img>
-        </x-hbox>
-        <x-hbox x-center justify-content=center margin-top='var(--sys-size-6)'>
-          ${prevButton}
-          <x-hbox $='time' margin='var(--sys-size-5)'></x-hbox>
-          ${nextButton}
-        </x-hbox>
-      </x-widget>
-    `;
-    this.widget = (this.fragment.element() as UI.XWidget.XWidget);
-    (this.widget as HTMLElement).tabIndex = 0;
-    this.widget.addEventListener('keydown', this.keyDown.bind(this), false);
+    this.widget = new UI.Widget.Widget({classes: ['film-strip-image-dialog']});
+    this.widget.registerRequiredCSS(filmStripViewStyles);
+
+    const imageBox = document.createElement('div');
+    imageBox.classList.add('image-box');
+
+    const image = document.createElement('img');
+    image.setAttribute('data-film-strip-dialog-img', '');
+    imageBox.append(image);
+
+    const buttonBox = document.createElement('div');
+    buttonBox.classList.add('button-box');
+
+    const timeBox = document.createElement('div');
+    timeBox.classList.add('time-box');
+
+    buttonBox.append(prevButton);
+    buttonBox.append(timeBox);
+    buttonBox.append(nextButton);
+
+    this.widget.contentElement.append(imageBox);
+    this.widget.contentElement.append(buttonBox);
+
+    this.widget.element.tabIndex = 0;
+    this.widget.contentElement.append();
+    this.widget.contentElement.addEventListener('keydown', this.keyDown.bind(this), false);
     this.dialog = null;
 
     void this.render();
@@ -210,8 +220,8 @@ export class Dialog {
   private resize(): void {
     if (!this.dialog) {
       this.dialog = new UI.Dialog.Dialog();
-      this.dialog.contentElement.appendChild(this.widget);
-      this.dialog.setDefaultFocusedElement(this.widget);
+      this.widget.show(this.dialog.contentElement);
+      this.dialog.setDefaultFocusedElement(this.widget.element);
       this.dialog.show();
     }
     this.dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
@@ -273,8 +283,15 @@ export class Dialog {
   private render(): void {
     const frame = this.#data.frames[this.index];
     const timestamp = Trace.Helpers.Timing.microToMilli(frame.screenshotEvent.ts);
-    this.fragment.$('time').textContent = i18n.TimeUtilities.millisToString(timestamp - this.#zeroTime());
-    const image = (this.fragment.$('image') as HTMLImageElement);
+    const timeBox = this.widget.contentElement.querySelector('.time-box');
+    if (timeBox) {
+      timeBox.textContent = i18n.TimeUtilities.millisToString(timestamp - this.#zeroTime());
+    }
+
+    const image = this.widget.contentElement.querySelector('img');
+    if (!image) {
+      return;
+    }
     image.setAttribute('data-frame-index', this.index.toString());
     const imgData = Trace.Handlers.ModelHandlers.Screenshots.screenshotImageDataUri(frame.screenshotEvent);
     FilmStripView.setImageData(image, imgData);