[NTP] Add iframe for the edit custom link dialog

In order to prevent private information from being leaked to third-
party NTPs, information related to editing/adding links will be
contained in an iframe. Once the user finishes editing, the information
will be sent to the EmbeddedSearchAPI and ultimately be received by the
Most Visited iframe by querying EmbeddedSearchAPI with the specified
rid.

Screenshot: https://screenshot.googleplex.com/FcYM4VCiu3c.png

Design Doc: go/chrome-ntp-custom-links

Bug: 851293, 865071
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I06f4449f9c3764c5d797b83acbc7c97e6903b787
Reviewed-on: https://chromium-review.googlesource.com/1139108Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Marc Treib <treib@chromium.org>
Commit-Queue: Kristi Park <kristipark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#576348}

chrome/browser/browser_resources.grd

@@ -347,6 +347,10 @@
       <include name="IDR_MOST_VISITED_SINGLE_CSS" file="resources\local_ntp\most_visited_single.css" type="BINDATA" />
       <include name="IDR_MOST_VISITED_SINGLE_JS" file="resources\local_ntp\most_visited_single.js" type="BINDATA" />
       <include name="IDR_MOST_VISITED_UTIL_JS" file="resources\local_ntp\most_visited_util.js" type="BINDATA" flattenhtml="true" />
+      <include name="IDR_CUSTOM_LINKS_EDIT_HTML" file="resources\local_ntp\custom_links_edit.html" type="BINDATA" />
+      <include name="IDR_CUSTOM_LINKS_EDIT_CSS" file="resources\local_ntp\custom_links_edit.css" type="BINDATA" />
+      <include name="IDR_CUSTOM_LINKS_EDIT_JS" file="resources\local_ntp\custom_links_edit.js" type="BINDATA" />
+      <include name="IDR_CUSTOM_LINKS_ADD_SVG" file="resources\local_ntp\icons\add_link.svg" type="BINDATA" />
       <include name="IDR_OMNIBOX_HTML" file="resources\omnibox\omnibox.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
       <include name="IDR_OMNIBOX_CSS" file="resources\omnibox\omnibox.css" type="BINDATA" compress="gzip" />
       <include name="IDR_OMNIBOX_JS" file="resources\omnibox\omnibox.js" type="BINDATA" compress="gzip" />

chrome/browser/ntp_tiles/chrome_custom_links_manager_factory.cc

@@ -10,7 +10,7 @@
 
 std::unique_ptr<ntp_tiles::CustomLinksManager>
 ChromeCustomLinksManagerFactory::NewForProfile(Profile* profile) {
-  if (!ntp_tiles::IsMDCustomLinksEnabled()) {
+  if (!ntp_tiles::IsCustomLinksEnabled()) {
     return nullptr;
   }
   return std::make_unique<ntp_tiles::CustomLinksManagerImpl>(

chrome/browser/resources/local_ntp/custom_links_edit.css

+/* Copyright 2018 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. */
+
+#edit-link-dialog::backdrop {
+  background-color: rgba(255, 255, 255, .75);
+}
+
+#edit-link-dialog {
+  background-color: #fff;
+  border: none;
+  border-radius: 8px;
+  bottom: 0;
+  box-shadow:
+      0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
+  font-family: 'Roboto', arial, sans-serif;
+  margin: auto;
+  padding: 16px;
+  top: 0;
+  width: 320px;
+  z-index: 10000;
+}
+
+#edit-link-dialog > div {
+  width: 100%;
+}
+
+.dialog-title {
+  font-size: 15px;
+  line-height: 24px;
+  margin-bottom: 16px;
+}
+
+.field-container {
+  margin-bottom: 16px;
+}
+
+.field-title {
+  color: rgb(154, 160, 166);
+  font-size: 10px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+input {
+  -webkit-padding-end: 8px;
+  -webkit-padding-start: 8px;
+  background-color: rgb(232, 234, 237);
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  height: 32px;
+  line-height: 24px;
+  width: calc(100% - 16px);
+}
+
+.buttons-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 24px;
+}
+
+.buttons-container .right {
+}
+
+button {
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  height: 32px;
+  padding: 0 16px;
+}
+
+button.primary {
+  background-color: rgb(26, 115, 232);
+  color: white;
+}
+
+button.secondary {
+  background-color: white;
+  border: 1px solid rgb(218,220,224);
+  color: rgb(26, 115, 232);
+}
+
+#cancel {
+  margin-right: 8px;
+}

