npm - chrome-devtools-frontend - Versions diffs - 1.0.940714 → 1.0.942529 - Mend

chrome-devtools-frontend 1.0.940714 → 1.0.942529

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (241) hide show

package/front_end/third_party/lighthouse/report-assets/standalone-template.html CHANGED Viewed

@@ -21,13 +21,11 @@ limitations under the License.
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
   <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEhklEQVR4AWJxL/BhIAesev1U5tcflpncgNrKIsqNIwzC9feMpDUzs70kOczMzMzJJcxwCTMzncPMnOwtzBwzMzPb0vRfeZPp0VhPS5I39V5fdiXV1/VD+9QC7OVn9BsyH1XIoEI1PfmJvLFowVV564+34DFUHudbmfDh4kVXh//7XwE+WjS/YfXZe3yr4j2rqj1AIhSB7hZ8ZtPZu/zw8cK523U4wE1/rvPfWrz4zs0m9ZdC9yUJAlASdBAgocRegfF/f3/h/PuaFsxMdwjAR0vm1+06eMMfIrhLqTWqdH4EumU2SPfMhigJAlRQbZrgrRsl9U+Y2DYDFCz3ILC9kiAiqSrMwbWT0nceEnR+9Kggc2zjOJCASDENkg0a5HfZZgDP81CM3CrQs2Z1+o7DJ6ePr8sK0AOCHv5Jjdt3evyYSaZ351VIStIxPRAUtrBYbxC6w+BZ0ivVSBKkIhJhemSyZpfB00EiPO2VjzYkxhcqXQqCWCShGplvi3y0QxqbuBurMjyJeWnkHZuAEgIQGsUBqwrfjZ+IlBgKyRJzVVYF8O6qFWdh86YzQzMrZigYmxAyfvHgLZQ/LC1CbeniW2Hkqr/PH16SgvGuf2/uzNMBwJA/njxizGPtSyAf7EziJCMGRDRdhoAC4PL1A/SrKQMAAQkEfpJAcRQdrBJ7gNwjSpJsdwK+CANBkqa1LgQB4IicV9nYUct7gaxuDJUErQIiEAiMxLVOFlKzIktPpT0ggpdpC/8YAHnxbgkUY4tAAFSR7AAXNyAAWHJrA/kHGjzg5nleuwFO7Nd/IoDw4Pm58+4jNLmYG0wRA5bErc2Mr3Y+dXTDW1VvwqbJkzMCHQ4S1GTCBOIgUHJrGdEwqzR+jAp/o2qAZelUDoQnruEEdDclJI6576AlNVfc+22XN/+Y1vnJD0Yind6UpEEvn/Hqq15EYjCW7jZCJEpnNvDgkyelDjs106kuux2AAXCSobULOWP8mLhYlpoDMK4qAFXJGk+grtH8YXVz5KJblqaG1+VUdTc0I290bmUQAriGITRbdQnom0aoFj8kx1+wMD2ifncAXUQE4SkDqN1hE0jEophs1SUwZAOhUAiMCLwRtamtTZtbbmZErSAUHbSysaoEmnrsakiMiUAURi283gN6wans9oX8rOCrj7/JP35DFD+iQ7Au/K2KE1jzx6ujjUnXFH9KjEq6ZlhsTBICrNLJf47Pv/pkHzvup1w4dmUbEei0+bcXRqJuh5kVARQ8byyYxOwNGr7A87xh1tp8sGT+uMInrwi++Xj7TQz2d27NvwEkrOflAFQGIDA5khASBCGdO2/Z/MnLPwYfv5TFhjW7QhVKAB6afwe2LpFlFsCnlQEosgQgDsdOG1/LKeNqJS4JCSPJ/i+TakwEARor7gER1Iva5JmPOJK0RUqmoPnnlzFCtmIAhAAQEIQRgDaiYPIauNXcnDlRIrWNFY3hm7PG9YRqr7IV7HrCgAC17befjEvRq2nGhAHtBqDpOuI/I1diUUAMYIxEdyejBJqLnNoszGZtfiX/CztGv2mq+sdaAAAAAElFTkSuQmCC">
   <title>Lighthouse Report</title>
