Add a way to toggle ScrollPanel and TimelinePanel debug logs (#8513)

Part of element-hq/element-web#21532

To better debug timeline issues when they crop up.

Turn on:
```js
mxSettingsStore.setValue('debug_scroll_panel', null, 'device', true);
mxSettingsStore.setValue('debug_timeline_panel', null, 'device', true);
```

Turn off:
```js
mxSettingsStore.setValue('debug_scroll_panel', null, 'device', false);
mxSettingsStore.setValue('debug_timeline_panel', null, 'device', false);
```

src/components/structures/ScrollPanel.tsx

@@ -17,14 +17,13 @@ limitations under the License.
 import React, { createRef, CSSProperties, ReactNode, KeyboardEvent } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
+import SettingsStore from '../../settings/SettingsStore';
 import Timer from '../../utils/Timer';
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 
-const DEBUG_SCROLL = false;
-
 // The amount of extra scroll distance to allow prior to unfilling.
 // See getExcessHeight.
 const UNPAGINATION_PADDING = 6000;
@@ -36,13 +35,11 @@ const UNFILL_REQUEST_DEBOUNCE_MS = 200;
 // much while the content loads.
 const PAGE_SIZE = 400;
 
-let debuglog;
-if (DEBUG_SCROLL) {
-    // using bind means that we get to keep useful line numbers in the console
-    debuglog = logger.log.bind(console, "ScrollPanel debuglog:");
-} else {
-    debuglog = function() {};
-}
+const debuglog = (...args: any[]) => {
+    if (SettingsStore.getValue("debug_scroll_panel")) {
+        logger.log.call(console, "ScrollPanel debuglog:", ...args);
+    }
+};
 
 interface IProps {
     /* stickyBottom: if set to true, then once the user hits the bottom of

src/components/structures/TimelinePanel.tsx

@@ -61,13 +61,11 @@ const READ_RECEIPT_INTERVAL_MS = 500;
 
 const READ_MARKER_DEBOUNCE_MS = 100;
 
-const DEBUG = false;
-
-let debuglog = function(...s: any[]) {};
-if (DEBUG) {
-    // using bind means that we get to keep useful line numbers in the console
-    debuglog = logger.log.bind(console, "TimelinePanel debuglog:");
-}
+const debuglog = (...args: any[]) => {
+    if (SettingsStore.getValue("debug_timeline_panel")) {
+        logger.log.call(console, "TimelinePanel debuglog:", ...args);
+    }
+};
 
 interface IProps {
     // The js-sdk EventTimelineSet object for the timeline sequence we are

src/settings/Settings.tsx

@@ -949,6 +949,14 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
         default: false,
     },
+    "debug_scroll_panel": {
+        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
+        default: false,
+    },
+    "debug_timeline_panel": {
+        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
+        default: false,
+    },
     [UIFeature.RoomHistorySettings]: {
         supportedLevels: LEVELS_UI_FEATURE,
         default: true,