[FIX] *: fix some side-effects of https://github.com/odoo/odoo/commit/9de1bc0eef6f5bfaa2a8d745431caa361ae91548

- JS Modals were not correctly built anymore, their .modal-body element
  was duplicated and many without-effect JS lines were introduced (as a
  side effect, the form view design was broken when inside modals)

- Tests were changed to make bugs go unnoticed. For example, the media
  dialog functionnality was entirely broken because the .modal-dialog
  element was not receiving the correct class anymore.

- The JS translation function is _t, not _

- Do not use the <title/> tag as a regular DOM element, it is meant to
  be unique, in the <head/> section

- CSS rules were added to the utils.scss file, which is meant to contain
  functions and mixins, otherwise, the rule is duplicated in every asset

- Some icons were still broken, as missed by https://github.com/odoo/odoo/commit/f90cf060a3cfeb37a67bec83264c0aaab8892b56

- Tests were changed to use [role="dialog"]/footer/header in their
  selectors without any reason, this commit restores some of that to
  avoid rebase conflicts with the BS4 work.

- ...

Note: other elements should still be discussed, like the direct use of
the 'o_form_label' class in views definition... but those do not cause
direct problems.

1 files changed, 14 insertions, 19 deletions

diff --git a/addons/web/static/src/js/core/dialog.js b/addons/web/static/src/js/core/dialog.js
index 6ebd94ef13e..075c7359a55 100644
--- a/addons/web/static/src/js/core/dialog.js
+++ b/addons/web/static/src/js/core/dialog.js
@@ -23,7 +23,7 @@ var Dialog = Widget.extend({
         focus_control_button: '_onFocusControlButton',
     }),
     events: _.extend({} , Widget.prototype.events, {
-        'keydown footer.modal-footer button':'_onFooterButtonKeyDown',
+        'keydown .modal-footer button':'_onFooterButtonKeyDown',
     }),
     /**
      * @param {Widget} parent
@@ -93,7 +93,7 @@ var Dialog = Widget.extend({
                     self.$modal.find('.modal-dialog').addClass('modal-sm');
                     break;
             }
-            self.$footer = self.$modal.find("footer");
+            self.$footer = self.$modal.find(".modal-footer");
             self.set_buttons(self.buttons);
             self.$modal.on('hidden.bs.modal', _.bind(self.destroy, self));
         });
@@ -103,6 +103,9 @@ var Dialog = Widget.extend({
      */
     renderElement: function () {
         this._super();
+        // Note: ideally, the $el which is created/set here should use the
+        // 'main' tag, we cannot enforce this as it would require to re-create
+        // the whole element.
         if (this.$content) {
             this.setElement(this.$content);
         }
@@ -169,15 +172,7 @@ var Dialog = Widget.extend({
 
         var self = this;
         this.appendTo($('<div/>')).then(function () {
-            var $main = self.$modal.find("main:first");
-            if ($main.length === 0) {
-                $main = self.$modal.find(".modal-body:first");
-            }
-            if (self.$el.tagName !== 'MAIN') {
-                self.$el.removeClass(".modal-body");
-                self.$el = $('<main class="modal-body"/>').append(self.$el);
-            }
-            $main.replaceWith(self.$el);
+            self.$modal.find(".modal-body").replaceWith(self.$el);
             self.$modal.attr('open', true);
             self.$modal.removeAttr("aria-hidden");
             self.$modal.modal('show');
@@ -212,13 +207,11 @@ var Dialog = Widget.extend({
         $('.tooltip').remove(); //remove open tooltip if any to prevent them staying when modal has disappeared
         if (this.$modal) {
             this.$modal.modal('hide');
-            this.$modal.removeAttr('open');
-            this.$modal.attr('aria-hidden', true);
             this.$modal.remove();
         }
 
         if (!isFocusSet) {
-            var modals = $('body > [role="dialog"]').filter(':visible');
+            var modals = $('body > .modal').filter(':visible');
             if (modals.length) {
                 modals.last().focus();
                 // Keep class modal-open (deleted by bootstrap hide fnct) on body to allow scrolling inside the modal
@@ -300,9 +293,10 @@ Dialog.alert = function (owner, message, options) {
     return new Dialog(owner, _.extend({
         size: 'medium',
         buttons: buttons,
-        $content: $('<main role="alert"/>').append($('<p>', {
+        $content: $('<main/>', {
+            role: 'alert',
             text: message,
-        })),
+        }),
         title: _t("Alert"),
     }, options)).open({shouldFocusButtons:true});
 };
@@ -325,9 +319,10 @@ Dialog.confirm = function (owner, message, options) {
     return new Dialog(owner, _.extend({
         size: 'medium',
         buttons: buttons,
-        $content: $('<main role="alert">').append($('<p>', {
+        $content: $('<main/>', {
+            role: 'alert',
             text: message,
-        })),
+        }),
         title: _t("Confirmation"),
     }, options)).open({shouldFocusButtons:true});
 };
@@ -358,7 +353,7 @@ Dialog.safeConfirm = function (owner, message, options) {
             text: message,
         });
     }
-    $content = $('<main role="alert"/>').append($content, $securityCheck);
+    $content = $('<main/>', {role: 'alert'}).append($content, $securityCheck);
 
     var buttons = [
         {