chrome-devtools-frontend 1.0.1534717 → 1.0.1535712

package/docs/contributing/issues.md

@@ -61,53 +61,29 @@ Tracker]. This section provides an overview of the Chromium DevTools specifics.
 ### Issue types
 
 [crbug] supports a wide range of different issue types, with ambiguous semantics.
-For Chromium DevTools we explicitly limit the set of types we use and give them
-well-defined semantics:
+For the Chromium DevTools component tree ([Chromium>Platform>DevTools]) we
+explicitly limit the set of types we use and give them well-defined semantics:
 
 | Issue Type           | Meaning                                    |
 | -------------------- | ------------------------------------------ |
 | **Bug**              | The behavior does not match what is supposed to occur or what is documented. The product does not work as expected. |
 | **Feature Request**  | The product works as intended but could be improved. |
 | **Internal Cleanup** | This is typically a maintenance issue. The issue has no effect on the behavior of a product, but addressing it may allow more intuitive interaction. |
-| **Vulnerability**    | Security vulnerabilities subject to the handling outlined in Google's [Vulnerability Priority Guidelines](http://go/vulnerability-slo). |
 | **Privacy Issue**    | Privacy issues subject to the handling outlined in Google's [Privacy Issue Bugs](http://go/pib-slo). |
 | **Task**             | A small unit of work.                      |
-| **Project**          | A goal-driven effort with a finite start and end, focused on creating a unique product, service, or result. |
-| **Feature**          | A collection of work that provides a specific value to the user. |
-
-The first 6 (**Bug** to **Task**) are used for day-to-day work and for issues
-reported by users. The last 2 (**Project** and **Feature**) are used to organize
-the other types of issues for the purpose of planning (ahead). We explicitly
-don't use Customer Issue, Process, Milestone, Epic, and Story within Chrome DevTools.
-
-*** promo
-**BEST PRACTICE:** Limit the nesting of **Project** and **Feature** to the bare
-minimum needed, and use **Task** for small chunks of work.
-***
-
-### Parent-Child Relationships and Blocking
-
-*** note
-**TL;DR:**
-
--  Prefer parent-child relationships to split work into smaller chunks.
--  Prefer blocking to express dependencies between independent / adjacent
-issues.
-***
+| **Vulnerability**    | Security vulnerabilities subject to the handling outlined in Google's [Vulnerability Priority Guidelines](http://go/vulnerability-slo). |
 
