Sometimes I get page preview pop-ups with two pokeys. These screenshots are from the Main Page on English Wikipedia in safe mode (https://en.wikipedia.org/wiki/Main_Page?safemode=1).
{F25999013}
{F25999023}
= Developer notes
Captured and immortalised in this jsfiddle:
https://jsfiddle.net/raw3y1jf/3/
The question is - why?
The problem is that the image thumbnail width is less than the expected 200px
https://github.com/wikimedia/mediawiki-extensions-Popups/blob/master/src/ui/thumbnail.js#L167
and the clip-path mask is a fixed width, so although the pokey is there - the image needs to be 200px to be aligned with it!
When changing this make sure to use the results of T205989 to verify that the output is behaving as expected.
The issue can be replicated here on [[ http://localhost:6006/?selectedKind=Thumbnails&selectedStory=landscape%20-%20Thin%20thumbnail&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybooks%2Fstorybook-addon-knobs | landscape - Thin thumbnail ]]
Add a green background to the SVG to make it clear where the mask is:
{F27558813}
This reveals the pokey is nowhere to be seen!
{F27558845}
For an image that's 129px, to get the pokey to show correctly the image needs to be displaced (via x attribute) by 200-129px (71px)
{F27558984}
and then width added:
{F27559015}
== Acceptance criteria
[] The method setThumbnailClipPath needs to consider the displacement (200px - the actual width) and set a matrix:
e.g. for the example above where the image is 129px, rather than 200px...
```
matrix(1 0 0 1 -73 0)
```
setThumbnailClipPath will likely need to be passed a new parameter to deal with this, but is fully unit tested!
Tada:::
{F27560080}
== QA steps
(testing environment TBA)
- [ ] Verify that the pokey is aligned for LTR languages
- On English Wikipedia, on desktop, when hovering over a link, a page-preview should appear.
- When the preview is in landscape orientation, with a //narrow// thumbnail, there should only be 1 pokey visible. The thumbnail image should be visible on the pokey.
- Known previews with narrow thumbnails:
- [[ https://en.wikipedia.org/w/index.php?search=Eliud+Kipchoge&title=Special%3ASearch&profile=advanced&fulltext=1&advancedSearch-current=%7B%22namespaces%22%3A%5B0%5D%7D&ns0=1 | Eliud Kipchoge ]]
- [[ https://en.wikipedia.org/w/index.php?search=Theodore+of+Tarsus&title=Special%3ASearch&profile=advanced&fulltext=1&advancedSearch-current=%7B%22namespaces%22%3A%5B0%5D%7D&ns0=1 | Theodore of Tarsus ]]
- [[ https://en.wikipedia.org/w/index.php?search=Gregory+of+tours&title=Special%3ASearch&profile=advanced&fulltext=1&advancedSearch-current=%7B%22namespaces%22%3A%5B0%5D%7D&ns0=1 | Gregory of tours ]]
- [[ https://en.wikipedia.org/w/index.php?search=The+Barker&title=Special%3ASearch&profile=advanced&fulltext=1&advancedSearch-current=%7B%22namespaces%22%3A%5B0%5D%7D&ns0=1 | The Barker ]]
- [ ] Verify that the pokey is aligned for RTL languages
- same as above, but with RTL languages.
- known RTL previews with thin thumbnails:
- שלד https://he.wikipedia.org/wiki/פרוקונסול_אפריקני
- גרגוריוס מטור https://he.wikipedia.org/wiki/פרנקים
QA Note: To make the pokey appear on the right side of the preview on the Special:Search pages linked above, it helps to make the browser window very narrow.