Add browser-computed style values to style inspector

Introduces ComputedStyleValues to capture actual pixel values from the browser after CSS calculations (e.g., clamp, calc, rem). Updates the style inspector panel to prioritize these resolved values for display, and extends the orchestrator to fetch and include them in ElementStyleInfo. This improves accuracy and fidelity in the Design tab by showing the true rendered values.

Author: HumbleBee14

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

@@ -785,14 +785,107 @@ export class StyleInspectPanel {
 	// ============================================
 
 	/**
-	 * Get computed style value for a property from current data
+	 * Get computed style value for a property from current data.
+	 * For Design tab, we want the RESOLVED computed value (actual pixels),
+	 * not the declared CSS value (like clamp(), calc(), rem, etc.)
+	 *
+	 * Priority order for Design tab (Figma-like):
+	 * 1. Browser computed styles (actual pixel values from CDP getComputedStyleForNode)
+	 * 2. All computed properties (fallback)
+	 * 3. Inline styles
+	 * 4. Matched CSS rules
 	 */
 	private getComputedValue(propertyName: string): string {
 		if (!this.currentData) {
 			return '';
 		}
-		const prop = this.currentData.properties.find(p => p.name === propertyName);
-		return prop?.value || '';
+
+		// Map CSS property names to ComputedStyleValues field names
+		const computedStylesMap: Record<string, string> = {
+			'display': 'display',
+			'position': 'position',
+			'flex-direction': 'flexDirection',
+			'justify-content': 'justifyContent',
+			'align-items': 'alignItems',
+			'gap': 'gap',
+			'width': 'width',
+			'height': 'height',
+			'min-width': 'minWidth',
+			'max-width': 'maxWidth',
+			'min-height': 'minHeight',
+			'max-height': 'maxHeight',
+			'margin-top': 'marginTop',
+			'margin-right': 'marginRight',
+			'margin-bottom': 'marginBottom',
+			'margin-left': 'marginLeft',
+			'padding-top': 'paddingTop',
+			'padding-right': 'paddingRight',
+			'padding-bottom': 'paddingBottom',
+			'padding-left': 'paddingLeft',
+			'border-width': 'borderWidth',
+			'border-style': 'borderStyle',
+			'border-color': 'borderColor',
+			'border-radius': 'borderRadius',
+			'font-family': 'fontFamily',
+			'font-size': 'fontSize',
+			'font-weight': 'fontWeight',
+			'line-height': 'lineHeight',
+			'letter-spacing': 'letterSpacing',
+			'text-align': 'textAlign',
+			'color': 'color',
+			'background-color': 'backgroundColor',
+			'opacity': 'opacity',
+			'box-shadow': 'boxShadow',
+			'overflow': 'overflow',
+			'transform': 'transform',
+			'z-index': 'zIndex',
+			'top': 'top',
+			'right': 'right',
+			'bottom': 'bottom',
+			'left': 'left',
+		};
+
+		// 1. Check browser computed styles FIRST - these are the actual rendered values
+		// (e.g., "64px" instead of "clamp(2.5rem, 8vw, 4.5rem)")
+		if (this.currentData.computedStyles) {
+			const fieldName = computedStylesMap[propertyName];
+			if (fieldName) {
+				const value = (this.currentData.computedStyles as Record<string, string | undefined>)[fieldName];
+				if (value) {
+					return value;
+				}
+			}
+		}
+
+		// 2. Fallback to properties array (also computed values but from a different source)
+		if (this.currentData.properties && this.currentData.properties.length > 0) {
+			const prop = this.currentData.properties.find(p => p.name === propertyName);
+			if (prop && prop.value) {
+				return prop.value;
+			}
+		}
+
+		// 3. Fallback to inline styles (declared values)
+		if (this.currentData.inlineStyles && this.currentData.inlineStyles.length > 0) {
+			const inlineProp = this.currentData.inlineStyles.find(p => p.name === propertyName);
+			if (inlineProp) {
+				return inlineProp.value;
+			}
+		}
+
+		// 4. Fallback to matched CSS rules
+		if (this.currentData.matchedRules && this.currentData.matchedRules.length > 0) {
+			for (const rule of this.currentData.matchedRules) {
+				if (rule.properties) {
+					const ruleProp = rule.properties.find(p => p.name === propertyName);
+					if (ruleProp && !ruleProp.isOverridden) {
+						return ruleProp.value;
+					}
+				}
+			}
+		}
+
+		return '';
 	}
 
 	/**

src/vs/workbench/contrib/roopik/common/cssResolvers/types.ts

@@ -147,6 +147,76 @@ export interface MatchedCSSProperty {
 // Element Style Info (Complete Result)
 // ============================================
 
+/**
+ * Computed styles from browser - actual pixel values after CSS calculations
+ */
+export interface ComputedStyleValues {
+	// Layout
+	display?: string;
+	position?: string;
+	flexDirection?: string;
+	justifyContent?: string;
+	alignItems?: string;
+	gap?: string;
+
+	// Box Model (all in pixels)
+	width?: string;
+	height?: string;
+	minWidth?: string;
+	maxWidth?: string;
+	minHeight?: string;
+	maxHeight?: string;
+
+	// Spacing (individual values)
+	marginTop?: string;
+	marginRight?: string;
+	marginBottom?: string;
+	marginLeft?: string;
+	paddingTop?: string;
+	paddingRight?: string;
+	paddingBottom?: string;
+	paddingLeft?: string;
+
+	// Border
+	borderWidth?: string;
+	borderStyle?: string;
+	borderColor?: string;
+	borderRadius?: string;
+
+	// Typography
+	fontFamily?: string;
+	fontSize?: string;
+	fontWeight?: string;
+	lineHeight?: string;
+	letterSpacing?: string;
+	textAlign?: string;
+
+	// Colors
+	color?: string;
+	backgroundColor?: string;
+
+	// Effects
+	opacity?: string;
+	boxShadow?: string;
+	overflow?: string;
+	transform?: string;
+	zIndex?: string;
+
+	// Position values
+	top?: string;
+	right?: string;
+	bottom?: string;
+	left?: string;
+
+	// Bounding box (from getBoundingClientRect)
+	boundingBox?: {
+		x: number;
+		y: number;
+		width: number;
+		height: number;
+	};
+}
+
 /**
  * Complete style information for an inspected element
  */
@@ -192,6 +262,12 @@ export interface ElementStyleInfo {
 	 * Inherited styles from parent elements
 	 */
 	inheritedStyles?: InheritedStyleInfo[];
+
+	/**
+	 * Actual computed pixel values from the browser
+	 * Used by the Design tab to show resolved values (e.g., 16px instead of clamp(...))
+	 */
+	computedStyles?: ComputedStyleValues;
 }
 
 /**

src/vs/workbench/contrib/roopik/electron-main/projectMode/cssResolvers/styleSourceOrchestrator.ts

@@ -16,7 +16,8 @@ import type {
 	InheritedStyleInfo,
 	CDPMatchedStylesResponse,
 	CDPCSSRule,
-	CDPCSSProperty
+	CDPCSSProperty,
+	ComputedStyleValues
 } from '../../../common/cssResolvers/types.js';
 import type { CDPCssService } from './cdpCssService.js';
 import { SourceMapResolver } from './sourceMapResolver.js';
@@ -167,13 +168,16 @@ export class StyleSourceOrchestrator {
 				inheritedStyles
 			);
 
-			// 8. Detect CSS-in-JS
+			// 8. Get actual browser-computed styles (resolves clamp(), calc(), rem, etc.)
+			const computedStyles = await this.getComputedStylesFromCDP(browserViewId, nodeId);
+
+			// 9. Detect CSS-in-JS
 			const cssInJsResult = this.cssInJsDetector.detectFromClassName(
 				classes.join(' '),
 				htmlSource?.file
 			);
 
-			// 9. Build final result
+			// 10. Build final result
 			const result: ElementStyleInfo = {
 				tagName: nodeAttrs.tagName,
 				id: nodeAttrs.id,
@@ -184,7 +188,8 @@ export class StyleSourceOrchestrator {
 				matchedRules,
 				inlineStyles,
 				cssInJs: cssInJsResult.detected ? cssInJsResult : undefined,
-				inheritedStyles: inheritedStyles.length > 0 ? inheritedStyles : undefined
+				inheritedStyles: inheritedStyles.length > 0 ? inheritedStyles : undefined,
+				computedStyles
 			};
 
 			const duration = Date.now() - startTime;
@@ -219,6 +224,96 @@ export class StyleSourceOrchestrator {
 	// Processing Methods
 	// ============================================
 
+	/**
+	 * Get actual computed pixel values from CDP.
+	 * These are the final resolved values after CSS calculations (clamp, calc, rem, etc.)
+	 */
+	private async getComputedStylesFromCDP(
+		browserViewId: number,
+		nodeId: number
+	): Promise<ComputedStyleValues | undefined> {
+		try {
+			const computedStyle = await this.cdpService.getComputedStyle(browserViewId, nodeId);
+			if (!computedStyle || computedStyle.length === 0) {
+				return undefined;
+			}
+
+			// Convert CDP array to our ComputedStyleValues object
+			const styleMap = new Map<string, string>();
+			for (const { name, value } of computedStyle) {
+				styleMap.set(name, value);
+			}
+
+			// Helper to get a value
+			const get = (prop: string) => styleMap.get(prop);
+
+			// Build ComputedStyleValues object with all the properties we need
+			const result: ComputedStyleValues = {
+				// Layout
+				display: get('display'),
+				position: get('position'),
+				flexDirection: get('flex-direction'),
+				justifyContent: get('justify-content'),
+				alignItems: get('align-items'),
+				gap: get('gap'),
+
+				// Box Model
+				width: get('width'),
+				height: get('height'),
+				minWidth: get('min-width'),
+				maxWidth: get('max-width'),
+				minHeight: get('min-height'),
+				maxHeight: get('max-height'),
+
+				// Spacing
+				marginTop: get('margin-top'),
+				marginRight: get('margin-right'),
+				marginBottom: get('margin-bottom'),
+				marginLeft: get('margin-left'),
+				paddingTop: get('padding-top'),
+				paddingRight: get('padding-right'),
+				paddingBottom: get('padding-bottom'),
+				paddingLeft: get('padding-left'),
+
+				// Border
+				borderWidth: get('border-width'),
+				borderStyle: get('border-style'),
+				borderColor: get('border-color'),
+				borderRadius: get('border-radius'),
+
+				// Typography
+				fontFamily: get('font-family'),
+				fontSize: get('font-size'),
+				fontWeight: get('font-weight'),
+				lineHeight: get('line-height'),
+				letterSpacing: get('letter-spacing'),
+				textAlign: get('text-align'),
+
+				// Colors
+				color: get('color'),
+				backgroundColor: get('background-color'),
+
+				// Effects
+				opacity: get('opacity'),
+				boxShadow: get('box-shadow'),
+				overflow: get('overflow'),
+				transform: get('transform'),
+				zIndex: get('z-index'),
+
+				// Position values
+				top: get('top'),
+				right: get('right'),
+				bottom: get('bottom'),
+				left: get('left'),
+			};
+
+			return result;
+		} catch (error) {
+			console.error('[StyleSourceOrchestrator] Failed to get computed styles:', error);
+			return undefined;
+		}
+	}
+
 	/**
 	 * Process CDP matched rules into our format
 	 *