{"action":"created","comment":{"url":"https://api.github.com/repos/mitmproxy/mitmproxy/pulls/comments/55222967","id":55222967,"diff_hunk":"@@ -1,115 +1,151 @@\n import React from \"react\"\n-import {AutoScrollMixin, Router} from \"./common.js\"\n+import ReactDOM from \"react-dom\"\n+import shallowEqual from \"shallowequal\"\n+import {Router} from \"./common.js\"\n import {Query} from \"../actions.js\"\n-import { VirtualScrollMixin } from \"./virtualscroll.js\"\n+import AutoScroll from \"./helpers/AutoScroll\";\n+import {calcVScroll} from \"./helpers/VirtualScroll\"\n import {StoreView} from \"../store/view.js\"\n import _ from \"lodash\"\n \n-var LogMessage = React.createClass({\n-    render: function () {\n-        var entry = this.props.entry;\n-        var indicator;\n-        switch (entry.level) {\n-            case \"web\":\n-                indicator = <i className=\"fa fa-fw fa-html5\"></i>;\n-                break;\n-            case \"debug\":\n-                indicator = <i className=\"fa fa-fw fa-bug\"></i>;\n-                break;\n-            default:\n-                indicator = <i className=\"fa fa-fw fa-info\"></i>;\n-        }\n-        return (\n-            <div>\n-                { indicator } {entry.message}\n-            </div>\n+class EventLogContents extends React.Component {\n+\n+    static contextTypes = {\n+        eventStore: React.PropTypes.object.isRequired,\n+    };\n+\n+    static defaultProps = {\n+        rowHeight: 18,\n+    };\n+\n+    constructor(props, context) {\n+        super(props, context);\n+\n+        this.view = new StoreView(\n+            this.context.eventStore,\n+            entry => this.props.filter[entry.level]\n         );\n-    },\n-    shouldComponentUpdate: function () {\n-        return false; // log entries are immutable.\n+\n+        this.heights = {};\n+        this.state = { entries: this.view.list, vScroll: calcVScroll() };\n+\n+        this.onChange = this.onChange.bind(this);\n+        this.onViewportUpdate = this.onViewportUpdate.bind(this);\n     }\n-});\n \n-var EventLogContents = React.createClass({\n-    contextTypes: {\n-        eventStore: React.PropTypes.object.isRequired\n-    },\n-    mixins: [AutoScrollMixin, VirtualScrollMixin],\n-    getInitialState: function () {\n-        var filterFn = function (entry) {\n-            return this.props.filter[entry.level];\n-        };\n-        var view = new StoreView(this.context.eventStore, filterFn.bind(this));\n-        view.addListener(\"add\", this.onEventLogChange);\n-        view.addListener(\"recalculate\", this.onEventLogChange);\n+    componentDidMount() {\n+        window.addEventListener(\"resize\", this.onViewportUpdate);\n+        this.view.addListener(\"add\", this.onChange);\n+        this.view.addListener(\"recalculate\", this.onChange);\n+        this.onViewportUpdate();\n+    }\n \n-        return {\n-            view: view\n-        };\n-    },\n-    componentWillUnmount: function () {\n-        this.state.view.close();\n-    },\n-    filter: function (entry) {\n-        return this.props.filter[entry.level];\n-    },\n-    onEventLogChange: function () {\n-        this.forceUpdate();\n-    },\n-    componentWillReceiveProps: function (nextProps) {\n+    componentWillUnmount() {\n+        window.removeEventListener(\"resize\", this.onViewportUpdate);\n+        this.view.removeListener(\"add\", this.onChange);\n+        this.view.removeListener(\"recalculate\", this.onChange);\n+        this.view.close();\n+    }\n+\n+    componentDidUpdate() {\n+        this.onViewportUpdate();\n+    }\n+\n+    componentWillReceiveProps(nextProps) {\n         if (nextProps.filter !== this.props.filter) {\n-            this.props.filter = nextProps.filter; // Dirty: Make sure that view filter sees the update.\n-            this.state.view.recalculate();\n+            this.view.recalculate(\n+                entry => nextProps.filter[entry.level]\n+            );\n         }\n-    },\n-    getDefaultProps: function () {\n-        return {\n-            rowHeight: 45,\n-            rowHeightMin: 15,\n-            placeholderTagName: \"div\"\n-        };\n-    },\n-    renderRow: function (elem) {\n-        return <LogMessage key={elem.id} entry={elem}/>;\n-    },\n-    render: function () {\n-        var entries = this.state.view.list;\n-        var rows = this.renderRows(entries);\n-\n-        return <pre onScroll={this.onScroll}>\n-            { this.getPlaceholderTop(entries.length) }\n-            {rows}\n-            { this.getPlaceholderBottom(entries.length) }\n-        </pre>;\n     }\n-});\n \n-var ToggleFilter = React.createClass({\n-    toggle: function (e) {\n-        e.preventDefault();\n-        return this.props.toggleLevel(this.props.name);\n-    },\n-    render: function () {\n-        var className = \"label \";\n-        if (this.props.active) {\n-            className += \"label-primary\";\n-        } else {\n-            className += \"label-default\";\n+    onViewportUpdate() {\n+        const viewport = ReactDOM.findDOMNode(this);\n+\n+        const vScroll = calcVScroll({\n+            itemCount: this.state.entries.length,\n+            rowHeight: this.props.rowHeight,\n+            viewportTop: viewport.scrollTop,\n+            viewportHeight: viewport.offsetHeight,\n+            itemHeights: this.state.entries.map(entry => this.heights[entry.id]),","path":"web/src/js/components/eventlog.js","position":154,"original_position":154,"commit_id":"cb7ce8be2a129e275c5304dc98ceeb1b22aec0f9","original_commit_id":"cb7ce8be2a129e275c5304dc98ceeb1b22aec0f9","user":{"login":"gzzhanghao","id":5051221,"avatar_url":"https://avatars.githubusercontent.com/u/5051221?v=3","gravatar_id":"","url":"https://api.github.com/users/gzzhanghao","html_url":"https://github.com/gzzhanghao","followers_url":"https://api.github.com/users/gzzhanghao/followers","following_url":"https://api.github.com/users/gzzhanghao/following{/other_user}","gists_url":"https://api.github.com/users/gzzhanghao/gists{/gist_id}","starred_url":"https://api.github.com/users/gzzhanghao/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gzzhanghao/subscriptions","organizations_url":"https://api.github.com/users/gzzhanghao/orgs","repos_url":"https://api.github.com/users/gzzhanghao/repos","events_url":"https://api.github.com/users/gzzhanghao/events{/privacy}","received_events_url":"https://api.github.com/users/gzzhanghao/received_events","type":"User","site_admin":false},"body":"@mhils The component behaves weird if there are some large chunks in it. I think this mechanism is necessary for a better user expeirence. As for the performance issue, it works smoothly on my laptop, and it can be faster if we do some optimization on it. Anyway, I'll remove this if you still think it's unnecessary, but I think it's really great for UX.","created_at":"2016-03-07T15:54:39Z","updated_at":"2016-03-07T15:54:39Z","html_url":"https://github.com/mitmproxy/mitmproxy/pull/1004#discussion_r55222967","pull_request_url":"https://api.github.com/repos/mitmproxy/mitmproxy/pulls/1004","_links":{"self":{"href":"https://api.github.com/repos/mitmproxy/mitmproxy/pulls/comments/55222967"},"html":{"href":"https://github.com/mitmproxy/mitmproxy/pull/1004#discussion_r55222967"},"pull_request":{"href":"https://api.github.com/repos/mitmproxy/mitmproxy/pulls/1004"}}},"pull_request":{"url":"https://api.github.com/repos/mitmproxy/mitmproxy/pulls/1004","id":61836598,"html_url":"https://github.com/mitmproxy/mitmproxy/pull/1004","diff_url":"https://github.com/mitmproxy/mitmproxy/pull/1004.diff","patch_url":"https://github.com/mitmproxy/mitmproxy/pull/1004.patch","issue_url":"https://api.github.com/repos/mitmproxy/mitmproxy/issues/1004","number":1004,"state":"open","locked":false,"title":"[web] VirtualScroll and AutoScroll helper","user":{"login":"gzzhanghao","id":5051221,"avatar_url":"https://avatars.githubusercontent.com/u/5051221?v=3","gravatar_id":"","url":"https://api.github.com/users/gzzhanghao","html_url":"https://github.com/gzzhanghao","followers_url":"https://api.github.com/users/gzzhanghao/followers","following_url":"https://api.github.com/users/gzzhanghao/following{/other_user}","gists_url":"https://api.github.com/users/gzzhanghao/gists{/gist_id}","starred_url":"https://api.github.com/users/gzzhanghao/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gzzhanghao/subscriptions","organizations_url":"https://api.github.com/users/gzzhanghao/orgs","repos_url":"https://api.github.com/users/gzzhanghao/repos","events_url":"https://api.github.com/users/gzzhanghao/events{/privacy}","received_events_url":"https://api.github.com/users/gzzhanghao/received_events","type":"User","site_admin":false},"body":"Implement virtual scroll and auto scroll with helper functions.","created_at":"2016-03-06T07:50:45Z","updated_at":"2016-03-07T15:54:39Z","closed_at":null,"merged_at":null,"merge_commit_sha":"b7a7314624d175fd46570908322094f7008afc13","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/mitmproxy/mitmproxy/pulls/1004/commits","review_comments_url":"https://api.github.com/repos/mitmproxy/mitmproxy/pulls/1004/comments","review_comment_url":"https://api.github.com/repos/mitmproxy/mitmproxy/pulls/comments{/number}","comments_url":"https://api.github.com/repos/mitmproxy/mitmproxy/issues/1004/comments","statuses_url":"https://api.github.com/repos/mitmproxy/mitmproxy/statuses/cb7ce8be2a129e275c5304dc98ceeb1b22aec0f9","head":{"label":"gzzhanghao:vscroll","ref":"vscroll","sha":"cb7ce8be2a129e275c5304dc98ceeb1b22aec0f9","user":{"login":"gzzhanghao","id":5051221,"avatar_url":"https://avatars.githubusercontent.com/u/5051221?v=3","gravatar_id":"","url":"https://api.github.com/users/gzzhanghao","html_url":"https://github.com/gzzhanghao","followers_url":"https://api.github.com/users/gzzhanghao/followers","following_url":"https://api.github.com/users/gzzhanghao/following{/other_user}","gists_url":"https://api.github.com/users/gzzhanghao/gists{/gist_id}","starred_url":"https://api.github.com/users/gzzhanghao/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gzzhanghao/subscriptions","organizations_url":"https://api.github.com/users/gzzhanghao/orgs","repos_url":"https://api.github.com/users/gzzhanghao/repos","events_url":"https://api.github.com/users/gzzhanghao/events{/privacy}","received_events_url":"https://api.github.com/users/gzzhanghao/received_events","type":"User","site_admin":false},"repo":{"id":52610295,"name":"mitmproxy","full_name":"gzzhanghao/mitmproxy","owner":{"login":"gzzhanghao","id":5051221,"avatar_url":"https://avatars.githubusercontent.com/u/5051221?v=3","gravatar_id":"","url":"https://api.github.com/users/gzzhanghao","html_url":"https://github.com/gzzhanghao","followers_url":"https://api.github.com/users/gzzhanghao/followers","following_url":"https://api.github.com/users/gzzhanghao/following{/other_user}","gists_url":"https://api.github.com/users/gzzhanghao/gists{/gist_id}","starred_url":"https://api.github.com/users/gzzhanghao/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gzzhanghao/subscriptions","organizations_url":"https://api.github.com/users/gzzhanghao/orgs","repos_url":"https://api.github.com/users/gzzhanghao/repos","events_url":"https://api.github.com/users/gzzhanghao/events{/privacy}","received_events_url":"https://api.github.com/users/gzzhanghao/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/gzzhanghao/mitmproxy","description":"An interactive SSL-capable intercepting HTTP proxy for penetration testers and software developers","fork":true,"url":"https://api.github.com/repos/gzzhanghao/mitmproxy","forks_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/forks","keys_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/keys{/key_id}","collaborators_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/teams","hooks_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/hooks","issue_events_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/issues/events{/number}","events_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/events","assignees_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/assignees{/user}","branches_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/branches{/branch}","tags_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/tags","blobs_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/git/refs{/sha}","trees_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/git/trees{/sha}","statuses_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/statuses/{sha}","languages_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/languages","stargazers_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/stargazers","contributors_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/contributors","subscribers_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/subscribers","subscription_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/subscription","commits_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/commits{/sha}","git_commits_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/git/commits{/sha}","comments_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/comments{/number}","issue_comment_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/issues/comments{/number}","contents_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/contents/{+path}","compare_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/compare/{base}...{head}","merges_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/merges","archive_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/downloads","issues_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/issues{/number}","pulls_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/pulls{/number}","milestones_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/milestones{/number}","notifications_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/labels{/name}","releases_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/releases{/id}","deployments_url":"https://api.github.com/repos/gzzhanghao/mitmproxy/deployments","created_at":"2016-02-26T14:37:34Z","updated_at":"2016-02-26T14:37:35Z","pushed_at":"2016-03-07T10:47:20Z","git_url":"git://github.com/gzzhanghao/mitmproxy.git","ssh_url":"git@github.com:gzzhanghao/mitmproxy.git","clone_url":"https://github.com/gzzhanghao/mitmproxy.git","svn_url":"https://github.com/gzzhanghao/mitmproxy","homepage":"http://mitmproxy.org","size":27222,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"mitmproxy:master","ref":"master","sha":"34d19cf12e72a50b1d2e6fd1977c559ed9a80068","user":{"login":"mitmproxy","id":4652787,"avatar_url":"https://avatars.githubusercontent.com/u/4652787?v=3","gravatar_id":"","url":"https://api.github.com/users/mitmproxy","html_url":"https://github.com/mitmproxy","followers_url":"https://api.github.com/users/mitmproxy/followers","following_url":"https://api.github.com/users/mitmproxy/following{/other_user}","gists_url":"https://api.github.com/users/mitmproxy/gists{/gist_id}","starred_url":"https://api.github.com/users/mitmproxy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mitmproxy/subscriptions","organizations_url":"https://api.github.com/users/mitmproxy/orgs","repos_url":"https://api.github.com/users/mitmproxy/repos","events_url":"https://api.github.com/users/mitmproxy/events{/privacy}","received_events_url":"https://api.github.com/users/mitmproxy/received_events","type":"Organization","site_admin":false},"repo":{"id":519832,"name":"mitmproxy","full_name":"mitmproxy/mitmproxy","owner":{"login":"mitmproxy","id":4652787,"avatar_url":"https://avatars.githubusercontent.com/u/4652787?v=3","gravatar_id":"","url":"https://api.github.com/users/mitmproxy","html_url":"https://github.com/mitmproxy","followers_url":"https://api.github.com/users/mitmproxy/followers","following_url":"https://api.github.com/users/mitmproxy/following{/other_user}","gists_url":"https://api.github.com/users/mitmproxy/gists{/gist_id}","starred_url":"https://api.github.com/users/mitmproxy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mitmproxy/subscriptions","organizations_url":"https://api.github.com/users/mitmproxy/orgs","repos_url":"https://api.github.com/users/mitmproxy/repos","events_url":"https://api.github.com/users/mitmproxy/events{/privacy}","received_events_url":"https://api.github.com/users/mitmproxy/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/mitmproxy/mitmproxy","description":"An interactive SSL-capable intercepting HTTP proxy for penetration testers and software developers","fork":false,"url":"https://api.github.com/repos/mitmproxy/mitmproxy","forks_url":"https://api.github.com/repos/mitmproxy/mitmproxy/forks","keys_url":"https://api.github.com/repos/mitmproxy/mitmproxy/keys{/key_id}","collaborators_url":"https://api.github.com/repos/mitmproxy/mitmproxy/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/mitmproxy/mitmproxy/teams","hooks_url":"https://api.github.com/repos/mitmproxy/mitmproxy/hooks","issue_events_url":"https://api.github.com/repos/mitmproxy/mitmproxy/issues/events{/number}","events_url":"https://api.github.com/repos/mitmproxy/mitmproxy/events","assignees_url":"https://api.github.com/repos/mitmproxy/mitmproxy/assignees{/user}","branches_url":"https://api.github.com/repos/mitmproxy/mitmproxy/branches{/branch}","tags_url":"https://api.github.com/repos/mitmproxy/mitmproxy/tags","blobs_url":"https://api.github.com/repos/mitmproxy/mitmproxy/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/mitmproxy/mitmproxy/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/mitmproxy/mitmproxy/git/refs{/sha}","trees_url":"https://api.github.com/repos/mitmproxy/mitmproxy/git/trees{/sha}","statuses_url":"https://api.github.com/repos/mitmproxy/mitmproxy/statuses/{sha}","languages_url":"https://api.github.com/repos/mitmproxy/mitmproxy/languages","stargazers_url":"https://api.github.com/repos/mitmproxy/mitmproxy/stargazers","contributors_url":"https://api.github.com/repos/mitmproxy/mitmproxy/contributors","subscribers_url":"https://api.github.com/repos/mitmproxy/mitmproxy/subscribers","subscription_url":"https://api.github.com/repos/mitmproxy/mitmproxy/subscription","commits_url":"https://api.github.com/repos/mitmproxy/mitmproxy/commits{/sha}","git_commits_url":"https://api.github.com/repos/mitmproxy/mitmproxy/git/commits{/sha}","comments_url":"https://api.github.com/repos/mitmproxy/mitmproxy/comments{/number}","issue_comment_url":"https://api.github.com/repos/mitmproxy/mitmproxy/issues/comments{/number}","contents_url":"https://api.github.com/repos/mitmproxy/mitmproxy/contents/{+path}","compare_url":"https://api.github.com/repos/mitmproxy/mitmproxy/compare/{base}...{head}","merges_url":"https://api.github.com/repos/mitmproxy/mitmproxy/merges","archive_url":"https://api.github.com/repos/mitmproxy/mitmproxy/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/mitmproxy/mitmproxy/downloads","issues_url":"https://api.github.com/repos/mitmproxy/mitmproxy/issues{/number}","pulls_url":"https://api.github.com/repos/mitmproxy/mitmproxy/pulls{/number}","milestones_url":"https://api.github.com/repos/mitmproxy/mitmproxy/milestones{/number}","notifications_url":"https://api.github.com/repos/mitmproxy/mitmproxy/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/mitmproxy/mitmproxy/labels{/name}","releases_url":"https://api.github.com/repos/mitmproxy/mitmproxy/releases{/id}","deployments_url":"https://api.github.com/repos/mitmproxy/mitmproxy/deployments","created_at":"2010-02-16T04:10:13Z","updated_at":"2016-03-07T15:18:39Z","pushed_at":"2016-03-07T10:50:38Z","git_url":"git://github.com/mitmproxy/mitmproxy.git","ssh_url":"git@github.com:mitmproxy/mitmproxy.git","clone_url":"https://github.com/mitmproxy/mitmproxy.git","svn_url":"https://github.com/mitmproxy/mitmproxy","homepage":"http://mitmproxy.org","size":29155,"stargazers_count":4609,"watchers_count":4609,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":649,"mirror_url":null,"open_issues_count":64,"forks":649,"open_issues":64,"watchers":4609,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/mitmproxy/mitmproxy/pulls/1004"},"html":{"href":"https://github.com/mitmproxy/mitmproxy/pull/1004"},"issue":{"href":"https://api.github.com/repos/mitmproxy/mitmproxy/issues/1004"},"comments":{"href":"https://api.github.com/repos/mitmproxy/mitmproxy/issues/1004/comments"},"review_comments":{"href":"https://api.github.com/repos/mitmproxy/mitmproxy/pulls/1004/comments"},"review_comment":{"href":"https://api.github.com/repos/mitmproxy/mitmproxy/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/mitmproxy/mitmproxy/pulls/1004/commits"},"statuses":{"href":"https://api.github.com/repos/mitmproxy/mitmproxy/statuses/cb7ce8be2a129e275c5304dc98ceeb1b22aec0f9"}}}}