Page MenuHomePhabricator

Technical: Every Drawer has a shield for catching clicks
Closed, ResolvedPublic

Description

Note: the associated epic T214647 should be read first before taking on this task!

When a Drawer is open, everything “behind” the drawer is still clickable, including menus and overlays. We will change this by making use of an opaque "shield"

Reproduction steps

Click on a reference. While the reference drawer is open, click the page edit button, or the main menu, or a link .

Expected results

The reference drawer should just close by clicking anywhere in the document.

Actual results

When clicking the edit button, the overlay is open on top of the reference drawer,


When clicking the main menu, the menu slides out below the reference drawer (or CTA drawer).

When clicking a link, the link is activated and the page reloads.

Developer notes

There are 2 types of Drawers to be concerned about - ReferencesDrawer and CtaDrawer, used in 3 places (clicking red links, watch star when anonymous and a reference)
When clicking anywhere in page content, drawers should close.

Note: confusingly, this happens but indirectly and not explicitly due to some code relating to the Menu Drawers

If you comment out

	skin.on( 'click', onSkinClick.bind( skin ) );

then this behaviour goes away. This appears to mostly work with the exception of anchor tags such as the hamburger icon and the edit icon. This is because those elements call stopPropagation in their own click handlers meaning the event never bubbles up to the body tag.

Let's revise all this code so that an event handler is explicitly added for hiding Drawers that have been opened and removing those event handlers when they are gone and revising the code in preInit so it only applies to NavigationDrawers.

Instead of setting an opacity on all body elements when an overlay is open:

.has-drawer.drawer-visible > *:not(.drawer) {
opacity: 0.6;
}

A dedicated shield/guard element should be created and placed just “below” the Drawer, but “above” the rest of the document content, so that when someone clicks the document when a Drawer is open, they can only click on the guarding element and not a real link/menu/overlay etc. The Drawer shield would also capture any event clicks

This would also keep all the code associated with the Drawer.
e.g.

<div class="drawer">
    <div class="drawer__shield"><!-- covers entire screen and is opaque --></div>
    <div class="drawer__drawer">
    <!-- this is the current implementation of the drawer -->
    </div>
</div>

Acceptance criteria

  • The shield should cover the whole article surface and be translucent (opacity: 0.6)
  • Clicking anywhere in the shield should stop event propagation and close the drawer.
  • Clicking inside the drawer itself or highlighting text does not trigger the closing of the drawer.

QA steps

When logged out...

  • Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Abdullah_bin_Nasser_bin_Khalifa_Al_Thani and click a red link
  • Click a reference on same page
  • Click the watchstar on the page.
  • Keep clicking these 3 things trying to see if you can break it. In all cases a translucent shield should cover the screen. Each drawer should be closable using the close button or clicking the translucent shield. References drawer should not close on scroll but watch and red link drawer should.

QA Results

Details

Related Gerrit Patches:
mediawiki/skins/MinervaNeue : masterDo not add the navigation-enabled class to body tag for drawers
mediawiki/extensions/MobileFrontend : masterDrawer's no longer touch the body tag and have their own mask
mediawiki/skins/MinervaNeue : masterUpdate reference test to click the right element
mediawiki/extensions/MobileFrontend : masterPOC: Transparent shield part of Drawer component not Skin
mediawiki/skins/MinervaNeue : masterAllow .transparent-shield styles for navigation to be reused
mediawiki/extensions/MobileFrontend : masterDrawer: Use .transparent-shield

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 17 2019, 2:40 PM
ovasileva triaged this task as Medium priority.Jan 17 2019, 5:23 PM
ovasileva moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.
Jdlrobson renamed this task from Page content should not be clickable when a Drawer is open to [Bug] Links/interface elements in pages when clicked show close Drawer.Jan 22 2019, 11:41 PM
Jdlrobson renamed this task from [Bug] Links/interface elements in pages when clicked show close Drawer to [Bug] Links/interface elements in pages when clicked should close Drawer.
Jdlrobson updated the task description. (Show Details)
Jdlrobson renamed this task from [Bug] Links/interface elements in pages when clicked should close Drawer to [Bug] Every Drawer has a shield for catching clicks.Jan 24 2019, 10:13 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson renamed this task from [Bug] Every Drawer has a shield for catching clicks to Every Drawer has a shield for catching clicks.Feb 5 2019, 5:21 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)Feb 5 2019, 5:32 PM
Niedzielski added a subscriber: Niedzielski.EditedFeb 5 2019, 5:40 PM

Note: drawer contents can scroll.

Our estimations were a little all over the place - 2, 5, and 2 8s. Some of us felt the change was well isolated and straightforward, while others were a little concerned given the complexity of the OverlayManager. We will re-estimate this when @Jdrewniak is back as he is the most familiar with this code.

