feat(traces): Fix visuals and duration tooltip (#70677)

### Summary
This makes it a little more obvious a project is selected, and fixes the
duration tooltip to use the real value of the breakdown.

static/app/views/performance/traces/content.tsx

@@ -379,6 +379,7 @@ export interface TraceResult<F extends string> {
 }
 
 interface TraceBreakdownBase {
+  duration: number; // Contains the accurate duration for display. Start and end may be quantized.
   end: number;
   opCategory: string | null;
   sdkName: string | null;
@@ -529,7 +530,7 @@ const BreakdownPanelItem = styled(StyledPanelItem)<{highlightedSliceName: string
   ${p =>
     p.highlightedSliceName
       ? `--highlightedSlice-${p.highlightedSliceName}-opacity: 1.0;
-         --highlightedSlice-${p.highlightedSliceName}-saturate: saturate(1.0);
+         --highlightedSlice-${p.highlightedSliceName}-saturate: saturate(1.0) contrast(1.0);
          --highlightedSlice-${p.highlightedSliceName}-transform: translateY(0px);
        `
       : null}
@@ -537,12 +538,12 @@ const BreakdownPanelItem = styled(StyledPanelItem)<{highlightedSliceName: string
     p.highlightedSliceName
       ? `
         --defaultSlice-opacity: 1.0;
-        --defaultSlice-saturate: saturate(0.8);
+        --defaultSlice-saturate: saturate(0.7) contrast(0.9) brightness(1.2);
         --defaultSlice-transform: translateY(0px);
         `
       : `
         --defaultSlice-opacity: 1.0;
-        --defaultSlice-saturate: saturate(1.0);
+        --defaultSlice-saturate: saturate(1.0) contrast(1.0);
         --defaultSlice-transform: translateY(0px);
         `}
 `;

static/app/views/performance/traces/fieldRenderers.tsx

@@ -80,7 +80,7 @@ const RectangleTraceBreakdown = styled(RowRectangle)<{
   ${p => `
     transform: var(--hoveredSlice-${p.offset}-translateY, var(--highlightedSlice-${p.sliceName ?? ''}-transform, var(--defaultSlice-transform, 1.0)));
   `}
-  transition: opacity,transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: filter,opacity,transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 `;
 
 export function TraceBreakdownRenderer({
@@ -107,6 +107,7 @@ export function TraceBreakdownRenderer({
             sliceName={breakdown.project}
             sliceStart={breakdown.start}
             sliceEnd={breakdown.end}
+            sliceDurationReal={breakdown.duration}
             sliceSecondaryName={breakdown.sdkName}
             trace={trace}
             theme={theme}
@@ -136,6 +137,7 @@ export function SpanBreakdownSliceRenderer({
   sliceName,
   sliceStart,
   sliceEnd,
+  sliceDurationReal,
   sliceSecondaryName,
   onMouseEnter,
   offset,
@@ -148,6 +150,7 @@ export function SpanBreakdownSliceRenderer({
   theme: Theme;
   trace: TraceResult<Field>;
   offset?: number;
+  sliceDurationReal?: number;
 }) {
   const traceSliceSize = (trace.end - trace.start) / BREAKDOWN_NUM_SLICES;
   const traceDuration = BREAKDOWN_NUM_SLICES * traceSliceSize;
@@ -184,7 +187,10 @@ export function SpanBreakdownSliceRenderer({
               <Subtext>({getShortenedSdkName(sliceSecondaryName)})</Subtext>
             </FlexContainer>
             <div>
-              <PerformanceDuration milliseconds={sliceDuration} abbreviation />
+              <PerformanceDuration
+                milliseconds={sliceDurationReal ?? sliceDuration}
+                abbreviation
+              />
             </div>
           </div>
         }