PR feedback

Author: kycutler

src/vs/platform/browserElements/common/browserElements.ts

@@ -49,10 +49,10 @@ export interface INativeBrowserElementsService {
 }
 
 /**
- * Extract a display name from outer HTML (e.g., "div#myId.myClass")
+ * Extract a display name from outer HTML (e.g., "div#myId.myClass1.myClass2")
  */
 export function getDisplayNameFromOuterHTML(outerHTML: string): string {
-	const firstElementMatch = outerHTML.match(/^<(\w+)([^>]*?)>/);
+	const firstElementMatch = outerHTML.match(/^<([^ >]+)([^>]*?)>/);
 	if (!firstElementMatch) {
 		throw new Error('No outer element found');
 	}

src/vs/platform/browserElements/electron-main/nativeBrowserElementsMainService.ts

@@ -406,7 +406,7 @@ export class NativeBrowserElementsMainService extends Disposable implements INat
 		});
 	}
 
-	formatMatchedStyles(matched: { inlineStyle?: { cssProperties?: Array<{ name: string; value: string }> }; matchedCSSRules?: Array<{ rule: { selectorList: { selectors: Array<{ text: string }> }; origin: string; style: { cssProperties: Array<{ name: string; value: string }> } } }>; inherited?: Array<{ matchedCSSRules?: Array<{ rule: { selectorList: { selectors: Array<{ text: string }> }; origin: string; style: { cssProperties: Array<{ name: string; value: string }> } } }> }> }): string {
+	formatMatchedStyles(matched: { inlineStyle?: { cssProperties?: Array<{ name: string; value: string }> }; matchedCSSRules?: Array<{ rule: { selectorList: { selectors: Array<{ text: string }> }; origin: string; style: { cssProperties: Array<{ name: string; value: string }> } } }>; inherited?: Array<{ inlineStyle?: { cssText: string }; matchedCSSRules?: Array<{ rule: { selectorList: { selectors: Array<{ text: string }> }; origin: string; style: { cssProperties: Array<{ name: string; value: string }> } } }> }> }): string {
 		const lines: string[] = [];
 
 		// inline
@@ -441,6 +441,14 @@ export class NativeBrowserElementsMainService extends Disposable implements INat
 		if (matched.inherited?.length) {
 			let level = 1;
 			for (const inherited of matched.inherited) {
+				const inline = inherited.inlineStyle;
+				if (inline) {
+					lines.push(`/* Inherited from ancestor level ${level} (inline) */`);
+					lines.push('element {');
+					lines.push(inline.cssText);
+					lines.push('}\n');
+				}
+
 				const rules = inherited.matchedCSSRules || [];
 				for (const ruleEntry of rules) {
 					const rule = ruleEntry.rule;

src/vs/workbench/contrib/browserView/electron-browser/browserEditor.ts

@@ -462,9 +462,9 @@ export class BrowserEditor extends EditorPane {
 	}
 
 	/**
-	 * Select an element and add it to chat
+	 * Start element selection in the browser view, wait for a user selection, and add it to chat.
 	 */
-	public async selectElement(): Promise<void> {
+	async addElementToChat(): Promise<void> {
 		// If selection is already active, cancel it
 		if (this._elementSelectionCts) {
 			this._elementSelectionCts.dispose(true);
@@ -495,7 +495,7 @@ export class BrowserEditor extends EditorPane {
 			// Get the browser container bounds
 			const { width, height } = this._browserContainer.getBoundingClientRect();
 
-			// Get element data from browser
+			// Get element data from user selection
 			const elementData = await this.browserElementsService.getElementData({ x: 0, y: 0, width, height }, cts.token, locator);
 			if (!elementData) {
 				throw new Error('Element data not found');
@@ -506,8 +506,9 @@ export class BrowserEditor extends EditorPane {
 
 			// Prepare HTML/CSS context
 			const displayName = getDisplayNameFromOuterHTML(elementData.outerHTML);
-			let value = 'Attached HTML and CSS Context\n\n' + elementData.outerHTML;
-			if (this.configurationService.getValue('chat.sendElementsToChat.attachCSS')) {
+			const attachCss = this.configurationService.getValue<boolean>('chat.sendElementsToChat.attachCSS');
+			let value = (attachCss ? 'Attached HTML and CSS Context' : 'Attached HTML Context') + '\n\n' + elementData.outerHTML;
+			if (attachCss) {
 				value += '\n\n' + elementData.computedStyle;
 			}
 
@@ -542,7 +543,7 @@ export class BrowserEditor extends EditorPane {
 
 		} catch (error) {
 			if (!cts.token.isCancellationRequested) {
-				this.logService.error('BrowserEditor.selectElement: Failed to select element', error);
+				this.logService.error('BrowserEditor.addElementToChat: Failed to select element', error);
 			}
 		} finally {
 			cts.dispose();

src/vs/workbench/contrib/browserView/electron-browser/browserViewActions.ts

@@ -139,13 +139,13 @@ class ReloadAction extends Action2 {
 	}
 }
 
-class SelectElementAction extends Action2 {
-	static readonly ID = 'workbench.action.browser.selectElement';
+class AddElementToChatAction extends Action2 {
+	static readonly ID = 'workbench.action.browser.addElementToChat';
 
 	constructor() {
 		super({
-			id: SelectElementAction.ID,
-			title: localize2('browser.selectElementAction', 'Add Element to Chat'),
+			id: AddElementToChatAction.ID,
+			title: localize2('browser.addElementToChatAction', 'Add Element to Chat'),
 			icon: Codicon.inspect,
 			f1: true,
 			precondition: ChatContextKeys.enabled,
@@ -161,7 +161,7 @@ class SelectElementAction extends Action2 {
 
 	async run(accessor: ServicesAccessor, browserEditor = accessor.get(IEditorService).activeEditorPane): Promise<void> {
 		if (browserEditor instanceof BrowserEditor) {
-			await browserEditor.selectElement();
+			await browserEditor.addElementToChat();
 		}
 	}
 }
@@ -248,7 +248,7 @@ registerAction2(OpenIntegratedBrowserAction);
 registerAction2(GoBackAction);
 registerAction2(GoForwardAction);
 registerAction2(ReloadAction);
-registerAction2(SelectElementAction);
+registerAction2(AddElementToChatAction);
 registerAction2(ToggleDevToolsAction);
 registerAction2(ClearGlobalBrowserStorageAction);
 registerAction2(ClearWorkspaceBrowserStorageAction);

src/vs/workbench/contrib/chat/browser/attachments/simpleBrowserEditorOverlay.ts

@@ -262,8 +262,9 @@ class SimpleBrowserOverlayWidget {
 		const toAttach: IChatRequestVariableEntry[] = [];
 
 		const widget = await this._chatWidgetService.revealWidget() ?? this._chatWidgetService.lastFocusedWidget;
-		let value = 'Attached HTML and CSS Context\n\n' + elementData.outerHTML;
-		if (this.configurationService.getValue('chat.sendElementsToChat.attachCSS')) {
+		const attachCss = this.configurationService.getValue<boolean>('chat.sendElementsToChat.attachCSS');
+		let value = (attachCss ? 'Attached HTML and CSS Context' : 'Attached HTML Context') + '\n\n' + elementData.outerHTML;
+		if (attachCss) {
 			value += '\n\n' + elementData.computedStyle;
 		}
 		const displayName = getDisplayNameFromOuterHTML(elementData.outerHTML);