Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-20 16:55:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1553782 - Make it clear that headers are clickable in about:performance. r=florian,dao

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D34169

--HG--
extra : moz-landing-system : lando
This commit is contained in:
fluks 2019-06-27 15:28:06 +00:00
parent 6e38d3f928
commit a68e95570d
3 changed files with 40 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
toolkit/components/aboutperformance/content/aboutPerformance.css
View File

@ -123,7 +123,7 @@ tr:-moz-any([selected], :hover) > td > .action-icon {
#dispatch-thead > tr > td {
border: none;
background-color: var(--in-content-box-background-hover);
background-color: var(--in-content-button-background);
}
#dispatch-thead > tr > td:not(:first-child) {
border-inline-start-width: 1px;
@ -207,3 +207,23 @@ td {
#dispatch-tbody > tr:hover {
background-color: var(--in-content-item-hover);
}
.clickable {
background-repeat: no-repeat;
background-position: right 4px center;
}
.clickable:dir(rtl) {
background-position: left 4px center;
}
.asc {
background-image: url(chrome://global/skin/icons/arrow-up-12.svg);
}
.desc {
background-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
}
#dispatch-thead > tr > td.clickable:hover {
background-color: var(--in-content-button-background-hover);
}
#dispatch-thead > tr > td.clickable:active {
background-color: var(--in-content-button-background-active);
}

18
toolkit/components/aboutperformance/content/aboutPerformance.js
View File

@ -587,16 +587,28 @@ var Control = {
});
document.getElementById("dispatch-thead").addEventListener("click", async (event) => {
const columnId = event.target.getAttribute("data-l10n-id");
if (!event.target.classList.contains("clickable"))
return;
if (this._sortOrder) {
let [column, direction] = this._sortOrder.split("_");
const td = document.getElementById(`column-${column}`);
td.classList.remove(direction);
}
const columnId = event.target.id;
if (columnId == "column-type")
this._sortOrder = this._sortOrder == "type_asc" ? "type_desc" : "type_asc";
else if (columnId == "column-energy-impact")
this._sortOrder = this._sortOrder == "cpu_desc" ? "cpu_asc" : "cpu_desc";
this._sortOrder = this._sortOrder == "energy-impact_desc" ? "energy-impact_asc" : "energy-impact_desc";
else if (columnId == "column-memory")
this._sortOrder = this._sortOrder == "memory_desc" ? "memory_asc" : "memory_desc";
else if (columnId == "column-name")
this._sortOrder = this._sortOrder == "name_asc" ? "name_desc" : "name_asc";
let direction = this._sortOrder.split("_")[1];
event.target.classList.add(direction);
await this._updateDisplay(true);
});
},
@ -773,7 +785,7 @@ var Control = {
case "name":
res = String.prototype.localeCompare.call(a.name, b.name);
break;
case "cpu":
case "energy-impact":
res = this._computeEnergyImpact(a.dispatchesSincePrevious,
a.durationSincePrevious) -
this._computeEnergyImpact(b.dispatchesSincePrevious,

8
toolkit/components/aboutperformance/content/aboutPerformance.xhtml
View File

@ -20,10 +20,10 @@
<table id="dispatch-table">
<thead id="dispatch-thead">
<tr>
<td data-l10n-id="column-name"/>
<td data-l10n-id="column-type"/>
<td data-l10n-id="column-energy-impact"/>
<td data-l10n-id="column-memory"/>
<td class="clickable" id="column-name" data-l10n-id="column-name"/>
<td class="clickable" id="column-type" data-l10n-id="column-type"/>
<td class="clickable" id="column-energy-impact" data-l10n-id="column-energy-impact"/>
<td class="clickable" id="column-memory" data-l10n-id="column-memory"/>
<td></td><!-- actions -->
</tr>
</thead>