From 46ba14219c7d7f40120784bb8324106a1c44cc35 Mon Sep 17 00:00:00 2001
From: Eric Eastwood <erice@element.io>
Date: Fri, 6 May 2022 11:13:23 -0500
Subject: [PATCH] Add a way to toggle `ScrollPanel` and `TimelinePanel` debug
 logs (#8513)

Part of https://github.com/vector-im/element-web/issues/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   | 15 ++++++---------
 src/components/structures/TimelinePanel.tsx | 12 +++++-------
 src/settings/Settings.tsx                   |  8 ++++++++
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/structures/ScrollPanel.tsx b/src/components/structures/ScrollPanel.tsx
index f2595471c96..5db5e6daad9 100644
--- a/src/components/structures/ScrollPanel.tsx
+++ b/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
diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx
index 59b87c639ac..a216f9e4cfc 100644
--- a/src/components/structures/TimelinePanel.tsx
+++ b/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
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index ae30d58d4bd..b1f96681736 100644
--- a/src/settings/Settings.tsx
+++ b/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,