Panel blocks content on the right

rev087 / ng-inspector

The AngularJS inspector pane for your browser

ng-inspector.org

MIT License

782 stars 93 forks source link

Panel blocks content on the right #22

Open SimplGy opened 10 years ago

SimplGy commented 10 years ago

I know this is referenced in #6, but it's probably easier to deal with as an isolated issue.

It's sensible to do the tree vertically since it's large and vertically-oriented, but blocking content prevents me from using my app with this enabled, which is a bummer.

You could add a button to switch sides, but why cover anything? Could this work: Just pad in the body enough to give your panel some room.

document.getElementsByTagName('body')[0].style.paddingRight = '290px'

rev087 commented 10 years ago

The problem with interfering with the page at this level is that a lot of layouts will break by adding a margin or padding, making it harder or impossible to interact with some elements in the page. The first solution I'll implement is a button to toggle the docking position from the right to the left, and a more sofisticated solution later (suggestions welcome).

Some ideas:

A toggle and/or keyboard shortcut that makes the inspector click-through (with pointer-events: none and a low opacity like 10%.
A toggle to enable auto-hide, which shrinks the inspector to a tiny width of 5-10px or so, expands it back to full width on mouse over, and shrink back on mouse out.

Chrome had an experimental "sidebar" API for extensions, but it never reached stable status and was eventually dropped :(

jarodccrowe commented 10 years ago

I would like to append to this issue that if you are developing a mobile site, using chromes iphone emulation feature, ng-inspector completely covers the screen.

If there was some sort of panel that ng-inspector could sit in that would not cover the website in any way that would solve this issue as well as the one OP brought up.

Yvem commented 10 years ago

+1 completely hide my app controls which are on the right...

wmassingham commented 9 years ago

Echoing this request. I'm using the mobile simulator, which means that my viewport space is about the same width as ng-inspector, so I can see one or the other, not both. My screen looks like this: http://puu.sh/dCPBe/526d79ffc2.png

Is it possible to add a panel to the developer options, like Batarang does?

Edit: this is pretty much the same thing as issue #16.

DrewML commented 9 years ago

This is partly solved in PR #74. It does not cover the mobile emulation use-case, or even all websites I've tested, but it does improve usability on the majority of tested sites.