Closed Bug 1641554 Opened 5 years ago Closed 5 years ago

Expanding object with lots of properties can scroll the output to the bottom

Categories

(DevTools :: Console, defect, P1)

Product:
DevTools
Component:
Console
Type:
defect

Tracking

(firefox-esr68 unaffected, firefox76 unaffected, firefox77 unaffected, firefox78 verified, firefox79 verified)

Status:
VERIFIED FIXED
Milestone:
Firefox 79
Tracking Flags:
Tracking Status
firefox-esr68 --- unaffected
firefox76 --- unaffected
firefox77 --- unaffected
firefox78 --- verified
firefox79 --- verified

People

(Reporter: nchevobbe, Assigned: nchevobbe)

References

(Regression)

Details

(Keywords: regression)

Attachments

(1 file)

Bug 1641554 - Fix scroll to bottom issue when expanding object in console. r=bomsy.
47 bytes, text/x-phabricator-request
jcristau
: approval-mozilla-beta+
Details | Review

Steps to reproduce

  1. With the console open at the bottom and the console being not too tall
  2. Evaluate document
  3. Expand the resulting object

Actual results

The console is scroll to the very bottom, making the top of the message out of view

This was regressed by Bug 1421659, where we scroll to the bottom when the output size changes.

Note that this can only happen when the document is logged in a non-overflowed console.
When the console overflows, expanding an object doesn't impact its size, so the resizeObserver callback isn't triggered.

I agree that the inspected object should be kept in view. But scrolling down seems good, the previous behavior was annoying:

┌────────────────────────────┐
│ ...                        │
│ ...                        │
│ ...                        │
│ ...                        │
│ ▶ HTMLDocument             │
└────────────────────────────┘

If I the expand the HTMLDocument, it's because I want to see its properties. But I still had to scroll down manually:

┌────────────────────────────┐
│ ...                        │
│ ...                        │
│ ...                        │
│ ...                        │
│ ▼ HTMLDocument             │
└─┴──────────────────────────┘

Something like this could be better:

┌────────────────────────────┐
│ ▼ HTMLDocument             │
│ │   URL: "about:blank"     │
│ │ ▶ activeElement: <body>  │
│ │   alinkColor: ""         │
│ │ ▶ all: HTMLAllCollection │
└─┴──────────────────────────┘

Set release status flags based on info from the regressing bug 1421659

status-firefox76: --- → unaffected
status-firefox77: --- → unaffected
status-firefox78: --- → affected
status-firefox-esr68: --- → unaffected

Any update on this Nicolas? Do you expect to have a fix for 78?

Flags: needinfo?(nchevobbe)

It's on my list of things to do, but I'm still not sure what the fix can look like.
I'll try to get to it this week, and if I can't we can rollback Bug 1421659 (since the issue was already here for a long time)

Flags: needinfo?(nchevobbe)

The issue was that we were having a ResizeObserver only on the console output
node. When the output only has a few node, its height is impacted when an
element is expanded.
We fix this by observing the output parent node, which contains both the input
and the output, which prevents the issue.
In editor mode though, we still need to observe only the output element, as
the editor is on the right side.
So when the console changes from editor mode to inline, or the other way around,
we change the observed element.

A test case is added to make sure the issue is fixed. Sadly, this also means
we have to remove a test case (typing a multiline expression in input mode
won't keep the output scroll to the bottom), but it's a tradeoff I'm willing
to make as the issue isn't as annoying as the one we're fixing here.

Pushed by nchevobbe@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/eee9a832c4db Fix scroll to bottom issue when expanding object in console. r=bomsy.

https://hg.mozilla.org/mozilla-central/rev/eee9a832c4db

Status: ASSIGNED → RESOLVED
Closed: 5 years ago
status-firefox79: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 79

Comment on attachment 9157226 [details]
Bug 1641554 - Fix scroll to bottom issue when expanding object in console. r=bomsy.

Beta/Release Uplift Approval Request

  • User impact if declined: DevTools Console would scroll to the bottom on user interaction when it's not supposed to (expanding an object)
  • Is this code covered by automated tests?: Yes
  • Has the fix been verified in Nightly?: No
  • Needs manual test from QE?: Yes
  • If yes, steps to reproduce: 1. Open the console
  1. Clear it
  2. Evaluate Array.from({length: 100}, (_, i) => i).reduce((acc, item) => {acc["item-" + item] = item; return acc;}, {})
  3. Expand the object produced

-> the output shouldn't scroll to the bottom

  • List of other uplifts needed: None
  • Risk to taking this patch: Low
  • Why is the change risky/not risky? (and alternatives if risky): DevTools only, covered by test
  • String changes made/needed:
Attachment #9157226 - Flags: approval-mozilla-beta?
Flags: qe-verify+
QA Whiteboard: [qa-triaged]

Comment on attachment 9157226 [details]
Bug 1641554 - Fix scroll to bottom issue when expanding object in console. r=bomsy.

approved for 78 rc1

Attachment #9157226 - Flags: approval-mozilla-beta? → approval-mozilla-beta+

I have managed to reproduce the issue on an old Fx78.0a1 build.
The issue is verified fixed using the latest Fx79.0a1 on Windows 10, Ubuntu 18.04 and macOS 10.14. Expanding the result of the array no longer scrolls automatically to the bottom.

status-firefox79: fixed → verified

Verified as fixed using Fx78.0RC on windows 10, ubuntu 18.04 and macOS 10.14.

Status: RESOLVED → VERIFIED
status-firefox78: fixed → verified
Flags: qe-verify+
Has Regression Range: --- → yes
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: