mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-21 01:05:45 +00:00
Bug 1553782 - Make it clear that headers are clickable in about:performance. r=florian,dao
Differential Revision: https://phabricator.services.mozilla.com/D34169 --HG-- extra : moz-landing-system : lando
This commit is contained in:
parent
6e38d3f928
commit
a68e95570d
@ -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);
|
||||
}
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user