diff options
Diffstat (limited to '')
16 files changed, 3356 insertions, 0 deletions
diff --git a/toolkit/components/aboutprocesses/content/aboutProcesses.css b/toolkit/components/aboutprocesses/content/aboutProcesses.css new file mode 100644 index 0000000000..39848813b6 --- /dev/null +++ b/toolkit/components/aboutprocesses/content/aboutProcesses.css @@ -0,0 +1,270 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public +* License, v. 2.0. If a copy of the MPL was not distributed with this +* file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +html { + background-color: var(--in-content-page-background); +} +body { + overflow-x: hidden; +} + +#process-table { + user-select: none; + font-size: 1em; + border-spacing: 0; + background-color: var(--in-content-box-background); + margin: 0; + position: absolute; + top: 0; + inset-inline-start: 0; + width: 100%; + height: 100%; +} + +/* Avoid scrolling the header */ +#process-tbody { + display: block; + margin-top: 2em; +} +#process-thead { + position: fixed; + z-index: 1; + height: 2em; + border-bottom: 1px solid var(--in-content-border-color); + width: 100%; + background-color: var(--in-content-box-background); +} +tr { + display: grid; + /* Flexible width for the name column, 15% width for the memory and CPU column, + * then fixed width (16px icon + 2*10px margin) for the actions column. */ + grid-template-columns: 1fr 15% 15% 36px; + grid-auto-rows: 2em; + width: 100%; +} + +.cpu, .memory { + text-align: end; +} + +#process-thead > tr { + height: inherit; +} + +th { + font-weight: normal; + text-align: start; + background-color: var(--in-content-button-background); +} +th:not(:first-child) { + border-inline-start: 1px solid; + border-image: linear-gradient(transparent 0%, transparent 20%, var(--in-content-box-border-color) 20%, var(--in-content-box-border-color) 80%, transparent 80%, transparent 100%) 1 1; +} +th, td { + padding: 5px 10px; + min-height: 16px; + max-height: 2em; + overflow: hidden; + white-space: nowrap; +} +td.type, td.favicon { + background-repeat: no-repeat; + background-origin: border-box; + background-size: 16px 16px; + background-position: 11px center; + padding-inline-start: 38px; + -moz-context-properties: fill; + fill: currentColor; +} +td.type:dir(rtl), td.favicon:dir(rtl) { + background-position-x: right 11px; +} +td:first-child { + text-overflow: ellipsis; +} + +.profiler-icon { + background: url("chrome://devtools/skin/images/tool-profiler.svg") no-repeat center; + display: inline-block; + height: 100%; + width: 16px; + padding: 5px 7px; + /* The -10px is -5 to undo the td padding and -5 to undo the padding here. */ + margin: -10px 3px; + -moz-context-properties: fill, fill-opacity; + fill-opacity: 0.9; + fill: currentColor; +} +.profiler-icon:hover { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); +} + +.profiler-icon:hover:active { + background-color: var(--in-content-button-background-active); + color: var(--in-content-button-text-color-active); + fill-opacity: 1; +} + +.profiler-icon:not(.profiler-active) { + transform: scaleX(-1); +} + +.profiler-active { + fill: var(--in-content-accent-color); +} +td:not(:hover) > .profiler-icon:not(.profiler-active) { + display: none; +} + +.twisty { + position: relative; +} +/* Putting the background image in a positioned pseudo element lets us +* use CSS transforms on the background image, which we need for rtl. */ +.twisty::before { + content: url("chrome://global/skin/icons/arrow-right-12.svg"); + position: absolute; + display: block; + line-height: 50%; + top: 4px; /* Half the image's height */ + inset-inline-start: -16px; + width: 12px; + -moz-context-properties: fill; + fill: currentColor; +} +.twisty:dir(rtl)::before { + content: url("chrome://global/skin/icons/arrow-left-12.svg"); +} +.twisty.open::before { + content: url("chrome://global/skin/icons/arrow-down-12.svg"); +} +.twisty:-moz-focusring { + outline: none; +} +.twisty:-moz-focusring::before { + outline: var(--in-content-focus-outline); +} +.indent { + padding-inline: 48px 0; +} +.double_indent { + padding-inline: 58px 0; +} + +tr[selected] > td { + background-color: var(--in-content-item-selected); + color: var(--in-content-item-selected-text); +} +#process-tbody > tr:hover { + background-color: var(--in-content-item-hover); + color: var(--in-content-item-hover-text); +} + +/* Tab names and thread summary text can extend into memory and CPU columns. */ +.window > :first-child, +.thread-summary > :first-child { + grid-column: 1 / 4; +} + +/* Thread names can extend into the memory column. */ +.thread > :first-child { + grid-column: 1 / 3; +} + +.clickable { + background-repeat: no-repeat; + background-position: right 4px center; +} +.clickable:dir(rtl) { + background-position-x: left 4px; +} + +.arrow-up, +.arrow-down { + -moz-context-properties: fill; + fill: currentColor; +} + +.arrow-up { + background-image: url("chrome://global/skin/icons/arrow-up-12.svg"); +} +.arrow-down { + background-image: url("chrome://global/skin/icons/arrow-down-12.svg"); +} + +th.clickable:hover { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); +} +th.clickable:hover:active { + background-color: var(--in-content-button-background-active); + color: var(--in-content-button-text-color-active); +} + +tr.process > td.type { + font-weight: bold; +} +tr.thread { + font-size-adjust: 0.5; +} + +.killing { + opacity: 0.3; + transition-property: opacity; + transition-duration: 1s; +} + +.killed { + opacity: 0.3; +} + +/* icons */ +.close-icon { + background: url("chrome://global/skin/icons/close.svg") no-repeat center; + opacity: 0; /* Start out as transparent */ + -moz-context-properties: fill; + fill: currentColor; +} + +tr:is([selected], :hover):not(.killing) > .close-icon { + opacity: 1; +} + +.close-icon:hover { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); +} + +.close-icon:hover:active { + background-color: var(--in-content-button-background-active); + color: var(--in-content-button-text-color-active); +} + +/* column-name */ + +/* When the process is reported as frozen, we display an hourglass before its name. */ +.process.hung > :first-child > :not(.twisty)::before { + content: "⌛️"; +} + +/* + Show a separation between process groups. + */ + +tr.separate-from-previous-process-group { + border-top: dotted 1px var(--in-content-box-border-color); + margin-top: -1px; +} + +/* Graphical view of CPU use. */ +.cpu { + --bar-width: 0; + background: linear-gradient(to left, var(--blue-40) calc(var(--bar-width) * 1%), transparent calc(var(--bar-width) * 1%)); +} +.cpu:dir(rtl) { + background: linear-gradient(to right, var(--blue-40) calc(var(--bar-width) * 1%), transparent calc(var(--bar-width) * 1%)); +} diff --git a/toolkit/components/aboutprocesses/content/aboutProcesses.html b/toolkit/components/aboutprocesses/content/aboutProcesses.html new file mode 100644 index 0000000000..76a672cdc2 --- /dev/null +++ b/toolkit/components/aboutprocesses/content/aboutProcesses.html @@ -0,0 +1,54 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<!DOCTYPE html> +<html> + <head> + <meta + http-equiv="Content-Security-Policy" + content="default-src chrome:;img-src data:; object-src 'none'" + /> + <meta name="color-scheme" content="light dark" /> + <title data-l10n-id="about-processes-title"></title> + <link + rel="icon" + id="favicon" + href="chrome://global/skin/icons/performance.svg" + /> + <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" /> + <link rel="localization" href="toolkit/about/aboutProcesses.ftl" /> + <link rel="localization" href="branding/brand.ftl" /> + <script src="chrome://global/content/aboutProcesses.js"></script> + <link rel="stylesheet" href="chrome://global/content/aboutProcesses.css" /> + </head> + <body> + <table id="process-table"> + <thead id="process-thead"> + <tr> + <th + class="clickable" + id="column-name" + data-l10n-id="about-processes-column-name" + ></th> + <th + class="clickable" + id="column-memory-resident" + data-l10n-id="about-processes-column-memory-resident" + ></th> + <!-- Memory usage. --> + <th + class="clickable" + id="column-cpu-total" + data-l10n-id="about-processes-column-cpu-total" + ></th> + <!--CPU time--> + <th id="column-kill" data-l10n-id="about-processes-column-action"> + ⚙ + </th> + <!-- Kill button. --> + </tr> + </thead> + <tbody id="process-tbody"></tbody> + </table> + </body> +</html> diff --git a/toolkit/components/aboutprocesses/content/aboutProcesses.js b/toolkit/components/aboutprocesses/content/aboutProcesses.js new file mode 100644 index 0000000000..4ad00b2840 --- /dev/null +++ b/toolkit/components/aboutprocesses/content/aboutProcesses.js @@ -0,0 +1,1570 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*-*/ +/* vim: set ts=8 sts=2 et sw=2 tw=80: */ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +// Time in ms before we start changing the sort order again after receiving a +// mousemove event. +const TIME_BEFORE_SORTING_AGAIN = 5000; + +// How long we should wait between samples. +const MINIMUM_INTERVAL_BETWEEN_SAMPLES_MS = 1000; + +// How often we should update +const UPDATE_INTERVAL_MS = 2000; + +const NS_PER_US = 1000; +const NS_PER_MS = 1000 * 1000; +const NS_PER_S = 1000 * 1000 * 1000; +const NS_PER_MIN = NS_PER_S * 60; +const NS_PER_HOUR = NS_PER_MIN * 60; +const NS_PER_DAY = NS_PER_HOUR * 24; + +const ONE_GIGA = 1024 * 1024 * 1024; +const ONE_MEGA = 1024 * 1024; +const ONE_KILO = 1024; + +const { XPCOMUtils } = ChromeUtils.importESModule( + "resource://gre/modules/XPCOMUtils.sys.mjs" +); +const { AppConstants } = ChromeUtils.importESModule( + "resource://gre/modules/AppConstants.sys.mjs" +); + +ChromeUtils.defineESModuleGetters(this, { + ContextualIdentityService: + "resource://gre/modules/ContextualIdentityService.sys.mjs", +}); + +ChromeUtils.defineLazyGetter(this, "ProfilerPopupBackground", function () { + return ChromeUtils.importESModule( + "resource://devtools/client/performance-new/shared/background.sys.mjs" + ); +}); + +const { WebExtensionPolicy } = Cu.getGlobalForObject(Services); + +const SHOW_THREADS = Services.prefs.getBoolPref( + "toolkit.aboutProcesses.showThreads" +); +const SHOW_ALL_SUBFRAMES = Services.prefs.getBoolPref( + "toolkit.aboutProcesses.showAllSubframes" +); +const SHOW_PROFILER_ICONS = Services.prefs.getBoolPref( + "toolkit.aboutProcesses.showProfilerIcons" +); +const PROFILE_DURATION = Math.max( + 1, + Services.prefs.getIntPref("toolkit.aboutProcesses.profileDuration") +); + +/** + * For the time being, Fluent doesn't support duration or memory formats, so we need + * to fetch units from Fluent. To avoid re-fetching at each update, we prefetch these + * units during initialization, asynchronously, and keep them. + * + * @type { + * duration: { ns: String, us: String, ms: String, s: String, m: String, h: String, d: String }, + * memory: { B: String, KB: String, MB: String, GB: String, TB: String, PB: String, EB: String } + * }. + */ +let gLocalizedUnits; + +let tabFinder = { + update() { + this._map = new Map(); + for (let win of Services.wm.getEnumerator("navigator:browser")) { + let tabbrowser = win.gBrowser; + for (let browser of tabbrowser.browsers) { + let id = browser.outerWindowID; // May be `null` if the browser isn't loaded yet + if (id != null) { + this._map.set(id, browser); + } + } + if (tabbrowser.preloadedBrowser) { + let browser = tabbrowser.preloadedBrowser; + if (browser.outerWindowID) { + this._map.set(browser.outerWindowID, browser); + } + } + } + }, + + /** + * Find the <xul:tab> for a window id. + * + * This is useful e.g. for reloading or closing tabs. + * + * @return null If the xul:tab could not be found, e.g. if the + * windowId is that of a chrome window. + * @return {{tabbrowser: <xul:tabbrowser>, tab: <xul.tab>}} The + * tabbrowser and tab if the latter could be found. + */ + get(id) { + let browser = this._map.get(id); + if (!browser) { + return null; + } + let tabbrowser = browser.getTabBrowser(); + if (!tabbrowser) { + return { + tabbrowser: null, + tab: { + getAttribute() { + return ""; + }, + linkedBrowser: browser, + }, + }; + } + return { tabbrowser, tab: tabbrowser.getTabForBrowser(browser) }; + }, +}; + +/** + * Utilities for dealing with state + */ +var State = { + // Store the previous and current samples so they can be compared. + _previous: null, + _latest: null, + + async _promiseSnapshot() { + let date = Cu.now(); + let main = await ChromeUtils.requestProcInfo(); + main.date = date; + + let processes = new Map(); + processes.set(main.pid, main); + for (let child of main.children) { + child.date = date; + processes.set(child.pid, child); + } + + return { processes, date }; + }, + + /** + * Update the internal state. + * + * @return {Promise} + */ + async update(force = false) { + if ( + force || + !this._latest || + Cu.now() - this._latest.date > MINIMUM_INTERVAL_BETWEEN_SAMPLES_MS + ) { + // Replacing this._previous before we are done awaiting + // this._promiseSnapshot can cause this._previous and this._latest to be + // equal for a short amount of time, which can cause test failures when + // a forced update of the display is triggered in the meantime. + let newSnapshot = await this._promiseSnapshot(); + this._previous = this._latest; + this._latest = newSnapshot; + } + }, + + _getThreadDelta(cur, prev, deltaT) { + let result = { + tid: cur.tid, + name: cur.name || `(${cur.tid})`, + // Total amount of CPU used, in ns. + totalCpu: cur.cpuTime, + slopeCpu: null, + active: null, + }; + if (!deltaT) { + return result; + } + result.slopeCpu = (result.totalCpu - (prev ? prev.cpuTime : 0)) / deltaT; + result.active = + !!result.slopeCpu || cur.cpuCycleCount > (prev ? prev.cpuCycleCount : 0); + return result; + }, + + _getDOMWindows(process) { + if (!process.windows) { + return []; + } + if (!process.type == "extensions") { + return []; + } + let windows = process.windows.map(win => { + let tab = tabFinder.get(win.outerWindowId); + let addon = + process.type == "extension" + ? WebExtensionPolicy.getByURI(win.documentURI) + : null; + let displayRank; + if (tab) { + displayRank = 1; + } else if (win.isProcessRoot) { + displayRank = 2; + } else if (win.documentTitle) { + displayRank = 3; + } else { + displayRank = 4; + } + return { + outerWindowId: win.outerWindowId, + documentURI: win.documentURI, + documentTitle: win.documentTitle, + isProcessRoot: win.isProcessRoot, + isInProcess: win.isInProcess, + tab, + addon, + // The number of instances we have collapsed. + count: 1, + // A rank used to quickly sort windows. + displayRank, + }; + }); + + // We keep all tabs and addons but we collapse subframes that have the same host. + + // A map from host -> subframe. + let collapsible = new Map(); + let result = []; + for (let win of windows) { + if (win.tab || win.addon) { + result.push(win); + continue; + } + let prev = collapsible.get(win.documentURI.prePath); + if (prev) { + prev.count += 1; + } else { + collapsible.set(win.documentURI.prePath, win); + result.push(win); + } + } + return result; + }, + + /** + * Compute the delta between two process snapshots. + * + * @param {ProcessSnapshot} cur + * @param {ProcessSnapshot?} prev + */ + _getProcessDelta(cur, prev) { + let windows = this._getDOMWindows(cur); + let result = { + pid: cur.pid, + childID: cur.childID, + totalRamSize: cur.memory, + deltaRamSize: null, + totalCpu: cur.cpuTime, + slopeCpu: null, + active: null, + type: cur.type, + origin: cur.origin || "", + threads: null, + displayRank: Control._getDisplayGroupRank(cur, windows), + windows, + utilityActors: cur.utilityActors, + // If this process has an unambiguous title, store it here. + title: null, + }; + // Attempt to determine a title for this process. + let titles = [ + ...new Set( + result.windows + .filter(win => win.documentTitle) + .map(win => win.documentTitle) + ), + ]; + if (titles.length == 1) { + result.title = titles[0]; + } + if (!prev) { + if (SHOW_THREADS) { + result.threads = cur.threads.map(data => this._getThreadDelta(data)); + } + return result; + } + if (prev.pid != cur.pid) { + throw new Error("Assertion failed: A process cannot change pid."); + } + let deltaT = (cur.date - prev.date) * NS_PER_MS; + let threads = null; + if (SHOW_THREADS) { + let prevThreads = new Map(); + for (let thread of prev.threads) { + prevThreads.set(thread.tid, thread); + } + threads = cur.threads.map(curThread => + this._getThreadDelta(curThread, prevThreads.get(curThread.tid), deltaT) + ); + } + result.deltaRamSize = cur.memory - prev.memory; + result.slopeCpu = (cur.cpuTime - prev.cpuTime) / deltaT; + result.active = !!result.slopeCpu || cur.cpuCycleCount > prev.cpuCycleCount; + result.threads = threads; + return result; + }, + + getCounters() { + tabFinder.update(); + + let counters = []; + + for (let cur of this._latest.processes.values()) { + let prev = this._previous?.processes.get(cur.pid); + counters.push(this._getProcessDelta(cur, prev)); + } + + return counters; + }, +}; + +var View = { + // Processes, tabs and subframes that we killed during the previous iteration. + // Array<{pid:Number} | {windowId:Number}> + _killedRecently: [], + commit() { + this._killedRecently.length = 0; + let tbody = document.getElementById("process-tbody"); + + let insertPoint = tbody.firstChild; + let nextRow; + while ((nextRow = this._orderedRows.shift())) { + if (insertPoint && insertPoint === nextRow) { + insertPoint = insertPoint.nextSibling; + } else { + tbody.insertBefore(nextRow, insertPoint); + } + } + + if (insertPoint) { + while ((nextRow = insertPoint.nextSibling)) { + this._removeRow(nextRow); + } + this._removeRow(insertPoint); + } + }, + // If we are not going to display the updated list of rows, drop references + // to rows that haven't been inserted in the DOM tree. + discardUpdate() { + for (let row of this._orderedRows) { + if (!row.parentNode) { + this._rowsById.delete(row.rowId); + } + } + this._orderedRows = []; + }, + insertAfterRow(row) { + let tbody = row.parentNode; + let nextRow; + while ((nextRow = this._orderedRows.pop())) { + tbody.insertBefore(nextRow, row.nextSibling); + } + }, + + _rowsById: new Map(), + _removeRow(row) { + this._rowsById.delete(row.rowId); + + row.remove(); + }, + _getOrCreateRow(rowId, cellCount) { + let row = this._rowsById.get(rowId); + if (!row) { + row = document.createElement("tr"); + while (cellCount--) { + row.appendChild(document.createElement("td")); + } + row.rowId = rowId; + this._rowsById.set(rowId, row); + } + this._orderedRows.push(row); + return row; + }, + + displayCpu(data, cpuCell, maxSlopeCpu) { + // Put a value < 0% when we really don't want to see a bar as + // otherwise it sometimes appears due to rounding errors when we + // don't have an integer number of pixels. + let barWidth = -0.5; + if (data.slopeCpu == null) { + this._fillCell(cpuCell, { + fluentName: "about-processes-cpu-user-and-kernel-not-ready", + classes: ["cpu"], + }); + } else { + let { duration, unit } = this._getDuration(data.totalCpu); + if (data.totalCpu == 0) { + // A thread having used exactly 0ns of CPU time is not possible. + // When we get 0 it means the thread used less than the precision of + // the measurement, and it makes more sense to show '0ms' than '0ns'. + // This is useful on Linux where the minimum non-zero CPU time value + // for threads of child processes is 10ms, and on Windows ARM64 where + // the minimum non-zero value is 16ms. + unit = "ms"; + } + let localizedUnit = gLocalizedUnits.duration[unit]; + if (data.slopeCpu == 0) { + let fluentName = data.active + ? "about-processes-cpu-almost-idle" + : "about-processes-cpu-fully-idle"; + this._fillCell(cpuCell, { + fluentName, + fluentArgs: { + total: duration, + unit: localizedUnit, + }, + classes: ["cpu"], + }); + } else { + this._fillCell(cpuCell, { + fluentName: "about-processes-cpu", + fluentArgs: { + percent: data.slopeCpu, + total: duration, + unit: localizedUnit, + }, + classes: ["cpu"], + }); + + let cpuPercent = data.slopeCpu * 100; + if (maxSlopeCpu > 1) { + cpuPercent /= maxSlopeCpu; + } + // Ensure we always have a visible bar for non-0 values. + barWidth = Math.max(0.5, cpuPercent); + } + } + cpuCell.style.setProperty("--bar-width", barWidth); + }, + + /** + * Display a row showing a single process (without its threads). + * + * @param {ProcessDelta} data The data to display. + * @param {Number} maxSlopeCpu The largest slopeCpu value. + * @return {DOMElement} The row displaying the process. + */ + displayProcessRow(data, maxSlopeCpu) { + const cellCount = 4; + let rowId = "p:" + data.pid; + let row = this._getOrCreateRow(rowId, cellCount); + row.process = data; + { + let classNames = "process"; + if (data.isHung) { + classNames += " hung"; + } + row.className = classNames; + } + + // Column: Name + let nameCell = row.firstChild; + { + let classNames = []; + let fluentName; + let fluentArgs = { + pid: "" + data.pid, // Make sure that this number is not localized + }; + switch (data.type) { + case "web": + fluentName = "about-processes-web-process"; + break; + case "webIsolated": + fluentName = "about-processes-web-isolated-process"; + fluentArgs.origin = data.origin; + break; + case "webServiceWorker": + fluentName = "about-processes-web-serviceworker"; + fluentArgs.origin = data.origin; + break; + case "file": + fluentName = "about-processes-file-process"; + break; + case "extension": + fluentName = "about-processes-extension-process"; + classNames = ["extensions"]; + break; + case "privilegedabout": + fluentName = "about-processes-privilegedabout-process"; + break; + case "privilegedmozilla": + fluentName = "about-processes-privilegedmozilla-process"; + break; + case "withCoopCoep": + fluentName = "about-processes-with-coop-coep-process"; + fluentArgs.origin = data.origin; + break; + case "browser": + fluentName = "about-processes-browser-process"; + break; + case "plugin": + fluentName = "about-processes-plugin-process"; + break; + case "gmpPlugin": + fluentName = "about-processes-gmp-plugin-process"; + break; + case "gpu": + fluentName = "about-processes-gpu-process"; + break; + case "vr": + fluentName = "about-processes-vr-process"; + break; + case "rdd": + fluentName = "about-processes-rdd-process"; + break; + case "socket": + fluentName = "about-processes-socket-process"; + break; + case "remoteSandboxBroker": + fluentName = "about-processes-remote-sandbox-broker-process"; + break; + case "forkServer": + fluentName = "about-processes-fork-server-process"; + break; + case "preallocated": + fluentName = "about-processes-preallocated-process"; + break; + case "utility": + fluentName = "about-processes-utility-process"; + break; + // The following are probably not going to show up for users + // but let's handle the case anyway to avoid heisenoranges + // during tests in case of a leftover process from a previous + // test. + default: + fluentName = "about-processes-unknown-process"; + fluentArgs.type = data.type; + break; + } + + // Show container names instead of raw origin attribute suffixes. + if (fluentArgs.origin?.includes("^")) { + let origin = fluentArgs.origin; + let privateBrowsingId, userContextId; + try { + ({ privateBrowsingId, userContextId } = + ChromeUtils.createOriginAttributesFromOrigin(origin)); + fluentArgs.origin = origin.slice(0, origin.indexOf("^")); + } catch (e) { + // createOriginAttributesFromOrigin can throw NS_ERROR_FAILURE for incorrect origin strings. + } + if (userContextId) { + let identityLabel = + ContextualIdentityService.getUserContextLabel(userContextId); + if (identityLabel) { + fluentArgs.origin += ` — ${identityLabel}`; + } + } + if (privateBrowsingId) { + fluentName += "-private"; + } + } + + let processNameElement = nameCell; + if (SHOW_PROFILER_ICONS) { + if (!nameCell.firstChild) { + processNameElement = document.createElement("span"); + nameCell.appendChild(processNameElement); + + let profilerIcon = document.createElement("span"); + profilerIcon.className = "profiler-icon"; + document.l10n.setAttributes( + profilerIcon, + "about-processes-profile-process", + { duration: PROFILE_DURATION } + ); + nameCell.appendChild(profilerIcon); + } else { + processNameElement = nameCell.firstChild; + } + } + document.l10n.setAttributes(processNameElement, fluentName, fluentArgs); + nameCell.className = ["type", "favicon", ...classNames].join(" "); + nameCell.setAttribute("id", data.pid + "-label"); + + let image; + switch (data.type) { + case "browser": + case "privilegedabout": + image = "chrome://branding/content/icon32.png"; + break; + case "extension": + image = "chrome://mozapps/skin/extensions/extension.svg"; + break; + default: + // If all favicons match, pick the shared favicon. + // Otherwise, pick a default icon. + // If some tabs have no favicon, we ignore them. + for (let win of data.windows || []) { + if (!win.tab) { + continue; + } + let favicon = win.tab.tab.getAttribute("image"); + if (!favicon) { + // No favicon here, let's ignore the tab. + } else if (!image) { + // Let's pick a first favicon. + // We'll remove it later if we find conflicting favicons. + image = favicon; + } else if (image == favicon) { + // So far, no conflict, keep the favicon. + } else { + // Conflicting favicons, fallback to default. + image = null; + break; + } + } + if (!image) { + image = "chrome://global/skin/icons/link.svg"; + } + } + nameCell.style.backgroundImage = `url('${image}')`; + } + + // Column: Memory + let memoryCell = nameCell.nextSibling; + { + let formattedTotal = this._formatMemory(data.totalRamSize); + if (data.deltaRamSize) { + let formattedDelta = this._formatMemory(data.deltaRamSize); + this._fillCell(memoryCell, { + fluentName: "about-processes-total-memory-size-changed", + fluentArgs: { + total: formattedTotal.amount, + totalUnit: gLocalizedUnits.memory[formattedTotal.unit], + delta: Math.abs(formattedDelta.amount), + deltaUnit: gLocalizedUnits.memory[formattedDelta.unit], + deltaSign: data.deltaRamSize > 0 ? "+" : "-", + }, + classes: ["memory"], + }); + } else { + this._fillCell(memoryCell, { + fluentName: "about-processes-total-memory-size-no-change", + fluentArgs: { + total: formattedTotal.amount, + totalUnit: gLocalizedUnits.memory[formattedTotal.unit], + }, + classes: ["memory"], + }); + } + } + + // Column: CPU + let cpuCell = memoryCell.nextSibling; + this.displayCpu(data, cpuCell, maxSlopeCpu); + + // Column: Kill button – but not for all processes. + let killButton = cpuCell.nextSibling; + killButton.className = "action-icon"; + + if (data.type.startsWith("web")) { + // This type of process can be killed. + if (this._killedRecently.some(kill => kill.pid && kill.pid == data.pid)) { + // We're racing between the "kill" action and the visual refresh. + // In a few cases, we could end up with the visual refresh showing + // a process as un-killed while we actually just killed it. + // + // We still want to display the process in case something actually + // went bad and the user needs the information to realize this. + // But we also want to make it visible that the process is being + // killed. + row.classList.add("killed"); + } else { + // Otherwise, let's display the kill button. + killButton.classList.add("close-icon"); + document.l10n.setAttributes( + killButton, + "about-processes-shutdown-process" + ); + } + } + + return row; + }, + + /** + * Display a thread summary row with the thread count and a twisty to + * open/close the list. + * + * @param {ProcessDelta} data The data to display. + * @return {boolean} Whether the full thread list should be displayed. + */ + displayThreadSummaryRow(data) { + const cellCount = 2; + let rowId = "ts:" + data.pid; + let row = this._getOrCreateRow(rowId, cellCount); + row.process = data; + row.className = "thread-summary"; + let isOpen = false; + + // Column: Name + let nameCell = row.firstChild; + let threads = data.threads; + let activeThreads = new Map(); + let activeThreadCount = 0; + for (let t of data.threads) { + if (!t.active) { + continue; + } + ++activeThreadCount; + let name = t.name.replace(/ ?#[0-9]+$/, ""); + if (!activeThreads.has(name)) { + activeThreads.set(name, { name, slopeCpu: t.slopeCpu, count: 1 }); + } else { + let thread = activeThreads.get(name); + thread.count++; + thread.slopeCpu += t.slopeCpu; + } + } + let fluentName, fluentArgs; + if (activeThreadCount) { + let percentFormatter = new Intl.NumberFormat(undefined, { + style: "percent", + minimumSignificantDigits: 1, + }); + + let threadList = Array.from(activeThreads.values()); + threadList.sort((t1, t2) => t2.slopeCpu - t1.slopeCpu); + + fluentName = "about-processes-active-threads"; + fluentArgs = { + number: threads.length, + active: activeThreadCount, + list: new Intl.ListFormat(undefined, { style: "narrow" }).format( + threadList.map(t => { + let name = t.count > 1 ? `${t.count} × ${t.name}` : t.name; + let percent = Math.round(t.slopeCpu * 1000) / 1000; + if (percent) { + return `${name} ${percentFormatter.format(percent)}`; + } + return name; + }) + ), + }; + } else { + fluentName = "about-processes-inactive-threads"; + fluentArgs = { + number: threads.length, + }; + } + + let span; + if (!nameCell.firstChild) { + nameCell.className = "name indent"; + // Create the nodes: + let imgBtn = document.createElement("span"); + // Provide markup for an accessible disclosure button: + imgBtn.className = "twisty"; + imgBtn.setAttribute("role", "button"); + imgBtn.setAttribute("tabindex", "0"); + // Label to include both summary and details texts + imgBtn.setAttribute("aria-labelledby", `${data.pid}-label ${rowId}`); + if (!imgBtn.hasAttribute("aria-expanded")) { + imgBtn.setAttribute("aria-expanded", "false"); + } + nameCell.appendChild(imgBtn); + + span = document.createElement("span"); + span.setAttribute("id", rowId); + nameCell.appendChild(span); + } else { + // The only thing that can change is the thread count. + let imgBtn = nameCell.firstChild; + isOpen = imgBtn.classList.contains("open"); + span = imgBtn.nextSibling; + } + document.l10n.setAttributes(span, fluentName, fluentArgs); + + // Column: action + let actionCell = nameCell.nextSibling; + actionCell.className = "action-icon"; + + return isOpen; + }, + + displayDOMWindowRow(data, parent) { + const cellCount = 2; + let rowId = "w:" + data.outerWindowId; + let row = this._getOrCreateRow(rowId, cellCount); + row.win = data; + row.className = "window"; + + // Column: name + let nameCell = row.firstChild; + let tab = tabFinder.get(data.outerWindowId); + let fluentName; + let fluentArgs = {}; + let className; + if (tab && tab.tabbrowser) { + fluentName = "about-processes-tab-name"; + fluentArgs.name = tab.tab.label; + className = "tab"; + } else if (tab) { + fluentName = "about-processes-preloaded-tab"; + className = "preloaded-tab"; + } else if (data.count == 1) { + fluentName = "about-processes-frame-name-one"; + fluentArgs.url = data.documentURI.spec; + className = "frame-one"; + } else { + fluentName = "about-processes-frame-name-many"; + fluentArgs.number = data.count; + fluentArgs.shortUrl = + data.documentURI.scheme == "about" + ? data.documentURI.spec + : data.documentURI.prePath; + className = "frame-many"; + } + this._fillCell(nameCell, { + fluentName, + fluentArgs, + classes: ["name", "indent", "favicon", className], + }); + let image = tab?.tab.getAttribute("image"); + if (image) { + nameCell.style.backgroundImage = `url('${image}')`; + } + + // Column: action + let killButton = nameCell.nextSibling; + killButton.className = "action-icon"; + + if (data.tab && data.tab.tabbrowser) { + // A tab. We want to be able to close it. + if ( + this._killedRecently.some( + kill => kill.windowId && kill.windowId == data.outerWindowId + ) + ) { + // We're racing between the "kill" action and the visual refresh. + // In a few cases, we could end up with the visual refresh showing + // a window as un-killed while we actually just killed it. + // + // We still want to display the window in case something actually + // went bad and the user needs the information to realize this. + // But we also want to make it visible that the window is being + // killed. + row.classList.add("killed"); + } else { + // Otherwise, let's display the kill button. + killButton.classList.add("close-icon"); + document.l10n.setAttributes(killButton, "about-processes-shutdown-tab"); + } + } + }, + + utilityActorNameToFluentName(actorName) { + let fluentName; + switch (actorName) { + case "audioDecoder_Generic": + fluentName = "about-processes-utility-actor-audio-decoder-generic"; + break; + + case "audioDecoder_AppleMedia": + fluentName = "about-processes-utility-actor-audio-decoder-applemedia"; + break; + + case "audioDecoder_WMF": + fluentName = "about-processes-utility-actor-audio-decoder-wmf"; + break; + + case "mfMediaEngineCDM": + fluentName = "about-processes-utility-actor-mf-media-engine"; + break; + + case "jSOracle": + fluentName = "about-processes-utility-actor-js-oracle"; + break; + + case "windowsUtils": + fluentName = "about-processes-utility-actor-windows-utils"; + break; + + case "windowsFileDialog": + fluentName = "about-processes-utility-actor-windows-file-dialog"; + break; + + default: + fluentName = "about-processes-utility-actor-unknown"; + break; + } + return fluentName; + }, + + displayUtilityActorRow(data, parent) { + const cellCount = 2; + // The actor name is expected to be unique within a given utility process. + let rowId = "u:" + parent.pid + data.actorName; + let row = this._getOrCreateRow(rowId, cellCount); + row.actor = data; + row.className = "actor"; + + // Column: name + let nameCell = row.firstChild; + let fluentName = this.utilityActorNameToFluentName(data.actorName); + let fluentArgs = {}; + this._fillCell(nameCell, { + fluentName, + fluentArgs, + classes: ["name", "indent", "favicon"], + }); + }, + + /** + * Display a row showing a single thread. + * + * @param {ThreadDelta} data The data to display. + * @param {Number} maxSlopeCpu The largest slopeCpu value. + */ + displayThreadRow(data, maxSlopeCpu) { + const cellCount = 3; + let rowId = "t:" + data.tid; + let row = this._getOrCreateRow(rowId, cellCount); + row.thread = data; + row.className = "thread"; + + // Column: name + let nameCell = row.firstChild; + this._fillCell(nameCell, { + fluentName: "about-processes-thread-name-and-id", + fluentArgs: { + name: data.name, + tid: "" + data.tid /* Make sure that this number is not localized */, + }, + classes: ["name", "double_indent"], + }); + + // Column: CPU + this.displayCpu(data, nameCell.nextSibling, maxSlopeCpu); + + // Third column (Buttons) is empty, nothing to do. + }, + + _orderedRows: [], + _fillCell(elt, { classes, fluentName, fluentArgs }) { + document.l10n.setAttributes(elt, fluentName, fluentArgs); + elt.className = classes.join(" "); + }, + + _getDuration(rawDurationNS) { + if (rawDurationNS <= NS_PER_US) { + return { duration: rawDurationNS, unit: "ns" }; + } + if (rawDurationNS <= NS_PER_MS) { + return { duration: rawDurationNS / NS_PER_US, unit: "us" }; + } + if (rawDurationNS <= NS_PER_S) { + return { duration: rawDurationNS / NS_PER_MS, unit: "ms" }; + } + if (rawDurationNS <= NS_PER_MIN) { + return { duration: rawDurationNS / NS_PER_S, unit: "s" }; + } + if (rawDurationNS <= NS_PER_HOUR) { + return { duration: rawDurationNS / NS_PER_MIN, unit: "m" }; + } + if (rawDurationNS <= NS_PER_DAY) { + return { duration: rawDurationNS / NS_PER_HOUR, unit: "h" }; + } + return { duration: rawDurationNS / NS_PER_DAY, unit: "d" }; + }, + + /** + * Format a value representing an amount of memory. + * + * As a special case, we also handle `null`, which represents the case in which we do + * not have sufficient information to compute an amount of memory. + * + * @param {Number?} value The value to format. Must be either `null` or a non-negative number. + * @return { {unit: "GB" | "MB" | "KB" | B" | "?"}, amount: Number } The formated amount and its + * unit, which may be used for e.g. additional CSS formating. + */ + _formatMemory(value) { + if (value == null) { + return { unit: "?", amount: 0 }; + } + if (typeof value != "number") { + throw new Error(`Invalid memory value ${value}`); + } + let abs = Math.abs(value); + if (abs >= ONE_GIGA) { + return { + unit: "GB", + amount: value / ONE_GIGA, + }; + } + if (abs >= ONE_MEGA) { + return { + unit: "MB", + amount: value / ONE_MEGA, + }; + } + if (abs >= ONE_KILO) { + return { + unit: "KB", + amount: value / ONE_KILO, + }; + } + return { + unit: "B", + amount: value, + }; + }, +}; + +var Control = { + // The set of all processes reported as "hung" by the process hang monitor. + // + // type: Set<ChildID> + _hungItems: new Set(), + _sortColumn: null, + _sortAscendent: true, + _removeSubtree(row) { + let sibling = row.nextSibling; + while (sibling && !sibling.classList.contains("process")) { + let next = sibling.nextSibling; + if (sibling.classList.contains("thread")) { + View._removeRow(sibling); + } + sibling = next; + } + }, + init() { + this._initHangReports(); + + // Start prefetching units. + this._promisePrefetchedUnits = (async function () { + let [ns, us, ms, s, m, h, d, B, KB, MB, GB, TB, PB, EB] = + await document.l10n.formatValues([ + { id: "duration-unit-ns" }, + { id: "duration-unit-us" }, + { id: "duration-unit-ms" }, + { id: "duration-unit-s" }, + { id: "duration-unit-m" }, + { id: "duration-unit-h" }, + { id: "duration-unit-d" }, + { id: "memory-unit-B" }, + { id: "memory-unit-KB" }, + { id: "memory-unit-MB" }, + { id: "memory-unit-GB" }, + { id: "memory-unit-TB" }, + { id: "memory-unit-PB" }, + { id: "memory-unit-EB" }, + ]); + return { + duration: { ns, us, ms, s, m, h, d }, + memory: { B, KB, MB, GB, TB, PB, EB }, + }; + })(); + + let tbody = document.getElementById("process-tbody"); + + // Single click: + // - show or hide the contents of a twisty; + // - close a process; + // - profile a process; + // - change selection. + tbody.addEventListener("click", event => { + this._updateLastMouseEvent(); + + this._handleActivate(event.target); + }); + + // Enter or Space keypress: + // - show or hide the contents of a twisty; + // - close a process; + // - profile a process; + // - change selection. + tbody.addEventListener("keypress", event => { + // Handle showing or hiding subitems of a row, when keyboard is used. + if (event.key === "Enter" || event.key === " ") { + this._handleActivate(event.target); + } + }); + + // Double click: + // - navigate to tab; + // - navigate to about:addons. + tbody.addEventListener("dblclick", event => { + this._updateLastMouseEvent(); + event.stopPropagation(); + + // Bubble up the doubleclick manually. + for ( + let target = event.target; + target && target.getAttribute("id") != "process-tbody"; + target = target.parentNode + ) { + if (target.classList.contains("tab")) { + // We've clicked on a tab, navigate. + let { tab, tabbrowser } = target.parentNode.win.tab; + tabbrowser.selectedTab = tab; + tabbrowser.ownerGlobal.focus(); + return; + } + if (target.classList.contains("extensions")) { + // We've clicked on the extensions process, open or reuse window. + let parentWin = + window.docShell.browsingContext.embedderElement.ownerGlobal; + parentWin.BrowserOpenAddonsMgr(); + return; + } + // Otherwise, proceed. + } + }); + + tbody.addEventListener("mousemove", () => { + this._updateLastMouseEvent(); + }); + + // Visibility change: + // - stop updating while the user isn't looking; + // - resume updating when the user returns. + window.addEventListener("visibilitychange", event => { + if (!document.hidden) { + this._updateDisplay(true); + } + }); + + document + .getElementById("process-thead") + .addEventListener("click", async event => { + if (!event.target.classList.contains("clickable")) { + return; + } + // Linux has conventions opposite to Windows and macOS on the direction of arrows + // when sorting. + const platformIsLinux = AppConstants.platform == "linux"; + const ascArrow = platformIsLinux ? "arrow-up" : "arrow-down"; + const descArrow = platformIsLinux ? "arrow-down" : "arrow-up"; + + if (this._sortColumn) { + const td = document.getElementById(this._sortColumn); + td.classList.remove(ascArrow, descArrow); + } + + const columnId = event.target.id; + if (columnId == this._sortColumn) { + // Reverse sorting order. + this._sortAscendent = !this._sortAscendent; + } else { + this._sortColumn = columnId; + this._sortAscendent = true; + } + + event.target.classList.toggle(ascArrow, this._sortAscendent); + event.target.classList.toggle(descArrow, !this._sortAscendent); + + await this._updateDisplay(true); + }); + }, + _lastMouseEvent: 0, + _updateLastMouseEvent() { + this._lastMouseEvent = Date.now(); + }, + _initHangReports() { + const PROCESS_HANG_REPORT_NOTIFICATION = "process-hang-report"; + + // Receiving report of a hung child. + // Let's store if for our next update. + let hangReporter = report => { + report.QueryInterface(Ci.nsIHangReport); + this._hungItems.add(report.childID); + }; + Services.obs.addObserver(hangReporter, PROCESS_HANG_REPORT_NOTIFICATION); + + // Don't forget to unregister the reporter. + window.addEventListener( + "unload", + () => { + Services.obs.removeObserver( + hangReporter, + PROCESS_HANG_REPORT_NOTIFICATION + ); + }, + { once: true } + ); + }, + async update(force = false) { + await State.update(force); + + if (document.hidden) { + return; + } + + await this._updateDisplay(force); + }, + + // The force parameter can force a full update even when the mouse has been + // moved recently. + async _updateDisplay(force = false) { + let counters = State.getCounters(); + if (this._promisePrefetchedUnits) { + gLocalizedUnits = await this._promisePrefetchedUnits; + this._promisePrefetchedUnits = null; + } + + // We reset `_hungItems`, based on the assumption that the process hang + // monitor will inform us again before the next update. Since the process hang monitor + // pings its clients about once per second and we update about once per 2 seconds + // (or more if the mouse moves), we should be ok. + let hungItems = this._hungItems; + this._hungItems = new Set(); + + counters = this._sortProcesses(counters); + + // Stored because it is used when opening the list of threads. + this._maxSlopeCpu = Math.max(...counters.map(process => process.slopeCpu)); + + let previousProcess = null; + for (let process of counters) { + this._sortDOMWindows(process.windows); + + process.isHung = process.childID && hungItems.has(process.childID); + + let processRow = View.displayProcessRow(process, this._maxSlopeCpu); + + if (process.type != "extension") { + // We do not want to display extensions. + for (let win of process.windows) { + if (SHOW_ALL_SUBFRAMES || win.tab || win.isProcessRoot) { + View.displayDOMWindowRow(win, process); + } + } + } + + if (process.type === "utility") { + for (let actor of process.utilityActors) { + View.displayUtilityActorRow(actor, process); + } + } + + if (SHOW_THREADS) { + if (View.displayThreadSummaryRow(process)) { + this._showThreads(processRow, this._maxSlopeCpu); + } + } + if ( + this._sortColumn == null && + previousProcess && + previousProcess.displayRank != process.displayRank + ) { + // Add a separation between successive categories of processes. + processRow.classList.add("separate-from-previous-process-group"); + } + previousProcess = process; + } + + if ( + !force && + Date.now() - this._lastMouseEvent < TIME_BEFORE_SORTING_AGAIN + ) { + // If there has been a recent mouse event, we don't want to reorder, + // add or remove rows so that the table content under the mouse pointer + // doesn't change when the user might be about to click to close a tab + // or kill a process. + // We didn't return earlier because updating CPU and memory values is + // still valuable. + View.discardUpdate(); + return; + } + + View.commit(); + + // Reset the selectedRow field if that row is no longer in the DOM + // to avoid keeping forever references to dead processes. + if (this.selectedRow && !this.selectedRow.parentNode) { + this.selectedRow = null; + } + + // Used by tests to differentiate full updates from l10n updates. + document.dispatchEvent(new CustomEvent("AboutProcessesUpdated")); + }, + _compareCpu(a, b) { + return ( + b.slopeCpu - a.slopeCpu || b.active - a.active || b.totalCpu - a.totalCpu + ); + }, + _showThreads(row, maxSlopeCpu) { + let process = row.process; + this._sortThreads(process.threads); + for (let thread of process.threads) { + View.displayThreadRow(thread, maxSlopeCpu); + } + }, + _sortThreads(threads) { + return threads.sort((a, b) => { + let order; + switch (this._sortColumn) { + case "column-name": + order = a.name.localeCompare(b.name) || a.tid - b.tid; + break; + case "column-cpu-total": + order = this._compareCpu(a, b); + break; + case "column-memory-resident": + case null: + order = a.tid - b.tid; + break; + default: + throw new Error("Unsupported order: " + this._sortColumn); + } + if (!this._sortAscendent) { + order = -order; + } + return order; + }); + }, + _sortProcesses(counters) { + return counters.sort((a, b) => { + let order; + switch (this._sortColumn) { + case "column-name": + order = + String(a.origin).localeCompare(b.origin) || + String(a.type).localeCompare(b.type) || + a.pid - b.pid; + break; + case "column-cpu-total": + order = this._compareCpu(a, b); + break; + case "column-memory-resident": + order = b.totalRamSize - a.totalRamSize; + break; + case null: + // Default order: classify processes by group. + order = + a.displayRank - b.displayRank || + // Other processes are ordered by origin. + String(a.origin).localeCompare(b.origin); + break; + default: + throw new Error("Unsupported order: " + this._sortColumn); + } + if (!this._sortAscendent) { + order = -order; + } + return order; + }); + }, + _sortDOMWindows(windows) { + return windows.sort((a, b) => { + let order = + a.displayRank - b.displayRank || + a.documentTitle.localeCompare(b.documentTitle) || + a.documentURI.spec.localeCompare(b.documentURI.spec); + if (!this._sortAscendent) { + order = -order; + } + return order; + }); + }, + + // Assign a display rank to a process. + // + // The `browser` process comes first (rank 0). + // Then come web tabs (rank 1). + // Then come web frames (rank 2). + // Then come special processes (minus preallocated) (rank 3). + // Then come preallocated processes (rank 4). + _getDisplayGroupRank(data, windows) { + const RANK_BROWSER = 0; + const RANK_WEB_TABS = 1; + const RANK_WEB_FRAMES = 2; + const RANK_UTILITY = 3; + const RANK_PREALLOCATED = 4; + let type = data.type; + switch (type) { + // Browser comes first. + case "browser": + return RANK_BROWSER; + // Web content comes next. + case "webIsolated": + case "webServiceWorker": + case "withCoopCoep": { + if (windows.some(w => w.tab)) { + return RANK_WEB_TABS; + } + return RANK_WEB_FRAMES; + } + // Preallocated processes come last. + case "preallocated": + return RANK_PREALLOCATED; + // "web" is special, as it could be one of: + // - web content currently loading/unloading/... + // - a preallocated process. + case "web": + if (windows.some(w => w.tab)) { + return RANK_WEB_TABS; + } + if (windows.length >= 1) { + return RANK_WEB_FRAMES; + } + // For the time being, we do not display DOM workers + // (and there's no API to get information on them). + // Once the blockers for bug 1663737 have landed, we'll be able + // to find out whether this process has DOM workers. If so, we'll + // count this process as a content process. + return RANK_PREALLOCATED; + // Other special processes before preallocated. + default: + return RANK_UTILITY; + } + }, + + // Handle events on image controls. + _handleActivate(target) { + if (target.classList.contains("twisty")) { + this._handleTwisty(target); + return; + } + if (target.classList.contains("close-icon")) { + this._handleKill(target); + return; + } + + if (target.classList.contains("profiler-icon")) { + this._handleProfiling(target); + return; + } + + this._handleSelection(target); + }, + + // Open/close list of threads. + _handleTwisty(target) { + let row = target.parentNode.parentNode; + if (target.classList.toggle("open")) { + target.setAttribute("aria-expanded", "true"); + this._showThreads(row, this._maxSlopeCpu); + View.insertAfterRow(row); + } else { + target.setAttribute("aria-expanded", "false"); + this._removeSubtree(row); + } + }, + + // Kill process/close tab/close subframe. + _handleKill(target) { + let row = target.parentNode; + if (row.process) { + // Kill process immediately. + let pid = row.process.pid; + + // Make sure that the user can't click twice on the kill button. + // Otherwise, chaos might ensue. Plus we risk crashing under Windows. + View._killedRecently.push({ pid }); + + // Discard tab contents and show that the process and all its contents are getting killed. + row.classList.add("killing"); + for ( + let childRow = row.nextSibling; + childRow && !childRow.classList.contains("process"); + childRow = childRow.nextSibling + ) { + childRow.classList.add("killing"); + let win = childRow.win; + if (win) { + View._killedRecently.push({ pid: win.outerWindowId }); + if (win.tab && win.tab.tabbrowser) { + win.tab.tabbrowser.discardBrowser( + win.tab.tab, + /* aForceDiscard = */ true + ); + } + } + } + + // Finally, kill the process. + const ProcessTools = Cc["@mozilla.org/processtools-service;1"].getService( + Ci.nsIProcessToolsService + ); + ProcessTools.kill(pid); + } else if (row.win && row.win.tab && row.win.tab.tabbrowser) { + // This is a tab, close it. + row.win.tab.tabbrowser.removeTab(row.win.tab.tab, { + skipPermitUnload: true, + animate: true, + }); + View._killedRecently.push({ outerWindowId: row.win.outerWindowId }); + row.classList.add("killing"); + + // If this was the only root window of the process, show that the process is also getting killed. + if (row.previousSibling.classList.contains("process")) { + let parentRow = row.previousSibling; + let roots = 0; + for (let win of parentRow.process.windows) { + if (win.isProcessRoot) { + roots += 1; + } + } + if (roots <= 1) { + // Yes, we're the only process root, so the process is dying. + // + // It might actually become a preloaded process rather than + // dying. That's an acceptable error. Even if we display incorrectly + // that the process is dying, this error will last only one refresh. + View._killedRecently.push({ pid: parentRow.process.pid }); + parentRow.classList.add("killing"); + } + } + } + }, + + // Handle profiling of a process. + _handleProfiling(target) { + if (Services.profiler.IsActive()) { + return; + } + Services.profiler.StartProfiler( + 10000000, + 1, + ["default", "ipcmessages", "power"], + ["pid:" + target.parentNode.parentNode.process.pid] + ); + target.classList.add("profiler-active"); + setTimeout(() => { + ProfilerPopupBackground.captureProfile("aboutprofiling"); + target.classList.remove("profiler-active"); + }, PROFILE_DURATION * 1000); + }, + + // Handle selection changes. + _handleSelection(target) { + let row = target.closest("tr"); + if (!row) { + return; + } + if (this.selectedRow) { + this.selectedRow.removeAttribute("selected"); + if (this.selectedRow.rowId == row.rowId) { + // Clicking the same row again clears the selection. + this.selectedRow = null; + return; + } + } + row.setAttribute("selected", "true"); + this.selectedRow = row; + }, +}; + +window.onload = async function () { + Control.init(); + + // Display immediately the list of processes. CPU values will be missing. + await Control.update(); + + // After the minimum interval between samples, force an update to show + // valid CPU values asap. + await new Promise(resolve => + setTimeout(resolve, MINIMUM_INTERVAL_BETWEEN_SAMPLES_MS) + ); + await Control.update(true); + + // Then update at the normal frequency. + window.setInterval(() => Control.update(), UPDATE_INTERVAL_MS); +}; diff --git a/toolkit/components/aboutprocesses/jar.mn b/toolkit/components/aboutprocesses/jar.mn new file mode 100644 index 0000000000..724a747306 --- /dev/null +++ b/toolkit/components/aboutprocesses/jar.mn @@ -0,0 +1,8 @@ +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +toolkit.jar: + content/global/aboutProcesses.html (content/aboutProcesses.html) + content/global/aboutProcesses.js (content/aboutProcesses.js) + content/global/aboutProcesses.css (content/aboutProcesses.css) diff --git a/toolkit/components/aboutprocesses/moz.build b/toolkit/components/aboutprocesses/moz.build new file mode 100644 index 0000000000..5206b02fe0 --- /dev/null +++ b/toolkit/components/aboutprocesses/moz.build @@ -0,0 +1,12 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +with Files("**"): + BUG_COMPONENT = ("Toolkit", "Performance Monitoring") + +JAR_MANIFESTS += ["jar.mn"] + +BROWSER_CHROME_MANIFESTS += ["tests/browser/browser.toml"] diff --git a/toolkit/components/aboutprocesses/tests/browser/browser.toml b/toolkit/components/aboutprocesses/tests/browser/browser.toml new file mode 100644 index 0000000000..07bec9de5e --- /dev/null +++ b/toolkit/components/aboutprocesses/tests/browser/browser.toml @@ -0,0 +1,32 @@ +[DEFAULT] +head = "head.js" +skip-if = [ + "asan", + "tsan" +] # With sanitizers, we regularly hit internal timeouts. +support-files = ["small-shot.mp3"] + +["browser_aboutprocesses_default_options.js"] +fail-if = ["a11y_checks"] # Bug 1854228 td.action-icon, td.close-icon may not be focusable +https_first_disabled = true + +["browser_aboutprocesses_selection.js"] +fail-if = ["a11y_checks"] # Bug 1854228 tr.process, tr.window, tr.thread, tr.thread-summary may not be focusable + +["browser_aboutprocesses_shortcut.js"] + +["browser_aboutprocesses_show_all_frames.js"] +fail-if = ["a11y_checks"] # Bug 1854228 td.action-icon, td.close-icon may not be focusable +https_first_disabled = true + +["browser_aboutprocesses_show_frames_without_threads.js"] +fail-if = ["a11y_checks"] # Bug 1854228 td.action-icon, td.close-icon may not be focusable +https_first_disabled = true + +["browser_aboutprocesses_show_threads.js"] +fail-if = ["a11y_checks"] # Bug 1854228 td.action-icon, td.close-icon may not be focusable +https_first_disabled = true + +["browser_aboutprocesses_twisty.js"] + +["browser_aboutprocesses_utility_actors.js"] diff --git a/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_default_options.js b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_default_options.js new file mode 100644 index 0000000000..15ed1c4501 --- /dev/null +++ b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_default_options.js @@ -0,0 +1,7 @@ +// Test about:processes with default options. +add_task(async function testDefaultOptions() { + return testAboutProcessesWithConfig({ + showAllFrames: false, + showThreads: false, + }); +}); diff --git a/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_selection.js b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_selection.js new file mode 100644 index 0000000000..f208fb095d --- /dev/null +++ b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_selection.js @@ -0,0 +1,124 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +var doc, tbody, tabAboutProcesses; + +const rowTypes = ["process", "window", "thread-summary", "thread"]; + +function promiseUpdate() { + return promiseAboutProcessesUpdated({ + doc, + tbody, + force: true, + tabAboutProcesses, + }); +} + +add_setup(async function () { + Services.prefs.setBoolPref("toolkit.aboutProcesses.showThreads", true); + + info("Setting up about:processes"); + tabAboutProcesses = await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + opening: "about:processes", + waitForLoad: true, + }); + + doc = tabAboutProcesses.linkedBrowser.contentDocument; + tbody = doc.getElementById("process-tbody"); + await promiseUpdate(); + + info("Open a list of threads to have thread rows displayed"); + let twisty = doc.querySelector("tr.thread-summary .twisty"); + twisty.click(); + await promiseUpdate(); +}); + +add_task(async function testSelectionPersistedAfterUpdate() { + for (let rowType of rowTypes) { + let row = doc.querySelector(`tr.${rowType}`); + Assert.ok(!!row, `Found ${rowType} row`); + Assert.ok(!row.hasAttribute("selected"), "The row should not be selected"); + + info("Click in the row to select it."); + row.click(); + Assert.equal( + row.getAttribute("selected"), + "true", + "The row should be selected" + ); + Assert.equal( + doc.querySelectorAll("[selected]").length, + 1, + "There should be only one selected row" + ); + + info("Wait for an update and ensure the selected row is still the same"); + let rowId = row.rowId; + let findRowsWithId = rowId => + [...doc.querySelectorAll("tr")].filter(r => r.rowId == rowId); + Assert.equal( + findRowsWithId(rowId).length, + 1, + "There should be only one row with id " + rowId + ); + await promiseUpdate(); + let selectedRow = doc.querySelector("[selected]"); + if (rowType == "thread" && !selectedRow) { + info("The thread row might have disappeared if the thread has ended"); + Assert.equal( + findRowsWithId(rowId).length, + 0, + "There should no longer be a row with id " + rowId + ); + continue; + } + Assert.ok( + !!selectedRow, + "There should still be a selected row after an update" + ); + Assert.equal( + selectedRow.rowId, + rowId, + "The selected row should have the same id as the row we clicked" + ); + } +}); + +add_task(function testClickAgainToRemoveSelection() { + for (let rowType of rowTypes) { + let row = doc.querySelector(`tr.${rowType}`); + Assert.ok(!!row, `Found ${rowType} row`); + Assert.ok(!row.hasAttribute("selected"), "The row should not be selected"); + info("Click in the row to select it."); + row.click(); + Assert.equal( + row.getAttribute("selected"), + "true", + "The row should now be selected" + ); + Assert.equal( + doc.querySelectorAll("[selected]").length, + 1, + "There should be only one selected row" + ); + + info("Click the row again to remove the selection."); + row.click(); + Assert.ok( + !row.hasAttribute("selected"), + "The row should no longer be selected" + ); + Assert.ok( + !doc.querySelector("[selected]"), + "There should be no selected row" + ); + } +}); + +add_task(function cleanup() { + BrowserTestUtils.removeTab(tabAboutProcesses); + Services.prefs.clearUserPref("toolkit.aboutProcesses.showThreads"); +}); diff --git a/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_shortcut.js b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_shortcut.js new file mode 100644 index 0000000000..61b8be1fcd --- /dev/null +++ b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_shortcut.js @@ -0,0 +1,16 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +add_task(async function () { + // Wait for the browser to be ready to receive keyboard events. + if (!gBrowser.selectedBrowser.hasLayers) { + await BrowserTestUtils.waitForEvent(window, "MozLayerTreeReady"); + } + + EventUtils.synthesizeKey("KEY_Escape", { shiftKey: true }); + + await BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser); + Assert.equal(gBrowser.selectedBrowser.currentURI.spec, "about:processes"); +}); diff --git a/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_show_all_frames.js b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_show_all_frames.js new file mode 100644 index 0000000000..2c437f9dc4 --- /dev/null +++ b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_show_all_frames.js @@ -0,0 +1,6 @@ +add_task(async function testShowFramesAndThreads() { + await testAboutProcessesWithConfig({ + showAllFrames: true, + showThreads: true, + }); +}); diff --git a/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_show_frames_without_threads.js b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_show_frames_without_threads.js new file mode 100644 index 0000000000..178ceec9ed --- /dev/null +++ b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_show_frames_without_threads.js @@ -0,0 +1,6 @@ +add_task(async function testShowFramesWithoutThreads() { + await testAboutProcessesWithConfig({ + showAllFrames: true, + showThreads: false, + }); +}); diff --git a/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_show_threads.js b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_show_threads.js new file mode 100644 index 0000000000..10e630ab31 --- /dev/null +++ b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_show_threads.js @@ -0,0 +1,7 @@ +// Test about:processes with showThreads: true, showAllFrames: false. +add_task(async function testShowThreads() { + return testAboutProcessesWithConfig({ + showAllFrames: false, + showThreads: true, + }); +}); diff --git a/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_twisty.js b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_twisty.js new file mode 100644 index 0000000000..77fb0fbfbb --- /dev/null +++ b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_twisty.js @@ -0,0 +1,134 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +let doc, tbody, tabAboutProcesses; + +const rowTypes = ["process", "window", "thread-summary", "thread"]; + +function promiseUpdate() { + return promiseAboutProcessesUpdated({ + doc, + tbody, + force: true, + tabAboutProcesses, + }); +} + +add_setup(async function () { + Services.prefs.setBoolPref("toolkit.aboutProcesses.showThreads", true); + + info("Setting up about:processes"); + tabAboutProcesses = await BrowserTestUtils.openNewForegroundTab({ + gBrowser, + opening: "about:processes", + waitForLoad: true, + }); + + doc = tabAboutProcesses.linkedBrowser.contentDocument; + tbody = doc.getElementById("process-tbody"); + await promiseUpdate(); +}); + +add_task(function testTwistyImageButtonSetup() { + let twistyBtn = doc.querySelector("tr.thread-summary .twisty"); + let groupRow = twistyBtn.parentNode.parentNode; + let groupRowId = groupRow.firstChild.children[1].getAttribute("id"); + let groupRowLabelId = groupRowId.split(":")[1]; + + info("Verify twisty button is properly set up."); + Assert.ok( + twistyBtn.hasAttribute("aria-labelledby"), + "the Twisty image button has an aria-labelledby" + ); + Assert.equal( + twistyBtn.getAttribute("aria-labelledby"), + `${groupRowLabelId}-label ${groupRowId}`, + "the Twisty image button's aria-labelledby refers to a valid 'id' that is the Name of its row" + ); + Assert.equal( + twistyBtn.getAttribute("role"), + "button", + "the Twisty image is programmatically a button" + ); + Assert.equal( + twistyBtn.getAttribute("tabindex"), + "0", + "the Twisty image button is included in the focus order" + ); + Assert.equal( + twistyBtn.getAttribute("aria-expanded"), + "false", + "the Twisty image button is collapsed by default" + ); +}); + +add_task(function testTwistyImageButtonClicking() { + let twistyBtn = doc.querySelector("tr.thread-summary .twisty"); + let groupRow = twistyBtn.parentNode.parentNode; + + info( + "Verify we can toggle/open a list of threads by clicking the twisty button." + ); + twistyBtn.click(); + + Assert.ok( + groupRow.nextSibling.classList.contains("thread") && + !groupRow.nextSibling.classList.contains("thread-summary"), + "clicking a collapsed Twisty adds subitems after the row" + ); + Assert.equal( + twistyBtn.getAttribute("aria-expanded"), + "true", + "the Twisty image button is expanded after a click" + ); +}); + +add_task(function testTwistyImageButtonKeypressing() { + let twistyBtn = doc.querySelector("tr.thread-summary .twisty"); + let groupRow = twistyBtn.parentNode.parentNode; + + info( + `Verify we can toggle/close a list of threads by pressing Enter or + Space on the twisty button.` + ); + // Verify the twisty button can be focused with a keyboard. + twistyBtn.focus(); + Assert.equal( + twistyBtn, + doc.activeElement, + "the Twisty image button can be focused" + ); + + // Verify we can toggle subitems with a keyboard. + // Twisty is expanded + EventUtils.synthesizeKey("KEY_Enter"); + Assert.ok( + !groupRow.nextSibling.classList.contains("thread") || + groupRow.nextSibling.classList.contains("thread-summary"), + "pressing Enter on expanded Twisty hides a list of threads after the row" + ); + Assert.equal( + twistyBtn.getAttribute("aria-expanded"), + "false", + "the Twisty image button is collapsed after an Enter keypress" + ); + // Twisty is collapsed + EventUtils.synthesizeKey(" "); + Assert.ok( + groupRow.nextSibling.classList.contains("thread") && + !groupRow.nextSibling.classList.contains("thread-summary"), + "pressing Space on collapsed Twisty shows a list of threads after the row" + ); + Assert.equal( + twistyBtn.getAttribute("aria-expanded"), + "true", + "the Twisty image button is expanded after a Space keypress" + ); +}); + +add_task(function cleanup() { + BrowserTestUtils.removeTab(tabAboutProcesses); + Services.prefs.clearUserPref("toolkit.aboutProcesses.showThreads"); +}); diff --git a/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_utility_actors.js b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_utility_actors.js new file mode 100644 index 0000000000..8ab7dcb747 --- /dev/null +++ b/toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_utility_actors.js @@ -0,0 +1,44 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test about:processes preparation of utility actor names. +add_task(async function testUtilityActorNames() { + await BrowserTestUtils.withNewTab( + { + gBrowser, + opening: "about:processes", + waitForLoad: true, + }, + browser => { + const View = browser.contentWindow.View; + const unknownActorName = "unknown"; + const kDontExistFluentName = + View.utilityActorNameToFluentName("i-dont-exist"); + const unknownFluentName = + View.utilityActorNameToFluentName(unknownActorName); + + Assert.equal( + unknownFluentName, + kDontExistFluentName, + "Anything is unknown" + ); + + for (let actorName of ChromeUtils.getAllPossibleUtilityActorNames()) { + const fluentName = View.utilityActorNameToFluentName(actorName); + if (actorName === unknownActorName) { + Assert.ok( + fluentName === unknownFluentName, + `Actor name ${actorName} is expected unknown ${fluentName}` + ); + } else { + Assert.ok( + fluentName !== unknownFluentName, + `Actor name ${actorName} is known ${fluentName}` + ); + } + } + } + ); +}); diff --git a/toolkit/components/aboutprocesses/tests/browser/head.js b/toolkit/components/aboutprocesses/tests/browser/head.js new file mode 100644 index 0000000000..7f22825fa2 --- /dev/null +++ b/toolkit/components/aboutprocesses/tests/browser/head.js @@ -0,0 +1,1066 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// A bunch of assumptions we make about the behavior of the parent process, +// and which we use as sanity checks. If Firefox evolves, we will need to +// update these values. +// Note that Test Verify can really stress the cpu durations. +const HARDCODED_ASSUMPTIONS_PROCESS = { + minimalNumberOfThreads: 6, + maximalNumberOfThreads: 1000, + minimalCPUPercentage: 0, + maximalCPUPercentage: 1000, + minimalCPUTotalDurationMS: 10, + maximalCPUTotalDurationMS: 10000000, + minimalRAMBytesUsage: 1024 * 1024 /* 1 Megabyte */, + maximalRAMBytesUsage: 1024 * 1024 * 1024 * 1024 * 1 /* 1 Tb */, +}; + +const HARDCODED_ASSUMPTIONS_THREAD = { + minimalCPUPercentage: 0, + maximalCPUPercentage: 100, + minimalCPUTotalDurationMS: 0, + maximalCPUTotalDurationMS: 10000000, +}; + +// How close we accept our rounding up/down. +const APPROX_FACTOR = 1.51; +const MS_PER_NS = 1000000; + +// Wait for `about:processes` to be updated. +async function promiseAboutProcessesUpdated({ doc, force, tabAboutProcesses }) { + let startTime = performance.now(); + + let updatePromise = new Promise(resolve => { + doc.addEventListener("AboutProcessesUpdated", resolve, { once: true }); + }); + + if (force) { + await SpecialPowers.spawn(tabAboutProcesses.linkedBrowser, [], async () => { + info("Forcing about:processes refresh"); + await content.Control.update(/* force = */ true); + }); + } + + await updatePromise; + + // Fluent will update the visible table content during the next + // refresh driver tick, wait for it. + // requestAnimationFrame calls us at the begining of the tick, we use + // dispatchToMainThread to execute our code after the end of it. + //XXX: Replace with proper wait for l10n completion once bug 1520659 is fixed. + await new Promise(doc.defaultView.requestAnimationFrame); + await new Promise(resolve => Services.tm.dispatchToMainThread(resolve)); + + ChromeUtils.addProfilerMarker( + "promiseAboutProcessesUpdated", + { startTime, category: "Test" }, + force ? "force" : undefined + ); +} + +function promiseProcessDied({ childID }) { + return new Promise(resolve => { + let observer = properties => { + properties.QueryInterface(Ci.nsIPropertyBag2); + let subjectChildID = properties.get("childID"); + if (subjectChildID == childID) { + Services.obs.removeObserver(observer, "ipc:content-shutdown"); + resolve(); + } + }; + Services.obs.addObserver(observer, "ipc:content-shutdown"); + }); +} + +function isCloseEnough(value, expected) { + if (value < 0 || expected < 0) { + throw new Error(`Invalid isCloseEnough(${value}, ${expected})`); + } + if (Math.round(value) == Math.round(expected)) { + return true; + } + if (expected == 0) { + return false; + } + let ratio = value / expected; + if (ratio <= APPROX_FACTOR && ratio >= 1 / APPROX_FACTOR) { + return true; + } + return false; +} + +function getMemoryMultiplier(unit, sign = "+") { + let multiplier; + switch (sign) { + case "+": + multiplier = 1; + break; + case "-": + multiplier = -1; + break; + default: + throw new Error("Invalid sign: " + sign); + } + switch (unit) { + case "B": + break; + case "KB": + multiplier *= 1024; + break; + case "MB": + multiplier *= 1024 * 1024; + break; + case "GB": + multiplier *= 1024 * 1024 * 1024; + break; + case "TB": + multiplier *= 1024 * 1024 * 1024 * 1024; + break; + default: + throw new Error("Invalid memory unit: " + unit); + } + return multiplier; +} + +function getTimeMultiplier(unit) { + switch (unit) { + case "ns": + return 1 / (1000 * 1000); + case "µs": + return 1 / 1000; + case "ms": + return 1; + case "s": + return 1000; + case "m": + return 60000; + } + throw new Error("Invalid time unit: " + unit); +} +async function testCpu(element, total, slope, assumptions) { + info( + `Testing CPU display ${element.textContent} - ${element.title} vs total ${total}, slope ${slope}` + ); + let barWidth = getComputedStyle(element).getPropertyValue("--bar-width"); + if (slope) { + Assert.greater( + Number.parseFloat(barWidth), + 0, + "The bar width should be > 0 when there is some CPU use" + ); + } else { + Assert.equal(barWidth, "-0.5", "There should be no CPU bar displayed"); + } + + if (element.textContent == "(measuring)") { + info("Still measuring"); + return; + } + + const CPU_TEXT_CONTENT_REGEXP = /\~0%|idle|[0-9.,]+%|[?]/; + let extractedPercentage = CPU_TEXT_CONTENT_REGEXP.exec( + element.textContent + )[0]; + switch (extractedPercentage) { + case "idle": + Assert.equal(slope, 0, "Idle means exactly 0%"); + // Nothing else to do here. + return; + case "~0%": + Assert.ok(slope > 0 && slope < 0.0001); + break; + case "?": + Assert.ok(slope == null); + // Nothing else to do here. + return; + default: { + // `Number.parseFloat("99%")` returns `99`. + let computedPercentage = Number.parseFloat(extractedPercentage); + Assert.ok( + isCloseEnough(computedPercentage, slope * 100), + `The displayed approximation of the slope is reasonable: ${computedPercentage} vs ${ + slope * 100 + }` + ); + // Also, sanity checks. + Assert.ok( + computedPercentage / 100 >= assumptions.minimalCPUPercentage, + `Not too little: ${computedPercentage / 100} >=? ${ + assumptions.minimalCPUPercentage + } ` + ); + Assert.ok( + computedPercentage / 100 <= assumptions.maximalCPUPercentage, + `Not too much: ${computedPercentage / 100} <=? ${ + assumptions.maximalCPUPercentage + } ` + ); + break; + } + } + + const CPU_TOOLTIP_REGEXP = /(?:.*: ([0-9.,]+) ?(ns|µs|ms|s|m|h|d))/; + // Example: "Total CPU time: 4,470ms" + + let [, extractedTotal, extractedUnit] = CPU_TOOLTIP_REGEXP.exec( + element.title + ); + + let totalMS = total / MS_PER_NS; + let computedTotal = + // We produce localized numbers, with "," as a thousands separator in en-US builds, + // but `parseFloat` doesn't understand the ",", so we need to remove it + // before parsing. + Number.parseFloat(extractedTotal.replace(/,/g, "")) * + getTimeMultiplier(extractedUnit); + Assert.ok( + isCloseEnough(computedTotal, totalMS), + `The displayed approximation of the total duration is reasonable: ${computedTotal} vs ${totalMS}` + ); + Assert.ok( + totalMS <= assumptions.maximalCPUTotalDurationMS && + totalMS >= assumptions.minimalCPUTotalDurationMS, + `The total number of MS is reasonable ${totalMS}: [${assumptions.minimalCPUTotalDurationMS}, ${assumptions.maximalCPUTotalDurationMS}]` + ); +} + +async function testMemory(element, total, delta, assumptions) { + info( + `Testing memory display ${element.textContent} - ${element.title} vs total ${total}, delta ${delta}` + ); + const MEMORY_TEXT_CONTENT_REGEXP = /([0-9.,]+)(TB|GB|MB|KB|B)/; + // Example: "383.55MB" + let extracted = MEMORY_TEXT_CONTENT_REGEXP.exec(element.textContent); + Assert.notEqual( + extracted, + null, + `Can we parse ${element.textContent} with ${MEMORY_TEXT_CONTENT_REGEXP}?` + ); + let [, extractedTotal, extractedUnit] = extracted; + + let extractedTotalNumber = Number.parseFloat(extractedTotal); + Assert.ok( + extractedTotalNumber > 0, + `Unitless total memory use is greater than 0: ${extractedTotal}` + ); + if (extractedUnit != "GB") { + Assert.ok( + extractedTotalNumber <= 1024, + `Unitless total memory use is less than 1024: ${extractedTotal}` + ); + } + + // Now check that the conversion was meaningful. + let computedTotal = getMemoryMultiplier(extractedUnit) * extractedTotalNumber; + Assert.ok( + isCloseEnough(computedTotal, total), + `The displayed approximation of the total amount of memory is reasonable: ${computedTotal} vs ${total}` + ); + if (!AppConstants.ASAN) { + // ASAN plays tricks with RAM (e.g. allocates the entirety of virtual memory), + // which makes this test unrealistic. + Assert.ok( + assumptions.minimalRAMBytesUsage <= computedTotal && + computedTotal <= assumptions.maximalRAMBytesUsage, + `The total amount amount of memory is reasonable: ${computedTotal} in [${assumptions.minimalRAMBytesUsage}, ${assumptions.maximalRAMBytesUsage}]` + ); + } + + const MEMORY_TOOLTIP_REGEXP = /(?:.*: ([-+]?)([0-9.,]+)(GB|MB|KB|B))?/; + // Example: "Evolution: -12.5MB" + extracted = MEMORY_TOOLTIP_REGEXP.exec(element.title); + Assert.notEqual( + extracted, + null, + `Can we parse ${element.title} with ${MEMORY_TOOLTIP_REGEXP}?` + ); + let [, extractedDeltaSign, extractedDeltaTotal, extractedDeltaUnit] = + extracted; + if (extractedDeltaSign == null) { + Assert.equal(delta || 0, 0); + return; + } + let deltaTotalNumber = Number.parseFloat( + // Remove the thousands separator that breaks parseFloat. + extractedDeltaTotal.replace(/,/g, "") + ); + // Note: displaying 1024KB can happen if the value is slightly less than + // 1024*1024B but rounded to 1024KB. + Assert.ok( + deltaTotalNumber > 0 && deltaTotalNumber <= 1024, + `Unitless delta memory use is in (0, 1024): ${extractedDeltaTotal}` + ); + Assert.ok( + ["B", "KB", "MB"].includes(extractedDeltaUnit), + `Delta unit is reasonable: ${extractedDeltaUnit}` + ); + + // Now check that the conversion was meaningful. + // Let's just check that the number displayed is within 10% of `delta`. + let computedDelta = + getMemoryMultiplier(extractedDeltaUnit, extractedDeltaSign) * + deltaTotalNumber; + Assert.equal( + computedDelta >= 0, + delta >= 0, + `Delta has the right sign: ${computedDelta} vs ${delta}` + ); +} + +function extractProcessDetails(row) { + let children = row.children; + let name = children[0]; + let memory = children[1]; + let cpu = children[2]; + if (Services.prefs.getBoolPref("toolkit.aboutProcesses.showProfilerIcons")) { + name = name.firstChild; + Assert.ok( + name.nextSibling.classList.contains("profiler-icon"), + "The profiler icon should be shown" + ); + } + let fluentArgs = row.ownerDocument.l10n.getAttributes(name).args; + let threadDetailsRow = row.nextSibling; + while (threadDetailsRow) { + if (threadDetailsRow.classList.contains("process")) { + threadDetailsRow = null; + break; + } + if (threadDetailsRow.classList.contains("thread-summary")) { + break; + } + threadDetailsRow = threadDetailsRow.nextSibling; + } + + return { + memory, + cpu, + pidContent: fluentArgs.pid, + threads: threadDetailsRow, + }; +} + +function findTabRowByName(doc, name) { + for (let row of doc.getElementsByClassName("name")) { + if (!row.parentNode.classList.contains("window")) { + continue; + } + let foundName = document.l10n.getAttributes(row).args.name; + if (foundName != name) { + continue; + } + return row.parentNode; + } + return null; +} + +function findProcessRowByOrigin(doc, origin) { + for (let row of doc.getElementsByClassName("process")) { + if (row.process.origin == origin) { + return row; + } + } + return null; +} + +async function setupTabWithOriginAndTitle(origin, title) { + let tab = BrowserTestUtils.addTab(gBrowser, origin, { skipAnimation: true }); + tab.testTitle = title; + tab.testOrigin = origin; + await BrowserTestUtils.browserLoaded(tab.linkedBrowser); + await SpecialPowers.spawn(tab.linkedBrowser, [title], async title => { + content.document.title = title; + }); + return tab; +} + +async function setupAudioTab() { + let origin = "about:blank"; + let title = "utility audio"; + let tab = BrowserTestUtils.addTab(gBrowser, origin, { skipAnimation: true }); + tab.testTitle = title; + tab.testOrigin = origin; + await BrowserTestUtils.browserLoaded(tab.linkedBrowser); + await SpecialPowers.spawn(tab.linkedBrowser, [title], async title => { + content.document.title = title; + const ROOT = + "https://example.com/browser/toolkit/components/aboutprocesses/tests/browser"; + let audio = content.document.createElement("audio"); + audio.setAttribute("controls", "true"); + audio.setAttribute("loop", true); + audio.src = `${ROOT}/small-shot.mp3`; + content.document.body.appendChild(audio); + await audio.play(); + }); + return tab; +} + +async function testAboutProcessesWithConfig({ showAllFrames, showThreads }) { + const isFission = gFissionBrowser; + await SpecialPowers.pushPrefEnv({ + set: [ + ["toolkit.aboutProcesses.showAllSubframes", showAllFrames], + ["toolkit.aboutProcesses.showThreads", showThreads], + // Force same-origin tabs to share a single process, to properly test + // functionality involving multiple tabs within a single process with Fission. + ["dom.ipc.processCount.webIsolated", 1], + // Ensure utility audio decoder is enabled + ["media.utility-process.enabled", true], + ], + }); + + // Install a test extension to also cover processes and sub-frames related to the + // extension process. + const extension = ExtensionTestUtils.loadExtension({ + manifest: { + browser_specific_settings: { + gecko: { id: "test-aboutprocesses@mochi.test" }, + }, + }, + background() { + // Creates an about:blank iframe in the extension process to make sure that + // Bug 1665099 doesn't regress. + document.body.appendChild(document.createElement("iframe")); + + this.browser.test.sendMessage("bg-page-loaded"); + }, + }); + + await extension.startup(); + await extension.awaitMessage("bg-page-loaded"); + + // Setup tabs asynchronously. + + // The about:processes tab. + info("Setting up about:processes"); + let promiseTabAboutProcesses = BrowserTestUtils.openNewForegroundTab({ + gBrowser, + opening: "about:processes", + waitForLoad: true, + }); + + info("Setting up example.com"); + // Another tab that we'll pretend is hung. + let promiseTabHung = (async function () { + let tab = BrowserTestUtils.addTab(gBrowser, "http://example.com", { + skipAnimation: true, + }); + await BrowserTestUtils.browserLoaded(tab.linkedBrowser); + let p = BrowserTestUtils.browserLoaded( + tab.linkedBrowser, + true /* includeSubFrames */ + ); + await SpecialPowers.spawn(tab.linkedBrowser, [], async () => { + // Open an in-process iframe to test toolkit.aboutProcesses.showAllSubframes + let frame = content.document.createElement("iframe"); + content.document.body.appendChild(frame); + }); + await p; + return tab; + })(); + + let promiseAudioPlayback = setupAudioTab(); + + let promiseUserContextTab = (async function () { + let tab = BrowserTestUtils.addTab(gBrowser, "http://example.com", { + userContextId: 1, + skipAnimation: true, + }); + await BrowserTestUtils.browserLoaded(tab.linkedBrowser); + await SpecialPowers.spawn(tab.linkedBrowser, [], () => { + content.document.title = "Tab with User Context"; + }); + return tab; + })(); + + info("Setting up tabs we intend to close"); + + // The two following tabs share the same domain. + // We use them to check that closing one doesn't close the other. + let promiseTabCloseSeparately1 = setupTabWithOriginAndTitle( + "http://example.org", + "Close me 1 (separately)" + ); + let promiseTabCloseSeparately2 = setupTabWithOriginAndTitle( + "http://example.org", + "Close me 2 (separately)" + ); + + // The two following tabs share the same domain. + // We use them to check that closing the process kills them both. + let promiseTabCloseProcess1 = setupTabWithOriginAndTitle( + "http://example.net", + "Close me 1 (process)" + ); + + let promiseTabCloseProcess2 = setupTabWithOriginAndTitle( + "http://example.net", + "Close me 2 (process)" + ); + + // The two following tabs share the same domain. + // We use them to check that closing the process kills them both. + let promiseTabCloseTogether1 = setupTabWithOriginAndTitle( + "https://example.org", + "Close me 1 (together)" + ); + + let promiseTabCloseTogether2 = setupTabWithOriginAndTitle( + "https://example.org", + "Close me 2 (together)" + ); + + // Wait for initialization to finish. + let tabAboutProcesses = await promiseTabAboutProcesses; + let tabHung = await promiseTabHung; + let audioPlayback = await promiseAudioPlayback; + let tabUserContext = await promiseUserContextTab; + let tabCloseSeparately1 = await promiseTabCloseSeparately1; + let tabCloseSeparately2 = await promiseTabCloseSeparately2; + let tabCloseProcess1 = await promiseTabCloseProcess1; + let tabCloseProcess2 = await promiseTabCloseProcess2; + let tabCloseTogether1 = await promiseTabCloseTogether1; + let tabCloseTogether2 = await promiseTabCloseTogether2; + + let doc = tabAboutProcesses.linkedBrowser.contentDocument; + let tbody = doc.getElementById("process-tbody"); + Assert.ok(!!tbody, "Found the #process-tbody element"); + + if (isFission) { + // We're going to kill this process later, so tell it to add an + // annotation so the leak checker knows it is okay there is no + // leak log. + await SpecialPowers.spawn(tabCloseProcess1.linkedBrowser, [], () => { + ChromeUtils.privateNoteIntentionalCrash(); + }); + } + + info("Setting up fake process hang detector"); + let hungChildID = tabHung.linkedBrowser.frameLoader.childID; + + // Keep informing about:processes that `tabHung` is hung. + // Note: this is a background task, do not `await` it. + let fakeProcessHangMonitor = async function () { + for (let i = 0; i < 100; ++i) { + if (!tabHung.linkedBrowser) { + // Let's stop spamming as soon as we can. + return; + } + + Services.obs.notifyObservers( + { + childID: hungChildID, + scriptBrowser: tabHung.linkedBrowser, + scriptFileName: "chrome://browser/content/browser.js", + QueryInterface: ChromeUtils.generateQI(["nsIHangReport"]), + }, + "process-hang-report" + ); + + // eslint-disable-next-line mozilla/no-arbitrary-setTimeout + await new Promise(resolve => setTimeout(resolve, 300)); + } + }; + fakeProcessHangMonitor(); + + // about:processes will take a little time to appear and be populated. + await promiseAboutProcessesUpdated({ doc, tabAboutProcesses }); + Assert.ok(tbody.childElementCount, "The table should be populated"); + Assert.ok( + !!tbody.getElementsByClassName("hung").length, + "The hung process should appear" + ); + + info("Looking at the contents of about:processes"); + let processesToBeFound = [ + // The browser process. + { + name: "browser", + predicate: row => row.process.type == "browser", + }, + // The hung process. + { + name: "hung", + predicate: row => + row.classList.contains("hung") && + row.classList.contains("process") && + ["web", "webIsolated"].includes(row.process.type), + }, + // Any non-hung process + { + name: "non-hung", + predicate: row => + !row.classList.contains("hung") && + row.classList.contains("process") && + ["web", "webIsolated"].includes(row.process.type), + }, + // A utility process with at least one actor. + { + name: "utility", + predicate: row => + row.process && + row.process.type == "utility" && + row.classList.contains("process") && + row.nextSibling && + row.nextSibling.classList.contains("actor"), + }, + ]; + for (let finder of processesToBeFound) { + info(`Running sanity tests on ${finder.name}`); + let row = tbody.firstChild; + while (row) { + if (finder.predicate(row)) { + break; + } + row = row.nextSibling; + } + Assert.ok(!!row, `found a table row for ${finder.name}`); + let { memory, cpu, pidContent, threads } = extractProcessDetails(row); + + info("Sanity checks: pid"); + let pid = Number.parseInt(pidContent); + Assert.ok(pid > 0, `Checking pid ${pidContent}`); + Assert.equal(pid, row.process.pid); + + info("Sanity checks: memory resident"); + await testMemory( + memory, + row.process.totalRamSize, + row.process.deltaRamSize, + HARDCODED_ASSUMPTIONS_PROCESS + ); + + info("Sanity checks: CPU (Total)"); + await testCpu( + cpu, + row.process.totalCpu, + row.process.slopeCpu, + HARDCODED_ASSUMPTIONS_PROCESS + ); + + // Testing threads. + if (!showThreads) { + info("In this mode, we shouldn't display any threads"); + Assert.equal( + threads, + null, + "In hidden threads mode, we shouldn't have any thread summary" + ); + } else { + Assert.ok(threads, "We have a thread summary row"); + + let { + number, + active = 0, + list, + } = doc.l10n.getAttributes(threads.children[0].children[1]).args; + + info("Sanity checks: number of threads"); + Assert.greaterOrEqual( + number, + HARDCODED_ASSUMPTIONS_PROCESS.minimalNumberOfThreads + ); + Assert.lessOrEqual( + number, + HARDCODED_ASSUMPTIONS_PROCESS.maximalNumberOfThreads + ); + Assert.equal( + number, + row.process.threads.length, + "The number we display should be the number of threads" + ); + + info("Sanity checks: number of active threads"); + Assert.greaterOrEqual( + active, + 0, + "The number of active threads should never be negative" + ); + Assert.lessOrEqual( + active, + number, + "The number of active threads should not exceed the total number of threads" + ); + let activeThreads = row.process.threads.filter(t => t.active); + Assert.equal( + active, + activeThreads.length, + "The displayed number of active threads should be correct" + ); + + let activeSet = new Set(); + for (let t of activeThreads) { + activeSet.add(t.name.replace(/ ?#[0-9]+$/, "")); + } + info("Sanity checks: thread list"); + Assert.equal( + list ? list.split(", ").length : 0, + activeSet.size, + "The thread summary list of active threads should have the expected length" + ); + + info("Testing that we can open the list of threads"); + let twisty = threads.getElementsByClassName("twisty")[0]; + twisty.click(); + + // Fluent will update the text content of new rows during the + // next refresh driver tick, wait for it. + // requestAnimationFrame calls us at the begining of the tick, we use + // dispatchToMainThread to execute our code after the end of it. + //XXX: Replace with proper wait for l10n completion once bug 1520659 is fixed. + await new Promise(doc.defaultView.requestAnimationFrame); + await new Promise(resolve => Services.tm.dispatchToMainThread(resolve)); + + let numberOfThreadsFound = 0; + for ( + let threadRow = threads.nextSibling; + threadRow && threadRow.classList.contains("thread"); + threadRow = threadRow.nextSibling + ) { + numberOfThreadsFound++; + } + Assert.equal( + numberOfThreadsFound, + number, + `We should see ${number} threads, found ${numberOfThreadsFound}` + ); + let threadIds = []; + for ( + let threadRow = threads.nextSibling; + threadRow && threadRow.classList.contains("thread"); + threadRow = threadRow.nextSibling + ) { + Assert.ok( + threadRow.children.length >= 3 && threadRow.children[1].textContent, + "The thread row should be populated" + ); + let children = threadRow.children; + let cpu = children[1]; + let l10nArgs = doc.l10n.getAttributes(children[0]).args; + + // Sanity checks: name + Assert.ok(threadRow.thread.name, "Thread name is not empty"); + Assert.equal( + l10nArgs.name, + threadRow.thread.name, + "Displayed thread name is correct" + ); + + // Sanity checks: tid + let tidContent = l10nArgs.tid; + let tid = Number.parseInt(tidContent); + threadIds.push(tid); + Assert.notEqual(tid, 0, "The tid should be set"); + Assert.equal(tid, threadRow.thread.tid, "Displayed tid is correct"); + + // Sanity checks: CPU (per thread) + await testCpu( + cpu, + threadRow.thread.totalCpu, + threadRow.thread.slopeCpu, + HARDCODED_ASSUMPTIONS_THREAD + ); + } + // By default, threads are sorted by tid. + let threadList = threadIds.join(","); + Assert.equal( + threadList, + threadIds.sort((a, b) => a - b).join(","), + "The thread rows are in the default sort order." + ); + } + } + + await promiseAboutProcessesUpdated({ + doc, + force: true, + tabAboutProcesses, + }); + + // Testing subframes. + info("Testing subframes"); + let foundAtLeastOneInProcessSubframe = false; + for (let row of doc.getElementsByClassName("window")) { + let subframe = row.win; + if (subframe.tab) { + continue; + } + let url = doc.l10n.getAttributes(row.children[0]).args.url; + Assert.equal(url, subframe.documentURI.spec); + if (!subframe.isProcessRoot) { + foundAtLeastOneInProcessSubframe = true; + } + } + if (showAllFrames) { + Assert.ok( + foundAtLeastOneInProcessSubframe, + "Found at least one about:blank in-process subframe" + ); + } else { + Assert.ok( + !foundAtLeastOneInProcessSubframe, + "We shouldn't have any about:blank in-process subframe" + ); + } + + info("Double-clicking on a tab"); + let whenTabSwitchedToWeb = BrowserTestUtils.switchTab(gBrowser, () => { + // We pass a function to use `BrowserTestUtils.switchTab` not in its + // role as a tab switcher but rather in its role as a function that + // waits until something else has switched the tab. + // We'll actually cause tab switching below, by doucle-clicking + // in `about:processes`. + }); + await SpecialPowers.spawn(tabAboutProcesses.linkedBrowser, [], async () => { + // Locate and double-click on the representation of `tabHung`. + let tbody = content.document.getElementById("process-tbody"); + for (let row of tbody.getElementsByClassName("tab")) { + if (row.parentNode.win.documentURI.spec != "http://example.com/") { + continue; + } + // Simulate double-click. + let evt = new content.window.MouseEvent("dblclick", { + bubbles: true, + cancelable: true, + view: content.window, + }); + row.dispatchEvent(evt); + return; + } + Assert.ok(false, "We should have found the hung tab"); + }); + + info("Waiting for tab switch"); + await whenTabSwitchedToWeb; + Assert.equal( + gBrowser.selectedTab.linkedBrowser.currentURI.spec, + tabHung.linkedBrowser.currentURI.spec, + "We should have focused the hung tab" + ); + + await BrowserTestUtils.switchTab(gBrowser, tabAboutProcesses); + + info("Double-clicking on the extensions process"); + let tabPromise = BrowserTestUtils.waitForNewTab(gBrowser, "about:addons"); + await SpecialPowers.spawn(tabAboutProcesses.linkedBrowser, [], async () => { + let extensionsRow = + content.document.getElementsByClassName("extensions")[0]; + Assert.ok(!!extensionsRow, "We should have found the extensions process"); + let evt = new content.window.MouseEvent("dblclick", { + bubbles: true, + cancelable: true, + view: content.window, + }); + extensionsRow.dispatchEvent(evt); + }); + info("Waiting for about:addons to open"); + await tabPromise; + Assert.equal( + gBrowser.selectedTab.linkedBrowser.currentURI.spec, + "about:addons", + "We should now see the addon tab" + ); + BrowserTestUtils.removeTab(gBrowser.selectedTab); + + info("Testing tab closing"); + + // A list of processes we have killed and for which we're waiting + // death confirmation. Only used in Fission. + let waitForProcessesToDisappear = []; + await promiseAboutProcessesUpdated({ + doc, + force: true, + tabAboutProcesses, + }); + if (isFission) { + // Before closing, all our origins should be present + for (let origin of [ + "http://example.com", // tabHung + "http://example.net", // tabCloseProcess* + "http://example.org", // tabCloseSeparately* + "https://example.org", // tabCloseTogether* + ]) { + Assert.ok( + findProcessRowByOrigin(doc, origin), + `There is a process for origin ${origin}` + ); + } + + // Verify that the user context id has been correctly displayed. + let userContextProcessRow = findProcessRowByOrigin( + doc, + "http://example.com^userContextId=1" + ); + Assert.ok( + userContextProcessRow, + "There is a separate process for the tab with a different user context" + ); + let name = userContextProcessRow.firstChild; + if ( + Services.prefs.getBoolPref("toolkit.aboutProcesses.showProfilerIcons") + ) { + name = name.firstChild; + Assert.ok( + name.nextSibling.classList.contains("profiler-icon"), + "The profiler icon should be shown" + ); + } + Assert.equal( + doc.l10n.getAttributes(name).args.origin, + "http://example.com — " + + ContextualIdentityService.getUserContextLabel(1), + "The user context ID should be replaced with the localized container name" + ); + + // These origins will disappear. + for (let origin of [ + "http://example.net", // tabCloseProcess* + "https://example.org", // tabCloseTogether* + ]) { + let row = findProcessRowByOrigin(doc, origin); + let childID = row.process.childID; + waitForProcessesToDisappear.push(promiseProcessDied({ childID })); + } + } + + // Close a few tabs. + for (let tab of [tabCloseSeparately1, tabCloseTogether1, tabCloseTogether2]) { + info("Closing a tab through about:processes"); + let found = findTabRowByName(doc, tab.linkedBrowser.contentTitle); + Assert.ok( + found, + `We should have found tab ${tab.linkedBrowser.contentTitle} to close it` + ); + let closeIcons = found.getElementsByClassName("close-icon"); + Assert.equal( + closeIcons.length, + 1, + "This tab should have exactly one close icon" + ); + closeIcons[0].click(); + Assert.ok( + found.classList.contains("killing"), + "We should have marked the row as dying" + ); + } + + //...and a process, if we're in Fission. + if (isFission) { + info("Closing an entire process through about:processes"); + let found = findProcessRowByOrigin(doc, "http://example.net"); + let closeIcons = found.getElementsByClassName("close-icon"); + Assert.equal( + closeIcons.length, + 1, + "This process should have exactly one close icon" + ); + closeIcons[0].click(); + Assert.ok( + found.classList.contains("killing"), + "We should have marked the row as dying" + ); + } + + // Give Firefox a little time to close the tabs and update about:processes. + // This might take two updates as we're racing between collecting data and + // processes actually being killed. + await promiseAboutProcessesUpdated({ + doc, + force: true, + tabAboutProcesses, + }); + + // The tabs we have closed directly or indirectly should now be (closed or crashed) and invisible in about:processes. + for (let { origin, tab } of [ + { origin: "http://example.org", tab: tabCloseSeparately1 }, + { origin: "https://example.org", tab: tabCloseTogether1 }, + { origin: "https://example.org", tab: tabCloseTogether2 }, + ...(isFission + ? [ + { origin: "http://example.net", tab: tabCloseProcess1 }, + { origin: "http://example.net", tab: tabCloseProcess2 }, + ] + : []), + ]) { + // Tab shouldn't show up anymore in about:processes + Assert.ok( + !findTabRowByName(doc, origin), + `Tab for ${origin} shouldn't show up anymore in about:processes` + ); + // ...and should be unloaded. + Assert.ok( + !tab.getAttribute("linkedPanel"), + `The tab should now be unloaded (${tab.testOrigin} - ${tab.testTitle})` + ); + } + + // On the other hand, tabs we haven't closed should still be open and visible in about:processes. + Assert.ok( + tabCloseSeparately2.linkedBrowser, + "Killing one tab in the domain should not have closed the other tab" + ); + let foundtabCloseSeparately2 = findTabRowByName( + doc, + tabCloseSeparately2.linkedBrowser.contentTitle + ); + Assert.ok( + foundtabCloseSeparately2, + "The second tab is still visible in about:processes" + ); + + if (isFission) { + // After closing, we must have closed some of our origins. + for (let origin of [ + "http://example.com", // tabHung + "http://example.org", // tabCloseSeparately* + ]) { + Assert.ok( + findProcessRowByOrigin(doc, origin), + `There should still be a process row for origin ${origin}` + ); + } + + info("Waiting for processes to die"); + await Promise.all(waitForProcessesToDisappear); + + info("Waiting for about:processes to be updated"); + await promiseAboutProcessesUpdated({ + doc, + force: true, + tabAboutProcesses, + }); + + for (let origin of [ + "http://example.net", // tabCloseProcess* + "https://example.org", // tabCloseTogether* + ]) { + Assert.ok( + !findProcessRowByOrigin(doc, origin), + `Process ${origin} should disappear from about:processes` + ); + } + } + + info("Additional sanity check for all processes"); + for (let row of doc.getElementsByClassName("process")) { + let { pidContent } = extractProcessDetails(row); + Assert.equal(Number.parseInt(pidContent), row.process.pid); + } + BrowserTestUtils.removeTab(tabAboutProcesses); + BrowserTestUtils.removeTab(tabHung); + BrowserTestUtils.removeTab(tabUserContext); + BrowserTestUtils.removeTab(tabCloseSeparately2); + + // We still need to remove these tabs. + // We killed the process, but we don't want to leave zombie tabs lying around. + BrowserTestUtils.removeTab(tabCloseProcess1); + BrowserTestUtils.removeTab(tabCloseProcess2); + BrowserTestUtils.removeTab(audioPlayback); + + await SpecialPowers.popPrefEnv(); + + await extension.unload(); +} diff --git a/toolkit/components/aboutprocesses/tests/browser/small-shot.mp3 b/toolkit/components/aboutprocesses/tests/browser/small-shot.mp3 Binary files differnew file mode 100644 index 0000000000..f9397a5106 --- /dev/null +++ b/toolkit/components/aboutprocesses/tests/browser/small-shot.mp3 |