[Monaco]Make minimap toggleable (#33742)

src/Monaco/index.html

@@ -9,17 +9,19 @@
         // `theme` can be "vs" for light theme or "vs-dark" for dark theme
         // `lang` is the language of the file
         // `wrap` if the editor is wrapping or not
+        // `minimap` if the minimap is shown
+        // `contextMenu` whether to use the Monaco context menu. The built-in context menu
+        //               doesn't work in Peek, so we set this to false and create a custom one
 
         var theme = ("[[PT_THEME]]" == "dark") ? "vs-dark" : "vs";
-        var lang = "[[PT_LANG]]";
+        var wrap = [[PT_WRAP]];
-        var wrap = ([[PT_WRAP]] == 1) ? true : false;
+        var minimap = [[PT_MINIMAP]];
-
+        var stickyScroll = [[PT_STICKY_SCROLL]];
-        var base64code = "[[PT_CODE]]";
-
-        var stickyScroll = ([[PT_STICKY_SCROLL]] == 1) ? true : false;
-
         var fontSize = [[PT_FONT_SIZE]];
-        var contextMenu = ([[PT_CONTEXTMENU]] == 1) ? true : false;
+        
+        var lang = "[[PT_LANG]]";
+        var base64code = "[[PT_CODE]]";
+        var contextMenu = [[PT_CONTEXTMENU]];
 
         var editor;
 
@@ -29,12 +31,13 @@
         }).join(''));
 
         function runToggleTextWrapCommand() {
-            if (wrap) {
-                editor.updateOptions({ wordWrap: 'off' })
-            } else {
-                editor.updateOptions({ wordWrap: 'on' })
-            }
             wrap = !wrap;
+            editor.updateOptions({ wordWrap: wrap ? 'on' : 'off' });
+        }
+
+        function runToggleMinimap() {
+            minimap = !minimap;
+            editor.updateOptions({minimap: {enabled: minimap}});
         }
 
         function runCopyCommand() {
@@ -99,8 +102,8 @@
                 language: lang, // Sets language of the code
                 readOnly: true, // Sets to readonly
                 theme: 'theme', // Sets editor theme
-                minimap: { enabled: false }, // Disables minimap
+                minimap: { enabled: minimap }, // Controls if minimap is shown
-                lineNumbersMinChars: '3', // Width of the line numbers
+                lineNumbersMinChars: 3, // Width of the line numbers
                 contextmenu: contextMenu,
                 scrollbar: {
                     // Deactivate shadows
@@ -135,10 +138,20 @@
                 contextMenuOrder: 100,
 
                 // Method that will be executed when the action is triggered.
-                // @param editor The editor instance is passed in as a convenience
+                run: runToggleTextWrapCommand
-                run: function (ed) {
+            });
-                    runToggleTextWrapCommand();
+
-                }
+            editor.addAction({
+                id: 'toggle-minimap',
+
+                label: 'Toggle minimap',
+
+                contextMenuGroupId: 'cutcopypaste',
+
+                contextMenuOrder: 100,
+
+                // Method that will be executed when the action is triggered.
+                run: runToggleMinimap
             });
 
             onContextMenu();
@@ -166,4 +179,4 @@
         }
     </script>
 </body>
-</html>
+</html>

src/modules/peek/Peek.FilePreviewer/Controls/BrowserControl.xaml.cs

@@ -231,10 +231,11 @@ namespace Peek.FilePreviewer.Controls
                 // When using Monaco, we show menu items that call the appropriate JS functions -
                 // WebView2 isn't able to show a "Copy" menu item of its own.
                 return [
-                           CreateCommandMenuItem("ContextMenu_Copy", "runCopyCommand"),
+                    CreateCommandMenuItem("ContextMenu_Copy", "runCopyCommand"),
-                           new Separator(),
+                    new Separator(),
-                           CreateCommandMenuItem("ContextMenu_ToggleTextWrapping", "runToggleTextWrapCommand"),
+                    CreateCommandMenuItem("ContextMenu_ToggleTextWrapping", "runToggleTextWrapCommand"),
-                       ];
+                    CreateCommandMenuItem("ContextMenu_ToggleMinimap", "runToggleMinimap")
+                ];
             }
             else
             {

src/modules/peek/Peek.FilePreviewer/Models/IPreviewSettings.cs

@@ -13,5 +13,7 @@ namespace Peek.FilePreviewer.Models
         public int SourceCodeFontSize { get; }
 
         public bool SourceCodeStickyScroll { get; }
+
+        public bool SourceCodeMinimap { get; }
     }
 }

