Track Changes - warn the user when a stylesheet is replaced

NEW
Unassigned

Status

enhancement
P2
normal
9 months ago
4 months ago

People

(Reporter: rcaliman, Unassigned, Mentored)

Tracking

(Blocks 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

For M1 scope, we don't track changes happening via the Style Editor because it just replaces the stylesheet text with the updated stylesheet. This behaviour (replacing a stylesheet completely) also happens with hot-reloading and can cause previously tracked changes to become invalid. 

Reconciling between old and new stylesheets can be complex. We will not tackle it in M1 scope. However, as a fist step, we want to mitigate this issue by communicating as clear as possible to the user what's happening and why we're about to lose their tracked changes.

The Changes panel should warn the user when a full stylesheet swap happens and give them a chance to copy/export their changes before resetting the panel.
Blocks: 1503920
No longer blocks: track-changes
Blocks: track-changes
No longer blocks: 1503920
Component: Inspector → Inspector: Changes

For hot-reloading, one way to approach this is to add a listener in the Changes actor for the "stylesheet-added" event fired by the target actor.

In the handler, we check the StyleSheetActor's href against any of the source hrefs already collected in the this.changes array in the Changes actor.
If there's a match, it means one of the stylesheets we've previously collected changes for has been reloaded (perhaps by a hot reloading script). We should then fire an event from the Changes actor to notify the client, devtools/client/inspector/changes/ChangesView.js.

On the client we can listen to this new event and show a warning that the collected changes may no longer be accurate due to the stylesheet reload and prompt the user to copy their changes before continuing (at their own risk) or refreshing the page.

For covering the Style Editor use case (the whole stylesheet content gets replaced when the user edits), we need to react to the "style-applied" event on the StyleSheetActor when the kind argument is UPDATE_GENERAL.

Mentor: rcaliman
You need to log in before you can comment on or make changes to this bug.