Codex/elf modal polish

locales/en.json

@@ -192,6 +192,7 @@
     "elfNeededLibraries": "Needed Libraries",
     "elfClass": "ELF Class",
     "elfPageAlignment": "Page Alignment",
+    "elfZipAlignmentCompressed": "Compressed / not applicable",
     "components": "Components",
     "signatures": "Signatures",
     "metaData": "Meta-Data",

locales/ja.json

@@ -192,6 +192,7 @@
     "elfNeededLibraries": "必要なライブラリ",
     "elfClass": "ELF クラス",
     "elfPageAlignment": "ページアラインメント",
+    "elfZipAlignmentCompressed": "圧縮済み / 対象外",
     "components": "コンポーネント",
     "signatures": "署名",
     "metaData": "メタデータ",

locales/ko.json

@@ -192,6 +192,7 @@
     "elfNeededLibraries": "필요한 라이브러리",
     "elfClass": "ELF 클래스",
     "elfPageAlignment": "페이지 정렬",
+    "elfZipAlignmentCompressed": "압축됨 / 해당 없음",
     "components": "구성요소",
     "signatures": "서명",
     "metaData": "메타데이터",

locales/zh-Hans.json

@@ -192,6 +192,7 @@
     "elfNeededLibraries": "依赖库",
     "elfClass": "ELF 位数",
     "elfPageAlignment": "页面对齐",
+    "elfZipAlignmentCompressed": "已压缩 / 不适用",
     "components": "组件",
     "signatures": "签名",
     "metaData": "元数据",

locales/zh-Hant.json

@@ -192,6 +192,7 @@
     "elfNeededLibraries": "相依程式庫",
     "elfClass": "ELF 位元數",
     "elfPageAlignment": "頁面對齊",
+    "elfZipAlignmentCompressed": "已壓縮 / 不適用",
     "components": "元件",
     "signatures": "簽章",
     "metaData": "中繼資料",

packages/apk-webui/src/app/elf-detail-modal.js

@@ -6,8 +6,12 @@ import { escapeAttr, escapeHtml } from "./html.js";
 const SYMBOL_RENDER_LIMIT = 500;
 const SECTION_RENDER_LIMIT = 512;
 const DYNAMIC_RENDER_LIMIT = 512;
+const ELF_DETAIL_LOADING_DELAY_MS = 150;
+const ELF_DETAIL_CLOSE_FALLBACK_MS = 150;
 
 let requestToken = 0;
+let loadingTimer = 0;
+let closeTimer = 0;
 /** @type {HTMLElement | null} */
 let restoreFocusTarget = null;
 
