fix: align watch chrome aperture across clients

Author: DjDeveloperr

cli/XCWChromeRenderer.m

@@ -231,6 +231,10 @@ export interface ChromeProfile {
   screenY: number;
   screenWidth: number;
   screenHeight: number;
+  contentX?: number;
+  contentY?: number;
+  contentWidth?: number;
+  contentHeight?: number;
   cornerRadius: number;
   cornerRadii?: {
     topLeft?: number;

client/src/api/types.ts

@@ -84,6 +84,7 @@ import {
   buildShellRotationTransform,
   clampPan,
   clampZoom,
+  computeChromeBackingRect,
   computeChromeScreenBorderRadius,
   computeChromeScreenRect,
   normalizeQuarterTurns,
@@ -149,6 +150,7 @@ const STREAM_TRANSPORT_VALUES = new Set<StreamTransport>([
   "webrtc",
 ]);
 const MOBILE_VIEWPORT_MEDIA_QUERY = "(max-width: 600px)";
+const CHROME_RENDERER_ASSET_VERSION = "chrome-renderer-watch-bezel-inset-22";
 clearLegacyVolatileUiState();
 
 interface StreamQualityResponse {
@@ -231,6 +233,10 @@ function buildChromeProfileAssetStamp(profile: ChromeProfile | null): string {
     profile.screenY,
     profile.screenWidth,
     profile.screenHeight,
+    profile.contentX,
+    profile.contentY,
+    profile.contentWidth,
+    profile.contentHeight,
     profile.cornerRadius,
   ]
     .map(chromeStampNumber)
@@ -981,6 +987,7 @@ export function AppShell({
     selectedSimulator?.runtimeName,
     selectedSimulator?.udid,
     chromeGeometryStamp,
+    CHROME_RENDERER_ASSET_VERSION,
     chromeHasInteractiveButtons ? "baked-buttons" : "no-buttons",
     chromeHasCrown ? "crown" : "no-crown",
   ]
@@ -1755,10 +1762,17 @@ export function AppShell({
     viewportChromeProfile,
     effectiveDeviceNaturalSize,
   );
+  const chromeScreenBackingRect = computeChromeBackingRect(
+    viewportChromeProfile,
+  );
   const chromeScreenBorderRadius = computeChromeScreenBorderRadius(
     viewportChromeProfile,
     chromeScreenRect,
   );
+  const chromeScreenBackingBorderRadius = computeChromeScreenBorderRadius(
+    viewportChromeProfile,
+    chromeScreenBackingRect,
+  );
   const chromeScreenStyle =
     viewportChromeProfile && chromeScreenRect
       ? ({
@@ -1788,6 +1802,16 @@ export function AppShell({
             : {}),
         } satisfies CSSProperties)
       : null;
+  const chromeScreenBackingStyle =
+    viewportChromeProfile && chromeScreenBackingRect
+      ? ({
+          left: `${(chromeScreenBackingRect.x / viewportChromeProfile.totalWidth) * 100}%`,
+          top: `${(chromeScreenBackingRect.y / viewportChromeProfile.totalHeight) * 100}%`,
+          width: `${(chromeScreenBackingRect.width / viewportChromeProfile.totalWidth) * 100}%`,
+          height: `${(chromeScreenBackingRect.height / viewportChromeProfile.totalHeight) * 100}%`,
+          borderRadius: chromeScreenBackingBorderRadius ?? "0",
+        } satisfies CSSProperties)
+      : null;
   const screenOnlyStyle =
     !viewportChromeProfile && chromeProfile && chromeProfile.screenWidth > 0
       ? isAndroidViewport
@@ -2804,6 +2828,7 @@ export function AppShell({
         chromeProfile={viewportChromeProfile}
         chromeRequired={chromeRequired}
         chromeButtonsRenderedInChrome={chromeButtonsRenderedInChrome}
+        chromeScreenBackingStyle={chromeScreenBackingStyle}
         chromeScreenStyle={viewportScreenStyle}
         chromeUrl={chromeUrl}
         chromeButtonUrl={chromeButtonUrl}

client/src/app/AppShell.tsx

@@ -17,6 +17,7 @@ interface DeviceChromeProps {
   accessibilitySelectedId: string;
   chromeProfile: ChromeProfile | null;
   chromeButtonsRenderedInChrome: boolean;
+  chromeScreenBackingStyle: CSSProperties | null;
   chromeScreenStyle: CSSProperties | null;
   chromeUrl: string;
   chromeButtonUrl: (button: string, pressed?: boolean) => string;
@@ -63,6 +64,7 @@ export function DeviceChrome({
   accessibilitySelectedId,
   chromeProfile,
   chromeButtonsRenderedInChrome,
+  chromeScreenBackingStyle,
   chromeScreenStyle,
   chromeUrl,
   chromeButtonUrl,
@@ -120,6 +122,13 @@ export function DeviceChrome({
           draggable={false}
           src={chromeUrl}
         />
+        {chromeScreenBackingStyle ? (
+          <div
+            aria-hidden="true"
+            className="device-screen-backing"
+            style={chromeScreenBackingStyle}
+          />
+        ) : null}
         <ChromeButtonOverlay
           chromeButtonUrl={chromeButtonUrl}
           chromeProfile={chromeProfile}

client/src/features/viewport/DeviceChrome.tsx

@@ -21,6 +21,7 @@ interface SimulatorViewportProps {
   chromeLoaded: boolean;
   chromeRequired: boolean;
   chromeButtonsRenderedInChrome: boolean;
+  chromeScreenBackingStyle: CSSProperties | null;
   chromeScreenStyle: CSSProperties | null;
   chromeUrl: string;
   deviceFrameStyle: CSSProperties;
@@ -92,6 +93,7 @@ export function SimulatorViewport({
   chromeLoaded,
   chromeRequired,
   chromeButtonsRenderedInChrome,
+  chromeScreenBackingStyle,
   chromeScreenStyle,
   chromeUrl,
   deviceFrameStyle,
@@ -202,6 +204,7 @@ export function SimulatorViewport({
                   accessibilitySelectedId={accessibilitySelectedId}
                   chromeProfile={chromeProfile}
                   chromeButtonsRenderedInChrome={chromeButtonsRenderedInChrome}
+                  chromeScreenBackingStyle={chromeScreenBackingStyle}
                   chromeScreenStyle={chromeScreenStyle}
                   chromeUrl={chromeUrl}
                   chromeButtonUrl={chromeButtonUrl}

client/src/features/viewport/SimulatorViewport.tsx

@@ -4,6 +4,7 @@ import {
   buildShellRotationTransform,
   clampPan,
   clampZoom,
+  computeChromeBackingRect,
   computeChromeScreenBorderRadius,
   computeChromeScreenRect,
   computeFitScale,
@@ -88,6 +89,37 @@ describe("viewportMath", () => {
     });
   });
 
+  it("keeps watch display backing separate from stream content", () => {
+    const profile = {
+      contentHeight: 464.062,
+      contentWidth: 381,
+      contentX: 88.5,
+      contentY: 58.469,
+      cornerRadius: 135,
+      screenHeight: 513,
+      screenWidth: 422,
+      screenX: 68,
+      screenY: 34,
+      totalHeight: 581,
+      totalWidth: 573,
+    };
+
+    expect(computeChromeBackingRect(profile)).toEqual({
+      height: 513,
+      width: 422,
+      x: 68,
+      y: 34,
+    });
+    expect(
+      computeChromeScreenRect(profile, { width: 422, height: 514 }),
+    ).toEqual({
+      height: 464.062,
+      width: 381,
+      x: 88.5,
+      y: 58.469,
+    });
+  });
+
   it("only rounds stream corners that touch the physical screen corners", () => {
     const profile = {
       cornerRadius: 40,

client/src/features/viewport/viewportMath.test.ts

@@ -89,6 +89,16 @@ export function mapDisplayedPointToNaturalOrientation(
 export function computeChromeScreenRect(
   chromeProfile: ChromeProfile | null,
   _deviceNaturalSize: Size | null,
+): ScreenRect | null {
+  const contentRect = computeChromeContentRect(chromeProfile);
+  if (contentRect) {
+    return contentRect;
+  }
+  return computeChromeBackingRect(chromeProfile);
+}
+
+export function computeChromeBackingRect(
+  chromeProfile: ChromeProfile | null,
 ): ScreenRect | null {
   if (!chromeProfile) {
     return null;
@@ -113,6 +123,30 @@ export function computeChromeScreenRect(
   };
 }
 
+function computeChromeContentRect(
+  chromeProfile: ChromeProfile | null,
+): ScreenRect | null {
+  if (!chromeProfile) {
+    return null;
+  }
+  if (
+    !Number.isFinite(chromeProfile.contentX) ||
+    !Number.isFinite(chromeProfile.contentY) ||
+    !Number.isFinite(chromeProfile.contentWidth) ||
+    !Number.isFinite(chromeProfile.contentHeight) ||
+    (chromeProfile.contentWidth ?? 0) <= 0 ||
+    (chromeProfile.contentHeight ?? 0) <= 0
+  ) {
+    return null;
+  }
+  return {
+    height: chromeProfile.contentHeight ?? 0,
+    width: chromeProfile.contentWidth ?? 0,
+    x: chromeProfile.contentX ?? 0,
+    y: chromeProfile.contentY ?? 0,
+  };
+}
+
 export function computeChromeScreenBorderRadius(
   chromeProfile: ChromeProfile | null,
   screenRect: ScreenRect | null,
@@ -149,6 +183,27 @@ export function computeChromeScreenBorderRadius(
   const bottomRight = bottomTouches && rightTouches ? radius : 0;
   const bottomLeft = bottomTouches && leftTouches ? radius : 0;
 
+  if (
+    topLeft === 0 &&
+    topRight === 0 &&
+    bottomRight === 0 &&
+    bottomLeft === 0 &&
+    chromeProfile.contentWidth &&
+    chromeProfile.contentHeight &&
+    Math.abs(screenRect.x - (chromeProfile.contentX ?? Number.NaN)) <=
+      epsilon &&
+    Math.abs(screenRect.y - (chromeProfile.contentY ?? Number.NaN)) <=
+      epsilon &&
+    Math.abs(screenRect.width - chromeProfile.contentWidth) <= epsilon &&
+    Math.abs(screenRect.height - chromeProfile.contentHeight) <= epsilon
+  ) {
+    const contentRadius = Math.max(
+      0,
+      Math.min(radius, screenRect.width / 2, screenRect.height / 2),
+    );
+    return `${contentRadius}px ${contentRadius}px ${contentRadius}px ${contentRadius}px`;
+  }
+
   return `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`;
 }
 

client/src/features/viewport/viewportMath.ts

@@ -2374,6 +2374,13 @@
   z-index: 3;
 }
 
+.device-screen-backing {
+  position: absolute;
+  background: #000000;
+  pointer-events: none;
+  z-index: 0;
+}
+
 .device-chrome-button {
   position: absolute;
   display: block;

client/src/styles/components.css

@@ -246,6 +246,10 @@ struct ChromeProfile: Hashable, Decodable, Sendable {
     let screenY: Double
     let screenWidth: Double
     let screenHeight: Double
+    let contentX: Double?
+    let contentY: Double?
+    let contentWidth: Double?
+    let contentHeight: Double?
     let cornerRadius: Double
     let chromeStyle: String?
     let hasScreenMask: Bool?
@@ -259,6 +263,10 @@ struct ChromeProfile: Hashable, Decodable, Sendable {
             screenY,
             screenWidth,
             screenHeight,
+            contentX ?? 0,
+            contentY ?? 0,
+            contentWidth ?? 0,
+            contentHeight ?? 0,
             cornerRadius
         ]
             .map { value in