🚮 Disable layers in production

build-system/global-configs/canary-config.json

@@ -39,7 +39,6 @@
   "hidden-mutation-observer": 1,
   "ios-fixed-no-transfer": 1,
   "ios-scrollable-iframe": 0,
-  "layers": 1,
   "new-loaders": 1,
   "pump-early-frame": 1,
   "version-locking": 1,

extensions/amp-carousel/0.1/scrollable-carousel.js

@@ -20,6 +20,7 @@ import {BaseCarousel} from './base-carousel';
 import {Layout} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {dev} from '../../../src/log';
+import {getMode} from '../../../src/mode';
 import {isExperimentOn} from '../../../src/experiments';
 import {listen} from '../../../src/event-helper';
 import {numeric} from '../../../src/transition';
@@ -47,8 +48,11 @@ export class AmpScrollableCarousel extends BaseCarousel {
     /** @private {?number} */
     this.scrollTimerId_ = null;
 
-    /** @private {boolean} */
-    this.useLayers_ = false;
+    /** @private @const {boolean} */
+    this.useLayersPrioritization_ =
+      getMode().localDev &&
+      isExperimentOn(this.win, 'layers') &&
+      isExperimentOn(this.win, 'layers-prioritization');
   }
 
   /** @override */
@@ -64,12 +68,8 @@ export class AmpScrollableCarousel extends BaseCarousel {
     this.container_.classList.add('i-amphtml-scrollable-carousel-container');
     this.element.appendChild(this.container_);
 
-    this.useLayers_ =
-      isExperimentOn(this.win, 'layers') &&
-      isExperimentOn(this.win, 'layers-prioritization');
-
     this.cells_.forEach(cell => {
-      if (!this.useLayers_) {
+      if (!this.useLayersPrioritization_) {
         Services.ownersForDoc(this.element).setOwner(cell, this.element);
       }
       cell.classList.add('amp-carousel-slide');
@@ -93,7 +93,7 @@ export class AmpScrollableCarousel extends BaseCarousel {
       ActionTrust.LOW
     );
 
-    if (this.useLayers_) {
+    if (this.useLayersPrioritization_) {
       this.declareLayer(this.container_);
     }
   }
@@ -112,7 +112,7 @@ export class AmpScrollableCarousel extends BaseCarousel {
 
   /** @override */
   layoutCallback() {
-    if (!this.useLayers_) {
+    if (!this.useLayersPrioritization_) {
       this.doLayout_(this.pos_);
       this.preloadNext_(this.pos_, 1);
     }
@@ -122,7 +122,7 @@ export class AmpScrollableCarousel extends BaseCarousel {
 
   /** @override */
   onViewportCallback(unusedInViewport) {
-    if (!this.useLayers_) {
+    if (!this.useLayersPrioritization_) {
       this.updateInViewport_(this.pos_, this.pos_);
     }
   }
@@ -263,7 +263,7 @@ export class AmpScrollableCarousel extends BaseCarousel {
    * @private
    */
   commitSwitch_(pos) {
-    if (!this.useLayers_) {
+    if (!this.useLayersPrioritization_) {
       this.updateInViewport_(pos, this.oldPos_);
       this.doLayout_(pos);
       this.preloadNext_(pos, Math.sign(pos - this.oldPos_));

extensions/amp-image-slider/0.1/amp-image-slider.js

@@ -22,6 +22,7 @@ import {Services} from '../../../src/services';
 import {SwipeXRecognizer} from '../../../src/gesture-recognizers';
 import {clamp} from '../../../src/utils/math';
 import {dev, user, userAssert} from '../../../src/log';
+import {getMode} from '../../../src/mode';
 import {isExperimentOn} from '../../../src/experiments';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {listen} from '../../../src/event-helper';
@@ -103,6 +104,12 @@ export class AmpImageSlider extends AMP.BaseElement {
 
     /** @public {boolean} */
     this.isEventRegistered = false; // for test purpose
+
+    /** @private @const {boolean} */
+    this.useLayersPrioritization_ =
+      getMode().localDev &&
+      isExperimentOn(this.win, 'layers') &&
+      isExperimentOn(this.win, 'layers-prioritization');
   }
 
   /** @override */
@@ -145,10 +152,7 @@ export class AmpImageSlider extends AMP.BaseElement {
     );
 
     // TODO(kqian): remove this after layer launch
-    if (
-      !isExperimentOn(this.win, 'layers') ||
-      !isExperimentOn(this.win, 'layers-prioritization')
-    ) {
+    if (!this.useLayersPrioritization_) {
       // see comment in layoutCallback
       // When layers not enabled
       const owners = Services.ownersForDoc(this.element);

extensions/amp-live-list/0.1/amp-live-list.js

@@ -23,6 +23,7 @@ import {AmpEvents} from '../../../src/amp-events';
 import {CSS} from '../../../build/amp-live-list-0.1.css';
 import {Layout} from '../../../src/layout';
 import {childElementByAttr} from '../../../src/dom';
+import {getMode} from '../../../src/mode';
 import {isExperimentOn} from '../../../src/experiments';
 import {user, userAssert} from '../../../src/log';
 
@@ -998,7 +999,7 @@ export class AmpLiveList extends AMP.BaseElement {
    * @return {boolean}
    */
   isElementBelowViewport_(element) {
-    if (isExperimentOn(this.win, 'layers')) {
+    if (getMode().localDev && isExperimentOn(this.win, 'layers')) {
       // Well, if the scroller is above the viewport, but the element is way
       // down in the box, is it above or below?
       return this.viewport_.getLayoutRect(element).top > 0;

src/base-element.js

@@ -1037,7 +1037,7 @@ export class BaseElement {
    */
   declareLayer(opt_element) {
     devAssert(
-      isExperimentOn(this.win, 'layers'),
+      getMode().localDev && isExperimentOn(this.win, 'layers'),
       'Layers must be enabled to declare layer.'
     );
     if (opt_element) {

src/custom-element.js

@@ -854,7 +854,7 @@ function createBaseCustomElementClass(win) {
         // Resources can now be initialized since the ampdoc is now available.
         this.resources_ = Services.resourcesForDoc(this.ampdoc_);
       }
-      if (isExperimentOn(this.ampdoc_.win, 'layers')) {
+      if (getMode().localDev && isExperimentOn(this.ampdoc_.win, 'layers')) {
         if (!this.layers_) {
           // Resources can now be initialized since the ampdoc is now available.
           this.layers_ = Services.layersForDoc(this.ampdoc_);
@@ -1000,7 +1000,7 @@ function createBaseCustomElementClass(win) {
 
       this.isConnected_ = false;
       this.getResources().remove(this);
-      if (isExperimentOn(this.ampdoc_.win, 'layers')) {
+      if (getMode().localDev && isExperimentOn(this.ampdoc_.win, 'layers')) {
         this.getLayers().remove(this);
       }
       this.implementation_.detachedCallback();

src/inabox/inabox-viewport.js

@@ -21,6 +21,7 @@ import {ViewportBindingDef} from '../service/viewport/viewport-binding-def';
 import {ViewportImpl} from '../service/viewport/viewport-impl';
 import {canInspectWindow} from '../iframe-helper';
 import {dev, devAssert} from '../log';
+import {getMode} from '../mode';
 import {getPositionObserver} from '../../ads/inabox/position-observer';
 import {iframeMessagingClientFor} from './inabox-iframe-messaging-client';
 import {isExperimentOn} from '../experiments';
@@ -152,7 +153,7 @@ export class ViewportBindingInabox {
     );
 
     /** @private @const {boolean} */
-    this.useLayers_ = isExperimentOn(this.win, 'layers');
+    this.useLayers_ = getMode().localDev && isExperimentOn(this.win, 'layers');
 
     /** @private {?../../ads/inabox/position-observer.PositionObserver} */
     this.topWindowPositionObserver_ = null;

src/service/resource.js

@@ -19,6 +19,7 @@ import {Layout} from '../layout';
 import {Services} from '../services';
 import {computedStyle, toggle} from '../style';
 import {dev, devAssert} from '../log';
+import {getMode} from '../mode';
 import {isBlockedByConsent} from '../error';
 import {isExperimentOn} from '../experiments';
 import {
@@ -214,13 +215,12 @@ export class Resource {
     this.loadPromiseResolve_ = deferred.resolve;
 
     /** @private @const {boolean} */
-    this.useLayers_ = isExperimentOn(this.hostWin, 'layers');
+    this.useLayers_ =
+      getMode().localDev && isExperimentOn(this.hostWin, 'layers');
 
     /** @private @const {boolean} */
-    this.useLayersPrioritization_ = isExperimentOn(
-      this.hostWin,
-      'layers-prioritization'
-    );
+    this.useLayersPrioritization_ =
+      this.useLayers_ && isExperimentOn(this.hostWin, 'layers-prioritization');
   }
 
   /**
@@ -749,7 +749,7 @@ export class Resource {
 
   /** @return {!ViewportRatioDef} */
   getDistanceViewportRatio() {
-    if (this.useLayers_ && this.useLayersPrioritization_) {
+    if (this.useLayersPrioritization_) {
       const {element} = this;
       return {
         distance: element
@@ -811,7 +811,7 @@ export class Resource {
     }
     const {distance, scrollPenalty, viewportHeight} =
       opt_viewportRatio || this.getDistanceViewportRatio();
-    if (this.useLayers_ && this.useLayersPrioritization_) {
+    if (this.useLayersPrioritization_) {
       return dev().assertNumber(distance) < multiplier;
     }
     if (typeof distance == 'boolean') {

src/service/resources-impl.js

@@ -27,6 +27,7 @@ import {closest, hasNextNodeInDocumentOrder} from '../dom';
 import {computedStyle} from '../style';
 import {dev, devAssert, user} from '../log';
 import {dict, hasOwn} from '../utils/object';
+import {getMode} from '../mode';
 import {getSourceUrl, isProxyOrigin} from '../url';
 import {checkAndFix as ieMediaCheckAndFix} from './ie-media-bug';
 import {isArray} from '../types';
@@ -402,16 +403,14 @@ export class Resources {
     this.queue_ = new TaskQueue();
 
     /** @private @const {boolean} */
-    this.useLayers_ = isExperimentOn(this.win, 'layers');
+    this.useLayers_ = getMode().localDev && isExperimentOn(this.win, 'layers');
 
     /** @private @const {boolean} */
-    this.useLayersPrioritization_ = isExperimentOn(
-      this.win,
-      'layers-prioritization'
-    );
+    this.useLayersPrioritization_ =
+      this.useLayers_ && isExperimentOn(this.win, 'layers-prioritization');
 
     let boundScorer;
-    if (this.useLayers_ && this.useLayersPrioritization_) {
+    if (this.useLayersPrioritization_) {
       boundScorer = this.calcTaskScoreLayers_.bind(this);
     } else {
       boundScorer = this.calcTaskScore_.bind(this);

src/service/viewport/viewport-binding-ios-embed-sd.js

@@ -28,6 +28,7 @@ import {
   setInitialDisplay,
 } from '../../style';
 import {dev} from '../../log';
+import {getMode} from '../../mode';
 import {htmlFor} from '../../static-template';
 import {isExperimentOn} from '../../experiments';
 import {layoutRectLtwh} from '../../layout-rect';
@@ -170,7 +171,7 @@ export class ViewportBindingIosEmbedShadowRoot_ {
     this.boundResizeEventListener_ = this.onResized_.bind(this);
 
     /** @private @const {boolean} */
-    this.useLayers_ = isExperimentOn(this.win, 'layers');
+    this.useLayers_ = getMode().localDev && isExperimentOn(this.win, 'layers');
 
     /** @private {boolean} */
     this.bodySyncScheduled_ = false;

src/service/viewport/viewport-binding-ios-embed-wrapper.js

@@ -22,6 +22,7 @@ import {
 } from './viewport-binding-def';
 import {computedStyle, px, setImportantStyles} from '../../style';
 import {dev} from '../../log';
+import {getMode} from '../../mode';
 import {isExperimentOn} from '../../experiments';
 import {layoutRectLtwh} from '../../layout-rect';
 import {waitForBodyOpen} from '../../dom';
@@ -74,7 +75,7 @@ export class ViewportBindingIosEmbedWrapper_ {
     this.boundResizeEventListener_ = () => this.resizeObservable_.fire();
 
     /** @private @const {boolean} */
-    this.useLayers_ = isExperimentOn(this.win, 'layers');
+    this.useLayers_ = getMode().localDev && isExperimentOn(this.win, 'layers');
 
     /** @private {number} */
     this.paddingTop_ = 0;

src/service/viewport/viewport-binding-natural.js

@@ -22,6 +22,7 @@ import {
 } from './viewport-binding-def';
 import {computedStyle, px, setImportantStyles} from '../../style';
 import {dev} from '../../log';
+import {getMode} from '../../mode';
 import {isExperimentOn} from '../../experiments';
 import {layoutRectLtwh} from '../../layout-rect';
 
@@ -67,7 +68,7 @@ export class ViewportBindingNatural_ {
     this.boundResizeEventListener_ = () => this.resizeObservable_.fire();
 
     /** @private @const {boolean} */
-    this.useLayers_ = isExperimentOn(this.win, 'layers');
+    this.useLayers_ = getMode().localDev && isExperimentOn(this.win, 'layers');
 
     dev().fine(TAG_, 'initialized natural viewport');
   }

src/service/viewport/viewport-impl.js

@@ -139,7 +139,7 @@ export class ViewportImpl {
     this.originalViewportMetaString_ = undefined;
 
     /** @private @const {boolean} */
-    this.useLayers_ = isExperimentOn(win, 'layers');
+    this.useLayers_ = getMode().localDev && isExperimentOn(win, 'layers');
     if (this.useLayers_) {
       installLayersServiceForDoc(
         ampdoc,