Use slot-based syntax in Assistant opt-in UI

Bug: 955194
Change-Id: Ib2a14bd7b1fb312c0d4d91fd3ecceb9ac42c482d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2044084
Auto-Submit: Denis Kuznetsov [CET] <antrim@chromium.org>
Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Commit-Queue: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#743145}

chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.js

@@ -111,12 +111,12 @@ Polymer({
       zippy.setAttribute('toggle-style', true);
       zippy.id = 'zippy-' + data['id'];
       var title = document.createElement('div');
-      title.className = 'zippy-title';
+      title.slot = 'title';
       title.textContent = data['title'];
       zippy.appendChild(title);
 
       var toggle = document.createElement('cr-toggle');
-      toggle.className = 'zippy-toggle';
+      toggle.slot = 'toggle';
       toggle.id = 'toggle-' + data['id'];
       if (data['defaultEnabled']) {
         toggle.setAttribute('checked', '');
@@ -127,7 +127,7 @@ Polymer({
       zippy.appendChild(toggle);
 
       var description = document.createElement('div');
-      description.className = 'zippy-description';
+      description.slot = 'content';
       description.textContent = data['description'];
       if (data['legalText']) {
         var legalText = document.createElement('p');

chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.js

@@ -154,17 +154,17 @@ Polymer({
       zippy.setAttribute('expand-style', true);
 
       var title = document.createElement('div');
-      title.className = 'zippy-title';
+      title.slot = 'title';
       title.innerHTML = this.sanitizer_.sanitizeHtml(data['title']);
       zippy.appendChild(title);
 
       var description = document.createElement('div');
-      description.className = 'zippy-description';
+      description.slot = 'content';
       description.innerHTML = this.sanitizer_.sanitizeHtml(data['description']);
       zippy.appendChild(description);
 
       var additional = document.createElement('div');
-      additional.className = 'zippy-additional';
+      additional.slot = 'additional';
       additional.innerHTML =
           this.sanitizer_.sanitizeHtml(data['additionalInfo']);
       zippy.appendChild(additional);

chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.js

@@ -297,17 +297,17 @@ Polymer({
       zippy.setAttribute('popup-style', true);
 
       var title = document.createElement('div');
-      title.className = 'zippy-title';
+      title.slot = 'title';
       title.innerHTML = this.sanitizer_.sanitizeHtml(data['title']);
       zippy.appendChild(title);
 
       var description = document.createElement('div');
-      description.className = 'zippy-description';
+      description.slot = 'content';
       description.innerHTML = this.sanitizer_.sanitizeHtml(data['description']);
       description.innerHTML += ' ';
 
       var learnMoreLink = document.createElement('a');
-      learnMoreLink.className = 'learn-more-link';
+      learnMoreLink.slot = 'content';
       learnMoreLink.textContent = data['popupLink'];
       learnMoreLink.setAttribute('href', 'javascript:void(0)');
       learnMoreLink.onclick = function(title, additionalInfo, focus) {

chrome/browser/resources/chromeos/assistant_optin/setting_zippy.html

@@ -20,17 +20,17 @@
           </div>
           <div>
             <div class="sub-title">
-              <content select=".zippy-title"></content>
+              <slot name="title"></slot>
             </div>
             <div class="content">
-              <content select=".zippy-description, .learn-more-link"></content>
+              <slot name="content"></slot>
             </div>
           </div>
         </div>
       </cr-expand-button>
       <iron-collapse opened="[[expanded_]]">
         <div class="content indent">
-          <content select=.zippy-additional></content>
+          <slot name="additional"></slot>
         </div>
       </iron-collapse>
     </template>
@@ -42,14 +42,14 @@
         </div>
         <div>
           <div class="sub-title">
-            <content select=".zippy-title"></content>
+            <slot name="title"></slot>
           </div>
           <div id="description" class="content">
-            <content select=".zippy-description, .learn-more-link"></content>
+            <slot name="content"></slot>
           </div>
         </div>
         <div class="toggle">
-          <content select=".zippy-toggle" hidden="[[!toggleStyle]]"></content>
+          <slot name="toggle"></slot>
         </div>
       </div>
     </template>