Script Loader: Add sourceURL to inline scripts and styles.

Improve the source locations referenced by developer tooling in supporting browsers. Inline source locations are named like inline:handle-js-after and appear in the developer tools "sources" panel.

This is the second attempt to add sourceURL comments. The first attempt in [60685] was reverted due to an issue with script concatenation that has been addressed.

Developed in #9672.

Follow-up to [60685], [60690].

Props jonsurrell, westonruter, wildworks, peterwilsoncc, johnbillion, tobiasbg.
Fixes #63887.


git-svn-id: https://develop.svn.wordpress.org/trunk@60719 602fd350-edb4-49c9-b593-d223f7449a82

Author: sirreal

src/wp-includes/class-wp-scripts.php

@@ -222,6 +222,20 @@ public function print_extra_script( $handle, $display = true ) {
 			return;
 		}
 
+		/*
+		 * Do not print a sourceURL comment if concatenation is enabled.
+		 *
+		 * Extra scripts may be concatenated into a single script.
+		 * The line-based sourceURL comments may a concatenated script and
+		 * do not make sense when multiple are joined together.
+		 */
+		if ( ! $this->do_concat ) {
+			$output .= sprintf(
+				"\n//# sourceURL=%s",
+				rawurlencode( "{$handle}-js-extra" )
+			);
+		}
+
 		if ( ! $display ) {
 			return $output;
 		}
@@ -524,6 +538,17 @@ public function get_inline_script_data( $handle, $position = 'after' ) {
 			return '';
 		}
 
+		/*
+		 * Print sourceURL comment regardless of concatenation.
+		 *
+		 * Inline scripts prevent scripts from being concatenated, so
+		 * sourceURL comments are safe to print for inline scripts.
+		 */
+		$data[] = sprintf(
+			'//# sourceURL=%s',
+			rawurlencode( "{$handle}-js-{$position}" )
+		);
+
 		return trim( implode( "\n", $data ), "\n" );
 	}
 
@@ -696,12 +721,15 @@ public function print_translations( $handle, $display = true ) {
 			return false;
 		}
 
+		$source_url = rawurlencode( "{$handle}-js-translations" );
+
 		$output = <<<JS
 ( function( domain, translations ) {
 	var localeData = translations.locale_data[ domain ] || translations.locale_data.messages;
 	localeData[""].domain = domain;
 	wp.i18n.setLocaleData( localeData, domain );
 } )( "{$domain}", {$json_translations} );
+//# sourceURL={$source_url}
 JS;
 
 		if ( $display ) {

src/wp-includes/class-wp-styles.php

@@ -337,6 +337,13 @@ public function print_inline_style( $handle, $display = true ) {
 			return false;
 		}
 
+		if ( ! $this->do_concat ) {
+			$output[] = sprintf(
+				'/*# sourceURL=%s */',
+				rawurlencode( "{$handle}-inline-css" )
+			);
+		}
+
 		$output = implode( "\n", $output );
 
 		if ( ! $display ) {

src/wp-includes/script-loader.php

@@ -2212,6 +2212,7 @@ function _print_scripts() {
 			echo "\n<script{$type_attr}>\n";
 			echo "/* <![CDATA[ */\n"; // Not needed in HTML 5.
 			echo $wp_scripts->print_code;
+			echo sprintf( "\n//# sourceURL=%s\n", rawurlencode( 'js-inline-concat-' . $concat ) );
 			echo "/* ]]> */\n";
 			echo "</script>\n";
 		}
@@ -2394,8 +2395,9 @@ function _print_styles() {
 		$dir = $wp_styles->text_direction;
 		$ver = $wp_styles->default_version;
 
-		$concat       = str_split( $concat, 128 );
-		$concatenated = '';
+		$concat_source_url = 'css-inline-concat-' . $concat;
+		$concat            = str_split( $concat, 128 );
+		$concatenated      = '';
 
 		foreach ( $concat as $key => $chunk ) {
 			$concatenated .= "&load%5Bchunk_{$key}%5D={$chunk}";
@@ -2407,6 +2409,7 @@ function _print_styles() {
 		if ( ! empty( $wp_styles->print_code ) ) {
 			echo "<style{$type_attr}>\n";
 			echo $wp_styles->print_code;
+			echo sprintf( "\n/*# sourceURL=%s */", rawurlencode( $concat_source_url ) );
 			echo "\n</style>\n";
 		}
 	}

tests/phpunit/tests/blocks/editor.php

@@ -762,6 +762,7 @@ public function test_ensure_preload_data_script_tag_closes() {
 <script src="{$baseurl}/wp-includes/js/dist/api-fetch.min.js?ver=test" id="wp-api-fetch-js"></script>
 <script id="wp-api-fetch-js-after">
 wp.apiFetch.use( wp.apiFetch.createPreloadingMiddleware( {"/test/v0/test-62797":{"body":["Unclosed comment and a script open tag \\u003C!--\\u003Cscript\\u003E"],"headers":{"Allow":"GET"}}} ) );
+//# sourceURL=wp-api-fetch-js-after
 </script>
 
 HTML;