侧边栏输入框和两个弹窗改用原生 field-sizing 与 closedby

extension/download.js

@@ -120,15 +120,8 @@
     dialog.className = "mdg-overwrite";
     dialog.innerHTML = html;
     fill(dialog);
-    // A click outside is a press and a release both on the backdrop: a text selection dragged out of the box ends
-    // with a click on the dialog too, and must not close it.
-    let downOutside = false;
-    dialog.addEventListener("pointerdown", (event) => (downOutside = event.target === dialog));
-    dialog.addEventListener("click", (event) => {
-      if (downOutside && event.target === dialog) {
-        dialog.close("");
-      }
-    });
+    // A click outside closes it (returnValue stays "", 取消); a text selection dragged out of the box does not.
+    dialog.closedBy = "any";
     document.body.appendChild(dialog);
     dialog.showModal();
     return new Promise((resolve) => {

extension/history/history.html

@@ -31,7 +31,7 @@ <h1 class="folder-title" data-text="history">摘读记录</h1>
 
     <!-- The 分拣台's tag picker, 标签管理 and AI 打标签, as in triage/triage.html; tag-picker.js and tag-dialogs.js write their
          words when they open, and tag-dialogs.js writes AI 打标签's markup. -->
-    <dialog id="tagPicker" aria-labelledby="tagPickerTitle">
+    <dialog id="tagPicker" closedby="any" aria-labelledby="tagPickerTitle">
       <form method="dialog">
         <h2 id="tagPickerTitle" class="tp-title"></h2>
         <p class="tp-note dialog-meta"></p>

extension/sidepanel.css

@@ -1334,6 +1334,8 @@ body:has(#spInput:not(:placeholder-shown)) .sp-summary-btn {
 
 #spInput {
   flex: 1;
+  /* Grows with the text, between min-height and max-height. */
+  field-sizing: content;
   min-height: 94px;
   max-height: 320px;
   /* Room on the right for the send button that sits inside the box. */

extension/sidepanel.js

@@ -140,7 +140,6 @@ async function init() {
   // A conversation was drawn when it was shown; the empty state shows what the payload brought.
   if (state.view().bound) updateContextChip();
   else renderInitialState();
-  autosizeInput();
   initCompleted = true;
   await consumePendingPlayerAiQuickAction();
 }
@@ -153,9 +152,6 @@ function bindEvents() {
       sendMessage();
     }
   });
-  els.input.addEventListener("input", () => {
-    autosizeInput();
-  });
   turnSpacer.className = "sp-turn-spacer";
   turnSpacer.setAttribute("aria-hidden", "true");
   // The reply streaming, its end notes and a resized panel all change the room needed: one sizing per frame.
@@ -308,12 +304,6 @@ function bindEvents() {
   });
 }
 
-// Grows with the text; sidepanel.css's min-height and max-height bound it.
-function autosizeInput() {
-  els.input.style.height = "auto";
-  els.input.style.height = `${els.input.scrollHeight}px`;
-}
-
 // What the shown conversation is about, in the words 正在加载原…信息 and 读取原…失败 use.
 const sourceKind = () => (state.view().nonVideo ? "网页" : "视频");
 
@@ -507,7 +497,6 @@ async function refreshProvidersAndPrefsAfterExternalChange() {
   const summary = summaryPrompt(state.view().context);
   if (previousSummary && summary && els.input.value.trim() === previousSummary.trim()) {
     els.input.value = summary;
-    autosizeInput();
   }
   if (state.view().streaming) {
     return;
@@ -592,7 +581,6 @@ function fillPrompt(prompt) {
   if (!els.input.value.trim()) {
     els.input.value = prompt;
   }
-  autosizeInput();
   els.input.focus();
   const end = els.input.value.length;
   els.input.setSelectionRange(end, end);
@@ -658,7 +646,7 @@ async function runEffect(effect) {
       if (typed && effect.from !== effect.to) drafts.set(effect.from, typed);
       els.input.value = drafts.get(effect.to) || "";
       drafts.delete(effect.to);
-      return autosizeInput();
+      return;
     }
     case "fill":
       return fillPrompt(effect.prompt);
@@ -669,7 +657,6 @@ async function runEffect(effect) {
       return;
     }
     case "focus":
-      autosizeInput();
       return els.input?.focus?.();
     case "previous":
       return setPreviousVideoConversation(effect.id);
@@ -1537,9 +1524,6 @@ function updateSidepanelLayoutState() {
   const useCompactInput = Boolean(context && context.isVideoContext === false && pageReason(context) && !messages.length && !pinned);
   document.body.classList.toggle("sp-non-video-context", useCompactInput);
   syncSendUi();
-  if (els.input) {
-    autosizeInput();
-  }
 }
 
 let refreshingContext = false;
@@ -1813,12 +1797,10 @@ async function sendMessage(prompt, { onStart = null, replaces = [] } = {}) {
       if (!drafts.get(draftKey)) drafts.set(draftKey, text);
     } else if (typed && !els.input.value.trim()) {
       els.input.value = text;
-      autosizeInput();
     }
   };
   if (typed) {
     els.input.value = "";
-    autosizeInput();
   }
   const hidden = [suggestionsNode, ...els.messages.querySelectorAll(".sp-center-error"), ...replaces].filter((node) => node && !node.hidden);
   for (const node of hidden) node.hidden = true;

extension/triage/tag-picker.js

@@ -150,12 +150,6 @@
   });
   // After a reopen the dialog is open again: that close was handled.
   dlg.addEventListener("close", () => !dlg.open && close());
-  // The modal's backdrop is the dialog element too; only a point outside its box counts.
-  dlg.addEventListener("click", (e) => {
-    if (e.target !== dlg) return;
-    const r = dlg.getBoundingClientRect();
-    if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) close();
-  });
   // The popover: a click elsewhere or into the player (the window loses focus) closes it.
   document.addEventListener("click", (e) => cur?.opts.anchor && !dlg.contains(e.target) && close(), true);
   addEventListener("blur", () => cur?.opts.anchor && close());

extension/triage/triage.html

@@ -251,7 +251,7 @@ <h2 id="transferTitle"></h2>
     </dialog>
 
     <!-- Both modes' tag picker (tag-picker.js): a modal, or a popover under 「+ 标签」 (.tp-pop). -->
-    <dialog id="tagPicker" aria-labelledby="tagPickerTitle">
+    <dialog id="tagPicker" closedby="any" aria-labelledby="tagPickerTitle">
       <form method="dialog">
         <h2 id="tagPickerTitle" class="tp-title"></h2>
         <p class="tp-note dialog-meta"></p>