[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/1255600Reviewed-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}

chrome/browser/about_flags.cc

@@ -4085,10 +4085,6 @@ 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

@@ -1228,10 +1228,6 @@ 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

@@ -767,9 +767,6 @@ 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,32 +292,22 @@ body.alternate-logo #logo-non-white {
 }
 
 #fakebox {
-  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);
+  background-color: rgb(241, 243, 244);
+  border-radius: 22px;
   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;
 }
 
-.md #fakebox:hover {
+#fakebox:hover {
   background-color: rgb(232, 234, 237);
 }
 
@@ -325,50 +315,33 @@ 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: 8px;
+  padding-left: 20px;
   position: absolute;
   top: 0;
   width: 100%;
 }
 
-.md #fakebox > input {
-  padding-left: 20px;
-}
-
 html[dir=rtl] #fakebox > input {
   padding-left: 0;
-  padding-right: 8px;
-  right: 0;
-}
-
-html[dir=rtl] .md  #fakebox > input {
   padding-right: 20px;
+  right: 0;
 }
 
 #fakebox-text {
   bottom: 4px;
-  color: rgba(0, 0, 0, 0.42);
-  font-family: arial, sans-serif;
-  font-size: 16px;
-  left: 13px;
+  color: rgb(128, 134, 139);
+  font-family: 'Roboto', arial, sans-serif;
+  font-size: 14px;
+  left: 0;
   margin-top: 1px;
   overflow: hidden;
+  padding-left: 20px;
   position: absolute;
   right: 13px;
   text-align: initial;
@@ -379,20 +352,7 @@ html[dir=rtl] .md  #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;
 }
@@ -400,23 +360,15 @@ html[dir=rtl] .md #fakebox-text {
 #fakebox-cursor {
   background: #333;
   bottom: 12px;
-  left: 13px;
+  left: 20px;
   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;
 }
 
@@ -425,25 +377,18 @@ html[dir=rtl] .md #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;
-  right: auto;
-}
-
-html[dir=rtl] .md #fakebox-microphone {
   margin-left: 12px;
+  right: auto;
 }
 
 @keyframes blink {

chrome/browser/resources/local_ntp/local_ntp.js

@@ -111,7 +111,6 @@ 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.
@@ -939,19 +938,9 @@ 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.
@@ -1091,8 +1080,6 @@ 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,36 +53,19 @@ a:visited {
 }
 
 #most-visited {
-  margin: 0;
+  margin: 10px 0;
   text-align: -webkit-center;
   user-select: none;
-}
-
-.md #most-visited {
-  margin: 10px 0;
   width: 100%
 }
 
-#mv-tiles,
-.mv-tiles-old {
+#mv-tiles {
+  display: flex;
+  flex-wrap: wrap;
   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;
@@ -90,10 +73,15 @@ 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;
 }
 
-.md .mv-tiles-old {
+.mv-tiles-old {
   display: none;
 }
 

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -43,7 +43,6 @@ 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',
@@ -976,7 +975,6 @@ 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,8 +152,7 @@ std::unique_ptr<base::DictionaryValue> GetTranslatedStrings(bool is_google) {
 
   if (is_google) {
     AddString(translated_strings.get(), "searchboxPlaceholder",
-              features::IsMDUIEnabled() ? IDS_GOOGLE_SEARCH_BOX_EMPTY_HINT_MD
-                                        : IDS_GOOGLE_SEARCH_BOX_EMPTY_HINT);
+              IDS_GOOGLE_SEARCH_BOX_EMPTY_HINT_MD);
 
     // Custom Backgrounds
     AddString(translated_strings.get(), "customizeBackground",
@@ -505,8 +504,6 @@ 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,20 +11,15 @@
 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. Implicitly enables |kNtpIcons|.
+// background images to set on the New Tab Page.
 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. Implicitly enables |kNtpUIMd|.
+// Design elements.
 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();
 }
@@ -41,14 +36,4 @@ 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,7 +14,6 @@ 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();
@@ -25,9 +24,6 @@ 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::kNtpUIMd, features::kNtpIcons,
+                                  features::kNtpIcons,
                                   ntp_tiles::kNtpCustomLinks},
             /*disabled_features=*/{}) {}
 
@@ -768,9 +768,9 @@ class LocalNTPNonMDTest : public LocalNTPTest {
   LocalNTPNonMDTest()
       : LocalNTPTest(
             /*enabled_features=*/{features::kUseGoogleLocalNtp},
-            /*disabled_features=*/{
-                features::kNtpUIMd, features::kNtpBackgrounds,
-                features::kNtpIcons, ntp_tiles::kNtpCustomLinks}) {}
+            /*disabled_features=*/{features::kNtpBackgrounds,
+                                   features::kNtpIcons,
+                                   ntp_tiles::kNtpCustomLinks}) {}
 };
 
 IN_PROC_BROWSER_TEST_F(LocalNTPNonMDTest, LoadsNonMDIframe) {

chrome/test/data/local_ntp/local_ntp_browsertest.js

@@ -73,32 +73,6 @@ 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

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