chrome-devtools-frontend 1.0.1669021 → 1.0.1672557

package/front_end/panels/sources/SourcesView.ts

@@ -13,11 +13,10 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import {createIcon} from '../../ui/kit/kit.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {render} from '../../ui/lit/lit.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as Components from './components/components.js';
@@ -56,11 +55,78 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/SourcesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+export interface Shortcut {
+  description: string;
+  onClick: () => void;
+  keys: string[];
+}
+
+export interface ViewInput {
+  placeholderElement: HTMLElement;
+  scriptViewToolbar: UI.Toolbar.Toolbar;
+  bottomToolbar: UI.Toolbar.Toolbar;
+  leftToolbarItems: UI.Toolbar.ToolbarItem[];
+  rightToolbarItems: UI.Toolbar.ToolbarItem[];
+  searchableView: UI.SearchableView.SearchableView;
+  editorContainer: TabbedEditorContainer;
+  shortcuts: Shortcut[];
+}
+
+export interface ViewOutput {
+  onSelectFolderClicked: () => void;
+}
+
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
+  render(html`
+    <devtools-widget class="vbox flex-auto" ${UI.Widget.widget(() => input.searchableView)}>
+      <devtools-widget class="vbox flex-auto" ${UI.Widget.widget(() => input.editorContainer.view)}>
+      </devtools-widget>
+    </devtools-widget>
+    <div class="sources-toolbar" jslog=${VisualLogging.toolbar('bottom')}>
+      ${input.scriptViewToolbar}
+      ${input.bottomToolbar}
+    </div>`,
+         target);
+
+  // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+  render(html`
+    <div class="tabbed-pane-placeholder-row workspace">
+      <span class="icon-container">
+        <devtools-icon name="sync" class="sync-icon"></devtools-icon>
+      </span>
+      <span>
+        ${i18nString(UIStrings.workspaceDropInAFolderToSyncSources)}
+        <button @click=${() => output.onSelectFolderClicked()}>${i18nString(UIStrings.selectFolder)}</button>
+      </span>
+    </div>
+
+    <div class="shortcuts-list tabbed-pane-placeholder-row" role="list"
+         aria-label=${i18nString(UIStrings.sourceViewActions)}>
+      ${input.shortcuts.map(shortcut => {
+           if (!shortcut.keys.length) {
+             return html`<div class="shortcut-line" role="listitem"></div>`;
+           }
+           return html`<div class="shortcut-line" role="listitem">
+            <button @click=${shortcut.onClick}>${shortcut.description}</button>
+            <span class="shortcuts">
+              ${shortcut.keys.map(key => html`
+                <span class="keybinds-key"><span>${key}</span></span>
+              `)}
+            </span>
+          </div>`;
+         })}
+    </div>`,
+         input.placeholderElement);
+};
+
 export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
     implements TabbedEditorContainerDelegate, UI.SearchableView.Searchable, UI.SearchableView.Replaceable {
-  readonly #searchableView: UI.SearchableView.SearchableView;
+  #searchableView!: UI.SearchableView.SearchableView;
   private readonly sourceViewByUISourceCode: Map<Workspace.UISourceCode.UISourceCode, UI.Widget.Widget>;
-  editorContainer: TabbedEditorContainer;
+  editorContainer?: TabbedEditorContainer;
+  #uiSourceCodes = new Set<Workspace.UISourceCode.UISourceCode>();
   private readonly historyManager: EditingLocationHistoryManager;
   readonly #scriptViewToolbar: UI.Toolbar.Toolbar;
   readonly #bottomToolbar: UI.Toolbar.Toolbar;
@@ -68,6 +134,10 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   private readonly focusedPlaceholderElement?: HTMLElement;
   private searchView?: UISourceCodeFrame;
   private searchConfig?: UI.SearchableView.SearchConfig;
+  #leftToolbarItems: UI.Toolbar.ToolbarItem[] = [];
+  #rightToolbarItems: UI.Toolbar.ToolbarItem[] = [];
+  #placeholderElement: HTMLElement;
+  #view: View = DEFAULT_VIEW;
 
   constructor() {
     super({jslog: `${VisualLogging.pane('editor').track({keydown: 'Escape'})}`});
@@ -78,31 +148,31 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
 
     const workspace = Workspace.Workspace.WorkspaceImpl.instance();
 
-    this.#searchableView = new UI.SearchableView.SearchableView(this, this, 'sources-view-search-config');
-    this.#searchableView.setMinimalSearchQuerySize(0);
-    this.#searchableView.show(this.element);
+    this.#placeholderElement = document.createElement('div');
+    this.#placeholderElement.classList.add('sources-placeholder');
 
     this.sourceViewByUISourceCode = new Map();
 
-    this.editorContainer = new TabbedEditorContainer(
-        this, Common.Settings.Settings.instance().createLocalSetting('previously-viewed-files', []),
-        this.placeholderElement(), this.focusedPlaceholderElement);
-    this.editorContainer.show(this.#searchableView.element);
-    this.editorContainer.addEventListener(TabbedEditorContainerEvents.EDITOR_SELECTED, this.editorSelected, this);
-    this.editorContainer.addEventListener(TabbedEditorContainerEvents.EDITOR_CLOSED, this.editorClosed, this);
-
     this.historyManager = new EditingLocationHistoryManager(this);
 
-    const toolbarContainerElementInternal = this.element.createChild('div', 'sources-toolbar');
-    toolbarContainerElementInternal.setAttribute('jslog', `${VisualLogging.toolbar('bottom')}`);
-    this.#scriptViewToolbar = toolbarContainerElementInternal.createChild('devtools-toolbar');
+    this.#scriptViewToolbar = document.createElement('devtools-toolbar') as UI.Toolbar.Toolbar;
     this.#scriptViewToolbar.style.flex = 'auto';
-    this.#bottomToolbar = toolbarContainerElementInternal.createChild('devtools-toolbar');
+    this.#bottomToolbar = document.createElement('devtools-toolbar') as UI.Toolbar.Toolbar;
 
     this.toolbarChangedListener = null;
 
+    this.#searchableView = new UI.SearchableView.SearchableView(this, this, 'sources-view-search-config');
+    this.#searchableView.setMinimalSearchQuerySize(0);
+
+    const previouslyViewedFilesSetting =
+        Common.Settings.Settings.instance().createLocalSetting('previously-viewed-files', []);
+    this.editorContainer = new TabbedEditorContainer(this, previouslyViewedFilesSetting, this.#placeholderElement,
+                                                     this.focusedPlaceholderElement);
+    this.editorContainer.addEventListener(TabbedEditorContainerEvents.EDITOR_SELECTED, this.editorSelected, this);
+    this.editorContainer.addEventListener(TabbedEditorContainerEvents.EDITOR_CLOSED, this.editorClosed, this);
+
     UI.UIUtils.startBatchUpdate();
-    workspace.uiSourceCodes().forEach(this.addUISourceCode.bind(this));
+    workspace.uiSourceCodes().forEach(ui => this.addUISourceCode(ui));
     UI.UIUtils.endBatchUpdate();
 
     workspace.addEventListener(Workspace.Workspace.Events.UISourceCodeAdded, this.uiSourceCodeAdded, this);
@@ -110,6 +180,8 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     workspace.addEventListener(Workspace.Workspace.Events.ProjectRemoved, this.projectRemoved.bind(this), this);
     SDK.TargetManager.TargetManager.instance().addScopeChangeListener(this.#onScopeChange.bind(this));
 
+    this.requestUpdate();
+
     function handleBeforeUnload(event: Event): void {
       if (event.returnValue) {
         return;
@@ -142,55 +214,30 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     }
   }
 
-  private placeholderElement(): Element {
-    const placeholder = document.createElement('div');
-    placeholder.classList.add('sources-placeholder');
-
-    const workspaceElement = placeholder.createChild('div', 'tabbed-pane-placeholder-row');
-    workspaceElement.classList.add('workspace');
-
-    const icon = createIcon('sync', 'sync-icon');
-    workspaceElement.createChild('span', 'icon-container').appendChild(icon);
-    const text = workspaceElement.createChild('span');
-    text.textContent = UIStrings.workspaceDropInAFolderToSyncSources;
-    const browseButton = text.createChild('button');
-    browseButton.textContent = i18nString(UIStrings.selectFolder);
-    browseButton.addEventListener('click', this.addFileSystemClicked.bind(this));
-
-    const shortcuts = [
-      {actionId: 'quick-open.show', description: i18nString(UIStrings.openFile)},
-      {actionId: 'quick-open.show-command-menu', description: i18nString(UIStrings.runCommand)},
-    ];
+  override performUpdate(): void {
+    const input: ViewInput = {
+      placeholderElement: this.#placeholderElement,
+      scriptViewToolbar: this.#scriptViewToolbar,
+      bottomToolbar: this.#bottomToolbar,
+      leftToolbarItems: this.#leftToolbarItems,
+      rightToolbarItems: this.#rightToolbarItems,
+      searchableView: this.#searchableView,
+      editorContainer: this.editorContainer as TabbedEditorContainer,
+      shortcuts: this.#getPlaceholderShortcuts(),
+    };
 
-    const list = placeholder.createChild('div', 'shortcuts-list');
-    list.classList.add('tabbed-pane-placeholder-row');
-    UI.ARIAUtils.markAsList(list);
-    UI.ARIAUtils.setLabel(list, i18nString(UIStrings.sourceViewActions));
+    const output: ViewOutput = {
+      onSelectFolderClicked: () => {
+        void this.addFileSystemClicked();
+      },
+    };
 
-    for (const shortcut of shortcuts) {
-      const shortcutKeys = UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction(shortcut.actionId);
-      const listItemElement = list.createChild('div');
-      listItemElement.classList.add('shortcut-line');
-
-      UI.ARIAUtils.markAsListitem(listItemElement);
-
-      // Take the first shortcut for display.
-      if (shortcutKeys?.[0]) {
-        const button = listItemElement.createChild('button');
-        button.textContent = shortcut.description;
-        const action = UI.ActionRegistry.ActionRegistry.instance().getAction(shortcut.actionId);
-        button.addEventListener('click', () => action.execute());
-
-        const shortcutElement = listItemElement.createChild('span', 'shortcuts');
-        const separator = Host.Platform.isMac() ? '\u2004' : ' + ';
-        const keys = shortcutKeys[0].descriptors.flatMap(descriptor => descriptor.name.split(separator));
-        keys.forEach(key => {
-          shortcutElement.createChild('span', 'keybinds-key').createChild('span').textContent = key;
-        });
-      }
-    }
+    this.#view(input, output, this.element);
+  }
 
-    return placeholder;
+  override onDetach(): void {
+    super.onDetach();
+    this.editorContainer?.view.detachChildWidgets();
   }
 
   private async addFileSystemClicked(): Promise<void> {
@@ -202,11 +249,38 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     void UI.ViewManager.ViewManager.instance().showView('navigator-files');
   }
 
+  #getPlaceholderShortcuts(): Shortcut[] {
+    const shortcuts = [
+      {actionId: 'quick-open.show', description: i18nString(UIStrings.openFile)},
+      {actionId: 'quick-open.show-command-menu', description: i18nString(UIStrings.runCommand)},
+    ];
+    const separator = Host.Platform.isMac() ? '\u2004' : ' + ';
+    return shortcuts.map(shortcut => {
+      const shortcutKeys = UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction(shortcut.actionId);
+      if (!shortcutKeys?.[0]) {
+        return {
+          description: shortcut.description,
+          onClick: () => {},
+          keys: [],
+        };
+      }
+      const action = UI.ActionRegistry.ActionRegistry.instance().getAction(shortcut.actionId);
+      const keys = shortcutKeys[0].descriptors.flatMap(descriptor => descriptor.name.split(separator));
+      return {
+        description: shortcut.description,
+        onClick: () => {
+          void action.execute();
+        },
+        keys,
+      };
+    });
+  }
+
   static defaultUISourceCodeScores(): Map<Workspace.UISourceCode.UISourceCode, number> {
     const defaultScores = new Map<Workspace.UISourceCode.UISourceCode, number>();
     const sourcesView = UI.Context.Context.instance().flavor(SourcesView);
     if (sourcesView) {
-      const uiSourceCodes = sourcesView.editorContainer.historyUISourceCodes();
+      const uiSourceCodes = sourcesView.editorContainer?.historyUISourceCodes() ?? [];
       for (let i = 1; i < uiSourceCodes.length; ++i)  // Skip current element
       {
         defaultScores.set(uiSourceCodes[i], uiSourceCodes.length - i);
@@ -215,12 +289,30 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     return defaultScores;
   }
 
-  leftToolbar(): UI.Toolbar.Toolbar {
-    return this.editorContainer.leftToolbar();
+  set leftToolbarItems(items: UI.Toolbar.ToolbarItem[]) {
+    this.#leftToolbarItems = items;
+    const container = this.editorContainer;
+    if (container) {
+      container.leftToolbar().removeToolbarItems();
+      items.forEach(item => container.leftToolbar().appendToolbarItem(item));
+    }
+  }
+
+  get leftToolbarItems(): UI.Toolbar.ToolbarItem[] {
+    return this.#leftToolbarItems;
+  }
+
+  set rightToolbarItems(items: UI.Toolbar.ToolbarItem[]) {
+    this.#rightToolbarItems = items;
+    const container = this.editorContainer;
+    if (container) {
+      container.rightToolbar().removeToolbarItems();
+      items.forEach(item => container.rightToolbar().appendToolbarItem(item));
+    }
   }
 
-  rightToolbar(): UI.Toolbar.Toolbar {
-    return this.editorContainer.rightToolbar();
+  get rightToolbarItems(): UI.Toolbar.ToolbarItem[] {
+    return this.#rightToolbarItems;
   }
 
   bottomToolbar(): UI.Toolbar.Toolbar {
@@ -246,7 +338,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   visibleView(): UI.Widget.Widget|null {
-    return this.editorContainer.visibleView as UI.Widget.Widget | null;
+    return (this.editorContainer?.visibleView ?? null) as UI.Widget.Widget | null;
   }
 
   currentSourceFrame(): UISourceCodeFrame|null {
@@ -258,15 +350,15 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   currentUISourceCode(): Workspace.UISourceCode.UISourceCode|null {
-    return this.editorContainer.currentFile();
+    return this.editorContainer?.currentFile() ?? null;
   }
 
   onCloseEditorTab(): boolean {
-    const uiSourceCode = this.editorContainer.currentFile();
+    const uiSourceCode = this.editorContainer?.currentFile();
     if (!uiSourceCode) {
       return false;
     }
-    this.editorContainer.closeFile(uiSourceCode);
+    this.editorContainer?.closeFile(uiSourceCode);
     return true;
   }
 
@@ -317,7 +409,8 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
         }
       }
     }
-    this.editorContainer.addUISourceCode(uiSourceCode);
+    this.#uiSourceCodes.add(uiSourceCode);
+    this.editorContainer?.addUISourceCode(uiSourceCode);
   }
 
   private uiSourceCodeRemoved(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
@@ -326,7 +419,8 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   private removeUISourceCodes(uiSourceCodes: Workspace.UISourceCode.UISourceCode[]): void {
-    this.editorContainer.removeUISourceCodes(uiSourceCodes);
+    uiSourceCodes.forEach(ui => this.#uiSourceCodes.delete(ui));
+    this.editorContainer?.removeUISourceCodes(uiSourceCodes);
     for (let i = 0; i < uiSourceCodes.length; ++i) {
       this.removeSourceFrame(uiSourceCodes[i]);
       this.historyManager.removeHistoryForSourceCode(uiSourceCodes[i]);
@@ -357,15 +451,15 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     }
   }
 
-  showSourceLocation(
-      uiSourceCode: Workspace.UISourceCode.UISourceCode, location?: SourceFrame.SourceFrame.RevealPosition,
-      omitFocus?: boolean, omitHighlight?: boolean): void {
+  async showSourceLocation(uiSourceCode: Workspace.UISourceCode.UISourceCode,
+                           location?: SourceFrame.SourceFrame.RevealPosition, omitFocus?: boolean,
+                           omitHighlight?: boolean): Promise<void> {
     const currentFrame = this.currentSourceFrame();
     if (currentFrame) {
-      this.historyManager.updateCurrentState(
-          currentFrame.uiSourceCode(), currentFrame.textEditor.state.selection.main.head);
+      this.historyManager.updateCurrentState(currentFrame.uiSourceCode(),
+                                             currentFrame.textEditor.state.selection.main.head);
     }
-    this.editorContainer.showFile(uiSourceCode);
+    this.editorContainer?.showFile(uiSourceCode);
     const currentSourceFrame = this.currentSourceFrame();
     if (currentSourceFrame && location) {
       currentSourceFrame.revealPosition(location, !omitHighlight);
@@ -432,7 +526,8 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
       if (this.#sourceViewTypeForWidget(widget) !== this.#sourceViewTypeForUISourceCode(uiSourceCode)) {
         // Remove the existing editor tab and create a new one of the correct type.
         this.removeUISourceCodes([uiSourceCode]);
-        this.showSourceLocation(uiSourceCode);
+        this.#uiSourceCodes.add(uiSourceCode);
+        void this.showSourceLocation(uiSourceCode);
       }
     }
   }
@@ -446,8 +541,8 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   recycleUISourceCodeFrame(sourceFrame: UISourceCodeFrame, uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    sourceFrame.uiSourceCode().removeEventListener(
-        Workspace.UISourceCode.Events.TitleChanged, this.#uiSourceCodeTitleChanged, this);
+    sourceFrame.uiSourceCode().removeEventListener(Workspace.UISourceCode.Events.TitleChanged,
+                                                   this.#uiSourceCodeTitleChanged, this);
     this.sourceViewByUISourceCode.delete(sourceFrame.uiSourceCode());
     sourceFrame.setUISourceCode(uiSourceCode);
     this.sourceViewByUISourceCode.set(uiSourceCode, sourceFrame);
@@ -472,7 +567,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     this.historyManager.removeHistoryForSourceCode(uiSourceCode);
 
     let wasSelected = false;
-    if (!this.editorContainer.currentFile()) {
+    if (!this.editorContainer?.currentFile()) {
       wasSelected = true;
     }
 
@@ -503,7 +598,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     this.updateToolbarChangedListener();
     this.updateScriptViewToolbarItems();
 
-    const currentFile = this.editorContainer.currentFile();
+    const currentFile = this.editorContainer?.currentFile();
     if (currentFile) {
       this.dispatchEventToListeners(Events.EDITOR_SELECTED, currentFile);
     }
@@ -522,8 +617,8 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     if (!sourceFrame) {
       return;
     }
-    this.toolbarChangedListener = sourceFrame.addEventListener(
-        UISourceCodeFrameEvents.TOOLBAR_ITEMS_CHANGED, this.updateScriptViewToolbarItems, this);
+    this.toolbarChangedListener = sourceFrame.addEventListener(UISourceCodeFrameEvents.TOOLBAR_ITEMS_CHANGED,
+                                                               this.updateScriptViewToolbarItems, this);
   }
 
   onSearchCanceled(): void {
@@ -611,7 +706,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   showGoToLineQuickOpen(): void {
-    if (this.editorContainer.currentFile()) {
+    if (this.editorContainer?.currentFile()) {
       QuickOpen.QuickOpen.QuickOpenImpl.show(':');
     }
   }
@@ -621,7 +716,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   saveAll(): void {
-    const sourceFrames = this.editorContainer.fileViews();
+    const sourceFrames = this.editorContainer?.fileViews() ?? [];
     sourceFrames.forEach(this.saveSourceFrame.bind(this));
   }
 
@@ -634,7 +729,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   toggleBreakpointsActiveState(active: boolean): void {
-    this.editorContainer.view.element.classList.toggle('breakpoints-deactivated', !active);
+    this.editorContainer?.view.element.classList.toggle('breakpoints-deactivated', !active);
   }
 }
 
@@ -696,7 +791,7 @@ export class SwitchFileActionDelegate implements UI.ActionRegistration.ActionDel
     if (!nextUISourceCode) {
       return false;
     }
-    sourcesView.showSourceLocation(nextUISourceCode);
+    void sourcesView.showSourceLocation(nextUISourceCode);
     return true;
   }
 }
@@ -710,7 +805,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
 
     switch (actionId) {
       case 'sources.close-all':
-        sourcesView.editorContainer.closeAllFiles();
+        sourcesView.editorContainer?.closeAllFiles();
         return true;
       case 'sources.jump-to-previous-location':
         sourcesView.onJumpToPreviousLocation();
@@ -719,10 +814,10 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
         sourcesView.onJumpToNextLocation();
         return true;
       case 'sources.next-editor-tab':
-        sourcesView.editorContainer.selectNextTab();
+        sourcesView.editorContainer?.selectNextTab();
         return true;
       case 'sources.previous-editor-tab':
-        sourcesView.editorContainer.selectPrevTab();
+        sourcesView.editorContainer?.selectPrevTab();
         return true;
       case 'sources.close-editor-tab':
         return sourcesView.onCloseEditorTab();

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -73,13 +73,12 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
   private currentView!: UI.Widget.Widget|null;
   private scrollTimer?: number;
   private reentrantShow: boolean;
-  constructor(
-      delegate: TabbedEditorContainerDelegate, setting: Common.Settings.Setting<SerializedHistoryItem[]>,
-      placeholderElement: Element, focusedPlaceholderElement?: Element) {
+  constructor(delegate: TabbedEditorContainerDelegate, setting: Common.Settings.Setting<SerializedHistoryItem[]>,
+              placeholderElement: Element, focusedPlaceholderElement?: Element, element?: HTMLElement) {
     super();
     this.delegate = delegate;
 
-    this.tabbedPane = new UI.TabbedPane.TabbedPane();
+    this.tabbedPane = new UI.TabbedPane.TabbedPane(element);
     this.tabbedPane.setPlaceholderElement(placeholderElement, focusedPlaceholderElement);
     this.tabbedPane.setTabDelegate(new EditorContainerTabDelegate(this));
 

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -150,11 +150,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     }
   };
 
-  const renderNameElement = (e: WatchExpression): Element => {
-    const nameElement = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createNameElement(e.expression);
-    UI.Tooltip.Tooltip.install(nameElement as HTMLElement, e.expression);
-    return nameElement;
-  };
+  const renderNameElement = (e: WatchExpression): TemplateResult => ObjectUI.ObjectPropertiesSection.renderPropertyName(
+      e.expression, /* isPrivate= */ false, e.expression ?? undefined);
 
   const renderTreeElement = (e: WatchExpression): TemplateResult =>
       // clang-format off

package/front_end/panels/timeline/TimelinePanel.ts

@@ -767,6 +767,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     const config = Trace.Types.Configuration.defaults();
     config.showAllEvents = Common.Settings.Settings.instance().moduleSetting('timeline-show-all-events').get();
     config.debugMode = Common.Settings.Settings.instance().moduleSetting('timeline-debug-mode').get() as boolean;
+    config.enableSoftNavigation =
+        Common.Settings.Settings.instance().moduleSetting('timeline-enable-soft-navigations').get() as boolean;
 
     const traceEngineModel = Trace.TraceModel.Model.createWithAllHandlers(config);
 

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -542,6 +542,21 @@ export class TimelineUIUtils {
         tokens.push(url);
       }
     }
+    if (Trace.Types.Extensions.isSyntheticExtensionEntry(traceEvent)) {
+      // Extension entries are synthetic events that carry the text shown to the
+      // user on the event itself rather than in `args`, so gather it explicitly.
+      const {tooltipText, properties} = traceEvent.devtoolsObj;
+      if (tooltipText) {
+        tokens.push(tooltipText);
+      }
+      for (const [propertyName, propertyValue] of properties ?? []) {
+        tokens.push(propertyName);
+        appendObjectProperties({propertyValue} as ContentObject, 3);
+      }
+      if (traceEvent.userDetail !== null) {
+        appendObjectProperties({userDetail: traceEvent.userDetail} as ContentObject, 3);
+      }
+    }
     if (TimelineUIUtils.getGetDebugModeEnabled()) {
       // When in debug mode append top level properties (like timestamp)
       // and deeply nested properties.

package/front_end/panels/timeline/components/CWVMetrics.ts

@@ -14,6 +14,7 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import cwvMetricsStyles from './cwvMetrics.css.js';
 import {md} from './insights/Helpers.js';
 import * as Insights from './insights/insights.js';
+import metricValueStyles from './metricValueStyles.css.js';
 import {isFieldWorseThanLocal, NumberWithUnit} from './Utils.js';
 
 const {html} = Lit.StaticHtml;
@@ -204,6 +205,16 @@ const CWV_METRICS_VIEW: MetricsView = (input, _output, target) => {
   const inpEl = renderMetricValue('INP', local?.inp?.value ?? null, local?.inp?.event ?? null);
   const clsEl = renderMetricValue('CLS', local?.cls?.value ?? null, local?.cls?.worstClusterEvent ?? null);
 
+  const navigation = parsedTrace?.insights?.get(insightSetKey ?? '')?.navigation;
+  const isSoftNav = navigation && Trace.Types.Events.isSoftNavigationStart(navigation);
+
+  const softNavBadgeTemplate = isSoftNav ? html`
+    <div class="metrics-row soft-nav-badge-row">
+      <span class="badge">SOFT NAV</span>
+    </div>
+  ` :
+                                           Lit.nothing;
+
   const localMetricsTemplateResult = html`
     <div class="metrics-row">
       <span>${lcpEl}</span>
