Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-12-12 17:17:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1652013 - Reorder columns in about:processes. r=Yoric,fluent-reviewers,flod,florian

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D86348
This commit is contained in:
Sonia Singla 2020-08-20 11:18:11 +00:00
parent 711e7aa60e
commit ab58d76d40
5 changed files with 63 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
toolkit/components/aboutprocesses/content/aboutProcesses.css
View File

@ -43,31 +43,27 @@ tr {
width: 100%;
}
/* column-pid */
td:nth-child(1) {
width: 16%;
}
/* At least one column needs to have a flexible width,
so no width specified for td:nth-child(2) aka column-name*/
so no width specified for td:nth-child(1) aka column-name*/
/* column-memory-resident */
td:nth-child(3) {
width: 10%;
td:nth-child(2) {
width: 15%;
}
/* column-cpu-user */
/* column-cpu-total */
td:nth-child(3) {
width: 15%;
}
/* column-pid */
td:nth-child(4) {
width: 10%;
}
/* column-cpu-kernel */
/* column-cpu-threads */
td:nth-child(5) {
width: 10%;
}
/* column-threads */
td:nth-child(6) {
width: 2%;
width: 5%;
}
#process-thead > tr {

7
toolkit/components/aboutprocesses/content/aboutProcesses.ftl
View File

@ -8,10 +8,7 @@ about-processes-title = Process Manager
## Column headers
about-processes-column-id = Id
about-processes-column-type = Type
about-processes-column-name = Name
about-processes-column-memory-resident = Memory (Resident)
about-processes-column-cpu-user = CPU (User)
about-processes-column-cpu-kernel = CPU (Kernel)
about-processes-column-cpu-threads = CPU (Threads)
about-processes-column-memory-resident = Memory
about-processes-column-cpu-total = CPU
about-processes-column-threads = Threads

5
toolkit/components/aboutprocesses/content/aboutProcesses.html
View File

@ -16,11 +16,10 @@
<table id="process-table">
<thead id="process-thead">
<tr>
<td class="clickable" id="column-pid" data-l10n-id="about-processes-column-id"></td>
<td class="clickable" id="column-name" data-l10n-id="about-processes-column-name"></td>
<td class="clickable" id="column-memory-resident" data-l10n-id="about-processes-column-memory-resident"></td> <!-- Memory usage. -->
<td class="clickable" id="column-cpu-user" data-l10n-id="about-processes-column-cpu-user"></td> <!-- CPU user. -->
<td class="clickable" id="column-cpu-kernel" data-l10n-id="about-processes-column-cpu-kernel"></td> <!-- CPU kernel. -->
<td class="clickable" id="column-cpu-total" data-l10n-id="about-processes-column-cpu-total"></td><!--CPU (User and Kernel)-->
<td class="clickable" id="column-pid" data-l10n-id="about-processes-column-id"></td>
<td class="clickable" id="column-cpu-threads" data-l10n-id="about-processes-column-threads"></td>
</tr>
</thead>

104
toolkit/components/aboutprocesses/content/aboutProcesses.js
View File

@ -129,6 +129,9 @@ var State = {
// Total amount of CPU used, in ns (kernel).
totalCpuKernel: cur.cpuKernel,
slopeCpuKernel: null,
// Total amount of CPU used, in ns (user + kernel).
totalCpu: cur.cpuUser + cur.cpuKernel,
slopeCpu: null,
};
if (!prev) {
return result;
@ -138,6 +141,7 @@ var State = {
}
result.slopeCpuUser = (cur.cpuUser - prev.cpuUser) / deltaT;
result.slopeCpuKernel = (cur.cpuKernel - prev.cpuKernel) / deltaT;
result.slopeCpu = result.slopeCpuKernel + result.slopeCpuUser;
return result;
},
@ -160,6 +164,8 @@ var State = {
slopeCpuUser: null,
totalCpuKernel: cur.cpuKernel,
slopeCpuKernel: null,
totalCpu: cur.cpuUser + cur.cpuKernel,
slopeCpu: null,
type: cur.type,
origin: cur.origin || "",
threads: null,
@ -191,6 +197,7 @@ var State = {
result.deltaResidentSize = cur.residentSetSize - prev.residentSetSize;
result.slopeCpuUser = (cur.cpuUser - prev.cpuUser) / deltaT;
result.slopeCpuKernel = (cur.cpuKernel - prev.cpuKernel) / deltaT;
result.slopeCpu = result.slopeCpuUser + result.slopeCpuKernel;
result.threads = threads;
return result;
},
@ -262,11 +269,12 @@ var View = {
row.classList.add("hung");
}
// Column: pid / twisty image
// Column: type / twisty image
{
let content = data.origin ? `${data.origin} (${data.type})` : data.type;
let elt = this._addCell(row, {
content: data.pid,
classes: ["pid", "root"],
content,
classes: ["type"],
});
if (data.threads.length) {
@ -279,15 +287,6 @@ var View = {
}
}
// Column: name/type
{
let content = data.origin ? `${data.origin} (${data.type})` : data.type;
this._addCell(row, {
content,
classes: ["type"],
});
}
// Column: Resident size
{
let { formatedDelta, formatedValue } = this._formatMemoryAndDelta(
@ -303,29 +302,23 @@ var View = {
});
}
// Column: CPU: User
// Column: CPU: User and Kernel
{
let slope = this._formatPercentage(data.slopeCpuUser);
let slope = this._formatPercentage(data.slopeCpu);
let content = `${slope} (${(
data.totalCpuUser / MS_PER_NS
data.totalCpu / MS_PER_NS
).toLocaleString(undefined, { maximumFractionDigits: 0 })}ms)`;
this._addCell(row, {
content,
classes: ["cpuUser"],
classes: ["cpu"],
});
}
// Column: CPU: Kernel
{
let slope = this._formatPercentage(data.slopeCpuKernel);
let content = `${slope} (${(
data.totalCpuKernel / MS_PER_NS
).toLocaleString(undefined, { maximumFractionDigits: 0 })}ms)`;
this._addCell(row, {
content,
classes: ["cpuKernel"],
});
}
// Column: pid
this._addCell(row, {
content: data.pid,
classes: ["pid", "root"],
});
// Column: Number of threads
this._addCell(row, {
@ -347,16 +340,10 @@ var View = {
let row = document.createElement("tr");
row.classList.add("thread");
// Column: id
this._addCell(row, {
content: data.tid,
classes: ["tid", "indent"],
});
// Column: filename
this._addCell(row, {
content: data.name,
classes: ["name"],
classes: ["name", "indent"],
});
// Column: Resident size (empty)
@ -365,29 +352,23 @@ var View = {
classes: ["totalResidentSize"],
});
// Column: CPU: User
// Column: CPU: User and Kernel
{
let slope = this._formatPercentage(data.slopeCpuUser);
let slope = this._formatPercentage(data.slopeCpu);
let text = `${slope} (${(
data.totalCpuUser / MS_PER_NS
data.totalCpu / MS_PER_NS
).toLocaleString(undefined, { maximumFractionDigits: 0 })} ms)`;
this._addCell(row, {
content: text,
classes: ["cpuUser"],
classes: ["cpu"],
});
}
// Column: CPU: Kernel
{
let slope = this._formatPercentage(data.slopeCpuKernel);
let text = `${slope} (${(
data.totalCpuKernel / MS_PER_NS
).toLocaleString(undefined, { maximumFractionDigits: 0 })} ms)`;
this._addCell(row, {
content: text,
classes: ["cpuKernel"],
});
}
// Column: id
this._addCell(row, {
content: data.tid,
classes: ["tid"],
});
// Column: Number of threads (empty)
this._addCell(row, {
@ -736,18 +717,13 @@ var Control = {
case "column-name":
order = a.name.localeCompare(b.name);
break;
case "column-cpu-user":
order = b.slopeCpuUser - a.slopeCpuUser;
case "column-cpu-total":
order = b.totalCpu - a.totalCpu;
if (order == 0) {
order = b.totalCpuUser - a.totalCpuUser;
}
break;
case "column-cpu-kernel":
order = b.slopeCpuKernel - a.slopeCpuKernel;
if (order == 0) {
order = b.totalCpuKernel - a.totalCpuKernel;
order = b.totalCpu - a.totalCpu;
}
break;
case "column-cpu-threads":
case "column-memory-resident":
case "column-type":
@ -780,16 +756,10 @@ var Control = {
case "column-name":
order = String(a.name).localeCompare(b.name);
break;
case "column-cpu-user":
order = b.slopeCpuUser - a.slopeCpuUser;
case "column-cpu-total":
order = b.totalCpu - a.totalCpu;
if (order == 0) {
order = b.totalCpuUser - a.totalCpuUser;
}
break;
case "column-cpu-kernel":
order = b.slopeCpuKernel - a.slopeCpuKernel;
if (order == 0) {
order = b.totalCpuKernel - a.totalCpuKernel;
order = b.totalCpu - a.totalCpu;
}
break;
case "column-cpu-threads":

40
toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses.js
View File

@ -302,9 +302,8 @@ add_task(async function testAboutProcesses() {
let children = row.children;
let pidContent = children[0].textContent;
let memoryResidentContent = children[2].textContent;
let cpuUserContent = children[3].textContent;
let cpuKernelContent = children[4].textContent;
let numberOfThreadsContent = children[5].textContent;
let cpuContent = children[3].textContent;
let numberOfThreadsContent = children[4].textContent;
info("Sanity checks: pid");
let pid = Number.parseInt(pidContent);
@ -319,19 +318,11 @@ add_task(async function testAboutProcesses() {
HARDCODED_ASSUMPTIONS_PROCESS
);
info("Sanity checks: CPU (user)");
info("Sanity checks: CPU (Total)");
testCpu(
cpuUserContent,
row.process.totalCpuUser,
row.process.slopeCpuUser,
HARDCODED_ASSUMPTIONS_PROCESS
);
info("Sanity checks: CPU (kernel)");
testCpu(
cpuKernelContent,
row.process.totalCpuKernel,
row.process.slopeCpuKernel,
cpuContent,
row.process.totalCpu,
row.process.slopeCpu,
HARDCODED_ASSUMPTIONS_PROCESS
);
@ -360,8 +351,7 @@ add_task(async function testAboutProcesses() {
) {
let children = threadRow.children;
let tidContent = children[0].textContent;
let cpuUserContent = children[3].textContent;
let cpuKernelContent = children[4].textContent;
let cpuContent = children[3].textContent;
++numberOfThreadsFound;
info("Sanity checks: tid");
@ -369,19 +359,11 @@ add_task(async function testAboutProcesses() {
Assert.notEqual(tid, 0, "The tid should be set");
Assert.equal(tid, threadRow.thread.tid);
info("Sanity checks: CPU (user)");
info("Sanity checks: CPU (User and Kernel)");
testCpu(
cpuUserContent,
threadRow.thread.totalCpuUser,
threadRow.thread.slopeCpuUser,
HARDCODED_ASSUMPTIONS_THREAD
);
info("Sanity checks: CPU (kernel)");
testCpu(
cpuKernelContent,
threadRow.thread.totalCpuKernel,
threadRow.thread.slopeCpuKernel,
cpuContent,
threadRow.thread.totalCpu,
threadRow.thread.slopeCpu,
HARDCODED_ASSUMPTIONS_THREAD
);
}