Customizer info section:

* Only show the theme info when doing a live preview of another theme.
* Replace with helper text about what you are customizing and what the Customizer is for.
* Fix focus styling.

props celloexpressions, westonruter. fixes #28550.

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


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

wp-admin/css/customize-controls-rtl.css

@@ -50,22 +50,12 @@ body {
 	border-bottom: 1px solid #eeeeee;
 }
 
-#customize-info.open .accordion-section-title,
-#customize-info .accordion-section-title:hover,
-#customize-info .accordion-section-title:focus {
-	color: #555555;
-}
-
 #customize-info.open .accordion-section-title:after,
 #customize-info .accordion-section-title:hover:after,
 #customize-info .accordion-section-title:focus:after {
 	color: #555555;
 }
 
-#customize-info.open .accordion-section-title {
-	border-color: transparent;
-}
-
 #customize-info .preview-notice {
 	font-size: 13px;
 	line-height: 24px;
@@ -103,6 +93,9 @@ body {
 	background: white;
 }
 
+#customize-info.open .accordion-section-title,
+#customize-info .accordion-section-title:hover,
+#customize-info .accordion-section-title:focus,
 #customize-theme-controls .control-section:hover > .accordion-section-title,
 #customize-theme-controls .control-section .accordion-section-title:hover,
 #customize-theme-controls .control-section.open .accordion-section-title,
@@ -125,6 +118,7 @@ body {
 	color: #555555;
 }
 
+#customize-info.open,
 #customize-theme-controls .control-section.open {
 	border-bottom: 1px solid #eeeeee;
 }

wp-admin/css/customize-controls.css

@@ -50,22 +50,12 @@ body {
 	border-bottom: 1px solid #eeeeee;
 }
 
-#customize-info.open .accordion-section-title,
-#customize-info .accordion-section-title:hover,
-#customize-info .accordion-section-title:focus {
-	color: #555555;
-}
-
 #customize-info.open .accordion-section-title:after,
 #customize-info .accordion-section-title:hover:after,
 #customize-info .accordion-section-title:focus:after {
 	color: #555555;
 }
 
-#customize-info.open .accordion-section-title {
-	border-color: transparent;
-}
-
 #customize-info .preview-notice {
 	font-size: 13px;
 	line-height: 24px;
@@ -103,6 +93,9 @@ body {
 	background: white;
 }
 
+#customize-info.open .accordion-section-title,
+#customize-info .accordion-section-title:hover,
+#customize-info .accordion-section-title:focus,
 #customize-theme-controls .control-section:hover > .accordion-section-title,
 #customize-theme-controls .control-section .accordion-section-title:hover,
 #customize-theme-controls .control-section.open .accordion-section-title,
@@ -125,6 +118,7 @@ body {
 	color: #555555;
 }
 
+#customize-info.open,
 #customize-theme-controls .control-section.open {
 	border-bottom: 1px solid #eeeeee;
 }

wp-admin/customize.php

@@ -119,7 +119,7 @@ do_action( 'customize_controls_print_scripts' );
 
 		<?php
 			$screenshot = $wp_customize->theme()->get_screenshot();
-			$cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') );
+			$cannot_expand = ! ( $wp_customize->is_theme_active() || $screenshot || $wp_customize->theme()->get('Description') );
 		?>
 
 		<div id="widgets-right"><!-- For Widget Customizer, many widgets try to look for instances under div#widgets-right, so we have to add that ID to a container div in the customizer for compat -->
@@ -127,19 +127,28 @@ do_action( 'customize_controls_print_scripts' );
 			<div id="customize-info" class="accordion-section <?php if ( $cannot_expand ) echo ' cannot-expand'; ?>">
 				<div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Theme Customizer Options' ); ?>" tabindex="0">
 					<span class="preview-notice"><?php
+						if ( ! $wp_customize->is_theme_active() ) {
 							/* translators: %s is the theme name in the Customize/Live Preview pane */
 							echo sprintf( __( 'You are previewing %s' ), '<strong class="theme-name">' . $wp_customize->theme()->display('Name') . '</strong>' );
+						} else {
+							/* translators: %s is the site title in the Customize pane */
+							echo sprintf( __( 'You are customizing %s' ), '<strong class="theme-name site-title">' . get_bloginfo( 'name' ) . '</strong>' );
+						}
 					?></span>
 				</div>
 				<?php if ( ! $cannot_expand ) : ?>
 				<div class="accordion-section-content">
-					<?php if ( $screenshot ) : ?>
+					<?php if ( ! $wp_customize->is_theme_active() ) :
+						if ( $screenshot ) : ?>
 							<img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
 						<?php endif; ?>
 
 						<?php if ( $wp_customize->theme()->get('Description') ): ?>
 							<div class="theme-description"><?php echo $wp_customize->theme()->display('Description'); ?></div>
-					<?php endif; ?>
+						<?php endif;
+					else:
+						echo __( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );
+					endif; ?>
 				</div>
 				<?php endif; ?>
 			</div>

wp-admin/js/customize-controls.js

@@ -916,6 +916,7 @@
 		var previewer, parent, topFocus,
 			body = $( document.body ),
 			overlay = body.children( '.wp-full-overlay' ),
+			title = $( '#customize-info .theme-name.site-title' ),
 			closeBtn = $( '.customize-controls-close' ),
 			saveBtn = $( '#save' );
 
@@ -1112,6 +1113,13 @@
 			event.preventDefault();
 		});
 
+		// Bind site title display to the corresponding field.
+		if ( title.length ) {
+			$( '#customize-control-blogname input' ).on( 'input', function() {
+				title.text(  this.value );
+			} );
+		}
+
 		// Create a potential postMessage connection with the parent frame.
 		parent = new api.Messenger({
 			url: api.settings.url.parent,