[ProfilePicker]: Add enterprise badge for managed accounts.

This CL shows 'Enterprise' icon for the profiles with managed primary
account.

Screenshot:
https://drive.google.com/file/d/1bFBxKj8dwOIgmWxXjMU_wq2MBCg4pYkv/view?usp=sharing
https://drive.google.com/file/d/1m6kwH6cLUHlJzDFDmjc0WfoXhyOqGTJ_/view?usp=sharing

Bug: 1063856
Change-Id: I705a2e13528c85b2448f9efc5e699ca1b19bbb14
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2366902
Commit-Queue: Monica Basta <msalama@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#801526}

chrome/browser/resources/signin/profile_picker/manage_profiles_browser_proxy.js

@@ -12,6 +12,7 @@ import {addSingletonGetter, sendWithPromise} from 'chrome://resources/js/cr.m.js
  *   isSyncing: boolean,
  *   gaiaName: string,
  *   userName: string,
+ *   isManaged: boolean,
  *   avatarIcon: string,
  * }}
  */

chrome/browser/resources/signin/profile_picker/profile_card.html

 <style include="profile-picker-shared">
   cr-button {
-    background-color: rgb(248, 249, 250);
+    --card-background-color: var(--md-background-color);
+    background-color: var(--card-background-color);
     border: none;
     border-radius: inherit;
     box-shadow: none;
@@ -10,27 +11,80 @@
     width: inherit;
   }
 
-  @media (prefers-color-scheme: dark) {
-    cr-button {
-      background-color: var(--google-grey-800);
-    }
-  }
-
   :host-context(.focus-outline-visible) cr-button:focus {
     box-shadow: 0 0 0 2px rgba(var(--google-blue-600-rgb), .4);
   }
 
   .profile-avatar {
     border-radius: 37px;
+    flex-shrink: 0;
     height: var(--avatar-icon-size);
     width: var(--avatar-icon-size);
   }
+
+  #avatarContainer {
+    height: var(--avatar-icon-size);
+    position: relative;
+  }
+
+  #iconContainer {
+    --iron-icon-height: 18px;
+    --iron-icon-width: 24px;
+    --business-icon-size: 24px;
+    --business-icon-border-size: 2px;
+    align-items: center;
+    background-color: white;
+    border: var(--business-icon-border-size) solid var(--card-background-color);
+    border-radius: 50%;
+    box-shadow: 0 0 2px rgba(60, 64, 67, 0.12), 0 0 6px rgba(60, 64, 67, 0.15);
+    display: flex;
+    height: var(--business-icon-size);
+    position: absolute;
+    right: -6px;
+    top: calc(var(--avatar-icon-size) - var(--business-icon-size)
+      - var(--business-icon-border-size));
+    width: var(--business-icon-size);
+  }
+
+  :host-context([dir='rtl']) #iconContainer {
+    left: -6px;
+    right: initial;
+  }
+
+  #iconContainer[hidden] {
+    display: none;
+  }
+
+  iron-icon {
+    --iron-icon-fill-color: var(--google-grey-refresh-700);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    cr-button {
+      --card-background-color: var(--google-grey-800);
+    }
+
+    #iconContainer {
+      background-color: var(--md-background-color);
+      box-shadow: 0 0 2px rgba(60, 64, 67, 0.12), 0 0 6px
+        rgba(60, 64, 67, 0.15);
+    }
+
+    iron-icon {
+      --iron-icon-fill-color: var(--google-grey-500);
+    }
+  }
 </style>
 
 <cr-button on-click="onProfileClick_">
   <profile-card-menu profile-state="[[profileState]]"></profile-card-menu>
   <!-- TODO(msalama): Implement editing local profile name in place -->
   <div class="profile-card-info">[[profileState.localProfileName]]</div>
+  <div id="avatarContainer">
     <img class="profile-avatar" alt="" src="[[profileState.avatarIcon]]">
+    <div id="iconContainer" hidden="[[!profileState.isManaged]]">
+      <iron-icon icon="signin:business"></iron-icon>
+    </div>
+  </div>
   <div class="profile-card-info">[[profileState.gaiaName]]</div>
 </cr-button>

chrome/browser/resources/signin/profile_picker/profile_card.js

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
+import './signin_icons.js';
 import './profile_card_menu.js';
 import './profile_picker_shared_css.js';
 

chrome/browser/resources/signin/profile_picker/profile_picker_main_view.js

@@ -5,6 +5,7 @@
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.m.js';
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import './icons.js';
 import './profile_card.js';
 import './profile_picker_shared_css.js';

chrome/browser/resources/signin/profile_picker/profile_picker_resources.grd

@@ -77,6 +77,11 @@
           file="icons.js"
           type="chrome_html"
           compress="false"/>
+      <structure
+          name="IDR_SIGNIN_ICONS_JS"
+          file="../signin_icons.js"
+          type="chrome_html"
+          compress="false"/>
       <structure
           name="IDR_PROFILE_PICKER_LAZY_LOAD_JS"
           file="profile_creation_flow/lazy_load.js"

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

@@ -24,6 +24,7 @@
 #include "chrome/common/pref_names.h"
 #include "chrome/common/themes/autogenerated_theme_util.h"
 #include "chrome/common/webui_url_constants.h"
+#include "components/signin/public/identity_manager/account_info.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/webui/web_ui_util.h"
 #include "ui/gfx/color_utils.h"
@@ -32,6 +33,10 @@
 namespace {
 const size_t kAvatarIconSize = 74;
 const size_t kProfileCreationAvatarSize = 100;
+
+bool IsManaged(const std::string& hosted_domain) {
+  return !hosted_domain.empty() && hosted_domain != kNoHostedDomainFound;
+}
 }
 
 ProfilePickerHandler::ProfilePickerHandler() = default;
@@ -281,6 +286,8 @@ base::Value ProfilePickerHandler::GetProfilesList() {
     // chrome.
     profile_entry->SetString("gaiaName", entry->GetGAIANameToDisplay());
     profile_entry->SetString("userName", entry->GetUserName());
+    profile_entry->SetBoolPath("isManaged",
+                               IsManaged(entry->GetHostedDomain()));
     gfx::Image icon = profiles::GetSizedAvatarIcon(
         entry->GetAvatarIcon(), true, kAvatarIconSize, kAvatarIconSize);
     std::string icon_url = webui::GetBitmapDataUrl(icon.AsBitmap());

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

@@ -117,7 +117,7 @@ ProfilePickerUI::ProfilePickerUI(content::WebUI* web_ui)
       html_source,
       base::make_span(kProfilePickerResources, kProfilePickerResourcesSize),
       generated_path, IDR_PROFILE_PICKER_PROFILE_PICKER_HTML);
-
+  html_source->AddResourcePath("signin_icons.js", IDR_SIGNIN_ICONS_JS);
   AddStrings(html_source);
   content::WebUIDataSource::Add(profile, html_source);
 }