Page MenuHomePhabricator

Keep Wikipedia Preview popup attached to its target and add arrow
Closed, ResolvedPublic

Assigned To
Authored By
SGautam_WMF
Mar 22 2024, 6:13 AM
Referenced Files
F54913073: 2024-06-03_12-58-13.png
Jun 3 2024, 8:41 PM
F54911582: 2024-06-03_12-16-06.png
Jun 3 2024, 7:29 PM
F54911579: 2024-06-03_12-15-48.png
Jun 3 2024, 7:29 PM
F54911349: 2024-06-03_12-12-43 (1).gif
Jun 3 2024, 7:29 PM
F54911345: 2024-06-03_12-03-12 (1).gif
Jun 3 2024, 7:29 PM
F43011047: Screenshot 2024-03-22 at 11.37.40 AM.png
Mar 22 2024, 6:20 AM
F43010643: Screenshot 2024-03-22 at 11.37.40 AM.png
Mar 22 2024, 6:13 AM
F43010609: Screenshot 2024-03-22 at 11.38.08 AM.png
Mar 22 2024, 6:13 AM

Description

Problem
Screenshot 2024-03-22 at 11.37.53 AM.png (1×2 px, 713 KB)
Screenshot 2024-03-22 at 11.38.08 AM.png (1×2 px, 644 KB)
  1. The popup preview window does not consistently stick to the associated word ( e.g. in screenshot "Jupiter") when the user scrolls past the word in the reader view. This results in the popup drifting from its anchor point, potentially confusing users about which term the information relates to.
Screenshot 2024-03-22 at 11.37.40 AM.png (1×2 px, 566 KB)
Screenshot 2024-03-22 at 11.37.53 AM.png (1×2 px, 713 KB)
  1. In the editor's view, a tiny marker appears next to the linked word, indicating where the preview is anchored. This marker is not present in the reader view.
Improvements
  • Modify the popup's position handling to ensure it remains fixed relative to the anchor word regardless of the scrolling position.
  • Make the tiny marker available for both(reader, and editor) views for consistency.
Test Scenarios
  • Open a preview window by clicking on a link within the text and scroll the page to see if the preview window sticks to the linked word.
  • Toggle between the editor and reader views to check for the presence of the marker.
Acceptance Criteria:
  • The preview popup must stay aligned with the anchor word during vertical scrolling in the reader view.
  • The editor and readers view the anchor point marker.

QA Results - WP Dev

ACStatusDetails
1T360750#9856832
2T360750#9856832

Event Timeline

SBisson renamed this task from Improve Wikipedia Preview plugin stability and consistency on Desktop to Keep Wikipedia Preview popup attached to its target and add arrow.Mar 28 2024, 12:42 PM
SBisson triaged this task as Medium priority.
SBisson moved this task from Definition to Ready for Dev on the Inuka-Team (Kanban) board.

Note: We change the popup position to fixed because of this ticket https://phabricator.wikimedia.org/T306663

reinvestigate to see any possibilities here.

@hueitan I came across a minor issue for AC2 as seen in the screenshots below. Please review, thanks!

Status: ❌ AC2
Environment: WordPress Dev- 6.5.3; Wikipreview: commit 8ab6d6c8fa1b311216eee2eaec2dde017bf110ab, Thu May 30 02:19:13 2024 +0800; WordPress Wikipediapreview” commit 5193fb674a2a832554e16e4c28d59dbc4137c947, Tue May 21 12:46:20 2024 -0400
OS: macOS Sonoma 14.5
Browser: Chrome 125, Firefox 125, Safari 17.4.1
Skins. N/A
Device: MBA M2
Emulated Device:: n/a
Test Links:
http://dev-test.local/philadelphia-eagles-test/

✅AC1: popup drifting from its anchor point

PreviousCurrent
2024-06-03_12-03-12 (1).gif (1×2 px, 1 MB)
2024-06-03_12-12-43 (1).gif (1×3 px, 3 MB)

❌AC2: the marker is not present in the reader's view- The marker is in the reader's view but there's a fainted line in it compared to the edit viewing. This was at 100% zoom

❌Reader 100%✅Reader 125%✅Edit
2024-06-03_12-15-48.png (1×2 px, 324 KB)
2024-06-03_12-58-13.png (966×1 px, 288 KB)
2024-06-03_12-16-06.png (1×2 px, 269 KB)

❌AC2: the marker is not present in the reader's view- The marker is in the reader's view but there's a fainted line in it compared to the edit view

ReaderEdit
2024-06-03_12-15-48.png (1×2 px, 324 KB)
2024-06-03_12-16-06.png (1×2 px, 269 KB)

Tech notes:

  • edit mode (dark mode): .wikipediapreview-edit-preview-popover .wikipediapreview-edit-preview .wikipediapreview { border: 1px solid #ccc;
  • view mode: .wp-popup-arrow: clip-path: polygon(50% -2%, 50% 0%, 100% 50%, 0% 50%);