Hide connection quality indicators behind a developer setting

Calls are an environment with high cognitive load, so it's important that we keep extra UI elements like these to a minimum and stick to what's been explicitly designed. I assume that this was here as a developer feature to diagnose reliability of the back end components, which is perfectly fine, so I've kept it behind a developer setting rather than fully removing it.

src/video-grid/VideoTile.tsx

@@ -54,6 +54,7 @@ interface Props {
   className?: string;
   style?: React.ComponentProps<typeof animated.div>["style"];
   showSpeakingIndicator: boolean;
+  showConnectionStats: boolean;
 }
 
 export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
@@ -65,6 +66,7 @@ export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
       targetWidth,
       targetHeight,
       showSpeakingIndicator,
+      showConnectionStats,
     },
     tileRef
   ) => {
@@ -138,7 +140,9 @@ export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
           <div className={classNames(styles.infoBubble, styles.memberName)}>
             {microphoneMuted ? <MicMutedIcon /> : <MicIcon />}
             <span title={displayName}>{displayName}</span>
-            <ConnectionQualityIndicator participant={sfuParticipant} />
+            {showConnectionStats && (
+              <ConnectionQualityIndicator participant={sfuParticipant} />
+            )}
           </div>
         )}
         <VideoTrack