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..73ee0c32a4d3a7a094e371c10ca5e7a1c72a26b7 100644
--- a/chrome/browser/resources/engagement/engagement_table.js
+++ b/chrome/browser/resources/engagement/engagement_table.js
@@ -4,6 +4,14 @@
 
 'use strict';
 
+/**
+ * Strips a scheme from the URL.
+ * @param {string} url
+ */
+function stripScheme(url) {
+  return url.replace(/^[a-z]*:\/\//, '');

[Dan Beam, 2015/10/29 00:50:00]

nit: why not use URL?  that way, if HTTP was used your code would still work :)

var u = new URL(url);
return u.host + u.pathname + u.search + u.hash;

(or something like that)

[calamity, 2015/10/29 02:46:01]

Oh cool. These are only ever origins anyway, so I can just take the host of
this.

+}
+
 Polymer({
   is: 'engagement-table',
   properties: {
@@ -11,10 +19,85 @@ Polymer({
      * A list of engagement info objects.
      * @type !Array<!SiteEngagementInfo>
      */
-    engagementInfo: {
-      type: Array,
-      value: () => []
-    },
+    engagementInfo: {type: Array, value: () => []},
+
+    /**
+     * 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.
+   * @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.
+   * @private
+   */
+  compareTableItem_: function(sortKey, a, b) {
+    var val1 = a[sortKey];
+    var val2 = b[sortKey];
+
+    if (sortKey == 'origin')
+      return (stripScheme(val1) > stripScheme(val2) ? 1 : -1);

[Dan Beam, 2015/10/29 00:50:00]

don't use extra parens, especially around return

[calamity, 2015/10/29 02:46:01]

Done.

+
+    if (sortKey == 'score')
+      return val1 - val2;
+
+    console.log('Unsupported sort key:' + sortKey);

[Dan Beam, 2015/10/29 00:50:00]

should this be assertNotReached()?

[calamity, 2015/10/29 02:46:01]

Done.

+    return 0;
+  },
 });