Address UI eng vision violations in panels/whats_new/ReleaseNoteView.ts

Bug: 407942007
Change-Id: I04660af3e0990be2be61da6324bf0f340deadd56
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6441440
Reviewed-by: Kim-Anh Tran <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: danilsomsikov

front_end/panels/whats_new/ReleaseNoteView.ts

@@ -1,8 +1,6 @@
 // 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.
-/* eslint-disable rulesdir/no-imperative-dom-api */
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
@@ -61,15 +59,15 @@ export async function getMarkdownContent(): Promise<Marked.Marked.Token[][]> {
   return splitMarkdownAst;
 }
 
-export class ReleaseNoteView extends UI.Widget.VBox {
+export class ReleaseNoteView extends UI.Panel.Panel {
   #view: View;
 
-  constructor(element?: HTMLElement, view: View = (input, _output, target) => {
-    this.registerRequiredCSS(releaseNoteViewStyles);
+  constructor(view: View = (input, _output, target) => {
     const releaseNote = input.getReleaseNote();
     const markdownContent = input.markdownContent;
     // clang-format off
     render(html`
+      <style>${releaseNoteViewStyles.cssText}</style>
       <div class="whatsnew" jslog=${VisualLogging.section().context('release-notes')}>
         <div class="whatsnew-content">
           <div class="header">
@@ -104,11 +102,10 @@ export class ReleaseNoteView extends UI.Widget.VBox {
           </div>
         </div>
       </div>
-    `, target, {host: this});
+    `, target, {host: input});
     // clang-format on
   }) {
-    super(true, undefined, element);
-    this.element.setAttribute('jslog', `${VisualLogging.panel().context('whats-new')}`);
+    super('whats-new', true);
     this.#view = view;
     this.requestUpdate();
   }