{"action":"created","issue":{"url":"https://api.github.com/repos/ChromeDevTools/timeline-viewer/issues/5","repository_url":"https://api.github.com/repos/ChromeDevTools/timeline-viewer","labels_url":"https://api.github.com/repos/ChromeDevTools/timeline-viewer/issues/5/labels{/name}","comments_url":"https://api.github.com/repos/ChromeDevTools/timeline-viewer/issues/5/comments","events_url":"https://api.github.com/repos/ChromeDevTools/timeline-viewer/issues/5/events","html_url":"https://github.com/ChromeDevTools/timeline-viewer/issues/5","id":177509801,"number":5,"title":"Social annotations","user":{"login":"paulirish","id":39191,"avatar_url":"https://avatars3.githubusercontent.com/u/39191?v=3","gravatar_id":"","url":"https://api.github.com/users/paulirish","html_url":"https://github.com/paulirish","followers_url":"https://api.github.com/users/paulirish/followers","following_url":"https://api.github.com/users/paulirish/following{/other_user}","gists_url":"https://api.github.com/users/paulirish/gists{/gist_id}","starred_url":"https://api.github.com/users/paulirish/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/paulirish/subscriptions","organizations_url":"https://api.github.com/users/paulirish/orgs","repos_url":"https://api.github.com/users/paulirish/repos","events_url":"https://api.github.com/users/paulirish/events{/privacy}","received_events_url":"https://api.github.com/users/paulirish/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-09-16T20:08:59Z","updated_at":"2017-06-26T20:51:23Z","closed_at":null,"body":"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.\n\n_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:_\n\n![image](https://cloud.githubusercontent.com/assets/39191/18599273/679a633e-7c0c-11e6-9a1f-d04a5ae814cc.png)\n\n_But there should be better mechanisms than dead tree, post-its and highlighters._\n### The motivating user story\n- Developer records a timeline trace that's interesting\n- Developer shares this with his team via a clickable URL\n- Everyone viewing it can mark and comment on it, marking time ranges with labels, pointing to specific events of interest.\n- Ideally, those annotations are shared in realtime\n- The annotations are definitely persisted, with attribution to the user who left them.\n\n---\n### Proposal\n\nAnnotations could be shown in the Timeline as a track above User Timing\n\n![image](https://cloud.githubusercontent.com/assets/39191/18599397/2aa1b594-7c0d-11e6-8131-8cf0d5a1fe9b.png)\n_(Just a screenshot of existing timeline w/ usertiming track. Not a mock :)_\n\nSelecting a time range and labeling it, would add a block to that Annotations track.\n\nUser 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.\n#### Implementation\n\nThis web-based timeline viewer can already provide authenticated access to timelines off a clickable link. There are currently no other promising tools for this.\n\nTimeline 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. \n\nTimeline Viewer gets some annotating UI and functionality. The [Google Realtime API](https://developers.google.com/google-apps/realtime/overview) looks tempting as it'd handle a LOT of these pieces.\n"},"comment":{"url":"https://api.github.com/repos/ChromeDevTools/timeline-viewer/issues/comments/311178363","html_url":"https://github.com/ChromeDevTools/timeline-viewer/issues/5#issuecomment-311178363","issue_url":"https://api.github.com/repos/ChromeDevTools/timeline-viewer/issues/5","id":311178363,"user":{"login":"denar90","id":6231516,"avatar_url":"https://avatars3.githubusercontent.com/u/6231516?v=3","gravatar_id":"","url":"https://api.github.com/users/denar90","html_url":"https://github.com/denar90","followers_url":"https://api.github.com/users/denar90/followers","following_url":"https://api.github.com/users/denar90/following{/other_user}","gists_url":"https://api.github.com/users/denar90/gists{/gist_id}","starred_url":"https://api.github.com/users/denar90/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/denar90/subscriptions","organizations_url":"https://api.github.com/users/denar90/orgs","repos_url":"https://api.github.com/users/denar90/repos","events_url":"https://api.github.com/users/denar90/events{/privacy}","received_events_url":"https://api.github.com/users/denar90/received_events","type":"User","site_admin":false},"created_at":"2017-06-26T20:51:23Z","updated_at":"2017-06-26T20:51:23Z","body":"thx 👍 "}}
{"actor":{"display_login":"denar90"}}