Page MenuHomePhabricator

Apply styles to mobile only for Hindi campaign
Closed, ResolvedPublic5 Story Points

Description

The following styles will need to be loaded on the Hindi main page of Wikipedia.
We can either do this via the loading of a special purpose ResourceLoader module or via CSS loaded inside the Minerva skin itself when $wgMinervaApplyKnownTemplateHacks is enabled (Jon is currently investigating both approaches)

The styles

.content-box-primary,
.content-box-secondary table {
	 margin: 0!important;
}

.content-box-primary {
	border: solid 1px #3366cc !important;
	border-radius: 2px;
	table {
		margin: 0 !important;
	}

	tbody {
		td {
	  	background: #eaf3ff !important;
	  	padding: 15px !important;
		}

		th {
				background: #36c !important;
				color: #fff !important;
				text-align: left !important;
				border: none !important;
				padding: 0 20px !important;
			}
	}
}

/* in the news styling */
.content-box-secondary {
	table {
		border-radius: 2px;
	  margin: 0 !important;
	  border: solid 1px #00af89 !important;
	}
	tbody th {
		background: #00af89 !important;
		color: #fff !important;
		text-align: left !important;
		border: none !important;
		padding: 0 20px !important;	
	}
}

Implementation

Extend ResourceLoaderWikiModule.php - enable MediaWiki:MobileMainPage.css
Using https://github.com/wikimedia/mediawiki/blob/master/includes/resourceloader/ResourceLoaderSiteModule.php#L28 as inspiration, we can add a ResourceLoader class inside modules and load a specific module only for visits to the Main Page.

PROS: More future proof; no cleanup required; wiki styles and "!important" can live inside a wiki page on Hindi Wikipedia;
CONS: A little more work upfront; Potential if adopted for more hassle when migrating to TemplateStyles.

Acceptance criteria

  • The new module is feature flagged
  • The new module should be enabled on Hindi Wikipedia
  • Styles will load on Hindi Wikipedia main page.
  • Styles should not apply on other wikis.
  • Styles should not apply in desktop mode (useformat=desktop)

Testing

$wgMFContentProviderClass = 'MobileFrontend\ContentProviders\MwApiContentProvider';
$wgMFMwApiContentProviderBaseUri = "https://hi.wikipedia.org/w/api.php";

Edit: http://localhost:8888/w/index.php/MediaWiki:Mainpage with the value User:Npangarkar_(WMF)/sandbox

Visit: http://localhost:8888/w/index.php/User:Npangarkar_(WMF)/sandbox

Expected:
First infobox is blue
Second inbox is green

Developer notes

Currently:

  • MediaWiki:Common.css loads for all desktop pages only and is render blocking.
  • MediaWiki:Mobile.css loads for all mobile pages via JavaScript. Is (currently) not render blocking.
  • Given we want to load for main page only neither of these pages are ideal.

Sign off steps

  • Create a task to clean up this work later

Other possible solutions

  1. Put them in the skins.minerva.mainPage.styles module inside a hacks.less file.

PROS: Logic already in place to load only on the main page
CONS: Will need a config flag to only load on Hindi Wikipedia; !importants galore; Will need to cleanup after ourselves

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 19 2018, 10:57 PM
Jdlrobson updated the task description. (Show Details)Mar 20 2018, 12:11 AM
Jdlrobson moved this task from Needs Prioritization to Upcoming on the Readers-Web-Backlog board.
Jdlrobson added a subscriber: ovasileva.

@ovasileva personally I'd like to go with option #2, but let's talk about this in grooming and see what the other devs think.

Jdlrobson updated the task description. (Show Details)Mar 20 2018, 12:24 AM
Jdlrobson updated the task description. (Show Details)
ovasileva triaged this task as High priority.Mar 20 2018, 11:30 AM
ovasileva added a project: New-Readers.
Krinkle updated the task description. (Show Details)Mar 20 2018, 5:12 PM
Jdlrobson updated the task description. (Show Details)Mar 20 2018, 5:41 PM
ovasileva set the point value for this task to 5.Mar 20 2018, 5:45 PM
atgo added subscribers: Nirzar, atgo.Mar 20 2018, 8:09 PM

Hey there - this conversation happened on email and want to summarize here. It looks like we have an ETA on this of early next week (week of March 26). We may be able to SWAT it earlier, but won't know if that's possible until the work is completed.

I'm going to work on pushing the campaign back and will confirm here when that new date is set.

