toolkit/content/aboutSupport.js

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 "use strict";
   6
   7 const { Troubleshoot } = ChromeUtils.importESModule(
   8   "resource://gre/modules/Troubleshoot.sys.mjs"
   9 );
  10 const { ResetProfile } = ChromeUtils.importESModule(
  11   "resource://gre/modules/ResetProfile.sys.mjs"
  12 );
  13 const { AppConstants } = ChromeUtils.importESModule(
  14   "resource://gre/modules/AppConstants.sys.mjs"
  15 );
  16
  17 ChromeUtils.defineESModuleGetters(this, {
  18   DownloadUtils: "resource://gre/modules/DownloadUtils.sys.mjs",
  19   PlacesDBUtils: "resource://gre/modules/PlacesDBUtils.sys.mjs",
  20   ProcessType: "resource://gre/modules/ProcessType.sys.mjs",
  21 });
  22
  23 window.addEventListener("load", function onload() {
  24   try {
  25     window.removeEventListener("load", onload);
  26     Troubleshoot.snapshot().then(async snapshot => {
  27       for (let prop in snapshotFormatters) {
  28         try {
  29           await snapshotFormatters[prop](snapshot[prop]);
  30         } catch (e) {
  31           console.error(
  32             "stack of snapshot error for about:support: ",
  33             e,
  34             ": ",
  35             e.stack
  36           );
  37         }
  38       }
  39       if (location.hash) {
  40         scrollToSection();
  41       }
  42     }, console.error);
  43     populateActionBox();
  44     setupEventListeners();
  45
  46     if (Services.sysinfo.getProperty("isPackagedApp")) {
  47       $("update-dir-row").hidden = true;
  48       $("update-history-row").hidden = true;
  49     }
  50   } catch (e) {
  51     console.error("stack of load error for about:support: ", e, ": ", e.stack);
  52   }
  53 });
  54
  55 function prefsTable(data) {
  56   return sortedArrayFromObject(data).map(function ([name, value]) {
  57     return $.new("tr", [
  58       $.new("td", name, "pref-name"),
  59       // Very long preference values can cause users problems when they
  60       // copy and paste them into some text editors.  Long values generally
  61       // aren't useful anyway, so truncate them to a reasonable length.
  62       $.new("td", String(value).substr(0, 120), "pref-value"),
  63     ]);
  64   });
  65 }
  66
  67 // Fluent uses lisp-case IDs so this converts
  68 // the SentenceCase info IDs to lisp-case.
  69 const FLUENT_IDENT_REGEX = /^[a-zA-Z][a-zA-Z0-9_-]*$/;
  70 function toFluentID(str) {
  71   if (!FLUENT_IDENT_REGEX.test(str)) {
  72     return null;
  73   }
  74   return str
  75     .toString()
  76     .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
  77     .toLowerCase();
  78 }
  79
  80 // Each property in this object corresponds to a property in Troubleshoot.sys.mjs's
  81 // snapshot data.  Each function is passed its property's corresponding data,
  82 // and it's the function's job to update the page with it.
  83 var snapshotFormatters = {
  84   async application(data) {
  85     $("application-box").textContent = data.name;
  86     $("useragent-box").textContent = data.userAgent;
  87     $("os-box").textContent = data.osVersion;
  88     if (data.osTheme) {
  89       $("os-theme-box").textContent = data.osTheme;
  90     } else {
  91       $("os-theme-row").hidden = true;
  92     }
  93     if (AppConstants.platform == "macosx") {
  94       $("rosetta-box").textContent = data.rosetta;
  95     }
  96     if (AppConstants.platform == "win") {
  97       const translatedList = await Promise.all(
  98         data.pointingDevices.map(deviceName => {
  99           return document.l10n.formatValue(deviceName);
 100         })
 101       );
 102
 103       const formatter = new Intl.ListFormat();
 104
 105       $("pointing-devices-box").textContent = formatter.format(translatedList);
 106     }
 107     $("binary-box").textContent = Services.dirsvc.get(
 108       "XREExeF",
 109       Ci.nsIFile
 110     ).path;
 111     $("supportLink").href = data.supportURL;
 112     let version = AppConstants.MOZ_APP_VERSION_DISPLAY;
 113     if (data.vendor) {
 114       version += " (" + data.vendor + ")";
 115     }
 116     $("version-box").textContent = version;
 117     $("buildid-box").textContent = data.buildID;
 118     $("distributionid-box").textContent = data.distributionID;
 119     if (data.updateChannel) {
 120       $("updatechannel-box").textContent = data.updateChannel;
 121     }
 122     if (AppConstants.MOZ_UPDATER && AppConstants.platform != "android") {
 123       $("update-dir-box").textContent = Services.dirsvc.get(
 124         "UpdRootD",
 125         Ci.nsIFile
 126       ).path;
 127     }
 128     $("profile-dir-box").textContent = Services.dirsvc.get(
 129       "ProfD",
 130       Ci.nsIFile
 131     ).path;
 132
 133     try {
 134       let launcherStatusTextId = "launcher-process-status-unknown";
 135       switch (data.launcherProcessState) {
 136         case 0:
 137         case 1:
 138         case 2:
 139           launcherStatusTextId =
 140             "launcher-process-status-" + data.launcherProcessState;
 141           break;
 142       }
 143
 144       document.l10n.setAttributes(
 145         $("launcher-process-box"),
 146         launcherStatusTextId
 147       );
 148     } catch (e) {}
 149
 150     const STATUS_STRINGS = {
 151       experimentControl: "fission-status-experiment-control",
 152       experimentTreatment: "fission-status-experiment-treatment",
 153       disabledByE10sEnv: "fission-status-disabled-by-e10s-env",
 154       enabledByEnv: "fission-status-enabled-by-env",
 155       disabledByEnv: "fission-status-disabled-by-env",
 156       enabledByDefault: "fission-status-enabled-by-default",
 157       disabledByDefault: "fission-status-disabled-by-default",
 158       enabledByUserPref: "fission-status-enabled-by-user-pref",
 159       disabledByUserPref: "fission-status-disabled-by-user-pref",
 160       disabledByE10sOther: "fission-status-disabled-by-e10s-other",
 161       enabledByRollout: "fission-status-enabled-by-rollout",
 162     };
 163
 164     let statusTextId = STATUS_STRINGS[data.fissionDecisionStatus];
 165
 166     document.l10n.setAttributes(
 167       $("multiprocess-box-process-count"),
 168       "multi-process-windows",
 169       {
 170         remoteWindows: data.numRemoteWindows,
 171         totalWindows: data.numTotalWindows,
 172       }
 173     );
 174     document.l10n.setAttributes(
 175       $("fission-box-process-count"),
 176       "fission-windows",
 177       {
 178         fissionWindows: data.numFissionWindows,
 179         totalWindows: data.numTotalWindows,
 180       }
 181     );
 182     document.l10n.setAttributes($("fission-box-status"), statusTextId);
 183
 184     if (Services.policies) {
 185       let policiesStrId = "";
 186       let aboutPolicies = "about:policies";
 187       switch (data.policiesStatus) {
 188         case Services.policies.INACTIVE:
 189           policiesStrId = "policies-inactive";
 190           break;
 191
 192         case Services.policies.ACTIVE:
 193           policiesStrId = "policies-active";
 194           aboutPolicies += "#active";
 195           break;
 196
 197         default:
 198           policiesStrId = "policies-error";
 199           aboutPolicies += "#errors";
 200           break;
 201       }
 202
 203       if (data.policiesStatus != Services.policies.INACTIVE) {
 204         let activePolicies = $.new("a", null, null, {
 205           href: aboutPolicies,
 206         });
 207         document.l10n.setAttributes(activePolicies, policiesStrId);
 208         $("policies-status").appendChild(activePolicies);
 209       } else {
 210         document.l10n.setAttributes($("policies-status"), policiesStrId);
 211       }
 212     } else {
 213       $("policies-status-row").hidden = true;
 214     }
 215
 216     let keyLocationServiceGoogleFound = data.keyLocationServiceGoogleFound
 217       ? "found"
 218       : "missing";
 219     document.l10n.setAttributes(
 220       $("key-location-service-google-box"),
 221       keyLocationServiceGoogleFound
 222     );
 223
 224     let keySafebrowsingGoogleFound = data.keySafebrowsingGoogleFound
 225       ? "found"
 226       : "missing";
 227     document.l10n.setAttributes(
 228       $("key-safebrowsing-google-box"),
 229       keySafebrowsingGoogleFound
 230     );
 231
 232     let keyMozillaFound = data.keyMozillaFound ? "found" : "missing";
 233     document.l10n.setAttributes($("key-mozilla-box"), keyMozillaFound);
 234
 235     $("safemode-box").textContent = data.safeMode;
 236
 237     const formatHumanReadableBytes = (elem, bytes) => {
 238       let size = DownloadUtils.convertByteUnits(bytes);
 239       document.l10n.setAttributes(elem, "app-basics-data-size", {
 240         value: size[0],
 241         unit: size[1],
 242       });
 243     };
 244
 245     formatHumanReadableBytes($("memory-size-box"), data.memorySizeBytes);
 246     formatHumanReadableBytes($("disk-available-box"), data.diskAvailableBytes);
 247   },
 248
 249   async legacyUserStylesheets(legacyUserStylesheets) {
 250     $("legacyUserStylesheets-enabled").textContent =
 251       legacyUserStylesheets.active;
 252     $("legacyUserStylesheets-types").textContent =
 253       new Intl.ListFormat(undefined, { style: "short", type: "unit" }).format(
 254         legacyUserStylesheets.types
 255       ) ||
 256       document.l10n.setAttributes(
 257         $("legacyUserStylesheets-types"),
 258         "legacy-user-stylesheets-no-stylesheets-found"
 259       );
 260   },
 261
 262   crashes(data) {
 263     if (!AppConstants.MOZ_CRASHREPORTER) {
 264       return;
 265     }
 266
 267     let daysRange = Troubleshoot.kMaxCrashAge / (24 * 60 * 60 * 1000);
 268     document.l10n.setAttributes($("crashes"), "report-crash-for-days", {
 269       days: daysRange,
 270     });
 271     let reportURL;
 272     try {
 273       reportURL = Services.prefs.getCharPref("breakpad.reportURL");
 274       // Ignore any non http/https urls
 275       if (!/^https?:/i.test(reportURL)) {
 276         reportURL = null;
 277       }
 278     } catch (e) {}
 279     if (!reportURL) {
 280       $("crashes-noConfig").style.display = "block";
 281       $("crashes-noConfig").classList.remove("no-copy");
 282       return;
 283     }
 284     $("crashes-allReports").style.display = "block";
 285
 286     if (data.pending > 0) {
 287       document.l10n.setAttributes(
 288         $("crashes-allReportsWithPending"),
 289         "pending-reports",
 290         { reports: data.pending }
 291       );
 292     }
 293
 294     let dateNow = new Date();
 295     $.append(
 296       $("crashes-tbody"),
 297       data.submitted.map(function (crash) {
 298         let date = new Date(crash.date);
 299         let timePassed = dateNow - date;
 300         let formattedDateStrId;
 301         let formattedDateStrArgs;
 302         if (timePassed >= 24 * 60 * 60 * 1000) {
 303           let daysPassed = Math.round(timePassed / (24 * 60 * 60 * 1000));
 304           formattedDateStrId = "crashes-time-days";
 305           formattedDateStrArgs = { days: daysPassed };
 306         } else if (timePassed >= 60 * 60 * 1000) {
 307           let hoursPassed = Math.round(timePassed / (60 * 60 * 1000));
 308           formattedDateStrId = "crashes-time-hours";
 309           formattedDateStrArgs = { hours: hoursPassed };
 310         } else {
 311           let minutesPassed = Math.max(Math.round(timePassed / (60 * 1000)), 1);
 312           formattedDateStrId = "crashes-time-minutes";
 313           formattedDateStrArgs = { minutes: minutesPassed };
 314         }
 315         return $.new("tr", [
 316           $.new("td", [
 317             $.new("a", crash.id, null, { href: reportURL + crash.id }),
 318           ]),
 319           $.new("td", null, null, {
 320             "data-l10n-id": formattedDateStrId,
 321             "data-l10n-args": formattedDateStrArgs,
 322           }),
 323         ]);
 324       })
 325     );
 326   },
 327
 328   addons(data) {
 329     $.append(
 330       $("addons-tbody"),
 331       data.map(function (addon) {
 332         return $.new("tr", [
 333           $.new("td", addon.name),
 334           $.new("td", addon.type),
 335           $.new("td", addon.version),
 336           $.new("td", addon.isActive),
 337           $.new("td", addon.id),
 338         ]);
 339       })
 340     );
 341   },
 342
 343   securitySoftware(data) {
 344     if (AppConstants.platform !== "win") {
 345       $("security-software").hidden = true;
 346       $("security-software-table").hidden = true;
 347       return;
 348     }
 349
 350     $("security-software-antivirus").textContent = data.registeredAntiVirus;
 351     $("security-software-antispyware").textContent = data.registeredAntiSpyware;
 352     $("security-software-firewall").textContent = data.registeredFirewall;
 353   },
 354
 355   features(data) {
 356     $.append(
 357       $("features-tbody"),
 358       data.map(function (feature) {
 359         return $.new("tr", [
 360           $.new("td", feature.name),
 361           $.new("td", feature.version),
 362           $.new("td", feature.id),
 363         ]);
 364       })
 365     );
 366   },
 367
 368   async processes(data) {
 369     async function buildEntry(name, value) {
 370       const fluentName = ProcessType.fluentNameFromProcessTypeString(name);
 371       let entryName = (await document.l10n.formatValue(fluentName)) || name;
 372       $("processes-tbody").appendChild(
 373         $.new("tr", [$.new("td", entryName), $.new("td", value)])
 374       );
 375     }
 376
 377     let remoteProcessesCount = Object.values(data.remoteTypes).reduce(
 378       (a, b) => a + b,
 379       0
 380     );
 381     document.querySelector("#remoteprocesses-row a").textContent =
 382       remoteProcessesCount;
 383
 384     // Display the regular "web" process type first in the list,
 385     // and with special formatting.
 386     if (data.remoteTypes.web) {
 387       await buildEntry(
 388         "web",
 389         `${data.remoteTypes.web} / ${data.maxWebContentProcesses}`
 390       );
 391       delete data.remoteTypes.web;
 392     }
 393
 394     for (let remoteProcessType in data.remoteTypes) {
 395       await buildEntry(remoteProcessType, data.remoteTypes[remoteProcessType]);
 396     }
 397   },
 398
 399   async experimentalFeatures(data) {
 400     if (!data) {
 401       return;
 402     }
 403     let titleL10nIds = data.map(([titleL10nId]) => titleL10nId);
 404     let titleL10nObjects = await document.l10n.formatMessages(titleL10nIds);
 405     if (titleL10nObjects.length != data.length) {
 406       throw Error("Missing localized title strings in experimental features");
 407     }
 408     for (let i = 0; i < titleL10nObjects.length; i++) {
 409       let localizedTitle = titleL10nObjects[i].attributes.find(
 410         a => a.name == "label"
 411       ).value;
 412       data[i] = [localizedTitle, data[i][1], data[i][2]];
 413     }
 414
 415     $.append(
 416       $("experimental-features-tbody"),
 417       data.map(function ([title, pref, value]) {
 418         return $.new("tr", [
 419           $.new("td", `${title} (${pref})`, "pref-name"),
 420           $.new("td", value, "pref-value"),
 421         ]);
 422       })
 423     );
 424   },
 425
 426   environmentVariables(data) {
 427     if (!data) {
 428       return;
 429     }
 430     $.append(
 431       $("environment-variables-tbody"),
 432       Object.entries(data).map(([name, value]) => {
 433         return $.new("tr", [
 434           $.new("td", name, "pref-name"),
 435           $.new("td", value, "pref-value"),
 436         ]);
 437       })
 438     );
 439   },
 440
 441   modifiedPreferences(data) {
 442     $.append($("prefs-tbody"), prefsTable(data));
 443   },
 444
 445   lockedPreferences(data) {
 446     $.append($("locked-prefs-tbody"), prefsTable(data));
 447   },
 448
 449   places(data) {
 450     if (!AppConstants.MOZ_PLACES) {
 451       return;
 452     }
 453     const statsBody = $("place-database-stats-tbody");
 454     $.append(
 455       statsBody,
 456       data.map(function (entry) {
 457         return $.new("tr", [
 458           $.new("td", entry.entity),
 459           $.new("td", entry.count),
 460           $.new("td", entry.sizeBytes / 1024),
 461           $.new("td", entry.sizePerc),
 462           $.new("td", entry.efficiencyPerc),
 463           $.new("td", entry.sequentialityPerc),
 464         ]);
 465       })
 466     );
 467     statsBody.style.display = "none";
 468     $("place-database-stats-toggle").addEventListener(
 469       "click",
 470       function (event) {
 471         if (statsBody.style.display === "none") {
 472           document.l10n.setAttributes(
 473             event.target,
 474             "place-database-stats-hide"
 475           );
 476           statsBody.style.display = "";
 477         } else {
 478           document.l10n.setAttributes(
 479             event.target,
 480             "place-database-stats-show"
 481           );
 482           statsBody.style.display = "none";
 483         }
 484       }
 485     );
 486   },
 487
 488   printingPreferences(data) {
 489     if (AppConstants.platform == "android") {
 490       return;
 491     }
 492     const tbody = $("support-printing-prefs-tbody");
 493     $.append(tbody, prefsTable(data));
 494     $("support-printing-clear-settings-button").addEventListener(
 495       "click",
 496       function () {
 497         for (let name in data) {
 498           Services.prefs.clearUserPref(name);
 499         }
 500         tbody.textContent = "";
 501       }
 502     );
 503   },
 504
 505   async graphics(data) {
 506     function localizedMsg(msg) {
 507       if (typeof msg == "object" && msg.key) {
 508         return document.l10n.formatValue(msg.key, msg.args);
 509       }
 510       let msgId = toFluentID(msg);
 511       if (msgId) {
 512         return document.l10n.formatValue(msgId);
 513       }
 514       return "";
 515     }
 516
 517     // Read APZ info out of data.info, stripping it out in the process.
 518     let apzInfo = [];
 519     let formatApzInfo = function (info) {
 520       let out = [];
 521       for (let type of [
 522         "Wheel",
 523         "Touch",
 524         "Drag",
 525         "Keyboard",
 526         "Autoscroll",
 527         "Zooming",
 528       ]) {
 529         let key = "Apz" + type + "Input";
 530
 531         if (!(key in info)) {
 532           continue;
 533         }
 534
 535         delete info[key];
 536
 537         out.push(toFluentID(type.toLowerCase() + "Enabled"));
 538       }
 539
 540       return out;
 541     };
 542
 543     // Create a <tr> element with key and value columns.
 544     //
 545     // @key      Text in the key column. Localized automatically, unless starts with "#".
 546     // @value    Fluent ID for text in the value column, or array of children.
 547     function buildRow(key, value) {
 548       let title = key[0] == "#" ? key.substr(1) : key;
 549       let keyStrId = toFluentID(key);
 550       let valueStrId = Array.isArray(value) ? null : toFluentID(value);
 551       let td = $.new("td", value);
 552       td.style["white-space"] = "pre-wrap";
 553       if (valueStrId) {
 554         document.l10n.setAttributes(td, valueStrId);
 555       }
 556
 557       let th = $.new("th", title, "column");
 558       if (!key.startsWith("#")) {
 559         document.l10n.setAttributes(th, keyStrId);
 560       }
 561       return $.new("tr", [th, td]);
 562     }
 563
 564     // @where    The name in "graphics-<name>-tbody", of the element to append to.
 565     // @trs      Array of row elements.
 566     function addRows(where, trs) {
 567       $.append($("graphics-" + where + "-tbody"), trs);
 568     }
 569
 570     // Build and append a row.
 571     //
 572     // @where    The name in "graphics-<name>-tbody", of the element to append to.
 573     function addRow(where, key, value) {
 574       addRows(where, [buildRow(key, value)]);
 575     }
 576     if ("info" in data) {
 577       apzInfo = formatApzInfo(data.info);
 578
 579       let trs = sortedArrayFromObject(data.info).map(function ([prop, val]) {
 580         let td = $.new("td", String(val));
 581         td.style["word-break"] = "break-all";
 582         return $.new("tr", [$.new("th", prop, "column"), td]);
 583       });
 584       addRows("diagnostics", trs);
 585
 586       delete data.info;
 587     }
 588
 589     let windowUtils = window.windowUtils;
 590     let gpuProcessPid = windowUtils.gpuProcessPid;
 591
 592     if (gpuProcessPid != -1) {
 593       let gpuProcessKillButton = null;
 594       if (AppConstants.NIGHTLY_BUILD || AppConstants.MOZ_DEV_EDITION) {
 595         gpuProcessKillButton = $.new("button");
 596
 597         gpuProcessKillButton.addEventListener("click", function () {
 598           windowUtils.terminateGPUProcess();
 599         });
 600
 601         document.l10n.setAttributes(
 602           gpuProcessKillButton,
 603           "gpu-process-kill-button"
 604         );
 605       }
 606
 607       addRow("diagnostics", "gpu-process-pid", [new Text(gpuProcessPid)]);
 608       if (gpuProcessKillButton) {
 609         addRow("diagnostics", "gpu-process", [gpuProcessKillButton]);
 610       }
 611     }
 612
 613     if (
 614       (AppConstants.NIGHTLY_BUILD || AppConstants.MOZ_DEV_EDITION) &&
 615       AppConstants.platform != "macosx"
 616     ) {
 617       let gpuDeviceResetButton = $.new("button");
 618
 619       gpuDeviceResetButton.addEventListener("click", function () {
 620         windowUtils.triggerDeviceReset();
 621       });
 622
 623       document.l10n.setAttributes(
 624         gpuDeviceResetButton,
 625         "gpu-device-reset-button"
 626       );
 627       addRow("diagnostics", "gpu-device-reset", [gpuDeviceResetButton]);
 628     }
 629
 630     // graphics-failures-tbody tbody
 631     if ("failures" in data) {
 632       // If indices is there, it should be the same length as failures,
 633       // (see Troubleshoot.sys.mjs) but we check anyway:
 634       if ("indices" in data && data.failures.length == data.indices.length) {
 635         let combined = [];
 636         for (let i = 0; i < data.failures.length; i++) {
 637           let assembled = assembleFromGraphicsFailure(i, data);
 638           combined.push(assembled);
 639         }
 640         combined.sort(function (a, b) {
 641           if (a.index < b.index) {
 642             return -1;
 643           }
 644           if (a.index > b.index) {
 645             return 1;
 646           }
 647           return 0;
 648         });
 649         $.append(
 650           $("graphics-failures-tbody"),
 651           combined.map(function (val) {
 652             return $.new("tr", [
 653               $.new("th", val.header, "column"),
 654               $.new("td", val.message),
 655             ]);
 656           })
 657         );
 658         delete data.indices;
 659       } else {
 660         $.append($("graphics-failures-tbody"), [
 661           $.new("tr", [
 662             $.new("th", "LogFailure", "column"),
 663             $.new(
 664               "td",
 665               data.failures.map(function (val) {
 666                 return $.new("p", val);
 667               })
 668             ),
 669           ]),
 670         ]);
 671       }
 672       delete data.failures;
 673     } else {
 674       $("graphics-failures-tbody").style.display = "none";
 675     }
 676
 677     // Add a new row to the table, and take the key (or keys) out of data.
 678     //
 679     // @where        Table section to add to.
 680     // @key          Data key to use.
 681     // @colKey       The localization key to use, if different from key.
 682     async function addRowFromKey(where, key, colKey) {
 683       if (!(key in data)) {
 684         return;
 685       }
 686       colKey = colKey || key;
 687
 688       let value;
 689       let messageKey = key + "Message";
 690       if (messageKey in data) {
 691         value = await localizedMsg(data[messageKey]);
 692         delete data[messageKey];
 693       } else {
 694         value = data[key];
 695       }
 696       delete data[key];
 697
 698       if (value) {
 699         addRow(where, colKey, [new Text(value)]);
 700       }
 701     }
 702
 703     // graphics-features-tbody
 704     let devicePixelRatios = data.graphicsDevicePixelRatios;
 705     addRow("features", "graphicsDevicePixelRatios", [
 706       new Text(devicePixelRatios),
 707     ]);
 708
 709     let compositor = "";
 710     if (data.windowLayerManagerRemote) {
 711       compositor = data.windowLayerManagerType;
 712     } else {
 713       let noOMTCString = await document.l10n.formatValue("main-thread-no-omtc");
 714       compositor = "BasicLayers (" + noOMTCString + ")";
 715     }
 716     addRow("features", "compositing", [new Text(compositor)]);
 717     addRow("features", "supportFontDetermination", [
 718       new Text(data.supportFontDetermination),
 719     ]);
 720     delete data.windowLayerManagerRemote;
 721     delete data.windowLayerManagerType;
 722     delete data.numTotalWindows;
 723     delete data.numAcceleratedWindows;
 724     delete data.numAcceleratedWindowsMessage;
 725     delete data.graphicsDevicePixelRatios;
 726
 727     addRow(
 728       "features",
 729       "asyncPanZoom",
 730       apzInfo.length
 731         ? [
 732             new Text(
 733               (
 734                 await document.l10n.formatValues(
 735                   apzInfo.map(id => {
 736                     return { id };
 737                   })
 738                 )
 739               ).join("; ")
 740             ),
 741           ]
 742         : "apz-none"
 743     );
 744     let featureKeys = [
 745       "webgl1WSIInfo",
 746       "webgl1Renderer",
 747       "webgl1Version",
 748       "webgl1DriverExtensions",
 749       "webgl1Extensions",
 750       "webgl2WSIInfo",
 751       "webgl2Renderer",
 752       "webgl2Version",
 753       "webgl2DriverExtensions",
 754       "webgl2Extensions",
 755       ["supportsHardwareH264", "hardware-h264"],
 756       ["direct2DEnabled", "#Direct2D"],
 757       ["windowProtocol", "graphics-window-protocol"],
 758       ["desktopEnvironment", "graphics-desktop-environment"],
 759       "targetFrameRate",
 760     ];
 761     for (let feature of featureKeys) {
 762       if (Array.isArray(feature)) {
 763         await addRowFromKey("features", feature[0], feature[1]);
 764         continue;
 765       }
 766       await addRowFromKey("features", feature);
 767     }
 768
 769     featureKeys = ["webgpuDefaultAdapter", "webgpuFallbackAdapter"];
 770     for (let feature of featureKeys) {
 771       const obj = data[feature];
 772       if (obj) {
 773         const str = JSON.stringify(obj, null, "  ");
 774         await addRow("features", feature, [new Text(str)]);
 775         delete data[feature];
 776       }
 777     }
 778
 779     if ("directWriteEnabled" in data) {
 780       let message = data.directWriteEnabled;
 781       if ("directWriteVersion" in data) {
 782         message += " (" + data.directWriteVersion + ")";
 783       }
 784       await addRow("features", "#DirectWrite", [new Text(message)]);
 785       delete data.directWriteEnabled;
 786       delete data.directWriteVersion;
 787     }
 788
 789     // Adapter tbodies.
 790     let adapterKeys = [
 791       ["adapterDescription", "gpu-description"],
 792       ["adapterVendorID", "gpu-vendor-id"],
 793       ["adapterDeviceID", "gpu-device-id"],
 794       ["driverVendor", "gpu-driver-vendor"],
 795       ["driverVersion", "gpu-driver-version"],
 796       ["driverDate", "gpu-driver-date"],
 797       ["adapterDrivers", "gpu-drivers"],
 798       ["adapterSubsysID", "gpu-subsys-id"],
 799       ["adapterRAM", "gpu-ram"],
 800     ];
 801
 802     function showGpu(id, suffix) {
 803       function get(prop) {
 804         return data[prop + suffix];
 805       }
 806
 807       let trs = [];
 808       for (let [prop, key] of adapterKeys) {
 809         let value = get(prop);
 810         if (value === undefined || value === "") {
 811           continue;
 812         }
 813         trs.push(buildRow(key, [new Text(value)]));
 814       }
 815
 816       if (!trs.length) {
 817         $("graphics-" + id + "-tbody").style.display = "none";
 818         return;
 819       }
 820
 821       let active = "yes";
 822       if ("isGPU2Active" in data && (suffix == "2") != data.isGPU2Active) {
 823         active = "no";
 824       }
 825
 826       addRow(id, "gpu-active", active);
 827       addRows(id, trs);
 828     }
 829     showGpu("gpu-1", "");
 830     showGpu("gpu-2", "2");
 831
 832     // Remove adapter keys.
 833     for (let [prop /* key */] of adapterKeys) {
 834       delete data[prop];
 835       delete data[prop + "2"];
 836     }
 837     delete data.isGPU2Active;
 838
 839     let featureLog = data.featureLog;
 840     delete data.featureLog;
 841
 842     if (featureLog.features.length) {
 843       for (let feature of featureLog.features) {
 844         let trs = [];
 845         for (let entry of feature.log) {
 846           let bugNumber;
 847           if (entry.hasOwnProperty("failureId")) {
 848             // This is a failure ID. See nsIGfxInfo.idl.
 849             let m = /BUG_(\d+)/.exec(entry.failureId);
 850             if (m) {
 851               bugNumber = m[1];
 852             }
 853           }
 854
 855           let failureIdSpan = $.new("span", "");
 856           if (bugNumber) {
 857             let bugHref = $.new("a");
 858             bugHref.href =
 859               "https://bugzilla.mozilla.org/show_bug.cgi?id=" + bugNumber;
 860             bugHref.setAttribute("data-l10n-name", "bug-link");
 861             failureIdSpan.append(bugHref);
 862             document.l10n.setAttributes(
 863               failureIdSpan,
 864               "support-blocklisted-bug",
 865               {
 866                 bugNumber,
 867               }
 868             );
 869           } else if (
 870             entry.hasOwnProperty("failureId") &&
 871             entry.failureId.length
 872           ) {
 873             document.l10n.setAttributes(failureIdSpan, "unknown-failure", {
 874               failureCode: entry.failureId,
 875             });
 876           }
 877
 878           let messageSpan = $.new("span", "");
 879           if (entry.hasOwnProperty("message") && entry.message.length) {
 880             messageSpan.innerText = entry.message;
 881           }
 882
 883           let typeCol = $.new("td", entry.type);
 884           let statusCol = $.new("td", entry.status);
 885           let messageCol = $.new("td", "");
 886           let failureIdCol = $.new("td", "");
 887           typeCol.style.width = "10%";
 888           statusCol.style.width = "10%";
 889           messageCol.style.width = "30%";
 890           messageCol.appendChild(messageSpan);
 891           failureIdCol.style.width = "50%";
 892           failureIdCol.appendChild(failureIdSpan);
 893
 894           trs.push($.new("tr", [typeCol, statusCol, messageCol, failureIdCol]));
 895         }
 896         addRow("decisions", "#" + feature.name, [$.new("table", trs)]);
 897       }
 898     } else {
 899       $("graphics-decisions-tbody").style.display = "none";
 900     }
 901
 902     if (featureLog.fallbacks.length) {
 903       for (let fallback of featureLog.fallbacks) {
 904         addRow("workarounds", "#" + fallback.name, [
 905           new Text(fallback.message),
 906         ]);
 907       }
 908     } else {
 909       $("graphics-workarounds-tbody").style.display = "none";
 910     }
 911
 912     let crashGuards = data.crashGuards;
 913     delete data.crashGuards;
 914
 915     if (crashGuards.length) {
 916       for (let guard of crashGuards) {
 917         let resetButton = $.new("button");
 918         let onClickReset = function () {
 919           Services.prefs.setIntPref(guard.prefName, 0);
 920           resetButton.removeEventListener("click", onClickReset);
 921           resetButton.disabled = true;
 922         };
 923
 924         document.l10n.setAttributes(resetButton, "reset-on-next-restart");
 925         resetButton.addEventListener("click", onClickReset);
 926
 927         addRow("crashguards", guard.type + "CrashGuard", [resetButton]);
 928       }
 929     } else {
 930       $("graphics-crashguards-tbody").style.display = "none";
 931     }
 932
 933     // Now that we're done, grab any remaining keys in data and drop them into
 934     // the diagnostics section.
 935     for (let key in data) {
 936       let value = data[key];
 937       addRow("diagnostics", key, [new Text(value)]);
 938     }
 939   },
 940
 941   async media(data) {
 942     function insertBasicInfo(key, value) {
 943       function createRow(key, value) {
 944         let th = $.new("th", null, "column");
 945         document.l10n.setAttributes(th, key);
 946         let td = $.new("td", value);
 947         td.style["white-space"] = "pre-wrap";
 948         td.colSpan = 8;
 949         return $.new("tr", [th, td]);
 950       }
 951       $.append($("media-info-tbody"), [createRow(key, value)]);
 952     }
 953
 954     function createDeviceInfoRow(device) {
 955       let deviceInfo = Ci.nsIAudioDeviceInfo;
 956
 957       let states = {};
 958       states[deviceInfo.STATE_DISABLED] = "Disabled";
 959       states[deviceInfo.STATE_UNPLUGGED] = "Unplugged";
 960       states[deviceInfo.STATE_ENABLED] = "Enabled";
 961
 962       let preferreds = {};
 963       preferreds[deviceInfo.PREF_NONE] = "None";
 964       preferreds[deviceInfo.PREF_MULTIMEDIA] = "Multimedia";
 965       preferreds[deviceInfo.PREF_VOICE] = "Voice";
 966       preferreds[deviceInfo.PREF_NOTIFICATION] = "Notification";
 967       preferreds[deviceInfo.PREF_ALL] = "All";
 968
 969       let formats = {};
 970       formats[deviceInfo.FMT_S16LE] = "S16LE";
 971       formats[deviceInfo.FMT_S16BE] = "S16BE";
 972       formats[deviceInfo.FMT_F32LE] = "F32LE";
 973       formats[deviceInfo.FMT_F32BE] = "F32BE";
 974
 975       function toPreferredString(preferred) {
 976         if (preferred == deviceInfo.PREF_NONE) {
 977           return preferreds[deviceInfo.PREF_NONE];
 978         } else if (preferred & deviceInfo.PREF_ALL) {
 979           return preferreds[deviceInfo.PREF_ALL];
 980         }
 981         let str = "";
 982         for (let pref of [
 983           deviceInfo.PREF_MULTIMEDIA,
 984           deviceInfo.PREF_VOICE,
 985           deviceInfo.PREF_NOTIFICATION,
 986         ]) {
 987           if (preferred & pref) {
 988             str += " " + preferreds[pref];
 989           }
 990         }
 991         return str;
 992       }
 993
 994       function toFromatString(dev) {
 995         let str = "default: " + formats[dev.defaultFormat] + ", support:";
 996         for (let fmt of [
 997           deviceInfo.FMT_S16LE,
 998           deviceInfo.FMT_S16BE,
 999           deviceInfo.FMT_F32LE,
1000           deviceInfo.FMT_F32BE,
1001         ]) {
1002           if (dev.supportedFormat & fmt) {
1003             str += " " + formats[fmt];
1004           }
1005         }
1006         return str;
1007       }
1008
1009       function toRateString(dev) {
1010         return (
1011           "default: " +
1012           dev.defaultRate +
1013           ", support: " +
1014           dev.minRate +
1015           " - " +
1016           dev.maxRate
1017         );
1018       }
1019
1020       function toLatencyString(dev) {
1021         return dev.minLatency + " - " + dev.maxLatency;
1022       }
1023
1024       return $.new("tr", [
1025         $.new("td", device.name),
1026         $.new("td", device.groupId),
1027         $.new("td", device.vendor),
1028         $.new("td", states[device.state]),
1029         $.new("td", toPreferredString(device.preferred)),
1030         $.new("td", toFromatString(device)),
1031         $.new("td", device.maxChannels),
1032         $.new("td", toRateString(device)),
1033         $.new("td", toLatencyString(device)),
1034       ]);
1035     }
1036
1037     function insertDeviceInfo(side, devices) {
1038       let rows = [];
1039       for (let dev of devices) {
1040         rows.push(createDeviceInfoRow(dev));
1041       }
1042       $.append($("media-" + side + "-devices-tbody"), rows);
1043     }
1044
1045     function insertEnumerateDatabase() {
1046       if (
1047         !Services.prefs.getBoolPref("media.mediacapabilities.from-database")
1048       ) {
1049         $("media-capabilities-tbody").style.display = "none";
1050         return;
1051       }
1052       let button = $("enumerate-database-button");
1053       if (button) {
1054         button.addEventListener("click", function () {
1055           let { KeyValueService } = ChromeUtils.importESModule(
1056             "resource://gre/modules/kvstore.sys.mjs"
1057           );
1058           let currProfDir = Services.dirsvc.get("ProfD", Ci.nsIFile);
1059           currProfDir.append("mediacapabilities");
1060           let path = currProfDir.path;
1061
1062           function enumerateDatabase(name) {
1063             KeyValueService.getOrCreate(path, name)
1064               .then(database => {
1065                 return database.enumerate();
1066               })
1067               .then(enumerator => {
1068                 var logs = [];
1069                 logs.push(`${name}:`);
1070                 while (enumerator.hasMoreElements()) {
1071                   const { key, value } = enumerator.getNext();
1072                   logs.push(`${key}: ${value}`);
1073                 }
1074                 $("enumerate-database-result").textContent +=
1075                   logs.join("\n") + "\n";
1076               })
1077               .catch(() => {
1078                 $("enumerate-database-result").textContent += `${name}:\n`;
1079               });
1080           }
1081
1082           $("enumerate-database-result").style.display = "block";
1083           $("enumerate-database-result").classList.remove("no-copy");
1084           $("enumerate-database-result").textContent = "";
1085
1086           enumerateDatabase("video/av1");
1087           enumerateDatabase("video/vp8");
1088           enumerateDatabase("video/vp9");
1089           enumerateDatabase("video/avc");
1090           enumerateDatabase("video/theora");
1091         });
1092       }
1093     }
1094
1095     function roundtripAudioLatency() {
1096       insertBasicInfo("roundtrip-latency", "...");
1097       window.windowUtils
1098         .defaultDevicesRoundTripLatency()
1099         .then(latency => {
1100           var latencyString = `${(latency[0] * 1000).toFixed(2)}ms (${(
1101             latency[1] * 1000
1102           ).toFixed(2)})`;
1103           data.defaultDevicesRoundTripLatency = latencyString;
1104           document.querySelector(
1105             'th[data-l10n-id="roundtrip-latency"]'
1106           ).nextSibling.textContent = latencyString;
1107         })
1108         .catch(() => {});
1109     }
1110
1111     function createCDMInfoRow(cdmInfo) {
1112       function findElementInArray(array, name) {
1113         const rv = array.find(element => element.includes(name));
1114         return rv ? rv.split("=")[1] : "Unknown";
1115       }
1116
1117       function getAudioRobustness(array) {
1118         return findElementInArray(array, "audio-robustness");
1119       }
1120
1121       function getVideoRobustness(array) {
1122         return findElementInArray(array, "video-robustness");
1123       }
1124
1125       function getSupportedCodecs(array) {
1126         const mp4Content = findElementInArray(array, "MP4");
1127         const webContent = findElementInArray(array, "WEBM");
1128
1129         const mp4DecodingAndDecryptingCodecs = mp4Content
1130           .match(/decoding-and-decrypting:\[([^\]]*)\]/)[1]
1131           .split(",");
1132         const webmDecodingAndDecryptingCodecs = webContent
1133           .match(/decoding-and-decrypting:\[([^\]]*)\]/)[1]
1134           .split(",");
1135
1136         const mp4DecryptingOnlyCodecs = mp4Content
1137           .match(/decrypting-only:\[([^\]]*)\]/)[1]
1138           .split(",");
1139         const webmDecryptingOnlyCodecs = webContent
1140           .match(/decrypting-only:\[([^\]]*)\]/)[1]
1141           .split(",");
1142
1143         // Combine and get unique codecs for decoding-and-decrypting (always)
1144         // and decrypting-only (only set when it's not empty)
1145         let rv = {};
1146         rv.decodingAndDecrypting = [
1147           ...new Set(
1148             [
1149               ...mp4DecodingAndDecryptingCodecs,
1150               ...webmDecodingAndDecryptingCodecs,
1151             ].filter(Boolean)
1152           ),
1153         ];
1154         let temp = [
1155           ...new Set(
1156             [...mp4DecryptingOnlyCodecs, ...webmDecryptingOnlyCodecs].filter(
1157               Boolean
1158             )
1159           ),
1160         ];
1161         if (temp.length) {
1162           rv.decryptingOnly = temp;
1163         }
1164         return rv;
1165       }
1166
1167       function getCapabilities(array) {
1168         let capabilities = {};
1169         capabilities.persistent = findElementInArray(array, "persistent");
1170         capabilities.distinctive = findElementInArray(array, "distinctive");
1171         capabilities.sessionType = findElementInArray(array, "sessionType");
1172         capabilities.scheme = findElementInArray(array, "scheme");
1173         capabilities.codec = getSupportedCodecs(array);
1174         return JSON.stringify(capabilities);
1175       }
1176
1177       const rvArray = cdmInfo.capabilities.split(" ");
1178       return $.new("tr", [
1179         $.new("td", cdmInfo.keySystemName),
1180         $.new("td", getVideoRobustness(rvArray)),
1181         $.new("td", getAudioRobustness(rvArray)),
1182         $.new("td", getCapabilities(rvArray), null, { colspan: "4" }),
1183         $.new("td", cdmInfo.clearlead ? "Yes" : "No"),
1184         $.new("td", cdmInfo.isHDCP22Compatible ? "Yes" : "No"),
1185       ]);
1186     }
1187
1188     async function insertContentDecryptionModuleInfo() {
1189       let rows = [];
1190       // Retrieve information from GMPCDM
1191       let cdmInfo =
1192         await ChromeUtils.getGMPContentDecryptionModuleInformation();
1193       for (let info of cdmInfo) {
1194         rows.push(createCDMInfoRow(info));
1195       }
1196       // Retrieve information from WMFCDM, only works when MOZ_WMF_CDM is true
1197       if (ChromeUtils.getWMFContentDecryptionModuleInformation !== undefined) {
1198         cdmInfo = await ChromeUtils.getWMFContentDecryptionModuleInformation();
1199         for (let info of cdmInfo) {
1200           rows.push(createCDMInfoRow(info));
1201         }
1202       }
1203       $.append($("media-content-decryption-modules-tbody"), rows);
1204     }
1205
1206     // Basic information
1207     insertBasicInfo("audio-backend", data.currentAudioBackend);
1208     insertBasicInfo("max-audio-channels", data.currentMaxAudioChannels);
1209     insertBasicInfo("sample-rate", data.currentPreferredSampleRate);
1210
1211     if (AppConstants.platform == "macosx") {
1212       var micStatus = {};
1213       let permission = Cc["@mozilla.org/ospermissionrequest;1"].getService(
1214         Ci.nsIOSPermissionRequest
1215       );
1216       permission.getAudioCapturePermissionState(micStatus);
1217       if (micStatus.value == permission.PERMISSION_STATE_AUTHORIZED) {
1218         roundtripAudioLatency();
1219       }
1220     } else {
1221       roundtripAudioLatency();
1222     }
1223
1224     // Output devices information
1225     insertDeviceInfo("output", data.audioOutputDevices);
1226
1227     // Input devices information
1228     insertDeviceInfo("input", data.audioInputDevices);
1229
1230     // Media Capabilitites
1231     insertEnumerateDatabase();
1232
1233     // Create codec support matrix if possible
1234     let supportInfo = null;
1235     if (data.codecSupportInfo.length) {
1236       const [
1237         supportText,
1238         unsupportedText,
1239         codecNameHeaderText,
1240         codecSWDecodeText,
1241         codecHWDecodeText,
1242         lackOfExtensionText,
1243       ] = await document.l10n.formatValues([
1244         "media-codec-support-supported",
1245         "media-codec-support-unsupported",
1246         "media-codec-support-codec-name",
1247         "media-codec-support-sw-decoding",
1248         "media-codec-support-hw-decoding",
1249         "media-codec-support-lack-of-extension",
1250       ]);
1251
1252       function formatCodecRowHeader(a, b, c) {
1253         let h1 = $.new("th", a);
1254         let h2 = $.new("th", b);
1255         let h3 = $.new("th", c);
1256         h1.classList.add("codec-table-name");
1257         h2.classList.add("codec-table-sw");
1258         h3.classList.add("codec-table-hw");
1259         return $.new("tr", [h1, h2, h3]);
1260       }
1261
1262       function formatCodecRow(codec, sw, hw) {
1263         let swCell = $.new("td", sw ? supportText : unsupportedText);
1264         let hwCell = $.new("td", hw ? supportText : unsupportedText);
1265         if (sw) {
1266           swCell.classList.add("supported");
1267         } else {
1268           swCell.classList.add("unsupported");
1269         }
1270         if (hw) {
1271           hwCell.classList.add("supported");
1272         } else {
1273           hwCell.classList.add("unsupported");
1274         }
1275         return $.new("tr", [$.new("td", codec), swCell, hwCell]);
1276       }
1277
1278       function formatCodecRowForLackOfExtension(codec, sw) {
1279         let swCell = $.new("td", sw ? supportText : unsupportedText);
1280         // Link to AV1 extension on MS store.
1281         let hwCell = $.new("td", [
1282           $.new("a", lackOfExtensionText, null, {
1283             href: "ms-windows-store://pdp/?ProductId=9MVZQVXJBQ9V",
1284           }),
1285         ]);
1286         if (sw) {
1287           swCell.classList.add("supported");
1288         } else {
1289           swCell.classList.add("unsupported");
1290         }
1291         hwCell.classList.add("lack-of-extension");
1292         return $.new("tr", [$.new("td", codec), swCell, hwCell]);
1293       }
1294
1295       // Parse codec support string and create dictionary containing
1296       // SW/HW support information for each codec found
1297       let codecs = {};
1298       for (const codec_string of data.codecSupportInfo.split("\n")) {
1299         const s = codec_string.split(" ");
1300         const codec_name = s[0];
1301         const codec_support = s.slice(1);
1302
1303         if (!(codec_name in codecs)) {
1304           codecs[codec_name] = {
1305             name: codec_name,
1306             sw: false,
1307             hw: false,
1308             lackOfExtension: false,
1309           };
1310         }
1311
1312         if (codec_support.includes("SW")) {
1313           codecs[codec_name].sw = true;
1314         }
1315         if (codec_support.includes("HW")) {
1316           codecs[codec_name].hw = true;
1317         }
1318         if (codec_support.includes("LACK_OF_EXTENSION")) {
1319           codecs[codec_name].lackOfExtension = true;
1320         }
1321       }
1322
1323       // Create row in support table for each codec
1324       let codecSupportRows = [];
1325       for (const c in codecs) {
1326         if (!codecs.hasOwnProperty(c)) {
1327           continue;
1328         }
1329         if (codecs[c].lackOfExtension) {
1330           codecSupportRows.push(
1331             formatCodecRowForLackOfExtension(codecs[c].name, codecs[c].sw)
1332           );
1333         } else {
1334           codecSupportRows.push(
1335             formatCodecRow(codecs[c].name, codecs[c].sw, codecs[c].hw)
1336           );
1337         }
1338       }
1339
1340       let codecSupportTable = $.new("table", [
1341         formatCodecRowHeader(
1342           codecNameHeaderText,
1343           codecSWDecodeText,
1344           codecHWDecodeText
1345         ),
1346         $.new("tbody", codecSupportRows),
1347       ]);
1348       codecSupportTable.id = "codec-table";
1349       supportInfo = [codecSupportTable];
1350     } else {
1351       // Don't have access to codec support information
1352       supportInfo = await document.l10n.formatValue(
1353         "media-codec-support-error"
1354       );
1355     }
1356     if (["win", "macosx", "linux", "android"].includes(AppConstants.platform)) {
1357       insertBasicInfo("media-codec-support-info", supportInfo);
1358     }
1359
1360     // CDM info
1361     insertContentDecryptionModuleInfo();
1362   },
1363
1364   remoteAgent(data) {
1365     if (!AppConstants.ENABLE_WEBDRIVER) {
1366       return;
1367     }
1368     $("remote-debugging-accepting-connections").textContent = data.running;
1369     $("remote-debugging-url").textContent = data.url;
1370   },
1371
1372   contentAnalysis(data) {
1373     $("content-analysis-active").textContent = data.active;
1374     if (data.active) {
1375       $("content-analysis-connected-to-agent").textContent = data.connected;
1376       $("content-analysis-agent-path").textContent = data.agentPath;
1377       $("content-analysis-agent-failed-signature-verification").textContent =
1378         data.failedSignatureVerification;
1379       $("content-analysis-request-count").textContent = data.requestCount;
1380     }
1381   },
1382
1383   accessibility(data) {
1384     $("a11y-activated").textContent = data.isActive;
1385     $("a11y-force-disabled").textContent = data.forceDisabled || 0;
1386
1387     let a11yInstantiator = $("a11y-instantiator");
1388     if (a11yInstantiator) {
1389       a11yInstantiator.textContent = data.instantiator;
1390     }
1391   },
1392
1393   startupCache(data) {
1394     $("startup-cache-disk-cache-path").textContent = data.DiskCachePath;
1395     $("startup-cache-ignore-disk-cache").textContent = data.IgnoreDiskCache;
1396     $("startup-cache-found-disk-cache-on-init").textContent =
1397       data.FoundDiskCacheOnInit;
1398     $("startup-cache-wrote-to-disk-cache").textContent = data.WroteToDiskCache;
1399   },
1400
1401   libraryVersions(data) {
1402     let trs = [
1403       $.new("tr", [
1404         $.new("th", ""),
1405         $.new("th", null, null, { "data-l10n-id": "min-lib-versions" }),
1406         $.new("th", null, null, { "data-l10n-id": "loaded-lib-versions" }),
1407       ]),
1408     ];
1409     sortedArrayFromObject(data).forEach(function ([name, val]) {
1410       trs.push(
1411         $.new("tr", [
1412           $.new("td", name),
1413           $.new("td", val.minVersion),
1414           $.new("td", val.version),
1415         ])
1416       );
1417     });
1418     $.append($("libversions-tbody"), trs);
1419   },
1420
1421   userJS(data) {
1422     if (!data.exists) {
1423       return;
1424     }
1425     let userJSFile = Services.dirsvc.get("PrefD", Ci.nsIFile);
1426     userJSFile.append("user.js");
1427     $("prefs-user-js-link").href = Services.io.newFileURI(userJSFile).spec;
1428     $("prefs-user-js-section").style.display = "";
1429     // Clear the no-copy class
1430     $("prefs-user-js-section").className = "";
1431   },
1432
1433   sandbox(data) {
1434     if (!AppConstants.MOZ_SANDBOX) {
1435       return;
1436     }
1437
1438     let tbody = $("sandbox-tbody");
1439     for (let key in data) {
1440       // Simplify the display a little in the common case.
1441       if (
1442         key === "hasPrivilegedUserNamespaces" &&
1443         data[key] === data.hasUserNamespaces
1444       ) {
1445         continue;
1446       }
1447       if (key === "syscallLog") {
1448         // Not in this table.
1449         continue;
1450       }
1451       let keyStrId = toFluentID(key);
1452       let th = $.new("th", null, "column");
1453       document.l10n.setAttributes(th, keyStrId);
1454       tbody.appendChild($.new("tr", [th, $.new("td", data[key])]));
1455     }
1456
1457     if ("syscallLog" in data) {
1458       let syscallBody = $("sandbox-syscalls-tbody");
1459       let argsHead = $("sandbox-syscalls-argshead");
1460       for (let syscall of data.syscallLog) {
1461         if (argsHead.colSpan < syscall.args.length) {
1462           argsHead.colSpan = syscall.args.length;
1463         }
1464         let procTypeStrId = toFluentID(syscall.procType);
1465         let cells = [
1466           $.new("td", syscall.index, "integer"),
1467           $.new("td", syscall.msecAgo / 1000),
1468           $.new("td", syscall.pid, "integer"),
1469           $.new("td", syscall.tid, "integer"),
1470           $.new("td", null, null, {
1471             "data-l10n-id": "sandbox-proc-type-" + procTypeStrId,
1472           }),
1473           $.new("td", syscall.syscall, "integer"),
1474         ];
1475         for (let arg of syscall.args) {
1476           cells.push($.new("td", arg, "integer"));
1477         }
1478         syscallBody.appendChild($.new("tr", cells));
1479       }
1480     }
1481   },
1482
1483   intl(data) {
1484     $("intl-locale-requested").textContent = JSON.stringify(
1485       data.localeService.requested
1486     );
1487     $("intl-locale-available").textContent = JSON.stringify(
1488       data.localeService.available
1489     );
1490     $("intl-locale-supported").textContent = JSON.stringify(
1491       data.localeService.supported
1492     );
1493     $("intl-locale-regionalprefs").textContent = JSON.stringify(
1494       data.localeService.regionalPrefs
1495     );
1496     $("intl-locale-default").textContent = JSON.stringify(
1497       data.localeService.defaultLocale
1498     );
1499
1500     $("intl-osprefs-systemlocales").textContent = JSON.stringify(
1501       data.osPrefs.systemLocales
1502     );
1503     $("intl-osprefs-regionalprefs").textContent = JSON.stringify(
1504       data.osPrefs.regionalPrefsLocales
1505     );
1506   },
1507
1508   normandy(data) {
1509     if (!data) {
1510       return;
1511     }
1512
1513     const {
1514       prefStudies,
1515       addonStudies,
1516       prefRollouts,
1517       nimbusExperiments,
1518       nimbusRollouts,
1519     } = data;
1520     $.append(
1521       $("remote-features-tbody"),
1522       prefRollouts.map(({ slug, state }) =>
1523         $.new("tr", [
1524           $.new("td", [document.createTextNode(slug)]),
1525           $.new("td", [document.createTextNode(state)]),
1526         ])
1527       )
1528     );
1529
1530     $.append(
1531       $("remote-features-tbody"),
1532       nimbusRollouts.map(({ userFacingName, branch }) =>
1533         $.new("tr", [
1534           $.new("td", [document.createTextNode(userFacingName)]),
1535           $.new("td", [document.createTextNode(`(${branch.slug})`)]),
1536         ])
1537       )
1538     );
1539     $.append(
1540       $("remote-experiments-tbody"),
1541       [addonStudies, prefStudies, nimbusExperiments]
1542         .flat()
1543         .map(({ userFacingName, branch }) =>
1544           $.new("tr", [
1545             $.new("td", [document.createTextNode(userFacingName)]),
1546             $.new("td", [document.createTextNode(branch?.slug || branch)]),
1547           ])
1548         )
1549     );
1550   },
1551 };
1552
1553 var $ = document.getElementById.bind(document);
1554
1555 $.new = function $_new(tag, textContentOrChildren, className, attributes) {
1556   let elt = document.createElement(tag);
1557   if (className) {
1558     elt.className = className;
1559   }
1560   if (attributes) {
1561     if (attributes["data-l10n-id"]) {
1562       let args = attributes.hasOwnProperty("data-l10n-args")
1563         ? attributes["data-l10n-args"]
1564         : undefined;
1565       document.l10n.setAttributes(elt, attributes["data-l10n-id"], args);
1566       delete attributes["data-l10n-id"];
1567       if (args) {
1568         delete attributes["data-l10n-args"];
1569       }
1570     }
1571
1572     for (let attrName in attributes) {
1573       elt.setAttribute(attrName, attributes[attrName]);
1574     }
1575   }
1576   if (Array.isArray(textContentOrChildren)) {
1577     this.append(elt, textContentOrChildren);
1578   } else if (!attributes || !attributes["data-l10n-id"]) {
1579     elt.textContent = String(textContentOrChildren);
1580   }
1581   return elt;
1582 };
1583
1584 $.append = function $_append(parent, children) {
1585   children.forEach(c => parent.appendChild(c));
1586 };
1587
1588 function assembleFromGraphicsFailure(i, data) {
1589   // Only cover the cases we have today; for example, we do not have
1590   // log failures that assert and we assume the log level is 1/error.
1591   let message = data.failures[i];
1592   let index = data.indices[i];
1593   let what = "";
1594   if (message.search(/\[GFX1-\]: \(LF\)/) == 0) {
1595     // Non-asserting log failure - the message is substring(14)
1596     what = "LogFailure";
1597     message = message.substring(14);
1598   } else if (message.search(/\[GFX1-\]: /) == 0) {
1599     // Non-asserting - the message is substring(9)
1600     what = "Error";
1601     message = message.substring(9);
1602   } else if (message.search(/\[GFX1\]: /) == 0) {
1603     // Asserting - the message is substring(8)
1604     what = "Assert";
1605     message = message.substring(8);
1606   }
1607   let assembled = {
1608     index,
1609     header: "(#" + index + ") " + what,
1610     message,
1611   };
1612   return assembled;
1613 }
1614
1615 function sortedArrayFromObject(obj) {
1616   let tuples = [];
1617   for (let prop in obj) {
1618     tuples.push([prop, obj[prop]]);
1619   }
1620   tuples.sort(([prop1], [prop2]) => prop1.localeCompare(prop2));
1621   return tuples;
1622 }
1623
1624 function copyRawDataToClipboard(button) {
1625   if (button) {
1626     button.disabled = true;
1627   }
1628   Troubleshoot.snapshot().then(
1629     async snapshot => {
1630       if (button) {
1631         button.disabled = false;
1632       }
1633       let str = Cc["@mozilla.org/supports-string;1"].createInstance(
1634         Ci.nsISupportsString
1635       );
1636       str.data = JSON.stringify(snapshot, undefined, 2);
1637       let transferable = Cc[
1638         "@mozilla.org/widget/transferable;1"
1639       ].createInstance(Ci.nsITransferable);
1640       transferable.init(getLoadContext());
1641       transferable.addDataFlavor("text/plain");
1642       transferable.setTransferData("text/plain", str);
1643       Services.clipboard.setData(
1644         transferable,
1645         null,
1646         Ci.nsIClipboard.kGlobalClipboard
1647       );
1648     },
1649     err => {
1650       if (button) {
1651         button.disabled = false;
1652       }
1653       console.error(err);
1654     }
1655   );
1656 }
1657
1658 function getLoadContext() {
1659   return window.docShell.QueryInterface(Ci.nsILoadContext);
1660 }
1661
1662 async function copyContentsToClipboard() {
1663   // Get the HTML and text representations for the important part of the page.
1664   let contentsDiv = $("contents").cloneNode(true);
1665   // Remove the items we don't want to copy from the clone:
1666   contentsDiv.querySelectorAll(".no-copy, [hidden]").forEach(n => n.remove());
1667   let dataHtml = contentsDiv.innerHTML;
1668   let dataText = createTextForElement(contentsDiv);
1669
1670   // We can't use plain strings, we have to use nsSupportsString.
1671   let supportsStringClass = Cc["@mozilla.org/supports-string;1"];
1672   let ssHtml = supportsStringClass.createInstance(Ci.nsISupportsString);
1673   let ssText = supportsStringClass.createInstance(Ci.nsISupportsString);
1674
1675   let transferable = Cc["@mozilla.org/widget/transferable;1"].createInstance(
1676     Ci.nsITransferable
1677   );
1678   transferable.init(getLoadContext());
1679
1680   // Add the HTML flavor.
1681   transferable.addDataFlavor("text/html");
1682   ssHtml.data = dataHtml;
1683   transferable.setTransferData("text/html", ssHtml);
1684
1685   // Add the plain text flavor.
1686   transferable.addDataFlavor("text/plain");
1687   ssText.data = dataText;
1688   transferable.setTransferData("text/plain", ssText);
1689
1690   // Store the data into the clipboard.
1691   Services.clipboard.setData(
1692     transferable,
1693     null,
1694     Services.clipboard.kGlobalClipboard
1695   );
1696 }
1697
1698 // Return the plain text representation of an element.  Do a little bit
1699 // of pretty-printing to make it human-readable.
1700 function createTextForElement(elem) {
1701   let serializer = new Serializer();
1702   let text = serializer.serialize(elem);
1703
1704   // Actual CR/LF pairs are needed for some Windows text editors.
1705   if (AppConstants.platform == "win") {
1706     text = text.replace(/\n/g, "\r\n");
1707   }
1708
1709   return text;
1710 }
1711
1712 function Serializer() {}
1713
1714 Serializer.prototype = {
1715   serialize(rootElem) {
1716     this._lines = [];
1717     this._startNewLine();
1718     this._serializeElement(rootElem);
1719     this._startNewLine();
1720     return this._lines.join("\n").trim() + "\n";
1721   },
1722
1723   // The current line is always the line that writing will start at next.  When
1724   // an element is serialized, the current line is updated to be the line at
1725   // which the next element should be written.
1726   get _currentLine() {
1727     return this._lines.length ? this._lines[this._lines.length - 1] : null;
1728   },
1729
1730   set _currentLine(val) {
1731     this._lines[this._lines.length - 1] = val;
1732   },
1733
1734   _serializeElement(elem) {
1735     // table
1736     if (elem.localName == "table") {
1737       this._serializeTable(elem);
1738       return;
1739     }
1740
1741     // all other elements
1742
1743     let hasText = false;
1744     for (let child of elem.childNodes) {
1745       if (child.nodeType == Node.TEXT_NODE) {
1746         let text = this._nodeText(child);
1747         this._appendText(text);
1748         hasText = hasText || !!text.trim();
1749       } else if (child.nodeType == Node.ELEMENT_NODE) {
1750         this._serializeElement(child);
1751       }
1752     }
1753
1754     // For headings, draw a "line" underneath them so they stand out.
1755     let isHeader = /^h[0-9]+$/.test(elem.localName);
1756     if (isHeader) {
1757       let headerText = (this._currentLine || "").trim();
1758       if (headerText) {
1759         this._startNewLine();
1760         this._appendText("-".repeat(headerText.length));
1761       }
1762     }
1763
1764     // Add a blank line underneath elements but only if they contain text.
1765     if (hasText && (isHeader || "p" == elem.localName)) {
1766       this._startNewLine();
1767       this._startNewLine();
1768     }
1769   },
1770
1771   _startNewLine() {
1772     let currLine = this._currentLine;
1773     if (currLine) {
1774       // The current line is not empty.  Trim it.
1775       this._currentLine = currLine.trim();
1776       if (!this._currentLine) {
1777         // The current line became empty.  Discard it.
1778         this._lines.pop();
1779       }
1780     }
1781     this._lines.push("");
1782   },
1783
1784   _appendText(text) {
1785     this._currentLine += text;
1786   },
1787
1788   _isHiddenSubHeading(th) {
1789     return th.parentNode.parentNode.style.display == "none";
1790   },
1791
1792   _serializeTable(table) {
1793     // Collect the table's column headings if in fact there are any.  First
1794     // check thead.  If there's no thead, check the first tr.
1795     let colHeadings = {};
1796     let tableHeadingElem = table.querySelector("thead");
1797     if (!tableHeadingElem) {
1798       tableHeadingElem = table.querySelector("tr");
1799     }
1800     if (tableHeadingElem) {
1801       let tableHeadingCols = tableHeadingElem.querySelectorAll("th,td");
1802       // If there's a contiguous run of th's in the children starting from the
1803       // rightmost child, then consider them to be column headings.
1804       for (let i = tableHeadingCols.length - 1; i >= 0; i--) {
1805         let col = tableHeadingCols[i];
1806         if (col.localName != "th" || col.classList.contains("title-column")) {
1807           break;
1808         }
1809         colHeadings[i] = this._nodeText(col).trim();
1810       }
1811     }
1812     let hasColHeadings = !!Object.keys(colHeadings).length;
1813     if (!hasColHeadings) {
1814       tableHeadingElem = null;
1815     }
1816
1817     let trs = table.querySelectorAll("table > tr, tbody > tr");
1818     let startRow =
1819       tableHeadingElem && tableHeadingElem.localName == "tr" ? 1 : 0;
1820
1821     if (startRow >= trs.length) {
1822       // The table's empty.
1823       return;
1824     }
1825
1826     if (hasColHeadings) {
1827       // Use column headings.  Print each tr as a multi-line chunk like:
1828       //   Heading 1: Column 1 value
1829       //   Heading 2: Column 2 value
1830       for (let i = startRow; i < trs.length; i++) {
1831         let children = trs[i].querySelectorAll("td");
1832         for (let j = 0; j < children.length; j++) {
1833           let text = "";
1834           if (colHeadings[j]) {
1835             text += colHeadings[j] + ": ";
1836           }
1837           text += this._nodeText(children[j]).trim();
1838           this._appendText(text);
1839           this._startNewLine();
1840         }
1841         this._startNewLine();
1842       }
1843       return;
1844     }
1845
1846     // Don't use column headings.  Assume the table has only two columns and
1847     // print each tr in a single line like:
1848     //   Column 1 value: Column 2 value
1849     for (let i = startRow; i < trs.length; i++) {
1850       let children = trs[i].querySelectorAll("th,td");
1851       let rowHeading = this._nodeText(children[0]).trim();
1852       if (children[0].classList.contains("title-column")) {
1853         if (!this._isHiddenSubHeading(children[0])) {
1854           this._appendText(rowHeading);
1855         }
1856       } else if (children.length == 1) {
1857         // This is a single-cell row.
1858         this._appendText(rowHeading);
1859       } else {
1860         let childTables = trs[i].querySelectorAll("table");
1861         if (childTables.length) {
1862           // If we have child tables, don't use nodeText - its trs are already
1863           // queued up from querySelectorAll earlier.
1864           this._appendText(rowHeading + ": ");
1865         } else {
1866           this._appendText(rowHeading + ": ");
1867           for (let k = 1; k < children.length; k++) {
1868             let l = this._nodeText(children[k]).trim();
1869             if (l == "") {
1870               continue;
1871             }
1872             if (k < children.length - 1) {
1873               l += ", ";
1874             }
1875             this._appendText(l);
1876           }
1877         }
1878       }
1879       this._startNewLine();
1880     }
1881     this._startNewLine();
1882   },
1883
1884   _nodeText(node) {
1885     return node.textContent.replace(/\s+/g, " ");
1886   },
1887 };
1888
1889 function openProfileDirectory() {
1890   // Get the profile directory.
1891   let currProfD = Services.dirsvc.get("ProfD", Ci.nsIFile);
1892   let profileDir = currProfD.path;
1893
1894   // Show the profile directory.
1895   let nsLocalFile = Components.Constructor(
1896     "@mozilla.org/file/local;1",
1897     "nsIFile",
1898     "initWithPath"
1899   );
1900   new nsLocalFile(profileDir).reveal();
1901 }
1902
1903 /**
1904  * Profile reset is only supported for the default profile if the appropriate migrator exists.
1905  */
1906 function populateActionBox() {
1907   if (ResetProfile.resetSupported()) {
1908     $("reset-box").style.display = "block";
1909   }
1910   if (!Services.appinfo.inSafeMode && AppConstants.platform !== "android") {
1911     $("safe-mode-box").style.display = "block";
1912
1913     if (Services.policies && !Services.policies.isAllowed("safeMode")) {
1914       $("restart-in-safe-mode-button").setAttribute("disabled", "true");
1915     }
1916   }
1917 }
1918
1919 // Prompt user to restart the browser in safe mode
1920 function safeModeRestart() {
1921   let cancelQuit = Cc["@mozilla.org/supports-PRBool;1"].createInstance(
1922     Ci.nsISupportsPRBool
1923   );
1924   Services.obs.notifyObservers(
1925     cancelQuit,
1926     "quit-application-requested",
1927     "restart"
1928   );
1929
1930   if (!cancelQuit.data) {
1931     Services.startup.restartInSafeMode(Ci.nsIAppStartup.eAttemptQuit);
1932   }
1933 }
1934 /**
1935  * Set up event listeners for buttons.
1936  */
1937 function setupEventListeners() {
1938   let button = $("reset-box-button");
1939   if (button) {
1940     button.addEventListener("click", function () {
1941       ResetProfile.openConfirmationDialog(window);
1942     });
1943   }
1944   button = $("clear-startup-cache-button");
1945   if (button) {
1946     button.addEventListener("click", async function () {
1947       const [promptTitle, promptBody, restartButtonLabel] =
1948         await document.l10n.formatValues([
1949           { id: "startup-cache-dialog-title2" },
1950           { id: "startup-cache-dialog-body2" },
1951           { id: "restart-button-label" },
1952         ]);
1953       const buttonFlags =
1954         Services.prompt.BUTTON_POS_0 * Services.prompt.BUTTON_TITLE_IS_STRING +
1955         Services.prompt.BUTTON_POS_1 * Services.prompt.BUTTON_TITLE_CANCEL +
1956         Services.prompt.BUTTON_POS_0_DEFAULT;
1957       const result = Services.prompt.confirmEx(
1958         window.docShell.chromeEventHandler.ownerGlobal,
1959         promptTitle,
1960         promptBody,
1961         buttonFlags,
1962         restartButtonLabel,
1963         null,
1964         null,
1965         null,
1966         {}
1967       );
1968       if (result !== 0) {
1969         return;
1970       }
1971       Services.appinfo.invalidateCachesOnRestart();
1972       Services.startup.quit(
1973         Ci.nsIAppStartup.eRestart | Ci.nsIAppStartup.eAttemptQuit
1974       );
1975     });
1976   }
1977   button = $("restart-in-safe-mode-button");
1978   if (button) {
1979     button.addEventListener("click", function () {
1980       if (
1981         Services.obs
1982           .enumerateObservers("restart-in-safe-mode")
1983           .hasMoreElements()
1984       ) {
1985         Services.obs.notifyObservers(
1986           window.docShell.chromeEventHandler.ownerGlobal,
1987           "restart-in-safe-mode"
1988         );
1989       } else {
1990         safeModeRestart();
1991       }
1992     });
1993   }
1994   if (AppConstants.MOZ_UPDATER) {
1995     button = $("update-dir-button");
1996     if (button) {
1997       button.addEventListener("click", function () {
1998         // Get the update directory.
1999         let updateDir = Services.dirsvc.get("UpdRootD", Ci.nsIFile);
2000         if (!updateDir.exists()) {
2001           updateDir.create(Ci.nsIFile.DIRECTORY_TYPE, 0o755);
2002         }
2003         let updateDirPath = updateDir.path;
2004         // Show the update directory.
2005         let nsLocalFile = Components.Constructor(
2006           "@mozilla.org/file/local;1",
2007           "nsIFile",
2008           "initWithPath"
2009         );
2010         new nsLocalFile(updateDirPath).reveal();
2011       });
2012     }
2013     button = $("show-update-history-button");
2014     if (button) {
2015       button.addEventListener("click", function () {
2016         window.browsingContext.topChromeWindow.openDialog(
2017           "chrome://mozapps/content/update/history.xhtml",
2018           "Update:History",
2019           "centerscreen,resizable=no,titlebar,modal"
2020         );
2021       });
2022     }
2023   }
2024   button = $("verify-place-integrity-button");
2025   if (button) {
2026     button.addEventListener("click", function () {
2027       PlacesDBUtils.checkAndFixDatabase().then(tasksStatusMap => {
2028         let logs = [];
2029         for (let [key, value] of tasksStatusMap) {
2030           logs.push(`> Task: ${key}`);
2031           let prefix = value.succeeded ? "+ " : "- ";
2032           logs = logs.concat(value.logs.map(m => `${prefix}${m}`));
2033         }
2034         $("verify-place-result").style.display = "block";
2035         $("verify-place-result").classList.remove("no-copy");
2036         $("verify-place-result").textContent = logs.join("\n");
2037       });
2038     });
2039   }
2040
2041   $("copy-raw-data-to-clipboard").addEventListener("click", function () {
2042     copyRawDataToClipboard(this);
2043   });
2044   $("copy-to-clipboard").addEventListener("click", function () {
2045     copyContentsToClipboard();
2046   });
2047   $("profile-dir-button").addEventListener("click", function () {
2048     openProfileDirectory();
2049   });
2050 }
2051
2052 /**
2053  * Scroll to section specified by location.hash
2054  */
2055 function scrollToSection() {
2056   const id = location.hash.substr(1);
2057   const elem = $(id);
2058
2059   if (elem) {
2060     elem.scrollIntoView();
2061   }
2062 }