chrome-devtools-frontend 1.0.1522585 → 1.0.1525561

package/front_end/panels/application/preloading/components/PreloadingGrid.ts

@@ -54,7 +54,7 @@ export interface PreloadingGridRow {
   ruleSets: Protocol.Preload.RuleSet[];
 }
 
-// Grid component to show prerendering attempts.
+/** Grid component to show prerendering attempts. **/
 export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
 
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -81,7 +81,7 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
     render(html`
       <style>${preloadingGridStyles}</style>
       <div class="preloading-container">
-        <devtools-data-grid striped @select=${this.#onPreloadingGridCellFocused}>
+        <devtools-data-grid striped>
           <table>
             <tr>
               <th id="url" weight="40" sortable>${i18n.i18n.lockedString('URL')}</th>
@@ -97,7 +97,7 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
                   (prerenderStatus === PreloadingStatus.FAILURE &&
                   (prefetchStatus === PreloadingStatus.READY || prefetchStatus === PreloadingStatus.SUCCESS));
               const hasError = row.pipeline.getOriginallyTriggered().status === PreloadingStatus.FAILURE;
-              return html`<tr data-id=${row.id}>
+              return html`<tr @select=${() => this.dispatchEvent(new CustomEvent('select', {detail: row.id}))}>
                 <td title=${attempt.key.url}>${this.#urlShort(row, securityOrigin)}</td>
                 <td>${capitalizedAction(attempt.action)}</td>
                 <td>${row.ruleSets.length === 0 ? '' : ruleSetTagOrLocationShort(row.ruleSets[0], pageURL)}</td>
@@ -125,10 +125,6 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
     // clang-format on
   }
 
-  #onPreloadingGridCellFocused(event: CustomEvent<HTMLElement>): void {
-    this.dispatchEvent(new CustomEvent('select', {detail: event.detail.dataset.id}));
-  }
-
   // Shorten URL if a preloading attempt is same-origin.
   #urlShort(row: PreloadingGridRow, securityOrigin: string|null): string {
     const url = row.pipeline.getOriginallyTriggered().key.url;

package/front_end/panels/application/preloading/components/PreloadingString.ts

@@ -445,7 +445,7 @@ export const PrefetchReasonDescription: Record<string, {name: () => Platform.UIS
   PrefetchEvictedAfterBrowsingDataRemoved: {name: i18nLazyString(UIStrings.PrefetchEvictedAfterBrowsingDataRemoved)},
 };
 
-// Decoding PrefetchFinalStatus prefetchAttempt to failure description.
+/** Decoding PrefetchFinalStatus prefetchAttempt to failure description. **/
 export function prefetchFailureReason({prefetchStatus}: SDK.PreloadingModel.PrefetchAttempt): string|null {
   // If you face an error on rolling CDP changes, see
   // https://docs.google.com/document/d/1PnrfowsZMt62PX1EvvTp2Nqs3ji1zrklrAEe1JYbkTk
@@ -534,7 +534,7 @@ export function prefetchFailureReason({prefetchStatus}: SDK.PreloadingModel.Pref
   }
 }
 
-// Detailed failure reason for PrerenderFinalStatus.
+/** Detailed failure reason for PrerenderFinalStatus. **/
 export function prerenderFailureReason(attempt: SDK.PreloadingModel.PrerenderAttempt): string|null {
   // If you face an error on rolling CDP changes, see
   // https://docs.google.com/document/d/1PnrfowsZMt62PX1EvvTp2Nqs3ji1zrklrAEe1JYbkTk

package/front_end/panels/application/preloading/components/RuleSetGrid.ts

@@ -63,7 +63,7 @@ export interface RuleSetGridRow {
   preloadsStatusSummary: string;
 }
 
-// Grid component to show SpeculationRules rule sets.
+/** Grid component to show SpeculationRules rule sets. **/
 export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: RuleSetGridData|null = null;
@@ -128,7 +128,7 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
       Lit.render(html`
         <style>${ruleSetGridStyles}</style>
         <div class="ruleset-container" jslog=${VisualLogging.pane('preloading-rules')}>
-          <devtools-data-grid striped @select=${this.#onRowSelected}>
+          <devtools-data-grid striped>
             <table>
               <tr>
                 <th id="rule-set" weight="20" sortable>
@@ -143,7 +143,7 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
                 const revealInElements = ruleSet.backendNodeId !== undefined;
                 const revealInNetwork = ruleSet.url !== undefined && ruleSet.requestId;
                 return html`
-                  <tr data-id=${ruleSet.id}>
+                  <tr @select=${() => this.dispatchEvent(new CustomEvent('select', {detail: ruleSet.id}))}>
                     <td>
                       ${revealInElements || revealInNetwork ? html`
                         <button class="link" role="link"
@@ -204,13 +204,6 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
       `, this.#shadow, {host: this});
     // clang-format on
   }
-
-  #onRowSelected(event: CustomEvent<HTMLElement>): void {
-    const ruleSetId = event.detail.dataset.id;
-    if (ruleSetId !== undefined) {
-      this.dispatchEvent(new CustomEvent('select', {detail: ruleSetId}));
-    }
-  }
 }
 
 customElements.define('devtools-resources-ruleset-grid', RuleSetGrid);

package/front_end/panels/application/preloading/components/UsedPreloadingView.ts

@@ -138,8 +138,10 @@ export const enum UsedKind {
   NO_PRELOADS = 'NoPreloads',
 }
 
-// TODO(kenoss): Rename this class and file once https://crrev.com/c/4933567 landed.
-// This also shows summary of speculations initiated by this page.
+/**
+ * TODO(kenoss): Rename this class and file once https://crrev.com/c/4933567 landed.
+ * This also shows summary of speculations initiated by this page.
+ **/
 export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: UsedPreloadingViewData = {

package/front_end/panels/browser_debugger/browser_debugger-meta.ts

@@ -101,11 +101,13 @@ function maybeRetrieveContextTypes<T = unknown>(
 
 let loadedSourcesModule: (typeof Sources|undefined);
 
-//  The sources module is imported here because the view with id `navigator-network`
-//  is implemented by `NetworkNavigatorView` in sources. It cannot be registered
-//  in the sources module as it belongs to the shell app and thus all apps
-//  that extend from shell will have such view registered. This would cause a
-//  collision with node_app as a separate view with the same id is registered in it.
+/**
+ * The sources module is imported here because the view with id `navigator-network`
+ * is implemented by `NetworkNavigatorView` in sources. It cannot be registered
+ * in the sources module as it belongs to the shell app and thus all apps
+ * that extend from shell will have such view registered. This would cause a
+ * collision with node_app as a separate view with the same id is registered in it.
+ **/
 async function loadSourcesModule(): Promise<typeof Sources> {
   if (!loadedSourcesModule) {
     loadedSourcesModule = await import('../sources/sources.js');

package/front_end/panels/changes/ChangesSidebar.ts

@@ -1,14 +1,13 @@
 // Copyright 2017 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 rulesdir/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Snippets from '../snippets/snippets.js';
 
@@ -23,75 +22,129 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/changes/ChangesSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {render, html, Directives: {ref}} = Lit;
+interface ViewInput {
+  selectedSourceCode: Workspace.UISourceCode.UISourceCode|null;
+  onSelect: (uiSourceCode: Workspace.UISourceCode.UISourceCode|null) => void;
+  sourceCodes: Set<Workspace.UISourceCode.UISourceCode>;
+}
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const tooltip = (uiSourceCode: Workspace.UISourceCode.UISourceCode): string =>
+      uiSourceCode.contentType().isFromSourceMap() ?
+      i18nString(UIStrings.sFromSourceMap, {PH1: uiSourceCode.displayName()}) :
+      uiSourceCode.url();
+  const icon = (uiSourceCode: Workspace.UISourceCode.UISourceCode): string =>
+      Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(uiSourceCode) ? 'snippet' : 'document';
+  const configElements = new WeakMap<HTMLLIElement, Workspace.UISourceCode.UISourceCode>();
+  const onSelect = (e: UI.TreeOutline.TreeViewElement.SelectEvent): void =>
+      input.onSelect(configElements.get(e.detail) ?? null);
+  render(
+      // clang-format off
+      html`<devtools-tree
+             @selected=${onSelect}
+             navigation-variant
+             hide-overflow .template=${html`
+               <ul role="tree">
+                 ${input.sourceCodes.values().map(uiSourceCode => html`
+                   <li
+                     role="treeitem"
+                     ${ref(e => e instanceof HTMLLIElement && configElements.set(e, uiSourceCode))}
+                     ?selected=${uiSourceCode === input.selectedSourceCode}>
+                       <style>${changesSidebarStyles}</style>
+                       <div class=${'navigator-' + uiSourceCode.contentType().name() + '-tree-item'}>
+                         <devtools-icon name=${icon(uiSourceCode)}></devtools-icon>
+                         <span title=${tooltip(uiSourceCode)}>
+                           <span ?hidden=${!uiSourceCode.isDirty()}>*</span>
+                           ${uiSourceCode.displayName()}
+                         </span>
+                       </div>
+                   </li>`)}
+               </ul>`}></devtools-tree>`,
+      // clang-format on
+      target);
+};
 
 export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
     UI.Widget.Widget) {
-  private treeoutline: UI.TreeOutline.TreeOutlineInShadow;
-  private readonly treeElements: Map<Workspace.UISourceCode.UISourceCode, UISourceCodeTreeElement>;
-  private readonly workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
-  constructor(workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl) {
-    super({jslog: `${VisualLogging.pane('sidebar').track({resize: true})}`});
-
-    this.treeoutline = new UI.TreeOutline.TreeOutlineInShadow(UI.TreeOutline.TreeVariant.NAVIGATION_TREE);
-    this.treeoutline.registerRequiredCSS(changesSidebarStyles);
-    this.treeoutline.setFocusable(false);
-    this.treeoutline.setHideOverflow(true);
-    this.treeoutline.addEventListener(UI.TreeOutline.Events.ElementSelected, this.selectionChanged, this);
-    UI.ARIAUtils.markAsTablist(this.treeoutline.contentElement);
-
-    this.element.appendChild(this.treeoutline.element);
+  #workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl|null = null;
+  readonly #view: View;
+  readonly #sourceCodes = new Set<Workspace.UISourceCode.UISourceCode>();
+  #selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null = null;
+  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+    super(target, {jslog: `${VisualLogging.pane('sidebar').track({resize: true})}`});
+    this.#view = view;
+  }
 
-    this.treeElements = new Map();
-    this.workspaceDiff = workspaceDiff;
-    this.workspaceDiff.modifiedUISourceCodes().forEach(this.addUISourceCode.bind(this));
-    this.workspaceDiff.addEventListener(
+  set workspaceDiff(workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl) {
+    if (this.#workspaceDiff) {
+      this.#workspaceDiff.modifiedUISourceCodes().forEach(this.#removeUISourceCode.bind(this));
+      this.#workspaceDiff.removeEventListener(
+          WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.uiSourceCodeModifiedStatusChanged, this);
+    }
+    this.#workspaceDiff = workspaceDiff;
+    this.#workspaceDiff.modifiedUISourceCodes().forEach(this.#addUISourceCode.bind(this));
+    this.#workspaceDiff.addEventListener(
         WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.uiSourceCodeModifiedStatusChanged, this);
+    this.requestUpdate();
   }
 
   selectedUISourceCode(): Workspace.UISourceCode.UISourceCode|null {
-    // @ts-expect-error uiSourceCode seems to be dynamically attached.
-    return this.treeoutline.selectedTreeElement ? this.treeoutline.selectedTreeElement.uiSourceCode : null;
+    return this.#selectedUISourceCode;
+  }
+
+  override performUpdate(): void {
+    const input: ViewInput = {
+      onSelect: uiSourceCode => this.#selectionChanged(uiSourceCode),
+      sourceCodes: this.#sourceCodes,
+      selectedSourceCode: this.#selectedUISourceCode
+    };
+    this.#view(input, {}, this.contentElement);
   }
 
-  private selectionChanged(): void {
+  #selectionChanged(selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null): void {
+    this.#selectedUISourceCode = selectedUISourceCode;
     this.dispatchEventToListeners(Events.SELECTED_UI_SOURCE_CODE_CHANGED);
+    this.requestUpdate();
   }
 
-  private uiSourceCodeModifiedStatusChanged(
-      event: Common.EventTarget.EventTargetEvent<WorkspaceDiff.WorkspaceDiff.ModifiedStatusChangedEvent>): void {
-    if (event.data.isModified) {
-      this.addUISourceCode(event.data.uiSourceCode);
-    } else {
-      this.removeUISourceCode(event.data.uiSourceCode);
-    }
+  #addUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
+    this.#sourceCodes.add(uiSourceCode);
+    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.TitleChanged, this.requestUpdate, this);
+    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged, this.requestUpdate, this);
+    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted, this.requestUpdate, this);
+    this.requestUpdate();
   }
 
-  private removeUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    const treeElement = this.treeElements.get(uiSourceCode);
-    this.treeElements.delete(uiSourceCode);
-    if (this.treeoutline.selectedTreeElement === treeElement) {
-      const nextElementToSelect = treeElement.previousSibling || treeElement.nextSibling;
-      if (nextElementToSelect) {
-        nextElementToSelect.select(true);
-      } else {
-        treeElement.deselect();
-        this.selectionChanged();
+  #removeUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
+    uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.TitleChanged, this.requestUpdate, this);
+    uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged, this.requestUpdate, this);
+    uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted, this.requestUpdate, this);
+    if (uiSourceCode === this.#selectedUISourceCode) {
+      let newSelection;
+      for (const sourceCode of this.#sourceCodes.values()) {
+        if (sourceCode === uiSourceCode) {
+          break;
+        }
+        newSelection = sourceCode;
       }
+      this.#sourceCodes.delete(uiSourceCode);
+      this.#selectionChanged(newSelection ?? this.#sourceCodes.values().next().value ?? null);
+    } else {
+      this.#sourceCodes.delete(uiSourceCode);
     }
-    if (treeElement) {
-      this.treeoutline.removeChild(treeElement);
-      treeElement.dispose();
-    }
-    if (this.treeoutline.rootElement().childCount() === 0) {
-      this.treeoutline.setFocusable(false);
-    }
+    this.requestUpdate();
   }
 
-  private addUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    const treeElement = new UISourceCodeTreeElement(uiSourceCode);
-    this.treeElements.set(uiSourceCode, treeElement);
-    this.treeoutline.setFocusable(true);
-    this.treeoutline.appendChild(treeElement);
+  private uiSourceCodeModifiedStatusChanged(
+      event: Common.EventTarget.EventTargetEvent<WorkspaceDiff.WorkspaceDiff.ModifiedStatusChangedEvent>): void {
+    const {isModified, uiSourceCode} = event.data;
+    if (isModified) {
+      this.#addUISourceCode(uiSourceCode);
+    } else {
+      this.#removeUISourceCode(uiSourceCode);
+    }
+    this.requestUpdate();
   }
 }
 
@@ -102,47 +155,3 @@ export const enum Events {
 export interface EventTypes {
   [Events.SELECTED_UI_SOURCE_CODE_CHANGED]: void;
 }
-
-export class UISourceCodeTreeElement extends UI.TreeOutline.TreeElement {
-  uiSourceCode: Workspace.UISourceCode.UISourceCode;
-  private readonly eventListeners: Common.EventTarget.EventDescriptor[];
-  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
-    super();
-    this.uiSourceCode = uiSourceCode;
-    this.listItemElement.classList.add('navigator-' + uiSourceCode.contentType().name() + '-tree-item');
-    UI.ARIAUtils.markAsTab(this.listItemElement);
-
-    let iconName: 'document'|'snippet' = 'document';
-    if (Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(this.uiSourceCode)) {
-      iconName = 'snippet';
-    }
-    const defaultIcon = IconButton.Icon.create(iconName);
-    this.setLeadingIcons([defaultIcon]);
-
-    this.eventListeners = [
-      uiSourceCode.addEventListener(Workspace.UISourceCode.Events.TitleChanged, this.updateTitle, this),
-      uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged, this.updateTitle, this),
-      uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted, this.updateTitle, this),
-    ];
-
-    this.updateTitle();
-  }
-
-  private updateTitle(): void {
-    let titleText: string = this.uiSourceCode.displayName();
-    if (this.uiSourceCode.isDirty()) {
-      titleText = '*' + titleText;
-    }
-    this.title = titleText;
-
-    let tooltip: Common.UIString.LocalizedString|string = this.uiSourceCode.url();
-    if (this.uiSourceCode.contentType().isFromSourceMap()) {
-      tooltip = i18nString(UIStrings.sFromSourceMap, {PH1: this.uiSourceCode.displayName()});
-    }
-    this.tooltip = tooltip;
-  }
-
-  dispose(): void {
-    Common.EventTarget.removeEventListeners(this.eventListeners);
-  }
-}

package/front_end/panels/changes/ChangesView.ts

@@ -1,7 +1,6 @@
 // Copyright 2017 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 rulesdir/no-imperative-dom-api */
 
 import '../../ui/legacy/legacy.js';
 
@@ -10,6 +9,7 @@ import type * as Platform from '../../core/platform/platform.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ChangesSidebar, Events} from './ChangesSidebar.js';
@@ -30,93 +30,93 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/changes/ChangesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {render, html} = Lit;
+interface ViewInput {
+  selectedSourceCode: Workspace.UISourceCode.UISourceCode|null;
+  onSelect(sourceCode: Workspace.UISourceCode.UISourceCode|null): void;
+  workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
+}
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const onSidebar = (sidebar: ChangesSidebar): void => {
+    sidebar.addEventListener(
+        Events.SELECTED_UI_SOURCE_CODE_CHANGED, () => input.onSelect(sidebar.selectedUISourceCode()));
+  };
+  render(
+      // clang-format off
+      html`
+      <style>${changesViewStyles}</style>
+      <devtools-split-view direction=column>
+        <div class=vbox slot="main">
+          <devtools-widget
+            ?hidden=${input.workspaceDiff.modifiedUISourceCodes().length > 0}
+            .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget, {
+                              header: i18nString(UIStrings.noChanges),
+                              text: i18nString(UIStrings.changesViewDescription),
+                              link: CHANGES_VIEW_URL,
+                            })}>
+          </devtools-widget>
+          <div class=diff-container role=tabpanel ?hidden=${input.workspaceDiff.modifiedUISourceCodes().length === 0}>
+            <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CombinedDiffView.CombinedDiffView, {
+                                              selectedFileUrl: input.selectedSourceCode?.url(),
+                                              workspaceDiff: input.workspaceDiff
+                                            })}></devtools-widget>
+          </div>
+        </div>
+        <devtools-widget
+          slot="sidebar"
+          .widgetConfig=${UI.Widget.widgetConfig(ChangesSidebar, {
+                           workspaceDiff: input.workspaceDiff
+                         })}
+          ${UI.Widget.widgetRef(ChangesSidebar, onSidebar)}>
+        </devtools-widget>
+      </devtools-split-view>`,
+      // clang-format on
+      target);
+};
 
 export class ChangesView extends UI.Widget.VBox {
-  private emptyWidget: UI.EmptyWidget.EmptyWidget;
-  private readonly workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
-  readonly changesSidebar: ChangesSidebar;
-  private selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null;
-  private readonly diffContainer: HTMLElement;
-  private readonly combinedDiffView: CombinedDiffView.CombinedDiffView;
+  readonly #workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
+  #selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null = null;
+  readonly #view: View;
 
-  constructor() {
-    super({
+  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+    super(target, {
       jslog: `${VisualLogging.panel('changes').track({resize: true})}`,
       useShadowDom: true,
     });
-    this.registerRequiredCSS(changesViewStyles);
-
-    const splitWidget = new UI.SplitWidget.SplitWidget(true /* vertical */, false /* sidebar on left */);
-    const mainWidget = new UI.Widget.VBox();
-    splitWidget.setMainWidget(mainWidget);
-    splitWidget.show(this.contentElement);
-
-    this.emptyWidget = new UI.EmptyWidget.EmptyWidget('', '');
-    this.emptyWidget.show(mainWidget.element);
-
-    this.workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();
-    this.changesSidebar = new ChangesSidebar(this.workspaceDiff);
-    this.changesSidebar.addEventListener(
-        Events.SELECTED_UI_SOURCE_CODE_CHANGED, this.selectedUISourceCodeChanged, this);
-    splitWidget.setSidebarWidget(this.changesSidebar);
 
-    this.selectedUISourceCode = null;
+    this.#workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();
+    this.#view = view;
 
-    this.diffContainer = mainWidget.element.createChild('div', 'diff-container');
-    UI.ARIAUtils.markAsTabpanel(this.diffContainer);
-    this.combinedDiffView = new CombinedDiffView.CombinedDiffView();
-    this.combinedDiffView.workspaceDiff = this.workspaceDiff;
-    this.combinedDiffView.show(this.diffContainer);
-
-    this.hideDiff();
-    this.selectedUISourceCodeChanged();
+    this.requestUpdate();
   }
 
-  private renderDiffOrEmptyState(): void {
-    // There are modified UI source codes, we should render the combined diff view.
-    if (this.workspaceDiff.modifiedUISourceCodes().length > 0) {
-      this.showDiff();
-    } else {
-      this.hideDiff();
-    }
-  }
-
-  private selectedUISourceCodeChanged(): void {
-    const selectedUISourceCode = this.changesSidebar.selectedUISourceCode();
-    if (!selectedUISourceCode || this.selectedUISourceCode === selectedUISourceCode) {
-      return;
-    }
-
-    this.selectedUISourceCode = selectedUISourceCode;
-    this.combinedDiffView.selectedFileUrl = selectedUISourceCode.url();
+  override performUpdate(): void {
+    this.#view(
+        {
+          workspaceDiff: this.#workspaceDiff,
+          selectedSourceCode: this.#selectedUISourceCode,
+          onSelect: sourceCode => {
+            this.#selectedUISourceCode = sourceCode;
+            this.requestUpdate();
+          },
+        },
+        {}, this.contentElement);
   }
 
   override wasShown(): void {
     UI.Context.Context.instance().setFlavor(ChangesView, this);
     super.wasShown();
-    this.renderDiffOrEmptyState();
-    this.workspaceDiff.addEventListener(
-        WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.renderDiffOrEmptyState, this);
+    this.requestUpdate();
+    this.#workspaceDiff.addEventListener(
+        WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.requestUpdate, this);
   }
 
   override willHide(): void {
     super.willHide();
     UI.Context.Context.instance().setFlavor(ChangesView, null);
-    this.workspaceDiff.removeEventListener(
-        WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.renderDiffOrEmptyState, this);
-  }
-
-  private hideDiff(): void {
-    this.diffContainer.style.display = 'none';
-    this.emptyWidget.header = i18nString(UIStrings.noChanges);
-    this.emptyWidget.text = i18nString(UIStrings.changesViewDescription);
-
-    this.emptyWidget.link = CHANGES_VIEW_URL;
-    this.emptyWidget.showWidget();
-  }
-
-  private showDiff(): void {
-    this.emptyWidget.hideWidget();
-    this.diffContainer.style.display = 'block';
+    this.#workspaceDiff.removeEventListener(
+        WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.requestUpdate, this);
   }
 }

package/front_end/panels/changes/CombinedDiffView.ts

@@ -149,7 +149,7 @@ export class CombinedDiffView extends UI.Widget.Widget {
     void this.#initializeModifiedUISourceCodes();
   }
 
-  set selectedFileUrl(fileUrl: string) {
+  set selectedFileUrl(fileUrl: string|undefined) {
     this.#selectedFileUrl = fileUrl;
     this.requestUpdate();
     void this.updateComplete.then(() => {

package/front_end/panels/changes/changesSidebar.css

@@ -4,12 +4,14 @@
  * found in the LICENSE file.
  */
 
+@scope to (devtools-widget > *) {
 .tree-outline li {
   min-height: 20px;
 }
 
 devtools-icon {
   color: var(--icon-file-default);
+  margin-right: var(--sys-size-4);
 }
 
 .navigator-sm-script-tree-item devtools-icon,
@@ -46,3 +48,4 @@ devtools-icon {
     color: ButtonText !important; /* stylelint-disable-line declaration-no-important */
   }
 }
+}

package/front_end/panels/changes/changesView.css

@@ -36,3 +36,7 @@
   background-color: var(--sys-color-cdt-base-container);
   border-top: 1px solid var(--sys-color-divider);
 }
+
+[hidden] {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}

package/front_end/panels/console/ConsoleView.ts

@@ -976,7 +976,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.scheduleViewportRefresh();
     this.consoleMessageAddedForTest(viewMessage);
 
-    // Figure out whether the message should belong into this group or the parent group based on group end timestamp.
+    /** Figure out whether the message should belong into this group or the parent group based on group end timestamp. **/
     function addToGroup(viewMessage: ConsoleViewMessage, currentGroup: ConsoleGroupViewMessage): void {
       const currentEnd = currentGroup.groupEnd();
       if (currentEnd !== null) {
@@ -1070,7 +1070,7 @@ export class ConsoleView extends UI.Widget.VBox implements
 
     this.messageAppendedForTests();
 
-    // Show the group the message belongs to, and also show parent groups.
+    /** Show the group the message belongs to, and also show parent groups. **/
     function showGroup(currentGroup: ConsoleGroupViewMessage|null, visibleViewMessages: ConsoleViewMessage[]): void {
       if (currentGroup === null) {
         return;