cc/ @Nirzar

atgo added a comment.Mar 21 2018, 4:24 PM

Confirming that the campaign date has been pushed out so that this work can land early next week. We want a week (or a few days at least) to buffer this change from the campaign launch for analysis, so ideally this ticket would go out by March 26.

Jdlrobson moved this task from To Do to Doing on the Readers-Web-Kanbanana-Board-Old board.

@atgo - due to the schedule (no SWAT deploys on Fridays) and some risk associated to this, the earliest this can go out would be on Tuesday. If we need an extra day or two for development we might have to push to further in the week.

Change 421090 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Add $wgMFMobileMainPage.css config flag

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

Jdlrobson removed Jdlrobson as the assignee of this task.Mar 21 2018, 6:02 PM

Change 421090 merged by Jdlrobson:
[mediawiki/extensions/MobileFrontend@master] Add $wgMFMobileMainPageCss config flag

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

Change 421184 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[operations/mediawiki-config@master] Enable MFMobileMainPageCss on Hindi Wikipedia

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

Jdlrobson assigned this task to Nirzar.EditedMar 21 2018, 10:04 PM

@Nirzar Okay so https://reading-web-staging.wmflabs.org/wiki/MediaWiki:MobileMainPage.css has been setup. You'll see it only applies to the main page (note the gray background on https://reading-web-staging.wmflabs.org/wiki/Main_Page)

This will ride next train (unless we SWAT) and be available from Thursday 29th March. We can of course SWAT it earlier but with added risk and we'll need to be 100% sure it does what you need it to.

We'll need an additional SWAT to turn this on for Hindi Wikipedia as it's currently disabled by default (for added safety).

@Nirzar this will need some QA on staging however before we continue.

@Jdlrobson sounds great, I leave the SWATING decisions up to @ovasileva and @atgo

@Nirzar this will need some QA on staging however before we continue.

Who will do this and how? To be 100% clear there's no room for mistakes here. What I SWAT is what we get for the campaign so we should be 100% sure you have what you need before doing that.

atgo added a comment.Mar 21 2018, 10:17 PM

Thursday March 29 would be late for me, but manageable. It couldn't be any
later than that date though, so from my perspective pushing earlier so that
there's some wiggle room would be a good idea. @ovasileva?

Nirzar added a comment.EditedMar 21 2018, 10:19 PM

Who will do this and how?

we can use the sandbox mainpage from my sandbox on hindi wikipedia on staging. and everything should work without global.css as the code should be in staging css.

does that make sense? that will provide us a way to test this. FOUC should not show in that case. also we can do some minor cross browser testing

@atgo - once we get an ok from the testing we can SWAT. If there's no issues, the earliest we SWAT on Monday. If we do experience issues, it might move to later in the week. @Jdlrobson - correct me if I'm wrong on any of this.

I'll set the hindi content on staging (hopefully)

Jhernandez updated the task description. (Show Details)Mar 22 2018, 5:56 PM

Hi all, summary as of right now:

Staging server:

  • The styles on the description are here: MediaWiki:MobileMainPage.css
  • They are being applied to the Main page, and more interestingly to सदस्य:Npangarkar (WMF)/sandbox, which has the wikitext changes to the main page that will be done in Hindi, and the MobileFormatter applied to it.
  • Nirzar has had a look at it and verified it works as expected

What is needed for the campaign

What has been done to reading-web-staging

  • /srv/mediawiki-vagrant/mediawiki/LocalSettings.php has the content provider set to hindi wikipedia instead of english and Jon added the $wgMFMobileMainPageCss = true
  • /srv/mediawiki-vagrant/mediawiki/extensions/MobileFrontend is checked out to:

Please, check out सदस्य:Npangarkar (WMF)/sandbox and come back to us in chat if there are any issues.

I'll inform the team and Olga to be aware of the situation, and the deployment needs, and find stewards for the SWATs to schedule and deploy.

Change 421359 had a related patch set uploaded (by Niedzielski; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@wmf/1.31.0-wmf.26] Squash: Hygiene: Auto namespace ResourceLoader modules and Add $wgMFMobileMainPageCss config flag

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

Thanks @Jhernandez.

The patch will need to be SWAT deployed on Monday. NEEDS TO BE SCHEDULED AND A RESPONSIBLE

