Revert "[NTP] Remove UI MD flag"

This reverts commit 5d112920.

Reason for revert: Broke old UI and we probably won't be able to
completely remove the old UI in M71.

Original change's description:
> [NTP] Remove UI MD flag
> 
> Remove flag for ntp md ui. Change the new styling to be the
> default and remove the md class, this mainly affects the fakebox
> as the icons are styled via md-icons.
> 
> Bug: 864673
> Change-Id: I7eb5da522a657417c527e3aa666bab14f8485bef
> Reviewed-on: https://chromium-review.googlesource.com/1255600
> Reviewed-by: Ilya Sherman <isherman@chromium.org>
> Reviewed-by: Kristi Park <kristipark@chromium.org>
> Commit-Queue: Kyle Milka <kmilka@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#595953}

TBR=isherman@chromium.org,kristipark@chromium.org,kmilka@chromium.org

# Not skipping CQ checks because original CL landed > 1 day ago.

Bug: 864673
Change-Id: I5ef13705787953e96b7e4b0ead21e1e8aeb558d1
Reviewed-on: https://chromium-review.googlesource.com/c/1265024Reviewed-by: Kyle Milka <kmilka@chromium.org>
Commit-Queue: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#597206}

chrome/browser/about_flags.cc

@@ -4101,6 +4101,10 @@ const FeatureEntry kFeatureEntries[] = {
     {"ntp-icons", flag_descriptions::kNtpIconsName,
      flag_descriptions::kNtpIconsDescription, kOsDesktop,
      FEATURE_VALUE_TYPE(features::kNtpIcons)},
+
+    {"ntp-ui-md", flag_descriptions::kNtpUIMdName,
+     flag_descriptions::kNtpUIMdDescription, kOsDesktop,
+     FEATURE_VALUE_TYPE(features::kNtpUIMd)},
 #endif  // OS_WIN || OS_MACOSX || OS_LINUX
 
 #if defined(OS_ANDROID)

chrome/browser/flag_descriptions.cc

@@ -1233,6 +1233,10 @@ const char kNtpIconsDescription[] =
     "Show Material Design icons on the New Tab Page, instead of Most Visited "
     "tiles. Implicitly enables 'ntp-ui-md'.";
 
+const char kNtpUIMdName[] = "New Tab Page Material Design UI";
+const char kNtpUIMdDescription[] =
+    "Updates the New Tab Page with Material Design elements.";
+
 const char kNumRasterThreadsName[] = "Number of raster threads";
 const char kNumRasterThreadsDescription[] =
     "Specify the number of raster threads.";

chrome/browser/flag_descriptions.h

@@ -770,6 +770,9 @@ extern const char kNtpCustomLinksDescription[];
 extern const char kNtpIconsName[];
 extern const char kNtpIconsDescription[];
 
+extern const char kNtpUIMdName[];
+extern const char kNtpUIMdDescription[];
+
 extern const char kNumRasterThreadsName[];
 extern const char kNumRasterThreadsDescription[];
 extern const char kNumRasterThreadsOne[];

chrome/browser/resources/local_ntp/local_ntp.css

@@ -292,22 +292,32 @@ body.alternate-logo #logo-non-white {
 }
 
 #fakebox {
-  background-color: rgb(241, 243, 244);
-  border-radius: 22px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
   cursor: text;
   font-size: 18px;
   height: 44px;
   line-height: 36px;
+  margin: 0 calc(var(--tile-margin) / 2 + 1px) 0 calc(var(--tile-margin) / 2);
+  outline: none;
+  position: relative;
+  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.md #fakebox {
+  background-color: rgb(241, 243, 244);
+  border-radius: 22px;
+  box-shadow: none;
   margin: 0 auto;
   max-width: 560px;
   opacity: 1;
-  position: relative;
   transition: background-color 300ms ease-in-out;
   /* Transition should be similar to .mv-tile/.md-tile opacity transition. */
   transition: opacity 200ms;
 }
 
-#fakebox:hover {
+.md #fakebox:hover {
   background-color: rgb(232, 234, 237);
 }
 
@@ -315,33 +325,50 @@ body.alternate-logo #logo-non-white {
   display: none;
 }
 
+#fakebox:hover,
+body.fakebox-focused #fakebox {
+  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08);
+}
+
+.md #fakebox:hover,
+body.md.fakebox-focused #fakebox {
+  box-shadow: none;
+}
+
 #fakebox > input {
   bottom: 0;
   box-sizing: border-box;
   left: 0;
   margin: 0;
   opacity: 0;
