Closed Bug 1604726 Opened 4 years ago Closed 4 years ago

The toolbar of the browser-embedded RDM should not scroll with the page

Categories

(DevTools :: Responsive Design Mode, defect, P1)

defect

Tracking

(Fission Milestone:M6, firefox75 verified)

VERIFIED FIXED
Firefox 75
Fission Milestone M6
Tracking Status
firefox75 --- verified

People

(Reporter: pbro, Assigned: mtigley)

References

(Blocks 1 open bug)

Details

(Whiteboard: fission-rdm-mvp)

Attachments

(1 file)

Steps:

  • Make sure you have the new RDM turned on devtools.responsive.browserUI.enabled
  • Open RDM on any page
  • Choose a device which viewport's is taller than your browser window height, causing a vertical scrollbar
  • Scroll down the page

Expected: the simulated viewport should scroll, but the RDM toolbar should remain fixed at the top

Actual: both scroll

Note that the same thing happens for horizontal scrolling.

Priority: -- → P3
Whiteboard: fission-rdm-reserve

Thanks for filing Patrick! I believe this was regressed by Bug 1596166 after removing the height: 100% declaration when the device modal is opened. We can add the fix here: https://searchfox.org/mozilla-central/source/devtools/client/responsive/responsive-browser.css#25

Regressed by: 1596166

(In reply to Micah Tigley [:mtigley] from comment #2)

Thanks for filing Patrick! I believe this was regressed by Bug 1596166 after removing the height: 100% declaration when the device modal is opened. We can add the fix here: https://searchfox.org/mozilla-central/source/devtools/client/responsive/responsive-browser.css#25

I commented on the incorrect bug. This comment should be in Bug 1604729.

No longer blocks: dt-rdm-fission
No longer regressed by: 1596166
Assignee: nobody → bwerth
Status: NEW → ASSIGNED
Priority: P3 → P1
Whiteboard: fission-rdm-reserve → fission-rdm-mvp

I don't think this is a very easy problem to solve.
Here's the structure:

<stack class="browserStack">
<iframe class="rdm-toolbar">...</iframe>
<browser>...</browser>
...
</stack>

The stack element uses a grid layout to position the browser within it.
We want the toolbar to be fixed, so to solve this, we'll need to make the iframe use position:fixed.
Doing this however prevents the stack from scrolling anymore. Only pointer-events:none on the iframe makes it scroll again, but doing it prevents using the toolbar at all as the events don't reach it anymore.
It would be good to make the iframe smaller (i.e. just as tall as the toolbar), right now it covers the full height of the stack element. This is probably because we need to be tall in order to contain the device popup.
One option would be to make it small only when the device popup is not shown, and when we need to show it, we expand the iframe to the full 100% of the height.

Acutally, the iframe already seems to resize itself when the modal is opened. So doing this change seems to fix the bug:

.browserContainer.responsive-mode .browserStack > .rdm-toolbar {
  border: none;
  position: fixed;
  width: 100%;
  height: 29px;
  z-index: 1;
}

It would be good to replace the hard-coded 29px by a variable if we can access it somewhere.
Also, when the browser is narrow, the RDM toolbar wraps on 2 lines, and is therefore taller than 29px. So we would need to find a fix for this too.

Assignee: bwerth → mtigley

(In reply to Patrick Brosset <:pbro> from comment #5)

.browserContainer.responsive-mode .browserStack > .rdm-toolbar {
  border: none;
  position: fixed;
  width: 100%;
  height: 29px;
  z-index: 1;
}

Yeah, this is tough!

I found setting it to position: fixed causes the bottom of the device modal to become inaccessible. This was also brought up in Bug 1604729. I'll keep investigating.

Pushed by mtigley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/2a3597aa8d9e
Use a ResizeObserver to responsively size the toolbar. r=bgrins
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 75
Fission Milestone: --- → M6
Flags: qe-verify+

I have managed to reproduce this issue using Firefox 73.0a1 (BuildId:20191218211221).

This issue is verified fixed using Firefox 75.0b7 (BuildId:20200322132212) on Windows 10 64bit, macOS 10.14 and Ubuntu 18.04 64bit.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
Regressions: 1622414
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: