{"action":"created","comment":{"url":"https://api.github.com/repos/Maluen/Backbone-Debugger/pulls/comments/22412559","id":22412559,"diff_hunk":"@@ -151,6 +159,47 @@ Modules.set('controllers.appViewController', function() {\n \n                 return result;\n             }});\n+        },\n+\n+        setupHighlight: function() {\n+            this.highlightMask = document.createElement('div');\n+            this.highlightMask.style.position = 'absolute';\n+            this.highlightMask.style.zIndex = '100000000000';\n+            this.highlightMask.style.pointerEvents = 'none';\n+            this.highlightMask.style.backgroundColor = 'rgba(55, 161, 243, 0.48)';\n+            this.highlightMask.style.webkitFilter = 'grayscale(20%)';\n+\n+            // unhighlight when the user closes the devtools, etc.\n+            this.listenTo(port, 'client:disconnect', this.unhighlightViewElements);","path":"js/backboneAgent/controllers/appViewController.js","position":36,"original_position":36,"commit_id":"ef0ffda4acc4140a32f043cdbf1c1dfc86b031f6","original_commit_id":"ef0ffda4acc4140a32f043cdbf1c1dfc86b031f6","user":{"login":"Maluen","id":1434239,"avatar_url":"https://avatars.githubusercontent.com/u/1434239?v=3","gravatar_id":"","url":"https://api.github.com/users/Maluen","html_url":"https://github.com/Maluen","followers_url":"https://api.github.com/users/Maluen/followers","following_url":"https://api.github.com/users/Maluen/following{/other_user}","gists_url":"https://api.github.com/users/Maluen/gists{/gist_id}","starred_url":"https://api.github.com/users/Maluen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Maluen/subscriptions","organizations_url":"https://api.github.com/users/Maluen/orgs","repos_url":"https://api.github.com/users/Maluen/repos","events_url":"https://api.github.com/users/Maluen/events{/privacy}","received_events_url":"https://api.github.com/users/Maluen/received_events","type":"User","site_admin":false},"body":"This code is executed by the agent, which is separate from the devtools panel, runs in background from when you reload the app in \"debug mode\" until you don't refresh the page. You can also close the devtools and reopen it, it will be still there and the panel will refetch the captured info.\r\n\r\nSo I don't think there is the need to remove it, it is a single dom element that is created just one time and then is moved under the element to highlight.","created_at":"2015-01-02T15:24:35Z","updated_at":"2015-01-02T15:24:35Z","html_url":"https://github.com/Maluen/Backbone-Debugger/pull/29#discussion_r22412559","pull_request_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/pulls/29","_links":{"self":{"href":"https://api.github.com/repos/Maluen/Backbone-Debugger/pulls/comments/22412559"},"html":{"href":"https://github.com/Maluen/Backbone-Debugger/pull/29#discussion_r22412559"},"pull_request":{"href":"https://api.github.com/repos/Maluen/Backbone-Debugger/pulls/29"}}},"pull_request":{"url":"https://api.github.com/repos/Maluen/Backbone-Debugger/pulls/29","id":26624732,"html_url":"https://github.com/Maluen/Backbone-Debugger/pull/29","diff_url":"https://github.com/Maluen/Backbone-Debugger/pull/29.diff","patch_url":"https://github.com/Maluen/Backbone-Debugger/pull/29.patch","issue_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/issues/29","number":29,"state":"open","locked":false,"title":"Add highlighting of DOM elements for views","user":{"login":"michaelcarter","id":1911741,"avatar_url":"https://avatars.githubusercontent.com/u/1911741?v=3","gravatar_id":"","url":"https://api.github.com/users/michaelcarter","html_url":"https://github.com/michaelcarter","followers_url":"https://api.github.com/users/michaelcarter/followers","following_url":"https://api.github.com/users/michaelcarter/following{/other_user}","gists_url":"https://api.github.com/users/michaelcarter/gists{/gist_id}","starred_url":"https://api.github.com/users/michaelcarter/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/michaelcarter/subscriptions","organizations_url":"https://api.github.com/users/michaelcarter/orgs","repos_url":"https://api.github.com/users/michaelcarter/repos","events_url":"https://api.github.com/users/michaelcarter/events{/privacy}","received_events_url":"https://api.github.com/users/michaelcarter/received_events","type":"User","site_admin":false},"body":"#### What's this PR do?\r\nThis adds highlighting of a views `el` DOM element when hovered over or toggled open in the Backbone Debugger view pane.\r\n\r\nCurrently this just adds and a removes a red CSS box shadow for the highlighting, but I'm completely open to other effects.\r\n\r\nI've also included a version bump to `v0.3.0`, as this contains new functionality, but is the same in terms of its user interface.\r\n\r\n#### Where should the reviewer start?\r\nThe changes made are fairly simple, the only part I'd consider a quite ugly code is using the DOM to store data on the index of the corresponding view element (used in `AppViewsView.js`). Otherwise, it's just adding a couple of new methods and event listeners to achieve the behaviour. If there's a better way for me to achieve this without refactoring the whole project let me know, this code is quite unfamiliar to me.\r\n\r\n#### How should this be manually tested?\r\nOpen up the debugger on your favourite Backbone app, and use the \"Views\" tab. You'll notice as you hover over the view links and open/close them, that the corresponding dom element is highlighted in red.\r\n\r\n#### Any background context you want to provide?\r\nI work on a large backbone app with a couple of hundred views, it's sometimes very difficult to figure out what view corresponds to which DOM element on the page, my hope is this will help to ease that pain for my team and other Backbone developers.\r\n\r\n#### Screenshots:\r\n\r\n![screen shot 2014-12-28 at 14 53 01](https://cloud.githubusercontent.com/assets/1911741/5564107/43c28f5e-8ea1-11e4-85b1-53c162a2c82f.png)\r\n","created_at":"2014-12-28T14:56:42Z","updated_at":"2015-01-02T15:24:35Z","closed_at":null,"merged_at":null,"merge_commit_sha":"154e27bbb9049e39503328f6c9fc7afce68b388f","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/pulls/29/commits","review_comments_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/pulls/29/comments","review_comment_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/pulls/comments/{number}","comments_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/issues/29/comments","statuses_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/statuses/ef0ffda4acc4140a32f043cdbf1c1dfc86b031f6","head":{"label":"michaelcarter:add-dom-highlighting","ref":"add-dom-highlighting","sha":"ef0ffda4acc4140a32f043cdbf1c1dfc86b031f6","user":{"login":"michaelcarter","id":1911741,"avatar_url":"https://avatars.githubusercontent.com/u/1911741?v=3","gravatar_id":"","url":"https://api.github.com/users/michaelcarter","html_url":"https://github.com/michaelcarter","followers_url":"https://api.github.com/users/michaelcarter/followers","following_url":"https://api.github.com/users/michaelcarter/following{/other_user}","gists_url":"https://api.github.com/users/michaelcarter/gists{/gist_id}","starred_url":"https://api.github.com/users/michaelcarter/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/michaelcarter/subscriptions","organizations_url":"https://api.github.com/users/michaelcarter/orgs","repos_url":"https://api.github.com/users/michaelcarter/repos","events_url":"https://api.github.com/users/michaelcarter/events{/privacy}","received_events_url":"https://api.github.com/users/michaelcarter/received_events","type":"User","site_admin":false},"repo":{"id":28563887,"name":"Backbone-Debugger","full_name":"michaelcarter/Backbone-Debugger","owner":{"login":"michaelcarter","id":1911741,"avatar_url":"https://avatars.githubusercontent.com/u/1911741?v=3","gravatar_id":"","url":"https://api.github.com/users/michaelcarter","html_url":"https://github.com/michaelcarter","followers_url":"https://api.github.com/users/michaelcarter/followers","following_url":"https://api.github.com/users/michaelcarter/following{/other_user}","gists_url":"https://api.github.com/users/michaelcarter/gists{/gist_id}","starred_url":"https://api.github.com/users/michaelcarter/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/michaelcarter/subscriptions","organizations_url":"https://api.github.com/users/michaelcarter/orgs","repos_url":"https://api.github.com/users/michaelcarter/repos","events_url":"https://api.github.com/users/michaelcarter/events{/privacy}","received_events_url":"https://api.github.com/users/michaelcarter/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/michaelcarter/Backbone-Debugger","description":"Chrome Developer Tools extension for debugging Backbone.js applications","fork":true,"url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger","forks_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/forks","keys_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/keys{/key_id}","collaborators_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/teams","hooks_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/hooks","issue_events_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/issues/events{/number}","events_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/events","assignees_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/assignees{/user}","branches_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/branches{/branch}","tags_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/tags","blobs_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/git/refs{/sha}","trees_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/git/trees{/sha}","statuses_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/statuses/{sha}","languages_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/languages","stargazers_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/stargazers","contributors_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/contributors","subscribers_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/subscribers","subscription_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/subscription","commits_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/commits{/sha}","git_commits_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/git/commits{/sha}","comments_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/comments{/number}","issue_comment_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/issues/comments/{number}","contents_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/contents/{+path}","compare_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/compare/{base}...{head}","merges_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/merges","archive_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/downloads","issues_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/issues{/number}","pulls_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/pulls{/number}","milestones_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/milestones{/number}","notifications_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/labels{/name}","releases_url":"https://api.github.com/repos/michaelcarter/Backbone-Debugger/releases{/id}","created_at":"2014-12-28T14:38:40Z","updated_at":"2014-12-28T14:38:43Z","pushed_at":"2015-01-02T12:47:17Z","git_url":"git://github.com/michaelcarter/Backbone-Debugger.git","ssh_url":"git@github.com:michaelcarter/Backbone-Debugger.git","clone_url":"https://github.com/michaelcarter/Backbone-Debugger.git","svn_url":"https://github.com/michaelcarter/Backbone-Debugger","homepage":"","size":1775,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"Maluen:master","ref":"master","sha":"43800c3194d81b7fdeb6c3f23a1cd51af7264cd6","user":{"login":"Maluen","id":1434239,"avatar_url":"https://avatars.githubusercontent.com/u/1434239?v=3","gravatar_id":"","url":"https://api.github.com/users/Maluen","html_url":"https://github.com/Maluen","followers_url":"https://api.github.com/users/Maluen/followers","following_url":"https://api.github.com/users/Maluen/following{/other_user}","gists_url":"https://api.github.com/users/Maluen/gists{/gist_id}","starred_url":"https://api.github.com/users/Maluen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Maluen/subscriptions","organizations_url":"https://api.github.com/users/Maluen/orgs","repos_url":"https://api.github.com/users/Maluen/repos","events_url":"https://api.github.com/users/Maluen/events{/privacy}","received_events_url":"https://api.github.com/users/Maluen/received_events","type":"User","site_admin":false},"repo":{"id":10033115,"name":"Backbone-Debugger","full_name":"Maluen/Backbone-Debugger","owner":{"login":"Maluen","id":1434239,"avatar_url":"https://avatars.githubusercontent.com/u/1434239?v=3","gravatar_id":"","url":"https://api.github.com/users/Maluen","html_url":"https://github.com/Maluen","followers_url":"https://api.github.com/users/Maluen/followers","following_url":"https://api.github.com/users/Maluen/following{/other_user}","gists_url":"https://api.github.com/users/Maluen/gists{/gist_id}","starred_url":"https://api.github.com/users/Maluen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Maluen/subscriptions","organizations_url":"https://api.github.com/users/Maluen/orgs","repos_url":"https://api.github.com/users/Maluen/repos","events_url":"https://api.github.com/users/Maluen/events{/privacy}","received_events_url":"https://api.github.com/users/Maluen/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/Maluen/Backbone-Debugger","description":"Chrome Developer Tools extension for debugging Backbone.js applications","fork":false,"url":"https://api.github.com/repos/Maluen/Backbone-Debugger","forks_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/forks","keys_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/teams","hooks_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/hooks","issue_events_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/issues/events{/number}","events_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/events","assignees_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/assignees{/user}","branches_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/branches{/branch}","tags_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/tags","blobs_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/git/refs{/sha}","trees_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/statuses/{sha}","languages_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/languages","stargazers_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/stargazers","contributors_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/contributors","subscribers_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/subscribers","subscription_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/subscription","commits_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/commits{/sha}","git_commits_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/git/commits{/sha}","comments_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/comments{/number}","issue_comment_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/issues/comments/{number}","contents_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/contents/{+path}","compare_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/merges","archive_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/downloads","issues_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/issues{/number}","pulls_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/pulls{/number}","milestones_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/milestones{/number}","notifications_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/labels{/name}","releases_url":"https://api.github.com/repos/Maluen/Backbone-Debugger/releases{/id}","created_at":"2013-05-13T14:13:23Z","updated_at":"2015-01-01T18:50:08Z","pushed_at":"2014-12-30T22:57:58Z","git_url":"git://github.com/Maluen/Backbone-Debugger.git","ssh_url":"git@github.com:Maluen/Backbone-Debugger.git","clone_url":"https://github.com/Maluen/Backbone-Debugger.git","svn_url":"https://github.com/Maluen/Backbone-Debugger","homepage":"","size":1775,"stargazers_count":607,"watchers_count":607,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":30,"mirror_url":null,"open_issues_count":13,"forks":30,"open_issues":13,"watchers":607,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/Maluen/Backbone-Debugger/pulls/29"},"html":{"href":"https://github.com/Maluen/Backbone-Debugger/pull/29"},"issue":{"href":"https://api.github.com/repos/Maluen/Backbone-Debugger/issues/29"},"comments":{"href":"https://api.github.com/repos/Maluen/Backbone-Debugger/issues/29/comments"},"review_comments":{"href":"https://api.github.com/repos/Maluen/Backbone-Debugger/pulls/29/comments"},"review_comment":{"href":"https://api.github.com/repos/Maluen/Backbone-Debugger/pulls/comments/{number}"},"commits":{"href":"https://api.github.com/repos/Maluen/Backbone-Debugger/pulls/29/commits"},"statuses":{"href":"https://api.github.com/repos/Maluen/Backbone-Debugger/statuses/ef0ffda4acc4140a32f043cdbf1c1dfc86b031f6"}}}}