diff --git a/CHANGELOG b/CHANGELOG
index ee47b46..a80bf0d 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -4,6 +4,7 @@
   Trace Processor:
     *
   UI:
+    * Flow events are now drawn as arrows for the currently selected slice.
     *
 
 
diff --git a/src/trace_processor/metrics/android/java_heap_histogram.sql b/src/trace_processor/metrics/android/java_heap_histogram.sql
index f7cddf2..bc81600 100644
--- a/src/trace_processor/metrics/android/java_heap_histogram.sql
+++ b/src/trace_processor/metrics/android/java_heap_histogram.sql
@@ -26,8 +26,13 @@
     'android.content.ContentProvider',
     'android.content.BroadcastReceiver',
     'android.content.Context',
+    'android.content.Intent',
+    'android.content.res.ApkAssets',
     'android.os.Handler',
-    'android.graphics.Bitmap')
+    'android.os.Parcel',
+    'android.graphics.Bitmap',
+    'android.graphics.BaseCanvas',
+    'com.android.server.am.PendingIntentRecord')
   UNION ALL
   SELECT child.id, parent.category
   FROM heap_graph_class child JOIN cls_visitor parent ON parent.cls_id = child.superclass_id
diff --git a/tools/gen_cc_proto_descriptor.py b/tools/gen_cc_proto_descriptor.py
index 458fc5f..0c2dc66 100755
--- a/tools/gen_cc_proto_descriptor.py
+++ b/tools/gen_cc_proto_descriptor.py
@@ -39,8 +39,8 @@
       binary, width=80, initial_indent='    ', subsequent_indent='     ')
 
   relative_target = os.path.relpath(target, gendir)
