Add new 'open externally' button

front_end/global_typings/react_native.d.ts

@@ -9,6 +9,7 @@ declare global {
   namespace globalThis {
     var enableReactNativePerfMetrics: boolean|undefined;
     var enableReactNativePerfMetricsGlobalPostMessage: boolean|undefined;
+    var enableReactNativeOpenSourceFilesExternally: boolean|undefined;
     var FB_ONLY__reactNativeFeedbackLink: string|undefined;
   }
 }

front_end/panels/sources/TabbedEditorContainer.ts

@@ -415,6 +415,37 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
     }
   }
 
+  canOpenExternally(tabId: string): boolean {
+    if (!globalThis.enableReactNativeOpenSourceFilesExternally) {
+      return false;
+    }
+
+    const uiSourceCode = this.files.get(tabId);
+    return uiSourceCode?.url()?.startsWith('http') ?? false;
+  }
+
+  openExternally(tabId: string): void {
+    const uiSourceCode = this.files.get(tabId);
+    if (!uiSourceCode) {
+      return;
+    }
+
+    const body: {url: string, lineNumber?: number} = {
+      url: uiSourceCode.url(),
+    };
+
+    if (this.currentFile() === uiSourceCode && this.currentView instanceof SourceFrame.SourceFrame.SourceFrameImpl) {
+      const editor = this.currentView.textEditor.editor;
+      const line = editor.state.doc.lineAt(editor.state.selection.main.head);
+      body.lineNumber = line.number;
+    }
+
+    fetch('/open-stack-frame', {
+      method: 'POST',
+      body: JSON.stringify(body),
+    }).catch(e => console.error(e));
+  }
+
   private canonicalUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode):
       Workspace.UISourceCode.UISourceCode {
     // Check if we have already a UISourceCode for this url
@@ -882,4 +913,12 @@ export class EditorContainerTabDelegate implements UI.TabbedPane.TabbedPaneTabDe
   onContextMenu(tabId: string, contextMenu: UI.ContextMenu.ContextMenu): void {
     this.editorContainer.onContextMenu(tabId, contextMenu);
   }
+
+  canOpenExternally(tabId: string): boolean {
+    return this.editorContainer.canOpenExternally(tabId);
+  }
+
+  openExternally(tabId: string): void {
+    this.editorContainer.openExternally(tabId);
+  }
 }

front_end/ui/legacy/TabbedPane.ts

@@ -49,6 +49,10 @@ const UIStrings = {
    *@description The aria label for the button to open more tabs at the right tabbed pane in Elements tools
    */
   moreTabs: 'More tabs',
+  /**
+   *@description Text for icon button to 'open in editor' of a Tabbed Pane
+   */
+  openExternally: 'Open externally',
   /**
    *@description Text in Tabbed Pane
    *@example {tab} PH1
@@ -1147,6 +1151,12 @@ export class TabbedPaneTab {
       tabElement.classList.add('preview');
     }
 
+    if (this.delegate?.canOpenExternally?.(this.id)) {
+      const openExternallyIcon = this.createOpenExternallyIconButton();
+      tabElement.appendChild(openExternallyIcon);
+      tabElement.classList.add('closeable');
+    }
+
     if (this.closeable) {
       const closeIcon = this.createCloseIconButton();
       tabElement.appendChild(closeIcon);
@@ -1172,6 +1182,22 @@ export class TabbedPaneTab {
     return tabElement as HTMLElement;
   }
 
+  private createOpenExternallyIconButton(): HTMLButtonElement {
+    const iconContainer = document.createElement('button');
+    iconContainer.classList.add('close-button', 'tabbed-pane-open-externally-button');
+    const icon = new IconButton.Icon.Icon();
+    icon.data = {
+      iconName: 'open-externally',
+      color: 'var(--tabbed-pane-close-icon-color)',
+      width: '14px',
+    };
+    iconContainer.appendChild(icon);
+    iconContainer.setAttribute('role', 'button');
+    iconContainer.setAttribute('title', i18nString(UIStrings.openExternally));
+    iconContainer.setAttribute('aria-label', i18nString(UIStrings.openExternally));
+    return iconContainer;
+  }
+
   private createCloseIconButton(): HTMLButtonElement {
     const closeIconContainer = document.createElement('button');
     closeIconContainer.classList.add('close-button', 'tabbed-pane-close-button');
@@ -1209,8 +1235,18 @@ export class TabbedPaneTab {
         element?.parentElement?.classList.contains('tabbed-pane-close-button') || false;
   }
 
+  private isOpenExternallyIconClicked(element: HTMLElement): boolean {
+    return element?.classList.contains('tabbed-pane-open-externally-button') ||
+        element?.parentElement?.classList.contains('tabbed-pane-open-externally-button') || false;
+  }
+
   private tabClicked(ev: Event): void {
     const event = (ev as MouseEvent);
+    if (this.isOpenExternallyIconClicked(event.target as HTMLElement)) {
+      event.consume(true);
+      this.delegate?.openExternally?.(this.id);
+      return;
+    }
     const middleButton = event.button === 1;
     const shouldClose = this.closeable && (middleButton || this.isCloseIconClicked(event.target as HTMLElement));
     if (!shouldClose) {
@@ -1351,4 +1387,6 @@ const tabIcons = new WeakMap<Element, Element>();
 export interface TabbedPaneTabDelegate {
   closeTabs(tabbedPane: TabbedPane, ids: string[]): void;
   onContextMenu(tabId: string, contextMenu: ContextMenu): void;
+  canOpenExternally?(tabId: string): boolean;
+  openExternally?(tabId: string): void;
 }

front_end/ui/legacy/tabbedPane.css

@@ -184,13 +184,17 @@
   --override-dragging-box-shadow-color: rgb(230 230 230 / 37%);
 }
 
-.tabbed-pane-header-tab .tabbed-pane-close-button {
+.tabbed-pane-header-tab .tabbed-pane-close-button,
+.tabbed-pane-header-tab .tabbed-pane-open-externally-button {
   margin: 0 -3px 0 4px;
   visibility: hidden;
 }
 
 .tabbed-pane-header-tab:hover .tabbed-pane-close-button,
-.tabbed-pane-header-tab.selected .tabbed-pane-close-button {
+.tabbed-pane-header-tab.selected .tabbed-pane-close-button,
+
+.tabbed-pane-header-tab:hover .tabbed-pane-open-externally-button,
+.tabbed-pane-header-tab.selected .tabbed-pane-open-externally-button {
   visibility: visible;
 }
 
@@ -382,7 +386,9 @@
   }
 
   .tabbed-pane-header-tab:hover .tabbed-pane-close-button,
-  .tabbed-pane-shadow .tabbed-pane-header-tab:focus-visible .tabbed-pane-close-button {
+    .tabbed-pane-shadow .tabbed-pane-header-tab:focus-visible .tabbed-pane-close-button,
+    .tabbed-pane-header-tab:hover .tabbed-pane-open-externally-button,
+    .tabbed-pane-shadow .tabbed-pane-header-tab:focus-visible .tabbed-pane-open-externally-button {
     color: HighlightText;
   }