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(event) {
  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     delete data.windowLayerManagerRemote;
 718     delete data.windowLayerManagerType;
 719     delete data.numTotalWindows;
 720     delete data.numAcceleratedWindows;
 721     delete data.numAcceleratedWindowsMessage;
 722     delete data.graphicsDevicePixelRatios;
 723
 724     addRow(
 725       "features",
 726       "asyncPanZoom",
 727       apzInfo.length
 728         ? [
 729             new Text(
 730               (
 731                 await document.l10n.formatValues(
 732                   apzInfo.map(id => {
 733                     return { id };
 734                   })
 735                 )
 736               ).join("; ")
 737             ),
 738           ]
 739         : "apz-none"
 740     );
 741     let featureKeys = [
 742       "webgl1WSIInfo",
 743       "webgl1Renderer",
 744       "webgl1Version",
 745       "webgl1DriverExtensions",
 746       "webgl1Extensions",
 747       "webgl2WSIInfo",
 748       "webgl2Renderer",
 749       "webgl2Version",
 750       "webgl2DriverExtensions",
 751       "webgl2Extensions",
 752       ["supportsHardwareH264", "hardware-h264"],
 753       ["direct2DEnabled", "#Direct2D"],
 754       ["windowProtocol", "graphics-window-protocol"],
 755       ["desktopEnvironment", "graphics-desktop-environment"],
 756       "targetFrameRate",
 757     ];
 758     for (let feature of featureKeys) {
 759       if (Array.isArray(feature)) {
 760         await addRowFromKey("features", feature[0], feature[1]);
 761         continue;
 762       }
 763       await addRowFromKey("features", feature);
 764     }
 765
 766     featureKeys = ["webgpuDefaultAdapter", "webgpuFallbackAdapter"];
 767     for (let feature of featureKeys) {
 768       const obj = data[feature];
 769       if (obj) {
 770         const str = JSON.stringify(obj, null, "  ");
 771         await addRow("features", feature, [new Text(str)]);
 772         delete data[feature];
 773       }
 774     }
 775
 776     if ("directWriteEnabled" in data) {
 777       let message = data.directWriteEnabled;
 778       if ("directWriteVersion" in data) {
 779         message += " (" + data.directWriteVersion + ")";
 780       }
 781       await addRow("features", "#DirectWrite", [new Text(message)]);
 782       delete data.directWriteEnabled;
 783       delete data.directWriteVersion;
 784     }
 785
 786     // Adapter tbodies.
 787     let adapterKeys = [
 788       ["adapterDescription", "gpu-description"],
 789       ["adapterVendorID", "gpu-vendor-id"],
 790       ["adapterDeviceID", "gpu-device-id"],
 791       ["driverVendor", "gpu-driver-vendor"],
 792       ["driverVersion", "gpu-driver-version"],
 793       ["driverDate", "gpu-driver-date"],
 794       ["adapterDrivers", "gpu-drivers"],
 795       ["adapterSubsysID", "gpu-subsys-id"],
 796       ["adapterRAM", "gpu-ram"],
 797     ];
 798
 799     function showGpu(id, suffix) {
 800       function get(prop) {
 801         return data[prop + suffix];
 802       }
 803
 804       let trs = [];
 805       for (let [prop, key] of adapterKeys) {
 806         let value = get(prop);
 807         if (value === undefined || value === "") {
 808           continue;
 809         }
 810         trs.push(buildRow(key, [new Text(value)]));
 811       }
 812
 813       if (!trs.length) {
 814         $("graphics-" + id + "-tbody").style.display = "none";
 815         return;
 816       }
 817
 818       let active = "yes";
 819       if ("isGPU2Active" in data && (suffix == "2") != data.isGPU2Active) {
 820         active = "no";
 821       }
 822
 823       addRow(id, "gpu-active", active);
 824       addRows(id, trs);
 825     }
 826     showGpu("gpu-1", "");
 827     showGpu("gpu-2", "2");
 828
 829     // Remove adapter keys.
 830     for (let [prop /* key */] of adapterKeys) {
 831       delete data[prop];
 832       delete data[prop + "2"];
 833     }
 834     delete data.isGPU2Active;
 835
 836     let featureLog = data.featureLog;
 837     delete data.featureLog;
 838
 839     if (featureLog.features.length) {
 840       for (let feature of featureLog.features) {
 841         let trs = [];
 842         for (let entry of feature.log) {
 843           let bugNumber;
 844           if (entry.hasOwnProperty("failureId")) {
 845             // This is a failure ID. See nsIGfxInfo.idl.
 846             let m = /BUG_(\d+)/.exec(entry.failureId);
 847             if (m) {
 848               bugNumber = m[1];
 849             }
 850           }
 851
 852           let failureIdSpan = $.new("span", "");
 853           if (bugNumber) {
 854             let bugHref = $.new("a");
 855             bugHref.href =
 856               "https://bugzilla.mozilla.org/show_bug.cgi?id=" + bugNumber;
 857             bugHref.setAttribute("data-l10n-name", "bug-link");
 858             failureIdSpan.append(bugHref);
 859             document.l10n.setAttributes(
 860               failureIdSpan,
 861               "support-blocklisted-bug",
 862               {
 863                 bugNumber,
 864               }
 865             );
 866           } else if (
 867             entry.hasOwnProperty("failureId") &&
 868             entry.failureId.length
 869           ) {
 870             document.l10n.setAttributes(failureIdSpan, "unknown-failure", {
 871               failureCode: entry.failureId,
 872             });
 873           }
 874
 875           let messageSpan = $.new("span", "");
 876           if (entry.hasOwnProperty("message") && entry.message.length) {
 877             messageSpan.innerText = entry.message;
 878           }
 879
 880           let typeCol = $.new("td", entry.type);
 881           let statusCol = $.new("td", entry.status);
 882           let messageCol = $.new("td", "");
 883           let failureIdCol = $.new("td", "");
 884           typeCol.style.width = "10%";
 885           statusCol.style.width = "10%";
 886           messageCol.style.width = "30%";
 887           messageCol.appendChild(messageSpan);
 888           failureIdCol.style.width = "50%";
 889           failureIdCol.appendChild(failureIdSpan);
 890
 891           trs.push($.new("tr", [typeCol, statusCol, messageCol, failureIdCol]));
 892         }
 893         addRow("decisions", "#" + feature.name, [$.new("table", trs)]);
 894       }
 895     } else {
 896       $("graphics-decisions-tbody").style.display = "none";
 897     }
 898
 899     if (featureLog.fallbacks.length) {
 900       for (let fallback of featureLog.fallbacks) {
 901         addRow("workarounds", "#" + fallback.name, [
 902           new Text(fallback.message),
 903         ]);
 904       }
 905     } else {
 906       $("graphics-workarounds-tbody").style.display = "none";
 907     }
 908
 909     let crashGuards = data.crashGuards;
 910     delete data.crashGuards;
 911
 912     if (crashGuards.length) {
 913       for (let guard of crashGuards) {
 914         let resetButton = $.new("button");
 915         let onClickReset = function () {
 916           Services.prefs.setIntPref(guard.prefName, 0);
 917           resetButton.removeEventListener("click", onClickReset);
 918           resetButton.disabled = true;
 919         };
 920
 921         document.l10n.setAttributes(resetButton, "reset-on-next-restart");
 922         resetButton.addEventListener("click", onClickReset);
 923
 924         addRow("crashguards", guard.type + "CrashGuard", [resetButton]);
 925       }
 926     } else {
 927       $("graphics-crashguards-tbody").style.display = "none";
 928     }
 929
 930     // Now that we're done, grab any remaining keys in data and drop them into
 931     // the diagnostics section.
 932     for (let key in data) {
 933       let value = data[key];
 934       addRow("diagnostics", key, [new Text(value)]);
 935     }
 936   },
 937
 938   async media(data) {
 939     function insertBasicInfo(key, value) {
 940       function createRow(key, value) {
 941         let th = $.new("th", null, "column");
 942         document.l10n.setAttributes(th, key);
 943         let td = $.new("td", value);
 944         td.style["white-space"] = "pre-wrap";
 945         td.colSpan = 8;
 946         return $.new("tr", [th, td]);
 947       }
 948       $.append($("media-info-tbody"), [createRow(key, value)]);
 949     }
 950
 951     function createDeviceInfoRow(device) {
 952       let deviceInfo = Ci.nsIAudioDeviceInfo;
 953
 954       let states = {};
 955       states[deviceInfo.STATE_DISABLED] = "Disabled";
 956       states[deviceInfo.STATE_UNPLUGGED] = "Unplugged";
 957       states[deviceInfo.STATE_ENABLED] = "Enabled";
 958
 959       let preferreds = {};
 960       preferreds[deviceInfo.PREF_NONE] = "None";
 961       preferreds[deviceInfo.PREF_MULTIMEDIA] = "Multimedia";
 962       preferreds[deviceInfo.PREF_VOICE] = "Voice";
 963       preferreds[deviceInfo.PREF_NOTIFICATION] = "Notification";
 964       preferreds[deviceInfo.PREF_ALL] = "All";
 965
 966       let formats = {};
 967       formats[deviceInfo.FMT_S16LE] = "S16LE";
 968       formats[deviceInfo.FMT_S16BE] = "S16BE";
 969       formats[deviceInfo.FMT_F32LE] = "F32LE";
 970       formats[deviceInfo.FMT_F32BE] = "F32BE";
 971
 972       function toPreferredString(preferred) {
 973         if (preferred == deviceInfo.PREF_NONE) {
 974           return preferreds[deviceInfo.PREF_NONE];
 975         } else if (preferred & deviceInfo.PREF_ALL) {
 976           return preferreds[deviceInfo.PREF_ALL];
 977         }
 978         let str = "";
 979         for (let pref of [
 980           deviceInfo.PREF_MULTIMEDIA,
 981           deviceInfo.PREF_VOICE,
 982           deviceInfo.PREF_NOTIFICATION,
 983         ]) {
 984           if (preferred & pref) {
 985             str += " " + preferreds[pref];
 986           }
 987         }
 988         return str;
 989       }
 990
 991       function toFromatString(dev) {
 992         let str = "default: " + formats[dev.defaultFormat] + ", support:";
 993         for (let fmt of [
 994           deviceInfo.FMT_S16LE,
 995           deviceInfo.FMT_S16BE,
 996           deviceInfo.FMT_F32LE,
 997           deviceInfo.FMT_F32BE,
 998         ]) {
 999           if (dev.supportedFormat & fmt) {
1000             str += " " + formats[fmt];
1001           }
1002         }
1003         return str;
1004       }
1005
1006       function toRateString(dev) {
1007         return (
1008           "default: " +
1009           dev.defaultRate +
1010           ", support: " +
1011           dev.minRate +
1012           " - " +
1013           dev.maxRate
1014         );
1015       }
1016
1017       function toLatencyString(dev) {
1018         return dev.minLatency + " - " + dev.maxLatency;
1019       }
1020
1021       return $.new("tr", [
1022         $.new("td", device.name),
1023         $.new("td", device.groupId),
1024         $.new("td", device.vendor),
1025         $.new("td", states[device.state]),
1026         $.new("td", toPreferredString(device.preferred)),
1027         $.new("td", toFromatString(device)),
1028         $.new("td", device.maxChannels),
1029         $.new("td", toRateString(device)),
1030         $.new("td", toLatencyString(device)),
1031       ]);
1032     }
1033
1034     function insertDeviceInfo(side, devices) {
1035       let rows = [];
1036       for (let dev of devices) {
1037         rows.push(createDeviceInfoRow(dev));
1038       }
1039       $.append($("media-" + side + "-devices-tbody"), rows);
1040     }
1041
1042     function insertEnumerateDatabase() {
1043       if (
1044         !Services.prefs.getBoolPref("media.mediacapabilities.from-database")
1045       ) {
1046         $("media-capabilities-tbody").style.display = "none";
1047         return;
1048       }
1049       let button = $("enumerate-database-button");
1050       if (button) {
1051         button.addEventListener("click", function (event) {
1052           let { KeyValueService } = ChromeUtils.importESModule(
1053             "resource://gre/modules/kvstore.sys.mjs"
1054           );
1055           let currProfDir = Services.dirsvc.get("ProfD", Ci.nsIFile);
1056           currProfDir.append("mediacapabilities");
1057           let path = currProfDir.path;
1058
1059           function enumerateDatabase(name) {
1060             KeyValueService.getOrCreate(path, name)
1061               .then(database => {
1062                 return database.enumerate();
1063               })
1064               .then(enumerator => {
1065                 var logs = [];
1066                 logs.push(`${name}:`);
1067                 while (enumerator.hasMoreElements()) {
1068                   const { key, value } = enumerator.getNext();
1069                   logs.push(`${key}: ${value}`);
1070                 }
1071                 $("enumerate-database-result").textContent +=
1072                   logs.join("\n") + "\n";
1073               })
1074               .catch(err => {
1075                 $("enumerate-database-result").textContent += `${name}:\n`;
1076               });
1077           }
1078
1079           $("enumerate-database-result").style.display = "block";
1080           $("enumerate-database-result").classList.remove("no-copy");
1081           $("enumerate-database-result").textContent = "";
1082
1083           enumerateDatabase("video/av1");
1084           enumerateDatabase("video/vp8");
1085           enumerateDatabase("video/vp9");
1086           enumerateDatabase("video/avc");
1087           enumerateDatabase("video/theora");
1088         });
1089       }
1090     }
1091
1092     function roundtripAudioLatency() {
1093       insertBasicInfo("roundtrip-latency", "...");
1094       window.windowUtils
1095         .defaultDevicesRoundTripLatency()
1096         .then(latency => {
1097           var latencyString = `${(latency[0] * 1000).toFixed(2)}ms (${(
1098             latency[1] * 1000
1099           ).toFixed(2)})`;
1100           data.defaultDevicesRoundTripLatency = latencyString;
1101           document.querySelector(
1102             'th[data-l10n-id="roundtrip-latency"]'
1103           ).nextSibling.textContent = latencyString;
1104         })
1105         .catch(e => {});
1106     }
1107
1108     // Basic information
1109     insertBasicInfo("audio-backend", data.currentAudioBackend);
1110     insertBasicInfo("max-audio-channels", data.currentMaxAudioChannels);
1111     insertBasicInfo("sample-rate", data.currentPreferredSampleRate);
1112
1113     if (AppConstants.platform == "macosx") {
1114       var micStatus = {};
1115       let permission = Cc["@mozilla.org/ospermissionrequest;1"].getService(
1116         Ci.nsIOSPermissionRequest
1117       );
1118       permission.getAudioCapturePermissionState(micStatus);
1119       if (micStatus.value == permission.PERMISSION_STATE_AUTHORIZED) {
1120         roundtripAudioLatency();
1121       }
1122     } else {
1123       roundtripAudioLatency();
1124     }
1125
1126     // Output devices information
1127     insertDeviceInfo("output", data.audioOutputDevices);
1128
1129     // Input devices information
1130     insertDeviceInfo("input", data.audioInputDevices);
1131
1132     // Media Capabilitites
1133     insertEnumerateDatabase();
1134
1135     // Create codec support matrix if possible
1136     let supportInfo = null;
1137     if (data.codecSupportInfo.length) {
1138       const [
1139         supportText,
1140         unsupportedText,
1141         codecNameHeaderText,
1142         codecSWDecodeText,
1143         codecHWDecodeText,
1144       ] = await document.l10n.formatValues([
1145         "media-codec-support-supported",
1146         "media-codec-support-unsupported",
1147         "media-codec-support-codec-name",
1148         "media-codec-support-sw-decoding",
1149         "media-codec-support-hw-decoding",
1150       ]);
1151
1152       function formatCodecRowHeader(a, b, c) {
1153         let h1 = $.new("th", a);
1154         let h2 = $.new("th", b);
1155         let h3 = $.new("th", c);
1156         h1.classList.add("codec-table-name");
1157         h2.classList.add("codec-table-sw");
1158         h3.classList.add("codec-table-hw");
1159         return $.new("tr", [h1, h2, h3]);
1160       }
1161
1162       function formatCodecRow(codec, sw, hw) {
1163         let swCell = $.new("td", sw ? supportText : unsupportedText);
1164         let hwCell = $.new("td", hw ? supportText : unsupportedText);
1165         if (sw) {
1166           swCell.classList.add("supported");
1167         } else {
1168           swCell.classList.add("unsupported");
1169         }
1170         if (hw) {
1171           hwCell.classList.add("supported");
1172         } else {
1173           hwCell.classList.add("unsupported");
1174         }
1175         return $.new("tr", [$.new("td", codec), swCell, hwCell]);
1176       }
1177
1178       // Parse codec support string and create dictionary containing
1179       // SW/HW support information for each codec found
1180       let codecs = {};
1181       for (const codec_string of data.codecSupportInfo.split("\n")) {
1182         const s = codec_string.split(" ");
1183         const codec_name = s[0];
1184         const codec_support = s[1];
1185
1186         if (!(codec_name in codecs)) {
1187           codecs[codec_name] = {
1188             name: codec_name,
1189             sw: false,
1190             hw: false,
1191           };
1192         }
1193
1194         if (codec_support === "SW") {
1195           codecs[codec_name].sw = true;
1196         } else if (codec_support === "HW") {
1197           codecs[codec_name].hw = true;
1198         }
1199       }
1200
1201       // Create row in support table for each codec
1202       let codecSupportRows = [];
1203       for (const c in codecs) {
1204         if (!codecs.hasOwnProperty(c)) {
1205           continue;
1206         }
1207         codecSupportRows.push(
1208           formatCodecRow(codecs[c].name, codecs[c].sw, codecs[c].hw)
1209         );
1210       }
1211
1212       let codecSupportTable = $.new("table", [
1213         formatCodecRowHeader(
1214           codecNameHeaderText,
1215           codecSWDecodeText,
1216           codecHWDecodeText
1217         ),
1218         $.new("tbody", codecSupportRows),
1219       ]);
1220       codecSupportTable.id = "codec-table";
1221       supportInfo = [codecSupportTable];
1222     } else {
1223       // Don't have access to codec support information
1224       supportInfo = await document.l10n.formatValue(
1225         "media-codec-support-error"
1226       );
1227     }
1228     if (["win", "macosx", "linux"].includes(AppConstants.platform)) {
1229       insertBasicInfo("media-codec-support-info", supportInfo);
1230     }
1231   },
1232
1233   remoteAgent(data) {
1234     if (!AppConstants.ENABLE_WEBDRIVER) {
1235       return;
1236     }
1237     $("remote-debugging-accepting-connections").textContent = data.running;
1238     $("remote-debugging-url").textContent = data.url;
1239   },
1240
1241   accessibility(data) {
1242     $("a11y-activated").textContent = data.isActive;
1243     $("a11y-force-disabled").textContent = data.forceDisabled || 0;
1244
1245     let a11yInstantiator = $("a11y-instantiator");
1246     if (a11yInstantiator) {
1247       a11yInstantiator.textContent = data.instantiator;
1248     }
1249   },
1250
1251   startupCache(data) {
1252     $("startup-cache-disk-cache-path").textContent = data.DiskCachePath;
1253     $("startup-cache-ignore-disk-cache").textContent = data.IgnoreDiskCache;
1254     $("startup-cache-found-disk-cache-on-init").textContent =
1255       data.FoundDiskCacheOnInit;
1256     $("startup-cache-wrote-to-disk-cache").textContent = data.WroteToDiskCache;
1257   },
1258
1259   libraryVersions(data) {
1260     let trs = [
1261       $.new("tr", [
1262         $.new("th", ""),
1263         $.new("th", null, null, { "data-l10n-id": "min-lib-versions" }),
1264         $.new("th", null, null, { "data-l10n-id": "loaded-lib-versions" }),
1265       ]),
1266     ];
1267     sortedArrayFromObject(data).forEach(function ([name, val]) {
1268       trs.push(
1269         $.new("tr", [
1270           $.new("td", name),
1271           $.new("td", val.minVersion),
1272           $.new("td", val.version),
1273         ])
1274       );
1275     });
1276     $.append($("libversions-tbody"), trs);
1277   },
1278
1279   userJS(data) {
1280     if (!data.exists) {
1281       return;
1282     }
1283     let userJSFile = Services.dirsvc.get("PrefD", Ci.nsIFile);
1284     userJSFile.append("user.js");
1285     $("prefs-user-js-link").href = Services.io.newFileURI(userJSFile).spec;
1286     $("prefs-user-js-section").style.display = "";
1287     // Clear the no-copy class
1288     $("prefs-user-js-section").className = "";
1289   },
1290
1291   sandbox(data) {
1292     if (!AppConstants.MOZ_SANDBOX) {
1293       return;
1294     }
1295
1296     let tbody = $("sandbox-tbody");
1297     for (let key in data) {
1298       // Simplify the display a little in the common case.
1299       if (
1300         key === "hasPrivilegedUserNamespaces" &&
1301         data[key] === data.hasUserNamespaces
1302       ) {
1303         continue;
1304       }
1305       if (key === "syscallLog") {
1306         // Not in this table.
1307         continue;
1308       }
1309       let keyStrId = toFluentID(key);
1310       let th = $.new("th", null, "column");
1311       document.l10n.setAttributes(th, keyStrId);
1312       tbody.appendChild($.new("tr", [th, $.new("td", data[key])]));
1313     }
1314
1315     if ("syscallLog" in data) {
1316       let syscallBody = $("sandbox-syscalls-tbody");
1317       let argsHead = $("sandbox-syscalls-argshead");
1318       for (let syscall of data.syscallLog) {
1319         if (argsHead.colSpan < syscall.args.length) {
1320           argsHead.colSpan = syscall.args.length;
1321         }
1322         let procTypeStrId = toFluentID(syscall.procType);
1323         let cells = [
1324           $.new("td", syscall.index, "integer"),
1325           $.new("td", syscall.msecAgo / 1000),
1326           $.new("td", syscall.pid, "integer"),
1327           $.new("td", syscall.tid, "integer"),
1328           $.new("td", null, null, {
1329             "data-l10n-id": "sandbox-proc-type-" + procTypeStrId,
1330           }),
1331           $.new("td", syscall.syscall, "integer"),
1332         ];
1333         for (let arg of syscall.args) {
1334           cells.push($.new("td", arg, "integer"));
1335         }
1336         syscallBody.appendChild($.new("tr", cells));
1337       }
1338     }
1339   },
1340
1341   intl(data) {
1342     $("intl-locale-requested").textContent = JSON.stringify(
1343       data.localeService.requested
1344     );
1345     $("intl-locale-available").textContent = JSON.stringify(
1346       data.localeService.available
1347     );
1348     $("intl-locale-supported").textContent = JSON.stringify(
1349       data.localeService.supported
1350     );
1351     $("intl-locale-regionalprefs").textContent = JSON.stringify(
1352       data.localeService.regionalPrefs
1353     );
1354     $("intl-locale-default").textContent = JSON.stringify(
1355       data.localeService.defaultLocale
1356     );
1357
1358     $("intl-osprefs-systemlocales").textContent = JSON.stringify(
1359       data.osPrefs.systemLocales
1360     );
1361     $("intl-osprefs-regionalprefs").textContent = JSON.stringify(
1362       data.osPrefs.regionalPrefsLocales
1363     );
1364   },
1365
1366   normandy(data) {
1367     if (!data) {
1368       return;
1369     }
1370
1371     const {
1372       prefStudies,
1373       addonStudies,
1374       prefRollouts,
1375       nimbusExperiments,
1376       nimbusRollouts,
1377     } = data;
1378     $.append(
1379       $("remote-features-tbody"),
1380       prefRollouts.map(({ slug, state }) =>
1381         $.new("tr", [
1382           $.new("td", [document.createTextNode(slug)]),
1383           $.new("td", [document.createTextNode(state)]),
1384         ])
1385       )
1386     );
1387
1388     $.append(
1389       $("remote-features-tbody"),
1390       nimbusRollouts.map(({ userFacingName, branch }) =>
1391         $.new("tr", [
1392           $.new("td", [document.createTextNode(userFacingName)]),
1393           $.new("td", [document.createTextNode(`(${branch.slug})`)]),
1394         ])
1395       )
1396     );
1397     $.append(
1398       $("remote-experiments-tbody"),
1399       [addonStudies, prefStudies, nimbusExperiments]
1400         .flat()
1401         .map(({ userFacingName, branch }) =>
1402           $.new("tr", [
1403             $.new("td", [document.createTextNode(userFacingName)]),
1404             $.new("td", [document.createTextNode(branch?.slug || branch)]),
1405           ])
1406         )
1407     );
1408   },
1409 };
1410
1411 var $ = document.getElementById.bind(document);
1412
1413 $.new = function $_new(tag, textContentOrChildren, className, attributes) {
1414   let elt = document.createElement(tag);
1415   if (className) {
1416     elt.className = className;
1417   }
1418   if (attributes) {
1419     if (attributes["data-l10n-id"]) {
1420       let args = attributes.hasOwnProperty("data-l10n-args")
1421         ? attributes["data-l10n-args"]
1422         : undefined;
1423       document.l10n.setAttributes(elt, attributes["data-l10n-id"], args);
1424       delete attributes["data-l10n-id"];
1425       if (args) {
1426         delete attributes["data-l10n-args"];
1427       }
1428     }
1429
1430     for (let attrName in attributes) {
1431       elt.setAttribute(attrName, attributes[attrName]);
1432     }
1433   }
1434   if (Array.isArray(textContentOrChildren)) {
1435     this.append(elt, textContentOrChildren);
1436   } else if (!attributes || !attributes["data-l10n-id"]) {
1437     elt.textContent = String(textContentOrChildren);
1438   }
1439   return elt;
1440 };
1441
1442 $.append = function $_append(parent, children) {
1443   children.forEach(c => parent.appendChild(c));
1444 };
1445
1446 function assembleFromGraphicsFailure(i, data) {
1447   // Only cover the cases we have today; for example, we do not have
1448   // log failures that assert and we assume the log level is 1/error.
1449   let message = data.failures[i];
1450   let index = data.indices[i];
1451   let what = "";
1452   if (message.search(/\[GFX1-\]: \(LF\)/) == 0) {
1453     // Non-asserting log failure - the message is substring(14)
1454     what = "LogFailure";
1455     message = message.substring(14);
1456   } else if (message.search(/\[GFX1-\]: /) == 0) {
1457     // Non-asserting - the message is substring(9)
1458     what = "Error";
1459     message = message.substring(9);
1460   } else if (message.search(/\[GFX1\]: /) == 0) {
1461     // Asserting - the message is substring(8)
1462     what = "Assert";
1463     message = message.substring(8);
1464   }
1465   let assembled = {
1466     index,
1467     header: "(#" + index + ") " + what,
1468     message,
1469   };
1470   return assembled;
1471 }
1472
1473 function sortedArrayFromObject(obj) {
1474   let tuples = [];
1475   for (let prop in obj) {
1476     tuples.push([prop, obj[prop]]);
1477   }
1478   tuples.sort(([prop1, v1], [prop2, v2]) => prop1.localeCompare(prop2));
1479   return tuples;
1480 }
1481
1482 function copyRawDataToClipboard(button) {
1483   if (button) {
1484     button.disabled = true;
1485   }
1486   Troubleshoot.snapshot().then(
1487     async snapshot => {
1488       if (button) {
1489         button.disabled = false;
1490       }
1491       let str = Cc["@mozilla.org/supports-string;1"].createInstance(
1492         Ci.nsISupportsString
1493       );
1494       str.data = JSON.stringify(snapshot, undefined, 2);
1495       let transferable = Cc[
1496         "@mozilla.org/widget/transferable;1"
1497       ].createInstance(Ci.nsITransferable);
1498       transferable.init(getLoadContext());
1499       transferable.addDataFlavor("text/plain");
1500       transferable.setTransferData("text/plain", str);
1501       Services.clipboard.setData(
1502         transferable,
1503         null,
1504         Ci.nsIClipboard.kGlobalClipboard
1505       );
1506     },
1507     err => {
1508       if (button) {
1509         button.disabled = false;
1510       }
1511       console.error(err);
1512     }
1513   );
1514 }
1515
1516 function getLoadContext() {
1517   return window.docShell.QueryInterface(Ci.nsILoadContext);
1518 }
1519
1520 async function copyContentsToClipboard() {
1521   // Get the HTML and text representations for the important part of the page.
1522   let contentsDiv = $("contents").cloneNode(true);
1523   // Remove the items we don't want to copy from the clone:
1524   contentsDiv.querySelectorAll(".no-copy, [hidden]").forEach(n => n.remove());
1525   let dataHtml = contentsDiv.innerHTML;
1526   let dataText = createTextForElement(contentsDiv);
1527
1528   // We can't use plain strings, we have to use nsSupportsString.
1529   let supportsStringClass = Cc["@mozilla.org/supports-string;1"];
1530   let ssHtml = supportsStringClass.createInstance(Ci.nsISupportsString);
1531   let ssText = supportsStringClass.createInstance(Ci.nsISupportsString);
1532
1533   let transferable = Cc["@mozilla.org/widget/transferable;1"].createInstance(
1534     Ci.nsITransferable
1535   );
1536   transferable.init(getLoadContext());
1537
1538   // Add the HTML flavor.
1539   transferable.addDataFlavor("text/html");
1540   ssHtml.data = dataHtml;
1541   transferable.setTransferData("text/html", ssHtml);
1542
1543   // Add the plain text flavor.
1544   transferable.addDataFlavor("text/plain");
1545   ssText.data = dataText;
1546   transferable.setTransferData("text/plain", ssText);
1547
1548   // Store the data into the clipboard.
1549   Services.clipboard.setData(
1550     transferable,
1551     null,
1552     Services.clipboard.kGlobalClipboard
1553   );
1554 }
1555
1556 // Return the plain text representation of an element.  Do a little bit
1557 // of pretty-printing to make it human-readable.
1558 function createTextForElement(elem) {
1559   let serializer = new Serializer();
1560   let text = serializer.serialize(elem);
1561
1562   // Actual CR/LF pairs are needed for some Windows text editors.
1563   if (AppConstants.platform == "win") {
1564     text = text.replace(/\n/g, "\r\n");
1565   }
1566
1567   return text;
1568 }
1569
1570 function Serializer() {}
1571
1572 Serializer.prototype = {
1573   serialize(rootElem) {
1574     this._lines = [];
1575     this._startNewLine();
1576     this._serializeElement(rootElem);
1577     this._startNewLine();
1578     return this._lines.join("\n").trim() + "\n";
1579   },
1580
1581   // The current line is always the line that writing will start at next.  When
1582   // an element is serialized, the current line is updated to be the line at
1583   // which the next element should be written.
1584   get _currentLine() {
1585     return this._lines.length ? this._lines[this._lines.length - 1] : null;
1586   },
1587
1588   set _currentLine(val) {
1589     this._lines[this._lines.length - 1] = val;
1590   },
1591
1592   _serializeElement(elem) {
1593     // table
1594     if (elem.localName == "table") {
1595       this._serializeTable(elem);
1596       return;
1597     }
1598
1599     // all other elements
1600
1601     let hasText = false;
1602     for (let child of elem.childNodes) {
1603       if (child.nodeType == Node.TEXT_NODE) {
1604         let text = this._nodeText(child);
1605         this._appendText(text);
1606         hasText = hasText || !!text.trim();
1607       } else if (child.nodeType == Node.ELEMENT_NODE) {
1608         this._serializeElement(child);
1609       }
1610     }
1611
1612     // For headings, draw a "line" underneath them so they stand out.
1613     let isHeader = /^h[0-9]+$/.test(elem.localName);
1614     if (isHeader) {
1615       let headerText = (this._currentLine || "").trim();
1616       if (headerText) {
1617         this._startNewLine();
1618         this._appendText("-".repeat(headerText.length));
1619       }
1620     }
1621
1622     // Add a blank line underneath elements but only if they contain text.
1623     if (hasText && (isHeader || "p" == elem.localName)) {
1624       this._startNewLine();
1625       this._startNewLine();
1626     }
1627   },
1628
1629   _startNewLine(lines) {
1630     let currLine = this._currentLine;
1631     if (currLine) {
1632       // The current line is not empty.  Trim it.
1633       this._currentLine = currLine.trim();
1634       if (!this._currentLine) {
1635         // The current line became empty.  Discard it.
1636         this._lines.pop();
1637       }
1638     }
1639     this._lines.push("");
1640   },
1641
1642   _appendText(text, lines) {
1643     this._currentLine += text;
1644   },
1645
1646   _isHiddenSubHeading(th) {
1647     return th.parentNode.parentNode.style.display == "none";
1648   },
1649
1650   _serializeTable(table) {
1651     // Collect the table's column headings if in fact there are any.  First
1652     // check thead.  If there's no thead, check the first tr.
1653     let colHeadings = {};
1654     let tableHeadingElem = table.querySelector("thead");
1655     if (!tableHeadingElem) {
1656       tableHeadingElem = table.querySelector("tr");
1657     }
1658     if (tableHeadingElem) {
1659       let tableHeadingCols = tableHeadingElem.querySelectorAll("th,td");
1660       // If there's a contiguous run of th's in the children starting from the
1661       // rightmost child, then consider them to be column headings.
1662       for (let i = tableHeadingCols.length - 1; i >= 0; i--) {
1663         let col = tableHeadingCols[i];
1664         if (col.localName != "th" || col.classList.contains("title-column")) {
1665           break;
1666         }
1667         colHeadings[i] = this._nodeText(col).trim();
1668       }
1669     }
1670     let hasColHeadings = !!Object.keys(colHeadings).length;
1671     if (!hasColHeadings) {
1672       tableHeadingElem = null;
1673     }
1674
1675     let trs = table.querySelectorAll("table > tr, tbody > tr");
1676     let startRow =
1677       tableHeadingElem && tableHeadingElem.localName == "tr" ? 1 : 0;
1678
1679     if (startRow >= trs.length) {
1680       // The table's empty.
1681       return;
1682     }
1683
1684     if (hasColHeadings) {
1685       // Use column headings.  Print each tr as a multi-line chunk like:
1686       //   Heading 1: Column 1 value
1687       //   Heading 2: Column 2 value
1688       for (let i = startRow; i < trs.length; i++) {
1689         let children = trs[i].querySelectorAll("td");
1690         for (let j = 0; j < children.length; j++) {
1691           let text = "";
1692           if (colHeadings[j]) {
1693             text += colHeadings[j] + ": ";
1694           }
1695           text += this._nodeText(children[j]).trim();
1696           this._appendText(text);
1697           this._startNewLine();
1698         }
1699         this._startNewLine();
1700       }
1701       return;
1702     }
1703
1704     // Don't use column headings.  Assume the table has only two columns and
1705     // print each tr in a single line like:
1706     //   Column 1 value: Column 2 value
1707     for (let i = startRow; i < trs.length; i++) {
1708       let children = trs[i].querySelectorAll("th,td");
1709       let rowHeading = this._nodeText(children[0]).trim();
1710       if (children[0].classList.contains("title-column")) {
1711         if (!this._isHiddenSubHeading(children[0])) {
1712           this._appendText(rowHeading);
1713         }
1714       } else if (children.length == 1) {
1715         // This is a single-cell row.
1716         this._appendText(rowHeading);
1717       } else {
1718         let childTables = trs[i].querySelectorAll("table");
1719         if (childTables.length) {
1720           // If we have child tables, don't use nodeText - its trs are already
1721           // queued up from querySelectorAll earlier.
1722           this._appendText(rowHeading + ": ");
1723         } else {
1724           this._appendText(rowHeading + ": ");
1725           for (let k = 1; k < children.length; k++) {
1726             let l = this._nodeText(children[k]).trim();
1727             if (l == "") {
1728               continue;
1729             }
1730             if (k < children.length - 1) {
1731               l += ", ";
1732             }
1733             this._appendText(l);
1734           }
1735         }
1736       }
1737       this._startNewLine();
1738     }
1739     this._startNewLine();
1740   },
1741
1742   _nodeText(node) {
1743     return node.textContent.replace(/\s+/g, " ");
1744   },
1745 };
1746
1747 function openProfileDirectory() {
1748   // Get the profile directory.
1749   let currProfD = Services.dirsvc.get("ProfD", Ci.nsIFile);
1750   let profileDir = currProfD.path;
1751
1752   // Show the profile directory.
1753   let nsLocalFile = Components.Constructor(
1754     "@mozilla.org/file/local;1",
1755     "nsIFile",
1756     "initWithPath"
1757   );
1758   new nsLocalFile(profileDir).reveal();
1759 }
1760
1761 /**
1762  * Profile reset is only supported for the default profile if the appropriate migrator exists.
1763  */
1764 function populateActionBox() {
1765   if (ResetProfile.resetSupported()) {
1766     $("reset-box").style.display = "block";
1767   }
1768   if (!Services.appinfo.inSafeMode && AppConstants.platform !== "android") {
1769     $("safe-mode-box").style.display = "block";
1770
1771     if (Services.policies && !Services.policies.isAllowed("safeMode")) {
1772       $("restart-in-safe-mode-button").setAttribute("disabled", "true");
1773     }
1774   }
1775 }
1776
1777 // Prompt user to restart the browser in safe mode
1778 function safeModeRestart() {
1779   let cancelQuit = Cc["@mozilla.org/supports-PRBool;1"].createInstance(
1780     Ci.nsISupportsPRBool
1781   );
1782   Services.obs.notifyObservers(
1783     cancelQuit,
1784     "quit-application-requested",
1785     "restart"
1786   );
1787
1788   if (!cancelQuit.data) {
1789     Services.startup.restartInSafeMode(Ci.nsIAppStartup.eAttemptQuit);
1790   }
1791 }
1792 /**
1793  * Set up event listeners for buttons.
1794  */
1795 function setupEventListeners() {
1796   let button = $("reset-box-button");
1797   if (button) {
1798     button.addEventListener("click", function (event) {
1799       ResetProfile.openConfirmationDialog(window);
1800     });
1801   }
1802   button = $("clear-startup-cache-button");
1803   if (button) {
1804     button.addEventListener("click", async function (event) {
1805       const [promptTitle, promptBody, restartButtonLabel] =
1806         await document.l10n.formatValues([
1807           { id: "startup-cache-dialog-title2" },
1808           { id: "startup-cache-dialog-body2" },
1809           { id: "restart-button-label" },
1810         ]);
1811       const buttonFlags =
1812         Services.prompt.BUTTON_POS_0 * Services.prompt.BUTTON_TITLE_IS_STRING +
1813         Services.prompt.BUTTON_POS_1 * Services.prompt.BUTTON_TITLE_CANCEL +
1814         Services.prompt.BUTTON_POS_0_DEFAULT;
1815       const result = Services.prompt.confirmEx(
1816         window.docShell.chromeEventHandler.ownerGlobal,
1817         promptTitle,
1818         promptBody,
1819         buttonFlags,
1820         restartButtonLabel,
1821         null,
1822         null,
1823         null,
1824         {}
1825       );
1826       if (result !== 0) {
1827         return;
1828       }
1829       Services.appinfo.invalidateCachesOnRestart();
1830       Services.startup.quit(
1831         Ci.nsIAppStartup.eRestart | Ci.nsIAppStartup.eAttemptQuit
1832       );
1833     });
1834   }
1835   button = $("restart-in-safe-mode-button");
1836   if (button) {
1837     button.addEventListener("click", function (event) {
1838       if (
1839         Services.obs
1840           .enumerateObservers("restart-in-safe-mode")
1841           .hasMoreElements()
1842       ) {
1843         Services.obs.notifyObservers(
1844           window.docShell.chromeEventHandler.ownerGlobal,
1845           "restart-in-safe-mode"
1846         );
1847       } else {
1848         safeModeRestart();
1849       }
1850     });
1851   }
1852   if (AppConstants.MOZ_UPDATER) {
1853     button = $("update-dir-button");
1854     if (button) {
1855       button.addEventListener("click", function (event) {
1856         // Get the update directory.
1857         let updateDir = Services.dirsvc.get("UpdRootD", Ci.nsIFile);
1858         if (!updateDir.exists()) {
1859           updateDir.create(Ci.nsIFile.DIRECTORY_TYPE, 0o755);
1860         }
1861         let updateDirPath = updateDir.path;
1862         // Show the update directory.
1863         let nsLocalFile = Components.Constructor(
1864           "@mozilla.org/file/local;1",
1865           "nsIFile",
1866           "initWithPath"
1867         );
1868         new nsLocalFile(updateDirPath).reveal();
1869       });
1870     }
1871     button = $("show-update-history-button");
1872     if (button) {
1873       button.addEventListener("click", function (event) {
1874         window.browsingContext.topChromeWindow.openDialog(
1875           "chrome://mozapps/content/update/history.xhtml",
1876           "Update:History",
1877           "centerscreen,resizable=no,titlebar,modal"
1878         );
1879       });
1880     }
1881   }
1882   button = $("verify-place-integrity-button");
1883   if (button) {
1884     button.addEventListener("click", function (event) {
1885       PlacesDBUtils.checkAndFixDatabase().then(tasksStatusMap => {
1886         let logs = [];
1887         for (let [key, value] of tasksStatusMap) {
1888           logs.push(`> Task: ${key}`);
1889           let prefix = value.succeeded ? "+ " : "- ";
1890           logs = logs.concat(value.logs.map(m => `${prefix}${m}`));
1891         }
1892         $("verify-place-result").style.display = "block";
1893         $("verify-place-result").classList.remove("no-copy");
1894         $("verify-place-result").textContent = logs.join("\n");
1895       });
1896     });
1897   }
1898
1899   $("copy-raw-data-to-clipboard").addEventListener("click", function (event) {
1900     copyRawDataToClipboard(this);
1901   });
1902   $("copy-to-clipboard").addEventListener("click", function (event) {
1903     copyContentsToClipboard();
1904   });
1905   $("profile-dir-button").addEventListener("click", function (event) {
1906     openProfileDirectory();
1907   });
1908 }
1909
1910 /**
1911  * Scroll to section specified by location.hash
1912  */
1913 function scrollToSection() {
1914   const id = location.hash.substr(1);
1915   const elem = $(id);
1916
1917   if (elem) {
1918     elem.scrollIntoView();
1919   }
1920 }