@@ -35,45 +39,98 @@ export function openElfDetailModal({
   const token = ++requestToken;
   restoreFocusTarget = trigger || null;
   updateElfDetailModalHeader(elements, library, t);
-  elements.body.innerHTML = sourceAvailable
-    ? renderElfDetailLoading(library, t)
-    : renderElfDetailUnavailable(library, t);
-  elements.body.setAttribute("aria-busy", sourceAvailable ? "true" : "false");
-
-  if (!elements.dialog.open) {
-    elements.dialog.showModal();
-  }
+  elements.dialog.classList.toggle("has-source", sourceAvailable);
+  clearLoadingTimer();
 
   if (!sourceAvailable) {
+    elements.body.innerHTML = renderElfDetailUnavailable(library, t);
+    elements.body.setAttribute("aria-busy", "false");
+    showElfDetailDialog(elements.dialog);
     onLoaded("unavailable");
     return;
   }
 
+  elements.body.setAttribute("aria-busy", "true");
+  loadingTimer = window.setTimeout(() => {
+    loadingTimer = 0;
+    if (token !== requestToken) {
+      return;
+    }
+    elements.body.innerHTML = renderElfDetailLoading(library, t);
+    showElfDetailDialog(elements.dialog);
+  }, ELF_DETAIL_LOADING_DELAY_MS);
+
   void Promise.resolve()
     .then(loadDetails)
     .then((details) => {
-      if (token !== requestToken || !elements.dialog.open) {
+      if (token !== requestToken) {
         return;
       }
+      clearLoadingTimer();
       elements.body.setAttribute("aria-busy", "false");
       elements.body.innerHTML = renderElfDetailContent({ details, library, t });
+      showElfDetailDialog(elements.dialog);
       onLoaded("success");
     })
     .catch(() => {
-      if (token !== requestToken || !elements.dialog.open) {
+      if (token !== requestToken) {
         return;
       }
+      clearLoadingTimer();
       elements.body.setAttribute("aria-busy", "false");
       elements.body.innerHTML = renderElfDetailError(library, t);
+      showElfDetailDialog(elements.dialog);
       onLoaded("error");
     });
 }
 
 export function closeElfDetailModal() {
+  requestToken += 1;
+  clearLoadingTimer();
   const dialog = /** @type {HTMLDialogElement | null} */ (document.querySelector("#elf-detail-dialog"));
-  if (dialog?.open) {
-    dialog.close();
+  if (!dialog?.open || dialog.classList.contains("is-closing")) {
+    return;
+  }
+
+  dialog.classList.remove("is-open");
+  dialog.classList.add("is-closing");
+  const closeDurationMs = getElfDetailModalCloseDurationMs(dialog);
+  closeTimer = window.setTimeout(() => {
+    closeTimer = 0;
+    if (dialog.open && dialog.classList.contains("is-closing")) {
+      dialog.close();
+    }
+  }, closeDurationMs);
+}
+
+export function getElfDetailModalCloseDurationMs(dialog) {
+  if (
+    !dialog ||
+    typeof window === "undefined" ||
+    typeof window.getComputedStyle !== "function"
+  ) {
+    return ELF_DETAIL_CLOSE_FALLBACK_MS;
+  }
+  if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+    return 0;
+  }
+  return parseCssTimeMs(
+    window.getComputedStyle(dialog).getPropertyValue("--modal-close-dur"),
+    ELF_DETAIL_CLOSE_FALLBACK_MS,
+  );
+}
+
+export function parseCssTimeMs(value, fallbackMs = 0) {
+  const normalized = String(value || "").trim();
+  if (normalized.endsWith("ms")) {
+    const milliseconds = Number.parseFloat(normalized);
+    return Number.isFinite(milliseconds) ? milliseconds : fallbackMs;
+  }
+  if (normalized.endsWith("s")) {
+    const seconds = Number.parseFloat(normalized);
+    return Number.isFinite(seconds) ? seconds * 1000 : fallbackMs;
   }
+  return fallbackMs;
 }
 
 export function shouldCloseElfDetailModalOnBackdropClick(event, dialog, pointerStartedOnBackdrop) {
@@ -189,18 +246,28 @@ function ensureElfDetailModalElements(t) {
       throw new Error("Failed to create ELF detail dialog");
     }
     let pointerStartedOnBackdrop = false;
-    dialog.querySelector("#elf-detail-close")?.addEventListener("click", () => dialog.close());
+    dialog.querySelector("#elf-detail-close")?.addEventListener("click", closeElfDetailModal);
     dialog.addEventListener("pointerdown", (event) => {
       pointerStartedOnBackdrop = event.target === dialog;
     });
     dialog.addEventListener("click", (event) => {
       if (shouldCloseElfDetailModalOnBackdropClick(event, dialog, pointerStartedOnBackdrop)) {
-        dialog.close();
+        closeElfDetailModal();
       }
       pointerStartedOnBackdrop = false;
     });
+    dialog.addEventListener("pointercancel", () => {
+      pointerStartedOnBackdrop = false;
+    });
+    dialog.addEventListener("cancel", (event) => {
+      event.preventDefault();
+      closeElfDetailModal();
+    });
     dialog.addEventListener("close", () => {
       requestToken += 1;
+      clearLoadingTimer();
+      clearCloseTimer();
+      dialog.classList.remove("is-open", "is-closing");
       const target = restoreFocusTarget;
       restoreFocusTarget = null;
       target?.focus?.();
@@ -216,6 +283,34 @@ function ensureElfDetailModalElements(t) {
   };
 }
 
+function showElfDetailDialog(dialog) {
+  clearCloseTimer();
+  const wasOpen = dialog.open;
+  dialog.classList.remove("is-closing");
+  if (!wasOpen) {
+    dialog.classList.remove("is-open");
+    dialog.showModal();
+    dialog.getBoundingClientRect();
+  }
+  dialog.classList.add("is-open");
+}
+
+function clearLoadingTimer() {
+  if (!loadingTimer) {
+    return;
+  }
+  window.clearTimeout(loadingTimer);
+  loadingTimer = 0;
+}
+
+function clearCloseTimer() {
+  if (!closeTimer) {
+    return;
+  }
+  window.clearTimeout(closeTimer);
+  closeTimer = 0;
+}
+
 function renderElfDetailModalShell(t) {
   const closeLabel = t("lcappsClose");
   return [
@@ -280,12 +375,17 @@ function renderElfDetailError(library, t) {
 function renderElfDetailFacts(library, details, t) {
   const pageSize = Number(library?.elfPageSize) || 0;
   const zipAlignment = Number(library?.zipAlignment) || 0;
+  const zipAlignmentText = library?.zipCompression === "deflate"
+    ? t("elfZipAlignmentCompressed")
+    : zipAlignment > 0
+      ? formatAlignmentBytes(zipAlignment)
+      : t("unknown");
   const facts = [
     ["ABI", library?.abi || t("unknown")],
     [t("size"), formatBytes(library?.size || details?.byteLength || 0)],
     [t("elfClass"), details?.header?.class || t("unknown")],
     [t("elfPageAlignment"), pageSize > 0 ? formatAlignmentBytes(pageSize) : t("unknown")],
-    ["ZIPALIGN", zipAlignment > 0 ? formatAlignmentBytes(zipAlignment) : t("unknown")],
+    ["ZIPALIGN", zipAlignmentText],
   ];
 
   return [
@@ -382,4 +482,3 @@ function renderDataTable(label, columns, rows, total, limit, t, truncated = fals
       : "",
   ].join("");
 }
-