Bug 1553782 - Make it clear that headers are clickable in about:performance. r=florian,dao
authorfluks <fluks.github@gmail.com>
Thu, 27 Jun 2019 15:28:06 +0000
changeset 543201 6f1ed45f7573df1b581125015ae579242ef78db8
parent 543200 eb74edb6c7eae47b71a21beb4182bbce1ef88768
child 543202 98a36d0a7ec8807fe9f0023572a07827240663bf
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflorian, dao
bugs1553782
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 1553782 - Make it clear that headers are clickable in about:performance. r=florian,dao Differential Revision: https://phabricator.services.mozilla.com/D34169
toolkit/components/aboutperformance/content/aboutPerformance.css
toolkit/components/aboutperformance/content/aboutPerformance.js
toolkit/components/aboutperformance/content/aboutPerformance.xhtml
--- a/toolkit/components/aboutperformance/content/aboutPerformance.css
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.css
@@ -118,17 +118,17 @@ tr:-moz-any([selected], :hover) > td > .
 }
 
 #dispatch-thead > tr {
   height: inherit;
 }
 
 #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;
   border-inline-start-style: solid;
   border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
   border-bottom: 1px solid var(--in-content-border-color);
 }
 td {
@@ -202,8 +202,28 @@ td {
 
 #dispatch-tbody > tr[selected] > td {
   background-color: var(--in-content-item-selected);
   color: var(--in-content-selected-text);
 }
 #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);
+}
--- a/toolkit/components/aboutperformance/content/aboutPerformance.js
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.js
@@ -582,26 +582,38 @@ var Control = {
 
     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 (!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);
     });
   },
   _lastMouseEvent: 0,
   _updateLastMouseEvent() {
     this._lastMouseEvent = Date.now();
   },
   async update() {
@@ -768,17 +780,17 @@ var Control = {
             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":
+          case "energy-impact":
             res = this._computeEnergyImpact(a.dispatchesSincePrevious,
                                             a.durationSincePrevious) -
               this._computeEnergyImpact(b.dispatchesSincePrevious,
                                         b.durationSincePrevious);
             break;
           default:
             res = String.prototype.localeCompare.call(a.name, b.name);
         }
--- a/toolkit/components/aboutperformance/content/aboutPerformance.xhtml
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.xhtml
@@ -15,19 +15,19 @@
     <link rel="localization" href="toolkit/about/aboutPerformance.ftl"/>
     <script src="chrome://global/content/aboutPerformance.js"></script>
     <link rel="stylesheet" href="chrome://global/content/aboutPerformance.css"/>
   </head>
   <body>
     <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>
       <tbody id="dispatch-tbody"></tbody>
     </table>
   </body>
 </html>