chrome-devtools-frontend 1.0.1646714 → 1.0.1649421

package/front_end/panels/layer_viewer/paintProfiler.css

@@ -4,31 +4,35 @@
  * found in the LICENSE file.
  */
 
-.paint-profiler-overview {
-  background-color: var(--sys-color-cdt-base-container);
-}
+@scope to (devtools-widget > *) {
+  :scope {
+    background-color: var(--sys-color-cdt-base-container);
+    display: flex;
+    flex-direction: row;
+  }
 
-.paint-profiler-canvas-container {
-  flex: auto;
-  position: relative;
-}
+  .paint-profiler-canvas-container {
+    flex: auto;
+    position: relative;
+  }
 
-.paint-profiler-pie-chart {
-  width: 60px !important; /* stylelint-disable-line declaration-no-important */
-  height: 60px !important; /* stylelint-disable-line declaration-no-important */
-  padding: 2px;
-  overflow: hidden;
-  font-size: 10px;
-}
+  .paint-profiler-pie-chart {
+    width: 60px !important; /* stylelint-disable-line declaration-no-important */
+    height: 60px !important; /* stylelint-disable-line declaration-no-important */
+    padding: 2px;
+    overflow: hidden;
+    font-size: 10px;
+  }
 
-.paint-profiler-canvas-container canvas {
-  z-index: 200;
-  background-color: var(--sys-color-cdt-base-container);
-  opacity: 95%;
-  height: 100%;
-  width: 100%;
-}
+  .paint-profiler-canvas-container canvas {
+    z-index: 200;
+    background-color: var(--sys-color-cdt-base-container);
+    opacity: 95%;
+    height: 100%;
+    width: 100%;
+  }
 
-.paint-profiler-canvas-container .overview-grid-window-resizer {
-  z-index: 2000;
+  .paint-profiler-canvas-container .overview-grid-window-resizer {
+    z-index: 2000;
+  }
 }

package/front_end/panels/layers/LayerPaintProfilerView.ts

@@ -1,54 +1,111 @@
 // Copyright 2014 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-imperative-dom-api */
 
 import type * as SDK from '../../core/sdk/sdk.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 LayerViewer from '../layer_viewer/layer_viewer.js';
 
-export class LayerPaintProfilerView extends UI.SplitWidget.SplitWidget {
-  private readonly logTreeView: LayerViewer.PaintProfilerView.PaintProfilerCommandLogView;
-  private readonly paintProfilerView: LayerViewer.PaintProfilerView.PaintProfilerView;
-  constructor(showImageCallback: (arg0?: string|undefined) => void) {
-    super(true, false);
-    this.element.setAttribute('jslog', `${VisualLogging.pane('layers.paint-profiler').track({resize: true})}`);
+const {html, render} = Lit;
+const {widget} = UI.Widget;
 
-    this.logTreeView = new LayerViewer.PaintProfilerView.PaintProfilerCommandLogView();
-    this.setSidebarWidget(this.logTreeView);
-    this.paintProfilerView = new LayerViewer.PaintProfilerView.PaintProfilerView(showImageCallback);
-    this.setMainWidget(this.paintProfilerView);
+export interface ViewInput {
+  showImageCallback: (arg0?: string|undefined) => void;
+  snapshot: SDK.PaintProfiler.PaintProfilerSnapshot|null;
+  log: SDK.PaintProfiler.PaintProfilerLogItem[];
+  scale: number;
+  selectionWindow: {left: number, right: number}|null;
+  onWindowChanged: (window: {left: number, right: number}|null) => void;
+}
+
+export type ViewOutput = undefined;
+
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
-    this.paintProfilerView.addEventListener(
-        LayerViewer.PaintProfilerView.Events.WINDOW_CHANGED, this.onWindowChanged, this);
+export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <devtools-split-view direction="column" jslog=${VisualLogging.pane('layers.paint-profiler').track({resize: true})}>
+      <devtools-widget slot="sidebar"
+          ${widget(LayerViewer.PaintProfilerView.PaintProfilerCommandLogView, {
+            commandLog: input.log,
+            selectionWindow: input.selectionWindow,
+          })}>
+      </devtools-widget>
+      <devtools-widget slot="main"
+          ${widget(LayerViewer.PaintProfilerView.PaintProfilerView, {
+            showImageCallback: input.showImageCallback,
+            snapshotAndLog: {snapshot: input.snapshot, log: input.log},
+            scale: input.scale,
+          })}
+          @WindowChanged=${(e: CustomEvent<{left: number, right: number}|null>) => input.onWindowChanged(e.detail)}>
+      </devtools-widget>
+    </devtools-split-view>
+  `, target);
+  // clang-format on
+};
+
+export class LayerPaintProfilerView extends UI.Widget.VBox {
+  readonly #showImageCallback: (arg0?: string|undefined) => void;
+  #snapshot: SDK.PaintProfiler.PaintProfilerSnapshot|null = null;
+  #log: SDK.PaintProfiler.PaintProfilerLogItem[] = [];
+  #scale = 1;
+  #selectionWindow: {left: number, right: number}|null = null;
+  readonly #view: View;
+
+  constructor(showImageCallback: (arg0?: string|undefined) => void, view: View = DEFAULT_VIEW) {
+    super();
+    this.#showImageCallback = showImageCallback;
+    this.#view = view;
+  }
 
-    this.logTreeView.focus();
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const input: ViewInput = {
+      showImageCallback: this.#showImageCallback,
+      snapshot: this.#snapshot,
+      log: this.#log,
+      scale: this.#scale,
+      selectionWindow: this.#selectionWindow,
+      onWindowChanged: this.onWindowChanged,
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 
   reset(): void {
-    void this.paintProfilerView.setSnapshotAndLog(null, [], null);
+    if (this.#snapshot) {
+      this.#snapshot.release();
+    }
+    this.#snapshot = null;
+    this.#log = [];
+    this.#selectionWindow = null;
+    this.requestUpdate();
   }
 
   profile(snapshot: SDK.PaintProfiler.PaintProfilerSnapshot): void {
-    void snapshot.commandLog().then(log => setSnapshotAndLog.call(this, snapshot, log));
-
-    function setSnapshotAndLog(
-        this: LayerPaintProfilerView, snapshot: SDK.PaintProfiler.PaintProfilerSnapshot|null,
-        log: SDK.PaintProfiler.PaintProfilerLogItem[]|null): void {
-      this.logTreeView.setCommandLog(log || []);
-      void this.paintProfilerView.setSnapshotAndLog(snapshot, log || [], null);
-      if (snapshot) {
-        snapshot.release();
+    void snapshot.commandLog().then(log => {
+      if (this.#snapshot) {
+        this.#snapshot.release();
       }
-    }
+      this.#snapshot = snapshot;
+      this.#log = log || [];
+      this.requestUpdate();
+    });
   }
 
   setScale(scale: number): void {
-    this.paintProfilerView.setScale(scale);
+    this.#scale = scale;
+    this.requestUpdate();
   }
 
-  private onWindowChanged(): void {
-    this.logTreeView.updateWindow(this.paintProfilerView.selectionWindow());
-  }
+  private onWindowChanged = (window: {left: number, right: number}|null): void => {
+    this.#selectionWindow = window;
+    this.requestUpdate();
+  };
 }