Page MenuHomePhabricator

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


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.

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.

Event Timeline

@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.

@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:

@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

With requestAnimationFrame

@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 [[ | 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 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)

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

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.