Export changes - Copy All Changes should remain in view when scrolling the Changes panel
Categories
(DevTools :: Inspector: Changes, enhancement, P2)
Tracking
(firefox66 unaffected, firefox67 wontfix, firefox68 verified)
Tracking | Status | |
---|---|---|
firefox66 | --- | unaffected |
firefox67 | --- | wontfix |
firefox68 | --- | verified |
People
(Reporter: cfogel, Assigned: rcaliman)
References
Details
Attachments
(2 files)
Affected versions
- 67.0b7, 68.0a1 (2019-04-03)
Affected platforms
- all available;
Steps to reproduce
- Launch Firefox, open the devTools rules inspector;
- Perform multiple changes to any listed class (add/edit/remove) until the Changes tab becomes scroll-able;
- Access the Changes tab;
- 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;
Assignee | ||
Comment 1•5 years ago
|
||
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/
Assignee | ||
Comment 2•5 years ago
|
||
Ensure the button to copy all changes remains in view even when the Changes panel is overflowing vertically.
Assignee | ||
Comment 3•5 years ago
|
||
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.
Pushed by rcaliman@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/5c2540f3ed73 Make Copy All Changes button sticky in Changes panel. r=gl
Comment 5•5 years ago
|
||
bugherder |
Reporter | ||
Comment 6•5 years ago
|
||
Verified with 68.0a1 (2019-05-01) on Windows 10, macOS 10.13, Ubuntu 18.04.
Updated•5 years ago
|
Description
•