Page MenuHomePhabricator

Some external weblinks show more than one icon in a reference preview popup
Open, Needs TriagePublic


Certain archived references in the German Wikipedia show two "external web link" icons instead of just one:

Example page:

The reason for this behavior is:

  • Via Vector's externalLinks.less all elements that match the selector .mw-parser-output .external get the icon.
  • The dewiki community removes some of these icons via their local Common.css, but use selectors that start with #mw-content-text a.external to do that.
  • Notice this uses mw-content-text instead of mw-parser-output.
  • We mark the text area in our Reference Previews propups as mw-parser-output. This is semantically correct, and was critical to solve bugs where icons have not been show.

Possible solutions:

  • Remove the external class from elements that are not <a> via JavaScript.
  • Use CSS to remove background images from elements that are marked as external, but aren't <a>.
  • Add the mw-content-text ID to out popups. This would probably work, but violate a few design principles. Most notably, it's an ID. IDs should be unique on a page.
  • Make it so that the DOM of the popup is not appended to the end of the document, but inside of the mw-content-text. Warning: This can cause all kinds of unwanted effects, because a lot more CSS (not only the one rule we care about) will become active for the popup then.
  • Ask the community to change the #mw-content-text in their selectors to #mw-parser-output.
  • … other ideas?

Event Timeline

I'd like to work on it? Which approach should I follow?

There is no decision made yet. That's what this ticket is about. Personally I would start validating the very first idea (JavaScript), as well as the last one (talk to the community). The relevant file is probably Popups/src/ui/templates/referencePreview/referencePreview.js.