From a439e19b8776b926d8127e42cb2e64406b3447b1 Mon Sep 17 00:00:00 2001
From: cpadm <57954026+cpAdm@users.noreply.github.com>
Date: Mon, 27 Oct 2025 19:41:41 +0100
Subject: [PATCH 1/2] fix(trace-viewer): Don't show 'Merge files' setting in
 trace viewer, only UI mode

---
 .../src/ui/defaultSettingsView.tsx            | 65 +++++++++----------
 packages/trace-viewer/src/ui/uiModeView.tsx   | 10 ++-
 .../trace-viewer/src/ui/workbenchLoader.tsx   | 10 ++-
 3 files changed, 46 insertions(+), 39 deletions(-)

diff --git a/packages/trace-viewer/src/ui/defaultSettingsView.tsx b/packages/trace-viewer/src/ui/defaultSettingsView.tsx
index 547af5fdcac8d..4b86f59c091ba 100644
--- a/packages/trace-viewer/src/ui/defaultSettingsView.tsx
+++ b/packages/trace-viewer/src/ui/defaultSettingsView.tsx
@@ -14,45 +14,40 @@
  * limitations under the License.
  */
 
-import * as React from 'react';
-import { SettingsView } from './settingsView';
 import { useDarkModeSetting } from '@web/theme';
 import { useSetting } from '@web/uiUtils';
+import type { Setting } from './settingsView';
 
-/**
- * A view of the collection of standard settings used between various applications
- */
-export const DefaultSettingsView: React.FC<{}> = () => {
+export function useDarkModeCheckbox(): Setting {
+  const [darkMode, setDarkMode] = useDarkModeSetting();
+  return {
+    type: 'check',
+    value: darkMode,
+    set: setDarkMode,
+    name: 'Dark mode'
+  };
+}
+
+export function useMergeFilesCheckbox(): Setting {
+  const [mergeFiles, setMergeFiles] = useSetting('mergeFiles', false);
+  return {
+    type: 'check',
+    value: mergeFiles,
+    set: setMergeFiles,
+    name: 'Merge files'
+  };
+}
+
+export function usePopulateCanvasCheckbox(): Setting {
   const [
     shouldPopulateCanvasFromScreenshot,
     setShouldPopulateCanvasFromScreenshot,
   ] = useSetting('shouldPopulateCanvasFromScreenshot', false);
-  const [darkMode, setDarkMode] = useDarkModeSetting();
-  const [mergeFiles, setMergeFiles] = useSetting('mergeFiles', false);
-
-  return (
-    <SettingsView
-      settings={[
-        {
-          type: 'check',
-          value: darkMode,
-          set: setDarkMode,
-          name: 'Dark mode'
-        },
-        {
-          type: 'check',
-          value: mergeFiles,
-          set: setMergeFiles,
-          name: 'Merge files'
-        },
-        {
-          type: 'check',
-          value: shouldPopulateCanvasFromScreenshot,
-          set: setShouldPopulateCanvasFromScreenshot,
-          name: 'Display canvas content',
-          title: 'Attempt to display the captured canvas appearance in the snapshot preview. May not be accurate.',
-        },
-      ]}
-    />
-  );
-};
+  return {
+    type: 'check',
+    value: shouldPopulateCanvasFromScreenshot,
+    set: setShouldPopulateCanvasFromScreenshot,
+    name: 'Display canvas content',
+    title: 'Attempt to display the captured canvas appearance in the snapshot preview. May not be accurate.',
+  };
+}
diff --git a/packages/trace-viewer/src/ui/uiModeView.tsx b/packages/trace-viewer/src/ui/uiModeView.tsx
index 4399d2d13e078..97252f4ee693c 100644
--- a/packages/trace-viewer/src/ui/uiModeView.tsx
+++ b/packages/trace-viewer/src/ui/uiModeView.tsx
@@ -36,7 +36,7 @@ import { FiltersView } from './uiModeFiltersView';
 import { TestListView } from './uiModeTestListView';
 import { TraceView } from './uiModeTraceView';
 import { SettingsView } from './settingsView';
-import { DefaultSettingsView } from './defaultSettingsView';
+import { useDarkModeCheckbox, useMergeFilesCheckbox, usePopulateCanvasCheckbox } from './defaultSettingsView';
 
 let xtermSize = { cols: 80, rows: 24 };
 const xtermDataSource: XtermDataSource = {
@@ -395,6 +395,12 @@ export const UIModeView: React.FC<{}> = ({
     });
   }, [closeInstallDialog, testServerConnection]);
 
