Make table in chrome:site-engagement sortable.

chrome/browser/resources/engagement/engagement_table.html

Index: chrome/browser/resources/engagement/engagement_table.html
diff --git a/chrome/browser/resources/engagement/engagement_table.html b/chrome/browser/resources/engagement/engagement_table.html
index 434ee3d53db56949e048b1ee20c75ae89f9f904e..45aae2a78869546998a4aad05bd3e45b254a6276 100644
--- a/chrome/browser/resources/engagement/engagement_table.html
+++ b/chrome/browser/resources/engagement/engagement_table.html
@@ -6,12 +6,12 @@
     <table>
       <thead>
         <tr>
-          <th>Origin</th>
-          <th>Points</th>
+          <th id="initial-sort-column" on-tap="handleSortColumnTap" sort-key="origin">Origin</th>

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

Adding/removing children here for the indicator is a little weird.

You could do something like

<span class="sort-indicator" hidden$="[[!sortKeyEquals('origin',
sortKey_)]]"></span>

on each row (sortKey_ needs to be a property).

And then define the super simple sortKeyEquals function.

To get the arrow to flip depending on sort direction, you can
`reflectToAttribute` the `sortReversed_` property, then do the rest in CSS:

.sort-indicator::before {
  content: '\u25B2';
}
:host([sort-reversed_]) .sort-indicator::before {
  content: '\u25BC';
}

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

Got rid of the span entirely and just used ::after on the ths.

+          <th on-tap="handleSortColumnTap" sort-key="score">Points</th>
         </tr>
       </thead>
       <tbody>
-        <template is="dom-repeat" items="{{engagementInfo}}" as="info">
+        <template id="engagement-table-items" is="dom-repeat" items="{{engagementInfo}}" as="info">
           <tr>
             <td class="origin-cell">{{info.origin}}</td>
             <td>{{info.score}}</td>