Page MenuHomePhabricator

[spike] Introduce a mobile app preview of the rendered article for editors
Closed, ResolvedPublic

Description

Many of the issues related to dark theme rendering is introduced when editors use templates. An assumption about that is that we could reduce the dark theme rendering issues if editors had a way to easily preview their changes as served by mobileapps using dark theme.

Event Timeline

I suggest to implement mobile preview button for the Edit section in desktop wiki (see the screenshot)

mobile-preview-btn.png (672×1 px, 161 KB)

This button should pass request into mobilehtml route and retrieve the article with transformed styles and ability to change themes.
As I mentioned in T290570, I created an example (https://vadimkovalenkosnf.github.io/wiki-colour-issues-filter/) which can accept articles from desktop wiki (for now) and pass it into iframe.

Change 728561 had a related patch set uploaded (by Vadim Kovalenko; author: L10n-bot):

[mediawiki/core@master] [spike] Introduce a mobile app preview of the rendered article for editors

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

I created a document with detailed presentation of how this patch works, please check.


cc: @MSantos , @Jgiannelos , @ssastry

This is wonderful! Thank you @vadim-kovalenko! I'm curious - rather than requiring a tap to get to the output, could we just insert the black mode output on the preview screen? We essentially have a light mode check with the existing preview, and most of the problems come with the black or dark theme. It would be wonderful to show it by default, without requiring any action (a click) from the user.

Hi @MattCleinman ! Thank you for your feedback. I've managed to insert mobile html preview into edit page along with theme selection ( with dark theme by default ) in the recent patch. I left the previous solution in the same patch set in case of convenience. You'll still be able to check mobile preview on the separate page.

mobile-preview-iframe.png (1×3 px, 650 KB)

Are any of the open tickets planning to address the more common dark issues that appear quite often more directly OR is leaving it to the editors to notice the route you guys are sticking to the most right now?

Still seeing tons of new articles that have so many issues and I just feel having an automatic text color selection of black or white based on background elements is much more tangible then leaving it to editors who are unlikely to notice. It’s not fun having to switch themes constantly

Still feels like ‘passing the buck’ of responsibility rather than fixing the underlying issues

@Ijm8710 thanks for raising your concern.

To clarify your questions:

Are any of the open tickets planning to address the more common dark issues that appear quite often more directly OR is leaving it to the editors to notice the route you guys are sticking to the most right now?

@vadim-kovalenko has worked on multiple Spikes in order to understand what's most feasible to do right now as part of T286643: [EPIC] Systematic solution on preventing rendering issues on user styles between dark/light themes. We're kick-starting the discussion with other teams by adding something that will help not only Dark Theme issues but other template issues that happen in mobileapps.

Still seeing tons of new articles that have so many issues and I just feel having an automatic text color selection of black or white based on background elements is much more tangible then leaving it to editors who are unlikely to notice. It’s not fun having to switch themes constantly

It's important to note that this is not as tangible as you might think. The mobileapps service (a.k.a. Page Content Service or PCS) is a server-side renderer capability and we've done some investigation around that at T290570#7374688.

Still feels like ‘passing the buck’ of responsibility rather than fixing the underlying issues

To also answer your comment at T290571#7501180. We still want to find a solution that doesn't rely on editors to make the Apps look and feel great for Dark Themes. We still need to take into account that it's not sustainable fixing edge cases created by template styles, our first move is to have a way for editors to see how their changes affect the Apps. but the work won't be considered done while we move forward with the Page Previews. We are still analyzing our finds and looking for next steps on our research to systematic solve this problem.

Considering this is a spike, the work is done. We're taking this into account to move forward with the MediaWiki Mobile Previews feature request.