tor-browser

test_layout-reflows-observer.js (9044B)

---

/* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test the LayoutChangesObserver

/* eslint-disable mozilla/use-chromeutils-generateqi */

var {
 getLayoutChangesObserver,
 releaseLayoutChangesObserver,
 LayoutChangesObserver,
} = require("resource://devtools/server/actors/reflow.js");
const EventEmitter = require("resource://devtools/shared/event-emitter.js");

// Override set/clearTimeout on LayoutChangesObserver to avoid depending on
// time in this unit test. This means that LayoutChangesObserver.eventLoopTimer
// will be the timeout callback instead of the timeout itself, so test cases
// will need to execute it to fake a timeout
LayoutChangesObserver.prototype._setTimeout = cb => cb;
LayoutChangesObserver.prototype._clearTimeout = function () {};

// Mock the targetActor since we only really want to test the LayoutChangesObserver
// and don't want to depend on a window object, nor want to test protocol.js
class MockTargetActor extends EventEmitter {
 constructor() {
   super();
   this.docShell = new MockDocShell();
   this.window = new MockWindow(this.docShell);
   this.windows = [this.window];
   this.attached = true;
 }

 get chromeEventHandler() {
   return this.docShell.chromeEventHandler;
 }

 isDestroyed() {
   return false;
 }
}

class MockWindow {
 constructor(docShell) {
   this.docShell = docShell;
 }
 QueryInterface() {
   const self = this;
   return {
     getInterface() {
       return {
         QueryInterface() {
           return self.docShell;
         },
       };
     },
   };
 }
 setTimeout(cb) {
   // Simply return the cb itself so that we can execute it in the test instead
   // of depending on a real timeout
   return cb;
 }
 clearTimeout() {}
}

class MockDocShell {
 constructor() {
   this.observer = null;
 }
 addWeakReflowObserver(observer) {
   this.observer = observer;
 }
 removeWeakReflowObserver() {}
 get chromeEventHandler() {
   return {
     addEventListener: (type, cb) => {
       if (type === "resize") {
         this.resizeCb = cb;
       }
     },
     removeEventListener: (type, cb) => {
       if (type === "resize" && cb === this.resizeCb) {
         this.resizeCb = null;
       }
     },
   };
 }
 mockResize() {
   if (this.resizeCb) {
     this.resizeCb();
   }
 }
}

function run_test() {
 instancesOfObserversAreSharedBetweenWindows();
 eventsAreBatched();
 noEventsAreSentWhenThereAreNoReflowsAndLoopTimeouts();
 observerIsAlreadyStarted();
 destroyStopsObserving();
 stoppingAndStartingSeveralTimesWorksCorrectly();
 reflowsArentStackedWhenStopped();
 stackedReflowsAreResetOnStop();
}

function instancesOfObserversAreSharedBetweenWindows() {
 info(
   "Checking that when requesting twice an instances of the observer " +
     "for the same WindowGlobalTargetActor, the instance is shared"
 );

 info("Checking 2 instances of the observer for the targetActor 1");
 const targetActor1 = new MockTargetActor();
 const obs11 = getLayoutChangesObserver(targetActor1);
 const obs12 = getLayoutChangesObserver(targetActor1);
 Assert.equal(obs11, obs12);

 info("Checking 2 instances of the observer for the targetActor 2");
 const targetActor2 = new MockTargetActor();
 const obs21 = getLayoutChangesObserver(targetActor2);
 const obs22 = getLayoutChangesObserver(targetActor2);
 Assert.equal(obs21, obs22);

 info(
   "Checking that observers instances for 2 different targetActors are " +
     "different"
 );
 Assert.notEqual(obs11, obs21);

 releaseLayoutChangesObserver(targetActor1);
 releaseLayoutChangesObserver(targetActor1);
 releaseLayoutChangesObserver(targetActor2);
 releaseLayoutChangesObserver(targetActor2);
}

