Customize: Prevent panel sticky headers when scrolling if description is expanded

[westonruter]

When a section's description text is expandable and is included in the panel header area, it then becomes part of the area that is sticky when the panel is scrolled (per #34343). However, when the description is expanded and the user scrolls back up it can cause the header to jump unexpectedly:

See demonstration of issue: ​https://youtu.be/TlgnUpo_8cQ

The issue is more pronounced when the description text is longer, as will be the case in 4.9 for Custom CSS: ​https://github.com/WordPress/better-code-editing/pull/84

And from @melchoyce in duplicate #41879:

When I was testing the Additional CSS panel in trunk, I noticed that clicking into the textarea moves my whole screen down, which I found surprising and kind of alarming. Then, when I try to scroll back up to read, it snaps back up instead of naturally scrolling, which felt even more alarming. We should not make any sort of scroll/movement assumptions here.

Video: ​https://cloudup.com/cvJbKNaZ6yg

[westonruter]

#41879 was marked as a duplicate.

[westonruter]

Assigning this to @delawski since he thinks he can take a look.

If anyone else wants to take a look before him… be our guest. 🎶

[westonruter]

In 41384:

Code Editor: Scroll the cursor line into view instead of the entire editor when focused.

See #41850.
Fixes #41879.

[westonruter]

In 41385:

Code Editor: Remove scrollIntoView of editor's cursor line upon focus to prevent jumping issues for editor scroll position.

See #41850, #41879.

[westonruter]

I think a problem is that the height of the header isn't re-calculated when the section description is expanded.

[westonruter]

@delawski Another ticket that is directly impacted by this is the addition of notifications to panels and sections. See #38794. There is some JS on there you can throw into the console to add notifications to panels and sections for testing.

[westonruter]

Bumping priority to high for visibility and alignment with 4.9 goals, and given proximity to beta 1 deadline.

[delawski]

@westonruter you were right about the cause of the issue. The header height was calculated only once when the container was first expanded. However, any time the help block was expanded, the actual height changed. Height value stored in the data attribute became invalid in such cases.

Calculating the header height inside scroll event handler would cause performance issues.

That's why a custom event is now issued each time a help block gets expanded or collapsed. This event triggers header height recalculation, so that an expensive outerHeight() function is called only when it's really needed.

Attached patch file

I'm also providing a link to the PR on GitHub:
​https://github.com/xwp/wordpress-develop/pull/270

[westonruter]

In 41679:

Customize: Fix jumping behavior upon scrolling up when a sticky header has its description expanded.

Props delawski.
See #34343, #41879.
Fixes #41850.