DevTools: Use JSX/TSX over standard JS/TS modes

We currently use the mime-type determine into which mode to put
CodeMirror. For the most part this is fine, save for JSX/TSX projects
where the files are saved with .js/.ts files suffixes. Typically this
causes the non-x mime-type to be chosen, which in turn puts CodeMirror
into the wrong mode. Since JSX/TSX are supersets of the non-x versions
this CL simply pushes the mode over to the respective superset.

Bug: 659515
Change-Id: I186d976a6a1ac991a296f92a22c8a0b3e83743c5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1800748
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Jeff Fisher <jeffish@microsoft.com>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#697180}

third_party/blink/renderer/devtools/front_end/source_frame/SourceFrame.js

@@ -415,8 +415,13 @@ SourceFrame.SourceFrame = class extends UI.SimpleView {
   _simplifyMimeType(content, mimeType) {
     if (!mimeType)
       return '';
+    // There are plenty of instances where TSX/JSX files are served with out the trailing x, i.e. JSX with a 'js' suffix
+    // which breaks the formatting. Therefore, if the mime type is TypeScript or JavaScript, we switch to the TSX/JSX
+    // superset so that we don't break formatting.
+    if (mimeType.indexOf('typescript') >= 0)
+      return 'text/typescript-jsx';
     if (mimeType.indexOf('javascript') >= 0 || mimeType.indexOf('jscript') >= 0 || mimeType.indexOf('ecmascript') >= 0)
-      return 'text/javascript';
+      return 'text/jsx';
     // A hack around the fact that files with "php" extension might be either standalone or html embedded php scripts.
     if (mimeType === 'text/x-php' && content.match(/\<\?.*\?\>/g))
       return 'application/x-httpd-php';

third_party/blink/renderer/devtools/front_end/sources_test_runner/module.json

@@ -5,6 +5,7 @@
     "workspace",
     "source_frame",
     "text_utils",
+    "cm_modes",
     "browser_debugger"
   ],
   "scripts": [

third_party/blink/web_tests/http/tests/devtools/persistence/persistence-mimetype-on-rename-expected.txt

@@ -2,7 +2,7 @@ Verify that text editor's mimeType gets changed as UISourceCode gets renamed.
 
 
 Running: Open foo.js editor
-Text editor mimeType: text/javascript
+Text editor mimeType: text/jsx
 
 Running: Rename foo.js => foo.css
 Text editor mimeType: text/css