Page MenuHomePhabricator

Regression: Page Previews and Reference Previews tip triangle is in the wrong location in RTL wikis
Closed, ResolvedPublicBUG REPORT

Description

In the Hebrew Wikipedia, the little triangle tip of Page Previews and Reference Previews popups is shown in the wrong place.

In this Reference Previews screenshot, the tip is supposed to be next to the [1] footnote:

צילום מסך 2021-03-01 ב-17.52.27.png (574×846 px, 135 KB)

In this Page Previews screenshot, the tip is supposed to be next to the "IBM" link:

צילום מסך 2021-03-01 ב-17.53.39.png (932×709 px, 642 KB)

The two features are distinct, but the bug is essentially the same, so reporting them together.

QA steps

Visit https://he.wikipedia.beta.wmflabs.org/wiki/%D7%92'%D7%99%D7%99%D7%9F_%D7%A1%D7%99%D7%9E%D7%95%D7%A8?uselang=he and hover over the link to confirm

QA Results - Beta

ACStatusDetails
1T276112#6893515

QA Results - Prod

ACStatusDetails
1T276112#6912480

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
thiemowmde changed the subtype of this task from "Task" to "Bug Report".Mar 2 2021, 9:16 AM
thiemowmde added a subscriber: thiemowmde.
ovasileva renamed this task from Page Previews and Reference Previews tip triangle is in the wrong location in RTL wikis to Regression: Page Previews and Reference Previews tip triangle is in the wrong location in RTL wikis.Mar 2 2021, 10:37 AM
ovasileva triaged this task as Medium priority.
ovasileva raised the priority of this task from Medium to High.
ovasileva moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.
Jdlrobson added subscribers: Nomsterio, Gilles, Jdlrobson.

Yes. Confirmed that via git bisect.

7b0937c5a865f282f7e5100613b1113a5990ef2e is the first bad commit
commit 7b0937c5a865f282f7e5100613b1113a5990ef2e
Author: Noam Rosenthal <noam.j.rosenthal@gmail.com>
Date:   Tue Dec 8 17:13:13 2020 +0200

    Use CSS clip-path instead of SVG when supported.
    
    This reduces a lot of churn in creating the SVG
    element and related helpers.
    
    When IE11 is dropped, the SVG code-path can also be dropped.
    
    Bug: T269336
    Change-Id: I7f91192dedc2a78f1c7c84179cff1687593177c0

 resources/dist/index.js               | Bin 43126 -> 43329 bytes
 resources/dist/index.js.map.json      | Bin 207213 -> 207998 bytes
 src/ui/renderer.js                    |  14 +++--
 src/ui/templates/popup/popup.less     | 106 ++++++++++++++++++++++++++++++++--
 src/ui/thumbnail.js                   |  34 +++++++----
 tests/node-qunit/ui/thumbnail.test.js |  15 ++++-
 webpack.config.js                     |   4 +-
 7 files changed, 147 insertions(+), 26 deletions(-)

Do we revert or try to revise? I'm guessing the CSS in /src/ui/templates/popup/popup.less needs revising for RTL. cc @Nomsterio @Gilles

Yes. Confirmed that via git bisect.

7b0937c5a865f282f7e5100613b1113a5990ef2e is the first bad commit
commit 7b0937c5a865f282f7e5100613b1113a5990ef2e
Author: Noam Rosenthal <noam.j.rosenthal@gmail.com>
Date:   Tue Dec 8 17:13:13 2020 +0200

    Use CSS clip-path instead of SVG when supported.
    
    This reduces a lot of churn in creating the SVG
    element and related helpers.
    
    When IE11 is dropped, the SVG code-path can also be dropped.
    
    Bug: T269336
    Change-Id: I7f91192dedc2a78f1c7c84179cff1687593177c0

 resources/dist/index.js               | Bin 43126 -> 43329 bytes
 resources/dist/index.js.map.json      | Bin 207213 -> 207998 bytes
 src/ui/renderer.js                    |  14 +++--
 src/ui/templates/popup/popup.less     | 106 ++++++++++++++++++++++++++++++++--
 src/ui/thumbnail.js                   |  34 +++++++----
 tests/node-qunit/ui/thumbnail.test.js |  15 ++++-
 webpack.config.js                     |   4 +-
 7 files changed, 147 insertions(+), 26 deletions(-)

Do we revert or try to revise? I'm guessing the CSS in /src/ui/templates/popup/popup.less needs revising for RTL. cc @Nomsterio @Gilles

Should be quite easy to revise. Let me check if I can do that quickly.

Change 668035 had a related patch set uploaded (by Noam Rosenthal; owner: Noam Rosenthal):
[mediawiki/extensions/Popups@master] Take direction into account for clip-path cursor

https://gerrit.wikimedia.org/r/668035

Change 668035 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Take direction into account for clip-path cursor

https://gerrit.wikimedia.org/r/668035

Edtadros added a subscriber: Edtadros.

@phuedx, is there a particular page you want this tested on? I found a couple of examples (on hewiki beta because I assume this is an RTL-specific issue) of the page preview for links, but couldn't find one for footnotes that gave me a popup. The tip triangle is still not appearing in the right location. Here is an example:

Screen Shot 2021-03-03 at 7.04.12 AM.png (557×862 px, 282 KB)

FWIW I don't think it's necessary to revert the patch that I merged today. @Jdlrobson left some helpful comments on the patch that should get us to the solution 🙂

The fix looks like it's working to me, but I was seeing odd behaviour.

It was fixed on:
https://he.wikipedia.beta.wmflabs.org/wiki/%D7%92'%D7%99%D7%99%D7%9F_%D7%A1%D7%99%D7%9E%D7%95%D7%A8?debug=true&safemode=1

but not:
https://he.wikipedia.beta.wmflabs.org/wiki/%D7%92'%D7%99%D7%99%D7%9F_%D7%A1%D7%99%D7%9E%D7%95%D7%A8?safemode=1

After clearing localStorage it appears to be working correctly.

@Edtadros can you do some exploratory testing of page previews on https://he.wikipedia.beta.wmflabs.org ?

@Jdlrobson I will bug you about storybook. I will poke around hewiki beta. What were you seeing with the second link?

@phuedx ...something I hadn't paid attention to before. Should the triangle be oriented at the center of the link, or is the position near the pointer? I'm seeing the latter.

@phuedx ...something I hadn't paid attention to before. Should the triangle be oriented at the center of the link, or is the position near the pointer? I'm seeing the latter.

The pokey should point roughly where the user's mouse first glanced over the link. What you're seeing is correct. Thanks for clarifying.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Visit https://he.wikipedia.beta.wmflabs.org/wiki/%D7%92'%D7%99%D7%99%D7%9F_%D7%A1%D7%99%D7%9E%D7%95%D7%A8?uselang=he and hover over the link to confirm

Screen Shot 2021-03-08 at 6.27.06 AM.png (1×967 px, 474 KB)

Test Result - Prod

Status: ✅ PASS
Environment: hewiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Visit https://he.wikipedia.org/wiki/%D7%9E%D7%99%D7%9C%D7%99%D7%A1%D7%A0%D7%98_%D7%A4%D7%95%D7%A1%D7%98 and hover over a link to confirm

Screen Shot 2021-03-14 at 8.57.35 PM.png (867×819 px, 296 KB)

I confirm this was fixed in production. Thank you!