Deploy Jan 30, 2025 (#5348)

Updates:

[Julien Wajsberg] Some more small refactorings (#5320)
[Markus Stange] Pass the correct sample index offset to
getTimingsForCallNodeIndex for the flame graph tooltip. (#5328)
[Nisarg Jhaveri] Update docs to include Android Studio/Simpleperf trace
file support (#5309)
[Markus Stange] Don't pass the preview filtered thread to
getTimingsForPath/CallNodeIndex. (#5329)
[Nazım Can Altınova] Add a "Sample timestamp" field to the sample
tooltip in timeline (#5322)
[Markus Stange] Reduce confusion between call tree summary strategy
aware samples and regular samples (#5330)
[Markus Stange] Rename this getCounter selector to getCounters. (#5337)
[Markus Stange] Make sample indexes compatible between the unfiltered
and (preview) filtered call tree summary strategy samples when using an
allocation strat>
[Markus Stange] Remove some code that uses the preview filtered thread
(#5336)
[Markus Stange] Remove getMarkerSchemaName special cases - look up
marker schemas from data.type and nothing else (#5293)
[Markus Stange] Remove the makeProfileSerializable step - make the raw
in-memory profile match the format that's stored in the file (#5287)
[Nicolas Chevobbe] Adapt FilterNavigatorBar to High Contrast Mode.
(#5257)
[Nicolas Chevobbe] Adapt Tracks to High Contrast Mode. (#5252)
[Markus Stange] Adjust string index fields in markers when merging
threads (#5344)
[Theodoros Nikolaou] Localize title and aria label in ProfileName
(#5345)
[Julien Wajsberg] Adapt time-slice selection in High Contrast Mode.
(#5259)
[Markus Stange] Make stackTable (sub)category derived data (#5342)
[Markus Stange] Compute cpuRatio values when computing the derived
thread (#5288)
[Nazım Can Altınova] Add a context menu item to open the JS scripts in
DevTools debugger (#5295)

Also thanks to our localizers:

el: Jim Spentzos
fr: Théo Chevalier
it: Francesco Lodolo [:flod]
zh-TW: Pin-guang Chen

docs-developer/CHANGELOG-formats.md

@@ -6,14 +6,26 @@ Note that this is not an exhaustive list. Processed profile format upgraders can
 
 ## Processed profile format
 
+### Version 53
+
+The columns `category` and `subcategory` were removed from the `stackTable`, to reduce the file size of profiles. The information in these columns was fully redundant with the category information in the `frameTable`. A stack's category and subcategory are determined as follows: If the stack's frame has a non-null category, then that's the stack's category, and the frame's subcategory (or 0 if null) becomes the stack's subcategory. Otherwise, if the stack is not a root node, it inherits the category and subcategory of its prefix stack. Otherwise, it defaults to the defaultCategory, which is defined as the first category in `thread.meta.categories` whose color is `grey` - at least one such category is required to be present. And the subcategory defaults to zero - all categories are required to have a "default" subcategory as their first subcategory.
+
+The `frameTable`'s `category` column now becomes essential. It was already required in the previous profile version, but the UI would mostly work even if it wasn't present. There are some existing profiles in rotation which are missing this column in the `frameTable`. The 52->53 upgrader fixes such profiles up by inferring it from the information in the `stackTable`.
+
+### Version 52
+
+No format changes, but a front-end behavior change: The schema for a marker is now looked up purely based on its `data.type`. In the past there were some special cases when `data` was `null`, or when `data.type` was `tracing` or `Text`. These special cases have been removed. The new behavior is simpler and more predictable, and was probably what you expected anyway.
+
+This change came with a new version because we needed to upgrade old profiles from Firefox which were relying on the more complex behavior.
+
 ### Version 51
 
 Two new marker schema field format types have been added: `flow-id` and `terminating-flow-id`, with string index values (like `unique-string`).
 An optional `isStackBased` boolean field has been added to the marker schema.
 
 ### Version 50
 
-The serialized format can now optionally store sample and counter sample times as time deltas instead of absolute timestamps to reduce the JSON size. The unserialized version is unchanged.
+The format can now optionally store sample and counter sample times as time deltas instead of absolute timestamps to reduce the JSON size.
 
 ### Version 49
 

docs-user/guide-android-profiling.md

@@ -1,6 +1,8 @@
 # Perf Profiling on Android
 
-Android has an application [`simpleperf`](https://android.googlesource.com/platform/system/extras/+/master/simpleperf/doc/README.md) which can profile any Android process. Simpleperf is mostly a drop-in replacement for the Linux `perf` tool.
+Firefox profiler can visualize the CPU profiles exported from [Android Studio CPU Profiler](https://developer.android.com/studio/profile/cpu-profiler) as `*.trace` files. Load the exported file into [profiler.firefox.com](https://profiler.firefox.com), using drag-and-drop or "Load a profile from file".
+
+Alternatively, Android ndk provides [`simpleperf`](https://android.googlesource.com/platform/system/extras/+/master/simpleperf/doc/README.md) which can profile any Android process. Simpleperf is mostly a drop-in replacement for the Linux `perf` tool. Android Studio CPU profiler also uses `simpleperf` internally.
 
 Firefox Profiler can visualise these `simpleperf` profiles, augmenting the viewers that ship with `simpleperf` (e.g. [`report_html.py`](https://android.googlesource.com/platform/system/extras/+/master/simpleperf/doc/scripts_reference.md#report_html_py)).
 
@@ -29,6 +31,19 @@ This records the profile into a `perf.data` file, and pulls it to your host.
 
 ### Step 2: Convert the profile
 
+You can convert the `perf.data` file to one of the format supported by Firefox Profiler.
+
+#### Option 1: Simpleperf trace file
+
+Convert `perf.data` to the Simpleperf trace file format. You can also modify this command to provide proguard mapping file or unstripped SOs to symbolicate.
+
+```bash
+# Convert perf.data to perf.trace
+# If on Mac/Windows, use simpleperf host executable for those platforms instead.
+./bin/linux/x86_64/simpleperf report-sample --show-callchain --protobuf -i perf.data -o perf.trace
+```
+
+#### Option 2: Using gecko_profile_generator.py
 Then convert to a Gecko Profile (Firefox Profiler) format, using [`gecko_profile_generator.py`](https://android.googlesource.com/platform/system/extras/+/master/simpleperf/doc/scripts_reference.md#gecko_profile_generator_py):
 
 ```bash
@@ -39,7 +54,7 @@ Then convert to a Gecko Profile (Firefox Profiler) format, using [`gecko_profile
 
 ### Step 3: View the profile in profiler.firefox.com
 
-Load `profile.json.gz` into [profiler.firefox.com](https://profiler.firefox.com), using drag-and-drop or "Load a profile from file".
+Load the `perf.trace` or `profile.json.gz` created in previous step into [profiler.firefox.com](https://profiler.firefox.com), using drag-and-drop or "Load a profile from file".
 
 ## See also
 

locales/be/app.ftl

@@ -161,6 +161,21 @@ CallTree--inlining-badge = (убудаваны)
 
 CallTreeSidebar--select-a-node = Выберыце вузел, каб паказаць інфармацыю аб ім.
 
+## CallTreeSidebar timing information
+##
+## Firefox Profiler stops the execution of the program every 1ms to record the
+## stack. Only thing we know for sure is the stack at that point of time when
+## the stack is taken. We try to estimate the time spent in each function and
+## translate it to a duration. That's why we use the "traced" word here.
+## There is actually no difference between "Traced running time" and "Running
+## time" in the context of the profiler. We use "Traced" to emphasize that this
+## is an estimation where we have more space in the UI.
+##
+## "Self time" is the time spent in the function itself, excluding the time spent
+## in the functions it called. "Running time" is the time spent in the function
+## itself, including the time spent in the functions it called.
+
+
 ## CompareHome
 ## This is used in the page to compare two profiles.
 ## See: https://profiler.firefox.com/compare/
@@ -593,6 +608,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Вы ведаеце, што для пошуку па некалькіх тэрмінах можна выкарыстоўваць коску (,)?
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.
@@ -713,6 +731,12 @@ TabBar--marker-table-tab = Маркерная табліца
 TabBar--network-tab = Сетка
 TabBar--js-tracer-tab = JS Tracer
 
+## TabSelectorMenu
+## This component is a context menu that's opened when you click on the root
+## range at the top left corner for profiler analysis view. It's used to switch
+## between tabs that were captured in the profile.
+
+
 ## TrackContextMenu
 ## This is used as a context menu for timeline to organize the tracks in the
 ## analysis UI.

locales/de/app.ftl

@@ -614,6 +614,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Wussten Sie, dass Sie das Komma (,) verwenden können, um mit mehreren Begriffen zu suchen?
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/el/app.ftl

@@ -338,6 +338,15 @@ Home--load-files-from-other-tools2 =
     επιδόσεων του Chrome, το <androidstudio>Android Studio</androidstudio> ή οποιοδήποτε
     αρχείο των μορφών <dhat>dhat</dhat> ή <traceevent>Trace Event της Google</traceevent>.
     <write>Μάθετε πώς να γράψετε το δικό σας εργαλείο εισαγωγής</write>.
+Home--install-chrome-extension = Εγκατάσταση της επέκτασης για Chrome
+Home--chrome-extension-instructions =
+    Χρησιμοποιήστε την <a>επέκταση του { -profiler-brand-name } για Chrome</a>
+    για να καταγράψετε προφίλ επιδόσεων στο Chrome και να τα αναλύσετε στο
+    { -profiler-brand-name }. Εγκαταστήστε την επέκταση από το Chrome Web Store.
+Home--chrome-extension-recording-instructions =
+    Μόλις εγκατασταθεί, χρησιμοποιήστε το εικονίδιο της επέκτασης στη γραμμή
+    εργαλείων ή τις συντομεύσεις για να ξεκινήσετε και να διακόψετε την καταγραφή.
+    Μπορείτε επίσης να εξαγάγετε τα προφίλ και να τα φορτώσετε εδώ για λεπτομερή ανάλυση.
 
 ## IdleSearchField
 ## The component that is used for all the search inputs in the application.
@@ -624,6 +633,14 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Ξέρατε ότι μπορείτε να χρησιμοποιήσετε το κόμμα (,) για αναζήτηση με πολλαπλούς όρους;
 
+## Profile Name Button
+
+ProfileName--edit-profile-name-button =
+    .title = Επεξεργασία ονόματος προφίλ
+ProfileName--edit-profile-name-input =
+    .title = Επεξεργασία ονόματος προφίλ
+    .aria-label = Όνομα προφίλ
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/en-CA/app.ftl

@@ -643,6 +643,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Did you know you can use the comma (,) to search using several terms?
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/en-GB/app.ftl

@@ -638,6 +638,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Did you know you can use the comma (,) to search using several terms?
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/en-US/app.ftl

@@ -127,6 +127,7 @@ CallNodeContextMenu--searchfox = Look up the function name on Searchfox
 CallNodeContextMenu--copy-function-name = Copy function name
 CallNodeContextMenu--copy-script-url = Copy script URL
 CallNodeContextMenu--copy-stack = Copy stack
+CallNodeContextMenu--show-the-function-in-devtools = Show the function in DevTools
 
 ## CallTree
 ## This is the component for Call Tree panel.
@@ -687,6 +688,14 @@ NumberFormat--short-date = { SHORTDATE($date) }
 PanelSearch--search-field-hint =
     Did you know you can use the comma (,) to search using several terms?
 
+## Profile Name Button
+
+ProfileName--edit-profile-name-button =
+    .title = Edit the profile name
+ProfileName--edit-profile-name-input =
+    .title = Edit the profile name
+    .aria-label = Profile name
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/es-CL/app.ftl

@@ -569,6 +569,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = ¿Sabías que puedes usar la coma (,) para buscar usando varios términos?
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/fr/app.ftl

@@ -563,6 +563,14 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Saviez-vous que vous pouvez utiliser la virgule (,) pour effectuer une recherche à l’aide de plusieurs termes ?
 
+## Profile Name Button
+
+ProfileName--edit-profile-name-button =
+    .title = Modifier le nom du profil
+ProfileName--edit-profile-name-input =
+    .title = Modifier le nom du profil
+    .aria-label = Nom du profil
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/fur/app.ftl

@@ -601,6 +601,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Savevistu che tu puedis doprâ la virgule (,) par fâ ricercjis cun plui tiermins?
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/fy-NL/app.ftl

@@ -638,6 +638,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Wisten jo dat jo de komma (,) brûke kinne om mei ferskate termen te sykjen?
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/ia/app.ftl

@@ -623,6 +623,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Sape tu que tu pote usar le comma (,) pro cercar per plure terminos?
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/it/app.ftl

@@ -554,6 +554,14 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Lo sapevi che è possibile utilizzare una virgola per separare più termini di ricerca?
 
+## Profile Name Button
+
+ProfileName--edit-profile-name-button =
+    .title = Modifica nome del profilo
+ProfileName--edit-profile-name-input =
+    .title = Modifica nome del profilo
+    .aria-label = Nome del profilo
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/kab/app.ftl

@@ -358,6 +358,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 ## The component that is used for all the search input hints in the application.
 
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/nl/app.ftl

@@ -638,6 +638,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Wist u dat u een komma (,) kunt gebruiken om met meerdere termen te zoeken?
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/pt-BR/app.ftl

@@ -561,6 +561,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Você sabia que pode usar vírgula (,) para pesquisar usando vários termos?
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/ru/app.ftl

@@ -652,6 +652,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Знаете ли вы, что можно использовать запятую (,) для поиска по нескольким фильтрам?
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/sv-SE/app.ftl

@@ -633,6 +633,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Visste du att du kan använda komma (,) för att söka med flera termer?
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/tr/app.ftl

@@ -475,6 +475,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Birden fazla terim kullanarak arama yapmak için virgül (,) kullanabileceğinizi biliyor muydunuz?
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/uk/app.ftl

@@ -639,6 +639,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = Чи знаєте ви, що для пошуку кількох термінів можна використовувати кому (,)?
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/zh-CN/app.ftl

@@ -546,6 +546,9 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = 您知道可以使用半角逗号（,）搜索多个词条吗？
 
+## Profile Name Button
+
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

locales/zh-TW/app.ftl

@@ -545,6 +545,14 @@ NumberFormat--short-date = { SHORTDATE($date) }
 
 PanelSearch--search-field-hint = 您知道可以使用半形逗號（,）搜尋多個詞彙嗎？
 
+## Profile Name Button
+
+ProfileName--edit-profile-name-button =
+    .title = 編輯效能檢測檔名稱
+ProfileName--edit-profile-name-input =
+    .title = 編輯效能檢測檔名稱
+    .aria-label = 效能檢測檔名稱
+
 ## Profile Delete Button
 
 # This string is used on the tooltip of the published profile links delete button in uploaded recordings page.

package.json

@@ -129,7 +129,7 @@
     "cssnano": "^7.0.6",
     "devtools-license-check": "^0.9.0",
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.31.0",
@@ -166,7 +166,7 @@
     "style-loader": "^4.0.0",
     "stylelint": "^16.12.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard": "^37.0.0",
     "webpack": "^5.97.1",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.0",