{"action":"created","issue":{"url":"https://api.github.com/repos/sourcelair/xterm.js/issues/938","repository_url":"https://api.github.com/repos/sourcelair/xterm.js","labels_url":"https://api.github.com/repos/sourcelair/xterm.js/issues/938/labels{/name}","comments_url":"https://api.github.com/repos/sourcelair/xterm.js/issues/938/comments","events_url":"https://api.github.com/repos/sourcelair/xterm.js/issues/938/events","html_url":"https://github.com/sourcelair/xterm.js/pull/938","id":254939248,"number":938,"title":"Render using canvas","user":{"login":"Tyriar","id":2193314,"avatar_url":"https://avatars0.githubusercontent.com/u/2193314?v=4","gravatar_id":"","url":"https://api.github.com/users/Tyriar","html_url":"https://github.com/Tyriar","followers_url":"https://api.github.com/users/Tyriar/followers","following_url":"https://api.github.com/users/Tyriar/following{/other_user}","gists_url":"https://api.github.com/users/Tyriar/gists{/gist_id}","starred_url":"https://api.github.com/users/Tyriar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Tyriar/subscriptions","organizations_url":"https://api.github.com/users/Tyriar/orgs","repos_url":"https://api.github.com/users/Tyriar/repos","events_url":"https://api.github.com/users/Tyriar/events{/privacy}","received_events_url":"https://api.github.com/users/Tyriar/received_events","type":"User","site_admin":false},"labels":[{"id":664163509,"url":"https://api.github.com/repos/sourcelair/xterm.js/labels/breaking-change","name":"breaking-change","color":"b60205","default":false}],"state":"open","locked":false,"assignee":{"login":"Tyriar","id":2193314,"avatar_url":"https://avatars0.githubusercontent.com/u/2193314?v=4","gravatar_id":"","url":"https://api.github.com/users/Tyriar","html_url":"https://github.com/Tyriar","followers_url":"https://api.github.com/users/Tyriar/followers","following_url":"https://api.github.com/users/Tyriar/following{/other_user}","gists_url":"https://api.github.com/users/Tyriar/gists{/gist_id}","starred_url":"https://api.github.com/users/Tyriar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Tyriar/subscriptions","organizations_url":"https://api.github.com/users/Tyriar/orgs","repos_url":"https://api.github.com/users/Tyriar/repos","events_url":"https://api.github.com/users/Tyriar/events{/privacy}","received_events_url":"https://api.github.com/users/Tyriar/received_events","type":"User","site_admin":false},"assignees":[{"login":"Tyriar","id":2193314,"avatar_url":"https://avatars0.githubusercontent.com/u/2193314?v=4","gravatar_id":"","url":"https://api.github.com/users/Tyriar","html_url":"https://github.com/Tyriar","followers_url":"https://api.github.com/users/Tyriar/followers","following_url":"https://api.github.com/users/Tyriar/following{/other_user}","gists_url":"https://api.github.com/users/Tyriar/gists{/gist_id}","starred_url":"https://api.github.com/users/Tyriar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Tyriar/subscriptions","organizations_url":"https://api.github.com/users/Tyriar/orgs","repos_url":"https://api.github.com/users/Tyriar/repos","events_url":"https://api.github.com/users/Tyriar/events{/privacy}","received_events_url":"https://api.github.com/users/Tyriar/received_events","type":"User","site_admin":false}],"milestone":{"url":"https://api.github.com/repos/sourcelair/xterm.js/milestones/8","html_url":"https://github.com/sourcelair/xterm.js/milestone/8","labels_url":"https://api.github.com/repos/sourcelair/xterm.js/milestones/8/labels","id":2195297,"number":8,"title":"3.0.0","description":"","creator":{"login":"parisk","id":1188592,"avatar_url":"https://avatars3.githubusercontent.com/u/1188592?v=4","gravatar_id":"","url":"https://api.github.com/users/parisk","html_url":"https://github.com/parisk","followers_url":"https://api.github.com/users/parisk/followers","following_url":"https://api.github.com/users/parisk/following{/other_user}","gists_url":"https://api.github.com/users/parisk/gists{/gist_id}","starred_url":"https://api.github.com/users/parisk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/parisk/subscriptions","organizations_url":"https://api.github.com/users/parisk/orgs","repos_url":"https://api.github.com/users/parisk/repos","events_url":"https://api.github.com/users/parisk/events{/privacy}","received_events_url":"https://api.github.com/users/parisk/received_events","type":"User","site_admin":false},"open_issues":30,"closed_issues":51,"state":"open","created_at":"2016-12-13T23:08:56Z","updated_at":"2017-09-04T14:40:27Z","due_on":"2017-11-06T08:00:00Z","closed_at":null},"comments":10,"created_at":"2017-09-04T05:32:48Z","updated_at":"2017-09-04T21:31:03Z","closed_at":null,"author_association":"COLLABORATOR","pull_request":{"url":"https://api.github.com/repos/sourcelair/xterm.js/pulls/938","html_url":"https://github.com/sourcelair/xterm.js/pull/938","diff_url":"https://github.com/sourcelair/xterm.js/pull/938.diff","patch_url":"https://github.com/sourcelair/xterm.js/pull/938.patch"},"body":"@parisk @mofux I don't expect the code to change much now, it's mainly just tests, documentation and any bugs that pop up at this point. Please review, I know it's *big* but most of the changes are in new files inside `src/renderer` :smile:\r\n\r\nResolves #935\r\nFixes #936\r\nFixes #681\r\nFixes #730\r\nFixes #720\r\nFixes #475\r\nFixes #937\r\nFixes #920 \r\nFixes #919\r\n\r\n---\r\n\r\n## New Stuff!\r\n\r\n- Ascii characters with their foreground, 8 color and 8 bright/bold colors are pre-rendered and stored in an `ImageBitmap`. This is used as a texture atlas to draw to canvas really fast.\r\n\r\n  ![image](https://user-images.githubusercontent.com/2193314/30012332-ca554d2a-90f3-11e7-961b-23256798ef76.png)\r\n- Multiple canvases are used to layer different things onto the terminal, this method is fast and allows for a nice separation of logic.\r\n\r\n  ![image](https://user-images.githubusercontent.com/2193314/30012287-74ee9a4e-90f3-11e7-83b2-4e23f2c8aa0f.png)\r\n- Render layers keep track of what they have drawn (when it makes sense) and as such will diff the new contents and only draw when necessary. This turns single character changes in lines to typically take < 0.25ms, down from ~6ms.\r\n\r\n  ![image](https://user-images.githubusercontent.com/2193314/30012276-589875b8-90f3-11e7-8157-d89e60413c12.png)\r\n- Better support for line height, font size and font family. As they're all managed within `Terminal` now, just `setOption` and run the `fit` addon if necessary.\r\n\r\n  ![image](https://user-images.githubusercontent.com/2193314/30012370-1654e80c-90f4-11e7-87c9-38b868c9c335.png)\r\n- There is now a *very* clean separation from the model and everything rendering, pretty mcuh everything that renders is within `./src/renderer` (viewport being the only exception, which needs a background color set). We should move towards doing similar with the model and the DOM in Terminal to simplify and make testing easier.\r\n- Link handlers are getting reworked quite a bit as previously the `validationCallback` exposes the `HTMLElement` of the link to allow tooltips to be attached. There is now a `hoverCallback` which achieves a similar goal.\r\n- This fixes a bunch of bugs (see the link of \"Fixes #x\" above), a notable bug fixes is line characters being misaligned in `vtop` https://github.com/sourcelair/xterm.js/issues/937.\r\n\r\n### API Changes\r\n\r\nSee complete list of changes in the [xterm.d.ts diff](https://github.com/sourcelair/xterm.js/pull/938/files#diff-3cf93a85b230e197db3cdf45b888018f).\r\n\r\n## Limitations & regressions\r\n\r\n- Zooming the browser window will zoom the canvas, meaning at > 100% the text may be a little blurry.\r\n- Blink character attribute support was dropped. This is a little difficult to implement and not really worth the effort given its usage.\r\n- Links are no longer underlined when hovering (moved to deferred)\r\n\r\n## Deferred\r\n\r\n- Add new features to demo https://github.com/sourcelair/xterm.js/issues/939\r\n- Links should be underlined when hovering https://github.com/sourcelair/xterm.js/issues/940\r\n- The selection render layer should do incremental draws, currently it clears and redraws the entire selection https://github.com/sourcelair/xterm.js/issues/941\r\n\r\n## Benchmarks\r\n\r\nThis table contains the average time it takes to render when running various actions or programs.\r\n\r\n| Render time | `2.9.2` | `canvas_render` | Improvement\r\n|---|---|---|---\r\n| Typing a single letter | 4-5ms | 0.4-0.5ms | **10x faster**\r\n| `vtop` idle | 22-73ms\\* | 0.8-1.6ms | **27-46x faster**\r\n| `ls -lR large_folder` | 17-25ms\\* | 2.3-4.6ms | **5-7x faster**\r\n| `yes` | 17-30ms\\* | 1-1.3ms | **17-23x faster**\r\n\r\n\\* *Rendering took multiple frames*\r\n\r\n**Setup**\r\n\r\n- Measured on Chrome 60, Macbook Pro.\r\n- Compared https://github.com/sourcelair/xterm.js/commit/cc7c310eee72b8b43d1b5372d4482b4ca54d5b91 (master, 2.9.2) and https://github.com/Tyriar/xterm.js/commit/2d1a1bfb76974219e6a9401e709c2acad501dd15\r\n- The times are all rendering-related chunks exposed in devtools added up (render script, rendering, paint, composite layers).\r\n- I tried to take the smallest and largest samples for the range.\r\n\r\n### In pictures\r\n\r\nHere's one of my favorites; comparing `vtop`'s performance 🔥.\r\n\r\n**Before**\r\n\r\n<img width=\"619\" alt=\"screen shot 2017-09-03 at 9 52 10 am\" src=\"https://user-images.githubusercontent.com/2193314/30004989-b1dcec1e-908d-11e7-8da3-e459948c5dbb.png\">\r\n\r\n**After**\r\n\r\n<img width=\"616\" alt=\"screen shot 2017-09-03 at 9 53 53 am\" src=\"https://user-images.githubusercontent.com/2193314/30004997-da25f18e-908d-11e7-88b3-9e143e055fd9.png\">\r\n\r\n---\r\n\r\n## TODO List\r\n\r\n- [x] API: Move setting of theme into `Terminal.setOption`\r\n- [x] Better emoji support\r\n- [x] Add selection color to `ITheme`\r\n- [x] Resolve/accept `TODO`'s in code\r\n- [ ] Document classes/methods\r\n- [x] Test\r\n  - [x] Add unit tests\r\n  - [x] Chrome\r\n    - [x] macOS\r\n    - [x] Linux\r\n    - [x] Windows\r\n  - [x] Safari/macOS - Does not support `ImageBitmap` so falls back to `HTMLCanvas`\r\n  - [x] Firefox - Buggy and bad performance drawing from `ImageBitmap`, explicit fallback to `HTMLCanvas`\r\n    - [x] Linux\r\n    - [x] macOS\r\n    - [x] Windows\r\n  - [x] Edge/Windows - seems just as good as Chrome\r\n  - [x] ~~IE11/Windows~~ - 💣 "},"comment":{"url":"https://api.github.com/repos/sourcelair/xterm.js/issues/comments/327030399","html_url":"https://github.com/sourcelair/xterm.js/pull/938#issuecomment-327030399","issue_url":"https://api.github.com/repos/sourcelair/xterm.js/issues/938","id":327030399,"user":{"login":"coveralls","id":2354108,"avatar_url":"https://avatars1.githubusercontent.com/u/2354108?v=4","gravatar_id":"","url":"https://api.github.com/users/coveralls","html_url":"https://github.com/coveralls","followers_url":"https://api.github.com/users/coveralls/followers","following_url":"https://api.github.com/users/coveralls/following{/other_user}","gists_url":"https://api.github.com/users/coveralls/gists{/gist_id}","starred_url":"https://api.github.com/users/coveralls/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/coveralls/subscriptions","organizations_url":"https://api.github.com/users/coveralls/orgs","repos_url":"https://api.github.com/users/coveralls/repos","events_url":"https://api.github.com/users/coveralls/events{/privacy}","received_events_url":"https://api.github.com/users/coveralls/received_events","type":"User","site_admin":false},"created_at":"2017-09-04T21:31:03Z","updated_at":"2017-09-04T21:31:03Z","author_association":"NONE","body":"\n[![Coverage Status](https://coveralls.io/builds/13120995/badge)](https://coveralls.io/builds/13120995)\n\nCoverage decreased (-1.3%) to 71.333% when pulling **46b0857ef6c7d85420160ca8b19cef63f7336896 on Tyriar:canvas_render** into **575c10114be5002b45d4d7842a6f8741ba87f5e3 on sourcelair:v3**.\n"}}
{"actor":{"display_login":"coveralls"}}