Defer loading user avatars

Feature: Issue 8983
Change-Id: I638f8232467cf67543f7c7b571d7dd4a97b6aae8

polygerrit-ui/app/elements/core/gr-reporting/gr-reporting.html

@@ -16,7 +16,6 @@ limitations under the License.
 -->
 
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../shared/gr-js-api-interface/gr-js-api-interface.html">
 
 <dom-module id="gr-reporting">
   <script src="gr-jank-detector.js"></script>

polygerrit-ui/app/elements/core/gr-reporting/gr-reporting.js

@@ -151,8 +151,13 @@
       return window.performance.now();
     },
 
+    _arePluginsLoaded() {
+      return this._baselines &&
+        !this._baselines.hasOwnProperty(TIMER.PLUGINS_LOADED);
+    },
+
     reporter(...args) {
-      const report = (Gerrit._arePluginsLoaded() && !pending.length) ?
+      const report = (this._arePluginsLoaded() && !pending.length) ?
         this.defaultReporter : this.cachingReporter;
       report.apply(this, args);
     },
@@ -177,7 +182,7 @@
       if (type === ERROR.TYPE) {
         console.error(eventValue.error || eventName);
       }
-      if (Gerrit._arePluginsLoaded()) {
+      if (this._arePluginsLoaded()) {
         if (pending.length) {
           for (const args of pending.splice(0)) {
             this.reporter(...args);

polygerrit-ui/app/elements/core/gr-reporting/gr-reporting_test.html

@@ -202,11 +202,9 @@ limitations under the License.
       setup(() => {
         element.reporter.restore();
         sandbox.stub(element, 'defaultReporter');
-        sandbox.stub(Gerrit, '_arePluginsLoaded');
       });
 
       test('pluginsLoaded reports time', () => {
-        Gerrit._arePluginsLoaded.returns(true);
         sandbox.stub(element, 'now').returns(42);
         element.pluginsLoaded();
         assert.isTrue(element.defaultReporter.calledWithExactly(
@@ -215,21 +213,18 @@ limitations under the License.
       });
 
       test('pluginsLoaded reports plugins', () => {
-        Gerrit._arePluginsLoaded.returns(true);
         element.pluginsLoaded(['foo', 'bar']);
-        assert.isTrue(element.defaultReporter.calledWithExactly(
+        assert.isTrue(element.defaultReporter.calledWith(
             'lifecycle', 'Plugins installed', 'foo,bar'
         ));
       });
 
       test('caches reports if plugins are not loaded', () => {
-        Gerrit._arePluginsLoaded.returns(false);
         element.timeEnd('foo');
         assert.isFalse(element.defaultReporter.called);
       });
 
       test('reports if plugins are loaded', () => {
-        Gerrit._arePluginsLoaded.returns(true);
         element.pluginsLoaded();
         assert.isTrue(element.defaultReporter.called);
       });
@@ -237,14 +232,19 @@ limitations under the License.
       test('reports cached events preserving order', () => {
         element.time('foo');
         element.time('bar');
-        Gerrit._arePluginsLoaded.returns(false);
         element.timeEnd('foo');
-        Gerrit._arePluginsLoaded.returns(true);
+        element.pluginsLoaded();
         element.timeEnd('bar');
-        assert.isTrue(element.defaultReporter.firstCall.calledWith(
+        assert.isTrue(element.defaultReporter.getCall(0).calledWith(
             'timing-report', 'UI Latency', 'foo'
         ));
-        assert.isTrue(element.defaultReporter.secondCall.calledWith(
+        assert.isTrue(element.defaultReporter.getCall(1).calledWith(
+            'timing-report', 'UI Latency', 'PluginsLoaded'
+        ));
+        assert.isTrue(element.defaultReporter.getCall(2).calledWith(
+            'lifecycle', 'Plugins installed'
+        ));
+        assert.isTrue(element.defaultReporter.getCall(3).calledWith(
             'timing-report', 'UI Latency', 'bar'
         ));
       });

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

@@ -16,9 +16,10 @@ limitations under the License.
 -->
 
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
-<link rel="import" href="../gr-rest-api-interface/gr-rest-api-interface.html">
 <link rel="import" href="../../../behaviors/base-url-behavior/base-url-behavior.html">
 <link rel="import" href="../../../styles/shared-styles.html">
+<link rel="import" href="../../shared/gr-js-api-interface/gr-js-api-interface.html">
+<link rel="import" href="../gr-rest-api-interface/gr-rest-api-interface.html">
 
 <dom-module id="gr-avatar">
   <template>

polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar.js

@@ -29,37 +29,40 @@
         type: Number,
         value: 16,
       },
+      _hasAvatars: {
+        type: Boolean,
+        value: false,
+      },
     },
 
     behaviors: [
       Gerrit.BaseUrlBehavior,
     ],
 
-    created() {
-      this.hidden = true;
-    },
-
     attached() {
-      this.$.restAPI.getConfig().then(cfg => {
-        const hasAvatars = !!(cfg && cfg.plugin && cfg.plugin.has_avatars);
-        if (hasAvatars) {
-          this.hidden = false;
+      Promise.all([
+        this.$.restAPI.getConfig(),
+        Gerrit.awaitPluginsLoaded(),
+      ]).then(([cfg]) => {
+        this._hasAvatars = !!(cfg && cfg.plugin && cfg.plugin.has_avatars);
+        if (this._hasAvatars && this.account) {
           // src needs to be set if avatar becomes visible
-          this._updateAvatarURL(this.account);
+          this._updateAvatarURL();
+        } else {
+          this.hidden = true;
         }
       });
     },
 
     _accountChanged(account) {
-      this._updateAvatarURL(account);
+      this._updateAvatarURL();
     },
 
-    _updateAvatarURL(account) {
-      if (!this.hidden && account) {
-        const url = this._buildAvatarURL(this.account);
-        if (url) {
-          this.style.backgroundImage = 'url("' + url + '")';
-        }
+    _updateAvatarURL() {
+      if (this.hidden || !this._hasAvatars) { return; }
+      const url = this._buildAvatarURL(this.account);
+      if (url) {
+        this.style.backgroundImage = 'url("' + url + '")';
       }
     },
 

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

@@ -38,7 +38,7 @@ limitations under the License.
 
     setup(() => {
       stub('gr-rest-api-interface', {
-        getConfig() { return Promise.resolve({}); },
+        getConfig() { return Promise.resolve({plugin: {has_avatars: true}}); },
       });
       element = fixture('basic');
     });
@@ -97,23 +97,36 @@ limitations under the License.
     });
 
     test('dom for existing account', () => {
-      assert.isTrue(element.hasAttribute('hidden'),
-          'element not hidden initially');
-      element.hidden = false;
+      assert.isFalse(element.hasAttribute('hidden'));
       element.imageSize = 64;
       element.account = {
         _account_id: 123,
       };
-      assert.isFalse(element.hasAttribute('hidden'), 'element hidden');
-      assert.isTrue(
-          element.style.backgroundImage.includes('/accounts/123/avatar?s=64'));
+      assert.strictEqual(element.style.backgroundImage, '');
+      // Emulate plugins loaded.
+      Gerrit._setPluginsPending([]);
+      return Promise.all([
+        element.$.restAPI.getConfig(),
+        Gerrit.awaitPluginsLoaded(),
+      ]).then(() => {
+        assert.isFalse(element.hasAttribute('hidden'));
+        assert.isTrue(
+            element.style.backgroundImage.includes('/accounts/123/avatar?s=64'));
+      });
     });
 
     test('dom for non available account', () => {
-      assert.isTrue(element.hasAttribute('hidden'),
-          'element not hidden initially');
-      element.account = undefined;
-      assert.isTrue(element.hasAttribute('hidden'), 'element not hidden');
+      assert.isFalse(element.hasAttribute('hidden'));
+      element.account = null;
+      assert.isFalse(element.hasAttribute('hidden'));
+      // Emulate plugins loaded.
+      Gerrit._setPluginsPending([]);
+      return Promise.all([
+        element.$.restAPI.getConfig(),
+        Gerrit.awaitPluginsLoaded(),
+      ]).then(() => {
+        assert.isTrue(element.hasAttribute('hidden'));
+      });
     });
   });
 </script>