ask for " button maximize "

[bgbruno]

issue

panel after open is on bottom if I need more space on mobile I have to resizing everytime

solution

add button " maximize , minimize " on right top left from button " close " from #365

[adityarawat1223]

can I work on this?

[bgbruno]

@adityarawat1223 I think this is point of opensource - everyone can do that and then - pull request - what wait for repo admin to merge

Q) or is here some other workflow ?

[JingMatrix]

This is already implemented. You can click on the icon to toggle maximize / minimize.

[bgbruno]

This is already implemented

I use version 3.0.0 and I don't see it there

You can click on the icon to toggle maximize / minimize.

Q) pls can you show screenshot @JingMatrix ?

[JingMatrix]

Look at the demo in the README:

Click on the icon in the bottom right corner. There are six of them shown in the above image.

[bgbruno]

still not sure what icons you mean

and I think it just missunderstanding - so I draw it 🙂

this is what missing me there

[JingMatrix]

The icon in the bottom right of the img I gave, with shape similar to ⚙.

[bgbruno]

this is exactly why I open this ticket 🙂 because of this " panel float button "

at first - is still shown after panel is opened at second - then they get in the way if there is another data and at third - missing possibility maximize panel for comfortable developing if FE is not needed

my propose solution is that 3 standard icons for " minimize , maximize , close " and after close then show your " float icon " for open " dev tools panel "

I hope this time I use better description 😀

[JingMatrix]

I disagree with your suggestion of introducing more icons.

1. Of course, the icon should be shown all the time, so users can toggle it to hide all panels.
2. Regarding removing this icon, run eruda.destroy().

Hence, I would suggest closing this issue and also #365

[bgbruno]

I disagree with your suggestion of introducing more icons.

these icons will bring more control to display panel where developer needs

Of course, the icon should be shown all the time, so users can toggle it to hide all panels.

yes - close feature will be visible all the time - by standard way with " cross icon - X " in " top right " side on panel

Regarding removing this icon, run eruda.destroy()

sure but I cannot add another button into panel so I can achieve standard way of panels

Hence, I would suggest closing this issue

if you decide it from only your 1 man perspective - yours - I do nothing about it

and also #365

ah yes - that ticket #365 is about this

and this ticket #366 is about this

and both can be handeled with those 3 icons like standard window control buttons

[JingMatrix]

My main arguments is that three more icons is too crowed for most mobile devices.

Look at DevTools front-end shown on mobiles, thers is no x icon.

If the author decides to introducing more icons for wider screens, then it is better to hide them for other normal mobile devices. I feel comfortable when eruda is similar to the above (actually, it is the official one) front-end design.

[bgbruno]

three more icons is too crowed for most mobile devices.

now I understand you more - and I agree of course - for mobile

Look at DevTools front-end shown on mobiles, thers is no x icon.

not sure how you opened it - because I don't see it in my #chrome - #ios or #android BUT even so - how you want it hide then if there is no icon ? so when the panel shows an "x" , everyone knows how to close any panel

more icons for wider screens ... hiden them for ... mobile devices

yes I agree - this is the right way

>>

by my proposal universal button " x " should be displayed for all screens - and all the time

at least like possibility to set buttons - like we can set " tabs " with param " tool " https://github.com/liriliri/eruda/blob/master/doc/API.md#init

eruda.init({
	controlButtons : {
                shrinked : [ 'minimize' , 'maximize' ] ,
                default : [ 'close' ]
        }
});

[JingMatrix]

To answer to your questions, I open DevTools on Android using my own project ChromeXt. DevTools is opened in a new tab, so I close it by closing the tab.

This comment might be off-topic, feel free to hide it.

[bgbruno]

I open DevTools on Android using my own project ChromeXt

so this is not default functionality

DevTools is opened in a new tab, so I close it by closing the tab

with button " x " 😉 - otherwise you have to create some button to do that

This comment might be off-topic, feel free to hide it.

I think it is important to understand this theme

[JingMatrix]

I implemented some hooks to move panels around the button, so that the panels are moved (vertically) when toggling to show them after dragging the button. Here is the demo:

Here are the raleted lines of this hook: https://github.com/JingMatrix/ChromeXt/blob/f41f2f78ab3f8f33c554bb17dc4cdcdb4ddb8f30/app/src/main/assets/eruda.js#L8-L37

I think this solution solves the problem that eruda hides the bottom of the page where we want to inspect.

[surunzi]

3.2.0 supports inline mode.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Inline</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/luna-window/luna-window.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/luna-window/luna-window.js"></script>
  </head>
  <body>
    <script>
      const content = document.createElement('div')
      const win = new LunaWindow({
        title: 'DevTools',
        x: 50,
        y: 50,
        width: window.innerWidth - 100,
        height: window.innerHeight - 100,
        content,
      })
      win.show()
      win.$container
        .parent()
        .addClass('__chobitsu-hide__')
        .css('z-index', '200000')
      eruda.init({
        container: content,
        inline: true,
      })
    </script>
  </body>
</html>