Page MenuHomePhabricator

Indicators overlap "More" dropdown menu contents
Closed, ResolvedPublic1 Story Points

Description

When one edits a page with a {{Coor}} template on Dutch Wikipedia (nlwp), the geographical coordinate shown in the righthand top corner of the page is drawn twice. One in the original spot and one in the visual editor area. The width of the two 'widgets' seems to be identical but they are otherwise styled differently.

I am not entirely sure whether this is a VisualEditor/Parsoid bug, but it appears whenever one edits a page with the {{Coor}} template on nlwp. I have not tried this on any other wikipedias.

Partial screenshot:

Page where this manifests itself:
https://nl.wikipedia.org/wiki/Decca_Studios

Tested with browser:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.111 Safari/537.36 (Chrome 40, retina display)

The issue occurs with other browsers and operating systems as well, I have been told.

Event Timeline

FrankGeerlings raised the priority of this task from to Needs Triage.
FrankGeerlings updated the task description. (Show Details)
FrankGeerlings added a project: VisualEditor.
FrankGeerlings added a subscriber: FrankGeerlings.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 12 2015, 11:14 PM
matmarex updated the task description. (Show Details)Feb 12 2015, 11:18 PM
matmarex set Security to None.
TheDJ added a subscriber: TheDJ.Feb 13 2015, 8:18 AM

This is because the Dutch wiki uses JS to reposition the element dynamically (into a spot where VE will not hide it like it does the rest of the content, just fades it). If you disable JS, you will see that the second spot (the one overlapping with the content in the VE) is the 'natural' position where the coordinates end up if you don't use Javascript.

Thanks TheDJ. Wondering if that means this is an underlying on-wiki code problem that VE should not care about. Or should.

Aklapper renamed this task from Absolutely positioned template in upper rightmost corner gets drawn through body text to Absolutely positioned template in upper rightmost corner gets drawn through body text (due to custom JS on nl.wp).Feb 13 2015, 10:09 AM
Aklapper triaged this task as Lowest priority.

Thanks for looking into this. It sounds like this means there is something Dutch wikipedia should do about this. Are there pre- and post-editing Javascript hooks that can be used? What is the approach you recommend?

You can use the new <indicator> parser hook, and get rid of the JS entirely. :) https://www.mediawiki.org/wiki/Help:Page_status_indicators

On pl.wp we switched to using it for coordinates, FA icons, etc., and never looked back. Looks about the same, infinitely less effort to keep it working. Example simple page: https://pl.wikipedia.org/wiki/Zręczyce

Thanks, @matmarex! I'll look into that.

@matmarex It's been a while, but by now I have had a chance to look into it. I run into a very similar issue in that the <indicator>s have a CSS z-index of 1, which cause them to be drawn through the vectorMenu items in the #mw-head div. An example of this behaviour can be seen on https://nl.wikipedia.org/wiki/Gebruiker:Frank_Geerlings/Indicators/Testpagina2 (screen shot below) – I see that the drop-down menu isn't used in the Polish wikipedia, so it's not an issue there.

I guess this is no longer a Visual Editor issue, but an indicator issue. Should I file a new ticket?

I have not changed the indicators on Dutch wikipedia yet for this reason, so it's still blocking the Visual Editor as main editor launch for nlwp.

FrankGeerlings added a project: Vector.EditedMay 26 2015, 5:10 PM

As can be seen in the image in my previous comment, the drop-down div.menu.vectorMenu in the Vector skin interferes with the indicators. I have added a change to my personal CSS on NL-Wikipedia which I will test out a little bit more before I create a pull request for the Vector skin. A chat on IRC with @matmarex turned out that there are a few things that could be affected by changing the z-index of the Vector drop-down menu:

  • The Echo notifications popup
  • VisualEditor's floating toolbar
  • The body text (z-index: 0)
  • The indicators of course (z-index: 1)

From what I gather from MatmaRex (please forgive the direct quotes here), the z-index: 1 on the indicators are to create a new "stacking context", which basically means that elements with high z-index inside the indicators container will not overlap UI elements, regardless of how high their z-index is. Further, the z-index ensures that the indicators will overlap body text content, this is mostly intended to handle indicators that are very high, or offset to the bottom, like the coordinates on the English Wikipedia. Since .mw-body-content has z-index: 0, indicators have z-index: 1 - without it, the links in coordinates wouldn't be clickable, if they were implemented using indicators. (end MatMarex quote)

This means we can't simply remove the z-index from the indicators, so z-index: 2 on either .vectorMenu or .menu is probably the right choice.

Change 225114 had a related patch set uploaded (by Florianschmidtwelzow):
More-menu needs to overlap indicators

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

matmarex renamed this task from Absolutely positioned template in upper rightmost corner gets drawn through body text (due to custom JS on nl.wp) to Indicators overlap "More" dropdown menu contents.Jul 16 2015, 7:44 PM
matmarex closed this task as Resolved.Jul 16 2015, 7:50 PM
matmarex assigned this task to Florian.
matmarex raised the priority of this task from Lowest to Normal.
matmarex removed a subscriber: gerritbot.

Change 225114 merged by jenkins-bot:
More-menu needs to overlap indicators

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

Jdforrester-WMF moved this task from Freezer to Epics on the VisualEditor board.Jul 22 2015, 11:50 PM
Jdforrester-WMF edited a custom field.Aug 5 2015, 1:10 AM