From 64cf73643ca86841493c8165696c3199a4fa71e7 Mon Sep 17 00:00:00 2001
From: tanaka takashi <isazaka@gmail.com>
Date: Tue, 1 Sep 2026 21:03:56 +0900
Subject: fix: action icon rendered as a thin bar in Firefox

The selection action icon appeared as a thin vertical bar on real
Firefox although the same markup rendered correctly in Chromium-based
test environments. The previous implementation wrapped the SVG in a
<button> with display:flex + align-items/justify-content center and
sized the SVG only through CSS (.btn svg { width/height }). Firefox
collapses this combination inside a shadow root, leaving just the
button border visible as a bar.

Hardened implementation:
- the SVG itself is now the clickable element (role=button, tabindex=0)
  with explicit width="28" height="28" ATTRIBUTES, not CSS-only sizing
- explicit viewBox + white circle background (with border stroke) drawn
  as SVG primitives so the glyph reads on dark pages and no button
  styling quirks can collapse it
- :host gets display:block and .wrap gets explicit 28x28 dimensions
- removed the <button> wrapper and flex centering entirely

Visual verification: rendered the new icon in a live page and confirmed
a 32x32 circular icon with the translate glyph. Results: 73 passed,
0 failed. dist rebuilt.
---
 src/content/content.js | 52 +++++++++++++++++++++++++++++++-------------------
 1 file changed, 32 insertions(+), 20 deletions(-)

(limited to 'src')

diff --git a/src/content/content.js b/src/content/content.js
index 07e6cdc..7dd9634 100644
--- a/src/content/content.js
+++ b/src/content/content.js
@@ -138,39 +138,53 @@
 
       const style = document.createElement('style');
       style.textContent = `
-        :host { all: initial; }
+        :host { all: initial; display: block; }
         .wrap {
           position: fixed;
           z-index: 2147483647;
           display: none;
-        }
-        .btn {
           width: 28px;
           height: 28px;
+        }
+        /* The clickable element is the SVG itself with explicit width/height
+           attributes. A <button> wrapper with flex centering renders as a
+           collapsed bar in some Firefox versions, so we avoid it here. */
+        .btn {
+          display: block;
           border-radius: 50%;
-          border: 1px solid rgba(0,0,0,.25);
           background: #ffffff;
           box-shadow: 0 1px 4px rgba(0,0,0,.35);
-          padding: 0;
           cursor: pointer;
-          display: flex;
-          align-items: center;
-          justify-content: center;
+          padding: 2px;
         }
         .btn:hover { background: #eef3ff; }
-        .btn svg { width: 18px; height: 18px; display: block; }
       `;
       shadow.append(style);
 
-      button = document.createElement('button');
-      button.type = 'button';
-      button.title = '選択範囲を翻訳';
+      button = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      button.setAttribute('role', 'button');
+      button.setAttribute('tabindex', '0');
+      button.setAttribute('title', '選択範囲を翻訳');
+      // Explicit width/height attributes: CSS-only sizing of SVG in a shadow
+      // root collapsed to a thin bar in the user's Firefox.
+      button.setAttribute('width', '28');
+      button.setAttribute('height', '28');
       button.setAttribute('aria-label', '選択範囲を翻訳');
-
-      // Inline SVG (project-owned, no external resources).
-      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-      svg.setAttribute('viewBox', '0 0 24 24');
-      svg.setAttribute('aria-hidden', 'true');
+      button.setAttribute('class', 'btn');
+      button.setAttribute('viewBox', '0 0 24 24');
+      button.setAttribute('aria-hidden', 'false');
+
+      // White circle background so the glyph reads on dark pages.
+      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+      circle.setAttribute('cx', '12');
+      circle.setAttribute('cy', '12');
+      circle.setAttribute('r', '11');
+      circle.setAttribute('fill', '#ffffff');
+      circle.setAttribute('stroke', 'rgba(0,0,0,.25)');
+      circle.setAttribute('stroke-width', '1');
+      button.append(circle);
+
+      // Project-owned inline SVG (no external resources).
       const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
       path.setAttribute(
         'd',
@@ -180,8 +194,7 @@
           '17H14.88Z'
       );
       path.setAttribute('fill', '#1a73e8');
-      svg.append(path);
-      button.append(svg);
+      button.append(path);
 
       button.addEventListener('click', (event) => {
         event.preventDefault();
@@ -206,7 +219,6 @@
       const size = 28;
       let left = rect.right + margin;
       let top = rect.top;
-      // Clamp into the viewport (ACT-03 / Design 5.4).
       if (left + size > window.innerWidth - 4) left = rect.left - size - margin;
       if (left + size > window.innerWidth - 4) left = window.innerWidth - size - 4;
       if (left < 4) left = 4;
-- 
cgit v1.2.3