diff --git a/src/device/webusb.ts b/src/device/webusb.ts index 3b084f2d8..41f3f2b8f 100644 --- a/src/device/webusb.ts +++ b/src/device/webusb.ts @@ -26,6 +26,13 @@ import { WebUSBError, } from "./device"; +// Temporary workaround for ChromeOS 105 bug. +// See https://bugs.chromium.org/p/chromium/issues/detail?id=1363712&q=usb&can=2 +export const isChromeOS105 = (): boolean => { + const userAgent = navigator.userAgent; + return /CrOS/.test(userAgent) && /Chrome\/105\b/.test(userAgent); +}; + /** * A WebUSB connection to a micro:bit device. */ @@ -33,9 +40,10 @@ export class MicrobitWebUSBConnection extends EventEmitter implements DeviceConnection { - status: ConnectionStatus = navigator.usb - ? ConnectionStatus.NO_AUTHORIZED_DEVICE - : ConnectionStatus.NOT_SUPPORTED; + status: ConnectionStatus = + navigator.usb && !isChromeOS105() + ? ConnectionStatus.NO_AUTHORIZED_DEVICE + : ConnectionStatus.NOT_SUPPORTED; /** * The USB device we last connected to. diff --git a/src/workbench/connect-dialogs/WebUSBDialog.tsx b/src/workbench/connect-dialogs/WebUSBDialog.tsx index ee3ee1fe0..0ab33ce7d 100644 --- a/src/workbench/connect-dialogs/WebUSBDialog.tsx +++ b/src/workbench/connect-dialogs/WebUSBDialog.tsx @@ -4,10 +4,12 @@ * SPDX-License-Identifier: MIT */ import { Button } from "@chakra-ui/button"; -import { HStack, Text, VStack } from "@chakra-ui/react"; -import { useCallback } from "react"; +import { Flex, HStack, Image, Stack, Text, VStack } from "@chakra-ui/react"; +import { ReactNode, useCallback } from "react"; import { FormattedMessage } from "react-intl"; import { GenericDialog } from "../../common/GenericDialog"; +import { isChromeOS105 } from "../../device/webusb"; +import chromeOSErrorImage from "./chrome-os-105-error.png"; interface WebUSBDialogProps { callback: () => void; @@ -25,24 +27,32 @@ export const WebUSBDialog = ({ } + body={ + isChromeOS105() ? : + } footer={} size="3xl" /> ); }; -const WebUSBDialogBody = () => { +const DialogBodyWrapper = ({ children }: { children: ReactNode }) => ( + + {children} + +); + +const NotSupportedErrorBody = () => { return ( - + @@ -52,7 +62,43 @@ const WebUSBDialogBody = () => { - + + ); +}; + +const Chrome105ErrorBody = () => { + return ( + + + There is an issue with Chrome OS version 105 and WebUSB* + + + + + Unfortunately “Send to micro:bit” does not work in this particular + Chrome OS version due to a bug in the operating system. The next + version of Chrome OS, version 106, expected October 2022, should + contain a fix for this. + + + Your program will be saved to your computer instead. Follow the + steps on the next screen to transfer it to your micro:bit. + + + * + + + + + + + ); }; @@ -63,7 +109,7 @@ interface WebUSBDialogFooterProps { const WebUSBDialogFooter = ({ onCancel }: WebUSBDialogFooterProps) => { return ( - diff --git a/src/workbench/connect-dialogs/chrome-os-105-error.png b/src/workbench/connect-dialogs/chrome-os-105-error.png new file mode 100644 index 000000000..ac1a26149 Binary files /dev/null and b/src/workbench/connect-dialogs/chrome-os-105-error.png differ