-When splitting up work into smaller chunks or when scoping a project that
-encompasses multiple bugs or feature requests, favor to express this via a
-parent-child relationship. Consider the example of a CSS Nesting:
+These are used to track day-to-day work, primarily issues reported by users. We
+explicitly don't use the Customer Issue, Process, and Story types, because the
+former is already sufficiently covered with **Bug**, **Privacy Issue** and
+**Vulnerability**, while the latter two are basically just special sub types of
+**Task** and this fine-grained distinction would add more confusion than good.
+Any use of the disallowed issue types will be corrected automatically by the
+[Blunderbuss](http://go/blunderbuss) bot.
 
-1.  This should start with an issue of type Feature which is about adding CSS
-    Nesting support to Chromium DevTools.
-1.  This Feature has child issues of type Task, which are concerned with adding
-    CSS Nesting support to the various parts of DevTools involved, for example
-    the CDP (Chrome DevTools Protocol), the Elements panel, the Sources panel,
-    and so forth.
-1.  Over the course of the project there'll likely also be Feature Requests and
-    Bugs from internal and external developers, which should also be parented
-    under the CSS Nesting Feature issue.
+We also explicitly disallow goal-type issues in the [Chromium>Platform>DevTools]
+component tree. Check out [go/chrome-tooling/project-management] for guidance
+how to manage goals using **Feature** and **Project** (_Googlers-only_).
 
 ### Priorities
 
@@ -265,6 +241,8 @@ refreshed every 2-4 hours, to see SLO compliance for a given lead.
   [Chrome SLO Policy]: https://b.corp.google.com/slos/1834
   [go/chrome-slo]: http://go/chrome-slo
   [go/chrome-release-slos]: http://go/chrome-release-slos
+  [go/chrome-tooling/project-management]: http://go/chrome-tooling/project-management
   [Buganizer SLO Compliance]: go/b-slo-compliance
   [TaskFlow]: http://go/chrome-devtools:taskflow
   [TaskFlow Inbox]: http://go/chrome-devtools:taskflow/inbox
+  [Chromium>Platform>DevTools]: https://issues.chromium.org/components/1457055

package/eslint.config.mjs

@@ -84,6 +84,7 @@ export default defineConfig([
 
     linterOptions: {
       reportUnusedDisableDirectives: 'error',
+      reportUnusedInlineConfigs: 'error',
     },
 
     rules: {

package/front_end/core/host/InspectorFrontendHost.ts

@@ -601,6 +601,12 @@ class InspectorFrontendAPIImpl {
   }
 }
 
+/**
+ * Used in `front_end/devtools_compatibility.js` to verify that calls from there
+ * are valid.
+ */
+export type InspectorFrontendAPIImplMethods = keyof InspectorFrontendAPIImpl;
+
 (function(): void {
 
 function initializeInspectorFrontendHost(): void {

package/front_end/core/host/UserMetrics.ts

@@ -523,7 +523,11 @@ export enum Action {
   AiCodeCompletionError = 188,
   AttributeLinkClicked = 189,
   InsightRequestedViaTeaser = 190,
-  MAX_VALUE = 191,
+  InsightTeaserGenerationStarted = 191,
+  InsightTeaserGenerationCompleted = 192,
+  InsightTeaserGenerationAborted = 193,
+  InsightTeaserGenerationErrored = 194,
+  MAX_VALUE = 195,
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 

package/front_end/core/protocol_client/CDPConnection.ts

@@ -4,6 +4,55 @@
 
 import type {ProtocolMapping} from '../../generated/protocol-mapping.js';
 
+export type CommandParams<T extends keyof ProtocolMapping.Commands> = ProtocolMapping.Commands[T]['paramsType'][0];
+export type CommandResult<T extends keyof ProtocolMapping.Commands> = ProtocolMapping.Commands[T]['returnType'];
+export type EventParams<T extends keyof ProtocolMapping.Events> = ProtocolMapping.Events[T];
+
+export interface CDPBaseMessage {
+  sessionId?: string;
+}
+
+export interface CDPCommandRequest<T extends keyof ProtocolMapping.Commands> extends CDPBaseMessage {
+  id: number;
+  method: T;
+  params: CommandParams<T>;
+}
+
+export interface CDPCommandResponse<T extends keyof ProtocolMapping.Commands> extends CDPBaseMessage {
+  id: number;
+  result: CommandResult<T>;
+}
+
+export interface CDPEvent<T extends keyof ProtocolMapping.Events> extends CDPBaseMessage {
+  method: T;
+  params: EventParams<T>;
+}
+
+/**
+ * Keep this in sync with https://source.chromium.org/chromium/chromium/src/+/main:third_party/inspector_protocol/crdtp/dispatch.h.
+ */
+export const enum CDPErrorStatus {
+  PARSE_ERROR = -32700,
+  INVALID_REQUEST = -32600,
+  METHOD_NOT_FOUND = -32601,
+  INVALID_PARAMS = -32602,
+  INTERNAL_ERROR = -32603,
+  SERVER_ERROR = -32000,
+  SESSION_NOT_FOUND = SERVER_ERROR - 1,
+}
+
+export interface CDPError extends CDPBaseMessage {
+  id?: number;
+  error: {
+    code: CDPErrorStatus,
+    message: string,
+    data?: string,
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type CDPMessage = CDPCommandRequest<any>|CDPCommandResponse<any>|CDPEvent<any>|CDPError;
+
 /**
  * Allows the sending and receiving of CDP commands and the notification of CDP events to observers.
  *
@@ -12,9 +61,8 @@ import type {ProtocolMapping} from '../../generated/protocol-mapping.js';
  * would conflict with any other shared traffic.
  */
 export interface CDPConnection {
-  send<T extends keyof ProtocolMapping.Commands>(
-      method: T, params: ProtocolMapping.Commands[T]['paramsType'][0],
-      sessionId: string|undefined): Promise<ProtocolMapping.Commands[T]['returnType']|{getError(): string}>;
+  send<T extends keyof ProtocolMapping.Commands>(method: T, params: CommandParams<T>, sessionId: string|undefined):
+      Promise<CommandResult<T>|{getError(): string}>;
 
   observe(observer: CDPConnectionObserver): void;
   unobserve(observer: CDPConnectionObserver): void;
@@ -34,6 +82,6 @@ export interface DebuggableCDPConnection extends CDPConnection {
 }
 
 export interface RawMessageObserver {
-  onMessageReceived(message: unknown): void;
-  onMessageSent(message: unknown): void;
+  onMessageReceived(message: CDPMessage): void;
+  onMessageSent(message: CDPMessage): void;
 }

package/front_end/core/protocol_client/protocol_client.ts

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

package/front_end/devtools_compatibility.js

@@ -7,8 +7,13 @@
 // https://crsrc.org/c/third_party/blink/renderer/controller/dev_tools_frontend_impl.cc;l=107
 (window => {
   /**
+   * A function that tries to check the remotely connected instance
+   * major version. You should check against this to provide
+   * forward and backwards compatibility.
+   *
    * @returns {number|null}
    */
+
   function getRemoteMajorVersion() {
     try {
       const remoteVersion = new URLSearchParams(window.location.search).get('remoteVersion');
@@ -97,7 +102,9 @@
     }
 
     /**
-     * @param method
+     * @typedef {import('./core/host/InspectorFrontendHostAPI.js').Events} Events
+     * @typedef {import('./core/host/InspectorFrontendHost.js').InspectorFrontendAPIImplMethods} Methods
+     * @param {`${Events|Methods}`} method
      * @param args
      */
     _dispatchOnInspectorFrontendAPI(method, args) {
@@ -114,7 +121,7 @@
     // API methods below this line --------------------------------------------
 
     /**
-     * @param extensions {ExtensionDescriptor[]}
+     * @param {ExtensionDescriptor[]} extensions
      */
     addExtensions(extensions) {
       // The addExtensions command is sent as the onload event happens for
@@ -128,7 +135,7 @@
     }
 
     /**
-     * @param forbiddenOrigins {string[]}
+     * @param {string[]} forbiddenOrigins
      */
     setOriginsForbiddenForExtensions(forbiddenOrigins) {
       this._originsForbiddenForExtensions = forbiddenOrigins;
@@ -142,14 +149,14 @@
     }
 
     /**
-     * @param url {string}
+     * @param {string} url
      */
     appendedToURL(url) {
       this._dispatchOnInspectorFrontendAPI('appendedToURL', [url]);
     }
 
     /**
-     * @param url {string}
+     * @param {string} url
      */
     canceledSaveURL(url) {
       this._dispatchOnInspectorFrontendAPI('canceledSaveURL', [url]);
@@ -167,7 +174,7 @@
     }
 
     /**
-     * @param count
+     * @param {number} count
      */
     deviceCountUpdated(count) {
       this._dispatchOnInspectorFrontendAPI('deviceCountUpdated', [count]);
@@ -287,7 +294,7 @@
     }
 
     /**
-     * @param callback {(param: object) => unknown}
+     * @param {(param: object) => unknown} callback
      */
     setAddExtensionCallback(callback) {
       this._addExtensionCallback = callback;
@@ -298,7 +305,7 @@
     }
 
     /**
-     * @param hard {boolean}
+     * @param {boolean} hard
      */
     reloadInspectedPage(hard) {
       this._dispatchOnInspectorFrontendAPI('reloadInspectedPage', [hard]);
@@ -335,7 +342,7 @@
     }
 
     /**
-     * @param tabId {string}
+     * @param {string} tabId
      */
     setInspectedTabId(tabId) {
       this._inspectedTabIdValue = tabId;
@@ -344,7 +351,7 @@
     }
 
     /**
-     * @param targetId {string}
+     * @param {string} targetId
      */
     setInitialTargetId(targetId) {
       this._setInitialTargetId(targetId);
@@ -358,30 +365,30 @@
     }
 
     /**
-     * @param useSoftMenu {boolean}
+     * @param {boolean} useSoftMenu
      */
     setUseSoftMenu(useSoftMenu) {
       this._dispatchOnInspectorFrontendAPI('setUseSoftMenu', [useSoftMenu]);
     }
 
     /**
-     * @param panelName {string}
+     * @param {string} panelName
      */
     showPanel(panelName) {
       this._dispatchOnInspectorFrontendAPI('showPanel', [panelName]);
     }
 
     /**
-     * @param id {number}
-     * @param chunk {string}
-     * @param encoded {boolean}
+     * @param {number} id
+     * @param {string} chunk
+     * @param {boolean} encoded
      */
     streamWrite(id, chunk, encoded) {
       this._dispatchOnInspectorFrontendAPI('streamWrite', [id, encoded ? this._decodeBase64(chunk) : chunk]);
     }
 
     /**
-     * @param chunk {string}
+     * @param {string} chunk
      * @returns {string}
      */
     _decodeBase64(chunk) {
@@ -516,7 +523,7 @@
 
     /**
      * @param trigger
-     * @param callback {(param: object) => unknown}
+     * @param {(param: object) => unknown} callback
      */
     showSurvey(trigger, callback) {
       DevToolsAPI.sendMessageToEmbedder('showSurvey', [trigger], callback);
@@ -524,7 +531,7 @@
 
     /**
      * @param trigger
-     * @param callback {(param: object) => unknown}
+     * @param {(param: object) => unknown} callback
      */
     canShowSurvey(trigger, callback) {
       DevToolsAPI.sendMessageToEmbedder('canShowSurvey', [trigger], callback);
@@ -546,7 +553,7 @@
      * @param url
      * @param headers
      * @param streamId
-     * @param callback {(param: object) => unknown}
+     * @param {(param: object) => unknown} callback
      */
     loadNetworkResource(url, headers, streamId, callback) {
       DevToolsAPI.sendMessageToEmbedder('loadNetworkResource', [url, headers, streamId], callback);
@@ -561,7 +568,7 @@
     }
 
     /**
-     * @param callback {(param: object) => unknown}
+     * @param {(param: object) => unknown} callback
      */
     getPreferences(callback) {
       DevToolsAPI.sendMessageToEmbedder('getPreferences', [], callback);
@@ -569,7 +576,7 @@
 
     /**
      * @param name
-     * @param callback {(param: object) => unknown}
+     * @param {(param: object) => unknown} callback
      */
     getPreference(name, callback) {
       DevToolsAPI.sendMessageToEmbedder('getPreference', [name], callback);
@@ -709,9 +716,10 @@
     }
 
     /**
-     * @param url
+     * @param {string} _url
      */
-    close(url) {
+    close(_url) {
+      // This is required when InspectorFrontendHostStub is used
     }
 
     /**
@@ -1136,7 +1144,7 @@
   ]);
 
   /**
-   * @param keyCode {number}
+   * @param {number} keyCode
    * @returns
    */
   function keyCodeToKeyIdentifier(keyCode) {

package/front_end/generated/SupportedCSSProperties.js

@@ -421,6 +421,7 @@ export const generatedProperties = [
    "column-rule-color",
    "column-rule-outset",
    "column-rule-style",
+   "column-rule-visibility-items",
    "column-rule-width",
    "column-span",
    "column-width",
@@ -720,6 +721,7 @@ export const generatedProperties = [
    "text-emphasis-style",
    "text-grow",
    "text-indent",
+   "text-justify",
    "text-orientation",
    "text-overflow",
    "text-rendering",
@@ -1736,6 +1738,16 @@ export const generatedProperties = [
   ],
   "name": "column-rule-style"
  },
+ {
+  "inherited": false,
+  "keywords": [
+   "all",
+   "around",
+   "between",
+   "none"
+  ],
+  "name": "column-rule-visibility-items"
+ },
  {
   "keywords": [
    "thin",
@@ -4321,6 +4333,16 @@ export const generatedProperties = [
   "inherited": true,
   "name": "text-indent"
  },
+ {
+  "inherited": true,
+  "keywords": [
+   "auto",
+   "none",
+   "inter-word",
+   "inter-character"
+  ],
+  "name": "text-justify"
+ },
  {
   "inherited": true,
   "keywords": [
@@ -5364,6 +5386,14 @@ export const generatedPropertyValues = {
    "double"
   ]
  },
+ "column-rule-visibility-items": {
+  "values": [
+   "all",
+   "around",
+   "between",
+   "none"
+  ]
+ },
  "column-rule-width": {
   "values": [
    "thin",
@@ -6773,6 +6803,14 @@ export const generatedPropertyValues = {
    "currentcolor"
   ]
  },
+ "text-justify": {
+  "values": [
+   "auto",
+   "none",
+   "inter-word",
+   "inter-character"
+  ]
+ },
  "text-orientation": {
   "values": [
    "sideways",

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -1,7 +1,6 @@
 // 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.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../ui/legacy/legacy.js';
 import '../../ui/components/markdown_view/markdown_view.js';
@@ -187,42 +186,8 @@ export interface ViewOutput {
 }
 
 type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
-
-export class PatchWidget extends UI.Widget.Widget {
-  changeSummary = '';
-  changeManager: AiAssistanceModel.ChangeManager.ChangeManager|undefined;
-  // Whether the user completed first run experience dialog or not.
-  #aiPatchingFreCompletedSetting =
-      Common.Settings.Settings.instance().createSetting('ai-assistance-patching-fre-completed', false);
-  #projectIdSetting =
-      Common.Settings.Settings.instance().createSetting('ai-assistance-patching-selected-project-id', '');
-  #view: View;
-  #viewOutput: ViewOutput = {};
-  #aidaClient: Host.AidaClient.AidaClient;
-  #applyPatchAbortController?: AbortController;
-  #project?: Workspace.Workspace.Project;
-  #patchSources?: string;
-  #savedToDisk?: boolean;
-  #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
-  #patchSuggestionState = PatchSuggestionState.INITIAL;
-  #workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();
-  #workspace = Workspace.Workspace.WorkspaceImpl.instance();
-  #automaticFileSystem =
-      Persistence.AutomaticFileSystemManager.AutomaticFileSystemManager.instance().automaticFileSystem;
-  #applyToDisconnectedAutomaticWorkspace = false;
-  // `rpcId` from the `applyPatch` request
-  #rpcId: Host.AidaClient.RpcGlobalId|null = null;
-
-  constructor(element?: HTMLElement, view?: View, opts?: {
-    aidaClient: Host.AidaClient.AidaClient,
-  }) {
-    super(element);
-    this.#aidaClient = opts?.aidaClient ?? new Host.AidaClient.AidaClient();
-    this.#noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
-        Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
-
-    // clang-format off
-    this.#view = view ?? ((input, output, target) => {
+const DEFAULT_VIEW: View =
+    (input, output, target) => {
       if (!input.changeSummary && input.patchSuggestionState === PatchSuggestionState.INITIAL) {
         return;
       }
@@ -428,9 +393,43 @@ export class PatchWidget extends UI.Widget.Widget {
           </details>
         `;
 
-      render(template, target, {host: target});
-    });
-    // clang-format on
+      render(template, target);
+    };
+
+export class PatchWidget extends UI.Widget.Widget {
+  changeSummary = '';
+  changeManager: AiAssistanceModel.ChangeManager.ChangeManager|undefined;
+  // Whether the user completed first run experience dialog or not.
+  #aiPatchingFreCompletedSetting =
+      Common.Settings.Settings.instance().createSetting('ai-assistance-patching-fre-completed', false);
+  #projectIdSetting =
+      Common.Settings.Settings.instance().createSetting('ai-assistance-patching-selected-project-id', '');
+  #view: View;
+  #viewOutput: ViewOutput = {};
+  #aidaClient: Host.AidaClient.AidaClient;
+  #applyPatchAbortController?: AbortController;
+  #project?: Workspace.Workspace.Project;
+  #patchSources?: string;
+  #savedToDisk?: boolean;
+  #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
+  #patchSuggestionState = PatchSuggestionState.INITIAL;
+  #workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();
+  #workspace = Workspace.Workspace.WorkspaceImpl.instance();
+  #automaticFileSystem =
+      Persistence.AutomaticFileSystemManager.AutomaticFileSystemManager.instance().automaticFileSystem;
+  #applyToDisconnectedAutomaticWorkspace = false;
+  // `rpcId` from the `applyPatch` request
+  #rpcId: Host.AidaClient.RpcGlobalId|null = null;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW, opts?: {
+    aidaClient: Host.AidaClient.AidaClient,
+  }) {
+    super(element);
+    this.#aidaClient = opts?.aidaClient ?? new Host.AidaClient.AidaClient();
+    this.#noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
+        Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
+    this.#view = view;
+
     this.requestUpdate();
   }
 

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

@@ -2,7 +2,6 @@
 // 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.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
@@ -105,7 +104,6 @@ export const DEFAULT_VIEW = (
       </div>
     `,
     target,
-    { host: target },
   );
   // clang-format on
 };

package/front_end/panels/autofill/AutofillView.ts

@@ -1,7 +1,6 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../ui/components/adorners/adorners.js';
 import '../../ui/legacy/components/data_grid/data_grid.js';
@@ -250,7 +249,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
             </div>
           </div>
         </main>
-      `, target, {host: this});
+      `, target);
     // clang-format on
     return;
   }
@@ -287,7 +286,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
           ${renderFilledFields()}
         </div>
       </main>
-    `, target, {host: this});
+    `, target);
   // clang-format on
 };
 

package/front_end/panels/changes/CombinedDiffView.ts

@@ -1,7 +1,6 @@
 // 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.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -101,6 +100,18 @@ function renderSingleDiffView(singleDiffViewInput: SingleDiffViewInput): Lit.Tem
   // clang-format on
 }
 
+const DEFAULT_VIEW: View = (input, output, target) => {
+  // clang-format off
+  Lit.render(
+      html`
+      <div class="combined-diff-view">
+        ${input.singleDiffViewInputs.map(singleDiffViewInput => renderSingleDiffView(singleDiffViewInput))}
+      </div>
+    `,
+      target);
+  // clang-format on
+};
+
 export class CombinedDiffView extends UI.Widget.Widget {
   /**
    * Ignores urls that start with any in the list
@@ -113,19 +124,7 @@ export class CombinedDiffView extends UI.Widget.Widget {
   #copiedFiles: Record<string, boolean> = {};
   #view: View;
   #viewOutput: ViewOutput = {};
-  constructor(element?: HTMLElement, view: View = (input, output, target) => {
-    output.scrollToSelectedDiff = () => {
-      target.querySelector('details.selected')?.scrollIntoView();
-    };
-
-    Lit.render(
-        html`
-      <div class="combined-diff-view">
-        ${input.singleDiffViewInputs.map(singleDiffViewInput => renderSingleDiffView(singleDiffViewInput))}
-      </div>
-    `,
-        target, {host: target});
-  }) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.registerRequiredCSS(combinedDiffViewStyles);
     this.#view = view;