chrome/browser/resources/local_ntp/custom_links_edit.html

+<!doctype html>
+<html>
+<!-- Copyright 2018 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>
+  <base target="_top">
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="edit.css">
+  <script src="edit.js"></script>
+</head>
+<body>
+  <dialog id="edit-link-dialog">
+    <div class="dialog-title">Edit shortcut</div>
+    <div class="field-container">
+      <div class="field-title">Name</div>
+      <input class="field-input" autocomplete="no" tabindex="0"></input>
+    </div>
+    <div class="field-container">
+      <div class="field-title">URL</div>
+      <input class="field-input" autocomplete="url" tabindex="0"></input>
+    </div>
+    <div class="buttons-container">
+      <span>
+        <button id="delete" class="secondary">Remove</button>
+      </span>
+      <span class="right">
+        <button id="cancel" class="secondary">Cancel</button>
+        <button id="done" class="primary">Done</button>
+      </span>
+    </div>
+  </dialog>
+</body>
+</html>

chrome/browser/resources/local_ntp/custom_links_edit.js

+/* Copyright 2018 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. */
+
+
+/**
+ * Enum for ids.
+ * @enum {string}
+ * @const
+ */
+const IDS = {
+  EDIT_DIALOG: 'edit-link-dialog',  // Edit dialog.
+  CANCEL: 'cancel',                 // Cancel button.
+  DELETE: 'delete',                 // Delete button.
+  DONE: 'done',                     // Done button.
+};
+
+
+/**
+ * The origin of this request, i.e. 'https://www.google.TLD' for the remote NTP,
+ * or 'chrome-search://local-ntp' for the local NTP.
+ * @const {string}
+ */
+let DOMAIN_ORIGIN = '{{ORIGIN}}';
+
+
+/**
+ * Alias for document.getElementById.
+ * @param {string} id The ID of the element to find.
+ * @return {HTMLElement} The found element or null if not found.
+ */
+function $(id) {
+  // eslint-disable-next-line no-restricted-properties
+  return document.getElementById(id);
+}
+
+
+/**
+ * Send a message to close the edit dialog. Called when the edit flow has been
+ * completed.
+ * @param {!Event} event The click event.
+ */
+function closeDialog(event) {
+  window.parent.postMessage({cmd: 'closeDialog'}, DOMAIN_ORIGIN);
+}
+
+
+/**
+ * Does some initialization and shows the dialog window.
+ */
+function init() {
+  $(IDS.EDIT_DIALOG).showModal();
+  $(IDS.DELETE).addEventListener('click', closeDialog);
+  $(IDS.CANCEL).addEventListener('click', closeDialog);
+  $(IDS.DONE).addEventListener('click', closeDialog);
+}
+
+
+window.addEventListener('DOMContentLoaded', init);

chrome/browser/resources/local_ntp/icons/add_link.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="2" height="12" x="7" y="2" fill="#000"/>
+    <rect width="2" height="12" x="7" y="2" fill="#000" transform="rotate(-90 8 8)"/>
+  </g>
+</svg>

chrome/browser/resources/local_ntp/local_ntp.css

@@ -75,6 +75,10 @@ body.inited {
   display: block;
 }
 
+body.hidden {
+  overflow: hidden;
+}
+
 /* Button defaults vary by platform. Reset CSS so that the NTP can use buttons
  * as a kind of clickable div. */
 button {
@@ -667,6 +671,20 @@ html[dir=rtl] #attribution,
   width: 100%;
 }
 
+#custom-links-edit {
+  border: none;
+  display: none;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 10000;
+}
+
+#custom-links-edit.show {
+  display: block;
+}
+
 #one-google {
   position: absolute;
   right: 0;

chrome/browser/resources/local_ntp/local_ntp.html

@@ -158,5 +158,8 @@
   </dialog>
 
   <div id="one-google-end-of-body"></div>
+
+  <iframe id="custom-links-edit" name="custom-links-edit"
+          src="chrome-search://most-visited/edit.html"></iframe>
 </body>
 </html>

chrome/browser/resources/local_ntp/local_ntp.js

