Run prettier independently from eslint

.circleci/config.yml

@@ -13,7 +13,7 @@ orbs:
 
 commands:
   checkout-and-dependencies:
-    description: "Checkout and install dependencies, managing a cache"
+    description: 'Checkout and install dependencies, managing a cache'
     steps:
       - checkout
       - restore_cache:
@@ -96,7 +96,7 @@ jobs:
     steps:
       - add_ssh_keys:
           fingerprints:
-            - "92:e1:5d:84:70:96:c5:19:76:55:1c:b1:7a:12:9e:53"
+            - '92:e1:5d:84:70:96:c5:19:76:55:1c:b1:7a:12:9e:53'
       - checkout
       - run: git config user.email "perf-html@mozilla.com"
       - run: git config user.name "Firefox Profiler [bot]"
@@ -118,8 +118,8 @@ workflows:
   l10n-sync:
     triggers:
       - schedule:
-        # CircleCI is using UTC timezone. So, this will be triggered at 8 AM UTC every day.
-          cron: "0 8 * * *"
+          # CircleCI is using UTC timezone. So, this will be triggered at 8 AM UTC every day.
+          cron: '0 8 * * *'
           filters:
             branches:
               only:

.eslintrc.js

@@ -7,14 +7,12 @@ module.exports = {
     node: true,
   },
   parser: '@babel/eslint-parser',
-  plugins: ['@babel', 'react', 'flowtype', 'import', 'prettier'],
+  plugins: ['@babel', 'react', 'flowtype', 'import'],
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
     'plugin:flowtype/recommended',
-    // This works with the prettier plugin, this needs to be at the end always.
-    // Replace it with the "prettier" config if we remove the plugin.
-    'plugin:prettier/recommended',
+    'prettier',
   ],
   parserOptions: {
     ecmaVersion: '2017',

.gitpod.yml

@@ -1,8 +1,8 @@
 ports:
-- port: 4242
+  - port: 4242
 tasks:
-- before: nvm install 18
-  init: yarn install
-  command: FX_PROFILER_HOST="0.0.0.0" yarn start
-- openMode: split-right
-  command: printf "\nFirefox Profiler ❤ Gitpod\nWelcome to this virtual environment.\nYou can type your commands in this terminal.\n\n"
+  - before: nvm install 18
+    init: yarn install
+    command: FX_PROFILER_HOST="0.0.0.0" yarn start
+  - openMode: split-right
+    command: printf "\nFirefox Profiler ❤ Gitpod\nWelcome to this virtual environment.\nYou can type your commands in this terminal.\n\n"

.prettierignore

@@ -0,0 +1,5 @@
+src/types/libdef/npm
+docs-user
+src/test/fixtures/
+res/zee-worker.js
+dist

.prettierrc.js

@@ -1,5 +1,4 @@
 module.exports = {
   singleQuote: true,
   trailingComma: 'es5',
-  parser: "babel-flow",
 };

.stylelintrc

@@ -1,22 +1,12 @@
 {
-  "plugins": [
-    "stylelint-prettier"
-  ],
-  "extends": [
-    "stylelint-config-standard",
-    "stylelint-config-idiomatic-order",
-  ],
+  "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"],
   "rules": {
-    "prettier/prettier": [
-      true,
-      { "parser": "css" }
-    ],
     "alpha-value-notation": null,
     "function-url-quotes": null,
     "keyframes-name-pattern": null,
     "length-zero-no-unit": null,
     "selector-class-pattern": null,
     "import-notation": null,
-    "media-feature-range-notation": "prefix",
+    "media-feature-range-notation": "prefix"
   }
 }

.vscode/launch.json

