Open view links in the current browser tab

[MoritzLost]

Description

It's currently impossible to open the 'View' link on entry pages in the current browser tab. Currently, the 'View' link is a <button> element with a JS click handler which opens the entry view in a new window/tab using window.open(). This causes a couple of issues:

• UX: It's impossible to open the link in the current browser tab. Depending on your preferred workflow, this may or may not be annoying. Personally, I like to edit something, view the entry to see my changes, and then return to editing through a custom context menu we've built in the frontend. With the current behaviour, this leaves me with two open tabs. I've also heard complaints from clients/editors that after working with Craft for a couple of minutes, they've inadvertently created dozens of tabs. So at least this behaviour is not for everyone.
• UX: With a normal link, you can choose if you want to open a link in a new tab or not. The current behaviour takes away control by forcing the new tab.
• Normal link interactions don't work as expected. In particular, the right click context menu to copy the link or open it in a new tab doesn't exist for buttons. You also can't click the middle mouse button to open the link in a new tab (mentioned in Make "share" button into link again #4891)
• Possible accessibility problems, since there's no indication the link will open in a new tab (mentioned in Dashboard accessibility #7301)

Possible solutions

Some of these issues can be worked around with additional code. The middle mouse button can be handled in JavaScript to open the link in a new tab. The accessibility can be improved by adding a visually hidden message to indicate the button will open a new tab. But I'd argue the best fix would be to change the <button> to a regular <a> tag, which would allow the native behaviour and give the user a choice. In #4891 it was mentioned that this would be impossible because the URL is constructed dynamically, but maybe this should be reconsidered. Maybe the URL could be dynamically created as soon as the page is loaded, and updated every time it needs to change? Or a click handler could be used to construct the URL right as the link is clicked (would need to handle middle-mouse clicks and right-click as well).

Another option would be a general config setting or user preference to control whether view links open in a new tab or the current tab. This option could be handled in JavaScript. Though this would only solve the UX problem partially, and you still couldn't choose to open links in the current or a new tab every time.

Additional info

• Craft version: 3.7.24
• PHP version: 8.0

[brandonkelly]

This is a tricky one… the preview links can’t really be pre-generated (or generated on click) because they are tokenized, and the token needs to be saved on the back-end in order to work, and it’s probably not a good idea to pre-generate a new preview token every time an Edit Entry page is loaded.

However I just came up with a semi-clever solution: we are now pre-generating the random 32-character token string during page load, so now the JS knows what the final tokenized URL will be once the token has been “activated” (saved in the back-end). Thanks to that, the View button can now be an <a> tag that initially links to the preview/create-token controller, passing the pre-generated token and final redirect URL, and which updates the href to the final redirect URL after it is first clicked.

Craft 3.7.25 is out now with those changes!

[MoritzLost]

@brandonkelly Thanks, that's great! Sounds like a good solution.

The createPreviewLink method still hardcodes target="_blank" though, so this doesn't quite address the UX and accesibility issues mentioned above yet. Would it be possible to remove that attribute or make it optional (either with a general config or a user preference)?

[brandonkelly]

You can remove target="_blank" using the CP JS plugin.

[michaelroper]

Hey @brandonkelly - is a current CP session required to access that preview/create-token controller? I've been meaning to raise the same issue about the View button for ages (eg can it be a <a> tag instead), but my use case was slightly different - I want to be able to right-click and copy the link to share draft page previews with non-CP users, and this change seems to have broken that..

[brandonkelly]

@michaelroper Initially yes, but once you click on it the first time, the token will be activated and you can share the URL it redirects you to.