Customize: Fix layout issues in panels and sections when resizing and autofocusing.

Also reverts [33157] which is no longer needed.

Props valendesigns, mattwiebe, westonruter, ocean90.
Fixes #33220.

Built from https://develop.svn.wordpress.org/trunk@33610


git-svn-id: http://core.svn.wordpress.org/trunk@33577 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-nav-menus-rtl.css

@@ -443,11 +443,6 @@
 .reordering .menu-item-depth-10 > .menu-item-bar { margin-left: 150px; }
 .reordering .menu-item-depth-11 > .menu-item-bar { margin-left: 165px; }
 
-/* Forces top margin to be zero for new menu */
-.control-section-nav_menu.open .menu {
-	margin-top: 0 !important;
-}
-
 .control-section-nav_menu .menu .menu-item-edit-active {
 	margin-right: 0;
 }

wp-admin/css/customize-nav-menus.css

@@ -443,11 +443,6 @@
 .reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; }
 .reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
 
-/* Forces top margin to be zero for new menu */
-.control-section-nav_menu.open .menu {
-	margin-top: 0 !important;
-}
-
 .control-section-nav_menu .menu .menu-item-edit-active {
 	margin-left: 0;
 }

wp-admin/js/customize-controls.js

@@ -68,8 +68,8 @@
 		params = params || {};
 		focus = function () {
 			var focusContainer;
-			if ( construct.extended( api.Panel ) && construct.expanded() ) {
-				focusContainer = construct.container.find( '.control-panel-content:first' );
+			if ( construct.expanded && construct.expanded() ) {
+				focusContainer = construct.container.find( 'ul:first' );
 			} else {
 				focusContainer = construct.container;
 			}
@@ -581,13 +581,14 @@
 		 * @param {Object}  args
 		 */
 		onChangeExpanded: function ( expanded, args ) {
-			var position, scroll, section = this,
+			var section = this,
 				container = section.container.closest( '.wp-full-overlay-sidebar-content' ),
 				content = section.container.find( '.accordion-section-content' ),
 				overlay = section.container.closest( '.wp-full-overlay' ),
 				backBtn = section.container.find( '.customize-section-back' ),
 				sectionTitle = section.container.find( '.accordion-section-title' ).first(),
-				expand;
+				headerActionsHeight = $( '#customize-header-actions' ).height(),
+				resizeContentHeight, expand, position, scroll;
 
 			if ( expanded && ! section.container.hasClass( 'open' ) ) {
 
@@ -595,7 +596,7 @@
 					expand = args.completeCallback;
 				} else {
 					container.scrollTop( 0 );
-					expand = function () {
+					resizeContentHeight = function() {
 						var matchMedia, offset;
 						matchMedia = window.matchMedia || window.msMatchMedia;
 						offset = 90; // 45px for customize header actions + 45px for footer actions.
@@ -604,19 +605,32 @@
 						if ( matchMedia && matchMedia( '(max-width: 640px)' ).matches ) {
 							offset = 45;
 						}
-
+						content.css( 'height', ( window.innerHeight - offset ) );
+					};
+					expand = function() {
 						section.container.addClass( 'open' );
 						overlay.addClass( 'section-open' );
 						position = content.offset().top;
 						scroll = container.scrollTop();
-						content.css( 'margin-top', ( 45 - position - scroll ) );
-						content.css( 'height', ( window.innerHeight - offset ) );
+						content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
+						resizeContentHeight();
 						sectionTitle.attr( 'tabindex', '-1' );
 						backBtn.attr( 'tabindex', '0' );
 						backBtn.focus();
 						if ( args.completeCallback ) {
 							args.completeCallback();
 						}
+
+						// Fix the height after browser resize.
+						$( window ).on( 'resize.customizer-section', _.debounce( resizeContentHeight, 100 ) );
+
+						// Fix the top margin after reflow.
+						api.bind( 'pane-contents-reflowed', _.debounce( function() {
+							var offset = ( content.offset().top - headerActionsHeight );
+							if ( 0 < offset ) {
+								content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - offset ) );
+							}
+						}, 100 ) );
 					};
 				}
 
@@ -640,7 +654,7 @@
 			} else if ( ! expanded && section.container.hasClass( 'open' ) ) {
 				section.container.removeClass( 'open' );
 				overlay.removeClass( 'section-open' );
-				content.css( 'margin-top', 'inherit' );
+				content.css( 'margin-top', '' );
 				container.scrollTop( 0 );
 				backBtn.attr( 'tabindex', '-1' );
 				sectionTitle.attr( 'tabindex', '0' );
@@ -648,6 +662,7 @@
 				if ( args.completeCallback ) {
 					args.completeCallback();
 				}
+				$( window ).off( 'resize.customizer-section' );
 			} else {
 				if ( args.completeCallback ) {
 					args.completeCallback();
@@ -1235,7 +1250,8 @@
 				topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
 				backBtn = section.find( '.customize-panel-back' ),
 				panelTitle = section.find( '.accordion-section-title' ).first(),
-				content = section.find( '.control-panel-content' );
+				content = section.find( '.control-panel-content' ),
+				headerActionsHeight = $( '#customize-header-actions' ).height();
 
 			if ( expanded ) {
 
@@ -1255,7 +1271,7 @@
 					content.parent().show();
 					position = content.offset().top;
 					scroll = container.scrollTop();
-					content.css( 'margin-top', ( $( '#customize-header-actions' ).height() - position - scroll ) );
+					content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
 					section.addClass( 'current-panel' );
 					overlay.addClass( 'in-sub-panel' );
 					container.scrollTop( 0 );
@@ -1266,6 +1282,11 @@
 				topPanel.attr( 'tabindex', '-1' );
 				backBtn.attr( 'tabindex', '0' );
 				backBtn.focus();
+
+				// Fix the top margin after reflow.
+				api.bind( 'pane-contents-reflowed', _.debounce( function() {
+					content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - ( content.offset().top - headerActionsHeight ) ) );
+				}, 100 ) );
 			} else {
 				siblings.removeClass( 'open' );
 				section.removeClass( 'current-panel' );
@@ -2603,7 +2624,11 @@
 				_( constructs ).each( function ( activeConstructs, type ) {
 					api[ type ].each( function ( construct, id ) {
 						var active = !! ( activeConstructs && activeConstructs[ id ] );
-						construct.active( active );
+						if ( active ) {
+							construct.activate();
+						} else {
+							construct.deactivate();
+						}
 					} );
 				} );
 			} );

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.3-RC2-33609';
+$wp_version = '4.3-RC2-33610';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.