[NTP] Swap custom links and most visited tiles on toggle

Swap the tiles on "toggleMostVisitedOrCustomLinks". If most visited is
enabled, build the tiles as most visited tiles and switch the blacklist
notification to the most visited style. Otherwise, build the tiles as
custom links and use custom link notifications.

Screencast: https://drive.google.com/open?id=1CfEfNDfJxl_0WV7ffKxuqNC8SZcEn0hw

Bug: 953822
Change-Id: Ie423bbc6f4f99aeea205fbc15b9f41237b93674e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1653083Reviewed-by: Kyle Milka <kmilka@chromium.org>
Commit-Queue: Kristi Park <kristipark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#668550}

chrome/browser/resources/local_ntp/externs.js

@@ -204,6 +204,11 @@ window.chrome.embeddedSearch.newTabPage.isCustomLinks;
  */
 window.chrome.embeddedSearch.newTabPage.isInputInProgress;
 
+/**
+ * @return {boolean} isUsingMostVisited
+ */
+window.chrome.embeddedSearch.newTabPage.isUsingMostVisited;
+
 /**
  * @param {number} event
  */
@@ -283,6 +288,11 @@ window.chrome.embeddedSearch.newTabPage.setBackgroundURLWithAttributions;
  */
 window.chrome.embeddedSearch.newTabPage.themeBackgroundInfo;
 
+/**
+ * No params.
+ */
+window.chrome.embeddedSearch.newTabPage.toggleMostVisitedOrCustomLinks;
+
 /**
  * No params.
  */

chrome/browser/resources/local_ntp/local_ntp.js

