added metrics for snapshot

Reviewed By: lblasa

Differential Revision: D39886448

fbshipit-source-id: b229f6947d199026c6e4bdc89def6ac0a0fa9d0a

desktop/plugins/public/ui-debugger/components/PerfStats.tsx

@@ -49,11 +49,18 @@ const columns: DataTableColumn<PerfStatsEvent>[] = [
       return formatDiff(row.start, row.traversalComplete);
     },
   },
+  {
+    key: 'snapshotComplete',
+    title: 'Snapshot time (Main thread)',
+    onRender: (row: PerfStatsEvent) => {
+      return formatDiff(row.traversalComplete, row.snapshotComplete);
+    },
+  },
   {
     key: 'queuingComplete',
     title: 'Queuing time',
     onRender: (row: PerfStatsEvent) => {
-      return formatDiff(row.traversalComplete, row.queuingComplete);
+      return formatDiff(row.snapshotComplete, row.queuingComplete);
     },
   },
   {

desktop/plugins/public/ui-debugger/components/Visualization2D.tsx

@@ -164,6 +164,7 @@ function Visualization2DNode({
         top: toPx(bounds.y),
         width: toPx(bounds.width),
         height: toPx(bounds.height),
+        opacity: isSelected || isHovered ? 0.5 : 1,
         backgroundColor: isSelected
           ? theme.primaryColor
           : isHovered