Add debug mode with hover tooltips for element class names

[Copilot]

Implements a debug mode to help identify which DOM elements are being spoken and troubleshoot content detection issues. Useful when GitHub updates their UI structure or investigating why certain content isn't being vocalized.

Changes

• UI: Added "Debug Mode" checkbox in popup (disabled by default, persists in chrome.storage.sync)
• Tooltips: On enable, applies title attributes to all divs under TaskChat container showing their class names
• Dynamic content: Integrated with existing MutationObservers to automatically apply tooltips to new elements
• Cleanup: On disable, removes all debug attributes

Implementation

// Applies tooltips to all divs, including those without classes
function applyDebugTooltipToElement(element) {
  if (element.nodeType !== Node.ELEMENT_NODE || element.tagName !== 'DIV') return;
  
  const classNames = element.className;
  const tooltipText = classNames || `<div> (no classes)`;
  
  element.setAttribute('data-tts-debug-tooltip', 'true');
  element.setAttribute('title', tooltipText);
}

Tooltips reveal CSS Module class names like TaskChat-module__stickableContainer--abc123, Session-module__detailsContainer--xyz789, making it easier to update selectors when GitHub's build hashes change.

Screenshot

The checkbox is positioned after "New Only" and before the speed/pitch controls.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add debug mode with hover tooltips showing element class names</issue_title>
<issue_description>To help understand what content is being spoken and troubleshoot issues, add a debug mode that shows element class names on hover.

Features:

• Add "Debug Mode" toggle in popup UI (checkbox or toggle switch)
• When enabled, add hover tooltips to all div elements under TaskChat-module__stickableContainer--*
• Tooltip shows the element's class name(s)
• Focus on key containers: Session-module__detailsContainer--*, Tool-module__detailsContainer--*, MarkdownRenderer-module__container--*, etc.

Implementation:

• Store debug mode state in chrome.storage
• Inject CSS and data attributes to show tooltips
• Use title attribute or custom tooltip div

UI Mockup:

[✓] Debug Mode

</issue_description>

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

• Fixes Add debug mode with hover tooltips showing element class names #23

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.