Make table in chrome:site-engagement sortable.

chrome/browser/resources/engagement/engagement_table.js

Index: chrome/browser/resources/engagement/engagement_table.js
diff --git a/chrome/browser/resources/engagement/engagement_table.js b/chrome/browser/resources/engagement/engagement_table.js
index efd259e8dd097e162a6546f19b22af8da3e7720a..976fbe975f0adff26c90eeff02213f5b4eeb3020 100644
--- a/chrome/browser/resources/engagement/engagement_table.js
+++ b/chrome/browser/resources/engagement/engagement_table.js
@@ -4,6 +4,15 @@
 
 'use strict';
 
+/**
+ * Strips a scheme from an origin.
+ * @param {string} origin
+ * @return {string} The host of the given origin.
+ */
+function stripScheme(origin) {
+  return new URL(origin).host;
+}
+
 Polymer({
   is: 'engagement-table',
   properties: {
@@ -11,10 +20,88 @@ Polymer({
      * A list of engagement info objects.
      * @type !Array<!SiteEngagementInfo>
      */
-    engagementInfo: {
-      type: Array,
-      value: () => []
-    },
+    engagementInfo: {type: Array, value: function() { return []; } },
+
+    /**
+     * The table's current sort key.
+     * @type {string}
+     * @private
+     */
+    sortKey_: {type: String, value: 'score'},
+
+    /**
+     * Whether the table is in reverse sorting order.
+     * @type {boolean}
+     * @private
+     */
+    sortReverse: {type: Boolean, value: true, reflectToAttribute: true},
+  },
+
+  /**
+   * @param {Event} e
+   */
+  handleSortColumnTap: function(e) {
+    this.sortTable_(e.currentTarget);
+    e.preventDefault();
+  },
+
+  /**
+   * Sorts the engagement table based on the provided sort column header. Sort
+   * columns have a 'sort-key' attribute that is a property name of a
+   * SiteEngagementInfo.
+   * @param {HTMLElement} th The column to sort by.
+   * @private
+   */
+  sortTable_: function(th) {
+    // Remove the old sort indicator column.
+    var sortColumn = this.$$('.sort-column');
+    if (sortColumn)
+      sortColumn.className = '';
+
+    // Updating these properties recomputes the template sort function.
+    var newSortKey = th.getAttribute('sort-key');
+    if (this.sortKey_)
+      this.sortReverse = (newSortKey == this.sortKey_) && !this.sortReverse;
+
+    this.sortKey_ = newSortKey;
+
+    // Specify the new sort indicator column.
+    th.className = 'sort-column';
+  },
+
+  /**
+   * Returns a sorting function for SiteEngagementInfo objects that sorts based
+   * on sortKey.
+   * @param {string} sortKey The name of the property to sort by.
+   * @param {boolean} reverse Whether the sort should be in reverse order.
+   * @return {function} A comparator for SiteEngagementInfos.
+   * @private
+   */
+  getTableSortFunction_: function(sortKey, reverse) {
+    return function(a, b) {
+      return (reverse ? -1 : 1) *
+             this.compareTableItem_(sortKey, a, b);
+    }.bind(this);
   },
 
+  /**
+   * Compares two SiteEngagementInfo objects based on the sortKey.
+   * @param {string} sortKey The name of the property to sort by.
+   * @return {number} A negative number if |a| should be ordered before |b|, a
+   * positive number otherwise.
+   * @private
+   */
+  compareTableItem_: function(sortKey, a, b) {
+    var val1 = a[sortKey];
+    var val2 = b[sortKey];
+
+    if (sortKey == 'origin')
+      return stripScheme(val1) > stripScheme(val2) ? 1 : -1;
+
+    if (sortKey == 'score')
+      return val1 - val2;
+
+    assertNotReached('Unsupported sort key: ' + sortKey);
+    return 0;
+  },
 });