feature(viewer): read csi from viewer params

examples/viewer.html

@@ -194,7 +194,8 @@
         paddingTop: this.header./*OK*/offsetHeight,
         visibilityState: this.visibilityState_,
         prerenderSize: this.prerenderSize_,
-        viewerorigin: parseUrl(window.location.href).origin
+        viewerorigin: parseUrl(window.location.href).origin,
+        csi: 0
       };
       log('Params:' + JSON.stringify(params));
 

src/performance.js

@@ -213,7 +213,7 @@ export class Performance {
     opt_from = opt_from == undefined ? null : opt_from;
     opt_value = opt_value == undefined ? timer.now() : opt_value;
 
-    if (this.viewer_) {
+    if (this.viewer_ && this.viewer_.isPerformanceTrackingOn()) {
       this.viewer_.tick({
         'label': label,
         'from': opt_from,
@@ -242,7 +242,7 @@ export class Performance {
    * Calls the "flushTicks" function on the viewer.
    */
   flush() {
-    if (this.viewer_) {
+    if (this.viewer_ && this.viewer_.isPerformanceTrackingOn()) {
       this.viewer_.flushTicks();
     }
   }
@@ -282,6 +282,12 @@ export class Performance {
       return;
     }
 
+    if (!this.viewer_.isPerformanceTrackingOn()) {
+      // drop all queued ticks to not leak
+      this.events_.length = 0;
+      return;
+    }
+
     this.events_.forEach(tickEvent => {
       this.viewer_.tick(tickEvent);
     });

src/service/framerate-impl.js

@@ -58,17 +58,18 @@ export class Framerate {
      */
     this.loadedAd_ = false;
 
-    const viewer = viewerFor(this.win);
+    /** @private @const {!Viewer} */
+    this.viewer_ = viewerFor(this.win);
 
     /**
      * We do not make measurements when the window is hidden, because
      * animation frames not not fire in that case.
      * @private {boolean}
      */
-    this.isActive_ = viewer.isVisible();
+    this.isActive_ = this.isActive();
 
-    viewer.onVisibilityChanged(() => {
-      this.isActive_ = viewer.isVisible();
+    this.viewer_.onVisibilityChanged(() => {
+      this.isActive_ = this.isActive();
       this.reset_();
       if (this.isActive_) {
         this.collect();
@@ -78,6 +79,15 @@ export class Framerate {
     this.collect();
   }
 
+  /**
+   * Framerate instrumentation should only be on if viewer is visible
+   * and csi is actually on.
+   * @return {boolean}
+   */
+  isActive() {
+    return this.viewer_.isPerformanceTrackingOn() && this.viewer_.isVisible();
+  }
+
   /**
    * Call this when something interesting is about to happen on screen.
    * This class will then measure the framerate for the next few seconds.

src/service/viewer-impl.js

@@ -234,6 +234,10 @@ export class Viewer {
         this.paddingTop_;
     log.fine(TAG_, '- padding-top:', this.paddingTop_);
 
+    /** @private @const {boolean} */
+    this.performanceTracking_ = this.params_['csi'] === '1';
+    log.fine(TAG_, '- performanceTracking:', this.performanceTracking_);
+
     /** @private {boolean} */
     this.hasBeenVisible_ = this.isVisible();
 
@@ -393,6 +397,14 @@ export class Viewer {
     return this.isRuntimeOn_;
   }
 
+  /**
+   * Identifies if the viewer is recording instrumentation.
+   * @return {boolean}
+   */
+  isPerformanceTrackingOn() {
+    return this.performanceTracking_;
+  }
+
   /**
    */
   toggleRuntime() {

test/functional/test-framerate.js

@@ -24,6 +24,7 @@ describe('the framerate service', () => {
   let lastRafCallback;
   let call = 0;
   let visible;
+  let csiOn;
   let performance;
   let viewer;
   let sandbox;
@@ -34,6 +35,7 @@ describe('the framerate service', () => {
     clock = sandbox.useFakeTimers();
     lastRafCallback = null;
     visible = true;
+    csiOn = true;
     performance = {
       tickDelta: sinon.spy(),
       flush: sinon.spy()
@@ -42,6 +44,9 @@ describe('the framerate service', () => {
       isVisible: () => {
         return visible;
       },
+      isPerformanceTrackingOn() {
+        return csiOn;
+      },
       onVisibilityChanged: sinon.spy()
     };
     win = {
@@ -164,4 +169,29 @@ describe('the framerate service', () => {
     expect(performance.tickDelta.args[2][0]).to.equal('fps');
     expect(performance.tickDelta.args[3][0]).to.equal('fal');
   });
+
+  it('respects viewer csi flag', () => {
+    csiOn = false;
+
+    fr = installFramerateService(win);
+    expect(viewer.onVisibilityChanged.callCount).to.equal(1);
+    expect(fr.isActive_).to.be.false;
+    fr.collect();
+    expect(fr.requestedFrame_).to.be.null;
+    visible = true;
+    viewer.onVisibilityChanged.args[0][0]();
+    expect(fr.isActive_).to.be.false;
+    fr.collect();
+    expect(fr.requestedFrame_).to.be.null;
+    viewer.onVisibilityChanged.args[0][0](false);
+    expect(fr.isActive_).to.be.false;
+    expect(fr.requestedFrame_).to.be.null;
+    fr.collect();
+    expect(fr.requestedFrame_).to.be.null;
+
+    csiOn = true;
+    fr.collect();
+    viewer.onVisibilityChanged.args[0][0](false);
+    expect(fr.requestedFrame_).to.not.be.null;
+  });
 });

test/functional/test-performance.js

@@ -142,67 +142,116 @@ describe('performance', () => {
       flushTicksSpy = sandbox.stub(viewer, 'flushTicks');
     });
 
-    it('should forward all queued tick events', () => {
-      perf.tick('start0');
-      clock.tick(1);
-      perf.tick('start1', 'start0');
+    describe('and performanceTracking is off', () => {
 
-      expect(perf.events_.length).to.equal(2);
+      beforeEach(() => {
+        sandbox.stub(viewer, 'isPerformanceTrackingOn')
+            .returns(false);
+      });
 
-      perf.coreServicesAvailable();
+      it('should not forward queued ticks', () => {
+        perf.tick('start0');
+        clock.tick(1);
+        perf.tick('start1', 'start0');
 
-      expect(tickSpy.firstCall.args[0]).to.be.jsonEqual({
-        label: 'start0',
-        from: null,
-        value: 0,
+        expect(perf.events_.length).to.equal(2);
+
+        perf.coreServicesAvailable();
+        perf.flushQueuedTicks_();
+        perf.flush();
+
+        expect(perf.events_.length).to.equal(0);
+
+        expect(tickSpy.callCount).to.equal(0);
+        expect(flushTicksSpy.callCount).to.equal(0);
       });
-      expect(tickSpy.secondCall.args[0]).to.be.jsonEqual({
-        label: 'start1',
-        from: 'start0',
-        value: 1,
+
+      it('should ignore all calls to tick', () => {
+        perf.coreServicesAvailable();
+
+        perf.tick('start0');
+        expect(tickSpy.callCount).to.equal(0);
+      });
+
+      it('should ignore all calls to flush', () => {
+        perf.coreServicesAvailable();
+
+        perf.tick('start0');
+        perf.flush();
+        expect(flushTicksSpy.callCount).to.equal(0);
       });
     });
 
-    it('should have no more queued tick events after flush', () => {
-      perf.tick('start0');
-      perf.tick('start1');
+    describe('and performanceTracking is on', () => {
 
-      expect(perf.events_.length).to.equal(2);
+      beforeEach(() => {
+        sandbox.stub(viewer, 'isPerformanceTrackingOn')
+            .returns(true);
+      });
 
-      perf.coreServicesAvailable();
+      it('should forward all queued tick events', () => {
+        perf.tick('start0');
+        clock.tick(1);
+        perf.tick('start1', 'start0');
 
-      expect(perf.events_.length).to.equal(0);
-    });
+        expect(perf.events_.length).to.equal(2);
 
-    it('should forward tick events', () => {
-      perf.coreServicesAvailable();
+        perf.coreServicesAvailable();
 
-      clock.tick(100);
-      perf.tick('start0');
-      perf.tick('start1', 'start0', 300);
+        expect(tickSpy.firstCall.args[0]).to.be.jsonEqual({
+          label: 'start0',
+          from: null,
+          value: 0,
+        });
+        expect(tickSpy.secondCall.args[0]).to.be.jsonEqual({
+          label: 'start1',
+          from: 'start0',
+          value: 1,
+        });
+      });
 
-      expect(tickSpy.firstCall.args[0]).to.be.jsonEqual({
-        label: 'start0',
-        from: null,
-        value: 100,
+      it('should have no more queued tick events after flush', () => {
+        perf.tick('start0');
+        perf.tick('start1');
+
+        expect(perf.events_.length).to.equal(2);
+
+        perf.coreServicesAvailable();
+
+        expect(perf.events_.length).to.equal(0);
       });
-      expect(tickSpy.secondCall.args[0]).to.be.jsonEqual({
-        label: 'start1',
-        from: 'start0',
-        value: 300,
+
+      it('should forward tick events', () => {
+        perf.coreServicesAvailable();
+
+        clock.tick(100);
+        perf.tick('start0');
+        perf.tick('start1', 'start0', 300);
+
+        expect(tickSpy.firstCall.args[0]).to.be.jsonEqual({
+          label: 'start0',
+          from: null,
+          value: 100,
+        });
+        expect(tickSpy.secondCall.args[0]).to.be.jsonEqual({
+          label: 'start1',
+          from: 'start0',
+          value: 300,
+        });
       });
-    });
 
-    it('should call the flush callback', () => {
-      expect(flushTicksSpy.callCount).to.equal(0);
-      // coreServicesAvailable calls flush once.
-      perf.coreServicesAvailable();
-      expect(flushTicksSpy.callCount).to.equal(1);
-      perf.flush();
-      expect(flushTicksSpy.callCount).to.equal(2);
-      perf.flush();
-      expect(flushTicksSpy.callCount).to.equal(3);
+      it('should call the flush callback', () => {
+        expect(flushTicksSpy.callCount).to.equal(0);
+        // coreServicesAvailable calls flush once.
+        perf.coreServicesAvailable();
+        expect(flushTicksSpy.callCount).to.equal(1);
+        perf.flush();
+        expect(flushTicksSpy.callCount).to.equal(2);
+        perf.flush();
+        expect(flushTicksSpy.callCount).to.equal(3);
+      });
     });
+
   });
 
   describe('coreServicesAvailable', () => {

test/functional/test-viewer.js

@@ -98,6 +98,20 @@ describe('Viewer', () => {
     expect(viewer.getPrerenderSize()).to.equal(3);
   });
 
+  it('should configure performance tracking', () => {
+    windowApi.location.hash = '';
+    let viewer = new Viewer(windowApi);
+    expect(viewer.isPerformanceTrackingOn()).to.be.false;
+
+    windowApi.location.hash = '#csi=1';
+    viewer = new Viewer(windowApi);
+    expect(viewer.isPerformanceTrackingOn()).to.be.true;
+
+    windowApi.location.hash = '#csi=0';
+    viewer = new Viewer(windowApi);
+    expect(viewer.isPerformanceTrackingOn()).to.be.false;
+  });
+
   it('should configure correctly for iOS embedding', () => {
     windowApi.name = '__AMP__viewportType=natural';
     windowApi.parent = {};