gNotificationBox doesn't go there anymore (it goes inside the toolbox),
so we have really no use for that.
Simplify how the devtools theme is set on the browser, so that it is set
on the root.
Differential Revision: https://phabricator.services.mozilla.com/D220769
.browserContainer is relatively positioned, so we can position the
tab-modal dialogs absolutely inside it instead of making them part of
the browser stack.
While at it, make the rdm toolbar part of the regular browserContainer,
just like the regular devtools toolbox is. That way there's no need to
do ResizeObserver shenanigans to be able to let it grow. Keep it also
absolutely positioned tho, because we need to overlay the whole
container when the device modal is opened. That's somewhat gross.
This should in general be simpler to understand than the current set-up,
and more performant to since it avoids the dialog stack from forming
part of the browser element's flow.
Differential Revision: https://phabricator.services.mozilla.com/D157912
Right now, the vertical position of the status panel is the "auto"
position, which ends up working out, but mostly by chance, and relies on
behavior that's different from the standard flexbox, see bug 1789165.
Instead of using `position: fixed` and relying on not having any
sidebars or other content to the inline-end (otherwise the [mirror] rule
would be incorrect), explicitly position it against the
.browserContainer.
Differential Revision: https://phabricator.services.mozilla.com/D156384
Overlays for content prompts that are opened with tabdialog box occupy the entire browser viewport when RDM is opened. This is because `.dialogStack` is `position: fixed` to remove it from the grid layout and to avoid issues with scrolling when the simulated viewport is larger than the device viewport. The simulated viewport causing overflow is the reason why `position: absolute` might not be what we want to use here.
Now we have to deal with the problem of the overlay covering other browser UI.. To deal with this, this patch reuses the resize observer to store the `.browserStack` sizes so that `.dialogStack` can use these values to resize the modal overlay when other browser UI occupy the space of the browserStack (such as DevTools or the findbar).
Differential Revision: https://phabricator.services.mozilla.com/D107501
The RDM toolbar currently scrolls with the page when there is overflow in `.browserStack`. This is because the browser viewport can be set to a size larger than browser window. The solution here sets makes the toolbar `position: fixed` and utilizes the `ResizeObserver` to adjust the size of the device modal/selector to take up the size of the browser stack.
Differential Revision: https://phabricator.services.mozilla.com/D63245
Before now, we used XUL elements as the menu for device selection on RDM.
We introduced the icon on the XUL menuitem in bug 1306198, but the UI on Ubuntu
became weird looking. In order to fix this, we could think to modify Linux
gadget, but we replace to HTML menu components we are using in DevTools with
considering deXUL as well.
Differential Revision: https://phabricator.services.mozilla.com/D61149
Before now, we used XUL elements as the menu for device selection on RDM.
We introduced the icon on the XUL menuitem in bug 1306198, but the UI on Ubuntu
became weird looking. In order to fix this, we could think to modify Linux
gadget, but we replace to HTML menu components we are using in DevTools with
considering deXUL as well.
Differential Revision: https://phabricator.services.mozilla.com/D61149
Place resizers for RDM browser using CSS grid. This revision takes advantage of using grid-template-columns/rows to specify where browser stack elements are placed in the grid.
Differential Revision: https://phabricator.services.mozilla.com/D59189
The UA input field gets caught off when the browser viewport is too small. This is because the RDM toolbar has an explicit height of 30px set on it, so it can't accomodate the second row created for the UA input.
Differential Revision: https://phabricator.services.mozilla.com/D56783
Since closing D50559, we're not using CSS Grid for the browser's container layout (see D48778 for context). This means positioning the device settings modal using CSS grid areas won't work.
An alternative to this is to contain the RDM toolbar inside the browser stack now that it uses CSS Grid. We can then use absolute positioning to have the RDM toolbar always positioning on top of the browser element and adjust its size when the device settings is opened.
Differential Revision: https://phabricator.services.mozilla.com/D51102
Emilio Cobos Álvarez