chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -2,27 +2,27 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Platform from '../../../core/platform/platform.js';
 import * as TimelineUtils from '../../../panels/timeline/utils/utils.js';
 import * as Trace from '../../trace/trace.js';
 
 import {PerformanceInsightFormatter, TraceEventFormatter} from './PerformanceInsightFormatter.js';
-
-const ms = (ms: number): string => `${Platform.NumberUtilities.floor(ms, 1)} ms`;
-const kb = (bytes: number): string => `${Math.round(bytes / 1000)} kB`;
+import type {UnitFormatters} from './Types.js';
 
 export class PerformanceTraceFormatter {
   #parsedTrace: Trace.Handlers.Types.ParsedTrace;
   #insightSet: Trace.Insights.Types.InsightSet|null;
   #traceMetadata: Trace.Types.File.MetaData;
   #eventsSerializer: TimelineUtils.EventsSerializer.EventsSerializer;
+  #unitFormatters: UnitFormatters;
 
   constructor(
-      focus: TimelineUtils.AIContext.AgentFocus, eventsSerializer: TimelineUtils.EventsSerializer.EventsSerializer) {
+      formatters: UnitFormatters, focus: TimelineUtils.AIContext.AgentFocus,
+      eventsSerializer: TimelineUtils.EventsSerializer.EventsSerializer) {
     if (focus.data.type !== 'full') {
       throw new Error('unexpected agent focus');
     }
 
+    this.#unitFormatters = formatters;
     this.#parsedTrace = focus.data.parsedTrace;
     this.#insightSet = focus.data.insightSet;
     this.#traceMetadata = focus.data.traceMetadata;
@@ -60,7 +60,7 @@ export class PerformanceTraceFormatter {
         const subparts = insightSet?.model.LCPBreakdown.subparts;
         if (subparts) {
           const serializeSubpart = (subpart: Trace.Insights.Models.LCPBreakdown.Subpart): string => {
-            return `${ms(subpart.range / 1000)}, bounds: ${this.serializeBounds(subpart)}`;
+            return `${this.#unitFormatters.micros(subpart.range)}, bounds: ${this.serializeBounds(subpart)}`;
           };
           parts.push(`    - TTFB: ${serializeSubpart(subparts.ttfb)}`);
           if (subparts.loadDelay !== undefined) {
@@ -90,7 +90,7 @@ export class PerformanceTraceFormatter {
           continue;
         }
 
-        const formatter = new PerformanceInsightFormatter(parsedTrace, model);
+        const formatter = new PerformanceInsightFormatter(this.#unitFormatters, parsedTrace, model);
         if (!formatter.insightIsSupported()) {
           continue;
         }
@@ -106,7 +106,7 @@ export class PerformanceTraceFormatter {
           insightParts.push(`estimated metric savings: ${metricSavingsText}`);
         }
         if (model.wastedBytes) {
-          insightParts.push(`estimated wasted bytes: ${kb(model.wastedBytes)}`);
+          insightParts.push(`estimated wasted bytes: ${this.#unitFormatters.bytes(model.wastedBytes)}`);
         }
         for (const suggestion of formatter.getSuggestions()) {
           insightParts.push(`example question: ${suggestion.title}`);
@@ -137,7 +137,7 @@ export class PerformanceTraceFormatter {
     }
 
     return 'Critical network requests:\n' +
-        TraceEventFormatter.networkRequests(criticalRequests, parsedTrace, {verbose: false});
+        TraceEventFormatter.networkRequests(this.#unitFormatters, criticalRequests, parsedTrace, {verbose: false});
   }
 
   #serializeBottomUpRootNode(rootNode: Trace.Extras.TraceTree.BottomUpRootNode, limit: number): string {
@@ -149,7 +149,7 @@ export class PerformanceTraceFormatter {
                          .sort((a, b) => b.selfTime - a.selfTime)
                          .slice(0, limit);
 
-    function nodeToText(node: Trace.Extras.TraceTree.Node): string {
+    function nodeToText(this: PerformanceTraceFormatter, node: Trace.Extras.TraceTree.Node): string {
       const event = node.event;
 
       let frame = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event)?.[0];
@@ -169,10 +169,11 @@ export class PerformanceTraceFormatter {
         source += ')';
       }
 
-      return `- self: ${ms(node.selfTime)}, total: ${ms(node.totalTime)}, source: ${source}`;
+      return `- self: ${this.#unitFormatters.millis(node.selfTime)}, total: ${
+          this.#unitFormatters.millis(node.totalTime)}, source: ${source}`;
     }
 
-    const listText = topNodes.map(nodeToText).join('\n');
+    const listText = topNodes.map(node => nodeToText.call(this, node)).join('\n');
     const format = `This is the bottom-up summary for the entire trace. Only the top ${
         limit} activities (sorted by self time) are shown. An activity is all the aggregated time spent on the same type of work. For example, it can be all the time spent in a specific JavaScript function, or all the time spent in a specific browser rendering stage (like layout, v8 compile, parsing html). "Self time" represents the aggregated time spent directly in an activity, across all occurrences. "Total time" represents the aggregated time spent in an activity or any of its children.`;
     return `${format}\n\n${listText}`;
@@ -203,9 +204,9 @@ export class PerformanceTraceFormatter {
 
     const listText = topMainThreadTimeEntries
                          .map(s => {
-                           const transferSize = `${kb(s.transferSize)}`;
+                           const transferSize = `${this.#unitFormatters.bytes(s.transferSize)}`;
                            return `- name: ${s.entity.name}, main thread time: ${
-                               ms(s.mainThreadTime)}, network transfer size: ${transferSize}`;
+                               this.#unitFormatters.millis(s.mainThreadTime)}, network transfer size: ${transferSize}`;
                          })
                          .join('\n');
     return listText;
@@ -244,7 +245,7 @@ export class PerformanceTraceFormatter {
 
     const listText = longestTaskTrees
                          .map(tree => {
-                           const time = ms(tree.rootNode.totalTime);
+                           const time = this.#unitFormatters.millis(tree.rootNode.totalTime);
                            return `- total time: ${time}, event: ${this.serializeEvent(tree.rootNode.event)}`;
                          })
                          .join('\n');
@@ -303,7 +304,7 @@ export class PerformanceTraceFormatter {
     );
     if (topDownTree) {
       results.push('# Top-down main thread summary');
-      results.push(topDownTree.serialize(2 /* headerLevel */));
+      results.push(this.formatCallTree(topDownTree, 2 /* headerLevel */));
     }
 
     const bottomUpRootNode = TimelineUtils.InsightAIContext.AIQueries.mainThreadActivityBottomUp(
@@ -343,7 +344,8 @@ export class PerformanceTraceFormatter {
 
     const requests = this.#parsedTrace.NetworkRequests.byTime.filter(
         request => Trace.Helpers.Timing.eventIsInBounds(request, bounds));
-    const requestsText = TraceEventFormatter.networkRequests(requests, this.#parsedTrace, {verbose: false});
+    const requestsText =
+        TraceEventFormatter.networkRequests(this.#unitFormatters, requests, this.#parsedTrace, {verbose: false});
     results.push('# Network requests summary');
     results.push(requestsText || 'No requests in the given bounds');
 
@@ -356,4 +358,20 @@ export class PerformanceTraceFormatter {
 
     return results.join('\n\n');
   }
+
+  formatCallTree(tree: TimelineUtils.AICallTree.AICallTree, headerLevel = 1): string {
+    const results = [tree.serialize(headerLevel), ''];
+
+    // TODO(b/425270067): add eventKey to tree.serialize, but need to wait for other
+    // performance agent to be consolidated.
+    results.push('#'.repeat(headerLevel) + ' Node id to eventKey\n');
+    results.push('These node ids correspond to the call tree nodes listed in the above section.\n');
+    tree.breadthFirstWalk(tree.rootNode.children().values(), (node, nodeId) => {
+      results.push(`${nodeId}: ${this.#eventsSerializer.keyForEvent(node.event)}`);
+    });
+
+    results.push('\nIMPORTANT: Never show eventKey to the user.');
+
+    return results.join('\n');
+  }
 }

package/front_end/models/ai_assistance/data_formatters/Types.ts

@@ -0,0 +1,9 @@
+// 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.
+
+export interface UnitFormatters {
+  millis: (x: number) => string;
+  micros: (x: number) => string;
+  bytes: (x: number) => string;
+}

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -30,6 +30,99 @@ interface CachedRequest {
   response: Host.AidaClient.CompletionResponse;
 }
 
+/* clang-format off */
+const consoleAdditionalContextFileContent = `/**
+ * This file describes the execution environment of the Chrome DevTools Console.
+ * The code is JavaScript, but with special global functions and variables.
+ * Top-level await is available.
+ * The console has direct access to the inspected page's \`window\` and \`document\`.
+ */
+
+/**
+ * @description Returns the value of the most recently evaluated expression.
+ */
+let $_;
+
+/**
+ * @description A reference to the most recently selected DOM element.
+ * $0, $1, $2, $3, $4 can be used to reference the last five selected DOM elements.
+ */
+let $0;
+
+/**
+ * @description A query selector alias. $$('.my-class') is equivalent to document.querySelectorAll('.my-class').
+ */
+function $$(selector, startNode) {}
+
+/**
+ * @description An XPath selector. $x('//p') returns an array of all <p> elements.
+ */
+function $x(path, startNode) {}
+
+function clear() {}
+
+function copy(object) {}
+
+/**
+ * @description Selects and reveals the specified element in the Elements panel.
+ */
+function inspect(object) {}
+
+function keys(object) {}
+
+function values(object) {}
+
+/**
+ * @description When the specified function is called, the debugger is invoked.
+ */
+function debug(func) {}
+
+/**
+ * @description Stops the debugging of the specified function.
+ */
+function undebug(func) {}
+
+/**
+ * @description Logs a message to the console whenever the specified function is called,
+ * along with the arguments passed to it.
+ */
+function monitor(func) {}
+
+/**
+ * @description Stops monitoring the specified function.
+ */
+function unmonitor(func) {}
+
+/**
+ * @description Logs all events dispatched to the specified object to the console.
+ */
+function monitorEvents(object, events) {}
+
+/**
+ * @description Returns an object containing all event listeners registered on the specified object.
+ */
+function getEventListeners(object) {}
+
+/**
+ * The global \`console\` object has several helpful methods
+ */
+const console = {
+  log: (...args) => {},
+  warn: (...args) => {},
+  error: (...args) => {},
+  info: (...args) => {},
+  debug: (...args) => {},
+  assert: (assertion, ...args) => {},
+  dir: (object) => {}, // Displays an interactive property listing of an object.
+  dirxml: (object) => {}, // Displays an XML/HTML representation of an object.
+  table: (data, columns) => {}, // Displays tabular data as a table.
+  group: (label) => {}, // Creates a new inline collapsible group.
+  groupEnd: () => {},
+  time: (label) => {}, // Starts a timer.
+  timeEnd: (label) => {} // Stops a timer and logs the elapsed time.
+};`;
+/* clang-format on */
+
 /**
  * The AiCodeCompletion class is responsible for fetching code completion suggestions
  * from the AIDA backend and displaying them in the text editor.
@@ -50,16 +143,18 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
   #stopSequences: string[];
   #renderingTimeout?: number;
   #aidaRequestCache?: CachedRequest;
+  #panel: Panel;
 
   readonly #sessionId: string = crypto.randomUUID();
   readonly #aidaClient: Host.AidaClient.AidaClient;
   readonly #serverSideLoggingEnabled: boolean;
 
-  constructor(opts: AgentOptions, editor: TextEditor.TextEditor.TextEditor, stopSequences?: string[]) {
+  constructor(opts: AgentOptions, editor: TextEditor.TextEditor.TextEditor, panel: Panel, stopSequences?: string[]) {
     super();
     this.#aidaClient = opts.aidaClient;
     this.#serverSideLoggingEnabled = opts.serverSideLoggingEnabled ?? false;
     this.#editor = editor;
+    this.#panel = panel;
     this.#stopSequences = stopSequences ?? [];
   }
 
@@ -77,6 +172,16 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     function validTemperature(temperature: number|undefined): number|undefined {
       return typeof temperature === 'number' && temperature >= 0 ? temperature : undefined;
     }
+    // As a temporary fix for b/441221870 we are prepending a newline for each prefix.
+    prefix = '\n' + prefix;
+
+    const additionalFiles = this.#panel === Panel.CONSOLE ? [{
+      path: 'devtools-console-context.js',
+      content: consoleAdditionalContextFileContent,
+      included_reason: Host.AidaClient.Reason.RELATED_FILE,
+    }] :
+                                                            undefined;
+
     return {
       client: Host.AidaClient.CLIENT_NAME,
       prefix,
@@ -93,6 +198,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
         user_tier: userTier,
         client_version: Root.Runtime.getChromeVersion(),
       },
+      additional_files: additionalFiles,
     };
   }
 
@@ -160,7 +266,8 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
       } else {
         this.dispatchEventToListeners(Events.RESPONSE_RECEIVED, {});
       }
-    } catch {
+    } catch (e) {
+      debugLog('Error while fetching code completion suggestions from AIDA', e);
       this.dispatchEventToListeners(Events.RESPONSE_RECEIVED, {});
     }
   }
@@ -273,6 +380,11 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
   }
 }
 
+export const enum Panel {
+  CONSOLE = 'console',
+  SOURCES = 'sources',
+}
+
 export const enum Events {
   RESPONSE_RECEIVED = 'ResponseReceived',
   REQUEST_TRIGGERED = 'RequestTriggered',

package/front_end/models/autofill_manager/AutofillManager.ts

@@ -3,16 +3,13 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
-import * as UI from '../../ui/legacy/legacy.js';
 
 let autofillManagerInstance: AutofillManager;
 
 export class AutofillManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  #autoOpenViewSetting: Common.Settings.Setting<boolean>;
   #address = '';
   #filledFields: Protocol.Autofill.FilledField[] = [];
   #matches: Match[] = [];
@@ -23,8 +20,6 @@ export class AutofillManager extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.AutofillModel.AutofillModel, SDK.AutofillModel.Events.ADDRESS_FORM_FILLED, this.#addressFormFilled, this,
         {scoped: true});
-    this.#autoOpenViewSetting =
-        Common.Settings.Settings.instance().createSetting('auto-open-autofill-view-on-event', true);
   }
 
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): AutofillManager {
@@ -37,12 +32,6 @@ export class AutofillManager extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   async #addressFormFilled({data}: Common.EventTarget.EventTargetEvent<
                            SDK.AutofillModel.EventTypes[SDK.AutofillModel.Events.ADDRESS_FORM_FILLED]>): Promise<void> {
-    if (this.#autoOpenViewSetting.get()) {
-      await UI.ViewManager.ViewManager.instance().showView('autofill-view');
-      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AutofillReceivedAndTabAutoOpened);
-    } else {
-      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AutofillReceived);
-    }
     this.#autofillModel = data.autofillModel;
     this.#processAddressFormFilledData(data.event);
     if (this.#address) {

package/front_end/models/bindings/DebuggerLanguagePlugins.ts

@@ -9,6 +9,7 @@ import type * as Platform from '../../core/platform/platform.js';
 import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as StackTrace from '../stack_trace/stack_trace.js';
 import type * as StackTraceImpl from '../stack_trace/stack_trace_impl.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
@@ -768,11 +769,68 @@ export class DebuggerLanguagePluginManager implements
   }
 
   async translateRawFramesStep(
-      _rawFrames: StackTraceImpl.Trie.RawFrame[],
-      _translatedFrames: Awaited<ReturnType<StackTraceImpl.StackTraceModel.TranslateRawFrames>>,
-      _target: SDK.Target.Target): Promise<boolean> {
-    // TODO(crbug.com/433162438): Implement source map stack trace translation.
-    return false;
+      rawFrames: StackTraceImpl.Trie.RawFrame[],
+      translatedFrames: Awaited<ReturnType<StackTraceImpl.StackTraceModel.TranslateRawFrames>>,
+      target: SDK.Target.Target): Promise<boolean> {
+    const frame = rawFrames[0];
+    const script = target.model(SDK.DebuggerModel.DebuggerModel)?.scriptForId(frame.scriptId ?? '');
+    if (!script) {
+      return false;
+    }
+
+    const functionInfo = await this.getFunctionInfo(script, frame);
+    if (!functionInfo) {
+      return false;
+    }
+
+    // The plugin is responsible for translating this frame. The only question is whether it was successful,
+    // or if we identity map the raw frame and attach the "missing debug info details".
+    rawFrames.shift();
+
+    if ('frames' in functionInfo && functionInfo.frames.length) {
+      const framePromises = functionInfo.frames.map(async ({name}, index) => {
+        const rawLocation = new SDK.DebuggerModel.Location(
+            script.debuggerModel, script.scriptId, frame.lineNumber, frame.columnNumber, index);
+        const uiLocation = await this.rawLocationToUILocation(rawLocation);
+        return {
+          uiSourceCode: uiLocation?.uiSourceCode,
+          url: uiLocation ? undefined : frame.url,
+          name,
+          line: uiLocation?.lineNumber ?? frame.lineNumber,
+          column: uiLocation?.columnNumber ?? frame.columnNumber,
+        };
+      });
+
+      translatedFrames.push(await Promise.all(framePromises));
+      return true;
+    }
+
+    // Identity map the frame, then add the missing debug info details.
+    const mappedFrame: (typeof translatedFrames)[number][number] = {
+      url: frame.url,
+      name: frame.functionName,
+      line: frame.lineNumber,
+      column: frame.columnNumber,
+    };
+
+    if ('missingSymbolFiles' in functionInfo && functionInfo.missingSymbolFiles.length) {
+      translatedFrames.push([{
+        ...mappedFrame,
+        missingDebugInfo: {
+          type: StackTrace.StackTrace.MissingDebugInfoType.PARTIAL_INFO,
+          missingDebugFiles: functionInfo.missingSymbolFiles,
+        },
+      }]);
+    } else {
+      translatedFrames.push([{
+        ...mappedFrame,
+        missingDebugInfo: {
+          type: StackTrace.StackTrace.MissingDebugInfoType.NO_INFO,
+        },
+      }]);
+    }
+
+    return true;
   }
 
   scriptsForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): SDK.Script.Script[] {
@@ -937,7 +995,7 @@ export class DebuggerLanguagePluginManager implements
     }
   }
 
-  async getFunctionInfo(script: SDK.Script.Script, location: SDK.DebuggerModel.Location):
+  async getFunctionInfo(script: SDK.Script.Script, location: Pick<SDK.DebuggerModel.Location, 'columnNumber'>):
       Promise<{frames: Chrome.DevTools.FunctionInfo[], missingSymbolFiles: SDK.DebuggerModel.MissingDebugFiles[]}|
               {frames: Chrome.DevTools.FunctionInfo[]}|{missingSymbolFiles: SDK.DebuggerModel.MissingDebugFiles[]}|
               null> {

package/front_end/models/bindings/ResourceScriptMapping.ts

@@ -31,6 +31,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * 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 Protocol from '../../generated/protocol.js';
 import * as TextUtils from '../text_utils/text_utils.js';
@@ -352,6 +353,11 @@ export class ResourceScriptFile extends Common.ObjectWrapper.ObjectWrapper<Resou
   }
 
   private workingCopyCommitted(): void {
+    // This feature flag is for turning down live edit. If it's not present, we keep the feature enabled.
+    if (Root.Runtime.hostConfig.devToolsLiveEdit?.enabled === false) {
+      return;
+    }
+
     if (this.uiSourceCode.project().canSetFileContent()) {
       return;
     }

package/front_end/models/emulation/DeviceModeModel.ts

@@ -7,7 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as UI from '../../ui/legacy/legacy.js';
+import * as Geometry from '../geometry/geometry.js';
 
 import {
   type EmulatedDevice,
@@ -90,10 +90,10 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     SDK.TargetManager.SDKModelObserver<SDK.EmulationModel.EmulationModel> {
   #screenRectInternal: Rect;
   #visiblePageRectInternal: Rect;
-  #availableSize: UI.Geometry.Size;
-  #preferredSize: UI.Geometry.Size;
+  #availableSize: Geometry.Size;
+  #preferredSize: Geometry.Size;
   #initialized: boolean;
-  #appliedDeviceSizeInternal: UI.Geometry.Size;
+  #appliedDeviceSizeInternal: Geometry.Size;
   #appliedDeviceScaleFactorInternal: number;
   #appliedUserAgentTypeInternal: UA;
   readonly #scaleSettingInternal: Common.Settings.Setting<number>;
@@ -118,10 +118,10 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     super();
     this.#screenRectInternal = new Rect(0, 0, 1, 1);
     this.#visiblePageRectInternal = new Rect(0, 0, 1, 1);
-    this.#availableSize = new UI.Geometry.Size(1, 1);
-    this.#preferredSize = new UI.Geometry.Size(1, 1);
+    this.#availableSize = new Geometry.Size(1, 1);
+    this.#preferredSize = new Geometry.Size(1, 1);
     this.#initialized = false;
-    this.#appliedDeviceSizeInternal = new UI.Geometry.Size(1, 1);
+    this.#appliedDeviceSizeInternal = new Geometry.Size(1, 1);
     this.#appliedDeviceScaleFactorInternal = window.devicePixelRatio;
     this.#appliedUserAgentTypeInternal = UA.DESKTOP;
 
@@ -270,7 +270,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.#scaleSettingInternal;
   }
 
-  setAvailableSize(availableSize: UI.Geometry.Size, preferredSize: UI.Geometry.Size): void {
+  setAvailableSize(availableSize: Geometry.Size, preferredSize: Geometry.Size): void {
     this.#availableSize = availableSize;
     this.#preferredSize = preferredSize;
     this.#initialized = true;
@@ -376,7 +376,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.#fitScaleInternal;
   }
 
-  appliedDeviceSize(): UI.Geometry.Size {
+  appliedDeviceSize(): Geometry.Size {
     return this.#appliedDeviceSizeInternal;
   }
 
@@ -560,9 +560,8 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         this.#appliedUserAgentTypeInternal = this.#deviceInternal.touch() ? UA.DESKTOP_TOUCH : UA.DESKTOP;
       }
       this.applyDeviceMetrics(
-          new UI.Geometry.Size(orientation.width, orientation.height), insets, outline,
-          this.#scaleSettingInternal.get(), this.#deviceInternal.deviceScaleFactor, mobile,
-          this.getScreenOrientationType(), resetPageScaleFactor);
+          new Geometry.Size(orientation.width, orientation.height), insets, outline, this.#scaleSettingInternal.get(),
+          this.#deviceInternal.deviceScaleFactor, mobile, this.getScreenOrientationType(), resetPageScaleFactor);
       this.applyUserAgent(this.#deviceInternal.userAgent, this.#deviceInternal.userAgentMetadata);
       this.applyTouch(this.#deviceInternal.touch(), mobile);
     } else if (this.#typeInternal === Type.None) {
@@ -586,7 +585,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       this.#fitScaleInternal = this.calculateFitScale(this.#widthSetting.get(), this.#heightSetting.get());
       this.#appliedUserAgentTypeInternal = this.#uaSettingInternal.get();
       this.applyDeviceMetrics(
-          new UI.Geometry.Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), new Insets(0, 0, 0, 0),
+          new Geometry.Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), new Insets(0, 0, 0, 0),
           this.#scaleSettingInternal.get(), this.#deviceScaleFactorSettingInternal.get() || defaultDeviceScaleFactor,
           mobile,
           screenHeight >= screenWidth ? Protocol.Emulation.ScreenOrientationType.PortraitPrimary :
@@ -642,7 +641,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private applyDeviceMetrics(
-      screenSize: UI.Geometry.Size, insets: Insets, outline: Insets, scale: number, deviceScaleFactor: number,
+      screenSize: Geometry.Size, insets: Insets, outline: Insets, scale: number, deviceScaleFactor: number,
       mobile: boolean, screenOrientation: Protocol.Emulation.ScreenOrientationType|null,
       resetPageScaleFactor: boolean): void {
     screenSize.width = Math.max(1, Math.floor(screenSize.width));

package/front_end/models/extensions/ExtensionPanel.ts

@@ -29,11 +29,15 @@
  */
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import '../../ui/legacy/legacy.js';
 
 import * as Platform from '../../core/platform/platform.js';
 import * as _ProtocolClient from '../../core/protocol_client/protocol_client.js';  // eslint-disable-line @typescript-eslint/no-unused-vars
 import * as SDK from '../../core/sdk/sdk.js';
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ExtensionAPI from './ExtensionAPI.js';
@@ -218,16 +222,12 @@ export class ExtensionSidebarPane extends UI.View.SimpleView {
       return;
     }
     objectPropertiesView.element.removeChildren();
-    void UI.UIUtils.Renderer.render(object, {title, editable: false}).then(result => {
+    void UI.UIUtils.Renderer.render(object, {title, editable: false, expand: true}).then(result => {
       if (!result) {
         callback();
         return;
       }
-      const firstChild = result.tree?.firstChild();
-      if (firstChild) {
-        firstChild.expand();
-      }
-      objectPropertiesView.element.appendChild(result.node);
+      objectPropertiesView.element.appendChild(result.element);
       callback();
     });
   }

package/front_end/models/extensions/ExtensionServer.ts

@@ -42,6 +42,8 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import * as Bindings from '../bindings/bindings.js';

package/front_end/models/extensions/ExtensionView.ts

@@ -28,7 +28,11 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as UI from '../../ui/legacy/legacy.js';
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as Lit from '../../ui/lit/lit.js';
 
 import type {ExtensionServer} from './ExtensionServer.js';

package/front_end/{ui/legacy/Geometry.ts → models/geometry/GeometryImpl.ts}

@@ -219,8 +219,8 @@ export class EulerAngles {
       } else {                                 // cos(gamma) == 0, cos(beta) < 0
         alpha = Math.atan2(rotationMatrix.m21, -rotationMatrix.m22);
         beta = -Math.asin(rotationMatrix.m23);
-        beta += (beta > 0 || Math.abs(beta) < EPS) ? -Math.PI : Math.PI;   // beta [-pi,-pi/2) U (pi/2,pi)
-        gamma = -(Math.PI / 2);                                            // gamma = -pi/2
+        beta += (beta > 0 || Math.abs(beta) < EPS) ? -Math.PI : Math.PI;  // beta [-pi,-pi/2) U (pi/2,pi)
+        gamma = -(Math.PI / 2);                                           // gamma = -pi/2
       }
     } else if (rotationMatrix.m33 > 0) {  // cos(beta) > 0
       alpha = Math.atan2(-rotationMatrix.m21, rotationMatrix.m22);
@@ -229,8 +229,8 @@ export class EulerAngles {
     } else {                                                        // cos(beta) < 0
       alpha = Math.atan2(rotationMatrix.m21, -rotationMatrix.m22);
       beta = -Math.asin(rotationMatrix.m23);
-      beta += (beta > 0 || Math.abs(beta) < EPS) ? -Math.PI : Math.PI;   // beta [-pi,-pi/2) U (pi/2,pi)
-      gamma = Math.atan2(rotationMatrix.m13, -rotationMatrix.m33);       // gamma (-pi/2, pi/2)
+      beta += (beta > 0 || Math.abs(beta) < EPS) ? -Math.PI : Math.PI;  // beta [-pi,-pi/2) U (pi/2,pi)
+      gamma = Math.atan2(rotationMatrix.m13, -rotationMatrix.m33);      // gamma (-pi/2, pi/2)
     }
 
     // alpha is in [-pi, pi], make sure it is in [0, 2*pi).

package/front_end/models/geometry/geometry.ts

@@ -0,0 +1,5 @@
+// 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.
+
+export * from './GeometryImpl.js';