Page MenuHomePhabricator

[SPIKE] Investigate whether Parsoid output can help solve theming issues
Closed, InvalidPublic

Description

The scope of the spike entails investigating raw annotated Parsoid output to see whether it can help us solve theming issues (for example, identify elements that should not be themed, like graphs and charts).

If we find any potentially useful context information, it will help @Fjalapeno figure out if it should be provided by a new service.

Event Timeline

It looks like Parsoid output provides template information for most of parent divs via

{"template":{"target":{"wt":"bar box\n","href":"./Template:Bar_box"}

However, that info is localized - on ca.wikipedia.org the same line looks like

{"template":{"target":{"wt":"Gràfic de barres\n","href":"./Plantilla:Gràfic_de_barres"}

A unique template identifier available in Parsoid output would be more useful.

A unique template identifier available in Parsoid output would be more useful.

Isn't that what ./Template:Bar_box and ./Plantilla:Gràfic_de_barres are?

Theoretically the endpoint to could keep a list of any templates which need to be annotated in any way we would find useful - for example it could add a 'no-theme' class to all of the color bar divs of Bar_box output...

The existing 'baseline' CSS approach had the following goals:

  • Don't blast dark mode users with bright light
  • Use designer's colors palette for dark and sepia
  • Address long-standing un-themed areas on orig Android implementation including on non EN-wikis which had been historically problematic (ties into the 'inline styles' challenge mentioned below)

Challenges:

  • Handle MCS and MobileView consistently
  • Work on older Android versions
  • Work-arounds for widespread inline styles
  • Performance

Some trade-offs were made at the time after discussion with @carolyn as relates to some less common elements' theming in order to achieve better theming on extremely common elements.

This comment was removed by Mhurd.

Some examples of the sorts of issues addressed by the 'baseline' css theming approach:

(these cropped up with a PR which unintentionally perturbed the 'baseline' approach, but was convenient for making some screenshots since these were almost the exact issues the baseline approach was tuned to address)

IssueFixed with 'baseline' css approach
enwiki > Audio Slave > MobileView - 0 AFTER.png (1×1 px, 560 KB)
enwiki > Audio Slave > MobileView - 0 BEFORE.png (1×1 px, 439 KB)
enwiki > Audio Slave > MobileView - 1 AFTER.png (1×1 px, 813 KB)
enwiki > Audio Slave > MobileView - 1 BEFORE.png (1×1 px, 680 KB)
enwiki > Audio Slave > MobileView - 2 AFTER.png (1×1 px, 721 KB)
enwiki > Audio Slave > MobileView - 2 BEFORE.png (1×1 px, 558 KB)
enwiki > Barack Obama > MCS - 0 AFTER.png (1×1 px, 458 KB)
enwiki > Barack Obama > MCS - 0 BEFORE.png (1×1 px, 411 KB)
enwiki > Barack Obama > MCS - 1 AFTER.png (1×1 px, 462 KB)
enwiki > Barack Obama > MCS - 1 BEFORE.png (1×1 px, 406 KB)
enwiki > Barack Obama > MCS - 2 AFTER.png (1×1 px, 313 KB)
enwiki > Barack Obama > MCS - 2 BEFORE.png (1×1 px, 263 KB)
enwiki > Barack Obama > MCS - 3 AFTER.png (1×1 px, 502 KB)
enwiki > Barack Obama > MCS - 3 BEFORE.png (1×1 px, 432 KB)
enwiki > Barack Obama > MobileView - 0 AFTER.png (1×1 px, 415 KB)
enwiki > Barack Obama > MobileView - 0 BEFORE.png (1×1 px, 371 KB)
enwiki > Chris Cornell > MCS - 0 AFTER.png (1×1 px, 341 KB)
enwiki > Chris Cornell > MCS - 0 BEFORE.png (1×1 px, 291 KB)
enwiki > Chris Cornell > MCS - 1 AFTER.png (1×1 px, 326 KB)
enwiki > Chris Cornell > MCS - 1 BEFORE.png (1×1 px, 277 KB)
enwiki > Chris Cornell > MCS - 2 AFTER.png (1×1 px, 322 KB)
enwiki > Chris Cornell > MCS - 2 BEFORE.png (1×1 px, 266 KB)
enwiki > Chris Cornell > MCS - 2 AFTER.png (1×1 px, 322 KB)
enwiki > Chris Cornell > MCS - 2 BEFORE.png (1×1 px, 266 KB)
enwiki > Chris Cornell > MobileView - 0 AFTER.png (1×1 px, 541 KB)
enwiki > Chris Cornell > MobileView - 0 BEFORE.png (1×1 px, 458 KB)
enwiki > Gantz > MobileView - 0 AFTER.png (1×1 px, 428 KB)
enwiki > Gantz > MobileView - 0 BEFORE.png (1×1 px, 381 KB)
enwiki > Gantz > MobileView - 1 AFTER.png (1×1 px, 707 KB)
enwiki > Gantz > MobileView - 1 BEFORE.png (1×1 px, 577 KB)
enwiki > John McCain > MCS - 0 AFTER.png (1×1 px, 622 KB)
enwiki > John McCain > MCS - 0 BEFORE.png (1×1 px, 494 KB)
enwiki > John McCain > MCS - 1 AFTER.png (1×1 px, 492 KB)
enwiki > John McCain > MCS - 1 BEFORE.png (1×1 px, 432 KB)
enwiki > John McCain > MobileView - 0 AFTER.png (1×1 px, 427 KB)
enwiki > John McCain > MobileView - 0 BEFORE.png (1×1 px, 359 KB)
enwiki > John McCain > MobileView - 1 AFTER.png (1×1 px, 559 KB)
enwiki > John McCain > MobileView - 1 BEFORE.png (1×1 px, 455 KB)
enwiki > Kill 'Em All > MCS - 0 AFTER.png (1×1 px, 495 KB)
enwiki > Kill 'Em All > MCS - 0 BEFORE.png (1×1 px, 340 KB)
enwiki > Kill 'Em All > MobileView - 0 AFTER.png (1×1 px, 525 KB)
enwiki > Kill 'Em All > MobileView - 0 BEFORE.png (1×1 px, 415 KB)
enwiki > Kill 'Em All > MobileView - 1 AFTER.png (1×1 px, 502 KB)
enwiki > Kill 'Em All > MobileView - 1 BEFORE.png (1×1 px, 454 KB)
enwiki > Manchester United F.C. > MCS - 0 AFTER.png (1×1 px, 371 KB)
enwiki > Manchester United F.C. > MCS - 0 BEFORE.png (1×1 px, 308 KB)
enwiki > Manchester United F.C. > MobileView - 0 AFTER.png (1×1 px, 500 KB)
enwiki > Manchester United F.C. > MobileView - 0 BEFORE.png (1×1 px, 372 KB)
enwiki > Mcycenaean Greek > MobileView - 0 AFTER.png (1×1 px, 607 KB)
enwiki > Mcycenaean Greek > MobileView - 0 BEFORE.png (1×1 px, 515 KB)

Here are a few more issues but for these I was too lazy to go and get the fixed 'baseline' screenshots:

Screen Shot 2017-11-03 at 1.20.10 PM.png (1×1 px, 395 KB)

Screen Shot 2017-11-03 at 1.23.34 PM.png (1×1 px, 352 KB)

Screen Shot 2017-11-03 at 1.22.09 PM.png (1×1 px, 378 KB)

Screen Shot 2017-11-03 at 1.22.03 PM.png (1×1 px, 413 KB)

Screen Shot 2017-11-03 at 1.20.35 PM.png (1×1 px, 410 KB)

Screen Shot 2017-11-03 at 1.21.25 PM.png (1×1 px, 427 KB)

Screen Shot 2017-11-03 at 1.20.59 PM.png (1×1 px, 446 KB)

Screen Shot 2017-11-03 at 1.22.16 PM.png (1×1 px, 450 KB)

Screen Shot 2017-11-03 at 1.21.47 PM.png (1×1 px, 467 KB)

Screen Shot 2017-11-03 at 1.20.20 PM.png (1×1 px, 532 KB)

Screen Shot 2017-11-03 at 1.19.29 PM.png (1×1 px, 583 KB)

Screen Shot 2017-11-03 at 1.23.20 PM.png (1×1 px, 558 KB)

Screen Shot 2017-11-03 at 1.19.47 PM.png (1×1 px, 592 KB)

Screen Shot 2017-11-03 at 1.21.57 PM.png (1×1 px, 580 KB)

Screen Shot 2017-11-03 at 1.23.26 PM.png (1×1 px, 567 KB)

Screen Shot 2017-11-03 at 1.23.17 PM.png (1×1 px, 699 KB)

Screen Shot 2017-11-03 at 1.23.52 PM.png (1×1 px, 677 KB)

Screen Shot 2017-11-03 at 1.23.41 PM.png (1×1 px, 671 KB)

Screen Shot 2017-11-03 at 1.21.42 PM.png (1×1 px, 639 KB)

Screen Shot 2017-11-03 at 1.21.36 PM.png (1×1 px, 953 KB)

This has too much useful info to close for now, putting back in backlog.

Closing this as we're switching to PCS - we'll need to re-proof theming bits as part of that transition.