[IMP] web, *: replace the bootstrap backdrop element with a bg on modals

*: web_editor

Do not display the backdrop element added by bootstrap in the body and
add a background on the modal to keep the same effect. The bootstrap
backdrop was probably useful for compatibility with <IE9 but is no
longer needed. This also avoids z-index issues because modals could be
opened in an element (e.g. the website #wrapwrap) whose stacking context
is different of the body one (where the backdrop is opened). This would
make the backdrop appears on top of the modal.

Part of https://github.com/odoo/odoo/pull/49142
Related to task-2229551

Co-authored-by: qsm-odoo <qsm@odoo.com>

addons/web/static/src/js/core/owl_dialog.js

@@ -120,8 +120,12 @@ odoo.define('web.OwlDialog', function () {
 
         /**
          * @private
+         * @param {MouseEvent} ev
          */
-        _onBackdropClick() {
+        _onBackdropClick(ev) {
+            if (!this.props.backdrop || ev.target !== ev.currentTarget) {
+                return;
+            }
             if (this.props.backdrop === 'static') {
                 if (this.mainButton) {
                     this.mainButton.focus();

addons/web/static/src/scss/bootstrap_review.scss

@@ -80,6 +80,20 @@
     }
 }
 
+// Do not display the backdrop element added by bootstrap in the body and add a
+// background on the modal to keep the same effect. The bootstrap backdrop was
+// probably useful for compatibility with <IE9 but is no longer needed. This
+// also avoids z-index issues because modals could be opened in an element
+// (e.g. the website #wrapwrap) whose stacking context is different of the body
+// one (where the backdrop is opened). This would make the backdrop appears on
+// top of the modal.
+.modal-backdrop {
+    display: none;
+}
+.modal:not([data-backdrop="false"]) {
+    background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
+}
+
 // Restore pointer cursor which came with the 'btn' class until BS 4.3.1
 .btn:not(:disabled):not(.disabled) {
     cursor: pointer;

addons/web/static/src/scss/modal.scss

@@ -118,11 +118,6 @@
 
     > .modal {
         display: block;
-        pointer-events: none;
-    }
-
-    .modal-content {
-        pointer-events: auto;
     }
 }
 

addons/web/static/src/xml/base.xml

@@ -461,12 +461,13 @@
 <t t-name="web.OwlDialog" owl="1">
     <Portal target="'body'">
         <div class="o_dialog" t-on-focus="_onFocus" t-on-click="_onClick">
-            <div t-if="props.backdrop" class="modal-backdrop show" t-on-click="_onBackdropClick"/>
             <div role="dialog" class="modal"
                 tabindex="-1"
                 t-att-class="{ o_technical_modal: props.technical, o_modal_full: props.fullscreen }"
+                t-att-data-backdrop="'' + props.backdrop"
                 t-ref="modal"
                 t-on-close_dialog.stop="_close"
+                t-on-click="_onBackdropClick"
                 >
                 <div class="modal-dialog" t-att-class="size">
                     <div class="modal-content" t-att-class="props.contentClass">

addons/web/static/tests/core/owl_dialog_tests.js

@@ -14,7 +14,7 @@ odoo.define('web.owl_dialog_tests', function (require) {
         QUnit.module('OwlDialog');
 
         QUnit.test("Rendering of all props", async function (assert) {
-            assert.expect(33);
+            assert.expect(35);
 
             class SubComponent extends Component {
                 // Handlers
@@ -69,7 +69,6 @@ odoo.define('web.owl_dialog_tests', function (require) {
             }
 
             // Basic layout with default properties
-            assert.containsOnce(dialog, '.modal-backdrop.show');
             assert.containsOnce(dialog, '.modal.o_technical_modal');
             assert.hasClass(dialog.querySelector('.modal .modal-dialog'), 'modal-lg');
             assert.containsOnce(dialog, '.modal-header > button.close');
@@ -81,23 +80,26 @@ odoo.define('web.owl_dialog_tests', function (require) {
             // Static backdrop click should focus first button
             // => we need to reset that property
             dialog.querySelector('.btn-primary').blur(); // Remove the focus explicitely
-            assert.containsOnce(document.body, '.modal-backdrop');
-            await testUtils.dom.click(dialog.querySelector('.modal-backdrop'));
+            assert.containsNone(document.body, '.modal-backdrop'); // No backdrop *element* for Odoo modal...
+            assert.notEqual(window.getComputedStyle(dialog.querySelector('.modal')).backgroundColor, 'rgba(0, 0, 0, 0)'); // ... but a non transparent modal
+            await testUtils.dom.click(dialog.querySelector('.modal'));
             assert.strictEqual(document.activeElement, dialog.querySelector('.btn-primary'),
                 "Button should be focused when clicking on backdrop");
             assert.verifySteps([]); // Ensure not closed
             dialog.querySelector('.btn-primary').blur(); // Remove the focus explicitely
 
             await changeProps('backdrop', false);
-            assert.containsNone(document.body, '.modal-backdrop');
+            assert.containsNone(document.body, '.modal-backdrop'); // No backdrop *element* for Odoo modal...
+            assert.strictEqual(window.getComputedStyle(dialog.querySelector('.modal')).backgroundColor, 'rgba(0, 0, 0, 0)');
             await testUtils.dom.click(dialog.querySelector('.modal'));
             assert.notEqual(document.activeElement, dialog.querySelector('.btn-primary'),
                 "Button should not be focused when clicking on backdrop 'false'");
             assert.verifySteps([]); // Ensure not closed
 
             await changeProps('backdrop', true);
-            assert.containsOnce(document.body, '.modal-backdrop');
-            await testUtils.dom.click(dialog.querySelector('.modal-backdrop'));
+            assert.containsNone(document.body, '.modal-backdrop'); // No backdrop *element* for Odoo modal...
+            assert.notEqual(window.getComputedStyle(dialog.querySelector('.modal')).backgroundColor, 'rgba(0, 0, 0, 0)'); // ... but a non transparent modal
+            await testUtils.dom.click(dialog.querySelector('.modal'));
             assert.notEqual(document.activeElement, dialog.querySelector('.btn-primary'),
                 "Button should not be focused when clicking on backdrop 'true'");
             assert.verifySteps(['dialog_closed']);

addons/web_editor/static/src/scss/web_editor.variables.scss

@@ -193,7 +193,6 @@ $o-we-toolbar-height: 32px;
 }
 
 @mixin o-w-preserve-modals {
-    background: 0;
 
     .modal-content {
         border-radius: 0;