Mouse Utils - Mouse Highlighter (#14496)

* New PowerToys template

* Add CppWinRt to empty PowerToy

* Add Settings reference to empty PowerToy

* Use proper output dir

* Proper WindowsTargetPlatformVersion

* Add filters to vcxproj

* Proper resource file generation

* Add MouseHighlighter proof of concept code

* Abstract implementation into a struct

* Enable module

* Disable module

* Add enable module to settings page

* Can change the hotkey in settings

* Remove remaining boilerplate code

* Add logging

* Add telemetry

* Add Oobe entry

* Add installer instructions

* Add dll to pipelines

* fix spellchecker

* Add more configurability

* Make settings a bit prettier

* Fix spellchecker

* Fix wrong default fade timers

* Fix user facing strings

* Tweak default duration values

* Fix to appear in every virtual desktop

* [Mouse Highlighter] Show highlight on mouse drag (#14529)

* [Mouse Highlighter]show pointer on mouse drag

* fix spellchecker

* [MU] UI tweaks (#14544)

* UI tweaks

* Update Resources.resw

* Updated text strings

* fix spellcheck

Co-authored-by: Laute <Niels.Laute@philips.com>

* tweak default values

* PR feedback: use wstring_view

* PR feedback: Log error on json error

* PR feedback: don't throw 1

* PR feedback: fix copy-pasta leftColor->rightColor

* PR feedback:Add another error message on exception

* PR feedback: add todo to use commons/utils/json.h

Co-authored-by: Niels Laute <niels.laute@live.nl>
Co-authored-by: Laute <Niels.Laute@philips.com>

src/settings-ui/Microsoft.PowerToys.Settings.UI.Library/EnabledModules.cs

@@ -191,6 +191,22 @@ namespace Microsoft.PowerToys.Settings.UI.Library
             }
         }
 
+        private bool mouseHighlighter = true;
+
+        [JsonPropertyName("MouseHighlighter")]
+        public bool MouseHighlighter
+        {
+            get => mouseHighlighter;
+            set
+            {
+                if (mouseHighlighter != value)
+                {
+                    LogTelemetryEvent(value);
+                    mouseHighlighter = value;
+                }
+            }
+        }
+
         public string ToJsonString()
         {
             return JsonSerializer.Serialize(this);

src/settings-ui/Microsoft.PowerToys.Settings.UI.Library/Helpers/SettingsUtilities.cs

@@ -0,0 +1,39 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System.Drawing;
+using System.Globalization;
+
+namespace Microsoft.PowerToys.Settings.UI.Library.Helpers
+{
+    public static class SettingsUtilities
+    {
+        public static string ToRGBHex(string color)
+        {
+            if (color == null)
+            {
+                return "#FFFFFF";
+            }
+
+            // Using InvariantCulture as these are expected to be hex codes.
+            bool success = int.TryParse(
+                color.Replace("#", string.Empty),
+                System.Globalization.NumberStyles.HexNumber,
+                CultureInfo.InvariantCulture,
+                out int argb);
+
+            if (success)
+            {
+                Color clr = Color.FromArgb(argb);
+                return "#" + clr.R.ToString("X2", CultureInfo.InvariantCulture) +
+                    clr.G.ToString("X2", CultureInfo.InvariantCulture) +
+                    clr.B.ToString("X2", CultureInfo.InvariantCulture);
+            }
+            else
+            {
+                return "#FFFFFF";
+            }
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI.Library/MouseHighlighterProperties.cs

@@ -0,0 +1,43 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System.Text.Json.Serialization;
+
+namespace Microsoft.PowerToys.Settings.UI.Library
+{
+    public class MouseHighlighterProperties
+    {
+        [JsonPropertyName("activation_shortcut")]
+        public HotkeySettings ActivationShortcut { get; set; }
+
+        [JsonPropertyName("left_button_click_color")]
+        public StringProperty LeftButtonClickColor { get; set; }
+
+        [JsonPropertyName("right_button_click_color")]
+        public StringProperty RightButtonClickColor { get; set; }
+
+        [JsonPropertyName("highlight_opacity")]
+        public IntProperty HighlightOpacity { get; set; }
+
+        [JsonPropertyName("highlight_radius")]
+        public IntProperty HighlightRadius { get; set; }
+
+        [JsonPropertyName("highlight_fade_delay_ms")]
+        public IntProperty HighlightFadeDelayMs { get; set; }
+
+        [JsonPropertyName("highlight_fade_duration_ms")]
+        public IntProperty HighlightFadeDurationMs { get; set; }
+
+        public MouseHighlighterProperties()
+        {
+            ActivationShortcut = new HotkeySettings(true, false, false, true, 0x48);
+            LeftButtonClickColor = new StringProperty("#FFFF00");
+            RightButtonClickColor = new StringProperty("#0000FF");
+            HighlightOpacity = new IntProperty(160);
+            HighlightRadius = new IntProperty(20);
+            HighlightFadeDelayMs = new IntProperty(500);
+            HighlightFadeDurationMs = new IntProperty(250);
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI.Library/MouseHighlighterSettings.cs

@@ -0,0 +1,35 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System.Text.Json.Serialization;
+using Microsoft.PowerToys.Settings.UI.Library.Interfaces;
+
+namespace Microsoft.PowerToys.Settings.UI.Library
+{
+    public class MouseHighlighterSettings : BasePTModuleSettings, ISettingsConfig
+    {
+        public const string ModuleName = "MouseHighlighter";
+
+        [JsonPropertyName("properties")]
+        public MouseHighlighterProperties Properties { get; set; }
+
+        public MouseHighlighterSettings()
+        {
+            Name = ModuleName;
+            Properties = new MouseHighlighterProperties();
+            Version = "1.0";
+        }
+
+        public string GetModuleName()
+        {
+            return Name;
+        }
+
+        // This can be utilized in the future if the settings.json file is to be modified/deleted.
+        public bool UpgradeSettingsConfiguration()
+        {
+            return false;
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI.Library/MouseHighlighterSettingsIPCMessage.cs

@@ -0,0 +1,29 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System.Text.Json;
+using System.Text.Json.Serialization;
+
+namespace Microsoft.PowerToys.Settings.UI.Library
+{
+    public class MouseHighlighterSettingsIPCMessage
+    {
+        [JsonPropertyName("powertoys")]
+        public SndMouseHighlighterSettings Powertoys { get; set; }
+
+        public MouseHighlighterSettingsIPCMessage()
+        {
+        }
+
+        public MouseHighlighterSettingsIPCMessage(SndMouseHighlighterSettings settings)
+        {
+            this.Powertoys = settings;
+        }
+
+        public string ToJsonString()
+        {
+            return JsonSerializer.Serialize(this);
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI.Library/SndMouseHighlighterSettings.cs

@@ -0,0 +1,29 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System.Text.Json;
+using System.Text.Json.Serialization;
+
+namespace Microsoft.PowerToys.Settings.UI.Library
+{
+    public class SndMouseHighlighterSettings
+    {
+        [JsonPropertyName("MouseHighlighter")]
+        public MouseHighlighterSettings MouseHighlighter { get; set; }
+
+        public SndMouseHighlighterSettings()
+        {
+        }
+
+        public SndMouseHighlighterSettings(MouseHighlighterSettings settings)
+        {
+            MouseHighlighter = settings;
+        }
+
+        public string ToJsonString()
+        {
+            return JsonSerializer.Serialize(this);
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI.Library/ViewModels/FancyZonesViewModel.cs

@@ -554,7 +554,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
                 // The fallback value is based on ToRGBHex's behavior, which returns
                 // #FFFFFF if any exceptions are encountered, e.g. from passing in a null value.
                 // This extra handling is added here to deal with FxCop warnings.
-                value = (value != null) ? ToRGBHex(value) : "#FFFFFF";
+                value = (value != null) ? SettingsUtilities.ToRGBHex(value) : "#FFFFFF";
                 if (!value.Equals(_zoneHighlightColor, StringComparison.OrdinalIgnoreCase))
                 {
                     _zoneHighlightColor = value;
@@ -576,7 +576,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
                 // The fallback value is based on ToRGBHex's behavior, which returns
                 // #FFFFFF if any exceptions are encountered, e.g. from passing in a null value.
                 // This extra handling is added here to deal with FxCop warnings.
-                value = (value != null) ? ToRGBHex(value) : "#FFFFFF";
+                value = (value != null) ? SettingsUtilities.ToRGBHex(value) : "#FFFFFF";
                 if (!value.Equals(_zoneBorderColor, StringComparison.OrdinalIgnoreCase))
                 {
                     _zoneBorderColor = value;
@@ -598,7 +598,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
                 // The fallback value is based on ToRGBHex's behavior, which returns
                 // #FFFFFF if any exceptions are encountered, e.g. from passing in a null value.
                 // This extra handling is added here to deal with FxCop warnings.
-                value = (value != null) ? ToRGBHex(value) : "#FFFFFF";
+                value = (value != null) ? SettingsUtilities.ToRGBHex(value) : "#FFFFFF";
                 if (!value.Equals(_zoneInActiveColor, StringComparison.OrdinalIgnoreCase))
                 {
                     _zoneInActiveColor = value;
@@ -753,27 +753,5 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
             OnPropertyChanged(propertyName);
             SettingsUtils.SaveSettings(Settings.ToJsonString(), GetSettingsSubPath());
         }
-
-        private static string ToRGBHex(string color)
-        {
-            // Using InvariantCulture as these are expected to be hex codes.
-            bool success = int.TryParse(
-                color.Replace("#", string.Empty),
-                System.Globalization.NumberStyles.HexNumber,
-                CultureInfo.InvariantCulture,
-                out int argb);
-
-            if (success)
-            {
-                Color clr = Color.FromArgb(argb);
-                return "#" + clr.R.ToString("X2", CultureInfo.InvariantCulture) +
-                    clr.G.ToString("X2", CultureInfo.InvariantCulture) +
-                    clr.B.ToString("X2", CultureInfo.InvariantCulture);
-            }
-            else
-            {
-                return "#FFFFFF";
-            }
-        }
     }
 }

src/settings-ui/Microsoft.PowerToys.Settings.UI.Library/ViewModels/MouseUtilsViewModel.cs

@@ -17,7 +17,9 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
 
         private FindMyMouseSettings FindMyMouseSettingsConfig { get; set; }
 
-        public MouseUtilsViewModel(ISettingsUtils settingsUtils, ISettingsRepository<GeneralSettings> settingsRepository, ISettingsRepository<FindMyMouseSettings> findMyMouseSettingsRepository, Func<string, int> ipcMSGCallBackFunc)
+        private MouseHighlighterSettings MouseHighlighterSettingsConfig { get; set; }
+
+        public MouseUtilsViewModel(ISettingsUtils settingsUtils, ISettingsRepository<GeneralSettings> settingsRepository, ISettingsRepository<FindMyMouseSettings> findMyMouseSettingsRepository, ISettingsRepository<MouseHighlighterSettings> mouseHighlighterSettingsRepository, Func<string, int> ipcMSGCallBackFunc)
         {
             SettingsUtils = settingsUtils;
 
@@ -31,6 +33,8 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
 
             _isFindMyMouseEnabled = GeneralSettingsConfig.Enabled.FindMyMouse;
 
+            _isMouseHighlighterEnabled = GeneralSettingsConfig.Enabled.MouseHighlighter;
+
             // To obtain the find my mouse settings, if the file exists.
             // If not, to create a file with the default settings and to return the default configurations.
             if (findMyMouseSettingsRepository == null)
@@ -41,6 +45,23 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
             FindMyMouseSettingsConfig = findMyMouseSettingsRepository.SettingsConfig;
             _findMyMouseDoNotActivateOnGameMode = FindMyMouseSettingsConfig.Properties.DoNotActivateOnGameMode.Value;
 
+            if (mouseHighlighterSettingsRepository == null)
+            {
+                throw new ArgumentNullException(nameof(mouseHighlighterSettingsRepository));
+            }
+
+            MouseHighlighterSettingsConfig = mouseHighlighterSettingsRepository.SettingsConfig;
+            string leftClickColor = MouseHighlighterSettingsConfig.Properties.LeftButtonClickColor.Value;
+            _highlighterLeftButtonClickColor = !string.IsNullOrEmpty(leftClickColor) ? leftClickColor : "#FFFF00";
+
+            string rightClickColor = MouseHighlighterSettingsConfig.Properties.RightButtonClickColor.Value;
+            _highlighterRightButtonClickColor = !string.IsNullOrEmpty(rightClickColor) ? rightClickColor : "#0000FF";
+
+            _highlighterOpacity = MouseHighlighterSettingsConfig.Properties.HighlightOpacity.Value;
+            _highlighterRadius = MouseHighlighterSettingsConfig.Properties.HighlightRadius.Value;
+            _highlightFadeDelayMs = MouseHighlighterSettingsConfig.Properties.HighlightFadeDelayMs.Value;
+            _highlightFadeDurationMs = MouseHighlighterSettingsConfig.Properties.HighlightFadeDurationMs.Value;
+
             // set the callback functions value to handle outgoing IPC message.
             SendConfigMSG = ipcMSGCallBackFunc;
         }
@@ -93,9 +114,180 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
             SettingsUtils.SaveSettings(FindMyMouseSettingsConfig.ToJsonString(), FindMyMouseSettings.ModuleName);
         }
 
+        public bool IsMouseHighlighterEnabled
+        {
+            get => _isMouseHighlighterEnabled;
+            set
+            {
+                if (_isMouseHighlighterEnabled != value)
+                {
+                    _isMouseHighlighterEnabled = value;
+
+                    GeneralSettingsConfig.Enabled.MouseHighlighter = value;
+                    OnPropertyChanged(nameof(_isMouseHighlighterEnabled));
+
+                    OutGoingGeneralSettings outgoing = new OutGoingGeneralSettings(GeneralSettingsConfig);
+                    SendConfigMSG(outgoing.ToString());
+
+                    NotifyMouseHighlighterPropertyChanged();
+                }
+            }
+        }
+
+        public HotkeySettings MouseHighlighterActivationShortcut
+        {
+            get
+            {
+                return MouseHighlighterSettingsConfig.Properties.ActivationShortcut;
+            }
+
+            set
+            {
+                if (MouseHighlighterSettingsConfig.Properties.ActivationShortcut != value)
+                {
+                    MouseHighlighterSettingsConfig.Properties.ActivationShortcut = value;
+                    NotifyMouseHighlighterPropertyChanged();
+                }
+            }
+        }
+
+        public string MouseHighlighterLeftButtonClickColor
+        {
+            get
+            {
+                return _highlighterLeftButtonClickColor;
+            }
+
+            set
+            {
+                // The fallback value is based on ToRGBHex's behavior, which returns
+                // #FFFFFF if any exceptions are encountered, e.g. from passing in a null value.
+                // This extra handling is added here to deal with FxCop warnings.
+                value = (value != null) ? SettingsUtilities.ToRGBHex(value) : "#FFFFFF";
+                if (!value.Equals(_highlighterLeftButtonClickColor, StringComparison.OrdinalIgnoreCase))
+                {
+                    _highlighterLeftButtonClickColor = value;
+                    MouseHighlighterSettingsConfig.Properties.LeftButtonClickColor.Value = value;
+                    NotifyMouseHighlighterPropertyChanged();
+                }
+            }
+        }
+
+        public string MouseHighlighterRightButtonClickColor
+        {
+            get
+            {
+                return _highlighterRightButtonClickColor;
+            }
+
+            set
+            {
+                // The fallback value is based on ToRGBHex's behavior, which returns
+                // #FFFFFF if any exceptions are encountered, e.g. from passing in a null value.
+                // This extra handling is added here to deal with FxCop warnings.
+                value = (value != null) ? SettingsUtilities.ToRGBHex(value) : "#FFFFFF";
+                if (!value.Equals(_highlighterRightButtonClickColor, StringComparison.OrdinalIgnoreCase))
+                {
+                    _highlighterRightButtonClickColor = value;
+                    MouseHighlighterSettingsConfig.Properties.RightButtonClickColor.Value = value;
+                    NotifyMouseHighlighterPropertyChanged();
+                }
+            }
+        }
+
+        public int MouseHighlighterOpacity
+        {
+            get
+            {
+                return _highlighterOpacity;
+            }
+
+            set
+            {
+                if (value != _highlighterOpacity)
+                {
+                    _highlighterOpacity = value;
+                    MouseHighlighterSettingsConfig.Properties.HighlightOpacity.Value = value;
+                    NotifyMouseHighlighterPropertyChanged();
+                }
+            }
+        }
+
+        public int MouseHighlighterRadius
+        {
+            get
+            {
+                return _highlighterRadius;
+            }
+
+            set
+            {
+                if (value != _highlighterRadius)
+                {
+                    _highlighterRadius = value;
+                    MouseHighlighterSettingsConfig.Properties.HighlightRadius.Value = value;
+                    NotifyMouseHighlighterPropertyChanged();
+                }
+            }
+        }
+
+        public int MouseHighlighterFadeDelayMs
+        {
+            get
+            {
+                return _highlightFadeDelayMs;
+            }
+
+            set
+            {
+                if (value != _highlightFadeDelayMs)
+                {
+                    _highlightFadeDelayMs = value;
+                    MouseHighlighterSettingsConfig.Properties.HighlightFadeDelayMs.Value = value;
+                    NotifyMouseHighlighterPropertyChanged();
+                }
+            }
+        }
+
+        public int MouseHighlighterFadeDurationMs
+        {
+            get
+            {
+                return _highlightFadeDurationMs;
+            }
+
+            set
+            {
+                if (value != _highlightFadeDurationMs)
+                {
+                    _highlightFadeDurationMs = value;
+                    MouseHighlighterSettingsConfig.Properties.HighlightFadeDurationMs.Value = value;
+                    NotifyMouseHighlighterPropertyChanged();
+                }
+            }
+        }
+
+        public void NotifyMouseHighlighterPropertyChanged([CallerMemberName] string propertyName = null)
+        {
+            OnPropertyChanged(propertyName);
+
+            SndMouseHighlighterSettings outsettings = new SndMouseHighlighterSettings(MouseHighlighterSettingsConfig);
+            SndModuleSettings<SndMouseHighlighterSettings> ipcMessage = new SndModuleSettings<SndMouseHighlighterSettings>(outsettings);
+            SendConfigMSG(ipcMessage.ToJsonString());
+            SettingsUtils.SaveSettings(MouseHighlighterSettingsConfig.ToJsonString(), MouseHighlighterSettings.ModuleName);
+        }
+
         private Func<string, int> SendConfigMSG { get; }
 
         private bool _isFindMyMouseEnabled;
         private bool _findMyMouseDoNotActivateOnGameMode;
+
+        private bool _isMouseHighlighterEnabled;
+        private string _highlighterLeftButtonClickColor;
+        private string _highlighterRightButtonClickColor;
+        private int _highlighterOpacity;
+        private int _highlighterRadius;
+        private int _highlightFadeDelayMs;
+        private int _highlightFadeDurationMs;
     }
 }

src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj

@@ -237,8 +237,11 @@
     <Content Include="Assets\FluentIcons\FluentIconsAwake.png" />
     <Content Include="Assets\FluentIcons\FluentIconsFancyZones.png" />
     <Content Include="Assets\FluentIcons\FluentIconsFileExplorerPreview.png" />
+    <Content Include="Assets\FluentIcons\FluentIconsFindMyMouse.png" />
     <Content Include="Assets\FluentIcons\FluentIconsImageResizer.png" />
     <Content Include="Assets\FluentIcons\FluentIconsKeyboardManager.png" />
+    <Content Include="Assets\FluentIcons\FluentIconsMouseHighlighter.png" />
+    <Content Include="Assets\FluentIcons\FluentIconsMouseHighlighter.png" />
     <Content Include="Assets\FluentIcons\FluentIconsMouseUtils.png" />
     <Content Include="Assets\FluentIcons\FluentIconsPowerRename.png" />
     <Content Include="Assets\FluentIcons\FluentIconsPowerToys.png" />

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeMouseUtils.xaml

@@ -18,6 +18,10 @@
                            Style="{ThemeResource OobeSubtitleStyle}" />
                 <toolkitcontrols:MarkdownTextBlock Background="Transparent" x:Uid="Oobe_MouseUtils_FindMyMouse_Description" />
 
+                <TextBlock x:Uid="Oobe_MouseUtils_MouseHighlighter"
+                           Style="{ThemeResource OobeSubtitleStyle}" />
+                <toolkitcontrols:MarkdownTextBlock Background="Transparent" x:Uid="Oobe_MouseUtils_MouseHighlighter_Description" />
+
                 <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
                     <Button x:Uid="OOBE_Settings"
                             Click="SettingsLaunchButton_Click"/>

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

@@ -655,11 +655,11 @@
     <value>Shows a help overlay with Windows shortcuts.</value>
   </data>
   <data name="ShortcutGuide_PressTime.Header" xml:space="preserve">
-    <value>Press duration before showing (ms)</value>
+    <value>Press duration before showing</value>
     <comment>pressing a key in milliseconds</comment>
   </data>
   <data name="ShortcutGuide_PressTime.Description" xml:space="preserve">
-    <value>How long to press the Windows key to activate the module</value>
+    <value>How long to press the Windows key to activate the module (in ms)</value>
   </data>
   <data name="ShortcutGuide_ActivationMethod.Header" xml:space="preserve">
     <value>Activation method</value>
@@ -1247,7 +1247,7 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
     <value>Activation shortcut</value>
   </data>
   <data name="Activation_Shortcut.Description" xml:space="preserve">
-    <value>Customize the keyboard shortcut to activate this module</value>
+    <value>Customize the shortcut to activate this module</value>
   </data>
   <data name="Oobe_GetStarted.Text" xml:space="preserve">
     <value>Let's get started!</value>
@@ -1627,9 +1627,17 @@ From there, simply click on a Markdown file, PDF file or SVG icon in the File Ex
     <comment>Mouse as in the hardware peripheral</comment>
   </data>
   <data name="Oobe_MouseUtils_FindMyMouse_Description.Text" xml:space="preserve">
-    <value>Click twice on the Left Control key to focus on your mouse.</value>
+    <value>Press the left Ctrl key twice to focus the mouse pointer.</value>
     <comment>Mouse as in the hardware peripheral. Key as in a keyboard key</comment>
   </data>
+  <data name="Oobe_MouseUtils_MouseHighlighter.Text" xml:space="preserve">
+    <value>Mouse Highlighter</value>
+    <comment>Mouse as in the hardware peripheral.</comment>
+  </data>
+  <data name="Oobe_MouseUtils_MouseHighlighter_Description.Text" xml:space="preserve">
+    <value>Use a keyboard shortcut highlight left and right mouse clicks.</value>
+    <comment>Mouse as in the hardware peripheral.</comment>
+  </data>
   <data name="Launch_Run.Content" xml:space="preserve">
     <value>Launch PowerToys Run</value>
   </data>
@@ -1709,18 +1717,67 @@ From there, simply click on a Markdown file, PDF file or SVG icon in the File Ex
   <data name="MouseUtils.ModuleDescription" xml:space="preserve">
     <value>A collection of mouse utilities.</value>
   </data>
+  <data name="MouseUtils_FindMyMouse.Header" xml:space="preserve">
+    <value>Find My Mouse</value>
+    <comment>Refers to the utility name</comment>
+  </data>
   <data name="MouseUtils_Enable_FindMyMouse.Header" xml:space="preserve">
     <value>Enable Find My Mouse</value>
     <comment>"Find My Mouse" is the name of the utility.</comment>
   </data>
-  <data name="MouseUtils_Enable_FindMyMouse.Description" xml:space="preserve">
-    <value>Press the Left Control key twice to focus the mouse pointer.</value>
-    <comment>"Left Control" is a keyboard key.</comment>
+	<data name="MouseUtils_FindMyMouse_Description.Text" xml:space="preserve">
+    <value>Find My Mouse highlights the position of the cursor when pressing the left Ctrl key twice.</value>
+    <comment>"Ctrl" is a keyboard key. "Find My Mouse" is the name of the utility</comment>
   </data>
   <data name="MouseUtils_Prevent_Activation_On_Game_Mode.Content" xml:space="preserve">
     <value>Do not activate when Game Mode is on</value>
     <comment>"Game mode" is the Windows feature to prevent notification when playing a game.</comment>
   </data>
+  <data name="MouseUtils_MouseHighlighter.Header" xml:space="preserve">
+    <value>Mouse Highlighter</value>
+    <comment>Refers to the utility name</comment>
+  </data>
+  <data name="MouseUtils_Enable_MouseHighlighter.Header" xml:space="preserve">
+    <value>Enable Mouse Highlighter</value>
+    <comment>"Find My Mouse" is the name of the utility.</comment>
+  </data>
+  <data name="MouseUtils_MouseHighlighter_Description.Text" xml:space="preserve">
+    <value>Mouse Highlighter mode will highlight mouse clicks.</value>
+    <comment>"Mouse Highlighter" is the name of the utility. Mouse is the hardware mouse.</comment>
+  </data>
+
+	<data name="MouseUtils_MouseHighlighter_ActivationShortcut.Header" xml:space="preserve">
+    <value>Activation shortcut</value>
+  </data>
+	<data name="MouseUtils_MouseHighlighter_ActivationShortcut.Description" xml:space="preserve">
+    <value>Customize the shortcut to turn on or off this mode</value>
+    <comment>"Mouse Highlighter" is the name of the utility. Mouse is the hardware mouse.</comment>
+  </data>
+
+	<data name="MouseUtils_MouseHighlighter_LeftButtonClickColor.Header" xml:space="preserve">
+    <value>Left button highlight color</value>
+  </data>
+  <data name="MouseUtils_MouseHighlighter_RightButtonClickColor.Header" xml:space="preserve">
+    <value>Right button highlight color</value>
+  </data>
+  <data name="MouseUtils_MouseHighlighter_HighlightOpacity.Header" xml:space="preserve">
+    <value>Opacity</value>
+  </data>
+  <data name="MouseUtils_MouseHighlighter_HighlightRadius.Header" xml:space="preserve">
+    <value>Radius</value>
+  </data>
+  <data name="MouseUtils_MouseHighlighter_FadeDelayMs.Header" xml:space="preserve">
+    <value>Fade delay</value>
+  </data>
+  <data name="MouseUtils_MouseHighlighter_FadeDelayMs.Description" xml:space="preserve">
+    <value>How long it takes before a highlight starts to disappear (in ms)</value>
+  </data>
+  <data name="MouseUtils_MouseHighlighter_FadeDurationMs.Header" xml:space="preserve">
+    <value>Fade duration</value>
+  </data>
+  <data name="MouseUtils_MouseHighlighter_FadeDurationMs.Description" xml:space="preserve">
+    <value>Duration of the disappear animation (in ms)</value>
+  </data>
   <data name="FancyZones_Radio_Custom_Colors.Content" xml:space="preserve">
     <value>Custom colors</value>
   </data>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/MouseUtilsPage.xaml

@@ -13,22 +13,117 @@
                                   ModuleImageSource="ms-appx:///Assets/Modules/MouseUtils.png">
         <controls:SettingsPageControl.ModuleContent>
             <StackPanel Orientation="Vertical">
+                <controls:SettingsGroup x:Uid="MouseUtils_FindMyMouse">
+                    <TextBlock x:Uid="MouseUtils_FindMyMouse_Description" Margin="0,0,0,8" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
+                    <controls:SettingExpander IsExpanded="True">
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="MouseUtils_Enable_FindMyMouse">
+                                <controls:Setting.Icon>
+                                    <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsFindMyMouse.png" ShowAsMonochrome="False" />
+                                </controls:Setting.Icon>
+                                <controls:Setting.ActionContent>
+                                    <ToggleSwitch IsOn="{x:Bind ViewModel.IsFindMyMouseEnabled, Mode=TwoWay}" HorizontalAlignment="Right"/>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
+                        </controls:SettingExpander.Header>
+                        <controls:SettingExpander.Content>
+                            <CheckBox x:Uid="MouseUtils_Prevent_Activation_On_Game_Mode"
+                                      IsChecked="{x:Bind ViewModel.FindMyMouseDoNotActivateOnGameMode, Mode=TwoWay}"
+                                      Margin="{StaticResource ExpanderSettingMargin}"
+                                      IsEnabled="{x:Bind ViewModel.IsFindMyMouseEnabled, Mode=OneWay}" />
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+                </controls:SettingsGroup>
+                <controls:SettingsGroup x:Uid="MouseUtils_MouseHighlighter">
+                    <TextBlock x:Uid="MouseUtils_MouseHighlighter_Description" Margin="0,0,0,8" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
+                    <controls:Setting x:Uid="MouseUtils_Enable_MouseHighlighter">
+                        <controls:Setting.Icon>
+                            <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsMouseHighlighter.png" ShowAsMonochrome="False" />
+                        </controls:Setting.Icon>
+                        <controls:Setting.ActionContent>
+                                    <ToggleSwitch IsOn="{x:Bind ViewModel.IsMouseHighlighterEnabled, Mode=TwoWay}" HorizontalAlignment="Right"/>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
 
-                <controls:SettingExpander IsExpanded="True">
-                    <controls:SettingExpander.Header>
-                        <controls:Setting x:Uid="MouseUtils_Enable_FindMyMouse" Icon="&#xF272;">
-                            <controls:Setting.ActionContent>
-                                <ToggleSwitch IsOn="{x:Bind ViewModel.IsFindMyMouseEnabled, Mode=TwoWay}" HorizontalAlignment="Right"/>
-                            </controls:Setting.ActionContent>
-                        </controls:Setting>
-                    </controls:SettingExpander.Header>
-                    <controls:SettingExpander.Content>
-                        <CheckBox x:Uid="MouseUtils_Prevent_Activation_On_Game_Mode"
-                                  IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.FindMyMouseDoNotActivateOnGameMode}"
-                                  Margin="{StaticResource ExpanderSettingMargin}"
-                                  IsEnabled="{x:Bind ViewModel.IsFindMyMouseEnabled, Mode=OneWay}" />
-                    </controls:SettingExpander.Content>
-                </controls:SettingExpander>
+
+                    <controls:Setting x:Uid="MouseUtils_MouseHighlighter_ActivationShortcut" Icon="&#xEDA7;" IsEnabled="{x:Bind ViewModel.IsMouseHighlighterEnabled, Mode=OneWay}">
+                                    <controls:Setting.ActionContent>
+                                        <controls:ShortcutControl HotkeySettings="{x:Bind Path=ViewModel.MouseHighlighterActivationShortcut, Mode=TwoWay}"
+                                                            MinWidth="{StaticResource SettingActionControlMinWidth}"/>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+
+                    <controls:SettingExpander IsEnabled="{x:Bind ViewModel.IsMouseHighlighterEnabled, Mode=OneWay}" IsExpanded="True" >
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="ShortcutGuide_Appearance_Behavior" Icon="&#xE790;" />
+                        </controls:SettingExpander.Header>
+                      
+
+                        <controls:SettingExpander.Content>
+
+                            <StackPanel>
+                                <controls:Setting x:Uid="MouseUtils_MouseHighlighter_LeftButtonClickColor" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsMouseHighlighterEnabled}" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <controls:ColorPickerButton SelectedColor="{x:Bind Path=ViewModel.MouseHighlighterLeftButtonClickColor, Mode=TwoWay}" />
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                             
+                                <controls:Setting x:Uid="MouseUtils_MouseHighlighter_RightButtonClickColor" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsMouseHighlighterEnabled}" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <controls:ColorPickerButton SelectedColor="{x:Bind Path=ViewModel.MouseHighlighterRightButtonClickColor, Mode=TwoWay}" />
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                              
+                                <controls:Setting x:Uid="MouseUtils_MouseHighlighter_HighlightOpacity" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsMouseHighlighterEnabled}" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <Slider Minimum="0"
+                                            Maximum="255"
+                                            MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                            Value="{x:Bind Mode=TwoWay, Path=ViewModel.MouseHighlighterOpacity}"
+                                            HorizontalAlignment="Right"/>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                               
+                                <controls:Setting x:Uid="MouseUtils_MouseHighlighter_HighlightRadius" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsMouseHighlighterEnabled}" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <muxc:NumberBox Minimum="5"
+                                                    Value="{x:Bind Mode=TwoWay, Path=ViewModel.MouseHighlighterRadius}"
+                                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                                    SpinButtonPlacementMode="Compact"
+                                                    HorizontalAlignment="Left"
+                                                    SmallChange="1"
+                                                    LargeChange="10"/>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                            
+                                <controls:Setting x:Uid="MouseUtils_MouseHighlighter_FadeDelayMs" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsMouseHighlighterEnabled}" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <muxc:NumberBox Minimum="100"
+                                                    Value="{x:Bind Mode=TwoWay, Path=ViewModel.MouseHighlighterFadeDelayMs}"
+                                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                                    SpinButtonPlacementMode="Compact"
+                                                    HorizontalAlignment="Left"
+                                                    SmallChange="10"
+                                                    LargeChange="100"/>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                           
+                                <controls:Setting x:Uid="MouseUtils_MouseHighlighter_FadeDurationMs" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsMouseHighlighterEnabled}" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <muxc:NumberBox Minimum="100"
+                                                    Value="{x:Bind Mode=TwoWay, Path=ViewModel.MouseHighlighterFadeDurationMs}"
+                                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                                    SpinButtonPlacementMode="Compact"
+                                                    HorizontalAlignment="Left"
+                                                    SmallChange="10"
+                                                    LargeChange="100"/>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                            </StackPanel>
+            </controls:SettingExpander.Content>
+            </controls:SettingExpander>
+                </controls:SettingsGroup>
+            
             </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
         <controls:SettingsPageControl.PrimaryLinks>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/MouseUtilsPage.xaml.cs

@@ -15,7 +15,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
         public MouseUtilsPage()
         {
             var settingsUtils = new SettingsUtils();
-            ViewModel = new MouseUtilsViewModel(settingsUtils, SettingsRepository<GeneralSettings>.GetInstance(settingsUtils), SettingsRepository<FindMyMouseSettings>.GetInstance(settingsUtils), ShellPage.SendDefaultIPCMessage);
+            ViewModel = new MouseUtilsViewModel(settingsUtils, SettingsRepository<GeneralSettings>.GetInstance(settingsUtils), SettingsRepository<FindMyMouseSettings>.GetInstance(settingsUtils), SettingsRepository<MouseHighlighterSettings>.GetInstance(settingsUtils), ShellPage.SendDefaultIPCMessage);
             DataContext = ViewModel;
             InitializeComponent();
         }