1 files changed, 23 insertions, 59 deletions

diff --git a/ui/src/tracks/chrome_slices/frontend.ts b/ui/src/tracks/chrome_slices/frontend.ts
index 41f25412e..1e01e3101 100644
--- a/ui/src/tracks/chrome_slices/frontend.ts
+++ b/ui/src/tracks/chrome_slices/frontend.ts
@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Actions} from '../../common/actions';
 import {cropText} from '../../common/canvas_utils';
 import {TrackState} from '../../common/state';
 import {checkerboardExcept} from '../../frontend/checkerboard';
@@ -22,8 +21,8 @@ import {trackRegistry} from '../../frontend/track_registry';
 
 import {Config, Data, SLICE_TRACK_KIND} from './common';
 
-const SLICE_HEIGHT = 18;
-const TRACK_PADDING = 4;
+const SLICE_HEIGHT = 20;
+const TRACK_PADDING = 5;
 
 function hash(s: string): number {
   let hash = 0x811c9dc5 & 0xfffffff;
@@ -34,9 +33,9 @@ function hash(s: string): number {
   return hash & 0xff;
 }
 
-export class ChromeSliceTrack extends Track<Config, Data> {
-  static readonly kind: string = SLICE_TRACK_KIND;
-  static create(trackState: TrackState): Track {
+class ChromeSliceTrack extends Track<Config, Data> {
+  static readonly kind = SLICE_TRACK_KIND;
+  static create(trackState: TrackState): ChromeSliceTrack {
     return new ChromeSliceTrack(trackState);
   }
 
@@ -52,18 +51,25 @@ export class ChromeSliceTrack extends Track<Config, Data> {
     const {timeScale, visibleWindowTime} = globals.frontendLocalState;
     const data = this.data();
 
-    if (data === undefined) return;  // Can't possibly draw anything.
+    // If there aren't enough cached slices data in |data| request more to
+    // the controller.
+    const inRange = data !== undefined &&
+        (visibleWindowTime.start >= data.start &&
+         visibleWindowTime.end <= data.end);
+    if (!inRange || data === undefined ||
+        data.resolution > globals.getCurResolution()) {
+      globals.requestTrackData(this.trackState.id);
+      if (data === undefined) return;  // Can't possibly draw anything.
+    }
 
     // If the cached trace slices don't fully cover the visible time range,
     // show a gray rectangle with a "Loading..." label.
     checkerboardExcept(
         ctx,
-        this.getHeight(),
         timeScale.timeToPx(visibleWindowTime.start),
         timeScale.timeToPx(visibleWindowTime.end),
         timeScale.timeToPx(data.start),
-        timeScale.timeToPx(data.end),
-    );
+        timeScale.timeToPx(data.end), );
 
     ctx.font = '12px Google Sans';
     ctx.textAlign = 'center';
@@ -72,16 +78,12 @@ export class ChromeSliceTrack extends Track<Config, Data> {
     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.
-    let drawRectOnSelected = () => {};
-
     for (let i = 0; i < data.starts.length; i++) {
       const tStart = data.starts[i];
       const tEnd = data.ends[i];
       const depth = data.depths[i];
+      const cat = data.strings[data.categories[i]];
       const titleId = data.titles[i];
-      const sliceId = data.sliceIds[i];
       const title = data.strings[titleId];
       if (tEnd <= visibleWindowTime.start || tStart >= visibleWindowTime.end) {
         continue;
@@ -92,37 +94,20 @@ export class ChromeSliceTrack extends Track<Config, Data> {
       const rectYStart = TRACK_PADDING + depth * SLICE_HEIGHT;
 
       const hovered = titleId === this.hoveredTitleId;
-      const name = title.replace(/( )?\d+/g, '');
-      const hue = title === 'Busy' ? 88 : hash(name);
-      const saturation = 50;
+      const hue = hash(cat);
+      const saturation = Math.min(20 + depth * 10, 70);
       ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${hovered ? 30 : 65}%)`;
       ctx.fillRect(rectXStart, rectYStart, rectWidth, SLICE_HEIGHT);
 
-      // Selected case
-      const currentSelection = globals.state.currentSelection;
-      if (currentSelection && currentSelection.kind === 'CHROME_SLICE' &&
-          currentSelection.id !== undefined &&
-          currentSelection.id === sliceId) {
-        drawRectOnSelected = () => {
-          ctx.strokeStyle = `hsl(${hue}, ${saturation}%, 30%)`;
-          ctx.beginPath();
-          ctx.lineWidth = 3;
-          ctx.strokeRect(
-              rectXStart, rectYStart - 1.5, rectWidth, SLICE_HEIGHT + 3);
-          ctx.closePath();
-        };
-      }
-
       ctx.fillStyle = 'white';
       const displayText = cropText(title, charWidth, rectWidth);
       const rectXCenter = rectXStart + rectWidth / 2;
       ctx.textBaseline = "middle";
       ctx.fillText(displayText, rectXCenter, rectYStart + SLICE_HEIGHT / 2);
     }
-    drawRectOnSelected();
   }
 
-  getSliceIndex({x, y}: {x: number, y: number}): number|void {
+  onMouseMove({x, y}: {x: number, y: number}) {
     const data = this.data();
     this.hoveredTitleId = -1;
     if (data === undefined) return;
@@ -133,39 +118,18 @@ export class ChromeSliceTrack extends Track<Config, Data> {
     for (let i = 0; i < data.starts.length; i++) {
       const tStart = data.starts[i];
       const tEnd = data.ends[i];
+      const titleId = data.titles[i];
       if (tStart <= t && t <= tEnd && depth === data.depths[i]) {
-        return i;
+        this.hoveredTitleId = titleId;
+        break;
       }
     }
   }
 
-  onMouseMove({x, y}: {x: number, y: number}) {
-    const sliceIndex = this.getSliceIndex({x, y});
-    if (sliceIndex === undefined) return;
-    const data = this.data();
-    if (data === undefined) return;
-    const titleId = data.titles[sliceIndex];
-    this.hoveredTitleId = titleId;
-  }
-
   onMouseOut() {
     this.hoveredTitleId = -1;
   }
 
-  onMouseClick({x, y}: {x: number, y: number}): boolean {
-    const sliceIndex = this.getSliceIndex({x, y});
-    if (sliceIndex === undefined) return false;
-    const data = this.data();
-    if (data === undefined) return false;
-    const sliceId = data.sliceIds[sliceIndex];
-    if (sliceId) {
-      globals.makeSelection(Actions.selectChromeSlice(
-          {id: sliceId, trackId: this.trackState.id}));
-      return true;
-    }
-    return false;
-  }
-
   getHeight() {
     return SLICE_HEIGHT * (this.config.maxDepth + 1) + 2 * TRACK_PADDING;
   }