From c997d1283f927dc3ba407cb3bf2141851d48847e Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Sat, 9 Sep 2017 14:13:28 +0000 Subject: [PATCH] Administration: Thickbox: Fix conflicts with the Plugin details and native Thickbox modals. The Plugin details modal custom implementation in the Plugins page conflicts with other Thickbox instances added by plugins. Thickbox shows its age and has been modified over time to suit core needs. However, WordPress should do its best to not create conflicts with the native Thickbox styles and functionalities. Plugin authors should be able to use `add_thickbox()` in any admin page as documented, without having to worry about potential errors. - fixes a JavaScript error when closing a native Thickbox modal in the Plugins page - avoids to override the native Thickbox modal styles - uses a CSS class to target the Plugin details modal and remove a pile of overqualified CSS selectors Fixes #41417. git-svn-id: https://develop.svn.wordpress.org/trunk@41356 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/common.css | 92 ++++-------------------- src/wp-admin/js/plugin-install.js | 24 +++++-- src/wp-includes/js/thickbox/thickbox.css | 2 +- 3 files changed, 31 insertions(+), 87 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 2659e5e64a..9b79d6bd83 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -2864,33 +2864,12 @@ div.action-links { } } -/* Thickbox for Plugin Install screen */ -body.about-php #TB_window, -body.plugin-install-php #TB_window, -body.import-php #TB_window, -body.plugins-php #TB_window, -body.update-core-php #TB_window, -body.index-php #TB_window { +/* Thickbox for the Plugin details modal. */ +#TB_window.plugin-details-modal { background: #fcfcfc; } -/* IE 8 needs a change in the pseudo element content */ -.ie8 body.about-php #TB_window:before, -.ie8 body.plugin-install-php #TB_window:before, -.ie8 body.import-php #TB_window:before, -.ie8 body.plugins-php #TB_window:before, -.ie8 body.update-core-php #TB_window:before, -.ie8 body.index-php #TB_window:before { - content: " "; - background: none; -} - -body.about-php #TB_window.thickbox-loading:before, -body.plugin-install-php #TB_window.thickbox-loading:before, -body.import-php #TB_window.thickbox-loading:before, -body.plugins-php #TB_window.thickbox-loading:before, -body.update-core-php #TB_window.thickbox-loading:before, -body.index-php #TB_window.thickbox-loading:before { +#TB_window.plugin-details-modal.thickbox-loading:before { content: ""; display: block; width: 20px; @@ -2910,80 +2889,38 @@ body.index-php #TB_window.thickbox-loading:before { (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { - body.about-php #TB_window.thickbox-loading:before, - body.plugin-install-php #TB_window.thickbox-loading:before, - body.import-php #TB_window.thickbox-loading:before, - body.plugins-php #TB_window.thickbox-loading:before, - body.update-core-php #TB_window.thickbox-loading:before, - body.index-php #TB_window.thickbox-loading:before { + #TB_window.plugin-details-modal.thickbox-loading:before { background-image: url(../images/spinner-2x.gif); } } -body.about-php #TB_title, -body.plugin-install-php #TB_title, -body.import-php #TB_title, -body.plugins-php #TB_title, -body.update-core-php #TB_title, -body.index-php #TB_title { +.plugin-details-modal #TB_title { float: left; height: 1px; } -body.about-php #TB_ajaxWindowTitle, -body.plugin-install-php #TB_ajaxWindowTitle, -body.import-php #TB_ajaxWindowTitle, -body.plugins-php #TB_ajaxWindowTitle, -body.update-core-php #TB_ajaxWindowTitle, -body.index-php #TB_ajaxWindowTitle { +.plugin-details-modal #TB_ajaxWindowTitle { display: none; } -/* only on these screens */ -.about-php #TB_closeWindowButton, -.plugin-install-php #TB_closeWindowButton, -.import-php #TB_closeWindowButton, -.plugins-php #TB_closeWindowButton, -.update-core-php #TB_closeWindowButton, -.index-php #TB_closeWindowButton { +.plugin-details-modal #TB_closeWindowButton { left: auto; right: -30px; color: #eee; } - -body.about-php #TB_closeWindowButton:hover, -body.about-php #TB_closeWindowButton:focus, -body.plugin-install-php #TB_closeWindowButton:hover, -body.plugin-install-php #TB_closeWindowButton:focus, -body.import-php #TB_closeWindowButton:hover, -body.import-php #TB_closeWindowButton:focus, -body.plugins-php #TB_closeWindowButton:hover, -body.plugins-php #TB_closeWindowButton:focus, -body.update-core-php #TB_closeWindowButton:hover, -body.update-core-php #TB_closeWindowButton:focus, -body.index-php #TB_closeWindowButton:hover, -body.index-php #TB_closeWindowButton:focus { +.plugin-details-modal #TB_closeWindowButton:hover, +.plugin-details-modal #TB_closeWindowButton:focus { color: #00a0d2; outline: none; box-shadow: none; } -body.about-php .tb-close-icon, -body.plugin-install-php .tb-close-icon, -body.import-php .tb-close-icon, -body.plugins-php .tb-close-icon, -body.update-core-php .tb-close-icon, -body.index-php .tb-close-icon { +.plugin-details-modal .tb-close-icon { display: none; } -body.about-php #TB_closeWindowButton:after, -body.plugin-install-php #TB_closeWindowButton:after, -body.import-php #TB_closeWindowButton:after, -body.plugins-php #TB_closeWindowButton:after, -body.update-core-php #TB_closeWindowButton:after, -body.index-php #TB_closeWindowButton:after { +.plugin-details-modal #TB_closeWindowButton:after { content: "\f335"; font: normal 32px/29px 'dashicons'; speak: none; @@ -2993,12 +2930,7 @@ body.index-php #TB_closeWindowButton:after { /* move plugin install close icon to top on narrow screens */ @media screen and ( max-width: 830px ) { - body.about-php #TB_closeWindowButton, - body.plugin-install-php #TB_closeWindowButton, - body.import-php #TB_closeWindowButton, - body.plugins-php #TB_closeWindowButton, - body.update-core-php #TB_closeWindowButton, - body.index-php #TB_closeWindowButton { + .plugin-details-modal #TB_closeWindowButton { right: 0; top: -30px; } diff --git a/src/wp-admin/js/plugin-install.js b/src/wp-admin/js/plugin-install.js index 71b0e705ec..9fa218fe34 100644 --- a/src/wp-admin/js/plugin-install.js +++ b/src/wp-admin/js/plugin-install.js @@ -7,11 +7,11 @@ var tb_position; jQuery( document ).ready( function( $ ) { var tbWindow, - $focusedBefore, $iframeBody, $tabbables, $firstTabbable, $lastTabbable, + $focusedBefore = $(), $uploadViewToggle = $( '.upload-view-toggle' ), $wrap = $ ( '.wrap' ), $body = $( document.body ); @@ -58,6 +58,16 @@ jQuery( document ).ready( function( $ ) { */ $body .on( 'thickbox:iframe:loaded', tbWindow, function() { + /* + * Return if it's not the modal with the plugin details iframe. Other + * thickbox instances might want to load an iframe with content from + * an external domain. Avoid to access the iframe contents when we're + * not sure the iframe loads from the same domain. + */ + if ( ! tbWindow.hasClass( 'plugin-details-modal' ) ) { + return; + } + iframeLoaded(); }) .on( 'thickbox:removed', function() { @@ -149,11 +159,13 @@ jQuery( document ).ready( function( $ ) { tb_click.call(this); - // Set ARIA role and ARIA label. - tbWindow.attr({ - 'role': 'dialog', - 'aria-label': plugininstallL10n.plugin_modal_label - }); + // Set ARIA role, ARIA label, and add a CSS class. + tbWindow + .attr({ + 'role': 'dialog', + 'aria-label': plugininstallL10n.plugin_modal_label + }) + .addClass( 'plugin-details-modal' ); // Set title attribute on the iframe. tbWindow.find( '#TB_iframeContent' ).attr( 'title', title ); diff --git a/src/wp-includes/js/thickbox/thickbox.css b/src/wp-includes/js/thickbox/thickbox.css index 3374f68569..f27abdb473 100644 --- a/src/wp-includes/js/thickbox/thickbox.css +++ b/src/wp-includes/js/thickbox/thickbox.css @@ -94,7 +94,7 @@ #TB_load { position: fixed; display: none; - z-index: 103; + z-index: 100050; top: 50%; left: 50%; background-color: #E8E8E8;