Safety check UI: button colors reflect call-to-action

* Safety check buttons are now either normal (white background)
  or action buttons (blue background).
* This synchronizes the safety check UI with the latest UI mocks,
  which differentiate different levels of calls-to-action by their
  importance.

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

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

@@ -49,7 +49,7 @@
       <template is="dom-if" if="[[shouldShowParentButton_(parentStatus_)]]"
           restamp>
         <div class="separator"></div>
-        <cr-button id="safetyCheckParentButton"
+        <cr-button id="safetyCheckParentButton" class="action-button"
             on-click="onRunSafetyCheckClick_" no-search>
           $i18n{safetyCheckParentButton}
         </cr-button>
@@ -79,7 +79,7 @@
         <template is="dom-if"
             if="[[shouldShowUpdatesButton_(updatesStatus_)]]" restamp>
           <div class="separator"></div>
-          <cr-button id="safetyCheckUpdatesButton"
+          <cr-button id="safetyCheckUpdatesButton" class="action-button"
               on-click="onSafetyCheckUpdatesButtonClicked_" no-search>
             $i18n{aboutRelaunch}
           </cr-button>
@@ -106,6 +106,7 @@
             if="[[shouldShowPasswordsButton_(passwordsStatus_)]]" restamp>
           <div class="separator"></div>
           <cr-button id="safetyCheckPasswordsButton"
+              class$="[[getPasswordsButtonClass_(passwordsStatus_)]]"
               on-click="onPasswordsButtonClick_" no-search>
             [[getPasswordsButtonText_(passwordsStatus_)]]
           </cr-button>
@@ -126,6 +127,7 @@
             if="[[shouldShowExtensionsButton_(extensionsStatus_)]]" restamp>
           <div class="separator"></div>
           <cr-button id="safetyCheckExtensionsButton"
+              class$="[[getExtensionsButtonClass_(extensionsStatus_)]]"
               on-click="onSafetyCheckExtensionsButtonClicked_" no-search>
             $i18n{safetyCheckExtensionsButton}
           </cr-button>

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

@@ -503,6 +503,19 @@ Polymer({
     }
   },
 
+  /**
+   * @private
+   * @return {string}
+   */
+  getPasswordsButtonClass_: function() {
+    switch (this.passwordsStatus_) {
+      case settings.SafetyCheckPasswordsStatus.COMPROMISED:
+        return 'action-button';
+      default:
+        return '';
+    }
+  },
+
   /** @private */
   onPasswordsButtonClick_: function() {
     switch (this.passwordsStatus_) {
@@ -636,5 +649,18 @@ Polymer({
         assertNotReached();
     }
   },
+
+  /**
+   * @private
+   * @return {string}
+   */
+  getExtensionsButtonClass_: function() {
+    switch (this.extensionsStatus_) {
+      case settings.SafetyCheckExtensionsStatus.BAD_EXTENSIONS_ON:
+        return 'action-button';
+      default:
+        return '';
+    }
+  },
 });
 })();