Safety check UI: collapse for children elements

* Adds the safety check collapse for safety check children elements
* Adds common styling used by multiple children

Bug: 1015841
Change-Id: I8dfb3d325d4134d7804155ee3d1b8af822c44cdb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2070239
Commit-Queue: Rainhard Findling <rainhard@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#744613}

chrome/browser/resources/settings/safety_check_page/safety_check_page.html

@@ -5,6 +5,7 @@
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.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="../i18n_setup.html">
 <link rel="import" href="../prefs/prefs_behavior.html">
@@ -17,9 +18,9 @@
     <!-- // TODO(crbug.com/1010001): Release block M82 beta:
         Support dark mode. -->
     <style include="settings-shared">
-      .icon-blue {
-        fill: var(--google-blue-600);
-      }
+      #safetyCheckCollapse .list-item.selected {
+         min-height: var(--settings-row-two-line-min-height);
+       }
 
       iron-icon {
         display: flex;
@@ -27,6 +28,14 @@
         padding-inline-end: var(--cr-icon-button-margin-start);
         width: var(--cr-link-row-icon-width, var(--cr-icon-size));
       }
+
+      .icon-blue {
+        fill: var(--google-blue-600);
+      }
+
+      .icon-red {
+        fill: var(--google-red-600);
+      }
     </style>
     <div class="settings-box first two-line">
       <iron-icon icon="[[getParentIcon_(parentStatus_)]]"
@@ -36,14 +45,15 @@
       <div class="start settings-box-text" no-search>
         [[getParentPrimaryLabelText_(parentStatus_)]]
       </div>
-      <template is="dom-if" if="[[showParentButton_(parentStatus_)]]" restamp>
+      <template is="dom-if" if="[[shouldShowParentButton_(parentStatus_)]]"
+          restamp>
         <div class="separator"></div>
         <cr-button id="safetyCheckParentButton"
             on-click="onRunSafetyCheckClick_" no-search>
           $i18n{safetyCheckParentButton}
         </cr-button>
       </template>
-      <template is="dom-if" if="[[showParentIconButton_(parentStatus_)]]"
+      <template is="dom-if" if="[[shouldShowParentIconButton_(parentStatus_)]]"
           restamp>
         <div class="separator"></div>
         <cr-icon-button id="safetyCheckParentIconButton"
@@ -52,6 +62,9 @@
         </cr-icon-button>
       </template>
     </div>
+    <iron-collapse id="safetyCheckCollapse"
+        opened="[[shouldShowChildren_(parentStatus_)]]">
+    </iron-collapse>
   </template>
   <script src="safety_check_page.js"></script>
 </dom-module>

chrome/browser/resources/settings/safety_check_page/safety_check_page.js

@@ -155,27 +155,22 @@ Polymer({
         this.updatesStatus_ = status;
         break;
       case SafetyCheckComponent.PASSWORDS:
-        this.passwordsStatus_ = status;
         this.passwordsCompromisedCount_ = event['passwordsCompromised'];
+        this.passwordsStatus_ = status;
         break;
       case SafetyCheckComponent.SAFE_BROWSING:
         this.safeBrowsingStatus_ = status;
         break;
       case SafetyCheckComponent.EXTENSIONS:
-        this.extensionsStatus_ = status;
         this.badExtensionsCount_ = event['badExtensions'];
+        this.extensionsStatus_ = status;
         break;
       default:
         assertNotReached();
     }
 
     // If all children elements received updates: update parent element.
-    if (this.updatesStatus_ != settings.SafetyCheckUpdatesStatus.CHECKING &&
-        this.passwordsStatus_ != settings.SafetyCheckPasswordsStatus.CHECKING &&
-        this.safeBrowsingStatus_ !=
-            settings.SafetyCheckSafeBrowsingStatus.CHECKING &&
-        this.extensionsStatus_ !=
-            settings.SafetyCheckExtensionsStatus.CHECKING) {
+    if (this.areAllChildrenStatesSet_()) {
       this.parentStatus_ = ParentStatus.AFTER;
     }
   },
@@ -184,7 +179,19 @@ Polymer({
    * @private
    * @return {boolean}
    */
-  showParentButton_: function() {
+  areAllChildrenStatesSet_: function() {
+    return this.updatesStatus_ != settings.SafetyCheckUpdatesStatus.CHECKING &&
+        this.passwordsStatus_ != settings.SafetyCheckPasswordsStatus.CHECKING &&
+        this.safeBrowsingStatus_ !=
+        settings.SafetyCheckSafeBrowsingStatus.CHECKING &&
+        this.extensionsStatus_ != settings.SafetyCheckExtensionsStatus.CHECKING;
+  },
+
+  /**
+   * @private
+   * @return {boolean}
+   */
+  shouldShowParentButton_: function() {
     return this.parentStatus_ == ParentStatus.BEFORE;
   },
 
@@ -192,7 +199,7 @@ Polymer({
    * @private
    * @return {boolean}
    */
-  showParentIconButton_: function() {
+  shouldShowParentIconButton_: function() {
     return this.parentStatus_ == ParentStatus.AFTER;
   },
 
@@ -254,11 +261,17 @@ Polymer({
       case ParentStatus.BEFORE:
       case ParentStatus.CHECKING:
         return 'icon-blue';
-      case ParentStatus.AFTER:
-        return '';
       default:
-        assertNotReached();
+        return '';
     }
   },
+
+  /**
+   * @private
+   * @return {boolean}
+   */
+  shouldShowChildren_: function() {
+    return this.parentStatus_ != ParentStatus.BEFORE;
+  },
 });
 })();

chrome/test/data/webui/settings/safety_check_page_test.js

@@ -17,13 +17,17 @@ suite('SafetyCheckUiTests', function() {
     page.remove();
   });
 
-  test('parentBeforeCheckUiTest', function() {
+  /** Tests parent element and collapse. */
+  test('beforeCheckUiTest', function() {
     // Only the text button is present.
     assertTrue(!!page.$$('#safetyCheckParentButton'));
     assertFalse(!!page.$$('#safetyCheckParentIconButton'));
+    // Collapse is not opened.
+    assertFalse(page.$$('#safetyCheckCollapse').opened);
   });
 
-  test('parentDuringCheckUiTest', function() {
+  /** Tests parent element and collapse. */
+  test('duringCheckUiTest', function() {
     // User starts check.
     page.$$('#safetyCheckParentButton').click();
 
@@ -31,9 +35,12 @@ suite('SafetyCheckUiTests', function() {
     // No button is present.
     assertFalse(!!page.$$('#safetyCheckParentButton'));
     assertFalse(!!page.$$('#safetyCheckParentIconButton'));
+    // Collapse is opened.
+    assertTrue(page.$$('#safetyCheckCollapse').opened);
   });
 
-  test('parentAfterCheckUiTest', function() {
+  /** Tests parent element and collapse. */
+  test('afterCheckUiTest', function() {
     // User starts check.
     page.$$('#safetyCheckParentButton').click();
 
@@ -60,5 +67,7 @@ suite('SafetyCheckUiTests', function() {
     // Only the icon button is present.
     assertFalse(!!page.$$('#safetyCheckParentButton'));
     assertTrue(!!page.$$('#safetyCheckParentIconButton'));
+    // Collapse is opened.
+    assertTrue(page.$$('#safetyCheckCollapse').opened);
   });
 });