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.

Developed in WordPress#9628.

Props jonsurrell, swissspidy, alshakero, westonruter.
Fixes #63887.


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

Author: sirreal

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

@@ -222,6 +222,11 @@ public function print_extra_script( $handle, $display = true ) {
 			return;
 		}
 
+		$output .= sprintf(
+			"\n//# sourceURL=inline:%s",
+			rawurlencode( "{$handle}-js-extra" )
+		);
+
 		if ( ! $display ) {
 			return $output;
 		}
@@ -521,6 +526,11 @@ public function get_inline_script_data( $handle, $position = 'after' ) {
 			return '';
 		}
 
+		$data[] = sprintf(
+			'//# sourceURL=inline:%s',
+			rawurlencode( "{$handle}-js-{$position}" )
+		);
+
 		return trim( implode( "\n", $data ), "\n" );
 	}
 

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

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

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=inline:wp-api-fetch-js-after
 </script>
 
 HTML;