Allow NamedBitSetFilterUI instantiation from lit-html template

Similar to the split widget changes: https://crrev.com/c/5898679

Bug: 301364727
Change-Id: I68e8972170333d7fdb731fe22676f0996b58e024
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5979110
Reviewed-by: Philip Pfaffe <[email protected]>
Commit-Queue: Joshua Thomas <[email protected]>
Reviewed-by: Shuran Huang <[email protected]>

Author: masnoble

front_end/ui/legacy/BUILD.gn

@@ -196,6 +196,7 @@ ts_library("unittests") {
     "Context.test.ts",
     "ContextMenu.test.ts",
     "DockController.test.ts",
+    "FilterBar.test.ts",
     "Fragment.test.ts",
     "Geometry.test.ts",
     "Infobar.test.ts",

front_end/ui/legacy/FilterBar.test.ts

@@ -0,0 +1,52 @@
+// Copyright 2024 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.
+
+import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import * as LitHtml from '../../ui/lit-html/lit-html.js';
+
+import * as UI from './legacy.js';
+
+const {render, html} = LitHtml;
+
+describeWithEnvironment('NamedBitSetFilterUI', () => {
+  it('is functional from template', async () => {
+    const container = document.createElement('div');
+    renderElementIntoDOM(container);
+
+    let namedBitSetFilterUI!: UI.FilterBar.NamedBitSetFilterUI;
+
+    const filterItems: UI.FilterBar.Item[] = [
+      {
+        name: 'filter',
+        label: () => 'filter',
+        title: 'filter',
+        jslogContext: 'filter',
+      },
+    ];
+
+    // clang-format off
+        render(
+            html`
+            <devtools-named-bit-set-filter
+              .options=${{items: filterItems}}
+              ${LitHtml.Directives.ref((el: Element|undefined) => {
+                  if(!el || !(el instanceof UI.FilterBar.NamedBitSetFilterUIElement)){
+                      return;
+                  }
+                  namedBitSetFilterUI = el.getOrCreateNamedBitSetFilterUI();
+              })}
+            ></devtools-named-bit-set-filter>
+        `,
+        container, {host: this});
+    // clang-format on
+
+    assert.isTrue(namedBitSetFilterUI.accept('test'));
+
+    const filter = namedBitSetFilterUI.element().querySelector('.filter') as HTMLElement;
+    filter.click();
+
+    assert.isFalse(namedBitSetFilterUI.accept('test'));
+  });
+});

front_end/ui/legacy/FilterBar.ts

@@ -39,6 +39,7 @@ import filterStyles from './filter.css.legacy.js';
 import {KeyboardShortcut, Modifiers} from './KeyboardShortcut.js';
 import {bindCheckbox} from './SettingsUI.js';
 import type {Suggestions} from './SuggestBox.js';
+import * as ThemeSupport from './theme_support/theme_support.js';
 import {Toolbar, type ToolbarButton, ToolbarFilter, ToolbarInput, ToolbarSettingToggle} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {CheckboxLabel, createTextChild} from './UIUtils.js';
@@ -267,6 +268,50 @@ export class TextFilterUI extends Common.ObjectWrapper.ObjectWrapper<FilterUIEve
   }
 }
 
+interface NamedBitSetFilterUIOptions {
+  items: Item[];
+  setting?: Common.Settings.Setting<{[key: string]: boolean}>;
+}
+export class NamedBitSetFilterUIElement extends HTMLElement {
+  #options: NamedBitSetFilterUIOptions = {items: []};
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #namedBitSetFilterUI?: NamedBitSetFilterUI;
+
+  set options(options: NamedBitSetFilterUIOptions) {
+    this.#options = options;
+  }
+
+  getOrCreateNamedBitSetFilterUI(): NamedBitSetFilterUI {
+    if (this.#namedBitSetFilterUI) {
+      return this.#namedBitSetFilterUI;
+    }
+
+    const namedBitSetFilterUI = new NamedBitSetFilterUI(this.#options.items, this.#options.setting);
+    namedBitSetFilterUI.element().classList.add('named-bitset-filter');
+
+    const disclosureElement = this.#shadow.createChild('div', 'named-bit-set-filter-disclosure');
+    disclosureElement.appendChild(namedBitSetFilterUI.element());
+
+    // Translate existing filter ("ObjectWrapper") events to DOM CustomEvents so clients can
+    // use lit templates to bind listeners.
+    namedBitSetFilterUI.addEventListener(FilterUIEvents.FILTER_CHANGED, this.#filterChanged.bind(this));
+
+    this.#namedBitSetFilterUI = namedBitSetFilterUI;
+    return this.#namedBitSetFilterUI;
+  }
+
+  connectedCallback(): void {
+    ThemeSupport.ThemeSupport.instance().appendStyle(this.#shadow, filterStyles);
+  }
+
+  #filterChanged(): void {
+    const domEvent = new CustomEvent('filterChanged');
+    this.dispatchEvent(domEvent);
+  }
+}
+
+customElements.define('devtools-named-bit-set-filter', NamedBitSetFilterUIElement);
+
 export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper<FilterUIEventTypes> implements FilterUI {
   private readonly filtersElement: HTMLDivElement;
   private readonly typeFilterElementTypeNames: WeakMap<HTMLElement, string>;