-  include_guard = relative_target.replace('/', '_').replace('.',
-                                                            '_').upper() + '_'
+  include_guard = relative_target.replace('\\', '_').replace('/', '_').replace(
+      '.', '_').upper() + '_'
 
   with open(target, 'wb') as f:
     f.write("""/*
diff --git a/ui/src/assets/common.scss b/ui/src/assets/common.scss
index 3cd754d..b56cfcb 100644
--- a/ui/src/assets/common.scss
+++ b/ui/src/assets/common.scss
@@ -534,6 +534,7 @@
   --collapsed-background: hsla(190, 49%, 97%, 1);
   --collapsed-transparent: hsla(190, 49%, 97%, 0);
   --expanded-background: hsl(215, 22%, 19%);
+  --expanded-transparent: hsl(215, 22%, 19%, 0);
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-rows: 1fr;
@@ -547,7 +548,7 @@
     margin-top: -1px;
   }
   &[collapsed=true] {
-    background-color: var(--collapsed-background-transparent);
+    background-color: var(--collapsed-transparent);
     .shell {
       border-right: 1px solid #c7d0db;
       background-color: var(--collapsed-background);
@@ -557,7 +558,7 @@
     };
   }
   &[collapsed=false] {
-    background-color: var(--expanded-background);
+    background-color: var(--expanded-transparent);
     color: white;
     font-weight: bold;
     .shell.flash {
diff --git a/ui/src/common/colorizer.ts b/ui/src/common/colorizer.ts
index 601f9b0..79105cf 100644
--- a/ui/src/common/colorizer.ts
+++ b/ui/src/common/colorizer.ts
@@ -127,6 +127,10 @@
   return Object.assign({}, MD_PALETTE[colorIdx]);
 }
 
+export function hueForSlice(sliceName: string): number {
+  return hash(sliceName, 360);
+}
+
 export function colorForThread(thread?: {pid?: number, tid: number}): Color {
   if (thread === undefined) {
     return Object.assign({}, GREY_COLOR);
diff --git a/ui/src/controller/flow_events_controller.ts b/ui/src/controller/flow_events_controller.ts
index f6f3dce..277af85 100644
--- a/ui/src/controller/flow_events_controller.ts
+++ b/ui/src/controller/flow_events_controller.ts
@@ -52,8 +52,8 @@
 
     const query = `
       select
-        f.slice_out, t1.track_id, t1.name, (t1.ts+t1.dur),
-        f.slice_in, t2.track_id, t2.name, t2.ts
+        f.slice_out, t1.track_id, t1.name, t1.ts, (t1.ts+t1.dur), t1.depth,
+        f.slice_in, t2.track_id, t2.name, t2.ts, (t2.ts+t2.dur), t2.depth
       from flow f
       join slice t1 on f.slice_out = t1.slice_id
       join slice t2 on f.slice_in = t2.slice_id
@@ -66,25 +66,33 @@
         const beginSliceId = res.columns[0].longValues![i];
         const beginTrackId = res.columns[1].longValues![i];
         const beginSliceName = res.columns[2].stringValues![i];
-        const beginTs = fromNs(res.columns[3].longValues![i]);
+        const beginSliceStartTs = fromNs(res.columns[3].longValues![i]);
+        const beginSliceEndTs = fromNs(res.columns[4].longValues![i]);
+        const beginDepth = res.columns[5].longValues![i];
 
-        const endSliceId = res.columns[4].longValues![i];
-        const endTrackId = res.columns[5].longValues![i];
-        const endSliceName = res.columns[6].stringValues![i];
-        const endTs = fromNs(res.columns[7].longValues![i]);
+        const endSliceId = res.columns[6].longValues![i];
+        const endTrackId = res.columns[7].longValues![i];
+        const endSliceName = res.columns[8].stringValues![i];
+        const endSliceStartTs = fromNs(res.columns[9].longValues![i]);
+        const endSliceEndTs = fromNs(res.columns[10].longValues![i]);
+        const endDepth = res.columns[11].longValues![i];
 
         flows.push({
           begin: {
             trackId: beginTrackId,
             sliceId: beginSliceId,
             sliceName: beginSliceName,
-            ts: beginTs
+            sliceStartTs: beginSliceStartTs,
+            sliceEndTs: beginSliceEndTs,
+            depth: beginDepth
           },
           end: {
             trackId: endTrackId,
             sliceId: endSliceId,
             sliceName: endSliceName,
-            ts: endTs
+            sliceStartTs: endSliceStartTs,
+            sliceEndTs: endSliceEndTs,
+            depth: endDepth
           }
         });
       }
diff --git a/ui/src/frontend/flow_events_renderer.ts b/ui/src/frontend/flow_events_renderer.ts
new file mode 100644
index 0000000..51d12f7
--- /dev/null
+++ b/ui/src/frontend/flow_events_renderer.ts
@@ -0,0 +1,272 @@
+// Copyright (C) 2020 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use size file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {hueForSlice} from '../common/colorizer';
+import {TRACK_SHELL_WIDTH} from './css_constants';
+import {FlowPoint, globals} from './globals';
+import {PanelVNode} from './panel';
+import {findUiTrackId} from './scroll_helper';
+import {SliceRect} from './track';
+import {TrackGroupPanel} from './track_group_panel';
+import {TrackPanel} from './track_panel';
+
+const TRACK_GROUP_CONNECTION_OFFSET = 5;
+const TRIANGLE_SIZE = 5;
+const CIRCLE_RADIUS = 3;
+const BEZIER_OFFSET = 30;
+
+type LineDirection = 'LEFT'|'RIGHT'|'UP'|'DOWN';
+type ConnectionType = 'TRACK'|'TRACK_GROUP';
+
+interface TrackPanelInfo {
+  panel: TrackPanel;
+  yStart: number;
+}
+
+interface TrackGroupPanelInfo {
+  panel: TrackGroupPanel;
+  yStart: number;
+  height: number;
+}
+
+function HasTrackId(obj: {}): obj is {trackId: number} {
+  return (obj as {trackId?: number}).trackId !== undefined;
+}
+
+function HasId(obj: {}): obj is {id: number} {
+  return (obj as {id?: number}).id !== undefined;
+}
+
+function HasTrackGroupId(obj: {}): obj is {trackGroupId: string} {
+  return (obj as {trackGroupId?: string}).trackGroupId !== undefined;
+}
+
+export class FlowEventsRendererArgs {
+  trackIdToTrackPanel: Map<number, TrackPanelInfo>;
+  groupIdToTrackGroupPanel: Map<string, TrackGroupPanelInfo>;
+
+  constructor(public canvasWidth: number, public canvasHeight: number) {
+    this.trackIdToTrackPanel = new Map<number, TrackPanelInfo>();
+    this.groupIdToTrackGroupPanel = new Map<string, TrackGroupPanelInfo>();
+  }
+
+  registerPanel(panel: PanelVNode, yStart: number, height: number) {
+    if (panel.state instanceof TrackPanel && HasId(panel.attrs)) {
+      const config = globals.state.tracks[panel.attrs.id].config;
+      if (HasTrackId(config)) {
+        this.trackIdToTrackPanel.set(
+            config.trackId, {panel: panel.state, yStart});
+      }
+    } else if (
+        panel.state instanceof TrackGroupPanel &&
+        HasTrackGroupId(panel.attrs)) {
+      this.groupIdToTrackGroupPanel.set(
+          panel.attrs.trackGroupId, {panel: panel.state, yStart, height});
+    }
+  }
+}
+
+export class FlowEventsRenderer {
+  private getTrackGroupIdByTrackId(trackId: number): string|undefined {
+    const uiTrackId = findUiTrackId(trackId);
+    return uiTrackId ? globals.state.tracks[uiTrackId].trackGroup : undefined;
+  }
+
+  private getTrackGroupYCoordinate(
+      args: FlowEventsRendererArgs, trackId: number): number|undefined {
+    const trackGroupId = this.getTrackGroupIdByTrackId(trackId);
+    if (!trackGroupId) {
+      return undefined;
+    }
+    const trackGroupInfo = args.groupIdToTrackGroupPanel.get(trackGroupId);
+    if (!trackGroupInfo) {
+      return undefined;
+    }
+    return trackGroupInfo.yStart + trackGroupInfo.height -
+        TRACK_GROUP_CONNECTION_OFFSET;
+  }
+
+  private getTrackYCoordinate(args: FlowEventsRendererArgs, trackId: number):
+      number|undefined {
+    return args.trackIdToTrackPanel.get(trackId) ?.yStart;
+  }
+
+  private getYConnection(
+      args: FlowEventsRendererArgs, trackId: number,
+      rect?: SliceRect): {y: number, connection: ConnectionType}|undefined {
+    if (!rect) {
+      const y = this.getTrackGroupYCoordinate(args, trackId);
+      if (y === undefined) {
+        return undefined;
+      }
+      return {y, connection: 'TRACK_GROUP'};
+    }
+    const y = (this.getTrackYCoordinate(args, trackId) || 0) + rect.top +
+        rect.height * 0.5;
+
+    return {
+      y: Math.min(Math.max(0, y), args.canvasHeight),
+      connection: 'TRACK'
+    };
+  }
+
+  private getXCoordinate(ts: number): number {
+    return globals.frontendLocalState.timeScale.timeToPx(ts);
+  }
+
+  private getSliceRect(args: FlowEventsRendererArgs, point: FlowPoint):
+      SliceRect|undefined {
+    const trackPanel = args.trackIdToTrackPanel.get(point.trackId) ?.panel;
+    if (!trackPanel) {
+      return undefined;
+    }
+    return trackPanel.getSliceRect(
+        point.sliceStartTs, point.sliceEndTs, point.depth);
+  }
+
+  render(ctx: CanvasRenderingContext2D, args: FlowEventsRendererArgs) {
+    ctx.save();
+    ctx.translate(TRACK_SHELL_WIDTH, 0);
+    ctx.rect(0, 0, args.canvasWidth - TRACK_SHELL_WIDTH, args.canvasHeight);
+    ctx.clip();
+
+    globals.boundFlows.forEach(flow => {
+      const beginSliceRect = this.getSliceRect(args, flow.begin);
+      const endSliceRect = this.getSliceRect(args, flow.end);
+
+      const beginYConnection =
+          this.getYConnection(args, flow.begin.trackId, beginSliceRect);
+      const endYConnection =
+          this.getYConnection(args, flow.end.trackId, endSliceRect);
+
+      if (!beginYConnection || !endYConnection) {
+        return;
+      }
+
+      let beginDir: LineDirection = 'LEFT';
+      let endDir: LineDirection = 'RIGHT';
+      if (beginYConnection.connection === 'TRACK_GROUP') {
+        beginDir = beginYConnection.y > endYConnection.y ? 'DOWN' : 'UP';
+      }
+      if (endYConnection.connection === 'TRACK_GROUP') {
+        endDir = endYConnection.y > beginYConnection.y ? 'DOWN' : 'UP';
+      }
+
+      const begin = {
+        x: this.getXCoordinate(flow.begin.sliceEndTs),
+        y: beginYConnection.y,
+        hue: hueForSlice(flow.begin.sliceName),
+        dir: beginDir
+      };
+      const end = {
+        x: this.getXCoordinate(flow.end.sliceStartTs),
+        y: endYConnection.y,
+        hue: hueForSlice(flow.end.sliceName),
+        dir: endDir
+      };
+      this.drawFlowArrow(ctx, begin, end);
+    });
+
+    ctx.restore();
+  }
+
+  private getDeltaX(dir: LineDirection, offset: number): number {
+    switch (dir) {
+      case 'LEFT':
+        return -offset;
+      case 'RIGHT':
+        return offset;
+      case 'UP':
+        return 0;
+      case 'DOWN':
+        return 0;
+      default:
+        return 0;
+    }
+  }
+
+  private getDeltaY(dir: LineDirection, offset: number): number {
+    switch (dir) {
+      case 'LEFT':
+        return 0;
+      case 'RIGHT':
+        return 0;
+      case 'UP':
+        return -offset;
+      case 'DOWN':
+        return offset;
+      default:
+        return 0;
+    }
+  }
+
+  private drawFlowArrow(
+      ctx: CanvasRenderingContext2D,
+      begin: {x: number, y: number, hue: number, dir: LineDirection},
+      end: {x: number, y: number, hue: number, dir: LineDirection}) {
+    const grad = ctx.createLinearGradient(begin.x, begin.y, end.x, end.y);
+    grad.addColorStop(0, `hsl(${begin.hue}, 50%, 65%)`);
+    grad.addColorStop(1, `hsl(${end.hue}, 50%, 65%)`);
+
+    const END_OFFSET =
+        (end.dir === 'RIGHT' || end.dir === 'LEFT' ? TRIANGLE_SIZE : 0);
+
+    // draw curved line from begin to end (bezier curve)
+    ctx.strokeStyle = grad;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(begin.x, begin.y);
+    ctx.bezierCurveTo(
+        begin.x - this.getDeltaX(begin.dir, BEZIER_OFFSET),
+        begin.y - this.getDeltaY(begin.dir, BEZIER_OFFSET),
+        end.x - this.getDeltaX(end.dir, BEZIER_OFFSET + END_OFFSET),
+        end.y - this.getDeltaY(end.dir, BEZIER_OFFSET + END_OFFSET),
+        end.x - this.getDeltaX(end.dir, END_OFFSET),
+        end.y - this.getDeltaY(end.dir, END_OFFSET));
+    ctx.stroke();
+
+    // TODO (andrewbb): probably we should add a parameter 'MarkerType' to be
+    // able to choose what marker we want to draw _before_ the function call.
+    // e.g. triangle, circle, square?
+    if (begin.dir !== 'RIGHT' && begin.dir !== 'LEFT') {
+      // draw a circle if we the line has a vertical connection
+      ctx.fillStyle = `hsl(${begin.hue}, 50%, 65%)`;
+      ctx.beginPath();
+      ctx.arc(begin.x, begin.y, 3, 0, 2 * Math.PI);
+      ctx.closePath();
+      ctx.fill();
+    }
+
+
+    if (end.dir !== 'RIGHT' && end.dir !== 'LEFT') {
+      // draw a circle if we the line has a vertical connection
+      ctx.fillStyle = `hsl(${begin.hue}, 50%, 65%)`;
+      ctx.beginPath();
+      ctx.arc(end.x, end.y, CIRCLE_RADIUS, 0, 2 * Math.PI);
+      ctx.closePath();
+      ctx.fill();
+    } else {
+      const dx = this.getDeltaX(end.dir, TRIANGLE_SIZE);
+      const dy = this.getDeltaY(end.dir, TRIANGLE_SIZE);
+      // draw small triangle
+      ctx.fillStyle = `hsl(${end.hue}, 50%, 65%)`;
+      ctx.beginPath();
+      ctx.moveTo(end.x, end.y);
+      ctx.lineTo(end.x - dx - dy, end.y + dx - dy);
+      ctx.lineTo(end.x - dx + dy, end.y - dx - dy);
+      ctx.closePath();
+      ctx.fill();
+    }
+  }
+}
\ No newline at end of file
diff --git a/ui/src/frontend/globals.ts b/ui/src/frontend/globals.ts
index 97a4727..83e9096 100644
--- a/ui/src/frontend/globals.ts
+++ b/ui/src/frontend/globals.ts
@@ -50,10 +50,14 @@
 }
 
 export interface FlowPoint {
+  trackId: number;
+
   sliceName: string;
   sliceId: number;
-  trackId: number;
-  ts: number;
+  sliceStartTs: number;
+  sliceEndTs: number;
+
+  depth: number;
 }
 
 export interface Flow {
@@ -250,8 +254,8 @@
     return assertExists(this._boundFlows);
   }
 
-  set boundFlows(click: Flow[]) {
-    this._boundFlows = assertExists(click);
+  set boundFlows(boundFlows: Flow[]) {
+    this._boundFlows = assertExists(boundFlows);
   }
 
   get counterDetails() {
diff --git a/ui/src/frontend/panel_container.ts b/ui/src/frontend/panel_container.ts
index d7199a6..4de44aa 100644
--- a/ui/src/frontend/panel_container.ts
+++ b/ui/src/frontend/panel_container.ts
@@ -17,6 +17,10 @@
 import {assertExists, assertTrue} from '../base/logging';
 
 import {TOPBAR_HEIGHT, TRACK_SHELL_WIDTH} from './css_constants';
+import {
+  FlowEventsRenderer,
+  FlowEventsRendererArgs
+} from './flow_events_renderer';
 import {globals} from './globals';
 import {isPanelVNode, Panel, PanelSize, PanelVNode} from './panel';
 import {
@@ -60,6 +64,8 @@
   private totalPanelHeight = 0;
   private canvasHeight = 0;
 
+  private flowEventsRenderer: FlowEventsRenderer;
+
   private panelPerfStats = new WeakMap<Panel, RunningStatistics>();
   private perfStats = {
     totalPanels: 0,
@@ -157,6 +163,7 @@
     this.canvasRedrawer = () => this.redrawCanvas();
     globals.rafScheduler.addRedrawCallback(this.canvasRedrawer);
     perfDisplay.addContainer(this);
+    this.flowEventsRenderer = new FlowEventsRenderer();
   }
 
   oncreate(vnodeDom: m.CVnodeDOM<Attrs>) {
@@ -326,24 +333,27 @@
     const panels = assertExists(this.attrs).panels;
     assertTrue(panels.length === this.panelPositions.length);
     let totalOnCanvas = 0;
+    const flowEventsRendererArgs =
+        new FlowEventsRendererArgs(this.parentWidth, this.canvasHeight);
     for (let i = 0; i < panels.length; i++) {
       const panel = panels[i];
       const panelHeight = this.panelPositions[i].height;
       const yStartOnCanvas = panelYStart - canvasYStart;
 
-      if (!this.overlapsCanvas(yStartOnCanvas, yStartOnCanvas + panelHeight)) {
-        panelYStart += panelHeight;
-        continue;
-      }
-
-      totalOnCanvas++;
-
       if (!isPanelVNode(panel)) {
         throw new Error('Vnode passed to panel container is not a panel');
       }
 
       // TODO(hjd): This cast should be unnecessary given the type guard above.
       const p = panel as PanelVNode<{}>;
+      flowEventsRendererArgs.registerPanel(p, yStartOnCanvas, panelHeight);
+
+      if (!this.overlapsCanvas(yStartOnCanvas, yStartOnCanvas + panelHeight)) {
+        panelYStart += panelHeight;
+        continue;
+      }
+
+      totalOnCanvas++;
 
       this.ctx.save();
       this.ctx.translate(0, yStartOnCanvas);
@@ -362,6 +372,7 @@
     this.drawTopLayerOnCanvas();
     const redrawDur = debugNow() - redrawStart;
     this.updatePerfStats(redrawDur, panels.length, totalOnCanvas);
+    this.flowEventsRenderer.render(this.ctx, flowEventsRendererArgs);
   }
 
   // The panels each draw on the canvas but some details need to be drawn across
diff --git a/ui/src/frontend/track.ts b/ui/src/frontend/track.ts
index 4df2730..c5af2f2 100644
--- a/ui/src/frontend/track.ts
+++ b/ui/src/frontend/track.ts
@@ -35,6 +35,14 @@
   create(TrackState: TrackState): Track;
 }
 
+export interface SliceRect {
+  left: number;
+  width: number;
+  top: number;
+  height: number;
+  visible: boolean;
+}
+
 /**
  * The abstract class that needs to be implemented by all tracks.
  */
@@ -116,4 +124,15 @@
       ctx.fillText(text2, xPos + 8, this.getHeight() / 2 + 6);
     }
   }
+
+  /**
+   * Returns a place where a given slice should be drawn. Should be implemented
+   * only for track types that support slices e.g. chrome_slice, async_slices
+   * tStart - slice start time in seconds, tEnd - slice end time in seconds,
+   * depth - slice depth
+   */
+  getSliceRect(_tStart: number, _tEnd: number, _depth: number): SliceRect
+      |undefined {
+    return undefined;
+  }
 }
diff --git a/ui/src/frontend/track_group_panel.ts b/ui/src/frontend/track_group_panel.ts
index 91c0933..c65af87 100644
--- a/ui/src/frontend/track_group_panel.ts
+++ b/ui/src/frontend/track_group_panel.ts
@@ -146,8 +146,14 @@
   onupdate({dom}: m.CVnodeDOM<Attrs>) {
     const shell = assertExists(dom.querySelector('.shell'));
     this.shellWidth = shell.getBoundingClientRect().width;
-    this.backgroundColor =
-        getComputedStyle(dom).getPropertyValue('--collapsed-background');
+    // TODO(andrewbb): move this to css_constants
+    if (this.trackGroupState.collapsed) {
+      this.backgroundColor =
+          getComputedStyle(dom).getPropertyValue('--collapsed-background');
+    } else {
+      this.backgroundColor =
+          getComputedStyle(dom).getPropertyValue('--expanded-background');
+    }
   }
 
   highlightIfTrackSelected(ctx: CanvasRenderingContext2D, size: PanelSize) {
@@ -169,13 +175,14 @@
 
   renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) {
     const collapsed = this.trackGroupState.collapsed;
-    if (!collapsed) return;
-
-    ctx.save();
 
     ctx.fillStyle = this.backgroundColor;
     ctx.fillRect(0, 0, size.width, size.height);
 
+    if (!collapsed) return;
+
+    this.highlightIfTrackSelected(ctx, size);
+
     drawGridLines(
         ctx,
         globals.frontendLocalState.timeScale,
@@ -183,6 +190,7 @@
         size.width,
         size.height);
 
+    ctx.save();
     ctx.translate(this.shellWidth, 0);
     if (this.summaryTrack) {
       this.summaryTrack.render(ctx);
diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts
index 59c7fe7..e982f99 100644
--- a/ui/src/frontend/track_panel.ts
+++ b/ui/src/frontend/track_panel.ts
@@ -25,7 +25,7 @@
 import {BLANK_CHECKBOX, CHECKBOX, STAR, STAR_BORDER} from './icons';
 import {Panel, PanelSize} from './panel';
 import {verticalScrollToTrack} from './scroll_helper';
-import {Track} from './track';
+import {SliceRect, Track} from './track';
 import {trackRegistry} from './track_registry';
 import {
   drawVerticalLineAtTime,
@@ -385,4 +385,9 @@
       }
     }
   }
+
+  getSliceRect(tStart: number, tDur: number, depth: number): SliceRect
+      |undefined {
+    return this.track.getSliceRect(tStart, tDur, depth);
+  }
 }
diff --git a/ui/src/tracks/chrome_slices/frontend.ts b/ui/src/tracks/chrome_slices/frontend.ts
index d956acf..ad7b0b7 100644
--- a/ui/src/tracks/chrome_slices/frontend.ts
+++ b/ui/src/tracks/chrome_slices/frontend.ts
@@ -14,11 +14,12 @@
 
 import {Actions} from '../../common/actions';
 import {cropText, drawIncompleteSlice} from '../../common/canvas_utils';
+import {hueForSlice} from '../../common/colorizer';
 import {TrackState} from '../../common/state';
 import {toNs} from '../../common/time';
 import {checkerboardExcept} from '../../frontend/checkerboard';
 import {globals} from '../../frontend/globals';
-import {Track} from '../../frontend/track';
+import {SliceRect, Track} from '../../frontend/track';
 import {trackRegistry} from '../../frontend/track_registry';
 
 import {Config, Data, SLICE_TRACK_KIND} from './common';
@@ -29,15 +30,6 @@
 const CHEVRON_WIDTH_PX = 10;
 const HALF_CHEVRON_WIDTH_PX = CHEVRON_WIDTH_PX / 2;
 
-function hash(s: string): number {
-  let hash = 0x811c9dc5 & 0xfffffff;
-  for (let i = 0; i < s.length; i++) {
-    hash ^= s.charCodeAt(i);
-    hash = (hash * 16777619) & 0xffffffff;
-  }
-  return hash & 0xff;
-}
-
 export class ChromeSliceTrack extends Track<Config, Data> {
   static readonly kind: string = SLICE_TRACK_KIND;
   static create(trackState: TrackState): Track {
@@ -74,7 +66,6 @@
 
     // measuretext is expensive so we only use it once.
     const charWidth = ctx.measureText('ACBDLqsdfg').width / 10;
-    const pxEnd = timeScale.timeToPx(visibleWindowTime.end);
 
     // The draw of the rect on the selected slice must happen after the other
     // drawings, otherwise it would result under another rect.
@@ -89,13 +80,13 @@
       const isInstant = data.isInstant[i];
       const title = data.strings[titleId];
       let incompleteSlice = false;
-
       if (toNs(tEnd) - toNs(tStart) === -1) {  // incomplete slice
         incompleteSlice = true;
         tEnd = tStart + INCOMPLETE_SLICE_TIME_S;
       }
 
-      if (tEnd <= visibleWindowTime.start || tStart >= visibleWindowTime.end) {
+      const rect = this.getSliceRect(tStart, tEnd, depth);
+      if (!rect || !rect.visible) {
         continue;
       }
 
@@ -104,18 +95,8 @@
           currentSelection.kind === 'CHROME_SLICE' &&
           currentSelection.id !== undefined && currentSelection.id === sliceId;
 
-      const rectXStart = Math.max(timeScale.timeToPx(tStart), 0);
-      let rectXEnd = Math.min(timeScale.timeToPx(tEnd), pxEnd);
-      let rectWidth = rectXEnd - rectXStart;
-
-      // All slices should be at least 1px.
-      if (rectWidth < 1) {
-        rectWidth = 1;
-        rectXEnd = rectXStart + 1;
-      }
-      const rectYStart = TRACK_PADDING + depth * SLICE_HEIGHT;
       const name = title.replace(/( )?\d+/g, '');
-      const hue = hash(name);
+      const hue = hueForSlice(name);
       const saturation = isSelected ? 80 : 50;
       const hovered = titleId === this.hoveredTitleId;
       const color = `hsl(${hue}, ${saturation}%, ${hovered ? 30 : 65}%)`;
@@ -130,25 +111,20 @@
       // D       B
       // Then B, C, D and back to A:
       if (isInstant) {
-        ctx.moveTo(rectXStart, rectYStart);
-        ctx.lineTo(
-            rectXStart + HALF_CHEVRON_WIDTH_PX, rectYStart + SLICE_HEIGHT);
-        ctx.lineTo(
-            rectXStart, rectYStart + SLICE_HEIGHT - HALF_CHEVRON_WIDTH_PX);
-        ctx.lineTo(
-            rectXStart - HALF_CHEVRON_WIDTH_PX, rectYStart + SLICE_HEIGHT);
-        ctx.lineTo(rectXStart, rectYStart);
+        ctx.moveTo(rect.left, rect.top);
+        ctx.lineTo(rect.left + HALF_CHEVRON_WIDTH_PX, rect.top + SLICE_HEIGHT);
+        ctx.lineTo(rect.left, rect.top + SLICE_HEIGHT - HALF_CHEVRON_WIDTH_PX);
+        ctx.lineTo(rect.left - HALF_CHEVRON_WIDTH_PX, rect.top + SLICE_HEIGHT);
+        ctx.lineTo(rect.left, rect.top);
         ctx.fill();
         continue;
       }
-
-      if (incompleteSlice && rectWidth > SLICE_HEIGHT / 4) {
+      if (incompleteSlice && rect.width > SLICE_HEIGHT / 4) {
         drawIncompleteSlice(
-            ctx, rectXStart, rectYStart, rectWidth, SLICE_HEIGHT, color);
+            ctx, rect.left, rect.top, rect.width, SLICE_HEIGHT, color);
       } else {
-        ctx.fillRect(rectXStart, rectYStart, rectWidth, SLICE_HEIGHT);
+        ctx.fillRect(rect.left, rect.top, rect.width, SLICE_HEIGHT);
       }
-
       // Selected case
       if (isSelected) {
         drawRectOnSelected = () => {
@@ -156,16 +132,16 @@
           ctx.beginPath();
           ctx.lineWidth = 3;
           ctx.strokeRect(
-              rectXStart, rectYStart - 1.5, rectWidth, SLICE_HEIGHT + 3);
+              rect.left, rect.top - 1.5, rect.width, SLICE_HEIGHT + 3);
           ctx.closePath();
         };
       }
 
       ctx.fillStyle = 'white';
-      const displayText = cropText(title, charWidth, rectWidth);
-      const rectXCenter = rectXStart + rectWidth / 2;
+      const displayText = cropText(title, charWidth, rect.width);
+      const rectXCenter = rect.left + rect.width / 2;
       ctx.textBaseline = "middle";
-      ctx.fillText(displayText, rectXCenter, rectYStart + SLICE_HEIGHT / 2);
+      ctx.fillText(displayText, rectXCenter, rect.top + SLICE_HEIGHT / 2);
     }
     drawRectOnSelected();
   }
@@ -233,6 +209,22 @@
   getHeight() {
     return SLICE_HEIGHT * (this.config.maxDepth + 1) + 2 * TRACK_PADDING;
   }
+
+  getSliceRect(tStart: number, tEnd: number, depth: number): SliceRect
+      |undefined {
+    const {timeScale, visibleWindowTime} = globals.frontendLocalState;
+    const pxEnd = timeScale.timeToPx(visibleWindowTime.end);
+    const left = Math.max(timeScale.timeToPx(tStart), 0);
+    const right = Math.min(timeScale.timeToPx(tEnd), pxEnd);
+    return {
+      left,
+      width: Math.max(right - left, 1),
+      top: TRACK_PADDING + depth * SLICE_HEIGHT,
+      height: SLICE_HEIGHT,
+      visible:
+          !(tEnd <= visibleWindowTime.start || tStart >= visibleWindowTime.end)
+    };
+  }
 }
 
 trackRegistry.register(ChromeSliceTrack);