perfetto-ui: Checkerboard on no data

We left it up to individual tracks to checkerboard on no data
which most weren't doing. Instead handle this in the super
class.

Change-Id: Ibf54db77363f7b1c09a427f0749f62e5aebd8108

ui/src/frontend/checkerboard.ts

diff --git a/ui/src/frontend/checkerboard.ts b/ui/src/frontend/checkerboard.ts
index 6a126c5..6ae9487 100644
--- a/ui/src/frontend/checkerboard.ts
+++ b/ui/src/frontend/checkerboard.ts
@@ -18,7 +18,7 @@
 /**
  * Checker board the range [leftPx, rightPx].
  */
-function checkerboard(
+export function checkerboard(
     ctx: CanvasRenderingContext2D,
     heightPx: number,
     leftPx: number,

ui/src/frontend/track.ts

diff --git a/ui/src/frontend/track.ts b/ui/src/frontend/track.ts
index acd475c..2059cf6 100644
--- a/ui/src/frontend/track.ts
+++ b/ui/src/frontend/track.ts
@@ -14,6 +14,7 @@
 
 import {TrackState} from '../common/state';
 import {TrackData} from '../common/track_data';
+import {checkerboard} from './checkerboard';
 
 import {globals} from './globals';
 
@@ -65,6 +66,13 @@
 
   render(ctx: CanvasRenderingContext2D) {
     globals.frontendLocalState.addVisibleTrack(this.trackState.id);
-    this.renderCanvas(ctx);
+    if (this.data() === undefined) {
+      const {visibleWindowTime, timeScale} = globals.frontendLocalState;
+      const startPx = Math.floor(timeScale.timeToPx(visibleWindowTime.start));
+      const endPx = Math.ceil(timeScale.timeToPx(visibleWindowTime.end));
+      checkerboard(ctx, this.getHeight(), startPx, endPx);
+    } else {
+      this.renderCanvas(ctx);
+    }
   }
 }