@@ -75,6 +75,9 @@ var CLASSES = {
   DELAYED_HIDE_NOTIFICATION: 'mv-notice-delayed-hide',
   FADE: 'fade',  // Enables opacity transition on logo and doodle.
   FAKEBOX_FOCUS: 'fakebox-focused',  // Applies focus styles to the fakebox
+  SHOW_EDIT_DIALOG: 'show',          // Displays the edit custom link dialog.
+  HIDE_BODY_OVERFLOW: 'hidden',      // Prevents scrolling while the edit custom
+                                     // link dialog is open.
   // Applies float animations to the Most Visited notification
   FLOAT_UP: 'float-up',
   // Applies ripple animation to the element on click
@@ -106,6 +109,7 @@ var CLASSES = {
 var IDS = {
   ATTRIBUTION: 'attribution',
   ATTRIBUTION_TEXT: 'attribution-text',
+  CUSTOM_LINKS_EDIT_IFRAME: 'custom-links-edit',
   FAKEBOX: 'fakebox',
   FAKEBOX_INPUT: 'fakebox-input',
   FAKEBOX_TEXT: 'fakebox-text',
@@ -633,6 +637,17 @@ function setFakeboxVisibility(show) {
 }
 
 
+/**
+ * @param {boolean} show True if do show the edit custom link dialog and disable
+ *  scrolling.
+ */
+function setEditCustomLinkDialogVisibility(show) {
+  $(IDS.CUSTOM_LINKS_EDIT_IFRAME)
+      .classList.toggle(CLASSES.SHOW_EDIT_DIALOG, show);
+  document.body.classList.toggle(CLASSES.HIDE_BODY_OVERFLOW, show);
+}
+
+
 /**
  * @param {!Element} element The element to register the handler for.
  * @param {number} keycode The keycode of the key to register.
@@ -647,7 +662,7 @@ function registerKeyHandler(element, keycode, handler) {
 
 
 /**
- * Event handler for messages from the most visited iframe.
+ * Event handler for messages from the most visited and edit custom link iframe.
  * @param {Event} event Event received.
  */
 function handlePostMessage(event) {
@@ -681,6 +696,10 @@ function handlePostMessage(event) {
     document.body.style.setProperty('--logo-iframe-height', height);
     document.body.style.setProperty('--logo-iframe-width', width);
     document.body.style.setProperty('--logo-iframe-resize-duration', duration);
+  } else if (cmd === 'startEditLink') {
+    setEditCustomLinkDialogVisibility(true);
+  } else if (cmd === 'closeDialog') {
+    setEditCustomLinkDialogVisibility(false);
   }
 }
 
@@ -957,6 +976,10 @@ function init() {
     args.push('enableMD=1');
   }
 
+  if (configData.isCustomLinksEnabled) {
+    args.push('enableCustomLinks=1');
+  }
+
   // Create the most visited iframe.
   var iframe = document.createElement('iframe');
   iframe.id = IDS.TILES_IFRAME;
@@ -970,6 +993,8 @@ function init() {
     sendThemeInfoToMostVisitedIframe();
   };
 
+  // TODO(851293): Add translated title attribute to edit custom link iframe.
+
   window.addEventListener('message', handlePostMessage);
 
   document.body.classList.add(CLASSES.INITED);

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -469,7 +469,8 @@ body.background-image .md-tile:active .md-title {
   width: var(--md-icon-size);
 }
 
-.md-fallback-background {
+.md-fallback-background,
+.md-add-background {
   align-items: center;
   background-color: rgb(136, 136, 136);
   border-radius: 50%;
@@ -489,6 +490,16 @@ body.background-image .md-tile:active .md-title {
   width: var(--md-fallback-letter-size);
 }
 
+.md-add-background {
+  background-color: rgb(241, 243, 244);
+}
+
+.md-add-icon {
+  background: url(chrome-search://most-visited/add_link.svg) no-repeat center;
+  height: var(--md-favicon-size);
+  width: var(--md-favicon-size);
+}
+
 .md-title {
   color: rgba(33, 32, 36, 0.86);
   font-family: 'Roboto', arial, sans-serif;

chrome/browser/search/iframe_source.cc

@@ -29,6 +29,8 @@ std::string IframeSource::GetMimeType(
     return "text/css";
   if (base::EndsWith(path, ".html", base::CompareCase::INSENSITIVE_ASCII))
     return "text/html";
+  if (base::EndsWith(path, ".svg", base::CompareCase::INSENSITIVE_ASCII))
+    return "image/svg+xml";
   return std::string();
 }
 

chrome/browser/search/local_ntp_source.cc

@@ -231,6 +231,8 @@ std::string GetConfigData(bool is_google, const GURL& google_base_url) {
   config_data.SetBoolean("isMDIconsEnabled", features::IsMDIconsEnabled());
 
   if (is_google) {
+    config_data.SetBoolean("isCustomLinksEnabled",
+                           features::IsCustomLinksEnabled());
     config_data.SetBoolean("isCustomBackgroundsEnabled",
                            features::IsCustomBackgroundsEnabled());
   }

chrome/browser/search/most_visited_iframe_source.cc

@@ -30,6 +30,15 @@ const char kThumbnailJSPath[] = "/thumbnail.js";
 const char kUtilJSPath[] = "/util.js";
 const char kCommonCSSPath[] = "/common.css";
 
+// Add custom link button icon.
+const char kAddSvgPath[] = "/add_link.svg";
+
+// Edit custom links dialog iframe, used by the local NTP and the Google remote
+// NTP.
+const char kEditHTMLPath[] = "/edit.html";
+const char kEditCSSPath[] = "/edit.css";
+const char kEditJSPath[] = "/edit.js";
+
 }  // namespace
 
 MostVisitedIframeSource::MostVisitedIframeSource() = default;
@@ -87,6 +96,14 @@ void MostVisitedIframeSource::StartDataRequest(
     SendJSWithOrigin(IDR_MOST_VISITED_UTIL_JS, wc_getter, callback);
   } else if (path == kCommonCSSPath) {
     SendResource(IDR_MOST_VISITED_IFRAME_CSS, callback);
+  } else if (path == kEditHTMLPath) {
+    SendResource(IDR_CUSTOM_LINKS_EDIT_HTML, callback);
+  } else if (path == kEditCSSPath) {
+    SendResource(IDR_CUSTOM_LINKS_EDIT_CSS, callback);
+  } else if (path == kEditJSPath) {
+    SendJSWithOrigin(IDR_CUSTOM_LINKS_EDIT_JS, wc_getter, callback);
+  } else if (path == kAddSvgPath) {
+    SendResource(IDR_CUSTOM_LINKS_ADD_SVG, callback);
   } else {
     callback.Run(nullptr);
   }
@@ -98,5 +115,6 @@ bool MostVisitedIframeSource::ServesPath(const std::string& path) const {
          path == kTitleCSSPath || path == kTitleJSPath ||
          path == kThumbnailHTMLPath || path == kThumbnailCSSPath ||
          path == kThumbnailJSPath || path == kUtilJSPath ||
-         path == kCommonCSSPath;
+         path == kCommonCSSPath || path == kEditHTMLPath ||
+         path == kEditCSSPath || path == kEditJSPath || path == kAddSvgPath;
 }

chrome/browser/search/ntp_features.cc

@@ -34,6 +34,10 @@ bool IsMDIconsEnabled() {
   return ntp_tiles::IsMDIconsEnabled();
 }
 
+bool IsCustomLinksEnabled() {
+  return ntp_tiles::IsCustomLinksEnabled();
+}
+
 bool IsCustomBackgroundsEnabled() {
   return base::FeatureList::IsEnabled(kNtpBackgrounds) ||
          base::FeatureList::IsEnabled(features::kExperimentalUi);

chrome/browser/search/ntp_features.h

@@ -18,9 +18,12 @@ extern const base::Feature kNtpUIMd;
 // Returns whether the Material Design UI is enabled on the New Tab Page.
 bool IsMDUIEnabled();
 
-// Returns whether New Tab Page Custom Link Icons are enabled.
+// Returns whether the Material Design UI for Most Visited is enabled.
 bool IsMDIconsEnabled();
 
+// Returns whether New Tab Page custom links are enabled.
+bool IsCustomLinksEnabled();
+
 // Returns whether New Tab Page Background Selection is enabled.
 bool IsCustomBackgroundsEnabled();
 

chrome/browser/ui/search/local_ntp_browsertest.cc

@@ -543,7 +543,10 @@ content::RenderFrameHost* GetMostVisitedIframe(content::WebContents* tab) {
 class LocalNTPMDTest : public LocalNTPTest {
  public:
   LocalNTPMDTest()
-      : LocalNTPTest({features::kUseGoogleLocalNtp, features::kNtpUIMd}, {}) {}
+      : LocalNTPTest(
+            /*enabled_features=*/{features::kUseGoogleLocalNtp,
+                                  ntp_tiles::kNtpIcons},
+            /*disabled_features=*/{ntp_tiles::kNtpCustomLinks}) {}
 
  private:
   base::test::ScopedFeatureList feature_list_;
@@ -590,6 +593,37 @@ IN_PROC_BROWSER_TEST_F(LocalNTPMDTest, LoadsMDIframe) {
   EXPECT_EQ(0, failed_favicons);
 }
 
+class LocalNTPCustomLinksTest : public LocalNTPTest {
+ public:
+  LocalNTPCustomLinksTest()
+      : LocalNTPTest(
+            /*enabled_features=*/{features::kUseGoogleLocalNtp,
+                                  features::kNtpUIMd, ntp_tiles::kNtpIcons,
+                                  ntp_tiles::kNtpCustomLinks},
+            /*disabled_features=*/{}) {}
+
+ private:
+  base::test::ScopedFeatureList feature_list_;
+};
+
+IN_PROC_BROWSER_TEST_F(LocalNTPCustomLinksTest, ShowsAddCustomLinkButton) {
+  content::WebContents* active_tab =
+      local_ntp_test_utils::OpenNewTab(browser(), GURL("about:blank"));
+  local_ntp_test_utils::NavigateToNTPAndWaitUntilLoaded(browser());
+
+  // Get the iframe and check that the tiles loaded correctly.
+  content::RenderFrameHost* iframe = GetMostVisitedIframe(active_tab);
+
+  // Check if only one add button exists in the iframe.
+  bool has_add_button = false;
+  ASSERT_TRUE(instant_test_utils::GetBoolFromJS(
+      iframe, "document.querySelectorAll('.md-add-icon').length == 1",
+      &has_add_button));
+  EXPECT_TRUE(has_add_button);
+}
+
+// TODO(851293): Add test for not showing add button when at max links.
+
 // A minimal implementation of an interstitial page.
 class TestInterstitialPageDelegate : public content::InterstitialPageDelegate {
  public:

chrome/browser/ui/webui/ntp_tiles_internals_ui.cc

@@ -88,7 +88,7 @@ bool ChromeNTPTilesInternalsMessageHandlerClient::DoesSourceExist(
       return false;
 #endif
     case ntp_tiles::TileSource::CUSTOM_LINKS:
-      return ntp_tiles::IsMDCustomLinksEnabled();
+      return ntp_tiles::IsCustomLinksEnabled();
   }
   NOTREACHED();
   return false;

chrome/test/data/local_ntp/local_ntp_browsertest.html

@@ -51,60 +51,63 @@
         <!-- The container for the tiles. The MV iframe goes in here. -->
         <div id="mv-tiles"></div>
         <!-- Notification shown when a tile is blacklisted. -->
-        <div id="mv-notice" class="mv-notice-hide">
-          <span id="mv-msg"></span>
-          <!-- Links in the notification. -->
-          <span id="mv-notice-links">
-            <span id="mv-undo" tabIndex="1"></span>
-            <span id="mv-restore" tabIndex="1"></span>
-            <button id="mv-notice-x" tabIndex="1" class="mv-x"></button>
-          </span>
+        <div id="mv-notice-container">
+          <div id="mv-notice" class="mv-notice-hide" role="alert">
+            <span id="mv-msg"></span>
+            <!-- Links in the notification. -->
+            <span id="mv-notice-links">
+              <span id="mv-undo" class="ripple" tabindex="0" role="button"></span>
+              <span id="mv-restore" class="ripple" tabindex="0" role="button">
+              </span>
+              <div id="mv-notice-x" tabindex="0" role="button"></div>
+            </span>
+          </div>
         </div>
       </div>
       <div id="attribution"><div id="attribution-text"></div></div>
 
-    <div id="edit-bg" hidden>
-      <button id="edit-bg-gear"></button>
+      <div id="edit-bg" hidden>
+        <button id="edit-bg-gear"></button>
+      </div>
     </div>
-  </div>
 
-  <dialog div id="edit-bg-dialog">
-    <div id="edit-bg-title"></div>
-    <div id="edit-bg-google-photos" class="bg-option" tabindex="0">
-      <div class="bg-option-img"></div>
-      <div id="edit-bg-google-photos-text" class="bg-option-text"></div>
-    </div>
-    <div id="edit-bg-default-wallpapers" class="bg-option" tabindex="0">
-      <div class="bg-option-img"></div>
-      <div id="edit-bg-default-wallpapers-text" class="bg-option-text">
+    <dialog div id="edit-bg-dialog">
+      <div id="edit-bg-title"></div>
+      <div id="edit-bg-google-photos" class="bg-option" tabindex="0">
+        <div class="bg-option-img"></div>
+        <div id="edit-bg-google-photos-text" class="bg-option-text"></div>
       </div>
-    </div>
-    <div id="edit-bg-upload-image" class="bg-option" tabindex="0">
-      <div class="bg-option-img"></div>
-      <div id="edit-bg-upload-image-text" class="bg-option-text"></div>
-    </div>
-    <div id="edit-bg-restore-default" class="bg-option" tabindex="0">
-      <div class="bg-option-img"></div>
-      <div id="edit-bg-restore-default-text" class="bg-option-text"></div>
-    </div>
-  </dialog>
+      <div id="edit-bg-default-wallpapers" class="bg-option" tabindex="0">
+        <div class="bg-option-img"></div>
+        <div id="edit-bg-default-wallpapers-text" class="bg-option-text">
+        </div>
+      </div>
+      <div id="edit-bg-upload-image" class="bg-option" tabindex="0">
+        <div class="bg-option-img"></div>
+        <div id="edit-bg-upload-image-text" class="bg-option-text"></div>
+      </div>
+      <div id="edit-bg-restore-default" class="bg-option" tabindex="0">
+        <div class="bg-option-img"></div>
+        <div id="edit-bg-restore-default-text" class="bg-option-text"></div>
+      </div>
+    </dialog>
 
-  <dialog id="bg-sel-menu">
-    <div id="bg-sel-title-bar">
-    <div id="bg-sel-back"></div>
-    <div id="bg-sel-title"></div>
-    </div>
-    <div id="bg-sel-tiles"></div>
-    <div id="bg-sel-footer">
-      <label id="bg-daily-refresh" class="switch">
-        <input type="checkbox">
-        <span class="toggle"></span>
-      </label>
-      <div id="bg-sel-refresh-text"></div>
-      <div id="bg-sel-footer-cancel" class="bg-sel-footer-button ripple" tabindex="0"></div>
-      <div id="bg-sel-footer-done" class="bg-sel-footer-button ripple"></div>
-    </div>
-  </dialog>
+    <dialog id="bg-sel-menu">
+      <div id="bg-sel-title-bar">
+      <div id="bg-sel-back"></div>
+      <div id="bg-sel-title"></div>
+      </div>
+      <div id="bg-sel-tiles"></div>
+      <div id="bg-sel-footer">
+        <label id="bg-daily-refresh" class="switch">
+          <input type="checkbox">
+          <span class="toggle"></span>
+        </label>
+        <div id="bg-sel-refresh-text"></div>
+        <div id="bg-sel-footer-cancel" class="bg-sel-footer-button ripple" tabindex="0"></div>
+        <div id="bg-sel-footer-done" class="bg-sel-footer-button ripple"></div>
+      </div>
+    </dialog>
 
     <dialog id="voice-overlay-dialog" class="overlay-dialog">
       <div id="voice-overlay" class="overlay-hidden">
@@ -136,6 +139,9 @@
         </div>
       </div>
     </dialog>
+
+    <iframe id="custom-links-edit" name="custom-links-edit"
+            src="chrome-search://most-visited/edit.html"></iframe>
   </template>
 </head>
 <body>

components/ntp_tiles/constants.cc

@@ -40,7 +40,7 @@ bool IsMDIconsEnabled() {
 #endif
 }
 
-bool IsMDCustomLinksEnabled() {
+bool IsCustomLinksEnabled() {
 #if !defined(OS_ANDROID) && !defined(OS_IOS)
   return base::FeatureList::IsEnabled(kNtpCustomLinks) ||
          base::FeatureList::IsEnabled(features::kExperimentalUi);

components/ntp_tiles/constants.h

@@ -40,7 +40,7 @@ extern const base::Feature kNtpCustomLinks;
 bool IsMDIconsEnabled();
 
 // Returns whether the custom links is enabled.
-bool IsMDCustomLinksEnabled();
+bool IsCustomLinksEnabled();
 
 }  // namespace ntp_tiles
 

components/ntp_tiles/most_visited_sites.cc

@@ -572,7 +572,7 @@ NTPTilesVector MostVisitedSites::InsertHomeTile(
 
 void MostVisitedSites::BuildCustomLinks(
     const std::vector<CustomLinksManager::Link>& links) {
-  DCHECK(IsMDCustomLinksEnabled());
+  DCHECK(IsCustomLinksEnabled());
 
   NTPTilesVector tiles;
   size_t num_tiles = std::min(links.size(), max_num_sites_);