src/modules/peek/Peek.FilePreviewer/Models/PreviewSettings.cs

@@ -30,6 +30,8 @@ namespace Peek.FilePreviewer.Models
 
         public bool SourceCodeStickyScroll { get; private set; }
 
+        public bool SourceCodeMinimap { get; private set; }
+
         public PreviewSettings()
         {
             _settingsUtils = new SettingsUtils();
@@ -37,6 +39,7 @@ namespace Peek.FilePreviewer.Models
             SourceCodeTryFormat = false;
             SourceCodeFontSize = 14;
             SourceCodeStickyScroll = true;
+            SourceCodeMinimap = false;
 
             LoadSettingsFromJson();
 
@@ -70,6 +73,7 @@ namespace Peek.FilePreviewer.Models
                             SourceCodeTryFormat = settings.SourceCodeTryFormat.Value;
                             SourceCodeFontSize = settings.SourceCodeFontSize.Value;
                             SourceCodeStickyScroll = settings.SourceCodeStickyScroll.Value;
+                            SourceCodeMinimap = settings.SourceCodeMinimap.Value;
                         }
 
                         retry = false;

src/modules/peek/Peek.FilePreviewer/Previewers/WebBrowserPreviewer/Helpers/MonacoHelper.cs

@@ -48,13 +48,13 @@ namespace Peek.FilePreviewer.Previewers
         /// <summary>
         /// Prepares temp html for the previewing
         /// </summary>
-        public static string PreviewTempFile(string fileText, string extension, string tempFolder, bool tryFormat, bool wrapText, bool stickyScroll, int fontSize)
+        public static string PreviewTempFile(string fileText, string extension, string tempFolder, bool tryFormat, bool wrapText, bool stickyScroll, int fontSize, bool minimap)
         {
             // TODO: check if file is too big, add MaxFileSize to settings
-            return InitializeIndexFileAndSelectedFile(fileText, extension, tempFolder, tryFormat, wrapText, stickyScroll, fontSize);
+            return InitializeIndexFileAndSelectedFile(fileText, extension, tempFolder, tryFormat, wrapText, stickyScroll, fontSize, minimap);
         }
 
