{"action":"created","issue":{"url":"https://api.github.com/repos/mozilla/thimble.webmaker.org/issues/1276","labels_url":"https://api.github.com/repos/mozilla/thimble.webmaker.org/issues/1276/labels{/name}","comments_url":"https://api.github.com/repos/mozilla/thimble.webmaker.org/issues/1276/comments","events_url":"https://api.github.com/repos/mozilla/thimble.webmaker.org/issues/1276/events","html_url":"https://github.com/mozilla/thimble.webmaker.org/issues/1276","id":119230924,"number":1276,"title":"Design UX for \"inspector\" feature in Bramble","user":{"login":"humphd","id":427398,"avatar_url":"https://avatars.githubusercontent.com/u/427398?v=3","gravatar_id":"","url":"https://api.github.com/users/humphd","html_url":"https://github.com/humphd","followers_url":"https://api.github.com/users/humphd/followers","following_url":"https://api.github.com/users/humphd/following{/other_user}","gists_url":"https://api.github.com/users/humphd/gists{/gist_id}","starred_url":"https://api.github.com/users/humphd/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/humphd/subscriptions","organizations_url":"https://api.github.com/users/humphd/orgs","repos_url":"https://api.github.com/users/humphd/repos","events_url":"https://api.github.com/users/humphd/events{/privacy}","received_events_url":"https://api.github.com/users/humphd/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/mozilla/thimble.webmaker.org/labels/delightful!","name":"delightful!","color":"5319e7"},{"url":"https://api.github.com/repos/mozilla/thimble.webmaker.org/labels/UX","name":"UX","color":"009800"}],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/mozilla/thimble.webmaker.org/milestones/12","html_url":"https://github.com/mozilla/thimble.webmaker.org/milestones/Final%20stride","labels_url":"https://api.github.com/repos/mozilla/thimble.webmaker.org/milestones/12/labels","id":1340520,"number":12,"title":"Final stride","description":"The CDOT core team's last (supposedly) push on fixing critical/major features/bugs.","creator":{"login":"humphd","id":427398,"avatar_url":"https://avatars.githubusercontent.com/u/427398?v=3","gravatar_id":"","url":"https://api.github.com/users/humphd","html_url":"https://github.com/humphd","followers_url":"https://api.github.com/users/humphd/followers","following_url":"https://api.github.com/users/humphd/following{/other_user}","gists_url":"https://api.github.com/users/humphd/gists{/gist_id}","starred_url":"https://api.github.com/users/humphd/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/humphd/subscriptions","organizations_url":"https://api.github.com/users/humphd/orgs","repos_url":"https://api.github.com/users/humphd/repos","events_url":"https://api.github.com/users/humphd/events{/privacy}","received_events_url":"https://api.github.com/users/humphd/received_events","type":"User","site_admin":false},"open_issues":23,"closed_issues":32,"state":"open","created_at":"2015-10-06T15:20:07Z","updated_at":"2015-11-30T18:59:48Z","due_on":"2015-11-30T05:00:00Z","closed_at":null},"comments":4,"created_at":"2015-11-27T17:55:12Z","updated_at":"2015-12-01T00:07:26Z","closed_at":null,"body":"I've got a [PR up for Bramble](https://github.com/humphd/brackets/pull/506) that adds bi-directional inspecting (hovering in editor shows DOM element in preview; hovering in preview shows associated code).   It needs some thinking around proper UX:\r\n\r\n* I think we need a button to turn it on/off, so it doesn't autoscroll your editor just by moving your mouse into the preview.  Maybe modelling it on the Inspector in dev tools\r\n* I've got a \"click-to-pin\" feature, so if you hover over something, and click, it will stop jumping around to other parts of the code.  I'm not sure if I should still highlight other things, but not scroll you, etc.  Again, the Inspector probably gives us some models to follow.\r\n* I use a flash effect on the background of the lines.  I need some better CSS to apply to the lines.\r\n* I wonder if we should change the mouse pointer when you're in \"inspector\" mode?\r\n"},"comment":{"url":"https://api.github.com/repos/mozilla/thimble.webmaker.org/issues/comments/160804417","html_url":"https://github.com/mozilla/thimble.webmaker.org/issues/1276#issuecomment-160804417","issue_url":"https://api.github.com/repos/mozilla/thimble.webmaker.org/issues/1276","id":160804417,"user":{"login":"flukeout","id":25212,"avatar_url":"https://avatars.githubusercontent.com/u/25212?v=3","gravatar_id":"","url":"https://api.github.com/users/flukeout","html_url":"https://github.com/flukeout","followers_url":"https://api.github.com/users/flukeout/followers","following_url":"https://api.github.com/users/flukeout/following{/other_user}","gists_url":"https://api.github.com/users/flukeout/gists{/gist_id}","starred_url":"https://api.github.com/users/flukeout/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/flukeout/subscriptions","organizations_url":"https://api.github.com/users/flukeout/orgs","repos_url":"https://api.github.com/users/flukeout/repos","events_url":"https://api.github.com/users/flukeout/events{/privacy}","received_events_url":"https://api.github.com/users/flukeout/received_events","type":"User","site_admin":false},"created_at":"2015-12-01T00:07:26Z","updated_at":"2015-12-01T00:07:26Z","body":"Let's try ``rgba(0,135,207,.3)`` as the background color for the highlighted lines in the Editor, as seen below...\r\n\r\n![image](https://cloud.githubusercontent.com/assets/25212/11488561/60aaec80-977c-11e5-83d0-842367d41c7b.png)"}}