Supervised users: Use custodian avatar image(s) in the block interstitial if they're available.

chrome/browser/resources/supervised_user_block_interstitial.js

Index: chrome/browser/resources/supervised_user_block_interstitial.js
diff --git a/chrome/browser/resources/supervised_user_block_interstitial.js b/chrome/browser/resources/supervised_user_block_interstitial.js
index a9b137ca574322db7e7beaa98af77fe48993b68f..dbf57ecc1976ecae0e3f65d903fd0829d2f94582 100644
--- a/chrome/browser/resources/supervised_user_block_interstitial.js
+++ b/chrome/browser/resources/supervised_user_block_interstitial.js
@@ -7,6 +7,10 @@ function sendCommand(cmd) {
   window.domAutomationController.send(cmd);
 }
 
+function makeImageSet(url1x, url2x) {
+  return '-webkit-image-set(url(' + url1x + ') 1x, url(' + url2x + ') 2x)';
+}
+
 function initialize() {
   if (loadTimeData.getBoolean('allowAccessRequests')) {
     $('request-access-button').onclick = function(event) {
@@ -16,6 +20,24 @@ function initialize() {
   } else {
     $('request-access-button').hidden = true;
   }
+  var avatarURL1x = loadTimeData.getString('avatarURL1x');
+  var avatarURL2x = loadTimeData.getString('avatarURL2x');
+  if (avatarURL1x) {
+    $('avatar-img').style.content = makeImageSet(avatarURL1x, avatarURL2x);
+    $('avatar-img').hidden = false;
+    $('error-img').hidden = true;
+    var secondAvatarURL1x = loadTimeData.getString('secondAvatarURL1x');
+    var secondAvatarURL2x = loadTimeData.getString('secondAvatarURL2x');
+    if (secondAvatarURL1x) {
+      $('second-avatar-img').style.content =
+          makeImageSet(secondAvatarURL1x, secondAvatarURL2x);
+      $('second-avatar-img').hidden = false;
+      // The avatar images should overlap a bit.
+      $('avatar-img').style.left = '10px';
+      $('avatar-img').style.zIndex = '1';
+      $('second-avatar-img').style.left = '-10px';
+    }
+  }
   $('back-button').onclick = function(event) {
     sendCommand('back');
   };
@@ -29,6 +51,9 @@ function updateAfterRequestSent() {
   $('request-access-button').hidden = true;
   $('block-page-message').hidden = true;
   $('request-sent-message').hidden = false;
+  if ($('avatar-img').hidden) {
+    $('request-sent-message').style.marginTop = '40px';
+  }
 }
 
 document.addEventListener('DOMContentLoaded', initialize);