ui dialog bugfixes (#16554)

* fake snab modals

* more explicit show & modal properties

* update domDialog and snabDialog calls with new properties

ui/analyse/src/explorer/explorerConfig.ts

@@ -333,6 +333,7 @@ const playerModal = (ctrl: ExplorerConfigCtrl) => {
       ctrl.data.playerName.open(false);
       ctrl.root.redraw();
     },
+    modal: true,
     vnodes: [
       h('h2', 'Personal opening explorer'),
       h('div.input-wrapper', [

ui/analyse/src/keyboard.ts

@@ -140,6 +140,7 @@ export function view(ctrl: AnalyseCtrl): VNode {
   return snabDialog({
     class: 'help.keyboard-help',
     htmlUrl: xhr.url('/analysis/help', { study: !!ctrl.study }),
+    modal: true,
     onClose() {
       ctrl.keyboardHelp = false;
       ctrl.redraw();

ui/analyse/src/serverSideUnderboard.ts

@@ -150,7 +150,8 @@ export default function (element: HTMLElement, ctrl: AnalyseCtrl) {
     const url = `${baseUrl()}/embed/game/${data.game.id}?theme=auto&bg=auto${location.hash}`;
     const iframe = `<iframe src="${url}"\nwidth=600 height=397 frameborder=0></iframe>`;
     domDialog({
-      show: 'modal',
+      modal: true,
+      show: true,
       htmlText:
         '<div><strong style="font-size:1.5em">' +
         $(this).html() +

ui/analyse/src/study/chapterEditForm.ts

@@ -68,6 +68,8 @@ export function view(ctrl: StudyChapterEditForm): VNode | undefined {
           ctrl.current(null);
           ctrl.redraw();
         },
+        modal: true,
+        noClickAway: true,
         vnodes: [
           h('h2', i18n.study.editChapter),
           h(

ui/analyse/src/study/chapterNewForm.ts

@@ -141,8 +141,8 @@ export function view(ctrl: StudyChapterNewForm): VNode {
       ctrl.isOpen(false);
       ctrl.redraw();
     },
+    modal: true,
     noClickAway: true,
-    onInsert: dlg => dlg.show(),
     vnodes: [
       activeTab !== 'edit' &&
         h('h2', [

ui/analyse/src/study/inviteForm.ts

@@ -64,6 +64,7 @@ export function view(ctrl: ReturnType<typeof makeCtrl>): VNode {
       ctrl.open(false);
       ctrl.redraw();
     },
+    modal: true,
     noScrollable: true,
     vnodes: [
       h('h2', i18n.study.inviteToTheStudy),

ui/analyse/src/study/studyForm.ts

@@ -256,6 +256,7 @@ export function view(ctrl: StudyForm): VNode {
       ctrl.open(false);
       ctrl.redraw();
     },
+    modal: true,
     noClickAway: true,
     vnodes: [
       h(

ui/analyse/src/study/studySearch.ts

@@ -55,6 +55,7 @@ export function view(ctrl: SearchCtrl) {
     onClose() {
       ctrl.open(false);
     },
+    modal: true,
     vnodes: [
       h('input', {
         attrs: { autofocus: 1, placeholder: `Search in ${ctrl.studyName}`, value: ctrl.query() },

ui/analyse/src/study/topics.ts

@@ -41,6 +41,7 @@ export const formView = (ctrl: TopicsCtrl, userId?: string): VNode =>
       ctrl.open(false);
       ctrl.redraw();
     },
+    modal: true,
     vnodes: [
       h('h2', i18n.study.topics),
       h(

ui/analyse/src/view/actionMenu.ts

@@ -117,7 +117,9 @@ export function view(ctrl: AnalyseCtrl): VNode {
         h(
           'a',
           {
-            hook: bind('click', () => domDialog({ cash: $('.continue-with.g_' + d.game.id), show: 'modal' })),
+            hook: bind('click', () =>
+              domDialog({ cash: $('.continue-with.g_' + d.game.id), modal: true, show: true }),
+            ),
             attrs: dataIcon(licon.Swords),
           },
           i18n.site.continueFromHere,

ui/bits/src/bits.cropDialog.ts

@@ -66,6 +66,7 @@ export async function initModule(o?: CropOpts): Promise<void> {
   const dlg = await domDialog({
     class: 'crop-viewer',
     css: [{ hashed: 'bits.cropDialog' }, { url: 'npm/cropper.min.css' }],
+    modal: true,
     htmlText: `<h2>Crop image to desired shape</h2>
       <div class="crop-view"></div>
       <span class="dialog-actions"><button class="button button-empty cancel">cancel</button>
@@ -81,7 +82,7 @@ export async function initModule(o?: CropOpts): Promise<void> {
     },
   });
 
-  dlg.showModal();
+  dlg.show();
 
   async function crop() {
     const view = dlg.view.querySelector('.crop-view') as HTMLElement;

ui/bits/src/bits.diagnosticDialog.ts

@@ -31,6 +31,7 @@ export async function initModule(): Promise<void> {
   const dlg = await domDialog({
     class: 'diagnostic',
     css: [{ hashed: 'bits.diagnosticDialog' }],
+    modal: true,
     htmlText: `
       <h2>Diagnostics</h2>${flash}
       <pre tabindex="0" class="err">${escaped}</pre>
@@ -52,7 +53,7 @@ export async function initModule(): Promise<void> {
       setTimeout(() => copied.remove(), 2000);
     }),
   );
-  dlg.showModal();
+  dlg.show();
 }
 
 const storageProxy: { [key: string]: { storageKey: string; validate: (val?: string) => boolean } } = {

ui/bits/src/bits.forum.ts

@@ -11,6 +11,7 @@ site.load.then(() => {
       domDialog({
         cash: $('.forum-delete-modal'),
         attrs: { view: { action: link.href } },
+        modal: true,
       }).then(dlg => {
         $(dlg.view)
           .find('form')
@@ -22,7 +23,7 @@ site.load.then(() => {
             dlg.close();
           });
         $(dlg.view).find('form button.cancel').on('click', dlg.close);
-        dlg.showModal();
+        dlg.show();
       });
       return false;
     })
@@ -31,10 +32,11 @@ site.load.then(() => {
       domDialog({
         cash: $('.forum-relocate-modal'),
         attrs: { view: { action: link.href } },
+        modal: true,
       }).then(dlg => {
         $(dlg.view).find('form').attr('action', link.href);
         $(dlg.view).find('form button.cancel').on('click', dlg.close);
-        dlg.showModal();
+        dlg.show();
       });
       return false;
     })

ui/bits/src/bits.publicChats.ts

@@ -40,7 +40,7 @@ site.load.then(() => {
 
     $('#communication').on('click', '.line:not(.lichess)', function (this: HTMLDivElement) {
       const $l = $(this);
-      domDialog({ cash: $('.timeout-modal') }).then(dlg => {
+      domDialog({ cash: $('.timeout-modal'), modal: true }).then(dlg => {
         $('.username', dlg.view).text($l.find('.user-link').text());
         $('.text', dlg.view).text($l.text().split(' ').slice(1).join(' '));
         $('.button', dlg.view).on('click', function (this: HTMLButtonElement) {
@@ -58,7 +58,7 @@ site.load.then(() => {
           }).then(_ => setTimeout(reloadNow, 1000));
           dlg.close();
         });
-        dlg.showModal();
+        dlg.show();
       });
     });
   };

ui/ceval/src/util.ts

@@ -39,6 +39,7 @@ export const sharedWasmMemory = (lo: number, hi = 32767): WebAssembly.Memory =>
 export function showEngineError(engine: string, error: string): void {
   domDialog({
     class: 'engine-error',
+    modal: true,
     htmlText:
       `<h2>${escapeHtml(engine)} <bad>error</bad></h2>` +
       (error.includes('Status 503')
@@ -57,6 +58,6 @@ export function showEngineError(engine: string, error: string): void {
         window.getSelection()?.addRange(range);
       }, 0);
     dlg.view.querySelector('.err')?.addEventListener('focus', select);
-    dlg.showModal();
+    dlg.show();
   });
 }

ui/cli/src/cli.ts

@@ -60,7 +60,8 @@ function help() {
   domDialog({
     css: [{ hashed: 'cli.help' }],
     class: 'clinput-help',
-    show: 'modal',
+    modal: true,
+    show: true,
     htmlText:
       '<div><h3>Commands</h3>' +
       commandHelp('/tv /follow', ' <user>', 'Watch someone play') +

ui/common/css/component/_dialog.scss

@@ -13,10 +13,13 @@ dialog {
   @include if-rtl {
     transform: translate(50%, -50%);
   }
-  z-index: $z-modal-111;
   padding: 0;
   border: none;
   background: $c-bg-high;
+  z-index: $z-modal-111;
+  &:has(.dialog-content.alert) {
+    z-index: $z-modal-alert-200;
+  }
 
   &::backdrop {
     background: $c-page-mask;
@@ -80,6 +83,12 @@ dialog {
   }
 }
 
+// applied to dialog wrapper div so we can fake HTMLDialogElement.showModal() in a snab render loop
+.snab-modal-mask {
+  @extend %fullscreen-mask, %flex-center;
+  justify-content: center;
+}
+
 .dialog-content {
   text-align: center;
   padding: 2em;