@@ -1,17 +1,17 @@
 {
-    "version": "0.2.0",
-    "configurations": [
-        // Run the current file with Jest. Only works if the current tab is a test file.
-        {
-            "name": "Run Jest",
-            "type": "node",
-            "program": "${workspaceFolder}/node_modules/jest/bin/jest",
-            "args": ["--runInBand", "${file}"],
-            "cwd": "${workspaceFolder}",
-            "internalConsoleOptions": "openOnSessionStart",
-            "request": "launch",
-            "outputCapture": "std",
-            "skipFiles": ["<node_internals>/**"],
-        },
-    ]
-}
+  "version": "0.2.0",
+  "configurations": [
+    // Run the current file with Jest. Only works if the current tab is a test file.
+    {
+      "name": "Run Jest",
+      "type": "node",
+      "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+      "args": ["--runInBand", "${file}"],
+      "cwd": "${workspaceFolder}",
+      "internalConsoleOptions": "openOnSessionStart",
+      "request": "launch",
+      "outputCapture": "std",
+      "skipFiles": ["<node_internals>/**"]
+    }
+  ]
+}

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
-    // Bypass check for node_modules/flow-bin/SHASUM256.txt.sign since it
-    // doesn't exist in flow-bin 0.96.0.
-    "flow.useNPMPackagedFlow": false,
-    "flow.pathToFlow": "${workspaceFolder}/node_modules/.bin/flow",
+  // Bypass check for node_modules/flow-bin/SHASUM256.txt.sign since it
+  // doesn't exist in flow-bin 0.96.0.
+  "flow.useNPMPackagedFlow": false,
+  "flow.pathToFlow": "${workspaceFolder}/node_modules/.bin/flow"
 }

CODE_OF_CONDUCT.md

@@ -1,10 +1,11 @@
 ## Mozilla Community Participation Guidelines
 
-This repository is governed by Mozilla's code of conduct and etiquette guidelines. 
+This repository is governed by Mozilla's code of conduct and etiquette guidelines.
 For more details, please read the
