chrome-devtools-frontend 1.0.1679704 → 1.0.1681091

package/front_end/panels/elements/elements.ts

@@ -5,6 +5,7 @@
 import './InspectElementModeController.js';
 import './ColorSwatchPopoverIcon.js';
 import './DOMPath.js';
+import './DOMTreeContextMenu.js';
 import './ElementsSidebarPane.js';
 import './ElementsTreeElement.js';
 import './AdoptedStyleSheetTreeElement.js';
@@ -40,6 +41,7 @@ import * as CSSRuleValidator from './CSSRuleValidator.js';
 import * as CSSSpecificityBreakdown from './CSSSpecificityBreakdown.js';
 import * as CSSValueTraceView from './CSSValueTraceView.js';
 import * as DOMPath from './DOMPath.js';
+import * as DOMTreeContextMenu from './DOMTreeContextMenu.js';
 import * as ElementsPanel from './ElementsPanel.js';
 import * as ElementsSidebarPane from './ElementsSidebarPane.js';
 import * as ElementStatePaneWidget from './ElementStatePaneWidget.js';
@@ -77,6 +79,7 @@ export {
   CSSSpecificityBreakdown,
   CSSValueTraceView,
   DOMPath,
+  DOMTreeContextMenu,
   ElementsPanel,
   ElementsSidebarPane,
   ElementStatePaneWidget,

package/front_end/panels/issues/CorsIssueDetailsView.ts

@@ -204,11 +204,14 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
       case IssuesManager.CorsIssue.IssueCode.NO_CORS_REDIRECT_MODE_NOT_FOLLOW:
         this.appendColumnTitle(header, i18nString(UIStrings.sourceLocation));
         break;
+      case IssuesManager.CorsIssue.IssueCode.PREFLIGHT_MISSING_ALLOW_EXTERNAL:
+      case IssuesManager.CorsIssue.IssueCode.PREFLIGHT_INVALID_ALLOW_EXTERNAL:
+      case IssuesManager.CorsIssue.IssueCode.INVALID_LOCAL_NETWORK_ACCESS:
+      case IssuesManager.CorsIssue.IssueCode.LOCAL_NETWORK_ACCESS_PERMISSION_DENIED:
+        // The default columns suffice.
+        break;
       default:
-        Platform.assertUnhandled<IssuesManager.CorsIssue.IssueCode.PREFLIGHT_MISSING_ALLOW_EXTERNAL|
-                                 IssuesManager.CorsIssue.IssueCode.PREFLIGHT_INVALID_ALLOW_EXTERNAL|
-                                 IssuesManager.CorsIssue.IssueCode.INVALID_LOCAL_NETWORK_ACCESS|
-                                 IssuesManager.CorsIssue.IssueCode.LOCAL_NETWORK_ACCESS_PERMISSION_DENIED>(issueCode);
+        Platform.assertNever(issueCode, 'Unknow issue code ' + issueCode);
     }
 
     this.affectedResources.appendChild(header);
@@ -428,14 +431,15 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.#appendStatus(element, details.isWarning);
         this.appendSourceLocation(element, details.location, issue.model()?.getTargetIfNotDisposed());
         break;
-      default:
+      case IssuesManager.CorsIssue.IssueCode.PREFLIGHT_MISSING_ALLOW_EXTERNAL:
+      case IssuesManager.CorsIssue.IssueCode.PREFLIGHT_INVALID_ALLOW_EXTERNAL:
+      case IssuesManager.CorsIssue.IssueCode.INVALID_LOCAL_NETWORK_ACCESS:
+      case IssuesManager.CorsIssue.IssueCode.LOCAL_NETWORK_ACCESS_PERMISSION_DENIED:
         element.appendChild(this.createRequestCell(details.request, opts));
         this.#appendStatus(element, details.isWarning);
-        Platform.assertUnhandled<IssuesManager.CorsIssue.IssueCode.PREFLIGHT_MISSING_ALLOW_EXTERNAL|
-                                 IssuesManager.CorsIssue.IssueCode.PREFLIGHT_INVALID_ALLOW_EXTERNAL|
-                                 IssuesManager.CorsIssue.IssueCode.INVALID_LOCAL_NETWORK_ACCESS|
-                                 IssuesManager.CorsIssue.IssueCode.LOCAL_NETWORK_ACCESS_PERMISSION_DENIED>(issueCode);
         break;
