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..d8a840233fc1791370062a5c7125185c299054b8 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]*:\/\//, '');
+}
+
 Polymer({
   is: 'engagement-table',
   properties: {
@@ -11,10 +19,99 @@ 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}
+   */
+  sortKey_: null,
+
+  /**
+   * Whether the table is in reverse sorting order.
+   * @type {boolean}
+   */
+  sortReverse_: false,
+
+  ready: function() { this.sortTable_(this.$$('#initial-sort-column')); },

[tsergeant, 2015/10/27 23:35:34]

Use `this.$['initial-sort-column']` for selecting by id.

[calamity, 2015/10/28 04:26:50]

Done.

+
+  /**
+   * @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.
+   */
+  sortTable_: function(th) {
+    this.removeSortIndicator_();
+    var newSortKey = th.getAttribute('sort-key');
+    this.sortReverse_ = (newSortKey == this.sortKey_) && !this.sortReverse_;
+    this.sortKey_ = newSortKey;
+
+    this.$['engagement-table-items'].sort =
+        this.getTableSortFunction_(newSortKey, this.sortReverse_);
+
+    this.addSortIndicator_(th, this.sortReverse_);
   },
 
+  /**
+   * 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.
+   */
+  getTableSortFunction_: function(sortKey, reverse) {

[tsergeant, 2015/10/27 23:35:34]

If you make sortKey_ and sortReverse_ into properties, then you can data bind
directly to this function:

<template ... sort="[[getTableSortFunction_(sortKey_, sortReverse_)]]">

Everything should be sorted whenever key or reverse is changed without manually
changing the sort property.

[calamity, 2015/10/28 04:26:50]

Done.

+    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.
+   */
+  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;
+
+    console.log('Unsupported sort key:' + sortKey);
+    return 0;
+  },
+
+  /**
+   * Adds and indicator to the given table header that indicates the sorting
+   * direction.
+   * @param {HTMLElement} th The table header element to add the indicator to.
+   * @param {boolean} reverse Whether the sort is in reverse order.
+   */
+  addSortIndicator_: function(th, reverse) {
+    var indicator = document.createElement('span');
+    indicator.id = 'sort-indicator';
+    indicator.textContent = reverse ? '\u25BC' : '\u25B2';
+    th.appendChild(indicator);
+  },
+
+  /**
+   * Removes the sort arrow span if it exists.
+   */
+  removeSortIndicator_: function() {
+    var indicator = this.$$('#sort-indicator');
+    if (indicator)
+      indicator.parentNode.removeChild(indicator);
+  },
 });