custom-element internal classes are switched to i-amphtml- form (#6796)

* custom-element internal classes are switched to i-amphtml- form * fixes
ampproject · Dec 22, 2016 · ad68815 · ad68815
1 parent b22fb75
commit ad68815
Show file tree

Hide file tree

Showing 42 changed files with 100 additions and 61 deletions.
diff --git a/css/Z_INDEX.md b/css/Z_INDEX.md
@@ -7,7 +7,7 @@ selector                                    |   z-index      |   file
 .-amp-image-lightbox-viewer                 |   1            |   extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
 .i-amphtml-layout-size-defined > [placeholder] |   1            |   css/amp.css
 .-amp-image-lightbox-caption                |   2            |   extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
-.-amp-element > [overflow]                  |   2            |   css/amp.css
+.i-amphtml-element > [overflow]             |   2            |   css/amp.css
 .i-amphtml-loader-moving-line               |   2            |   css/amp.css
 .amp-carousel-button                        |   10           |   extensions/amp-carousel/0.1/amp-carousel.css
 amp-sticky-ad                               |   11           |   extensions/amp-sticky-ad/1.0/amp-sticky-ad.css

diff --git a/css/amp.css b/css/amp.css
@@ -96,7 +96,7 @@ html.i-amphtml-ios-embed {
   display: block !important;
 }
 
-.-amp-element {
+.i-amphtml-element {
   display: inline-block;
 }
 
@@ -148,23 +148,32 @@ i-amphtml-sizer {
   display: block !important;
 }
 
-.-amp-fill-content {
+/* TODO(dvoytenko, #6794): Remove old `-amp-fill-content` form after the new
+   form is in PROD for 1-2 weeks. */
+.-amp-fill-content,
+.i-amphtml-fill-content {
   display: block;
   width: 1px;          /* These lines are a work around to this issue in iOS: */
   min-width: 100%;     /* https://bugs.webkit.org/show_bug.cgi?id=155198      */
   height: 100%;
   margin: auto;
 }
 
-.i-amphtml-layout-size-defined .-amp-fill-content {
+/* TODO(dvoytenko, #6794): Remove old `-amp-fill-content` form after the new
+   form is in PROD for 1-2 weeks. */
+.i-amphtml-layout-size-defined .-amp-fill-content,
+.i-amphtml-layout-size-defined .i-amphtml-fill-content {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
 }
 
-.-amp-replaced-content {
+/* TODO(dvoytenko, #6794): Remove old `-amp-replaced-content` form after the new
+   form is in PROD for 1-2 weeks. */
+.-amp-replaced-content,
+.i-amphtml-replaced-content {
   padding: 0 !important;
   border: none !important;
   /* TODO(dvoytenko): explore adding here object-fit. */
@@ -240,16 +249,16 @@ i-amphtml-sizer {
   /* Just state. */
 }
 
-.-amp-element > [placeholder] {
+.i-amphtml-element > [placeholder] {
   display: block;
 }
 
-.-amp-element > [placeholder].hidden,
-.-amp-element > [placeholder].amp-hidden {
+.i-amphtml-element > [placeholder].hidden,
+.i-amphtml-element > [placeholder].amp-hidden {
   visibility: hidden;
 }
 
-.-amp-element:not(.amp-notsupported) > [fallback] {
+.i-amphtml-element:not(.amp-notsupported) > [fallback] {
   display: none;
 }
 
@@ -412,13 +421,13 @@ i-amp-scroll-container.amp-active {
  * not currently visible. Typically tapping on this element shows the full
  * content.
  */
-.-amp-element > [overflow] {
+.i-amphtml-element > [overflow] {
   cursor: pointer;
   z-index: 2;
   visibility: hidden;
 }
 
-.-amp-element > [overflow].amp-visible {
+.i-amphtml-element > [overflow].amp-visible {
   visibility: visible;
 }
 

diff --git a/extensions/amp-analytics/0.1/test/test-visibility-impl.js b/extensions/amp-analytics/0.1/test/test-visibility-impl.js
@@ -409,7 +409,7 @@ describe('amp-analytics.visibility', () => {
       iframeAnalytics;
     beforeEach(() => {
       ampEl = document.createElement('span');
-      ampEl.className = '-amp-element';
+      ampEl.className = 'i-amphtml-element';
       ampEl.id = 'ampEl';
       iframe = document.createElement('iframe');
       div = document.createElement('div');

diff --git a/extensions/amp-analytics/0.1/visibility-impl.js b/extensions/amp-analytics/0.1/visibility-impl.js
@@ -168,8 +168,11 @@ export function getElement(ampdoc, selector, analyticsEl, selectionMethod) {
   const friendlyFrame = getParentWindowFrameElement(analyticsEl, ampdoc.win);
   // Special case for root selector.
   if (selector == ':host' || selector == ':root') {
+    // TODO(dvoytenko, #6794): Remove old `-amp-element` form after the new
+    // form is in PROD for 1-2 weeks.
     foundEl = friendlyFrame ?
-        closestBySelector(friendlyFrame, '.-amp-element') : null;
+        closestBySelector(
+            friendlyFrame, '.-amp-element,.i-amphtml-element') : null;
   } else if (selectionMethod == 'closest') {
     // Only tag names are supported currently.
     foundEl = closestByTag(analyticsEl, selector);

diff --git a/extensions/amp-animation/0.1/web-animations.js b/extensions/amp-animation/0.1/web-animations.js
@@ -308,7 +308,10 @@ export class MeasureScanner extends Scanner {
     const promises = [];
     for (let i = 0; i < this.targets_.length; i++) {
       const element = this.targets_[i];
-      if (element.classList.contains('-amp-element')) {
+      // TODO(dvoytenko, #6794): Remove old `-amp-element` form after the new
+      // form is in PROD for 1-2 weeks.
+      if (element.classList.contains('-amp-element') ||
+          element.classList.contains('i-amphtml-element')) {
         const resource = resources.getResourceForElement(element);
         promises.push(resource.loadedOnce());
       }

diff --git a/extensions/amp-apester-media/0.1/test/test-amp-apester-media.js b/extensions/amp-apester-media/0.1/test/test-amp-apester-media.js
@@ -118,7 +118,7 @@ describe('amp-apester-media', () => {
       'width': '500',
     }, true).then(ape => {
       const iframe = ape.querySelector('iframe');
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/extensions/amp-bind/0.1/bind-impl.js b/extensions/amp-bind/0.1/bind-impl.js
@@ -262,7 +262,10 @@ export class Bind {
         user().error(TAG, 'Invalid result for class binding', newValue);
       }
     } else {
-      const isAmpElement = element.classList.contains('-amp-element');
+      // TODO(dvoytenko, #6794): Remove old `-amp-element` form after the new
+      // form is in PROD for 1-2 weeks.
+      const isAmpElement = (element.classList.contains('-amp-element') ||
+          element.classList.contains('i-amphtml-element'));
       const oldValue = element.getAttribute(property);
       /** @type {(boolean|number|string|null|undefined)} */
       let attributeValue;

diff --git a/extensions/amp-brid-player/0.1/test/test-amp-brid-player.js b/extensions/amp-brid-player/0.1/test/test-amp-brid-player.js
@@ -63,7 +63,7 @@ describe('amp-brid-player', () => {
     }, true).then(bc => {
       const iframe = bc.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/extensions/amp-brightcove/0.1/test/test-amp-brightcove.js b/extensions/amp-brightcove/0.1/test/test-amp-brightcove.js
@@ -62,7 +62,7 @@ describe('amp-brightcove', () => {
     }, true).then(bc => {
       const iframe = bc.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/extensions/amp-carousel/0.1/amp-carousel.css b/extensions/amp-carousel/0.1/amp-carousel.css
@@ -23,7 +23,10 @@ amp-carousel {
  * Every `<amp-carousel>'s` immediate child is considered a slide in
  * the carousel.
  */
-.amp-carousel-slide > .-amp-replaced-content {
+/* TODO(dvoytenko, #6794): Remove old `-amp-replaced-content` form after the new
+   form is in PROD for 1-2 weeks. */
+.amp-carousel-slide > .-amp-replaced-content,
+.amp-carousel-slide > .i-amphtml-replaced-content {
   /*
    * Apply contain object-fit to all replaced content to avoid distorted ratios.
    */

diff --git a/extensions/amp-dailymotion/0.1/test/test-amp-dailymotion.js b/extensions/amp-dailymotion/0.1/test/test-amp-dailymotion.js
@@ -56,7 +56,7 @@ describe('amp-dailymotion', () => {
     return getDailymotion('x2m8jpp', true).then(dailymotion => {
       const iframe = dailymotion.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/extensions/amp-facebook/0.1/test/test-amp-facebook.js b/extensions/amp-facebook/0.1/test/test-amp-facebook.js
@@ -58,7 +58,7 @@ describe('amp-facebook', function() {
       const iframe = ampFB.firstChild;
       expect(iframe).to.not.be.null;
       expect(iframe.tagName).to.equal('IFRAME');
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 
@@ -67,7 +67,7 @@ describe('amp-facebook', function() {
       const iframe = ampFB.firstChild;
       expect(iframe).to.not.be.null;
       expect(iframe.tagName).to.equal('IFRAME');
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/extensions/amp-fit-text/0.1/amp-fit-text.css b/extensions/amp-fit-text/0.1/amp-fit-text.css
@@ -14,8 +14,11 @@
  * limitations under the License.
  */
 
+/* TODO(dvoytenko, #6794): Remove old `-amp-fill-content` form after the new
+   form is in PROD for 1-2 weeks. */
 .-amp-fit-text-content,
-.-amp-fit-text-content.-amp-fill-content {
+.-amp-fit-text-content.-amp-fill-content,
+.-amp-fit-text-content.i-amphtml-fill-content {
   display: block;
   /* @alternative */ display: flex;
   flex-direction: column;

diff --git a/extensions/amp-gfycat/0.1/test/test-amp-gfycat.js b/extensions/amp-gfycat/0.1/test/test-amp-gfycat.js
@@ -57,7 +57,7 @@ describe('amp-gfycat', () => {
     }).then(gfycat => {
       const iframe = gfycat.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/extensions/amp-google-vrview-image/0.1/test/test-amp-google-vrview-image.js b/extensions/amp-google-vrview-image/0.1/test/test-amp-google-vrview-image.js
@@ -86,7 +86,7 @@ describe('amp-google-vrview-image', function() {
     return getVrImage({'src': 'https://example.com/image1'}).then(vr => {
       const iframe = vr.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/extensions/amp-hulu/0.1/test/test-amp-hulu.js b/extensions/amp-hulu/0.1/test/test-amp-hulu.js
@@ -48,7 +48,7 @@ describe('amp-hulu', () => {
     return getHulu('4Dk5F2PYTtrgciuvloH3UA', true).then(hulu => {
       const iframe = hulu.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/extensions/amp-instagram/0.1/test/test-amp-instagram.js b/extensions/amp-instagram/0.1/test/test-amp-instagram.js
@@ -52,7 +52,7 @@ describe('amp-instagram', () => {
   function testIframe(iframe) {
     expect(iframe).to.not.be.null;
     expect(iframe.src).to.equal('https://www.instagram.com/p/fBwFP/embed/?v=4');
-    expect(iframe.className).to.match(/-amp-fill-content/);
+    expect(iframe.className).to.match(/i-amphtml-fill-content/);
     expect(iframe.getAttribute('title')).to.equal('Instagram: Testing');
   }
 

diff --git a/extensions/amp-jwplayer/0.1/test/test-amp-jwplayer.js b/extensions/amp-jwplayer/0.1/test/test-amp-jwplayer.js
@@ -49,7 +49,7 @@ describe('amp-jwplayer', () => {
       expect(iframe.tagName).to.equal('IFRAME');
       expect(iframe.src).to.equal(
           'https://content.jwplatform.com/players/Wferorsv-sDZEo0ea.html');
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/extensions/amp-kaltura-player/0.1/test/test-amp-kaltura-player.js b/extensions/amp-kaltura-player/0.1/test/test-amp-kaltura-player.js
@@ -62,7 +62,7 @@ describe('amp-kaltura-player', () => {
     }, true).then(bc => {
       const iframe = bc.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/extensions/amp-o2-player/0.1/test/test-amp-o2-player.js b/extensions/amp-o2-player/0.1/test/test-amp-o2-player.js
@@ -61,7 +61,7 @@ describe('amp-o2-player', () => {
     }, true).then(o2 => {
       const iframe = o2.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/extensions/amp-pinterest/0.1/pin-widget.js b/extensions/amp-pinterest/0.1/pin-widget.js
@@ -89,7 +89,10 @@ export class PinWidget {
     }
 
     const structure = Util.make(this.element.ownerDocument, {'span': {}});
-    structure.className = className + ' -amp-fill-content';
+    // TODO(dvoytenko, #6794): Remove old `-amp-fill-content` form after the new
+    // form is in PROD for 1-2 weeks.
+    structure.className = className +
+        ' -amp-fill-content i-amphtml-fill-content';
 
     const container = Util.make(this.element.ownerDocument, {'span': {
       'className': '-amp-pinterest-embed-pin-inner',

diff --git a/extensions/amp-pinterest/0.1/pinit-button.js b/extensions/amp-pinterest/0.1/pinit-button.js
@@ -126,9 +126,12 @@ export class PinItButton {
       color: ['red', 'white'].indexOf(this.color) !== -1 ? this.color : 'gray',
     };
 
+    // TODO(dvoytenko, #6794): Remove old `-amp-fill-content` form after the new
+    // form is in PROD for 1-2 weeks.
     const clazz = [
       `-amp-pinterest${CLASS.shape}${CLASS.height}`,
       '-amp-fill-content',
+      'i-amphtml-fill-content',
     ];
 
     let countBubble = '';

diff --git a/extensions/amp-playbuzz/0.1/test/test-amp-playbuzz.js b/extensions/amp-playbuzz/0.1/test/test-amp-playbuzz.js
@@ -65,7 +65,7 @@ describe('amp-playbuzz', () => {
     const itemSrcUrl = '//www.playbuzz.com/bob/bobs-life';
     expect(iframe).to.not.be.null;
     expect(startsWith(iframe.src, itemSrcUrl)).to.be.true;
-    expect(iframe.className).to.match(/-amp-fill-content/);
+    expect(iframe.className).to.match(/i-amphtml-fill-content/);
     // This is important to avoid sizing issues.
     expect(iframe.getAttribute('scrolling')).to.equal('no');
   }

diff --git a/extensions/amp-reach-player/0.1/test/test-amp-reach-player.js b/extensions/amp-reach-player/0.1/test/test-amp-reach-player.js
@@ -58,7 +58,7 @@ describe('amp-reach-player', () => {
     }, true).then(reach => {
       const iframe = reach.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/extensions/amp-springboard-player/0.1/test/test-amp-springboard-player.js b/extensions/amp-springboard-player/0.1/test/test-amp-springboard-player.js
@@ -67,7 +67,7 @@ describe('amp-springboard-player', () => {
     }).then(bc => {
       const iframe = bc.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/extensions/amp-vimeo/0.1/test/test-amp-vimeo.js b/extensions/amp-vimeo/0.1/test/test-amp-vimeo.js
@@ -53,7 +53,7 @@ describe('amp-vimeo', () => {
     return getVimeo('234', true).then(vimeo => {
       const iframe = vimeo.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/extensions/amp-vine/0.1/test/test-amp-vine.js b/extensions/amp-vine/0.1/test/test-amp-vine.js
@@ -51,7 +51,7 @@ describe('amp-vine', () => {
     return getVine('MdKjXez002d', true).then(vine => {
       const iframe = vine.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/extensions/amp-youtube/0.1/test/test-amp-youtube.js b/extensions/amp-youtube/0.1/test/test-amp-youtube.js
@@ -82,7 +82,7 @@ describe('amp-youtube', function() {
     return getYt({'data-videoid': 'mGENRKrdoGY'}, true).then(yt => {
       const iframe = yt.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      expect(iframe.className).to.match(/-amp-fill-content/);
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   });
 

diff --git a/src/base-element.js b/src/base-element.js
@@ -641,8 +641,14 @@ export class BaseElement {
    * @public @final
    */
   applyFillContent(element, opt_replacedContent) {
+    // TODO(dvoytenko, #6794): Remove old `-amp-fill-content` form after the new
+    // form is in PROD for 1-2 weeks.
+    element.classList.add('i-amphtml-fill-content');
     element.classList.add('-amp-fill-content');
     if (opt_replacedContent) {
+      // TODO(dvoytenko, #6794): Remove old `-amp-replaced-content` form after the new
+      // form is in PROD for 1-2 weeks.
+      element.classList.add('i-amphtml-replaced-content');
       element.classList.add('-amp-replaced-content');
     }
   }

diff --git a/src/custom-element.js b/src/custom-element.js
@@ -848,7 +848,7 @@ function createBaseCustomElementClass(win) {
      */
     connectedCallback() {
       if (!this.everAttached) {
-        this.classList.add('-amp-element');
+        this.classList.add('i-amphtml-element');
         this.classList.add('i-amphtml-notbuilt');
         this.classList.add('amp-notbuilt');
       }
@@ -1410,7 +1410,7 @@ function createBaseCustomElementClass(win) {
 
         const container = doc.createElement('div');
         container.classList.add('i-amphtml-loading-container');
-        container.classList.add('-amp-fill-content');
+        container.classList.add('i-amphtml-fill-content');
         container.classList.add('amp-hidden');
 
         const element = createLoaderElement(doc, this.elementName());

diff --git a/src/service/resource.js b/src/service/resource.js
@@ -105,7 +105,7 @@ export class Resource {
     element[OWNER_PROP_] = owner;
 
     // Need to clear owner cache for all child elements
-    const cachedElements = element.getElementsByClassName('-amp-element');
+    const cachedElements = element.getElementsByClassName('i-amphtml-element');
     for (let i = 0; i < cachedElements.length; i++) {
       const ele = cachedElements[i];
       if (Resource.forElementOptional(ele)) {