Add auto-open toggle for style inspect panel

Introduces an auto-open toggle button to the style inspect panel, allowing users to enable or disable automatic panel opening when selecting elements in inspect mode. The toggle state is reflected in the UI and respected in the editor logic, with supporting callbacks and state management added to the relevant classes.

Author: HumbleBee14

src/vs/workbench/contrib/roopik/browser/projectMode/components/styleInspectPanel.ts

@@ -48,6 +48,8 @@ export interface IStyleInspectPanelCallbacks {
 	onUndoAll?: () => void;
 	/** Called when user clicks Apply All */
 	onApplyAll?: () => void;
+	/** Called when user toggles auto-open mode (pin/unpin) */
+	onAutoOpenToggle?: () => void;
 }
 
 /**
@@ -127,6 +129,10 @@ export class StyleInspectPanel {
 	// Pending changes data for Changes tab
 	private pendingMoves: PendingMove[] = [];
 
+	// Auto-open toggle state and button
+	private autoOpenEnabled: boolean = true;
+	private autoOpenToggleBtn: HTMLButtonElement | null = null;
+
 	constructor(
 		private readonly parent: HTMLElement,
 		private readonly callbacks: IStyleInspectPanelCallbacks
@@ -314,6 +320,51 @@ export class StyleInspectPanel {
 		title.textContent = 'Inspect';
 		header.appendChild(title);
 
+		// Right side container for buttons
+		const buttonsContainer = document.createElement('div');
+		buttonsContainer.style.cssText = `
+			display: flex;
+			align-items: center;
+			gap: 4px;
+		`;
+
+		// Auto-open toggle button (ON/OFF text toggle)
+		// When enabled (default): panel auto-opens on element click
+		// When disabled: panel stays closed on element click (unless already open)
+		this.autoOpenToggleBtn = document.createElement('button');
+		this.autoOpenToggleBtn.style.cssText = `
+			background: none;
+			border: 1px solid var(--vscode-input-border);
+			cursor: pointer;
+			padding: 2px 6px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			transition: all 0.15s;
+			border-radius: 3px;
+			font-size: 9px;
+			font-weight: 600;
+			text-transform: uppercase;
+			letter-spacing: 0.5px;
+			min-width: 32px;
+		`;
+		this.updateAutoOpenButtonState();
+		this.autoOpenToggleBtn.addEventListener('mouseenter', () => {
+			if (this.autoOpenToggleBtn) {
+				this.autoOpenToggleBtn.style.borderColor = 'var(--vscode-focusBorder)';
+			}
+		});
+		this.autoOpenToggleBtn.addEventListener('mouseleave', () => {
+			if (this.autoOpenToggleBtn) {
+				this.autoOpenToggleBtn.style.borderColor = 'var(--vscode-input-border)';
+			}
+		});
+		this.autoOpenToggleBtn.addEventListener('click', () => {
+			this.callbacks.onAutoOpenToggle?.();
+		});
+		buttonsContainer.appendChild(this.autoOpenToggleBtn);
+
+		// Close button
 		const closeBtn = document.createElement('button');
 		closeBtn.style.cssText = `
 			background: none;
@@ -332,11 +383,44 @@ export class StyleInspectPanel {
 		closeBtn.addEventListener('mouseenter', () => { closeBtn.style.opacity = '1'; });
 		closeBtn.addEventListener('mouseleave', () => { closeBtn.style.opacity = '0.7'; });
 		closeBtn.addEventListener('click', () => this.hide());
-		header.appendChild(closeBtn);
+		buttonsContainer.appendChild(closeBtn);
+
+		header.appendChild(buttonsContainer);
 
 		return header;
 	}
 
+	/**
+	 * Update the auto-open toggle button visual state
+	 */
+	private updateAutoOpenButtonState(): void {
+		if (!this.autoOpenToggleBtn) {
+			return;
+		}
+
+		if (this.autoOpenEnabled) {
+			// Auto-open is ON
+			this.autoOpenToggleBtn.textContent = 'ON';
+			this.autoOpenToggleBtn.title = 'Auto-open ON - panel opens when clicking elements. Click to disable.';
+			this.autoOpenToggleBtn.style.background = 'var(--vscode-button-background)';
+			this.autoOpenToggleBtn.style.color = 'var(--vscode-button-foreground)';
+		} else {
+			// Auto-open is OFF
+			this.autoOpenToggleBtn.textContent = 'OFF';
+			this.autoOpenToggleBtn.title = 'Auto-open OFF - panel won\'t open when clicking elements (unless already open). Click to enable.';
+			this.autoOpenToggleBtn.style.background = 'transparent';
+			this.autoOpenToggleBtn.style.color = 'var(--vscode-descriptionForeground)';
+		}
+	}
+
+	/**
+	 * Set auto-open enabled state (called from styleInspect.ts)
+	 */
+	setAutoOpenEnabled(enabled: boolean): void {
+		this.autoOpenEnabled = enabled;
+		this.updateAutoOpenButtonState();
+	}
+
 	// ============================================
 	// Tab Bar
 	// ============================================