+      default:
+        Platform.assertNever(issueCode, 'Unknown issue code: ' + issueCode);
     }
 
     this.affectedResources.appendChild(element);

package/front_end/panels/mobile_throttling/NetworkPanelIndicator.ts

@@ -36,7 +36,9 @@ export class NetworkPanelIndicator {
         SDK.NetworkManager.MultitargetNetworkManager.Events.BLOCKED_PATTERNS_CHANGED, updateVisibility);
     manager.addEventListener(
         SDK.NetworkManager.MultitargetNetworkManager.Events.INTERCEPTORS_CHANGED, updateVisibility);
-    Common.Settings.Settings.instance().moduleSetting('cache-disabled').addChangeListener(updateVisibility, this);
+    Common.Settings.Settings.instance()
+        .resolve(SDK.SDKSettings.cacheDisabledSettingDescriptor)
+        .addChangeListener(updateVisibility, this);
 
     updateVisibility();
 

package/front_end/panels/network/NetworkConfigView.ts

@@ -203,7 +203,8 @@ export class NetworkConfigView extends UI.Widget.VBox {
   private createCacheSection(): void {
     const section = this.createSection(i18nString(UIStrings.caching), 'network-config-disable-cache');
     section.appendChild(SettingsUI.SettingsUI.createSettingCheckbox(
-        i18nString(UIStrings.disableCache), Common.Settings.Settings.instance().moduleSetting('cache-disabled')));
+        i18nString(UIStrings.disableCache),
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.cacheDisabledSettingDescriptor)));
   }
 
   private createNetworkThrottlingSection(): void {

package/front_end/panels/network/NetworkPanel.ts

@@ -462,7 +462,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
 
     this.panelToolbar.appendSeparator();
     const disableCacheCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
-        Common.Settings.Settings.instance().moduleSetting('cache-disabled'),
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.cacheDisabledSettingDescriptor),
         i18nString(UIStrings.disableCacheWhileDevtoolsIsOpen), i18nString(UIStrings.disableCache));
     this.panelToolbar.appendToolbarItem(disableCacheCheckbox);
 

package/front_end/panels/network/network-meta.ts

