[NTP] Add animations to shortcuts on layout change

Part 1 of 2.

Convert shortcuts from flexbox to absolute positioning. This allows us
to add animations to the shortcuts using transform.

This change adds the framework for future custom link animations and
adds animations for layout changes on window resize/zoom.

The old reorder logic is removed as well, and will be re-added in part
2.

Screencasts
LTR: https://drive.google.com/open?id=1mSpq__cnrmuJv0DDa3KhFv2iBCaFyguY
RTL: https://drive.google.com/open?id=1STJ5JZ7XV_k1g8AfbJm35GRTHmSsa-h7

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

chrome/browser/resources/local_ntp/externs.js

@@ -136,6 +136,12 @@ window.gbar.a.pc;
  */
 window.localNTPUnitTest;
 
+/**
+ * Used for running Most Visited iframe javascript unit tests. Defined in
+ * src/chrome/test/data/local_ntp/most_visited_browsertest.html
+ */
+window.mostVisitedUnitTest;
+
 /**************************** Embedded Search API ****************************/
 
 /**

chrome/browser/resources/local_ntp/local_ntp.css

@@ -4,11 +4,14 @@
 
 html {
   /* Material Design constants */
-  --md-tile-height: 112px;
   --md-tile-margin: 16px;
+  --md-tile-size: 112px;
 
-  /* This will be overridden based on the viewport width, see below. */
+  /* This will be overridden based on the viewport width, see below.
+   * TODO(kristipark): Combine these.
+   */
   --column-count: 2;
