diff options
| -rw-r--r-- | src/content/content.js | 52 |
1 files changed, 32 insertions, 20 deletions
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; |