Change layout depending on available space

[crswll]

Adding the ability to split the panes horizontally or vertically based on the users preference.

[anteriovieira]

Hi @crswll , you can provide a gif to demonstrate the behavior?

[crswll]

Sure.

[Akryum]

Thanks for your PR @crswll 👍
What if we switch the layout automatically depending on the width of the devtools?

[crswll]

No problem! I'm happy to help.

I didn't do it with media queries out of personal preference. There's was too many times in devtools I'd want a wide view but then it'll turn into two columns instead of one before i changed the "Panel Layout" setting.

I wonder if I can read that setting and honor it and use media queries if it's set to auto.

Feel all right about that?

[Akryum]

Why not, we can try a 3-state button with h/v/auto then. It would be auto by default.

[crswll]

Oh no I meant just getting the setting directly from Chrome devtools so I'd remove the button all together and change a class based on that setting.

If it's auto it's responsive, otherwise fixed in one direction or the other.

[Akryum]

Oh okay 👍

[crswll]

I gave it a quick look and a long Google but I don't think that setting is exposed like the theme unfortunately.

Any of you know if this setting is exposed?

chrome.devtools.panels.themeName exists but chrome.devtools.panels.panelLayout or the like does not seem to.

I'll go with the 3-state button if there's no luck here.

[crswll]

I'm finally getting around to this and not digging a three state button. I'm just going to use a media query and have it work "auto" until I figure out how to read that setting and honor that.

[crswll]

Ok, now 2 columns when we have over 685px, which is the breakpoint Chrome devtools seems to use. Also using matchMedia API which I've never used before so let me know if anything seems dumb/bad.

[Akryum]

Why setting icon only here?

[crswll]

I removed the button that toggles the layout and that had it as well. I can change this to a specific class and remove this more utilitarian class.

[Akryum]

I mean, we can make the Refresh button normal (by removing this class) now that you removed the other icon.

[crswll]

All right. It's been removed along with the extra class.

[crswll]

Quick shot of it working.