chrome-devtools-frontend 1.0.1704172 → 1.0.1706026

package/front_end/panels/sources/EditingLocationHistoryManager.ts

@@ -7,7 +7,7 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 
-import type {SourcesView} from './SourcesView.js';
+import type {TabbedEditorContainer} from './TabbedEditorContainer.js';
 import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 export const HistoryDepth = 20;
@@ -17,7 +17,7 @@ export class EditingLocationHistoryManager {
   private current = -1;
   private revealingCount = 0;
 
-  constructor(private readonly sourcesView: SourcesView) {
+  constructor(private readonly editorContainer: TabbedEditorContainer) {
   }
 
   trackSourceFrameCursorJumps(sourceFrame: UISourceCodeFrame): void {
@@ -66,12 +66,12 @@ export class EditingLocationHistoryManager {
     }
   }
 
-  private async reveal(entry: EditingLocationHistoryEntry): Promise<void> {
+  private reveal(entry: EditingLocationHistoryEntry): void {
     const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCode(entry.projectId, entry.url);
     if (uiSourceCode) {
       this.revealingCount++;
       try {
-        await this.sourcesView.showSourceLocation(uiSourceCode, entry.position, false, true);
+        this.editorContainer.showSourceLocation(uiSourceCode, entry.position, false, true);
       } finally {
         this.revealingCount--;
       }
@@ -81,14 +81,14 @@ export class EditingLocationHistoryManager {
   rollback(): void {
     if (this.current > 0) {
       this.current--;
-      void this.reveal(this.entries[this.current]);
+      this.reveal(this.entries[this.current]);
     }
   }
 
   rollover(): void {
     if (this.current < this.entries.length - 1) {
       this.current++;
-      void this.reveal(this.entries[this.current]);
+      this.reveal(this.entries[this.current]);
     }
   }
 

package/front_end/panels/sources/OpenFileQuickOpen.ts

@@ -11,13 +11,13 @@ import {PanelUtils} from '../../panels/utils/utils.js';
 import {Directives, html, type TemplateResult} from '../../ui/lit/lit.js';
 
 import {FilteredUISourceCodeListProvider} from './FilteredUISourceCodeListProvider.js';
-import {SourcesView} from './SourcesView.js';
+import {TabbedEditorContainer} from './TabbedEditorContainer.js';
 
 const {styleMap} = Directives;
 
 export class OpenFileQuickOpen extends FilteredUISourceCodeListProvider {
   override attach(): void {
-    this.setDefaultScores(SourcesView.defaultUISourceCodeScores());
+    this.setDefaultScores(TabbedEditorContainer.defaultUISourceCodeScores());
     super.attach();
   }
 

package/front_end/panels/sources/Plugin.ts

@@ -7,6 +7,7 @@ import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.n
 import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import type * as UI from '../../ui/legacy/legacy.js';
+import type {LitTemplate} from '../../ui/lit/lit.js';
 
 export class Plugin {
   constructor(
@@ -21,7 +22,7 @@ export class Plugin {
   willHide(): void {
   }
 
-  rightToolbarItems(): UI.Toolbar.ToolbarItem[] {
+  rightToolbarItems(): Array<UI.Toolbar.ToolbarItem|LitTemplate> {
     return [];
   }
 
@@ -30,7 +31,7 @@ export class Plugin {
    * TODO(szuend): It is OK to asyncify this function (similar to {rightToolbarItems}),
    *               but it is currently not strictly necessary.
    */
-  leftToolbarItems(): UI.Toolbar.ToolbarItem[] {
+  leftToolbarItems(): Array<UI.Toolbar.ToolbarItem|LitTemplate> {
     return [];
   }
 

package/front_end/panels/sources/ResourceOriginPlugin.ts

@@ -1,14 +1,12 @@
 // Copyright 2018 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
-
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
-import * as UI from '../../ui/legacy/legacy.js';
+import {html, type LitTemplate, nothing} from '../../ui/lit/lit.js';
 
 import {Plugin} from './Plugin.js';
 
@@ -35,12 +33,12 @@ export class ResourceOriginPlugin extends Plugin {
     return contentType.hasScripts() || contentType.isFromSourceMap();
   }
 
-  override rightToolbarItems(): UI.Toolbar.ToolbarItem[] {
+  override rightToolbarItems(): LitTemplate[] {
     const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
 
     // Handle source mapped scripts and stylesheets.
     if (this.uiSourceCode.contentType().isFromSourceMap()) {
-      const links = [];
+      const links: Array<HTMLElement|LitTemplate> = [];
       for (const script of debuggerWorkspaceBinding.scriptsForUISourceCode(this.uiSourceCode)) {
         const uiSourceCode = debuggerWorkspaceBinding.uiSourceCodeForScript(script);
         if (!uiSourceCode) {
@@ -55,21 +53,17 @@ export class ResourceOriginPlugin extends Plugin {
         links.push(link);
       }
       for (const originURL of Bindings.SASSSourceMapping.SASSSourceMapping.uiSourceOrigin(this.uiSourceCode)) {
-        const link = Components.Linkifier.Linkifier.linkifyURL(originURL);
-        link.tabIndex = 0;
-        links.push(link);
+        links.push(Components.Linkifier.Linkifier.renderLinkifiedUrl(originURL, {tabStop: true}));
       }
       if (links.length === 0) {
         return [];
       }
-      const element = document.createElement('span');
-      links.forEach((link, index) => {
-        if (index > 0) {
-          element.append(', ');
-        }
-        element.append(link);
-      });
-      return [new UI.Toolbar.ToolbarItem(uiI18n.getFormatLocalizedString(str_, UIStrings.fromS, {PH1: element}))];
+      const linksTemplate =
+          html`<span>${links.map((link, index) => html`${index > 0 ? ', ' : nothing}${link}`)}</span>`;
+      return [
+        html`<div class="toolbar-item">${
+            uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.fromS, {PH1: linksTemplate})}</div>`,
+      ];
     }
 
     // Handle anonymous scripts with an originStackTrace.
@@ -77,7 +71,10 @@ export class ResourceOriginPlugin extends Plugin {
       if (script.originStackTrace?.callFrames.length) {
         const link = this.#linkifier.linkifyStackTraceTopFrame(script.debuggerModel.target(), script.originStackTrace);
         link.tabIndex = 0;
-        return [new UI.Toolbar.ToolbarItem(uiI18n.getFormatLocalizedString(str_, UIStrings.fromS, {PH1: link}))];
+        return [
+          html`<div class="toolbar-item">${
+              uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.fromS, {PH1: link})}</div>`,
+        ];
       }
     }
 

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -31,7 +31,6 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as Bindings from '../../models/bindings/bindings.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
@@ -214,8 +213,9 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     this.#linkifier.reset();
 
     if (callFrame) {
+      // TODO(crbug.com/458180550): Receive the ScopeChainResolver via constructor.
       const scopeChainModel = new SourceMapScopes.ScopeChainModel.ScopeChainModel(
-          callFrame.sdkFrame, Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance());
+          callFrame.sdkFrame, SourceMapScopes.ScopeChainResolver.ScopeChainResolver.instance());
       this.#scopeChainModel = scopeChainModel;
       this.#scopeChainModel.addEventListener(SourceMapScopes.ScopeChainModel.Events.SCOPE_CHAIN_UPDATED, event => {
         if (this.#scopeChainModel === scopeChainModel) {

package/front_end/panels/sources/SourcesPanel.ts

@@ -421,7 +421,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
     }  // Do not force layout.
   }
 
-  override searchableView(): UI.SearchableView.SearchableView {
+  override searchableView(): UI.SearchableView.SearchableView|null {
     return this.#sourcesView.searchableView();
   }
 

package/front_end/panels/sources/SourcesView.ts

@@ -19,11 +19,9 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {EditingLocationHistoryManager} from './EditingLocationHistoryManager.js';
 import sourcesViewStyles from './sourcesView.css.js';
 import {
   type EditorSelectedEvent,
-  type SerializedHistoryItem,
   TabbedEditorContainer,
 } from './TabbedEditorContainer.js';
 import {Events as UISourceCodeFrameEvents, UISourceCodeFrame} from './UISourceCodeFrame.js';
@@ -74,8 +72,8 @@ const {widget, widgetRef} = UI.Widget;
 export interface ViewInput {
   searchProvider: UI.SearchableView.Searchable;
   replaceProvider: UI.SearchableView.Replaceable;
-  searchableViewId: string;
-  scriptViewToolbarItems: UI.Toolbar.ToolbarItem[]|LitTemplate;
+  isSearchReplaceable: boolean;
+  scriptViewToolbarItems: LitTemplate;
   isNavigatorSidebarOpen: boolean;
   isDebuggerSidebarOpen: boolean;
   isDebuggerSidebarButtonEnabled: boolean;
@@ -86,15 +84,12 @@ export interface ViewInput {
   onToggleDebuggerSidebar?: () => void;
   breakpointsActive: boolean;
   uiSourceCodes: ReadonlySet<Workspace.UISourceCode.UISourceCode>;
-  historyManager: EditingLocationHistoryManager;
-  previouslyViewedFilesSetting: Common.Settings.Setting<SerializedHistoryItem[]>;
   onEditorSelected: (event: EditorSelectedEvent) => void;
   onEditorClosed: (uiSourceCode: Workspace.UISourceCode.UISourceCode) => void;
 }
 
 export interface ViewOutput {
   editorContainer?: TabbedEditorContainer;
-  searchableView?: UI.SearchableView.SearchableView;
 }
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
@@ -147,17 +142,16 @@ export const DEFAULT_VIEW: View = (input, output, target): void => {
   render(html`
     <style>${sourcesViewStyles}</style>
     <devtools-widget class="vbox flex-auto"
-      ${widget(element => {
-        const searchableView = new UI.SearchableView.SearchableView(input.searchProvider, input.replaceProvider, input.searchableViewId, element);
-        searchableView.setMinimalSearchQuerySize(0);
-        return searchableView;
+      ${widget(UI.SearchableView.SearchableView, {
+        searchProvider: input.searchProvider,
+        replaceProvider: input.replaceProvider,
+        settingName: 'sources-view-search-config',
+        minimalSearchQuerySize: 0,
+        replaceable: input.isSearchReplaceable,
       })}
-      ${widgetRef(UI.SearchableView.SearchableView, e => { output.searchableView = e; })}
     >
       <devtools-widget class="vbox flex-auto ${input.breakpointsActive ? '' : 'breakpoints-deactivated'}"
         ${widget(TabbedEditorContainer, {
-          historyManager: input.historyManager,
-          previouslyViewedFilesSetting: input.previouslyViewedFilesSetting,
           leftToolbarItems,
           rightToolbarItems,
           uiSourceCodes: input.uiSourceCodes,
@@ -168,10 +162,8 @@ export const DEFAULT_VIEW: View = (input, output, target): void => {
       </devtools-widget>
     </devtools-widget>
     <div class="sources-toolbar" jslog=${VisualLogging.toolbar('bottom')}>
-      <devtools-toolbar class="script-view-toolbar" style="flex: auto;">
-        ${Array.isArray(input.scriptViewToolbarItems)
-            ? input.scriptViewToolbarItems.map(item => item.element)
-            : input.scriptViewToolbarItems}
+      <devtools-toolbar class="script-view-toolbar">
+        ${input.scriptViewToolbarItems}
       </devtools-toolbar>
       <devtools-toolbar class="bottom-toolbar">
         ${bottomToolbarContent}
@@ -193,11 +185,10 @@ const SourcesViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Wid
 
 export class SourcesView extends SourcesViewBase implements UI.SearchableView.Searchable,
                                                             UI.SearchableView.Replaceable {
-  #searchableView!: UI.SearchableView.SearchableView;
   editorContainer?: TabbedEditorContainer;
   #uiSourceCodes = new Set<Workspace.UISourceCode.UISourceCode>();
-  private readonly historyManager: EditingLocationHistoryManager;
-  #scriptViewToolbarItems: UI.Toolbar.ToolbarItem[]|LitTemplate = [];
+  #scriptViewToolbarItems: LitTemplate = nothing;
+  #isSearchReplaceable = false;
   private toolbarChangedListener: Common.EventTarget.EventDescriptor|null;
   private searchView?: UISourceCodeFrame;
   private searchConfig?: UI.SearchableView.SearchConfig;
@@ -215,7 +206,6 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
   #breakpointsActive = true;
   #editorContainerPromise: Promise<TabbedEditorContainer>;
   #editorContainerResolve!: (container: TabbedEditorContainer) => void;
-  readonly previouslyViewedFilesSetting: Common.Settings.Setting<SerializedHistoryItem[]>;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {jslog: `${VisualLogging.pane('editor').track({keydown: 'Escape'})}`});
@@ -227,12 +217,8 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
 
     const workspace = Workspace.Workspace.WorkspaceImpl.instance();
 
-    this.historyManager = new EditingLocationHistoryManager(this);
-
     this.toolbarChangedListener = null;
 
-    this.previouslyViewedFilesSetting =
-        Common.Settings.Settings.instance().createLocalSetting('previously-viewed-files', []);
     this.requestUpdate();
 
     UI.UIUtils.startBatchUpdate();
@@ -280,7 +266,7 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
     const input: ViewInput = {
       searchProvider: this,
       replaceProvider: this,
-      searchableViewId: 'sources-view-search-config',
+      isSearchReplaceable: this.#isSearchReplaceable,
       scriptViewToolbarItems: this.#scriptViewToolbarItems,
       isNavigatorSidebarOpen: this.#isNavigatorSidebarOpen,
       isDebuggerSidebarOpen: this.#isDebuggerSidebarOpen,
@@ -292,8 +278,6 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
       onToggleDebuggerSidebar: this.#onToggleDebuggerSidebar,
       breakpointsActive: this.#breakpointsActive,
       uiSourceCodes: new Set(this.#uiSourceCodes),
-      historyManager: this.historyManager,
-      previouslyViewedFilesSetting: this.previouslyViewedFilesSetting,
       onEditorSelected: this.editorSelected.bind(this),
       onEditorClosed: this.editorClosed.bind(this),
     };
@@ -303,17 +287,9 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
       set editorContainer(value: TabbedEditorContainer) {
         that.setEditorContainer(value);
       },
-      set searchableView(value: UI.SearchableView.SearchableView) {
-        that.#searchableView = value;
-      },
     };
 
-    this.#view(input, output, this.element);
-  }
-
-  override onDetach(): void {
-    super.onDetach();
-    this.editorContainer?.detachEditors();
+    this.#view(input, output, this.contentElement);
   }
 
   setEditorContainer(editorContainer: TabbedEditorContainer): void {
@@ -326,19 +302,6 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
     }
   }
 
-  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() ?? [];
-      for (let i = 1; i < uiSourceCodes.length; ++i)  // Skip current element
-      {
-        defaultScores.set(uiSourceCodes[i], uiSourceCodes.length - i);
-      }
-    }
-    return defaultScores;
-  }
-
   set onToggleNavigatorSidebar(callback: () => void) {
     this.#onToggleNavigatorSidebar = callback;
     this.requestUpdate();
@@ -398,11 +361,8 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
     super.willHide();
   }
 
-  searchableView(): UI.SearchableView.SearchableView {
-    if (!this.#searchableView) {
-      this.performUpdate();
-    }
-    return this.#searchableView;
+  searchableView(): UI.SearchableView.SearchableView|null {
+    return UI.SearchableView.SearchableView.fromElement(this.contentElement.querySelector('devtools-widget'));
   }
 
   visibleView(): UI.Widget.Widget|null {
@@ -431,11 +391,11 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
   }
 
   onJumpToPreviousLocation(): void {
-    this.historyManager.rollback();
+    this.editorContainer?.rollback();
   }
 
   onJumpToNextLocation(): void {
-    this.historyManager.rollover();
+    this.editorContainer?.rollover();
   }
 
   #onScopeChange(): void {
@@ -488,9 +448,6 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
 
   private removeUISourceCodes(uiSourceCodes: Workspace.UISourceCode.UISourceCode[]): void {
     uiSourceCodes.forEach(ui => this.#uiSourceCodes.delete(ui));
-    for (let i = 0; i < uiSourceCodes.length; ++i) {
-      this.historyManager.removeHistoryForSourceCode(uiSourceCodes[i]);
-    }
     this.requestUpdate();
   }
 
@@ -504,11 +461,11 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
     const view = this.visibleView();
     if (view instanceof UI.View.SimpleView) {
       void view.toolbarItems().then(items => {
-        this.#scriptViewToolbarItems = items;
+        this.#scriptViewToolbarItems = Array.isArray(items) ? html`${items.map(item => item.element)}` : items;
         this.requestUpdate();
       });
     } else {
-      this.#scriptViewToolbarItems = [];
+      this.#scriptViewToolbarItems = nothing;
       this.requestUpdate();
     }
   }
@@ -519,20 +476,7 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
     if (!this.editorContainer) {
       await this.#editorContainerPromise;
     }
-    const currentFrame = this.currentSourceFrame();
-    if (currentFrame) {
-      this.historyManager.updateCurrentState(currentFrame.uiSourceCode(),
-                                             currentFrame.textEditor.state.selection.main.head);
-    }
-    this.editorContainer?.showFile(uiSourceCode);
-    const currentSourceFrame = this.currentSourceFrame();
-    if (currentSourceFrame && location) {
-      currentSourceFrame.revealPosition(location, !omitHighlight);
-    }
-    const visibleView = this.visibleView();
-    if (!omitFocus && visibleView) {
-      visibleView.focus();
-    }
+    this.editorContainer?.showSourceLocation(uiSourceCode, location, omitFocus, omitHighlight);
   }
 
   viewForFile(uiSourceCode: Workspace.UISourceCode.UISourceCode): UI.Widget.Widget|undefined {
@@ -544,8 +488,6 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
   }
 
   private editorClosed(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    this.historyManager.removeHistoryForSourceCode(uiSourceCode);
-
     let wasSelected = false;
     if (!this.editorContainer?.currentFile()) {
       wasSelected = true;
@@ -554,7 +496,7 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
     // SourcesNavigator does not need to update on EditorClosed.
     this.removeToolbarChangedListener();
     this.updateScriptViewToolbarItems();
-    this.searchableView().resetSearch();
+    this.searchableView()?.resetSearch();
 
     const data = {
       uiSourceCode,
@@ -573,8 +515,9 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
       currentSourceFrame.setSearchableView(this.searchableView());
     }
 
-    this.searchableView().setReplaceable(Boolean(currentSourceFrame?.canEditSource()));
-    this.searchableView().refreshSearch();
+    this.#isSearchReplaceable = Boolean(currentSourceFrame?.canEditSource());
+    this.requestUpdate();
+    this.searchableView()?.refreshSearch();
     this.updateToolbarChangedListener();
     this.updateScriptViewToolbarItems();
 

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -22,8 +22,7 @@ import * as PanelCommon from '../common/common.js';
 import * as Snippets from '../snippets/snippets.js';
 
 import * as Components from './components/components.js';
-import type {EditingLocationHistoryManager} from './EditingLocationHistoryManager.js';
-import {SourcesView} from './SourcesView.js';
+import {EditingLocationHistoryManager} from './EditingLocationHistoryManager.js';
 import {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 const UIStrings = {
@@ -103,8 +102,8 @@ interface TabInfo {
 export interface TabbedEditorViewInput {
   openTabs: TabInfo[];
   activeTabId?: string;
-  leftToolbarItems: Array<UI.Toolbar.ToolbarItem|LitTemplate>;
-  rightToolbarItems: Array<UI.Toolbar.ToolbarItem|LitTemplate>;
+  leftToolbarItems: LitTemplate[];
+  rightToolbarItems: LitTemplate[];
   tabDelegate: UI.TabbedPane.TabbedPaneTabDelegate;
   shortcuts: Array<{
     description: Platform.UIString.LocalizedString,
@@ -254,17 +253,17 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
       @select=${input.onSelect}
     >
       <devtools-toolbar class="tabbed-pane-left-toolbar" slot="left">
-        ${input.leftToolbarItems.map(item => item instanceof UI.Toolbar.ToolbarItem ? item.element : item)}
+        ${input.leftToolbarItems}
       </devtools-toolbar>
       <devtools-toolbar class="tabbed-pane-right-toolbar" slot="right">
-        ${input.rightToolbarItems.map(item => item instanceof UI.Toolbar.ToolbarItem ? item.element : item)}
+        ${input.rightToolbarItems}
       </devtools-toolbar>
       ${repeat(input.openTabs, tab => tab.tabId, tab => html`
         <div id=${tab.tabId}
+             class="vbox flex-auto"
              title=${tab.title}
              ?closeable=${tab.isCloseable}
-             ?selected=${input.activeTabId === tab.tabId}
-             style="display: flex; flex: auto;">
+             ?selected=${input.activeTabId === tab.tabId}>
              ${renderTabIcon(tab)}
              ${renderTabSuffix(tab, input)}
              ${tab.widget ? html`${widget(UI.Widget.WrapperWidget, {widget: tab.widget})}` : nothing}
@@ -386,13 +385,10 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
     };
     this.#view(input, undefined, this.contentElement);
   }
-  #historyManager!: EditingLocationHistoryManager;
-  set historyManager(historyManager: EditingLocationHistoryManager) {
-    this.#historyManager = historyManager;
-  }
+  #historyManager: EditingLocationHistoryManager;
 
-  #leftToolbarItems: Array<UI.Toolbar.ToolbarItem|LitTemplate> = [];
-  set leftToolbarItems(items: Array<UI.Toolbar.ToolbarItem|LitTemplate>) {
+  #leftToolbarItems: LitTemplate[] = [];
+  set leftToolbarItems(items: LitTemplate[]) {
     if (this.#leftToolbarItems === items) {
       return;
     }
@@ -400,8 +396,8 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
     this.#scheduleUpdate();
   }
 
-  #rightToolbarItems: Array<UI.Toolbar.ToolbarItem|LitTemplate> = [];
-  set rightToolbarItems(items: Array<UI.Toolbar.ToolbarItem|LitTemplate>) {
+  #rightToolbarItems: LitTemplate[] = [];
+  set rightToolbarItems(items: LitTemplate[]) {
     if (this.#rightToolbarItems === items) {
       return;
     }
@@ -439,8 +435,8 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
   private tabIds: Map<Workspace.UISourceCode.UISourceCode, string>;
   private files: Map<string, Workspace.UISourceCode.UISourceCode>;
   readonly #loadErrorFiles = new Set<Workspace.UISourceCode.UISourceCode>();
-  #previouslyViewedFilesSetting!: Common.Settings.Setting<SerializedHistoryItem[]>;
-  history!: History;
+  #previouslyViewedFilesSetting: Common.Settings.Setting<SerializedHistoryItem[]>;
+  history: History;
   set previouslyViewedFilesSetting(setting: Common.Settings.Setting<SerializedHistoryItem[]>) {
     if (this.#previouslyViewedFilesSetting === setting) {
       return;
@@ -461,6 +457,10 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
     super(element);
     this.#view = view;
     this.#tabDelegate = new EditorContainerTabDelegate(this);
+    this.#historyManager = new EditingLocationHistoryManager(this);
+    this.#previouslyViewedFilesSetting =
+        Common.Settings.Settings.instance().createLocalSetting('previously-viewed-files', []);
+    this.history = History.fromObject(this.#previouslyViewedFilesSetting.get());
 
     this.tabIds = new Map();
     this.files = new Map();
@@ -478,6 +478,33 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
         Persistence.NetworkPersistenceManager.Events.REQUEST_FOR_HEADER_OVERRIDES_FILE_CHANGED,
         this.#onRequestsForHeaderOverridesFileChanged, this);
   }
+
+  override wasShown(): void {
+    super.wasShown();
+    UI.Context.Context.instance().setFlavor(TabbedEditorContainer, this);
+  }
+
+  override willHide(): void {
+    UI.Context.Context.instance().setFlavor(TabbedEditorContainer, null);
+    super.willHide();
+  }
+
+  override onDetach(): void {
+    super.onDetach();
+    this.detachEditors();
+  }
+
+  static defaultUISourceCodeScores(): Map<Workspace.UISourceCode.UISourceCode, number> {
+    const defaultScores = new Map<Workspace.UISourceCode.UISourceCode, number>();
+    const editorContainer = UI.Context.Context.instance().flavor(TabbedEditorContainer);
+    if (editorContainer) {
+      const uiSourceCodes = editorContainer.historyUISourceCodes();
+      for (let i = 1; i < uiSourceCodes.length; ++i) {  // Skip current element
+        defaultScores.set(uiSourceCodes[i], uiSourceCodes.length - i);
+      }
+    }
+    return defaultScores;
+  }
   #tabsHistory: string[] = [];
   #appendHistory(tabId: string): void {
     this.#tabsHistory.unshift(tabId);
@@ -556,16 +583,41 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
     return Array.from(this.files.values()).map(getViewByUISourceCode).filter(Boolean) as UI.Widget.Widget[];
   }
 
+  showSourceLocation(uiSourceCode: Workspace.UISourceCode.UISourceCode,
+                     location?: SourceFrame.SourceFrame.RevealPosition, omitFocus?: boolean,
+                     omitHighlight?: boolean): void {
+    const currentFrame = this.currentView instanceof UISourceCodeFrame ? this.currentView : null;
+    if (currentFrame) {
+      this.#historyManager.updateCurrentState(currentFrame.uiSourceCode(),
+                                              currentFrame.textEditor.state.selection.main.head);
+    }
+    this.showFile(uiSourceCode);
+    const currentSourceFrame = this.currentView instanceof UISourceCodeFrame ? this.currentView : null;
+    if (currentSourceFrame && location) {
+      currentSourceFrame.revealPosition(location, !omitHighlight);
+    }
+    if (!omitFocus && this.visibleView) {
+      this.visibleView.focus();
+    }
+  }
+
+  rollback(): void {
+    this.#historyManager.rollback();
+  }
+
+  rollover(): void {
+    this.#historyManager.rollover();
+  }
+
   showFile(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
     const binding = Persistence.Persistence.PersistenceImpl.instance().binding(uiSourceCode);
     uiSourceCode = binding ? binding.fileSystem : uiSourceCode;
 
-    const frame = UI.Context.Context.instance().flavor(SourcesView);
     // If the content has already been set and the current frame is showing
     // the incoming uiSourceCode, then fire the event that the file has been loaded.
     // Otherwise, this event will fire as soon as the content has been set.
-    if (frame?.currentSourceFrame()?.contentSet && this.#currentFile === uiSourceCode &&
-        frame?.currentUISourceCode() === uiSourceCode) {
+    if (this.currentView instanceof UISourceCodeFrame && this.currentView.contentSet &&
+        this.#currentFile === uiSourceCode) {
       window.dispatchEvent(new CustomEvent('source-file-loaded',
                                            {bubbles: true, cancelable: true, detail: uiSourceCode.displayName(true)}));
     } else {
@@ -872,6 +924,7 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
   removeUISourceCodes(uiSourceCodes: Workspace.UISourceCode.UISourceCode[]): void {
     const tabIds = [];
     for (const uiSourceCode of uiSourceCodes) {
+      this.#historyManager.removeHistoryForSourceCode(uiSourceCode);
       const tabId = this.tabIds.get(uiSourceCode);
       if (tabId) {
         tabIds.push(tabId);
@@ -995,6 +1048,7 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
     this.files.delete(tabId);
 
     if (uiSourceCode) {
+      this.#historyManager.removeHistoryForSourceCode(uiSourceCode);
       this.removeUISourceCodeListeners(uiSourceCode);
       this.removeSourceFrame(uiSourceCode);