Merge pull request #11229 from pradeep-patil-mdx/ccr/207-text-diff-viewer

[CCR-207] Web based file differences viewer

Author: quinntracy

content/en/docs/refguide/installation/system-requirements.md

@@ -126,17 +126,6 @@ For more information on ports and modifying Studio Pro's default ports, see [Con
 
 For information on how to ensure the smooth operation of Mendix AI Assistance (Maia), see the [Network Configuration Requirements](/refguide/mendix-ai-assistance/#maia-network-requirement) section in *Mendix AI Assistance (Maia)*.
 
-### File Comparison
-
-{{% alert color="info" %}}
-Comparing files on disk with the original is currently not supported on macOS.
-{{% /alert %}}
-
-By default, Studio Pro points to an executable shipped with TortoiseGit for file comparison. To customize this, navigate to **Preferences** > **Version control** > **General** > **File comparison** > **Executable** and choose your preferred tool. 
-
-The default path for the binary when installing Studio Pro on a new device is `C:\Program Files\TortoiseGit\bin\TortoiseGitMerge.exe`.
-
-You can download the latest version of TortoiseGitMerge from the [TortoiseGit](https://tortoisegit.org/download/) website. 
 
 ### File Locations
 

content/en/docs/refguide/modeling/menus/edit-menu/preferences-dialog.md

@@ -152,23 +152,6 @@ This setting defines the default response to the question whether to automatical
 
 ### General
 
-#### Executable
-
-This is the path and name of the program that is used to view the details of file changes in the [commit dialog box](/refguide/commit-dialog/).
-
-For example, this is how to set up file comparison for Visual Studio Code: 
-
-```text
-{path to VS Code}/Code.exe --wait --diff "{0}" "{1}"
-```
-
-#### Argument Pattern
-
-This is the pattern from which the arguments are derived that are passed to the file comparison program. The following two placeholders can be used in this pattern:
-
-* `{0}` – this is replaced with the name of the original file before the arguments are passed to the file comparison program
-* `{1}` – this is replaced with the name of the changed file before the arguments are passed to the file comparison program
-
 #### History {#history-pane}
 
 Select this option to use the blocking **History** dialog instead of the non-blocking, searchable History pane.

content/en/docs/refguide/modeling/menus/version-control-menu/history-dialog.md

@@ -92,7 +92,7 @@ The search bar within the tab can be used to filter the list of documents.
 
 ### Disk Changes
 
-This tab shows a list of the files that were changed on disk. You can see whether files were added, deleted or modified.
+This tab shows a list of the files that were changed on disk. You can see whether files were added, deleted or modified. To compare a modified file with its committed version, use **Compare with original** in the [Changes pane](/refguide/changes-pane/), which opens the [File Differences Viewer](/refguide/file-diff-viewer/).
 
 The search bar within the tab can be used to filter the list of files.
 

content/en/docs/refguide/modeling/menus/view-menu/changes-pane.md

@@ -83,6 +83,9 @@ The toolbar at this level contains the following buttons:
 * **Go to** – takes you directly to the changed element 
 * **Show purely visual changes** – shows visual changes, such as dragging an entity to a new location in the domain model
 
+For text-based properties, you can double-click a property row to open the [File Differences Viewer](/refguide/file-diff-viewer/), which shows a detailed side-by-side comparison of the old and new values. To compare file-level changes at the top level, double-click a file row or right-click and select **Compare with original**.
+
+
 The left side of the grid contains the following columns:
 
 * **Element** – the name of the modified element
@@ -146,5 +149,6 @@ The left and right panes will contain the same information as in [Zoomed-In Leve
 
 * [Studio Pro Overview](/refguide/studio-pro-overview/)
 * [Version Control](/refguide/version-control/)
+* [File Differences Viewer](/refguide/file-diff-viewer/)
 * [Comparison Pane](/refguide/comparison-pane/)
 * [Comparing Revisions](/refguide/comparing-revisions/) 

content/en/docs/refguide/modeling/menus/view-menu/comparison-pane.md

@@ -138,9 +138,7 @@ Property paths are consolidated into a tree view. Grey rows represent intermedia
 
 When you click **Go to** or double-click a document entry in Level 1, the document opens as it currently exists in your app. If the document no longer exists in your current state, Level 2 and 3 is shown but nothing opens in the editor.
 
-{{% alert color="info" %}}
-In future releases, both versions of the document will be opened side by side for visual comparison. For now, only the current version opens.
-{{% /alert %}}
+For text-based properties, you can double-click a property row or use the context menu to open a detailed side-by-side comparison in the [File Differences Viewer](/refguide/file-diff-viewer/). For file-type documents in Level 1, double-click or click **Go to** to open the File Differences Viewer instead of a document editor.
 
 ## Refresh Behavior
 
@@ -154,6 +152,7 @@ In the blank state, the **Comparison** pane displays a message with a link to st
 
 ## Read More
 
+* [File Differences Viewer](/refguide/file-diff-viewer/)
 * [History](/refguide/history-dialog/)
 * [Changes Pane](/refguide/changes-pane/)
 * [Comparing Revisions](/refguide/comparing-revisions/)

content/en/docs/refguide/modeling/menus/view-menu/file-diff-viewer.md

@@ -0,0 +1,51 @@
+---
+title: "File Differences Viewer"
+url: /refguide/file-diff-viewer/
+weight: 27
+description: "Describes the File Differences Viewer, a built-in dialog box in Studio Pro for comparing text and file differences."
+---
+
+## Introduction
+
+The **File Differences Viewer** is a dialog box in Studio Pro that displays text differences between two versions of a file or two text values. It opens as a modal dialog box and shows additions, deletions, and modifications with color-coded highlighting.
+
+{{< figure src="/attachments/refguide/modeling/menus/view-menu/file-diff-viewer/file-diff-viewer-split.png" alt="File Differences Viewer showing a side-by-side comparison with color-coded additions and deletions" class="no-border" >}}
+
+## Accessing the File Differences Viewer
+
+The File Differences Viewer opens automatically in the following scenarios:
+
+* **Changes pane**: 
+    * When you view changes at the object level and double-click a text property row, the File Differences Viewer opens to show the old and new values of that property.
+    * When you review disk changes (such as Java source code or widget files), you can right-click a modified file and select **Compare with original**, or double-click it, to open the File Differences Viewer showing the differences between your working copy and the last committed version.
+* **Comparison pane** – When you compare property values or files in the [Comparison pane](/refguide/comparison-pane/), clicking the **Compare** button opens the File Differences Viewer to show the differences.
+
+## Toolbar
+
+The File Differences Viewer toolbar contains the following buttons:
+
+| Button | Action |
+|--------|--------|
+| **Refresh** | Reloads the file contents from disk. This is useful if you make changes to the file while the dialog box is open. This button is disabled when comparing text values. |
+| **Split/Inline** toggle | Switches between split view (side-by-side) and inline view (unified). |
+
+## Reading the Diff
+
+The File Differences Viewer uses the following visual indicators to show differences:
+
+* **Green background** – Lines or words that were added in the newer version.
+* **Red background** – Lines or words that were removed from the older version.
+* **Word-level highlighting** – Within changed lines, individual words that differ are highlighted with a darker shade to pinpoint exact changes.
+
+In the split view, the older version is shown on the left and the newer version is shown on the right, with column headers **Older** and **Newer**. 
+
+In the inline view, both versions are merged into a single column with the header **Differences**, where removed lines appear above added lines.
+
+Line numbers are displayed for both sides to help you locate changes in the file.
+
+## Read More
+
+* [Changes Pane](/refguide/changes-pane/)
+* [Comparison Pane](/refguide/comparison-pane/)
+* [Comparing Revisions](/refguide/comparing-revisions/)
+* [Using Version Control in Studio Pro](/refguide/using-version-control-in-studio-pro/)

content/en/docs/refguide/version-control/using-version-control-in-studio-pro/push-pull.md

@@ -40,20 +40,10 @@ In the **Changes** pane, you can find more detailed information. There is an ent
 
 {{< figure src="/attachments/refguide/version-control/using-version-control-in-studio-pro/changes-pane.png" max-width=80% >}}
 
-If you also changed Java source code, added widgets, or made other changes that affect files other than the app file, you will see entry for each changed file. You can right-click the entry and click **Open containing folder** to open the folder with the file on disk. For files with the **Modified** status, you can use **Compare with original** that opens an external tool to show the differences.
+If you also changed Java source code, added widgets, or made other changes that affect files other than the app file, you will see entry for each changed file. You can right-click the entry and click **Open containing folder** to open the folder with the file on disk. For files with the **Modified** status, you can use **Compare with original** to open the built-in [File Differences Viewer](/refguide/file-diff-viewer/) and see the differences.
 
 {{< figure src="/attachments/refguide/version-control/using-version-control-in-studio-pro/changes-pane-file-changes.png" >}}
 
-{{% alert color="info" %}}
-An external file comparison tool can be set in **Preferences** > **Version control** > **General** > **File comparison** > **Executable**. 
-
-A tool you can consider using is TortoiseGitMerge, shipped as part of [TortoiseGit](https://tortoisegit.org/download/). It is installed by default on this path: *C:\Program Files\TortoiseGit\bin\TortoiseGitMerge.exe*.
-{{% /alert %}}
-
-{{% alert color="info" %}}
-Comparing files on disk with the original is currently not supported on macOS.
-{{% /alert %}}
-
 {{% alert color="info" %}}
 When you successfully commit your app, this becomes the new original and all the change information is removed from the **App Explorer** and the **Changes** pane.
 {{% /alert %}}
@@ -94,20 +84,10 @@ Studio Pro also attaches some information automatically:
 * The list of changed documents, folders, and modules along with the type of the change (for example, **modify** or **add**)
 * The version of Studio Pro that was used to commit
 
-If you also changed Java source code, added widgets, or made other changes that affect files other than the app file, you will see a **Changes on disk** tab that shows you what disk changes you are about to commit. **Open containing folder** opens the folder with the file on disk. For files with the **Modified** status, you can use **Compare with original** that opens an external tool to show the differences.
+If you also changed Java source code, added widgets, or made other changes that affect files other than the app file, you will see a **Changes on disk** tab that shows you what disk changes you are about to commit. **Open containing folder** opens the folder with the file on disk. For files with the **Modified** status, you can use **Compare with original** to open the built-in [File Differences Viewer](/refguide/file-diff-viewer/) and see the differences.
 
 {{< figure src="/attachments/refguide/version-control/using-version-control-in-studio-pro/commit-git-changes-on-disk.png" >}}
 
-{{% alert color="info" %}}
-An external file comparison tool can be set in **Preferences** > **Version control** > **General** > **File comparison** > **Executable**. 
-
-A tool you can consider using is TortoiseGitMerge, shipped as part of [TortoiseGit](https://tortoisegit.org/download/). It is installed by default on this path: *C:\Program Files\TortoiseGit\bin\TortoiseGitMerge.exe*.
-{{% /alert %}}
-
-{{% alert color="info" %}}
-Comparing files on disk with the original is currently not supported on macOS.
-{{% /alert %}}
-
 Committing is only allowed if your working copy is up to date with the repository. If someone else committed a change since the last time you pulled, you will have to pull first (this process is called **Commit and Combine** in the [Commit](/refguide/commit-dialog/#combine) dialog box). This is because the revision you create with the commit should incorporate both your changes and the changes by the other person. Updating will combine the latest changes in the repository with your changes. After reviewing the result and fixing any conflicts, you can commit again. 
 
 ### Pushing {#pushing}

content/en/docs/refguide/version-control/using-version-control-in-studio-pro/resolving-conflicts.md

@@ -311,7 +311,7 @@ Click this button to bring the **Changes** pane into the view, as this is the pl
 
 The **Show file conflicts** button is shown when there are conflicts in files which are not directly linked to your application.
 
-When clicked, it opens up a pop-up window with a list of all the files that are affected by the update process, with conflicted ones at the top of the list.
+When clicked, it opens up a pop-up window with a list of all the files that are affected by the update process, with conflicted ones at the top of the list. You can view the differences for individual files using the built-in [File Differences Viewer](/refguide/file-diff-viewer/).
 
 ### Rebase-Specific Controls