Chromium 90 Compatibility

Diagnosed and fixed 3 critical compatibility failures when the Android tablet's WebView engine upgraded to Chromium 90, silently breaking the Vue.js 2.6 robot control interface. Fixes spanned binary message parsing (ArrayBuffer polyfill for roslib.js CBOR deserialization), CSS layout (gap property fallback for flexbox), and native UI rendering (replacing <select> elements that rendered behind the WebView overlay).

The most critical failure was in roslib.js binary message parsing. The ROS WebSocket bridge sends CBOR-encoded binary messages for high-frequency topics (joint states at 50Hz, force/torque data, weld telemetry). Chromium 90's ArrayBuffer implementation changed how typed array views handle byte offsets during DataView construction, causing the CBOR deserialization layer to fail silently — returning null instead of throwing, so the UI simply stopped updating without any console errors. Built an ArrayBuffer polyfill that normalizes the byte-offset behavior across Chromium versions, restoring binary message parsing without modifying the upstream roslib.js library. Added a startup diagnostic that sends a known CBOR payload and verifies round-trip deserialization before declaring the WebSocket connection healthy.

The CSS `gap` property for flexbox layouts — used extensively across the tablet UI for consistent spacing between buttons, status indicators, and control panels — was not supported in Chromium 90's flexbox implementation (only supported for CSS Grid). Layouts that relied on gap collapsed to zero spacing, causing buttons to overlap, status panels to merge into unreadable blocks, and the jog control panel to lose its grid structure entirely. Implemented a systematic margin fallback using a PostCSS-style find-and-replace across all Vue single-file components: every gap: Xpx in a flex container was replaced with > * + * adjacent-sibling margin rules that produce identical visual spacing without relying on the gap property.

The native `<select>` dropdown elements — used for recipe selection, coordinate frame switching, and speed mode selection — rendered their option lists behind the Android WebView overlay, making them impossible to interact with on the physical tablet despite working correctly in desktop Chrome. Replaced all native <select> elements with `vue-select`, a Vue component that renders its dropdown as a positioned <div> within the DOM rather than relying on the browser's native dropdown rendering. This required updating v-model bindings, event handlers (@change to @input), and option formatting across 12 components. Added a Chromium version detection utility that logs the WebView engine version on startup and flags known compatibility issues in the console.