mobile-html: allow clients to combine content customization tasks into a single call and include a callback (set theme, dim images, collapse tables, margins,
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	• NHarateh_WMF
	Mar 11 2019, 4:56 PM

Description

Context
When native clients load articles via mobile-html, the appearance of the page needs to be customized on initial load

Proposed solution
Provide a function for initial article setup with a callback:
setup(theme, dimImages, textSizeAdjustmentPercentage, margins, areTablesCollapsed, callback)

The callback is included to avoid a flash of un-styled content (for example if the user's theme is set to dark, the initial load shouldn't show the default theme) - clients should hide the web view until the callback is called.

Notes
This does not replace the individual endpoints for adjusting any of these properties individually, but rather combines tasks usually completed on initial load with a callback.

Related Objects
Search...

Status	Assigned	Task
Resolved	None	T169242 Develop Page Content Service for Reading Clients
Resolved	None	T177425 Develop General Layer of PCS
Resolved	None	T177433 Develop HTML Content API to be used with companion structured JSON APIs
Resolved	• Jhernandez	T222369 mobile-html: JavaScript abstraction layer
Resolved	• bearND	T218049 mobile-html: allow clients to combine content customization tasks into a single call and include a callback (set theme, dim images, collapse tables, margins,

Event Timeline

• NHarateh_WMF created this task.Mar 11 2019, 4:56 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 11 2019, 4:56 PM

• NHarateh_WMF updated the task description. (Show Details)Mar 11 2019, 5:03 PM

• NHarateh_WMF mentioned this in T206856: mobile-html: iOS prototype.Mar 13 2019, 12:32 PM

@bearND to move under the appropriate epic and prioritise. This could be blocked on figuring out how the app injects settings to the web view.

JoeWalsh mentioned this in T201382: mobile-html: adjust page margins/padding.Mar 15 2019, 12:31 PM

• bearND added a parent task: T177433: Develop HTML Content API to be used with companion structured JSON APIs.Mar 15 2019, 7:47 PM

JoeWalsh mentioned this in T218804: mobile-html reference handling.Mar 20 2019, 4:58 PM

• bearND triaged this task as Medium priority.Mar 27 2019, 5:15 AM

• bearND moved this task from Needs investigation to Kanban on the Product-Infrastructure-Team-Backlog-Deprecated board.

• bearND edited projects, added Product-Infrastructure-Team-Backlog-Deprecated (Kanban); removed Product-Infrastructure-Team-Backlog-Deprecated.

@NHarateh_WMF or @JoeWalsh are the callbacks really needed there? We already have most of this implemented in the page library. If they are needed then I'd probably just add an optional callback parameter to these two functions. BTW, I've added a bit of documentation about this here: https://www.mediawiki.org/wiki/Page_Content_Service#/data/javascript/mobile/pagelib

@bearND the callback for wmf.setTheme was necessary to avoid the theme change flash problem. We were hiding the web view until we heard back from js that the theme was applied. I checked with the latest changes and it looks like it works without a callback. Did you have a task that fixed the flash? If you give me the pre-change SHA, I can go back and 100% confirm whether the callback isn't necessary.

@NHarateh_WMF Are you testing this in the lite app? I don't recall a task that fixed the flash.

@bearND on initial load, there's a flash of un-styled content unless the clients hide the web view, make the theme change, call requestAnimationFrame, then unhide the web view when that requestAnimationFrame callback is called. The thought was to simplify that and abstract it so both clients didn't need to call requestAnimationFrame explicitly. The other added benefit is that if anything else changes about theming that would require it to be asynchronous, it could be changed upstream and the clients wouldn't need to be modified. If you think that's unlikely, and there's going to be other calls happening straight through page library, it might be OK for both clients to handle this without an abstraction layer. Taking this one step further, it's worth discussing whether or not the page library should be entirely abstracted away from the clients or if that's the interface they should be dependent on. CC @NHarateh_WMF @Sharvaniharan

Without requestAnimationFrame

standard.mov3 MBDownload

With requestAnimationFrame

requestAnimationFrame.mov3 MBDownload

@JoeWalsh Thanks for the videos. They clearly show the flash of un-styled content.
Would it be sufficient if we just added the callback as an optional parameter to [[ https://www.mediawiki.org/wiki/Page_Content_Service#Set_theme | pagelib.ThemeTransform.setTheme ]] and pagelib.DimImagesTransform.dim?
What kind of abstraction did you have in mind? Would that live inside the page lib or outside?

Sorry about the content flash confusion, my cache wasn't clean so it didn't flash when I tested it. I thought there was a task that captured the abstraction described by @JoeWalsh in the 2nd paragraph and that it was already implemented. That led me to believe that the completion on the client side was redundant.

JoeWalsh added a parent task: T222369: mobile-html: JavaScript abstraction layer.May 2 2019, 2:51 PM

JoeWalsh removed a parent task: T177433: Develop HTML Content API to be used with companion structured JSON APIs.

• bearND claimed this task.May 6 2019, 5:04 PM

• bearND moved this task from To Do to Doing on the Product-Infrastructure-Team-Backlog-Deprecated (Kanban) board.

JoeWalsh renamed this task from mobile-html: allow clients to update theme & dim images to mobile-html: allow clients to combine content customization tasks into a single call and include a callback (set theme, dim images, collapse tables, margins, .May 7 2019, 2:04 PM

JoeWalsh updated the task description. (Show Details)

JoeWalsh mentioned this in T222369: mobile-html: JavaScript abstraction layer.

In CollapseTable.setupEventHandling() is the footerDivClickCallback used by iOS or Android? Just wondering if that should be exposed.

@bearND on iOS, we're using it to adjust scroll offset - https://github.com/wikimedia/wikipedia-ios/blob/8fe4da9a9a1d0fb78457dcaf1d12eac2baf4fb0d/www/js/sections.js#L170

Thank you @NHarateh_WMF. That sounds useful enough to expose it. The issue is that we already have a callback for the setup functionality. I guess I'll make a parameter object which can hold multiple callback functions.