FTP credentials dialog gets hidden behind things

[helen]

Steps to reproduce:

1. Force FTP on if not already.
2. Head to Add Themes and click on a screenshot for a full screen overlay preview.
3. Click Install in the sidebar.
4. Observe the Install button change to Installing with a spinner that seems to get stuck.
5. Close the preview overlay and observe that the FTP credentials dialog is there waiting patiently.

This is hopefully "merely" a z-index issue. Here's how to force FTP on for testing:

<?php
/**
 * Plugin Name: Force FTP
 * Description: Used to test FTP credentials screen.
 */

add_filter( 'filesystem_method', function() {
	return 'ftpext';
} );

add_filter( 'fs_ftp_connection_types', function() {
	return [
		'ftp'  => __( 'FTP' ),
		'ftps' => __( 'FTPS (SSL)' ),
		'ssh'  => __( 'SSH2' ),
	];
} );

FTP credentials dialog modal visibility for the body class was hidden in core css, added the css attribute via js

Hm, the customizer uses visibility: hidden on the body when there are full overlays, to completely hide all elements except the customizer. This has the advantage to make the customizer the only perceivable content in the page, and its focusable elements the only ones in the page (no need to constrain tabbing within the full overlays, etc.)

However, the FTP credentials modal is inside wp-body-content so it inherits visibility: hidden. A proper fix would be setting visibility: visible on the modal using just CSS.

To evaluate: why the FTP credentials modal is inside wp-body-content? Ideally, all modals should be placed in the source before the </body>.
To evaluate: maybe the customizer should set visibility: hidden on #wpwrap and not on the body.

42205.diff​ uses just CSS preserving visibility: hidden on the body. When testing, please be sure to hard-refresh your browser cache.

@afercia,

This is being discussed in one of your topic here - https://core.trac.wordpress.org/ticket/27705

That visibility: hidden is being set for the body class and changing of hidden to visible is being done via javascript.

@purnendu in this case, body should stay hidden, the customizer should stay visible (so it's the only perceivable content as discussed on #27705). Only when the customizer full overlay closes, visibility hidden gets removed from the body. In other words: we shouldn't touch that. We should just make the modal visible.

@afercia

Thanks for the clarification.

That's what I did, and did that when modal opens via JavaScript.

@purnendu sure, but there's no need to do that with JavaScript. Presentation should be done with CSS.

@afercia I did a hard refresh, but I'm still seeing the FTP modal behind the theme preview with 42205.diff​ applied.

@melchoyce I don't see the FTP modal at all :) I mean, seems to me it's not printed out in the markup. @westonruter any recent change that could cause the modal markup to be not printed out?

@melchoyce do you see an element with class request-filesystem-credentials-dialog in your browser inspector?

I've not had the problem of the FTP creds modal being hidden behind anything in the Customizer. As long as I activate the “Force FTP” plugin above, and apply the patch from #42184 to get the modal even output into the Customizer, it appears just fine (it doesn't work after that).

Ok with #42184 applied I see the FTP credentials in the Customizer too (wp.org themes).

The original report by @helen is about the theme installer though, that's the one in the Appearance screen > Add New > click on a not installed theme to open the theme installer, for example:

wp-admin/theme-install.php?theme=placid

Click on the "Install" button and the FTP modal appears.

Behind the overlay the "Install" button turns into "Installing".

Cancel and close the modal: the button turns back to "Install".

Se everything seems to work fine, I can't test what happens when actually submitting real credentials though.

Instead, in the Customizer:

• apply also the patch on #42184
• go to the Customizer > change theme > wp.org themes
• click on theme details to open the details modal and then install
• or click directly on Install & Preview
• the FTP modal opens correctly

However, when I cancel and close the modal, all I can see is the Customizer full overlay below. There's no escape from there, the only chance is refresh or browser's Back button:

Unrelated to the FTP modal visibility, but should be fixed.