fix(dialogs): backward compatible dialog usage (#2816)

frontend/common/useDialog.js

@@ -10,13 +10,17 @@ export const useDialog = () => {
     const dialog_ref = useRef(/** @type {HTMLDialogElement?} */ (null))
 
     useLayoutEffect(() => {
-        if (dialog_ref.current != null) dialogPolyfill.registerDialog(dialog_ref.current)
+        if (dialog_ref.current != null && typeof HTMLDialogElement !== "function") dialogPolyfill.registerDialog(dialog_ref.current)
     }, [dialog_ref.current])
 
     return useMemo(() => {
-        const open = () => dialog_ref.current?.showModal()
-        const close = () => dialog_ref.current?.close()
-        const toggle = () => (dialog_ref.current?.open === true ? dialog_ref.current?.close() : dialog_ref.current?.showModal())
+        const open = () => {
+            if (!dialog_ref.current?.open) dialog_ref.current?.showModal()
+        }
+        const close = () => {
+            if (dialog_ref.current?.open === true) dialog_ref.current?.close?.()
+        }
+        const toggle = () => (dialog_ref.current?.open === true ? dialog_ref.current?.close?.() : dialog_ref.current?.showModal?.())
 
         return [dialog_ref, open, close, toggle]
     }, [dialog_ref])

frontend/components/ExportBanner.js

@@ -1,3 +1,6 @@
+//@ts-ignore
+import dialogPolyfill from "https://cdn.jsdelivr.net/npm/[email protected]/dist/dialog-polyfill.esm.min.js"
+
 import { useEventListener } from "../common/useEventListener.js"
 import { html, useLayoutEffect, useRef } from "../imports/Preact.js"
 
@@ -80,10 +83,16 @@ export const ExportBanner = ({ notebook_id, print_title, open, onClose, notebook
     const element_ref = useRef(/** @type {HTMLDialogElement?} */ (null))
 
     useLayoutEffect(() => {
+        if (element_ref.current != null && typeof HTMLDialogElement !== "function") dialogPolyfill.registerDialog(element_ref.current)
+    }, [element_ref.current])
+
+    useLayoutEffect(() => {
+        // Closing doesn't play well if the browser is old and the dialog not open
+        // https://github.com/GoogleChrome/dialog-polyfill/issues/149
         if (open) {
-            element_ref.current?.show()
+            element_ref.current?.open === false && element_ref.current?.show?.()
         } else {
-            element_ref.current?.close()
+            element_ref.current?.open && element_ref.current?.close?.()
         }
     }, [open, element_ref.current])
 
@@ -97,7 +106,7 @@ export const ExportBanner = ({ notebook_id, print_title, open, onClose, notebook
     )
 
     return html`
-        <dialog id="export" inert=${!open} ref=${element_ref}>
+        <dialog id="export" inert=${!open} open=${open} ref=${element_ref}>
             <div id="container">
                 <div class="export_title">export</div>
                 <!-- no "download" attribute here: we want the jl contents to be shown in a new tab -->