+  --shortcut-column-count: 3;
 
   --content-width: calc(
       (var(--column-count) * (var(--tile-width) + var(--tile-margin)))
@@ -16,6 +19,8 @@ html {
        * make the width shorter than it should be. */
       + 1px);
 
+  --shortcuts-width: calc(var(--shortcut-column-count) * var(--md-tile-size));
+
   --logo-height: 200px; /* Normal height of a doodle. */
   --logo-margin-top: 56px; /* Expected OGB height, so logo doesn't overlap. */
   --logo-margin-bottom: 29px; /* Between logo and fakebox. */
@@ -55,6 +60,7 @@ html[darkmode=true] body:not(.light-chip) {
 @media (min-width: 694px) {
   html {
     --column-count: 3;
+    --shortcut-column-count: 4;
   }
 }
 
@@ -62,6 +68,7 @@ html[darkmode=true] body:not(.light-chip) {
 @media (min-width: 864px) {
   html {
     --column-count: 4;
+    --shortcut-column-count: 5;
   }
 }
 
@@ -107,7 +114,7 @@ button {
    * single row, but also works for a row of icons, and works well on small
    * screens (like Pixelbook), as well as high-res screens. */
   height: 155px;
-  left: calc(50% - var(--content-width)/2);
+  left: calc(50% - var(--shortcuts-width)/2);
   position: absolute;
   top: calc(50% - 155px);
 }
@@ -392,15 +399,15 @@ body.remove-fakebox #user-content {
 
 #mv-tiles {
   /* Two rows of tiles of 112px each, 16px of spacing after each row, and 10px
-   * of margin on top. If you change this, also change the corresponding values
+   * of padding on top. If you change this, also change the corresponding values
    * in most_visited_single.css. */
-  height: calc(2*(var(--md-tile-height) + var(--md-tile-margin)) + 10px);
+  height: calc(2*(var(--md-tile-size) + var(--md-tile-margin)) + 10px);
   margin: 0;
   position: relative;
   text-align: -webkit-auto;
-  /* Add 2*5px to account for drop shadow on the tiles. If you change this, also
-   * change the corresponding values in most_visited_single.css. */
-  width: calc(var(--content-width) + 2*5px);
+  /* Add 2*6px to account for drop shadow on the tiles. If you change this, also
+   * change the corresponding padding in most_visited_single.css. */
+  width: calc(var(--shortcuts-width) + 12px);
 }
 
 #mv-notice-container {

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -50,26 +50,17 @@ a:visited {
 }
 
 #most-visited {
-  margin: 10px 0;
   text-align: -webkit-center;
   user-select: none;
-  width: 100%
+  width: 100%;
 }
 
 #mv-tiles,
 .mv-tiles-old {
-  display: flex;
-  flex-wrap: wrap;
   font-size: 0;
-  justify-content: center;
-  /* 5 88px 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;
-  position: static;
-  /* This align correctly for both LTR and RTL */
-  text-align: -webkit-auto;
-  user-select: none;
+  padding: 10px 6px 0;
+  position: relative;
 }
 
 html:not(.no-initial-fade) :-webkit-any(#mv-tiles, .mv-tiles-old) {
@@ -87,6 +78,15 @@ html:not(.no-initial-fade) :-webkit-any(#mv-tiles, .mv-tiles-old) {
   outline: none;
 }
 
+.grid-tile-container {
+  position: absolute;
+  transition: transform 300ms ease-in-out;
+}
+
+.grid-tile {
+  transition: transform 300ms ease-in-out;
+}
+
 .md-tile-container {
   border-radius: 4px;
   box-sizing: border-box;

chrome/browser/resources/local_ntp/most_visited_single.html

@@ -12,6 +12,7 @@
   <script src="single.js"></script>
 </head>
 <body>
+  <!-- Keep in sync with most_visited_single_browsertest.html -->
   <div id="most-visited"></div>
 </body>
 </html>

chrome/browser/ui/search/local_ntp_js_browsertest.cc

@@ -75,6 +75,28 @@ IN_PROC_BROWSER_TEST_F(LocalNTPJavascriptTest, CustomBackgroundsTests) {
   EXPECT_TRUE(success);
 }
 
+// A test class that sets up most_visited_browsertest.html as the NTP URL. It's
+// mostly a copy of the real most_visited_single.html, but it adds some testing
+// JS.
+class LocalNTPMostVisitedJavascriptTest : public LocalNTPJavascriptTestBase {
+ public:
+  LocalNTPMostVisitedJavascriptTest()
+      : LocalNTPJavascriptTestBase("/most_visited_browsertest.html") {}
+};
+
+// This runs a bunch of pure JS-side tests for the most visited iframe, i.e.
+// those that don't require any interaction from the native side.
+IN_PROC_BROWSER_TEST_F(LocalNTPMostVisitedJavascriptTest, MostVistedTests) {
+  content::WebContents* active_tab = local_ntp_test_utils::OpenNewTab(
+      browser(), GURL(chrome::kChromeUINewTabURL));
+
+  // Run the tests.
+  bool success = false;
+  ASSERT_TRUE(instant_test_utils::GetBoolFromJS(
+      active_tab, "!!runSimpleTests('mostVisited')", &success));
+  EXPECT_TRUE(success);
+}
+
 // A test class that sets up voice_browsertest.html as the NTP URL. It's
 // mostly a copy of the real local_ntp.html, but it adds some testing JS.
 class LocalNTPVoiceJavascriptTest : public LocalNTPJavascriptTestBase {

chrome/test/data/local_ntp/most_visited_browsertest.html

+<!doctype html>
+<html>
+<!-- Copyright 2019 The Chromium Authors. All rights reserved.
+     Use of this source code is governed by a BSD-style license that can be
+     found in the LICENSE file. -->
+<head>
+  <script>window.mostVisitedUnitTest = true;</script>
+  <link rel="stylesheet" href="chrome-search://most-visited/local-ntp-common.css"></link>
+  <link rel="stylesheet" href="chrome-search://most-visited/single.css"></link>
+  <script src="chrome-search://most-visited/single.js" charset="utf-8"></script>
+  <script src="chrome-search://most-visited/utils.js" charset="utf-8"></script>
+  <script src="test_utils.js" charset="utf-8"></script>
+  <!-- Browser test script files for individual modules: -->
+  <script src="most_visited_browsertest.js" charset="utf-8"></script>
+  <!-- Templates: (keep in sync with most_visited_single.html) -->
+  <template id="most-visited-template">
+    <div id="most-visited"></div>
+  </template>
+</head>
+<body>
+</body>
+</html>