[b4p/settings] Add avatars and site favicons to moving dialog

Implementation: https://screenshot.googleplex.com/4Q2LOWL28un
Mock: https://screenshot.googleplex.com/iNV6JAtE9t9

The CL also makes a change to <site-favicon> to allow embedding it as a
round icon.

Bug: 1102294
Change-Id: I70b702a1404b7c20bd0df65f7b0db06d3c999d13
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2287297Reviewed-by: Jan Wilken Dörrie <jdoerrie@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Friedrich [CET] <fhorschig@chromium.org>
Commit-Queue: Victor Vianna <victorvianna@google.com>
Cr-Commit-Position: refs/heads/master@{#796317}

chrome/browser/resources/settings/autofill_page/BUILD.gn

@@ -230,8 +230,10 @@ js_library("passwords_list_handler") {
 
 js_library("password_move_to_account_dialog") {
   deps = [
+    ":avatar_icon",
     ":multi_store_password_ui_entry",
     ":password_manager_proxy",
+    "//third_party/polymer/v3_0/components-chromium/iron-icon",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
     "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",

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

+<style include="cr-shared-style">
+   :host {
+      --computer-icon-padding-top: 11px;
+      --computer-icon-padding-bottom: 10px;
+      --computer-icon-padding-sides: 8px;
+      --hairline-border: 1px;
+      --outer-icon-size: 48px;
+   }
+
+  cr-dialog::part(body-container) {
+    height: 124px;
+  }
+
+  .icon-container {
+    height: var(--outer-icon-size);
+    position: relative;
+    width: var(--outer-icon-size);
+  }
+
+  settings-avatar-icon {
+    border: var(--hairline-border) solid var(--google-grey-refresh-100);
+    border-radius: 50%;
+    display: flex;
+    flex-shrink: 0;
+    height: calc(var(--outer-icon-size) - 2 * var(--hairline-border));
+    width: calc(var(--outer-icon-size) - 2 * var(--hairline-border));
+  }
+
+  #computerIcon {
+    --iron-icon-height: calc(var(--outer-icon-size) - 2 * var(--hairline-border)
+        - var(--computer-icon-padding-top)
+        - var(--computer-icon-padding-bottom));
+    --iron-icon-width: calc(var(--outer-icon-size) - 2 * var(--hairline-border)
+        - 2 * var(--computer-icon-padding-sides));
+    border: var(--hairline-border) solid var(--google-grey-refresh-100);
+    border-radius: 50%;
+    flex-shrink: 0;
+    padding-bottom: var(--computer-icon-padding-bottom);
+    padding-inline-end: var(--computer-icon-padding-sides);
+    padding-inline-start: var(--computer-icon-padding-sides);
+    padding-top: var(--computer-icon-padding-top);
+  }
+
+  site-favicon {
+    border-radius: 50%;
+    bottom: 0;
+    box-shadow: var(--cr-elevation-1);
+    position: absolute;
+    right: 0;
+  }
+
+  .cr-row {
+    display: flex;
+    justify-content: center;
+  }
+
+  #chevronIcon {
+    margin: 0 16px;
+  }
+
+  :host-context([dir=rtl]) #chevronIcon {
+    transform: scaleX(-1);
+  }
+
+  #dialogMessage {
+    margin-bottom: 24px;
+  }
+</style>
 <cr-dialog id="dialog" close-text="$i18n{close}">
   <div slot="title">$i18n{passwordMoveToAccountDialogTitle}</div>
   <div slot="body">
-    <div>
+    <div id="dialogMessage">
       $i18n{passwordMoveToAccountDialogBody}
     </div>
+    <div class="cr-row first">
+      <div class="icon-container">
+        <iron-icon id="computerIcon" icon="cr:computer">
+        </iron-icon>
+        <site-favicon url="[[passwordToMove.urls.link]]">
+        </site-favicon>
+      </div>
+      <iron-icon id="chevronIcon" icon="cr:chevron-right"></iron-icon>
+      <div class="icon-container">
+        <settings-avatar-icon></settings-avatar-icon>
+        <site-favicon url="[[passwordToMove.urls.link]]">
+        </site-favicon>
+      </div>
+    </div>
   </div>
   <div slot="button-container">
     <cr-button class="cancel-button" id="cancelButton"

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

@@ -9,6 +9,10 @@
 
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
+import 'chrome://resources/cr_elements/shared_style_css.m.js';
+import './avatar_icon.js';
+import '../site_favicon.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';

chrome/browser/resources/settings/site_favicon.html

@@ -7,6 +7,7 @@
       #favicon {
         background-repeat: no-repeat;
         background-size: contain;
+        border-radius: inherit;
         display: block;
         height: var(--site-favicon-height);
         width: var(--site-favicon-width);