@@ -211,6 +222,7 @@ const CWV_METRICS_VIEW: MetricsView = (input, _output, target) => {
       <span>${clsEl}</span>
       <span class="row-label">Local</span>
     </div>
+    ${!field ? softNavBadgeTemplate : Lit.nothing}
     ${!field && input.skipBottomBorder ? Lit.nothing : html`<span class="row-border"></span>`}
   `;
 
@@ -235,6 +247,7 @@ const CWV_METRICS_VIEW: MetricsView = (input, _output, target) => {
         <span>${clsEl}</span>
         <span class="row-label">${i18nString(UIStrings.fieldScoreLabel, {PH1: scope})}</span>
       </div>
+      ${softNavBadgeTemplate}
       ${input.skipBottomBorder ? Lit.nothing : html`<span class="row-border"></span>`}
     `;
     // clang-format on
@@ -271,13 +284,13 @@ const CWV_METRICS_VIEW: MetricsView = (input, _output, target) => {
     ${fieldMetricsTemplateResult}
   </div>`;
 
-  Lit.render(
-      html`
+  Lit.render(html`
     <style>${cwvMetricsStyles}</style>
+    <style>${metricValueStyles}</style>
     ${metricsTableEl}
     ${fieldIsDifferentEl}
   `,
-      target);
+             target);
 };
 
 export interface CWVMetricsData {

package/front_end/panels/timeline/components/cwvMetrics.css

@@ -105,3 +105,7 @@
     cursor: pointer;
   }
 }
