mozilla / lightbeam-we

Web Extension version of the Firefox Lightbeam add-on
https://addons.mozilla.org/en-GB/firefox/addon/lightbeam/
Mozilla Public License 2.0
179 stars 61 forks source link

Centre the graph w.r.to the viz area #165

Open princiya opened 7 years ago

princiya commented 7 years ago

PR #164 increases the graph display area by giving it position: absolute. The graph is now centred w.r.to the body element. Here

When the graph is resized, there is the issue where the graph is not centred w.r.to the viz area. screen shot 2017-08-22 at 14 32 33

maqboolkhan commented 6 years ago

i wanna work on it?

princiya commented 6 years ago

@maqboolkhan sure. this could be a little tricky, I might be wrong too :) We employed a quick hack from re-doing the layout to use Flexbox. Let me know if you face any issues or if you want to discuss how you want to go about this. Thanks.

maqboolkhan commented 6 years ago

@princiya is there any chatroom like Gitter where we can discuss ? on browser resizing i am unable to experience any kind of adjustment :/

princiya commented 6 years ago

@maqboolkhan we have a discourse thread https://discourse.mozilla.org/tags/lightbeam

maqboolkhan commented 6 years ago

hi @princiya i tried hard to understand this problem but kindly describe more so i can work on it Thanks

princiya commented 6 years ago

@maqboolkhan if you refer to the above screenshot, the graph should be centered w.r.to the black area only, but due to some hacks adopted, it is centered w.r.to the entire display area. Does this address your concern? Let me know for further queries, happy to answer.

maqboolkhan commented 6 years ago

hi @princiya so i found a trick is instead of using body element's width and height https://github.com/mozilla/lightbeam-we/blob/master/src/js/viz.js#L119

we should use https://github.com/mozilla/lightbeam-we/blob/master/src/index.html#L82 .vis element's dimension but then we will have a problem that it wont return height correctly but we can easily tackle it with (height of .vis + top of .vis) + (full height of page - (height of .vis + top of .vis))

Your feedback is welcome Thanks

maqboolkhan commented 6 years ago

hi @princiya how to check my changes ?? as per mentioned on READMEafter going to about:debugging i need to install my addon temporary but it does not shows up any data (chart) so kindly guide me how i can check my changes ??

princiya commented 6 years ago

After the web extension installation you need to visit few websites (open new tabs on the browser) which will constitute nodes for the visualisation and any third party connections they possess turn out to be links. Come back and check lightbeam, your graph should be growing.

On 22 Oct 2017 14:04, "maq" notifications@github.com wrote:

hi @princiya https://github.com/princiya how to check my changes ?? as per mentioned on READMEafter going to about:debugging i need to install my addon temporary but it does not shows up any data (chart) so kindly guide me how i can check my changes ??

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mozilla/lightbeam-we/issues/165#issuecomment-338460910, or mute the thread https://github.com/notifications/unsubscribe-auth/AHpqpQsd1svZZyO_HfSjnCXkBcy85A4Lks5suv4XgaJpZM4O-j0o .