chrome-devtools-frontend 1.0.1539728 → 1.0.1539972

package/front_end/core/sdk/TargetManager.ts

@@ -209,8 +209,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
 
   createTarget(
       id: Protocol.Target.TargetID|'main', name: string, type: TargetType, parentTarget: Target|null,
-      sessionId?: string, waitForDebuggerInPage?: boolean,
-      connection?: ProtocolClient.ConnectionTransport.ConnectionTransport,
+      sessionId?: string, waitForDebuggerInPage?: boolean, connection?: ProtocolClient.CDPConnection.CDPConnection,
       targetInfo?: Protocol.Target.TargetInfo): Target {
     const target = new Target(
         this, id, name, type, parentTarget, sessionId || '', this.#isSuspended, connection || null, targetInfo);

package/front_end/entrypoints/lighthouse_worker/LighthouseWorkerService.ts

@@ -84,9 +84,7 @@ async function invokeLH(action: string, args: any): Promise<unknown> {
 
     const {rootTargetId, mainSessionId} = args;
     cdpTransport = new WorkerConnectionTransport();
-    // TODO(crbug.com/453469270): Use "DevToolsCDPConnection" once we split SessionRouter into
-    //                            a connection handling part and a session handling part.
-    const connection = new ProtocolClient.InspectorBackend.SessionRouter(cdpTransport);
+    const connection = new ProtocolClient.DevToolsCDPConnection.DevToolsCDPConnection(cdpTransport);
     puppeteerHandle =
         await PuppeteerService.PuppeteerConnection.PuppeteerConnectionHelper.connectPuppeteerToConnectionViaTab({
           connection,

package/front_end/entrypoints/node_app/app/NodeMain.ts

@@ -6,7 +6,7 @@ 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 type * as ProtocolClient from '../../../core/protocol_client/protocol_client.js';
+import * as ProtocolClient from '../../../core/protocol_client/protocol_client.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as ProtocolProxyApi from '../../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../../generated/protocol.js';
@@ -119,7 +119,8 @@ export class NodeChildTargetManager extends SDK.SDKModel.SDKModel<void> implemen
       const connection = new NodeConnection(this.#targetAgent, sessionId);
       this.#childConnections.set(sessionId, connection);
       target = this.#targetManager.createTarget(
-          targetInfo.targetId, name, SDK.Target.Type.NODE, null, undefined, undefined, connection);
+          targetInfo.targetId, name, SDK.Target.Type.NODE, null, undefined, undefined,
+          new ProtocolClient.DevToolsCDPConnection.DevToolsCDPConnection(connection));
     }
     this.#childTargets.set(sessionId, target);
     void target.runtimeAgent().invoke_runIfWaitingForDebugger();

package/front_end/generated/Deprecation.ts

@@ -230,6 +230,10 @@ export const UIStrings = {
    * @description Warning displayed to developers. It is shown when the `XMLHttpRequest` API is used in a way that it slows down the page load of the next page. The `main thread` refers to an operating systems thread used to run most of the processing of HTML documents, so please use a consistent wording.
    */
   XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload: "Synchronous `XMLHttpRequest` on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.",
+  /**
+   * @description Warning displayed to developers that they are using either the XSLTProcessor API, or XSLT processing instructions, both of which have been deprecated and are scheduled to be removed.
+   */
+  XSLT: "XSLTProcessor and XSLT Processing Instructions have been deprecated by all browsers. These features will be removed from this browser soon.",
 } as const;
 
 export interface DeprecationDescriptor {
@@ -350,5 +354,9 @@ export const DEPRECATIONS_METADATA: Partial<Record<string, DeprecationDescriptor
   },
   "XHRJSONEncodingDetection": {
     "milestone": 93
+  },
+  "XSLT": {
+    "chromeStatusFeature": 4709671889534976,
+    "milestone": 143
   }
 };

package/front_end/generated/InspectorBackendCommands.ts

@@ -336,7 +336,7 @@ inspectorBackend.registerCommand("Cast.stopCasting", [{"name": "sinkName", "type
 inspectorBackend.registerType("Cast.Sink", [{"name": "name", "type": "string", "optional": false, "description": "", "typeRef": null}, {"name": "id", "type": "string", "optional": false, "description": "", "typeRef": null}, {"name": "session", "type": "string", "optional": true, "description": "Text describing the current session. Present only if there is an active session on the sink.", "typeRef": null}]);
 
 // DOM.
-inspectorBackend.registerEnum("DOM.PseudoType", {FirstLine: "first-line", FirstLetter: "first-letter", Checkmark: "checkmark", Before: "before", After: "after", PickerIcon: "picker-icon", InterestHint: "interest-hint", Marker: "marker", Backdrop: "backdrop", Column: "column", Selection: "selection", SearchText: "search-text", TargetText: "target-text", SpellingError: "spelling-error", GrammarError: "grammar-error", Highlight: "highlight", FirstLineInherited: "first-line-inherited", ScrollMarker: "scroll-marker", ScrollMarkerGroup: "scroll-marker-group", ScrollButton: "scroll-button", Scrollbar: "scrollbar", ScrollbarThumb: "scrollbar-thumb", ScrollbarButton: "scrollbar-button", ScrollbarTrack: "scrollbar-track", ScrollbarTrackPiece: "scrollbar-track-piece", ScrollbarCorner: "scrollbar-corner", Resizer: "resizer", InputListButton: "input-list-button", ViewTransition: "view-transition", ViewTransitionGroup: "view-transition-group", ViewTransitionImagePair: "view-transition-image-pair", ViewTransitionGroupChildren: "view-transition-group-children", ViewTransitionOld: "view-transition-old", ViewTransitionNew: "view-transition-new", Placeholder: "placeholder", FileSelectorButton: "file-selector-button", DetailsContent: "details-content", Picker: "picker", PermissionIcon: "permission-icon"});
+inspectorBackend.registerEnum("DOM.PseudoType", {FirstLine: "first-line", FirstLetter: "first-letter", Checkmark: "checkmark", Before: "before", After: "after", PickerIcon: "picker-icon", InterestHint: "interest-hint", Marker: "marker", Backdrop: "backdrop", Column: "column", Selection: "selection", SearchText: "search-text", TargetText: "target-text", SpellingError: "spelling-error", GrammarError: "grammar-error", Highlight: "highlight", FirstLineInherited: "first-line-inherited", ScrollMarker: "scroll-marker", ScrollMarkerGroup: "scroll-marker-group", ScrollButton: "scroll-button", Scrollbar: "scrollbar", ScrollbarThumb: "scrollbar-thumb", ScrollbarButton: "scrollbar-button", ScrollbarTrack: "scrollbar-track", ScrollbarTrackPiece: "scrollbar-track-piece", ScrollbarCorner: "scrollbar-corner", Resizer: "resizer", InputListButton: "input-list-button", ViewTransition: "view-transition", ViewTransitionGroup: "view-transition-group", ViewTransitionImagePair: "view-transition-image-pair", ViewTransitionGroupChildren: "view-transition-group-children", ViewTransitionOld: "view-transition-old", ViewTransitionNew: "view-transition-new", Placeholder: "placeholder", FileSelectorButton: "file-selector-button", DetailsContent: "details-content", Picker: "picker", PermissionIcon: "permission-icon", OverscrollAreaParent: "overscroll-area-parent", OverscrollClientArea: "overscroll-client-area"});
 inspectorBackend.registerEnum("DOM.ShadowRootType", {UserAgent: "user-agent", Open: "open", Closed: "closed"});
 inspectorBackend.registerEnum("DOM.CompatibilityMode", {QuirksMode: "QuirksMode", LimitedQuirksMode: "LimitedQuirksMode", NoQuirksMode: "NoQuirksMode"});
 inspectorBackend.registerEnum("DOM.PhysicalAxes", {Horizontal: "Horizontal", Vertical: "Vertical", Both: "Both"});
@@ -777,7 +777,7 @@ inspectorBackend.registerEnum("Network.InterceptionStage", {Request: "Request",
 inspectorBackend.registerEnum("Network.SignedExchangeErrorField", {SignatureSig: "signatureSig", SignatureIntegrity: "signatureIntegrity", SignatureCertUrl: "signatureCertUrl", SignatureCertSha256: "signatureCertSha256", SignatureValidityUrl: "signatureValidityUrl", SignatureTimestamps: "signatureTimestamps"});
 inspectorBackend.registerEnum("Network.ContentEncoding", {Deflate: "deflate", Gzip: "gzip", Br: "br", Zstd: "zstd"});
 inspectorBackend.registerEnum("Network.DirectSocketDnsQueryType", {Ipv4: "ipv4", Ipv6: "ipv6"});
-inspectorBackend.registerEnum("Network.PrivateNetworkRequestPolicy", {Allow: "Allow", BlockFromInsecureToMorePrivate: "BlockFromInsecureToMorePrivate", WarnFromInsecureToMorePrivate: "WarnFromInsecureToMorePrivate", PreflightBlock: "PreflightBlock", PreflightWarn: "PreflightWarn", PermissionBlock: "PermissionBlock", PermissionWarn: "PermissionWarn"});
+inspectorBackend.registerEnum("Network.PrivateNetworkRequestPolicy", {Allow: "Allow", BlockFromInsecureToMorePrivate: "BlockFromInsecureToMorePrivate", WarnFromInsecureToMorePrivate: "WarnFromInsecureToMorePrivate", PermissionBlock: "PermissionBlock", PermissionWarn: "PermissionWarn"});
 inspectorBackend.registerEnum("Network.IPAddressSpace", {Loopback: "Loopback", Local: "Local", Public: "Public", Unknown: "Unknown"});
 inspectorBackend.registerEnum("Network.CrossOriginOpenerPolicyValue", {SameOrigin: "SameOrigin", SameOriginAllowPopups: "SameOriginAllowPopups", RestrictProperties: "RestrictProperties", UnsafeNone: "UnsafeNone", SameOriginPlusCoep: "SameOriginPlusCoep", RestrictPropertiesPlusCoep: "RestrictPropertiesPlusCoep", NoopenerAllowPopups: "NoopenerAllowPopups"});
 inspectorBackend.registerEnum("Network.CrossOriginEmbedderPolicyValue", {None: "None", Credentialless: "Credentialless", RequireCorp: "RequireCorp"});

package/front_end/generated/SupportedCSSProperties.js

@@ -419,7 +419,10 @@ export const generatedProperties = [
    "column-height",
    "column-rule-break",
    "column-rule-color",
-   "column-rule-outset",
+   "column-rule-edge-end-outset",
+   "column-rule-edge-start-outset",
+   "column-rule-interior-end-outset",
+   "column-rule-interior-start-outset",
    "column-rule-style",
    "column-rule-visibility-items",
    "column-rule-width",
@@ -639,7 +642,10 @@ export const generatedProperties = [
    "row-gap",
    "row-rule-break",
    "row-rule-color",
-   "row-rule-outset",
+   "row-rule-edge-end-outset",
+   "row-rule-edge-start-outset",
+   "row-rule-interior-end-outset",
+   "row-rule-interior-start-outset",
    "row-rule-style",
    "row-rule-visibility-items",
    "row-rule-width",
@@ -1723,6 +1729,27 @@ export const generatedProperties = [
  },
  {
   "inherited": false,
+  "name": "column-rule-edge-end-outset"
+ },
+ {
+  "inherited": false,
+  "name": "column-rule-edge-start-outset"
+ },
+ {
+  "inherited": false,
+  "name": "column-rule-interior-end-outset"
+ },
+ {
+  "inherited": false,
+  "name": "column-rule-interior-start-outset"
+ },
+ {
+  "longhands": [
+   "column-rule-edge-start-outset",
+   "column-rule-edge-end-outset",
+   "column-rule-interior-start-outset",
+   "column-rule-interior-end-outset"
+  ],
   "name": "column-rule-outset"
  },
  {
@@ -3711,6 +3738,27 @@ export const generatedProperties = [
  },
  {
   "inherited": false,
+  "name": "row-rule-edge-end-outset"
+ },
+ {
+  "inherited": false,
+  "name": "row-rule-edge-start-outset"
+ },
+ {
+  "inherited": false,
+  "name": "row-rule-interior-end-outset"
+ },
+ {
+  "inherited": false,
+  "name": "row-rule-interior-start-outset"
+ },
+ {
+  "longhands": [
+   "row-rule-edge-start-outset",
+   "row-rule-edge-end-outset",
+   "row-rule-interior-start-outset",
+   "row-rule-interior-end-outset"
+  ],
   "name": "row-rule-outset"
  },
  {
@@ -3797,13 +3845,6 @@ export const generatedProperties = [
   ],
   "name": "rule-color"
  },
- {
-  "longhands": [
-   "row-rule-outset",
-   "column-rule-outset"
-  ],
-  "name": "rule-outset"
- },
  {
   "longhands": [
    "column-rule-style",

package/front_end/generated/protocol.ts

@@ -4440,6 +4440,8 @@ export namespace DOM {
     DetailsContent = 'details-content',
     Picker = 'picker',
     PermissionIcon = 'permission-icon',
+    OverscrollAreaParent = 'overscroll-area-parent',
+    OverscrollClientArea = 'overscroll-client-area',
   }
 
   /**
@@ -11124,8 +11126,6 @@ export namespace Network {
     Allow = 'Allow',
     BlockFromInsecureToMorePrivate = 'BlockFromInsecureToMorePrivate',
     WarnFromInsecureToMorePrivate = 'WarnFromInsecureToMorePrivate',
-    PreflightBlock = 'PreflightBlock',
-    PreflightWarn = 'PreflightWarn',
     PermissionBlock = 'PermissionBlock',
     PermissionWarn = 'PermissionWarn',
   }

package/front_end/models/ai_assistance/EvaluateAction.ts

@@ -5,16 +5,25 @@
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 
+import {PAGE_EXPOSED_FUNCTIONS} from './injected.js';
+
 export function formatError(message: string): string {
   return `Error: ${message}`;
 }
 export class SideEffectError extends Error {}
 
+export interface GetErrorStackOutput {
+  message: string;
+  stack?: string;
+}
+
+/* istanbul ignore next */
+export function getErrorStackOnThePage(this: Error): GetErrorStackOutput {
+  return {stack: this.stack, message: this.message};
+}
+
 /* istanbul ignore next */
 export function stringifyObjectOnThePage(this: unknown): string {
-  if (this instanceof Error) {
-    return `Error: ${this.message}`;
-  }
   const seenBefore = new WeakMap();
   return JSON.stringify(this, function replacer(this: unknown, key: string, value: unknown) {
     if (typeof value === 'object' && value !== null) {
@@ -44,7 +53,8 @@ export function stringifyObjectOnThePage(this: unknown): string {
   });
 }
 
-export async function stringifyRemoteObject(object: SDK.RemoteObject.RemoteObject): Promise<string> {
+export async function stringifyRemoteObject(
+    object: SDK.RemoteObject.RemoteObject, functionDeclaration: string): Promise<string> {
   switch (object.type) {
     case Protocol.Runtime.RemoteObjectType.String:
       return `'${object.value}'`;
@@ -59,7 +69,17 @@ export async function stringifyRemoteObject(object: SDK.RemoteObject.RemoteObjec
     case Protocol.Runtime.RemoteObjectType.Function:
       return `${object.description}`;
     case Protocol.Runtime.RemoteObjectType.Object: {
+      if (object.subtype === 'error') {
+        const res = await object.callFunctionJSON(getErrorStackOnThePage, []);
+
+        if (!res) {
+          throw new Error('Could not stringify the object' + object);
+        }
+
+        return EvaluateAction.stringifyError(res, functionDeclaration);
+      }
       const res = await object.callFunction(stringifyObjectOnThePage);
+
       if (!res.object || res.object.type !== Protocol.Runtime.RemoteObjectType.String) {
         throw new Error('Could not stringify the object' + object);
       }
@@ -110,9 +130,72 @@ export class EvaluateAction {
         return formatError(exceptionDescription ?? 'JS exception');
       }
 
-      return await stringifyRemoteObject(response.object);
+      return await stringifyRemoteObject(response.object, functionDeclaration);
     } finally {
       executionContext.runtimeModel.releaseEvaluationResult(response);
     }
   }
+
+  static getExecutedLineFromStack(stack: string, pageExposedFunctions: string[]): number|null {
+    const lines = stack.split('\n');
+
+    const stackLines = lines.map(curr => curr.trim()).filter(trimmedLine => {
+      return trimmedLine.startsWith('at');
+    });
+
+    const selectedStack = stackLines.find(stackLine => {
+      const splittedStackLine = stackLine.split(' ');
+
+      if (splittedStackLine.length < 2) {
+        return false;
+      }
+
+      const signature = splittedStackLine[1] === 'async' ?
+          splittedStackLine[2] :  // if the stack line contains async the function name is the next element
+          splittedStackLine[1];
+
+      const lastDotIndex = signature.lastIndexOf('.');
+      const functionName = lastDotIndex !== -1 ? signature.substring(lastDotIndex + 1) : signature;
+
+      return !pageExposedFunctions.includes(functionName);
+    });
+
+    if (!selectedStack) {
+      return null;
+    }
+
+    const frameLocationRegex = /:(\d+)(?::\d+)?\)?$/;
+    const match = selectedStack.match(frameLocationRegex);
+
+    if (!match?.[1]) {
+      return null;
+    }
+
+    const lineNum = parseInt(match[1], 10);
+    if (isNaN(lineNum)) {
+      return null;
+    }
+
+    return lineNum - 1;
+  }
+
+  static stringifyError(result: GetErrorStackOutput, functionDeclaration: string): string {
+    if (!result.stack) {
+      return `Error: ${result.message}`;
+    }
+
+    const lineNum = EvaluateAction.getExecutedLineFromStack(result.stack, PAGE_EXPOSED_FUNCTIONS);
+    if (!lineNum) {
+      return `Error: ${result.message}`;
+    }
+
+    const functionLines = functionDeclaration.split('\n');
+
+    const errorLine = functionLines[lineNum];
+    if (!errorLine) {
+      return `Error: ${result.message}`;
+    }
+
+    return `Error: executing the line "${errorLine.trim()}" failed with the following error:\n${result.message}`;
+  }
 }

package/front_end/models/ai_assistance/injected.ts

@@ -24,6 +24,7 @@ export interface FreestyleCallbackArgs {
   className: `${typeof AI_ASSISTANCE_CSS_CLASS_NAME}-${number}`;
   styles: Record<string, string>;
   element: Node;
+  error: Error;
 }
 
 interface FreestyleCallbackData {
@@ -31,6 +32,7 @@ interface FreestyleCallbackData {
   element: Node;
   resolve(value: string): void;
   reject(err?: Error): void;
+  error: Error;
 }
 interface FreestylerBinding {
   (args: FreestyleCallbackArgs): Promise<string>;
@@ -58,6 +60,7 @@ function freestylerBindingFunc(bindingName: string): void {
         element: args.element,
         resolve,
         reject,
+        error: args.error,
       });
       // @ts-expect-error this is binding added though CDP
       globalThis[bindingName](String(freestyler.id));
@@ -72,11 +75,16 @@ function freestylerBindingFunc(bindingName: string): void {
     freestyler.getArgs = (callbackId: number) => {
       return freestyler.callbacks.get(callbackId)?.args;
     };
-    freestyler.respond = (callbackId: number, styleChangesOrError: string) => {
+    freestyler.respond = (callbackId: number, styleChangesOrError: string|Error) => {
       if (typeof styleChangesOrError === 'string') {
         freestyler.callbacks.get(callbackId)?.resolve(styleChangesOrError);
       } else {
-        freestyler.callbacks.get(callbackId)?.reject(styleChangesOrError);
+        const callback = freestyler.callbacks.get(callbackId);
+
+        if (callback) {
+          callback.error.message = styleChangesOrError.message;
+          callback.reject(callback?.error);
+        }
       }
 
       freestyler.callbacks.delete(callbackId);
@@ -87,6 +95,8 @@ function freestylerBindingFunc(bindingName: string): void {
 
 export const freestylerBinding = `(${String(freestylerBindingFunc)})('${FREESTYLER_BINDING_NAME}')`;
 
+export const PAGE_EXPOSED_FUNCTIONS = ['setElementStyles'];
+
 /**
  * Please see fileoverview
  */
@@ -134,12 +144,15 @@ function setupSetElementStyles(prefix: typeof AI_ASSISTANCE_CSS_CLASS_NAME): voi
       el.style[key] = '';
     }
 
+    const bindingError = new Error();
+
     const result = await global.freestyler({
       method: 'setElementStyles',
       selector,
       className,
       styles,
       element: el,
+      error: bindingError,
     });
 
     const rootNode = el.getRootNode();

package/front_end/models/live-metrics/web-vitals-injected/README.md

@@ -2,4 +2,4 @@
 
 [`web-vitals`](https://github.com/GoogleChrome/web-vitals-extension) is a Google-maintained library that measures CWV metrics using their canonical definition. We use it to ensure we are using consistent implementations for measuring CWV across Google. It can also measure performance metrics of the current page *after* the they happen (See [`PerformanceObserver` buffered setting](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/observe#buffered)). See [go/cpq:rpp-metric-observations](http://go/cpq:rpp-metric-observations) for more information.
 
-The web-vitals library needs to be run in the target page (although it can be used in an isolated execution context). We therefore need to create a JS binary that can be injected via `Page.evaluate`/`Page.addScriptToEvaluateOnNewDocument`. See `BUILD.gn` and `rollup.config.js` for how we bundle the JS binary.
+The web-vitals library needs to be run in the target page (although it can be used in an isolated execution context). We therefore need to create a JS binary that can be injected via `Page.evaluate`/`Page.addScriptToEvaluateOnNewDocument`. See `BUILD.gn` and `rollup.config.mjs` for how we bundle the JS binary.

package/front_end/models/trace/Styles.ts

@@ -432,7 +432,7 @@ const UIStrings = {
   /**
    * @description Event category in the Performance panel for time spent to perform Garbage Collection for C++: https://chromium.googlesource.com/v8/v8/+/main/include/cppgc/README.md
    */
-  cppGc: 'CPP GC',
+  cppGc: 'C++ GC',
   /**
    * @description Event category in the Performance panel for time spent to perform encryption
    */

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -310,11 +310,13 @@ const DEFAULT_VIEW: View =
         const iconName = input.projectType === SelectedProjectType.AUTOMATIC_DISCONNECTED ? 'folder-off' : input.projectType === SelectedProjectType.AUTOMATIC_CONNECTED ? 'folder-asterisk' : 'folder';
         return html`
         <div class="footer">
-          ${input.projectName ? html`
+          ${
+            input.projectName ? html`
             <div class="change-workspace" jslog=${VisualLogging.section('patch-widget.workspace')}>
                 <devtools-icon .name=${iconName}></devtools-icon>
                 <span class="folder-name" title=${input.projectPath}>${input.projectName}</span>
-              ${input.onChangeWorkspaceClick ? html`
+              ${
+                                    input.onChangeWorkspaceClick ? html`
                 <devtools-button
                   @click=${input.onChangeWorkspaceClick}
                   .jslogContext=${'change-workspace'}
@@ -323,18 +325,24 @@ const DEFAULT_VIEW: View =
                   .disabled=${input.patchSuggestionState === PatchSuggestionState.LOADING}
                   ${Directives.ref(output.changeRef)}
                 >${lockedString(UIStringsNotTranslate.change)}</devtools-button>
-              ` : nothing}
+              ` :
+                                                                   nothing}
             </div>
-          ` : nothing}
+          ` :
+                                nothing}
           <div class="apply-to-workspace-container" aria-live="polite">
-            ${input.patchSuggestionState === PatchSuggestionState.LOADING ? html`
-              <div class="loading-text-container" jslog=${VisualLogging.section('patch-widget.apply-to-workspace-loading')}>
+            ${
+            input.patchSuggestionState === PatchSuggestionState.LOADING ?
+                html`
+              <div class="loading-text-container" jslog=${
+                    VisualLogging.section('patch-widget.apply-to-workspace-loading')}>
                 <devtools-spinner></devtools-spinner>
                 <span>
                   ${lockedString(UIStringsNotTranslate.applyingToWorkspace)}
                 </span>
               </div>
-            ` : html`
+            ` :
+                html`
                 <devtools-button
                 @click=${input.onApplyToWorkspace}
                 .jslogContext=${'patch-widget.apply-to-workspace'}
@@ -342,12 +350,14 @@ const DEFAULT_VIEW: View =
                 ${lockedString(UIStringsNotTranslate.applyToWorkspace)}
               </devtools-button>
             `}
-            ${input.patchSuggestionState === PatchSuggestionState.LOADING ? html`<devtools-button
+            ${
+            input.patchSuggestionState === PatchSuggestionState.LOADING ? html`<devtools-button
               @click=${input.onCancel}
               .jslogContext=${'cancel'}
               .variant=${Buttons.Button.Variant.OUTLINED}>
               ${lockedString(UIStringsNotTranslate.cancel)}
-            </devtools-button>` : nothing}
+            </devtools-button>` :
+                                                                          nothing}
             <devtools-button
               aria-details="info-tooltip"
               .jslogContext=${'patch-widget.info-tooltip-trigger'}
@@ -356,7 +366,7 @@ const DEFAULT_VIEW: View =
             ></devtools-button>
             <devtools-tooltip
                 id="info-tooltip"
-                variant=${'rich'}
+                variant="rich"
               >
              <div class="info-tooltip-container">
                ${input.applyToWorkspaceTooltipText}
@@ -364,8 +374,8 @@ const DEFAULT_VIEW: View =
                  class="link tooltip-link"
                  role="link"
                  jslog=${VisualLogging.link('open-ai-settings').track({
-                   click: true,
-                 })}
+          click: true,
+        })}
                  @click=${input.onLearnMoreTooltipClick}
                >${lockedString(UIStringsNotTranslate.learnMore)}</button>
              </div>

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -1510,7 +1510,7 @@ function renderDisclamerTooltip(id: string, disclaimerText: string): Lit.Templat
   return html`
     <devtools-tooltip
       id=${id}
-      variant=${'rich'}
+      variant="rich"
     >
       <div class="info-tooltip-container">
         ${disclaimerText}

package/front_end/panels/common/AiCodeCompletionDisclaimer.ts

@@ -88,8 +88,8 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View =
           aria-describedby=${input.spinnerTooltipId}></devtools-spinner>
           <devtools-tooltip
               id=${input.spinnerTooltipId}
-              variant=${'rich'}
-              jslogContext=${'ai-code-completion-spinner-tooltip'}>
+              variant="rich"
+              jslogContext="ai-code-completion-spinner-tooltip">
           <div class="disclaimer-tooltip-container"><div class="tooltip-text">
             ${lockedString(UIStringsNotTranslate.tooltipTextForSpinner)}
           </div></div></devtools-tooltip>
@@ -108,8 +108,8 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View =
           >${lockedString(UIStringsNotTranslate.relevantData)}</span>${lockedString(UIStringsNotTranslate.isSentToGoogle)}
           <devtools-tooltip
               id=${input.disclaimerTooltipId}
-              variant=${'rich'}
-              jslogContext=${'ai-code-completion-disclaimer'}
+              variant="rich"
+              jslogContext="ai-code-completion-disclaimer"
               ${Directives.ref(el => {
                 if (el instanceof HTMLElement) {
                   output.hideTooltip = () => {

package/front_end/panels/common/AiCodeCompletionSummaryToolbar.ts

@@ -79,8 +79,8 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, _output, target) => {
                 </span>
                 <devtools-tooltip
                     id=${input.citationsTooltipId}
-                    variant=${'rich'}
-                    jslogContext=${'ai-code-completion-citations'}
+                    variant="rich"
+                    jslogContext="ai-code-completion-citations"
                 ><div class="citations-tooltip-container">
                     ${Directives.repeat(input.citations, citation => html`<x-link
                         tabIndex="0"

package/front_end/panels/elements/PropertiesWidget.ts

@@ -158,7 +158,7 @@ export class PropertiesWidget extends UI.Widget.VBox {
     this.#displayNoMatchingPropertyMessage = true;
     for (const element of this.treeOutline.rootElement().children()) {
       const {property} = element as ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement;
-      const hidden = !property?.match({
+      const hidden = !property?.property.match({
         includeNullOrUndefinedValues: this.showAllPropertiesSetting.get(),
         regex: this.filterRegex,
       });
@@ -195,7 +195,8 @@ export class PropertiesWidget extends UI.Widget.VBox {
         properties = [];
       }
       ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populateWithProperties(
-          treeElement, properties, null, true /* skipProto */, true /* skipGettersAndSetters */, object);
+          treeElement, {properties: properties.map(p => new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(p))},
+          true /* skipProto */, true /* skipGettersAndSetters */);
       this.internalFilterProperties();
     }
     this.#view(

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -296,14 +296,18 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
     const properties = [];
     const eventListener = this.#eventListener;
     const runtimeModel = eventListener.domDebuggerModel().runtimeModel();
-    properties.push(runtimeModel.createRemotePropertyFromPrimitiveValue('useCapture', eventListener.useCapture()));
-    properties.push(runtimeModel.createRemotePropertyFromPrimitiveValue('passive', eventListener.passive()));
-    properties.push(runtimeModel.createRemotePropertyFromPrimitiveValue('once', eventListener.once()));
+    properties.push(new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
+        runtimeModel.createRemotePropertyFromPrimitiveValue('useCapture', eventListener.useCapture())));
+    properties.push(new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
+        runtimeModel.createRemotePropertyFromPrimitiveValue('passive', eventListener.passive())));
+    properties.push(new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
+        runtimeModel.createRemotePropertyFromPrimitiveValue('once', eventListener.once())));
     if (typeof eventListener.handler() !== 'undefined') {
-      properties.push(new SDK.RemoteObject.RemoteObjectProperty('handler', eventListener.handler()));
+      properties.push(new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
+          new SDK.RemoteObject.RemoteObjectProperty('handler', eventListener.handler())));
     }
     ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populateWithProperties(
-        this, properties, [], true, true, null);
+        this, {properties}, true, true, undefined);
   }
 
   private setTitle(object: SDK.RemoteObject.RemoteObject, linkifier: Components.Linkifier.Linkifier): void {

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -996,7 +996,7 @@ export class ConsoleInsight extends HTMLElement {
         <div class="filler"></div>
         <div class="rating">
           <devtools-button
-            data-rating=${'true'}
+            data-rating="true"
             .data=${
               {
                 variant: Buttons.Button.Variant.ICON_TOGGLE,
@@ -1014,7 +1014,7 @@ export class ConsoleInsight extends HTMLElement {
             @click=${this.#onRating}
           ></devtools-button>
           <devtools-button
-            data-rating=${'false'}
+            data-rating="false"
             .data=${
               {
                 variant: Buttons.Button.Variant.ICON_TOGGLE,

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -95,14 +95,14 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
       throw new Error('Could not find the child target manager class for the root target');
     }
 
-    const router = rootTarget.router();
-    if (!router) {
+    const connection = rootTarget.router()?.connection;
+    if (!connection) {
       throw new Error('Expected root target to have a session router');
     }
 
     const rootTargetId = await rootChildTargetManager.getParentTargetId();
     const {sessionId} = await rootTarget.targetAgent().invoke_attachToTarget({targetId: rootTargetId, flatten: true});
-    this.connection = router;
+    this.connection = connection;
     this.connection.observe(this);
 
     // Lighthouse implements its own dialog handler like this, however its lifecycle ends when

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -318,9 +318,9 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
   appendApplicableItems(
       _event: Event, contextMenu: UI.ContextMenu.ContextMenu,
       target: ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement): void {
-    if (target.property.value?.isLinearMemoryInspectable()) {
+    if (target.property.object?.isLinearMemoryInspectable()) {
       const expression = target.path();
-      const object = target.property.value;
+      const object = target.property.object;
       contextMenu.debugSection().appendItem(
           i18nString(UIStrings.openInMemoryInspectorPanel),
           this.reveal.bind(this, new SDK.RemoteObject.LinearMemoryInspectable(object, expression)),