@@ -671,7 +671,7 @@ function reloadTiles() {
   const maxNumTiles = configData.isGooglePage ? MAX_NUM_TILES_CUSTOM_LINKS :
                                                 MAX_NUM_TILES_MOST_VISITED;
   for (let i = 0; i < Math.min(maxNumTiles, pages.length); ++i) {
-    cmds.push({cmd: 'tile', rid: pages[i].rid, darkMode: useDarkChips});
+    cmds.push({cmd: 'tile', rid: pages[i].rid});
   }
   cmds.push({cmd: 'show'});
 
@@ -734,6 +734,9 @@ function onDeleteCustomLinkDone(success) {
  */
 function showNotification(msg) {
   $(IDS.NOTIFICATION_MESSAGE).textContent = msg;
+  $(IDS.RESTORE_ALL_LINK).textContent = customLinksEnabled() ?
+      configData.translatedStrings.restoreDefaultLinks :
+      configData.translatedStrings.restoreThumbnailsShort;
   floatUpNotification($(IDS.NOTIFICATION), $(IDS.NOTIFICATION_CONTAINER));
   $(IDS.UNDO_LINK).focus();
 }
@@ -883,6 +886,16 @@ function floatDownNotification(notification, notificationContainer, showPromo) {
 }
 
 
+/**
+ * Return true if custom links are enabled.
+ * @return {boolean}
+ */
+function customLinksEnabled() {
+  return configData.isGooglePage &&
+      !chrome.embeddedSearch.newTabPage.isUsingMostVisited;
+}
+
+
 /**
  * Handles a click on the notification undo link by hiding the notification and
  * informing Chrome.
@@ -891,7 +904,7 @@ function onUndo() {
   hideNotification();
   // Focus on the omnibox after the notification is hidden.
   window.chrome.embeddedSearch.searchBox.startCapturingKeyStrokes();
-  if (configData.isGooglePage) {
+  if (customLinksEnabled()) {
     ntpApiHandle.undoCustomLinkAction();
   } else if (lastBlacklistedTile != null) {
     ntpApiHandle.undoMostVisitedDeletion(lastBlacklistedTile);
@@ -907,7 +920,7 @@ function onRestoreAll() {
   hideNotification();
   // Focus on the omnibox after the notification is hidden.
   window.chrome.embeddedSearch.searchBox.startCapturingKeyStrokes();
-  if (configData.isGooglePage) {
+  if (customLinksEnabled()) {
     ntpApiHandle.resetCustomLinks();
   } else {
     ntpApiHandle.undoAllMostVisitedDeletions();
@@ -1011,7 +1024,7 @@ function handlePostMessage(event) {
       if ($(IDS.PROMO)) {
         $(IDS.PROMO).classList.add(CLASSES.SHOW_ELEMENT);
       }
-      if (!configData.hideShortcuts) {
+      if (customLinksEnabled() && !configData.hideShortcuts) {
         $(customize.IDS.CUSTOM_LINKS_RESTORE_DEFAULT)
             .classList.toggle(
                 customize.CLASSES.OPTION_DISABLED, !args.showRestoreDefault);
@@ -1021,7 +1034,7 @@ function handlePostMessage(event) {
       $(IDS.OGB).classList.add(CLASSES.SHOW_ELEMENT);
     }
   } else if (cmd === 'tileBlacklisted') {
-    if (configData.isGooglePage) {
+    if (customLinksEnabled()) {
       showNotification(configData.translatedStrings.linkRemovedMsg);
     } else {
       showNotification(
@@ -1120,10 +1133,6 @@ function init() {
   restoreAllLink.addEventListener('click', onRestoreAll);
   registerKeyHandler(restoreAllLink, KEYCODE.ENTER, onRestoreAll);
   registerKeyHandler(restoreAllLink, KEYCODE.SPACE, onRestoreAll);
-  restoreAllLink.textContent =
-      (configData.isGooglePage ?
-           configData.translatedStrings.restoreDefaultLinks :
-           configData.translatedStrings.restoreThumbnailsShort);
 
   $(IDS.ATTRIBUTION_TEXT).textContent =
       configData.translatedStrings.attributionIntro;

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -218,10 +218,11 @@ let elementToReorder = null;
 
 
 /**
- * True if custom links is enabled.
+ * True if the custom links feature is enabled, i.e. when this is a Google NTP.
+ * Set when the iframe is initialized.
  * @type {boolean}
  */
-let isCustomLinksEnabled = false;
+let customLinksFeatureEnabled = false;
 
 
 /**
@@ -346,7 +347,7 @@ class Grid {
       this.order_[i] = i;
     }
 
-    if (isCustomLinksEnabled || params.enableReorder) {
+    if (isCustomLinksEnabled() || params.enableReorder) {
       // Set up reordering for all tiles except the add shortcut button.
       for (let i = 0; i < this.tiles_.length; i++) {
         if (this.tiles_[i].getAttribute('add') !== 'true') {
@@ -781,6 +782,16 @@ function logMostVisitedNavigation(
       tileIndex, tileTitleSource, tileSource, tileType, dataGenerationTime);
 }
 
+
+/**
+ * Returns true if custom links are enabled.
+ */
+function isCustomLinksEnabled() {
+  return customLinksFeatureEnabled &&
+      !chrome.embeddedSearch.newTabPage.isUsingMostVisited;
+}
+
+
 /**
  * Down counts the DOM elements that we are waiting for the page to load.
  * When we get to 0, we send a message to the parent window.
@@ -791,8 +802,8 @@ function countLoad() {
   if (loadedCounter <= 0) {
     swapInNewTiles();
     logEvent(LOG_TYPE.NTP_ALL_TILES_LOADED);
-    let tilesAreCustomLinks =
-        isCustomLinksEnabled && chrome.embeddedSearch.newTabPage.isCustomLinks;
+    let tilesAreCustomLinks = isCustomLinksEnabled() &&
+        chrome.embeddedSearch.newTabPage.isCustomLinks;
     // Note that it's easiest to capture this when all custom links are loaded,
     // rather than when the impression for each link is logged.
     if (tilesAreCustomLinks) {
@@ -924,7 +935,7 @@ function swapInNewTiles() {
 
   // Add an "add new custom link" button if we haven't reached the maximum
   // number of tiles.
-  if (isCustomLinksEnabled && cur.childNodes.length < maxNumTiles) {
+  if (isCustomLinksEnabled() && cur.childNodes.length < maxNumTiles) {
     const data = {
       'rid': -1,
       'title': queryArgs['addLink'],
@@ -1042,7 +1053,7 @@ function addTile(args) {
 function blacklistTile(tile) {
   const rid = Number(tile.getAttribute('data-rid'));
 
-  if (isCustomLinksEnabled) {
+  if (isCustomLinksEnabled()) {
     chrome.embeddedSearch.newTabPage.deleteMostVisitedItem(rid);
   } else {
     tile.classList.add('blacklisted');
@@ -1322,7 +1333,7 @@ function renderMaterialDesignTile(data) {
   if (!data.isAddButton) {
     const mdMenu = document.createElement('button');
     mdMenu.className = CLASSES.MD_MENU;
-    if (isCustomLinksEnabled) {
+    if (isCustomLinksEnabled()) {
       mdMenu.classList.add(CLASSES.MD_EDIT_MENU);
       mdMenu.title = queryArgs['editLinkTooltip'] || '';
       mdMenu.setAttribute(
@@ -1359,7 +1370,7 @@ function renderMaterialDesignTile(data) {
     return currGrid.createGridTile(mdTile, data.rid, !!data.isAddButton);
   } else {
     // Enable reordering.
-    if (isCustomLinksEnabled && !data.isAddButton) {
+    if (isCustomLinksEnabled() && !data.isAddButton) {
       mdTile.draggable = 'true';
       setupReorder(mdTile);
     }
@@ -1398,7 +1409,7 @@ function init() {
 
   // Enable custom links.
   if (queryArgs['enableCustomLinks'] == '1') {
-    isCustomLinksEnabled = true;
+    customLinksFeatureEnabled = true;
   }
 
   // Enable grid layout.
@@ -1408,7 +1419,7 @@ function init() {
   }
 
   // Set the maximum number of tiles to show.
-  if (isCustomLinksEnabled) {
+  if (isCustomLinksEnabled()) {
     maxNumTiles = MD_MAX_NUM_CUSTOM_LINK_TILES;
   }
 

chrome/browser/search/instant_service.cc

@@ -385,7 +385,8 @@ bool InstantService::ToggleMostVisitedOrCustomLinks() {
   pref_service_->SetBoolean(prefs::kNtpUseMostVisitedTiles, use_most_visited);
   most_visited_info_->use_most_visited = use_most_visited;
 
-  most_visited_sites_->EnableCustomLinks(use_most_visited);
+  // Custom links is enabled if Most Visited is disabled.
+  most_visited_sites_->EnableCustomLinks(!use_most_visited);
   return true;
 }
 

chrome/browser/ui/search/local_ntp_browsertest.cc

@@ -643,6 +643,72 @@ IN_PROC_BROWSER_TEST_F(LocalNTPTest, ReorderCustomLinks) {
   EXPECT_EQ(new_title, title);
 }
 
+IN_PROC_BROWSER_TEST_F(LocalNTPTest, ToggleMostVisitedAndCustomLinks) {
+  content::WebContents* active_tab =
+      local_ntp_test_utils::OpenNewTab(browser(), GURL("about:blank"));
+
+  TestInstantServiceObserver observer(
+      InstantServiceFactory::GetForProfile(browser()->profile()));
+
+  local_ntp_test_utils::NavigateToNTPAndWaitUntilLoaded(browser());
+  observer.WaitForMostVisitedItems(kDefaultMostVisitedItemCount);
+
+  // Initialize custom links by adding a shortcut.
+  content::RenderFrameHost* iframe = GetIframe(active_tab, kMostVisitedIframe);
+  local_ntp_test_utils::ExecuteScriptOnNTPAndWaitUntilLoaded(
+      iframe,
+      "window.chrome.embeddedSearch.newTabPage.updateCustomLink(-1, "
+      "'https://1.com', 'Title1')");
+  // Confirm that there are the correct number of custom link tiles.
+  observer.WaitForMostVisitedItems(kDefaultMostVisitedItemCount + 1);
+
+  // Check if custom links is enabled. If so, the tiles will have an edit menu.
+  bool result = false;
+  ASSERT_TRUE(instant_test_utils::GetBoolFromJS(
+      iframe, "!window.chrome.embeddedSearch.newTabPage.isUsingMostVisited",
+      &result));
+  ASSERT_TRUE(result);
+  result = false;
+  ASSERT_TRUE(instant_test_utils::GetBoolFromJS(
+      iframe, "!!document.querySelector('#mv-tiles .md-edit-menu')", &result));
+  ASSERT_TRUE(result);
+
+  // Enable Most Visited sites and disable custom links.
+  local_ntp_test_utils::ExecuteScriptOnNTPAndWaitUntilLoaded(
+      iframe,
+      "window.chrome.embeddedSearch.newTabPage.toggleMostVisitedOrCustomLinks("
+      ")");
+
+  // Check that custom links is disabled. The tiles should not have an edit
+  // menu.
+  result = false;
+  ASSERT_TRUE(instant_test_utils::GetBoolFromJS(
+      iframe, "window.chrome.embeddedSearch.newTabPage.isUsingMostVisited",
+      &result));
+  EXPECT_TRUE(result);
+  result = false;
+  ASSERT_TRUE(instant_test_utils::GetBoolFromJS(
+      iframe, "!document.querySelector('#mv-tiles .md-edit-menu')", &result));
+  EXPECT_TRUE(result);
+
+  // Disable Most Visited sites and enable custom links.
+  local_ntp_test_utils::ExecuteScriptOnNTPAndWaitUntilLoaded(
+      iframe,
+      "window.chrome.embeddedSearch.newTabPage.toggleMostVisitedOrCustomLinks("
+      ")");
+
+  // Check if custom links is enabled. The tiles should have an edit menu.
+  result = false;
+  ASSERT_TRUE(instant_test_utils::GetBoolFromJS(
+      iframe, "!window.chrome.embeddedSearch.newTabPage.isUsingMostVisited",
+      &result));
+  EXPECT_TRUE(result);
+  result = false;
+  ASSERT_TRUE(instant_test_utils::GetBoolFromJS(
+      iframe, "!!document.querySelector('#mv-tiles .md-edit-menu')", &result));
+  EXPECT_TRUE(result);
+}
+
 class LocalNTPRTLTest : public LocalNTPTest {
  public:
   LocalNTPRTLTest() {}

chrome/renderer/searchbox/searchbox_extension.cc

@@ -863,8 +863,10 @@ bool NewTabPageBindings::GetIsCustomLinks() {
 // static
 bool NewTabPageBindings::GetIsUsingMostVisited() {
   const SearchBox* search_box = GetSearchBoxForCurrentContext();
-  if (!search_box || !HasOrigin(GURL(chrome::kChromeSearchMostVisitedUrl)))
+  if (!search_box || !(HasOrigin(GURL(chrome::kChromeSearchMostVisitedUrl)) ||
+                       HasOrigin(GURL(chrome::kChromeSearchLocalNtpUrl)))) {
     return false;
+  }
 
   return search_box->IsUsingMostVisited();
 }