[Design Exploration] Browser-style preview toolbar

apps/studio/src/ipc-handlers.ts

@@ -2742,4 +2742,30 @@ export async function clearWebviewCache(
 	await getOwnedWebviewContents( event, webContentsId ).session.clearCache();
 }
 
+export async function getWebviewNavigationHistory(
+	event: IpcMainInvokeEvent,
+	webContentsId: number
+): Promise< {
+	activeIndex: number;
+	entries: { index: number; title: string; url: string }[];
+} > {
+	const history = getOwnedWebviewContents( event, webContentsId ).navigationHistory;
+	return {
+		activeIndex: history.getActiveIndex(),
+		entries: history.getAllEntries().map( ( entry, index ) => ( {
+			index,
+			title: entry.title,
+			url: entry.url,
+		} ) ),
+	};
+}
+
+export async function goToWebviewNavigationHistoryEntry(
+	event: IpcMainInvokeEvent,
+	webContentsId: number,
+	index: number
+): Promise< void > {
+	getOwnedWebviewContents( event, webContentsId ).navigationHistory.goToIndex( index );
+}
+
 export { showTextContextMenu } from 'src/text-context-menu';

apps/studio/src/preload.ts

@@ -175,6 +175,10 @@ const api: IpcApi = {
 	setWebviewViewport: ( webContentsId, viewport ) =>
 		ipcRendererInvoke( 'setWebviewViewport', webContentsId, viewport ),
 	clearWebviewCache: ( webContentsId ) => ipcRendererInvoke( 'clearWebviewCache', webContentsId ),
+	getWebviewNavigationHistory: ( webContentsId ) =>
+		ipcRendererInvoke( 'getWebviewNavigationHistory', webContentsId ),
+	goToWebviewNavigationHistoryEntry: ( webContentsId, index ) =>
+		ipcRendererInvoke( 'goToWebviewNavigationHistoryEntry', webContentsId, index ),
 	isFullscreen: () => ipcRendererInvoke( 'isFullscreen' ),
 	getAllCustomDomains: () => ipcRendererInvoke( 'getAllCustomDomains' ),
 	saveUserTerminal: ( preferredTerminal ) =>

apps/ui/src/components/open-in-menu/index.test.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom/vitest';
 import { captureException } from '@studio/common/lib/error-reporting';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { toast } from '@/data/app-messages';
 import { useConnector } from '@/data/core';
@@ -209,7 +209,9 @@ describe( 'OpenInMenu', () => {
 	it( 'defaults the split action to the browser', () => {
 		renderMenu( { running: true } );
 
-		fireEvent.click( screen.getByRole( 'button', { name: 'Open in Browser' } ) );
+		const defaultAction = screen.getByRole( 'button', { name: 'Open in Browser' } );
+		expect( defaultAction ).toHaveTextContent( 'Browser' );
+		fireEvent.click( defaultAction );
 
 		expect( openSiteUrl ).toHaveBeenCalledWith( 'site-1', BROWSER_PATH );
 	} );
@@ -245,7 +247,9 @@ describe( 'OpenInMenu', () => {
 			'terminal'
 		);
 
-		fireEvent.click( screen.getByRole( 'button', { name: 'Open in Terminal' } ) );
+		const defaultAction = screen.getByRole( 'button', { name: 'Open in Terminal' } );
+		expect( defaultAction ).toHaveTextContent( 'Terminal' );
+		fireEvent.click( defaultAction );
 		expect( openSiteInTerminal ).toHaveBeenCalledTimes( 2 );
 	} );
 
@@ -280,7 +284,7 @@ function renderMenu( overrides: Partial< SiteDetails > = {}, browserPath: string
 }
 
 function destination( label: string | RegExp ): HTMLElement {
-	return screen.getByText( label ).closest( 'button' )!;
+	return within( screen.getByRole( 'menu' ) ).getByRole( 'button', { name: label } );
 }
 
 function createSite( overrides: Partial< SiteDetails > = {} ): SiteDetails {

apps/ui/src/components/open-in-menu/index.tsx

@@ -88,6 +88,7 @@ export function OpenInMenu( {
 						}
 					>
 						<Icon icon={ lastUsedDestination.logo } size={ 18 } />
+						<span>{ lastUsedDestination.label }</span>
 					</Tooltip.Trigger>
 					<Tooltip.Popup positioner={ <Tooltip.Positioner side="bottom" /> }>
 						{ actionLabel }