chrome-devtools-frontend 1.0.1521880 → 1.0.1522585

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/timeline/TimelineFlameChartView.ts

@@ -1430,6 +1430,23 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     }
   }
 
+  zoomEvent(event: Trace.Types.Events.Event): void {
+    const traceBounds = TraceBounds.TraceBounds.BoundsManager.instance().state()?.micro.entireTraceBounds;
+    if (!traceBounds) {
+      return;
+    }
+
+    this.#expandEntryTrack(event);
+    this.revealEventVertically(event);
+    const entryWindow = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
+        event.ts,
+        Trace.Types.Timing.Micro(event.ts + (event.dur ?? 0)),
+    );
+    const expandedBounds = Trace.Helpers.Timing.expandWindowByPercentOrToOneMillisecond(entryWindow, traceBounds, 100);
+    TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(
+        expandedBounds, {ignoreMiniMapBounds: true, shouldAnimate: true});
+  }
+
   revealEvent(event: Trace.Types.Events.Event): void {
     const mainIndex = this.mainDataProvider.indexForEvent(event);
     const networkIndex = this.networkDataProvider.indexForEvent(event);

package/front_end/panels/timeline/TimelinePanel.ts

@@ -660,6 +660,10 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     );
   }
 
+  zoomEvent(event: Trace.Types.Events.Event): void {
+    this.flameChart.zoomEvent(event);
+  }
+
   /**
    * Activates an insight and ensures the sidebar is open too.
    * Pass `highlightInsight: true` to flash the insight with the background highlight colour.
@@ -3156,6 +3160,7 @@ export const rowHeight = 18;
 export const headerHeight = 20;
 export interface TimelineModeViewDelegate {
   select(selection: TimelineSelection|null): void;
+  zoomEvent(event: Trace.Types.Events.Event): void;
   element: Element;
   set3PCheckboxDisabled(disabled: boolean): void;
   selectEntryAtTime(events: Trace.Types.Events.Event[]|null, time: number): void;

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -967,7 +967,7 @@ export class TimelineUIUtils {
     const isMarker = parsedTrace && isMarkerEvent(parsedTrace, event);
     const color = isMarker ? TimelineUIUtils.markerStyleForEvent(event).color : defaultColorForEvent;
 
-    contentHelper.addSection(TimelineUIUtils.eventTitle(event), color);
+    contentHelper.addSection(TimelineUIUtils.eventTitle(event), color, event);
 
     // TODO: as part of the removal of the old engine, produce a typesafe way
     // to look up args and data for events.
@@ -2374,7 +2374,7 @@ export class TimelineDetailsContentHelper {
     this.fragment.appendChild(this.element);
   }
 
-  addSection(title: string, swatchColor?: string): void {
+  addSection(title: string, swatchColor?: string, event?: Trace.Types.Events.Event): void {
     if (!this.tableElement.hasChildNodes()) {
       this.element.removeChildren();
     } else {
@@ -2388,7 +2388,16 @@ export class TimelineDetailsContentHelper {
       if (swatchColor) {
         titleElement.createChild('div').style.backgroundColor = swatchColor;
       }
-      UI.UIUtils.createTextChild(titleElement, title);
+
+      const textChild = titleElement.createChild('span');
+      textChild.textContent = title;
+
+      if (event) {
+        textChild.classList.add('timeline-details-chip-title-reveal-entry');
+        textChild.addEventListener('click', function() {
+          TimelinePanel.instance().zoomEvent(event);
+        });
+      }
     }
 
     this.tableElement = this.element.createChild('div', 'vbox timeline-details-chip-body');

package/front_end/panels/timeline/components/ExportTraceOptions.ts

@@ -49,10 +49,6 @@ const UIStrings = {
    * @description Text for the save trace button
    */
   saveButtonTitle: 'Save',
-  /**
-   * @description Title for the information icon showing more information about an option
-   */
-  moreInfoTitle: 'More information',
   /**
    * @description Text shown in the information pop-up next to the "Include script content" option.
    */
