add metric that counts times page hidden (#12394)

mapbox · Nov 21, 2022 · e8f42c4 · e8f42c4
1 parent 62f48bc
commit e8f42c4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/ui/map.js b/src/ui/map.js
@@ -393,6 +393,7 @@ class Map extends Camera {
     _language: ?string | ?string[];
     _worldview: ?string;
     _interactionRange: [number, number];
+    _visibilityHidden: number;
     _performanceMetricsCollection: boolean;
 
     // `_useExplicitProjection` indicates that a projection is set by a call to map.setProjection()
@@ -514,6 +515,7 @@ class Map extends Camera {
         this._averageElevation = new EasedVariable(0);
 
         this._interactionRange = [+Infinity, -Infinity];
+        this._visibilityHidden = 0;
 
         this._useExplicitProjection = false; // Fallback to stylesheet by default
 
@@ -543,6 +545,7 @@ class Map extends Camera {
         bindAll([
             '_onWindowOnline',
             '_onWindowResize',
+            '_onVisibilityChange',
             '_onMapScroll',
             '_contextLost',
             '_contextRestored'
@@ -563,6 +566,7 @@ class Map extends Camera {
             window.addEventListener('resize', this._onWindowResize, false);
             window.addEventListener('orientationchange', this._onWindowResize, false);
             window.addEventListener('webkitfullscreenchange', this._onWindowResize, false);
+            window.addEventListener('visibilitychange', this._onVisibilityChange, false);
         }
 
         this.handlers = new HandlerManager(this, options);
@@ -3290,6 +3294,7 @@ class Map extends Camera {
                     width: this.painter.width,
                     height: this.painter.height,
                     interactionRange: this._interactionRange,
+                    visibilityHidden: this._visibilityHidden,
                     terrainEnabled: !!this.painter.style.getTerrain(),
                     fogEnabled: !!this.painter.style.getFog(),
                     projection: this.painter.transform.projection,
@@ -3500,6 +3505,7 @@ class Map extends Camera {
             window.removeEventListener('orientationchange', this._onWindowResize, false);
             window.removeEventListener('webkitfullscreenchange', this._onWindowResize, false);
             window.removeEventListener('online', this._onWindowOnline, false);
+            window.removeEventListener('visibilitychange', this._onVisibilityChange, false);
         }
 
         const extension = this.painter.context.gl.getExtension('WEBGL_lose_context');
@@ -3581,6 +3587,12 @@ class Map extends Camera {
         }
     }
 
+    _onVisibilityChange() {
+        if (window.document.visibilityState === 'hidden') {
+            this._visibilityHidden++;
+        }
+    }
+
     /** @section {Debug features} */
 
     /**

diff --git a/src/util/live_performance.js b/src/util/live_performance.js
@@ -18,6 +18,7 @@ type LivePerformanceMetrics = {
 
 export type LivePerformanceData = {
     interactionRange: [number, number],
+    visibilityHidden: number,
     width: number,
     height: number,
     terrainEnabled: boolean,
@@ -144,6 +145,7 @@ export function getLivePerformanceMetrics(data: LivePerformanceData): LivePerfor
             }
         }
     }
+    addMetric(metrics.counters, "visibilityHidden", data.visibilityHidden);
 
     addMetric(metrics.attributes, "style", getStyle(resourceTimers));
     addMetric(metrics.attributes, "terrainEnabled", data.terrainEnabled ? "true" : "false");