VisualEditor does not handle wikitext that adds ResourceLoader modules correctly
Open, LowPublic8 Story Points

Description

When certain wikitext is parsed, it loads ResourceLoader modules. For example, the Babel extension's parser function {{#babel:}} loads styles necessary to display the babel box, and Scribunto's {{#invoke:}} loads styles and scripts to display the error messages if an error is output. The styles loaded by these ResourceLoader modules may also apply to other elements on the page thanks to the way CSS works.

When editing the page with VisualEditor on enwiki, these ResourceLoader modules are not handled correctly. I'll use the Babel extension in my example here since the presence and absence of its styles are easily visible.

Reproduction procedure:

  1. Create a template (TestTemplate) with the following content: <includeonly>{{#babel:en}}</includeonly>.
  2. Create a page (TestPage) with the following content: <div class="mw-babel-box-5">Testing</div>. I'd recommend not using VE to do so, although it probably doesn't matter.
    • Expected output: At this point, the visible output of TestPage will be the word "Testing", with no border on the containing div.
    • Observed output: As expected.
  3. Edit TestPage in VE.
    • Expected output: No change from step 2.
    • Observed output: As expected.
  4. Add the TestTemplate to the page.
    • Expected output: The Babel box is colored and floated right. The div around the word "Testing" has a gold (#CCCC00) border, thanks to the styles from the ext.babel RL module.
    • Observed output: The Babel box is unstyled and is not floated. The "Testing" div has no border.
  5. Save the edits made in the previous step.
    • Expected output: No change from step 4.
    • Observed output: No change from step 4, i.e. still incorrect.
  6. Manually reload the page.
    • Expected output: No change from step 5.
    • Observed output: Now matches the expected output.
  7. Edit the page in VE again.
    • Expected output: No change from step 6.
    • Observed output: As expected.
  8. Delete the transclusion of TestTemplate from the page.
    • Expected output: The Babel box is gone. The "Testing" div has no border.
    • Observed output: The Babel box is gone. The "Testing" div still has a gold (#CCCC00) border.
  9. Save the page.
    • Expected output: No change from step 8.
    • Observed output: No change from step 8, i.e. still incorrect.
  10. Manually reload the page.
    • Expected output: No change from step 9.
    • Observed output: Now matches the expected output.
Anomie created this task.Jan 26 2017, 8:02 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 26 2017, 8:02 PM

T156699 seems to be steps 3–5 here.

Anomie updated the task description. (Show Details)Feb 15 2017, 3:11 PM

Regarding #8, I think if you are going to make wikitext use the same CSS class as a MediaWiki extension, weird stuff is going to happen (imagine an edge case where some gadget loaded the babel CSS or whatnot), and I don't think it's really an issue.

What about TemplateStyles? Yes, we've discouraged having other stuff outside the template itself depend on styles included by the template in the documentation, but until some future where we actually enforce that it seems likely people will do it anyway.