Simplify bookmarklet copy: single button extracts from href

[simonw]

Replace the visible code block with a single "Copy Bookmarklet Code"
button. The button now extracts the code directly from the bookmarklet
link's href attribute, ensuring the copied code is always in sync with
the draggable link.

[claude]

Claude finished @simonw's task —— View job

---

Code Review Progress

• Read and analyze the modified file
• Review code quality and best practices
• Check for potential bugs or issues
• Evaluate performance considerations
• Assess security concerns
• Review test coverage needs
• Provide comprehensive feedback

---

Code Review Results

This PR successfully simplifies the bookmarklet copy functionality by replacing a visible code block with a single button that extracts code directly from the bookmarklet link's href attribute. The implementation is solid with several strengths and minor areas for improvement.

✅ Strengths

Code Quality & Architecture:

• Clean separation of concerns: UI simplification + robust copy mechanism
• Single source of truth: Button extracts from the actual bookmarklet link (lobsters-bookmarklet.html:409)
• Eliminates duplication between visible code block and draggable link
• Improved UX with cleaner mobile instructions

Robust Error Handling:

• Comprehensive fallback for older browsers using document.execCommand (lobsters-bookmarklet.html:414-423)
• Graceful degradation when Clipboard API fails
• Proper cleanup of temporary textarea element

Security:

• No XSS vulnerabilities - uses getAttribute() and textContent safely
• No eval() or innerHTML with dynamic content in the JavaScript
• Bookmarklet code itself appears to be a legitimate DOM manipulation tool for Lobste.rs

🔍 Minor Considerations

Performance:

• Minimal impact - simple DOM queries and clipboard operations
• No unnecessary re-rendering or heavy computations

Browser Compatibility:

• Good coverage with Clipboard API + fallback
• Consider adding user feedback for unsupported browsers (very edge case)

Code Style:

• Consistent with existing codebase patterns
• Inline styles are appropriate for this simple interaction
• Good semantic HTML structure maintained

📋 Test Coverage Recommendations

Since this is a static HTML page with client-side JavaScript:

1. Manual Testing Checklist:

   • Test copy button on modern browsers (Chrome, Firefox, Safari)
   • Test fallback behavior on browsers without Clipboard API
   • Verify copied code matches the bookmarklet link href exactly
   • Test the copied code actually works on a Lobste.rs comment page

2. Edge Cases to Verify:

   • Button behavior when clicked rapidly
   • Fallback textarea cleanup on copy failure

🎯 Overall Assessment

Approved - This is a well-implemented improvement that:

• Achieves the stated goal of simplification
• Maintains functionality while improving UX
• Demonstrates good engineering practices with fallbacks
• Has no significant security or performance concerns

The single source of truth approach ensures the copy button will always be in sync with the draggable bookmarklet, addressing a real maintenance concern.