chrome-devtools-frontend 1.0.1675430 → 1.0.1678416

package/front_end/panels/sources/SourcesView.ts

@@ -6,9 +6,9 @@
 import '../../ui/legacy/legacy.js';
 
 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 * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
@@ -16,7 +16,7 @@ import * as Workspace from '../../models/workspace/workspace.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 {html, render} from '../../ui/lit/lit.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as Components from './components/components.js';
@@ -25,6 +25,7 @@ import sourcesViewStyles from './sourcesView.css.js';
 import {
   type EditorSelectedEvent,
   Events as TabbedEditorContainerEvents,
+  type SerializedHistoryItem,
   TabbedEditorContainer,
   type TabbedEditorContainerDelegate,
 } from './TabbedEditorContainer.js';
@@ -32,93 +33,83 @@ import {Events as UISourceCodeFrameEvents, UISourceCodeFrame} from './UISourceCo
 
 const UIStrings = {
   /**
-   * @description Text to open a file.
+   * @description Tooltip for the navigator toggle in the Sources panel. Command to open or show the
+   * sidebar containing the navigator tool.
    */
-  openFile: 'Open file',
+  showNavigator: 'Show navigator',
   /**
-   * @description Text to run commands.
+   * @description Tooltip for the navigator toggle in the Sources panel. Command to close or hide
+   * the sidebar containing the navigator tool.
    */
-  runCommand: 'Run command',
+  hideNavigator: 'Hide navigator',
   /**
-   * @description Text in Sources view of the Sources panel.
+   * @description Screen reader announcement when the navigator sidebar is shown in the Sources panel.
    */
-  workspaceDropInAFolderToSyncSources: 'To sync edits to the workspace, drop a folder with your sources here or',
+  navigatorShown: 'Navigator sidebar shown',
   /**
-   * @description Text in Sources view of the Sources panel.
+   * @description Screen reader announcement when the navigator sidebar is hidden in the Sources panel.
    */
-  selectFolder: 'Select folder',
+  navigatorHidden: 'Navigator sidebar hidden',
   /**
-   * @description Accessible label for Sources placeholder view actions list.
+   * @description Screen reader announcement when the debugger sidebar is shown in the Sources panel.
    */
-  sourceViewActions: 'Source View Actions',
+  debuggerShown: 'Debugger sidebar shown',
+  /**
+   * @description Screen reader announcement when the debugger sidebar is hidden in the Sources panel.
+   */
+  debuggerHidden: 'Debugger sidebar hidden',
+  /**
+   * @description Tooltip for the debugger toggle in the Sources panel. Command to open or show the
+   * sidebar containing the debugger tool.
+   */
+  showDebugger: 'Show debugger',
+  /**
+   * @description Tooltip for the debugger toggle in the Sources panel. Command to close or hide the
+   * sidebar containing the debugger tool.
+   */
+  hideDebugger: 'Hide debugger',
 } as const;
 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[];
-}
+const {widget, widgetRef} = UI.Widget;
 
 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[];
+  searchProvider: UI.SearchableView.Searchable;
+  replaceProvider: UI.SearchableView.Replaceable;
+  searchableViewId: string;
+  scriptViewToolbarItems: UI.Toolbar.ToolbarItem[];
+  bottomToolbarItems: UI.Toolbar.ToolbarItem[];
+  searchableViewFactory: () => UI.Widget.Widget;
+  delegate: TabbedEditorContainerDelegate;
+  previouslyViewedFilesSetting: Common.Settings.Setting<SerializedHistoryItem[]>;
 }
 
 export interface ViewOutput {
-  onSelectFolderClicked: () => void;
+  scriptViewToolbar?: UI.Toolbar.Toolbar;
+  editorContainer?: TabbedEditorContainer;
 }
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
-export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
+export const DEFAULT_VIEW: View = (input, output, target): void => {
+  // clang-format off
   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 class="vbox flex-auto" ${widget(input.searchableViewFactory)}>
+      <devtools-widget class="vbox flex-auto"
+        ${widget(TabbedEditorContainer, {delegate: input.delegate, previouslyViewedFilesSetting: input.previouslyViewedFilesSetting})}
+        ${widgetRef(TabbedEditorContainer, e => { output.editorContainer = e; })}>
       </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);