@@ -10,11 +10,37 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as SettingsUI from '../../ui/settings/settings.js';
 
 import * as NetworkForward from './forward/forward.js';
 import type * as Network from './network.js';
 
 const UIStrings = {
+  /**
+   * @description Title of a setting under the Network category that can be invoked through the Command Menu.
+   */
+  enableCache: 'Enable cache',
+  /**
+   * @description Title of a setting under the Network category that can be invoked through the Command Menu.
+   */
+  disableCache: 'Disable cache while DevTools is open',
+  /**
+   * @description Tooltip text for a setting that controls the network cache. Disabling the network cache can simulate the network connections of users that are visiting a page for the first time.
+   */
+  networkCacheExplanation:
+      'Disabling the network cache will simulate a network experience similar to a first time visitor.',
+  /**
+   * @description Title of a setting under the Network category.
+   */
+  networkRequestBlocking: 'Network request blocking',
+  /**
+   * @description Title of a setting under the Network category that can be invoked through the Command Menu.
+   */
+  enableNetworkRequestBlocking: 'Enable network request blocking',
+  /**
+   * @description Title of a setting under the Network category that can be invoked through the Command Menu.
+   */
+  disableNetworkRequestBlocking: 'Disable network request blocking',
   /**
    * @description Command for showing the 'Network' tool
    */
@@ -428,6 +454,40 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.requestBlockingEnabledSettingDescriptor, {
+  category: Common.Settings.SettingCategory.NETWORK,
+  title: i18nLazyString(UIStrings.networkRequestBlocking),
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.enableNetworkRequestBlocking),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.disableNetworkRequestBlocking),
+    },
+  ],
+});
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.cacheDisabledSettingDescriptor, {
+  category: Common.Settings.SettingCategory.NETWORK,
+  title: i18nLazyString(UIStrings.disableCache),
+  order: 0,
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.disableCache),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.enableCache),
+    },
+  ],
+  learnMore: {
+    tooltip: i18nLazyString(UIStrings.networkCacheExplanation),
+  },
+});
+
 UI.ViewManager.registerLocationResolver({
   name: UI.ViewManager.ViewLocationValues.NETWORK_SIDEBAR,
   category: UI.ViewManager.ViewLocationCategory.NETWORK,

package/front_end/panels/profiler/HeapDetachedElementsDataGrid.ts

@@ -8,6 +8,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Elements from '../elements/elements.js';
 
 import heapDetachedElementsDataGridStyles from './heapDetachedElementsDataGrid.css.js';
@@ -60,7 +61,7 @@ const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement|
           <th id="detached-node-count">${i18nString(UIStrings.nodeSize)}</th>
         </tr>
         ${input.parsedElements.map(parsed => html`
-          <tr>
+          <tr jslog=${VisualLogging.tableRow('detached-element')}>
             <td>
               <devtools-widget
                 ${widget(Elements.ElementsTreeOutline.DOMTreeWidget, {

package/front_end/panels/profiler/ProfileLauncherView.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
@@ -73,7 +74,7 @@ export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) =
 export const DEFAULT_VIEW: View = (input, output, target) => {
   render(html`
     <style>${profileLauncherViewStyles}</style>
-    <div class="profile-launcher-view-content vbox">
+    <div class="profile-launcher-view-content vbox" jslog=${VisualLogging.section('profiler.launcher')}>
       <div class="vbox">
         <h1>${input.headerText}</h1>
         <form role="radiogroup" aria-label=${input.headerText}>
@@ -81,21 +82,23 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             const radioId = `profile-type-${entry.profileType.id}`;
             const customContent = entry.customContent;
             return html`
-              <input id=${radioId} type="radio" name="profile-type"
-                  .checked=${entry.selected}
-                  ?disabled=${input.isProfiling}
-                  @change=${() => input.onProfileTypeChange(entry.profileType)}
-                  jslog=${VisualLogging.toggle().track({change: true}).context('profiler.profile-type')}
-                />
-              <label for=${radioId}>${entry.profileType.name}</label>
-              <p>${entry.profileType.description}</p>
-              ${customContent ? html`
-                <p>
-                  <span role="group" aria-labelledby=${radioId}>
-                    ${customContent}
-                  </span>
-                </p>
-              ` : nothing}
+              <div class="profile-type-option" jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(entry.profileType.id))}>
+                <input id=${radioId} type="radio" name="profile-type"
+                    .checked=${entry.selected}
+                    ?disabled=${input.isProfiling}
+                    @change=${() => input.onProfileTypeChange(entry.profileType)}
+                    jslog=${VisualLogging.toggle().track({change: true}).context('profiler.profile-type')}
+                  />
+                <label for=${radioId}>${entry.profileType.name}</label>
+                <p>${entry.profileType.description}</p>
+                ${customContent ? html`
+                  <p>
+                    <span role="group" aria-labelledby=${radioId}>
+                      ${customContent}
+                    </span>
+                  </p>
+                ` : nothing}
+              </div>
             `;
           })}
         </form>

package/front_end/panels/profiler/ProfileSidebarTreeElement.ts

@@ -38,7 +38,7 @@ export class ProfileSidebarTreeElement extends UI.TreeOutline.TreeElement {
   profile: ProfileHeader;
   editing: UI.InplaceEditor.Controller|null;
   constructor(dataDisplayDelegate: DataDisplayDelegate, profile: ProfileHeader, className: string) {
-    super('', false);
+    super('', false, 'profile-item');
     this.iconElement = document.createElement('div');
     this.iconElement.classList.add('icon');
     this.titlesElement = document.createElement('div');

package/front_end/panels/security/security.ts

@@ -2,10 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as OriginTreeElement from './OriginTreeElement.js';
 import * as SecurityModel from './SecurityModel.js';
 import * as SecurityPanel from './SecurityPanel.js';
+import * as SecurityPanelSidebar from './SecurityPanelSidebar.js';
+import * as SecurityPanelSidebarTreeElement from './SecurityPanelSidebarTreeElement.js';
 
 export {
+  OriginTreeElement,
   SecurityModel,
   SecurityPanel,
+  SecurityPanelSidebar,
+  SecurityPanelSidebarTreeElement,
 };

package/front_end/panels/sources/SourcesView.ts

@@ -14,12 +14,11 @@ 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 * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
-import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
+import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.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';
 import {EditingLocationHistoryManager} from './EditingLocationHistoryManager.js';
 import sourcesViewStyles from './sourcesView.css.js';
 import {
@@ -27,7 +26,6 @@ import {
   Events as TabbedEditorContainerEvents,
   type SerializedHistoryItem,
   TabbedEditorContainer,
-  type TabbedEditorContainerDelegate,
 } from './TabbedEditorContainer.js';
 import {Events as UISourceCodeFrameEvents, UISourceCodeFrame} from './UISourceCodeFrame.js';
 
@@ -80,7 +78,7 @@ export interface ViewInput {
   searchableViewId: string;
   scriptViewToolbarItems: UI.Toolbar.ToolbarItem[];
   bottomToolbarItems: UI.Toolbar.ToolbarItem[];
-  delegate: TabbedEditorContainerDelegate;
+  historyManager: EditingLocationHistoryManager;
   previouslyViewedFilesSetting: Common.Settings.Setting<SerializedHistoryItem[]>;
 }
 
@@ -104,7 +102,7 @@ export const DEFAULT_VIEW: View = (input, output, target): void => {
       ${widgetRef(UI.SearchableView.SearchableView, e => { output.searchableView = e; })}
     >
       <devtools-widget class="vbox flex-auto"
-        ${widget(TabbedEditorContainer, {delegate: input.delegate, previouslyViewedFilesSetting: input.previouslyViewedFilesSetting})}
+        ${widget(TabbedEditorContainer, {historyManager: input.historyManager, previouslyViewedFilesSetting: input.previouslyViewedFilesSetting})}
         ${widgetRef(TabbedEditorContainer, e => { output.editorContainer = e; })}>
       </devtools-widget>
     </devtools-widget>
@@ -120,9 +118,8 @@ export const DEFAULT_VIEW: View = (input, output, target): void => {
 };
 
 export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
-    implements TabbedEditorContainerDelegate, UI.SearchableView.Searchable, UI.SearchableView.Replaceable {
+    implements UI.SearchableView.Searchable, UI.SearchableView.Replaceable {
   #searchableView!: UI.SearchableView.SearchableView;
-  private readonly sourceViewByUISourceCode: Map<Workspace.UISourceCode.UISourceCode, UI.Widget.Widget>;
   editorContainer?: TabbedEditorContainer;
   #uiSourceCodes = new Set<Workspace.UISourceCode.UISourceCode>();
   private readonly historyManager: EditingLocationHistoryManager;
@@ -162,8 +159,6 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
 
     const workspace = Workspace.Workspace.WorkspaceImpl.instance();
 
-    this.sourceViewByUISourceCode = new Map();
-
     this.historyManager = new EditingLocationHistoryManager(this);
 
     this.toolbarChangedListener = null;
@@ -236,7 +231,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
       searchableViewId: 'sources-view-search-config',
       scriptViewToolbarItems: this.#scriptViewToolbarItems,
       bottomToolbarItems: this.#bottomToolbarItems,
-      delegate: this,
+      historyManager: this.historyManager,
       previouslyViewedFilesSetting: this.previouslyViewedFilesSetting,
     };
 
@@ -512,7 +507,6 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     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]);
     }
   }
@@ -563,96 +557,12 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     }
   }
 
