Page MenuHomePhabricator

Invisible modal overlay shown when choosing a new translation
Open, LowPublic




Note that there is an extra right margin on the whole page when the article dropdown is open (although this will vary by OS, as it matches scrollbar width).

There is also an invisible click blocker covering the rest of the page, so although nothing is styled as disabled, clicking on anything outside the dropdown (e.g. on the user menu, or the notifications icon) will just result in the article selector closing.

Modal click blockers should only be used with modal popups and appropriate styling. To ensure the article selector is closed when clicking elsewhere we can bind a mousedown handler to the document, which is standard practice in OOUI.


Related Gerrit Patches:
mediawiki/extensions/ContentTranslation : masterDon't use overlay in source selector

Event Timeline

Esanders created this task.May 2 2018, 4:21 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 2 2018, 4:21 PM

Change 383570 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/ContentTranslation@master] Don't use overlay in source selector

Pginer-WMF triaged this task as Low priority.May 4 2018, 11:19 AM
Pginer-WMF moved this task from Needs Triage to Bugs on the ContentTranslation board.
Vvjjkkii renamed this task from Invisible modal overlay shown when choosing a new translation to 3rdaaaaaaa.Jul 1 2018, 1:12 AM
Vvjjkkii raised the priority of this task from Low to High.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed subscribers: gerritbot, Aklapper.
CommunityTechBot renamed this task from 3rdaaaaaaa to Invisible modal overlay shown when choosing a new translation.Jul 2 2018, 5:05 AM
CommunityTechBot lowered the priority of this task from High to Low.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added subscribers: gerritbot, Aklapper.

Moving discussion from gerrit, as it's getting more product-related:


This patch changes behavior of closing on click outside "New translation" dialog. With this patch, we only have desired feature when there are results in lookup menu. That means, if we don't have any recent edits or nearby suggestion to populate the menu in case when there is no user input, dialog won't close on click outside. Also, when article for translation is selected, clicking outside does nothing. The expected behavior is specified in T111094. Last sentence of the description has link to prototype which captures the idea.
Additionally, with the removal of overlay, we have inconsistent behavior depending on what is clicked. Clicking on actions of list elements does not trigger the action in question, just gives the focus to the button. Dialog is closed correctly.
Other clickable elements are triggering the action, like help links which open page in new tab and close the dialog in the tab that you just left behind. And all of this is only when lookup menu is opened.

The first issue you describe sounds reasonable, and could probably be fixed by moving the "no results found" into a proper popup.

The second issue is a fundamental problem with the design, in that the height of the page can change in reaction to a blur event. As it stands you have unexpected behaviour in that *no* links work while the invisible overlay is in place, the above patch replaces this with behaviour that is inconsistent in a different way.

I think we need to avoid having indirect actions that can change the height of the page, and therefore moving buttons out from underneath your cursor mid-action.

CC @Pginer-WMF

I think in the short term we can fix the second issue by changing the mousedown handler to a mouseup. I'll fix the first issue as well and amend the patch.

Change 383570 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Don't use overlay in source selector