@pmiazga to schedule and perform SWAT of https://gerrit.wikimedia.org/r/#/c/421359. Note: this is a squash of two patchsets from @Jdlrobson. I've checked out this patch on reading-web-staging + cherry-picking "make nirzar great again" and सदस्य:Npangarkar (WMF)/sandbox seems to work but please test.

On a separate SWAT deploy, we will enable the config flag only for hi.wiki. NEEDS TO BE SCHEDULED AND A RESPONSIBLE

@pmiazga to also make and SWAT the config?

Have we tested everything yet? Any other blockers before deploying this?

@ovasileva I've tried the new patchset on staging but @Nirzar should confirm. @pmiazga, do you have what you need for the two deploys on Monday?

@Niedzielski I think I have everything - I'll double check it today

Change 421867 had a related patch set uploaded (by Pmiazga; owner: Pmiazga):
[operations/mediawiki-config@master] Enable mobile-only Mediawiki:MainPageCss styles for Hindi wiki

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

Change 421359 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@wmf/1.31.0-wmf.26] Squash: Hygiene: Auto namespace ResourceLoader modules and Add $wgMFMobileMainPageCss config flag

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

Mentioned in SAL (#wikimedia-operations) [2018-03-26T13:26:27Z] <zfilipin@tin> Synchronized php-1.31.0-wmf.26/extensions/MobileFrontend/: SWAT: [[gerrit:421359|Squash: Hygiene: Auto namespace ResourceLoader modules and Add $wgMFMobileMainPageCss config flag; Hygiene: Auto namespace ResourceLoader modules; Add $wgMFMobileMainPageCss config flag (T190101)]] (duration: 01m 01s)

Feature was deployed during European mid-day swat but it is not enabled yet.

Nirzar added a subscriber: satdeep_gill.EditedMar 26 2018, 5:16 PM

Step 0
Enable this change on Hindi Wikipedia


  • ---- Steps after we turn this on, on Hindi Wikipedia -----

@Jdlrobson will be doing Step 1.

@satdeep_gill will be doing Step 2 once Step 1 is complete

Step 1. Create main_page.css and add the css code

create a css file on following URL --
https://hi.wikipedia.org/wiki/index.php?title=MediaWiki:MobileMainPage.css

Add css code from this description
https://phabricator.wikimedia.org/T190101

Step 2. Edit Main_Page code

Go to Hindi main page edit
https://hi.wikipedia.org/w/index.php?title=%E0%A4%AE%E0%A5%81%E0%A4%96%E0%A4%AA%E0%A5%83%E0%A4%B7%E0%A5%8D%E0%A4%A0&action=edit

Edit the page to reflect changes from following Diff

https://hi.wikipedia.org/w/index.php?title=%E0%A4%B8%E0%A4%A6%E0%A4%B8%E0%A5%8D%E0%A4%AF%3ANpangarkar_%28WMF%29%2Fsandbox&type=revision&diff=3742842&oldid=3728249

Hit save.

How to test -

Visit https://hi.m.wikipedia.org/wiki/%E0%A4%AE%E0%A5%81%E0%A4%96%E0%A4%AA%E0%A5%83%E0%A4%B7%E0%A5%8D%E0%A4%A0

from your phone

Expected result
https://wikimedia.invisionapp.com/share/P2FGC8NVWQC#/280718623_Hindi-Final-Version

Change 421867 merged by jenkins-bot:
[operations/mediawiki-config@master] Enable mobile-only Mediawiki:MainPageCss styles for Hindi wiki

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

Mentioned in SAL (#wikimedia-operations) [2018-03-26T18:28:00Z] <niharika29@tin> Synchronized wmf-config/InitialiseSettings.php: Enable mobile-only Mediawiki:MainPageCss styles for Hindi wiki T190101 (duration: 00m 58s)

@satdeep_gill, @Nirzar The change has been enabled on Hindi Wikipedia. Please proceed with step 2

Just to update on phab: this is live and well! I will test from some android phones and close this task.

atgo awarded a token.Mar 26 2018, 7:40 PM
Jdlrobson closed this task as Resolved.Mar 26 2018, 7:49 PM

MediaWiki:Mobile.css stops loading on all wikis, including English Wikipedia. Switch to mobile view and examine all resources loaded: styles defined in MediaWiki:Mobile.css cannot be found.

atgo added a comment.Apr 3 2018, 2:58 PM

The campaign is now live! FYI. Thanks for your help making this happen :D

https://www.facebook.com/wikipedia/videos/10156108644168346/