chrome-devtools-frontend 1.0.1605390 → 1.0.1606789

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -8,7 +8,6 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
@@ -832,7 +831,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
 
   inspectedObjectChanged(
       event: Common.EventTarget.EventTargetEvent<DataGrid.DataGrid.DataGridNode<HeapSnapshotGridNode>>): void {
-    const selectedNode = (event.data as HeapSnapshotGridNode);
+    const selectedNode = event.data;
     const heapProfilerModel = this.profile.heapProfilerModel();
     if (heapProfilerModel && selectedNode instanceof HeapSnapshotGenericObjectNode) {
       void heapProfilerModel.addInspectedHeapObject(
@@ -1339,12 +1338,10 @@ export class HeapSnapshotProfileType extends
   }
 
   override customContent(): Element|null {
-    const showOptionToExposeInternalsInHeapSnapshot = Root.Runtime.experiments.isEnabled(
-        Root.ExperimentNames.ExperimentName.SHOW_OPTION_TO_EXPOSE_INTERNALS_IN_HEAP_SNAPSHOT);
     const exposeInternalsInHeapSnapshotCheckbox =
         SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.exposeInternals), this.exposeInternals);
     this.customContentInternal = exposeInternalsInHeapSnapshotCheckbox;
-    return showOptionToExposeInternalsInHeapSnapshot ? exposeInternalsInHeapSnapshotCheckbox : null;
+    return exposeInternalsInHeapSnapshotCheckbox;
   }
 
   override setCustomContentEnabled(enable: boolean): void {
@@ -1809,9 +1806,7 @@ export class HeapProfileHeader extends ProfileHeader {
         return;
       }
       if (this.tempFile) {
-        const error = (await this.tempFile.copyToOutputStream(fileOutputStream, this.onChunkTransferred.bind(this)) as {
-          message: string,
-        } | null);
+        const error = await this.tempFile.copyToOutputStream(fileOutputStream, this.onChunkTransferred.bind(this));
         if (error) {
           Common.Console.Console.instance().error('Failed to read heap snapshot from temp file: ' + error.message);
         }
@@ -1841,15 +1836,11 @@ export class HeapProfileHeader extends ProfileHeader {
     this.setupWorker();
     const reader = new Bindings.FileUtils.ChunkedFileReader(file, 10000000);
     const success = await reader.read((this.receiver as Common.StringOutputStream.OutputStream));
-    if (!success) {
-      const error = (reader.error() as {
-        message: string,
-      } | null);
-      if (error) {
-        this.updateStatus(error.message);
-      }
+    const error = reader.error();
+    if (!success && error) {
+      this.updateStatus(error.message);
     }
-    return success ? null : reader.error();
+    return success ? null : error;
   }
 
   override profileType(): HeapSnapshotProfileType {

package/front_end/panels/profiler/ProfileHeader.ts

@@ -156,10 +156,7 @@ export class ProfileType extends Common.ObjectWrapper.ObjectWrapper<ProfileEvent
   }
 
   getProfiles(): ProfileHeader[] {
-    function isFinished(this: ProfileType, profile: ProfileHeader): boolean {
-      return this.#profileBeingRecorded !== profile;
-    }
-    return this.profiles.filter(isFinished.bind(this));
+    return this.profiles.filter(profile => this.#profileBeingRecorded !== profile);
   }
 
   customContent(): Element|null {

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -675,28 +675,33 @@ type InfoWidgetView = (input: InfoWidgetViewInput, output: undefined, target: HT
 
 const INFO_WIDGET_VIEW: InfoWidgetView = (input, _output, target) => {
   // clang-format off
-  render(widget(UI.TabbedPane.TabbedPane, {
-    tabs: [
-      {
-        id: 'request',
-        title: i18nString(UIStrings.request),
-        view: input.type === undefined ?
-            new UI.EmptyWidget.EmptyWidget(
-                i18nString(UIStrings.noMessageSelected), i18nString(UIStrings.selectAMessageToView)) :
-            SourceFrame.JSONView.JSONView.createViewSync(input.request || null),
-        enabled: input.type === 'sent',
-        selected: input.selectedTab === 'request',
-      },
-      {
-        id: 'response',
-        title: i18nString(UIStrings.response),
-        view: input.type === undefined ?
-            new UI.EmptyWidget.EmptyWidget(
-                i18nString(UIStrings.noMessageSelected), i18nString(UIStrings.selectAMessageToView)) :
-            SourceFrame.JSONView.JSONView.createViewSync(input.response || null),
-        selected: input.selectedTab === 'response',
-      }
-    ]}), target);
+  render(html`
+    <devtools-tabbed-pane>${input.type === undefined ? html`
+      <devtools-widget
+          id="request" title=${i18nString(UIStrings.request)}
+          ?selected=${input.selectedTab === 'request'} disabled
+          ${widget(UI.EmptyWidget.EmptyWidget, {
+              header: i18nString(UIStrings.noMessageSelected),
+              text: i18nString(UIStrings.selectAMessageToView)})}>
+      </devtools-widget>
+      <devtools-widget
+          id="response" title=${i18nString(UIStrings.response)}
+          ?selected=${input.selectedTab === 'response'}
+          ${widget(UI.EmptyWidget.EmptyWidget, {
+              header: i18nString(UIStrings.noMessageSelected),
+              text: i18nString(UIStrings.selectAMessageToView)})}>
+      </devtools-widget>`: html`
+      <devtools-widget
+          id="request" title=${i18nString(UIStrings.request)}
+          ?selected=${input.selectedTab === 'request'} ?disabled=${input.type !== 'sent'}
+          ${widget(SourceFrame.JSONView.SearchableJsonView, {jsonObject: input.request})}>
+      </devtools-widget>
+      <devtools-widget
+          id="response" title=${i18nString(UIStrings.response)}
+          ?selected=${input.selectedTab === 'response'}
+          ${widget(SourceFrame.JSONView.SearchableJsonView, {jsonObject: input.response})}>
+      </devtools-widget>`}
+    </devtools-tabbed-pane>`, target);
   // clang-format on
 };
 

package/front_end/panels/timeline/TimelinePanel.ts

@@ -54,7 +54,6 @@ import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as Tracing from '../../services/tracing/tracing.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
-import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import {Link} from '../../ui/kit/kit.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
@@ -311,10 +310,6 @@ const UIStrings = {
    * @description Title of the shortcuts dialog shown to the user that lists keyboard shortcuts.
    */
   shortcutsDialogTitle: 'Keyboard shortcuts for flamechart',
-  /**
-   * @description Notification shown to the user whenever DevTools receives an external request.
-   */
-  externalRequestReceived: '`DevTools` received an external request',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelinePanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -407,7 +402,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private traceLoadStart!: Trace.Types.Timing.Milli|null;
 
   #traceEngineModel: Trace.TraceModel.Model;
-  #externalAIConversationData: AiAssistanceModel.ConversationHandler.ExternalPerformanceAIConversationData|null = null;
   #sourceMapsResolver: SourceMapsResolver.SourceMapsResolver|null = null;
   #entityMapper: Trace.EntityMapper.EntityMapper|null = null;
   #onSourceMapsNodeNamesResolvedBound = this.#onSourceMapsNodeNamesResolved.bind(this);
@@ -976,39 +970,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     return this.#traceEngineModel;
   }
 
-  getOrCreateExternalAIConversationData(): AiAssistanceModel.ConversationHandler.ExternalPerformanceAIConversationData {
-    if (!this.#externalAIConversationData) {
-      const conversationHandler = AiAssistanceModel.ConversationHandler.ConversationHandler.instance();
-      const focus = AiAssistanceModel.AIContext.getPerformanceAgentFocusFromModel(this.model);
-      if (!focus) {
-        throw new Error('could not create performance agent focus');
-      }
-
-      const conversation = new AiAssistanceModel.AiConversation.AiConversation({
-        type: AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE,
-        data: [],
-        isReadOnly: true,
-        aidaClient: conversationHandler.aidaClient,
-        isExternal: true,
-      });
-
-      const selected = new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(focus);
-      selected.external = true;
-
-      this.#externalAIConversationData = {
-        conversationHandler,
-        conversation,
-        selected,
-      };
-    }
-
-    return this.#externalAIConversationData;
-  }
-
-  invalidateExternalAIConversationData(): void {
-    this.#externalAIConversationData = null;
-  }
-
   /**
    * NOTE: this method only exists to enable some layout tests to be migrated to the new engine.
    * DO NOT use this method within DevTools. It is marked as deprecated so
@@ -3102,120 +3063,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     return trace;
   }
 
-  static async *
-      handleExternalRecordRequest(): AsyncGenerator<
-          AiAssistanceModel.AiAgent.ExternalRequestResponse, AiAssistanceModel.AiAgent.ExternalRequestResponse> {
-    yield {
-      type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.NOTIFICATION,
-      message: 'Recording performance trace',
-    };
-    TimelinePanel.instance().invalidateExternalAIConversationData();
-    void VisualLogging.logFunctionCall('timeline.record-reload', 'external');
-    Snackbars.Snackbar.Snackbar.show({message: i18nString(UIStrings.externalRequestReceived)});
-
-    const panelInstance = TimelinePanel.instance();
-    // Given how the current UX works, it's nice to show the user the Perf
-    // Panel so they see what's happening
-    await UI.ViewManager.ViewManager.instance().showView('timeline');
-
-    function onRecordingCompleted(eventData: EventTypes[Events.RECORDING_COMPLETED]):
-        AiAssistanceModel.AiAgent.ExternalRequestResponse {
-      if ('errorText' in eventData) {
-        return {
-          type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR,
-          message: `Error running the trace: ${eventData.errorText}`,
-        };
-      }
-
-      const parsedTrace = panelInstance.model.parsedTrace(eventData.traceIndex);
-      if (!parsedTrace || !parsedTrace.insights || parsedTrace.insights.size === 0) {
-        return {
-          type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR,
-          message: 'The trace was loaded successfully but no Insights were detected.',
-        };
-      }
-
-      const insightSetId = Array.from(parsedTrace.insights.keys()).find(k => k !== 'NO_NAVIGATION');
-      if (!insightSetId) {
-        return {
-          type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR,
-          message: 'The trace was loaded successfully but no navigation was detected.',
-        };
-      }
-
-      const insightsForNav = parsedTrace.insights.get(insightSetId);
-      if (!insightsForNav) {
-        return {
-          type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR,
-          message: 'The trace was loaded successfully but no Insights were detected.',
-        };
-      }
-
-      let responseTextForNonPassedInsights = '';
-      // We still return info on the passed insights, but we put it at the
-      // bottom of the response under a heading.
-      let responseTextForPassedInsights = '';
-
-      // TODO(b/442392194): use PerformanceTraceFormatter summary instead.
-      for (const insight of Object.values(insightsForNav.model)) {
-        const focus = AiAssistanceModel.AIContext.AgentFocus.fromParsedTrace(parsedTrace);
-        const formatter = new AiAssistanceModel.PerformanceInsightFormatter.PerformanceInsightFormatter(focus, insight);
-        if (!formatter.insightIsSupported()) {
-          // Not all Insights are integrated with "Ask AI" yet, let's avoid
-          // filling up the response with those ones because there will be no
-          // useful information.
-          continue;
-        }
-
-        const formatted = formatter.formatInsight({headingLevel: 3});
-
-        if (insight.state === 'pass') {
-          responseTextForPassedInsights += `${formatted}\n\n`;
-          continue;
-        } else {
-          responseTextForNonPassedInsights += `${formatted}\n\n`;
-        }
-      }
-
-      const finalText = `# Trace recording results
-
-## Non-passing insights:
-
-These insights highlight potential problems and opportunities to improve performance.
-${responseTextForNonPassedInsights}
-
-## Passing insights:
-
-These insights are passing, which means they are not considered to highlight considerable performance problems.
-${responseTextForPassedInsights}`;
-
-      return {
-        type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ANSWER,
-        message: finalText,
-        devToolsLogs: [],
-      };
-    }
-
-    return await new Promise(resolve => {
-      function listener(e: Common.EventTarget.EventTargetEvent<EventTypes[Events.RECORDING_COMPLETED]>): void {
-        resolve(onRecordingCompleted(e.data));
-        panelInstance.removeEventListener(Events.RECORDING_COMPLETED, listener);
-      }
-      panelInstance.addEventListener(Events.RECORDING_COMPLETED, listener);
-
-      panelInstance.recordReload();
-    });
-  }
-
-  static async handleExternalAnalyzeRequest(prompt: string): Promise<AsyncGenerator<
-      AiAssistanceModel.AiAgent.ExternalRequestResponse, AiAssistanceModel.AiAgent.ExternalRequestResponse>> {
-    const data = TimelinePanel.instance().getOrCreateExternalAIConversationData();
-    return await data.conversationHandler.handleExternalRequest({
-      conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE,
-      prompt,
-      data,
-    });
-  }
 }
 
 export const enum State {

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -200,6 +200,7 @@ export class TimelineTreeView extends
   // Compact mode is used to render the tree view in a more compact UI,
   // suitable for AI assistance widgets. It removes sidebars and toolbars.
   #compactMode = false;
+  #maxLinkLength: number|undefined = undefined;
 
   /**
    * Determines if the first child in the data grid will be selected
@@ -272,6 +273,14 @@ export class TimelineTreeView extends
     }
   }
 
+  get maxLinkLength(): number|undefined {
+    return this.#maxLinkLength;
+  }
+
+  set maxLinkLength(maxLinkLength: number|undefined) {
+    this.#maxLinkLength = maxLinkLength;
+  }
+
   #applyCompactMode(): void {
     if (this.#compactMode && this.dataGrid) {
       this.splitWidget?.detach();
@@ -900,7 +909,8 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
       const linkifier = this.treeView.linkifier;
       const isFreshOrEnhanced =
           Boolean(parsedTrace && Tracing.FreshRecording.Tracker.instance().recordingIsFreshOrEnhanced(parsedTrace));
-      this.linkElement = TimelineUIUtils.linkifyTopCallFrame(event, target, linkifier, isFreshOrEnhanced);
+      const maxLength = this.treeView.maxLinkLength;
+      this.linkElement = TimelineUIUtils.linkifyTopCallFrame(event, target, linkifier, isFreshOrEnhanced, maxLength);
       if (this.linkElement) {
         container.createChild('div', 'activity-link').appendChild(this.linkElement);
       }

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -785,7 +785,7 @@ export class TimelineUIUtils {
 
   static linkifyTopCallFrame(
       event: Trace.Types.Events.Event, target: SDK.Target.Target|null, linkifier: LegacyComponents.Linkifier.Linkifier,
-      isFreshOrEnhanced = false): Element|null {
+      isFreshOrEnhanced = false, maxLength?: number): Element|null {
     let frame = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event)?.[0];
     if (Trace.Types.Events.isProfileCall(event)) {
       frame = event.callFrame;
@@ -800,6 +800,7 @@ export class TimelineUIUtils {
       showColumnNumber: true,
       columnNumber: frame.columnNumber,
       lineNumber: frame.lineNumber,
+      maxLength,
     };
     if (isFreshOrEnhanced) {
       return linkifier.maybeLinkifyConsoleCallFrame(target, frame, {showColumnNumber: true, inlineFrameIndex: 0});

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: c9e49d7cdbbc11a6a70bb2573f5a18cb23c1789b
+Revision: ed66cb5e93e6205f5231c1dcfac9b91b2aa4ffd6
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/markdown_view/CodeBlock.ts

@@ -34,6 +34,11 @@ const UIStrings = {
    * @description Disclaimer shown in the code blocks.
    */
   disclaimer: 'Use code snippets with caution',
+  /**
+   * @description The title of the button to show all lines of a code block.
+   * @example {5} PH1
+   */
+  showAllLines: 'Show all lines ({PH1} more)',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/components/markdown_view/CodeBlock.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -130,6 +135,7 @@ export class CodeBlock extends HTMLElement {
   #copied = false;
   #editorState?: CodeMirror.EditorState;
   #languageConf = new CodeMirror.Compartment();
+  #truncationConf = new CodeMirror.Compartment();
   /**
    * Whether to display a notice "​​Use code snippets with caution" in code
    * blocks.
@@ -138,6 +144,7 @@ export class CodeBlock extends HTMLElement {
   #header?: string;
   #showCopyButton = true;
   #citations: Citation[] = [];
+  #displayLimit = Number.MAX_VALUE;
 
   connectedCallback(): void {
     void this.#render();
@@ -152,6 +159,7 @@ export class CodeBlock extends HTMLElement {
         CodeMirror.EditorState.readOnly.of(true),
         CodeMirror.EditorView.lineWrapping,
         this.#languageConf.of(CodeMirror.javascript.javascript()),
+        this.#truncationConf.of([]),
       ],
     });
     void this.#render();
@@ -190,6 +198,15 @@ export class CodeBlock extends HTMLElement {
     this.#citations = citations;
   }
 
+  set displayLimit(value: number) {
+    this.#displayLimit = value;
+    void this.#render();
+  }
+
+  get displayLimit(): number {
+    return this.#displayLimit;
+  }
+
   #onCopy(): void {
     UI.UIUtils.copyTextToClipboard(this.#code, i18nString(UIStrings.copied));
     this.#copied = true;
@@ -256,6 +273,9 @@ export class CodeBlock extends HTMLElement {
       throw new Error('Unexpected: trying to render the text editor without editorState');
     }
 
+    const linesCount = this.#editorState.doc.lines;
+    const isTruncated = linesCount > this.#displayLimit;
+
     // clang-format off
     Lit.render(
       html`<div class='codeblock' jslog=${VisualLogging.section('code')}>
@@ -271,6 +291,19 @@ export class CodeBlock extends HTMLElement {
         <div class="code">
           <devtools-text-editor .state=${this.#editorState}></devtools-text-editor>
         </div>
+        ${isTruncated ? html`
+          <div class="show-all-container">
+            <devtools-button
+              .variant=${Buttons.Button.Variant.OUTLINED}
+              .size=${Buttons.Button.Size.SMALL}
+              .jslogContext=${'show-all'}
+              .title=${i18nString(UIStrings.showAllLines, { PH1: linesCount - this.#displayLimit })}
+              @click=${() => {
+              this.displayLimit = Number.MAX_VALUE;
+            }}
+            >${i18nString(UIStrings.showAllLines, { PH1: linesCount - this.#displayLimit })}</devtools-button>
+          </div>
+        ` : Lit.nothing}
       </div>
       ${this.#displayNotice ? this.#renderNotice() : Lit.nothing}
     </div>`,
@@ -288,8 +321,21 @@ export class CodeBlock extends HTMLElement {
     }
 
     const language = await languageFromToken(this.#codeLang);
+    let truncationExtension: CodeMirror.Extension = [];
+    if (isTruncated) {
+      truncationExtension = CodeMirror.EditorView.decorations.of(CodeMirror.Decoration.set(
+          CodeMirror.Decoration.replace({}).range(
+              this.#editorState.doc.line(this.#displayLimit).to,
+              this.#editorState.doc.length,
+              ),
+          ));
+    }
+
     editor.dispatch({
-      effects: this.#languageConf.reconfigure(language),
+      effects: [
+        this.#languageConf.reconfigure(language),
+        this.#truncationConf.reconfigure(truncationExtension),
+      ],
     });
   }
 }

package/front_end/ui/components/markdown_view/codeBlock.css

@@ -108,3 +108,11 @@
     text-decoration-line: underline;
   }
 }
+
+.show-all-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--sys-size-4) 0;
+  background-color: var(--code-block-background-color); /* stylelint-disable-line plugin/use_theme_colors */
+}

package/front_end/ui/legacy/TabbedPane.ts

@@ -4,8 +4,6 @@
 
 /* eslint-disable @devtools/no-imperative-dom-api, @devtools/no-lit-render-outside-of-view */
 
-import './Toolbar.js';
-
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
@@ -22,7 +20,7 @@ import tabbedPaneStyles from './tabbedPane.css.js';
 import type {Toolbar} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {installDragHandle} from './UIUtils.js';
-import {VBox, type Widget} from './Widget.js';
+import {registerWidgetConfig, VBox, Widget, widgetConfig, WidgetElement} from './Widget.js';
 import {Events as ZoomManagerEvents, ZoomManager} from './ZoomManager.js';
 
 const UIStrings = {
@@ -123,7 +121,26 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.contentElement.tabIndex = -1;
     this.setDefaultFocusedElement(this.contentElement);
     this.#headerElement = this.contentElement.createChild('div', 'tabbed-pane-header');
+    const leftSlot = document.createElement('slot');
+    leftSlot.name = 'left';
+    leftSlot.classList.add('tabbed-pane-left-toolbar');
+    this.#headerElement.appendChild(leftSlot);
+    leftSlot.addEventListener('slotchange', () => {
+      this.#leftToolbar = leftSlot.assignedElements()[0] as Toolbar | undefined;
+      this.requestUpdate();
+    });
+
     this.headerContentsElement = this.#headerElement.createChild('div', 'tabbed-pane-header-contents');
+
+    const rightSlot = document.createElement('slot');
+    rightSlot.name = 'right';
+    rightSlot.classList.add('tabbed-pane-right-toolbar');
+    this.#headerElement.appendChild(rightSlot);
+    rightSlot.addEventListener('slotchange', () => {
+      this.#rightToolbar = rightSlot.assignedElements()[0] as Toolbar | undefined;
+      this.requestUpdate();
+    });
+
     this.tabSlider = document.createElement('div');
     this.tabSlider.classList.add('tabbed-pane-tab-slider');
     this.tabsElement = this.headerContentsElement.createChild('div', 'tabbed-pane-header-tabs');
@@ -547,6 +564,9 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
       if (existingTab) {
         this.changeTabView(tab.id, tab.view);
         this.changeTabTitle(tab.id, tab.title, tab.tabTooltip);
+        if (tab.jslogContext !== undefined) {
+          existingTab.jslogContext = tab.jslogContext;
+        }
         if (tab.isCloseable !== undefined) {
           existingTab.closeable = tab.isCloseable;
         }
@@ -1031,6 +1051,10 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   leftToolbar(): Toolbar {
+    if (!this.#leftToolbar) {
+      const leftSlot = this.#headerElement.querySelector('slot[name="left"]') as HTMLSlotElement | null;
+      this.#leftToolbar = leftSlot?.assignedElements()[0] as Toolbar | undefined;
+    }
     if (!this.#leftToolbar) {
       this.#leftToolbar = document.createElement('devtools-toolbar');
       this.#leftToolbar.classList.add('tabbed-pane-left-toolbar');
@@ -1040,6 +1064,10 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   rightToolbar(): Toolbar {
+    if (!this.#rightToolbar) {
+      const rightSlot = this.#headerElement.querySelector('slot[name="right"]') as HTMLSlotElement | null;
+      this.#rightToolbar = rightSlot?.assignedElements()[0] as Toolbar | undefined;
+    }
     if (!this.#rightToolbar) {
       this.#rightToolbar = document.createElement('devtools-toolbar');
       this.#rightToolbar.classList.add('tabbed-pane-right-toolbar');
@@ -1191,6 +1219,10 @@ export class TabbedPaneTab {
     return this.#jslogContext ?? (this.#id === 'console-view' ? 'console' : this.#id);
   }
 
+  set jslogContext(jslogContext: string|undefined) {
+    this.#jslogContext = jslogContext;
+  }
+
   get tabAnnotationIcon(): boolean {
     return this.#tabAnnotationIcon;
   }
@@ -1614,3 +1646,91 @@ export interface TabbedPaneTabDelegate {
   closeTabs(tabbedPane: TabbedPane, ids: string[]): void;
   onContextMenu(tabId: string, contextMenu: ContextMenu): void;
 }
+
+export class TabbedPaneElement extends WidgetElement<TabbedPane> {
+  readonly #tabObserver = new MutationObserver(() => this.#updateTabs());
+
+  constructor() {
+    super();
+
+    registerWidgetConfig(this, widgetConfig(element => {
+                           const widget = new TabbedPane(element as TabbedPaneElement);
+                           const slot = widget.contentElement.querySelector('slot:not([name])');
+                           if (slot) {
+                             slot.addEventListener('slotchange', () => this.#syncTabs());
+                           }
+                           widget.addEventListener(Events.TabSelected, () => {
+                             const slot =
+                                 widget.contentElement.querySelector('slot:not([name])') as HTMLSlotElement | null;
+                             const nodes = slot ? slot.assignedElements() : [];
+                             for (const child of nodes) {
+                               if (child.id === widget.selectedTabId) {
+                                 child.setAttribute('selected', '');
+                               } else {
+                                 child.removeAttribute('selected');
+                               }
+                             }
+                           });
+                           this.#syncTabs(widget);
+                           return widget;
+                         }));
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.#tabObserver.disconnect();
+  }
+
+  #syncTabs(widget = this.getWidget()): void {
+    if (!widget) {
+      return;
+    }
+    this.#updateObserver(widget);
+    this.#updateTabs(widget);
+  }
+
+  #updateObserver(widget: TabbedPane): void {
+    this.#tabObserver.disconnect();
+    const slot = widget.contentElement.querySelector('slot:not([name])') as HTMLSlotElement | null;
+    const nodes = slot ? slot.assignedElements() : [];
+    for (const child of nodes) {
+      this.#tabObserver.observe(
+          child, {attributes: true, attributeFilter: ['title', 'jslogcontext', 'selected', 'disabled']});
+    }
+  }
+
+  #updateTabs(widget = this.getWidget()): void {
+    if (!widget) {
+      return;
+    }
+    const tabs: TabInfo[] = [];
+    const slot = widget.contentElement.querySelector('slot:not([name])') as HTMLSlotElement | null;
+    const nodes = slot ? slot.assignedElements() : [];
+    for (const child of nodes) {
+      const id = child.id;
+      const title = child.getAttribute('title') || '';
+      const jslogContext = child.getAttribute('jslogcontext') || undefined;
+      const selected = child.hasAttribute('selected');
+      const enabled = !child.hasAttribute('disabled');
+      const view = Widget.getOrCreateWidget(child as HTMLElement);
+      view.setHideOnDetach();
+      if (widget.selectedTabId !== id) {
+        view.hideWidget();
+      } else {
+        view.showWidget();
+      }
+      tabs.push({
+        id,
+        title,
+        view,
+        jslogContext,
+        selected,
+        enabled,
+      });
+    }
+
+    widget.tabs = tabs;
+  }
+}
+
+customElements.define('devtools-tabbed-pane', TabbedPaneElement);