Page MenuHomePhabricator

mobile-html: allow clients to update theme & dim images
Open, NormalPublic

Description

Context

  1. On iOS, users can toggle image dimming while article html is loaded. This means that we need to be able to communicate image dimming updates to the html so that image dimming can be applied.
  2. On iOS, users can change themes while article html is loaded. This means that we need to be able to communicate theme updates to the html so that its CSS can be updated.

Proposed solution

  1. Provide a JS function to dim images. It could have 2 parameters; dim (Bool) and callback (optional function). dim would be passed to the transform and callback (if defined) would be called last.

For example:

wmf.dimImages = (dim, callback) => {
    const imagesTransform = pagelib.DimImagesTransform;
    imagesTransform.dim(window, dim);
    if (callback) {
        callback();
    }
};
  1. Provide a JS function to update theme. It could have 3 parameters: theme (String), dimImages (Bool) and callback (optional function) . theme can be either 'DEFAULT', 'DARK', 'SEPIA' or 'BLACK', as defined in https://github.com/wikimedia/wikimedia-page-library/blob/e88f10ad04df9664dd8e9d46482edc35a6221017/src/transform/ThemeTransform.js#L13.

For example:

wmf.setTheme = (theme, dimImages, callback) => {
   const themeTransform = pagelib.ThemeTransform;
   const pagelibTheme = themeTransform.THEME[theme];
   themeTransform.setTheme(document, pagelibTheme);
   wmf.dimImages(dimImages);
   if (callback) {
       callback();
   };
}

The examples assume that a wmf object was defined beforehand.

Event Timeline

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
Jhernandez added subscribers: bearND, Jhernandez.

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