[IMP] web: improve traceback reporting

* Do not assault the user with a full traceback on bug, but indicates
an error occured and allow him to toggle the traceback
* Automatically scroll the traceback to the end (better for python
errors)
* Propose the user to report the traceback by using a new "Copy"
button which correctly copies the full error + traceback

4 files changed, 80 insertions, 24 deletions

diff --git a/addons/web/static/src/js/abstract_web_client.js b/addons/web/static/src/js/abstract_web_client.js
index 115a58a654f..1d9c270b6c3 100644
--- a/addons/web/static/src/js/abstract_web_client.js
+++ b/addons/web/static/src/js/abstract_web_client.js
@@ -122,7 +122,7 @@ var WebClient = Widget.extend({
         window.onerror = function (message, file, line, col, error) {
             var traceback = error ? error.stack : '';
             crash_manager.show_error({
-                type: _t("Client Error"),
+                type: _t("Odoo Client Error"),
                 message: message,
                 data: {debug: file + ':' + line + "\n" + _t('Traceback:') + "\n" + traceback}
             });
diff --git a/addons/web/static/src/js/framework/crash_manager.js b/addons/web/static/src/js/framework/crash_manager.js
index df21e87047c..af982ecd15d 100644
--- a/addons/web/static/src/js/framework/crash_manager.js
+++ b/addons/web/static/src/js/framework/crash_manager.js
@@ -37,7 +37,7 @@ var CrashManager = core.Class.extend({
         if (this.connection_lost) {
             return;
         }
-        if (error.code == -32098) {
+        if (error.code === -32098) {
             core.bus.trigger('connection_lost');
             this.connection_lost = true;
             var timeinterval = setInterval(function() {
@@ -55,11 +55,11 @@ var CrashManager = core.Class.extend({
             return;
         }
         if (error.data.name === "openerp.http.SessionExpiredException" || error.data.name === "werkzeug.exceptions.Forbidden") {
-            this.show_warning({type: "Session Expired", data: { message: _t("Your Odoo session expired. Please refresh the current web page.") }});
+            this.show_warning({type: _t("Odoo Session Expired"), data: {message: _t("Your Odoo session expired. Please refresh the current web page.")}});
             return;
         }
         if (_.has(map_title, error.data.exception_type)) {
-            if(error.data.exception_type == 'except_orm'){
+            if(error.data.exception_type === 'except_orm'){
                 if(error.data.arguments[1]) {
                     error = _.extend({}, error,
                                 {
@@ -93,7 +93,7 @@ var CrashManager = core.Class.extend({
             }
 
             this.show_warning(error);
-        //InternalError    
+        //InternalError
 
         } else {
             this.show_error(error);
@@ -105,23 +105,53 @@ var CrashManager = core.Class.extend({
         }
         new Dialog(this, {
             size: 'medium',
-            title: "Odoo " + (_.str.capitalize(error.type) || _t("Warning")),
+            title: _.str.capitalize(error.type || error.message) || _t("Odoo Warning"),
             subtitle: error.data.title,
-            $content: $('<div>').html(QWeb.render('CrashManager.warning', {error: error}))
+            $content: $(QWeb.render('CrashManager.warning', {error: error}))
         }).open();
     },
     show_error: function(error) {
         if (!this.active) {
             return;
         }
-        new Dialog(this, {
-            title: "Odoo " + _.str.capitalize(error.type),
-            $content: QWeb.render('CrashManager.error', {error: error})
+        var dialog = new Dialog(this, {
+            title: _.str.capitalize(error.type || error.message) || _t("Odoo Error"),
+            $content: $(QWeb.render('CrashManager.error', {error: error}))
         }).open();
+
+        // When the dialog opens, initialize the copy feature and destroy it when the dialog is closed
+        var $clipboardBtn;
+        var clipboard;
+        dialog.opened(function () {
+            $clipboardBtn = dialog.$(".o_clipboard_button");
+            $clipboardBtn.tooltip({title: _t("Copied !"), trigger: "manual", placement: "left"});
+            clipboard = new window.Clipboard($clipboardBtn[0], {
+                text: function () {
+                    return (_t("Error") + ":\n" + error.message + "\n\n" + error.data.debug).trim();
+                }
+            });
+            clipboard.on("success", function (e) {
+                _.defer(function () {
+                    $clipboardBtn.tooltip("show");
+                    _.delay(function () {
+                        $clipboardBtn.tooltip("hide");
+                    }, 800);
+                });
+            });
+        });
+        dialog.on("closed", this, function () {
+            $clipboardBtn.tooltip("destroy");
+            clipboard.destroy();
+        });
+
+        // When the full traceback is shown, scroll it to the end (useful for better python error reporting)
+        dialog.$(".o_error_detail").on("shown.bs.collapse", function (e) {
+            e.target.scrollTop = e.target.scrollHeight;
+        });
     },
     show_message: function(exception) {
         this.show_error({
-            type: _t("Client Error"),
+            type: _t("Odoo Client Error"),
             message: exception,
             data: {debug: ""}
         });
@@ -162,7 +192,7 @@ var RedirectWarningHandler = Dialog.extend(ExceptionHandler, {
 
         new Dialog(this, {
             size: 'medium',
-            title: "Odoo " + (_.str.capitalize(error.type) || "Warning"),
+            title: _.str.capitalize(error.type) || _t("Odoo Warning"),
             buttons: [
                 {text: error.data.arguments[2], classes : "btn-primary", click: function() {
                     window.location.href = '#action='+error.data.arguments[1];
diff --git a/addons/web/static/src/less/modal.less b/addons/web/static/src/less/modal.less
index bca950796fc..2a0fbb1fa36 100644
--- a/addons/web/static/src/less/modal.less
+++ b/addons/web/static/src/less/modal.less
@@ -33,7 +33,7 @@
             text-align: left;
         }
     }
-    
+
 
     @media (min-width: @screen-sm-min) {
         .modal-dialog {
@@ -52,6 +52,23 @@
 
                 .modal-body {
                     overflow: auto;
+                    min-height: 0;
+
+                    &.o_dialog_error {
+                        overflow: visible;
+                        .o-flex-display();
+                        .o-flex-flow(column, nowrap);
+
+                        > .alert, > button {
+                            .o-flex(0, 0, auto);
+                        }
+
+                        > .o_error_detail {
+                            .o-flex(1, 1, auto);
+                            min-height: 0;
+                            overflow: auto;
+                        }
+                    }
                 }
             }
         }
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index b0bc4e76c4a..b732944f052 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -19,21 +19,30 @@
         <span class="o_icon fa fa-3x fa-exclamation"/>
     </t>
 </t>
-<t t-name="CrashManager.warning">
-    <div class="o_dialog_warning">
-        <t t-js="d">
-            var message = d.message ? 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 t-name="CrashManager.warning" class="o_dialog_warning">
+    <t t-js="d">
+        var message = d.message ? 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-sm btn-primary pull-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 t-name="CrashManager.error">
-    <div class="o_error_detail">
+
+    <t t-set="errUID" t-value="_.uniqueId()"/>
+    <button class="btn btn-sm 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">
         <pre><t t-esc="error.message"/></pre>
         <pre><t t-esc="error.data.debug"/></pre>
     </div>
-</t>
+</div>
 
 <form t-name="ChangePassword" name="change_password_form" method="POST">
     <div class="o_form_view">