-        private static string InitializeIndexFileAndSelectedFile(string fileContent, string extension, string tempFolder, bool tryFormat, bool wrapText, bool stickyScroll, int fontSize)
+        private static string InitializeIndexFileAndSelectedFile(string fileContent, string extension, string tempFolder, bool tryFormat, bool wrapText, bool stickyScroll, int fontSize, bool minimap)
         {
             string vsCodeLangSet = Microsoft.PowerToys.FilePreviewCommon.MonacoHelper.GetLanguage(extension);
 
@@ -81,13 +81,14 @@ namespace Peek.FilePreviewer.Previewers
             string html = Microsoft.PowerToys.FilePreviewCommon.MonacoHelper.ReadIndexHtml();
 
             html = html.Replace("[[PT_LANG]]", vsCodeLangSet, StringComparison.InvariantCulture);
-            html = html.Replace("[[PT_WRAP]]", wrapText ? "1" : "0", StringComparison.InvariantCulture);
+            html = html.Replace("[[PT_WRAP]]", wrapText ? "true" : "false", StringComparison.InvariantCulture);
-            html = html.Replace("[[PT_CONTEXTMENU]]", "0", StringComparison.InvariantCulture);
+            html = html.Replace("[[PT_CONTEXTMENU]]", "false", StringComparison.InvariantCulture);
-            html = html.Replace("[[PT_STICKY_SCROLL]]", stickyScroll ? "1" : "0", StringComparison.InvariantCulture);
+            html = html.Replace("[[PT_STICKY_SCROLL]]", stickyScroll ? "true" : "false", StringComparison.InvariantCulture);
             html = html.Replace("[[PT_THEME]]", theme, StringComparison.InvariantCulture);
             html = html.Replace("[[PT_FONT_SIZE]]", fontSize.ToString(CultureInfo.InvariantCulture), StringComparison.InvariantCulture);
             html = html.Replace("[[PT_CODE]]", base64FileCode, StringComparison.InvariantCulture);
             html = html.Replace("[[PT_URL]]", Microsoft.PowerToys.FilePreviewCommon.MonacoHelper.VirtualHostName, StringComparison.InvariantCulture);
+            html = html.Replace("[[PT_MINIMAP]]", minimap ? "true" : "false", StringComparison.InvariantCulture);
 
             string filename = tempFolder + "\\" + Guid.NewGuid().ToString() + ".html";
             File.WriteAllText(filename, html);

src/modules/peek/Peek.FilePreviewer/Previewers/WebBrowserPreviewer/WebBrowserPreviewer.cs

@@ -121,7 +121,7 @@ namespace Peek.FilePreviewer.Previewers
                     if (useMonaco)
                     {
                         var raw = await ReadHelper.Read(File.Path.ToString());
-                        Preview = new Uri(MonacoHelper.PreviewTempFile(raw, File.Extension, TempFolderPath.Path, _previewSettings.SourceCodeTryFormat, _previewSettings.SourceCodeWrapText, _previewSettings.SourceCodeStickyScroll, _previewSettings.SourceCodeFontSize));
+                        Preview = new Uri(MonacoHelper.PreviewTempFile(raw, File.Extension, TempFolderPath.Path, _previewSettings.SourceCodeTryFormat, _previewSettings.SourceCodeWrapText, _previewSettings.SourceCodeStickyScroll, _previewSettings.SourceCodeFontSize, _previewSettings.SourceCodeMinimap));
                     }
                     else if (isMarkdown)
                     {

src/modules/peek/Peek.UI/Strings/en-us/Resources.resw

@@ -326,4 +326,7 @@
     <value>Toggle text wrapping</value>
     <comment>Toggle whether text in pane is word-wrapped</comment>
   </data>
+  <data name="ContextMenu_ToggleMinimap" xml:space="preserve">
+    <value>Toggle minimap</value>
+  </data>
 </root>

src/modules/previewpane/MonacoPreviewHandler/MonacoPreviewHandlerControl.cs

@@ -396,13 +396,14 @@ namespace Microsoft.PowerToys.PreviewHandler.Monaco
             // prepping index html to load in
             _html = FilePreviewCommon.MonacoHelper.ReadIndexHtml();
             _html = _html.Replace("[[PT_LANG]]", _vsCodeLangSet, StringComparison.InvariantCulture);
-            _html = _html.Replace("[[PT_WRAP]]", _settings.Wrap ? "1" : "0", StringComparison.InvariantCulture);
+            _html = _html.Replace("[[PT_WRAP]]", _settings.Wrap ? "true" : "false", StringComparison.InvariantCulture);
-            _html = _html.Replace("[[PT_CONTEXTMENU]]", "1", StringComparison.InvariantCulture);
+            _html = _html.Replace("[[PT_CONTEXTMENU]]", "true", StringComparison.InvariantCulture);
             _html = _html.Replace("[[PT_THEME]]", Settings.GetTheme(), StringComparison.InvariantCulture);
-            _html = _html.Replace("[[PT_STICKY_SCROLL]]", _settings.StickyScroll ? "1" : "0", StringComparison.InvariantCulture);
+            _html = _html.Replace("[[PT_STICKY_SCROLL]]", _settings.StickyScroll ? "true" : "false", StringComparison.InvariantCulture);
             _html = _html.Replace("[[PT_FONT_SIZE]]", _settings.FontSize.ToString(CultureInfo.InvariantCulture), StringComparison.InvariantCulture);
             _html = _html.Replace("[[PT_CODE]]", _base64FileCode, StringComparison.InvariantCulture);
             _html = _html.Replace("[[PT_URL]]", FilePreviewCommon.MonacoHelper.VirtualHostName, StringComparison.InvariantCulture);
+            _html = _html.Replace("[[PT_MINIMAP]]", _settings.Minimap ? "true" : "false", StringComparison.InvariantCulture);
         }
 
         private async void DownloadLink_Click(object sender, EventArgs e)

src/modules/previewpane/MonacoPreviewHandler/Settings.cs

@@ -118,6 +118,26 @@ namespace Microsoft.PowerToys.PreviewHandler.Monaco
             }
         }
 
