Migrate the one-time notice into the MD settings CBD dialog

chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html

Index: chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
diff --git a/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html b/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
index e5d1268ea3ee007cf9eaa671fbcf4b949d291128..e4a5c90121b5f6f67685c26e413a82050ece72db 100644
--- a/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
+++ b/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
@@ -5,6 +5,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
 <link rel="import" href="/i18n_setup.html">
 <link rel="import" href="/clear_browsing_data_dialog/clear_browsing_data_browser_proxy.html">
+<link rel="import" href="/clear_browsing_data_dialog/other_forms_of_browsing_history_notice.html">
 <link rel="import" href="/controls/settings_checkbox.html">
 <link rel="import" href="/controls/settings_dropdown_menu.html">
 <link rel="import" href="/icons.html">
@@ -86,7 +87,10 @@
       }
     </style>
 
-    <cr-dialog id="dialog">
+    <!-- #notice correctly places its own backdrop above #dialog and under
+         itself, so when it is shown, #dialog should not use backdrop. -->
+    <cr-dialog id="dialog"
+        with-backdrop="[[!showOtherFormsOfBrowsingHistoryNotice_]]">

[dschuyler, 2016/06/25 01:34:54]

The length of the names, such as 
showOtherFormsOfBrowsingHistoryNotice_
is more to mentally parse than I think
is comfortable. Is there some way to 
shorten the long-ish names used in this
CL (not just this one place)?

[msramek, 2016/06/27 15:24:59]

Done.

I have been struggling with this since the very beginning of the project.

1. "history notice(s)" kinda implies it's about the browsing history checkbox.

2. "footer notice" and "dialog notice" both collide for different reasons. There
is other information in the footer. This is a dialog in a dialog, so which one
does "dialog" refer to?

Let me call it "history deletion dialog", since it's a dialog that pops up after
history deletion. That's what I used on the C++ side, so it's at least going to
be consistent. I'll rename the new element that way as well.

I also shortened a few other things, where possible...

       <div class="title">$i18n{clearBrowsingData}</div>
       <div class="body">
         <div class="row">
@@ -163,6 +167,13 @@
         </div>
       </div>
     </cr-dialog>
+
+    <template is="dom-if" if="[[showOtherFormsOfBrowsingHistoryNotice_]]"
+        restamp>
+      <settings-other-forms-of-browsing-history-notice id="notice"
+          on-closed="onOtherFormsOfBrowsingHistoryNoticeClose_">
+      </settings-other-forms-of-browsing-history-notice>
+    </template>
   </template>
   <script src="clear_browsing_data_dialog.js"></script>
 </dom-module>