chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/ui/components/cards/card.css

@@ -3,30 +3,51 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
+:host {
+  display: flex;
+  max-width: var(--sys-size-35);
+  width: 100%;
+}
 
 .card {
-  margin: var(--sys-size-9);
-  width: auto;
+  break-inside: avoid;
+  min-width: var(--sys-size-31);
+  max-width: var(--sys-size-35);
+  margin: var(--sys-size-3) var(--sys-size-6) var(--sys-size-5) var(--sys-size-5);
+  flex: 1;
+}
+
+.heading-wrapper {
+  display: flex;
+  white-space: nowrap;
+  margin-bottom: var(--sys-size-5);
 }
 
 .heading {
   color: var(--sys-color-on-surface);
   font: var(--sys-typescale-body2-medium);
-  margin-bottom: var(--sys-size-5);
+}
+
+.heading-icon {
+  margin-right: var(--sys-size-3);
+}
+
+slot[name="heading-suffix"]::slotted(*) {
+  margin-left: auto;
 }
 
 .content-container {
   border-radius: var(--sys-shape-corner-small);
-  box-shadow: var(--sys-elevation-level3);
+  box-shadow: var(--sys-elevation-level2);
   display: flex;
   flex-direction: column;
   background: var(--app-color-card-background);
 }
 
