[signin] Remove one of the avatars from the signin interception bubble

The bubble is being simplified. This CL removes one of the avatars, and
a follow-up will update the text.

Screenshots with various combinations of colors and modes:
https://screenshot.googleplex.com/b7edab3a-fbb3-482f-9c50-9e4704d20cc8.png
https://screenshot.googleplex.com/af86cce2-0b4f-40d2-b521-4584883249a6.png
https://screenshot.googleplex.com/f818aa03-62aa-4325-baef-d0ba3589c034.png
https://screenshot.googleplex.com/9dace8af-7e2f-4b79-84a2-10207270509b.png


Bug: 1076880
Change-Id: Ic36c42368d9820358fdb3b323b7e7dfd04fbef49
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2362929Reviewed-by: Monica Basta <msalama@chromium.org>
Commit-Queue: David Roger <droger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#799631}

chrome/browser/resources/signin/dice_web_signin_intercept/dice_web_signin_intercept_app.html

@@ -6,7 +6,6 @@
   }
 
   #header {
-    --avatar-position: 84px;
     background-color: var(--header-background-color);
     border-radius: 4px;
     color: var(--header-text-color);
@@ -26,18 +25,17 @@
     white-space: nowrap;
   }
 
-  .avatar-container {
+  #avatar-container {
     --avatar-image-width: 60px;
     --avatar-border: 2px;
     --avatar-size: calc(var(--avatar-image-width) + 2 * var(--avatar-border));
-    --avatar-radius: calc(var(--avatar-image-width)/2 + var(--avatar-border));
-    --avatar-overlap: 27px;
     height: var(--avatar-size);
+    left: calc(50% - var(--avatar-size)/2);
     position: absolute;
     width: var(--avatar-size);
   }
 
-  .avatar {
+  #avatar {
     /** The user avatar may be transparent, add a background */
     background-color: var(--md-background-color);
     border: var(--avatar-border) solid var(--md-background-color);
@@ -73,16 +71,6 @@
     width: var(--work-icon-size);
   }
 
-  #interceptedAvatar {
-    left: calc(50% - var(--avatar-radius) - var(--avatar-overlap));
-    /** Ensure the intercepted avatar is on top of the primary avatar */
-    z-index: 1;
-  }
-
-  #primaryAvatar {
-    left: calc(50% - var(--avatar-radius) + var(--avatar-overlap));
-  }
-
   #body {
     color: var(--cr-secondary-text-color);
     flex-grow: 1;
@@ -110,22 +98,14 @@
 
 <div id="header">
   <div id="headerText">[[interceptionParameters_.headerText]]</div>
-  <div class="avatar-container" id="interceptedAvatar">
-    <img class="avatar" id="interceptedAvatarImg"
+  <div id="avatar-container">
+    <img id="avatar"
         src="[[interceptionParameters_.interceptedAccount.pictureUrl]]">
-    <div class="work-badge" id="interceptedBadge"
+    <div class="work-badge" id="badge"
         hidden="[[!interceptionParameters_.interceptedAccount.isManaged]]">
       <iron-icon class="icon" icon="signin:business"></iron-icon>
     </div>
   </div>
-  <div class="avatar-container" id="primaryAvatar">
-    <img class="avatar" id="primaryAvatarImg"
-        src="[[interceptionParameters_.primaryAccount.pictureUrl]]">
-    <div class="work-badge" id="primaryBadge"
-        hidden="[[!interceptionParameters_.primaryAccount.isManaged]]">
-      <iron-icon class="icon" icon="signin:business"></iron-icon>
-    </div>
-  </div>
 </div>
 
 <div id="body">

chrome/browser/resources/signin/dice_web_signin_intercept/dice_web_signin_intercept_app.js

@@ -71,6 +71,5 @@ Polymer({
   handleParametersChanged_(parameters) {
     this.interceptionParameters_ = parameters;
     this.notifyPath('interceptionParameters_.interceptedAccount.isManaged');
-    this.notifyPath('interceptionParameters_.primaryAccount.isManaged');
   },
 });

chrome/browser/resources/signin/dice_web_signin_intercept/dice_web_signin_intercept_browser_proxy.js

@@ -23,7 +23,6 @@ export let AccountInfo;
  *   bodyTitle: string,
  *   bodyText: string,
  *   interceptedAccount: AccountInfo,
