Feature: Support more languages in source view.

Open Beginner friendly
  • Is something wrong?
#6,436 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
75/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
cpp, javascript, rust, typescript
Domain
frontend

Research direction

The language choice lives in src/components/shared/SourceView-codemirror.ts, where the switch hardcodes JavaScript, Rust and C++ (lines 49-79 at the linked commit). Read that switch, then check how CodeMirror's LanguageDescription.matchFilename could be called from the file name before the JavaScript fallback. Done when a source file with another extension, such as .py, gets syntax highlighting while the existing JS, Rust and C++ cases still work.

Written by the indexing model from the issue text.

Description

Since processed profile json version 64 its possible to include source code of various languages in the profile json. It would be far nicer if this source code was able to be syntax highlighted, at least for all languages supported by CodeMirror.

The current syntax highlighting switch hardcodes js, rust, and cpp:
https://github.com/firefox-devtools/profiler/blob/f3c1c766e85154725ed7c1c4ecdf7d4aa9136892/src/components/shared/SourceView-codemirror.ts#L49-L79

Codemirror supports filename matching across all its built in languages: https://codemirror.net/docs/ref/#language.LanguageDescription^matchFilename

I think, mostly the task would be to actually call this before falling back to javascript.

Image

The profile for screenshot:
ffprofile.json

┆Issue is synchronized with this Jira Task

Dominant language
TypeScript
Stars
1.5k
Forks
498
Avg merge
1d 20h
Merged PRs (30d)
39

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from firefox-devtools/profiler

All issues in firefox-devtools/profiler

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.