Jdlrobson set the point value for this task to 8.Feb 27 2019, 5:31 PM

We have estimated highly but we recognise this might be easier than that.
A proof of concept might be helpful or a spike make help if we have trouble fitting this into our sprint work.

matmarex claimed this task.Jul 17 2019, 9:37 PM
matmarex added a subscriber: matmarex.

We rediscovered this issue while testing VE (T228216). I will agree that this is quite easy, and I think it's safe to do despite the complexity of code related to opening/closing overlays/drawers, as it can be implemented using only CSS changes.

Change 524041 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/MinervaNeue@master] Allow .transparent-shield styles for navigation to be reused

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

Change 524042 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/MobileFrontend@master] Drawer: Use .transparent-shield

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

Change 524041 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Allow .transparent-shield styles for navigation to be reused

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

Change 524042 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Drawer: Use .transparent-shield

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

Change 524047 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] POC: Transparent shield part of Drawer component not Skin

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

Change 524047 abandoned by Jdlrobson:
POC: Transparent shield part of Drawer component not Skin

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

matmarex removed matmarex as the assignee of this task.Jul 18 2019, 12:27 AM

Thanks for the review! I think I don't know enough about those internals (and your plans on them) to comment on that refactoring, so I'll unassign myself and leave it for y'all. The merged patches resolve T228216 and that's what I mainly wanted :)

Change 524321 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Update reference test to click the right element

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

Change 524321 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Update reference test to click the right element

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

This comment was removed by Jdlrobson.
Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptDec 19 2019, 8:20 PM

Change 558256 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Drawer's no longer touch the body tag and have their own mask

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

Jdlrobson removed the point value for this task.Mon, Jan 6, 7:12 PM

Estimate has likely changed as a result of the changes in the drawer relating to other tasks so this should be estimated again.

ovasileva added a subscriber: ovasileva.

@Jdlrobson, @Jdrewniak - I can't reproduce this (or perhaps I'm not understanding the bug correctly). As stated, it assumes the menu opens over the reference drawer, is that correct?

Jdlrobson renamed this task from Every Drawer has a shield for catching clicks to Technical: Every Drawer has a shield for catching clicks.Tue, Jan 7, 5:12 PM

This is a technical task that I worked on as it was related to T214045 which we worked on during the sprint. Given I have a patch I was hoping to get it estimated and scheduled rather than let it bit rot as I think it's an important architectural improvement.

This is a technical task that I worked on as it was related to T214045 which we worked on during the sprint. Given I have a patch I was hoping to get it estimated and scheduled rather than let it bit rot as I think it's an important architectural improvement.

got it, thanks! moving to needs analysis

Change 558256 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Drawer's no longer touch the body tag and have their own mask

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

Edtadros assigned this task to ovasileva.EditedMon, Jan 13, 5:32 AM
Edtadros added a subscriber: Edtadros.

Test Result

Status: ✅ PASS
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

QA steps

When logged out...

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Abdullah_bin_Nasser_bin_Khalifa_Al_Thani and click a red link
Click a reference on same page
Click the watchstar on the page.

✅ AC1: Keep clicking these 3 things trying to see if you can break it.
✅ AC2: In all cases a translucent shield should cover the screen.
✅ AC3: Each drawer should be closable using the close button
✅ AC4: or clicking the translucent shield.
✅ AC5: References drawer should not close on scroll
✅ AC6: but watch and red link drawer should.

Edtadros updated the task description. (Show Details)Mon, Jan 13, 5:34 AM

The shield should cover the whole article surface and be translucent (opacity: 0.6)

The opacity of the reference drawer shield appears to be .5. Is this correct @Jdlrobson, @Jdrewniak? Otherwise LGTM.

Change 564151 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Add shield transparent class in show not postRender

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

Change 564152 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Do not add the navigation-enabled class to body tag for drawers

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

The shield should cover the whole article surface and be translucent (opacity: 0.6)

The opacity of the reference drawer shield appears to be .5. Is this correct @Jdlrobson, @Jdrewniak? Otherwise LGTM.

@nray found a bug relating to this - it seems the drawer also reveals the main menu mask giving 2 opaque shields on top of one another.
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/56415 and https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/564151 should fix.

Change 564152 merged by Jdlrobson:
[mediawiki/skins/MinervaNeue@master] Do not add the navigation-enabled class to body tag for drawers

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

Niedzielski removed Niedzielski as the assignee of this task.Tue, Jan 14, 6:07 PM
Jdlrobson closed this task as Resolved.Tue, Jan 14, 7:40 PM

Ran through QA again and this is good now except for regression T242784 which is best tracked in that task. Signing off.