From c20f77c78dcde1115bdb8da46db2939f9cc7786c Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Fri, 6 May 2022 00:31:25 -0500 Subject: [PATCH 1/3] Add a way to toggle ScrollPanel and TimelinePanel debug logs 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 | 13 +++++-------- src/components/structures/TimelinePanel.tsx | 10 ++++------ src/settings/Settings.tsx | 8 ++++++++ 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/components/structures/ScrollPanel.tsx b/src/components/structures/ScrollPanel.tsx index f2595471c96..47a2c36595c 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,12 +35,10 @@ 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 = function() { + if(SettingsStore.getValue("debug_scroll_panel")) { + logger.log.call(console, "ScrollPanel debuglog:", ...arguments); + } } interface IProps { diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx index 59b87c639ac..8cc7ea1d8ad 100644 --- a/src/components/structures/TimelinePanel.tsx +++ b/src/components/structures/TimelinePanel.tsx @@ -61,12 +61,10 @@ 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 = function() { + if(SettingsStore.getValue("debug_timeline_panel")) { + logger.log.call(console, "TimelinePanel debuglog:", ...arguments); + } } interface IProps { 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, From 166840fa828dfb3fde16c7e6768af0680d1f5528 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Fri, 6 May 2022 00:38:19 -0500 Subject: [PATCH 2/3] Add some types --- src/components/structures/ScrollPanel.tsx | 4 ++-- src/components/structures/TimelinePanel.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/structures/ScrollPanel.tsx b/src/components/structures/ScrollPanel.tsx index 47a2c36595c..0c9656eaf63 100644 --- a/src/components/structures/ScrollPanel.tsx +++ b/src/components/structures/ScrollPanel.tsx @@ -35,9 +35,9 @@ const UNFILL_REQUEST_DEBOUNCE_MS = 200; // much while the content loads. const PAGE_SIZE = 400; -const debuglog = function() { +const debuglog = (...args: any[]) => { if(SettingsStore.getValue("debug_scroll_panel")) { - logger.log.call(console, "ScrollPanel debuglog:", ...arguments); + logger.log.call(console, "ScrollPanel debuglog:", ...args); } } diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx index 8cc7ea1d8ad..18be1aa3d59 100644 --- a/src/components/structures/TimelinePanel.tsx +++ b/src/components/structures/TimelinePanel.tsx @@ -61,9 +61,9 @@ const READ_RECEIPT_INTERVAL_MS = 500; const READ_MARKER_DEBOUNCE_MS = 100; -const debuglog = function() { +const debuglog = (...args: any[]) => { if(SettingsStore.getValue("debug_timeline_panel")) { - logger.log.call(console, "TimelinePanel debuglog:", ...arguments); + logger.log.call(console, "TimelinePanel debuglog:", ...args); } } From dd2813bb04b8d7d19365a5eeee54772def2515c4 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Fri, 6 May 2022 00:40:20 -0500 Subject: [PATCH 3/3] Fix lints --- src/components/structures/ScrollPanel.tsx | 4 ++-- src/components/structures/TimelinePanel.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/structures/ScrollPanel.tsx b/src/components/structures/ScrollPanel.tsx index 0c9656eaf63..5db5e6daad9 100644 --- a/src/components/structures/ScrollPanel.tsx +++ b/src/components/structures/ScrollPanel.tsx @@ -36,10 +36,10 @@ const UNFILL_REQUEST_DEBOUNCE_MS = 200; const PAGE_SIZE = 400; const debuglog = (...args: any[]) => { - if(SettingsStore.getValue("debug_scroll_panel")) { + 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 18be1aa3d59..a216f9e4cfc 100644 --- a/src/components/structures/TimelinePanel.tsx +++ b/src/components/structures/TimelinePanel.tsx @@ -62,10 +62,10 @@ const READ_RECEIPT_INTERVAL_MS = 500; const READ_MARKER_DEBOUNCE_MS = 100; const debuglog = (...args: any[]) => { - if(SettingsStore.getValue("debug_timeline_panel")) { + 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