Add some quick-and-dirty debug info for TileStore (#2887)

* Add some quick-and-dirty debug info for TileStore

I'm still in need of more detailed data in order to understand why big layout shifts happen in large calls. This adds a developer option to enable logging and a visual indicator for the state of the TileStore. The indicator should be useful for matching up the behavior I'm seeing in my recordings with the right timestamps.

* Reduce performance impact of checking for whether debug mode is enabled

---------

Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>

src/state/CallViewModel.ts

@@ -891,10 +891,9 @@ export class CallViewModel extends ViewModel {
     this.scope.state(),
   );
 
-  /**
-   * The layout of tiles in the call interface.
-   */
-  public readonly layout: Observable<Layout> = this.layoutMedia.pipe(
+  public readonly layoutInternals: Observable<
+    LayoutScanState & { layout: Layout }
+  > = this.layoutMedia.pipe(
     // Each layout will produce a set of tiles, and these tiles have an
     // observable indicating whether they're visible. We loop this information
     // back into the layout process by using switchScan.
@@ -949,10 +948,26 @@ export class CallViewModel extends ViewModel {
         visibleTiles: new Set(),
       },
     ),
+    this.scope.state(),
+  );
+
+  /**
+   * The layout of tiles in the call interface.
+   */
+  public readonly layout: Observable<Layout> = this.layoutInternals.pipe(
     map(({ layout }) => layout),
     this.scope.state(),
   );
 
+  /**
+   * The current generation of the tile store, exposed for debugging purposes.
+   */
+  public readonly tileStoreGeneration: Observable<number> =
+    this.layoutInternals.pipe(
+      map(({ tiles }) => tiles.generation),
+      this.scope.state(),
+    );
+
   public showSpotlightIndicators: Observable<boolean> = this.layout.pipe(
     map((l) => l.type !== "grid"),
     this.scope.state(),