Adopt UI eng vision in the LayersWidget

This is still using the `<devtools-tree-outline>` and will need to be
migrated further once we have the final tree outline component ready.

Drive-by-fix: Fix the event handler memory leaks (currently these
didn't bite us because we still use singletons, but once that'd be
fixed, we'd otherwise leak every instance).

Drive-by-fix: No need to use a shadow root for the LayersWidget itself,
there are only two trivially styled elements inside anyways.

Fixed: 407750478
Change-Id: Ia796b8bbe9abdacf1a0ae12e8ceff682cc067aca
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6822162
Commit-Queue: Benedikt Meurer <[email protected]>
Auto-Submit: Benedikt Meurer <[email protected]>
Reviewed-by: Philip Pfaffe <[email protected]>

Author: bmeurer

front_end/panels/elements/LayersWidget.ts

@@ -1,18 +1,21 @@
 // Copyright (c) 2022 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-imperative-dom-api */
 
+import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as Lit from '../../third_party/lit/lit.js';
 import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ElementsPanel} from './ElementsPanel.js';
 import layersWidgetStyles from './layersWidget.css.js';
 
+const {render, html, Directives: {ref}} = Lit;
+
 const UIStrings = {
   /**
    * @description Title of a section in the Element State Pane Widget of the Elements panel.
@@ -28,95 +31,122 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/LayersWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-let layersWidgetInstance: LayersWidget;
+interface ViewInput {
+  rootLayer: Protocol.CSS.CSSLayerData;
+}
 
-export class LayersWidget extends UI.Widget.Widget {
-  private cssModel?: SDK.CSSModel.CSSModel|null;
-  private layerTreeComponent = new TreeOutline.TreeOutline.TreeOutline<string>();
+interface ViewOutput {
+  treeOutline: TreeOutline.TreeOutline.TreeOutline<string>|undefined;
+}
 
-  constructor() {
-    super({
-      jslog: `${VisualLogging.pane('css-layers')}`,
-      useShadowDom: true,
-    });
-    this.registerRequiredCSS(layersWidgetStyles);
+type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
-    this.contentElement.className = 'styles-layers-pane';
-    UI.UIUtils.createTextChild(this.contentElement.createChild('div'), i18nString(UIStrings.cssLayersTitle));
+const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => {
+  const makeTreeNode = (parentId: string) => (layer: Protocol.CSS.CSSLayerData) => {
+    const subLayers = layer.subLayers;
+    const name = SDK.CSSModel.CSSModel.readableLayerName(layer.name);
+    const treeNodeData = layer.order + ': ' + name;
+    const id = parentId ? parentId + '.' + name : name;
+    if (!subLayers) {
+      return {treeNodeData, id};
+    }
+    return {
+      treeNodeData,
+      id,
+      children: async () => subLayers.sort((layer1, layer2) => layer1.order - layer2.order).map(makeTreeNode(id)),
+    };
+  };
+  const {defaultRenderer} = TreeOutline.TreeOutline;
+  const tree = [makeTreeNode('')(input.rootLayer)];
+  const data: TreeOutline.TreeOutline.TreeOutlineData<string> = {
+    defaultRenderer,
+    tree,
+  };
+  const captureTreeOutline = (e?: Element): void => {
+    output.treeOutline = e as typeof output.treeOutline;
+  };
+  const template = html`
+  <style>${layersWidgetStyles}</style>
+  <div class="layers-widget">
+    <div class="layers-widget-title">${UIStrings.cssLayersTitle}</div>
+    <devtools-tree-outline ${ref(captureTreeOutline)}
+                           .data=${data}></devtools-tree-outline>
+  </div>
+  `;
+  render(template, target);
+};
 
-    this.contentElement.appendChild(this.layerTreeComponent);
+let layersWidgetInstance: LayersWidget;
 
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
-  }
+export class LayersWidget extends UI.Widget.Widget {
+  #node: SDK.DOMModel.DOMNode|null = null;
+  #view: View;
+  #layerToReveal: string|null = null;
 
-  private updateModel(cssModel: SDK.CSSModel.CSSModel|null): void {
-    if (this.cssModel === cssModel) {
-      return;
-    }
-    if (this.cssModel) {
-      this.cssModel.removeEventListener(SDK.CSSModel.Events.StyleSheetChanged, this.update, this);
-    }
-    this.cssModel = cssModel;
-    if (this.cssModel) {
-      this.cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetChanged, this.update, this);
-    }
+  constructor(view: View = DEFAULT_VIEW) {
+    super({jslog: `${VisualLogging.pane('css-layers')}`});
+    this.#view = view;
   }
 
-  override wasShown(): Promise<void> {
+  override wasShown(): void {
     super.wasShown();
-    return this.update();
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.#onDOMNodeChanged, this);
+    this.#onDOMNodeChanged({data: UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode)});
   }
 
-  async update(): Promise<void> {
-    if (!this.isShowing()) {
+  override wasHidden(): void {
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.#onDOMNodeChanged, this);
+    this.#onDOMNodeChanged({data: null});
+    super.wasHidden();
+  }
+
+  #onDOMNodeChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
+    const node = event.data?.enclosingElementOrSelf();
+    if (this.#node === node) {
       return;
     }
-
-    let node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
-    if (node) {
-      node = node.enclosingElementOrSelf();
+    if (this.#node) {
+      this.#node.domModel().cssModel().removeEventListener(
+          SDK.CSSModel.Events.StyleSheetChanged, this.requestUpdate, this);
     }
-    if (!node) {
-      // do something meaningful?
-      return;
+    this.#node = event.data;
+    if (this.#node) {
+      this.#node.domModel().cssModel().addEventListener(
+          SDK.CSSModel.Events.StyleSheetChanged, this.requestUpdate, this);
+    }
+    if (this.isShowing()) {
+      this.requestUpdate();
     }
+  }
 
-    this.updateModel(node.domModel().cssModel());
-    if (!this.cssModel) {
+  override async performUpdate(): Promise<void> {
+    if (!this.#node) {
       return;
     }
-    const makeTreeNode = (parentId: string) => (layer: Protocol.CSS.CSSLayerData) => {
-      const subLayers = layer.subLayers;
-      const name = SDK.CSSModel.CSSModel.readableLayerName(layer.name);
-      const treeNodeData = layer.order + ': ' + name;
-      const id = parentId ? parentId + '.' + name : name;
-      if (!subLayers) {
-        return {treeNodeData, id};
-      }
-      return {
-        treeNodeData,
-        id,
-        children: () =>
-            Promise.resolve(subLayers.sort((layer1, layer2) => layer1.order - layer2.order).map(makeTreeNode(id))),
-      };
-    };
-    const rootLayer = await this.cssModel.getRootLayer(node.id);
-    this.layerTreeComponent.data = {
-      defaultRenderer: TreeOutline.TreeOutline.defaultRenderer,
-      tree: [makeTreeNode('')(rootLayer)],
-    };
 
-    // We only expand the first 5 user-defined layers to not make the
-    // view too overwhelming.
-    await this.layerTreeComponent.expandRecursively(5);
+    const rootLayer = await this.#node.domModel().cssModel().getRootLayer(this.#node.id);
+    const input = {rootLayer};
+    const output: ViewOutput = {treeOutline: undefined};
+    this.#view(input, output, this.contentElement);
+
+    if (output.treeOutline) {
+      // We only expand the first 5 user-defined layers to not make the
+      // view too overwhelming.
+      await output.treeOutline.expandRecursively(5);
+      if (this.#layerToReveal) {
+        await output.treeOutline.expandToAndSelectTreeNodeId(this.#layerToReveal);
+        this.#layerToReveal = null;
+      }
+    }
   }
 
   async revealLayer(layerName: string): Promise<void> {
     if (!this.isShowing()) {
       ElementsPanel.instance().showToolbarPane(this, ButtonProvider.instance().item());
     }
-    await this.update();
-    return await this.layerTreeComponent.expandToAndSelectTreeNodeId('implicit outer layer.' + layerName);
+    this.#layerToReveal = `implicit outer layer.${layerName}`;
+    this.requestUpdate();
+    await this.updateComplete;
   }
 
   static instance(opts: {

front_end/panels/elements/layersWidget.css

@@ -4,7 +4,7 @@
  * found in the LICENSE file.
  */
 
-.styles-layers-pane {
+.layers-widget {
   overflow: hidden;
   padding-left: 2px;
   background-color: var(--sys-color-cdt-base-container);
@@ -13,16 +13,7 @@
   padding-bottom: 2px;
 }
 
-.styles-layers-pane > div {
+.layers-widget > .layers-widget-title {
   font-weight: bold;
   margin: 8px 4px 6px;
 }
-
-.styles-layers-pane > table {
-  width: 100%;
-  border-spacing: 0;
-}
-
-.styles-layers-pane td {
-  padding: 0;
-}