-  private createSourceView(uiSourceCode: Workspace.UISourceCode.UISourceCode): UI.Widget.Widget {
-    let sourceView;
-    const contentType = uiSourceCode.contentType();
-
-    if (contentType === Common.ResourceType.resourceTypes.Image || uiSourceCode.mimeType().startsWith('image/')) {
-      sourceView = new SourceFrame.ImageView.ImageView(uiSourceCode.mimeType(), uiSourceCode);
-    } else if (contentType === Common.ResourceType.resourceTypes.Font || uiSourceCode.mimeType().includes('font')) {
-      sourceView = new SourceFrame.FontView.FontView(uiSourceCode.mimeType(), uiSourceCode);
-    } else if (uiSourceCode.name() === HEADER_OVERRIDES_FILENAME) {
-      sourceView = new Components.HeadersView.HeadersView(uiSourceCode);
-    } else {
-      sourceView = new UISourceCodeFrame(uiSourceCode);
-      this.historyManager.trackSourceFrameCursorJumps(sourceView);
-    }
-
-    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.TitleChanged, this.#uiSourceCodeTitleChanged, this);
-
-    this.sourceViewByUISourceCode.set(uiSourceCode, sourceView);
-    return sourceView;
-  }
-
-  #sourceViewTypeForWidget(widget: UI.Widget.Widget): SourceViewType {
-    if (widget instanceof SourceFrame.ImageView.ImageView) {
-      return SourceViewType.IMAGE_VIEW;
-    }
-    if (widget instanceof SourceFrame.FontView.FontView) {
-      return SourceViewType.FONT_VIEW;
-    }
-    if (widget instanceof Components.HeadersView.HeadersView) {
-      return SourceViewType.HEADERS_VIEW;
-    }
-    return SourceViewType.SOURCE_VIEW;
-  }
-
-  #sourceViewTypeForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): SourceViewType {
-    if (uiSourceCode.name() === HEADER_OVERRIDES_FILENAME) {
-      return SourceViewType.HEADERS_VIEW;
-    }
-    const contentType = uiSourceCode.contentType();
-    switch (contentType) {
-      case Common.ResourceType.resourceTypes.Image:
-        return SourceViewType.IMAGE_VIEW;
-      case Common.ResourceType.resourceTypes.Font:
-        return SourceViewType.FONT_VIEW;
-      default:
-        return SourceViewType.SOURCE_VIEW;
-    }
-  }
-
-  #uiSourceCodeTitleChanged(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
-    const uiSourceCode = event.data;
-    const widget = this.sourceViewByUISourceCode.get(uiSourceCode);
-    if (widget) {
-      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.#uiSourceCodes.add(uiSourceCode);
-        void this.showSourceLocation(uiSourceCode);
-      }
-    }
+  viewForFile(uiSourceCode: Workspace.UISourceCode.UISourceCode): UI.Widget.Widget|undefined {
+    return this.editorContainer?.viewForFile(uiSourceCode);
   }
 
   getSourceView(uiSourceCode: Workspace.UISourceCode.UISourceCode): UI.Widget.Widget|undefined {
-    return this.sourceViewByUISourceCode.get(uiSourceCode);
-  }
-
-  private getOrCreateSourceView(uiSourceCode: Workspace.UISourceCode.UISourceCode): UI.Widget.Widget {
-    return this.sourceViewByUISourceCode.get(uiSourceCode) || this.createSourceView(uiSourceCode);
-  }
-
-  recycleUISourceCodeFrame(sourceFrame: UISourceCodeFrame, uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    sourceFrame.uiSourceCode().removeEventListener(Workspace.UISourceCode.Events.TitleChanged,
-                                                   this.#uiSourceCodeTitleChanged, this);
-    this.sourceViewByUISourceCode.delete(sourceFrame.uiSourceCode());
-    sourceFrame.setUISourceCode(uiSourceCode);
-    this.sourceViewByUISourceCode.set(uiSourceCode, sourceFrame);
-    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.TitleChanged, this.#uiSourceCodeTitleChanged, this);
-  }
-
-  viewForFile(uiSourceCode: Workspace.UISourceCode.UISourceCode): UI.Widget.Widget {
-    return this.getOrCreateSourceView(uiSourceCode);
-  }
-
-  private removeSourceFrame(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    const sourceView = this.sourceViewByUISourceCode.get(uiSourceCode);
-    this.sourceViewByUISourceCode.delete(uiSourceCode);
-    if (sourceView && sourceView instanceof UISourceCodeFrame) {
-      (sourceView).dispose();
-    }
-    uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.TitleChanged, this.#uiSourceCodeTitleChanged, this);
+    return this.editorContainer?.getCreatedSourceView(uiSourceCode);
   }
 
   private editorClosed(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
@@ -933,12 +843,3 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     return false;
   }
 }