-::slotted(*) {
-  padding: var(--sys-size-5);
+slot[name="content"]::slotted(*) {
+  padding: var(--sys-size-5) var(--sys-size-6);
 }
 
-::slotted(*:not(:first-child)) {
-  border-top: 1px solid var(--sys-color-divider);
+slot[name="content"]::slotted(*:not(:first-child)) {
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }

package/front_end/ui/components/chrome_link/ChromeLink.ts

@@ -23,7 +23,6 @@ declare global {
 // Use this component to render links to 'chrome://...'-URLs
 // (for which regular <x-link>s do not work).
 export class ChromeLink extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-chrome-link`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
   #href: string = '';

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -104,7 +104,6 @@ const KEYS_TREATED_AS_CLICKS = new Set([' ', 'Enter']);
 const ROW_HEIGHT_PIXELS = 20;
 
 export class DataGrid extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-data-grid`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #columns: readonly Column[] = [];

package/front_end/ui/components/data_grid/DataGridController.ts

@@ -9,7 +9,7 @@ import type * as TextUtils from '../../../models/text_utils/text_utils.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as UI from '../../legacy/legacy.js';
 
-import type {DataGridContextMenusConfiguration, DataGridData} from './DataGrid.js';
+import type {DataGridContextMenusConfiguration} from './DataGrid.js';
 import dataGridControllerStyles from './dataGridController.css.js';
 import type {ColumnHeaderClickEvent, ContextMenuColumnSortClickEvent} from './DataGridEvents.js';
 import {
@@ -65,7 +65,6 @@ export interface DataGridControllerData {
 }
 
 export class DataGridController extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-data-grid-controller`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #hasRenderedAtLeastOnce = false;
@@ -281,7 +280,7 @@ export class DataGridController extends HTMLElement {
           showScrollbar: this.#showScrollbar,
           striped: this.#striped,
           autoScrollToBottom: this.#autoScrollToBottom,
-        } as DataGridData}
+        }}
         @columnheaderclick=${this.#onColumnHeaderClick}
         @contextmenucolumnsortclick=${this.#onContextMenuColumnSortClick}
         @contextmenuheaderresetclick=${this.#onContextMenuHeaderResetClick}

package/front_end/ui/components/data_grid/DataGridControllerIntegrator.ts

@@ -18,8 +18,7 @@ export class DataGridControllerIntegrator extends UI.Widget.VBox {
 
   constructor(data: DataGridControllerData) {
     /**
-     * first true = isWebComponent and tells the widget system it's rendering a
-     * component
+     * first true = useShadowDom and tells the widget system it's using a shadow dom
      * second true = delegatesFocus, which tells the widget system to
      * let the component deal with its own focusing.
      */

package/front_end/ui/components/dialogs/Dialog.ts

@@ -92,7 +92,6 @@ export const MODAL = 'MODAL';
 
 export type DialogOrigin = DialogAnchor|null|(() => DialogAnchor)|typeof MODAL;
 export class Dialog extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-dialog`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   readonly #forceDialogCloseInDevToolsBound = this.#forceDialogCloseInDevToolsMutation.bind(this);
@@ -686,10 +685,8 @@ export class Dialog extends HTMLElement {
     LitHtml.render(html`
       <dialog @click=${this.#handlePointerEvent} @pointermove=${this.#handlePointerEvent} @cancel=${this.#onCancel}
               jslog=${VisualLogging.dialog(this.#props.jslogContext).track({resize: true, keydown: 'Escape'}).parent('mapped')}>
-        <div id="content-wrap">
-          <div id="content">
-            <slot></slot>
-          </div>
+        <div id="content">
+          <slot></slot>
         </div>
       </dialog>
     `, this.#shadow, { host: this });

package/front_end/ui/components/dialogs/IconDialog.ts

@@ -2,17 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+import './Dialog.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import {
-  Dialog as DialogElement,
-  type DialogHorizontalAlignment,
-  type DialogVerticalPosition,
-} from './Dialog.js';
+import type {Dialog as DialogElement, DialogHorizontalAlignment, DialogVerticalPosition} from './Dialog.js';
 import iconDialogStyles from './iconDialog.css.js';
 
 const {html} = LitHtml;
@@ -54,7 +53,6 @@ export interface IconDialogData {
 // This class provides a shorthand for a typical use case of Dialog,
 // i.e. Dialog on an icon.
 export class IconDialog extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-icon-dialog`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
 
@@ -113,14 +111,14 @@ export class IconDialog extends HTMLElement {
                 color: 'var(--icon-default-hover)',
                 width: '16px',
                 height: '16px',
-              } as IconButton.Icon.IconWithName}
+              }}
               jslog=${VisualLogging.close().track({click: true})}
               title=${i18nString(UIStrings.close)}
             ></devtools-icon>
           </div>
         </div>
       `;
-      // clang-format on
+                // clang-format on
     }
 
     // clang-format off
@@ -130,9 +128,9 @@ export class IconDialog extends HTMLElement {
         on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
           this.#icon = node as IconButton.Icon.Icon;
         })}
-        .data=${this.#data.iconData as IconButton.Icon.IconWithName}
+        .data=${this.#data.iconData}
       ></devtools-icon>
-      <${DialogElement.litTagName}
+      <devtools-dialog
         @clickoutsidedialog=${this.#closeDialog}
         .showConnector=${true}
         .origin=${() => {
@@ -153,7 +151,7 @@ export class IconDialog extends HTMLElement {
         <div id='slot-container'>
           <slot></slot>
         </div>
-      </${DialogElement.litTagName}>
+      </devtools-dialog>
     `, this.#shadow, {host: this});
     // clang-format on
   }

package/front_end/ui/components/dialogs/ShortcutDialog.ts

@@ -11,7 +11,7 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import {
   type ClickOutsideDialogEvent,
-  Dialog as DialogElement,
+  type Dialog as DialogElement,
   DialogHorizontalAlignment,
   DialogVerticalPosition,
 } from './Dialog.js';
@@ -62,7 +62,6 @@ export interface ShortcutDialogData {
 }
 
 export class ShortcutDialog extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-shortcut-dialog`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
 
@@ -104,6 +103,10 @@ export class ShortcutDialog extends HTMLElement {
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
   }
 
+  #getKeysFromBinding(binding: string): string[] {
+    return binding.split(/[\s+]+/).map(word => word.trim());  // Split on one or more spaces or + symbols
+  }
+
   #render(): void {
     if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
       throw new Error('Shortcut dialog render was not scheduled');
@@ -123,9 +126,9 @@ export class ShortcutDialog extends HTMLElement {
           title: i18nString(UIStrings.showShortcutTitle),
         } as Buttons.Button.ButtonData}
       ></devtools-button>
-      <${DialogElement.litTagName}
+      <devtools-dialog
+        class="shortcuts-dialog"
         @clickoutsidedialog=${this.#closeDialog}
-        .showConnector=${true}
         .origin=${() => {
           if (!this.#showButton) {
             throw new Error('Button not found');
@@ -143,7 +146,6 @@ export class ShortcutDialog extends HTMLElement {
           <span class="keybinds-category-header-text">${i18nString(UIStrings.dialogTitle)}</span>
           <devtools-button
             @click=${this.#closeDialog}
-            class='close-icon'
             .data=${{
               variant: Buttons.Button.Variant.TOOLBAR,
               iconName: 'cross',
@@ -156,21 +158,20 @@ export class ShortcutDialog extends HTMLElement {
           ${this.#shortcuts.map(shortcut =>
             html`
               <li class="keybinds-list-item">
-                <div class="keybinds-action-name keybinds-list-text">${shortcut.title}</div>
-                ${shortcut.bindings.map((binding, index) =>
-                  html`
-                    <div class="keybinds-shortcut keybinds-list-text">
-                      <span class="keybinds-key">${binding}</span>
-                    </div>
-                    ${shortcut.bindings.at(index + 1) ?
-                      html`<span class="keybinds-shortcut-separator"> - </span>`
-                      : LitHtml.nothing
-                    }
-                `)}
+                <div>${shortcut.title}</div>
+                ${shortcut.bindings.map(binding => {
+                  return html`
+                  <div class="keys-container">
+                    ${this.#getKeysFromBinding(binding).map(key => html`
+                        <span class="keybinds-key">${key}</span>
+                    `)}
+                  </div>
+                `;
+                  })}
               </li>`,
           )}
         </ul>
-      </${DialogElement.litTagName}>
+      </devtools-dialog>
       `,
       this.#shadow, {host: this});
     // clang-format on

package/front_end/ui/components/dialogs/dialog.css

@@ -17,7 +17,6 @@ dialog::backdrop {
 dialog {
   background: transparent;
   border: none;
-  border-radius: 4px;
   top: var(--dialog-top);
   padding: var(--dialog-padding);
   left: var(--dialog-left);
@@ -29,6 +28,7 @@ dialog {
   animation-duration: 100ms;
   animation-timing-function: cubic-bezier(0, 0, 0.3, 1);
   overflow: hidden;
+  filter: drop-shadow(0 4px 8px rgb(0 0 0 / 15%)) drop-shadow(0 1px 3px rgb(0 0 0 / 30%));
 }
 
 dialog:focus,
@@ -39,7 +39,7 @@ dialog:focus-visible {
 #content {
   min-width: var(--content-min-width);
   background: var(--color-background-elevation-dark-only);
-  border-radius: 4px;
+  border-radius: var(--sys-size-5);
   padding-top: var(--content-padding-top);
   padding-bottom: var(--content-padding-bottom);
   box-shadow: var(--override-content-box-shadow);
@@ -50,10 +50,6 @@ dialog:focus-visible {
   clip-path: polygon(var(--content-clip-path));
 }
 
-#content-wrap {
-  filter: drop-shadow(0 1px 2px rgb(60 64 67 / 30%)) drop-shadow(0 2px 0 rgb(60 64 67 / 15%));
-}
-
 @keyframes slideIn {
   from {
     transform: translateY(var(--dialog-offset-y));

package/front_end/ui/components/dialogs/shortcutDialog.css

@@ -4,70 +4,62 @@
  * found in the LICENSE file.
  */
 
-.keybinds-category-header {
+.shortcuts-dialog {
+  /* overwrite 'white-space: pre' in the toolbar item parent element */
   white-space: nowrap;
-  padding: 0 10px 20px;
-  display: flex;
 }
 
-.keybinds-category-header-text {
-  line-height: 24px;
-  flex: auto;
-  font-weight: bold;
+.keybinds-category-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--sys-size-4) var(--sys-size-6) var(--sys-size-6) var(--sys-size-8);
 }
 
-.keybinds-key {
-  padding: 0.1em 0.6em;
-  border: 1px solid var(--sys-color-neutral-outline);
-  font-size: 11px;
-  background-color: var(--sys-color-neutral-container);
-  color: var(--sys-color-on-surface);
-  border-radius: 3px;
-  display: inline-block;
-  margin: 0 0.1em;
-  text-shadow: 0 1px 0 var(--sys-color-cdt-base-container);
-  line-height: 1.5;
-  white-space: nowrap;
+.keybinds-category-header-text {
+  font-size: var(--sys-typescale-body3-size);
+  font-weight: var(--ref-typeface-weight-medium);
 }
 
 .keybinds-list {
-  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sys-size-4);
   margin: 0;
-  padding: 0;
+  padding: 0 var(--sys-size-8);
 }
 
 .keybinds-list-item {
-  line-height: 30px;
   display: flex;
-  padding: 0 10px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 30px;
 }
 
 .keybinds-list-text {
+  font-size: var(--sys-typescale-body4-size);
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   user-select: none;
   color: var(--sys-color-on-surface);
-  text-align: start;
-  position: relative;
-  margin-right: 0;
-}
-
-.keybinds-shortcut-separator {
-  white-space: pre-wrap;
-}
-
-.keybinds-action-name {
-  flex: auto;
-  padding-right: 30px;
 }
 
-.keybinds-shortcut {
-  flex: none;
+.keys-container {
+  display: flex;
+  gap: var(--sys-size-3);
 }
 
-.close-icon {
-  width: 12px;
-  height: 12px;
-  padding-top: 2px;
+.keybinds-key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: var(--sys-size-4);
+  min-width: var(--sys-size-11);
+  height: var(--sys-size-11);
+  font: var(--sys-typescale-body5-medium);
+  white-space: nowrap;
+  border-radius: var(--sys-shape-corner-small);
+  background: var(--sys-color-tonal-container);
 }

package/front_end/ui/components/diff_view/DiffView.ts

@@ -267,7 +267,6 @@ export type DiffViewData = {
 };
 
 export class DiffView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-diff-view`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   loaded: Promise<void>;

package/front_end/ui/components/docs/building-ui-documentation/ComponentPerformance.md

@@ -80,10 +80,7 @@ set y(y: number) {
 }
 ```
 
-We did this for two reasons:
-
-1. We can provide _some_ type-safety via `.data=${{x: 1, y: 2} as FooData}`.
-2. We avoided having to immediately implement batched rendering.
+We did this to avoid having to immediately implement batched rendering.
 
 However, this decision came with a performance penalty. Lit will only trigger a re-render of a component if one of its properties changes. But when we pass in a new object on each render, we are effectively triggering a re-render every time. Normally this impact isn't noticable, and most components don't re-render with the frequency required to cause performance issues. When a component that takes an object via `set data()` is frequently re-rendered, that causes a non-negligible amount of garbage collection to tidy up the one-use objects we create.
 

package/front_end/ui/components/docs/building-ui-documentation/CreatingComponents.md

@@ -25,18 +25,7 @@ front_end/ui/components/button/Button.ts // component definition
 
 ## Defining and naming a component
 
-A component should be given a `static readonly litTagName` property, which defines its name:
-
-```ts
-// ElementBreadcrumbs.ts
-export class ElementBreadcrumbs extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-elements-breadcrumbs`;
-}
-```
-
-> Remember that all custom elements **must** contain a hyphen. Prefer `devtools-` as the prefix by default.
-
-We then use the `ComponentHelpers` module (`front_end/ui/components/helpers`) to define the component and register it with the browser:
+All custom elements **must** contain a hyphen. Use `devtools-` as the prefix.  Use `customElements.define` to define the component and register it with the browser:
 
 ```ts
 customElements.define('devtools-elements-breadcrumbs', ElementsBreadcrumbs);
@@ -54,7 +43,7 @@ declare global {
 
 By doing this, TypeScript understands that `document.querySelector('devtools-elements-breadcrumbs')` returns an `ElementsBreadcrumbs` instance.
 
-We have a custom ESLint rule that ensures that the tag name is used consistently in all the locations where it is required.
+We use lit-analyzer in a lint state to verify that component definitions are imported where the component is used.
 
 ## Creating a shadow root
 
@@ -62,7 +51,6 @@ Each component gets its own Shadow Root to ensure that styles and events that oc
 
 ```ts
 export class ElementsBreadcrumbs extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-elements-breadcrumbs`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 }
 ```
@@ -78,7 +66,7 @@ Each component defines a `#render` method which is responsible for invoking LitH
 The `#render` method calls `LitHtml.render`, building up a template with `LitHtml.html`:
 
 ```ts
-LitHtml.render(LitHtml.html`<p>hello world!</p>`, this.#shadow, {host: this});
+LitHtml.render(html`<p>hello world!</p>`, this.#shadow, {host: this});
 ```
 
 The third argument (`{host: this}`) tells LitHtml to automatically bind event listeners to the component. This can save you some painful debugging where event listeners do not have the right `this` reference; so we enforce the use of `{host: this}` via a custom ESLint rule.
@@ -99,7 +87,6 @@ We can use the `ScheduledRender` helper (`front_end/ui/components/helpers/schedu
 
 ```ts
 export class ElementsBreadcrumbs extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-chrome-link`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 }
@@ -117,12 +104,11 @@ To summarise, most components start off life looking like:
 
 ```ts
 export class ElementsBreadcrumbs extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-chrome-link`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 
   #render(): void {
-    LitHtml.render(LitHtml.html``, this.#shadow, {host:this});
+    LitHtml.render(html``, this.#shadow, {host:this});
   }
 }
 ```
@@ -135,7 +121,6 @@ To ensure we trigger a render once the component is added to the DOM, we can def
 
 ```ts
 export class ElementsBreadcrumbs extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-chrome-link`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 
@@ -144,7 +129,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
   }
 
   #render(): void {
-    LitHtml.render(LitHtml.html``, this.#shadow, {host:this});
+    LitHtml.render(html``, this.#shadow, {host:this});
   }
 }
 ```
@@ -191,12 +176,12 @@ this.appendChild(breadcrumbs);
 
 ### From another component
 
-If you are rendering a component from within another component, render it within the call to `LitHtml.html` and use the static `litTagName` property:
+If you are rendering a component from within another component, import the module defining it and render within the call to `LitHtml.html`:
 
 ```ts
 // Within some component
-LitHtml.render(LitHtml.html`
-  <${ElementsBreadcrumbs.litTagName}></${ElementsBreadcrumbs>
+LitHtml.render(html`
+  <devtools-elements-breadcrumbs></devtools-elements-breadcrumbs>
 `, this.#shadow, {host: this});
 ```
 
@@ -204,30 +189,15 @@ To pass data, we use [LitHtml's dot syntax](https://lit.dev/docs/templates/expre
 
 ```ts
 // Within some component
-LitHtml.render(LitHtml.html`
-  <${ElementsBreadcrumbs.litTagName} .data=${{
+LitHtml.render(html`
+  <devtools-elements-breadcrumbs .data=${{
     selectedNode: node,
     crumbs: [...],
   }}>
-  </${ElementsBreadcrumbs>
+  </devtools-elements-breadcrumbs>
 `, this.#shadow, {host: this});
 ```
 
-To enforce some type safety, we also use TypeScript's `as` keyword to force the compiler to type-check the `data` object against the interface:
-
-```ts
-// Within some component
-LitHtml.render(LitHtml.html`
-  <${ElementsBreadcrumbs.litTagName} .data=${{
-    selectedNode: node,
-    crumbs: [...],
-  } as ElementsBreadcrumbsData}>
-  </${ElementsBreadcrumbs>
-`, this.#shadow, {host: this});
-```
-
-This type-checking requirement is enforced by an ESLint rule.
-
 ## Performance concerns with data passing
 
 The approach of `set data(data)` was chosen because:
@@ -271,9 +241,9 @@ Rendering this component within another Lit component would now be done like so:
 
 ```ts
 // Within some component
-LitHtml.render(LitHtml.html`
-  <${ElementsBreadcrumbs.litTagName} .crumbs=${[...]} .selectedNode=${node}>
-  </${ElementsBreadcrumbs>
+LitHtml.render(html`
+  <devtools-elements-breadcrumbs .crumbs=${[...]} .selectedNode=${node}>
+  </devtools-elements-breadcrumbs>
 `, this.#shadow, {host: this});
 ```
 

package/front_end/ui/components/docs/freestyler/basic.ts

@@ -4,8 +4,6 @@
 
 import * as Host from '../../../../core/host/host.js';
 import type * as SDK from '../../../../core/sdk/sdk.js';
-import type * as Trace from '../../../../models/trace/trace.js';
-import type * as Workspace from '../../../../models/workspace/workspace.js';
 import * as Freestyler from '../../../../panels/freestyler/freestyler.js';
 import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
 import * as ComponentHelpers from '../../helpers/helpers.js';
@@ -22,7 +20,6 @@ const messages: Freestyler.ChatMessage[] = [
   },
   {
     entity: Freestyler.ChatMessageEntity.MODEL,
-    suggestions: [],
     steps: [
       {
         isLoading: false,
@@ -46,20 +43,20 @@ const component = new Freestyler.FreestylerChatUi({
   onInspectElementClick: noop,
   onFeedbackSubmit: noop,
   onCancelClick: noop,
-  onSelectedNetworkRequestClick: noop,
-  onSelectedFileRequestClick: noop,
+  onContextClick: noop,
+  onNewConversation: noop,
   inspectElementToggled: false,
   state: Freestyler.State.CHAT_VIEW,
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
   messages,
-  selectedElement: {} as unknown as SDK.DOMModel.DOMNode,
-  selectedFile: {} as unknown as Workspace.UISourceCode.UISourceCode,
-  selectedNetworkRequest: {} as unknown as SDK.NetworkRequest.NetworkRequest,
-  selectedStackTrace: {} as unknown as Trace.Helpers.TreeHelpers.TraceEntryNodeForAI,
+  selectedContext: new Freestyler.NodeContext({} as unknown as SDK.DOMModel.DOMNode),
   agentType: Freestyler.AgentType.FREESTYLER,
   isLoading: false,
   canShowFeedbackForm: false,
   userInfo: {},
+  blockedByCrossOrigin: false,
+  isReadOnly: false,
+  stripLinks: false,
 });
 
 document.getElementById('container')?.appendChild(component);

package/front_end/ui/components/docs/freestyler/empty_state.ts

@@ -4,8 +4,6 @@
 
 import * as Host from '../../../../core/host/host.js';
 import type * as SDK from '../../../../core/sdk/sdk.js';
-import type * as Trace from '../../../../models/trace/trace.js';
-import type * as Workspace from '../../../../models/workspace/workspace.js';
 import * as Freestyler from '../../../../panels/freestyler/freestyler.js';
 import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
 import * as ComponentHelpers from '../../helpers/helpers.js';
@@ -20,20 +18,20 @@ const component = new Freestyler.FreestylerChatUi({
   onInspectElementClick: noop,
   onFeedbackSubmit: noop,
   onCancelClick: noop,
-  onSelectedNetworkRequestClick: noop,
-  onSelectedFileRequestClick: noop,
+  onContextClick: noop,
+  onNewConversation: noop,
   inspectElementToggled: false,
   state: Freestyler.State.CHAT_VIEW,
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
   messages: [],
-  selectedElement: {} as unknown as SDK.DOMModel.DOMNode,
-  selectedFile: {} as unknown as Workspace.UISourceCode.UISourceCode,
-  selectedNetworkRequest: {} as unknown as SDK.NetworkRequest.NetworkRequest,
-  selectedStackTrace: {} as unknown as Trace.Helpers.TreeHelpers.TraceEntryNodeForAI,
+  selectedContext: new Freestyler.NodeContext({} as unknown as SDK.DOMModel.DOMNode),
   agentType: Freestyler.AgentType.FREESTYLER,
   isLoading: false,
   canShowFeedbackForm: false,
   userInfo: {},
+  blockedByCrossOrigin: false,
+  isReadOnly: false,
+  stripLinks: false,
 });
 
 document.getElementById('container')?.appendChild(component);