Page MenuHomePhabricator

Preview popups: Replace SVG with clip-path
Closed, ResolvedPublic

Description

Note: this will only works once/if IE11 is not supported.

After T269297 and T269295 are fixed, the primary performance issue remaining with page previews is the creation of SVG on the fly in order to clip the image.

This can be replaced with a much simpler clip-path, however clip-path is not supported on IE11 and non-Blink Edge browsers (non modern supported in browser support matrix).

QA steps

Please QA on IE11 and modern Chrome + modern Firefox. https://en.wikipedia.beta.wmflabs.org/wiki/Sample_page

When JS is disabled a browser-based tooltip should display on hover.
When page previews is disabled a browser-based tooltip should display on hover.
the browser-based tooltip should not display on hover when page previews is enabled

QA Results - Beta

ACStatusDetails
1T269336#6730669
2T269336#6730669
3T269336#6730669

QA Results - Prod

ACStatusDetails
1T269336#6748470
2T269336#6748470
3T269336#6748470

Event Timeline

Could the existing SVG mechanic be kept as a fallback that only runs for IE11, with clip-path used for other browsers?

Could the existing SVG mechanic be kept as a fallback that only runs for IE11, with clip-path used for other browsers?

Possible? yes. I advise against it though. Part of the gain of switching to clip-path would be the fact that it removes a good chunk of the JS code... by keeping the IE fallback in the loaded extension some of the performance gains would be lost, plus the code would become more cumbersome and would make future improvements (slightly) more difficult.

If IE11 is still to be supported, I suggest freezing a version of the extension for use there. This would allow making the popup extension a lot smaller, readable and performant - by targeting modern ES in the webpack config, moving a lot of the computations to CSS custom properties instead of JS, making the less output a lot less verbose, and using modern CSS features like clip-path as mentioned in this issue.

The extension is already divided to implementation and loader, the loader bit can decide which implemented to load for modern browsers vs. IE.

Change 647002 had a related patch set uploaded (by Noam Rosenthal; owner: Noam Rosenthal):
[mediawiki/extensions/Popups@master] Use CSS clip-path instead of SVG when supported.

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

Jdlrobson triaged this task as Medium priority.Dec 8 2020, 10:35 PM
Jdlrobson added a subscriber: Jdlrobson.

I'm noticing some UI regressions in the storybook in http://localhost:6006/?path=/story/thumbnails--portrait-svg (run npm run storybook to replicate). I have no idea if these equate to errors in production, but fixing or understanding these is important to me for having confidence in these changes.

It seems a margin-top of 152px is being added to mwe-popups-extract which pushes down the preview that is not necessary. My guess is the following code might not be needed for these previews when clip path is used:

export function layoutPreview(
        preview, layout, classes, predefinedLandscapeImageHeight, pointerSpaceSize, windowHeight
) {
        const popup = preview.el,
                isTall = preview.isTall,
                hasThumbnail = preview.hasThumbnail,
                thumbnail = preview.thumbnail,
                flippedY = layout.flippedY;

        if (
                !flippedY && !isTall && hasThumbnail &&
                        thumbnail.height < predefinedLandscapeImageHeight
        ) {
                popup.find( '.mwe-popups-extract' ).css(
                        'margin-top',
                        thumbnail.height - pointerSpaceSize
                );
        }

Change 647002 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Use CSS clip-path instead of SVG when supported.

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

Change 654605 had a related patch set uploaded (by Noam Rosenthal; owner: Noam Rosenthal):
[mediawiki/extensions/Popups@master] Make CSS.supports more resilient

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

Change 654605 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Make CSS.supports more resilient

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: Windows 10
Browser: Chrome
Device: NA
Emulated Device: Browserstack PC

Test Artifact(s):

QA Steps

Please QA on IE11 and modern Chrome + modern Firefox. https://en.wikipedia.beta.wmflabs.org/wiki/Sample_page

✅ AC1: When JS is disabled a browser-based tooltip should display on hover.

IE 11ChromeFirefox
Screen Recording 2021-01-07 at 5.53.59 PM.mov.gif (966×1 px, 317 KB)
Screen Recording 2021-01-07 at 6.17.55 PM.mov.gif (966×1 px, 349 KB)
Screen Recording 2021-01-07 at 6.27.34 PM.mov.gif (952×1 px, 272 KB)

✅ AC2: When page previews are disabled a browser-based tooltip should display on hover.

IE 11ChromeFirefox
Screen Recording 2021-01-07 at 5.58.45 PM.mov.gif (966×1 px, 351 KB)
Screen Recording 2021-01-07 at 6.13.22 PM.mov.gif (966×1 px, 358 KB)
Screen Recording 2021-01-07 at 6.37.33 PM.mov.gif (952×1 px, 305 KB)

✅ AC3: The browser-based tooltip should not display on hover when page previews is enabled

IE 11ChromeFirefox
Screen Recording 2021-01-07 at 6.01.46 PM.mov.gif (966×1 px, 529 KB)
Screen Recording 2021-01-07 at 6.11.02 PM.mov.gif (966×1 px, 557 KB)
Screen Recording 2021-01-07 at 6.30.20 PM.mov.gif (952×1 px, 643 KB)

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: Windows 10
Browser: Chrome
Device: NA
Emulated Device: Browserstack PC

Test Artifact(s):

QA Steps

Please QA on IE11 and modern Chrome + modern Firefox. https://en.wikipedia.org/wiki/Dog

✅ AC1: When JS is disabled a browser-based tooltip should display on hover.

IE 11ChromeFirefox
Screen Recording 2021-01-14 at 9.15.31 AM.mov.gif (950×1 px, 1 MB)
Screen Recording 2021-01-14 at 9.36.02 AM.mov.gif (902×1 px, 308 KB)
Screen Recording 2021-01-14 at 9.44.48 AM.mov.gif (888×1 px, 315 KB)

✅ AC2: When page previews are disabled a browser-based tooltip should display on hover.

IE 11ChromeFirefox
Screen Recording 2021-01-14 at 9.27.33 AM.mov.gif (950×1 px, 316 KB)
Screen Recording 2021-01-14 at 9.37.52 AM.mov.gif (902×1 px, 1 MB)
Screen Recording 2021-01-14 at 9.46.32 AM.mov.gif (888×1 px, 634 KB)

✅ AC3: The browser-based tooltip should not display on hover when page previews is enabled

IE 11ChromeFirefox
Screen Recording 2021-01-14 at 9.29.13 AM.mov.gif (950×1 px, 441 KB)
Screen Recording 2021-01-14 at 9.41.11 AM.mov.gif (902×1 px, 508 KB)
Screen Recording 2021-01-14 at 9.49.00 AM.mov.gif (900×1 px, 684 KB)

T272169 got raised today which coinciding with the deployment here. I haven't been able to replicate it yet, but likely caused by this.

Does Windows have any documented rendering issues with clip path @Nomsterio ?

T272169 got raised today which coinciding with the deployment here. I haven't been able to replicate it yet, but likely caused by this.

Does Windows have any documented rendering issues with clip path @Nomsterio ?

I'm not aware of Windows specific issues. Doesn't seem like clip-path affects compositing in any way, which could have potentially affected this.
It's possibly related but I wasn't able to reproduce this issue on Browserstack and I don't use Windows :(
Will try to think of a way this could happen.