Bug 1695817 - Part 9: Localize process type strings on the about:third-party. r=Gijs,fluent-reviewers

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

toolkit/components/aboutthirdparty/content/aboutThirdParty.html

@@ -11,6 +11,7 @@
           content="default-src chrome:; object-src 'none'">
     <link rel="stylesheet" href="chrome://global/content/aboutThirdParty.css">
     <link rel="localization" href="branding/brand.ftl"/>
+    <link rel="localization" href="toolkit/global/processTypes.ftl"/>
     <link rel="localization" href="toolkit/about/aboutThirdParty.ftl"/>
     <script src="chrome://global/content/aboutThirdParty.js"></script>
   </head>
@@ -37,7 +38,10 @@
 
     <template name="event-table-row">
       <tr>
-        <td></td>
+        <td>
+          <span class="process-type"></span>
+          (<span class="process-id"></span>)
+        </td>
         <td>
           <span class="event-duration"></span>
           <span class="module-tag tag-background" hidden

toolkit/components/aboutthirdparty/content/aboutThirdParty.js

@@ -12,20 +12,6 @@ const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
 let AboutThirdParty = null;
 let CrashModuleSet = null;
 
-// The expected format of |processKey| is "browser.0x1234"
-function formatProcess(processKey) {
-  const [ptype, pidHex] = processKey.split(".");
-  if (ptype && pidHex) {
-    const pid = parseInt(pidHex, 16);
-    if (!isNaN(pid)) {
-      return `${ptype} (process ${pid})`;
-    }
-  }
-
-  Cu.reportError("Unexpted format: " + processKey);
-  return processKey;
-}
-
 async function fetchData() {
   let data = null;
   try {
@@ -71,7 +57,11 @@ async function fetchData() {
 
   for (const [proc, perProc] of Object.entries(data.processes)) {
     for (const event of perProc.events) {
-      event.process = formatProcess(proc);
+      // The expected format of |proc| is <type>.<pid> like "browser.0x1234"
+      const [ptype, pidHex] = proc.split(".");
+      event.processType = ptype;
+      event.processID = parseInt(pidHex, 16);
+
       event.mainThread =
         event.threadName == "MainThread" || event.threadName == "Main Thread";
 
@@ -90,7 +80,10 @@ async function fetchData() {
       ? module.loadingOnMain.sum / module.loadingOnMain.count
       : 0;
     module.loadingOnMain = avg;
-    module.events.sort((a, b) => a.process.localeCompare(b.process));
+    module.events.sort((a, b) => {
+      const diff = a.processType.localeCompare(b.processType);
+      return diff ? diff : a.processID - b.processID;
+    });
   }
 
   data.modules.sort((a, b) => {
@@ -196,7 +189,8 @@ function copyDataToClipboard(aData) {
     if (Array.isArray(module.events)) {
       copied.events = module.events.map(event => {
         return {
-          process: event.process,
+          processType: event.processType,
+          processID: event.processID,
           threadID: event.threadID,
           loadStatus: event.loadStatus,
           loadDurationMS: event.loadDurationMS,
@@ -210,6 +204,13 @@ function copyDataToClipboard(aData) {
   return navigator.clipboard.writeText(JSON.stringify(clipboardData, null, 2));
 }
 
+function correctProcessTypeForFluent(type) {
+  // Convert a process type returned from XRE_GeckoProcessTypeToString()
+  // into a keyword defined in processTypes.ftl
+  const fluentType = type == "tab" ? "web" : type;
+  return "process-type-" + fluentType;
+}
+
 function visualizeData(aData) {
   const templateCard = document.querySelector("template[name=card]");
   const templateTableRow = document.querySelector(
@@ -296,7 +297,12 @@ function visualizeData(aData) {
 
       const row = fragment.querySelector("tr");
 
-      setContent(row.children[0], event.process);
+      setContent(
+        row.children[0].querySelector(".process-type"),
+        null,
+        correctProcessTypeForFluent(event.processType)
+      );
+      setContent(row.children[0].querySelector(".process-id"), event.processID);
 
       // Use setContent() instead of simple assignment because
       // loadDurationMS can be empty (not zero) when a module is

toolkit/components/aboutthirdparty/tests/browser/browser_aboutthirdparty.js

@@ -151,10 +151,15 @@ add_task(async () => {
       3,
       "The table has three cells as there is only one event."
     );
-    Assert.ok(
-      /browser \(process \d+\)/.test(tableCells[0].textContent),
+    Assert.equal(
+      tableCells[0].querySelector(".process-type").getAttribute("data-l10n-id"),
+      "process-type-browser",
       "The module was loaded into the main process."
     );
+    Assert.ok(
+      Number(tableCells[0].querySelector(".process-id").textContent),
+      "A valid process ID is displayed."
+    );
     Assert.equal(
       tableCells[1].querySelector(".event-duration").textContent,
       durationRow.childNodes[1].textContent,

toolkit/locales/en-US/toolkit/global/processTypes.ftl

@@ -3,6 +3,7 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 process-type-web = Web Content
+process-type-browser = Main
 
 # process used to run privileged about pages,
 # such as about:home
@@ -34,3 +35,6 @@ process-type-socket = Socket
 
 # process preallocated; may change to other types
 process-type-prealloc = Preallocated
+
+# process used to decode media
+process-type-rdd = RDD