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.

public/locales/en-GB/app.json

@@ -86,6 +86,7 @@
   "Settings": "Settings",
   "Share screen": "Share screen",
   "Show call inspector": "Show call inspector",
+  "Show connection stats": "Show connection stats",
   "Sign in": "Sign in",
   "Sign out": "Sign out",
   "Speaker": "Speaker",

src/room/InCallView.tsx

@@ -54,7 +54,10 @@ import {
   useVideoGridLayout,
   TileDescriptor,
 } from "../video-grid/VideoGrid";
-import { useShowInspector } from "../settings/useSetting";
+import {
+  useShowInspector,
+  useShowConnectionStats,
+} from "../settings/useSetting";
 import { useModalTriggerState } from "../Modal";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useUrlParams } from "../UrlParams";
@@ -189,6 +192,7 @@ export function InCallView({
   );
 
   const [showInspector] = useShowInspector();
+  const [showConnectionStats] = useShowConnectionStats();
 
   const { hideScreensharing } = useUrlParams();
 
@@ -290,6 +294,7 @@ export function InCallView({
           key={maximisedParticipant.id}
           data={maximisedParticipant.data}
           showSpeakingIndicator={false}
+          showConnectionStats={showConnectionStats}
         />
       );
     }
@@ -303,6 +308,7 @@ export function InCallView({
         {(props) => (
           <VideoTile
             showSpeakingIndicator={items.length > 2}
+            showConnectionStats={showConnectionStats}
             {...props}
             ref={props.ref as Ref<HTMLDivElement>}
           />

src/settings/SettingsModal.tsx

@@ -34,6 +34,7 @@ import {
   useShowInspector,
   useOptInAnalytics,
   useDeveloperSettingsTab,
+  useShowConnectionStats,
 } from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
@@ -59,6 +60,8 @@ export const SettingsModal = (props: Props) => {
   const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const [developerSettingsTab, setDeveloperSettingsTab] =
     useDeveloperSettingsTab();
+  const [showConnectionStats, setShowConnectionStats] =
+    useShowConnectionStats();
 
   const downloadDebugLog = useDownloadDebugLog();
 
@@ -233,6 +236,18 @@ export const SettingsModal = (props: Props) => {
                 }
               />
             </FieldRow>
+            <FieldRow>
+              <InputField
+                id="showConnectionStats"
+                name="connection-stats"
+                label={t("Show connection stats")}
+                type="checkbox"
+                checked={showConnectionStats}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setShowConnectionStats(e.target.checked)
+                }
+              />
+            </FieldRow>
             <FieldRow>
               <Button onPress={downloadDebugLog}>
                 {t("Download debug logs")}

src/settings/useSetting.ts

@@ -101,6 +101,9 @@ export const useOptInAnalytics = (): DisableableSetting<boolean | null> => {
 export const useDeveloperSettingsTab = () =>
   useSetting("developer-settings-tab", false);
 
+export const useShowConnectionStats = () =>
+  useSetting("show-connection-stats", false);
+
 export const useDefaultDevices = () =>
   useSetting("defaultDevices", {
     audioinput: "",

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