Page MenuHomePhabricator

External links no longer have arrow icon in Light theme.
Closed, ResolvedPublicBUG REPORT

Description

The little blue "arrow" next to external links is no longer shown when the Light theme is selected.

https://en.wikipedia.org/api/rest_v1/page/mobile-html/Barack_Obama

Event Timeline

Comparing the Parsoid output with mobile-html output, this looks like missing rules in the base CSS output, most notably (from https://en.wikipedia.org/w/load.php?modules=mediawiki.legacy.commonPrint%2Cshared%7Cmediawiki.skinning.content.parsoid%7Cmediawiki.skinning.interface%7Cskins.vector.styles%7Csite.styles%7Cext.cite.style%7Cext.cite.styles%7Cmediawiki.page.gallery.styles&only=styles&debug=true&skin=vector) for the icon:

	.mw-parser-output .external {
	  background-position: center right;
	  background-repeat: no-repeat;
	  background-image: url(/w/skins/Vector/images/external-link-ltr-icon.png?325de);
	  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22%3E %3Cpath fill=%22%23fff%22 stroke=%22%2336c%22 d=%22M1.5 4.518h5.982V10.5H1.5z%22/%3E %3Cpath fill=%22%2336c%22 d=%22M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z%22/%3E %3Cpath fill=%22%23fff%22 d=%22M9.995 2.004l.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z%22/%3E %3C/svg%3E");
	  padding-right: 13px;
	}

There are more rules for .external but most of them seem print related.

Update: Found the rule in core: mediawiki.skinning/content.externallinks.less. We should probably consider using the rule MinervaNeue uses:

		"skins.minerva.content.styles.images": {
			"class": "ResourceLoaderImageModule",
			"selector": "{name}",
			"defaultColor": "#36c",
			"useDataURI": false,
			"images": {
				"input.search,.mw-ui-icon-minerva-magnifying-glass:before": "resources/skins.minerva.content.styles.images/magnifying-glass.svg",
				"a.external": {
					"file": {
						"ltr": "resources/skins.minerva.content.styles.images/link-external-ltr.svg",
						"rtl": "resources/skins.minerva.content.styles.images/link-external-rtl.svg"
					}
				}
			}

Got a patch started for this: https://gerrit.wikimedia.org/r/c/mediawiki/services/mobileapps/+/500561

Looks like adding a few more Minerva RL modules does the trick. At least skins.minerva.content.styles.images is needed to solve this issue. (There are a couple of additional modules for the logged in state, which I'm currently unsure about but would love to hear from web devs about that, either here or on the patch.)

I was able to test this using https://en.wikipedia.org/api/rest_v1/page/mobile-html/Barack_Obama#Official in Firefox and jumping through a couple of hoops (disabling CSP enforcement, changing the base CSS URL to one proxied via ngrok because I couldn't figure out how to get mixed content to be allowed, then adding a host/domain name to the background-image URL in the CSS rule for a.external). Maybe easier to test this in a local MW environment.

Screen Shot 2019-04-01 at 2.11.33 PM.png (219×507 px, 33 KB)

Change 500963 had a related patch set uploaded (by Mholloway; owner: Michael Holloway):
[mediawiki/services/mobileapps@master] CSS: Include external link icon CSS rule

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

I think we're better off getting away from serving live ResourceLoader modules, and moving in the direction we discussed on the call with @Jdlrobson a few weeks ago of serving curated copies based on upstream rules. The current approach isn't working well, as evidenced by this task, T214728: Dark mode broken (page background remains light) in apps., T214714: Improper CSS being served to apps., and more.

I've created a patch series (https://gerrit.wikimedia.org/r/#/q/topic:css+status:open+project:mediawiki/services/mobileapps) to update the CSS base endpoint to serve a bundle compiled from static files; the style files could probably be trimmed as we iterate, but the architecture change will at least prevent us from frequently serving the apps bad CSS without warning.

Change 500963 merged by jenkins-bot:
[mediawiki/services/mobileapps@master] CSS: Include external link icon CSS rule

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

Mentioned in SAL (#wikimedia-operations) [2019-04-08T20:05:49Z] <bsitzmann@deploy1001> Started deploy [mobileapps/deploy@c7fa522]: Update mobileapps to cdb9928 (T220045 T219411 T219667)

Mentioned in SAL (#wikimedia-operations) [2019-04-08T20:07:59Z] <bsitzmann@deploy1001> Finished deploy [mobileapps/deploy@c7fa522]: Update mobileapps to cdb9928 (T220045 T219411 T219667) (duration: 02m 10s)

Mentioned in SAL (#wikimedia-operations) [2019-04-08T20:41:06Z] <bsitzmann@deploy1001> Started deploy [mobileapps/deploy@c7fa522]: Update mobileapps to cdb9928 (T220045 T219411 T219667)

Mentioned in SAL (#wikimedia-operations) [2019-04-08T20:49:01Z] <bsitzmann@deploy1001> Finished deploy [mobileapps/deploy@c7fa522]: Update mobileapps to cdb9928 (T220045 T219411 T219667) (duration: 07m 55s)

Mentioned in SAL (#wikimedia-releng) [2019-04-09T16:21:14Z] <bearND> (beta): Update mobileapps to 3edfcad (T220045 T219411 T219667) - 3rd time is the charm

Mentioned in SAL (#wikimedia-operations) [2019-04-09T17:15:26Z] <bsitzmann@deploy1001> Started deploy [mobileapps/deploy@b04c397]: Update mobileapps to 3edfcad (T220045 T219411 T219667)

Mentioned in SAL (#wikimedia-operations) [2019-04-09T17:19:16Z] <bsitzmann@deploy1001> Finished deploy [mobileapps/deploy@b04c397]: Update mobileapps to 3edfcad (T220045 T219411 T219667) (duration: 03m 50s)

It took a few tries but it's finally deployed now. See P8371 for the deployment issues yesterday.

Purged Varnish cache for https://meta.wikimedia.org/api/rest_v1/data/css/mobile/base and for legacy versions of the Android app, also the ones on *.wikipedia.org.