fix: align web device chrome buttons

Author: DjDeveloperr

client/src/app/AppShell.tsx

@@ -929,17 +929,14 @@ export function AppShell({
     selectedSimulator?.runtimeName,
     selectedSimulator?.udid,
     chromeGeometryStamp,
-    chromeHasInteractiveButtons ? "buttons" : "no-buttons",
+    chromeHasInteractiveButtons ? "baked-buttons" : "no-buttons",
     chromeHasCrown ? "crown" : "no-crown",
   ]
     .filter(Boolean)
     .join(":");
+  const chromeButtonsRenderedInChrome = chromeHasInteractiveButtons;
   const chromeUrl = selectedSimulator
-    ? buildChromeUrl(
-        selectedSimulator.udid,
-        chromeAssetStamp,
-        !chromeHasInteractiveButtons,
-      )
+    ? buildChromeUrl(selectedSimulator.udid, chromeAssetStamp, true)
     : "";
   const chromeButtonUrl = useCallback(
     (button: string, pressed = false) =>
@@ -968,10 +965,12 @@ export function AppShell({
     if (viewportChromeProfile.hasScreenMask) {
       urls.add(buildScreenMaskUrl(selectedSimulator.udid, chromeAssetStamp));
     }
-    for (const button of viewportChromeProfile.buttons ?? []) {
-      urls.add(chromeButtonUrl(button.name, false));
-      if (button.imageDownName) {
-        urls.add(chromeButtonUrl(button.name, true));
+    if (!chromeButtonsRenderedInChrome) {
+      for (const button of viewportChromeProfile.buttons ?? []) {
+        urls.add(chromeButtonUrl(button.name, false));
+        if (button.imageDownName) {
+          urls.add(chromeButtonUrl(button.name, true));
+        }
       }
     }
     return [...urls].filter(Boolean);
@@ -980,6 +979,7 @@ export function AppShell({
     chromeRequired,
     chromeUrl,
     chromeAssetStamp,
+    chromeButtonsRenderedInChrome,
     selectedSimulator?.udid,
     viewportChromeProfile,
   ]);
@@ -1693,10 +1693,18 @@ export function AppShell({
   const chromeScreenStyle =
     viewportChromeProfile && chromeScreenRect
       ? ({
-          left: `${(chromeScreenRect.x / viewportChromeProfile.totalWidth) * 100}%`,
-          top: `${(chromeScreenRect.y / viewportChromeProfile.totalHeight) * 100}%`,
-          width: `${(chromeScreenRect.width / viewportChromeProfile.totalWidth) * 100}%`,
-          height: `${(chromeScreenRect.height / viewportChromeProfile.totalHeight) * 100}%`,
+          left: viewportChromeProfile.hasScreenMask
+            ? `calc(${(chromeScreenRect.x / viewportChromeProfile.totalWidth) * 100}% - 1px)`
+            : `${(chromeScreenRect.x / viewportChromeProfile.totalWidth) * 100}%`,
+          top: viewportChromeProfile.hasScreenMask
+            ? `calc(${(chromeScreenRect.y / viewportChromeProfile.totalHeight) * 100}% - 1px)`
+            : `${(chromeScreenRect.y / viewportChromeProfile.totalHeight) * 100}%`,
+          width: viewportChromeProfile.hasScreenMask
+            ? `calc(${(chromeScreenRect.width / viewportChromeProfile.totalWidth) * 100}% + 2px)`
+            : `${(chromeScreenRect.width / viewportChromeProfile.totalWidth) * 100}%`,
+          height: viewportChromeProfile.hasScreenMask
+            ? `calc(${(chromeScreenRect.height / viewportChromeProfile.totalHeight) * 100}% + 2px)`
+            : `${(chromeScreenRect.height / viewportChromeProfile.totalHeight) * 100}%`,
           borderRadius: viewportChromeProfile.hasScreenMask
             ? "0"
             : (chromeScreenBorderRadius ?? "0"),
@@ -2729,6 +2737,7 @@ export function AppShell({
         chromeLoaded={chromeLoaded}
         chromeProfile={viewportChromeProfile}
         chromeRequired={chromeRequired}
+        chromeButtonsRenderedInChrome={chromeButtonsRenderedInChrome}
         chromeScreenStyle={viewportScreenStyle}
         chromeUrl={chromeUrl}
         chromeButtonUrl={chromeButtonUrl}

client/src/features/viewport/DeviceChrome.tsx

@@ -16,6 +16,7 @@ interface DeviceChromeProps {
   accessibilityRoots: AccessibilityNode[];
   accessibilitySelectedId: string;
   chromeProfile: ChromeProfile | null;
+  chromeButtonsRenderedInChrome: boolean;
   chromeScreenStyle: CSSProperties | null;
   chromeUrl: string;
   chromeButtonUrl: (button: string, pressed?: boolean) => string;
@@ -61,6 +62,7 @@ export function DeviceChrome({
   accessibilityRoots,
   accessibilitySelectedId,
   chromeProfile,
+  chromeButtonsRenderedInChrome,
   chromeScreenStyle,
   chromeUrl,
   chromeButtonUrl,
@@ -109,6 +111,7 @@ export function DeviceChrome({
           chromeProfile={chromeProfile}
           layer="under"
           onEvent={onChromeButtonEvent}
+          renderImages={!chromeButtonsRenderedInChrome}
         />
         <img
           alt=""
@@ -122,6 +125,7 @@ export function DeviceChrome({
           chromeProfile={chromeProfile}
           layer="over"
           onEvent={onChromeButtonEvent}
+          renderImages={!chromeButtonsRenderedInChrome}
         />
         <ScreenLayer
           accessibilityHoveredId={accessibilityHoveredId}
@@ -218,6 +222,7 @@ function ChromeButtonOverlay({
   chromeProfile,
   layer,
   onEvent,
+  renderImages,
 }: {
   chromeButtonUrl: (button: string, pressed?: boolean) => string;
   chromeProfile: ChromeProfile | null;
@@ -228,6 +233,7 @@ function ChromeButtonOverlay({
     usagePage?: number,
     usage?: number,
   ) => void;
+  renderImages: boolean;
 }) {
   const buttons = chromeProfile?.buttons ?? [];
   if (!chromeProfile || buttons.length === 0) {
@@ -254,6 +260,7 @@ function ChromeButtonOverlay({
             chromeButtonUrl={chromeButtonUrl}
             key={`${button.name}-${button.x}-${button.y}`}
             onEvent={onEvent}
+            renderImages={renderImages}
             totalHeight={chromeProfile.totalHeight}
             totalWidth={chromeProfile.totalWidth}
             wireName={wireName}
@@ -268,6 +275,7 @@ function ChromeButtonHitTarget({
   button,
   chromeButtonUrl,
   onEvent,
+  renderImages,
   totalHeight,
   totalWidth,
   wireName,
@@ -280,6 +288,7 @@ function ChromeButtonHitTarget({
     usagePage?: number,
     usage?: number,
   ) => void;
+  renderImages: boolean;
   totalHeight: number;
   totalWidth: number;
   wireName: string;
@@ -372,7 +381,7 @@ function ChromeButtonHitTarget({
       title={label}
       type="button"
     >
-      {downCompositeUnder ? (
+      {renderImages && downCompositeUnder ? (
         <img
           alt=""
           aria-hidden="true"
@@ -381,18 +390,20 @@ function ChromeButtonHitTarget({
           src={pressedImageUrl}
         />
       ) : null}
-      <img
-        alt=""
-        aria-hidden="true"
-        className="device-chrome-button-image"
-        draggable={false}
-        src={
-          pressed && pressedImageUrl && !downCompositeUnder
-            ? pressedImageUrl
-            : imageUrl
-        }
-      />
-      {!pressed && pressedImageUrl ? (
+      {renderImages ? (
+        <img
+          alt=""
+          aria-hidden="true"
+          className="device-chrome-button-image"
+          draggable={false}
+          src={
+            pressed && pressedImageUrl && !downCompositeUnder
+              ? pressedImageUrl
+              : imageUrl
+          }
+        />
+      ) : null}
+      {renderImages && !pressed && pressedImageUrl ? (
         <img
           alt=""
           aria-hidden="true"

client/src/features/viewport/SimulatorViewport.tsx

@@ -20,6 +20,7 @@ interface SimulatorViewportProps {
   chromeProfile: ChromeProfile | null;
   chromeLoaded: boolean;
   chromeRequired: boolean;
+  chromeButtonsRenderedInChrome: boolean;
   chromeScreenStyle: CSSProperties | null;
   chromeUrl: string;
   deviceFrameStyle: CSSProperties;
@@ -90,6 +91,7 @@ export function SimulatorViewport({
   chromeProfile,
   chromeLoaded,
   chromeRequired,
+  chromeButtonsRenderedInChrome,
   chromeScreenStyle,
   chromeUrl,
   deviceFrameStyle,
@@ -199,6 +201,7 @@ export function SimulatorViewport({
                   accessibilityRoots={accessibilityRoots}
                   accessibilitySelectedId={accessibilitySelectedId}
                   chromeProfile={chromeProfile}
+                  chromeButtonsRenderedInChrome={chromeButtonsRenderedInChrome}
                   chromeScreenStyle={chromeScreenStyle}
                   chromeUrl={chromeUrl}
                   chromeButtonUrl={chromeButtonUrl}