Add base and bonus scores to site-engagement WebUI.

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 0aaaf603a35151c077fc1f662bd4d6e7c4f66627..1f703f3cd079bb700883984218e6ed38563a01c2 100644
--- a/chrome/browser/resources/engagement/site_engagement.js
+++ b/chrome/browser/resources/engagement/site_engagement.js
@@ -62,15 +62,22 @@ define('main', [
       var originCell = createElementWithClassName('td', 'origin-cell');
       originCell.textContent = info.origin.url;
 
-      var scoreInput = createElementWithClassName('input', 'score-input');
-      scoreInput.addEventListener(
-          'change', handleScoreChange.bind(undefined, info.origin));
-      scoreInput.addEventListener('focus', disableAutoupdate);
-      scoreInput.addEventListener('blur', enableAutoupdate);
-      scoreInput.value = info.total_score;
+      var baseScoreInput = createElementWithClassName('input', 'score-input');

[calamity, 2017/04/11 01:16:56]

Change this class name to base-score-input.

[Wez, 2017/04/12 23:49:48]

Done.

+      baseScoreInput.addEventListener(
+          'change', handleBaseScoreChange.bind(undefined, info.origin));
+      baseScoreInput.addEventListener('focus', disableAutoupdate);
+      baseScoreInput.addEventListener('blur', enableAutoupdate);
+      baseScoreInput.value = info.base_score;
 
-      var scoreCell = createElementWithClassName('td', 'score-cell');
-      scoreCell.appendChild(scoreInput);
+      var baseScoreCell = createElementWithClassName('td', 'base-score-cell');
+      baseScoreCell.appendChild(baseScoreInput);
+
+      var bonusScoreCell = createElementWithClassName('td', 'bonus-score-cell');
+      bonusScoreCell.textContent =
+          info.installed_bonus + info.notifications_bonus;
+
+      var totalScoreCell = createElementWithClassName('td', 'total-score-cell');
+      totalScoreCell.textContent = info.total_score;
 
       var engagementBar = createElementWithClassName('div', 'engagement-bar');
       engagementBar.style.width = (info.total_score * 4) + 'px';
@@ -81,12 +88,14 @@ define('main', [
 
       var row = document.createElement('tr');
       row.appendChild(originCell);
-      row.appendChild(scoreCell);
+      row.appendChild(baseScoreCell);
+      row.appendChild(bonusScoreCell);
+      row.appendChild(totalScoreCell);
       row.appendChild(engagementBarCell);
 
       // Stores correspondent engagementBarCell to change it's length on
       // scoreChange event.
-      scoreInput.barCellRef = engagementBar;
+      baseScoreInput.barCellRef = engagementBar;
       return row;
     }
 
@@ -103,17 +112,17 @@ define('main', [
     }
 
     /**
-     * Sets the engagement score when a score input is changed.
+     * Sets the base engagement score when a score input is changed.
      * Resets the length of engagement-bar-cell to match the new score.
      * Also resets the update interval.
      * @param {string} origin The origin of the engagement score to set.
      * @param {Event} e
      */
-    function handleScoreChange(origin, e) {
-      var scoreInput = e.target;
-      uiHandler.setSiteEngagementScoreForUrl(origin, scoreInput.value);
-      scoreInput.barCellRef.style.width = (scoreInput.value * 4) + 'px';
-      scoreInput.blur();
+    function handleBaseScoreChange(origin, e) {
+      var baseScoreInput = e.target;
+      uiHandler.setSiteEngagementScoreForUrl(origin, baseScoreInput.value);
+      baseScoreInput.barCellRef.style.width = (baseScoreInput.value * 4) + 'px';
+      baseScoreInput.blur();
       enableAutoupdate();
     }
 
@@ -148,8 +157,11 @@ define('main', [
       if (sortKey == 'origin')
         return new URL(val1.url).host > new URL(val2.url).host ? 1 : -1;
 
-      if (sortKey == 'total_score')
+      if ((sortKey == 'base_score') ||

[calamity, 2017/04/11 01:16:56]

nit: no parens around each condition.

[Wez, 2017/04/12 23:49:48]

Done.

+          (sortKey == 'bonus_score') ||
+          (sortKey == 'total_score')) {
         return val1 - val2;
+      }
 
       assertNotReached('Unsupported sort key: ' + sortKey);
       return 0;
@@ -161,9 +173,13 @@ define('main', [
     function renderTable() {
       clearTable();
       sortInfo();
-      // Round each score to 2 decimal places.
+
       info.forEach((info) => {
+        // Round all scores to 2 decimal places.
+        info.base_score = Number(Math.round(info.base_score * 100) / 100);
+        info.bonus_score = Number(Math.round(info.bonus_score * 100) / 100);

[calamity, 2017/04/11 01:16:56]

This key doesn't exist? Only info.installed_bonus and info.notifications_bonus
exist.

[Wez, 2017/04/12 23:49:48]

Yup; didn't spot that because of course these never need rounding in practice.
*facepalm*

Of course sorting of the Bonus column was still broken because the |info|
doesn't have this field, so fixed this to calculate it.

         info.total_score = Number(Math.round(info.total_score * 100) / 100);

[calamity, 2017/04/11 01:16:56]

nit: Pull this rounding into a function roundScore.

[Wez, 2017/04/12 23:49:48]

Done.

+
         engagementTableBody.appendChild(createRow(info));
       });