function eventsAreBatched() {
 info(
   "Checking that reflow events are batched and only sent when the " +
     "timeout expires"
 );

 // Note that in this test, we mock the target actor and its window property, so we also
 // mock the setTimeout/clearTimeout mechanism and just call the callback manually
 const targetActor = new MockTargetActor();
 const observer = getLayoutChangesObserver(targetActor);

 const reflowsEvents = [];
 const onReflows = reflows => reflowsEvents.push(reflows);
 observer.on("reflows", onReflows);

 const resizeEvents = [];
 const onResize = () => resizeEvents.push("resize");
 observer.on("resize", onResize);

 info("Fake one reflow event");
 targetActor.window.docShell.observer.reflow();
 info("Checking that no batched reflow event has been emitted");
 Assert.equal(reflowsEvents.length, 0);

 info("Fake another reflow event");
 targetActor.window.docShell.observer.reflow();
 info("Checking that still no batched reflow event has been emitted");
 Assert.equal(reflowsEvents.length, 0);

 info("Fake a few of resize events too");
 targetActor.window.docShell.mockResize();
 targetActor.window.docShell.mockResize();
 targetActor.window.docShell.mockResize();
 info("Checking that still no batched resize event has been emitted");
 Assert.equal(resizeEvents.length, 0);

 info("Faking timeout expiration and checking that events are sent");
 observer.eventLoopTimer();
 Assert.equal(reflowsEvents.length, 1);
 Assert.equal(reflowsEvents[0].length, 2);
 Assert.equal(resizeEvents.length, 1);

 observer.off("reflows", onReflows);
 observer.off("resize", onResize);
 releaseLayoutChangesObserver(targetActor);
}

function noEventsAreSentWhenThereAreNoReflowsAndLoopTimeouts() {
 info(
   "Checking that if no reflows were detected and the event batching " +
     "loop expires, then no reflows event is sent"
 );

 const targetActor = new MockTargetActor();
 const observer = getLayoutChangesObserver(targetActor);

 const reflowsEvents = [];
 const onReflows = reflows => reflowsEvents.push(reflows);
 observer.on("reflows", onReflows);

 info("Faking timeout expiration and checking for reflows");
 observer.eventLoopTimer();
 Assert.equal(reflowsEvents.length, 0);

 observer.off("reflows", onReflows);
 releaseLayoutChangesObserver(targetActor);
}

function observerIsAlreadyStarted() {
 info("Checking that the observer is already started when getting it");

 const targetActor = new MockTargetActor();
 const observer = getLayoutChangesObserver(targetActor);
 Assert.ok(observer.isObserving);

 observer.stop();
 Assert.ok(!observer.isObserving);

 observer.start();
 Assert.ok(observer.isObserving);

 releaseLayoutChangesObserver(targetActor);
}

function destroyStopsObserving() {
 info("Checking that the destroying the observer stops it");

 const targetActor = new MockTargetActor();
 const observer = getLayoutChangesObserver(targetActor);
 Assert.ok(observer.isObserving);

 observer.destroy();
 Assert.ok(!observer.isObserving);

 releaseLayoutChangesObserver(targetActor);
}

function stoppingAndStartingSeveralTimesWorksCorrectly() {
 info(
   "Checking that the stopping and starting several times the observer" +
     " works correctly"
 );

 const targetActor = new MockTargetActor();
 const observer = getLayoutChangesObserver(targetActor);

 Assert.ok(observer.isObserving);
 observer.start();
 observer.start();
 observer.start();
 Assert.ok(observer.isObserving);

 observer.stop();
 Assert.ok(!observer.isObserving);

 observer.stop();
 observer.stop();
 Assert.ok(!observer.isObserving);

 releaseLayoutChangesObserver(targetActor);
}

function reflowsArentStackedWhenStopped() {
 info("Checking that when stopped, reflows aren't stacked in the observer");

 const targetActor = new MockTargetActor();
 const observer = getLayoutChangesObserver(targetActor);

 info("Stoping the observer");
 observer.stop();

 info("Faking reflows");
 targetActor.window.docShell.observer.reflow();
 targetActor.window.docShell.observer.reflow();
 targetActor.window.docShell.observer.reflow();

 info("Checking that reflows aren't recorded");
 Assert.equal(observer.reflows.length, 0);

 info("Starting the observer and faking more reflows");
 observer.start();
 targetActor.window.docShell.observer.reflow();
 targetActor.window.docShell.observer.reflow();
 targetActor.window.docShell.observer.reflow();

 info("Checking that reflows are recorded");
 Assert.equal(observer.reflows.length, 3);

 releaseLayoutChangesObserver(targetActor);
}

function stackedReflowsAreResetOnStop() {
 info("Checking that stacked reflows are reset on stop");

 const targetActor = new MockTargetActor();
 const observer = getLayoutChangesObserver(targetActor);

 targetActor.window.docShell.observer.reflow();
 Assert.equal(observer.reflows.length, 1);

 observer.stop();
 Assert.equal(observer.reflows.length, 0);

 targetActor.window.docShell.observer.reflow();
 Assert.equal(observer.reflows.length, 0);

 observer.start();
 Assert.equal(observer.reflows.length, 0);

 targetActor.window.docShell.observer.reflow();
 Assert.equal(observer.reflows.length, 1);

 releaseLayoutChangesObserver(targetActor);
}