Social annotations

[paulirish]

Profiling quickly turns into a group conversation, and a trace is the ground truth. Traces are somewhat portable, but the conversation around them usually ends up siloed in email threads and chats.

A while back I helped the Wikipedia eng team export a timeline trace. (T'was a hack using devtools on devtools, DPR emulation, and canvas todatauri/toblob :). It allowed them to do this:

But there should be better mechanisms than dead tree, post-its and highlighters.

The motivating user story

• Developer records a timeline trace that's interesting
• Developer shares this with his team via a clickable URL
• Everyone viewing it can mark and comment on it, marking time ranges with labels, pointing to specific events of interest.
• Ideally, those annotations are shared in realtime
• The annotations are definitely persisted, with attribution to the user who left them.

---

Proposal

Annotations could be shown in the Timeline as a track above User Timing

(Just a screenshot of existing timeline w/ usertiming track. Not a mock :)

Selecting a time range and labeling it, would add a block to that Annotations track.

User can also select individual events, highlight them, and add a comment. This would both add a visual highlight to the event in the flamechart, and create a separate block in the annotations section. Clicking that one would reveal the event it points to.

Implementation

This web-based timeline viewer can already provide authenticated access to timelines off a clickable link. There are currently no other promising tools for this.

Timeline flame chart needs support for an Annotations track and APIs to add "async events" to it in realtime, far after the trace has been parsed.

Timeline Viewer gets some annotating UI and functionality. The Google Realtime API looks tempting as it'd handle a LOT of these pieces.

[denar90]

@paulirish It will be nice if you turn on realtime API on GoogleAPI page for timeline-viewer project (or whatever it called (maybe unicorn-goat 🦄-🐐 😃 ))

[paulirish]

@denar90 enabled!

[denar90]

thx 👍