fix: OpenInTab icon oversized before CSS loads in shortcut-triggered popup

[Copilot]

When a popup window is opened via shortcut key, the content script renders React immediately at document_idle, but the shadow DOM CSS files (icons.css, content_script.css) are fetched asynchronously. Since canOpenInTab resolves quickly, OpenInTab renders before CSS is applied — causing the raw SVG (viewBox="0 0 512 512") to display at full size.

Changes

• OpenInTab.tsx: Add style={{ visibility: "hidden" }} inline style to the outer div so the element is hidden before CSS is applied.
• OpenInTab.css: Add visibility: visible !important to .OpenInTab so that once the CSS file is injected into the shadow DOM, it overrides the inline style and reveals the button at the correct size.

// render:
{enableOpenInTab && (
  <div className="OpenInTab" style={{ visibility: "hidden" }}>
    ...
  </div>
)}

.OpenInTab {
  position: fixed;
  top: 5px;
  right: 5px;
  z-index: 2147483647;
  visibility: visible !important; /* overrides inline hidden until CSS loads */
}

Before CSS loads, the inline visibility: hidden takes precedence and the element is invisible. Once content_script.css is injected into the shadow DOM, the CSS rule's !important overrides the inline style and the button appears at the correct size.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>ショートカットキー経由でポップアップウィンドウを表示した際、OpenInTabのアイコンがバカでかい</issue_title>
<issue_description>- https://github.com/ujiro99/selection-command/blob/main/packages%2Fextension%2Fsrc%2Fcomponents%2FOpenInTab.tsx を表示したとき、対象ページが読み込まれておらずOpenInTabのアイコンだけが表示されると、非常に大きくなってしまいまう

• ページが読み込まれるまでOpenInTabのアイコンを表示しないようにするか、アイコンの大きさをただしくレンダリングするようにする</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes ショートカットキー経由でポップアップウィンドウを表示した際、OpenInTabのアイコンがバカでかい #263

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[codecov]

Codecov Report

❌ Patch coverage is 0% with 13 lines in your changes missing coverage. Please review.
✅ Project coverage is 19.09%. Comparing base (a502533) to head (7be0069).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/extension/src/components/OpenInTab.tsx	0.00%	13 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #291      +/-   ##
==========================================
- Coverage   19.10%   19.09%   -0.01%     
==========================================
  Files         308      308              
  Lines       28730    28742      +12     
  Branches     1317     1317              
==========================================
  Hits         5488     5488              
- Misses      23242    23254      +12     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

ショートカット経由で開いたポップアップで、Shadow DOM の CSS 適用前に OpenInTab の SVG アイコンが巨大表示される問題を抑止するため、ページの読み込み完了を待ってボタンを描画する変更です。

Changes:

• OpenInTab に isPageReady を追加し、enableOpenInTab && isPageReady のときのみ描画するように変更
• window.load を購読してページ完了後に isPageReady を true に更新

[Copilot]

• isPageReady を document.readyState === "complete" で判定していますが、manifest の既定 run_at は document_idle のため、実行時点で readyState がすでに complete になっているケースが多く、この条件が実質的に効かない可能性があります。
• さらに、この判定は Shadow DOM に挿入している icons.css/content_script.css の fetch・style 挿入完了とは無関係なので、「CSS適用前に SVG が巨大表示される」事象を確実に防げません。
• 対応案として、CSS 挿入処理（content_script.tsx の insertCss）を Promise 化して完了通知（カスタムイベント発火、または ShadowRoot へ data-styles-ready 付与など）を出し、このコンポーネント側はその通知を待って描画を解禁する形が確実です。

Suggested change

	const [isPageReady, setIsPageReady] = useState(
	document.readyState === "complete",
	)
	const [isPageReady, setIsPageReady] = useState(false)

[ujiro99]

@copilot
対応案でもいですが、すこし処理が複雑、かつ分散します。
別案として、OpenInTab.tsxの要素自体のstyleで非表示化し、cssが読み込まれたらそこで表示する方式はどうですか？

[Copilot]

ご提案の方式に変更しました（commit 21687a9）。

変更内容:

• OpenInTab.tsx: isPageReady ステートと load イベントリスナーを削除し、div に style={{ visibility: "hidden" }} を追加
• OpenInTab.css: .OpenInTab に visibility: visible !important を追加

これにより、CSS適用前は visibility: hidden（インラインスタイルが優先）でアイコンが非表示となり、content_script.css がシャドウDOMに注入された後は CSS の visibility: visible !important がインラインスタイルを上書きして表示されます。