Improve sourcemap validator console report (#9131)

The report printed to the console for invalid source map samples has
been improved in a few ways:

* The entire message is now printed using `console.error`, so the
contents aren't split between STDERR and STDOUT
* The code fence is now guaranteed to be a set length, rather than it
varying depending on the filename
* The code fence is no longer padded on the inside with newlines, which
results in a more compact output that is (in my opinion) just as
readable.

development/sourcemap-validator.js

@@ -99,10 +99,7 @@ async function validateSourcemapForFile ({ buildName }) {
       const isMaybeValid = portion.includes(targetString)
       if (!isMaybeValid) {
         valid = false
-        console.error('Sourcemap seems invalid:')
+        console.error(`Sourcemap seems invalid:\n${getFencedCode(result.source, line)}`)
-        console.log(`\n========================== ${result.source} ====================================\n`)
-        console.log(line)
-        console.log(`\n==============================================================================\n`)
       }
     })
   })
@@ -110,6 +107,20 @@ async function validateSourcemapForFile ({ buildName }) {
   return valid
 }
 
+const CODE_FENCE_LENGTH = 80
+const TITLE_PADDING_LENGTH = 1
+
+function getFencedCode (filename, code) {
+  const title = `${' '.repeat(TITLE_PADDING_LENGTH)}${filename}${' '.repeat(TITLE_PADDING_LENGTH)}`
+  const openingFenceLength = Math.max(CODE_FENCE_LENGTH - (filename.length + (TITLE_PADDING_LENGTH * 2)), 0)
+  const startOpeningFenceLength = Math.floor(openingFenceLength / 2)
+  const endOpeningFenceLength = Math.ceil(openingFenceLength / 2)
+  const openingFence = `${'='.repeat(startOpeningFenceLength)}${title}${'='.repeat(endOpeningFenceLength)}`
+  const closingFence = '='.repeat(CODE_FENCE_LENGTH)
+
+  return `${openingFence}\n${code}\n${closingFence}\n`
+}
+
 function indicesOf (substring, string) {
   const a = []
   let i = -1