#424 Theme hooks: element marks for layout themes

[Anonymous]

Originally created by: kristofferR

Problem

Themes can only recolor Messenger through CSS variables and Facebook's own markup, whose class names are generated and whose labels are translated. Layout themes (the store's WhatsApp, Teams, Google Chat, GitHub, Terminal and Slack ports) need stable marks on the parts they style.

Design

Chatpane marks the page with its own names. No fMess compatibility layer: the ported themes are rewritten to these names.

• Gate: the marks only run while the chosen theme uses them. The appearance payload gets a hooks flag (true when the theme CSS mentions data-chatpane-ui, data-chatpane-chats, data-chatpane-list and the like); the appearance script sets html[data-chatpane-theme-hooks], and the page work checks it. Default and the palette themes cost nothing.
• Page: html[data-chatpane-chats] on /messages… and /messenger_media…; html[data-chatpane-media] while the photo/video viewer is open (reuse the media viewer's detection). html[data-chatpane-dark] already exists.
• Panes: [data-chatpane-list] on the chat list next to [role="main"].
• data-chatpane-ui marks, found by structure and icon path starts, never by translated labels:
• composer: composer, composer-bar (reply / link preview bar), composer-field, composer-tools, voice-clip, attach, sticker, gif, emoji, like (Messenger's thumbs-up or the chat's emoji), send, more-actions
• voice recording: record-bar, record-play, record-stop, record-cancel
• editing a message: edit-composer, edit-bar, edit-cancel, edit-box, edit-field, edit-emoji, edit-done
• chat: chat-header, info, audio-call, video-call, details
• list: list-header (the row with the title and new-message button), list-menu
• reactions: reactions (the picker), more-emojis
• Timing: once a second while hooked, after clicks, and the composer again on input (like turns into send). A mark that no longer fits is removed on the same pass.
• Baseline under hooked themes: chat panes edge to edge (--messenger-card-spacing: 0 and friends in the chats) and the composer bar's fixed heights released, as the ported themes expect.
• Pure logic (icon classification, edit-box detection) in inject/src/messenger/lib/ with bun test.

Adapted from fMess's 09-marks.js (https://github.com/toanbku/fmess, MIT) plus the record-bar mark from toanbku/fmess#50; credit it in the source.

Testing

• bun test for the classifiers; a sanitized MCP probe that reports which marks are present.
• English and one other Facebook language: same marks.
• No measurable cost with Default selected (gate off).

Part of [#434].