diff --git a/docs/user/img/addons-docdiff.gif b/docs/user/img/addons-docdiff.gif deleted file mode 100644 index 0ed4be8c91b..00000000000 Binary files a/docs/user/img/addons-docdiff.gif and /dev/null differ diff --git a/docs/user/img/screenshot-viz-diff-ui.png b/docs/user/img/screenshot-viz-diff-ui.png new file mode 100644 index 00000000000..c8cd7a7bdd7 Binary files /dev/null and b/docs/user/img/screenshot-viz-diff-ui.png differ diff --git a/docs/user/img/viz-diff-configs.gif b/docs/user/img/viz-diff-configs.gif new file mode 100644 index 00000000000..963cdcd0d51 Binary files /dev/null and b/docs/user/img/viz-diff-configs.gif differ diff --git a/docs/user/img/viz-diff-nav.gif b/docs/user/img/viz-diff-nav.gif new file mode 100644 index 00000000000..ea2468fb010 Binary files /dev/null and b/docs/user/img/viz-diff-nav.gif differ diff --git a/docs/user/visual-diff.rst b/docs/user/visual-diff.rst index 2a81f651621..bdf692f1647 100644 --- a/docs/user/visual-diff.rst +++ b/docs/user/visual-diff.rst @@ -7,24 +7,40 @@ showing what has changed between the ``latest`` version and the active :doc:`pul Visual diff allows you to quickly review changes visually, and focus your review on what has changed in the current page. -.. figure:: /img/addons-docdiff.gif - :width: 80% - - Example of Visual diff - Using Visual diff ----------------- -Visual diff is enabled by default and it's only available on pull request builds. -Once enabled, a new UI element appears at the top-right of the page showing a dropdown selector containing -all the files that have changed between the base version (e.g. ``latest``) and the current pull request build. +Visual diff is enabled by `default` and it's only available on pull request builds. + +Once enabled, a new UI element appears at the top-right of the page showing a dropdown selector containing all the files that have changed between the base version (e.g. ``latest``) and the current pull request build. +The pull request build information will also be accessible as a pop-up notification on initial load or from the hyperlink in the pinned selector element. + +.. figure:: /img/screenshot-viz-diff-ui.png + :width: 80% + You can select any of those files from the dropdown to jump directly into that page. Once there, you can toggle it on/off by pressing the :guilabel:`Show diff` link from the UI element, or pressing the `d` key if you have hotkeys enabled. Visual diff will show all the sections that have changed and their differences highlighted with red/green background colors. Then you can jump between each of these chunks by clinking on the up/down arrows. +.. figure:: /img/viz-diff-nav.gif + :width: 80% + + Navigating visual diff + + +Configuring Visual Diff +----------------------- + All the available configuration for the visual diff addon can be found under :guilabel:`Settings > Addons > Visual diff` in the :term:`dashboard`. +You can choose to disable/enable the `Visual diff` feature on an per-project basis. +Visual diff can also ignore files by specifying these files under `File tree diff`, regex supported. + +.. figure:: /img/viz-diff-configs.gif + :width: 80% + + Configurations Troubleshooting Visual diff @@ -36,6 +52,6 @@ so ensure you are on a page that has changed in the current pull request. There are also some known issues that currently don't display properly. We are working to improve the UX, but so far we've found the following issues: -* **Tables** are shown to have changes when they may not have changed. This is due to do subtly in how HTML tables are rendered, and will be fixed in a future version. +* **Tables** are shown to have changes when they may not have changed. This is due to subtle variations in how HTML tables are rendered, and will be fixed in a future version. * **Invisible changes** sometimes are marked as diff due than the underlying HTML changing, but there is no visual change. This could happen if the URL of a link changed, for example. * **Chunks background is incorrect** when we are unable to detect the correct main parent element for the chunk.