From 6025d6f81e2808c7a46daffe129a3a75066c3f79 Mon Sep 17 00:00:00 2001
From: Dima Voytenko <dvoytenko@google.com>
Date: Tue, 9 Feb 2021 14:30:45 -0800
Subject: [PATCH] Make createLoaderLogoCallback static (#32534)

---
 .../0.1/amp-facebook-comments.js              | 10 ++--
 .../0.1/amp-facebook-page.js                  | 10 ++--
 extensions/amp-facebook/0.1/amp-facebook.js   | 10 ++--
 extensions/amp-pinterest/0.1/amp-pinterest.js | 53 ++++++++++---------
 extensions/amp-twitter/0.1/amp-twitter.js     | 42 +++++++--------
 src/base-element.js                           | 27 +++++-----
 src/custom-element.js                         |  4 +-
 7 files changed, 81 insertions(+), 75 deletions(-)

diff --git a/extensions/amp-facebook-comments/0.1/amp-facebook-comments.js b/extensions/amp-facebook-comments/0.1/amp-facebook-comments.js
index b4fb2eba5e5b..fda8db63e0c0 100644
--- a/extensions/amp-facebook-comments/0.1/amp-facebook-comments.js
+++ b/extensions/amp-facebook-comments/0.1/amp-facebook-comments.js
@@ -26,6 +26,11 @@ import {removeElement} from '../../../src/dom';
 import {tryParseJson} from '../../../src/json';
 
 class AmpFacebookComments extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static createLoaderLogoCallback(element) {
+    return createLoaderLogo(element);
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -120,11 +125,6 @@ class AmpFacebookComments extends AMP.BaseElement {
     }
   }
 
-  /** @override */
-  createLoaderLogoCallback() {
-    return createLoaderLogo(this.element);
-  }
-
   /** @override */
   unlayoutCallback() {
     if (this.iframe_) {
diff --git a/extensions/amp-facebook-page/0.1/amp-facebook-page.js b/extensions/amp-facebook-page/0.1/amp-facebook-page.js
index 0b47d2b98987..11125fba5300 100644
--- a/extensions/amp-facebook-page/0.1/amp-facebook-page.js
+++ b/extensions/amp-facebook-page/0.1/amp-facebook-page.js
@@ -26,6 +26,11 @@ import {removeElement} from '../../../src/dom';
 import {tryParseJson} from '../../../src/json';
 
 class AmpFacebookPage extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static createLoaderLogoCallback(element) {
+    return createLoaderLogo(element);
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -122,11 +127,6 @@ class AmpFacebookPage extends AMP.BaseElement {
     }
   }
 
-  /** @override */
-  createLoaderLogoCallback() {
-    return createLoaderLogo(this.element);
-  }
-
   /** @override */
   unlayoutCallback() {
     if (this.iframe_) {
diff --git a/extensions/amp-facebook/0.1/amp-facebook.js b/extensions/amp-facebook/0.1/amp-facebook.js
index 5b18b3c58d35..d90c879d8d9f 100644
--- a/extensions/amp-facebook/0.1/amp-facebook.js
+++ b/extensions/amp-facebook/0.1/amp-facebook.js
@@ -27,6 +27,11 @@ import {removeElement} from '../../../src/dom';
 import {tryParseJson} from '../../../src/json';
 
 class AmpFacebook extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static createLoaderLogoCallback(element) {
+    return createLoaderLogo(element);
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -133,11 +138,6 @@ class AmpFacebook extends AMP.BaseElement {
     }
   }
 
-  /** @override */
-  createLoaderLogoCallback() {
-    return createLoaderLogo(this.element);
-  }
-
   /** @override */
   unlayoutOnPause() {
     return true;
diff --git a/extensions/amp-pinterest/0.1/amp-pinterest.js b/extensions/amp-pinterest/0.1/amp-pinterest.js
index 4b0dbfea37e9..056dd60e1cac 100644
--- a/extensions/amp-pinterest/0.1/amp-pinterest.js
+++ b/extensions/amp-pinterest/0.1/amp-pinterest.js
@@ -50,6 +50,33 @@ import {user, userAssert} from '../../../src/log';
  *    - buttonFollow: User follow button
  */
 class AmpPinterest extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static createLoaderLogoCallback(element) {
+    const type = element.getAttribute('data-do');
+    if (type != 'embedPin') {
+      return {};
+    }
+
+    const html = htmlFor(element);
+    return {
+      color: '#E60019',
+      content: html`
+        <svg viewBox="0 0 72 72">
+          <path
+            fill="currentColor"
+            d="M36,26c-5.52,0-9.99,4.47-9.99,9.99c0,4.24,2.63,7.85,6.35,9.31c-0.09-0.79-0.16-2.01,0.03-2.87
+            c0.18-0.78,1.17-4.97,1.17-4.97s-0.3-0.6-0.3-1.48c0-1.39,0.81-2.43,1.81-2.43c0.86,0,1.27,0.64,1.27,1.41
+            c0,0.86-0.54,2.14-0.83,3.33c-0.24,1,0.5,1.81,1.48,1.81c1.78,0,3.14-1.88,3.14-4.57c0-2.39-1.72-4.06-4.18-4.06
+            c-2.85,0-4.51,2.13-4.51,4.33c0,0.86,0.33,1.78,0.74,2.28c0.08,0.1,0.09,0.19,0.07,0.29c-0.07,0.31-0.25,1-0.28,1.13
+            c-0.04,0.18-0.15,0.22-0.34,0.13c-1.25-0.58-2.03-2.4-2.03-3.87c0-3.15,2.29-6.04,6.6-6.04c3.46,0,6.16,2.47,6.16,5.77
+            c0,3.45-2.17,6.22-5.18,6.22c-1.01,0-1.97-0.53-2.29-1.15c0,0-0.5,1.91-0.62,2.38c-0.22,0.87-0.83,1.96-1.24,2.62
+            c0.94,0.29,1.92,0.44,2.96,0.44c5.52,0,9.99-4.47,9.99-9.99C45.99,30.47,41.52,26,36,26z"
+          />
+        </svg>
+      `,
+    };
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -118,32 +145,6 @@ class AmpPinterest extends AMP.BaseElement {
       }
     });
   }
-
-  /** @override */
-  createLoaderLogoCallback() {
-    if (this.type_ != 'embedPin') {
-      return {};
-    }
-
-    const html = htmlFor(this.element);
-    return {
-      color: '#E60019',
-      content: html`
-        <svg viewBox="0 0 72 72">
-          <path
-            fill="currentColor"
-            d="M36,26c-5.52,0-9.99,4.47-9.99,9.99c0,4.24,2.63,7.85,6.35,9.31c-0.09-0.79-0.16-2.01,0.03-2.87
-            c0.18-0.78,1.17-4.97,1.17-4.97s-0.3-0.6-0.3-1.48c0-1.39,0.81-2.43,1.81-2.43c0.86,0,1.27,0.64,1.27,1.41
-            c0,0.86-0.54,2.14-0.83,3.33c-0.24,1,0.5,1.81,1.48,1.81c1.78,0,3.14-1.88,3.14-4.57c0-2.39-1.72-4.06-4.18-4.06
-            c-2.85,0-4.51,2.13-4.51,4.33c0,0.86,0.33,1.78,0.74,2.28c0.08,0.1,0.09,0.19,0.07,0.29c-0.07,0.31-0.25,1-0.28,1.13
-            c-0.04,0.18-0.15,0.22-0.34,0.13c-1.25-0.58-2.03-2.4-2.03-3.87c0-3.15,2.29-6.04,6.6-6.04c3.46,0,6.16,2.47,6.16,5.77
-            c0,3.45-2.17,6.22-5.18,6.22c-1.01,0-1.97-0.53-2.29-1.15c0,0-0.5,1.91-0.62,2.38c-0.22,0.87-0.83,1.96-1.24,2.62
-            c0.94,0.29,1.92,0.44,2.96,0.44c5.52,0,9.99-4.47,9.99-9.99C45.99,30.47,41.52,26,36,26z"
-          />
-        </svg>
-      `,
-    };
-  }
 }
 
 AMP.extension('amp-pinterest', '0.1', (AMP) => {
diff --git a/extensions/amp-twitter/0.1/amp-twitter.js b/extensions/amp-twitter/0.1/amp-twitter.js
index d8a6a8ccaf5e..a6ba5ff808dc 100644
--- a/extensions/amp-twitter/0.1/amp-twitter.js
+++ b/extensions/amp-twitter/0.1/amp-twitter.js
@@ -23,6 +23,27 @@ import {listenFor} from '../../../src/iframe-helper';
 import {removeElement} from '../../../src/dom';
 
 class AmpTwitter extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static createLoaderLogoCallback(element) {
+    const html = htmlFor(element);
+    return {
+      color: '#1DA1F2',
+      content: html`
+        <svg viewBox="0 0 72 72">
+          <path
+            fill="currentColor"
+            d="M32.29,44.13c7.55,0,11.67-6.25,11.67-11.67c0-0.18,0-0.35-0.01-0.53c0.8-0.58,1.5-1.3,2.05-2.12
+    c-0.74,0.33-1.53,0.55-2.36,0.65c0.85-0.51,1.5-1.31,1.8-2.27c-0.79,0.47-1.67,0.81-2.61,1c-0.75-0.8-1.82-1.3-3-1.3
+    c-2.27,0-4.1,1.84-4.1,4.1c0,0.32,0.04,0.64,0.11,0.94c-3.41-0.17-6.43-1.8-8.46-4.29c-0.35,0.61-0.56,1.31-0.56,2.06
+    c0,1.42,0.72,2.68,1.83,3.42c-0.67-0.02-1.31-0.21-1.86-0.51c0,0.02,0,0.03,0,0.05c0,1.99,1.41,3.65,3.29,4.02
+    c-0.34,0.09-0.71,0.14-1.08,0.14c-0.26,0-0.52-0.03-0.77-0.07c0.52,1.63,2.04,2.82,3.83,2.85c-1.4,1.1-3.17,1.76-5.1,1.76
+    c-0.33,0-0.66-0.02-0.98-0.06C27.82,43.45,29.97,44.13,32.29,44.13"
+          />
+        </svg>
+      `,
+    };
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -155,27 +176,6 @@ class AmpTwitter extends AMP.BaseElement {
     });
   }
 
-  /** @override */
-  createLoaderLogoCallback() {
-    const html = htmlFor(this.element);
-    return {
-      color: '#1DA1F2',
-      content: html`
-        <svg viewBox="0 0 72 72">
-          <path
-            fill="currentColor"
-            d="M32.29,44.13c7.55,0,11.67-6.25,11.67-11.67c0-0.18,0-0.35-0.01-0.53c0.8-0.58,1.5-1.3,2.05-2.12
-    c-0.74,0.33-1.53,0.55-2.36,0.65c0.85-0.51,1.5-1.31,1.8-2.27c-0.79,0.47-1.67,0.81-2.61,1c-0.75-0.8-1.82-1.3-3-1.3
-    c-2.27,0-4.1,1.84-4.1,4.1c0,0.32,0.04,0.64,0.11,0.94c-3.41-0.17-6.43-1.8-8.46-4.29c-0.35,0.61-0.56,1.31-0.56,2.06
-    c0,1.42,0.72,2.68,1.83,3.42c-0.67-0.02-1.31-0.21-1.86-0.51c0,0.02,0,0.03,0,0.05c0,1.99,1.41,3.65,3.29,4.02
-    c-0.34,0.09-0.71,0.14-1.08,0.14c-0.26,0-0.52-0.03-0.77-0.07c0.52,1.63,2.04,2.82,3.83,2.85c-1.4,1.1-3.17,1.76-5.1,1.76
-    c-0.33,0-0.66-0.02-0.98-0.06C27.82,43.45,29.97,44.13,32.29,44.13"
-          />
-        </svg>
-      `,
-    };
-  }
-
   /** @override */
   unlayoutOnPause() {
     return true;
diff --git a/src/base-element.js b/src/base-element.js
index 5d218170040d..3f7975e37bab 100644
--- a/src/base-element.js
+++ b/src/base-element.js
@@ -120,6 +120,21 @@ export class BaseElement {
     return false;
   }
 
+  /**
+   * Subclasses can override this method to provide a svg logo that will be
+   * displayed as the loader.
+   *
+   * @param {!AmpElement} unusedElement
+   * @return {{
+   *  content: (!Element|undefined),
+   *  color: (string|undefined),
+   * }}
+   * @nocollapse
+   */
+  static createLoaderLogoCallback(unusedElement) {
+    return {};
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     /** @public @const {!Element} */
@@ -374,18 +389,6 @@ export class BaseElement {
     return null;
   }
 
-  /**
-   * Subclasses can override this method to provide a svg logo that will be
-   * displayed as the loader.
-   * @return {{
-   *  content: (!Element|undefined),
-   *  color: (string|undefined),
-   * }}
-   */
-  createLoaderLogoCallback() {
-    return {};
-  }
-
   /**
    * Subclasses can override this method to opt-out of rendering the element
    * when it is not currently visible.
diff --git a/src/custom-element.js b/src/custom-element.js
index 33a66f745870..01f9b26b3f2c 100644
--- a/src/custom-element.js
+++ b/src/custom-element.js
@@ -1025,7 +1025,9 @@ function createBaseCustomElementClass(win) {
      * @final
      */
     createLoaderLogo() {
-      return this.impl_ ? this.impl_.createLoaderLogoCallback() : {};
+      return this.implClass_
+        ? this.implClass_.createLoaderLogoCallback(this)
+        : {};
     }
 
     /**