-  padding-left: 20px;
+  padding-left: 8px;
   position: absolute;
   top: 0;
   width: 100%;
 }
 
+.md #fakebox > input {
+  padding-left: 20px;
+}
+
 html[dir=rtl] #fakebox > input {
   padding-left: 0;
-  padding-right: 20px;
+  padding-right: 8px;
   right: 0;
 }
 
+html[dir=rtl] .md  #fakebox > input {
+  padding-right: 20px;
+}
+
 #fakebox-text {
   bottom: 4px;
-  color: rgb(128, 134, 139);
-  font-family: 'Roboto', arial, sans-serif;
-  font-size: 14px;
-  left: 0;
+  color: rgba(0, 0, 0, 0.42);
+  font-family: arial, sans-serif;
+  font-size: 16px;
+  left: 13px;
   margin-top: 1px;
   overflow: hidden;
-  padding-left: 20px;
   position: absolute;
   right: 13px;
   text-align: initial;
@@ -352,7 +379,20 @@ html[dir=rtl] #fakebox > input {
   white-space: nowrap;
 }
 
+.md #fakebox-text {
+  color: rgb(128, 134, 139);
+  font-family: 'Roboto', arial, sans-serif;
+  font-size: 14px;
+  left: 0;
+  padding-left: 20px;
+}
+
 html[dir=rtl] #fakebox-text {
+  left: auto;
+  right: 13px;
+}
+
+html[dir=rtl] .md #fakebox-text {
   padding-right: 20px;
   right: 0;
 }
@@ -360,15 +400,23 @@ html[dir=rtl] #fakebox-text {
 #fakebox-cursor {
   background: #333;
   bottom: 12px;
-  left: 20px;
+  left: 13px;
   position: absolute;
   top: 12px;
   visibility: hidden;
   width: 1px;
 }
 
+.md #fakebox-cursor {
+  left: 20px;
+}
+
 html[dir=rtl] #fakebox-cursor {
   left: auto;
+  right: 13px;
+}
+
+html[dir=rtl] .md #fakebox-cursor {
   right: 20px;
 }
 
@@ -377,20 +425,27 @@ html[dir=rtl] #fakebox-cursor {
   background-size: 24px 24px;
   bottom: 0;
   cursor: pointer;
-  margin-right: 12px;
   padding: 22px 12px 0;
   position: absolute;
   right: 0;
   top: 0;
+  width: 41px;
+}
+
+.md #fakebox-microphone {
+  margin-right: 12px;
   width: 28px;
 }
 
 html[dir=rtl] #fakebox-microphone {
   left: 0;
-  margin-left: 12px;
   right: auto;
 }
 
