Chrome Cleanup WebUI: small re-layout of the card for polish.

Moves the details text in with the title and the remove button.
Files to remove list now is a toggle instead of a expand-once section.

Bug: 690020
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I0301598d48ce2734f9bda0b7a96993cdc2040978
Reviewed-on: https://chromium-review.googlesource.com/576382
Commit-Queue: proberge <proberge@chromium.org>
Reviewed-by: Tommy Li <tommycli@chromium.org>
Cr-Commit-Position: refs/heads/master@{#488142}

chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/util.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
@@ -17,6 +19,7 @@
   <template>
     <style include="settings-shared">
       #files-to-remove-container {
+        padding: 0 var(--settings-box-row-padding);
         /* Use the full available width for file paths to avoid inconsistent
          *  line breaks when zooming in or out */
         width: calc(var(--settings-card-max-width) -
@@ -24,12 +27,18 @@
       }
 
       #files-to-remove-list {
+        margin: 0;
         word-break: break-all;
       }
 
+      #powered-by-settings-box {
+        min-height: 1em;
+      }
+
       #powered-by-container {
         align-items: center;
         display: flex;
+        min-height: var(--settings-row-min-height);
         width: 100%;
       }
 
@@ -41,14 +50,6 @@
         height: 13px;
       }
 
-      #show-files-button {
-        --paper-button-ink-color: white;
-        /* Left-align the text of the button with the rest of the card's text */
-        -webkit-margin-start: calc(var(--cr-button-edge-spacing) * -1);
-        color: var(--google-blue-700);
-        text-transform: inherit;
-      }
-
       #status-icon {
         height: 24px;
         width: 24px;
@@ -70,8 +71,15 @@
       .status-icon-warning {
         --iron-icon-fill-color: var(--paper-red-700);
       }
+
+      .top-aligned-settings-box {
+        align-items: start;
+        /* override settings-box min-height since we use vertical padding */
+        min-height: 0;
+        padding: 15px var(--settings-box-row-padding);
+      }
     </style>
-    <div class="settings-box first two-line">
+    <div class$="settings-box first [[getTopSettingsBoxClass_(showDetails_)]]">
       <div class="status-icon-container">
         <paper-spinner id="cleaning-spinner" active="[[isRemoving_]]"
             hidden="[[!isRemoving_]]">
@@ -81,7 +89,15 @@
             id="status-icon">
         </iron-icon>
       </div>
-      <div class="start">[[title_]]</div>
+      <div class="start">
+        <div>[[title_]]</div>
+        <div class="secondary" hidden="[[!showDetails_]]">
+          $i18n{chromeCleanupExplanation}
+          <a href="$i18n{chromeCleanupLearnMoreUrl}" target="_blank">
+            $i18n{learnMore}
+          </a>
+        </div>
+      </div>
       <template is="dom-if" if="[[showActionButton_]]">
         <div class="separator"></div>
         <paper-button id="action-button" class="primary-button"
@@ -90,16 +106,7 @@
         </paper-button>
       </template>
     </div>
-    <div id="details-container"
-         class="settings-box two-line" hidden="[[!showDetails_]]">
-      <div>
-        $i18n{chromeCleanupExplanation}
-        <a href="$i18n{chromeCleanupLearnMoreUrl}" target="_blank">
-          $i18n{learnMore}
-        </a>
-      </div>
-    </div>
-    <div class="settings-box continuation" hidden="[[!showLogsPermission_]]">
+    <div class="settings-box" hidden="[[!showLogsPermission_]]">
       <settings-toggle-button class="start"
               id="chromeCleanupLogsUploadControl"
               label="$i18n{chromeCleanupLogsUploadPermission}"
@@ -107,26 +114,30 @@
               on-settings-boolean-control-change="changeLogsPermission_">
       </settings-toggle-button>
     </div>
-    <div class="settings-box" hidden="[[!showDetails_]]">
-      <div class="start" hidden="[[showFilesToRemove_]]">
-        <paper-button id="show-files-button" on-tap="showFiles_">
+    <div id="show-files-button" class="settings-box" actionable on-tap="
+        toggleExpandButton_" hidden="[[!showDetails_]]">
+      <div class="start">
         $i18n{chromeCleanupLinkShowFiles}
-        </paper-button>
       </div>
-      <div id="files-to-remove-container" hidden="[[!showFilesToRemove_]]">
+      <cr-expand-button expanded="{{showFilesToRemove_}}"
+          alt="$i18n{chromeCleanupLinkShowFiles}">
+      </cr-expand-button>
+    </div>
+    <iron-collapse opened="[[showFilesToRemove_]]">
+      <div id="files-to-remove-container">
         <ul id="files-to-remove-list" class="secondary">
           <template is="dom-repeat" items="[[filesToRemove_]]" as="fileName">
             <li>[[fileName]]</li>
           </template>
         </ul>
       </div>
-    </div>
-    <div class="settings-box"
-        hidden="[[!showPoweredBy_(showFilesToRemove_, isPartnerPowered_)]]">
-      <div id="powered-by-container" class="secondary">
+      <div id="powered-by-settings-box" class="settings-box continuation">
+        <div id="powered-by-container" class="secondary"
+            hidden="[[!isPartnerPowered_]]">
           $i18nRaw{chromeCleanupPoweredByHtml}
         </div>
       </div>
+    </iron-collapse>
   </template>
   <script src="chrome_cleanup_page.js"></script>
 </dom-module>

chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.js

@@ -156,12 +156,25 @@ Polymer({
     listenOnce(this, 'transitionend', this.doAction_.bind(this));
   },
 
+  getTopSettingsBoxClass_: function(showDetails) {
+    return showDetails ? 'top-aligned-settings-box' : 'two-line';
+  },
+
   /**
-   * Enables presenting the list of files to be removed by Chrome Cleanup.
+   * Toggles the expand button within the element being listened to.
+   * @param {!Event} e
    * @private
    */
-  showFiles_: function() {
-    this.showFilesToRemove_ = true;
+  toggleExpandButton_: function(e) {
+    // The expand button handles toggling itself.
+    var expandButtonTag = 'CR-EXPAND-BUTTON';
+    if (e.target.tagName == expandButtonTag)
+      return;
+
+    /** @type {!CrExpandButtonElement} */
+    var expandButton = e.currentTarget.querySelector(expandButtonTag);
+    assert(expandButton);
+    expandButton.expanded = !expandButton.expanded;
   },
 
   /**

chrome/browser/resources/settings/chrome_cleanup_page/compiled_resources2.gyp

@@ -14,6 +14,7 @@
     {
       'target_name': 'chrome_cleanup_page',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/cr_expand_button/compiled_resources2.gyp:cr_expand_button',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',