[IMP] tools: make arch diff viewer prettier

When investigating an issue on a customer database, the diff view modal
can be pretty useful. However it is not very good looking and therefore
poorly readable.

This PR improves the CSS styling of that modal so that it resemble more
the diff view of GitHub. This is done by:
- Increasing the width of the modal
- Aligning the text to the top of the table cell, that way there is no
text floating in the middle of two lines
- Lightly coloring the whole line when there is a change on it while the
actual change is on a darker background
- Putting in red all types of change on the left and in green on the
right (instead of mixing green, red and orange together)

This commit is improving the tool that was made at [`96d3fa4`](https://github.com/odoo/odoo/commit/96d3fa4e01bf8afc35dbf0b7301ce75c6bf3a5c7)

closes odoo/odoo#127765

X-original-commit: bf412f6920b10376a979c9f95c4508dedfec5d5f
Signed-off-by: Romain Derie (rde) <rde@odoo.com>

odoo/addons/base/models/ir_ui_view.py

@@ -2333,6 +2333,8 @@ class ResetViewArchWizard(models.TransientModel):
                 view.arch_diff = get_diff(
                     (view_arch, get_table_name(view.view_id) if view.reset_mode == 'other_view' else _("Current Arch")),
                     (diff_to, diff_to_name),
+                    custom_style=False,
+                    dark_color_scheme=request and request.httprequest.cookies.get('color_scheme') == 'dark',
                 )
                 view.has_diff = view_arch != diff_to
 

odoo/tools/misc.py

@@ -1669,16 +1669,17 @@ class DotDict(dict):
         return DotDict(val) if type(val) is dict else val
 
 
-def get_diff(data_from, data_to, custom_style=False):
+def get_diff(data_from, data_to, custom_style=False, dark_color_scheme=False):
     """
     Return, in an HTML table, the diff between two texts.
 
     :param tuple data_from: tuple(text, name), name will be used as table header
     :param tuple data_to: tuple(text, name), name will be used as table header
     :param tuple custom_style: string, style css including <style> tag.
+    :param bool dark_color_scheme: true if dark color scheme is used
     :return: a string containing the diff in an HTML table format.
     """
-    def handle_style(html_diff, custom_style):
+    def handle_style(html_diff, custom_style, dark_color_scheme):
         """ The HtmlDiff lib will add some useful classes on the DOM to
         identify elements. Simply append to those classes some BS4 ones.
         For the table to fit the modal width, some custom style is needed.
@@ -1686,21 +1687,33 @@ def get_diff(data_from, data_to, custom_style=False):
         to_append = {
             'diff_header': 'bg-600 text-center align-top px-2',
             'diff_next': 'd-none',
-            'diff_add': 'bg-success',
-            'diff_chg': 'bg-warning',
-            'diff_sub': 'bg-danger',
         }
         for old, new in to_append.items():
             html_diff = html_diff.replace(old, "%s %s" % (old, new))
         html_diff = html_diff.replace('nowrap', '')
+        colors = ('#7f2d2f', '#406a2d', '#51232f', '#3f483b') if dark_color_scheme else (
+            '#ffc1c0', '#abf2bc', '#ffebe9', '#e6ffec')
         html_diff += custom_style or '''
             <style>
-                table.diff { width: 100%; }
-                table.diff th.diff_header { width: 50%; }
+                .modal-dialog.modal-lg:has(table.diff) {
+                    max-width: 1600px;
+                    padding-left: 1.75rem;
+                    padding-right: 1.75rem;
+                }
+                table.diff { width: 100%%; }
+                table.diff th.diff_header { width: 50%%; }
                 table.diff td.diff_header { white-space: nowrap; }
-                table.diff td { word-break: break-all; }
+                table.diff td { word-break: break-all; vertical-align: top; }
+                table.diff .diff_chg, table.diff .diff_sub, table.diff .diff_add {
+                    display: inline-block;
+                    color: inherit;
+                }
+                table.diff .diff_sub, table.diff td:nth-child(3) > .diff_chg { background-color: %s }
+                table.diff .diff_add, table.diff td:nth-child(6) > .diff_chg { background-color: %s }
+                table.diff td:nth-child(3):has(>.diff_chg, .diff_sub) { background-color: %s }
+                table.diff td:nth-child(6):has(>.diff_chg, .diff_add) { background-color: %s }
             </style>
-        '''
+        ''' % colors
         return html_diff
 
     diff = HtmlDiff(tabsize=2).make_table(
@@ -1711,7 +1724,7 @@ def get_diff(data_from, data_to, custom_style=False):
         context=True,  # Show only diff lines, not all the code
         numlines=3,
     )
-    return handle_style(diff, custom_style)
+    return handle_style(diff, custom_style, dark_color_scheme)
 
 
 def hmac(env, scope, message, hash_function=hashlib.sha256):