adjust animal avatar caching system and adjust size in the toolbar

customize.dist/src/less2/include/toolbar.less

@@ -200,6 +200,9 @@
                 .avatar_main(30px);
                 .cp-avatar-default, media-tag {
                     margin-right: 5px;
+                    &.animal {
+                        font-size: 20px;
+                    }
                 }
                 &.cp-userlist-clickable {
                     cursor: pointer;

www/common/inner/common-mediatag.js

@@ -80,7 +80,7 @@ define([
     };
 
     // https://emojipedia.org/nature/
-    var ANIMALS = [ '🙈', '🦀', '🐞', '🦋', '🐬', '🐋', '🐢', '🦉', '🦆', '🐧', '🦡', '🦘', '🦨', '🦦', '🦥', '🐼', '🐻', '🦝', '🦄', '🐄', '🐷', '🐐', '🦙', '🦒', '🐘', '🦏', '🐁', '🐹', '🐰', '🦫', '🦔', '🐨'];
+    var ANIMALS = '🙈 🦀 🐞 🦋 🐬 🐋 🐢 🦉 🦆 🐧 🦡 🦘 🦨 🦦 🦥 🐼 🐻 🦝 🦓 🐄 🐷 🐐 🦙 🦒 🐘 🦏 🐁 🐹 🐰 🦫 🦔 🐨 🐱 🐺 👺 👹 👽 👾 🤖'.split(/\s+/);
 
     var getRandomAnimal = function () {
         return ANIMALS[Math.floor(Math.random() * ANIMALS.length)];
@@ -94,14 +94,13 @@ define([
         return ANIMALS[seed % ANIMALS.length];
     };
 
+    var animal_avatars = {};
     MT.displayAvatar = function (common, $container, href, name, _cb, uid) {
         var cb = Util.once(Util.mkAsync(_cb || function () {}));
         var displayDefault = function () {
-            if (avatars[uid]) {
+            var animal_avatar;
-                var nodes = $.parseHTML(avatars[uid]);
+            if (uid && animal_avatars[uid]) {
-                var $el = $(nodes[0]);
+                animal_avatar = animal_avatars[uid]
-                $container.append($el);
-                return void cb($el);
             }
             var animal = false;
 
@@ -109,7 +108,11 @@ define([
             var parts = name.split(/\s+/);
             var text;
             if (name === Messages.anonymous) {
-                text =  getPseudorandomAnimal(uid);
+                if (animal_avatar) {
+                    text = animal_avatar;
+                } else {
+                    text = animal_avatar = getPseudorandomAnimal(uid);
+                }
                 animal = true;
             } else if (parts.length > 1) {
                 text = parts.slice(0, 2).map(Util.getFirstCharacter).join('');
@@ -120,7 +123,9 @@ define([
 
             var $avatar = $('<span>', {'class': 'cp-avatar-default' + (animal? ' animal': '')}).text(text);
             $container.append($avatar);
-            avatars[uid] = $avatar[0].outerHTML;
+            if (uid && animal) {
+                animal_avatars[uid] = animal_avatar;
+            }
             if (cb) { cb(); }
         };
         if (!window.Symbol) { return void displayDefault(); } // IE doesn't have Symbol