Bug 1498187 - Let the user sort by column in about:performance. r=florian
authorfluks <fluks.github@gmail.com>
Tue, 21 May 2019 10:46:35 +0000
changeset 474709 07ce2dd7db9d0ff8f68e5ab8d913aa75fe463399
parent 474708 21b3ac9c491755466306d68e1e198a6891c0e561
child 474710 979750dd65da33eebd25999f286b98914639a735
push id36044
push userrmaries@mozilla.com
push dateTue, 21 May 2019 15:45:34 +0000
treeherdermozilla-central@78571bb1f20e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflorian
bugs1498187
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1498187 - Let the user sort by column in about:performance. r=florian Differential Revision: https://phabricator.services.mozilla.com/D31612
toolkit/components/aboutperformance/content/aboutPerformance.js
--- a/toolkit/components/aboutperformance/content/aboutPerformance.js
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.js
@@ -495,16 +495,17 @@ var View = {
 
     this._fragment.appendChild(row);
     return row;
   },
 };
 
 var Control = {
   _openItems: new Set(),
+  _sortOrder: "",
   _removeSubtree(row) {
     while (row.nextSibling &&
            row.nextSibling.firstChild.classList.contains("indent")) {
       row.nextSibling.remove();
     }
   },
   init() {
     let tbody = document.getElementById("dispatch-tbody");
@@ -579,16 +580,30 @@ var Control = {
       this._updateLastMouseEvent();
     });
 
     window.addEventListener("visibilitychange", event => {
       if (!document.hidden) {
         this._updateDisplay(true);
       }
     });
+
+    document.getElementById("dispatch-thead").addEventListener("click", async (event) => {
+      const columnId = event.target.getAttribute("data-l10n-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";
+      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";
+
+      await this._updateDisplay(true);
+    });
   },
   _lastMouseEvent: 0,
   _updateLastMouseEvent() {
     this._lastMouseEvent = Date.now();
   },
   async update() {
     await State.update();
 
@@ -722,23 +737,61 @@ var Control = {
     // Dividing the result by the sampling interval and by 10 gives a number that
     // looks like a familiar percentage to users, as fullying using one core will
     // result in a number close to 100.
     let energyImpact =
       Math.max(duration || 0, dispatches * 1000) / UPDATE_INTERVAL_MS / 10;
     // Keep only 2 digits after the decimal point.
     return Math.ceil(energyImpact * 100) / 100;
   },
+  _getTypeWeight(type) {
+    let weights = {
+      tab: 3,
+      addon: 2,
+      "system-addon": 1,
+    };
+    return weights[type] || 0;
+  },
   _sortCounters(counters) {
     return counters.sort((a, b) => {
       // Force 'Recently Closed Tabs' to be always at the bottom, because it'll
       // never be actionable.
       if (a.name.id && a.name.id == "ghost-windows")
         return 1;
 
+      if (this._sortOrder) {
+        let res;
+        let [column, order] = this._sortOrder.split("_");
+        switch (column) {
+          case "memory":
+            res = a.memory - b.memory;
+            break;
+          case "type":
+            if (a.type != b.type)
+              res = this._getTypeWeight(b.type) - this._getTypeWeight(a.type);
+            else
+              res = String.prototype.localeCompare.call(a.name, b.name);
+            break;
+          case "name":
+            res = String.prototype.localeCompare.call(a.name, b.name);
+            break;
+          case "cpu":
+            res = this._computeEnergyImpact(a.dispatchesSincePrevious,
+                                            a.durationSincePrevious) -
+              this._computeEnergyImpact(b.dispatchesSincePrevious,
+                                        b.durationSincePrevious);
+            break;
+          default:
+            res = String.prototype.localeCompare.call(a.name, b.name);
+        }
+        if (order == "desc")
+          res = -1 * res;
+        return res;
+      }
+
       // Note: _computeEnergyImpact uses UPDATE_INTERVAL_MS which doesn't match
       // the time between the most recent sample and the start of the buffer,
       // BUFFER_DURATION_MS would be better, but the values is never displayed
       // so this is OK.
       let aEI = this._computeEnergyImpact(a.dispatchesSinceStartOfBuffer,
                                           a.durationSinceStartOfBuffer);
       let bEI = this._computeEnergyImpact(b.dispatchesSinceStartOfBuffer,
                                           b.durationSinceStartOfBuffer);