Implement warning for unsaved changes in dashboard

[jspenguin2017]

I want to help fixing gorhill/uBlock#3271

Since the dashboard is driven by iframes, I think one way to implement it is to make each iframe to expose a global variable, hasUnsavedChanges. When the dashboard is closing or the tab is changing, the main frame will check the global variable of the child frame and show a warning message if needed.

@gorhill Do you think this is a good way to implement it? Do you want me to PR?

[gorhill]

Do you think this is a good way to implement it? Do you want me to PR?

Sounds fine to me, I would accept a PR, thanks. I haven't thought much about this, not sure how the warning should be designed (I feel DOM-based would be better).

[gwarser]

When the dashboard is closing

nothing can be done... ?

https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Notes

[gorhill]

The dashboard code is the one swapping panes, so it's just a matter of having a warning when a pane is detected as having unsaved changes, and waiting for confirmation before swapping. If the only case left is the closing of the whole dashboard itself, it's not too bad.

[jspenguin2017]

I feel DOM-based would be better

The warning for dashboard closing will always be a confirm-like dialog. So I was thinking of mimicking that, but it's hard to get the prompt text to be consistent though.

[jspenguin2017]

I have some problem with uDom. It tears everything down when beforeunload event is fired... Eh, why?

// Cleanup

var onBeforeUnload = function() {
    var entry;
    while ( (entry = listenerEntries.pop()) ) {
        entry.dispose();
    }
    window.removeEventListener('beforeunload', onBeforeUnload);
};

window.addEventListener('beforeunload', onBeforeUnload);

[jspenguin2017]

[jspenguin2017]

I'll close this in favor of the PR, where we can review the changes easily.