perf($animate): listen for document visibility changes

Accessing the document for the hidden state is costly for
platforms like Electron.

Closes #14066

Author: Narretz

src/AngularPublic.js

@@ -65,6 +65,7 @@
   $ControllerProvider,
   $DateProvider,
   $DocumentProvider,
+  $$IsDocumentHiddenProvider,
   $ExceptionHandlerProvider,
   $FilterProvider,
   $$ForceReflowProvider,
@@ -227,6 +228,7 @@ function publishExternalAPI(angular) {
         $cacheFactory: $CacheFactoryProvider,
         $controller: $ControllerProvider,
         $document: $DocumentProvider,
+        $$isDocumentHidden: $$IsDocumentHiddenProvider,
         $exceptionHandler: $ExceptionHandlerProvider,
         $filter: $FilterProvider,
         $$forceReflow: $$ForceReflowProvider,

src/ng/animateRunner.js

@@ -28,8 +28,8 @@ var $$AnimateAsyncRunFactoryProvider = function() {
 };
 
 var $$AnimateRunnerFactoryProvider = function() {
-  this.$get = ['$q', '$sniffer', '$$animateAsyncRun', '$document', '$timeout',
-       function($q,   $sniffer,   $$animateAsyncRun,   $document,   $timeout) {
+  this.$get = ['$q', '$sniffer', '$$animateAsyncRun', '$$isDocumentHidden', '$timeout',
+       function($q,   $sniffer,   $$animateAsyncRun,   $$isDocumentHidden,   $timeout) {
 
     var INITIAL_STATE = 0;
     var DONE_PENDING_STATE = 1;
@@ -85,7 +85,7 @@ var $$AnimateRunnerFactoryProvider = function() {
 
         // the document may not be ready or attached
         // to the module for some internal tests
-        if (doc && doc.hidden) {
+        if ($$isDocumentHidden()) {
           timeoutTick(fn);
         } else {
           rafTick(fn);

src/ng/document.js

@@ -30,3 +30,19 @@ function $DocumentProvider() {
     return jqLite(window.document);
   }];
 }
+
+
+function $$IsDocumentHiddenProvider() {
+  this.$get = ['$document', function($document) {
+    var doc = $document[0];
+    var hidden = doc && doc.hidden;
+
+    $document.on('visibilitychange', function() {
+      hidden = doc.hidden;
+    });
+
+    return function() {
+      return hidden;
+    };
+  }];
+}

src/ngAnimate/animateQueue.js

@@ -97,8 +97,10 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
 
   this.$get = ['$$rAF', '$rootScope', '$rootElement', '$document', '$$HashMap',
                '$$animation', '$$AnimateRunner', '$templateRequest', '$$jqLite', '$$forceReflow',
+               '$$isDocumentHidden',
        function($$rAF,   $rootScope,   $rootElement,   $document,   $$HashMap,
-                $$animation,   $$AnimateRunner,   $templateRequest,   $$jqLite,   $$forceReflow) {
+                $$animation,   $$AnimateRunner,   $templateRequest,   $$jqLite,   $$forceReflow,
+                $$isDocumentHidden) {
 
     var activeAnimationsLookup = new $$HashMap();
     var disabledElementsLookup = new $$HashMap();
@@ -336,7 +338,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
       // past this point if not enabled
       // Animations are also disabled if the document is currently hidden (page is not visible
       // to the user), because browsers slow down or do not flush calls to requestAnimationFrame
-      var skipAnimations = !animationsEnabled || $document[0].hidden || disabledElementsLookup.get(node);
+      var skipAnimations = !animationsEnabled || $$isDocumentHidden() || disabledElementsLookup.get(node);
       var existingAnimation = (!skipAnimations && activeAnimationsLookup.get(node)) || {};
       var hasExistingAnimation = !!existingAnimation.state;
 

test/ng/animateRunnerSpec.js

@@ -163,14 +163,13 @@ describe("$$AnimateRunner", function() {
   }));
 
   it("should use timeouts to trigger async operations when the document is hidden", function() {
-    var doc;
+    var hidden = true;
 
     module(function($provide) {
-      doc = jqLite({
-        body: document.body,
-        hidden: true
+
+      $provide.value('$$isDocumentHidden', function() {
+        return hidden;
       });
-      $provide.value('$document', doc);
     });
 
     inject(function($$AnimateRunner, $rootScope, $$rAF, $timeout) {
@@ -184,7 +183,7 @@ describe("$$AnimateRunner", function() {
       $timeout.flush();
       expect(spy).toHaveBeenCalled();
 
-      doc[0].hidden = false;
+      hidden = false;
 
       spy = jasmine.createSpy();
       runner = new $$AnimateRunner();

test/ngAnimate/animateSpec.js

@@ -156,14 +156,12 @@ describe("animations", function() {
     }));
 
     it("should skip animations entirely if the document is hidden", function() {
-      var doc;
+      var hidden = true;
 
       module(function($provide) {
-        doc = jqLite({
-          body: document.body,
-          hidden: true
+        $provide.value('$$isDocumentHidden', function() {
+          return hidden;
         });
-        $provide.value('$document', doc);
       });
 
       inject(function($animate, $rootScope) {
@@ -172,7 +170,7 @@ describe("animations", function() {
         expect(capturedAnimation).toBeFalsy();
         expect(element[0].parentNode).toEqual(parent[0]);
 
-        doc[0].hidden = false;
+        hidden = false;
 
         $animate.leave(element);
         $rootScope.$digest();