@@ -60,7 +56,11 @@ const UIStrings = {
   /**
    * @description Text shown in the information pop-up next to the "Include script sourcemaps" option.
    */
-  sourceMapsContentPrivacyInfo: 'Includes available source maps, which may expose authored code.'
+  sourceMapsContentPrivacyInfo: 'Includes available source maps, which may expose authored code.',
+  /**
+   * @description Text used as the start of the accessible label for the information button which shows additional context when the user focuses / hovers.
+   */
+  moreInfoLabel: 'Additional information:',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/ExportTraceOptions.ts', UIStrings);
@@ -204,6 +204,17 @@ export class ExportTraceOptions extends HTMLElement {
     this.state = newState;
   }
 
+  #accessibleLabelForInfoCheckbox(checkboxId: CheckboxId): string {
+    if (checkboxId === 'script-source-maps') {
+      return i18nString(UIStrings.moreInfoLabel) + ' ' + i18nString(UIStrings.sourceMapsContentPrivacyInfo);
+    }
+
+    if (checkboxId === 'script-content') {
+      return i18nString(UIStrings.moreInfoLabel) + ' ' + i18nString(UIStrings.scriptContentPrivacyInfo);
+    }
+
+    return '';
+  }
   #renderCheckbox(
       checkboxId: CheckboxId, checkboxWithLabel: UI.UIUtils.CheckboxLabel, title: Common.UIString.LocalizedString,
       checked: boolean): Lit.TemplateResult {
@@ -224,8 +235,8 @@ export class ExportTraceOptions extends HTMLElement {
           ${checkboxesWithInfoDialog.has(checkboxId) ? html`
             <devtools-button
               aria-details=${`export-trace-tooltip-${checkboxId}`}
+              aria-label=${this.#accessibleLabelForInfoCheckbox(checkboxId)}
               class="pen-icon"
-              .title=${UIStrings.moreInfoTitle}
               .iconName=${'info'}
               .variant=${Buttons.Button.Variant.ICON}
               ></devtools-button>
@@ -275,8 +286,10 @@ export class ExportTraceOptions extends HTMLElement {
           closeButton: false,
           dialogTitle: i18nString(UIStrings.exportTraceOptionsDialogTitle),
           state: this.#state.dialogState,
+          closeOnESC: true,
         } as Dialogs.ButtonDialog.ButtonDialogData}>
         <div class='export-trace-options-content'>
+
           ${this.#state.displayAnnotationsCheckbox ? this.#renderCheckbox('annotations', this.#includeAnnotationsCheckbox,
             i18nString(UIStrings.includeAnnotations),
             this.#state.includeAnnotations): ''}
@@ -296,11 +309,10 @@ export class ExportTraceOptions extends HTMLElement {
                   } as Buttons.Button.ButtonData}
                 >${i18nString(UIStrings.saveButtonTitle)}</devtools-button>
                 </div>
+          ${this.#state.displayScriptContentCheckbox ? this.#renderInfoTooltip('script-content') : Lit.nothing}
+          ${this.#state.displayScriptContentCheckbox && this.#state.displaySourceMapsCheckbox ? this.#renderInfoTooltip('script-source-maps') : Lit.nothing}
         </div>
       </devtools-button-dialog>
-
-      ${this.#state.displayScriptContentCheckbox ? this.#renderInfoTooltip('script-content') : Lit.nothing}
-      ${this.#state.displayScriptContentCheckbox && this.#state.displaySourceMapsCheckbox ? this.#renderInfoTooltip('script-source-maps') : Lit.nothing}
     `;
     // clang-format on
     Lit.render(output, this.#shadow, {host: this});

package/front_end/panels/timeline/timelineDetailsView.css

@@ -47,6 +47,11 @@
     align-items: center;
   }
 
+  .timeline-details-chip-title-reveal-entry:hover {
+    background: var(--sys-color-state-hover-on-subtle);
+    cursor: pointer;
+  }
+
   .timeline-details-view-block:first-child > .timeline-details-chip-title {
     font-size: 13px;
   }

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/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://source.chromium.org/chromium/chromium/src/+/main:components/variations/proto/devtools/
 Version: N/A
-Revision: e8bb55e7f56140e285b00abfd3811f1c3656ca4c
+Revision: c7c3037a902ef52ab055674cd106721ea54d13d1
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

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/components/tooltips/Tooltip.ts

@@ -480,7 +480,13 @@ export class Tooltip extends HTMLElement {
   };
 
   #keyDown = (event: KeyboardEvent): void => {
-    if ((event.altKey && event.key === 'ArrowDown') || (event.key === 'Escape' && this.open)) {
+    // There are two scenarios when we care about keydown:
+    // 1. The tooltip is open, and the user presses ESC
+    // 2. "use-hotkey" is set, and the user presses Alt+ArrowDown.
+    const shouldToggleVisibility =
+        (event.key === 'Escape' && this.open) || (this.useHotkey && event.altKey && event.key === 'ArrowDown');
+
+    if (shouldToggleVisibility) {
       this.#openedViaHotkey = !this.open;
       this.toggle();
       event.consume(true);
@@ -489,15 +495,18 @@ export class Tooltip extends HTMLElement {
 
   #registerEventListeners(): void {
     if (this.#anchor) {
+      // We bind the keydown listener regardless of if use-hotkey is enabled
+      // as we always want to support ESC to close.
+      this.#anchor.addEventListener('keydown', this.#keyDown);
+
       if (this.useClick) {
         this.#anchor.addEventListener('click', this.toggle);
       } else {
         this.#anchor.addEventListener('mouseenter', this.showTooltip);
-        if (this.useHotkey) {
-          this.#anchor.addEventListener('keydown', this.#keyDown);
-        } else {
+        if (!this.useHotkey) {
           this.#anchor.addEventListener('focus', this.showTooltip);
         }
+
         this.#anchor.addEventListener('blur', this.hideTooltip);
         this.#anchor.addEventListener('mouseleave', this.hideTooltip);
         this.addEventListener('mouseleave', this.hideTooltip);

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;