+        /// <summary>
+        /// Gets a value indicating whether the minimap should be enabled. Set by PT settings.
+        /// </summary>
+        public bool Minimap
+        {
+            get
+            {
+                try
+                {
+                    return moduleSettings.GetSettings<PowerPreviewSettings>(PowerPreviewSettings.ModuleName).Properties.MonacoPreviewMinimap;
+                }
+                catch (FileNotFoundException)
+                {
+                    // Couldn't read the settings
+                    // Assume default of false
+                    return false;
+                }
+            }
+        }
+
         /// <summary>
         /// Gets the color of the window background.
         /// </summary>

src/settings-ui/Settings.UI.Library/PeekPreviewSettings.cs

@@ -21,12 +21,15 @@ namespace Settings.UI.Library
 
         public BoolProperty SourceCodeStickyScroll { get; set; }
 
+        public BoolProperty SourceCodeMinimap { get; set; }
+
         public PeekPreviewSettings()
         {
             SourceCodeWrapText = new BoolProperty(false);
             SourceCodeTryFormat = new BoolProperty(false);
             SourceCodeFontSize = new IntProperty(14);
             SourceCodeStickyScroll = new BoolProperty(true);
+            SourceCodeMinimap = new BoolProperty(false);
         }
 
         public string ToJsonString()

src/settings-ui/Settings.UI.Library/PowerPreviewProperties.cs

@@ -155,6 +155,23 @@ namespace Microsoft.PowerToys.Settings.UI.Library
             }
         }
 
+        private bool monacoPreviewMinimap;
+
+        [JsonPropertyName("monaco-previewer-minimap")]
+        [JsonConverter(typeof(BoolPropertyJsonConverter))]
+        public bool MonacoPreviewMinimap
+        {
+            get => monacoPreviewMinimap;
+            set
+            {
+                if (value != monacoPreviewMinimap)
+                {
+                    LogTelemetryEvent(value);
+                    monacoPreviewMinimap = value;
+                }
+            }
+        }
+
         private bool enablePdfPreview;
 
         [JsonPropertyName("pdf-previewer-toggle-setting")]

src/settings-ui/Settings.UI/SettingsXAML/Views/PeekPage.xaml

@@ -66,6 +66,9 @@
                             <tkcontrols:SettingsCard ContentAlignment="Left" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                                 <CheckBox x:Uid="Peek_SourceCode_StickyScroll" IsChecked="{x:Bind ViewModel.SourceCodeStickyScroll, Mode=TwoWay}" />
                             </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard ContentAlignment="Left" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
+                                <CheckBox x:Uid="Peek_SourceCode_Minimap" IsChecked="{x:Bind ViewModel.SourceCodeMinimap, Mode=TwoWay}" />
+                            </tkcontrols:SettingsCard>
                         </tkcontrols:SettingsExpander.Items>
                     </tkcontrols:SettingsExpander>
                 </controls:SettingsGroup>

src/settings-ui/Settings.UI/SettingsXAML/Views/PowerPreviewPage.xaml

@@ -103,6 +103,12 @@
                                     IsChecked="{x:Bind ViewModel.MonacoPreviewStickyScroll, Mode=TwoWay}"
                                     IsEnabled="{x:Bind ViewModel.MonacoRenderIsEnabled, Mode=OneWay}" />
                             </tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard ContentAlignment="Left" IsEnabled="{x:Bind ViewModel.MonacoRenderIsEnabled, Mode=OneWay}">
