Customize: Allow tab characters in custom CSS input.

Pressing `Esc` followed by `Tab` allows for tabbing to the next element.

Props afercia, coffee2code, westonruter.
See #35395.
Fixes #38667.

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


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

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

@@ -1129,6 +1129,10 @@ p.customize-section-description {
 	margin-right: 10px;
 	margin-left: 10px;
 }
+#customize-theme-controls #sub-accordion-section-custom_css textarea {
+	-moz-tab-size: 4;
+	tab-size: 4;
+}
 
 #sub-accordion-section-custom_css .customize-control-notifications-container {
 	margin-bottom: 15px;

wp-admin/css/customize-controls.css

@@ -1129,6 +1129,10 @@ p.customize-section-description {
 	margin-left: 10px;
 	margin-right: 10px;
 }
+#customize-theme-controls #sub-accordion-section-custom_css textarea {
+	-moz-tab-size: 4;
+	tab-size: 4;
+}
 
 #sub-accordion-section-custom_css .customize-control-notifications-container {
 	margin-bottom: 15px;

wp-admin/js/customize-controls.js

@@ -5234,6 +5234,53 @@
 			});
 		});
 
+		// Allow tabs to be entered in Custom CSS textarea.
+		api.control( 'custom_css', function setupCustomCssControl( control ) {
+			control.deferred.embedded.done( function allowTabs() {
+				var $textarea = control.container.find( 'textarea' ), textarea = $textarea[0];
+
+				$textarea.on( 'blur', function onBlur() {
+					$textarea.data( 'next-tab-blurs', false );
+				} );
+
+				$textarea.on( 'keydown', function onKeydown( event ) {
+					var selectionStart, selectionEnd, value, scroll, tabKeyCode = 9, escKeyCode = 27;
+
+					if ( escKeyCode === event.keyCode ) {
+						if ( ! $textarea.data( 'next-tab-blurs' ) ) {
+							$textarea.data( 'next-tab-blurs', true );
+							event.stopPropagation(); // Prevent collapsing the section.
+						}
+						return;
+					}
+
+					// Short-circuit if tab key is not being pressed or if a modifier key *is* being pressed.
+					if ( tabKeyCode !== event.keyCode || event.ctrlKey || event.altKey || event.shiftKey ) {
+						return;
+					}
+
+					// Prevent capturing Tab characters if Esc was pressed.
+					if ( $textarea.data( 'next-tab-blurs' ) ) {
+						return;
+					}
+
+					selectionStart = textarea.selectionStart;
+					selectionEnd = textarea.selectionEnd;
+					value = textarea.value;
+
+					if ( selectionStart >= 0 ) {
+						scroll = $textarea.scrollTop;
+						textarea.value = value.substring( 0, selectionStart ).concat( '\t', value.substring( selectionEnd ) );
+						$textarea.selectionStart = textarea.selectionEnd = selectionStart + 1;
+						textarea.scrollTop = scroll;
+					}
+
+					event.stopPropagation();
+					event.preventDefault();
+				} );
+			} );
+		} );
+
 		// Update the setting validities.
 		api.previewer.bind( 'selective-refresh-setting-validities', function handleSelectiveRefreshedSettingValidities( settingValidities ) {
 			api._handleSettingValidities( {