Refactor preview front-end into reusable API
Closed, ResolvedPublic13 Estimated Story Points
Actions

Assigned To

Authored By

	Samwilson
	Oct 26 2021, 2:28 AM

Description

The preview-fetching and -displaying logic in mediawiki.action.edit.preview.js should be moved into a new reusable JS API, so that it can also be used by the new realtime preview function that's being built into WikiEditor (2010) (T289794).

We're proposing to expose the API in a similar way to mw.plugin.page.watch.ajax, e.g. mw.plugin.page.preview.

The new API should be able to handle fetching the preview and inserting it in all required places in the HTML page, and also optionally only return the info in case callers want to do specific things.

var preview = require( 'mediawiki.page.preview' );
preview.doLivePreview(); // Will do much the same as the existing function with this name.

The live-diff won't be changed by any of this.

Details

	Subject	Repo	Branch	Lines +/-
	Refactor preview frontend logic into JavaScript API	mediawiki/core	master	+494 -291

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		Samwilson	T294599 Persist Preview functionality based on last interaction
Resolved	Feature	Samwilson	T289794 Add basic functionality for real-time previews
Resolved		MusikAnimal	T294319 Refactor preview front-end into reusable API

Event Timeline

Samwilson created this task.Oct 26 2021, 2:28 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 26 2021, 2:28 AM

@Krinkle we thought that you might have an opinion on the naming and structure of this new API. Does the above sound okay to you? Or do you know who else we should ping?

DannyS712 subscribed.Oct 27 2021, 3:28 AM

MusikAnimal moved this task from Backlog to Live preview on the MediaWiki-Page-editing board.Oct 27 2021, 5:00 AM

MusikAnimal mentioned this in T289794: Add basic functionality for real-time previews.Oct 27 2021, 5:17 AM

MusikAnimal added a subtask: T289794: Add basic functionality for real-time previews.Oct 27 2021, 5:20 AM

MusikAnimal removed a subtask: T289794: Add basic functionality for real-time previews.Oct 27 2021, 5:29 AM

MusikAnimal added a parent task: T289794: Add basic functionality for real-time previews.

MusikAnimal updated the task description. (Show Details)

Daimona subscribed.Oct 27 2021, 11:49 AM

ldelench_wmf set the point value for this task to 5.Oct 27 2021, 11:54 AM

ldelench_wmf moved this task from New & TBD Tickets to Up Next (June 3-21) on the Community-Tech board.

Tgr mentioned this in T19467: Edit conflict notification on Preview/Show Changes.Oct 27 2021, 5:00 PM

• NRodriguez moved this task from Up Next (June 3-21) to CommTech-Sprint-14 on the Community-Tech board.Nov 18 2021, 4:15 PM

• NRodriguez edited projects, added Community-Tech (CommTech-Sprint-14); removed Community-Tech.

• NRodriguez moved this task from Backlog to 🌟Top Priority on the Realtime Preview board.Nov 22 2021, 4:11 PM

MusikAnimal claimed this task.Nov 24 2021, 3:43 PM

MusikAnimal moved this task from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Sprint-14) board.

ldelench_wmf edited projects, added Community-Tech (CommTech-Sprint-15); removed Community-Tech (CommTech-Sprint-14).Dec 3 2021, 7:48 PM

ldelench_wmf moved this task from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Sprint-15) board.Dec 3 2021, 7:50 PM

• NRodriguez changed the point value for this task from 5 to 8.Dec 6 2021, 4:01 PM

Change 745962 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/core@master] [WIP] Refactor preview frontend logic into JavaScript API

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

gerritbot added a project: Patch-For-Review.Dec 10 2021, 10:53 PM

ldelench_wmf edited projects, added Community-Tech (CommTech-Sprint-16); removed Community-Tech (CommTech-Sprint-15).Jan 4 2022, 5:08 PM

ldelench_wmf moved this task from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Sprint-16) board.Jan 4 2022, 5:10 PM

dmaza claimed this task.Jan 11 2022, 12:23 PM

dmaza added a subscriber: MusikAnimal.

ldelench_wmf edited projects, added Community-Tech (CommTech-Sprint-17); removed Community-Tech (CommTech-Sprint-16).Jan 18 2022, 8:13 PM

ldelench_wmf moved this task from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Sprint-17) board.Jan 18 2022, 8:21 PM

ldelench_wmf edited projects, added Community-Tech (CommTech-Sprint-18); removed Community-Tech (CommTech-Sprint-17).Jan 31 2022, 2:33 PM

ldelench_wmf moved this task from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Sprint-18) board.Jan 31 2022, 2:36 PM

dmaza reassigned this task from dmaza to MusikAnimal.Feb 8 2022, 5:03 PM

dmaza subscribed.

• JMcLeod_WMF edited projects, added Community-Tech (CommTech-Sprint-19); removed Community-Tech (CommTech-Sprint-18).Feb 15 2022, 10:22 PM

• JMcLeod_WMF moved this task from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Sprint-19) board.Feb 15 2022, 10:30 PM

• JMcLeod_WMF removed a project: Community-Tech (CommTech-Sprint-19).Mar 1 2022, 6:43 PM

• JMcLeod_WMF added a project: Community-Tech (CommTech-Sprint-20).Mar 1 2022, 6:53 PM

• JMcLeod_WMF moved this task from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Sprint-20) board.Mar 1 2022, 7:01 PM

MusikAnimal moved this task from In Development 💻 to Review/Feedback 💬 on the Community-Tech (CommTech-Sprint-20) board.Mar 7 2022, 6:10 PM

QA notes: nothing should have changed in the behaviour of Live Preview (including live diff view). The operation of the newly-exposed preview API is being tested in T293347 so that doesn't really need to be tested independently here I don't think (any more than it already is by virtue of being used by Live Preview). Non-live Previewing shouldn't be affected at all.

