Adopt UI eng vision in the HiddenIssuesRow

Fixed: 407751929
Change-Id: I4f71c59ebd4f92c8e65ba3a1684fb9bcf83b66ad
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6801798
Commit-Queue: Benedikt Meurer <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>

Author: bmeurer

front_end/panels/issues/BUILD.gn

@@ -52,6 +52,7 @@ devtools_module("issues") {
     "../../panels/console_counters:bundle",
     "../../panels/network/forward:bundle",
     "../../ui/components/adorners:bundle",
+    "../../ui/components/buttons:bundle",
     "../../ui/components/linkifier:bundle",
     "../../ui/components/markdown_view:bundle",
     "../../ui/components/request_link_icon:bundle",

front_end/panels/issues/HiddenIssuesRow.ts

@@ -1,12 +1,15 @@
 // Copyright 2021 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 '../../ui/components/adorners/adorners.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
-import * as Adorners from '../../ui/components/adorners/adorners.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 const UIStrings = {
   /**
@@ -22,41 +25,64 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/issues/HiddenIssuesRow.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+interface ViewInput {
+  count: number;
+  onUnhideAllIssues: () => void;
+}
+
+type ViewOutput = unknown;
+
+type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLElement): void => {
+  const stopPropagationForEnter = (event: KeyboardEvent): void => {
+    if (event.key === 'Enter') {
+      // Make sure we don't propagate 'Enter' key events to parents,
+      // so that these get turned into 'click' events properly. If we
+      // don't stop the propagation here, the 'Enter' key down event
+      // will be consumed by the tree element and it'll be expanded
+      // or collapsed instead of the "Unhide all" action being taken.
+      event.stopImmediatePropagation();
+    }
+  };
+
+  // clang-format off
+  render(html`
+  <div class="header">
+    <devtools-adorner class="aggregated-issues-count"
+                      .data=${{name: 'countWrapper'}}>
+      <span>${input.count}</span>
+    </devtools-adorner>
+    <div class="title">${i18nString(UIStrings.hiddenIssues)}</div>
+    <devtools-button class="unhide-all-issues-button"
+                     jslog=${VisualLogging.action().track({click: true}).context('issues.unhide-all-hiddes')}
+                     @click=${input.onUnhideAllIssues}
+                     @keydown=${stopPropagationForEnter}
+                     .variant=${Buttons.Button.Variant.OUTLINED}>${i18nString(UIStrings.unhideAll)}</devtools-button>
+  </div>`, target, {host: input});
+  // clang-format on
+};
+
 export class HiddenIssuesRow extends UI.TreeOutline.TreeElement {
-  #numHiddenAggregatedIssues: HTMLElement;
+  #view: View;
 
-  constructor() {
+  constructor(view: View = DEFAULT_VIEW) {
     super(undefined, true);
-    this.#numHiddenAggregatedIssues = document.createElement('span');
+    this.#view = view;
     this.toggleOnClick = true;
     this.listItemElement.classList.add('issue-category', 'hidden-issues');
     this.childrenListElement.classList.add('hidden-issues-body');
-    this.#appendHeader();
-  }
-
-  #appendHeader(): void {
-    const unhideAllIssuesBtn = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.unhideAll), () => IssuesManager.IssuesManager.IssuesManager.instance().unhideAllIssues(),
-        {className: 'unhide-all-issues-button', jslogContext: 'issues.unhide-all-hiddes'});
-    const countAdorner = new Adorners.Adorner.Adorner();
-    countAdorner.data = {
-      name: 'countWrapper',
-      content: this.#numHiddenAggregatedIssues,
-    };
-    countAdorner.classList.add('aggregated-issues-count');
-    this.#numHiddenAggregatedIssues.textContent = '0';
-    const header = document.createElement('div');
-    const title = document.createElement('div');
-    header.classList.add('header');
-    title.classList.add('title');
-    title.textContent = i18nString(UIStrings.hiddenIssues);
-    header.appendChild(countAdorner);
-    header.appendChild(title);
-    header.appendChild(unhideAllIssuesBtn);
-    this.listItemElement.appendChild(header);
+    this.update(0);
   }
 
   update(count: number): void {
-    this.#numHiddenAggregatedIssues.textContent = `${count}`;
+    const issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
+    const onUnhideAllIssues = issuesManager.unhideAllIssues.bind(issuesManager);
+    const input = {
+      count,
+      onUnhideAllIssues,
+    };
+    const output = undefined;
+    this.#view(input, output, this.listItemElement);
   }
 }