- *   primaryAccount: AccountInfo,
  * }}
  */
 export let InterceptionParameters;

chrome/browser/ui/webui/signin/dice_web_signin_intercept_handler.cc

@@ -158,7 +158,6 @@ base::Value DiceWebSigninInterceptHandler::GetInterceptionParametersValue() {
   parameters.SetStringKey("bodyText", GetBodyText());
   parameters.SetKey("interceptedAccount",
                     GetAccountInfoValue(intercepted_account()));
-  parameters.SetKey("primaryAccount", GetAccountInfoValue(primary_account()));
   return parameters;
 }
 

chrome/test/data/webui/signin/dice_web_signin_intercept_test.js

@@ -28,10 +28,6 @@ suite('DiceWebSigninInterceptTest', function() {
   const AVATAR_URL_1 = 'chrome://theme/IDR_PROFILE_AVATAR_1';
   /** @type {string} */
   const AVATAR_URL_2 = 'chrome://theme/IDR_PROFILE_AVATAR_2';
-  /** @type {string} */
-  const AVATAR_URL_3 = 'chrome://theme/IDR_PROFILE_AVATAR_3';
-  /** @type {string} */
-  const AVATAR_URL_4 = 'chrome://theme/IDR_PROFILE_AVATAR_4';
 
   setup(function() {
     browserProxy = new TestDiceWebSigninInterceptBrowserProxy();
@@ -94,43 +90,33 @@ suite('DiceWebSigninInterceptTest', function() {
       bodyTitle: 'new_body_title',
       bodyText: 'new_body_text',
       interceptedAccount: {isManaged: false, pictureUrl: AVATAR_URL_1},
-      primaryAccount: {isManaged: false, pictureUrl: AVATAR_URL_2}
     });
     checkTextValues('new_header_text', 'new_body_title', 'new_body_text');
   });
 
   test('Avatars', function() {
     // Consumer avatars.
-    checkImageUrl('#interceptedAvatarImg', AVATAR_URL_1);
-    checkImageUrl('#primaryAvatarImg', AVATAR_URL_2);
-    assertFalse(isChildVisible(app, '#interceptedBadge'));
-    assertFalse(isChildVisible(app, '#primaryBadge'));
+    checkImageUrl('#avatar', AVATAR_URL_1);
+    assertFalse(isChildVisible(app, '#badge'));
 
     const parameters = {
       headerText: 'header_text',
       bodyTitle: 'body_title',
       bodyText: 'body_text',
-      interceptedAccount: {isManaged: false, pictureUrl: AVATAR_URL_3},
-      primaryAccount: {isManaged: false, pictureUrl: AVATAR_URL_4}
+      interceptedAccount: {isManaged: false, pictureUrl: AVATAR_URL_2},
     };
 
     // Update urls.
     fireParametersChanged(parameters);
-    checkImageUrl('#interceptedAvatarImg', AVATAR_URL_3);
-    checkImageUrl('#primaryAvatarImg', AVATAR_URL_4);
+    checkImageUrl('#avatar', AVATAR_URL_2);
 
     // Update isManaged for intercepted account.
     parameters.interceptedAccount.isManaged = true;
     fireParametersChanged(parameters);
-    assertTrue(isChildVisible(app, '#interceptedBadge'));
-    assertFalse(isChildVisible(app, '#primaryBadge'));
-
-    // Update isManaged for primary account.
+    assertTrue(isChildVisible(app, '#badge'));
     parameters.interceptedAccount.isManaged = false;
-    parameters.primaryAccount.isManaged = true;
     fireParametersChanged(parameters);
-    assertFalse(isChildVisible(app, '#interceptedBadge'));
-    assertTrue(isChildVisible(app, '#primaryBadge'));
+    assertFalse(isChildVisible(app, '#badge'));
   });
 
 });

chrome/test/data/webui/signin/test_dice_web_signin_intercept_browser_proxy.js

@@ -16,7 +16,6 @@ export class TestDiceWebSigninInterceptBrowserProxy extends TestBrowserProxy {
       bodyTitle: '',
       bodyText: '',
       interceptedAccount: {isManaged: false, pictureUrl: ''},
-      primaryAccount: {isManaged: false, pictureUrl: ''}
     };
   }