1541824 - Export changes - Copy All Changes should remain in view when scrolling the Changes panel

Status: VERIFIED FIXED

(DevTools :: Inspector: Changes, enhancement, P2)

Description

[Cristian Fogel [:cfogel]]

Attachment: CopyAllChangesFixed.png

Affected versions

• 67.0b7, 68.0a1 (2019-04-03)

Affected platforms

• all available;

Steps to reproduce

1. Launch Firefox, open the devTools rules inspector;
2. Perform multiple changes to any listed class (add/edit/remove) until the Changes tab becomes scroll-able;
3. Access the Changes tab;
4. Scroll down;

Actual result

• The Copy All Changes button is scrolled out of view;

Enhancement suggestion

• The Copy All Changes button / section is fixed, or has a toggle/clamp checkbox to appear when hovered;
• Why this would make sense is for use with multiple changes.
  With the Copy Rule button appearing for each individual selector-change wanting to copy all the made changes would mean for the user to scroll up to find the button;

Additional notes

• attached screenshot with current format;

Comment 1

[Razvan Caliman [:rcaliman]]

Enhancement suggestion: The Copy All Changes button / section is fixed

This sounds like a reasonable fix that's easy to do.

I requires wrapping the "Copy All Changes" button in a container with a solid background, background: var(--theme-sidebar-background); (to account for both light and dark theme), then using position: sticky; top: 0; on that container so that it sticks to the top of the sidebar when scrolling. It may also need a z-index: 1 so it doesn't go underneath the CSS rules.

Wrapping the button with a container div needs to happen in the React component at: devtools/client/inspector/changes/components/ChangesApp.js.

The CSS changes need to be made in devtools/client/themes/changes.css

This is an easy task to be done by someone looking to get started with contributing to DevTools so I'll mark it as a "good-first-bug" and set myself as a mentor. The docs for getting started and setting up the code are located at: https://docs.firefox-dev.tools/getting-started/

Comment 2

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1541824 - Make Copy All Changes button sticky in Changes panel. r=gl

Ensure the button to copy all changes remains in view even when the Changes panel is overflowing vertically.

Comment 3

[Razvan Caliman [:rcaliman]]

Release is coming soon and this is a nice fix to have in by then.
Commandeering this good-first-bug since nobody picked it up.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5c2540f3ed73
Make Copy All Changes button sticky in Changes panel. r=gl

Comment 5

[Oana Pop-Rus]

https://hg.mozilla.org/mozilla-central/rev/5c2540f3ed73

Comment 6

[Cristian Fogel [:cfogel]]

Verified with 68.0a1 (2019-05-01) on Windows 10, macOS 10.13, Ubuntu 18.04.