+html[dir=rtl] .md #fakebox-microphone {
+  margin-left: 12px;
+}
+
 @keyframes blink {
   0% {
     opacity: 1;

chrome/browser/resources/local_ntp/local_ntp.js

@@ -111,6 +111,7 @@ var CLASSES = {
   HIDE_NOTIFICATION: 'notice-hide',
   INITED: 'inited',  // Reveals the <body> once init() is done.
   LEFT_ALIGN_ATTRIBUTION: 'left-align-attribution',
+  MATERIAL_DESIGN: 'md',  // Applies Material Design styles to the page
   MATERIAL_DESIGN_ICONS:
       'md-icons',  // Applies Material Design styles to Most Visited.
   // Vertically centers the most visited section for a non-Google provided page.
@@ -938,9 +939,19 @@ function handlePostMessage(event) {
 function enableMDIcons() {
   $(IDS.MOST_VISITED).classList.add(CLASSES.MATERIAL_DESIGN_ICONS);
   $(IDS.TILES).classList.add(CLASSES.MATERIAL_DESIGN_ICONS);
+  enableMD();
   addRippleAnimations();
 }
 
+
+/**
+ * Enables Material Design styles for all NTP components except Most Visited.
+ */
+function enableMD() {
+  document.body.classList.add(CLASSES.MATERIAL_DESIGN);
+}
+
+
 /**
  * Enables ripple animations for elements with CLASSES.RIPPLE. The target
  * element must have position relative or absolute.
@@ -1080,6 +1091,8 @@ function init() {
   if (configData.isGooglePage) {
     if (configData.isMDIconsEnabled || configData.isCustomLinksEnabled) {
       enableMDIcons();
+    } else if (configData.isMDUIEnabled) {
+      enableMD();
     }
 
     if (configData.isCustomLinksEnabled) {

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -53,19 +53,36 @@ a:visited {
 }
 
 #most-visited {
-  margin: 10px 0;
+  margin: 0;
   text-align: -webkit-center;
   user-select: none;
+}
+
+.md #most-visited {
+  margin: 10px 0;
   width: 100%
 }
 
-#mv-tiles {
-  display: flex;
-  flex-wrap: wrap;
+#mv-tiles,
+.mv-tiles-old {
   font-size: 0;
   /* Two rows of tiles of 128px each, and 16px of spacing between the rows.
    * If you change this, also change the corresponding values in
    * local_ntp.css. */
+  height: calc(2*var(--tile-height) + var(--tile-margin));
+  line-height: calc(var(--tile-height) + var(--tile-margin));
+  margin: 4px 0 8px 0;
+  opacity: 0;
+  position: absolute;
+  /* This align correctly for both LTR and RTL */
+  text-align: -webkit-auto;
+  transition: opacity 1s;
+  user-select: none;
+}
+
+.md #mv-tiles {
+  display: flex;
+  flex-wrap: wrap;
   height: auto;
   justify-content: center;
   line-height: normal;
@@ -73,15 +90,10 @@ a:visited {
   /* 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;
-  transition: opacity 1s;
-  user-select: none;
 }
 
-.mv-tiles-old {
+.md .mv-tiles-old {
   display: none;
 }
 

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -43,6 +43,7 @@ const IDS = {
 const CLASSES = {
   FAILED_FAVICON: 'failed-favicon',  // Applied when the favicon fails to load.
   // Material Design classes.
+  MATERIAL_DESIGN: 'md',  // Applies Material Design styles to the page.
   MD_EMPTY_TILE: 'md-empty-tile',
   MD_FALLBACK_BACKGROUND: 'md-fallback-background',
   MD_FALLBACK_LETTER: 'md-fallback-letter',
@@ -975,6 +976,7 @@ var init = function() {
   // Enable Material Design.
   if (queryArgs['enableMD'] == '1') {
     isMDEnabled = true;
+    document.body.classList.add(CLASSES.MATERIAL_DESIGN);
   }
 
   // Enable custom links.

chrome/browser/search/local_ntp_source.cc

@@ -152,7 +152,8 @@ std::unique_ptr<base::DictionaryValue> GetTranslatedStrings(bool is_google) {
 
   if (is_google) {
     AddString(translated_strings.get(), "searchboxPlaceholder",
-              IDS_GOOGLE_SEARCH_BOX_EMPTY_HINT_MD);
+              features::IsMDUIEnabled() ? IDS_GOOGLE_SEARCH_BOX_EMPTY_HINT_MD
+                                        : IDS_GOOGLE_SEARCH_BOX_EMPTY_HINT);
 
     // Custom Backgrounds
     AddString(translated_strings.get(), "customizeBackground",
@@ -504,6 +505,8 @@ class LocalNtpSource::SearchConfigurationProvider
                            content::BrowserAccessibilityState::GetInstance()
                                ->IsAccessibleBrowser());
 
+    config_data.SetBoolean("isMDUIEnabled", features::IsMDUIEnabled());
+
     config_data.SetBoolean("isMDIconsEnabled", features::IsMDIconsEnabled());
 
     if (is_google) {

chrome/browser/search/ntp_features.cc

@@ -11,15 +11,20 @@
 namespace features {
 
 // If enabled, the user will see a configuration UI, and be able to select
-// background images to set on the New Tab Page.
+// background images to set on the New Tab Page. Implicitly enables |kNtpIcons|.
 const base::Feature kNtpBackgrounds{"NewTabPageBackgrounds",
                                     base::FEATURE_DISABLED_BY_DEFAULT};
 
 // If enabled, the user will see the Most Visited tiles updated with Material
-// Design elements.
+// Design elements. Implicitly enables |kNtpUIMd|.
 const base::Feature kNtpIcons{"NewTabPageIcons",
                               base::FEATURE_DISABLED_BY_DEFAULT};
 
+// If enabled, the user will see the New Tab Page updated with Material Design
+// elements.
+const base::Feature kNtpUIMd{"NewTabPageUIMd",
+                             base::FEATURE_DISABLED_BY_DEFAULT};
+
 bool IsCustomLinksEnabled() {
   return ntp_tiles::IsCustomLinksEnabled();
 }
@@ -36,4 +41,14 @@ bool IsMDIconsEnabled() {
          base::FeatureList::IsEnabled(features::kExperimentalUi);
 }
 
+bool IsMDUIEnabled() {
+  return base::FeatureList::IsEnabled(kNtpUIMd) ||
+         // MD UI changes are implicitly enabled if Material Design icons,
+         // custom link, or custom backgrounds are enabled.
+         base::FeatureList::IsEnabled(kNtpIcons) ||
+         base::FeatureList::IsEnabled(kNtpBackgrounds) ||
+         base::FeatureList::IsEnabled(ntp_tiles::kNtpCustomLinks) ||
+         base::FeatureList::IsEnabled(features::kExperimentalUi);
+}
+
 }  // namespace features

chrome/browser/search/ntp_features.h

@@ -14,6 +14,7 @@ namespace features {
 
 extern const base::Feature kNtpBackgrounds;
 extern const base::Feature kNtpIcons;
+extern const base::Feature kNtpUIMd;
 
 // Returns whether New Tab Page custom links are enabled.
 bool IsCustomLinksEnabled();
@@ -24,6 +25,9 @@ bool IsCustomBackgroundsEnabled();
 // Returns whether the Material Design UI for Most Visited is enabled.
 bool IsMDIconsEnabled();
 
+// Returns whether the Material Design UI is enabled on the New Tab Page.
+bool IsMDUIEnabled();
+
 }  // namespace features
 
 #endif  // CHROME_BROWSER_SEARCH_NTP_FEATURES_H_

chrome/browser/ui/search/local_ntp_browsertest.cc

@@ -602,7 +602,7 @@ class LocalNTPCustomLinksTest : public LocalNTPTest {
   LocalNTPCustomLinksTest()
       : LocalNTPTest(
             /*enabled_features=*/{features::kUseGoogleLocalNtp,
-                                  features::kNtpIcons,
+                                  features::kNtpUIMd, features::kNtpIcons,
                                   ntp_tiles::kNtpCustomLinks},
             /*disabled_features=*/{}) {}
 
@@ -768,9 +768,9 @@ class LocalNTPNonMDTest : public LocalNTPTest {
   LocalNTPNonMDTest()
       : LocalNTPTest(
             /*enabled_features=*/{features::kUseGoogleLocalNtp},
-            /*disabled_features=*/{features::kNtpBackgrounds,
-                                   features::kNtpIcons,
-                                   ntp_tiles::kNtpCustomLinks}) {}
+            /*disabled_features=*/{
+                features::kNtpUIMd, features::kNtpBackgrounds,
+                features::kNtpIcons, ntp_tiles::kNtpCustomLinks}) {}
 };
 
 IN_PROC_BROWSER_TEST_F(LocalNTPNonMDTest, LoadsNonMDIframe) {

chrome/test/data/local_ntp/local_ntp_browsertest.js

@@ -73,6 +73,32 @@ test.localNtp.testMostVisitedContents = function() {
       window.chrome.embeddedSearch.newTabPage.mostVisited[0].rid));
 };
 
+/**
+ * Tests that the GM2 style is applied when the flag is enabled.
+ */
+test.localNtp.testMDApplied = function() {
+  // Turn off voice search to avoid reinitializing the speech object
+  configData.isVoiceSearchEnabled = false;
+
+  configData.isMDUIEnabled = true;
+  initLocalNTP(/*isGooglePage=*/true);
+  assertTrue(document.body.classList.contains('md'));
+}
+
+/**
+ * Tests that the GM2 style is not applied when the flag is disabled.
+ */
+test.localNtp.testMDNotApplied = function() {
+  // Turn off voice search to avoid reinitializing the speech object
+  configData.isVoiceSearchEnabled = false;
+
+  configData.isMDUIEnabled = false;
+  configData.isMDIconsEnabled = false;
+  configData.isCustomLinksEnabled = false;
+  initLocalNTP(/*isGooglePage=*/true);
+  assertFalse(document.body.classList.contains('md'));
+}
+
 
 // ****************************** ADVANCED TESTS ******************************
 // Advanced tests are controlled from the native side. The helpers here are

testing/variations/fieldtrial_testing_config.json

@@ -2534,7 +2534,8 @@
                     "enable_features": [
                         "NewTabPageBackgrounds",
                         "NewTabPageCustomLinks",
-                        "NewTabPageIcons"
+                        "NewTabPageIcons",
+                        "NewTabPageUIMd"
                     ]
                 }
             ]