Sticky buttons in HTTP request editor (and other places?)

[fvsch]

When discussing the Network request editor in bug 1493931, I suggested that the top-right buttons may disappear from the user's view if the user has to scroll.

On laptop screens, which are commonly 768px or 800px tall, the content window may be just 650px or 700px tall. If devtools are docked to the bottom, they may be 300 or 350px tall. If the user scrolls to see the bottom of the request editor form, they would lose access to the buttons until they scroll back up.

Some possible UI fixes:

1. Buttons in header: https://codepen.io/fvsch/full/pxNZbg/ We probably don't want it because it makes the header taller than 24px, and it's not obvious that users should interact with the content below then use buttons placed "outside" of the content.
2. Sticky buttons before the content (top): https://codepen.io/fvsch/full/PybBYX/
3. Sticky buttons after the content (bottom): https://codepen.io/fvsch/full/NObMNp/ The difference between sticky buttons and a footer docked to the bottom is that if the content is shorter than the viewport, we don't leave a big blank between the content and the "footer".

If we have other places where we have similar concerns with scrolling content and action buttons, it might be worth settling on a common UI pattern.

[aburone]

I see that someone else is working in bug 1493931 If he doesn't make it sticky, I can do it. WTW I would prefer the buttons after the form

[fvsch]

Closing this, as it doesn't appear we want to use that pattern.