+      <devtools-toolbar class="script-view-toolbar" style="flex: auto;" ${Directives.ref(el => { output.scriptViewToolbar = el as UI.Toolbar.Toolbar; })}>
+        ${input.scriptViewToolbarItems.map(item => item.element)}
+      </devtools-toolbar>
+      <devtools-toolbar class="bottom-toolbar">
+        ${input.bottomToolbarItems.map(item => item.element)}
+      </devtools-toolbar>
+    </div>`, target);
+  // clang-format on
 };
 
 export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
@@ -128,19 +119,35 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   editorContainer?: TabbedEditorContainer;
   #uiSourceCodes = new Set<Workspace.UISourceCode.UISourceCode>();
   private readonly historyManager: EditingLocationHistoryManager;
-  readonly #scriptViewToolbar: UI.Toolbar.Toolbar;
-  readonly #bottomToolbar: UI.Toolbar.Toolbar;
+  #scriptViewToolbar?: UI.Toolbar.Toolbar;
+  #scriptViewToolbarItems: UI.Toolbar.ToolbarItem[] = [];
+  #bottomToolbarItems: UI.Toolbar.ToolbarItem[] = [];
   private toolbarChangedListener: Common.EventTarget.EventDescriptor|null;
-  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;
 
+  #toggleNavigatorSidebarButton: UI.Toolbar.ToolbarButton;
+  #toggleDebuggerSidebarButton: UI.Toolbar.ToolbarButton;
+  #onToggleNavigatorSidebar?: () => void;
+  #onToggleDebuggerSidebar?: () => void;
+  #isNavigatorSidebarOpen = false;
+  #isDebuggerSidebarOpen = false;
+  #navigatorSidebarInitialized = false;
+  #debuggerSidebarInitialized = false;
+  #isVertical = false;
+  #leftToolbarItems?: UI.Toolbar.ToolbarItem[];
+  #rightToolbarItems?: UI.Toolbar.ToolbarItem[];
+  #breakpointsActive?: boolean;
+  #editorContainerPromise: Promise<TabbedEditorContainer>;
+  #editorContainerResolve!: (container: TabbedEditorContainer) => void;
+  readonly previouslyViewedFilesSetting: Common.Settings.Setting<SerializedHistoryItem[]>;
+
   constructor() {
     super({jslog: `${VisualLogging.pane('editor').track({keydown: 'Escape'})}`});
+    this.#editorContainerPromise = new Promise(resolve => {
+      this.#editorContainerResolve = resolve;
+    });
     this.registerRequiredCSS(sourcesViewStyles);
 
     this.element.id = 'sources-panel-sources-view';
@@ -148,28 +155,31 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
 
     const workspace = Workspace.Workspace.WorkspaceImpl.instance();
 
-    this.#placeholderElement = document.createElement('div');
-    this.#placeholderElement.classList.add('sources-placeholder');
-
     this.sourceViewByUISourceCode = new Map();
 
     this.historyManager = new EditingLocationHistoryManager(this);
 
-    this.#scriptViewToolbar = document.createElement('devtools-toolbar') as UI.Toolbar.Toolbar;
-    this.#scriptViewToolbar.style.flex = 'auto';
-    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);
+    this.#toggleNavigatorSidebarButton =
+        new UI.Toolbar.ToolbarButton(i18nString(UIStrings.showNavigator), 'left-panel-open');
+    this.#toggleNavigatorSidebarButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
+      this.#onToggleNavigatorSidebar?.();
+    });
+    this.#toggleNavigatorSidebarButton.element.setAttribute(
+        'jslog', `${VisualLogging.toggleSubpane().track({click: true}).context('navigator')}`);
 
-    const previouslyViewedFilesSetting =
+    this.#toggleDebuggerSidebarButton =
+        new UI.Toolbar.ToolbarButton(i18nString(UIStrings.showDebugger), 'right-panel-open');
+    this.#toggleDebuggerSidebarButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
+      this.#onToggleDebuggerSidebar?.();
+    });
+    this.#toggleDebuggerSidebarButton.element.setAttribute(
+        'jslog', `${VisualLogging.toggleSubpane().track({click: true}).context('debugger')}`);
+
+    this.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);
+    this.requestUpdate();
 
     UI.UIUtils.startBatchUpdate();
     workspace.uiSourceCodes().forEach(ui => this.addUISourceCode(ui));
@@ -180,8 +190,6 @@ 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;
@@ -216,19 +224,23 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
 
   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(),
+      searchProvider: this,
+      replaceProvider: this,
+      searchableViewId: 'sources-view-search-config',
+      scriptViewToolbarItems: this.#scriptViewToolbarItems,
+      bottomToolbarItems: this.#bottomToolbarItems,
+      searchableViewFactory: this.#searchableViewFactory,
+      delegate: this,
+      previouslyViewedFilesSetting: this.previouslyViewedFilesSetting,
     };
 
+    const that = this;
     const output: ViewOutput = {
-      onSelectFolderClicked: () => {
-        void this.addFileSystemClicked();
+      set scriptViewToolbar(value: UI.Toolbar.Toolbar) {
+        that.#scriptViewToolbar = value;
+      },
+      set editorContainer(value: TabbedEditorContainer) {
+        that.setEditorContainer(value);
       },
     };
 
@@ -237,43 +249,44 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
 
   override onDetach(): void {
     super.onDetach();
-    this.editorContainer?.view.detachChildWidgets();
+    this.editorContainer?.detachEditors();
   }
 
-  private async addFileSystemClicked(): Promise<void> {
-    const result = await Persistence.IsolatedFileSystemManager.IsolatedFileSystemManager.instance().addFileSystem();
-    if (!result) {
+  setEditorContainer(editorContainer: TabbedEditorContainer): void {
+    if (this.editorContainer === editorContainer) {
       return;
     }
-    Host.userMetrics.actionTaken(Host.UserMetrics.Action.WorkspaceSelectFolder);
-    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: [],
-        };
+    if (this.editorContainer) {
+      this.editorContainer.removeEventListener(TabbedEditorContainerEvents.EDITOR_SELECTED, this.editorSelected, this);
+      this.editorContainer.removeEventListener(TabbedEditorContainerEvents.EDITOR_CLOSED, this.editorClosed, this);
+    }
+    this.editorContainer = editorContainer;
+    if (this.editorContainer) {
+      if (this.#leftToolbarItems) {
+        this.editorContainer.leftToolbar().removeToolbarItems();
+        for (const item of this.#leftToolbarItems) {
+          this.editorContainer.leftToolbar().appendToolbarItem(item);
+        }
       }
-      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,
-      };
-    });
+      if (this.#rightToolbarItems) {
+        this.editorContainer.rightToolbar().removeToolbarItems();
+        for (const item of this.#rightToolbarItems) {
+          this.editorContainer.rightToolbar().appendToolbarItem(item);
+        }
+      }
+      if (this.#breakpointsActive !== undefined) {
+        this.editorContainer.element.classList.toggle('breakpoints-deactivated', !this.#breakpointsActive);
+      }
+
+      this.#editorContainerResolve(editorContainer);
+      this.editorContainer.addEventListener(TabbedEditorContainerEvents.EDITOR_SELECTED, this.editorSelected, this);
+      this.editorContainer.addEventListener(TabbedEditorContainerEvents.EDITOR_CLOSED, this.editorClosed, this);
+      UI.UIUtils.startBatchUpdate();
+      for (const uiSourceCode of this.#uiSourceCodes) {
+        this.editorContainer.addUISourceCode(uiSourceCode);
+      }
+      UI.UIUtils.endBatchUpdate();
+    }
   }
 
   static defaultUISourceCodeScores(): Map<Workspace.UISourceCode.UISourceCode, number> {
@@ -289,38 +302,103 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     return defaultScores;
   }
 
-  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));
-    }
+  set onToggleNavigatorSidebar(callback: () => void) {
+    this.#onToggleNavigatorSidebar = callback;
   }
 
-  get leftToolbarItems(): UI.Toolbar.ToolbarItem[] {
-    return this.#leftToolbarItems;
+  set onToggleDebuggerSidebar(callback: () => void) {
+    this.#onToggleDebuggerSidebar = callback;
   }
 
-  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));
+  set isNavigatorSidebarOpen(isOpen: boolean) {
+    const isInitialized = this.#navigatorSidebarInitialized;
+    this.#navigatorSidebarInitialized = true;
+    if (this.#isNavigatorSidebarOpen === isOpen) {
+      return;
+    }
+    this.#isNavigatorSidebarOpen = isOpen;
+    this.#updateNavigatorSidebarButton();
+    if (isInitialized) {
+      UI.ARIAUtils.LiveAnnouncer.alert(isOpen ? i18nString(UIStrings.navigatorShown) :
+                                                i18nString(UIStrings.navigatorHidden));
+    }
+  }
+
+  set isDebuggerSidebarOpen(isOpen: boolean) {
+    const isInitialized = this.#debuggerSidebarInitialized;
+    this.#debuggerSidebarInitialized = true;
+    if (this.#isDebuggerSidebarOpen === isOpen) {
+      return;
+    }
+    this.#isDebuggerSidebarOpen = isOpen;
+    this.#updateDebuggerSidebarButton();
+    if (isInitialized) {
+      UI.ARIAUtils.LiveAnnouncer.alert(isOpen ? i18nString(UIStrings.debuggerShown) :
+                                                i18nString(UIStrings.debuggerHidden));
     }
   }
 
-  get rightToolbarItems(): UI.Toolbar.ToolbarItem[] {
-    return this.#rightToolbarItems;
+  #updateNavigatorSidebarButton(): void {
+    const navHidden = !this.#isNavigatorSidebarOpen;
+    this.#toggleNavigatorSidebarButton.setGlyph(navHidden ? 'left-panel-open' : 'left-panel-close');
+    this.#toggleNavigatorSidebarButton.setTitle(navHidden ? i18nString(UIStrings.showNavigator) :
+                                                            i18nString(UIStrings.hideNavigator));
   }
 
-  bottomToolbar(): UI.Toolbar.Toolbar {
-    return this.#bottomToolbar;
+  #updateDebuggerSidebarButton(): void {
+    const debuggerHidden = !this.#isDebuggerSidebarOpen;
+    const debuggerGlyph = debuggerHidden ? (this.#isVertical ? 'right-panel-open' : 'bottom-panel-open') :
+                                           (this.#isVertical ? 'right-panel-close' : 'bottom-panel-close');
+    this.#toggleDebuggerSidebarButton.setGlyph(debuggerGlyph);
+    this.#toggleDebuggerSidebarButton.setTitle(debuggerHidden ? i18nString(UIStrings.showDebugger) :
+                                                                i18nString(UIStrings.hideDebugger));
   }
 
-  scriptViewToolbar(): UI.Toolbar.Toolbar {
-    return this.#scriptViewToolbar;
+  toggleDebuggerSidebarButtonEnabled(enabled: boolean): void {
+    this.#toggleDebuggerSidebarButton.setEnabled(enabled);
+  }
+
+  setLayoutMode(splitWidget: UI.SplitWidget.SplitWidget, isVertical: boolean, isInWrapper: boolean): void {
+    this.#bottomToolbarItems = [];
+
+    if (isVertical || isInWrapper) {
+      if (this.#scriptViewToolbar) {
+        splitWidget.uninstallResizer(this.#scriptViewToolbar);
+      }
+    } else if (this.#scriptViewToolbar) {
+      splitWidget.installResizer(this.#scriptViewToolbar);
+    }
+
+    this.#isVertical = isVertical;
+    this.#updateNavigatorSidebarButton();
+    this.#updateDebuggerSidebarButton();
+
+    const leftItems: UI.Toolbar.ToolbarItem[] = [];
+    const rightItems: UI.Toolbar.ToolbarItem[] = [];
+
+    if (!isInWrapper) {
+      leftItems.push(this.#toggleNavigatorSidebarButton);
+      if (!Root.Runtime.Runtime.isTraceApp()) {
+        if (isVertical) {
+          rightItems.push(this.#toggleDebuggerSidebarButton);
+        } else {
+          this.#bottomToolbarItems.push(this.#toggleDebuggerSidebarButton);
+        }
+      }
+    }
+
+    this.#leftToolbarItems = leftItems;
+    this.#rightToolbarItems = rightItems;
+
+    if (this.editorContainer) {
+      const editorContainer = this.editorContainer;
+      editorContainer.leftToolbar().removeToolbarItems();
+      leftItems.forEach(item => editorContainer.leftToolbar().appendToolbarItem(item));
+
+      editorContainer.rightToolbar().removeToolbarItems();
+      rightItems.forEach(item => editorContainer.rightToolbar().appendToolbarItem(item));
+    }
+    this.requestUpdate();
   }
 
   override wasShown(): void {
@@ -334,7 +412,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   searchableView(): UI.SearchableView.SearchableView {
-    return this.#searchableView;
+    return this.#searchableViewFactory();
   }
 
   visibleView(): UI.Widget.Widget|null {
@@ -437,16 +515,16 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     const view = this.visibleView();
     if (view instanceof UI.View.SimpleView) {
       void view.toolbarItems().then(items => {
-        this.#scriptViewToolbar.removeToolbarItems();
         if (Array.isArray(items)) {
-          items.map(item => this.#scriptViewToolbar.appendToolbarItem(item));
+          this.#scriptViewToolbarItems = items;
         } else {
           const wrapper = document.createElement('div');
           wrapper.style.display = 'contents';
           // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
           render(items, wrapper);
-          this.#scriptViewToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(wrapper));
+          this.#scriptViewToolbarItems = [new UI.Toolbar.ToolbarItem(wrapper)];
         }
+        this.requestUpdate();
       });
     }
   }
@@ -454,6 +532,9 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   async showSourceLocation(uiSourceCode: Workspace.UISourceCode.UISourceCode,
                            location?: SourceFrame.SourceFrame.RevealPosition, omitFocus?: boolean,
                            omitHighlight?: boolean): Promise<void> {
+    if (!this.editorContainer) {
+      await this.#editorContainerPromise;
+    }
     const currentFrame = this.currentSourceFrame();
     if (currentFrame) {
       this.historyManager.updateCurrentState(currentFrame.uiSourceCode(),
@@ -574,7 +655,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     // SourcesNavigator does not need to update on EditorClosed.
     this.removeToolbarChangedListener();
     this.updateScriptViewToolbarItems();
-    this.#searchableView.resetSearch();
+    this.searchableView().resetSearch();
 
     const data = {
       uiSourceCode,
@@ -590,11 +671,11 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     }
     const currentSourceFrame = event.data.currentView instanceof UISourceCodeFrame ? event.data.currentView : null;
     if (currentSourceFrame) {
-      currentSourceFrame.setSearchableView(this.#searchableView);
+      currentSourceFrame.setSearchableView(this.searchableView());
     }
 
-    this.#searchableView.setReplaceable(Boolean(currentSourceFrame?.canEditSource()));
-    this.#searchableView.refreshSearch();
+    this.searchableView().setReplaceable(Boolean(currentSourceFrame?.canEditSource()));
+    this.searchableView().refreshSearch();
     this.updateToolbarChangedListener();
     this.updateScriptViewToolbarItems();
 
@@ -728,8 +809,18 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     uiSourceCodeFrame.commitEditing();
   }
 
+  #searchableViewFactory = (): UI.SearchableView.SearchableView => {
+    if (!this.#searchableView) {
+      this.#searchableView = new UI.SearchableView.SearchableView(this, this, 'sources.search-sources-tab');
+      this.#searchableView.setMinimalSearchQuerySize(0);
+    }
+    return this.#searchableView;
+  };
+
   toggleBreakpointsActiveState(active: boolean): void {
-    this.editorContainer?.view.element.classList.toggle('breakpoints-deactivated', !active);
+    this.#breakpointsActive = active;
+    this.editorContainer?.element.classList.toggle('breakpoints-deactivated', !active);
+    this.requestUpdate();
   }
 }