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
--HG--
extra : moz-landing-system : lando
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
--HG--
extra : moz-landing-system : lando
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
--HG--
extra : moz-landing-system : lando
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
--HG--
extra : moz-landing-system : lando
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
--HG--
extra : moz-landing-system : lando
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
--HG--
extra : moz-landing-system : lando
Micah Tigley
Daisuke Akatsuka
Csoregi Natalia
Brad Werth
Tim Nguyen
Gabriel Luong