XWIKI-24144: Clarify original and target pages during replace dialog

[Sereza7]

Jira URL

https://jira.xwiki.org/browse/XWIKI-24144

Changes

Description

• Edited the DOM slightly to improvew semantics and reduce confusion
• Added hints

Clarifications

• There's a lot more semantic improvements to do in this template, but I limited the change to what was needed to update for the sake of this ticket.
• I moved the icon in the link. It makes the icon clickable and its color changes accordingly with font iconthemes. This is not needed for this ticket but a small improvement
• I decided to keep the old translations to keep things consistent, but to answer the request made in the ticket to increase understandability I added hints and moved the translation to a label instead of being the content of the anchor itself. The anchor content describes the destination and is enough to understand where it goes without any context, which is better than before :) There's a bit of repeated information (technically the titles of both pages are the same), but IMO it just helps understandability.

Screenshots & Video

Here is what

Executed Tests

Manual tests on my local instance.
Built the changes with mvn clean install -f xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates -Pquality
and passed successfully mvn clean install -f xwiki-platform-core/xwiki-platform-refactoring/ -Pquality,integration-tests,docker.

Expected merging strategy

• Prefers squash: Yes
• Backport on branches:
  • 17.10.X , very low scope bugfix with pretty standard changes.

[manuelleduc]

If not too much work, I'd be curious to see the difference between

• this
• this but with a non-breakable space between the icon of the text
• the icon outside the link

I'm also interested in what it looks like on hover. I think someone mentioned a possibly odd look with the underline spanning below the icon.

The rest of the PR looks ok, thanks for your work :)

[michitux]

Printing $document.plainTitle without XML-escaping introduces an XSS vulnerability. This needs to be fixed (escaped).

[Sereza7]

@manuelleduc

If not too much work, I'd be curious to see the difference between [...]

Here are screenshots of the three options in the same order, with the mouse hovering on one of the two links:

I decided to add the nbsp in 6ff4ece because I believe it's what we do in most places and it looks a bit better. This looks a bit odd when hovered but IMO it's alright.
The only strong opinion I have on this is that I think it makes sense to make the icon clickable so we should include it in the link.

I think someone mentioned a possibly odd look with the underline spanning below the icon.

Just to be sure, I checked with Silk and IMO things look okay here too:

I think this was a comment made about the underlining under "nothing" between the icon and the text. I remember a comment was done when we changed it in the notification dropdown:

This is an argument against adding a NBSP here, but in my opinion it's not strong enough to enforce the choice.

It's a small layout detail, but it could be something to include in the UX guidelines to share with Cristal @tkrieck has proposed on the forum. Something like:
When using an icon with its explaining text, separate them with a non breaking space. (vocab is probably too implementation centered)
or
When using an icon with its explaining text, do not separate them with any character.

---

@michitux

Printing $document.plainTitle without XML-escaping introduces an XSS vulnerability. This needs to be fixed (escaped).

Good find! Sorry for missing this one. I fixed it in 6ff4ece 👍