Change Details

It is important for us to verify the new client side preferences can be applied to mobile. This presents a good opportunity to fix a longstanding issue with the mobile site. Currently changing the font size on Minerva leads to a visible flash as the font kicks in this. Given the changes in core in T339268 we can now resolve this issue. We'd like to extend the existing client side preferences to the mobile site # TODO [] Update Minerva to use new client side preferences (where available). You may need to enable the associated skin option (https://gerrit.wikimedia.org/r/c/mediawiki/core/+/947479) [] Note: for logged in users client side preferences are stored to user preference so this will likely involve adding a Minerva-specific preference. [] Think about existing consumers. Check `mw.storage.set( 'userFontSize')` in your code and call `mw.user.clientPrefs` when it has been set (you'll also need to add the appropriate NEW class on the HTML element). Flash of unstyled content here is okay. Note: No need to worry about cached HTML as the existing Minerva preference is a JavaScript only feature. # QA Test 1) On mobile site as anonymous user: * Go to Special:MobileOptions * Toggle font size to extra large * Visit an article page * Font size for paragraphs in content should be XL. There should be no visible change in font size on page load. Expected: Repeat the above as a logged in user Test 2) Check existing consumers Open mobile site in an incognito window. In your JavaScript console run the following code: ``` localStorage.set( 'userFontSize', 'x-large' ) ``` Refresh the page. Expected: you should see the extra large font size (with a flash of unstyled content). # Sign off step [] Document the process to make sure this is easier in future.

NOTE: Blocked on T345664 It is important for us to verify the new client side preferences can be applied to mobile. This presents a good opportunity to fix a longstanding issue with the mobile site. Currently changing the font size on Minerva leads to a visible flash as the font kicks in this. Given the changes in core in T339268 we can now resolve this issue. We'd like to extend the existing client side preferences to the mobile site # TODO [] Update Minerva to use new client side preferences (where available). You may need to enable the associated skin option (https://gerrit.wikimedia.org/r/c/mediawiki/core/+/947479) [] Note: for logged in users client side preferences are stored to user preference so this will likely involve adding a Minerva-specific preference. [] Think about existing consumers. Check `mw.storage.set( 'userFontSize')` in your code and call `mw.user.clientPrefs` when it has been set (you'll also need to add the appropriate NEW class on the HTML element). Flash of unstyled content here is okay. Note: No need to worry about cached HTML as the existing Minerva preference is a JavaScript only feature. # QA Test 1) On mobile site as anonymous user: * Go to Special:MobileOptions * Toggle font size to extra large * Visit an article page * Font size for paragraphs in content should be XL. There should be no visible change in font size on page load. Expected: Repeat the above as a logged in user Test 2) Check existing consumers Open mobile site in an incognito window. In your JavaScript console run the following code: ``` localStorage.set( 'userFontSize', 'x-large' ) ``` Refresh the page. Expected: you should see the extra large font size (with a flash of unstyled content). # Sign off step [] Document the process to make sure this is easier in future.

NOTE: Blocked on T345664 It is important for us to verify the new client side preferences can be applied to mobile. This presents a good opportunity to fix a longstanding issue with the mobile site. Currently changing the font size on Minerva leads to a visible flash as the font kicks in this. Given the changes in core in T339268 we can now resolve this issue. We'd like to extend the existing client side preferences to the mobile site # TODO [] Update Minerva to use new client side preferences (where available). You may need to enable the associated skin option (https://gerrit.wikimedia.org/r/c/mediawiki/core/+/947479) [] Note: for logged in users client side preferences are stored to user preference so this will likely involve adding a Minerva-specific preference. [] Think about existing consumers. Check `mw.storage.set( 'userFontSize')` in your code and call `mw.user.clientPrefs` when it has been set (you'll also need to add the appropriate NEW class on the HTML element). Flash of unstyled content here is okay. Note: No need to worry about cached HTML as the existing Minerva preference is a JavaScript only feature. # QA Test 1) On mobile site as anonymous user: * Go to Special:MobileOptions * Toggle font size to extra large * Visit an article page * Font size for paragraphs in content should be XL. There should be no visible change in font size on page load. Expected: Repeat the above as a logged in user Test 2) Check existing consumers Open mobile site in an incognito window. In your JavaScript console run the following code: ``` localStorage.set( 'userFontSize', 'x-large' ) ``` Refresh the page. Expected: you should see the extra large font size (with a flash of unstyled content). # Sign off step [] Document the process to make sure this is easier in future.