Change 745962 merged by jenkins-bot:

[mediawiki/core@master] Refactor preview frontend logic into JavaScript API

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

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.26; 2022-03-14).Mar 10 2022, 1:00 AM

Maintenance_bot removed a project: Patch-For-Review.Mar 10 2022, 1:10 AM

• NRodriguez changed the point value for this task from 8 to 13.Mar 10 2022, 6:42 PM

QA notes:

We're basically just testing that nothing broke or adversely changed in the existing Live Preview.
Make sure to turn on Live Preview by using the "Preview pages without reloading the page" preference under the Editing tab.
Once enabled, Live Preview makes the existing "Show preview" and "Show changes" use AJAX instead of a full page refresh.
You can test this patch on Beta, and compare with Test Wikipedia which is still using the old code (until March 22, that is)
The areas of focus are as follows:
- Parser output that effects things outside the preview area, such as:
  - Page status indicators
  - Display title
  - Categories
  - The "Template used in this preview" list
  - The edit summary
- Error handling (specifically how they are shown); one way to force an error is to turn off your internet connection just after you request the preview.
- Graying out elements while the preview is being generated. Should you be interested, a list of the selectors for elements that should be blurred are can be found here.
- Some things may be easier to test by using your browser's developer tools to simulate a slower connection. I.e. for Chromium: https://www.browserstack.com/guide/how-to-perform-network-throttling-in-chrome
- Test the "Show changes" as well as the "Show preview" button.
- Visually nothing should have changed.

If you have any questions let me know! In my opinion you shouldn't need to spend considerable time on this. These "make sure nothing broke" QA tasks are very open-ended and understandably you won't feasibly be able to test every possible thing that could have broken. I'll be helping test, too :)

I may do more testing of this, but wanted to share what I had done so far in case someone else needs to pick this up.

In T294319#7768261, @MusikAnimal wrote:

QA notes:

We're basically just testing that nothing broke or adversely changed in the existing Live Preview.

Make sure to turn on Live Preview by using the "Preview pages without reloading the page" preference under the Editing tab.

Once enabled, Live Preview makes the existing "Show preview" and "Show changes" use AJAX instead of a full page refresh.

You can test this patch on Beta, and compare with Test Wikipedia which is still using the old code (until March 22, that is)

The areas of focus are as follows:

Parser output that effects things outside the preview area, such as:

Page status indicators

Display title

Categories

The "Template used in this preview" list

The edit summary

Error handling (specifically how they are shown); one way to force an error is to turn off your internet connection just after you request the preview.

Graying out elements while the preview is being generated. Should you be interested, a list of the selectors for elements that should be blurred are can be found here.

Some things may be easier to test by using your browser's developer tools to simulate a slower connection. I.e. for Chromium: https://www.browserstack.com/guide/how-to-perform-network-throttling-in-chrome

Visually nothing should have changed.

I did the bare minimum testing of all the above on https://en.wikipedia.beta.wmflabs.org comparing to https://test.wikipedia.org.

I did not notice any problems. The two environments appeared to behave the same. I did not notice any errors in the browser console (when I had it open).

When I eventually published my changes on beta, the page looked the same as it did in Live Preview (plus or minus some differences which were also present on testwiki).

Test the "Show changes" as well as the "Show preview" button.

I only briefly tested "Show changes".

Test pages:

I notice that maps don't appear to work with Live Preview on beta. They do with regular preview on beta and with Live Preview on production.

But, the error(s) appear to be of the form:

Content Security Policy: The page’s settings blocked the loading of a resource at https://kartotherian.wmflabs.org/img/osm-tegola,2,30,0,400x300.png?lang=en (“default-src”).

So I don't know if that could be caused by our change or whether beta is just misconfigured.

For example:

@MusikAnimal?

I did some more testing today focusing on "Show changes" and whether there are any visual differences. I probably don't think I will do anymore as I have covered everything in T294319#7768261.

If @MusikAnimal does not think the maps problem in T294319#7777258 was caused by us, then I will move this along.

Show changes:

I imported some complicated pages from enwiki into beta and testwiki, made some random changes to them and compared their diffs side-by-side (I also compared the HTML of their respective diffs). I did not see any discrepancies between beta and testwiki.

Test pages:

Visual differences:

Took a few complicated pages on beta and compared how they look in Live Preview vs. how they look when reading the page normally.

Other than the issue with maps mentioned above (T294319#7777258), I didn't see any differences.

Test pages:

Test environments:

beta: https://en.wikipedia.beta.wmflabs.org MediaWiki 1.39.0-alpha (c9be404) 07:12, 15 March 2022.
test: https://test.wikipedia.org MediaWiki 1.38.0-wmf.25 (2b818a6) 01:57, 8 March 2022.

In T294319#7777258, @dom_walden wrote:
I notice that maps don't appear to work with Live Preview on beta. They do with regular preview on beta and with Live Preview on production.

But, the error(s) appear to be of the form:
Content Security Policy: The page’s settings blocked the loading of a resource at https://kartotherian.wmflabs.org/img/osm-tegola,2,30,0,400x300.png?lang=en (“default-src”).
So I don't know if that could be caused by our change or whether beta is just misconfigured.

It appears to be the latter. I just tested at https://test.wikipedia.org/wiki/Mapframe which is running on wmf.26 (the new code) and the maps loaded correctly in Live Preview.

In T294319#7778778, @MusikAnimal wrote:

In T294319#7777258, @dom_walden wrote:

So I don't know if that could be caused by our change or whether beta is just misconfigured.

It appears to be the latter. I just tested at https://test.wikipedia.org/wiki/Mapframe which is running on wmf.26 (the new code) and the maps loaded correctly in Live Preview.