[NTP] Add shortcuts grid layout feature

Hide the new shortcut layout behind a flag and re-add the old flexbox
layout.

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

chrome/browser/resources/local_ntp/externs.js

@@ -30,6 +30,7 @@ let MostVisitedData;
  *            isGooglePage: boolean,
  *            googleBaseUrl: string,
  *            isAccessibleBrowser: boolean,
+ *            enableShortcutsGrid: boolean,
  *            removeFakebox: boolean,
  *            alternateFakebox: boolean,
  *            fakeboxSearchIcon: boolean,

chrome/browser/resources/local_ntp/local_ntp.js

@@ -1274,6 +1274,9 @@ function createIframes() {
 
   if (configData.isGooglePage) {
     args.push('enableCustomLinks=1');
+    if (configData.enableShortcutsGrid) {
+      args.push('enableGrid=1');
+    }
     args.push(
         'addLink=' +
         encodeURIComponent(configData.translatedStrings.addLinkTitle));

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -57,10 +57,28 @@ a:visited {
 
 #mv-tiles,
 .mv-tiles-old {
+  display: flex;
+  flex-wrap: wrap;
   font-size: 0;
+  justify-content: center;
+  /* 5 112px tiles per row. If you change this, also change the corresponding
+   * values in local_ntp.css. */
+  max-width: calc(var(--md-tile-width) * var(--md-max-tiles-row));
   opacity: 0;
   padding: 10px 6px 0;
+  position: static;
+  /* This align correctly for both LTR and RTL */
+  text-align: -webkit-auto;
+  user-select: none;
+}
+
+body.grid-layout :-webkit-any(#mv-tiles, .mv-tiles-old) {
+  display: block;
+  flex-wrap: unset;
+  justify-content: unset;
+  max-width: unset;
   position: relative;
+  text-align: unset;
 }
 
 html:not(.no-initial-fade) :-webkit-any(#mv-tiles, .mv-tiles-old) {
@@ -94,11 +112,11 @@ body.reordering .grid-tile {
 
 /* Prevent transitions on the held tile in order for it to smoothly follow the
  * mouse. */
-.reorder .grid-tile {
+.grid-reorder .grid-tile {
   transition-duration: 0s;
 }
 
-.reorder {
+.grid-tile-container.grid-reorder {
   z-index: 10;  /* Ensure the held tile is visible. */
 }
 
@@ -114,6 +132,24 @@ body.reordering .grid-tile {
   width: var(--md-tile-width);
 }
 
+.md-tile-container.reorder .md-tile {
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px 0 rgba(var(--GG800-rgb), 0.3),
+      0 4px 8px 3px rgba(var(--GG800-rgb), 0.15);
+  transition-duration: 200ms;
+}
+
+html[darkmode=true] .md-tile-container.reorder .md-tile {
+  background-color: rgb(var(--dark-mode-bg-rgb));
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4),
+      0 4px 8px 3px rgba(0, 0, 0, 0.25);
+}
+
+.md-tile-container.reorder .md-tile .md-tile-inner {
+  z-index: unset;
+}
+
 .md-tile {
   cursor: pointer;
   padding: var(--md-tile-padding-top) var(--md-tile-padding-horizontal)
@@ -125,17 +161,17 @@ body.reordering .grid-tile {
 }
 
 body:not(.reordering) .md-tile-container:hover,
-.grid-tile-container.reorder .md-tile-container {
+.grid-tile-container.grid-reorder .md-tile-container {
   background-color: rgba(var(--GG900-rgb), 0.06);
 }
 
 html[darkmode=true] body:not(.reordering) .md-tile-container:hover,
-html[darkmode=true] .grid-tile-container.reorder .md-tile-container {
+html[darkmode=true] .grid-tile-container.grid-reorder .md-tile-container {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
 body.dark-theme:not(.reordering) .md-tile-container:hover,
-body.dark-theme .grid-tile-container.reorder .md-tile-container {
+body.dark-theme .grid-tile-container.grid-reorder .md-tile-container {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -246,7 +282,7 @@ html[darkmode=true] .md-title {
 }
 
 /* Apply when a custom background is set. */
-body.dark-theme .md-tile-container .md-title {
+body.dark-theme .md-tile-container:not(.reorder) .md-title {
   color: rgb(var(--GG050-rgb));
   filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
 }
@@ -263,12 +299,16 @@ html[darkmode=true] body.using-theme .md-title-container {
   background-color: rgb(var(--GG900-rgb));
 }
 
-body.using-theme .md-tile-container .md-title {
+html[darkmode=true] body.using-theme .md-tile-container.reorder .md-title-container {
+  background-color: rgb(var(--dark-mode-bg-rgb));
+}
+
+body.using-theme .md-tile-container:not(.reorder) .md-title {
   color: rgb(var(--GG800-rgb));
   filter: unset;
 }
 
-html[darkmode=true] body.using-theme .md-tile-container .md-title {
+html[darkmode=true] body.using-theme .md-tile-container:not(.reorder) .md-title {
   color: rgb(var(--GG200-rgb));
 }
 
@@ -339,12 +379,12 @@ html[darkmode=true] body:not(.reordering) .md-menu:focus::after {
   background-color: rgb(var(--GG400-rgb));
 }
 
-body.dark-theme .md-tile-container .md-menu::after,
+body.dark-theme .md-tile-container:not(.reorder) .md-menu::after,
 body.dark-theme:not(.reordering) .md-menu:focus:not(.mouse-navigation)::after {
   background-color: white;
 }
 
-html[darkmode=true] body.dark-theme .md-tile-container .md-menu::after,
+html[darkmode=true] body.dark-theme .md-tile-container:not(.reorder) .md-menu::after,
 html[darkmode=true] body.dark-theme:not(.reordering) .md-menu:focus:not(.mouse-navigation)::after {
   background-color: rgb(var(--GG200-rgb));
 }

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -48,10 +48,14 @@ const IDS = {
  */
 const CLASSES = {
   FAILED_FAVICON: 'failed-favicon',  // Applied when the favicon fails to load.
+  GRID_LAYOUT: 'grid-layout',
+  // Applied to the grid tile being moved while reordering.
+  GRID_REORDER: 'grid-reorder',
   GRID_TILE: 'grid-tile',
   GRID_TILE_CONTAINER: 'grid-tile-container',
   REORDER: 'reorder',  // Applied to the tile being moved while reordering.
-  REORDERING: 'reordering',      // Applied while we are reordering.
+  // Applied while we are reordering. Disables hover styling.
+  REORDERING: 'reordering',
   MAC_CHROMEOS: 'mac-chromeos',  // Reduces font weight for MacOS and ChromeOS.
   // Material Design classes.
   MD_EMPTY_TILE: 'md-empty-tile',
@@ -121,6 +125,13 @@ const TileVisualType = {
 const RESIZE_TIMEOUT_DELAY = 66;
 
 
+/**
+ * Timeout delay in ms before starting the reorder flow.
+ * @const {number}
+ */
+const REORDER_TIMEOUT_DELAY = 1000;
+
+
 /**
  * Maximum number of tiles if custom links is enabled.
  * @const {number}
@@ -201,6 +212,21 @@ let maxNumTiles = 8;
 let queryArgs = {};
 
 
+/**
+ * True if we are currently reordering the tiles.
+ * @type {boolean}
+ */
+let reordering = false;
+
+
+/**
+ * The tile that is being moved during the reorder flow. Null if we are
+ * currently not reordering.
+ * @type {?Element}
+ */
+let elementToReorder = null;
+
+
 /**
  * True if custom links is enabled.
  * @type {boolean}
@@ -208,6 +234,13 @@ let queryArgs = {};
 let isCustomLinksEnabled = false;
 
 
+/**
+ * True if the grid layout is enabled.
+ * @type {boolean}
+ */
+let isGridEnabled = false;
+
+
 /**
  * The current grid of tiles.
  * @type {?Grid}
@@ -215,6 +248,15 @@ let isCustomLinksEnabled = false;
 let currGrid = null;
 
 
+/**
+ * Called by tests to enable the grid layout.
+ */
+function enableGridLayoutForTesting() {
+  isGridEnabled = true;
+  document.body.classList.add(CLASSES.GRID_LAYOUT);
+}
+
+
 /**
  * Additional API for Array. Moves the item at index |from| to index |to|.
  * @param {number} from Index of the item to move.
@@ -511,7 +553,7 @@ class Grid {
     this.newIndexOfItemToReorder_ = index;
 
     // Apply reorder styling.
-    tile.classList.add(CLASSES.REORDER);
+    tile.classList.add(CLASSES.GRID_REORDER);
     // Disable other hover/active styling for all tiles.
     document.body.classList.add(CLASSES.REORDERING);
 
@@ -535,7 +577,7 @@ class Grid {
     const index = Number(tile.getAttribute('index'));
 
     // Remove reorder styling.
-    tile.classList.remove(CLASSES.REORDER);
+    tile.classList.remove(CLASSES.GRID_REORDER);
     document.body.classList.remove(CLASSES.REORDERING);
 
     // Move the tile to its new position and notify EmbeddedSearchAPI that the
@@ -849,9 +891,18 @@ function swapInNewTiles() {
   cur.id = IDS.MV_TILES;
   parent.appendChild(cur);
 
-  // Initialize the new tileset before modifying opacity. This will prevent the
-  // transform transition from applying after the tiles fade in.
-  currGrid.init(cur);
+  if (isGridEnabled) {
+    // Initialize the new tileset before modifying opacity. This will prevent
+    // the transform transition from applying after the tiles fade in.
+    currGrid.init(cur);
+  } else {
+    // Re-balance the tiles if there are more than |MD_MAX_TILES_PER_ROW| in
+    // order to make even rows.
+    if (cur.childNodes.length > MD_MAX_TILES_PER_ROW) {
+      cur.style.maxWidth = 'calc(var(--md-tile-width) * ' +
+          Math.ceil(cur.childNodes.length / 2) + ')';
+    }
+  }
 
   const flushOpacity = () => window.getComputedStyle(cur).opacity;
 
@@ -871,6 +922,26 @@ function swapInNewTiles() {
 }
 
 
+/**
+ * Explicitly hide tiles that are not visible in order to prevent keyboard
+ * navigation.
+ */
+function updateTileVisibility() {
+  const allTiles = document.querySelectorAll(
+      '#' + IDS.MV_TILES + ' .' + CLASSES.MD_TILE_CONTAINER);
+  if (allTiles.length === 0) {
+    return;
+  }
+
+  // Get the current number of tiles per row. Hide any tile after the first two
+  // rows.
+  const tilesPerRow = Math.trunc(document.body.offsetWidth / MD_TILE_WIDTH);
+  for (let i = MD_NUM_TILES_ALWAYS_VISIBLE; i < allTiles.length; i++) {
+    allTiles[i].style.display = (i < tilesPerRow * 2) ? 'block' : 'none';
+  }
+}
+
+
 /**
  * Handler for the 'show' message from the host page, called when it wants to
  * add a suggestion tile.
@@ -934,6 +1005,113 @@ function editCustomLink(tid) {
 }
 
 
+/**
+ * Starts the reorder flow. Updates the visual style of the held tile to
+ * indicate that it is being moved.
+ * @param {!Element} tile Tile that is being moved.
+ */
+function startReorder(tile) {
+  reordering = true;
+  elementToReorder = tile;
+
+  tile.classList.add(CLASSES.REORDER);
+  // Disable other hover/active styling for all tiles.
+  document.body.classList.add(CLASSES.REORDERING);
+
+  document.addEventListener('dragend', () => {
+    stopReorder(tile);
+  }, {once: true});
+}
+
+
+/**
+ * Stops the reorder flow. Resets the held tile's visual style and tells the
+ * EmbeddedSearchAPI that a tile has been moved.
+ * @param {!Element} tile Tile that has been moved.
+ */
+function stopReorder(tile) {
+  reordering = false;
+  elementToReorder = null;
+
+  tile.classList.remove(CLASSES.REORDER);
+  document.body.classList.remove(CLASSES.REORDERING);
+
+  // Update |data-pos| for all tiles and notify EmbeddedSearchAPI that the tile
+  // has been moved.
+  const allTiles = document.querySelectorAll('#mv-tiles .' + CLASSES.MD_TILE);
+  for (let i = 0; i < allTiles.length; i++) {
+    allTiles[i].setAttribute('data-pos', i);
+  }
+  chrome.embeddedSearch.newTabPage.reorderCustomLink(
+      Number(tile.firstChild.getAttribute('data-tid')),
+      Number(tile.firstChild.getAttribute('data-pos')));
+}
+
+
+/**
+ * Sets up event listeners necessary for tile reordering.
+ * @param {!Element} tile Tile on which to set the event listeners.
+ */
+function setupReorder(tile) {
+  // Starts the reorder flow after the user has held the mouse button down for
+  // |REORDER_TIMEOUT_DELAY|.
+  tile.addEventListener('mousedown', (event) => {
+    // Do not reorder if the edit menu was clicked or if ctrl/shift/alt/meta is
+    // also held down.
+    if (event.button == 0 /* LEFT CLICK */ && !event.ctrlKey &&
+        !event.shiftKey && !event.altKey && !event.metaKey &&
+        !event.target.classList.contains(CLASSES.MD_MENU)) {
+      let timeout = -1;
+
+      // Cancel the timeout if the user drags the mouse off the tile and
+      // releases or if the mouse if released.
+      const dragend = () => {
+        window.clearTimeout(timeout);
+      };
+      document.addEventListener('dragend', dragend, {once: true});
+
+      const mouseup = () => {
+        if (event.button == 0 /* LEFT CLICK */) {
+          window.clearTimeout(timeout);
+        }
+      };
+      document.addEventListener('mouseup', mouseup, {once: true});
+
+      const timeoutFunc = (dragend_in, mouseup_in) => {
+        if (!reordering) {
+          startReorder(tile);
+        }
+        document.removeEventListener('dragend', dragend_in);
+        document.removeEventListener('mouseup', mouseup_in);
+      };
+      // Wait for |REORDER_TIMEOUT_DELAY| before starting the reorder flow.
+      timeout = window.setTimeout(
+          timeoutFunc.bind(dragend, mouseup), REORDER_TIMEOUT_DELAY);
+    }
+  });
+
+  tile.addEventListener('dragover', (event) => {
+    // Only executed when the reorder flow is ongoing. Inserts the tile that is
+    // being moved before/after this |tile| according to order in the list.
+    if (reordering && elementToReorder && elementToReorder != tile) {
+      // Determine which side to insert the element on:
+      // - If the held tile comes after the current tile, insert behind the
+      //   current tile.
+      // - If the held tile comes before the current tile, insert in front of
+      //   the current tile.
+      let insertBefore;  // Element to insert the held tile behind.
+      if (tile.compareDocumentPosition(elementToReorder) &
+          Node.DOCUMENT_POSITION_FOLLOWING) {
+        insertBefore = tile;
+      } else {
+        insertBefore = tile.nextSibling;
+      }
+      $('mv-tiles').insertBefore(elementToReorder, insertBefore);
+    }
+  });
+}
+
+
 /**
  * Renders a MostVisited tile to the DOM.
  * @param {?MostVisitedData} data Object containing rid, url, title, favicon,
@@ -1129,7 +1307,17 @@ function renderMaterialDesignTile(data) {
     mdTileContainer.appendChild(mdMenu);
   }
 
-  return currGrid.createGridTile(mdTileContainer, data.tid, !!data.isAddButton);
+  if (isGridEnabled) {
+    return currGrid.createGridTile(
+        mdTileContainer, data.tid, !!data.isAddButton);
+  } else {
+    // Enable reordering.
+    if (isCustomLinksEnabled && !data.isAddButton) {
+      mdTileContainer.draggable = 'true';
+      setupReorder(mdTileContainer);
+    }
+    return mdTileContainer;
+  }
 }
 
 
@@ -1166,6 +1354,12 @@ function init() {
     isCustomLinksEnabled = true;
   }
 
+  // Enable grid layout.
+  if (queryArgs['enableGrid'] == '1') {
+    isGridEnabled = true;
+    document.body.classList.add(CLASSES.GRID_LAYOUT);
+  }
+
   // Set the maximum number of tiles to show.
   if (isCustomLinksEnabled) {
     maxNumTiles = MD_MAX_NUM_CUSTOM_LINK_TILES;
@@ -1181,7 +1375,11 @@ function init() {
     }
     resizeTimeout = window.setTimeout(() => {
       resizeTimeout = null;
-      currGrid.onResize();
+      if (isGridEnabled) {
+        currGrid.onResize();
+      } else {
+        updateTileVisibility();
+      }
     }, RESIZE_TIMEOUT_DELAY);
   };
 
@@ -1198,8 +1396,9 @@ function listen() {
 
 
 return {
-  Grid: Grid,      // Exposed for testing.
-  init: init,      // Exposed for testing.
+  Grid: Grid,  // Exposed for testing.
+  init: init,  // Exposed for testing.
+  enableGridLayoutForTesting: enableGridLayoutForTesting,
   listen: listen,
 };
 }

chrome/browser/search/local_ntp_source.cc

@@ -601,6 +601,9 @@ class LocalNtpSource::SearchConfigurationProvider
                                ->IsAccessibleBrowser());
 
     if (is_google) {
+      config_data.SetBoolean(
+          "enableShortcutsGrid",
+          base::FeatureList::IsEnabled(features::kGridLayoutForNtpShortcuts));
       config_data.SetBoolean("removeFakebox", base::FeatureList::IsEnabled(
                                                   features::kRemoveNtpFakebox));
       config_data.SetBoolean("alternateFakebox",

chrome/browser/search/ntp_features.cc

@@ -17,6 +17,11 @@ const base::Feature kChromeColors{"ChromeColors",
 const base::Feature kDisableInitialMostVisitedFadeIn{
     "DisableInitialMostVisitedFadeIn", base::FEATURE_DISABLED_BY_DEFAULT};
 
+// If enabled, the NTP shortcut layout will be replaced with a grid layout that
+// enables better animations.
+const base::Feature kGridLayoutForNtpShortcuts{
+    "GridLayoutForNtpShortcuts", base::FEATURE_DISABLED_BY_DEFAULT};
+
 // If enabled, the user will see the second version of the customization picker.
 const base::Feature kNtpCustomizationMenuV2{"NtpCustomizationMenuV2",
                                             base::FEATURE_DISABLED_BY_DEFAULT};

chrome/browser/search/ntp_features.h

@@ -14,6 +14,7 @@ namespace features {
 
 extern const base::Feature kChromeColors;
 extern const base::Feature kDisableInitialMostVisitedFadeIn;
+extern const base::Feature kGridLayoutForNtpShortcuts;
 extern const base::Feature kNtpCustomizationMenuV2;
 extern const base::Feature kRemoveNtpFakebox;
 

chrome/test/data/local_ntp/most_visited_browsertest.js

@@ -29,7 +29,7 @@ test.mostVisited.MOST_VISITED = 'most-visited';
 test.mostVisited.CLASSES = {
   GRID_TILE: 'grid-tile',
   GRID_TILE_CONTAINER: 'grid-tile-container',
-  REORDER: 'reorder',
+  GRID_REORDER: 'grid-reorder',
   REORDERING: 'reordering',
 };
 
@@ -89,6 +89,7 @@ test.mostVisited.setUp = function() {
       });
 
   test.mostVisited.mostvisited = test.mostVisited.init();
+  test.mostVisited.mostvisited.enableGridLayoutForTesting();
   test.mostVisited.grid = new test.mostVisited.mostvisited.Grid();
 };
 
@@ -390,21 +391,21 @@ test.mostVisited.testReorderStart = function() {
     assertEquals(i, Number(tile.getAttribute('rid')));
     assertTrue(tile.firstChild.draggable);
 
-    assertFalse(tile.classList.contains(test.mostVisited.CLASSES.REORDER));
+    assertFalse(tile.classList.contains(test.mostVisited.CLASSES.GRID_REORDER));
     assertFalse(
         document.body.classList.contains(test.mostVisited.CLASSES.REORDERING));
 
     // Start the reorder flow.
     tile.firstChild.dispatchEvent(dragStart);
 
-    assertTrue(tile.classList.contains(test.mostVisited.CLASSES.REORDER));
+    assertTrue(tile.classList.contains(test.mostVisited.CLASSES.GRID_REORDER));
     assertTrue(
         document.body.classList.contains(test.mostVisited.CLASSES.REORDERING));
 
     // Stop the reorder flow.
     document.dispatchEvent(mouseUp);
 
-    assertFalse(tile.classList.contains(test.mostVisited.CLASSES.REORDER));
+    assertFalse(tile.classList.contains(test.mostVisited.CLASSES.GRID_REORDER));
     assertFalse(
         document.body.classList.contains(test.mostVisited.CLASSES.REORDERING));
   }
@@ -415,7 +416,8 @@ test.mostVisited.testReorderStart = function() {
   assertFalse(addButton.firstChild.draggable);
   addButton.firstChild.dispatchEvent(dragStart);
 
-  assertFalse(addButton.classList.contains(test.mostVisited.CLASSES.REORDER));
+  assertFalse(
+      addButton.classList.contains(test.mostVisited.CLASSES.GRID_REORDER));
   assertFalse(
       document.body.classList.contains(test.mostVisited.CLASSES.REORDERING));
 };