Bug 1577268 - Add vue extension to list of javascript mode extensions r=jlast

Differential Revision: https://phabricator.services.mozilla.com/D43981

--HG--
extra : moz-landing-system : lando

devtools/client/debugger/src/utils/source.js

@@ -42,25 +42,7 @@ export const sourceTypes = {
   vue: "vue",
 };
 
-/**
- * Trims the query part or reference identifier of a url string, if necessary.
- *
- * @memberof utils/source
- * @static
- */
-function trimUrlQuery(url: string): string {
-  const length = url.length;
-  const q1 = url.indexOf("?");
-  const q2 = url.indexOf("&");
-  const q3 = url.indexOf("#");
-  const q = Math.min(
-    q1 != -1 ? q1 : length,
-    q2 != -1 ? q2 : length,
-    q3 != -1 ? q3 : length
-  );
-
-  return url.slice(0, q);
-}
+const javascriptLikeExtensions = ["marko", "es6", "vue", "jsm"];
 
 export function shouldBlackbox(source: ?Source) {
   if (!source) {
@@ -89,10 +71,10 @@ export function shouldBlackbox(source: ?Source) {
  * @static
  */
 export function isJavaScript(source: Source, content: SourceContent): boolean {
-  const url = source.url;
+  const extension = getFileExtension(source).toLowerCase();
   const contentType = content.type === "wasm" ? null : content.contentType;
   return (
-    (url && /\.(jsm|js)?$/.test(trimUrlQuery(url))) ||
+    javascriptLikeExtensions.includes(extension) ||
     !!(contentType && contentType.includes("javascript"))
   );
 }
@@ -310,7 +292,7 @@ export function getMode(
   content: SourceContent,
   symbols?: Symbols
 ): { name: string, base?: Object } {
-  const { url } = source;
+  const extension = getFileExtension(source);
 
   if (content.type !== "text") {
     return { name: "text" };
@@ -318,7 +300,7 @@ export function getMode(
 
   const { contentType, value: text } = content;
 
-  if ((url && url.match(/\.jsx$/i)) || (symbols && symbols.hasJsx)) {
+  if (extension === "jsx" || (symbols && symbols.hasJsx)) {
     if (symbols && symbols.hasTypes) {
       return { name: "text/typescript-jsx" };
     }
@@ -334,26 +316,23 @@ export function getMode(
   }
 
   const languageMimeMap = [
-    { ext: ".c", mode: "text/x-csrc" },
-    { ext: ".kt", mode: "text/x-kotlin" },
-    { ext: ".cpp", mode: "text/x-c++src" },
-    { ext: ".m", mode: "text/x-objectivec" },
-    { ext: ".rs", mode: "text/x-rustsrc" },
-    { ext: ".hx", mode: "text/x-haxe" },
+    { ext: "c", mode: "text/x-csrc" },
+    { ext: "kt", mode: "text/x-kotlin" },
+    { ext: "cpp", mode: "text/x-c++src" },
+    { ext: "m", mode: "text/x-objectivec" },
+    { ext: "rs", mode: "text/x-rustsrc" },
+    { ext: "hx", mode: "text/x-haxe" },
   ];
 
   // check for C and other non JS languages
-  if (url) {
-    const result = languageMimeMap.find(({ ext }) => url.endsWith(ext));
-
-    if (result !== undefined) {
-      return { name: result.mode };
-    }
+  const result = languageMimeMap.find(({ ext }) => extension === ext);
+  if (result !== undefined) {
+    return { name: result.mode };
   }
 
-  // if the url ends with .marko or .es6 we set the name to Javascript so
-  // syntax highlighting works for these file extensions too
-  if (url && url.match(/\.marko|\.es6$/i)) {
+  // if the url ends with a known Javascript-like URL, provide JavaScript mode.
+  // uses the first part of the URL to ignore query string
+  if (javascriptLikeExtensions.find(ext => ext === extension)) {
     return { name: "javascript" };
   }
 

devtools/client/debugger/src/utils/tests/source.spec.js

@@ -470,6 +470,16 @@ describe("sources", () => {
       );
       expect(getMode(source, source.content)).toEqual({ name: "javascript" });
     });
+
+    it("vue", () => {
+      const source = makeMockSourceAndContent(
+        "http://localhost.com:7999/increment/sometestfile.vue?query=string",
+        undefined,
+        "does not matter",
+        "function foo(){}"
+      );
+      expect(getMode(source, source.content)).toEqual({ name: "javascript" });
+    });
   });
 
   describe("getSourceLineCount", () => {