Fix ImageEnlarger: accessibility, modal re-entry, responsive images, MutationObserver perf

[Copilot]

• Analyze review comments and current code
• Remove non-functional ::after pseudo-element CSS; add title tooltip instead
• Change close button from <span> to <button> with aria-label for accessibility
• Fix modal image exclusion with img.closest(".xmoj-image-modal")
• Use img.currentSrc || img.src for responsive image support
• Optimize MutationObserver to iterate only over newly added nodes
• Fix close button white background: add background: none; border: none; padding: 0 to reset browser default <button> styles

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

---

Summary by cubic

Adds a modal image viewer so users can enlarge images from thumbnails, addressing feedback in #924. Improves readability, accessibility, and performance on desktop and mobile.

• New Features
  • Click an image to open a modal with a larger view (uses img.currentSrc || img.src for responsive/lazy images).
  • Close with Esc, overlay click, or the close button; focus returns to the trigger; background scroll is locked.
  • A11y/perf fixes: replace CSS tooltip with title="点击放大"; close button is a with aria-label/title and reset styles (no white background); ignore images inside the modal via closest(); MutationObserver applies only to newly added images.

^{Written for commit 259cc7a. Summary will update on new commits.}

[PythonSmall-Q]

@copilot 右上角的×底色是白色，他的底色应该和弹出框其他部分相同

[Copilot]

@copilot 右上角的×底色是白色，他的底色应该和弹出框其他部分相同

已在 9b68c78 中修复。将 <span> 改为 <button> 时引入了浏览器默认的白色背景和边框，现在在 .xmoj-image-modal-close CSS 中添加了 background: none; border: none; padding: 0; line-height: 1 来重置这些默认样式，使关闭按钮的背景与弹出框其他部分保持一致（透明/暗色）。

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="XMOJ.user.js">

<violation number="1" location="XMOJ.user.js:5808">
P1: The modal opens a stale image URL because the click handler captures `effectiveSrc` at bind time instead of reading the current source at click time.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P1: The modal opens a stale image URL because the click handler captures effectiveSrc at bind time instead of reading the current source at click time.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At XMOJ.user.js, line 5808:

<comment>The modal opens a stale image URL because the click handler captures `effectiveSrc` at bind time instead of reading the current source at click time.</comment>

<file context>
@@ -5792,17 +5792,20 @@ int main()
                         img.addEventListener("click", (e) => {
                             e.stopPropagation();
-                            OpenImageModal(img.currentSrc || img.src);
+                            OpenImageModal(effectiveSrc);
                         });
                     }
</file context>

Suggested change

	OpenImageModal(effectiveSrc);
	OpenImageModal(img.currentSrc || img.src);

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="XMOJ.user.js">

<violation number="1" location="XMOJ.user.js:5806">
P2: The modal opens a stale image URL because `effectiveSrc` is captured once instead of reading `img.currentSrc || img.src` when the image is clicked.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: The modal opens a stale image URL because effectiveSrc is captured once instead of reading img.currentSrc || img.src when the image is clicked.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At XMOJ.user.js, line 5806:

<comment>The modal opens a stale image URL because `effectiveSrc` is captured once instead of reading `img.currentSrc || img.src` when the image is clicked.</comment>

<file context>
@@ -5792,17 +5792,18 @@ int main()
                         img.addEventListener("click", (e) => {
                             e.stopPropagation();
-                            OpenImageModal(img.currentSrc || img.src);
+                            OpenImageModal(effectiveSrc);
                         });
                     }
</file context>

Suggested change

	OpenImageModal(effectiveSrc);
	OpenImageModal(img.currentSrc || img.src || effectiveSrc);