-  <style>/*%%LIGHTHOUSE_CSS%%*/</style>
+  <style>body {margin: 0}</style>
 </head>
-<body class="lh-root lh-vars">
+<body>
   <noscript>Lighthouse report requires JavaScript. Please enable.</noscript>
-  <main><!-- report populated here --></main>
   <div id="lh-log"></div>
   <script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>

package/front_end/ui/components/code_highlighter/CodeHighlighter.ts CHANGED Viewed

@@ -2,56 +2,50 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import type * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
-let highlightStyle: CodeMirror.HighlightStyle|null = null;
-function importCM(): Promise<typeof CodeMirror> {
-  return import('../../../third_party/codemirror.next/codemirror.next.js');
-}
-export function getHighlightStyle(modCM: typeof CodeMirror): CodeMirror.HighlightStyle {
-  if (!highlightStyle) {
-    const t = modCM.tags;
-    highlightStyle = modCM.HighlightStyle.define([
-      {tag: t.variableName, class: 'token-variable'},
-      {tag: t.propertyName, class: 'token-property'},
-      {tag: [t.typeName, t.className, t.namespace, t.macroName], class: 'token-type'},
-      {tag: [t.special(t.name), t.constant(t.className)], class: 'token-variable-special'},
-      {tag: t.definition(t.name), class: 'token-definition'},
-      {tag: t.standard(t.variableName), class: 'token-builtin'},
-      {tag: [t.number, t.literal, t.unit], class: 'token-number'},
-      {tag: t.string, class: 'token-string'},
-      {tag: [t.special(t.string), t.regexp, t.escape], class: 'token-string-special'},
-      {tag: [t.atom, t.labelName, t.bool], class: 'token-atom'},
-      {tag: t.keyword, class: 'token-keyword'},
-      {tag: [t.comment, t.quote], class: 'token-comment'},
-      {tag: t.meta, class: 'token-meta'},
-      {tag: t.invalid, class: 'token-invalid'},
-      {tag: t.tagName, class: 'token-tag'},
-      {tag: t.attributeName, class: 'token-attribute'},
-      {tag: t.attributeValue, class: 'token-attribute-value'},
-      {tag: t.inserted, class: 'token-inserted'},
-      {tag: t.deleted, class: 'token-deleted'},
-      {tag: t.heading, class: 'token-heading'},
-      {tag: t.link, class: 'token-link'},
-      {tag: t.strikethrough, class: 'token-strikethrough'},
-      {tag: t.strong, class: 'token-strong'},
-      {tag: t.emphasis, class: 'token-emphasis'},
-    ]);
-  }
-  return highlightStyle;
-}
+import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
+const t = CodeMirror.tags;
+export const highlightStyle: CodeMirror.HighlightStyle = CodeMirror.HighlightStyle.define([
+  {tag: t.variableName, class: 'token-variable'},
+  {tag: t.propertyName, class: 'token-property'},
+  {tag: [t.typeName, t.className, t.namespace, t.macroName], class: 'token-type'},
+  {tag: [t.special(t.name), t.constant(t.className)], class: 'token-variable-special'},
+  {tag: t.definition(t.name), class: 'token-definition'},
+  {tag: t.standard(t.variableName), class: 'token-builtin'},
+  {tag: [t.number, t.literal, t.unit], class: 'token-number'},
+  {tag: t.string, class: 'token-string'},
+  {tag: [t.special(t.string), t.regexp, t.escape], class: 'token-string-special'},
+  {tag: [t.atom, t.labelName, t.bool], class: 'token-atom'},
+  {tag: t.keyword, class: 'token-keyword'},
+  {tag: [t.comment, t.quote], class: 'token-comment'},
+  {tag: t.meta, class: 'token-meta'},
+  {tag: t.invalid, class: 'token-invalid'},
+  {tag: t.tagName, class: 'token-tag'},
+  {tag: t.attributeName, class: 'token-attribute'},
+  {tag: t.attributeValue, class: 'token-attribute-value'},
+  {tag: t.inserted, class: 'token-inserted'},
+  {tag: t.deleted, class: 'token-deleted'},
+  {tag: t.heading, class: 'token-heading'},
+  {tag: t.link, class: 'token-link'},
+  {tag: t.strikethrough, class: 'token-strikethrough'},
+  {tag: t.strong, class: 'token-strong'},
+  {tag: t.emphasis, class: 'token-emphasis'},
+]);
 export async function create(code: string, mimeType: string): Promise<CodeHighlighter> {
-  const CM = await importCM();
   const language = await languageFromMIME(mimeType);
-  const tree = language ? language.language.parser.parse(code) : new CM.Tree(CM.NodeType.none, [], [], code.length);
-  return new CodeHighlighter(code, tree, CM);
+  let tree: CodeMirror.Tree;
+  if (language) {
+    tree = language.language.parser.parse(code);
+  } else {
+    tree = new CodeMirror.Tree(CodeMirror.NodeType.none, [], [], code.length);
+  }
+  return new CodeHighlighter(code, tree);
 }
 export async function highlightNode(node: Element, mimeType: string): Promise<void> {
@@ -71,57 +65,55 @@ export async function highlightNode(node: Element, mimeType: string): Promise<vo
 }
 export async function languageFromMIME(mimeType: string): Promise<CodeMirror.LanguageSupport|null> {
-  const CM = await importCM();
   switch (mimeType) {
     case 'text/javascript':
-      return (await CM.javascript()).javascript();
+      return CodeMirror.javascript.javascript();
     case 'text/jsx':
-      return (await CM.javascript()).javascript({jsx: true});
+      return CodeMirror.javascript.javascript({jsx: true});
     case 'text/typescript':
-      return (await CM.javascript()).javascript({typescript: true});
+      return CodeMirror.javascript.javascript({typescript: true});
     case 'text/typescript-jsx':
-      return (await CM.javascript()).javascript({typescript: true, jsx: true});
+      return CodeMirror.javascript.javascript({typescript: true, jsx: true});
     case 'text/css':
     case 'text/x-scss':
-      return (await CM.css()).css();
+      return CodeMirror.css.css();
     case 'text/html':
-      return (await CM.html()).html();
+      return CodeMirror.html.html();
     case 'application/xml':
-      return (await CM.xml()).xml();
+      return (await CodeMirror.xml()).xml();
     case 'text/webassembly':
-      return (await CM.wast()).wast();
+      return (await CodeMirror.wast()).wast();
     case 'text/x-c++src':
-      return (await CM.cpp()).cpp();
+      return (await CodeMirror.cpp()).cpp();
     case 'text/x-java':
-      return (await CM.java()).java();
+      return (await CodeMirror.java()).java();
     case 'application/json':
-      return (await CM.json()).json();
+      return (await CodeMirror.json()).json();
     case 'application/x-httpd-php':
-      return (await CM.php()).php();
+      return (await CodeMirror.php()).php();
     case 'text/x-python':
-      return (await CM.python()).python();
+      return (await CodeMirror.python()).python();
     case 'text/markdown':
-      return (await CM.markdown()).markdown();
+      return (await CodeMirror.markdown()).markdown();
     case 'text/x-sh':
-      return new CM.LanguageSupport(await CM.shell());
+      return new CodeMirror.LanguageSupport(await CodeMirror.shell());
     case 'text/x-coffeescript':
-      return new CM.LanguageSupport(await CM.coffeescript());
+      return new CodeMirror.LanguageSupport(await CodeMirror.coffeescript());
     case 'text/x-clojure':
-      return new CM.LanguageSupport(await CM.clojure());
+      return new CodeMirror.LanguageSupport(await CodeMirror.clojure());
     default:
       return null;
@@ -129,7 +121,7 @@ export async function languageFromMIME(mimeType: string): Promise<CodeMirror.Lan
 }
 export class CodeHighlighter {
-  constructor(readonly code: string, readonly tree: CodeMirror.Tree, private readonly modCM: typeof CodeMirror) {
+  constructor(readonly code: string, readonly tree: CodeMirror.Tree) {
   }
   highlight(token: (text: string, style: string) => void): void {
@@ -144,7 +136,7 @@ export class CodeHighlighter {
         pos = to;
       }
     };
-    this.modCM.highlightTree(this.tree, getHighlightStyle(this.modCM).match, (from, to, style) => {
+    CodeMirror.highlightTree(this.tree, highlightStyle.match, (from, to, style) => {
       flush(from, '');
       flush(to, style);
     }, from, to);

package/front_end/ui/components/data_grid/dataGrid.css CHANGED Viewed

@@ -120,21 +120,23 @@ th.firstVisibleColumn {
 }
 [aria-sort="descending"]::after {
-  content: " ";
-  border-left: 0.3em solid transparent;
-  border-right: 0.3em solid transparent;
-  border-top: 0.3em solid var(--color-text-primary);
+  content: "";
+  width: 0;
+  border-left: 0.4em solid transparent;
+  border-right: 0.4em solid transparent;
+  border-top: 0.4em solid var(--color-text-secondary);
   position: absolute;
   right: 0.5em;
-  top: 0.6em;
+  top: 0.85em;
 }
 [aria-sort="ascending"]::after {
-  content: " ";
-  border-bottom: 0.3em solid var(--color-text-primary);
-  border-left: 0.3em solid transparent;
-  border-right: 0.3em solid transparent;
+  content: "";
+  width: 0;
+  border-bottom: 0.4em solid var(--color-text-secondary);
+  border-left: 0.4em solid transparent;
+  border-right: 0.4em solid transparent;
   position: absolute;
   right: 0.5em;
-  top: 0.6em;
+  top: 0.7em;
 }

package/front_end/ui/components/docs/css_overview/start_view.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!--
+  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.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>CSS Overview Start View</title>
+    <style>
+      #container {
+        width: 80%;
+        border: 1px solid black;
+        padding: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <script type="module" src="./start_view.js"></script>
+  </body>
+</html>

package/front_end/ui/components/docs/css_overview/start_view.ts ADDED Viewed

@@ -0,0 +1,14 @@
+// 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.
+import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
+import * as CSSOverviewComponents from '../../../../panels/css_overview/components/components.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
+const component = new CSSOverviewComponents.CSSOverviewStartView.CSSOverviewStartView();
+document.getElementById('container')?.appendChild(component);

package/front_end/ui/components/docs/icon_button/basic.ts CHANGED Viewed

@@ -12,18 +12,18 @@ function appendComponent(data: IconButton.IconButton.IconButtonData) {
 appendComponent({
   clickHandler: (): void => {},
-  groups: [{iconName: 'feedback_thin_16x16_icon', iconColor: 'black', text: '1 item'}],
+  groups: [{iconName: 'survey_feedback_icon', iconColor: 'black', text: '1 item'}],
 });
 appendComponent({
   clickHandler: (): void => {},
-  groups: [{iconName: 'feedback_thin_16x16_icon', iconColor: 'black', text: '1 item'}],
+  groups: [{iconName: 'survey_feedback_icon', iconColor: 'black', text: '1 item'}],
 });
 appendComponent({
   clickHandler: (): void => {},
   groups: [
-    {iconName: 'feedback_thin_16x16_icon', iconColor: 'blue', text: 'Test'},
+    {iconName: 'survey_feedback_icon', iconColor: 'blue', text: 'Test'},
     {iconName: 'warning_icon', iconColor: '', text: '1'},
   ],
 });

package/front_end/ui/components/docs/panel_feedback/basic.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!--
+  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.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Panel Feedback</title>
+    <style>
+      #container {
+        width: 80%;
+        border: 1px solid black;
+        padding: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <script type="module" src="./basic.js"></script>
+  </body>
+</html>

package/front_end/ui/components/docs/panel_feedback/basic.ts ADDED Viewed

@@ -0,0 +1,20 @@
+// 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.
+import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
+import * as PanelFeedback from '../../../components/panel_feedback/panel_feedback.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
+const component = new PanelFeedback.PanelFeedback.PanelFeedback();
+component.data = {
+  feedbackUrl: 'https://www.example.com',
+  quickStartUrl: 'https://www.example.com',
+  quickStartLinkText: 'Quick start: get started with the Recorder',
+};
+document.getElementById('container')?.appendChild(component);

package/front_end/ui/components/docs/panel_feedback/button.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!--
+  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.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Feedback button</title>
+    <style>
+      #container {
+        width: 80%;
+        border: 1px solid black;
+        padding: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <script type="module" src="./button.js"></script>
+  </body>
+</html>

package/front_end/ui/components/docs/panel_feedback/button.ts ADDED Viewed

@@ -0,0 +1,18 @@
+// 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.
+import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
+import * as PanelFeedback from '../../../components/panel_feedback/panel_feedback.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
+const component = new PanelFeedback.FeedbackButton.FeedbackButton();
+component.data = {
+  feedbackUrl: 'https://www.example.com',
+};
+document.getElementById('container')?.appendChild(component);

package/front_end/ui/components/helpers/get-stylesheet.ts CHANGED Viewed

@@ -41,19 +41,6 @@ export function legacyGetStyleSheets(path: string): CSSStyleSheet[] {
  * them through to the right place, respecting Karma's ROOT_DIRECTORY setting.
  */
 export const CSS_RESOURCES_TO_LOAD_INTO_RUNTIME = [
-  'ui/legacy/inspectorCommon.css',
-  'ui/legacy/textButton.css',
-  'ui/legacy/themeColors.css',
-  'ui/legacy/inspectorSyntaxHighlight.css',
-  'ui/legacy/progressIndicator.css',
   'panels/application/serviceWorkerUpdateCycleView.css',
-  'ui/legacy/tabbedPane.css',
-  'ui/legacy/glassPane.css',
-  'ui/legacy/suggestBox.css',
-  'ui/legacy/treeoutline.css',
-  'ui/legacy/softContextMenu.css',
-  'ui/legacy/splitWidget.css',
   'ui/legacy/components/source_frame/jsonView.css',
-  'ui/legacy/searchableView.css',
-  'ui/legacy/toolbar.css',
 ];

package/front_end/ui/components/markdown_view/MarkdownImagesMap.ts CHANGED Viewed

@@ -22,7 +22,7 @@ export interface ImageData {
  * [
  *   'feedbackIcon',
  *   {
- *     src: 'Images/feedback_thin_16x16_icon.svg',
+ *     src: 'Images/survey_feedback_icon.svg',
  *     isIcon: true,
  *     width: '20px',
  *     height: '20px',

package/front_end/ui/components/panel_feedback/FeedbackButton.ts ADDED Viewed

@@ -0,0 +1,67 @@
+// 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.
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as ComponentHelpers from '../../components/helpers/helpers.js';
+import * as LitHtml from '../../lit-html/lit-html.js';
+import * as Buttons from '../buttons/buttons.js';
+const UIStrings = {
+  /**
+   * @description The title of the button that leads to the feedback form.
+   */
+  feedback: 'Feedback',
+};
+const str_ = i18n.i18n.registerUIStrings('ui/components/panel_feedback/FeedbackButton.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const feedbackIconUrl = new URL('../../../Images/feedback_button_icon.svg', import.meta.url).toString();
+export interface FeedbackButtonData {
+  feedbackUrl: string;
+}
+export class FeedbackButton extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-feedback-button`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.render.bind(this);
+  #props: FeedbackButtonData = {
+    feedbackUrl: '',
+  };
+  set data(data: FeedbackButtonData) {
+    this.#props = data;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+  #onFeedbackClick(): void {
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(this.#props.feedbackUrl);
+  }
+  private render(): void {
+    if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
+      throw new Error('FeedbackButton render was not scheduled');
+    }
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <${Buttons.Button.Button.litTagName}
+          @click=${this.#onFeedbackClick}
+          .iconUrl=${feedbackIconUrl}
+          .variant=${Buttons.Button.Variant.SECONDARY}
+      >${i18nString(UIStrings.feedback)}</${Buttons.Button.Button.litTagName}>
+      `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+ComponentHelpers.CustomElements.defineComponent('devtools-feedback-button', FeedbackButton);
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-feedback-button': FeedbackButton;
+  }
+}

package/front_end/ui/components/panel_feedback/PanelFeedback.ts ADDED Viewed

@@ -0,0 +1,100 @@
+// 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.
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as ComponentHelpers from '../../components/helpers/helpers.js';
+import * as LitHtml from '../../lit-html/lit-html.js';
+import * as IconButton from '../icon_button/icon_button.js';
+import panelFeedbackStyles from './panelFeedback.css.js';
+const UIStrings = {
+  /**
+  *@description Introduction sentence to convey the feature is being actively worked on and we are looking for feedback.
+  */
+  previewText: 'Our team is actively working on this feature and we would love to know what you think.',
+  /**
+  *@description Link text the user can click to provide feedback to the team.
+  */
+  previewTextFeedbackLink: 'Send us your feedback.',
+  /**
+  *@description Title of the UI section that shows the user that this feature is in preview. Used as the main heading. Not a verb.
+  */
+  previewFeature: 'Preview feature',
+  /**
+  *@description Title of the section to the quick start video and documentation on experimental panels.
+  */
+  videoAndDocumentation: 'Video and documentation',
+};
+const str_ = i18n.i18n.registerUIStrings('ui/components/panel_feedback/PanelFeedback.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const previewFeatureUrl = new URL('../../../Images/ic_preview_feature.svg', import.meta.url).toString();
+const videoThumbnailUrl = new URL('../../../Images/preview_feature_video_thumbnail.svg', import.meta.url).toString();
+export interface PanelFeedbackData {
+  feedbackUrl: string;
+  quickStartUrl: string;
+  quickStartLinkText: string;
+}
+export class PanelFeedback extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-panel-feedback`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.render.bind(this);
+  #props: PanelFeedbackData = {
+    feedbackUrl: '',
+    quickStartUrl: '',
+    quickStartLinkText: '',
+  };
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [panelFeedbackStyles];
+  }
+  set data(data: PanelFeedbackData) {
+    this.#props = data;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+  private render(): void {
+    if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
+      throw new Error('PanelFeedback render was not scheduled');
+    }
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <div class="preview">
+        <h2 class="flex">
+          <${IconButton.Icon.Icon.litTagName} .data=${{
+            iconPath: previewFeatureUrl,
+            width: '24px',
+            height: '24px',
+            color: 'var(--color-primary)',
+          } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}> ${i18nString(UIStrings.previewFeature)}
+        </h2>
+        <p>${i18nString(UIStrings.previewText)} <x-link href=${this.#props.feedbackUrl}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>
+        <div class="video">
+          <div class="thumbnail">
+            <img src=${videoThumbnailUrl} role="presentation" />
+          </div>
+          <div class="video-description">
+            <h3>${i18nString(UIStrings.videoAndDocumentation)}</h3>
+            <x-link class="quick-start-link" href=${this.#props.quickStartUrl}>${this.#props.quickStartLinkText}</x-link>
+          </div>
+        </div>
+      </div>
+      `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+ComponentHelpers.CustomElements.defineComponent('devtools-panel-feedback', PanelFeedback);
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-panel-feedback': PanelFeedback;
+  }
+}