commit ea13ac90883d4738cffc8b9b97fa0f56474fbe7c
author Primiano Tucci <primiano@google.com> Sat Sep 01 07:10:53 2018 +0000
committer Gerrit Code Review <noreply-gerritcodereview@google.com> Sat Sep 01 07:10:53 2018 +0000
tree 4a37e9da84e6416083b8f959c8b6ee1024e231c2
parent edbe097618b00fd86269b7514f46bcbb0cd4c578
parent e84507463f9787ad29646fa0ec2135d3388977a7

Merge "perfetto-ui: Remove _wasm suffix from js files"

ui/src/assets/perfetto.scss

diff --git a/ui/src/assets/perfetto.scss b/ui/src/assets/perfetto.scss
index d8ea240..4acedef 100644
--- a/ui/src/assets/perfetto.scss
+++ b/ui/src/assets/perfetto.scss
@@ -231,9 +231,8 @@
     .track-shell {
         padding: 0 20px;
         display: grid;
-        grid-template-areas:
-          "title up"
-          "title down";
+        grid-template-areas: "title up down";
+        grid-template-columns: 1fr auto auto;
         align-items: center;
         width: 300px;
         background: #fff;
@@ -248,6 +247,7 @@
         }
         .track-move-icons {
             justify-self: end;
+            margin: 0 5px;
             color: #fff;
             font-weight: bold;
             text-align: center;

ui/src/frontend/track.ts

diff --git a/ui/src/frontend/track.ts b/ui/src/frontend/track.ts
index 447f775..bc97ad8 100644
--- a/ui/src/frontend/track.ts
+++ b/ui/src/frontend/track.ts
@@ -42,7 +42,7 @@
   constructor(protected trackState: TrackState) {}
   abstract renderCanvas(ctx: CanvasRenderingContext2D): void;
   getHeight(): number {
-    return 70;
+    return 40;
   }
   onMouseMove(_position: {x: number, y: number}) {}
   onMouseOut() {}

ui/src/tracks/cpu_slices/frontend.ts

diff --git a/ui/src/tracks/cpu_slices/frontend.ts b/ui/src/tracks/cpu_slices/frontend.ts
index 5d58ab1..2227186 100644
--- a/ui/src/tracks/cpu_slices/frontend.ts
+++ b/ui/src/tracks/cpu_slices/frontend.ts
@@ -21,7 +21,7 @@
 
 import {CPU_SLICE_TRACK_KIND, CpuSliceTrackData} from './common';
 
-const MARGIN_TOP = 20;
+const MARGIN_TOP = 5;
 const RECT_HEIGHT = 30;
 
 function cropText(str: string, charWidth: number, rectWidth: number) {
@@ -164,15 +164,21 @@
 
     const hoveredThread = globals.threads.get(this.hoveredUtid);
     if (hoveredThread !== undefined) {
-      ctx.fillStyle = 'hsl(200, 50%, 40%)';
-      ctx.textAlign = 'left';
       const procTitle = `P: ${hoveredThread.procName} [${hoveredThread.pid}]`;
       const threadTitle =
           `T: ${hoveredThread.threadName} [${hoveredThread.tid}]`;
+
       ctx.font = '10px Google Sans';
-      ctx.fillText(procTitle, this.mouseXpos! + 5, 8);
-      ctx.font = '10px Google Sans';
-      ctx.fillText(threadTitle, this.mouseXpos! + 5, 18);
+      const procTitleWidth = ctx.measureText(procTitle).width;
+      const threadTitleWidth = ctx.measureText(threadTitle).width;
+      const width = Math.max(procTitleWidth, threadTitleWidth);
+
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
+      ctx.fillRect(this.mouseXpos!, MARGIN_TOP, width + 16, RECT_HEIGHT);
+      ctx.fillStyle = 'hsl(200, 50%, 40%)';
+      ctx.textAlign = 'left';
+      ctx.fillText(procTitle, this.mouseXpos! + 8, 18);
+      ctx.fillText(threadTitle, this.mouseXpos! + 8, 28);
     }
   }