src/vs/workbench/contrib/roopik/browser/projectMode/editor.ts

@@ -399,10 +399,10 @@ export class Editor extends EditorPane {
 	/**
 	 * Handle element selection from inspect mode
 	 * - Copy HTML to clipboard
-	 * - Open style panel with CSS info
+	 * - Open style panel with CSS info (if auto-open is enabled OR panel already open)
 	 */
 	private async handleElementSelected(message: import('../../common/projectMode/types.js').ElementSelectedMessage): Promise<void> {
-		// Copy HTML to clipboard
+		// Copy HTML to clipboard (always, regardless of auto-open setting)
 		if (message.html) {
 			try {
 				await this.clipboardService.writeText(message.html);
@@ -413,8 +413,17 @@ export class Editor extends EditorPane {
 
 		// Open style panel with element CSS info
 		if (this.browserViewId && message.selector) {
-			// Ensure style panel is initialized
-			if (this.contentContainer && !this.styleInspect.isPanelVisible()) {
+			const panelAlreadyVisible = this.styleInspect.isPanelVisible();
+
+			// If auto-open is disabled AND panel is not already open, skip opening
+			// But if panel is already open, always load the new element's styles
+			if (!this.styleInspect.isAutoOpenEnabled() && !panelAlreadyVisible) {
+				this.logger.info('[InspectMode] Auto-open disabled and panel closed, not opening');
+				return;
+			}
+
+			// Ensure style panel is initialized (only if not already visible)
+			if (this.contentContainer && !panelAlreadyVisible) {
 				this.styleInspect.initialize(this.contentContainer);
 			}
 

src/vs/workbench/contrib/roopik/browser/projectMode/features/styleInspect.ts

@@ -64,6 +64,13 @@ export class StyleInspect {
 	// Flag to prevent DOM invalidation during style fetching
 	private isFetchingStyles: boolean = false;
 
+	// Flag to control auto-opening of style panel when clicking elements in inspect mode
+	// When false, clicking an element will NOT auto-open the panel
+	private autoOpenEnabled: boolean = true;
+
+	// Callback for auto-open toggle state changes
+	private onAutoOpenToggleCallback: ((enabled: boolean) => void) | undefined;
+
 	// Callback for tree node selection (to highlight in browser)
 	private onTreeNodeSelectedCallback: ((nodeId: number) => void) | undefined;
 
@@ -123,6 +130,33 @@ export class StyleInspect {
 		this.onApplyAllCallback = callback;
 	}
 
+	/**
+	 * Set callback for when auto-open toggle state changes
+	 */
+	setOnAutoOpenToggle(callback: (enabled: boolean) => void): void {
+		this.onAutoOpenToggleCallback = callback;
+	}
+
+	/**
+	 * Check if auto-open is enabled
+	 * When false, clicking elements in inspect mode won't auto-open the panel
+	 */
+	isAutoOpenEnabled(): boolean {
+		return this.autoOpenEnabled;
+	}
+
+	/**
+	 * Toggle auto-open state
+	 * Called when user clicks the toggle button in the panel header
+	 */
+	toggleAutoOpen(): void {
+		this.autoOpenEnabled = !this.autoOpenEnabled;
+		// Update panel UI
+		this.panel?.setAutoOpenEnabled(this.autoOpenEnabled);
+		// Notify callback (for persistence or other uses)
+		this.onAutoOpenToggleCallback?.(this.autoOpenEnabled);
+	}
+
 	/**
 	 * Initialize the style panel in a container
 	 */
@@ -158,10 +192,16 @@ export class StyleInspect {
 			},
 			onApplyAll: () => {
 				this.onApplyAllCallback?.();
+			},
+			// Auto-open toggle callback
+			onAutoOpenToggle: () => {
+				this.toggleAutoOpen();
 			}
 		};
 
 		this.panel = new StyleInspectPanel(container, callbacks);
+		// Initialize panel with current auto-open state
+		this.panel.setAutoOpenEnabled(this.autoOpenEnabled);
 	}
 
 	/**