Improve the appearance of chrome:://site-engagement.

1) Add background-color to make the input form more obvious for users.

2) Update the engagement bar immediately on a ScoreChange event.

BUG=667931
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2553683005
Cr-Commit-Position: refs/heads/master@{#436879}

chrome/browser/resources/engagement/site_engagement.html

@@ -40,20 +40,28 @@
     }
 
     .origin-cell {
+      background-color: rgba(230, 230, 230, 0.5);
       min-width: 500px;
     }
 
     .score-cell {
+      background-color: rgba(230, 230, 230, 0.5);
       text-align: right;
     }
 
     .score-input {
-      background-color: transparent;
-      border: none;
+      border: 1px solid #ccc;
+      border-radius: 2px;
       text-align: right;
-      width: 40px;
+      width: 70px;
     }
 
+    .score-input:focus {
+      border: 1px solid rgb(143, 185, 252);
+      box-shadow: 0 0 2px rgb(113, 158, 206);
+      outline: none;
+    }
+
     table tr:hover {
       background: rgb(255, 255, 187);
     }

chrome/browser/resources/engagement/site_engagement.js

@@ -74,6 +74,10 @@ define('main', [
       row.appendChild(originCell);
       row.appendChild(scoreCell);
       row.appendChild(engagementBarCell);
+
+      // Stores correspondent engagementBarCell to change it's length on
+      // scoreChange event.
+      scoreInput.barCellRef = engagementBar;
       return row;
     }
 
@@ -90,13 +94,17 @@ define('main', [
     }
 
     /**
-     * Sets the engagement score when a score input is changed. Also resets the
-     * update interval.
+     * Sets the 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) {
-      uiHandler.setSiteEngagementScoreForOrigin(origin, e.target.value);
+      var scoreInput = e.target;
+      uiHandler.setSiteEngagementScoreForOrigin(origin, scoreInput.value);
+      scoreInput.barCellRef.style.width = (scoreInput.value * 4) + 'px';
+      scoreInput.blur();
       enableAutoupdate();
     }