+                                <CheckBox
+                                    x:Uid="FileExplorerPreview_ToggleSwitch_Monaco_Minimap"
+                                    IsChecked="{x:Bind ViewModel.MonacoPreviewMinimap, Mode=TwoWay}"
+                                    IsEnabled="{x:Bind ViewModel.MonacoRenderIsEnabled, Mode=OneWay}" />
+                            </tkcontrols:SettingsCard>
                         </tkcontrols:SettingsExpander.Items>
                     </tkcontrols:SettingsExpander>
 

src/settings-ui/Settings.UI/Strings/en-us/Resources.resw

@@ -4405,6 +4405,9 @@ Activate by holding the key for the character you want to add an accent to, then
   <data name="Peek_SourceCode_WrapText.Content" xml:space="preserve">
     <value>Wrap text</value>
   </data>
+  <data name="Peek_SourceCode_Minimap.Content" xml:space="preserve">
+    <value>Show minimap</value>
+  </data>
   <data name="ShowPluginsOverview_All.Content" xml:space="preserve">
     <value>All</value>
   </data>
@@ -4451,6 +4454,9 @@ Activate by holding the key for the character you want to add an accent to, then
   <data name="Peek_SourceCode_StickyScroll.Content" xml:space="preserve">
     <value>Enable sticky scroll</value>
   </data>
+  <data name="FileExplorerPreview_ToggleSwitch_Monaco_Minimap.Content" xml:space="preserve">
+    <value>Show minimap</value>
+  </data>
   <data name="PrivacyLink.Text" xml:space="preserve">
     <value>OpenAI Privacy</value>
   </data>

src/settings-ui/Settings.UI/ViewModels/PeekViewModel.cs

@@ -202,6 +202,20 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             }
         }
 
+        public bool SourceCodeMinimap
+        {
+            get => _peekPreviewSettings.SourceCodeMinimap.Value;
+            set
+            {
+                if (_peekPreviewSettings.SourceCodeMinimap.Value != value)
+                {
+                    _peekPreviewSettings.SourceCodeMinimap.Value = value;
+                    OnPropertyChanged(nameof(SourceCodeMinimap));
+                    SavePreviewSettings();
+                }
+            }
+        }
+
         private void NotifySettingsChanged()
         {
             // Using InvariantCulture as this is an IPC message

src/settings-ui/Settings.UI/ViewModels/PowerPreviewViewModel.cs

@@ -95,6 +95,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             _monacoMaxFileSize = Settings.Properties.MonacoPreviewMaxFileSize.Value;
             _monacoFontSize = Settings.Properties.MonacoPreviewFontSize.Value;
             _monacoStickyScroll = Settings.Properties.MonacoPreviewStickyScroll;
+            _monacoMinimap = Settings.Properties.MonacoPreviewMinimap;
 
             _pdfRenderEnabledGpoRuleConfiguration = GPOWrapper.GetConfiguredPdfPreviewEnabledValue();
             if (_pdfRenderEnabledGpoRuleConfiguration == GpoRuleConfigured.Disabled || _pdfRenderEnabledGpoRuleConfiguration == GpoRuleConfigured.Enabled)
@@ -236,6 +237,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
         private int _monacoMaxFileSize;
         private bool _monacoStickyScroll;
         private int _monacoFontSize;
+        private bool _monacoMinimap;
 
         private GpoRuleConfigured _pdfRenderEnabledGpoRuleConfiguration;
         private bool _pdfRenderEnabledStateIsGPOConfigured;
@@ -618,6 +620,20 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             }
         }
 
+        public bool MonacoPreviewMinimap
+        {
+            get => _monacoMinimap;
+            set
+            {
+                if (_monacoMinimap != value)
+                {
+                    _monacoMinimap = value;
+                    Settings.Properties.MonacoPreviewMinimap = value;
+                    RaisePropertyChanged();
+                }
+            }
+        }
+
         public int MonacoPreviewFontSize
         {
             get