{"action":"created","issue":{"url":"https://api.github.com/repos/sourcelair/xterm.js/issues/218","repository_url":"https://api.github.com/repos/sourcelair/xterm.js","labels_url":"https://api.github.com/repos/sourcelair/xterm.js/issues/218/labels{/name}","comments_url":"https://api.github.com/repos/sourcelair/xterm.js/issues/218/comments","events_url":"https://api.github.com/repos/sourcelair/xterm.js/issues/218/events","html_url":"https://github.com/sourcelair/xterm.js/pull/218","id":169232440,"number":218,"title":"Implement scroll bar","user":{"login":"Tyriar","id":2193314,"avatar_url":"https://avatars.githubusercontent.com/u/2193314?v=3","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":[],"state":"open","locked":false,"assignee":{"login":"Tyriar","id":2193314,"avatar_url":"https://avatars.githubusercontent.com/u/2193314?v=3","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://avatars.githubusercontent.com/u/2193314?v=3","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/2","html_url":"https://github.com/sourcelair/xterm.js/milestones/1.1.0","labels_url":"https://api.github.com/repos/sourcelair/xterm.js/milestones/2/labels","id":1888822,"number":2,"title":"1.1.0","description":"","creator":{"login":"parisk","id":1188592,"avatar_url":"https://avatars.githubusercontent.com/u/1188592?v=3","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":5,"closed_issues":10,"state":"open","created_at":"2016-07-18T08:32:40Z","updated_at":"2016-08-08T19:14:14Z","due_on":"2016-08-21T21:00:00Z","closed_at":null},"comments":6,"created_at":"2016-08-03T20:59:02Z","updated_at":"2016-08-08T19:22:42Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/sourcelair/xterm.js/pulls/218","html_url":"https://github.com/sourcelair/xterm.js/pull/218","diff_url":"https://github.com/sourcelair/xterm.js/pull/218.diff","patch_url":"https://github.com/sourcelair/xterm.js/pull/218.patch"},"body":"Fixes #77\r\nFixes #149\r\n\r\n### Implementation\r\n\r\nThe scroll bar is implemented using a `.xterm-scroll-area` element which is resized based on what the entire buffer is, this is contained within `.xterm-viewport` which uses `overflow-y: scroll` to show a native scroll bar. The viewport is kept separate from the rows in order to prevent calls to `refresh` triggering `scroll` events on the viewport.\r\n\r\nScroll and wheel events are then delegated to the viewport which in turn passes it on to the terminal. This can happen in two ways, events originating from the viewport (mouse wheel, drag and drop scroll bar, up/down buttons on scroll bar) and events originating from the terminal (scrolling via keyboard, new output, etc.).\r\n\r\nThe implementation supports various scroll configurations, properly utilizing `WheelEvent.deltaY` based on the [`WheelEvent.deltaMode`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode), this allows certain configurations to specify whether the user prefers to scroll by pixels, lines or pages.\r\n\r\n### Remaining tasks\r\n\r\n- [x] Write some tests\r\n- [x] Manually test on Windows\r\n  - [x] Edge\r\n  - [x] Chrome\r\n  - [x] Firefox\r\n  - [x] IE11\r\n- [ ] See if anything can be improved with OS X scroll bar visibility\r\n- [ ] Allow custom `line-height`?\r\n- [x] Disable/fill scroll bar when in an application such as `vim`\r\n\r\n### Notes\r\n\r\n- I dropped support for `mousewheel` and `DOMMouseScroll` events in favor of `WheelEvent` since it's just complicating the support and xterm.js' [supported browsers](https://github.com/sourcelair/xterm.js#browser-support) are well within [the browsers supporting `WheelEvent`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent#Browser_compatibility)\r\n- Eventually a bunch of `Terminal`'s variables (`ydisp`, `y`, `ybase`) could be pulled into `Viewport` to simplify code, the virtual selection implementation would probably best live here too.\r\n- Safari's scroll bar seems a little glitchy around drag of the scroll bar. This is not a big issue though considering it's probably not a very common use case on Macs.\r\n\r\n### What it looks like\r\n\r\nUbuntu 16.04/Chrome 52:\r\n\r\n![image](https://cloud.githubusercontent.com/assets/2193314/17381587/7f6a24de-5981-11e6-8820-902aaf52106d.png)\r\n\r\nUbuntu 16.04/Firefox 47\r\n\r\n![image](https://cloud.githubusercontent.com/assets/2193314/17382044/dea4e09a-5983-11e6-862d-089311a5a9c0.png)\r\n\r\nWindows 10/Edge 14\r\n\r\n![image](https://cloud.githubusercontent.com/assets/2193314/17424710/81d7d8ba-5a7b-11e6-989d-d390c26dc058.png)\r\n"},"comment":{"url":"https://api.github.com/repos/sourcelair/xterm.js/issues/comments/238347578","html_url":"https://github.com/sourcelair/xterm.js/pull/218#issuecomment-238347578","issue_url":"https://api.github.com/repos/sourcelair/xterm.js/issues/218","id":238347578,"user":{"login":"parisk","id":1188592,"avatar_url":"https://avatars.githubusercontent.com/u/1188592?v=3","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},"created_at":"2016-08-08T19:22:41Z","updated_at":"2016-08-08T19:22:41Z","body":"👍  awesome. LGTM.\r\n\r\nFeel free to merge!"}}
{"actor":{"display_login":"parisk"}}