+  const settingsView = [
+    useDarkModeCheckbox(),
+    useMergeFilesCheckbox(),
+    usePopulateCanvasCheckbox()
+  ];
+
   return <div className='vbox ui-mode'>
     {!hasBrowsers && <dialog ref={dialogRef}>
       <div className='title'><span className='codicon codicon-lightbulb'></span>Install browsers</div>
@@ -520,7 +526,7 @@ export const UIModeView: React.FC<{}> = ({
           />
           <div className='section-title'>Settings</div>
         </Toolbar>
-        {settingsVisible && <DefaultSettingsView />}
+        {settingsVisible && <SettingsView settings={settingsView} />}
       </div>
       }
     />
diff --git a/packages/trace-viewer/src/ui/workbenchLoader.tsx b/packages/trace-viewer/src/ui/workbenchLoader.tsx
index 0683b3a8a9bb0..999b82be4f870 100644
--- a/packages/trace-viewer/src/ui/workbenchLoader.tsx
+++ b/packages/trace-viewer/src/ui/workbenchLoader.tsx
@@ -21,8 +21,9 @@ import { Workbench } from './workbench';
 import { TestServerConnection, WebSocketTestServerTransport } from '@testIsomorphic/testServerConnection';
 import { DialogToolbarButton } from '@web/components/dialogToolbarButton';
 import { Dialog } from '@web/shared/dialog';
-import { DefaultSettingsView } from './defaultSettingsView';
+import { useDarkModeCheckbox, usePopulateCanvasCheckbox } from './defaultSettingsView';
 import { TraceModelContext } from './traceModelContext';
+import { SettingsView } from './settingsView';
 
 export const WorkbenchLoader: React.FunctionComponent<{
 }> = () => {
@@ -184,7 +185,12 @@ export const WorkbenchLoader: React.FunctionComponent<{
       {model.title && <div className='title'>{model.title}</div>}
       <div className='spacer'></div>
       <DialogToolbarButton icon='settings-gear' title='Settings' dialogDataTestId='settings-toolbar-dialog'>
-        <DefaultSettingsView />
+        <SettingsView
+          settings={[
+            useDarkModeCheckbox(),
+            usePopulateCanvasCheckbox()
+          ]}
+        />
       </DialogToolbarButton>
     </div>
     <TraceModelContext.Provider value={model}>

From ed15e00312e1fccb85159b80b49c27f80706c0c5 Mon Sep 17 00:00:00 2001
From: cpadm <57954026+cpAdm@users.noreply.github.com>
Date: Wed, 29 Oct 2025 19:54:41 +0100
Subject: [PATCH 2/2] refactor(trace-viewer): Re-introduce DefaultSettingsView
 and add location prop

---
 .../src/ui/defaultSettingsView.tsx            | 67 ++++++++++---------
 packages/trace-viewer/src/ui/uiModeView.tsx   | 10 +--
 .../trace-viewer/src/ui/workbenchLoader.tsx   | 10 +--
 3 files changed, 41 insertions(+), 46 deletions(-)

diff --git a/packages/trace-viewer/src/ui/defaultSettingsView.tsx b/packages/trace-viewer/src/ui/defaultSettingsView.tsx
index 4b86f59c091ba..348b77b928bf1 100644
--- a/packages/trace-viewer/src/ui/defaultSettingsView.tsx
+++ b/packages/trace-viewer/src/ui/defaultSettingsView.tsx
@@ -14,40 +14,47 @@
  * limitations under the License.
  */
 
+import * as React from 'react';
+import { type Setting, SettingsView } from './settingsView';
 import { useDarkModeSetting } from '@web/theme';
 import { useSetting } from '@web/uiUtils';
-import type { Setting } from './settingsView';
 
-export function useDarkModeCheckbox(): Setting {
-  const [darkMode, setDarkMode] = useDarkModeSetting();
-  return {
-    type: 'check',
-    value: darkMode,
-    set: setDarkMode,
-    name: 'Dark mode'
-  };
-}
-
-export function useMergeFilesCheckbox(): Setting {
-  const [mergeFiles, setMergeFiles] = useSetting('mergeFiles', false);
-  return {
-    type: 'check',
-    value: mergeFiles,
-    set: setMergeFiles,
-    name: 'Merge files'
-  };
-}
-
-export function usePopulateCanvasCheckbox(): Setting {
+/**
+ * A view of the collection of standard settings used between various applications
+ */
+export const DefaultSettingsView: React.FC<{
+  location: 'ui-mode' | 'trace-viewer'
+}> = ({ location }) => {
   const [
     shouldPopulateCanvasFromScreenshot,
     setShouldPopulateCanvasFromScreenshot,
   ] = useSetting('shouldPopulateCanvasFromScreenshot', false);
-  return {
-    type: 'check',
-    value: shouldPopulateCanvasFromScreenshot,
-    set: setShouldPopulateCanvasFromScreenshot,
-    name: 'Display canvas content',
-    title: 'Attempt to display the captured canvas appearance in the snapshot preview. May not be accurate.',
-  };
-}
+  const [darkMode, setDarkMode] = useDarkModeSetting();
+  const [mergeFiles, setMergeFiles] = useSetting('mergeFiles', false);
+
+  return (
+    <SettingsView
+      settings={[
+        {
+          type: 'check',
+          value: darkMode,
+          set: setDarkMode,
+          name: 'Dark mode'
+        },
+        ...(location === 'ui-mode' ? [{
+          type: 'check',
+          value: mergeFiles,
+          set: setMergeFiles,
+          name: 'Merge files'
+        } satisfies Setting] : []),
+        {
+          type: 'check',
+          value: shouldPopulateCanvasFromScreenshot,
+          set: setShouldPopulateCanvasFromScreenshot,
+          name: 'Display canvas content',
+          title: 'Attempt to display the captured canvas appearance in the snapshot preview. May not be accurate.',
+        },
+      ]}
+    />
+  );
+};
diff --git a/packages/trace-viewer/src/ui/uiModeView.tsx b/packages/trace-viewer/src/ui/uiModeView.tsx
index 97252f4ee693c..c81726e80344b 100644
--- a/packages/trace-viewer/src/ui/uiModeView.tsx
+++ b/packages/trace-viewer/src/ui/uiModeView.tsx
@@ -36,7 +36,7 @@ import { FiltersView } from './uiModeFiltersView';
 import { TestListView } from './uiModeTestListView';
 import { TraceView } from './uiModeTraceView';
 import { SettingsView } from './settingsView';
-import { useDarkModeCheckbox, useMergeFilesCheckbox, usePopulateCanvasCheckbox } from './defaultSettingsView';
+import { DefaultSettingsView } from './defaultSettingsView';
 
 let xtermSize = { cols: 80, rows: 24 };
 const xtermDataSource: XtermDataSource = {
@@ -395,12 +395,6 @@ export const UIModeView: React.FC<{}> = ({
     });
   }, [closeInstallDialog, testServerConnection]);
 
-  const settingsView = [
-    useDarkModeCheckbox(),
-    useMergeFilesCheckbox(),
-    usePopulateCanvasCheckbox()
-  ];
-
   return <div className='vbox ui-mode'>
     {!hasBrowsers && <dialog ref={dialogRef}>
       <div className='title'><span className='codicon codicon-lightbulb'></span>Install browsers</div>
@@ -526,7 +520,7 @@ export const UIModeView: React.FC<{}> = ({
           />
           <div className='section-title'>Settings</div>
         </Toolbar>
-        {settingsVisible && <SettingsView settings={settingsView} />}
+        {settingsVisible && <DefaultSettingsView location='ui-mode' />}
       </div>
       }
     />
diff --git a/packages/trace-viewer/src/ui/workbenchLoader.tsx b/packages/trace-viewer/src/ui/workbenchLoader.tsx
index ce6ed1816dcd0..1cccd7f3b5305 100644
--- a/packages/trace-viewer/src/ui/workbenchLoader.tsx
+++ b/packages/trace-viewer/src/ui/workbenchLoader.tsx
@@ -21,8 +21,7 @@ import { Workbench } from './workbench';
 import { TestServerConnection, WebSocketTestServerTransport } from '@testIsomorphic/testServerConnection';
 import { DialogToolbarButton } from '@web/components/dialogToolbarButton';
 import { Dialog } from '@web/shared/dialog';
-import { useDarkModeCheckbox, usePopulateCanvasCheckbox } from './defaultSettingsView';
-import { SettingsView } from './settingsView';
+import { DefaultSettingsView } from './defaultSettingsView';
 
 export const WorkbenchLoader: React.FunctionComponent<{
 }> = () => {
@@ -184,12 +183,7 @@ export const WorkbenchLoader: React.FunctionComponent<{
       {model.title && <div className='title'>{model.title}</div>}
       <div className='spacer'></div>
       <DialogToolbarButton icon='settings-gear' title='Settings' dialogDataTestId='settings-toolbar-dialog'>
-        <SettingsView
-          settings={[
-            useDarkModeCheckbox(),
-            usePopulateCanvasCheckbox()
-          ]}
-        />
+        <DefaultSettingsView location='trace-viewer' />
       </DialogToolbarButton>
     </div>
     <Workbench model={model} inert={showFileUploadDropArea} />