-
-const HEADER_OVERRIDES_FILENAME = '.headers';
-
-const enum SourceViewType {
-  IMAGE_VIEW = 'ImageView',
-  FONT_VIEW = 'FontView',
-  HEADERS_VIEW = 'HeadersView',
-  SOURCE_VIEW = 'SourceView',
-}

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -20,6 +20,8 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 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 {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
@@ -73,17 +75,24 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/sources/TabbedEditorContainer.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export interface TabbedEditorContainerDelegate {
-  viewForFile(uiSourceCode: Workspace.UISourceCode.UISourceCode): UI.Widget.Widget;
 
-  recycleUISourceCodeFrame(sourceFrame: UISourceCodeFrame, uiSourceCode: Workspace.UISourceCode.UISourceCode): void;
+const enum SourceViewType {
+  IMAGE_VIEW = 'ImageView',
+  FONT_VIEW = 'FontView',
+  HEADERS_VIEW = 'HeadersView',
+  SOURCE_VIEW = 'SourceView',
 }
+const HEADER_OVERRIDES_FILENAME = '.headers';
 
 let tabId = 0;
 
 export class TabbedEditorContainer extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
     UI.Widget.VBox) {
-  delegate!: TabbedEditorContainerDelegate;
+  #historyManager!: EditingLocationHistoryManager;
+  set historyManager(historyManager: EditingLocationHistoryManager) {
+    this.#historyManager = historyManager;
+  }
+  private readonly sourceViewByUISourceCode = new Map<Workspace.UISourceCode.UISourceCode, UI.Widget.Widget>();
   private readonly tabbedPane: UI.TabbedPane.TabbedPane;
   private tabIds: Map<Workspace.UISourceCode.UISourceCode, string>;
   private readonly files: Map<string, Workspace.UISourceCode.UISourceCode>;
@@ -167,7 +176,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.eventMixin<Event
       const networkView = this.tabbedPane.tabView(networkTabId);
       const tabIndex = this.tabbedPane.tabIndex(networkTabId);
       if (networkView instanceof UISourceCodeFrame) {
-        this.delegate.recycleUISourceCodeFrame(networkView, binding.fileSystem);
+        this.recycleUISourceCodeFrame(networkView, binding.fileSystem);
         fileSystemTabId = this.appendFileTab(binding.fileSystem, false, tabIndex, networkView);
       } else {
         fileSystemTabId = this.appendFileTab(binding.fileSystem, false, tabIndex);
@@ -348,7 +357,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.eventMixin<Event
       // We are showing a different UISourceCode in the same tab (because it has the same URL). This
       // commonly happens when switching between workers or iframes containing the same code, and while the
       // contents are usually identical they may not be and it is important to show users when they aren't.
-      this.delegate.recycleUISourceCodeFrame(this.currentView, uiSourceCode);
+      this.recycleUISourceCodeFrame(this.currentView, uiSourceCode);
       if (uiSourceCode.project().type() !== Workspace.Workspace.projectTypes.FileSystem) {
         // Disable editing, because it may confuse users that only one of the copies of this code changes.
         uiSourceCode.disableEdit();
@@ -494,6 +503,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.eventMixin<Event
       if (this.idToUISourceCode.get(uiSourceCode.canonicalScriptId()) === uiSourceCode) {
         this.idToUISourceCode.delete(uiSourceCode.canonicalScriptId());
       }
+      this.removeSourceFrame(uiSourceCode);
     }
     this.tabbedPane.closeTabs(tabIds);
   }
@@ -527,7 +537,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.eventMixin<Event
   private appendFileTab(
       uiSourceCode: Workspace.UISourceCode.UISourceCode, userGesture?: boolean, index?: number,
       replaceView?: UI.Widget.Widget): string {
-    const view = replaceView || this.delegate.viewForFile(uiSourceCode);
+    const view = replaceView || this.viewForFile(uiSourceCode);
     const title = this.titleForFile(uiSourceCode);
     const tooltip = this.tooltipForFile(uiSourceCode);
 
@@ -597,6 +607,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.eventMixin<Event
 
     if (uiSourceCode) {
       this.removeUISourceCodeListeners(uiSourceCode);
+      this.removeSourceFrame(uiSourceCode);
 
       this.dispatchEventToListeners(Events.EDITOR_CLOSED, uiSourceCode);
 
@@ -687,6 +698,18 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.eventMixin<Event
   private uiSourceCodeTitleChanged(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>):
       void {
     const uiSourceCode = event.data;
+
+    const widget = this.sourceViewByUISourceCode.get(uiSourceCode);
+    if (widget) {
+      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.addUISourceCode(uiSourceCode);
+        this.showFile(uiSourceCode);
+        return;
+      }
+    }
+
     this.updateFileTitle(uiSourceCode);
     this.updateHistory();
 
@@ -785,6 +808,86 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.eventMixin<Event
     void UI.ViewManager.ViewManager.instance().showView('navigator-files');
   }
 
+  getCreatedSourceView(uiSourceCode: Workspace.UISourceCode.UISourceCode): UI.Widget.Widget|undefined {
+    return this.sourceViewByUISourceCode.get(uiSourceCode);
+  }
+
+  viewForFile(uiSourceCode: Workspace.UISourceCode.UISourceCode): UI.Widget.Widget {
+    return this.getOrCreateSourceView(uiSourceCode);
+  }
+
+  private getOrCreateSourceView(uiSourceCode: Workspace.UISourceCode.UISourceCode): UI.Widget.Widget {
+    return this.sourceViewByUISourceCode.get(uiSourceCode) || this.createSourceView(uiSourceCode);
+  }
+
+  private createSourceView(uiSourceCode: Workspace.UISourceCode.UISourceCode): UI.Widget.Widget {
+    let sourceView;
+    const contentType = uiSourceCode.contentType();
+
+    if (contentType === Common.ResourceType.resourceTypes.Image || uiSourceCode.mimeType().startsWith('image/')) {
+      sourceView = new SourceFrame.ImageView.ImageView(uiSourceCode.mimeType(), uiSourceCode);
+    } else if (contentType === Common.ResourceType.resourceTypes.Font || uiSourceCode.mimeType().includes('font')) {
+      sourceView = new SourceFrame.FontView.FontView(uiSourceCode.mimeType(), uiSourceCode);
+    } else if (uiSourceCode.name() === HEADER_OVERRIDES_FILENAME) {
+      sourceView = new Components.HeadersView.HeadersView(uiSourceCode);
+    } else {
+      sourceView = new UISourceCodeFrame(uiSourceCode);
+      this.#historyManager.trackSourceFrameCursorJumps(sourceView);
+    }
+
+    this.sourceViewByUISourceCode.set(uiSourceCode, sourceView);
+    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.TitleChanged, this.uiSourceCodeTitleChanged, this);
+    return sourceView;
+  }
+
+  recycleUISourceCodeFrame(sourceFrame: UISourceCodeFrame, uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
+    sourceFrame.uiSourceCode().removeEventListener(Workspace.UISourceCode.Events.TitleChanged,
+                                                   this.uiSourceCodeTitleChanged, this);
+    this.sourceViewByUISourceCode.delete(sourceFrame.uiSourceCode());
+    sourceFrame.setUISourceCode(uiSourceCode);
+    this.sourceViewByUISourceCode.set(uiSourceCode, sourceFrame);
+    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.TitleChanged, this.uiSourceCodeTitleChanged, this);
+  }
+
+  private removeSourceFrame(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
+    const sourceView = this.sourceViewByUISourceCode.get(uiSourceCode);
+    this.sourceViewByUISourceCode.delete(uiSourceCode);
+    if (sourceView) {
+      uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.TitleChanged, this.uiSourceCodeTitleChanged, this);
+    }
+    if (sourceView && sourceView instanceof UISourceCodeFrame) {
+      (sourceView).dispose();
+    }
+  }
+
+  #sourceViewTypeForWidget(widget: UI.Widget.Widget): SourceViewType {
+    if (widget instanceof SourceFrame.ImageView.ImageView) {
+      return SourceViewType.IMAGE_VIEW;
+    }
+    if (widget instanceof SourceFrame.FontView.FontView) {
+      return SourceViewType.FONT_VIEW;
+    }
+    if (widget instanceof Components.HeadersView.HeadersView) {
+      return SourceViewType.HEADERS_VIEW;
+    }
+    return SourceViewType.SOURCE_VIEW;
+  }
+
+  #sourceViewTypeForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): SourceViewType {
+    if (uiSourceCode.name() === HEADER_OVERRIDES_FILENAME) {
+      return SourceViewType.HEADERS_VIEW;
+    }
+    const contentType = uiSourceCode.contentType();
+    switch (contentType) {
+      case Common.ResourceType.resourceTypes.Image:
+        return SourceViewType.IMAGE_VIEW;
+      case Common.ResourceType.resourceTypes.Font:
+        return SourceViewType.FONT_VIEW;
+      default:
+        return SourceViewType.SOURCE_VIEW;
+    }
+  }
+
   currentFile(): Workspace.UISourceCode.UISourceCode|null {
     return this.#currentFile || null;
   }