Customize: Prevent the "Hide Controls" button label from overrunning the device preview buttons.

Adds translation context for "Hide Controls" strings so translators can supply shorter strings where space is constrained. Adds styles to fade-out long the "Hide Controls" label where it would run into the device preview buttons.

Props westonruter, ocean90.
Fixes #38762.

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


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

wp-admin/css/themes-rtl.css

@@ -1521,6 +1521,7 @@ body.full-overlay-active {
 	box-shadow: none !important;
 	-webkit-border-radius: 0 !important;
 	border-radius: 0 !important;
+	z-index: -1; /* Below device buttons */
 }
 
 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
@@ -1624,6 +1625,9 @@ body.full-overlay-active {
 
 .wp-full-overlay-footer .devices {
 	float: left;
+	background: #eee;
+	-webkit-box-shadow: 20px 0 10px -5px #eee;
+	box-shadow: 20px 0 10px -5px #eee;
 }
 
 .wp-full-overlay-footer .devices button {

wp-admin/css/themes.css

@@ -1521,6 +1521,7 @@ body.full-overlay-active {
 	box-shadow: none !important;
 	-webkit-border-radius: 0 !important;
 	border-radius: 0 !important;
+	z-index: -1; /* Below device buttons */
 }
 
 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
@@ -1624,6 +1625,9 @@ body.full-overlay-active {
 
 .wp-full-overlay-footer .devices {
 	float: right;
+	background: #eee;
+	-webkit-box-shadow: -20px 0 10px -5px #eee;
+	box-shadow: -20px 0 10px -5px #eee;
 }
 
 .wp-full-overlay-footer .devices button {

wp-admin/customize.php

@@ -191,9 +191,9 @@ do_action( 'customize_controls_print_scripts' );
 				<?php endforeach; ?>
 			</div>
 			<?php endif; ?>
-			<button type="button" class="collapse-sidebar button" aria-expanded="true" aria-label="<?php esc_attr_e( 'Hide Controls' ); ?>">
+			<button type="button" class="collapse-sidebar button" aria-expanded="true" aria-label="<?php echo esc_attr( _x( 'Hide Controls', 'label for hide controls button without length constraints' ) ); ?>">
 				<span class="collapse-sidebar-arrow"></span>
-				<span class="collapse-sidebar-label"><?php _e( 'Hide Controls' ); ?></span>
+				<span class="collapse-sidebar-label"><?php _ex( 'Hide Controls', 'short (~12 characters) label for hide controls button' ); ?></span>
 			</button>
 		</div>
 	</form>

wp-includes/script-loader.php

@@ -467,8 +467,8 @@ function wp_default_scripts( &$scripts ) {
 		'notAllowed'         => __( 'Sorry, you are not allowed to customize this site.' ),
 		'previewIframeTitle' => __( 'Site Preview' ),
 		'loginIframeTitle'   => __( 'Session expired' ),
-		'collapseSidebar'    => __( 'Hide Controls' ),
+		'collapseSidebar'    => _x( 'Hide Controls', 'label for hide controls button without length constraints' ),
-		'expandSidebar'      => __( 'Show Controls' ),
+		'expandSidebar'      => _x( 'Show Controls', 'label for hide controls button without length constraints' ),
 		'untitledBlogName'   => __( '(Untitled)' ),
 		// Used for overriding the file types allowed in plupload.
 		'allowedFiles'       => __( 'Allowed Files' ),

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.7-beta3-39213';
+$wp_version = '4.7-beta3-39214';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.