-[Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 
+[Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/).
 
 ## How to Report
+
 For more information on how to report violations of the CPG, please read our '[How to Report](https://www.mozilla.org/en-US/about/governance/policies/participation/reporting/)' page.
 
 ## Project Specific Etiquette

CONTRIBUTING.md

@@ -6,22 +6,23 @@ First off, thanks for taking the time to contribute to Mozilla and the Firefox P
 
 This project is made up of a cross section of different parts of Mozilla, including people from Firefox DevTools and from Firefox's platform team who are working on the C++ and Rust internals of Firefox. Some core Mozillians on the team are:
 
-| - | Name | Github Handle | Position |
-| - | ---- | ------------- | -------- |
-| ![][julienw] | Julien Wajsberg | [@julienw](https://github.com/julienw) | Firefox Frontend Engineer |
-| ![][canova] | Nazim Can Altinova| [@canova](https://github.com/canova) | Firefox Platform and Frontend Engineer |
-| <img src="https://avatars.githubusercontent.com/mstange?size=56" width="56" height="56" /> | Markus Stange | [@mstange](https://github.com/mstange) | Firefox Platform Engineer |
-| ![][AdamHarries] | Adam Harries | [@AdamHarries](https://github.com/AdamHarries) | Firefox Platform Engineer |
-| ![][davehunt]| Dave Hunt | [@davehunt](https://github.com/davehunt) | Firefox Profiler Team Manager |
+| -                                                                                          | Name               | Github Handle                                  | Position                               |
+| ------------------------------------------------------------------------------------------ | ------------------ | ---------------------------------------------- | -------------------------------------- |
+| ![][julienw]                                                                               | Julien Wajsberg    | [@julienw](https://github.com/julienw)         | Firefox Frontend Engineer              |
+| ![][canova]                                                                                | Nazim Can Altinova | [@canova](https://github.com/canova)           | Firefox Platform and Frontend Engineer |
+| <img src="https://avatars.githubusercontent.com/mstange?size=56" width="56" height="56" /> | Markus Stange      | [@mstange](https://github.com/mstange)         | Firefox Platform Engineer              |
+| ![][AdamHarries]                                                                           | Adam Harries       | [@AdamHarries](https://github.com/AdamHarries) | Firefox Platform Engineer              |
+| ![][davehunt]                                                                              | Dave Hunt          | [@davehunt](https://github.com/davehunt)       | Firefox Profiler Team Manager          |
+
 <!-- mstange's image is differently inserted because its size isn't properly controlled by the size parameter, strangely -->
 
-[mstange]:https://avatars.githubusercontent.com/mstange?size=56
-[julienw]:https://avatars.githubusercontent.com/julienw?size=56
-[canova]:https://avatars.githubusercontent.com/canova?size=56
-[davehunt]:https://avatars.githubusercontent.com/davehunt?size=56
-[AdamHarries]:https://avatars.githubusercontent.com/AdamHarries?size=56
+[mstange]: https://avatars.githubusercontent.com/mstange?size=56
+[julienw]: https://avatars.githubusercontent.com/julienw?size=56
+[canova]: https://avatars.githubusercontent.com/canova?size=56
+[davehunt]: https://avatars.githubusercontent.com/davehunt?size=56
+[AdamHarries]: https://avatars.githubusercontent.com/AdamHarries?size=56
 
-We're friendly and we're on the [Mozilla Matrix instance](https://chat.mozilla.org/) in the [*Firefox Profiler* channel (*#profiler:mozilla.org*)](https://chat.mozilla.org/#/room/#profiler:mozilla.org). Come chat with us if you have any questions about the project.
+We're friendly and we're on the [Mozilla Matrix instance](https://chat.mozilla.org/) in the [_Firefox Profiler_ channel (_#profiler:mozilla.org_)](https://chat.mozilla.org/#/room/#profiler:mozilla.org). Come chat with us if you have any questions about the project.
 
 ## Getting started with development
 
@@ -33,12 +34,12 @@ You can install it using `npm install -g yarn`. Please refer to [its documentati
 
 To get started clone the repo and get the web application started.
 
- 1. Run `git clone git@github.com:firefox-devtools/profiler.git`
- 2. Run `cd profiler`
- 3. Run `yarn install`, this will install all of the dependencies.
- 4. Run `yarn start`, this will start up the webpack server.
- 5. Point your browser to [http://localhost:4242](http://localhost:4242).
- 6. If port `4242` is taken, then you can run the web app on a different port: `FX_PROFILER_PORT=1234 yarn start`
+1.  Run `git clone git@github.com:firefox-devtools/profiler.git`
+2.  Run `cd profiler`
+3.  Run `yarn install`, this will install all of the dependencies.
+4.  Run `yarn start`, this will start up the webpack server.
+5.  Point your browser to [http://localhost:4242](http://localhost:4242).
+6.  If port `4242` is taken, then you can run the web app on a different port: `FX_PROFILER_PORT=1234 yarn start`
 
 Other [webpack](https://webpack.js.org/configuration/) and [webpack server](https://webpack.js.org/configuration/dev-server/) options can be set in a `webpack.local-config.js` file at the repo root. For example, if you want to disable caching and the server to automatically open the home page, put in there the following code:
 
@@ -63,34 +64,36 @@ Gitpod will automatically install all dependencies; start the webpack server for
 
 The web app doesn't include any performance profiles by default, so you'll need to load some in. Make sure the local Webpack web server is running, and then try one of the following:
 
- #### 1. Record a profile: 
- - Open `about:config` in Firefox.
- - Change `devtools.performance.recording.ui-base-url` to `http://localhost:4242`. Or to the localhost with the proper port you have configured.
- - Ensure the profiler menu button is active by clicking the button on your local profiler deployment homepage, usually http://localhost:4242, to enable it.
- - Record a profile using the menu button, and it should open up in your local environment automatically.
+#### 1. Record a profile:
+
+- Open `about:config` in Firefox.
+- Change `devtools.performance.recording.ui-base-url` to `http://localhost:4242`. Or to the localhost with the proper port you have configured.
+- Ensure the profiler menu button is active by clicking the button on your local profiler deployment homepage, usually http://localhost:4242, to enable it.
+- Record a profile using the menu button, and it should open up in your local environment automatically.
 
- #### 2. Use an existing profile:
- - On the web, replace the https://profiler.firefox.com with your local server, usually `http://localhost:4242`. Be sure that that the protocol is `http` and not `https` when running the server locally.
- - Alternatively, if a profile has been previously downloaded, drag and drop it to the loading screen. Compared to the previous solution, refreshing won't work with this particular solution.
- - A third alternative on Linux is to run the provided [fp.sh](./bin/fp.sh) script, giving the profile file as the first argument. Both refreshing and symlinking to the script are supported.
+#### 2. Use an existing profile:
+
+- On the web, replace the https://profiler.firefox.com with your local server, usually `http://localhost:4242`. Be sure that that the protocol is `http` and not `https` when running the server locally.
+- Alternatively, if a profile has been previously downloaded, drag and drop it to the loading screen. Compared to the previous solution, refreshing won't work with this particular solution.
+- A third alternative on Linux is to run the provided [fp.sh](./bin/fp.sh) script, giving the profile file as the first argument. Both refreshing and symlinking to the script are supported.
 
 For more information on loading a profile, visit its [documentation](./docs-developer/loading-in-profiles.md).
 
 ## Running the tests
 
 When working on a new feature and code changes, it's important that things work correctly. We have a suite of automated tests and various automated checks to test that things are working the way we expect. These checks are run frequently, and will block certain parts of the process if they do not pass. The tests run:
 
- * Locally when running
-   - `yarn test-all` - Test all the things!
-   - `yarn test` - Run the tests in [`./src/test/`](./src/test/).
-   - `yarn lint` - Run prettier, stylelint, and eslint to check for correct code formatting.
-   - `yarn flow` - Check the [Flow types](https://flow.org/) for correctness.
-   - `yarn license-check` - Check the dependencies' licenses.
- * `git push` and `git commit`
-   - We have [husky](https://www.npmjs.com/package/husky) installed to run automated checks when committing and pushing.
-   - Run git commands with `--no-verify` to skip this step. This is useful for submitting broken PRs for feedback.
- * Continuous integration for pull requests
-   - We use CircleCI to run our tests for every PR that is submitted. This gives reviewers a great way to know if things are still working as expected.
+- Locally when running
+  - `yarn test-all` - Test all the things!
+  - `yarn test` - Run the tests in [`./src/test/`](./src/test/).
+  - `yarn lint` - Run prettier, stylelint, and eslint to check for correct code formatting.
+  - `yarn flow` - Check the [Flow types](https://flow.org/) for correctness.
+  - `yarn license-check` - Check the dependencies' licenses.
+- `git push` and `git commit`
+  - We have [husky](https://www.npmjs.com/package/husky) installed to run automated checks when committing and pushing.
+  - Run git commands with `--no-verify` to skip this step. This is useful for submitting broken PRs for feedback.
+- Continuous integration for pull requests
+  - We use CircleCI to run our tests for every PR that is submitted. This gives reviewers a great way to know if things are still working as expected.
 
 ### Updating snapshots
 
@@ -126,7 +129,6 @@ the team will answer and assign the issue to you. If you're commenting during
 week-ends be aware that our team is working mostly on week days,
 therefore please be patient :-)
 
-
 Feel free to [chat with us on Matrix](https://chat.mozilla.org/#/room/#profiler:mozilla.org)
 if you need help finding something you might be interested to work on or have any question.
 You'll need to login first, and possibly click on the link again to access our
@@ -147,7 +149,7 @@ For PRs to be accepted, they go through a review process. Generally there is a f
 ## Merging Pull Requests
 
 Pull Requests should be merged with either option `Create a merge commit` or
-`Squash and merge`, but __not__ with `Rebase and merge`.
+`Squash and merge`, but **not** with `Rebase and merge`.
 
 ### Create a merge commit
 

README.md

@@ -1,4 +1,5 @@
 # Firefox Profiler
+
 [![Matrix][matrix-badge]][matrix]
 
 The [Firefox Profiler] visualizes performance data recorded from web browsers. It is a tool designed to consume performance profiles from the Gecko Profiler but can visualize data from any profiler able to output in JSON. The interface is a web application built using [React] and [Redux] and runs entirely client-side.
@@ -50,18 +51,18 @@ Please look at our [gitpod documentation](./docs-user/gitpod.md) for more inform
 
 For more detailed information on getting started contributing. We have plenty of docs available to get you started.
 
-| | |
-| ---- | --- |
-|[Contributing](./CONTRIBUTING.md)| Find out in detail how to get started and get your local development environment configured. |
-|[Code of Conduct](./CODE_OF_CONDUCT.md)| We want to create an open and inclusive community, we have a few guidelines to help us out. |
-|[Developer Documentation](./docs-developer)| Want to know how this whole thing works? Get started here. |
-|[Source Files](./src)| Dive into the inner workings of the code. Most folders have a `README.md` providing more information. |
-|[End-User Documentation](https://profiler.firefox.com/docs/#/)| These docs are customized for actual users of the profiler, not just folks contributing. |
-|[Gitpod documentatation](./docs-user/gitpod.md)| Start here if you want to set up a work space on gitpod. |
+|                                                                |                                                                                                       |
+| -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| [Contributing](./CONTRIBUTING.md)                              | Find out in detail how to get started and get your local development environment configured.          |
+| [Code of Conduct](./CODE_OF_CONDUCT.md)                        | We want to create an open and inclusive community, we have a few guidelines to help us out.           |
+| [Developer Documentation](./docs-developer)                    | Want to know how this whole thing works? Get started here.                                            |
+| [Source Files](./src)                                          | Dive into the inner workings of the code. Most folders have a `README.md` providing more information. |
+| [End-User Documentation](https://profiler.firefox.com/docs/#/) | These docs are customized for actual users of the profiler, not just folks contributing.              |
+| [Gitpod documentatation](./docs-user/gitpod.md)                | Start here if you want to set up a work space on gitpod.                                              |
 
 ### Discussion
 
-Say hello on Matrix in the [*Firefox Profiler* channel (*#profiler:mozilla.org*)][matrix].
+Say hello on Matrix in the [_Firefox Profiler_ channel (_#profiler:mozilla.org_)][matrix].
 
 ### License
 
@@ -70,11 +71,13 @@ Say hello on Matrix in the [*Firefox Profiler* channel (*#profiler:mozilla.org*)
 We are very grateful to the the **zlib compression library (Jean-loup Gailly, Mark Adler and team)** for their contribution to the project.
 
 [matrix]: https://chat.mozilla.org/#/room/#profiler:mozilla.org
+
 <!-- chat.mozilla.org's "real" server is mozilla.modular.im. -->
+
 [matrix-badge]: https://img.shields.io/matrix/profiler:mozilla.org?server_fqdn=mozilla.modular.im&label=matrix
-[Firefox Profiler]:https://profiler.firefox.com/
-[React]:https://facebook.github.io/react/
-[Redux]:http://redux.js.org/
-[Mozilla]:https://www.mozilla.org/
-[Firefox]:https://www.mozilla.org/firefox/
+[Firefox Profiler]: https://profiler.firefox.com/
+[React]: https://facebook.github.io/react/
+[Redux]: http://redux.js.org/
+[Mozilla]: https://www.mozilla.org/
+[Firefox]: https://www.mozilla.org/firefox/
 [zlib]: http://www.zlib.net/

__mocks__/copy-to-clipboard.js

@@ -3,4 +3,4 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 // @flow
-module.exports = (jest.fn(): string => void);
+module.exports = (jest.fn(): (string) => void);

appveyor.yml

@@ -1,6 +1,6 @@
 clone_depth: 5
 environment:
-  nodejs_version: "18.16"
+  nodejs_version: '18.16'
 platform: x64 # flow needs 64b platforms
 
 branches: