WordPress.org

Make WordPress Core

Opened 8 years ago

Last modified 23 minutes ago

#14356 assigned enhancement

Better string for onbeforeunload event dialog

Reported by: demetris Owned by: adamsilverstein
Milestone: 4.9.8 Priority: low
Severity: normal Version:
Component: Editor Keywords: has-ux-feedback dev-feedback has-patch i18n-change needs-testing close 2nd-opinion
Focuses: javascript, administration Cc:

Description

The WP string for this now is:

The changes you made will be lost if you navigate away from this page.

The resulting dialog is:

Are you sure you want to navigate away from this page?

The changes you made will be lost if you navigate away from this page.

Press OK to continue, or Cancel to stay on the current page.

[OK] [Cancel]

Which is repetitive and, it seems to me, confusing.

I was thinking we could change our string to something not repetitive that complements better the default strings. E.g.:

You have unsaved changes that will be lost!

Patch available upon request.

Attachments (4)

onbeforeunload-dialogs-2010-11.png (35.2 KB) - added by demetris 8 years ago.
onbeforeunload dialogs from Chrome 9, Safari 5, Internet Explorer 8, Firefox 3.6
14356.diff (2.2 KB) - added by adamsilverstein 3 years ago.
14356.2.diff (2.9 KB) - added by audrasjb 8 days ago.
refreshed the patch against trunk
leave-site-dialog-in-chrome.jpg (14.7 KB) - added by birgire 13 hours ago.

Download all attachments as: .zip

Change History (28)

#1 @nacin
8 years ago

Pretty sure the resulting dialog is browser specific.

#2 @demetris
8 years ago

  • Cc dkikizas@… added

@nacin

Yes. I forgot to add that:

The string will have to also work with Chrome, which does not have any default strings there. Instead, it has more informative buttons:

[Leave this Page] [Stay on this Page]

(That‘s in Chromium for Linux. I will have to check the other Chromes too, but I think it is the same across operating systems.)

Internet and Firefox have the exact same dialog (the one I am quoting in the description).

Safari has:

Are you sure you want to leave this page?

Press OK to continue, or Cancel to stay on the current page.

[OK] [Cancel]

Opera does not implement onbeforeunload yet.

#3 @nacin
8 years ago

  • Keywords ux-feedback added; dev-feedback removed
  • Milestone changed from Awaiting Review to Future Release
  • Priority changed from normal to lowest

This is slightly confusing, if you could boil it down a little better, that'd be great.

@demetris
8 years ago

onbeforeunload dialogs from Chrome 9, Safari 5, Internet Explorer 8, Firefox 3.6

#4 @demetris
8 years ago

Attached an image with screenshots.

The challenge here is to come up with text that is not confusingly repetitive in ΙΕ, Firefox and Safari, and yet is sufficiently informative in Chrome (whose onbeforeunload dialog does not have any default message).

(The attached image does not have an Opera screenshot, because Opera does not implement onbeforeunload yet.)

#5 @nacin
4 years ago

  • Component changed from JavaScript to Editor
  • Focuses javascript added

#6 @chriscct7
3 years ago

  • Focuses administration added
  • Keywords needs-patch added

#7 @adamsilverstein
3 years ago

  • Keywords dev-feedback has-patch added; needs-patch removed

In 14356.diff:

  • Change onbeforeunload string from "The changes you made will be lost if you navigate away from this page." to "You have unsaved changes that will be lost!"

The purpose of this string change is to clear up the language and reduce redundancy in browsers that mention navigating away in their dialogs already. The improvement is especially notable in Chrome, older IE and to a lesser extent safari. In browsers that don't display the string, changing it does no harm, where it is displayed this notably improves the overall wording of the resulting dialog. Open to any tweaks to the exact language anyone can suggest, this does seem better than what we have now.

Here is how this looks in various browsers. Note that current versions of Firefox do not display the string so don't change

Before