+
+.soft-nav-badge-row {
+  display: contents;
+}

package/front_end/panels/timeline/components/liveMetricsView.css

@@ -405,20 +405,3 @@ devtools-link {
 .section-header .section-title {
   margin-bottom: 0;
 }
-
-.section-header .badge {
-  display: inline-flex;
-  align-items: center;
-  width: fit-content;
-  height: var(--sys-size-8);
-  line-height: var(--sys-size-8);
-  border-radius: var(--sys-shape-corner-extra-small);
-  padding: 0 var(--sys-size-3);
-  border: var(--sys-size-1) solid var(--sys-color-primary);
-  color: var(--sys-color-primary);
-  font-weight: var(--ref-typeface-weight-bold);
-  font-size: var(--sys-size-5);
-  text-align: center;
-  margin-top: var(--sys-size-5);
-  margin-bottom: var(--sys-size-5);
-}

package/front_end/panels/timeline/components/metricValueStyles.css

@@ -39,3 +39,20 @@
 .metric-value.poor.dim {
   color: var(--app-color-performance-bad-dim);
 }
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: var(--sys-size-8);
+  border-radius: var(--sys-shape-corner-extra-small);
+  padding: 0 var(--sys-size-3);
+  border: var(--sys-size-1) solid var(--sys-color-primary);
+  color: var(--sys-color-primary);
+  font-weight: var(--ref-typeface-weight-bold);
+  font-size: var(--sys-size-5);
+  text-align: center;
+  margin-top: var(--sys-size-5);
+  margin-bottom: var(--sys-size-5);
+}