[webui][ntp] Refresh most visited entries upon activating an NTP tab

This ensures the most visited tiles as up-to-date. It's also what the
local NTP does.

Bug: 1087564
Change-Id: I724b99763952894617400d2733ce55992e3933dd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2222635
Auto-Submit: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#773343}

chrome/browser/resources/new_tab_page/most_visited.js

@@ -17,6 +17,7 @@ import './strings.m.js';
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {isMac} from 'chrome://resources/js/cr.m.js';
 import {FocusOutlineManager} from 'chrome://resources/js/cr/ui/focus_outline_manager.m.js';
+import {EventTracker} from 'chrome://resources/js/event_tracker.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {Debouncer, html, microTask, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
@@ -203,6 +204,9 @@ class MostVisitedElement extends PolymerElement {
     super.connectedCallback();
     /** @private {boolean} */
     this.isRtl_ = window.getComputedStyle(this)['direction'] === 'rtl';
+    /** @private {!EventTracker} */
+    this.eventTracker_ = new EventTracker();
+
     this.setMostVisitedInfoListenerId_ =
         this.callbackRouter_.setMostVisitedInfo.addListener(info => {
           performance.measure('most-visited-mojo', 'most-visited-mojo-start');
@@ -211,6 +215,13 @@ class MostVisitedElement extends PolymerElement {
           this.tiles_ = info.tiles.slice(0, 10);
         });
     performance.mark('most-visited-mojo-start');
+    this.eventTracker_.add(document, 'visibilitychange', () => {
+      // This updates the most visited tiles every time the NTP tab gets
+      // activated.
+      if (document.visibilityState === 'visible') {
+        this.pageHandler_.updateMostVisitedInfo();
+      }
+    });
     this.pageHandler_.updateMostVisitedInfo();
     FocusOutlineManager.forDocument(document);
   }
@@ -226,6 +237,7 @@ class MostVisitedElement extends PolymerElement {
         assert(this.boundOnWidthChange_));
     this.ownerDocument.removeEventListener(
         'keydown', this.boundOnDocumentKeyDown_);
+    this.eventTracker_.removeAll();
   }
 
   /** @override */

chrome/browser/ui/webui/new_tab_page/new_tab_page_handler.cc

@@ -445,6 +445,9 @@ void NewTabPageHandler::SetNoBackgroundImage() {
 }
 
 void NewTabPageHandler::UpdateMostVisitedInfo() {
+  // OnNewTabPageOpened refreshes the most visited entries while
+  // UpdateMostVisitedInfo triggers a call to MostVisitedInfoChanged.
+  instant_service_->OnNewTabPageOpened();
   instant_service_->UpdateMostVisitedInfo();
 }
 

chrome/test/data/webui/new_tab_page/most_visited_test.js

@@ -794,4 +794,15 @@ suite('NewTabPageMostVisitedTest', () => {
       dataGenerationTime: {internalValue: 0},
     });
   });
+
+  test('making tab visible refreshes most visited tiles', () => {
+    // Arrange.
+    testProxy.handler.resetResolver('updateMostVisitedInfo');
+
+    // Act.
+    document.dispatchEvent(new Event('visibilitychange'));
+
+    // Assert.
+    assertEquals(1, testProxy.handler.getCallCount('updateMostVisitedInfo'));
+  });
 });