http://cl.ly/image/0f0P3R3n280e/Monosnap_2015-10-01_14-55-56.jpg

http://cl.ly/image/012t3q0v1d0w/Dashboard_2015-10-01_15-05-44.jpg

http://cl.ly/image/3P0n2S3K0a1o/Dashboard_2015-10-01_15-04-45.jpg

http://cl.ly/image/3a0i1s2W1R2b/Monosnap_2015-10-01_15-06-28.jpg

After

http://cl.ly/image/1K2u21302R18/Monosnap_2015-10-01_15-07-23.jpg

http://cl.ly/image/1B3N0q2M3V0g/Dashboard_2015-10-01_15-08-21.jpg

http://cl.ly/image/0B0d290e1o0v/Monosnap_2015-10-01_15-08-58.jpg

Last edited 3 years ago by adamsilverstein (previous) (diff)

#8 @adamsilverstein
3 years ago

  • Owner set to adamsilverstein
  • Status changed from new to assigned

#9 @adamsilverstein
3 years ago

  • Priority changed from lowest to low

This ticket was mentioned in Slack in #core by adamsilverstein. View the logs.


3 years ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


11 months ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


4 weeks ago

#13 @joyously
4 weeks ago

  • Keywords has-ux-feedback added; ux-feedback removed

We discussed this ticket in a triage session. The message "You have unsaved changes that will be lost!" sounds good. Let "browsers be browsers" and don't worry about what they are doing. There is no controlling them, and they change all the time.

#14 @adamsilverstein
4 weeks ago

  • Milestone changed from Future Release to 4.9.7

#15 @ocean90
11 days ago

  • Milestone changed from 4.9.7 to 4.9.8

4.9.7 has been released, moving to next milestone.

This ticket was mentioned in Slack in #core by jon_bossenger. View the logs.


8 days ago

#17 @pbiron
8 days ago

  • Keywords needs-refresh added

@audrasjb
8 days ago

refreshed the patch against trunk

#18 @audrasjb
8 days ago

  • Keywords i18n-change added; needs-refresh removed

In 14356.2.diff: refreshed the patch against current trunk.

This ticket was mentioned in Slack in #core by joshuawold. View the logs.


4 days ago

#20 @pbiron
4 days ago

  • Keywords needs-testing added

#21 @pbiron
3 days ago

Works on IE 8-11.

All the other browsers I have (FF 57, Chrome 67, Edge 42) all display their own strings.

Can we land this in 4.9.8?

This ticket was mentioned in Slack in #core by pbiron. View the logs.


14 hours ago

#23 @birgire
13 hours ago

I was trying to test the patch in Chrome, but always got the same dialog as shown in leave-site-dialog-in-chrome.jpg, without custom messages.

The reason seems to be that it's no longer available in Chrome 51+ to modify the message of that dialog:

TL;DR: A window's onbeforeunload property no longer supports a custom string.

A window’s onbeforeunload property may be set to a function that returns a string that is shown to the user in a dialog box to confirm that the user wants to navigate away. This was intended to prevent users from losing data during navigation. Unfortunately, it is often used to scam users.

Starting in Chrome 51, a custom string will no longer be shown to the user. Chrome will still show a dialog to prevent users from losing data, but it's contents will be set by the browser instead of the web page.

With this change, Chrome will be consistent with Safari 9.1 and later, as well as Firefox 4 and later.

https://developers.google.com/web/updates/2016/04/chrome-51-deprecations

If the same goes for Safari 9.1+ and Firefox 4+, as mentioned there, I wonder what browsers still support this?

@pbiron, your testing for Chrome, Safari and Firefox seems to verify this. I've not tested on IE though as you did.

Last edited 13 hours ago by birgire (previous) (diff)

#24 @pento
23 minutes ago

  • Keywords close 2nd-opinion added

Given that it's only IE and Edge that display this message at all, I'm inclined to leave it. No point in changing a string that most people aren't going to see.

Note: See TracTickets for help on using tickets.