[MERGE] website, *: handle all website errors with beautiful design

* web, base, website_forum, test_website, account, gamification,
iap, mail, partner_autocomplete, point_of_sale, stock,
website_sale_comparison

All rpc errors are now displayed using the notification system recently
updated for website. For the redirections triggering an error that are
currently displayed as a 500 Error with an ugly white page, the error
page will be similar to 404/403 error but with code 400. All
exception_orm are now handled as a 400 except for the AccessError
which is a 403.

The error card on all the Error pages is now loaded on an open state
displaying clearly the reason of the error without clicking anything.
If there is no error message the error card is not displayed and the
traceback is open. The traceback is only displayed if we are in debug
mode. These changes are also effective for the 500, 404 and 403 error
pages.

KarmaError is now an except_orm exception.
Karma error message now contains the required karma.
All the alerts in website_forum will use the toast notifications
instead of alerts.

A test tour is located in test_website, visit /test_error_view to
trigger some errors manually and look at the result.

task-1894820

closes odoo/odoo#32132

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

3 files changed, 28 insertions, 25 deletions

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 950f24c792c..d214e2e692e 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -120,30 +120,6 @@
     </ul>
 </t>
 
-<div t-name="CrashManager.warning" class="o_dialog_warning" role="alert">
-    <t t-js="d">
-        var message = (d.message !== undefined) ? d.message : d.error.data.message;
-        d.html_error = context.engine.tools.html_escape(message).replace(/\n/g, '<br/>');
-    </t>
-    <t t-raw="html_error"/>
-</div>
-<div t-name="CrashManager.error" class="o_dialog_error">
-    <div class="alert alert-warning clearfix" role="alert">
-        <button class="btn btn-primary float-right ml8 o_clipboard_button">
-            <i class="fa fa-clipboard mr8"/>Copy the full error to clipboard
-        </button>
-        <p><b>An error occurred</b></p>
-        <p>Please use the copy button to report the error to your support service.</p>
-    </div>
-
-    <t t-set="errUID" t-value="_.uniqueId()"/>
-    <button class="btn btn-link" t-att-data-target="'#o_error_detail' + errUID" data-toggle="collapse">See details</button>
-    <div t-att-id="'o_error_detail' + errUID" class="collapse alert alert-danger o_error_detail" role="alert">
-        <pre><t t-esc="error.message"/></pre>
-        <pre><t t-esc="error.data.debug"/></pre>
-    </div>
-</div>
-
 <form t-name="ChangePassword" name="change_password_form" method="POST" aria-atomic="true">
     <div class="o_form_view">
         <table class="o_group o_inner_group o_label_nowrap">
diff --git a/addons/web/static/src/xml/crash_manager.xml b/addons/web/static/src/xml/crash_manager.xml
new file mode 100644
index 00000000000..a6b506c0190
--- /dev/null
+++ b/addons/web/static/src/xml/crash_manager.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+<div t-name="CrashManager.warning" class="o_dialog_warning" role="alert">
+    <pre t-esc="widget.message"/>
+</div>
+
+<div t-name="CrashManager.error" class="o_dialog_error">
+    <div class="alert alert-warning clearfix" role="alert">
+        <button class="btn btn-primary float-right ml8 o_clipboard_button">
+            <i class="fa fa-clipboard mr8"/>Copy the full error to clipboard
+        </button>
+        <p><b>An error occurred</b></p>
+        <p>Please use the copy button to report the error to your support service.</p>
+    </div>
+
+    <t t-set="errUID" t-value="_.uniqueId()"/>
+    <button class="btn btn-link" t-att-data-target="'#o_error_detail' + errUID" data-toggle="collapse">See details</button>
+    <div t-att-id="'o_error_detail' + errUID" class="collapse alert alert-danger o_error_detail" role="alert">
+        <pre t-esc="widget.message"/>
+        <pre t-esc="widget.traceback"/>
+    </div>
+</div>
+
+</templates>
diff --git a/addons/web/static/src/xml/notification.xml b/addons/web/static/src/xml/notification.xml
index 3ffe9e8979a..592c3ee23b0 100644
--- a/addons/web/static/src/xml/notification.xml
+++ b/addons/web/static/src/xml/notification.xml
@@ -16,7 +16,9 @@
                 <span class="d-inline" aria-hidden="true">&amp;times;</span>
             </button>
         </div>
-        <div t-if="widget.message or widget.buttons.length" class="toast-body">
+        <div t-if="widget.message or widget.subtitle or widget.buttons.length" class="toast-body">
+            <strong t-if="widget.subtitle" t-raw="widget.subtitle"
+                 class="o_notification_subtitle"/>
             <div t-if="widget.message" t-raw="widget.message"
                  class="o_notification_content"/>
             <div t-if="widget.buttons.length" class="mt-2 o_notification_buttons">