Make chrome://site-engagement non-polymer and re-enable on Android.

chrome/browser/resources/engagement/site_engagement.js

Index: chrome/browser/resources/engagement/site_engagement.js
diff --git a/chrome/browser/resources/engagement/site_engagement.js b/chrome/browser/resources/engagement/site_engagement.js
index b13ff7e8b176f0784cbafbcb209d9b082b5e4772..888161363c1de8ee6d102b05251158e3cac26d89 100644
--- a/chrome/browser/resources/engagement/site_engagement.js
+++ b/chrome/browser/resources/engagement/site_engagement.js
@@ -15,27 +15,144 @@ define('main', [
             siteEngagementMojom.SiteEngagementUIHandler.name),
         siteEngagementMojom.SiteEngagementUIHandler);
 
-    var engagementTable = $('engagement-table');
+    var engagementTableBody = $('engagement-table-body');
     var updateInterval = null;
+    var info = null;
+    var sortKey = 'score';
+    var sortReverse = true;
 
-    engagementTable.addEventListener('score-edited', function(e) {
-      var detail = e.detail;
-      uiHandler.setSiteEngagementScoreForOrigin(detail.origin, detail.score);
+    // Set table header sort handlers.
+    var engagementTableHeader = $('engagement-table-header');
+    var headers = engagementTableHeader.children;
+    for (var i = 0; i < headers.length; i++) {
+      headers[i].onclick = function(e) {

[tsergeant, 2016/03/03 04:00:56]

use 

headers[i].addEventListener('click', function() {..})

[calamity, 2016/03/08 07:35:57]

Done.

+        var newSortKey = e.target.getAttribute('sort-key');
+        if (sortKey == newSortKey) {
+          sortReverse = !sortReverse;
+        } else {
+          sortKey = newSortKey;
+          sortReverse = false;
+        }
+        var oldSortColumn = document.querySelector('.sort-column');
+        oldSortColumn.className = '';

[tsergeant, 2016/03/03 04:00:56]

Should probably use classList instead of className:

oldSortColumn.classList.remove('sort-column')
e.target.classList.add('sort-column')

[calamity, 2016/03/08 07:35:57]

Done.

+        e.target.className = 'sort-column';
+        if (sortReverse)
+          e.target.setAttribute('sort-reverse', '');
+        else
+          e.target.removeAttribute('sort-reverse');
+        renderTable();
+      };
+    }
+
+    /**
+     * Creates a single row in the engagement table.
+     * @param {SiteEngagementInfo} info The info to create the row from.
+     * @return {HTMLElement}
+     */
+    function createRow(info) {

[tsergeant, 2016/03/03 04:00:56]

You could do

var row = document.createElement('tr')
row.innerHTML = '<td class="origin-cell"></td><td>...</td>'

and then go through and update the elements that need changing.

I think this might end up nicer since lots of the work here is boilerplate which
doesn't need much changing, but I'll leave it up to you.

[tsergeant, 2016/03/03 22:36:42]

Alternatively, util.js has a function 'createElementWithClassName' which you
could use.

[calamity, 2016/03/08 07:35:57]

Done.

+      var originCell = document.createElement('td');
+      originCell.className = 'origin-cell';
+      originCell.textContent = info.origin;
+
+      var scoreInput = document.createElement('input');
+      scoreInput.className = 'score-input';
+      scoreInput.onchange = handleScoreChange.bind(undefined, info.origin);

[tsergeant, 2016/03/03 04:00:56]

scoreInput.addEventListener('change', handleScoreChange.bind...)

[calamity, 2016/03/08 07:35:57]

Done.

+      scoreInput.value = info.score;
+
+      var scoreCell = document.createElement('td');
+      scoreCell.className = 'score-cell';
+      scoreCell.appendChild(scoreInput);
+
+      var engagementBar = document.createElement('div');
+      engagementBar.className = 'engagement-bar';
+      engagementBar.style.width = (info.score * 4) + 'px';
+
+      var engagementBarCell = document.createElement('td');
+      engagementBarCell.className = 'engagement-bar-cell';
+      engagementBarCell.appendChild(engagementBar);
+
+      var row = document.createElement('tr');
+      row.appendChild(originCell);
+      row.appendChild(scoreCell);
+      row.appendChild(engagementBarCell);
+      return row;
+    }
+
+    /**
+     * Sets the engagement score when a score input it changed. Also resets the
+     * update interval.
+     * @param {string} origin The origin of the engagement score to set.
+     * @param {Event} e
+     */
+    function handleScoreChange(origin, e) {
+      uiHandler.setSiteEngagementScoreForOrigin(origin, e.target.value);
       clearInterval(updateInterval);
       updateInterval = setInterval(updateEngagementTable, 5000);
-    });
+    }
+
+    /**
+     * Remove all rows from the engagement table.
+     */
+    function clearTable() {
+      while (engagementTableBody.firstChild)

[tsergeant, 2016/03/03 04:00:56]

How about just using engagementTableBody.innerHTML = '' ?

[calamity, 2016/03/08 07:35:57]

Done.

+        engagementTableBody.removeChild(engagementTableBody.firstChild);
+    }
+
+    /**
+     * Sort the engagement info based on |sortKey| and |sortReverse|.
+     */
+    function sortInfo() {
+      info.sort(function(a, b) {
+        return (sortReverse ? -1 : 1) *
+               compareTableItem(sortKey, a, b);
+      });
+    }
+
+    /**
+     * Compares two SiteEngagementInfo objects based on |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.
+     */
+    function compareTableItem(sortKey, a, b) {
+      var val1 = a[sortKey];
+      var val2 = b[sortKey];
+
+      // Compare the hosts of the origin ignoring schemes.
+      if (sortKey == 'origin')
+        return new URL(val1).host > new URL(val2).host ? 1 : -1;
+
+      if (sortKey == 'score')
+        return val1 - val2;
+
+      assertNotReached('Unsupported sort key: ' + sortKey);
+      return 0;
+    }
 
-    var updateEngagementTable = function() {
+    /**
+     * Regenerates the engagement table from |info|.
+     */
+    function renderTable() {
+      clearTable();
+      sortInfo();
+      // Round each score to 2 decimal places.
+      info.forEach(function(info) {
+        info.score = Number(Math.round(info.score * 100) / 100);
+        engagementTableBody.appendChild(createRow(info));
+      });
+    }
+
+    /**
+     * Retrieve site engagement info and render the engagement table.
+     */
+    function updateEngagementTable() {
       // Populate engagement table.
       uiHandler.getSiteEngagementInfo().then(function(response) {
-        // Round each score to 2 decimal places.
-        response.info.forEach(function(x) {
-          x.score = Number(Math.round(x.score * 100) / 100);
-        });
-        engagementTable.engagementInfo = response.info;
+        info = response.info;
+        renderTable(info);
       });
-
     };
+
     updateEngagementTable();
     updateInterval = setInterval(updateEngagementTable, 5000);
   };