[Desktop][PwdCheck] Use static size for triangle icon

Instead of using sizes relative to font sizes, use a static icon size of
32x32 (outer box of the halo). A static size is used for other icons as
well (most notably the favicons) and isn't subject to rounding errors
which cause "misalignments" by single pixels.

This also ensures that the spinner isn't distorted for reasonable font
sizes (for font sizes > 34, the entire layout is falling apart, so it's
not worth to even think about the slightly distorted spinner).
All default font sizes (Very Small to Very Large) and custom font sizes
with minimum font sizes aren't affected in any case anymore.

Screenshots in the first linked bug.

Bug: 1144629, 1145943, 1145931
Change-Id: I1a4222b92bd3a42615c36a01f1e3ad0cc5feadc3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2532584Reviewed-by: Jan Wilken Dörrie <jdoerrie@chromium.org>
Commit-Queue: Friedrich [CET] <fhorschig@chromium.org>
Cr-Commit-Position: refs/heads/master@{#826766}

chrome/browser/resources/settings/autofill_page/password_check.html

     <style include="cr-shared-style settings-shared iron-flex">
+      #iconContainer {
+        height: 24px;
+        line-height: 100%;
+        margin-inline-end: 20px;
+        padding: 4px;
+        width: 24px;
+      }
+      #iconContainer.warning-halo {
+        background: radial-gradient(circle 16px at 16px,
+                                    #FCE8E6 100%,
+                                    transparent 100%);
+      }
+
       iron-icon,
       #progressSpinner {
         --paper-spinner-stroke-width: 2px;
-        height: 1.6em;
-        padding-inline-end: 20px;
-        width: 1.6em;
+        height: 22px;
+        line-height: 100%;
+        padding: 0 1px 2px;
+        width: 22px;
       }
 
       iron-icon.has-security-issues {
         --iron-icon-fill-color: var(--google-red-600);
-        background: radial-gradient(circle 1.1em at 1.1em,
-                                    #FCE8E6 100%,
-                                    transparent 100%);
-        margin-inline-end: 16px;
-        margin-inline-start: -4px;
-        padding-bottom: 0.5em;
-        padding-inline-end: 0.4em;
-        padding-inline-start: 0.3em;
-        padding-top: 0.3em;
       }
 
       @media (prefers-color-scheme: dark) {
         iron-icon.has-security-issues {
           --iron-icon-fill-color: var(--google-red-refresh-300);
-          background: radial-gradient(circle 1.1em at 1.1em,
-                                    var(--google-grey-900) 100%,
-                                    transparent 100%);
+        }
+        #iconContainer.warning-halo {
+          background: radial-gradient(circle 16px at 16px,
+                                      var(--google-grey-900) 100%,
+                                      transparent 100%);
         }
       }
 
@@ -66,19 +73,21 @@
     <!-- The header showing progress or result of the check-->
     <div class="cr-row first two-line" id="securityCheckHeader">
       <!-- If the password check concluded, show only a status Icon. -->
-      <template is="dom-if" if="[[!isCheckInProgress_(status)]]">
-        <iron-icon class$="[[getStatusIconClass_(status, isSignedOut_,
-                            leakedPasswords, weakPasswords)]]"
-                   icon="[[getStatusIcon_(status, isSignedOut_, leakedPasswords,
-                            weakPasswords)]]">
-        </iron-icon>
-      </template>
+      <div id="iconContainer" class$="[[iconHaloClass_]]">
+        <template is="dom-if" if="[[!isCheckInProgress_(status)]]">
+          <iron-icon class$="[[getStatusIconClass_(status, isSignedOut_,
+                              leakedPasswords, weakPasswords)]]"
+                     icon="[[getStatusIcon_(status, isSignedOut_,
+                             leakedPasswords, weakPasswords)]]">
+          </iron-icon>
+        </template>
 
-      <!-- Show a loader instead of an icon if passwords are still checked. -->
-      <template is="dom-if" if="[[isCheckInProgress_(status)]]">
-        <paper-spinner-lite id="progressSpinner" active>
-        </paper-spinner-lite>
-      </template>
+        <!-- Show a loader instead of an icon while checking passwords. -->
+        <template is="dom-if" if="[[isCheckInProgress_(status)]]">
+          <paper-spinner-lite id="progressSpinner" active>
+          </paper-spinner-lite>
+        </template>
+      </div>
 
       <div class="flex cr-padded-text">
         <div id="titleRow">

chrome/browser/resources/settings/autofill_page/password_check.js

@@ -129,6 +129,13 @@ Polymer({
       computed: 'computeShowHideMenuTitle(activePassword_)',
     },
 
+    /** @private */
+    iconHaloClass_: {
+      type: String,
+      computed: 'computeIconHaloClass_(status, isSignedOut_, ' +
+          'leakedPasswords, weakPasswords)',
+    },
+
     /**
      * The ids of insecure credentials for which user clicked "Change Password"
      * button
@@ -422,6 +429,16 @@ Polymer({
                                                   'showCompromisedPassword');
   },
 
+  /**
+   * @return {string}
+   * @private
+   */
+  computeIconHaloClass_() {
+    return !this.isCheckInProgress_() && this.hasInsecureCredentials_() ?
+        'warning-halo' :
+        '';
+  },
+
   /**
    * Returns the icon (warning, info or error) indicating the check status.
    * @return {string}