Implement 'gr-avatar' without extending 'img'

Extending 'img' does not work with shadow DOM.

Change-Id: I2844a0c43e262bca8fdd7482f8f1d0abf718197b

polygerrit-ui/app/elements/gr-account-link.html

@@ -30,7 +30,7 @@ limitations under the License.
       a:hover span {
         text-decoration: underline;
       }
-      img {
+      gr-avatar {
         height: 1.3em;
         width: 1.3em;
         vertical-align: -.3em;
@@ -39,7 +39,8 @@ limitations under the License.
     <span>
       <a href$="[[_computeOwnerLink(account)]]"
          title$="[[_computeAccountTitle(account)]]">
-        <img is="gr-avatar" account="[[account]]" size="[[avatarSize]]">
+        <gr-avatar account="[[account]]"
+            image-size="[[avatarImageSize]]"></gr-avatar>
         <span>[[account.name]]</span>
         <span hidden$="[[!_computeShowEmail(showEmail, account)]]">
           (<span>[[account.email]]</span>)
@@ -56,7 +57,7 @@ limitations under the License.
 
       properties: {
         account: Object,
-        avatarSize: {
+        avatarImageSize: {
           type: Number,
           value: 32,
         },

polygerrit-ui/app/elements/gr-avatar.html

@@ -20,7 +20,9 @@ limitations under the License.
   <template>
     <style>
       :host {
+        display: inline-block;
         border-radius: 50%;
+        background-size: cover;
       }
     </style>
   </template>
@@ -31,14 +33,12 @@ limitations under the License.
     Polymer({
       is: 'gr-avatar',
 
-      extends: 'img',
-
       properties: {
         account: {
           type: Object,
           observer: '_accountChanged',
         },
-        size: {
+        imageSize: {
           type: Number,
           value: 16,
         },
@@ -50,27 +50,30 @@ limitations under the License.
 
       ready: function() {
         app.configReady.then(function(cfg) {
-          var showAvatar = !!(cfg && cfg.plugin && cfg.plugin.has_avatars);
+          var hasAvatars = !!(cfg && cfg.plugin && cfg.plugin.has_avatars);
-          if (showAvatar) {
+          if (hasAvatars) {
             this.hidden = false;
-            this.updateAvatarSrc(this.account); // src needs to be set if avatar becomes visible
+            this._updateAvatarURL(this.account); // src needs to be set if avatar becomes visible
           }
         }.bind(this));
       },
 
       _accountChanged: function(account) {
-        this.updateAvatarSrc(account);
+        this._updateAvatarURL(account);
       },
 
-      updateAvatarSrc: function(account) {
+      _updateAvatarURL: function(account) {
         if (!this.hidden && account) {
-          this.setAttribute('src', this._buildAvatarURL(account));
+          var url = this._buildAvatarURL(this.account);
+          if (url) {
+            this.style.backgroundImage = 'url("' + url + '")';
+          }
         }
       },
 
       _buildAvatarURL: function(account) {
         if (!account) { return ''; }
-        return '/accounts/' + account._account_id + '/avatar?s=' + this.size;
+        return '/accounts/' + account._account_id + '/avatar?s=' + this.imageSize;
       },
 
     });

polygerrit-ui/app/elements/gr-message.html

@@ -30,7 +30,7 @@ limitations under the License.
       :host(:not([expanded])) {
         cursor: pointer;
       }
-      [is="gr-avatar"] {
+      gr-avatar {
         position: absolute;
         left: var(--default-horizontal-margin);
       }
@@ -53,12 +53,12 @@ limitations under the License.
         margin-left: 0;
         padding: 10px 75px 10px 0;
       }
-      .collapsed [is="gr-avatar"] {
+      .collapsed gr-avatar {
         top: 8px;
         height: 1.75em;
         width: 1.75em;
       }
-      .expanded [is="gr-avatar"] {
+      .expanded gr-avatar {
         top: 12px;
         height: 2.5em;
         width: 2.5em;
@@ -92,7 +92,7 @@ limitations under the License.
       }
     </style>
     <div class$="[[_computeClass(expanded, showAvatar)]]">
-      <img is="gr-avatar" account="[[message.author]]" size="100">
+      <gr-avatar account="[[message.author]]" image-size="100"></gr-avatar>
       <div class="contentContainer">
         <div class="name" id="name">[[message.author.name]]</div>
         <div class="content">

polygerrit-ui/app/test/gr-avatar-test.html

@@ -26,7 +26,7 @@ limitations under the License.
 
 <test-fixture id="basic">
   <template>
-    <img is="gr-avatar">
+    <gr-avatar></gr-avatar>
   </template>
 </test-fixture>
 
@@ -49,20 +49,18 @@ limitations under the License.
     test('dom for existing account', function() {
       assert.isTrue(element.hasAttribute('hidden'), 'element not hidden initially');
       element.hidden = false;
-      assert.isFalse(element.hasAttribute('hidden'), 'element hidden');
+      element.imageSize = 64;
-
-      element.size = 64;
       element.account = {
         _account_id: 123
       };
-
+      assert.isFalse(element.hasAttribute('hidden'), 'element hidden');
-      assert.equal(element.getAttribute('src'), '/accounts/123/avatar?s=64');
+      assert.isTrue(element.style.backgroundImage.indexOf('/accounts/123/avatar?s=64') > -1);
     });
 
     test('dom for non available account', function() {
       assert.isTrue(element.hasAttribute('hidden'), 'element not hidden initially');
       element.account = undefined;
-      assert.isFalse(element.hasAttribute('src'), 'src not set');
+      assert.isTrue(element.hasAttribute('hidden'), 'element not hidden');
     });
 
   });