From 29f21a23f1ed90dcc0b62bf5652df78e59b6cb41 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Thu, 23 Jun 2022 22:47:05 +0200
Subject: [PATCH 01/88] [MOV] website, *: move static files to prepare website
 UI in backend

*: web_editor, web_unsplash, website_event, website_blog,
   website_event_meet, website_forum, website_links, website_livechat,
   website_sale_slides, website_slides

With [1], many files will move as the website UI is moved in the
backend. This commit moves all the static files (JS/CSS/XML) to their
final destination without modifying them, in an attempt to preserve
some history and ease some forward-ports.
After this commit, everything works as before as the files are simply
renamed and the references to them adapted.

However, technically, many files will actually be split into multiple
files by the work made with [1]. While it is theoretically possible to
preserve history over multiples files, this would require inner merge
commits, which does not go well with robodoo. In those cases, the "main"
file of the split was chosen. Mainly, 4 worth-noticing splits were
detected (and so the history moved only to the first file):

move: addons/web_editor/static/src/js/wysiwyg/widgets/media.js
to: addons/web_editor/static/src/components/media_dialog/file_selector.js
  - addons/web_editor/static/src/components/media_dialog/search_media.js
  - addons/web_editor/static/src/components/media_dialog/image_selector.js
  - addons/web_editor/static/src/components/media_dialog/document_selector.js
  - addons/web_editor/static/src/components/media_dialog/icon_selector.js
  - addons/web_editor/static/src/components/media_dialog/video_selector.js

move: addons/web_editor/static/src/js/wysiwyg/widgets/upload_progress_toast.js
to: addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js
  - addons/web_editor/static/src/components/upload_progress_toast/upload_service.js

move: addons/website/static/src/js/menu/content.js
to: addons/website/static/src/components/dialog/edit_menu.js
  - addons/website/static/src/components/dialog/page_properties.js
  - addons/website/static/src/components/wysiwyg_adapter/page_options.js
  - addons/website/static/src/js/website_page_list.js

move: addons/website/static/src/js/menu/edit.js
to: addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
  - addons/website/static/src/systray_items/edit_website.js
  - addons/website/static/src/components/editor/editor.js

Notice that as those moves were made post-work and the rest of the work
(80+ commits) rebased on top of it, some commits may remove more than
they should in a moved file to then reimplement some of what was
removed in a later commit... ideally this should have been avoided of
course but keep in mind that the final files are just entirely rewritten
and split as converted to OWL. It seemed however worth it to keep most
of the inner history of the work made here to see step by step what was
done. [1] will obviously be merged with a merge commit, binding the
whole work together.

[1]: https://github.com/odoo/odoo/pull/89223

task-2687506
---
 addons/web_editor/__manifest__.py             |  3 +++
 .../media_dialog/file_selector.js}            |  2 +-
 .../media_dialog}/media_dialog.js             |  0
 .../upload_progress_toast.js                  |  0
 addons/web_unsplash/__manifest__.py           |  4 ++--
 .../media_dialog/image_selector.js}           |  2 +-
 .../media_dialog/image_selector.xml}          |  0
 .../unsplash_service.js}                      |  0
 addons/website/__manifest__.py                | 24 +++++++++----------
 .../configurator/configurator.js              |  2 +-
 .../configurator}/configurator.scss           |  0
 .../configurator/configurator.xml             |  0
 .../ace_editor/ace_editor.js}                 |  0
 .../dialog/edit_menu.js}                      |  8 +++----
 .../dialog/edit_menu.xml}                     |  0
 .../dialog/page_properties.xml}               |  0
 .../src/{js/menu => components/dialog}/seo.js | 18 +++++++-------
 .../dialog/seo.xml}                           |  0
 .../fullscreen_indication.js                  |  0
 .../media_dialog/image_selector.js}           |  0
 .../translator}/translator.xml                |  0
 .../wysiwyg_adapter/wysiwyg_adapter.js}       |  0
 .../static/src/js/content/website_root.js     |  2 +-
 .../mobile_preview.js}                        |  0
 .../{js/menu => systray_items}/new_content.js |  0
 .../translate_website.js}                     |  2 +-
 addons/website_blog/__manifest__.py           |  2 +-
 .../new_content.js}                           |  0
 addons/website_event/__manifest__.py          |  4 ++--
 .../new_content.js}                           |  0
 .../options.js}                               |  0
 addons/website_event_meet/__manifest__.py     |  2 +-
 .../options.js}                               |  0
 addons/website_forum/__manifest__.py          |  2 +-
 .../new_content.js}                           |  0
 addons/website_links/__manifest__.py          |  2 +-
 .../navbar/navbar.js}                         |  0
 .../new_content.js}                           |  0
 .../src/js/website_sale_slides_editor.js      |  2 +-
 addons/website_slides/__manifest__.py         |  2 +-
 .../new_content.js}                           |  0
 41 files changed, 43 insertions(+), 40 deletions(-)
 rename addons/web_editor/static/src/{js/wysiwyg/widgets/media.js => components/media_dialog/file_selector.js} (99%)
 rename addons/web_editor/static/src/{js/wysiwyg/widgets => components/media_dialog}/media_dialog.js (100%)
 rename addons/web_editor/static/src/{js/wysiwyg/widgets => components/upload_progress_toast}/upload_progress_toast.js (100%)
 rename addons/web_unsplash/static/src/{js/unsplash_image_widget.js => components/media_dialog/image_selector.js} (99%)
 rename addons/web_unsplash/static/src/{xml/unsplash_image_widget.xml => components/media_dialog/image_selector.xml} (100%)
 rename addons/web_unsplash/static/src/{js/unsplashapi.js => services/unsplash_service.js} (100%)
 rename addons/website/static/src/{components => client_actions}/configurator/configurator.js (99%)
 rename addons/website/static/src/{scss => client_actions/configurator}/configurator.scss (100%)
 rename addons/website/static/src/{components => client_actions}/configurator/configurator.xml (100%)
 rename addons/website/static/src/{js/widgets/ace.js => components/ace_editor/ace_editor.js} (100%)
 rename addons/website/static/src/{js/menu/content.js => components/dialog/edit_menu.js} (99%)
 rename addons/website/static/src/{xml/website.contentMenu.xml => components/dialog/edit_menu.xml} (100%)
 rename addons/website/static/src/{xml/website.pageProperties.xml => components/dialog/page_properties.xml} (100%)
 rename addons/website/static/src/{js/menu => components/dialog}/seo.js (98%)
 rename addons/website/static/src/{xml/website.seo.xml => components/dialog/seo.xml} (100%)
 rename addons/website/static/src/{js/widgets => components/fullscreen_indication}/fullscreen_indication.js (100%)
 rename addons/website/static/src/{js/widgets/media.js => components/media_dialog/image_selector.js} (100%)
 rename addons/website/static/src/{xml => components/translator}/translator.xml (100%)
 rename addons/website/static/src/{js/menu/edit.js => components/wysiwyg_adapter/wysiwyg_adapter.js} (100%)
 rename addons/website/static/src/{js/menu/mobile_view.js => systray_items/mobile_preview.js} (100%)
 rename addons/website/static/src/{js/menu => systray_items}/new_content.js (100%)
 rename addons/website/static/src/{js/menu/translate.js => systray_items/translate_website.js} (99%)
 rename addons/website_blog/static/src/js/{website_blog.editor.js => systray_items/new_content.js} (100%)
 rename addons/website_event/static/src/js/{website_event.editor.js => systray_items/new_content.js} (100%)
 rename addons/website_event/static/src/{js/website_event_set_customize_options.js => snippets/options.js} (100%)
 rename addons/website_event_meet/static/src/js/{customize_options.js => snippets/options.js} (100%)
 rename addons/website_forum/static/src/js/{website_forum.editor.js => systray_items/new_content.js} (100%)
 rename addons/website_links/static/src/{js/website_links_menu.js => components/navbar/navbar.js} (100%)
 rename addons/website_livechat/static/src/js/{website_livechat.editor.js => systray_items/new_content.js} (100%)
 rename addons/website_slides/static/src/js/{website_slides.editor.js => systray_items/new_content.js} (100%)

diff --git a/addons/web_editor/__manifest__.py b/addons/web_editor/__manifest__.py
index 3a71ebdc627..1649e9fda5e 100644
--- a/addons/web_editor/__manifest__.py
+++ b/addons/web_editor/__manifest__.py
@@ -78,6 +78,9 @@ Odoo Web Editor widget.
 
             # widgets & plugins
             'web_editor/static/src/js/wysiwyg/widgets/**/*',
+            'web_editor/static/src/components/media_dialog/file_selector.js',
+            'web_editor/static/src/components/media_dialog/media_dialog.js',
+            'web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js',
             'web_editor/static/src/js/editor/snippets.editor.js',
             'web_editor/static/src/js/editor/toolbar.js',
             'web_editor/static/src/js/editor/snippets.options.js',
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js b/addons/web_editor/static/src/components/media_dialog/file_selector.js
similarity index 99%
rename from addons/web_editor/static/src/js/wysiwyg/widgets/media.js
rename to addons/web_editor/static/src/components/media_dialog/file_selector.js
index 3cac0191254..fd6470098ea 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
+++ b/addons/web_editor/static/src/components/media_dialog/file_selector.js
@@ -11,7 +11,7 @@ var Widget = require('web.Widget');
 var session = require('web.session');
 const {removeOnImageChangeAttrs} = require('web_editor.image_processing');
 const {getCSSVariableValue, DEFAULT_PALETTE} = require('web_editor.utils');
-const { UploadProgressToast } = require('@web_editor/js/wysiwyg/widgets/upload_progress_toast');
+const { UploadProgressToast } = require('@web_editor/components/upload_progress_toast/upload_progress_toast');
 
 var QWeb = core.qweb;
 var _t = core._t;
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
similarity index 100%
rename from addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js
rename to addons/web_editor/static/src/components/media_dialog/media_dialog.js
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/upload_progress_toast.js b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js
similarity index 100%
rename from addons/web_editor/static/src/js/wysiwyg/widgets/upload_progress_toast.js
rename to addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js
diff --git a/addons/web_unsplash/__manifest__.py b/addons/web_unsplash/__manifest__.py
index 30b9591fa5c..8fd5603f0e0 100644
--- a/addons/web_unsplash/__manifest__.py
+++ b/addons/web_unsplash/__manifest__.py
@@ -13,8 +13,8 @@
     'auto_install': True,
     'assets': {
         'web_editor.assets_wysiwyg': [
-            'web_unsplash/static/src/js/unsplashapi.js',
-            'web_unsplash/static/src/js/unsplash_image_widget.js',
+            'web_unsplash/static/src/services/unsplash_service.js',
+            'web_unsplash/static/src/components/media_dialog/image_selector.js',
         ],
         'web.assets_frontend': [
             'web_unsplash/static/src/js/unsplash_beacon.js',
diff --git a/addons/web_unsplash/static/src/js/unsplash_image_widget.js b/addons/web_unsplash/static/src/components/media_dialog/image_selector.js
similarity index 99%
rename from addons/web_unsplash/static/src/js/unsplash_image_widget.js
rename to addons/web_unsplash/static/src/components/media_dialog/image_selector.js
index d01d2d451e4..073def5314a 100644
--- a/addons/web_unsplash/static/src/js/unsplash_image_widget.js
+++ b/addons/web_unsplash/static/src/components/media_dialog/image_selector.js
@@ -22,7 +22,7 @@ delete originalEvents['click .o_existing_attachment_cell'];
 
 widgetsMedia.ImageWidget.include({
     xmlDependencies: widgetsMedia.ImageWidget.prototype.xmlDependencies.concat(
-        ['/web_unsplash/static/src/xml/unsplash_image_widget.xml']
+        ['/web_unsplash/static/src/components/media_dialog/image_selector.xml']
     ),
     events: _.extend({}, widgetsMedia.ImageWidget.prototype.events, {
         'click .o_unsplash_attachment_cell[data-imgid]': '_onUnsplashImgClick',
diff --git a/addons/web_unsplash/static/src/xml/unsplash_image_widget.xml b/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
similarity index 100%
rename from addons/web_unsplash/static/src/xml/unsplash_image_widget.xml
rename to addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
diff --git a/addons/web_unsplash/static/src/js/unsplashapi.js b/addons/web_unsplash/static/src/services/unsplash_service.js
similarity index 100%
rename from addons/web_unsplash/static/src/js/unsplashapi.js
rename to addons/web_unsplash/static/src/services/unsplash_service.js
diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index f512f404f5a..1a80ba97813 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -125,7 +125,7 @@
             'website/static/src/js/utils.js',
             'website/static/src/js/content/website_root.js',
             'website/static/src/js/widgets/dialog.js',
-            'website/static/src/js/widgets/fullscreen_indication.js',
+            'website/static/src/components/fullscreen_indication/fullscreen_indication.js',
             'website/static/src/js/content/compatibility.js',
             'website/static/src/js/content/menu.js',
             'website/static/src/js/content/snippets.animation.js',
@@ -212,7 +212,7 @@
             'website/static/src/snippets/s_process_steps/options.js',
             'website/static/src/js/editor/wysiwyg.js',
             'website/static/src/js/editor/widget_link.js',
-            'website/static/src/js/widgets/media.js',
+            'website/static/src/components/media_dialog/image_selector.js',
             'website/static/src/js/widgets/link_popover_widget.js',
         ],
         'website.assets_editor': [
@@ -222,24 +222,24 @@
             'website/static/src/scss/website.editor.ui.scss',
             'website/static/src/scss/website.theme_install.scss',
             'website/static/src/js/form_editor_registry.js',
-            'website/static/src/js/menu/content.js',
+            'website/static/src/components/dialog/edit_menu.js',
             'website/static/src/js/menu/customize.js',
             'website/static/src/js/menu/debug_menu.js',
-            'website/static/src/js/menu/edit.js',
-            'website/static/src/js/menu/mobile_view.js',
-            'website/static/src/js/menu/new_content.js',
-            'website/static/src/js/menu/seo.js',
-            'website/static/src/js/menu/translate.js',
+            'website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js',
+            'website/static/src/systray_items/mobile_preview.js',
+            'website/static/src/systray_items/new_content.js',
+            'website/static/src/components/dialog/seo.js',
+            'website/static/src/systray_items/translate_website.js',
             'website/static/src/js/set_view_track.js',
             'website/static/src/js/tours/homepage.js',
             'website/static/src/js/tours/tour_utils.js',
-            'website/static/src/js/widgets/ace.js',
+            'website/static/src/components/ace_editor/ace_editor.js',
         ],
         'web.assets_qweb': [
             'website/static/src/xml/website.backend.xml',
             'website/static/src/xml/website_widget.xml',
             'website/static/src/xml/theme_preview.xml',
-            'website/static/src/components/configurator/configurator.xml',
+            'website/static/src/client_actions/configurator/configurator.xml',
         ],
         'website.test_bundle': [
             '/web/static/lib/qweb/qweb2.js',
@@ -251,11 +251,11 @@
             'http://test.external.link/style2.css',
         ],
         'website.website_configurator_assets_js': [
-            '/website/static/src/components/configurator/configurator.js',
+            '/website/static/src/client_actions/configurator/configurator.js',
         ],
         'website.website_configurator_assets_scss': [
             ('include', 'web.assets_frontend'),
-            '/website/static/src/scss/configurator.scss',
+            '/website/static/src/client_actions/configurator/configurator.scss',
             '/website/static/src/scss/website.theme_install.scss',
             '/website/static/src/scss/website.wysiwyg.scss'
         ]
diff --git a/addons/website/static/src/components/configurator/configurator.js b/addons/website/static/src/client_actions/configurator/configurator.js
similarity index 99%
rename from addons/website/static/src/components/configurator/configurator.js
rename to addons/website/static/src/client_actions/configurator/configurator.js
index 6e128184ecd..20b18f0cb36 100644
--- a/addons/website/static/src/components/configurator/configurator.js
+++ b/addons/website/static/src/client_actions/configurator/configurator.js
@@ -746,7 +746,7 @@ async function setup() {
     if (!env.state.industries) {
         await skipConfigurator(env.services);
     } else {
-        const templates = await (await fetch('/website/static/src/components/configurator/configurator.xml')).text();
+        const templates = await (await fetch('/website/static/src/client_actions/configurator/configurator.xml')).text();
         const app = new App(Configurator, {
             env,
             dev: env.debug,
diff --git a/addons/website/static/src/scss/configurator.scss b/addons/website/static/src/client_actions/configurator/configurator.scss
similarity index 100%
rename from addons/website/static/src/scss/configurator.scss
rename to addons/website/static/src/client_actions/configurator/configurator.scss
diff --git a/addons/website/static/src/components/configurator/configurator.xml b/addons/website/static/src/client_actions/configurator/configurator.xml
similarity index 100%
rename from addons/website/static/src/components/configurator/configurator.xml
rename to addons/website/static/src/client_actions/configurator/configurator.xml
diff --git a/addons/website/static/src/js/widgets/ace.js b/addons/website/static/src/components/ace_editor/ace_editor.js
similarity index 100%
rename from addons/website/static/src/js/widgets/ace.js
rename to addons/website/static/src/components/ace_editor/ace_editor.js
diff --git a/addons/website/static/src/js/menu/content.js b/addons/website/static/src/components/dialog/edit_menu.js
similarity index 99%
rename from addons/website/static/src/js/menu/content.js
rename to addons/website/static/src/components/dialog/edit_menu.js
index 7c467f021b6..6cb7809f507 100644
--- a/addons/website/static/src/js/menu/content.js
+++ b/addons/website/static/src/components/dialog/edit_menu.js
@@ -17,7 +17,7 @@ var qweb = core.qweb;
 var PagePropertiesDialog = weWidgets.Dialog.extend({
     template: 'website.pagesMenu.page_info',
     xmlDependencies: weWidgets.Dialog.prototype.xmlDependencies.concat(
-        ['/website/static/src/xml/website.pageProperties.xml']
+        ['/website/static/src/components/dialog/page_properties.xml']
     ),
     events: _.extend({}, weWidgets.Dialog.prototype.events, {
         'keyup input#page_name': '_onNameChanged',
@@ -474,7 +474,7 @@ var MenuEntryDialog = weWidgets.LinkDialog.extend({
             isNewWindow: data.new_window,
         }, data || {}));
 
-        this.linkWidget.xmlDependencies = this.linkWidget.xmlDependencies.concat(['/website/static/src/xml/website.contentMenu.xml']);
+        this.linkWidget.xmlDependencies = this.linkWidget.xmlDependencies.concat(['/website/static/src/components/dialog/edit_menu.xml']);
 
         const oldSave = this.linkWidget.save;
         /**
@@ -521,7 +521,7 @@ var MenuEntryDialog = weWidgets.LinkDialog.extend({
 var SelectEditMenuDialog = weWidgets.Dialog.extend({
     template: 'website.contentMenu.dialog.select',
     xmlDependencies: weWidgets.Dialog.prototype.xmlDependencies.concat(
-        ['/website/static/src/xml/website.contentMenu.xml']
+        ['/website/static/src/components/dialog/edit_menu.xml']
     ),
 
     /**
@@ -552,7 +552,7 @@ var SelectEditMenuDialog = weWidgets.Dialog.extend({
 var EditMenuDialog = weWidgets.Dialog.extend({
     template: 'website.contentMenu.dialog.edit',
     xmlDependencies: weWidgets.Dialog.prototype.xmlDependencies.concat(
-        ['/website/static/src/xml/website.contentMenu.xml']
+        ['/website/static/src/components/dialog/edit_menu.xml']
     ),
     events: _.extend({}, weWidgets.Dialog.prototype.events, {
         'click a.js_add_menu': '_onAddMenuButtonClick',
diff --git a/addons/website/static/src/xml/website.contentMenu.xml b/addons/website/static/src/components/dialog/edit_menu.xml
similarity index 100%
rename from addons/website/static/src/xml/website.contentMenu.xml
rename to addons/website/static/src/components/dialog/edit_menu.xml
diff --git a/addons/website/static/src/xml/website.pageProperties.xml b/addons/website/static/src/components/dialog/page_properties.xml
similarity index 100%
rename from addons/website/static/src/xml/website.pageProperties.xml
rename to addons/website/static/src/components/dialog/page_properties.xml
diff --git a/addons/website/static/src/js/menu/seo.js b/addons/website/static/src/components/dialog/seo.js
similarity index 98%
rename from addons/website/static/src/js/menu/seo.js
rename to addons/website/static/src/components/dialog/seo.js
index 54cc4b926be..143ca221014 100644
--- a/addons/website/static/src/js/menu/seo.js
+++ b/addons/website/static/src/components/dialog/seo.js
@@ -21,7 +21,7 @@ var WORD_SEPARATORS_REGEX = '([\\u2000-\\u206F\\u2E00-\\u2E7F\'!"#\\$%&\\(\\)\\*
 
 var Suggestion = Widget.extend({
     template: 'website.seo_suggestion',
-    xmlDependencies: ['/website/static/src/xml/website.seo.xml'],
+    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
     events: {
         'click .o_seo_suggestion': 'select',
     },
@@ -37,7 +37,7 @@ var Suggestion = Widget.extend({
 
 var SuggestionList = Widget.extend({
     template: 'website.seo_suggestion_list',
-    xmlDependencies: ['/website/static/src/xml/website.seo.xml'],
+    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
 
     init: function (parent, options) {
         this.root = options.root;
@@ -93,7 +93,7 @@ var SuggestionList = Widget.extend({
 
 var Keyword = Widget.extend({
     template: 'website.seo_keyword',
-    xmlDependencies: ['/website/static/src/xml/website.seo.xml'],
+    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
     events: {
         'click a[data-action=remove-keyword]': 'destroy',
     },
@@ -149,7 +149,7 @@ var Keyword = Widget.extend({
 
 var KeywordList = Widget.extend({
     template: 'website.seo_list',
-    xmlDependencies: ['/website/static/src/xml/website.seo.xml'],
+    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
     maxKeywords: 10,
 
     init: function (parent, options) {
@@ -206,7 +206,7 @@ var KeywordList = Widget.extend({
 
 var Preview = Widget.extend({
     template: 'website.seo_preview',
-    xmlDependencies: ['/website/static/src/xml/website.seo.xml'],
+    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
 
     init: function (parent, options) {
         this.title = options.title;
@@ -318,7 +318,7 @@ var MetaTitleDescription = Widget.extend({
     // Basically we don't want the too small alert when the field is empty and
     // we start typing on it.
     template: 'website.seo_meta_title_description',
-    xmlDependencies: ['/website/static/src/xml/website.seo.xml'],
+    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
     events: {
         'input input[name=website_meta_title]': '_titleChanged',
         'input input[name=website_seo_name]': '_seoNameChanged',
@@ -485,7 +485,7 @@ var MetaTitleDescription = Widget.extend({
 var MetaKeywords = Widget.extend({
     // Form and table for SEO meta keywords
     template: 'website.seo_meta_keywords',
-    xmlDependencies: ['/website/static/src/xml/website.seo.xml'],
+    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
     events: {
         'keyup input[name=website_meta_keywords]': '_confirmKeyword',
         'click button[data-action=add]': '_addKeyword',
@@ -569,7 +569,7 @@ var MetaKeywords = Widget.extend({
 
 var MetaImageSelector = Widget.extend({
     template: 'website.seo_meta_image_selector',
-    xmlDependencies: ['/website/static/src/xml/website.seo.xml'],
+    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
     events: {
         'click .o_meta_img_upload': '_onClickUploadImg',
         'click .o_meta_img': '_onClickSelectImg',
@@ -670,7 +670,7 @@ var MetaImageSelector = Widget.extend({
 var SeoConfigurator = Dialog.extend({
     template: 'website.seo_configuration',
     xmlDependencies: Dialog.prototype.xmlDependencies.concat(
-        ['/website/static/src/xml/website.seo.xml']
+        ['/website/static/src/components/dialog/seo.xml']
     ),
     canEditTitle: false,
     canEditDescription: false,
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/components/dialog/seo.xml
similarity index 100%
rename from addons/website/static/src/xml/website.seo.xml
rename to addons/website/static/src/components/dialog/seo.xml
diff --git a/addons/website/static/src/js/widgets/fullscreen_indication.js b/addons/website/static/src/components/fullscreen_indication/fullscreen_indication.js
similarity index 100%
rename from addons/website/static/src/js/widgets/fullscreen_indication.js
rename to addons/website/static/src/components/fullscreen_indication/fullscreen_indication.js
diff --git a/addons/website/static/src/js/widgets/media.js b/addons/website/static/src/components/media_dialog/image_selector.js
similarity index 100%
rename from addons/website/static/src/js/widgets/media.js
rename to addons/website/static/src/components/media_dialog/image_selector.js
diff --git a/addons/website/static/src/xml/translator.xml b/addons/website/static/src/components/translator/translator.xml
similarity index 100%
rename from addons/website/static/src/xml/translator.xml
rename to addons/website/static/src/components/translator/translator.xml
diff --git a/addons/website/static/src/js/menu/edit.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
similarity index 100%
rename from addons/website/static/src/js/menu/edit.js
rename to addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
diff --git a/addons/website/static/src/js/content/website_root.js b/addons/website/static/src/js/content/website_root.js
index 44edaa02ac3..0f90fcfb87e 100644
--- a/addons/website/static/src/js/content/website_root.js
+++ b/addons/website/static/src/js/content/website_root.js
@@ -7,7 +7,7 @@ import {Markup} from 'web.utils';
 import session from 'web.session';
 import publicRootData from 'web.public.root';
 import "web.zoomodoo";
-import { FullscreenIndication } from '@website/js/widgets/fullscreen_indication';
+import { FullscreenIndication } from '@website/components/fullscreen_indication/fullscreen_indication';
 
 export const WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMixin, {
     // TODO remove KeyboardNavigationMixin in master
diff --git a/addons/website/static/src/js/menu/mobile_view.js b/addons/website/static/src/systray_items/mobile_preview.js
similarity index 100%
rename from addons/website/static/src/js/menu/mobile_view.js
rename to addons/website/static/src/systray_items/mobile_preview.js
diff --git a/addons/website/static/src/js/menu/new_content.js b/addons/website/static/src/systray_items/new_content.js
similarity index 100%
rename from addons/website/static/src/js/menu/new_content.js
rename to addons/website/static/src/systray_items/new_content.js
diff --git a/addons/website/static/src/js/menu/translate.js b/addons/website/static/src/systray_items/translate_website.js
similarity index 99%
rename from addons/website/static/src/js/menu/translate.js
rename to addons/website/static/src/systray_items/translate_website.js
index dd12fa2914b..cca36d65cec 100644
--- a/addons/website/static/src/js/menu/translate.js
+++ b/addons/website/static/src/systray_items/translate_website.js
@@ -18,7 +18,7 @@ var localStorageNoDialogKey = 'website_translator_nodialog';
 var TranslatorInfoDialog = Dialog.extend({
     template: 'website.TranslatorInfoDialog',
     xmlDependencies: Dialog.prototype.xmlDependencies.concat(
-        ['/website/static/src/xml/translator.xml']
+        ['/website/static/src/components/translator/translator.xml']
     ),
 
     /**
diff --git a/addons/website_blog/__manifest__.py b/addons/website_blog/__manifest__.py
index 61d3dba049f..3db7e32d2a3 100644
--- a/addons/website_blog/__manifest__.py
+++ b/addons/website_blog/__manifest__.py
@@ -35,7 +35,7 @@
             'website_blog/static/src/snippets/s_blog_posts/options.js',
         ],
         'website.assets_editor': [
-            'website_blog/static/src/js/website_blog.editor.js',
+            'website_blog/static/src/js/systray_items/new_content.js',
             'website_blog/static/src/js/tours/website_blog.js',
         ],
         'web.assets_frontend': [
diff --git a/addons/website_blog/static/src/js/website_blog.editor.js b/addons/website_blog/static/src/js/systray_items/new_content.js
similarity index 100%
rename from addons/website_blog/static/src/js/website_blog.editor.js
rename to addons/website_blog/static/src/js/systray_items/new_content.js
diff --git a/addons/website_event/__manifest__.py b/addons/website_event/__manifest__.py
index be764f0b36a..8a6650cddda 100644
--- a/addons/website_event/__manifest__.py
+++ b/addons/website_event/__manifest__.py
@@ -58,10 +58,10 @@
             'website_event/static/src/js/register_toaster_widget.js',
             'website_event/static/src/js/website_event.js',
             'website_event/static/src/js/website_event_ticket_details.js',
-            'website_event/static/src/js/website_event_set_customize_options.js',
+            'website_event/static/src/snippets/options.js',
         ],
         'website.assets_editor': [
-            'website_event/static/src/js/website_event.editor.js',
+            'website_event/static/src/js/systray_items/new_content.js',
         ],
         'website.assets_wysiwyg': [
             '/website_event/static/src/snippets/s_events/options.js',
diff --git a/addons/website_event/static/src/js/website_event.editor.js b/addons/website_event/static/src/js/systray_items/new_content.js
similarity index 100%
rename from addons/website_event/static/src/js/website_event.editor.js
rename to addons/website_event/static/src/js/systray_items/new_content.js
diff --git a/addons/website_event/static/src/js/website_event_set_customize_options.js b/addons/website_event/static/src/snippets/options.js
similarity index 100%
rename from addons/website_event/static/src/js/website_event_set_customize_options.js
rename to addons/website_event/static/src/snippets/options.js
diff --git a/addons/website_event_meet/__manifest__.py b/addons/website_event_meet/__manifest__.py
index eab525fb7f4..7e0c6758dee 100644
--- a/addons/website_event_meet/__manifest__.py
+++ b/addons/website_event_meet/__manifest__.py
@@ -26,7 +26,7 @@
     'assets': {
         'web.assets_frontend': [
             'website_event_meet/static/src/scss/event_meet_templates.scss',
-            'website_event_meet/static/src/js/customize_options.js',
+            'website_event_meet/static/src/js/snippets/options.js',
             'website_event_meet/static/src/js/website_event_meeting_room.js',
             'website_event_meet/static/src/js/website_event_create_meeting_room_button.js',
         ],
diff --git a/addons/website_event_meet/static/src/js/customize_options.js b/addons/website_event_meet/static/src/js/snippets/options.js
similarity index 100%
rename from addons/website_event_meet/static/src/js/customize_options.js
rename to addons/website_event_meet/static/src/js/snippets/options.js
diff --git a/addons/website_forum/__manifest__.py b/addons/website_forum/__manifest__.py
index 04d0eed46bb..2ece59da5de 100644
--- a/addons/website_forum/__manifest__.py
+++ b/addons/website_forum/__manifest__.py
@@ -42,7 +42,7 @@ Ask questions, get answers, no distractions
     'assets': {
         'website.assets_editor': [
             'website_forum/static/src/js/tours/website_forum.js',
-            'website_forum/static/src/js/website_forum.editor.js',
+            'website_forum/static/src/js/systray_items/new_content.js',
         ],
         'web.assets_tests': [
             'website_forum/static/tests/**/*',
diff --git a/addons/website_forum/static/src/js/website_forum.editor.js b/addons/website_forum/static/src/js/systray_items/new_content.js
similarity index 100%
rename from addons/website_forum/static/src/js/website_forum.editor.js
rename to addons/website_forum/static/src/js/systray_items/new_content.js
diff --git a/addons/website_links/__manifest__.py b/addons/website_links/__manifest__.py
index 85f45be47f4..2af6b989591 100644
--- a/addons/website_links/__manifest__.py
+++ b/addons/website_links/__manifest__.py
@@ -26,7 +26,7 @@ Those trackers can be used in Google Analytics to track clicks and visitors, or
             'website_links/static/tests/**/*',
         ],
         'website.assets_editor': [
-            'website_links/static/src/js/website_links_menu.js',
+            'website_links/static/src/components/navbar/navbar.js',
         ],
         'web.assets_qweb': [
             'website_links/static/src/xml/*.xml',
diff --git a/addons/website_links/static/src/js/website_links_menu.js b/addons/website_links/static/src/components/navbar/navbar.js
similarity index 100%
rename from addons/website_links/static/src/js/website_links_menu.js
rename to addons/website_links/static/src/components/navbar/navbar.js
diff --git a/addons/website_livechat/static/src/js/website_livechat.editor.js b/addons/website_livechat/static/src/js/systray_items/new_content.js
similarity index 100%
rename from addons/website_livechat/static/src/js/website_livechat.editor.js
rename to addons/website_livechat/static/src/js/systray_items/new_content.js
diff --git a/addons/website_sale_slides/static/src/js/website_sale_slides_editor.js b/addons/website_sale_slides/static/src/js/website_sale_slides_editor.js
index 349ca3793c4..cd206976c5d 100644
--- a/addons/website_sale_slides/static/src/js/website_sale_slides_editor.js
+++ b/addons/website_sale_slides/static/src/js/website_sale_slides_editor.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import {ChannelCreateDialog} from '@website_slides/js/website_slides.editor';
+import {ChannelCreateDialog} from '@website_slides/js/systray_items/new_content';
 
 ChannelCreateDialog.include({
     xmlDependencies: ChannelCreateDialog.prototype.xmlDependencies.concat(
diff --git a/addons/website_slides/__manifest__.py b/addons/website_slides/__manifest__.py
index 6e31959a126..abda6179c1b 100644
--- a/addons/website_slides/__manifest__.py
+++ b/addons/website_slides/__manifest__.py
@@ -100,7 +100,7 @@ Featuring
             'website_slides/static/tests/tours/*.js',
         ],
         'website.assets_editor': [
-            'website_slides/static/src/js/website_slides.editor.js',
+            'website_slides/static/src/js/systray_items/new_content.js',
         ],
         'website_slides.slide_embed_assets': [
             ('include', 'web._assets_helpers'),
diff --git a/addons/website_slides/static/src/js/website_slides.editor.js b/addons/website_slides/static/src/js/systray_items/new_content.js
similarity index 100%
rename from addons/website_slides/static/src/js/website_slides.editor.js
rename to addons/website_slides/static/src/js/systray_items/new_content.js

From a9a0107f7c024835f9b543f58efd3b0fd40e2a0c Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Wed, 22 Dec 2021 18:19:05 +0100
Subject: [PATCH 02/88] [IMP] website, *: reorganize website menus

*: website_blog, website_forum, website_mail_group, website_sale,
website_sale_comparison

task-2687506
---
 .../static/tests/tours/dashboard_tour.js      |  2 +-
 .../views/res_config_settings_views.xml       |  7 ----
 addons/website/views/website_views.xml        | 26 ++++++++++---
 .../website/views/website_visitor_views.xml   | 15 +++----
 .../website_blog/views/website_blog_views.xml | 20 +++++-----
 addons/website_forum/views/forum.xml          | 26 +++++--------
 .../views/website_mail_group_menus.xml        | 10 ++---
 addons/website_sale/views/base_unit_view.xml  |  2 +-
 .../website_sale/views/sale_order_views.xml   | 39 ++++++++-----------
 .../views/website_sale_comparison_view.xml    |  2 +-
 10 files changed, 70 insertions(+), 79 deletions(-)

diff --git a/addons/website/static/tests/tours/dashboard_tour.js b/addons/website/static/tests/tours/dashboard_tour.js
index 343e90bf846..f883c3121ce 100644
--- a/addons/website/static/tests/tours/dashboard_tour.js
+++ b/addons/website/static/tests/tours/dashboard_tour.js
@@ -15,7 +15,7 @@ odoo.define("website.tour.backend_dashboard", function (require) {
         trigger: '.o_app[data-menu-xmlid="website.menu_website_configuration"]',
       },
       {
-        trigger: 'button[data-menu-xmlid="website.menu_dashboard"]',
+        trigger: 'button[data-menu-xmlid="website.menu_reporting"]',
       },
       {
         trigger: '.dropdown-item[data-menu-xmlid="website.menu_website_google_analytics"]',
diff --git a/addons/website/views/res_config_settings_views.xml b/addons/website/views/res_config_settings_views.xml
index 3e946198e4d..d23b908895c 100644
--- a/addons/website/views/res_config_settings_views.xml
+++ b/addons/website/views/res_config_settings_views.xml
@@ -357,13 +357,6 @@
         sequence="10"
         />
 
-    <menuitem name="Pages"
-        id="menu_website_pages_list"
-        action="action_website_pages_list"
-        parent="menu_website_global_configuration"
-        sequence="30"
-        />
-
     <menuitem name="Menus"
         id="menu_website_menu_list"
         action="action_website_menu"
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index 61fe598156f..672f4321233 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -530,17 +530,33 @@
             sequence="1"
             parent="website.menu_website_configuration"/>
 
+        <menuitem id="menu_reporting"
+            name="Reporting"
+            sequence="99"
+            parent="website.menu_website_configuration"/>
+
         <!-- Force empty action, to ease upgrade -->
         <record id="menu_dashboard" model="ir.ui.menu">
             <field name="action" eval="False"/>
         </record>
 
-        <menuitem id="menu_website_dashboard" parent="menu_dashboard"
-            sequence="10" name="eCommerce Dashboard"
-            action="website.ir_actions_server_website_dashboard" active="0"/>
+        <menuitem id="menu_website_pages_list"
+            parent="menu_site"
+            sequence="20"
+            name="Pages"
+            action="action_website_pages_list"/>
 
-        <menuitem id="menu_website_google_analytics" parent="menu_dashboard"
-            sequence="20" name="Analytics"
+        <menuitem id="menu_website_dashboard"
+            name="eCommerce"
+            sequence="1"
+            parent="menu_reporting"
+            action="website.ir_actions_server_website_dashboard"
+            active="0"/>
+
+        <menuitem id="menu_website_google_analytics"
+            name="Analytics"
+            sequence="20"
+            parent="menu_reporting"
             action="website.ir_actions_server_website_google_analytics"/>
 
         <!-- Configurator actions -->
diff --git a/addons/website/views/website_visitor_views.xml b/addons/website/views/website_visitor_views.xml
index 8e25e83bdc9..b0be3555b11 100644
--- a/addons/website/views/website_visitor_views.xml
+++ b/addons/website/views/website_visitor_views.xml
@@ -348,17 +348,12 @@
         </field>
     </record>
 
-    <menuitem id="website_visitor_menu"
-        name="Visitors"
-        sequence="80"
-        parent="website.menu_website_configuration"/>
-
-    <menuitem id="menu_visitor_sub_menu" name="Visitors"
-        sequence="1"
-        parent="website_visitor_menu"
+    <menuitem id="website_visitor_menu" name="Visitors"
+        sequence="5"
+        parent="website.menu_reporting"
         action="website.website_visitors_action"/>
     <menuitem id="menu_visitor_view_menu" name="Page Views"
-        sequence="2"
-        parent="website_visitor_menu"
+        sequence="40"
+        parent="website.menu_reporting"
         action="website.website_visitor_view_action"/>
 </data></odoo>
diff --git a/addons/website_blog/views/website_blog_views.xml b/addons/website_blog/views/website_blog_views.xml
index 56f88f48e34..dad9a3cf929 100644
--- a/addons/website_blog/views/website_blog_views.xml
+++ b/addons/website_blog/views/website_blog_views.xml
@@ -252,23 +252,23 @@
             <field name="view_id" ref="blog_tag_category_tree"/>
         </record>
 
-        <menuitem name="Blogs"
-            id="menu_website_blog_root"
-            sequence="20"
-            parent="website.menu_website_configuration"
-            groups="website.group_website_designer"
-            action="action_blog_post"/>
-
         <menuitem name="Blogs"
             id="menu_website_blog_root_global"
             sequence="100"
             parent="website.menu_website_global_configuration"
             groups="website.group_website_designer"/>
 
-        <menuitem id="menu_website_blog_tag_category_global" parent="menu_website_blog_root_global"
-                  name="Tag Categories" action="action_tag_category" sequence="50" />
+        <menuitem id="menu_blog_global" parent="menu_website_blog_root_global" name="Blogs" action="action_blog_blog" sequence="20"/>
+
+        <menuitem name="Blog Post"
+            id="menu_website_blog_post"
+            sequence="30"
+            parent="menu_website_blog_root_global"
+            groups="website.group_website_designer"
+            action="action_blog_post"/>
 
         <menuitem id="menu_blog_tag_global" parent="menu_website_blog_root_global" name="Tags" action="action_tags" sequence="40" />
 
-        <menuitem id="menu_blog_global" parent="menu_website_blog_root_global" name="Blogs" action="action_blog_blog" sequence="20"/>
+        <menuitem id="menu_website_blog_tag_category_global" parent="menu_website_blog_root_global"
+                  name="Tag Categories" action="action_tag_category" sequence="50" />
 </odoo>
diff --git a/addons/website_forum/views/forum.xml b/addons/website_forum/views/forum.xml
index 946e36f216f..c4b2dfbd4de 100644
--- a/addons/website_forum/views/forum.xml
+++ b/addons/website_forum/views/forum.xml
@@ -16,13 +16,6 @@
             <field name="domain">[('forum_id', '=', active_id), ('parent_id', '=', False), ('state', 'in', ('active', 'close'))]</field>
         </record>
 
-        <!-- MAIN FORUM MENU -->
-        <menuitem name="Forum" id="menu_website_forum"
-            parent="website.menu_website_configuration" sequence="50" groups="website.group_website_designer"/>
-
-        <menuitem name="Forum" id="menu_website_forum_global"
-            parent="website.menu_website_global_configuration" sequence="170" groups="website.group_website_designer"/>
-
         <!-- FORUM VIEWS -->
         <record id="view_forum_forum_list" model="ir.ui.view">
             <field name="name">forum.forum.list</field>
@@ -176,8 +169,6 @@
             <field name="view_mode">tree,form</field>
         </record>
 
-        <menuitem id="menu_forum_global" parent="menu_website_forum_global" name="Forums" action="action_forum_forum" sequence="10"/>
-
         <!-- POST VIEWS -->
         <record id="view_forum_post_list" model="ir.ui.view">
             <field name="name">forum.post.list</field>
@@ -316,8 +307,6 @@
             </field>
         </record>
 
-        <menuitem id="menu_forum_posts" parent="menu_website_forum" name="Posts" action="action_forum_post" sequence="20"/>
-
         <!-- TAG VIEWS -->
         <record id="forum_tag_view_list" model="ir.ui.view">
             <field name="name">forum.tag.list</field>
@@ -360,8 +349,6 @@
             </field>
         </record>
 
-        <menuitem id="menu_forum_tag_global" parent="menu_website_forum_global" name="Tags" action="forum_tag_action" sequence="30"/>
-
         <!-- POST REASON VIEWS -->
         <record id="forum_post_reason_view_list" model="ir.ui.view">
             <field name="name">forum.post.reason.list</field>
@@ -381,8 +368,15 @@
         </record>
 
 
-        <menuitem id="menu_forum_rank_global" parent="menu_website_forum_global" name="Ranks" action="gamification.gamification_karma_ranks_action" sequence="5"/>
-        <menuitem id="menu_forum_badges" parent="menu_website_forum_global" name="Badges" action="gamification.badge_list_action" sequence="40"/>
-        <menuitem id="menu_forum_post_reasons" parent="menu_website_forum_global" name="Close Reasons" action="forum_post_reasons_action" sequence="50"/>
+        <!-- FORUM MENUS -->
+        <menuitem name="Forum" id="menu_website_forum_global"
+            parent="website.menu_website_global_configuration" sequence="170" groups="website.group_website_designer"/>
+
+        <menuitem id="menu_forum_global" parent="menu_website_forum_global" name="Forums" action="action_forum_forum" sequence="10"/>
+        <menuitem id="menu_forum_posts" parent="menu_website_forum_global" name="Forum Post" action="action_forum_post" sequence="20"/>
+        <menuitem id="menu_forum_rank_global" parent="menu_website_forum_global" name="Ranks" action="gamification.gamification_karma_ranks_action" sequence="30"/>
+        <menuitem id="menu_forum_tag_global" parent="menu_website_forum_global" name="Tags" action="forum_tag_action" sequence="40"/>
+        <menuitem id="menu_forum_badges" parent="menu_website_forum_global" name="Badges" action="gamification.badge_list_action" sequence="50"/>
+        <menuitem id="menu_forum_post_reasons" parent="menu_website_forum_global" name="Close Reasons" action="forum_post_reasons_action" sequence="60"/>
     </data>
 </odoo>
diff --git a/addons/website_mail_group/views/website_mail_group_menus.xml b/addons/website_mail_group/views/website_mail_group_menus.xml
index de8cb84a82d..e6de0cc504b 100644
--- a/addons/website_mail_group/views/website_mail_group_menus.xml
+++ b/addons/website_mail_group/views/website_mail_group_menus.xml
@@ -1,16 +1,16 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <menuitem name="Groups"
+    <menuitem name="Mailing Lists"
         id="mail_group_menu_website_root"
-        sequence="99"
-        parent="website.menu_website_configuration"/>
+        sequence="200"
+        parent="website.menu_website_global_configuration"/>
     <menuitem id="mail_group_menu_website"
-        name="Mailing List Groups"
+        name="Mailing Lists"
         action="mail_group.mail_group_action"
         parent="website_mail_group.mail_group_menu_website_root"
         sequence="50"/>
     <menuitem id="mail_group_moderation_menu_website"
-        name="List Moderation Rulings"
+        name="Moderation Rules"
         action="mail_group.mail_group_moderation_action"
         parent="website_mail_group.mail_group_menu_website_root"
         groups="mail_group.group_mail_group_manager"
diff --git a/addons/website_sale/views/base_unit_view.xml b/addons/website_sale/views/base_unit_view.xml
index 1999c18428e..b0b0ca8fad8 100644
--- a/addons/website_sale/views/base_unit_view.xml
+++ b/addons/website_sale/views/base_unit_view.xml
@@ -7,6 +7,6 @@
     </record>
 
     <menuitem name="Base Units" id="website_base_unit_menu" action="base_unit_action"
-              parent="website_sale.menu_product_settings" sequence="5" groups="website_sale.group_show_uom_price"/>
+              parent="website_sale.menu_catalog" sequence="5" groups="website_sale.group_show_uom_price"/>
 
 </odoo>
diff --git a/addons/website_sale/views/sale_order_views.xml b/addons/website_sale/views/sale_order_views.xml
index 4d7795b2b91..721129b565b 100644
--- a/addons/website_sale/views/sale_order_views.xml
+++ b/addons/website_sale/views/sale_order_views.xml
@@ -4,7 +4,7 @@
         <field name="name">sale.order.ecommerce.search.view</field>
         <field name="model">sale.order</field>
         <field name="inherit_id" ref="sale.view_sales_order_filter"/>
-        <field name="mode">primary</field> 
+        <field name="mode">primary</field>
         <field name="arch" type="xml">
             <xpath expr="//filter[@name='my_sale_orders_filter']" position="before">
                 <filter string="Confirmed" name="order_confirmed" domain="[('state', 'in', ('sale', 'done'))]"/>
@@ -27,7 +27,7 @@
         <field name="name">sale.order.ecommerce.search.unpaid.view</field>
         <field name="model">sale.order</field>
         <field name="inherit_id" ref="sale.view_sales_order_filter"/>
-        <field name="mode">primary</field> 
+        <field name="mode">primary</field>
         <field name="priority">32</field>
         <field name="arch" type="xml">
             <xpath expr="//filter[@name='my_sale_orders_filter']" position="attributes">
@@ -183,23 +183,18 @@
     </record>
 
     <!-- Main website sale menu items -->
+    <menuitem id="menu_ecommerce" name="eCommerce"
+        parent="website.menu_website_configuration" sequence="10"
+        groups="sales_team.group_sale_salesman"/>
     <menuitem id="menu_orders" name="Orders"
-        parent="website.menu_website_configuration" sequence="2"
+        parent="menu_ecommerce" sequence="2"
         groups="sales_team.group_sale_salesman"/>
     <menuitem id="menu_catalog" name="Products"
-        parent="website.menu_website_configuration" sequence="3"
+        parent="menu_ecommerce" sequence="3"
         groups="sales_team.group_sale_salesman"/>
-    <menuitem id="menu_reporting" name="Reporting"
-        parent="website.menu_website_configuration" sequence="99"
-        groups="sales_team.group_sale_manager"/>
-    <menuitem id="website.menu_website_global_configuration" name="Configuration"
-        parent="website.menu_website_configuration" sequence="100"
-        groups="base.group_system,sales_team.group_sale_manager"/>
 
     <menuitem id="menu_ecommerce_settings" name="eCommerce" sequence="50"
         parent="website.menu_website_global_configuration"/>
-    <menuitem id="menu_product_settings" name="Products" sequence="80"
-        parent="website.menu_website_global_configuration"/>
 
     <!-- Orders sub-menus -->
     <menuitem id="menu_orders_orders" name="Orders"
@@ -225,12 +220,19 @@
         parent="menu_catalog" groups="product.group_product_variant" sequence="2"/>
     <menuitem id="menu_catalog_pricelists" name="Pricelists"
         action="product.product_pricelist_action2"
-        parent="menu_catalog" groups="product.group_product_pricelist" sequence="4"/>
+        parent="menu_catalog" groups="product.group_product_pricelist" sequence="3"/>
+    <menuitem id="menu_catalog_categories"
+        action="product_public_category_action"
+        parent="menu_catalog" sequence="4"/>
+    <menuitem id="menu_product_attribute_action"
+        action="product.attribute_action"
+        parent="menu_catalog"  groups="product.group_product_variant" sequence="5"/>
 
     <!-- Reporting sub-menus -->
     <menuitem id="menu_report_sales" name="Online Sales"
         action="sale_report_action_dashboard"
-        parent="menu_reporting" sequence="1"/>
+        parent="website.menu_reporting" sequence="30"
+        groups="sales_team.group_sale_manager"/>
 
     <!-- Configuration sub-menus -->
     <menuitem id="menu_ecommerce_payment_acquirers"
@@ -248,15 +250,6 @@
         action="payment.action_payment_transaction"
         groups="base.group_no_one"
         parent="menu_ecommerce_settings"/>
-    <menuitem id="menu_catalog_categories"
-        action="product_public_category_action"
-        parent="menu_product_settings" sequence="1"/>
-    <menuitem id="menu_product_tag"
-        action="product.product_tag_action"
-        parent="menu_product_settings" sequence="1"/>
-    <menuitem id="menu_product_attribute_action"
-        action="product.attribute_action"
-        parent="menu_product_settings"  groups="product.group_product_variant" sequence="2"/>
 
     <record id="sale_order_view_form" model="ir.ui.view">
         <field name="name">sale.order.form</field>
diff --git a/addons/website_sale_comparison/views/website_sale_comparison_view.xml b/addons/website_sale_comparison/views/website_sale_comparison_view.xml
index 426c3970795..8726a9c405b 100644
--- a/addons/website_sale_comparison/views/website_sale_comparison_view.xml
+++ b/addons/website_sale_comparison/views/website_sale_comparison_view.xml
@@ -22,7 +22,7 @@
 
     <menuitem action="product_attribute_category_action"
         id="menu_attribute_category_action"
-        parent="website_sale.menu_product_settings" groups="product.group_product_variant" sequence="11"/>
+        parent="website_sale.menu_catalog" groups="product.group_product_variant" sequence="11"/>
 
     <record id="product_attribute_tree_view_inherit" model="ir.ui.view">
         <field name="name">product.attribute.tree.inherit</field>

From 59b96b0742fe8da31eecf896f7a6157811d49de5 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Wed, 15 Dec 2021 18:07:40 +0100
Subject: [PATCH 03/88] [IMP] website: add client action to display current
 website in an iframe

This commit adds a new client action, that will display the frontend
website in an iframe, inside the backend.
Besides that iframe will be instantiated the edition components (the
snippets menu, or the translate menu).

This allows for a better integration with the other odoo apps, an easier
mobile edition. It also avoid reloading the edition components when
navigating inside the website.

See merge commit for more information.

task-2687506
---
 addons/website/__manifest__.py                |  5 ++-
 .../website_preview/website_preview.js        | 37 +++++++++++++++++++
 .../website_preview/website_preview.scss      | 11 ++++++
 .../website_preview/website_preview.xml       |  8 ++++
 .../static/src/js/backend/dashboard.js        |  2 +-
 .../static/src/services/website_service.js    | 21 +++++++++++
 addons/website/views/website_views.xml        | 18 ++++++---
 7 files changed, 94 insertions(+), 8 deletions(-)
 create mode 100644 addons/website/static/src/client_actions/website_preview/website_preview.js
 create mode 100644 addons/website/static/src/client_actions/website_preview/website_preview.scss
 create mode 100644 addons/website/static/src/client_actions/website_preview/website_preview.xml
 create mode 100644 addons/website/static/src/services/website_service.js

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 1a80ba97813..456a70bf346 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -169,6 +169,9 @@
             'website/static/src/js/widget_iframe.js',
             'website/static/src/js/theme_preview_kanban.js',
             'website/static/src/js/theme_preview_form.js',
+            'website/static/src/client_actions/*/*.js',
+            'website/static/src/client_actions/*/*.scss',
+            'website/static/src/services/website_service.js',
         ],
         'web.qunit_suite_tests': [
             'website/static/tests/dashboard_tests.js',
@@ -239,7 +242,7 @@
             'website/static/src/xml/website.backend.xml',
             'website/static/src/xml/website_widget.xml',
             'website/static/src/xml/theme_preview.xml',
-            'website/static/src/client_actions/configurator/configurator.xml',
+            'website/static/src/client_actions/*/*.xml',
         ],
         'website.test_bundle': [
             '/web/static/lib/qweb/qweb2.js',
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
new file mode 100644
index 00000000000..d6f9c2889be
--- /dev/null
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -0,0 +1,37 @@
+/** @odoo-module **/
+
+import { registry } from '@web/core/registry';
+import { useService } from '@web/core/utils/hooks';
+
+const { Component, onWillStart } = owl;
+
+export class WebsitePreview extends Component {
+    setup() {
+        this.websiteService = useService('website');
+
+        onWillStart(async () => {
+            await this.websiteService.fetchWebsites();
+            const encodedPath = encodeURIComponent(this.path);
+            this.initialUrl = `/website/force/${this.websiteId}?path=${encodedPath}`;
+        });
+    }
+
+    get websiteId() {
+        let websiteId = this.props.action.context.params && this.props.action.context.params.website_id;
+        if (!websiteId) {
+            websiteId = this.websiteService.websites[0].id;
+        }
+        return websiteId;
+    }
+
+    get path() {
+        let path = this.props.action.context.params && this.props.action.context.params.path;
+        if (!path) {
+            path = '/';
+        }
+        return path;
+    }
+}
+WebsitePreview.template = 'website.WebsitePreview';
+
+registry.category('actions').add('website_preview', WebsitePreview);
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.scss b/addons/website/static/src/client_actions/website_preview/website_preview.scss
new file mode 100644
index 00000000000..89b84d2f969
--- /dev/null
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.scss
@@ -0,0 +1,11 @@
+.o_website_preview {
+    position: relative;
+    height: 100%;
+
+    > iframe {
+        @include o-position-absolute(0, 0, 0, 0);
+        width: 100%;
+        height: 100%;
+        border: none;
+    }
+}
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml
new file mode 100644
index 00000000000..e856f8453c9
--- /dev/null
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+<t t-name="website.WebsitePreview" owl="1">
+    <div class="o_website_preview">
+        <iframe t-att-src="initialUrl" class="o_iframe"/>
+    </div>
+</t>
+</templates>
diff --git a/addons/website/static/src/js/backend/dashboard.js b/addons/website/static/src/js/backend/dashboard.js
index 4fd02f41ccd..8610a1374fa 100644
--- a/addons/website/static/src/js/backend/dashboard.js
+++ b/addons/website/static/src/js/backend/dashboard.js
@@ -138,7 +138,7 @@ var Dashboard = AbstractAction.extend({
     on_go_to_website: function (ev) {
         ev.preventDefault();
         var website = _.findWhere(this.websites, {selected: true});
-        window.location.href = `/website/force/${website.id}`;
+        window.location.replace(`/web#action=website.website_preview&website_id=${website.id}`);
     },
 
     on_save_ga_client_id: function(ga_client_id, ga_analytics_key) {
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
new file mode 100644
index 00000000000..bc347e4a005
--- /dev/null
+++ b/addons/website/static/src/services/website_service.js
@@ -0,0 +1,21 @@
+/** @odoo-module **/
+
+import { registry } from '@web/core/registry';
+
+export const websiteService = {
+    dependencies: ['orm'],
+    async start(env, { orm }) {
+        let websites = [];
+        return {
+            get websites() {
+                return websites;
+            },
+            async fetchWebsites() {
+                const allWebsites = await orm.searchRead('website', []);
+                websites = [...allWebsites];
+            },
+        };
+    },
+};
+
+registry.category('services').add('website', websiteService);
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index 672f4321233..689b5d1dde8 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -400,6 +400,11 @@
             <field name="tag">backend_dashboard</field>
         </record>
 
+        <record id="website_preview" model="ir.actions.client">
+            <field name="name">Website Preview</field>
+            <field name="tag">website_preview</field>
+        </record>
+
         <record id="ir_actions_server_website_dashboard" model="ir.actions.server">
             <field name="name">Website: Dashboard</field>
             <field name="model_id" ref="website.model_website"/>
@@ -525,8 +530,8 @@
             groups="base.group_user"
             web_icon="website,static/description/icon.svg"/>
 
-        <menuitem id="menu_dashboard"
-            name="Dashboard"
+        <menuitem id="menu_site"
+            name="Site"
             sequence="1"
             parent="website.menu_website_configuration"/>
 
@@ -535,10 +540,11 @@
             sequence="99"
             parent="website.menu_website_configuration"/>
 
-        <!-- Force empty action, to ease upgrade -->
-        <record id="menu_dashboard" model="ir.ui.menu">
-            <field name="action" eval="False"/>
-        </record>
+        <menuitem id="menu_website_preview"
+            parent="menu_site"
+            sequence="10"
+            name="Go to Website"
+            action="website.website_preview"/>
 
         <menuitem id="menu_website_pages_list"
             parent="menu_site"

From 17635685205753b1a59c57f90bbe67044a521371 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Fri, 11 Feb 2022 11:01:53 +0100
Subject: [PATCH 04/88] [IMP] website: display website iframe url from
 website_preview action

The browser's url is replaced when navigating inside the website from
the client action's iframe.
Exemple:
"/web#action=website.website_preview&path=/shop" becomes "/shop".

See merge commit for more information.

task-2687506
---
 .../website_preview/website_preview.js              | 13 ++++++++++++-
 .../website_preview/website_preview.xml             |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index d6f9c2889be..270b92c929a 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -3,17 +3,28 @@
 import { registry } from '@web/core/registry';
 import { useService } from '@web/core/utils/hooks';
 
-const { Component, onWillStart } = owl;
+const { Component, onWillStart, useEffect, useRef } = owl;
 
 export class WebsitePreview extends Component {
     setup() {
         this.websiteService = useService('website');
 
+        this.iframe = useRef('iframe');
+
         onWillStart(async () => {
             await this.websiteService.fetchWebsites();
             const encodedPath = encodeURIComponent(this.path);
             this.initialUrl = `/website/force/${this.websiteId}?path=${encodedPath}`;
         });
+
+        useEffect(() => {
+            this.iframe.el.addEventListener('load', () => {
+                // This replaces the browser url (/web#action=website...) with
+                // the iframe's url (it is clearer for the user).
+                this.currentUrl = this.iframe.el.contentDocument.location.href;
+                history.replaceState({}, this.props.action.display_name, this.currentUrl);
+            });
+        }, () => []);
     }
 
     get websiteId() {
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml
index e856f8453c9..7840168b132 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.xml
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 <t t-name="website.WebsitePreview" owl="1">
     <div class="o_website_preview">
-        <iframe t-att-src="initialUrl" class="o_iframe"/>
+        <iframe t-att-src="initialUrl" class="o_iframe" t-ref="iframe"/>
     </div>
 </t>
 </templates>

From 14ff4c00b4eb96eea5810208634a3a1d679cebec Mon Sep 17 00:00:00 2001
From: Quentin Smetz <qsm@odoo.com>
Date: Mon, 20 Dec 2021 17:51:04 +0100
Subject: [PATCH 05/88] [IMP] website, *: display a mini-nav to redirect to the
 backend

*: survey

Add a small overlay allowing common actions, which all redirect to the
Odoo backend.

See merge commit for more information.

task-2687506
---
 .../src/scss/survey_templates_form.scss       |  7 +-
 addons/website/__manifest__.py                |  2 +
 .../website/static/src/js/content/redirect.js | 61 ++++++++++++
 .../website/static/src/scss/website.ui.scss   | 96 +++++++++++++++++++
 4 files changed, 163 insertions(+), 3 deletions(-)
 create mode 100644 addons/website/static/src/js/content/redirect.js

diff --git a/addons/survey/static/src/scss/survey_templates_form.scss b/addons/survey/static/src/scss/survey_templates_form.scss
index 8257fbb0342..7715a4acff8 100644
--- a/addons/survey/static/src/scss/survey_templates_form.scss
+++ b/addons/survey/static/src/scss/survey_templates_form.scss
@@ -1,13 +1,14 @@
 /**********************************************************
-  Remove website navbar : Should be done in website survey
-       but we won't do a bridge module only for this.
+  Remove website backend redirection button : Should be
+  done in website survey but we won't do a bridge module
+  only for this.
   TODO: SmartPeople Fixme - cleaner solution? be my guest!
  **********************************************************/
 body.o_connected_user {
     padding-top: 0px !important;
 }
 
-nav#oe_main_menu_navbar {
+nav.o_frontend_to_backend_nav {
     display: none !important;
 }
 
diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 456a70bf346..cd6553f1bdb 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -138,11 +138,13 @@
         'web.assets_frontend_minimal': [
             'website/static/src/js/content/inject_dom.js',
             'website/static/src/js/content/auto_hide_menu.js',
+            'website/static/src/js/content/redirect.js',
         ],
         'web.assets_frontend_lazy': [
             # Remove assets_frontend_minimal
             ('remove', 'website/static/src/js/content/inject_dom.js'),
             ('remove', 'website/static/src/js/content/auto_hide_menu.js'),
+            ('remove', 'website/static/src/js/content/redirect.js'),
         ],
         'web._assets_primary_variables': [
             'website/static/src/scss/primary_variables.scss',
diff --git a/addons/website/static/src/js/content/redirect.js b/addons/website/static/src/js/content/redirect.js
new file mode 100644
index 00000000000..821195034a0
--- /dev/null
+++ b/addons/website/static/src/js/content/redirect.js
@@ -0,0 +1,61 @@
+/** @odoo-module */
+
+import { session } from '@web/session';
+// import { _t } from "@web/core/l10n/translation"; // FIXME don't know why it does not work
+const _t = str => str;
+
+/**
+ * This script, served with frontend pages, displays buttons in the top left
+ * corner to provide the authenticated user an access to his odoo backend.
+ */
+document.addEventListener('DOMContentLoaded', () => {
+    if (session.is_website_user) {
+        return;
+    }
+
+    if (!window.frameElement) {
+        const websiteId = document.documentElement.dataset.websiteId;
+        const {pathname, search} = window.location;
+
+        const autoredirectToBackendAction = false;
+        if (autoredirectToBackendAction) {
+            document.body.innerHTML = '';
+            window.location.replace(`/web#action=website.website_preview&path=${encodeURIComponent(`${pathname}${search}`)}&website_id=${websiteId}`);
+        } else {
+            // FIXME this UI does not respect access rights yet but we will
+            // probably end up doing it in XML instead of JS anyway.
+            const frontendToBackendNavEl = document.createElement('div');
+            frontendToBackendNavEl.classList.add('o_frontend_to_backend_nav');
+            frontendToBackendNavEl.addEventListener('click', ev => {
+                frontendToBackendNavEl.classList.add('o_frontend_to_backend_nav_opened');
+                setTimeout(() => {
+                    // TODO find a better way? Useful so that hover effects work
+                    // after the opening.
+                    frontendToBackendNavEl.classList.add('o_frontend_to_backend_nav_fully_opened');
+                }, 600);
+            }, { once: true });
+
+            const loadingIconEl = document.createElement('i');
+            loadingIconEl.classList.add('o_frontend_to_backend_icon', 'fa', 'fa-arrow-right');
+            frontendToBackendNavEl.appendChild(loadingIconEl);
+
+            const backendAppsButtonEl = document.createElement('a');
+            backendAppsButtonEl.href = '/web';
+            backendAppsButtonEl.title = _t("Go to your Odoo Apps");
+            backendAppsButtonEl.classList.add('o_frontend_to_backend_apps_btn', 'fa', 'fa-th');
+            frontendToBackendNavEl.appendChild(backendAppsButtonEl);
+
+            const backendEditButtonEl = document.createElement('a');
+            backendEditButtonEl.href = `/web#action=website.website_preview&path=${encodeURIComponent(`${pathname}${search}`)}&website_id=${websiteId}`;
+            backendEditButtonEl.textContent = _t("Edit");
+            backendEditButtonEl.title = _t("Edit your page content");
+            backendEditButtonEl.classList.add('o_frontend_to_backend_edit_btn');
+            const backendEditButtonIconEl = document.createElement('i');
+            backendEditButtonIconEl.classList.add('fa', 'fa-pencil');
+            backendEditButtonEl.prepend(backendEditButtonIconEl);
+            frontendToBackendNavEl.appendChild(backendEditButtonEl);
+
+            document.body.appendChild(frontendToBackendNavEl);
+        }
+    }
+});
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index e81e11db7ee..e5e12118bd6 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -3,6 +3,102 @@
 /// and the UI components rules.
 ///
 
+$-mini-nav-size: 40px;
+
+.o_frontend_to_backend_nav {
+    @include o-position-absolute(0, auto, auto, 0);
+    position: fixed;
+    z-index: $zindex-modal;
+    display: flex;
+    font-size: $o-font-size-base * ($o-root-font-size / 16px);
+
+    &::before {
+        content: "";
+        @include o-position-absolute(0, auto, auto, 0);
+        border-top: $-mini-nav-size/2 solid $o-enterprise-color;
+        border-left: $-mini-nav-size/2 solid $o-enterprise-color;
+        border-bottom: $-mini-nav-size/2 solid transparent;
+        border-right: $-mini-nav-size/2 solid transparent;
+        cursor: pointer;
+
+        transform-origin: top left;
+        transition: transform 400ms ease 0s;
+    }
+
+    > * {
+        position: relative;
+        min-width: $-mini-nav-size;
+        height: $-mini-nav-size;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        background-color: $o-enterprise-color;
+        color: transparent;
+        transform-origin: top left;
+        transform: translateX(-250%) scaleY(0.2);
+        transition: transform 400ms ease 0s, background-color 400ms ease 200ms, color 400ms ease 200ms;
+
+        &:hover {
+            background-color: darken($o-enterprise-color, 5%);
+            color: white;
+            text-decoration: none;
+        }
+    }
+
+    &:hover {
+        &::before {
+            transform: scale(1.3);
+        }
+        .o_frontend_to_backend_icon {
+            transform: rotateZ(45deg) translateX(#{-$-mini-nav-size / 4 * 0.3});
+        }
+    }
+
+    &.o_frontend_to_backend_nav_opened {
+        &:hover::before {
+            transform: scaleX(1.3);
+            transition: transform 100ms ease 0s;
+        }
+
+        > * {
+            color: white;
+            transform: translateX(-#{$-mini-nav-size});
+        }
+        .o_frontend_to_backend_edit_btn {
+            background-color: $o-enterprise-primary-color;
+
+            &:hover {
+                background-color: darken($o-enterprise-primary-color, 5%);
+            }
+        }
+
+        &.o_frontend_to_backend_nav_fully_opened > * {
+            transition: none;
+        }
+    }
+}
+.o_frontend_to_backend_icon {
+    border-radius: 50rem;
+    background-color: transparent;
+    color: white;
+    transform-origin: center center;
+    transform: rotateZ(45deg) translateX(#{-$-mini-nav-size/4});
+    transition: transform 100ms ease 0s;
+
+    &:hover {
+        background-color: transparent;
+    }
+}
+.o_frontend_to_backend_edit_btn {
+    padding: 0 12px;
+
+    > .fa {
+        margin-right: 8px;
+    }
+}
+
 // LAYOUTING
 body {
     // Set frontend direction that will be flipped with

From 8bf1f332af0b41a245093417034b8398553e01b6 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Thu, 23 Jun 2022 18:47:21 +0200
Subject: [PATCH 06/88] [IMP] website, *: add links to backend and website app
 in user dropdown

*: portal

The user dropdown (containing link to /my and a link to logout) now also
contains two other links (provided the user has the access rights):
- Link to the backend (app switcher for enterprise)
- Link to the website client action to configure the current page

See merge commit for more information.

task-2687506
---
 addons/portal/views/portal_templates.xml         |  3 +++
 addons/website/static/src/js/content/redirect.js | 16 ++++++++++++++++
 addons/website/static/src/scss/website.ui.scss   |  2 +-
 addons/website/views/website_templates.xml       |  5 +++++
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index 683eae2654e..f316e002d31 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -93,6 +93,9 @@
                     <span t-if="_user_name" t-attf-class="#{_user_name_class}" t-esc="user_id.name[:23] + '...' if user_id.name and len(user_id.name) &gt; 25 else user_id.name"/>
                 </a>
                 <div t-attf-class="dropdown-menu js_usermenu #{_dropdown_menu_class}" role="menu">
+                    <a groups="base.group_user" href="/web" role="menuitem" class="dropdown-item d-flex align-items-center" id="o_backend_user_dropdown_link">
+                        Apps <i class="fa fa-th ml-auto pl-4"/>
+                    </a>
                     <div id="o_logout_divider" class="dropdown-divider"/>
                     <a t-attf-href="/web/session/logout?redirect=/" role="menuitem" id="o_logout" class="dropdown-item">Logout</a>
                 </div>
diff --git a/addons/website/static/src/js/content/redirect.js b/addons/website/static/src/js/content/redirect.js
index 821195034a0..482d93db7e0 100644
--- a/addons/website/static/src/js/content/redirect.js
+++ b/addons/website/static/src/js/content/redirect.js
@@ -13,6 +13,8 @@ document.addEventListener('DOMContentLoaded', () => {
         return;
     }
 
+    const editInBackendUserDropdownLinkEl = document.getElementById('o_edit_in_backend_user_dropdown_link');
+
     if (!window.frameElement) {
         const websiteId = document.documentElement.dataset.websiteId;
         const {pathname, search} = window.location;
@@ -55,7 +57,21 @@ document.addEventListener('DOMContentLoaded', () => {
             backendEditButtonEl.prepend(backendEditButtonIconEl);
             frontendToBackendNavEl.appendChild(backendEditButtonEl);
 
+            if (editInBackendUserDropdownLinkEl) {
+                editInBackendUserDropdownLinkEl.href = backendEditButtonEl.href;
+            }
+
             document.body.appendChild(frontendToBackendNavEl);
         }
+    } else {
+        const backendUserDropdownLinkEl = document.getElementById('o_backend_user_dropdown_link');
+        if (backendUserDropdownLinkEl) {
+            backendUserDropdownLinkEl.classList.add('d-none');
+            backendUserDropdownLinkEl.classList.remove('d-flex');
+        }
+        if (editInBackendUserDropdownLinkEl) {
+            editInBackendUserDropdownLinkEl.classList.add('d-none');
+            editInBackendUserDropdownLinkEl.classList.remove('d-flex');
+        }
     }
 });
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index e5e12118bd6..5b8cc3cd9c1 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -57,7 +57,7 @@ $-mini-nav-size: 40px;
     }
 
     &.o_frontend_to_backend_nav_opened {
-        &:hover::before {
+        &::before {
             transform: scaleX(1.3);
             transition: transform 100ms ease 0s;
         }
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index db3e44e7e42..01d7c221991 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -211,6 +211,11 @@
         </t>
         <t t-else="">$0</t>
     </xpath>
+    <xpath expr="//a[@id='o_backend_user_dropdown_link']" position="after">
+        <a groups="website.group_website_publisher" href="/web#action=website.website_preview" role="menuitem" class="dropdown-item d-flex align-items-center" id="o_edit_in_backend_user_dropdown_link">
+            Configure this page <i class="fa fa-pencil ml-auto pl-4"/>
+        </a>
+    </xpath>
 </template>
 
 <template id="brand_promotion" inherit_id="web.brand_promotion" name="Brand Promotion">

From 2d44f2792dec0b2f205475a22dbedc97e9c54a64 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Fri, 31 Dec 2021 09:41:40 +0100
Subject: [PATCH 07/88] [IMP] website, *: handle url redirections from website
 iframe

*: auth_signup, portal, web, website_knowledge

When navigating in the iframe, only same origin redirections should be
open in the iframe contentWindow. External redirections should be done
in the top window.

Some internal pages had to be served with X-Frame-Options header set to
SAMEORIGIN, and Content-Security-Policy to "frame-ancestors 'self'" (see
[1]).

All the links that are redirecting to another host, and the client
actions, are opened in the top window.
Exemples that will be opened in the iframe's top window:
- Clicking on a link google.be that should not open in a new tab
- Clicking on the language selector and adding a new one, or
clicking on "logout".

[1]: https://github.com/odoo/odoo/pull/78298#discussion_r898853383

See merge commit for more information.

task-2687506

Co-authored-by: Arthur Detroux <ard@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 addons/auth_signup/controllers/main.py        |  6 +-
 addons/portal/controllers/portal.py           |  6 +-
 addons/web/controllers/home.py                |  3 +-
 .../website_preview/website_preview.js        | 65 +++++++++++++++----
 .../website_preview/website_preview.xml       |  5 +-
 addons/website/static/src/js/utils.js         |  4 ++
 addons/website_knowledge/__manifest__.py      |  1 +
 .../website_preview/website_preview.js        | 12 ++++
 8 files changed, 85 insertions(+), 17 deletions(-)
 create mode 100644 addons/website_knowledge/static/src/client_actions/website_preview/website_preview.js

diff --git a/addons/auth_signup/controllers/main.py b/addons/auth_signup/controllers/main.py
index e16e65db888..a7069fbabe0 100644
--- a/addons/auth_signup/controllers/main.py
+++ b/addons/auth_signup/controllers/main.py
@@ -61,7 +61,8 @@ class AuthSignupHome(Home):
                     qcontext['error'] = _("Could not create a new account.")
 
         response = request.render('auth_signup.signup', qcontext)
-        response.headers['X-Frame-Options'] = 'DENY'
+        response.headers['X-Frame-Options'] = 'SAMEORIGIN'
+        response.headers['Content-Security-Policy'] = "frame-ancestors 'self'"
         return response
 
     @http.route('/web/reset_password', type='http', auth='public', website=True, sitemap=False)
@@ -93,7 +94,8 @@ class AuthSignupHome(Home):
                 qcontext['error'] = str(e)
 
         response = request.render('auth_signup.reset_password', qcontext)
-        response.headers['X-Frame-Options'] = 'DENY'
+        response.headers['X-Frame-Options'] = 'SAMEORIGIN'
+        response.headers['Content-Security-Policy'] = "frame-ancestors 'self'"
         return response
 
     def get_auth_signup_config(self):
diff --git a/addons/portal/controllers/portal.py b/addons/portal/controllers/portal.py
index 880afa26318..07505196952 100644
--- a/addons/portal/controllers/portal.py
+++ b/addons/portal/controllers/portal.py
@@ -213,7 +213,8 @@ class CustomerPortal(Controller):
         })
 
         response = request.render("portal.portal_my_details", values)
-        response.headers['X-Frame-Options'] = 'DENY'
+        response.headers['X-Frame-Options'] = 'SAMEORIGIN'
+        response.headers['Content-Security-Policy'] = "frame-ancestors 'self'"
         return response
 
     def on_account_update(self, values, partner):
@@ -233,7 +234,8 @@ class CustomerPortal(Controller):
             ))
 
         return request.render('portal.portal_my_security', values, headers={
-            'X-Frame-Options': 'DENY'
+            'X-Frame-Options': 'SAMEORIGIN',
+            'Content-Security-Policy': "frame-ancestors 'self'"
         })
 
     def _update_password(self, old, new1, new2):
diff --git a/addons/web/controllers/home.py b/addons/web/controllers/home.py
index 7c22ac3c3b2..f0f08d30f91 100644
--- a/addons/web/controllers/home.py
+++ b/addons/web/controllers/home.py
@@ -119,7 +119,8 @@ class Home(http.Controller):
             values['disable_database_manager'] = True
 
         response = request.render('web.login', values)
-        response.headers['X-Frame-Options'] = 'DENY'
+        response.headers['X-Frame-Options'] = 'SAMEORIGIN'
+        response.headers['Content-Security-Policy'] = "frame-ancestors 'self'"
         return response
 
     @http.route('/web/login_successful', type='http', auth='user', website=True, sitemap=False)
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 270b92c929a..ff54e9123b8 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -3,7 +3,7 @@
 import { registry } from '@web/core/registry';
 import { useService } from '@web/core/utils/hooks';
 
-const { Component, onWillStart, useEffect, useRef } = owl;
+const { Component, onWillStart, useRef } = owl;
 
 export class WebsitePreview extends Component {
     setup() {
@@ -16,15 +16,6 @@ export class WebsitePreview extends Component {
             const encodedPath = encodeURIComponent(this.path);
             this.initialUrl = `/website/force/${this.websiteId}?path=${encodedPath}`;
         });
-
-        useEffect(() => {
-            this.iframe.el.addEventListener('load', () => {
-                // This replaces the browser url (/web#action=website...) with
-                // the iframe's url (it is clearer for the user).
-                this.currentUrl = this.iframe.el.contentDocument.location.href;
-                history.replaceState({}, this.props.action.display_name, this.currentUrl);
-            });
-        }, () => []);
     }
 
     get websiteId() {
@@ -37,11 +28,63 @@ export class WebsitePreview extends Component {
 
     get path() {
         let path = this.props.action.context.params && this.props.action.context.params.path;
-        if (!path) {
+        if (path) {
+            const url = new URL(path, window.location.origin);
+            if (this._isTopWindowURL(url)) {
+                // If the client action is initialized with a path that
+                // should not be opened inside the iframe (= something we
+                // would want to open on the top window), we consider that
+                // this is not a valid flow. Instead of trying to open it on
+                // the top window, we initialize the iframe with the
+                // website homepage...
+                path = '/';
+            } else {
+                // ... otherwise, the path still needs to be normalized (as
+                // it would be if the given path was used as an href of a
+                // <a/> element).
+                path = url.pathname + url.search + url.hash;
+            }
+        } else {
             path = '/';
         }
         return path;
     }
+
+    /**
+     * Returns true if the url should be opened in the top
+     * window.
+     *
+     * @param host {string} host of the route.
+     * @param pathname {string} path of the route.
+     * @private
+     */
+    _isTopWindowURL({ host, pathname }) {
+        const backendRoutes = ['/web', '/web/session/logout'];
+        return host !== window.location.host || (pathname && backendRoutes.includes(pathname));
+    }
+
+    _onPageLoaded() {
+        // This replaces the browser url (/web#action=website...) with
+        // the iframe's url (it is clearer for the user).
+        this.currentUrl = this.iframe.el.contentDocument.location.href;
+        history.replaceState({}, this.props.action.display_name, this.currentUrl);
+
+        // The clicks on the iframe are listened, so that links with external
+        // redirections can be opened in the top window.
+        this.iframe.el.contentDocument.addEventListener('click', (ev) => {
+            const linkEl = ev.target.closest('[href]');
+            if (!linkEl) {
+                return;
+            }
+
+            const { href, target } = linkEl;
+            if (href && target !== '_blank' && !this.websiteContext.edition && this._isTopWindowURL(linkEl)) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                window.location.replace(href);
+            }
+        });
+    }
 }
 WebsitePreview.template = 'website.WebsitePreview';
 
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml
index 7840168b132..db9b295f392 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.xml
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml
@@ -2,7 +2,10 @@
 <templates xml:space="preserve">
 <t t-name="website.WebsitePreview" owl="1">
     <div class="o_website_preview">
-        <iframe t-att-src="initialUrl" class="o_iframe" t-ref="iframe"/>
+        <iframe t-att-src="initialUrl"
+            class="o_iframe"
+            t-ref="iframe"
+            t-on-load="_onPageLoaded"/>
     </div>
 </t>
 </templates>
diff --git a/addons/website/static/src/js/utils.js b/addons/website/static/src/js/utils.js
index 0de8729c62d..3fc007b7498 100644
--- a/addons/website/static/src/js/utils.js
+++ b/addons/website/static/src/js/utils.js
@@ -255,6 +255,10 @@ function sendRequest(route, params) {
     let form = document.createElement('form');
     form.setAttribute('action', route);
     form.setAttribute('method', params.method || 'POST');
+    const isInIframe = window.frameElement && window.frameElement.classList.contains('o_iframe');
+    if (isInIframe) {
+        form.setAttribute('target', '_top');
+    }
 
     if (core.csrf_token) {
         _addInput(form, 'csrf_token', core.csrf_token);
diff --git a/addons/website_knowledge/__manifest__.py b/addons/website_knowledge/__manifest__.py
index f4af43241a9..6d20178b359 100644
--- a/addons/website_knowledge/__manifest__.py
+++ b/addons/website_knowledge/__manifest__.py
@@ -19,6 +19,7 @@
     'assets': {
         'web.assets_backend': [
             'website_knowledge/static/src/js/knowledge_controller.js',
+            'website_knowledge/static/src/client_actions/website_preview/website_preview.js',
         ]
     },
 }
diff --git a/addons/website_knowledge/static/src/client_actions/website_preview/website_preview.js b/addons/website_knowledge/static/src/client_actions/website_preview/website_preview.js
new file mode 100644
index 00000000000..44d74139894
--- /dev/null
+++ b/addons/website_knowledge/static/src/client_actions/website_preview/website_preview.js
@@ -0,0 +1,12 @@
+/** @odoo-module **/
+import { patch } from 'web.utils';
+import { WebsitePreview } from '@website/client_actions/website_preview/website_preview';
+
+patch(WebsitePreview.prototype, 'website_knowledge_website_preview', {
+    /**
+     * @override
+     */
+    _isTopWindowURL({ pathname }) {
+        return (pathname && pathname.startsWith('/knowledge/article/')) || this._super(...arguments);
+    }
+});

From 7b19831e1c624b483008feb526ba773ec8b23009 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Thu, 9 Jun 2022 15:16:06 +0200
Subject: [PATCH 08/88] [IMP] website: add a fallback to the iframe to avoid
 white flickering

This commit adds an underlying iframe, below the main one used to
display the website.

This iframe, used as a fallback inbetween the events 'beforeunload' and
'load' of the main iframe, will host its replicated content to avoid
seeing white flashes.

These white flashes can happen on Chrome Linux and Windows - even on a
regular navigation - but are even more visible in the context of an
iframe.

See merge commit for more information.

task-2687506
---
 addons/website/controllers/backend.py                 |  4 ++++
 .../client_actions/website_preview/website_preview.js | 11 +++++++++++
 .../website_preview/website_preview.xml               |  2 ++
 addons/website/views/website_templates.xml            |  8 ++++++++
 4 files changed, 25 insertions(+)

diff --git a/addons/website/controllers/backend.py b/addons/website/controllers/backend.py
index 2022acc97a7..c5cf4822c06 100644
--- a/addons/website/controllers/backend.py
+++ b/addons/website/controllers/backend.py
@@ -41,6 +41,10 @@ class WebsiteBackend(http.Controller):
             dashboard_data['dashboards']['plausible_share_url'] = current_website._get_plausible_share_url()
         return dashboard_data
 
+    @http.route('/website/iframefallback', type="http", auth='user', website=True)
+    def get_iframe_fallback(self):
+        return request.render('website.iframefallback')
+
     @http.route('/website/dashboard/set_ga_data', type='json', auth='user')
     def website_set_ga_data(self, website_id, ga_client_id, ga_analytics_key):
         if not request.env.user.has_group('base.group_system'):
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index ff54e9123b8..f74d98d5e84 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -9,7 +9,10 @@ export class WebsitePreview extends Component {
     setup() {
         this.websiteService = useService('website');
 
+        this.iframeFallbackUrl = '/website/iframefallback';
+
         this.iframe = useRef('iframe');
+        this.iframefallback = useRef('iframefallback');
 
         onWillStart(async () => {
             await this.websiteService.fetchWebsites();
@@ -69,6 +72,14 @@ export class WebsitePreview extends Component {
         this.currentUrl = this.iframe.el.contentDocument.location.href;
         history.replaceState({}, this.props.action.display_name, this.currentUrl);
 
+        // Before leaving the iframe, its content is replicated on an
+        // underlying iframe, to avoid for white flashes (visible on
+        // Chrome Windows/Linux).
+        this.iframe.el.contentWindow.addEventListener('beforeunload', () => {
+            this.iframefallback.el.contentDocument.body.replaceWith(this.iframe.el.contentDocument.body.cloneNode(true));
+            $().getScrollingElement(this.iframefallback.el.contentDocument)[0].scrollTop = $().getScrollingElement(this.iframe.el.contentDocument)[0].scrollTop;
+        });
+
         // The clicks on the iframe are listened, so that links with external
         // redirections can be opened in the top window.
         this.iframe.el.contentDocument.addEventListener('click', (ev) => {
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml
index db9b295f392..d889dbca1c5 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.xml
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml
@@ -2,6 +2,8 @@
 <templates xml:space="preserve">
 <t t-name="website.WebsitePreview" owl="1">
     <div class="o_website_preview">
+        <iframe t-att-src="iframeFallbackUrl"
+            t-ref="iframefallback"/>
         <iframe t-att-src="initialUrl"
             class="o_iframe"
             t-ref="iframe"
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 01d7c221991..ccf526bcc80 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -2645,4 +2645,12 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
     </xpath>
 </template>
 
+<template id="iframefallback" inherit_id="web.layout" primary="True">
+    <xpath expr="//head/link[last()]" position="after">
+        <t t-call-assets="web.assets_common" t-js="false"/>
+        <t t-call-assets="web.assets_frontend" t-js="false"/>
+        <t t-call-assets="website.assets_wysiwyg" t-js="false"/>
+    </xpath>
+</template>
+
 </odoo>

From 4255d16ac44ca5265fad0f74e29d1c692646d01a Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Fri, 31 Dec 2021 17:37:01 +0100
Subject: [PATCH 09/88] [IMP] website: patch navbar to display a specific
 website systray

This commit adds a new website_systray registry, that the patched navbar
will use when the user is editing the website through the WebsitePreview
client action.

This patch is subject to debate with the framework team, it will be
discussed further post-merge.

See merge commit for more information.

task-2687506

Co-authored-by: Arthur Detroux <ard@odoo.com>
---
 addons/website/__manifest__.py                |  1 +
 .../website_preview/website_preview.js        | 13 ++++++-
 .../static/src/components/navbar/navbar.js    | 39 +++++++++++++++++++
 .../static/src/services/website_service.js    | 31 ++++++++++++++-
 4 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 addons/website/static/src/components/navbar/navbar.js

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index cd6553f1bdb..3792074940e 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -174,6 +174,7 @@
             'website/static/src/client_actions/*/*.js',
             'website/static/src/client_actions/*/*.scss',
             'website/static/src/services/website_service.js',
+            'website/static/src/components/navbar/navbar.js',
         ],
         'web.qunit_suite_tests': [
             'website/static/tests/dashboard_tests.js',
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index f74d98d5e84..c5716b08dfb 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -3,7 +3,7 @@
 import { registry } from '@web/core/registry';
 import { useService } from '@web/core/utils/hooks';
 
-const { Component, onWillStart, useRef } = owl;
+const { Component, onWillStart, useRef, useEffect } = owl;
 
 export class WebsitePreview extends Component {
     setup() {
@@ -19,10 +19,21 @@ export class WebsitePreview extends Component {
             const encodedPath = encodeURIComponent(this.path);
             this.initialUrl = `/website/force/${this.websiteId}?path=${encodedPath}`;
         });
+
+        useEffect(() => {
+            this.websiteService.currentWebsiteId = this.websiteId;
+            return () => this.websiteService.currentWebsiteId = null;
+        }, () => [this.props.action.context.params]);
     }
 
     get websiteId() {
         let websiteId = this.props.action.context.params && this.props.action.context.params.website_id;
+        // When no parameter is passed to the client action, the current
+        // website from the website service is taken. By default, it will be
+        // the one from the session.
+        if (!websiteId) {
+            websiteId = this.websiteService.currentWebsite && this.websiteService.currentWebsite.id;
+        }
         if (!websiteId) {
             websiteId = this.websiteService.websites[0].id;
         }
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
new file mode 100644
index 00000000000..eb605d27c2c
--- /dev/null
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -0,0 +1,39 @@
+/** @odoo-module **/
+
+import { NavBar } from '@web/webclient/navbar/navbar';
+import { useService, useBus } from '@web/core/utils/hooks';
+import { registry } from "@web/core/registry";
+
+import { patch } from 'web.utils';
+
+const websiteSystrayRegistry = registry.category('website_systray');
+
+patch(NavBar.prototype, 'website_navbar', {
+    setup() {
+        this._super();
+        this.websiteService = useService('website');
+
+        // The navbar is rerendered with an event, as it can not naturally be
+        // with props/state (the WebsitePreview client action and the navbar
+        // are not related).
+        useBus(websiteSystrayRegistry, 'EDIT-WEBSITE', () => this.render(true));
+
+        if (this.env.debug && !websiteSystrayRegistry.contains('web.debug_mode_menu')) {
+            websiteSystrayRegistry.add('web.debug_mode_menu', registry.category('systray').get('web.debug_mode_menu'), {sequence: 100});
+        }
+    },
+
+    /**
+     * @override
+     */
+    get systrayItems() {
+        if (this.websiteService.currentWebsite) {
+            return websiteSystrayRegistry
+                .getEntries()
+                .map(([key, value]) => ({ key, ...value }))
+                .filter((item) => ('isDisplayed' in item ? item.isDisplayed(this.env) : true))
+                .reverse();
+        }
+        return this._super();
+    }
+});
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index bc347e4a005..6b5d18da657 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -2,17 +2,46 @@
 
 import { registry } from '@web/core/registry';
 
+const websiteSystrayRegistry = registry.category('website_systray');
+
+const unslugHtmlDataObject = (repr) => {
+    const match = repr && repr.match(/(.+)\((\d+),(.*)\)/);
+    if (!match) {
+        return null;
+    }
+    return {
+        model: match[1],
+        id: match[2] | 0,
+    };
+};
+
 export const websiteService = {
     dependencies: ['orm'],
     async start(env, { orm }) {
         let websites = [];
+        let currentWebsiteId;
+
+        const setCurrentWebsiteId = id => {
+            currentWebsiteId = id;
+            websiteSystrayRegistry.trigger('EDIT-WEBSITE');
+        };
         return {
+            set currentWebsiteId(id) {
+                setCurrentWebsiteId(id);
+            },
+            get currentWebsite() {
+                return websites.find(website => website.id === currentWebsiteId);
+            },
             get websites() {
                 return websites;
             },
             async fetchWebsites() {
-                const allWebsites = await orm.searchRead('website', []);
+                const [currentWebsiteRepr, allWebsites] = await Promise.all([
+                    orm.call('website', 'get_current_website'),
+                    orm.searchRead('website', []),
+                ]);
                 websites = [...allWebsites];
+                setCurrentWebsiteId(unslugHtmlDataObject(currentWebsiteRepr).id);
             },
         };
     },

From b03bd93629124d215a78cddd2c4e63fecbcfdb78 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Thu, 10 Feb 2022 15:50:36 +0100
Subject: [PATCH 10/88] [FIX] web, website: fix NavBar systrayItems getter
 patch

After OWL next was merged, an error popped up while patching the Navbar
systrayItems getter, coming from the Enterprise NavBar render. A setter
was added on the NavBar component to allow the patch.

task-2687506
---
 addons/web/static/src/webclient/navbar/navbar.js      | 4 ++++
 addons/website/static/src/components/navbar/navbar.js | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/webclient/navbar/navbar.js b/addons/web/static/src/webclient/navbar/navbar.js
index 44cdcf522e7..81bab76d696 100644
--- a/addons/web/static/src/webclient/navbar/navbar.js
+++ b/addons/web/static/src/webclient/navbar/navbar.js
@@ -92,6 +92,10 @@ export class NavBar extends Component {
             .reverse();
     }
 
+    // This dummy setter is only here to prevent conflicts between the
+    // Enterprise NavBar extension and the Website NavBar patch.
+    set systrayItems(_) {}
+
     /**
      * Adapt will check the available width for the app sections to get displayed.
      * If not enough space is available, it will replace by a "more" menu
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
index eb605d27c2c..f70cddd517a 100644
--- a/addons/website/static/src/components/navbar/navbar.js
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -35,5 +35,5 @@ patch(NavBar.prototype, 'website_navbar', {
                 .reverse();
         }
         return this._super();
-    }
+    },
 });

From 54dd238ffcb1e3c03c332aa224bd9cd869f68c99 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Mon, 3 Jan 2022 17:55:35 +0100
Subject: [PATCH 11/88] [IMP] website: add edit website systray item

See merge commit for more information.

task-2687506
---
 addons/website/__manifest__.py                     |  3 +++
 .../static/src/systray_items/edit_website.js       | 14 ++++++++++++++
 .../static/src/systray_items/edit_website.scss     |  3 +++
 .../static/src/systray_items/edit_website.xml      |  8 ++++++++
 4 files changed, 28 insertions(+)
 create mode 100644 addons/website/static/src/systray_items/edit_website.js
 create mode 100644 addons/website/static/src/systray_items/edit_website.scss
 create mode 100644 addons/website/static/src/systray_items/edit_website.xml

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 3792074940e..d94645bfde4 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -175,6 +175,8 @@
             'website/static/src/client_actions/*/*.scss',
             'website/static/src/services/website_service.js',
             'website/static/src/components/navbar/navbar.js',
+            'website/static/src/systray_items/*.js',
+            'website/static/src/systray_items/*.scss',
         ],
         'web.qunit_suite_tests': [
             'website/static/tests/dashboard_tests.js',
@@ -246,6 +248,7 @@
             'website/static/src/xml/website_widget.xml',
             'website/static/src/xml/theme_preview.xml',
             'website/static/src/client_actions/*/*.xml',
+            'website/static/src/systray_items/*.xml',
         ],
         'website.test_bundle': [
             '/web/static/lib/qweb/qweb2.js',
diff --git a/addons/website/static/src/systray_items/edit_website.js b/addons/website/static/src/systray_items/edit_website.js
new file mode 100644
index 00000000000..885654fca6a
--- /dev/null
+++ b/addons/website/static/src/systray_items/edit_website.js
@@ -0,0 +1,14 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+
+const { Component } = owl;
+
+class EditWebsiteSystray extends Component {}
+EditWebsiteSystray.template = "website.EditWebsiteSystray";
+
+export const systrayItem = {
+    Component: EditWebsiteSystray,
+};
+
+registry.category("website_systray").add("EditWebsite", systrayItem, { sequence: 9 });
diff --git a/addons/website/static/src/systray_items/edit_website.scss b/addons/website/static/src/systray_items/edit_website.scss
new file mode 100644
index 00000000000..eb513114021
--- /dev/null
+++ b/addons/website/static/src/systray_items/edit_website.scss
@@ -0,0 +1,3 @@
+.o_edit_website_container {
+    @include button-variant($o-brand-primary, $o-brand-primary);
+}
diff --git a/addons/website/static/src/systray_items/edit_website.xml b/addons/website/static/src/systray_items/edit_website.xml
new file mode 100644
index 00000000000..f7d8e1612cd
--- /dev/null
+++ b/addons/website/static/src/systray_items/edit_website.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+<t t-name="website.EditWebsiteSystray" owl="1">
+    <div class="o_menu_systray_item o_edit_website_container">
+        <a href="#" accesskey="a"><span class="fa fa-pencil mr-2"/>Edit</a>
+    </div>
+</t>
+</templates>

From f9d2b7a01f211b3f1c88d8d6afd9d50e71154278 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Mon, 3 Jan 2022 17:57:18 +0100
Subject: [PATCH 12/88] [IMP] website: add website switcher systray item

Courtesy of ARD.

See merge commit for more information.

task-2687506
---
 .../static/src/js/content/website_root.js     | 15 --------
 .../static/src/services/website_service.js    | 15 ++++++--
 .../src/systray_items/website_switcher.js     | 35 +++++++++++++++++++
 .../src/systray_items/website_switcher.xml    | 16 +++++++++
 .../views/website_navbar_templates.xml        | 22 ------------
 5 files changed, 64 insertions(+), 39 deletions(-)
 create mode 100644 addons/website/static/src/systray_items/website_switcher.js
 create mode 100644 addons/website/static/src/systray_items/website_switcher.xml

diff --git a/addons/website/static/src/js/content/website_root.js b/addons/website/static/src/js/content/website_root.js
index 0f90fcfb87e..4d51544d21f 100644
--- a/addons/website/static/src/js/content/website_root.js
+++ b/addons/website/static/src/js/content/website_root.js
@@ -14,7 +14,6 @@ export const WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMi
     events: _.extend({}, KeyboardNavigationMixin.events, publicRootData.PublicRoot.prototype.events || {}, {
         'click .js_change_lang': '_onLangChangeClick',
         'click .js_publish_management .js_publish_btn': '_onPublishBtnClick',
-        'click .js_multi_website_switch': '_onWebsiteSwitch',
         'shown.bs.modal': '_onModalShown',
     }),
     custom_events: _.extend({}, publicRootData.PublicRoot.prototype.custom_events || {}, {
@@ -311,20 +310,6 @@ export const WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMi
             $data.parents("[data-publish]").attr("data-publish", +result ? 'on' : 'off');
         });
     },
-    /**
-     * @private
-     * @param {Event} ev
-     */
-    _onWebsiteSwitch: function (ev) {
-        var websiteId = ev.currentTarget.getAttribute('website-id');
-        var websiteDomain = ev.currentTarget.getAttribute('domain');
-        let url = `/website/force/${websiteId}`;
-        if (websiteDomain && window.location.hostname !== websiteDomain) {
-            url = websiteDomain + url;
-        }
-        const path = window.location.pathname + window.location.search + window.location.hash;
-        window.location.href = $.param.querystring(url, {'path': path});
-    },
     /**
      * @private
      * @param {Event} ev
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 6b5d18da657..4bd8d15a2b1 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -16,8 +16,8 @@ const unslugHtmlDataObject = (repr) => {
 };
 
 export const websiteService = {
-    dependencies: ['orm'],
-    async start(env, { orm }) {
+    dependencies: ['orm', 'action'],
+    async start(env, { orm, action }) {
         let websites = [];
         let currentWebsiteId;
 
@@ -35,6 +35,17 @@ export const websiteService = {
             get websites() {
                 return websites;
             },
+            goToWebsite({ websiteId = currentWebsiteId || websites[0].id, path = '/' }) {
+                action.doAction('website.website_preview', {
+                    clearBreadcrumbs: true,
+                    additionalContext: {
+                        params: {
+                            website_id: websiteId,
+                            path,
+                        },
+                    },
+                });
+            },
             async fetchWebsites() {
                 const [currentWebsiteRepr, allWebsites] = await Promise.all([
                     orm.call('website', 'get_current_website'),
diff --git a/addons/website/static/src/systray_items/website_switcher.js b/addons/website/static/src/systray_items/website_switcher.js
new file mode 100644
index 00000000000..87137c81e1f
--- /dev/null
+++ b/addons/website/static/src/systray_items/website_switcher.js
@@ -0,0 +1,35 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+
+const { Component } = owl;
+
+export class WebsiteSwitcherSystray extends Component {
+    setup() {
+        this.websiteService = useService('website');
+    }
+
+    getElements() {
+        return this.websiteService.websites.map((website) => ({
+            name: website.name,
+            id: website.id,
+            callback: () => {
+                this.websiteService.goToWebsite({ websiteId: website.id });
+            },
+        }));
+    }
+}
+WebsiteSwitcherSystray.template = "website.WebsiteSwitcherSystray";
+WebsiteSwitcherSystray.components = {
+    Dropdown,
+    DropdownItem,
+};
+
+export const systrayItem = {
+    Component: WebsiteSwitcherSystray,
+};
+
+registry.category("website_systray").add("WebsiteSwitcher", systrayItem, { sequence: 11 });
diff --git a/addons/website/static/src/systray_items/website_switcher.xml b/addons/website/static/src/systray_items/website_switcher.xml
new file mode 100644
index 00000000000..ab3cf6b093c
--- /dev/null
+++ b/addons/website/static/src/systray_items/website_switcher.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+<t t-name="website.WebsiteSwitcherSystray" owl="1">
+    <Dropdown class="'o_menu_systray_item o_website_switcher_container'" hotkey="'w'">
+        <t t-set-slot="toggler">
+            <span><t t-esc="websiteService.currentWebsite.name"/><i class="fa fa-caret-down ml-2"/></span>
+        </t>
+        <t t-foreach="getElements()" t-as="element" t-key="element_index">
+            <DropdownItem
+                t-esc="element.name"
+                onSelected="element.callback"
+            />
+        </t>
+    </Dropdown>
+</t>
+</templates>
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index f825184a9bf..8e019623e76 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -84,28 +84,6 @@
                     <div class="o_mobile_preview o_menu_systray_item" id="mobile-menu">
                         <a data-action="show-mobile-preview" href="#" accesskey="v"><span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-lg fa-mobile"/></a>
                     </div>
-                    <div groups="website.group_multi_website" t-if="multi_website_websites" id="website_switcher" class="o_menu_systray_item">
-                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" accesskey="w">
-                            <i class="fa fa-globe d-lg-none"/>
-                            <span class="d-none d-lg-inline-block">
-                                <t t-esc="multi_website_websites_current"/>
-                            </span>
-                        </a>
-                        <div class="dropdown-menu" role="menu">
-                            <div class="d-lg-none dropdown-item active">
-                                <span t-esc="multi_website_websites_current"/>
-                            </div>
-                            <t t-foreach="multi_website_websites" t-as="multi_website_website">
-                                <a role="menuitem" href="#"
-                                    t-att-domain="multi_website_website['domain']"
-                                    class="dropdown-item oe_menu_text js_multi_website_switch"
-                                    t-att-website-id="str(multi_website_website['website_id'])"
-                                >
-                                    <span t-esc="multi_website_website['name']" />
-                                </a>
-                            </t>
-                        </div>
-                    </div>
 
                     <!-- Page Edition -->
                     <div class="o_new_content_menu o_menu_systray_item" id="new-content-menu">

From ca2e143d54622d598201826a2cd669bad64b205d Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Mon, 3 Jan 2022 17:56:36 +0100
Subject: [PATCH 13/88] [IMP] website, *: add new content systray item

*: website_blog, website_event, website_forum, website_hr_recruitment,
   website_livechat, website_sale, website_slides

The NewContentModal component is added. It displays tiles, which will
install a module if not already installed, or perform an action defined
by the module otherwise. So that modules can patch that component to
define an action when installed (for example, website_sale will handle
the logic of creating a new product), the elements to displayed and
their state (NOT_INSTALLED, INSTALLING, INSTALLED) are listed in the
state of the component.

A key 'isDisplayed' is added on the new content elements that should not
be displayed to the user, depended on his security groups.
By default, the new content elements are displayed to the system user.

See merge commit for more information.

task-2687506
---
 addons/website/__manifest__.py                |   1 -
 addons/website/controllers/main.py            |  10 +
 .../website_preview/website_preview.js        |   5 +
 .../static/src/components/navbar/navbar.js    |   1 -
 .../website/static/src/scss/website.ui.scss   |  77 ---
 .../static/src/services/website_service.js    |  18 +-
 .../static/src/systray_items/new_content.js   | 532 +++++++-----------
 .../static/src/systray_items/new_content.scss |  80 +++
 .../static/src/systray_items/new_content.xml  |  44 ++
 addons/website_blog/__manifest__.py           |   3 +
 .../src/js/systray_items/new_content.js       |  63 +--
 addons/website_event/__manifest__.py          |   3 +
 .../src/js/systray_items/new_content.js       | 281 +--------
 addons/website_forum/__manifest__.py          |   3 +
 .../src/js/systray_items/new_content.js       | 150 +----
 addons/website_hr_recruitment/__manifest__.py |   3 +
 .../src/js/systray_items/new_content.js       |  16 +
 addons/website_livechat/__manifest__.py       |   1 +
 .../src/js/systray_items/new_content.js       |  50 +-
 addons/website_sale/__manifest__.py           |   1 +
 .../src/js/systray_items/new_content.js       |  16 +
 addons/website_slides/__manifest__.py         |   1 +
 .../src/js/systray_items/new_content.js       | 187 +-----
 23 files changed, 446 insertions(+), 1100 deletions(-)
 create mode 100644 addons/website/static/src/systray_items/new_content.scss
 create mode 100644 addons/website/static/src/systray_items/new_content.xml
 create mode 100644 addons/website_hr_recruitment/static/src/js/systray_items/new_content.js
 create mode 100644 addons/website_sale/static/src/js/systray_items/new_content.js

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index d94645bfde4..118ce911c2e 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -235,7 +235,6 @@
             'website/static/src/js/menu/debug_menu.js',
             'website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js',
             'website/static/src/systray_items/mobile_preview.js',
-            'website/static/src/systray_items/new_content.js',
             'website/static/src/components/dialog/seo.js',
             'website/static/src/systray_items/translate_website.js',
             'website/static/src/js/set_view_track.js',
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index 0a76e721883..deb5eff4006 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -303,6 +303,16 @@ class Website(Home):
             ]
         }
 
+    @http.route('/website/get_modules_info', type='json', auth="user")
+    def get_modules_info(self, xml_ids):
+        def get_module_info(xml_id):
+            module_info = request.env.ref(xml_id)
+            return {'id': module_info.id, 'name': module_info.shortdesc}
+        modules_info = {}
+        for xml_id in xml_ids:
+            modules_info[xml_id] = get_module_info(xml_id)
+        return modules_info
+
     @http.route('/website/snippet/filters', type='json', auth='public', website=True)
     def get_dynamic_filter(self, filter_id, template_key, limit=None, search_domain=None, with_sample=False):
         dynamic_filter = request.env['website.snippet.filter'].sudo().search(
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index c5716b08dfb..1c8f8762a85 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -22,6 +22,7 @@ export class WebsitePreview extends Component {
 
         useEffect(() => {
             this.websiteService.currentWebsiteId = this.websiteId;
+            this.websiteService.context.showNewContentModal = this.props.action.context.params && this.props.action.context.params.display_new_content;
             return () => this.websiteService.currentWebsiteId = null;
         }, () => [this.props.action.context.params]);
     }
@@ -83,6 +84,10 @@ export class WebsitePreview extends Component {
         this.currentUrl = this.iframe.el.contentDocument.location.href;
         history.replaceState({}, this.props.action.display_name, this.currentUrl);
 
+        this.websiteService.currentMetadata = {
+            path: this.currentUrl,
+        };
+
         // Before leaving the iframe, its content is replicated on an
         // underlying iframe, to avoid for white flashes (visible on
         // Chrome Windows/Linux).
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
index f70cddd517a..05c9e6baf3b 100644
--- a/addons/website/static/src/components/navbar/navbar.js
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -3,7 +3,6 @@
 import { NavBar } from '@web/webclient/navbar/navbar';
 import { useService, useBus } from '@web/core/utils/hooks';
 import { registry } from "@web/core/registry";
-
 import { patch } from 'web.utils';
 
 const websiteSystrayRegistry = registry.category('website_systray');
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 5b8cc3cd9c1..e73fa3a9cb5 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -471,83 +471,6 @@ body .modal {
     }
 }
 
-// ADD NEW PAGE MODAL
-
-.o_new_content_open {
-    // Kill the scroll on the body
-    overflow: hidden;
-}
-
-#o_new_content_menu_choices {
-    @include o-w-preserve-base;
-    @include o-position-absolute($o-navbar-height, 0, 0, 0);
-    position: fixed;
-    display: flex;
-    overflow: auto;
-    background-color: rgba(0, 0, 0, 0.8);
-    font-family: $o-we-font-family;
-
-    &::before {
-        content: " ";
-        @include o-position-absolute(0, 0, 0, 0);
-        z-index: -1;
-        pointer-events: none;
-    }
-
-    .container {
-        max-width: 720px;
-        margin: auto;
-    }
-
-    .o_new_content_element {
-        opacity: 0;
-        animation: fadeInDownSmall 1s forwards;
-
-        .o_uninstalled_module {
-            filter: brightness(70%) contrast(60%);
-
-        }
-
-        .module_icon {
-            display: block;
-            margin: auto;
-        }
-
-        a {
-            display: block;
-            font-size: 34px;
-            text-align: center;
-            text-decoration: none;
-
-            i {
-                width: 110px;
-                height: 110px;
-                border: 3px solid lighten(#2C2C36, 10%);
-                border-radius: 100%;
-                line-height: 104px;
-                background-color: #2C2C36;
-                color: white;
-
-                transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-            }
-            p {
-                color: white;
-                margin-top: 0.7em;
-                font-size: 0.5em;
-            }
-
-            &:hover, &:focus {
-                text-decoration: none;
-                outline: none; // remove ugly dotted border on Firefox
-                i {
-                    border-color: #1cc1a9;
-                    box-shadow: 0 0 10px rgba(28, 193, 169, 0.46);
-                }
-            }
-        }
-    }
-}
-
 // LOGIN FORM
 .oe_login_form, .oe_signup_form, .oe_reset_password_form {
     max-width: 300px;
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 4bd8d15a2b1..0b6a1d95fcf 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -2,6 +2,8 @@
 
 import { registry } from '@web/core/registry';
 
+const { reactive } = owl;
+
 const websiteSystrayRegistry = registry.category('website_systray');
 
 const unslugHtmlDataObject = (repr) => {
@@ -20,6 +22,10 @@ export const websiteService = {
     async start(env, { orm, action }) {
         let websites = [];
         let currentWebsiteId;
+        let currentMetadata = {};
+        const context = reactive({
+            showNewContentModal: false,
+        });
 
         const setCurrentWebsiteId = id => {
             currentWebsiteId = id;
@@ -29,12 +35,22 @@ export const websiteService = {
             set currentWebsiteId(id) {
                 setCurrentWebsiteId(id);
             },
+            set currentMetadata(metadata) {
+                currentMetadata = metadata;
+            },
             get currentWebsite() {
-                return websites.find(website => website.id === currentWebsiteId);
+                const currentWebsite = websites.find(w => w.id === currentWebsiteId);
+                if (currentWebsite) {
+                    currentWebsite.metadata = currentMetadata;
+                }
+                return currentWebsite;
             },
             get websites() {
                 return websites;
             },
+            get context() {
+                return context;
+            },
             goToWebsite({ websiteId = currentWebsiteId || websites[0].id, path = '/' }) {
                 action.doAction('website.website_preview', {
                     clearBreadcrumbs: true,
diff --git a/addons/website/static/src/systray_items/new_content.js b/addons/website/static/src/systray_items/new_content.js
index 1eac6393be9..52fafd2dd92 100644
--- a/addons/website/static/src/systray_items/new_content.js
+++ b/addons/website/static/src/systray_items/new_content.js
@@ -1,354 +1,204 @@
-odoo.define('website.newMenu', function (require) {
-'use strict';
+/** @odoo-module **/
 
-var core = require('web.core');
-var Dialog = require('web.Dialog');
-var websiteNavbarData = require('website.navbar');
-var wUtils = require('website.utils');
-var tour = require('web_tour.tour');
+import { registry } from '@web/core/registry';
+import { useService } from '@web/core/utils/hooks';
+import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
 
-const { registry } = require("@web/core/registry");
+const { Component, xml, useState, onWillStart } = owl;
 
-const {qweb, _t} = core;
+export const MODULE_STATUS = {
+    NOT_INSTALLED: 'NOT_INSTALLED',
+    INSTALLING: 'INSTALLING',
+    FAILED_TO_INSTALL: 'FAILED_TO_INSTALL',
+    INSTALLED: 'INSTALLED',
+};
 
-var enableFlag = 'enable_new_content';
+class NewContentElement extends Component {
+    setup() {
+        this.MODULE_STATUS = MODULE_STATUS;
+    }
 
-var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
-    xmlDependencies: ['/website/static/src/xml/website.editor.xml'],
-    actions: _.extend({}, websiteNavbarData.WebsiteNavbarActionWidget.prototype.actions || {}, {
-        close_all_widgets: '_handleCloseDemand',
-        new_page: '_createNewPage',
-    }),
-    events: _.extend({}, websiteNavbarData.WebsiteNavbarActionWidget.prototype.events || {}, {
-        'click': '_onBackgroundClick',
-        'click [data-module-id]': '_onModuleIdClick',
-        'keydown': '_onBackgroundKeydown',
-    }),
-    // allow text to be customized with inheritance
-    newContentText: {
-        failed: _t('Failed to install "%s"'),
-        installInProgress: _t("The installation of an App is already in progress."),
-        installNeeded: _t('Do you want to install the "%s" App?'),
-        installPleaseWait: _t('Installing "%s"'),
-    },
-
-    /**
-     * Prepare the navigation and find the modules to install.
-     * Move not installed module buttons after installed modules buttons,
-     * but keep the original index to be able to move back the pending install
-     * button at its final position, so the user can click at the same place.
-     *
-     * @override
-     */
-    start: function () {
-        this.pendingInstall = false;
-        this.$newContentMenuChoices = this.$('#o_new_content_menu_choices');
-
-        var $modules = this.$newContentMenuChoices.find('.o_new_content_element');
-        _.each($modules, function (el, index) {
-            var $el = $(el);
-            $el.data('original-index', index);
-            if ($el.data('module-id')) {
-                $el.appendTo($el.parent());
-                $el.find('a i, a p').addClass('o_uninstalled_module');
-            }
-        });
-
-        this.$firstLink = this.$newContentMenuChoices.find('a:eq(0)');
-        this.$lastLink = this.$newContentMenuChoices.find('a:last');
-
-        if ($.deparam.querystring()[enableFlag] !== undefined) {
-            Object.keys(tour.tours).forEach(
-                el => {
-                    let element = tour.tours[el];
-                    if (element.steps[0].trigger == '#new-content-menu > a'
-                        && !element.steps[0].extra_trigger) {
-                        element.steps[0].auto = true;
-                    }
-                }
-            );
-            this._showMenu();
-        }
-        this.$loader = $(qweb.render('website.new_content_loader'));
-        return this._super.apply(this, arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Actions
-    //--------------------------------------------------------------------------
-
-    /**
-     * Asks the user information about a new page to create, then creates it and
-     * redirects the user to this new page.
-     *
-     * @private
-     * @returns {Promise} Unresolved if there is a redirection
-     */
-    _createNewPage: function () {
-        return wUtils.prompt({
-            id: 'editor_new_page',
-            window_title: _t("New Page"),
-            input: _t("Page Title"),
-            init: function () {
-                var $group = this.$dialog.find('div.form-group');
-                $group.removeClass('mb0');
-
-                var $add = $('<div/>', {'class': 'form-group mb0 row'})
-                            .append($('<span/>', {'class': 'offset-md-3 col-md-9 text-left'})
-                                    .append(qweb.render('website.components.switch', {id: 'switch_addTo_menu', label: _t("Add to menu")})));
-                $add.find('input').prop('checked', true);
-                $group.after($add);
-            }
-        }).then(function (result) {
-            var val = result.val;
-            var $dialog = result.dialog;
-            if (!val) {
-                return;
-            }
-            var url = '/website/add/' + encodeURIComponent(val);
-            wUtils.sendRequest(url, {
-                add_menu: $dialog.find('input[type="checkbox"]').is(':checked') || '',
-            });
-            return new Promise(function () {});
-        });
-    },
-    /**
-     * @private
-     */
-    _handleCloseDemand: function () {
-        this._hideMenu();
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Set the focus on the first link
-     *
-     * @private
-     */
-    _focusFirstLink: function () {
-        this.$firstLink.focus();
-    },
-    /**
-     * Set the focus on the last link
-     *
-     * @private
-     */
-    _focusLastLink: function () {
-        this.$lastLink.focus();
-    },
-    /**
-     * Hide the menu
-     *
-     * @private
-     */
-    _hideMenu: function () {
-        this.shown = false;
-        this.$newContentMenuChoices.addClass('o_hidden');
-        $('body').removeClass('o_new_content_open');
-    },
-    /**
-     * Install a module
-     *
-     * @private
-     * @param {number} moduleId: the module to install
-     * @return {Promise}
-     */
-    _install: function (moduleId) {
-        this.pendingInstall = true;
-        $('body').css('pointer-events', 'none');
-        return this._rpc({
-            model: 'ir.module.module',
-            method: 'button_immediate_install',
-            args: [[moduleId]],
-        }).guardedCatch(function () {
-            $('body').css('pointer-events', '');
-        });
-    },
-    /**
-     * Show the menu
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _showMenu: function () {
-        var self = this;
-        return new Promise(function (resolve, reject) {
-            self.trigger_up('action_demand', {
-                actionName: 'close_all_widgets',
-                onSuccess: resolve,
-                onFailure: reject,
-            });
-        }).then(function () {
-            self.firstTab = true;
-            self.shown = true;
-            self.$newContentMenuChoices.removeClass('o_hidden');
-            $('body').addClass('o_new_content_open');
-            self.$('> a').focus();
-        });
-    },
-    /**
-     * Called to add loader element in DOM.
-     *
-     * @param {string} moduleName
-     * @private
-     */
-    _addLoader(moduleName) {
-        const newContentLoaderText = _.str.sprintf(_t("Building your %s"), moduleName);
-        this.$loader.find('#new_content_loader_text').replaceWith(newContentLoaderText);
-        $('body').append(this.$loader);
-    },
-    /**
-     * @private
-     */
-    _removeLoader() {
-        this.$loader.remove();
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Called when the menu's toggle button is clicked:
-     *  -> Opens the menu and reset the tab navigation (if closed)
-     *  -> Close the menu (if open)
-     * Called when a click outside the menu's options occurs -> Close the menu
-     *
-     * @private
-     * @param {Event} ev
-     */
-    _onBackgroundClick: function (ev) {
-        if (this.$newContentMenuChoices.hasClass('o_hidden')) {
-            this._showMenu();
-        } else {
-            this._hideMenu();
-        }
-    },
-    /**
-     * Called when a keydown occurs:
-     *  ESC -> Closes the modal
-     *  TAB -> Navigation (captured in the modal)
-     *
-     * @private
-     * @param {Event} ev
-     */
-    _onBackgroundKeydown: function (ev) {
-        if (!this.shown) {
-            return;
-        }
-        switch (ev.which) {
-            case $.ui.keyCode.ESCAPE:
-                this._hideMenu();
-                ev.stopPropagation();
-                break;
-            case $.ui.keyCode.TAB:
-                if (ev.shiftKey) {
-                    if (this.firstTab || document.activeElement === this.$firstLink[0]) {
-                        this._focusLastLink();
-                        ev.preventDefault();
-                    }
-                } else {
-                    if (this.firstTab || document.activeElement === this.$lastLink[0]) {
-                        this._focusFirstLink();
-                        ev.preventDefault();
-                    }
-                }
-                this.firstTab = false;
-                break;
-        }
-    },
-    /**
-     * Open the install dialog related to an element:
-     *  - open the dialog depending on access right and another pending install
-     *  - if ok to install, prepare the install action:
-     *      - call the proper action on click
-     *      - change the button text and style
-     *      - handle the result (reload on the same page or error)
-     *
-     * @private
-     * @param {Event} ev
-     */
-    _onModuleIdClick: function (ev) {
-        var self = this;
-        var $el = $(ev.currentTarget);
-        var $i = $el.find('a i');
-        var $p = $el.find('a p');
-
-        var title = $p.text();
-        var content = '';
-        var buttons;
-
-        var moduleId = $el.data('module-id');
-        var name = $el.data('module-shortdesc');
-
-        ev.stopPropagation();
+    onClick(ev) {
         ev.preventDefault();
+        ev.stopPropagation();
+        this.props.onClick();
+    }
+}
+NewContentElement.template = "website.NewContentElement";
+NewContentElement.props = {
+    name: { type: String, optional: true },
+    title: String,
+    onClick: Function,
+    status: { type: String, optional: true },
+    slots: Object,
+};
+NewContentElement.defaultProps = {
+    status: MODULE_STATUS.INSTALLED,
+};
 
-        if (this.pendingInstall) {
-            content = this.newContentText.installInProgress;
+export class NewContentModal extends Component {
+    setup() {
+        this.user = useService('user');
+        this.orm = useService('orm');
+        this.rpc = useService('rpc');
+        this.dialogs = useService('dialog');
+        this.website = useService('website');
+        this.isSystem = this.user.isSystem;
+
+        this.newContentText = {
+            failed: this.env._t('Failed to install "%s"'),
+            installInProgress: this.env._t("The installation of an App is already in progress."),
+            installNeeded: this.env._t('Do you want to install the "%s" App?'),
+            installPleaseWait: this.env._t('Installing "%s"'),
+        };
+
+        this.state = useState({
+            newContentElements: [
+                {
+                    moduleXmlId: 'base.module_website_blog',
+                    status: MODULE_STATUS.NOT_INSTALLED,
+                    icon: xml`<i class="fa fa-rss"/>`,
+                    title: this.env._t('Blog Post'),
+                },
+                {
+                    moduleXmlId: 'base.module_website_event',
+                    status: MODULE_STATUS.NOT_INSTALLED,
+                    icon: xml`<i class="fa fa-ticket"/>`,
+                    title: this.env._t('Event'),
+                },
+                {
+                    moduleXmlId: 'base.module_website_forum',
+                    status: MODULE_STATUS.NOT_INSTALLED,
+                    icon: xml`<i class="fa fa-comment"/>`,
+                    redirectUrl: '/forum',
+                    title: this.env._t('Forum'),
+                },
+                {
+                    moduleXmlId: 'base.module_website_hr_recruitment',
+                    status: MODULE_STATUS.NOT_INSTALLED,
+                    icon: xml`<i class="fa fa-briefcase"/>`,
+                    title: this.env._t('Job Offer'),
+                },
+                {
+                    moduleXmlId: 'base.module_website_sale',
+                    status: MODULE_STATUS.NOT_INSTALLED,
+                    icon: xml`<i class="fa fa-shopping-cart"/>`,
+                    title: this.env._t('Product'),
+                },
+                {
+                    moduleXmlId: 'base.module_website_slides',
+                    status: MODULE_STATUS.NOT_INSTALLED,
+                    icon: xml`<i class="fa module_icon" style="background-image: url('/website/static/src/img/apps_thumbs/website_slide.svg');background-repeat: no-repeat; background-position: center;"/>`,
+                    title: this.env._t('Course'),
+                },
+                {
+                    moduleXmlId: 'base.module_website_livechat',
+                    status: MODULE_STATUS.NOT_INSTALLED,
+                    icon: xml`<i class="fa fa-comments"/>`,
+                    title: this.env._t('Livechat Widget'),
+                    redirectUrl: '/livechat'
+                },
+            ]
+        });
+
+        this.websiteContext = useState(this.website.context);
+
+        onWillStart(async () => {
+            this.isDesigner = await this.user.hasGroup('website.group_website_designer');
+
+            const xmlIds = this.state.newContentElements.filter(({status}) => status === MODULE_STATUS.NOT_INSTALLED).map(({moduleXmlId}) => moduleXmlId);
+
+            this.modulesInfo = await this.rpc('/website/get_modules_info', {xml_ids: xmlIds});
+        });
+
+        useHotkey('escape', () => {
+            if (this.websiteContext.showNewContentModal) {
+                this.websiteContext.showNewContentModal = false;
+            }
+        });
+    }
+
+    get sortedNewContentElements() {
+        return this.state.newContentElements.filter(({status}) => status !== MODULE_STATUS.NOT_INSTALLED).concat(this.state.newContentElements.filter(({status}) => status === MODULE_STATUS.NOT_INSTALLED));
+    }
+
+    createNewPage() {}
+
+    async installModule(id, redirectUrl) {
+        await this.orm.call(
+            'ir.module.module',
+            'button_immediate_install',
+            [id],
+        );
+        if (redirectUrl) {
+            window.location.replace(redirectUrl);
         } else {
-            content = _.str.sprintf(this.newContentText.installNeeded, name);
-            buttons = [{
-                text: _t("Install"),
-                classes: 'btn-primary',
-                close: true,
-                click: function () {
-                    // move the element where it will be after installation
-                    var $finalPosition = self.$newContentMenuChoices
-                        .find('.o_new_content_element:not([data-module-id])')
-                        .filter(function () {
-                            return $(this).data('original-index') < $el.data('original-index');
-                        }).last();
-                    if ($finalPosition) {
-                        $el.fadeTo(400, 0, function () {
-                            // if once installed, button disapeear, don't need to move it.
-                            if (!$el.hasClass('o_new_content_element_once')) {
-                                $el.insertAfter($finalPosition);
-                            }
-                            // change style to use spinner
-                            $i.removeClass()
-                                .addClass('fa fa-spin fa-circle-o-notch fa-spin')
-                                .css('background-image', 'none');
-                            $p.removeClass('o_uninstalled_module')
-                                .text(_.str.sprintf(self.newContentText.installPleaseWait, name));
-                            $el.fadeTo(1000, 1);
-                            self._addLoader(name);
-                        });
-                    }
+            const { id, metadata: { path } } = this.website.currentWebsite;
+            // A reload is needed after installing a new module, to instantiate
+            // a NewContentModal with patches from the installed module.
+            window.location.replace(`/web#action=website.website_preview&website_id=${id}&path=${encodeURIComponent(path)}&display_new_content=true`);
+        }
+    }
 
-                    self._install(moduleId).then(function () {
-                        var origin = window.location.origin;
-                        var redirectURL = $el.find('a').data('url') || (window.location.pathname + '?' + enableFlag);
-                        window.location.href = origin + redirectURL;
-                        self._removeLoader();
-                    }, function () {
-                        $i.removeClass()
-                            .addClass('fa fa-exclamation-triangle');
-                        $p.text(_.str.sprintf(self.newContentText.failed, name));
-                    });
-                }
-            }, {
-                text: _t("Cancel"),
-                close: true,
-            }];
+    onClickNewContent(element) {
+        if (element.createNewContent) {
+            return element.createNewContent();
         }
 
-        new Dialog(this, {
-            title: title,
-            size: 'medium',
-            $content: $('<div/>', {text: content}),
-            buttons: buttons
-        }).open();
-    },
-});
+        const {id, name} = this.modulesInfo[element.moduleXmlId];
+        const dialogProps = {
+            title: this.env._t("Install"),
+            body: _.str.sprintf(this.newContentText.installNeeded, name),
+            confirm: async () => {
+                // Update the NewContentElement with installing icon and text.
+                this.state.newContentElements = this.state.newContentElements.map(el => {
+                    if (el.moduleXmlId === element.moduleXmlId) {
+                        el.status = MODULE_STATUS.INSTALLING;
+                        el.icon = xml`<i class="fa fa-spin fa-circle-o-notch"/>`;
+                        el.title = _.str.sprintf(this.newContentText.installPleaseWait, name);
+                    }
+                    return el;
+                });
+                try {
+                    await this.installModule(id, element.redirectUrl);
+                } catch (error) {
+                    // Update the NewContentElement with failure icon and text.
+                    this.state.newContentElements = this.state.newContentElements.map(el => {
+                        if (el.moduleXmlId === element.moduleXmlId) {
+                            el.status = MODULE_STATUS.FAILED_TO_INSTALL;
+                            el.icon = xml`<i class="fa fa-exclamation-triangle"/>`;
+                            el.title = _.str.sprintf(this.newContentText.failed, name);
+                        }
+                        return el;
+                    });
+                    console.error(error);
+                }
+            },
+            cancel: () => {},
+        };
+        this.dialogs.add(ConfirmationDialog, dialogProps);
+    }
+}
+NewContentModal.template = "website.NewContentModal";
+NewContentModal.components = { NewContentElement };
 
-registry.category("website_navbar_widgets").add("NewContentMenu", {
-    Widget: NewContentMenu,
-    selector: '.o_new_content_menu',
-});
+class NewContentSystray extends Component {
+    setup() {
+        this.rpc = useService('rpc');
+        this.website = useService('website');
+        this.websiteContext = useState(this.website.context);
+    }
 
-return NewContentMenu;
-});
+    onClick() {
+        this.websiteContext.showNewContentModal = !this.websiteContext.showNewContentModal;
+    }
+}
+NewContentSystray.template = "website.NewContentSystray";
+NewContentSystray.components = { NewContentModal };
+
+export const systrayItem = {
+    Component: NewContentSystray,
+};
+
+registry.category("website_systray").add("NewContent", systrayItem, { sequence: 10 });
diff --git a/addons/website/static/src/systray_items/new_content.scss b/addons/website/static/src/systray_items/new_content.scss
new file mode 100644
index 00000000000..5153ce089e6
--- /dev/null
+++ b/addons/website/static/src/systray_items/new_content.scss
@@ -0,0 +1,80 @@
+@keyframes fadeInDownSmall {
+    0% {
+        opacity: 0;
+        transform: translate(0, -5px);
+    }
+    100% {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
+}
+
+#o_new_content_menu_choices {
+    @include o-position-absolute(0, 0, 0, 0);
+    position: fixed;
+    display: flex;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.8);
+    font-family: $o-we-font-family;
+    z-index: $zindex-fixed - 1;
+
+    &::before {
+        content: " ";
+        @include o-position-absolute(0, 0, 0, 0);
+        z-index: -1;
+        pointer-events: none;
+    }
+
+    .container {
+        max-width: 720px;
+        margin: auto;
+    }
+
+    .o_new_content_element {
+        opacity: 0;
+        animation: fadeInDownSmall 1s forwards;
+
+        .o_uninstalled_module {
+            filter: brightness(70%) contrast(60%);
+
+        }
+
+        .module_icon {
+            display: block;
+            margin: auto;
+        }
+
+        a {
+            display: block;
+            font-size: 34px;
+            text-align: center;
+            text-decoration: none;
+
+            i {
+                width: 110px;
+                height: 110px;
+                border: 3px solid lighten(#2C2C36, 10%);
+                border-radius: 100%;
+                line-height: 104px;
+                background-color: #2C2C36;
+                color: white;
+
+                transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
+            }
+            p {
+                color: white;
+                margin-top: 0.7em;
+                font-size: 0.5em;
+            }
+
+            &:hover, &:focus {
+                text-decoration: none;
+                outline: none; // remove ugly dotted border on Firefox
+                i {
+                    border-color: #1cc1a9;
+                    box-shadow: 0 0 10px rgba(28, 193, 169, 0.46);
+                }
+            }
+        }
+    }
+}
diff --git a/addons/website/static/src/systray_items/new_content.xml b/addons/website/static/src/systray_items/new_content.xml
new file mode 100644
index 00000000000..19ae618fa10
--- /dev/null
+++ b/addons/website/static/src/systray_items/new_content.xml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+<t t-name="website.NewContentElement" owl="1">
+    <div class="o_new_content_element col-md-4 mb8" t-att-name="props.name">
+        <a href="#"
+                t-on-click="onClick"
+                t-att-class="props.status === MODULE_STATUS.NOT_INSTALLED ? 'o_uninstalled_module' : ''"
+                t-att-title="props.title"
+                t-att-aria-label="props.title">
+            <t t-slot="default"/>
+        </a>
+    </div>
+</t>
+
+<t t-name="website.NewContentModal" owl="1">
+    <div id="o_new_content_menu_choices">
+        <div class="container pt32 pb32">
+            <div class="row">
+                <NewContentElement t-if="isDesigner"
+                        name="'New Page'"
+                        onClick="() => createNewPage()"
+                        title="'New Page'">
+                    <i class="fa fa-file-o"/>
+                    <p>Page</p>
+                </NewContentElement>
+
+                <t t-foreach="sortedNewContentElements" t-as="element" t-key="element.moduleXmlId" t-if="'isDisplayed' in element ? element.isDisplayed : isSystem ">
+                    <NewContentElement onClick="() => this.onClickNewContent(element)" status="element.status" title="element.title">
+                        <t t-call="{{ element.icon }}"/>
+                        <p><t t-esc="element.title"/></p>
+                    </NewContentElement>
+                </t>
+            </div>
+        </div>
+    </div>
+</t>
+
+<t t-name="website.NewContentSystray" owl="1">
+    <div class="o_menu_systray_item o_new_content_container" t-on-click="onClick">
+        <a href="#" accesskey="c"><span class="fa fa-plus mr-2"/>New</a>
+        <NewContentModal t-if="websiteContext.showNewContentModal"/>
+    </div>
+</t>
+</templates>
diff --git a/addons/website_blog/__manifest__.py b/addons/website_blog/__manifest__.py
index 3db7e32d2a3..a050761700d 100644
--- a/addons/website_blog/__manifest__.py
+++ b/addons/website_blog/__manifest__.py
@@ -43,6 +43,9 @@
             'website_blog/static/src/js/contentshare.js',
             'website_blog/static/src/js/website_blog.js',
         ],
+        'web.assets_backend': [
+            'website_blog/static/src/js/systray_items/new_content.js',
+        ],
     },
     'license': 'LGPL-3',
 }
diff --git a/addons/website_blog/static/src/js/systray_items/new_content.js b/addons/website_blog/static/src/js/systray_items/new_content.js
index 7cc9aa09f33..a9c015f3522 100644
--- a/addons/website_blog/static/src/js/systray_items/new_content.js
+++ b/addons/website_blog/static/src/js/systray_items/new_content.js
@@ -1,57 +1,16 @@
-odoo.define('website_blog.new_blog_post', function (require) {
-'use strict';
+/** @odoo-module **/
 
-var core = require('web.core');
-var wUtils = require('website.utils');
-var WebsiteNewMenu = require('website.newMenu');
+import { NewContentModal, MODULE_STATUS } from '@website/systray_items/new_content';
+import { patch } from 'web.utils';
 
-var _t = core._t;
+patch(NewContentModal.prototype, 'website_blog_new_content', {
+    setup() {
+        this._super();
 
-WebsiteNewMenu.include({
-    actions: _.extend({}, WebsiteNewMenu.prototype.actions || {}, {
-        new_blog_post: '_createNewBlogPost',
-    }),
-
-    //--------------------------------------------------------------------------
-    // Actions
-    //--------------------------------------------------------------------------
-
-    /**
-     * Asks the user information about a new blog post to create, then creates
-     * it and redirects the user to this new post.
-     *
-     * @private
-     * @returns {Promise} Unresolved if there is a redirection
-     */
-    _createNewBlogPost: function () {
-        return this._rpc({
-            model: 'blog.blog',
-            method: 'search_read',
-            args: [wUtils.websiteDomain(this), ['name']],
-        }).then(function (blogs) {
-            if (blogs.length === 1) {
-                document.location = '/blog/' + blogs[0]['id'] + '/post/new';
-                return new Promise(function () {});
-            } else if (blogs.length > 1) {
-                return wUtils.prompt({
-                    id: 'editor_new_blog',
-                    window_title: _t("New Blog Post"),
-                    select: _t("Select Blog"),
-                    init: function (field) {
-                        return _.map(blogs, function (blog) {
-                            return [blog['id'], blog['name']];
-                        });
-                    },
-                }).then(function (result) {
-                    var blog_id = result.val;
-                    if (!blog_id) {
-                        return;
-                    }
-                    document.location = '/blog/' + blog_id + '/post/new';
-                    return new Promise(function () {});
-                });
-            }
-        });
+        const newBlogElement = this.state.newContentElements.find(element => element.moduleXmlId === 'base.module_website_blog');
+        newBlogElement.createNewContent = () => this.createNewBlogPost();
+        newBlogElement.status = MODULE_STATUS.INSTALLED;
     },
-});
+
+    createNewBlogPost() {}
 });
diff --git a/addons/website_event/__manifest__.py b/addons/website_event/__manifest__.py
index 8a6650cddda..8d1f25dffdd 100644
--- a/addons/website_event/__manifest__.py
+++ b/addons/website_event/__manifest__.py
@@ -66,6 +66,9 @@
         'website.assets_wysiwyg': [
             '/website_event/static/src/snippets/s_events/options.js',
         ],
+        'web.assets_backend': [
+            'website_event/static/src/js/systray_items/new_content.js',
+        ],
     },
     'license': 'LGPL-3',
 }
diff --git a/addons/website_event/static/src/js/systray_items/new_content.js b/addons/website_event/static/src/js/systray_items/new_content.js
index 4b61e93dd88..c05c1aa8270 100644
--- a/addons/website_event/static/src/js/systray_items/new_content.js
+++ b/addons/website_event/static/src/js/systray_items/new_content.js
@@ -1,277 +1,16 @@
-odoo.define('website_event.editor', function (require) {
-"use strict";
+/** @odoo-module **/
 
-var core = require('web.core');
-var Dialog = require('web.Dialog');
-var time = require('web.time');
-var WebsiteNewMenu = require('website.newMenu');
-var _t = core._t;
+import { NewContentModal, MODULE_STATUS } from '@website/systray_items/new_content';
+import { patch } from 'web.utils';
 
-var EventCreateDialog = Dialog.extend({
-    xmlDependencies: Dialog.prototype.xmlDependencies.concat(['/website_event/static/src/xml/event_create.xml']),
-    template: 'website_event.event_create_dialog',
-    events: _.extend({}, Dialog.prototype.events, {
-        'change select[name="event_location"]': '_onLocationChanged',
-        'click .input-group-append': '_onDatetimeClicked',
-    }),
-    jsLibs: [
-        '/web/static/lib/daterangepicker/daterangepicker.js',
-        '/web/static/src/legacy/js/libs/daterangepicker.js',
-    ],
-    
+patch(NewContentModal.prototype, 'website_event_new_content', {
+    setup() {
+        this._super();
 
-    /**
-     * @override
-     * @param {Object} parent
-     * @param {Object} options
-     */
-    init: function (parent, options) {
-        options = _.defaults(options || {}, {
-            title: _t("New Event"),
-            size: 'medium',
-            buttons: [
-                {
-                    text: _t("Create"),
-                    classes: 'btn-primary',
-                    click: this._onClickCreate.bind(this),
-                },
-                {
-                    text: _t("Discard"),
-                    close: true
-                },
-            ]
-        });
-        this.eventStart = moment();
-        this.eventEnd = moment().add(1, "d");
-        this._super(parent, options);
+        const newEventElement = this.state.newContentElements.find(element => element.moduleXmlId === 'base.module_website_event');
+        newEventElement.createNewContent = () => this.createNewEvent();
+        newEventElement.status = MODULE_STATUS.INSTALLED;
     },
 
-    /**
-     * @override
-     */
-    start: function () {
-        var self = this;
-        return this._super.apply(this, arguments).then(() => {
-            // stat / end datetimes widgets
-            self.$('input.daterange-input').each(function () {
-                self._initDateRangePicker($(this));
-            });
-            // address select2 configuration
-            self.$('input.o_wevent_js_address_id').select2(self._getSelect2AddressConfig());
-        });
-    },
-
-    /**
-     * @param {*} errors
-     */
-    _display_errors: function (errors) {
-        this.$("p.text-danger").toggleClass('d-none', true);
-        for (let i = 0; i < errors.length; i++) {
-            this.$("#" + errors[i] + " p.text-danger").toggleClass('d-none', false);
-        }
-    },
-
-    _getSelect2AddressConfig: function () {
-        var self = this;
-        return {
-            allowClear: true,
-            formatNoMatches: false,
-            multiple: false,
-            selection_data: false,
-            width: '100%',
-
-            createSearchChoice: function (name, data) {
-                var addedPartner = $(this.opts.element).select2('data');
-                if (_.filter(_.union(addedPartner, data), function (partner) {
-                    return partner.text.toLowerCase().localeCompare(name.toLowerCase()) === 0;
-                }).length === 0) {
-                    return {
-                        create: true,
-                        id: _.uniqueId('address_'),
-                        name: name,
-                        text: _.str.sprintf(_t('Create "%s"'), name),
-                    };
-                }
-            },
-            fill_data: function (query, data) {
-                var that = this;
-                var partners = {results: []};
-                _.each(data, function (partner) {
-                    var contact_address = partner.contact_address.replace(/[\n]+/g, '').trim();
-                    if (contact_address && that.matcher(query.term, contact_address)) {
-                        partners.results.push({
-                            id: partner.id,
-                            text: contact_address,
-                        });
-                    }
-                });
-                query.callback(partners);
-            },
-            formatSelection: function (data) {
-                if (data.name) {
-                    data.text = data.name;
-                }
-                return data.text;
-            },
-            query: function (query) {
-                var that = this;
-                // fetch data only once and store it
-                if (!this.selection_data) {
-                    self._rpc({
-                        model: 'res.partner',
-                        method: 'search_read',
-                        fields: ['contact_address'],
-                        domain: [],
-                    }).then(function (data) {
-                        that.fill_data(query, data);
-                        that.selection_data = data;
-                    });
-                } else {
-                    this.fill_data(query, this.selection_data);
-                }
-            }
-        }
-    },
-
-    _getSelect2AddressValues: function () {
-        var select2Value = this.$('input.o_wevent_js_address_id').select2('data');
-        if (select2Value) {
-            if (select2Value.create) {
-                return [0, {'name': select2Value.name}];
-            } else {
-                return [select2Value.id, {}];
-            }
-        }
-        return [];
-    },
-
-    /**
-     *
-     * @param {*} $dateGroup
-     */
-    _initDateRangePicker: function ($dateGroup) {
-        var minDate = moment().subtract(1, "d");
-        var maxDate = moment().add(200, "y");
-        var self = this;
-        var textDirection = _t.database.parameters.direction;
-
-        $dateGroup.daterangepicker({
-            // dates
-            endDate: this.eventEnd,
-            maxDate: maxDate,
-            minDate: minDate,
-            startDate: this.eventStart,
-            // display
-            locale: {
-                direction: textDirection,
-                format: time.getLangDatetimeFormat().replace(':ss', ''),
-                applyLabel: _t('Apply'),
-                cancelLabel: _t('Cancel'),
-                weekLabel: 'W',
-                customRangeLabel: _t('Custom Range'),
-                daysOfWeek: moment.weekdaysMin(),
-                monthNames: moment.monthsShort(),
-                firstDay: moment.localeData().firstDayOfWeek()
-            },
-            opens: 'left',
-            timePicker: true,
-            timePicker24Hour: true,
-            viewDate: moment(new Date()).hours(minDate.hours()).minutes(minDate.minutes()).seconds(minDate.seconds()).milliseconds(minDate.milliseconds()),
-        }, function (start, end, label) {
-            self.eventStart = start;
-            self.eventEnd = end;
-        });
-    },
-    /**
-     * @private
-     */
-    _prepareFormValues: function () {
-        return {
-            address_values: this._getSelect2AddressValues(),
-            event_start: this.eventStart,
-            event_end: this.eventEnd,
-            location: this.$('select[name=event_location]').val(),
-            name: this.$('input[name=name]').val().trim(),
-        };
-    },
-    /**
-     * @private
-     * @param {*} values
-     */
-    _validateForm: function (values) {
-        var errors = [];
-        if (!values.name){
-            errors.push('name');
-        }
-        if (values.location === 'on_site' && !values.address_values.length) {
-            errors.push('address');
-        }
-        if (!values.event_start || !values.event_end) {
-            errors.push('event_dates');
-        }
-        return errors;
-    },
-
-    /**
-     * @private
-     */
-    _submitForm: function () {
-        var eventValues = this._prepareFormValues();
-        var errors = this._validateForm(eventValues)
-        console.log(eventValues, errors);
-        if (errors.length) {
-            this._display_errors(errors);
-            return;
-        }
-        return this._rpc({
-            route: '/event/add_event',
-            params: eventValues,
-        }).then((url) => {
-            window.location.href = url;
-            return new Promise(function () {});
-        });
-    },
-
-    /**
-     * @private
-     */
-    _onClickCreate: function () {
-        return this._submitForm();
-    },
-
-    /**
-     * @private
-     * @param {*} ev
-     */
-    _onLocationChanged: function (ev) {
-        this.$('.show_visibility_address').toggleClass('d-none', ev.target.value === 'online');
-    },
-});
-
-WebsiteNewMenu.include({
-    actions: _.extend({}, WebsiteNewMenu.prototype.actions || {}, {
-        new_event: '_createNewEvent',
-    }),
-
-    //--------------------------------------------------------------------------
-    // Actions
-    //--------------------------------------------------------------------------
-
-    /**
-     * Asks the user information about a new event to create, then creates it
-     * and redirects the user to this new event.
-     *
-     * @private
-     * @returns {Promise} Unresolved if there is a redirection
-     */
-    _createNewEvent: function () {
-        var self = this;
-        var def = new Promise(function (resolve) {
-            var dialog = new EventCreateDialog(self, {});
-            dialog.open();
-            dialog.on('closed', self, resolve);
-        });
-        return def;
-    },
-});
+    createNewEvent() {}
 });
diff --git a/addons/website_forum/__manifest__.py b/addons/website_forum/__manifest__.py
index 2ece59da5de..676e7fe4da0 100644
--- a/addons/website_forum/__manifest__.py
+++ b/addons/website_forum/__manifest__.py
@@ -52,6 +52,9 @@ Ask questions, get answers, no distractions
             'website_forum/static/src/js/website_forum.js',
             'website_forum/static/src/js/website_forum.share.js',
         ],
+        'web.assets_backend': [
+            'website_forum/static/src/js/systray_items/new_content.js',
+        ],
         'web.assets_qweb': [
             'website_forum/static/src/xml/*.xml',
         ],
diff --git a/addons/website_forum/static/src/js/systray_items/new_content.js b/addons/website_forum/static/src/js/systray_items/new_content.js
index 74072c592b4..532856fe8a8 100644
--- a/addons/website_forum/static/src/js/systray_items/new_content.js
+++ b/addons/website_forum/static/src/js/systray_items/new_content.js
@@ -1,144 +1,16 @@
-odoo.define('website_forum.editor', function (require) {
-"use strict";
+/** @odoo-module **/
 
-var core = require('web.core');
-var WebsiteNewMenu = require('website.newMenu');
-var Dialog = require('web.Dialog');
+import { NewContentModal, MODULE_STATUS } from '@website/systray_items/new_content';
+import { patch } from 'web.utils';
 
-var _t = core._t;
+patch(NewContentModal.prototype, 'website_forum_new_content', {
+    setup() {
+        this._super();
 
-var ForumCreateDialog = Dialog.extend({
-    xmlDependencies: Dialog.prototype.xmlDependencies.concat(
-        ['/website_forum/static/src/xml/website_forum_templates.xml']
-    ),
-    template: 'website_forum.add_new_forum',
-    events: _.extend({}, Dialog.prototype.events, {
-        'change input[name="privacy"]': '_onPrivacyChanged',
-    }),
+        const newForumElement = this.state.newContentElements.find(element => element.moduleXmlId === 'base.module_website_forum');
+        newForumElement.createNewContent = () => this.createNewForum();
+        newForumElement.status = MODULE_STATUS.INSTALLED;
+    },
 
-    /**
-     * @override
-     * @param {Object} parent
-     * @param {Object} options
-     */
-    init: function (parent, options) {
-        options = _.defaults(options || {}, {
-            title: _t("New Forum"),
-            size: 'medium',
-            buttons: [
-                {
-                    text: _t("Create"),
-                    classes: 'btn-primary',
-                    click: this.onCreateClick.bind(this),
-                },
-                {
-                    text: _t("Discard"),
-                    close: true
-                },
-            ]
-        });
-        this._super(parent, options);
-    },
-    start: function () {
-        var self = this;
-        return this._super.apply(this, arguments).then(function () {
-            var $input = self.$('#group_id');
-            $input.select2({
-                width: '100%',
-                allowClear: true,
-                formatNoMatches: false,
-                multiple: false,
-                selection_data: false,
-                fill_data: function (query, data) {
-                    var that = this;
-                    var tags = {results: []};
-                    _.each(data, function (obj) {
-                        if (that.matcher(query.term, obj.display_name)) {
-                            tags.results.push({id: obj.id, text: obj.display_name});
-                        }
-                    });
-                    query.callback(tags);
-                },
-                query: function (query) {
-                    var that = this;
-                    // fetch data only once and store it
-                    if (!this.selection_data) {
-                        self._rpc({
-                            model: 'res.groups',
-                            method: 'search_read',
-                            args: [[], ['display_name']],
-                        }).then(function (data) {
-                            that.fill_data(query, data);
-                            that.selection_data = data;
-                        });
-                    } else {
-                        this.fill_data(query, this.selection_data);
-                    }
-                }
-            });
-        });
-    },
-    onCreateClick: function () {
-        var $dialog = this.$el;
-        var $forumName = $dialog.find('input[name=forum_name]');
-        if (!$forumName.val()) {
-            $forumName.addClass('border-danger');
-            return;
-        }
-        var $forumPrivacyGroup = $dialog.find('input[name=group_id]');
-        var forumPrivacy = $dialog.find('input:radio[name=privacy]:checked').val();
-        if (forumPrivacy === 'private' && !$forumPrivacyGroup.val()) {
-            this.$("#group-required").removeClass('d-none');
-            return;
-        }
-        var addMenu = ($dialog.find('input[type="checkbox"]').is(':checked'));
-        var forumMode = $dialog.find('input:radio[name=mode]:checked').val();
-        return this._rpc({
-            route: '/forum/new',
-            params: {
-                forum_name: $forumName.val(),
-                forum_mode: forumMode,
-                forum_privacy: forumPrivacy,
-                forum_privacy_group: $forumPrivacyGroup.val(),
-                add_menu: addMenu || "",
-            },
-        }).then(function (url) {
-            window.location.href = url;
-            return new Promise(function () {});
-        });
-    },
-    /**
-     * @private
-     */
-    _onPrivacyChanged: function (ev) {
-        this.$('.show_visibility_group').toggleClass('d-none', ev.target.value !== 'private');
-    },
-});
-
-WebsiteNewMenu.include({
-    actions: _.extend({}, WebsiteNewMenu.prototype.actions || {}, {
-        new_forum: '_createNewForum',
-    }),
-
-    //--------------------------------------------------------------------------
-    // Actions
-    //--------------------------------------------------------------------------
-
-    /**
-     * Asks the user information about a new forum to create, then creates it
-     * and redirects the user to this new forum.
-     *
-     * @private
-     * @returns {Promise} Unresolved if there is a redirection
-     */
-    _createNewForum: function () {
-        var self = this;
-        var def = new Promise(function (resolve) {
-            var dialog = new ForumCreateDialog(self, {});
-            dialog.open();
-            dialog.on('closed', self, resolve);
-        });
-        return def;
-    },
-});
+    createNewForum() {}
 });
diff --git a/addons/website_hr_recruitment/__manifest__.py b/addons/website_hr_recruitment/__manifest__.py
index b9ac5d18383..783e97d3316 100644
--- a/addons/website_hr_recruitment/__manifest__.py
+++ b/addons/website_hr_recruitment/__manifest__.py
@@ -27,6 +27,9 @@
         'web.assets_frontend': [
             'website_hr_recruitment/static/src/scss/**/*',
         ],
+        'web.assets_backend': [
+            'website_hr_recruitment/static/src/js/systray_items/new_content.js',
+        ],
         'website.assets_editor': [
             'website_hr_recruitment/static/src/js/**/*',
         ],
diff --git a/addons/website_hr_recruitment/static/src/js/systray_items/new_content.js b/addons/website_hr_recruitment/static/src/js/systray_items/new_content.js
new file mode 100644
index 00000000000..2d2e4205576
--- /dev/null
+++ b/addons/website_hr_recruitment/static/src/js/systray_items/new_content.js
@@ -0,0 +1,16 @@
+/** @odoo-module **/
+
+import { NewContentModal, MODULE_STATUS } from '@website/systray_items/new_content';
+import { patch } from 'web.utils';
+
+patch(NewContentModal.prototype, 'website_hr_recruitment_new_content', {
+    setup() {
+        this._super();
+
+        const newJobElement = this.state.newContentElements.find(element => element.moduleXmlId === 'base.module_website_hr_recruitment');
+        newJobElement.createNewContent = () => this.createNewJob();
+        newJobElement.status = MODULE_STATUS.INSTALLED;
+    },
+
+    async createNewJob() {}
+});
diff --git a/addons/website_livechat/__manifest__.py b/addons/website_livechat/__manifest__.py
index d44a5235f9c..dea83dfcf48 100644
--- a/addons/website_livechat/__manifest__.py
+++ b/addons/website_livechat/__manifest__.py
@@ -41,6 +41,7 @@ Allow website visitors to chat with the collaborators. This module also brings a
             'website_livechat/static/src/components/*/*.js',
             'website_livechat/static/src/components/*/*.scss',
             'website_livechat/static/src/models/*.js',
+            'website_livechat/static/src/js/systray_items/new_content.js',
         ],
         'web.assets_tests': [
             'website_livechat/static/tests/tours/**/*',
diff --git a/addons/website_livechat/static/src/js/systray_items/new_content.js b/addons/website_livechat/static/src/js/systray_items/new_content.js
index 67f68bba9d9..46a2b933a97 100644
--- a/addons/website_livechat/static/src/js/systray_items/new_content.js
+++ b/addons/website_livechat/static/src/js/systray_items/new_content.js
@@ -1,46 +1,16 @@
 /** @odoo-module **/
 
-import { _t } from 'web.core';
-import wUtils from 'website.utils';
-import WebsiteNewMenu from 'website.newMenu';
+import { NewContentModal, MODULE_STATUS } from '@website/systray_items/new_content';
+import { patch } from 'web.utils';
 
-WebsiteNewMenu.include({
-    actions: _.extend({}, WebsiteNewMenu.prototype.actions || {}, {
-        new_channel: '_createNewChannel',
-    }),
+patch(NewContentModal.prototype, 'website_livechat_new_content', {
+    setup() {
+        this._super();
 
-    //--------------------------------------------------------------------------
-    // Actions
-    //--------------------------------------------------------------------------
-
-    /**
-     * Asks the user information about a new channel to create, then creates it
-     * and redirects the user to this new channel.
-     *
-     * @private
-     * @returns {Promise} Unresolved if there is a redirection
-     */
-    _createNewChannel: function () {
-        var self = this;
-        return wUtils.prompt({
-            window_title: _t("New Channel"),
-            input: _t("Name"),
-        }).then(function (result) {
-            var name = result.val;
-            if (!name) {
-                return;
-            }
-            return self._rpc({
-                model: 'im_livechat.channel',
-                method: 'create_and_get_website_url',
-                args: [[]],
-                kwargs: {
-                    name: name,
-                },
-            }).then(function (url) {
-                window.location.href = url;
-                return new Promise(function () {});
-            });
-        });
+        const newChannelElement = this.state.newContentElements.find(element => element.moduleXmlId === 'base.module_website_livechat');
+        newChannelElement.createNewContent = () => this.createNewChannel();
+        newChannelElement.status = MODULE_STATUS.INSTALLED;
     },
+
+    createNewChannel() {}
 });
diff --git a/addons/website_sale/__manifest__.py b/addons/website_sale/__manifest__.py
index 4191da76126..fa0fa3fb868 100644
--- a/addons/website_sale/__manifest__.py
+++ b/addons/website_sale/__manifest__.py
@@ -66,6 +66,7 @@
             'website_sale/static/src/scss/website_sale_dashboard.scss',
             'website_sale/static/src/scss/website_sale_backend.scss',
             'website_sale/static/src/js/tours/website_sale_shop_backend.js',
+            'website_sale/static/src/js/systray_items/new_content.js',
         ],
         'website.assets_wysiwyg': [
             'website_sale/static/src/scss/website_sale.editor.scss',
diff --git a/addons/website_sale/static/src/js/systray_items/new_content.js b/addons/website_sale/static/src/js/systray_items/new_content.js
new file mode 100644
index 00000000000..f1985c4d566
--- /dev/null
+++ b/addons/website_sale/static/src/js/systray_items/new_content.js
@@ -0,0 +1,16 @@
+/** @odoo-module **/
+
+import { NewContentModal, MODULE_STATUS } from '@website/systray_items/new_content';
+import { patch } from 'web.utils';
+
+patch(NewContentModal.prototype, 'website_sale_new_content', {
+    setup() {
+        this._super();
+
+        const newProductElement = this.state.newContentElements.find(element => element.moduleXmlId === 'base.module_website_sale');
+        newProductElement.createNewContent = () => this.createNewProduct();
+        newProductElement.status = MODULE_STATUS.INSTALLED;
+    },
+
+    createNewProduct() {}
+});
diff --git a/addons/website_slides/__manifest__.py b/addons/website_slides/__manifest__.py
index abda6179c1b..bfbf938b2ce 100644
--- a/addons/website_slides/__manifest__.py
+++ b/addons/website_slides/__manifest__.py
@@ -70,6 +70,7 @@ Featuring
             'website_slides/static/src/js/slide_category_one2many.js',
             'website_slides/static/src/js/rating_field_backend.js',
             'website_slides/static/src/models/*.js',
+            'website_slides/static/src/js/systray_items/new_content.js',
         ],
         'web.assets_frontend': [
             'website_slides/static/src/scss/website_slides.scss',
diff --git a/addons/website_slides/static/src/js/systray_items/new_content.js b/addons/website_slides/static/src/js/systray_items/new_content.js
index 284faca7ecf..c5ea11000bb 100644
--- a/addons/website_slides/static/src/js/systray_items/new_content.js
+++ b/addons/website_slides/static/src/js/systray_items/new_content.js
@@ -1,183 +1,16 @@
 /** @odoo-module **/
 
-import { _t } from 'web.core';
-import Dialog from 'web.Dialog';
-import WebsiteNewMenu from 'website.newMenu';
-import SlidesCourseTagAdd from '@website_slides/js/slides_course_tag_add';
+import { NewContentModal, MODULE_STATUS } from '@website/systray_items/new_content';
+import { patch } from 'web.utils';
 
-const TagCourseDialog = SlidesCourseTagAdd.TagCourseDialog;
+patch(NewContentModal.prototype, 'website_slides_new_content', {
+    setup() {
+        this._super();
 
-export const ChannelCreateDialog = Dialog.extend({
-    template: 'website.slide.channel.create',
-    xmlDependencies: Dialog.prototype.xmlDependencies.concat(
-        ['/website_slides/static/src/xml/website_slides_channel.xml',
-         '/website_slides/static/src/xml/website_slides_channel_tag.xml']
-    ),
-    events: _.extend({}, Dialog.prototype.events, {
-        'change input#tag_ids' : '_onChangeTag',
-    }),
-    custom_events: _.extend({}, Dialog.prototype.custom_events, {
-        'tag_refresh': '_onTagRefresh',
-        'tag_remove_new': '_onTagRemoveNew',
-    }),
-    /**
-     * @override
-     * @param {Object} parent
-     * @param {Object} options
-     */
-    init: function (parent, options) {
-        options = _.defaults(options || {}, {
-            title: _t("New Course"),
-            size: 'medium',
-            buttons: [{
-                text: _t("Create"),
-                classes: 'btn-primary',
-                click: this._onClickFormSubmit.bind(this)
-            }, {
-                text: _t("Discard"),
-                close: true
-            },]
-        });
-        this._super(parent, options);
-    },
-    start: function () {
-        var self = this;
-        return this._super.apply(this, arguments).then(function () {
-            var $input = self.$('#tag_ids');
-            $input.select2({
-                width: '100%',
-                allowClear: true,
-                formatNoMatches: false,
-                multiple: true,
-                selection_data: false,
-                formatSelection: function (data) {
-                    if (data.tag) {
-                        data.text = data.tag;
-                    }
-                    return data.text;
-                },
-                createSearchChoice: function(term, data) {
-                    var addedTags = $(this.opts.element).select2('data');
-                    if (_.filter(_.union(addedTags, data), function (tag) {
-                        return tag.text.toLowerCase().localeCompare(term.toLowerCase()) === 0;
-                    }).length === 0) {
-                        if (this.opts.can_create) {
-                            return {
-                                id: _.uniqueId('tag_'),
-                                create: true,
-                                tag: term,
-                                text: _.str.sprintf(_t("Create new Tag '%s'"), term),
-                            };
-                        } else {
-                            return undefined;
-                        }
-                    }
-                },
-                fill_data: function (query, data) {
-                    var that = this,
-                        tags = {results: []};
-                    _.each(data, function (obj) {
-                        if (that.matcher(query.term, obj.name)) {
-                            tags.results.push({id: obj.id, text: obj.name});
-                        }
-                    });
-                    query.callback(tags);
-                },
-                query: function (query) {
-                    var that = this;
-                    // fetch data only once and store it
-                    if (!this.selection_data) {
-                        self._rpc({
-                            route: '/slides/channel/tag/search_read',
-                            params: {
-                                fields: ['name'],
-                                domain: [],
-                            }
-                        }).then(function (data) {
-                            that.can_create = data.can_create;
-                                that.fill_data(query, data.read_results);
-                                that.selection_data = data.read_results;
-                        });
-                    } else {
-                        this.fill_data(query, this.selection_data);
-                    }
-                }
-            });
-        });
-    },
-    _onClickFormSubmit: function (ev) {
-        var $form = this.$("#slide_channel_add_form");
-        var $title = this.$("#title");
-        if (!$title[0].value){
-            $title.addClass('border-danger');
-            this.$("#title-required").removeClass('d-none');
-        } else {
-            $form.submit();
-        }
-    },
-    _onChangeTag: function (ev) {
-        var self = this;
-        var tags = $(ev.currentTarget).select2('data');
-        tags.forEach(function (element) {
-            if (element.create) {
-                new TagCourseDialog(self, { defaultTag: element.text }).open();
-            }
-        });
-    },
-    /**
-     * Replace the new tag ID by its real ID
-     * @param ev
-     * @private
-     */
-    _onTagRefresh: function (ev) {
-        var $tag_ids = $('#tag_ids');
-        var tags = $tag_ids.select2('data');
-        tags.forEach(function (element) {
-            if (element.create) {
-                element.id = ev.data.tag_id;
-                element.create = false;
-            }
-        });
-        $tag_ids.select2('data', tags);
-        // Set selection_data to false to force tag reload
-        $tag_ids.data('select2').opts.selection_data = false;
-    },
-    /**
-     * Remove the created tag if the user clicks on 'Discard' on the create tag Dialog
-     * @private
-     */
-    _onTagRemoveNew: function () {
-        var tags = $('#tag_ids').select2('data');
-        tags = tags.filter(function (value) {
-            return !value.create;
-        });
-        $('#tag_ids').select2('data', tags);
+        const newSlidesChannelElement = this.state.newContentElements.find(element => element.moduleXmlId === 'base.module_website_slides');
+        newSlidesChannelElement.createNewContent = () => this.createNewSlidesChannel();
+        newSlidesChannelElement.status = MODULE_STATUS.INSTALLED;
     },
-});
-
-WebsiteNewMenu.include({
-    actions: _.extend({}, WebsiteNewMenu.prototype.actions || {}, {
-        new_slide_channel: '_createNewSlideChannel',
-    }),
-
-    //--------------------------------------------------------------------------
-    // Actions
-    //--------------------------------------------------------------------------
-
-    /**
-     * Displays the popup to create a new slide channel,
-     * and redirects the user to this channel.
-     *
-     * @private
-     * @returns {Promise} Unresolved if there is a redirection
-     */
-     _createNewSlideChannel: function () {
-        var self = this;
-        var def = new Promise(function (resolve) {
-            var dialog = new ChannelCreateDialog(self, {});
-            dialog.open();
-            dialog.on('closed', self, resolve);
-        });
-        return def;
-     },
+
+    createNewSlidesChannel() {}
 });

From 3db77ce9753b932b56dc78b1b26c455d0f1aa955 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Mon, 10 Jan 2022 16:33:28 +0100
Subject: [PATCH 14/88] [IMP] website: add dialog component

This commit adds a generic Dialog component, for the website.
It has a default footer with two buttons.

See merge commit for more information.

task-2687506
---
 addons/website/__manifest__.py                |  2 +
 .../static/src/components/dialog/dialog.js    | 46 +++++++++++++++++++
 .../static/src/components/dialog/dialog.xml   | 15 ++++++
 3 files changed, 63 insertions(+)
 create mode 100644 addons/website/static/src/components/dialog/dialog.js
 create mode 100644 addons/website/static/src/components/dialog/dialog.xml

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 118ce911c2e..b7cb59d1725 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -175,6 +175,7 @@
             'website/static/src/client_actions/*/*.scss',
             'website/static/src/services/website_service.js',
             'website/static/src/components/navbar/navbar.js',
+            'website/static/src/components/dialog/dialog.js',
             'website/static/src/systray_items/*.js',
             'website/static/src/systray_items/*.scss',
         ],
@@ -246,6 +247,7 @@
             'website/static/src/xml/website.backend.xml',
             'website/static/src/xml/website_widget.xml',
             'website/static/src/xml/theme_preview.xml',
+            'website/static/src/components/dialog/dialog.xml',
             'website/static/src/client_actions/*/*.xml',
             'website/static/src/systray_items/*.xml',
         ],
diff --git a/addons/website/static/src/components/dialog/dialog.js b/addons/website/static/src/components/dialog/dialog.js
new file mode 100644
index 00000000000..15baedbe1b0
--- /dev/null
+++ b/addons/website/static/src/components/dialog/dialog.js
@@ -0,0 +1,46 @@
+/** @odoo-module **/
+
+import { Dialog } from '@web/core/dialog/dialog';
+
+export class WebsiteDialog extends Dialog {
+    setup() {
+        super.setup();
+        this.title = this.props.title || this.env._t("Confirmation");
+        this.primaryTitle = this.props.primaryTitle || this.env._t("Ok");
+        this.secondaryTitle = this.props.secondaryTitle || this.env._t("Cancel");
+        this.closeOnClick = this.props.closeOnClick === false ? false : true;
+    }
+
+    primaryClick() {
+        if (this.props.primaryClick) {
+            this.props.primaryClick();
+        }
+        if (this.closeOnClick) {
+            this.close();
+        }
+    }
+
+    secondaryClick() {
+        if (this.props.secondaryClick) {
+            this.props.secondaryClick();
+        }
+        if (this.closeOnClick) {
+            this.close();
+        }
+    }
+}
+WebsiteDialog.props = {
+    ...Dialog.props,
+    title: { type: String, optional: true },
+    body: { type: String, optional: true },
+    primaryTitle: { type: String, optional: true },
+    primaryClick: { type: Function, optional: true },
+    secondaryTitle: { type: String, optional: true },
+    secondaryClick: { type: Function, optional: true },
+    closeOnClick: { type: Boolean, optional: true },
+    close: { type: Function, optional: true },
+};
+WebsiteDialog.bodyTemplate = "website.DialogBody";
+WebsiteDialog.footerTemplate = "website.DialogFooter";
+WebsiteDialog.size = "modal-md";
+WebsiteDialog.contentClass = "o_website_dialog";
diff --git a/addons/website/static/src/components/dialog/dialog.xml b/addons/website/static/src/components/dialog/dialog.xml
new file mode 100644
index 00000000000..30532d3681a
--- /dev/null
+++ b/addons/website/static/src/components/dialog/dialog.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+<t t-name="website.DialogBody" owl="1">
+    <t t-esc="props.body"/>
+</t>
+
+<t t-name="website.DialogFooter" owl="1">
+    <button class="btn btn-primary" t-on-click="primaryClick">
+        <t t-esc="primaryTitle"/>
+    </button>
+    <button class="btn btn-secondary" t-on-click="secondaryClick">
+        <t t-esc="secondaryTitle"/>
+    </button>
+</t>
+</templates>

From fbfe4d1fcbd6da5023b2a37fe2eaa513abdff2b9 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Tue, 11 Jan 2022 14:54:11 +0100
Subject: [PATCH 15/88] [IMP] website: allow to add a website page from the new
 content menu

See merge commit for more information.

task-2687506
---
 addons/website/__manifest__.py                |  3 ++
 addons/website/controllers/main.py            |  4 +-
 .../static/src/components/dialog/dialog.js    | 46 ++++++++++++++++
 .../static/src/components/dialog/dialog.scss  |  5 ++
 .../static/src/components/switch/switch.js    | 27 ++++++++++
 .../static/src/components/switch/switch.scss  | 52 +++++++++++++++++++
 .../static/src/systray_items/new_content.js   | 20 ++++---
 .../static/src/systray_items/new_content.xml  |  2 +-
 .../views/website_navbar_templates.xml        |  6 ---
 9 files changed, 150 insertions(+), 15 deletions(-)
 create mode 100644 addons/website/static/src/components/dialog/dialog.scss
 create mode 100644 addons/website/static/src/components/switch/switch.js
 create mode 100644 addons/website/static/src/components/switch/switch.scss

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index b7cb59d1725..a44a94a31aa 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -176,6 +176,9 @@
             'website/static/src/services/website_service.js',
             'website/static/src/components/navbar/navbar.js',
             'website/static/src/components/dialog/dialog.js',
+            'website/static/src/components/dialog/dialog.scss',
+            'website/static/src/components/switch/switch.js',
+            'website/static/src/components/switch/switch.scss',
             'website/static/src/systray_items/*.js',
             'website/static/src/systray_items/*.scss',
         ],
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index deb5eff4006..0afc9434773 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -597,8 +597,8 @@ class Website(Home):
         url = page['url']
 
         if ext_special_case:  # redirect non html pages to backend to edit
-            return werkzeug.utils.redirect('/web#id=' + str(page.get('view_id')) + '&view_type=form&model=ir.ui.view')
-        return werkzeug.utils.redirect(url + "?enable_editor=1")
+            return '/web#id=' + str(page.get('view_id')) + '&view_type=form&model=ir.ui.view'
+        return url + "?enable_editor=1"
 
     @http.route("/website/get_switchable_related_views", type="json", auth="user", website=True)
     def get_switchable_related_views(self, key):
diff --git a/addons/website/static/src/components/dialog/dialog.js b/addons/website/static/src/components/dialog/dialog.js
index 15baedbe1b0..d6f918c6a2b 100644
--- a/addons/website/static/src/components/dialog/dialog.js
+++ b/addons/website/static/src/components/dialog/dialog.js
@@ -1,6 +1,9 @@
 /** @odoo-module **/
 
 import { Dialog } from '@web/core/dialog/dialog';
+import { Switch } from '@website/components/switch/switch';
+
+const { xml, useState } = owl;
 
 export class WebsiteDialog extends Dialog {
     setup() {
@@ -44,3 +47,46 @@ WebsiteDialog.bodyTemplate = "website.DialogBody";
 WebsiteDialog.footerTemplate = "website.DialogFooter";
 WebsiteDialog.size = "modal-md";
 WebsiteDialog.contentClass = "o_website_dialog";
+
+export class AddPageDialog extends WebsiteDialog {
+    setup() {
+        super.setup();
+
+        this.title = this.env._t("New Page");
+        this.primaryTitle = this.env._t("Create");
+
+        this.state = useState({
+            addMenu: true,
+            name: '',
+        });
+    }
+
+    onChangeAddMenu(value) {
+        this.state.addMenu = value;
+    }
+
+    async primaryClick() {
+        await this.props.addPage(this.state.name, this.state.addMenu);
+        this.close();
+    }
+}
+AddPageDialog.props = {
+    ...WebsiteDialog.props,
+    addPage: Function,
+};
+AddPageDialog.components = {
+    Switch,
+};
+AddPageDialog.bodyTemplate = xml`
+<div>
+    <div class="form-group row">
+        <label class="col-form-label col-md-3">
+            Page Title
+        </label>
+        <div class="col-md-9">
+            <input type="text" t-model="state.name" class="form-control" required="required"/>
+        </div>
+    </div>
+    <Switch extraClasses="'offset-md-3 col-md-9 text-left'" label="'Add to menu'" value="state.addMenu" onChange="(value) => this.onChangeAddMenu(value)"/>
+</div>
+`;
diff --git a/addons/website/static/src/components/dialog/dialog.scss b/addons/website/static/src/components/dialog/dialog.scss
new file mode 100644
index 00000000000..03375ba3132
--- /dev/null
+++ b/addons/website/static/src/components/dialog/dialog.scss
@@ -0,0 +1,5 @@
+.o_website_dialog {
+    label {
+        font-weight: $font-weight-bold;
+    }
+}
diff --git a/addons/website/static/src/components/switch/switch.js b/addons/website/static/src/components/switch/switch.js
new file mode 100644
index 00000000000..45916125cc1
--- /dev/null
+++ b/addons/website/static/src/components/switch/switch.js
@@ -0,0 +1,27 @@
+/** @odoo-module **/
+
+const { Component, xml } = owl;
+
+const NO_OP = () => {};
+
+export class Switch extends Component {
+    setup() {
+        this.extraClasses = this.props.extraClasses ? ` ${this.props.extraClasses}` : '';
+    }
+}
+Switch.props = {
+    value: Boolean,
+    extraClasses: String,
+    label: {type: String, optional: true},
+    onChange: { Function, optional: true },
+};
+Switch.defaultProps = {
+    onChange: NO_OP,
+};
+Switch.template = xml`
+<label t-att-class="'o_switch' + extraClasses">
+    <input type="checkbox" t-att-checked="props.value" t-on-change="(ev) => props.onChange(ev.target.checked)"/>
+    <span/>
+    <div t-if="props.label"><t t-esc="props.label"/></div>
+</label>
+`;
diff --git a/addons/website/static/src/components/switch/switch.scss b/addons/website/static/src/components/switch/switch.scss
new file mode 100644
index 00000000000..d61a73d95e9
--- /dev/null
+++ b/addons/website/static/src/components/switch/switch.scss
@@ -0,0 +1,52 @@
+$o-we-switch-size: 1.2em !default;
+$o-we-switch-inactive-color: rgba($text-muted, 0.4) !default;
+.o_switch {
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    cursor: pointer;
+
+    > input {
+        display: none;
+
+        + span {
+            margin-right: 0.5em;
+            border-radius: $o-we-switch-size;
+            width: $o-we-switch-size * 1.7;
+            padding-left: 3px;
+            padding-right: 3px;
+            background-color: $o-we-switch-inactive-color;
+            font-size: $o-we-switch-size * 1.09;
+            line-height: $o-we-switch-size;
+            color: $o-we-switch-inactive-color;
+            transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
+
+            &:after {
+                content: "\f057"; // fa-times-circle
+                font-family: 'FontAwesome';
+                color: white;
+                transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
+            }
+        }
+
+        &:checked + span {
+            background: $o-brand-primary;
+
+            &:after {
+                content: "\f058"; // fa-check-circle
+                margin-left: ($o-we-switch-size * 1.7) - $o-we-switch-size;
+            }
+        }
+    }
+
+    &.o_switch_danger_success {
+        > input {
+            &:not(:checked) + span {
+                background: $o-we-color-danger;
+            }
+            &:checked + span {
+                background: $o-we-color-success;
+            }
+        }
+    }
+}
diff --git a/addons/website/static/src/systray_items/new_content.js b/addons/website/static/src/systray_items/new_content.js
index 52fafd2dd92..0fcb3dcd6bf 100644
--- a/addons/website/static/src/systray_items/new_content.js
+++ b/addons/website/static/src/systray_items/new_content.js
@@ -2,7 +2,7 @@
 
 import { registry } from '@web/core/registry';
 import { useService } from '@web/core/utils/hooks';
-import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { WebsiteDialog, AddPageDialog } from "@website/components/dialog/dialog";
 import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
 
 const { Component, xml, useState, onWillStart } = owl;
@@ -123,7 +123,15 @@ export class NewContentModal extends Component {
         return this.state.newContentElements.filter(({status}) => status !== MODULE_STATUS.NOT_INSTALLED).concat(this.state.newContentElements.filter(({status}) => status === MODULE_STATUS.NOT_INSTALLED));
     }
 
-    createNewPage() {}
+    createNewPage() {
+        this.dialogs.add(AddPageDialog, {
+            addPage: async (name, addMenu) => {
+                const url = `/website/add/${encodeURIComponent(name)}`;
+                const res = await this.website.sendRequest(url, { add_menu: addMenu || '' });
+                this.website.goToWebsite({ path: res });
+            },
+        });
+    }
 
     async installModule(id, redirectUrl) {
         await this.orm.call(
@@ -148,9 +156,10 @@ export class NewContentModal extends Component {
 
         const {id, name} = this.modulesInfo[element.moduleXmlId];
         const dialogProps = {
-            title: this.env._t("Install"),
+            title: element.title,
             body: _.str.sprintf(this.newContentText.installNeeded, name),
-            confirm: async () => {
+            primaryTitle: this.env._t("Install"),
+            primaryClick: async () => {
                 // Update the NewContentElement with installing icon and text.
                 this.state.newContentElements = this.state.newContentElements.map(el => {
                     if (el.moduleXmlId === element.moduleXmlId) {
@@ -175,9 +184,8 @@ export class NewContentModal extends Component {
                     console.error(error);
                 }
             },
-            cancel: () => {},
         };
-        this.dialogs.add(ConfirmationDialog, dialogProps);
+        this.dialogs.add(WebsiteDialog, dialogProps);
     }
 }
 NewContentModal.template = "website.NewContentModal";
diff --git a/addons/website/static/src/systray_items/new_content.xml b/addons/website/static/src/systray_items/new_content.xml
index 19ae618fa10..2aec401921f 100644
--- a/addons/website/static/src/systray_items/new_content.xml
+++ b/addons/website/static/src/systray_items/new_content.xml
@@ -18,7 +18,7 @@
             <div class="row">
                 <NewContentElement t-if="isDesigner"
                         name="'New Page'"
-                        onClick="() => createNewPage()"
+                        onClick="() => this.createNewPage()"
                         title="'New Page'">
                     <i class="fa fa-file-o"/>
                     <p>Page</p>
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index 8e019623e76..821087fc54d 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -94,12 +94,6 @@
                                     <t t-set="is_system" t-value="env.user.has_group('base.group_system')"/>
                                     <t t-set="is_designer" t-value="env.user.has_group('website.group_website_designer')"/>
 
-                                    <div t-if='is_designer' class="col-md-4 mb8 o_new_content_element">
-                                        <a href="#" data-action="new_page" aria-label="New page" title="New page">
-                                            <i class="fa fa-file-o"/>
-                                            <p>Page</p>
-                                        </a>
-                                    </div>
                                     <t t-set="mod" t-value="env.ref('base.module_website_blog')"/>
                                     <div name="module_website_blog" t-if='is_system' t-cache="is_system"
                                          t-att-data-module-id="mod.id"

From 028efcbffe1cbaa00fe6a262151c75fda922008d Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Thu, 13 Jan 2022 18:35:53 +0100
Subject: [PATCH 16/88] [IMP] website: add publish systray item

See merge commit for more information.

task-2687506
---
 .../website_preview/website_preview.js        |  5 ++
 .../static/src/components/navbar/navbar.js    |  2 +
 .../static/src/services/website_service.js    |  3 +-
 .../static/src/systray_items/publish.js       | 52 +++++++++++++++++++
 .../views/website_navbar_templates.xml        |  6 +--
 addons/website/views/website_templates.xml    |  2 +
 6 files changed, 64 insertions(+), 6 deletions(-)
 create mode 100644 addons/website/static/src/systray_items/publish.js

diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 1c8f8762a85..4081a9be3f2 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -2,6 +2,7 @@
 
 import { registry } from '@web/core/registry';
 import { useService } from '@web/core/utils/hooks';
+import { unslugHtmlDataObject } from '../../services/website_service';
 
 const { Component, onWillStart, useRef, useEffect } = owl;
 
@@ -84,8 +85,12 @@ export class WebsitePreview extends Component {
         this.currentUrl = this.iframe.el.contentDocument.location.href;
         history.replaceState({}, this.props.action.display_name, this.currentUrl);
 
+        const { mainObject, isPublished, canPublish } = this.iframe.el.contentDocument.documentElement.dataset;
         this.websiteService.currentMetadata = {
             path: this.currentUrl,
+            mainObject: unslugHtmlDataObject(mainObject),
+            isPublished: isPublished === 'True',
+            canPublish: canPublish === 'True',
         };
 
         // Before leaving the iframe, its content is replicated on an
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
index 05c9e6baf3b..9f63fc28ff3 100644
--- a/addons/website/static/src/components/navbar/navbar.js
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -20,6 +20,8 @@ patch(NavBar.prototype, 'website_navbar', {
         if (this.env.debug && !websiteSystrayRegistry.contains('web.debug_mode_menu')) {
             websiteSystrayRegistry.add('web.debug_mode_menu', registry.category('systray').get('web.debug_mode_menu'), {sequence: 100});
         }
+
+        useBus(websiteSystrayRegistry, 'CONTENT-UPDATED', () => this.render(true));
     },
 
     /**
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 0b6a1d95fcf..be467016f5a 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -6,7 +6,7 @@ const { reactive } = owl;
 
 const websiteSystrayRegistry = registry.category('website_systray');
 
-const unslugHtmlDataObject = (repr) => {
+export const unslugHtmlDataObject = (repr) => {
     const match = repr && repr.match(/(.+)\((\d+),(.*)\)/);
     if (!match) {
         return null;
@@ -37,6 +37,7 @@ export const websiteService = {
             },
             set currentMetadata(metadata) {
                 currentMetadata = metadata;
+                websiteSystrayRegistry.trigger('CONTENT-UPDATED');
             },
             get currentWebsite() {
                 const currentWebsite = websites.find(w => w.id === currentWebsiteId);
diff --git a/addons/website/static/src/systray_items/publish.js b/addons/website/static/src/systray_items/publish.js
new file mode 100644
index 00000000000..ea860af4111
--- /dev/null
+++ b/addons/website/static/src/systray_items/publish.js
@@ -0,0 +1,52 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { Switch } from '@website/components/switch/switch';
+import { useService, useBus } from '@web/core/utils/hooks';
+
+const { Component, xml, useState } = owl;
+
+const websiteSystrayRegistry = registry.category('website_systray');
+
+class PublishSystray extends Component {
+    setup() {
+        this.website = useService('website');
+        this.rpc = useService('rpc');
+
+        this.state = useState({
+            published: this.website.currentWebsite.metadata.isPublished,
+        });
+
+        useBus(websiteSystrayRegistry, 'CONTENT-UPDATED', () => this.state.published = this.website.currentWebsite.metadata.isPublished);
+    }
+
+    get label() {
+        return this.state.published ? this.env._t("Published") : this.env._t("Unpublished");
+    }
+
+    publishContent() {
+        this.state.published = !this.state.published;
+        const { metadata: { mainObject } } = this.website.currentWebsite;
+        return this.rpc('/website/publish', {
+            id: mainObject.id,
+            object: mainObject.model,
+        });
+    }
+}
+PublishSystray.template = xml`
+<div t-on-click="publishContent" class="o_menu_systray_item d-md-flex ml-auto">
+    <a href="#">
+        <Switch value="state.published" extraClasses="'mb-0 o_switch_danger_success'"/>
+        <t t-esc="this.label"/>
+    </a>
+</div>`;
+PublishSystray.components = {
+    Switch
+};
+
+export const systrayItem = {
+    Component: PublishSystray,
+    isDisplayed: env => env.services.website.currentWebsite && env.services.website.currentWebsite.metadata.canPublish,
+};
+
+websiteSystrayRegistry.add("Publish", systrayItem, { sequence: 12 });
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index 821087fc54d..d06fab82b78 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -75,11 +75,7 @@
                     </t>
                 </div>
 
-                <div class="o_menu_systray d-none d-md-flex ml-auto" groups="website.group_website_publisher">
-                    <t t-call="website.website_publisher">
-                        <t t-set="extra_classes" t-valuef="o_menu_systray_item"/>
-                        <t t-set="desktop_navbar" t-value="true"/>
-                    </t>
+                <div class="o_menu_systray d-none d-md-flex" groups="website.group_website_publisher">
                     <!-- Mobile preview -->
                     <div class="o_mobile_preview o_menu_systray_item" id="mobile-menu">
                         <a data-action="show-mobile-preview" href="#" accesskey="v"><span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-lg fa-mobile"/></a>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index ccf526bcc80..8068e0b8d96 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -49,6 +49,8 @@
             'data-main-object': repr(main_object) if main_object else None,
             'data-seo-object': repr(seo_object) if seo_object else None,
             'data-oe-company-name': res_company.name,
+            'data-is-published': 'website_published' in main_object.fields_get() and main_object.website_published,
+            'data-can-publish': 'can_publish' in main_object.fields_get() and main_object.can_publish,
         })"/>
     </xpath>
 

From d2ed93f780df569710cedb135bb972ed8ce5d774 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Mon, 17 Jan 2022 10:59:08 +0100
Subject: [PATCH 17/88] [IMP] website: switch to fullscreen when pressing esc

See merge commit for more information.

task-2687506

Co-authored-by: Arthur Detroux <ard@odoo.com>
---
 addons/website/__manifest__.py                |  3 +-
 .../website_preview/website_preview.js        |  6 ++
 .../website_preview/website_preview.scss      | 16 ++++++
 .../fullscreen_indication.js                  | 57 +++++++------------
 .../fullscreen_indication.scss                | 29 ++++++++++
 .../website/static/src/js/content/redirect.js |  2 +
 .../static/src/js/content/website_root.js     | 51 -----------------
 .../static/src/services/website_service.js    | 22 ++++++-
 8 files changed, 96 insertions(+), 90 deletions(-)
 create mode 100644 addons/website/static/src/components/fullscreen_indication/fullscreen_indication.scss

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index a44a94a31aa..4d62e453d21 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -125,7 +125,6 @@
             'website/static/src/js/utils.js',
             'website/static/src/js/content/website_root.js',
             'website/static/src/js/widgets/dialog.js',
-            'website/static/src/components/fullscreen_indication/fullscreen_indication.js',
             'website/static/src/js/content/compatibility.js',
             'website/static/src/js/content/menu.js',
             'website/static/src/js/content/snippets.animation.js',
@@ -179,6 +178,8 @@
             'website/static/src/components/dialog/dialog.scss',
             'website/static/src/components/switch/switch.js',
             'website/static/src/components/switch/switch.scss',
+            'website/static/src/components/fullscreen_indication/fullscreen_indication.js',
+            'website/static/src/components/fullscreen_indication/fullscreen_indication.scss',
             'website/static/src/systray_items/*.js',
             'website/static/src/systray_items/*.scss',
         ],
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 4081a9be3f2..802d47ae96c 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -116,6 +116,12 @@ export class WebsitePreview extends Component {
                 window.location.replace(href);
             }
         });
+        this.iframe.el.contentDocument.addEventListener('keydown', ev => {
+            this.iframe.el.dispatchEvent(new KeyboardEvent('keydown', ev));
+        });
+        this.iframe.el.contentDocument.addEventListener('keyup', ev => {
+            this.iframe.el.dispatchEvent(new KeyboardEvent('keyup', ev));
+        });
     }
 }
 WebsitePreview.template = 'website.WebsitePreview';
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.scss b/addons/website/static/src/client_actions/website_preview/website_preview.scss
index 89b84d2f969..3ed836b4881 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.scss
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.scss
@@ -9,3 +9,19 @@
         border: none;
     }
 }
+
+.o_website_fullscreen, .editor_has_snippets {
+    header {
+        .o_main_navbar {
+            height: 0px;
+            transform: translateY(-$o-navbar-height);
+            border-bottom: 0px;
+        }
+    }
+}
+
+header {
+    .o_main_navbar {
+        transition: transform 400ms ease, height 400ms ease, border-bottom 400ms ease;
+    }
+}
diff --git a/addons/website/static/src/components/fullscreen_indication/fullscreen_indication.js b/addons/website/static/src/components/fullscreen_indication/fullscreen_indication.js
index 44ffc379994..f7ef058d72e 100644
--- a/addons/website/static/src/components/fullscreen_indication/fullscreen_indication.js
+++ b/addons/website/static/src/components/fullscreen_indication/fullscreen_indication.js
@@ -1,40 +1,27 @@
 /** @odoo-module **/
 
-import Widget from 'web.Widget';
+const { Component, xml, useState } = owl;
 
-export const FullscreenIndication = Widget.extend({
-    xmlDependencies: ['/website/static/src/xml/website.xml'],
-    template: 'website.fullscreen_indication', 
+export class FullscreenIndication extends Component {
+    setup() {
+        this.state = useState({ isVisible: false });
+        this.props.bus.on('FULLSCREEN-INDICATION-SHOW', this, this.show);
+        this.props.bus.on('FULLSCREEN-INDICATION-HIDE', this, this.hide);
+    }
 
-    init: function () {
-        this.visible = false;
-        this.displayTime = 2000;
-        this._super(...arguments);
-    },
+    show() {
+        setTimeout(() => this.state.isVisible = true);
+        this.autofade = setTimeout(() => this.state.isVisible = false, 2000);
+    }
 
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Displays the fullscreen indication modal
-     */
-    show: function () {
-        clearTimeout(this.autofade);
-        this.visible = true;
-        this.el.classList.add('o_transition', 'o_visible');
-        this.autofade = setTimeout(() => {
-            this.hide(true);
-        }, this.displayTime);
-    },
-    /**
-     * Hides the fullscreen indication modal with optionnal transition
-     * 
-     * @param {boolean} [withTransition=false]
-     */
-    hide: function (withTransition = false) {
-        this.el.classList.toggle('o_transition', withTransition);
-        this.el.classList.remove('o_visible');
-        this.visible = false;
-    },
-});
+    hide() {
+        if (this.state.isVisible) {
+            this.state.isVisible = false;
+            clearTimeout(this.autofade);
+        }
+    }
+}
+FullscreenIndication.template = xml`
+<div class="o_fullscreen_indication" t-att-class="{ o_visible: state.isVisible }">
+    <p>Press <span>esc</span> to exit full screen</p>
+</div>`;
diff --git a/addons/website/static/src/components/fullscreen_indication/fullscreen_indication.scss b/addons/website/static/src/components/fullscreen_indication/fullscreen_indication.scss
new file mode 100644
index 00000000000..9f4222bcef1
--- /dev/null
+++ b/addons/website/static/src/components/fullscreen_indication/fullscreen_indication.scss
@@ -0,0 +1,29 @@
+.o_fullscreen_indication {
+    display: flex;
+    position: absolute;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    margin-top: $o-navbar-height!important;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 400ms ease;
+
+    p {
+        padding: 15px 30px;
+        background-color: rgba(0, 0, 0, 0.7);
+        color: white;
+        span {
+            border: 1px solid white;
+            border-color: white;
+            border-radius: 5px;
+            padding: 7px 5px;
+            margin: 5px;
+        }
+    }
+
+    &.o_visible {
+        opacity: 1;
+    }
+}
diff --git a/addons/website/static/src/js/content/redirect.js b/addons/website/static/src/js/content/redirect.js
index 482d93db7e0..fc42161742f 100644
--- a/addons/website/static/src/js/content/redirect.js
+++ b/addons/website/static/src/js/content/redirect.js
@@ -7,6 +7,8 @@ const _t = str => str;
 /**
  * This script, served with frontend pages, displays buttons in the top left
  * corner to provide the authenticated user an access to his odoo backend.
+ * In the case of the page being viewed in the website_preview client action,
+ * it will forward some events to its parent.
  */
 document.addEventListener('DOMContentLoaded', () => {
     if (session.is_website_user) {
diff --git a/addons/website/static/src/js/content/website_root.js b/addons/website/static/src/js/content/website_root.js
index 4d51544d21f..9453913ab85 100644
--- a/addons/website/static/src/js/content/website_root.js
+++ b/addons/website/static/src/js/content/website_root.js
@@ -7,7 +7,6 @@ import {Markup} from 'web.utils';
 import session from 'web.session';
 import publicRootData from 'web.public.root';
 import "web.zoomodoo";
-import { FullscreenIndication } from '@website/components/fullscreen_indication/fullscreen_indication';
 
 export const WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMixin, {
     // TODO remove KeyboardNavigationMixin in master
@@ -35,16 +34,6 @@ export const WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMi
         });
         return this._super(...arguments);
     },
-    /**
-     * @override
-     */
-    willStart: async function () {
-        this.fullscreenIndication = new FullscreenIndication(this);
-        return Promise.all([
-            this._super(...arguments),
-            this.fullscreenIndication.appendTo(document.body),
-        ]);
-    },
     /**
      * @override
      */
@@ -170,45 +159,6 @@ export const WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMi
         }
         return this._gmapAPILoading;
     },
-    /**
-     * Toggles the fullscreen mode.
-     *
-     * @private
-     * @param {boolean} state toggle fullscreen on/off (true/false)
-     */
-    _toggleFullscreen(state) {
-        this.isFullscreen = state;
-        if (this.isFullscreen) {
-            this.fullscreenIndication.show();
-        } else {
-            this.fullscreenIndication.hide();
-        }
-        document.body.classList.add('o_fullscreen_transition');
-        document.body.classList.toggle('o_fullscreen', this.isFullscreen);
-        document.body.style.overflowX = 'hidden';
-        let resizing = true;
-        window.requestAnimationFrame(function resizeFunction() {
-            window.dispatchEvent(new Event('resize'));
-            if (resizing) {
-                window.requestAnimationFrame(resizeFunction);
-            }
-        });
-        let stopResizing;
-        const onTransitionEnd = ev => {
-            if (ev.target === document.body && ev.propertyName === 'padding-top') {
-                stopResizing();
-            }
-        };
-        stopResizing = () => {
-            resizing = false;
-            document.body.style.overflowX = '';
-            document.body.removeEventListener('transitionend', onTransitionEnd);
-            document.body.classList.remove('o_fullscreen_transition');
-        };
-        document.body.addEventListener('transitionend', onTransitionEnd);
-        // Safeguard in case the transitionend event doesn't trigger for whatever reason.
-        window.setTimeout(() => stopResizing(), 500);
-    },
 
     //--------------------------------------------------------------------------
     // Handlers
@@ -329,7 +279,6 @@ export const WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMi
         if (ev.keyCode !== $.ui.keyCode.ESCAPE || !document.body.contains(ev.target) || ev.target.closest('.modal')) {
             return KeyboardNavigationMixin._onKeyDown.apply(this, arguments);
         }
-        this._toggleFullscreen(!this.isFullscreen);
     },
 });
 
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index be467016f5a..0f8e1a81ad2 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -2,7 +2,9 @@
 
 import { registry } from '@web/core/registry';
 
-const { reactive } = owl;
+import { FullscreenIndication } from '../components/fullscreen_indication/fullscreen_indication';
+
+const { reactive, EventBus } = owl;
 
 const websiteSystrayRegistry = registry.category('website_systray');
 
@@ -18,19 +20,33 @@ export const unslugHtmlDataObject = (repr) => {
 };
 
 export const websiteService = {
-    dependencies: ['orm', 'action'],
-    async start(env, { orm, action }) {
+    dependencies: ['orm', 'action', 'hotkey'],
+    async start(env, { orm, action, hotkey }) {
         let websites = [];
         let currentWebsiteId;
         let currentMetadata = {};
+        let fullscreen;
         const context = reactive({
             showNewContentModal: false,
         });
+        const bus = new EventBus();
 
         const setCurrentWebsiteId = id => {
             currentWebsiteId = id;
             websiteSystrayRegistry.trigger('EDIT-WEBSITE');
         };
+        hotkey.add("escape", () => {
+            // Toggle fullscreen mode when pressing escape.
+            if (currentWebsiteId) {
+                fullscreen = !fullscreen;
+                document.body.classList.toggle('o_website_fullscreen', fullscreen);
+                bus.trigger((fullscreen ? 'FULLSCREEN-INDICATION-SHOW' : 'FULLSCREEN-INDICATION-HIDE'));
+            }
+        });
+        registry.category('main_components').add('FullscreenIndication', {
+            Component: FullscreenIndication,
+            props: { bus },
+        });
         return {
             set currentWebsiteId(id) {
                 setCurrentWebsiteId(id);

From c4a8f86265ab810edfe9889fb0037d3ab6bc52d6 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Mon, 17 Jan 2022 17:40:58 +0100
Subject: [PATCH 18/88] [IMP] website, *: implement some "add new content"
 actions

*: website_sale, website_hr_recruitment

See merge commit for more information.

task-2687506
---
 .../views/website_navbar_templates.xml        | 20 --------
 .../src/js/systray_items/new_content.js       |  4 +-
 .../website_hr_recruitment_templates.xml      | 14 ------
 .../src/js/systray_items/new_content.js       | 44 ++++++++++++++++-
 .../static/src/js/website_sale.editor.js      | 49 -------------------
 addons/website_sale/views/templates.xml       | 11 -----
 6 files changed, 46 insertions(+), 96 deletions(-)

diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index d06fab82b78..d9c909f52e7 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -120,26 +120,6 @@
                                             <p>Forum</p>
                                         </a>
                                     </div>
-                                    <t t-set="mod" t-value="env.ref('base.module_website_hr_recruitment')"/>
-                                    <div name="module_website_hr_recruitment" t-if='is_system' t-cache="is_system"
-                                         t-att-data-module-id="mod.id"
-                                         t-att-data-module-shortdesc="mod.shortdesc"
-                                         class="col-md-4 mb8 o_new_content_element">
-                                            <a href="#">
-                                                <i class="fa fa-briefcase"/>
-                                                <p>Job Offer</p>
-                                            </a>
-                                    </div>
-                                    <t t-set="mod" t-value="env.ref('base.module_website_sale')"/>
-                                    <div name="module_website_sale" t-if='is_system' t-cache="is_system"
-                                         t-att-data-module-id="mod.id"
-                                         t-att-data-module-shortdesc="mod.shortdesc"
-                                         class="col-md-4 mb8 o_new_content_element">
-                                        <a href="#" data-action="new_product">
-                                            <i class="fa fa-shopping-cart"/>
-                                            <p>Product</p>
-                                        </a>
-                                    </div>
                                     <t t-set="mod" t-value="env.ref('base.module_website_slides')"/>
                                     <div name="module_website_slides" t-if='is_system' t-cache="is_system"
                                          t-att-data-module-id="mod.id"
diff --git a/addons/website_hr_recruitment/static/src/js/systray_items/new_content.js b/addons/website_hr_recruitment/static/src/js/systray_items/new_content.js
index 2d2e4205576..e2de481223e 100644
--- a/addons/website_hr_recruitment/static/src/js/systray_items/new_content.js
+++ b/addons/website_hr_recruitment/static/src/js/systray_items/new_content.js
@@ -12,5 +12,7 @@ patch(NewContentModal.prototype, 'website_hr_recruitment_new_content', {
         newJobElement.status = MODULE_STATUS.INSTALLED;
     },
 
-    async createNewJob() {}
+    createNewJob() {
+        this.website.goToWebsite({ path: '/jobs/add' });
+    }
 });
diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
index 31ae1405c55..16547dcd72f 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -593,18 +593,4 @@
     </xpath>
 </template>
 
-<!-- User Navbar -->
-<template id="user_navbar_inherit_website_hr_recruitment" inherit_id="website.user_navbar">
-    <xpath expr="//div[@id='o_new_content_menu_choices']//div[@name='module_website_hr_recruitment']/a" position="attributes">
-        <attribute name="href">/jobs/add</attribute>
-    </xpath>
-    <xpath expr="//div[@id='o_new_content_menu_choices']//div[@name='module_website_hr_recruitment']" position="attributes">
-        <attribute name="name"/>
-        <attribute name="t-att-data-module-id"/>
-        <attribute name="t-att-data-module-shortdesc"/>
-        <attribute name="t-if">is_designer</attribute>
-        <attribute name="t-cache"/>
-    </xpath>
-</template>
-
 </odoo>
diff --git a/addons/website_sale/static/src/js/systray_items/new_content.js b/addons/website_sale/static/src/js/systray_items/new_content.js
index f1985c4d566..f4754321856 100644
--- a/addons/website_sale/static/src/js/systray_items/new_content.js
+++ b/addons/website_sale/static/src/js/systray_items/new_content.js
@@ -2,6 +2,39 @@
 
 import { NewContentModal, MODULE_STATUS } from '@website/systray_items/new_content';
 import { patch } from 'web.utils';
+import { WebsiteDialog } from '@website/components/dialog/dialog';
+
+const { xml, useState } = owl;
+
+export class AddProductDialog extends WebsiteDialog {
+    setup() {
+        super.setup();
+
+        this.title = this.env._t("New Product");
+        this.primaryTitle = this.env._t("Create");
+
+        this.state = useState({
+            name: '',
+        });
+    }
+
+    async primaryClick() {
+        await this.props.addProduct(this.state.name);
+        this.close();
+    }
+}
+AddProductDialog.bodyTemplate = xml`
+<div>
+    <div class="form-group row">
+        <label class="col-form-label col-md-3">
+            Product Name
+        </label>
+        <div class="col-md-9">
+            <input type="text" t-model="state.name" class="form-control" required="required"/>
+        </div>
+    </div>
+</div>
+`;
 
 patch(NewContentModal.prototype, 'website_sale_new_content', {
     setup() {
@@ -12,5 +45,14 @@ patch(NewContentModal.prototype, 'website_sale_new_content', {
         newProductElement.status = MODULE_STATUS.INSTALLED;
     },
 
-    createNewProduct() {}
+    createNewProduct() {
+        this.dialogs.add(AddProductDialog, {
+            addProduct: async (name) => {
+                const url = await this.rpc('/shop/add_product', {
+                    name,
+                });
+                this.website.goToWebsite({ path: url });
+            },
+        });
+    }
 });
diff --git a/addons/website_sale/static/src/js/website_sale.editor.js b/addons/website_sale/static/src/js/website_sale.editor.js
index 5dc1e6af504..4a367e8c5d8 100644
--- a/addons/website_sale/static/src/js/website_sale.editor.js
+++ b/addons/website_sale/static/src/js/website_sale.editor.js
@@ -1,52 +1,3 @@
-odoo.define('website_sale.add_product', function (require) {
-'use strict';
-
-var core = require('web.core');
-var wUtils = require('website.utils');
-var WebsiteNewMenu = require('website.newMenu');
-
-var _t = core._t;
-
-WebsiteNewMenu.include({
-    actions: _.extend({}, WebsiteNewMenu.prototype.actions || {}, {
-        new_product: '_createNewProduct',
-    }),
-
-    //--------------------------------------------------------------------------
-    // Actions
-    //--------------------------------------------------------------------------
-
-    /**
-     * Asks the user information about a new product to create, then creates it
-     * and redirects the user to this new product.
-     *
-     * @private
-     * @returns {Promise} Unresolved if there is a redirection
-     */
-    _createNewProduct: function () {
-        var self = this;
-        return wUtils.prompt({
-            id: "editor_new_product",
-            window_title: _t("New Product"),
-            input: _t("Product Name"),
-        }).then(function (result) {
-            if (!result.val) {
-                return;
-            }
-            return self._rpc({
-                route: '/shop/add_product',
-                params: {
-                    name: result.val,
-                },
-            }).then(function (url) {
-                window.location.href = url;
-                return new Promise(function () {});
-            });
-        });
-    },
-});
-});
-
 odoo.define('website_sale.editMenu', function (require) {
     'use strict';
 
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 57c1d43a7ca..5c61a1516a7 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -1985,17 +1985,6 @@
         </xpath>
     </template>
 
-    <!-- User Navbar -->
-    <template id="user_navbar_inherit_website_sale" inherit_id="website.user_navbar">
-        <xpath expr="//div[@id='o_new_content_menu_choices']//div[@name='module_website_sale']" position="attributes">
-            <attribute name="name"/>
-            <attribute name="t-att-data-module-id"/>
-            <attribute name="t-att-data-module-shortdesc"/>
-            <attribute name="t-if">env.user.has_group('sales_team.group_sale_manager')</attribute>
-            <attribute name="t-cache"/>
-        </xpath>
-    </template>
-
     <template id="sale_order_portal_content_inherit_website_sale" name="Orders Followup Products Links" inherit_id="sale.sale_order_portal_content">
         <xpath expr="//section[@id='details']//td[@id='product_name']/*" position="replace">
             <a t-if="line.product_id.website_published" t-att-href="line.product_id.website_url">

From 2c77b90eee4945d25e9d7f0ffe24484cf91b650a Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Fri, 11 Feb 2022 09:30:13 +0100
Subject: [PATCH 19/88] [IMP] web_editor, website: add edit menu

This commit also suggests a way to conditionnaly display menus. Here the
website edit menu should only be visible when the website is displayed.

There may be a better way to filter out some menus. That feature will
be reviewed anyway as part of a `patch` the framework team would like to
avoid.

See merge commit for more information.

task-2687506
---
 .../static/src/scss/web_editor.common.scss    |    6 +-
 addons/website/__manifest__.py                |    6 +-
 .../static/src/components/dialog/edit_menu.js | 1257 ++---------------
 .../src/components/dialog/edit_menu.xml       |   71 +-
 .../static/src/components/navbar/navbar.js    |   41 +
 .../static/src/services/website_service.js    |    2 +-
 addons/website/views/website_views.xml        |    6 +
 7 files changed, 248 insertions(+), 1141 deletions(-)

diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index d292b94a1a2..321a0a3bb01 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -287,7 +287,11 @@ ul.oe_menu_editor {
         list-style: none;
     }
     li div {
-        cursor: move;
+        @include o-grab-cursor;
+
+        :active {
+            cursor: grabbing;
+        }
     }
 }
 
diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 4d62e453d21..fdc8bfc5acc 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -174,8 +174,8 @@
             'website/static/src/client_actions/*/*.scss',
             'website/static/src/services/website_service.js',
             'website/static/src/components/navbar/navbar.js',
-            'website/static/src/components/dialog/dialog.js',
-            'website/static/src/components/dialog/dialog.scss',
+            'website/static/src/components/dialog/*.js',
+            'website/static/src/components/dialog/*.scss',
             'website/static/src/components/switch/switch.js',
             'website/static/src/components/switch/switch.scss',
             'website/static/src/components/fullscreen_indication/fullscreen_indication.js',
@@ -251,7 +251,7 @@
             'website/static/src/xml/website.backend.xml',
             'website/static/src/xml/website_widget.xml',
             'website/static/src/xml/theme_preview.xml',
-            'website/static/src/components/dialog/dialog.xml',
+            'website/static/src/components/dialog/*',
             'website/static/src/client_actions/*/*.xml',
             'website/static/src/systray_items/*.xml',
         ],
diff --git a/addons/website/static/src/components/dialog/edit_menu.js b/addons/website/static/src/components/dialog/edit_menu.js
index 6cb7809f507..bff6f86d96c 100644
--- a/addons/website/static/src/components/dialog/edit_menu.js
+++ b/addons/website/static/src/components/dialog/edit_menu.js
@@ -1,1139 +1,188 @@
-/** @odoo-module alias=website.contentMenu */
+/** @odoo-module **/
 
-import Class from 'web.Class';
-import core from 'web.core';
-import Dialog from 'web.Dialog';
-import time from 'web.time';
-import weWidgets from 'wysiwyg.widgets';
-import websiteNavbarData from 'website.navbar';
-import Widget from 'web.Widget';
-import { Markup } from 'web.utils';
+import { useService } from '@web/core/utils/hooks';
+import { WebsiteDialog } from './dialog';
 
-import { registry } from "@web/core/registry";
+const { Component, useState, useEffect, onWillStart, useRef, onMounted } = owl;
 
-var _t = core._t;
-var qweb = core.qweb;
+class MenuDialog extends WebsiteDialog {
+    setup() {
+        super.setup();
 
-var PagePropertiesDialog = weWidgets.Dialog.extend({
-    template: 'website.pagesMenu.page_info',
-    xmlDependencies: weWidgets.Dialog.prototype.xmlDependencies.concat(
-        ['/website/static/src/components/dialog/page_properties.xml']
-    ),
-    events: _.extend({}, weWidgets.Dialog.prototype.events, {
-        'keyup input#page_name': '_onNameChanged',
-        'keyup input#page_url': '_onUrlChanged',
-        'change input#create_redirect': '_onCreateRedirectChanged',
-        'click input#visibility_password': '_onPasswordClicked',
-        'change input#visibility_password': '_onPasswordChanged',
-        'change select#visibility': '_onVisibilityChanged',
-        'error.datetimepicker': '_onDateTimePickerError',
-    }),
+        this.title = this.env._t("Add a menu item");
 
-    /**
-     * @constructor
-     * @override
-     */
-    init: function (parent, page_id, options) {
-        var self = this;
-        var serverUrl = window.location.origin + '/';
-        var length_url = serverUrl.length;
-        var serverUrlTrunc = serverUrl;
-        if (length_url > 30) {
-            serverUrlTrunc = serverUrl.slice(0,14) + '..' + serverUrl.slice(-14);
-        }
-        this.serverUrl = serverUrl;
-        this.serverUrlTrunc = serverUrlTrunc;
-        this.current_page_url = window.location.pathname;
-        this.page_id = page_id;
-
-        var buttons = [
-            {text: _t("Save"), classes: 'btn-primary', click: this.save},
-            {text: _t("Discard"), classes: 'mr-auto', close: true},
-        ];
-        if (options.fromPageManagement) {
-            buttons.push({
-                text: _t("Go To Page"),
-                icon: 'fa-globe',
-                classes: 'btn-link',
-                click: function (e) {
-                    window.location.href = '/' + self.page.url;
-                },
-            });
-        }
-        buttons.push({
-            text: _t("Duplicate Page"),
-            icon: 'fa-clone',
-            classes: 'btn-link',
-            click: function (e) {
-                // modal('hide') will break the rpc, so hide manually
-                this.$el.closest('.modal').addClass('d-none');
-                _clonePage.call(this, self.page_id);
-            },
+        this.state = useState({
+            name: this.props.name,
+            url: this.props.url,
         });
-        buttons.push({
-            text: _t("Delete Page"),
-            icon: 'fa-trash',
-            classes: 'btn-link',
-            click: function (e) {
-                _deletePage.call(this, self.page_id, options.fromPageManagement);
-            },
-        });
-        this._super(parent, _.extend({}, {
-            title: _t("Page Properties"),
-            size: 'medium',
-            buttons: buttons,
-        }, options || {}));
-    },
-    /**
-     * @override
-     */
-    willStart: function () {
-        var defs = [this._super.apply(this, arguments)];
-        var self = this;
+    }
 
-        defs.push(this._rpc({
-            model: 'website.page',
-            method: 'get_page_properties',
-            args: [this.page_id],
-        }).then(function (page) {
-            page.url = _.str.startsWith(page.url, '/') ? page.url.substring(1) : page.url;
-            page.hasSingleGroup = page.group_id !== undefined;
-            self.page = page;
-        }));
+    primaryClick() {
+        this.props.save(this.state.name, this.state.url);
+        this.close();
+    }
+}
+MenuDialog.bodyTemplate = 'website.MenuDialog';
+MenuDialog.props = {
+    ...WebsiteDialog.props,
+    name: { type: String, optional: true },
+    url: { type: String, optional: true },
+    isMegaMenu: { type: Boolean, optional: true },
+    save: Function,
+};
+MenuDialog.defaultProps = {
+    name: '',
+    url: '/',
+};
 
-        return Promise.all(defs);
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        var self = this;
+class MenuRow extends Component {
+    edit() {
+        this.props.edit(this.props.menu.fields['id']);
+    }
 
-        var defs = [this._super.apply(this, arguments)];
+    delete() {
+        this.props.delete(this.props.menu.fields['id']);
+    }
+}
+MenuRow.props = {
+    menu: Object,
+    edit: Function,
+    delete: Function,
+};
+MenuRow.template = 'website.MenuRow';
+MenuRow.components = {
+    MenuRow,
+};
 
-        this.$('.ask_for_redirect').addClass('d-none');
-        this.$('.redirect_type').addClass('d-none');
-        this.$('.warn_about_call').addClass('d-none');
-        if (this.page.visibility !== 'password') {
-            this.$('.show_visibility_password').addClass('d-none');
-        }
-        if (this.page.visibility !== 'restricted_group') {
-            this.$('.show_group_id').addClass('d-none');
-        }
-        this.autocompleteWithGroups(this.$('#group_id'));
+export class EditMenuDialog extends WebsiteDialog {
+    setup() {
+        super.setup();
+        this.orm = useService('orm');
+        this.website = useService('website');
+        this.dialogs = useService('dialog');
 
-        defs.push(this._getPageDependencies(this.page_id)
-        .then(function (dependencies) {
-            var dep_text = [];
-            _.each(dependencies, function (value, index) {
-                if (value.length > 0) {
-                    dep_text.push(value.length + ' ' + index.toLowerCase());
-                }
-            });
-            dep_text = dep_text.join(', ');
-            self.$('#dependencies_redirect').html(qweb.render('website.show_page_dependencies', { dependencies: dependencies, dep_text: dep_text }));
-            self.$('a.o_dependencies_redirect_link').on('click', () => {
-                self.$('.o_dependencies_redirect_list_popover').popover({
-                    html: true,
-                    title: _t('Dependencies'),
-                    boundary: 'viewport',
-                    placement: 'right',
-                    trigger: 'focus',
-                    content: () => {
-                        return qweb.render('website.get_tooltip_dependencies', {
-                            dependencies: dependencies,
-                        });
-                    },
-                    template: qweb.render('website.page_dependencies_popover'),
-                }).popover('toggle');
-            });
-        }));
+        this.title = this.env._t("Edit Menu");
+        this.primaryTitle = this.env._t("Save");
 
-        defs.push(this._getSupportedMimetype()
-        .then(function (mimetypes) {
-            self.supportedMimetype = mimetypes;
-        }));
+        this.menuEditor = useRef('menu-editor');
 
-        defs.push(this._getPageKeyDependencies(this.page_id)
-        .then(function (dependencies) {
-            var dep_text = [];
-            _.each(dependencies, function (value, index) {
-                if (value.length > 0) {
-                    dep_text.push(value.length + ' ' + index.toLowerCase());
-                }
-            });
-            dep_text = dep_text.join(', ');
-            self.$('.warn_about_call').html(qweb.render('website.show_page_key_dependencies', {dependencies: dependencies, dep_text: dep_text}));
-            self.$('.warn_about_call [data-toggle="popover"]').popover({
-               container: 'body',
-            });
-        }));
+        this.state = useState({ rootMenu: {} });
 
-        defs.push(this._rpc({model: 'res.users',
-                             method: 'has_group',
-                             args: ['website.group_multi_website']})
-                  .then(function (has_group) {
-                      if (!has_group) {
-                          self.$('#website_restriction').addClass('hidden');
-                      }
-                  }));
-
-        var datepickersOptions = {
-            minDate: moment({ y: 1000 }),
-            maxDate: moment().add(200, 'y'),
-            calendarWeeks: true,
-            icons : {
-                time: 'fa fa-clock-o',
-                date: 'fa fa-calendar',
-                next: 'fa fa-chevron-right',
-                previous: 'fa fa-chevron-left',
-                up: 'fa fa-chevron-up',
-                down: 'fa fa-chevron-down',
-            },
-            locale : moment.locale(),
-            format : time.getLangDatetimeFormat(),
-            widgetPositioning : {
-                horizontal: 'auto',
-                vertical: 'top',
-            },
-             widgetParent: 'body',
-        };
-        if (this.page.date_publish) {
-            datepickersOptions.defaultDate = time.str_to_datetime(this.page.date_publish);
-        }
-        this.$('#date_publish_container').datetimepicker(datepickersOptions);
-        return Promise.all(defs);
-    },
-    /**
-     * @override
-     */
-    destroy: function () {
-        $('.popover').popover('hide');
-        return this._super.apply(this, arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    save: function (data) {
-        var self = this;
-        var context;
-        this.trigger_up('context_get', {
-            callback: function (ctx) {
-                context = ctx;
-            },
-        });
-        var url = this.$('#page_url').val();
-
-        var $datePublish = this.$("#date_publish");
-        $datePublish.closest(".form-group").removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
-        var datePublish = $datePublish.val();
-        if (datePublish !== "") {
-            datePublish = this._parse_date(datePublish);
-            if (!datePublish) {
-                $datePublish.closest(".form-group").addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
-                return;
-            }
-        }
-        var params = {
-            id: this.page.id,
-            name: this.$('#page_name').val(),
-            // Replace duplicate following '/' by only one '/'
-            url: url.replace(/\/{2,}/g, '/'),
-            is_menu: this.$('#is_menu').prop('checked'),
-            is_homepage: this.$('#is_homepage').prop('checked'),
-            website_published: this.$('#is_published').prop('checked'),
-            create_redirect: this.$('#create_redirect').prop('checked'),
-            redirect_type: this.$('#redirect_type').val(),
-            website_indexed: this.$('#is_indexed').prop('checked'),
-            visibility: this.$('#visibility').val(),
-            date_publish: datePublish,
-        };
-        if (this.page.hasSingleGroup && this.$('#visibility').val() === 'restricted_group') {
-            params['group_id'] = this.$('#group_id').data('group-id');
-        }
-        if (this.$('#visibility').val() === 'password') {
-            var field_pwd = $('#visibility_password');
-            if (!field_pwd.get(0).reportValidity()) {
-                return;
-            }
-            if (field_pwd.data('dirty')) {
-                params['visibility_pwd'] = field_pwd.val();
-            }
-        }
-
-        this._rpc({
-            model: 'website.page',
-            method: 'save_page_info',
-            args: [[context.website_id], params],
-        }).then(function (url) {
-            // If from page manager: reload url, if from page itself: go to
-            // (possibly) new url
-            var mo;
-            self.trigger_up('main_object_request', {
-                callback: function (value) {
-                    mo = value;
-                },
-            });
-            if (mo.model === 'website.page') {
-                window.location.href = url.toLowerCase();
-            } else {
-                window.location.reload(true);
-            }
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Retrieves the page URL dependencies for the given object id.
-     *
-     * @private
-     * @param {integer} moID
-     * @returns {Promise<Array>}
-     */
-    _getPageDependencies: function (moID) {
-        return this._rpc({
-            model: 'website',
-            method: 'page_search_dependencies',
-            args: [moID],
-        });
-    },
-    /**
-     * Retrieves the page's key dependencies for the given object id.
-     *
-     * @private
-     * @param {integer} moID
-     * @returns {Promise<Array>}
-     */
-    _getPageKeyDependencies: function (moID) {
-        return this._rpc({
-            model: 'website',
-            method: 'page_search_key_dependencies',
-            args: [moID],
-        });
-    },
-    /**
-     * Retrieves supported mimtype
-     *
-     * @private
-     * @returns {Promise<Array>}
-     */
-    _getSupportedMimetype: function () {
-        return this._rpc({
-            model: 'website',
-            method: 'guess_mimetype',
-        });
-    },
-    /**
-     * Returns information about the page main object.
-     *
-     * @private
-     * @returns {Object} model and id
-     */
-    _getMainObject: function () {
-        var repr = $('html').data('main-object');
-        var m = repr.match(/(.+)\((\d+),(.*)\)/);
-        return {
-            model: m[1],
-            id: m[2] | 0,
-        };
-    },
-    /**
-     * Converts a string representing the browser datetime
-     * (exemple: Albanian: '2018-Qer-22 15.12.35.')
-     * to a string representing UTC in Odoo's datetime string format
-     * (exemple: '2018-04-22 13:12:35').
-     *
-     * The time zone of the datetime string is assumed to be the one of the
-     * browser and it will be converted to UTC (standard for Odoo).
-     *
-     * @private
-     * @param {String} value A string representing a datetime.
-     * @returns {String|false} A string representing an UTC datetime if the given value is valid, false otherwise.
-     */
-    _parse_date: function (value) {
-        var datetime = moment(value, time.getLangDatetimeFormat(), true);
-        if (datetime.isValid()) {
-            return time.datetime_to_str(datetime.toDate());
-        }
-        else {
-            return false;
-        }
-    },
-    /**
-     * Allows the given input to propose existing groups.
-     *
-     * @param {jQuery} $input
-     */
-    autocompleteWithGroups: function ($input) {
-        $input.autocomplete({
-            source: (request, response) => {
-                return this._rpc({
-                    model: 'res.groups',
-                    method: 'search_read',
-                    args: [[['name', 'ilike', request.term]], ['display_name']],
-                    kwargs: {
-                        limit: 15,
-                    },
-                }).then(founds => {
-                    founds = founds.map(g => ({'id': g['id'], 'label': g['display_name']}));
-                    response(founds);
-                });
-            },
-            change: (ev, ui) => {
-                var $target = $(ev.target);
-                if (!ui.item) {
-                    $target.val("");
-                    $target.removeData('group-id');
-                } else {
-                    $target.data('group-id', ui.item.id);
-                }
-            },
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    _onUrlChanged: function () {
-        var url = this.$('input#page_url').val();
-        this.$('.ask_for_redirect').toggleClass('d-none', url === this.page.url);
-    },
-    /**
-     * @private
-     */
-    _onNameChanged: function () {
-        var name = this.$('input#page_name').val();
-        // If the file type is a supported mimetype, check if it is t-called.
-        // If so, warn user. Note: different from page_search_dependencies which
-        // check only for url and not key
-        var ext = '.' + this.page.name.split('.').pop();
-        if (ext in this.supportedMimetype && ext !== '.html') {
-            this.$('.warn_about_call').toggleClass('d-none', name === this.page.name);
-        }
-    },
-    /**
-     * @private
-     */
-    _onCreateRedirectChanged: function () {
-        var createRedirect = this.$('input#create_redirect').prop('checked');
-        this.$('.redirect_type').toggleClass('d-none', !createRedirect);
-    },
-    /**
-     * @private
-     */
-    _onVisibilityChanged: function (ev) {
-        this.$('.show_visibility_password').toggleClass('d-none', ev.target.value !== 'password');
-        this.$('.show_group_id').toggleClass('d-none', ev.target.value !== 'restricted_group');
-        this.$('#visibility_password').attr('required', ev.target.value === 'password');
-    },
-    /**
-     * Library clears the wrong date format so just ignore error
-     *
-     * @private
-     */
-    _onDateTimePickerError: function (ev) {
-        return false;
-    },
-    /**
-     * @private
-     */
-    _onPasswordClicked: function (ev) {
-        ev.target.value = '';
-        this._onPasswordChanged();
-    },
-    /**
-     * @private
-     */
-    _onPasswordChanged: function () {
-        this.$('#visibility_password').data('dirty', 1);
-    },
-});
-
-var MenuEntryDialog = weWidgets.LinkDialog.extend({
-    /**
-     * @constructor
-     */
-    init: function (parent, options, editable, data) {
-        this._super(parent, _.extend({
-            title: _t("Add a menu item"),
-        }, options || {}), editable, _.extend({
-            needLabel: true,
-            content: data.name || '',
-            isNewWindow: data.new_window,
-        }, data || {}));
-
-        this.linkWidget.xmlDependencies = this.linkWidget.xmlDependencies.concat(['/website/static/src/components/dialog/edit_menu.xml']);
-
-        const oldSave = this.linkWidget.save;
-        /**
-         * @override
-         */
-        this.linkWidget.save = () => {
-            var $e = this.$('#o_link_dialog_label_input');
-            if (!$e.val() || !$e[0].checkValidity()) {
-                $e.closest('.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
-                $e.focus();
-                return Promise.reject();
-            }
-            return oldSave.bind(this.linkWidget)();
-        };
-
-        this.menuType = data.menuType;
-    },
-    /**
-     * @override
-     */
-    start: async function () {
-        const res = await this._super(...arguments);
-
-        // Remove style related elements
-        this.$('.o_link_dialog_preview').remove();
-        this.$('input[name="is_new_window"], .link-style').closest('.form-group').remove();
-        this.$modal.find('.modal-lg').removeClass('modal-lg');
-        this.$('form.col-lg-8').removeClass('col-lg-8').addClass('col-12');
-
-        // Adapt URL label
-        this.$('label[for="o_link_dialog_label_input"]').text(_t("Menu Label"));
-
-        // Auto add '#' URL and hide the input if for mega menu
-        if (this.menuType === 'mega') {
-            var $url = this.$('input[name="url"]');
-            $url.val('#').trigger('change');
-            $url.closest('.form-group').addClass('d-none');
-        }
-
-        return res;
-    },
-});
-
-var SelectEditMenuDialog = weWidgets.Dialog.extend({
-    template: 'website.contentMenu.dialog.select',
-    xmlDependencies: weWidgets.Dialog.prototype.xmlDependencies.concat(
-        ['/website/static/src/components/dialog/edit_menu.xml']
-    ),
-
-    /**
-     * @constructor
-     * @override
-     */
-    init: function (parent, options) {
-        var self = this;
-        self.roots = [{id: null, name: _t("Top Menu")}];
-        $('[data-content_menu_id]').each(function () {
-            // Remove name fallback in master
-            self.roots.push({id: $(this).data('content_menu_id'), name: $(this).attr('name') || $(this).data('menu_name')});
-        });
-        this._super(parent, _.extend({}, {
-            title: _t("Select a Menu"),
-            save_text: _t("Continue")
-        }, options || {}));
-    },
-    /**
-     * @override
-     */
-    save: function () {
-        this.final_data = parseInt(this.$el.find('select').val() || null);
-        this._super.apply(this, arguments);
-    },
-});
-
-var EditMenuDialog = weWidgets.Dialog.extend({
-    template: 'website.contentMenu.dialog.edit',
-    xmlDependencies: weWidgets.Dialog.prototype.xmlDependencies.concat(
-        ['/website/static/src/components/dialog/edit_menu.xml']
-    ),
-    events: _.extend({}, weWidgets.Dialog.prototype.events, {
-        'click a.js_add_menu': '_onAddMenuButtonClick',
-        'click button.js_delete_menu': '_onDeleteMenuButtonClick',
-        'click button.js_edit_menu': '_onEditMenuButtonClick',
-    }),
-
-    /**
-     * @constructor
-     * @override
-     */
-    init: function (parent, options, rootID) {
-        this._super(parent, _.extend({}, {
-            title: _t("Edit Menu"),
-            size: 'medium',
-        }, options || {}));
-        this.rootID = rootID;
-        // For the EditMenuDialog, saving the dialog should not close it,
-        // as a reload will be done to show the updated menus.
-        this.closeOnSave = false;
-    },
-    /**
-     * @override
-     */
-    willStart: function () {
-        var defs = [this._super.apply(this, arguments)];
-        var context;
-        this.trigger_up('context_get', {
-            callback: function (ctx) {
-                context = ctx;
-            },
-        });
-        defs.push(this._rpc({
-            model: 'website.menu',
-            method: 'get_tree',
-            args: [context.website_id, this.rootID],
-        }).then(menu => {
-            this.menu = menu;
-            this.rootMenuID = menu.fields['id'];
-            this.flat = this._flatenize(menu);
+        onWillStart(async () => {
+            const menu = await this.orm.call('website.menu', 'get_tree', [this.website.currentWebsite.id, this.props.rootID]);
+            this.state.rootMenu = menu;
+            this.map = new Map();
+            this.populate(this.map, this.state.rootMenu);
             this.toDelete = [];
-        }));
-        return Promise.all(defs);
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        var r = this._super.apply(this, arguments);
-        this.$('.oe_menu_editor').nestedSortable({
-            listType: 'ul',
-            handle: 'div',
-            items: 'li',
-            maxLevels: 2,
-            toleranceElement: '> div',
-            forcePlaceholderSize: true,
-            opacity: 0.6,
-            placeholder: 'oe_menu_placeholder',
-            tolerance: 'pointer',
-            attribute: 'data-menu-id',
-            expression: '()(.+)', // nestedSortable takes the second match of an expression (*sigh*)
-            isAllowed: (placeholder, placeholderParent, currentItem) => {
-                return !placeholderParent
-                    || !currentItem[0].dataset.megaMenu && !placeholderParent[0].dataset.megaMenu;
+        });
+
+        onMounted(() => {
+            this.$sortables = $(this.menuEditor.el);
+            this.$sortables.nestedSortable({
+                listType: 'ul',
+                handle: 'div',
+                items: 'li',
+                maxLevels: 2,
+                toleranceElement: '> div',
+                forcePlaceholderSize: true,
+                opacity: 0.6,
+                placeholder: 'oe_menu_placeholder',
+                tolerance: 'pointer',
+                attribute: 'data-menu-id',
+                expression: '()(.+)', // nestedSortable takes the second match of an expression (*sigh*)
+                isAllowed: (placeholder, placeholderParent, currentItem) => {
+                    return !placeholderParent
+                        || !currentItem[0].dataset.isMegaMenu && !placeholderParent[0].dataset.isMegaMenu;
+                },
+            });
+        });
+    }
+
+    populate(map, menu) {
+        map.set(menu.fields['id'], menu);
+        for (const submenu of menu.children) {
+            this.populate(map, submenu);
+        }
+    }
+
+    addMenu(isMegaMenu) {
+        this.dialogs.add(MenuDialog, {
+            isMegaMenu,
+            save: (name, url, isNewWindow) => {
+                const newMenu = {
+                    fields: {
+                        id: `menu_${(new Date).toISOString()}`,
+                        name,
+                        url: isMegaMenu ? '#' : url,
+                        new_window: isNewWindow,
+                        'is_mega_menu': isMegaMenu,
+                        sequence: 0,
+                        'parent_id': false,
+                    },
+                    'children': [],
+                    'is_homepage': false,
+                };
+                this.map.set(newMenu.fields['id'], newMenu);
+                this.state.rootMenu.children.push(newMenu);
             },
         });
-        return r;
-    },
+    }
 
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    save: function () {
-        var _super = this._super.bind(this);
-        var newMenus = this.$('.oe_menu_editor').nestedSortable('toArray', {startDepthCount: 0});
-        var levels = [];
-        var data = [];
-        var context;
-        this.trigger_up('context_get', {
-            callback: function (ctx) {
-                context = ctx;
+    editMenu(id) {
+        const menuToEdit = this.map.get(id);
+        this.dialogs.add(MenuDialog, {
+            name: menuToEdit.fields['name'],
+            url: menuToEdit.fields['url'],
+            isMegaMenu: menuToEdit.fields['is_mega_menu'],
+            save: (name, url) => {
+                menuToEdit.fields['name'] = name;
+                menuToEdit.fields['url'] = url;
+                // Forces a rerender
+                this.state.rootMenu.children = [...this.state.rootMenu.children];
             },
         });
+    }
+
+    deleteMenu(id) {
+        const menuToDelete = this.map.get(id);
+        const parentId = menuToDelete.fields['parent_id'] || this.state.rootMenu.fields['id'];
+        const parent = this.map.get(parentId);
+        parent.children = parent.children.filter(menu => menu.fields['id'] !== id);
+        this.map.delete(id);
+        this.toDelete.push(id);
+    }
+
+    async primaryClick() {
+        const newMenus = this.$sortables.nestedSortable('toArray', {startDepthCount: 0});
+        const levels = [];
+        const data = [];
+
         // Resequence, re-tree and remove useless data
-        newMenus.forEach(menu => {
+        for (const menu of newMenus) {
             if (menu.id) {
                 levels[menu.depth] = (levels[menu.depth] || 0) + 1;
-                var menuFields = this.flat[menu.id].fields;
+                const {fields: menuFields} = this.map.get(menu.id) || this.map.get(parseInt(menu.id, 10));
                 menuFields['sequence'] = levels[menu.depth];
                 // JQuery's nestedSortable() extracts parent_ids as string.
                 // They must be ints when they are actual existing ids but
                 // remain as strings when they represent a creation ("new-##").
-                menuFields['parent_id'] = parseInt(menu['parent_id']) || menu['parent_id'] || this.rootMenuID;
+                menuFields['parent_id'] = parseInt(menu['parent_id']) || menu['parent_id'] || this.state.rootMenu.fields['id'];
                 data.push(menuFields);
             }
-        });
-        return this._rpc({
-            model: 'website.menu',
-            method: 'save',
-            args: [
-                context.website_id,
-                {
-                    'data': data,
-                    'to_delete': this.toDelete,
-                }
-            ],
-        }).then(() => {
-            return _super(...arguments);
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Returns a mapping id -> menu item containing all the menu items in the
-     * given menu hierarchy.
-     *
-     * @private
-     * @param {Object} node
-     * @param {Object} [_dict] internal use: the mapping being built
-     * @returns {Object}
-     */
-    _flatenize: function (node, _dict) {
-        _dict = _dict || {};
-        _dict[node.fields['id']] = node;
-        node.children.forEach(child => {
-            this._flatenize(child, _dict);
-        });
-        return _dict;
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Called when the "add menu" button is clicked -> Opens the appropriate
-     * dialog to edit this new menu.
-     *
-     * @private
-     * @param {Event} ev
-     */
-    _onAddMenuButtonClick: function (ev) {
-        var menuType = ev.currentTarget.dataset.type;
-        var dialog = new MenuEntryDialog(this, {}, null, {
-            menuType: menuType,
-        });
-        dialog.on('save', this, link => {
-            var newMenu = {
-                'fields': {
-                    'id': _.uniqueId('new-'),
-                    'name': _.unescape(link.content),
-                    'url': link.url,
-                    'new_window': link.isNewWindow,
-                    'is_mega_menu': menuType === 'mega',
-                    'sequence': 0,
-                    'parent_id': false,
-                },
-                'children': [],
-                'is_homepage': false,
-            };
-            this.flat[newMenu.fields['id']] = newMenu;
-            this.$('.oe_menu_editor').append(
-                qweb.render('website.contentMenu.dialog.submenu', {submenu: newMenu})
-            );
-        });
-        dialog.open();
-    },
-    /**
-     * Called when the "delete menu" button is clicked -> Deletes this menu.
-     *
-     * @private
-     */
-    _onDeleteMenuButtonClick: function (ev) {
-        var $menu = $(ev.currentTarget).closest('[data-menu-id]');
-        var menuID = parseInt($menu.data('menu-id'));
-        if (menuID) {
-            this.toDelete.push(menuID);
         }
-        $menu.remove();
-    },
-    /**
-     * Called when the "edit menu" button is clicked -> Opens the appropriate
-     * dialog to edit this menu.
-     *
-     * @private
-     */
-    _onEditMenuButtonClick: function (ev) {
-        var $menu = $(ev.currentTarget).closest('[data-menu-id]');
-        var menuID = $menu.data('menu-id');
-        var menu = this.flat[menuID];
-        if (menu) {
-            var dialog = new MenuEntryDialog(this, {}, null, _.extend({
-                menuType: menu.fields['is_mega_menu'] ? 'mega' : undefined,
-            }, menu.fields));
-            dialog.on('save', this, link => {
-                _.extend(menu.fields, {
-                    'name': _.unescape(link.content),
-                    'url': link.url,
-                    'new_window': link.isNewWindow,
-                });
-                $menu.find('.js_menu_label').first().text(menu.fields['name']);
-            });
-            dialog.open();
-        } else {
-            Dialog.alert(null, "Could not find menu entry");
-        }
-    },
-});
 
-var PageOption = Class.extend({
-    /**
-     * @constructor
-     * @param {string} name
-     *        the option's name = the field's name in website.page model
-     * @param {*} value
-     * @param {function} setValueCallback
-     *        a function which simulates an option's value change without
-     *        asking the server to change it
-     */
-    init: function (name, value, setValueCallback) {
-        this.name = name;
-        this.value = value;
-        this.isDirty = false;
-        this.setValueCallback = setValueCallback;
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Sets the new option's value thanks to the related callback.
-     *
-     * @param {*} [value]
-     *        by default: consider the current value is a boolean and toggle it
-     */
-    setValue: function (value) {
-        if (value === undefined) {
-            value = !this.value;
-        }
-        this.setValueCallback.call(this, value);
-        this.value = value;
-        this.isDirty = true;
-    },
-});
-
-var ContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
-    xmlDependencies: ['/website/static/src/xml/website.xml'],
-    actions: _.extend({}, websiteNavbarData.WebsiteNavbarActionWidget.prototype.actions || {}, {
-        edit_menu: '_editMenu',
-        get_page_option: '_getPageOption',
-        on_save: '_onSave',
-        page_properties: '_pageProperties',
-        toggle_page_option: '_togglePageOption',
-    }),
-    pageOptionsSetValueCallbacks: {
-        header_overlay: function (value) {
-            $('#wrapwrap').toggleClass('o_header_overlay', value);
-        },
-        header_color: function (value) {
-            $('#wrapwrap > header').removeClass(this.value)
-                                   .addClass(value);
-        },
-        header_visible: function (value) {
-            $('#wrapwrap > header').toggleClass('d-none o_snippet_invisible', !value);
-        },
-        footer_visible: function (value) {
-            $('#wrapwrap > footer').toggleClass('d-none o_snippet_invisible', !value);
-        },
-    },
-
-    /**
-     * @override
-     */
-    start: function () {
-        var self = this;
-        this.pageOptions = {};
-        _.each($('.o_page_option_data'), function (el) {
-            var value = el.value;
-            if (value === "True") {
-                value = true;
-            } else if (value === "False") {
-                value = false;
+        await this.orm.call('website.menu', 'save', [
+            this.website.currentWebsite.id,
+            {
+                'data': data,
+                'to_delete': this.toDelete,
             }
-            self.pageOptions[el.name] = new PageOption(
-                el.name,
-                value,
-                self.pageOptionsSetValueCallbacks[el.name]
-            );
-        });
-        return this._super.apply(this, arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Actions
-    //--------------------------------------------------------------------------
-
-    /**
-     * Asks the user which menu to edit if multiple menus exist on the page.
-     * Then opens the menu edition dialog.
-     * Then executes the given callback once the edition is saved, to finally
-     * reload the page.
-     *
-     * @private
-     * @param {function} [beforeReloadCallback]
-     * @returns {Promise}
-     *          Unresolved if the menu is edited and saved as the page will be
-     *          reloaded.
-     *          Resolved otherwise.
-     */
-    _editMenu: function (beforeReloadCallback) {
-        var self = this;
-        return new Promise(function (resolve) {
-            function resolveWhenEditMenuDialogIsCancelled(rootID) {
-                return self._openEditMenuDialog(rootID, beforeReloadCallback).then(resolve);
-            }
-            if ($('[data-content_menu_id]').length) {
-                var select = new SelectEditMenuDialog(self);
-                select.on('save', self, resolveWhenEditMenuDialogIsCancelled);
-                select.on('cancel', self, resolve);
-                select.open();
-            } else {
-                resolveWhenEditMenuDialogIsCancelled(null);
-            }
-        });
-    },
-    /**
-     *
-     * @param {*} rootID
-     * @param {function|undefied} beforeReloadCallback function that returns a promise
-     * @returns {Promise}
-     */
-    _openEditMenuDialog: function (rootID, beforeReloadCallback) {
-        var self = this;
-        return new Promise(function (resolve) {
-            var dialog = new EditMenuDialog(self, {}, rootID);
-            dialog.on('save', self, function () {
-                // Before reloading the page after menu modification, does the
-                // given action to do.
-                if (beforeReloadCallback) {
-                    // Reload the page so that the menu modification are shown
-                    beforeReloadCallback().then(function () {
-                        window.location.reload(true);
-                    });
-                } else {
-                    window.location.reload(true);
-                }
-            });
-            dialog.on('cancel', self, resolve);
-            dialog.open();
-        });
-    },
-
-    /**
-     * Retrieves the value of a page option.
-     *
-     * @private
-     * @param {string} name
-     * @returns {Promise<*>}
-     */
-    _getPageOption: function (name) {
-        var option = this.pageOptions[name];
-        if (!option) {
-            return Promise.reject();
-        }
-        return Promise.resolve(option.value);
-    },
-    /**
-     * On save, simulated page options have to be server-saved.
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _onSave: function () {
-        var self = this;
-        var defs = _.map(this.pageOptions, function (option, optionName) {
-            if (option.isDirty) {
-                return self._togglePageOption({
-                    name: optionName,
-                    value: option.value,
-                }, true, true);
-            }
-        });
-        return Promise.all(defs);
-    },
-    /**
-     * Opens the page properties dialog.
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _pageProperties: function () {
-        var mo;
-        this.trigger_up('main_object_request', {
-            callback: function (value) {
-                mo = value;
-            },
-        });
-        var dialog = new PagePropertiesDialog(this, mo.id, {}).open();
-        return dialog.opened();
-    },
-    /**
-     * Toggles a page option.
-     *
-     * @private
-     * @param {Object} params
-     * @param {string} params.name
-     * @param {*} [params.value] (change value by default true -> false -> true)
-     * @param {boolean} [forceSave=false]
-     * @param {boolean} [noReload=false]
-     * @returns {Promise}
-     */
-    _togglePageOption: function (params, forceSave, noReload) {
-        // First check it is a website page
-        var mo;
-        this.trigger_up('main_object_request', {
-            callback: function (value) {
-                mo = value;
-            },
-        });
-        if (mo.model !== 'website.page') {
-            return Promise.reject();
-        }
-
-        // Check if this is a valid option
-        var option = this.pageOptions[params.name];
-        if (!option) {
-            return Promise.reject();
-        }
-
-        // Toggle the value
-        option.setValue(params.value);
-
-        // If simulate is true, it means we want the option to be toggled but
-        // not saved on the server yet
-        if (!forceSave) {
-            return Promise.resolve();
-        }
-
-        // If not, write on the server page and reload the current location
-        var vals = {};
-        vals[params.name] = option.value;
-        var prom = this._rpc({
-            model: 'website.page',
-            method: 'write',
-            args: [[mo.id], vals],
-        });
-        if (noReload) {
-            return prom;
-        }
-        return prom.then(function () {
-            window.location.reload();
-            return new Promise(function () {});
-        });
-    },
-});
-
-var PageManagement = Widget.extend({
-    xmlDependencies: ['/website/static/src/xml/website.xml'],
-    events: {
-        'click a.js_page_properties': '_onPagePropertiesButtonClick',
-        'click a.js_clone_page': '_onClonePageButtonClick',
-        'click a.js_delete_page': '_onDeletePageButtonClick',
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Retrieves the page dependencies for the given object id.
-     *
-     * @private
-     * @param {integer} moID
-     * @returns {Promise<Array>}
-     */
-    _getPageDependencies: function (moID) {
-        return this._rpc({
-            model: 'website',
-            method: 'page_search_dependencies',
-            args: [moID],
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    _onPagePropertiesButtonClick: function (ev) {
-        var moID = $(ev.currentTarget).data('id');
-        var dialog = new PagePropertiesDialog(this,moID, {'fromPageManagement': true}).open();
-        return dialog;
-    },
-    _onClonePageButtonClick: function (ev) {
-        var pageId = $(ev.currentTarget).data('id');
-        _clonePage.call(this, pageId);
-    },
-    _onDeletePageButtonClick: function (ev) {
-        var pageId = $(ev.currentTarget).data('id');
-        _deletePage.call(this, pageId, true);
-    },
-});
-
-/**
- * Deletes the page after showing a dependencies warning for the given page id.
- *
- * @private
- * @param {integer} pageId - The ID of the page to be deleted
- * @param {Boolean} fromPageManagement
- *                  Is the function called by the page manager?
- *                  It will affect redirect after page deletion: reload or '/'
- */
-// TODO: This function should be integrated in a widget in the future
-async function _deletePage(pageId, fromPageManagement) {
-    const dependencies = await this._getPageDependencies(pageId);
-    for (const locs of Object.values(dependencies)) {
-        for (const loc of locs) {
-            loc.text = Markup(loc.text);
-        }
+        ]);
+        this.close();
+        this.website.goToWebsite();
     }
-    Dialog.safeConfirm(this, "", {
-        title: _t("Delete Page"),
-        $content: $(qweb.render('website.delete_page', {dependencies: dependencies})),
-        async confirm_callback() {
-            await this._rpc({model: 'website.page', method: 'unlink', args: [pageId]});
-            if (fromPageManagement) {
-                window.location.reload(true);
-            } else {
-                window.location.href = '/';
-            }
-        }
-    });
 }
-/**
- * Duplicate the page after showing the wizard to enter new page name.
- *
- * @private
- * @param {integer} pageId - The ID of the page to be duplicate
- *
- */
-function _clonePage(pageId) {
-    var self = this;
-    new Promise(function (resolve, reject) {
-        Dialog.confirm(this, undefined, {
-            title: _t("Duplicate Page"),
-            $content: $(qweb.render('website.duplicate_page_action_dialog')),
-            confirm_callback: function () {
-                var new_page_name =  this.$('#page_name').val();
-                return self._rpc({
-                    model: 'website.page',
-                    method: 'clone_page',
-                    args: [pageId, new_page_name],
-                }).then(function (path) {
-                    window.location.href = path;
-                }).guardedCatch(reject);
-            },
-            cancel_callback: reject,
-        }).on('closed', null, reject);
-    });
-}
-
-registry.category("website_navbar_widgets").add("ContentMenu", {
-    Widget: ContentMenu,
-    selector: '#content-menu',
-});
-registry.category("public_root_widgets").add("PageManagement", {
-    Widget: PageManagement,
-    selector: '#list_website_pages',
-});
-
-export default {
-    PagePropertiesDialog: PagePropertiesDialog,
-    ContentMenu: ContentMenu,
-    EditMenuDialog: EditMenuDialog,
-    MenuEntryDialog: MenuEntryDialog,
-    SelectEditMenuDialog: SelectEditMenuDialog,
+EditMenuDialog.bodyTemplate = 'website.EditMenuDialog';
+EditMenuDialog.components = {
+    MenuRow,
 };
diff --git a/addons/website/static/src/components/dialog/edit_menu.xml b/addons/website/static/src/components/dialog/edit_menu.xml
index af318703b5c..18aefa84fe7 100644
--- a/addons/website/static/src/components/dialog/edit_menu.xml
+++ b/addons/website/static/src/components/dialog/edit_menu.xml
@@ -1,59 +1,66 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates id="template" xml:space="preserve">
-<t t-name="website.contentMenu.dialog.submenu">
-    <li t-att-data-menu-id="submenu.fields['id']" t-att-data-mega-menu="submenu.fields['is_mega_menu'] ? true : undefined">
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+<t t-name="website.MenuDialog" owl="1">
+    <div class="form-group row">
+        <label class="col-form-label col-md-3">
+            Name
+        </label>
+        <div class="col-md-9">
+            <input type="text" t-model="state.name" class="form-control" required="required"/>
+        </div>
+    </div>
+    <div t-if="!props.isMegaMenu" class="form-group row">
+        <label class="col-form-label col-md-3">
+            Url or Email
+        </label>
+        <div class="col-md-9">
+            <input type="text" t-model="state.url" class="form-control" required="required"/>
+        </div>
+    </div>
+</t>
+
+<t t-name="website.MenuRow" owl="1">
+    <li t-att-data-menu-id="props.menu.fields['id']" t-att-data-is-mega-menu="props.menu.fields['is_mega_menu'] ? 'true' : undefined">
         <div class="input-group">
             <div class="input-group-prepend">
                 <span class="input-group-text fa fa-bars" role="img" aria-label="Dropdown menu" title="Dropdown menu"/>
             </div>
             <span class="form-control d-flex align-items-center">
                 <span class="js_menu_label o_text_overflow flex-grow-1">
-                    <t t-esc="submenu.fields['name']"/>
+                    <t t-esc="props.menu.fields['name']"/>
                 </span>
-                <span t-if="submenu.fields['is_mega_menu']" class="badge badge-primary">Mega Menu</span>
-                <i t-if="submenu.is_homepage" class="fa fa-home ml-3" role="img" aria-label="Home" title="Home"/>
+                <span t-if="props.menu.fields['is_mega_menu']" class="badge badge-primary">Mega Menu</span>
+                <i t-if="props.menu.is_homepage" class="fa fa-home ml-3" role="img" aria-label="Home" title="Home"/>
             </span>
             <span class="input-group-append">
-                <button type="button" class="btn btn-primary js_edit_menu fa fa-pencil-square-o" aria-label="Edit Menu Item" title="Edit Menu Item"/>
-                <button type="button" class="btn btn-danger js_delete_menu fa fa-trash-o" aria-label="Delete Menu Item" title="Delete Menu Item"/>
+                <button t-on-click="edit" type="button" class="btn btn-primary js_edit_menu fa fa-pencil-square-o" aria-label="Edit Menu Item" title="Edit Menu Item"/>
+                <button t-on-click="delete" type="button" class="btn btn-danger js_delete_menu fa fa-trash-o" aria-label="Delete Menu Item" title="Delete Menu Item"/>
             </span>
         </div>
-        <t t-set="children" t-value="submenu.children"/>
-        <ul t-if="children">
-            <t t-foreach="children" t-as="submenu">
-                <t t-call="website.contentMenu.dialog.submenu"/>
+        <ul t-if="props.menu.children">
+            <t t-foreach="props.menu.children" t-as="submenu" t-key="submenu.fields['id']">
+                <MenuRow menu="submenu" edit="props.edit" delete="props.delete"/>
             </t>
         </ul>
     </li>
 </t>
-<div t-name="website.contentMenu.dialog.select">
-    <select class="form-control mb16" t-if="widget.roots">
-        <t t-foreach="widget.roots" t-as="root">
-            <option t-att-value="root.id"><t t-esc="root.name"/></option>
-        </t>
-    </select>
-</div>
-<div t-name="website.contentMenu.dialog.edit">
-    <select class="form-control mb16" t-if="widget.roots">
-        <t t-foreach="widget.roots" t-as="root">
-            <option t-att-value="root.id"><t t-esc="root.name"/></option>
-        </t>
-    </select>
-    <ul class="oe_menu_editor list-unstyled">
-        <t t-foreach="widget.menu.children" t-as="submenu">
-            <t t-call="website.contentMenu.dialog.submenu"/>
+
+<t t-name="website.EditMenuDialog" owl="1">
+    <ul t-ref="menu-editor" class="oe_menu_editor list-unstyled">
+        <t t-foreach="state.rootMenu.children" t-as="menu" t-key="menu.fields['id']">
+            <MenuRow menu="menu" edit="(id) => this.editMenu(id)" delete="(id) => this.deleteMenu(id)"/>
         </t>
     </ul>
     <div class="mt32">
         <small class="float-right text-muted">
             Drag to the right to get a submenu
         </small>
-        <a href="#" class="js_add_menu">
+        <a href="#" t-on-click="() => this.addMenu(false)">
             <i class="fa fa-plus-circle"/> Add Menu Item
         </a><br/>
-        <a href="#" class="js_add_menu" data-type="mega">
+        <a href="#" t-on-click="() => this.addMenu(true)">
             <i class="fa fa-plus-circle"/> Add Mega Menu Item
         </a>
     </div>
-</div>
+</t>
 </templates>
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
index 9f63fc28ff3..9b01c18099e 100644
--- a/addons/website/static/src/components/navbar/navbar.js
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -4,6 +4,7 @@ import { NavBar } from '@web/webclient/navbar/navbar';
 import { useService, useBus } from '@web/core/utils/hooks';
 import { registry } from "@web/core/registry";
 import { patch } from 'web.utils';
+import { EditMenuDialog } from '@website/components/dialog/edit_menu';
 
 const websiteSystrayRegistry = registry.category('website_systray');
 
@@ -11,6 +12,7 @@ patch(NavBar.prototype, 'website_navbar', {
     setup() {
         this._super();
         this.websiteService = useService('website');
+        this.dialogService = useService('dialog');
 
         // The navbar is rerendered with an event, as it can not naturally be
         // with props/state (the WebsitePreview client action and the navbar
@@ -22,6 +24,24 @@ patch(NavBar.prototype, 'website_navbar', {
         }
 
         useBus(websiteSystrayRegistry, 'CONTENT-UPDATED', () => this.render(true));
+
+        this.websiteDialogMenus = {
+            'website.menu_edit_menu': EditMenuDialog,
+        };
+    },
+
+    filterWebsiteMenus(sections) {
+        const filteredSections = [];
+        for (const section of sections) {
+            if (!this.websiteDialogMenus[section.xmlid]) {
+                let subSections = [];
+                if (section.childrenTree.length) {
+                    subSections = this.filterWebsiteMenus(section.childrenTree);
+                }
+                filteredSections.push(Object.assign({}, section, {childrenTree: subSections}));
+            }
+        }
+        return filteredSections;
     },
 
     /**
@@ -37,4 +57,25 @@ patch(NavBar.prototype, 'website_navbar', {
         }
         return this._super();
     },
+
+    /**
+     * @override
+     */
+    get currentAppSections() {
+        const currentAppSections = this._super();
+        if (this.currentApp && this.currentApp.xmlid === 'website.menu_website_configuration' && !this.websiteService.currentWebsite) {
+            return this.filterWebsiteMenus(currentAppSections).filter(section => section.childrenTree.length);
+        }
+        return currentAppSections;
+    },
+
+    /**
+     * @override
+     */
+    onNavBarDropdownItemSelection(menu) {
+        if (this.websiteDialogMenus[menu.xmlid]) {
+            return this.dialogService.add(this.websiteDialogMenus[menu.xmlid]);
+        }
+        return this._super(menu);
+    }
 });
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 0f8e1a81ad2..1170d8664af 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -68,7 +68,7 @@ export const websiteService = {
             get context() {
                 return context;
             },
-            goToWebsite({ websiteId = currentWebsiteId || websites[0].id, path = '/' }) {
+            goToWebsite({ websiteId = currentWebsiteId || websites[0].id, path = '/' } = {}) {
                 action.doAction('website.website_preview', {
                     clearBreadcrumbs: true,
                     additionalContext: {
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index 689b5d1dde8..2bb3b0c0c22 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -552,6 +552,12 @@
             name="Pages"
             action="action_website_pages_list"/>
 
+        <menuitem id="menu_edit_menu"
+            parent="menu_site"
+            sequence="30"
+            name="Edit Menu"
+            action="website.website_preview"/>
+
         <menuitem id="menu_website_dashboard"
             name="eCommerce"
             sequence="1"

From 751f522d6291f1d9e86b93a20ed3e64dfbca974d Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Fri, 11 Feb 2022 09:30:20 +0100
Subject: [PATCH 20/88] [FIX] web: fix NavBar currentAppSections getter patch

After OWL next was merged, an error popped up while patching the Navbar
currentAppSections getter, coming from the Enterprise NavBar render.
A setter was added on the Navbar component to allow for the patch.

See merge commit for more information.

task-2687506
---
 addons/web/static/src/webclient/navbar/navbar.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/addons/web/static/src/webclient/navbar/navbar.js b/addons/web/static/src/webclient/navbar/navbar.js
index 81bab76d696..00c806d40ef 100644
--- a/addons/web/static/src/webclient/navbar/navbar.js
+++ b/addons/web/static/src/webclient/navbar/navbar.js
@@ -84,6 +84,10 @@ export class NavBar extends Component {
         );
     }
 
+    // This dummy setter is only here to prevent conflicts between the
+    // Enterprise NavBar extension and the Website NavBar patch.
+    set currentAppSections(_) {}
+
     get systrayItems() {
         return systrayRegistry
             .getEntries()

From f260e3c1441b380d0c9f5294d7cadcaad9c90662 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Thu, 27 Jan 2022 15:51:32 +0100
Subject: [PATCH 21/88] [IMP] website, *: add edit in backend systray dropdown

*: website_blog, website_customer, website_event_exhibitor,
   website_event_track, website_hr_recruitment, website_sale,
   website_slides

See merge commit for more information.

task-2687506
---
 .../website_preview/website_preview.js        |  3 +-
 .../src/systray_items/edit_in_backend.js      | 45 +++++++++++++++++++
 .../src/systray_items/edit_in_backend.xml     | 14 ++++++
 .../views/website_navbar_templates.xml        | 10 -----
 addons/website/views/website_templates.xml    |  2 +
 addons/website_blog/__manifest__.py           |  2 +-
 addons/website_blog/controllers/main.py       |  2 +-
 .../src/js/systray_items/edit_in_backend.js   | 28 ++++++++++++
 .../views/website_blog_templates.xml          | 13 ------
 .../views/website_customer_templates.xml      |  6 ---
 .../views/event_exhibitor_templates_page.xml  | 12 -----
 addons/website_event_track/__manifest__.py    |  1 -
 .../views/website_templates.xml               | 10 -----
 .../website_hr_recruitment_templates.xml      |  6 ---
 addons/website_sale/views/templates.xml       |  6 ---
 .../views/website_slides_templates_utils.xml  |  7 ---
 16 files changed, 93 insertions(+), 74 deletions(-)
 create mode 100644 addons/website/static/src/systray_items/edit_in_backend.js
 create mode 100644 addons/website/static/src/systray_items/edit_in_backend.xml
 create mode 100644 addons/website_blog/static/src/js/systray_items/edit_in_backend.js
 delete mode 100644 addons/website_event_track/views/website_templates.xml

diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 802d47ae96c..64f35b168e9 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -85,12 +85,13 @@ export class WebsitePreview extends Component {
         this.currentUrl = this.iframe.el.contentDocument.location.href;
         history.replaceState({}, this.props.action.display_name, this.currentUrl);
 
-        const { mainObject, isPublished, canPublish } = this.iframe.el.contentDocument.documentElement.dataset;
+        const { mainObject, isPublished, canPublish, editableInBackend } = this.iframe.el.contentDocument.documentElement.dataset;
         this.websiteService.currentMetadata = {
             path: this.currentUrl,
             mainObject: unslugHtmlDataObject(mainObject),
             isPublished: isPublished === 'True',
             canPublish: canPublish === 'True',
+            editableInBackend: editableInBackend === 'True',
         };
 
         // Before leaving the iframe, its content is replicated on an
diff --git a/addons/website/static/src/systray_items/edit_in_backend.js b/addons/website/static/src/systray_items/edit_in_backend.js
new file mode 100644
index 00000000000..1402230b250
--- /dev/null
+++ b/addons/website/static/src/systray_items/edit_in_backend.js
@@ -0,0 +1,45 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+
+const { Component } = owl;
+
+export class EditInBackendSystray extends Component {
+    setup() {
+        this.websiteService = useService('website');
+        this.actionService = useService('action');
+    }
+
+    getElements() {
+        return [{
+            title: this.env._t("Settings"),
+            callback: () => this.editInBackend(),
+        }];
+    }
+
+    editInBackend() {
+        const { metadata: { mainObject } } = this.websiteService.currentWebsite;
+        this.actionService.doAction({
+            res_model: mainObject.model,
+            res_id: mainObject.id,
+            views: [[false, "form"]],
+            type: "ir.actions.act_window",
+            view_mode: "form",
+        });
+    }
+}
+EditInBackendSystray.template = "website.EditInBackendSystray";
+EditInBackendSystray.components = {
+    Dropdown,
+    DropdownItem
+};
+
+export const systrayItem = {
+    Component: EditInBackendSystray,
+    isDisplayed: env => env.services.website.currentWebsite && env.services.website.currentWebsite.metadata.editableInBackend,
+};
+
+registry.category("website_systray").add("EditInBackend", systrayItem, { sequence: 7 });
diff --git a/addons/website/static/src/systray_items/edit_in_backend.xml b/addons/website/static/src/systray_items/edit_in_backend.xml
new file mode 100644
index 00000000000..b94cd337a56
--- /dev/null
+++ b/addons/website/static/src/systray_items/edit_in_backend.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+<t t-name="website.EditInBackendSystray" owl="1">
+    <Dropdown class="'o_menu_systray_item o_website_edit_in_backend'" togglerClass="'p-2'">
+        <t t-set-slot="toggler"><i class="fa fa-caret-down"/></t>
+        <t t-foreach="getElements()" t-as="element" t-key="element_index">
+            <DropdownItem
+                t-esc="element.title"
+                onSelected="element.callback"
+            />
+        </t>
+    </Dropdown>
+</t>
+</templates>
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index d9c909f52e7..6d86ee81e1f 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -49,7 +49,6 @@
                     <div t-if="editable" class="dropdown" id="content-menu">
                         <a id="content-menu-button" class="dropdown-toggle o-no-caret waves" data-toggle="dropdown" data-display="static" href="#">Pages</a>
                         <div class="dropdown-menu" role="menu">
-                            <a role="menuitem" data-action="edit_menu" href="#" title="Edit Top Menu" class="dropdown-item">Edit Menu</a>
                             <a role="menuitem" href="/website/pages" title="Manage Your Website Pages" class="dropdown-item">Manage Pages</a>
                             <div t-if="deletable" role="separator" class="dropdown-divider"/>
                             <a role="menuitem" href="#" data-action="page_properties" class="dropdown-item" t-if="deletable">Page Properties</a>
@@ -148,15 +147,6 @@
                     <div t-if="not translatable" id="edit-page-menu" class="o_menu_systray_item">
                         <a data-action="edit" href="#" accesskey="a"><span class="fa fa-pencil mr-1"/>Edit</a>
                     </div>
-                    <div t-if="edit_in_backend or ('website_published' in main_object.fields_get() and main_object._name != 'website.page')" class="o_menu_systray_item">
-                        <a role="button" class="btn pl-0 rounded-0 dropdown-toggle css_edit_dynamic" data-toggle="dropdown" href="#">
-                            <span class="sr-only">Toggle Dropdown</span>
-                        </a>
-                        <div class="dropdown-menu" role="menu">
-                            <a role="menuitem" style="text-align: left;" t-attf-href="/web#view_type=form&amp;model=#{main_object._name}&amp;id=#{main_object.id}&amp;action=#{action}&amp;menu_id=#{backend_menu_id}"
-                                   class="dropdown-item" title='Edit in backend' id="edit-in-backend">Edit in backend</a>
-                        </div>
-                    </div>
                     <div t-if="translatable">
                         <a data-action="translate" href="#">TRANSLATE</a>
                     </div>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 8068e0b8d96..d1e469ca5ab 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -36,6 +36,7 @@
 
 <template id="layout" name="Main layout" inherit_id="portal.frontend_layout">
     <xpath expr="//html" position="before">
+        <t t-set="editable_in_backend" t-value="edit_in_backend or ('website_published' in main_object.fields_get() and main_object._name != 'website.page')"/>
         <t t-set="html_data" t-value="{
             'lang': lang and lang.replace('_', '-'),
             'data-website-id': website.id if website else None,
@@ -51,6 +52,7 @@
             'data-oe-company-name': res_company.name,
             'data-is-published': 'website_published' in main_object.fields_get() and main_object.website_published,
             'data-can-publish': 'can_publish' in main_object.fields_get() and main_object.can_publish,
+            'data-editable-in-backend': editable_in_backend,
         })"/>
     </xpath>
 
diff --git a/addons/website_blog/__manifest__.py b/addons/website_blog/__manifest__.py
index a050761700d..a9b83797ab4 100644
--- a/addons/website_blog/__manifest__.py
+++ b/addons/website_blog/__manifest__.py
@@ -44,7 +44,7 @@
             'website_blog/static/src/js/website_blog.js',
         ],
         'web.assets_backend': [
-            'website_blog/static/src/js/systray_items/new_content.js',
+            'website_blog/static/src/js/systray_items/*.js',
         ],
     },
     'license': 'LGPL-3',
diff --git a/addons/website_blog/controllers/main.py b/addons/website_blog/controllers/main.py
index 04a8ce300ed..7a290f6e1d4 100644
--- a/addons/website_blog/controllers/main.py
+++ b/addons/website_blog/controllers/main.py
@@ -324,4 +324,4 @@ class WebsiteBlog(http.Controller):
         :return redirect to the new blog created
         """
         new_blog_post = request.env['blog.post'].with_context(mail_create_nosubscribe=True).browse(int(blog_post_id)).copy()
-        return request.redirect("/blog/%s/%s?enable_editor=1" % (slug(new_blog_post.blog_id), slug(new_blog_post)))
+        return "/blog/%s/%s?enable_editor=1" % (slug(new_blog_post.blog_id), slug(new_blog_post))
diff --git a/addons/website_blog/static/src/js/systray_items/edit_in_backend.js b/addons/website_blog/static/src/js/systray_items/edit_in_backend.js
new file mode 100644
index 00000000000..7e5087886b1
--- /dev/null
+++ b/addons/website_blog/static/src/js/systray_items/edit_in_backend.js
@@ -0,0 +1,28 @@
+/** @odoo-module **/
+
+import { EditInBackendSystray } from '@website/systray_items/edit_in_backend';
+import { patch } from 'web.utils';
+import wUtils from 'website.utils';
+
+patch(EditInBackendSystray.prototype, 'website_blog_edit_in_backend', {
+    /**
+     * @override
+     */
+    getElements() {
+        const elements = this._super();
+        const { metadata: { mainObject } } = this.websiteService.currentWebsite;
+        if (mainObject.model === 'blog.post') {
+            return [...elements, {
+                title: this.env._t("Duplicate"),
+                callback: () => this.duplicate(),
+            }];
+        }
+        return elements;
+    },
+
+    async duplicate() {
+        const { metadata: { mainObject } } = this.websiteService.currentWebsite;
+        const duplicateUrl = await wUtils.sendRequest('/blog/post_duplicate', { blog_post_id: mainObject.id });
+        this.websiteService.goToWebsite({ path: duplicateUrl });
+    }
+});
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index bfe697162c1..95edd3f7d08 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -457,19 +457,6 @@ list of filtered posts (by date or tag).
 
 <!-- ======   Technical Templates   ============================================
 ============================================================================ -->
-<!-- Duplicate post Action -->
-<template id="blog_edit_options" inherit_id="website.user_navbar" name="Edit Blog Options">
-    <xpath expr="//a[@id='edit-in-backend']" position="after">
-        <t groups="website.group_website_designer" t-if="main_object._name == 'blog.post'">
-            <form class="duplicate d-none" action="/blog/post_duplicate" method="POST">
-                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-                <input name="blog_post_id" t-att-value="blog_post.id if blog_post else None"/>
-            </form>
-            <a href="#" class="duplicate dropdown-item" onclick="$(this).prev('form').submit()">Duplicate</a>
-        </t>
-    </xpath>
-</template>
-
 <!-- User Navbar -->
 <template id="user_navbar_inherit_website_blog" inherit_id="website.user_navbar">
     <xpath expr="//div[@id='o_new_content_menu_choices']//div[@name='module_website_blog']" position="attributes">
diff --git a/addons/website_customer/views/website_customer_templates.xml b/addons/website_customer/views/website_customer_templates.xml
index 0274fc10525..9f4fa0f5b34 100644
--- a/addons/website_customer/views/website_customer_templates.xml
+++ b/addons/website_customer/views/website_customer_templates.xml
@@ -142,12 +142,6 @@
     </xpath>
 </template>
 
-<template id="contact_edit_options" inherit_id="website.user_navbar" name="Edit Customer Options">
-    <xpath expr="//div[@id='edit-page-menu']" position="after">
-        <t t-if="main_object._name == 'res.partner'" t-set="action" t-value="'contacts.action_contacts'"/>
-    </xpath>
-</template>
-
 <template id="details" name="Customer Detail">
   <t t-call="website.layout">
     <div id="wrap">
diff --git a/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml b/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml
index f617191a9d4..b8e7444869e 100644
--- a/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml
+++ b/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml
@@ -196,16 +196,4 @@
     </div>
 </template>
 
-<!-- ============================================================ -->
-<!-- MISC / MENUS -->
-<!-- ============================================================ -->
-
-<!-- User Navbar - Edit Options -->
-<template id="event_sponsor_edit_options" inherit_id="website.user_navbar" name="Edit Event Sponsor Options">
-    <xpath expr="//div[@id='edit-page-menu']" position="after">
-        <t t-if="main_object._name == 'event.sponsor'"
-            t-set="action" t-value="'website_event_exhibitor.event_sponsor_action'"/>
-    </xpath>
-</template>
-
 </odoo>
diff --git a/addons/website_event_track/__manifest__.py b/addons/website_event_track/__manifest__.py
index 1167d556026..c014529ed28 100644
--- a/addons/website_event_track/__manifest__.py
+++ b/addons/website_event_track/__manifest__.py
@@ -21,7 +21,6 @@
         'views/event_track_templates_reminder.xml',
         'views/event_track_templates_page.xml',
         'views/event_track_templates_proposal.xml',
-        'views/website_templates.xml',
         'views/event_track_views.xml',
         'views/event_track_location_views.xml',
         'views/event_track_tag_views.xml',
diff --git a/addons/website_event_track/views/website_templates.xml b/addons/website_event_track/views/website_templates.xml
deleted file mode 100644
index 495ef058783..00000000000
--- a/addons/website_event_track/views/website_templates.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-
-<template id="track_edit_options" inherit_id="website.user_navbar" name="Edit Track Options">
-    <xpath expr="//div[@id='edit-page-menu']" position="after">
-        <t t-if="main_object._name == 'event.track'" t-set="action" t-value="'website_event_track.action_event_track'" />
-    </xpath>
-</template>
-
-</odoo>
diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
index 16547dcd72f..43e5343e547 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -1,12 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="job_edit_options" inherit_id="website.user_navbar" name="Edit Job Options">
-    <xpath expr="//div[@id='edit-page-menu']" position="after">
-        <t t-if="main_object._name == 'hr.job'" t-set="action" t-value="'hr_recruitment.action_hr_job'"/>
-    </xpath>
-</template>
-
 <template id="index" name="Jobs">
     <t t-call="website.layout">
         <div id="wrap" class="o_website_hr_recruitment_jobs_list bg-100">
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 5c61a1516a7..85b5071ee24 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -583,12 +583,6 @@
     </template>
 
     <!-- /shop/product page -->
-    <template id="product_edit_options" inherit_id="website.user_navbar" name="Edit Product Options">
-        <xpath expr="//div[@id='edit-page-menu']" position="after">
-            <t t-if="main_object._name == 'product.template'" t-set="action" t-value="'website_sale.product_template_action_website'" />
-        </xpath>
-    </template>
-
     <template id="base_unit_price" name="Product Bas eunit price">
         <t>
             (<span class="o_base_unit_price" t-field="product.base_unit_price" t-options="{'display_currency': website.currency_id}"/>
diff --git a/addons/website_slides/views/website_slides_templates_utils.xml b/addons/website_slides/views/website_slides_templates_utils.xml
index ed3dfb33efa..f6078c70ddf 100644
--- a/addons/website_slides/views/website_slides_templates_utils.xml
+++ b/addons/website_slides/views/website_slides_templates_utils.xml
@@ -72,13 +72,6 @@
     </div>
 </template>
 
-<!-- Website edit page -->
-<template id="slide_edit_options" inherit_id="website.user_navbar" name="Edit Slide Options">
-    <xpath expr="//div[@id='edit-page-menu']" position="after">
-        <t t-if="main_object._name == 'slide.slide'" t-set="action" t-value="'website_slides.slide_slide_action'"/>
-    </xpath>
-</template>
-
 <!-- User Navbar -->
 <template id="user_navbar_inherit_website_slides" inherit_id="website.user_navbar">
     <xpath expr="//div[@id='o_new_content_menu_choices']//div[@name='module_website_slides']" position="attributes">

From ac55f2bb113ecf7c774fe6e96d28e716184a97d1 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Tue, 1 Feb 2022 13:03:33 +0100
Subject: [PATCH 22/88] [IMP] website, website_links: add Promote menu and SEO
 dialog

The media dialog is added in a later commit.

See merge commit for more information.

task-2687506
---
 .../website_preview/website_preview.js        |   20 +-
 .../static/src/components/dialog/seo.js       | 1256 +++++------------
 .../static/src/components/dialog/seo.scss     |  108 ++
 .../static/src/components/dialog/seo.xml      |  257 ++--
 .../static/src/components/navbar/navbar.js    |   16 +-
 .../static/src/services/website_service.js    |   25 +-
 .../views/website_navbar_templates.xml        |    4 -
 addons/website/views/website_views.xml        |   11 +
 .../views/website_links_template.xml          |    2 +-
 9 files changed, 676 insertions(+), 1023 deletions(-)
 create mode 100644 addons/website/static/src/components/dialog/seo.scss

diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 64f35b168e9..c65c708e9f7 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -2,13 +2,13 @@
 
 import { registry } from '@web/core/registry';
 import { useService } from '@web/core/utils/hooks';
-import { unslugHtmlDataObject } from '../../services/website_service';
 
 const { Component, onWillStart, useRef, useEffect } = owl;
 
 export class WebsitePreview extends Component {
     setup() {
         this.websiteService = useService('website');
+        this.title = useService('title');
 
         this.iframeFallbackUrl = '/website/iframefallback';
 
@@ -24,7 +24,10 @@ export class WebsitePreview extends Component {
         useEffect(() => {
             this.websiteService.currentWebsiteId = this.websiteId;
             this.websiteService.context.showNewContentModal = this.props.action.context.params && this.props.action.context.params.display_new_content;
-            return () => this.websiteService.currentWebsiteId = null;
+            return () => {
+                this.websiteService.currentWebsiteId = null;
+                this.websiteService.pageDocument = null;
+            };
         }, () => [this.props.action.context.params]);
     }
 
@@ -83,16 +86,11 @@ export class WebsitePreview extends Component {
         // This replaces the browser url (/web#action=website...) with
         // the iframe's url (it is clearer for the user).
         this.currentUrl = this.iframe.el.contentDocument.location.href;
-        history.replaceState({}, this.props.action.display_name, this.currentUrl);
+        this.currentTitle = this.iframe.el.contentDocument.title;
+        history.replaceState({}, this.currentTitle, this.currentUrl);
+        this.title.setParts({ action: this.currentTitle });
 
-        const { mainObject, isPublished, canPublish, editableInBackend } = this.iframe.el.contentDocument.documentElement.dataset;
-        this.websiteService.currentMetadata = {
-            path: this.currentUrl,
-            mainObject: unslugHtmlDataObject(mainObject),
-            isPublished: isPublished === 'True',
-            canPublish: canPublish === 'True',
-            editableInBackend: editableInBackend === 'True',
-        };
+        this.websiteService.pageDocument = this.iframe.el.contentDocument;
 
         // Before leaving the iframe, its content is replicated on an
         // underlying iframe, to avoid for white flashes (visible on
diff --git a/addons/website/static/src/components/dialog/seo.js b/addons/website/static/src/components/dialog/seo.js
index 143ca221014..6f1406597db 100644
--- a/addons/website/static/src/components/dialog/seo.js
+++ b/addons/website/static/src/components/dialog/seo.js
@@ -1,908 +1,406 @@
-odoo.define('website.seo', function (require) {
-'use strict';
+/** @odoo-module **/
 
-var core = require('web.core');
-var Class = require('web.Class');
-var Dialog = require('web.Dialog');
-var mixins = require('web.mixins');
-var rpc = require('web.rpc');
-var Widget = require('web.Widget');
-var weWidgets = require('wysiwyg.widgets');
-var websiteNavbarData = require('website.navbar');
-const { session } = require('@web/session');
+import { useService, useListener } from '@web/core/utils/hooks';
+import { WebsiteDialog } from './dialog';
 
-const { registry } = require("@web/core/registry");
-
-var _t = core._t;
+const { Component, useState, reactive, onMounted, onWillStart } = owl;
 
 // This replaces \b, because accents(e.g. à, é) are not seen as word boundaries.
 // Javascript \b is not unicode aware, and words beginning or ending by accents won't match \b
-var WORD_SEPARATORS_REGEX = '([\\u2000-\\u206F\\u2E00-\\u2E7F\'!"#\\$%&\\(\\)\\*\\+,\\-\\.\\/:;<=>\\?¿¡@\\[\\]\\^_`\\{\\|\\}~\\s]+|^|$)';
+const WORD_SEPARATORS_REGEX = '([\\u2000-\\u206F\\u2E00-\\u2E7F\'!"#\\$%&\\(\\)\\*\\+,\\-\\.\\/:;<=>\\?¿¡@\\[\\]\\^_`\\{\\|\\}~\\s]+|^|$)';
 
-var Suggestion = Widget.extend({
-    template: 'website.seo_suggestion',
-    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
-    events: {
-        'click .o_seo_suggestion': 'select',
-    },
-
-    init: function (parent, options) {
-        this.keyword = options.keyword;
-        this._super(parent);
-    },
-    select: function () {
-        this.trigger('selected', this.keyword);
-    },
+const seoContext = reactive({
+    description: '',
+    keywords: [],
+    title: '',
+    seoName: '',
+    metaImage: '',
 });
 
-var SuggestionList = Widget.extend({
-    template: 'website.seo_suggestion_list',
-    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
+class MetaImage extends Component {}
+MetaImage.template = 'website.MetaImage';
 
-    init: function (parent, options) {
-        this.root = options.root;
-        this.language = options.language;
-        this.htmlPage = options.htmlPage;
-        this._super(parent);
-    },
-    start: function () {
-        this.refresh();
-    },
-    refresh: function () {
-        var self = this;
-        self.$el.append(_t("Loading..."));
-        var context;
-        this.trigger_up('context_get', {
-            callback: function (ctx) {
-                context = ctx;
-            },
-        });
-        var language = self.language || context.lang.toLowerCase();
-        this._rpc({
-            route: '/website/seo_suggest',
-            params: {
-                keywords: self.root,
-                lang: language,
-            },
-        }).then(function (keyword_list) {
-            self.addSuggestions(JSON.parse(keyword_list));
-        });
-    },
-    addSuggestions: function (keywords) {
-        var self = this;
-        self.$el.empty();
-        // TODO Improve algorithm + Ajust based on custom user keywords
-        var regex = new RegExp(WORD_SEPARATORS_REGEX + self.root + WORD_SEPARATORS_REGEX, 'gi');
-        keywords = _.map(_.uniq(keywords), function (word) {
-            return word.replace(regex, '').trim();
-        });
-        // TODO Order properly ?
-        _.each(keywords, function (keyword) {
-            if (keyword) {
-                var suggestion = new Suggestion(self, {
-                    keyword: keyword,
-                });
-                suggestion.on('selected', self, function (word, language) {
-                    self.trigger('selected', word, language);
-                });
-                suggestion.appendTo(self.$el);
-            }
-        });
-     },
-});
+class ImageSelector extends Component {
+    setup() {
+        this.website = useService('website');
 
-var Keyword = Widget.extend({
-    template: 'website.seo_keyword',
-    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
-    events: {
-        'click a[data-action=remove-keyword]': 'destroy',
-    },
+        this.seoContext = useState(seoContext);
 
-    init: function (parent, options) {
-        this.keyword = options.word;
-        this.language = options.language;
-        this.htmlPage = options.htmlPage;
-        this.used_h1 = this.htmlPage.isInHeading1(this.keyword);
-        this.used_h2 = this.htmlPage.isInHeading2(this.keyword);
-        this.used_content = this.htmlPage.isInBody(this.keyword);
-        this._super(parent);
-    },
-    start: function () {
-        var self = this;
-        this.$('.o_seo_keyword_suggestion').empty();
-        this.suggestionList = new SuggestionList(this, {
-            root: this.keyword,
-            language: this.language,
-            htmlPage: this.htmlPage,
-        });
-        this.suggestionList.on('selected', this, function (word, language) {
-            this.trigger('selected', word, language);
-        });
-        return this.suggestionList.appendTo(this.$('.o_seo_keyword_suggestion')).then(function() {
-            self.htmlPage.on('title-changed', self, self._updateTitle);
-            self.htmlPage.on('description-changed', self, self._updateDescription);
-            self._updateTitle();
-            self._updateDescription();
-        });
-    },
-    destroy: function () {
-        this.trigger('removed');
-        this._super();
-    },
-    _updateTitle: function () {
-        var $title = this.$('.js_seo_keyword_title');
-        if (this.htmlPage.isInTitle(this.keyword)) {
-            $title.css('visibility', 'visible');
-        } else {
-            $title.css('visibility', 'hidden');
-        }
-    },
-    _updateDescription: function () {
-        var $description = this.$('.js_seo_keyword_description');
-        if (this.htmlPage.isInDescription(this.keyword)) {
-            $description.css('visibility', 'visible');
-        } else {
-            $description.css('visibility', 'hidden');
-        }
-    },
-});
-
-var KeywordList = Widget.extend({
-    template: 'website.seo_list',
-    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
-    maxKeywords: 10,
-
-    init: function (parent, options) {
-        this.htmlPage = options.htmlPage;
-        this._super(parent);
-    },
-    start: function () {
-        var self = this;
-        var existingKeywords = self.htmlPage.keywords();
-        if (existingKeywords.length > 0) {
-            _.each(existingKeywords, function (word) {
-                self.add.call(self, word);
-            });
-        }
-    },
-    keywords: function () {
-        var result = [];
-        this.$('.js_seo_keyword').each(function () {
-            result.push($(this).data('keyword'));
-        });
-        return result;
-    },
-    isFull: function () {
-        return this.keywords().length >= this.maxKeywords;
-    },
-    exists: function (word) {
-        return _.contains(this.keywords(), word);
-    },
-    add: async function (candidate, language) {
-        var self = this;
-        // TODO Refine
-        var word = candidate ? candidate.replace(/[,;.:<>]+/g, ' ').replace(/ +/g, ' ').trim().toLowerCase() : '';
-        if (word && !self.isFull() && !self.exists(word)) {
-            var keyword = new Keyword(self, {
-                word: word,
-                language: language,
-                htmlPage: this.htmlPage,
-            });
-            keyword.on('removed', self, function () {
-               self.trigger('list-not-full');
-               self.trigger('content-updated', true);
-            });
-            keyword.on('selected', self, function (word, language) {
-                self.trigger('selected', word, language);
-            });
-            await keyword.appendTo(self.$el);
-        }
-        if (self.isFull()) {
-            self.trigger('list-full');
-        }
-        self.trigger('content-updated');
-    },
-});
-
-var Preview = Widget.extend({
-    template: 'website.seo_preview',
-    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
-
-    init: function (parent, options) {
-        this.title = options.title;
-        this.url = options.url;
-        this.description = options.description;
-        if (this.description.length > 160) {
-            this.description = this.description.substring(0, 159) + '…';
-        }
-        this._super(parent);
-    },
-});
-
-var HtmlPage = Class.extend(mixins.PropertiesMixin, {
-    init: function () {
-        mixins.PropertiesMixin.init.call(this);
-        this.initTitle = this.title();
-        this.defaultTitle = $('meta[name="default_title"]').attr('content');
-        this.initDescription = this.description();
-    },
-    url: function () {
-        return window.location.origin + window.location.pathname;
-    },
-    title: function () {
-        return $('title').text().trim();
-    },
-    changeTitle: function (title) {
-        // TODO create tag if missing
-        $('title').text(title.trim() || this.defaultTitle);
-        this.trigger('title-changed', title);
-    },
-    description: function () {
-        return ($('meta[name=description]').attr('content') || '').trim();
-    },
-    changeDescription: function (description) {
-        // TODO create tag if missing
-        $('meta[name=description]').attr('content', description);
-        this.trigger('description-changed', description);
-    },
-    keywords: function () {
-        var $keywords = $('meta[name=keywords]');
-        var parsed = ($keywords.length > 0) && $keywords.attr('content') && $keywords.attr('content').split(',');
-        return (parsed && parsed[0]) ? parsed: [];
-    },
-    changeKeywords: function (keywords) {
-        // TODO create tag if missing
-        $('meta[name=keywords]').attr('content', keywords.join(','));
-    },
-    headers: function (tag) {
-        return $('#wrap '+tag).map(function () {
-            return $(this).text();
-        });
-    },
-    getOgMeta: function () {
-        var ogImageUrl = $('meta[property="og:image"]').attr('content');
-        var title = $('meta[property="og:title"]').attr('content');
-        var description = $('meta[property="og:description"]').attr('content');
-        return {
-            ogImageUrl: ogImageUrl && ogImageUrl.replace(window.location.origin, ''),
-            metaTitle: title,
-            metaDescription: description,
+        const firstImageId = this.props.hasSocialDefaultImage ? 'social_default_image' : 'logo';
+        const firstImageSrc = `/web/image/website/${this.website.currentWebsite.id}/${firstImageId}`;
+        const firstImage = {
+            src: firstImageSrc,
+            active: this.areSameImages(firstImageSrc, this.seoContext.metaImage),
+            custom: false,
         };
-    },
-    images: function () {
-        return $('#wrap img').filter(function () {
-            return this.naturalHeight >= 200 && this.naturalWidth >= 200;
-        }).map(function () {
-            return {
-                src: this.getAttribute('src'),
-                alt: this.getAttribute('alt'),
-            };
-        });
-    },
-    company: function () {
-        return $('html').attr('data-oe-company-name');
-    },
-    bodyText: function () {
-        return $('body').children().not('.oe_seo_configuration').text();
-    },
-    heading1: function () {
-        return $('body').children().not('.oe_seo_configuration').find('h1').text();
-    },
-    heading2: function () {
-        return $('body').children().not('.oe_seo_configuration').find('h2').text();
-    },
-    isInBody: function (text) {
-        return new RegExp(WORD_SEPARATORS_REGEX + text + WORD_SEPARATORS_REGEX, 'gi').test(this.bodyText());
-    },
-    isInTitle: function (text) {
-        return new RegExp(WORD_SEPARATORS_REGEX + text + WORD_SEPARATORS_REGEX, 'gi').test(this.title());
-    },
-    isInDescription: function (text) {
-        return new RegExp(WORD_SEPARATORS_REGEX + text + WORD_SEPARATORS_REGEX, 'gi').test(this.description());
-    },
-    isInHeading1: function (text) {
-        return new RegExp(WORD_SEPARATORS_REGEX + text + WORD_SEPARATORS_REGEX, 'gi').test(this.heading1());
-    },
-    isInHeading2: function (text) {
-        return new RegExp(WORD_SEPARATORS_REGEX + text + WORD_SEPARATORS_REGEX, 'gi').test(this.heading2());
-    },
-});
 
-var MetaTitleDescription = Widget.extend({
-    // Form and preview for SEO meta title and meta description
-    //
-    // We only want to show an alert for "description too small" on those cases
-    // - at init and the description is not empty
-    // - we reached past the minimum and went back to it
-    // - focus out of the field
-    // Basically we don't want the too small alert when the field is empty and
-    // we start typing on it.
-    template: 'website.seo_meta_title_description',
-    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
-    events: {
-        'input input[name=website_meta_title]': '_titleChanged',
-        'input input[name=website_seo_name]': '_seoNameChanged',
-        'input textarea[name=website_meta_description]': '_descriptionOnInput',
-        'change textarea[name=website_meta_description]': '_descriptionOnChange',
-    },
-    maxRecommendedDescriptionSize: 300,
-    minRecommendedDescriptionSize: 50,
-    showDescriptionTooSmall: false,
-
-    /**
-     * @override
-     */
-    init: function (parent, options) {
-        this.htmlPage = options.htmlPage;
-        this.canEditTitle = !!options.canEditTitle;
-        this.canEditDescription = !!options.canEditDescription;
-        this.canEditUrl = !!options.canEditUrl;
-        this.isIndexed = !!options.isIndexed;
-        this.seoName = options.seoName;
-        this.seoNameDefault = options.seoNameDefault;
-        this.seoNameHelp = options.seoNameHelp;
-        this.previewDescription = options.previewDescription;
-        this._super(parent, options);
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        this.$title = this.$('input[name=website_meta_title]');
-        this.$seoName = this.$('input[name=website_seo_name]');
-        this.$seoNamePre = this.$('span.seo_name_pre');
-        this.$seoNamePost = this.$('span.seo_name_post');
-        this.$description = this.$('textarea[name=website_meta_description]');
-        this.$warning = this.$('div#website_meta_description_warning');
-        this.$preview = this.$('.js_seo_preview');
-
-        if (!this.canEditTitle) {
-            this.$title.attr('disabled', true);
-        }
-        if (!this.canEditDescription) {
-            this.$description.attr('disabled', true);
-        }
-        if (this.htmlPage.title().trim() !== this.htmlPage.defaultTitle.trim()) {
-            this.$title.val(this.htmlPage.title());
-        }
-        if (this.htmlPage.description().trim() !== this.previewDescription) {
-            this.$description.val(this.htmlPage.description());
-        }
-
-        if (this.canEditUrl) {
-            this.previousSeoName = this.seoName;
-            this.$seoName.val(this.seoName);
-            this.$seoName.attr('placeholder', this.seoNameDefault);
-            // make slug editable with input group for static text
-            const splitsUrl = window.location.pathname.split(this.previousSeoName || this.seoNameDefault);
-            this.$seoNamePre.text(splitsUrl[0]);
-            this.$seoNamePost.text(splitsUrl.slice(-1)[0]);  // at least the -id theorically
-        }
-        this._descriptionOnChange();
-    },
-    /**
-     * Get the current title
-     */
-    getTitle: function () {
-        return this.$title.val().trim() || this.htmlPage.defaultTitle;
-    },
-    /**
-     * Get the potential new url with custom seoName as slug.
-       I can differ after save if slug JS != slug Python, but it provide an idea for the preview
-     */
-    getUrl: function () {
-        const path = window.location.pathname.replace(
-            this.previousSeoName || this.seoNameDefault,
-            (this.$seoName.length && this.$seoName.val() ? this.$seoName.val().trim() : this.$seoName.attr('placeholder'))
-        );
-        return window.location.origin + path
-    },
-    /**
-     * Get the current description
-     */
-    getDescription: function () {
-        return this.getRealDescription() || this.previewDescription;
-    },
-    /**
-     * Get the current description chosen by the user
-     */
-    getRealDescription: function () {
-        return this.$description.val() || '';
-    },
-    /**
-     * @private
-     */
-    _titleChanged: function () {
-        var self = this;
-        self._renderPreview();
-        self.trigger('title-changed');
-    },
-    /**
-     * @private
-     */
-    _seoNameChanged: function () {
-        var self = this;
-        // don't use _, because we need to keep trailing whitespace during edition
-        const slugified = this.$seoName.val().toString().toLowerCase()
-            .replace(/\s+/g, '-')           // Replace spaces with -
-            .replace(/[^\w\-]+/g, '-')      // Remove all non-word chars
-            .replace(/\-\-+/g, '-');        // Replace multiple - with single -
-        this.$seoName.val(slugified);
-        self._renderPreview();
-    },
-    /**
-     * @private
-     */
-    _descriptionOnChange: function () {
-        this.showDescriptionTooSmall = true;
-        this._descriptionOnInput();
-    },
-    /**
-     * @private
-     */
-    _descriptionOnInput: function () {
-        var length = this.getDescription().length;
-
-        if (length >= this.minRecommendedDescriptionSize) {
-            this.showDescriptionTooSmall = true;
-        } else if (length === 0) {
-            this.showDescriptionTooSmall = false;
-        }
-
-        if (length > this.maxRecommendedDescriptionSize) {
-            this.$warning.text(_t('Your description looks too long.')).show();
-        } else if (this.showDescriptionTooSmall && length < this.minRecommendedDescriptionSize) {
-            this.$warning.text(_t('Your description looks too short.')).show();
-        } else {
-            this.$warning.hide();
-        }
-
-        this._renderPreview();
-        this.trigger('description-changed');
-    },
-    /**
-     * @private
-     */
-    _renderPreview: function () {
-        var indexed = this.isIndexed;
-        var preview = "";
-        if (indexed) {
-            preview = new Preview(this, {
-                title: this.getTitle(),
-                description: this.getDescription(),
-                url: this.getUrl(),
-            });
-        } else {
-            preview = new Preview(this, {
-                description: _t("You have hidden this page from search results. It won't be indexed by search engines."),
-            });
-        }
-        this.$preview.empty();
-        preview.appendTo(this.$preview);
-    },
-});
-
-var MetaKeywords = Widget.extend({
-    // Form and table for SEO meta keywords
-    template: 'website.seo_meta_keywords',
-    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
-    events: {
-        'keyup input[name=website_meta_keywords]': '_confirmKeyword',
-        'click button[data-action=add]': '_addKeyword',
-    },
-
-    init: function (parent, options) {
-        this.htmlPage = options.htmlPage;
-        this._super(parent, options);
-    },
-    start: function () {
-        var self = this;
-        this.$input = this.$('input[name=website_meta_keywords]');
-        this.keywordList = new KeywordList(this, {htmlPage: this.htmlPage});
-        this.keywordList.on('list-full', this, function () {
-            self.$input.attr({
-                readonly: 'readonly',
-                placeholder: "Remove a keyword first"
-            });
-            self.$('button[data-action=add]').prop('disabled', true).addClass('disabled');
-        });
-        this.keywordList.on('list-not-full', this, function () {
-            self.$input.removeAttr('readonly').attr('placeholder', "");
-            self.$('button[data-action=add]').prop('disabled', false).removeClass('disabled');
-        });
-        this.keywordList.on('selected', this, function (word, language) {
-            self.keywordList.add(word, language);
-        });
-        this.keywordList.on('content-updated', this, function (removed) {
-            self._updateTable(removed);
-        });
-        return this.keywordList.insertAfter(this.$('.table thead')).then(function() {
-            self._getLanguages();
-            self._updateTable();
-        });
-    },
-    _addKeyword: function () {
-        var $language = this.$('select[name=seo_page_language]');
-        var keyword = this.$input.val();
-        var language = $language.val().toLowerCase();
-        this.keywordList.add(keyword, language);
-        this.$input.val('').focus();
-    },
-    _confirmKeyword: function (e) {
-        if (e.keyCode === 13) {
-            this._addKeyword();
-        }
-    },
-    _getLanguages: function () {
-        var self = this;
-        var context;
-        this.trigger_up('context_get', {
-            callback: function (ctx) {
-                context = ctx;
-            },
-        });
-        this._rpc({
-            route: '/website/get_languages',
-        }).then(function (data) {
-            self.$('#language-box').html(core.qweb.render('Configurator.language_promote', {
-                'language': data,
-                'def_lang': context.lang
-            }));
-        });
-    },
-    /*
-     * Show the table if there is at least one keyword. Hide it otherwise.
-     *
-     * @private
-     * @param {boolean} removed: a keyword is about to be removed,
-     *   we need to exclude it from the count
-     */
-    _updateTable: function (removed) {
-        var min = removed ? 1 : 0;
-        if (this.keywordList.keywords().length > min) {
-            this.$('table').show();
-        } else {
-            this.$('table').hide();
-        }
-    },
-});
-
-var MetaImageSelector = Widget.extend({
-    template: 'website.seo_meta_image_selector',
-    xmlDependencies: ['/website/static/src/components/dialog/seo.xml'],
-    events: {
-        'click .o_meta_img_upload': '_onClickUploadImg',
-        'click .o_meta_img': '_onClickSelectImg',
-    },
-    /**
-     * @override
-     * @param {widget} parent
-     * @param {Object} data
-     */
-    init: function (parent, data) {
-        this.metaTitle = data.title || '';
-        this.activeMetaImg = data.metaImg;
-        this.serverUrl = data.htmlpage.url();
-        const imgField = data.hasSocialDefaultImage ? 'social_default_image' : 'logo';
-        data.pageImages.unshift(_.str.sprintf('/web/image/website/%s/%s', session.website_id, imgField));
-        this.images = _.uniq(data.pageImages);
-        this.customImgUrl = _.contains(
-            data.pageImages.map((img)=>  new URL(img, window.location.origin).pathname),
-            new URL(data.metaImg, window.location.origin).pathname)
-            ? false : data.metaImg;
-        this.previewDescription = data.previewDescription;
-        this._setDescription(this.previewDescription);
-        this._super(parent);
-    },
-    setTitle: function (title) {
-        this.metaTitle = title;
-        this._updateTemplateBody();
-    },
-    setDescription: function (description) {
-        this._setDescription(description);
-        this._updateTemplateBody();
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Set the description, applying ellipsis if too long.
-     *
-     * @private
-    */
-    _setDescription: function (description) {
-        this.metaDescription = description || this.previewDescription;
-        if (this.metaDescription.length > 160) {
-            this.metaDescription = this.metaDescription.substring(0, 159) + '…';
-        }
-    },
-
-    /**
-     * Update template.
-     *
-     * @private
-    */
-    _updateTemplateBody: function () {
-        this.$el.empty();
-        this.images = _.uniq(this.images);
-        this.$el.append(core.qweb.render('website.og_image_body', {widget: this}));
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Called when a select image from list -> change the preview accordingly.
-     *
-     * @private
-     * @param {MouseEvent} ev
-     */
-    _onClickSelectImg: function (ev) {
-        var $img = $(ev.currentTarget);
-        this.activeMetaImg = $img.find('img').attr('src');
-        this._updateTemplateBody();
-    },
-    /**
-     * Open a mediaDialog to select/upload image.
-     *
-     * @private
-     * @param {MouseEvent} ev
-     */
-    _onClickUploadImg: function (ev) {
-        var self = this;
-        var $image = $('<img/>');
-        var mediaDialog = new weWidgets.MediaDialog(this, {
-            onlyImages: true,
-            res_model: 'ir.ui.view',
-        }, $image[0]);
-        mediaDialog.open();
-        mediaDialog.on('save', this, function (image) {
-            self.activeMetaImg = image.src;
-            self.customImgUrl = image.src;
-            self._updateTemplateBody();
-        });
-    },
-});
-
-var SeoConfigurator = Dialog.extend({
-    template: 'website.seo_configuration',
-    xmlDependencies: Dialog.prototype.xmlDependencies.concat(
-        ['/website/static/src/components/dialog/seo.xml']
-    ),
-    canEditTitle: false,
-    canEditDescription: false,
-    canEditKeywords: false,
-    canEditLanguage: false,
-    canEditUrl: false,
-
-    init: function (parent, options) {
-        options = options || {};
-        _.defaults(options, {
-            title: _t('Optimize SEO'),
-            buttons: [
-                {text: _t('Save'), classes: 'btn-primary', click: this.update},
-                {text: _t('Discard'), close: true},
+        this.state = useState({
+            images: [
+                firstImage,
+                ...this.props.pageImages.map((src) => {
+                    return {
+                        src,
+                        active: this.areSameImages(src, this.seoContext.metaImage),
+                        custom: false,
+                    };
+                }),
             ],
         });
 
-        this._super(parent, options);
-    },
-    start: function () {
-        var self = this;
-
-        this.$modal.addClass('oe_seo_configuration');
-
-        this.htmlPage = new HtmlPage();
-
-        this.disableUnsavableFields().then(function () {
-            // Image selector
-            self.metaImageSelector = new MetaImageSelector(self, {
-                htmlpage: self.htmlPage,
-                hasSocialDefaultImage: self.hasSocialDefaultImage,
-                title: self.htmlPage.getOgMeta().metaTitle,
-                metaImg: self.metaImg || self.htmlPage.getOgMeta().ogImageUrl,
-                pageImages: _.pluck(self.htmlPage.images().get(), 'src'),
-                previewDescription: _t('The description will be generated by social media based on page content unless you specify one.'),
+        if (this.seoContext.metaImage && !this.state.images.map(({src}) => this.getImagePathname(src)).includes(this.getImagePathname(this.seoContext.metaImage))) {
+            this.state.images.push({
+                src: this.seoContext.metaImage,
+                active: true,
+                custom: true,
             });
-            self.metaImageSelector.appendTo(self.$('.js_seo_image'));
-
-            // title and description
-            self.metaTitleDescription = new MetaTitleDescription(self, {
-                htmlPage: self.htmlPage,
-                canEditTitle: self.canEditTitle,
-                canEditDescription: self.canEditDescription,
-                canEditUrl: self.canEditUrl,
-                isIndexed: self.isIndexed,
-                previewDescription: _t('The description will be generated by search engines based on page content unless you specify one.'),
-                seoNameHelp: _t('This value will be escaped to be compliant with all major browsers and used in url. Keep it empty to use the default name of the record.'),
-                seoName: self.seoName, // 'my-custom-display-name' or ''
-                seoNameDefault: self.seoNameDefault, // 'display-name'
-            });
-            self.metaTitleDescription.on('title-changed', self, self.titleChanged);
-            self.metaTitleDescription.on('description-changed', self, self.descriptionChanged);
-            self.metaTitleDescription.appendTo(self.$('.js_seo_meta_title_description'));
-
-            // keywords
-            self.metaKeywords = new MetaKeywords(self, {htmlPage: self.htmlPage});
-            self.metaKeywords.appendTo(self.$('.js_seo_meta_keywords'));
-        });
-    },
-    /*
-     * Reset meta tags to their initial value if not saved.
-     *
-     * @private
-     */
-    destroy: function () {
-        if (!this.savedData) {
-            this.htmlPage.changeTitle(this.htmlPage.initTitle);
-            this.htmlPage.changeDescription(this.htmlPage.initDescription);
         }
-        this._super.apply(this, arguments);
-    },
-    disableUnsavableFields: function () {
-        var self = this;
-        return this.loadMetaData().then(function (data) {
-            // We only need a reload for COW when the copy is happening, therefore:
-            // - no reload if we are not editing a view (condition: website_id === undefined)
-            // - reload if generic page (condition: website_id === false)
-            self.reloadOnSave = data.website_id === undefined ? false : !data.website_id;
-            //If website.page, hide the google preview & tell user his page is currently unindexed
-            self.isIndexed = (data && ('website_indexed' in data)) ? data.website_indexed : true;
-            self.canEditTitle = data && ('website_meta_title' in data);
-            self.canEditDescription = data && ('website_meta_description' in data);
-            self.canEditKeywords = data && ('website_meta_keywords' in data);
-            self.metaImg = data.website_meta_og_img;
-            self.hasSocialDefaultImage = data.has_social_default_image;
-            self.canEditUrl = data && ('seo_name' in data);
-            self.seoName = self.canEditUrl && data.seo_name;
-            self.seoNameDefault = self.canEditUrl && data.seo_name_default;
-            if (!self.canEditTitle && !self.canEditDescription && !self.canEditKeywords) {
-                // disable the button to prevent an error if the current page doesn't use the mixin
-                // we make the check here instead of on the view because we don't need to check
-                // at every page load, just when the rare case someone clicks on this link
-                // TODO don't show the modal but just an alert in this case
-                self.$footer.find('button[data-action=update]').attr('disabled', true);
-            }
+
+        if (!this.activeMetaImage) {
+            this.selectImage(this.state.images[0].src);
+        }
+    }
+
+    get title() {
+        return this.seoContext.title || this.props.defaultTitle;
+    }
+
+    get description() {
+        return this.seoContext.description || this.props.previewDescription;
+    }
+
+    get activeMetaImage() {
+        const activeImage = this.state.images.find(({active}) => active);
+        return activeImage && activeImage.src;
+    }
+
+    getImagePathname(src) {
+        return new URL(src, this.website.pageDocument.location.origin).pathname;
+    }
+
+    areSameImages(src1, src2) {
+        return this.getImagePathname(src1) === this.getImagePathname(src2);
+    }
+
+    selectImage(src) {
+        this.state.images = this.state.images.map(img => {
+            img.active = img.src === src;
+            return img;
         });
-    },
-    update: function () {
-        var self = this;
-        var data = {};
+        this.seoContext.metaImage = src;
+    }
+}
+ImageSelector.template = 'website.ImageSelector';
+ImageSelector.components = {
+    MetaImage,
+};
+ImageSelector.props = {
+    previewDescription: String,
+    defaultTitle: String,
+    hasSocialDefaultImage: Boolean,
+    pageImages: Array,
+    url: String,
+};
+
+class Keyword extends Component {
+    setup() {
+        this.website = useService('website');
+        this.rpc = useService('rpc');
+
+        this.seoContext = useState(seoContext);
+
+        this.state = useState({
+            suggestions: [],
+        });
+
+        onMounted(async () => {
+            const suggestions = await this.rpc('/website/seo_suggest', {
+                lang: this.props.language,
+                keywords: this.props.keyword,
+            });
+            const regex = new RegExp(WORD_SEPARATORS_REGEX + this.props.keyword + WORD_SEPARATORS_REGEX, 'gi');
+            this.state.suggestions = [...new Set(JSON.parse(suggestions).map(word => word.replace(regex, '').trim()))];
+        });
+    }
+
+    isKeywordIn(string) {
+        return new RegExp(WORD_SEPARATORS_REGEX + this.props.keyword + WORD_SEPARATORS_REGEX, 'gi').test(string);
+    }
+
+    getHeaders(tag) {
+        return Array.from(this.website.pageDocument.documentElement.querySelectorAll(`#wrap ${tag}`)).map(header => header.textContent);
+    }
+
+    getBodyText() {
+        return this.website.pageDocument.body.textContent;
+    }
+
+    get usedInH1() {
+        return this.isKeywordIn(this.getHeaders('h1'));
+    }
+
+    get usedInH2() {
+        return this.isKeywordIn(this.getHeaders('h2'));
+    }
+
+    get usedInTitle() {
+        return this.isKeywordIn(this.seoContext.title);
+    }
+
+    get usedInDescription() {
+        return this.isKeywordIn(this.seoContext.description);
+    }
+
+    get usedInContent() {
+        return this.isKeywordIn(this.getBodyText());
+    }
+}
+Keyword.template = "website.Keyword";
+Keyword.props = {
+    language: String,
+    keyword: String,
+    addKeyword: Function,
+    removeKeyword: Function,
+};
+
+class MetaKeywords extends Component {
+    setup() {
+        this.rpc = useService('rpc');
+        this.website = useService('website');
+
+        this.seoContext = useState(seoContext);
+
+        this.state = useState({
+            language: '',
+            keyword: '',
+        });
+
+        this.maxKeywords = 10;
+
+        onWillStart(async () => {
+            this.languages = await this.rpc('/website/get_languages');
+            this.state.language = this.getLanguage();
+        });
+    }
+
+    onKeyup(ev) {
+        // Add keyword on enter.
+        if (ev.keyCode === 13) {
+            this.addKeyword(this.state.keyword);
+        }
+    }
+
+    getLanguage() {
+        return (this.website.pageDocument.documentElement.getAttribute('lang') || 'en_US').replace('-', '_');
+    }
+
+    get isFull() {
+        return this.seoContext.keywords.length >= this.maxKeywords;
+    }
+
+    addKeyword(keyword) {
+        if (keyword && !this.isFull && !this.seoContext.keywords.includes(keyword)) {
+            this.seoContext.keywords.push(keyword);
+            this.state.keyword = '';
+        }
+    }
+
+    removeKeyword(keyword) {
+        this.seoContext.keywords = this.seoContext.keywords.filter(kw => kw !== keyword);
+    }
+}
+MetaKeywords.template = 'website.MetaKeywords';
+MetaKeywords.components = {
+    Keyword,
+};
+
+class SEOPreview extends Component {
+    get description() {
+        if (this.props.description.length > 160) {
+            return this.props.description.substring(0, 159) + '…';
+        }
+        return this.props.description;
+    }
+}
+SEOPreview.template = 'website.SEOPreview';
+SEOPreview.props = {
+    isIndexed: Boolean,
+    title: String,
+    description: String,
+    url: String,
+};
+
+class TitleDescription extends Component {
+    setup() {
+        this.seoContext = useState(seoContext);
+
+        this.previousSeoName = this.seoContext.seoName;
+
+        this.maxRecommendedDescriptionSize = 300;
+        this.minRecommendedDescriptionSize = 50;
+    }
+
+    get seoNameUrl() {
+        return this.previousSeoName || this.props.seoNameDefault;
+    }
+
+    get seoNamePre() {
+        return this.pathname.split(this.seoNameUrl)[0];
+    }
+
+    get seoNamePost() {
+        return this.pathname.split(this.seoNameUrl).slice(-1)[0]; // at least the -id theorically
+    }
+
+    get pathname() {
+        return new URL(this.props.url).pathname;
+    }
+
+    get url() {
+        if (this.seoContext.seoName) {
+            return this.props.url.replace(this.seoNameUrl, this.seoContext.seoName);
+        }
+        return this.props.url.replace(this.seoNameUrl, this.props.seoNameDefault);
+    }
+
+    get title() {
+        return this.seoContext.title || this.props.defaultTitle;
+    }
+
+    get description() {
+        return this.seoContext.description || this.props.previewDescription;
+    }
+
+    get descriptionWarning() {
+        if (!this.seoContext.description) {
+            return false;
+        }
+        if (this.seoContext.description.length < this.minRecommendedDescriptionSize) {
+            return this.env._t("Your description looks too short.");
+        } else if (this.seoContext.description.length > this.maxRecommendedDescriptionSize) {
+            return this.env._t("Your description looks too long.");
+        }
+        return false;
+    }
+}
+TitleDescription.template = 'website.TitleDescription';
+TitleDescription.props = {
+    canEditDescription: Boolean,
+    canEditUrl: Boolean,
+    canEditTitle: Boolean,
+    seoNameHelp: String,
+    seoNameDefault: {optional: true, String},
+    isIndexed: Boolean,
+    defaultTitle: String,
+    previewDescription: String,
+    url: String,
+};
+TitleDescription.components = {
+    SEOPreview,
+};
+
+export class OptimizeSEODialog extends WebsiteDialog {
+    setup() {
+        super.setup();
+        this.rpc = useService('rpc');
+        this.website = useService('website');
+        this.dialogs = useService('dialog');
+        this.orm = useService('orm');
+
+        this.title = this.env._t("Optimize SEO");
+        this.primaryTitle = this.env._t("Save");
+        this.size = 'modal-lg';
+        this.contentClass = `${this.contentClass} oe_seo_configuration`;
+
+        onWillStart(async () => {
+            const { metadata: { mainObject, seoObject, path } } = this.website.currentWebsite;
+
+            this.object = mainObject || seoObject;
+            this.data = await this.rpc('/website/get_seo_data', {
+                'res_id': this.object.id,
+                'res_model': this.object.model,
+            });
+
+            this.canEditDescription = 'website_meta_description' in this.data;
+            this.canEditTitle = 'website_meta_title' in this.data;
+            this.canEditUrl = 'seo_name' in this.data;
+            seoContext.title = this.canEditTitle && this.data.website_meta_title;
+
+            // If website.page, hide the google preview & tell user his page is currently unindexed
+            this.isIndexed = 'website_indexed' in this.data ? this.data.website_indexed : true;
+            this.seoNameHelp = this.env._t("This value will be escaped to be compliant with all major browsers and used in url. Keep it empty to use the default name of the record.");
+            this.previousSeoName = this.canEditUrl && this.data.seo_name;
+            seoContext.seoName = this.previousSeoName;
+            this.seoNameDefault = this.canEditUrl && this.data.seo_name_default;
+
+            seoContext.description = this.getMeta({ name: 'description' });
+            this.previewDescription = this.env._t("The description will be generated by search engines based on page content unless you specify one.");
+            this.defaultTitle = this.getMeta({ name: 'default_title' });
+            this.url = path;
+
+            seoContext.metaImage = this.data.website_meta_og_img || this.getMeta({ property: 'og:image' });
+
+            this.pageImages = this.getImages();
+            this.socialPreviewDescription = this.env._t("The description will be generated by social media based on page content unless you specify one.");
+            this.hasSocialDefaultImage = this.data.has_social_default_image;
+
+            this.canEditKeywords = 'website_meta_keywords' in this.data;
+            seoContext.keywords = this.getMeta({ name: 'keywords' });
+        });
+    }
+
+    get pageDocumentElement() {
+        return this.website.pageDocument.documentElement;
+    }
+
+    getImages() {
+        const imageEls = this.pageDocumentElement.querySelectorAll('#wrap img');
+        return [...new Set(Array.from(imageEls)
+                .filter(img => img.naturalHeight > 200 && img.naturalWidth > 200)
+                .map(({src}) => (src))
+            )];
+    }
+
+    getMeta({ name, property }) {
+        let query = '';
+        if (name) {
+            query = `meta[name="${name}"]`;
+        }
+        if (property) {
+            query = `meta[property="${property}"]`;
+        }
+        const el = this.pageDocumentElement.querySelector(query);
+        if (name === 'keywords') {
+            const parsed = el && el.content.split(',');
+            return parsed && parsed[0] ? parsed : [];
+        }
+        return el && el.content;
+    }
+
+    async primaryClick() {
+        const data = {};
         if (this.canEditTitle) {
-            data.website_meta_title = this.metaTitleDescription.$title.val();
+            data.website_meta_title = seoContext.title;
         }
         if (this.canEditDescription) {
-            data.website_meta_description = this.metaTitleDescription.$description.val();
+            data.website_meta_description = seoContext.description;
         }
         if (this.canEditKeywords) {
-            data.website_meta_keywords = this.metaKeywords.keywordList.keywords().join(', ');
+            data.website_meta_keywords = seoContext.keywords.join(',');
         }
         if (this.canEditUrl) {
-            if (this.metaTitleDescription.$seoName.val() != this.metaTitleDescription.previousSeoName) {
-                data.seo_name = this.metaTitleDescription.$seoName.val();
-                self.reloadOnSave = true;  // will force a refresh on old url and redirect to new slug
+            if (seoContext.seoName !== this.previousSeoName) {
+                data.seo_name = seoContext.seoName;
             }
         }
-        data.website_meta_og_img = this.metaImageSelector.activeMetaImg;
-        this.saveMetaData(data).then(function () {
-            // We want to reload if we are editing a generic page
-            // because it will become a specific page after this change (COW)
-            // and we want the user to be on the page he just created.
-            if (self.reloadOnSave) {
-                window.location.href = self.htmlPage.url();
-            } else {
-                self.htmlPage.changeKeywords(self.metaKeywords.keywordList.keywords());
-                self.savedData = true;
-                self.close();
-            }
-        });
-    },
-    getMainObject: function () {
-        var mainObject;
-        this.trigger_up('main_object_request', {
-            callback: function (value) {
-                mainObject = value;
-            },
-        });
-        return mainObject;
-    },
-    getSeoObject: function () {
-        var seoObject;
-        this.trigger_up('seo_object_request', {
-            callback: function (value) {
-                seoObject = value;
-            },
-        });
-        return seoObject;
-    },
-    loadMetaData: function () {
-        var obj = this.getSeoObject() || this.getMainObject();
-        return new Promise(function (resolve, reject) {
-            if (!obj) {
-                // return Promise.reject(new Error("No main_object was found."));
-                resolve(null);
-            } else {
-                rpc.query({
-                    route: "/website/get_seo_data",
-                    params: {
-                        'res_id': obj.id,
-                        'res_model': obj.model,
-                    },
-                }).then(function (data) {
-                    var meta = data;
-                    meta.model = obj.model;
-                    resolve(meta);
-                }).guardedCatch(reject);
-            }
-        });
-    },
-    saveMetaData: function (data) {
-        var obj = this.getSeoObject() || this.getMainObject();
-        if (!obj) {
-            return Promise.reject();
-        } else {
-            return this._rpc({
-                model: obj.model,
-                method: 'write',
-                args: [[obj.id], data],
-            });
-        }
-    },
-    titleChanged: function () {
-        var self = this;
-        _.defer(function () {
-            var title = self.metaTitleDescription.getTitle();
-            self.htmlPage.changeTitle(title);
-            self.metaImageSelector.setTitle(title);
-        });
-    },
-    descriptionChanged: function () {
-        var self = this;
-        _.defer(function () {
-            var description = self.metaTitleDescription.getRealDescription();
-            self.htmlPage.changeDescription(description);
-            self.metaImageSelector.setDescription(description);
-        });
-    },
-});
-
-var SeoMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
-    actions: _.extend({}, websiteNavbarData.WebsiteNavbarActionWidget.prototype.actions || {}, {
-        'promote-current-page': '_promoteCurrentPage',
-    }),
-
-    init: function (parent, options) {
-        this._super(parent, options);
-
-        if ($.deparam.querystring().enable_seo !== undefined) {
-            this._promoteCurrentPage();
-        }
-    },
-
-    //--------------------------------------------------------------------------
-    // Actions
-    //--------------------------------------------------------------------------
-
-    /**
-     * Opens the SEO configurator dialog.
-     *
-     * @private
-     */
-    _promoteCurrentPage: function () {
-        new SeoConfigurator(this).open();
-    },
-});
-
-registry.category("website_navbar_widgets").add("SeoMenu", {
-    Widget: SeoMenu,
-    selector: '#promote-menu',
-});
-
-return {
-    SeoConfigurator: SeoConfigurator,
-    SeoMenu: SeoMenu,
+        data.website_meta_og_img = seoContext.metaImage;
+        await this.orm.write(this.object.model, [this.object.id], data);
+        this.close();
+        this.website.goToWebsite({path: this.url.replace(this.previousSeoName || this.seoNameDefault, seoContext.seoName)});
+    }
+}
+OptimizeSEODialog.bodyTemplate = 'website.OptimizeSEODialog';
+OptimizeSEODialog.components = {
+    TitleDescription,
+    ImageSelector,
+    MetaKeywords,
 };
-});
diff --git a/addons/website/static/src/components/dialog/seo.scss b/addons/website/static/src/components/dialog/seo.scss
new file mode 100644
index 00000000000..7d8234ebb77
--- /dev/null
+++ b/addons/website/static/src/components/dialog/seo.scss
@@ -0,0 +1,108 @@
+.oe_seo_configuration {
+    #language-box {
+        padding-right: 25px;
+        background-color: white;
+    }
+
+    select {
+        background-position: bottom 50% right 1em;
+    }
+
+    .o_seo_og_image {
+        .o_meta_img {
+            position: relative;
+            transition: border-color 200ms;
+            display: inline-block;
+            border: 2px solid gray('400');
+
+            > img {
+                width: 70px;
+                height: 70px;
+                object-fit: cover;
+                cursor: pointer;
+            }
+
+            &:hover {
+                border-color: $o-brand-primary;
+            }
+
+            &.o_active_image {
+                border-color: $o-brand-primary;
+
+                &:before {
+                    @include o-position-absolute($right: 0);
+                    content: '';
+                    border: 16px solid rgba($o-brand-primary, 0.8);
+                    border-left-color: transparent;
+                    border-bottom-color: transparent;
+                }
+
+                &:after {
+                    @include o-position-absolute(2px, 3px);
+                    display: inline-block;
+                    content: "\f00c";
+                    font-family: FontAwesome;
+                    color: white;
+                    font-size: 12px;
+                }
+            }
+
+            .o-custom-label {
+                @include o-position-absolute($bottom: 0px);
+                cursor: pointer;
+                background: rgba(gray('800'), 0.6);
+                font-size: 12px;
+            }
+        }
+
+        .o_meta_img_upload {
+            cursor: pointer;
+            transition: 200ms;
+            display: inline-block;
+            padding: 23px 27px;
+            border: 3px dashed lighten(gray('700'), 30%);
+            vertical-align: top;
+            color: lighten(gray('600'), 30%);
+
+            &:hover {
+                border-color: $o-brand-primary;
+                color: $o-brand-primary;
+            }
+        }
+
+        .o_meta_active_img {
+            height: 240px;
+            object-fit: cover;
+        }
+    }
+
+    div.oe_seo_preview_g {
+        list-style: none;
+        font-family: arial, sans-serif;
+
+        .r {
+            cursor: pointer;
+            color:#1a0dab;
+            font-size: 18px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            -webkit-text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .s {
+            font-size: 13px;
+            line-height: 18px;
+            color: #545454;
+            .kv {
+                color: #006621;
+                font-size: 14px;
+                line-height: 18px;
+            }
+        }
+    }
+
+    td.o_seo_keyword_suggestion span.o_seo_suggestion.badge {
+        cursor: pointer;
+    }
+}
diff --git a/addons/website/static/src/components/dialog/seo.xml b/addons/website/static/src/components/dialog/seo.xml
index b10faaff5e5..0e86e402f3b 100644
--- a/addons/website/static/src/components/dialog/seo.xml
+++ b/addons/website/static/src/components/dialog/seo.xml
@@ -1,118 +1,84 @@
-<?xml version="1.0" encoding="utf-8"?>
-<templates id="template" xml:space="preserve">
-    <t t-name="Configurator.language_promote">
-        <t t-foreach="language" t-as="lang">
-            <option t-att-value="lang[0]" t-att-selected="lang[0] == def_lang ? 'selected' : null"><t t-esc="lang[2]" /></option>
-        </t>
-    </t>
-
-    <div t-name="website.seo_configuration" role="form">
-        <section class="js_seo_meta_title_description"/>
-        <section class="js_seo_meta_keywords"/>
-        <section class="js_seo_image"/>
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+<t t-name="website.MetaImage" owl="1">
+    <div t-att-class="props.active ? 'o_active_image o_meta_img m-1' : 'o_meta_img m-1'" t-on-click="() => props.selectImage(props.src)">
+        <span t-if="props.custom" class="o-custom-label w-100 text-white text-center">Custom</span>
+        <img t-att-src="props.src"/>
     </div>
+</t>
 
-    <t t-name="website.seo_suggestion_list">
-        <ul class="list-inline mb0">
-            <!-- filled in JS -->
-        </ul>
-    </t>
-
-    <t t-name="website.seo_list">
-        <tbody>
-            <!-- filled in JS -->
-        </tbody>
-    </t>
-
-    <t t-name="website.seo_keyword">
-        <tr class="js_seo_keyword" t-att-data-keyword="widget.keyword">
-            <td t-esc="widget.keyword"/>
-            <td class="text-center"><i t-if="widget.used_h1" class="fa fa-check" t-attf-title="{{ widget.keyword }} is used in page first level heading"/></td>
-            <td class="text-center"><i t-if="widget.used_h2" class="fa fa-check" t-attf-title="{{ widget.keyword }} is used in page second level heading"/></td>
-            <td class="text-center"><i class="js_seo_keyword_title fa fa-check" style="visibility: hidden;" t-attf-title="{{ widget.keyword }} is used in page title"/></td>
-            <td class="text-center"><i class="js_seo_keyword_description fa fa-check" style="visibility: hidden;" t-attf-title="{{ widget.keyword }} is used in page description"/></td>
-            <td class="text-center"><i t-if="widget.used_content" class="fa fa-check" t-attf-title="{{ widget.keyword }} is used in page content"/></td>
-            <td class="o_seo_keyword_suggestion"/>
-            <td class="text-center"><a href="#" class="oe_remove" data-action="remove-keyword" t-attf-title="Remove {{ widget.keyword }}"><i class="fa fa-trash"/></a></td>
-        </tr>
-    </t>
-
-    <t t-name="website.seo_suggestion">
-        <li class="list-inline-item">
-            <span class="o_seo_suggestion badge badge-info" t-att-data-keyword="widget.keyword" t-attf-title="Add {{ widget.keyword }}" t-esc="widget.keyword"/>
-        </li>
-    </t>
-
-    <t t-name="website.seo_preview">
-        <div class="oe_seo_preview_g">
-            <div class="rc">
-                <div class="r"><t t-esc="widget.title"/></div>
-                <div class="s">
-                    <div class="kv"><t t-esc="widget.url"/></div>
-                    <div class="st"><t t-esc="widget.description"/></div>
+<t t-name="website.ImageSelector" owl="1">
+    <section>
+        <div class="o_seo_og_image">
+            <h4><small>Select an image for social share</small></h4>
+            <div class="row">
+                <div class="col-lg-6">
+                    <t t-foreach="state.images" t-as="image" t-key="image.src">
+                        <MetaImage active="image.active" custom="image.custom" src="image.src" selectImage="src => this.selectImage(src)"/>
+                    </t>
+                    <div class="o_meta_img_upload m-1" title="Click to choose more images">
+                        <i class="fa fa-upload"/>
+                    </div>
                 </div>
-            </div>
-        </div>
-    </t>
-
-    <div t-name="website.seo_meta_title_description">
-        <div class="row">
-            <div class="col-lg-6">
-                <div class="form-group">
-                    <label for="website_meta_title">
-                        Title <i class="fa fa-question-circle-o" title="The title will take a default value unless you specify one."/>
-                    </label>
-                    <input type="text" name="website_meta_title" id="website_meta_title" class="form-control" placeholder="Keep empty to use default value" maxlength="70" size="70"/>
-                </div>
-                <div class="form-group">
-                    <label for="website_meta_description">
-                        Description <i class="fa fa-question-circle-o" t-att-title="widget.previewDescription"/>
-                    </label>
-                    <textarea name="website_meta_description" id="website_meta_description" placeholder="Keep empty to use default value" class="form-control"/>
-                    <div class="alert alert-warning mt16 mb0 small" id="website_meta_description_warning" style="display: none;"/>
-                </div>
-                <div class="form-group" t-if='widget.canEditUrl'>
-                    <label for="website_seo_name">
-                        Custom Url <i class="fa fa-question-circle-o" t-att-title="widget.seoNameHelp" />
-                    </label>
-                    <div class="input-group">
-                        <div class="input-group-prepend">
-                            <span class="input-group-text seo_name_pre"></span>
-                        </div>
-                        <input type="text" name="website_seo_name" id="website_seo_name" class="form-control" t-att-placeholder="widget.seoNameDefault" />
-                        <div class="input-group-append" title="Unalterable unique identifier">
-                            <span class="input-group-text seo_name_post"></span>
+                <div class="col-lg-6">
+                    <div class="card p-0 mb16">
+                        <div class="card-header">Social Preview</div>
+                        <img class="card-img-top o_meta_active_img" t-att-src="activeMetaImage"/>
+                        <div class="card-body px-3 py-2">
+                            <h6 class="text-primary card-title mb0"><t t-esc="title"/></h6>
+                            <small class="card-subtitle text-muted"><t t-esc="props.url"/></small>
+                            <p t-esc="description"/>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="col-lg-6">
-                <div class="card-header">Preview</div>
-                <div class="card mb0 p-0">
-                    <div class="card-body">
-                        <div class="js_seo_preview"/>
-                    </div>
-                </div>
-            </div>
         </div>
-    </div>
+    </section>
+</t>
 
-    <t t-name="website.seo_meta_keywords">
+<t t-name="website.Keyword" owl="1">
+    <tr>
+        <td t-esc="props.keyword"/>
+        <td class="text-center"><i t-if="usedInH1" class="fa fa-check" t-att-title="props.keyword + ' is used in page first level heading'"/></td>
+        <td class="text-center"><i t-if="usedInH2" class="fa fa-check" t-att-title="props.keyword + ' is used in page second level heading'"/></td>
+        <td class="text-center"><i t-if="usedInTitle" class="fa fa-check" t-att-title="props.keyword + ' is used in page title'"/></td>
+        <td class="text-center"><i t-if="usedInDescription" class=" fa fa-check" t-att-title="props.keyword + ' is used in page description'"/></td>
+        <td class="text-center"><i t-if="usedInContent" class="fa fa-check" t-att-title="props.keyword + ' is used in page content'"/></td>
+        <td class="o_seo_keyword_suggestion">
+            <ul class="list-inline mb0">
+                <span t-if="!state.suggestions.length">Loading...</span>
+                <t t-foreach="state.suggestions" t-as="suggestion" t-key="suggestion">
+                    <li class="list-inline-item" t-on-click="() => props.addKeyword(suggestion)">
+                        <span class="o_seo_suggestion badge badge-info" t-att-title="'Add ' + suggestion" t-esc="suggestion"/>
+                    </li>
+                </t>
+            </ul>
+        </td>
+        <td class="text-center" t-on-click="() => props.removeKeyword(props.keyword)"><a href="#" class="oe_remove" t-att-title="'Remove ' + props.keyword"><i class="fa fa-trash"/></a></td>
+    </tr>
+</t>
+
+<t t-name="website.MetaKeywords" owl="1">
+    <section>
         <label for="website_meta_keywords">
             Keywords
         </label>
         <div class="form-inline" role="form">
             <div class="input-group">
-                <input type="text" name="website_meta_keywords" id="website_meta_keywords" class="form-control" placeholder="Keyword" maxlength="30"/>
+                <input t-model="state.keyword" type="text" class="form-control" t-att-placeholder="isFull ? 'Remove a keyword first' : 'Keyword'" t-att-readonly="isFull" maxlength="30" t-on-keyup="onKeyup"/>
                 <span title="The language of the keyword and related keywords." class="input-group-append">
-                    <select name="seo_page_language" id="language-box" class="btn form-control"/>
+                    <select t-model="state.language" class="btn btn-outline-primary pr-5 form-control">
+                        <t t-foreach="languages" t-as="lang" t-key="lang[0]">
+                            <option t-att-value="lang[0]"><t t-esc="lang[2]"/></option>
+                        </t>
+                    </select>
                 </span>
                 <span class="input-group-append">
-                    <button data-action="add" class="btn btn-primary btn-sm" type="button">Add</button>
+                    <button t-on-click="() => this.addKeyword(state.keyword)" t-att-disabled="isFull" class="btn btn-primary btn-sm" type="button">Add</button>
                 </span>
             </div>
         </div>
-        <div class="table-responsive mt16">
+        <div t-if="seoContext.keywords.length" class="table-responsive mt16">
             <table class="table table-sm">
                 <thead>
                     <tr>
@@ -126,43 +92,94 @@
                         <th class="text-center"></th>
                     </tr>
                 </thead>
-                <!-- body inserted in JS -->
+                <t t-foreach="seoContext.keywords" t-as="keyword" t-key="keyword">
+                    <Keyword language="state.language" keyword="keyword" addKeyword="(keyword) => this.addKeyword(keyword)" removeKeyword="(keyword) => this.removeKeyword(keyword)"/>
+                </t>
             </table>
         </div>
-    </t>
+    </section>
+</t>
 
-    <div t-name="website.seo_meta_image_selector" class="o_seo_og_image">
-        <t t-call="website.og_image_body"/>
+<t t-name="website.SEOPreview" owl="1">
+    <div class="oe_seo_preview_g">
+        <div class="rc">
+            <t t-if="props.isIndexed">
+                <div class="r"><t t-esc="props.title"/></div>
+                <div class="s">
+                    <div class="kv"><t t-esc="props.url"/></div>
+                    <div class="st"><t t-esc="description"/></div>
+                </div>
+            </t>
+            <t t-else="">
+                <div class="s">
+                    <div class="st">You have hidden this page from search results. It won't be indexed by search engines.</div>
+                </div>
+            </t>
+        </div>
     </div>
+</t>
 
-    <t t-name="website.og_image_body">
-        <h4><small>Select an image for social share</small></h4>
+<t t-name="website.TitleDescription" owl="1">
+    <section>
         <div class="row">
             <div class="col-lg-6">
-                <t t-foreach="widget.images" t-as="image">
-                    <div t-attf-class="o_meta_img mt4 #{new window.URL(image, window.location.origin).pathname === new window.URL(widget.activeMetaImg, window.location.origin).pathname and ' o_active_image' or ''}">
-                        <img t-att-src="image"/>
-                    </div>
-                </t>
-                <div t-if="widget.customImgUrl" t-attf-class="o_meta_img mt4 #{widget.customImgUrl === widget.activeMetaImg and ' o_active_image' or ''}">
-                    <span class="o-custom-label w-100 text-white text-center">Custom</span>
-                    <img t-att-src="widget.customImgUrl"/>
+                <div class="form-group">
+                    <label for="website_meta_title">
+                        Title <i class="fa fa-question-circle-o" title="The title will take a default value unless you specify one."/>
+                    </label>
+                    <input type="text" t-model="seoContext.title" t-att-disabled="!props.canEditTitle" class="form-control" placeholder="Keep empty to use default value" maxlength="70" size="70"/>
                 </div>
-                <div class="o_meta_img_upload mt4" title="Click to choose more images">
-                    <i class="fa fa-upload"/>
+                <div class="form-group">
+                    <label for="website_meta_description">
+                        Description <i class="fa fa-question-circle-o" t-att-title="props.previewDescription"/>
+                    </label>
+                    <textarea t-model="seoContext.description" t-att-disabled="!props.canEditDescription" name="website_meta_description" placeholder="Keep empty to use default value" class="form-control"/>
+                    <div t-if="descriptionWarning.length" class="alert alert-warning mt16 mb0 small">
+                        <span t-esc="descriptionWarning"/>
+                    </div>
+                </div>
+                <div class="form-group" t-if='props.canEditUrl'>
+                    <label for="website_seo_name">
+                        Custom Url <i class="fa fa-question-circle-o" t-att-title="props.seoNameHelp" />
+                    </label>
+                    <div class="input-group">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text seo_name_pre" t-esc="seoNamePre"/>
+                        </div>
+                        <input type="text" t-model="seoContext.seoName" class="form-control" t-att-placeholder="props.seoNameDefault" />
+                        <div class="input-group-append" title="Unalterable unique identifier">
+                            <span class="input-group-text seo_name_post" t-esc="seoNamePost"/>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="col-lg-6">
-                <div class="card p-0 mb16">
-                    <div class="card-header">Social Preview</div>
-                    <img class="card-img-top o_meta_active_img" t-att-src="widget.activeMetaImg"/>
-                    <div class="card-body px-3 py-2">
-                        <h6 class="text-primary card-title mb0"><t t-esc="widget.metaTitle"/></h6>
-                        <small class="card-subtitle text-muted"><t t-esc="widget.serverUrl"/></small>
-                        <p t-esc="widget.metaDescription"/>
-                  </div>
+                <div class="card-header">Preview</div>
+                <div class="card mb0 p-0">
+                    <div class="card-body">
+                        <SEOPreview isIndexed="props.isIndexed" title="title" description="description" url="url"/>
+                    </div>
                 </div>
             </div>
         </div>
-    </t>
+    </section>
+</t>
+
+<t t-name="website.OptimizeSEODialog" owl="1">
+    <TitleDescription canEditDescription="canEditDescription"
+        canEditUrl="canEditUrl"
+        canEditTitle="canEditTitle"
+        seoNameHelp="seoNameHelp"
+        seoNameDefault="seoNameDefault"
+        isIndexed="isIndexed"
+        defaultTitle="defaultTitle"
+        previewDescription="previewDescription"
+        url="url"/>
+    <MetaKeywords/>
+    <ImageSelector previewDescription="socialPreviewDescription"
+        defaultTitle="defaultTitle"
+        hasSocialDefaultImage="hasSocialDefaultImage"
+        pageImages="pageImages"
+        url="url"/>
+</t>
 </templates>
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
index 9b01c18099e..c489fb8d504 100644
--- a/addons/website/static/src/components/navbar/navbar.js
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -5,6 +5,7 @@ import { useService, useBus } from '@web/core/utils/hooks';
 import { registry } from "@web/core/registry";
 import { patch } from 'web.utils';
 import { EditMenuDialog } from '@website/components/dialog/edit_menu';
+import { OptimizeSEODialog } from '@website/components/dialog/seo';
 
 const websiteSystrayRegistry = registry.category('website_systray');
 
@@ -26,14 +27,21 @@ patch(NavBar.prototype, 'website_navbar', {
         useBus(websiteSystrayRegistry, 'CONTENT-UPDATED', () => this.render(true));
 
         this.websiteDialogMenus = {
-            'website.menu_edit_menu': EditMenuDialog,
+            'website.menu_edit_menu': {
+                component: EditMenuDialog,
+                isDisplayed: () => !!this.websiteService.currentWebsite,
+            },
+            'website.menu_optimize_seo': {
+                component: OptimizeSEODialog,
+                isDisplayed: () => this.websiteService.currentWebsite && !!this.websiteService.currentWebsite.metadata.mainObject,
+            },
         };
     },
 
     filterWebsiteMenus(sections) {
         const filteredSections = [];
         for (const section of sections) {
-            if (!this.websiteDialogMenus[section.xmlid]) {
+            if (!this.websiteDialogMenus[section.xmlid] || this.websiteDialogMenus[section.xmlid].isDisplayed()) {
                 let subSections = [];
                 if (section.childrenTree.length) {
                     subSections = this.filterWebsiteMenus(section.childrenTree);
@@ -63,7 +71,7 @@ patch(NavBar.prototype, 'website_navbar', {
      */
     get currentAppSections() {
         const currentAppSections = this._super();
-        if (this.currentApp && this.currentApp.xmlid === 'website.menu_website_configuration' && !this.websiteService.currentWebsite) {
+        if (this.currentApp && this.currentApp.xmlid === 'website.menu_website_configuration') {
             return this.filterWebsiteMenus(currentAppSections).filter(section => section.childrenTree.length);
         }
         return currentAppSections;
@@ -74,7 +82,7 @@ patch(NavBar.prototype, 'website_navbar', {
      */
     onNavBarDropdownItemSelection(menu) {
         if (this.websiteDialogMenus[menu.xmlid]) {
-            return this.dialogService.add(this.websiteDialogMenus[menu.xmlid]);
+            return this.dialogService.add(this.websiteDialogMenus[menu.xmlid].component);
         }
         return this._super(menu);
     }
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 1170d8664af..89a043118c2 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -26,6 +26,7 @@ export const websiteService = {
         let currentWebsiteId;
         let currentMetadata = {};
         let fullscreen;
+        let pageDocument;
         const context = reactive({
             showNewContentModal: false,
         });
@@ -51,10 +52,6 @@ export const websiteService = {
             set currentWebsiteId(id) {
                 setCurrentWebsiteId(id);
             },
-            set currentMetadata(metadata) {
-                currentMetadata = metadata;
-                websiteSystrayRegistry.trigger('CONTENT-UPDATED');
-            },
             get currentWebsite() {
                 const currentWebsite = websites.find(w => w.id === currentWebsiteId);
                 if (currentWebsite) {
@@ -68,6 +65,26 @@ export const websiteService = {
             get context() {
                 return context;
             },
+            set pageDocument(document) {
+                pageDocument = document;
+                if (!document) {
+                    return;
+                }
+                const { mainObject, seoObject, isPublished, canPublish, editableInBackend } = document.documentElement.dataset;
+                currentMetadata = {
+                    path: document.location.href,
+                    mainObject: unslugHtmlDataObject(mainObject),
+                    seoObject: unslugHtmlDataObject(seoObject),
+                    isPublished: isPublished === 'True',
+                    canPublish: canPublish === 'True',
+                    editableInBackend: editableInBackend === 'True',
+                    title: document.title,
+                };
+                websiteSystrayRegistry.trigger('CONTENT-UPDATED');
+            },
+            get pageDocument() {
+                return pageDocument;
+            },
             goToWebsite({ websiteId = currentWebsiteId || websites[0].id, path = '/' } = {}) {
                 action.doAction('website.website_preview', {
                     clearBreadcrumbs: true,
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index 6d86ee81e1f..6f3904bb5ae 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -64,10 +64,6 @@
                     </div>
                     <!-- Promote -->
                     <div class="dropdown" id="promote-menu">
-                        <a class="dropdown-toggle o-no-caret waves" data-toggle="dropdown" data-display="static" href="#">Promote</a>
-                        <div class="dropdown-menu oe_promote_menu" role="menu">
-                            <a role="menuitem" data-action="promote-current-page" href="#" title="Promote page on the web" class="dropdown-item">Optimize SEO</a>
-                        </div>
                     </div>
                     <t t-call="website.website_publisher" groups="website.group_website_publisher">
                         <t t-set="extra_classes" t-translation="off">d-flex d-sm-flex d-md-none</t>
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index 2bb3b0c0c22..b47b573ff9a 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -535,6 +535,11 @@
             sequence="1"
             parent="website.menu_website_configuration"/>
 
+        <menuitem id="menu_promote"
+            name="Promote"
+            sequence="5"
+            parent="website.menu_website_configuration"/>
+
         <menuitem id="menu_reporting"
             name="Reporting"
             sequence="99"
@@ -571,6 +576,12 @@
             parent="menu_reporting"
             action="website.ir_actions_server_website_google_analytics"/>
 
+        <menuitem id="menu_optimize_seo"
+            name="Optimize SEO"
+            sequence="1"
+            parent="website.menu_promote"
+            action="website.website_preview"/>
+
         <!-- Configurator actions -->
         <record id="start_configurator_act_url" model="ir.actions.act_url">
             <field name="name">Website Configurator</field>
diff --git a/addons/website_links/views/website_links_template.xml b/addons/website_links/views/website_links_template.xml
index 127c369ec3a..ce838f24973 100644
--- a/addons/website_links/views/website_links_template.xml
+++ b/addons/website_links/views/website_links_template.xml
@@ -2,7 +2,7 @@
 <odoo>
 
         <template id="share_page_menu" inherit_id="website.user_navbar">
-            <xpath expr="//a[@data-action='promote-current-page']" position="after">
+            <xpath expr="//div[@id='promote-menu']" position="inside">
                 <a href="/r" id="o_website_links_share_page" class="dropdown-item">
                     <span title="Track this page to count clicks">Link Tracker</span>
                 </a>

From 2f6aa250ebba85985c72e6b7d11ca08bf2d78823 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Thu, 23 Jun 2022 22:49:52 +0200
Subject: [PATCH 23/88] [MOV] *: move some static XML to view definitions

*: website_event, website_forum, website_slides

As the first commit of the merge of this work at [1], this moves files
without modifying them to preserve code history and ease forward-ports.

This part is about moving static XML to non-static files where the
XML will be changed into view definitions (as some UI now become normal
backend views). This cannot be a standalone working move of course.
So it was not done in the first commit but here, just before the
relevant commits of the merge.

[1]: https://github.com/odoo/odoo/pull/89223

See merge commit for more information.

task-2687506
---
 .../src/xml/event_create.xml => views/event_event_add.xml}        | 0
 .../xml/website_forum_templates.xml => views/forum_forum_add.xml} | 0
 .../website_slides_channel.xml => views/slide_channel_add.xml}    | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename addons/website_event/{static/src/xml/event_create.xml => views/event_event_add.xml} (100%)
 rename addons/website_forum/{static/src/xml/website_forum_templates.xml => views/forum_forum_add.xml} (100%)
 rename addons/website_slides/{static/src/xml/website_slides_channel.xml => views/slide_channel_add.xml} (100%)

diff --git a/addons/website_event/static/src/xml/event_create.xml b/addons/website_event/views/event_event_add.xml
similarity index 100%
rename from addons/website_event/static/src/xml/event_create.xml
rename to addons/website_event/views/event_event_add.xml
diff --git a/addons/website_forum/static/src/xml/website_forum_templates.xml b/addons/website_forum/views/forum_forum_add.xml
similarity index 100%
rename from addons/website_forum/static/src/xml/website_forum_templates.xml
rename to addons/website_forum/views/forum_forum_add.xml
diff --git a/addons/website_slides/static/src/xml/website_slides_channel.xml b/addons/website_slides/views/slide_channel_add.xml
similarity index 100%
rename from addons/website_slides/static/src/xml/website_slides_channel.xml
rename to addons/website_slides/views/slide_channel_add.xml

From 8925df7e75c853fa0c7a66efb7a06cf80dcf90f0 Mon Sep 17 00:00:00 2001
From: xO-Tx <mou@odoo.com>
Date: Mon, 25 Apr 2022 18:18:52 +0200
Subject: [PATCH 24/88] [IMP] website, *: add new content dialogs

*: website_blog, website_event, website_forum, website_livechat,
   website_sale, website_sale_slides, website_slides,
   website_slides_forum

The goal of this commit is to add dialogs to create new website content
using a 'target:new' action on the form view and an overridable
"website" form controller.

See merge commit for more information.

task-2687506
---
 addons/website/__manifest__.py                |  1 +
 .../website/static/src/js/new_content_form.js | 24 ++++++
 .../static/src/systray_items/new_content.js   |  1 +
 addons/website_blog/__manifest__.py           |  2 +-
 addons/website_blog/models/website_blog.py    |  2 +-
 .../js/systray_items/blog_post_add_form.js    | 13 ++++
 .../src/js/systray_items/new_content.js       | 10 ++-
 addons/website_blog/views/blog_post_add.xml   | 26 +++++++
 addons/website_event/__manifest__.py          |  6 +-
 .../js/systray_items/event_event_add_form.js  | 13 ++++
 .../src/js/systray_items/new_content.js       | 10 ++-
 .../website_event/views/event_event_add.xml   | 67 ++++++++--------
 addons/website_forum/__manifest__.py          |  4 +-
 .../js/systray_items/forum_forum_add_form.js  | 27 +++++++
 .../src/js/systray_items/new_content.js       | 10 ++-
 .../website_forum/views/forum_forum_add.xml   | 78 +++++++------------
 addons/website_livechat/__manifest__.py       |  2 +
 .../im_livechat_channel_add_form.js           | 13 ++++
 .../src/js/systray_items/new_content.js       | 10 ++-
 .../views/im_livechat_channel_add.xml         | 25 ++++++
 addons/website_sale/__manifest__.py           |  5 +-
 .../src/js/systray_items/new_content.js       | 44 ++---------
 .../systray_items/product_product_add_form.js | 27 +++++++
 .../views/product_product_add.xml             | 25 ++++++
 addons/website_sale_slides/__manifest__.py    |  3 -
 .../src/js/website_sale_slides_editor.js      | 26 -------
 .../static/src/xml/website_slides_channel.xml | 52 -------------
 .../views/slide_channel_views.xml             | 15 ++++
 addons/website_slides/__manifest__.py         |  6 +-
 .../src/js/systray_items/new_content.js       | 10 ++-
 .../systray_items/slide_channel_add_form.js   | 27 +++++++
 .../views/slide_channel_add.xml               | 76 +++++++-----------
 .../views/website_slides_templates_utils.xml  | 11 ---
 addons/website_slides_forum/__manifest__.py   |  5 --
 .../src/js/website_slides_forum.editor.js     | 11 ---
 .../src/xml/website_slides_forum_channel.xml  | 14 ----
 .../views/slide_channel_views.xml             | 14 ++++
 37 files changed, 402 insertions(+), 313 deletions(-)
 create mode 100644 addons/website/static/src/js/new_content_form.js
 create mode 100644 addons/website_blog/static/src/js/systray_items/blog_post_add_form.js
 create mode 100644 addons/website_blog/views/blog_post_add.xml
 create mode 100644 addons/website_event/static/src/js/systray_items/event_event_add_form.js
 create mode 100644 addons/website_forum/static/src/js/systray_items/forum_forum_add_form.js
 create mode 100644 addons/website_livechat/static/src/js/systray_items/im_livechat_channel_add_form.js
 create mode 100644 addons/website_livechat/views/im_livechat_channel_add.xml
 create mode 100644 addons/website_sale/static/src/js/systray_items/product_product_add_form.js
 create mode 100644 addons/website_sale/views/product_product_add.xml
 delete mode 100644 addons/website_sale_slides/static/src/js/website_sale_slides_editor.js
 delete mode 100644 addons/website_sale_slides/static/src/xml/website_slides_channel.xml
 create mode 100644 addons/website_slides/static/src/js/systray_items/slide_channel_add_form.js
 delete mode 100644 addons/website_slides_forum/static/src/js/website_slides_forum.editor.js
 delete mode 100644 addons/website_slides_forum/static/src/xml/website_slides_forum_channel.xml

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index fdc8bfc5acc..7a21fd85a19 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -182,6 +182,7 @@
             'website/static/src/components/fullscreen_indication/fullscreen_indication.scss',
             'website/static/src/systray_items/*.js',
             'website/static/src/systray_items/*.scss',
+            'website/static/src/js/new_content_form.js',
         ],
         'web.qunit_suite_tests': [
             'website/static/tests/dashboard_tests.js',
diff --git a/addons/website/static/src/js/new_content_form.js b/addons/website/static/src/js/new_content_form.js
new file mode 100644
index 00000000000..81ded8295fa
--- /dev/null
+++ b/addons/website/static/src/js/new_content_form.js
@@ -0,0 +1,24 @@
+/** @odoo-module **/
+
+import FormController from 'web.FormController';
+
+export const NewContentFormController = FormController.extend({
+    /**
+     * @override
+     */
+    saveRecord() {
+        return this._super.apply(this, arguments).then(() => {
+            const state = this.model.get(this.handle);
+            this.do_action({
+                type: 'ir.actions.act_window_close',
+                infos: {path: this._getPath(state)},
+            });
+        });
+    },
+    /**
+     * @private
+     */
+    _getPath(state) {
+        return state.data.website_url;
+    }
+});
diff --git a/addons/website/static/src/systray_items/new_content.js b/addons/website/static/src/systray_items/new_content.js
index 0fcb3dcd6bf..03b89741e8e 100644
--- a/addons/website/static/src/systray_items/new_content.js
+++ b/addons/website/static/src/systray_items/new_content.js
@@ -44,6 +44,7 @@ export class NewContentModal extends Component {
         this.rpc = useService('rpc');
         this.dialogs = useService('dialog');
         this.website = useService('website');
+        this.action = useService('action');
         this.isSystem = this.user.isSystem;
 
         this.newContentText = {
diff --git a/addons/website_blog/__manifest__.py b/addons/website_blog/__manifest__.py
index a9b83797ab4..c2d6f5e5ed4 100644
--- a/addons/website_blog/__manifest__.py
+++ b/addons/website_blog/__manifest__.py
@@ -20,6 +20,7 @@
         'views/website_blog_templates.xml',
         'views/snippets/snippets.xml',
         'views/snippets/s_blog_posts.xml',
+        'views/blog_post_add.xml',
         'security/ir.model.access.csv',
         'security/website_blog_security.xml',
     ],
@@ -35,7 +36,6 @@
             'website_blog/static/src/snippets/s_blog_posts/options.js',
         ],
         'website.assets_editor': [
-            'website_blog/static/src/js/systray_items/new_content.js',
             'website_blog/static/src/js/tours/website_blog.js',
         ],
         'web.assets_frontend': [
diff --git a/addons/website_blog/models/website_blog.py b/addons/website_blog/models/website_blog.py
index 60e72c5e98f..01842c37a73 100644
--- a/addons/website_blog/models/website_blog.py
+++ b/addons/website_blog/models/website_blog.py
@@ -172,7 +172,7 @@ class BlogPost(models.Model):
     author_avatar = fields.Binary(related='author_id.image_128', string="Avatar", readonly=False)
     author_name = fields.Char(related='author_id.display_name', string="Author Name", readonly=False, store=True)
     active = fields.Boolean('Active', default=True)
-    blog_id = fields.Many2one('blog.blog', 'Blog', required=True, ondelete='cascade')
+    blog_id = fields.Many2one('blog.blog', 'Blog', required=True, ondelete='cascade', default=lambda self: self.env['blog.blog'].search([], limit=1))
     tag_ids = fields.Many2many('blog.tag', string='Tags')
     content = fields.Html('Content', default=_default_content, translate=html_translate, sanitize=False)
     teaser = fields.Text('Teaser', compute='_compute_teaser', inverse='_set_teaser')
diff --git a/addons/website_blog/static/src/js/systray_items/blog_post_add_form.js b/addons/website_blog/static/src/js/systray_items/blog_post_add_form.js
new file mode 100644
index 00000000000..d1b53f6b043
--- /dev/null
+++ b/addons/website_blog/static/src/js/systray_items/blog_post_add_form.js
@@ -0,0 +1,13 @@
+/** @odoo-module **/
+
+import {NewContentFormController} from '@website/js/new_content_form';
+import viewRegistry from 'web.view_registry';
+import FormView from 'web.FormView';
+
+export const AddBlogFormView = FormView.extend({
+    config: _.extend({}, FormView.prototype.config, {
+        Controller: NewContentFormController,
+    }),
+});
+
+viewRegistry.add('website_blog_add_form', AddBlogFormView);
diff --git a/addons/website_blog/static/src/js/systray_items/new_content.js b/addons/website_blog/static/src/js/systray_items/new_content.js
index a9c015f3522..08b73ca119b 100644
--- a/addons/website_blog/static/src/js/systray_items/new_content.js
+++ b/addons/website_blog/static/src/js/systray_items/new_content.js
@@ -12,5 +12,13 @@ patch(NewContentModal.prototype, 'website_blog_new_content', {
         newBlogElement.status = MODULE_STATUS.INSTALLED;
     },
 
-    createNewBlogPost() {}
+    async createNewBlogPost() {
+        this.action.doAction('website_blog.blog_post_action_add', {
+            onClose: (data) => {
+                if (data) {
+                    this.website.goToWebsite({path: data.path, edition: true});
+                }
+            },
+        });
+    }
 });
diff --git a/addons/website_blog/views/blog_post_add.xml b/addons/website_blog/views/blog_post_add.xml
new file mode 100644
index 00000000000..6e46719085f
--- /dev/null
+++ b/addons/website_blog/views/blog_post_add.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<record id="blog_post_view_form_add" model="ir.ui.view">
+    <field name="name">blog.post.view.form.add</field>
+    <field name="model">blog.post</field>
+    <field name="arch" type="xml">
+        <form js_class="website_blog_add_form">
+            <group>
+                <field name="website_url" invisible="1"/>
+                <field name="blog_id" string="Select Blog"/>
+                <field name="name" placeholder="Blog Post Title"/>
+            </group>
+        </form>
+    </field>
+</record>
+
+<record id="blog_post_action_add" model="ir.actions.act_window">
+    <field name="name">New Blog Post</field>
+    <field name="res_model">blog.post</field>
+    <field name="view_mode">form</field>
+    <field name="target">new</field>
+    <field name="view_id" ref="blog_post_view_form_add"/>
+</record>
+
+</odoo>
diff --git a/addons/website_event/__manifest__.py b/addons/website_event/__manifest__.py
index 8d1f25dffdd..52998d71b26 100644
--- a/addons/website_event/__manifest__.py
+++ b/addons/website_event/__manifest__.py
@@ -34,6 +34,7 @@
         'views/website_event_menu_views.xml',
         'views/website_visitor_views.xml',
         'views/event_menus.xml',
+        'views/event_event_add.xml',
         'security/ir.model.access.csv',
         'security/event_security.xml',
     ],
@@ -60,14 +61,11 @@
             'website_event/static/src/js/website_event_ticket_details.js',
             'website_event/static/src/snippets/options.js',
         ],
-        'website.assets_editor': [
-            'website_event/static/src/js/systray_items/new_content.js',
-        ],
         'website.assets_wysiwyg': [
             '/website_event/static/src/snippets/s_events/options.js',
         ],
         'web.assets_backend': [
-            'website_event/static/src/js/systray_items/new_content.js',
+            'website_event/static/src/js/systray_items/*.js',
         ],
     },
     'license': 'LGPL-3',
diff --git a/addons/website_event/static/src/js/systray_items/event_event_add_form.js b/addons/website_event/static/src/js/systray_items/event_event_add_form.js
new file mode 100644
index 00000000000..f845d9d5bd6
--- /dev/null
+++ b/addons/website_event/static/src/js/systray_items/event_event_add_form.js
@@ -0,0 +1,13 @@
+/** @odoo-module **/
+
+import {NewContentFormController} from '@website/js/new_content_form';
+import viewRegistry from 'web.view_registry';
+import FormView from 'web.FormView';
+
+export const AddEventFormView = FormView.extend({
+    config: _.extend({}, FormView.prototype.config, {
+        Controller: NewContentFormController,
+    }),
+});
+
+viewRegistry.add('event_event_add_form', AddEventFormView);
diff --git a/addons/website_event/static/src/js/systray_items/new_content.js b/addons/website_event/static/src/js/systray_items/new_content.js
index c05c1aa8270..34d47fdd3dc 100644
--- a/addons/website_event/static/src/js/systray_items/new_content.js
+++ b/addons/website_event/static/src/js/systray_items/new_content.js
@@ -12,5 +12,13 @@ patch(NewContentModal.prototype, 'website_event_new_content', {
         newEventElement.status = MODULE_STATUS.INSTALLED;
     },
 
-    createNewEvent() {}
+    createNewEvent() {
+        this.action.doAction('website_event.event_event_action_add', {
+            onClose: (data) => {
+                if (data) {
+                    this.website.goToWebsite({path: data.path, edition: true});
+                }
+            },
+        });
+    }
 });
diff --git a/addons/website_event/views/event_event_add.xml b/addons/website_event/views/event_event_add.xml
index 5119f8578ec..3bd8137a440 100644
--- a/addons/website_event/views/event_event_add.xml
+++ b/addons/website_event/views/event_event_add.xml
@@ -1,37 +1,34 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates xml:space="preserve">
-    <t t-name="website_event.event_create_dialog">
-        <form id="editor_new_event" style="overflow:visible;">
-            <div class="form-group row" id="name">
-                <label for="name" class="col-md-2 col-form-label">Event Name</label>
-                <div class="col-md-10">
-                    <input type="text" name="name" class="form-control" required="required"/>
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<record id="event_event_view_form_add" model="ir.ui.view">
+    <field name="name">event.event.view.form.add</field>
+    <field name="model">event.event</field>
+    <field name="arch" type="xml">
+        <form js_class="event_event_add_form">
+            <group>
+                <field name="website_url" invisible="1"/>
+                <field name="company_id" invisible="1"/>
+                <field name="name" placeholder="e.g. Conference for Architects" string="Event Name"/>
+                <field name="address_id" context="{'show_address': 1}" options='{"always_reload": True}'/>
+                <label for="date_begin" string="Start &#8594; End"/>
+                <div class="o_row w-100">
+                    <field name="date_begin" widget="daterange" nolabel="1" class="oe_inline" options="{'related_end_date': 'date_end'}"/>
+                    <i class="fa fa-long-arrow-right mx-2" aria-label="Arrow icon" title="Arrow"/>
+                    <field name="date_end" widget="daterange" nolabel="1" class="oe_inline" options="{'related_start_date': 'date_begin'}"/>
                 </div>
-                <p class="text-danger mt-1 mb-0 col-md-8 d-none">Please fill in this field</p>
-            </div>
-            <div class="form-group row">
-                <label class="col-form-label col-md-2" for="event_location">Location</label>
-                <div class="col-md-10">
-                    <select class="form-control" id="event_location" name="event_location">
-                        <option value="online">Online</option>
-                        <option value="on_site">On Site</option>
-                    </select>
-                </div>
-            </div>
-            <div class="form-group row d-none show_visibility_address" id="address">
-                <label class="col-form-label col-md-2" for="address_id">Venue</label>
-                <div class="col-md-10">
-                    <input type="text" class="form-control o_wevent_js_address_id" name="address_id" placeholder="Select Venue"/>
-                </div>
-                <p class="text-danger mt-1 mb-0 col-md-8 d-none">Please fill in this field</p>
-            </div>
-            <div class="form-group row d-flex justify-content-between align-items-center" id="event_dates">
-                <label class="col-form-label col-md-2" for="event_start_end">Start &#8594; End</label>
-                <div class="col-md-10 s_website_form_datetime input-group date o_wevent_form_datetime" data-target-input="nearest">
-                    <input type="text" name="event_start_end" class="form-control daterange-input bg-transparent text-dark rounded-0 p-1"/>
-                </div>
-                <p class="text-danger mt-1 col-md-8 d-none">Please fill in this field</p>
-            </div>
+            </group>
         </form>
-    </t>
-</templates>
+    </field>
+</record>
+
+<record id="event_event_action_add" model="ir.actions.act_window">
+    <field name="name">New Event</field>
+    <field name="res_model">event.event</field>
+    <field name="view_mode">form</field>
+    <field name="target">new</field>
+    <field name="view_id" ref="event_event_view_form_add"/>
+    <field name="context">{'default_address_id': False}</field>
+</record>
+
+</odoo>
diff --git a/addons/website_forum/__manifest__.py b/addons/website_forum/__manifest__.py
index 676e7fe4da0..c079d80deb0 100644
--- a/addons/website_forum/__manifest__.py
+++ b/addons/website_forum/__manifest__.py
@@ -27,6 +27,7 @@ Ask questions, get answers, no distractions
         'views/website_forum_profile.xml',
         'views/ir_qweb.xml',
         'views/snippets/snippets.xml',
+        'views/forum_forum_add.xml',
         'security/ir.model.access.csv',
         'security/website_forum_security.xml',
         'data/badges_question.xml',
@@ -42,7 +43,6 @@ Ask questions, get answers, no distractions
     'assets': {
         'website.assets_editor': [
             'website_forum/static/src/js/tours/website_forum.js',
-            'website_forum/static/src/js/systray_items/new_content.js',
         ],
         'web.assets_tests': [
             'website_forum/static/tests/**/*',
@@ -53,7 +53,7 @@ Ask questions, get answers, no distractions
             'website_forum/static/src/js/website_forum.share.js',
         ],
         'web.assets_backend': [
-            'website_forum/static/src/js/systray_items/new_content.js',
+            'website_forum/static/src/js/systray_items/*.js',
         ],
         'web.assets_qweb': [
             'website_forum/static/src/xml/*.xml',
diff --git a/addons/website_forum/static/src/js/systray_items/forum_forum_add_form.js b/addons/website_forum/static/src/js/systray_items/forum_forum_add_form.js
new file mode 100644
index 00000000000..b166ea16924
--- /dev/null
+++ b/addons/website_forum/static/src/js/systray_items/forum_forum_add_form.js
@@ -0,0 +1,27 @@
+/** @odoo-module **/
+
+import {NewContentFormController} from '@website/js/new_content_form';
+import viewRegistry from 'web.view_registry';
+import FormView from 'web.FormView';
+
+const AddForumFormController = NewContentFormController.extend({
+    /**
+     * @override
+     */
+    _getPath(state) {
+        return `/forum/${state.data.id}`;
+    },
+});
+
+const AddForumFormView = FormView.extend({
+    config: _.extend({}, FormView.prototype.config, {
+        Controller: AddForumFormController,
+    }),
+});
+
+viewRegistry.add('website_forum_add_form', AddForumFormView);
+
+export default {
+    AddForumFormController: AddForumFormController,
+    AddForumFormView: AddForumFormView,
+};
diff --git a/addons/website_forum/static/src/js/systray_items/new_content.js b/addons/website_forum/static/src/js/systray_items/new_content.js
index 532856fe8a8..ef1bf04dc71 100644
--- a/addons/website_forum/static/src/js/systray_items/new_content.js
+++ b/addons/website_forum/static/src/js/systray_items/new_content.js
@@ -12,5 +12,13 @@ patch(NewContentModal.prototype, 'website_forum_new_content', {
         newForumElement.status = MODULE_STATUS.INSTALLED;
     },
 
-    createNewForum() {}
+    createNewForum() {
+        this.action.doAction('website_forum.forum_forum_action_add', {
+            onClose: (data) => {
+                if (data) {
+                    this.website.goToWebsite({path: data.path});
+                }
+            },
+        });
+    }
 });
diff --git a/addons/website_forum/views/forum_forum_add.xml b/addons/website_forum/views/forum_forum_add.xml
index aedc6223079..9d7798482ff 100644
--- a/addons/website_forum/views/forum_forum_add.xml
+++ b/addons/website_forum/views/forum_forum_add.xml
@@ -1,53 +1,27 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates xml:space="preserve">
-    <t t-name="website_forum.add_new_forum">
-        <form id="editor_new_forum">
-            <div class="form-group row">
-                <label for="page-name" class="col-md-4 col-form-label">Forum Name</label>
-                <div class="col-md-8">
-                    <input type="text" name="forum_name" class="form-control" required="required"/>
-                    <div class="custom-control custom-checkbox mt-2">
-                        <input type="checkbox" class="custom-control-input" id="add_to_menu" required="required"/>
-                        <label class="custom-control-label" for="add_to_menu">Add to menu</label>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group row mt-2">
-                <label class="col-md-4 col-form-label" data-toggle="tooltip" data-placement="bottom"
-                    title="Questions and Answers mode: only one answer allowed\n Discussions mode: multiple answers allowed">Forum Mode</label>
-                <div class="col-md-8">
-                    <div class="custom-control custom-radio">
-                        <input type="radio" id="questions" name="mode" class="custom-control-input" value="questions" checked="checked"/>
-                        <label class="custom-control-label" for="questions">Questions and Answers</label>
-                    </div>
-                    <div class="custom-control custom-radio">
-                        <input type="radio" id="discussions" name="mode" class="custom-control-input" value="discussions"/>
-                        <label class="custom-control-label" for="discussions">Discussions</label>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group row mt-2">
-                <label class="col-md-4 col-form-label" data-toggle="tooltip" data-placement="bottom"
-                    title="Public: Forum is public\nSigned In: Forum is visible for signed in users\nSome users: Forum and their content are hidden for non members of selected group">Privacy</label>
-                <div class="col-md-8">
-                    <div class="custom-control custom-radio">
-                        <input type="radio" id="public" name="privacy" class="custom-control-input" value="public" checked="checked"/>
-                        <label class="custom-control-label" for="public">Public</label>
-                    </div>
-                    <div class="custom-control custom-radio">
-                        <input type="radio" id="connected" name="privacy" class="custom-control-input" value="connected"/>
-                        <label class="custom-control-label" for="connected">Signed In</label>
-                    </div>
-                    <div class="custom-control custom-radio">
-                        <input type="radio" id="private" name="privacy" class="custom-control-input" value="private"/>
-                        <label class="custom-control-label" for="private">Some Users</label>
-                    </div>
-                    <div class="form-group show_visibility_group d-none">
-                        <input type="text" class="form-control" name="group_id" id="group_id" placeholder="Select Authorized Group"/>
-                        <p id="group-required" class="text-danger mt-1 mb-0 d-none">Please fill in this field</p>
-                    </div>
-                </div>
-            </div>
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<record id="forum_forum_view_form_add" model="ir.ui.view">
+    <field name="name">forum.forum.view.form.add</field>
+    <field name="model">forum.forum</field>
+    <field name="arch" type="xml">
+        <form js_class="website_forum_add_form">
+            <group>
+                <field name="name" placeholder="e.g. Technical Assistance" string="Forum Name"/>
+                <field name="mode" widget="radio" required="True" string="Forum Mode"/>
+                <field name="privacy" widget="radio" attrs="{'required': True}"/>
+                <field name="authorized_group_id" options="{'no_create': True}" attrs="{'invisible': [('privacy', '!=', 'private')], 'required': [('privacy', '=', 'private')]}"/>
+            </group>
         </form>
-    </t>
-</templates>
+    </field>
+</record>
+
+<record id="forum_forum_action_add" model="ir.actions.act_window">
+    <field name="name">New Forum</field>
+    <field name="res_model">forum.forum</field>
+    <field name="view_mode">form</field>
+    <field name="target">new</field>
+    <field name="view_id" ref="forum_forum_view_form_add"/>
+</record>
+
+</odoo>
diff --git a/addons/website_livechat/__manifest__.py b/addons/website_livechat/__manifest__.py
index dea83dfcf48..bd72bc35dbf 100644
--- a/addons/website_livechat/__manifest__.py
+++ b/addons/website_livechat/__manifest__.py
@@ -16,6 +16,7 @@ Allow website visitors to chat with the collaborators. This module also brings a
         'views/im_livechat_chatbot_script_view.xml',
         'views/website_livechat_view.xml',
         'views/website_visitor_views.xml',
+        'views/im_livechat_channel_add.xml',
         'security/ir.model.access.csv',
         'security/website_livechat.xml',
         'data/website_livechat_data.xml',
@@ -42,6 +43,7 @@ Allow website visitors to chat with the collaborators. This module also brings a
             'website_livechat/static/src/components/*/*.scss',
             'website_livechat/static/src/models/*.js',
             'website_livechat/static/src/js/systray_items/new_content.js',
+            'website_livechat/static/src/js/systray_items/*.js',
         ],
         'web.assets_tests': [
             'website_livechat/static/tests/tours/**/*',
diff --git a/addons/website_livechat/static/src/js/systray_items/im_livechat_channel_add_form.js b/addons/website_livechat/static/src/js/systray_items/im_livechat_channel_add_form.js
new file mode 100644
index 00000000000..02cdfb7c9dc
--- /dev/null
+++ b/addons/website_livechat/static/src/js/systray_items/im_livechat_channel_add_form.js
@@ -0,0 +1,13 @@
+/** @odoo-module **/
+
+import {NewContentFormController} from '@website/js/new_content_form';
+import viewRegistry from 'web.view_registry';
+import FormView from 'web.FormView';
+
+export const AddChannelFormView = FormView.extend({
+    config: _.extend({}, FormView.prototype.config, {
+        Controller: NewContentFormController,
+    }),
+});
+
+viewRegistry.add('website_livechat_add_form', AddChannelFormView);
diff --git a/addons/website_livechat/static/src/js/systray_items/new_content.js b/addons/website_livechat/static/src/js/systray_items/new_content.js
index 46a2b933a97..e90f3364c48 100644
--- a/addons/website_livechat/static/src/js/systray_items/new_content.js
+++ b/addons/website_livechat/static/src/js/systray_items/new_content.js
@@ -12,5 +12,13 @@ patch(NewContentModal.prototype, 'website_livechat_new_content', {
         newChannelElement.status = MODULE_STATUS.INSTALLED;
     },
 
-    createNewChannel() {}
+    createNewChannel() {
+        this.action.doAction('website_livechat.im_livechat_channel_action_add', {
+            onClose: (data) => {
+                if (data) {
+                    this.website.goToWebsite({path: data.path});
+                }
+            },
+        });
+    }
 });
diff --git a/addons/website_livechat/views/im_livechat_channel_add.xml b/addons/website_livechat/views/im_livechat_channel_add.xml
new file mode 100644
index 00000000000..da0e966600e
--- /dev/null
+++ b/addons/website_livechat/views/im_livechat_channel_add.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<record id="im_livechat_channel_view_form_add" model="ir.ui.view">
+    <field name="name">im_livechat.channel.view.form.add</field>
+    <field name="model">im_livechat.channel</field>
+    <field name="arch" type="xml">
+        <form js_class="website_livechat_add_form">
+            <group>
+                <field name="website_url" invisible="1"/>
+                <field name="name" string="Channel Name"/>
+            </group>
+        </form>
+    </field>
+</record>
+
+<record id="im_livechat_channel_action_add" model="ir.actions.act_window">
+    <field name="name">New Channel</field>
+    <field name="res_model">im_livechat.channel</field>
+    <field name="view_mode">form</field>
+    <field name="target">new</field>
+    <field name="view_id" ref="im_livechat_channel_view_form_add"/>
+</record>
+
+</odoo>
diff --git a/addons/website_sale/__manifest__.py b/addons/website_sale/__manifest__.py
index fa0fa3fb868..b1851122509 100644
--- a/addons/website_sale/__manifest__.py
+++ b/addons/website_sale/__manifest__.py
@@ -29,7 +29,8 @@
         'views/res_config_settings_views.xml',
         'views/digest_views.xml',
         'views/website_sale_visitor_views.xml',
-        'views/base_unit_view.xml'
+        'views/base_unit_view.xml',
+        'views/product_product_add.xml',
     ],
     'demo': [
         'data/demo.xml',
@@ -66,7 +67,7 @@
             'website_sale/static/src/scss/website_sale_dashboard.scss',
             'website_sale/static/src/scss/website_sale_backend.scss',
             'website_sale/static/src/js/tours/website_sale_shop_backend.js',
-            'website_sale/static/src/js/systray_items/new_content.js',
+            'website_sale/static/src/js/systray_items/*.js',
         ],
         'website.assets_wysiwyg': [
             'website_sale/static/src/scss/website_sale.editor.scss',
diff --git a/addons/website_sale/static/src/js/systray_items/new_content.js b/addons/website_sale/static/src/js/systray_items/new_content.js
index f4754321856..32dbdca28ff 100644
--- a/addons/website_sale/static/src/js/systray_items/new_content.js
+++ b/addons/website_sale/static/src/js/systray_items/new_content.js
@@ -2,39 +2,6 @@
 
 import { NewContentModal, MODULE_STATUS } from '@website/systray_items/new_content';
 import { patch } from 'web.utils';
-import { WebsiteDialog } from '@website/components/dialog/dialog';
-
-const { xml, useState } = owl;
-
-export class AddProductDialog extends WebsiteDialog {
-    setup() {
-        super.setup();
-
-        this.title = this.env._t("New Product");
-        this.primaryTitle = this.env._t("Create");
-
-        this.state = useState({
-            name: '',
-        });
-    }
-
-    async primaryClick() {
-        await this.props.addProduct(this.state.name);
-        this.close();
-    }
-}
-AddProductDialog.bodyTemplate = xml`
-<div>
-    <div class="form-group row">
-        <label class="col-form-label col-md-3">
-            Product Name
-        </label>
-        <div class="col-md-9">
-            <input type="text" t-model="state.name" class="form-control" required="required"/>
-        </div>
-    </div>
-</div>
-`;
 
 patch(NewContentModal.prototype, 'website_sale_new_content', {
     setup() {
@@ -46,12 +13,11 @@ patch(NewContentModal.prototype, 'website_sale_new_content', {
     },
 
     createNewProduct() {
-        this.dialogs.add(AddProductDialog, {
-            addProduct: async (name) => {
-                const url = await this.rpc('/shop/add_product', {
-                    name,
-                });
-                this.website.goToWebsite({ path: url });
+        this.action.doAction('website_sale.product_product_action_add', {
+            onClose: (data) => {
+                if (data) {
+                    this.website.goToWebsite({path: data.path, edition: true});
+                }
             },
         });
     }
diff --git a/addons/website_sale/static/src/js/systray_items/product_product_add_form.js b/addons/website_sale/static/src/js/systray_items/product_product_add_form.js
new file mode 100644
index 00000000000..c90f6f01ad8
--- /dev/null
+++ b/addons/website_sale/static/src/js/systray_items/product_product_add_form.js
@@ -0,0 +1,27 @@
+/** @odoo-module **/
+
+import {NewContentFormController} from '@website/js/new_content_form';
+import viewRegistry from 'web.view_registry';
+import FormView from 'web.FormView';
+
+const AddProductFormController = NewContentFormController.extend({
+    /**
+     * @override
+     */
+    _getPath(state) {
+        return state.data.website_url.split('#')[0];
+    },
+});
+
+const AddProductFormView = FormView.extend({
+    config: _.extend({}, FormView.prototype.config, {
+        Controller: AddProductFormController,
+    }),
+});
+
+viewRegistry.add('product_product_add_form', AddProductFormView);
+
+export default {
+    AddProductFormController: AddProductFormController,
+    AddProductFormView: AddProductFormView,
+};
diff --git a/addons/website_sale/views/product_product_add.xml b/addons/website_sale/views/product_product_add.xml
new file mode 100644
index 00000000000..6c2cddea6f8
--- /dev/null
+++ b/addons/website_sale/views/product_product_add.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<record id="product_product_view_form_add" model="ir.ui.view">
+    <field name="name">product.product.view.form.add</field>
+    <field name="model">product.product</field>
+    <field name="arch" type="xml">
+        <form js_class="product_product_add_form">
+            <group>
+                <field name="website_url" invisible="1"/>
+                <field name="name" placeholder="e.g. Cheese Burger" string="Product Name"/>
+            </group>
+        </form>
+    </field>
+</record>
+
+<record id="product_product_action_add" model="ir.actions.act_window">
+    <field name="name">New Product</field>
+    <field name="res_model">product.product</field>
+    <field name="view_mode">form</field>
+    <field name="target">new</field>
+    <field name="view_id" ref="product_product_view_form_add"/>
+</record>
+
+</odoo>
diff --git a/addons/website_sale_slides/__manifest__.py b/addons/website_sale_slides/__manifest__.py
index 3ef082aca44..b3bd40e04d6 100644
--- a/addons/website_sale_slides/__manifest__.py
+++ b/addons/website_sale_slides/__manifest__.py
@@ -26,9 +26,6 @@
         'web.assets_frontend': [
             'website_sale_slides/static/src/js/**/*',
         ],
-        'web.assets_qweb': [
-            'website_sale_slides/static/src/xml/website_slides_channel.xml',
-        ]
     },
     'license': 'LGPL-3',
 }
diff --git a/addons/website_sale_slides/static/src/js/website_sale_slides_editor.js b/addons/website_sale_slides/static/src/js/website_sale_slides_editor.js
deleted file mode 100644
index cd206976c5d..00000000000
--- a/addons/website_sale_slides/static/src/js/website_sale_slides_editor.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/** @odoo-module **/
-
-import {ChannelCreateDialog} from '@website_slides/js/systray_items/new_content';
-
-ChannelCreateDialog.include({
-    xmlDependencies: ChannelCreateDialog.prototype.xmlDependencies.concat(
-        ['/website_sale_slides/static/src/xml/website_slides_channel.xml']
-    ),
-
-    events: _.extend({}, ChannelCreateDialog.prototype.events, {
-        'change input[name="enroll"]': '_onEnrollChanged',
-    }),
-
-    willStart: async function () {
-        await this._super();
-
-        this.products = await this._rpc({route: '/slides/get_course_products'});
-    },
-
-    /**
-     * @private
-     */
-    _onEnrollChanged: function (ev) {
-        this.$('.o_wslides_course_products').toggleClass('d-none', ev.target.value !== 'payment');
-    },
-});
diff --git a/addons/website_sale_slides/static/src/xml/website_slides_channel.xml b/addons/website_sale_slides/static/src/xml/website_slides_channel.xml
deleted file mode 100644
index 1b03ebccf96..00000000000
--- a/addons/website_sale_slides/static/src/xml/website_slides_channel.xml
+++ /dev/null
@@ -1,52 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-
-<templates>
-    <t t-extend="website.slide.channel.create">
-        <t t-jquery="form > div:last" t-operation="after">
-            <label for="enroll">Enroll Policy</label>
-            <div class="form-row" id="enroll_policies">
-                <div class="form-group col-3">
-                    <div class="form-check mx-0">
-                        <input class="form-check-input"
-                               type="radio" name="enroll"
-                               id="enroll_public" value="public"
-                               checked="checked"/>
-                        <label class="form-check-label font-weight-normal"
-                            for="enroll_public">
-                            Public
-                        </label>
-                    </div>
-                </div>
-                <div class="form-group col-3">
-                    <div class="form-check mx-0">
-                        <input class="form-check-input"
-                               type="radio" name="enroll"
-                               id="enroll_invitation" value="invite"/>
-                        <label class="form-check-label font-weight-normal"
-                            for="enroll_invitation">
-                            On Invitation
-                        </label>
-                    </div>
-                </div>
-                <div class="form-group col-3">
-                    <div class="form-check mx-0">
-                        <input class="form-check-input"
-                               type="radio" name="enroll"
-                               id="enroll_payment" value="payment"/>
-                        <label class="form-check-label font-weight-normal"
-                            for="enroll_payment">
-                            On Payment
-                        </label>
-                    </div>
-                </div>
-            </div>
-            <label class="o_wslides_course_products d-none">Product</label>
-            <div class="form-group o_wslides_course_products d-none">
-                <select class="form-control" name="product_id" id="product_id">
-                    <option t-foreach="widget.products" t-as="product"
-                        t-att-value="product.id" t-esc="product.name"/>
-                </select>
-            </div>
-        </t>
-    </t>
-</templates>
diff --git a/addons/website_sale_slides/views/slide_channel_views.xml b/addons/website_sale_slides/views/slide_channel_views.xml
index 4befb6d5a56..8724780df8e 100644
--- a/addons/website_sale_slides/views/slide_channel_views.xml
+++ b/addons/website_sale_slides/views/slide_channel_views.xml
@@ -49,4 +49,19 @@
             </xpath>
         </field>
     </record>
+
+    <record id="slide_channel_view_form_add_inherit_sale_slides" model="ir.ui.view">
+        <field name="name">slide.channel.view.form.add.inherit.sale.slides</field>
+        <field name="model">slide.channel</field>
+        <field name="inherit_id" ref="website_slides.slide_channel_view_form_add"/>
+        <field name="arch" type="xml">
+            <xpath expr="//group[last()]" position="after">
+                <group string="Enroll">
+                    <field name="enroll" widget="radio" options="{'horizontal': true}" string="Enroll Policy"/>
+                    <field name="product_id" attrs="{'invisible': [('enroll', '!=', 'payment')], 'required': [('enroll', '=', 'payment')]}"
+                    context="{'default_detailed_type': 'course', 'default_invoice_policy': 'order', 'default_purchase_ok': False, 'default_sale_ok': True, 'default_website_published': True}"/>
+                </group>
+    		</xpath>
+        </field>
+    </record>
 </data></odoo>
diff --git a/addons/website_slides/__manifest__.py b/addons/website_slides/__manifest__.py
index bfbf938b2ce..fd03d904421 100644
--- a/addons/website_slides/__manifest__.py
+++ b/addons/website_slides/__manifest__.py
@@ -47,6 +47,7 @@ Featuring
         'views/website_slides_templates_lesson_embed.xml',
         'views/website_slides_templates_profile.xml',
         'views/website_slides_templates_utils.xml',
+        'views/slide_channel_add.xml',
         'wizard/slide_channel_invite_views.xml',
         'data/gamification_data.xml',
         'data/mail_data.xml',
@@ -70,7 +71,7 @@ Featuring
             'website_slides/static/src/js/slide_category_one2many.js',
             'website_slides/static/src/js/rating_field_backend.js',
             'website_slides/static/src/models/*.js',
-            'website_slides/static/src/js/systray_items/new_content.js',
+            'website_slides/static/src/js/systray_items/*.js',
         ],
         'web.assets_frontend': [
             'website_slides/static/src/scss/website_slides.scss',
@@ -100,9 +101,6 @@ Featuring
         'web.assets_tests': [
             'website_slides/static/tests/tours/*.js',
         ],
-        'website.assets_editor': [
-            'website_slides/static/src/js/systray_items/new_content.js',
-        ],
         'website_slides.slide_embed_assets': [
             ('include', 'web._assets_helpers'),
             'web/static/lib/bootstrap/scss/_variables.scss',
diff --git a/addons/website_slides/static/src/js/systray_items/new_content.js b/addons/website_slides/static/src/js/systray_items/new_content.js
index c5ea11000bb..8b3159a0f3c 100644
--- a/addons/website_slides/static/src/js/systray_items/new_content.js
+++ b/addons/website_slides/static/src/js/systray_items/new_content.js
@@ -12,5 +12,13 @@ patch(NewContentModal.prototype, 'website_slides_new_content', {
         newSlidesChannelElement.status = MODULE_STATUS.INSTALLED;
     },
 
-    createNewSlidesChannel() {}
+    createNewSlidesChannel() {
+        this.action.doAction('website_slides.slide_channel_action_add', {
+            onClose: (data) => {
+                if (data) {
+                    this.website.goToWebsite({path: data.path});
+                }
+            },
+        });
+    }
 });
diff --git a/addons/website_slides/static/src/js/systray_items/slide_channel_add_form.js b/addons/website_slides/static/src/js/systray_items/slide_channel_add_form.js
new file mode 100644
index 00000000000..be7600df403
--- /dev/null
+++ b/addons/website_slides/static/src/js/systray_items/slide_channel_add_form.js
@@ -0,0 +1,27 @@
+/** @odoo-module **/
+
+import {NewContentFormController} from '@website/js/new_content_form';
+import viewRegistry from 'web.view_registry';
+import FormView from 'web.FormView';
+
+const AddCourseFormController = NewContentFormController.extend({
+    /**
+     * @override
+     */
+    _getPath(state) {
+        return `/slides/${state.data.id}`;
+    },
+});
+
+const AddCourseFormView = FormView.extend({
+    config: _.extend({}, FormView.prototype.config, {
+        Controller: AddCourseFormController,
+    }),
+});
+
+viewRegistry.add('website_slides_add_form', AddCourseFormView);
+
+export default {
+    AddCourseFormController: AddCourseFormController,
+    AddCourseFormView: AddCourseFormView,
+};
diff --git a/addons/website_slides/views/slide_channel_add.xml b/addons/website_slides/views/slide_channel_add.xml
index 1589cbc30ac..ec9c06d3eba 100644
--- a/addons/website_slides/views/slide_channel_add.xml
+++ b/addons/website_slides/views/slide_channel_add.xml
@@ -1,49 +1,33 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
 
-<templates xml:space="preserve">
+<record id="slide_channel_view_form_add" model="ir.ui.view">
+    <field name="name">slide.channel.view.form.add</field>
+    <field name="model">slide.channel</field>
+    <field name="arch" type="xml">
+        <form js_class="website_slides_add_form">
+            <group>
+                <field name="website_url" invisible="1"/>
+                <field name="name" placeholder="e.g. Computer Science for kids" string="Course Title"/>
+                <field name="tag_ids" widget="many2many_tags" options="{'color_field': 'color'}" placeholder="Tags"/>
+            </group>
+            <group>
+                <field name="channel_type" widget="radio" options="{'horizontal': true}" string="Choose a layout"/>
+                <field name="description" widget="html" placeholder="Common tasks for a computer scientist is asking the right questions andanswering questions. In this course, you'll study those topics with activities about mathematics, science and logic." string="Description"/>
+            </group>
+            <group name="review">
+                <field name="allow_comment"/>
+            </group>
+        </form>
+    </field>
+</record>
 
-    <t t-name="website.slide.channel.create">
-        <div>
-            <form action="/slides/channel/add" method="POST" id="slide_channel_add_form">
-                <input type="hidden" name="csrf_token" t-att-value="csrf_token"/>
-                <div class="form-group">
-                    <label for="title" class="col-form-label">Title</label>
-                    <input type="text" class="form-control" autocomplete="off" name="name" id="title" placeholder='e.g. "Computer Science for kids"' required="1"/>
-                    <p id="title-required" class="text-danger mt-1 mb-0 d-none">Please fill in this field</p>
-                </div>
-                <div class="form-group">
-                    <label for="tag_ids" class="col-form-label">Tags</label>
-                    <input type="text" class="form-control" name="tag_ids" id="tag_ids" placeholder="Tags"/>
-                </div>
-                <label for="channel_type">Choose a layout</label>
-                <div class="d-flex flex-row justify-content-around">
-                    <input class="form-check-input d-none" type="radio" name="channel_type" id="channel_type1" value="training" checked="checked"/>
-                    <label for="channel_type1">
-                        <img src="/website_slides/static/src/img/channel-training-layout.png"
-                            alt="Training Layout"/>
-                    </label>
-                    <input class="form-check-input d-none" type="radio" name="channel_type" id="channel_type2" value="documentation"/>
-                    <label for="channel_type2">
-                        <img src="/website_slides/static/src/img/channel-documentation-layout.png"
-                            alt="Documentation Layout"/>
-                    </label>
-                </div>
-                <div class="form-group">
-                    <label for="title">Description</label>
-                    <textarea rows="2" class="form-control" name="description" id="description"
-                        placeholder="e.g. Common tasks for a computer scientist is asking the right questions. In this course, you will study those topics with activities about mathematics, science and logic."/>
-                </div>
-                <label id="communication-label">Review</label>
-                <div class="form-group">
-                    <div class="o_wslide_channel_communication_type">
-                        <div class="form-check">
-                            <input class="form-check-input" type="checkbox" id="allow_comment" name="allow_comment" checked="checked"/>
-                            <span class="form-check-label" for="allow_comment">Allow students to review your course</span>
-                        </div>
-                    </div>
-                </div>
-            </form>
-        </div>
-    </t>
+<record id="slide_channel_action_add" model="ir.actions.act_window">
+    <field name="name">New Course</field>
+    <field name="res_model">slide.channel</field>
+    <field name="view_mode">form</field>
+    <field name="target">new</field>
+    <field name="view_id" ref="slide_channel_view_form_add"/>
+</record>
 
-</templates>
+</odoo>
diff --git a/addons/website_slides/views/website_slides_templates_utils.xml b/addons/website_slides/views/website_slides_templates_utils.xml
index f6078c70ddf..556413ca259 100644
--- a/addons/website_slides/views/website_slides_templates_utils.xml
+++ b/addons/website_slides/views/website_slides_templates_utils.xml
@@ -72,17 +72,6 @@
     </div>
 </template>
 
-<!-- User Navbar -->
-<template id="user_navbar_inherit_website_slides" inherit_id="website.user_navbar">
-    <xpath expr="//div[@id='o_new_content_menu_choices']//div[@name='module_website_slides']" position="attributes">
-        <attribute name="name"/>
-        <attribute name="t-att-data-module-id"/>
-        <attribute name="t-att-data-module-shortdesc"/>
-        <attribute name="t-if">env.user.has_group('website_slides.group_website_slides_officer')</attribute>
-        <attribute name="t-cache"/>
-    </xpath>
-</template>
-
 <template id="join_course_link" name="Join Course Link">
     <a class="o_wslides_js_course_join_link" href="#" t-att-data-channel-enroll="slide.channel_id.enroll"
        t-att-data-channel-id="slide.channel_id.id">
diff --git a/addons/website_slides_forum/__manifest__.py b/addons/website_slides_forum/__manifest__.py
index 8374337ea9b..9845b01d2ac 100644
--- a/addons/website_slides_forum/__manifest__.py
+++ b/addons/website_slides_forum/__manifest__.py
@@ -25,10 +25,5 @@
         'data/slide_channel_demo.xml',
     ],
     'auto_install': True,
-    'assets': {
-        'web.assets_frontend': [
-            'website_slides_forum/static/src/js/**/*',
-        ],
-    },
     'license': 'LGPL-3',
 }
diff --git a/addons/website_slides_forum/static/src/js/website_slides_forum.editor.js b/addons/website_slides_forum/static/src/js/website_slides_forum.editor.js
deleted file mode 100644
index 9fddf13fd68..00000000000
--- a/addons/website_slides_forum/static/src/js/website_slides_forum.editor.js
+++ /dev/null
@@ -1,11 +0,0 @@
-odoo.define('website_slides_forum.editor', function (require) {
-"use strict";
-
-var WebsiteNewMenu = require('website.newMenu');
-
- WebsiteNewMenu.include({
-    xmlDependencies: WebsiteNewMenu.prototype.xmlDependencies.concat(
-        ['/website_slides_forum/static/src/xml/website_slides_forum_channel.xml']
-    ),
-});
-});
diff --git a/addons/website_slides_forum/static/src/xml/website_slides_forum_channel.xml b/addons/website_slides_forum/static/src/xml/website_slides_forum_channel.xml
deleted file mode 100644
index ae4c0fd4202..00000000000
--- a/addons/website_slides_forum/static/src/xml/website_slides_forum_channel.xml
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates xml:space="preserve">
-    <t t-extend="website.slide.channel.create">
-        <t t-jquery="#communication-label" t-operation="replace">
-            <label id="communication-label">Communication</label>
-        </t>
-        <t t-jquery=".o_wslide_channel_communication_type" t-operation="append">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="link_forum" name="link_forum"/>
-                <span class="form-check-label" for="link_forum">Create a Forum</span>
-            </div>
-        </t>
-    </t>
-</templates>
diff --git a/addons/website_slides_forum/views/slide_channel_views.xml b/addons/website_slides_forum/views/slide_channel_views.xml
index ef8910001f4..15418df4062 100644
--- a/addons/website_slides_forum/views/slide_channel_views.xml
+++ b/addons/website_slides_forum/views/slide_channel_views.xml
@@ -19,4 +19,18 @@
     		</xpath>
         </field>
     </record>
+
+    <record id="slide_channel_view_form_add_inherit_slides_forum" model="ir.ui.view">
+        <field name="name">slide.channel.view.form.add.inherit.slides.forum</field>
+        <field name="model">slide.channel</field>
+        <field name="inherit_id" ref="website_slides.slide_channel_view_form_add"/>
+        <field name="arch" type="xml">
+            <xpath expr="//group[@name='review']" position="attributes">
+                <attribute name="string">Communication</attribute>
+            </xpath>
+            <xpath expr="//field[@name='allow_comment']" position="after">
+                <field name="forum_id" string="Forum"/>
+    		</xpath>
+        </field>
+    </record>
 </odoo>

From 3326281e1a73bf0b9a4e18c7472bc610cc814488 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Thu, 10 Mar 2022 16:02:01 +0100
Subject: [PATCH 25/88] [FIX] web, website: correct items order on website
 systray

Before that commit, after the OWL2 rebase, the website systray items
were shuffled following those steps:
- Install website_blog
- Go to the posts list
- Click on a post
-> Until now, the systray items are correctly sorted
- Go back to the posts list, clicking on the blog navbar menu
-> Items are shuffled

For now, a temporary fix is to add an empty div with the index of the
item as the data-attribute to somehow force the rerender of the systray
items. That bug should be investigated further.

See merge commit for more information.

task-2687506
---
 addons/web/static/src/webclient/navbar/navbar.xml     | 2 ++
 addons/website/static/src/components/navbar/navbar.js | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/webclient/navbar/navbar.xml b/addons/web/static/src/webclient/navbar/navbar.xml
index 4ec8ad12ae6..57d1f232ffb 100644
--- a/addons/web/static/src/webclient/navbar/navbar.xml
+++ b/addons/web/static/src/webclient/navbar/navbar.xml
@@ -30,6 +30,8 @@
         <!-- Systray -->
         <div class="o_menu_systray d-flex flex-shrink-0 ml-auto" role="menu">
           <t t-foreach="systrayItems" t-as="item" t-key="item.key">
+            <!-- This ensures the correct order of the systray items -->
+            <div t-att-data-index="item.index"/>
             <ErrorHandler onError="error => this.handleItemError(error, item)">
                 <t t-component="item.Component" t-props="item.props"/>
             </ErrorHandler>
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
index c489fb8d504..e32d62f2aa3 100644
--- a/addons/website/static/src/components/navbar/navbar.js
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -59,7 +59,7 @@ patch(NavBar.prototype, 'website_navbar', {
         if (this.websiteService.currentWebsite) {
             return websiteSystrayRegistry
                 .getEntries()
-                .map(([key, value]) => ({ key, ...value }))
+                .map(([key, value], index) => ({ key, ...value, index }))
                 .filter((item) => ('isDisplayed' in item ? item.isDisplayed(this.env) : true))
                 .reverse();
         }

From 2eef2b5430ce889baa7b898fb251e7b4cac6a2b7 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Fri, 11 Mar 2022 11:14:52 +0100
Subject: [PATCH 26/88] [FIX] website: return to the correct url after editing
 in backend

Before this commit, clicking on the breadcrumb item "Website Editor"
after an "Edit in backend" systray item click would not redirect to the
edited object path. It would redo the website_editor action with the
initial params (most often path is undefined, and the component will by
default redirect to '/').

Now, when clicking on the "Edit in backend" systray, the frontend path
of the edited object is saved in the service. The client action
component takes it as the default path for the iframe if there is one.

See merge commit for more information.

task-2687506
---
 .../website_preview/website_preview.js        | 39 +++++++++++--------
 .../static/src/services/website_service.js    | 14 +++++++
 .../src/systray_items/edit_in_backend.js      |  7 +++-
 3 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index c65c708e9f7..22df3a6b97f 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -27,6 +27,7 @@ export class WebsitePreview extends Component {
             return () => {
                 this.websiteService.currentWebsiteId = null;
                 this.websiteService.pageDocument = null;
+                this.websiteService.contentWindow = null;
             };
         }, () => [this.props.action.context.params]);
     }
@@ -46,25 +47,28 @@ export class WebsitePreview extends Component {
     }
 
     get path() {
-        let path = this.props.action.context.params && this.props.action.context.params.path;
-        if (path) {
-            const url = new URL(path, window.location.origin);
-            if (this._isTopWindowURL(url)) {
-                // If the client action is initialized with a path that
-                // should not be opened inside the iframe (= something we
-                // would want to open on the top window), we consider that
-                // this is not a valid flow. Instead of trying to open it on
-                // the top window, we initialize the iframe with the
-                // website homepage...
-                path = '/';
+        let path = this.websiteService.editedObjectPath;
+        if (!path) {
+            path = this.props.action.context.params && this.props.action.context.params.path;
+            if (path) {
+                const url = new URL(path, window.location.origin);
+                if (this._isTopWindowURL(url)) {
+                    // If the client action is initialized with a path that
+                    // should not be opened inside the iframe (= something we
+                    // would want to open on the top window), we consider that
+                    // this is not a valid flow. Instead of trying to open it on
+                    // the top window, we initialize the iframe with the
+                    // website homepage...
+                    path = '/';
+                } else {
+                    // ... otherwise, the path still needs to be normalized (as
+                    // it would be if the given path was used as an href of a
+                    // <a/> element).
+                    path = url.pathname + url.search + url.hash;
+                }
             } else {
-                // ... otherwise, the path still needs to be normalized (as
-                // it would be if the given path was used as an href of a
-                // <a/> element).
-                path = url.pathname + url.search + url.hash;
+                path = '/';
             }
-        } else {
-            path = '/';
         }
         return path;
     }
@@ -91,6 +95,7 @@ export class WebsitePreview extends Component {
         this.title.setParts({ action: this.currentTitle });
 
         this.websiteService.pageDocument = this.iframe.el.contentDocument;
+        this.websiteService.contentWindow = this.iframe.el.contentWindow;
 
         // Before leaving the iframe, its content is replicated on an
         // underlying iframe, to avoid for white flashes (visible on
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 89a043118c2..1ec9b4fbda2 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -27,6 +27,8 @@ export const websiteService = {
         let currentMetadata = {};
         let fullscreen;
         let pageDocument;
+        let contentWindow;
+        let editedObjectPath;
         const context = reactive({
             showNewContentModal: false,
         });
@@ -85,6 +87,18 @@ export const websiteService = {
             get pageDocument() {
                 return pageDocument;
             },
+            set contentWindow(window) {
+                contentWindow = window;
+            },
+            get contentWindow() {
+                return contentWindow;
+            },
+            set editedObjectPath(path) {
+                editedObjectPath = path;
+            },
+            get editedObjectPath() {
+                return editedObjectPath;
+            },
             goToWebsite({ websiteId = currentWebsiteId || websites[0].id, path = '/' } = {}) {
                 action.doAction('website.website_preview', {
                     clearBreadcrumbs: true,
diff --git a/addons/website/static/src/systray_items/edit_in_backend.js b/addons/website/static/src/systray_items/edit_in_backend.js
index 1402230b250..d12586092ea 100644
--- a/addons/website/static/src/systray_items/edit_in_backend.js
+++ b/addons/website/static/src/systray_items/edit_in_backend.js
@@ -5,12 +5,16 @@ import { useService } from "@web/core/utils/hooks";
 import { Dropdown } from "@web/core/dropdown/dropdown";
 import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 
-const { Component } = owl;
+const { Component, onMounted } = owl;
 
 export class EditInBackendSystray extends Component {
     setup() {
         this.websiteService = useService('website');
         this.actionService = useService('action');
+
+        onMounted(() => {
+            this.websiteService.editedObjectPath = null;
+        });
     }
 
     getElements() {
@@ -22,6 +26,7 @@ export class EditInBackendSystray extends Component {
 
     editInBackend() {
         const { metadata: { mainObject } } = this.websiteService.currentWebsite;
+        this.websiteService.editedObjectPath = this.websiteService.contentWindow.location.pathname;
         this.actionService.doAction({
             res_model: mainObject.model,
             res_id: mainObject.id,

From 1216cea32173eb72ba9d3d433ee5a670fb088061 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Mon, 21 Feb 2022 14:39:33 +0100
Subject: [PATCH 27/88] [IMP] web_editor: add a new string attribute on snippet
 option

This commit introduces a new way to set the title of an option section
in the customize panel. The title can now be filled in a new "string"
attribute in the template of an option.

See merge commit for more information.

task-2710582
---
 addons/web_editor/static/src/js/editor/snippets.editor.js | 3 +++
 addons/web_editor/views/snippets.xml                      | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 189e027d82b..8949108d944 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -759,6 +759,9 @@ var SnippetEditor = Widget.extend({
             if (!val.selector.is(this.$target)) {
                 return;
             }
+            if (val.data.string) {
+                $optionsSection[0].querySelector('we-title > span').textContent = val.data.string;
+            }
             if (val['drop-near']) {
                 this.selectorSiblings.push(val['drop-near']);
             }
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 65c369df0d4..91e1c96c2a4 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -222,7 +222,7 @@
             />
         </div>
 
-        <div data-js="BackgroundShape" string="Shape"
+        <div data-js="BackgroundShape"
              t-att-data-selector="selector"
              t-att-data-exclude="exclude"
              t-att-data-target="target">

From dab8827e3b3bee63d9453cd6beecf4d79e53a902 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Mon, 28 Feb 2022 09:08:44 +0100
Subject: [PATCH 28/88] [IMP] web_editor: page options activated on click on
 the customize tab

With this commit, clicking on the "customize" tab automatically
activates the page options (if there are any). This commit also replaces
the name of the "style" tab by naming it "customize".

task-2710582
---
 .../static/src/js/editor/snippets.editor.js         | 13 ++++++++++++-
 addons/web_editor/views/snippets.xml                |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 8949108d944..36321199aa5 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -2948,7 +2948,18 @@ var SnippetsMenu = Widget.extend({
         if (!ev.currentTarget.classList.contains('active')) {
             this._activateSnippet(false);
             this._mutex.exec(() => {
-                this._activateEmptyOptionsTab();
+                let $pageOptionsTarget = $();
+                let i = 0;
+                const pageOptions = this.templateOptions.filter(template => template.data.pageOptions);
+                while (!$pageOptionsTarget.length && i < pageOptions.length) {
+                    $pageOptionsTarget = pageOptions[i].selector.all();
+                    i++;
+                }
+                if ($pageOptionsTarget.length) {
+                    this._activateSnippet($pageOptionsTarget);
+                } else {
+                    this._activateEmptyOptionsTab();
+                }
             });
         }
     },
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 91e1c96c2a4..30c556138cb 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -18,7 +18,7 @@
             <span>Blocks</span>
         </button>
         <button type="button" tabindex="2" class="o_we_customize_snippet_btn text-uppercase">
-            <span>Style</span>
+            <span>Customize</span>
         </button>
     </div>
 

From 9b1f4a84e317feefc52eef5822547472bd617c69 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Thu, 3 Mar 2022 11:07:17 +0100
Subject: [PATCH 29/88] [IMP] website: remove _cache_customize_show_views
 method

Remove _cache_customize_show_views method added by [1].
As the customize show options have been moved to edit mode. The
"customize_show" attributes will be less used.

[1]: https://github.com/odoo/odoo/commit/697f6007847e0cf209610acd533c5cd4d2c83296

See merge commit for more information.

task-2710582
---
 addons/website/models/website.py | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/addons/website/models/website.py b/addons/website/models/website.py
index 1327c6af2a6..3404bef64a4 100644
--- a/addons/website/models/website.py
+++ b/addons/website/models/website.py
@@ -1083,22 +1083,13 @@ class Website(models.Model):
             raise ValueError('No record found for unique ID %s. It may have been deleted.' % (view_id))
         return view
 
-    @tools.ormcache_context(keys=('website_id',))
-    def _cache_customize_show_views(self):
-        views = self.env['ir.ui.view'].with_context(active_test=False).sudo().search([('customize_show', '=', True)])
-        views = views.filter_duplicate()
-        return {v.key: v.active for v in views}
-
     @tools.ormcache_context('key', keys=('website_id',))
-    def is_view_active(self, key, raise_if_not_found=False):
+    def is_view_active(self, key):
         """
-            Return True if active, False if not active, None if not found or not a customize_show view
+            Return True if active, False if not active, None if not found
         """
-        views = self._cache_customize_show_views()
-        view = key in views and views[key]
-        if view is None and raise_if_not_found:
-            raise ValueError('No view of type customize_show found for key %s' % key)
-        return view
+        view = self.viewref(key, raise_if_not_found=False)
+        return view.active if view else None
 
     @api.model
     def get_template(self, template):

From 17a8a37e9bfc5b787d9666597d43e63f0064919f Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Mon, 11 Apr 2022 14:33:12 +0200
Subject: [PATCH 30/88] [IMP] website_sale, *: adapt customize show options in
 shop pages

*: website, website_sale_comparison, website_sale_loyalty,
   website_sale_slides, website_sale_wishlist

This commit adapts "customize show" options from website sale modules by
creating new options available in edit mode.

See merge commit for more information.

task-2710582
---
 addons/website/controllers/main.py            |   7 -
 addons/website_sale/controllers/main.py       |   6 +-
 .../website_sale/models/product_template.py   |   4 +-
 .../static/src/js/website_sale.editor.js      |  13 ++
 .../static/src/scss/website_sale.editor.scss  |   4 +-
 .../website_sale/views/snippets/snippets.xml  | 144 +++++++++++++++---
 addons/website_sale/views/templates.xml       |  55 ++++---
 .../website_sale_comparison/__manifest__.py   |   1 +
 .../views/snippets.xml                        |  21 +++
 .../website_sale_comparison_template.xml      |   4 +-
 addons/website_sale_loyalty/__manifest__.py   |   1 +
 .../website_sale_loyalty/views/snippets.xml   |  15 ++
 .../views/website_sale_templates.xml          |   2 +-
 addons/website_sale_slides/__manifest__.py    |   1 +
 addons/website_sale_slides/views/snippets.xml |  15 ++
 .../views/website_slides_templates.xml        |   2 +-
 .../website_sale_wishlist/views/snippets.xml  |  12 ++
 .../views/website_sale_wishlist_template.xml  |   4 +-
 18 files changed, 243 insertions(+), 68 deletions(-)
 create mode 100644 addons/website_sale_comparison/views/snippets.xml
 create mode 100644 addons/website_sale_loyalty/views/snippets.xml
 create mode 100644 addons/website_sale_slides/views/snippets.xml

diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index 0afc9434773..178dd413cb3 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -606,13 +606,6 @@ class Website(Home):
         views = views.sorted(key=lambda v: (v.inherit_id.id, v.name))
         return views.with_context(display_website=False).read(['name', 'id', 'key', 'xml_id', 'active', 'inherit_id'])
 
-    @http.route('/website/toggle_switchable_view', type='json', auth='user', website=True)
-    def toggle_switchable_view(self, view_key):
-        if request.website.user_has_groups('website.group_website_designer'):
-            request.website.viewref(view_key).toggle_active()
-        else:
-            return werkzeug.exceptions.Forbidden()
-
     @http.route('/website/reset_template', type='http', auth='user', methods=['POST'], website=True, csrf=False)
     def reset_template(self, view_id, mode='soft', redirect='/', **kwargs):
         """ This method will try to reset a broken view.
diff --git a/addons/website_sale/controllers/main.py b/addons/website_sale/controllers/main.py
index e0ffebeac10..29f1ba9ab24 100644
--- a/addons/website_sale/controllers/main.py
+++ b/addons/website_sale/controllers/main.py
@@ -141,9 +141,9 @@ class Website(main.Website):
         return views
 
     @http.route()
-    def toggle_switchable_view(self, view_key):
-        super(Website, self).toggle_switchable_view(view_key)
-        if view_key in ('website_sale.products_list_view', 'website_sale.add_grid_or_list_option'):
+    def theme_customize_data(self, is_view_data, enable=None, disable=None, reset_view_arch=False):
+        super().theme_customize_data(is_view_data, enable, disable, reset_view_arch)
+        if any(key in enable or key in disable for key in ['website_sale.products_list_view', 'website_sale.add_grid_or_list_option']):
             request.session.pop('website_sale_shop_layout_mode', None)
 
     @http.route()
diff --git a/addons/website_sale/models/product_template.py b/addons/website_sale/models/product_template.py
index cbf0ceff9a4..8fd48eece90 100644
--- a/addons/website_sale/models/product_template.py
+++ b/addons/website_sale/models/product_template.py
@@ -36,8 +36,8 @@ class ProductTemplate(models.Model):
     public_categ_ids = fields.Many2many(
         'product.public.category', relation='product_public_category_product_template_rel',
         string='Website Product Category',
-        help="The product will be available in each mentioned eCommerce category. Go to Shop > "
-             "Customize and enable 'eCommerce categories' to view all eCommerce categories.")
+        help="The product will be available in each mentioned eCommerce category. Go to Shop > Edit "
+             "Click on the page and enable 'Categories' to view all eCommerce categories.")
 
     product_template_image_ids = fields.One2many('product.image', 'product_tmpl_id', string="Extra Product Media", copy=True)
 
diff --git a/addons/website_sale/static/src/js/website_sale.editor.js b/addons/website_sale/static/src/js/website_sale.editor.js
index 4a367e8c5d8..1e9e3673143 100644
--- a/addons/website_sale/static/src/js/website_sale.editor.js
+++ b/addons/website_sale/static/src/js/website_sale.editor.js
@@ -296,6 +296,19 @@ options.registry.WebsiteSaleGridLayout = options.Class.extend({
         }).then(reload);
     },
 
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    async updateUIVisibility() {
+        await this._super(...arguments);
+        const pprSelector = this.el.querySelector('.o_wsale_ppr_submenu.d-none');
+        this.el.querySelector('.o_wsale_ppr_by').classList.toggle('d-none', pprSelector);
+    },
+
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
diff --git a/addons/website_sale/static/src/scss/website_sale.editor.scss b/addons/website_sale/static/src/scss/website_sale.editor.scss
index 58757206f00..2e58445b078 100644
--- a/addons/website_sale/static/src/scss/website_sale.editor.scss
+++ b/addons/website_sale/static/src/scss/website_sale.editor.scss
@@ -9,8 +9,8 @@
         td {
             margin: 0;
             padding: 0;
-            width: 40px;
-            height: 40px;
+            width: 20px;
+            height: 20px;
             border: 1px #dddddd solid;
             cursor: pointer;
 
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index 0c9a437d5cc..bc13712d0e9 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -9,21 +9,23 @@
 
 <template id="snippet_options" inherit_id="website.snippet_options" name="e-commerce snippet options">
     <xpath expr="." position="inside">
-        <div data-js="WebsiteSaleGridLayout"
-            data-selector="#products_grid .o_wsale_products_grid_table_wrapper > table"
-            data-no-check="true">
-            <we-input string="Number of products" data-set-ppg="" data-no-preview="true"/>
-            <we-select string="Number of Columns" class="o_wsale_ppr_submenu" data-no-preview="true">
-                <we-button data-set-ppr="2">2</we-button>
-                <we-button data-set-ppr="3">3</we-button>
-                <we-button data-set-ppr="4">4</we-button>
+        <!-- All products page -->
+        <div data-js="WebsiteSaleGridLayout" data-page-options="true" data-selector="main:has(.o_wsale_products_page)" data-no-check="true"
+            string="Products Page" data-target="#products_grid .o_wsale_products_grid_table_wrapper > table">
+            <we-select string="Layout" data-no-preview="true" data-reload="/">
+                <we-button data-customize-website-views="" data-name="grid_view_opt">Grid</we-button>
+                <we-button data-customize-website-views="website_sale.products_list_view">List</we-button>
             </we-select>
-            <we-select string="Default Sort" class="o_wsale_sort_submenu" data-no-preview="true">
-                <t t-foreach="request.env['website']._get_product_sort_mapping()" t-as="query_and_label">
-                    <we-button t-att-data-set-default-sort="query_and_label[0]"><t t-esc="query_and_label[1]"/></we-button>
-                </t>
-            </we-select>
-            <we-select string="Design">
+            <we-row string="⌙ Size">
+                <we-input data-set-ppg="" data-no-preview="true" data-reload="/"/>
+                <span class="mx-2 o_wsale_ppr_by">by</span>
+                <we-select class="o_wsale_ppr_submenu" data-dependencies="grid_view_opt" data-no-preview="true" data-reload="/">
+                    <we-button data-set-ppr="2">2</we-button>
+                    <we-button data-set-ppr="3">3</we-button>
+                    <we-button data-set-ppr="4">4</we-button>
+                </we-select>
+            </we-row>
+            <we-select string="⌙ Style">
                 <we-button data-select-class=""
                            data-customize-website-views="">
                            Default
@@ -41,7 +43,7 @@
                            Grid
                 </we-button>
             </we-select>
-            <we-select string="Images Height">
+            <we-select string="⌙ Images Size">
                 <we-button data-select-class="o_wsale_context_thumb_4_3"
                            data-customize-website-views="website_sale.products_thumb_4_3">
                            Landscape (4/3)
@@ -71,8 +73,55 @@
                            data-customize-website-views="website_sale.products_thumb_cover">
                 </we-button>
             </we-button-group>
+            <we-checkbox string="Prod. Desc."
+                         data-customize-website-views="website_sale.products_description"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-row string="Left Panel" class="o_we_full_row">
+                <we-button string="Categories"
+                           data-name="categories_opt"
+                           data-customize-website-views="website_sale.products_categories"
+                           data-no-preview="true"
+                           data-reload="/"/>
+                <we-button string="Attributes"
+                           data-name="attributes_opt"
+                           data-customize-website-views="website_sale.products_attributes"
+                           data-no-preview="true"
+                           data-reload="/"/>
+            </we-row>
+            <we-checkbox string="⌙ Collapse Category Recursive"
+                         data-customize-website-views="website_sale.option_collapse_products_categories"
+                         data-dependencies="categories_opt"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Price Filter"
+                         data-customize-website-views="website_sale.filter_products_price"
+                         data-dependencies="categories_opt, attributes_opt"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-row string="Top Bar" class="o_we_full_row">
+                <we-button string="Sort by"
+                           data-customize-website-views="website_sale.sort"
+                           data-no-preview="true"
+                           data-reload="/"/>
+                <we-button string="Layout"
+                           data-customize-website-views="website_sale.add_grid_or_list_option"
+                           data-no-preview="true"
+                           data-reload="/"/>
+            </we-row>
+            <we-select string="Default Sort" class="o_wsale_sort_submenu" data-no-preview="true">
+                <t t-foreach="request.env['website']._get_product_sort_mapping()" t-as="query_and_label">
+                    <we-button t-att-data-set-default-sort="query_and_label[0]"><t t-esc="query_and_label[1]"/></we-button>
+                </t>
+            </we-select>
+            <we-row string="Buttons" class="o_we_full_row">
+                <we-button title="Add to Cart" class="fa fa-fw fa-shopping-cart o_we_add_to_cart_btn"
+                           data-customize-website-views="website_sale.products_add_to_cart"
+                           data-no-preview="true"
+                           data-reload="/"/>
+            </we-row>
         </div>
-
+        <!-- Product -->
         <div data-js="WebsiteSaleProductsItem"
             data-selector="#products_grid .oe_product"
             data-no-check="true">
@@ -131,11 +180,17 @@
             data-no-check="true"
             groups="website.group_website_designer">
             <we-checkbox string="Show Empty Cart"
-                        data-customize-website-views="website_sale.header_hide_empty_cart_link|"
-                        data-no-preview="true"
-                        data-reload="/"/>
+                         data-customize-website-views="website_sale.header_hide_empty_cart_link|"
+                         data-no-preview="true"
+                         data-reload="/"/>
         </div>
+        <!-- Product image -->
         <div data-selector="#product_detail #o-carousel-product" data-no-check="true">
+            <we-select string="Image Zoom" data-no-preview="true" data-reload="/">
+                <we-button data-customize-website-views="">None</we-button>
+                <we-button data-customize-website-views="website_sale.product_picture_magnify">On click</we-button>
+                <we-button data-customize-website-views="website_sale.product_picture_magnify_auto">On hover</we-button>
+            </we-select>
             <we-button-group string="Thumbnails Position" data-no-preview="true" data-reload="/">
                 <we-button class="fa fa-fw fa-long-arrow-left" title="Left" data-customize-website-views="website_sale.carousel_product_indicators_left"/>
                 <we-button class="fa fa-fw fa-long-arrow-down" title="Bottom" data-customize-website-views="website_sale.carousel_product_indicators_bottom"/>
@@ -149,6 +204,57 @@
                 <we-button data-set-display-type="color">Color</we-button>
             </we-select>
         </div>
+        <!-- Product page -->
+        <div data-selector="main:has(.o_wsale_product_page)" data-page-options="true" data-no-check="true" string="Product Page">
+            <we-row string="Customers" class="o_we_full_row">
+                <we-button string="Rating"
+                           data-customize-website-views="website_sale.product_comment"
+                           data-no-preview="true"
+                           data-reload="/"/>
+                <we-button string="Share"
+                           data-name="attributes_opt"
+                           data-customize-website-views="website_sale.product_share_buttons"
+                           data-no-preview="true"
+                           data-reload="/"/>
+            </we-row>
+            <we-checkbox string="Select Quantity"
+                         data-customize-website-views="website_sale.product_quantity"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-select string="Variants" data-no-preview="true" data-reload="/">
+                <we-button data-customize-website-views="">Options</we-button>
+                <we-button data-customize-website-views="website_sale.product_variants">Products List</we-button>
+            </we-select>
+            <we-row string="Cart" class="o_we_full_row">
+                <we-button title="Buy Now" class="fa fa-fw fa-bolt o_we_buy_now_btn"
+                           data-customize-website-views="website_sale.product_buy_now"
+                           data-no-preview="true"
+                           data-reload="/"/>
+            </we-row>
+        </div>
+        <!-- Checkout page  -->
+        <div data-selector="main:has(.oe_website_sale .wizard)" data-page-options="true" data-no-check="true" string="Checkout Pages">
+            <we-checkbox string="Extra Step Option"
+                         data-customize-website-views="website_sale.extra_info_option"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Suggested Accessories"
+                         data-customize-website-views="website_sale.suggested_products_list"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Promo Code"
+                         data-customize-website-views="website_sale.reduction_code"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Accept Terms &amp; Conditions"
+                         data-customize-website-views="website_sale.payment_sale_note"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Show b2b Fields"
+                         data-customize-website-views="website_sale.address_b2b"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
     </xpath>
 </template>
 
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 85b5071ee24..44a860dc706 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -203,7 +203,7 @@
         </form>
     </template>
 
-    <template id="products_description" inherit_id="website_sale.products_item" active="False" customize_show="True" name="Product Description">
+    <template id="products_description" inherit_id="website_sale.products_item" active="False" name="Product Description">
         <xpath expr="//*[hasclass('o_wsale_products_item_title')]" position="after">
             <div class="oe_subdescription mb-2 text-muted small" contenteditable="false">
                 <div itemprop="description" t-field="product.description_sale"/>
@@ -211,7 +211,7 @@
         </xpath>
     </template>
 
-    <template id="products_add_to_cart" inherit_id="website_sale.products_item" active="False" customize_show="True" name="Add to Cart">
+    <template id="products_add_to_cart" inherit_id="website_sale.products_item" active="False" name="Add to Cart">
         <xpath expr="//div[hasclass('o_wsale_product_btn')]" position="inside">
             <t t-set="product_variant_id" t-value="product._get_first_possible_variant_id()"/>
             <input name="product_id" t-att-value="product_variant_id" type="hidden"/>
@@ -263,7 +263,7 @@
             <t t-set="additional_title">Shop</t>
             <t t-set="grid_block_name">Grid</t>
             <t t-set="product_block_name">Product</t>
-            <div id="wrap" class="js_sale">
+            <div id="wrap" class="js_sale o_wsale_products_page">
                 <div class="oe_structure oe_empty oe_structure_not_nearest" id="oe_structure_website_sale_products_1"/>
                 <div class="container oe_website_sale pt-2">
                     <div class="row o_wsale_products_main_row">
@@ -383,7 +383,7 @@
         </xpath>
     </template>
 
-    <template id="sort" inherit_id="website_sale.products" customize_show="True" name="Show Sort by">
+    <template id="sort" inherit_id="website_sale.products" name="Show Sort by">
         <xpath expr="//div[hasclass('products_header')]/t[@t-call='website_sale.pricelist_list']" position="after">
             <t t-set="website_sale_sortable" t-value="website._get_product_sort_mapping()"/>
             <t t-set="website_sale_sortable_current" t-value="[sort for sort in website_sale_sortable if sort[0]==request.params.get('order', '')]"/>
@@ -411,7 +411,7 @@
         </xpath>
     </template>
 
-    <template id="add_grid_or_list_option" inherit_id="website_sale.products" active="True" customize_show="True" name="Grid or List button">
+    <template id="add_grid_or_list_option" inherit_id="website_sale.products" active="True" name="Grid or List button">
         <xpath expr="//div[hasclass('products_header')]" position="inside">
             <div class="btn-group btn-group-toggle ml-3 mb-2 d-inline-flex o_wsale_apply_layout" data-toggle="buttons">
                 <label t-attf-class="btn btn-light border-0 #{'active' if layout_mode != 'list' else None} fa fa-th-large o_wsale_apply_grid" title="Grid">
@@ -445,7 +445,7 @@
         </div>
     </template>
 
-    <template id="products_categories" inherit_id="website_sale.products" active="False" customize_show="True" name="eCommerce Categories">
+    <template id="products_categories" inherit_id="website_sale.products" active="False" name="eCommerce Categories">
         <xpath expr="//div[@id='products_grid_before']" position="before">
             <t t-set="enable_left_column" t-value="True"/>
         </xpath>
@@ -493,7 +493,7 @@
         </li>
     </template>
 
-    <template id="option_collapse_products_categories" name="Collapsible Category List" inherit_id="website_sale.products_categories" active="False" customize_show="True">
+    <template id="option_collapse_products_categories" name="Collapsible Category List" inherit_id="website_sale.products_categories" active="False">
         <xpath expr="//div[@id='wsale_products_categories_collapse']/ul" position="attributes">
             <attribute name="id">o_shop_collapse_category</attribute>
         </xpath>
@@ -502,7 +502,7 @@
         </xpath>
     </template>
 
-    <template id="products_attributes" inherit_id="website_sale.products" active="False" customize_show="True" name="Attributes &amp; Variants filters">
+    <template id="products_attributes" inherit_id="website_sale.products" active="False" name="Attributes &amp; Variants filters">
         <xpath expr="//div[@id='products_grid_before']" position="before">
             <t t-set="enable_left_column" t-value="True"/>
         </xpath>
@@ -557,10 +557,7 @@
         </xpath>
     </template>
 
-    <template id="filter_products_price" inherit_id="website_sale.products" active="False" customize_show="True" name="Filter by Prices">
-        <xpath expr="//div[@id='products_grid_before']" position="before">
-            <t t-set="enable_left_column" t-value="True"/>
-        </xpath>
+    <template id="filter_products_price" inherit_id="website_sale.products" active="False" name="Filter by Prices">
         <xpath expr="//div[@id='products_grid_before']" position="inside">
             <div t-if="available_min_price != available_max_price" id="o_wsale_price_range_option">
                 <label class="m-0 h6 o_products_attributes_title">
@@ -575,7 +572,7 @@
         </xpath>
     </template>
 
-    <template id="products_list_view" inherit_id="website_sale.products" active="False" customize_show="True" name="List View (by default)">
+    <template id="products_list_view" inherit_id="website_sale.products" active="False" name="List View (by default)">
         <xpath expr="//div[@id='products_grid']" position="after">
             <!-- Nothing to do, this view is only meant to allow the server -->
             <!-- to know if the list view layout should be used -->
@@ -598,7 +595,7 @@
 
         <t t-call="website.layout">
             <t t-set="additional_title" t-value="product.name" />
-            <div itemscope="itemscope" itemtype="http://schema.org/Product" id="wrap" class="js_sale">
+            <div itemscope="itemscope" itemtype="http://schema.org/Product" id="wrap" class="js_sale o_wsale_product_page">
                 <div class="oe_structure oe_empty oe_structure_not_nearest" id="oe_structure_website_sale_product_1" data-editor-message="DROP BUILDING BLOCKS HERE TO MAKE THEM AVAILABLE ACROSS ALL PRODUCTS"/>
                 <section t-attf-class="container py-4 oe_website_sale #{'discount' if combination_info['has_discounted_price'] else ''}" id="product_detail"
                     t-att-data-view-track="view_track and '1' or '0'"
@@ -715,7 +712,7 @@
     </t>
     </template>
 
-    <template id="product_custom_text" inherit_id="website_sale.product" active="True" customize_show="True" name="Terms and Conditions" priority="21">
+    <template id="product_custom_text" inherit_id="website_sale.product" active="True" name="Terms and Conditions" priority="21">
         <xpath expr="//div[@id='o_product_terms_and_share']" position="inside">
             <p class="text-muted mb-0">
                 <a href="/terms" class="text-muted"><u>Terms and Conditions</u></a><br/>
@@ -725,7 +722,7 @@
         </xpath>
     </template>
 
-    <template id="product_share_buttons" inherit_id="website_sale.product" active="True" customize_show="True" name="Share Buttons" priority="22">
+    <template id="product_share_buttons" inherit_id="website_sale.product" active="True" name="Share Buttons" priority="22">
         <xpath expr="//div[@id='o_product_terms_and_share']" position="inside">
             <div class="h4 mt-3 mb-0 d-flex justify-content-md-end flex-shrink-0" contenteditable="false">
                 <t t-snippet-call="website.s_share">
@@ -738,13 +735,13 @@
         </xpath>
     </template>
 
-    <template inherit_id='website_sale.product' id="product_picture_magnify" customize_show="True" name="Image Zoom">
+    <template inherit_id='website_sale.product' id="product_picture_magnify" name="Image Zoom">
         <xpath expr='//div[hasclass("js_sale")]' position='attributes'>
             <attribute name="class" separator=" " add="ecom-zoomable zoomodoo-next" />
         </xpath>
     </template>
 
-    <template inherit_id='website_sale.product' id="product_picture_magnify_auto" active="False" customize_show="True" name="Automatic Image Zoom">
+    <template inherit_id='website_sale.product' id="product_picture_magnify_auto" active="False" name="Automatic Image Zoom">
         <xpath expr='//div[hasclass("js_sale")]' position='attributes'>
             <attribute name="data-ecom-zoom-auto">1</attribute>
             <attribute name="class" separator=" " add="ecom-zoomable zoomodoo-next" />
@@ -752,7 +749,7 @@
         </xpath>
     </template>
 
-    <template id="recommended_products" inherit_id="website_sale.product" customize_show="True" name="Alternative Products">
+    <template id="recommended_products" inherit_id="website_sale.product" name="Alternative Products">
         <xpath expr="//div[@id='product_full_description']" position="after">
             <t t-set="alternative_products" t-value="product._get_website_alternative_product()"/>
             <div t-if="alternative_products" class="container mt32">
@@ -783,7 +780,7 @@
     </template>
 
     <!-- Product options: OpenChatter -->
-    <template id="product_comment" inherit_id="website_sale.product" active="False" customize_show="True" name="Discussion and Rating" priority="15">
+    <template id="product_comment" inherit_id="website_sale.product" active="False" name="Discussion and Rating" priority="15">
         <xpath expr="//div[@t-field='product.website_description']" position="after">
             <div class="o_shop_discussion_rating" data-anchor='true'>
                 <section id="o_product_page_reviews" class="container pt32 pb32" data-anchor='true'>
@@ -804,7 +801,7 @@
         </xpath>
     </template>
 
-    <template id="product_quantity" inherit_id="website_sale.product" customize_show="True" name="Select Quantity">
+    <template id="product_quantity" inherit_id="website_sale.product" name="Select Quantity">
         <xpath expr="//t[@t-set='hasQuantities']" position="attributes">
             <attribute name="t-value" remove="false" add="true" separator=" "/>
         </xpath>
@@ -825,7 +822,7 @@
       </xpath>
     </template>
 
-    <template id="product_buy_now" inherit_id="website_sale.product" active="False" customize_show="True" name="Buy Now Button">
+    <template id="product_buy_now" inherit_id="website_sale.product" active="False" name="Buy Now Button">
         <xpath expr="//t[@t-set='hasBuyNow']" position="attributes">
             <attribute name="t-value" remove="false" add="true" separator=" "/>
         </xpath>
@@ -874,7 +871,7 @@
         </div>
     </template>
 
-    <template id="product_variants" inherit_id="website_sale.product" active="False" customize_show="True" name="List View of Variants">
+    <template id="product_variants" inherit_id="website_sale.product" active="False" name="List View of Variants">
         <xpath expr="//t[@t-placeholder='select']" position="replace">
             <!--
                 Using this setting with dynamic variants is not supported.
@@ -1018,7 +1015,7 @@
         </t>
     </template>
 
-    <template id="extra_info_option" name="Extra Step Option" inherit_id="wizard_checkout" active="False" customize_show="True">
+    <template id="extra_info_option" name="Extra Step Option" inherit_id="wizard_checkout" active="False">
         <!-- Add a "flag element" to trigger style variation -->
         <xpath expr="//div[hasclass('wizard')]/div" position="before">
             <span class="o_wizard_has_extra_step d-none"/>
@@ -1268,7 +1265,7 @@
         </t>
     </template>
 
-    <template id="suggested_products_list" inherit_id="website_sale.cart_lines" customize_show="True" name="Alternative Products in my cart">
+    <template id="suggested_products_list" inherit_id="website_sale.cart_lines" name="Alternative Products in my cart">
         <xpath expr="//table[@id='cart_products']" position="after">
             <h5 class='text-muted js_cart_lines' t-if="suggested_products">Suggested Accessories:</h5>
             <table t-if="suggested_products" id="suggested_products" class="js_cart_lines table table-striped table-sm">
@@ -1582,7 +1579,7 @@
         </t>
     </template>
 
-    <template id="address_b2b" inherit_id="address" name="Show b2b fields" customize_show="True">
+    <template id="address_b2b" inherit_id="address" name="Show b2b fields">
         <xpath expr="//div[@id='div_phone']" position="after">
             <div class="w-100"/>
             <t t-set='vat_warning' t-value="'vat' in checkout and checkout['vat'] and not can_edit_vat" />
@@ -1710,7 +1707,7 @@
         </div>
     </template>
 
-    <template id="payment_sale_note" inherit_id="payment_footer" name="Accept Terms &amp; Conditions" customize_show="True" active="False">
+    <template id="payment_sale_note" inherit_id="payment_footer" name="Accept Terms &amp; Conditions" active="False">
         <xpath expr="//div[@name='o_checkbox_container']" position="inside">
             <input type="checkbox" id="checkbox_tc" class="custom-control-input"/>
             <label for="checkbox_tc" class="custom-control-label">
@@ -1905,7 +1902,7 @@
         </div>
     </template>
 
-    <template id="reduction_code" inherit_id="website_sale.total" customize_show="True" name="Promo Code">
+    <template id="reduction_code" inherit_id="website_sale.total" name="Promo Code">
         <xpath expr="//div[@id='cart_total']//table/tr[last()]" position="after">
             <tr t-if="not hide_promotions">
                 <td colspan="3" class="text-center text-xl-right border-0">
@@ -1992,7 +1989,7 @@
 
     <template id="website_sale.shop_product_carousel" name="Shop Product Carousel">
         <t t-set="product_images" t-value="product_variant._get_images() if product_variant else product._get_images()"/>
-        <t t-set="product_carousel_block_name">Product Carousel</t>
+        <t t-set="product_carousel_block_name">Product Image</t>
         <div id="o-carousel-product" class="carousel slide position-sticky mb-3 overflow-hidden" data-ride="carousel" data-interval="0" t-att-data-name="product_carousel_block_name">
             <div class="o_carousel_product_outer carousel-outer position-relative flex-grow-1">
                 <div class="carousel-inner h-100">
diff --git a/addons/website_sale_comparison/__manifest__.py b/addons/website_sale_comparison/__manifest__.py
index c4d5847f8b5..37b61b89822 100644
--- a/addons/website_sale_comparison/__manifest__.py
+++ b/addons/website_sale_comparison/__manifest__.py
@@ -18,6 +18,7 @@ Finally, the module comes with an option to display an attribute summary table i
         'security/ir.model.access.csv',
         'views/website_sale_comparison_template.xml',
         'views/website_sale_comparison_view.xml',
+        'views/snippets.xml',
     ],
     'demo': [
         'data/website_sale_comparison_data.xml',
diff --git a/addons/website_sale_comparison/views/snippets.xml b/addons/website_sale_comparison/views/snippets.xml
new file mode 100644
index 00000000000..31b1a53df4d
--- /dev/null
+++ b/addons/website_sale_comparison/views/snippets.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="snippet_options" inherit_id="website.snippet_options" name="Comparison Snippet Options">
+    <xpath expr="." position="inside">
+        <div data-selector="main:has(.o_wsale_product_page)" data-no-check="true">
+            <we-select string="Attributes" data-no-preview="true" data-reload="/">
+                <we-button data-customize-website-views="">None</we-button>
+                <we-button data-customize-website-views="website_sale_comparison.product_attributes_body">Bottom of Page</we-button>
+            </we-select>
+        </div>
+    </xpath>
+    <xpath expr="//we-button[hasclass('o_we_add_to_cart_btn')]" position="after">
+        <we-button title="Compare" class="fa fa-fw fa-exchange"
+                   data-customize-website-views="website_sale_comparison.add_to_compare"
+                   data-no-preview="true"
+                   data-reload="/"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website_sale_comparison/views/website_sale_comparison_template.xml b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
index 972e0ac1eb0..895e0dc0948 100644
--- a/addons/website_sale_comparison/views/website_sale_comparison_template.xml
+++ b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-    <template id="add_to_compare" inherit_id="website_sale.products_item" customize_show="True" name="Comparison List" priority="22">
+    <template id="add_to_compare" inherit_id="website_sale.products_item" name="Comparison List" priority="22">
         <xpath expr="//div[hasclass('o_wsale_product_btn')]" position="inside">
             <t t-set="categories" t-value="product.valid_product_template_attribute_line_ids._prepare_categories_for_display()"/>
             <t t-set="product_variant_id" t-value="product._get_first_possible_variant_id()"/>
@@ -9,7 +9,7 @@
         </xpath>
     </template>
 
-    <template id="product_attributes_body" inherit_id="website_sale.product" customize_show="True" name="Product attributes table">
+    <template id="product_attributes_body" inherit_id="website_sale.product" name="Product attributes table">
         <xpath expr="//div[@id='product_attributes_simple']" position="replace"/>
         <xpath expr="//div[@id='product_full_description']" position="after">
             <t t-set="categories" t-value="product.valid_product_template_attribute_line_ids._prepare_categories_for_display()"/>
diff --git a/addons/website_sale_loyalty/__manifest__.py b/addons/website_sale_loyalty/__manifest__.py
index 89e2f501e2b..c08db36307f 100644
--- a/addons/website_sale_loyalty/__manifest__.py
+++ b/addons/website_sale_loyalty/__manifest__.py
@@ -19,6 +19,7 @@ Coupon & promotion programs can be edited in the Catalog menu of the Website app
         'views/loyalty_program_views.xml',
         'views/website_sale_templates.xml',
         'views/res_config_settings_views.xml',
+        'views/snippets.xml',
     ],
     'demo': [
         'data/product_demo.xml',
diff --git a/addons/website_sale_loyalty/views/snippets.xml b/addons/website_sale_loyalty/views/snippets.xml
new file mode 100644
index 00000000000..065308644b5
--- /dev/null
+++ b/addons/website_sale_loyalty/views/snippets.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="snippet_options" inherit_id="website.snippet_options" name="Coupon Snippet Options">
+    <xpath expr="." position="inside">
+        <div data-selector="main:has(.oe_website_sale .wizard)" data-no-check="true">
+            <we-checkbox string="Show Discount in Subtotal"
+                         data-customize-website-views="website_sale_loyalty.cart_discount"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website_sale_loyalty/views/website_sale_templates.xml b/addons/website_sale_loyalty/views/website_sale_templates.xml
index 33091ffb6a7..dafb875cf65 100644
--- a/addons/website_sale_loyalty/views/website_sale_templates.xml
+++ b/addons/website_sale_loyalty/views/website_sale_templates.xml
@@ -108,7 +108,7 @@
         </body>
     </template>
 
-    <template id="cart_discount" name="Show Discount in Subtotal" customize_show="True" active="False" inherit_id="website_sale.total">
+    <template id="cart_discount" name="Show Discount in Subtotal" active="False" inherit_id="website_sale.total">
         <xpath expr="//tr[@id='order_total_untaxed']" position="before">
             <tr t-if="website_sale_order and website_sale_order.reward_amount">
             <td class="text-right border-0 text-muted" title="Discounted amount">Discount:</td>
diff --git a/addons/website_sale_slides/__manifest__.py b/addons/website_sale_slides/__manifest__.py
index b3bd40e04d6..a9ca38895e2 100644
--- a/addons/website_sale_slides/__manifest__.py
+++ b/addons/website_sale_slides/__manifest__.py
@@ -16,6 +16,7 @@
         'views/slide_channel_views.xml',
         'views/website_sale_templates.xml',
         'views/website_slides_templates.xml',
+        'views/snippets.xml',
     ],
     'demo': [
         'data/product_demo.xml',
diff --git a/addons/website_sale_slides/views/snippets.xml b/addons/website_sale_slides/views/snippets.xml
new file mode 100644
index 00000000000..497def0b981
--- /dev/null
+++ b/addons/website_sale_slides/views/snippets.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="snippet_options" inherit_id="website.snippet_options" name="Slides Snippet Options">
+    <xpath expr="." position="inside">
+        <div data-selector="main:has(.o_wslides_course_header)" data-page-options="true" data-no-check="true" string="Course Page">
+            <we-checkbox string="Buy Now Button"
+                         data-customize-website-views="website_sale_slides.course_option_buy_course_now"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website_sale_slides/views/website_slides_templates.xml b/addons/website_sale_slides/views/website_slides_templates.xml
index 61b0ae0049f..534f61fc591 100644
--- a/addons/website_sale_slides/views/website_slides_templates.xml
+++ b/addons/website_sale_slides/views/website_slides_templates.xml
@@ -137,7 +137,7 @@
     </t>
 </template>
 
-<template name="Display 'Buy Now'" id="course_option_buy_course_now" inherit_id="website_sale_slides.course_buy_course_button" active="False" customize_show="True">
+<template name="Display 'Buy Now'" id="course_option_buy_course_now" inherit_id="website_sale_slides.course_buy_course_button" active="False">
     <xpath expr="//div[hasclass('add_to_cart_button')]" position="before">
         <div class="mb-1">
           <!-- FIXME TDE seems strange to redirect to /cart/update with get params when it only supports POST requests -->
diff --git a/addons/website_sale_wishlist/views/snippets.xml b/addons/website_sale_wishlist/views/snippets.xml
index 5ad61615cc5..9edec0b5d3b 100644
--- a/addons/website_sale_wishlist/views/snippets.xml
+++ b/addons/website_sale_wishlist/views/snippets.xml
@@ -12,6 +12,18 @@
                          data-reload="/"/>
         </div>
     </xpath>
+    <xpath expr="//we-button[hasclass('o_we_add_to_cart_btn')]" position="after">
+        <we-button title="Wishlist" class="fa fa-fw fa-heart"
+                   data-customize-website-views="website_sale_wishlist.add_to_wishlist"
+                   data-no-preview="true"
+                   data-reload="/"/>
+    </xpath>
+    <xpath expr="//we-button[hasclass('o_we_buy_now_btn')]" position="after">
+        <we-button title="Wishlist" class="fa fa-fw fa-heart"
+                   data-customize-website-views="website_sale_wishlist.product_add_to_wishlist"
+                   data-no-preview="true"
+                   data-reload="/"/>
+    </xpath>
 </template>
 
 </odoo>
diff --git a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
index 462614fafd2..d51d2fa03dd 100644
--- a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
+++ b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-    <template id="add_to_wishlist" inherit_id="website_sale.products_item" customize_show="True" name="Wishlist Button" priority="20">
+    <template id="add_to_wishlist" inherit_id="website_sale.products_item" name="Wishlist Button" priority="20">
         <xpath expr="//div[hasclass('o_wsale_product_btn')]" position="inside">
             <t t-nocache="The wishlist depends on the user and must not be shared with other users. As this rendering is in the loop, the product value is set in the template, we must retain the id of the product on which we are."
                t-nocache-product_template_id="product.id">
@@ -13,7 +13,7 @@
         </xpath>
     </template>
 
-    <template id="product_add_to_wishlist" inherit_id="website_sale.product" customize_show="True" name="Wishlist Button" priority="20">
+    <template id="product_add_to_wishlist" inherit_id="website_sale.product" name="Wishlist Button" priority="20">
         <xpath expr="//div[@id='product_option_block']" position="inside">
             <t t-nocache="The wishlist depends on the user and must not be shared with other users. The product come from the controller.">
                 <t t-set="product_variant" t-value="product_variant or product._create_first_product_variant()"/>

From 59e01b7a7618250448bf77e72e5e8ef89091380b Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Tue, 22 Feb 2022 15:16:02 +0100
Subject: [PATCH 31/88] [IMP] website_blog: adapt customize show options in
 blog pages

This commit adapts "customize show" options from the website blog module
by creating new options available in edit mode.

See merge commit for more information.

task-2710582
---
 .../website_blog/views/snippets/snippets.xml  | 126 ++++++++++++++++++
 .../views/website_blog_components.xml         |  16 +--
 .../views/website_blog_posts_loop.xml         |   8 +-
 .../views/website_blog_templates.xml          |  28 ++--
 4 files changed, 152 insertions(+), 26 deletions(-)

diff --git a/addons/website_blog/views/snippets/snippets.xml b/addons/website_blog/views/snippets/snippets.xml
index a1e427c5c76..d2d0f8a0ec2 100644
--- a/addons/website_blog/views/snippets/snippets.xml
+++ b/addons/website_blog/views/snippets/snippets.xml
@@ -17,6 +17,132 @@
                 data-set-tags=""
                 data-create-method="createTag"/>
         </div>
+        <!-- Blog Posts page  -->
+        <div data-selector="main:has(#o_wblog_index_content)" data-page-options="true" data-no-check="true" string="Blogs Page">
+            <we-select string="Top Banner" data-no-preview="true" data-reload="/">
+                <we-button data-customize-website-views="website_blog.opt_blog_cover_post"
+                    data-name="blog_cover_opt">Name / Latest Post</we-button>
+                <we-button data-customize-website-views="">Drop Zone for Building Blocks</we-button>
+            </we-select>
+            <we-checkbox string="⌙ Full-Width"
+                         data-customize-website-views="website_blog.opt_blog_cover_post_fullwidth_design"
+                         data-dependencies="blog_cover_opt"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-select string="Layout" data-no-preview="true" data-reload="/">
+                <we-button data-customize-website-views="">Grid</we-button>
+                <we-button data-customize-website-views="website_blog.opt_blog_list_view">List</we-button>
+            </we-select>
+            <we-checkbox string="⌙ Cards"
+                         data-customize-website-views="website_blog.opt_blog_cards_design"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Increase Readability"
+                         data-customize-website-views="website_blog.opt_blog_readable"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Sidebar"
+                         data-name="blog_posts_sidebar_opt"
+                         data-customize-website-views="website_blog.opt_blog_sidebar_show"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Archives"
+                         data-dependencies="blog_posts_sidebar_opt"
+                         data-customize-website-views="website_blog.opt_sidebar_blog_index_archives"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Follow us"
+                         data-dependencies="blog_posts_sidebar_opt"
+                         data-customize-website-views="website_blog.opt_sidebar_blog_index_follow_us"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Tags List"
+                         data-dependencies="blog_posts_sidebar_opt"
+                         data-customize-website-views="website_blog.opt_sidebar_blog_index_tags"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-select string="Posts List" data-no-preview="true" data-reload="/">
+                <we-button data-customize-website-views="">No Cover</we-button>
+                <we-button data-customize-website-views="website_blog.opt_posts_loop_show_cover">Cover</we-button>
+            </we-select>
+            <we-checkbox string="⌙ Author"
+                         data-customize-website-views="website_blog.opt_posts_loop_show_author"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Comments/Views Stats"
+                         data-customize-website-views="website_blog.opt_posts_loop_show_stats"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Teaser &amp; Tags"
+                         data-customize-website-views="website_blog.opt_posts_loop_show_teaser"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+        <!-- Blog Post page  -->
+        <div data-selector="main:has(#o_wblog_post_main)" data-page-options="true" data-no-check="true" string="Blog Page">
+            <we-select string="Layout" data-no-preview="true" data-reload="/">
+                <we-button data-customize-website-views="website_blog.opt_blog_post_regular_cover">Title Above Cover</we-button>
+                <we-button data-customize-website-views="">Title Inside Cover</we-button>
+            </we-select>
+            <we-checkbox string="⌙ Increase Readability"
+                         data-customize-website-views="website_blog.opt_blog_post_readable"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Sidebar"
+                         data-name="blog_post_sidebar_opt"
+                         data-customize-website-views="website_blog.opt_blog_post_sidebar"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Archive"
+                         data-dependencies="blog_post_sidebar_opt"
+                         data-customize-website-views="website_blog.opt_blog_post_archive_display"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Author"
+                         data-dependencies="blog_post_sidebar_opt"
+                         data-customize-website-views="website_blog.opt_blog_post_author_avatar_display"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Blogs List"
+                         data-dependencies="blog_post_sidebar_opt"
+                         data-customize-website-views="website_blog.opt_blog_post_blogs_display"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Share Links"
+                         data-dependencies="blog_post_sidebar_opt"
+                         data-customize-website-views="website_blog.opt_blog_post_share_links_display"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Tags"
+                         data-dependencies="blog_post_sidebar_opt"
+                         data-customize-website-views="website_blog.opt_blog_post_tags_display"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Breadcrumb"
+                         data-customize-website-views="website_blog.opt_blog_post_breadcrumb"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-row string="Bottom" class="o_we_full_row">
+                <we-button string="Next Article"
+                           data-customize-website-views="website_blog.opt_blog_post_read_next"
+                           data-no-preview="true"
+                           data-reload="/"/>
+                <we-button string="Comments"
+                           data-name="allow_comments_opt"
+                           data-customize-website-views="website_blog.opt_blog_post_comment"
+                           data-no-preview="true"
+                           data-reload="/"/>
+            </we-row>
+            <we-checkbox string="⌙ Select to Comment"
+                         data-dependencies="allow_comments_opt"
+                         data-customize-website-views="website_blog.opt_blog_post_select_to_comment"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Select to Tweet"
+                         data-customize-website-views="website_blog.opt_blog_post_select_to_tweet"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
     </xpath>
     <xpath expr="//*[@data-js='anchor']" position="attributes">
         <attribute name="data-exclude" add=".o_wblog_post_content_field > :not(div, section)" separator=","/>
diff --git a/addons/website_blog/views/website_blog_components.xml b/addons/website_blog/views/website_blog_components.xml
index bc6bc73c40a..58c3c27578b 100644
--- a/addons/website_blog/views/website_blog_components.xml
+++ b/addons/website_blog/views/website_blog_components.xml
@@ -122,7 +122,7 @@ Options:
 </template>
 
 <!-- (Option) Sidebar Blog: Follow Us -->
-<template id="opt_sidebar_blog_index_follow_us" name="Follow Us" priority="1" inherit_id="website_blog.sidebar_blog_index" active="True" customize_show="True">
+<template id="opt_sidebar_blog_index_follow_us" name="Follow Us" priority="1" inherit_id="website_blog.sidebar_blog_index" active="True">
     <xpath expr="//div[@id='o_wblog_sidebar']" position="inside">
         <div class="o_wblog_sidebar_block pb-5">
             <h6 class="text-uppercase pb-2 mb-4 border-bottom font-weight-bold">Follow Us</h6>
@@ -147,7 +147,7 @@ Options:
 </template>
 
 <!-- (Option) Sidebar Blog: Archives -->
-<template id="opt_sidebar_blog_index_archives" name="Archives" priority="2" inherit_id="website_blog.sidebar_blog_index" active="True" customize_show="True">
+<template id="opt_sidebar_blog_index_archives" name="Archives" priority="2" inherit_id="website_blog.sidebar_blog_index" active="True">
     <xpath expr="//div[@id='o_wblog_sidebar']" position="inside">
         <div class="o_wblog_sidebar_block pb-5">
             <h6 class="text-uppercase pb-2 mb-4 border-bottom font-weight-bold">Archives</h6>
@@ -159,7 +159,7 @@ Options:
 </template>
 
 <!-- (Option) Sidebar Blog: Show tags -->
-<template id="opt_sidebar_blog_index_tags" name="Tags List" priority="3" inherit_id="website_blog.sidebar_blog_index" active="True" customize_show="True">
+<template id="opt_sidebar_blog_index_tags" name="Tags List" priority="3" inherit_id="website_blog.sidebar_blog_index" active="True">
     <xpath expr="//div[@id='o_wblog_sidebar']" position="inside">
 
         <div t-if="other_tags or tag_category" class="o_wblog_sidebar_block pb-5">
@@ -201,7 +201,7 @@ Display a sidebar beside the post content.
 
 
 <!-- (Option) Post Sidebar: Author avatar -->
-<template id="opt_blog_post_author_avatar_display" name="Author" inherit_id="website_blog.blog_post_sidebar" active="True" customize_show="True" priority="1">
+<template id="opt_blog_post_author_avatar_display" name="Author" inherit_id="website_blog.blog_post_sidebar" active="True" priority="1">
     <xpath expr="//div[@id='o_wblog_post_sidebar']" position="inside">
         <div class="o_wblog_sidebar_block pb-5">
             <t t-call="website_blog.post_author">
@@ -213,7 +213,7 @@ Display a sidebar beside the post content.
 </template>
 
 <!-- (Option) Post Sidebar: Share Links Display -->
-<template id="opt_blog_post_share_links_display" name="Share Links" inherit_id="website_blog.blog_post_sidebar" active="True" customize_show="True" priority="2">
+<template id="opt_blog_post_share_links_display" name="Share Links" inherit_id="website_blog.blog_post_sidebar" active="True" priority="2">
     <xpath expr="//div[@id='o_wblog_post_sidebar']" position="inside">
         <div class="o_wblog_sidebar_block pb-5">
             <h6 class="text-uppercase pb-3 mb-4 border-bottom font-weight-bold">Share this post</h6>
@@ -231,7 +231,7 @@ Display a sidebar beside the post content.
 </template>
 
 <!-- (Option) Post Sidebar: display tags -->
-<template id="opt_blog_post_tags_display" name="Tags" inherit_id="website_blog.blog_post_sidebar" active="True" customize_show="True" priority="3">
+<template id="opt_blog_post_tags_display" name="Tags" inherit_id="website_blog.blog_post_sidebar" active="True" priority="3">
     <xpath expr="//div[@id='o_wblog_post_sidebar']" position="inside">
         <div class="o_wblog_sidebar_block pb-5">
             <h6 class="text-uppercase pb-3 mb-4 border-bottom font-weight-bold">Tags</h6>
@@ -255,7 +255,7 @@ Display a sidebar beside the post content.
 </template>
 
 <!-- (Option) Post Sidebar: display Blogs list -->
-<template id="opt_blog_post_blogs_display" name="Blogs List" inherit_id="website_blog.blog_post_sidebar" active="True" customize_show="True" priority="4">
+<template id="opt_blog_post_blogs_display" name="Blogs List" inherit_id="website_blog.blog_post_sidebar" active="True" priority="4">
     <xpath expr="//div[@id='o_wblog_post_sidebar']" position="inside">
         <div t-if="len(blogs) > 1" class="o_wblog_sidebar_block pb-5">
             <h6 class="text-uppercase pb-3 mb-4 border-bottom font-weight-bold">Our blogs</h6>
@@ -270,7 +270,7 @@ Display a sidebar beside the post content.
 </template>
 
 <!-- (Option) Post Sidebar: display Archive -->
-<template id="opt_blog_post_archive_display" name="Archive" inherit_id="website_blog.blog_post_sidebar" active="True" customize_show="True" priority="5">
+<template id="opt_blog_post_archive_display" name="Archive" inherit_id="website_blog.blog_post_sidebar" active="True" priority="5">
     <xpath expr="//div[@id='o_wblog_post_sidebar']" position="inside">
         <div class="o_wblog_sidebar_block pb-5">
             <h6 class="text-uppercase pb-3 mb-4 border-bottom font-weight-bold">Archive</h6>
diff --git a/addons/website_blog/views/website_blog_posts_loop.xml b/addons/website_blog/views/website_blog_posts_loop.xml
index 2f6b1f4fbaf..149694186d4 100644
--- a/addons/website_blog/views/website_blog_posts_loop.xml
+++ b/addons/website_blog/views/website_blog_posts_loop.xml
@@ -223,15 +223,15 @@ according to the enabled options.
 <!--   ======================      OPTIONS      ===========================  -->
 <!--   ====================================================================  -->
 <!-- (Option) Posts List: Show Covers -->
-<template id="opt_posts_loop_show_cover" name="Cover" inherit_id="website_blog.posts_loop" active="True" customize_show="True"/>
+<template id="opt_posts_loop_show_cover" name="Cover" inherit_id="website_blog.posts_loop" active="True"/>
 
 <!-- (Option) Posts List: Show Author -->
-<template id="opt_posts_loop_show_author" name="Author" inherit_id="website_blog.posts_loop" active="True" customize_show="True"/>
+<template id="opt_posts_loop_show_author" name="Author" inherit_id="website_blog.posts_loop" active="True"/>
 
 <!-- (Option) Posts List: Show Post Stats -->
-<template id="opt_posts_loop_show_stats" name="Comments/Views Stats" inherit_id="website_blog.posts_loop" active="False" customize_show="True"/>
+<template id="opt_posts_loop_show_stats" name="Comments/Views Stats" inherit_id="website_blog.posts_loop" active="False"/>
 
 <!-- (Option) Posts List: Show Post Teaser -->
-<template id="opt_posts_loop_show_teaser" name="Teaser &amp; Tags" inherit_id="website_blog.posts_loop" active="True" customize_show="True"/>
+<template id="opt_posts_loop_show_teaser" name="Teaser &amp; Tags" inherit_id="website_blog.posts_loop" active="True"/>
 
 </odoo>
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 95edd3f7d08..a91e11cd37c 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -92,7 +92,7 @@ list of filtered posts (by date or tag).
 <!-- (Option) Blog: Show latest-post as top banner
     Replace top-banner content with the latest published post
 -->
-<template id="opt_blog_cover_post" name="Top banner - Name / Latest Post" inherit_id="website_blog.blog_post_short" active="True" customize_show="True">
+<template id="opt_blog_cover_post" name="Top banner - Name / Latest Post" inherit_id="website_blog.blog_post_short" active="True">
     <xpath expr="//div[@id='o_wblog_blog_top_droppable']" position="replace">
         <div t-if="first_post or blog" class="container">
             <div class="row py-4">
@@ -135,7 +135,7 @@ list of filtered posts (by date or tag).
 </template>
 
 <!-- (Option) Blog: Show latest-post as top banner : 'Full Width' design -->
-<template id="opt_blog_cover_post_fullwidth_design" name="Full-Width Cover" inherit_id="website_blog.opt_blog_cover_post" active="True" customize_show="True">
+<template id="opt_blog_cover_post_fullwidth_design" name="Full-Width Cover" inherit_id="website_blog.opt_blog_cover_post" active="True">
     <xpath expr="//div[hasclass('container')]" position="replace">
         <t t-if="blog or first_post" t-call="website.record_cover">
             <t t-set="_record" t-value="blog or first_post"/>
@@ -169,7 +169,7 @@ list of filtered posts (by date or tag).
 
 
 <!-- (Option) Blog: Sidebar : Show -->
-<template id="opt_blog_sidebar_show" name="Show Sidebar" inherit_id="website_blog.blog_post_short" active="False" customize_show="True">
+<template id="opt_blog_sidebar_show" name="Show Sidebar" inherit_id="website_blog.blog_post_short" active="False">
     <xpath expr="//div[@id='o_wblog_posts_loop_container']" position="after">
         <div t-if="opt_blog_list_view" class="border-right d-none d-lg-block" style="opacity: 0.5"/>
         <div t-attf-class="col-12 col-md-3 d-flex #{opt_blog_list_view and 'col-lg-4' or 'ml-lg-5'}">
@@ -181,18 +181,18 @@ list of filtered posts (by date or tag).
 <!-- (Option) Blog: Posts List: Cards design
     Wrap posts in a standard bts cards components
 -->
-<template id="opt_blog_cards_design" name="'Cards' Design" inherit_id="website_blog.blog_post_short" active="False" customize_show="True"/>
+<template id="opt_blog_cards_design" name="'Cards' Design" inherit_id="website_blog.blog_post_short" active="False"/>
 
 
 <!-- (Option) Blog: Show Posts in list-view
     Display post in a list rather than a grid
 -->
-<template id="opt_blog_list_view" name="List View" inherit_id="website_blog.blog_post_short" active="False" customize_show="True"/>
+<template id="opt_blog_list_view" name="List View" inherit_id="website_blog.blog_post_short" active="False"/>
 
 <!-- (Option) Blog: Increase readability
     Increase font-size, adapt layout
 -->
-<template id="opt_blog_readable" name="Increase Readability" inherit_id="website_blog.blog_post_short" active="True" customize_show="True"/>
+<template id="opt_blog_readable" name="Increase Readability" inherit_id="website_blog.blog_post_short" active="True"/>
 
 
 <!-- ====== Blog Post Complete Layout ==========================================
@@ -284,17 +284,17 @@ list of filtered posts (by date or tag).
 <!-- (Option) Post: Increase readability
     Increase font-size, adapt content width
 -->
-<template id="opt_blog_post_readable" name="Increase Readability" inherit_id="website_blog.blog_post_complete" active="True" customize_show="True"/>
+<template id="opt_blog_post_readable" name="Increase Readability" inherit_id="website_blog.blog_post_complete" active="True"/>
 
 <!-- (Option) Post: Show Sidebar
     Show sidebar beside the post content
 -->
-<template id="opt_blog_post_sidebar" name="Show Sidebar" inherit_id="website_blog.blog_post_complete" active="False" customize_show="True"/>
+<template id="opt_blog_post_sidebar" name="Show Sidebar" inherit_id="website_blog.blog_post_complete" active="False"/>
 
 <!-- (Option) Post: Regular Cover
     Use 'regular cover' design rather than the fullwidth one
 -->
-<template id="opt_blog_post_regular_cover" name="'Regular' Cover" inherit_id="website_blog.blog_post_complete" active="False" customize_show="True">
+<template id="opt_blog_post_regular_cover" name="'Regular' Cover" inherit_id="website_blog.blog_post_complete" active="False">
     <xpath expr="//div[@id='title']" position="replace">
         <div class="container">
             <t t-set="readableClass" t-if="opt_blog_post_readable and opt_blog_post_sidebar" t-value="'o_wblog_read_with_sidebar mx-auto'"/>
@@ -345,17 +345,17 @@ list of filtered posts (by date or tag).
 <!-- (Option) Post: Show Breadcrumb
     Display navigation breadcrumbs before the post content
 -->
-<template id="opt_blog_post_breadcrumb" name="Show Breadcrumb" inherit_id="website_blog.blog_post_complete" active="True" customize_show="True"/>
+<template id="opt_blog_post_breadcrumb" name="Show Breadcrumb" inherit_id="website_blog.blog_post_complete" active="True"/>
 
 <!-- (Option) Post: Select text to Tweet
     Allow to select text to tweet it
 -->
-<template id="opt_blog_post_select_to_tweet" name="Select to Tweet" inherit_id="website_blog.blog_post_complete" active="False" customize_show="True"/>
+<template id="opt_blog_post_select_to_tweet" name="Select to Tweet" inherit_id="website_blog.blog_post_complete" active="False"/>
 
 <!-- (Option) Post: Comments
     Enable comments
 -->
-<template id="opt_blog_post_comment" name="Allow Comments" inherit_id="website_blog.blog_post_complete" active="False" customize_show="True">
+<template id="opt_blog_post_comment" name="Allow Comments" inherit_id="website_blog.blog_post_complete" active="False">
     <xpath expr="//section[@id='o_wblog_post_main']" position="inside">
         <t t-set="readableClass" t-if="opt_blog_post_readable and opt_blog_post_sidebar" t-value="'o_wblog_read_with_sidebar'"/>
         <t t-set="readableClass" t-elif="opt_blog_post_readable" t-value="'o_container_small'"/>
@@ -378,12 +378,12 @@ list of filtered posts (by date or tag).
 <!-- (Option) Post: Comments: Select text to Comment
     Allow to select text to comment it
 -->
-<template id="opt_blog_post_select_to_comment" name="Select to Comment" inherit_id="website_blog.opt_blog_post_comment" active="False" customize_show="True"/>
+<template id="opt_blog_post_select_to_comment" name="Select to Comment" inherit_id="website_blog.opt_blog_post_comment" active="False"/>
 
 <!-- (Option) Post : Read Next Article
     Show 'read next' banner at the bottom of the page
 -->
-<template id="opt_blog_post_read_next" name="Read Next Article" inherit_id="website_blog.blog_post_complete" active="True" customize_show="True">
+<template id="opt_blog_post_read_next" name="Read Next Article" inherit_id="website_blog.blog_post_complete" active="True">
     <xpath expr="//section[@id='o_wblog_post_footer']" position="inside">
         <div t-if="next_post" class="mt-5">
             <t t-if="opt_blog_post_regular_cover">

From 92287ef450593c9ba3604bba3232d9dd9bc23e54 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Mon, 7 Mar 2022 12:50:49 +0100
Subject: [PATCH 32/88] [IMP] website_event, *: adapt customize show options in
 event pages

*: website_event_exhibitor, website_event_track

This commit adapts "customize show" options from website event modules
by creating new options available in edit mode.

See merge commit for more information.

task-2710582
---
 .../views/event_templates_list.xml            | 20 +++---
 .../event_templates_page_registration.xml     |  2 +-
 .../website_event/views/snippets/snippets.xml | 62 +++++++++++++++++++
 .../website_event_exhibitor/__manifest__.py   |  1 +
 .../views/event_exhibitor_templates_list.xml  |  6 +-
 .../views/event_templates_sponsor.xml         |  2 +-
 .../views/snippets.xml                        | 27 ++++++++
 addons/website_event_track/__manifest__.py    |  1 +
 .../views/event_track_templates_agenda.xml    |  3 +-
 .../views/event_track_templates_list.xml      |  6 +-
 addons/website_event_track/views/snippets.xml | 25 ++++++++
 11 files changed, 133 insertions(+), 22 deletions(-)
 create mode 100644 addons/website_event_exhibitor/views/snippets.xml
 create mode 100644 addons/website_event_track/views/snippets.xml

diff --git a/addons/website_event/views/event_templates_list.xml b/addons/website_event/views/event_templates_list.xml
index ad3228cd50b..273c8dc517f 100644
--- a/addons/website_event/views/event_templates_list.xml
+++ b/addons/website_event/views/event_templates_list.xml
@@ -37,7 +37,7 @@
 </template>
 
 <!-- Index - OPTION - Sidebar -->
-<template id="opt_index_sidebar" inherit_id="website_event.index" active="False" customize_show="True" name="Show Sidebar">
+<template id="opt_index_sidebar" inherit_id="website_event.index" active="False" name="Show Sidebar">
     <xpath expr="//div[@id='o_wevent_index_main_col']" position="after">
         <t t-call="website_event.index_sidebar"/>
     </xpath>
@@ -89,7 +89,7 @@
 </template>
 
 <!-- Filter - Date -->
-<template id="event_time" inherit_id="website_event.index_topbar" customize_show="True" name="Filter by Date">
+<template id="event_time" inherit_id="website_event.index_topbar" name="Filter by Date">
     <xpath expr="//ul[hasclass('o_wevent_index_topbar_filters')]" position="inside">
         <li class="nav-item dropdown mr-2 my-1">
             <a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
@@ -112,7 +112,7 @@
 </template>
 
 <!-- Filter - Location -->
-<template id="event_location" inherit_id="website_event.index_topbar" active="False" customize_show="True" name="Filter by Country">
+<template id="event_location" inherit_id="website_event.index_topbar" active="False" name="Filter by Country">
     <xpath expr="//ul[hasclass('o_wevent_index_topbar_filters')]" position="inside">
         <li class="nav-item dropdown mr-2 my-1">
             <a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
@@ -244,11 +244,11 @@
     </div>
 </template>
 
-<template id="opt_events_list_columns" inherit_id="website_event.events_list" active="True" customize_show="True" name="Layout • Columns"/>
+<template id="opt_events_list_columns" inherit_id="website_event.events_list" active="True" name="Layout • Columns"/>
 
-<template id="opt_events_list_cards" inherit_id="website_event.events_list" active="True" customize_show="True" name="'Cards' Design"/>
+<template id="opt_events_list_cards" inherit_id="website_event.events_list" active="True" name="'Cards' Design"/>
 
-<template id="opt_events_list_categories" inherit_id="website_event.events_list" active="False" customize_show="True" name="Show Templates">
+<template id="opt_events_list_categories" inherit_id="website_event.events_list" active="False" name="Show Templates">
     <xpath expr="//main/*" position="before">
         <span t-if="event.event_type_id" t-attf-href="/event?type=#{event.event_type_id.id}" t-attf-class="badge bg-secondary o_wevent_badge #{opt_events_list_columns and 'o_wevent_badge_event' or 'float-right'}" t-field="event.event_type_id"/>
     </xpath>
@@ -260,7 +260,7 @@
 </template>
 
 <!-- Index - Sidebar - About us -->
-<template id="index_sidebar_about_us" inherit_id="website_event.index_sidebar" active="True" customize_show="True" name="About us" priority="20">
+<template id="index_sidebar_about_us" inherit_id="website_event.index_sidebar" active="True" name="About us" priority="20">
     <xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
         <div class="o_wevent_sidebar_block">
             <h6 class="o_wevent_sidebar_title">About us</h6>
@@ -271,7 +271,7 @@
 </template>
 
 <!-- Index - Sidebar - Follow us -->
-<template id="index_sidebar_follow_us" inherit_id="website_event.index_sidebar" active="False" customize_show="True" name="Follow us" priority="30">
+<template id="index_sidebar_follow_us" inherit_id="website_event.index_sidebar" active="False" name="Follow us" priority="30">
     <xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
         <div class="o_wevent_sidebar_block">
             <h6 class="o_wevent_sidebar_title">Follow Us</h6>
@@ -289,7 +289,7 @@
 </template>
 
 <!-- Index - Sidebar - Photos -->
-<template id="index_sidebar_photos" inherit_id="website_event.index_sidebar" active="True" customize_show="True" name="Photos" priority="40">
+<template id="index_sidebar_photos" inherit_id="website_event.index_sidebar" active="True" name="Photos" priority="40">
     <xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
         <h6 class="o_wevent_sidebar_title">Photos</h6>
         <a href="/event">
@@ -308,7 +308,7 @@
 </template>
 
 <!-- Index - Sidebar - Quotes -->
-<template id="index_sidebar_quotes" inherit_id="website_event.index_sidebar" active="True" customize_show="True" name="Quotes" priority="60">
+<template id="index_sidebar_quotes" inherit_id="website_event.index_sidebar" active="True" name="Quotes" priority="60">
     <xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
         <div class="o_wevent_sidebar_block card">
             <div class="card-body">
diff --git a/addons/website_event/views/event_templates_page_registration.xml b/addons/website_event/views/event_templates_page_registration.xml
index b38416bfaa0..a4f38d269cd 100644
--- a/addons/website_event/views/event_templates_page_registration.xml
+++ b/addons/website_event/views/event_templates_page_registration.xml
@@ -420,7 +420,7 @@
 </template>
 
 <!-- This template is called whenever the "Fold Ticket Details" option is checked on the website (Customize > Fold Tickets Details) -->
-<template id="fold_register_details" inherit_id="website_event.registration_template" active="False" customize_show="True" name="Fold ticket details">
+<template id="fold_register_details" inherit_id="website_event.registration_template" active="False" name="Fold ticket details">
     <xpath expr="//div[@id='o_wevent_tickets']" position="attributes">
         <attribute name="data-folded-by-default">1</attribute>
     </xpath>
diff --git a/addons/website_event/views/snippets/snippets.xml b/addons/website_event/views/snippets/snippets.xml
index aa8b2fe801c..db7df32ba62 100644
--- a/addons/website_event/views/snippets/snippets.xml
+++ b/addons/website_event/views/snippets/snippets.xml
@@ -11,4 +11,66 @@
     </xpath>
 </template>
 
+<template id="snippet_options" inherit_id="website.snippet_options" name="Event snippet options">
+    <xpath expr="." position="inside">
+        <!-- Events page  -->
+        <div data-selector="main:has(.o_wevent_events_list)" data-page-options="true" data-no-check="true" string="Events Page">
+            <we-select string="Layout" data-no-preview="true" data-reload="/">
+                <we-button data-customize-website-views="website_event.opt_events_list_columns">Grid</we-button>
+                <we-button data-customize-website-views="">List</we-button>
+            </we-select>
+            <we-checkbox string="⌙ Cards"
+                         data-customize-website-views="website_event.opt_events_list_cards"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Templates"
+                         data-customize-website-views="website_event.opt_events_list_categories"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-row string="Top Bar Filter" class="o_we_full_row">
+                <we-button string="Date"
+                           data-customize-website-views="website_event.event_time"
+                           data-no-preview="true"
+                           data-reload="/"/>
+                <we-button string="Countries"
+                           data-customize-website-views="website_event.event_location"
+                           data-no-preview="true"
+                           data-reload="/"/>
+            </we-row>
+            <we-checkbox string="Sidebar"
+                         data-name="events_sidebar_opt"
+                         data-customize-website-views="website_event.opt_index_sidebar"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ About Us"
+                         data-dependencies="events_sidebar_opt"
+                         data-customize-website-views="website_event.index_sidebar_about_us"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Follow Us"
+                         data-dependencies="events_sidebar_opt"
+                         data-customize-website-views="website_event.index_sidebar_follow_us"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Photos"
+                         data-dependencies="events_sidebar_opt"
+                         data-customize-website-views="website_event.index_sidebar_photos"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Quotes"
+                         data-dependencies="events_sidebar_opt"
+                         data-customize-website-views="website_event.index_sidebar_quotes"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+        <!-- Event page  -->
+        <div data-selector="main:has(.o_wevent_event_title)" data-page-options="true" data-no-check="true" string="Event Page">
+            <we-checkbox string="Fold Tickets Details"
+                         data-customize-website-views="website_event.fold_register_details"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+    </xpath>
+</template>
+
 </odoo>
diff --git a/addons/website_event_exhibitor/__manifest__.py b/addons/website_event_exhibitor/__manifest__.py
index 34bdf7de0e9..3192d1b1474 100644
--- a/addons/website_event_exhibitor/__manifest__.py
+++ b/addons/website_event_exhibitor/__manifest__.py
@@ -24,6 +24,7 @@
         'views/event_exhibitor_templates_page.xml',
         'views/event_type_views.xml',
         'views/event_menus.xml',
+        'views/snippets.xml',
     ],
     'demo': [
         'data/event_demo.xml',
diff --git a/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml b/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
index ae68feb252f..995f01b818c 100644
--- a/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
+++ b/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
@@ -53,8 +53,7 @@
 <template id="exhibitors_topbar_country"
     inherit_id="website_event_exhibitor.exhibitors_topbar"
     name="Filter by Country"
-    active="True"
-    customize_show="True">
+    active="True">
     <xpath expr="//ul[hasclass('o_wesponsor_topbar_filters')]" position="inside">
         <li class="nav-item dropdown mr-2 my-1">
             <a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
@@ -82,8 +81,7 @@
 <template id="exhibitors_topbar_sponsorship"
     inherit_id="website_event_exhibitor.exhibitors_topbar"
     name="Filter by Sponsorship"
-    active="True"
-    customize_show="True">
+    active="True">
     <xpath expr="//ul[hasclass('o_wesponsor_topbar_filters')]" position="inside">
         <li class="nav-item dropdown mr-2 my-1">
             <a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
diff --git a/addons/website_event_exhibitor/views/event_templates_sponsor.xml b/addons/website_event_exhibitor/views/event_templates_sponsor.xml
index 4bef62b9f2d..b67fd1db6fb 100644
--- a/addons/website_event_exhibitor/views/event_templates_sponsor.xml
+++ b/addons/website_event_exhibitor/views/event_templates_sponsor.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template name="Sponsors" id="event_sponsor" customize_show="True" inherit_id="website_event.layout">
+<template name="Sponsors" id="event_sponsor" inherit_id="website_event.layout">
     <xpath expr="//div[@id='wrap']" position="inside">
         <section class="o_wevent_sponsor_wrapper d-none d-md-block d-print-none mt-auto">
             <div class="container pt32 pb16" t-if="event.sponsor_ids">
diff --git a/addons/website_event_exhibitor/views/snippets.xml b/addons/website_event_exhibitor/views/snippets.xml
new file mode 100644
index 00000000000..5159d9d095e
--- /dev/null
+++ b/addons/website_event_exhibitor/views/snippets.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="snippet_options" inherit_id="website.snippet_options" name="Event exhibitor snippet options">
+    <xpath expr="." position="inside">
+        <div data-selector="main:has(nav .o_wevent_event_tags_form)" data-page-options="true" data-no-check="true" string="Event Page">
+            <we-row string="Top Bar Filter" class="o_we_full_row">
+                <we-button string="Sponsorship"
+                           data-customize-website-views="website_event_exhibitor.exhibitors_topbar_sponsorship"
+                           data-no-preview="true"
+                           data-reload="/"/>
+                <we-button string="Countries"
+                           data-customize-website-views="website_event_exhibitor.exhibitors_topbar_country"
+                           data-no-preview="true"
+                           data-reload="/"/>
+            </we-row>
+        </div>
+        <div data-selector="main:has(.o_wevent_event)" data-page-options="true" data-no-check="true" string="Event Page">
+            <we-checkbox string="Sponsors"
+                         data-customize-website-views="website_event_exhibitor.event_sponsor"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website_event_track/__manifest__.py b/addons/website_event_track/__manifest__.py
index c014529ed28..c21039525d1 100644
--- a/addons/website_event_track/__manifest__.py
+++ b/addons/website_event_track/__manifest__.py
@@ -31,6 +31,7 @@
         'views/res_config_settings_view.xml',
         'views/website_visitor_views.xml',
         'views/event_menus.xml',
+        'views/snippets.xml',
     ],
     'demo': [
         'data/event_demo.xml',
diff --git a/addons/website_event_track/views/event_track_templates_agenda.xml b/addons/website_event_track/views/event_track_templates_agenda.xml
index 799ee8de6eb..f580cbcf259 100644
--- a/addons/website_event_track/views/event_track_templates_agenda.xml
+++ b/addons/website_event_track/views/event_track_templates_agenda.xml
@@ -47,8 +47,7 @@
 <template id="agenda_topbar_wishlist"
     inherit_id="website_event_track.agenda_topbar"
     name="Allow Wishlists"
-    active="True"
-    customize_show="True">
+    active="True">
     <xpath expr="//ul[hasclass('o_weagenda_topbar_filters')]" position="inside">
     </xpath>
 </template>
diff --git a/addons/website_event_track/views/event_track_templates_list.xml b/addons/website_event_track/views/event_track_templates_list.xml
index 977fe236d5b..86b3c1ef1cd 100644
--- a/addons/website_event_track/views/event_track_templates_list.xml
+++ b/addons/website_event_track/views/event_track_templates_list.xml
@@ -74,8 +74,7 @@
 <template id="session_topbar_tag"
     inherit_id="website_event_track.session_topbar"
     name="Filter by Tags"
-    active="True"
-    customize_show="True">
+    active="True">
     <xpath expr="//ul[hasclass('o_wesession_topbar_filters')]" position="inside">
         <t t-foreach="tag_categories" t-as="tag_category">
             <li t-if="tag_category.tag_ids and any(tag.color for tag in tag_category.tag_ids)" class="nav-item dropdown mr-2 my-1">
@@ -104,8 +103,7 @@
 <template id="session_topbar_wishlist"
     inherit_id="website_event_track.session_topbar"
     name="Allow Wishlists"
-    active="True"
-    customize_show="True">
+    active="True">
     <xpath expr="//ul[hasclass('o_wesession_topbar_filters')]" position="inside">
     </xpath>
 </template>
diff --git a/addons/website_event_track/views/snippets.xml b/addons/website_event_track/views/snippets.xml
new file mode 100644
index 00000000000..9960949afe7
--- /dev/null
+++ b/addons/website_event_track/views/snippets.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="snippet_options" inherit_id="website.snippet_options" name="Event track snippet options">
+    <xpath expr="." position="inside">
+        <div data-selector="main:has(.o_weagenda_topbar_filters)" data-page-options="true" data-no-check="true" string="Event Page">
+            <we-checkbox string="Wishlists"
+                         data-customize-website-views="website_event_track.agenda_topbar_wishlist"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+        <div data-selector="main:has(.o_wesession_index)" data-page-options="true" data-no-check="true" string="Event Page">
+            <we-checkbox string="Wishlists"
+                         data-customize-website-views="website_event_track.session_topbar_wishlist"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Filter by Tags"
+                         data-customize-website-views="website_event_track.session_topbar_tag"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+    </xpath>
+</template>
+
+</odoo>

From d8db21f947f5cc3134b8752438fd1b9d14b68669 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Thu, 23 Jun 2022 22:51:17 +0200
Subject: [PATCH 33/88] [MOV] website_event_meet: move editor option file

As the first commit of the merge of this work at [1], this moves files
without modifying them to preserve code history and ease forward-ports.

As this was about static XML being converted into python XML, it was
not done in the first commit but just before the relevant commit.

See merge commit for more information.

task-2687506
---
 .../{static/src/xml/customize_options.xml => views/snippets.xml}  | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename addons/website_event_meet/{static/src/xml/customize_options.xml => views/snippets.xml} (100%)

diff --git a/addons/website_event_meet/static/src/xml/customize_options.xml b/addons/website_event_meet/views/snippets.xml
similarity index 100%
rename from addons/website_event_meet/static/src/xml/customize_options.xml
rename to addons/website_event_meet/views/snippets.xml

From 208612b173b22d9a5a9dd356654db2b8c88db888 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Thu, 10 Mar 2022 09:05:30 +0100
Subject: [PATCH 34/88] [IMP] website_event, *: move specific options to edit
 mode

*: website_event_meet

This commit adapts "customize show" options from website event modules
by creating new options available in edit mode. These "customize show"
options used custo JS code which was adapted to work with the global
options system.

See merge commit for more information.

task-2710582
---
 addons/website_event/__manifest__.py          |   2 +-
 .../static/src/snippets/options.js            | 141 ++++++------------
 .../static/src/xml/customize_options.xml      |  13 --
 .../website_event/views/snippets/snippets.xml |   6 +
 addons/website_event_meet/__manifest__.py     |   5 +-
 .../static/src/js/snippets/options.js         |  78 +++-------
 addons/website_event_meet/views/snippets.xml  |  27 ++--
 7 files changed, 94 insertions(+), 178 deletions(-)
 delete mode 100644 addons/website_event/static/src/xml/customize_options.xml

diff --git a/addons/website_event/__manifest__.py b/addons/website_event/__manifest__.py
index 52998d71b26..ec81929d09c 100644
--- a/addons/website_event/__manifest__.py
+++ b/addons/website_event/__manifest__.py
@@ -59,10 +59,10 @@
             'website_event/static/src/js/register_toaster_widget.js',
             'website_event/static/src/js/website_event.js',
             'website_event/static/src/js/website_event_ticket_details.js',
-            'website_event/static/src/snippets/options.js',
         ],
         'website.assets_wysiwyg': [
             '/website_event/static/src/snippets/s_events/options.js',
+            'website_event/static/src/snippets/options.js',
         ],
         'web.assets_backend': [
             'website_event/static/src/js/systray_items/*.js',
diff --git a/addons/website_event/static/src/snippets/options.js b/addons/website_event/static/src/snippets/options.js
index 79b57c7c695..83c57b69d7e 100644
--- a/addons/website_event/static/src/snippets/options.js
+++ b/addons/website_event/static/src/snippets/options.js
@@ -1,129 +1,76 @@
-odoo.define('website_event.set_customize_options', function (require) {
-"use strict";
+/** @odoo-module **/
 
-var CustomizeMenu = require('website.customizeMenu');
-var publicWidget = require('web.public.widget');
+import options from 'web_editor.snippets.options';
 
-var EventSpecificOptions = publicWidget.Widget.extend({
-    template: 'website_event.customize_options',
-    xmlDependencies: ['/website_event/static/src/xml/customize_options.xml'],
-    events: {
-        'change #display-website-menu': '_onDisplaySubmenuChange',
-    },
+options.registry.WebsiteEvent = options.Class.extend({
 
     /**
      * @override
      */
-    start: function () {
-        this.$submenuInput = this.$('#display-website-menu');
-        this.modelName = this._getEventObject().model;
-        this.eventId = this._getEventObject().id;
-        this._initCheckbox();
+    start() {
+        const eventObject = this._getEventObject();
+        this.modelName = eventObject.model;
+        this.eventId = eventObject.id;
+        return this._super(...arguments);
     },
 
     //--------------------------------------------------------------------------
-    // Handlers
+    // Options
     //--------------------------------------------------------------------------
 
-    _onDisplaySubmenuChange: function (ev) {
-        var checkboxValue = this.$submenuInput.is(':checked');
-        this._toggleSubmenuDisplay(checkboxValue);
+    /**
+     * @see this.selectClass for parameters
+     */
+    displaySubmenu(previewMode, widgetValue, params) {
+        this._rpc({
+            model: this.modelName,
+            method: 'toggle_website_menu',
+            args: [[this.eventId], widgetValue],
+        }).then(() => this.trigger_up('reload_editable', {option_selector: this.data.selector}));
+        // TODO: if widgetValue is false, it should reload on the event url
+        // page ('website_url' field).
     },
 
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
-    _getCheckboxFields: function () {
-        return ['website_menu', 'website_url'];
-    },
-
-    _getCheckboxFieldMatch: function (checkboxField) {
-        if (checkboxField === 'website_menu') {
-            return this.$submenuInput;
+    /**
+     * @override
+     */
+    async _computeWidgetState(methodName, params) {
+        switch (methodName) {
+            case 'displaySubmenu': {
+                return this._getRpcData('website_menu');
+            }
         }
+        return this._super(...arguments);
     },
-
-    _getEventObject: function() {
-        var repr = $('html').data('main-object');
-        var m = repr.match(/(.+)\((\d+),(.*)\)/);
+    /**
+     * @private
+     */
+    _getEventObject() {
+        const repr = this.ownerDocument.documentElement.dataset.mainObject;
+        const m = repr.match(/(.+)\((\d+),(.*)\)/);
         return {
             model: m[1],
             id: m[2] | 0,
         };
     },
-
-    _initCheckbox: function () {
-        var self = this;
-        this._rpc({
+    /**
+     * @private
+     * @param {string}
+     * @returns {boolean}
+     */
+    async _getRpcData(field) {
+        const data = await this._rpc({
             model: this.modelName,
             method: 'read',
             args: [
                 [this.eventId],
-                this._getCheckboxFields()
+                [field],
             ],
-        }).then((data) => {
-            self._initCheckboxCallback(data);
-        });
-    },
-
-    _initCheckboxCallback: function (rpcData) {
-        if (rpcData[0]['website_menu']) {
-            var submenuInput = this._getCheckboxFieldMatch('website_menu');
-            submenuInput.attr('checked', 'checked');
-        }
-        this.eventUrl = rpcData[0]['website_url'];
-    },
-
-    _reloadEventPage: function () {
-        window.location = this.eventUrl;
-    },
-
-    _toggleSubmenuDisplay: function (val) {
-        var self = this;
-        this._rpc({
-            model: this.modelName,
-            method: 'toggle_website_menu',
-            args: [[this.eventId], val],
-        }).then(function () {
-            self._reloadEventPage();
-        });
-    },
-
-});
-
-CustomizeMenu.include({
-    _getEventObject: function() {
-        var repr = $('html').data('main-object');
-        var m = repr.match(/(.+)\((\d+),(.*)\)/);
-        return {
-            model: m[1],
-            id: m[2] | 0,
-        };
-    },
-
-    _loadCustomizeOptions: function () {
-        var self = this;
-        var def = this._super.apply(this, arguments);
-        return def.then(function () {
-            if (!self.__eventOptionsLoaded && self._getEventObject().model === 'event.event') {
-                self.__eventOptionsLoaded = true;
-                self.eventOptions = new EventSpecificOptions(self);
-                // If this is the first customize menu, add the divider at top
-                if (!self.$('.dropdown-divider').length) {
-                    self.$('.dropdown-menu').append($('<div/>', {
-                        class: 'dropdown-divider',
-                        role: 'separator',
-                    }));
-                }
-                self.eventOptions.insertAfter(self.$el.find('.dropdown-divider:first()'));
-            }
         });
+        return data[0][field];
     },
 });
-
-return {
-    EventSpecificOptions: EventSpecificOptions,
-};
-
-});
diff --git a/addons/website_event/static/src/xml/customize_options.xml b/addons/website_event/static/src/xml/customize_options.xml
deleted file mode 100644
index 53b835c7f1a..00000000000
--- a/addons/website_event/static/src/xml/customize_options.xml
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<templates xml:space="preserve">
-
-    <t t-name="website_event.customize_options" id="event_options">
-        <li class="dropdown-header">Event Specific</li>
-        <label class="o_switch dropdown-item m-0" name="display-website-menu" for="display-website-menu">
-            <input id="display-website-menu" type="checkbox"/>
-            <span/>
-            Event Sub-menu
-        </label>
-    </t>
-
-</templates>
diff --git a/addons/website_event/views/snippets/snippets.xml b/addons/website_event/views/snippets/snippets.xml
index db7df32ba62..a953d502ca4 100644
--- a/addons/website_event/views/snippets/snippets.xml
+++ b/addons/website_event/views/snippets/snippets.xml
@@ -70,6 +70,12 @@
                          data-no-preview="true"
                          data-reload="/"/>
         </div>
+        <div data-js="WebsiteEvent" data-selector="main:has(.o_wevent_event)" data-page-options="true" data-no-check="true" string="Event Page">
+            <we-checkbox string="Sub-menu (Specific)"
+                         data-display-submenu="true"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
     </xpath>
 </template>
 
diff --git a/addons/website_event_meet/__manifest__.py b/addons/website_event_meet/__manifest__.py
index 7e0c6758dee..c7a36646d83 100644
--- a/addons/website_event_meet/__manifest__.py
+++ b/addons/website_event_meet/__manifest__.py
@@ -21,15 +21,18 @@
         'views/event_meeting_room_views.xml',
         'views/event_event_views.xml',
         'views/event_type_views.xml',
+        'views/snippets.xml',
     ],
     'installable': True,
     'assets': {
         'web.assets_frontend': [
             'website_event_meet/static/src/scss/event_meet_templates.scss',
-            'website_event_meet/static/src/js/snippets/options.js',
             'website_event_meet/static/src/js/website_event_meeting_room.js',
             'website_event_meet/static/src/js/website_event_create_meeting_room_button.js',
         ],
+        'website.assets_wysiwyg': [
+            'website_event_meet/static/src/js/snippets/options.js',
+        ],
     },
     'license': 'LGPL-3',
 }
diff --git a/addons/website_event_meet/static/src/js/snippets/options.js b/addons/website_event_meet/static/src/js/snippets/options.js
index 31800960390..f95528a4dc4 100644
--- a/addons/website_event_meet/static/src/js/snippets/options.js
+++ b/addons/website_event_meet/static/src/js/snippets/options.js
@@ -1,69 +1,39 @@
-odoo.define('website_event_meet.set_customize_options', function (require) {
-"use strict";
+/** @odoo-module **/
 
-let EventSpecificOptions = require('website_event.set_customize_options').EventSpecificOptions;
+import options from 'web_editor.snippets.options';
 
-EventSpecificOptions.include({
-    xmlDependencies: (EventSpecificOptions.prototype.xmlDependencies || [])
-        .concat([
-            '/website_event_meet/static/src/xml/customize_options.xml',
-        ]),
-
-    events: _.extend({}, EventSpecificOptions.prototype.events, {
-        'change #allow-room-creation': '_onAllowRoomCreationChange',
-    }),
-
-    start: function () {
-        this.$allowRoomCreationInput = this.$('#allow-room-creation');
-        this._super.apply(this, arguments);
-    },
+options.registry.WebsiteEvent.include({
 
     //--------------------------------------------------------------------------
-    // Handlers
+    // Options
     //--------------------------------------------------------------------------
 
-    _onAllowRoomCreationChange: function () {
-        let checkboxValue = this.$allowRoomCreationInput.is(':checked');
-        this._toggleAllowRoomCreation(checkboxValue);
+    /**
+     * @see this.selectClass for parameters
+     */
+    allowRoomCreation(previewMode, widgetValue, params) {
+        this._rpc({
+            model: this.modelName,
+            method: 'write',
+            args: [[this.eventId], {
+                meeting_room_allow_creation: widgetValue
+            }],
+        }).then(() => this.trigger_up('reload_editable', {option_selector: this.data.selector}));
     },
 
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
-    _getCheckboxFields: function () {
-        let fields = this._super();
-        fields = _.union(fields, ['meeting_room_allow_creation']);
-        return fields;
-    },
-
-    _getCheckboxFieldMatch: function (checkboxField) {
-        if (checkboxField === 'meeting_room_allow_creation') {
-            return this.$allowRoomCreationInput;
+    /**
+     * @override
+     */
+    async _computeWidgetState(methodName, params) {
+        switch (methodName) {
+            case 'allowRoomCreation': {
+                return this._getRpcData('meeting_room_allow_creation');
+            }
         }
-        return this._super(checkboxField);
+        return this._super(...arguments);
     },
-
-    _initCheckboxCallback: function (rpcData) {
-        this._super(rpcData);
-        if (rpcData[0]['meeting_room_allow_creation']) {
-            let submenuInput = this._getCheckboxFieldMatch('meeting_room_allow_creation');
-            submenuInput.attr('checked', 'checked');
-        }
-    },
-
-    _toggleAllowRoomCreation: async function (val) {
-        await this._rpc({
-            model: this.modelName,
-            method: 'write',
-            args: [[this.eventId], {
-                meeting_room_allow_creation: val
-            }],
-        });
-
-        location.reload();
-    },
-
-});
-
 });
diff --git a/addons/website_event_meet/views/snippets.xml b/addons/website_event_meet/views/snippets.xml
index df0b8d3574a..c786580e5f6 100644
--- a/addons/website_event_meet/views/snippets.xml
+++ b/addons/website_event_meet/views/snippets.xml
@@ -1,12 +1,15 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<templates xml:space="preserve">
-    <t t-extend="website_event.customize_options">
-        <t t-jquery="label[name='display-website-menu']" t-operation="after">
-            <label t-if="window.document.location.pathname.endsWith('/community')" class="o_switch dropdown-item m-0" for="allow-room-creation">
-                <input id="allow-room-creation" type="checkbox"/>
-                <span/>
-                Allow Room Creation
-            </label>
-        </t>
-    </t>
-</templates>
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="snippet_options" inherit_id="website.snippet_options" name="Event Meet Snippet Options">
+    <xpath expr="." position="inside">
+        <div data-js="WebsiteEvent" data-selector="main:has(.o_wemeet_container)" data-page-options="true" data-no-check="true" string="Event Page">
+            <we-checkbox string="Room Creation (Specific)"
+                         data-allow-room-creation="true"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+    </xpath>
+</template>
+
+</odoo>

From 823d46fc6fb3e655bfb4d8a1ecc5183a97ee6ae5 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Fri, 11 Mar 2022 15:00:58 +0100
Subject: [PATCH 35/88] [IMP] website, *: adapt customize show options in
 website pages

*: website_crm, website_crm_partner_assign, website_customer,
   website_forum, website_hr_recruitment, website_membership,
   website_slides, website_slides_forum

This commit adapts "customize show" options from several website modules
by creating new options available in edit mode.

See merge commit for more information.

task-2710582
---
 addons/website/views/snippets/snippets.xml    |  7 +++++
 addons/website/views/website_templates.xml    |  6 ++---
 addons/website_crm/__manifest__.py            |  1 +
 addons/website_crm/views/snippets.xml         | 15 +++++++++++
 .../views/website_templates_contactus.xml     |  2 +-
 .../__manifest__.py                           |  1 +
 .../views/snippets.xml                        | 20 ++++++++++++++
 .../website_crm_partner_assign_templates.xml  |  4 +--
 addons/website_customer/__manifest__.py       |  1 +
 addons/website_customer/views/snippets.xml    | 27 +++++++++++++++++++
 .../views/website_customer_templates.xml      |  8 +++---
 .../website_forum/views/snippets/snippets.xml | 19 +++++++++++++
 addons/website_forum/views/website_forum.xml  |  6 ++---
 addons/website_hr_recruitment/__manifest__.py |  1 +
 .../website_hr_recruitment/views/snippets.xml | 27 +++++++++++++++++++
 .../website_hr_recruitment_templates.xml      |  8 +++---
 addons/website_membership/__manifest__.py     |  1 +
 addons/website_membership/views/snippets.xml  | 19 +++++++++++++
 .../views/website_membership_templates.xml    |  4 +--
 .../website_slides/views/slide_snippets.xml   | 21 +++++++++++++++
 .../website_slides_templates_homepage.xml     |  6 ++---
 addons/website_slides_forum/__manifest__.py   |  1 +
 .../website_slides_forum/views/snippets.xml   | 15 +++++++++++
 .../views/website_slides_forum_templates.xml  |  2 +-
 24 files changed, 199 insertions(+), 23 deletions(-)
 create mode 100644 addons/website_crm/views/snippets.xml
 create mode 100644 addons/website_crm_partner_assign/views/snippets.xml
 create mode 100644 addons/website_customer/views/snippets.xml
 create mode 100644 addons/website_hr_recruitment/views/snippets.xml
 create mode 100644 addons/website_membership/views/snippets.xml
 create mode 100644 addons/website_slides_forum/views/snippets.xml

diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index bdf99385bb7..66396023db5 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1453,5 +1453,12 @@
             <we-button data-configure-api-key="" data-no-preview="true">Custom Key</we-button>
         </we-row>
     </div>
+    <!-- Info page ('/website/info') -->
+    <div data-selector="main:has(.o_website_info)" data-page-options="true" data-no-check="true" string="Info Page">
+        <we-checkbox string="Odoo Information"
+                        data-customize-website-views="website.show_website_info"
+                        data-no-preview="true"
+                        data-reload="/"/>
+    </div>
 </template>
 </odoo>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index d1e469ca5ab..dcc05e8f32b 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -2083,11 +2083,11 @@
 <!-- Error and special pages -->
 <template id="website_info" name="Odoo Information">
     <t t-call="website.layout">
-        <div id="wrap"/>
+        <div id="wrap" class="o_website_info"/>
     </t>
 </template>
 
-<template id="show_website_info" inherit_id="website.website_info" customize_show="True" name="Show Odoo Information">
+<template id="show_website_info" inherit_id="website.website_info" name="Show Odoo Information">
     <xpath expr="//div[@id='wrap']" position="inside">
         <div class="oe_structure">
             <section class="container">
@@ -2101,7 +2101,7 @@
                 <div class="alert alert-warning alert-dismissable mt16" groups="website.group_website_publisher" role="status">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">×</button>
                    <p>
-                     Note: To hide this page, uncheck it from the top Customize menu.
+                     Note: To hide this page, uncheck it from the Customize tab in edit mode.
                    </p>
                 </div>
                 <h2>Installed Applications</h2>
diff --git a/addons/website_crm/__manifest__.py b/addons/website_crm/__manifest__.py
index bb0434b8fe8..19beffbb390 100644
--- a/addons/website_crm/__manifest__.py
+++ b/addons/website_crm/__manifest__.py
@@ -21,6 +21,7 @@ This module includes contact phone and mobile numbers validation.""",
         'views/crm_lead_views.xml',
         'views/website_visitor_views.xml',
         'views/website_templates_contactus.xml',
+        'views/snippets.xml',
     ],
     'installable': True,
     'auto_install': True,
diff --git a/addons/website_crm/views/snippets.xml b/addons/website_crm/views/snippets.xml
new file mode 100644
index 00000000000..38a9678d012
--- /dev/null
+++ b/addons/website_crm/views/snippets.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="snippet_options" inherit_id="website.snippet_options" name="Crm Snippet Options">
+    <xpath expr="." position="inside">
+        <div data-selector="main:has(span[data-for='contactus_form'])" data-page-options="true" data-no-check="true" string="Contact us Page">
+            <we-checkbox string="Opportunity"
+                         data-customize-website-views="website_crm.contactus_form"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website_crm/views/website_templates_contactus.xml b/addons/website_crm/views/website_templates_contactus.xml
index 72da633c629..d6c897009d7 100644
--- a/addons/website_crm/views/website_templates_contactus.xml
+++ b/addons/website_crm/views/website_templates_contactus.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
     <data>
-        <template id="contactus_form" name="Contact Form (Opportunity)" inherit_id="website.contactus" customize_show="True">
+        <template id="contactus_form" name="Contact Form (Opportunity)" inherit_id="website.contactus">
             <xpath expr="//span[@data-for='contactus_form']" position="before">
                 <t t-set="contactus_form_values" t-value="dict(contactus_form_values, **{
                     'contact_name': request.params.get('contact_name', ''),
diff --git a/addons/website_crm_partner_assign/__manifest__.py b/addons/website_crm_partner_assign/__manifest__.py
index 05ef65bc1ea..ebf3804ea91 100644
--- a/addons/website_crm_partner_assign/__manifest__.py
+++ b/addons/website_crm_partner_assign/__manifest__.py
@@ -39,6 +39,7 @@ The automatic assignment is figured from the weight of partner levels and the ge
         'views/website_crm_partner_assign_templates.xml',
         'views/partner_assign_menus.xml',
         'report/crm_partner_report_view.xml',
+        'views/snippets.xml',
     ],
     'demo': [
         'data/res_partner_demo.xml',
diff --git a/addons/website_crm_partner_assign/views/snippets.xml b/addons/website_crm_partner_assign/views/snippets.xml
new file mode 100644
index 00000000000..50734e5b8da
--- /dev/null
+++ b/addons/website_crm_partner_assign/views/snippets.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="snippet_options" inherit_id="website.snippet_options" name="Crm Partner Assign Snippet Options">
+    <xpath expr="." position="inside">
+        <div data-selector="main:has(#oe_structure_website_crm_partner_assign_layout_1)" data-page-options="true" data-no-check="true" string="Partners Page">
+            <we-checkbox string="Show Leads / Opps"
+                         data-customize-website-views="website_crm_partner_assign.portal_my_home_lead"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="World Map"
+                         data-customize-website-views="website_crm_partner_assign.ref_country"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+    </xpath>
+</template>
+
+</odoo>
+
diff --git a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
index 5921bd59c43..8810ad42f31 100644
--- a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
+++ b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
@@ -109,7 +109,7 @@
     </t>
 </template>
 
-<template id="ref_country" inherit_id="website_crm_partner_assign.index" customize_show="True" name="Left World Map">
+<template id="ref_country" inherit_id="website_crm_partner_assign.index" name="Left World Map">
     <xpath expr="//ul[@id='reseller_countries']" position="after">
         <t t-if="google_maps_api_key">
             <!-- modal for large map -->
@@ -199,7 +199,7 @@
         </xpath>
     </template>
 
-    <template id="portal_my_home_lead" name="Show Leads / Opps" customize_show="True" inherit_id="portal.portal_my_home" priority="15">
+    <template id="portal_my_home_lead" name="Show Leads / Opps" inherit_id="portal.portal_my_home" priority="15">
         <xpath expr="//div[hasclass('o_portal_docs')]" position="inside">
             <t t-call="portal.portal_docs_entry">
                 <t t-set="title">Leads</t>
diff --git a/addons/website_customer/__manifest__.py b/addons/website_customer/__manifest__.py
index 67ce2b23e4c..dcc9a22ec91 100644
--- a/addons/website_customer/__manifest__.py
+++ b/addons/website_customer/__manifest__.py
@@ -22,6 +22,7 @@ Publish your customers as business references on your website to attract new pot
         'views/res_partner_views.xml',
         'security/ir.model.access.csv',
         'security/ir_rule.xml',
+        'views/snippets.xml',
     ],
     'installable': True,
     'license': 'LGPL-3',
diff --git a/addons/website_customer/views/snippets.xml b/addons/website_customer/views/snippets.xml
new file mode 100644
index 00000000000..f776ce82bc6
--- /dev/null
+++ b/addons/website_customer/views/snippets.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="snippet_options" inherit_id="website.snippet_options" name="Customer Snippet Options">
+    <xpath expr="." position="inside">
+        <div data-selector="main:has(#ref_left_column)" data-page-options="true" data-no-check="true" string="References Page">
+            <we-checkbox string="Countries Filter"
+                         data-customize-website-views="website_customer.opt_country_list"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Industry Filter"
+                         data-customize-website-views="website_customer.opt_industry_list"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Tags Filter"
+                         data-customize-website-views="website_customer.opt_tag_list"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Show Map"
+                         data-customize-website-views="website_customer.opt_country"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website_customer/views/website_customer_templates.xml b/addons/website_customer/views/website_customer_templates.xml
index 9f4fa0f5b34..5017b537c64 100644
--- a/addons/website_customer/views/website_customer_templates.xml
+++ b/addons/website_customer/views/website_customer_templates.xml
@@ -62,7 +62,7 @@
 </template>
 
 <!-- Option: left column: World Map -->
-<template id="opt_country" inherit_id="website_customer.index" customize_show="True" name="Show Map">
+<template id="opt_country" inherit_id="website_customer.index" name="Show Map">
     <xpath expr="//div[@id='ref_left_column']" position="inside">
         <t t-if="google_maps_api_key">
             <!-- modal for large map -->
@@ -88,7 +88,7 @@
     </xpath>
 </template>
 
-<template id="opt_industry_list" inherit_id="website_customer.index" customize_show="True" name="Filter on Industry" priority="20">
+<template id="opt_industry_list" inherit_id="website_customer.index" name="Filter on Industry" priority="20">
     <xpath expr="//div[@id='ref_left_column']" position="inside">
         <h3>References by Industries</h3>
         <ul class="nav nav-pills flex-column mt16 mb32">
@@ -107,7 +107,7 @@
     </xpath>
 </template>
 
-<template id="opt_country_list" inherit_id="website_customer.index" customize_show="True" name="Filter on Countries" priority="30">
+<template id="opt_country_list" inherit_id="website_customer.index" name="Filter on Countries" priority="30">
     <xpath expr="//div[@id='ref_left_column']" position="inside">
         <h3>References by Country</h3>
         <ul class="nav nav-pills flex-column mt16 mb32">
@@ -127,7 +127,7 @@
 </template>
 
 
-<template id="opt_tag_list" inherit_id="website_customer.index" customize_show="True" name="Filter on Tags" priority="40">
+<template id="opt_tag_list" inherit_id="website_customer.index" name="Filter on Tags" priority="40">
     <xpath expr="//div[@id='ref_left_column']" position="inside">
 
         <h3 t-if="len(tags)">References by Tag</h3>
diff --git a/addons/website_forum/views/snippets/snippets.xml b/addons/website_forum/views/snippets/snippets.xml
index b26dc6f7adc..59e9737f116 100644
--- a/addons/website_forum/views/snippets/snippets.xml
+++ b/addons/website_forum/views/snippets/snippets.xml
@@ -18,4 +18,23 @@
     </xpath>
 </template>
 
+<template id="snippet_options" inherit_id="website.snippet_options" name="Forum Snippet Options">
+    <xpath expr="." position="inside">
+        <div data-selector="main:has(#o_wforum_forums_index_list)" data-page-options="true" data-no-check="true" string="Forum Page">
+            <we-select string="Layout" data-no-preview="true" data-reload="/">
+                <we-button data-customize-website-views="">Grid</we-button>
+                <we-button data-customize-website-views="website_forum.opt_list_view">List</we-button>
+            </we-select>
+            <we-checkbox string="⌙ Post Count"
+                         data-customize-website-views="website_forum.opt_post_count"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="⌙ Last Post"
+                         data-customize-website-views="website_forum.opt_last_post"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+    </xpath>
+</template>
+
 </odoo>
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 468fcb6b87e..cf71b146f36 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -495,7 +495,7 @@
 
 <!-- (Options) Forum : List View
     Display forums as a list  -->
-<template name="List View" id="website_forum.opt_list_view" inherit_id="website_forum.forum_all" active="False" customize_show="True">
+<template name="List View" id="website_forum.opt_list_view" inherit_id="website_forum.forum_all" active="False">
     <xpath expr="//t[@t-set='col_class']" position="attributes">
         <attribute name="t-valuef">mb-3 col-sm-12</attribute>
     </xpath>
@@ -515,11 +515,11 @@
 
 <!-- (Options) Forum : Show Post Count
     Show the number of post a forum has  -->
-<template name="Show Post Count" id="website_forum.opt_post_count" inherit_id="website_forum.forum_all" active="False" customize_show="True"/>
+<template name="Show Post Count" id="website_forum.opt_post_count" inherit_id="website_forum.forum_all" active="False"/>
 
 <!-- (Options) Forum : Show Last Post
     Show the title of the latest post in each forum  -->
-<template name="Show Last Post" id="website_forum.opt_last_post" inherit_id="website_forum.forum_all" active="False" customize_show="True"/>
+<template name="Show Last Post" id="website_forum.opt_last_post" inherit_id="website_forum.forum_all" active="False"/>
 
 
 <!-- Default content for the "All Forums Layout" header above -->
diff --git a/addons/website_hr_recruitment/__manifest__.py b/addons/website_hr_recruitment/__manifest__.py
index 783e97d3316..8dff924edb3 100644
--- a/addons/website_hr_recruitment/__manifest__.py
+++ b/addons/website_hr_recruitment/__manifest__.py
@@ -16,6 +16,7 @@
         'views/website_hr_recruitment_templates.xml',
         'views/hr_recruitment_views.xml',
         'views/hr_job_views.xml',
+        'views/snippets.xml',
     ],
     'demo': [
         'data/hr_job_demo.xml',
diff --git a/addons/website_hr_recruitment/views/snippets.xml b/addons/website_hr_recruitment/views/snippets.xml
new file mode 100644
index 00000000000..009f59898ed
--- /dev/null
+++ b/addons/website_hr_recruitment/views/snippets.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="snippet_options" inherit_id="website.snippet_options" name="Hr Recruitment Snippet Options">
+    <xpath expr="." position="inside">
+        <div data-selector="main:has(.o_website_hr_recruitment_jobs_list)" data-page-options="true" data-no-check="true" string="Jobs Page">
+            <we-checkbox string="Countries Filter"
+                         data-customize-website-views="website_hr_recruitment.job_filter_by_countries"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Departments Filter"
+                         data-customize-website-views="website_hr_recruitment.job_filter_by_departments"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Offices Filter"
+                         data-customize-website-views="website_hr_recruitment.job_filter_by_offices"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Sidebar"
+                         data-customize-website-views="website_hr_recruitment.job_right_side_bar"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
index 43e5343e547..07a23f546b9 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -512,7 +512,7 @@
     </field>
 </record>
 
-<template id="job_filter_by_countries" inherit_id="website_hr_recruitment.index" active="False" customize_show="True" name="Filter by Countries">
+<template id="job_filter_by_countries" inherit_id="website_hr_recruitment.index" active="False" name="Filter by Countries">
     <xpath expr="//div[@id='jobs_grid_left']" position="inside">
         <ul class="nav nav-pills flex-column mb32">
             <li class="nav-item"><a t-attf-href="/jobs#{ '/department/%s' % slug(department_id) if department_id else '' }#{ '/office/%s' % office_id if office_id else '' }?all_countries=1" t-attf-class="nav-link#{'' if country_id else ' active'}">All Countries</a></li>
@@ -529,7 +529,7 @@
     </xpath>
 </template>
 
-<template id="job_filter_by_departments" inherit_id="website_hr_recruitment.index" active="False" customize_show="True" name="Filter by Departments">
+<template id="job_filter_by_departments" inherit_id="website_hr_recruitment.index" active="False" name="Filter by Departments">
     <xpath expr="//div[@id='jobs_grid_left']" position="inside">
         <ul class="nav nav-pills flex-column mb32">
             <li class="nav-item"><a t-attf-href="/jobs#{ '/country/%s' % slug(country_id) if country_id else '' }#{ '/office/%s' % office_id if office_id else ''}" t-attf-class="nav-link#{'' if department_id else ' active'}">All Departments</a></li>
@@ -545,7 +545,7 @@
     </xpath>
 </template>
 
-<template id="job_filter_by_offices" inherit_id="website_hr_recruitment.index" active="False" customize_show="True" name="Filter by Offices">
+<template id="job_filter_by_offices" inherit_id="website_hr_recruitment.index" active="False" name="Filter by Offices">
     <xpath expr="//div[@id='jobs_grid_left']" position="inside">
         <ul class="nav nav-pills flex-column mb32">
             <li class="nav-item"><a t-attf-href="/jobs#{ '/country/%s' % slug(country_id) if country_id else '' }#{ '/department/%s' % slug(department_id) if department_id else '' }" t-attf-class="nav-link#{'' if office_id else ' active'}">All Offices</a></li>
@@ -566,7 +566,7 @@
     </xpath>
 </template>
 
-<template id="job_right_side_bar" inherit_id="website_hr_recruitment.index" active="True" customize_show="True" name="Right Side Bar">
+<template id="job_right_side_bar" inherit_id="website_hr_recruitment.index" active="True" name="Right Side Bar">
     <xpath expr="//div[@id='jobs_grid']" position="after">
         <div class="col-lg-3 oe_structure oe_empty" id="jobs_grid_left">
             <section class="">
diff --git a/addons/website_membership/__manifest__.py b/addons/website_membership/__manifest__.py
index ad7d88a473d..bb342e9641b 100644
--- a/addons/website_membership/__manifest__.py
+++ b/addons/website_membership/__manifest__.py
@@ -15,6 +15,7 @@ Publish your members/association directory publicly.
         'views/website_membership_templates.xml',
         'security/ir.model.access.csv',
         'security/website_membership.xml',
+        'views/snippets.xml',
     ],
     'demo': ['data/membership_demo.xml'],
     'installable': True,
diff --git a/addons/website_membership/views/snippets.xml b/addons/website_membership/views/snippets.xml
new file mode 100644
index 00000000000..3b97203bb2f
--- /dev/null
+++ b/addons/website_membership/views/snippets.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="snippet_options" inherit_id="website.snippet_options" name="Membership Snippet Options">
+    <xpath expr="." position="inside">
+        <div data-selector="main:has(#oe_structure_website_membership_index_1)" data-page-options="true" data-no-check="true" string="Members Page">
+            <we-checkbox string="Location"
+                         data-customize-website-views="website_membership.opt_index_country"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="World Map"
+                         data-customize-website-views="website_membership.opt_index_google_map"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website_membership/views/website_membership_templates.xml b/addons/website_membership/views/website_membership_templates.xml
index 90095eb2ad9..4bd05acb825 100644
--- a/addons/website_membership/views/website_membership_templates.xml
+++ b/addons/website_membership/views/website_membership_templates.xml
@@ -78,7 +78,7 @@
 </template>
 
 <template id="opt_index_country" name="Location"
-        customize_show="True" inherit_id="website_membership.index">
+        inherit_id="website_membership.index">
     <xpath expr="//div[@id='left_column']/ul[1]" position="after">
         <ul class="nav nav-pills flex-column mt16">
             <li class="nav-header nav-item"><h3>Location</h3></li>
@@ -96,7 +96,7 @@
 
 <!-- Option: index: Left Google Map -->
 <template id="opt_index_google_map" name="Left World Map"
-        customize_show="True" inherit_id="website_membership.index">
+        inherit_id="website_membership.index">
     <xpath expr="//div[@id='left_column']/ul[last()]" position="after">
         <t t-if="google_maps_api_key">
             <!-- modal for large map -->
diff --git a/addons/website_slides/views/slide_snippets.xml b/addons/website_slides/views/slide_snippets.xml
index 0fc5bd6288b..e995037c271 100644
--- a/addons/website_slides/views/slide_snippets.xml
+++ b/addons/website_slides/views/slide_snippets.xml
@@ -18,4 +18,25 @@
     </xpath>
 </template>
 
+<template id="snippet_options" inherit_id="website.snippet_options" name="Slides Snippet Options">
+    <xpath expr="." position="inside">
+        <div data-selector="main:has(.o_wslides_home_main)" data-page-options="true" data-no-check="true" string="Courses Page">
+            <we-checkbox string="New Content Ribbon"
+                         data-customize-website-views="website_slides.course_card_information_arrow"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+        <div data-selector="main:has(.o_wslides_home_aside_loggedin)" data-page-options="true" data-no-check="true" string="Courses Page">
+            <we-checkbox string="Achievements"
+                         data-customize-website-views="website_slides.toggle_latest_achievements"
+                         data-no-preview="true"
+                         data-reload="/"/>
+            <we-checkbox string="Leaderboard"
+                         data-customize-website-views="website_slides.toggle_leaderboard"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+    </xpath>
+</template>
+
 </odoo>
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index a735ec5164c..c2b03a5b33b 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -379,7 +379,7 @@
 </template>
 
 <template id="course_card_information_arrow" inherit_id="website_slides.course_card_information"
-    active="True" customize_show="True" name='New Content Ribbon'>
+    active="True" name='New Content Ribbon'>
     <xpath expr="//t[@id='course_card_information_content']" position="inside">
         <span class="o_wslides_arrow">New Content</span>
     </xpath>
@@ -390,7 +390,7 @@
     </t>
 </template>
 
-<template id="toggle_latest_achievements" inherit_id="website_slides.slides_home_achievements_small" active="True" customize_show="True" name='Display Achievements'>
+<template id="toggle_latest_achievements" inherit_id="website_slides.slides_home_achievements_small" active="True" name='Display Achievements'>
     <xpath expr="//t[hasclass('o_wslides_home_aside')]" position="inside">
         <div t-if="achievements">
             <div class="row o_wslides_home_aside_title">
@@ -426,7 +426,7 @@
     </div>
 </template>
 
-<template id="toggle_leaderboard" inherit_id="website_slides.slides_home_users_small" active="True" customize_show="True" name='Display Leaderboard'>
+<template id="toggle_leaderboard" inherit_id="website_slides.slides_home_users_small" active="True" name='Display Leaderboard'>
     <xpath expr="//div[hasclass('o_wslides_home_aside')]" position="inside">
         <div class="row o_wslides_home_aside_title">
             <div class="col">
diff --git a/addons/website_slides_forum/__manifest__.py b/addons/website_slides_forum/__manifest__.py
index 9845b01d2ac..d59daea3337 100644
--- a/addons/website_slides_forum/__manifest__.py
+++ b/addons/website_slides_forum/__manifest__.py
@@ -20,6 +20,7 @@
         'views/website_slides_menu_views.xml',
         'views/website_slides_forum_templates.xml',
         'views/website_slides_templates.xml',
+        'views/snippets.xml',
     ],
     'demo': [
         'data/slide_channel_demo.xml',
diff --git a/addons/website_slides_forum/views/snippets.xml b/addons/website_slides_forum/views/snippets.xml
new file mode 100644
index 00000000000..5d4d0b76e54
--- /dev/null
+++ b/addons/website_slides_forum/views/snippets.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="snippet_options" inherit_id="website.snippet_options" name="Slides Forum Snippet Options">
+    <xpath expr="." position="inside">
+        <div data-selector="main:has(#o_wforum_forums_index_list)" data-page-options="true" data-no-check="true" string="Forum Page">
+            <we-checkbox string="⌙ Separate Courses"
+                         data-customize-website-views="website_slides_forum.website_slides_forum_index"
+                         data-no-preview="true"
+                         data-reload="/"/>
+        </div>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website_slides_forum/views/website_slides_forum_templates.xml b/addons/website_slides_forum/views/website_slides_forum_templates.xml
index 9589a39f075..a8c8e9d93e9 100644
--- a/addons/website_slides_forum/views/website_slides_forum_templates.xml
+++ b/addons/website_slides_forum/views/website_slides_forum_templates.xml
@@ -27,7 +27,7 @@
         </xpath>
     </template>
 
-    <template name="Split regular forums/courses" id="website_slides_forum_index" inherit_id="website_forum.forum_all" active="True" customize_show="True">
+    <template name="Split regular forums/courses" id="website_slides_forum_index" inherit_id="website_forum.forum_all" active="True">
         <xpath expr="//div[@id='o_wforum_forums_index_list']/*[@t-if='forums']" position="replace">
             <t t-if="forums">
                 <t t-set="courses_discussions" t-value="forums.filtered(lambda f: f.slide_channel_id)"/>

From 22bc9e142dd75d8219082d09890fb7bc4435e4b9 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Tue, 15 Mar 2022 11:00:06 +0100
Subject: [PATCH 36/88] [IMP] website_sale: stop showing variant option when
 not active

Since this commit [1], we don't want to display the "List View of
Variants" option on the product page if option "Variants" in settings
was disabled. Now that the customize show menu options have become
snippet options in edit mode, the code to do this has been adapted.

[1]: https://github.com/odoo/odoo/commit/1cd63d81908511ee136f0ca2600d85eab48f258f

task-2710582
---
 addons/website_sale/controllers/main.py         | 9 ---------
 addons/website_sale/views/snippets/snippets.xml | 2 +-
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/addons/website_sale/controllers/main.py b/addons/website_sale/controllers/main.py
index 29f1ba9ab24..b6992cb0b43 100644
--- a/addons/website_sale/controllers/main.py
+++ b/addons/website_sale/controllers/main.py
@@ -131,15 +131,6 @@ class Website(main.Website):
             options['display_currency'] = request.website.currency_id
         return super().autocomplete(search_type, term, order, limit, max_nb_chars, options)
 
-    @http.route()
-    def get_switchable_related_views(self, key):
-        views = super(Website, self).get_switchable_related_views(key)
-        if key == 'website_sale.product':
-            if not request.env.user.has_group('product.group_product_variant'):
-                view_product_variants = request.website.viewref('website_sale.product_variants')
-                views = [v for v in views if v['id'] != view_product_variants.id]
-        return views
-
     @http.route()
     def theme_customize_data(self, is_view_data, enable=None, disable=None, reset_view_arch=False):
         super().theme_customize_data(is_view_data, enable, disable, reset_view_arch)
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index bc13712d0e9..2cbd2a576a7 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -221,7 +221,7 @@
                          data-customize-website-views="website_sale.product_quantity"
                          data-no-preview="true"
                          data-reload="/"/>
-            <we-select string="Variants" data-no-preview="true" data-reload="/">
+            <we-select groups="product.group_product_variant" string="Variants" data-no-preview="true" data-reload="/">
                 <we-button data-customize-website-views="">Options</we-button>
                 <we-button data-customize-website-views="website_sale.product_variants">Products List</we-button>
             </we-select>

From 84d867dbacda744c3543da9d5f8483369e3276ff Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Fri, 29 Apr 2022 10:44:03 +0200
Subject: [PATCH 37/88] [IMP] website, web_editor: add customize_show views to
 editor panel

After this commit, the customize_show views are automatically added in
the editor panel as page options in the "customize" tab.

Most of the customize_show views have been replaced by snippets options
but for some it was better to keep an auto population system so as not
to have to create too many bridge modules when it's not worth it
(e.g. My Portal page).

See merge commit for more information.

task-2710582
---
 .../static/src/js/editor/snippets.editor.js   |  3 ++
 .../static/src/js/editor/snippets.editor.js   | 37 +++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 36321199aa5..98fd7ba4e8a 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -405,6 +405,9 @@ var SnippetEditor = Widget.extend({
         if (this.$target.parent('.row').length) {
             return _t("Column");
         }
+        if (this.$target.is('#wrapwrap > main')) {
+            return _t("Page Options");
+        }
         return _t("Block");
     },
     /**
diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js
index ab0e3b83791..f8bd3da2ae7 100644
--- a/addons/website/static/src/js/editor/snippets.editor.js
+++ b/addons/website/static/src/js/editor/snippets.editor.js
@@ -53,6 +53,43 @@ weSnippetEditor.SnippetsMenu.include({
         document.body.classList.remove('o_animated_text_highlighted');
     },
 
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Adds the "customize_show" templates to the options page of the editor
+     * panel.
+     *
+     * @override
+     */
+    async loadSnippets() {
+        const viewName = $(this.options.wysiwyg.odooEditor.document.documentElement).data('view-xmlid');
+        const snippets = await this._super(...arguments);
+        if (!viewName) {
+            return snippets;
+        }
+        const $snippets = $(snippets);
+        return this._rpc({
+            route: '/website/get_switchable_related_views',
+            params: {
+                key: viewName,
+            },
+        }).then(function (result) {
+            _.each(result, view => {
+                $snippets.siblings('#snippet_options').append($(`
+                    <div data-selector="#wrapwrap > main" data-page-options="true" data-no-check="true">
+                        <we-checkbox string="${view.name}"
+                                    data-customize-website-views="${view.key}"
+                                    data-no-preview="true"
+                                    data-reload="/"/>
+                    </div>
+                `));
+            });
+            return $('<div>').append($snippets).html();
+        });
+    },
+
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------

From a3e34512bf229d5d55f9e9d9eb0a9f7211a5a826 Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Thu, 21 Apr 2022 15:09:50 +0200
Subject: [PATCH 38/88] [IMP] website, web_editor: add WebsiteEditor components

This commit adds 2 components essential to website edition.

- WysiwygAdapterComponent: Allows the legacy @web_editor/wysiwyg widget
  to work in an OWL context. It will be further expanded in the next
  commit to fully replace the previous edit.js which was the initial
  widget that started the edition prior to this commit / branch.

- WebsiteEditorComponent: This component is in between WebsitePreview
  and the adapter. It allows some tricks described below.

The reason this is split in two component is because, for now, when
the page needs reloading, the editor component will clone the content
of the widget, destroy the Wysiwyg, and restart it. This ensure that
every event is properly bound and gives the illusion that the wysiwyg is
never destroyed.

See merge commit for more information.

task-2687506
---
 .../static/src/js/frontend/loader.js          |  19 +-
 .../website_preview/website_preview.js        |  21 +-
 .../website_preview/website_preview.scss      |  11 +
 .../website_preview/website_preview.xml       |   5 +-
 .../static/src/components/editor/editor.js    |  70 ++
 .../static/src/components/editor/editor.scss  |  23 +
 .../static/src/components/editor/editor.xml   |  16 +
 .../wysiwyg_adapter/wysiwyg_adapter.js        | 717 +-----------------
 .../website/static/src/js/content/redirect.js |   8 +
 .../static/src/services/website_service.js    |  27 +-
 .../static/src/systray_items/edit_website.js  |  27 +-
 .../static/src/systray_items/edit_website.xml |   7 +-
 12 files changed, 254 insertions(+), 697 deletions(-)
 create mode 100644 addons/website/static/src/components/editor/editor.js
 create mode 100644 addons/website/static/src/components/editor/editor.scss
 create mode 100644 addons/website/static/src/components/editor/editor.xml

diff --git a/addons/web_editor/static/src/js/frontend/loader.js b/addons/web_editor/static/src/js/frontend/loader.js
index 0434715ddd9..ea1a00af158 100644
--- a/addons/web_editor/static/src/js/frontend/loader.js
+++ b/addons/web_editor/static/src/js/frontend/loader.js
@@ -3,7 +3,7 @@ odoo.define('web_editor.loader', function (require) {
 
 var ajax = require('web.ajax');
 
-let wysiwygPromise;
+let wysiwygPromise = {};
 
 const exports = {};
 
@@ -19,9 +19,14 @@ exports.loadWysiwyg = loadWysiwyg;
  * @param {object} options The wysiwyg options
  */
 exports.createWysiwyg = async (parent, options, additionnalAssets = []) => {
+    const Wysiwyg = await getWysiwygClass(options, additionnalAssets);
+    return new Wysiwyg(parent, options);
+};
+
+async function getWysiwygClass(options, additionnalAssets = []) {
     const wysiwygAlias = options.wysiwygAlias || 'web_editor.wysiwyg';
-    if (!wysiwygPromise) {
-        wysiwygPromise = new Promise(async (resolve) => {
+    if (!wysiwygPromise[wysiwygAlias]) {
+        wysiwygPromise[wysiwygAlias] = new Promise(async (resolve) => {
             await loadWysiwyg(additionnalAssets);
             // Wait the loading of the service and his dependencies (use string to
             // avoid parsing of require function).
@@ -35,10 +40,10 @@ exports.createWysiwyg = async (parent, options, additionnalAssets = []) => {
             resolve();
         });
     }
-    await wysiwygPromise;
-    const Wysiwyg = odoo.__DEBUG__.services[wysiwygAlias];
-    return new Wysiwyg(parent, options);
-};
+    await wysiwygPromise[wysiwygAlias];
+    return odoo.__DEBUG__.services[wysiwygAlias];
+}
+exports.getWysiwygClass = getWysiwygClass;
 
 exports.loadFromTextarea = async (parent, textarea, options) => {
     var loading = textarea.nextElementSibling;
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 22df3a6b97f..7a2c84c5304 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -2,8 +2,9 @@
 
 import { registry } from '@web/core/registry';
 import { useService } from '@web/core/utils/hooks';
+import { WebsiteEditorComponent } from '../../components/editor/editor';
 
-const { Component, onWillStart, useRef, useEffect } = owl;
+const { Component, onWillStart, useRef, useEffect, useState } = owl;
 
 export class WebsitePreview extends Component {
     setup() {
@@ -14,6 +15,7 @@ export class WebsitePreview extends Component {
 
         this.iframe = useRef('iframe');
         this.iframefallback = useRef('iframefallback');
+        this.websiteContext = useState(this.websiteService.context);
 
         onWillStart(async () => {
             await this.websiteService.fetchWebsites();
@@ -24,6 +26,7 @@ export class WebsitePreview extends Component {
         useEffect(() => {
             this.websiteService.currentWebsiteId = this.websiteId;
             this.websiteService.context.showNewContentModal = this.props.action.context.params && this.props.action.context.params.display_new_content;
+            this.websiteService.context.edition = this.props.action.context.params && !!this.props.action.context.params.enable_editor;
             return () => {
                 this.websiteService.currentWebsiteId = null;
                 this.websiteService.pageDocument = null;
@@ -73,6 +76,18 @@ export class WebsitePreview extends Component {
         return path;
     }
 
+    reloadIframe(url) {
+        return new Promise((resolve, reject) => {
+            this.iframe.el.addEventListener('OdooFrameContentLoaded', resolve, { once: true });
+            this.websiteService.websiteRootInstance = undefined;
+            if (url) {
+                this.iframe.el.contentWindow.location = url;
+            } else {
+                this.iframe.el.contentWindow.location.reload();
+            }
+        });
+    }
+
     /**
      * Returns true if the url should be opened in the top
      * window.
@@ -96,6 +111,9 @@ export class WebsitePreview extends Component {
 
         this.websiteService.pageDocument = this.iframe.el.contentDocument;
         this.websiteService.contentWindow = this.iframe.el.contentWindow;
+        this.iframe.el.contentWindow.addEventListener('PUBLIC-ROOT-READY', (event) => {
+            this.websiteService.websiteRootInstance = event.detail.rootInstance;
+        });
 
         // Before leaving the iframe, its content is replicated on an
         // underlying iframe, to avoid for white flashes (visible on
@@ -129,5 +147,6 @@ export class WebsitePreview extends Component {
     }
 }
 WebsitePreview.template = 'website.WebsitePreview';
+WebsitePreview.components = { WebsiteEditorComponent };
 
 registry.category('actions').add('website_preview', WebsitePreview);
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.scss b/addons/website/static/src/client_actions/website_preview/website_preview.scss
index 3ed836b4881..9222defd3ab 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.scss
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.scss
@@ -1,6 +1,11 @@
 .o_website_preview {
     position: relative;
     height: 100%;
+    transition: margin-right ease 400ms;
+
+    &.editor_enable.editor_has_snippets {
+        margin-right: $o-we-sidebar-width !important;
+    }
 
     > iframe {
         @include o-position-absolute(0, 0, 0, 0);
@@ -10,6 +15,12 @@
     }
 }
 
+.o_website_fullscreen {
+    .o_website_preview.editor_enable.editor_has_snippets {
+        margin-right: 0 !important;
+    }
+}
+
 .o_website_fullscreen, .editor_has_snippets {
     header {
         .o_main_navbar {
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml
index d889dbca1c5..74edc44ffd0 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.xml
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml
@@ -1,13 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 <t t-name="website.WebsitePreview" owl="1">
-    <div class="o_website_preview">
+    <div class="o_website_preview" t-att-class="{ 'editor_enable editor_has_snippets': this.websiteContext.snippetsLoaded }">
         <iframe t-att-src="iframeFallbackUrl"
+            t-att-class="{ 'd-none': this.websiteContext.edition }"
             t-ref="iframefallback"/>
         <iframe t-att-src="initialUrl"
             class="o_iframe"
             t-ref="iframe"
             t-on-load="_onPageLoaded"/>
     </div>
+    <WebsiteEditorComponent t-if="websiteContext.edition"
+        reloadIframe.bind="this.reloadIframe"/>
 </t>
 </templates>
diff --git a/addons/website/static/src/components/editor/editor.js b/addons/website/static/src/components/editor/editor.js
new file mode 100644
index 00000000000..b1189c74a78
--- /dev/null
+++ b/addons/website/static/src/components/editor/editor.js
@@ -0,0 +1,70 @@
+/** @odoo-module */
+// Legacy services
+import legacyEnv from 'web.commonEnv';
+import { useService } from '@web/core/utils/hooks';
+import { WysiwygAdapterComponent } from '../wysiwyg_adapter/wysiwyg_adapter';
+
+const { markup, Component, useState, useChildSubEnv, useEffect, onWillStart } = owl;
+
+export class WebsiteEditorComponent extends Component {
+    setup() {
+        this.websiteService = useService('website');
+        this.notificationService = useService('notification');
+
+        this.websiteContext = useState(this.websiteService.context);
+        this.state = useState({
+            reloading: false,
+            showWysiwyg: this.websiteContext.isPublicRootReady,
+        });
+
+        useChildSubEnv(legacyEnv);
+
+        onWillStart(async () => {
+            this.Wysiwyg = await this.websiteService.loadWysiwyg();
+        });
+
+        useEffect(isPublicRootReady => {
+            if (isPublicRootReady) {
+                this.state.showWysiwyg = true;
+            }
+        }, () => [this.websiteContext.isPublicRootReady]);
+    }
+
+    wysiwygReady() {
+        this.websiteContext.snippetsLoaded = true;
+        this.state.reloading = false;
+    }
+
+    willReload(widgetEl) {
+        if (widgetEl) {
+            widgetEl.querySelectorAll('#oe_manipulators').forEach(el => el.remove());
+            widgetEl.querySelectorAll('we-input input').forEach((input, index) => {
+                input.setAttribute('value', input.closest('we-input').dataset.selectStyle || '');
+            });
+            this.loadingDummy = markup(widgetEl.innerHTML);
+        }
+        this.state.reloading = true;
+    }
+
+    async reload(snippetOptionSelector, url) {
+        this.notificationService.add(this.env._t("Your modifications were saved to apply this option."), {
+            title: this.env._t("Content saved."),
+            type: 'success'
+        });
+        this.state.showWysiwyg = false;
+        await this.props.reloadIframe(url);
+        this.reloadSelector = snippetOptionSelector;
+    }
+
+    async quit() {
+        document.body.classList.remove('editor_has_snippets');
+        this.websiteContext.snippetsLoaded = false;
+        setTimeout(async () => {
+            this.state.showWysiwyg = false;
+            await this.props.reloadIframe();
+            this.websiteContext.edition = false;
+        }, 400);
+    }
+}
+WebsiteEditorComponent.components = { WysiwygAdapterComponent };
+WebsiteEditorComponent.template = 'website.WebsiteEditorComponent';
diff --git a/addons/website/static/src/components/editor/editor.scss b/addons/website/static/src/components/editor/editor.scss
new file mode 100644
index 00000000000..a19f3bd6718
--- /dev/null
+++ b/addons/website/static/src/components/editor/editor.scss
@@ -0,0 +1,23 @@
+.o_w_wysiwyg, .o_loading_dummy {
+    #oe_snippets {
+        transform: none;
+        transition: none;
+    }
+}
+
+.o_loading_dummy {
+    position: absolute;
+    z-index: 100000;
+}
+
+.o_website_fullscreen {
+    #oe_snippets {
+        transform: translateX(100%);
+    }
+}
+
+.o_w_wysiwyg_transition {
+    #oe_snippets {
+        transition: transform ease 400ms;
+    }
+}
diff --git a/addons/website/static/src/components/editor/editor.xml b/addons/website/static/src/components/editor/editor.xml
new file mode 100644
index 00000000000..509e313b11a
--- /dev/null
+++ b/addons/website/static/src/components/editor/editor.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+<t t-name="website.WebsiteEditorComponent" owl="1">
+    <div t-if="state.reloading" class="o_loading_dummy">
+        <t t-out="this.loadingDummy"/>
+    </div>
+    <div t-if="state.showWysiwyg" t-att-class="{ o_w_wysiwyg_transition: !this.state.reloading, o_w_wysiwyg: this.websiteContext.snippetsLoaded }">
+        <WysiwygAdapterComponent Component="this.Wysiwyg"
+            snippetSelector="this.reloadSelector"
+            willReload.bind="this.willReload"
+            reloadCallback.bind="this.reload"
+            quitCallback.bind="this.quit"
+            wysiwygReady.bind="this.wysiwygReady"/>
+    </div>
+</t>
+</templates>
diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
index 71c75f461af..010be484256 100644
--- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
@@ -1,706 +1,57 @@
-odoo.define('website.editMenu', function (require) {
-'use strict';
+/** @odoo-module */
 
-var core = require('web.core');
-var dom = require('web.dom');
-var wysiwygLoader = require('web_editor.loader');
-var websiteNavbarData = require('website.navbar');
-var Dialog = require('web.Dialog');
+import { ComponentAdapter } from 'web.OwlCompatibility';
 
-const { registry } = require("@web/core/registry");
+import { useWowlService } from '@web/legacy/utils';
 
-var _t = core._t;
+
+const { onWillStart, useEffect } = owl;
 
 /**
- * Adds the behavior when clicking on the 'edit' button (+ editor interaction)
+ * This component adapts the Wysiwyg widget from @web_editor/wysiwyg.js.
+ * In reality it encapsulate it so that this legacy widget can work in an OWL
+ * framework.
  */
-var EditPageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
-    assetLibs: ['web_editor.compiled_assets_wysiwyg', 'website.compiled_assets_wysiwyg'],
-    xmlDependencies: ['/website/static/src/xml/website.editor.xml'],
-    actions: _.extend({}, websiteNavbarData.WebsiteNavbarActionWidget.prototype.actions, {
-        edit: '_startEditMode',
-        on_save: '_onSave',
-    }),
-    custom_events: _.extend({}, websiteNavbarData.WebsiteNavbarActionWidget.custom_events || {}, {
-        content_will_be_destroyed: '_onContentWillBeDestroyed',
-        content_was_recreated: '_onContentWasRecreated',
-        snippet_will_be_cloned: '_onSnippetWillBeCloned',
-        snippet_cloned: '_onSnippetCloned',
-        snippet_dropped: '_onSnippetDropped',
-        snippet_removed: '_onSnippetRemoved',
-        request_save: '_onSnippetRequestSave',
-        request_cancel: '_onSnippetRequestCancel',
-    }),
-
+export class WysiwygAdapterComponent extends ComponentAdapter {
     /**
-     * @constructor
-     */
-    init: function (parent, options = {}) {
-        this._super.apply(this, arguments);
-        this.options = options;
-        this.wysiwygOptions = options.wysiwygOptions || {};
-        var context;
-        this.trigger_up('context_get', {
-            extra: true,
-            callback: function (ctx) {
-                context = ctx;
-            },
-        });
-        this.oeStructureSelector = '#wrapwrap .oe_structure[data-oe-xpath][data-oe-id]';
-        this.oeFieldSelector = '#wrapwrap [data-oe-field]';
-        this.oeCoverSelector = '#wrapwrap .s_cover[data-res-model], #wrapwrap .o_record_cover_container[data-res-model]';
-        if (options.savableSelector) {
-            this.savableSelector = options.savableSelector;
-        } else {
-            this.savableSelector = `${this.oeStructureSelector}, ${this.oeFieldSelector}, ${this.oeCoverSelector}`;
-        }
-        this.editableFromEditorMenu = options.editableFromEditorMenu || this.editableFromEditorMenu;
-        this._editorAutoStart = (context.editable && window.location.search.indexOf('enable_editor') >= 0);
-        var url = new URL(window.location.href);
-        url.searchParams.delete('enable_editor');
-        url.searchParams.delete('with_loader');
-        window.history.replaceState({}, null, url);
-    },
-    /**
-     * Auto-starts the editor if necessary or add the welcome message otherwise.
-     *
      * @override
      */
-    start() {
-        var def = this._super.apply(this, arguments);
+    setup() {
+        super.setup();
+        const options = this.props.options || {};
 
-        // If we auto start the editor, do not show a welcome message
-        if (this._editorAutoStart) {
-            return Promise.all([def, this._startEditMode()]);
-        }
+        this.websiteService = useWowlService('website');
+        useEffect(() => {
+            const initWysiwyg = async () => {
 
-        // Check that the page is empty
-        var $wrap = this._targetForEdition().filter('#wrapwrap.homepage').find('#wrap');
+                if (this.props.snippetSelector) {
+                    const snippetEl = $(this.websiteService.pageDocument).find(this.props.snippetSelector);
+                    await this.widget.snippetsMenu.activateSnippet($(snippetEl));
+                }
 
-        if ($wrap.length && $wrap.html().trim() === '') {
-            // If readonly empty page, show the welcome message
-            this.$welcomeMessage = $(core.qweb.render('website.homepage_editor_welcome_message'));
-            this.$welcomeMessage.addClass('o_homepage_editor_welcome_message');
-            this.$welcomeMessage.css('min-height', $wrap.parent('main').height() - ($wrap.outerHeight(true) - $wrap.height()));
-            $wrap.empty().append(this.$welcomeMessage);
-        }
+                this.props.wysiwygReady();
+            };
 
-        return def;
-    },
+            initWysiwyg();
+
+        }, () => []);
+    }
     /**
-     * Asks the snippets to clean themself, then saves the page, then reloads it
-     * if asked to.
-     *
-     * @param {boolean} [reload=true]
-     *        true if the page has to be reloaded after the save
-     * @returns {Promise}
+     * @override
      */
-    save: async function (reload = true) {
-        if (this._saving) {
-            return false;
-        }
-        this._saving = true;
-
-        this._prepareLeavingEditMode();
-
-        const destroy = () => {
-            this.wysiwyg.destroy();
-            this.destroy();
-        };
-        if (!this.wysiwyg.isDirty()) {
-            destroy();
-            window.location.reload();
-            return;
-        }
-
-        return this.wysiwyg.saveContent(false).then((result) => {
-            var $wrapwrap = $('#wrapwrap');
-            this.editableFromEditorMenu($wrapwrap).removeClass('o_editable');
-            if (reload) {
-                // remove top padding because the connected bar is not visible
-                $('body').removeClass('o_connected_user');
-                return this._reload();
-            } else {
-                destroy();
-                this.editModeEnabled = false;
-            }
-            return true;
-        }).guardedCatch(() => {
-            this._unprepareLeavingEditMode();
-            this._saving = false;
-        });
-    },
-    /**
-     * Asks the user if they really wants to discard their changes (if any),
-     * then simply reloads the page if they want to.
-     *
-     * @param {boolean} [reload=true]
-     *        true if the page has to be reloaded when the user answers yes
-     *        (do nothing otherwise but add this to allow class extension)
-     * @returns {Deferred}
-     */
-    cancel: function (reload = true) {
-        const prom = new Promise((resolve, reject) => {
-            if (!this.wysiwyg.isDirty()) {
-                resolve();
-            } else {
-                var confirm = Dialog.confirm(this, _t("If you discard the current edits, all unsaved changes will be lost. You can cancel to return to edit mode."), {
-                    confirm_callback: resolve,
-                });
-                confirm.on('closed', this, reject);
-            }
-        });
-
-        return prom.then(() => {
-            this._prepareLeavingEditMode();
-
-            var $wrapwrap = $('#wrapwrap');
-            this.editableFromEditorMenu($wrapwrap).removeClass('o_editable');
-            if (reload) {
-                window.onbeforeunload = null;
-                this.wysiwyg.destroy();
-                return this._reload();
-            } else {
-                this.wysiwyg.destroy();
-                this.trigger_up('readonly_mode');
-                this.destroy();
-
-                this.editModeEnabled = false;
-            }
-        });
-    },
-    /**
-     * Returns the editable areas on the page.
-     *
-     * @param {DOM} $wrapwrap
-     * @returns {jQuery}
-     */
-    editableFromEditorMenu: function ($wrapwrap) {
-        return $wrapwrap.find('[data-oe-model]')
-            .not('.o_not_editable')
-            .filter(function () {
-                var $parent = $(this).closest('.o_editable, .o_not_editable');
-                return !$parent.length || $parent.hasClass('o_editable');
-            })
-            .not('link, script')
-            .not('[data-oe-readonly]')
-            .not('img[data-oe-field="arch"], br[data-oe-field="arch"], input[data-oe-field="arch"]')
-            .not('.oe_snippet_editor')
-            .not('hr, br, input, textarea')
-            .add('.o_editable');
-    },
-
-    //--------------------------------------------------------------------------
-    // Actions
-    //--------------------------------------------------------------------------
-
-    /**
-     * Creates an editor instance and appends it to the DOM. Also remove the
-     * welcome message if necessary.
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _startEditMode: async function () {
-        var self = this;
-        if (this.editModeEnabled) {
-            return;
-        }
-        this.editModeEnabled = true;
-
-        $.blockUI({overlayCSS: {
-            backgroundColor: '#000',
-            opacity: 0,
-            zIndex: 1050
-        }, message: false});
-
-        this.trigger_up('widgets_stop_request', {
-            $target: this._targetForEdition(),
-        });
-        if (this.$welcomeMessage) {
-            this.$welcomeMessage.detach(); // detach from the readonly rendering before the clone by wysiwyg.
-        }
-
-        await this._createWysiwyg();
-
-        var res = await new Promise(function (resolve, reject) {
-            self.trigger_up('widgets_start_request', {
-                editableMode: true,
-                onSuccess: resolve,
-                onFailure: reject,
-            });
-        });
-
-        const $loader = $('div.o_theme_install_loader_container');
-        if ($loader) {
-            $loader.remove();
-        }
-
-        $.unblockUI();
-
-        return res;
-    },
-    /**
-     * On save, the editor will ask to parent widgets if something needs to be
-     * done first. The website navbar will receive that demand and asks to its
-     * action-capable components to do something. For example, the content menu
-     * handles page-related options saving. However, some users with limited
-     * access rights do not have the content menu... but the website navbar
-     * expects that the save action is performed. So, this empty action is
-     * defined here so that all users have an 'on_save' related action.
-     *
-     * @private
-     * @todo improve the system to somehow declare required/optional actions
-     */
-    _onSave: function () {},
+    get widgetArgs() {
+        return [this._wysiwygParams];
+    }
 
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
-    async _createWysiwyg() {
-        var $wrapwrap = $('#wrapwrap');
-        $wrapwrap.removeClass('o_editable'); // clean the dom before edition
-        this.editableFromEditorMenu($wrapwrap).addClass('o_editable');
-
-        this.wysiwyg = await this._wysiwygInstance();
-
-        await this.wysiwyg.attachTo($('#wrapwrap'));
-        this.trigger_up('edit_mode');
-        this.$el.css({width: ''});
-
-        // Only make the odoo structure and fields editable.
-        this.wysiwyg.odooEditor.observerUnactive();
-        $('#wrapwrap').on('click.odoo-website-editor', '*', this, this._preventDefault);
-        this._addEditorMessages(); // Insert editor messages in the DOM without observing.
-        if (this.options.beforeEditorActive) {
-            this.options.beforeEditorActive();
-        }
-        this.wysiwyg.odooEditor.observerActive();
-
-        // 1. Make sure every .o_not_editable is not editable.
-        // 2. Observe changes to mark dirty structures and fields.
-        const processRecords = (records) => {
-            records = this.wysiwyg.odooEditor.filterMutationRecords(records);
-            // Skip the step for this stack because if the editor undo the first
-            // step that has a dirty element, the following code would have
-            // generated a new stack and break the "redo" of the editor.
-            this.wysiwyg.odooEditor.automaticStepSkipStack();
-
-            for (const record of records) {
-                const $savable = $(record.target).closest(this.savableSelector);
-
-                if (record.attributeName === 'contenteditable') {
-                    continue;
-                }
-                $savable.not('.o_dirty').each(function () {
-                    if (!this.hasAttribute('data-oe-readonly')) {
-                        this.classList.add('o_dirty');
-                    }
-                });
-            }
-        };
-        this.observer = new MutationObserver(processRecords);
-        this._observe();
-
-        this.wysiwyg.odooEditor.addEventListener('observerUnactive', () => {
-            if (this.observer) {
-                processRecords(this.observer.takeRecords());
-                this.observer.disconnect();
-            }
-        });
-        this.wysiwyg.odooEditor.addEventListener('observerActive', () => {
-            this._observe();
-        });
-
-        $('body').addClass('editor_started');
-    },
-
-    _getContentEditableAreas () {
-        return $(this.savableSelector).not('input, [data-oe-readonly],[data-oe-type="monetary"],[data-oe-many2one-id], [data-oe-field="arch"]:empty').filter((_, el) => {
-            return !$(el).closest('.o_not_editable').length;
-        }).toArray();
-    },
-
-    _getReadOnlyAreas () {
-        return [];
-    },
     /**
      * @private
+     * @return {Object} Params to pass to the wysiwyg widget.
      */
-    _observe() {
-        if (this.observer) {
-            this.observer.observe(document.body, {
-                childList: true,
-                subtree: true,
-                attributes: true,
-                attributeOldValue: true,
-                characterData: true,
-            });
-        }
-    },
-    /**
-     * Cleans what must be cleaned for both saving and discarding the changes
-     * that were made during edition.
-     *
-     * @private
-     */
-    _prepareLeavingEditMode() {
-        if (this.observer) {
-            this.observer.disconnect();
-        }
-        if (this.$editorMessageElements) {
-            this.$editorMessageElements.removeAttr('data-editor-message');
-        }
-    },
-    /**
-     * Restores what was done in preparation of leaving the edit mode (e.g.
-     * in case leaving failed for example). @see _prepareLeavingEditMode.
-     *
-     * FIXME this method was created to make the existing code readable and
-     * logical but it cannot actually be called and have an editor that is still
-     * usable afterwards (if the save/cancel failed for some reason, the editor
-     * seems dead no matter what).
-     *
-     * @private
-     */
-    _unprepareLeavingEditMode() {
-        this._addEditorMessages();
-        this._observe();
-    },
-    /**
-     * Call preventDefault of an event.
-     *
-     * @private
-     */
-    _preventDefault(e) {
-        e.preventDefault();
-    },
-    /**
-     * Adds automatic editor messages on drag&drop zone elements.
-     *
-     * @private
-     */
-    _addEditorMessages: function () {
-        const $editable = this._targetForEdition().find('.oe_structure.oe_empty, [data-oe-type="html"]');
-        this.$editorMessageElements = $editable
-            .not('[data-editor-message]')
-            .attr('data-editor-message', _t('DRAG BUILDING BLOCKS HERE'));
-        $editable.filter(':empty').attr('contenteditable', false);
-    },
-    /**
-     * Returns the target for edition.
-     *
-     * @private
-     * @returns {JQuery}
-     */
-    _targetForEdition: function () {
-        return $('#wrapwrap'); // TODO should know about this element another way
-    },
-    /**
-     * Reloads the page in non-editable mode, with the right scrolling.
-     *
-     * @private
-     * @returns {Deferred} (never resolved, the page is reloading anyway)
-     */
-    _reload: function () {
-        $('body').addClass('o_wait_reload');
-        this.wysiwyg.destroy();
-        this.$el.hide();
-        window.location.hash = 'scrollTop=' + window.document.body.scrollTop;
-        window.location.reload(true);
-        return new Promise(function () {});
-    },
-    /**
-     * @private
-     */
-    _wysiwygInstance: function () {
-        // todo: retrieve other config if there is no #wrap element on the page (eg. product, blog, ect.)
-        let collaborationConfig = {};
-        // todo: To uncomment when enabling the collaboration on website.
-        // const $wrap = $('#wrapwrap #wrap[data-oe-model][data-oe-field][data-oe-id]');
-        // if ($wrap.length) {
-        //     collaborationConfig = {
-        //         collaborationChannel: {
-        //             collaborationModelName: $wrap.attr('data-oe-model'),
-        //             collaborationFieldName: $wrap.attr('data-oe-field'),
-        //             collaborationResId: parseInt($wrap.attr('data-oe-id')),
-        //         }
-        //     };
-        // }
-
-        var context;
-        this.trigger_up('context_get', {
-            callback: function (ctx) {
-                context = ctx;
-            },
-        });
-        const params = Object.assign({
-            snippets: 'website.snippets',
-            recordInfo: {
-                context: context,
-                data_res_model: 'website',
-                data_res_id: context.website_id,
-            },
-            enableWebsite: true,
-            discardButton: true,
-            saveButton: true,
-            devicePreview: true,
-            savableSelector: this.savableSelector,
-            isRootEditable: false,
-            controlHistoryFromDocument: true,
-            getContentEditableAreas: this._getContentEditableAreas.bind(this),
-            powerboxCommands: this._getSnippetsCommands(),
-            showEmptyElementHint: false,
-            getReadOnlyAreas: this._getReadOnlyAreas.bind(this),
-        }, collaborationConfig);
-        return wysiwygLoader.createWysiwyg(this,
-            Object.assign(params, this.wysiwygOptions),
-            ['website.compiled_assets_wysiwyg']
-        );
-    },
-    _getSnippetsCommands: function () {
-        const snippetCommandCallback = (selector) => {
-            const $separatorBody = $(selector);
-            const $clonedBody = $separatorBody.clone().removeClass('oe_snippet_body');
-            const range = this.wysiwyg.getDeepRange();
-            const block = this.wysiwyg.closestElement(range.endContainer, 'p, div, ol, ul, cl, h1, h2, h3, h4, h5, h6');
-            if (block) {
-                block.after($clonedBody[0]);
-                this.wysiwyg.snippetsMenu.callPostSnippetDrop($clonedBody);
-            }
-        };
-        return [
-            {
-                groupName: 'Website',
-                title: 'Alert',
-                description: 'Insert an alert snippet.',
-                fontawesome: 'fa-info',
-                callback: () => {
-                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_alert"]');
-                },
-            },
-            {
-                groupName: 'Website',
-                title: 'Rating',
-                description: 'Insert a rating snippet.',
-                fontawesome: 'fa-star-half-o',
-                callback: () => {
-                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_rating"]');
-                },
-            },
-            {
-                groupName: 'Website',
-                title: 'Card',
-                description: 'Insert a card snippet.',
-                fontawesome: 'fa-sticky-note',
-                callback: () => {
-                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_card"]');
-                },
-            },
-            {
-                groupName: 'Website',
-                title: 'Share',
-                description: 'Insert a share snippet.',
-                fontawesome: 'fa-share-square-o',
-                callback: () => {
-                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_share"]');
-                },
-            },
-            {
-                groupName: 'Website',
-                title: 'Text Highlight',
-                description: 'Insert a text Highlight snippet.',
-                fontawesome: 'fa-sticky-note',
-                callback: () => {
-                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_text_highlight"]');
-                },
-            },
-            {
-                groupName: 'Website',
-                title: 'Chart',
-                description: 'Insert a chart snippet.',
-                fontawesome: 'fa-bar-chart',
-                callback: () => {
-                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_chart"]');
-                },
-            },
-            {
-                groupName: 'Website',
-                title: 'Progress Bar',
-                description: 'Insert a progress bar snippet.',
-                fontawesome: 'fa-spinner',
-                callback: () => {
-                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_progress_bar"]');
-                },
-            },
-            {
-                groupName: 'Website',
-                title: 'Badge',
-                description: 'Insert a badge snippet.',
-                fontawesome: 'fa-tags',
-                callback: () => {
-                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_badge"]');
-                },
-            },
-            {
-                groupName: 'Website',
-                title: 'Blockquote',
-                description: 'Insert a blockquote snippet.',
-                fontawesome: 'fa-quote-left',
-                callback: () => {
-                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_blockquote"]');
-                },
-            },
-            {
-                groupName: 'Website',
-                title: 'Separator',
-                description: 'Insert an horizontal separator sippet.',
-                fontawesome: 'fa-minus',
-                callback: () => {
-                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_hr"]');
-                },
-            },
-        ];
-    },
-
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Called when content will be destroyed in the page. Notifies the
-     * WebsiteRoot that is should stop the public widgets.
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onContentWillBeDestroyed: function (ev) {
-        this.trigger_up('widgets_stop_request', {
-            $target: ev.data.$target,
-        });
-    },
-    /**
-     * Called when content was recreated in the page. Notifies the
-     * WebsiteRoot that is should start the public widgets.
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onContentWasRecreated: function (ev) {
-        this.trigger_up('widgets_start_request', {
-            editableMode: true,
-            $target: ev.data.$target,
-        });
-    },
-    /**
-     * Called when edition was stopped. Notifies the
-     * WebsiteRoot that is should start the public widgets.
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onEditionWasStopped: function (ev) {
-        this.editModeEnabled = false;
-    },
-    /**
-     * Called when a snippet is about to be cloned in the page. Notifies the
-     * WebsiteRoot that is should destroy the animations for this snippet.
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onSnippetWillBeCloned: function (ev) {
-        this.trigger_up('widgets_stop_request', {
-            $target: ev.data.$target,
-        });
-    },
-    /**
-     * Called when a snippet is cloned in the page. Notifies the WebsiteRoot
-     * that is should start the public widgets for this snippet and the snippet it
-     * was cloned from.
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onSnippetCloned: function (ev) {
-        this.trigger_up('widgets_start_request', {
-            editableMode: true,
-            $target: ev.data.$target,
-        });
-        // TODO: remove in saas-12.5, undefined $origin will restart #wrapwrap
-        if (ev.data.$origin) {
-            this.trigger_up('widgets_start_request', {
-                editableMode: true,
-                $target: ev.data.$origin,
-            });
-        }
-    },
-    /**
-     * Called when a snippet is dropped in the page. Notifies the WebsiteRoot
-     * that is should start the public widgets for this snippet. Also marks the
-     * wrapper element as non-empty and makes it editable.
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onSnippetDropped: function (ev) {
-        this._targetForEdition().find('.oe_structure.oe_empty, [data-oe-type="html"]')
-            .attr('contenteditable', true);
-        ev.data.addPostDropAsync(new Promise(resolve => {
-            this.trigger_up('widgets_start_request', {
-                editableMode: true,
-                $target: ev.data.$target,
-                onSuccess: () => resolve(),
-            });
-        }));
-    },
-    /**
-     * Called when a snippet is removed from the page. If the wrapper element is
-     * empty, marks it as such and shows the editor messages.
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onSnippetRemoved: function (ev) {
-        const $editable = this._targetForEdition().find('.oe_structure.oe_empty, [data-oe-type="html"]');
-        if (!$editable.children().length) {
-            $editable.empty(); // remove any superfluous whitespace
-            this._addEditorMessages();
-        }
-    },
-    /**
-     * Snippet (menu_data) can request to save the document to leave the page
-     *
-     * @private
-     * @param {OdooEvent} ev
-     * @param {object} ev.data
-     * @param {function} ev.data.onSuccess
-     * @param {function} ev.data.onFailure
-     */
-    _onSnippetRequestSave: function (ev) {
-        ev.stopPropagation();
-        const restore = dom.addButtonLoadingEffect($('button[data-action=save]')[0]);
-        this.save(ev.data.reload).then(ev.data.onSuccess, ev.data.onFailure).then(restore).guardedCatch(restore);
-    },
-    /**
-     * Asks the user if they really wants to discard their changes (if any),
-     * then simply reloads the page if they want to.
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onSnippetRequestCancel: function (ev) {
-        ev.stopPropagation();
-        this.cancel();
-    },
-});
-
-registry.category("website_navbar_widgets").add("EditPageMenu", {
-    Widget: EditPageMenu,
-    selector: '#edit-page-menu',
-});
-
-return EditPageMenu;
-});
+    get _wysiwygParams() {
+        return {};
+    }
+}
diff --git a/addons/website/static/src/js/content/redirect.js b/addons/website/static/src/js/content/redirect.js
index fc42161742f..8f4e765302a 100644
--- a/addons/website/static/src/js/content/redirect.js
+++ b/addons/website/static/src/js/content/redirect.js
@@ -75,5 +75,13 @@ document.addEventListener('DOMContentLoaded', () => {
             editInBackendUserDropdownLinkEl.classList.add('d-none');
             editInBackendUserDropdownLinkEl.classList.remove('d-flex');
         }
+
+        // Multiple reasons to do this:
+        // - It seems like DOMContentLoaded doesn't always trigger when
+        //   listened from the parent window
+        // - Having an event that's fire only when the page is from Odoo avoids
+        //   weird behaviours. (e.g. if we want to clear out the iframe, it might
+        //   fire an DOMContentLoaded on a non odoo page)
+        window.frameElement.dispatchEvent(new CustomEvent('OdooFrameContentLoaded'));
     }
 });
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 1ec9b4fbda2..fecb6325ed7 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -1,6 +1,9 @@
 /** @odoo-module **/
 
 import { registry } from '@web/core/registry';
+import core from 'web.core';
+import ajax from 'web.ajax';
+import { getWysiwygClass } from 'web_editor.loader';
 
 import { FullscreenIndication } from '../components/fullscreen_indication/fullscreen_indication';
 
@@ -29,8 +32,13 @@ export const websiteService = {
         let pageDocument;
         let contentWindow;
         let editedObjectPath;
+        let websiteRootInstance;
+        let Wysiwyg;
         const context = reactive({
             showNewContentModal: false,
+            edition: false,
+            isPublicRootReady: false,
+            snippetsLoaded: false,
         });
         const bus = new EventBus();
 
@@ -93,13 +101,23 @@ export const websiteService = {
             get contentWindow() {
                 return contentWindow;
             },
+            get websiteRootInstance() {
+                return websiteRootInstance;
+            },
+            set websiteRootInstance(rootInstance) {
+                websiteRootInstance = rootInstance;
+                context.isPublicRootReady = !!rootInstance;
+            },
             set editedObjectPath(path) {
                 editedObjectPath = path;
             },
             get editedObjectPath() {
                 return editedObjectPath;
             },
-            goToWebsite({ websiteId = currentWebsiteId || websites[0].id, path = '/' } = {}) {
+            get wysiwygLoaded() {
+                return !!Wysiwyg;
+            },
+            goToWebsite({ websiteId, path } = {}) {
                 action.doAction('website.website_preview', {
                     clearBreadcrumbs: true,
                     additionalContext: {
@@ -118,6 +136,13 @@ export const websiteService = {
                 websites = [...allWebsites];
                 setCurrentWebsiteId(unslugHtmlDataObject(currentWebsiteRepr).id);
             },
+            async loadWysiwyg() {
+                if (!Wysiwyg) {
+                    await ajax.loadXML('/website/static/src/xml/website.editor.xml', core.qweb);
+                    Wysiwyg = await getWysiwygClass({wysiwygAlias: 'website.wysiwyg'}, ['website.compiled_assets_wysiwyg']);
+                }
+                return Wysiwyg;
+            }
         };
     },
 };
diff --git a/addons/website/static/src/systray_items/edit_website.js b/addons/website/static/src/systray_items/edit_website.js
index 885654fca6a..0b52d80c732 100644
--- a/addons/website/static/src/systray_items/edit_website.js
+++ b/addons/website/static/src/systray_items/edit_website.js
@@ -1,10 +1,33 @@
 /** @odoo-module **/
 
 import { registry } from "@web/core/registry";
+import { useService } from '@web/core/utils/hooks';
 
-const { Component } = owl;
+const { Component, useState, useEffect } = owl;
 
-class EditWebsiteSystray extends Component {}
+class EditWebsiteSystray extends Component {
+    setup(options = {}) {
+        this.websiteService = useService('website');
+        this.websiteContext = useState(this.websiteService.context);
+
+        this.state = useState({
+            isLoading: false,
+        });
+
+        useEffect((edition, snippetsLoaded) => {
+            if (snippetsLoaded) {
+                this.state.isLoading = false;
+            }
+            if (edition && !this.websiteService.wysiwygLoaded) {
+                this.state.isLoading = true;
+            }
+        }, () => [this.websiteContext.edition, this.websiteContext.snippetsLoaded]);
+    }
+
+    startEdit() {
+        this.websiteContext.edition = true;
+    }
+}
 EditWebsiteSystray.template = "website.EditWebsiteSystray";
 
 export const systrayItem = {
diff --git a/addons/website/static/src/systray_items/edit_website.xml b/addons/website/static/src/systray_items/edit_website.xml
index f7d8e1612cd..ec3dea29187 100644
--- a/addons/website/static/src/systray_items/edit_website.xml
+++ b/addons/website/static/src/systray_items/edit_website.xml
@@ -1,8 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 <t t-name="website.EditWebsiteSystray" owl="1">
-    <div class="o_menu_systray_item o_edit_website_container">
-        <a href="#" accesskey="a"><span class="fa fa-pencil mr-2"/>Edit</a>
+    <div class="o_edit_website_container o_edit_website_container">
+        <a href="#" accesskey="a" t-on-click="startEdit">
+            <span class="fa mr-2" t-att-class="{ 'fa-refresh fa-spin': this.state.isLoading, 'fa-pencil': !this.state.isLoading }"/>
+            Edit
+        </a>
     </div>
 </t>
 </templates>

From d9076d0976437597883d74a30882d31958e51d7c Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Fri, 22 Apr 2022 09:52:19 +0200
Subject: [PATCH 39/88] [IMP] website, web_editor: move code for backend
 edition

This commit takes previously existing code and moves it to the new
location where it will be currently used by the new website editor.

Some SCSS rules were now necessary in both the frontend and the backend
(i.e SCSS for o_we_shapes). Optimizations about assets will follow this
merge.

Some code were moved to new components (i.e reloadBundle moved from
snippets.options to wysiwyg_adapter)

And some code was taken away from widgets that will be removed
(i.e edit.js).

See merge commit for more information.

task-2687506
---
 .../static/src/scss/web_editor.common.scss    |  57 +++-
 .../static/src/scss/web_editor.frontend.scss  |  56 +---
 .../website_preview/website_preview.js        |  24 ++
 .../website_preview/website_preview.xml       |   5 +
 .../static/src/components/editor/editor.scss  |  93 ++++++
 .../wysiwyg_adapter/wysiwyg_adapter.js        | 282 ++++++++++++++++++
 .../static/src/js/editor/snippets.options.js  |  33 --
 .../static/src/scss/website.editor.ui.scss    |  51 ----
 .../website/static/src/scss/website.ui.scss   |  29 --
 .../website/static/src/xml/website.editor.xml |   5 -
 10 files changed, 461 insertions(+), 174 deletions(-)

diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 321a0a3bb01..a6019670192 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -857,7 +857,6 @@ section, .oe_img_bg, [data-oe-shape-data] {
 .cover_mid {
     @extend .o_half_screen_height;
 }
-
 // Smaller container
 .o_container_small {
     @extend .container;
@@ -939,3 +938,59 @@ section, .oe_img_bg, [data-oe-shape-data] {
     z-index: 1051;
     background-color: white;
 }
+
+// Background shapes
+@function compute-shape-url-params($colors, $color-to-cc-bg-map) {
+    $url-params: '';
+    @each $i in $colors {
+        $mapped-color: map-get($color-to-cc-bg-map, $i);
+        // %23 is the url-encoded form of '#'
+        $color: str-replace("#{o-color($mapped-color)}", '#', '%23');
+        $url-params: '#{$url-params}&c#{$i}=#{$color}';
+    }
+    @return $url-params;
+}
+
+.o_we_shape {
+    @extend %o-we-background-layer;
+
+    // Default map to use to map shape file colors to color combination
+    // background colors.
+    $default-color-to-cc-bg-map: (
+        1: 4,
+        2: 3,
+        3: 2,
+        4: 1,
+        5: 5,
+    );
+    @each $module, $shapes in $o-bg-shapes {
+        @each $shape, $style in $shapes {
+            $colors: map-get($style, 'colors');
+            $color-to-cc-bg-map: map-merge($default-color-to-cc-bg-map, map-get($style, 'color-to-cc-bg-map') or ());
+            $url-params: compute-shape-url-params($colors, $color-to-cc-bg-map);
+            $extra-mappings: map-get($style, 'extra-mappings') or ();
+
+            // eg: o_website_shape_bg_1
+            &.o_#{$module}_#{str-replace($shape, '/', '_')} {
+                // When the shape is not customized, this URL, built in SCSS,
+                // allows for the shape to respond to palette changes.
+                // Mainly useful for default pages built by the configurator.
+                background-image: url("/web_editor/shape/#{$module}/#{$shape}.svg?#{str-slice($url-params, 2)}");
+                background-position: map-get($style, 'position');
+                background-size: map-get($style, 'size');
+                background-repeat:
+                    if(map-get($style, 'repeat-x'), repeat, no-repeat)
+                    if(map-get($style, 'repeat-y'), repeat, no-repeat);
+
+                @each $mapping-name, $mapping in $extra-mappings {
+                    $color-to-cc-bg-map: map-merge($default-color-to-cc-bg-map, $mapping or ());
+                    $url-params: compute-shape-url-params($colors, $color-to-cc-bg-map);
+
+                    &.o_#{$mapping-name}_extra_shape_mapping {
+                        background-image: url("/web_editor/shape/#{$module}/#{$shape}.svg?#{str-slice($url-params, 2)}");
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/addons/web_editor/static/src/scss/web_editor.frontend.scss b/addons/web_editor/static/src/scss/web_editor.frontend.scss
index dca621efeb6..dabde998bd4 100644
--- a/addons/web_editor/static/src/scss/web_editor.frontend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.frontend.scss
@@ -29,61 +29,6 @@
         }
     }
 }
-
-// Background shapes
-@function compute-shape-url-params($colors, $color-to-cc-bg-map) {
-    $url-params: '';
-    @each $i in $colors {
-        $mapped-color: map-get($color-to-cc-bg-map, $i);
-        // %23 is the url-encoded form of '#'
-        $color: str-replace("#{o-color($mapped-color)}", '#', '%23');
-        $url-params: '#{$url-params}&c#{$i}=#{$color}';
-    }
-    @return $url-params;
-}
-.o_we_shape {
-    @extend %o-we-background-layer;
-
-    // Default map to use to map shape file colors to color combination
-    // background colors.
-    $default-color-to-cc-bg-map: (
-        1: 4,
-        2: 3,
-        3: 2,
-        4: 1,
-        5: 5,
-    );
-    @each $module, $shapes in $o-bg-shapes {
-        @each $shape, $style in $shapes {
-            $colors: map-get($style, 'colors');
-            $color-to-cc-bg-map: map-merge($default-color-to-cc-bg-map, map-get($style, 'color-to-cc-bg-map') or ());
-            $url-params: compute-shape-url-params($colors, $color-to-cc-bg-map);
-            $extra-mappings: map-get($style, 'extra-mappings') or ();
-
-            // eg: o_website_shape_bg_1
-            &.o_#{$module}_#{str-replace($shape, '/', '_')} {
-                // When the shape is not customized, this URL, built in SCSS,
-                // allows for the shape to respond to palette changes.
-                // Mainly useful for default pages built by the configurator.
-                background-image: url("/web_editor/shape/#{$module}/#{$shape}.svg?#{str-slice($url-params, 2)}");
-                background-position: map-get($style, 'position');
-                background-size: map-get($style, 'size');
-                background-repeat:
-                    if(map-get($style, 'repeat-x'), repeat, no-repeat)
-                    if(map-get($style, 'repeat-y'), repeat, no-repeat);
-
-                @each $mapping-name, $mapping in $extra-mappings {
-                    $color-to-cc-bg-map: map-merge($default-color-to-cc-bg-map, $mapping or ());
-                    $url-params: compute-shape-url-params($colors, $color-to-cc-bg-map);
-
-                    &.o_#{$mapping-name}_extra_shape_mapping {
-                        background-image: url("/web_editor/shape/#{$module}/#{$shape}.svg?#{str-slice($url-params, 2)}");
-                    }
-                }
-            }
-        }
-    }
-}
 @include media-breakpoint-down(sm) {
     .o_we_shape {
         display: none;
@@ -98,3 +43,4 @@
 .o_we_flip_x.o_we_flip_y {
     transform: scale(-1);
 }
+
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 7a2c84c5304..afac4cdb4ea 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -2,6 +2,7 @@
 
 import { registry } from '@web/core/registry';
 import { useService } from '@web/core/utils/hooks';
+import core from 'web.core';
 import { WebsiteEditorComponent } from '../../components/editor/editor';
 
 const { Component, onWillStart, useRef, useEffect, useState } = owl;
@@ -33,6 +34,16 @@ export class WebsitePreview extends Component {
                 this.websiteService.contentWindow = null;
             };
         }, () => [this.props.action.context.params]);
+
+        useEffect(() => {
+            if (this.websiteContext.edition) {
+                if (this.$welcomeMessage) {
+                    this.$welcomeMessage.detach();
+                }
+            } else {
+                this.addWelcomeMessage();
+            }
+        }, () => [this.websiteContext.edition]);
     }
 
     get websiteId() {
@@ -88,6 +99,16 @@ export class WebsitePreview extends Component {
         });
     }
 
+    addWelcomeMessage() {
+        const $wrap = $(this.iframe.el.contentDocument.querySelector('#wrapwrap.homepage')).find('#wrap');
+        if ($wrap.length && $wrap.html().trim() === '') {
+            this.$welcomeMessage = $(core.qweb.render('website.homepage_editor_welcome_message'));
+            this.$welcomeMessage.addClass('o_homepage_editor_welcome_message');
+            this.$welcomeMessage.css('min-height', $wrap.parent('main').height() - ($wrap.outerHeight(true) - $wrap.height()));
+            $wrap.empty().append(this.$welcomeMessage);
+        }
+    }
+
     /**
      * Returns true if the url should be opened in the top
      * window.
@@ -112,6 +133,9 @@ export class WebsitePreview extends Component {
         this.websiteService.pageDocument = this.iframe.el.contentDocument;
         this.websiteService.contentWindow = this.iframe.el.contentWindow;
         this.iframe.el.contentWindow.addEventListener('PUBLIC-ROOT-READY', (event) => {
+            if (!this.websiteContext.edition) {
+                this.addWelcomeMessage();
+            }
             this.websiteService.websiteRootInstance = event.detail.rootInstance;
         });
 
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml
index 74edc44ffd0..ad4e3254506 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.xml
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml
@@ -13,4 +13,9 @@
     <WebsiteEditorComponent t-if="websiteContext.edition"
         reloadIframe.bind="this.reloadIframe"/>
 </t>
+
+<div t-name="website.homepage_editor_welcome_message" class="container text-center o_homepage_editor_welcome_message">
+    <h2 class="mt0">Welcome to your <b>Homepage</b>!</h2>
+    <p class="lead d-none d-md-block">Click on <b>Edit</b> in the top right corner to start designing.</p>
+</div>
 </templates>
diff --git a/addons/website/static/src/components/editor/editor.scss b/addons/website/static/src/components/editor/editor.scss
index a19f3bd6718..c4cfc411af6 100644
--- a/addons/website/static/src/components/editor/editor.scss
+++ b/addons/website/static/src/components/editor/editor.scss
@@ -1,3 +1,96 @@
+// FIXME: Duplicate code from web_editor/wysiwyg_snippets.scss
+.editor_has_snippets {
+    overflow: hidden;
+    > .oe_overlay.ui-draggable {
+        .o_handles {
+            display: none;
+        }
+    }
+    .o_notification_manager {
+        @include o-position-absolute($top: map-get($spacers, 2), $right: calc(#{$o-we-sidebar-width} + 0.5rem));
+    }
+}
+
+// SCSS ported over from website.ui.scss
+.ui-autocomplete.o_website_ui_autocomplete {
+    max-width: 400px;
+    font-size: $o-we-sidebar-font-size;
+    border: none;
+    background-color: $o-we-sidebar-content-field-dropdown-bg;
+    box-shadow: $o-we-sidebar-content-field-dropdown-shadow;
+    > li {
+        border-bottom: $o-we-sidebar-content-field-border-width solid lighten($o-we-sidebar-content-field-dropdown-border-color, 15%);
+        border-radius: $o-we-sidebar-content-field-border-radius;
+        background-color: $o-we-sidebar-content-field-clickable-bg;
+        color: $o-we-sidebar-content-field-clickable-color;
+        &.ui-menu-item {
+            > div {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                line-height: 20px;
+                &.ui-state-active {
+                    border: $o-we-sidebar-content-field-dropdown-border-width solid transparent;
+                    background-color: $o-we-sidebar-content-field-dropdown-item-bg-hover;
+                }
+            }
+        }
+        &.ui-autocomplete-category {
+            background-color: $o-we-bg-lighter;
+        }
+    }
+}
+.o_we_slider_tint input[type="range"] {
+    background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
+    height: $o-we-sidebar-content-field-progress-control-height !important;
+    padding: 0 !important;
+    cursor: pointer;
+
+    @mixin slider-track {
+        $margin-horizontal: $o-we-sidebar-content-field-progress-control-height / -2;
+        background-color: transparent !important;
+        margin: 0 $margin-horizontal 0 $margin-horizontal;
+    }
+    &::-webkit-slider-runnable-track {
+        @include slider-track;
+    }
+    &::-moz-range-track {
+        @include slider-track;
+    }
+    &::-moz-range-progress {
+        @include slider-track;
+    }
+    @mixin slider-thumb {
+        appearance: none !important;
+        height: $o-we-sidebar-content-field-colorpicker-size !important;
+        border: 1px solid $o-we-bg-dark !important;
+        box-shadow: inset 0 0 0 1px white !important;
+        background: transparent !important;
+        border-radius: 0 !important;
+        margin-top: -5% !important;
+    }
+    &::-webkit-slider-thumb {
+        @include slider-thumb;
+    }
+    &::-moz-range-thumb {
+        @include slider-thumb;
+    }
+}
+
+.o_we_gray_preview {
+    cursor: pointer;
+
+    span {
+        flex: 1;
+        margin: 0 !important;
+        height: $o-we-sidebar-content-field-colorpicker-size;
+        min-width: 0 !important;
+    }
+    div {
+        width: 100%;
+    }
+}
+
 .o_w_wysiwyg, .o_loading_dummy {
     #oe_snippets {
         transform: none;
diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
index 010be484256..fed0aa61f31 100644
--- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
@@ -21,8 +21,22 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
         const options = this.props.options || {};
 
         this.websiteService = useWowlService('website');
+        this.oeStructureSelector = '#wrapwrap .oe_structure[data-oe-xpath][data-oe-id]';
+        this.oeFieldSelector = '#wrapwrap [data-oe-field]';
+        this.oeCoverSelector = '#wrapwrap .s_cover[data-res-model], #wrapwrap .o_record_cover_container[data-res-model]';
+        if (options.savableSelector) {
+            this.savableSelector = options.savableSelector;
+        } else {
+            this.savableSelector = `${this.oeStructureSelector}, ${this.oeFieldSelector}, ${this.oeCoverSelector}`;
+        }
         useEffect(() => {
             const initWysiwyg = async () => {
+                this.$editable.on('click.odoo-website-editor', '*', this, this._preventDefault);
+                // Disable OdooEditor observer's while setting up classes
+                this.widget.odooEditor.observerUnactive();
+                this._addEditorMessages();
+                this.widget.odooEditor.observerActive();
+                this._setObserver();
 
                 if (this.props.snippetSelector) {
                     const snippetEl = $(this.websiteService.pageDocument).find(this.props.snippetSelector);
@@ -34,8 +48,31 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
 
             initWysiwyg();
 
+            return () => {
+                this.$editable.off('click.odoo-website-editor', '*');
+            };
         }, () => []);
     }
+    /**
+     * Returns the elements on the page which are editable.
+     *
+     * @param $wrapwrap
+     * @returns {*}
+     */
+    editableElements($wrapwrap) {
+        return $wrapwrap.find('[data-oe-model]')
+            .not('.o_not_editable')
+            .filter(function () {
+                var $parent = $(this).closest('.o_editable, .o_not_editable');
+                return !$parent.length || $parent.hasClass('o_editable');
+            })
+            .not('link, script')
+            .not('[data-oe-readonly]')
+            .not('img[data-oe-field="arch"], br[data-oe-field="arch"], input[data-oe-field="arch"]')
+            .not('.oe_snippet_editor')
+            .not('hr, br, input, textarea')
+            .add('.o_editable');
+    }
     /**
      * @override
      */
@@ -52,6 +89,251 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
      * @return {Object} Params to pass to the wysiwyg widget.
      */
     get _wysiwygParams() {
+        const context = this.userService.context;
+        return {
+            snippets: 'website.snippets',
+            recordInfo: {
+                context: context,
+                data_res_model: 'website',
+                data_res_id: context.website_id,
+            },
+            editable: this.$editable,
+            discardButton: true,
+            saveButton: true,
+            devicePreview: true,
+            savableSelector: this.savableSelector,
+            isRootEditable: false,
+            controlHistoryFromDocument: true,
+            getContentEditableAreas: this._getContentEditableAreas.bind(this),
+            document: this.websiteService.pageDocument,
+            sideAttach: true,
+            isWebsite: true, // If set to true, it will trigger isolated behaviours in website patches. (.include)
+            powerboxCommands: this._getSnippetsCommands(),
+            showEmptyElementHint: false,
+            getReadOnlyAreas: this._getReadOnlyAreas.bind(this),
+        };
+    }
+    /**
+     * Sets the observer so that if any change happen to the body and such
+     * changes should be saved, the class 'o_dirty' is added to elements
+     * that were changed.
+     *
+     * @private
+     */
+    _setObserver() {
+        const processRecords = (records) => {
+            records = this.widget.odooEditor.filterMutationRecords(records);
+            // Skip the step for this stack because if the editor undo the first
+            // step that has a dirty element, the following code would have
+            // generated a new stack and break the "redo" of the editor.
+            this.widget.odooEditor.automaticStepSkipStack();
+            for (const record of records) {
+                const $savable = $(record.target).closest(this.savableSelector);
+
+                if (record.attributeName === 'contenteditable') {
+                    continue;
+                }
+                $savable.not('.o_dirty').each(function () {
+                    if (!this.hasAttribute('data-oe-readonly')) {
+                        this.classList.add('o_dirty');
+                    }
+                });
+            }
+        };
+        this.observer = new MutationObserver(processRecords);
+
+        this._observe();
+
+        this.widget.odooEditor.addEventListener('observerUnactive', () => {
+            if (this.observer) {
+                processRecords(this.observer.takeRecords());
+                this.observer.disconnect();
+            }
+        });
+        this.widget.odooEditor.addEventListener('observerActive', this._observe.bind(this));
+    }
+    /**
+     * @private
+     */
+     _observe() {
+        if (this.observer) {
+            this.observer.observe(this.websiteService.pageDocument.body, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeOldValue: true,
+                characterData: true,
+            });
+        }
+    }
+    /**
+     * Adds automatic editor messages on drag&drop zone elements.
+     *
+     * @private
+     */
+    _addEditorMessages() {
+        const $wrap = this.$editable.find('.oe_structure.oe_empty, [data-oe-type="html"]');
+        this.$editorMessageElement = $wrap.not('[data-editor-message]')
+                .attr('data-editor-message', _t('DRAG BUILDING BLOCKS HERE'));
+        $wrap.filter(':empty').attr('contenteditable', false);
+    }
+    /**
+     * Get the areas on the page that should be editable.
+     *
+     * @returns {Node[]} list of nodes that can be edited.
+     */
+    _getContentEditableAreas() {
+        const savableElements = $(this.websiteService.pageDocument).find(this.savableSelector)
+                                .not('input, [data-oe-readonly],[data-oe-type="monetary"],[data-oe-many2one-id], [data-oe-field="arch"]:empty');
+        return Array.from(savableElements).filter(element => !element.closest('.o_not_editable'));
+    }
+    _getReadOnlyAreas() {
+        return [];
+    }
+    _preventDefault(e) {
+        e.preventDefault();
+    }
+    /**
+     * @private
+     */
+     async _reloadBundles() {
+        const bundles = await this._rpc({
+            route: '/website/theme_customize_bundle_reload',
+        });
+        let $allLinks = $();
+        const proms = _.map(bundles, (bundleURLs, bundleName) => {
+            var $links = $('link[href*="' + bundleName + '"]');
+            $allLinks = $allLinks.add($links);
+            var $newLinks = $();
+            _.each(bundleURLs, url => {
+                $newLinks = $newLinks.add($('<link/>', {
+                    type: 'text/css',
+                    rel: 'stylesheet',
+                    href: url,
+                }));
+            });
+
+            const linksLoaded = new Promise(resolve => {
+                let nbLoaded = 0;
+                $newLinks.on('load error', () => { // If we have an error, just ignore it
+                    if (++nbLoaded >= $newLinks.length) {
+                        resolve();
+                    }
+                });
+            });
+            $links.last().after($newLinks);
+            return linksLoaded;
+        });
+        await Promise.all(proms).then(() => $allLinks.remove());
+    }
+    /**
+     * Returns the snippets commands for the powerbox
+     *
+     * @private
+     */
+    _getSnippetsCommands() {
+        const snippetCommandCallback = (selector) => {
+            const $separatorBody = $(selector);
+            const $clonedBody = $separatorBody.clone().removeClass('oe_snippet_body');
+            const range = this.widget.getDeepRange();
+            const block = this.widget.closestElement(range.endContainer, 'p, div, ol, ul, cl, h1, h2, h3, h4, h5, h6');
+            if (block) {
+                block.after($clonedBody[0]);
+                this.widget.snippetsMenu.callPostSnippetDrop($clonedBody);
+            }
+        };
+        return [
+            {
+                groupName: 'Website',
+                title: 'Alert',
+                description: 'Insert an alert snippet.',
+                fontawesome: 'fa-info',
+                callback: () => {
+                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_alert"]');
+                },
+            },
+            {
+                groupName: 'Website',
+                title: 'Rating',
+                description: 'Insert a rating snippet.',
+                fontawesome: 'fa-star-half-o',
+                callback: () => {
+                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_rating"]');
+                },
+            },
+            {
+                groupName: 'Website',
+                title: 'Card',
+                description: 'Insert a card snippet.',
+                fontawesome: 'fa-sticky-note',
+                callback: () => {
+                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_card"]');
+                },
+            },
+            {
+                groupName: 'Website',
+                title: 'Share',
+                description: 'Insert a share snippet.',
+                fontawesome: 'fa-share-square-o',
+                callback: () => {
+                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_share"]');
+                },
+            },
+            {
+                groupName: 'Website',
+                title: 'Text Highlight',
+                description: 'Insert a text Highlight snippet.',
+                fontawesome: 'fa-sticky-note',
+                callback: () => {
+                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_text_highlight"]');
+                },
+            },
+            {
+                groupName: 'Website',
+                title: 'Chart',
+                description: 'Insert a chart snippet.',
+                fontawesome: 'fa-bar-chart',
+                callback: () => {
+                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_chart"]');
+                },
+            },
+            {
+                groupName: 'Website',
+                title: 'Progress Bar',
+                description: 'Insert a progress bar snippet.',
+                fontawesome: 'fa-spinner',
+                callback: () => {
+                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_progress_bar"]');
+                },
+            },
+            {
+                groupName: 'Website',
+                title: 'Badge',
+                description: 'Insert a badge snippet.',
+                fontawesome: 'fa-tags',
+                callback: () => {
+                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_badge"]');
+                },
+            },
+            {
+                groupName: 'Website',
+                title: 'Blockquote',
+                description: 'Insert a blockquote snippet.',
+                fontawesome: 'fa-quote-left',
+                callback: () => {
+                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_blockquote"]');
+                },
+            },
+            {
+                groupName: 'Website',
+                title: 'Separator',
+                description: 'Insert an horizontal separator sippet.',
+                fontawesome: 'fa-minus',
+                callback: () => {
+                    snippetCommandCallback('.oe_snippet_body[data-snippet="s_hr"]');
+                },
+            },
+        ];
         return {};
     }
 }
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index b5cb4cf61c2..054ca016ee4 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -661,39 +661,6 @@ options.Class.include({
             });
         });
     },
-    /**
-     * @private
-     */
-    _reloadBundles: async function () {
-        const bundles = await this._rpc({
-            route: '/website/theme_customize_bundle_reload',
-        });
-        let $allLinks = $();
-        const proms = _.map(bundles, (bundleURLs, bundleName) => {
-            var $links = $('link[href*="' + bundleName + '"]');
-            $allLinks = $allLinks.add($links);
-            var $newLinks = $();
-            _.each(bundleURLs, url => {
-                $newLinks = $newLinks.add($('<link/>', {
-                    type: 'text/css',
-                    rel: 'stylesheet',
-                    href: url,
-                }));
-            });
-
-            const linksLoaded = new Promise(resolve => {
-                let nbLoaded = 0;
-                $newLinks.on('load error', () => { // If we have an error, just ignore it
-                    if (++nbLoaded >= $newLinks.length) {
-                        resolve();
-                    }
-                });
-            });
-            $links.last().after($newLinks);
-            return linksLoaded;
-        });
-        await Promise.all(proms).then(() => $allLinks.remove());
-    },
     /**
      * @override
      */
diff --git a/addons/website/static/src/scss/website.editor.ui.scss b/addons/website/static/src/scss/website.editor.ui.scss
index d646b7e4727..cdc3a5e6dc1 100644
--- a/addons/website/static/src/scss/website.editor.ui.scss
+++ b/addons/website/static/src/scss/website.editor.ui.scss
@@ -59,57 +59,6 @@ $o-we-switch-inactive-color: rgba($text-muted, 0.4) !default;
     }
 }
 
-.o_we_slider_tint input[type="range"] {
-    background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
-    height: $o-we-sidebar-content-field-progress-control-height !important;
-    padding: 0 !important;
-    cursor: pointer;
-
-    @mixin slider-track {
-        $margin-horizontal: $o-we-sidebar-content-field-progress-control-height / -2;
-        background-color: transparent !important;
-        margin: 0 $margin-horizontal 0 $margin-horizontal;
-    }
-    &::-webkit-slider-runnable-track {
-        @include slider-track;
-    }
-    &::-moz-range-track {
-        @include slider-track;
-    }
-    &::-moz-range-progress {
-        @include slider-track;
-    }
-    @mixin slider-thumb {
-        appearance: none !important;
-        height: $o-we-sidebar-content-field-colorpicker-size !important;
-        border: 1px solid $o-we-bg-dark !important;
-        box-shadow: inset 0 0 0 1px white !important;
-        background: transparent !important;
-        border-radius: 0 !important;
-        margin-top: -5% !important;
-    }
-    &::-webkit-slider-thumb {
-        @include slider-thumb;
-    }
-    &::-moz-range-thumb {
-        @include slider-thumb;
-    }
-}
-
-.o_we_gray_preview {
-    cursor: pointer;
-
-    span {
-        flex: 1;
-        margin: 0 !important;
-        height: $o-we-sidebar-content-field-colorpicker-size;
-        min-width: 0 !important;
-    }
-    div {
-        width: 100%;
-    }
-}
-
 .o_new_content_loader_container {
     background-color: rgba($o-shadow-color, .9);
     pointer-events: all;
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index e73fa3a9cb5..c5dc67003cb 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -545,35 +545,6 @@ body .modal {
     }
 }
 
-.ui-autocomplete.o_website_ui_autocomplete {
-    max-width: 400px;
-    font-size: $o-we-sidebar-font-size;
-    border: none;
-    background-color: $o-we-sidebar-content-field-dropdown-bg;
-    box-shadow: $o-we-sidebar-content-field-dropdown-shadow;
-    > li {
-        border-bottom: $o-we-sidebar-content-field-border-width solid lighten($o-we-sidebar-content-field-dropdown-border-color, 15%);
-        border-radius: $o-we-sidebar-content-field-border-radius;
-        background-color: $o-we-sidebar-content-field-clickable-bg;
-        color: $o-we-sidebar-content-field-clickable-color;
-        &.ui-menu-item {
-            > div {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                line-height: 20px;
-                &.ui-state-active {
-                    border: $o-we-sidebar-content-field-dropdown-border-width solid transparent;
-                    background-color: $o-we-sidebar-content-field-dropdown-item-bg-hover;
-                }
-            }
-        }
-        &.ui-autocomplete-category {
-            background-color: $o-we-bg-lighter;
-        }
-    }
-}
-
 // Page Properties
 .o_redirect_old_url {
     @include media-breakpoint-down(sm) {
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index d02bf4e6093..1e867a3240b 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -1,10 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
-    <div t-name="website.homepage_editor_welcome_message" class="container text-center o_homepage_editor_welcome_message">
-        <h2 class="mt0">Welcome to your <b>Homepage</b>!</h2>
-        <p class="lead d-none d-md-block">Click on <b>Edit</b> in the top right corner to start designing.</p>
-    </div>
-
     <!-- Custom checkbox (material-design-like toggle) -->
     <t t-name="website.components.switch">
         <label class="o_switch dropdown-item m-0" t-att-for="id">

From 03c552690b15cbf2e7d6b7812386ac64042219af Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Fri, 22 Apr 2022 09:56:52 +0200
Subject: [PATCH 40/88] [IMP] website, *: adapt code so that it may work with
 an external editor

*: mass_mailing, web, web_editor, website_blog, website_event,
   website_event_meet, website_livechat, website_sale, website_twitter,
   base

This commit does 3 things:

- Adapt existing code so that the editor can be run outside of its
  editing element. Prior to this commit, it was expected that the
  editor would be attached to the element it was currently editing.
  This needs to change however as the editable is now inside an
  iframe for the website edition. mass_mailing already had a similar
  approach but the editor was started within the iframe.
  With these changes, the editor is alongside the iframe, editing
  the content that's inside it. This allows multiple features
  such as reloading the iframe while keeping the editor visible and
  resizing the iframe for a mobile preview.

- Adds logic to the wysiwyg_adapter so that it can undertake
  the duty of the previous widget sytem. The wysiwyg existed not only
  in the legacy widget system, but most importantly in the frontend.
  One of the duties of this adapter is to send events inside the
  iframe when it is necessary to reach the frontend public widget
  (i.e. widgets_start_request)

- Removes existing SCSS that is no longer used.

See merge commit for more information.

task-2687506
---
 .../static/src/scss/mass_mailing.ui.scss      |   3 +
 .../src/legacy/js/public/public_root.js       |   1 -
 .../src/legacy/js/widgets/colorpicker.js      |   1 +
 addons/web_editor/static/src/js/base.js       |  37 --
 .../static/src/js/editor/snippets.editor.js   |  90 +++--
 .../static/src/js/editor/snippets.options.js  |  36 +-
 .../static/src/js/frontend/loader.js          |  11 +-
 .../js/wysiwyg/widgets/link_popover_widget.js |   8 +-
 .../static/src/js/wysiwyg/wysiwyg.js          |  13 +-
 .../web_editor/static/src/scss/wysiwyg.scss   |   2 +-
 .../static/src/scss/wysiwyg_snippets.scss     |   9 +-
 addons/website/__manifest__.py                |  33 +-
 addons/website/controllers/main.py            |   7 +-
 .../static/src/components/dialog/edit_menu.js |   8 +-
 .../static/src/components/editor/editor.js    |  33 +-
 .../static/src/components/editor/editor.scss  |   8 -
 .../static/src/components/navbar/navbar.js    |   8 +-
 .../wysiwyg_adapter/page_options.js           |  53 +++
 .../wysiwyg_adapter/wysiwyg_adapter.js        | 341 ++++++++++++++++--
 .../src/js/content/snippets.animation.js      |   6 +-
 addons/website/static/src/js/editor/editor.js |   5 +-
 .../static/src/js/editor/snippets.editor.js   |  19 +-
 .../static/src/js/editor/snippets.options.js  |  91 +++--
 .../static/src/js/editor/widget_link.js       |   5 +-
 .../website/static/src/js/editor/wysiwyg.js   |  37 +-
 addons/website/static/src/js/utils.js         |   7 +-
 .../src/js/widgets/link_popover_widget.js     |  51 ++-
 .../static/src/scss/website.edit_mode.scss    |  59 ++-
 .../static/src/scss/website.editor.ui.scss    |   7 -
 addons/website/static/src/scss/website.scss   |  52 +--
 .../static/src/snippets/s_countdown/000.js    |   1 -
 .../src/snippets/s_countdown/options.js       |   6 +-
 .../src/snippets/s_facebook_page/000.js       |   2 +-
 .../src/snippets/s_facebook_page/options.js   |   5 +-
 .../static/src/snippets/s_popup/options.js    |  23 +-
 addons/website/views/snippets/snippets.xml    |   2 +-
 addons/website/views/website_templates.xml    |   4 +-
 addons/website_blog/static/src/js/wysiwyg.js  |   2 +-
 .../static/src/snippets/options.js            |  44 +--
 .../static/src/js/snippets/options.js         |   2 +-
 .../static/src/legacy/public_livechat.scss    |  10 +-
 addons/website_sale/__manifest__.py           |   2 +-
 .../static/src/js/website_sale.editor.js      |  37 +-
 .../website_sale/views/snippets/snippets.xml  |   2 +-
 .../static/src/js/website.twitter.editor.js   |   4 +-
 odoo/addons/base/models/ir_qweb.py            |   4 +-
 46 files changed, 786 insertions(+), 405 deletions(-)
 create mode 100644 addons/website/static/src/components/wysiwyg_adapter/page_options.js

diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
index 008a8631c25..c67f47e21f7 100644
--- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
+++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
@@ -336,6 +336,9 @@ body.editor_enable.o_basic_theme.o_in_iframe {
             display: block;
         }
     }
+    #oe_snippets.o_loaded {
+        transform: translateX(0);
+    }
 }
 
 
diff --git a/addons/web/static/src/legacy/js/public/public_root.js b/addons/web/static/src/legacy/js/public/public_root.js
index 5401487f1f8..5571ebba226 100644
--- a/addons/web/static/src/legacy/js/public/public_root.js
+++ b/addons/web/static/src/legacy/js/public/public_root.js
@@ -185,7 +185,6 @@ export const PublicRoot = publicWidget.RootWidget.extend({
                 $from = this.$el;
             }
         }
-
         options = Object.assign({}, options, {
             wysiwyg: $('#wrapwrap').data('wysiwyg'),
         });
diff --git a/addons/web/static/src/legacy/js/widgets/colorpicker.js b/addons/web/static/src/legacy/js/widgets/colorpicker.js
index 41dc2f1ab9a..d0745f2a454 100644
--- a/addons/web/static/src/legacy/js/widgets/colorpicker.js
+++ b/addons/web/static/src/legacy/js/widgets/colorpicker.js
@@ -41,6 +41,7 @@ var ColorpickerWidget = Widget.extend({
 
         // Needs to be bound on document to work in all possible cases.
         const $document = $(
+            parent.options.ownerDocument ||
             (parent.el && parent.el.parentElement && parent.el.ownerDocument)
             || (parent.options && parent.options.$editable && parent.options.$editable[0] && parent.options.$editable[0].ownerDocument)
             || document);
diff --git a/addons/web_editor/static/src/js/base.js b/addons/web_editor/static/src/js/base.js
index 7d807114e6e..0bbda3bfcea 100644
--- a/addons/web_editor/static/src/js/base.js
+++ b/addons/web_editor/static/src/js/base.js
@@ -125,43 +125,6 @@ return {
 
 //==============================================================================
 
-odoo.define('web_editor.context', function (require) {
-'use strict';
-
-// TODO this should be re-removed as soon as possible.
-
-function getContext(context) {
-    var html = document.documentElement;
-    return _.extend({
-        lang: (html.getAttribute('lang') || 'en_US').replace('-', '_'),
-
-        // Unfortunately this is a mention of 'website' in 'web_editor' as there
-        // was no other way to do it as this was restored in a stable version.
-        // Indeed, the editor is currently using this context at the root of JS
-        // module, so there is no way for website to hook itself before
-        // web_editor uses it (without a risky refactoring of web_editor in
-        // stable). As mentioned above, the editor should not use this context
-        // anymore anyway (this was restored by the saas-12.2 editor revert).
-        'website_id': html.getAttribute('data-website-id') | 0,
-    }, context || {});
-}
-function getExtraContext(context) {
-    var html = document.documentElement;
-    return _.extend(getContext(), {
-        editable: !!(html.dataset.editable || $('[data-oe-model]').length), // temporary hack, this should be done in python
-        translatable: !!html.dataset.translatable,
-        edit_translations: !!html.dataset.edit_translations,
-    }, context || {});
-}
-
-return {
-    get: getContext,
-    getExtra: getExtraContext,
-};
-});
-
-//==============================================================================
-
 odoo.define('web_editor.ready', function (require) {
 'use strict';
 
diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 98fd7ba4e8a..9c5495f09da 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -15,6 +15,8 @@ const QWeb = core.qweb;
 
 var _t = core._t;
 
+let cacheSnippetTemplate = {};
+
 // jQuery extensions
 $.extend($.expr[':'], {
     o_editable: function (node, i, m) {
@@ -57,7 +59,7 @@ function nodeLength(node) {
 $.fn.extend({
     focusIn: function () {
         if (this.length) {
-            const selection = document.getSelection();
+            const selection = this[0].ownerDocument.getSelection();
             selection.removeAllRanges();
 
             const range = new Range();
@@ -70,7 +72,7 @@ $.fn.extend({
     },
     focusInEnd: function () {
         if (this.length) {
-            const selection = document.getSelection();
+            const selection = this[0].ownerDocument.getSelection();
             selection.removeAllRanges();
 
             const range = new Range();
@@ -88,7 +90,7 @@ $.fn.extend({
             return this.selectElement();
         }
         if (this.length) {
-            const selection = document.getSelection();
+            const selection = this[0].ownerDocument.getSelection();
             selection.removeAllRanges();
 
             const range = new Range();
@@ -100,7 +102,7 @@ $.fn.extend({
     },
     selectElement: function () {
         if (this.length) {
-            const selection = document.getSelection();
+            const selection = this[0].ownerDocument.getSelection();
             selection.removeAllRanges();
 
             const element = this[0];
@@ -161,7 +163,7 @@ var SnippetEditor = Widget.extend({
         this.templateOptions = templateOptions;
         this.isTargetParentEditable = false;
         this.isTargetMovable = false;
-        this.$scrollingElement = $().getScrollingElement(this.ownerDocument);
+        this.$scrollingElement = $().getScrollingElement(this.$editable[0].ownerDocument);
         if (!this.$scrollingElement[0]) {
             this.$scrollingElement = $(this.ownerDocument).find('.o_editable');
         }
@@ -199,7 +201,7 @@ var SnippetEditor = Widget.extend({
                     handle: '.o_move_handle',
                     helper: () => {
                         var $clone = this.$el.clone().css({width: '24px', height: '24px', border: 0});
-                        $clone.appendTo(this.$body).removeClass('d-none');
+                        $clone.appendTo(this.$el[0].ownerDocument.body).removeClass('d-none');
                         return $clone;
                     },
                     start: this._onDragAndDropStart.bind(this),
@@ -1285,7 +1287,7 @@ var SnippetsMenu = Widget.extend({
 
         // Fetch snippet templates and compute it
         defs.push((async () => {
-            await this._loadSnippetsTemplates();
+            await this._loadSnippetsTemplates(this.options.invalidateSnippetCache);
             await this._updateInvisibleDOM();
         })());
 
@@ -1335,6 +1337,9 @@ var SnippetsMenu = Widget.extend({
         this.$document.on('click.snippets_menu', '*', onClick);
         // Needed as bootstrap stop the propagation of click events for dropdowns
         this.$document.on('mouseup.snippets_menu', '.dropdown-toggle', onClick);
+        if (this.$body[0].document !== this.ownerDocument) {
+            this.$body.on('click.snippets_menu', '*', onClick);
+        }
 
         core.bus.on('deactivate_snippet', this, this._onDeactivateSnippet);
 
@@ -1343,17 +1348,17 @@ var SnippetsMenu = Widget.extend({
             this.updateCurrentSnippetEditorOverlay();
         }, 50);
         this.$window.on('resize.snippets_menu', debouncedCoverUpdate);
-        this.$window.on('content_changed.snippets_menu', debouncedCoverUpdate);
+        this.$body.on('content_changed.snippets_menu', debouncedCoverUpdate);
 
         // On keydown add a class on the active overlay to hide it and show it
         // again when the mouse moves
-        this.$document.on('keydown.snippets_menu', () => {
+        this.$body.on('keydown.snippets_menu', () => {
             this.__overlayKeyWasDown = true;
             this.snippetEditors.forEach(editor => {
                 editor.toggleOverlayVisibility(false);
             });
         });
-        this.$document.on('mousemove.snippets_menu, mousedown.snippets_menu', _.throttle(() => {
+        this.$body.on('mousemove.snippets_menu, mousedown.snippets_menu', _.throttle(() => {
             if (!this.__overlayKeyWasDown) {
                 return;
             }
@@ -1366,7 +1371,7 @@ var SnippetsMenu = Widget.extend({
 
         // Hide the active overlay when scrolling.
         // Show it again and recompute all the overlays after the scroll.
-        this.$scrollingElement = $().getScrollingElement(this.ownerDocument);
+        this.$scrollingElement = $().getScrollingElement(this.$body[0].ownerDocument);
         if (!this.$scrollingElement[0]) {
             this.$scrollingElement = $(this.ownerDocument).find('.o_editable');
         }
@@ -1391,13 +1396,13 @@ var SnippetsMenu = Widget.extend({
 
         // Auto-selects text elements with a specific class and remove this
         // on text changes
-        this.$document.on('click.snippets_menu', '.o_default_snippet_text', function (ev) {
+        this.$body.on('click.snippets_menu', '.o_default_snippet_text', function (ev) {
             $(ev.target).closest('.o_default_snippet_text').removeClass('o_default_snippet_text');
             $(ev.target).selectContent();
             $(ev.target).removeClass('o_default_snippet_text');
         });
-        this.$document.on('keyup.snippets_menu', function () {
-            const selection = document.getSelection();
+        this.$body.on('keyup.snippets_menu', function () {
+            const selection = this.ownerDocument.getSelection();
             if (!Selection.rangeCount) {
                 return;
             }
@@ -1408,7 +1413,7 @@ var SnippetsMenu = Widget.extend({
             for (const snippetEditor of this.snippetEditors) {
                 this._mutex.exec(() => snippetEditor.destroy());
             }
-            const selection = this.$document[0].getSelection();
+            const selection = this.$body[0].ownerDocument.getSelection();
             if (selection.rangeCount) {
                 const target = selection.getRangeAt(0).startContainer.parentElement;
                 this._activateSnippet($(target));
@@ -1479,13 +1484,13 @@ var SnippetsMenu = Widget.extend({
             }
             this.$window.off('.snippets_menu');
             this.$document.off('.snippets_menu');
+            this.$body.off('.snippets_menu');
             if (this.$scrollingElement) {
                 this.$scrollingElement[0].removeEventListener('scroll', this._onScrollingElementScroll, {capture: true});
             }
         }
         core.bus.off('deactivate_snippet', this, this._onDeactivateSnippet);
         $(document.body).off('click', this._checkEditorToolbarVisibilityCallback);
-        delete this.cacheSnippetTemplate[this.options.snippets];
     },
 
     //--------------------------------------------------------------------------
@@ -1525,8 +1530,8 @@ var SnippetsMenu = Widget.extend({
      * @param {boolean} invalidateCache
      */
     loadSnippets: function (invalidateCache) {
-        if (!invalidateCache && this.cacheSnippetTemplate[this.options.snippets]) {
-            this._defLoadSnippets = this.cacheSnippetTemplate[this.options.snippets];
+        if (!invalidateCache && cacheSnippetTemplate[this.options.snippets]) {
+            this._defLoadSnippets = cacheSnippetTemplate[this.options.snippets];
             return this._defLoadSnippets;
         }
         this._defLoadSnippets = this._rpc({
@@ -1536,8 +1541,8 @@ var SnippetsMenu = Widget.extend({
             kwargs: {
                 context: this.options.context,
             },
-        });
-        this.cacheSnippetTemplate[this.options.snippets] = this._defLoadSnippets;
+        }, { shadow: true });
+        cacheSnippetTemplate[this.options.snippets] = this._defLoadSnippets;
         return this._defLoadSnippets;
     },
     /**
@@ -1693,7 +1698,7 @@ var SnippetsMenu = Widget.extend({
         }
 
         // Firstly, add a dropzone after the clone
-        var $clone = $('.oe_drop_clone');
+        var $clone = this.$body.find('.oe_drop_clone');
         if ($clone.length) {
             var $neighbor = $clone.prev();
             if (!$neighbor.length) {
@@ -2066,7 +2071,7 @@ var SnippetsMenu = Widget.extend({
                 return $from.closest(selector, parentNode).filter(filterFunc);
             };
             functions.all = function ($from) {
-                return ($from ? dom.cssFind($from, selector) : $(selector)).filter(filterFunc);
+                return ($from ? dom.cssFind($from, selector) : self.$body.find(selector)).filter(filterFunc);
             };
         } else {
             functions.is = function ($from) {
@@ -2179,7 +2184,7 @@ var SnippetsMenu = Widget.extend({
                 if (snippetClasses && snippetClasses.length) {
                     snippetClasses = '.' + snippetClasses.join('.');
                 }
-                const $els = $(snippetClasses).not('[data-name]').add($sbody);
+                const $els = self.$body.find(snippetClasses).not('[data-name]').add($(snippetClasses)).add($sbody);
                 $els.attr('data-name', name).data('name', name);
 
                 // Create the thumbnail
@@ -2414,7 +2419,7 @@ var SnippetsMenu = Widget.extend({
         var $toInsert, dropped, $snippet;
 
         let dragAndDropResolve;
-        let $scrollingElement = $().getScrollingElement(this.ownerDocument);
+        let $scrollingElement = $().getScrollingElement(this.$body[0].ownerDocument);
         if (!$scrollingElement[0] || $scrollingElement.find('body.o_in_iframe').length) {
             $scrollingElement = $(this.ownerDocument).find('.o_editable');
         }
@@ -2427,6 +2432,7 @@ var SnippetsMenu = Widget.extend({
                     dragSnip.querySelectorAll('.o_delete_btn, .o_rename_btn').forEach(
                         el => el.remove()
                     );
+                    self.$el[0].ownerDocument.body.append(dragSnip);
                     return dragSnip;
                 },
                 start: function () {
@@ -2899,6 +2905,7 @@ var SnippetsMenu = Widget.extend({
                     }).then(() => {
                         self.trigger_up('request_save', {
                             reloadEditor: true,
+                            invalidateSnippetCache: true,
                             _toMutex: true,
                         });
                     }).guardedCatch(reason => {
@@ -3159,19 +3166,9 @@ var SnippetsMenu = Widget.extend({
         }
         delete data._toMutex;
         ev.stopPropagation();
-        this._execWithLoadingEffect(() => {
-            if (data.reloadEditor) {
-                data.reload = false;
-                const oldOnSuccess = data.onSuccess;
-                data.onSuccess = async function () {
-                    if (oldOnSuccess) {
-                        await oldOnSuccess.call(this, ...arguments);
-                    }
-                    window.location.href = window.location.origin + window.location.pathname + '?enable_editor=1';
-                };
-            }
+        this._buttonClick(() => this._execWithLoadingEffect(() => {
             this.trigger_up('request_save', data);
-        }, true);
+        }, true), this.$el[0].querySelector('button[data-action=save]'));
     },
     /**
      * @private
@@ -3383,7 +3380,12 @@ var SnippetsMenu = Widget.extend({
      * On click on discard button.
      */
     _onDiscardClick: function () {
-        this.trigger_up('request_cancel');
+        this._buttonClick(() => {
+            this.snippetEditors.forEach(editor => {
+                editor.toggleOverlay(false);
+            });
+            this.trigger_up('request_cancel');
+        }, this.$el[0].querySelector('button[data-action=cancel]'));
     },
     /**
      * Preview on mobile.
@@ -3432,6 +3434,20 @@ var SnippetsMenu = Widget.extend({
             }
         });
     },
+    async _buttonClick(action, button) {
+        if (this._buttonAction) {
+            return;
+        }
+        this._buttonAction = true;
+        dom.addButtonLoadingEffect(button);
+        const actionButtons = this.$el[0].querySelectorAll('[data-action]');
+        for (const actionButton of actionButtons) {
+            actionButton.disabled = true;
+        }
+        await action();
+        this._buttonAction = false;
+    },
+
 });
 
 return {
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index f74bfe1da65..f1be6a87860 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1535,6 +1535,9 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
         if (this.options.dataAttributes.selectedTab) {
             options.selectedTab = this.options.dataAttributes.selectedTab;
         }
+        if (this.getParent().options.wysiwyg) {
+            options.ownerDocument = this.getParent().options.wysiwyg.el.ownerDocument;
+        }
         const oldColorPalette = this.colorPalette;
         this.colorPalette = new ColorPaletteWidget(this, options);
         if (oldColorPalette) {
@@ -4027,26 +4030,6 @@ const SnippetOptionWidget = Widget.extend({
 
             const reloadMessage = await this._checkIfWidgetsUpdateNeedReload(widgets);
             requiresReload = !!reloadMessage;
-            if (requiresReload) {
-                const save = await new Promise(resolve => {
-                    Dialog.confirm(this, _t("To apply this change, we need to save all your previous modifications and reload the page.") + ' '
-                            + (typeof reloadMessage === 'string' ? reloadMessage : ''), {
-                        buttons: [{
-                            text: _t('Save and Reload'),
-                            classes: 'btn-primary',
-                            close: true,
-                            click: () => resolve(true),
-                        }, {
-                            text: _t("Cancel"),
-                            close: true,
-                            click: () => resolve(false)
-                        }],
-                    });
-                });
-                if (!save) {
-                    return;
-                }
-            }
         }
 
         // Queue action so that we can later skip useless actions.
@@ -4159,6 +4142,8 @@ const SnippetOptionWidget = Widget.extend({
         if (requiresReload) {
             this.trigger_up('request_save', {
                 reloadEditor: true,
+                optionSelector: this.data.selector,
+                url: this.data.reload,
             });
         }
     },
@@ -5295,7 +5280,7 @@ registry.ImageTools = ImageHandlerOption.extend({
         this.trigger_up('hide_overlay');
         this.trigger_up('disable_loading_effect');
         const img = this._getImg();
-        new weWidgets.ImageCropWidget(this, img, {mimetype: this._getImageMimetype(img)}).appendTo(this.options.wysiwyg.odooEditor.document.body);
+        new weWidgets.ImageCropWidget(this, img, {mimetype: this._getImageMimetype(img)}).appendTo(this.$el[0].ownerDocument.body);
 
         await new Promise(resolve => {
             this.$target.one('image_cropper_destroyed', async () => {
@@ -5340,7 +5325,7 @@ registry.ImageTools = ImageHandlerOption.extend({
     async resetCrop() {
         const img = this._getImg();
         const cropper = new weWidgets.ImageCropWidget(this, img, {mimetype: this._getImageMimetype(img)});
-        await cropper.appendTo(this.options.wysiwyg.odooEditor.document.body);
+        await cropper.appendTo(this.$el[0].ownerDocument.body);
         await cropper.reset();
         await this._reapplyCurrentShape();
     },
@@ -6464,7 +6449,7 @@ registry.BackgroundShape = SnippetOptionWidget.extend({
             .clone()
             .addClass('d-none')
             // Needs to be in document for bg-image class to take effect
-            .appendTo(document.body);
+            .appendTo(this.$target[0].ownerDocument.body);
         const shapeContainer = $shapeContainer[0];
         $shapeContainer.css('background-image', '');
         const shapeSrc = shapeContainer && getBgImageURL(shapeContainer);
@@ -6690,7 +6675,7 @@ registry.BackgroundPosition = SnippetOptionWidget.extend({
             return;
         }
         // TODO: change #wrapwrap after web_editor rework.
-        const $wrapwrap = $('#wrapwrap');
+        const $wrapwrap = $(this.ownerDocument.body).find("#wrapwrap");
         const targetOffset = this.$target.offset();
 
         this.$backgroundOverlay.css({
@@ -6809,7 +6794,7 @@ registry.BackgroundPosition = SnippetOptionWidget.extend({
     _onDragBackgroundStart: function (ev) {
         ev.preventDefault();
         this.$bgDragger.addClass('o_we_grabbing');
-        const $document = $(this.ownerDocument);
+        const $document = $(document);
         $document.on('mousemove.bgposition', this._onDragBackgroundMove.bind(this));
         $document.one('mouseup', () => {
             this.$bgDragger.removeClass('o_we_grabbing');
@@ -7116,6 +7101,7 @@ registry.SnippetSave = SnippetOptionWidget.extend({
                             });
                             this.trigger_up('request_save', {
                                 reloadEditor: true,
+                                invalidateSnippetCache: true,
                                 onSuccess: async () => {
                                     const defaultSnippetName = _.str.sprintf(_t("Custom %s"), this.data.snippetName);
                                     const targetCopyEl = this.$target[0].cloneNode(true);
diff --git a/addons/web_editor/static/src/js/frontend/loader.js b/addons/web_editor/static/src/js/frontend/loader.js
index ea1a00af158..419495aaeab 100644
--- a/addons/web_editor/static/src/js/frontend/loader.js
+++ b/addons/web_editor/static/src/js/frontend/loader.js
@@ -3,7 +3,7 @@ odoo.define('web_editor.loader', function (require) {
 
 var ajax = require('web.ajax');
 
-let wysiwygPromise = {};
+let wysiwygPromises = {};
 
 const exports = {};
 
@@ -25,8 +25,11 @@ exports.createWysiwyg = async (parent, options, additionnalAssets = []) => {
 
 async function getWysiwygClass(options, additionnalAssets = []) {
     const wysiwygAlias = options.wysiwygAlias || 'web_editor.wysiwyg';
-    if (!wysiwygPromise[wysiwygAlias]) {
-        wysiwygPromise[wysiwygAlias] = new Promise(async (resolve) => {
+    if (!wysiwygPromises[wysiwygAlias]) {
+        wysiwygPromises[wysiwygAlias] = new Promise(async (resolve) => {
+            if (odoo.__DEBUG__.services[wysiwygAlias]) {
+                return resolve();
+            }
             await loadWysiwyg(additionnalAssets);
             // Wait the loading of the service and his dependencies (use string to
             // avoid parsing of require function).
@@ -40,7 +43,7 @@ async function getWysiwygClass(options, additionnalAssets = []) {
             resolve();
         });
     }
-    await wysiwygPromise[wysiwygAlias];
+    await wysiwygPromises[wysiwygAlias];
     return odoo.__DEBUG__.services[wysiwygAlias];
 }
 exports.getWysiwygClass = getWysiwygClass;
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js
index 5311833e268..7622047821a 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js
@@ -49,12 +49,14 @@ const LinkPopoverWidget = Widget.extend({
                 message: _t("Link copied to clipboard."),
             });
         });
+        const targetWindow = this.target.ownerDocument.defaultView;
+        const popoverContainer = targetWindow.frameElement ? targetWindow.frameElement.parentElement : targetWindow.document.body;
 
         // init tooltips & popovers
         this.$('[data-toggle="tooltip"]').tooltip({
             delay: 0,
             placement: 'bottom',
-            container: this.options.wysiwyg.odooEditor.document.body,
+            container: popoverContainer,
         });
         const tooltips = [];
         for (const el of this.$('[data-toggle="tooltip"]').toArray()) {
@@ -73,7 +75,7 @@ const LinkPopoverWidget = Widget.extend({
             // 5. Close when the user click somewhere on the page (not being the link or the popover content)
             trigger: 'manual',
             boundary: 'viewport',
-            container: this.options.wysiwyg.odooEditor.document.body,
+            container: popoverContainer,
         })
         .on('show.bs.popover.link_popover', () => {
             this.options.wysiwyg.odooEditor.observerUnactive('show.bs.popover');
@@ -267,7 +269,7 @@ LinkPopoverWidget.createFor = async function (parent, targetEl, options) {
         return null;
     }
     const popoverWidget = new this(parent, targetEl, options);
-    const wysiwyg = $('#wrapwrap').data('wysiwyg');
+    const wysiwyg = options.wysiwyg;
     if (wysiwyg) {
         wysiwyg.odooEditor.observerUnactive('LinkPopoverWidget');
     }
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 846d5ed5fd9..1835b865afc 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -11,7 +11,6 @@ const {ColorPaletteWidget} = require('web_editor.ColorPalette');
 const {ColorpickerWidget} = require('web.Colorpicker');
 const concurrency = require('web.concurrency');
 const { device } = require('web.config');
-const weContext = require('web_editor.context');
 const { localization } = require('@web/core/l10n/localization');
 const OdooEditorLib = require('@web_editor/../lib/odoo-editor/src/OdooEditor');
 const snippetsEditor = require('web_editor.snippet.editor');
@@ -738,7 +737,11 @@ const Wysiwyg = Widget.extend({
             };
             this.$resizer.on('mousedown', resizerMousedown);
         } else {
-            this._replaceElement(this.$editable);
+            if (this.options.sideAttach) {
+                return this._super(...arguments);
+            } else {
+                this._replaceElement(this.$editable);
+            }
         }
     },
     //--------------------------------------------------------------------------
@@ -1901,7 +1904,9 @@ const Wysiwyg = Widget.extend({
      * @return {Promise} rejected if the save cannot be done
      */
     _saveViewBlocks: function (context) {
-
+        // TODO should be review to probably not search in the whole body,
+        // iframe or not.
+        const $ = (this.$editable[0].ownerDocument.defaultView.$ || window.$);
         const $allBlocks = $((this.options || {}).savableSelector).filter('.o_dirty');
 
         const $dirty = $('.o_dirty');
@@ -1927,7 +1932,7 @@ const Wysiwyg = Widget.extend({
                 if (this.options.enableTranslation) {
                     saveElement = '_saveTranslationElement';
                 }
-                return this[saveElement]($el, context || weContext.get())
+                return this[saveElement]($el, context || this.options.context)
                 .then(function () {
                     $el.removeClass('o_dirty');
                 }).guardedCatch(function (response) {
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 3fdb28dc1ab..89fe9007001 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -669,7 +669,7 @@ img::selection {
 }
 
 // User modal in edit mode
-.editor_enable, .note-editable {
+.note-editable {
     .modal:not(.o_technical_modal) {
         top: 40px;
         right: 0;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 0749131fcb2..4f8b938717b 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -17,6 +17,8 @@ body.editor_enable.editor_has_snippets {
         // just for fake backdrop effect
         background-color: rgba(66, 66, 66, 0.4);
     }
+}
+.editor_has_snippets {
     > .oe_overlay.ui-draggable {
         .o_handles {
             display: none;
@@ -225,8 +227,6 @@ body.editor_enable.editor_has_snippets {
 
 // SNIPPET PANEL
 #oe_snippets {
-    @include o-w-preserve-btn;
-
     @include o-position-absolute(var(--o-we-toolbar-height), 0, 0, auto);
     position: fixed;
     z-index: $o-we-zindex;
@@ -244,10 +244,6 @@ body.editor_enable.editor_has_snippets {
     transition: transform 400ms ease 0s;
     transform: translateX(100%);
 
-    &.o_loaded {
-        transform: none;
-    }
-
     *::selection {
         background: lighten($o-we-accent, 9);
         color: $o-we-bg-darkest;
@@ -2163,6 +2159,7 @@ body.editor_enable.editor_has_snippets {
         &.o_we_background_position_overlay {
             background-color: rgba(0,0,0,.7);
             pointer-events: auto;
+            bottom: 0;
 
             .o_we_overlay_content {
                 @include o-grab-cursor;
diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 7a21fd85a19..c0573389891 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -174,15 +174,22 @@
             'website/static/src/client_actions/*/*.scss',
             'website/static/src/services/website_service.js',
             'website/static/src/components/navbar/navbar.js',
+            'website/static/src/components/editor/editor.js',
+            'website/static/src/components/editor/editor.scss',
             'website/static/src/components/dialog/*.js',
             'website/static/src/components/dialog/*.scss',
             'website/static/src/components/switch/switch.js',
             'website/static/src/components/switch/switch.scss',
+            'website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js',
+            'website/static/src/components/wysiwyg_adapter/page_options.js',
+            'website/static/src/js/form_editor_registry.js',
+            'website/static/src/js/tours/tour_utils.js',
             'website/static/src/components/fullscreen_indication/fullscreen_indication.js',
             'website/static/src/components/fullscreen_indication/fullscreen_indication.scss',
             'website/static/src/systray_items/*.js',
             'website/static/src/systray_items/*.scss',
             'website/static/src/js/new_content_form.js',
+            'website/static/src/js/utils.js',
         ],
         'web.qunit_suite_tests': [
             'website/static/tests/dashboard_tests.js',
@@ -196,7 +203,6 @@
             'web_editor/static/src/scss/bootstrap_overridden.scss',
             'web/static/lib/bootstrap/scss/_variables.scss',
             'website/static/src/scss/website.wysiwyg.scss',
-            'website/static/src/scss/website.edit_mode.scss',
             'website/static/src/js/editor/editor.js',
             'website/static/src/js/editor/snippets.editor.js',
             'website/static/src/js/editor/snippets.options.js',
@@ -229,13 +235,35 @@
             'website/static/src/components/media_dialog/image_selector.js',
             'website/static/src/js/widgets/link_popover_widget.js',
         ],
+        'website.assets_editor_frontend': [
+            ('include', 'web._assets_helpers'),
+            'web_editor/static/src/scss/bootstrap_overridden.scss',
+            'web/static/lib/bootstrap/scss/_variables.scss',
+            'web_editor/static/src/scss/wysiwyg.scss',
+            'website/static/src/scss/website.edit_mode.scss',
+            'web/static/lib/nearest/jquery.nearest.js',
+            'web_editor/static/lib/odoo-editor/src/style.css',
+            'web_editor/static/lib/odoo-editor/src/utils/constants.js',
+            'web_editor/static/lib/odoo-editor/src/utils/sanitize.js',
+            'web_editor/static/lib/odoo-editor/src/utils/serialize.js',
+            'web_editor/static/lib/odoo-editor/src/utils/DOMPurify.js',
+            'web_editor/static/lib/odoo-editor/src/tablepicker/TablePicker.js',
+            'web_editor/static/lib/odoo-editor/src/commands/align.js',
+            'web_editor/static/lib/odoo-editor/src/commands/commands.js',
+            'web_editor/static/lib/odoo-editor/src/commands/deleteBackward.js',
+            'web_editor/static/lib/odoo-editor/src/commands/deleteForward.js',
+            'web_editor/static/lib/odoo-editor/src/commands/enter.js',
+            'web_editor/static/lib/odoo-editor/src/commands/shiftEnter.js',
+            'web_editor/static/lib/odoo-editor/src/commands/shiftTab.js',
+            'web_editor/static/lib/odoo-editor/src/commands/tab.js',
+            'web_editor/static/lib/odoo-editor/src/commands/toggleList.js',
+        ],
         'website.assets_editor': [
             ('include', 'web._assets_helpers'),
             'web/static/lib/bootstrap/scss/_variables.scss',
             'web/static/src/legacy/scss/ace.scss',
             'website/static/src/scss/website.editor.ui.scss',
             'website/static/src/scss/website.theme_install.scss',
-            'website/static/src/js/form_editor_registry.js',
             'website/static/src/components/dialog/edit_menu.js',
             'website/static/src/js/menu/customize.js',
             'website/static/src/js/menu/debug_menu.js',
@@ -253,6 +281,7 @@
             'website/static/src/xml/website_widget.xml',
             'website/static/src/xml/theme_preview.xml',
             'website/static/src/components/dialog/*',
+            'website/static/src/components/editor/editor.xml',
             'website/static/src/client_actions/*/*.xml',
             'website/static/src/systray_items/*.xml',
         ],
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index 178dd413cb3..476b7446663 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -726,9 +726,10 @@ class Website(Home):
         Reloads asset bundles and returns their unique URLs.
         """
         return {
-            'web.assets_common': request.env['ir.qweb']._get_asset_link_urls('web.assets_common'),
-            'web.assets_frontend': request.env['ir.qweb']._get_asset_link_urls('web.assets_frontend'),
-            'website.assets_editor': request.env['ir.qweb']._get_asset_link_urls('website.assets_editor'),
+            'web.assets_common': request.env['ir.qweb']._get_asset_link_urls('web.assets_common', request.session.debug),
+            'web.assets_frontend': request.env['ir.qweb']._get_asset_link_urls('web.assets_frontend', request.session.debug),
+            'website.assets_editor_frontend': request.env['ir.qweb']._get_asset_link_urls('website.assets_editor_frontend', request.session.debug),
+            'web.assets_backend': request.env['ir.qweb']._get_asset_link_urls('web.assets_backend', request.session.debug),
         }
 
     # ------------------------------------------------------
diff --git a/addons/website/static/src/components/dialog/edit_menu.js b/addons/website/static/src/components/dialog/edit_menu.js
index bff6f86d96c..0871c412d70 100644
--- a/addons/website/static/src/components/dialog/edit_menu.js
+++ b/addons/website/static/src/components/dialog/edit_menu.js
@@ -5,7 +5,7 @@ import { WebsiteDialog } from './dialog';
 
 const { Component, useState, useEffect, onWillStart, useRef, onMounted } = owl;
 
-class MenuDialog extends WebsiteDialog {
+export class MenuDialog extends WebsiteDialog {
     setup() {
         super.setup();
 
@@ -179,7 +179,11 @@ export class EditMenuDialog extends WebsiteDialog {
             }
         ]);
         this.close();
-        this.website.goToWebsite();
+        if (this.props.save) {
+            this.props.save();
+        } else {
+            this.website.goToWebsite();
+        }
     }
 }
 EditMenuDialog.bodyTemplate = 'website.EditMenuDialog';
diff --git a/addons/website/static/src/components/editor/editor.js b/addons/website/static/src/components/editor/editor.js
index b1189c74a78..5a314999a8b 100644
--- a/addons/website/static/src/components/editor/editor.js
+++ b/addons/website/static/src/components/editor/editor.js
@@ -7,6 +7,9 @@ import { WysiwygAdapterComponent } from '../wysiwyg_adapter/wysiwyg_adapter';
 const { markup, Component, useState, useChildSubEnv, useEffect, onWillStart } = owl;
 
 export class WebsiteEditorComponent extends Component {
+    /**
+     * @override
+     */
     setup() {
         this.websiteService = useService('website');
         this.notificationService = useService('notification');
@@ -16,6 +19,7 @@ export class WebsiteEditorComponent extends Component {
             reloading: false,
             showWysiwyg: this.websiteContext.isPublicRootReady,
         });
+        this.wysiwygOptions = {};
 
         useChildSubEnv(legacyEnv);
 
@@ -33,8 +37,15 @@ export class WebsiteEditorComponent extends Component {
     wysiwygReady() {
         this.websiteContext.snippetsLoaded = true;
         this.state.reloading = false;
+        this.wysiwygOptions.invalidateSnippetCache = false;
     }
-
+    /**
+     * Prepares the editor for reload. Copies the widget element tree
+     * to display it as a skeleton so that it doesn't flash when the editor
+     * is destroyed and re-started.
+     *
+     * @param widgetEl {HTMLElement} Widget element of the editor to copy.
+     */
     willReload(widgetEl) {
         if (widgetEl) {
             widgetEl.querySelectorAll('#oe_manipulators').forEach(el => el.remove());
@@ -45,17 +56,31 @@ export class WebsiteEditorComponent extends Component {
         }
         this.state.reloading = true;
     }
-
-    async reload(snippetOptionSelector, url) {
+    /**
+     * Dismount the editor and reload the iframe.
+     *
+     * @param snippetOptionSelector {string} Selector to refocus the editor once reloaded.
+     * @param [url] {string} URL to reload the iframe tp
+     * @param invalidateSnippetCache {boolean} If the SnippetMenu needs to reload the Snippets from server.
+     * @returns {Promise<void>}
+     */
+    async reload({ snippetOptionSelector, url, invalidateSnippetCache } = {}) {
         this.notificationService.add(this.env._t("Your modifications were saved to apply this option."), {
             title: this.env._t("Content saved."),
             type: 'success'
         });
+        if (invalidateSnippetCache) {
+            this.wysiwygOptions.invalidateSnippetCache = true;
+        }
         this.state.showWysiwyg = false;
         await this.props.reloadIframe(url);
         this.reloadSelector = snippetOptionSelector;
     }
-
+    /**
+     * Blocks the iframe and stops the editor.
+     *
+     * @returns {Promise<void>}
+     */
     async quit() {
         document.body.classList.remove('editor_has_snippets');
         this.websiteContext.snippetsLoaded = false;
diff --git a/addons/website/static/src/components/editor/editor.scss b/addons/website/static/src/components/editor/editor.scss
index c4cfc411af6..171daac7dca 100644
--- a/addons/website/static/src/components/editor/editor.scss
+++ b/addons/website/static/src/components/editor/editor.scss
@@ -1,17 +1,9 @@
-// FIXME: Duplicate code from web_editor/wysiwyg_snippets.scss
 .editor_has_snippets {
-    overflow: hidden;
-    > .oe_overlay.ui-draggable {
-        .o_handles {
-            display: none;
-        }
-    }
     .o_notification_manager {
         @include o-position-absolute($top: map-get($spacers, 2), $right: calc(#{$o-we-sidebar-width} + 0.5rem));
     }
 }
 
-// SCSS ported over from website.ui.scss
 .ui-autocomplete.o_website_ui_autocomplete {
     max-width: 400px;
     font-size: $o-we-sidebar-font-size;
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
index e32d62f2aa3..b6a129a103c 100644
--- a/addons/website/static/src/components/navbar/navbar.js
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -81,8 +81,12 @@ patch(NavBar.prototype, 'website_navbar', {
      * @override
      */
     onNavBarDropdownItemSelection(menu) {
-        if (this.websiteDialogMenus[menu.xmlid]) {
-            return this.dialogService.add(this.websiteDialogMenus[menu.xmlid].component);
+        const dialogMenu = this.websiteDialogMenus[menu.xmlid];
+        if (dialogMenu) {
+            return this.dialogService.add(
+                dialogMenu.component,
+                dialogMenu.getProps && dialogMenu.getProps(),
+            );
         }
         return this._super(menu);
     }
diff --git a/addons/website/static/src/components/wysiwyg_adapter/page_options.js b/addons/website/static/src/components/wysiwyg_adapter/page_options.js
new file mode 100644
index 00000000000..7184a8ecf75
--- /dev/null
+++ b/addons/website/static/src/components/wysiwyg_adapter/page_options.js
@@ -0,0 +1,53 @@
+/** @odoo-module **/
+export const pageOptionsCallbacks = {
+    header_overlay: function (value) {
+        this.document.getElementById('wrapwrap').classList.toggle('o_header_overlay', value);
+    },
+    header_color: function (value) {
+        const headerEl = this.document.querySelector('#wrapwrap > header');
+        if (this.value) {
+            headerEl.classList.remove(this.value);
+        }
+        if (value) {
+            headerEl.classList.add(value);
+        }
+    },
+    header_visible: function (value) {
+        const headerEl = this.document.querySelector('#wrapwrap > header');
+        headerEl.classList.toggle('d-none', !value);
+        headerEl.classList.toggle('o_snippet_invisible', !value);
+    },
+    footer_visible: function (value) {
+        this.document.querySelector('#wrapwrap > footer').toggleClass('d-none o_snippet_invisible', !value);
+    },
+};
+export class PageOption {
+    /***
+     * Some page options are defined with an input el hidden inside the content that we're editing.
+     *
+     * @param {HTMLInputElement} el The element holding the value of the page option
+     * @param {Document} document The document on which the option applies.
+     * @param {string} name The name of the method to be called before applying an option.
+     * @param {boolean} isDirty true when it has been modified during an edit session.
+     */
+    constructor(el, document, name, isDirty = false) {
+        this.el = el;
+        this.isDirty = isDirty;
+        this.document = document;
+        this.name = name;
+        this.callback = pageOptionsCallbacks[name].bind(this);
+    }
+    get value() {
+        if (this.el.value.toLowerCase() === 'true') {
+            return true;
+        } else if (this.el.value.toLowerCase() === 'false') {
+            return false;
+        }
+        return this.el.value;
+    }
+    set value(value) {
+        this.callback(value);
+        this.el.value = value;
+        this.isDirty = true;
+    }
+}
diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
index fed0aa61f31..fdcbe59ac15 100644
--- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
@@ -1,16 +1,19 @@
 /** @odoo-module */
 
 import { ComponentAdapter } from 'web.OwlCompatibility';
+import { _t } from '@web/core/l10n/translation';
 
 import { useWowlService } from '@web/legacy/utils';
+import { useHotkey } from '@web/core/hotkeys/hotkey_hook';
 
+import { EditMenuDialog, MenuDialog } from "../dialog/edit_menu";
+import { PageOption } from "./page_options";
 
 const { onWillStart, useEffect } = owl;
 
 /**
  * This component adapts the Wysiwyg widget from @web_editor/wysiwyg.js.
- * In reality it encapsulate it so that this legacy widget can work in an OWL
- * framework.
+ * It encapsulate it so that this legacy widget can work in an OWL framework.
  */
 export class WysiwygAdapterComponent extends ComponentAdapter {
     /**
@@ -21,6 +24,11 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
         const options = this.props.options || {};
 
         this.websiteService = useWowlService('website');
+        this.userService = useWowlService('user');
+        this.rpc = useWowlService('rpc');
+        this.orm = useWowlService('orm');
+        this.dialogs = useWowlService('dialog');
+
         this.oeStructureSelector = '#wrapwrap .oe_structure[data-oe-xpath][data-oe-id]';
         this.oeFieldSelector = '#wrapwrap [data-oe-field]';
         this.oeCoverSelector = '#wrapwrap .s_cover[data-res-model], #wrapwrap .o_record_cover_container[data-res-model]';
@@ -29,20 +37,36 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
         } else {
             this.savableSelector = `${this.oeStructureSelector}, ${this.oeFieldSelector}, ${this.oeCoverSelector}`;
         }
+        this.pageOptions = {};
+        // Disable command palette since LinkTools take over that shortcut
+        useHotkey('control+k', () => {});
+
+        onWillStart(() => {
+            const pageOptionEls = this.websiteService.pageDocument.querySelectorAll('.o_page_option_data');
+            for (const pageOptionEl of pageOptionEls) {
+                const optionName = pageOptionEl.name;
+                this.pageOptions[optionName] = new PageOption(pageOptionEl, this.websiteService.pageDocument, optionName);
+            }
+            this.editableElements(this.$editable).addClass('o_editable');
+        });
+
         useEffect(() => {
             const initWysiwyg = async () => {
                 this.$editable.on('click.odoo-website-editor', '*', this, this._preventDefault);
                 // Disable OdooEditor observer's while setting up classes
                 this.widget.odooEditor.observerUnactive();
                 this._addEditorMessages();
-                this.widget.odooEditor.observerActive();
                 this._setObserver();
 
                 if (this.props.snippetSelector) {
                     const snippetEl = $(this.websiteService.pageDocument).find(this.props.snippetSelector);
                     await this.widget.snippetsMenu.activateSnippet($(snippetEl));
                 }
-
+                // The jquery instance inside the iframe needs to be aware of the wysiwyg.
+                this.websiteService.contentWindow.$('#wrapwrap').data('wysiwyg', this.widget);
+                this._websiteRootEvent('widgets_start_request', {editableMode: true, onSuccess: () => {
+                    this.widget.odooEditor.observerActive();
+                }});
                 this.props.wysiwygReady();
             };
 
@@ -53,6 +77,23 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
             };
         }, () => []);
     }
+    /**
+     * Stop the widgets and save the content.
+     *
+     * @returns {Promise} the save promise from the Wysiwyg widget.
+     */
+    async save() {
+        const mainObject = this.websiteService.currentWebsite.metadata.mainObject;
+        if (this.observer) {
+            this.observer.disconnect();
+            delete this.observer;
+        }
+        const dirtyPageOptions = Object.entries(this.pageOptions).filter(([name, option]) => option.isDirty);
+        await Promise.all(dirtyPageOptions.map(async ([name, option]) => {
+            await this.orm.write(mainObject.model, [mainObject.id], {[name]: option.value});
+        }));
+        return this.widget.saveContent(false);
+    }
     /**
      * Returns the elements on the page which are editable.
      *
@@ -79,6 +120,31 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
     get widgetArgs() {
         return [this._wysiwygParams];
     }
+    /**
+     * Return the editable parent element. This includes content inside it which isn't editable.
+     *
+     * @returns {HTMLElement}
+     */
+    get editable() {
+        return this.websiteService.pageDocument.getElementById('wrapwrap');
+    }
+    /**
+     * @see {editable} jQuery wrapped editable.
+     *
+     * @returns {jQuery}
+     */
+    get $editable() {
+        return $(this.editable);
+    }
+    get _context() {
+        return Object.assign({},
+            this.userService.context,
+            {
+                website_id: this.websiteService.currentWebsite.id,
+                lang: (this.websiteService.pageDocument.documentElement.getAttribute('lang') || 'en_US').replace('-', '_'),
+            },
+        );
+    }
 
     //--------------------------------------------------------------------------
     // Private
@@ -89,14 +155,14 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
      * @return {Object} Params to pass to the wysiwyg widget.
      */
     get _wysiwygParams() {
-        const context = this.userService.context;
         return {
             snippets: 'website.snippets',
             recordInfo: {
-                context: context,
+                context: this._context,
                 data_res_model: 'website',
-                data_res_id: context.website_id,
+                data_res_id: this._context.website_id,
             },
+            context: this._context,
             editable: this.$editable,
             discardButton: true,
             saveButton: true,
@@ -190,41 +256,122 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
     _getReadOnlyAreas() {
         return [];
     }
+    /**
+     * This method provides support for the legacy event system.
+     * The supported events are defined in the prototype.
+     * @see WysiwygAdapterComponent.events
+     * If the event is not supported it uses the super class method's.
+     * See {@link ComponentAdapter._trigger_up}.
+     *
+     * @override
+     * @param {Event} event
+     */
+    _trigger_up(event) {
+        if (this.events[event.name]) {
+            let method = this.events[event.name];
+            return this[method](event);
+        }
+        return super._trigger_up(...arguments);
+    }
+    /***
+     * Handles action request from inner widgets
+     *
+     * @param {Event} event the event that triggerd the action.
+     * @returns {*}
+     * @private
+     */
+    async _handleAction(event) {
+        const actionName = event.data.actionName;
+        const params = event.data.params;
+        switch (actionName) {
+            case 'get_page_option':
+                 return event.data.onSuccess(this.pageOptions[params[0]].value);
+            case 'toggle_page_option':
+                return this._togglePageOption(...params);
+            case 'edit_menu':
+                return this.dialogs.add(EditMenuDialog, {
+                    save: () => {
+                        const snippetsMenu = this.widget.snippetsMenu;
+                        snippetsMenu.trigger_up('request_save', {reload: true, _toMutex: true});
+                    },
+                });
+        }
+    }
+    /**
+     * Toggles or force an option linked to the page.
+     *
+     * @see {PageOption}
+     * @param {Object} params
+     * @param {string} params.name the name of the page option,
+     * @param {*} params.value the value if needed to be forced
+     * @private
+     */
+    _togglePageOption(params) {
+        const pageOption = this.pageOptions[params.name];
+        pageOption.value = params.value === undefined ? !pageOption.value : params.value;
+    }
+    /**
+     * Triggers an event on the iframe's public root.
+     *
+     * @private
+     * @param type {string}
+     * @param eventData {*}
+     * @returns {void|OdooEvent|*}
+     */
+    _websiteRootEvent(type, eventData = {}) {
+        const websiteRootInstance = this.websiteService.websiteRootInstance;
+        return websiteRootInstance.trigger_up(type, {...eventData});
+    }
     _preventDefault(e) {
         e.preventDefault();
     }
     /**
      * @private
      */
-     async _reloadBundles() {
-        const bundles = await this._rpc({
-            route: '/website/theme_customize_bundle_reload',
-        });
-        let $allLinks = $();
-        const proms = _.map(bundles, (bundleURLs, bundleName) => {
-            var $links = $('link[href*="' + bundleName + '"]');
-            $allLinks = $allLinks.add($links);
-            var $newLinks = $();
-            _.each(bundleURLs, url => {
-                $newLinks = $newLinks.add($('<link/>', {
+     async _reloadBundles(event) {
+        const bundles = await this.rpc('/website/theme_customize_bundle_reload');
+        let $allLinksIframe = $();
+        let $allLinksEditor = $();
+        const proms = [];
+        const createLinksProms = (bundleURLs, $insertionEl) => {
+            let $newLinks = $();
+            for (const url of bundleURLs) {
+                $newLinks = $newLinks.add('<link/>', {
                     type: 'text/css',
                     rel: 'stylesheet',
-                    href: url,
-                }));
-            });
-
-            const linksLoaded = new Promise(resolve => {
+                    href: url + `?${new Date().getTime()}`, // Insures that the css will be reloaded.
+                });
+            }
+            proms.push(new Promise((resolve, reject) => {
                 let nbLoaded = 0;
-                $newLinks.on('load error', () => { // If we have an error, just ignore it
+                $newLinks.on('load error', () => {
                     if (++nbLoaded >= $newLinks.length) {
                         resolve();
                     }
                 });
-            });
-            $links.last().after($newLinks);
-            return linksLoaded;
+            }));
+            $insertionEl.after($newLinks);
+        };
+        _.map(bundles, (bundleURLs, bundleName) => {
+            const selector = `link[href*="${bundleName}"]`;
+            const $linksIframe = this.websiteService.contentWindow.$(selector);
+            const $linksEditor = $(selector);
+            if ($linksEditor.length) {
+                $allLinksEditor.add($linksEditor);
+                createLinksProms(bundleURLs, $linksEditor.last());
+            }
+            if ($linksIframe.length) {
+                $allLinksIframe = $allLinksIframe.add($linksIframe);
+                createLinksProms(bundleURLs, $linksIframe.last());
+            }
         });
-        await Promise.all(proms).then(() => $allLinks.remove());
+        await Promise.all(proms).then(() => {
+            $allLinksIframe.remove();
+            $allLinksEditor.remove();
+        });
+        if (event.data.onSuccess) {
+            return event.data.onSuccess();
+        }
     }
     /**
      * Returns the snippets commands for the powerbox
@@ -334,6 +481,142 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
                 },
             },
         ];
-        return {};
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Creates a new event and dispatch it in the iframe's public widget
+     *
+     * @param {OdooEvent} event
+     * @private
+     */
+    _onRootEventRequest(event) {
+        return this._websiteRootEvent(event.name, event.data);
+    }
+
+    /**
+     * Saves the editables to the server if it's dirty. If no
+     * callbacks are given, leaves the editor, otherwise, perform
+     * the callback.
+     *
+     * @param event
+     * @param [event.data.onSuccess] {Function} Async callback
+     * @param [event.data.reload] {boolean}
+     * @param [event.data.reloadEditor] {boolean} reloads the editor.
+     * @param [event.data.reloadWebClient] reloads the Webclient.
+     * @returns {Promise<unknown>}
+     * @private
+     */
+    async _onSaveRequest(event) {
+        const isDirty = this.widget.isDirty();
+        let callback = () => this.props.quitCallback();
+        if (event.data.reload || event.data.reloadEditor) {
+            this.widget.trigger_up('disable_loading_effects');
+            this.props.willReload(this.widget.el);
+            callback = async () => {
+                if (event.data.onSuccess) {
+                    await event.data.onSuccess();
+                }
+                return this.props.reloadCallback({
+                    snippetOptionSelector: event.data.optionSelector,
+                    url: event.data.url,
+                    invalidateSnippetCache: event.data.invalidateSnippetCache
+                });
+            }
+        } else {
+            if (event.data.onSuccess) {
+                callback = event.data.onSuccess;
+            }
+        }
+        if (isDirty) {
+            return this.save().then(callback)
+        } else {
+            return callback();
+        }
+    }
+    /**
+     * Returns the user context.
+     * @link {@web/core/user_service.js}
+     *
+     * @param event
+     * @returns {*}
+     * @private
+     */
+    _onContextGet(event) {
+        return event.data.callback(this._context);
+    }
+    /**
+     * Discards changes and reload the iframe.
+     *
+     * @param event
+     * @returns {*}
+     * @private
+     */
+    _onCancelRequest(event) {
+        return this.props.quitCallback();
+    }
+    /***
+     * Starts the widgets inside the dropped snippet.
+     *
+     * @param event {Object}
+     * @param event.data.addPostDropAsync {Function} Function used to push a promise in the stack.
+     * @see web_editor/SnippetsMenu.callPostSnippetDrop
+     * @private
+     */
+    _onSnippetDropped(event) {
+        event.data.addPostDropAsync(new Promise(resolve => {
+            this._websiteRootEvent('widgets_start_request', {
+                editableMode: true,
+                $target: event.data.$target,
+                onSuccess: () => resolve(),
+            });
+        }));
+    }
+    /***
+     * Re-add the editor message if no content is left on the page.
+     *
+     * @param event
+     * @private
+     */
+    _onSnippetRemoved(event) {
+        const $empty = this.$editable.find('.oe_empty');
+        if (!$empty.children().length) {
+            $empty.empty(); // Remove any superfluous whitespace
+            this._addEditorMessages();
+        }
+    }
+    /**
+     * Adds / Edit an entry in the website menu.
+     *
+     * @param event
+     * @private
+     */
+    _onMenuDialogRequest(event) {
+        this.dialogs.add(MenuDialog, {
+            name: event.data.name,
+            url: event.data.url,
+            isMegaMenu: event.data.isMegaMenu,
+            save: async (...args) => {
+                await event.data.save(...args);
+            },
+        });
     }
 }
+WysiwygAdapterComponent.prototype.events = {
+    'widgets_start_request': '_onRootEventRequest',
+    'widgets_stop_request': '_onRootEventRequest',
+    'ready_to_clean_for_save': '_onRootEventRequest',
+    'gmap_api_request': '_onRootEventRequest',
+    'gmap_api_key_request': '_onRootEventRequest',
+    'request_save': '_onSaveRequest',
+    'context_get': '_onContextGet',
+    'action_demand': '_handleAction',
+    'request_cancel': '_onCancelRequest',
+    'snippet_dropped': '_onSnippetDropped',
+    'snippet_removed': '_onSnippetRemoved',
+    'reload_bundles': '_reloadBundles',
+    'menu_dialog': '_onMenuDialogRequest',
+}
\ No newline at end of file
diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 0d08075d5d1..36dfa621b82 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -513,7 +513,7 @@ registry.Parallax = Animation.extend({
      */
     start: function () {
         this._rebuild();
-        $(window).on('resize.animation_parallax', _.debounce(this._rebuild.bind(this), 500));
+        $(this.$target[0].ownerDocument.defaultView).on('resize.animation_parallax', _.debounce(this._rebuild.bind(this), 500));
         return this._super.apply(this, arguments);
     },
     /**
@@ -521,7 +521,7 @@ registry.Parallax = Animation.extend({
      */
     destroy: function () {
         this._super.apply(this, arguments);
-        $(window).off('.animation_parallax');
+        $(this.$target[0].ownerDocument.defaultView).off('.animation_parallax');
     },
 
     //--------------------------------------------------------------------------
@@ -553,7 +553,7 @@ registry.Parallax = Animation.extend({
         }
 
         // Initialize parallax data according to snippet and viewport dimensions
-        this.viewport = document.body.clientHeight - $('#wrapwrap').position().top;
+        this.viewport = this.$target[0].ownerDocument.body.clientHeight - $(this.$target[0].ownerDocument).find('#wrapwrap').position().top;
         this.visibleArea = [this.$target.offset().top];
         this.visibleArea.push(this.visibleArea[0] + this.$target.innerHeight() + this.viewport);
         this.ratio = this.speed * (this.viewport / 10);
diff --git a/addons/website/static/src/js/editor/editor.js b/addons/website/static/src/js/editor/editor.js
index 2c35d00b464..b490d2a5e61 100644
--- a/addons/website/static/src/js/editor/editor.js
+++ b/addons/website/static/src/js/editor/editor.js
@@ -11,8 +11,11 @@ weWidgets.LinkDialog.include({
      * @override
      */
     start: async function () {
+        const options = {
+            body: this.linkWidget.$link && this.linkWidget.$link[0].ownerDocument.body,
+        };
         const result = await this._super.apply(this, arguments);
-        wUtils.autocompleteWithPages(this, this.$('input[name="url"]'));
+        wUtils.autocompleteWithPages(this, this.$('input[name="url"]'), options);
         return result;
     },
 });
diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js
index f8bd3da2ae7..e6d7f916748 100644
--- a/addons/website/static/src/js/editor/snippets.editor.js
+++ b/addons/website/static/src/js/editor/snippets.editor.js
@@ -11,7 +11,7 @@ const getTraversedNodes = OdooEditorLib.getTraversedNodes;
 
 const FontFamilyPickerUserValueWidget = wSnippetOptions.FontFamilyPickerUserValueWidget;
 
-weSnippetEditor.SnippetsMenu.include({
+const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
     xmlDependencies: (weSnippetEditor.SnippetsMenu.prototype.xmlDependencies || [])
         .concat(['/website/static/src/xml/website.editor.xml']),
     events: _.extend({}, weSnippetEditor.SnippetsMenu.prototype.events, {
@@ -50,7 +50,7 @@ weSnippetEditor.SnippetsMenu.include({
     destroy() {
         this._super(...arguments);
         this.ownerDocument.removeEventListener('selectionchange', this.__onSelectionChange);
-        document.body.classList.remove('o_animated_text_highlighted');
+        this.$body[0].classList.remove('o_animated_text_highlighted');
     },
 
     //--------------------------------------------------------------------------
@@ -195,6 +195,7 @@ weSnippetEditor.SnippetsMenu.include({
                 finalOptions.offsetElements.$top = $header;
             }
         }
+        finalOptions.jQueryDraggableOptions.iframeFix = true;
         return finalOptions;
     },
     /**
@@ -239,7 +240,7 @@ weSnippetEditor.SnippetsMenu.include({
         this._super(...arguments);
         this.$('#o_we_editor_toolbar_container > we-title > span').after($(`
             <div class="btn fa fa-fw fa-2x o_we_highlight_animated_text d-none
-                ${$('body').hasClass('o_animated_text_highlighted') ? 'fa-eye text-success' : 'fa-eye-slash'}"
+                ${this.$body.hasClass('o_animated_text_highlighted') ? 'fa-eye text-success' : 'fa-eye-slash'}"
                 title="${_t('Highlight Animated Text')}"
                 aria-label="Highlight Animated Text"/>
         `));
@@ -253,7 +254,8 @@ weSnippetEditor.SnippetsMenu.include({
      * @private
      */
     _toggleAnimatedTextButton() {
-        if (!this._isValidSelection(window.getSelection())) {
+        const sel = this.options.wysiwyg.odooEditor.document.getSelection();
+        if (!this._isValidSelection(sel)) {
             return;
         }
         const animatedText = this._getAnimatedTextElement();
@@ -324,7 +326,7 @@ weSnippetEditor.SnippetsMenu.include({
                     el = newEl;
                 }
                 this.bottomFakeOptionEl = el;
-                this.el.appendChild(this.topFakeOptionEl);
+                this.$body[0].appendChild(this.topFakeOptionEl);
             }
 
             // Need all of this in that order so that:
@@ -357,7 +359,7 @@ weSnippetEditor.SnippetsMenu.include({
      * @private
      */
     _onAnimateTextClick(ev) {
-        const sel = window.getSelection();
+        const sel = this.options.wysiwyg.odooEditor.document.getSelection();
         if (!this._isValidSelection(sel)) {
             return;
         }
@@ -408,7 +410,7 @@ weSnippetEditor.SnippetsMenu.include({
      * @private
      */
     _onHighlightAnimatedTextClick(ev) {
-        $('body').toggleClass('o_animated_text_highlighted');
+        this.$body.toggleClass('o_animated_text_highlighted');
         $(ev.target).toggleClass('fa-eye fa-eye-slash').toggleClass('text-success');
     },
 });
@@ -430,4 +432,7 @@ weSnippetEditor.SnippetEditor.include({
         return this._super(...arguments);
     },
 });
+return {
+    SnippetsMenu: wSnippetMenu,
+};
 });
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 054ca016ee4..0aa0a614379 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -3,7 +3,6 @@ odoo.define('website.editor.snippets.options', function (require) {
 'use strict';
 
 const {ColorpickerWidget} = require('web.Colorpicker');
-const config = require('web.config');
 var core = require('web.core');
 var Dialog = require('web.Dialog');
 const {Markup, sprintf} = require('web.utils');
@@ -69,7 +68,8 @@ const UrlPickerUserValueWidget = InputUserValueWidget.extend({
             classes: {
                 "ui-autocomplete": 'o_website_ui_autocomplete'
             },
-        }
+            body: this.getParent().$target[0].ownerDocument.body,
+        };
         wUtils.autocompleteWithPages(this, $(this.inputEl), options);
     },
 
@@ -112,7 +112,7 @@ const FontFamilyPickerUserValueWidget = SelectUserValueWidget.extend({
      * @override
      */
     start: async function () {
-        const style = window.getComputedStyle(document.documentElement);
+        const style = window.getComputedStyle(this.$target[0].ownerDocument.documentElement);
         const nbFonts = parseInt(weUtils.getCSSVariableValue('number-of-fonts', style));
         const googleFontsProperty = weUtils.getCSSVariableValue('google-fonts', style);
         this.googleFonts = googleFontsProperty ? googleFontsProperty.split(/\s*,\s*/g) : [];
@@ -451,26 +451,28 @@ options.Class.include({
         for (const widget of widgets) {
             const methodsNames = widget.getMethodsNames();
             const specialMethodsNames = [];
-            for (const methodName of methodsNames) {
-                if (this.specialCheckAndReloadMethodsNames.includes(methodName)) {
-                    specialMethodsNames.push(methodName);
+            // If it's a pageOption, it's most likely to need to reload, so check the widgets.
+            if (this.data.pageOptions) {
+                specialMethodsNames.push(methodsNames);
+            } else {
+                for (const methodName of methodsNames) {
+                    if (this.specialCheckAndReloadMethodsNames.includes(methodName)) {
+                        specialMethodsNames.push(methodName);
+                    }
                 }
             }
             if (!specialMethodsNames.length) {
                 continue;
             }
-            const isDebugAssets = config.isDebug('assets');
-            let paramsReload = isDebugAssets;
-            if (!isDebugAssets) {
-                for (const methodName of specialMethodsNames) {
-                    if (widget.getMethodsParams(methodName).reload) {
-                        paramsReload = true;
-                        break;
-                    }
+            let paramsReload = false;
+            for (const methodName of specialMethodsNames) {
+                if (widget.getMethodsParams(methodName).reload) {
+                    paramsReload = true;
+                    break;
                 }
             }
             if (paramsReload) {
-                return (isDebugAssets ? _t("It appears you are in debug=assets mode, all theme customization options require a page reload in this mode.") : true);
+                return true;
             }
         }
         return false;
@@ -479,15 +481,16 @@ options.Class.include({
      * @override
      */
     _computeWidgetState: async function (methodName, params) {
+        const style = window.getComputedStyle(this.$target[0].ownerDocument.documentElement);
         switch (methodName) {
             case 'customizeWebsiteViews': {
                 return this._getEnabledCustomizeValues(params.possibleValues, true);
             }
             case 'customizeWebsiteVariable': {
-                return weUtils.getCSSVariableValue(params.variable);
+                return weUtils.getCSSVariableValue(params.variable, style);
             }
             case 'customizeWebsiteColor': {
-                return weUtils.getCSSVariableValue(params.color);
+                return weUtils.getCSSVariableValue(params.color, style);
             }
             case 'customizeWebsiteAssets': {
                 return this._getEnabledCustomizeValues(params.possibleValues, false);
@@ -523,13 +526,18 @@ options.Class.include({
                 }
         }
 
-        if (params.reload || config.isDebug('assets') || params.noBundleReload) {
+        if (params.reload || params.noBundleReload) {
             // Caller will reload the page, nothing needs to be done anymore.
             return;
         }
 
         // Finally, only update the bundles as no reload is required
-        await this._reloadBundles();
+        await new Promise((resolve, reject) => {
+            this.trigger_up('reload_bundles', {
+                onSuccess: () => resolve(),
+                onFailure: () => reject(),
+            });
+        });
 
         // Some public widgets may depend on the variables that were
         // customized, so we have to restart them *all*.
@@ -667,7 +675,7 @@ options.Class.include({
     _select: async function (previewMode, widget) {
         await this._super(...arguments);
 
-        if (!widget.$el.closest('[data-no-widget-refresh="true"]').length) {
+        if (this.options.isWebsite && !widget.$el.closest('[data-no-widget-refresh="true"]').length) {
             // TODO the flag should be retrieved through widget params somehow
             await this._refreshPublicWidgets();
         }
@@ -824,8 +832,13 @@ options.registry.ReplaceMedia.include({
      * @override
      */
     async _renderCustomXML(uiFragment) {
+        if (!this.options.isWebsite) {
+            return this._super(...arguments);
+        }
         await this._super(...arguments);
 
+
+
         const oldURLWidgetEl = uiFragment.querySelector('[data-name="media_url_opt"]');
 
         const URLWidgetEl = document.createElement('we-urlpicker');
@@ -1369,7 +1382,8 @@ options.registry.menu_data = options.Class.extend({
      * @override
      */
     start: function () {
-        wLinkPopoverWidget.createFor(this, this.$target[0], { wysiwyg: $('#wrapwrap').data('wysiwyg') });
+        const wysiwyg = $(this.ownerDocument.getElementById('wrapwrap')).data('wysiwyg');
+        wLinkPopoverWidget.createFor(this, this.$target[0], { wysiwyg });
         return this._super(...arguments);
     },
     /**
@@ -3143,6 +3157,41 @@ options.registry.MegaMenuNoDelete = options.Class.extend({
     },
 });
 
+options.registry.sizing.include({
+    /**
+     * @override
+     */
+    start() {
+        const defs = this._super(...arguments);
+        const self = this;
+        this.$handles.on('mousedown', function (ev) {
+            // Since website is edited in an iframe, a div that goes over the
+            // iframe is necessary to catch mousemove and mouseup events,
+            // otherwise the iframe absorbs them.
+            const $body = $(this.ownerDocument.body);
+            if (!self.divEl) {
+                self.divEl = document.createElement('div');
+                self.divEl.style.position = 'absolute';
+                self.divEl.style.height = '100%';
+                self.divEl.style.width = '100%';
+                self.divEl.setAttribute('id', 'iframeEventOverlay');
+                $body.append(self.divEl);
+            }
+            const documentMouseUp = () => {
+                // Multiple mouseup can occur if mouse goes out of the window
+                // while moving.
+                if (self.divEl) {
+                    self.divEl.remove();
+                    self.divEl = undefined;
+                }
+                $body.off('mouseup', documentMouseUp);
+            };
+            $body.on('mouseup', documentMouseUp);
+        });
+        return defs;
+    }
+});
+
 return {
     UrlPickerUserValueWidget: UrlPickerUserValueWidget,
     FontFamilyPickerUserValueWidget: FontFamilyPickerUserValueWidget,
diff --git a/addons/website/static/src/js/editor/widget_link.js b/addons/website/static/src/js/editor/widget_link.js
index 0203c907671..0006095c4e8 100644
--- a/addons/website/static/src/js/editor/widget_link.js
+++ b/addons/website/static/src/js/editor/widget_link.js
@@ -38,7 +38,8 @@ weWidgets.LinkTools.include({
             classes: {
                 "ui-autocomplete": 'o_website_ui_autocomplete'
             },
-        }
+            body: this.$editable[0].ownerDocument.body,
+        };
         wUtils.autocompleteWithPages(this, this.$('input[name="url"]'), options);
         this._adaptPageAnchor();
         return def;
@@ -61,7 +62,7 @@ weWidgets.LinkTools.include({
             $pageAnchor.toggleClass('d-none', !isFromWebsite);
             $selectMenu.empty();
             const always = () => $pageAnchor.find('we-toggler').text('\u00A0');
-            wUtils.loadAnchors(urlInputValue).then(anchors => {
+            wUtils.loadAnchors(urlInputValue, this.$editable[0].ownerDocument.body).then(anchors => {
                 for (const anchor of anchors) {
                     const $option = $('<we-button class="dropdown-item">');
                     $option.text(anchor);
diff --git a/addons/website/static/src/js/editor/wysiwyg.js b/addons/website/static/src/js/editor/wysiwyg.js
index 47a068080e2..623296cede0 100644
--- a/addons/website/static/src/js/editor/wysiwyg.js
+++ b/addons/website/static/src/js/editor/wysiwyg.js
@@ -2,7 +2,7 @@ odoo.define('website.wysiwyg', function (require) {
 'use strict';
 
 var Wysiwyg = require('web_editor.wysiwyg');
-var snippetsEditor = require('web_editor.snippet.editor');
+var snippetsEditor = require('website.snippet.editor');
 
 /**
  * Show/hide the dropdowns associated to the given toggles and allows to wait
@@ -43,7 +43,7 @@ function toggleDropdown($toggles, show) {
  * class non editable: o_not_editable
  *
  */
-Wysiwyg.include({
+const WebsiteWysiwyg = Wysiwyg.extend({
     /**
      * @override
      */
@@ -157,6 +157,37 @@ Wysiwyg.include({
             ],
         });
     },
+    /**
+     * @override
+     */
+    _rpc(options) {
+        // Historically, every RPC had their website_id in their context.
+        // Now it's something defined by the wysiwyg_adapter.
+        // So in order to have a full context, we request it from the wysiwyg_adapter.
+        let context;
+        this.trigger_up('context_get', {
+            callback: cxt => context = cxt,
+        });
+        context = Object.assign(context, options.context);
+        options.context = context;
+        return this._super(options);
+    },
+    /**
+     *
+     * @override
+     */
+    _createSnippetsMenuInstance(options = {}) {
+        return new snippetsEditor.SnippetsMenu(this, Object.assign({
+            wysiwyg: this,
+            selectorEditableArea: '.o_editable',
+        }, options));
+    },
+    /**
+     * @override
+     */
+    _insertSnippetMenu() {
+        return this.snippetsMenu.appendTo(this.$el);
+    },
     /**
      * @override
      */
@@ -248,4 +279,6 @@ snippetsEditor.SnippetsMenu.include({
         return $dropzone;
     },
 });
+
+return WebsiteWysiwyg;
 });
diff --git a/addons/website/static/src/js/utils.js b/addons/website/static/src/js/utils.js
index 3fc007b7498..7344d4599d9 100644
--- a/addons/website/static/src/js/utils.js
+++ b/addons/website/static/src/js/utils.js
@@ -10,12 +10,13 @@ const { qweb, _t } = core;
  * Allows to load anchors from a page.
  *
  * @param {string} url
+ * @param {Node} body the editable for which to recover anchors
  * @returns {Deferred<string[]>}
  */
-function loadAnchors(url) {
+function loadAnchors(url, body) {
     return new Promise(function (resolve, reject) {
         if (url === window.location.pathname || url[0] === '#') {
-            resolve(document.body.outerHTML);
+            resolve(body ? body : document.body.outerHTML);
         } else if (url.length && !url.startsWith("http")) {
             $.get(window.location.origin + url).then(resolve, reject);
         } else { // avoid useless query
@@ -70,7 +71,7 @@ function autocompleteWithPages(self, $input, options) {
     $input.urlcomplete({
         source: function (request, response) {
             if (request.term[0] === '#') {
-                loadAnchors(request.term).then(function (anchors) {
+                loadAnchors(request.term, options && options.body).then(function (anchors) {
                     response(anchors);
                 });
             } else if (request.term.startsWith('http') || request.term.length === 0) {
diff --git a/addons/website/static/src/js/widgets/link_popover_widget.js b/addons/website/static/src/js/widgets/link_popover_widget.js
index 1bcc214734a..4834d1ec4fe 100644
--- a/addons/website/static/src/js/widgets/link_popover_widget.js
+++ b/addons/website/static/src/js/widgets/link_popover_widget.js
@@ -1,9 +1,7 @@
 /** @odoo-module **/
 
-import contentMenu from 'website.contentMenu';
 import weWidgets from 'wysiwyg.widgets';
 import {_t} from 'web.core';
-
 weWidgets.LinkPopoverWidget.include({
     /**
      * @override
@@ -36,7 +34,7 @@ const NavbarLinkPopoverWidget = weWidgets.LinkPopoverWidget.extend({
         const $anchor = $('<a/>', {
             href: '#', class: 'ml-2 js_edit_menu', title: _t('Edit Menu'),
             'data-placement': 'top', 'data-toggle': 'tooltip',
-        }).append($('<i/>', {class: 'fa fa-sitemap text-secondary'}));
+        }).append($('<i/>', {class: 'fa fa-sitemap'}));
         this.$('.o_we_remove_link').replaceWith($anchor);
         return this._super(...arguments);
     },
@@ -54,34 +52,31 @@ const NavbarLinkPopoverWidget = weWidgets.LinkPopoverWidget.extend({
     _onEditLinkClick(ev) {
         var self = this;
         var $menu = this.$target.find('[data-oe-id]');
-        var dialog = new contentMenu.MenuEntryDialog(this, {}, null, {
+        this.trigger_up('menu_dialog', {
             name: $menu.text(),
             url: $menu.parent().attr('href'),
+            save: (name, url) => {
+                let websiteId;
+                this.trigger_up('context_get', {
+                    callback: ctx => websiteId = ctx['website_id'],
+                });
+                const data = {
+                    id: $menu.data('oe-id'),
+                    name,
+                    url,
+                };
+                return this._rpc({
+                    model: 'website.menu',
+                    method: 'save',
+                    args: [websiteId, {'data': [data]}],
+                }).then(function () {
+                    self.options.wysiwyg.odooEditor.observerUnactive();
+                    self.$target.attr('href', url);
+                    $menu.text(name);
+                    self.options.wysiwyg.odooEditor.observerActive();
+                });
+            },
         });
-        dialog.on('save', this, link => {
-            let websiteId;
-            this.trigger_up('context_get', {
-                callback: function (ctx) {
-                    websiteId = ctx['website_id'];
-                },
-            });
-            const data = {
-                id: $menu.data('oe-id'),
-                name: link.content,
-                url: link.url,
-            };
-            return this._rpc({
-                model: 'website.menu',
-                method: 'save',
-                args: [websiteId, {'data': [data]}],
-            }).then(function () {
-                self.options.wysiwyg.odooEditor.observerUnactive();
-                self.$target.attr('href', link.url);
-                $menu.text(link.content);
-                self.options.wysiwyg.odooEditor.observerActive();
-            });
-        });
-        dialog.open();
     },
     /**
      * Opens the menu tree editor. On menu editor save, current page changes
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 4c5abba3ca9..5b1edc0a32d 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -182,39 +182,6 @@ table.editorbar-panel {
     }
 }
 
-body.editor_enable.editor_has_snippets {
-    padding-top: 0 !important;
-
-    .s_popup .modal {
-        // s_popup in edit mode
-        background-color: transparent;
-
-        &.fade .modal-dialog {
-            transform: none;
-        }
-    }
-
-    #oe_main_menu_navbar + #wrapwrap .o_header_affixed {
-        top: 0;
-    }
-}
-
-.editor_has_snippets {
-    .o_header_affixed {
-        right: $o-we-sidebar-width !important;
-    }
-}
-
-.editor_enable {
-    @if o-website-value('header-template') == 'sidebar' {
-        #wrapwrap > header {
-            @if o-website-value('hamburger-position') != 'right' {
-                right: $o-we-sidebar-width;
-            }
-        }
-    }
-}
-
 // s_countdown preview classes
 body.editor_enable {
     .s_countdown {
@@ -274,3 +241,29 @@ body.editor_enable {
         }
     }
 }
+.oe_drop_zone {
+    background-color: rgba($o-brand-odoo, 0.15);
+    animation: dropZoneInsert 1s linear 0s infinite alternate;
+
+    &.oe_insert {
+        position: relative;
+        z-index: $o-we-overlay-zindex;
+        width: 100%;
+        min-width: $o-we-dropzone-size;
+        height: $o-we-dropzone-size;
+        min-height: $o-we-dropzone-size;
+        margin: (-$o-we-dropzone-size/2) 0;
+        border: 2px dashed $o-we-border-color;
+
+        &.oe_vertical {
+            width: $o-we-dropzone-size;
+            float: left;
+            margin: 0 (-$o-we-dropzone-size/2);
+        }
+    }
+}
+.o_homepage_editor_welcome_message {
+    padding-top: 128px;
+    padding-bottom: 128px;
+    font-family: Roboto, $font-family-sans-serif;
+}
diff --git a/addons/website/static/src/scss/website.editor.ui.scss b/addons/website/static/src/scss/website.editor.ui.scss
index cdc3a5e6dc1..98d04a5e3b4 100644
--- a/addons/website/static/src/scss/website.editor.ui.scss
+++ b/addons/website/static/src/scss/website.editor.ui.scss
@@ -1,10 +1,3 @@
-
-.o_homepage_editor_welcome_message {
-    padding-top: 128px;
-    padding-bottom: 128px;
-    font-family: Roboto, $font-family-sans-serif;
-}
-
 // INPUTS
 $o-we-switch-size: 1.2em !default;
 $o-we-switch-inactive-color: rgba($text-muted, 0.4) !default;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index ef8ac17fe9b..bf05674716b 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -185,23 +185,6 @@ $-seen-urls: ();
     }
 }
 
-body:not(.o_fullscreen) {
-    #oe_main_menu_navbar:not(.o_hidden) + #wrapwrap {
-        .o_header_affixed, .modal {
-            // For these elements, in #wrapwrap, position top should be size of
-            // the navbar.
-            top: $o-navbar-height;
-        }
-        .modal {
-            // As the default bootstrap style no longer uses 'bottom: 0' and
-            // added 'height: 100%' since the V4.2 because of a bug on Android.
-            // We have to adapt the height of the modal by removing the height
-            // of the navbar.
-            height: calc(100vh - #{$o-navbar-height});
-        }
-    }
-}
-
 .navbar {
 
     .navbar-collapse {
@@ -1021,27 +1004,6 @@ header {
                     padding-right: .5em;
                 }
             }
-
-            .o_connected_user:not(.editor_has_snippets):not(.o_fullscreen) header & {
-                // TODO this has to be reviewed
-                $-header-template: o-website-value('header-template');
-                @if not index(('Contact', 'boxed', 'magazine'), $-header-template) {
-                    top: -$o-navbar-height;
-                    padding-top: $o-navbar-height;
-                } @else if $-header-template == 'magazine' {
-                    @include media-breakpoint-up(lg) {
-                        padding-top: $o-navbar-height;
-                    }
-                }
-            }
-
-            .editor_has_snippets:not(.o_fullscreen) header & {
-                @if (o-website-value('header-template') == 'magazine') {
-                    @include media-breakpoint-up(lg) {
-                        right: $o-we-sidebar-width;
-                    }
-                }
-            }
         }
         &.collapsing #top_menu {
             @if $-hamburger-center {
@@ -1132,16 +1094,6 @@ header {
                 }
             }
         }
-        body.o_connected_user:not(.o_fullscreen) {
-            &:not(.editor_has_snippets) #wrapwrap > header {
-                top: $o-navbar-height;
-            }
-            &.editor_has_snippets #wrapwrap > header {
-                @if $-hamburger-right {
-                    right: $o-we-sidebar-width;
-                }
-            }
-        }
     }
 } @else if o-website-value('header-template') == 'boxed' {
     #wrapwrap:not(.o_header_overlay) .o_header_boxed_background {
@@ -1162,8 +1114,10 @@ header {
                 $o-hamburger-full-navbar-height: $o-theme-navbar-logo-height + ($navbar-padding-y * 2);
                 > header {
                     .navbar-collapse {
+                        max-height: unset;
+
                         > .container {
-                            height: calc(100vh - #{$o-navbar-height} - #{$o-hamburger-full-navbar-height});
+                            height: calc(100vh - #{$o-hamburger-full-navbar-height});
                             transition: height .3s ease;
                         }
                         .nav-link {
diff --git a/addons/website/static/src/snippets/s_countdown/000.js b/addons/website/static/src/snippets/s_countdown/000.js
index 10074ca1752..349b89daecb 100644
--- a/addons/website/static/src/snippets/s_countdown/000.js
+++ b/addons/website/static/src/snippets/s_countdown/000.js
@@ -13,7 +13,6 @@ const CountdownWidget = publicWidget.Widget.extend({
     selector: '.s_countdown',
     xmlDependencies: ['/website/static/src/snippets/s_countdown/000.xml'],
     disabledInEditableMode: false,
-    defaultColor: 'rgba(0, 0, 0, 255)',
 
     /**
      * @override
diff --git a/addons/website/static/src/snippets/s_countdown/options.js b/addons/website/static/src/snippets/s_countdown/options.js
index 77e88cc1933..1fefc35f86c 100644
--- a/addons/website/static/src/snippets/s_countdown/options.js
+++ b/addons/website/static/src/snippets/s_countdown/options.js
@@ -3,7 +3,6 @@ odoo.define('website.s_countdown_options', function (require) {
 
 const core = require('web.core');
 const options = require('web_editor.snippets.options');
-const CountdownWidget = require('website.s_countdown');
 
 const qweb = core.qweb;
 
@@ -121,10 +120,7 @@ options.registry.countdown = options.Class.extend({
 
             case 'selectDataAttribute': {
                 if (params.colorNames) {
-                    // In this case, it is a colorpicker controlling a data
-                    // value on the countdown: the default value is determined
-                    // by the countdown public widget.
-                    params.attributeDefaultValue = CountdownWidget.prototype.defaultColor;
+                    params.attributeDefaultValue = 'rgba(0, 0, 0, 255)';
                 }
                 break;
             }
diff --git a/addons/website/static/src/snippets/s_facebook_page/000.js b/addons/website/static/src/snippets/s_facebook_page/000.js
index 7bfa45b46ee..64926fe0b4d 100644
--- a/addons/website/static/src/snippets/s_facebook_page/000.js
+++ b/addons/website/static/src/snippets/s_facebook_page/000.js
@@ -16,7 +16,7 @@ const FacebookPageWidget = publicWidget.Widget.extend({
 
         this.options.wysiwyg && this.options.wysiwyg.odooEditor.observerUnactive();
 
-        var params = _.pick(this.$el.data(), 'href', 'height', 'tabs', 'small_header', 'hide_cover', 'show_facepile');
+        var params = _.pick(this.$el[0].dataset, 'href', 'height', 'tabs', 'small_header', 'hide_cover', 'show_facepile');
         if (!params.href) {
             return def;
         }
diff --git a/addons/website/static/src/snippets/s_facebook_page/options.js b/addons/website/static/src/snippets/s_facebook_page/options.js
index da6c94dce74..735bfbabf80 100644
--- a/addons/website/static/src/snippets/s_facebook_page/options.js
+++ b/addons/website/static/src/snippets/s_facebook_page/options.js
@@ -21,7 +21,7 @@ options.registry.facebookPage = options.Class.extend({
             hide_cover: true,
             show_facepile: false,
         };
-        this.fbData = _.defaults(_.pick(this.$target.data(), _.keys(defaults)), defaults);
+        this.fbData = _.defaults(_.pick(this.$target[0].dataset, _.keys(defaults)), defaults);
 
         if (!this.fbData.href) {
             // Fetches the default url for facebook page from website config
@@ -106,8 +106,7 @@ options.registry.facebookPage = options.Class.extend({
                 this.fbData.height = this.fbData.show_facepile ? 225 : 150;
             }
             _.each(this.fbData, (value, key) => {
-                this.$target.attr('data-' + key, value);
-                this.$target.data(key, value);
+                this.$target[0].dataset[key] = value;
             });
         });
     },
diff --git a/addons/website/static/src/snippets/s_popup/options.js b/addons/website/static/src/snippets/s_popup/options.js
index 722c3ada212..96e36101611 100644
--- a/addons/website/static/src/snippets/s_popup/options.js
+++ b/addons/website/static/src/snippets/s_popup/options.js
@@ -8,14 +8,19 @@ options.registry.SnippetPopup = options.Class.extend({
      * @override
      */
     start: function () {
+        // Editor jQuery and iFrame jQuery isn't the same instance. This means
+        // that events within the iframe (so popup events) aren't handled by
+        // the editor's jQuery. To apply and listen to events on the modal,
+        // we need to get it from the iframe's jQuery instance.
+        this.$iframeTarget = this.$target[0].ownerDocument.defaultView.$(this.$target[0]);
         // Note: the link are excluded here so that internal modal buttons do
         // not close the popup as we want to allow edition of those buttons.
-        this.$target.on('click.SnippetPopup', '.js_close_popup:not(a, .btn)', ev => {
+        this.$iframeTarget.on('click.SnippetPopup', '.js_close_popup:not(a, .btn)', ev => {
             ev.stopPropagation();
             this.onTargetHide();
             this.trigger_up('snippet_option_visibility_update', {show: false});
         });
-        this.$target.on('shown.bs.modal.SnippetPopup', () => {
+        this.$iframeTarget.on('shown.bs.modal.SnippetPopup', () => {
             this.trigger_up('snippet_option_visibility_update', {show: true});
             // TODO duplicated code from the popup public widget, this should
             // be moved to a *video* public widget and be reviewed in master
@@ -24,7 +29,7 @@ options.registry.SnippetPopup = options.Class.extend({
                 iframe.src = media.dataset.oeExpression || media.dataset.src; // TODO still oeExpression to remove someday
             });
         });
-        this.$target.on('hidden.bs.modal.SnippetPopup', () => {
+        this.$iframeTarget.on('hidden.bs.modal.SnippetPopup', () => {
             this.trigger_up('snippet_option_visibility_update', {show: false});
             this._removeIframeSrc();
         });
@@ -42,7 +47,7 @@ options.registry.SnippetPopup = options.Class.extend({
         // The video should not start before the modal opens, remove it from the
         // DOM. It will be added back on modal open to start the video.
         this._removeIframeSrc();
-        this.$target.off('.SnippetPopup');
+        this.$iframeTarget.off('.SnippetPopup');
     },
     /**
      * @override
@@ -60,8 +65,8 @@ options.registry.SnippetPopup = options.Class.extend({
      * @override
      */
     onTargetShow: async function () {
-        this.$target.modal('show');
-        $(document.body).children('.modal-backdrop:last').addClass('d-none');
+        this.$iframeTarget.modal('show');
+        $(this.$target[0].ownerDocument.body).children('.modal-backdrop:last').addClass('d-none');
     },
     /**
      * @override
@@ -69,14 +74,14 @@ options.registry.SnippetPopup = options.Class.extend({
     onTargetHide: async function () {
         return new Promise(resolve => {
             const timeoutID = setTimeout(() => {
-                this.$target.off('hidden.bs.modal.popup_on_target_hide');
+                this.$iframeTarget.off('hidden.bs.modal.popup_on_target_hide');
                 resolve();
             }, 500);
-            this.$target.one('hidden.bs.modal.popup_on_target_hide', () => {
+            this.$iframeTarget.one('hidden.bs.modal.popup_on_target_hide', () => {
                 clearTimeout(timeoutID);
                 resolve();
             });
-            this.$target.modal('hide');
+            this.$iframeTarget.modal('hide');
         });
     },
     /**
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 66396023db5..603b1f4e6f3 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -588,7 +588,7 @@
          data-selector="#wrapwrap > header"
          data-no-check="true"
          groups="website.group_website_designer">
-        <we-select string="Template" data-variable="header-template" data-reload="/">
+        <we-select string="Template" data-variable="header-template" data-reload="/" data-no-preview="true">
             <we-button title="Default"
                        data-name="header_default_opt"
                        data-customize-website-views="website.template_header_default"
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index dcc05e8f32b..50c5586a693 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -126,10 +126,10 @@
     </xpath>
 
     <xpath expr="//head/t[@t-js='false'][last()]" position="after">
-        <t t-call-assets="website.assets_editor" t-js="false" groups="website.group_website_publisher"/>
+        <t t-call-assets="website.assets_editor_frontend" t-js="false" groups="website.group_website_publisher"/>
     </xpath>
     <xpath expr="//head/t[@t-css='false'][last()]" position="after">
-        <t t-call-assets="website.assets_editor" t-css="false" groups="website.group_website_publisher" lazy_load="True"/>
+        <t t-call-assets="website.assets_editor_frontend" t-css="false" groups="website.group_website_publisher" lazy_load="True"/>
     </xpath>
 
     <xpath expr="//header" position="attributes">
diff --git a/addons/website_blog/static/src/js/wysiwyg.js b/addons/website_blog/static/src/js/wysiwyg.js
index 9f3dd6f683f..b903cb2c602 100644
--- a/addons/website_blog/static/src/js/wysiwyg.js
+++ b/addons/website_blog/static/src/js/wysiwyg.js
@@ -2,7 +2,7 @@ odoo.define('website_blog.wysiwyg', function (require) {
 'use strict';
 
 
-const Wysiwyg = require('web_editor.wysiwyg');
+const Wysiwyg = require('website.wysiwyg');
 require('website.editor.snippets.options');
 
 Wysiwyg.include({
diff --git a/addons/website_event/static/src/snippets/options.js b/addons/website_event/static/src/snippets/options.js
index 83c57b69d7e..8e3ac35da91 100644
--- a/addons/website_event/static/src/snippets/options.js
+++ b/addons/website_event/static/src/snippets/options.js
@@ -7,11 +7,25 @@ options.registry.WebsiteEvent = options.Class.extend({
     /**
      * @override
      */
-    start() {
+    async start() {
+        const res = await this._super(...arguments);
         const eventObject = this._getEventObject();
         this.modelName = eventObject.model;
         this.eventId = eventObject.id;
-        return this._super(...arguments);
+        // Only need for one RPC request as the option will be destroyed if a
+        // change is made.
+        const rpcData = await this._rpc({
+            model: this.modelName,
+            method: 'read',
+            args: [
+                [this.eventId],
+                ['website_menu', 'website_url'],
+            ],
+        });
+        this.eventUrl = rpcData[0]['website_url'];
+        this.data.reload = this.eventUrl;
+        this.websiteMenu = rpcData[0]['website_menu'];
+        return res;
     },
 
     //--------------------------------------------------------------------------
@@ -22,13 +36,11 @@ options.registry.WebsiteEvent = options.Class.extend({
      * @see this.selectClass for parameters
      */
     displaySubmenu(previewMode, widgetValue, params) {
-        this._rpc({
+        return this._rpc({
             model: this.modelName,
             method: 'toggle_website_menu',
             args: [[this.eventId], widgetValue],
-        }).then(() => this.trigger_up('reload_editable', {option_selector: this.data.selector}));
-        // TODO: if widgetValue is false, it should reload on the event url
-        // page ('website_url' field).
+        });
     },
 
     //--------------------------------------------------------------------------
@@ -38,10 +50,10 @@ options.registry.WebsiteEvent = options.Class.extend({
     /**
      * @override
      */
-    async _computeWidgetState(methodName, params) {
+    _computeWidgetState(methodName, params) {
         switch (methodName) {
             case 'displaySubmenu': {
-                return this._getRpcData('website_menu');
+                return this.websiteMenu;
             }
         }
         return this._super(...arguments);
@@ -57,20 +69,4 @@ options.registry.WebsiteEvent = options.Class.extend({
             id: m[2] | 0,
         };
     },
-    /**
-     * @private
-     * @param {string}
-     * @returns {boolean}
-     */
-    async _getRpcData(field) {
-        const data = await this._rpc({
-            model: this.modelName,
-            method: 'read',
-            args: [
-                [this.eventId],
-                [field],
-            ],
-        });
-        return data[0][field];
-    },
 });
diff --git a/addons/website_event_meet/static/src/js/snippets/options.js b/addons/website_event_meet/static/src/js/snippets/options.js
index f95528a4dc4..18d2aafd58a 100644
--- a/addons/website_event_meet/static/src/js/snippets/options.js
+++ b/addons/website_event_meet/static/src/js/snippets/options.js
@@ -18,7 +18,7 @@ options.registry.WebsiteEvent.include({
             args: [[this.eventId], {
                 meeting_room_allow_creation: widgetValue
             }],
-        }).then(() => this.trigger_up('reload_editable', {option_selector: this.data.selector}));
+        }).then(() => this.trigger_up('request_save', {reload: true, optionSelector: this.data.selector}));
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/website_livechat/static/src/legacy/public_livechat.scss b/addons/website_livechat/static/src/legacy/public_livechat.scss
index ab6870b1e16..2f1464a0549 100644
--- a/addons/website_livechat/static/src/legacy/public_livechat.scss
+++ b/addons/website_livechat/static/src/legacy/public_livechat.scss
@@ -1,15 +1,7 @@
-.editor_has_snippets:not(.o_fullscreen) {
-    .o_livechat_button, .o_thread_window {
-        // TODO add this in an edit-mode only file in master (in 14.0 that asset
-        // would be website.assets_wysiwyg...)
-        right: $o-we-sidebar-width !important;
-    }
-}
-
 @if o-website-value('header-template') == 'sidebar' and $-hamburger-right {
     @include media-breakpoint-up(lg) {
         .o_livechat_button, .o_thread_window {
-            transform: translate(- o-website-value('sidebar-width'));
+            right: o-website-value('sidebar-width');
         }
     }
 }
diff --git a/addons/website_sale/__manifest__.py b/addons/website_sale/__manifest__.py
index b1851122509..0d4e611b231 100644
--- a/addons/website_sale/__manifest__.py
+++ b/addons/website_sale/__manifest__.py
@@ -72,9 +72,9 @@
         'website.assets_wysiwyg': [
             'website_sale/static/src/scss/website_sale.editor.scss',
             'website_sale/static/src/snippets/s_dynamic_snippet_products/options.js',
+            'website_sale/static/src/js/website_sale.editor.js',
         ],
         'website.assets_editor': [
-            'website_sale/static/src/js/website_sale.editor.js',
             'website_sale/static/src/js/website_sale_form_editor.js',
             'website_sale/static/src/js/tours/website_sale_shop_frontend.js',
         ],
diff --git a/addons/website_sale/static/src/js/website_sale.editor.js b/addons/website_sale/static/src/js/website_sale.editor.js
index 1e9e3673143..d0b727bfeab 100644
--- a/addons/website_sale/static/src/js/website_sale.editor.js
+++ b/addons/website_sale/static/src/js/website_sale.editor.js
@@ -27,7 +27,7 @@ odoo.define('website_sale.editor', function (require) {
 'use strict';
 
 var options = require('web_editor.snippets.options');
-const Wysiwyg = require('web_editor.wysiwyg');
+const Wysiwyg = require('website.wysiwyg');
 const {qweb, _t} = require('web.core');
 const {Markup} = require('web.utils');
 const Dialog = require('web.Dialog');
@@ -165,7 +165,7 @@ Wysiwyg.include({
      * @private
      */
     _isProductListPage() {
-        return $('#products_grid').length !== 0;
+        return this.options.editable && this.options.editable.find('#products_grid').length !== 0;
     },
 
     //--------------------------------------------------------------------------
@@ -224,14 +224,6 @@ Wysiwyg.include({
     },
 });
 
-function reload() {
-    if (window.location.href.match(/\?enable_editor/)) {
-        window.location.reload();
-    } else {
-        window.location.href = window.location.href.replace(/\?(enable_editor=1&)?|#.*|$/, '?enable_editor=1&');
-    }
-}
-
 options.registry.WebsiteSaleGridLayout = options.Class.extend({
 
     /**
@@ -269,7 +261,7 @@ options.registry.WebsiteSaleGridLayout = options.Class.extend({
             params: {
                 'ppg': ppg,
             },
-        }).then(() => reload());
+        });
     },
     /**
      * @see this.selectClass for params
@@ -281,7 +273,7 @@ options.registry.WebsiteSaleGridLayout = options.Class.extend({
             params: {
                 'ppr': this.ppr,
             },
-        }).then(reload);
+        });
     },
     /**
      * @see this.selectClass for params
@@ -293,7 +285,7 @@ options.registry.WebsiteSaleGridLayout = options.Class.extend({
             params: {
                 'default_sort': this.default_sort,
             },
-        }).then(reload);
+        });
     },
 
     //--------------------------------------------------------------------------
@@ -465,7 +457,7 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
                 product_id: this.productTemplateID,
                 sequence: widgetValue,
             },
-        }).then(reload);
+        }).then(() => this._reloadEditable());
     },
 
     //--------------------------------------------------------------------------
@@ -597,7 +589,11 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
             ribbonId: ribbonId || false,
         });
         const ribbon = this.ribbons[ribbonId] || {html: '', bg_color: '', text_color: '', html_class: ''};
-        const $ribbons = $(`[data-ribbon-id="${ribbonId}"] .o_ribbon`);
+        // This option also manages other products' ribbon, therefore we need a
+        // way to access all of them at once. With the content being in an iframe,
+        // this is the simplest way.
+        const $editableDocument = $(this.$target[0].ownerDocument.body);
+        const $ribbons = $editableDocument.find(`[data-ribbon-id="${ribbonId}"] .o_ribbon`);
         $ribbons.empty().append(ribbon.html);
         let htmlClasses;
         this.trigger_up('get_ribbon_classes', {callback: classes => htmlClasses = classes});
@@ -608,7 +604,7 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
         $ribbons.css('background-color', ribbon.bg_color || '');
 
         if (!this.ribbons[ribbonId]) {
-            $(`[data-ribbon-id="${ribbonId}"]`).each((index, product) => delete product.dataset.ribbonId);
+            $editableDocument.find(`[data-ribbon-id="${ribbonId}"]`).each((index, product) => delete product.dataset.ribbonId);
         }
     },
 
@@ -657,7 +653,7 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
     _onTableItemClick: function (ev) {
         var $td = $(ev.currentTarget);
         var x = $td.index() + 1;
-        var y = $td.parent().index() + 1;
+        var y = $td.parent().index() + 1
         this._rpc({
             route: '/shop/config/product',
             params: {
@@ -665,8 +661,11 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
                 x: x,
                 y: y,
             },
-        }).then(reload);
+        }).then(() => this._reloadEditable());
     },
+    _reloadEditable() {
+        return this.trigger_up('request_save', {reload: true, optionSelector: `.oe_product:has(span[data-oe-id=${this.productTemplateID}])`});
+    }
 });
 
 options.registry.WebsiteSaleProductAttribute = options.Class.extend({
@@ -688,7 +687,7 @@ options.registry.WebsiteSaleProductAttribute = options.Class.extend({
                 attribute_id: this.attributeID,
                 display_type: widgetValue,
             },
-        }).then(reload);
+        }).then(() => this.trigger_up('request_save', {reload: true, optionSelector: this.data.selector}));
     },
 
     /**
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index 2cbd2a576a7..192b8b6d317 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -109,7 +109,7 @@
                            data-no-preview="true"
                            data-reload="/"/>
             </we-row>
-            <we-select string="Default Sort" class="o_wsale_sort_submenu" data-no-preview="true">
+            <we-select string="Default Sort" class="o_wsale_sort_submenu" data-no-preview="true" data-reload="/">
                 <t t-foreach="request.env['website']._get_product_sort_mapping()" t-as="query_and_label">
                     <we-button t-att-data-set-default-sort="query_and_label[0]"><t t-esc="query_and_label[1]"/></we-button>
                 </t>
diff --git a/addons/website_twitter/static/src/js/website.twitter.editor.js b/addons/website_twitter/static/src/js/website.twitter.editor.js
index bc9a38a4414..4a2859af98c 100644
--- a/addons/website_twitter/static/src/js/website.twitter.editor.js
+++ b/addons/website_twitter/static/src/js/website.twitter.editor.js
@@ -20,7 +20,9 @@ sOptions.registry.twitter = sOptions.Class.extend({
             },
             text: _t("Reload"),
         });
-        $configuration.appendTo(document.body).on('click', function (ev) {
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+        $configuration.appendTo(div).on('click', function (ev) {
             ev.preventDefault();
             ev.stopPropagation();
             self._rpc({route: '/website_twitter/reload'});
diff --git a/odoo/addons/base/models/ir_qweb.py b/odoo/addons/base/models/ir_qweb.py
index 62aaf9a67d1..a239c9d0aab 100644
--- a/odoo/addons/base/models/ir_qweb.py
+++ b/odoo/addons/base/models/ir_qweb.py
@@ -2505,8 +2505,8 @@ class IrQWeb(models.AbstractModel):
         remains = [node for node in remains if (css and node[0] == 'link') or (js and node[0] == 'script')]
         return remains + asset.to_node(css=css, js=js, debug=debug, async_load=async_load, defer_load=defer_load, lazy_load=lazy_load)
 
-    def _get_asset_link_urls(self, bundle):
-        asset_nodes = self._get_asset_nodes(bundle, js=False)
+    def _get_asset_link_urls(self, bundle, debug=False):
+        asset_nodes = self._get_asset_nodes(bundle, js=False, debug=debug)
         return [node[1]['href'] for node in asset_nodes if node[0] == 'link']
 
 def render(template_name, values, load, **options):

From e5b094b683f77a3c22ab64a6fdb09d976ccc6fbf Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Tue, 15 Feb 2022 16:49:58 +0100
Subject: [PATCH 41/88] [IMP] website, *: remove unused assets

*: website_blog, website_event, website_forum, website_links,
   website_livechat, website_slides, survey, web_editor

This commit removes the website navbar root widget, as the edition is
now handled in the backend through the client action and custom menus.

It removes associated widgets and their css.

See merge commit for more information.

task-2687506
---
 .../src/scss/survey_templates_form.scss       |   4 -
 .../static/src/scss/web_editor.variables.scss | 210 ----------
 addons/website/__manifest__.py                |   3 -
 .../website/static/src/js/menu/customize.js   | 228 -----------
 .../website/static/src/js/menu/debug_menu.js  |  23 --
 addons/website/static/src/js/menu/navbar.js   | 291 -------------
 .../src/scss/website.navbar.mobile.scss       | 115 ------
 .../static/src/scss/website.navbar.scss       |  20 -
 .../website/static/src/scss/website.ui.scss   | 382 ------------------
 .../website/static/src/xml/website.editor.xml |   8 -
 addons/website/static/src/xml/website.xml     |  72 ----
 .../views/website_navbar_templates.xml        | 138 -------
 addons/website/views/website_templates.xml    |  18 -
 .../views/website_blog_templates.xml          |  10 -
 addons/website_event/__manifest__.py          |   1 -
 .../static/src/scss/event_templates_page.scss |   6 +-
 .../website_event/views/website_templates.xml |  22 -
 addons/website_forum/views/website_forum.xml  |  12 -
 .../views/website_links_template.xml          |  10 -
 .../views/website_livechat.xml                |   7 -
 .../static/src/scss/website_slides.scss       |   4 -
 21 files changed, 1 insertion(+), 1583 deletions(-)
 delete mode 100644 addons/website/static/src/js/menu/customize.js
 delete mode 100644 addons/website/static/src/js/menu/debug_menu.js
 delete mode 100644 addons/website/static/src/js/menu/navbar.js
 delete mode 100644 addons/website/static/src/scss/website.navbar.mobile.scss
 delete mode 100644 addons/website/static/src/scss/website.navbar.scss
 delete mode 100644 addons/website_event/views/website_templates.xml

diff --git a/addons/survey/static/src/scss/survey_templates_form.scss b/addons/survey/static/src/scss/survey_templates_form.scss
index 7715a4acff8..3e2c5a976d9 100644
--- a/addons/survey/static/src/scss/survey_templates_form.scss
+++ b/addons/survey/static/src/scss/survey_templates_form.scss
@@ -4,10 +4,6 @@
   only for this.
   TODO: SmartPeople Fixme - cleaner solution? be my guest!
  **********************************************************/
-body.o_connected_user {
-    padding-top: 0px !important;
-}
-
 nav.o_frontend_to_backend_nav {
     display: none !important;
 }
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 109f008fd9c..2f009dee28f 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -208,216 +208,6 @@ $o-we-technical-modal-zindex: 2001;
     box-shadow: 0 0 15px 2px #000;
 }
 
-//------------------------------------------------------------------------------
-// Mixins to shield UI from themed bootstrap
-//------------------------------------------------------------------------------
-
-@mixin o-w-preserve-base {
-    font-size: $o-we-font-size;
-    font-family: $o-we-font-family;
-    line-height: 1.5;
-    color: #33363e;
-
-    .text-muted {
-        color: #999999 !important;
-    }
-}
-
-@mixin o-w-preserve-headings {
-    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-        font-family: $o-we-font-family;
-        line-height: 1.5;
-        color: $o-we-bg-light;
-        font-weight: bold;
-    }
-    h1, .h1 {
-        font-size: 2.4 * $o-we-font-size;
-    }
-    h2, .h2 {
-        font-size: 1.5 * $o-we-font-size;
-    }
-    h3, .h3 {
-        font-size: 1.3 * $o-we-font-size;
-    }
-    h4, .h4 {
-        font-size: 1.2 * $o-we-font-size;
-    }
-    h5, .h5 {
-        font-size: 1.1 * $o-we-font-size;
-    }
-    h6, .h6 {
-        font-size: $o-we-font-size;
-    }
-}
-
-@mixin o-w-preserve-links {
-    a:not(.o_btn_preview) {
-        color: $o-brand-primary;
-
-        &:focus, &:active, &:focus:active {
-            outline: none!important;
-        }
-    }
-
-    .badge {
-        &:hover a, a {
-            color: #fff;
-        }
-    }
-}
-
-@mixin o-w-preserve-forms {
-    :not(.input-group):not(.form-group):not(.input-group-append):not(.input-group-prepend) > .form-control {
-        height: 34px;
-    }
-    .form-control {
-        padding: 6px 12px;
-        font-size: 14px;
-        line-height: 1.5;
-        border: 1px solid #d4d5d7;
-        color: #555;
-        background-color: #fff;
-        border-radius: 0;
-
-        &.is-invalid {
-            border-color: $danger;
-        }
-    }
-    .input-group .form-control {
-        height: auto;
-    }
-    .input-group-text {
-        background-color: #e9ecef;
-    }
-
-    .was-validated {
-        .form-control:invalid {
-            border-color: $danger;
-        }
-    }
-
-    select.form-control {
-        appearance: none;
-        background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1 sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHdpZHRoPScyNCcgaGVpZ2 h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBpZD0nc3ZnXzEnIGQ9J203LjQwNiw3L jgyOGw0LjU5NCw0LjU5NGw0LjU5NCwtNC41OTRsMC40MDYsMS40MDZsLTUsNC43NjZsLTUsLTQu NzY2bDAuNDA2LC0xLjQwNnonIGZpbGw9JyM4ODgnLz48L3N2Zz4=');
-        background-position: 100% 65%;
-        background-repeat: no-repeat;
-    }
-}
-
-@mixin o-w-preserve-modals {
-    .modal-content {
-        border-radius: 0;
-        background-color: white;
-
-        .modal-header {
-            border-bottom-color: #e9ecef;
-        }
-        .modal-body {
-            background-color: white;
-        }
-        .modal-footer {
-            border-top-color: #e9ecef;
-            text-align: left;
-        }
-    }
-
-    .close {
-        font-size: 1.5 * $o-we-font-size;
-    }
-}
-
-@mixin o-w-preserve-tabs {
-    .nav-tabs {
-        border-bottom: 1px solid #e9ecef;
-
-        > li  {
-            > a {
-                line-height: 1.5;
-                color: #4e525b;
-
-                &:hover {
-                    border-color: #dee2e6;
-                }
-
-                &.active {
-                    &, &:hover, &:focus {
-                        color: #3D4047;
-                        background-color: white;
-                        border-color: #dee2e6 #dee2e6 #FFFFFF;
-                    }
-                }
-            }
-        }
-    }
-}
-
-@mixin o-w-preserve-btn {
-    .btn:not(.o_btn_preview) {
-        border-radius: 0;
-        font-weight: normal;
-        text-transform: none;
-        @include button-size(.375rem, .75rem, 0.875rem, 1.5, 0);
-
-        &.btn-primary {
-            @include button-variant($o-brand-primary, $o-brand-primary);
-            color: white;
-        }
-        &.btn-secondary {
-            @include button-variant(white, white);
-            color: $o-brand-primary;
-        }
-        &.btn-link {
-            @include button-variant(white, white);
-            color: $o-brand-primary;
-        }
-        &.btn-success {
-            @include button-variant($o-we-color-success, $o-we-color-success);
-            color: white;
-        }
-        &.btn-info {
-            @include button-variant($o-we-color-info, $o-we-color-info);
-            color: white;
-        }
-        &.btn-warning {
-            @include button-variant($o-we-color-warning, $o-we-color-warning);
-            color: #33363e;
-        }
-        &.btn-danger {
-            @include button-variant($o-we-color-danger, $o-we-color-danger);
-            color: #33363e;
-        }
-    }
-}
-
-@mixin o-w-preserve-cards {
-    .card {
-        padding: 19px;
-        margin-bottom: 20px;
-        background-color: white;
-        border: 1px solid darken(white, 5%);
-        border-radius: 0;
-        box-shadow: none;
-    }
-}
-
-@mixin o-w-preserve-dropdown-menus {
-    .dropdown-menu {
-        background-color: white;
-    }
-    .dropdown-item {
-        color: #212529;
-
-        @include hover-focus {
-            color: darken(#212529, 5%);
-        }
-        &.active,
-        &:active {
-            color: white;
-            @include gradient-bg($o-brand-primary);
-        }
-    }
-}
-
 // ------------------------------------------------------------------
 // Selection wrapper
 // ------------------------------------------------------------------
diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index c0573389891..e97c47929e9 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -120,15 +120,12 @@
             ('replace', 'web/static/src/legacy/js/public/public_root_instance.js', 'website/static/src/js/content/website_root_instance.js'),
             'website/static/src/scss/website.scss',
             'website/static/src/scss/website.ui.scss',
-            'website/static/src/scss/website.navbar.scss',
-            'website/static/src/scss/website.navbar.mobile.scss',
             'website/static/src/js/utils.js',
             'website/static/src/js/content/website_root.js',
             'website/static/src/js/widgets/dialog.js',
             'website/static/src/js/content/compatibility.js',
             'website/static/src/js/content/menu.js',
             'website/static/src/js/content/snippets.animation.js',
-            'website/static/src/js/menu/navbar.js',
             'website/static/src/js/show_password.js',
             'website/static/src/js/post_link.js',
             'website/static/src/js/plausible.js',
diff --git a/addons/website/static/src/js/menu/customize.js b/addons/website/static/src/js/menu/customize.js
deleted file mode 100644
index f2d8e923fdf..00000000000
--- a/addons/website/static/src/js/menu/customize.js
+++ /dev/null
@@ -1,228 +0,0 @@
-odoo.define('website.customizeMenu', function (require) {
-'use strict';
-
-var core = require('web.core');
-var Widget = require('web.Widget');
-var websiteNavbarData = require('website.navbar');
-var WebsiteAceEditor = require('website.ace');
-
-const { registry } = require("@web/core/registry");
-
-var qweb = core.qweb;
-
-var CustomizeMenu = Widget.extend({
-    xmlDependencies: ['/website/static/src/xml/website.editor.xml'],
-    events: {
-        'show.bs.dropdown': '_onDropdownShow',
-        'change .dropdown-item[data-view-key]': '_onCustomizeOptionChange',
-    },
-
-    /**
-     * @override
-     */
-    willStart: function () {
-        this.viewName = $(document.documentElement).data('view-xmlid');
-        return this._super.apply(this, arguments);
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        if (!this.viewName) {
-            _.defer(this.destroy.bind(this));
-        }
-
-        if (this.$el.is('.show')) {
-            this._loadCustomizeOptions();
-        }
-        return this._super.apply(this, arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Enables/Disables a view customization whose id is given.
-     *
-     * @private
-     * @param {string} viewKey
-     * @returns {Promise}
-     *          Unresolved if the customization succeeded as the page will be
-     *          reloaded.
-     *          Rejected otherwise.
-     */
-    _doCustomize: function (viewKey) {
-        return this._rpc({
-            route: '/website/toggle_switchable_view',
-            params: {
-                'view_key': viewKey,
-            },
-        }).then(function () {
-            window.location.reload();
-            return new Promise(function () {});
-        });
-    },
-    /**
-     * Loads the information about the views which can be enabled/disabled on
-     * the current page and shows them as switchable elements in the menu.
-     *
-     * @private
-     * @return {Promise}
-     */
-    _loadCustomizeOptions: function () {
-        if (this.__customizeOptionsLoaded) {
-            return Promise.resolve();
-        }
-        this.__customizeOptionsLoaded = true;
-
-        var $menu = this.$el.children('.dropdown-menu');
-        return this._rpc({
-            route: '/website/get_switchable_related_views',
-            params: {
-                key: this.viewName,
-            },
-        }).then(function (result) {
-            var currentGroup = '';
-            if (result.length) {
-                $menu.append($('<div/>', {
-                    class: 'dropdown-divider',
-                    role: 'separator',
-                }));
-            }
-            _.each(result, function (item) {
-                if (currentGroup !== item.inherit_id[1]) {
-                    currentGroup = item.inherit_id[1];
-                    $menu.append('<li class="dropdown-header">' + currentGroup + '</li>');
-                }
-                var $label = $(qweb.render('website.components.switch', {id: 'switch-' + item.id, label: item.name}));
-                $label.attr("data-view-key", item.key);
-                $label.find('input').prop('checked', !!item.active);
-                $menu.append($label);
-            });
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Called when a view's related switchable element is clicked -> enable /
-     * disable the related view.
-     *
-     * @private
-     * @param {Event} ev
-     */
-    _onCustomizeOptionChange: function (ev) {
-        ev.preventDefault();
-        var viewKey = $(ev.currentTarget).data('viewKey');
-        this._doCustomize(viewKey);
-    },
-    /**
-     * @private
-     */
-    _onDropdownShow: function () {
-        this._loadCustomizeOptions();
-    },
-});
-
-var AceEditorMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
-    actions: _.extend({}, websiteNavbarData.WebsiteNavbarActionWidget.prototype.actions || {}, {
-        close_all_widgets: '_hideEditor',
-        edit: '_enterEditMode',
-        ace: '_launchAce',
-    }),
-
-    /**
-     * Launches the ace editor automatically when the corresponding hash is in
-     * the page URL.
-     *
-     * @override
-     */
-    start: function () {
-        if (window.location.hash.substr(0, WebsiteAceEditor.prototype.hash.length) === WebsiteAceEditor.prototype.hash) {
-            this._launchAce();
-        }
-        return this._super.apply(this, arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Actions
-    //--------------------------------------------------------------------------
-
-    /**
-     * When handling the "edit" website action, the ace editor has to be closed.
-     *
-     * @private
-     */
-    _enterEditMode: function () {
-        this._hideEditor();
-    },
-    /**
-     * @private
-     */
-    _hideEditor: function () {
-        if (this.globalEditor) {
-            this.globalEditor.do_hide();
-        }
-    },
-    /**
-     * Launches the ace editor to be able to edit the templates and scss files
-     * which are used by the current page.
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _launchAce: function () {
-        var self = this;
-        var prom = new Promise(function (resolve, reject) {
-            self.trigger_up('action_demand', {
-                actionName: 'close_all_widgets',
-                onSuccess: resolve,
-                onFailure: reject,
-            });
-        });
-        prom.then(function () {
-            if (self.globalEditor) {
-                self.globalEditor.do_show();
-                return Promise.resolve();
-            } else {
-                var currentHash = window.location.hash;
-                var indexOfView = currentHash.indexOf("?res=");
-                var initialResID = undefined;
-                if (indexOfView >= 0) {
-                    initialResID = currentHash.substr(indexOfView + ("?res=".length));
-                    var parsedResID = parseInt(initialResID, 10);
-                    if (parsedResID) {
-                        initialResID = parsedResID;
-                    }
-                }
-
-                self.globalEditor = new WebsiteAceEditor(self, $(document.documentElement).data('view-xmlid'), {
-                    initialResID: initialResID,
-                    defaultBundlesRestriction: [
-                        'web.assets_frontend',
-                        'web.assets_frontend_minimal',
-                        'web.assets_frontend_lazy',
-                    ],
-                });
-                return self.globalEditor.appendTo(document.body);
-            }
-        });
-
-        return prom;
-    },
-});
-
-registry.category("website_navbar_widgets").add("CustomizeMenu", {
-    Widget: CustomizeMenu,
-    selector: '#customize-menu',
-});
-registry.category("website_navbar_widgets").add("AceEditorMenu", {
-    Widget: AceEditorMenu,
-    selector: '#html_editor',
-});
-
-return CustomizeMenu;
-});
diff --git a/addons/website/static/src/js/menu/debug_menu.js b/addons/website/static/src/js/menu/debug_menu.js
deleted file mode 100644
index 0fa2f95a7e1..00000000000
--- a/addons/website/static/src/js/menu/debug_menu.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/** @odoo-module */
-import { registry } from "@web/core/registry";
-import { DebugMenuBasic } from "@web/core/debug/debug_menu_basic";
-import { createDebugContext } from "@web/core/debug/debug_context";
-
-const { mount } = owl;
-const debugMenuService = {
-    dependencies: ["localization", "orm"],
-    start(env) {
-        if (env.debug) {
-            const systray = document.querySelector('.o_menu_systray');
-            if (systray) {
-                Object.assign(env, createDebugContext(env, {categories: ["default"]}));
-                mount(DebugMenuBasic, systray, {
-                    position: 'first-child',
-                    env,
-                    templates: window.__OWL_TEMPLATES__,
-                });
-            }
-        }
-    }
-};
-registry.category("services").add("website_debug_menu", debugMenuService);
diff --git a/addons/website/static/src/js/menu/navbar.js b/addons/website/static/src/js/menu/navbar.js
deleted file mode 100644
index c03e621d20c..00000000000
--- a/addons/website/static/src/js/menu/navbar.js
+++ /dev/null
@@ -1,291 +0,0 @@
-/** @odoo-module alias=website.navbar */
-
-import core from 'web.core';
-import dom from 'web.dom';
-import publicWidget from 'web.public.widget';
-import concurrency from 'web.concurrency';
-import Widget from 'web.Widget';
-import { initAutoMoreMenu } from '@web/legacy/js/core/menu';
-import { registry } from "@web/core/registry";
-
-var WebsiteNavbar = publicWidget.RootWidget.extend({
-    xmlDependencies: ['/website/static/src/xml/website.xml'],
-    events: _.extend({}, publicWidget.RootWidget.prototype.events || {}, {
-        'click [data-action]': '_onActionMenuClick',
-        'mouseover > ul > li.dropdown:not(.show)': '_onMenuHovered',
-        'click .o_mobile_menu_toggle': '_onMobileMenuToggleClick',
-        'mouseenter #oe_applications:not(:has(.dropdown-item))': '_onOeApplicationsHovered',
-        'show.bs.dropdown #oe_applications:not(:has(.dropdown-item))': '_onOeApplicationsShow',
-    }),
-    custom_events: _.extend({}, publicWidget.RootWidget.prototype.custom_events || {}, {
-        'action_demand': '_onActionDemand',
-        'edit_mode': '_onEditMode',
-        'readonly_mode': '_onReadonlyMode',
-        'ready_to_save': '_onSave',
-    }),
-
-    /**
-     * @constructor
-     */
-    init: function () {
-        this._super.apply(this, arguments);
-        var self = this;
-        var initPromise = new Promise(function (resolve) {
-            self.resolveInit = resolve;
-        });
-        this._widgetDefs = [initPromise];
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        var self = this;
-        initAutoMoreMenu(this.el.querySelector('.o_menu_sections'), {
-            maxWidth: function () {
-                // The navbar contains different elements in community and
-                // enterprise, so we check for both of them here only
-                return self.$el.width()
-                    - (self.$('.o_menu_systray').outerWidth(true) || 0)
-                    - (self.$('#oe_applications').outerWidth(true) || 0)
-                    - (self.$('.o_menu_toggle').outerWidth(true) || 0)
-                    - (self.$('.o_menu_brand').outerWidth(true) || 0);
-            },
-        });
-        return this._super.apply(this, arguments).then(function () {
-            self.resolveInit();
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _attachComponent: function () {
-        var def = this._super.apply(this, arguments);
-        this._widgetDefs.push(def);
-        return def;
-    },
-    /**
-     * As the WebsiteNavbar instance is designed to be unique, the associated
-     * registry has been instantiated outside of the class and is simply
-     * returned here.
-     *
-     * @override
-     */
-    _getRegistry: function () {
-        return registry.category("website_navbar_widgets");
-    },
-    /**
-     * Searches for the automatic widget {@see RootWidget} which can handle that
-     * action.
-     *
-     * @private
-     * @param {string} actionName
-     * @param {Array} params
-     * @returns {Promise}
-     */
-    _handleAction: function (actionName, params, _i) {
-        var self = this;
-        return this._whenReadyForActions().then(function () {
-            var defs = [];
-            _.each(self._widgets, function (w) {
-                if (!w.handleAction) {
-                    return;
-                }
-
-                var def = w.handleAction(actionName, params);
-                if (def !== null) {
-                    defs.push(def);
-                }
-            });
-            if (!defs.length) {
-                // Handle the case where all action-capable components are not
-                // instantiated yet (rare) -> retry some times to eventually abort
-                if (_i > 50) {
-                    console.warn(_.str.sprintf("Action '%s' was not able to be handled.", actionName));
-                    return Promise.reject();
-                }
-                return concurrency.delay(100).then(function () {
-                    return self._handleAction(actionName, params, (_i || 0) + 1);
-                });
-            }
-            return Promise.all(defs).then(function (values) {
-                if (values.length === 1) {
-                    return values[0];
-                }
-                return values;
-            });
-        });
-    },
-    /**
-     * @private
-     * @returns {Promise}
-     */
-    async _loadAppMenus() {
-        if (!this._loadAppMenusProm) {
-            this._loadAppMenusProm = this._rpc({
-                model: 'ir.ui.menu',
-                method: 'load_menus_root',
-                args: [],
-            });
-            const result = await this._loadAppMenusProm;
-            const menus = core.qweb.render('website.oe_applications_menu', {
-                'menu_data': result,
-            });
-            this.$('#oe_applications .dropdown-menu').html(menus);
-        }
-        return this._loadAppMenusProm;
-    },
-    /**
-     * @private
-     */
-    _whenReadyForActions: function () {
-        return Promise.all(this._widgetDefs);
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Called when the backend applications menu is hovered -> fetch the
-     * available menus and insert it in DOM.
-     *
-     * @private
-     */
-    _onOeApplicationsHovered: function () {
-        this._loadAppMenus();
-    },
-    /**
-     * Called when the backend applications menu is opening -> fetch the
-     * available menus and insert it in DOM. Needed on top of hovering as the
-     * dropdown could be opened via keyboard (or the user could just already
-     * be over the dropdown when the JS is fully loaded).
-     *
-     * @private
-     */
-    _onOeApplicationsShow: function () {
-        this._loadAppMenus();
-    },
-    /**
-     * Called when an action menu is clicked -> searches for the automatic
-     * widget {@see RootWidget} which can handle that action.
-     *
-     * @private
-     * @param {Event} ev
-     */
-    _onActionMenuClick: function (ev) {
-        const restore = dom.addButtonLoadingEffect(ev.currentTarget);
-        this._handleAction($(ev.currentTarget).data('action')).then(restore).guardedCatch(restore);
-    },
-    /**
-     * Called when an action is asked to be executed from a child widget ->
-     * searches for the automatic widget {@see RootWidget} which can handle
-     * that action.
-     */
-    _onActionDemand: function (ev) {
-        var def = this._handleAction(ev.data.actionName, ev.data.params);
-        if (ev.data.onSuccess) {
-            def.then(ev.data.onSuccess);
-        }
-        if (ev.data.onFailure) {
-            def.guardedCatch(ev.data.onFailure);
-        }
-    },
-    /**
-     * Called in response to edit mode activation -> hides the navbar.
-     *
-     * @private
-     */
-    _onEditMode: function () {
-        this.$el.addClass('editing_mode');
-        this.do_hide();
-    },
-    /**
-     * Called when a submenu is hovered -> automatically opens it if another
-     * menu was already opened.
-     *
-     * @private
-     * @param {Event} ev
-     */
-    _onMenuHovered: function (ev) {
-        var $opened = this.$('> ul > li.dropdown.show');
-        if ($opened.length) {
-            $opened.find('.dropdown-toggle').dropdown('toggle');
-            $(ev.currentTarget).find('.dropdown-toggle').dropdown('toggle');
-        }
-    },
-    /**
-     * Called when the mobile menu toggle button is click -> modifies the DOM
-     * to open the mobile menu.
-     *
-     * @private
-     */
-    _onMobileMenuToggleClick: function () {
-        this.$el.parent().toggleClass('o_mobile_menu_opened');
-    },
-    /**
-     * Called in response to edit mode activation -> hides the navbar.
-     *
-     * @private
-     */
-    _onReadonlyMode: function () {
-        this.$el.removeClass('editing_mode');
-        this.do_show();
-    },
-    /**
-     * Called in response to edit mode saving -> checks if action-capable
-     * children have something to save.
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onSave: function (ev) {
-        ev.data.defs.push(this._handleAction('on_save'));
-    },
-});
-
-var WebsiteNavbarActionWidget = Widget.extend({
-    /**
-     * 'Action name' -> 'Handler name' object
-     *
-     * Any [data-action="x"] element inside the website navbar will
-     * automatically trigger an action "x". This action can then be handled by
-     * any `WebsiteNavbarActionWidget` instance if the action name "x" is
-     * registered in this `actions` object.
-     */
-    actions: {},
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Checks if the widget can execute an action whose name is given, with the
-     * given parameters. If it is the case, execute that action.
-     *
-     * @param {string} actionName
-     * @param {Array} params
-     * @returns {Promise|null} action's promise or null if no action was found
-     */
-    handleAction: function (actionName, params) {
-        var action = this[this.actions[actionName]];
-        if (action) {
-            return Promise.resolve(action.apply(this, params || []));
-        }
-        return null;
-    },
-});
-
-registry.category("public_root_widgets").add("WebsiteNavbar", {
-    Widget: WebsiteNavbar,
-    selector: '#oe_main_menu_navbar',
-});
-
-export default {
-    WebsiteNavbar: WebsiteNavbar,
-    WebsiteNavbarActionWidget: WebsiteNavbarActionWidget,
-};
diff --git a/addons/website/static/src/scss/website.navbar.mobile.scss b/addons/website/static/src/scss/website.navbar.mobile.scss
deleted file mode 100644
index aac6863eb8f..00000000000
--- a/addons/website/static/src/scss/website.navbar.mobile.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-// Achieve a top-menu design visually similar to the backend's 'burger' one.
-
-// = Mobile Main Navbar
-// ============================================================================
-@include media-breakpoint-down(sm) {
-    #oe_main_menu_navbar.o_main_navbar {
-
-        // = Scoped Variables
-        //
-        // Variables scopend within the current context that mirror backend's
-        // boostrap values.
-        // --------------------------------------------------------------------
-        $-bg: darken($o-brand-odoo, 10%);
-        $-color: color-yiq($-bg);
-        $-font-size-base: 16px;
-        $-font-size-lg: 18px;
-        $-entry-hover-bg: rgba(invert($-color), .08);
-
-
-        // = Invalidate top-menu native 'flex' layout
-        // --------------------------------------------------------------------
-        display: block !important;
-
-        .o_menu_toggle {
-            display: inline !important;
-        }
-
-        .o_menu_sections li, .dropdown-menu.show {
-            display: block;
-            position: relative;
-            width: 100%;
-            height: auto;
-        }
-
-        // = Design
-        // --------------------------------------------------------------------
-        .o_mobile_menu_toggle,
-        .dropdown-toggle,
-        .dropdown-item,
-        .o_menu_sections > .css_published {
-            height: $o-navbar-height;
-            @include o-hover-text-color(rgba($-color, .9), $-color);
-        }
-
-        .o_menu_sections {
-            @include o-position-absolute($o-navbar-height, 0, 0, 0);
-            display: none;
-            overflow: auto;
-            background-color: $-bg;
-
-            > li > a {
-                font-size: $-font-size-lg;
-            }
-
-            li.css_published:hover {
-                background-color: $-entry-hover-bg;
-            }
-        }
-
-        .dropdown-divider {
-            border-top-color: rgba($-color, .06);
-            margin-left: $dropdown-item-padding-x;
-            margin-right: $dropdown-item-padding-x;
-        }
-
-        .dropdown.show {
-            &, .dropdown-toggle, .dropdown-item, .dropdown-menu {
-                background-color: darken($-bg, 5%);
-            }
-
-            > .dropdown-toggle {
-                @include o-hover-text-color($-color, $-color);
-                outline: 0;
-                box-shadow: inset 0 1px 0 rgba(invert($-color), .1);
-            }
-
-            .dropdown-menu {
-                border: 0;
-                padding-top: 0;
-                box-shadow: inset 0 -1px 0 rgba($-color, .1);
-            }
-
-            .dropdown-item {
-                display: flex;
-                align-items: center;
-                font-size: $-font-size-base;
-            }
-        }
-
-        // = Toggle Menu (open)
-        // --------------------------------------------------------------------
-        body.o_mobile_menu_opened > & {
-            height: 100%;
-
-            .o_menu_sections {
-                display: block !important;
-                height: 100%;
-                width: 100%;
-            }
-
-            .o_mobile_menu_toggle:before {
-                content: "\f00d"
-            }
-        }
-    }
-}
-
-@include media-breakpoint-down(sm) {
-    .o_switch_company_menu > .dropdown-menu {
-        padding-top: 0px;
-        .bg-info {
-            padding: 10px;
-        }
-    }
-}
diff --git a/addons/website/static/src/scss/website.navbar.scss b/addons/website/static/src/scss/website.navbar.scss
deleted file mode 100644
index bde5abb7ca4..00000000000
--- a/addons/website/static/src/scss/website.navbar.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-// Emulate navbar backend values and avoid website customizations
-
-#oe_main_menu_navbar.o_main_navbar {
-    .o_menu_brand, .o_menu_toggle {
-        display: inline-block;
-        font-size: 17px;
-    }
-
-    .o_menu_sections, .o_menu_systray {
-        &, > div {
-            > a, > button, > label {
-                font-size: 14px;
-            }
-        }
-
-        > .o_mobile_preview > a {
-            font-size: 17px;
-        }
-    }
-}
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index c5dc67003cb..c040bb19719 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -105,371 +105,6 @@ body {
     // rtlcss for right-to-left text direction.
     direction: ltr;
 }
-body.o_connected_user {
-    padding-top: $o-navbar-height!important;
-
-    &.o_fullscreen_transition {
-        transition: padding 400ms ease 0s;
-
-        #oe_main_menu_navbar, #web_editor-top-edit, .o_we_website_top_actions, #oe_snippets {
-            transition: transform 400ms ease 0s !important;
-        }
-        .o_header_affixed {
-            transition: top 0.35s !important;
-        }
-    }
-    &.o_fullscreen {
-        padding-top: 0 !important;
-
-        &.editor_enable.editor_has_snippets {
-            padding-right: 0 !important;
-
-            .modal:not(.o_technical_modal) {
-                right: 0;
-            }
-        }
-        #oe_main_menu_navbar, #web_editor-top-edit {
-            transform: translateY(-100%);
-        }
-        .o_we_website_top_actions, #oe_snippets {
-            transform: translateX(100%);
-        }
-        .o_header_affixed {
-            top: 0 !important;
-            right: 0 !important;
-        }
-    }
-}
-
-//FULLSCREEN INDICATION LAYOUT
-.o_fullscreen_indication {
-    display: flex;
-    position: absolute;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-    top: 0;
-    margin-top: $o-navbar-height!important;
-    opacity: 0;
-    pointer-events: none;
-
-    p {
-        padding: 15px 30px;
-        background-color: rgba(0, 0, 0, 0.7);
-        color: white;
-        span {
-            border: 1px solid white;
-            border-color: white;
-            border-radius: 5px;
-            padding: 7px 5px;
-            margin: 5px;
-        }
-    }
-    &.o_transition {
-        transition: opacity 400ms;
-    }
-    &.o_visible {
-        opacity: 1;
-    }
-}
-
-// MAIN MENU STYLE (added above navbar.scss)
-#oe_main_menu_navbar {
-    @include o-w-preserve-dropdown-menus;
-    @include o-position-absolute(0, 0, auto, 0);
-    position: fixed;
-    z-index: $zindex-modal - 10;
-    font-family: $o-we-font-family;
-    font-size: 14px;
-
-    a:hover, a:focus {
-        text-decoration: none;
-    }
-    a.dropdown-toggle {
-        outline: none;
-    }
-    .dropdown-menu {
-        border-top: 0;
-        margin-top: 0;
-        background-clip: border-box;
-        font-size: inherit;
-        border-radius: 0;
-        color: $dropdown-link-active-color;
-        max-height: 500px; // Fallback
-        max-height: calc(90vh - #{$o-navbar-height});
-        overflow: auto;
-    }
-    #oe_applications .dropdown-menu {
-        // Compensate #oe_applications's padding
-        margin-left: $dropdown-item-padding-x * -0.5;
-    }
-
-    .o_menu_sections {
-        .o_mobile_preview a {
-            text-align: center;
-            font-size: 20px;
-        }
-    }
-    .o_menu_systray {
-        > li > a, > div > a {
-            &.css_edit_dynamic{
-                padding: 0 $grid-gutter-width/4;
-            }
-
-            &[data-action="edit"], &[data-action="translate"], &.css_edit_dynamic {
-                @include button-variant($o-brand-primary, $o-brand-primary);
-                &.active, &:hover, &:focus, &:active {
-                    outline: none;
-                    box-shadow: none !important;
-                }
-            }
-
-            &, &:hover, &:focus {
-                text-decoration: none;
-            }
-        }
-
-        .o_mobile_preview a {
-            text-align: center;
-        }
-    }
-    @include media-breakpoint-down(sm) {
-        #oe_applications {
-            position: inherit;
-            z-index: 1002;
-        }
-    }
-}
-
-@mixin o-w-close-icon($size:12px, $color:#000, $color-hover:#000, $thickness: 1px, $opacity: 0.7, $opacity-hover: 1) {
-    color: transparent;
-    position: relative;
-    display: inline-block;
-    opacity: $opacity;
-    width: $size;
-    height: $size;
-
-    &:hover, &:focus {
-        outline: none;
-        opacity: $opacity-hover;
-
-        &::after, &::before {
-            background: $color-hover;
-        }
-    }
-
-    &:after, &:before {
-        content: '';
-        margin-top: -1px;
-        background: $color;
-        @include size(100%, $thickness);
-        @include o-position-absolute(50%, $left:0);
-        transform: rotate(45deg);
-    }
-
-    &:after {
-        transform: rotate(-45deg);
-    }
-}
-
-// MODALS
-body .modal {
-    &.o_technical_modal {
-        @include o-w-preserve-base;
-        @include o-w-preserve-dropdown-menus;
-        @include o-w-preserve-headings;
-        @include o-w-preserve-forms;
-        @include o-w-preserve-links;
-        @include o-w-preserve-btn;
-        @include o-w-preserve-cards;
-        @include o-w-preserve-modals;
-        @include o-w-preserve-tabs;
-    }
-
-    // MOBILE PREVIEW
-    &.oe_mobile_preview {
-        text-align: center;
-
-        .modal-dialog {
-            display: inline-block;
-            width: auto;
-
-            .modal-content {
-                background-color: black!important;
-                border: 3px outset gray;
-                border-radius: 20px;
-
-                .modal-header {
-                    border: none;
-                    cursor: pointer;
-                    font-family: $o-we-font-family;
-
-                    &, .close {
-                        color: white;
-                    }
-
-                    h4 {
-                        font-family: inherit;
-                        font-weight: normal;
-                        color: inherit;
-
-                        .fa {
-                            margin-left: $grid-gutter-width/2;
-                        }
-                    }
-                    .close {
-                        color: #4e525b;
-                    }
-                }
-
-                .modal-body {
-                    background-color: inherit!important;
-                    border-radius: 20px;
-                    padding: 15px;
-
-                    $mobile-preview-width: 320px;
-                    $mobile-preview-height: 530px;
-
-                    display: flex;
-                    width: $mobile-preview-width + 15;
-                    height: $mobile-preview-height;
-                    transition: all 400ms ease 0s;
-
-                    &.o_invert_orientation {
-                        width: $mobile-preview-height + 15;
-                        height: $mobile-preview-width;
-                    }
-
-                    > iframe {
-                        display: block;
-                        width: 100%;
-                        border: none;
-                    }
-                }
-
-                .modal-footer {
-                    display: none;
-                }
-            }
-        }
-    }
-
-    // TOP MENU EDITOR
-    .oe_menu_editor {
-        ul {
-            padding-left: 37px;
-        }
-
-        li {
-            margin-top: -1px;
-
-            .input-group-addon {
-                border-radius: 0;
-            }
-        }
-    }
-
-    // SEO CONFIGURATION
-    &.oe_seo_configuration {
-        #language-box {
-            padding-right: 25px;
-            background-color: white;
-        }
-        .o_seo_og_image {
-            .o_meta_img {
-                position: relative;
-                transition: border-color 200ms;
-                display: inline-block;
-                border: 2px solid gray('400');
-
-                > img {
-                    width: 70px;
-                    height: 70px;
-                    object-fit: cover;
-                    cursor: pointer;
-                }
-
-                &:hover {
-                    border-color: $o-brand-primary;
-                }
-
-                &.o_active_image {
-                    border-color: $o-brand-primary;
-
-                    &:before {
-                        @include o-position-absolute($right: 0);
-                        content: '';
-                        border: 16px solid rgba($o-brand-primary, 0.8);
-                        border-left-color: transparent;
-                        border-bottom-color: transparent;
-                    }
-
-                    &:after {
-                        @include o-position-absolute(2px, 3px);
-                        display: inline-block;
-                        content: "\f00c";
-                        font-family: FontAwesome;
-                        color: white;
-                        font-size: 12px;
-                    }
-                }
-                .o-custom-label {
-                    @include o-position-absolute($bottom: 0px);
-                    background: rgba(gray('800'), 0.6);
-                    font-size: 12px;
-                }
-            }
-            .o_meta_img_upload {
-                transition: 200ms;
-                display: inline-block;
-                padding: 23px 27px;
-                border: 3px dashed lighten(gray('700'), 30%);
-                vertical-align: top;
-                cursor: pointer;
-                color: lighten(gray('600'), 30%);
-
-                &:hover {
-                    border-color: $o-brand-primary;
-                    color: $o-brand-primary;
-                }
-            }
-            .o_meta_active_img {
-                height: 240px;
-                object-fit: cover;
-            }
-        }
-
-        div.oe_seo_preview_g {
-            list-style: none;
-            font-family: arial, sans-serif;
-
-            .r {
-                cursor: pointer;
-                color:#1a0dab;
-                font-size: 18px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                -webkit-text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-
-            .s {
-                font-size: 13px;
-                line-height: 18px;
-                color: #545454;
-                .kv {
-                    color: #006621;
-                    font-size: 14px;
-                    line-height: 18px;
-                }
-            }
-        }
-
-        td.o_seo_keyword_suggestion span.o_seo_suggestion.badge {
-            cursor: pointer;
-        }
-    }
-}
 
 // LOGIN FORM
 .oe_login_form, .oe_signup_form, .oe_reset_password_form {
@@ -518,11 +153,6 @@ body .modal {
 }
 
 // Pages Management
-.o_page_management_info {
-    .o_switch {
-        padding-top: 9px;
-    }
-}
 #list_website_pages {
     th {
         background-color: $o-brand-odoo;
@@ -545,18 +175,6 @@ body .modal {
     }
 }
 
-// Page Properties
-.o_redirect_old_url {
-    @include media-breakpoint-down(sm) {
-        // Because o_technical_modal class class has a higher z-index than $zindex-modal.
-        z-index: $o-we-technical-modal-zindex + ($zindex-popover - $zindex-modal);
-    }
-    .popover-body {
-        overflow-y: auto;
-        max-height: 14.2rem;
-    }
-}
-
 // Post Submit Links
 .post_link:not(.o_post_link_js_loaded) {
     pointer-events: none;
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 1e867a3240b..d0928ad2213 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -1,13 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
-    <!-- Custom checkbox (material-design-like toggle) -->
-    <t t-name="website.components.switch">
-        <label class="o_switch dropdown-item m-0" t-att-for="id">
-            <input type="checkbox" t-att-id="id" t-att-checked="checked ? 'checked' : undefined"/>
-            <span/>
-            <div t-if="label"><t t-esc="label"/></div>
-        </label>
-    </t>
 
     <t t-extend="wysiwyg.widgets.link">
         <t t-jquery="#o_link_dialog_url_input" t-operation="after">
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index 731f5c089f1..e04722d5118 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -30,76 +30,4 @@
             </div>
         </div>
     </t>
-
-    <t t-name="website.dependencies">
-        <p class="text-warning">Don't forget to update all links referring to this page.</p>
-        <t t-if="dependencies and _.keys(dependencies).length">
-            <p class="text-warning">We found these ones:</p>
-            <div t-foreach="dependencies" t-as="type" class="mb16">
-                <a class="collapsed fa fa-caret-right" data-toggle="collapse" t-attf-href="#collapseDependencies#{type_index}" aria-expanded="false" t-attf-aria-controls="collapseDependencies#{type_index}">
-                    <t t-esc="type"/>&amp;nbsp;
-                    <span class="text-muted"><t t-esc="type_value.length"/> found(s)</span>
-                </a>
-                <div t-attf-id="collapseDependencies#{type_index}" class="collapse" aria-expanded="false">
-                    <ul>
-                        <li t-foreach="type_value" t-as="error">
-                            <a t-if="!_.contains(['', '#', false], error.link)" t-att-href="error.link">
-                                <t t-out="error.text"/>
-                            </a>
-                            <t t-else="">
-                                <t t-out="error.text"/>
-                            </t>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </t>
-    </t>
-
-    <div t-name="website.delete_page">
-        <p>Are you sure you want to delete this page ?</p>
-        <t t-call="website.dependencies"/>
-    </div>
-
-    <div t-name="website.rename_page">
-        <div class="card">
-            <div class="card-body">
-                <form>
-                    <div class="form-group row mb0">
-                        <label for="new_name" class="col-form-label col-md-4">Rename Page To:</label>
-                        <div class="col-md-8">
-                            <input type="text" class="form-control" id="new_name" placeholder="e.g. About Us"/>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
-        <t t-call="website.dependencies"/>
-    </div>
-
-    <div t-name="website.duplicate_page_action_dialog">
-        <div class="form-group row">
-            <label class="col-form-label col-md-3" for="page_name">Page Name</label>
-            <div class="col-md-9">
-                <input type="text" class="form-control" id="page_name"/>
-            </div>
-        </div>
-    </div>
-
-    <t t-name="website.oe_applications_menu">
-        <t t-as="menu" t-foreach="menu_data.children">
-            <a role="menuitem" class="dropdown-item"
-               t-att-data-action-id="menu.action ? menu.action.split(',')[1] : undefined"
-               t-att-data-action-model="menu.action ? menu.action.split(',')[0] : undefined"
-               t-att-data-menu="menu.id"
-               t-att-data-menu-xmlid="menu.xmlid"
-               t-att-href="_.str.sprintf('/web#menu_id=%s&amp;action=%s', menu.id, menu.action ? menu.action.split(',')[1] : '')">
-                <span class="oe_menu_text" t-esc="menu.name"/>
-            </a>
-        </t>
-    </t>
-
-    <div t-name="website.fullscreen_indication" class="o_fullscreen_indication">
-        <p>Press <span>esc</span> to exit full screen</p>
-    </div>
 </templates>
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index 6f3904bb5ae..c4290c336f1 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -1,24 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <!-- publish/unpublish button -->
-    <template id="website_publisher" name="Website Publisher">
-        <t groups="website.group_website_publisher" t-if="'website_published' in main_object.fields_get() and ('can_publish' not in main_object.fields_get() or main_object.can_publish)">
-            <div t-attf-class="js_publish_management #{extra_classes} #{main_object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-description="env['ir.model']._get(main_object._name).display_name" t-att-data-id="main_object.id" t-att-data-object="main_object._name" t-att-data-controller="publish_controller">
-                <label class="o_switch o_switch_danger_success js_publish_btn m-0" t-att-accesskey="desktop_navbar and 'p'">
-                    <input type="checkbox" disabled="disabled" t-att-checked="main_object.website_published"/>
-                    <span/>
-                    <span class="css_publish">Unpublished</span>
-                    <span class="css_unpublish">Published</span>
-                </label>
-            </div>
-        </t>
-    </template>
-
     <!-- Front-end/Back-end integration -->
     <template id="user_navbar" inherit_id="website.layout" name="User Navbar">
-        <xpath expr="//t[@t-set='html_data']" position="after">
-            <t t-set="body_classname" t-value="(body_classname if body_classname else '') + (' o_connected_user' if env['ir.ui.view'].user_has_groups('base.group_user') else '')"/>
-        </xpath>
         <xpath expr="//div[@id='wrapwrap']" position="before">
             <div t-if="'with_loader' in request.params" class="o_theme_install_loader_container position-fixed fixed-top fixed-left
             h-100 w-100 d-flex flex-column align-items-center text-white font-weight-bold text-center">
@@ -30,127 +13,6 @@
                     <br/>pointer to build the perfect page in 7 steps.
                 </p>
             </div>
-            <nav groups="base.group_user" t-if="website" id="oe_main_menu_navbar" class="o_main_navbar d-flex align-items-center">
-                <div t-cache="website" id="oe_applications">
-                    <div class="dropdown active pl-3">
-                        <a class="dropdown-toggle full" data-toggle="dropdown" href="#" accesskey="h">
-                            <i class="fa fa-th-large mr-2"/> WEBSITE
-                        </a>
-                        <div class="dropdown-menu" role="menu">
-                            <!-- This will be populated on hover in JS -->
-                        </div>
-                    </div>
-                </div>
-
-                <button type="button" class="btn fa fa-bars float-right ml-auto d-block d-md-none o_mobile_menu_toggle" aria-label="Menu" title="Menu" groups="website.group_website_designer"/>
-
-                <div class="o_menu_sections d-flex flex-grow-1 flex-shrink-1" groups="website.group_website_designer">
-                    <!-- Content -->
-                    <div t-if="editable" class="dropdown" id="content-menu">
-                        <a id="content-menu-button" class="dropdown-toggle o-no-caret waves" data-toggle="dropdown" data-display="static" href="#">Pages</a>
-                        <div class="dropdown-menu" role="menu">
-                            <a role="menuitem" href="/website/pages" title="Manage Your Website Pages" class="dropdown-item">Manage Pages</a>
-                            <div t-if="deletable" role="separator" class="dropdown-divider"/>
-                            <a role="menuitem" href="#" data-action="page_properties" class="dropdown-item" t-if="deletable">Page Properties</a>
-                        </div>
-                    </div>
-                    <!-- Customize -->
-                    <div class="dropdown" id="customize-menu">
-                        <a class="dropdown-toggle o-no-caret waves" data-toggle="dropdown" data-display="static" href="#">Customize</a>
-                        <div class="dropdown-menu" role="menu">
-                            <a role="menuitem" href="#" data-action="ace" class="dropdown-item" id="html_editor">HTML/CSS/JS Editor</a>
-                            <a role="menuitem" href="/web#action=website.action_website_add_features" class="dropdown-item" id="install_apps">Add Features</a>
-                        </div>
-                    </div>
-                    <!-- Promote -->
-                    <div class="dropdown" id="promote-menu">
-                    </div>
-                    <t t-call="website.website_publisher" groups="website.group_website_publisher">
-                        <t t-set="extra_classes" t-translation="off">d-flex d-sm-flex d-md-none</t>
-                    </t>
-                </div>
-
-                <div class="o_menu_systray d-none d-md-flex" groups="website.group_website_publisher">
-                    <!-- Mobile preview -->
-                    <div class="o_mobile_preview o_menu_systray_item" id="mobile-menu">
-                        <a data-action="show-mobile-preview" href="#" accesskey="v"><span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-lg fa-mobile"/></a>
-                    </div>
-
-                    <!-- Page Edition -->
-                    <div class="o_new_content_menu o_menu_systray_item" id="new-content-menu">
-                        <a href="#" accesskey="c"><span class="fa fa-plus mr-1"/>New</a>
-                        <div id="o_new_content_menu_choices" class="o_hidden">
-                            <div class="container pt32 pb32">
-                                <div class="row">
-                                    <t t-set="is_system" t-value="env.user.has_group('base.group_system')"/>
-                                    <t t-set="is_designer" t-value="env.user.has_group('website.group_website_designer')"/>
-
-                                    <t t-set="mod" t-value="env.ref('base.module_website_blog')"/>
-                                    <div name="module_website_blog" t-if='is_system' t-cache="is_system"
-                                         t-att-data-module-id="mod.id"
-                                         t-att-data-module-shortdesc="mod.shortdesc"
-                                         class="col-md-4 mb8 o_new_content_element">
-                                        <a href="#" data-action="new_blog_post">
-                                            <i class="fa fa-rss"/>
-                                            <p>Blog Post</p>
-                                        </a>
-                                    </div>
-                                    <t t-set="mod" t-value="env.ref('base.module_website_event')"/>
-                                    <div name="module_website_event" t-if='is_system' t-cache="is_system"
-                                         t-att-data-module-id="mod.id"
-                                         t-att-data-module-shortdesc="mod.shortdesc"
-                                         class="col-md-4 mb8 o_new_content_element">
-                                        <a href="#" data-action="new_event">
-                                            <i class="fa fa-ticket"/>
-                                            <p>Event</p>
-                                        </a>
-                                    </div>
-                                    <t t-set="mod" t-value="env.ref('base.module_website_forum')"/>
-                                    <div name="module_website_forum" t-if='is_system' t-cache="is_system"
-                                         t-att-data-module-id="mod.id"
-                                         t-att-data-module-shortdesc="mod.shortdesc"
-                                         class="col-md-4 mb8 o_new_content_element o_new_content_element_once">
-                                        <a href="#" data-url="/forum" data-action="new_forum">
-                                            <i class="fa fa-comment"/>
-                                            <p>Forum</p>
-                                        </a>
-                                    </div>
-                                    <t t-set="mod" t-value="env.ref('base.module_website_slides')"/>
-                                    <div name="module_website_slides" t-if='is_system' t-cache="is_system"
-                                         t-att-data-module-id="mod.id"
-                                         t-att-data-module-shortdesc="mod.shortdesc"
-                                         class="col-md-4 mb8 o_new_content_element">
-                                        <a href="#" data-action="new_slide_channel">
-                                            <i class="fa module_icon" style="background-image: url('/website/static/src/img/apps_thumbs/website_slide.svg');
-                                                background-repeat: no-repeat; background-position: center;"/>
-                                            <p>Course</p>
-                                        </a>
-                                    </div>
-                                    <t t-set="mod" t-value="env.ref('base.module_website_livechat')"/>
-                                    <div name="module_website_livechat" t-if='is_system' t-cache="is_system"
-                                         t-att-data-module-id="mod.id"
-                                         t-att-data-module-shortdesc="mod.shortdesc"
-                                         class="col-md-4 mb8 o_new_content_element o_new_content_element_once">
-                                        <a href="#" data-url="/livechat" data-action="new_channel">
-                                            <i class="fa fa-comments"/>
-                                            <p>Livechat Widget</p>
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div t-if="not translatable" id="edit-page-menu" class="o_menu_systray_item">
-                        <a data-action="edit" href="#" accesskey="a"><span class="fa fa-pencil mr-1"/>Edit</a>
-                    </div>
-                    <div t-if="translatable">
-                        <a data-action="translate" href="#">TRANSLATE</a>
-                    </div>
-                    <div t-if="translatable">
-                        <a data-action="edit_master" href="#">or Edit Master</a>
-                    </div>
-                </div>
-            </nav>
         </xpath>
     </template>
 </odoo>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 50c5586a693..647b435085a 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -2051,15 +2051,6 @@
     </div>
 </template>
 
-<template id="publish_short">
-    <t groups="website.group_website_publisher" t-ignore="true">
-        <div t-attf-class="float-right js_publish_management #{object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-id="object.id" t-att-data-object="object._name" t-att-data-description="env['ir.model']._get(object._name).display_name" t-att-data-controller="publish_controller">
-            <button t-attf-class="btn btn-danger js_publish_btn #{additionnal_btn_classes or ''}">Unpublished</button>
-            <button t-attf-class="btn btn-success js_publish_btn #{additionnal_btn_classes or ''}">Published</button>
-        </div>
-    </t>
-</template>
-
 <template id="pager" name="Pager" inherit_id="portal.pager">
 </template>
 
@@ -2394,15 +2385,6 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
     <span t-foreach="enumerate(parts)" t-as="part" t-att-class="'text-primary' if part[0] % 2 else None" t-esc="part[1]"/>
 </template>
 
-<template id="index_management">
-    <t groups="website.group_website_publisher" t-ignore="true">
-        <div t-attf-class="float-right js_index_management #{object.website_indexed and 'css_published' or 'css_unpublished'}" t-att-data-id="object.id" t-att-data-object="object._name">
-            <button class="btn btn-danger js_index_btn">Unindexed</button>
-            <button class="btn btn-success js_index_btn">Indexed</button>
-        </div>
-    </t>
-</template>
-
 <template id="list_website_pages" name="Website Pages Management">
   <t t-call="website.layout">
     <div id="wrap">
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index a91e11cd37c..0d233ee2b81 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -457,16 +457,6 @@ list of filtered posts (by date or tag).
 
 <!-- ======   Technical Templates   ============================================
 ============================================================================ -->
-<!-- User Navbar -->
-<template id="user_navbar_inherit_website_blog" inherit_id="website.user_navbar">
-    <xpath expr="//div[@id='o_new_content_menu_choices']//div[@name='module_website_blog']" position="attributes">
-        <attribute name="name"/>
-        <attribute name="t-att-data-module-id"/>
-        <attribute name="t-att-data-module-shortdesc"/>
-        <attribute name="t-if">is_designer</attribute>
-        <attribute name="t-cache"/>
-    </xpath>
-</template>
 
 <!-- Atom Feed -->
 <template id="blog_feed">&lt;?xml version="1.0" encoding="utf-8"?&gt;
diff --git a/addons/website_event/__manifest__.py b/addons/website_event/__manifest__.py
index ec81929d09c..54cad26171a 100644
--- a/addons/website_event/__manifest__.py
+++ b/addons/website_event/__manifest__.py
@@ -26,7 +26,6 @@
         'views/event_templates_page_registration.xml',
         'views/event_templates_page_misc.xml',
         'views/event_templates_widgets.xml',
-        'views/website_templates.xml',
         'views/event_event_views.xml',
         'views/event_registration_views.xml',
         'views/event_tag_category_views.xml',
diff --git a/addons/website_event/static/src/scss/event_templates_page.scss b/addons/website_event/static/src/scss/event_templates_page.scss
index da9a862444a..cb1f3d20d4a 100644
--- a/addons/website_event/static/src/scss/event_templates_page.scss
+++ b/addons/website_event/static/src/scss/event_templates_page.scss
@@ -1,10 +1,6 @@
-.o_connected_user .o_wevent_event {
-    min-height: calc(98vh - 110px)
-}
-
 .o_wevent_event {
     min-height: calc(98vh - 70px);
-    
+
     // Multi-line event title, even in mobile mode
     nav > div > a.navbar-brand {
         text-overflow: revert;
diff --git a/addons/website_event/views/website_templates.xml b/addons/website_event/views/website_templates.xml
deleted file mode 100644
index 16212b57cbc..00000000000
--- a/addons/website_event/views/website_templates.xml
+++ /dev/null
@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-
-<!-- User Navbar -->
-<template id="user_navbar_inherit_website_event" inherit_id="website.user_navbar">
-    <xpath expr="//div[@id='o_new_content_menu_choices']//div[@name='module_website_event']" position="attributes">
-        <attribute name="name"/>
-        <attribute name="t-att-data-module-id"/>
-        <attribute name="t-att-data-module-shortdesc"/>
-        <attribute name="t-if">is_designer</attribute>
-        <attribute name="t-cache"/>
-    </xpath>
-</template>
-
-<!-- User Navbar - Edit Options -->
-<template id="event_edit_options" inherit_id="website.user_navbar" name="Edit Event Options">
-    <xpath expr="//div[@id='edit-page-menu']" position="after">
-        <t t-if="main_object._name == 'event.event'" t-set="action" t-value="'event.action_event_view'"/>
-    </xpath>
-</template>
-
-</odoo>
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index cf71b146f36..366798d66f7 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -1698,17 +1698,5 @@
         </div>
     </t>
 </template>
-
-<!-- User Navbar -->
-<template id="user_navbar_inherit_website_forum" inherit_id="website.user_navbar">
-    <xpath expr="//div[@id='o_new_content_menu_choices']//div[@name='module_website_forum']" position="attributes">
-        <attribute name="name"/>
-        <attribute name="t-att-data-module-id"/>
-        <attribute name="t-att-data-module-shortdesc"/>
-        <attribute name="t-if">is_designer</attribute>
-        <attribute name="t-cache"/>
-    </xpath>
-</template>
-
     </data>
 </odoo>
diff --git a/addons/website_links/views/website_links_template.xml b/addons/website_links/views/website_links_template.xml
index ce838f24973..275082c12d4 100644
--- a/addons/website_links/views/website_links_template.xml
+++ b/addons/website_links/views/website_links_template.xml
@@ -1,15 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-
-        <template id="share_page_menu" inherit_id="website.user_navbar">
-            <xpath expr="//div[@id='promote-menu']" position="inside">
-                <a href="/r" id="o_website_links_share_page" class="dropdown-item">
-                    <span title="Track this page to count clicks">Link Tracker</span>
-                </a>
-            </xpath>
-
-        </template>
-
         <template id="create_shorten_url">
             <div class="o_website_links_create_tracked_url">
                 <div class="container">
diff --git a/addons/website_livechat/views/website_livechat.xml b/addons/website_livechat/views/website_livechat.xml
index 7829641fd7a..71f45527473 100644
--- a/addons/website_livechat/views/website_livechat.xml
+++ b/addons/website_livechat/views/website_livechat.xml
@@ -175,12 +175,5 @@
                 </div>
             </t>
         </template>
-
-        <!-- User Navbar -->
-        <template id="user_navbar_inherit_website_livechat" inherit_id="website.user_navbar">
-            <xpath expr="//div[@id='o_new_content_menu_choices']//div[@name='module_website_livechat']" position="replace">
-            </xpath>
-        </template>
-
     </data>
 </odoo>
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index bc917781415..223d66d5697 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -569,10 +569,6 @@ $truncate-limits: 2, 3, 10;
         line-height: 1.5rem; // necessary to align label correctly with radio button
 
     }
-
-    .was-validated .form-check .form-check-label {
-        @include o-w-preserve-base; // avoid ugly green when form is marked as 'was-validated'
-    }
 }
 
 .o_wslides_slide_upload_loading {

From f1e5f377f8109bdfcc18190b01f6c2cc8a50dade Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Mon, 4 Apr 2022 11:09:55 +0200
Subject: [PATCH 42/88] [IMP] website: redirect to backend in edit mode with an
 url param

The redirect helper js script can now redirect directly to the backend
in edit mode if it has the ?enable_editor.

See merge commit for more information.

task-2687506
---
 addons/website/static/src/js/content/redirect.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/addons/website/static/src/js/content/redirect.js b/addons/website/static/src/js/content/redirect.js
index 8f4e765302a..8c1a030e93e 100644
--- a/addons/website/static/src/js/content/redirect.js
+++ b/addons/website/static/src/js/content/redirect.js
@@ -20,11 +20,19 @@ document.addEventListener('DOMContentLoaded', () => {
     if (!window.frameElement) {
         const websiteId = document.documentElement.dataset.websiteId;
         const {pathname, search} = window.location;
+        const params = new URLSearchParams(search);
+        const enableEditor = params.get('enable_editor');
+        params.delete('enable_editor');
+        let newSearch = params.toString();
+        if (newSearch) {
+            newSearch = '?' + newSearch;
+        }
+        const backendPath = `/web#action=website.website_preview&path=${encodeURIComponent(`${pathname}${newSearch}`)}&website_id=${websiteId}`;
 
-        const autoredirectToBackendAction = false;
+        const autoredirectToBackendAction = !!enableEditor;
         if (autoredirectToBackendAction) {
             document.body.innerHTML = '';
-            window.location.replace(`/web#action=website.website_preview&path=${encodeURIComponent(`${pathname}${search}`)}&website_id=${websiteId}`);
+            window.location.replace(`${backendPath}${enableEditor ? '&enable_editor=1' : ''}`);
         } else {
             // FIXME this UI does not respect access rights yet but we will
             // probably end up doing it in XML instead of JS anyway.
@@ -50,7 +58,7 @@ document.addEventListener('DOMContentLoaded', () => {
             frontendToBackendNavEl.appendChild(backendAppsButtonEl);
 
             const backendEditButtonEl = document.createElement('a');
-            backendEditButtonEl.href = `/web#action=website.website_preview&path=${encodeURIComponent(`${pathname}${search}`)}&website_id=${websiteId}`;
+            backendEditButtonEl.href = `${backendPath}&enable_editor=1`;
             backendEditButtonEl.textContent = _t("Edit");
             backendEditButtonEl.title = _t("Edit your page content");
             backendEditButtonEl.classList.add('o_frontend_to_backend_edit_btn');
@@ -60,7 +68,7 @@ document.addEventListener('DOMContentLoaded', () => {
             frontendToBackendNavEl.appendChild(backendEditButtonEl);
 
             if (editInBackendUserDropdownLinkEl) {
-                editInBackendUserDropdownLinkEl.href = backendEditButtonEl.href;
+                editInBackendUserDropdownLinkEl.href = backendPath;
             }
 
             document.body.appendChild(frontendToBackendNavEl);

From 212a8bfdd21269b18054200b9e2585e1c95540d6 Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Thu, 14 Apr 2022 17:13:15 +0200
Subject: [PATCH 43/88] [IMP] web_editor, website: working color palette with
 previews

On website, the edition is done in an iframe while the SnippetsMenu
resides outside of said iframe. This means that the SnippetsMenu no
longer has frontend styles. Therefore, colors aren't accurate.

This commit aims at patching web_editor widgets, such as color_palette,
so that the color displayed is always accurate. To do so, it computes
the color inside the iframe and adds style attributes to color_palette
preview elements.

See merge commit for more information.

task-2687506
---
 .../web_editor/static/src/js/common/utils.js  |  2 +-
 .../static/src/js/editor/snippets.options.js  | 16 ++--
 .../src/js/wysiwyg/widgets/color_palette.js   | 18 +++-
 .../src/js/wysiwyg/widgets/link_tools.js      |  3 +-
 .../static/src/js/wysiwyg/wysiwyg.js          | 24 +++++
 .../static/tests/field_html_tests.js          |  2 +-
 addons/website/controllers/main.py            |  1 -
 .../wysiwyg_adapter/wysiwyg_adapter.js        | 48 ++++++++--
 .../static/src/js/editor/snippets.editor.js   | 23 +++++
 .../static/src/js/editor/snippets.options.js  | 93 ++++++++++++++-----
 10 files changed, 180 insertions(+), 50 deletions(-)

diff --git a/addons/web_editor/static/src/js/common/utils.js b/addons/web_editor/static/src/js/common/utils.js
index ad89222ee38..7b976fba888 100644
--- a/addons/web_editor/static/src/js/common/utils.js
+++ b/addons/web_editor/static/src/js/common/utils.js
@@ -249,7 +249,7 @@ function _computeColorClasses(colorNames, prefix = 'bg-') {
  */
 function _getCSSVariableValue(key, htmlStyle) {
     if (htmlStyle === undefined) {
-        htmlStyle = window.getComputedStyle(document.documentElement);
+        htmlStyle = editableWindow.getComputedStyle(editableWindow.document.documentElement);
     }
     // Get trimmed value from the HTML element
     let value = htmlStyle.getPropertyValue(`--${key}`).trim();
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index f1be6a87860..739a8f4a372 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1480,18 +1480,17 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
 
         await this._colorPaletteRenderPromise;
 
-        const classes = weUtils.computeColorClasses(this.colorPalette.getColorNames());
-        this.colorPreviewEl.classList.remove(...classes);
         this.colorPreviewEl.style.removeProperty('background-color');
         this.colorPreviewEl.style.removeProperty('background-image');
+        const prefix = this.options.dataAttributes.colorPrefix || 'bg';
         if (this._ccValue) {
-            this.colorPreviewEl.classList.add('o_cc', `o_cc${this._ccValue}`);
+            this.colorPreviewEl.style.backgroundColor = `var(--we-cp-o-cc${this._ccValue}-${prefix.replace(/-/, '')})`;
         }
         if (this._value) {
             if (ColorpickerWidget.isCSSColor(this._value)) {
                 this.colorPreviewEl.style.backgroundColor = this._value;
             } else if (!weUtils.isColorGradient(this._value)) {
-                this.colorPreviewEl.classList.add(`bg-${this._value}`);
+                this.colorPreviewEl.style.backgroundColor = `var(--we-cp-${this._value}`;
             } else {
                 this.colorPreviewEl.style.backgroundImage = this._value;
             }
@@ -1535,8 +1534,10 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
         if (this.options.dataAttributes.selectedTab) {
             options.selectedTab = this.options.dataAttributes.selectedTab;
         }
-        if (this.getParent().options.wysiwyg) {
-            options.ownerDocument = this.getParent().options.wysiwyg.el.ownerDocument;
+        const wysiwyg = this.getParent().options.wysiwyg;
+        if (wysiwyg) {
+            options.ownerDocument = wysiwyg.el.ownerDocument;
+            options.editable = wysiwyg.$editable[0];
         }
         const oldColorPalette = this.colorPalette;
         this.colorPalette = new ColorPaletteWidget(this, options);
@@ -4028,8 +4029,7 @@ const SnippetOptionWidget = Widget.extend({
                 }
             }
 
-            const reloadMessage = await this._checkIfWidgetsUpdateNeedReload(widgets);
-            requiresReload = !!reloadMessage;
+            requiresReload = !!await this._checkIfWidgetsUpdateNeedReload(widgets);
         }
 
         // Queue action so that we can later skip useless actions.
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
index a395ab67e10..c6e8356399f 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
@@ -8,6 +8,7 @@ const {ColorpickerWidget} = require('web.Colorpicker');
 const Widget = require('web.Widget');
 const customColors = require('web_editor.custom_colors');
 const weUtils = require('web_editor.utils');
+const compatibilityColorNames = ['primary', 'secondary', 'alpha', 'beta', 'gamma', 'delta', 'epsilon', 'success', 'info', 'warning', 'danger'];
 
 const qweb = core.qweb;
 
@@ -53,7 +54,8 @@ const ColorPaletteWidget = Widget.extend({
      */
     init: function (parent, options) {
         this._super.apply(this, arguments);
-        this.style = window.getComputedStyle(document.documentElement);
+        const editableDocument = options.editable ? options.editable.ownerDocument : document;
+        this.style = editableDocument.defaultView.getComputedStyle(editableDocument.documentElement);
         this.options = _.extend({
             selectedColor: false,
             resetButton: true,
@@ -245,7 +247,7 @@ const ColorPaletteWidget = Widget.extend({
         }
 
         // Compute class colors
-        const compatibilityColorNames = ['primary', 'secondary', 'alpha', 'beta', 'gamma', 'delta', 'epsilon', 'success', 'info', 'warning', 'danger'];
+
         this.colorNames = [...compatibilityColorNames];
         this.colorToColorNames = {};
         this.el.querySelectorAll('button[data-color]:not(.o_custom_gradient_btn)').forEach(elem => {
@@ -258,7 +260,7 @@ const ColorPaletteWidget = Widget.extend({
             if (isCCName) {
                 $color.find('.o_we_cc_preview_wrapper').addClass(`o_cc o_cc${colorName}`);
             } else {
-                $color.addClass(`bg-${colorName}`);
+                elem.style.backgroundColor = `var(--we-cp-${colorName})`;
             }
             this.colorNames.push(colorName);
             if (!isCCName && !elem.classList.contains('d-none')) {
@@ -300,6 +302,15 @@ const ColorPaletteWidget = Widget.extend({
             });
             await this.colorPicker.appendTo(this.sections['custom-colors']);
         }
+        // When the color palette is created outside its editing
+        // element, the theme preview might not reflect the styles
+        // of the editable. The parent widgets will update the styles
+        // accordingly.
+        if (!this.options.excluded.includes('theme')) {
+            this.trigger_up('update_color_previews', {
+                ccPreviewEls: this.el.querySelectorAll('.o_we_cc_preview_wrapper'),
+            });
+        }
         return res;
     },
     /**
@@ -1017,5 +1028,6 @@ ColorPaletteWidget.loadDependencies = async function (rpcCapableObj) {
 
 return {
     ColorPaletteWidget: ColorPaletteWidget,
+    compatibilityColorNames: compatibilityColorNames,
 };
 });
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
index ce15875ddda..1680e1cd6ce 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
@@ -321,8 +321,7 @@ const LinkTools = Link.extend({
         const previewClasses = computeColorClasses(colorNames, 'bg-');
         $colorPreview[0].classList.remove(...previewClasses);
         if (isColorClass) {
-            $colorPreview.addClass(`bg-${color.replace(prefix, '')}`);
-            $colorPreview.css('background-color', '');
+            $colorPreview.css('background-color', `var(--we-cp-${color.replace(prefix, '')}`);
             $colorPreview.css('background-image', '');
         } else {
             $colorPreview.css('background-color', isColorGradient(color) ? 'rgba(0, 0, 0, 0)' : color);
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 1835b865afc..7475886e40c 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -9,6 +9,7 @@ const Dialog = require('web.Dialog');
 const customColors = require('web_editor.custom_colors');
 const {ColorPaletteWidget} = require('web_editor.ColorPalette');
 const {ColorpickerWidget} = require('web.Colorpicker');
+const {compatibilityColorNames} = require('web_editor.ColorPalette');
 const concurrency = require('web.concurrency');
 const { device } = require('web.config');
 const { localization } = require('@web/core/l10n/localization');
@@ -342,6 +343,7 @@ const Wysiwyg = Widget.extend({
 
         this._onSelectionChange = this._onSelectionChange.bind(this);
         this.odooEditor.document.addEventListener('selectionchange', this._onSelectionChange);
+        this.setCSSVariables(this.snippetsMenu ? this.snippetsMenu.el : this.toolbar.el);
 
         return _super.apply(this, arguments).then(() => {
             if (this.options.autohideToolbar) {
@@ -1212,6 +1214,28 @@ const Wysiwyg = Widget.extend({
             }
         });
     },
+    /**
+     * Sets custom CSS Variables on the snippet menu element.
+     * Used for color previews and color palette.
+     */
+    setCSSVariables(element) {
+        for (let i = 1; i <= 5; i++) {
+            element.style.setProperty(`--we-cp-o-color-${i}`, weUtils.getCSSVariableValue(`o-color-${i}`));
+            element.style.setProperty(`--we-cp-o-cc${i}-bg`, weUtils.getCSSVariableValue(`o-cc${i}-bg`));
+            element.style.setProperty(`--we-cp-o-cc${i}-h1`, weUtils.getCSSVariableValue(`o-cc${i}-h1`));
+            element.style.setProperty(`--we-cp-o-cc${i}-text`, weUtils.getCSSVariableValue(`o-cc${i}-text`));
+            element.style.setProperty(`--we-cp-o-cc${i}-btn-primary`, weUtils.getCSSVariableValue(`o-cc${i}-btn-primary`));
+            element.style.setProperty(`--we-cp-o-cc${i}-btn-primary-border`, weUtils.getCSSVariableValue(`o-cc${i}-btn-primary-border`));
+            element.style.setProperty(`--we-cp-o-cc${i}-btn-secondary`, weUtils.getCSSVariableValue(`o-cc${i}-btn-secondary`));
+            element.style.setProperty(`--we-cp-o-cc${i}-btn-secondary-border`, weUtils.getCSSVariableValue(`o-cc${i}-btn-secondary-border`));
+        }
+        for (let i = 100; i <= 900; i += 100) {
+            element.style.setProperty(`--we-cp-${i}`, weUtils.getCSSVariableValue(`${i}`));
+        }
+        for (const name of compatibilityColorNames) {
+            element.style.setProperty(`--we-cp-${name}`, weUtils.getCSSVariableValue(name));
+        }
+    },
     /**
      * Detached function to allow overriding.
      *
diff --git a/addons/web_editor/static/tests/field_html_tests.js b/addons/web_editor/static/tests/field_html_tests.js
index 2576847fdf9..19c62309a46 100644
--- a/addons/web_editor/static/tests/field_html_tests.js
+++ b/addons/web_editor/static/tests/field_html_tests.js
@@ -306,7 +306,7 @@ QUnit.module('web_editor', {}, function () {
             // text is selected
 
             await openColorpicker('#toolbar .note-back-color-preview');
-            await testUtils.dom.click($('#toolbar .note-back-color-preview .o_we_color_btn.bg-o-color-3'));
+            await testUtils.dom.click($('#toolbar .note-back-color-preview [style="background-color: var(--we-cp-o-color-3);"]'));
 
             assert.strictEqual($field.find('.note-editable').html(),
                 '<p>t<font style="background-color: rgb(0, 255, 255);">oto t</font><font style="" class="bg-o-color-3">oto to</font>to</p><p>tata</p>',
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index 476b7446663..201e7fd22e4 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -729,7 +729,6 @@ class Website(Home):
             'web.assets_common': request.env['ir.qweb']._get_asset_link_urls('web.assets_common', request.session.debug),
             'web.assets_frontend': request.env['ir.qweb']._get_asset_link_urls('web.assets_frontend', request.session.debug),
             'website.assets_editor_frontend': request.env['ir.qweb']._get_asset_link_urls('website.assets_editor_frontend', request.session.debug),
-            'web.assets_backend': request.env['ir.qweb']._get_asset_link_urls('web.assets_backend', request.session.debug),
         }
 
     # ------------------------------------------------------
diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
index fdcbe59ac15..6b8a858d8b1 100644
--- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
@@ -331,7 +331,6 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
      async _reloadBundles(event) {
         const bundles = await this.rpc('/website/theme_customize_bundle_reload');
         let $allLinksIframe = $();
-        let $allLinksEditor = $();
         const proms = [];
         const createLinksProms = (bundleURLs, $insertionEl) => {
             let $newLinks = $();
@@ -339,7 +338,7 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
                 $newLinks = $newLinks.add('<link/>', {
                     type: 'text/css',
                     rel: 'stylesheet',
-                    href: url + `?${new Date().getTime()}`, // Insures that the css will be reloaded.
+                    href: url + `#t=${new Date().getTime()}`, // Insures that the css will be reloaded.
                 });
             }
             proms.push(new Promise((resolve, reject) => {
@@ -355,11 +354,6 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
         _.map(bundles, (bundleURLs, bundleName) => {
             const selector = `link[href*="${bundleName}"]`;
             const $linksIframe = this.websiteService.contentWindow.$(selector);
-            const $linksEditor = $(selector);
-            if ($linksEditor.length) {
-                $allLinksEditor.add($linksEditor);
-                createLinksProms(bundleURLs, $linksEditor.last());
-            }
             if ($linksIframe.length) {
                 $allLinksIframe = $allLinksIframe.add($linksIframe);
                 createLinksProms(bundleURLs, $linksIframe.last());
@@ -367,7 +361,6 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
         });
         await Promise.all(proms).then(() => {
             $allLinksIframe.remove();
-            $allLinksEditor.remove();
         });
         if (event.data.onSuccess) {
             return event.data.onSuccess();
@@ -604,6 +597,42 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
             },
         });
     }
+    /***
+     * Updates the Color Preview elements to reflect
+     * the colors that are inside the iframe.
+     * See the web_editor.color.combination.preview QWeb template.
+     *
+     * @param event
+     * @param event.data.ccPreviewEls {HTMLElement} The color combination preview element.
+     * @private
+     */
+    _onColorPreviewsUpdate(event) {
+        this.widget.setCSSVariables(this.widget.snippetsMenu.el);
+        const stylesToCopy = [
+            'background-color',
+            'border',
+            'color',
+        ];
+        const copyStyles = (from, to) => {
+            const cloneStyle = this.websiteService.contentWindow.getComputedStyle(from);
+            for (const style of stylesToCopy) {
+                to.style.setProperty(style, cloneStyle.getPropertyValue(style));
+            }
+        };
+
+        for (const ccPreviewEl of event.data.ccPreviewEls) {
+            ccPreviewEl.setAttribute('style', '');
+            Object.values(ccPreviewEl.children).forEach(child => child.setAttribute('style', ''));
+            const iframeClone = ccPreviewEl.cloneNode(true);
+            this.websiteService.pageDocument.body.appendChild(iframeClone);
+            copyStyles(iframeClone, ccPreviewEl);
+            copyStyles(iframeClone.querySelector('h1'), ccPreviewEl.querySelector('h1'));
+            copyStyles(iframeClone.querySelector('.btn-primary'), ccPreviewEl.querySelector('.btn-primary'));
+            copyStyles(iframeClone.querySelector('.btn-secondary'), ccPreviewEl.querySelector('.btn-secondary'));
+            copyStyles(iframeClone.querySelector('p'), ccPreviewEl.querySelector('p'));
+            iframeClone.remove();
+        }
+    }
 }
 WysiwygAdapterComponent.prototype.events = {
     'widgets_start_request': '_onRootEventRequest',
@@ -619,4 +648,5 @@ WysiwygAdapterComponent.prototype.events = {
     'snippet_removed': '_onSnippetRemoved',
     'reload_bundles': '_reloadBundles',
     'menu_dialog': '_onMenuDialogRequest',
-}
\ No newline at end of file
+    'update_color_previews': '_onColorPreviewsUpdate',
+};
diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js
index e6d7f916748..870390411f8 100644
--- a/addons/website/static/src/js/editor/snippets.editor.js
+++ b/addons/website/static/src/js/editor/snippets.editor.js
@@ -22,6 +22,7 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
     custom_events: Object.assign({}, weSnippetEditor.SnippetsMenu.prototype.custom_events, {
         'gmap_api_request': '_onGMapAPIRequest',
         'gmap_api_key_request': '_onGMapAPIKeyRequest',
+        'reload_bundles': '_onReloadBundles',
     }),
     tabs: _.extend({}, weSnippetEditor.SnippetsMenu.prototype.tabs, {
         THEME: 'theme',
@@ -413,6 +414,28 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
         this.$body.toggleClass('o_animated_text_highlighted');
         $(ev.target).toggleClass('fa-eye fa-eye-slash').toggleClass('text-success');
     },
+    /**
+     * On reload bundles, when it's from the theme tab, destroy any
+     * snippetEditor as they might hold outdated style values. (e.g. color palettes).
+     * We do not destroy the Theme tab editors as they should have the correct
+     * values with their compute widget states.
+     * NOTE: This is a bit janky, _computeWidgetState should modify the
+     * option's widget to reflect the style accordingly. But since
+     * color_palette widget is independent of the UserValueWidget, it's hard to
+     * modify its style using the options events.
+     *
+     * @private
+     */
+    _onReloadBundles(ev) {
+        if (this._currentTab === this.tabs.THEME) {
+            const excludeSelector = this.optionsTabStructure.map(element => element[0]).join(', ');
+            for (const editor of this.snippetEditors) {
+                if (!editor.$target[0].matches(excludeSelector)) {
+                    this._mutex.exec(() => editor.destroy());
+                }
+            }
+        }
+    }
 });
 
 weSnippetEditor.SnippetEditor.include({
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 0aa0a614379..1d4ed893b57 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -392,7 +392,6 @@ const GPSPicker = InputUserValueWidget.extend({
         }
     },
 });
-
 options.userValueWidgetsRegistry['we-urlpicker'] = UrlPickerUserValueWidget;
 options.userValueWidgetsRegistry['we-fontfamilypicker'] = FontFamilyPickerUserValueWidget;
 options.userValueWidgetsRegistry['we-gpspicker'] = GPSPicker;
@@ -481,15 +480,18 @@ options.Class.include({
      * @override
      */
     _computeWidgetState: async function (methodName, params) {
-        const style = window.getComputedStyle(this.$target[0].ownerDocument.documentElement);
         switch (methodName) {
             case 'customizeWebsiteViews': {
                 return this._getEnabledCustomizeValues(params.possibleValues, true);
             }
             case 'customizeWebsiteVariable': {
+                const ownerDocument = this.$target[0].ownerDocument;
+                const style = ownerDocument.defaultView.getComputedStyle(ownerDocument.documentElement);
                 return weUtils.getCSSVariableValue(params.variable, style);
             }
             case 'customizeWebsiteColor': {
+                const ownerDocument = this.$target[0].ownerDocument;
+                const style = ownerDocument.defaultView.getComputedStyle(ownerDocument.documentElement);
                 return weUtils.getCSSVariableValue(params.color, style);
             }
             case 'customizeWebsiteAssets': {
@@ -532,11 +534,13 @@ options.Class.include({
         }
 
         // Finally, only update the bundles as no reload is required
-        await new Promise((resolve, reject) => {
-            this.trigger_up('reload_bundles', {
-                onSuccess: () => resolve(),
-                onFailure: () => reject(),
-            });
+        await this._reloadBundles();
+        // Any option that require to reload bundle should probably
+        // also update the color preview of the theme tabs, as
+        // bundles can affect the look of the previews.
+        this.trigger_up('option_update', {
+            optionName: 'ThemeColors',
+            name: 'update_color_previews',
         });
 
         // Some public widgets may depend on the variables that were
@@ -669,6 +673,17 @@ options.Class.include({
             });
         });
     },
+    /**
+     * @private
+     */
+    _reloadBundles: async function() {
+        return new Promise((resolve, reject) => {
+            this.trigger_up('reload_bundles', {
+                onSuccess: () => resolve(),
+                onFailure: () => reject(),
+            });
+        });
+    },
     /**
      * @override
      */
@@ -951,11 +966,14 @@ options.registry.OptionsTab = options.Class.extend({
      */
     async updateUI() {
         // The bg-XXX classes have been updated (and could be updated by another
-        // option like changing color palette) -> remove the inline style that
-        // was added for gray previews.
-        this.$el.find(".o_we_gray_preview").each((_, e) => {
-            e.style.removeProperty("background-color");
-        });
+        // option like changing color palette) -> update the preview element.
+        const ownerDocument = this.$target[0].ownerDocument;
+        const style = ownerDocument.defaultView.getComputedStyle(ownerDocument.documentElement);
+        const grayPreviewEls = this.$el.find(".o_we_gray_preview span");
+        for (const e of grayPreviewEls) {
+            const bgValue = weUtils.getCSSVariableValue(e.getAttribute('variable'), style);
+            e.style.setProperty("background-color", bgValue, "important");
+        }
 
         // If the gray palette has been generated by Odoo standard option,
         // the hue of all gray is the same and the saturation has been
@@ -967,11 +985,11 @@ options.registry.OptionsTab = options.Class.extend({
         const saturationDiffs = [];
         let oneHasNoSaturation = false;
         for (let id = 100; id <= 900; id += 100) {
-            const gray = weUtils.getCSSVariableValue(`${id}`);
+            const gray = weUtils.getCSSVariableValue(`${id}`, style);
             const grayRGB = ColorpickerWidget.convertCSSColorToRgba(gray);
             const grayHSL = ColorpickerWidget.convertRgbToHsl(grayRGB.red, grayRGB.green, grayRGB.blue);
 
-            const baseGray = weUtils.getCSSVariableValue(`base-${id}`);
+            const baseGray = weUtils.getCSSVariableValue(`base-${id}`, style);
             const baseGrayRGB = ColorpickerWidget.convertCSSColorToRgba(baseGray);
             const baseGrayHSL = ColorpickerWidget.convertRgbToHsl(baseGrayRGB.red, baseGrayRGB.green, baseGrayRGB.blue);
 
@@ -1182,7 +1200,8 @@ options.registry.OptionsTab = options.Class.extend({
      * @returns {String} the adjusted color of gray
      */
     _buildGray(id) {
-        const gray = weUtils.getCSSVariableValue(`base-${id}`);
+        const ownerDocument = this.$target[0].ownerDocument;
+        const gray = weUtils.getCSSVariableValue(`base-${id}`, ownerDocument.defaultView.getComputedStyle(ownerDocument.documentElement));
         const grayRGB = ColorpickerWidget.convertCSSColorToRgba(gray);
         const hsl = ColorpickerWidget.convertRgbToHsl(grayRGB.red, grayRGB.green, grayRGB.blue);
         const adjustedGrayRGB = ColorpickerWidget.convertHslToRgb(this.grayParams[this.GRAY_PARAMS.HUE],
@@ -1213,6 +1232,9 @@ options.registry.OptionsTab = options.Class.extend({
             extraSaturationRangeEl.dataset.max = 100 - minValue.hsl.saturation;
             extraSaturationRangeEl.dataset.min = -maxValue.hsl.saturation;
         }
+        uiFragment.querySelectorAll('we-colorpicker').forEach(el => {
+            el.dataset.lazyPalette = 'true';
+        });
     },
     /**
      * @override
@@ -1290,14 +1312,6 @@ options.registry.OptionsTab = options.Class.extend({
         });
         return aceEditor;
     },
-    /**
-     * @override
-     */
-    async _renderCustomXML(uiFragment) {
-        uiFragment.querySelectorAll('we-colorpicker').forEach(el => {
-            el.dataset.lazyPalette = 'true';
-        });
-    },
 });
 
 options.registry.ThemeColors = options.registry.OptionsTab.extend({
@@ -1318,6 +1332,11 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
     // Public
     //--------------------------------------------------------------------------
 
+    notify(name, data) {
+        if (name === 'update_color_previews') {
+            this.updateColorPreviews = true;
+        }
+    },
     /**
      * @override
      */
@@ -1326,11 +1345,31 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
         const oldColorSystemEl = this.el.querySelector('.o_old_color_system_warning');
         oldColorSystemEl.classList.toggle('d-none', !this._showOldColorSystemWarning);
     },
+    /**
+     * @override
+     */
+    async updateUI() {
+        if (this.updateColorPreviews) {
+            const ccPreviewEls = this.el.querySelectorAll('.o_we_cc_preview_wrapper');
+            this.trigger_up('update_color_previews', {
+                ccPreviewEls,
+            });
+            this.updateColorPreviews = false;
+        }
+        await this._super(...arguments);
+    },
 
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * @override
+     */
+    _select() {
+        this.updateColorPreviews = true;
+        return this._super(...arguments);
+    },
     /**
      * @override
      */
@@ -1355,18 +1394,22 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
         }
 
         const presetCollapseEl = uiFragment.querySelector('we-collapse.o_we_theme_presets_collapse');
+        let ccPreviewEls = [];
         for (let i = 1; i <= 5; i++) {
             const collapseEl = document.createElement('we-collapse');
             const ccPreviewEl = $(qweb.render('web_editor.color.combination.preview'))[0];
-            ccPreviewEl.classList.add('text-center', `o_cc${i}`, 'o_we_collapse_toggler');
+            ccPreviewEl.classList.add('text-center', `o_cc${i}`, 'o_colored_level', 'o_we_collapse_toggler');
             collapseEl.appendChild(ccPreviewEl);
             const editionEls = $(qweb.render('website.color_combination_edition', {number: i}));
             for (const el of editionEls) {
                 collapseEl.appendChild(el);
             }
+            ccPreviewEls.push(ccPreviewEl);
             presetCollapseEl.appendChild(collapseEl);
         }
-
+        this.trigger_up('update_color_previews', {
+            ccPreviewEls,
+        });
         await this._super(...arguments);
     },
 });

From 35881555346da3df3030906d3feccc46e91c692e Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Thu, 7 Apr 2022 21:54:54 +0200
Subject: [PATCH 44/88] [IMP] website, web_editor: add mobile preview

See merge commit for more information.

task-2687506
---
 .../static/src/js/editor/snippets.editor.js   |  5 +-
 .../website_preview/website_preview.scss      | 40 ++++++++-
 .../website_preview/website_preview.xml       | 20 ++---
 .../wysiwyg_adapter/wysiwyg_adapter.js        |  8 ++
 .../static/src/services/website_service.js    |  1 +
 .../src/systray_items/mobile_preview.js       | 81 ++++---------------
 .../src/systray_items/mobile_preview.xml      |  8 ++
 addons/website/views/snippets/snippets.xml    |  3 +
 8 files changed, 84 insertions(+), 82 deletions(-)
 create mode 100644 addons/website/static/src/systray_items/mobile_preview.xml

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 9c5495f09da..a324b4be5f3 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -1349,6 +1349,7 @@ var SnippetsMenu = Widget.extend({
         }, 50);
         this.$window.on('resize.snippets_menu', debouncedCoverUpdate);
         this.$body.on('content_changed.snippets_menu', debouncedCoverUpdate);
+        $(this.$body[0].ownerDocument.defaultView).on('resize.snippets_menu', debouncedCoverUpdate);
 
         // On keydown add a class on the active overlay to hide it and show it
         // again when the mouse moves
@@ -3390,8 +3391,8 @@ var SnippetsMenu = Widget.extend({
     /**
      * Preview on mobile.
      */
-    _onMobilePreviewClick: async function () {
-        throw new Error('implement me');
+    _onMobilePreviewClick: function () {
+        this.trigger_up('request_mobile_preview');
     },
     /**
      * Undo..
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.scss b/addons/website/static/src/client_actions/website_preview/website_preview.scss
index 9222defd3ab..386833a6a0e 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.scss
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.scss
@@ -1,3 +1,14 @@
+@mixin o-iframe-position($height) {
+    // TODO review this, this should not be needed as we want the iframe to
+    // be centered and potentially respect its aspect ratio whatever the size.
+    $width: $height * (9 / 16);
+    height: $height;
+    width: $width;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
 .o_website_preview {
     position: relative;
     height: 100%;
@@ -7,11 +18,32 @@
         margin-right: $o-we-sidebar-width !important;
     }
 
-    > iframe {
-        @include o-position-absolute(0, 0, 0, 0);
-        width: 100%;
+    .o_iframe_container {
+        position: relative;
         height: 100%;
-        border: none;
+        width: 100%;
+
+        iframe {
+            position: absolute;
+            border: none;
+            width: 100%;
+            height: 100%;
+        }
+
+        &.o_is_mobile {
+            @include media-breakpoint-up(md) {
+                @include o-iframe-position(720px);
+
+                @media(max-height: calc(720px + #{$o-navbar-height})) {
+                    @include o-iframe-position(520px);
+                }
+
+                iframe {
+                    border-radius: 25px;
+                    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
+                }
+            }
+        }
     }
 }
 
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml
index ad4e3254506..bdcf03c57f2 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.xml
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml
@@ -2,16 +2,18 @@
 <templates xml:space="preserve">
 <t t-name="website.WebsitePreview" owl="1">
     <div class="o_website_preview" t-att-class="{ 'editor_enable editor_has_snippets': this.websiteContext.snippetsLoaded }">
-        <iframe t-att-src="iframeFallbackUrl"
-            t-att-class="{ 'd-none': this.websiteContext.edition }"
-            t-ref="iframefallback"/>
-        <iframe t-att-src="initialUrl"
-            class="o_iframe"
-            t-ref="iframe"
-            t-on-load="_onPageLoaded"/>
+        <div class="o_iframe_container" t-att-class="{ 'o_is_mobile': this.websiteContext.isMobile }">
+            <iframe t-att-src="iframeFallbackUrl"
+                t-att-class="{ 'd-none': this.websiteContext.edition }"
+                t-ref="iframefallback"/>
+            <iframe t-att-src="initialUrl"
+                class="o_iframe"
+                t-ref="iframe"
+                t-on-load="_onPageLoaded"/>
+        </div>
+        <WebsiteEditorComponent t-if="websiteContext.edition"
+            reloadIframe.bind="this.reloadIframe"/>
     </div>
-    <WebsiteEditorComponent t-if="websiteContext.edition"
-        reloadIframe.bind="this.reloadIframe"/>
 </t>
 
 <div t-name="website.homepage_editor_welcome_message" class="container text-center o_homepage_editor_welcome_message">
diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
index 6b8a858d8b1..119958d7955 100644
--- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
@@ -633,6 +633,13 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
             iframeClone.remove();
         }
     }
+    /**
+     * Update the context to trigger a mobile view.
+     * @private
+     */
+    _onMobilePreviewRequest() {
+        this.websiteService.context.isMobile = !this.websiteService.context.isMobile;
+    }
 }
 WysiwygAdapterComponent.prototype.events = {
     'widgets_start_request': '_onRootEventRequest',
@@ -649,4 +656,5 @@ WysiwygAdapterComponent.prototype.events = {
     'reload_bundles': '_reloadBundles',
     'menu_dialog': '_onMenuDialogRequest',
     'update_color_previews': '_onColorPreviewsUpdate',
+    'request_mobile_preview': '_onMobilePreviewRequest',
 };
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index fecb6325ed7..56a0b879f26 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -39,6 +39,7 @@ export const websiteService = {
             edition: false,
             isPublicRootReady: false,
             snippetsLoaded: false,
+            isMobile: false,
         });
         const bus = new EventBus();
 
diff --git a/addons/website/static/src/systray_items/mobile_preview.js b/addons/website/static/src/systray_items/mobile_preview.js
index 7c4f3e8d09d..70a26785c7d 100644
--- a/addons/website/static/src/systray_items/mobile_preview.js
+++ b/addons/website/static/src/systray_items/mobile_preview.js
@@ -1,72 +1,19 @@
-odoo.define('website.mobile', function (require) {
-'use strict';
+/** @odoo-module **/
 
-const {_t} = require('web.core');
-const {Markup} = require('web.utils');
-var Dialog = require('web.Dialog');
-var websiteNavbarData = require('website.navbar');
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
 
-const { registry } = require("@web/core/registry");
+const { Component } = owl;
 
-var MobilePreviewDialog = Dialog.extend({
-    /**
-     * Tweaks the modal so that it appears as a phone and modifies the iframe
-     * rendering to show more accurate mobile view.
-     *
-     * @override
-     */
-    start: function () {
-        var self = this;
-        this.$modal.addClass('oe_mobile_preview');
-        this.$modal.on('click', '.modal-header', function () {
-            self.$el.toggleClass('o_invert_orientation');
-        });
-        this.$iframe = $('<iframe/>', {
-            id: 'mobile-viewport',
-            src: $.param.querystring(window.location.href, 'mobilepreview'),
-        });
-        this.$iframe.on('load', function (e) {
-            self.$iframe.contents().find('body').removeClass('o_connected_user');
-            self.$iframe.contents().find('#oe_main_menu_navbar').remove();
-        });
-        this.$iframe.appendTo(this.$el);
+class MobilePreviewSystray extends Component {
+    setup() {
+        this.websiteService = useService('website');
+    }
+}
+MobilePreviewSystray.template = "website.MobilePreviewSystray";
 
-        return this._super.apply(this, arguments);
-    },
-});
-
-var MobileMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
-    actions: _.extend({}, websiteNavbarData.WebsiteNavbarActionWidget.prototype.actions || {}, {
-        'show-mobile-preview': '_onMobilePreviewClick',
-    }),
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Called when the mobile action is triggered -> instantiate the mobile
-     * preview dialog.
-     *
-     * @private
-     */
-    _onMobilePreviewClick: function () {
-        if (this.mobilePreview && !this.mobilePreview.isDestroyed()) {
-            return this.mobilePreview.close();
-        }
-        this.mobilePreview = new MobilePreviewDialog(this, {
-            title: Markup(_.escape(_t('Mobile preview')) + ' <span class="fa fa-refresh"/>'),
-        }).open();
-    },
-});
-
-registry.category("website_navbar_widgets").add("MobileMenu", {
-    Widget: MobileMenu,
-    selector: '#mobile-menu',
-});
-
-return {
-    MobileMenu: MobileMenu,
-    MobilePreviewDialog: MobilePreviewDialog,
+export const systrayItem = {
+    Component: MobilePreviewSystray,
 };
-});
+
+registry.category("website_systray").add("MobilePreview", systrayItem, { sequence: 12 });
diff --git a/addons/website/static/src/systray_items/mobile_preview.xml b/addons/website/static/src/systray_items/mobile_preview.xml
new file mode 100644
index 00000000000..a34d7e6f40e
--- /dev/null
+++ b/addons/website/static/src/systray_items/mobile_preview.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+<t t-name="website.MobilePreviewSystray" owl="1">
+    <div class="o_mobile_preview o_menu_systray_item" t-on-click="() => this.websiteService.context.isMobile = !this.websiteService.context.isMobile">
+        <a href="#" accesskey="v"><span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-lg fa-mobile"/></a>
+    </div>
+</t>
+</templates>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 603b1f4e6f3..7a6d8a80b73 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -3,6 +3,9 @@
 
 <!-- Snippets menu -->
 <template id="snippets" inherit_id="web_editor.snippets" primary="True" groups="base.group_user">
+    <xpath expr="//button[@data-action='cancel']" position="before">
+        <button type="button" class="btn btn-secondary" data-action="mobile" title="Mobile Preview" accesskey="v"><span class="fa fa-mobile" style="font-size: 18px;"/></button>
+    </xpath>
     <xpath expr="//div[@id='snippets_menu']" position="inside">
         <button type="button" tabindex="3" class="o_we_customize_theme_btn text-uppercase"
                 groups="website.group_website_designer" accesskey="2">

From 457e655ff7f4651f185bd7544b8384e2d0ee8ef8 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Fri, 8 Apr 2022 11:04:00 +0200
Subject: [PATCH 45/88] [FIX] web, web_editor: adapt drag and drop to iframe
 snippets

SmoothScrollOnDrag and jquery-ui, the libraries used to handle the drag
and drop of the snippets, are using the HTMLElement
getBoundingClientRect method on the draggable/droppable elements to get
their position, listen to mouseover events and trigger scroll while
dragging.

With the WebsiteEditorClientAction's iframe, the getBoundingClientRect
method of elements inside the iframe was not taking into account a
possible offset of the iframe. For example, in the "mobile preview"
edition mode, the iframe was reduced in size and centered in the screen.

This commit adds this offset to these libraries:
- in SmoothScrollOnDrag, when the drag is started, to correctly trigger
the scroll inside the iframe.
- the insertion zones' getBoundingClientRect (used for the jquery-ui
droppable) is patched.
- the SnippetEditor.cover method is adapted to correctly display the
handles over the snippets.

See merge commit for more information.

task-2687506
---
 .../legacy/js/core/smooth_scroll_on_drag.js   | 10 ++++++
 .../static/src/js/editor/snippets.editor.js   | 31 +++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/addons/web/static/src/legacy/js/core/smooth_scroll_on_drag.js b/addons/web/static/src/legacy/js/core/smooth_scroll_on_drag.js
index 37aae5f1f44..1e9eeb20f6f 100644
--- a/addons/web/static/src/legacy/js/core/smooth_scroll_on_drag.js
+++ b/addons/web/static/src/legacy/js/core/smooth_scroll_on_drag.js
@@ -254,6 +254,14 @@ const SmoothScrollOnDrag = Class.extend(mixins.ParentedMixin, {
                 - this.options.offsetElementsManager.left(),
         };
 
+        if (this.iframeOffset) {
+            const { x, y } = this.iframeOffset;
+            visibleOffset.left -= x;
+            visibleOffset.top -= y;
+            visibleOffset.bottom += y;
+            visibleOffset.right += x;
+        }
+
         // If this.$scrollTarget is the html tag, we need to take the scroll position in to account
         // as offsets positions are calculated relative to the document (thus <html>).
         if (this.scrollTargetIsDocument) {
@@ -361,6 +369,8 @@ const SmoothScrollOnDrag = Class.extend(mixins.ParentedMixin, {
      */
     _onSmoothDragStart(ev, ui, onDragStartCallBack) {
         this.scrollTargetIsDocument = this.$scrollTarget.is('html');
+        const iframeEl = this.$scrollTarget[0].ownerDocument.defaultView.frameElement;
+        this.iframeOffset = iframeEl && iframeEl.getBoundingClientRect();
         this.scrollTargetIsParent = this.$scrollTarget.get(0).contains(this.$element.get(0));
         this._updatePositionOptions(ui);
         this._startSmoothScroll(ui);
diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index a324b4be5f3..cf5eb31e0b7 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -368,6 +368,16 @@ var SnippetEditor = Widget.extend({
 
         // Now cover the element
         const offset = $target.offset();
+
+        // If the target is in an iframe, we need the iframe offset.
+        const targetWindow = $target[0].ownerDocument.defaultView;
+        const editorWindow = this.$el[0].ownerDocument.defaultView;
+        if (targetWindow.frameElement && targetWindow !== editorWindow) {
+            const { x, y } = targetWindow.frameElement.getBoundingClientRect();
+            offset.left += x;
+            offset.top += y;
+        }
+
         var manipulatorOffset = this.$el.parent().offset();
         offset.top -= manipulatorOffset.top;
         offset.left -= manipulatorOffset.left;
@@ -1778,6 +1788,13 @@ var SnippetsMenu = Widget.extend({
         // Cleaning consecutive zone and up zones placed between floating or
         // inline elements. We do not like these kind of zones.
         $zones = this.getEditableArea().find('.oe_drop_zone:not(.oe_vertical)');
+
+        let iframeOffset;
+        const bodyWindow = this.$body[0].ownerDocument.defaultView;
+        if (bodyWindow.frameElement && bodyWindow !== this.ownerDocument.defaultView) {
+            iframeOffset = bodyWindow.frameElement.getBoundingClientRect();
+        }
+
         $zones.each(function () {
             var zone = $(this);
             var prev = zone.prev();
@@ -1798,6 +1815,20 @@ var SnippetsMenu = Widget.extend({
              && dispPrev.indexOf('inline') >= 0 && dispNext.indexOf('inline') >= 0) {
                 zone.remove();
             }
+
+            // In the case of the SnippetsMenu being instanciated in the global
+            // document, with its editable content in an iframe, we want to
+            // take the iframe's offset into account to compute the dropzones.
+            if (iframeOffset) {
+                this.oldGetBoundingClientRect = this.getBoundingClientRect;
+                this.getBoundingClientRect = () => {
+                    const rect = this.oldGetBoundingClientRect();
+                    const { x, y } = iframeOffset;
+                    rect.x += x;
+                    rect.y += y;
+                    return rect;
+                };
+            }
         });
     },
     /**

From b173bb161ead7681d8845e8494a5c3b6301f6c74 Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Wed, 20 Apr 2022 10:47:05 +0200
Subject: [PATCH 46/88] [IMP] web_editor, website: use master's loading spinner

Use a BlockIframe component when the iframe is being reloaded,
use the new loading spinner in the web_editor.
Scroll the snippet into view when reloading the editor.

See merge commit for more information.

task-2687506
---
 .../static/src/js/editor/snippets.editor.js   | 10 +----
 .../website_preview/website_preview.js        | 45 ++++++++++++++++++-
 .../website_preview/website_preview.scss      |  8 ++++
 .../website_preview/website_preview.xml       | 13 ++++++
 .../static/src/components/editor/editor.js    |  5 +++
 .../wysiwyg_adapter/wysiwyg_adapter.js        | 11 +++--
 .../static/src/services/website_service.js    |  9 ++++
 7 files changed, 88 insertions(+), 13 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index cf5eb31e0b7..bd8e634dc7e 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -2716,21 +2716,15 @@ var SnippetsMenu = Widget.extend({
      */
     _createLoadingElement() {
         const loaderContainer = document.createElement('div');
-        const loader = document.createElement('i');
+        const loader = document.createElement('img');
         const loaderContainerClassList = [
             'o_we_ui_loading',
             'd-flex',
             'justify-content-center',
             'align-items-center',
         ];
-        const loaderClassList = [
-            'fa',
-            'fa-circle-o-notch',
-            'fa-spin',
-            'fa-4x',
-        ];
         loaderContainer.classList.add(...loaderContainerClassList);
-        loader.classList.add(...loaderClassList);
+        loader.setAttribute('src', '/web/static/img/spin.svg');
         loaderContainer.appendChild(loader);
         return loaderContainer;
     },
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index afac4cdb4ea..73fd0647b8b 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -7,6 +7,41 @@ import { WebsiteEditorComponent } from '../../components/editor/editor';
 
 const { Component, onWillStart, useRef, useEffect, useState } = owl;
 
+class BlockIframe extends Component {
+    setup() {
+        this.websiteService = useService('website');
+        this.state = useState({
+            blockIframe: false,
+            showLoader: false,
+        });
+        this.iframeLocks = 0;
+        this.websiteService.bus.addEventListener("BLOCK", this.block.bind(this));
+        this.websiteService.bus.addEventListener("UNBLOCK", this.unblock.bind(this));
+    }
+    block(event) {
+        if (event.detail.showLoader && !this.state.showLoader) {
+            setTimeout(() => {
+                this.state.showLoader = true;
+            }, event.detail.loaderDelay);
+        }
+        if (this.iframeLocks === 0) {
+            this.state.blockIframe = true;
+        }
+        this.iframeLocks++;
+    }
+    unblock() {
+        this.iframeLocks--;
+        if (this.iframeLocks < 0) {
+            this.iframeLocks = 0;
+        }
+        if (this.iframeLocks === 0) {
+            this.state.blockIframe = false;
+            this.state.showLoader = false;
+        }
+    }
+}
+BlockIframe.template = 'website.BlockIframe';
+
 export class WebsitePreview extends Component {
     setup() {
         this.websiteService = useService('website');
@@ -44,6 +79,11 @@ export class WebsitePreview extends Component {
                 this.addWelcomeMessage();
             }
         }, () => [this.websiteContext.edition]);
+
+        useEffect(() => {
+            this.websiteService.blockIframe();
+            this.iframe.el.addEventListener('OdooFrameContentLoaded', () => this.websiteService.unblockIframe(), { once: true });
+        }, () => []);
     }
 
     get websiteId() {
@@ -171,6 +211,9 @@ export class WebsitePreview extends Component {
     }
 }
 WebsitePreview.template = 'website.WebsitePreview';
-WebsitePreview.components = { WebsiteEditorComponent };
+WebsitePreview.components = {
+    WebsiteEditorComponent,
+    BlockIframe
+};
 
 registry.category('actions').add('website_preview', WebsitePreview);
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.scss b/addons/website/static/src/client_actions/website_preview/website_preview.scss
index 386833a6a0e..e031711dcbb 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.scss
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.scss
@@ -42,6 +42,10 @@
                     border-radius: 25px;
                     box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
                 }
+
+                .o_block_iframe {
+                    border-radius: 25px;
+                }
             }
         }
     }
@@ -68,3 +72,7 @@ header {
         transition: transform 400ms ease, height 400ms ease, border-bottom 400ms ease;
     }
 }
+
+.o_block_iframe {
+    z-index: $zindex-dropdown - 1;
+}
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml
index bdcf03c57f2..a5a48b6e774 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.xml
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml
@@ -1,8 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
+<t t-name="website.BlockIframe" owl="1">
+    <t t-if="this.state.blockIframe">
+        <div class="o_block_iframe position-absolute d-flex justify-content-center align-items-center flex-column h-100 w-100" t-att-class="{ 'bg-black-50': this.state.showLoader }">
+            <t t-if="this.state.showLoader">
+                <div class="o_spinner mb-4">
+                    <img src="/web/static/img/spin.svg" alt="Loading..."/>
+                </div>
+            </t>
+        </div>
+    </t>
+</t>
+
 <t t-name="website.WebsitePreview" owl="1">
     <div class="o_website_preview" t-att-class="{ 'editor_enable editor_has_snippets': this.websiteContext.snippetsLoaded }">
         <div class="o_iframe_container" t-att-class="{ 'o_is_mobile': this.websiteContext.isMobile }">
+            <BlockIframe/>
             <iframe t-att-src="iframeFallbackUrl"
                 t-att-class="{ 'd-none': this.websiteContext.edition }"
                 t-ref="iframefallback"/>
diff --git a/addons/website/static/src/components/editor/editor.js b/addons/website/static/src/components/editor/editor.js
index 5a314999a8b..37524636039 100644
--- a/addons/website/static/src/components/editor/editor.js
+++ b/addons/website/static/src/components/editor/editor.js
@@ -24,6 +24,7 @@ export class WebsiteEditorComponent extends Component {
         useChildSubEnv(legacyEnv);
 
         onWillStart(async () => {
+            this.websiteService.blockIframe(false);
             this.Wysiwyg = await this.websiteService.loadWysiwyg();
         });
 
@@ -38,6 +39,7 @@ export class WebsiteEditorComponent extends Component {
         this.websiteContext.snippetsLoaded = true;
         this.state.reloading = false;
         this.wysiwygOptions.invalidateSnippetCache = false;
+        this.websiteService.unblockIframe();
     }
     /**
      * Prepares the editor for reload. Copies the widget element tree
@@ -47,6 +49,7 @@ export class WebsiteEditorComponent extends Component {
      * @param widgetEl {HTMLElement} Widget element of the editor to copy.
      */
     willReload(widgetEl) {
+        this.websiteService.blockIframe();
         if (widgetEl) {
             widgetEl.querySelectorAll('#oe_manipulators').forEach(el => el.remove());
             widgetEl.querySelectorAll('we-input input').forEach((input, index) => {
@@ -82,12 +85,14 @@ export class WebsiteEditorComponent extends Component {
      * @returns {Promise<void>}
      */
     async quit() {
+        this.websiteService.blockIframe(true, 400);
         document.body.classList.remove('editor_has_snippets');
         this.websiteContext.snippetsLoaded = false;
         setTimeout(async () => {
             this.state.showWysiwyg = false;
             await this.props.reloadIframe();
             this.websiteContext.edition = false;
+            this.websiteService.unblockIframe();
         }, 400);
     }
 }
diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
index 119958d7955..5a4ea0ccea0 100644
--- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
@@ -59,8 +59,11 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
                 this._setObserver();
 
                 if (this.props.snippetSelector) {
-                    const snippetEl = $(this.websiteService.pageDocument).find(this.props.snippetSelector);
-                    await this.widget.snippetsMenu.activateSnippet($(snippetEl));
+                    const $snippetEl = $(this.websiteService.pageDocument).find(this.props.snippetSelector);
+                    await this.widget.snippetsMenu.activateSnippet($snippetEl);
+                    if ($snippetEl.length) {
+                        $snippetEl[0].scrollIntoView();
+                    }
                 }
                 // The jquery instance inside the iframe needs to be aware of the wysiwyg.
                 this.websiteService.contentWindow.$('#wrapwrap').data('wysiwyg', this.widget);
@@ -518,14 +521,14 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
                     url: event.data.url,
                     invalidateSnippetCache: event.data.invalidateSnippetCache
                 });
-            }
+            };
         } else {
             if (event.data.onSuccess) {
                 callback = event.data.onSuccess;
             }
         }
         if (isDirty) {
-            return this.save().then(callback)
+            return this.save().then(callback);
         } else {
             return callback();
         }
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 56a0b879f26..115928c30c6 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -76,6 +76,9 @@ export const websiteService = {
             get context() {
                 return context;
             },
+            get bus() {
+                return bus;
+            },
             set pageDocument(document) {
                 pageDocument = document;
                 if (!document) {
@@ -143,6 +146,12 @@ export const websiteService = {
                     Wysiwyg = await getWysiwygClass({wysiwygAlias: 'website.wysiwyg'}, ['website.compiled_assets_wysiwyg']);
                 }
                 return Wysiwyg;
+            },
+            blockIframe(showLoader = true, loaderDelay = 0) {
+                bus.trigger('BLOCK', {showLoader, loaderDelay});
+            },
+            unblockIframe() {
+                bus.trigger('UNBLOCK');
             }
         };
     },

From 7fd0698cf765a79959566b51e33cb76bff83d344 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Mon, 13 Jun 2022 18:20:47 +0200
Subject: [PATCH 47/88] [IMP] web_editor, web_unsplash, website: add media
 dialog

The media dialog was refactored using owl.
It can be displayed via the dialogs service.

The (Image/Document/Icon/Video)Selector components are controlled by the
state of their parent, the MediaDialog: this.selectedMedia.

Some things differ from the original implementation: the dialog still
takes (optionally) a media as a parameter, but it does not directly
modify it anymore.
It will pass the selected media as a parameter to a callback, save, that
it gets as a prop. That save prop should be responsible to make the
appropriate modification to the original media, given the new selected
media.

The code opens up for an easy multiSelect of other tabs than the images
(multiIcons, multiDocuments), but that use case is not currently tackled
and maybe it would be better to simplify the code.

See merge commit for more information.

task-2687506
---
 addons/web_editor/__manifest__.py             |   10 +-
 .../media_dialog/document_selector.js         |   74 +
 .../media_dialog/document_selector.xml        |   30 +
 .../components/media_dialog/file_selector.js  | 1744 +++--------------
 .../components/media_dialog/file_selector.xml |   73 +
 .../components/media_dialog/icon_selector.js  |   70 +
 .../components/media_dialog/icon_selector.xml |   23 +
 .../components/media_dialog/image_selector.js |  261 +++
 .../media_dialog/image_selector.xml           |   62 +
 .../components/media_dialog/media_dialog.js   |  435 ++--
 .../components/media_dialog/media_dialog.scss |  141 ++
 .../components/media_dialog/media_dialog.xml  |   21 +
 .../components/media_dialog/search_media.js   |   20 +
 .../components/media_dialog/video_selector.js |  204 ++
 .../media_dialog/video_selector.xml           |   61 +
 .../upload_progress_toast.js                  |  136 +-
 .../upload_progress_toast.scss                |    9 +
 .../upload_progress_toast.xml                 |   41 +
 .../upload_progress_toast/upload_service.js   |  117 ++
 .../web_editor/static/src/scss/wysiwyg.scss   |  132 --
 addons/web_editor/static/src/xml/wysiwyg.xml  |  308 ---
 addons/web_unsplash/__manifest__.py           |   11 +-
 .../components/media_dialog/image_selector.js |  475 +++--
 .../media_dialog/image_selector.xml           |  151 +-
 .../static/src/services/unsplash_service.js   |  129 +-
 addons/website/__manifest__.py                |    2 +-
 .../static/src/components/dialog/seo.js       |   29 +
 .../static/src/components/dialog/seo.xml      |    2 +-
 .../components/media_dialog/image_selector.js |   13 +-
 29 files changed, 2012 insertions(+), 2772 deletions(-)
 create mode 100644 addons/web_editor/static/src/components/media_dialog/document_selector.js
 create mode 100644 addons/web_editor/static/src/components/media_dialog/document_selector.xml
 create mode 100644 addons/web_editor/static/src/components/media_dialog/file_selector.xml
 create mode 100644 addons/web_editor/static/src/components/media_dialog/icon_selector.js
 create mode 100644 addons/web_editor/static/src/components/media_dialog/icon_selector.xml
 create mode 100644 addons/web_editor/static/src/components/media_dialog/image_selector.js
 create mode 100644 addons/web_editor/static/src/components/media_dialog/image_selector.xml
 create mode 100644 addons/web_editor/static/src/components/media_dialog/media_dialog.scss
 create mode 100644 addons/web_editor/static/src/components/media_dialog/media_dialog.xml
 create mode 100644 addons/web_editor/static/src/components/media_dialog/search_media.js
 create mode 100644 addons/web_editor/static/src/components/media_dialog/video_selector.js
 create mode 100644 addons/web_editor/static/src/components/media_dialog/video_selector.xml
 create mode 100644 addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.scss
 create mode 100644 addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml
 create mode 100644 addons/web_editor/static/src/components/upload_progress_toast/upload_service.js

diff --git a/addons/web_editor/__manifest__.py b/addons/web_editor/__manifest__.py
index 1649e9fda5e..32186183610 100644
--- a/addons/web_editor/__manifest__.py
+++ b/addons/web_editor/__manifest__.py
@@ -24,6 +24,7 @@ Odoo Web Editor widget.
 
         'web.assets_qweb': [
             'web_editor/static/src/xml/*.xml',
+            'web_editor/static/src/components/**/*.xml',
         ],
         'web_editor.assets_wysiwyg': [
 
@@ -70,7 +71,6 @@ Odoo Web Editor widget.
             'web_editor/static/src/scss/wysiwyg_iframe.scss',
             'web_editor/static/src/scss/wysiwyg_snippets.scss',
 
-            'web_editor/static/src/js/wysiwyg/fonts.js',
             'web_editor/static/src/js/base.js',
             'web_editor/static/src/js/editor/perspective_utils.js',
             'web_editor/static/src/js/editor/image_processing.js',
@@ -78,9 +78,6 @@ Odoo Web Editor widget.
 
             # widgets & plugins
             'web_editor/static/src/js/wysiwyg/widgets/**/*',
-            'web_editor/static/src/components/media_dialog/file_selector.js',
-            'web_editor/static/src/components/media_dialog/media_dialog.js',
-            'web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js',
             'web_editor/static/src/js/editor/snippets.editor.js',
             'web_editor/static/src/js/editor/toolbar.js',
             'web_editor/static/src/js/editor/snippets.options.js',
@@ -94,6 +91,7 @@ Odoo Web Editor widget.
             'web_editor/static/lib/vkbeautify/**/*',
             'web_editor/static/src/js/common/**/*',
             'web_editor/static/lib/odoo-editor/src/utils/utils.js',
+            'web_editor/static/src/js/wysiwyg/fonts.js',
         ],
         'web.assets_backend': [
             'web_editor/static/src/scss/web_editor.common.scss',
@@ -102,6 +100,10 @@ Odoo Web Editor widget.
             'web_editor/static/src/js/wysiwyg/dialog.js',
             'web_editor/static/src/js/frontend/loader.js',
             'web_editor/static/src/js/backend/**/*',
+            'web_editor/static/src/components/media_dialog/*.js',
+            'web_editor/static/src/components/media_dialog/*.scss',
+            'web_editor/static/src/components/upload_progress_toast/*.js',
+            'web_editor/static/src/components/upload_progress_toast/*.scss',
         ],
         'web.assets_frontend_minimal': [
             'web_editor/static/src/js/frontend/loader_loading.js',
diff --git a/addons/web_editor/static/src/components/media_dialog/document_selector.js b/addons/web_editor/static/src/components/media_dialog/document_selector.js
new file mode 100644
index 00000000000..73d241fc143
--- /dev/null
+++ b/addons/web_editor/static/src/components/media_dialog/document_selector.js
@@ -0,0 +1,74 @@
+/** @odoo-module */
+
+import { Attachment, FileSelector, IMAGE_MIMETYPES } from './file_selector';
+
+export class DocumentAttachment extends Attachment {}
+DocumentAttachment.template = 'web_editor.DocumentAttachment';
+
+export class DocumentSelector extends FileSelector {
+    setup() {
+        super.setup();
+
+        this.uploadText = this.env._t("Upload a document");
+        this.urlPlaceholder = "https://www.odoo.com/mydocument";
+        this.addText = this.env._t("Add document");
+        this.searchPlaceholder = this.env._t("Search a document");
+        this.allLoadedText = this.env._t("All documents have been loaded");
+    }
+
+    get attachmentsDomain() {
+        const domain = super.attachmentsDomain;
+        domain.push(['mimetype', 'not in', IMAGE_MIMETYPES]);
+        // The assets should not be part of the documents.
+        // All assets begin with '/web/assets/', see _get_asset_template_url().
+        domain.unshift('&', '|', ['url', '=', null], '!', ['url', '=like', '/web/assets/%']);
+        return domain;
+    }
+
+    async onClickDocument(document) {
+        this.selectAttachment(document);
+        await this.props.save();
+    }
+
+    async fetchAttachments(...args) {
+        const attachments = await super.fetchAttachments(...args);
+
+        if (this.selectInitialMedia()) {
+            for (const attachment of attachments) {
+                if (`/web/content/${attachment.id}` === this.props.media.getAttribute('href').replace(/[?].*/, '')) {
+                    this.selectAttachment(attachment);
+                }
+            }
+        }
+        return attachments;
+    }
+
+    /**
+     * Utility method used by the MediaDialog component.
+     */
+    static async createElements(selectedMedia, { orm }) {
+        return Promise.all(selectedMedia.map(async attachment => {
+            const linkEl = document.createElement('a');
+            let href = `/web/content/${attachment.id}?unique=${attachment.checksum}&dowload=true`;
+            if (!attachment.public) {
+                const [accessToken] = await orm.call(
+                    'ir.attachment',
+                    'generate_access_token',
+                    [attachment.id],
+                );
+                href += `&access_token=${accessToken}`;
+            }
+            linkEl.href = href;
+            linkEl.title = attachment.name;
+            linkEl.dataset.mimetype = attachment.mimetype;
+            return linkEl;
+        }));
+    }
+}
+DocumentSelector.mediaSpecificClasses = ['o_image'];
+DocumentSelector.tagNames = ['A'];
+DocumentSelector.attachmentsListTemplate = 'web_editor.DocumentsListTemplate';
+DocumentSelector.components = {
+    ...FileSelector.components,
+    DocumentAttachment,
+};
diff --git a/addons/web_editor/static/src/components/media_dialog/document_selector.xml b/addons/web_editor/static/src/components/media_dialog/document_selector.xml
new file mode 100644
index 00000000000..fbd3660cacf
--- /dev/null
+++ b/addons/web_editor/static/src/components/media_dialog/document_selector.xml
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+<t t-name="web_editor.DocumentAttachment" owl="1">
+    <div class="col-2 o_existing_attachment_cell o_we_attachment_highlight my-2" t-att-class="{ o_we_attachment_selected: props.selected }" t-on-click="props.selectAttachment">
+        <RemoveButton remove="() => this.remove()"/>
+        <div t-att-data-url="props.url" role="img" t-att-aria-label="props.name" t-att-title="props.name" t-att-data-mimetype="props.mimetype" class="o_image d-flex align-items-center justify-content-center"/>
+        <small class="o_file_name" t-esc="props.name"/>
+    </div>
+</t>
+
+<t t-name="web_editor.DocumentsListTemplate" owl="1">
+    <div class="o_we_existing_attachments o_we_documents">
+        <div t-if="!hasContent" class="o_nocontent_help">
+            <p class="o_empty_folder_image">No documents found.</p>
+            <p class="o_empty_folder_subtitle">You can upload documents with the button located in the top left of the screen.</p>
+        </div>
+        <div t-else="" class="row mx-auto">
+            <t t-foreach="state.attachments" t-as="attachment" t-key="attachment.id">
+                <DocumentAttachment url="attachment.url"
+                    name="attachment.name"
+                    mimetype="attachment.mimetype"
+                    id="attachment.id"
+                    onRemoved="(attachmentId) => this.onRemoved(attachmentId)"
+                    selected="this.selectedAttachmentIds.includes(attachment.id)"
+                    selectAttachment="() => this.onClickDocument(attachment)"/>
+            </t>
+        </div>
+    </div>
+</t>
+</templates>
diff --git a/addons/web_editor/static/src/components/media_dialog/file_selector.js b/addons/web_editor/static/src/components/media_dialog/file_selector.js
index fd6470098ea..d2621e7ce2b 100644
--- a/addons/web_editor/static/src/components/media_dialog/file_selector.js
+++ b/addons/web_editor/static/src/components/media_dialog/file_selector.js
@@ -1,1522 +1,248 @@
-odoo.define('wysiwyg.widgets.media', function (require) {
-'use strict';
+/** @odoo-module */
 
-var concurrency = require('web.concurrency');
-var core = require('web.core');
-var Dialog = require('web.Dialog');
-var dom = require('web.dom');
-var fonts = require('wysiwyg.fonts');
-var utils = require('web.utils');
-var Widget = require('web.Widget');
-var session = require('web.session');
-const {removeOnImageChangeAttrs} = require('web_editor.image_processing');
-const {getCSSVariableValue, DEFAULT_PALETTE} = require('web_editor.utils');
-const { UploadProgressToast } = require('@web_editor/components/upload_progress_toast/upload_progress_toast');
+import { useService } from '@web/core/utils/hooks';
+import { ConfirmationDialog } from '@web/core/confirmation_dialog/confirmation_dialog';
+import { Dialog } from '@web/core/dialog/dialog';
+import { SearchMedia } from './search_media';
 
-var QWeb = core.qweb;
-var _t = core._t;
+const { Component, xml, useState, useRef, onWillStart } = owl;
 
-var MediaWidget = Widget.extend({
-    xmlDependencies: ['/web_editor/static/src/xml/wysiwyg.xml'],
+export const IMAGE_MIMETYPES = ['image/jpg', 'image/jpeg', 'image/jpe', 'image/png', 'image/svg+xml', 'image/gif'];
+export const IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.jpe', '.png', '.svg', '.gif'];
 
-    /**
-     * @constructor
-     * @param {Element} media: the target Element for which we select a media
-     * @param {Object} options: useful parameters such as res_id, res_model,
-     *  context, user_id, ...
-     */
-    init: function (parent, media, options) {
-        this._super.apply(this, arguments);
-        this.media = media;
-        this.$media = $(media);
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @todo comment
-     */
-    clear: function () {
-        if (!this.media) {
-            return;
+class RemoveButton extends Component {
+    setup() {
+        this.removeTitle = this.env._t("This file is attached to the current record.");
+        if (this.props.model === 'ir.ui.view') {
+            this.removeTitle = this.env._t("This file is a public view attachment.");
         }
-        this._clear();
-    },
-    /**
-     * Saves the currently configured media on the target media.
-     *
-     * @abstract
-     * @returns {Promise}
-     */
-    save: function () {},
+    }
 
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @abstract
-     */
-    _clear: function () {},
-});
-
-var SearchableMediaWidget = MediaWidget.extend({
-    events: _.extend({}, MediaWidget.prototype.events || {}, {
-        'keydown .o_we_search': '_onSearchKeydown',
-        'input .o_we_search': '_onSearchInput',
-    }),
-
-    /**
-     * @constructor
-     */
-    init: function () {
-        this._super.apply(this, arguments);
-        this._onSearchInput = _.debounce(this._onSearchInput, 500);
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Finds and displays existing attachments related to the target media.
-     *
-     * @abstract
-     * @param {string} needle: only return attachments matching this parameter
-     * @returns {Promise}
-     */
-    search: function (needle) {},
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Renders thumbnails for the attachments.
-     *
-     * @abstract
-     * @returns {Promise}
-     */
-    _renderThumbnails: function () {},
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    _onSearchKeydown: function (ev) {
-        // If the template contains a form that has only one input, the enter
-        // will reload the page as the html 2.0 specify this behavior.
-        if (ev.originalEvent && (ev.originalEvent.code === "Enter" || ev.originalEvent.key === "Enter")) {
-            ev.preventDefault();
-        }
-    },
-    /**
-     * @private
-     */
-    _onSearchInput: async function (ev) {
-        this.attachments = [];
-        // Disable user interactions with attachments while updating results.
-        this.$('.o_we_existing_attachments').css('pointer-events', 'none');
-        await this.search($(ev.currentTarget).val() || '');
-        await this._renderThumbnails();
-        // Re-enable user interactions with attachments after updating results.
-        this.$('.o_we_existing_attachments').css('pointer-events', '');
-    },
-});
-
-/**
- * Let users choose a file, including uploading a new file in odoo.
- */
-var FileWidget = SearchableMediaWidget.extend({
-    events: _.extend({}, SearchableMediaWidget.prototype.events || {}, {
-        'click .o_upload_media_button': '_onUploadButtonClick',
-        'change .o_file_input': '_onFileInputChange',
-        'click .o_upload_media_url_button': '_onUploadURLButtonClick',
-        'input .o_we_url_input': '_onURLInputChange',
-        'click .o_existing_attachment_cell': '_onAttachmentClick',
-        'click .o_existing_attachment_remove': '_onRemoveClick',
-        'click .o_load_more': '_onLoadMoreClick',
-    }),
-    existingAttachmentsTemplate: undefined,
-
-    IMAGE_MIMETYPES: ['image/jpg', 'image/jpeg', 'image/jpe', 'image/png', 'image/svg+xml', 'image/gif'],
-    IMAGE_EXTENSIONS: ['.jpg', '.jpeg', '.jpe', '.png', '.svg', '.gif'],
-    NUMBER_OF_ATTACHMENTS_TO_DISPLAY: 30,
-    MAX_DB_ATTACHMENTS: 5,
-
-    /**
-     * @constructor
-     */
-    init: function (parent, media, options) {
-        this._super.apply(this, arguments);
-        this._mutex = new concurrency.Mutex();
-
-        this.numberOfAttachmentsToDisplay = this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY;
-
-        this.options = _.extend({
-            mediaWidth: media && media.parentElement && $(media.parentElement).width(),
-            useMediaLibrary: true,
-        }, options || {});
-
-        this.attachments = [];
-        this.selectedAttachments = [];
-        this.libraryMedia = [];
-        this.selectedMedia = [];
-
-        this._onUploadURLButtonClick = dom.makeAsyncHandler(this._onUploadURLButtonClick);
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        var def = this._super.apply(this, arguments);
-        var self = this;
-        this.$urlInput = this.$('.o_we_url_input');
-        this.$form = this.$('form');
-        this.$fileInput = this.$('.o_file_input');
-        this.$uploadButton = this.$('.o_upload_media_button');
-        this.$addUrlButton = this.$('.o_upload_media_url_button');
-        this.$urlSuccess = this.$('.o_we_url_success');
-        this.$urlWarning = this.$('.o_we_url_warning');
-        this.$urlError = this.$('.o_we_url_error');
-        this.$errorText = this.$('.o_we_error_text');
-
-        // If there is already an attachment on the target, select by default
-        // that attachment if it is among the loaded images.
-        var o = {
-            url: null,
-            alt: null,
-        };
-        if (this.$media.is('img')) {
-            o.url = this.$media.attr('src');
-        } else if (this.$media.is('a.o_image')) {
-            o.url = this.$media.attr('href').replace(/[?].*/, '');
-            o.id = +o.url.match(/\/web\/content\/(\d+)/, '')[1];
-        }
-
-        return this.search('').then(async () => {
-            await this._renderThumbnails();
-            if (o.url) {
-                self._selectAttachement(_.find(self.attachments, function (attachment) {
-                    return o.url === attachment.image_src;
-                }) || o);
-            }
-            return def;
-        });
-    },
-    /**
-     * @override
-     */
-    destroy() {
-        if (this.uploader) {
-            // Prevent uploader from being destroyed with call to super so it can linger
-            this.uploader.setParent(null);
-            this.uploader.close(2000);
-        }
-        this._super(...arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Saves the currently selected image on the target media. If new files are
-     * currently being added, delays the save until all files have been added.
-     *
-     * @override
-     */
-    save: function () {
-        return this._mutex.exec(this._save.bind(this));
-    },
-    /**
-     * @override
-     */
-    search: function (needle) {
-        this.needle = needle;
-        return this.fetchAttachments(this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY, 0);
-    },
-    /**
-     * @param {Number} number - the number of attachments to fetch
-     * @param {Number} offset - from which result to start fetching
-     */
-    fetchAttachments: function (number, offset) {
-        return this._rpc({
-            model: 'ir.attachment',
-            method: 'search_read',
-            args: [],
-            kwargs: {
-                domain: this._getAttachmentsDomain(this.needle),
-                fields: ['name', 'mimetype', 'description', 'checksum', 'url', 'type', 'res_id', 'res_model', 'public', 'access_token', 'image_src', 'image_width', 'image_height', 'original_id'],
-                order: [{name: 'id', asc: false}],
-                context: this.options.context,
-                // Try to fetch first record of next page just to know whether there is a next page.
-                limit: number + 1,
-                offset: offset,
-            },
-        }).then(attachments => {
-            this.attachments = this.attachments.slice();
-            Array.prototype.splice.apply(this.attachments, [offset, attachments.length].concat(attachments));
-        });
-    },
-    /**
-     * Computes whether there is content to display in the template.
-     */
-    hasContent() {
-        return this.attachments.length;
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _clear: function () {
-        this.media.className = this.media.className && this.media.className.replace(/(^|\s+)(o_image)(?=\s|$)/g, ' ');
-    },
-    /**
-     * Returns the domain for attachments used in media dialog.
-     * We look for attachments related to the current document. If there is a value for the model
-     * field, it is used to search attachments, and the attachments from the current document are
-     * filtered to display only user-created documents.
-     * In the case of a wizard such as mail, we have the documents uploaded and those of the model
-     *
-     * @private
-     * @params {string} needle
-     * @returns {Array} "ir.attachment" odoo domain.
-     */
-    _getAttachmentsDomain: function (needle) {
-        var domain = this.options.attachmentIDs && this.options.attachmentIDs.length ? ['|', ['id', 'in', this.options.attachmentIDs]] : [];
-
-        var attachedDocumentDomain = [
-            '&',
-            ['res_model', '=', this.options.res_model],
-            ['res_id', '=', this.options.res_id|0]
-        ];
-        // if the document is not yet created, do not see the documents of other users
-        if (!this.options.res_id) {
-            attachedDocumentDomain.unshift('&');
-            attachedDocumentDomain.push(['create_uid', '=', this.options.user_id]);
-        }
-        if (this.options.data_res_model) {
-            var relatedDomain = ['&',
-                ['res_model', '=', this.options.data_res_model],
-                ['res_id', '=', this.options.data_res_id|0]];
-            if (!this.options.data_res_id) {
-                relatedDomain.unshift('&');
-                relatedDomain.push(['create_uid', '=', session.uid]);
-            }
-            domain = domain.concat(['|'], attachedDocumentDomain, relatedDomain);
-        } else {
-            domain = domain.concat(attachedDocumentDomain);
-        }
-        domain = ['|', ['public', '=', true]].concat(domain);
-        domain = domain.concat(this.options.mimetypeDomain);
-        if (needle && needle.length) {
-            domain.push(['name', 'ilike', needle]);
-        }
-        if (!this.options.useMediaLibrary) {
-            domain.push('|', ['url', '=', false], '!', ['url', '=ilike', '/web_editor/shape/%']);
-        }
-        domain.push('!', ['name', '=like', '%.crop']);
-        domain.push('|', ['type', '=', 'binary'], '!', ['url', '=like', '/%/static/%']);
-        return domain;
-    },
-    /**
-     * @private
-     */
-    _highlightSelected: function () {
-        var self = this;
-        this.$('.o_existing_attachment_cell.o_we_attachment_selected').removeClass("o_we_attachment_selected");
-        _.each(this.selectedAttachments, function (attachment) {
-            self.$('.o_existing_attachment_cell[data-id=' + attachment.id + ']')
-                .addClass("o_we_attachment_selected").css('display', '');
-        });
-    },
-    /**
-     * @private
-     * @param {object} attachment
-     */
-    _handleNewAttachment: function (attachment) {
-        this.attachments = this.attachments.filter(att => att.id !== attachment.id);
-        this.attachments.unshift(attachment);
-        this._renderThumbnails();
-        this._selectAttachement(attachment);
-    },
-    /**
-     * @private
-     * @returns {Promise}
-     */
-    _loadMoreImages: function (forceSearch) {
-        return this.fetchAttachments(10, this.numberOfAttachmentsToDisplay).then(() => {
-            this.numberOfAttachmentsToDisplay += 10;
-            if (!forceSearch) {
-                this._renderThumbnails();
-                return Promise.resolve();
-            } else {
-                return this.search(this.$('.o_we_search').val() || '');
-            }
-        });
-    },
-    /**
-     * Renders the existing attachments and returns the result as a string.
-     *
-     * @param {Object[]} attachments
-     * @returns {string}
-     */
-    _renderExisting: function (attachments) {
-        return QWeb.render(this.existingAttachmentsTemplate, {
-            attachments: attachments,
-            widget: this,
-        });
-    },
-    /**
-     * @private
-     */
-    _renderThumbnails: function () {
-        var attachments = this.attachments.slice(0, this.numberOfAttachmentsToDisplay);
-
-        // Render menu & content
-        this.$('.o_we_existing_attachments').replaceWith(
-            this._renderExisting(attachments)
-        );
-
-        this._highlightSelected();
-
-        // adapt load more
-        this.$('.o_we_load_more').toggleClass('d-none', !this.hasContent());
-        var noLoadMoreButton = this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY >= this.attachments.length;
-        var noMoreImgToLoad = this.numberOfAttachmentsToDisplay >= this.attachments.length;
-        this.$('.o_load_done_msg').toggleClass('d-none', noLoadMoreButton || !noMoreImgToLoad);
-        this.$('.o_load_more').toggleClass('d-none', noMoreImgToLoad);
-    },
-    /**
-     * @private
-     * @returns {Promise}
-     */
-    _save: async function () {
-        // Create all media-library attachments.
-        const toSave = Object.fromEntries(this.selectedMedia.map(media => [
-            media.id, {
-                query: media.query || '',
-                is_dynamic_svg: !!media.isDynamicSVG,
-                dynamic_colors: media.dynamicColors,
-            }
-        ]));
-        let mediaAttachments = [];
-        if (Object.keys(toSave).length !== 0) {
-            mediaAttachments = await this._rpc({
-                route: '/web_editor/save_library_media',
-                params: {
-                    media: toSave,
-                },
-            });
-        }
-        const selected = this.selectedAttachments.concat(mediaAttachments).map(attachment => {
-            // Color-customize dynamic SVGs with the theme colors
-            if (attachment.image_src && attachment.image_src.startsWith('/web_editor/shape/')) {
-                const colorCustomizedURL = new URL(attachment.image_src, window.location.origin);
-                colorCustomizedURL.searchParams.forEach((value, key) => {
-                    const match = key.match(/^c([1-5])$/);
-                    if (match) {
-                        colorCustomizedURL.searchParams.set(key, getCSSVariableValue(`o-color-${match[1]}`))
-                    }
-                })
-                attachment.image_src = colorCustomizedURL.pathname + colorCustomizedURL.search;
-            }
-            return attachment;
-        });
-        if (this.options.multiImages) {
-            return selected;
-        }
-
-        const img = selected[0];
-        if (!img || !img.id || this.$media.attr('src') === img.image_src) {
-            return this.media;
-        }
-
-        if (!img.public && !img.access_token) {
-            await this._rpc({
-                model: 'ir.attachment',
-                method: 'generate_access_token',
-                args: [[img.id]]
-            }).then(function (access_token) {
-                img.access_token = access_token[0];
-            });
-        }
-        return this._renderMedia(img);
-    },
-    /**
-     * @param {Object} img
-     * @returns
-     */
-    _renderMedia: function (img) {
-        if (img.image_src) {
-            var src = img.image_src;
-            if (!img.public && img.access_token) {
-                src += _.str.sprintf('?access_token=%s', img.access_token);
-            }
-            if (!this.$media.is('img')) {
-
-                // Note: by default the images receive the bootstrap opt-in
-                // img-fluid class. We cannot make them all responsive
-                // by design because of libraries and client databases img.
-                this.$media = $('<img/>', {class: 'img-fluid o_we_custom_image'});
-                this.media = this.$media[0];
-            }
-            this.$media.attr('src', src);
-        } else {
-            if (!this.$media.is('a')) {
-                $('.note-control-selection').hide();
-                this.$media = $('<a/>');
-                this.media = this.$media[0];
-            }
-            var href = '/web/content/' + img.id + '?';
-            if (!img.public && img.access_token) {
-                href += _.str.sprintf('access_token=%s&', img.access_token);
-            }
-            href += 'unique=' + img.checksum + '&download=true';
-            this.$media.attr('href', href);
-            this.$media.addClass('o_image').attr('title', img.name);
-        }
-
-        this.$media.attr('alt', img.alt || img.description || '');
-        var style = this.style;
-        if (style) {
-            this.$media.css(style);
-        }
-
-        // Remove image modification attributes
-        removeOnImageChangeAttrs.forEach(attr => {
-            delete this.media.dataset[attr];
-        });
-        // Add mimetype for documents
-        if (!img.image_src) {
-            this.media.dataset.mimetype = img.mimetype;
-        }
-        this.media.classList.remove('o_modified_image_to_save');
-        this.$media.trigger('image_changed');
-        return this.media;
-    },
-    /**
-     * @param {object} attachment
-     * @param {boolean} [save=true] to save the given attachment in the DOM and
-     *  and to close the media dialog
-     * @private
-     */
-    _selectAttachement: function (attachment, save, {type = 'attachment'} = {}) {
-        const possibleProps = {
-            'attachment': 'selectedAttachments',
-            'media': 'selectedMedia'
-        };
-        const prop = possibleProps[type];
-        if (this.options.multiImages) {
-            // if the clicked attachment is already selected then unselect it
-            // unless it was a save request (then keep the current selection)
-            const index = this[prop].indexOf(attachment);
-            if (index !== -1) {
-                if (!save) {
-                    this[prop].splice(index, 1);
-                }
-            } else {
-                // if the clicked attachment is not selected, add it to selected
-                this[prop].push(attachment);
-            }
-        } else {
-            Object.values(possibleProps).forEach(prop => {
-                this[prop] = [];
-            });
-            // select the clicked attachment
-            this[prop] = [attachment];
-        }
-        this._highlightSelected();
-        if (save) {
-            this.trigger_up('save_request');
-        }
-    },
-    /**
-     * Updates the add by URL UI.
-     *
-     * @private
-     * @param {boolean} emptyValue
-     * @param {boolean} isURL
-     * @param {boolean} isImage
-     */
-    _updateAddUrlUi: function (emptyValue, isURL, isImage) {
-        this.$addUrlButton.toggleClass('btn-secondary', emptyValue)
-            .toggleClass('btn-primary', !emptyValue)
-            .prop('disabled', !isURL);
-        this.$urlSuccess.toggleClass('d-none', !isURL);
-        this.$urlError.toggleClass('d-none', emptyValue || isURL);
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    _onAttachmentClick: function (ev) {
-        const attachment = ev.currentTarget;
-        const {id: attachmentID, mediaId} = attachment.dataset;
-        if (attachmentID) {
-            const attachment = this.attachments.find(attachment => attachment.id === parseInt(attachmentID));
-            this._selectAttachement(attachment, !this.options.multiImages);
-        } else if (mediaId) {
-            const media = this.libraryMedia.find(media => media.id === parseInt(mediaId));
-            this._selectAttachement(media, !this.options.multiImages, {type: 'media'});
-        }
-    },
-    /**
-     * Handles change of the file input: create attachments with the new files
-     * and open the Preview dialog for each of them. Locks the save button until
-     * all new files have been processed.
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _onFileInputChange: function () {
-        return this._mutex.exec(this._addData.bind(this));
-    },
-    /**
-     * Uploads the files that are currently selected on the file input, which
-     * creates new attachments. Then inserts them on the media dialog and
-     * selects them. If multiImages is not set, also triggers up the
-     * save_request event to insert the attachment in the DOM.
-     *
-     * @private
-     * @returns {Promise}
-     */
-    async _addData() {
-        let files = this.$fileInput[0].files;
-        if (!files.length) {
-            // Case if the input is emptied, return resolved promise
-            return;
-        }
-
-        const uploadMutex = new concurrency.Mutex();
-
-        // Upload the smallest file first to block the user the least possible.
-        files = _.sortBy(files, 'size');
-        await this._setUpProgressToast(files);
-        _.each(files, (file, index) => {
-            // Upload one file at a time: no need to parallel as upload is
-            // limited by bandwidth.
-            uploadMutex.exec(async () => {
-                const dataURL = await utils.getDataURLFromFile(file);
-                const attachment = await this.uploader.rpcShowProgress({
-                    route: '/web_editor/attachment/add_data',
-                    params: {
-                        'name': file.name,
-                        'data': dataURL.split(',')[1],
-                        'res_id': this.options.res_id,
-                        'res_model': this.options.res_model,
-                        'is_image': this.widgetType === 'image',
-                        'width': 0,
-                        'quality': 0,
-                    }
-                }, index);
-                if (!attachment.error) {
-                    this._handleNewAttachment(attachment);
-                }
-            });
-        });
-
-        return uploadMutex.getUnlockedDef().then(() => {
-            if (!this.uploader.hasError) {
-                this.uploader.close(3000);
-            }
-            if (!this.options.multiImages && !this.noSave) {
-                this.trigger_up('save_request');
-            }
-            this.noSave = false;
-        });
-    },
-    /**
-     * @private
-     */
-    _onRemoveClick: function (ev) {
-        var self = this;
+    remove(ev) {
         ev.stopPropagation();
-        Dialog.confirm(this, _t("Are you sure you want to delete this file ?"), {
-            confirm_callback: function () {
-                var $a = $(ev.currentTarget).closest('.o_existing_attachment_cell');
-                var id = parseInt($a.data('id'), 10);
-                var attachment = _.findWhere(self.attachments, {id: id});
-                 return self._rpc({
-                    route: '/web_editor/attachment/remove',
-                    params: {
-                        ids: [id],
-                    },
-                }).then(function (prevented) {
-                    if (_.isEmpty(prevented)) {
-                        self.attachments = _.without(self.attachments, attachment);
-                        self.attachments.filter(at => at.original_id[0] === attachment.id).forEach(at => delete at.original_id);
-                        if (!self.attachments.length) {
-                            self._renderThumbnails(); //render the message and image if empty
-                        } else {
-                            $a.closest('.o_existing_attachment_cell').remove();
-                        }
-                        return;
-                    }
-                    self.$errorText.replaceWith(QWeb.render('wysiwyg.widgets.image.existing.error', {
-                        views: prevented[id],
-                        widget: self,
-                    }));
+        this.props.remove();
+    }
+}
+RemoveButton.template = xml`<i class="fa fa-trash o_existing_attachment_remove p-2" t-att-title="removeTitle" role="img" t-att-aria-label="removeTitle" t-on-click="this.remove"/>`;
+
+export class AttachmentError extends Dialog {
+    setup() {
+        super.setup();
+        this.title = this.env._t("Alert");
+    }
+}
+AttachmentError.bodyTemplate = xml `
+<div class="form-text">
+    <p>The image could not be deleted because it is used in the
+        following pages or views:</p>
+    <ul t-foreach="props.views"  t-as="view" t-key="view.id">
+        <li>
+            <a t-att-href="'/web#model=ir.ui.view&amp;id=' + view.id">
+                <t t-esc="view.name"/>
+            </a>
+        </li>
+    </ul>
+</div>`;
+AttachmentError.footerTemplate = xml`
+<button class="btn btn-primary" t-on-click="() => this.close()">
+    Ok
+</button>`;
+
+export class Attachment extends Component {
+    setup() {
+        this.dialogs = useService('dialog');
+        this.rpc = useService('rpc');
+    }
+
+    remove() {
+        this.dialogs.add(ConfirmationDialog, {
+            body: this.env._t("Are you sure you want to delete this file ?"),
+            confirm: async () => {
+                const prevented = await this.rpc('/web_editor/attachment/remove', {
+                    ids: [this.props.id],
                 });
-            }
-        });
-    },
-    /**
-     * @private
-     */
-    _onURLInputChange: function () {
-        const inputValue = this.$urlInput.val().split('?')[0];
-        var emptyValue = (inputValue === '');
-
-        var isURL = /^.+\..+$/.test(inputValue); // TODO improve
-        var isImage = _.any(this.IMAGE_EXTENSIONS, function (format) {
-            return inputValue.endsWith(format);
-        });
-
-        this._updateAddUrlUi(emptyValue, isURL, isImage);
-    },
-    /**
-     * @private
-     */
-    _onUploadButtonClick: function () {
-        this.$fileInput.click();
-    },
-    /**
-     * @private
-     */
-    _onUploadURLButtonClick: function () {
-        if (this.$urlInput.is('.o_we_horizontal_collapse')) {
-            this.$urlInput.removeClass('o_we_horizontal_collapse');
-            this.$addUrlButton.attr('disabled', 'disabled');
-            return;
-        }
-        return this._mutex.exec(this._addUrl.bind(this));
-    },
-    /**
-     * @private
-     * @returns {Promise}
-     */
-    _addUrl: function () {
-        var self = this;
-        return this._rpc({
-            route: '/web_editor/attachment/add_url',
-            params: {
-                'url': this.$urlInput.val(),
-                'res_id': this.options.res_id,
-                'res_model': this.options.res_model,
-            },
-        }).then(function (attachment) {
-            self.$urlInput.val('');
-            self._onURLInputChange();
-            self._handleNewAttachment(attachment);
-            if (!self.options.multiImages) {
-                self.trigger_up('save_request');
-            }
-        });
-    },
-    /**
-     * @private
-     */
-    _onLoadMoreClick: function () {
-        this._loadMoreImages();
-    },
-    /**
-     * @override
-     */
-    _onSearchInput: function () {
-        this.attachments = [];
-        this.numberOfAttachmentsToDisplay = this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY;
-        this._super.apply(this, arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Sets up a progress bar for every file being uploaded in a toast.
-     *
-     * @private
-     * @param {Object[]} files
-     */
-    _setUpProgressToast: async function (files) {
-        this.uploader = new UploadProgressToast(this, files);
-        await this.uploader.appendTo(document.body);
-    },
-});
-
-/**
- * Let users choose an image, including uploading a new image in odoo.
- */
-var ImageWidget = FileWidget.extend({
-    template: 'wysiwyg.widgets.image',
-    existingAttachmentsTemplate: 'wysiwyg.widgets.image.existing.attachments',
-    events: Object.assign({}, FileWidget.prototype.events, {
-        'change input.o_we_show_optimized': '_onShowOptimizedChange',
-        'change .o_we_search_select': '_onSearchSelect',
-    }),
-    MIN_ROW_HEIGHT: 128,
-
-    /**
-     * @constructor
-     */
-    init: function (parent, media, options) {
-        this.searchService = 'all';
-        this.widgetType = 'image';
-        options = _.extend({
-            accept: 'image/*',
-            mimetypeDomain: [['mimetype', 'in', this.IMAGE_MIMETYPES]],
-        }, options || {});
-        // Binding so we can add/remove it as an addEventListener
-        this._onAttachmentImageLoad = this._onAttachmentImageLoad.bind(this);
-        this._super(parent, media, options);
-    },
-    /**
-     * @override
-     */
-    start: async function () {
-        await this._super(...arguments);
-        this.el.addEventListener('load', this._onAttachmentImageLoad, true);
-    },
-    /**
-     * @override
-     */
-    destroy: function () {
-        this.el.removeEventListener('load', this._onAttachmentImageLoad, true);
-        return this._super(...arguments);
-    },
-    /**
-     * @override
-     */
-    async fetchAttachments(number, offset) {
-        if (this.needle && this.searchService !== 'database') {
-            number = this.MAX_DB_ATTACHMENTS;
-            offset = 0;
-        }
-        const result = await this._super(number, offset);
-        // Color-substitution for dynamic SVG attachment
-        const primaryColors = {};
-        for (let color = 1; color <= 5; color++) {
-            primaryColors[color] = getCSSVariableValue('o-color-' + color);
-        }
-        this.attachments.forEach(attachment => {
-            if (attachment.image_src.startsWith('/')) {
-                const newURL = new URL(attachment.image_src, window.location.origin);
-                // Set the main colors of dynamic SVGs to o-color-1~5
-                if (attachment.image_src.startsWith('/web_editor/shape/')) {
-                    newURL.searchParams.forEach((value, key) => {
-                        const match = key.match(/^c([1-5])$/);
-                        if (match) {
-                            newURL.searchParams.set(key, primaryColors[match[1]]);
-                        }
-                    })
+                if (!Object.keys(prevented).length) {
+                    this.props.onRemoved(this.props.id);
                 } else {
-                    // Set height so that db images load faster
-                    newURL.searchParams.set('height', 2 * this.MIN_ROW_HEIGHT);
-                }
-                attachment.thumbnail_src = newURL.pathname + newURL.search;
-            }
-        });
-        if (this.needle && this.options.useMediaLibrary) {
-            try {
-                const response = await this._rpc({
-                    route: '/web_editor/media_library_search',
-                    params: {
-                        'query': this.needle,
-                        'offset': this.libraryMedia.length,
-                    },
-                });
-                const newMedia = response.media;
-                this.nbMediaResults = response.results;
-                this.libraryMedia.push(...newMedia);
-            } catch (_e) {
-                // Either API endpoint doesn't exist or is misconfigured.
-                console.error(`Couldn't reach API endpoint.`);
-            }
-        }
-        return result;
-    },
-    /**
-     * @override
-     */
-    hasContent() {
-        if (this.searchService === 'all') {
-            return this._super(...arguments) || this.libraryMedia.length;
-        } else if (this.searchService === 'media-library') {
-            return !!this.libraryMedia.length;
-        }
-        return this._super(...arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _updateAddUrlUi: function (emptyValue, isURL, isImage) {
-        this._super.apply(this, arguments);
-        const warning = isURL && !isImage;
-        this.$urlWarning.toggleClass('d-none', !warning);
-        this.$addUrlButton.prop('disabled', warning || !isURL);
-        this.$urlSuccess.toggleClass('d-none', warning || !isURL);
-    },
-    /**
-     * @override
-     */
-    _renderThumbnails: function () {
-        const alreadyLoaded = this.$('.o_existing_attachment_cell[data-loaded="true"]');
-        this._super(...arguments);
-        // Hide images until they're loaded
-        this.$('.o_existing_attachment_cell').addClass('d-none');
-        // Replace images that had been previously loaded if any to prevent scroll resetting to top
-        alreadyLoaded.each((index, el) => {
-            const toReplace = this.$(`.o_existing_attachment_cell[data-id="${el.dataset.id}"], .o_existing_attachment_cell[data-media-id="${el.dataset.mediaId}"]`);
-            if (toReplace.length) {
-                toReplace.replaceWith(el);
-            }
-        });
-        this._toggleOptimized(this.$('input.o_we_show_optimized')[0].checked);
-        // Placeholders have a 3:2 aspect ratio like most photos.
-        const placeholderWidth = 3 / 2 * this.MIN_ROW_HEIGHT;
-        this.$('.o_we_attachment_placeholder').css({
-            flexGrow: placeholderWidth,
-            flexBasis: placeholderWidth,
-        });
-        if (this.needle && ['media-library', 'all'].includes(this.searchService)) {
-            const noMoreImgToLoad = this.libraryMedia.length === this.nbMediaResults;
-            const noLoadMoreButton = noMoreImgToLoad && this.libraryMedia.length <= 15;
-            this.$('.o_load_done_msg').toggleClass('d-none', noLoadMoreButton || !noMoreImgToLoad);
-            this.$('.o_load_more').toggleClass('d-none', noMoreImgToLoad);
-        }
-    },
-    /**
-     * @override
-     */
-    _renderExisting: function (attachments) {
-        if (this.needle && this.searchService !== 'database') {
-            attachments = attachments.slice(0, this.MAX_DB_ATTACHMENTS);
-        }
-        return QWeb.render(this.existingAttachmentsTemplate, {
-            attachments: attachments,
-            libraryMedia: this.libraryMedia,
-            widget: this,
-        });
-    },
-    /**
-     * @private
-     *
-     * @param {boolean} value whether to toggle optimized attachments on or off
-     */
-    _toggleOptimized: function (value) {
-        this.$('.o_we_attachment_optimized').each((i, cell) => cell.style.setProperty('display', value ? null : 'none', 'important'));
-    },
-    /**
-     * @override
-     */
-    _highlightSelected: function () {
-        this._super(...arguments);
-        this.selectedMedia.forEach(media => {
-            this.$(`.o_existing_attachment_cell[data-media-id=${media.id}]`)
-                .addClass("o_we_attachment_selected");
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _onAttachmentImageLoad: async function (ev) {
-        const img = ev.target;
-        const cell = img.closest('.o_existing_attachment_cell');
-        if (!cell) {
-            return;
-        }
-        if (cell.dataset.mediaId && !img.src.startsWith('blob')) {
-            const mediaUrl = img.src;
-            try {
-                const response = await fetch(mediaUrl);
-                if (response.headers.get('content-type') === 'image/svg+xml') {
-                    let svg = await response.text();
-                    const fileName = mediaUrl.split('/').pop();
-                    const dynamicColors = {};
-                    const combinedColorsRegex = new RegExp(Object.values(DEFAULT_PALETTE).join('|'), 'gi');
-                    svg = svg.replace(combinedColorsRegex, match => {
-                        const colorId = Object.keys(DEFAULT_PALETTE).find(key => DEFAULT_PALETTE[key] === match.toUpperCase());
-                        const colorKey = 'c' + colorId
-                        dynamicColors[colorKey] = getCSSVariableValue('o-color-' + colorId);
-                        return dynamicColors[colorKey];
-                    });
-                    if (Object.keys(dynamicColors).length) {
-                        const file = new File([svg], fileName, {
-                            type: "image/svg+xml",
-                        });
-                        img.src = URL.createObjectURL(file);
-                        const media = this.libraryMedia.find(media => media.id === parseInt(cell.dataset.mediaId));
-                        if (media) {
-                            media.isDynamicSVG = true;
-                            media.dynamicColors = dynamicColors;
-                        }
-                        // We changed the src: wait for the next load event to do the styling
-                        return;
-                    }
-                }
-            } catch (_e) {
-                console.error('CORS is misconfigured on the API server, image will be treated as non-dynamic.');
-            }
-        }
-        let aspectRatio = img.naturalWidth / img.naturalHeight;
-        // Special case for SVGs with no instrinsic sizes on firefox
-        // See https://github.com/whatwg/html/issues/3510#issuecomment-369982529
-        if (img.naturalHeight === 0) {
-            img.width = 1000;
-            // Position fixed so that the image doesn't affect layout while rendering
-            img.style.position = 'fixed';
-            // Make invisible so the image doesn't briefly appear on the screen
-            img.style.opacity = '0';
-            // Image needs to be in the DOM for dimensions to be correct after render
-            const originalParent = img.parentElement;
-            document.body.appendChild(img);
-
-            aspectRatio = img.width / img.height;
-            originalParent.appendChild(img);
-            img.removeAttribute('width');
-            img.style.removeProperty('position');
-            img.style.removeProperty('opacity');
-        }
-        const width = aspectRatio * this.MIN_ROW_HEIGHT;
-        cell.style.flexGrow = width;
-        cell.style.flexBasis = `${width}px`;
-        cell.classList.remove('d-none');
-        cell.classList.add('d-flex');
-        cell.dataset.loaded = 'true';
-    },
-    /**
-     * @override
-     */
-    _onShowOptimizedChange: function (ev) {
-        this._toggleOptimized(ev.target.checked);
-    },
-    /**
-     * @override
-     */
-    _onSearchSelect: function (ev) {
-        const {value} = ev.target;
-        this.searchService = value;
-        this.$('.o_we_search').trigger('input');
-    },
-    /**
-     * @private
-     */
-    _onSearchInput: function (ev) {
-        this.libraryMedia = [];
-        this._super(...arguments);
-        this.$('.o_we_search_select').removeClass('d-none');
-    },
-    /**
-     * @override
-     */
-    _clear: function (type) {
-        // Not calling _super: we don't want to call the document widget's _clear method on images
-        var allImgClasses = /(^|\s+)(img|img-\S*|o_we_custom_image|rounded-circle|rounded|thumbnail|shadow)(?=\s|$)/g;
-        this.media.className = this.media.className && this.media.className.replace(allImgClasses, ' ');
-    },
-});
-
-
-/**
- * Let users choose a document, including uploading a new document in odoo.
- */
-var DocumentWidget = FileWidget.extend({
-    template: 'wysiwyg.widgets.document',
-    existingAttachmentsTemplate: 'wysiwyg.widgets.document.existing.attachments',
-
-    /**
-     * @constructor
-     */
-    init: function (parent, media, options) {
-        options = _.extend({
-            accept: '*/*',
-            mimetypeDomain: [['mimetype', 'not in', this.IMAGE_MIMETYPES]],
-        }, options || {});
-        this._super(parent, media, options);
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _getAttachmentsDomain: function (needle) {
-        var domain = this._super.apply(this, arguments);
-        // The assets should not be part of the documents.
-        // All assets begin with '/web/assets/', see _get_asset_template_url().
-        return ['&', '|', ['url', '=', null], '!', ['url', '=like', '/web/assets/%']].concat(domain);
-    },
-});
-
-/**
- * Let users choose a font awesome icon, support all font awesome loaded in the
- * css files.
- */
-var IconWidget = SearchableMediaWidget.extend({
-    template: 'wysiwyg.widgets.font-icons',
-    events: _.extend({}, SearchableMediaWidget.prototype.events || {}, {
-        'click .font-icons-icon': '_onIconClick',
-    }),
-
-    /**
-     * @constructor
-     */
-    init: function (parent, media) {
-        this._super.apply(this, arguments);
-
-        fonts.computeFonts();
-        this.iconsParser = fonts.fontIcons;
-        this.alias = _.flatten(_.map(this.iconsParser, function (data) {
-            return data.alias;
-        }));
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        this.$icons = this.$('.font-icons-icon');
-        var classes = (this.media && this.media.className || '').split(/\s+/);
-        for (var i = 0; i < classes.length; i++) {
-            var cls = classes[i];
-            if (_.contains(this.alias, cls)) {
-                this.selectedIcon = cls;
-                this.initialIcon = cls;
-                this._highlightSelectedIcon();
-            }
-        }
-
-        return this._super.apply(this, arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    save: function () {
-        var style = this.$media.attr('style') || '';
-        var iconFont = this._getFont(this.selectedIcon) || {base: 'fa', font: ''};
-        if (!this.$media.is('span, i')) {
-            var $span = $('<span/>');
-            $span.data(this.$media.data());
-            this.$media = $span;
-            this.media = this.$media[0];
-            style = style.replace(/\s*width:[^;]+/, '');
-        }
-        this.$media.removeClass(this.initialIcon).addClass([iconFont.base, iconFont.font]);
-        this.$media.attr('style', style || null);
-        return Promise.resolve(this.media);
-    },
-    /**
-     * @override
-     */
-    search: function (needle) {
-        var iconsParser = this.iconsParser;
-        if (needle && needle.length) {
-            iconsParser = [];
-            _.filter(this.iconsParser, function (data) {
-                var cssData = _.filter(data.cssData, function (cssData) {
-                    return _.find(cssData.names, function (alias) {
-                        return alias.indexOf(needle) >= 0;
-                    });
-                });
-                if (cssData.length) {
-                    iconsParser.push({
-                        base: data.base,
-                        cssData: cssData,
+                    this.dialogs.add(AttachmentError, {
+                        views: prevented[this.props.id],
                     });
                 }
-            });
-        }
-        this.$('div.font-icons-icons').html(
-            QWeb.render('wysiwyg.widgets.font-icons.icons', {iconsParser: iconsParser, widget: this})
-        );
-        return Promise.resolve();
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _clear: function () {
-        var allFaClasses = /(^|\s)(fa|(text-|bg-|fa-)\S*|rounded-circle|rounded|thumbnail|shadow)(?=\s|$)/g;
-        this.media.className = this.media.className && this.media.className.replace(allFaClasses, ' ');
-    },
-    /**
-     * @private
-     */
-    _getFont: function (classNames) {
-        if (!(classNames instanceof Array)) {
-            classNames = (classNames || "").split(/\s+/);
-        }
-        var fontIcon, cssData;
-        for (var k = 0; k < this.iconsParser.length; k++) {
-            fontIcon = this.iconsParser[k];
-            for (var s = 0; s < fontIcon.cssData.length; s++) {
-                cssData = fontIcon.cssData[s];
-                if (_.intersection(classNames, cssData.names).length) {
-                    return {
-                        base: fontIcon.base,
-                        parser: fontIcon.parser,
-                        font: cssData.names[0],
-                    };
-                }
-            }
-        }
-        return null;
-    },
-    /**
-     * @private
-     */
-    _highlightSelectedIcon: function () {
-        var self = this;
-        this.$icons.removeClass('o_we_attachment_selected');
-        this.$icons.filter(function (i, el) {
-            return _.contains($(el).data('alias').split(','), self.selectedIcon);
-        }).addClass('o_we_attachment_selected');
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    _onIconClick: function (ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-
-        this.selectedIcon = $(ev.currentTarget).data('id');
-        this._highlightSelectedIcon();
-        this.trigger_up('save_request');
-    },
-});
-
-/**
- * Let users choose a video, support embed iframe.
- */
-var VideoWidget = MediaWidget.extend({
-    template: 'wysiwyg.widgets.video',
-    events: _.extend({}, MediaWidget.prototype.events || {}, {
-        'change .o_video_dialog_options input': '_onUpdateVideoOption',
-        'input textarea#o_video_text': '_onVideoCodeInput',
-        'change textarea#o_video_text': '_onVideoCodeChange',
-        'click .o_sample_video': '_onSampleVideoClick',
-    }),
-
-    /**
-     * @constructor
-     */
-    init: function (parent, media, options) {
-        this._super.apply(this, arguments);
-        this.isForBgVideo = !!options.isForBgVideo;
-        this._onVideoCodeInput = _.debounce(this._onVideoCodeInput, 1000);
-        // list of videoIds from vimeo.
-        this._vimeoPreviewIds = options.vimeoPreviewIds;
-    },
-    /**
-     * @override
-     */
-    start: async function () {
-        const _super = this._super.bind(this);
-        this.$content = this.$('.o_video_dialog_iframe');
-
-        if (this.media) {
-            var $media = $(this.media);
-            var src = $media.data('oe-expression') || $media.data('src') || ($media.is('iframe') ? $media.attr('src') : '') || '';
-            this.$('textarea#o_video_text').val(src);
-
-            this.$('input#o_video_autoplay').prop('checked', src.indexOf('autoplay=1') >= 0);
-            this.$('input#o_video_hide_controls').prop('checked', src.indexOf('controls=0') >= 0);
-            this.$('input#o_video_loop').prop('checked', src.indexOf('loop=1') >= 0);
-            this.$('input#o_video_hide_fullscreen').prop('checked', src.indexOf('fs=0') >= 0);
-            this.$('input#o_video_hide_yt_logo').prop('checked', src.indexOf('modestbranding=1') >= 0);
-            this.$('input#o_video_hide_dm_logo').prop('checked', src.indexOf('ui-logo=0') >= 0);
-            this.$('input#o_video_hide_dm_share').prop('checked', src.indexOf('sharing-enable=0') >= 0);
-
-            await this._updateVideo();
-        }
-
-        // loads the thumbnail of vimeo video previews.
-        this.$('.o_sample_video').each((index, node) => {
-            const $node = $(node);
-            const videoId = $node.attr('data-vimeo');
-            if (!videoId) {
-                return;
-            }
-            fetch(`https://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/${videoId}`)
-                .then(response=>response.json())
-                .then((response) => {
-                    $node.append($('<img>', {
-                        src: response.thumbnail_url,
-                        class: 'mw-100 mh-100 p-1',
-                    }));
-                });
+            },
+            cancel: () => {},
         });
-
-        return _super(...arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    save: async function () {
-        await this._updateVideo();
-        const videoSrc = this.$content.attr('src');
-        if (this.isForBgVideo) {
-            return Promise.resolve({bgVideoSrc: videoSrc});
-        }
-        if (this.$('.o_video_dialog_iframe').is('iframe') && videoSrc) {
-            this.$media = this.getWrappedIframe(videoSrc);
-            this.media = this.$media[0];
-        }
-        return Promise.resolve(this.media);
-    },
-
-    /**
-     * Get an iframe wrapped for the website builder.
-     *
-     * @param {string} src The video url.
-     */
-    getWrappedIframe: function (src) {
-        return $(
-            '<div class="media_iframe_video" data-oe-expression="' + src + '">' +
-                '<div class="css_editable_mode_display">&nbsp;</div>' +
-                '<div class="media_iframe_video_size" contenteditable="false">&nbsp;</div>' +
-                '<iframe src="' + src + '" frameborder="0" contenteditable="false" allowfullscreen="allowfullscreen"></iframe>' +
-            '</div>'
-        );
-    },
-    /**
-     * Creates a video node according to the given URL and options. If not
-     * possible, returns an error code.
-     *
-     * @param {string} url
-     * @param {Object} options
-     * @returns {Object}
-     *          $video -> the created video jQuery node
-     *          type -> the type of the created video
-     *          errorCode -> if defined, either '0' for invalid URL or '1' for
-     *              unsupported video provider
-     */
-    createVideoNode: async function (url, options) {
-        options = options || {};
-        const videoData = await this._getVideoURLData(url, options);
-        if (videoData.error) {
-            return {errorCode: 0};
-        }
-        if (!videoData.platform) {
-            return {errorCode: 1};
-        }
-        const $video = $('<iframe>').width(1280).height(720)
-            .attr('frameborder', 0)
-            .attr('src', videoData.embed_url)
-            .addClass('o_video_dialog_iframe');
-
-        return {$video: $video, platform: videoData.platform};
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _clear: function () {
-        if (this.media.dataset.src) {
-            try {
-                delete this.media.dataset.src;
-            } catch (_e) {
-                this.media.dataset.src = undefined;
-            }
-        }
-        var allVideoClasses = /(^|\s)media_iframe_video(\s|$)/g;
-        var isVideo = this.media.className && this.media.className.match(allVideoClasses);
-        if (isVideo) {
-            this.media.className = this.media.className.replace(allVideoClasses, ' ');
-            this.media.innerHTML = '';
-        }
-    },
-    /**
-     * Updates the video preview according to video code and enabled options.
-     *
-     * @private
-     */
-    _updateVideo: async function () {
-        // Reset the feedback
-        this.$content.empty();
-        this.$('#o_video_form_group').removeClass('o_has_error o_has_success').find('.form-control, .custom-select').removeClass('is-invalid is-valid');
-        this.$('.o_video_dialog_options div').addClass('d-none');
-
-        // Check video code
-        var $textarea = this.$('textarea#o_video_text');
-        var code = $textarea.val().trim();
-        if (!code) {
-            return;
-        }
-
-        // Detect if we have an embed code rather than an URL
-        var embedMatch = code.match(/(src|href)=["']?([^"']+)?/);
-        if (embedMatch && embedMatch[2].length > 0 && embedMatch[2].indexOf('instagram')) {
-            embedMatch[1] = embedMatch[2]; // Instagram embed code is different
-        }
-        var url = embedMatch ? embedMatch[1] : code;
-
-        const query = await this.createVideoNode(url, {
-            'autoplay': this.isForBgVideo || this.$('input#o_video_autoplay').is(':checked'),
-            'hide_controls': this.isForBgVideo || this.$('input#o_video_hide_controls').is(':checked'),
-            'loop': this.isForBgVideo || this.$('input#o_video_loop').is(':checked'),
-            'hide_fullscreen': this.isForBgVideo || this.$('input#o_video_hide_fullscreen').is(':checked'),
-            'hide_yt_logo': this.isForBgVideo || this.$('input#o_video_hide_yt_logo').is(':checked'),
-            'hide_dm_logo': this.isForBgVideo || this.$('input#o_video_hide_dm_logo').is(':checked'),
-            'hide_dm_share': this.isForBgVideo || this.$('input#o_video_hide_dm_share').is(':checked'),
-        });
-
-        var $optBox = this.$('.o_video_dialog_options');
-
-        // Show / Hide preview elements
-        this.$el.find('.o_video_dialog_preview_text, .media_iframe_video_size').add($optBox).toggleClass('d-none', !query.$video);
-        // Toggle validation classes
-        this.$el.find('#o_video_form_group')
-            .toggleClass('o_has_error', !query.$video).find('.form-control, .custom-select').toggleClass('is-invalid', !query.$video)
-            .end()
-            .toggleClass('o_has_success', !!query.$video).find('.form-control, .custom-select').toggleClass('is-valid', !!query.$video);
-
-        // Individually show / hide options base on the video provider
-        $optBox.find('div.o_' + query.platform + '_option').removeClass('d-none');
-
-        // Hide the entire options box if no options are available or if the
-        // dialog is opened for a background-video
-        $optBox.toggleClass('d-none', this.isForBgVideo || $optBox.find('div:not(.d-none)').length === 0);
-
-        if (query.platform === 'youtube') {
-            // Youtube only: If 'hide controls' is checked, hide 'fullscreen'
-            // and 'youtube logo' options too
-            this.$('input#o_video_hide_fullscreen, input#o_video_hide_yt_logo').closest('div').toggleClass('d-none', this.$('input#o_video_hide_controls').is(':checked'));
-        }
-
-        var $content = query.$video;
-        if (!$content) {
-            switch (query.errorCode) {
-                case 0:
-                    $content = $('<div/>', {
-                        class: 'alert alert-danger o_video_dialog_iframe mb-2 mt-2',
-                        text: _t("The provided url is not valid"),
-                    });
-                    break;
-                case 1:
-                    $content = $('<div/>', {
-                        class: 'alert alert-warning o_video_dialog_iframe mb-2 mt-2',
-                        text: _t("The provided url does not reference any supported video"),
-                    });
-                    break;
-            }
-        }
-        this.$content.replaceWith($content);
-        this.$content = $content;
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Called when a video option changes -> Updates the video preview.
-     *
-     * @private
-     */
-    _onUpdateVideoOption: function () {
-        this._updateVideo();
-    },
-    /**
-     * changes the video preview when clicking on the thumbnail of a suggested video
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onSampleVideoClick(ev) {
-        const vimeoId = ev.currentTarget.getAttribute('data-vimeo');
-        if (vimeoId) {
-            this.$('#o_video_text').val(`https://player.vimeo.com/video/${vimeoId}`);
-            this._updateVideo();
-        }
-    },
-    /**
-     * Called when the video code (URL / Iframe) change is confirmed -> Updates
-     * the video preview immediately.
-     *
-     * @private
-     */
-    _onVideoCodeChange: function () {
-        this._updateVideo();
-    },
-    /**
-     * Called when the video code (URL / Iframe) changes -> Updates the video
-     * preview (note: this function is automatically debounced).
-     *
-     * @private
-     */
-    _onVideoCodeInput: function () {
-        this._updateVideo();
-    },
-    /**
-     * Parses a URL and returns the provider type and an emebedable URL.
-     *
-     * @private
-     */
-    _getVideoURLData: function (url, options) {
-        return this._rpc({
-            route: '/web_editor/video_url/data',
-            params: Object.assign({video_url: url}, options),
-        });
-    },
-});
-
-return {
-    MediaWidget: MediaWidget,
-    SearchableMediaWidget: SearchableMediaWidget,
-    FileWidget: FileWidget,
-    ImageWidget: ImageWidget,
-    DocumentWidget: DocumentWidget,
-    IconWidget: IconWidget,
-    VideoWidget: VideoWidget,
+    }
+}
+Attachment.components = {
+    RemoveButton,
+};
+
+export class FileSelectorControlPanel extends Component {
+    setup() {
+        this.state = useState({
+            showUrlInput: false,
+            urlInput: '',
+            isValidUrl: false,
+            isValidFileFormat: false
+        });
+
+        this.fileInput = useRef('file-input');
+    }
+
+    get showSearchServiceSelect() {
+        return this.props.searchService && this.props.needle;
+    }
+
+    get enableUrlUploadClick() {
+        return !this.state.showUrlInput || (this.state.urlInput && this.state.isValidUrl && this.state.isValidFileFormat);
+    }
+
+    async onUrlUploadClick() {
+        if (!this.state.showUrlInput) {
+            this.state.showUrlInput = true;
+        } else {
+            await this.props.uploadUrl(this.state.urlInput);
+            this.state.urlInput = '';
+        }
+    }
+
+    onUrlInput(ev) {
+        const { isValidUrl, isValidFileFormat } = this.props.validateUrl(ev.target.value);
+        this.state.isValidFileFormat = isValidFileFormat;
+        this.state.isValidUrl = isValidUrl;
+    }
+
+    onClickUpload() {
+        this.fileInput.el.click();
+    }
+
+    async onChangeFileInput() {
+        const inputFiles = this.fileInput.el.files;
+        if (!inputFiles.length) {
+            return;
+        }
+        await this.props.uploadFiles(inputFiles);
+    }
+}
+FileSelectorControlPanel.template = 'web_editor.FileSelectorControlPanel';
+FileSelectorControlPanel.components = {
+    SearchMedia,
+};
+
+export class FileSelector extends Component {
+    setup() {
+        this.orm = useService('orm');
+        this.uploadService = useService('upload');
+
+        this.state = useState({
+            attachments: [],
+            canLoadMoreAttachments: true,
+            isFetchingAttachments: false,
+            needle: '',
+        });
+
+        this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY = 10;
+
+        onWillStart(async () => {
+            this.state.attachments = await this.fetchAttachments(this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY, 0);
+        });
+    }
+
+    get canLoadMore() {
+        return this.state.canLoadMoreAttachments;
+    }
+
+    get hasContent() {
+        return this.state.attachments.length;
+    }
+
+    get isFetching() {
+        return this.state.isFetchingAttachments;
+    }
+
+    get selectedAttachmentIds() {
+        return this.props.selectedMedia[this.props.id].filter(media => media.mediaType === 'attachment').map(({ id }) => id);
+    }
+
+    get attachmentsDomain() {
+        const domain = [
+            '&',
+            ['res_model', '=', this.props.resModel],
+            ['res_id', '=', this.props.resId || 0]
+        ];
+        domain.unshift('|', ['public', '=', true]);
+        domain.push(['name', 'ilike', this.state.needle]);
+        return domain;
+    }
+
+    validateUrl(url) {
+        const path = url.split('?')[0];
+        const isValidUrl = /^.+\..+$/.test(path); // TODO improve
+        const isValidFileFormat = true;
+        return { isValidUrl, isValidFileFormat, path };
+    }
+
+    async fetchAttachments(limit, offset) {
+        this.state.isFetchingAttachments = true;
+        const attachments = await this.orm.call(
+            'ir.attachment',
+            'search_read',
+            [],
+            {
+                domain: this.attachmentsDomain,
+                fields: ['name', 'mimetype', 'description', 'checksum', 'url', 'type', 'res_id', 'res_model', 'public', 'access_token', 'image_src', 'image_width', 'image_height', 'original_id'],
+                order: 'id desc',
+                // Try to fetch first record of next page just to know whether there is a next page.
+                limit: limit + 1,
+                offset,
+            }
+        );
+        this.state.canLoadMoreAttachments = attachments.length >= this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY;
+        this.state.isFetchingAttachments = false;
+        return attachments;
+    }
+
+    async loadMore() {
+        const newAttachments = await this.fetchAttachments(this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY, this.state.attachments.length);
+        this.state.attachments.push(...newAttachments);
+    }
+
+    async search(needle) {
+        this.state.needle = needle;
+        this.state.attachments = await this.fetchAttachments(this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY, 0);
+    }
+
+    async uploadFiles(files) {
+        await this.uploadService.uploadFiles(files, { resModel: this.props.resModel, resId: this.props.resId }, attachment => this.onUploaded(attachment));
+    }
+
+    async uploadUrl(url) {
+        await this.uploadService.uploadUrl(url, { resModel: this.props.resModel, resId: this.props.resId }, attachment => this.onUploaded(attachment));
+    }
+
+    async onUploaded(attachment) {
+        this.state.attachments = [attachment, ...this.state.attachments];
+        this.selectAttachment(attachment);
+        if (!this.props.multiSelect) {
+            await this.props.save();
+        }
+    }
+
+    onRemoved(attachmentId) {
+        this.state.attachments = this.state.attachments.filter(attachment => attachment.id !== attachmentId);
+    }
+
+    selectAttachment(attachment) {
+        this.props.selectMedia({ ...attachment, mediaType: 'attachment' });
+    }
+
+    selectInitialMedia() {
+        return this.props.media
+            && this.constructor.tagNames.includes(this.props.media.tagName)
+            && !this.selectedAttachmentIds.length;
+    }
+}
+FileSelector.template = 'web_editor.FileSelector';
+FileSelector.components = {
+    FileSelectorControlPanel,
 };
-});
diff --git a/addons/web_editor/static/src/components/media_dialog/file_selector.xml b/addons/web_editor/static/src/components/media_dialog/file_selector.xml
new file mode 100644
index 00000000000..95b0fe31b6f
--- /dev/null
+++ b/addons/web_editor/static/src/components/media_dialog/file_selector.xml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+<t t-name="web_editor.FileSelectorControlPanel" owl="1">
+    <div class="form-inline align-items-center py-4">
+        <SearchMedia searchPlaceholder="props.searchPlaceholder" needle="props.needle" search="props.search"/>
+
+        <div class="d-flex justify-content-start align-items-center flex-grow-1 ml-2">
+            <div t-if="props.showOptimizedOption" class="custom-control custom-switch align-items-center mr-2" t-on-change="props.changeShowOptimized">
+                <input class="o_we_show_optimized ml-2 custom-control-input" type="checkbox" t-att-checked="props.showOptimized" id="o_we_show_optimized_switch"/>
+                <label class="custom-control-label" for="o_we_show_optimized_switch">
+                    Show optimized images
+                </label>
+            </div>
+            <select t-if="showSearchServiceSelect" class="custom-select o_we_search_select" t-on-change="ev => props.changeSearchService(ev.target.value)">
+                <option t-att-selected="props.searchService === 'all'" value="all">All</option>
+                <option t-att-selected="props.searchService === 'database'" value="database">My Images</option>
+                <option t-if="props.useMediaLibrary" t-att-selected="props.searchService === 'media-library'" value="media-library">Illustrations</option>
+            </select>
+        </div>
+
+        <div class="input-group align-items-center ml-2">
+            <input type="text" class="form-control o_we_url_input o_we_transition_ease mr-1" t-att-class="{ o_we_horizontal_collapse: !state.showUrlInput }" name="url" t-att-placeholder="props.urlPlaceholder" t-model="state.urlInput" t-on-input="onUrlInput"/>
+            <div class="input-group-append align-items-center">
+                <button type="button" class="btn o_upload_media_url_button" t-att-class="{ 'btn-primary': state.urlInput, 'btn-secondary': !state.urlInput}" t-on-click="onUrlUploadClick" t-att-disabled="!enableUrlUploadClick">
+                    <t t-esc="props.addText"/>
+                </button>
+                <div class="mx-2">
+                    <span t-if="state.urlInput and state.isValidUrl and state.isValidFileFormat" class="o_we_url_success text-success fa fa-lg fa-check" title="The URL seems valid."/>
+                    <span t-if="state.urlInput and !state.isValidUrl" class="o_we_url_error text-danger fa fa-lg fa-times" title="The URL does not seem to work."/>
+                    <span t-if="props.urlWarningTitle and state.urlInput and state.isValidUrl and !state.isValidFileFormat" class="o_we_url_warning text-warning fa fa-lg fa-warning" t-att-title="props.urlWarningTitle"/>
+                </div>
+            </div>
+        </div>
+
+        <input type="file" class="d-none o_file_input" t-on-change="onChangeFileInput" t-ref="file-input" t-att-accept="props.accept" t-att-multiple="props.multiSelect and 'multiple'"/>
+        <div class="btn-group">
+            <button type="button" class="btn btn-primary o_upload_media_button" t-on-click="onClickUpload">
+                <t t-esc="props.uploadText"/>
+            </button>
+        </div>
+    </div>
+</t>
+
+<t t-name="web_editor.FileSelector" owl="1">
+    <form>
+        <FileSelectorControlPanel uploadText="uploadText"
+            accept="fileMimetypes"
+            urlPlaceholder="urlPlaceholder"
+            addText="addText"
+            searchPlaceholder="searchPlaceholder"
+            urlWarningTitle="urlWarningTitle"
+            uploadUrl="(url) => this.uploadUrl(url)"
+            uploadFiles="(files) => this.uploadFiles(files)"
+            showOptimizedOption="showOptimizedOption"
+            showOptimized="state.showOptimized"
+            changeShowOptimized="showOptimized => this.state.showOptimized = !this.state.showOptimized"
+            changeSearchService="service => this.state.searchService = service"
+            searchService="state.searchService"
+            needle="state.needle"
+            search="(needle) => this.search(needle)"
+            useMediaLibrary="props.useMediaLibrary"
+            validateUrl="validateUrl"
+            multiSelect="props.multiSelect"/>
+        <t t-call="{{ constructor.attachmentsListTemplate }}"/>
+        <div name="load_more_attachments" class="mt-4 text-center mx-auto o_we_load_more">
+            <button t-if="canLoadMore" class="btn btn-primary o_load_more" type="button" t-on-click="loadMore">Load more...</button>
+            <div t-if="hasContent and !canLoadMore" class="mt-4 o_load_done_msg">
+                <span><i t-esc="allLoadedText"/></span>
+            </div>
+        </div>
+    </form>
+</t>
+</templates>
diff --git a/addons/web_editor/static/src/components/media_dialog/icon_selector.js b/addons/web_editor/static/src/components/media_dialog/icon_selector.js
new file mode 100644
index 00000000000..70cea8bb396
--- /dev/null
+++ b/addons/web_editor/static/src/components/media_dialog/icon_selector.js
@@ -0,0 +1,70 @@
+/** @odoo-module */
+
+import fonts from 'wysiwyg.fonts';
+import { SearchMedia } from './search_media';
+
+const { Component, useState } = owl;
+
+export class IconSelector extends Component {
+    setup() {
+        this.state = useState({
+            fonts: this.props.fonts,
+            needle: '',
+        });
+
+        this.searchPlaceholder = this.env._t("Search a pictogram");
+    }
+
+    get selectedMediaIds() {
+        return this.props.selectedMedia[this.props.id].map(({ id }) => id);
+    }
+
+    search(needle) {
+        this.state.needle = needle;
+        if (!this.state.needle) {
+            this.state.fonts = this.props.fonts;
+        } else {
+            this.state.fonts = this.props.fonts.map(font => {
+                const icons = font.icons.filter(icon => icon.alias.indexOf(this.state.needle) >= 0);
+                return {...font, icons};
+            });
+        }
+    }
+
+    async onClickIcon(font, icon) {
+        this.props.selectMedia({
+            ...icon,
+            fontBase: font.base,
+        });
+        await this.props.save();
+    }
+
+    /**
+     * Utility methods, used by the MediaDialog component.
+     */
+    static createElements(selectedMedia) {
+        return selectedMedia.map(icon => {
+            const iconEl = document.createElement('span');
+            iconEl.classList.add(icon.fontBase, icon.names[0]);
+            return iconEl;
+        });
+    }
+    static initFonts() {
+        fonts.computeFonts();
+        const allFonts = fonts.fontIcons.map(({cssData, base}) => {
+            const uniqueIcons = Array.from(new Map(cssData.map(icon => {
+                const alias = icon.names.join(',');
+                const id = `${base}_${alias}`;
+                return [id, { ...icon, alias, id }];
+            })).values());
+            return { base, icons: uniqueIcons };
+        });
+        return allFonts;
+    }
+}
+IconSelector.mediaSpecificClasses = [];
+IconSelector.tagNames = ['SPAN', 'I'];
+IconSelector.template = 'web_editor.IconSelector';
+IconSelector.components = {
+    SearchMedia,
+};
diff --git a/addons/web_editor/static/src/components/media_dialog/icon_selector.xml b/addons/web_editor/static/src/components/media_dialog/icon_selector.xml
new file mode 100644
index 00000000000..13ba20fa268
--- /dev/null
+++ b/addons/web_editor/static/src/components/media_dialog/icon_selector.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+<t t-name="web_editor.IconSelector" owl="1">
+    <form action="#">
+        <div class="form-inline align-items-center py-4">
+            <SearchMedia searchPlaceholder="searchPlaceholder"
+                search.bind="this.search"
+                needle="state.needle"/>
+        </div>
+        <div class="font-icons-icons">
+            <t t-foreach="state.fonts" t-as="font" t-key="font.base">
+                <span t-foreach="font.icons" t-as="icon" t-key="icon.id"
+                    t-att-title="icon.names[0]"
+                    t-att-aria-label="icon.names[0]" role="img"
+                    class="font-icons-icon"
+                    t-att-class="{ o_we_attachment_selected: this.selectedMediaIds.includes(icon.id) }"
+                    t-attf-class="{{ font.base }} {{ icon.names[0] }}"
+                    t-on-click="() => this.onClickIcon(font, icon)"/>
+            </t>
+        </div>
+    </form>
+</t>
+</templates>
diff --git a/addons/web_editor/static/src/components/media_dialog/image_selector.js b/addons/web_editor/static/src/components/media_dialog/image_selector.js
new file mode 100644
index 00000000000..475adc9b75c
--- /dev/null
+++ b/addons/web_editor/static/src/components/media_dialog/image_selector.js
@@ -0,0 +1,261 @@
+/** @odoo-module */
+
+import { useService } from '@web/core/utils/hooks';
+import { getCSSVariableValue } from 'web_editor.utils';
+import { Attachment, FileSelector, IMAGE_MIMETYPES, IMAGE_EXTENSIONS } from './file_selector';
+
+const { useRef, useState, useEffect } = owl;
+
+export class AutoResizeImage extends Attachment {
+    setup() {
+        super.setup();
+
+        this.image = useRef('auto-resize-image');
+        this.container = useRef('auto-resize-image-container');
+
+        this.state = useState({
+            loaded: false,
+        });
+
+        useEffect(() => {
+            this.image.el.addEventListener('load', () => this.onImageLoaded());
+            return this.image.el.removeEventListener('load', () => this.onImageLoaded());
+        }, () => []);
+    }
+
+    onImageLoaded() {
+        const aspectRatio = this.image.el.offsetWidth / this.image.el.offsetHeight;
+        const width = aspectRatio * this.props.minRowHeight;
+        this.container.el.style.flexGrow = width;
+        this.container.el.style.flexBasis = `${width}px`;
+        this.state.loaded = true;
+    }
+}
+AutoResizeImage.template = 'web_editor.AutoResizeImage';
+
+export class ImageSelector extends FileSelector {
+    setup() {
+        super.setup();
+
+        this.rpc = useService('rpc');
+
+        this.state.libraryMedia = [];
+        this.state.libraryResults = null;
+        this.state.isFetchingLibrary = false;
+        this.state.searchService = 'all';
+        this.state.showOptimized = false;
+
+        this.uploadText = this.env._t("Upload an image");
+        this.urlPlaceholder = "https://www.odoo.com/logo.png";
+        this.addText = this.env._t("Add URL");
+        this.searchPlaceholder = this.env._t("Search an image");
+        this.urlWarningTitle = this.env._t("Uploaded image's format is not supported. Try with: " + IMAGE_EXTENSIONS.join(', '));
+        this.allLoadedText = this.env._t("All images have been loaded");
+        this.showOptimizedOption = this.env.debug;
+        this.MIN_ROW_HEIGHT = 128;
+
+        this.fileMimetypes = IMAGE_MIMETYPES.join(',');
+    }
+
+    get canLoadMore() {
+        if (this.state.searchService === 'all') {
+            return super.canLoadMore || (this.state.libraryResults && this.state.libraryMedia.length < this.state.libraryResults);
+        } else if (this.state.searchService === 'media-library') {
+            return this.state.libraryResults && this.state.libraryMedia.length < this.state.libraryResults;
+        }
+        return super.canLoadMore;
+    }
+
+    get hasContent() {
+        if (this.state.searchService === 'all') {
+            return super.hasContent || !!this.state.libraryMedia.length;
+        } else if (this.state.searchService === 'media-library') {
+            return !!this.state.libraryMedia.length;
+        }
+        return super.hasContent;
+    }
+
+    get isFetching() {
+        return super.isFetching || this.state.isFetchingLibrary;
+    }
+
+    get selectedMediaIds() {
+        return this.props.selectedMedia[this.props.id].filter(media => media.mediaType === 'libraryMedia').map(({ id }) => id);
+    }
+
+    get attachmentsDomain() {
+        const domain = super.attachmentsDomain;
+        domain.push(['mimetype', 'in', IMAGE_MIMETYPES]);
+        if (!this.props.useMediaLibrary) {
+            domain.push('|', ['url', '=', false], '!', ['url', '=ilike', '/web_editor/shape/%']);
+        }
+        domain.push('!', ['name', '=like', '%.crop']);
+        domain.push('|', ['type', '=', 'binary'], '!', ['url', '=like', '/%/static/%']);
+        return domain;
+    }
+
+    async uploadFiles(files) {
+        await this.uploadService.uploadFiles(files, { resModel: this.props.resModel, resId: this.props.resId, isImage: true }, (attachment) => this.onUploaded(attachment));
+    }
+
+    validateUrl(...args) {
+        const { isValidUrl, path } = super.validateUrl(...args);
+        const isValidFileFormat = IMAGE_EXTENSIONS.some(format => path.endsWith(format));
+        return { isValidFileFormat, isValidUrl };
+    }
+
+    isInitialMedia(attachment) {
+        if (this.props.media.dataset.originalSrc) {
+            return this.props.media.dataset.originalSrc === attachment.image_src;
+        }
+        return this.props.media.getAttribute('src') === attachment.image_src;
+    }
+
+    async fetchAttachments(limit, offset) {
+        const attachments = await super.fetchAttachments(limit, offset);
+        // Color-substitution for dynamic SVG attachment
+        const primaryColors = {};
+        for (let color = 1; color <= 5; color++) {
+            primaryColors[color] = getCSSVariableValue('o-color-' + color);
+        }
+        return attachments.map(attachment => {
+            if (attachment.image_src.startsWith('/')) {
+                const newURL = new URL(attachment.image_src, window.location.origin);
+                // Set the main colors of dynamic SVGs to o-color-1~5
+                if (attachment.image_src.startsWith('/web_editor/shape/')) {
+                    newURL.searchParams.forEach((value, key) => {
+                        const match = key.match(/^c([1-5])$/);
+                        if (match) {
+                            newURL.searchParams.set(key, primaryColors[match[1]]);
+                        }
+                    });
+                } else {
+                    // Set height so that db images load faster
+                    newURL.searchParams.set('height', 2 * this.MIN_ROW_HEIGHT);
+                }
+                attachment.thumbnail_src = newURL.pathname + newURL.search;
+            }
+            if (this.selectInitialMedia() && this.isInitialMedia(attachment)) {
+                this.selectAttachment(attachment);
+            }
+            return attachment;
+        });
+    }
+
+    async fetchLibraryMedia(offset) {
+        if (!this.state.needle) {
+            return { media: [], results: null };
+        }
+
+        this.state.isFetchingLibrary = true;
+        try {
+            const response = await this.rpc(
+                '/web_editor/media_library_search',
+                {
+                    'query': this.state.needle,
+                    'offset': offset,
+                },
+                {
+                    silent: true,
+                }
+            );
+            this.state.isFetchingLibrary = false;
+            return { media: response.media || [], results: response.results };
+        } catch {
+            // Either API endpoint doesn't exist or is misconfigured.
+            console.error(`Couldn't reach API endpoint.`);
+            this.state.isFetchingLibrary = false;
+            return { media: [], results: null };
+        }
+    }
+
+    async loadMore(...args) {
+        await super.loadMore(...args);
+        if (!this.props.useMediaLibrary) {
+            return;
+        }
+        const { media } = await this.fetchLibraryMedia(this.state.libraryMedia.length);
+        this.state.libraryMedia.push(...media);
+    }
+
+    async search(...args) {
+        await super.search(...args);
+        if (!this.props.useMediaLibrary) {
+            return;
+        }
+        if (!this.state.needle) {
+            this.state.searchService = 'all';
+        }
+        const { media, results } = await this.fetchLibraryMedia(0);
+        this.state.libraryMedia = media;
+        this.state.libraryResults = results;
+    }
+
+    async onClickAttachment(attachment) {
+        this.selectAttachment(attachment);
+        if (!this.props.multiSelect) {
+            await this.props.save();
+        }
+    }
+
+    async onClickMedia(media) {
+        this.props.selectMedia({ ...media, mediaType: 'libraryMedia' });
+        if (!this.props.multiSelect) {
+            await this.props.save();
+        }
+    }
+
+    /**
+     * Utility method used by the MediaDialog component.
+     */
+    static async createElements(selectedMedia, { orm, rpc }) {
+        // Create all media-library attachments.
+        const toSave = Object.fromEntries(selectedMedia.filter(media => media.mediaType === 'libraryMedia').map(media => [
+            media.id, {
+                query: media.query || '',
+                is_dynamic_svg: !!media.isDynamicSVG,
+                dynamic_colors: media.dynamicColors,
+            }
+        ]));
+        let savedMedia = [];
+        if (Object.keys(toSave).length !== 0) {
+            savedMedia = await rpc('/web_editor/save_library_media', { media: toSave });
+        }
+        const selected = selectedMedia.filter(media => media.mediaType === 'attachment').concat(savedMedia).map(attachment => {
+            // Color-customize dynamic SVGs with the theme colors
+            if (attachment.image_src && attachment.image_src.startsWith('/web_editor/shape/')) {
+                const colorCustomizedURL = new URL(attachment.image_src, window.location.origin);
+                colorCustomizedURL.searchParams.forEach((value, key) => {
+                    const match = key.match(/^c([1-5])$/);
+                    if (match) {
+                        colorCustomizedURL.searchParams.set(key, getCSSVariableValue(`o-color-${match[1]}`));
+                    }
+                });
+                attachment.image_src = colorCustomizedURL.pathname + colorCustomizedURL.search;
+            }
+            return attachment;
+        });
+        return Promise.all(selected.map(async (attachment) => {
+            const imageEl = document.createElement('img');
+            let src = attachment.image_src;
+            if (!attachment.public) {
+                const [accessToken] = await orm.call(
+                    'ir.attachment',
+                    'generate_access_token',
+                    [attachment.id],
+                );
+                src += `?access_token=${accessToken}`;
+            }
+            imageEl.src = src;
+            imageEl.alt = attachment.description || '';
+            return imageEl;
+        }));
+    }
+}
+ImageSelector.mediaSpecificClasses = ['img', 'img-fluid', 'o_we_custom_image'];
+ImageSelector.tagNames = ['IMG'];
+ImageSelector.attachmentsListTemplate = 'web_editor.ImagesListTemplate';
+ImageSelector.components = {
+    ...FileSelector.components,
+    AutoResizeImage,
+};
diff --git a/addons/web_editor/static/src/components/media_dialog/image_selector.xml b/addons/web_editor/static/src/components/media_dialog/image_selector.xml
new file mode 100644
index 00000000000..64e5022d9b7
--- /dev/null
+++ b/addons/web_editor/static/src/components/media_dialog/image_selector.xml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+<t t-name="web_editor.AutoResizeImage" owl="1">
+    <div t-ref="auto-resize-image-container" class="o_existing_attachment_cell o_we_image position-relative align-items-center justify-content-center" t-att-class="{ o_we_attachment_optimized: props.isOptimized, o_loaded: state.loaded, o_we_attachment_selected: props.selected }" t-on-click="props.onImageClick">
+        <RemoveButton t-if="props.isRemovable" model="props.model" remove="() => this.remove()"/>
+        <div class="o_we_media_dialog_img_wrapper">
+            <img t-ref="auto-resize-image" class="img img-fluid o_we_attachment_highlight" t-att-src="props.src" t-att-alt="props.altDescription" t-att-title="props.title" loading="lazy"/>
+            <a t-if="props.author" class="o_we_media_author" t-att-href="props.authorLink" target="_blank" t-esc="props.author"/>
+        </div>
+        <span t-if="props.isOptimized" class="badge badge-success">Optimized</span>
+    </div>
+</t>
+
+<t t-name="web_editor.ImagesListTemplate" owl="1">
+    <div class="o_we_existing_attachments o_we_images d-flex flex-wrap w-100 justify-content-between align-items-stretch my-0">
+        <t t-if="!hasContent and !isFetching">
+            <div t-if="state.needle" class="o_nocontent_help">
+                <p class="o_empty_folder_image">No images found.</p>
+                <p class="o_empty_folder_subtitle">You can upload images with the button located in the top left of the screen.</p>
+            </div>
+            <div t-else="" class="o_we_search_prompt">
+                <h2>Get the perfect image by searching in our library of copyright free photos and illustrations.</h2>
+            </div>
+        </t>
+        <t t-else="">
+            <t t-if="['all', 'database'].includes(state.searchService)">
+                <t t-foreach="state.attachments" t-as="attachment" t-key="attachment.id">
+                    <AutoResizeImage t-if="!attachment.original_id or state.showOptimized"
+                        id="attachment.id"
+                        isOptimized="!!attachment.original_id"
+                        isRemovable="true"
+                        onRemoved="(attachmentId) => this.onRemoved(attachmentId)"
+                        selected="this.selectedAttachmentIds.includes(attachment.id)"
+                        src="attachment.thumbnail_src or attachment.image_src"
+                        name="attachment.name"
+                        title="attachment.name"
+                        altDescription="attachment.altDescription"
+                        model="attachment.res_model"
+                        minRowHeight="MIN_ROW_HEIGHT"
+                        onImageClick="() => this.onClickAttachment(attachment)"/>
+                </t>
+            </t>
+            <t t-if="['all', 'media-library'].includes(state.searchService)">
+                <t t-foreach="state.libraryMedia" t-as="media" t-key="media.id">
+                    <AutoResizeImage author="media.author"
+                        src="media.thumbnail_url"
+                        authorLink="media.author_link"
+                        title="media.tooltip"
+                        altDescription="media.tooltip"
+                        minRowHeight="MIN_ROW_HEIGHT"
+                        selected="this.selectedMediaIds.includes(media.id)"
+                        onImageClick="() => this.onClickMedia(media)"/>
+                </t>
+            </t>
+            <!-- 20 placeholders is just enough for a 5K screen, change this if ImageWidget.MIN_ROW_HEIGHT changes -->
+            <t t-foreach="[...Array(20).keys()]" t-as="i" t-key="i">
+                <div class="o_we_attachment_placeholder"/>
+            </t>
+        </t>
+    </div>
+</t>
+</templates>
diff --git a/addons/web_editor/static/src/components/media_dialog/media_dialog.js b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
index 4b015b009f3..a8093cd2250 100644
--- a/addons/web_editor/static/src/components/media_dialog/media_dialog.js
+++ b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
@@ -1,307 +1,156 @@
-odoo.define('wysiwyg.widgets.MediaDialog', function (require) {
-'use strict';
+/** @odoo-module **/
 
-var core = require('web.core');
-var MediaModules = require('wysiwyg.widgets.media');
-var Dialog = require('wysiwyg.widgets.Dialog');
+import { useService } from '@web/core/utils/hooks';
+import { Dialog } from '@web/core/dialog/dialog';
+import { ImageSelector } from './image_selector';
+import { DocumentSelector } from './document_selector';
+import { IconSelector } from './icon_selector';
+import { VideoSelector } from './video_selector';
 
-var _t = core._t;
+const { useState } = owl;
 
-/**
- * Lets the user select a media. The media can be existing or newly uploaded.
- *
- * The media can be one of the following types: image, document, video or
- * font awesome icon (only existing icons).
- *
- * The user may change a media into another one depending on the given options.
- */
-var MediaDialog = Dialog.extend({
-    template: 'wysiwyg.widgets.media',
-    xmlDependencies: Dialog.prototype.xmlDependencies.concat(
-        ['/web_editor/static/src/xml/wysiwyg.xml']
-    ),
-    events: _.extend({}, Dialog.prototype.events, {
-        'click #editor-media-image-tab': '_onClickImageTab',
-        'click #editor-media-document-tab': '_onClickDocumentTab',
-        'click #editor-media-icon-tab': '_onClickIconTab',
-        'click #editor-media-video-tab': '_onClickVideoTab',
-    }),
-    custom_events: _.extend({}, Dialog.prototype.custom_events || {}, {
-        save_request: '_onSaveRequest',
-        show_parent_dialog_request: '_onShowRequest',
-        hide_parent_dialog_request: '_onHideRequest',
-    }),
+export const TABS = {
+    IMAGES: {
+        id: 'IMAGES',
+        title: "Images",
+        Component: ImageSelector,
+    },
+    DOCUMENTS: {
+        id: 'DOCUMENTS',
+        title: "Documents",
+        Component: DocumentSelector,
+    },
+    ICONS: {
+        id: 'ICONS',
+        title: "Icons",
+        Component: IconSelector,
+    },
+    VIDEOS: {
+        id: 'VIDEOS',
+        title: "Videos",
+        Component: VideoSelector,
+    },
+};
 
-    /**
-     * @constructor
-     * @param {Element} media
-     */
-    init: function (parent, options, media) {
-        var $media = $(media);
-        media = $media[0];
-        this.media = media;
+export class MediaDialog extends Dialog {
+    setup() {
+        super.setup();
+        this.size = 'modal-xl';
+        this.contentClass = 'o_select_media_dialog';
+        this.title = this.env._t("Select a media");
 
-        options = _.extend({}, options);
-        var onlyImages = options.onlyImages || this.multiImages || (media && ($media.parent().data('oeField') === 'image' || $media.parent().data('oeType') === 'image'));
-        options.noDocuments = onlyImages || options.noDocuments;
-        options.noIcons = onlyImages || options.noIcons;
-        options.noVideos = onlyImages || options.noVideos;
+        this.rpc = useService('rpc');
+        this.orm = useService('orm');
 
-        this._super(parent, _.extend({}, {
-            title: _t("Select a Media"),
-            save_text: _t("Add"),
-        }, options));
+        this.tabs = [];
+        this.selectedMedia = useState({});
 
-        if (!options.noImages) {
-            this.imageWidget = this.getImageWidget(media, options);
+        this.addTabs();
+
+        this.state = useState({
+            activeTab: this.initialActiveTab,
+        });
+    }
+
+    get initialActiveTab() {
+        if (this.props.activeTab) {
+            return this.props.activeTab;
         }
-        if (!options.noDocuments) {
-            this.documentWidget = this.getDocumentWidget(media, options);
-        }
-        if (!options.noIcons) {
-            this.iconWidget = this.getIconWidget(media, options);
-        }
-        if (!options.noVideos) {
-            this.videoWidget = this.getVideoWidget(media, options);
-        }
-
-        if (this.imageWidget && $media.is('img')) {
-            this.activeWidget = this.imageWidget;
-        } else if (this.documentWidget && $media.is('a.o_image')) {
-            this.activeWidget = this.documentWidget;
-        } else if (this.videoWidget && $media.is('.media_iframe_video, .o_bg_video_iframe')) {
-            this.activeWidget = this.videoWidget;
-        } else if (this.iconWidget && $media.is('span, i')) {
-            this.activeWidget = this.iconWidget;
-        } else {
-            this.activeWidget = [this.imageWidget, this.documentWidget, this.videoWidget, this.iconWidget].find(w => !!w);
-        }
-        this.initiallyActiveWidget = this.activeWidget;
-    },
-    /**
-     * Adds the appropriate class to the current modal and appends the media
-     * widgets to their respective tabs.
-     *
-     * @override
-     */
-    start: function () {
-        var promises = [this._super.apply(this, arguments)];
-        this.$modal.find('.modal-dialog').addClass('o_select_media_dialog');
-
-        if (this.imageWidget) {
-            promises.push(this.imageWidget.appendTo(this.$("#editor-media-image")));
-        }
-        if (this.documentWidget) {
-            promises.push(this.documentWidget.appendTo(this.$("#editor-media-document")));
-        }
-        if (this.iconWidget) {
-            promises.push(this.iconWidget.appendTo(this.$("#editor-media-icon")));
-        }
-        if (this.videoWidget) {
-            promises.push(this.videoWidget.appendTo(this.$("#editor-media-video")));
-        }
-
-        this.opened(() => this.$('input.o_we_search:visible:first').focus());
-
-        return Promise.all(promises);
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @param {Object} media
-     * @param {Object} options
-     * @returns {ImageWidget}
-     */
-    getImageWidget: function (media, options) {
-        return new MediaModules.ImageWidget(this, media, options);
-    },
-
-    /**
-     * @param {Object} media
-     * @param {Object} options
-     * @returns {DocumentWidget}
-     */
-    getDocumentWidget: function (media, options) {
-        return new MediaModules.DocumentWidget(this, media, options);
-    },
-
-    /**
-     * @param {Object} media
-     * @param {Object} options
-     * @returns {IconWidget}
-     */
-    getIconWidget: function (media, options) {
-        return new MediaModules.IconWidget(this, media, options);
-    },
-
-    /**
-     * @param {Object} media
-     * @param {Object} options
-     * @returns {VideoWidget}
-     */
-    getVideoWidget: function (media, options) {
-        return new MediaModules.VideoWidget(this, media, options);
-    },
-
-    /**
-     * Returns whether the document widget is currently active.
-     *
-     * @returns {boolean}
-     */
-    isDocumentActive: function () {
-        return this.activeWidget === this.documentWidget;
-    },
-    /**
-     * Returns whether the icon widget is currently active.
-     *
-     * @returns {boolean}
-     */
-    isIconActive: function () {
-        return this.activeWidget === this.iconWidget;
-    },
-    /**
-     * Returns whether the image widget is currently active.
-     *
-     * @returns {boolean}
-     */
-    isImageActive: function () {
-        return this.activeWidget === this.imageWidget;
-    },
-    /**
-     * Returns whether the video widget is currently active.
-     *
-     * @returns {boolean}
-     */
-    isVideoActive: function () {
-        return this.activeWidget === this.videoWidget;
-    },
-    /**
-     * Saves the currently selected media from the currently active widget.
-     *
-     * The save event data `final_data` will be one Element in general, but it
-     * will be an Array of Element if `multiImages` is set.
-     *
-     * @override
-     */
-    save: function () {
-        var self = this;
-        var _super = this._super;
-        var args = arguments;
-        return this.activeWidget.save().then(function (data) {
-            if (self.activeWidget !== self.initiallyActiveWidget) {
-                self._clearWidgets();
+        if (this.props.media) {
+            const correspondingTab = Object.keys(TABS).find(id => TABS[id].Component.tagNames.includes(this.props.media.tagName));
+            if (correspondingTab) {
+                return correspondingTab;
             }
-            // Restore classes if the media was replaced (when changing type)
-            if (self.media !== data) {
-                var oldClasses = self.media && _.toArray(self.media.classList);
-                if (oldClasses) {
-                    data.className = _.union(_.toArray(data.classList), oldClasses).join(' ');
+        }
+        return this.tabs[0].id;
+    }
+
+    addTab(tab, additionalProps = {}) {
+        this.selectedMedia[tab.id] = [];
+        this.tabs.push({
+            ...tab,
+            props: {
+                ...tab.props,
+                ...additionalProps,
+                id: tab.id,
+                resModel: this.props.resModel,
+                resId: this.props.resId,
+                media: this.props.media,
+                selectedMedia: this.selectedMedia,
+                selectMedia: (...args) => this.selectMedia(...args, tab.id, additionalProps.multiSelect),
+                save: this.save.bind(this),
+            },
+        });
+    }
+
+    addTabs() {
+        const onlyImages = this.props.onlyImages || this.props.multiImages || (this.props.media && this.props.media.parentElement && (this.props.media.parentElement.dataset.oeField === 'image' || this.props.media.parentElement.dataset.oeType === 'image'));
+        const noDocuments = onlyImages || this.props.noDocuments;
+        const noIcons = onlyImages || this.props.noIcons;
+        const noVideos = onlyImages || this.props.noVideos;
+
+        if (!this.props.noImages) {
+            this.addTab(TABS.IMAGES, {
+                useMediaLibrary: this.props.useMediaLibrary,
+                multiSelect: this.props.multiImages
+            });
+        }
+        if (!noDocuments) {
+            this.addTab(TABS.DOCUMENTS);
+        }
+        if (!noIcons) {
+            const fonts = TABS.ICONS.Component.initFonts();
+            this.addTab(TABS.ICONS, {
+                fonts,
+            });
+
+            if (this.props.media && TABS.ICONS.Component.tagNames.includes(this.props.media.tagName)) {
+                const classes = this.props.media.className.split(/\s+/);
+                const mediaFont = fonts.find(font => classes.includes(font.base));
+                if (mediaFont) {
+                    const selectedIcon = mediaFont.icons.find(icon => icon.names.some(name => classes.includes(name)));
+                    if (selectedIcon) {
+                        this.selectMedia(selectedIcon, TABS.ICONS.id);
+                    }
                 }
             }
-            self.final_data = data;
-            _super.apply(self, args);
-            $(data).trigger('content_changed');
-        });
-    },
+        }
+        if (!noVideos) {
+            this.addTab(TABS.VIDEOS, {
+                vimeoPreviewIds: this.props.vimeoPreviewIds,
+                isForBgVideo: this.props.isForBgVideo,
+            });
+        }
+    }
 
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Call clear on all the widgets except the activeWidget.
-     * We clear because every widgets are modifying the "media" element.
-     * All widget have the responsibility to clear a previous element that
-     * was created from them.
-     */
-    _clearWidgets: function () {
-        [   this.imageWidget,
-            this.documentWidget,
-            this.iconWidget,
-            this.videoWidget
-        ].forEach( (widget) => {
-            if (widget !== this.activeWidget) {
-                widget && widget.clear();
+    selectMedia(media, tabId, multiSelect) {
+        if (multiSelect) {
+            const isMediaSelected = this.selectedMedia[tabId].map(({ id }) => id).includes(media.id);
+            if (!isMediaSelected) {
+                this.selectedMedia[tabId].push(media);
+            } else {
+                this.selectedMedia[tabId] = this.selectedMedia[tabId].filter(m => m.id !== media.id);
             }
-        });
-    },
+        } else {
+            this.selectedMedia[tabId] = [media];
+        }
+    }
 
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Sets the document widget as the active widget.
-     *
-     * @private
-     */
-    _onClickDocumentTab: function () {
-        this.activeWidget = this.documentWidget;
-    },
-    /**
-     * Sets the icon widget as the active widget.
-     *
-     * @private
-     */
-    _onClickIconTab: function () {
-        this.activeWidget = this.iconWidget;
-    },
-    /**
-     * Sets the image widget as the active widget.
-     *
-     * @private
-     */
-    _onClickImageTab: function () {
-        this.activeWidget = this.imageWidget;
-    },
-    /**
-     * Sets the video widget as the active widget.
-     *
-     * @private
-     */
-    _onClickVideoTab: function () {
-        this.activeWidget = this.videoWidget;
-    },
-    /**
-     * Handles hide request from child widgets.
-     *
-     * This is for usability, to allow hiding the modal for example when another
-     * smaller modal would be displayed on top.
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onHideRequest: function (ev) {
-        this.$modal.addClass('d-none');
-    },
-    /**
-     * Handles save request from the child widgets.
-     *
-     * This is for usability, to allow the user to save from other ways than
-     * click on the modal button, such as double clicking a media to select it.
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onSaveRequest: function (ev) {
-        ev.stopPropagation();
-        this.save();
-    },
-    /**
-     * Handles show request from the child widgets.
-     *
-     * This is for usability, it is the counterpart of @see _onHideRequest.
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onShowRequest: function (ev) {
-        this.$modal.removeClass('d-none');
-    },
-});
-
-return MediaDialog;
-});
+    async save() {
+        const selectedMedia = this.selectedMedia[this.state.activeTab];
+        if (selectedMedia.length) {
+            const elements = await TABS[this.state.activeTab].Component.createElements(selectedMedia);
+            if (this.props.multiImages) {
+                this.props.save(elements);
+            } else {
+                this.props.save(elements[0]);
+            }
+        }
+        this.close();
+    }
+}
+MediaDialog.bodyTemplate = 'web_editor.MediaDialogBody';
+MediaDialog.footerTemplate = 'web_editor.MediaDialogFooter';
+MediaDialog.components = {
+    ...Object.keys(TABS).map(key => TABS[key].Component),
+};
diff --git a/addons/web_editor/static/src/components/media_dialog/media_dialog.scss b/addons/web_editor/static/src/components/media_dialog/media_dialog.scss
new file mode 100644
index 00000000000..76f9a650106
--- /dev/null
+++ b/addons/web_editor/static/src/components/media_dialog/media_dialog.scss
@@ -0,0 +1,141 @@
+$min-row-height: 128;
+
+.modal:not(.o_legacy_dialog) .o_select_media_dialog {
+    .nav-item {
+        cursor: pointer;
+    }
+
+    .o_we_horizontal_collapse {
+        width: 0 !important;
+        padding: 0 !important;
+        border: none !important;
+    }
+
+    .o_we_transition_ease {
+        transition: all ease 0.25s;
+    }
+
+    .o_we_existing_attachments {
+        min-height: $min-row-height + px;
+
+        .o_we_attachment_placeholder {
+            flex-grow: $min-row-height;
+            flex-basis: $min-row-height + px;
+        }
+
+        .o_existing_attachment_cell {
+            cursor: pointer;
+            margin: 1px;
+
+            &.o_we_image {
+                position: fixed !important;
+                opacity: 0;
+                transition: opacity 0.5s;
+                transition-delay: 0.5s;
+
+                &.o_loaded {
+                    position: relative !important;
+                    opacity: 1;
+                }
+
+                img {
+                    width: 100%;
+                }
+            }
+
+            .o_existing_attachment_remove {
+                background-color: rgba(white, 0.4);
+                cursor: pointer;
+                opacity: 0;
+                transition: color 0.2s ease;
+            }
+
+            .o_existing_attachment_remove {
+                @include o-position-absolute($top: 0, $right: 0);
+                z-index: 1;
+                border-radius: 0 0 0 2px;
+                &:hover {
+                    color: $o-we-color-danger;
+                }
+            }
+
+            .o_file_name {
+                @include o-text-overflow;
+            }
+
+            &:hover {
+                .o_existing_attachment_remove {
+                    opacity: 1;
+                }
+                &.o_we_attachment_highlight, .o_we_attachment_highlight {
+                    border-color: $card-border-color;
+                    box-shadow: 0px 0px 2px 2px $card-border-color;
+                }
+            }
+
+            &.o_we_attachment_optimized .badge {
+                position: absolute;
+                bottom: 0;
+                right: 0;
+                margin: 2px;
+            }
+
+            .o_we_media_author {
+                font-size: 11px;
+                @include o-position-absolute($bottom: 0, $left: 0, $right: 0);
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                text-align: center;
+                background-color: rgba(255, 255, 255, .7);
+            }
+        }
+    }
+
+    .o_we_attachment_selected {
+        @include o-we-active-wrapper($top: 5px, $left: 5px);
+    }
+
+    .font-icons-icons {
+        > span {
+            text-align: center;
+            font-size: 22px;
+            margin: 5px;
+            width: 50px;
+            height: 50px;
+            padding: 15px 0; // 0 allows to center properly
+            cursor: pointer;
+        }
+    }
+
+    .o_video_dialog_form {
+        textarea {
+            min-height: 95px;
+        }
+    }
+
+    .o_video_preview {
+        position: relative;
+        @include o-we-preview-box();
+        border: none;
+
+        .media_iframe_video {
+            width: 100%;
+        }
+
+        .o_video_dialog_iframe {
+            @include o-we-preview-content;
+            max-width: 100%;
+            max-height: 100%;
+
+            &.alert {
+                animation: fadeInDownSmall 700ms forwards;
+                margin: 0 auto;
+            }
+        }
+    }
+
+    #video-suggestion > .o_sample_video {
+        cursor: pointer;
+    }
+}
diff --git a/addons/web_editor/static/src/components/media_dialog/media_dialog.xml b/addons/web_editor/static/src/components/media_dialog/media_dialog.xml
new file mode 100644
index 00000000000..c15e411201f
--- /dev/null
+++ b/addons/web_editor/static/src/components/media_dialog/media_dialog.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+<t t-name="web_editor.MediaDialogBody" owl="1">
+    <ul class="nav nav-tabs" role="tablist">
+        <t t-foreach="tabs" t-as="tab" t-key="tab.id">
+            <li class="nav-item"><a class="nav-link" t-att-class="{ active:  tab.id === state.activeTab }" t-on-click="() => state.activeTab = tab.id"><t t-esc="tab.title"/></a></li>
+        </t>
+    </ul>
+    <!-- Tab panes -->
+    <div class="tab-content">
+        <t t-foreach="tabs" t-as="tab" t-key="tab.id">
+            <div class="tab-pane fade" t-att-class="tab.id === state.activeTab ? 'active show' : ''"><t t-component="tab.Component" t-props="tab.props"/></div>
+        </t>
+    </div>
+</t>
+
+<t t-name="web_editor.MediaDialogFooter" owl="1">
+    <button class="btn btn-primary" t-on-click="save">Add</button>
+    <button class="btn btn-secondary" t-on-click="close">Discard</button>
+</t>
+</templates>
diff --git a/addons/web_editor/static/src/components/media_dialog/search_media.js b/addons/web_editor/static/src/components/media_dialog/search_media.js
new file mode 100644
index 00000000000..0b99df7f1f7
--- /dev/null
+++ b/addons/web_editor/static/src/components/media_dialog/search_media.js
@@ -0,0 +1,20 @@
+/** @odoo-module **/
+
+import { throttle } from '@web/core/utils/timing';
+
+const { Component, xml } = owl;
+
+export class SearchMedia extends Component {
+    setup() {
+        this.search = throttle((ev) => this.props.search(ev.target.value), 1000);
+    }
+}
+SearchMedia.template = xml`
+<div class="input-group mr-auto">
+    <input type="text" class="form-control o_we_search" t-att-placeholder="props.searchPlaceholder.trim()" t-att-value="props.needle" t-on-input="search"/>
+    <div class="input-group-append">
+        <div class="input-group-text o_we_search_icon">
+            <i class="fa fa-search" title="Search" role="img" aria-label="Search"/>
+        </div>
+    </div>
+</div>`;
diff --git a/addons/web_editor/static/src/components/media_dialog/video_selector.js b/addons/web_editor/static/src/components/media_dialog/video_selector.js
new file mode 100644
index 00000000000..a8a31345cb9
--- /dev/null
+++ b/addons/web_editor/static/src/components/media_dialog/video_selector.js
@@ -0,0 +1,204 @@
+/** @odoo-module */
+
+import { useService } from '@web/core/utils/hooks';
+import { throttle } from '@web/core/utils/timing';
+import { qweb } from 'web.core';
+
+const { Component, useState, useRef, onMounted, onWillStart } = owl;
+
+class VideoOption extends Component {}
+VideoOption.template = 'web_editor.VideoOption';
+
+export class VideoSelector extends Component {
+    setup() {
+        this.rpc = useService('rpc');
+        this.http = useService('http');
+
+        this.PLATFORMS = {
+            youtube: 'youtube',
+            dailymotion: 'dailymotion',
+            vimeo: 'vimeo',
+            youku: 'youku',
+        };
+
+        this.OPTIONS = {
+            autoplay: {
+                label: this.env._t("Autoplay"),
+                description: this.env._t("Videos are muted when autoplay is enabled"),
+                platforms: [this.PLATFORMS.youtube, this.PLATFORMS.dailymotion, this.PLATFORMS.vimeo],
+                urlParameter: 'autoplay=1',
+            },
+            loop: {
+                label: this.env._t("Loop"),
+                platforms: [this.PLATFORMS.youtube, this.PLATFORMS.vimeo],
+                urlParameter: 'loop=1',
+            },
+            hide_controls: {
+                label: this.env._t("Hide player controls"),
+                platforms: [this.PLATFORMS.youtube, this.PLATFORMS.dailymotion],
+                urlParameter: 'controls=0',
+            },
+            hide_fullscreen: {
+                label: this.env._t("Hide fullscreen button"),
+                platforms: [this.PLATFORMS.youtube],
+                urlParameter: 'fs=0',
+                isHidden: () => this.state.options.filter(option => option.id === 'hide_controls')[0].value,
+            },
+            hide_yt_logo: {
+                label: this.env._t("Hide Youtube logo"),
+                platforms: [this.PLATFORMS.youtube],
+                urlParameter: 'modestbranding=1',
+                isHidden: () => this.state.options.filter(option => option.id === 'hide_controls')[0].value,
+            },
+            hide_dm_logo: {
+                label: this.env._t("Hide Dailymotion logo"),
+                platforms: [this.PLATFORMS.dailymotion],
+                urlParameter: 'ui-logo=0',
+            },
+            hide_dm_share: {
+                label: this.env._t("Hide sharing button"),
+                platforms: [this.PLATFORMS.dailymotion],
+                urlParameter: 'sharing-enable=0',
+            },
+        };
+
+        this.state = useState({
+            options: [],
+            src: '',
+            urlInput: '',
+            platform: null,
+            vimeoPreviews: [],
+            errorMessage: '',
+        });
+        this.urlInputRef = useRef('url-input');
+
+        onWillStart(async () => {
+            if (this.props.media) {
+                const src = this.props.media.dataset.oeExpression || this.props.media.dataset.src || (this.props.media.tagName === 'IFRAME' && this.props.media.getAttribute('src')) || '';
+                if (src) {
+                    this.state.urlInput = src;
+                    await this.updateVideo();
+
+                    this.state.options = this.state.options.map((option) => {
+                        const { urlParameter } = this.OPTIONS[option.id];
+                        return { ...option, value: src.indexOf(urlParameter) >= 0 };
+                    });
+                }
+            }
+        });
+
+        onMounted(async () => {
+            await Promise.all(this.props.vimeoPreviewIds.map(async (videoId) => {
+                const { thumbnail_url: thumbnailSrc } = await this.http.get(`https://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/${videoId}`);
+                this.state.vimeoPreviews.push({
+                    id: videoId,
+                    thumbnailSrc,
+                    src: `https://player.vimeo.com/video/${videoId}`
+                });
+            }));
+        });
+
+        this.onChangeUrl = throttle((ev) => this.updateVideo(ev.target.value), 500);
+    }
+
+    get shownOptions() {
+        if (this.props.isForBgVideo) {
+            return [];
+        }
+        return this.state.options.filter(option => !this.OPTIONS[option.id].isHidden || !this.OPTIONS[option.id].isHidden());
+    }
+
+    async onChangeOption(optionId) {
+        this.state.options = this.state.options.map(option => {
+            if (option.id === optionId) {
+                return { ...option, value: !option.value };
+            }
+            return option;
+        });
+        await this.updateVideo();
+    }
+
+    async onClickSuggestion(src) {
+        this.state.urlInput = src;
+        await this.updateVideo();
+    }
+
+    async updateVideo() {
+        if (!this.state.urlInput) {
+            this.state.src = '';
+            this.state.urlInput = '';
+            this.state.options = [];
+            this.state.platform = null;
+            this.state.errorMessage = '';
+            return;
+        }
+
+        // Detect if we have an embed code rather than an URL
+        const embedMatch = this.state.urlInput.match(/(src|href)=["']?([^"']+)?/);
+        if (embedMatch && embedMatch[2].length > 0 && embedMatch[2].indexOf('instagram')) {
+            embedMatch[1] = embedMatch[2]; // Instagram embed code is different
+        }
+        const url = embedMatch ? embedMatch[1] : this.state.urlInput;
+
+        const options = {};
+        if (this.props.isForBgVideo) {
+            Object.keys(this.OPTIONS).forEach(key => {
+                options[key] = true;
+            });
+        } else {
+            for (const option of this.shownOptions) {
+                options[option.id] = option.value;
+            }
+        }
+        const { embed_url: src, platform } = await this.rpc('/web_editor/video_url/data', {
+            video_url: url,
+            ...options,
+        });
+
+        if (!src) {
+            this.state.errorMessage = this.env._t("The provided url is not valid");
+        } else if (!platform) {
+            this.env._t("The provided url does not reference any supported video");
+        } else {
+            this.state.errorMessage = '';
+        }
+
+        const newOptions = [];
+        if (platform && platform !== this.state.platform) {
+            Object.keys(this.OPTIONS).forEach(key => {
+                if (this.OPTIONS[key].platforms.includes(platform)) {
+                    const { label, description } = this.OPTIONS[key];
+                    newOptions.push({ id: key, label, description });
+                }
+            });
+        }
+
+        this.state.src = src;
+        this.props.selectMedia({ id: src, src });
+        if (platform !== this.state.platform) {
+            this.state.platform = platform;
+            this.state.options = newOptions;
+        }
+    }
+
+    /**
+     * Utility method, called by the MediaDialog component.
+     */
+    static createElements(selectedMedia) {
+        return selectedMedia.map(video => {
+            const template = document.createElement('template');
+            template.innerHTML = qweb.render('web_editor.videoWrapper', { src: video.src });
+            return template.content.firstChild;
+        });
+    }
+}
+VideoSelector.mediaSpecificClasses = ['media_iframe_video'];
+VideoSelector.tagNames = ['IFRAME', 'DIV'];
+VideoSelector.template = 'web_editor.VideoSelector';
+VideoSelector.components = {
+    VideoOption,
+};
+VideoSelector.defaultProps = {
+    vimeoPreviewIds: [],
+    isForBgVideo: false,
+};
diff --git a/addons/web_editor/static/src/components/media_dialog/video_selector.xml b/addons/web_editor/static/src/components/media_dialog/video_selector.xml
new file mode 100644
index 00000000000..474bb327aa0
--- /dev/null
+++ b/addons/web_editor/static/src/components/media_dialog/video_selector.xml
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+<div t-name="web_editor.videoWrapper" t-att-data-oe-expression="src">
+    <div class="css_editable_mode_display"/>
+    <div class="media_iframe_video_size" contenteditable="false"/>
+    <iframe t-att-src="src" frameborder="0" contenteditable="false" allowfullscreen="allowfullscreen"/>
+</div>
+
+<t t-name="web_editor.VideoOption" owl="1">
+    <div>
+        <label class="o_switch" t-on-change="props.onChangeOption">
+            <input type="checkbox" t-att-checked="props.value"/><span/>
+            <span t-esc="props.label"/>
+            <span t-if="props.description" class="small text-muted ml-auto" t-esc="props.description"/>
+        </label>
+    </div>
+</t>
+
+<t t-name="web_editor.VideoSelector" owl="1">
+    <form action="#" class="row">
+        <div class="col mt-4 o_video_dialog_form">
+            <div class="form-group mb-2">
+                <label class="col-form-label" for="o_video_text">
+                    <b>Video code </b>(URL or Embed)
+                </label>
+                <div class="text-left">
+                    <small class="text-muted">Accepts <b><i>Youtube</i></b>, <b><i>Vimeo</i></b>, <b><i>Dailymotion</i></b> and <b><i>Youku</i></b> videos</small>
+                </div>
+                <textarea t-model="state.urlInput" class="form-control" id="o_video_text" placeholder="Copy-paste your URL or embed code here" t-on-input="onChangeUrl" t-att-class="{ 'is-valid': state.urlInput and !this.state.errorMessage, 'is-invalid': state.urlInput and this.state.errorMessage }"/>
+            </div>
+            <div t-if="shownOptions.length" class="o_video_dialog_options mt-4">
+                <VideoOption t-foreach="shownOptions" t-as="option" t-key="option.id"
+                    value="option.value"
+                    onChangeOption="() => this.onChangeOption(option.id)"
+                    label="option.label"
+                    description="option.description"/>
+            </div>
+            <t t-if="state.vimeoPreviews.length">
+                <span class="font-weight-bold">Suggestions</span>
+                <div id="video-suggestion" class="mt-4 d-flex flex-wrap mh-75 overflow-auto">
+                    <t t-foreach="state.vimeoPreviews" t-as="vimeoPreview" t-key="vimeoPreview.id">
+                        <div class="o_sample_video w-25 mh-100" t-on-click="() => this.onClickSuggestion(vimeoPreview.src)">
+                            <img class="mw-100 mh-100 p-1" t-att-src="vimeoPreview.thumbnailSrc"/>
+                        </div>
+                    </t>
+                </div>
+            </t>
+        </div>
+        <div class="col-md-6">
+            <div class="o_video_preview p-3">
+                <div t-if="this.state.src and !this.state.errorMessage" class="o_video_dialog_preview_text mb-2">Preview</div>
+                <div class="media_iframe_video">
+                    <div class="media_iframe_video_size"/>
+                    <iframe t-if="this.state.src and !this.state.errorMessage" height="720" width="1280" class="o_video_dialog_iframe" allowfullscreen="allowfullscreen" frameborder="0" t-att-src="this.state.src"/>
+                    <div t-if="this.state.errorMessage" class="alert alert-warning o_video_dialog_iframe mb-2 mt-2" t-esc="this.state.errorMessage"/>
+                </div>
+            </div>
+        </div>
+    </form>
+</t>
+</templates>
diff --git a/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js
index 2ba80a91840..01ea712306f 100644
--- a/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js
+++ b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js
@@ -1,112 +1,36 @@
 /** @odoo-module */
-import Widget from "web.Widget";
-import {qweb} from 'web.core';
 
-export const UploadProgressToast = Widget.extend({
-    xmlDependencies: ['/web_editor/static/src/xml/wysiwyg.xml'],
-    template: 'wysiwyg.widgets.upload.progress_toast',
-    events: {
-        'click .o_notification_close': '_onCloseClick',
-    },
+const { Component, useEffect, useState } = owl;
 
-    /**
-     * @override
-     */
-    init(parent, files) {
-        this._super(...arguments);
-        this.files = files;
-    },
-    /**
-     * @override
-     */
-    start() {
-        this.$progress = $('<div/>');
-        _.each(this.files, (file, index) => {
-            let fileSize = file.size;
-            if (!fileSize) {
-                fileSize = null;
-            } else if (fileSize < 1024) {
-                fileSize = fileSize.toFixed(2) + " bytes";
-            } else if (fileSize < 1048576) {
-                fileSize = (fileSize / 1024).toFixed(2) + " KB";
-            } else {
-                fileSize = (fileSize / 1048576).toFixed(2) + " MB";
+export class ProgressBar extends Component {
+    get progress() {
+        return Math.round(this.props.progress);
+    }
+}
+ProgressBar.template = 'web_editor.ProgressBar';
+
+export class UploadProgressToast extends Component {
+    setup() {
+        this.state = useState({ hide: false });
+
+        useEffect((numberOfFiles) => {
+            if (numberOfFiles) {
+                this.state.hide = false;
             }
+        }, () => [Object.keys(this.props.files).length]);
+    }
 
-            this.$progress.append(qweb.render('wysiwyg.widgets.upload.progressbar', {
-                fileId: index,
-                fileName: file.name,
-                fileSize: fileSize,
-            }));
-        });
-        this.$el.find('.o_notification_content').append(this.$progress);
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Calls a RPC and shows its progress status.
-     *
-     * @public
-     * @param {Number} delay time to wait before closing the toast
-     */
-     close(delay = 0) {
-        window.setTimeout(() => {
-            this.el.querySelector('.fade').classList.remove('show');
-            window.setTimeout(() => {
-                this.destroy();
-            }, 150);
-        }, delay);
-    },
-    /**
-     * Calls a RPC and shows its progress status.
-     *
-     * @param {Object} params regular `_rpc()` parameters
-     * @param {integer} index file index to retrieve its related progress bar
-     * @returns {Promise}
-     */
-    async rpcShowProgress(params, index) {
-        let $progressBar = this.$el.find(`.js_progressbar_${index}`);
-        try {
-            const xhr = new XMLHttpRequest();
-            xhr.upload.addEventListener('progress', ev => {
-                const prcComplete = ev.loaded / ev.total * 100;
-                $progressBar.find('.progress-bar').css({
-                    width: Math.floor(prcComplete) + '%',
-                }).text(prcComplete.toFixed(2) + '%');
-            });
-            xhr.upload.addEventListener('load', function () {
-                // Don't show yet success as backend code only starts now
-                $progressBar.find('.progress-bar').css({width: '100%'}).text('100%');
-            });
-            const attachment = await this._rpc(params, {xhr});
-            $progressBar.find('.fa-spinner, .progress').addClass('d-none');
-            if (attachment.error) {
-                this.hasError = true;
-                $progressBar.find('.js_progressbar_txt .text-danger').removeClass('d-none');
-                $progressBar.find('.js_progressbar_txt .text-danger .o_we_error_text').text(attachment.error);
-            } else {
-                $progressBar.find('.js_progressbar_txt .text-success').removeClass('d-none');
-            }
-            return attachment;
-        } catch (error) {
-            this.hasError = true;
-            $progressBar.find('.fa-spinner, .progress').addClass('d-none');
-            $progressBar.find('.js_progressbar_txt .text-danger').removeClass('d-none');
-            throw error;
+    get show() {
+        if (!this.props.files || !Object.keys(this.props.files).length) {
+            return false;
         }
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    _onCloseClick() {
-        this.close();
-    },
-});
+        return !this.state.hide;
+    }
+}
+UploadProgressToast.defaultProps = {
+    files: {},
+};
+UploadProgressToast.template = 'web_editor.UploadProgressToast';
+UploadProgressToast.components = {
+    ProgressBar
+};
diff --git a/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.scss b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.scss
new file mode 100644
index 00000000000..998ffd9ec92
--- /dev/null
+++ b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.scss
@@ -0,0 +1,9 @@
+.o_upload_progress_toast {
+    font-size: 16px;
+
+    .o_we_progressbar:last-child {
+        hr {
+            display: none;
+        }
+    }
+}
diff --git a/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml
new file mode 100644
index 00000000000..cd9a7479d03
--- /dev/null
+++ b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+<t t-name="web_editor.ProgressBar" owl="1">
+    <small class="text-info d-flex align-items-center mr-2">
+        <span t-if="!props.hasError and !props.uploaded"><i class="fa fa-circle-o-notch fa-spin mr-2"/></span>
+        <span class="font-italic font-weight-bold text-truncate flex-grow-1 mr-2" t-esc="props.name"/>
+        <span class="font-weight-bold text-nowrap" t-esc="props.size"/>
+    </small>
+    <small t-if="props.uploaded or props.hasError" class="d-flex align-items-center mt-1">
+        <span t-if="props.uploaded" class="text-success"><i class="fa fa-check my-1 mr-1"/> File has been uploaded</span>
+        <span t-else="" class="text-danger"><i class="fa fa-times float-left my-1 mr-1"/> <span class="o_we_error_text" t-esc="props.errorMessage ? props.errorMessage : 'File could not be saved'"/></span>
+    </small>
+    <div t-else="" class="progress">
+        <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar" t-attf-style="width: {{this.progress}}%;"><span t-esc="this.progress + '%'"/></div>
+    </div>
+    <hr/>
+</t>
+
+<t t-name="web_editor.UploadProgressToast" owl="1">
+    <div class="o_notification_manager o_upload_progress_toast">
+        <div t-if="show" class="o_notification position-relative show fade mb-2 border border-info bg-white" role="alert" aria-live="assertive" aria-atomic="true">
+            <button type="button" class="close o_notification_close" aria-label="Close" t-on-click="() => this.state.hide = true">
+                <i class="oi oi-close"/>
+            </button>
+            <div class="o_notification_body pl-2 pr-4 py-2">
+                <div class="mr-auto o_notification_content">
+                    <div t-foreach="props.files" t-as="file" t-key="file" class="o_we_progressbar">
+                        <ProgressBar progress="file_value.progress"
+                            errorMessage="file_value.errorMessage"
+                            hasError="file_value.hasError"
+                            name="file_value.name"
+                            uploaded="file_value.uploaded"
+                            size="file_value.size"
+                            id="file_value.id"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</t>
+</templates>
diff --git a/addons/web_editor/static/src/components/upload_progress_toast/upload_service.js b/addons/web_editor/static/src/components/upload_progress_toast/upload_service.js
new file mode 100644
index 00000000000..659f0e8284e
--- /dev/null
+++ b/addons/web_editor/static/src/components/upload_progress_toast/upload_service.js
@@ -0,0 +1,117 @@
+/** @odoo-module **/
+
+import { registry } from '@web/core/registry';
+import { UploadProgressToast } from './upload_progress_toast';
+import { getDataURLFromFile } from 'web.utils';
+
+const { reactive } = owl;
+
+export const AUTOCLOSE_DELAY = 3000;
+
+export const uploadService = {
+    dependencies: ['rpc'],
+    start(env, { rpc }) {
+        let fileId = 0;
+        const filesToUpload = reactive({});
+
+        registry.category('main_components').add('UploadProgressToast', {
+            Component: UploadProgressToast,
+            props: { files: filesToUpload },
+        });
+
+        return {
+            get fileId() {
+                return fileId;
+            },
+
+            addFile(file) {
+                filesToUpload[file.id] = file;
+                return filesToUpload[file.id];
+            },
+
+            deleteFile(fileId) {
+                delete filesToUpload[fileId];
+            },
+
+            incrementId() {
+                fileId++;
+            },
+
+            uploadUrl: async (url, { resModel, resId }, onUploaded) => {
+                const attachment = await rpc('/web_editor/attachment/add_url', {
+                    url,
+                    'res_model': resModel,
+                    'res_id': resId,
+                });
+                await onUploaded(attachment);
+            },
+
+            uploadFiles: async (files, {resModel, resId, isImage}, onUploaded) => {
+                // Upload the smallest file first to block the user the least possible.
+                for (const [index, file] of Array.from(files).sort((a, b) => a.size - b.size).entries()) {
+                    let fileSize = file.size;
+                    if (!fileSize) {
+                        fileSize = null;
+                    } else if (fileSize < 1024) {
+                        fileSize = fileSize.toFixed(2) + " bytes";
+                    } else if (fileSize < 1048576) {
+                        fileSize = (fileSize / 1024).toFixed(2) + " KB";
+                    } else {
+                        fileSize = (fileSize / 1048576).toFixed(2) + " MB";
+                    }
+
+                    const id = ++fileId;
+                    filesToUpload[id] = {
+                        id,
+                        index,
+                        name: file.name,
+                        size: fileSize,
+                        progress: 0,
+                        hasError: false,
+                        uploaded: false,
+                        errorMessage: '',
+                    };
+                }
+
+                await Promise.all(Object.keys(filesToUpload).map(async (fileId, index) => {
+                    const file = filesToUpload[fileId];
+                    const dataURL = await getDataURLFromFile(files[index]);
+                    try {
+                        const xhr = new XMLHttpRequest();
+                        xhr.upload.addEventListener('progress', ev => {
+                            const rpcComplete = ev.loaded / ev.total * 100;
+                            file.progress = rpcComplete;
+                        });
+                        xhr.upload.addEventListener('load', function () {
+                            // Don't show yet success as backend code only starts now
+                            file.progress = 100;
+                        });
+                        const attachment = await rpc('/web_editor/attachment/add_data', {
+                            'name': file.name,
+                            'data': dataURL.split(',')[1],
+                            'res_id': resId,
+                            'res_model': resModel,
+                            'is_image': !!isImage,
+                            'width': 0,
+                            'quality': 0,
+                        }, {xhr});
+                        if (attachment.error) {
+                            file.hasError = true;
+                            file.errorMessage = attachment.error;
+                        } else {
+                            file.uploaded = true;
+                            await onUploaded(attachment);
+                        }
+                        setTimeout(() => delete filesToUpload[file.id], AUTOCLOSE_DELAY);
+                    } catch (error) {
+                        file.hasError = true;
+                        setTimeout(() => delete filesToUpload[file.id], AUTOCLOSE_DELAY);
+                        throw error;
+                    }
+                }));
+            }
+        };
+    },
+};
+
+registry.category('services').add('upload', uploadService);
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 89fe9007001..fcac171b064 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -479,138 +479,6 @@ body:not(.editor_has_snippets) {
 
 // MODALS
 body .modal {
-
-    // SELECT MEDIA
-    .o_select_media_dialog {
-        max-width: 80%;
-
-        .modal-body {
-            .tab-pane {
-                min-height: 300px;
-            }
-
-            .o_we_images > .o_existing_attachment_cell .o_we_media_dialog_img_wrapper {
-                @extend %o-preview-alpha-background;
-
-                &, > img {
-                    width: 100%;
-                }
-            }
-
-            .o_existing_attachment_cell {
-                cursor: pointer;
-                margin: 1px;
-
-                .o_existing_attachment_optimize, .o_existing_attachment_remove {
-                    background-color: rgba(white, 0.4);
-                    opacity: 0;
-                    cursor: pointer;
-                    transition: color 0.2s ease;
-                }
-
-                .o_existing_attachment_optimize {
-                    @include o-position-absolute($top: 0, $left: 0);
-                    border-radius: 0 0 2px 0;
-                }
-
-                .o_existing_attachment_remove {
-                    @include o-position-absolute($top: 0, $right: 0);
-                    z-index: 1;
-                    border-radius: 0 0 0 2px;
-                    &:hover {
-                        color: $o-we-color-danger;
-                    }
-                }
-
-                .o_file_name {
-                    @include o-text-overflow;
-                }
-
-                &:hover {
-                    .o_existing_attachment_optimize, .o_existing_attachment_remove {
-                        opacity: 1;
-                    }
-                    &.o_we_attachment_highlight, .o_we_attachment_highlight {
-                        border-color: $card-border-color;
-                        box-shadow: 0px 0px 2px 2px $card-border-color;
-                    }
-                }
-            }
-
-            .o_we_attachment_selected {
-                @include o-we-active-wrapper($top: 5px, $left: 5px);
-            }
-
-            .o_we_attachment_optimized .badge {
-                position: absolute;
-                bottom: 0;
-                right: 0;
-                margin: 2px;
-            }
-
-            .font-icons-icons {
-                > span {
-                    text-align: center;
-                    font-size: 22px;
-                    margin: 5px;
-                    width: 50px;
-                    height: 50px;
-                    padding: 15px 0; // 0 allows to center properly
-                    cursor: pointer;
-                }
-            }
-
-            #editor-media-image,
-            #editor-media-document {
-                .o_we_url_input {
-                    width: 300px;
-                }
-            }
-
-            // VIDEO TAB
-            #editor-media-video {
-                .o_video_dialog_form {
-                    #o_video_form_group {
-                        position: relative;
-                        width: 100%;
-
-                        > textarea {
-                            width: 100%;
-                            min-height: 95px;
-                            padding-bottom: 25px;
-                            overflow-y: scroll;
-                        }
-                    }
-                }
-
-                #video-preview {
-                    position: relative;
-                    @include o-we-preview-box();
-                    border: none;
-
-                    .media_iframe_video {
-                        width: 100%;
-                    }
-
-                    .o_video_dialog_iframe {
-                        @include o-we-preview-content;
-                        max-width: 100%;
-                        max-height: 100%;
-
-                        &.alert {
-                            animation: fadeInDownSmall 700ms forwards;
-                            margin: 0 auto;
-                        }
-                    }
-                }
-
-                #video-suggestion > .o_sample_video {
-                    cursor: pointer;
-                }
-            }
-        }
-    }
-
     // LINK EDITOR DIALOG COLOR SELECTOR
     .o_link_dialog {
         input.link-style:checked + span::after {
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index cea1c67e49f..2d50cd5a770 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -80,314 +80,6 @@
         </div>
     </form>
 
-    <!-- Media Dialog (allows to choose an img/pictogram/video) -->
-    <div t-name="wysiwyg.widgets.media">
-        <ul class="nav nav-tabs" role="tablist">
-            <li t-if="!widget.options.noImages" class="nav-item"><a t-attf-class="nav-link #{widget.isImageActive() ? 'active' : ''}" id="editor-media-image-tab" data-toggle="tab" href="#editor-media-image" role="tab" aria-controls="editor-media-image" t-att-aria-selected="widget.isImageActive().toString()">Image</a></li>
-            <li t-if="!widget.options.noDocuments" class="nav-item"><a t-attf-class="nav-link #{widget.isDocumentActive() ? 'active' : ''}" id="editor-media-document-tab" data-toggle="tab" href="#editor-media-document" role="tab" aria-controls="editor-media-document" t-att-aria-selected="widget.isDocumentActive().toString()">Document</a></li>
-            <li t-if="!widget.options.noIcons" class="nav-item"><a t-attf-class="nav-link #{widget.isIconActive() ? 'active' : ''}" id="editor-media-icon-tab" data-toggle="tab" href="#editor-media-icon" role="tab" aria-controls="editor-media-icon" t-att-aria-selected="widget.isIconActive().toString()">Pictogram</a></li>
-            <li t-if="!widget.options.noVideos" class="nav-item"><a t-attf-class="nav-link #{widget.isVideoActive() ? 'active' : ''}" id="editor-media-video-tab" data-toggle="tab" href="#editor-media-video" role="tab" aria-controls="editor-media-video" t-att-aria-selected="widget.isVideoActive().toString()">Video</a></li>
-        </ul>
-        <!-- Tab panes -->
-        <div class="tab-content">
-            <div t-if="!widget.options.noImages" t-attf-class="tab-pane fade #{widget.isImageActive() ? 'show active': ''}" id="editor-media-image" role="tabpanel" aria-labelledby="editor-media-image-tab"/>
-            <div t-if="!widget.options.noDocuments" t-attf-class="tab-pane fade #{widget.isDocumentActive() ? 'show active': ''}" id="editor-media-document" role="tabpanel" aria-labelledby="editor-media-document-tab"/>
-            <div t-if="!widget.options.noIcons" t-attf-class="tab-pane fade #{widget.isIconActive() ? 'show active': ''}" id="editor-media-icon" role="tabpanel" aria-labelledby="editor-media-icon-tab"/>
-            <div t-if="!widget.options.noVideos" t-attf-class="tab-pane fade #{widget.isVideoActive() ? 'show active': ''}" id="editor-media-video" role="tabpanel" aria-labelledby="editor-media-video-tab"/>
-        </div>
-    </div>
-
-    <t t-name="wysiwyg.widgets.media.search">
-        <div class="input-group mr-auto">
-            <input type="text" class="form-control o_we_search" t-att-placeholder="searchPlaceholder.trim()"/>
-            <div class="input-group-append">
-                <div class="input-group-text o_we_search_icon">
-                    <i class="fa fa-search" title="Search" role="img" aria-label="Search"/>
-                </div>
-            </div>
-        </div>
-    </t>
-
-    <!-- File choosing part of the Media Dialog -->
-    <t t-name="wysiwyg.widgets.file">
-        <form>
-            <t t-call="wysiwyg.widgets.files.submenu"/>
-            <div class="form-text o_we_error_text"/>
-            <div class="o_we_existing_attachments"/>
-            <div class="mt-4 text-center mx-auto o_we_load_more">
-                <button class="btn btn-primary o_load_more d-none" type="button">Load more...</button>
-                <div class="mt-4 o_load_done_msg d-none">
-                    <span><i>All images have been loaded</i></span>
-                </div>
-            </div>
-        </form>
-    </t>
-
-    <t t-name="wysiwyg.widgets.files.submenu">
-        <div class="form-inline align-items-center py-4">
-            <t t-call="wysiwyg.widgets.media.search"/>
-            <t t-out="0"/>
-
-            <input type="file" class="d-none o_file_input" name="upload" t-att-accept="widget.options.accept" t-att-multiple="widget.options.multiImages &amp;&amp; 'multiple'"/>
-
-            <div class="input-group align-items-center ml-2">
-                <input type="text" class="form-control o_we_url_input o_we_horizontal_collapse o_we_transition_ease" name="url" t-att-placeholder="urlPlaceholder"/>
-                <div class="input-group-append align-items-center">
-                    <button type="button" class="btn btn-secondary o_upload_media_url_button">
-                        <t t-out="addText"/>
-                    </button>
-                    <div class="mx-2">
-                        <span class="o_we_url_success text-success d-none fa fa-lg fa-check" title="The URL seems valid."/>
-                        <span t-if="urlWarningTitle" class="o_we_url_warning text-warning d-none fa fa-lg fa-warning" t-att-title="urlWarningTitle"/>
-                        <span class="o_we_url_error text-danger d-none fa fa-lg fa-times" title="The URL does not seem to work."/>
-                    </div>
-                </div>
-            </div>
-
-            <div class="btn-group">
-                <button type="button" class="btn btn-primary o_upload_media_button">
-                    <t t-out="uploadText"/>
-                </button>
-            </div>
-        </div>
-    </t>
-
-    <t t-name="wysiwyg.widgets.image">
-        <t t-call="wysiwyg.widgets.file">
-            <t t-set="uploadText">Upload an image</t>
-            <t t-set="urlPlaceholder">https://www.odoo.com/logo.png</t>
-            <t t-set="addText">Add URL</t>
-            <t t-set="searchPlaceholder">Search an image</t>
-            <t t-set="urlWarningTitle">Uploaded image's format is not supported. Try with: </t>
-            <t t-set="urlWarningTitle" t-value="urlWarningTitle + widget.IMAGE_EXTENSIONS.join(', ')"/>
-            <div class="d-flex justify-content-start flex-grow-1 ml-2">
-                <div t-attf-class="custom-control custom-switch #{__debug__ and 'd-flex' or 'd-none'} align-items-center mr-2">
-                    <input class="o_we_show_optimized ml-2 custom-control-input" type="checkbox" id="o_we_show_optimized_switch"/>
-                    <label class="custom-control-label" for="o_we_show_optimized_switch">
-                        Show optimized images
-                    </label>
-                </div>
-                <select class="custom-select o_we_search_select d-none">
-                    <option value="all">All</option>
-                    <option value="database">My Images</option>
-                    <option t-if="widget.options.useMediaLibrary" value="media-library">Illustrations</option>
-                </select>
-            </div>
-        </t>
-    </t>
-
-    <t t-name="wysiwyg.widgets.document">
-        <t t-call="wysiwyg.widgets.file">
-            <t t-set="uploadText">Upload a document</t>
-            <t t-set="urlPlaceholder">https://www.odoo.com/mydocument</t>
-            <t t-set="addText">Add document</t>
-            <t t-set="searchPlaceholder">Search a document</t>
-        </t>
-    </t>
-
-    <t t-name="wysiwyg.widgets.image.existing.attachments">
-        <div class="o_we_existing_attachments o_we_images d-flex flex-wrap w-100 justify-content-between align-items-stretch my-0">
-            <t t-if="!widget.hasContent()">
-                <div t-if="widget.needle" class="o_nocontent_help">
-                    <p class="o_empty_folder_image">No images found.</p>
-                    <p class="o_empty_folder_subtitle">You can upload images with the button located in the top left of the screen.</p>
-                </div>
-                <div t-else="" class="o_we_search_prompt">
-                    <h2>Get the perfect image by searching in our library of copyright free photos and illustrations.</h2>
-                </div>
-            </t>
-            <t t-else="">
-                <t t-if="['all', 'database'].includes(widget.searchService)" t-foreach="attachments" t-as="attachment">
-                    <t t-call="wysiwyg.widgets.image.existing.attachment"/>
-                </t>
-                <t t-if="['all', 'media-library'].includes(widget.searchService)" t-foreach="libraryMedia" t-as="media">
-                    <t t-call="wysiwyg.widgets.image.library_media"/>
-                </t>
-                <!-- 20 placeholders is just enough for a 5K screen, change this if ImageWidget.MIN_ROW_HEIGHT changes -->
-                <t t-foreach="20">
-                    <div class="o_we_attachment_placeholder"/>
-                </t>
-            </t>
-        </div>
-    </t>
-
-    <t t-name="wysiwyg.widgets.image.existing.attachment">
-        <t t-set="isOptimized" t-value="!!attachment.original_id"/>
-        <div t-attf-class="o_existing_attachment_cell position-relative bg-light #{isOptimized and 'o_we_attachment_optimized d-none' or ''} align-items-center justify-content-center" t-att-data-id="attachment.id">
-            <t t-call="wysiwyg.widgets.file.existing.remove"/>
-            <div class="o_we_media_dialog_img_wrapper">
-                <img class="img img-fluid o_we_attachment_highlight" t-attf-src="#{attachment.thumbnail_src or attachment.image_src}" t-att-alt="attachment.name" t-att-title="attachment.name"/>
-            </div>
-            <span t-if="isOptimized" class="badge badge-success">Optimized</span>
-        </div>
-    </t>
-
-    <t t-name="wysiwyg.widgets.image.library_media">
-        <div t-attf-class="o_existing_attachment_cell position-relative bg-light align-items-center justify-content-center o_library_media_cell" t-att-data-media-id="media.id">
-            <div class="o_we_media_dialog_img_wrapper">
-                <img class="img img-fluid o_we_attachment_highlight" t-attf-src="#{media.thumbnail_url}" t-att-title="media.tooltip or ''" crossorigin="anonymous"/>
-                <a t-if="media.author" class="o_we_media_author" t-att-href="media.author_link" target="_blank" t-esc="media.author"/>
-            </div>
-        </div>
-    </t>
-
-    <t t-name="wysiwyg.widgets.document.existing.attachments">
-        <div class="o_we_existing_attachments o_we_documents">
-            <div t-if="!attachments.length" class="o_nocontent_help">
-                <p class="o_empty_folder_image">No documents found.</p>
-                <p class="o_empty_folder_subtitle">You can upload documents with the button located in the top left of the screen.</p>
-            </div>
-            <div t-else="" class="row mx-auto">
-                <t t-foreach="attachments" t-as="attachment">
-                    <div class="col-2 o_existing_attachment_cell o_we_attachment_highlight my-2" t-att-data-id="attachment.id">
-                        <t t-call="wysiwyg.widgets.file.existing.remove"/>
-
-                        <div t-att-data-url="attachment.url" role="img" t-att-aria-label="attachment.name" t-att-title="attachment.name" t-att-data-mimetype="attachment.mimetype" t-attf-class="o_image d-flex align-items-center justify-content-center"/>
-                        <small class="o_file_name" t-esc="attachment.name"/>
-                    </div>
-                </t>
-            </div>
-        </div>
-    </t>
-
-    <t t-name="wysiwyg.widgets.file.existing.remove">
-        <t t-set="removeTitle" t-if="attachment.res_model === 'ir.ui.view'">This file is a public view attachment.</t>
-        <t t-set="removeTitle" t-else="">This file is attached to the current record.</t>
-        <i class="fa fa-trash o_existing_attachment_remove p-2" t-att-title="removeTitle" role="img" t-att-aria-label="removeTitle"/>
-    </t>
-
-    <t t-name="wysiwyg.widgets.image.existing.error">
-        <div class="form-text">
-            <p>The image could not be deleted because it is used in the
-               following pages or views:</p>
-            <ul t-as="view" t-foreach="views">
-                <li>
-                    <a t-attf-href="/web#model=ir.ui.view&amp;id=#{view.id}">
-                        <t t-esc="view.name"/>
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </t>
-
-    <t t-name="wysiwyg.widgets.upload.progressbar">
-        <div t-attf-class="o_we_progressbar js_progressbar_#{fileId}">
-            <small class="text-info d-flex align-items-center mr-2">
-                <span><i class="fa fa-circle-o-notch fa-spin mr-2"/></span>
-                <span class="font-italic text-truncate flex-grow-1 mr-2" t-esc="fileName"/>
-                <span class="font-weight-bold text-nowrap" t-esc="fileSize"/>
-            </small>
-            <small class='js_progressbar_txt d-flex align-items-center mt-1'>
-                <span class="text-success d-none"><i class='fa fa-check my-1 mr-1'/> File has been uploaded</span>
-                <span class="text-danger d-none"><i class='fa fa-times my-1 mr-1'/> <span class="o_we_error_text">File could not be saved</span></span>
-            </small>
-            <div class="progress">
-                <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;">0%</div>
-            </div>
-            <hr/>
-        </div>
-    </t>
-    <t t-name="wysiwyg.widgets.upload.progress_toast">
-        <div class="o_notification_manager">
-            <div t-attf-class="o_notification position-relative show fade mb-2 border border-info bg-white" role="alert" aria-live="assertive" aria-atomic="true">
-                <button type="button" class="o_notification_close btn" aria-label="Close" t-on-click="props.close">
-                    <i class="oi oi-close"/>
-                </button>
-                <div class="o_notification_body pl-2 pr-4 py-2">
-                    <div class="mr-auto o_notification_content"/>
-                </div>
-            </div>
-        </div>
-    </t>
-
-    <!-- Icon choosing part of the Media Dialog -->
-    <t t-name="wysiwyg.widgets.font-icons">
-        <form action="#">
-            <div class="form-inline align-items-center py-4">
-                <t t-call="wysiwyg.widgets.media.search">
-                    <t t-set="searchPlaceholder">Search a pictogram</t>
-                </t>
-            </div>
-            <div class="font-icons-icons">
-                <t t-call="wysiwyg.widgets.font-icons.icons">
-                    <t t-set="iconsParser" t-value="widget.iconsParser"/>
-                </t>
-            </div>
-        </form>
-    </t>
-    <t t-name="wysiwyg.widgets.font-icons.icons">
-        <t t-as="data" t-foreach="iconsParser">
-            <span t-foreach="data.cssData" t-as="cssData"
-                t-att-data-id="cssData.names[0]"
-                t-att-title="cssData.names[0]"
-                t-att-aria-label="cssData.names[0]" role="img"
-                t-attf-class="font-icons-icon #{data.base} #{cssData.names[0]}"
-                t-att-data-alias="cssData.names.join(',')"/>
-        </t>
-    </t>
-
-    <!-- Video choosing part of the Media Dialog -->
-    <t t-name="wysiwyg.widgets.video">
-        <form action="#" class="row">
-            <div class="col mt-4 o_video_dialog_form">
-                <div class="form-group mb-2" id="o_video_form_group">
-                    <label class="col-form-label" for="o_video_text">
-                        Video code <small>(URL or Embed)</small>
-                    </label>
-                    <div class="text-left">
-                        <small class="text-muted">Accepts <b><i>Youtube</i></b>, <b><i>Vimeo</i></b>, <b><i>Dailymotion</i></b> and <b><i>Youku</i></b> videos</small>
-                    </div>
-                    <textarea class="form-control" id="o_video_text" placeholder="Copy-paste your URL or embed code here"/>
-                </div>
-                <div class="o_video_dialog_options d-none mt-4">
-                    <div class="o_youtube_option o_vimeo_option o_dailymotion_option">
-                      <label class="o_switch">
-                        <input id="o_video_autoplay" type="checkbox"/><span/>
-                        <span style="margin-right: 8px;">Autoplay</span>
-                        <span class="small text-muted" style="margin-left: auto;">Videos are muted when autoplay is enabled</span>
-                      </label>
-                    </div>
-                    <div class="o_youtube_option o_vimeo_option">
-                        <label class="o_switch"><input id="o_video_loop" type="checkbox"/><span/>Loop</label>
-                    </div>
-                    <div class="o_youtube_option o_dailymotion_option">
-                        <label class="o_switch"><input id="o_video_hide_controls" type="checkbox"/><span/>Hide player controls</label>
-                    </div>
-                    <div class="o_youtube_option">
-                        <label class="o_switch"><input id="o_video_hide_fullscreen" type="checkbox"/><span/>Hide fullscreen button</label>
-                    </div>
-                    <div class="o_youtube_option">
-                        <label class="o_switch"><input id="o_video_hide_yt_logo" type="checkbox"/><span/>Hide Youtube logo</label>
-                    </div>
-                    <div class="o_dailymotion_option">
-                        <label class="o_switch"><input id="o_video_hide_dm_logo" type="checkbox"/><span/>Hide Dailymotion logo</label>
-                    </div>
-                    <div class="o_dailymotion_option">
-                        <label class="o_switch"><input id="o_video_hide_dm_share" type="checkbox"/><span/>Hide sharing button</label>
-                    </div>
-                </div>
-                <t t-if="widget._vimeoPreviewIds || widget._youtubePreviewIds">
-                    <span class="font-weight-bold">Suggestions</span>
-                    <div id="video-suggestion" class="mt-4 d-flex flex-wrap mh-75 overflow-auto">
-                        <t t-foreach="widget._vimeoPreviewIds" t-as="vimeoId">
-                            <div class="o_sample_video w-25 mh-100" t-att-data-vimeo="vimeoId"/>
-                        </t>
-                    </div>
-                </t>
-            </div>
-            <div class="col-md-6">
-                <div id="video-preview" class="p-3">
-                    <div class="o_video_dialog_preview_text small mb-2 d-none">Preview</div>
-                    <div class="media_iframe_video">
-                        <div class="media_iframe_video_size"/>
-                        <iframe class="o_video_dialog_iframe" allowfullscreen="allowfullscreen" frameborder="0" src=""/>
-                    </div>
-                </div>
-            </div>
-        </form>
-    </t>
-
-
     <!-- Link Dialog (allows to choose a style and content for a link on the page) -->
     <div t-name="wysiwyg.widgets.link" class="o_link_dialog">
         <div class="row">
diff --git a/addons/web_unsplash/__manifest__.py b/addons/web_unsplash/__manifest__.py
index 8fd5603f0e0..92bacf949f9 100644
--- a/addons/web_unsplash/__manifest__.py
+++ b/addons/web_unsplash/__manifest__.py
@@ -12,13 +12,16 @@
         ],
     'auto_install': True,
     'assets': {
-        'web_editor.assets_wysiwyg': [
-            'web_unsplash/static/src/services/unsplash_service.js',
-            'web_unsplash/static/src/components/media_dialog/image_selector.js',
-        ],
         'web.assets_frontend': [
             'web_unsplash/static/src/js/unsplash_beacon.js',
         ],
+        'web.assets_backend': [
+            'web_unsplash/static/src/components/media_dialog/*.js',
+            'web_unsplash/static/src/services/unsplash_service.js',
+        ],
+        'web.assets_qweb': [
+            'web_unsplash/static/src/components/*/*.xml',
+        ],
     },
     'license': 'LGPL-3',
 }
diff --git a/addons/web_unsplash/static/src/components/media_dialog/image_selector.js b/addons/web_unsplash/static/src/components/media_dialog/image_selector.js
index 073def5314a..0ab16a9fa99 100644
--- a/addons/web_unsplash/static/src/components/media_dialog/image_selector.js
+++ b/addons/web_unsplash/static/src/components/media_dialog/image_selector.js
@@ -1,269 +1,262 @@
-odoo.define('web_unsplash.image_widgets', function (require) {
-'use strict';
+/** @odoo-module **/
 
-var core = require('web.core');
-var UnsplashAPI = require('unsplash.api');
-var widgetsMedia = require('wysiwyg.widgets.media');
-const {_t} = require('web.core');
+import { patch } from 'web.utils';
+import { MediaDialog, TABS } from '@web_editor/components/media_dialog/media_dialog';
+import { ImageSelector } from '@web_editor/components/media_dialog/image_selector';
+import { useService } from '@web/core/utils/hooks';
+import { uploadService, AUTOCLOSE_DELAY } from '@web_editor/components/upload_progress_toast/upload_service';
 
-var unsplashAPI = null;
+const { useState, Component } = owl;
 
-// Prevent base class from treating unsplash images like regular attachments
-const originalEvents = widgetsMedia.ImageWidget.prototype.events;
-const clickHandler = originalEvents['click .o_existing_attachment_cell'];
-if (!clickHandler) {
-    throw new Error(`Couldn't find a handler for o_existing_attachment_cell clicks.
-The unsplash image widget needs to prevent this handler from executing on unsplash attachments.`);
-}
-_.extend(originalEvents, {
-    'click .o_existing_attachment_cell:not(.o_unsplash_attachment_cell)': clickHandler,
-});
-delete originalEvents['click .o_existing_attachment_cell'];
+class UnsplashCredentials extends Component {
+    setup() {
+        this.state = useState({
+            key: '',
+            appId: '',
+            hasKeyError: this.props.hasCredentialsError,
+            hasAppIdError: this.props.hasCredentialsError,
+        });
+    }
 
-widgetsMedia.ImageWidget.include({
-    xmlDependencies: widgetsMedia.ImageWidget.prototype.xmlDependencies.concat(
-        ['/web_unsplash/static/src/components/media_dialog/image_selector.xml']
-    ),
-    events: _.extend({}, widgetsMedia.ImageWidget.prototype.events, {
-        'click .o_unsplash_attachment_cell[data-imgid]': '_onUnsplashImgClick',
-        'click button.save_unsplash': '_onSaveUnsplashCredentials',
-    }),
-
-    /**
-     * @override
-     */
-    init: function () {
-        this._super.apply(this, arguments);
-
-        this._unsplash = {
-            selectedImages: {},
-            isMaxed: false,
-            query: false,
-            error: false,
-            records: [],
-        };
-
-        // TODO improve this
-        //
-        // This is a `hack` to prevent the UnsplashAPI to be destroyed every
-        // time the media dialog is closed. Indeed, UnsplashAPI has a cache
-        // system to recude unsplash call, it is then better to keep its state
-        // to take advantage from it from one media dialog call to another.
-        //
-        // Unsplash API will either be (it's still being discussed):
-        //  * a service (ideally coming with an improvement to not auto load
-        //    the service)
-        //  * initialized in the website_root (trigger_up)
-        if (unsplashAPI === null) {
-            this.unsplashAPI = new UnsplashAPI(this);
-            unsplashAPI = this.unsplashAPI;
+    submitCredentials() {
+        if (this.state.key === '') {
+            this.state.hasKeyError = true;
+        } else if (this.state.appId === '') {
+            this.state.hasAppIdError = true;
         } else {
-            this.unsplashAPI = unsplashAPI;
-            this.unsplashAPI.setParent(this);
+            this.props.submitCredentials(this.state.key, this.state.appId);
         }
-    },
-    /**
-     * @override
-     */
-    destroy: function () {
-        // TODO See `hack` explained in `init`. This prevent the media dialog destroy
-        //      to destroy unsplashAPI when destroying the children
-        this.unsplashAPI.setParent(undefined);
-        this._super.apply(this, arguments);
+    }
+}
+UnsplashCredentials.template = 'web_unsplash.UnsplashCredentials';
+
+class UnsplashError extends Component {}
+UnsplashError.template = 'web_unsplash.UnsplashError';
+UnsplashError.components = {
+    UnsplashCredentials,
+};
+
+patch(ImageSelector.prototype, 'image_selector_unsplash', {
+    setup() {
+        this._super();
+        this.unsplash = useService('unsplash');
+
+        this.state.unsplashRecords = [];
+        this.state.isFetchingUnsplash = false;
+        this.state.isMaxed = false;
+        this.state.unsplashError = null;
+
+        this.errorMessages = {
+            'key_not_found': {
+                title: this.env._t("Setup Unsplash to access royalty free photos."),
+                subtitle: "",
+            },
+            401: {
+                title: this.env._t("Unauthorized Key"),
+                subtitle: this.env._t("Please check your Unsplash access key and application ID."),
+            },
+            403: {
+                title: this.env._t("Search is temporarily unavailable"),
+                subtitle: this.env._t("The max number of searches is exceeded. Please retry in an hour or extend to a better account."),
+            },
+        };
     },
 
-    // --------------------------------------------------------------------------
-    // Public
-    // --------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _save: async function () {
-        const _super = this._super;
-        const selectedImages = this._unsplash.selectedImages;
-        const imagesCount = Object.keys(selectedImages).length;
-        if (imagesCount) {
-            this.saved = true;
-            await this._setUpProgressToast([{
-                name: imagesCount > 1 ?
-                    _.str.sprintf(_t("Uploading %s '%s' images."), imagesCount, this._unsplash.query) :
-                    _.str.sprintf(_t("Uploading '%s' image."), this._unsplash.query),
-                size: null,
-            }]);
-            const images = await this.uploader.rpcShowProgress({
-                route: '/web_unsplash/attachment/add',
-                params: {
-                    unsplashurls: selectedImages,
-                    res_model: this.options.res_model,
-                    res_id: this.options.res_id,
-                    query: this._unsplash.query,
-                },
-            }, 0);
-            this.uploader.close(3000);
-            this.attachments.push(...images);
-            this.selectedAttachments.push(...images);
+    get canLoadMore() {
+        if (this.state.searchService === 'all') {
+            return this._super() || this.state.needle && !this.state.isMaxed && !this.state.unsplashError;
+        } else if (this.state.searchService === 'unsplash') {
+            return this.state.needle && !this.state.isMaxed && !this.state.unsplashError;
         }
-        return _super.apply(this, arguments);
-    },
-    /**
-     * @override
-     */
-    search: async function (needle) {
-        var self = this;
-        await this._super(...arguments);
-
-        this._unsplash.query = needle;
-        if (!needle) {
-            this._unsplash.records = [];
-            return;
-        }
-
-        await this.unsplashAPI.getImages(needle, this.numberOfAttachmentsToDisplay).then(function (res) {
-            self._unsplash.isMaxed = res.isMaxed;
-            self._unsplash.records = res.images;
-            self._unsplash.error = false;
-        }, function (err) {
-            self._unsplash.error = err;
-        });
-    },
-    /**
-     * @override
-     */
-    hasContent() {
-        if (this.searchService === 'all') {
-            return this._super(...arguments) || (this.unsplashRecords && this.unsplashRecords.length);
-        } else if (this.searchService === 'unsplash') {
-            return (this.unsplashRecords && this.unsplashRecords.length);
-        }
-        return this._super(...arguments);
+        return this._super();
     },
 
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _highlightSelected: function () {
-        this._super.apply(this, arguments);
-
-        const $select = this.$('.o_unsplash_attachment_cell[data-imgid]').filter((i, el) => {
-            return $(el).data('imgid') in this._unsplash.selectedImages;
-        }).addClass('o_we_attachment_selected');
-        return $select;
+    get hasContent() {
+        if (this.state.searchService === 'all') {
+            return this._super() || !!this.state.unsplashRecords.length;
+        } else if (this.state.searchService === 'unsplash') {
+            return !!this.state.unsplashRecords.length;
+        }
+        return this._super();
     },
-    /**
-     * @private
-     */
-    _loadMoreImages: function (forceSearch) {
-        if (!this.$('.o_we_search').val()) {
-            return this._super(forceSearch);
-        }
-        this.numberOfAttachmentsToDisplay += 10;
-        this.search(this.$('.o_we_search').val()).then(() => this._renderThumbnails());
-    },
-    /**
-     * @override
-     */
-    _renderThumbnails: function () {
-        this._super(...arguments);
-        this.$('.unsplash_error').empty();
-        if (!['all', 'unsplash'].includes(this.searchService)) {
-            return;
-        }
-        if (this._unsplash.query && this._unsplash.error) {
-            this.$('.unsplash_error').html(
-                core.qweb.render('web_unsplash.dialog.error.content', {
-                    status: this._unsplash.error,
-                })
-            );
-            return;
-        }
 
-        if (['all', 'unsplash'].includes(this.searchService) && this._unsplash.query && !this._unsplash.isMaxed) {
-            this.$('.o_load_more').removeClass('d-none');
-            this.$('.o_load_done_msg').addClass('d-none');
+    get errorTitle() {
+        if (this.errorMessages[this.state.unsplashError]) {
+            return this.errorMessages[this.state.unsplashError].title;
         }
+        return this.env._t("Something went wrong");
     },
-    /**
-     * @override
-     */
-    _renderExisting: function (attachments) {
-        this.unsplashRecords = this._unsplash.records.map(record => {
-            const url = new URL(record.urls.regular);
-            // In small windows, row height could get quite a bit larger than the min, so we keep some leeway.
-            url.searchParams.set('h', 2 * this.MIN_ROW_HEIGHT);
-            url.searchParams.delete('w');
-            return Object.assign({}, record, {
-                url: url.toString(),
+
+    get errorSubtitle() {
+        if (this.errorMessages[this.state.unsplashError]) {
+            return this.errorMessages[this.state.unsplashError].subtitle;
+        }
+        return this.env._t("Please check your internet connection or contact administrator.");
+    },
+
+    get selectedRecordIds() {
+        return this.props.selectedMedia[this.props.id].filter(media => media.mediaType === 'unsplashRecord').map(({ id }) => id);
+    },
+
+    // It seems that setters are mandatory when patching a component that
+    // extends another component.
+    set canLoadMore(_) {},
+    set hasContent(_) {},
+    set isFetching(_) {},
+    set selectedMediaIds(_) {},
+    set attachmentsDomain(_) {},
+    set errorTitle(_) {},
+    set errorSubtitle(_) {},
+    set selectedRecordIds(_) {},
+
+    async fetchUnsplashRecords(offset) {
+        this.state.isFetchingUnsplash = true;
+        if (!this.state.needle) {
+            return { records: [], isMaxed: false };
+        }
+        try {
+            const { isMaxed, images } = await this.unsplash.getImages(this.state.needle, offset, this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY);
+            this.state.isFetchingUnsplash = false;
+            this.state.unsplashError = false;
+            const records = images.map(record => {
+                const url = new URL(record.urls.regular);
+                // In small windows, row height could get quite a bit larger than the min, so we keep some leeway.
+                url.searchParams.set('h', 2 * this.MIN_ROW_HEIGHT);
+                url.searchParams.delete('w');
+                return Object.assign({}, record, {
+                    url: url.toString(),
+                });
             });
-        });
-        return this._super(...arguments);
-    },
-    /**
-     * @override
-     */
-    _selectAttachement: function (attachment, save) {
-        if (!this.options.multiImages) {
-            this._unsplash.selectedImages = {};
+            return { isMaxed, records };
+        } catch (e) {
+            this.state.isFetchingUnsplash = false;
+            this.state.unsplashError = e;
+            return { records: [], isMaxed: false };
         }
-        this._super(...arguments);
     },
 
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
+    async loadMore(...args) {
+        await this._super(...args);
+        const { records, isMaxed } = await this.fetchUnsplashRecords(this.state.unsplashRecords.length);
+        this.state.unsplashRecords.push(...records);
+        this.state.isMaxed = isMaxed;
+    },
 
-    /**
-     * @private
-     */
-    _onSaveUnsplashCredentials: function () {
-        var self = this;
-        var key = this.$('#accessKeyInput').val().trim();
-        var appId = this.$('#appIdInput').val().trim();
+    async search(...args) {
+        await this._super(...args);
+        await this.searchUnsplash();
+    },
 
-        this.$('#accessKeyInput').toggleClass('is-invalid', !key);
-        this.$('#appIdInput').toggleClass('is-invalid', !appId);
+    async searchUnsplash() {
+        if (!this.state.needle) {
+            this.state.unsplashError = false;
+            this.state.unsplashRecords = [];
+            this.state.isMaxed = false;
+        }
+        const { records, isMaxed } = await this.fetchUnsplashRecords(0);
+        this.state.unsplashRecords = records;
+        this.state.isMaxed = isMaxed;
+    },
 
-        if (key && appId) {
-            if (!this.$el.find('.is-invalid').length) {
-                this._rpc({
-                    route: '/web_unsplash/save_unsplash',
-                    params: {key: key, appId: appId},
-                }).then(function () {
-                    self.unsplashAPI.clientId = key;
-                    self._unsplash.error = false;
-                    self.search(self._unsplash.query).then(() => self._renderThumbnails());
+    async onClickRecord(media) {
+        this.props.selectMedia({ ...media, mediaType: 'unsplashRecord', query: this.state.needle });
+        if (!this.props.multiSelect) {
+            await this.props.save();
+        }
+    },
+
+    async submitCredentials(key, appId) {
+        this.state.unsplashError = null;
+        await this.rpc('/web_unsplash/save_unsplash', { key, appId });
+        await this.searchUnsplash();
+    },
+});
+ImageSelector.components = {
+    ...ImageSelector.components,
+    UnsplashError,
+};
+
+patch(MediaDialog.prototype, 'media_dialog_unsplash', {
+    setup() {
+        this._super();
+
+        this.uploadService = useService('upload');
+    },
+
+    async save() {
+        const _super = this._super.bind(this);
+        const selectedImages = this.selectedMedia[TABS.IMAGES.id];
+        if (selectedImages) {
+            const unsplashRecords = selectedImages.filter(media => media.mediaType === 'unsplashRecord');
+            if (unsplashRecords.length) {
+                await this.uploadService.uploadUnsplashRecords(unsplashRecords, { resModel: this.props.resModel, resId: this.props.resId }, (attachments) => {
+                    this.selectedMedia[TABS.IMAGES.id] = this.selectedMedia[TABS.IMAGES.id].filter(media => media.mediaType !== 'unsplashRecord');
+                    this.selectedMedia[TABS.IMAGES.id] = this.selectedMedia[TABS.IMAGES.id].concat(attachments.map(attachment => ({...attachment, mediaType: 'attachment'})));
                 });
             }
         }
-    },
-    /**
-     * @private
-     */
-    _onUnsplashImgClick: function (ev) {
-        if (this.saved) {
-            // already saved, probably a double click. Ignore.
-            return;
-        }
-        const {imgid, url, downloadUrl, description} = ev.currentTarget.dataset;
-        if (!this.options.multiImages) {
-            this._unsplash.selectedImages = {};
-            this.selectedAttachments = [];
-        }
-        if (imgid in this._unsplash.selectedImages) {
-            delete this._unsplash.selectedImages[imgid];
-        } else {
-            const _1920Url = new URL(url);
-            _1920Url.searchParams.set('w', '1920');
-            this._unsplash.selectedImages[imgid] = {url: _1920Url.href, download_url: downloadUrl, description: description};
-        }
-        this._highlightSelected();
-        if (!this.options.multiImages) {
-            this.trigger_up('save_request');
-        }
+        return _super(...arguments);
     },
 });
+
+patch(uploadService, 'upload_service_unsplash', {
+    start(env, { rpc }) {
+        const service = this._super(...arguments);
+        return {
+            ...service,
+            async uploadUnsplashRecords(records, { resModel, resId }, onUploaded) {
+                service.incrementId();
+                const file = service.addFile({
+                    id: service.fileId,
+                    name: records.length > 1 ?
+                    _.str.sprintf(env._t("Uploading %s '%s' images."), records.length, records[0].query) :
+                    _.str.sprintf(env._t("Uploading '%s' image."), records[0].query),
+                    size: null,
+                    progress: 0,
+                });
+
+                try {
+                    const urls = {};
+                    for (const record of records) {
+                        const _1920Url = new URL(record.urls.regular);
+                        _1920Url.searchParams.set('w', '1920');
+                        urls[record.id] = {
+                            url: _1920Url.href,
+                            download_url: record.links.download_location,
+                            description: record.alt_description,
+                        };
+                    }
+
+                    const xhr = new XMLHttpRequest();
+                    xhr.upload.addEventListener('progress', ev => {
+                        const rpcComplete = ev.loaded / ev.total * 100;
+                        file.progress = rpcComplete;
+                    });
+                    xhr.upload.addEventListener('load', function () {
+                        // Don't show yet success as backend code only starts now
+                        file.progress = 100;
+                    });
+                    const attachments = await rpc('/web_unsplash/attachment/add', {
+                        'res_id': resId,
+                        'res_model': resModel,
+                        'unsplashurls': urls,
+                        'query': records[0].query,
+                    }, {xhr});
+
+                    if (attachments.error) {
+                        file.hasError = true;
+                        file.errorMessage = attachments.error;
+                    } else {
+                        file.uploaded = true;
+                        await onUploaded(attachments);
+                    }
+                    setTimeout(() => service.deleteFile(file.id), AUTOCLOSE_DELAY);
+                } catch (error) {
+                    file.hasError = true;
+                    setTimeout(() => service.deleteFile(file.id), AUTOCLOSE_DELAY);
+                    throw error;
+                }
+            }
+        };
+    }
 });
diff --git a/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml b/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
index 17f2b4c819e..481988ca6e7 100644
--- a/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
+++ b/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
@@ -1,94 +1,77 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
-
-<t t-extend="wysiwyg.widgets.file">
-    <t t-jquery=".o_we_load_more" t-operation="after">
-        <div class="unsplash_error"></div>
-    </t>
-</t>
-<t t-extend="wysiwyg.widgets.image">
-    <t t-jquery="option[value='media-library']" t-operation="after">
-        <option value="unsplash">Photos (via Unsplash)</option>
-    </t>
-</t>
-<t t-extend="wysiwyg.widgets.image.existing.attachments">
-    <t t-jquery="t[t-foreach='libraryMedia']" t-operation="after">
-        <t t-if="['all', 'unsplash'].includes(widget.searchService)" t-foreach="widget.unsplashRecords" t-as="record">
-            <t t-call="web_unsplash.dialog.image.content"/>
-        </t>
-    </t>
-</t>
-
-<t t-name="web_unsplash.dialog.image.content">
-    <div class="o_existing_attachment_cell o_unsplash_attachment_cell position-relative align-items-center justify-content-center bg-light" t-att-data-imgid="record.id" t-att-data-id="record.id" t-att-data-url="record.urls.regular" t-att-data-download-url="record.links.download_location" t-att-data-description="record.alt_description">
-        <img class="img img-fluid o_we_attachment_highlight" t-att-src="record.url" t-att-alt="record.alt_description" style="max-height: 100%;"/>
-        <a class="o_we_media_author" t-att-href="record.user.links.html" target="_blank" t-esc="record.user.name" t-att-title="record.user.name"/>
-    </div>
-</t>
-
-<t t-name="web_unsplash.dialog.error.credentials">
+<t t-name="web_unsplash.UnsplashError" owl="1">
     <div class="alert alert-info w-100">
-        <h4><t t-esc="title"/></h4>
-        <p><t t-esc="subtitle"/></p>
-        <t t-if="showUnsplashSetup">
-            <div class="form-inline">
-                <div class="form-group">
-                    <span>
-                        <a href="https://www.odoo.com/documentation/master/applications/websites/website/optimize/unsplash.html#generate-an-unsplash-access-key" target="_blank">Get an Access key</a>
-                        and paste it here:
-                        <input type="text" class="form-control w-auto" id="accessKeyInput" placeholder="Paste your access key here"/>
-                    </span>
-                </div>
-                <div class="form-group my-md-3">
-                    <span class="ml-xl-1">
-                        and paste
-                        <a href="https://www.odoo.com/documentation/master/applications/websites/website/optimize/unsplash.html#generate-an-unsplash-application-id" target="_blank">Application ID</a>
-                        here:
-                        <input type="text" class="form-control w-auto" id="appIdInput" placeholder="Paste your application ID here"/>
-                    </span>
-                </div>
-                <button type="button" class="btn btn-primary btn-block w-auto ml-2 save_unsplash">Apply</button>
-            </div>
-        </t>
+        <h4><t t-esc="props.title"/></h4>
+        <p><t t-esc="props.subtitle"/></p>
+        <UnsplashCredentials t-if="props.showCredentials" submitCredentials="props.submitCredentials" hasCredentialsError="props.hasCredentialsError"/>
     </div>
 </t>
 
-<t t-name="web_unsplash.dialog.error.content">
-    <div class="d-flex mt-2 unsplash_error">
-        <t t-call="web_unsplash.dialog.error.credentials">
-            <t t-if="status == 'key_not_found'">
-                <t t-set="title">
-                    Setup Unsplash to access royalty free photos.
-                </t>
-                <t t-set="showUnsplashSetup" t-value="true"/>
-            </t>
-            <t t-elif="status == 403">
-                <t t-set="title">
-                    Search is temporarily unavailable
-                </t>
-                <t t-set="subtitle">
-                    The max number of searches is exceeded. Please retry in an hour or extend to a better account.
-                </t>
-            </t>
-            <t t-elif="status == 401">
-                <t t-set="title">
-                    Unauthorized Key
-                </t>
-                <t t-set="subtitle">
-                    Please check your Unsplash access key and application ID.
-                </t>
-                <t t-set="showUnsplashSetup" t-value="true"/>
-            </t>
-            <t t-else="">
-                <t t-set="title">
-                    Something went wrong
-                </t>
-                <t t-set="subtitle">
-                    Please check your internet connection or contact administrator.
-                </t>
-            </t>
-        </t>
+<t t-name="web_unsplash.UnsplashCredentials" owl="1">
+    <div class="form-inline">
+        <div class="form-group">
+            <span>
+                <a href="https://www.odoo.com/documentation/master/applications/websites/website/optimize/unsplash.html#generate-an-unsplash-access-key" target="_blank">Get an Access key</a>
+                and paste it here:
+                <input type="text"
+                    class="form-control w-auto"
+                    id="accessKeyInput"
+                    placeholder="Paste your access key here"
+                    t-model="state.key"
+                    t-on-input="() => this.state.hasKeyError = false"
+                    t-att-class="{ 'is-invalid': state.hasKeyError }"/>
+            </span>
+        </div>
+        <div class="form-group my-md-3">
+            <span class="ml-xl-1">
+                and paste
+                <a href="https://www.odoo.com/documentation/master/applications/websites/website/optimize/unsplash.html#generate-an-unsplash-application-id" target="_blank">Application ID</a>
+                here:
+                <input type="text"
+                class="form-control w-auto"
+                placeholder="Paste your application ID here"
+                t-model="state.appId"
+                t-on-input="() => this.state.hasAppIdError = false"
+                t-att-class="{ 'is-invalid': state.hasAppIdError }"/>
+            </span>
+        </div>
+        <button type="button" class="btn btn-primary btn-block w-auto ml-2 save_unsplash" t-on-click="() => this.submitCredentials()">Apply</button>
     </div>
 </t>
 
+<t t-inherit="web_editor.ImagesListTemplate" t-inherit-mode="extension">
+    <xpath expr="//t[@t-foreach='state.libraryMedia']" position="after">
+        <t t-if="['all', 'unsplash'].includes(state.searchService)" t-foreach="state.unsplashRecords" t-as="record" t-key="record.id">
+            <AutoResizeImage src="record.url"
+                author="record.user.name"
+                authorLink="record.user.links.html"
+                name="record.user.name"
+                title="record.user.name"
+                altDescription="record.alt_description"
+                selected="this.selectedRecordIds.includes(record.id)"
+                onImageClick="() => this.onClickRecord(record)"
+                minRowHeight="MIN_ROW_HEIGHT"/>
+        </t>
+    </xpath>
+</t>
+
+<t t-inherit="web_editor.FileSelector" t-inherit-mode="extension">
+    <xpath expr="//div[@name='load_more_attachments']" position="after">
+        <div t-if="state.unsplashError" class="d-flex mt-2 unsplash_error">
+            <UnsplashError
+                title="errorTitle"
+                subtitle="errorSubtitle"
+                showCredentials="['key_not_found', 401].includes(state.unsplashError)"
+                submitCredentials="(key, appId)  => this.submitCredentials(key, appId)"
+                hasCredentialsError="state.unsplashError === 401"/>
+        </div>
+    </xpath>
+</t>
+
+<t t-inherit="web_editor.FileSelectorControlPanel" t-inherit-mode="extension">
+    <xpath expr="//option[@value='media-library']" position="after">
+        <option t-att-selected="props.searchService === 'unsplash'" value="unsplash">Photos (via Unsplash)</option>
+    </xpath>
+</t>
 </templates>
diff --git a/addons/web_unsplash/static/src/services/unsplash_service.js b/addons/web_unsplash/static/src/services/unsplash_service.js
index 473a9f37d37..8ae9c09d550 100644
--- a/addons/web_unsplash/static/src/services/unsplash_service.js
+++ b/addons/web_unsplash/static/src/services/unsplash_service.js
@@ -1,88 +1,53 @@
-odoo.define('unsplash.api', function (require) {
-'use strict';
+/** @odoo-module **/
 
-var Class = require('web.Class');
-var Mixins = require('web.mixins');
-var ServicesMixin = require('web.ServicesMixin');
+import { registry } from '@web/core/registry';
 
-var UnsplashCore = Class.extend(Mixins.EventDispatcherMixin, ServicesMixin, {
-    /**
-     * @constructor
-     */
-    init: function (parent) {
-        Mixins.EventDispatcherMixin.init.call(this, arguments);
-        this.setParent(parent);
+export const unsplashService = {
+    dependencies: ['rpc'],
+    async start(env, { rpc }) {
+        const _cache = {};
+        return {
+            async getImages(query, offset = 0, pageSize = 30) {
+                const from = offset;
+                const to = offset + pageSize;
+                let cachedData = _cache[query];
 
-        this._cache = {};
-        this.clientId = false;
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Gets unsplash images from query string.
-     *
-     * @param {String} query search terms
-     * @param {Integer} pageSize number of image to display per page
-     * @returns {Promise}
-     */
-    getImages: function (query, pageSize) {
-        var from = 0;
-        var to = pageSize;
-        var cachedData = this._cache[query];
-
-        if (cachedData && (cachedData.images.length >= to || (cachedData.totalImages !== 0 && cachedData.totalImages < to))) {
-            return Promise.resolve({ images: cachedData.images.slice(from, to), isMaxed: to > cachedData.totalImages });
-        }
-        return this._fetchImages(query).then(function (cachedData) {
-            return { images: cachedData.images.slice(from, to), isMaxed: to > cachedData.totalImages };
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Fetches images from unsplash and stores it in cache
-     *
-     * @param {String} query search terms
-     * @returns {Promise}
-     * @private
-     */
-    _fetchImages: function (query) {
-        if (!this._cache[query]) {
-            this._cache[query] = {
-                images: [],
-                maxPages: 0,
-                totalImages: 0,
-                pageCached: 0
-            };
-        }
-        var cachedData = this._cache[query];
-        var payload = {
-            query: query,
-            page: cachedData.pageCached + 1,
-            per_page: 30, // max size from unsplash API
+                if (cachedData && (cachedData.images.length >= to || (cachedData.totalImages !== 0 && cachedData.totalImages < to))) {
+                    return { images: cachedData.images.slice(from, to), isMaxed: to > cachedData.totalImages };
+                }
+                cachedData = await this._fetchImages(query);
+                return { images: cachedData.images.slice(from, to), isMaxed: to > cachedData.totalImages };
+            },
+            /**
+             * Fetches images from unsplash and stores it in cache
+             */
+            async _fetchImages(query) {
+                if (!_cache[query]) {
+                    _cache[query] = {
+                        images: [],
+                        maxPages: 0,
+                        totalImages: 0,
+                        pageCached: 0
+                    };
+                }
+                const cachedData = _cache[query];
+                const payload = {
+                    query: query,
+                    page: cachedData.pageCached + 1,
+                    per_page: 30, // max size from unsplash API
+                };
+                const result = await rpc('/web_unsplash/fetch_images', payload);
+                if (result.error) {
+                    return Promise.reject(result.error);
+                }
+                cachedData.pageCached++;
+                cachedData.images.push(...result.results);
+                cachedData.maxPages = result.total_pages;
+                cachedData.totalImages = result.total;
+                return cachedData;
+            },
         };
-        return this._rpc({
-            route: '/web_unsplash/fetch_images',
-            params: payload,
-        }).then(function (result) {
-            if (result.error) {
-                return Promise.reject(result.error);
-            }
-            cachedData.pageCached++;
-            cachedData.images.push.apply(cachedData.images, result.results);
-            cachedData.maxPages = result.total_pages;
-            cachedData.totalImages = result.total;
-            return cachedData;
-        });
     },
-});
+};
 
-return UnsplashCore;
-
-});
+registry.category('services').add('unsplash', unsplashService);
diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index e97c47929e9..d57be3b2fc3 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -183,6 +183,7 @@
             'website/static/src/js/tours/tour_utils.js',
             'website/static/src/components/fullscreen_indication/fullscreen_indication.js',
             'website/static/src/components/fullscreen_indication/fullscreen_indication.scss',
+            'website/static/src/components/media_dialog/image_selector.js',
             'website/static/src/systray_items/*.js',
             'website/static/src/systray_items/*.scss',
             'website/static/src/js/new_content_form.js',
@@ -229,7 +230,6 @@
             'website/static/src/snippets/s_process_steps/options.js',
             'website/static/src/js/editor/wysiwyg.js',
             'website/static/src/js/editor/widget_link.js',
-            'website/static/src/components/media_dialog/image_selector.js',
             'website/static/src/js/widgets/link_popover_widget.js',
         ],
         'website.assets_editor_frontend': [
diff --git a/addons/website/static/src/components/dialog/seo.js b/addons/website/static/src/components/dialog/seo.js
index 6f1406597db..b5045cd6a28 100644
--- a/addons/website/static/src/components/dialog/seo.js
+++ b/addons/website/static/src/components/dialog/seo.js
@@ -1,6 +1,7 @@
 /** @odoo-module **/
 
 import { useService, useListener } from '@web/core/utils/hooks';
+import { MediaDialog } from '@web_editor/components/media_dialog/media_dialog';
 import { WebsiteDialog } from './dialog';
 
 const { Component, useState, reactive, onMounted, onWillStart } = owl;
@@ -23,6 +24,7 @@ MetaImage.template = 'website.MetaImage';
 class ImageSelector extends Component {
     setup() {
         this.website = useService('website');
+        this.dialogs = useService('dialog');
 
         this.seoContext = useState(seoContext);
 
@@ -88,6 +90,33 @@ class ImageSelector extends Component {
         });
         this.seoContext.metaImage = src;
     }
+
+    openMediaDialog() {
+        this.dialogs.add(MediaDialog, {
+            // onlyImages: true,
+            resModel: 'ir.ui.view',
+            useMediaLibrary: true,
+            save: image => {
+                let existingImage;
+                this.state.images = this.state.images.map(img => {
+                    img.active = false;
+                    if (img.src === image.src) {
+                        existingImage = img;
+                        img.active = true;
+                    }
+                    return img;
+                });
+                if (!existingImage) {
+                    this.state.images.push({
+                        src: image.src,
+                        active: true,
+                        custom: true,
+                    });
+                }
+                this.seoContext.metaImage = image.src;
+            },
+        });
+    }
 }
 ImageSelector.template = 'website.ImageSelector';
 ImageSelector.components = {
diff --git a/addons/website/static/src/components/dialog/seo.xml b/addons/website/static/src/components/dialog/seo.xml
index 0e86e402f3b..a9db65c9b66 100644
--- a/addons/website/static/src/components/dialog/seo.xml
+++ b/addons/website/static/src/components/dialog/seo.xml
@@ -16,7 +16,7 @@
                     <t t-foreach="state.images" t-as="image" t-key="image.src">
                         <MetaImage active="image.active" custom="image.custom" src="image.src" selectImage="src => this.selectImage(src)"/>
                     </t>
-                    <div class="o_meta_img_upload m-1" title="Click to choose more images">
+                    <div class="o_meta_img_upload m-1" title="Click to choose more images" t-on-click="openMediaDialog">
                         <i class="fa fa-upload"/>
                     </div>
                 </div>
diff --git a/addons/website/static/src/components/media_dialog/image_selector.js b/addons/website/static/src/components/media_dialog/image_selector.js
index 900f53068ba..e8421b106cc 100644
--- a/addons/website/static/src/components/media_dialog/image_selector.js
+++ b/addons/website/static/src/components/media_dialog/image_selector.js
@@ -1,14 +1,13 @@
-odoo.define('website.widgets.media', function (require) {
-'use strict';
+/** @odoo-module **/
 
-const {ImageWidget} = require('wysiwyg.widgets.media');
+import { patch } from '@web/core/utils/patch';
+import { ImageSelector } from '@web_editor/components/media_dialog/image_selector';
 
-ImageWidget.include({
-    _getAttachmentsDomain() {
-        const domain = this._super(...arguments);
+patch(ImageSelector.prototype, 'media_dialog_website', {
+    get attachmentsDomain() {
+        const domain = this._super();
         domain.push('|', ['url', '=', false], '!', ['url', '=like', '/web/image/website.%']);
         domain.push(['key', '=', false]);
         return domain;
     }
 });
-});

From 85990768592cbdefbb178b5ffa38c1e29b9eeb87 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Tue, 14 Jun 2022 10:12:40 +0200
Subject: [PATCH 48/88] [IMP] web_editor, website, *: use new media dialog

*: mass_mailing

See merge commit for more information.

task-2687506
---
 .../static/src/snippets/s_rating/options.js   | 32 +++----
 .../components/media_dialog/media_dialog.js   | 53 ++++++++++-
 .../components/media_dialog/search_media.js   |  9 +-
 .../static/src/js/editor/snippets.options.js  | 39 ++++----
 .../static/src/js/wysiwyg/widgets/widgets.js  |  2 -
 .../static/src/js/wysiwyg/wysiwyg.js          | 93 ++++++++-----------
 .../src/snippets/s_image_gallery/options.js   | 36 ++++---
 .../static/src/snippets/s_rating/options.js   | 33 +++----
 8 files changed, 170 insertions(+), 127 deletions(-)

diff --git a/addons/mass_mailing/static/src/snippets/s_rating/options.js b/addons/mass_mailing/static/src/snippets/s_rating/options.js
index ed6e493bccc..fc798052a5c 100644
--- a/addons/mass_mailing/static/src/snippets/s_rating/options.js
+++ b/addons/mass_mailing/static/src/snippets/s_rating/options.js
@@ -1,7 +1,8 @@
 odoo.define('mass_mailing.s_rating_options', function (require) {
 'use strict';
 
-const weWidgets = require('wysiwyg.widgets');
+const { ComponentWrapper } = require('web.OwlCompatibility');
+const { MediaDialogWrapper } = require('@web_editor/components/media_dialog/media_dialog');
 const options = require('web_editor.snippets.options');
 
 options.registry.Rating = options.Class.extend({
@@ -37,16 +38,15 @@ options.registry.Rating = options.Class.extend({
      * @see this.selectClass for parameters
      */
     customIcon: async function (previewMode, widgetValue, params) {
-        return new Promise(resolve => {
-            const dialog = new weWidgets.MediaDialog(
-                this,
-                {noImages: true, noDocuments: true, noVideos: true, mediaWidth: 1920},
-                $('<i/>')
-            );
-            this._saving = false;
-            dialog.on('save', this, function (attachments) {
-                this._saving = true;
-                const customClass = 'fa ' + attachments.className;
+        const media = document.createElement('i');
+        media.className = params.customActiveIcon === 'true' ? this.faClassActiveCustomIcons : this.faClassInactiveCustomIcons;
+        const dialog = new ComponentWrapper(this, MediaDialogWrapper, {
+            noImages: true,
+            noDocuments: true,
+            noVideos: true,
+            media,
+            save: icon => {
+                const customClass = icon.className;
                 const $activeIcons = this.$target.find('.s_rating_active_icons > i');
                 const $inactiveIcons = this.$target.find('.s_rating_inactive_icons > i');
                 const $icons = params.customActiveIcon === 'true' ? $activeIcons : $inactiveIcons;
@@ -57,15 +57,9 @@ options.registry.Rating = options.Class.extend({
                 this.$target[0].dataset.inactiveCustomIcon = this.faClassInactiveCustomIcons;
                 this.$target[0].dataset.icon = 'custom';
                 this.iconType = 'custom';
-                resolve();
-            });
-            dialog.on('closed', this, function () {
-                if (!this._saving) {
-                    resolve();
-                }
-            });
-            dialog.open();
+            }
         });
+        dialog.mount(document.body);
     },
     /**
      * Sets the number of active icons.
diff --git a/addons/web_editor/static/src/components/media_dialog/media_dialog.js b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
index a8093cd2250..82df7ee24d9 100644
--- a/addons/web_editor/static/src/components/media_dialog/media_dialog.js
+++ b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
@@ -1,13 +1,14 @@
 /** @odoo-module **/
 
 import { useService } from '@web/core/utils/hooks';
+import { useWowlService } from '@web/legacy/utils';
 import { Dialog } from '@web/core/dialog/dialog';
 import { ImageSelector } from './image_selector';
 import { DocumentSelector } from './document_selector';
 import { IconSelector } from './icon_selector';
 import { VideoSelector } from './video_selector';
 
-const { useState } = owl;
+const { Component, useState, onRendered, xml } = owl;
 
 export const TABS = {
     IMAGES: {
@@ -45,6 +46,8 @@ export class MediaDialog extends Dialog {
         this.tabs = [];
         this.selectedMedia = useState({});
 
+        this.initialIconClasses = [];
+
         this.addTabs();
 
         this.state = useState({
@@ -110,6 +113,7 @@ export class MediaDialog extends Dialog {
                 if (mediaFont) {
                     const selectedIcon = mediaFont.icons.find(icon => icon.names.some(name => classes.includes(name)));
                     if (selectedIcon) {
+                        this.initialIconClasses.push(...selectedIcon.names);
                         this.selectMedia(selectedIcon, TABS.ICONS.id);
                     }
                 }
@@ -139,7 +143,29 @@ export class MediaDialog extends Dialog {
     async save() {
         const selectedMedia = this.selectedMedia[this.state.activeTab];
         if (selectedMedia.length) {
-            const elements = await TABS[this.state.activeTab].Component.createElements(selectedMedia);
+            const elements = await TABS[this.state.activeTab].Component.createElements(selectedMedia, { rpc: this.rpc, orm: this.orm });
+            elements.forEach(element => {
+                if (this.props.media) {
+                    element.classList.add(...this.props.media.classList);
+                    const style = this.props.media.getAttribute('style');
+                    if (style) {
+                        element.setAttribute('style', style);
+                    }
+                    if (this.props.media.dataset.shape) {
+                        element.dataset.shape = this.props.media.dataset.shape;
+                    }
+                    if (this.props.media.dataset.shapeColors) {
+                        element.dataset.shapeColors = this.props.media.dataset.shapeColors;
+                    }
+                }
+                element.classList.add(...TABS[this.state.activeTab].Component.mediaSpecificClasses);
+                for (const otherTab of Object.keys(TABS).filter(key => key !== this.state.activeTab)) {
+                    element.classList.remove(...TABS[otherTab].Component.mediaSpecificClasses);
+                }
+                element.classList.remove(...this.initialIconClasses);
+                element.classList.remove('o_modified_image_to_save');
+                element.classList.remove('oe_edited_link');
+            });
             if (this.props.multiImages) {
                 this.props.save(elements);
             } else {
@@ -151,6 +177,29 @@ export class MediaDialog extends Dialog {
 }
 MediaDialog.bodyTemplate = 'web_editor.MediaDialogBody';
 MediaDialog.footerTemplate = 'web_editor.MediaDialogFooter';
+MediaDialog.defaultProps = {
+    useMediaLibrary: true,
+};
 MediaDialog.components = {
     ...Object.keys(TABS).map(key => TABS[key].Component),
 };
+
+export class MediaDialogWrapper extends Component {
+    setup() {
+        this.dialogs = useWowlService('dialog');
+
+        onRendered(() => {
+            this.dialogs.add(MediaDialog, {
+                ...this.props,
+                close: () => {
+                    if (this.props.close) {
+                        this.props.close();
+                    }
+                    this.destroy();
+
+                },
+            });
+        });
+    }
+}
+MediaDialogWrapper.template = xml``;
diff --git a/addons/web_editor/static/src/components/media_dialog/search_media.js b/addons/web_editor/static/src/components/media_dialog/search_media.js
index 0b99df7f1f7..ab05905bebb 100644
--- a/addons/web_editor/static/src/components/media_dialog/search_media.js
+++ b/addons/web_editor/static/src/components/media_dialog/search_media.js
@@ -1,12 +1,15 @@
 /** @odoo-module **/
 
-import { throttle } from '@web/core/utils/timing';
+import { debounce } from '@web/core/utils/timing';
 
-const { Component, xml } = owl;
+const { Component, onWillUnmount, xml } = owl;
 
 export class SearchMedia extends Component {
     setup() {
-        this.search = throttle((ev) => this.props.search(ev.target.value), 1000);
+        this.search = debounce((ev) => this.props.search(ev.target.value), 1000);
+        onWillUnmount(() => {
+            this.search.cancel();
+        });
     }
 }
 SearchMedia.template = xml`
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 739a8f4a372..a7e6e6123a5 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1,6 +1,8 @@
 odoo.define('web_editor.snippets.options', function (require) {
 'use strict';
 
+const { ComponentWrapper } = require('web.OwlCompatibility');
+const { MediaDialogWrapper } = require('@web_editor/components/media_dialog/media_dialog');
 var core = require('web.core');
 const {ColorpickerWidget} = require('web.Colorpicker');
 const Dialog = require('web.Dialog');
@@ -1650,10 +1652,10 @@ const MediapickerUserValueWidget = UserValueWidget.extend({
      * @param {boolean} [videos] whether videos should be available
      *   default: false
      */
-    _openDialog(el, {images = false, videos = false}) {
+    _openDialog(el, {images = false, videos = false, save}) {
         el.src = this._value;
         const $editable = this.$target.closest('.o_editable');
-        const mediaDialog = new weWidgets.MediaDialog(this, {
+        const mediaDialogWrapper = new ComponentWrapper(this, MediaDialogWrapper, {
             noImages: !images,
             noVideos: !videos,
             noIcons: true,
@@ -1663,8 +1665,10 @@ const MediapickerUserValueWidget = UserValueWidget.extend({
                 '312451183', '415226028', '367762632', '340475898', '374265101', '370467553'],
             'res_model': $editable.data('oe-model'),
             'res_id': $editable.data('oe-id'),
-        }, el).open();
-        return mediaDialog;
+            save,
+            media: el,
+        });
+        return mediaDialogWrapper.mount(this.el);
     },
 
     //--------------------------------------------------------------------------
@@ -1703,13 +1707,15 @@ const ImagepickerUserValueWidget = MediapickerUserValueWidget.extend({
     _onEditMedia(ev) {
         // Need a dummy element for the media dialog to modify.
         const dummyEl = document.createElement('img');
-        const dialog = this._openDialog(dummyEl, {images: true});
-        dialog.on('save', this, data => {
-            // Accessing the value directly through dummyEl.src converts the url to absolute,
-            // using getAttribute allows us to keep the url as it was inserted in the DOM
-            // which can be useful to compare it to values stored in db.
-            this._value = dummyEl.getAttribute('src');
-            this._onUserValueChange();
+        this._openDialog(dummyEl, {
+            images: true,
+            save: (media) => {
+                // Accessing the value directly through dummyEl.src converts the url to absolute,
+                // using getAttribute allows us to keep the url as it was inserted in the DOM
+                // which can be useful to compare it to values stored in db.
+                this._value = media.getAttribute('src');
+                this._onUserValueChange();
+            }
         });
     },
 });
@@ -1725,11 +1731,12 @@ const VideopickerUserValueWidget = MediapickerUserValueWidget.extend({
     _onEditMedia(ev) {
         // Need a dummy element for the media dialog to modify.
         const dummyEl = document.createElement('iframe');
-        const dialog = this._openDialog(dummyEl, {videos: true});
-        dialog.on('save', this, data => {
-            this._value = data.bgVideoSrc;
-            this._onUserValueChange();
-        });
+        this._openDialog(dummyEl, {
+            videos: true,
+            save: (media) => {
+                this._value = media.querySelector('iframe').src;
+                this._onUserValueChange();
+        }});
     },
 });
 
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js b/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js
index e70fe9ec9fb..4cd99e20832 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js
@@ -3,7 +3,6 @@ odoo.define('wysiwyg.widgets', function (require) {
 
 var Dialog = require('wysiwyg.widgets.Dialog');
 var AltDialog = require('wysiwyg.widgets.AltDialog');
-var MediaDialog = require('wysiwyg.widgets.MediaDialog');
 var LinkDialog = require('wysiwyg.widgets.LinkDialog');
 var LinkTools = require('wysiwyg.widgets.LinkTools');
 var ImageCropWidget = require('wysiwyg.widgets.ImageCropWidget');
@@ -15,7 +14,6 @@ var media = require('wysiwyg.widgets.media');
 return {
     Dialog: Dialog,
     AltDialog: AltDialog,
-    MediaDialog: MediaDialog,
     LinkDialog: LinkDialog,
     LinkTools: LinkTools,
     ImageCropWidget: ImageCropWidget,
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 7475886e40c..ca7e05286ce 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -1,6 +1,9 @@
 odoo.define('web_editor.wysiwyg', function (require) {
 'use strict';
 
+const { ComponentWrapper } = require('web.OwlCompatibility');
+const { MediaDialogWrapper } = require('@web_editor/components/media_dialog/media_dialog');
+const { saveVideos, videoSpecificClasses } = require('@web_editor/components/media_dialog/video_selector');
 const dom = require('web.dom');
 const core = require('web.core');
 const session = require('web.session');
@@ -37,7 +40,6 @@ const setSelection = OdooEditorLib.setSelection;
 const endPos = OdooEditorLib.endPos;
 
 var id = 0;
-const faZoomClassRegex = RegExp('fa-[0-9]x');
 const basicMediaSelector = 'img, .fa, .o_image, .media_iframe_video';
 // (see isImageSupportedForStyle).
 const mediaSelector = basicMediaSelector.split(',').map(s => `${s}:not([data-oe-xpath])`).join(',');
@@ -128,9 +130,13 @@ const Wysiwyg = Widget.extend({
         }
 
         const getYoutubeVideoElement = async (url) => {
-            const videoWidget = new weWidgets.VideoWidget(this, undefined, {});
-            const src = (await videoWidget.createVideoNode(url)).$video.attr('src');
-            return videoWidget.getWrappedIframe(src)[0];
+            const { embed_url: src } = await this._rpc({
+                route: '/web_editor/video_url/data',
+                params: { video_url: url },
+            });
+            const [savedVideo] = saveVideos([{src}]);
+            savedVideo.classList.add(...videoSpecificClasses);
+            return savedVideo;
         };
 
         this.odooEditor = new OdooEditor(this.$editable[0], Object.assign({
@@ -256,16 +262,9 @@ const Wysiwyg = Widget.extend({
         this.$editable.on('dblclick', mediaSelector, function () {
             self.showTooltip = false;
             const $el = $(this);
-            let params = {node: $el};
+            let params = {node: this};
             $el.selectElement();
 
-            if ($el.is('.fa')) {
-                // save layouting classes from icons to not break the page if you edit an icon
-                params.htmlClass = [...$el[0].classList].filter((className) => {
-                    return !className.startsWith('fa') || faZoomClassRegex.test(className);
-                }).join(' ');
-            }
-
             if (!$el.parent().hasClass('o_stars')) {
                 self.openMediaDialog(params);
             }
@@ -1166,14 +1165,7 @@ const Wysiwyg = Widget.extend({
      */
     openMediaDialog(params = {}, MediaDialog = weWidgets.MediaDialog) {
         const sel = this.odooEditor.document.getSelection();
-        const fontawesomeIcon = getInSelection(this.odooEditor.document, '.fa');
-        if (fontawesomeIcon && sel.toString().trim() === "") {
-            params.node = $(fontawesomeIcon);
-            // save layouting classes from icons to not break the page if you edit an icon
-            params.htmlClass = [...fontawesomeIcon.classList].filter((className) => {
-                return !className.startsWith('fa') || faZoomClassRegex.test(className);
-            }).join(' ');
-        }
+
         if (!sel.rangeCount) {
             return;
         }
@@ -1183,36 +1175,29 @@ const Wysiwyg = Widget.extend({
         // selection when the modal is closed.
         const restoreSelection = preserveCursor(this.odooEditor.document);
 
-        const $node = $(params.node);
-        // We need to keep track of FA icon because media.js will _clear those classes
-        const wasFontAwesome = $node.hasClass('fa');
         const $editable = $(OdooEditorLib.closestElement(range.startContainer, '.o_editable'));
         const model = $editable.data('oe-model');
         const field = $editable.data('oe-field');
         const type = $editable.data('oe-type');
 
-        const mediaParams = Object.assign({
-            res_model: model,
-            res_id: $editable.data('oe-id'),
+        this.mediaDialogWrapper = new ComponentWrapper(this, MediaDialogWrapper, {
+            resModel: model,
+            resId: $editable.data('oe-id'),
             domain: $editable.data('oe-media-domain'),
-            useMediaLibrary: field && (model === 'ir.ui.view' && field === 'arch' || type === 'html'),
-        }, this.options.mediaModalParams, params);
-        const mediaDialog = new MediaDialog(this, mediaParams, $node);
-        mediaDialog.open();
-
-        mediaDialog.on('save', this, this._onMediaDialogSave.bind(this, {
-            $node: $node,
-            wasFontAwesome: wasFontAwesome,
-            htmlClass: params.htmlClass,
-            restoreSelection: restoreSelection,
-        }));
-        mediaDialog.on('closed', this, function () {
-            // if the mediaDialog content has been saved
-            // the previous selection in not relevant anymore
-            if (mediaDialog.destroyAction !== 'save') {
-                restoreSelection();
-            }
+            useMediaLibrary: !!(field && (model === 'ir.ui.view' && field === 'arch' || type === 'html')),
+            media: params.node,
+            save: this._onMediaDialogSave.bind(this, {
+                node: params.node,
+                restoreSelection: restoreSelection,
+            }),
+            close: () => restoreSelection(),
+            ...this.options.mediaModalParams,
+            ...params,
         });
+
+        // The wysiwyg can be instanciated inside an iframe. The dialog
+        // component is mounted on the global document.
+        return this.mediaDialogWrapper.mount(document.body);
     },
     /**
      * Sets custom CSS Variables on the snippet menu element.
@@ -1243,23 +1228,28 @@ const Wysiwyg = Widget.extend({
      * @param {Element} element provided by the dialog
      */
     _onMediaDialogSave: function (params, element) {
+        params.restoreSelection();
         if (!element) {
             return;
         }
-        // restore saved html classes
-        if (params.htmlClass) {
-            element.className += " " + params.htmlClass;
-        }
-        params.restoreSelection();
-        if (wysiwygUtils.isImg(params.$node[0]) || params.wasFontAwesome) {
-            params.$node.replaceWith(element);
+
+        if (params.node) {
+            params.node.replaceWith(element);
             this.odooEditor.unbreakableStepUnactive();
             this.odooEditor.historyStep();
-        } else if (element) {
+        } else {
             const fragment = new DocumentFragment();
             fragment.append(element);
             return this.odooEditor.execCommand('insertFragment', fragment);
         }
+
+        if (this.snippetsMenu) {
+            this.snippetsMenu.activateSnippet($(element)).then(() => {
+                if (element.tagName === 'IMG') {
+                    $(element).trigger('image_changed');
+                }
+            });
+        }
     },
 
     //--------------------------------------------------------------------------
@@ -2222,7 +2212,6 @@ odoo.define('web_editor.widget', function (require) {
 'use strict';
     return {
         Dialog: require('wysiwyg.widgets.Dialog'),
-        MediaDialog: require('wysiwyg.widgets.MediaDialog'),
         LinkDialog: require('wysiwyg.widgets.LinkDialog'),
     };
 });
diff --git a/addons/website/static/src/snippets/s_image_gallery/options.js b/addons/website/static/src/snippets/s_image_gallery/options.js
index 8afb5c1f95a..74f68657a2c 100644
--- a/addons/website/static/src/snippets/s_image_gallery/options.js
+++ b/addons/website/static/src/snippets/s_image_gallery/options.js
@@ -1,8 +1,9 @@
 odoo.define('website.s_image_gallery_options', function (require) {
 'use strict';
 
+const { MediaDialogWrapper } = require('@web_editor/components/media_dialog/media_dialog');
+const { ComponentWrapper } = require('web.OwlCompatibility');
 var core = require('web.core');
-var weWidgets = require('wysiwyg.widgets');
 var options = require('web_editor.snippets.options');
 
 var _t = core._t;
@@ -87,29 +88,36 @@ options.registry.gallery = options.Class.extend({
     addImages: function (previewMode) {
         const $images = this.$('img');
         var $container = this.$('> .container, > .container-fluid, > .o_container_small');
-        var dialog = new weWidgets.MediaDialog(this, {multiImages: true, onlyImages: true, mediaWidth: 1920});
-        var lastImage = _.last(this._getImages());
-        var index = lastImage ? this._getIndex(lastImage) : -1;
-        return new Promise(resolve => {
-            dialog.on('save', this, function (attachments) {
-                for (var i = 0; i < attachments.length; i++) {
-                    $('<img/>', {
+        const lastImage = _.last(this._getImages());
+        let index = lastImage ? this._getIndex(lastImage) : -1;
+        const dialog = new ComponentWrapper(this, MediaDialogWrapper, {
+            multiImages: true,
+            onlyImages: true,
+            save: images => {
+                let $newImageToSelect;
+                for (const image of images) {
+                    const $img = $('<img/>', {
                         class: $images.length > 0 ? $images[0].className : 'img img-fluid d-block ',
-                        src: attachments[i].image_src,
+                        src: image.src,
                         'data-index': ++index,
-                        alt: attachments[i].description || '',
+                        alt: image.alt || '',
                         'data-name': _t('Image'),
                         style: $images.length > 0 ? $images[0].style.cssText : '',
                     }).appendTo($container);
+                    if (!$newImageToSelect) {
+                        $newImageToSelect = $img;
+                    }
                 }
-                if (attachments.length > 0) {
+                if (images.length > 0) {
                     this.mode('reset', this.getMode());
                     this.trigger_up('cover_update');
+                    // Triggers the re-rendering of the thumbnail
+                    $newImageToSelect.trigger('image_changed');
+
                 }
-            });
-            dialog.on('closed', this, () => resolve());
-            dialog.open();
+            },
         });
+        dialog.mount(this.el);
     },
     /**
      * Allows to change the number of columns when displaying images with a
diff --git a/addons/website/static/src/snippets/s_rating/options.js b/addons/website/static/src/snippets/s_rating/options.js
index b24d7daf9f6..782664233c8 100644
--- a/addons/website/static/src/snippets/s_rating/options.js
+++ b/addons/website/static/src/snippets/s_rating/options.js
@@ -1,7 +1,9 @@
 odoo.define('website.s_rating_options', function (require) {
 'use strict';
 
-const weWidgets = require('wysiwyg.widgets');
+const { ComponentWrapper } = require('web.OwlCompatibility');
+const { MediaDialogWrapper } = require('@web_editor/components/media_dialog/media_dialog');
+
 const options = require('web_editor.snippets.options');
 
 options.registry.Rating = options.Class.extend({
@@ -37,16 +39,15 @@ options.registry.Rating = options.Class.extend({
      * @see this.selectClass for parameters
      */
     customIcon: async function (previewMode, widgetValue, params) {
-        return new Promise(resolve => {
-            const dialog = new weWidgets.MediaDialog(
-                this,
-                {noImages: true, noDocuments: true, noVideos: true, mediaWidth: 1920},
-                $('<i/>')
-            );
-            this._saving = false;
-            dialog.on('save', this, function (attachments) {
-                this._saving = true;
-                const customClass = 'fa ' + attachments.className;
+        const media = document.createElement('i');
+        media.className = params.customActiveIcon === 'true' ? this.faClassActiveCustomIcons : this.faClassInactiveCustomIcons;
+        const dialog = new ComponentWrapper(this, MediaDialogWrapper, {
+            noImages: true,
+            noDocuments: true,
+            noVideos: true,
+            media,
+            save: icon => {
+                const customClass = icon.className;
                 const $activeIcons = this.$target.find('.s_rating_active_icons > i');
                 const $inactiveIcons = this.$target.find('.s_rating_inactive_icons > i');
                 const $icons = params.customActiveIcon === 'true' ? $activeIcons : $inactiveIcons;
@@ -57,15 +58,9 @@ options.registry.Rating = options.Class.extend({
                 this.$target[0].dataset.inactiveCustomIcon = this.faClassInactiveCustomIcons;
                 this.$target[0].dataset.icon = 'custom';
                 this.iconType = 'custom';
-                resolve();
-            });
-            dialog.on('closed', this, function () {
-                if (!this._saving) {
-                    resolve();
-                }
-            });
-            dialog.open();
+            }
         });
+        dialog.mount(this.el);
     },
     /**
      * Sets the number of active icons.

From 9df44ecade99a0d243b172389b9d2f481eaec0e3 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Fri, 22 Apr 2022 12:19:37 +0200
Subject: [PATCH 49/88] [FIX] test_website, web_editor: adapt tests to new
 dialog

See merge commit for more information.

task-2687506
---
 .../test_website/data/test_website_data.xml   |  3 -
 .../static/src/js/mock_image_widget.js        | 41 --------
 .../tests/tours/image_upload_progress.js      | 94 ++++++++++++++-----
 .../tests/test_image_upload_progress.py       |  4 +-
 .../components/media_dialog/media_dialog.js   |  1 +
 .../static/src/js/wysiwyg/widgets/widgets.js  | 10 --
 6 files changed, 71 insertions(+), 82 deletions(-)
 delete mode 100644 addons/test_website/static/src/js/mock_image_widget.js

diff --git a/addons/test_website/data/test_website_data.xml b/addons/test_website/data/test_website_data.xml
index 13458ee61ae..3217fcf42f1 100644
--- a/addons/test_website/data/test_website_data.xml
+++ b/addons/test_website/data/test_website_data.xml
@@ -122,9 +122,6 @@
             <field name="key">test_website.test_image_progress</field>
             <field name="arch" type="xml">
                 <t t-call="website.layout">
-                    <t t-set="head">
-                        <script defer="defer" type="text/javascript" src="/test_website/static/src/js/mock_image_widget.js"></script>
-                    </t>
                     <div id="wrap" class="oe_structure oe_empty"/>
                 </t>
             </field>
diff --git a/addons/test_website/static/src/js/mock_image_widget.js b/addons/test_website/static/src/js/mock_image_widget.js
deleted file mode 100644
index 9e2afd1c2a0..00000000000
--- a/addons/test_website/static/src/js/mock_image_widget.js
+++ /dev/null
@@ -1,41 +0,0 @@
-odoo.define('test_website.mock_image_widgets', function (require) {
-'use strict';
-
-const widgetsMedia = require('wysiwyg.widgets.media');
-
-widgetsMedia.FileWidget.include({
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    _onFileInputChange: function () {
-        function getFileFromB64(fileData) {
-            const binary = atob(fileData[2]);
-            let len = binary.length;
-            const arr = new Uint8Array(len);
-            while (len--) {
-                arr[len] = binary.charCodeAt(len);
-            }
-            return new File([arr], fileData[1], {type: fileData[0]});
-        }
-
-        let files = [
-            getFileFromB64(['image/png', 'image.png', "iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAApElEQVR42u3RAQ0AAAjDMO5fNCCDkC5z0HTVrisFCBABASIgQAQEiIAAAQJEQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAQECBAgAgJEQIAIyPcGFY7HnV2aPXoAAAAASUVORK5CYII="]),
-            getFileFromB64(['image/jpeg', 'image.jpeg', "/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAA0NDQ0ODQ4QEA4UFhMWFB4bGRkbHi0gIiAiIC1EKjIqKjIqRDxJOzc7STxsVUtLVWx9aWNpfZeHh5e+tb75+f8BDQ0NDQ4NDhAQDhQWExYUHhsZGRseLSAiICIgLUQqMioqMipEPEk7NztJPGxVS0tVbH1pY2l9l4eHl761vvn5///CABEIAEsASwMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAABv/aAAgBAQAAAACHAAAAAAAAAAAAAAAAH//EABUBAQEAAAAAAAAAAAAAAAAAAAAH/9oACAECEAAAAKYAAAB//8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/2gAIAQMQAAAAngAAAf/EABQQAQAAAAAAAAAAAAAAAAAAAGD/2gAIAQEAAT8ASf/EABQRAQAAAAAAAAAAAAAAAAAAAED/2gAIAQIBAT8AT//EABQRAQAAAAAAAAAAAAAAAAAAAED/2gAIAQMBAT8AT//Z"]),
-            getFileFromB64(['image/vnd.microsoft.icon', 'icon.ico', "AAABAAEAAQEAAAEAIAAwAAAAFgAAACgAAAABAAAAAgAAAAEAIAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAA=="]),
-            getFileFromB64(['image/webp', 'image.webp', "UklGRhwAAABXRUJQVlA4TBAAAAAvE8AEAAfQhuh//wMR0f8A"]),
-        ];
-
-        if (!this.options.multiImages) {
-            if (this.media.classList.contains('o_mock_show_error')) {
-                files = [files[2]];
-            } else {
-                files = [files[0]];
-            }
-        }
-        this.$fileInput = [{'files': files}];
-        return this._super(...arguments);
-    }
-});
-});
diff --git a/addons/test_website/static/tests/tours/image_upload_progress.js b/addons/test_website/static/tests/tours/image_upload_progress.js
index 4976752aeb9..2449a54353c 100644
--- a/addons/test_website/static/tests/tours/image_upload_progress.js
+++ b/addons/test_website/static/tests/tours/image_upload_progress.js
@@ -3,34 +3,76 @@ odoo.define('test_website.image_upload_progress', function (require) {
 
 const tour = require('web_tour.tour');
 
+const { FileSelectorControlPanel } = require('@web_editor/components/media_dialog/file_selector');
+const { patch, unpatch } = require('web.utils');
+
+let patchWithError = false;
+const patchMediaDialog = () => patch(FileSelectorControlPanel.prototype, 'test_website.mock_image_widgets', {
+    async onChangeFileInput() {
+        const getFileFromB64 = (fileData) => {
+            const binary = atob(fileData[2]);
+            let len = binary.length;
+            const arr = new Uint8Array(len);
+            while (len--) {
+                arr[len] = binary.charCodeAt(len);
+            }
+            return new File([arr], fileData[1], {type: fileData[0]});
+        };
+
+        let files = [
+            getFileFromB64(['image/vnd.microsoft.icon', 'icon.ico', "AAABAAEAAQEAAAEAIAAwAAAAFgAAACgAAAABAAAAAgAAAAEAIAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAA=="]),
+            getFileFromB64(['image/webp', 'image.webp', "UklGRhwAAABXRUJQVlA4TBAAAAAvE8AEAAfQhuh//wMR0f8A"]),
+            getFileFromB64(['image/png', 'image.png', "iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAApElEQVR42u3RAQ0AAAjDMO5fNCCDkC5z0HTVrisFCBABASIgQAQEiIAAAQJEQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAQECBAgAgJEQIAIyPcGFY7HnV2aPXoAAAAASUVORK5CYII="]),
+            getFileFromB64(['image/jpeg', 'image.jpeg', "/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAA0NDQ0ODQ4QEA4UFhMWFB4bGRkbHi0gIiAiIC1EKjIqKjIqRDxJOzc7STxsVUtLVWx9aWNpfZeHh5e+tb75+f8BDQ0NDQ4NDhAQDhQWExYUHhsZGRseLSAiICIgLUQqMioqMipEPEk7NztJPGxVS0tVbH1pY2l9l4eHl761vvn5///CABEIAEsASwMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAABv/aAAgBAQAAAACHAAAAAAAAAAAAAAAAH//EABUBAQEAAAAAAAAAAAAAAAAAAAAH/9oACAECEAAAAKYAAAB//8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/2gAIAQMQAAAAngAAAf/EABQQAQAAAAAAAAAAAAAAAAAAAGD/2gAIAQEAAT8ASf/EABQRAQAAAAAAAAAAAAAAAAAAAED/2gAIAQIBAT8AT//EABQRAQAAAAAAAAAAAAAAAAAAAED/2gAIAQMBAT8AT//Z"]),
+        ];
+
+        if (!this.props.multiImages) {
+            if (patchWithError) {
+                files = [files[0]];
+            } else {
+                files = [files[2]];
+            }
+        }
+        await this.props.uploadFiles(files);
+    }
+});
+
+const unpatchMediaDialog = () => unpatch(FileSelectorControlPanel.prototype, 'test_website.mock_image_widgets');
+
 const setupSteps = [{
+    content: "reload to load patch",
+    trigger: ".o_website_preview",
+    run: () => {
+        patchMediaDialog();
+    },
+}, {
     content: "enter edit mode",
-    trigger: "a[data-action=edit]"
+    trigger: ".o_edit_website_container a"
 }, {
     content: "drop a snippet",
     trigger: "#oe_snippets .oe_snippet[name='Text - Image'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
-    extra_trigger: "body.editor_enable.editor_has_snippets",
-    moveTrigger: ".oe_drop_zone",
-    run: "drag_and_drop #wrap",
+    extra_trigger: "body.editor_has_snippets",
+    moveTrigger: "iframe .oe_drop_zone",
+    run: "drag_and_drop iframe #wrap",
 }, {
     content: "drop a snippet",
     trigger: "#oe_snippets .oe_snippet[name='Image Gallery'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
-    extra_trigger: "body.editor_enable.editor_has_snippets",
+    extra_trigger: "body.editor_has_snippets",
     moveTrigger: ".oe_drop_zone",
-    run: "drag_and_drop #wrap",
+    run: "drag_and_drop iframe #wrap",
 }];
 
 const formatErrorMsg = "format is not supported. Try with: .gif, .jpe, .jpeg, .jpg, .png, .svg";
 
 tour.register('test_image_upload_progress', {
-    url: '/test_image_progress',
+    url: `/web#action=website.website_preview&path=${encodeURI('/test_image_progress')}`,
     test: true
 }, [
     ...setupSteps,
     // 1. Check multi image upload
     {
         content: "click on dropped snippet",
-        trigger: "#wrap .s_image_gallery .img",
+        trigger: "iframe #wrap .s_image_gallery .img",
     }, {
         content: "click on add images to open image dialog (in multi mode)",
         trigger: 'we-customizeblock-option [data-add-images]',
@@ -38,11 +80,9 @@ tour.register('test_image_upload_progress', {
         content: "manually trigger input change",
         trigger: ".o_select_media_dialog .o_upload_media_button",
         run: () => {
-            const fileInput = $('.o_select_media_dialog .o_file_input').first();
             // This will trigger upload of dummy files for test purpose, as a
             // test can't select local files to upload into the input.
-            // See `mock_image_widgets`.
-            fileInput.change();
+            document.body.querySelector('.o_select_media_dialog .o_file_input').dispatchEvent(new Event('change'));
         },
     }, {
         content: "check upload progress bar is correctly shown (1)",
@@ -85,20 +125,17 @@ tour.register('test_image_upload_progress', {
     // 2. Check success single image upload
     {
         content: "click on dropped snippet",
-        trigger: "#wrap .s_text_image .img",
+        trigger: "iframe #wrap .s_text_image .img",
     }, {
         content: "click on replace media to open image dialog",
         trigger: 'we-customizeblock-option [data-replace-media]',
     }, {
         content: "manually trigger input change",
         trigger: ".o_select_media_dialog .o_upload_media_button",
-        in_modal: false,
         run: () => {
-            const fileInput = $('.o_select_media_dialog .o_file_input').first();
             // This will trigger upload of dummy files for test purpose, as a
             // test can't select local files to upload into the input.
-            // See `mock_image_widgets`.
-            fileInput.change();
+            document.body.querySelector('.o_select_media_dialog .o_file_input').dispatchEvent(new Event('change'));
         },
     }, {
         content: "check upload progress bar is correctly shown",
@@ -126,7 +163,7 @@ tour.register('test_image_upload_progress', {
     // 3. Check error single image upload
     {
         content: "click on dropped snippet",
-        trigger: "#wrap .s_text_image .img",
+        trigger: "iframe #wrap .s_text_image .img",
     }, {
         content: "click on replace media to open image dialog",
         trigger: 'we-customizeblock-option [data-replace-media]',
@@ -135,18 +172,19 @@ tour.register('test_image_upload_progress', {
         trigger: ".o_select_media_dialog .o_upload_media_button",
         in_modal: false,
         run: () => {
-            $("#wrap .s_text_image .img").addClass('o_mock_show_error');
-            const fileInput = $('.o_select_media_dialog .o_file_input').first();
+            patchWithError = true;
             // This will trigger upload of dummy files for test purpose, as a
             // test can't select local files to upload into the input.
-            // See `mock_image_widgets`.
-            fileInput.change();
+            document.body.querySelector('.o_select_media_dialog .o_file_input').dispatchEvent(new Event('change'));
+
         },
     }, {
         content: "check upload progress bar is correctly shown",
         trigger: `.o_we_progressbar:contains('icon.ico'):contains('${formatErrorMsg}')`,
         in_modal: false,
-        run: function () {}, // it's a check
+        run: function () {
+            patchWithError = false;
+        },
     }, {
         content: "there should only have one notification toaster",
         trigger: ".o_notification",
@@ -156,20 +194,21 @@ tour.register('test_image_upload_progress', {
             if (notificationCount !== 1) {
                 console.error("There should be one noficiation toaster opened, and only one.");
             }
+            unpatchMediaDialog();
         }
     },
 ]);
 
 
 tour.register('test_image_upload_progress_unsplash', {
-    url: '/test_image_progress',
+    url: `/web#action=website.website_preview&path=${encodeURI('/test_image_progress')}`,
     test: true
 }, [
     ...setupSteps,
     // 1. Check multi image upload
     {
         content: "click on dropped snippet",
-        trigger: "#wrap .s_image_gallery .img",
+        trigger: "iframe #wrap .s_image_gallery .img",
     }, {
         content: "click on replace media to open image dialog",
         trigger: 'we-customizeblock-option [data-replace-media]',
@@ -179,7 +218,7 @@ tour.register('test_image_upload_progress_unsplash', {
         run: "text fox",
     }, {
         content: "click on unsplash result", // note that unsplash is mocked
-        trigger: ".o_unsplash_attachment_cell"
+        trigger: "img[alt~=fox]"
     }, {
         content: "check that the upload progress bar is correctly shown",
         // ensure it is there so we are sure next step actually test something
@@ -193,7 +232,10 @@ tour.register('test_image_upload_progress_unsplash', {
         in_modal: false,
     }, {
         content: "unsplash image (mocked to logo) should have been used",
-        trigger: "#wrap .s_image_gallery .img[data-original-src^='/unsplash/HQqIOc8oYro/fox']",
+        trigger: "iframe #wrap .s_image_gallery .img[data-original-src^='/unsplash/HQqIOc8oYro/fox']",
+        run: () => {
+            unpatchMediaDialog();
+        },
     },
 ]);
 
diff --git a/addons/test_website/tests/test_image_upload_progress.py b/addons/test_website/tests/test_image_upload_progress.py
index 4d03faa6a59..b77071b8086 100644
--- a/addons/test_website/tests/test_image_upload_progress.py
+++ b/addons/test_website/tests/test_image_upload_progress.py
@@ -13,7 +13,7 @@ from odoo import http
 class TestImageUploadProgress(odoo.tests.HttpCase):
 
     def test_01_image_upload_progress(self):
-        self.start_tour("/test_image_progress", 'test_image_upload_progress', login="admin")
+        self.start_tour("/web", 'test_image_upload_progress', login="admin")
 
     def test_02_image_upload_progress_unsplash(self):
         BASE_URL = self.base_url()
@@ -53,4 +53,4 @@ class TestImageUploadProgress(odoo.tests.HttpCase):
         media_library_search.routing_type = 'json'
         Web_Editor.media_library_search = http.route(['/web_editor/media_library_search'], type='json', auth="user", website=True)(media_library_search)
 
-        self.start_tour("/", 'test_image_upload_progress_unsplash', login="admin")
+        self.start_tour("/web", 'test_image_upload_progress_unsplash', login="admin")
diff --git a/addons/web_editor/static/src/components/media_dialog/media_dialog.js b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
index 82df7ee24d9..b43b1961624 100644
--- a/addons/web_editor/static/src/components/media_dialog/media_dialog.js
+++ b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
@@ -79,6 +79,7 @@ export class MediaDialog extends Dialog {
                 resModel: this.props.resModel,
                 resId: this.props.resId,
                 media: this.props.media,
+                multiImages: this.props.multiImages,
                 selectedMedia: this.selectedMedia,
                 selectMedia: (...args) => this.selectMedia(...args, tab.id, additionalProps.multiSelect),
                 save: this.save.bind(this),
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js b/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js
index 4cd99e20832..a6461870c8b 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js
@@ -9,8 +9,6 @@ var ImageCropWidget = require('wysiwyg.widgets.ImageCropWidget');
 const LinkPopoverWidget = require('@web_editor/js/wysiwyg/widgets/link_popover_widget')[Symbol.for("default")];
 const {ColorpickerDialog} = require('web.Colorpicker');
 
-var media = require('wysiwyg.widgets.media');
-
 return {
     Dialog: Dialog,
     AltDialog: AltDialog,
@@ -19,13 +17,5 @@ return {
     ImageCropWidget: ImageCropWidget,
     LinkPopoverWidget: LinkPopoverWidget,
     ColorpickerDialog: ColorpickerDialog,
-
-    MediaWidget: media.MediaWidget,
-    SearchableMediaWidget: media.SearchableMediaWidget,
-    FileWidget: media.FileWidget,
-    ImageWidget: media.ImageWidget,
-    DocumentWidget: media.DocumentWidget,
-    IconWidget: media.IconWidget,
-    VideoWidget: media.VideoWidget,
 };
 });

From caefcb8590301a0ebbe947a875003b33ce7d537a Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Fri, 18 Mar 2022 17:29:47 +0100
Subject: [PATCH 50/88] [IMP] website: convert configurator to client action

Before this commit, the configurator was its own frontend application.

With the website edition UI moved to the backend, it makes also sense to
move the configurator to the backend, as a client action, so that it is
easy to trigger it after installing a website (or the website module),
and returning to the website_preview client action after having
completed it.

This commit adds a new color_palettes.scss file, added in the
assets_backend, that will print the values of the color palettes (so
that some js can handle it). For now, it is needed for the configurator
and the editor. It will probably need to be reviewed later to not put
everything in backend assets.

See merge commit for more information.

task-2687506
---
 addons/website/__manifest__.py                |  12 +-
 addons/website/controllers/main.py            |   5 +-
 addons/website/models/ir_module_module.py     |   2 -
 addons/website/models/website.py              |   6 +-
 .../configurator/configurator.js              | 501 +++++++++---------
 .../configurator/configurator.xml             |  20 +-
 .../static/src/js/theme_preview_form.js       |   5 +-
 .../static/src/scss/color_palettes.scss       |  56 ++
 .../static/src/scss/website.wysiwyg.scss      |  57 --
 .../views/website_configurator_templates.xml  |  15 -
 .../views/website_navbar_templates.xml        |  18 -
 addons/website/views/website_views.xml        |   8 +-
 12 files changed, 321 insertions(+), 384 deletions(-)
 create mode 100644 addons/website/static/src/scss/color_palettes.scss
 delete mode 100644 addons/website/views/website_configurator_templates.xml
 delete mode 100644 addons/website/views/website_navbar_templates.xml

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index d57be3b2fc3..065a3ac4be1 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -33,8 +33,6 @@
         'data/digest_data.xml',
         'views/assets.xml',
         'views/website_templates.xml',
-        'views/website_navbar_templates.xml',
-        'views/website_configurator_templates.xml',
         'views/snippets/snippets.xml',
         'views/snippets/s_title.xml',
         'views/snippets/s_cover.xml',
@@ -156,6 +154,7 @@
             'website/static/tests/tours/**/*',
         ],
         'web.assets_backend': [
+            'website/static/src/scss/color_palettes.scss',
             'website/static/src/scss/view_hierarchy.scss',
             'website/static/src/scss/website.backend.scss',
             'website/static/src/scss/website_visitor_views.scss',
@@ -291,15 +290,6 @@
             'http://test.external.link/javascript2.js',
             'http://test.external.link/style2.css',
         ],
-        'website.website_configurator_assets_js': [
-            '/website/static/src/client_actions/configurator/configurator.js',
-        ],
-        'website.website_configurator_assets_scss': [
-            ('include', 'web.assets_frontend'),
-            '/website/static/src/client_actions/configurator/configurator.scss',
-            '/website/static/src/scss/website.theme_install.scss',
-            '/website/static/src/scss/website.wysiwyg.scss'
-        ]
     },
     'license': 'LGPL-3',
 }
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index 201e7fd22e4..cc77158065f 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -255,7 +255,10 @@ class Website(Home):
             return request.redirect('/')
         if request.env.lang != website_id.default_lang_id.code:
             return request.redirect('/%s%s' % (website_id.default_lang_id.url_code, request.httprequest.path))
-        return request.render('website.website_configurator')
+        action_url = '/web#action=website.website_configurator&menu_id=%s' % request.env.ref('website.menu_website_configuration').id
+        if step > 1:
+            action_url += '&step=' + str(step)
+        return request.redirect(action_url)
 
     @http.route(['/website/social/<string:social>'], type='http', auth="public", website=True, sitemap=False)
     def social(self, social, **kwargs):
diff --git a/addons/website/models/ir_module_module.py b/addons/website/models/ir_module_module.py
index 1073b384d81..4423ef5bf92 100644
--- a/addons/website/models/ir_module_module.py
+++ b/addons/website/models/ir_module_module.py
@@ -382,8 +382,6 @@ class IrModuleModule(models.Model):
             result = active_todo.action_launch()
         else:
             result = website.button_go_website(mode_edit=True)
-        if result.get('url') and 'enable_editor' in result['url']:
-            result['url'] = result['url'].replace('enable_editor', 'with_loader=1&enable_editor')
         return result
 
     def button_remove_theme(self):
diff --git a/addons/website/models/website.py b/addons/website/models/website.py
index 3404bef64a4..0552b19ee8f 100644
--- a/addons/website/models/website.py
+++ b/addons/website/models/website.py
@@ -319,7 +319,7 @@ class Website(models.Model):
     def configurator_init(self):
         r = dict()
         company = self.get_current_website().company_id
-        configurator_features = self.env['website.configurator.feature'].with_context(lang=self.get_current_website().default_lang_id.code).search([])
+        configurator_features = self.env['website.configurator.feature'].search([])
         r['features'] = [{
             'id': feature.id,
             'name': feature.name,
@@ -333,7 +333,7 @@ class Website(models.Model):
         if company.logo and company.logo != company._get_logo():
             r['logo'] = company.logo.decode('utf-8')
         try:
-            result = self._website_api_rpc('/api/website/1/configurator/industries', {'lang': self.get_current_website().default_lang_id.code})
+            result = self._website_api_rpc('/api/website/1/configurator/industries', {'lang': self.env.context.get('lang')})
             r['industries'] = result['industries']
         except AccessError as e:
             logger.warning(e.args[0])
@@ -591,7 +591,7 @@ class Website(models.Model):
 
         images = custom_resources.get('images', {})
         set_images(images)
-        return url
+        return {'url': url, 'website_id': website.id}
 
     # ----------------------------------------------------------
     # Page Management
diff --git a/addons/website/static/src/client_actions/configurator/configurator.js b/addons/website/static/src/client_actions/configurator/configurator.js
index 20b18f0cb36..c273626cd47 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.js
+++ b/addons/website/static/src/client_actions/configurator/configurator.js
@@ -2,14 +2,13 @@
 
 import utils from 'web.utils';
 import weUtils from 'web_editor.utils';
-import session from 'web.session';
 import {ColorpickerWidget} from 'web.Colorpicker';
-import {_t, _lt} from 'web.core';
+import {_t, _lt, qweb} from 'web.core';
 import {svgToPNG} from 'website.utils';
-import {useService} from "@web/core/utils/hooks";
-import {renderToString} from "@web/core/utils/render";
+import { useService } from "@web/core/utils/hooks";
+import { registry } from "@web/core/registry";
 
-const { App, Component, onMounted, reactive, useEnv, useRef, useState, whenReady } = owl;
+const { Component, onMounted, reactive, useEnv, useRef, useState, useSubEnv, onWillStart } = owl;
 
 const ROUTES = {
     descriptionScreen: 2,
@@ -61,28 +60,20 @@ const PALETTE_NAMES = [
 // from CSS and added in each palette.
 const CUSTOM_BG_COLOR_ATTRS = ['menu', 'footer'];
 
-const SESSION_STORAGE_ITEM_NAME = 'websiteConfigurator' + session.website_id;
-
 //------------------------------------------------------------------------------
 // Components
 //------------------------------------------------------------------------------
 
-class SkipButton extends Component {
-    async skip() {
-        await skipConfigurator(Component.env.services);
-    }
-}
-
+class SkipButton extends Component {}
 SkipButton.template = 'website.Configurator.SkipButton';
 
 class WelcomeScreen extends Component {
     setup() {
         this.state = useStore();
-        this.router = useRouter();
     }
 
     goToDescription() {
-        this.router.navigate(ROUTES.descriptionScreen);
+        this.props.navigate(ROUTES.descriptionScreen);
     }
 }
 
@@ -95,7 +86,6 @@ class DescriptionScreen extends Component {
     setup() {
         this.industrySelection = useRef('industrySelection');
         this.state = useStore();
-        this.router = useRouter();
         this.labelToId = {};
         this.autocompleteHasResults = true;
 
@@ -278,7 +268,7 @@ class DescriptionScreen extends Component {
     checkDescriptionCompletion() {
         const {selectedType, selectedPurpose, selectedIndustry} = this.state;
         if (selectedType && selectedPurpose && selectedIndustry) {
-            this.router.navigate(ROUTES.paletteSelectionScreen);
+            this.props.navigate(ROUTES.paletteSelectionScreen);
         }
     }
 }
@@ -291,10 +281,10 @@ Object.assign(DescriptionScreen, {
 class PaletteSelectionScreen extends Component {
     setup() {
         this.state = useStore();
-        this.router = useRouter();
         this.logoInputRef = useRef('logoSelectionInput');
         this.notification = useService("notification");
         this.rpc = useService("rpc");
+        this.orm = useService('orm');
 
         onMounted(() => {
             if (this.state.logo) {
@@ -312,13 +302,10 @@ class PaletteSelectionScreen extends Component {
         if (logoSelectInput.files.length === 1) {
             const file = logoSelectInput.files[0];
             const data = await utils.getDataURLFromFile(file);
-            const attachment = await this.rpc({
-                route: '/web_editor/attachment/add_data',
-                params: {
-                    'name': 'logo',
-                    'data': data.split(',')[1],
-                    'is_image': true,
-                },
+            const attachment = await this.rpc('/web_editor/attachment/add_data', {
+                'name': 'logo',
+                'data': data.split(',')[1],
+                'is_image': true,
             });
             if (!attachment.error) {
                 this.state.changeLogo(data, attachment.id);
@@ -338,18 +325,17 @@ class PaletteSelectionScreen extends Component {
             img = await svgToPNG(img);
         }
         img = img.split(',')[1];
-        const [color1, color2] = await this.rpc({
-            model: 'base.document.layout',
-            method: 'extract_image_primary_secondary_colors',
-            args: [img],
-            kwargs: {mitigate: 255},
-        });
+        const [color1, color2] = await this.orm.call('base.document.layout',
+            'extract_image_primary_secondary_colors',
+            [img],
+            {mitigate: 255},
+        );
         this.state.setRecommendedPalette(color1, color2);
     }
 
     selectPalette(paletteName) {
         this.state.selectPalette(paletteName);
-        this.router.navigate(ROUTES.featuresSelectionScreen);
+        this.props.navigate(ROUTES.featuresSelectionScreen);
     }
 }
 
@@ -358,32 +344,78 @@ Object.assign(PaletteSelectionScreen, {
     template: 'website.Configurator.PaletteSelectionScreen',
 });
 
-class FeaturesSelectionScreen extends Component {
+class ApplyConfiguratorScreen extends Component {
+    async applyConfigurator(themeName) {
+        if (!this.state.selectedIndustry) {
+            return this.props.navigate(ROUTES.descriptionScreen);
+        }
+        if (!this.state.selectedPalette) {
+            return this.props.navigate(ROUTES.paletteSelectionScreen);
+        }
+        if (themeName !== undefined) {
+            $('body').append(qweb.render('website.ThemePreview.Loader', {showTips: true}));
+            const selectedFeatures = Object.values(this.state.features).filter((feature) => feature.selected).map((feature) => feature.id);
+            let selectedPalette = this.state.selectedPalette.name;
+            if (!selectedPalette) {
+                selectedPalette = [
+                    this.state.selectedPalette.color1,
+                    this.state.selectedPalette.color2,
+                    this.state.selectedPalette.color3,
+                    this.state.selectedPalette.color4,
+                    this.state.selectedPalette.color5,
+                ];
+            }
+
+            const resp = await this.orm.silent.call('website',
+                'configurator_apply',
+                [],
+                {
+                    'selected_features': selectedFeatures,
+                    'industry_id': this.state.selectedIndustry.id,
+                    'selected_palette': selectedPalette,
+                    'theme_name': themeName,
+                    'website_purpose': WEBSITE_PURPOSES[this.state.selectedPurpose].name,
+                    'website_type': WEBSITE_TYPES[this.state.selectedType].name,
+                    'logo_attachment_id': this.state.logoAttachmentId,
+                });
+
+            this.props.clearStorage();
+
+            // Here the website service goToWebsite method is not used because
+            // the web client needs to be reloaded after the new modules have
+            // been installed.
+            window.location.replace(`/web#action=website.website_preview&website_id=${resp.website_id}&enable_editor=1`);
+        }
+    }
+}
+
+class FeaturesSelectionScreen extends ApplyConfiguratorScreen {
     setup() {
+        super.setup();
+
+        this.orm = useService("orm");
         this.state = useStore();
-        this.router = useRouter();
-        this.rpc = useService("rpc");
     }
 
     async buildWebsite() {
         const industryId = this.state.selectedIndustry && this.state.selectedIndustry.id;
         if (!industryId) {
-            return this.router.navigate(ROUTES.descriptionScreen);
+            return this.props.navigate(ROUTES.descriptionScreen);
         }
-        const themes = await this.rpc({
-            model: 'website',
-            method: 'configurator_recommended_themes',
-            kwargs: {
+        const themes = await this.orm.call('website',
+            'configurator_recommended_themes',
+            [],
+            {
                 'industry_id': industryId,
                 'palette': this.state.selectedPalette,
             },
-        });
+        );
 
         if (!themes.length) {
-            await applyConfigurator(this, 'theme_default');
+            await this.applyConfigurator('theme_default');
         } else {
             this.state.updateRecommendedThemes(themes);
-            this.router.navigate(ROUTES.themeSelectionScreen);
+            this.props.navigate(ROUTES.themeSelectionScreen);
         }
     }
 }
@@ -393,11 +425,12 @@ Object.assign(FeaturesSelectionScreen, {
     template: 'website.Configurator.FeatureSelection',
 });
 
-class ThemeSelectionScreen extends Component {
+class ThemeSelectionScreen extends ApplyConfiguratorScreen {
     setup() {
+        super.setup();
+
+        this.orm = useService('orm');
         this.state = useStore();
-        this.router = useRouter();
-        this.rpc = useService('rpc');
         this.themeSVGPreviews = [useRef('ThemePreview1'), useRef('ThemePreview2'), useRef('ThemePreview3')];
 
         onMounted(() => {
@@ -408,56 +441,19 @@ class ThemeSelectionScreen extends Component {
     }
 
     async chooseTheme(themeName) {
-        await applyConfigurator(this, themeName);
+        await this.applyConfigurator(themeName);
     }
 }
 
 ThemeSelectionScreen.template = 'website.Configurator.ThemeSelectionScreen';
 
-class Configurator extends Component {
-    setup() {
-        this.router = useRouter();
-    }
-}
-
-Object.assign(Configurator, {
-    components: {
-        WelcomeScreen,
-        DescriptionScreen,
-        PaletteSelectionScreen,
-        FeaturesSelectionScreen,
-        ThemeSelectionScreen,
-    },
-    template: 'website.Configurator.Configurator',
-});
-
-//------------------------------------------------------------------------------
-// Router
-//------------------------------------------------------------------------------
-
-class Router {
-    constructor() {
-        this.location = window.location.pathname;
-    }
-
-    navigate(id) {
-        this.location = `/website/configurator${id ? '/' + id : ''}`;
-        history.pushState({}, '', window.location.origin + this.location);
-    }
-}
-
-function useRouter() {
-    const env = useEnv();
-    return useState(env.router);
-}
-
 //------------------------------------------------------------------------------
 // Store
 //------------------------------------------------------------------------------
 
 class Store {
-    async start() {
-        Object.assign(this, await getInitialState(Component.env.services));
+    async start(getInitialState) {
+        Object.assign(this, await getInitialState());
     }
 
     //-------------------------------------------------------------------------
@@ -572,193 +568,174 @@ class Store {
     }
 }
 
-async function getInitialState(services) {
-    // Load values from python and iap
-    var results = await services.rpc({
-        model: 'website',
-        method: 'configurator_init',
-    });
-    const r = {
-        industries: results.industries,
-        logo: results.logo ? 'data:image/png;base64,' + results.logo : false,
-    };
-    r.industries = r.industries.map((industry, index) => ({
-        ...industry,
-        wordCount: industry.label.split(" ").length,
-        hitCountOrder: index,
-    }));
-
-    // Load palettes from the current CSS
-    const palettes = {};
-    const style = window.getComputedStyle(document.documentElement);
-
-    PALETTE_NAMES.forEach((paletteName) => {
-        const palette = {
-            name: paletteName
-        };
-        for (let j = 1; j <= 5; j += 1) {
-            palette[`color${j}`] = weUtils.getCSSVariableValue(`o-palette-${paletteName}-o-color-${j}`, style);
-        }
-        CUSTOM_BG_COLOR_ATTRS.forEach((attr) => {
-            palette[attr] = weUtils.getCSSVariableValue(`o-palette-${paletteName}-${attr}-bg`, style);
-        });
-        palettes[paletteName] = palette;
-    });
-
-    const localState = JSON.parse(window.sessionStorage.getItem(SESSION_STORAGE_ITEM_NAME));
-    if (localState) {
-        let themes = [];
-        if (localState.selectedIndustry && localState.selectedPalette) {
-            themes = await services.rpc({
-                model: 'website',
-                method: 'configurator_recommended_themes',
-                kwargs: {
-                    'industry_id': localState.selectedIndustry.id,
-                    'palette': localState.selectedPalette,
-                },
-            });
-        }
-        return Object.assign(r, {...localState, palettes, themes});
-    }
-
-    const features = {};
-    results.features.forEach(feature => {
-        features[feature.id] = Object.assign({}, feature, {selected: feature.module_state === 'installed'});
-        const wtp = features[feature.id]['website_config_preselection'];
-        features[feature.id]['website_config_preselection'] = wtp ? wtp.split(',') : [];
-    });
-
-    // Palette color used by default as background color for menu and footer.
-    // Needed to build the recommended palette.
-    const defaultColors = {};
-    CUSTOM_BG_COLOR_ATTRS.forEach((attr) => {
-        const color = weUtils.getCSSVariableValue(`o-default-${attr}-bg`, style);
-        const match = color.match(/o-color-(?<idx>[1-5])/);
-        const colorIdx = parseInt(match.groups['idx']);
-        defaultColors[attr] = `color${colorIdx}`;
-    });
-
-    return Object.assign(r, {
-        selectedType: undefined,
-        selectedPurpose: undefined,
-        selectedIndustry: undefined,
-        selectedPalette: undefined,
-        recommendedPalette: undefined,
-        defaultColors: defaultColors,
-        palettes: palettes,
-        features: features,
-        themes: [],
-        logoAttachmentId: undefined,
-    });
-}
-
 function useStore() {
     const env = useEnv();
-    return useState(env.state);
+    return useState(env.store);
 }
 
-//------------------------------------------------------------------------------
-// Helpers
-//------------------------------------------------------------------------------
+class Configurator extends Component {
+    setup() {
+        this.orm = useService('orm');
+        this.action = useService('action');
+        this.router = useService('router');
 
-async function skipConfigurator(services) {
-    await services.rpc({
-        model: 'website',
-        method: 'configurator_skip',
-    });
-    window.sessionStorage.removeItem(SESSION_STORAGE_ITEM_NAME);
-    window.location = '/web#action=website.theme_install_kanban_action';
-}
+        const initialStep = this.props.action.context.params && this.props.action.context.params.step;
+        const store = reactive(new Store(), () => this.updateStorage(store));
 
-async function applyConfigurator(self, themeName) {
-    if (!self.state.selectedIndustry) {
-        return self.router.navigate(ROUTES.descriptionScreen);
+        this.state = useState({
+            currentStep: initialStep,
+        });
+
+        useSubEnv({ store });
+
+        onWillStart(async () => {
+            this.websiteId = (await this.orm.call('website', 'get_current_website')).match(/\d+/)[0];
+
+            await store.start(() => this.getInitialState());
+            this.updateStorage(store);
+            if (!store.industries) {
+                await this.skipConfigurator();
+            }
+        });
+
+        // This is a hack to overwrite the history state, modified by the
+        // router service after executing an action. Ideally, the router
+        // service would let us push a state with a new pathname.
+        onMounted(() => {
+            setTimeout(() => {
+                this.router.cancelPushes();
+                this.updateBrowserUrl();
+            });
+        });
     }
-    if (!self.state.selectedPalette) {
-        return self.router.navigate(ROUTES.paletteSelectionScreen);
+
+    get pathname() {
+        return `/website/configurator${this.state.currentStep ? `/${this.state.currentStep}` : ''}`;
     }
-    if (themeName !== undefined) {
-        const loader = renderToString('website.ThemePreview.Loader', {showTips: true});
-        $('body').append(loader);
-        const selectedFeatures = Object.values(self.state.features).filter((feature) => feature.selected).map((feature) => feature.id);
-        let selectedPalette = self.state.selectedPalette.name;
-        if (!selectedPalette) {
-            selectedPalette = [
-                self.state.selectedPalette.color1,
-                self.state.selectedPalette.color2,
-                self.state.selectedPalette.color3,
-                self.state.selectedPalette.color4,
-                self.state.selectedPalette.color5,
-            ];
+
+    get storageItemName() {
+        return `websiteConfigurator${this.websiteId}`;
+    }
+
+    updateBrowserUrl() {
+        history.pushState({}, '', this.pathname);
+    }
+
+    navigate(step) {
+        this.state.currentStep = step;
+        this.updateBrowserUrl();
+    }
+
+    clearStorage() {
+        window.sessionStorage.removeItem(this.storageItemName);
+    }
+
+    async getInitialState() {
+        // Load values from python and iap
+        var results = await this.orm.call('website', 'configurator_init');
+        const r = {
+            industries: results.industries,
+            logo: results.logo ? 'data:image/png;base64,' + results.logo : false,
+        };
+        r.industries = r.industries.map((industry, index) => ({
+            ...industry,
+            wordCount: industry.label.split(" ").length,
+            hitCountOrder: index,
+        }));
+
+        // Load palettes from the current CSS
+        const palettes = {};
+        const style = window.getComputedStyle(document.documentElement);
+
+        PALETTE_NAMES.forEach((paletteName) => {
+            const palette = {
+                name: paletteName
+            };
+            for (let j = 1; j <= 5; j += 1) {
+                palette[`color${j}`] = weUtils.getCSSVariableValue(`o-palette-${paletteName}-o-color-${j}`, style);
+            }
+            CUSTOM_BG_COLOR_ATTRS.forEach((attr) => {
+                palette[attr] = weUtils.getCSSVariableValue(`o-palette-${paletteName}-${attr}-bg`, style);
+            });
+            palettes[paletteName] = palette;
+        });
+
+        const localState = JSON.parse(window.sessionStorage.getItem(this.storageItemName));
+        if (localState) {
+            let themes = [];
+            if (localState.selectedIndustry && localState.selectedPalette) {
+                themes = await this.orm.call('website', 'configurator_recommended_themes', [], {
+                    'industry_id': localState.selectedIndustry.id,
+                    'palette': localState.selectedPalette,
+                });
+            }
+            return Object.assign(r, {...localState, palettes, themes});
         }
-        const resp = await self.rpc({
-            model: 'website',
-            method: 'configurator_apply',
-            kwargs: {
-                'selected_features': selectedFeatures,
-                'industry_id': self.state.selectedIndustry.id,
-                'selected_palette': selectedPalette,
-                'theme_name': themeName,
-                'website_purpose': WEBSITE_PURPOSES[self.state.selectedPurpose].name,
-                'website_type': WEBSITE_TYPES[self.state.selectedType].name,
-                'logo_attachment_id': self.state.logoAttachmentId,
-            },
+
+        const features = {};
+        results.features.forEach(feature => {
+            features[feature.id] = Object.assign({}, feature, {selected: feature.module_state === 'installed'});
+            const wtp = features[feature.id]['website_config_preselection'];
+            features[feature.id]['website_config_preselection'] = wtp ? wtp.split(',') : [];
+        });
+
+        // Palette color used by default as background color for menu and footer.
+        // Needed to build the recommended palette.
+        const defaultColors = {};
+        CUSTOM_BG_COLOR_ATTRS.forEach((attr) => {
+            const color = weUtils.getCSSVariableValue(`o-default-${attr}-bg`, style);
+            const match = color.match(/o-color-(?<idx>[1-5])/);
+            const colorIdx = parseInt(match.groups['idx']);
+            defaultColors[attr] = `color${colorIdx}`;
+        });
+
+        return Object.assign(r, {
+            selectedType: undefined,
+            selectedPurpose: undefined,
+            selectedIndustry: undefined,
+            selectedPalette: undefined,
+            recommendedPalette: undefined,
+            defaultColors: defaultColors,
+            palettes: palettes,
+            features: features,
+            themes: [],
+            logoAttachmentId: undefined,
+        });
+    }
+
+    updateStorage(state) {
+        const newState = JSON.stringify({
+            defaultColors: state.defaultColors,
+            features: state.features,
+            logo: state.logo,
+            logoAttachmentId: state.logoAttachmentId,
+            selectedIndustry: state.selectedIndustry,
+            selectedPalette: state.selectedPalette,
+            selectedPurpose: state.selectedPurpose,
+            selectedType: state.selectedType,
+            recommendedPalette: state.recommendedPalette,
+        });
+        window.sessionStorage.setItem(this.storageItemName, newState);
+    }
+
+    async skipConfigurator() {
+        await this.orm.call('website', 'configurator_skip');
+        this.clearStorage();
+        this.action.doAction('website.theme_install_kanban_action', {
+            clearBreadcrumbs: true,
         });
-        window.sessionStorage.removeItem(SESSION_STORAGE_ITEM_NAME);
-        window.location = resp.url;
     }
 }
 
-function updateStorage(state) {
-    const newState = JSON.stringify({
-        defaultColors: state.defaultColors,
-        features: state.features,
-        logo: state.logo,
-        logoAttachmentId: state.logoAttachmentId,
-        selectedIndustry: state.selectedIndustry,
-        selectedPalette: state.selectedPalette,
-        selectedPurpose: state.selectedPurpose,
-        selectedType: state.selectedType,
-        recommendedPalette: state.recommendedPalette,
-    });
-    window.sessionStorage.setItem(SESSION_STORAGE_ITEM_NAME, newState);
-}
+Object.assign(Configurator, {
+    components: {
+        WelcomeScreen,
+        DescriptionScreen,
+        PaletteSelectionScreen,
+        FeaturesSelectionScreen,
+        ThemeSelectionScreen,
+    },
+    template: 'website.Configurator.Configurator',
+});
 
-async function makeEnvironment() {
-    const state = reactive(new Store(), () => updateStorage(state));
-    await state.start();
-    updateStorage(state);
-    const env = {
-        state,
-        router: reactive(new Router()),
-        services: Component.env.services,
-    };
-    await session.is_bound;
-    return env;
-}
-
-//------------------------------------------------------------------------------
-// Setup
-//------------------------------------------------------------------------------
-
-async function setup() {
-    const env = await makeEnvironment();
-    if (!env.state.industries) {
-        await skipConfigurator(env.services);
-    } else {
-        const templates = await (await fetch('/website/static/src/client_actions/configurator/configurator.xml')).text();
-        const app = new App(Configurator, {
-            env,
-            dev: env.debug,
-            templates,
-            translatableAttributes: ["data-tooltip"],
-            translateFn: _t,
-        });
-        const loaderTemplate = await (await fetch('/website/static/src/xml/theme_preview.xml')).text();
-        app.addTemplates(loaderTemplate);
-        renderToString.app = app;
-        await app.mount(document.body);
-    }
-}
-
-whenReady(setup);
+registry.category('actions').add('website_configurator', Configurator);
diff --git a/addons/website/static/src/client_actions/configurator/configurator.xml b/addons/website/static/src/client_actions/configurator/configurator.xml
index 02bbbb169af..8f03d25ca0a 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.xml
+++ b/addons/website/static/src/client_actions/configurator/configurator.xml
@@ -3,7 +3,7 @@
 
     <t t-name="website.Configurator.SkipButton" owl="1">
         <div class="container-fluid py-2 pb-md-3 text-right pr-lg-5">
-            <button class="btn btn-link" t-on-click="skip">Skip and start from scratch</button>
+            <button class="btn btn-link" t-on-click="this.props.skip">Skip and start from scratch</button>
         </div>
     </t>
 
@@ -22,7 +22,7 @@
                 <button class="o_configurator_show btn btn-primary btn-lg px-4 py-2" t-on-click="goToDescription">Let's do it</button>
             </div>
         </div>
-        <SkipButton/>
+        <SkipButton skip="this.props.skip"/>
     </div>
 </t>
 
@@ -83,7 +83,7 @@
                 </div>
             </div>
         </div>
-        <SkipButton/>
+        <SkipButton skip="this.props.skip"/>
     </div>
 </t>
 
@@ -145,7 +145,7 @@
                 </div>
             </div>
         </div>
-        <SkipButton/>
+        <SkipButton skip="this.props.skip"/>
     </div>
 </t>
 
@@ -187,7 +187,7 @@
                 </div>
             </div>
         </div>
-        <SkipButton/>
+        <SkipButton skip="this.props.skip"/>
     </div>
 </t>
 
@@ -238,11 +238,11 @@
 
 <t t-name="website.Configurator.Configurator" owl="1">
     <div class="o_configurator_container">
-        <DescriptionScreen t-if="router.location === '/website/configurator/2'"/>
-        <PaletteSelectionScreen t-elif="router.location === '/website/configurator/3'"/>
-        <FeaturesSelectionScreen t-elif="router.location === '/website/configurator/4'"/>
-        <ThemeSelectionScreen t-elif="router.location === '/website/configurator/5'"/>
-        <WelcomeScreen t-else=""/>
+        <DescriptionScreen t-if="state.currentStep === 2" navigate="(screen) => this.navigate(screen)" skip.bind="skipConfigurator"/>
+        <PaletteSelectionScreen t-elif="state.currentStep === 3" navigate="(screen) => this.navigate(screen)" skip.bind="skipConfigurator"/>
+        <FeaturesSelectionScreen t-elif="state.currentStep === 4" navigate="(screen) => this.navigate(screen)" skip.bind="skipConfigurator" clearStorage.bind="clearStorage"/>
+        <ThemeSelectionScreen t-elif="state.currentStep === 5" navigate="(screen) => this.navigate(screen)" clearStorage.bind="clearStorage"/>
+        <WelcomeScreen t-else="" navigate="(screen) => this.navigate(screen)" skip.bind="skipConfigurator"/>
     </div>
 </t>
 
diff --git a/addons/website/static/src/js/theme_preview_form.js b/addons/website/static/src/js/theme_preview_form.js
index aada899b7a1..593c69a3e7e 100644
--- a/addons/website/static/src/js/theme_preview_form.js
+++ b/addons/website/static/src/js/theme_preview_form.js
@@ -26,7 +26,10 @@ const ThemePreviewControllerCommon = {
         this._addLoader();
         switch (action) {
             case 'button_choose_theme':
-                actionCallback = result => this.do_action(result);
+                actionCallback = result => {
+                    this.do_action(result);
+                    this._removeLoader();
+                };
                 break;
             case 'button_refresh_theme':
                 actionCallback = () => this._removeLoader();
diff --git a/addons/website/static/src/scss/color_palettes.scss b/addons/website/static/src/scss/color_palettes.scss
new file mode 100644
index 00000000000..baef0487b87
--- /dev/null
+++ b/addons/website/static/src/scss/color_palettes.scss
@@ -0,0 +1,56 @@
+:root {
+    // Override css variables to influence the default style of the editor
+    // without duplicating the css.
+    @include print-variable('o-we-toolbar-height', $o-navbar-height);
+
+    // Need the colors, name, menu background color and footer background color of each color palette
+    $o-palette-names: ();
+    $-default-cc: ();
+    $-bg-attrs: 'menu', 'footer';
+    @each $attr in $-bg-attrs {
+        // Since the variables built here are currently only used for theme previews we
+        // decided to keep things simple and we deliberately ignore potential overrides
+        // from #{$-bg-attrs}-custom and #{$-bg-attrs}-gradient.
+        $-default-cc: map-merge($-default-cc, ($attr: map-get($o-base-color-palette, $attr)))
+    }
+
+    @each $-selected-palette-name in $o-selected-color-palettes-names {
+        $-palette: map-get($o-color-palettes, $-selected-palette-name);
+
+        @if $-selected-palette-name != 'user-palette' {
+            @each $key, $value in $-palette {
+                @include print-variable('o-palette-#{$-selected-palette-name}-#{$key}', $value);
+            }
+
+            @each $attr-name, $default-cc-idx in $-default-cc {
+                $-cc-idx: $default-cc-idx;
+                @if map-has-key($-palette, $attr-name) {
+                    $-cc-idx: map-get($-palette, $attr-name);
+                }
+                $-bg: $body-bg;
+                @if $-cc-idx != null {
+                    $-cc: nth($o-color-combinations, $-cc-idx);
+                    $-bg: o-safe-get($-palette, 'o-cc#{$-cc-idx}-bg', map-get($-cc, 'bg'));
+                    @if type-of($-bg) != color {
+                        $-bg: map-get($-palette, $-bg);
+                    }
+                }
+                @include print-variable('o-palette-#{$-selected-palette-name}-#{$attr-name}-bg', $-bg);
+            }
+        }
+    }
+
+    // Need the palette colors used as default menu and footer background color
+    @each $attr-name, $default-cc-idx in $-default-cc {
+        $-cc: nth($o-color-combinations, $default-cc-idx);
+        $-default-bg: map-get($-cc, 'bg');
+        @include print-variable('o-default-#{$attr-name}-bg', $-default-bg);
+    }
+
+    @include print-variable('palette-names', $o-selected-color-palettes-names);
+
+    // Need info about the base grays which are used to compute the final grays
+    @each $name, $color in $o-base-gray-color-palette {
+        @include print-variable('base-#{$name}', $color);
+    }
+}
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 44cfd93c2bd..1de87ca13d5 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -6,63 +6,6 @@
     }
 }
 
-:root {
-    // Override css variables to influence the default style of the editor
-    // without duplicating the css.
-    @include print-variable('o-we-toolbar-height', $o-navbar-height);
-
-    // Need the colors, name, menu background color and footer background color of each color palette
-    $o-palette-names: ();
-    $-default-cc: ();
-    $-bg-attrs: 'menu', 'footer';
-    @each $attr in $-bg-attrs {
-        // Since the variables built here are currently only used for theme previews we
-        // decided to keep things simple and we deliberately ignore potential overrides
-        // from #{$-bg-attrs}-custom and #{$-bg-attrs}-gradient.
-        $-default-cc: map-merge($-default-cc, ($attr: map-get($o-base-color-palette, $attr)))
-    }
-
-    @each $-selected-palette-name in $o-selected-color-palettes-names {
-        $-palette: map-get($o-color-palettes, $-selected-palette-name);
-
-        @if $-selected-palette-name != 'user-palette' {
-            @each $key, $value in $-palette {
-                @include print-variable('o-palette-#{$-selected-palette-name}-#{$key}', $value);
-            }
-
-            @each $attr-name, $default-cc-idx in $-default-cc {
-                $-cc-idx: $default-cc-idx;
-                @if map-has-key($-palette, $attr-name) {
-                    $-cc-idx: map-get($-palette, $attr-name);
-                }
-                $-bg: $body-bg;
-                @if $-cc-idx != null {
-                    $-cc: nth($o-color-combinations, $-cc-idx);
-                    $-bg: o-safe-get($-palette, 'o-cc#{$-cc-idx}-bg', map-get($-cc, 'bg'));
-                    @if type-of($-bg) != color {
-                        $-bg: map-get($-palette, $-bg);
-                    }
-                }
-                @include print-variable('o-palette-#{$-selected-palette-name}-#{$attr-name}-bg', $-bg);
-            }
-        }
-    }
-
-    // Need the palette colors used as default menu and footer background color
-    @each $attr-name, $default-cc-idx in $-default-cc {
-        $-cc: nth($o-color-combinations, $default-cc-idx);
-        $-default-bg: map-get($-cc, 'bg');
-        @include print-variable('o-default-#{$attr-name}-bg', $-default-bg);
-    }
-
-    @include print-variable('palette-names', $o-selected-color-palettes-names);
-
-    // Need info about the base grays which are used to compute the final grays
-    @each $name, $color in $o-base-gray-color-palette {
-        @include print-variable('base-#{$name}', $color);
-    }
-}
-
 #oe_snippets {
     top: 0;
     .oe-toolbar {
diff --git a/addons/website/views/website_configurator_templates.xml b/addons/website/views/website_configurator_templates.xml
deleted file mode 100644
index 299a204a9f4..00000000000
--- a/addons/website/views/website_configurator_templates.xml
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-
-<template id="website_configurator" name="Website Configurator" inherit_id="web.frontend_layout" primary="True">
-    <xpath expr="//head/t[@t-call-assets][last()]" position="after">
-        <t t-call-assets="website.website_configurator_assets_js" lazy_load="True"/>
-    </xpath>
-    <xpath expr="//t[@t-call-assets='web.assets_frontend']" position="replace">
-        <t t-call-assets="website.website_configurator_assets_scss" t-js="false"/>
-    </xpath>
-    <xpath expr="//nav" position="replace"/>
-    <xpath expr="//div[@id='wrapwrap']" position="replace"/>
-</template>
-
-</odoo>
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
deleted file mode 100644
index c4290c336f1..00000000000
--- a/addons/website/views/website_navbar_templates.xml
+++ /dev/null
@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-    <!-- Front-end/Back-end integration -->
-    <template id="user_navbar" inherit_id="website.layout" name="User Navbar">
-        <xpath expr="//div[@id='wrapwrap']" position="before">
-            <div t-if="'with_loader' in request.params" class="o_theme_install_loader_container position-fixed fixed-top fixed-left
-            h-100 w-100 d-flex flex-column align-items-center text-white font-weight-bold text-center">
-                Building your website...
-                <div class="o_theme_install_loader"/>
-                <p class="o_theme_install_loader_tip w-25">
-                    TIP: Once loaded, follow the
-                    <span class="o_tooltip o_tooltip_visible bottom o_animated position-relative"></span>
-                    <br/>pointer to build the perfect page in 7 steps.
-                </p>
-            </div>
-        </xpath>
-    </template>
-</odoo>
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index b47b573ff9a..081be12098c 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -583,15 +583,15 @@
             action="website.website_preview"/>
 
         <!-- Configurator actions -->
-        <record id="start_configurator_act_url" model="ir.actions.act_url">
+        <record id="website_configurator" model="ir.actions.client">
             <field name="name">Website Configurator</field>
-            <field name="url">/website/configurator</field>
-            <field name="target">self</field>
+            <field name="tag">website_configurator</field>
+            <field name="target">fullscreen</field>
         </record>
 
         <record id="website_configurator_todo" model="ir.actions.todo">
             <field name="name">Start Website Configurator</field>
-            <field name="action_id" ref="start_configurator_act_url"/>
+            <field name="action_id" ref="website_configurator"/>
             <field name="sequence">0</field>
         </record>
     </data>

From b16d3bc576c87a820b56b24aed1d692292424f01 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Wed, 23 Mar 2022 13:27:15 +0100
Subject: [PATCH 51/88] [IMP] website: adapt configurator css to backend assets

Before, the configurator was using the frontend assets. When converting
it to a backend client action, it lost some styles. Some rules are added
to the configurator scss file to keep the structure that is had before.

See merge commit for more information.

task-2687506
---
 .../configurator/configurator.scss            | 41 +++++++++++++++++++
 .../configurator/configurator.xml             | 12 +++---
 2 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/addons/website/static/src/client_actions/configurator/configurator.scss b/addons/website/static/src/client_actions/configurator/configurator.scss
index a3749ad4f03..d5f4f89e603 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.scss
+++ b/addons/website/static/src/client_actions/configurator/configurator.scss
@@ -1,5 +1,6 @@
 .o_configurator_container {
     @include o-position-absolute(0, 0, 0, 0);
+    background-color: $white;
 
     .o_configurator_screen {
 
@@ -110,6 +111,7 @@
                     border: none;
                     border-bottom: 3px solid theme-color(primary);
                     color: theme-color(primary);
+                    background-color: inherit;
 
                     &:focus {
                         color: inherit;
@@ -121,6 +123,7 @@
                     content: attr(data-value) '|';
                     display: inline-block;
                     overflow: hidden;
+                    opacity: 0;
                 }
             }
 
@@ -154,6 +157,7 @@
                 @include border-bottom-radius($border-radius);
                 font-size: inherit;
                 min-width: 100%;
+                overflow-y: auto;
             }
 
             .dropdown-item, .fa-angle-down, .ui-menu-item a, .ui-menu-item a.ui-state-active {
@@ -195,6 +199,31 @@
         }
 
         &.o_palette_selection_screen {
+            @include media-breakpoint-down(md) {
+                .o_detect_logo {
+                    width: 100% !important;
+                }
+
+                .o_content_container {
+                    height: 100% !important;
+                    flex-direction: column !important;
+                }
+
+                .o_palettes_separator {
+                    width: 100% !important;
+                }
+
+                .o_palettes_container {
+                    width: 100% !important;
+                }
+            }
+
+            @include media-breakpoint-down(sm) {
+                .o_palette_card_container {
+                    width: 50% !important;
+                }
+            }
+
             .palette_card {
                 cursor: pointer;
                 box-shadow: 0 0 0 1px gray('200');
@@ -238,6 +267,18 @@
         }
 
         &.o_feature_selection_screen {
+            @include media-breakpoint-down(md) {
+                .o_feature_card_container {
+                    width: 50% !important;
+                }
+            }
+
+            @include media-breakpoint-down(sm) {
+                .o_feature_card_container {
+                    width: 100% !important;
+                }
+            }
+
             .card {
                 cursor: pointer;
 
diff --git a/addons/website/static/src/client_actions/configurator/configurator.xml b/addons/website/static/src/client_actions/configurator/configurator.xml
index 8f03d25ca0a..e548b70a602 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.xml
+++ b/addons/website/static/src/client_actions/configurator/configurator.xml
@@ -93,8 +93,8 @@
             <img class="ml-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
         </div>
         <div class="o_configurator_screen_content container palette_selection d-flex flex-grow-1 h-100">
-            <div class="d-flex flex-column flex-lg-row w-100 h-100 h-lg-auto align-self-md-center o_configurator_show">
-                <div class="w-100 w-lg-25 order-lg-3 my-4 my-md-0 d-flex flex-column">
+            <div class="o_content_container d-flex flex-row w-100 h-auto align-self-md-center o_configurator_show">
+                <div class="o_detect_logo w-25 order-lg-3 my-4 my-md-0 d-flex flex-column">
                     <div class="h4 text-center">
                         <b>Detect</b> from Logo</div>
                     <div class="d-flex flex-column flex-grow-1 py-4">
@@ -122,17 +122,17 @@
                         </div>
                     </div>
                 </div>
-                <div class="position-relative d-flex justify-content-center order-lg-2 w-100 w-lg-0 py-3 py-lg-0 px-lg-5 mb-4 mb-lg-0">
+                <div class="o_palettes_separator position-relative d-flex justify-content-center order-lg-2 w-0 py-3 py-lg-0 px-lg-5 mb-4 mb-lg-0">
                     <div class="border-top w-100"></div>
                     <b class="palette_selection_or bg-white text-muted w-lg-100 text-center px-3 py-lg-3">OR</b>
                     <div class="border-left d-none d-lg-inline h-100 mx-auto w-0"></div>
                 </div>
-                <div class="w-100 w-lg-auto flex-grow-1 o_configurator_show_fast">
+                <div class="o_palettes_container w-auto flex-grow-1 o_configurator_show_fast">
                     <div class="h4 text-center">
                         <b>Choose</b> a pre-made Palette</div>
                     <div class="d-flex flex-wrap align-items-end">
                         <t t-foreach="state.getPalettes()" t-as="palette" t-key="palette_index">
-                            <div class="w-50 w-md-25 px-2 pt-3">
+                            <div class="o_palette_card_container w-25 px-2 pt-3">
                                 <div t-attf-class="palette_card rounded-pill overflow-hidden d-flex {{state.getSelectedPaletteName() == palette.name ? 'selected' : ''}}"
                                      t-on-click="() => this.selectPalette(palette.name)" t-attf-style="background-color: {{palette.color3}}">
                                     <div class="color_sample w-100" t-attf-style="background-color: {{palette.color1}}"/>
@@ -162,7 +162,7 @@
                     <div class="w-100 page_feature_selection d-flex flex-wrap">
                         <t t-foreach="state.getFeatures()" t-as="feature" t-key="feature_index">
                             <t t-set='isInstalled' t-value="feature.module_state == 'installed'"/>
-                            <div class="p-2 w-100 w-md-50 w-lg-25" t-if="feature.type != 'empty'">
+                            <div class="o_feature_card_container p-2 w-25" t-if="feature.type != 'empty'">
                                 <div t-attf-class="card h-100 {{isInstalled ? 'card_installed' : (feature.selected ? 'border-success' : '')}}" t-on-click="() => state.toggleFeature(feature.id)">
                                     <div class="card-body py-2">
                                         <t t-if="isInstalled">

From 6aac2bec6f1249fe687cb372218f229b3438ccb7 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Mon, 11 Apr 2022 11:23:33 +0200
Subject: [PATCH 52/88] [IMP] website_links: add link tracker menu item

See merge commit for more information.

task-2687506
---
 addons/website_links/__manifest__.py          |  6 +--
 .../static/src/components/navbar/navbar.js    | 38 +++++++------------
 .../views/link_tracker_views.xml              |  6 +++
 3 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/addons/website_links/__manifest__.py b/addons/website_links/__manifest__.py
index 2af6b989591..a984667b483 100644
--- a/addons/website_links/__manifest__.py
+++ b/addons/website_links/__manifest__.py
@@ -22,12 +22,12 @@ Those trackers can be used in Google Analytics to track clicks and visitors, or
             'website_links/static/src/js/website_links_charts.js',
             'website_links/static/src/css/website_links.css',
         ],
+        'web.assets_backend': [
+            'website_links/static/src/components/navbar/navbar.js',
+        ],
         'web.assets_tests': [
             'website_links/static/tests/**/*',
         ],
-        'website.assets_editor': [
-            'website_links/static/src/components/navbar/navbar.js',
-        ],
         'web.assets_qweb': [
             'website_links/static/src/xml/*.xml',
         ],
diff --git a/addons/website_links/static/src/components/navbar/navbar.js b/addons/website_links/static/src/components/navbar/navbar.js
index b76b3615302..17e1d9dfc0c 100644
--- a/addons/website_links/static/src/components/navbar/navbar.js
+++ b/addons/website_links/static/src/components/navbar/navbar.js
@@ -1,30 +1,20 @@
-/**
- * The purpose of this script is to copy the current URL of the website
- * into the URL form of the URL shortener (module website_links)
- * when the user clicks the link "Share this page" on top of the page.
- */
+/** @odoo-module  */
 
-odoo.define('website_links.website_links_menu', function (require) {
-'use strict';
+import { patch } from 'web.utils';
+import { NavBar } from '@web/webclient/navbar/navbar';
 
-var publicWidget = require('web.public.widget');
+const { onWillStart } = owl;
 
-const { registry } = require("@web/core/registry");
+patch(NavBar.prototype, 'website_links_navbar', {
+    setup() {
+        this._super();
 
-var WebsiteLinksMenu = publicWidget.Widget.extend({
-
-    /**
-     * @override
-     */
-    start: function () {
-        this.$el.attr('href', '/r?u=' + encodeURIComponent(window.location.href));
-        return this._super.apply(this, arguments);
+        onWillStart(() => {
+            this.websiteEditingMenus['website_links.menu_link_tracker'] = {
+                openWidget: () => this.websiteService.goToWebsite({ path: `/r?u=${encodeURIComponent(this.websiteService.contentWindow.location.href)}` }),
+                isDisplayed: () => this.websiteService.currentWebsite,
+                options: () => {},
+            };
+        });
     },
 });
-
-registry.category("website_navbar_widgets").add("WebsiteLinksMenu", {
-    Widget: WebsiteLinksMenu,
-    selector: '#o_website_links_share_page',
-});
-
-});
diff --git a/addons/website_links/views/link_tracker_views.xml b/addons/website_links/views/link_tracker_views.xml
index 9649f474dc3..f779704d266 100644
--- a/addons/website_links/views/link_tracker_views.xml
+++ b/addons/website_links/views/link_tracker_views.xml
@@ -10,4 +10,10 @@
             </xpath>
         </field>
     </record>
+
+    <menuitem id="menu_link_tracker"
+        name="Link Tracker"
+        sequence="5"
+        parent="website.menu_promote"
+        action="website.website_preview"/>
 </odoo>

From 8fb0aeadcfa0bc17d675d1a470386a87e14935db Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Wed, 13 Apr 2022 21:04:30 +0200
Subject: [PATCH 53/88] [FIX] web_tour, website: do not query test anchors in
 iframe fallback

Before this commit, when using 'iframe ...' as a selector for a trigger
in a tour, the first iframe found was used to query and find the
trigger. In the context of this PR, the iframe fallback was used to find
the triggers in the website tours.

This commit adds a o_ignore_in_tour class, used to filter out those
elements in tours.

See merge commit for more information.

task-2687506
---
 addons/web_tour/static/src/js/tour_utils.js                     | 2 +-
 .../src/client_actions/website_preview/website_preview.xml      | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/addons/web_tour/static/src/js/tour_utils.js b/addons/web_tour/static/src/js/tour_utils.js
index ca6f11f854d..0a7769dc22f 100644
--- a/addons/web_tour/static/src/js/tour_utils.js
+++ b/addons/web_tour/static/src/js/tour_utils.js
@@ -47,7 +47,7 @@ function do_before_unload(if_unload_callback, if_not_unload_callback) {
 
 function get_jquery_element_from_selector(selector) {
     if (_.isString(selector) && selector.indexOf('iframe') !== -1) {
-        var $iframe = $(selector.split('iframe')[0] + ' iframe');
+        var $iframe = $(selector.split('iframe')[0] + ' iframe:not(.o_ignore_in_tour)');
         var $el = $iframe.contents()
             .find(selector.split('iframe')[1]);
         $el.iframeContainer = $iframe[0];
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml
index a5a48b6e774..a670f3f837b 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.xml
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml
@@ -17,6 +17,7 @@
         <div class="o_iframe_container" t-att-class="{ 'o_is_mobile': this.websiteContext.isMobile }">
             <BlockIframe/>
             <iframe t-att-src="iframeFallbackUrl"
+                class="o_ignore_in_tour"
                 t-att-class="{ 'd-none': this.websiteContext.edition }"
                 t-ref="iframefallback"/>
             <iframe t-att-src="initialUrl"

From 00080f4b736c84eedd3f15e99004c1473cb78f37 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Mon, 4 Apr 2022 10:09:01 +0200
Subject: [PATCH 54/88] [IMP] website, web_editor: add "translate" systray item

This commit adds a Translator component, that replaces the
TranslatePageMenu.
It has not been completely adapted to owl: instead, it only extends the
Editor component (that instantiates the Wysiwyg widget) and passes
callback props that are using the legacy code from the
TranslatePageMenu.

See merge commit for more information.

task-2687506
---
 .../static/src/scss/web_editor.common.scss    |   2 +
 .../static/src/scss/web_editor.variables.scss |   4 +-
 addons/website/__manifest__.py                |   3 +-
 .../website_preview/website_preview.js        |   6 +-
 .../website_preview/website_preview.xml       |   2 +
 .../static/src/components/dialog/dialog.js    |   7 +
 .../static/src/components/dialog/dialog.xml   |   2 +-
 .../static/src/components/editor/editor.js    |  41 +-
 .../static/src/components/editor/editor.xml   |   6 +-
 .../src/components/translator/translator.js   | 238 +++++++++++
 .../src/components/translator/translator.scss |  13 +
 .../src/components/translator/translator.xml  |   6 +-
 .../wysiwyg_adapter/wysiwyg_adapter.js        |  13 +-
 .../website/static/src/js/content/redirect.js |  11 +-
 .../static/src/scss/website.wysiwyg.scss      |   6 -
 .../static/src/services/website_service.js    |   7 +-
 .../static/src/systray_items/edit_website.js  |  30 +-
 .../src/systray_items/edit_website.scss       |   4 +-
 .../static/src/systray_items/edit_website.xml |   7 +-
 .../src/systray_items/translate_website.js    | 379 ++----------------
 .../src/systray_items/translate_website.scss  |   3 +
 .../src/systray_items/translate_website.xml   |  12 +
 22 files changed, 413 insertions(+), 389 deletions(-)
 create mode 100644 addons/website/static/src/components/translator/translator.js
 create mode 100644 addons/website/static/src/components/translator/translator.scss
 create mode 100644 addons/website/static/src/systray_items/translate_website.scss
 create mode 100644 addons/website/static/src/systray_items/translate_website.xml

diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index a6019670192..9612f900745 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -69,6 +69,8 @@
 
     @include print-variable('o-grid-gutter-width', $grid-gutter-width);
     @include print-variable('o-md-container-max-width', map-get($container-max-widths, md));
+    @include print-variable('o-we-content-to-translate-color', $o-we-content-to-translate-color);
+    @include print-variable('o-we-translated-content-color', $o-we-translated-content-color);
 }
 
 html, body {
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 2f009dee28f..5bfaf343819 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -45,8 +45,8 @@ $o-we-dropzone-border-width: 2px !default;
 $o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default;
 
 // Translations
-$o-we-content-to-translate-color: rgb(255, 255, 90) !default;
-$o-we-translated-content-color: rgb(120, 215, 110) !default;
+$o-we-content-to-translate-color: rgba(255, 255, 90, 0.5) !default;
+$o-we-translated-content-color: rgba(120, 215, 110, 0.5) !default;
 
 $o-we-toolbar-height: 40px !default;
 
diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 065a3ac4be1..4e1faf1f86f 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -187,6 +187,7 @@
             'website/static/src/systray_items/*.scss',
             'website/static/src/js/new_content_form.js',
             'website/static/src/js/utils.js',
+            'website/static/src/components/translator/*',
         ],
         'web.qunit_suite_tests': [
             'website/static/tests/dashboard_tests.js',
@@ -266,7 +267,6 @@
             'website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js',
             'website/static/src/systray_items/mobile_preview.js',
             'website/static/src/components/dialog/seo.js',
-            'website/static/src/systray_items/translate_website.js',
             'website/static/src/js/set_view_track.js',
             'website/static/src/js/tours/homepage.js',
             'website/static/src/js/tours/tour_utils.js',
@@ -280,6 +280,7 @@
             'website/static/src/components/editor/editor.xml',
             'website/static/src/client_actions/*/*.xml',
             'website/static/src/systray_items/*.xml',
+            'website/static/src/components/translator/*.xml',
         ],
         'website.test_bundle': [
             '/web/static/lib/qweb/qweb2.js',
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 73fd0647b8b..11d12266f05 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -4,6 +4,7 @@ import { registry } from '@web/core/registry';
 import { useService } from '@web/core/utils/hooks';
 import core from 'web.core';
 import { WebsiteEditorComponent } from '../../components/editor/editor';
+import { WebsiteTranslator } from '../../components/translator/translator';
 
 const { Component, onWillStart, useRef, useEffect, useState } = owl;
 
@@ -63,8 +64,10 @@ export class WebsitePreview extends Component {
             this.websiteService.currentWebsiteId = this.websiteId;
             this.websiteService.context.showNewContentModal = this.props.action.context.params && this.props.action.context.params.display_new_content;
             this.websiteService.context.edition = this.props.action.context.params && !!this.props.action.context.params.enable_editor;
+            this.websiteService.context.translation = this.props.action.context.params && !!this.props.action.context.params.edit_translations;
             return () => {
                 this.websiteService.currentWebsiteId = null;
+                this.websiteService.websiteRootInstance = undefined;
                 this.websiteService.pageDocument = null;
                 this.websiteService.contentWindow = null;
             };
@@ -213,7 +216,8 @@ export class WebsitePreview extends Component {
 WebsitePreview.template = 'website.WebsitePreview';
 WebsitePreview.components = {
     WebsiteEditorComponent,
-    BlockIframe
+    BlockIframe,
+    WebsiteTranslator,
 };
 
 registry.category('actions').add('website_preview', WebsitePreview);
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml
index a670f3f837b..801fc122c47 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.xml
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml
@@ -27,6 +27,8 @@
         </div>
         <WebsiteEditorComponent t-if="websiteContext.edition"
             reloadIframe.bind="this.reloadIframe"/>
+        <WebsiteTranslator t-if="websiteContext.translation"
+            reloadIframe.bind="this.reloadIframe"/>
     </div>
 </t>
 
diff --git a/addons/website/static/src/components/dialog/dialog.js b/addons/website/static/src/components/dialog/dialog.js
index d6f918c6a2b..7bc2de1b7d2 100644
--- a/addons/website/static/src/components/dialog/dialog.js
+++ b/addons/website/static/src/components/dialog/dialog.js
@@ -14,6 +14,10 @@ export class WebsiteDialog extends Dialog {
         this.closeOnClick = this.props.closeOnClick === false ? false : true;
     }
 
+    get showSecondaryButton() {
+        return this.props.showSecondaryButton;
+    }
+
     primaryClick() {
         if (this.props.primaryClick) {
             this.props.primaryClick();
@@ -43,6 +47,9 @@ WebsiteDialog.props = {
     closeOnClick: { type: Boolean, optional: true },
     close: { type: Function, optional: true },
 };
+WebsiteDialog.defaultProps = {
+    showSecondaryButton: true,
+};
 WebsiteDialog.bodyTemplate = "website.DialogBody";
 WebsiteDialog.footerTemplate = "website.DialogFooter";
 WebsiteDialog.size = "modal-md";
diff --git a/addons/website/static/src/components/dialog/dialog.xml b/addons/website/static/src/components/dialog/dialog.xml
index 30532d3681a..1a89c27dedb 100644
--- a/addons/website/static/src/components/dialog/dialog.xml
+++ b/addons/website/static/src/components/dialog/dialog.xml
@@ -8,7 +8,7 @@
     <button class="btn btn-primary" t-on-click="primaryClick">
         <t t-esc="primaryTitle"/>
     </button>
-    <button class="btn btn-secondary" t-on-click="secondaryClick">
+    <button t-if="showSecondaryButton" class="btn btn-secondary" t-on-click="secondaryClick">
         <t t-esc="secondaryTitle"/>
     </button>
 </t>
diff --git a/addons/website/static/src/components/editor/editor.js b/addons/website/static/src/components/editor/editor.js
index 37524636039..8dba7fe64f8 100644
--- a/addons/website/static/src/components/editor/editor.js
+++ b/addons/website/static/src/components/editor/editor.js
@@ -30,11 +30,26 @@ export class WebsiteEditorComponent extends Component {
 
         useEffect(isPublicRootReady => {
             if (isPublicRootReady) {
-                this.state.showWysiwyg = true;
+                this.publicRootReady();
             }
         }, () => [this.websiteContext.isPublicRootReady]);
     }
-
+    /**
+     * Starts the wysiwyg or disable edition if currently
+     * on a translated page.
+     */
+    publicRootReady() {
+        if (this.websiteService.currentWebsite.metadata.translatable) {
+            this.websiteContext.edition = false;
+            this.websiteService.unblockIframe();
+        } else {
+            this.state.showWysiwyg = true;
+        }
+    }
+    /**
+     * Displays the side menu and unblock the iframe to
+     * start edition.
+     */
     wysiwygReady() {
         this.websiteContext.snippetsLoaded = true;
         this.state.reloading = false;
@@ -52,7 +67,7 @@ export class WebsiteEditorComponent extends Component {
         this.websiteService.blockIframe();
         if (widgetEl) {
             widgetEl.querySelectorAll('#oe_manipulators').forEach(el => el.remove());
-            widgetEl.querySelectorAll('we-input input').forEach((input, index) => {
+            widgetEl.querySelectorAll('we-input input').forEach(input => {
                 input.setAttribute('value', input.closest('we-input').dataset.selectStyle || '');
             });
             this.loadingDummy = markup(widgetEl.innerHTML);
@@ -80,7 +95,7 @@ export class WebsiteEditorComponent extends Component {
         this.reloadSelector = snippetOptionSelector;
     }
     /**
-     * Blocks the iframe and stops the editor.
+     * Blocks the iframe and start the hiding transition.
      *
      * @returns {Promise<void>}
      */
@@ -88,12 +103,18 @@ export class WebsiteEditorComponent extends Component {
         this.websiteService.blockIframe(true, 400);
         document.body.classList.remove('editor_has_snippets');
         this.websiteContext.snippetsLoaded = false;
-        setTimeout(async () => {
-            this.state.showWysiwyg = false;
-            await this.props.reloadIframe();
-            this.websiteContext.edition = false;
-            this.websiteService.unblockIframe();
-        }, 400);
+        setTimeout(this.destroyAfterTransition.bind(this), 400);
+    }
+    /**
+     * Dismounts the editor.
+     *
+     * @returns {Promise<void>}
+     */
+    async destroyAfterTransition() {
+        this.state.showWysiwyg = false;
+        await this.props.reloadIframe();
+        this.websiteContext.edition = false;
+        this.websiteService.unblockIframe();
     }
 }
 WebsiteEditorComponent.components = { WysiwygAdapterComponent };
diff --git a/addons/website/static/src/components/editor/editor.xml b/addons/website/static/src/components/editor/editor.xml
index 509e313b11a..c944885fd55 100644
--- a/addons/website/static/src/components/editor/editor.xml
+++ b/addons/website/static/src/components/editor/editor.xml
@@ -10,7 +10,11 @@
             willReload.bind="this.willReload"
             reloadCallback.bind="this.reload"
             quitCallback.bind="this.quit"
-            wysiwygReady.bind="this.wysiwygReady"/>
+            wysiwygReady.bind="this.wysiwygReady"
+            wysiwygOptions="this.wysiwygOptions"
+            editableElements="this.editableElements"
+            savableSelector="this.savableSelector"
+            beforeEditorActive="this.beforeEditorActive"/>
     </div>
 </t>
 </templates>
diff --git a/addons/website/static/src/components/translator/translator.js b/addons/website/static/src/components/translator/translator.js
new file mode 100644
index 00000000000..7cb5fa3255f
--- /dev/null
+++ b/addons/website/static/src/components/translator/translator.js
@@ -0,0 +1,238 @@
+/** @odoo-module */
+import { useService } from '@web/core/utils/hooks';
+import { WebsiteEditorComponent } from '../editor/editor';
+import { WebsiteDialog } from '../dialog/dialog';
+import localStorage from 'web.local_storage';
+
+const { useEffect, useRef } = owl;
+
+const localStorageNoDialogKey = 'website_translator_nodialog';
+
+class AttributeTranslateDialog extends WebsiteDialog {
+    setup() {
+        super.setup();
+        this.title = this.env._t("Translate Attribute");
+
+        this.formEl = useRef('form-container');
+
+        useEffect(() => {
+            this.translation = $(this.props.node).data('translation');
+
+            const $group = $('<div/>', {class: 'form-group'}).appendTo(this.formEl.el);
+            _.each(this.translation, function (node, attr) {
+                const $node = $(node);
+                const $label = $('<label class="col-form-label"></label>').text(attr);
+                const $input = $('<input class="form-control"/>').val($node.html());
+                $input.on('change keyup', function () {
+                    const value = $input.val();
+                    $node.text(value).trigger('change', node);
+                    if ($node.data('attribute')) {
+                        $node.data('$node').attr($node.data('attribute'), value).trigger('translate');
+                    } else {
+                        $node.data('$node').val(value).trigger('translate');
+                    }
+                    $node.trigger('change');
+                });
+                $group.append($label).append($input);
+            });
+        }, () => [this.props.node]);
+    }
+}
+AttributeTranslateDialog.bodyTemplate = 'website.AttributeTranslateDialog';
+
+class TranslatorInfoDialog extends WebsiteDialog {}
+TranslatorInfoDialog.bodyTemplate = 'website.TranslatorInfoDialog';
+
+const savableSelector = '[data-oe-translation-id], ' +
+    '[data-oe-model][data-oe-id][data-oe-field], ' +
+    '[placeholder*="data-oe-translation-id="], ' +
+    '[title*="data-oe-translation-id="], ' +
+    '[value*="data-oe-translation-id="], ' +
+    'textarea:contains(data-oe-translation-id), ' +
+    '[alt*="data-oe-translation-id="]';
+
+export class WebsiteTranslator extends WebsiteEditorComponent {
+    setup() {
+        super.setup();
+
+        this.dialogService = useService('dialog');
+
+        this.wysiwygOptions.enableTranslation = true;
+        this.wysiwygOptions.devicePreview = false;
+
+        this.editableElements = (...args) => this._editableElements(...args);
+        this.beforeEditorActive = (...args) => this._beforeEditorActive(...args);
+    }
+
+    /**
+     * @override
+     */
+    publicRootReady() {
+        if (!this.websiteService.currentWebsite.metadata.translatable) {
+            this.websiteContext.translation = false;
+        } else {
+            this.state.showWysiwyg = true;
+            const url = new URL(this.websiteService.contentWindow.location.href);
+            url.searchParams.delete('edit_translations');
+            this.websiteService.contentWindow.history.replaceState(this.websiteService.contentWindow.history.state, null, url);
+        }
+    }
+
+    /**
+     * @override
+     */
+    async destroyAfterTransition() {
+        this.state.showWysiwyg = false;
+        await this.props.reloadIframe();
+        this.websiteContext.translation = false;
+        this.websiteService.unblockIframe();
+    }
+
+    get savableSelector() {
+        return savableSelector;
+    }
+
+    getEditableArea() {
+        return this.$wysiwygEditable.find(':o_editable').add(this.$editables);
+    }
+
+    _editableElements() {
+        return $(this.websiteService.pageDocument).find(savableSelector)
+            .not('[data-oe-readonly]');
+    }
+
+    getTranslationObject(nodeEl) {
+        let { oeTranslationId: id } = nodeEl.dataset;
+        if (!id) {
+            const { oeModel, oeId, oeField } = nodeEl.dataset;
+            id = [oeModel, oeId, oeField].join(',');
+        }
+        let translation = this.translations.filter(t => t.id === id)[0];
+        if (!translation) {
+            translation = { id };
+            this.translations.push(translation);
+        }
+        return translation;
+    }
+
+    async _beforeEditorActive($wysiwygEditable) {
+        this.$wysiwygEditable = $wysiwygEditable;
+        const self = this;
+        var attrs = ['placeholder', 'title', 'alt', 'value'];
+        const $editable = this.getEditableArea();
+        const translationRegex = /<span [^>]*data-oe-translation-id="([0-9]+)"[^>]*>(.*)<\/span>/;
+        let $edited = $();
+        _.each(attrs, function (attr) {
+            const attrEdit = $editable.filter('[' + attr + '*="data-oe-translation-id="]').filter(':empty, input, select, textarea, img');
+            attrEdit.each(function () {
+                var $node = $(this);
+                var translation = $node.data('translation') || {};
+                var trans = $node.attr(attr);
+                var match = trans.match(translationRegex);
+                var $trans = $(trans).addClass('d-none o_editable o_editable_translatable_attribute').appendTo(self.websiteService.pageDocument.body);
+                $trans.data('$node', $node).data('attribute', attr);
+
+                translation[attr] = $trans[0];
+                $node.attr(attr, match[2]);
+
+                $node.addClass('o_translatable_attribute').data('translation', translation);
+            });
+            $edited = $edited.add(attrEdit);
+        });
+        const textEdit = $editable.filter('textarea:contains(data-oe-translation-id)');
+        textEdit.each(function () {
+            var $node = $(this);
+            var translation = $node.data('translation') || {};
+            var trans = $node.text();
+            var match = trans.match(translationRegex);
+            var $trans = $(trans).addClass('d-none o_editable o_editable_translatable_text').appendTo(self.websiteService.pageDocument.body);
+            $trans.data('$node', $node);
+
+            translation['textContent'] = $trans[0];
+            $trans.remove();
+            $node.val(match[2]);
+
+            $node.addClass('o_translatable_text').data('translation', translation);
+        });
+        $edited = $edited.add(textEdit);
+
+        $edited.each(function () {
+            var $node = $(this);
+            var select2 = $node.data('select2');
+            if (select2) {
+                select2.blur();
+                $node.on('translate', function () {
+                    select2.blur();
+                });
+                $node = select2.container.find('input');
+            }
+        });
+
+        this.translations = [];
+        this.$translations = this.getEditableArea().filter('.o_translatable_attribute, .o_translatable_text');
+        this.$editables = $(this.websiteService.pageDocument).find('.o_editable_translatable_attribute, .o_editable_translatable_text');
+
+        this.markTranslatableNodes();
+        this.$translations.filter('input[type=hidden].o_translatable_input_hidden').prop('type', 'text');
+
+        // We don't want the BS dropdown to close
+        // when clicking in a element to translate
+        $(this.websiteService.pageDocument).find('.dropdown-menu').on('click', '.o_editable', function (ev) {
+            ev.stopPropagation();
+            ev.preventDefault();
+        });
+
+        if (!localStorage.getItem(localStorageNoDialogKey)) {
+            this.dialogService.add(TranslatorInfoDialog, {
+                primaryClick: () => localStorage.setItem(localStorageNoDialogKey, true),
+                primaryTitle: this.env._t("Ok, never show me this again"),
+                secondaryTitle: this.env._t("Ok"),
+            });
+        }
+
+        // Apply data-oe-readonly on nested data.
+        $(this.websiteService.pageDocument).find(savableSelector)
+            .filter(':has(' + savableSelector + ')')
+            .attr('data-oe-readonly', true);
+
+        const styleEl = document.createElement('style');
+        styleEl.id = "translate-stylesheet";
+        this.websiteService.pageDocument.head.appendChild(styleEl);
+
+        const toTranslateColor = window.getComputedStyle(document.documentElement).getPropertyValue('--o-we-content-to-translate-color');
+        const translatedColor = window.getComputedStyle(document.documentElement).getPropertyValue('--o-we-translated-content-color');
+
+        styleEl.sheet.insertRule(`[data-oe-translation-state].o_dirty {background: ${translatedColor} !important;}`);
+        styleEl.sheet.insertRule(`[data-oe-translation-state="translated"] {background: ${translatedColor} !important;}`);
+        styleEl.sheet.insertRule(`[data-oe-translation-state] {background: ${toTranslateColor} !important;}`);
+    }
+
+    markTranslatableNodes() {
+        const self = this;
+        this.getEditableArea().each(function () {
+            var $node = $(this);
+            const translation = self.getTranslationObject(this);
+            translation.value = (translation.value ? translation.value : $node.html()).replace(/[ \t\n\r]+/, ' ');
+        });
+
+        // attributes
+
+        this.$translations.each(function () {
+            var $node = $(this);
+            var translation = $node.data('translation');
+            _.each(translation, function (node, attr) {
+                var trans = self.getTranslationObject(node);
+                trans.value = (trans.value ? trans.value : $node.html()).replace(/[ \t\n\r]+/, ' ');
+                $node.attr('data-oe-translation-state', (trans.state || 'to_translate'));
+            });
+        });
+
+        this.$translations.prependEvent('click.translator', (ev) => {
+            this.dialogService.add(AttributeTranslateDialog, { node: ev.target, showSecondaryButton: false });
+        });
+    }
+
+    _onSave(ev) {
+        ev.stopPropagation();
+    }
+}
diff --git a/addons/website/static/src/components/translator/translator.scss b/addons/website/static/src/components/translator/translator.scss
new file mode 100644
index 00000000000..18524f0ed45
--- /dev/null
+++ b/addons/website/static/src/components/translator/translator.scss
@@ -0,0 +1,13 @@
+.oe_translate_examples {
+    li {
+        margin: 10px;
+        padding: 4px;
+
+        [data-oe-translation-state] {
+            background: $o-we-translated-content-color;
+        }
+        [data-oe-translation-state="to_translate"] {
+            background: $o-we-content-to-translate-color;
+        }
+    }
+}
diff --git a/addons/website/static/src/components/translator/translator.xml b/addons/website/static/src/components/translator/translator.xml
index d3067f5e699..e4dd94f333e 100644
--- a/addons/website/static/src/components/translator/translator.xml
+++ b/addons/website/static/src/components/translator/translator.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
-<div t-name="website.TranslatorInfoDialog">
+<div t-name="website.TranslatorInfoDialog" owl="1">
     <p>You are about to enter the translation mode.</p>
     <p>Here are the visuals used to help you translate efficiently:</p>
     <ul class="oe_translate_examples">
@@ -12,4 +12,8 @@
         Each modification on the master page is automatically applied to all translated versions.
     </p>
 </div>
+
+<div t-name="website.AttributeTranslateDialog" owl="1">
+    <div t-ref="form-container"/>
+</div>
 </templates>
diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
index 5a4ea0ccea0..f449c14fa79 100644
--- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
@@ -21,7 +21,7 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
      */
     setup() {
         super.setup();
-        const options = this.props.options || {};
+        this.options = this.props.options || {};
 
         this.websiteService = useWowlService('website');
         this.userService = useWowlService('user');
@@ -32,8 +32,8 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
         this.oeStructureSelector = '#wrapwrap .oe_structure[data-oe-xpath][data-oe-id]';
         this.oeFieldSelector = '#wrapwrap [data-oe-field]';
         this.oeCoverSelector = '#wrapwrap .s_cover[data-res-model], #wrapwrap .o_record_cover_container[data-res-model]';
-        if (options.savableSelector) {
-            this.savableSelector = options.savableSelector;
+        if (this.props.savableSelector) {
+            this.savableSelector = this.props.savableSelector;
         } else {
             this.savableSelector = `${this.oeStructureSelector}, ${this.oeFieldSelector}, ${this.oeCoverSelector}`;
         }
@@ -56,6 +56,9 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
                 // Disable OdooEditor observer's while setting up classes
                 this.widget.odooEditor.observerUnactive();
                 this._addEditorMessages();
+                if (this.props.beforeEditorActive) {
+                    await this.props.beforeEditorActive(this.$editable);
+                }
                 this._setObserver();
 
                 if (this.props.snippetSelector) {
@@ -104,6 +107,9 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
      * @returns {*}
      */
     editableElements($wrapwrap) {
+        if (this.props.editableElements) {
+            return this.props.editableElements();
+        }
         return $wrapwrap.find('[data-oe-model]')
             .not('.o_not_editable')
             .filter(function () {
@@ -180,6 +186,7 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
             powerboxCommands: this._getSnippetsCommands(),
             showEmptyElementHint: false,
             getReadOnlyAreas: this._getReadOnlyAreas.bind(this),
+            ...this.props.wysiwygOptions,
         };
     }
     /**
diff --git a/addons/website/static/src/js/content/redirect.js b/addons/website/static/src/js/content/redirect.js
index 8c1a030e93e..1a40e7cf711 100644
--- a/addons/website/static/src/js/content/redirect.js
+++ b/addons/website/static/src/js/content/redirect.js
@@ -22,6 +22,7 @@ document.addEventListener('DOMContentLoaded', () => {
         const {pathname, search} = window.location;
         const params = new URLSearchParams(search);
         const enableEditor = params.get('enable_editor');
+        const editTranslations = params.get('edit_translations');
         params.delete('enable_editor');
         let newSearch = params.toString();
         if (newSearch) {
@@ -29,10 +30,16 @@ document.addEventListener('DOMContentLoaded', () => {
         }
         const backendPath = `/web#action=website.website_preview&path=${encodeURIComponent(`${pathname}${newSearch}`)}&website_id=${websiteId}`;
 
-        const autoredirectToBackendAction = !!enableEditor;
+        const autoredirectToBackendAction = enableEditor || editTranslations;
         if (autoredirectToBackendAction) {
             document.body.innerHTML = '';
-            window.location.replace(`${backendPath}${enableEditor ? '&enable_editor=1' : ''}`);
+            if (enableEditor) {
+                window.location.replace(`${backendPath}&enable_editor=1`);
+            } else if (editTranslations) {
+                window.location.replace(`${backendPath}&edit_translations=1`);
+            } else {
+                window.location.replace(backendPath);
+            }
         } else {
             // FIXME this UI does not respect access rights yet but we will
             // probably end up doing it in XML instead of JS anyway.
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 1de87ca13d5..bc54e4de92c 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -15,12 +15,6 @@
     }
 }
 
-// TRANSLATIONS
-.oe_translate_examples li {
-    margin: 10px;
-    padding: 4px;
-}
-
 html[lang] > body.editor_enable [data-oe-translation-state] {
     background: rgba($o-we-content-to-translate-color, 0.5) !important;
 
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 115928c30c6..5b32bd0158b 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -84,7 +84,7 @@ export const websiteService = {
                 if (!document) {
                     return;
                 }
-                const { mainObject, seoObject, isPublished, canPublish, editableInBackend } = document.documentElement.dataset;
+                const { mainObject, seoObject, isPublished, canPublish, editableInBackend, translatable } = document.documentElement.dataset;
                 currentMetadata = {
                     path: document.location.href,
                     mainObject: unslugHtmlDataObject(mainObject),
@@ -93,6 +93,7 @@ export const websiteService = {
                     canPublish: canPublish === 'True',
                     editableInBackend: editableInBackend === 'True',
                     title: document.title,
+                    translatable: !!translatable,
                 };
                 websiteSystrayRegistry.trigger('CONTENT-UPDATED');
             },
@@ -121,13 +122,15 @@ export const websiteService = {
             get wysiwygLoaded() {
                 return !!Wysiwyg;
             },
-            goToWebsite({ websiteId, path } = {}) {
+            goToWebsite({ websiteId, path, edition, translation } = {}) {
                 action.doAction('website.website_preview', {
                     clearBreadcrumbs: true,
                     additionalContext: {
                         params: {
                             website_id: websiteId,
                             path,
+                            enable_editor: edition,
+                            edit_translations: translation,
                         },
                     },
                 });
diff --git a/addons/website/static/src/systray_items/edit_website.js b/addons/website/static/src/systray_items/edit_website.js
index 0b52d80c732..b470843d190 100644
--- a/addons/website/static/src/systray_items/edit_website.js
+++ b/addons/website/static/src/systray_items/edit_website.js
@@ -6,7 +6,7 @@ import { useService } from '@web/core/utils/hooks';
 const { Component, useState, useEffect } = owl;
 
 class EditWebsiteSystray extends Component {
-    setup(options = {}) {
+    setup() {
         this.websiteService = useService('website');
         this.websiteContext = useState(this.websiteService.context);
 
@@ -24,8 +24,32 @@ class EditWebsiteSystray extends Component {
         }, () => [this.websiteContext.edition, this.websiteContext.snippetsLoaded]);
     }
 
+    get translatable() {
+        return this.websiteService.currentWebsite && this.websiteService.currentWebsite.metadata.translatable;
+    }
+
+    get label() {
+        if (this.translatable) {
+            return this.env._t("or edit master");
+        }
+        return this.env._t("Edit");
+    }
+
     startEdit() {
-        this.websiteContext.edition = true;
+        if (this.translatable) {
+            // We are in translate mode, the pathname starts with '/<url_code>'. By
+            // adding a trailing slash we can simply search for the first slash
+            // after the language code to remove the language part.
+            const { pathname, search, hash } = this.websiteService.contentWindow.location;
+            const languagePrefix = `${pathname}/`.indexOf('/', 1);
+            const defaultLanguagePathname = pathname.substring(languagePrefix);
+            this.websiteService.goToWebsite({
+                path: `/website/lang/default?r=${encodeURIComponent(defaultLanguagePathname + search + hash)}`,
+                edition: true
+            });
+        } else {
+            this.websiteContext.edition = true;
+        }
     }
 }
 EditWebsiteSystray.template = "website.EditWebsiteSystray";
@@ -34,4 +58,4 @@ export const systrayItem = {
     Component: EditWebsiteSystray,
 };
 
-registry.category("website_systray").add("EditWebsite", systrayItem, { sequence: 9 });
+registry.category("website_systray").add("EditWebsite", systrayItem, { sequence: 8 });
diff --git a/addons/website/static/src/systray_items/edit_website.scss b/addons/website/static/src/systray_items/edit_website.scss
index eb513114021..facb2a8946d 100644
--- a/addons/website/static/src/systray_items/edit_website.scss
+++ b/addons/website/static/src/systray_items/edit_website.scss
@@ -1,3 +1,5 @@
 .o_edit_website_container {
-    @include button-variant($o-brand-primary, $o-brand-primary);
+    &:not(.o_translatable) {
+        @include button-variant($o-brand-primary, $o-brand-primary);
+    }
 }
diff --git a/addons/website/static/src/systray_items/edit_website.xml b/addons/website/static/src/systray_items/edit_website.xml
index ec3dea29187..44267d62af2 100644
--- a/addons/website/static/src/systray_items/edit_website.xml
+++ b/addons/website/static/src/systray_items/edit_website.xml
@@ -1,10 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 <t t-name="website.EditWebsiteSystray" owl="1">
-    <div class="o_edit_website_container o_edit_website_container">
+    <div class="o_edit_website_container" t-att-class="{ o_translatable: translatable }">
         <a href="#" accesskey="a" t-on-click="startEdit">
-            <span class="fa mr-2" t-att-class="{ 'fa-refresh fa-spin': this.state.isLoading, 'fa-pencil': !this.state.isLoading }"/>
-            Edit
+            <span t-if="translatable" class="fa fa-pencil mr-2"/>
+            <span t-else="" class="fa mr-2" t-att-class="{ 'fa-refresh fa-spin': this.state.isLoading, 'fa-pencil': !this.state.isLoading }"/>
+            <t t-esc="label"/>
         </a>
     </div>
 </t>
diff --git a/addons/website/static/src/systray_items/translate_website.js b/addons/website/static/src/systray_items/translate_website.js
index cca36d65cec..630f447b54e 100644
--- a/addons/website/static/src/systray_items/translate_website.js
+++ b/addons/website/static/src/systray_items/translate_website.js
@@ -1,360 +1,35 @@
-odoo.define('website.translateMenu', function (require) {
-'use strict';
+/** @odoo-module **/
 
-require('web.dom_ready');
-var core = require('web.core');
-var weDialog = require('wysiwyg.widgets.Dialog');
-var Dialog = require('web.Dialog');
-var EditorMenu = require('website.editMenu');
-var localStorage = require('web.local_storage');
-var websiteNavbarData = require('website.navbar');
+import { registry } from "@web/core/registry";
+import { useService } from '@web/core/utils/hooks';
 
-const { registry } = require("@web/core/registry");
+const { Component, useState } = owl;
 
-var _t = core._t;
+class TranslateWebsiteSystray extends Component {
+    setup() {
+        this.websiteService = useService('website');
+        this.websiteContext = useState(this.websiteService.context);
+    }
 
-var localStorageNoDialogKey = 'website_translator_nodialog';
-
-var TranslatorInfoDialog = Dialog.extend({
-    template: 'website.TranslatorInfoDialog',
-    xmlDependencies: Dialog.prototype.xmlDependencies.concat(
-        ['/website/static/src/components/translator/translator.xml']
-    ),
-
-    /**
-     * @constructor
-     */
-    init: function (parent, options) {
-        this._super(parent, _.extend({
-            title: _t("Translation Info"),
-            buttons: [
-                {text: _t("Ok, never show me this again"), classes: 'btn-primary', close: true, click: this._onStrongOk.bind(this)},
-                {text: _t("Ok"), close: true}
-            ],
-        }, options || {}));
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Called when the "strong" ok is clicked -> adapt localstorage to make sure
-     * the dialog is never displayed again.
-     *
-     * @private
-     */
-    _onStrongOk: function () {
-        localStorage.setItem(localStorageNoDialogKey, true);
-    },
-});
-
-// TODO: Handle this once images are handled.
-var AttributeTranslateDialog = weDialog.extend({
-    /**
-     * @constructor
-     */
-    init: function (parent, options, node) {
-        this._super(parent, _.extend({
-            title: _t("Translate Attribute"),
-            buttons: [
-                {text: _t("Close"), classes: 'btn-primary', click: this.save}
-            ],
-        }, options || {}));
-        this.wysiwyg = options.wysiwyg;
-        this.node = node;
-        this.translation = $(node).data('translation');
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        var $group = $('<div/>', {class: 'form-group'}).appendTo(this.$el);
-        _.each(this.translation, function (node, attr) {
-            var $node = $(node);
-            var $label = $('<label class="col-form-label"></label>').text(attr);
-            var $input = $('<input class="form-control"/>').val($node.html());
-            $input.on('change keyup', function () {
-                var value = $input.val();
-                $node.html(value).trigger('change', node);
-                if ($node.data('attribute')) {
-                    $node.data('$node').attr($node.data('attribute'), value).trigger('translate');
-                } else {
-                    $node.data('$node').val(value).trigger('translate');
-                }
-                $node.trigger('change');
+    startTranslate() {
+        const { pathname, search, hash } = this.websiteService.contentWindow.location;
+        if (!search.includes('edit_translations')) {
+            const searchParams = new URLSearchParams(search);
+            searchParams.set('edit_translations', '1');
+            this.websiteService.goToWebsite({
+                path: encodeURI(pathname + `?${searchParams.toString() + hash}`),
+                translation: true
             });
-            $group.append($label).append($input);
-        });
-        return this._super.apply(this, arguments);
-    },
-});
-
-const savableSelector = '[data-oe-translation-id], ' +
-    '[data-oe-model][data-oe-id][data-oe-field], ' +
-    '[placeholder*="data-oe-translation-id="], ' +
-    '[title*="data-oe-translation-id="], ' +
-    '[value*="data-oe-translation-id="], ' +
-    'textarea:contains(data-oe-translation-id), ' +
-    '[alt*="data-oe-translation-id="]';
-
-var TranslatePageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
-    assetLibs: ['web_editor.compiled_assets_wysiwyg', 'website.compiled_assets_wysiwyg'],
-
-    actions: _.extend({}, websiteNavbarData.WebsiteNavbar.prototype.actions || {}, {
-        edit_master: '_goToMasterPage',
-        translate: '_startTranslateMode',
-    }),
-    custom_events: {
-        ready_to_save: '_onSave',
-    },
-
-    /**
-     * @override
-     */
-    start: function () {
-        var context;
-        this.trigger_up('context_get', {
-            extra: true,
-            callback: function (ctx) {
-                context = ctx;
-            },
-        });
-        this._mustEditTranslations = context.edit_translations;
-        if (this._mustEditTranslations) {
-            var url = new URL(window.location.href);
-            url.searchParams.delete('edit_translations');
-            window.history.replaceState({}, null, url);
-
-            this._startTranslateMode();
+        } else {
+            this.websiteContext.translation = true;
         }
-        return this._super.apply(this, arguments);
-    },
+    }
+}
+TranslateWebsiteSystray.template = "website.TranslateWebsiteSystray";
 
-    //--------------------------------------------------------------------------
-    // Actions
-    //--------------------------------------------------------------------------
+export const systrayItem = {
+    Component: TranslateWebsiteSystray,
+    isDisplayed: env => env.services.website.currentWebsite && env.services.website.currentWebsite.metadata.translatable,
+};
 
-    /**
-     * Redirects the user to the same page but in the original language and in
-     * edit mode.
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _goToMasterPage: function () {
-        var current = document.createElement('a');
-        current.href = window.location.toString();
-        current.search += (current.search ? '&' : '?') + 'enable_editor=1';
-        // We are in translate mode, the pathname starts with '/<url_code>'. By
-        // adding a trailing slash we can simply search for the first slash
-        // after the language code to remove the language part.
-        const startPath = (current.pathname + '/').indexOf('/', 1);
-        current.pathname = current.pathname.substring(startPath);
-
-        var link = document.createElement('a');
-        link.href = '/website/lang/default';
-        link.search += (link.search ? '&' : '?') + 'r=' + encodeURIComponent(current.pathname + current.search + current.hash);
-
-        window.location = link.href;
-        return new Promise(function () {});
-    },
-    /**
-     * Redirects the user to the same page in translation mode (or start the
-     * translator is translation mode is already enabled).
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _startTranslateMode: async function () {
-        const self = this;
-        if (!this._mustEditTranslations) {
-            window.location.search += '&edit_translations';
-            return new Promise(function () {});
-        }
-
-        const params = {
-            enableTranslation: true,
-            devicePreview: false,
-        };
-
-        this.translator = new EditorMenu(this, {
-            wysiwygOptions: params,
-            savableSelector: savableSelector,
-            editableFromEditorMenu: () => {
-                return $(savableSelector)
-                    .not('[data-oe-readonly]');
-            },
-            beforeEditorActive: async () => {
-                var attrs = ['placeholder', 'title', 'alt', 'value'];
-                const $editable = self._getEditableArea();
-                const translationRegex = /<span [^>]*data-oe-translation-id="([0-9]+)"[^>]*>(.*)<\/span>/;
-                let $edited = $();
-                _.each(attrs, function (attr) {
-                    const attrEdit = $editable.filter('[' + attr + '*="data-oe-translation-id="]').filter(':empty, input, select, textarea, img');
-                    attrEdit.each(function () {
-                        var $node = $(this);
-                        var translation = $node.data('translation') || {};
-                        var trans = $node.attr(attr);
-                        var match = trans.match(translationRegex);
-                        var $trans = $(trans).addClass('d-none o_editable o_editable_translatable_attribute').appendTo('body');
-                        $trans.data('$node', $node).data('attribute', attr);
-
-                        translation[attr] = $trans[0];
-                        $node.attr(attr, match[2]);
-
-                        $node.addClass('o_translatable_attribute').data('translation', translation);
-                    });
-                    $edited = $edited.add(attrEdit);
-                });
-                const textEdit = $editable.filter('textarea:contains(data-oe-translation-id)');
-                textEdit.each(function () {
-                    var $node = $(this);
-                    var translation = $node.data('translation') || {};
-                    var trans = $node.text();
-                    var match = trans.match(translationRegex);
-                    var $trans = $(trans).addClass('d-none o_editable o_editable_translatable_text').appendTo('body');
-                    $trans.data('$node', $node);
-
-                    translation['textContent'] = $trans[0];
-                    $node.val(match[2]);
-
-                    $node.addClass('o_translatable_text').data('translation', translation);
-                });
-                $edited = $edited.add(textEdit);
-
-                $edited.each(function () {
-                    var $node = $(this);
-                    var select2 = $node.data('select2');
-                    if (select2) {
-                        select2.blur();
-                        $node.on('translate', function () {
-                            select2.blur();
-                        });
-                        $node = select2.container.find('input');
-                    }
-                });
-
-                self.translations = [];
-                self.$translations = self._getEditableArea().filter('.o_translatable_attribute, .o_translatable_text');
-                self.$editables = $('.o_editable_translatable_attribute, .o_editable_translatable_text');
-
-                self.$editables.on('change', function () {
-                    self.trigger_up('rte_change', {target: this});
-                });
-
-                self._markTranslatableNodes();
-                this.$translations.filter('input[type=hidden].o_translatable_input_hidden').prop('type', 'text');
-            },
-        });
-
-        // We don't want the BS dropdown to close
-        // when clicking in a element to translate
-        $('.dropdown-menu').on('click', '.o_editable', function (ev) {
-            ev.stopPropagation();
-        });
-
-        if (!localStorage.getItem(localStorageNoDialogKey)) {
-            new TranslatorInfoDialog(this.translator).open();
-        }
-
-        await this.translator.prependTo(document.body);
-        // Apply data-oe-readonly on nested data.
-        $(savableSelector)
-            .filter(':has(' + savableSelector + ')')
-            .attr('data-oe-readonly', true);
-        await this.translator._startEditMode();
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Return the editable area.
-     *
-     * @override
-     * @returns {JQuery}
-     */
-    _getEditableArea: function () {
-        return this.translator.wysiwyg.$editable.find(':o_editable').add(this.$editables);
-    },
-    /**
-     * Returns a translation object.
-     *
-     * @private
-     * @param {Node} node
-     * @returns {Object}
-     */
-    _getTranlationObject: function (node) {
-        var $node = $(node);
-        var id = +$node.data('oe-translation-id');
-        if (!id) {
-            id = $node.data('oe-model') + ',' + $node.data('oe-id') + ',' + $node.data('oe-field');
-        }
-        var trans = _.find(this.translations, function (trans) {
-            return trans.id === id;
-        });
-        if (!trans) {
-            this.translations.push(trans = {'id': id});
-        }
-        return trans;
-    },
-    /**
-     * @private
-     */
-    _markTranslatableNodes: function () {
-        var self = this;
-        this._getEditableArea().each(function () {
-            var $node = $(this);
-            var trans = self._getTranlationObject(this);
-            trans.value = (trans.value ? trans.value : $node.html()).replace(/[ \t\n\r]+/, ' ');
-        });
-        this._getEditableArea().prependEvent('click.translator', function (ev) {
-            if (ev.ctrlKey || !$(ev.target).is(':o_editable')) {
-                return;
-            }
-            ev.preventDefault();
-            ev.stopPropagation();
-        });
-
-        // attributes
-
-        this.$translations.each(function () {
-            var $node = $(this);
-            var translation = $node.data('translation');
-            _.each(translation, function (node, attr) {
-                var trans = self._getTranlationObject(node);
-                trans.value = (trans.value ? trans.value : $node.html()).replace(/[ \t\n\r]+/, ' ');
-                $node.attr('data-oe-translation-state', (trans.state || 'to_translate'));
-            });
-        });
-
-        this.$translations.prependEvent('mousedown.translator click.translator mouseup.translator', function (ev) {
-            if (ev.ctrlKey) {
-                return;
-            }
-            ev.preventDefault();
-            ev.stopPropagation();
-            if (ev.type !== 'mousedown') {
-                return;
-            }
-
-            new AttributeTranslateDialog(self, {}, ev.target).open();
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    _onSave: function (ev) {
-        ev.stopPropagation();
-    },
-});
-
-registry.category("website_navbar_widgets").add("TranslatePageMenu", {
-    Widget: TranslatePageMenu,
-    selector: '.o_menu_systray:has([data-action="translate"])',
-});
-});
+registry.category("website_systray").add("TranslateWebsiteSystray", systrayItem, { sequence: 9 });
diff --git a/addons/website/static/src/systray_items/translate_website.scss b/addons/website/static/src/systray_items/translate_website.scss
new file mode 100644
index 00000000000..f8fcfdcfb5a
--- /dev/null
+++ b/addons/website/static/src/systray_items/translate_website.scss
@@ -0,0 +1,3 @@
+.o_translate_website_container {
+    @include button-variant($o-brand-primary, $o-brand-primary);
+}
diff --git a/addons/website/static/src/systray_items/translate_website.xml b/addons/website/static/src/systray_items/translate_website.xml
new file mode 100644
index 00000000000..666b0dd62fa
--- /dev/null
+++ b/addons/website/static/src/systray_items/translate_website.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="website.TranslateWebsiteSystray" owl="1">
+        <div class="o_translate_website_container">
+            <a href="#" accesskey="a" t-on-click="startTranslate">
+                <span t-if="websiteContext.translation" class="fa fa-refresh fa-spin mr-2"/>
+                TRANSLATE
+            </a>
+        </div>
+    </t>
+</templates>

From 265cacce21791caa9a028a0fb8db5e9a71503d90 Mon Sep 17 00:00:00 2001
From: xO-Tx <mou@odoo.com>
Date: Tue, 19 Apr 2022 16:42:44 +0200
Subject: [PATCH 55/88] [IMP] website: move WebsiteAceEditor to components

See merge commit for more information.

task-2687506
---
 addons/website/__manifest__.py                        |  3 ++-
 .../static/src/components/ace_editor/ace_editor.scss  |  5 +++++
 addons/website/static/src/scss/website.ui.scss        | 11 -----------
 3 files changed, 7 insertions(+), 12 deletions(-)
 create mode 100644 addons/website/static/src/components/ace_editor/ace_editor.scss

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 4e1faf1f86f..59da162cc01 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -172,6 +172,8 @@
             'website/static/src/components/navbar/navbar.js',
             'website/static/src/components/editor/editor.js',
             'website/static/src/components/editor/editor.scss',
+            'website/static/src/components/ace_editor/ace_editor.js',
+            'website/static/src/components/ace_editor/ace_editor.scss',
             'website/static/src/components/dialog/*.js',
             'website/static/src/components/dialog/*.scss',
             'website/static/src/components/switch/switch.js',
@@ -270,7 +272,6 @@
             'website/static/src/js/set_view_track.js',
             'website/static/src/js/tours/homepage.js',
             'website/static/src/js/tours/tour_utils.js',
-            'website/static/src/components/ace_editor/ace_editor.js',
         ],
         'web.assets_qweb': [
             'website/static/src/xml/website.backend.xml',
diff --git a/addons/website/static/src/components/ace_editor/ace_editor.scss b/addons/website/static/src/components/ace_editor/ace_editor.scss
new file mode 100644
index 00000000000..592bc563a43
--- /dev/null
+++ b/addons/website/static/src/components/ace_editor/ace_editor.scss
@@ -0,0 +1,5 @@
+.o_ace_view_editor {
+    @include o-position-absolute($o-navbar-height, 0, 0);
+    position: fixed;
+    z-index: $zindex-modal;
+}
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index c040bb19719..b77dee98527 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -113,17 +113,6 @@ body {
     margin: 50px auto;
 }
 
-// ACE EDITOR
-.o_ace_view_editor {
-    @include o-w-preserve-base;
-    @include o-w-preserve-btn;
-    @include o-w-preserve-forms;
-
-    @include o-position-absolute($o-navbar-height, 0, 0);
-    position: fixed;
-    z-index: $zindex-modal;
-}
-
 // POPOVER NAVIGATION
 .tour .popover-navigation {
     margin-left: 13px;

From 55f1680c74d3b64c3319ba114f7ba3e3f7b49be3 Mon Sep 17 00:00:00 2001
From: xO-Tx <mou@odoo.com>
Date: Wed, 20 Apr 2022 14:43:58 +0200
Subject: [PATCH 56/88] [IMP] website, web_editor: add website navbar AceEditor

The goal of this commit is to adapt the website HTML/CSS/JS editor using
a 'ComponentAdapter' to website backend.

Since we reload the iframe only after editing resources, the
'_updateEditor' method was added to update UI (toggle 'resetButton'
visibility,...) and get the same behaviour (on save/reset) as before
using iframe.

See merge commit for more information.

task-2687506
---
 addons/web_editor/static/src/js/common/ace.js |   7 +-
 addons/website/__manifest__.py                |   1 +
 .../src/components/ace_editor/ace_editor.js   | 122 ++++++++++++------
 .../static/src/components/navbar/navbar.js    |  39 ++++--
 .../static/src/components/navbar/navbar.xml   |  10 ++
 .../static/src/services/website_service.js    |   1 +
 addons/website/views/website_views.xml        |   6 +
 7 files changed, 134 insertions(+), 52 deletions(-)
 create mode 100644 addons/website/static/src/components/navbar/navbar.xml

diff --git a/addons/web_editor/static/src/js/common/ace.js b/addons/web_editor/static/src/js/common/ace.js
index c3ffafae00e..2b744f79c45 100644
--- a/addons/web_editor/static/src/js/common/ace.js
+++ b/addons/web_editor/static/src/js/common/ace.js
@@ -1004,7 +1004,12 @@ var ViewEditor = Widget.extend({
      * @private
      */
     _onSaveClick: function (ev) {
-        const restore = dom.addButtonLoadingEffect(ev.currentTarget);
+        const restoreSave = dom.addButtonLoadingEffect(ev.currentTarget);
+        const restore = () => {
+            restoreSave();
+            this.$resetButton[0].disabled = false;
+        };
+        this.$resetButton[0].disabled = true;
         this._saveResources().then(restore).guardedCatch(restore);
     },
     /**
diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 59da162cc01..6071e4584a3 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -282,6 +282,7 @@
             'website/static/src/client_actions/*/*.xml',
             'website/static/src/systray_items/*.xml',
             'website/static/src/components/translator/*.xml',
+            'website/static/src/components/navbar/navbar.xml',
         ],
         'website.test_bundle': [
             '/web/static/lib/qweb/qweb2.js',
diff --git a/addons/website/static/src/components/ace_editor/ace_editor.js b/addons/website/static/src/components/ace_editor/ace_editor.js
index f43b695cff3..ea1ec060d4a 100644
--- a/addons/website/static/src/components/ace_editor/ace_editor.js
+++ b/addons/website/static/src/components/ace_editor/ace_editor.js
@@ -1,13 +1,12 @@
-odoo.define("website.ace", function (require) {
-"use strict";
+/** @odoo-module */
 
-var AceEditor = require('web_editor.ace');
+import {ComponentAdapter} from 'web.OwlCompatibility';
+import {useService} from '@web/core/utils/hooks';
+import AceEditor from 'web_editor.ace';
 
-/**
- * Extends the default view editor so that the URL hash is updated with view ID
- */
-var WebsiteAceEditor = AceEditor.extend({
-    hash: '#advanced-view-editor',
+const {Component} = owl;
+
+export const WebsiteAceEditor = AceEditor.extend({
 
     //--------------------------------------------------------------------------
     // Public
@@ -16,9 +15,8 @@ var WebsiteAceEditor = AceEditor.extend({
     /**
      * @override
      */
-    do_hide: function () {
-        this._super.apply(this, arguments);
-        window.location.hash = "";
+    do_hide() {
+        this.options.toggleAceEditor(false);
     },
 
     //--------------------------------------------------------------------------
@@ -28,16 +26,9 @@ var WebsiteAceEditor = AceEditor.extend({
     /**
      * @override
      */
-    _displayResource: function () {
-        this._super.apply(this, arguments);
-        this._updateHash();
-    },
-    /**
-     * @override
-     */
-    _saveResources: function () {
-        return this._super.apply(this, arguments).then((function () {
-            var defs = [];
+    _saveResources() {
+        return this._super.apply(this, arguments).then(() => {
+            const defs = [];
             if (this.currentType === 'xml') {
                 // When saving a view, the view ID might change. Thus, the
                 // active ID in the URL will be incorrect. After the save
@@ -45,10 +36,10 @@ var WebsiteAceEditor = AceEditor.extend({
                 // We need to find the new ID (either because the view became
                 // specific or because its parent was edited too and the view
                 // got copy/unlink).
-                var selectedView = _.findWhere(this.views, {id: this._getSelectedResource()});
-                var context;
+                const selectedView = _.findWhere(this.views, {id: this._getSelectedResource()});
+                let context;
                 this.trigger_up('context_get', {
-                    callback: function (ctx) {
+                    callback: (ctx) => {
                         context = ctx;
                     },
                 });
@@ -57,17 +48,13 @@ var WebsiteAceEditor = AceEditor.extend({
                     method: 'search_read',
                     fields: ['id'],
                     domain: [['key', '=', selectedView.key], ['website_id', '=', context.website_id]],
-                }).then((function (view) {
-                    if (view[0]) {
-                        this._updateHash(view[0].id);
-                    }
-                }).bind(this)));
+                }));
             }
-            return Promise.all(defs).then((function () {
-                window.location.reload();
-                return new Promise(function () {});
+            return Promise.all(defs).then((async () => {
+                await this._updateEditor();
+                this.options.reload();
             }));
-        }).bind(this));
+        });
     },
     /**
      * @override
@@ -88,21 +75,72 @@ var WebsiteAceEditor = AceEditor.extend({
     /**
      * @override
      */
-    _resetResource: function () {
-        return this._super.apply(this, arguments).then((function () {
-            window.location.reload();
-            return new Promise(function () {});
+    _resetResource() {
+        return this._super.apply(this, arguments).then((() => {
+            this._updateEditor();
+            this.options.reload();
         }).bind(this));
     },
     /**
-     * Adds the current resource ID in the URL.
+     * Used to update UI (resource display, toggle resetButton visibility,...)
+     * on save/reset since we reload the iframe only after an update.
      *
      * @private
      */
-    _updateHash: function (resID) {
-        window.location.hash = this.hash + "?res=" + (resID || this._getSelectedResource());
+    async _updateEditor() {
+        if (['js', 'scss'].includes(this.currentType)) {
+            await this._loadResources();
+            return this._displayResource(this._getSelectedResource());
+        }
+    },
+    /**
+     * @override
+     */
+    _rpc(options) {
+        let context;
+        this.trigger_up('context_get', {
+            callback: (ctx) => {
+                context = ctx;
+            },
+        });
+        return this._super({...options, context: context});
     },
 });
 
-return WebsiteAceEditor;
-});
+export class AceEditorAdapterComponent extends ComponentAdapter {
+    setup() {
+        super.setup();
+
+        this.website = useService("website");
+        this.user = useService("user");
+        this.env = Component.env;
+    }
+
+    _trigger_up(event) {
+        if (event.name === 'context_get') {
+            return event.data.callback({...this.user.context, website_id: this.website.currentWebsite.id});
+        }
+        super._trigger_up(event);
+    }
+
+    /**
+     * @override
+     */
+    get widgetArgs() {
+        return [
+            this.website.pageDocument && this.website.pageDocument.documentElement.dataset.viewXmlid,
+            {
+                toggleAceEditor: this.props.toggleAceEditor,
+                defaultBundlesRestriction: [
+                    'web.assets_frontend',
+                    'web.assets_frontend_minimal',
+                    'web.assets_frontend_lazy',
+                ],
+                reload: () => {
+                    this.website.contentWindow.location.reload();
+                },
+            }
+        ];
+    }
+
+}
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
index b6a129a103c..c3e6c880182 100644
--- a/addons/website/static/src/components/navbar/navbar.js
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -6,14 +6,18 @@ import { registry } from "@web/core/registry";
 import { patch } from 'web.utils';
 import { EditMenuDialog } from '@website/components/dialog/edit_menu';
 import { OptimizeSEODialog } from '@website/components/dialog/seo';
+import {WebsiteAceEditor, AceEditorAdapterComponent} from '@website/components/ace_editor/ace_editor';
 
 const websiteSystrayRegistry = registry.category('website_systray');
+const {useState} = owl;
 
 patch(NavBar.prototype, 'website_navbar', {
     setup() {
         this._super();
         this.websiteService = useService('website');
         this.dialogService = useService('dialog');
+        this.websiteContext = useState(this.websiteService.context);
+        this.aceEditor = WebsiteAceEditor;
 
         // The navbar is rerendered with an event, as it can not naturally be
         // with props/state (the WebsitePreview client action and the navbar
@@ -26,7 +30,11 @@ patch(NavBar.prototype, 'website_navbar', {
 
         useBus(websiteSystrayRegistry, 'CONTENT-UPDATED', () => this.render(true));
 
-        this.websiteDialogMenus = {
+        this.toggleAceEditor = (show) => {
+            this.websiteContext.showAceEditor = show;
+        };
+
+        this.websiteEditingMenus = {
             'website.menu_edit_menu': {
                 component: EditMenuDialog,
                 isDisplayed: () => !!this.websiteService.currentWebsite,
@@ -35,13 +43,17 @@ patch(NavBar.prototype, 'website_navbar', {
                 component: OptimizeSEODialog,
                 isDisplayed: () => this.websiteService.currentWebsite && !!this.websiteService.currentWebsite.metadata.mainObject,
             },
+            'website.menu_ace_editor': {
+                openWidget: () => this.toggleAceEditor(true),
+                isDisplayed: () => this.canShowAceEditor(),
+            },
         };
     },
 
     filterWebsiteMenus(sections) {
         const filteredSections = [];
         for (const section of sections) {
-            if (!this.websiteDialogMenus[section.xmlid] || this.websiteDialogMenus[section.xmlid].isDisplayed()) {
+            if (!this.websiteEditingMenus[section.xmlid] || this.websiteEditingMenus[section.xmlid].isDisplayed()) {
                 let subSections = [];
                 if (section.childrenTree.length) {
                     subSections = this.filterWebsiteMenus(section.childrenTree);
@@ -81,13 +93,22 @@ patch(NavBar.prototype, 'website_navbar', {
      * @override
      */
     onNavBarDropdownItemSelection(menu) {
-        const dialogMenu = this.websiteDialogMenus[menu.xmlid];
-        if (dialogMenu) {
-            return this.dialogService.add(
-                dialogMenu.component,
-                dialogMenu.getProps && dialogMenu.getProps(),
-            );
+        const websiteMenu = this.websiteEditingMenus[menu.xmlid];
+        if (websiteMenu) {
+            return websiteMenu.openWidget ?
+                websiteMenu.openWidget() :
+                this.dialogService.add(
+                    websiteMenu.component,
+                    websiteMenu.getProps && websiteMenu.getProps(),
+                );
         }
         return this._super(menu);
-    }
+    },
+
+    canShowAceEditor() {
+        return this.websiteService.pageDocument && this.websiteService.pageDocument.documentElement.dataset.viewXmlid
+            && !this.websiteContext.showNewContentModal && !this.websiteContext.edition;
+    },
 });
+
+NavBar.components.AceEditorAdapterComponent = AceEditorAdapterComponent;
diff --git a/addons/website/static/src/components/navbar/navbar.xml b/addons/website/static/src/components/navbar/navbar.xml
new file mode 100644
index 00000000000..80c1d01c533
--- /dev/null
+++ b/addons/website/static/src/components/navbar/navbar.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+<t t-name="website.NavBar" t-inherit="web.NavBar" t-inherit-mode="extension">
+    <xpath expr="//header" position="after">
+        <AceEditorAdapterComponent t-if="canShowAceEditor() and websiteContext.showAceEditor" Component="aceEditor" toggleAceEditor="toggleAceEditor"/>
+    </xpath>
+</t>
+
+</templates>
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 5b32bd0158b..7fdc5929c03 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -36,6 +36,7 @@ export const websiteService = {
         let Wysiwyg;
         const context = reactive({
             showNewContentModal: false,
+            showAceEditor: false,
             edition: false,
             isPublicRootReady: false,
             snippetsLoaded: false,
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index 081be12098c..a96c8a8af1c 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -563,6 +563,12 @@
             name="Edit Menu"
             action="website.website_preview"/>
 
+        <menuitem id="menu_ace_editor"
+            parent="menu_site"
+            sequence="40"
+            name="HTML / CSS Editor"
+            action="website.website_preview"/>
+
         <menuitem id="menu_website_dashboard"
             name="eCommerce"
             sequence="1"

From a7a96d44c9c589537c3fe6095bc31e26e7362b0b Mon Sep 17 00:00:00 2001
From: xO-Tx <mou@odoo.com>
Date: Wed, 20 Apr 2022 14:54:16 +0200
Subject: [PATCH 57/88] [FIX] website: fix AceEditor on full screen mode

See merge commit for more information.

task-2687506
---
 .../website/static/src/components/ace_editor/ace_editor.scss  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/addons/website/static/src/components/ace_editor/ace_editor.scss b/addons/website/static/src/components/ace_editor/ace_editor.scss
index 592bc563a43..2a2a38827bb 100644
--- a/addons/website/static/src/components/ace_editor/ace_editor.scss
+++ b/addons/website/static/src/components/ace_editor/ace_editor.scss
@@ -2,4 +2,8 @@
     @include o-position-absolute($o-navbar-height, 0, 0);
     position: fixed;
     z-index: $zindex-modal;
+
+    .o_website_fullscreen & {
+        top: 0;
+    }
 }

From 87653259870ec27a89b6bf294d1c679c55527ffb Mon Sep 17 00:00:00 2001
From: xO-Tx <mou@odoo.com>
Date: Mon, 25 Apr 2022 15:05:48 +0200
Subject: [PATCH 58/88] [FIX] website: fix CSS for AceEditor

The use of AceEditor's CSS on "assets_backend" affects the editor widget
on fields.

The goal of this commit is to fix this behaviour by excluding form
fields.

See merge commit for more information.

task-2687506
---
 addons/website/static/src/components/ace_editor/ace_editor.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/website/static/src/components/ace_editor/ace_editor.scss b/addons/website/static/src/components/ace_editor/ace_editor.scss
index 2a2a38827bb..c4eae6c878c 100644
--- a/addons/website/static/src/components/ace_editor/ace_editor.scss
+++ b/addons/website/static/src/components/ace_editor/ace_editor.scss
@@ -1,4 +1,4 @@
-.o_ace_view_editor {
+.o_ace_view_editor:not(.oe_form_field) {
     @include o-position-absolute($o-navbar-height, 0, 0);
     position: fixed;
     z-index: $zindex-modal;

From 2ef7e788263b4742a8e0788f47673b7b31da3726 Mon Sep 17 00:00:00 2001
From: xO-Tx <mou@odoo.com>
Date: Wed, 22 Jun 2022 14:03:26 +0200
Subject: [PATCH 59/88] [IMP] website: add page properties dialog

The goal of this commit is to add the 'Page Properties' dialog using
the 'website.page' form view.

The PagePropertiesDialogWrapper was updated to work on pages listView
(to clone/remove pages).

A boolean field 'is_in_menu' was added to control if page is in menu on
page properties dialog. This should be refactored later as a wizard.

See merge commit for more information.

task-2687506
---
 addons/website/__manifest__.py                |   2 +
 addons/website/models/website.py              |  21 +-
 addons/website/models/website_page.py         | 154 ++++------
 .../src/components/dialog/page_properties.js  | 269 ++++++++++++++++++
 .../components/dialog/page_properties.scss    |   6 +
 .../src/components/dialog/page_properties.xml | 230 ++++-----------
 .../static/src/components/fields/fields.js    |  95 +++++++
 .../static/src/components/fields/fields.xml   |  35 +++
 .../static/src/components/navbar/navbar.js    |  16 +-
 .../static/src/components/navbar/navbar.xml   |   1 +
 addons/website/views/website_views.xml        |  48 ++++
 addons/website_blog/models/website.py         |   6 +-
 12 files changed, 609 insertions(+), 274 deletions(-)
 create mode 100644 addons/website/static/src/components/dialog/page_properties.js
 create mode 100644 addons/website/static/src/components/dialog/page_properties.scss
 create mode 100644 addons/website/static/src/components/fields/fields.js
 create mode 100644 addons/website/static/src/components/fields/fields.xml

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 6071e4584a3..cc83eacb7b3 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -176,6 +176,7 @@
             'website/static/src/components/ace_editor/ace_editor.scss',
             'website/static/src/components/dialog/*.js',
             'website/static/src/components/dialog/*.scss',
+            'website/static/src/components/fields/fields.js',
             'website/static/src/components/switch/switch.js',
             'website/static/src/components/switch/switch.scss',
             'website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js',
@@ -278,6 +279,7 @@
             'website/static/src/xml/website_widget.xml',
             'website/static/src/xml/theme_preview.xml',
             'website/static/src/components/dialog/*',
+            'website/static/src/components/fields/fields.xml',
             'website/static/src/components/editor/editor.xml',
             'website/static/src/client_actions/*/*.xml',
             'website/static/src/systray_items/*.xml',
diff --git a/addons/website/models/website.py b/addons/website/models/website.py
index 0552b19ee8f..3f78bcbd838 100644
--- a/addons/website/models/website.py
+++ b/addons/website/models/website.py
@@ -13,6 +13,7 @@ from psycopg2 import sql
 from werkzeug import urls
 from werkzeug.datastructures import OrderedMultiDict
 from werkzeug.exceptions import NotFound
+from markupsafe import Markup
 
 from odoo import api, fields, models, tools, http, release, registry
 from odoo.addons.http_routing.models.ir_http import RequestUID, slugify, _guess_mimetype, url_for
@@ -722,7 +723,8 @@ class Website(models.Model):
         # we only want a unique_path for website specific.
         # we need to be able to have /url for website=False, and /url for website=1
         # in case of duplicate, page manager will allow you to manage this case
-        domain_static = [('website_id', '=', self.get_current_website().id)]  # .website_domain()
+        website_id = self.env.context.get('website_id', False) or self.get_current_website().id
+        domain_static = [('website_id', '=', website_id)]  # .website_domain()
         page_temp = page_url
         while self.env['website.page'].with_context(active_test=False).sudo().search([('url', '=', page_temp)] + domain_static):
             inc += 1
@@ -761,6 +763,9 @@ class Website(models.Model):
         key_copy = string
         inc = 0
         domain_static = self.get_current_website().website_domain()
+        website_id = self.env.context.get('website_id', False)
+        if website_id:
+            domain_static = [('website_id', 'in', (False, website_id))]
         while self.env['website.page'].with_context(active_test=False).sudo().search([('key', '=', key_copy)] + domain_static):
             inc += 1
             key_copy = string + (inc and "-%s" % inc or "")
@@ -779,7 +784,7 @@ class Website(models.Model):
             return dependencies
 
         page = self.env['website.page'].browse(int(page_id))
-        website = self.env['website'].browse(self._context.get('website_id'))
+        website = page.website_id or self.get_current_website()
         url = page.url
 
         # search for website_page with link
@@ -792,7 +797,7 @@ class Website(models.Model):
         for page in pages:
             dependencies.setdefault(page_key, [])
             dependencies[page_key].append({
-                'text': _('Page <b>%s</b> contains a link to this page', page.url),
+                'content': Markup(_("Page <b>%s</b> contains a link to this page")) % page.url,
                 'item': page.name,
                 'link': page.url,
             })
@@ -807,7 +812,7 @@ class Website(models.Model):
         for view in views:
             dependencies.setdefault(view_key, [])
             dependencies[view_key].append({
-                'text': _('Template <b>%s (id:%s)</b> contains a link to this page') % (view.key or view.name, view.id),
+                'content': Markup(_('Template <b>%s (id:%s)</b> contains a link to this page')) % (view.key or view.name, view.id),
                 'link': '/web#id=%s&view_type=form&model=ir.ui.view' % view.id,
                 'item': _('%s (id:%s)') % (view.key or view.name, view.id),
             })
@@ -820,7 +825,7 @@ class Website(models.Model):
             menu_key = _('Menus')
         for menu in menus:
             dependencies.setdefault(menu_key, []).append({
-                'text': _('This page is in the menu <b>%s</b>', menu.name),
+                'content': Markup(_('This page is in the menu <b>%s</b>')) % menu.name,
                 'link': '/web#id=%s&view_type=form&model=website.menu' % menu.id,
                 'item': menu.name,
             })
@@ -840,7 +845,7 @@ class Website(models.Model):
             return dependencies
 
         page = self.env['website.page'].browse(int(page_id))
-        website = self.env['website'].browse(self._context.get('website_id'))
+        website = page.website_id or self.get_current_website()
         key = page.key
 
         # search for website_page with link
@@ -856,7 +861,7 @@ class Website(models.Model):
         for p in pages:
             dependencies.setdefault(page_key, [])
             dependencies[page_key].append({
-                'text': _('Page <b>%s</b> is calling this file', p.url),
+                'content': Markup(_('Page <b>%s</b> is calling this file')) % p.url,
                 'item': p.name,
                 'link': p.url,
             })
@@ -874,7 +879,7 @@ class Website(models.Model):
         for view in views:
             dependencies.setdefault(view_key, [])
             dependencies[view_key].append({
-                'text': _('Template <b>%s (id:%s)</b> is calling this file') % (view.key or view.name, view.id),
+                'content': Markup(_('Template <b>%s (id:%s)</b> is calling this file')) % (view.key or view.name, view.id),
                 'item': _('%s (id:%s)') % (view.key or view.name, view.id),
                 'link': '/web#id=%s&view_type=form&model=ir.ui.view' % view.id,
             })
diff --git a/addons/website/models/website_page.py b/addons/website/models/website_page.py
index 539022dfca7..7633ad0c6fc 100644
--- a/addons/website/models/website_page.py
+++ b/addons/website/models/website_page.py
@@ -26,8 +26,10 @@ class Page(models.Model):
     view_id = fields.Many2one('ir.ui.view', string='View', required=True, ondelete="cascade")
     website_indexed = fields.Boolean('Is Indexed', default=True)
     date_publish = fields.Datetime('Publishing Date')
-    # This is needed to be able to display if page is a menu in /website/pages
     menu_ids = fields.One2many('website.menu', 'page_id', 'Related Menus')
+    # This is needed to be able to control if page is a menu in page properties.
+    # TODO this should be reviewed entirely so that we use a transient model.
+    is_in_menu = fields.Boolean(compute='_compute_website_menu', inverse='_inverse_website_menu')
     is_homepage = fields.Boolean(compute='_compute_homepage', inverse='_set_homepage', string='Homepage')
     is_visible = fields.Boolean(compute='_compute_visible', string='Is Visible')
 
@@ -61,6 +63,26 @@ class Page(models.Model):
                 not page.date_publish or page.date_publish < fields.Datetime.now()
             )
 
+    @api.depends('menu_ids')
+    def _compute_website_menu(self):
+        for page in self:
+            page.is_in_menu = bool(page.menu_ids)
+
+    def _inverse_website_menu(self):
+        for page in self:
+            if page.is_in_menu:
+                if not page.menu_ids:
+                    self.env['website.menu'].create({
+                        'name': page.name,
+                        'url': page.url,
+                        'page_id': page.id,
+                        'parent_id': page.website_id.menu_id.id,
+                        'website_id': page.website_id.id,
+                    })
+            elif page.menu_ids:
+                # If the page is no longer in menu, we should remove its website_menu
+                page.menu_ids.unlink()
+
     def _get_most_specific_pages(self):
         ''' Returns the most specific pages in self. '''
         ids = []
@@ -72,93 +94,6 @@ class Page(models.Model):
             previous_page = page
         return self.filtered(lambda page: page.id in ids)
 
-    def get_page_properties(self):
-        self.ensure_one()
-        res = self.read([
-            'id', 'view_id', 'name', 'url', 'website_published', 'website_indexed', 'date_publish',
-            'menu_ids', 'is_homepage', 'website_id', 'visibility', 'groups_id'
-        ])[0]
-        if not res['groups_id']:
-            res['group_id'] = self.env.ref('base.group_user').name_get()[0]
-        elif len(res['groups_id']) == 1:
-            res['group_id'] = self.env['res.groups'].browse(res['groups_id']).name_get()[0]
-        del res['groups_id']
-
-        res['visibility_password'] = res['visibility'] == 'password' and self.visibility_password_display or ''
-        return res
-
-    @api.model
-    def save_page_info(self, website_id, data):
-        website = self.env['website'].browse(website_id)
-        page = self.browse(int(data['id']))
-
-        # If URL has been edited, slug it
-        original_url = page.url
-        url = data['url']
-        if not url.startswith('/'):
-            url = '/' + url
-        if page.url != url:
-            url = '/' + slugify(url, max_length=1024, path=True)
-            url = self.env['website'].get_unique_path(url)
-
-        # If name has changed, check for key uniqueness
-        if page.name != data['name']:
-            page_key = self.env['website'].get_unique_key(slugify(data['name']))
-        else:
-            page_key = page.key
-
-        menu = self.env['website.menu'].search([('page_id', '=', int(data['id']))])
-        if not data['is_menu']:
-            # If the page is no longer in menu, we should remove its website_menu
-            if menu:
-                menu.unlink()
-        else:
-            # The page is now a menu, check if has already one
-            if menu:
-                menu.write({'url': url})
-            else:
-                self.env['website.menu'].create({
-                    'name': data['name'],
-                    'url': url,
-                    'page_id': data['id'],
-                    'parent_id': website.menu_id.id,
-                    'website_id': website.id,
-                })
-
-        # Edits via the page manager shouldn't trigger the COW
-        # mechanism and generate new pages. The user manages page
-        # visibility manually with is_published here.
-        w_vals = {
-            'key': page_key,
-            'name': data['name'],
-            'url': url,
-            'is_published': data['website_published'],
-            'website_indexed': data['website_indexed'],
-            'date_publish': data['date_publish'] or None,
-            'is_homepage': data['is_homepage'],
-            'visibility': data['visibility'],
-        }
-        if page.visibility == 'restricted_group' and data['visibility'] != "restricted_group":
-            w_vals['groups_id'] = False
-        elif 'group_id' in data:
-            w_vals['groups_id'] = [data['group_id']]
-        if 'visibility_pwd' in data:
-            w_vals['visibility_password_display'] = data['visibility_pwd'] or ''
-
-        page.with_context(no_cow=True).write(w_vals)
-
-        # Create redirect if needed
-        if data['create_redirect']:
-            self.env['website.rewrite'].create({
-                'name': data['name'],
-                'redirect_type': data['redirect_type'],
-                'url_from': original_url,
-                'url_to': url,
-                'website_id': website.id,
-            })
-
-        return url
-
     @api.returns('self', lambda value: value.id)
     def copy(self, default=None):
         if default:
@@ -178,8 +113,7 @@ class Page(models.Model):
         page = self.browse(int(page_id))
         copy_param = dict(name=page_name or page.name, website_id=self.env['website'].get_current_website().id)
         if page_name:
-            page_url = '/' + slugify(page_name, max_length=1024, path=True)
-            copy_param['url'] = self.env['website'].get_unique_path(page_url)
+            copy_param['url'] = self.get_valid_page_url(page_name)
 
         new_page = page.copy(copy_param)
         # Should not clone menu if the page was cloned from one website to another
@@ -209,8 +143,41 @@ class Page(models.Model):
         return super(Page, self).unlink()
 
     def write(self, vals):
-        if 'url' in vals and not vals['url'].startswith('/'):
-            vals['url'] = '/' + vals['url']
+        for page in self:
+            website_id = False
+            if vals.get('website_id') or page.website_id:
+                website_id = vals.get('website_id') or page.website_id.id
+
+            # If URL has been edited, slug it
+            if 'url' in vals:
+                url = vals['url']
+                redirect_old_url = redirect_type = None
+                # TODO This should be done another way after the backend/frontend merge
+                if isinstance(url, dict):
+                    redirect_old_url = url.get('redirect_old_url')
+                    redirect_type = url.get('redirect_type')
+                    url = url.get('url')
+                if not url.startswith('/'):
+                    url = '/' + url
+                if page.url != url:
+                    url = self.get_valid_page_url(url, website_id)
+                    page.menu_ids.write({'url': url})
+                    if redirect_old_url:
+                        self.env['website.rewrite'].create({
+                            'name': vals.get('name') or page.name,
+                            'redirect_type': redirect_type,
+                            'url_from': page.url,
+                            'url_to': url,
+                            'website_id': website_id,
+                        })
+                vals['url'] = url
+
+            # If name has changed, check for key uniqueness
+            if 'name' in vals and page.name != vals['name']:
+                vals['key'] = self.env['website'].with_context(website_id=website_id).get_unique_key(slugify(vals['name']))
+            if 'visibility' in vals:
+                if vals['visibility'] != 'restricted_group':
+                    vals['groups_id'] = False
         self.clear_caches()  # write on page == write on view that invalid cache
         return super(Page, self).write(vals)
 
@@ -306,6 +273,9 @@ class Page(models.Model):
             results = results.filtered(lambda result: filter_page(search, result, results))
         return results, count
 
+    def get_valid_page_url(self, page_url, website_id=False):
+        url = '/' + slugify(page_url, max_length=1024, path=True)
+        return self.env['website'].with_context(website_id=website_id).get_unique_path(url)
 
 # this is just a dummy function to be used as ormcache key
 def _cached_response():
diff --git a/addons/website/static/src/components/dialog/page_properties.js b/addons/website/static/src/components/dialog/page_properties.js
new file mode 100644
index 00000000000..2144c4bda96
--- /dev/null
+++ b/addons/website/static/src/components/dialog/page_properties.js
@@ -0,0 +1,269 @@
+/** @odoo-module **/
+
+import {CheckBox} from '@web/core/checkbox/checkbox';
+import {useService} from "@web/core/utils/hooks";
+import {useWowlService} from '@web/legacy/utils';
+import {WebsiteDialog} from './dialog';
+import {FormViewDialog} from 'web.view_dialogs';
+import {standaloneAdapter} from 'web.OwlCompatibility';
+import {qweb} from 'web.core';
+
+const {Component, onWillStart, useState, xml, useRef, markup, onWillRender} = owl;
+
+export class PageDependencies extends Component {
+    setup() {
+        super.setup();
+        try {
+            this.orm = useService('orm');
+        } catch {
+            // We are in a legacy environment.
+            // TODO check with framework team to know if this is really needed.
+            this.orm = useWowlService('orm');
+        }
+
+        this.dependencies = {};
+        this.depText = '...';
+        this.action = useRef('action');
+
+        onWillStart(() => this.onWillStart());
+    }
+
+    async onWillStart() {
+        this.dependencies = await this.orm.call(
+            'website',
+            this.props.type === 'key' ?
+                'page_search_key_dependencies' :
+                'page_search_dependencies',
+            [this.props.pageId],
+        );
+        if (this.props.mode === 'popover') {
+            this.depText = Object.entries(this.dependencies)
+                .map(dependency => `${dependency[1].length} ${dependency[0].toLowerCase()}`)
+                .join(', ');
+        } else {
+            for (const key of Object.keys(this.dependencies)) {
+                this.dependencies[key] = this.dependencies[key].map(item => {
+                    // TODO probably need to refactor this feature so that the
+                    // client side is in charge of what the sentences look like
+                    // (not server-side HTML).
+                    item.contentToDisplay = markup(item.content);
+                    return item;
+                });
+            }
+        }
+    }
+
+    showDependencies() {
+        $(this.action.el).popover({
+            title: this.env._t('Dependencies'),
+            boundary: 'viewport',
+            placement: 'right',
+            trigger: 'focus',
+            content: qweb.render('website.PageDependencies.Tooltip', {dependencies: this.dependencies}),
+        }).popover('toggle');
+    }
+}
+PageDependencies.popoverTemplate = xml`
+    <div class="popover o_page_dependencies" role="tooltip">
+        <div class="arrow"/>
+        <h3 class="popover-header"/>
+        <div class="popover-body"/>
+    </div>
+`;
+PageDependencies.template = 'website.PageDependencies';
+PageDependencies.props = {
+    pageId: Number,
+    mode: String,
+    type: {
+        type: String,
+        optional: true,
+    },
+};
+
+export class DeletePageDialog extends WebsiteDialog {
+    setup() {
+        super.setup();
+
+        this.orm = useService('orm');
+        this.website = useService('website');
+        this.title = this.env._t("Delete Page");
+        this.primaryTitle = this.env._t("Ok");
+
+        this.state = useState({
+            confirm: false,
+        });
+    }
+
+    onConfirmCheckboxChange(checked) {
+        this.state.confirm = checked;
+    }
+
+    async primaryClick() {
+        await this.orm.unlink("website.page", [
+            this.props.pageId,
+        ]);
+        this.website.goToWebsite();
+        this.close();
+        this.props.onClose();
+    }
+}
+DeletePageDialog.components = {PageDependencies, CheckBox};
+DeletePageDialog.bodyTemplate = 'website.DeletePageContent';
+DeletePageDialog.footerTemplate = 'website.DeletePageAction';
+DeletePageDialog.props = {
+    ...WebsiteDialog.props,
+    pageId: Number,
+    onClose: Function,
+};
+
+export class DuplicatePageDialog extends WebsiteDialog {
+    setup() {
+        super.setup();
+
+        this.orm = useService('orm');
+        this.website = useService('website');
+
+        this.state = useState({
+            name: '',
+        });
+    }
+
+    async primaryClick() {
+        if (this.state.name) {
+            const res = await this.orm.call(
+                'website.page',
+                'clone_page',
+                [this.props.pageId, this.state.name]
+            );
+            this.website.goToWebsite({path: res, edition: true});
+        }
+        this.close();
+        this.props.onClose();
+    }
+}
+DuplicatePageDialog.bodyTemplate = xml`
+    <div class="form-group row">
+        <label class="col-form-label col-md-3">
+            Page Name
+        </label>
+        <div class="col-md-9">
+            <input type="text" t-model="state.name" class="form-control" required="required"/>
+        </div>
+    </div>
+`;
+DuplicatePageDialog.props = {
+    ...WebsiteDialog.props,
+    onClose: Function,
+};
+
+export class PagePropertiesDialogWrapper extends Component {
+    setup() {
+        try {
+            this.websiteService = useService('website');
+            this.dialogService = useService('dialog');
+            this.orm = useService('orm');
+        } catch {
+            // Use services in legacy environment.
+            this.websiteService = useWowlService('website');
+            this.dialogService = useWowlService('dialog');
+            this.orm = useWowlService('orm');
+        }
+
+        onWillRender(this.setDialogWidget);
+    }
+
+    createDialog() {
+        if (this.props.mode === 'clone') {
+            return {
+                component: DuplicatePageDialog,
+                open: () => this.dialogService.add(DuplicatePageDialog, {
+                    pageId: this.pageId,
+                    onClose: this.props.onClose,
+                }),
+            };
+        } else if (this.props.mode === 'delete') {
+            return {
+                component: DeletePageDialog,
+                open: () => this.dialogService.add(DeletePageDialog, {
+                    pageId: this.pageId,
+                    onClose: this.props.onClose,
+                }),
+            };
+        } else {
+            const parent = standaloneAdapter({Component});
+            const formViewDialog = new FormViewDialog(parent, this.dialogOptions);
+            formViewDialog.buttons = [...formViewDialog.buttons, ...this.extraButtons];
+            formViewDialog.on('form_dialog_discarded', parent, this.setDialogWidget.bind(this));
+            return formViewDialog;
+        }
+    }
+
+    get pageId() {
+        return this.props.currentPage || (this.websiteService.currentWebsite && this.websiteService.currentWebsite.metadata.mainObject.id);
+    }
+
+    get dialogOptions() {
+        return {
+            res_model: "website.page",
+            res_id: this.pageId,
+            context: {
+                form_view_ref: 'website.website_page_properties_view_form'
+            },
+            title: this.env._t("Page Properties"),
+            size: 'medium',
+            on_saved: (record, changed) => {
+                if (changed) {
+                    return this.orm.read("website.page", [this.pageId], ['url']).then(res => {
+                        this.websiteService.goToWebsite({websiteId: record.data.website_id.res_id, path: res[0]['url']});
+                    });
+                }
+            },
+        };
+    }
+
+    get extraButtons() {
+        const wrapper = this;
+        return [{
+            text: this.env._t("Duplicate Page"),
+            icon: 'fa-clone',
+            classes: 'btn-link ml-auto',
+            click: function () {
+                wrapper.dialogService.add(DuplicatePageDialog, {
+                    pageId: wrapper.pageId,
+                    onClose: this.close.bind(this),
+                });
+            },
+        },
+        {
+            text: this.env._t("Delete Page"),
+            icon: 'fa-trash',
+            classes: 'btn-link',
+            click: function () {
+                wrapper.dialogService.add(DeletePageDialog, {
+                    pageId: wrapper.pageId,
+                    onClose: this.close.bind(this),
+                });
+            },
+        }];
+    }
+
+    setDialogWidget() {
+        this.props.setPagePropertiesDialog(this.createDialog());
+    }
+}
+PagePropertiesDialogWrapper.template = xml``;
+PagePropertiesDialogWrapper.props = {
+    setPagePropertiesDialog: Function,
+    onClose: {
+        type: Function,
+        optional: true,
+    },
+    currentPage: {
+        type: Number,
+        optional: true,
+    },
+    mode: {
+        type: String,
+        optional: true,
+    },
+};
diff --git a/addons/website/static/src/components/dialog/page_properties.scss b/addons/website/static/src/components/dialog/page_properties.scss
new file mode 100644
index 00000000000..73ebe1f24d0
--- /dev/null
+++ b/addons/website/static/src/components/dialog/page_properties.scss
@@ -0,0 +1,6 @@
+.o_page_dependencies {
+    .popover-body {
+        overflow-y: auto;
+        max-height: 14.2rem;
+    }
+}
diff --git a/addons/website/static/src/components/dialog/page_properties.xml b/addons/website/static/src/components/dialog/page_properties.xml
index f8f3127d31a..de63850fad3 100644
--- a/addons/website/static/src/components/dialog/page_properties.xml
+++ b/addons/website/static/src/components/dialog/page_properties.xml
@@ -1,185 +1,73 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<templates id="template" xml:space="preserve">
+<templates>
 
-<!-- Tooltip Dependencies -->
+<t t-name="website.PageDependencies" owl="1">
+    <t t-if="!!Object.keys(dependencies).length">
+        <t t-if="props.mode === 'popover'">
+            <t t-set="depTemplate">
+                <t t-call="{{ constructor.popoverTemplate }}"/>
+            </t>
+            <t t-if="props.type === 'key'">
+                <div t-att-data-template="depTemplate" data-html="true" title="Dependencies" t-ref="action">
+                    It looks like your file is being called by
+                    <a href="#" t-on-click="showDependencies"><t t-esc="depText" /></a>.
+                    Changing its name will break these calls.
+                </div>
+            </t>
+            <t t-else="">
+                <div t-att-data-template="depTemplate" data-html="true" title="Dependencies" t-ref="action">
+                    (could be used in <a href="#" t-on-click="showDependencies"><t t-esc="depText" /></a>)
+                </div>
+            </t>
+        </t>
+        <t t-else="">
+            <p class="text-warning">We found these ones:</p>
+            <div t-foreach="dependencies" t-as="dependency" t-key="dependency" class="ml16 mb16">
+                <a class="collapsed fa fa-caret-right" data-toggle="collapse"
+                t-attf-aria-controls="collapseDependencies{{ dependency_index }}"
+                t-attf-href="#collapseDependencies{{ dependency_index }}"
+                aria-expanded="false">
+                        <t t-esc="dependency"/>
+                    <span class="text-muted"> <t t-esc="dependency_value.length"/> found(s)</span>
+                </a>
+                <div t-attf-id="collapseDependencies{{ dependency_index }}" class="collapse" aria-expanded="false">
+                    <ul>
+                        <li t-foreach="dependency_value" t-as="item" t-key="item">
+                            <a t-att-href="item.link" t-out="item.contentToDisplay"/>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </t>
+    </t>
+</t>
 
-<t t-name="website.get_tooltip_dependencies">
-    <t t-foreach="dependencies" t-as="dep">
-        <b><t t-esc="dep"/></b>
+<t t-name="website.PageDependencies.Tooltip">
+    <t t-foreach="dependencies" t-as="dependency" t-key="dependency">
+        <b><t t-esc="dependency"/></b>
         <ul>
-            <li t-foreach="dep_value" t-as="item">
-                <a t-att-href="item_value['link']"
-                   t-att-title="item_value['item']"
-                   class="o_text_overflow">
+            <li t-foreach="dependency_value" t-as="item" t-key="item">
+                <a t-att-href="item_value['link']" t-att-title="item_value['item']" class="o_text_overflow">
                     <t t-esc="item_value['item']"/>
                 </a>
             </li>
         </ul>
     </t>
 </t>
-<t t-name="website.show_page_key_dependencies">
-    <div class="col-md-9 offset-md-3">
-        <span class="text-muted" id="warn_about_call_message">
-            <t t-set="depTooltip">
-                <t t-call="website.get_tooltip_dependencies"/>
-            </t>
-            It looks like your file is being called by
-            <a href="#" data-toggle="popover" t-att-data-content="depTooltip" data-html="true" title="Dependencies"><t t-esc="dep_text" /></a>.
-            Changing its name will break these calls.
-        </span>
-    </div>
-</t>
-<t t-name="website.show_page_dependencies">
-    <t t-set="depTooltip">
-        <t t-call="website.get_tooltip_dependencies"/>
-    </t>
-    (could be used in <a href="#" class="o_dependencies_redirect_link"><t t-esc="dep_text" /></a>)
-</t>
-<t t-name="website.page_dependencies_popover">
-    <div class="popover o_redirect_old_url" role="tooltip">
-        <div class="arrow"/>
-        <h3 class="popover-header"/>
-        <div class="popover-body"/>
-    </div>
+
+<t t-name="website.DeletePageContent" owl="1">
+    <p>Are you sure you want to delete this page ?</p>
+    <p class="text-warning">Don't forget to update all links referring to this page.</p>
+    <PageDependencies pageId="props.pageId" mode="'collapse'"/>
+    <CheckBox onChange.bind="onConfirmCheckboxChange">
+        <p class="text-warning">I am sure about this.</p>
+    </CheckBox>
 </t>
 
-<!-- Page Properties -->
+<t t-name="website.DeletePageAction" t-inherit="website.DialogFooter" t-inherit-mode="primary" owl="1">
+    <xpath expr="//button[hasclass('btn-primary')]" position="attributes">
+        <attribute name="t-att-disabled">!state.confirm</attribute>
+    </xpath>
+</t>
 
-<div t-name="website.pagesMenu.page_info" class="o_page_management_info">
-    <form>
-        <ul class="nav nav-tabs" role="tablist">
-            <li class="nav-item"><a aria-controls="basic_page_info" role="tab" data-toggle="tab" class="nav-link active" href="#basic_page_info">Name</a></li>
-            <li class="nav-item"><a aria-controls="advances_page_info" role="tab" data-toggle="tab" class="nav-link" href="#advances_page_info">Publish</a></li>
-        </ul>
-        <div class="tab-content mt16">
-            <div role="tabpanel" id="basic_page_info" class="tab-pane fade show active">
-                <div class="form-group row">
-                    <label class="col-form-label col-md-3" for="page_name">Page Name</label>
-                    <div class="col-md-9">
-                        <input type="text" class="form-control" id="page_name" t-att-value="widget.page.name" />
-                    </div>
-                </div>
-                <div class="form-group warn_about_call"></div>
-                <div class="form-group row">
-                    <label class="col-form-label col-md-3" for="page_url">Page URL</label>
-                    <div class="col-md-9">
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text" t-att-title="widget.serverUrl"><small><t t-esc="widget.serverUrlTrunc"/></small></span>
-                            </div>
-                            <input type="text" class="form-control" id="page_url" t-att-value="widget.page.url" />
-                        </div>
-                    </div>
-                </div>
-                <div class="form-group row ask_for_redirect">
-                    <label class="col-form-label col-md-3" for="create_redirect">Redirect Old URL</label>
-                    <div class="col-md-2">
-                        <a>
-                            <label class="o_switch" for="create_redirect" >
-                                <input type="checkbox" id="create_redirect"/>
-                                <span/>
-                            </label>
-                        </a>
-                    </div>
-                    <div class="col-md-7 mt4 o_dependencies_redirect_list_popover">
-                        <span class="text-muted" id="dependencies_redirect"></span>
-                    </div>
-                </div>
-                <div class="form-group row ask_for_redirect">
-                    <label class="col-form-label col-md-3 redirect_type" for="redirect_type">Type</label>
-                    <div class="col-md-6 redirect_type">
-                        <select class="form-control" id="redirect_type">
-                            <option value="301">301 Moved permanently</option>
-                            <option value="302">302 Moved temporarily</option>
-                        </select>
-                    </div>
-                </div>
-            </div>
-            <div role="tabpanel" id="advances_page_info" class="tab-pane fade">
-                <div class="form-group row">
-                    <label class="control-label col-md-4" for="is_menu">Show in Top Menu</label>
-                    <div class="col-sm-8">
-                        <label class="o_switch" for="is_menu" >
-                            <input type="checkbox" t-att-checked="widget.page.menu_ids.length > 0 ? true : undefined" id="is_menu"/>
-                            <span/>
-                        </label>
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <label class="control-label col-md-4" for="is_homepage">Use as Homepage</label>
-                    <div class="col-sm-8">
-                        <label class="o_switch" for="is_homepage" >
-                            <input type="checkbox" t-att-checked="widget.page.is_homepage ? true : undefined" id="is_homepage"/>
-                            <span/>
-                        </label>
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <label class="control-label col-md-4" for="is_indexed">
-                        Indexed
-                        <i class="fa fa-question-circle-o" title="Hide this page from search results" role="img" aria-label="Info"></i>
-                    </label>
-                    <div class="col-md-2">
-                        <label class="o_switch" for="is_indexed" >
-                            <input type="checkbox" t-att-checked="widget.page.website_indexed ? true : undefined" id="is_indexed"/>
-                            <span/>
-                        </label>
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <label class="control-label col-md-4" for="is_published">Publish</label>
-                    <div class="col-sm-8">
-                        <label class="o_switch js_publish_btn" for="is_published">
-                            <input type="checkbox" t-att-checked="widget.page.website_published ? true : undefined" id="is_published"/>
-                            <span/>
-                        </label>
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <label class="control-label col-md-4" for="date_publish">Publishing Date</label>
-                    <div class="col-md-8">
-                        <div class="input-group date" id="date_publish_container" data-target-input="nearest">
-                            <input type="text" class="form-control datetimepicker-input" data-target="#date_publish_container" id="date_publish"/>
-                            <div class="input-group-append" data-target="#date_publish_container" data-toggle="datetimepicker">
-                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <label class="control-label col-md-4" for="visibility">Visibility</label>
-                    <div class="col-md-8">
-                        <div class="input-group">
-                            <select id="visibility" class="form-control col-md-4">
-                                <option value="" t-att-selected="widget.page.visibility == ''">Public</option>
-                                <option value="connected" t-att-selected="widget.page.visibility == 'connected' ? 'selected' : undefined">Signed In</option>
-                                <option value="restricted_group" t-att-selected="widget.page.visibility == 'restricted_group' ? 'selected' : undefined">Some Users</option>
-                                <option value="password" t-att-selected="widget.page.visibility == 'password' ? 'selected' : undefined">Password</option>
-                            </select>
-                            <div class="ml-1 input-group-prepend show_visibility_password" >
-                                <div class="input-group-text"><i class="fa fa-key"></i></div>
-                            </div>
-                            <input type="password" id="visibility_password"
-                                   t-att-value='widget.page.visibility_password'
-                                   t-att-required="widget.page.visibility == 'password' ? 'required' : None"
-                                   class="form-control show_visibility_password"
-                                   autocomplete="new-password"/>
-                            <t t-if="widget.page.hasSingleGroup">
-                                <div class="ml-1 input-group-prepend show_group_id">
-                                    <div class="input-group-text"><i class="fa fa-group"></i></div>
-                                </div>
-                                <t t-set="group" t-value="widget.page.group_id"/>
-                                <input type="text" class="form-control show_group_id" id="group_id" t-att-value="group ? group[1] : ''" t-att-data-group-id='group ? group[0] : 0' />
-                            </t>
-                            <t t-else="">
-                                <t t-set='groups_tooltip'>More than one group has been set on the view.</t>
-                                <a class="show_group_id btn btn-link mx-auto" t-attf-href="/web#id=#{widget.page.view_id[0]}&amp;view_type=form&amp;model=ir.ui.view" t-att-title='groups_tooltip'>Discard &amp; Edit in backend</a>
-                            </t>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </form>
-</div>
 </templates>
diff --git a/addons/website/static/src/components/fields/fields.js b/addons/website/static/src/components/fields/fields.js
new file mode 100644
index 00000000000..93d26d40a4a
--- /dev/null
+++ b/addons/website/static/src/components/fields/fields.js
@@ -0,0 +1,95 @@
+/** @odoo-module **/
+
+import {PageDependencies} from '@website/components/dialog/page_properties';
+import {Switch} from '@website/components/switch/switch';
+import AbstractFieldOwl from 'web.AbstractFieldOwl';
+import fieldRegistry from 'web.field_registry_owl';
+
+const {useState, onWillStart} = owl;
+
+class FieldPageUrl extends AbstractFieldOwl {
+    setup() {
+        super.setup();
+
+        this.state = useState({
+            redirect_old_url: false,
+            url: this.value,
+            redirect_type: '301',
+        });
+
+        this.serverUrl = window.location.origin;
+        this.pageUrl = this.value;
+    }
+
+    get enableRedirect() {
+        return this.state.url !== this.pageUrl;
+    }
+
+    onChangeRedirectOldUrl(value) {
+        this.state.redirect_old_url = value;
+    }
+
+    /**
+     * @override
+     */
+    commitChanges() {
+        if (this.enableRedirect) {
+            this._setValue(this.state);
+        }
+        return super.commitChanges();
+    }
+}
+FieldPageUrl.components = {Switch, PageDependencies};
+FieldPageUrl.supportedFieldTypes = ['char'];
+FieldPageUrl.template = 'website.FieldPageUrl';
+
+class FieldPageName extends AbstractFieldOwl {
+    setup() {
+        super.setup();
+
+        this.state = useState({
+            name: this.value,
+        });
+
+        this.pageName = this.value;
+        this.supportedMimetypes = {};
+
+        onWillStart(() => this.onWillStart());
+    }
+
+    async onWillStart() {
+        this.supportedMimetypes = await this.rpc({
+            model: 'website',
+            method: 'guess_mimetype',
+        });
+    }
+
+    get warnAboutCall() {
+        return this.nameChanged && this.isSupportedMimetype;
+    }
+
+    get nameChanged() {
+        return this.state.name !== this.pageName;
+    }
+
+    get isSupportedMimetype() {
+        const ext = '.' + this.pageName.split('.').pop();
+        return ext in this.supportedMimetypes && ext !== '.html';
+    }
+
+    /**
+     * @override
+     */
+    commitChanges() {
+        if (this.nameChanged) {
+            this._setValue(this.state.name);
+        }
+        return super.commitChanges();
+    }
+}
+FieldPageName.components = {PageDependencies};
+FieldPageName.supportedFieldTypes = ['char'];
+FieldPageName.template = 'website.FieldPageName';
+
+fieldRegistry.add('page_url', FieldPageUrl);
+fieldRegistry.add('page_name', FieldPageName);
diff --git a/addons/website/static/src/components/fields/fields.xml b/addons/website/static/src/components/fields/fields.xml
new file mode 100644
index 00000000000..9e9ebf0ed6b
--- /dev/null
+++ b/addons/website/static/src/components/fields/fields.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+
+<t t-name="website.FieldPageUrl" owl="1">
+    <div>
+        <div class="d-flex">
+            <div class="input-group-text rounded-left text-lowercase border-0" t-esc="serverUrl.length > 30 ? serverUrl.slice(0,14) + '..' + serverUrl.slice(-14) : serverUrl"/>
+            <input t-model="state.url" type="text" class="o_input"/>
+        </div>
+        <div t-if="enableRedirect">
+            <div class="d-flex mt-4">
+                <Switch extraClasses="'mr-auto'" label="'Redirect Old URL'" value="state.redirect_old_url" onChange="(value) => this.onChangeRedirectOldUrl(value)"/>
+                <PageDependencies pageId="resId" mode="'popover'"/>
+            </div>
+            <div t-if="state.redirect_old_url" class="d-flex mt-4">
+                <label class="my-0 mr-4 font-weight-bold" for="redirect_type">Type</label>
+                <select class="o_input w-50" id="redirect_type" t-model="state.redirect_type">
+                    <option value="301">301 Moved permanently</option>
+                    <option value="302">302 Moved temporarily</option>
+                </select>
+            </div>
+        </div>
+    </div>
+</t>
+
+<t t-name="website.FieldPageName" owl="1">
+    <div>
+        <input t-model="state.name" type="text" class="o_input"/>
+        <div t-if="warnAboutCall" class="mt-4">
+            <PageDependencies pageId="resId" mode="'popover'" type="'key'"/>
+        </div>
+    </div>
+</t>
+
+</templates>
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
index c3e6c880182..c4be4c8a0ee 100644
--- a/addons/website/static/src/components/navbar/navbar.js
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -7,6 +7,7 @@ import { patch } from 'web.utils';
 import { EditMenuDialog } from '@website/components/dialog/edit_menu';
 import { OptimizeSEODialog } from '@website/components/dialog/seo';
 import {WebsiteAceEditor, AceEditorAdapterComponent} from '@website/components/ace_editor/ace_editor';
+import {PagePropertiesDialogWrapper} from '@website/components/dialog/page_properties';
 
 const websiteSystrayRegistry = registry.category('website_systray');
 const {useState} = owl;
@@ -33,6 +34,9 @@ patch(NavBar.prototype, 'website_navbar', {
         this.toggleAceEditor = (show) => {
             this.websiteContext.showAceEditor = show;
         };
+        this.setPagePropertiesDialog = (dialog) => {
+            this.pagePropertiesDialog = dialog;
+        };
 
         this.websiteEditingMenus = {
             'website.menu_edit_menu': {
@@ -47,6 +51,10 @@ patch(NavBar.prototype, 'website_navbar', {
                 openWidget: () => this.toggleAceEditor(true),
                 isDisplayed: () => this.canShowAceEditor(),
             },
+            'website.menu_page_properties': {
+                openWidget: () => this.pagePropertiesDialog.open(),
+                isDisplayed: () => this.canShowPageProperties(),
+            },
         };
     },
 
@@ -105,10 +113,16 @@ patch(NavBar.prototype, 'website_navbar', {
         return this._super(menu);
     },
 
+    canShowPageProperties() {
+        return this.websiteService.currentWebsite
+            && !!this.websiteService.currentWebsite.metadata.mainObject
+            && this.websiteService.currentWebsite.metadata.mainObject.model === 'website.page';
+    },
+
     canShowAceEditor() {
         return this.websiteService.pageDocument && this.websiteService.pageDocument.documentElement.dataset.viewXmlid
             && !this.websiteContext.showNewContentModal && !this.websiteContext.edition;
     },
 });
 
-NavBar.components.AceEditorAdapterComponent = AceEditorAdapterComponent;
+NavBar.components = {...NavBar.components, AceEditorAdapterComponent, PagePropertiesDialogWrapper};
diff --git a/addons/website/static/src/components/navbar/navbar.xml b/addons/website/static/src/components/navbar/navbar.xml
index 80c1d01c533..d87e6bd0d89 100644
--- a/addons/website/static/src/components/navbar/navbar.xml
+++ b/addons/website/static/src/components/navbar/navbar.xml
@@ -4,6 +4,7 @@
 <t t-name="website.NavBar" t-inherit="web.NavBar" t-inherit-mode="extension">
     <xpath expr="//header" position="after">
         <AceEditorAdapterComponent t-if="canShowAceEditor() and websiteContext.showAceEditor" Component="aceEditor" toggleAceEditor="toggleAceEditor"/>
+        <PagePropertiesDialogWrapper t-if="canShowPageProperties()" setPagePropertiesDialog="setPagePropertiesDialog"/>
     </xpath>
 </t>
 
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index a96c8a8af1c..5bb424804d7 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -128,6 +128,48 @@
             </field>
         </record>
 
+        <record id="website_page_properties_view_form" model="ir.ui.view">
+            <field name="name">website.page.properties.form.view</field>
+            <field name="model">website.page</field>
+            <field name="arch" type="xml">
+                <form>
+                    <notebook>
+                        <page string="Name">
+                            <group class="mt-4">
+                                <field name="name" string="Page Name" widget="page_name"/>
+                            </group>
+                            <group>
+                                <field name="website_id" invisible="1"/>
+                                <field name="url" string="Page URL" widget="page_url" required="True"/>
+                            </group>
+                        </page>
+                        <page string="Publish">
+                            <group class="mt-4">
+                                <field name="is_in_menu" string="Show in Top Menu" widget="boolean_toggle"/>
+                            </group>
+                            <group>
+                                <field name="is_homepage" string="Use as Homepage" widget="boolean_toggle"/>
+                            </group>
+                            <group>
+                                <field name="website_indexed" string="Indexed" widget="boolean_toggle" help="Hide this page from search results"/>
+                            </group>
+                            <group>
+                                <field name="is_published" string="Published" widget="boolean_toggle"/>
+                            </group>
+                            <group>
+                                <field name="date_publish" widget="datetime"/>
+                            </group>
+                            <group>
+                                <field name="visibility"/>
+                                <field name="visibility_password_display" attrs="{'invisible': [('visibility', '!=', 'password')], 'required': [('visibility', '=', 'password')]}" password="True" string="Password"/>
+                                <field name="groups_id" attrs="{'invisible': [('visibility', '!=', 'restricted_group')]}" string="Authorized Groups" widget="many2many_tags"/>
+                            </group>
+                        </page>
+                    </notebook>
+                </form>
+            </field>
+        </record>
+
         <record id="website_pages_tree_view" model="ir.ui.view">
             <field name="name">website.page.list</field>
             <field name="model">website.page</field>
@@ -569,6 +611,12 @@
             name="HTML / CSS Editor"
             action="website.website_preview"/>
 
+        <menuitem id="menu_page_properties"
+            parent="menu_site"
+            sequence="50"
+            name="Page Properties"
+            action="website.website_preview"/>
+
         <menuitem id="menu_website_dashboard"
             name="eCommerce"
             sequence="1"
diff --git a/addons/website_blog/models/website.py b/addons/website_blog/models/website.py
index 9dfa2e30cf4..8b6ed2222bf 100644
--- a/addons/website_blog/models/website.py
+++ b/addons/website_blog/models/website.py
@@ -1,6 +1,8 @@
 # -*- coding: utf-8 -*-
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
+from markupsafe import Markup
+
 from odoo import api, models, _
 from odoo.addons.http_routing.models.ir_http import url_for
 
@@ -26,7 +28,7 @@ class Website(models.Model):
             dep[page_key] = []
         for p in posts:
             dep[page_key].append({
-                'text': _('Blog Post <b>%s</b> seems to have a link to this page !', p.name),
+                'content': Markup(_('Blog Post <b>%s</b> seems to have a link to this page !', p.name)),
                 'item': p.name,
                 'link': p.website_url,
             })
@@ -51,7 +53,7 @@ class Website(models.Model):
             dep[page_key] = []
         for p in posts:
             dep[page_key].append({
-                'text': _('Blog Post <b>%s</b> seems to be calling this file !', p.name),
+                'content': Markup(_('Blog Post <b>%s</b> seems to be calling this file !', p.name)),
                 'item': p.name,
                 'link': p.website_url,
             })

From a8ca8372b6b84c2d263424bcb6b74fb34491b708 Mon Sep 17 00:00:00 2001
From: xO-Tx <mou@odoo.com>
Date: Mon, 25 Apr 2022 17:44:11 +0200
Subject: [PATCH 60/88] [IMP] website: move track to technical view

The goal of this commit is to move the "Track Visitor" option from
CustomizeMenu to technical view.

See merge commit for more information.

task-2687506
---
 addons/website/__manifest__.py                |  1 -
 .../website/static/src/js/set_view_track.js   | 89 -------------------
 addons/website/static/src/xml/track_page.xml  | 15 ----
 addons/website/views/website_views.xml        |  3 +
 4 files changed, 3 insertions(+), 105 deletions(-)
 delete mode 100644 addons/website/static/src/js/set_view_track.js
 delete mode 100644 addons/website/static/src/xml/track_page.xml

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index cc83eacb7b3..a4a0231ca7d 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -270,7 +270,6 @@
             'website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js',
             'website/static/src/systray_items/mobile_preview.js',
             'website/static/src/components/dialog/seo.js',
-            'website/static/src/js/set_view_track.js',
             'website/static/src/js/tours/homepage.js',
             'website/static/src/js/tours/tour_utils.js',
         ],
diff --git a/addons/website/static/src/js/set_view_track.js b/addons/website/static/src/js/set_view_track.js
deleted file mode 100644
index d94fcddfffd..00000000000
--- a/addons/website/static/src/js/set_view_track.js
+++ /dev/null
@@ -1,89 +0,0 @@
-odoo.define('website.set_view_track', function (require) {
-"use strict";
-
-var CustomizeMenu = require('website.customizeMenu');
-var Widget = require('web.Widget');
-
-var TrackPage = Widget.extend({
-    template: 'website.track_page',
-    xmlDependencies: ['/website/static/src/xml/track_page.xml'],
-    events: {
-        'change #switch-track-page': '_onTrackChange',
-    },
-
-    /**
-     * @override
-     */
-    start: function () {
-        this.$input = this.$('#switch-track-page');
-        this._isTracked().then((data) => {
-            if (data[0]['track']) {
-                this.track = true;
-                this.$input.attr('checked', 'checked');
-            } else {
-                this.track = false;
-            }
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    _isTracked: function (val) {
-        var viewid = $('html').data('viewid');
-        if (!viewid) {
-            return Promise.reject();
-        } else {
-            return this._rpc({
-                model: 'ir.ui.view',
-                method: 'read',
-                args: [[viewid], ['track']],
-            });
-        }
-    },
-    /**
-     * @private
-     */
-    _onTrackChange: function (ev) {
-        var checkboxValue = this.$input.is(':checked');
-        if (checkboxValue !== this.track) {
-            this.track = checkboxValue;
-            this._trackPage(checkboxValue);
-        }
-    },
-    /**
-     * @private
-     */
-    _trackPage: function (val) {
-        var viewid = $('html').data('viewid');
-        if (!viewid) {
-            return Promise.reject();
-        } else {
-            return this._rpc({
-                model: 'ir.ui.view',
-                method: 'write',
-                args: [[viewid], {track: val}],
-            });
-        }
-    },
-});
-
-CustomizeMenu.include({
-    _loadCustomizeOptions: function () {
-        var self = this;
-        var def = this._super.apply(this, arguments);
-        return def.then(function () {
-            if (!self.__trackpageLoaded) {
-                self.__trackpageLoaded = true;
-                self.trackPage = new TrackPage(self);
-                self.trackPage.appendTo(self.$el.children('.dropdown-menu'));
-            }
-        });
-    },
-});
-
-});
diff --git a/addons/website/static/src/xml/track_page.xml b/addons/website/static/src/xml/track_page.xml
deleted file mode 100644
index 8aeb5d374a8..00000000000
--- a/addons/website/static/src/xml/track_page.xml
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<templates id="template" xml:space="preserve">
-
-    <t t-name="website.track_page">
-        <div role="separator" class="dropdown-divider"/>
-        <label class="o_switch dropdown-item m-0" for="switch-track-page">
-            <input id="switch-track-page" type="checkbox"/>
-            <span/>
-            Track Visitor
-        </label>
-    </t>
-
-</templates>
-
-
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index 5bb424804d7..7a0ecfee330 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -318,6 +318,9 @@
                             type="object" attrs="{'invisible': [('page_ids', '=', [])]}"/>
                     </header>
                 </sheet>
+                <field name="active" position="after">
+                    <field name="track" attrs="{'invisible': [('type', '!=', 'qweb')]}" widget="boolean_toggle"/>
+                </field>
             </field>
         </record>
 

From 0db19449d00aab20c35218ab8108e731717cb0fe Mon Sep 17 00:00:00 2001
From: xO-Tx <mou@odoo.com>
Date: Thu, 21 Apr 2022 08:45:55 +0200
Subject: [PATCH 61/88] [IMP] website: add options on page list view

The goal of this commit is to add options to manage website pages as in
frontend page manager using list view.

- The click on list view item will redirect iframe to the targeted page.
- The Page Properties dialogs (DuplicatePageDialog, DeletePageDialog)
  are used to clone/remove pages.
- The pages listView is loaded using the current website domain.

See merge commit for more information.

task-2687506
---
 addons/website/__manifest__.py                |   1 +
 addons/website/controllers/main.py            |  44 -----
 addons/website/models/ir_ui_view.py           |   6 +-
 addons/website/models/website_page.py         |  10 ++
 .../website_preview/website_preview.js        |   8 +
 .../static/src/components/fields/fields.js    |  21 +++
 .../static/src/components/fields/fields.xml   |   4 +
 .../static/src/js/website_page_list.js        | 168 ++++++++++++++++++
 .../static/src/xml/website.backend.xml        |  13 ++
 addons/website/views/website_templates.xml    | 108 -----------
 addons/website/views/website_views.xml        |  34 ++--
 11 files changed, 248 insertions(+), 169 deletions(-)
 create mode 100644 addons/website/static/src/js/website_page_list.js

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index a4a0231ca7d..529496a017c 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -191,6 +191,7 @@
             'website/static/src/js/new_content_form.js',
             'website/static/src/js/utils.js',
             'website/static/src/components/translator/*',
+            'website/static/src/js/website_page_list.js',
         ],
         'web.qunit_suite_tests': [
             'website/static/tests/dashboard_tests.js',
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index cc77158065f..450ced02ca1 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -540,50 +540,6 @@ class Website(Home):
     # Edit
     # ------------------------------------------------------
 
-    @http.route(['/website/pages', '/website/pages/page/<int:page>'], type='http', auth="user", website=True)
-    def pages_management(self, page=1, sortby='url', search='', **kw):
-        # only website_designer should access the page Management
-        if not request.env.user.has_group('website.group_website_designer'):
-            raise werkzeug.exceptions.NotFound()
-
-        Page = request.env['website.page']
-        searchbar_sortings = {
-            'url': {'label': _('Sort by Url'), 'order': 'url'},
-            'name': {'label': _('Sort by Name'), 'order': 'name'},
-        }
-        # default sortby order
-        sort_order = searchbar_sortings.get(sortby, 'url')['order'] + ', website_id desc, id'
-
-        domain = request.website.website_domain()
-        if search:
-            domain += ['|', ('name', 'ilike', search), ('url', 'ilike', search)]
-
-        pages = Page.search(domain, order=sort_order)
-        if sortby != 'url' or not request.session.debug:
-            pages = pages._get_most_specific_pages()
-        pages_count = len(pages)
-
-        step = 50
-        pager = portal_pager(
-            url="/website/pages",
-            url_args={'sortby': sortby},
-            total=pages_count,
-            page=page,
-            step=step
-        )
-
-        pages = pages[(page - 1) * step:page * step]
-
-        values = {
-            'pager': pager,
-            'pages': pages,
-            'search': search,
-            'sortby': sortby,
-            'searchbar_sortings': searchbar_sortings,
-            'search_count': pages_count,
-        }
-        return request.render("website.list_website_pages", values)
-
     @http.route(['/website/add', '/website/add/<path:path>'], type='http', auth="user", website=True, methods=['POST'])
     def pagenew(self, path="", add_menu=False, template=False, **kwargs):
         # for supported mimetype, get correct default template
diff --git a/addons/website/models/ir_ui_view.py b/addons/website/models/ir_ui_view.py
index 5463e6651a6..5f3a7664319 100644
--- a/addons/website/models/ir_ui_view.py
+++ b/addons/website/models/ir_ui_view.py
@@ -426,11 +426,7 @@ class View(models.Model):
             return super(View, self).get_default_lang_code()
 
     def redirect_to_page_manager(self):
-        return {
-            'type': 'ir.actions.act_url',
-            'url': '/website/pages',
-            'target': 'self',
-        }
+        return self.env["ir.actions.server"]._for_xml_id('website.action_website_pages_list')
 
     def _read_template_keys(self):
         return super(View, self)._read_template_keys() + ['website_id']
diff --git a/addons/website/models/website_page.py b/addons/website/models/website_page.py
index 7633ad0c6fc..804276c8741 100644
--- a/addons/website/models/website_page.py
+++ b/addons/website/models/website_page.py
@@ -10,6 +10,7 @@ from odoo import api, fields, models
 from odoo.osv import expression
 from odoo.tools import escape_psql
 from odoo.tools.safe_eval import safe_eval
+from odoo.tools.translate import _
 
 
 class Page(models.Model):
@@ -277,6 +278,15 @@ class Page(models.Model):
         url = '/' + slugify(page_url, max_length=1024, path=True)
         return self.env['website'].with_context(website_id=website_id).get_unique_path(url)
 
+    def action_manage_website_pages(self):
+        return {
+            'name': _('Website Pages'),
+            'type': 'ir.actions.act_window',
+            'res_model': 'website.page',
+            'view_mode': 'tree',
+            'view_id': self.env.ref('website.website_pages_tree_view').id,
+        }
+
 # this is just a dummy function to be used as ormcache key
 def _cached_response():
     pass
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 11d12266f05..ab6909d3125 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -5,6 +5,7 @@ import { useService } from '@web/core/utils/hooks';
 import core from 'web.core';
 import { WebsiteEditorComponent } from '../../components/editor/editor';
 import { WebsiteTranslator } from '../../components/translator/translator';
+import {OptimizeSEODialog} from '@website/components/dialog/seo';
 
 const { Component, onWillStart, useRef, useEffect, useState } = owl;
 
@@ -46,6 +47,7 @@ BlockIframe.template = 'website.BlockIframe';
 export class WebsitePreview extends Component {
     setup() {
         this.websiteService = useService('website');
+        this.dialogService = useService('dialog');
         this.title = useService('title');
 
         this.iframeFallbackUrl = '/website/iframefallback';
@@ -65,6 +67,12 @@ export class WebsitePreview extends Component {
             this.websiteService.context.showNewContentModal = this.props.action.context.params && this.props.action.context.params.display_new_content;
             this.websiteService.context.edition = this.props.action.context.params && !!this.props.action.context.params.enable_editor;
             this.websiteService.context.translation = this.props.action.context.params && !!this.props.action.context.params.edit_translations;
+            if (this.props.action.context.params && this.props.action.context.params.enable_seo) {
+                this.iframe.el.addEventListener('load', () => {
+                    this.websiteService.pageDocument = this.iframe.el.contentDocument;
+                    this.dialogService.add(OptimizeSEODialog);
+                }, {once: true});
+            }
             return () => {
                 this.websiteService.currentWebsiteId = null;
                 this.websiteService.websiteRootInstance = undefined;
diff --git a/addons/website/static/src/components/fields/fields.js b/addons/website/static/src/components/fields/fields.js
index 93d26d40a4a..5d8a5b42baa 100644
--- a/addons/website/static/src/components/fields/fields.js
+++ b/addons/website/static/src/components/fields/fields.js
@@ -91,5 +91,26 @@ FieldPageName.components = {PageDependencies};
 FieldPageName.supportedFieldTypes = ['char'];
 FieldPageName.template = 'website.FieldPageName';
 
+/**
+ * Displays 'char' field's value prefixed by a FA icon.
+ * The prefix is shown by default, but the visibility can be updated depending on
+ * other field value.
+ * e.g. `<field name="name" widget="fa_prefix" options="{'icon': 'fa-lock',
+ * 'visibility': 'is_locked'}"/>` renders the icon only when 'is_locked' is True.
+ */
+class FieldFaPrefix extends AbstractFieldOwl {
+    get prefix() {
+        const {icon, visibility, title} = this.nodeOptions;
+        return {
+            class: icon.split(' ').filter(str => str.indexOf('fa-') === 0).join(' '),
+            visible: !visibility || !!this.recordData[visibility],
+            help: title || '',
+        };
+    }
+}
+FieldFaPrefix.supportedFieldTypes = ['char'];
+FieldFaPrefix.template = 'website.FieldFaPrefix';
+
 fieldRegistry.add('page_url', FieldPageUrl);
 fieldRegistry.add('page_name', FieldPageName);
+fieldRegistry.add('fa_prefix', FieldFaPrefix);
diff --git a/addons/website/static/src/components/fields/fields.xml b/addons/website/static/src/components/fields/fields.xml
index 9e9ebf0ed6b..e2df315f39e 100644
--- a/addons/website/static/src/components/fields/fields.xml
+++ b/addons/website/static/src/components/fields/fields.xml
@@ -32,4 +32,8 @@
     </div>
 </t>
 
+<t t-name="website.FieldFaPrefix" owl="1">
+    <span><i t-attf-class="fa fa-fw {{prefix.class}} {{prefix.visible ? '': 'invisible'}}" t-att-title="prefix.help"/><t t-esc="_formatValue(value)"/></span>
+</t>
+
 </templates>
diff --git a/addons/website/static/src/js/website_page_list.js b/addons/website/static/src/js/website_page_list.js
new file mode 100644
index 00000000000..af352deb484
--- /dev/null
+++ b/addons/website/static/src/js/website_page_list.js
@@ -0,0 +1,168 @@
+/** @odoo-module **/
+
+import ListController from 'web.ListController';
+import viewRegistry from 'web.view_registry';
+import ListView from 'web.ListView';
+import {ComponentWrapper} from 'web.OwlCompatibility';
+import {PagePropertiesDialogWrapper} from '@website/components/dialog/page_properties';
+import {qweb} from 'web.core';
+
+const WebsitePageListController = ListController.extend({
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    willStart() {
+        return Promise.all([this._super(...arguments), this._getRenderContext()]);
+    },
+    /**
+     * @override
+     */
+    renderButtons($node) {
+        this.$buttons = $(qweb.render('PageListView.WebsiteSelect', {
+            websites: this.websites,
+            active: this._getWebsite(0),
+        }));
+        this.$buttons.find('.dropdown-item').click(this._onButtonClick.bind(this));
+        if ($node) {
+            this.$buttons.appendTo($node);
+        }
+    },
+    /**
+     * Used to set the new dialog (created by PagePropertiesDialogWrapper for page
+     * record).
+     */
+    setPageManagerDialog(dialog) {
+        this.pageManagerDialog = dialog;
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    async _callButtonAction(attrs, record) {
+        switch (attrs.name) {
+            case 'action_optimize_seo':
+                this._goToPage(record.data.url, record.data.website_id.res_id, {
+                    enable_seo: true,
+                });
+                break;
+            case 'action_manage_page':
+                await this._addDialog(record);
+                this.pageManagerDialog.open();
+                break;
+            case 'action_clone_page':
+                await this._addDialog(record, 'clone');
+                this.pageManagerDialog.open();
+                break;
+            case 'action_delete_page':
+                await this._addDialog(record, 'delete');
+                this.pageManagerDialog.open();
+                break;
+            case 'action_edit_page':
+                this.do_action({
+                    type: 'ir.actions.act_window',
+                    res_model: 'ir.ui.view',
+                    res_id: record.data.view_id.res_id,
+                    views: [[false, 'form']],
+                });
+                break;
+            default:
+                return this._super(...arguments);
+        }
+    },
+    /**
+     * @private
+     */
+    _goToPage(path, website, options = {}) {
+        this.do_action('website.website_preview', {
+            additional_context: {
+                params: {
+                    path: path,
+                    website_id: website || '',
+                    ...options,
+                }
+            },
+        });
+    },
+    /**
+     * @private
+     */
+    async _addDialog(record, mode = '') {
+        this._pagePropertiesDialog = new ComponentWrapper(this, PagePropertiesDialogWrapper, {
+            setPagePropertiesDialog: this.setPageManagerDialog.bind(this),
+            currentPage: record.data.id,
+            onClose: this._onCloseDialog.bind(this),
+            mode: mode,
+        });
+        await this._pagePropertiesDialog.mount(this.el);
+    },
+    /**
+     * Removes page properties wrapper when dialog is closed.
+     *
+     * @private
+     */
+    _onCloseDialog() {
+        if (this._pagePropertiesDialog) {
+            this._pagePropertiesDialog.destroy();
+        }
+        this._pagePropertiesDialog = undefined;
+    },
+    /**
+     * @private
+     */
+    _getRenderContext() {
+        return this._rpc({
+            model: 'website',
+            method: 'search_read',
+            fields: ['id', 'name'],
+        }).then((result) => {
+            this.websites = [{id: 0, name: 'All Websites'}, ...result];
+        });
+    },
+    /**
+     * @private
+     */
+    _getWebsite(id) {
+        return this.websites.find(website => website.id === id);
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _onOpenRecord(event) {
+        const record = this.model.get(event.data.id, {raw: true});
+        this._goToPage(record.data.url, record.data.website_id);
+    },
+    _onButtonClick: async function (event) {
+        const activeWebsite = this._getWebsite(parseInt(event.target.dataset.websiteId));
+        this.$buttons[0].querySelector('.o_website_active').textContent = activeWebsite.name;
+        this.reload({
+            domain: activeWebsite.id ? [['website_id', '=', activeWebsite.id]] : [],
+        });
+    }
+});
+
+const WebsitePageListView = ListView.extend({
+    config: _.extend({}, ListView.prototype.config, {
+        Controller: WebsitePageListController,
+    }),
+});
+
+viewRegistry.add('website_page_list', WebsitePageListView);
+
+export default {
+    WebsitePageListController: WebsitePageListController,
+    WebsitePageListView: WebsitePageListView,
+};
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index c54f98dd540..2f6cba28376 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -112,4 +112,17 @@
         </a>
     </t>
 
+    <t t-name="PageListView.WebsiteSelect">
+        <div class="btn-group" role="toolbar" aria-label="Main actions">
+            <button class="btn btn-primary dropdown-toggle o-no-caret" data-toggle="dropdown" aria-expanded="false">
+                <span class="o_website_active" t-esc="active.name"/> <i class="fa fa-caret-down ml-1"/>
+            </button>
+            <div class="dropdown-menu">
+                <t t-foreach="websites" t-as="website">
+                    <a role="menuitem" href="#" class="dropdown-item" t-att-data-website-id="website.id"><t t-esc="website.name"/></a>
+                    <div t-if="!website.id" class="dropdown-divider"/>
+                </t>
+            </div>
+        </div>
+    </t>
 </templates>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 647b435085a..99663dcace9 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -2385,72 +2385,6 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
     <span t-foreach="enumerate(parts)" t-as="part" t-att-class="'text-primary' if part[0] % 2 else None" t-esc="part[1]"/>
 </template>
 
-<template id="list_website_pages" name="Website Pages Management">
-  <t t-call="website.layout">
-    <div id="wrap">
-      <div class="container" id="list_website_pages">
-          <t t-call="website.website_search_box_input">
-              <t t-set="_form_classes" t-valuef="mt8 float-right"/>
-              <t t-set="search_type" t-valuef="pages"/>
-              <t t-set="action" t-valuef="/website/pages"/>
-          </t>
-          <div t-if="searchbar_sortings" class="dropdown float-right mt8 mr8">
-              <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
-                  <span class="fa fa-sort fa-lg" role="img" aria-label="Sort" title="Sort"/>
-                  <span class="d-none d-xl-inline" t-esc="searchbar_sortings[sortby].get('label', 'Newest')"/>
-              </button>
-              <div class="dropdown-menu" aria-labelledby="portal_searchbar_sortby" role="menu">
-                  <t t-foreach="searchbar_sortings" t-as="option">
-                      <a role="menuitem"
-                         t-att-href="request.httprequest.path + '?' + keep_query('*', sortby=option)"
-                         t-attf-class="dropdown-item#{sortby == option and ' active' or ''}">
-                          <span t-esc="searchbar_sortings[option].get('label')"/>
-                      </a>
-                  </t>
-              </div>
-          </div>
-          <h3 class="mt16">Manage Your Pages</h3>
-          <t t-if="not pages">
-              <div t-if="search" class="alert alert-warning mt8" role="alert">
-                  Your search '<t t-esc="search" />' did not match any pages.
-              </div>
-              <div t-else="" class="alert alert-warning mt8" role="alert">
-                  There are currently no pages for your website.
-              </div>
-          </t>
-          <div t-if="pages" class="table-responsive">
-              <table class="table table-hover">
-                  <thead>
-                    <tr>
-                      <th>Name</th>
-                      <th>Url</th>
-                      <th class="text-center"><i title="Is the page included in the main menu?" class="fa fa-thumb-tack"></i></th>
-                      <th class="text-center"><i title="Is the page published?" class="fa fa-eye"></i></th>
-                      <th class="text-center"><i title="Is the page indexed by search engines?" class="fa fa-globe"></i></th>
-                      <th class="text-center"><i title="Is the page SEO optimized?" class="fa fa-search"></i></th>
-                      <th></th>
-                    </tr>
-                  </thead>
-                  <t t-set='prev_page' t-value='False' />
-                  <t t-set='page' t-value='pages[0]' />
-                  <t t-foreach="pages[1:]" t-as="next_page">
-                    <t t-call='website.one_page_line'/>
-                    <t t-set='prev_page' t-value='page' />
-                    <t t-set='page' t-value='next_page' />
-                  </t>
-
-                  <t t-set='next_page' t-value='False'/>
-                  <t t-call='website.one_page_line' />
-              </table>
-          </div>
-          <div t-if="pager" class="o_portal_pager text-center">
-              <t t-call="website.pager"/>
-          </div>
-      </div>
-    </div>
-  </t>
-</template>
-
 <template id="list_website_public_pages" name="Website Pages">
     <t t-call="website.layout">
         <div id="wrap">
@@ -2495,48 +2429,6 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
     </t>
 </template>
 
-<template id="one_page_line">
-    <t t-set='specific_page' t-value="page.website_id"/>
-    <t t-set='final_page' t-value="(next_page and page.url != next_page.url) or not next_page or specific_page"/>
-    <tr t-att-style='not final_page and "color:#999"'>
-        <td>
-            <t t-if="debug">
-                <i t-if='specific_page and prev_page and prev_page.url == page.url and not prev_page.website_id' class="fa fa-level-up fa-rotate-90 ml32 mr4"/>
-                <i t-else="1" class="fa fa-globe mr4" title="Websites-shared page" t-att-style="'visibility:hidden;' if specific_page else ''"/>
-            </t>
-            <i t-if="page.is_homepage" class="fa fa-home" title="Homepage"/> <span t-esc="page.name"/>
-        </td>
-        <td>
-            <a t-if='final_page' t-att-href="page.url"><t t-esc="page.url"/></a>
-        </td>
-        <td class="text-center">
-            <i t-if="page.menu_ids" class="fa fa-check" title="In main menu"/>
-            <i t-else="" class="fa fa-times text-muted" title="Not in main menu"/>
-        </td>
-        <td class="text-center">
-            <t t-set='date_formatted'><t t-options='{"widget": "date"}' t-esc="page.date_publish"/></t>
-            <i t-if="page.is_visible" class="fa fa-check" title="Published"/>
-            <i t-elif="page.website_published" class="fa fa-eye-slash" t-attf-title="This page will be published on {{ date_formatted }}"/>
-            <i t-else="" class="fa fa-times text-muted" title="Not published"/>
-        </td>
-        <td class="text-center">
-            <i t-if="page.website_indexed" class="fa fa-check" title="Indexed"/>
-            <i t-else="" class="fa fa-times text-muted" title="Not indexed"/>
-        </td>
-        <td class="text-center">
-            <i t-if="page.is_seo_optimized" class="fa fa-check" title="SEO optimized"/>
-            <i t-else="" class="fa fa-times text-muted" title="Not SEO optimized"/>
-        </td>
-        <td class="text-right" style="white-space:nowrap;">
-            <a class="mr4 fa fa-cog js_page_properties" href="#" t-att-data-id="page.id" title="Manage this page"/>
-            <a class="mr4 fa fa-search" t-attf-href="{{ page.url}}?enable_seo" title="Optimize SEO of this page"/>
-            <a groups="base.group_no_one" class="mr4 fa fa-bug" t-attf-href="/web#id=#{page.view_id.id}&amp;view_type=form&amp;model=ir.ui.view" title="Edit code in backend"/>
-            <a class="mr4 fa fa-clone js_clone_page" t-att-data-id="page.id" href="#" title="Clone this page"/>
-            <a class="fa fa-trash js_delete_page" t-att-data-id="page.id" href="#" title="Delete this page"/>
-        </td>
-    </tr>
-</template>
-
 <template id="list_hybrid" name="Any Search Results">
     <t t-call="website.layout">
         <div id="wrap">
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index 7a0ecfee330..9957b991027 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -174,16 +174,25 @@
             <field name="name">website.page.list</field>
             <field name="model">website.page</field>
             <field name="arch" type="xml">
-                <tree string="Website Pages" default_order="name" multi_edit="1">
-                    <field name="name"/>
+                <tree js_class="website_page_list" string="Website Pages" default_order="url" create="false">
+                    <field name="is_homepage" invisible="1"/>
+                    <field name="name" string="Page Title" widget="fa_prefix" options="{'icon': 'fa-home fa-lg', 'visibility': 'is_homepage', 'title': 'Home page of the current website'}"/>
                     <field name="url"/>
-                    <field name="website_id" groups="website.group_multi_website"/>
+                    <field name="view_id" invisible="1"/>
                     <field name="website_indexed"/>
+                    <field name="is_in_menu" string="Is In Main Menu"/>
+                    <field name="is_seo_optimized" string="Is SEO optimized"/>
                     <field name="is_published" string="Is Published"/>
                     <field name="create_uid" invisible="1"/>
-                    <field name="write_uid"/>
-                    <field name="write_date"/>
-                    <field name="track"/>
+                    <field name="write_uid" widget="many2one_avatar" optional="hidden"/>
+                    <field name="write_date" optional="hidden"/>
+                    <field name="website_id" groups="website.group_multi_website"/>
+                    <field name="track" optional="hidden"/>
+                    <button name="action_manage_page" title="Manage this page" icon="fa-cog fa-lg"/>
+                    <button name="action_optimize_seo" title="Optimize SEO of this page" icon="fa-search fa-lg"/>
+                    <button name="action_edit_page" title="Edit code in backend" icon="fa-bug fa-lg" groups="base.group_no_one"/>
+                    <button name="action_clone_page" title="Clone this page" icon="fa-clone fa-lg"/>
+                    <button name="action_delete_page" title="Delete this page" icon="fa-trash fa-lg"/>
                 </tree>
             </field>
         </record>
@@ -203,12 +212,13 @@
             </field>
         </record>
 
-        <record id="action_website_pages_list" model="ir.actions.act_window">
-            <field name="name">Website Pages</field>
-            <field name="res_model">website.page</field>
-            <field name="view_mode">tree,form</field>
-            <field name="view_id" ref="website_pages_tree_view"/>
-            <field name="target">current</field>
+        <record id="action_website_pages_list" model="ir.actions.server">
+            <field name="name">Website: Pages</field>
+            <field name="model_id" ref="website.model_website_page"/>
+            <field name="state">code</field>
+            <field name="code">
+                action = model.action_manage_website_pages()
+            </field>
         </record>
 
         <!-- ====== website.menu views =========================================

From 66af6664c1dfbc8bb94a15eb142da12aa936b25d Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Wed, 27 Apr 2022 15:35:52 +0200
Subject: [PATCH 62/88] [FIX] website, web: fix opening configurator after
 installing website module

Before that commit, opening the client action was not possible directly
after installing the website module (the client action javscript class
was not yet added to the actions registry).

An action_id param is added to the reload action, so that it can open
the website configurator after reloading the webclient.

See merge commit for more information.

task-2687506
---
 addons/web/static/src/legacy/js/core/misc.js | 6 ++++++
 addons/website/views/website_views.xml       | 9 +++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/addons/web/static/src/legacy/js/core/misc.js b/addons/web/static/src/legacy/js/core/misc.js
index a457f61984e..9b1e1842886 100644
--- a/addons/web/static/src/legacy/js/core/misc.js
+++ b/addons/web/static/src/legacy/js/core/misc.js
@@ -130,6 +130,7 @@ function redirect (url, wait) {
 function Reload(parent, action) {
     var params = action.params || {};
     var menu_id = params.menu_id || false;
+    var action_id = params.action_id || false;
     var l = window.location;
 
     var sobj = $.deparam(l.search.substr(1));
@@ -141,6 +142,11 @@ function Reload(parent, action) {
     var hash = l.hash;
     if (menu_id) {
         hash = "#menu_id=" + menu_id;
+        if (action_id) {
+            hash += "&action=" + action_id;
+        }
+    } else if (action_id) {
+        hash = "#action=" + action_id;
     }
     var url = l.protocol + "//" + l.host + l.pathname + search + hash;
 
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index 9957b991027..340a14073c1 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -656,10 +656,15 @@
             <field name="target">fullscreen</field>
         </record>
 
+        <record id="action_open_website_configurator" model="ir.actions.client">
+            <field name="name">Open Website Configurator</field>
+            <field name="tag">reload</field>
+            <field name="params" eval="{'action_id': ref('website_configurator'), 'menu_id': ref('menu_website_configuration')}"/>
+        </record>
+
         <record id="website_configurator_todo" model="ir.actions.todo">
             <field name="name">Start Website Configurator</field>
-            <field name="action_id" ref="website_configurator"/>
-            <field name="sequence">0</field>
+            <field name="action_id" ref="action_open_website_configurator"/>
         </record>
     </data>
 </odoo>

From 28a78fb4e4e4465aa99fb94f7cac3a21b2188502 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Wed, 27 Apr 2022 16:32:06 +0200
Subject: [PATCH 63/88] [REF] web_editor, website: refactor dialogs to new API

After the core Dialog API was refactored in [1], the web_editor and
website dialogs had to be reworked.

These dialogs are using a base WebsiteDialog component, that allows for
a default footer and adds the o_website_dialog content class.

[1]: https://github.com/odoo/odoo/commit/7c4f200b8edf0bc695c623c7afc62288f838db36

See merge commit for more information.

task-2687506
---
 .../components/media_dialog/file_selector.js  | 40 ++++-----
 .../components/media_dialog/media_dialog.js   | 22 ++---
 .../components/media_dialog/media_dialog.xml  | 35 ++++----
 .../static/src/components/dialog/dialog.js    | 81 ++++++++++---------
 .../static/src/components/dialog/dialog.xml   | 28 ++++---
 .../static/src/components/dialog/edit_menu.js | 23 +++---
 .../src/components/dialog/edit_menu.xml       | 64 ++++++++-------
 .../src/components/dialog/page_properties.js  | 37 +++++----
 .../src/components/dialog/page_properties.xml | 29 ++++---
 .../static/src/components/dialog/seo.js       | 17 ++--
 .../static/src/components/dialog/seo.xml      | 37 +++++----
 .../src/components/translator/translator.js   | 30 ++++---
 .../src/components/translator/translator.scss |  4 +-
 .../src/components/translator/translator.xml  | 36 ++++++---
 .../static/src/services/website_service.js    |  4 +-
 .../static/src/systray_items/new_content.js   | 20 ++++-
 .../static/src/systray_items/new_content.xml  |  9 +++
 17 files changed, 285 insertions(+), 231 deletions(-)

diff --git a/addons/web_editor/static/src/components/media_dialog/file_selector.js b/addons/web_editor/static/src/components/media_dialog/file_selector.js
index d2621e7ce2b..b9dac0e27d7 100644
--- a/addons/web_editor/static/src/components/media_dialog/file_selector.js
+++ b/addons/web_editor/static/src/components/media_dialog/file_selector.js
@@ -25,28 +25,31 @@ class RemoveButton extends Component {
 }
 RemoveButton.template = xml`<i class="fa fa-trash o_existing_attachment_remove p-2" t-att-title="removeTitle" role="img" t-att-aria-label="removeTitle" t-on-click="this.remove"/>`;
 
-export class AttachmentError extends Dialog {
+export class AttachmentError extends Component {
     setup() {
-        super.setup();
         this.title = this.env._t("Alert");
     }
 }
-AttachmentError.bodyTemplate = xml `
-<div class="form-text">
-    <p>The image could not be deleted because it is used in the
-        following pages or views:</p>
-    <ul t-foreach="props.views"  t-as="view" t-key="view.id">
-        <li>
-            <a t-att-href="'/web#model=ir.ui.view&amp;id=' + view.id">
-                <t t-esc="view.name"/>
-            </a>
-        </li>
-    </ul>
-</div>`;
-AttachmentError.footerTemplate = xml`
-<button class="btn btn-primary" t-on-click="() => this.close()">
-    Ok
-</button>`;
+AttachmentError.components = { Dialog };
+AttachmentError.template = xml `
+<Dialog title="title">
+    <div class="form-text">
+        <p>The image could not be deleted because it is used in the
+            following pages or views:</p>
+        <ul t-foreach="props.views"  t-as="view" t-key="view.id">
+            <li>
+                <a t-att-href="'/web#model=ir.ui.view&amp;id=' + view.id">
+                    <t t-esc="view.name"/>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <t t-set-slot="footer">
+        <button class="btn btn-primary" t-on-click="() => this.props.close()">
+            Ok
+        </button>
+    </t>
+</Dialog>`;
 
 export class Attachment extends Component {
     setup() {
@@ -69,7 +72,6 @@ export class Attachment extends Component {
                     });
                 }
             },
-            cancel: () => {},
         });
     }
 }
diff --git a/addons/web_editor/static/src/components/media_dialog/media_dialog.js b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
index b43b1961624..576794e822a 100644
--- a/addons/web_editor/static/src/components/media_dialog/media_dialog.js
+++ b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
@@ -33,10 +33,9 @@ export const TABS = {
     },
 };
 
-export class MediaDialog extends Dialog {
+export class MediaDialog extends Component {
     setup() {
-        super.setup();
-        this.size = 'modal-xl';
+        this.size = 'xl';
         this.contentClass = 'o_select_media_dialog';
         this.title = this.env._t("Select a media");
 
@@ -173,16 +172,16 @@ export class MediaDialog extends Dialog {
                 this.props.save(elements[0]);
             }
         }
-        this.close();
+        this.props.close();
     }
 }
-MediaDialog.bodyTemplate = 'web_editor.MediaDialogBody';
-MediaDialog.footerTemplate = 'web_editor.MediaDialogFooter';
+MediaDialog.template = 'web_editor.MediaDialog';
 MediaDialog.defaultProps = {
     useMediaLibrary: true,
 };
 MediaDialog.components = {
     ...Object.keys(TABS).map(key => TABS[key].Component),
+    Dialog,
 };
 
 export class MediaDialogWrapper extends Component {
@@ -190,16 +189,7 @@ export class MediaDialogWrapper extends Component {
         this.dialogs = useWowlService('dialog');
 
         onRendered(() => {
-            this.dialogs.add(MediaDialog, {
-                ...this.props,
-                close: () => {
-                    if (this.props.close) {
-                        this.props.close();
-                    }
-                    this.destroy();
-
-                },
-            });
+            this.dialogs.add(MediaDialog, this.props);
         });
     }
 }
diff --git a/addons/web_editor/static/src/components/media_dialog/media_dialog.xml b/addons/web_editor/static/src/components/media_dialog/media_dialog.xml
index c15e411201f..62abd8d36f2 100644
--- a/addons/web_editor/static/src/components/media_dialog/media_dialog.xml
+++ b/addons/web_editor/static/src/components/media_dialog/media_dialog.xml
@@ -1,21 +1,24 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
-<t t-name="web_editor.MediaDialogBody" owl="1">
-    <ul class="nav nav-tabs" role="tablist">
-        <t t-foreach="tabs" t-as="tab" t-key="tab.id">
-            <li class="nav-item"><a class="nav-link" t-att-class="{ active:  tab.id === state.activeTab }" t-on-click="() => state.activeTab = tab.id"><t t-esc="tab.title"/></a></li>
+<t t-name="web_editor.MediaDialog" owl="1">
+    <Dialog contentClass="contentClass"
+        size="size"
+        title="title">
+        <ul class="nav nav-tabs" role="tablist">
+            <t t-foreach="tabs" t-as="tab" t-key="tab.id">
+                <li class="nav-item"><a class="nav-link" t-att-class="{ active:  tab.id === state.activeTab }" t-on-click="() => state.activeTab = tab.id"><t t-esc="tab.title"/></a></li>
+            </t>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+            <t t-foreach="tabs" t-as="tab" t-key="tab.id">
+                <div class="tab-pane fade" t-att-class="tab.id === state.activeTab ? 'active show' : ''"><t t-component="tab.Component" t-props="tab.props"/></div>
+            </t>
+        </div>
+        <t t-set-slot="footer">
+            <button class="btn btn-primary" t-on-click="() => this.save()">Add</button>
+            <button class="btn btn-secondary" t-on-click="() => this.props.close()">Discard</button>
         </t>
-    </ul>
-    <!-- Tab panes -->
-    <div class="tab-content">
-        <t t-foreach="tabs" t-as="tab" t-key="tab.id">
-            <div class="tab-pane fade" t-att-class="tab.id === state.activeTab ? 'active show' : ''"><t t-component="tab.Component" t-props="tab.props"/></div>
-        </t>
-    </div>
-</t>
-
-<t t-name="web_editor.MediaDialogFooter" owl="1">
-    <button class="btn btn-primary" t-on-click="save">Add</button>
-    <button class="btn btn-secondary" t-on-click="close">Discard</button>
+    </Dialog>
 </t>
 </templates>
diff --git a/addons/website/static/src/components/dialog/dialog.js b/addons/website/static/src/components/dialog/dialog.js
index 7bc2de1b7d2..b5f6d291f15 100644
--- a/addons/website/static/src/components/dialog/dialog.js
+++ b/addons/website/static/src/components/dialog/dialog.js
@@ -2,65 +2,66 @@
 
 import { Dialog } from '@web/core/dialog/dialog';
 import { Switch } from '@website/components/switch/switch';
+import { _t } from 'web.core';
 
-const { xml, useState } = owl;
+const { xml, useState, Component } = owl;
 
-export class WebsiteDialog extends Dialog {
-    setup() {
-        super.setup();
-        this.title = this.props.title || this.env._t("Confirmation");
-        this.primaryTitle = this.props.primaryTitle || this.env._t("Ok");
-        this.secondaryTitle = this.props.secondaryTitle || this.env._t("Cancel");
-        this.closeOnClick = this.props.closeOnClick === false ? false : true;
-    }
-
-    get showSecondaryButton() {
-        return this.props.showSecondaryButton;
-    }
-
-    primaryClick() {
+export class WebsiteDialog extends Component {
+    async primaryClick() {
         if (this.props.primaryClick) {
-            this.props.primaryClick();
+            await this.props.primaryClick();
         }
-        if (this.closeOnClick) {
-            this.close();
+        if (this.props.closeOnClick) {
+            this.props.close();
         }
     }
 
-    secondaryClick() {
+    async secondaryClick() {
         if (this.props.secondaryClick) {
-            this.props.secondaryClick();
+            await this.props.secondaryClick();
         }
-        if (this.closeOnClick) {
-            this.close();
+        if (this.props.closeOnClick) {
+            this.props.close();
         }
     }
+
+    get contentClasses() {
+        const websiteDialogClass = 'o_website_dialog';
+        if (this.props.contentClass) {
+            return `${websiteDialogClass} ${this.props.contentClass}`;
+        }
+        return websiteDialogClass;
+    }
 }
+WebsiteDialog.components = { Dialog };
 WebsiteDialog.props = {
     ...Dialog.props,
-    title: { type: String, optional: true },
-    body: { type: String, optional: true },
     primaryTitle: { type: String, optional: true },
     primaryClick: { type: Function, optional: true },
     secondaryTitle: { type: String, optional: true },
     secondaryClick: { type: Function, optional: true },
+    showSecondaryButton: { type: Boolean, optional: true },
+    close: Function,
     closeOnClick: { type: Boolean, optional: true },
-    close: { type: Function, optional: true },
 };
 WebsiteDialog.defaultProps = {
+    ...Dialog.defaultProps,
+    title: _t("Confirmation"),
+    primaryTitle: _t("Ok"),
+    secondaryTitle: _t("Cancel"),
     showSecondaryButton: true,
+    size: "md",
+    closeOnClick: true,
 };
-WebsiteDialog.bodyTemplate = "website.DialogBody";
-WebsiteDialog.footerTemplate = "website.DialogFooter";
-WebsiteDialog.size = "modal-md";
-WebsiteDialog.contentClass = "o_website_dialog";
+WebsiteDialog.template = "website.WebsiteDialog";
 
-export class AddPageDialog extends WebsiteDialog {
+export class AddPageDialog extends Component {
     setup() {
         super.setup();
 
         this.title = this.env._t("New Page");
         this.primaryTitle = this.env._t("Create");
+        this.switchLabel = this.env._t("Add to menu");
 
         this.state = useState({
             addMenu: true,
@@ -72,20 +73,20 @@ export class AddPageDialog extends WebsiteDialog {
         this.state.addMenu = value;
     }
 
-    async primaryClick() {
+    async addPage() {
         await this.props.addPage(this.state.name, this.state.addMenu);
-        this.close();
     }
 }
-AddPageDialog.props = {
-    ...WebsiteDialog.props,
-    addPage: Function,
-};
 AddPageDialog.components = {
     Switch,
+    WebsiteDialog,
 };
-AddPageDialog.bodyTemplate = xml`
-<div>
+AddPageDialog.template = xml`
+<WebsiteDialog
+    title="title"
+    primaryTitle="primaryTitle"
+    primaryClick="() => this.addPage()"
+    close="props.close">
     <div class="form-group row">
         <label class="col-form-label col-md-3">
             Page Title
@@ -94,6 +95,6 @@ AddPageDialog.bodyTemplate = xml`
             <input type="text" t-model="state.name" class="form-control" required="required"/>
         </div>
     </div>
-    <Switch extraClasses="'offset-md-3 col-md-9 text-left'" label="'Add to menu'" value="state.addMenu" onChange="(value) => this.onChangeAddMenu(value)"/>
-</div>
+    <Switch extraClasses="'offset-md-3 col-md-9 text-left'" label="switchLabel" value="state.addMenu" onChange="(value) => this.onChangeAddMenu(value)"/>
+</WebsiteDialog>
 `;
diff --git a/addons/website/static/src/components/dialog/dialog.xml b/addons/website/static/src/components/dialog/dialog.xml
index 1a89c27dedb..3f518e0868c 100644
--- a/addons/website/static/src/components/dialog/dialog.xml
+++ b/addons/website/static/src/components/dialog/dialog.xml
@@ -1,15 +1,21 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
-<t t-name="website.DialogBody" owl="1">
-    <t t-esc="props.body"/>
-</t>
-
-<t t-name="website.DialogFooter" owl="1">
-    <button class="btn btn-primary" t-on-click="primaryClick">
-        <t t-esc="primaryTitle"/>
-    </button>
-    <button t-if="showSecondaryButton" class="btn btn-secondary" t-on-click="secondaryClick">
-        <t t-esc="secondaryTitle"/>
-    </button>
+<t t-name="website.WebsiteDialog" owl="1">
+    <Dialog contentClass="contentClasses"
+        size="props.size"
+        title="props.title">
+        <t t-slot="default"/>
+        <t t-set-slot="footer">
+            <t t-if="props.slots and props.slots.footer" t-slot="footer"/>
+            <t t-else="">
+                <button class="btn btn-primary" t-on-click="primaryClick">
+                    <t t-esc="props.primaryTitle"/>
+                </button>
+                <button t-if="props.showSecondaryButton" class="btn btn-secondary" t-on-click="secondaryClick">
+                    <t t-esc="props.secondaryTitle"/>
+                </button>
+            </t>
+        </t>
+    </Dialog>
 </t>
 </templates>
diff --git a/addons/website/static/src/components/dialog/edit_menu.js b/addons/website/static/src/components/dialog/edit_menu.js
index 0871c412d70..af60f948af8 100644
--- a/addons/website/static/src/components/dialog/edit_menu.js
+++ b/addons/website/static/src/components/dialog/edit_menu.js
@@ -5,10 +5,8 @@ import { WebsiteDialog } from './dialog';
 
 const { Component, useState, useEffect, onWillStart, useRef, onMounted } = owl;
 
-export class MenuDialog extends WebsiteDialog {
+export class MenuDialog extends Component {
     setup() {
-        super.setup();
-
         this.title = this.env._t("Add a menu item");
 
         this.state = useState({
@@ -17,23 +15,23 @@ export class MenuDialog extends WebsiteDialog {
         });
     }
 
-    primaryClick() {
+    onClickOk() {
         this.props.save(this.state.name, this.state.url);
-        this.close();
     }
 }
-MenuDialog.bodyTemplate = 'website.MenuDialog';
+MenuDialog.template = 'website.MenuDialog';
 MenuDialog.props = {
-    ...WebsiteDialog.props,
     name: { type: String, optional: true },
     url: { type: String, optional: true },
     isMegaMenu: { type: Boolean, optional: true },
     save: Function,
+    close: Function,
 };
 MenuDialog.defaultProps = {
     name: '',
     url: '/',
 };
+MenuDialog.components = { WebsiteDialog };
 
 class MenuRow extends Component {
     edit() {
@@ -54,15 +52,14 @@ MenuRow.components = {
     MenuRow,
 };
 
-export class EditMenuDialog extends WebsiteDialog {
+export class EditMenuDialog extends Component {
     setup() {
-        super.setup();
         this.orm = useService('orm');
         this.website = useService('website');
         this.dialogs = useService('dialog');
 
         this.title = this.env._t("Edit Menu");
-        this.primaryTitle = this.env._t("Save");
+        this.saveButton = this.env._t("Save");
 
         this.menuEditor = useRef('menu-editor');
 
@@ -152,7 +149,7 @@ export class EditMenuDialog extends WebsiteDialog {
         this.toDelete.push(id);
     }
 
-    async primaryClick() {
+    async onClickSave() {
         const newMenus = this.$sortables.nestedSortable('toArray', {startDepthCount: 0});
         const levels = [];
         const data = [];
@@ -178,7 +175,6 @@ export class EditMenuDialog extends WebsiteDialog {
                 'to_delete': this.toDelete,
             }
         ]);
-        this.close();
         if (this.props.save) {
             this.props.save();
         } else {
@@ -186,7 +182,8 @@ export class EditMenuDialog extends WebsiteDialog {
         }
     }
 }
-EditMenuDialog.bodyTemplate = 'website.EditMenuDialog';
+EditMenuDialog.template = 'website.EditMenuDialog';
 EditMenuDialog.components = {
     MenuRow,
+    WebsiteDialog,
 };
diff --git a/addons/website/static/src/components/dialog/edit_menu.xml b/addons/website/static/src/components/dialog/edit_menu.xml
index 18aefa84fe7..0209d28e90a 100644
--- a/addons/website/static/src/components/dialog/edit_menu.xml
+++ b/addons/website/static/src/components/dialog/edit_menu.xml
@@ -1,22 +1,24 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 <t t-name="website.MenuDialog" owl="1">
-    <div class="form-group row">
-        <label class="col-form-label col-md-3">
-            Name
-        </label>
-        <div class="col-md-9">
-            <input type="text" t-model="state.name" class="form-control" required="required"/>
+    <WebsiteDialog close="props.close" title="title" primaryClick="() => this.onClickOk()">
+        <div class="form-group row">
+            <label class="col-form-label col-md-3">
+                Name
+            </label>
+            <div class="col-md-9">
+                <input type="text" t-model="state.name" class="form-control" required="required"/>
+            </div>
         </div>
-    </div>
-    <div t-if="!props.isMegaMenu" class="form-group row">
-        <label class="col-form-label col-md-3">
-            Url or Email
-        </label>
-        <div class="col-md-9">
-            <input type="text" t-model="state.url" class="form-control" required="required"/>
+        <div t-if="!props.isMegaMenu" class="form-group row">
+            <label class="col-form-label col-md-3">
+                Url or Email
+            </label>
+            <div class="col-md-9">
+                <input type="text" t-model="state.url" class="form-control" required="required"/>
+            </div>
         </div>
-    </div>
+    </WebsiteDialog>
 </t>
 
 <t t-name="website.MenuRow" owl="1">
@@ -46,21 +48,23 @@
 </t>
 
 <t t-name="website.EditMenuDialog" owl="1">
-    <ul t-ref="menu-editor" class="oe_menu_editor list-unstyled">
-        <t t-foreach="state.rootMenu.children" t-as="menu" t-key="menu.fields['id']">
-            <MenuRow menu="menu" edit="(id) => this.editMenu(id)" delete="(id) => this.deleteMenu(id)"/>
-        </t>
-    </ul>
-    <div class="mt32">
-        <small class="float-right text-muted">
-            Drag to the right to get a submenu
-        </small>
-        <a href="#" t-on-click="() => this.addMenu(false)">
-            <i class="fa fa-plus-circle"/> Add Menu Item
-        </a><br/>
-        <a href="#" t-on-click="() => this.addMenu(true)">
-            <i class="fa fa-plus-circle"/> Add Mega Menu Item
-        </a>
-    </div>
+    <WebsiteDialog close="props.close" title="title" primaryTitle="saveButton" primaryClick="() => this.onClickSave()">
+        <ul t-ref="menu-editor" class="oe_menu_editor list-unstyled">
+            <t t-foreach="state.rootMenu.children" t-as="menu" t-key="menu.fields['id']">
+                <MenuRow menu="menu" edit="(id) => this.editMenu(id)" delete="(id) => this.deleteMenu(id)"/>
+            </t>
+        </ul>
+        <div class="mt32">
+            <small class="float-right text-muted">
+                Drag to the right to get a submenu
+            </small>
+            <a href="#" t-on-click="() => this.addMenu(false)">
+                <i class="fa fa-plus-circle"/> Add Menu Item
+            </a><br/>
+            <a href="#" t-on-click="() => this.addMenu(true)">
+                <i class="fa fa-plus-circle"/> Add Mega Menu Item
+            </a>
+        </div>
+    </WebsiteDialog>
 </t>
 </templates>
diff --git a/addons/website/static/src/components/dialog/page_properties.js b/addons/website/static/src/components/dialog/page_properties.js
index 2144c4bda96..9cdc443fdb6 100644
--- a/addons/website/static/src/components/dialog/page_properties.js
+++ b/addons/website/static/src/components/dialog/page_properties.js
@@ -80,14 +80,13 @@ PageDependencies.props = {
     },
 };
 
-export class DeletePageDialog extends WebsiteDialog {
+export class DeletePageDialog extends Component {
     setup() {
-        super.setup();
-
         this.orm = useService('orm');
         this.website = useService('website');
         this.title = this.env._t("Delete Page");
-        this.primaryTitle = this.env._t("Ok");
+        this.deleteButton = this.env._t("Ok");
+        this.cancelButton = this.env._t("Cancel");
 
         this.state = useState({
             confirm: false,
@@ -98,28 +97,29 @@ export class DeletePageDialog extends WebsiteDialog {
         this.state.confirm = checked;
     }
 
-    async primaryClick() {
+    async onClickDelete() {
         await this.orm.unlink("website.page", [
             this.props.pageId,
         ]);
         this.website.goToWebsite();
-        this.close();
+        this.props.close();
         this.props.onClose();
     }
 }
-DeletePageDialog.components = {PageDependencies, CheckBox};
-DeletePageDialog.bodyTemplate = 'website.DeletePageContent';
-DeletePageDialog.footerTemplate = 'website.DeletePageAction';
+DeletePageDialog.components = {
+    PageDependencies,
+    CheckBox,
+    WebsiteDialog
+};
+DeletePageDialog.template = 'website.DeletePageDialog';
 DeletePageDialog.props = {
-    ...WebsiteDialog.props,
     pageId: Number,
     onClose: Function,
+    close: Function,
 };
 
-export class DuplicatePageDialog extends WebsiteDialog {
+export class DuplicatePageDialog extends Component {
     setup() {
-        super.setup();
-
         this.orm = useService('orm');
         this.website = useService('website');
 
@@ -128,7 +128,7 @@ export class DuplicatePageDialog extends WebsiteDialog {
         });
     }
 
-    async primaryClick() {
+    async duplicate() {
         if (this.state.name) {
             const res = await this.orm.call(
                 'website.page',
@@ -137,11 +137,12 @@ export class DuplicatePageDialog extends WebsiteDialog {
             );
             this.website.goToWebsite({path: res, edition: true});
         }
-        this.close();
         this.props.onClose();
     }
 }
-DuplicatePageDialog.bodyTemplate = xml`
+DuplicatePageDialog.components = {WebsiteDialog};
+DuplicatePageDialog.template = xml`
+<WebsiteDialog close="props.close" primaryClick="() => this.duplicate()">
     <div class="form-group row">
         <label class="col-form-label col-md-3">
             Page Name
@@ -150,10 +151,12 @@ DuplicatePageDialog.bodyTemplate = xml`
             <input type="text" t-model="state.name" class="form-control" required="required"/>
         </div>
     </div>
+</WebsiteDialog>
 `;
 DuplicatePageDialog.props = {
-    ...WebsiteDialog.props,
     onClose: Function,
+    close: Function,
+    pageId: Number,
 };
 
 export class PagePropertiesDialogWrapper extends Component {
diff --git a/addons/website/static/src/components/dialog/page_properties.xml b/addons/website/static/src/components/dialog/page_properties.xml
index de63850fad3..903f2ac7b50 100644
--- a/addons/website/static/src/components/dialog/page_properties.xml
+++ b/addons/website/static/src/components/dialog/page_properties.xml
@@ -55,19 +55,24 @@
     </t>
 </t>
 
-<t t-name="website.DeletePageContent" owl="1">
-    <p>Are you sure you want to delete this page ?</p>
-    <p class="text-warning">Don't forget to update all links referring to this page.</p>
-    <PageDependencies pageId="props.pageId" mode="'collapse'"/>
-    <CheckBox onChange.bind="onConfirmCheckboxChange">
-        <p class="text-warning">I am sure about this.</p>
-    </CheckBox>
-</t>
+<t t-name="website.DeletePageDialog" owl="1">
+    <WebsiteDialog title="title" close="props.close">
+        <p>Are you sure you want to delete this page ?</p>
+        <p class="text-warning">Don't forget to update all links referring to this page.</p>
+        <PageDependencies pageId="props.pageId" mode="'collapse'"/>
+        <CheckBox onChange.bind="onConfirmCheckboxChange">
+            <p class="text-warning">I am sure about this.</p>
+        </CheckBox>
 
-<t t-name="website.DeletePageAction" t-inherit="website.DialogFooter" t-inherit-mode="primary" owl="1">
-    <xpath expr="//button[hasclass('btn-primary')]" position="attributes">
-        <attribute name="t-att-disabled">!state.confirm</attribute>
-    </xpath>
+        <t t-set-slot="footer">
+            <button class="btn btn-primary" t-on-click="() => this.onClickDelete()"  t-att-disabled="!this.state.confirm">
+                Ok
+            </button>
+            <button class="btn btn-secondary" t-on-click="() => this.props.close()">
+                Cancel
+            </button>
+        </t>
+    </WebsiteDialog>
 </t>
 
 </templates>
diff --git a/addons/website/static/src/components/dialog/seo.js b/addons/website/static/src/components/dialog/seo.js
index b5045cd6a28..1d82e1bd820 100644
--- a/addons/website/static/src/components/dialog/seo.js
+++ b/addons/website/static/src/components/dialog/seo.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { useService, useListener } from '@web/core/utils/hooks';
+import { useService } from '@web/core/utils/hooks';
 import { MediaDialog } from '@web_editor/components/media_dialog/media_dialog';
 import { WebsiteDialog } from './dialog';
 
@@ -327,18 +327,17 @@ TitleDescription.components = {
     SEOPreview,
 };
 
-export class OptimizeSEODialog extends WebsiteDialog {
+export class OptimizeSEODialog extends Component {
     setup() {
-        super.setup();
         this.rpc = useService('rpc');
         this.website = useService('website');
         this.dialogs = useService('dialog');
         this.orm = useService('orm');
 
         this.title = this.env._t("Optimize SEO");
-        this.primaryTitle = this.env._t("Save");
-        this.size = 'modal-lg';
-        this.contentClass = `${this.contentClass} oe_seo_configuration`;
+        this.saveButton = this.env._t("Save");
+        this.size = 'lg';
+        this.contentClass = "oe_seo_configuration";
 
         onWillStart(async () => {
             const { metadata: { mainObject, seoObject, path } } = this.website.currentWebsite;
@@ -405,7 +404,7 @@ export class OptimizeSEODialog extends WebsiteDialog {
         return el && el.content;
     }
 
-    async primaryClick() {
+    async save() {
         const data = {};
         if (this.canEditTitle) {
             data.website_meta_title = seoContext.title;
@@ -423,12 +422,12 @@ export class OptimizeSEODialog extends WebsiteDialog {
         }
         data.website_meta_og_img = seoContext.metaImage;
         await this.orm.write(this.object.model, [this.object.id], data);
-        this.close();
         this.website.goToWebsite({path: this.url.replace(this.previousSeoName || this.seoNameDefault, seoContext.seoName)});
     }
 }
-OptimizeSEODialog.bodyTemplate = 'website.OptimizeSEODialog';
+OptimizeSEODialog.template = 'website.OptimizeSEODialog';
 OptimizeSEODialog.components = {
+    WebsiteDialog,
     TitleDescription,
     ImageSelector,
     MetaKeywords,
diff --git a/addons/website/static/src/components/dialog/seo.xml b/addons/website/static/src/components/dialog/seo.xml
index a9db65c9b66..763a6b042d2 100644
--- a/addons/website/static/src/components/dialog/seo.xml
+++ b/addons/website/static/src/components/dialog/seo.xml
@@ -166,20 +166,27 @@
 </t>
 
 <t t-name="website.OptimizeSEODialog" owl="1">
-    <TitleDescription canEditDescription="canEditDescription"
-        canEditUrl="canEditUrl"
-        canEditTitle="canEditTitle"
-        seoNameHelp="seoNameHelp"
-        seoNameDefault="seoNameDefault"
-        isIndexed="isIndexed"
-        defaultTitle="defaultTitle"
-        previewDescription="previewDescription"
-        url="url"/>
-    <MetaKeywords/>
-    <ImageSelector previewDescription="socialPreviewDescription"
-        defaultTitle="defaultTitle"
-        hasSocialDefaultImage="hasSocialDefaultImage"
-        pageImages="pageImages"
-        url="url"/>
+    <WebsiteDialog close="props.close"
+        title="title"
+        size="size"
+        primaryClick="() => this.save()"
+        primaryTitle="saveButton"
+        contentClass="contentClass">
+        <TitleDescription canEditDescription="canEditDescription"
+            canEditUrl="canEditUrl"
+            canEditTitle="canEditTitle"
+            seoNameHelp="seoNameHelp"
+            seoNameDefault="seoNameDefault"
+            isIndexed="isIndexed"
+            defaultTitle="defaultTitle"
+            previewDescription="previewDescription"
+            url="url"/>
+        <MetaKeywords/>
+        <ImageSelector previewDescription="socialPreviewDescription"
+            defaultTitle="defaultTitle"
+            hasSocialDefaultImage="hasSocialDefaultImage"
+            pageImages="pageImages"
+            url="url"/>
+    </WebsiteDialog>
 </t>
 </templates>
diff --git a/addons/website/static/src/components/translator/translator.js b/addons/website/static/src/components/translator/translator.js
index 7cb5fa3255f..056e441a10c 100644
--- a/addons/website/static/src/components/translator/translator.js
+++ b/addons/website/static/src/components/translator/translator.js
@@ -4,13 +4,12 @@ import { WebsiteEditorComponent } from '../editor/editor';
 import { WebsiteDialog } from '../dialog/dialog';
 import localStorage from 'web.local_storage';
 
-const { useEffect, useRef } = owl;
+const { useEffect, useRef, Component } = owl;
 
 const localStorageNoDialogKey = 'website_translator_nodialog';
 
-class AttributeTranslateDialog extends WebsiteDialog {
+class AttributeTranslateDialog extends Component {
     setup() {
-        super.setup();
         this.title = this.env._t("Translate Attribute");
 
         this.formEl = useRef('form-container');
@@ -38,10 +37,21 @@ class AttributeTranslateDialog extends WebsiteDialog {
         }, () => [this.props.node]);
     }
 }
-AttributeTranslateDialog.bodyTemplate = 'website.AttributeTranslateDialog';
+AttributeTranslateDialog.components = { WebsiteDialog };
+AttributeTranslateDialog.template = 'website.AttributeTranslateDialog';
 
-class TranslatorInfoDialog extends WebsiteDialog {}
-TranslatorInfoDialog.bodyTemplate = 'website.TranslatorInfoDialog';
+class TranslatorInfoDialog extends Component {
+    setup() {
+        this.strongOkButton = this.env._t("Ok, never show me this again");
+        this.okButton = this.env._t("Ok");
+    }
+
+    onStrongOkClick() {
+        localStorage.setItem(localStorageNoDialogKey, true);
+    }
+}
+TranslatorInfoDialog.components = { WebsiteDialog };
+TranslatorInfoDialog.template = 'website.TranslatorInfoDialog';
 
 const savableSelector = '[data-oe-translation-id], ' +
     '[data-oe-model][data-oe-id][data-oe-field], ' +
@@ -183,11 +193,7 @@ export class WebsiteTranslator extends WebsiteEditorComponent {
         });
 
         if (!localStorage.getItem(localStorageNoDialogKey)) {
-            this.dialogService.add(TranslatorInfoDialog, {
-                primaryClick: () => localStorage.setItem(localStorageNoDialogKey, true),
-                primaryTitle: this.env._t("Ok, never show me this again"),
-                secondaryTitle: this.env._t("Ok"),
-            });
+            this.dialogService.add(TranslatorInfoDialog);
         }
 
         // Apply data-oe-readonly on nested data.
@@ -228,7 +234,7 @@ export class WebsiteTranslator extends WebsiteEditorComponent {
         });
 
         this.$translations.prependEvent('click.translator', (ev) => {
-            this.dialogService.add(AttributeTranslateDialog, { node: ev.target, showSecondaryButton: false });
+            this.dialogService.add(AttributeTranslateDialog, { node: ev.target });
         });
     }
 
diff --git a/addons/website/static/src/components/translator/translator.scss b/addons/website/static/src/components/translator/translator.scss
index 18524f0ed45..ce3d432fad0 100644
--- a/addons/website/static/src/components/translator/translator.scss
+++ b/addons/website/static/src/components/translator/translator.scss
@@ -3,10 +3,10 @@
         margin: 10px;
         padding: 4px;
 
-        [data-oe-translation-state] {
+        &[data-oe-translation-state] {
             background: $o-we-translated-content-color;
         }
-        [data-oe-translation-state="to_translate"] {
+        &[data-oe-translation-state="to_translate"] {
             background: $o-we-content-to-translate-color;
         }
     }
diff --git a/addons/website/static/src/components/translator/translator.xml b/addons/website/static/src/components/translator/translator.xml
index e4dd94f333e..a4c0c03a1ef 100644
--- a/addons/website/static/src/components/translator/translator.xml
+++ b/addons/website/static/src/components/translator/translator.xml
@@ -1,19 +1,29 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
 <div t-name="website.TranslatorInfoDialog" owl="1">
-    <p>You are about to enter the translation mode.</p>
-    <p>Here are the visuals used to help you translate efficiently:</p>
-    <ul class="oe_translate_examples">
-        <li data-oe-translation-state="to_translate">Content to translate</li>
-        <li data-oe-translation-state="translated">Translated content</li>
-    </ul>
-    <p>
-        In this mode, you can only translate texts. To change the structure of the page, you must edit the master page.
-        Each modification on the master page is automatically applied to all translated versions.
-    </p>
+    <WebsiteDialog close="props.close"
+        title="title"
+        primaryTitle="strongOkButton"
+        secondaryTitle="okButton"
+        primaryClick="() => this.onStrongOkClick()">
+        <p>You are about to enter the translation mode.</p>
+        <p>Here are the visuals used to help you translate efficiently:</p>
+        <ul class="oe_translate_examples">
+            <li data-oe-translation-state="to_translate">Content to translate</li>
+            <li data-oe-translation-state="translated">Translated content</li>
+        </ul>
+        <p>
+            In this mode, you can only translate texts. To change the structure of the page, you must edit the master page.
+            Each modification on the master page is automatically applied to all translated versions.
+        </p>
+    </WebsiteDialog>
 </div>
 
-<div t-name="website.AttributeTranslateDialog" owl="1">
-    <div t-ref="form-container"/>
-</div>
+<t t-name="website.AttributeTranslateDialog" owl="1">
+    <WebsiteDialog close="props.close"
+        title="title"
+        showSecondaryButton="false">
+        <div t-ref="form-container"/>
+    </WebsiteDialog>
+</t>
 </templates>
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 7fdc5929c03..f659a11bf9a 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -128,8 +128,8 @@ export const websiteService = {
                     clearBreadcrumbs: true,
                     additionalContext: {
                         params: {
-                            website_id: websiteId,
-                            path,
+                            website_id: websiteId || currentWebsiteId,
+                            path: path || (contentWindow && contentWindow.location.href) || '/',
                             enable_editor: edition,
                             edit_translations: translation,
                         },
diff --git a/addons/website/static/src/systray_items/new_content.js b/addons/website/static/src/systray_items/new_content.js
index 03b89741e8e..e3b1853891f 100644
--- a/addons/website/static/src/systray_items/new_content.js
+++ b/addons/website/static/src/systray_items/new_content.js
@@ -37,6 +37,19 @@ NewContentElement.defaultProps = {
     status: MODULE_STATUS.INSTALLED,
 };
 
+class InstallModuleDialog extends Component {
+    setup() {
+        this.installButton = this.env._t("Install");
+    }
+
+    onClickInstall() {
+        this.props.close();
+        this.props.installModule();
+    }
+}
+InstallModuleDialog.components = { WebsiteDialog };
+InstallModuleDialog.template = "website.InstallModuleDialog";
+
 export class NewContentModal extends Component {
     setup() {
         this.user = useService('user');
@@ -158,9 +171,8 @@ export class NewContentModal extends Component {
         const {id, name} = this.modulesInfo[element.moduleXmlId];
         const dialogProps = {
             title: element.title,
-            body: _.str.sprintf(this.newContentText.installNeeded, name),
-            primaryTitle: this.env._t("Install"),
-            primaryClick: async () => {
+            installationText: _.str.sprintf(this.newContentText.installNeeded, name),
+            installModule: async () => {
                 // Update the NewContentElement with installing icon and text.
                 this.state.newContentElements = this.state.newContentElements.map(el => {
                     if (el.moduleXmlId === element.moduleXmlId) {
@@ -186,7 +198,7 @@ export class NewContentModal extends Component {
                 }
             },
         };
-        this.dialogs.add(WebsiteDialog, dialogProps);
+        this.dialogs.add(InstallModuleDialog, dialogProps);
     }
 }
 NewContentModal.template = "website.NewContentModal";
diff --git a/addons/website/static/src/systray_items/new_content.xml b/addons/website/static/src/systray_items/new_content.xml
index 2aec401921f..e879319ab2e 100644
--- a/addons/website/static/src/systray_items/new_content.xml
+++ b/addons/website/static/src/systray_items/new_content.xml
@@ -41,4 +41,13 @@
         <NewContentModal t-if="websiteContext.showNewContentModal"/>
     </div>
 </t>
+
+<t t-name="website.InstallModuleDialog" owl="1">
+    <WebsiteDialog close="props.close"
+        title="props.title"
+        primaryTitle="installButton"
+        primaryClick="() => this.onClickInstall()">
+        <t t-esc="props.installationText"/>
+    </WebsiteDialog>
+</t>
 </templates>

From b85c2a4cb1c84ac9d54817c22423c030930e0bb1 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Tue, 3 May 2022 11:53:07 +0200
Subject: [PATCH 64/88] [IMP] website, *: redirect to the client action when
 needed

*: website_blog, website_hr_recruitment, website_sale, website_slides

This commit changes the redirections from the controllers, that were
always redirecting to the frontend before.

Now, we want to open the website in its backend client action most of
the time (for example, when clicking on the "go to website" buttons on
the form views).

For that, a new get_client_action_url is introduced on the website
model.

See merge commit for more information.

task-2687506
---
 addons/website/controllers/main.py              |  4 ++--
 addons/website/models/mixins.py                 |  7 +++++--
 addons/website/models/website.py                | 11 ++++++++++-
 addons/website/models/website_page.py           |  2 +-
 .../static/src/systray_items/new_content.js     |  4 ++--
 addons/website_blog/controllers/main.py         | 17 ++---------------
 .../src/js/systray_items/edit_in_backend.js     |  3 +--
 .../website_hr_recruitment/controllers/main.py  |  2 +-
 .../static/src/js/systray_items/new_content.js  |  2 +-
 addons/website_sale/controllers/main.py         |  2 +-
 .../website_sale/models/res_config_settings.py  |  4 ++--
 addons/website_slides/controllers/main.py       |  2 +-
 .../static/src/js/slides_upload.js              | 11 +++++++++--
 13 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index 450ced02ca1..ab808368f3e 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -556,8 +556,8 @@ class Website(Home):
         url = page['url']
 
         if ext_special_case:  # redirect non html pages to backend to edit
-            return '/web#id=' + str(page.get('view_id')) + '&view_type=form&model=ir.ui.view'
-        return url + "?enable_editor=1"
+            return werkzeug.utils.redirect('/web#id=' + str(page.get('view_id')) + '&view_type=form&model=ir.ui.view')
+        return werkzeug.utils.redirect(request.env['website'].get_client_action_url(url, True))
 
     @http.route("/website/get_switchable_related_views", type="json", auth="user", website=True)
     def get_switchable_related_views(self, key):
diff --git a/addons/website/models/mixins.py b/addons/website/models/mixins.py
index 623721dc900..86b1938d03f 100644
--- a/addons/website/models/mixins.py
+++ b/addons/website/models/mixins.py
@@ -200,9 +200,10 @@ class WebsitePublishedMixin(models.AbstractModel):
         return self.write({'website_published': not self.website_published})
 
     def open_website_url(self):
+        url = self.env['website'].get_client_action_url(self.website_url)
         return {
             'type': 'ir.actions.act_url',
-            'url': self.website_url,
+            'url': url,
             'target': 'self',
         }
 
@@ -282,9 +283,11 @@ class WebsitePublishedMultiMixin(WebsitePublishedMixin):
             return is_published
 
     def open_website_url(self):
+        url = url_join(self.website_id.domain, self.website_url) if self.website_id.domain else self.website_url
+        url = self.env['website'].get_client_action_url(url)
         return {
             'type': 'ir.actions.act_url',
-            'url': url_join(self.website_id.domain, self.website_url) if self.website_id.domain else self.website_url,
+            'url': url,
             'target': 'self',
         }
 
diff --git a/addons/website/models/website.py b/addons/website/models/website.py
index 3f78bcbd838..eff0160eeb6 100644
--- a/addons/website/models/website.py
+++ b/addons/website/models/website.py
@@ -1288,13 +1288,22 @@ class Website(models.Model):
             return self.env["ir.actions.actions"]._for_xml_id("website.backend_dashboard")
         return self.env["ir.actions.actions"]._for_xml_id("website.action_website")
 
+    def get_client_action_url(self, url, mode_edit=False):
+        action_params = {
+            "action": "website.website_preview",
+            "path": url,
+        }
+        if mode_edit:
+            action_params["enable_editor"] = 1
+        return "/web#" + urls.url_encode(action_params)
+
     def button_go_website(self, path='/', mode_edit=False):
         self._force()
         if mode_edit:
             # If the user gets on a translated page (e.g /fr) the editor will
             # never start. Forcing the default language fixes this issue.
             path = url_for(path, self.default_lang_id.url_code)
-            path += '?enable_editor=1'
+            path = self.get_client_action_url(path, True)
         return {
             'type': 'ir.actions.act_url',
             'url': path,
diff --git a/addons/website/models/website_page.py b/addons/website/models/website_page.py
index 804276c8741..ca43613105b 100644
--- a/addons/website/models/website_page.py
+++ b/addons/website/models/website_page.py
@@ -125,7 +125,7 @@ class Page(models.Model):
                 # If the page being cloned has a menu, clone it too
                 menu.copy({'url': new_page.url, 'name': new_page.name, 'page_id': new_page.id})
 
-        return new_page.url + '?enable_editor=1'
+        return new_page.url
 
     def unlink(self):
         # When a website_page is deleted, the ORM does not delete its
diff --git a/addons/website/static/src/systray_items/new_content.js b/addons/website/static/src/systray_items/new_content.js
index e3b1853891f..a983b3e1537 100644
--- a/addons/website/static/src/systray_items/new_content.js
+++ b/addons/website/static/src/systray_items/new_content.js
@@ -4,6 +4,7 @@ import { registry } from '@web/core/registry';
 import { useService } from '@web/core/utils/hooks';
 import { WebsiteDialog, AddPageDialog } from "@website/components/dialog/dialog";
 import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
+import wUtils from 'website.utils';
 
 const { Component, xml, useState, onWillStart } = owl;
 
@@ -141,8 +142,7 @@ export class NewContentModal extends Component {
         this.dialogs.add(AddPageDialog, {
             addPage: async (name, addMenu) => {
                 const url = `/website/add/${encodeURIComponent(name)}`;
-                const res = await this.website.sendRequest(url, { add_menu: addMenu || '' });
-                this.website.goToWebsite({ path: res });
+                wUtils.sendRequest(url, { add_menu: addMenu || '' });
             },
         });
     }
diff --git a/addons/website_blog/controllers/main.py b/addons/website_blog/controllers/main.py
index 7a290f6e1d4..9108b30d837 100644
--- a/addons/website_blog/controllers/main.py
+++ b/addons/website_blog/controllers/main.py
@@ -301,20 +301,6 @@ class WebsiteBlog(http.Controller):
                 request.session.modified = True
         return response
 
-    @http.route('/blog/<int:blog_id>/post/new', type='http', auth="user", website=True)
-    def blog_post_create(self, blog_id, **post):
-        # Use sudo so this line prevents both editor and admin to access blog from another website
-        # as browse() will return the record even if forbidden by security rules but editor won't
-        # be able to access it
-        if not request.env['blog.blog'].browse(blog_id).sudo().can_access_from_current_website():
-            raise werkzeug.exceptions.NotFound()
-
-        new_blog_post = request.env['blog.post'].create({
-            'blog_id': blog_id,
-            'is_published': False,
-        })
-        return request.redirect("/blog/%s/%s?enable_editor=1" % (slug(new_blog_post.blog_id), slug(new_blog_post)))
-
     @http.route('/blog/post_duplicate', type='http', auth="user", website=True, methods=['POST'])
     def blog_post_copy(self, blog_post_id, **post):
         """ Duplicate a blog.
@@ -324,4 +310,5 @@ class WebsiteBlog(http.Controller):
         :return redirect to the new blog created
         """
         new_blog_post = request.env['blog.post'].with_context(mail_create_nosubscribe=True).browse(int(blog_post_id)).copy()
-        return "/blog/%s/%s?enable_editor=1" % (slug(new_blog_post.blog_id), slug(new_blog_post))
+        client_action_url = request.env["website"].get_client_action_url(f"/blog/{slug(new_blog_post.blog_id)}/{slug(new_blog_post)}", True)
+        return request.redirect(client_action_url)
diff --git a/addons/website_blog/static/src/js/systray_items/edit_in_backend.js b/addons/website_blog/static/src/js/systray_items/edit_in_backend.js
index 7e5087886b1..f1ad5a5d6a1 100644
--- a/addons/website_blog/static/src/js/systray_items/edit_in_backend.js
+++ b/addons/website_blog/static/src/js/systray_items/edit_in_backend.js
@@ -22,7 +22,6 @@ patch(EditInBackendSystray.prototype, 'website_blog_edit_in_backend', {
 
     async duplicate() {
         const { metadata: { mainObject } } = this.websiteService.currentWebsite;
-        const duplicateUrl = await wUtils.sendRequest('/blog/post_duplicate', { blog_post_id: mainObject.id });
-        this.websiteService.goToWebsite({ path: duplicateUrl });
+        wUtils.sendRequest('/blog/post_duplicate', { blog_post_id: mainObject.id });
     }
 });
diff --git a/addons/website_hr_recruitment/controllers/main.py b/addons/website_hr_recruitment/controllers/main.py
index 31916df662f..abde08b5fe0 100644
--- a/addons/website_hr_recruitment/controllers/main.py
+++ b/addons/website_hr_recruitment/controllers/main.py
@@ -78,7 +78,7 @@ class WebsiteHrRecruitment(http.Controller):
         job = request.env['hr.job'].with_context(rendering_bundle=True).create({
             'name': _('Job Title'),
         })
-        return request.redirect("/jobs/detail/%s?enable_editor=1" % slug(job))
+        return request.redirect(request.env["website"].get_client_action_url(f"/jobs/detail/{slug(job)}", True))
 
     @http.route('''/jobs/detail/<model("hr.job"):job>''', type='http', auth="public", website=True, sitemap=True)
     def jobs_detail(self, job, **kwargs):
diff --git a/addons/website_hr_recruitment/static/src/js/systray_items/new_content.js b/addons/website_hr_recruitment/static/src/js/systray_items/new_content.js
index e2de481223e..ef75405fd59 100644
--- a/addons/website_hr_recruitment/static/src/js/systray_items/new_content.js
+++ b/addons/website_hr_recruitment/static/src/js/systray_items/new_content.js
@@ -13,6 +13,6 @@ patch(NewContentModal.prototype, 'website_hr_recruitment_new_content', {
     },
 
     createNewJob() {
-        this.website.goToWebsite({ path: '/jobs/add' });
+        window.location.replace('/jobs/add');
     }
 });
diff --git a/addons/website_sale/controllers/main.py b/addons/website_sale/controllers/main.py
index b6992cb0b43..e5fdba64ae5 100644
--- a/addons/website_sale/controllers/main.py
+++ b/addons/website_sale/controllers/main.py
@@ -1155,7 +1155,7 @@ class WebsiteSale(http.Controller):
             'public_categ_ids': category,
             'website_id': request.website.id,
         })
-        return "%s?enable_editor=1" % product.product_tmpl_id.website_url
+        return self.env["website"].get_client_action_url(product.product_tmpl_id.website_url, True)
 
     @http.route(['/shop/config/product'], type='json', auth='user')
     def change_product_config(self, product_id, **options):
diff --git a/addons/website_sale/models/res_config_settings.py b/addons/website_sale/models/res_config_settings.py
index 2f0c38ae310..23eb259bc3f 100644
--- a/addons/website_sale/models/res_config_settings.py
+++ b/addons/website_sale/models/res_config_settings.py
@@ -98,7 +98,7 @@ class ResConfigSettings(models.TransientModel):
         self.ensure_one()
         return {
             'type': 'ir.actions.act_url',
-            'url': '/terms?enable_editor=1',
+            'url': self.env["website"].get_client_action_url('/terms', True),
             'target': 'self',
         }
 
@@ -106,7 +106,7 @@ class ResConfigSettings(models.TransientModel):
         self.ensure_one()
         return {
             'type': 'ir.actions.act_url',
-            'url': '/shop/extra_info?enable_editor=1',
+            'url': self.env["website"].get_client_action_url('/shop/extra_info', True),
             'target': 'self',
         }
 
diff --git a/addons/website_slides/controllers/main.py b/addons/website_slides/controllers/main.py
index 1d061c7678f..a1d0dcf2a2b 100644
--- a/addons/website_slides/controllers/main.py
+++ b/addons/website_slides/controllers/main.py
@@ -1247,7 +1247,7 @@ class WebsiteSlides(WebsiteProfile):
 
         redirect_url = "/slides/slide/%s" % (slide.id)
         if slide.slide_category == 'article':
-            redirect_url += "?enable_editor=1"
+            redirect_url += self.env["website"].get_client_action_url(redirect_url, True)
         elif slide.slide_category == 'quiz':
             redirect_url += "?quiz_quick_create"
         elif channel.channel_type == "training":
diff --git a/addons/website_slides/static/src/js/slides_upload.js b/addons/website_slides/static/src/js/slides_upload.js
index 3321da9b4f5..a0d9556e8f9 100644
--- a/addons/website_slides/static/src/js/slides_upload.js
+++ b/addons/website_slides/static/src/js/slides_upload.js
@@ -728,7 +728,14 @@ var SlideUploadDialog = Dialog.extend({
             this.set('state', oldType);
             this._alertDisplay(data.error);
         } else {
-            window.location = data.url;
+            if (data.url.indexOf('enable_editor') >= 0) {
+                // If we need to enter edit mode, it should be done to the top
+                // window so that we endup refreshing the backend client action
+                // in edit mode.
+                window.top.location = data.url;
+            } else {
+                window.location = data.url;
+            }
         }
     },
 
@@ -752,7 +759,7 @@ publicWidget.registry.websiteSlidesUpload = publicWidget.Widget.extend({
      * Automatically opens the upload dialog if requested from query string.
      * If openModal is defined ( === '' ), opens the category selection dialog.
      * If openModal is a category name, opens the category's upload dialog.
-     * 
+     *
      * @override
      */
     start: function () {

From 9d1f3b1d9b31fbf8a9ca2aa20fa1611c880dccac Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Wed, 4 May 2022 17:06:49 +0200
Subject: [PATCH 65/88] [FIX] website: forward clicks from the iframe to close
 dropdowns

See merge commit for more information.

task-2687506
---
 .../src/client_actions/website_preview/website_preview.js   | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index ab6909d3125..1b9ab1feb9a 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -201,6 +201,12 @@ export class WebsitePreview extends Component {
         // The clicks on the iframe are listened, so that links with external
         // redirections can be opened in the top window.
         this.iframe.el.contentDocument.addEventListener('click', (ev) => {
+            if (!this.websiteContext.edition) {
+                // Forward clicks to close backend client action's navbar
+                // dropdowns.
+                this.iframe.el.dispatchEvent(new MouseEvent('click', ev));
+            }
+
             const linkEl = ev.target.closest('[href]');
             if (!linkEl) {
                 return;

From a3dd4e34bd534b44354f115568fe3585cb821465 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Tue, 15 Mar 2022 13:36:27 +0100
Subject: [PATCH 66/88] [IMP] website_sale: adapt tests to the new customize
 options

*: website_sale_autocomplete, website_sale_loyalty

Adapt tests to the new customization options which are now accessible in
edit mode with the other options. But also adapt the tests that run in
the backend where the page is now moved in an iframe in edit mode.

See merge commit for more information.

task-2710582
---
 .../static/src/js/tours/tour_utils.js         |   4 +-
 .../tests/tours/website_sale_complete_flow.js |   4 +-
 ...ebsite_sale_shop_custom_attribute_value.js |   2 +-
 .../tours/website_sale_shop_customize.js      | 363 +++++++++++-------
 .../tours/website_sale_shop_list_view_b2c.js  |  78 ++--
 .../website_sale/views/snippets/snippets.xml  |   6 +-
 .../static/tests/autocomplete_tour.js         |   2 +-
 .../static/tests/tours/test_gift_card_tour.js |  29 +-
 .../tests/tours/test_promo_main_tour.js       |  18 +-
 .../tests/test_shop_sale_coupon.py            |   2 +
 10 files changed, 288 insertions(+), 220 deletions(-)

diff --git a/addons/website_sale/static/src/js/tours/tour_utils.js b/addons/website_sale/static/src/js/tours/tour_utils.js
index b604261d6f7..1a20277a1da 100644
--- a/addons/website_sale/static/src/js/tours/tour_utils.js
+++ b/addons/website_sale/static/src/js/tours/tour_utils.js
@@ -5,10 +5,10 @@ odoo.define("website_sale.tour_utils", function (require) {
     const _t = core._t;
 
 
-    function goToCart(quantity = 1, position = "bottom") {
+    function goToCart({quantity = 1, position = "bottom", backend = false} = {}) {
         return {
             content: _t("Go to cart"),
-            trigger: `a:has(.my_cart_quantity:containsExact(${quantity}))`,
+            trigger: `${backend ? "iframe" : ""} a:has(.my_cart_quantity:containsExact(${quantity}))`,
             position: position,
             run: "click",
         };
diff --git a/addons/website_sale/static/tests/tours/website_sale_complete_flow.js b/addons/website_sale/static/tests/tours/website_sale_complete_flow.js
index 990dc1bb3c4..647965b83a9 100644
--- a/addons/website_sale/static/tests/tours/website_sale_complete_flow.js
+++ b/addons/website_sale/static/tests/tours/website_sale_complete_flow.js
@@ -27,7 +27,7 @@ odoo.define('website_sale_tour.tour', function (require) {
         content: "Click on add to cart",
         trigger: '#add_to_cart',
     },
-        tourUtils.goToCart(2),
+        tourUtils.goToCart({quantity: 2}),
     {
         content: "Check for 2 products in cart and proceed to checkout",
         extra_trigger: '#cart_products tr:contains("Storage Box Test") input.js_quantity:propValue(2)',
@@ -222,7 +222,7 @@ odoo.define('website_sale_tour.tour', function (require) {
         content: "Click on add to cart",
         trigger: '#add_to_cart',
     },
-        tourUtils.goToCart(2),
+        tourUtils.goToCart({quantity: 2}),
     {
         content: "Check for 2 products in cart and proceed to checkout",
         extra_trigger: '#cart_products tr:contains("Storage Box Test") input.js_quantity:propValue(2)',
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_custom_attribute_value.js b/addons/website_sale/static/tests/tours/website_sale_shop_custom_attribute_value.js
index 3a8e7d465da..4a2c467d917 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_custom_attribute_value.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_custom_attribute_value.js
@@ -22,7 +22,7 @@ odoo.define("website_sale.tour_shop_custom_attribute_value", function (require)
         trigger: 'a:contains(ADD TO CART)',
         run: 'click',
     },
-        tourUtils.goToCart(), 
+        tourUtils.goToCart(),
     {
         trigger: 'span:contains(Custom TEST: Wood)',
         extra_trigger: '#cart_products',
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_customize.js b/addons/website_sale/static/tests/tours/website_sale_shop_customize.js
index bf5f4ccfd3c..a556518e8e5 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_customize.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_customize.js
@@ -1,147 +1,220 @@
-odoo.define('website_sale.tour_shop_customize', function (require) {
-    'use strict';
+/** @odoo-module **/
 
-    var tour = require("web_tour.tour");
-    const tourUtils = require('website_sale.tour_utils');
+import tour from 'web_tour.tour';
+import tourUtils from 'website_sale.tour_utils';
 
-    tour.register('shop_customize', {
-        test: true,
-        url: '/shop',
-    },
-        [
-            {
-                content: "open customize menu",
-                trigger: '#customize-menu > a',
-            },
-            {
-                content: "click on 'Attributes & Variants filters'",
-                trigger: "#customize-menu label:contains(Attributes & Variants filters)",
-            },
-            {
-                content: "select product attribute Steel",
-                extra_trigger: 'body:not(:has(#customize-menu:visible .dropdown-menu:visible))',
-                trigger: 'form.js_attributes input:not(:checked) + label:contains(Steel - Test)',
-            },
-            {
-                content: "check the selection",
-                trigger: 'form.js_attributes input:checked + label:contains(Steel - Test)',
-                run: function () {}, // it's a check
-            },
-            {
-                content: "select product",
-                extra_trigger: 'body:not(:has(.oe_website_sale .oe_product_cart:eq(3)))',
-                trigger: '.oe_product_cart a:contains("Test Product")',
-            },
-            {
-                content: "open customize menu",
-                trigger: '#customize-menu > a',
-                extra_trigger: '#product_detail',
-            },
-            {
-                content: "check page loaded after enable  variant group",
-                trigger: '#customize-menu label:contains(List View of Variants)',
-                run: function () {}, // it's a check
-            },
-            {
-                content: "check list view of variants is disabled initially",
-                trigger: 'body:not(:has(.js_product_change))',
-                run: function () {},
-            },
-            {
-                content: "click on 'List View of Variants'",
-                trigger: "#customize-menu label:contains(List View of Variants)",
-            },
-            {
-                content: "check page loaded after list of variant customization enabled",
-                trigger: '.js_product_change',
-                run: function () {}, // it's a check
-            },
-            {
-                context: "check variant price",
-                trigger: '.custom-radio:contains("Aluminium") .badge:contains("+") .oe_currency_value:contains("50.4")',
-                run: function () {},
-            },
-            {
-                content: "check price is 750",
-                trigger: ".product_price .oe_price .oe_currency_value:containsExact(750.00)",
-                run: function () {},
-            },
-            {
-                content: "switch to another variant",
-                trigger: ".js_product label:contains('Aluminium')",
-            },
-            {
-                content: "verify that price has changed when changing variant",
-                trigger: ".product_price .oe_price .oe_currency_value:containsExact(800.40)",
-                run: function () {},
-            },
-            {
-                content: "open customize menu",
-                trigger: '#customize-menu > a',
-            },
-            {
-                content: "remove 'List View of Variants'",
-                trigger: "#customize-menu label:contains(List View of Variants):has(input:checked)",
-            },
-            {
-                content: "check page loaded after list of variant customization disabled",
-                trigger: ".js_product:not(:has(.js_product_change))",
-                run: function () {}, // it's a check
-            },
-            {
-                content: "check price is 750",
-                trigger: ".product_price .oe_price .oe_currency_value:containsExact(750.00)",
-                run: function () {},
-            },
-            {
-                content: "switch to Aluminium variant",
-                trigger: '.js_product input[data-value_name="Aluminium"]',
-            },
-            {
-                content: "verify that price has changed when changing variant",
-                trigger: ".product_price .oe_price .oe_currency_value:containsExact(800.40)",
-                run: function () {}, // it's a check
-            },
-            {
-                content: "switch back to Steel variant",
-                trigger: ".js_product label:contains('Steel - Test')",
-            },
-            {
-                content: "check price is 750",
-                trigger: ".product_price .oe_price .oe_currency_value:containsExact(750.00)",
-                run: function () {},
-            },
-            {
-                content: "click on 'Add to Cart' button",
-                trigger: "a:contains(ADD TO CART)",
-            },
-            {
-                content: "check quantity",
-                trigger: '.my_cart_quantity:containsExact(1),.o_extra_menu_items .fa-plus',
-                run: function () {}, // it's a check
-            },
-                tourUtils.goToCart(),
-            {
-                content: "click on shop",
-                trigger: "a:contains(Continue Shopping)",
-                extra_trigger: 'body:not(:has(#products_grid_before .js_attributes))',
-            },
-            {
-                content: "open customize menu bis",
-                extra_trigger: '#products_grid_before .js_attributes',
-                trigger: '#customize-menu > a',
-            },
-            {
-                content: "remove 'Attributes & Variants filters'",
-                trigger: "#customize-menu label:contains(Attributes & Variants filters):has(input:checked)",
-            },
-            {
-                content: "finish",
-                extra_trigger: 'body:not(:has(#products_grid_before .js_attributes))',
-                trigger: '#wrap:not(:has(li:has(.my_cart_quantity):visible))',
-                run: function () {}, // it's a check
-            },
-        ]
-    );
-
-    });
+tour.register('shop_customize', {
+    test: true,
+    url: '/shop?enable_editor=1',
+},
+    [
+        {
+            content: "open customize tab",
+            extra_trigger: '#oe_snippets.o_loaded',
+            trigger: '.o_we_customize_snippet_btn',
+        },
+        {
+            content: "click on 'Attributes'",
+            extra_trigger: '#oe_snippets .o_we_customize_panel',
+            trigger: 'we-button[data-name="attributes_opt"]',
+        },
+        {
+            content: "check that the iframe is reloading",
+            trigger: '.o_loading_dummy',
+            run: () => {}, // It's a check.
+        },
+        {
+            content: "click on save button after the reload",
+            trigger: 'div:not(.o_loading_dummy) > #oe_snippets button[data-action="save"]',
+            run: 'click',
+        },
+        {
+            content: "wait to exit edit mode",
+            trigger: '.o_website_editor:not(.editor_has_snippets)',
+        },
+        {
+            content: "select product attribute Steel",
+            trigger: 'iframe form.js_attributes input:not(:checked) + label:contains(Steel - Test)',
+        },
+        {
+            content: "check the selection",
+            trigger: 'iframe form.js_attributes input:checked + label:contains(Steel - Test)',
+            run: function () {}, // it's a check
+        },
+        {
+            content: "select product",
+            extra_trigger: 'iframe body:not(:has(.oe_website_sale .oe_product_cart:eq(3)))',
+            trigger: 'iframe .oe_product_cart a:contains("Test Product")',
+        },
+        {
+            content: "wait the product page to be loaded",
+            trigger: 'iframe #product_detail',
+            run: function () {},
+        },
+        {
+            content: "check list view of variants is disabled initially",
+            trigger: 'iframe body:not(:has(.js_product_change))',
+            run: function () {},
+        },
+        {
+            content: "enter edit mode",
+            trigger: '.o_edit_website_container > a',
+        },
+        {
+            content: "open customize tab",
+            extra_trigger: '#oe_snippets.o_loaded',
+            trigger: '.o_we_customize_snippet_btn',
+        },
+        {
+            content: "open 'Variants' selector",
+            extra_trigger: '#oe_snippets .o_we_customize_panel',
+            trigger: '[data-name="variants_opt"] we-toggler',
+        },
+        {
+            content: "click on 'Products List' of the 'Variants' selector",
+            trigger: 'we-button[data-name="variants_products_list_opt"]',
+        },
+        {
+            content: "check that the iframe is reloading",
+            trigger: '.o_loading_dummy',
+            run: () => {}, // It's a check.
+        },
+        {
+            content: "click on save button after the reload",
+            trigger: 'div:not(.o_loading_dummy) > #oe_snippets button[data-action="save"]',
+            run: 'click',
+        },
+        {
+            content: "wait to exit edit mode",
+            trigger: '.o_website_editor:not(.editor_has_snippets)',
+        },
+        {
+            context: "check variant price",
+            trigger: 'iframe .custom-radio:contains("Aluminium") .badge:contains("+") .oe_currency_value:contains("50.4")',
+            run: function () {},
+        },
+        {
+            content: "check price is 750",
+            trigger: "iframe .product_price .oe_price .oe_currency_value:containsExact(750.00)",
+            run: function () {},
+        },
+        {
+            content: "switch to another variant",
+            trigger: "iframe .js_product label:contains('Aluminium')",
+        },
+        {
+            content: "verify that price has changed when changing variant",
+            trigger: "iframe .product_price .oe_price .oe_currency_value:containsExact(800.40)",
+            run: function () {},
+        },
+        {
+            content: "enter edit mode",
+            trigger: '.o_edit_website_container > a',
+        },
+        {
+            content: "open customize tab",
+            extra_trigger: '#oe_snippets.o_loaded',
+            trigger: '.o_we_customize_snippet_btn',
+        },
+        {
+            content: "open 'Variants' selector",
+            extra_trigger: '#oe_snippets .o_we_customize_panel',
+            trigger: '[data-name="variants_opt"] we-toggler',
+        },
+        {
+            content: "click on 'Options' of the 'Variants' selector",
+            trigger: 'we-button[data-name="variants_options_opt"]',
+        },
+        {
+            content: "check that the iframe is reloading",
+            trigger: '.o_loading_dummy',
+            run: () => {}, // It's a check.
+        },
+        {
+            content: "click on save button after the reload",
+            trigger: 'div:not(.o_loading_dummy) > #oe_snippets button[data-action="save"]',
+            run: 'click',
+        },
+        {
+            content: "wait to exit edit mode",
+            trigger: '.o_website_editor:not(.editor_has_snippets)',
+        },
+        {
+            content: "check page loaded after list of variant customization disabled",
+            trigger: "iframe .js_product:not(:has(.js_product_change))",
+            run: function () {}, // it's a check
+        },
+        {
+            content: "check price is 750",
+            trigger: "iframe .product_price .oe_price .oe_currency_value:containsExact(750.00)",
+            run: function () {},
+        },
+        {
+            content: "switch to Aluminium variant",
+            trigger: 'iframe .js_product input[data-value_name="Aluminium"]',
+        },
+        {
+            content: "verify that price has changed when changing variant",
+            trigger: "iframe .product_price .oe_price .oe_currency_value:containsExact(800.40)",
+            run: function () {}, // it's a check
+        },
+        {
+            content: "switch back to Steel variant",
+            trigger: "iframe .js_product label:contains('Steel - Test')",
+        },
+        {
+            content: "check price is 750",
+            trigger: "iframe .product_price .oe_price .oe_currency_value:containsExact(750.00)",
+            run: function () {},
+        },
+        {
+            content: "click on 'Add to Cart' button",
+            trigger: "iframe a:contains(ADD TO CART)",
+        },
+        {
+            content: "check quantity",
+            trigger: 'iframe .my_cart_quantity:containsExact(1),.o_extra_menu_items .fa-plus',
+            run: function () {}, // it's a check
+        },
+        tourUtils.goToCart({backend: true}),
+        {
+            content: "click on shop",
+            trigger: "iframe a:contains(Continue Shopping)",
+            extra_trigger: 'iframe body:not(:has(#products_grid_before .js_attributes))',
+        },
+        {
+            content: "enter edit mode",
+            trigger: '.o_edit_website_container > a',
+        },
+        {
+            content: "open customize tab",
+            extra_trigger: '#oe_snippets.o_loaded',
+            trigger: '.o_we_customize_snippet_btn',
+        },
+        {
+            content: "remove 'Attributes'",
+            extra_trigger: '#oe_snippets .o_we_customize_panel',
+            trigger: 'we-button[data-name="attributes_opt"]',
+        },
+        {
+            content: "check that the iframe is reloading",
+            trigger: '.o_loading_dummy',
+            run: () => {}, // It's a check.
+        },
+        {
+            content: "click on save button after the reload",
+            trigger: 'div:not(.o_loading_dummy) > #oe_snippets button[data-action="save"]',
+            run: 'click',
+        },
+        {
+            content: "wait to exit edit mode",
+            trigger: '.o_website_editor:not(.editor_has_snippets)',
+        },
+        {
+            content: "finish",
+            extra_trigger: 'iframe body:not(:has(#products_grid_before .js_attributes))',
+            trigger: 'iframe #wrap:not(:has(li:has(.my_cart_quantity):visible))',
+            run: function () {}, // it's a check
+        },
+    ],
+);
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_list_view_b2c.js b/addons/website_sale/static/tests/tours/website_sale_shop_list_view_b2c.js
index 1a977c00c2d..a798aef7dfe 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_list_view_b2c.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_list_view_b2c.js
@@ -1,8 +1,7 @@
-odoo.define('website_sale.tour_shop_list_view_b2c', function (require) {
-'use strict';
+/** @odoo-module **/
 
-var tour = require('web_tour.tour');
-const tourUtils = require('website_sale.tour_utils');
+import tour from 'web_tour.tour';
+import tourUtils from 'website_sale.tour_utils';
 
 tour.register('shop_list_view_b2c', {
     test: true,
@@ -12,62 +11,83 @@ tour.register('shop_list_view_b2c', {
         {
             content: "check price on /shop",
             trigger: '.oe_product_cart .oe_currency_value:contains("825.00")',
-            run: function () {},
+            run: () => {}, // It's a check.
         },
         {
             content: "select product",
             trigger: '.oe_product_cart a:contains("Test Product")',
         },
         {
-            content: "check list view of variants is disabled initially (when on /product page)",
+            content: "check products list is disabled initially (when on /product page)",
             trigger: 'body:not(:has(.js_product_change))',
             extra_trigger: '#product_details',
-            run: function () {},
+            run: () => {}, // It's a check.
         },
         {
-            content: "open customize menu",
-            trigger: '#customize-menu > a',
-            extra_trigger: 'body:not(.notReady)',
+            content: "go to edit mode",
+            trigger: 'a.o_frontend_to_backend_edit_btn',
         },
         {
-            content: "click on 'List View of Variants'",
-            trigger: '#customize-menu label:contains(List View of Variants)',
+            content: "open customize tab",
+            extra_trigger: '#oe_snippets.o_loaded',
+            trigger: '.o_we_customize_snippet_btn',
         },
         {
-            content: "check page loaded after list of variant customization enabled",
-            trigger: '.js_product_change',
-            run: function () {},
+            content: "open 'Variants' selector",
+            extra_trigger: '#oe_snippets .o_we_customize_panel',
+            trigger: '[data-name="variants_opt"] we-toggler',
+        },
+        {
+            content: "click on 'Products List' of the 'Variants' selector",
+            trigger: 'we-button[data-name="variants_products_list_opt"]',
+        },
+        {
+            content: "check that the iframe is reloading",
+            trigger: '.o_loading_dummy',
+            run: () => {}, // It's a check.
+        },
+        {
+            content: "click on save button after the reload",
+            trigger: 'div:not(.o_loading_dummy) > #oe_snippets button[data-action="save"]',
+            run: 'click',
+        },
+        {
+            content: "wait to exit edit mode",
+            trigger: '.o_website_editor:not(.editor_has_snippets)',
+        },
+        {
+            content: "check page loaded after 'Products List' enabled",
+            trigger: 'iframe .js_product_change',
+            run: () => {}, // It's a check.
         },
         {
             context: "check variant price",
-            trigger: '.custom-radio:contains("Aluminium") .badge:contains("+") .oe_currency_value:contains("55.44")',
-            run: function () {},
+            trigger: 'iframe .custom-radio:contains("Aluminium") .badge:contains("+") .oe_currency_value:contains("55.44")',
+            run: () => {}, // It's a check.
         },
         {
             content: "check price is 825",
-            trigger: '.product_price .oe_price .oe_currency_value:containsExact("825.00")',
-            run: function () {},
+            trigger: 'iframe .product_price .oe_price .oe_currency_value:containsExact(825.00)',
+            run: () => {}, // It's a check.
         },
         {
             content: "switch to another variant",
-            trigger: '.js_product label:contains("Aluminium")',
+            trigger: 'iframe .js_product label:contains("Aluminium")',
         },
         {
             content: "verify that price has changed when changing variant",
-            trigger: '.product_price .oe_price .oe_currency_value:containsExact("880.44")',
-            run: function () {},
+            trigger: 'iframe .product_price .oe_price .oe_currency_value:containsExact(880.44)',
+            run: () => {}, // It's a check.
         },
         {
             content: "click on 'Add to Cart' button",
-            trigger: 'a:contains(ADD TO CART)',
+            trigger: 'iframe a:contains(ADD TO CART)',
         },
-            tourUtils.goToCart(),
+        tourUtils.goToCart({backend: true}),
         {
             content: "check price on /cart",
-            trigger: '#cart_products .oe_currency_value:containsExact("880.44")',
-            run: function () {},
+            trigger: 'iframe #cart_products .oe_currency_value:containsExact(880.44)',
+            run: () => {}, // It's a check.
         },
-    ]
+    ],
 );
-
-});
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index 192b8b6d317..bfc265951d8 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -221,9 +221,9 @@
                          data-customize-website-views="website_sale.product_quantity"
                          data-no-preview="true"
                          data-reload="/"/>
-            <we-select groups="product.group_product_variant" string="Variants" data-no-preview="true" data-reload="/">
-                <we-button data-customize-website-views="">Options</we-button>
-                <we-button data-customize-website-views="website_sale.product_variants">Products List</we-button>
+            <we-select data-name="variants_opt" groups="product.group_product_variant" string="Variants" data-no-preview="true" data-reload="/">
+                <we-button data-name="variants_options_opt" data-customize-website-views="">Options</we-button>
+                <we-button data-name="variants_products_list_opt" data-customize-website-views="website_sale.product_variants">Products List</we-button>
             </we-select>
             <we-row string="Cart" class="o_we_full_row">
                 <we-button title="Buy Now" class="fa fa-fw fa-bolt o_we_buy_now_btn"
diff --git a/addons/website_sale_autocomplete/static/tests/autocomplete_tour.js b/addons/website_sale_autocomplete/static/tests/autocomplete_tour.js
index a749cca4798..eee1f569076 100644
--- a/addons/website_sale_autocomplete/static/tests/autocomplete_tour.js
+++ b/addons/website_sale_autocomplete/static/tests/autocomplete_tour.js
@@ -22,7 +22,7 @@ tour.register('autocomplete_tour', {
     content: 'Add to cart',
     trigger: '#add_to_cart'
 },
-    tourUtils.goToCart(1),
+    tourUtils.goToCart(),
 {
     content: 'Go to process checkout',
     trigger: 'a:contains("Process Checkout")'
diff --git a/addons/website_sale_loyalty/static/tests/tours/test_gift_card_tour.js b/addons/website_sale_loyalty/static/tests/tours/test_gift_card_tour.js
index b6eeb2460b5..a40c8908c9a 100644
--- a/addons/website_sale_loyalty/static/tests/tours/test_gift_card_tour.js
+++ b/addons/website_sale_loyalty/static/tests/tours/test_gift_card_tour.js
@@ -18,34 +18,22 @@ tour.register('shop_sale_gift_card', {
             content: 'Add Small Drawer into cart',
             trigger: 'a:contains(ADD TO CART)',
         },
-            tourUtils.goToCart(1),
+        tourUtils.goToCart(),
         {
-            content: 'open customize menu',
-            extra_trigger: '.oe_website_sale .oe_cart',
-            trigger: '#customize-menu > a',
-        },
-        {
-            content: 'enable "Promo Code" if needed',
-            trigger: '#customize-menu label:contains(Promo Code)',
-            run: function () {
-                if (!$('#customize-menu label:contains(Promo Code) input').prop('checked')) {
-                    $('#customize-menu label:contains(Promo Code)').click();
-                }
-            }
+            content: "wait the /cart page",
+            trigger: '#cart_products',
         },
         {
             content: 'Click on "I have a promo code"',
-            extra_trigger: '.show_coupon',
             trigger: '.show_coupon',
         },
         {
             content: 'insert gift card code',
-            extra_trigger: 'form[name="coupon_code"]',
             trigger: 'form[name="coupon_code"] input[name="promo"]',
             run: 'text GIFT_CARD'
         },
         {
-            content: 'validate the git card',
+            content: 'validate the gift card',
             trigger: 'form[name="coupon_code"] .a-submit',
         },
         {
@@ -54,7 +42,6 @@ tour.register('shop_sale_gift_card', {
         },
         {
             content: 'Click on "I have a promo code"',
-            extra_trigger: '.show_coupon',
             trigger: '.show_coupon',
         },
         {
@@ -64,13 +51,13 @@ tour.register('shop_sale_gift_card', {
             run: 'text 10PERCENT'
         },
         {
-            content: 'validate the git card',
+            content: 'validate the gift card',
             trigger: 'form[name="coupon_code"] .a-submit',
         },
         {
             content: 'check gift card amount',
             trigger: '.oe_currency_value:contains("-45.00")',
-            trigger: '.oe_website_sale .oe_cart',
+            extra_trigger: '.oe_website_sale .oe_cart',
             run: function () {}, // it's a check
         },
         {
@@ -95,11 +82,11 @@ tour.register('shop_sale_gift_card', {
             content: "click on 'Add to Cart' button",
             trigger: "a:contains(ADD TO CART)",
         },
-            tourUtils.goToCart(2),
+            tourUtils.goToCart({quantity: 2}),
         {
             content: 'check gift card amount',
             trigger: '.oe_currency_value:contains("-45.00")',
-            trigger: '.oe_website_sale .oe_cart',
+            extra_trigger: '.oe_website_sale .oe_cart',
             run: function () {}, // it's a check
         },
     ],
diff --git a/addons/website_sale_loyalty/static/tests/tours/test_promo_main_tour.js b/addons/website_sale_loyalty/static/tests/tours/test_promo_main_tour.js
index ab9bbaf82fb..c7ef1ff8df7 100644
--- a/addons/website_sale_loyalty/static/tests/tours/test_promo_main_tour.js
+++ b/addons/website_sale_loyalty/static/tests/tours/test_promo_main_tour.js
@@ -24,21 +24,7 @@ tour.register('shop_sale_loyalty', {
             content: "click on 'Add to Cart' button",
             trigger: "a:contains(ADD TO CART)",
         },
-            tourUtils.goToCart(2),
-        {
-            content: "open customize menu",
-            extra_trigger: '.oe_website_sale .oe_cart',
-            trigger: '#customize-menu > a',
-        },
-        {
-            content: "enable 'Promo Code' if needed",
-            trigger: "#customize-menu label:contains(Promo Code)",
-            run: function () {
-                if (!$('#customize-menu label:contains(Promo Code) input').prop('checked')) {
-                    $('#customize-menu label:contains(Promo Code)').click();
-                }
-            }
-        },
+            tourUtils.goToCart({quantity: 2}),
         {
             content: "click on 'I have a promo code'",
             extra_trigger: '.show_coupon',
@@ -107,7 +93,7 @@ tour.register('shop_sale_loyalty', {
             content: "click on 'Add to Cart' button",
             trigger: "a:contains(ADD TO CART)",
         },
-            tourUtils.goToCart(3),
+            tourUtils.goToCart({quantity: 3}),
         {
             content: "check reduction amount got recomputed and merged both discount lines into one only",
             extra_trigger: '.oe_currency_value:contains("-75.50"):not(#cart_total .oe_currency_value:contains("-75.50"))',
diff --git a/addons/website_sale_loyalty/tests/test_shop_sale_coupon.py b/addons/website_sale_loyalty/tests/test_shop_sale_coupon.py
index 391c4f45b6c..1c3c63f4c69 100644
--- a/addons/website_sale_loyalty/tests/test_shop_sale_coupon.py
+++ b/addons/website_sale_loyalty/tests/test_shop_sale_coupon.py
@@ -90,6 +90,7 @@ class TestUi(TestSaleProductAttributeValueCommon, HttpCase):
             })],
         })
 
+        self.env.ref("website_sale.reduction_code").write({"active": True})
         self.start_tour("/", 'shop_sale_loyalty', login="admin")
 
     def test_02_admin_shop_gift_card_tour(self):
@@ -161,6 +162,7 @@ class TestUi(TestSaleProductAttributeValueCommon, HttpCase):
             'code': 'GIFT_CARD',
         })
 
+        self.env.ref("website_sale.reduction_code").write({"active": True})
         self.start_tour('/', 'shop_sale_gift_card', login='admin')
 
         self.assertEqual(len(gift_card_program.coupon_ids), 2, 'There should be two coupons, one with points, one without')

From a154ee7ad6fd3ebdd38943e1439badae11c3151d Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Tue, 10 May 2022 10:51:50 +0200
Subject: [PATCH 67/88] [IMP] website, *: add assets_media_dialog and use
 assets_editor

*: web, web_editor, web_unsplash, website_blog, website_event,
   website_forum, website_hr_recruitment, website_links,
   website_livechat, website_sale, website_slides, website_twitter

This commit fixes two issues related to the loading the wysiwyg and
editor assets.

The media dialog components are now defined in a new assets_media_dialog
bundle, to make them available both in the frontend (needed to post
comments on the forum for example), and in the backend (used in the
context of the wysiwyg edition or in the seo dialog). Ideally, The media
dialog component would lazy load its own bundle, but right now, it is
not possible when used in a ComponentWrapper.

The wysiwyg assets are now completely loaded in the frontend, after
creating the website root, when the frontend is displayed in an iframe.
It would be better if the frontend loads only what it needs of the
wysiwyg assets (some editor classes and the drop zones css), an
improvement would be to create an assets_wysiwyg_frontend or
assets_wysiwyg_minimal bundle.

The website edition components are moved to the assets_editor bundle.
For now, this bundle is included in the backend and the edition menus
are hidden from the users that are not website publishers. Ideally, the
client action would lazy load the assets_editor, only if the user is a
website publisher.

Many optimizations regarding assets will be done post-merge.

See merge commit for more information.

task-2687506
---
 .../src/legacy/js/public/public_root.js       | 18 ++--
 addons/web_editor/__manifest__.py             | 17 ++--
 addons/web_unsplash/__manifest__.py           |  2 +-
 addons/website/__manifest__.py                | 84 +++++++------------
 addons/website/controllers/main.py            |  1 -
 .../website_preview/website_preview.js        | 16 ++--
 .../static/src/components/navbar/navbar.js    | 13 ++-
 .../src/js/content/website_root_instance.js   | 10 ++-
 .../static/src/scss/website.edit_mode.scss    | 21 -----
 .../static/src/services/website_service.js    |  3 -
 .../static/src/systray_items/edit_website.js  | 13 +--
 addons/website/views/website_templates.xml    |  7 --
 addons/website_blog/__manifest__.py           |  4 +-
 addons/website_event/__manifest__.py          |  2 +-
 addons/website_forum/__manifest__.py          |  4 +-
 addons/website_hr_recruitment/__manifest__.py |  6 +-
 addons/website_links/__manifest__.py          |  6 +-
 addons/website_livechat/__manifest__.py       |  4 +-
 addons/website_sale/__manifest__.py           |  2 +-
 addons/website_slides/__manifest__.py         |  4 +-
 addons/website_twitter/__manifest__.py        |  2 +-
 21 files changed, 102 insertions(+), 137 deletions(-)

diff --git a/addons/web/static/src/legacy/js/public/public_root.js b/addons/web/static/src/legacy/js/public/public_root.js
index 5571ebba226..0d1c41b1884 100644
--- a/addons/web/static/src/legacy/js/public/public_root.js
+++ b/addons/web/static/src/legacy/js/public/public_root.js
@@ -21,7 +21,7 @@ import {
 } from "../../utils";
 import { standaloneAdapter } from "web.OwlCompatibility";
 
-import { fetchAndProcessTemplates } from "@web/core/assets";
+import { fetchAndProcessTemplates, loadBundle } from "@web/core/assets";
 import { makeEnv, startServices } from "@web/env";
 import { MainComponentsContainer } from "@web/core/main_components_container";
 import { browser } from '@web/core/browser/browser';
@@ -410,14 +410,16 @@ export async function createPublicRoot(RootWidget) {
     mapLegacyEnvToWowlEnv(legacyEnv, wowlEnv);
     // The root widget's parent is a standalone adapter so that it has _trigger_up
     const publicRoot = new RootWidget(standaloneAdapter({ Component }));
+    const app = new App(MainComponentsContainer, {
+        env: wowlEnv,
+        dev: wowlEnv.debug,
+        templates: window.__OWL_TEMPLATES__,
+        translateFn: _t,
+        translatableAttributes: ["data-tooltip"],
+    });
+    loadBundle.app = app;
     await Promise.all([
-        new App(MainComponentsContainer, {
-            env: wowlEnv,
-            dev: wowlEnv.debug,
-            templates: window.__OWL_TEMPLATES__,
-            translateFn: _t,
-            translatableAttributes: ["data-tooltip"],
-        }).mount(document.body),
+        app.mount(document.body),
         publicRoot.attachTo(document.body),
     ]);
     return publicRoot;
diff --git a/addons/web_editor/__manifest__.py b/addons/web_editor/__manifest__.py
index 32186183610..3cdffac7512 100644
--- a/addons/web_editor/__manifest__.py
+++ b/addons/web_editor/__manifest__.py
@@ -27,7 +27,6 @@ Odoo Web Editor widget.
             'web_editor/static/src/components/**/*.xml',
         ],
         'web_editor.assets_wysiwyg': [
-
             # lib
             'web_editor/static/lib/cropperjs/cropper.css',
             'web_editor/static/lib/cropperjs/cropper.js',
@@ -86,6 +85,14 @@ Odoo Web Editor widget.
             'web_editor/static/src/js/wysiwyg/wysiwyg.js',
             'web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js',
         ],
+        'web_editor.assets_media_dialog': [
+            'web_editor/static/src/components/media_dialog/*.js',
+            'web_editor/static/src/components/media_dialog/*.scss',
+            'web_editor/static/src/components/media_dialog/*.xml',
+            'web_editor/static/src/components/upload_progress_toast/*.js',
+            'web_editor/static/src/components/upload_progress_toast/*.scss',
+            'web_editor/static/src/components/upload_progress_toast/*.xml',
+        ],
         'web.assets_common': [
             'web_editor/static/lib/odoo-editor/src/base_style.css',
             'web_editor/static/lib/vkbeautify/**/*',
@@ -94,21 +101,21 @@ Odoo Web Editor widget.
             'web_editor/static/src/js/wysiwyg/fonts.js',
         ],
         'web.assets_backend': [
+            ('include', 'web_editor.assets_media_dialog'),
+
             'web_editor/static/src/scss/web_editor.common.scss',
             'web_editor/static/src/scss/web_editor.backend.scss',
 
             'web_editor/static/src/js/wysiwyg/dialog.js',
             'web_editor/static/src/js/frontend/loader.js',
             'web_editor/static/src/js/backend/**/*',
-            'web_editor/static/src/components/media_dialog/*.js',
-            'web_editor/static/src/components/media_dialog/*.scss',
-            'web_editor/static/src/components/upload_progress_toast/*.js',
-            'web_editor/static/src/components/upload_progress_toast/*.scss',
         ],
         'web.assets_frontend_minimal': [
             'web_editor/static/src/js/frontend/loader_loading.js',
         ],
         'web.assets_frontend': [
+            ('include', 'web_editor.assets_media_dialog'),
+
             'web_editor/static/src/scss/web_editor.common.scss',
             'web_editor/static/src/scss/web_editor.frontend.scss',
 
diff --git a/addons/web_unsplash/__manifest__.py b/addons/web_unsplash/__manifest__.py
index 92bacf949f9..2cfe4672c04 100644
--- a/addons/web_unsplash/__manifest__.py
+++ b/addons/web_unsplash/__manifest__.py
@@ -15,7 +15,7 @@
         'web.assets_frontend': [
             'web_unsplash/static/src/js/unsplash_beacon.js',
         ],
-        'web.assets_backend': [
+        'web_editor.assets_media_dialog': [
             'web_unsplash/static/src/components/media_dialog/*.js',
             'web_unsplash/static/src/services/unsplash_service.js',
         ],
diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 529496a017c..9927077e5aa 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -154,6 +154,7 @@
             'website/static/tests/tours/**/*',
         ],
         'web.assets_backend': [
+            ('include', 'website.assets_editor'),
             'website/static/src/scss/color_palettes.scss',
             'website/static/src/scss/view_hierarchy.scss',
             'website/static/src/scss/website.backend.scss',
@@ -168,29 +169,11 @@
             'website/static/src/js/theme_preview_form.js',
             'website/static/src/client_actions/*/*.js',
             'website/static/src/client_actions/*/*.scss',
-            'website/static/src/services/website_service.js',
-            'website/static/src/components/navbar/navbar.js',
-            'website/static/src/components/editor/editor.js',
-            'website/static/src/components/editor/editor.scss',
-            'website/static/src/components/ace_editor/ace_editor.js',
-            'website/static/src/components/ace_editor/ace_editor.scss',
-            'website/static/src/components/dialog/*.js',
-            'website/static/src/components/dialog/*.scss',
             'website/static/src/components/fields/fields.js',
-            'website/static/src/components/switch/switch.js',
-            'website/static/src/components/switch/switch.scss',
-            'website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js',
-            'website/static/src/components/wysiwyg_adapter/page_options.js',
-            'website/static/src/js/form_editor_registry.js',
-            'website/static/src/js/tours/tour_utils.js',
             'website/static/src/components/fullscreen_indication/fullscreen_indication.js',
             'website/static/src/components/fullscreen_indication/fullscreen_indication.scss',
-            'website/static/src/components/media_dialog/image_selector.js',
-            'website/static/src/systray_items/*.js',
-            'website/static/src/systray_items/*.scss',
-            'website/static/src/js/new_content_form.js',
+            'website/static/src/services/website_service.js',
             'website/static/src/js/utils.js',
-            'website/static/src/components/translator/*',
             'website/static/src/js/website_page_list.js',
         ],
         'web.qunit_suite_tests': [
@@ -205,6 +188,7 @@
             'web_editor/static/src/scss/bootstrap_overridden.scss',
             'web/static/lib/bootstrap/scss/_variables.scss',
             'website/static/src/scss/website.wysiwyg.scss',
+            'website/static/src/scss/website.edit_mode.scss',
             'website/static/src/js/editor/editor.js',
             'website/static/src/js/editor/snippets.editor.js',
             'website/static/src/js/editor/snippets.options.js',
@@ -236,55 +220,43 @@
             'website/static/src/js/editor/widget_link.js',
             'website/static/src/js/widgets/link_popover_widget.js',
         ],
-        'website.assets_editor_frontend': [
-            ('include', 'web._assets_helpers'),
-            'web_editor/static/src/scss/bootstrap_overridden.scss',
-            'web/static/lib/bootstrap/scss/_variables.scss',
-            'web_editor/static/src/scss/wysiwyg.scss',
-            'website/static/src/scss/website.edit_mode.scss',
-            'web/static/lib/nearest/jquery.nearest.js',
-            'web_editor/static/lib/odoo-editor/src/style.css',
-            'web_editor/static/lib/odoo-editor/src/utils/constants.js',
-            'web_editor/static/lib/odoo-editor/src/utils/sanitize.js',
-            'web_editor/static/lib/odoo-editor/src/utils/serialize.js',
-            'web_editor/static/lib/odoo-editor/src/utils/DOMPurify.js',
-            'web_editor/static/lib/odoo-editor/src/tablepicker/TablePicker.js',
-            'web_editor/static/lib/odoo-editor/src/commands/align.js',
-            'web_editor/static/lib/odoo-editor/src/commands/commands.js',
-            'web_editor/static/lib/odoo-editor/src/commands/deleteBackward.js',
-            'web_editor/static/lib/odoo-editor/src/commands/deleteForward.js',
-            'web_editor/static/lib/odoo-editor/src/commands/enter.js',
-            'web_editor/static/lib/odoo-editor/src/commands/shiftEnter.js',
-            'web_editor/static/lib/odoo-editor/src/commands/shiftTab.js',
-            'web_editor/static/lib/odoo-editor/src/commands/tab.js',
-            'web_editor/static/lib/odoo-editor/src/commands/toggleList.js',
+        'web_editor.assets_media_dialog': [
+            'website/static/src/components/media_dialog/image_selector.js',
         ],
         'website.assets_editor': [
             ('include', 'web._assets_helpers'),
             'web/static/lib/bootstrap/scss/_variables.scss',
-            'web/static/src/legacy/scss/ace.scss',
-            'website/static/src/scss/website.editor.ui.scss',
-            'website/static/src/scss/website.theme_install.scss',
-            'website/static/src/components/dialog/edit_menu.js',
-            'website/static/src/js/menu/customize.js',
-            'website/static/src/js/menu/debug_menu.js',
+            'website/static/src/components/ace_editor/ace_editor.js',
+            'website/static/src/components/ace_editor/ace_editor.scss',
+            'website/static/src/components/dialog/*.js',
+            'website/static/src/components/dialog/*.scss',
+            'website/static/src/components/editor/editor.js',
+            'website/static/src/components/editor/editor.scss',
+            'website/static/src/components/navbar/navbar.js',
+            'website/static/src/components/switch/switch.js',
+            'website/static/src/components/switch/switch.scss',
             'website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js',
-            'website/static/src/systray_items/mobile_preview.js',
-            'website/static/src/components/dialog/seo.js',
+            'website/static/src/components/wysiwyg_adapter/page_options.js',
+            'website/static/src/components/translator/translator.js',
+            'website/static/src/components/translator/translator.scss',
+            'website/static/src/js/form_editor_registry.js',
+            'website/static/src/js/new_content_form.js',
             'website/static/src/js/tours/homepage.js',
             'website/static/src/js/tours/tour_utils.js',
+            'website/static/src/systray_items/*.js',
+            'website/static/src/systray_items/*.scss',
         ],
         'web.assets_qweb': [
+            'website/static/src/client_actions/*/*.xml',
+            'website/static/src/components/dialog/*.xml',
+            'website/static/src/components/editor/editor.xml',
+            'website/static/src/components/fields/fields.xml',
+            'website/static/src/components/navbar/navbar.xml',
+            'website/static/src/components/translator/*.xml',
+            'website/static/src/systray_items/*.xml',
             'website/static/src/xml/website.backend.xml',
             'website/static/src/xml/website_widget.xml',
             'website/static/src/xml/theme_preview.xml',
-            'website/static/src/components/dialog/*',
-            'website/static/src/components/fields/fields.xml',
-            'website/static/src/components/editor/editor.xml',
-            'website/static/src/client_actions/*/*.xml',
-            'website/static/src/systray_items/*.xml',
-            'website/static/src/components/translator/*.xml',
-            'website/static/src/components/navbar/navbar.xml',
         ],
         'website.test_bundle': [
             '/web/static/lib/qweb/qweb2.js',
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index ab808368f3e..b807760f43e 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -687,7 +687,6 @@ class Website(Home):
         return {
             'web.assets_common': request.env['ir.qweb']._get_asset_link_urls('web.assets_common', request.session.debug),
             'web.assets_frontend': request.env['ir.qweb']._get_asset_link_urls('web.assets_frontend', request.session.debug),
-            'website.assets_editor_frontend': request.env['ir.qweb']._get_asset_link_urls('website.assets_editor_frontend', request.session.debug),
         }
 
     # ------------------------------------------------------
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 1b9ab1feb9a..0a48e966766 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -49,6 +49,7 @@ export class WebsitePreview extends Component {
         this.websiteService = useService('website');
         this.dialogService = useService('dialog');
         this.title = useService('title');
+        this.user = useService('user');
 
         this.iframeFallbackUrl = '/website/iframefallback';
 
@@ -57,6 +58,7 @@ export class WebsitePreview extends Component {
         this.websiteContext = useState(this.websiteService.context);
 
         onWillStart(async () => {
+            this.isWebsitePublisher = await this.user.hasGroup('website.group_website_publisher');
             await this.websiteService.fetchWebsites();
             const encodedPath = encodeURIComponent(this.path);
             this.initialUrl = `/website/force/${this.websiteId}?path=${encodedPath}`;
@@ -151,12 +153,14 @@ export class WebsitePreview extends Component {
     }
 
     addWelcomeMessage() {
-        const $wrap = $(this.iframe.el.contentDocument.querySelector('#wrapwrap.homepage')).find('#wrap');
-        if ($wrap.length && $wrap.html().trim() === '') {
-            this.$welcomeMessage = $(core.qweb.render('website.homepage_editor_welcome_message'));
-            this.$welcomeMessage.addClass('o_homepage_editor_welcome_message');
-            this.$welcomeMessage.css('min-height', $wrap.parent('main').height() - ($wrap.outerHeight(true) - $wrap.height()));
-            $wrap.empty().append(this.$welcomeMessage);
+        if (this.isWebsitePublisher) {
+            const $wrap = $(this.iframe.el.contentDocument.querySelector('#wrapwrap.homepage')).find('#wrap');
+            if ($wrap.length && $wrap.html().trim() === '') {
+                this.$welcomeMessage = $(core.qweb.render('website.homepage_editor_welcome_message'));
+                this.$welcomeMessage.addClass('o_homepage_editor_welcome_message');
+                this.$welcomeMessage.css('min-height', $wrap.parent('main').height() - ($wrap.outerHeight(true) - $wrap.height()));
+                $wrap.empty().append(this.$welcomeMessage);
+            }
         }
     }
 
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
index c4be4c8a0ee..d89fe6516f4 100644
--- a/addons/website/static/src/components/navbar/navbar.js
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -10,13 +10,14 @@ import {WebsiteAceEditor, AceEditorAdapterComponent} from '@website/components/a
 import {PagePropertiesDialogWrapper} from '@website/components/dialog/page_properties';
 
 const websiteSystrayRegistry = registry.category('website_systray');
-const {useState} = owl;
+const { useState, onWillStart } = owl;
 
 patch(NavBar.prototype, 'website_navbar', {
     setup() {
         this._super();
         this.websiteService = useService('website');
         this.dialogService = useService('dialog');
+        this.user = useService('user');
         this.websiteContext = useState(this.websiteService.context);
         this.aceEditor = WebsiteAceEditor;
 
@@ -56,12 +57,18 @@ patch(NavBar.prototype, 'website_navbar', {
                 isDisplayed: () => this.canShowPageProperties(),
             },
         };
+
+        onWillStart(async () => {
+            this.isWebsitePublisher = await this.user.hasGroup('website.group_website_publisher');
+        });
     },
 
     filterWebsiteMenus(sections) {
         const filteredSections = [];
         for (const section of sections) {
-            if (!this.websiteEditingMenus[section.xmlid] || this.websiteEditingMenus[section.xmlid].isDisplayed()) {
+            const isWebsiteCustomMenu = this.websiteEditingMenus[section.xmlid];
+            const displayWebsiteCustomMenu = isWebsiteCustomMenu && this.isWebsitePublisher && this.websiteEditingMenus[section.xmlid].isDisplayed();
+            if (!isWebsiteCustomMenu || displayWebsiteCustomMenu) {
                 let subSections = [];
                 if (section.childrenTree.length) {
                     subSections = this.filterWebsiteMenus(section.childrenTree);
@@ -76,7 +83,7 @@ patch(NavBar.prototype, 'website_navbar', {
      * @override
      */
     get systrayItems() {
-        if (this.websiteService.currentWebsite) {
+        if (this.websiteService.currentWebsite && this.isWebsitePublisher) {
             return websiteSystrayRegistry
                 .getEntries()
                 .map(([key, value], index) => ({ key, ...value, index }))
diff --git a/addons/website/static/src/js/content/website_root_instance.js b/addons/website/static/src/js/content/website_root_instance.js
index 63a62c2f4a8..d5422c72f8a 100644
--- a/addons/website/static/src/js/content/website_root_instance.js
+++ b/addons/website/static/src/js/content/website_root_instance.js
@@ -2,5 +2,13 @@
 
 import { createPublicRoot } from "@web/legacy/js/public/public_root";
 import { WebsiteRoot } from "./website_root";
+import { loadWysiwyg } from "web_editor.loader";
 
-export default createPublicRoot(WebsiteRoot);
+export default createPublicRoot(WebsiteRoot).then(rootInstance => {
+    if (window.parent !== window) {
+        loadWysiwyg(['website.compiled_assets_wysiwyg']).then(() => {
+            window.dispatchEvent(new CustomEvent('PUBLIC-ROOT-READY', {detail: {rootInstance}}));
+        });
+    }
+    return rootInstance;
+});
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 5b1edc0a32d..df5f9b46084 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -241,27 +241,6 @@ body.editor_enable {
         }
     }
 }
-.oe_drop_zone {
-    background-color: rgba($o-brand-odoo, 0.15);
-    animation: dropZoneInsert 1s linear 0s infinite alternate;
-
-    &.oe_insert {
-        position: relative;
-        z-index: $o-we-overlay-zindex;
-        width: 100%;
-        min-width: $o-we-dropzone-size;
-        height: $o-we-dropzone-size;
-        min-height: $o-we-dropzone-size;
-        margin: (-$o-we-dropzone-size/2) 0;
-        border: 2px dashed $o-we-border-color;
-
-        &.oe_vertical {
-            width: $o-we-dropzone-size;
-            float: left;
-            margin: 0 (-$o-we-dropzone-size/2);
-        }
-    }
-}
 .o_homepage_editor_welcome_message {
     padding-top: 128px;
     padding-bottom: 128px;
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index f659a11bf9a..abad2e76e34 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -120,9 +120,6 @@ export const websiteService = {
             get editedObjectPath() {
                 return editedObjectPath;
             },
-            get wysiwygLoaded() {
-                return !!Wysiwyg;
-            },
             goToWebsite({ websiteId, path, edition, translation } = {}) {
                 action.doAction('website.website_preview', {
                     clearBreadcrumbs: true,
diff --git a/addons/website/static/src/systray_items/edit_website.js b/addons/website/static/src/systray_items/edit_website.js
index b470843d190..38a4764ecd9 100644
--- a/addons/website/static/src/systray_items/edit_website.js
+++ b/addons/website/static/src/systray_items/edit_website.js
@@ -14,14 +14,17 @@ class EditWebsiteSystray extends Component {
             isLoading: false,
         });
 
-        useEffect((edition, snippetsLoaded) => {
+        useEffect((edition) => {
+            if (edition) {
+                this.state.isLoading = true;
+            }
+        }, () => [this.websiteContext.edition]);
+
+        useEffect((snippetsLoaded) => {
             if (snippetsLoaded) {
                 this.state.isLoading = false;
             }
-            if (edition && !this.websiteService.wysiwygLoaded) {
-                this.state.isLoading = true;
-            }
-        }, () => [this.websiteContext.edition, this.websiteContext.snippetsLoaded]);
+        }, () => [this.websiteContext.snippetsLoaded]);
     }
 
     get translatable() {
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 99663dcace9..64c832f85e5 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -125,13 +125,6 @@
         <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin=""/>
     </xpath>
 
-    <xpath expr="//head/t[@t-js='false'][last()]" position="after">
-        <t t-call-assets="website.assets_editor_frontend" t-js="false" groups="website.group_website_publisher"/>
-    </xpath>
-    <xpath expr="//head/t[@t-css='false'][last()]" position="after">
-        <t t-call-assets="website.assets_editor_frontend" t-css="false" groups="website.group_website_publisher" lazy_load="True"/>
-    </xpath>
-
     <xpath expr="//header" position="attributes">
         <attribute name="data-name">Header</attribute>
     </xpath>
diff --git a/addons/website_blog/__manifest__.py b/addons/website_blog/__manifest__.py
index c2d6f5e5ed4..097ccfb2438 100644
--- a/addons/website_blog/__manifest__.py
+++ b/addons/website_blog/__manifest__.py
@@ -37,15 +37,13 @@
         ],
         'website.assets_editor': [
             'website_blog/static/src/js/tours/website_blog.js',
+            'website_blog/static/src/js/systray_items/*.js',
         ],
         'web.assets_frontend': [
             'website_blog/static/src/scss/website_blog.scss',
             'website_blog/static/src/js/contentshare.js',
             'website_blog/static/src/js/website_blog.js',
         ],
-        'web.assets_backend': [
-            'website_blog/static/src/js/systray_items/*.js',
-        ],
     },
     'license': 'LGPL-3',
 }
diff --git a/addons/website_event/__manifest__.py b/addons/website_event/__manifest__.py
index 54cad26171a..d39b254da22 100644
--- a/addons/website_event/__manifest__.py
+++ b/addons/website_event/__manifest__.py
@@ -63,7 +63,7 @@
             '/website_event/static/src/snippets/s_events/options.js',
             'website_event/static/src/snippets/options.js',
         ],
-        'web.assets_backend': [
+        'website.assets_editor': [
             'website_event/static/src/js/systray_items/*.js',
         ],
     },
diff --git a/addons/website_forum/__manifest__.py b/addons/website_forum/__manifest__.py
index c079d80deb0..a27002b44e2 100644
--- a/addons/website_forum/__manifest__.py
+++ b/addons/website_forum/__manifest__.py
@@ -43,6 +43,7 @@ Ask questions, get answers, no distractions
     'assets': {
         'website.assets_editor': [
             'website_forum/static/src/js/tours/website_forum.js',
+            'website_forum/static/src/js/systray_items/*.js',
         ],
         'web.assets_tests': [
             'website_forum/static/tests/**/*',
@@ -52,9 +53,6 @@ Ask questions, get answers, no distractions
             'website_forum/static/src/js/website_forum.js',
             'website_forum/static/src/js/website_forum.share.js',
         ],
-        'web.assets_backend': [
-            'website_forum/static/src/js/systray_items/*.js',
-        ],
         'web.assets_qweb': [
             'website_forum/static/src/xml/*.xml',
         ],
diff --git a/addons/website_hr_recruitment/__manifest__.py b/addons/website_hr_recruitment/__manifest__.py
index 8dff924edb3..e63bee5690d 100644
--- a/addons/website_hr_recruitment/__manifest__.py
+++ b/addons/website_hr_recruitment/__manifest__.py
@@ -28,11 +28,9 @@
         'web.assets_frontend': [
             'website_hr_recruitment/static/src/scss/**/*',
         ],
-        'web.assets_backend': [
-            'website_hr_recruitment/static/src/js/systray_items/new_content.js',
-        ],
         'website.assets_editor': [
-            'website_hr_recruitment/static/src/js/**/*',
+            'website_hr_recruitment/static/src/js/systray_items/new_content.js',
+            'website_hr_recruitment/static/src/js/website_hr_recruitment_editor.js',
         ],
         'web.assets_tests': [
             'website_hr_recruitment/static/tests/**/*',
diff --git a/addons/website_links/__manifest__.py b/addons/website_links/__manifest__.py
index a984667b483..2af6b989591 100644
--- a/addons/website_links/__manifest__.py
+++ b/addons/website_links/__manifest__.py
@@ -22,12 +22,12 @@ Those trackers can be used in Google Analytics to track clicks and visitors, or
             'website_links/static/src/js/website_links_charts.js',
             'website_links/static/src/css/website_links.css',
         ],
-        'web.assets_backend': [
-            'website_links/static/src/components/navbar/navbar.js',
-        ],
         'web.assets_tests': [
             'website_links/static/tests/**/*',
         ],
+        'website.assets_editor': [
+            'website_links/static/src/components/navbar/navbar.js',
+        ],
         'web.assets_qweb': [
             'website_links/static/src/xml/*.xml',
         ],
diff --git a/addons/website_livechat/__manifest__.py b/addons/website_livechat/__manifest__.py
index bd72bc35dbf..8eb7be322bc 100644
--- a/addons/website_livechat/__manifest__.py
+++ b/addons/website_livechat/__manifest__.py
@@ -36,14 +36,12 @@ Allow website visitors to chat with the collaborators. This module also brings a
             'website_livechat/static/src/models/*.js',
         ],
         'website.assets_editor': [
-            'website_livechat/static/src/js/**/*',
+            'website_livechat/static/src/js/systray_items/*.js',
         ],
         'web.assets_backend': [
             'website_livechat/static/src/components/*/*.js',
             'website_livechat/static/src/components/*/*.scss',
             'website_livechat/static/src/models/*.js',
-            'website_livechat/static/src/js/systray_items/new_content.js',
-            'website_livechat/static/src/js/systray_items/*.js',
         ],
         'web.assets_tests': [
             'website_livechat/static/tests/tours/**/*',
diff --git a/addons/website_sale/__manifest__.py b/addons/website_sale/__manifest__.py
index 0d4e611b231..54e4c995aad 100644
--- a/addons/website_sale/__manifest__.py
+++ b/addons/website_sale/__manifest__.py
@@ -67,7 +67,6 @@
             'website_sale/static/src/scss/website_sale_dashboard.scss',
             'website_sale/static/src/scss/website_sale_backend.scss',
             'website_sale/static/src/js/tours/website_sale_shop_backend.js',
-            'website_sale/static/src/js/systray_items/*.js',
         ],
         'website.assets_wysiwyg': [
             'website_sale/static/src/scss/website_sale.editor.scss',
@@ -75,6 +74,7 @@
             'website_sale/static/src/js/website_sale.editor.js',
         ],
         'website.assets_editor': [
+            'website_sale/static/src/js/systray_items/*.js',
             'website_sale/static/src/js/website_sale_form_editor.js',
             'website_sale/static/src/js/tours/website_sale_shop_frontend.js',
         ],
diff --git a/addons/website_slides/__manifest__.py b/addons/website_slides/__manifest__.py
index fd03d904421..324288f5f04 100644
--- a/addons/website_slides/__manifest__.py
+++ b/addons/website_slides/__manifest__.py
@@ -71,7 +71,6 @@ Featuring
             'website_slides/static/src/js/slide_category_one2many.js',
             'website_slides/static/src/js/rating_field_backend.js',
             'website_slides/static/src/models/*.js',
-            'website_slides/static/src/js/systray_items/*.js',
         ],
         'web.assets_frontend': [
             'website_slides/static/src/scss/website_slides.scss',
@@ -98,6 +97,9 @@ Featuring
             'website_slides/static/src/js/tours/slides_tour.js',
             'website_slides/static/src/js/portal_chatter.js',
         ],
+        'website.assets_editor': [
+            'website_slides/static/src/js/systray_items/*.js',
+        ],
         'web.assets_tests': [
             'website_slides/static/tests/tours/*.js',
         ],
diff --git a/addons/website_twitter/__manifest__.py b/addons/website_twitter/__manifest__.py
index cd9417cd89d..b63549c1114 100644
--- a/addons/website_twitter/__manifest__.py
+++ b/addons/website_twitter/__manifest__.py
@@ -22,7 +22,7 @@ This module adds a Twitter scroller building block to the website builder, so th
             'website_twitter/static/src/scss/website_twitter.scss',
             'website_twitter/static/src/js/website.twitter.animation.js',
         ],
-        'website.assets_editor': [
+        'website.assets_wysiwyg': [
             'website_twitter/static/src/js/website.twitter.editor.js',
         ],
     },

From b3856b36647b2f1430830d4d776f8a7797b311c6 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Tue, 10 May 2022 14:51:51 +0200
Subject: [PATCH 68/88] [IMP] website: add body prop on website dialogs

This commit adds a "body" string prop to the website dialogs, that are
not necessarily defined with a template now.

See merge commit for more information.

task-2687506
---
 addons/website/static/src/components/dialog/dialog.js  | 2 ++
 addons/website/static/src/components/dialog/dialog.xml | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/addons/website/static/src/components/dialog/dialog.js b/addons/website/static/src/components/dialog/dialog.js
index b5f6d291f15..041c5c9981b 100644
--- a/addons/website/static/src/components/dialog/dialog.js
+++ b/addons/website/static/src/components/dialog/dialog.js
@@ -43,6 +43,8 @@ WebsiteDialog.props = {
     showSecondaryButton: { type: Boolean, optional: true },
     close: Function,
     closeOnClick: { type: Boolean, optional: true },
+    body: { type: String, optional: true },
+    slots: { type: Object, optional: true },
 };
 WebsiteDialog.defaultProps = {
     ...Dialog.defaultProps,
diff --git a/addons/website/static/src/components/dialog/dialog.xml b/addons/website/static/src/components/dialog/dialog.xml
index 3f518e0868c..56d35248985 100644
--- a/addons/website/static/src/components/dialog/dialog.xml
+++ b/addons/website/static/src/components/dialog/dialog.xml
@@ -4,7 +4,10 @@
     <Dialog contentClass="contentClasses"
         size="props.size"
         title="props.title">
-        <t t-slot="default"/>
+        <t t-set-slot="default">
+            <t t-if="props.slots and props.slots.default" t-slot="default"/>
+            <t t-else="" t-esc="props.body"/>
+        </t>
         <t t-set-slot="footer">
             <t t-if="props.slots and props.slots.footer" t-slot="footer"/>
             <t t-else="">

From 99b50d18e220aedf14de806f4bf1b2d35c32de35 Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Thu, 23 Jun 2022 19:32:57 +0200
Subject: [PATCH 69/88] [REF] test_website, *: adapt tours to new client action

*: website, website_blog, website_crm, website_event, website_forum,
   website_hr_recruitment, website_mass_mailing, website_sale,
   website_sale_loyalty, website_slides

This commit adds the current website displayed view xmlid outside of the
iframe, on its container, so that the tours registered with
registerThemeHomepageTour can continue to prepend their triggers with
the view xml id.

Introduce registerEditionTour: this function will allow tour maker to
more easily register a tour that needs to start in the iframe's backend
and go in edit mode.

See merge commit for more information.

task-2687506

Co-authored-by: Benjamin Vray <bvr@odoo.com>
Co-authored-by: Younn Olivier <yol@odoo.com>
---
 .../static/tests/tours/custom_snippets.js     |  29 +-
 .../tests/tours/image_upload_progress.js      |  22 +-
 .../static/tests/tours/reset_views.js         |  37 +--
 .../test_website/tests/test_custom_snippet.py |   2 +-
 .../tests/test_image_upload_progress.py       |   4 +-
 addons/test_website/tests/test_reset_views.py |   4 +-
 .../static/tests/tours/configurator_flow.js   |  19 +-
 .../tours/slides_certification_member.js      |   2 +-
 addons/website/__manifest__.py                |   4 +-
 .../website_preview/website_preview.js        |  10 +-
 .../website_preview/website_preview.xml       |   3 +-
 .../src/components/dialog/edit_menu.xml       |   2 +-
 .../website/static/src/js/editor/wysiwyg.js   |   3 +-
 .../website/static/src/js/tours/tour_utils.js | 105 ++++--
 .../static/src/systray_items/new_content.js   |  22 +-
 .../static/src/systray_items/new_content.xml  |   8 +-
 .../static/tests/tours/automatic_editor.js    |  18 +-
 .../tests/tours/carousel_content_removal.js   |  17 +-
 .../tests/tours/conditional_visibility.js     |  34 +-
 .../tours/conditional_visibility_frontend.js  |  19 ++
 .../tests/tours/configurator_translation.js   |   7 +-
 .../default_shape_gets_palette_colors.js      |   6 +-
 .../static/tests/tours/edit_link_popover.js   |  55 +---
 .../static/tests/tours/edit_megamenu.js       |  39 ++-
 .../website/static/tests/tours/edit_menus.js  |  84 ++---
 .../tests/tours/edit_translated_page.js       |  18 +-
 .../static/tests/tours/focus_blur_snippets.js |  16 +-
 .../website/static/tests/tours/html_editor.js |  91 +++---
 .../website/static/tests/tours/link_tools.js  |  35 +-
 .../static/tests/tours/restricted_editor.js   |   2 +-
 addons/website/static/tests/tours/rte.js      | 103 +++---
 .../tests/tours/snippet_background_edition.js |  36 +--
 .../static/tests/tours/snippet_countdown.js   |  12 +-
 .../tours/snippet_empty_parent_autoremove.js  |  20 +-
 .../tests/tours/snippet_popup_add_remove.js   |  15 +-
 .../tests/tours/snippet_social_media.js       |  22 +-
 .../static/tests/tours/snippet_version.js     |  34 +-
 .../tests/tours/snippets_all_drag_and_drop.js |  53 +++-
 .../tests/tours/specific_website_editor.js    |  20 +-
 .../static/tests/tours/website_form_editor.js | 299 +++---------------
 .../tours/website_form_editor_frontend.js     | 203 ++++++++++++
 .../tests/tours/website_snippets_menu_tabs.js |   2 +-
 .../tests/tours/website_style_edition.js      |  15 +-
 addons/website/tests/test_automatic_editor.py |   2 +-
 addons/website/tests/test_configurator.py     |   4 +-
 addons/website/tests/test_snippets.py         |  17 +-
 addons/website/tests/test_ui.py               |  29 +-
 .../website/tests/test_website_form_editor.py |  10 +-
 .../website/wizard/base_language_install.py   |   3 +-
 .../static/src/js/tours/website_blog.js       |  56 ++--
 addons/website_blog/tests/test_ui.py          |   2 +-
 .../static/tests/tours/website_crm.js         |  16 +-
 addons/website_crm/tests/test_website_crm.py  |   4 +-
 .../static/src/js/tours/event_tour.js         |  26 +-
 .../static/tests/tours/website_event.js       |  43 ++-
 .../website_event/tests/test_website_event.py |   2 +-
 addons/website_forum/__manifest__.py          |   4 +-
 .../static/src/js/tours/website_forum.js      |   7 +-
 .../tests/tours/website_hr_recruitment.js     |  36 ++-
 .../tests/test_website_hr_recruitment.py      |   2 +-
 .../static/tests/tours/newsletter_block.js    |  23 +-
 .../static/tests/tours/newsletter_popup.js    |   6 +-
 .../tests/test_snippets.py                    |   2 +-
 addons/website_sale/__manifest__.py           |   4 +-
 .../static/src/js/tours/website_sale_shop.js  |  48 +--
 .../src/js/tours/website_sale_shop_backend.js |   8 -
 .../js/tours/website_sale_shop_frontend.js    |  11 -
 .../tests/tours/website_sale_complete_flow.js |  19 +-
 .../website_sale_complete_flow_backend.js     |  22 ++
 .../tours/website_sale_shop_customize.js      |  74 +----
 .../tours/website_sale_shop_editor_tour.js    |  10 +-
 .../tours/website_sale_shop_list_view_b2c.js  |  29 +-
 addons/website_sale/tests/test_customize.py   |   4 +-
 .../website_sale/tests/test_sale_process.py   |   6 +-
 .../static/tests/tours/test_gift_card_tour.js |   9 +-
 addons/website_slides/__manifest__.py         |   1 +
 addons/website_slides/controllers/main.py     |   2 +-
 .../static/src/js/components/editor.js        |  19 ++
 .../src/js/slides_course_fullscreen_player.js |  23 +-
 .../src/js/systray_items/new_content.js       |  15 +
 .../tours/slide_course_publisher_standard.js  |  50 +--
 .../tests/tours/slides_course_publisher.js    |  48 +--
 .../tours/slides_full_screen_web_editor.js    |  23 +-
 .../static/tests/tours/slides_tour_tools.js   |  86 ++---
 .../website_slides/tests/test_ui_wslides.py   |   8 +-
 85 files changed, 1197 insertions(+), 1167 deletions(-)
 create mode 100644 addons/website/static/tests/tours/conditional_visibility_frontend.js
 create mode 100644 addons/website/static/tests/tours/website_form_editor_frontend.js
 delete mode 100644 addons/website_sale/static/src/js/tours/website_sale_shop_backend.js
 delete mode 100644 addons/website_sale/static/src/js/tours/website_sale_shop_frontend.js
 create mode 100644 addons/website_sale/static/tests/tours/website_sale_complete_flow_backend.js
 create mode 100644 addons/website_slides/static/src/js/components/editor.js

diff --git a/addons/test_website/static/tests/tours/custom_snippets.js b/addons/test_website/static/tests/tours/custom_snippets.js
index 682776ce7c9..ebbce117ee4 100644
--- a/addons/test_website/static/tests/tours/custom_snippets.js
+++ b/addons/test_website/static/tests/tours/custom_snippets.js
@@ -1,7 +1,7 @@
 odoo.define('test_website.custom_snippets', function (require) {
 'use strict';
 
-var tour = require('web_tour.tour');
+const wTourUtils = require('website.tour_utils');
 
 /**
  * The purpose of this tour is to check the custom snippets flow:
@@ -22,24 +22,21 @@ var tour = require('web_tour.tour');
  * -> ensure it was deleted
  */
 
-tour.register('test_custom_snippet', {
+wTourUtils.registerEditionTour('test_custom_snippet', {
     url: '/',
-    test: true
+    edition: true,
+    test: true,
 }, [
-    {
-        content: "enter edit mode",
-        trigger: "a[data-action=edit]"
-    },
     {
         content: "drop a snippet",
-        trigger: "#oe_snippets .oe_snippet[name='Banner'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
-        extra_trigger: "body.editor_enable.editor_has_snippets",
+        trigger: "#oe_snippets.o_loaded .oe_snippet[name='Banner'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
+        extra_trigger: "iframe body.editor_enable",
         moveTrigger: ".oe_drop_zone",
-        run: "drag_and_drop #wrap",
+        run: "drag_and_drop iframe #wrap",
     },
     {
         content: "customize snippet",
-        trigger: "#wrapwrap .s_banner h1",
+        trigger: "iframe #wrapwrap .s_banner h1",
         run: "text",
         consumeEvent: "input",
     },
@@ -53,7 +50,7 @@ tour.register('test_custom_snippet', {
     },
     {
         content: "ensure custom snippet appeared",
-        trigger: "#oe_snippets .oe_snippet[name='Custom Banner']",
+        trigger: "#oe_snippets.o_loaded .oe_snippet[name='Custom Banner']",
         run: function () {
             $("#oe_snippets .oe_snippet[name='Custom Banner'] .o_rename_btn").attr("style", "display: block;");
             // hover is needed for rename button to appear
@@ -76,18 +73,18 @@ tour.register('test_custom_snippet', {
     {
         content: "drop custom snippet",
         trigger: ".oe_snippet[name='Bruce Banner'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
-        extra_trigger: "body.editor_enable.editor_has_snippets",
+        extra_trigger: "iframe body.editor_enable",
         moveTrigger: ".oe_drop_zone",
-        run: "drag_and_drop #wrap",
+        run: "drag_and_drop iframe #wrap",
     },
     {
         content: "ensure banner section exists",
-        trigger: "#wrap section[data-name='Banner']",
+        trigger: "iframe #wrap section[data-name='Banner']",
         run: function () {}, // check
     },
     {
         content: "ensure custom banner section exists",
-        trigger: "#wrap section[data-name='Bruce Banner']",
+        trigger: "iframe #wrap section[data-name='Bruce Banner']",
         run: function () {
             $("#oe_snippets .oe_snippet[name='Bruce Banner'] .o_delete_btn").attr("style", "display: block;");
             // hover is needed for delete button to appear
diff --git a/addons/test_website/static/tests/tours/image_upload_progress.js b/addons/test_website/static/tests/tours/image_upload_progress.js
index 2449a54353c..c5b31a31337 100644
--- a/addons/test_website/static/tests/tours/image_upload_progress.js
+++ b/addons/test_website/static/tests/tours/image_upload_progress.js
@@ -1,7 +1,7 @@
 odoo.define('test_website.image_upload_progress', function (require) {
 'use strict';
 
-const tour = require('web_tour.tour');
+const wTourUtils = require('website.tour_utils');
 
 const { FileSelectorControlPanel } = require('@web_editor/components/media_dialog/file_selector');
 const { patch, unpatch } = require('web.utils');
@@ -26,7 +26,7 @@ const patchMediaDialog = () => patch(FileSelectorControlPanel.prototype, 'test_w
             getFileFromB64(['image/jpeg', 'image.jpeg', "/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAA0NDQ0ODQ4QEA4UFhMWFB4bGRkbHi0gIiAiIC1EKjIqKjIqRDxJOzc7STxsVUtLVWx9aWNpfZeHh5e+tb75+f8BDQ0NDQ4NDhAQDhQWExYUHhsZGRseLSAiICIgLUQqMioqMipEPEk7NztJPGxVS0tVbH1pY2l9l4eHl761vvn5///CABEIAEsASwMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAABv/aAAgBAQAAAACHAAAAAAAAAAAAAAAAH//EABUBAQEAAAAAAAAAAAAAAAAAAAAH/9oACAECEAAAAKYAAAB//8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/2gAIAQMQAAAAngAAAf/EABQQAQAAAAAAAAAAAAAAAAAAAGD/2gAIAQEAAT8ASf/EABQRAQAAAAAAAAAAAAAAAAAAAED/2gAIAQIBAT8AT//EABQRAQAAAAAAAAAAAAAAAAAAAED/2gAIAQMBAT8AT//Z"]),
         ];
 
-        if (!this.props.multiImages) {
+        if (!this.props.multiSelect) {
             if (patchWithError) {
                 files = [files[0]];
             } else {
@@ -45,13 +45,9 @@ const setupSteps = [{
     run: () => {
         patchMediaDialog();
     },
-}, {
-    content: "enter edit mode",
-    trigger: ".o_edit_website_container a"
 }, {
     content: "drop a snippet",
     trigger: "#oe_snippets .oe_snippet[name='Text - Image'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
-    extra_trigger: "body.editor_has_snippets",
     moveTrigger: "iframe .oe_drop_zone",
     run: "drag_and_drop iframe #wrap",
 }, {
@@ -64,9 +60,10 @@ const setupSteps = [{
 
 const formatErrorMsg = "format is not supported. Try with: .gif, .jpe, .jpeg, .jpg, .png, .svg";
 
-tour.register('test_image_upload_progress', {
-    url: `/web#action=website.website_preview&path=${encodeURI('/test_image_progress')}`,
-    test: true
+wTourUtils.registerEditionTour('test_image_upload_progress', {
+    url: '/test_image_progress',
+    test: true,
+    edition: true,
 }, [
     ...setupSteps,
     // 1. Check multi image upload
@@ -200,9 +197,10 @@ tour.register('test_image_upload_progress', {
 ]);
 
 
-tour.register('test_image_upload_progress_unsplash', {
-    url: `/web#action=website.website_preview&path=${encodeURI('/test_image_progress')}`,
-    test: true
+wTourUtils.registerEditionTour('test_image_upload_progress_unsplash', {
+    url: '/test_image_progress',
+    test: true,
+    edition: true,
 }, [
     ...setupSteps,
     // 1. Check multi image upload
diff --git a/addons/test_website/static/tests/tours/reset_views.js b/addons/test_website/static/tests/tours/reset_views.js
index d379c776908..cee8bc06498 100644
--- a/addons/test_website/static/tests/tours/reset_views.js
+++ b/addons/test_website/static/tests/tours/reset_views.js
@@ -2,7 +2,7 @@
 odoo.define('test_website.reset_views', function (require) {
 'use strict';
 
-var tour = require("web_tour.tour");
+const wTourUtils = require('website.tour_utils');
 
 var BROKEN_STEP = {
     // because saving a broken template opens a recovery page with no assets
@@ -13,36 +13,33 @@ var BROKEN_STEP = {
     trigger: 'body',
     run: function () {}
 };
-tour.register('test_reset_page_view_complete_flow_part1', {
+wTourUtils.registerEditionTour('test_reset_page_view_complete_flow_part1', {
     test: true,
     url: '/test_page_view',
+    // 1. Edit the page through Edit Mode, it will COW the view
+    edition: true,
 },
     [
-        // 1. Edit the page through Edit Mode, it will COW the view
-        {
-            content: "enter edit mode",
-            trigger: "a[data-action=edit]"
-        },
         {
             content: "drop a snippet",
-            trigger: "#oe_snippets .oe_snippet:has(.s_cover) .oe_snippet_thumbnail",
+            trigger: "#oe_snippets.o_loaded .oe_snippet:has(.s_cover) .oe_snippet_thumbnail",
             // id starting by 'oe_structure..' will actually create an inherited view
-            run: "drag_and_drop #oe_structure_test_website_page",
+            run: "drag_and_drop iframe #oe_structure_test_website_page",
         },
         {
             content: "save the page",
-            extra_trigger: '#oe_structure_test_website_page.o_dirty',
+            extra_trigger: 'iframe #oe_structure_test_website_page.o_dirty',
             trigger: "button[data-action=save]",
         },
         // 2. Edit that COW'd view in the HTML editor to break it.
         {
-            content: "open customize menu",
-            extra_trigger: "body:not(.editor_enable)",
-            trigger: '#customize-menu > a',
+            content: "open site menu",
+            extra_trigger: "iframe body:not(.editor_enable)",
+            trigger: 'button[data-menu-xmlid="website.menu_site"]',
         },
         {
             content: "open html editor",
-            trigger: '#html_editor',
+            trigger: 'a[data-menu-xmlid="website.menu_ace_editor"]',
         },
         {
             content: "add a broken t-field in page DOM",
@@ -60,29 +57,29 @@ tour.register('test_reset_page_view_complete_flow_part1', {
     ]
 );
 
-tour.register('test_reset_page_view_complete_flow_part2', {
+wTourUtils.registerEditionTour('test_reset_page_view_complete_flow_part2', {
     test: true,
     url: '/test_page_view',
 },
     [
         {
             content: "check that the view got fixed",
-            trigger: 'p:containsExact("Test Page View")',
+            trigger: 'iframe p:containsExact("Test Page View")',
             run: function () {}, // it's a check
         },
         {
             content: "check that the inherited COW view is still there (created during edit mode)",
-            trigger: '#oe_structure_test_website_page .s_cover',
+            trigger: 'iframe #oe_structure_test_website_page .s_cover',
             run: function () {}, // it's a check
         },
         //4. Now break the inherited view created when dropping a snippet
         {
-            content: "open customize menu",
-            trigger: '#customize-menu > a',
+            content: "open site menu",
+            trigger: 'button[data-menu-xmlid="website.menu_site"]',
         },
         {
             content: "open html editor",
-            trigger: '#html_editor',
+            trigger: 'a[data-menu-xmlid="website.menu_ace_editor"]',
         },
         {
             content: "select oe_structure view",
diff --git a/addons/test_website/tests/test_custom_snippet.py b/addons/test_website/tests/test_custom_snippet.py
index c79ed227dc0..d5adc0c9a65 100644
--- a/addons/test_website/tests/test_custom_snippet.py
+++ b/addons/test_website/tests/test_custom_snippet.py
@@ -10,4 +10,4 @@ class TestCustomSnippet(odoo.tests.HttpCase):
 
     @mute_logger('odoo.addons.http_routing.models.ir_http', 'odoo.http')
     def test_01_run_tour(self):
-        self.start_tour("/", 'test_custom_snippet', login="admin")
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'test_custom_snippet', login="admin")
diff --git a/addons/test_website/tests/test_image_upload_progress.py b/addons/test_website/tests/test_image_upload_progress.py
index b77071b8086..13beecc5422 100644
--- a/addons/test_website/tests/test_image_upload_progress.py
+++ b/addons/test_website/tests/test_image_upload_progress.py
@@ -13,7 +13,7 @@ from odoo import http
 class TestImageUploadProgress(odoo.tests.HttpCase):
 
     def test_01_image_upload_progress(self):
-        self.start_tour("/web", 'test_image_upload_progress', login="admin")
+        self.start_tour(self.env['website'].get_client_action_url('/test_image_progress'), 'test_image_upload_progress', login="admin")
 
     def test_02_image_upload_progress_unsplash(self):
         BASE_URL = self.base_url()
@@ -53,4 +53,4 @@ class TestImageUploadProgress(odoo.tests.HttpCase):
         media_library_search.routing_type = 'json'
         Web_Editor.media_library_search = http.route(['/web_editor/media_library_search'], type='json', auth="user", website=True)(media_library_search)
 
-        self.start_tour("/web", 'test_image_upload_progress_unsplash', login="admin")
+        self.start_tour(self.env['website'].get_client_action_url('/test_image_progress'), 'test_image_upload_progress_unsplash', login="admin")
diff --git a/addons/test_website/tests/test_reset_views.py b/addons/test_website/tests/test_reset_views.py
index 2d8bf7fe656..34d33ef7453 100644
--- a/addons/test_website/tests/test_reset_views.py
+++ b/addons/test_website/tests/test_reset_views.py
@@ -90,9 +90,9 @@ class TestWebsiteResetViews(odoo.tests.HttpCase):
 
     @mute_logger('odoo.http')
     def test_07_reset_page_view_complete_flow(self):
-        self.start_tour("/", 'test_reset_page_view_complete_flow_part1', login="admin")
+        self.start_tour(self.env['website'].get_client_action_url('/test_page_view'), 'test_reset_page_view_complete_flow_part1', login="admin")
         self.fix_it('/test_page_view')
-        self.start_tour("/", 'test_reset_page_view_complete_flow_part2', login="admin")
+        self.start_tour(self.env['website'].get_client_action_url('/test_page_view'), 'test_reset_page_view_complete_flow_part2', login="admin")
         self.fix_it('/test_page_view')
 
     @mute_logger('odoo.http')
diff --git a/addons/test_website_modules/static/tests/tours/configurator_flow.js b/addons/test_website_modules/static/tests/tours/configurator_flow.js
index ea4529a0927..312e25db3a8 100644
--- a/addons/test_website_modules/static/tests/tours/configurator_flow.js
+++ b/addons/test_website_modules/static/tests/tours/configurator_flow.js
@@ -2,6 +2,7 @@ odoo.define('test_website_modules.tour.configurator_flow', function (require) {
 'use strict';
 
 const tour = require('web_tour.tour');
+const wTourUtils = require('website.tour_utils');
 
 tour.register('configurator_flow', {
     test: true,
@@ -74,27 +75,27 @@ tour.register('configurator_flow', {
         run: function () {}, // it's a check
     }, {
         content: "Wait untill the configurator is finished",
-        trigger: 'body.editor_started',
+        trigger: '#oe_snippets.o_loaded',
         timeout: 30000,
-    }, {
-        content: "exit edit mode",
-        trigger: '.o_we_website_top_actions button.btn-primary:contains("Save")',
-    }, {
+    },
+    ...wTourUtils.clickOnSave(),
+    {
         content: "check menu and footer links are correct",
-        trigger: '#oe_main_menu_navbar', // edit mode left and landed on regular frontend
+        trigger: 'body:not(.editor_enable)', // edit mode left
         run: function () {
+            const $iframe = this.$anchor.find('iframe.o_iframe:not(.o_ignore_in_tour)');
             for (const menu of ['Home', 'Events', 'Courses', 'Pricing', 'News', 'Success Stories', 'Contact us']) {
-                if (!$(`#top_menu a:contains(${menu})`).length) {
+                if (!$iframe.contents().find(`#top_menu a:contains(${menu})`).length) {
                     console.error(`Missing ${menu} menu. It should have been created by the configurator.`);
                 }
             }
             for (const url of ['/', '/event', '/slides', '/pricing', '/blog/', '/blog/', '/contactus']) {
-                if (!$(`#top_menu a[href^='${url}'`).length) {
+                if (!$iframe.contents().find(`#top_menu a[href^='${url}'`).length) {
                     console.error(`Missing ${url} menu URL. It should have been created by the configurator.`);
                 }
             }
             for (const link of ['Privacy Policy', 'Contact us']) {
-                if (!$(`#footer ul a:contains(${link})`).length) {
+                if (!$iframe.contents().find(`#footer ul a:contains(${link})`).length) {
                     console.error(`Missing ${link} footer link. It should have been created by the configurator.`);
                 }
             }
diff --git a/addons/test_website_slides_full/tests/tours/slides_certification_member.js b/addons/test_website_slides_full/tests/tours/slides_certification_member.js
index f74caa70922..65f19c0f066 100644
--- a/addons/test_website_slides_full/tests/tours/slides_certification_member.js
+++ b/addons/test_website_slides_full/tests/tours/slides_certification_member.js
@@ -41,7 +41,7 @@ var initTourSteps = [{
 var buyCertificationSteps = [{
     content: 'eLearning: try to buy course',
     trigger: 'a:contains("Add to Cart")'
-}, 
+},
     tourUtils.goToCart(),
 {
     content: 'eCommerce: Process Checkout',
diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 9927077e5aa..b6a0cb53598 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -176,6 +176,9 @@
             'website/static/src/js/utils.js',
             'website/static/src/js/website_page_list.js',
         ],
+        'web.assets_common': [
+            'website/static/src/js/tours/tour_utils.js',
+        ],
         'web.qunit_suite_tests': [
             'website/static/tests/dashboard_tests.js',
             'website/static/tests/website_tests.js',
@@ -242,7 +245,6 @@
             'website/static/src/js/form_editor_registry.js',
             'website/static/src/js/new_content_form.js',
             'website/static/src/js/tours/homepage.js',
-            'website/static/src/js/tours/tour_utils.js',
             'website/static/src/systray_items/*.js',
             'website/static/src/systray_items/*.scss',
         ],
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 0a48e966766..f4dcb573da1 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -55,6 +55,7 @@ export class WebsitePreview extends Component {
 
         this.iframe = useRef('iframe');
         this.iframefallback = useRef('iframefallback');
+        this.container = useRef('container');
         this.websiteContext = useState(this.websiteService.context);
 
         onWillStart(async () => {
@@ -194,12 +195,17 @@ export class WebsitePreview extends Component {
             this.websiteService.websiteRootInstance = event.detail.rootInstance;
         });
 
+        // This is needed for the registerThemeHomepageTour tours
+        this.container.el.dataset.viewXmlid = this.iframe.el.contentDocument.documentElement.dataset.viewXmlid;
+
         // Before leaving the iframe, its content is replicated on an
         // underlying iframe, to avoid for white flashes (visible on
         // Chrome Windows/Linux).
         this.iframe.el.contentWindow.addEventListener('beforeunload', () => {
-            this.iframefallback.el.contentDocument.body.replaceWith(this.iframe.el.contentDocument.body.cloneNode(true));
-            $().getScrollingElement(this.iframefallback.el.contentDocument)[0].scrollTop = $().getScrollingElement(this.iframe.el.contentDocument)[0].scrollTop;
+            if (!this.websiteContext.edition) {
+                this.iframefallback.el.contentDocument.body.replaceWith(this.iframe.el.contentDocument.body.cloneNode(true));
+                $().getScrollingElement(this.iframefallback.el.contentDocument)[0].scrollTop = $().getScrollingElement(this.iframe.el.contentDocument)[0].scrollTop;
+            }
         });
 
         // The clicks on the iframe are listened, so that links with external
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml
index 801fc122c47..2ba1329f3bd 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.xml
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml
@@ -11,9 +11,8 @@
         </div>
     </t>
 </t>
-
 <t t-name="website.WebsitePreview" owl="1">
-    <div class="o_website_preview" t-att-class="{ 'editor_enable editor_has_snippets': this.websiteContext.snippetsLoaded }">
+    <div class="o_website_preview" t-att-class="{ 'editor_enable editor_has_snippets': this.websiteContext.snippetsLoaded }" t-ref="container">
         <div class="o_iframe_container" t-att-class="{ 'o_is_mobile': this.websiteContext.isMobile }">
             <BlockIframe/>
             <iframe t-att-src="iframeFallbackUrl"
diff --git a/addons/website/static/src/components/dialog/edit_menu.xml b/addons/website/static/src/components/dialog/edit_menu.xml
index 0209d28e90a..d9f7d46515c 100644
--- a/addons/website/static/src/components/dialog/edit_menu.xml
+++ b/addons/website/static/src/components/dialog/edit_menu.xml
@@ -15,7 +15,7 @@
                 Url or Email
             </label>
             <div class="col-md-9">
-                <input type="text" t-model="state.url" class="form-control" required="required"/>
+                <input id="url_input" type="text" t-model="state.url" class="form-control" required="required"/>
             </div>
         </div>
     </WebsiteDialog>
diff --git a/addons/website/static/src/js/editor/wysiwyg.js b/addons/website/static/src/js/editor/wysiwyg.js
index 623296cede0..1baedd994a9 100644
--- a/addons/website/static/src/js/editor/wysiwyg.js
+++ b/addons/website/static/src/js/editor/wysiwyg.js
@@ -50,8 +50,9 @@ const WebsiteWysiwyg = Wysiwyg.extend({
     start: function () {
         this.options.toolbarHandler = $('#web_editor-top-edit');
 
+        const $editableWindow = this.$editable[0].ownerDocument.defaultView;
         // Dropdown menu initialization: handle dropdown openings by hand
-        var $dropdownMenuToggles = this.$('.o_mega_menu_toggle, #top_menu_container .dropdown-toggle');
+        var $dropdownMenuToggles = $editableWindow.$('.o_mega_menu_toggle, #top_menu_container .dropdown-toggle');
         $dropdownMenuToggles.removeAttr('data-toggle').dropdown('dispose');
         $dropdownMenuToggles.on('click.wysiwyg_megamenu', ev => {
             this.odooEditor.observerUnactive();
diff --git a/addons/website/static/src/js/tours/tour_utils.js b/addons/website/static/src/js/tours/tour_utils.js
index 1470a259884..4ba823e18d9 100644
--- a/addons/website/static/src/js/tours/tour_utils.js
+++ b/addons/website/static/src/js/tours/tour_utils.js
@@ -121,10 +121,11 @@ function changePaddingSize(direction) {
  */
 function clickOnEdit(position = "bottom") {
     return {
-        trigger: "a[data-action=edit]",
+        trigger: ".o_menu_systray .o_edit_website_container a",
         content: Markup(_t("<b>Click Edit</b> to start designing your homepage.")),
-        extra_trigger: ".homepage",
+        extra_trigger: "body:not(.editor_has_snippets)",
         position: position,
+        timeout: 30000,
     };
 }
 
@@ -134,9 +135,10 @@ function clickOnEdit(position = "bottom") {
  * @param {*} position
  */
 function clickOnSnippet(snippet, position = "bottom") {
+    const snippetClass = snippet.id || snippet;
     return {
-        trigger: snippet.id ? `#wrapwrap .${snippet.id}` : snippet,
-        extra_trigger: "body.editor_enable",
+        trigger: `iframe #wrapwrap .${snippetClass}`,
+        extra_trigger: "iframe body.editor_enable",
         content: Markup(_t("<b>Click on a snippet</b> to access its options menu.")),
         position: position,
         run: "click",
@@ -145,12 +147,14 @@ function clickOnSnippet(snippet, position = "bottom") {
 
 function clickOnSave(position = "bottom") {
     return [{
-        trigger: "button[data-action=save]",
+        trigger: "div:not(.o_loading_dummy) > #oe_snippets button[data-action=\"save\"]:not([disabled])",
+        extra_trigger: "body:not(:has(.o_dialog))",
         in_modal: false,
         content: Markup(_t("Good job! It's time to <b>Save</b> your work.")),
         position: position,
     }, {
-        trigger: 'body:not(.editor_enable)',
+        trigger: 'iframe body:not(.editor_enable)',
+        noPrepend: true,
         auto: true, // Just making sure save is finished in automatic tests
         run: () => null,
     }];
@@ -164,8 +168,8 @@ function clickOnSave(position = "bottom") {
  */
 function clickOnText(snippet, element, position = "bottom") {
     return {
-        trigger: snippet.id ? `#wrapwrap .${snippet.id} ${element}` : snippet,
-        extra_trigger: "body.editor_enable",
+        trigger: snippet.id ? `iframe #wrapwrap .${snippet.id} ${element}` : snippet,
+        extra_trigger: "iframe body.editor_enable",
         content: Markup(_t("<b>Click on a text</b> to start editing it.")),
         position: position,
         run: "text",
@@ -181,13 +185,12 @@ function clickOnText(snippet, element, position = "bottom") {
 function dragNDrop(snippet, position = "bottom") {
     return {
         trigger: `#oe_snippets .oe_snippet[name="${snippet.name}"] .oe_snippet_thumbnail:not(.o_we_already_dragging)`,
-        extra_trigger: "body.editor_enable.editor_has_snippets",
-        moveTrigger: '.oe_drop_zone',
+        extra_trigger: ".o_website_preview.editor_enable.editor_has_snippets",
         content: Markup(_.str.sprintf(_t("Drag the <b>%s</b> building block and drop it at the bottom of the page."), snippet.name)),
         position: position,
         // Normally no main snippet can be dropped in the default footer but
         // targeting it allows to force "dropping at the end of the page".
-        run: "drag_and_drop #wrapwrap > footer",
+        run: "drag_and_drop iframe #wrapwrap > footer",
     };
 }
 
@@ -203,6 +206,7 @@ function goBackToBlocks(position = "bottom") {
 function goToTheme(position = "bottom") {
     return {
         trigger: '.o_we_customize_theme_btn',
+        extra_trigger: '#oe_snippets.o_loaded',
         content: _t("Go to the Theme tab"),
         position: position,
         run: "click",
@@ -211,7 +215,7 @@ function goToTheme(position = "bottom") {
 
 function selectHeader(position = "bottom") {
     return {
-        trigger: `header#top`,
+        trigger: `iframe header#top`,
         content: Markup(_t(`<b>Click</b> on this header to configure it.`)),
         position: position,
         run: "click",
@@ -220,7 +224,7 @@ function selectHeader(position = "bottom") {
 
 function selectSnippetColumn(snippet, index = 0, position = "bottom") {
      return {
-        trigger: `#wrapwrap .${snippet.id} .row div[class*="col-lg-"]:eq(${index})`,
+        trigger: `iframe #wrapwrap .${snippet.id} .row div[class*="col-lg-"]:eq(${index})`,
         content: Markup(_t("<b>Click</b> on this column to access its options.")),
          position: position,
         run: "click",
@@ -236,21 +240,18 @@ function prepend_trigger(steps, prepend_text='') {
     return steps;
 }
 
-function registerThemeHomepageTour(name, steps) {
-    tour.register(name, {
-        url: "/?enable_editor=1",
-        sequence: 1010,
-        saveAs: "homepage",
-    }, prepend_trigger(
-        steps.concat(clickOnSave()),
-        "html[data-view-xmlid='website.homepage'] "
-    ));
+function getClientActionUrl(path, edition) {
+    let url = `/web#action=website.website_preview&path=${encodeURIComponent(path)}`;
+    if (edition) {
+        url += '&enable_editor=1';
+    }
+    return url;
 }
 
-function clickOnExtraMenuItem(stepOptions) {
+function clickOnExtraMenuItem(stepOptions, backend = false) {
     return Object.assign({}, {
         content: "Click on the extra menu dropdown toggle if it is there",
-        trigger: '#top_menu',
+        trigger: `${backend ? "iframe" : ""} #top_menu:not(.o_loading)`,
         run: function () {
             const extraMenuButton = this.$anchor[0].querySelector('.o_extra_menu_items a.nav-link');
             if (extraMenuButton) {
@@ -260,6 +261,59 @@ function clickOnExtraMenuItem(stepOptions) {
     }, stepOptions);
 }
 
+/**
+ * Registers a tour that will go in the website client action.
+ *
+ * @param name {string} The tour's name
+ * @param options {Object} The tour options
+ * @param options.url {string} the page to edit
+ * @param options.edition {boolean} If the tour starts in edit mode
+ * @param steps {[*]} The steps of the tour
+ */
+function registerEditionTour(name, options, steps) {
+    let tourSteps = steps;
+    let url = getClientActionUrl(options.url, !!options.edition);
+    if (options.edition) {
+       tourSteps = [{
+            trigger: '.o_website_preview.editor_enable.editor_has_snippets',
+            timeout: 30000,
+            run: () => {}, // It's a check
+        }].concat(tourSteps);
+    }
+    tour.register(name, Object.assign(options, { url }), tourSteps);
+}
+
+function registerThemeHomepageTour(name, steps) {
+    registerEditionTour(name, {
+        url: '/',
+        edition: true,
+        sequence: 1010,
+        saveAs: "homepage",
+    }, prepend_trigger(
+        steps.concat(clickOnSave()),
+        ".o_website_preview[data-view-xmlid='website.homepage'] "
+    ));
+}
+
+function registerBackendAndFrontend(name, options, steps) {
+    let url;
+    let tourSteps = steps;
+    if (window.location.pathname === '/web') {
+        url = getClientActionUrl(options.url);
+        for (const step of tourSteps) {
+            step.trigger = 'iframe ' + step.trigger;
+            if (step.extra_trigger) {
+                step.extra_trigger = 'iframe ' + step.trigger;
+            }
+        }
+    } else {
+        url = options.url;
+    }
+    tour.register(name, {
+        url
+    }, tourSteps);
+}
+
 return {
     addMedia,
     changeBackground,
@@ -280,7 +334,10 @@ return {
     selectHeader,
     selectNested,
     selectSnippetColumn,
+    getClientActionUrl,
     registerThemeHomepageTour,
     clickOnExtraMenuItem,
+    registerEditionTour,
+    registerBackendAndFrontend,
 };
 });
diff --git a/addons/website/static/src/systray_items/new_content.js b/addons/website/static/src/systray_items/new_content.js
index a983b3e1537..35f47aa739f 100644
--- a/addons/website/static/src/systray_items/new_content.js
+++ b/addons/website/static/src/systray_items/new_content.js
@@ -32,6 +32,7 @@ NewContentElement.props = {
     title: String,
     onClick: Function,
     status: { type: String, optional: true },
+    moduleXmlId: { type: String, optional: true },
     slots: Object,
 };
 NewContentElement.defaultProps = {
@@ -118,20 +119,23 @@ export class NewContentModal extends Component {
         });
 
         this.websiteContext = useState(this.website.context);
-
-        onWillStart(async () => {
-            this.isDesigner = await this.user.hasGroup('website.group_website_designer');
-
-            const xmlIds = this.state.newContentElements.filter(({status}) => status === MODULE_STATUS.NOT_INSTALLED).map(({moduleXmlId}) => moduleXmlId);
-
-            this.modulesInfo = await this.rpc('/website/get_modules_info', {xml_ids: xmlIds});
-        });
-
         useHotkey('escape', () => {
             if (this.websiteContext.showNewContentModal) {
                 this.websiteContext.showNewContentModal = false;
             }
         });
+
+        onWillStart(this.onWillStart.bind(this));
+    }
+
+    async onWillStart() {
+        this.isDesigner = await this.user.hasGroup('website.group_website_designer');
+        this.canInstall = await this.user.isAdmin;
+
+        const xmlIds = this.state.newContentElements.filter(({status}) => status === MODULE_STATUS.NOT_INSTALLED).map(({moduleXmlId}) => moduleXmlId);
+        if (this.canInstall) {
+            this.modulesInfo = await this.rpc('/website/get_modules_info', {xml_ids: xmlIds});
+        }
     }
 
     get sortedNewContentElements() {
diff --git a/addons/website/static/src/systray_items/new_content.xml b/addons/website/static/src/systray_items/new_content.xml
index e879319ab2e..066b563da62 100644
--- a/addons/website/static/src/systray_items/new_content.xml
+++ b/addons/website/static/src/systray_items/new_content.xml
@@ -6,7 +6,8 @@
                 t-on-click="onClick"
                 t-att-class="props.status === MODULE_STATUS.NOT_INSTALLED ? 'o_uninstalled_module' : ''"
                 t-att-title="props.title"
-                t-att-aria-label="props.title">
+                t-att-aria-label="props.title"
+                t-att-data-module-xml-id="props.moduleXmlId">
             <t t-slot="default"/>
         </a>
     </div>
@@ -25,7 +26,10 @@
                 </NewContentElement>
 
                 <t t-foreach="sortedNewContentElements" t-as="element" t-key="element.moduleXmlId" t-if="'isDisplayed' in element ? element.isDisplayed : isSystem ">
-                    <NewContentElement onClick="() => this.onClickNewContent(element)" status="element.status" title="element.title">
+                    <NewContentElement onClick="() => this.onClickNewContent(element)"
+                        status="element.status"
+                        title="element.title"
+                        moduleXmlId="element.moduleXmlId">
                         <t t-call="{{ element.icon }}"/>
                         <p><t t-esc="element.title"/></p>
                     </NewContentElement>
diff --git a/addons/website/static/tests/tours/automatic_editor.js b/addons/website/static/tests/tours/automatic_editor.js
index 7c7c7d125d6..eaa97054348 100644
--- a/addons/website/static/tests/tours/automatic_editor.js
+++ b/addons/website/static/tests/tours/automatic_editor.js
@@ -1,20 +1,20 @@
 odoo.define('website.tour.automatic_editor', function (require) {
 'use strict';
 
-const tour = require('web_tour.tour');
+const wTourUtils = require("website.tour_utils");
 
-tour.register('automatic_editor_on_new_website', {
+wTourUtils.registerEditionTour('automatic_editor_on_new_website', {
     test: true,
     url: '/',
 },
 [
     {
         content: "Select the language dropdown",
-        trigger: '.js_language_selector .dropdown-toggle'
+        trigger: 'iframe .js_language_selector .dropdown-toggle'
     },
     {
         content: "click on Add a language",
-        trigger: 'a.o_add_language',
+        trigger: 'iframe a.o_add_language',
     },
     {
         content: "type Parseltongue",
@@ -43,15 +43,15 @@ tour.register('automatic_editor_on_new_website', {
     },
     {
         content: "Select the language dropdown",
-        trigger: '.js_language_selector .dropdown-toggle',
+        trigger: 'iframe .js_language_selector .dropdown-toggle',
     },
     {
         content: "Select parseltongue",
-        trigger: 'a.js_change_lang[data-url_code=pa_GB]',
+        trigger: 'iframe a.js_change_lang[data-url_code=pa_GB]',
     },
     {
         content: "Check that we're on parseltongue and then go to settings",
-        trigger: 'html[lang=pa-GB]',
+        trigger: 'iframe html[lang=pa-GB]',
         run: () => {
             // Now go through the settings for a new website. A frontend_lang
             // cookie was set during previous steps. It should not be used when
@@ -91,7 +91,7 @@ tour.register('automatic_editor_on_new_website', {
     },
     {
         content: "Check that the editor is loaded",
-        trigger: 'body.editor_enable',
+        trigger: 'iframe body.editor_enable',
         timeout: 30000,
         run: () => null, // it's a check
     },
@@ -101,7 +101,7 @@ tour.register('automatic_editor_on_new_website', {
     },
     {
         content: "wait for editor to close",
-        trigger: 'body:not(.editor_enable)',
+        trigger: 'iframe body:not(.editor_enable)',
         run: () => null, // It's a check
     }
 ]);
diff --git a/addons/website/static/tests/tours/carousel_content_removal.js b/addons/website/static/tests/tours/carousel_content_removal.js
index 2b90fff3ca7..51c456786e9 100644
--- a/addons/website/static/tests/tours/carousel_content_removal.js
+++ b/addons/website/static/tests/tours/carousel_content_removal.js
@@ -1,28 +1,25 @@
 /** @odoo-module */
 
-import tour from 'web_tour.tour';
+import wTourUtils from 'website.tour_utils';
 
-tour.register("carousel_content_removal", {
+wTourUtils.registerEditionTour("carousel_content_removal", {
     test: true,
-    url: "/",
+    url: '/',
+    edition: true,
 }, [{
-    trigger: "a[data-action=edit]",
-    content: "Click the Edit button.",
-    extra_trigger: ".homepage",
-}, {
     trigger: "#snippet_structure .oe_snippet:has(span:contains('Carousel')) .oe_snippet_thumbnail",
     content: "Drag the Carousel block and drop it in your page.",
-    run: "drag_and_drop #wrap",
+    run: "drag_and_drop iframe #wrap",
 },
 {
-    trigger: ".carousel .carousel-item.active .carousel-content",
+    trigger: "iframe .carousel .carousel-item.active .carousel-content",
     content: "Select the active carousel item.",
 }, {
     trigger: ".oe_overlay.oe_active .oe_snippet_remove",
     content: "Remove the active carousel item.",
 },
 {
-    trigger: ".carousel .carousel-item.active .container:not(:has(*))",
+    trigger: "iframe .carousel .carousel-item.active .container:not(:has(*))",
     content: "Check for a carousel slide with an empty container tag",
     run: function () {},
 }]);
diff --git a/addons/website/static/tests/tours/conditional_visibility.js b/addons/website/static/tests/tours/conditional_visibility.js
index 1487df68827..8ffdda72db9 100644
--- a/addons/website/static/tests/tours/conditional_visibility.js
+++ b/addons/website/static/tests/tours/conditional_visibility.js
@@ -1,6 +1,5 @@
 /** @odoo-module */
 
-import tour from 'web_tour.tour';
 import wTourUtils from 'website.tour_utils';
 
 const snippets = [
@@ -9,14 +8,11 @@ const snippets = [
         name: 'Text - Image',
     },
 ];
-tour.register('conditional_visibility_1', {
-    test: true,
+wTourUtils.registerEditionTour('conditional_visibility_1', {
+    edition: true,
     url: '/',
-},
-[{
-    content: "enter edit mode",
-    trigger: 'a[data-action=edit]',
-},
+    test: true,
+}, [
 wTourUtils.dragNDrop(snippets[0]),
 wTourUtils.clickOnSnippet(snippets[0]),
 wTourUtils.changeOption('ConditionalVisibility', 'we-toggler'),
@@ -38,7 +34,8 @@ wTourUtils.changeOption('ConditionalVisibility', 'we-toggler'),
 ...wTourUtils.clickOnSave(),
 {
     content: 'Check if the rule was applied',
-    trigger: 'body:not(.editor_enable) #wrap',
+    extra_trigger: '.o_website_preview:only-child',
+    trigger: 'iframe #wrap',
     run: function (actions) {
         const style = window.getComputedStyle(this.$anchor[0].getElementsByClassName('s_text_image')[0]);
         if (style.display !== 'none') {
@@ -49,7 +46,8 @@ wTourUtils.changeOption('ConditionalVisibility', 'we-toggler'),
 wTourUtils.clickOnEdit(),
 {
     content: 'Check if the element is visible as it should always be visible in edit view',
-    trigger: 'body.editor_enable #wrap .s_text_image',
+    extra_trigger: 'body.editor_has_snippets',
+    trigger: 'iframe #wrap .s_text_image',
     run: function (actions) {
         const style = window.getComputedStyle((this.$anchor[0]));
         if (style.display === 'none') {
@@ -58,19 +56,3 @@ wTourUtils.clickOnEdit(),
     },
 },
 ]);
-
-tour.register('conditional_visibility_2', {
-    test: true,
-    url: '/?utm_medium=Email',
-},
-[{
-    content: 'The content previously hidden should now be visible',
-    trigger: 'body #wrap',
-    run: function (actions) {
-        const style = window.getComputedStyle(this.$anchor[0].getElementsByClassName('s_text_image')[0]);
-        if (style.display === 'none') {
-            console.error('error This item should now be visible because utm_medium === email');
-        }
-    },
-},
-]);
diff --git a/addons/website/static/tests/tours/conditional_visibility_frontend.js b/addons/website/static/tests/tours/conditional_visibility_frontend.js
new file mode 100644
index 00000000000..35d5b5bbc70
--- /dev/null
+++ b/addons/website/static/tests/tours/conditional_visibility_frontend.js
@@ -0,0 +1,19 @@
+/** @odoo-module **/
+
+import tour from 'web_tour.tour';
+
+tour.register('conditional_visibility_2', {
+    test: true,
+    url: '/?utm_medium=Email',
+},
+[{
+    content: 'The content previously hidden should now be visible',
+    trigger: 'body #wrap',
+    run: function (actions) {
+        const style = window.getComputedStyle(this.$anchor[0].getElementsByClassName('s_text_image')[0]);
+        if (style.display === 'none') {
+            console.error('error This item should now be visible because utm_medium === email');
+        }
+    },
+},
+]);
diff --git a/addons/website/static/tests/tours/configurator_translation.js b/addons/website/static/tests/tours/configurator_translation.js
index a3062dc32b5..fed6641fc73 100644
--- a/addons/website/static/tests/tours/configurator_translation.js
+++ b/addons/website/static/tests/tours/configurator_translation.js
@@ -22,8 +22,7 @@ tour.register('configurator_translation', {
         run: 'text ab',
     }, {
         content: "select a website industry from the autocomplete",
-        trigger: '.o_configurator_industry ul li a:contains(in fr)',
-        extra_trigger: 'html[lang*=fr]',
+        trigger: '.o_configurator_industry_wrapper ul li a:contains("in fr")',
     }, {
         content: "select an objective",
         trigger: '.o_configurator_purpose_dd a',
@@ -49,7 +48,7 @@ tour.register('configurator_translation', {
         run: function () {}, // it's a check
     }, {
         content: "Wait untill the configurator is finished",
-        trigger: 'body.editor_started',
+        trigger: '#oe_snippets.o_loaded',
         timeout: 30000,
     }, {
         // Check the content of the save button to make sure the website is in
@@ -65,7 +64,7 @@ tour.register('configurator_translation', {
         trigger: '.o_we_website_top_actions button.btn-primary:contains("Sauvegarder"), .o_we_website_top_actions button.btn-primary:contains("Sauver")',
     }, {
          content: "wait for editor to be closed",
-         trigger: 'body:not(.editor_enable)',
+         trigger: 'iframe body:not(.editor_enable)',
          run: function () {}, // It's a check.
     }
 ]);
diff --git a/addons/website/static/tests/tours/default_shape_gets_palette_colors.js b/addons/website/static/tests/tours/default_shape_gets_palette_colors.js
index 27218e3e90d..f366eb7a6c9 100644
--- a/addons/website/static/tests/tours/default_shape_gets_palette_colors.js
+++ b/addons/website/static/tests/tours/default_shape_gets_palette_colors.js
@@ -6,7 +6,7 @@ const wTourUtils = require('website.tour_utils');
 
 tour.register("default_shape_gets_palette_colors", {
     test: true,
-    url: "/?enable_editor=1",
+    url: wTourUtils.getClientActionUrl('/', true),
 }, [
     wTourUtils.dragNDrop({
         id: 's_text_image',
@@ -19,9 +19,9 @@ tour.register("default_shape_gets_palette_colors", {
     wTourUtils.changeOption('ColoredLevelBackground', 'Shape'),
     {
         content: "Check that shape does not have a background-image in its inline style",
-        trigger: '#wrap .s_text_image .o_we_shape',
+        trigger: 'iframe #wrap .s_text_image .o_we_shape',
         run: () => {
-            const shape = $('#wrap .s_text_image .o_we_shape')[0];
+            const shape = $('iframe:not(.o_ignore_in_tour)').contents().find('#wrap .s_text_image .o_we_shape')[0];
             if (shape.style.backgroundImage) {
                 console.error("error The default shape has a background-image in its inline style (should rely on the class)");
             }
diff --git a/addons/website/static/tests/tours/edit_link_popover.js b/addons/website/static/tests/tours/edit_link_popover.js
index d94bb55f179..93c34ee8c12 100644
--- a/addons/website/static/tests/tours/edit_link_popover.js
+++ b/addons/website/static/tests/tours/edit_link_popover.js
@@ -4,11 +4,11 @@ odoo.define("website.tour.edit_link_popover", function (require) {
 const tour = require('web_tour.tour');
 const wTourUtils = require('website.tour_utils');
 
-const FIRST_PARAGRAPH = '#wrap .s_text_image p:nth-child(2)';
+const FIRST_PARAGRAPH = 'iframe #wrap .s_text_image p:nth-child(2)';
 
 const clickFooter = [{
     content: "Save the link by clicking outside the URL input (not on a link element)",
-    trigger: 'footer h5:first',
+    trigger: 'iframe footer h5:first',
 }, {
     content: "Wait delayed click on footer",
     trigger: '.o_we_customize_panel we-title:contains("Footer")',
@@ -18,11 +18,6 @@ const clickFooter = [{
 const clickEditLink = [{
     content: "Click on Edit Link in Popover",
     trigger: '.o_edit_menu_popover .o_we_edit_link',
-    // FIXME this run shouldnt be needed but click not working as real click
-    run: (actions) => {
-        actions.click();
-        $('.o_edit_menu_popover').popover('hide');
-    },
 }, {
     content: "Ensure popover is closed",
     trigger: 'html:not(:has(.o_edit_menu_popover))', // popover should be closed
@@ -32,7 +27,7 @@ const clickEditLink = [{
 
 tour.register('edit_link_popover', {
     test: true,
-    url: '/?enable_editor=1',
+    url: wTourUtils.getClientActionUrl('/', true),
 }, [
     // 1. Test links in page content (web_editor)
     wTourUtils.dragNDrop({
@@ -73,11 +68,6 @@ tour.register('edit_link_popover', {
     {
         content: "Click on link",
         trigger: `${FIRST_PARAGRAPH} a`,
-        // FIXME this run shouldnt be needed but click not working as real click
-        run: function (actions) {
-            actions.click();
-            this.$anchor.popover('show');
-        },
     },
     {
         content: "Popover should be shown with updated preview data",
@@ -91,11 +81,7 @@ tour.register('edit_link_popover', {
     {
         content: "Link should be removed",
         trigger: `${FIRST_PARAGRAPH}:not(:has(a))`,
-        // run: function () {}, // it's a check
-        // FIXME this run shouldnt be needed but click not working as real click
-        run: (actions) => {
-            $('.o_edit_menu_popover').popover('hide');
-        },
+        run: function () {}, // it's a check
     },
     {
         content: "Ensure popover is closed",
@@ -105,7 +91,7 @@ tour.register('edit_link_popover', {
     // 2. Test links in navbar (website)
     {
         content: "Click navbar menu Home",
-        trigger: '#top_menu a:contains("Home")',
+        trigger: 'iframe #top_menu a:contains("Home")',
     },
     {
         content: "Popover should be shown (2)",
@@ -115,22 +101,17 @@ tour.register('edit_link_popover', {
     ...clickEditLink,
     {
         content: "Change the URL",
-        trigger: '#o_link_dialog_url_input',
+        trigger: '#url_input',
         run: "text /contactus"
     },
     {
-        content: "Save the Link Dialog modal",
+        content: "Save the Edit Menu modal",
         trigger: '.modal-footer .btn-primary',
     },
     {
         content: "Click on the Home menu again",
-        extra_trigger: '#top_menu a:contains("Home")[href="/contactus"]', // href should be changed
-        trigger: '#top_menu a:contains("Home")',
-        // FIXME this run shouldnt be needed but click not working as real click
-        run: function (actions) {
-            actions.click();
-            this.$anchor.popover('show');
-        },
+        extra_trigger: 'div:not(.o_loading_dummy) > #oe_snippets',
+        trigger: 'iframe #top_menu a:contains("Home")[href="/contactus"]',
     },
     {
         content: "Popover should be shown with updated preview data (2)",
@@ -143,7 +124,7 @@ tour.register('edit_link_popover', {
     },
     {
         content: "Edit Menu (tree) should open",
-        trigger: '.js_add_menu',
+        trigger: '.o_website_dialog .oe_menu_editor',
         run: function () {}, // it's a check
     },
     {
@@ -153,7 +134,7 @@ tour.register('edit_link_popover', {
     // 3. Test other links (CTA in navbar & links in footer)
     {
         content: "Click CTA in navbar",
-        trigger: '#top_menu_container a.btn-primary[href="/contactus"]',
+        trigger: 'iframe #top_menu_container a.btn-primary[href="/contactus"]',
     },
     {
         content: "Popover should be shown (3)",
@@ -167,7 +148,7 @@ tour.register('edit_link_popover', {
     },
     {
         content: "Click 'Home' link in footer",
-        trigger: 'footer a[href="/"]',
+        trigger: 'iframe footer a[href="/"]',
     },
     {
         content: "Popover should be shown (4)",
@@ -181,19 +162,11 @@ tour.register('edit_link_popover', {
     },
     // 4. Popover should close when clicking non-link element
     ...clickFooter,
-    // FIXME this step shouldnt be needed but click not working as real click
-    {
-        content: "REMOVEME",
-        trigger: 'html', // Do not block if popover already hidden
-        run: (actions) => {
-            $('.o_edit_menu_popover').popover('hide');
-        },
-    },
     // 5. Double click should not open popover but should open toolbar link
     {
         content: "Double click on link",
         extra_trigger: 'html:not(:has(.o_edit_menu_popover))', // popover should be closed
-        trigger: 'footer a[href="/"]',
+        trigger: 'iframe footer a[href="/"]',
         run: function (actions) {
             // Create range to simulate real double click, see pull request
             const range = document.createRange();
@@ -203,8 +176,6 @@ tour.register('edit_link_popover', {
             sel.addRange(range);
             actions.click();
             actions.dblclick();
-            // FIXME this step shouldnt be needed but click not working as real click
-            this.$anchor.popover('show');
         },
     },
     {
diff --git a/addons/website/static/tests/tours/edit_megamenu.js b/addons/website/static/tests/tours/edit_megamenu.js
index 7a08fe73542..f55bcd731e3 100644
--- a/addons/website/static/tests/tours/edit_megamenu.js
+++ b/addons/website/static/tests/tours/edit_megamenu.js
@@ -1,29 +1,30 @@
 odoo.define("website.tour.edit_megamenu", function (require) {
 "use strict";
 
-const tour = require('web_tour.tour');
 const wTourUtils = require('website.tour_utils');
 
 const toggleMegaMenu = (stepOptions) => Object.assign({}, {
     content: "Toggles the mega menu.",
-    trigger: '#top_menu .nav-item a.o_mega_menu_toggle',
+    trigger: 'iframe #top_menu .nav-item a.o_mega_menu_toggle',
     run: function () {
         // If the mega menu is displayed inside the extra menu items, it should
         // already be displayed.
         if (!this.$anchor[0].closest('.o_extra_menu_items')) {
-            this.$anchor.click();
+            this.$anchor[0].click();
         }
     },
 }, stepOptions);
 
-tour.register('edit_megamenu', {
+wTourUtils.registerEditionTour('edit_megamenu', {
     test: true,
-    url: '/?enable_editor=1',
+    url: '/',
+    edition: true,
 }, [
     // Add a megamenu item to the top menu.
     {
         content: "Click on a menu item",
-        trigger: '#top_menu .nav-item a',
+        extra_trigger: '#oe_snippets.o_loaded',
+        trigger: 'iframe #top_menu .nav-item a',
     },
     {
         content: "Click on 'Link' to open Link Dialog",
@@ -31,51 +32,49 @@ tour.register('edit_megamenu', {
     },
     {
         content: "Trigger the link dialog (click 'Add Mega Menu Item')",
-        extra_trigger: '.o_web_editor_dialog:visible',
-        trigger: '.modal-body a.js_add_menu[data-type="mega"]',
+        extra_trigger: '.o_website_dialog:visible',
+        trigger: '.modal-body a:eq(1)',
     },
     {
         content: "Write a label for the new menu item",
-        extra_trigger: '.o_link_dialog',
-        trigger: '.o_link_dialog #o_link_dialog_label_input',
+        trigger: '.modal-dialog .o_website_dialog input',
         run: 'text Megaaaaa!'
     },
     {
         content: "Save the new menu item",
-        trigger: '.modal-dialog .btn-primary span:contains("Save")',
+        trigger: '.o_website_dialog .btn-primary',
         run: 'click',
     },
     {
         content: "Save the changes to the menu",
-        trigger: '.modal-dialog .btn-primary span:contains("Save")',
+        trigger: '.modal-footer .btn-primary',
         run: 'click',
     },
     // Edit a menu item
-    wTourUtils.clickOnEdit(),
-    wTourUtils.clickOnExtraMenuItem({extra_trigger: '#oe_snippets.o_loaded'}),
-    toggleMegaMenu({extra_trigger: '#top_menu .nav-item a.o_mega_menu_toggle:contains("Megaaaaa!")'}),
+    wTourUtils.clickOnExtraMenuItem({extra_trigger: '#oe_snippets.o_loaded'}, true),
+    toggleMegaMenu({extra_trigger: 'iframe #top_menu .nav-item a.o_mega_menu_toggle:contains("Megaaaaa!")'}),
     {
         content: "Clicks on the first title item.",
-        trigger: '.o_mega_menu h4',
+        trigger: 'iframe .o_mega_menu h4',
     },
     {
         content: "Press enter.",
-        trigger: '.o_mega_menu h4',
+        trigger: 'iframe .o_mega_menu h4',
         run: function (actions) {
             this.$anchor[0].dispatchEvent(new window.InputEvent('input', {bubbles: true, inputType: 'insertParagraph'}));
         },
     },
     {
         content: "The menu should still be visible. Edit a menu item.",
-        trigger: '.o_mega_menu h4',
+        trigger: 'iframe .o_mega_menu h4',
         run: 'text New Menu Item',
     },
     ...wTourUtils.clickOnSave(),
-    wTourUtils.clickOnExtraMenuItem({extra_trigger: 'a[data-action=edit]'}),
+    wTourUtils.clickOnExtraMenuItem({extra_trigger: 'iframe body:not(.editor_enable)'}, true),
     toggleMegaMenu(),
     {
         content: "The menu item should have been renamed.",
-        trigger: '.o_mega_menu h4:contains("New Menu Item")',
+        trigger: 'iframe .o_mega_menu h4:contains("New Menu Item")',
         run: function () {}, // it's a check
     },
 ]);
diff --git a/addons/website/static/tests/tours/edit_menus.js b/addons/website/static/tests/tours/edit_menus.js
index 88ae1ef6956..59273b4d3af 100644
--- a/addons/website/static/tests/tours/edit_menus.js
+++ b/addons/website/static/tests/tours/edit_menus.js
@@ -1,53 +1,49 @@
 /** @odoo-module */
 
 import wTourUtils from 'website.tour_utils';
-import tour from 'web_tour.tour';
 
 const clickOnSave = {
    content: "Clicks on the menu edition dialog save button",
-   trigger: '.modal-dialog .btn-primary span:contains("Save")',
+   trigger: '.modal-dialog .btn-primary:contains("Ok"), .modal-dialog .btn-primary:contains("Save")',
 };
 
-tour.register('edit_menus', {
+wTourUtils.registerEditionTour('edit_menus', {
     test: true,
     url: '/',
 }, [
     // Add a megamenu item from the menu.
     {
-        content: "Open Pages menu",
-        trigger: '.o_menu_sections a:contains("Pages")',
+        content: "open site menu",
+        extra_trigger: "iframe #wrapwrap",
+        trigger: 'button[data-menu-xmlid="website.menu_site"]',
     },
     {
         content: "Click on Edit Menu",
-        trigger: 'a.dropdown-item:contains("Edit Menu")',
+        trigger: 'a[data-menu-xmlid="website.menu_edit_menu"]',
     },
     {
         content: "Trigger the link dialog (click 'Add Mega Menu Item')",
-        extra_trigger: '.o_web_editor_dialog:visible',
-        trigger: '.modal-body a.js_add_menu[data-type="mega"]',
+        extra_trigger: '.o_website_dialog:visible',
+        trigger: '.modal-body a:eq(1)',
     },
     {
         content: "Write a label for the new menu item",
-        extra_trigger: '.o_link_dialog',
-        trigger: '.o_link_dialog #o_link_dialog_label_input',
+        trigger: '.modal-dialog .o_website_dialog input',
         run: 'text Megaaaaa!'
     },
     clickOnSave,
-    {
-        content: "Click save and wait for the page to be reloaded",
-        trigger: '.modal-dialog .btn-primary span:contains("Save")',
-    },
-    wTourUtils.clickOnExtraMenuItem({extra_trigger: 'body:not(:has(.oe_menu_editor))'}),
+    Object.assign({}, clickOnSave, {extra_trigger: '.o_dialog_container:not(:has(.o_inactive_modal))'}),
+    wTourUtils.clickOnExtraMenuItem({extra_trigger: 'body:not(:has(.oe_menu_editor))'}, true),
     {
         content: "There should be a new megamenu item.",
-        trigger: '#top_menu .nav-item a.o_mega_menu_toggle:contains("Megaaaaa!")',
+        trigger: 'iframe #top_menu .nav-item a.o_mega_menu_toggle:contains("Megaaaaa!")',
         run: () => {}, // It's a check.
     },
     // Add a menu item in edit mode.
     wTourUtils.clickOnEdit(),
     {
         content: "Click on a menu item",
-        trigger: '#top_menu .nav-item a',
+        trigger: 'iframe #top_menu .nav-item a',
         extra_trigger: '#oe_snippets.o_loaded',
     },
     {
@@ -56,31 +52,29 @@ tour.register('edit_menus', {
     },
     {
         content: "Trigger the link dialog (click 'Add Menu Item')",
-        extra_trigger: '.o_web_editor_dialog:visible',
-        trigger: '.modal-body a.js_add_menu',
+        extra_trigger: '.o_website_dialog:visible',
+        trigger: '.modal-body a:eq(0)',
     },
     clickOnSave,
     {
         content: "It didn't save without a label. Fill label input.",
-        extra_trigger: '.o_link_dialog',
-        trigger: '.o_link_dialog #o_link_dialog_label_input',
+        extra_trigger: '.o_website_dialog:eq(1):visible',
+        trigger: '.modal-dialog .o_website_dialog input:eq(0)',
         run: 'text Random!',
     },
     clickOnSave,
     {
         content: "It didn't save without a url. Fill url input.",
-        extra_trigger: '.o_link_dialog',
-        trigger: '.o_link_dialog #o_link_dialog_url_input',
+        trigger: '.modal-dialog .o_website_dialog input:eq(1)',
         run: 'text #',
     },
     clickOnSave,
-    clickOnSave,
-    wTourUtils.clickOnEdit(),
+    Object.assign({}, clickOnSave, {extra_trigger: '.o_dialog_container:not(:has(.o_inactive_modal))'}),
     // Edit the new menu item from the "edit link" popover button
-    wTourUtils.clickOnExtraMenuItem({extra_trigger: '#oe_snippets.o_loaded'}),
+    wTourUtils.clickOnExtraMenuItem({extra_trigger: '#oe_snippets.o_loaded'}, true),
     {
         content: "Menu should have a new link item",
-        trigger: '#top_menu .nav-item a:contains("Random!")',
+        trigger: 'iframe #top_menu .nav-item a:contains("Random!")',
     },
     {
         content: "Click on Edit Link",
@@ -88,17 +82,24 @@ tour.register('edit_menus', {
     },
     {
         content: "Change the label",
-        trigger: '.o_link_dialog #o_link_dialog_label_input',
+        trigger: '.modal-dialog .o_website_dialog input:eq(0)',
         run: 'text Modnar',
     },
     clickOnSave,
     ...wTourUtils.clickOnSave(),
-    // Edit the menu item from the "edit menu" popover button
-    wTourUtils.clickOnEdit(),
-    wTourUtils.clickOnExtraMenuItem({extra_trigger: '#oe_snippets.o_loaded'}),
+    wTourUtils.clickOnExtraMenuItem({extra_trigger: 'iframe body:not(.editor_enable)'}, true),
     {
         content: "Label should have changed",
-        trigger: '#top_menu .nav-item a:contains("Modnar")',
+        extra_trigger: "iframe body:not(.editor_enable)",
+        trigger: 'iframe #top_menu .nav-item a:contains("Modnar")',
+        run: () => {}, // it's a check
+    },
+    // Edit the menu item from the "edit menu" popover button
+    wTourUtils.clickOnEdit(),
+    {
+        content: "Click on the 'Modnar' link",
+        extra_trigger: "#oe_snippets.o_loaded",
+        trigger: 'iframe #top_menu .nav-item a:contains("Modnar")',
     },
     {
         content: "Click on the popover Edit Menu button",
@@ -114,25 +115,26 @@ tour.register('edit_menus', {
     },
     {
         content: "Change the label",
-        trigger: '.o_link_dialog #o_link_dialog_label_input',
+        trigger: '.modal-dialog .o_website_dialog input:eq(0)',
         run: 'text Modnar !!',
     },
     clickOnSave,
-    clickOnSave,
-    wTourUtils.clickOnExtraMenuItem({extra_trigger: 'a[data-action=edit]'}),
+    Object.assign({}, clickOnSave, {extra_trigger: '.o_dialog_container:not(:has(.o_inactive_modal))'}),
+    ...wTourUtils.clickOnSave(),
+    wTourUtils.clickOnExtraMenuItem({extra_trigger: 'iframe body:not(.editor_enable)'}, true),
     {
         content: "Label should have changed",
-        trigger: '#top_menu .nav-item a:contains("Modnar !!")',
+        trigger: 'iframe #top_menu .nav-item a:contains("Modnar !!")',
         run: () => {}, // It's a check.
     },
     // Nest menu item from the menu.
     {
-        content: "Open Pages menu",
-        trigger: '.o_menu_sections a:contains("Pages")',
+        content: "open site menu",
+        trigger: 'button[data-menu-xmlid="website.menu_site"]',
     },
     {
         content: "Click on Edit Menu",
-        trigger: 'a.dropdown-item:contains("Edit Menu")',
+        trigger: 'a[data-menu-xmlid="website.menu_edit_menu"]',
     },
     {
         content: "Drag item into parent",
@@ -148,11 +150,11 @@ tour.register('edit_menus', {
     clickOnSave,
     {
         content: "Menu item should have a child",
-        trigger: '#top_menu .nav-item a.dropdown-toggle:contains("Home")',
+        trigger: 'iframe #top_menu .nav-item a.dropdown-toggle:contains("Home")',
     },
     {
         content: "When menu item is opened, child item must appear in the shown menu",
-        trigger: '#top_menu .nav-item:contains("Home") ul.show li a.dropdown-item:contains("Contact us")[href="/contactus"]',
+        trigger: 'iframe #top_menu .nav-item:contains("Home") ul.show li a.dropdown-item:contains("Contact us")[href="/contactus"]',
         run: () => {}, // It's a check.
     },
 ]);
diff --git a/addons/website/static/tests/tours/edit_translated_page.js b/addons/website/static/tests/tours/edit_translated_page.js
index a974d6cc9b1..654ead2210f 100644
--- a/addons/website/static/tests/tours/edit_translated_page.js
+++ b/addons/website/static/tests/tours/edit_translated_page.js
@@ -7,8 +7,13 @@ tour.register('edit_translated_page_redirect', {
     url: '/nl/contactus',
 }, [
     {
-        content: 'click edit master',
-        trigger: 'a[data-action="edit_master"]',
+        content: "Enter backend",
+        trigger: 'a.o_frontend_to_backend_edit_btn',
+    },
+    {
+        content: "Enter edit mode",
+        extra_trigger: 'iframe main:has([data-for="contactus_form"])',
+        trigger: '.o_edit_website_container > a',
     },
     {
         content: 'check editor dashboard',
@@ -21,8 +26,13 @@ tour.register('edit_translated_page_redirect', {
         },
     },
     {
-        content: 'click edit master',
-        trigger: 'a[data-action="edit_master"]',
+        content: "Enter backend",
+        trigger: 'a.o_frontend_to_backend_edit_btn',
+    },
+    {
+        content: "Enter edit mode",
+        extra_trigger: 'iframe #wrapwrap',
+        trigger: '.o_edit_website_container > a',
     },
     {
         content: 'check editor dashboard',
diff --git a/addons/website/static/tests/tours/focus_blur_snippets.js b/addons/website/static/tests/tours/focus_blur_snippets.js
index d5c05af1957..0ad72a498bb 100644
--- a/addons/website/static/tests/tours/focus_blur_snippets.js
+++ b/addons/website/static/tests/tours/focus_blur_snippets.js
@@ -6,17 +6,17 @@ const tour = require('web_tour.tour');
 
 const blockIDToData = {
     parent: {
-        selector: '.s_focusblur',
+        selector: 'iframe .s_focusblur',
         name: 'section',
         overlayIndex: 2,
     },
     child1: {
-        selector: '.s_focusblur_child1',
+        selector: 'iframe .s_focusblur_child1',
         name: 'first child',
         overlayIndex: 1,
     },
     child2: {
-        selector: '.s_focusblur_child2',
+        selector: 'iframe .s_focusblur_child2',
         name: 'second child',
         overlayIndex: 0,
     },
@@ -27,7 +27,7 @@ function clickAndCheck(blockID, expected) {
 
     return [{
         content: blockID ? `Enable the ${blockData.name}` : 'Disable all blocks',
-        trigger: blockData.selector || '#wrapwrap',
+        trigger: blockData.selector || 'iframe #wrapwrap',
     }, {
         content: 'Once the related overlays are enabled/disabled, check that the focus/blur calls have been correct.',
         trigger: blockID
@@ -55,18 +55,18 @@ tour.register('focus_blur_snippets', {
 }, [
     {
         content: 'First load our custom JS options',
-        trigger: 'body',
+        trigger: '#oe_snippets.o_loaded',
         run: function () {
             ajax.loadJS('/website/static/tests/tour_utils/focus_blur_snippets_options.js').then(function () {
-                $('body').addClass('focus_blur_snippets_options_loaded');
+                $('iframe:not(.o_ignore_in_tour)').contents().find('body').addClass('focus_blur_snippets_options_loaded');
             });
         },
     },
     {
         content: 'Drag the custom block into the page',
         trigger: '#snippet_structure .oe_snippet:has(.oe_snippet_body.s_focusblur) .oe_snippet_thumbnail',
-        extra_trigger: 'body.focus_blur_snippets_options_loaded',
-        run: 'drag_and_drop #wrap',
+        extra_trigger: 'iframe body.focus_blur_snippets_options_loaded',
+        run: 'drag_and_drop iframe #wrap',
     },
     ...clickAndCheck('parent', ['focus parent']),
     ...clickAndCheck(null, ['blur parent']),
diff --git a/addons/website/static/tests/tours/html_editor.js b/addons/website/static/tests/tours/html_editor.js
index e0e08c61456..0860c7b21dc 100644
--- a/addons/website/static/tests/tours/html_editor.js
+++ b/addons/website/static/tests/tours/html_editor.js
@@ -2,41 +2,33 @@
 odoo.define('website.test.html_editor', function (require) {
 'use strict';
 
-var tour = require('web_tour.tour');
+const wTourUtils = require('website.tour_utils');
 
 const adminCssModif = '#wrap {display: none;}';
 const demoCssModif = '// demo_edition';
 
-tour.register('html_editor_multiple_templates', {
-    test: true,
+wTourUtils.registerEditionTour('html_editor_multiple_templates', {
     url: '/generic',
+    edition: true,
+    test: true,
 },
     [
-        // 1. Edit the page through Edit Mode, it will COW the view
-        {
-            content: "enter edit mode",
-            trigger: 'a[data-action=edit]',
-        },
         {
             content: "drop a snippet",
-            trigger: '#oe_snippets .oe_snippet:has(.s_cover) .oe_snippet_thumbnail',
+            trigger: '#oe_snippets.o_loaded .oe_snippet:has(.s_cover) .oe_snippet_thumbnail',
             // id starting by 'oe_structure..' will actually create an inherited view
-            run: "drag_and_drop #oe_structure_test_ui",
-        },
-        {
-            content: "save the page",
-            extra_trigger: '#oe_structure_test_ui.o_dirty',
-            trigger: "button[data-action=save]",
+            run: "drag_and_drop iframe #oe_structure_test_ui",
         },
+        ...wTourUtils.clickOnSave(),
         // 2. Edit generic view
         {
-            content: "open customize menu",
-            extra_trigger: "body:not(.editor_enable)",
-            trigger: '#customize-menu > a',
+            content: "open site menu",
+            extra_trigger: "iframe body:not(.editor_enable)",
+            trigger: 'button[data-menu-xmlid="website.menu_site"]',
         },
         {
             content: "open html editor",
-            trigger: '#html_editor',
+            trigger: 'a[data-menu-xmlid="website.menu_ace_editor"]',
         },
         {
             content: "add something in the generic view",
@@ -69,27 +61,27 @@ tour.register('html_editor_multiple_templates', {
         },
         {
            content: "check that the page has both modification",
-           extra_trigger: '#wrapwrap:contains("anothernewcontent")',
-           trigger: '#wrapwrap:contains("somenewcontent")',
+           extra_trigger: 'iframe #wrapwrap:contains("anothernewcontent")',
+           trigger: 'iframe #wrapwrap:contains("somenewcontent")',
            run: function () {}, // it's a check
        },
     ]
 );
 
-tour.register('test_html_editor_scss', {
-    test: true,
+wTourUtils.registerEditionTour('test_html_editor_scss', {
     url: '/contactus',
+    test: true,
 },
     [
         // 1. Open Html Editor and select a scss file
         {
-            content: "open customize menu",
-            extra_trigger: '#wrap:visible', // ensure state for later
-            trigger: '#customize-menu > a',
+            content: "open site menu",
+            extra_trigger: 'iframe #wrap:visible', // ensure state for later
+            trigger: 'button[data-menu-xmlid="website.menu_site"]',
         },
         {
             content: "open html editor",
-            trigger: '#html_editor',
+            trigger: 'a[data-menu-xmlid="website.menu_ace_editor"]',
         },
         {
             content: "open type switcher",
@@ -122,13 +114,13 @@ tour.register('test_html_editor_scss', {
         },
          {
             content: "check that the scss modification got applied",
-            trigger: 'body:has(#wrap:hidden)',
+            trigger: 'iframe body:has(#wrap:hidden)',
             run: function () {}, // it's a check
             timeout: 30000, // SCSS compilation might take some time
         },
         {
             content: "reset view (after reload, html editor should have been reopened where it was)",
-            trigger: '#ace-view-id button[data-action="reset"]',
+            trigger: '#ace-view-id button[data-action="reset"]:not([disabled])',
         },
         {
             content: "confirm reset warning",
@@ -136,7 +128,7 @@ tour.register('test_html_editor_scss', {
         },
         {
             content: "check that the scss file was reset correctly, wrap content should now be visible again",
-            trigger: '#wrap:visible',
+            trigger: 'iframe #wrap:visible',
             run: function () {}, // it's a check
             timeout: 30000, // SCSS compilation might take some time
         },
@@ -156,34 +148,28 @@ tour.register('test_html_editor_scss', {
         },
         {
             content: "check that the scss modification got applied",
-            trigger: 'body:has(#wrap:hidden)',
-            run: function () {
-                window.location.href = '/web/session/logout?redirect=/web/login';
-            },
-            timeout: 30000, // SCSS compilation might take some time
+            trigger: 'iframe body:has(#wrap:hidden)',
+            run: function () {}, // it's a check
         },
+    ]
+);
 
+wTourUtils.registerEditionTour('test_html_editor_scss_2', {
+    url: '/',
+    test: true,
+},
+    [
         // This part of the test ensures that a restricted user can still use
         // the HTML Editor if someone else made a customization previously.
 
-        {
-            content: "Submit login",
-            trigger: '.oe_login_form',
-            run: function () {
-                $('.oe_login_form input[name="login"]').val("demo");
-                $('.oe_login_form input[name="password"]').val("demo");
-                $('.oe_login_form input[name="redirect"]').val("/");
-                $('.oe_login_form').submit();
-            },
-        },
         // 4. Open Html Editor and select a scss file
         {
-            content: "open customize menu",
-            trigger: '#customize-menu > a',
+            content: "open site menu",
+            trigger: 'button[data-menu-xmlid="website.menu_site"]',
         },
         {
             content: "open html editor",
-            trigger: '#html_editor',
+            trigger: 'a[data-menu-xmlid="website.menu_ace_editor"]',
         },
         {
             content: "open type switcher",
@@ -214,15 +200,10 @@ tour.register('test_html_editor_scss', {
             extra_trigger: `div.ace_line:contains("${demoCssModif}")`,
             trigger: ".o_ace_view_editor button[data-action=save]",
         },
-        {
-            content: "wait for reload",
-            trigger: "body:not(:has(div.o_ace_view_editor))",
-            run: function () {}, // it's a check
-            timeout: 30000, // SCSS compilation might take some time
-        },
         {
             content: "reset view (after reload, html editor should have been reopened where it was)",
-            trigger: '#ace-view-id button[data-action="reset"]',
+            trigger: '#ace-view-id button[data-action="reset"]:not([disabled])',
+            timeout: 30000, // SCSS compilation might take some time
         },
         {
             content: "confirm reset warning",
diff --git a/addons/website/static/tests/tours/link_tools.js b/addons/website/static/tests/tours/link_tools.js
index 9102967abab..5c2a29754a6 100644
--- a/addons/website/static/tests/tours/link_tools.js
+++ b/addons/website/static/tests/tours/link_tools.js
@@ -1,16 +1,16 @@
 /** @odoo-module */
 
-import tour from 'web_tour.tour';
 import wTourUtils from 'website.tour_utils';
 
 const clickOnImgStep = {
     content: "Click somewhere else to save.",
-    trigger: '#wrap .s_text_image img',
+    trigger: 'iframe #wrap .s_text_image img',
 };
 
-tour.register('link_tools', {
+wTourUtils.registerEditionTour('link_tools', {
     test: true,
-    url: '/?enable_editor=1',
+    url: '/',
+    edition: true,
 }, [
     // 1. Create a new link from scratch.
     wTourUtils.dragNDrop({
@@ -19,7 +19,7 @@ tour.register('link_tools', {
     }),
     {
         content: "Replace first paragraph, to insert a new link",
-        trigger: '#wrap .s_text_image p',
+        trigger: 'iframe #wrap .s_text_image p',
         run: 'text Go to odoo: '
     },
     {
@@ -35,7 +35,7 @@ tour.register('link_tools', {
     // 2. Edit the link with the link tools.
     {
         content: "Click on the newly created link, change content to odoo website",
-        trigger: '.s_text_image a[href="http://odoo.com"]:contains("odoo.com")',
+        trigger: 'iframe .s_text_image a[href="http://odoo.com"]:contains("odoo.com")',
         run: 'text odoo website',
     },
     {
@@ -43,6 +43,7 @@ tour.register('link_tools', {
         trigger: '#o_link_dialog_url_input',
         run: 'text odoo.be'
     },
+
     clickOnImgStep,
     ...wTourUtils.clickOnSave(),
     // 3. Edit a link after saving the page.
@@ -50,23 +51,21 @@ tour.register('link_tools', {
     {
         content: "The new link content should be odoo website and url odoo.be",
         extra_trigger: "#oe_snippets.o_loaded",
-        trigger: '.s_text_image a[href="http://odoo.be"]:contains("odoo website")',
+        trigger: 'iframe .s_text_image a[href="http://odoo.be"]:contains("odoo website")',
     },
     {
         content: "The new link content should be odoo website and url odoo.be",
         trigger: '#toolbar button[data-original-title="Link Style"]',
     },
     {
-        trigger: 'body',
-        run: () => {
-            // When doing automated testing, the link popover takes time to
-            // hide. While hidding, the editor observer is unactive in order to
-            // prevent the popover mutation to be recorded. In a manual
-            // scenario, the popover has plenty of time to be hidden and the
-            // obsever would be re-activated in time. As this problem arise only
-            // in test, we activate the observer here for the popover.
-            $('#wrapwrap').data('wysiwyg').odooEditor.observerActive('hide.bs.popover');
-        },
+        // When doing automated testing, the link popover takes time to
+        // hide. While hidding, the editor observer is unactive in order to
+        // prevent the popover mutation to be recorded. In a manual
+        // scenario, the popover has plenty of time to be hidden and the
+        // obsever would be re-activated in time. As this problem arise only
+        // in test, we make sure the popover is hidden
+        trigger: '.o_website_preview:not(:has(.popover))',
+        run: () => null, // it's a check
     },
     {
         content: "Click on the secondary style button.",
@@ -75,7 +74,7 @@ tour.register('link_tools', {
     ...wTourUtils.clickOnSave(),
     {
         content: "The link should have the secondary button style.",
-        trigger: '.s_text_image a.btn.btn-secondary[href="http://odoo.be"]:contains("odoo website")',
+        trigger: 'iframe .s_text_image a.btn.btn-secondary[href="http://odoo.be"]:contains("odoo website")',
         run: () => {}, // It's a check.
     }
 ]);
diff --git a/addons/website/static/tests/tours/restricted_editor.js b/addons/website/static/tests/tours/restricted_editor.js
index 10f24291be8..c1da7f5a279 100644
--- a/addons/website/static/tests/tours/restricted_editor.js
+++ b/addons/website/static/tests/tours/restricted_editor.js
@@ -7,7 +7,7 @@ tour.register("restricted_editor", {
     test: true,
     url: "/",
 }, [{
-    trigger: 'a[data-action=edit]',
+    trigger: 'a.o_frontend_to_backend_edit_btn',
     content: "Click \"EDIT\" button of website as Restricted Editor",
     extra_trigger: ".homepage",
 }, {
diff --git a/addons/website/static/tests/tours/rte.js b/addons/website/static/tests/tours/rte.js
index 7da999bba04..05679a5ea55 100644
--- a/addons/website/static/tests/tours/rte.js
+++ b/addons/website/static/tests/tours/rte.js
@@ -3,23 +3,23 @@ odoo.define('website.tour.rte', function (require) {
 
 var ajax = require('web.ajax');
 var session = require('web.session');
-var tour = require('web_tour.tour');
+const wTourUtils = require('website.tour_utils');
 
 var domReady = new Promise(function (resolve) {
     $(resolve);
 });
 var ready = Promise.all([domReady, session.is_bound, ajax.loadXML()]);
 
-tour.register('rte_translator', {
+wTourUtils.registerEditionTour('rte_translator', {
     test: true,
     url: '/',
     wait_for: ready,
 }, [{
     content: "click language dropdown",
-    trigger: '.js_language_selector .dropdown-toggle',
+    trigger: 'iframe .js_language_selector .dropdown-toggle',
 }, {
     content: "click on Add a language",
-    trigger: 'a.o_add_language',
+    trigger: 'iframe a.o_add_language',
 }, {
     content: "type Parseltongue",
     trigger: 'div[name="lang_ids"] .o_input_dropdown input',
@@ -41,70 +41,71 @@ tour.register('rte_translator', {
 }, {
     content: "load Parseltongue",
     trigger: '.modal-footer button:first',
-    extra_trigger: '.modal div[name="lang_ids"] .badge-pill .o_tag_badge_text:contains(Parseltongue)',
+    extra_trigger: '.modal-dialog div[name="lang_ids"] .badge-pill .o_tag_badge_text:contains(Parseltongue)',
 }, {
     content: "click language dropdown (2)",
-    trigger: '.js_language_selector .dropdown-toggle',
+    trigger: 'iframe .js_language_selector .dropdown-toggle',
     timeout: 60000,
 }, {
     content: "go to english version",
-    trigger: '.js_language_selector a[data-url_code="en"]',
-    extra_trigger: 'html[lang*="pa-GB"]',
+    trigger: 'iframe .js_language_selector a[data-url_code="en"]',
+    extra_trigger: 'iframe html[lang*="pa-GB"]',
 }, {
     content: "Open new page menu",
-    trigger: "body:has(#o_new_content_menu_choices.o_hidden) #new-content-menu > a",
-    extra_trigger: 'a[data-action="edit"]',
+    trigger: ".o_menu_systray .o_new_content_container > a",
+    extra_trigger: '.o_edit_website_container > a',
     consumeVisibleOnly: true,
 }, {
     content: "click on new page",
-    trigger: 'a[data-action="new_page"]',
+    trigger: '.o_new_content_element a',
 }, {
     content: "insert page name",
-    trigger: '#editor_new_page input[type="text"]',
+    trigger: '.modal-dialog input[type="text"]',
     run: 'text rte_translator',
 }, {
     content: "create page",
-    trigger: 'button.btn-continue',
+    trigger: '.modal-dialog button.btn-primary',
     extra_trigger: 'input[type="text"]:propValue(rte_translator)',
 }, {
     content: "drop a snippet",
     trigger: "#snippet_structure .oe_snippet:eq(1) .oe_snippet_thumbnail",
-    run: 'drag_and_drop #wrap',
+    run: 'drag_and_drop iframe #wrap',
 }, {
     content: "change content",
-    trigger: '#wrap',
+    trigger: 'iframe #wrap',
     run: function () {
-        $("#wrap p:first").replaceWith('<p>Write one or <font style="background-color: yellow;">two paragraphs <b>describing</b></font> your product or\
+        $('iframe:not(.o_ignore_in_tour)').contents().find("#wrap p:first").replaceWith('<p>Write one or <font style="background-color: yellow;">two paragraphs <b>describing</b></font> your product or\
                 <font style="color: rgb(255, 0, 0);">services</font>. To be successful your content needs to be\
                 useful to your <a href="/999">readers</a>.</p> <input placeholder="test translate placeholder"/>\
                 <p>&lt;b&gt;&lt;/b&gt; is an HTML&nbsp;tag &amp; is empty</p>');
-        $("#wrap img").attr("title", "test translate image title");
+        $('iframe:not(.o_ignore_in_tour)').contents().find("#wrap img").attr("title", "test translate image title");
     }
 }, {
     content: "save",
     trigger: 'button[data-action=save]',
-    extra_trigger: '#wrap p:first b',
+    extra_trigger: 'iframe #wrap p:first b',
 }, {
     content: "click language dropdown (3)",
-    trigger: '.js_language_selector .dropdown-toggle',
-    extra_trigger: 'body:not(.o_wait_reload):not(:has(.note-editor)) a[data-action="edit"]',
+    trigger: 'iframe .js_language_selector .dropdown-toggle',
+    extra_trigger: 'iframe body:not(.editor_enable)',
 }, {
     content: "click on Parseltongue version",
-    trigger: '.js_language_selector a[data-url_code="pa_GB"]',
-    extra_trigger: 'html[lang*="en"]:not(:has(button[data-action=save]))',
+    trigger: 'iframe .js_language_selector a[data-url_code="pa_GB"]',
+    extra_trigger: 'iframe html[lang*="en"]',
 }, {
     content: "translate",
-    trigger: 'html:not(:has(#wrap p span)) .o_menu_systray a[data-action="translate"]',
+    trigger: '.o_menu_systray .o_translate_website_container > a',
+    extra_trigger: 'iframe html:not(:has(#wrap p span))',
 }, {
     content: "close modal",
     trigger: '.modal-footer .btn-secondary',
 }, {
     content: "check if translation is activate",
-    trigger: '[data-oe-translation-id]',
+    trigger: 'iframe [data-oe-translation-id]',
 }, {
     content: "translate text",
-    extra_trigger: '.editor_started',
-    trigger: '#wrap p font:first',
+    extra_trigger: '#oe_snippets.o_loaded',
+    trigger: 'iframe #wrap p font:first',
     run: function (actionHelper) {
         actionHelper.text('translated Parseltongue text');
         const Wysiwyg = odoo.__DEBUG__.services['web_editor.wysiwyg'];
@@ -114,7 +115,7 @@ tour.register('rte_translator', {
     },
 }, {
     content: "translate text with special char",
-    trigger: '#wrap input + p span:first',
+    trigger: 'iframe #wrap input + p span:first',
     run: function (actionHelper) {
         actionHelper.click();
         this.$anchor.prepend('&lt;{translated}&gt;');
@@ -125,12 +126,12 @@ tour.register('rte_translator', {
     },
 }, {
     content: "click on input",
-    trigger: '#wrap input:first',
-    extra_trigger: '#wrap .o_dirty font:first:contains(translated Parseltongue text)',
+    trigger: 'iframe #wrap input:first',
+    extra_trigger: 'iframe #wrap .o_dirty font:first:contains(translated Parseltongue text)',
     run: 'click',
 }, {
     content: "translate placeholder",
-    trigger: 'input:first',
+    trigger: '.modal-dialog input:first',
     run: 'text test Parseltongue placeholder',
 }, {
     content: "close modal",
@@ -141,34 +142,34 @@ tour.register('rte_translator', {
     trigger: 'button[data-action=save]',
 }, {
     content: "check: content is translated",
-    trigger: '#wrap p font:first:contains(translated Parseltongue text)',
-    extra_trigger: 'body:not(.o_wait_reload):not(:has(.note-editor)) a[data-action="edit_master"]',
+    trigger: 'iframe #wrap p font:first:contains(translated Parseltongue text)',
+    extra_trigger: 'iframe body:not(.editor_enable)',
     run: function () {}, // it's a check
 }, {
     content: "check: content with special char is translated",
-    trigger: "#wrap input + p:contains(<{translated}><b></b> is an HTML\xa0tag & )",
+    trigger: "iframe #wrap input + p:contains(<{translated}><b></b> is an HTML\xa0tag & )",
     run: function () {}, // it's a check
 
 }, {
     content: "check: placeholder translation",
-    trigger: 'input[placeholder="test Parseltongue placeholder"]',
+    trigger: 'iframe input[placeholder="test Parseltongue placeholder"]',
     run: function () {}, // it's a check
 
 }, {
     content: "open language selector",
-    trigger: '.js_language_selector button:first',
-    extra_trigger: 'html[lang*="pa-GB"]:not(:has(#wrap p span))',
+    trigger: 'iframe .js_language_selector button:first',
+    extra_trigger: 'iframe html[lang*="pa-GB"]:not(:has(#wrap p span))',
 }, {
     content: "return to english version",
-    trigger: '.js_language_selector a[data-url_code="en"]',
+    trigger: 'iframe .js_language_selector a[data-url_code="en"]',
 }, {
     content: "edit english version",
-    trigger: 'a[data-action=edit]',
-    extra_trigger: 'body:not(:has(#wrap p font:first:containsExact(paragraphs <b>describing</b>)))',
+    trigger: '.o_edit_website_container > a',
+    extra_trigger: 'iframe body:not(:has(#wrap p font:first:containsExact(paragraphs <b>describing</b>)))',
 }, {
     content: "select text",
     extra_trigger: '#oe_snippets.o_loaded',
-    trigger: '#wrap p',
+    trigger: 'iframe #wrap p',
     run: function (actionHelper) {
         actionHelper.click();
         var el = this.$anchor[0];
@@ -196,24 +197,24 @@ tour.register('rte_translator', {
     // extra_trigger: '#wrap.o_dirty p span[style*="text-decoration-line: underline;"]',
 }, {
     content: "click language dropdown (4)",
-    trigger: '.js_language_selector .dropdown-toggle',
-    extra_trigger: 'body:not(.o_wait_reload):not(:has(.note-editor)) a[data-action="edit"]',
+    trigger: 'iframe .js_language_selector .dropdown-toggle',
+    extra_trigger: 'iframe body:not(.editor_enable)',
 }, {
     content: "return in Parseltongue",
-    trigger: 'html[lang="en-US"] .js_language_selector .js_change_lang[data-url_code="pa_GB"]',
+    trigger: 'iframe html[lang="en-US"] .js_language_selector .js_change_lang[data-url_code="pa_GB"]',
 }, {
     content: "check bis: content is translated",
-    trigger: '#wrap p font:first:contains(translated Parseltongue text)',
-    extra_trigger: 'html[lang*="pa-GB"] body:not(:has(button[data-action=save]))',
+    trigger: 'iframe #wrap p font:first:contains(translated Parseltongue text)',
+    extra_trigger: 'iframe html[lang*="pa-GB"]',
 }, {
     content: "check bis: placeholder translation",
-    trigger: 'input[placeholder="test Parseltongue placeholder"]',
+    trigger: 'iframe input[placeholder="test Parseltongue placeholder"]',
 }, {
-    content: "Open customize menu",
-    trigger: "#customize-menu > .dropdown-toggle",
+    content: "open site menu",
+    trigger: 'button[data-menu-xmlid="website.menu_site"]',
 }, {
     content: "Open HTML editor",
-    trigger: "[data-action='ace']",
+    trigger: 'a[data-menu-xmlid="website.menu_ace_editor"]',
 }, {
     content: "Check that the editor is not showing translated content (1)",
     trigger: '.ace_text-layer .ace_line:contains("an HTML")',
@@ -221,12 +222,12 @@ tour.register('rte_translator', {
         var lineEscapedText = $(this.$anchor.text()).text();
         if (lineEscapedText !== "&lt;b&gt;&lt;/b&gt; is an HTML&nbsp;tag &amp; is empty") {
             console.error('The HTML editor should display the correct untranslated content');
-            $('body').addClass('rte_translator_error');
+            $('iframe:not(.o_ignore_in_tour)').contents().find('body').addClass('rte_translator_error');
         }
     },
 }, {
     content: "Check that the editor is not showing translated content (2)",
-    trigger: 'body:not(.rte_translator_error)',
+    trigger: 'iframe body:not(.rte_translator_error)',
     run: function () {},
 }]);
 });
diff --git a/addons/website/static/tests/tours/snippet_background_edition.js b/addons/website/static/tests/tours/snippet_background_edition.js
index 258f3f5129f..2761f946307 100644
--- a/addons/website/static/tests/tours/snippet_background_edition.js
+++ b/addons/website/static/tests/tours/snippet_background_edition.js
@@ -1,6 +1,5 @@
 /** @odoo-module */
 
-import tour from 'web_tour.tour';
 import weUtils from 'web_editor.utils';
 import wTourUtils from 'website.tour_utils';
 
@@ -83,7 +82,7 @@ function checkAndUpdateBackgroundColor({
 
 function updateAndCheckCustomGradient({updateStep, checkGradient}) {
     const steps = [updateStep, {
-        trigger: `#wrapwrap section.${snippets[0].id}.o_cc1`,
+        trigger: `iframe #wrapwrap section.${snippets[0].id}.o_cc1`,
         content: 'Color combination 1 still selected',
         run: () => null,
     }];
@@ -91,9 +90,10 @@ function updateAndCheckCustomGradient({updateStep, checkGradient}) {
     return steps;
 }
 
-tour.register('snippet_background_edition', {
+wTourUtils.registerEditionTour('snippet_background_edition', {
+    url: '/',
+    edition: true,
     test: true,
-    url: '/?enable_editor=1',
 },
 [
 wTourUtils.dragNDrop(snippets[0]),
@@ -103,7 +103,7 @@ wTourUtils.clickOnSnippet(snippets[0]),
 ...checkAndUpdateBackgroundColor({
     changeType: 'cc',
     change: 3,
-    finalSelector: `.${snippets[0].id}.o_cc.o_cc3:not([class*=bg-]):not([style*="background"])`,
+    finalSelector: `iframe .${snippets[0].id}.o_cc.o_cc3:not([class*=bg-]):not([style*="background"])`,
 }),
 
 // Change the color combination + Check the previous one was marked as selected
@@ -111,7 +111,7 @@ wTourUtils.clickOnSnippet(snippets[0]),
     checkCC: 3,
     changeType: 'cc',
     change: 2,
-    finalSelector: `.${snippets[0].id}.o_cc.o_cc2:not(.o_cc3):not([class*=bg-])`,
+    finalSelector: `iframe .${snippets[0].id}.o_cc.o_cc2:not(.o_cc3):not([class*=bg-])`,
 }),
 
 // Check the color combination was marked as selected + Edit the bg color
@@ -120,7 +120,7 @@ wTourUtils.clickOnSnippet(snippets[0]),
     checkNoCC: 3,
     changeType: 'bg',
     change: 'black-50',
-    finalSelector: `.${snippets[0].id}.o_cc.o_cc2.bg-black-50`,
+    finalSelector: `iframe .${snippets[0].id}.o_cc.o_cc2.bg-black-50`,
 }),
 
 // Check the current color palette selection + Change the bg color
@@ -129,7 +129,7 @@ wTourUtils.clickOnSnippet(snippets[0]),
     checkBg: 'black-50',
     changeType: 'bg',
     change: '800',
-    finalSelector: `.${snippets[0].id}.o_cc.o_cc2.bg-800:not(.bg-black-50)`,
+    finalSelector: `iframe .${snippets[0].id}.o_cc.o_cc2.bg-800:not(.bg-black-50)`,
 }),
 
 // Check the current color palette selection + Change the color combination
@@ -140,7 +140,7 @@ wTourUtils.clickOnSnippet(snippets[0]),
     checkNoBg: 'black-50',
     changeType: 'cc',
     change: 4,
-    finalSelector: `.${snippets[0].id}.o_cc.o_cc4:not(.o_cc2).bg-800`,
+    finalSelector: `iframe .${snippets[0].id}.o_cc.o_cc4:not(.o_cc2).bg-800`,
 }),
 
 // Check the current color palette status + Replace the bg color by a gradient
@@ -150,7 +150,7 @@ wTourUtils.clickOnSnippet(snippets[0]),
     checkBg: '800',
     changeType: 'gradient',
     change: gradients[0],
-    finalSelector: `.${snippets[0].id}.o_cc.o_cc4:not(.bg-800)[style*="background-image: ${gradients[0]}"]`,
+    finalSelector: `iframe .${snippets[0].id}.o_cc.o_cc4:not(.bg-800)[style*="background-image: ${gradients[0]}"]`,
 }),
 
 // Check the current color palette status + Replace the gradient
@@ -160,7 +160,7 @@ wTourUtils.clickOnSnippet(snippets[0]),
     checkGradient: gradients[0],
     changeType: 'gradient',
     change: gradients[1],
-    finalSelector: `.${snippets[0].id}.o_cc.o_cc4[style*="background-image: ${gradients[1]}"]:not([style*="background-image: ${gradients[0]}"])`,
+    finalSelector: `iframe .${snippets[0].id}.o_cc.o_cc4[style*="background-image: ${gradients[1]}"]:not([style*="background-image: ${gradients[0]}"])`,
 }),
 
 // Check the current color palette selection + Change the color combination
@@ -171,7 +171,7 @@ wTourUtils.clickOnSnippet(snippets[0]),
     checkNoGradient: gradients[0],
     changeType: 'cc',
     change: 1,
-    finalSelector: `.${snippets[0].id}.o_cc.o_cc1:not(.o_cc4)[style*="background-image: ${gradients[1]}"]`,
+    finalSelector: `iframe .${snippets[0].id}.o_cc.o_cc1:not(.o_cc4)[style*="background-image: ${gradients[1]}"]`,
 }),
 
 // Final check of the color status in the color palette
@@ -193,7 +193,7 @@ wTourUtils.changeOption('ColoredLevelBackground', '[data-name="bg_image_toggle_o
     content: "Select an image in the media dialog",
 },
 {
-    trigger: `.${snippets[0].id}.o_cc.o_cc1`,
+    trigger: `iframe .${snippets[0].id}.o_cc.o_cc1`,
     run: function () {
         const parts = weUtils.backgroundImageCssToParts(this.$anchor.css('background-image'));
         if (!parts.url || !parts.url.startsWith('url(')) {
@@ -211,7 +211,7 @@ wTourUtils.changeOption('ColoredLevelBackground', '[data-name="bg_image_toggle_o
     checkGradient: gradients[1],
     changeType: 'gradient',
     change: gradients[0],
-    finalSelector: `.${snippets[0].id}.o_cc.o_cc1:not([style*="${gradients[1]}"])`,
+    finalSelector: `iframe .${snippets[0].id}.o_cc.o_cc1:not([style*="${gradients[1]}"])`,
     finalRun: function () {
         const parts = weUtils.backgroundImageCssToParts(this.$anchor.css('background-image'));
         if (!parts.url || !parts.url.startsWith('url(')) {
@@ -320,7 +320,7 @@ switchTo('gradient'),
     checkNoGradient: gradients[1],
     changeType: 'bg',
     change: 'black-75',
-    finalSelector: `.${snippets[0].id}.o_cc.o_cc1.bg-black-75[style^="background-image: url("]:not([style*="${gradients[0]}"])`
+    finalSelector: `iframe .${snippets[0].id}.o_cc.o_cc1.bg-black-75[style^="background-image: url("]:not([style*="${gradients[0]}"])`
 }),
 
 // Re-add a gradient
@@ -330,7 +330,7 @@ switchTo('gradient'),
     checkNoGradient: gradients[0],
     changeType: 'gradient',
     change: gradients[1],
-    finalSelector: `.${snippets[0].id}.o_cc.o_cc1:not(.bg-black-75)`,
+    finalSelector: `iframe .${snippets[0].id}.o_cc.o_cc1:not(.bg-black-75)`,
     finalRun: function () {
         const parts = weUtils.backgroundImageCssToParts(this.$anchor.css('background-image'));
         if (!parts.url || !parts.url.startsWith('url(')) {
@@ -350,7 +350,7 @@ switchTo('gradient'),
 }),
 wTourUtils.changeOption('ColoredLevelBackground', '[data-name="bg_image_toggle_opt"]', 'image toggle', 'top', true),
 {
-    trigger: `.${snippets[0].id}.o_cc.o_cc1[style*="background-image: ${gradients[1]}"]`,
+    trigger: `iframe .${snippets[0].id}.o_cc.o_cc1[style*="background-image: ${gradients[1]}"]`,
     run: () => null,
 },
 
@@ -360,7 +360,7 @@ wTourUtils.changeOption('ColoredLevelBackground', '[data-name="bg_image_toggle_o
     content: "Click on the None button of the color palette",
 },
 {
-    trigger: `.${snippets[0].id}:not(.o_cc):not(.o_cc1):not([style*="background-image"])`,
+    trigger: `iframe .${snippets[0].id}:not(.o_cc):not(.o_cc1):not([style*="background-image"])`,
     content: "All color classes and properties should have been removed",
     run: () => null,
 }
diff --git a/addons/website/static/tests/tours/snippet_countdown.js b/addons/website/static/tests/tours/snippet_countdown.js
index 580565e744d..efc2f77f756 100644
--- a/addons/website/static/tests/tours/snippet_countdown.js
+++ b/addons/website/static/tests/tours/snippet_countdown.js
@@ -1,11 +1,11 @@
 /** @odoo-module */
 
-import tour from 'web_tour.tour';
 import wTourUtils from 'website.tour_utils';
 
-tour.register('snippet_countdown', {
+wTourUtils.registerEditionTour('snippet_countdown', {
     test: true,
-    url: '/?enable_editor=1',
+    url: '/',
+    edition: true,
 }, [
     wTourUtils.dragNDrop({id: 's_countdown', name: 'Countdown'}),
     wTourUtils.clickOnSnippet({id: 's_countdown', name: 'Countdown'}),
@@ -24,7 +24,7 @@ tour.register('snippet_countdown', {
     },
     {
         content: "Check that the countdown message is still displayed",
-        trigger: '.s_countdown .s_picture',
+        trigger: 'iframe .s_countdown .s_picture',
         run: () => {
             // Just a visibility check
 
@@ -45,12 +45,12 @@ tour.register('snippet_countdown', {
     wTourUtils.changeOption('countdown', 'we-button[data-end-action="message_no_countdown"]', 'end action'),
     {
         content: "Check that the countdown is not displayed",
-        trigger: '.s_countdown:has(.s_countdown_canvas_wrapper:not(:visible))',
+        trigger: 'iframe .s_countdown:has(.s_countdown_canvas_wrapper:not(:visible))',
         run: () => null, // Just a visibility check
     },
     {
         content: "Check that the message is still displayed",
-        trigger: '.s_countdown .s_picture',
+        trigger: 'iframe .s_countdown .s_picture',
         run: () => null, // Just a visibility check
     },
 ]);
diff --git a/addons/website/static/tests/tours/snippet_empty_parent_autoremove.js b/addons/website/static/tests/tours/snippet_empty_parent_autoremove.js
index b8e4be76fb9..53d28b1dc24 100644
--- a/addons/website/static/tests/tours/snippet_empty_parent_autoremove.js
+++ b/addons/website/static/tests/tours/snippet_empty_parent_autoremove.js
@@ -1,7 +1,6 @@
 odoo.define("website.tour.snippet_empty_parent_autoremove", function (require) {
 "use strict";
 
-const tour = require('web_tour.tour');
 const wTourUtils = require('website.tour_utils');
 
 function removeSelectedBlock() {
@@ -11,9 +10,10 @@ function removeSelectedBlock() {
     };
 }
 
-tour.register('snippet_empty_parent_autoremove', {
+wTourUtils.registerEditionTour('snippet_empty_parent_autoremove', {
     test: true,
-    url: '/?enable_editor=1',
+    url: '/',
+    edition: true,
 }, [
     // Base case: remove both columns from text - image
     wTourUtils.dragNDrop({
@@ -22,17 +22,17 @@ tour.register('snippet_empty_parent_autoremove', {
     }),
     {
         content: "Click on second column",
-        trigger: '#wrap .s_text_image .row > :nth-child(2)',
+        trigger: 'iframe #wrap .s_text_image .row > :nth-child(2)',
     },
     removeSelectedBlock(),
     {
         content: "Click on first column",
-        trigger: '#wrap .s_text_image .row > :first-child',
+        trigger: 'iframe #wrap .s_text_image .row > :first-child',
     },
     removeSelectedBlock(),
     {
         content: "Check that #wrap is empty",
-        trigger: '#wrap:empty',
+        trigger: 'iframe #wrap:empty',
     },
 
     // Banner: test that parallax, bg-filter and shape are not treated as content
@@ -46,23 +46,23 @@ tour.register('snippet_empty_parent_autoremove', {
     }),
     {
         content: "Check that parallax is present",
-        trigger: '#wrap .s_banner .s_parallax_bg',
+        trigger: 'iframe #wrap .s_banner .s_parallax_bg',
         run: () => null,
     },
     wTourUtils.changeOption('ColoredLevelBackground', 'Shape'),
     {
         content: "Check that shape is present",
-        trigger: '#wrap .s_banner .o_we_shape',
+        trigger: 'iframe #wrap .s_banner .o_we_shape',
         run: () => null,
     },
     {
         content: "Click on first column",
-        trigger: '#wrap .s_banner .row > :first-child',
+        trigger: 'iframe #wrap .s_banner .row > :first-child',
     },
     removeSelectedBlock(),
     {
         content: "Check that #wrap is empty",
-        trigger: '#wrap:empty',
+        trigger: 'iframe #wrap:empty',
         run: () => null,
     },
 ]);
diff --git a/addons/website/static/tests/tours/snippet_popup_add_remove.js b/addons/website/static/tests/tours/snippet_popup_add_remove.js
index fc457e8635f..b18db63fd5c 100644
--- a/addons/website/static/tests/tours/snippet_popup_add_remove.js
+++ b/addons/website/static/tests/tours/snippet_popup_add_remove.js
@@ -1,18 +1,19 @@
 /** @odoo-module */
 
-import tour from 'web_tour.tour';
+import wTourUtils from 'website.tour_utils';
 
-tour.register('snippet_popup_add_remove', {
+wTourUtils.registerEditionTour('snippet_popup_add_remove', {
     test: true,
-    url: '/?enable_editor=1',
+    url: '/',
+    edition: true,
 }, [{
     content: 'Drop s_popup snippet',
-    trigger: '#oe_snippets .oe_snippet:has( > [data-snippet="s_popup"]) .oe_snippet_thumbnail',
-    run: "drag_and_drop #wrap",
+    trigger: '#oe_snippets.o_loaded .oe_snippet:has( > [data-snippet="s_popup"]) .oe_snippet_thumbnail',
+    run: "drag_and_drop iframe #wrap",
 }, {
     content: 'Edit s_popup snippet',
     in_modal: false,
-    trigger: '#wrap.o_editable [data-snippet="s_popup"] .row > div', // Click deep in the snippet structure
+    trigger: 'iframe #wrap.o_editable [data-snippet="s_popup"] .row > div', // Click deep in the snippet structure
 }, {
     content: 'Check s_popup setting are loaded, wait panel is visible',
     in_modal: false,
@@ -25,6 +26,6 @@ tour.register('snippet_popup_add_remove', {
 }, {
     content: 'Check the s_popup was removed',
     in_modal: false,
-    trigger: '#wrap.o_editable:not(:has([data-snippet="s_popup"]))',
+    trigger: 'iframe #wrap.o_editable:not(:has([data-snippet="s_popup"]))',
     run: () => null,
 }]);
diff --git a/addons/website/static/tests/tours/snippet_social_media.js b/addons/website/static/tests/tours/snippet_social_media.js
index a9d444a408d..ef8e5ca94ae 100644
--- a/addons/website/static/tests/tours/snippet_social_media.js
+++ b/addons/website/static/tests/tours/snippet_social_media.js
@@ -1,6 +1,5 @@
 /** @odoo-module */
 
-import tour from 'web_tour.tour';
 import wTourUtils from 'website.tour_utils';
 
 const addNewSocialNetwork = function (optionIndex, linkIndex, url) {
@@ -15,7 +14,7 @@ const addNewSocialNetwork = function (optionIndex, linkIndex, url) {
     },
     {
         content: "Ensure new link is found",
-        trigger: `.s_social_media:has(a:eq(${linkIndex})[href='https://www.example.com'])`,
+        trigger: `iframe .s_social_media:has(a:eq(${linkIndex})[href='https://www.example.com'])`,
         run: () => {}, // This is a check.
     },
     {
@@ -25,14 +24,15 @@ const addNewSocialNetwork = function (optionIndex, linkIndex, url) {
     },
     {
         content: "Ensure new link is changed",
-        trigger: `.s_social_media:has(a:eq(${linkIndex})[href='${url}'])`,
+        trigger: `iframe .s_social_media:has(a:eq(${linkIndex})[href='${url}'])`,
         run: () => {}, // This is a check.
     }];
 };
 
-tour.register('snippet_social_media', {
+wTourUtils.registerEditionTour('snippet_social_media', {
     test: true,
-    url: '/?enable_editor=1',
+    url: '/',
+    edition: true,
 }, [
     wTourUtils.dragNDrop({id: 's_social_media', name: 'Social Media'}),
     wTourUtils.clickOnSnippet({id: 's_social_media', name: 'Social Media'}),
@@ -44,7 +44,7 @@ tour.register('snippet_social_media', {
     },
     {
         content: "Ensure twitter became first",
-        trigger: '.s_social_media:has(a:eq(0)[href="/website/social/twitter"])',
+        trigger: 'iframe .s_social_media:has(a:eq(0)[href="/website/social/twitter"])',
         run: () => {}, // This is a check.
     },
     {
@@ -64,7 +64,7 @@ tour.register('snippet_social_media', {
     ...addNewSocialNetwork(8, 7, 'https://instagr.am/odoo.official/'),
     {
         content: "Check if the result is correct before removing",
-        trigger: ".s_social_media" +
+        trigger: "iframe .s_social_media" +
                  ":has(a:eq(0)[href='/website/social/twitter'])" +
                  ":has(a:eq(1)[href='/website/social/linkedin'])" +
                  ":has(a:eq(2)[href='/website/social/youtube'])" +
@@ -83,7 +83,7 @@ tour.register('snippet_social_media', {
     },
     {
         content: "Ensure paypal icon is found",
-        trigger: ".s_social_media" +
+        trigger: "iframe .s_social_media" +
                  ":has(a:eq(5)[href='https://www.paypal.com/abc']:has(i.fa-paypal))",
         run: () => {}, // This is a check.
     },
@@ -94,7 +94,7 @@ tour.register('snippet_social_media', {
     },
     {
         content: "Ensure custom link was removed",
-        trigger: '.s_social_media:has(a:eq(5)[href="https://whatever.it/1EdSw9X"]:has(i.fa-pencil))',
+        trigger: 'iframe .s_social_media:has(a:eq(5)[href="https://whatever.it/1EdSw9X"]:has(i.fa-pencil))',
         run: () => {}, // This is a check.
     },
     {
@@ -104,7 +104,7 @@ tour.register('snippet_social_media', {
     },
     {
         content: "Check if the result is correct after removing",
-        trigger: ".s_social_media" +
+        trigger: "iframe .s_social_media" +
                  ":has(a:eq(0)[href='/website/social/twitter'])" +
                  ":has(a:eq(1)[href='/website/social/linkedin'])" +
                  ":has(a:eq(2)[href='/website/social/youtube'])" +
@@ -127,7 +127,7 @@ tour.register('snippet_social_media', {
     },
     {
         content: "Wait until save's calls are finished",
-        trigger: "body:not(.editor_enable)",
+        trigger: "iframe body:not(.editor_enable)",
         run: function () {}, // it's a check
     }
 ]);
diff --git a/addons/website/static/tests/tours/snippet_version.js b/addons/website/static/tests/tours/snippet_version.js
index 0e106753490..3686ed9a3c5 100644
--- a/addons/website/static/tests/tours/snippet_version.js
+++ b/addons/website/static/tests/tours/snippet_version.js
@@ -1,22 +1,20 @@
 odoo.define("website.tour.snippet_version", function (require) {
 "use strict";
 
-var tour = require("web_tour.tour");
+const wTourUtils = require('website.tour_utils');
 
-tour.register("snippet_version", {
-    test: true,
+wTourUtils.registerEditionTour("snippet_version", {
+    edition: true,
     url: "/",
+    test: true,
 }, [{
-    content: "Enter edit mode",
-    trigger: 'a[data-action=edit]',
-}, {
     content: "Drop s_test_snip snippet",
     trigger: '#oe_snippets .oe_snippet:has(.s_test_snip) .oe_snippet_thumbnail',
-    run: "drag_and_drop #wrap",
+    run: "drag_and_drop iframe #wrap",
 }, {
     content: "Drop s_text_image snippet",
     trigger: '#oe_snippets .oe_snippet:has(.s_text_image) .oe_snippet_thumbnail:not(.o_we_already_dragging)',
-    run: "drag_and_drop #wrap",
+    run: "drag_and_drop iframe #wrap",
 }, {
     content: "Test t-snippet and t-snippet-call: snippets have data-snippet set",
     trigger: '#oe_snippets .o_panel_body > .oe_snippet.ui-draggable',
@@ -29,18 +27,16 @@ tour.register("snippet_version", {
         if (!document.querySelector('#oe_snippets [data-snippet="s_test_snip"] [data-snippet="s_share"]')) {
             console.error("error s_share t-called inside s_test_snip is missing template name");
         }
-        if (!document.querySelector('#wrap [data-snippet="s_test_snip"] [data-snippet="s_share"]')) {
+        if (!document.querySelector('iframe:not(.o_ignore_in_tour)').contentDocument.querySelector('#wrap [data-snippet="s_test_snip"] [data-snippet="s_share"]')) {
             console.error("error Dropped a s_test_snip snippet but missing s_share template name in it");
         }
     },
 }, {
-    content: "Enter edit mode",
+    content: "Click on save button",
     trigger: 'button[data-action="save"]',
-}, {
-    content: "Enter edit mode",
-    extra_trigger: 'body:not(.editor_enable)',
-    trigger: 'a[data-action=edit]',
-}, {
+},
+    wTourUtils.clickOnEdit(),
+{
     content: "Modify the version of snippets",
     trigger: '#oe_snippets .o_panel_body > .oe_snippet',
     run: function () {
@@ -50,18 +46,18 @@ tour.register("snippet_version", {
     },
 }, {
     content: "Edit s_test_snip",
-    trigger: '#wrap.o_editable .s_test_snip',
+    trigger: 'iframe #wrap.o_editable .s_test_snip',
 }, {
     content: "Edit text_image",
     extra_trigger: 'we-customizeblock-options:contains(Test snip) .snippet-option-VersionControl > we-alert',
-    trigger: '#wrap.o_editable .s_text_image',
+    trigger: 'iframe #wrap.o_editable .s_text_image',
 }, {
     content: "Edit s_share",
     extra_trigger: 'we-customizeblock-options:contains(Text - Image) .snippet-option-VersionControl  > we-alert',
-    trigger: '#wrap.o_editable .s_share',
+    trigger: 'iframe #wrap.o_editable .s_share',
 }, {
     content: "s_share is outdated",
     extra_trigger: 'we-customizeblock-options:contains(Share) .snippet-option-VersionControl > we-alert',
-    trigger: 'body',
+    trigger: 'iframe body',
 }]);
 });
diff --git a/addons/website/static/tests/tours/snippets_all_drag_and_drop.js b/addons/website/static/tests/tours/snippets_all_drag_and_drop.js
index d39ff4881ff..ea2c6dfbf4e 100644
--- a/addons/website/static/tests/tours/snippets_all_drag_and_drop.js
+++ b/addons/website/static/tests/tours/snippets_all_drag_and_drop.js
@@ -1,19 +1,31 @@
 odoo.define("website.tour.snippets_all_drag_and_drop", async function (require) {
 "use strict";
 
-const snippetsEditor = require('web_editor.snippet.editor');
+const { WysiwygAdapterComponent } = require('@website/components/wysiwyg_adapter/wysiwyg_adapter');
+const websiteTourUtils = require('website.tour_utils');
+const { patch, unpatch } = require('web.utils');
 
-snippetsEditor.SnippetEditor.include({
-    removeSnippet: async function (shouldRecordUndo = true) {
-        await this._super(...arguments);
-        $('body').attr('test-dd-snippet-removed', true);
-    },
+const patchWysiwygAdapter = () => patch(WysiwygAdapterComponent.prototype, 'snippets_all_drag_and_drop.wysiwyg_adapter', {
+    _trigger_up(ev) {
+        this._super(...arguments);
+        if (ev.name === 'snippet_removed') {
+            $('body').attr('test-dd-snippet-removed', true);
+        }
+    }
 });
 
+const unpatchWysiwygAdapter = () => unpatch(WysiwygAdapterComponent.prototype, 'snippets_all_drag_and_drop.wysiwyg_adapter');
+
 const tour = require("web_tour.tour");
 
 let snippetsNames = (new URL(document.location.href)).searchParams.get('snippets_names') || '';
-snippetsNames = snippetsNames.split(',');
+// When this test is loaded in the backend, the search params aren't as easy to
+// read as before. Little trickery to make this test run.
+const searchParams = new URLSearchParams(window.location.href.split('#')[1]).get('path');
+if (searchParams) {
+    snippetsNames = new URLSearchParams(searchParams.split('/')[1]).get('snippets_names') || '';
+    snippetsNames = snippetsNames.split(',');
+}
 let steps = [];
 let n = 0;
 for (const snippet of snippetsNames) {
@@ -21,10 +33,10 @@ for (const snippet of snippetsNames) {
     const snippetSteps = [{
         content: `Drop ${snippet} snippet [${n}/${snippetsNames.length}]`,
         trigger: `#oe_snippets .oe_snippet:has( > [data-snippet='${snippet}']) .oe_snippet_thumbnail`,
-        run: "drag_and_drop #wrap",
+        run: "drag_and_drop iframe #wrap",
     }, {
         content: `Edit ${snippet} snippet`,
-        trigger: `#wrap.o_editable [data-snippet='${snippet}']`,
+        trigger: `iframe #wrap.o_editable [data-snippet='${snippet}']`,
     }, {
         content: `check ${snippet} setting are loaded, wait panel is visible`,
         trigger: ".o_we_customize_panel",
@@ -45,13 +57,16 @@ for (const snippet of snippetsNames) {
     if (snippet === 's_google_map') {
         snippetSteps.splice(1, 3, {
             content: 'Close API Key popup',
-            trigger: ".modal-footer .btn-secondary",
+            trigger: "iframe .modal-footer .btn-secondary",
         });
     } else if (['s_popup', 's_newsletter_subscribe_popup'].includes(snippet)) {
         snippetSteps[2]['in_modal'] = false;
         snippetSteps.splice(3, 2, {
             content: `Hide the ${snippet} popup`,
-            trigger: ".s_popup_close",
+            trigger: "iframe .s_popup_close",
+        }, {
+            content: `Make sure ${snippet} is hidden`,
+            trigger: "iframe body:not(.modal-open)",
         });
     }
     steps = steps.concat(snippetSteps);
@@ -60,9 +75,10 @@ for (const snippet of snippetsNames) {
 tour.register("snippets_all_drag_and_drop", {
     test: true,
 }, [
+    websiteTourUtils.clickOnEdit(),
     {
         content: "Ensure snippets are actually passed at the test.",
-        trigger: "body",
+        trigger: "#oe_snippets.o_loaded",
         run: function () {
             // safety check, otherwise the test might "break" one day and
             // receive no steps. The test would then not test anything anymore
@@ -70,6 +86,7 @@ tour.register("snippets_all_drag_and_drop", {
             if (steps.length < 270) {
                 console.error(`This test is not behaving as it should, got only ${steps.length} steps.`);
             }
+            patchWysiwygAdapter();
         },
     },
     // This first step is needed as it will be used later for inner snippets
@@ -78,11 +95,11 @@ tour.register("snippets_all_drag_and_drop", {
     {
         content: "Drop s_text_image snippet",
         trigger: "#oe_snippets .oe_snippet:has( > [data-snippet='s_text_image']) .oe_snippet_thumbnail",
-        run: "drag_and_drop #wrap"
+        run: "drag_and_drop iframe #wrap"
     },
     {
         content: "Edit s_text_image snippet",
-        trigger: "#wrap.o_editable [data-snippet='s_text_image']"
+        trigger: "iframe #wrap.o_editable [data-snippet='s_text_image']"
     },
     {
         content: "check setting are loaded, wait panel is visible",
@@ -92,6 +109,12 @@ tour.register("snippets_all_drag_and_drop", {
         content: "click on 'BLOCKS' tab",
         trigger: ".o_we_add_snippet_btn"
     },
-].concat(steps)
+].concat(steps).concat([
+    {
+        content: "Remove wysiwyg patch",
+        trigger: "body",
+        run: () => unpatchWysiwygAdapter(),
+    }
+]),
 );
 });
diff --git a/addons/website/static/tests/tours/specific_website_editor.js b/addons/website/static/tests/tours/specific_website_editor.js
index b51256670b1..fd8ebd4d303 100644
--- a/addons/website/static/tests/tours/specific_website_editor.js
+++ b/addons/website/static/tests/tours/specific_website_editor.js
@@ -1,15 +1,16 @@
 odoo.define('website.tour.specific_website_editor', function (require) {
 'use strict';
 
-var tour = require('web_tour.tour');
+const tour = require('web_tour.tour');
 
 tour.register('generic_website_editor', {
     test: true,
 }, [{
-    trigger: 'a[data-action=edit]',
-    content: 'Click edit button',
-}, {
-    trigger: 'body:not([data-hello="world"])',
+    trigger: 'a.o_frontend_to_backend_edit_btn',
+    content: 'Go to backend',
+},
+{
+    trigger: 'iframe body:not([data-hello="world"])',
     extra_trigger: '#oe_snippets.o_loaded',
     content: 'Check that the editor DOM matches its website-generic features',
     run: function () {}, // Simple check
@@ -18,10 +19,11 @@ tour.register('generic_website_editor', {
 tour.register('specific_website_editor', {
     test: true,
 }, [{
-    trigger: 'a[data-action=edit]',
-    content: 'Click edit button',
-}, {
-    trigger: 'body[data-hello="world"]',
+    trigger: 'a.o_frontend_to_backend_edit_btn',
+    content: 'Go to backend',
+},
+{
+    trigger: 'iframe body[data-hello="world"]',
     extra_trigger: '#oe_snippets.o_loaded',
     content: 'Check that the editor DOM matches its website-specific features',
     run: function () {}, // Simple check
diff --git a/addons/website/static/tests/tours/website_form_editor.js b/addons/website/static/tests/tours/website_form_editor.js
index 622c02e63fe..26a35249011 100644
--- a/addons/website/static/tests/tours/website_form_editor.js
+++ b/addons/website/static/tests/tours/website_form_editor.js
@@ -1,8 +1,7 @@
 odoo.define('website.tour.form_editor', function (require) {
     'use strict';
 
-    const rpc = require('web.rpc');
-    const tour = require("web_tour.tour");
+    const wTourUtils = require("website.tour_utils");
 
     // Visibility possible values:
     const VISIBLE = 'Always Visible';
@@ -31,8 +30,8 @@ odoo.define('website.tour.form_editor', function (require) {
     const addField = function (data, name, type, label, required, display = {visibility: VISIBLE, condition: ''}) {
         const ret = [{
             content: "Select form",
-            extra_trigger: '.s_website_form_field',
-            trigger: 'section.s_website_form',
+            extra_trigger: 'iframe .s_website_form_field',
+            trigger: 'iframe section.s_website_form',
         }, {
             content: "Add field",
             trigger: 'we-button[data-add-field]',
@@ -40,12 +39,12 @@ odoo.define('website.tour.form_editor', function (require) {
         ...selectButtonByData(data),
         {
             content: "Wait for field to load",
-            trigger: `.s_website_form_field[data-type="${name}"], .s_website_form_input[name="${name}"]`, //custom or existing field
+            trigger: `iframe .s_website_form_field[data-type="${name}"], .s_website_form_input[name="${name}"]`, //custom or existing field
             run: function () {},
         },
         ...selectButtonByText(display.visibility),
     ];
-        let testText = '.s_website_form_field';
+        let testText = 'iframe .s_website_form_field';
         if (display.condition) {
             ret.push({
                 content: "Set the visibility condition",
@@ -86,21 +85,20 @@ odoo.define('website.tour.form_editor', function (require) {
         return addField(`data-existing-field="${name}"`, name, type, label, required, display);
     };
 
-    tour.register("website_form_editor_tour", {
+    wTourUtils.registerEditionTour("website_form_editor_tour", {
+        url: '/',
+        edition: true,
         test: true,
     }, [
         // Drop a form builder snippet and configure it
         {
-            content: "Enter edit mode",
-            trigger: 'a[data-action=edit]',
-        }, {
             content: "Drop the form snippet",
             trigger: '#oe_snippets .oe_snippet:has(.s_website_form) .oe_snippet_thumbnail',
-            run: 'drag_and_drop #wrap',
+            run: 'drag_and_drop iframe #wrap',
         }, {
             content: "Select form by clicking on an input field",
-            extra_trigger: '.s_website_form_field',
-            trigger: 'section.s_website_form input',
+            extra_trigger: 'iframe .s_website_form_field',
+            trigger: 'iframe section.s_website_form input',
         }, {
             content: "Verify that the form editor appeared",
             trigger: '.o_we_customize_panel .snippet-option-WebsiteFormEditor',
@@ -110,8 +108,8 @@ odoo.define('website.tour.form_editor', function (require) {
             trigger: '.o_we_add_snippet_btn',
         }, {
             content: "Select form by clicking on a text area",
-            extra_trigger: '.s_website_form_field',
-            trigger: 'section.s_website_form textarea',
+            extra_trigger: 'iframe .s_website_form_field',
+            trigger: 'iframe section.s_website_form textarea',
         }, {
             content: "Verify that the form editor appeared",
             trigger: '.o_we_customize_panel .snippet-option-WebsiteFormEditor',
@@ -129,16 +127,16 @@ odoo.define('website.tour.form_editor', function (require) {
             trigger: '.o_we_add_snippet_btn',
         }, {
             content: "Select form itself (not a specific field)",
-            extra_trigger: '.s_website_form_field',
-            trigger: 'section.s_website_form',
+            extra_trigger: 'iframe .s_website_form_field',
+            trigger: 'iframe section.s_website_form',
         },
         ...selectButtonByText('Send an E-mail'),
         {
             content: "Form has a model name",
-            trigger: 'section.s_website_form form[data-model_name="mail.mail"]',
+            trigger: 'iframe section.s_website_form form[data-model_name="mail.mail"]',
         }, {
             content: 'Edit the Phone Number field',
-            trigger: 'input[name="phone"]',
+            trigger: 'iframe input[name="phone"]',
         }, {
             content: 'Change the label position of the phone field',
             trigger: 'we-button[data-select-label-position="right"]',
@@ -175,7 +173,7 @@ odoo.define('website.tour.form_editor', function (require) {
             run: 'text Wiko Stairway',
         }, {
             content: "Check the resulting field",
-            trigger: ".s_website_form_field.s_website_form_custom.s_website_form_required" +
+            trigger: "iframe .s_website_form_field.s_website_form_custom.s_website_form_required" +
                         ":has(.s_website_form_multiple[data-display='horizontal'])" +
                         ":has(.checkbox:has(label:contains('Iphone')):has(input[type='checkbox'][required]))" +
                         ":has(.checkbox:has(label:contains('Galaxy S')):has(input[type='checkbox'][required]))" +
@@ -186,7 +184,7 @@ odoo.define('website.tour.form_editor', function (require) {
         ...selectButtonByData('data-multi-checkbox-display="vertical"'),
         {
             content: "Check the resulting field",
-            trigger: ".s_website_form_field.s_website_form_custom.s_website_form_required" +
+            trigger: "iframe .s_website_form_field.s_website_form_custom.s_website_form_required" +
                         ":has(.s_website_form_multiple[data-display='vertical'])" +
                         ":has(.checkbox:has(label:contains('Iphone')):has(input[type='checkbox'][required]))" +
                         ":has(.checkbox:has(label:contains('Galaxy S')):has(input[type='checkbox'][required]))" +
@@ -220,7 +218,7 @@ odoo.define('website.tour.form_editor', function (require) {
             trigger: 'we-button[data-name="required_opt"] we-checkbox',
         }, {
             content: "Check the resulting field",
-            trigger: ".s_website_form_field.s_website_form_custom:not(.s_website_form_required)" +
+            trigger: "iframe .s_website_form_field.s_website_form_custom:not(.s_website_form_required)" +
                         ":has(.radio:has(label:contains('After-sales Service')):has(input[type='radio']:not([required])))" +
                         ":has(.radio:has(label:contains('Invoicing Service')):has(input[type='radio']:not([required])))" +
                         ":has(.radio:has(label:contains('Development Service')):has(input[type='radio']:not([required])))" +
@@ -255,7 +253,7 @@ odoo.define('website.tour.form_editor', function (require) {
             trigger: '.o_we_select_remove_option:eq(0)',
         }, {
             content: "Check the resulting snippet",
-            trigger: ".s_website_form_field.s_website_form_custom.s_website_form_required" +
+            trigger: "iframe .s_website_form_field.s_website_form_custom.s_website_form_required" +
                         ":has(label:contains('State'))" +
                         ":has(select[required]:hidden)" +
                         ":has(.s_website_form_select_item:contains('Belgium'))" +
@@ -269,16 +267,16 @@ odoo.define('website.tour.form_editor', function (require) {
 
         {
             content: "Insure the history step of the editor is not checking for unbreakable",
-            trigger: '#wrapwrap',
+            trigger: 'iframe #wrapwrap',
             run: () => {
-                const wysiwyg = $('#wrapwrap').data('wysiwyg');
+                const wysiwyg = $('iframe:not(.o_ignore_in_tour)').contents().find('#wrapwrap').data('wysiwyg');
                 wysiwyg.odooEditor.historyStep(true);
             },
         },
         // Edit the submit button using linkDialog.
         {
             content: "Click submit button to show edit popover",
-            trigger: '.s_website_form_send',
+            trigger: 'iframe .s_website_form_send',
         }, {
             content: "Click on Edit Link in Popover",
             trigger: '.o_edit_menu_popover .o_we_edit_link',
@@ -299,39 +297,40 @@ odoo.define('website.tour.form_editor', function (require) {
             },
         }, {
             content: "Check the resulting button",
-            trigger: '.s_website_form_send.btn.btn-sm.btn-secondary.rounded-circle',
+            trigger: 'iframe .s_website_form_send.btn.btn-sm.btn-secondary.rounded-circle',
             run: () => null,
         },
         // Add a default value to a auto-fillable field.
         {
             content: 'Select the name field',
-            trigger: '.s_website_form_field:eq(0)',
+            trigger: 'iframe .s_website_form_field:eq(0)',
         }, {
             content: 'Set a default value to the name field',
             trigger: 'we-input[data-attribute-name="value"] input',
             run: 'text John Smith',
         },
         {
-            content:  "Save the page",
-            trigger:  "button[data-action=save]",
+            content: "Save the page",
+            trigger: "button[data-action=save]",
         },
         {
             content: 'Verify value attribute and property',
-            trigger: '.s_website_form_field:eq(0) input[value="John Smith"]:propValue("Mitchell Admin")',
+            extra_trigger: 'iframe body:not(.editor_enable)',
+            trigger: 'iframe .s_website_form_field:eq(0) input[value="John Smith"]:propValue("Mitchell Admin")',
         },
         {
             content: 'Verify that phone field is still auto-fillable',
-            trigger: '.s_website_form_field input[data-fill-with="phone"]:propValue("+1 555-555-5555")',
+            trigger: 'iframe .s_website_form_field input[data-fill-with="phone"]:propValue("+1 555-555-5555")',
         },
         // Check that if we edit again and save again the default value is not deleted.
         {
             content: 'Enter in edit mode again',
-            trigger: 'a[data-action="edit"]',
+            trigger: '.o_edit_website_container > a',
             run: 'click',
         },
         {
             content: 'Edit the form',
-            trigger: '.s_website_form_field:eq(0) input',
+            trigger: 'iframe .s_website_form_field:eq(0) input',
             extra_trigger: 'button[data-action="save"]',
             run: 'click',
         },
@@ -343,17 +342,14 @@ odoo.define('website.tour.form_editor', function (require) {
         },
         {
             content: 'Verify that the value has not been deleted',
-            trigger: '.s_website_form_field:eq(0) input[value="John Smith"]',
-        },
-        {
-            content: 'Enter in edit mode again',
-            trigger: 'a[data-action="edit"]',
-            run: 'click',
+            extra_trigger: 'iframe body:not(.editor_enable)',
+            trigger: 'iframe .s_website_form_field:eq(0) input[value="John Smith"]',
         },
+        wTourUtils.clickOnEdit(),
         {
             content: 'Click on the submit button',
-            trigger: '.s_website_form_send',
-            extra_trigger: 'button[data-action="save"]',
+            trigger: 'iframe .s_website_form_send',
+            extra_trigger: '.o_website_preview.editor_enable',
             run: 'click',
         },
         {
@@ -368,197 +364,17 @@ odoo.define('website.tour.form_editor', function (require) {
         },
         {
             content: 'Verify that the recipient email has been saved',
-            trigger: 'body:not(.editor_enable)',
+            trigger: 'iframe body:not(.editor_enable)',
             // We have to this that way because the input type = hidden.
-            extra_trigger: 'form:has(input[name="email_to"][value="test@test.test"])',
+            extra_trigger: 'iframe form:has(input[name="email_to"][value="test@test.test"])',
         },
     ]);
 
-    tour.register("website_form_editor_tour_submit", {
-        test: true,
-    },[
-        {
-            content:  "Try to send the form with some required fields not filled in",
-            extra_trigger:  "form[data-model_name='mail.mail']" +
-                            "[data-success-page='/contactus-thank-you']" +
-                            ":has(.s_website_form_field:has(label:contains('Your Name')):has(input[type='text'][name='name'][required]))" +
-                            ":has(.s_website_form_field:has(label:contains('Your Email')):has(input[type='email'][name='email_from'][required]))" +
-                            ":has(.s_website_form_field:has(label:contains('Your Question')):has(textarea[name='description'][required]))" +
-                            ":has(.s_website_form_field:has(label:contains('Subject')):has(input[type='text'][name='subject'][required]))" +
-                            ":has(.s_website_form_field:has(label:contains('Test Date')):has(input[type='text'][name='date'][required]))" +
-                            ":has(.s_website_form_field:has(label:contains('Awesome Label')):hidden)" +
-                            ":has(.s_website_form_field:has(label:contains('Your Message')):has(textarea[name='body_html'][required]))" +
-                            ":has(.s_website_form_field:has(label:contains('Products')):has(input[type='checkbox'][name='Products'][value='Iphone'][required]))" +
-                            ":has(.s_website_form_field:has(label:contains('Products')):has(input[type='checkbox'][name='Products'][value='Galaxy S'][required]))" +
-                            ":has(.s_website_form_field:has(label:contains('Products')):has(input[type='checkbox'][name='Products'][value='Xperia'][required]))" +
-                            ":has(.s_website_form_field:has(label:contains('Products')):has(input[type='checkbox'][name='Products'][value='Wiko Stairway'][required]))" +
-                            ":has(.s_website_form_field:has(label:contains('Service')):has(input[type='radio'][name='Service'][value='After-sales Service']:not([required])))" +
-                            ":has(.s_website_form_field:has(label:contains('Service')):has(input[type='radio'][name='Service'][value='Invoicing Service']:not([required])))" +
-                            ":has(.s_website_form_field:has(label:contains('Service')):has(input[type='radio'][name='Service'][value='Development Service']:not([required])))" +
-                            ":has(.s_website_form_field:has(label:contains('Service')):has(input[type='radio'][name='Service'][value='Management Service']:not([required])))" +
-                            ":has(.s_website_form_field:has(label:contains('State')):has(select[name='State'][required]:has(option[value='Belgium'])))" +
-                            ":has(.s_website_form_field.s_website_form_required:has(label:contains('State')):has(select[name='State'][required]:has(option[value='France'])))" +
-                            ":has(.s_website_form_field:has(label:contains('State')):has(select[name='State'][required]:has(option[value='Canada'])))" +
-                            ":has(.s_website_form_field:has(label:contains('Invoice Scan')))" +
-                            ":has(.s_website_form_field:has(input[name='email_to'][value='test@test.test']))",
-            trigger:  ".s_website_form_send"
-        },
-        {
-            content:  "Check if required fields were detected and complete the Subject field",
-            extra_trigger:  "form:has(#s_website_form_result.text-danger)" +
-                            ":has(.s_website_form_field:has(label:contains('Your Name')):not(.o_has_error))" +
-                            ":has(.s_website_form_field:has(label:contains('Email')).o_has_error)" +
-                            ":has(.s_website_form_field:has(label:contains('Your Question')).o_has_error)" +
-                            ":has(.s_website_form_field:has(label:contains('Subject')).o_has_error)" +
-                            ":has(.s_website_form_field:has(label:contains('Test Date')).o_has_error)" +
-                            ":has(.s_website_form_field:has(label:contains('Your Message')).o_has_error)" +
-                            ":has(.s_website_form_field:has(label:contains('Products')).o_has_error)" +
-                            ":has(.s_website_form_field:has(label:contains('Service')):not(.o_has_error))" +
-                            ":has(.s_website_form_field:has(label:contains('State')):not(.o_has_error))" +
-                            ":has(.s_website_form_field:has(label:contains('Invoice Scan')):not(.o_has_error))",
-            trigger:  "input[name=subject]",
-            run:      "text Jane Smith"
-        },
-        {
-            content:  "Update required field status by trying to Send again",
-            trigger:  ".s_website_form_send"
-        },
-        {
-            content:  "Check if required fields were detected and complete the Message field",
-            extra_trigger:  "form:has(#s_website_form_result.text-danger)" +
-                            ":has(.s_website_form_field:has(label:contains('Your Name')):not(.o_has_error))" +
-                            ":has(.s_website_form_field:has(label:contains('Email')).o_has_error)" +
-                            ":has(.s_website_form_field:has(label:contains('Your Question')).o_has_error)" +
-                            ":has(.s_website_form_field:has(label:contains('Subject')):not(.o_has_error))" +
-                            ":has(.s_website_form_field:has(label:contains('Test Date')).o_has_error)" +
-                            ":has(.s_website_form_field:has(label:contains('Your Message')).o_has_error)" +
-                            ":has(.s_website_form_field:has(label:contains('Products')).o_has_error)" +
-                            ":has(.s_website_form_field:has(label:contains('Service')):not(.o_has_error))" +
-                            ":has(.s_website_form_field:has(label:contains('State')):not(.o_has_error))" +
-                            ":has(.s_website_form_field:has(label:contains('Invoice Scan')):not(.o_has_error))",
-            trigger:  "textarea[name=body_html]",
-            run:      "text A useless message"
-        },
-        {
-            content:  "Update required field status by trying to Send again",
-            trigger:  ".s_website_form_send"
-        },
-        {
-            content:  "Check if required fields was detected and check a product. If this fails, you probably broke the cleanForSave.",
-            extra_trigger:  "form:has(#s_website_form_result.text-danger)" +
-                            ":has(.s_website_form_field:has(label:contains('Your Name')):not(.o_has_error))" +
-                            ":has(.s_website_form_field:has(label:contains('Email')).o_has_error)" +
-                            ":has(.s_website_form_field:has(label:contains('Your Question')).o_has_error)" +
-                            ":has(.s_website_form_field:has(label:contains('Subject')):not(.o_has_error))" +
-                            ":has(.s_website_form_field:has(label:contains('Test Date')).o_has_error)" +
-                            ":has(.s_website_form_field:has(label:contains('Your Message')):not(.o_has_error))" +
-                            ":has(.s_website_form_field:has(label:contains('Products')).o_has_error)" +
-                            ":has(.s_website_form_field:has(label:contains('Service')):not(.o_has_error))" +
-                            ":has(.s_website_form_field:has(label:contains('State')):not(.o_has_error))" +
-                            ":has(.s_website_form_field:has(label:contains('Invoice Scan')):not(.o_has_error))",
-            trigger:  "input[name=Products][value='Wiko Stairway']"
-        },
-        {
-            content:  "Complete Date field",
-            trigger:  ".s_website_form_datetime [data-toggle='datetimepicker']",
-        },
-        {
-            content:  "Check another product",
-            trigger:  "input[name='Products'][value='Xperia']"
-        },
-        {
-            content:  "Check a service",
-            trigger:  "input[name='Service'][value='Development Service']"
-        },
-        {
-            content:  "Complete Your Name field",
-            trigger:  "input[name='name']",
-            run:      "text chhagan"
-        },
-        {
-            content:  "Complete Email field",
-            trigger:  "input[name=email_from]",
-            run:      "text test@mail.com"
-        },
-        {
-            content: "Complete Subject field",
-            trigger: 'input[name="subject"]',
-            run: 'text subject',
-        },
-        {
-            content:  "Complete Your Question field",
-            trigger:  "textarea[name='description']",
-            run:      "text magan"
-        },
-        {
-            content: "Check if conditional field is visible, it shouldn't.",
-            trigger: "body",
-            run: function () {
-                const style = window.getComputedStyle(this.$anchor[0].getElementsByClassName('s_website_form_field_hidden_if')[0]);
-                if (style.display !== 'none') {
-                    console.error('error This field should be invisible when the name is not odoo');
-                }
-            }
-        },
-        {
-            content: "Change name input",
-            trigger: "input[name='name']",
-            run: "text odoo",
-        },
-        {
-            content: "Check if conditional field is visible, it should.",
-            trigger: "input[name='email_cc']",
-        },
-        {
-            content:  "Send the form",
-            trigger:  ".s_website_form_send"
-        },
-        {
-            content:  "Check form is submitted without errors",
-            trigger:  "#wrap:has(h1:contains('Thank You!'))"
-        }
-    ]);
-
-    tour.register("website_form_editor_tour_results", {
-        test: true,
-    }, [
-        {
-            content: "Check mail.mail records have been created",
-            trigger: "body",
-            run: function () {
-                var mailDef = rpc.query({
-                        model: 'mail.mail',
-                        method: 'search_count',
-                        args: [[
-                            ['email_to', '=', 'test@test.test'],
-                            ['body_html', 'like', 'A useless message'],
-                            ['body_html', 'like', 'Service : Development Service'],
-                            ['body_html', 'like', 'State : Belgium'],
-                            ['body_html', 'like', 'Products : Xperia,Wiko Stairway']
-                        ]],
-                    });
-                var success = function(model, count) {
-                    if (count > 0) {
-                        $('body').append('<div id="website_form_editor_success_test_tour_'+model+'"></div>');
-                    }
-                };
-                mailDef.then(_.bind(success, this, 'mail_mail'));
-            }
-        },
-        {
-            content:  "Check mail.mail records have been created",
-            trigger:  "#website_form_editor_success_test_tour_mail_mail"
-        }
-    ]);
-
     function editContactUs(steps) {
         return [
             {
-                content: "Enter edit mode",
-                trigger: 'a[data-action=edit]',
-            }, {
                 content: "Select the contact us form by clicking on an input field",
-                trigger: '.s_website_form input',
+                trigger: 'iframe .s_website_form input',
                 extra_trigger: '#oe_snippets .oe_snippet_thumbnail',
                 run: 'click',
             },
@@ -574,9 +390,10 @@ odoo.define('website.tour.form_editor', function (require) {
         ];
     }
 
-    tour.register('website_form_contactus_edition_with_email', {
-        test: true,
+    wTourUtils.registerEditionTour('website_form_contactus_edition_with_email', {
         url: '/contactus',
+        edition: true,
+        test: true,
     }, editContactUs([
         {
             content: 'Change the Recipient Email',
@@ -584,9 +401,10 @@ odoo.define('website.tour.form_editor', function (require) {
             run: 'text test@test.test',
         },
     ]));
-    tour.register('website_form_contactus_edition_no_email', {
-        test: true,
+    wTourUtils.registerEditionTour('website_form_contactus_edition_no_email', {
         url: '/contactus',
+        edition: true,
+        test: true,
     }, editContactUs([
         {
             content: "Change a random option",
@@ -594,29 +412,6 @@ odoo.define('website.tour.form_editor', function (require) {
             run: 'text_blur **',
         },
     ]));
-    tour.register('website_form_contactus_submit', {
-        test: true,
-        url: '/contactus',
-    }, [
-        // As the demo portal user, only two inputs needs to be filled to send
-        // the email
-        {
-            content: "Fill in the subject",
-            trigger: 'input[name="subject"]',
-        },
-        {
-            content: 'Fill in the message',
-            trigger: 'textarea[name="description"]',
-        },
-        {
-            content: 'Send the form',
-            trigger: '.s_website_form_send',
-        },
-        {
-            content: 'Check form is submitted without errors',
-            trigger: '#wrap:has(h1:contains("Thank You!"))',
-        },
-    ]);
 
     return {};
 });
diff --git a/addons/website/static/tests/tours/website_form_editor_frontend.js b/addons/website/static/tests/tours/website_form_editor_frontend.js
new file mode 100644
index 00000000000..4369b0249f2
--- /dev/null
+++ b/addons/website/static/tests/tours/website_form_editor_frontend.js
@@ -0,0 +1,203 @@
+/** @odoo-module **/
+import tour from 'web_tour.tour';
+import rpc from 'web.rpc';
+
+tour.register("website_form_editor_tour_submit", {
+    test: true,
+},[
+    {
+        content:  "Try to send the form with some required fields not filled in",
+        extra_trigger:  "form[data-model_name='mail.mail']" +
+                        "[data-success-page='/contactus-thank-you']" +
+                        ":has(.s_website_form_field:has(label:contains('Your Name')):has(input[type='text'][name='name'][required]))" +
+                        ":has(.s_website_form_field:has(label:contains('Your Email')):has(input[type='email'][name='email_from'][required]))" +
+                        ":has(.s_website_form_field:has(label:contains('Your Question')):has(textarea[name='description'][required]))" +
+                        ":has(.s_website_form_field:has(label:contains('Subject')):has(input[type='text'][name='subject'][required]))" +
+                        ":has(.s_website_form_field:has(label:contains('Test Date')):has(input[type='text'][name='date'][required]))" +
+                        ":has(.s_website_form_field:has(label:contains('Awesome Label')):hidden)" +
+                        ":has(.s_website_form_field:has(label:contains('Your Message')):has(textarea[name='body_html'][required]))" +
+                        ":has(.s_website_form_field:has(label:contains('Products')):has(input[type='checkbox'][name='Products'][value='Iphone'][required]))" +
+                        ":has(.s_website_form_field:has(label:contains('Products')):has(input[type='checkbox'][name='Products'][value='Galaxy S'][required]))" +
+                        ":has(.s_website_form_field:has(label:contains('Products')):has(input[type='checkbox'][name='Products'][value='Xperia'][required]))" +
+                        ":has(.s_website_form_field:has(label:contains('Products')):has(input[type='checkbox'][name='Products'][value='Wiko Stairway'][required]))" +
+                        ":has(.s_website_form_field:has(label:contains('Service')):has(input[type='radio'][name='Service'][value='After-sales Service']:not([required])))" +
+                        ":has(.s_website_form_field:has(label:contains('Service')):has(input[type='radio'][name='Service'][value='Invoicing Service']:not([required])))" +
+                        ":has(.s_website_form_field:has(label:contains('Service')):has(input[type='radio'][name='Service'][value='Development Service']:not([required])))" +
+                        ":has(.s_website_form_field:has(label:contains('Service')):has(input[type='radio'][name='Service'][value='Management Service']:not([required])))" +
+                        ":has(.s_website_form_field:has(label:contains('State')):has(select[name='State'][required]:has(option[value='Belgium'])))" +
+                        ":has(.s_website_form_field.s_website_form_required:has(label:contains('State')):has(select[name='State'][required]:has(option[value='France'])))" +
+                        ":has(.s_website_form_field:has(label:contains('State')):has(select[name='State'][required]:has(option[value='Canada'])))" +
+                        ":has(.s_website_form_field:has(label:contains('Invoice Scan')))" +
+                        ":has(.s_website_form_field:has(input[name='email_to'][value='test@test.test']))",
+        trigger:  ".s_website_form_send"
+    },
+    {
+        content:  "Check if required fields were detected and complete the Subject field",
+        extra_trigger:  "form:has(#s_website_form_result.text-danger)" +
+                        ":has(.s_website_form_field:has(label:contains('Your Name')):not(.o_has_error))" +
+                        ":has(.s_website_form_field:has(label:contains('Email')).o_has_error)" +
+                        ":has(.s_website_form_field:has(label:contains('Your Question')).o_has_error)" +
+                        ":has(.s_website_form_field:has(label:contains('Subject')).o_has_error)" +
+                        ":has(.s_website_form_field:has(label:contains('Test Date')).o_has_error)" +
+                        ":has(.s_website_form_field:has(label:contains('Your Message')).o_has_error)" +
+                        ":has(.s_website_form_field:has(label:contains('Products')).o_has_error)" +
+                        ":has(.s_website_form_field:has(label:contains('Service')):not(.o_has_error))" +
+                        ":has(.s_website_form_field:has(label:contains('State')):not(.o_has_error))" +
+                        ":has(.s_website_form_field:has(label:contains('Invoice Scan')):not(.o_has_error))",
+        trigger:  "input[name=subject]",
+        run:      "text Jane Smith"
+    },
+    {
+        content:  "Update required field status by trying to Send again",
+        trigger:  ".s_website_form_send"
+    },
+    {
+        content:  "Check if required fields were detected and complete the Message field",
+        extra_trigger:  "form:has(#s_website_form_result.text-danger)" +
+                        ":has(.s_website_form_field:has(label:contains('Your Name')):not(.o_has_error))" +
+                        ":has(.s_website_form_field:has(label:contains('Email')).o_has_error)" +
+                        ":has(.s_website_form_field:has(label:contains('Your Question')).o_has_error)" +
+                        ":has(.s_website_form_field:has(label:contains('Subject')):not(.o_has_error))" +
+                        ":has(.s_website_form_field:has(label:contains('Test Date')).o_has_error)" +
+                        ":has(.s_website_form_field:has(label:contains('Your Message')).o_has_error)" +
+                        ":has(.s_website_form_field:has(label:contains('Products')).o_has_error)" +
+                        ":has(.s_website_form_field:has(label:contains('Service')):not(.o_has_error))" +
+                        ":has(.s_website_form_field:has(label:contains('State')):not(.o_has_error))" +
+                        ":has(.s_website_form_field:has(label:contains('Invoice Scan')):not(.o_has_error))",
+        trigger:  "textarea[name=body_html]",
+        run:      "text A useless message"
+    },
+    {
+        content:  "Update required field status by trying to Send again",
+        trigger:  ".s_website_form_send"
+    },
+    {
+        content:  "Check if required fields was detected and check a product. If this fails, you probably broke the cleanForSave.",
+        extra_trigger:  "form:has(#s_website_form_result.text-danger)" +
+                        ":has(.s_website_form_field:has(label:contains('Your Name')):not(.o_has_error))" +
+                        ":has(.s_website_form_field:has(label:contains('Email')).o_has_error)" +
+                        ":has(.s_website_form_field:has(label:contains('Your Question')).o_has_error)" +
+                        ":has(.s_website_form_field:has(label:contains('Subject')):not(.o_has_error))" +
+                        ":has(.s_website_form_field:has(label:contains('Test Date')).o_has_error)" +
+                        ":has(.s_website_form_field:has(label:contains('Your Message')):not(.o_has_error))" +
+                        ":has(.s_website_form_field:has(label:contains('Products')).o_has_error)" +
+                        ":has(.s_website_form_field:has(label:contains('Service')):not(.o_has_error))" +
+                        ":has(.s_website_form_field:has(label:contains('State')):not(.o_has_error))" +
+                        ":has(.s_website_form_field:has(label:contains('Invoice Scan')):not(.o_has_error))",
+        trigger:  "input[name=Products][value='Wiko Stairway']"
+    },
+    {
+        content:  "Complete Date field",
+        trigger:  ".s_website_form_datetime [data-toggle='datetimepicker']",
+    },
+    {
+        content:  "Check another product",
+        trigger:  "input[name='Products'][value='Xperia']"
+    },
+    {
+        content:  "Check a service",
+        trigger:  "input[name='Service'][value='Development Service']"
+    },
+    {
+        content:  "Complete Your Name field",
+        trigger:  "input[name='name']",
+        run:      "text chhagan"
+    },
+    {
+        content:  "Complete Email field",
+        trigger:  "input[name=email_from]",
+        run:      "text test@mail.com"
+    },
+    {
+        content: "Complete Subject field",
+        trigger: 'input[name="subject"]',
+        run: 'text subject',
+    },
+    {
+        content:  "Complete Your Question field",
+        trigger:  "textarea[name='description']",
+        run:      "text magan"
+    },
+    {
+        content: "Check if conditional field is visible, it shouldn't.",
+        trigger: "body",
+        run: function () {
+            const style = window.getComputedStyle(this.$anchor[0].getElementsByClassName('s_website_form_field_hidden_if')[0]);
+            if (style.display !== 'none') {
+                console.error('error This field should be invisible when the name is not odoo');
+            }
+        }
+    },
+    {
+        content: "Change name input",
+        trigger: "input[name='name']",
+        run: "text odoo",
+    },
+    {
+        content: "Check if conditional field is visible, it should.",
+        trigger: "input[name='email_cc']",
+    },
+    {
+        content:  "Send the form",
+        trigger:  ".s_website_form_send"
+    },
+    {
+        content:  "Check form is submitted without errors",
+        trigger:  "#wrap:has(h1:contains('Thank You!'))"
+    }
+]);
+
+tour.register("website_form_editor_tour_results", {
+    test: true,
+}, [
+    {
+        content: "Check mail.mail records have been created",
+        trigger: "body",
+        run: function () {
+            var mailDef = rpc.query({
+                    model: 'mail.mail',
+                    method: 'search_count',
+                    args: [[
+                        ['email_to', '=', 'test@test.test'],
+                        ['body_html', 'like', 'A useless message'],
+                        ['body_html', 'like', 'Service : Development Service'],
+                        ['body_html', 'like', 'State : Belgium'],
+                        ['body_html', 'like', 'Products : Xperia,Wiko Stairway']
+                    ]],
+                });
+            var success = function(model, count) {
+                if (count > 0) {
+                    $('body').append('<div id="website_form_editor_success_test_tour_'+model+'"></div>');
+                }
+            };
+            mailDef.then(_.bind(success, this, 'mail_mail'));
+        }
+    },
+    {
+        content:  "Check mail.mail records have been created",
+        trigger:  "#website_form_editor_success_test_tour_mail_mail"
+    }
+]);
+tour.register('website_form_contactus_submit', {
+    test: true,
+    url: '/contactus',
+}, [
+    // As the demo portal user, only two inputs needs to be filled to send
+    // the email
+    {
+        content: "Fill in the subject",
+        trigger: 'input[name="subject"]',
+    },
+    {
+        content: 'Fill in the message',
+        trigger: 'textarea[name="description"]',
+    },
+    {
+        content: 'Send the form',
+        trigger: '.s_website_form_send',
+    },
+    {
+        content: 'Check form is submitted without errors',
+        trigger: '#wrap:has(h1:contains("Thank You!"))',
+    },
+]);
diff --git a/addons/website/static/tests/tours/website_snippets_menu_tabs.js b/addons/website/static/tests/tours/website_snippets_menu_tabs.js
index cbd62e59fcc..1d1b2fd589f 100644
--- a/addons/website/static/tests/tours/website_snippets_menu_tabs.js
+++ b/addons/website/static/tests/tours/website_snippets_menu_tabs.js
@@ -11,7 +11,7 @@ tour.register("website_snippets_menu_tabs", {
     {
         content: "Click on the empty 'DRAG BUILDING BLOCKS HERE' area.",
         extra_trigger: 'we-customizeblock-option.snippet-option-ThemeColors',
-        trigger: 'main > .oe_structure.oe_empty',
+        trigger: 'iframe main > .oe_structure.oe_empty',
         run: 'click',
     },
     wTourUtils.goToTheme(),
diff --git a/addons/website/static/tests/tours/website_style_edition.js b/addons/website/static/tests/tours/website_style_edition.js
index 1f4033eb46d..6f1f880f8fe 100644
--- a/addons/website/static/tests/tours/website_style_edition.js
+++ b/addons/website/static/tests/tours/website_style_edition.js
@@ -1,18 +1,17 @@
 odoo.define("website.tour.website_style_edition", function (require) {
 "use strict";
 
-const tour = require("web_tour.tour");
+const wTourUtils = require("website.tour_utils");
 
 const TARGET_FONT_SIZE = 30;
 
-tour.register("website_style_edition", {
+wTourUtils.registerEditionTour("website_style_edition", {
     test: true,
-    url: "/",
+    url: '/',
+    edition: true,
 }, [{
-    content: "Enter edit mode",
-    trigger: 'a[data-action=edit]',
-}, {
     content: "Go to theme options",
+    extra_trigger: '#oe_snippets.o_loaded',
     trigger: '.o_we_customize_theme_btn',
 }, {
     content: "Change font size",
@@ -23,9 +22,9 @@ tour.register("website_style_edition", {
     trigger: '[data-action="save"]',
 }, {
     content: "Check the font size was properly adapted",
-    trigger: 'body:not(.editor_enable) #wrapwrap',
+    trigger: 'iframe body:not(.editor_enable) #wrapwrap',
     run: function (actions) {
-        const style = window.getComputedStyle(this.$anchor[0]);
+        const style = actions.tip_widget.el.ownerDocument.defaultView.getComputedStyle(this.$anchor[0]);
         if (style.fontSize !== `${TARGET_FONT_SIZE}px`) {
             console.error(`Expected the font-size to be equal to ${TARGET_FONT_SIZE}px but found ${style.fontSize} instead`);
         }
diff --git a/addons/website/tests/test_automatic_editor.py b/addons/website/tests/test_automatic_editor.py
index 13f3ddced14..99577b3941f 100644
--- a/addons/website/tests/test_automatic_editor.py
+++ b/addons/website/tests/test_automatic_editor.py
@@ -14,4 +14,4 @@ class TestAutomaticEditor(TestConfiguratorCommon):
             'iso_code': 'pa_GB',
             'url_code': 'pa_GB',
         })
-        self.start_tour('/', 'automatic_editor_on_new_website', login='admin')
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'automatic_editor_on_new_website', login='admin')
diff --git a/addons/website/tests/test_configurator.py b/addons/website/tests/test_configurator.py
index 52364d73c34..641c7406b0d 100644
--- a/addons/website/tests/test_configurator.py
+++ b/addons/website/tests/test_configurator.py
@@ -63,9 +63,9 @@ class TestConfiguratorTranslation(TestConfiguratorCommon):
             }).lang_install()
         feature = self.env['website.configurator.feature'].search([('name', '=', 'Privacy Policy')])
         feature.with_context(lang='fr_FR').write({'name': 'Politique de confidentialité'})
+        self.env.ref('base.user_admin').write({'lang': self.env.ref('base.lang_fr').code})
         website_fr = self.env['website'].create({
-            'name': "Website Fr",
-            'default_lang_id': self.env.ref('base.lang_fr').id
+            'name': "New website",
         })
         # disable configurator todo to ensure this test goes through
         active_todo = self.env['ir.actions.todo'].search([('state', '=', 'open')], limit=1)
diff --git a/addons/website/tests/test_snippets.py b/addons/website/tests/test_snippets.py
index 557a7df6d3e..78b0fb31b5e 100644
--- a/addons/website/tests/test_snippets.py
+++ b/addons/website/tests/test_snippets.py
@@ -2,6 +2,7 @@
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
 from lxml import html
+from werkzeug.urls import url_encode
 
 from odoo.tests import HttpCase, tagged
 from odoo.addons.website.tools import MockRequest
@@ -11,10 +12,10 @@ from odoo.addons.website.tools import MockRequest
 class TestSnippets(HttpCase):
 
     def test_01_empty_parents_autoremove(self):
-        self.start_tour("/?enable_editor=1", "snippet_empty_parent_autoremove", login='admin')
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'snippet_empty_parent_autoremove', login='admin')
 
     def test_02_default_shape_gets_palette_colors(self):
-        self.start_tour("/?enable_editor=1", "default_shape_gets_palette_colors", login='admin')
+        self.start_tour("/web", "default_shape_gets_palette_colors", login='admin')
 
     def test_03_snippets_all_drag_and_drop(self):
         with MockRequest(self.env, website=self.env['website'].browse(1)):
@@ -26,13 +27,17 @@ class TestSnippets(HttpCase):
             's_map',  # avoid call to maps.google.com
         ]
         snippets_names = ','.join(set(el.attrib['data-snippet'] for el in data_snippet_els if el.attrib['data-snippet'] not in blacklist))
-        self.start_tour("/?enable_editor=1&snippets_names=%s" % snippets_names, "snippets_all_drag_and_drop", login='admin', timeout=300)
+        snippets_names_encoded = url_encode({'snippets_names': snippets_names})
+        path = url_encode({
+            'path': '/?' + snippets_names_encoded
+        })
+        self.start_tour("/web#action=website.website_preview&%s" % path, "snippets_all_drag_and_drop", login='admin', timeout=300)
 
     def test_04_countdown_preview(self):
-        self.start_tour("/?enable_editor=1", "snippet_countdown", login='admin')
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'snippet_countdown', login='admin')
 
     def test_05_social_media(self):
-        self.start_tour("/?enable_editor=1", 'snippet_social_media', login="admin")
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'snippet_social_media', login="admin")
         self.assertEqual(
             self.env['website'].browse(1).social_instagram,
             'https://instagram.com/odoo.official/',
@@ -40,4 +45,4 @@ class TestSnippets(HttpCase):
         )
 
     def test_06_snippet_popup_add_remove(self):
-        self.start_tour('/?enable_editor=1', 'snippet_popup_add_remove', login='admin')
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'snippet_popup_add_remove', login='admin')
diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py
index cda6ebbdc2e..d6aac693fc7 100644
--- a/addons/website/tests/test_ui.py
+++ b/addons/website/tests/test_ui.py
@@ -89,7 +89,7 @@ class TestUiHtmlEditor(odoo.tests.HttpCase):
             </t>
         '''
         generic_page.arch = oe_structure_layout
-        self.start_tour("/", 'html_editor_multiple_templates', login='admin')
+        self.start_tour(self.env['website'].get_client_action_url('/generic'), 'html_editor_multiple_templates', login='admin')
         self.assertEqual(View.search_count([('key', '=', 'test.generic_view')]), 2, "homepage view should have been COW'd")
         self.assertTrue(generic_page.arch == oe_structure_layout, "Generic homepage view should be untouched")
         self.assertEqual(len(generic_page.inherit_children_ids.filtered(lambda v: 'oe_structure' in v.name)), 0, "oe_structure view should have been deleted when aboutus was COW")
@@ -104,7 +104,8 @@ class TestUiHtmlEditor(odoo.tests.HttpCase):
                 self.env.ref('website.group_website_designer').id
             ])]
         })
-        self.start_tour("/", 'test_html_editor_scss', login='admin', timeout=120)
+        self.start_tour(self.env['website'].get_client_action_url('/contactus'), 'test_html_editor_scss', login='admin')
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'test_html_editor_scss_2', login='demo')
 
     def media_dialog_undraw(self):
         self.start_tour("/", 'website_media_dialog_undraw', login='admin')
@@ -118,14 +119,14 @@ class TestUiTranslate(odoo.tests.HttpCase):
             'iso_code': 'pa_GB',
             'url_code': 'pa_GB',
         })
-        self.start_tour("/", 'rte_translator', login='admin', timeout=120)
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'rte_translator', login='admin', timeout=120)
 
 
 @odoo.tests.common.tagged('post_install', '-at_install')
 class TestUi(odoo.tests.HttpCase):
 
     def test_01_admin_tour_homepage(self):
-        self.start_tour("/?enable_editor=1", 'homepage', login='admin')
+        self.start_tour("/web", 'homepage', login='admin')
 
     def test_02_restricted_editor(self):
         self.restricted_editor = self.env['res.users'].create({
@@ -207,17 +208,17 @@ class TestUi(odoo.tests.HttpCase):
                 </xpath>
             """,
         }])
-        self.start_tour("/", 'snippet_version', login='admin')
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'snippet_version', login='admin')
 
     def test_08_website_style_custo(self):
-        self.start_tour("/", "website_style_edition", login="admin")
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'website_style_edition', login='admin')
 
     def test_09_website_edit_link_popover(self):
-        self.start_tour("/", "edit_link_popover", login="admin")
+        self.start_tour("/web", "edit_link_popover", login="admin")
 
     def test_10_website_conditional_visibility(self):
-        self.start_tour('/', 'conditional_visibility_1', login='admin')
-        self.start_tour('/', 'conditional_visibility_2', login='admin')
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'conditional_visibility_1', login='admin')
+        self.start_tour('/web', 'conditional_visibility_2', login='admin')
 
     def test_11_website_snippet_background_edition(self):
         self.env['ir.attachment'].create({
@@ -227,7 +228,7 @@ class TestUi(odoo.tests.HttpCase):
             'name': 'test.png',
             'mimetype': 'image/png',
         })
-        self.start_tour('/', 'snippet_background_edition', login='admin')
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'snippet_background_edition', login='admin')
 
     def test_12_edit_translated_page_redirect(self):
         lang = self.env['res.lang']._activate_lang('nl_NL')
@@ -286,16 +287,16 @@ class TestUi(odoo.tests.HttpCase):
         self.start_tour("/?enable_editor=1", "focus_blur_snippets", login="admin")
 
     def test_14_carousel_snippet_content_removal(self):
-        self.start_tour("/", "carousel_content_removal", login='admin')
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'carousel_content_removal', login='admin')
 
     def test_15_website_link_tools(self):
-        self.start_tour("/", "link_tools", login="admin")
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'link_tools', login="admin")
 
     def test_16_website_edit_megamenu(self):
-        self.start_tour("/", "edit_megamenu", login="admin")
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'edit_megamenu', login='admin')
 
     def test_17_website_edit_menus(self):
-        self.start_tour("/", "edit_menus", login="admin")
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'edit_menus', login='admin')
 
     def test_18_website_snippets_menu_tabs(self):
         self.start_tour("/?enable_editor=1", "website_snippets_menu_tabs", login="admin")
diff --git a/addons/website/tests/test_website_form_editor.py b/addons/website/tests/test_website_form_editor.py
index 81cd37f40e4..70a5ae9035b 100644
--- a/addons/website/tests/test_website_form_editor.py
+++ b/addons/website/tests/test_website_form_editor.py
@@ -7,12 +7,12 @@ import odoo.tests
 @odoo.tests.tagged('post_install', '-at_install')
 class TestWebsiteFormEditor(odoo.tests.HttpCase):
     def test_tour(self):
-        self.start_tour("/", 'website_form_editor_tour', login="admin")
-        self.start_tour("/", 'website_form_editor_tour_submit')
-        self.start_tour("/", 'website_form_editor_tour_results', login="admin")
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'website_form_editor_tour', login='admin')
+        self.start_tour('/', 'website_form_editor_tour_submit')
+        self.start_tour('/', 'website_form_editor_tour_results', login="admin")
 
     def test_website_form_contact_us_edition_with_email(self):
-        self.start_tour('/contactus', 'website_form_contactus_edition_with_email', login="admin")
+        self.start_tour('/web', 'website_form_contactus_edition_with_email', login="admin")
         self.start_tour('/contactus', 'website_form_contactus_submit', login="portal")
         mail = self.env['mail.mail'].search([], order='id desc', limit=1)
         self.assertEqual(
@@ -21,7 +21,7 @@ class TestWebsiteFormEditor(odoo.tests.HttpCase):
             'The email was edited, the form should have been sent to the configured email')
 
     def test_website_form_contact_us_edition_no_email(self):
-        self.start_tour('/contactus', 'website_form_contactus_edition_no_email', login="admin")
+        self.start_tour('/web', 'website_form_contactus_edition_no_email', login="admin")
         self.start_tour('/contactus', 'website_form_contactus_submit', login="portal")
         mail = self.env['mail.mail'].search([], order='id desc', limit=1)
         self.assertEqual(
diff --git a/addons/website/wizard/base_language_install.py b/addons/website/wizard/base_language_install.py
index 63669f8c0b1..ddb4d262d3a 100644
--- a/addons/website/wizard/base_language_install.py
+++ b/addons/website/wizard/base_language_install.py
@@ -26,8 +26,9 @@ class BaseLanguageInstall(models.TransientModel):
             self.website_ids.language_ids |= self.lang_ids
         params = self._context.get('params', {})
         if 'url_return' in params:
+            url = params['url_return'].replace('[lang]', self.first_lang_id.code)
             return {
-                'url': params['url_return'].replace('[lang]', self.first_lang_id.code),
+                'url': self.env['website'].get_client_action_url(url),
                 'type': 'ir.actions.act_url',
                 'target': 'self'
             }
diff --git a/addons/website_blog/static/src/js/tours/website_blog.js b/addons/website_blog/static/src/js/tours/website_blog.js
index baf4982243f..f68834e7168 100644
--- a/addons/website_blog/static/src/js/tours/website_blog.js
+++ b/addons/website_blog/static/src/js/tours/website_blog.js
@@ -3,22 +3,26 @@ odoo.define("website_blog.tour", function (require) {
 
     const {_t} = require("web.core");
     const {Markup} = require('web.utils');
-    var tour = require("web_tour.tour");
+    const wTourUtils = require('website.tour_utils');
 
-    tour.register("blog", {
+    wTourUtils.registerEditionTour("blog", {
         url: "/",
     }, [{
-        trigger: "body:has(#o_new_content_menu_choices.o_hidden) #new-content-menu > a",
+        trigger: "body:not(:has(#o_new_content_menu_choices)) .o_new_content_container > a",
         content: _t("Click here to add new content to your website."),
         consumeVisibleOnly: true,
         position: 'bottom',
     }, {
-        trigger: "a[data-action=new_blog_post]",
+        trigger: 'a[data-module-xml-id="base.module_website_blog"]',
         content: _t("Select this menu item to create a new blog post."),
         position: "bottom",
     }, {
-        trigger: "button.btn-continue",
-        extra_trigger: "form[id=\"editor_new_blog\"]",
+        trigger: 'input[name="name"]',
+        content: _t("Enter your post's title"),
+        position: "bottom",
+    }, {
+        trigger: "button.o_form_button_save",
+        extra_trigger: 'div.o_field_widget[name="blog_id"]',
         content: _t("Select the blog you want to add the post to."),
         // Without demo data (and probably in most user cases) there is only
         // one blog so this step would not be needed and would block the tour.
@@ -29,9 +33,9 @@ odoo.define("website_blog.tour", function (require) {
         // thus fail as this will be considered.
         auto: true,
     }, {
-        trigger: "h1[data-oe-expression=\"blog_post.name\"]",
+        trigger: "iframe h1[data-oe-expression=\"blog_post.name\"]",
         extra_trigger: "#oe_snippets.o_loaded",
-        content: _t("Write a title, the subtitle is optional."),
+        content: _t("Edit your title, the subtitle is optional."),
         position: "top",
         // FIXME instead of using the default 'click' event that is used to mark
         // DIV elements as consumed, we would like to use the 'input' event for
@@ -47,7 +51,7 @@ odoo.define("website_blog.tour", function (require) {
         run: "text",
     }, {
         trigger: "we-button[data-background]:nth(1)",
-        extra_trigger: "#wrap h1[data-oe-expression=\"blog_post.name\"]:not(:containsExact(\"\"))",
+        extra_trigger: "iframe #wrap h1[data-oe-expression=\"blog_post.name\"]:not(:containsExact(\"\"))",
         content: Markup(_t("Set a blog post <b>cover</b>.")),
         position: "top",
     }, {
@@ -61,38 +65,30 @@ odoo.define("website_blog.tour", function (require) {
         content: _t("Choose an image from the library."),
         position: "top",
     }, {
-        trigger: "#o_wblog_post_content",
+        trigger: "iframe #o_wblog_post_content",
         content: Markup(_t("<b>Write your story here.</b> Use the top toolbar to style your text: add an image or table, set bold or italic, etc. Drag and drop building blocks for more graphical blogs.")),
         position: "top",
         run: function (actions) {
             actions.auto();
             actions.text("Blog content", this.$anchor.find("p"));
         },
-    }, {
-        trigger: "button[data-action=save]",
-        extra_trigger: "#o_wblog_post_content .o_wblog_post_content_field p:first:not(:containsExact(" + _t("Start writing here...") + "))",
-        content: Markup(_t("<b>Click on Save</b> to record your changes.")),
-        position: "bottom",
-    }, {
-        trigger: "a[data-action=show-mobile-preview]",
-        extra_trigger: "body:not(.editor_enable)",
+    },
+    ...wTourUtils.clickOnSave(),
+    {
+        trigger: ".o_menu_systray_item.o_mobile_preview",
+        extra_trigger: "iframe body:not(.editor_enable)",
         content: Markup(_t("Use this icon to preview your blog post on <b>mobile devices</b>.")),
         position: "bottom",
     }, {
-        trigger: "button[data-dismiss=modal]",
-        extra_trigger: '.modal:has(#mobile-viewport)',
-        content: _t("Once you have reviewed the content on mobile, close the preview."),
+        trigger: ".o_menu_systray_item.o_mobile_preview",
+        extra_trigger: '.o_website_preview .o_is_mobile',
+        content: _t("Once you have reviewed the content on mobile, you can switch back to the normal view by clicking here again"),
         position: "right",
     }, {
-        trigger: ".js_publish_management .js_publish_btn",
-        extra_trigger: "body:not(.editor_enable)",
+        trigger: '.o_menu_systray_item a:contains("Unpublished")',
+        extra_trigger: "iframe body:not(.editor_enable)",
         position: "bottom",
         content: Markup(_t("<b>Publish your blog post</b> to make it visible to your visitors.")),
-    }, {
-        trigger: "#customize-menu > a",
-        extra_trigger: ".js_publish_management .js_publish_btn .css_unpublish:visible",
-        content: Markup(_t("<b>That's it, your blog post is published!</b> Discover more features through the <i>Customize</i> menu.")),
-        position: "bottom",
-        width: 500,
-    }]);
+    },
+]);
 });
diff --git a/addons/website_blog/tests/test_ui.py b/addons/website_blog/tests/test_ui.py
index c70e76b7d45..5ddf6c08a93 100644
--- a/addons/website_blog/tests/test_ui.py
+++ b/addons/website_blog/tests/test_ui.py
@@ -19,4 +19,4 @@ class TestUi(odoo.tests.HttpCase):
             'mimetype': 'image/png',
         })
 
-        self.start_tour("/", 'blog', login='admin')
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'blog', login='admin')
diff --git a/addons/website_crm/static/tests/tours/website_crm.js b/addons/website_crm/static/tests/tours/website_crm.js
index 1cc1de3234c..86d6877d64c 100644
--- a/addons/website_crm/static/tests/tours/website_crm.js
+++ b/addons/website_crm/static/tests/tours/website_crm.js
@@ -1,15 +1,17 @@
 odoo.define('website_crm.tour', function(require) {
     'use strict';
 
-    var tour = require('web_tour.tour');
+    const tour = require('web_tour.tour');
+    const wTourUtils = require('website.tour_utils');
 
-    tour.register('website_crm_pre_tour', {
+    wTourUtils.registerEditionTour('website_crm_pre_tour', {
         test: true,
-        url: '/contactus?enable_editor=1',
+        url: '/contactus',
+        edition: true,
     }, [{
         content: "Select contact form",
-        trigger: "#wrap.o_editable section.s_website_form",
-        extra_trigger: "body.editor_enable",
+        trigger: "iframe #wrap.o_editable section.s_website_form",
+        extra_trigger: "iframe body.editor_enable",
     }, {
         content: "Open action select",
         trigger: "we-select:has(we-button:contains('Create an Opportunity')) we-toggler",
@@ -22,8 +24,8 @@ odoo.define('website_crm.tour', function(require) {
         trigger: "button[data-action=save]",
     }, {
         content: "Ensure form model has changed and page reload is done after save",
-        trigger: "section.s_website_form form[data-model_name='crm.lead']",
-        extra_trigger: "a[data-action=edit]",
+        trigger: "iframe section.s_website_form form[data-model_name='crm.lead']",
+        extra_trigger: "iframe body:not(.editor_enable)",
     }]);
 
     tour.register('website_crm_tour', {
diff --git a/addons/website_crm/tests/test_website_crm.py b/addons/website_crm/tests/test_website_crm.py
index 124e625ed90..c9b5a7d425a 100644
--- a/addons/website_crm/tests/test_website_crm.py
+++ b/addons/website_crm/tests/test_website_crm.py
@@ -12,7 +12,7 @@ class TestWebsiteCrm(odoo.tests.HttpCase):
         utm_medium = self.env['utm.medium'].create({'name': 'Medium'})
         utm_source = self.env['utm.source'].create({'name': 'Source'})
         # change action to create opportunity
-        self.start_tour("/", 'website_crm_pre_tour', login='admin')
+        self.start_tour(self.env['website'].get_client_action_url('/contactus'), 'website_crm_pre_tour', login='admin')
         self.start_tour("/?utm_source=Source&utm_medium=Medium&utm_campaign=New campaign", 'website_crm_tour')
 
         # check result
@@ -35,7 +35,7 @@ class TestWebsiteCrm(odoo.tests.HttpCase):
         partner_phone = user_partner.phone
 
         # no edit on prefilled data from logged partner : propagate partner_id on created lead
-        self.start_tour("/", 'website_crm_pre_tour', login=user_login)
+        self.start_tour(self.env['website'].get_client_action_url('/contactus'), 'website_crm_pre_tour', login=user_login)
 
         with odoo.tests.RecordCapturer(self.env['crm.lead'], []) as capt:
             self.start_tour("/", "website_crm_catch_logged_partner_info_tour", login=user_login)
diff --git a/addons/website_event/static/src/js/tours/event_tour.js b/addons/website_event/static/src/js/tours/event_tour.js
index 633d4f5a443..8229e01048d 100644
--- a/addons/website_event/static/src/js/tours/event_tour.js
+++ b/addons/website_event/static/src/js/tours/event_tour.js
@@ -19,37 +19,33 @@ EventAdditionalTourSteps.include({
                 content: Markup(_t("Use this <b>shortcut</b> to easily access your event web page.")),
                 position: 'bottom',
             }, {
-                trigger: 'li#edit-page-menu a',
-                extra_trigger: '.o_wevent_event',
+                trigger: '.o_edit_website_container a',
+                extra_trigger: 'iframe .o_wevent_event',
                 content: Markup(_t("With the Edit button, you can <b>customize</b> the web page visitors will see when registering.")),
                 position: 'bottom',
             }, {
-                trigger: 'div[name="Image - Text"] .oe_snippet_thumbnail',
-                extra_trigger: '.o_wevent_event',
+                trigger: '#oe_snippets.o_loaded div[name="Image - Text"] .oe_snippet_thumbnail',
+                extra_trigger: 'iframe .o_wevent_event',
                 content: Markup(_t("<b>Drag and Drop</b> this snippet below the event title.")),
                 position: 'bottom',
-                run: 'drag_and_drop #o_wevent_event_main_col',
+                run: 'drag_and_drop iframe #o_wevent_event_main_col',
             }, {
                 trigger: 'button[data-action="save"]',
-                extra_trigger: '.o_wevent_event',
+                extra_trigger: 'iframe .o_wevent_event',
                 content: Markup(_t("Don't forget to click <b>save</b> when you're done.")),
                 position: 'bottom',
             }, {
-                trigger: 'label.js_publish_btn',
-                extra_trigger: '.o_wevent_event',
+                trigger: '.o_menu_systray_item .o_switch_danger_success',
+                extra_trigger: 'iframe body:not(.editor_enable) .o_wevent_event',
                 content: Markup(_t("Looking great! Let's now <b>publish</b> this page so that it becomes <b>visible</b> on your website!")),
                 position: 'bottom',
             }, {
-                trigger: 'a.css_edit_dynamic',
-                extra_trigger: '.js_publish_management[data-object="event.event"] .js_publish_btn .css_unpublish:visible',
+                trigger: '.o_menu_systray_item.o_website_edit_in_backend .dropdown-toggle',
                 content: _t("Want to change your event configuration? Let's go back to the event form."),
                 position: 'bottom',
-                run: function (actions) {
-                    actions.click('div.dropdown-menu a#edit-in-backend');
-                },
             }, {
-                trigger: 'a#edit-in-backend',
-                extra_trigger: '.o_wevent_event',
+                trigger: '.o_menu_systray_item.o_website_edit_in_backend .dropdown-menu .dropdown-item',
+                extra_trigger: 'iframe .o_wevent_event',
                 content: _t("This shortcut will bring you right back to the event form."),
                 position: 'bottom'
             }];
diff --git a/addons/website_event/static/tests/tours/website_event.js b/addons/website_event/static/tests/tours/website_event.js
index 09c6a040fea..40b9463cfc0 100644
--- a/addons/website_event/static/tests/tours/website_event.js
+++ b/addons/website_event/static/tests/tours/website_event.js
@@ -3,37 +3,51 @@ odoo.define("website_event.tour", function (require) {
 
     const {_t} = require("web.core");
     const {Markup} = require('web.utils');
-    var tour = require("web_tour.tour");
-    var time = require('web.time');
+    const time = require('web.time');
+    const wTourUtils = require('website.tour_utils');
 
-    tour.register("website_event_tour", {
+
+    wTourUtils.registerEditionTour("website_event_tour", {
         test: true,
         url: "/",
     }, [{
         content: _t("Click here to add new content to your website."),
-        trigger: "body:has(#o_new_content_menu_choices.o_hidden) #new-content-menu > a",
+        extra_trigger: 'iframe #wrapwrap',
+        trigger: ".o_menu_systray .o_new_content_container > a",
         consumeVisibleOnly: true,
         position: 'bottom',
     }, {
-        trigger: "a[data-action=new_event]",
+        trigger: "a[data-module-xml-id='base.module_website_event']",
         content: _t("Click here to create a new event."),
         position: "bottom",
     }, {
-        trigger: '.modal-dialog #editor_new_event input[name=name]',
+        trigger: '.modal-dialog input[name=name]',
         content: Markup(_t("Create a name for your new event and click <em>\"Continue\"</em>. e.g: Technical Training")),
         run: 'text Technical Training',
         position: "left",
     }, {
-        trigger: '.modal-dialog #editor_new_event input[name=event_start_end]',
+        content: _t("Open date range picker."),
+        trigger: '.modal-dialog input[name=date_begin]',
+    }, {
+        trigger: '.modal-dialog input[name=date_begin]',
+        extra_trigger: '.daterangepicker',
         content: _t("Pick a Start date for your event"),
-        run: 'text ' + moment().format(time.getLangDatetimeFormat()) + ' - ' + moment().add(1, "d").format(time.getLangDatetimeFormat()),
+        run: function () {
+            const daterangepicker = this.$anchor.data('daterangepicker');
+            daterangepicker.setStartDate(moment().format(time.getLangDatetimeFormat()));
+            daterangepicker.setEndDate(moment().add(1, "d").format(time.getLangDatetimeFormat()));
+        }
+    }, {
+        content: _t("Apply change."),
+        trigger: '.daterangepicker:first .applyBtn',
+        in_modal: false,
     }, {
         trigger: '.modal-footer button.btn-primary',
-        extra_trigger: '#editor_new_event input[type=text][value!=""]',
+        extra_trigger: '.modal-dialog input[type=text][value!=""]',
         content: Markup(_t("Click <em>Continue</em> to create the event.")),
         position: "right",
     }, {
-        trigger: "#snippet_structure .oe_snippet:eq(2) .oe_snippet_thumbnail",
+        trigger: "#oe_snippets.o_loaded #snippet_structure .oe_snippet:eq(2) .oe_snippet_thumbnail",
         content: _t("Drag this block and drop it in your page."),
         position: "bottom",
         run: "drag_and_drop",
@@ -41,15 +55,14 @@ odoo.define("website_event.tour", function (require) {
         trigger: "button[data-action=save]",
         content: _t("Once you click on save, your event is updated."),
         position: "bottom",
-        extra_trigger: ".o_dirty",
+        extra_trigger: "iframe .o_dirty",
     }, {
-        trigger: ".js_publish_management .js_publish_btn",
-        extra_trigger: "body:not(.editor_enable)",
+        trigger: ".o_menu_systray_item .o_switch_danger_success",
+        extra_trigger: "iframe body:not(.editor_enable)",
         content: _t("Click to publish your event."),
         position: "top",
     }, {
-        trigger: ".css_edit_dynamic",
-        extra_trigger: ".js_publish_management .js_publish_btn .css_unpublish:visible",
+        trigger: ".o_menu_systray_item.o_website_edit_in_backend",
         content: _t("Click here to customize your event further."),
         position: "bottom",
     }]);
diff --git a/addons/website_event/tests/test_website_event.py b/addons/website_event/tests/test_website_event.py
index 1876695e377..c0417d41003 100644
--- a/addons/website_event/tests/test_website_event.py
+++ b/addons/website_event/tests/test_website_event.py
@@ -15,7 +15,7 @@ from odoo.tools import mute_logger
 class TestUi(HttpCaseWithUserDemo):
 
     def test_website_event_tour_admin(self):
-        self.start_tour("/", 'website_event_tour', login='admin', step_delay=100)
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'website_event_tour', login='admin', step_delay=100)
 
 
 @tagged('-at_install', 'post_install')
diff --git a/addons/website_forum/__manifest__.py b/addons/website_forum/__manifest__.py
index a27002b44e2..68f93d0e1c9 100644
--- a/addons/website_forum/__manifest__.py
+++ b/addons/website_forum/__manifest__.py
@@ -42,12 +42,14 @@ Ask questions, get answers, no distractions
     'application': True,
     'assets': {
         'website.assets_editor': [
-            'website_forum/static/src/js/tours/website_forum.js',
             'website_forum/static/src/js/systray_items/*.js',
         ],
         'web.assets_tests': [
             'website_forum/static/tests/**/*',
         ],
+        'web.assets_common': [
+            'website_forum/static/src/js/tours/website_forum.js',
+        ],
         'web.assets_frontend': [
             'website_forum/static/src/scss/website_forum.scss',
             'website_forum/static/src/js/website_forum.js',
diff --git a/addons/website_forum/static/src/js/tours/website_forum.js b/addons/website_forum/static/src/js/tours/website_forum.js
index 1db7a3633c5..8aeaabe6014 100644
--- a/addons/website_forum/static/src/js/tours/website_forum.js
+++ b/addons/website_forum/static/src/js/tours/website_forum.js
@@ -2,12 +2,13 @@ odoo.define("website_forum.tour_forum", function (require) {
     "use strict";
 
     var core = require("web.core");
-    var tour = require("web_tour.tour");
+    const wTourUtils = require('website.tour_utils');
 
     var _t = core._t;
 
-    tour.register("question", {
-        url: "/forum/1",
+    wTourUtils.registerBackendAndFrontend("question", {
+        // url: wTourUtils.getClientActionUrl('/forum/1'),
+        url: '/forum/1',
     }, [{
         trigger: ".o_forum_ask_btn",
         position: "left",
diff --git a/addons/website_hr_recruitment/static/tests/tours/website_hr_recruitment.js b/addons/website_hr_recruitment/static/tests/tours/website_hr_recruitment.js
index e92dbf399c4..ec163353695 100644
--- a/addons/website_hr_recruitment/static/tests/tours/website_hr_recruitment.js
+++ b/addons/website_hr_recruitment/static/tests/tours/website_hr_recruitment.js
@@ -2,6 +2,8 @@ odoo.define('website_hr_recruitment.tour', function(require) {
     'use strict';
 
     var tour = require("web_tour.tour");
+    const wTourUtils = require("website.tour_utils");
+
     function applyForAJob(jobName, application) {
         return [{
             content: "Select Job",
@@ -59,32 +61,32 @@ odoo.define('website_hr_recruitment.tour', function(require) {
         }),
     ]);
 
-    tour.register('website_hr_recruitment_tour_edit_form', {
+    wTourUtils.registerEditionTour('website_hr_recruitment_tour_edit_form', {
         test: true,
         url: '/jobs',
     }, [{
         content: 'Go to the Guru job page',
-        trigger: 'a[href*="guru"]',
+        trigger: 'iframe a[href*="guru"]',
     }, {
         content: 'Go to the Guru job form',
-        trigger: 'a[href*="apply"]',
+        trigger: 'iframe a[href*="apply"]',
     }, {
         content: 'Check if the Guru form is present',
-        trigger: 'form'
+        trigger: 'iframe form'
     }, {
         content: 'Enter in edit mode',
-        trigger: 'a[data-action="edit"]',
+        trigger: '.o_edit_website_container > a',
     }, {
         content: 'Add a fake default value for the job_id field',
-        trigger: 'button[data-action="save"]',
+        trigger: '#oe_snippets.o_loaded',
         run: () => {
             // It must be done in this way because the editor does not allow to
             // put a default value on a field with type="hidden".
-            document.querySelector('input[name="job_id"]').value = 'FAKE_JOB_ID_DEFAULT_VAL';
+            document.querySelector('.o_iframe:not(.o_ignore_in_tour)').contentDocument.querySelector('input[name="job_id"]').value = 'FAKE_JOB_ID_DEFAULT_VAL';
         },
     }, {
         content: 'Edit the form',
-        trigger: 'input[type="file"]',
+        trigger: 'iframe input[type="file"]',
         extra_trigger: '#oe_snippets.o_loaded',
     }, {
         content: 'Add a new field',
@@ -94,34 +96,34 @@ odoo.define('website_hr_recruitment.tour', function(require) {
         trigger: 'button[data-action="save"]',
     }, {
         content: 'Go back to /jobs page after save',
-        trigger: 'a[data-action="edit"]',
+        trigger: 'iframe body:not(.editor_enable)',
         run: () => {
-            window.location.href = '/jobs';
+            window.location.href = wTourUtils.getClientActionUrl('/jobs');
         }
     }, {
         content: 'Go to the Internship job page',
-        trigger: 'a[href*="internship"]',
+        trigger: 'iframe a[href*="internship"]',
     }, {
         content: 'Go to the Internship job form',
-        trigger: 'a[href*="apply"]',
+        trigger: 'iframe a[href*="apply"]',
     }, {
         content: 'Check that a job_id has been loaded',
-        trigger: 'form',
+        trigger: 'iframe form',
         run: () => {
             const selector =
                 'input[name="job_id"]:not([value=""]):not([value = "FAKE_JOB_ID_DEFAULT_VAL"])';
-            if (!document.querySelector(selector)) {
+            if (!document.querySelector('.o_iframe:not(.o_ignore_in_tour)').contentDocument.querySelector(selector)) {
                 console.error('The job_id field has a wrong value');
             }
         }
     }, {
         content: 'Enter in edit mode',
-        trigger: 'a[data-action="edit"]',
+        trigger: '.o_edit_website_container > a',
     }, {
         content: 'Verify that the job_id field has kept its default value',
-        trigger: 'button[data-action="save"]',
+        trigger: '#oe_snippets.o_loaded',
         run: () => {
-            if (!document.querySelector('input[name="job_id"][value="FAKE_JOB_ID_DEFAULT_VAL"]')) {
+            if (!document.querySelector('.o_iframe:not(.o_ignore_in_tour)').contentDocument.querySelector('input[name="job_id"][value="FAKE_JOB_ID_DEFAULT_VAL"]')) {
                 console.error('The job_id field has lost its default value');
             }
         }
diff --git a/addons/website_hr_recruitment/tests/test_website_hr_recruitment.py b/addons/website_hr_recruitment/tests/test_website_hr_recruitment.py
index ad37dcfd505..0e188fe2adc 100644
--- a/addons/website_hr_recruitment/tests/test_website_hr_recruitment.py
+++ b/addons/website_hr_recruitment/tests/test_website_hr_recruitment.py
@@ -16,7 +16,7 @@ class TestWebsiteHrRecruitmentForm(odoo.tests.HttpCase):
             'name': 'Internship',
             'is_published': True,
         })
-        self.start_tour('/', 'website_hr_recruitment_tour_edit_form', login='admin')
+        self.start_tour(self.env['website'].get_client_action_url('/jobs'), 'website_hr_recruitment_tour_edit_form', login='admin')
 
         with odoo.tests.RecordCapturer(self.env['hr.applicant'], []) as capt:
             self.start_tour("/", 'website_hr_recruitment_tour')
diff --git a/addons/website_mass_mailing/static/tests/tours/newsletter_block.js b/addons/website_mass_mailing/static/tests/tours/newsletter_block.js
index 09e8482bf64..4cb921e6e8d 100644
--- a/addons/website_mass_mailing/static/tests/tours/newsletter_block.js
+++ b/addons/website_mass_mailing/static/tests/tours/newsletter_block.js
@@ -1,11 +1,11 @@
 /** @odoo-module */
 
-import tour from 'web_tour.tour';
 import wTourUtils from 'website.tour_utils';
 
-tour.register('newsletter_block_edition', {
+wTourUtils.registerEditionTour('newsletter_block_edition', {
     test: true,
-    url: '/?enable_editor=1',
+    url: '/',
+    edition: true,
 }, [
     // Put a Newsletter block.
     wTourUtils.dragNDrop({
@@ -14,24 +14,21 @@ tour.register('newsletter_block_edition', {
     }),
     {
         content: 'Wait for the list id to be set.',
-        trigger: '.s_newsletter_subscribe_form[data-list-id]:not([data-list-id="0"])',
+        trigger: 'iframe .s_newsletter_subscribe_form[data-list-id]:not([data-list-id="0"])',
+        run: () => null, // it's a check
     },
     ...wTourUtils.clickOnSave(),
     // Subscribe to the newsletter.
     {
         content: 'Wait for the email to be loaded in the newsletter input',
-        trigger: '.s_newsletter_block .js_subscribe_btn',
-        extra_trigger: '.s_newsletter_block input:propValue(admin@yourcompany.example.com)',
+        trigger: 'iframe .s_newsletter_block .js_subscribe_btn',
+        extra_trigger: 'iframe .s_newsletter_block input:propValue(admin@yourcompany.example.com)',
     },
     // Change the link style.
     wTourUtils.clickOnEdit(),
-    {
-        content: 'Wait for the editor to be fully started',
-        trigger: '#oe_snippets.o_loaded',
-    },
     {
         content: 'Click on the Subscribe button',
-        trigger: '.s_newsletter_block .js_subscribe_btn',
+        trigger: 'iframe .s_newsletter_block .js_subscribe_btn',
     },
     {
         content: 'Toggle the option to display the Thanks button',
@@ -39,7 +36,7 @@ tour.register('newsletter_block_edition', {
     },
     {
         content: 'Click on the Thanks button',
-        trigger: '.s_newsletter_block .js_subscribed_btn',
+        trigger: 'iframe .s_newsletter_block .js_subscribed_btn',
     },
     {
         content: 'Click on the link style button',
@@ -63,6 +60,6 @@ tour.register('newsletter_block_edition', {
     // prevent to edit the button).
     {
         content: 'Check that the link style is correct',
-        trigger: '.s_newsletter_block .js_subscribed_btn.btn.btn-primary.flat:not(.btn-success)',
+        trigger: 'iframe .s_newsletter_block .js_subscribed_btn.btn.btn-primary.flat:not(.btn-success)',
     },
 ]);
diff --git a/addons/website_mass_mailing/static/tests/tours/newsletter_popup.js b/addons/website_mass_mailing/static/tests/tours/newsletter_popup.js
index 10663c1e53a..fca661ba188 100644
--- a/addons/website_mass_mailing/static/tests/tours/newsletter_popup.js
+++ b/addons/website_mass_mailing/static/tests/tours/newsletter_popup.js
@@ -14,15 +14,15 @@ tour.register('newsletter_popup_edition', {
     }),
     {
         content: "Check the modal is opened for edition",
-        trigger: '.o_newsletter_popup .modal:visible',
+        trigger: 'iframe .o_newsletter_popup .modal:visible',
         in_modal: false,
         run: () => null,
     },
     ...wTourUtils.clickOnSave(),
     {
         content: "Check the modal has been saved, closed",
-        trigger: '.o_newsletter_popup',
-        extra_trigger: 'body:not(.editor_enable)',
+        trigger: 'iframe .o_newsletter_popup',
+        extra_trigger: 'iframe body:not(.editor_enable)',
         run: function (actions) {
             const $modal = this.$anchor.find('.modal');
             if ($modal.is(':visible')) {
diff --git a/addons/website_mass_mailing/tests/test_snippets.py b/addons/website_mass_mailing/tests/test_snippets.py
index c5695c03e50..62be2986397 100644
--- a/addons/website_mass_mailing/tests/test_snippets.py
+++ b/addons/website_mass_mailing/tests/test_snippets.py
@@ -16,4 +16,4 @@ class TestSnippets(odoo.tests.HttpCase):
         self.assertIn("hello@world.com", emails)
 
     def test_02_newsletter_block_edition(self):
-        self.start_tour("/?enable_editor=1", "newsletter_block_edition", login='admin')
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'newsletter_block_edition', login='admin')
diff --git a/addons/website_sale/__manifest__.py b/addons/website_sale/__manifest__.py
index 54e4c995aad..079fe180a4f 100644
--- a/addons/website_sale/__manifest__.py
+++ b/addons/website_sale/__manifest__.py
@@ -66,7 +66,7 @@
             'website_sale/static/src/js/website_sale_backend.js',
             'website_sale/static/src/scss/website_sale_dashboard.scss',
             'website_sale/static/src/scss/website_sale_backend.scss',
-            'website_sale/static/src/js/tours/website_sale_shop_backend.js',
+            'website_sale/static/src/js/tours/website_sale_shop.js',
         ],
         'website.assets_wysiwyg': [
             'website_sale/static/src/scss/website_sale.editor.scss',
@@ -76,11 +76,9 @@
         'website.assets_editor': [
             'website_sale/static/src/js/systray_items/*.js',
             'website_sale/static/src/js/website_sale_form_editor.js',
-            'website_sale/static/src/js/tours/website_sale_shop_frontend.js',
         ],
         'web.assets_common': [
             'website_sale/static/src/js/tours/tour_utils.js',
-            'website_sale/static/src/js/tours/website_sale_shop.js',
         ],
         'web.assets_tests': [
             'website_sale/static/tests/**/*',
diff --git a/addons/website_sale/static/src/js/tours/website_sale_shop.js b/addons/website_sale/static/src/js/tours/website_sale_shop.js
index 1c2b0637f15..36cddb5cb40 100644
--- a/addons/website_sale/static/src/js/tours/website_sale_shop.js
+++ b/addons/website_sale/static/src/js/tours/website_sale_shop.js
@@ -3,36 +3,39 @@ odoo.define("website_sale.tour_shop", function (require) {
 
     const {_t} = require("web.core");
     const {Markup} = require('web.utils');
+    const wTourUtils = require("website.tour_utils");
 
-    // return the steps, used for backend and frontend
-
-    return [{
-        trigger: "body:has(#o_new_content_menu_choices.o_hidden) #new-content-menu > a",
+    wTourUtils.registerEditionTour("shop", {
+        url: '/shop',
+        sequence: 130,
+    }, [{
+        trigger: ".o_menu_systray .o_new_content_container > a",
         content: _t("Let's create your first product."),
-        extra_trigger: ".js_sale",
+        extra_trigger: "iframe .js_sale",
         consumeVisibleOnly: true,
         position: "bottom",
     }, {
-        trigger: "a[data-action=new_product]",
+        trigger: "a[data-module-xml-id='base.module_website_sale']",
         content: Markup(_t("Select <b>New Product</b> to create it and manage its properties to boost your sales.")),
         position: "bottom",
     }, {
-        trigger: ".modal-dialog #editor_new_product input[type=text]",
+        trigger: ".modal-dialog input[type=text]",
         content: _t("Enter a name for your new product"),
         position: "left",
     }, {
-        trigger: ".modal-footer button.btn-primary.btn-continue",
-        content: Markup(_t("Click on <em>Continue</em> to create the product.")),
+        trigger: ".modal-footer button.btn-primary",
+        content: Markup(_t("Click on <em>Save</em> to create the product.")),
         position: "right",
     }, {
-        trigger: ".product_price .oe_currency_value:visible",
-        extra_trigger: ".editor_enable",
+        trigger: "iframe .product_price .oe_currency_value:visible",
+        extra_trigger: "#oe_snippets.o_loaded",
         content: _t("Edit the price of this product by clicking on the amount."),
         position: "bottom",
         run: "text 1.99",
+        timeout: 30000,
     }, {
-        trigger: "#wrap img.product_detail_img",
-        extra_trigger: ".product_price .o_dirty .oe_currency_value:not(:containsExact(1.00))",
+        trigger: "iframe #wrap img.product_detail_img",
+        extra_trigger: "iframe .product_price .o_dirty .oe_currency_value:not(:containsExact(1.00))",
         content: _t("Double click here to set an image describing your product."),
         position: "top",
         run: function (actions) {
@@ -60,19 +63,18 @@ odoo.define("website_sale.tour_shop", function (require) {
         content: Markup(_t("Once you click on <b>Save</b>, your product is updated.")),
         position: "bottom",
     }, {
-        trigger: ".js_publish_management .js_publish_btn .css_publish",
-        extra_trigger: "body:not(.editor_enable)",
+        trigger: ".o_menu_systray_item .o_switch_danger_success",
+        extra_trigger: "iframe body:not(.editor_enable)",
         content: _t("Click on this button so your customers can see it."),
         position: "bottom",
     }, {
-        trigger: ".o_main_navbar .o_menu_toggle, #oe_applications .dropdown-toggle",
-        content: _t("Let's now take a look at your administration dashboard to get your eCommerce website ready in no time."),
+        trigger: "button[data-menu-xmlid='website.menu_reporting']",
+        content: _t("Click here to open the reporting menu"),
         position: "bottom",
-    }, { // backend
-        trigger: '.o_apps > a[data-menu-xmlid="website.menu_website_configuration"], #oe_main_menu_navbar a[data-menu-xmlid="website.menu_website_configuration"]',
-        content: _t("Open your website app here."),
-        extra_trigger: ".o_apps,#oe_applications",
+    }, {
+        trigger: "a[data-menu-xmlid='website.menu_website_dashboard'], a[data-menu-xmlid='website.menu_website_google_analytics']",
+        content: _t("Let's now take a look at your eCommerce dashboard to get your eCommerce website ready in no time."),
         position: "bottom",
-        timeout: 30000, // ~ 10 secondes to be redirected, due to slow assets generation
-    }];
+        run: "click",
+    }]);
 });
diff --git a/addons/website_sale/static/src/js/tours/website_sale_shop_backend.js b/addons/website_sale/static/src/js/tours/website_sale_shop_backend.js
deleted file mode 100644
index ab6058520e7..00000000000
--- a/addons/website_sale/static/src/js/tours/website_sale_shop_backend.js
+++ /dev/null
@@ -1,8 +0,0 @@
-odoo.define("website_sale.tour_shop_backend", function (require) {
-"use strict";
-
-var tour = require("web_tour.tour");
-var steps = require("website_sale.tour_shop");
-tour.register("shop", {url: "/shop"}, steps);
-
-});
diff --git a/addons/website_sale/static/src/js/tours/website_sale_shop_frontend.js b/addons/website_sale/static/src/js/tours/website_sale_shop_frontend.js
deleted file mode 100644
index afefddef778..00000000000
--- a/addons/website_sale/static/src/js/tours/website_sale_shop_frontend.js
+++ /dev/null
@@ -1,11 +0,0 @@
-odoo.define("website_sale.tour_shop_frontend", function (require) {
-"use strict";
-
-var tour = require("web_tour.tour");
-var steps = require("website_sale.tour_shop");
-tour.register("shop", {
-    url: "/shop",
-    sequence: 130,
-}, steps);
-
-});
diff --git a/addons/website_sale/static/tests/tours/website_sale_complete_flow.js b/addons/website_sale/static/tests/tours/website_sale_complete_flow.js
index 647965b83a9..799874ce88c 100644
--- a/addons/website_sale/static/tests/tours/website_sale_complete_flow.js
+++ b/addons/website_sale/static/tests/tours/website_sale_complete_flow.js
@@ -5,7 +5,7 @@ odoo.define('website_sale_tour.tour', function (require) {
     var rpc = require("web.rpc");
     const tourUtils = require('website_sale.tour_utils');
 
-    tour.register('website_sale_tour', {
+    tour.register('website_sale_tour_1', {
         test: true,
         url: '/shop?search=Storage Box Test',
     }, [
@@ -179,7 +179,7 @@ odoo.define('website_sale_tour.tour', function (require) {
     },
     {
         content: "Configuration Settings for 'Tax Included' and sign up 'On Invitation'",
-        extra_trigger: '.o_connected_user #wrapwrap',
+        extra_trigger: '.o_frontend_to_backend_nav', // Check if the user is connected
         trigger: '#wrapwrap',
         run: function () {
             var def1 = rpc.query({
@@ -322,15 +322,12 @@ odoo.define('website_sale_tour.tour', function (require) {
             $('.oe_login_form input[name="redirect"]').val("/shop/cart");
             $('.oe_login_form').submit();
         },
-    },
-    {
-        content: "Open Customize menu",
-        trigger: '.o_menu_sections a:contains("Customize")',
-    },
-    {
-        content: "Enable Extra step",
-        trigger: 'label.dropdown-item:contains("Extra Step Option")',
-    },
+    }]);
+
+    tour.register('website_sale_tour_2', {
+        test: true,
+        url: '/shop/cart',
+    }, [
     {
         content: "Open Dropdown for logout",
         extra_trigger: '.progress-wizard-step:contains("Extra Info")',
diff --git a/addons/website_sale/static/tests/tours/website_sale_complete_flow_backend.js b/addons/website_sale/static/tests/tours/website_sale_complete_flow_backend.js
new file mode 100644
index 00000000000..fe3c7b8980e
--- /dev/null
+++ b/addons/website_sale/static/tests/tours/website_sale_complete_flow_backend.js
@@ -0,0 +1,22 @@
+/** @odoo-module **/
+
+import wTourUtils from 'website.tour_utils';
+
+wTourUtils.registerEditionTour('website_sale_tour_backend', {
+    test: true,
+    url: '/shop/cart',
+    edition: true,
+}, [
+        {
+            content: "open customize tab",
+            extra_trigger: '#oe_snippets.o_loaded',
+            trigger: '.o_we_customize_snippet_btn',
+        },
+        {
+            content: "Enable Extra step",
+            extra_trigger: '#oe_snippets .o_we_customize_panel',
+            trigger: '[data-customize-website-views="website_sale.extra_info_option"] we-checkbox',
+        },
+        ...wTourUtils.clickOnSave(),
+    ],
+);
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_customize.js b/addons/website_sale/static/tests/tours/website_sale_shop_customize.js
index a556518e8e5..9f608fa50d9 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_customize.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_customize.js
@@ -1,11 +1,12 @@
 /** @odoo-module **/
 
-import tour from 'web_tour.tour';
 import tourUtils from 'website_sale.tour_utils';
+import wTourUtils from 'website.tour_utils';
 
-tour.register('shop_customize', {
+wTourUtils.registerEditionTour('shop_customize', {
+    url: '/shop',
+    edition: true,
     test: true,
-    url: '/shop?enable_editor=1',
 },
     [
         {
@@ -18,22 +19,10 @@ tour.register('shop_customize', {
             extra_trigger: '#oe_snippets .o_we_customize_panel',
             trigger: 'we-button[data-name="attributes_opt"]',
         },
-        {
-            content: "check that the iframe is reloading",
-            trigger: '.o_loading_dummy',
-            run: () => {}, // It's a check.
-        },
-        {
-            content: "click on save button after the reload",
-            trigger: 'div:not(.o_loading_dummy) > #oe_snippets button[data-action="save"]',
-            run: 'click',
-        },
-        {
-            content: "wait to exit edit mode",
-            trigger: '.o_website_editor:not(.editor_has_snippets)',
-        },
+        ...wTourUtils.clickOnSave(),
         {
             content: "select product attribute Steel",
+            extra_trigger: "iframe body:not(.editor_enable)",
             trigger: 'iframe form.js_attributes input:not(:checked) + label:contains(Steel - Test)',
         },
         {
@@ -46,13 +35,9 @@ tour.register('shop_customize', {
             extra_trigger: 'iframe body:not(:has(.oe_website_sale .oe_product_cart:eq(3)))',
             trigger: 'iframe .oe_product_cart a:contains("Test Product")',
         },
-        {
-            content: "wait the product page to be loaded",
-            trigger: 'iframe #product_detail',
-            run: function () {},
-        },
         {
             content: "check list view of variants is disabled initially",
+            extra_trigger: "iframe #product_detail",
             trigger: 'iframe body:not(:has(.js_product_change))',
             run: function () {},
         },
@@ -74,22 +59,10 @@ tour.register('shop_customize', {
             content: "click on 'Products List' of the 'Variants' selector",
             trigger: 'we-button[data-name="variants_products_list_opt"]',
         },
-        {
-            content: "check that the iframe is reloading",
-            trigger: '.o_loading_dummy',
-            run: () => {}, // It's a check.
-        },
-        {
-            content: "click on save button after the reload",
-            trigger: 'div:not(.o_loading_dummy) > #oe_snippets button[data-action="save"]',
-            run: 'click',
-        },
-        {
-            content: "wait to exit edit mode",
-            trigger: '.o_website_editor:not(.editor_has_snippets)',
-        },
+        ...wTourUtils.clickOnSave(),
         {
             context: "check variant price",
+            extra_trigger: "iframe body:not(.editor_enable)",
             trigger: 'iframe .custom-radio:contains("Aluminium") .badge:contains("+") .oe_currency_value:contains("50.4")',
             run: function () {},
         },
@@ -125,22 +98,10 @@ tour.register('shop_customize', {
             content: "click on 'Options' of the 'Variants' selector",
             trigger: 'we-button[data-name="variants_options_opt"]',
         },
-        {
-            content: "check that the iframe is reloading",
-            trigger: '.o_loading_dummy',
-            run: () => {}, // It's a check.
-        },
-        {
-            content: "click on save button after the reload",
-            trigger: 'div:not(.o_loading_dummy) > #oe_snippets button[data-action="save"]',
-            run: 'click',
-        },
-        {
-            content: "wait to exit edit mode",
-            trigger: '.o_website_editor:not(.editor_has_snippets)',
-        },
+        ...wTourUtils.clickOnSave(),
         {
             content: "check page loaded after list of variant customization disabled",
+            extra_trigger: "iframe body:not(.editor_enable)",
             trigger: "iframe .js_product:not(:has(.js_product_change))",
             run: function () {}, // it's a check
         },
@@ -196,19 +157,10 @@ tour.register('shop_customize', {
             extra_trigger: '#oe_snippets .o_we_customize_panel',
             trigger: 'we-button[data-name="attributes_opt"]',
         },
-        {
-            content: "check that the iframe is reloading",
-            trigger: '.o_loading_dummy',
-            run: () => {}, // It's a check.
-        },
-        {
-            content: "click on save button after the reload",
-            trigger: 'div:not(.o_loading_dummy) > #oe_snippets button[data-action="save"]',
-            run: 'click',
-        },
+        ...wTourUtils.clickOnSave(),
         {
             content: "wait to exit edit mode",
-            trigger: '.o_website_editor:not(.editor_has_snippets)',
+            trigger: '.o_website_preview:not(.editor_has_snippets)',
         },
         {
             content: "finish",
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_editor_tour.js b/addons/website_sale/static/tests/tours/website_sale_shop_editor_tour.js
index 3e2b3691239..fc52b4254d3 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_editor_tour.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_editor_tour.js
@@ -7,13 +7,13 @@ tour.register('shop_editor', {
     url: '/shop?enable_editor=1',
 }, [{
     content: "Click on pricelist dropdown",
-    trigger: "div.o_pricelist_dropdown a[data-toggle=dropdown]",
+    trigger: "iframe div.o_pricelist_dropdown a[data-toggle=dropdown]",
 }, {
-    trigger: "input[name=search]",
-    extra_trigger: "div.o_pricelist_dropdown a[data-toggle=dropdown][aria-expanded=true]",
+    trigger: "iframe input[name=search]",
+    extra_trigger: "iframe div.o_pricelist_dropdown a[data-toggle=dropdown][aria-expanded=true]",
     content: "Click somewhere else in the shop.",
 }, {
-    trigger: "div.o_pricelist_dropdown a[data-toggle=dropdown]",
-    extra_trigger: "div.o_pricelist_dropdown a[data-toggle=dropdown][aria-expanded=false]",
+    trigger: "iframe div.o_pricelist_dropdown a[data-toggle=dropdown]",
+    extra_trigger: "iframe div.o_pricelist_dropdown a[data-toggle=dropdown][aria-expanded=false]",
     content: "Click on the pricelist again.",
 }]);
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_list_view_b2c.js b/addons/website_sale/static/tests/tours/website_sale_shop_list_view_b2c.js
index a798aef7dfe..2370b666016 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_list_view_b2c.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_list_view_b2c.js
@@ -1,31 +1,31 @@
 /** @odoo-module **/
 
-import tour from 'web_tour.tour';
 import tourUtils from 'website_sale.tour_utils';
+import wTourUtils from 'website.tour_utils';
 
-tour.register('shop_list_view_b2c', {
+wTourUtils.registerEditionTour('shop_list_view_b2c', {
     test: true,
     url: '/shop?search=Test Product',
 },
     [
         {
             content: "check price on /shop",
-            trigger: '.oe_product_cart .oe_currency_value:contains("825.00")',
+            trigger: 'iframe .oe_product_cart .oe_currency_value:contains("825.00")',
             run: () => {}, // It's a check.
         },
         {
             content: "select product",
-            trigger: '.oe_product_cart a:contains("Test Product")',
+            trigger: 'iframe .oe_product_cart a:contains("Test Product")',
         },
         {
             content: "check products list is disabled initially (when on /product page)",
-            trigger: 'body:not(:has(.js_product_change))',
-            extra_trigger: '#product_details',
+            trigger: 'iframe body:not(:has(.js_product_change))',
+            extra_trigger: 'iframe #product_details',
             run: () => {}, // It's a check.
         },
         {
             content: "go to edit mode",
-            trigger: 'a.o_frontend_to_backend_edit_btn',
+            trigger: '.o_edit_website_container > a',
         },
         {
             content: "open customize tab",
@@ -41,20 +41,7 @@ tour.register('shop_list_view_b2c', {
             content: "click on 'Products List' of the 'Variants' selector",
             trigger: 'we-button[data-name="variants_products_list_opt"]',
         },
-        {
-            content: "check that the iframe is reloading",
-            trigger: '.o_loading_dummy',
-            run: () => {}, // It's a check.
-        },
-        {
-            content: "click on save button after the reload",
-            trigger: 'div:not(.o_loading_dummy) > #oe_snippets button[data-action="save"]',
-            run: 'click',
-        },
-        {
-            content: "wait to exit edit mode",
-            trigger: '.o_website_editor:not(.editor_has_snippets)',
-        },
+        ...wTourUtils.clickOnSave(),
         {
             content: "check page loaded after 'Products List' enabled",
             trigger: 'iframe .js_product_change',
diff --git a/addons/website_sale/tests/test_customize.py b/addons/website_sale/tests/test_customize.py
index 13567b62078..8175e2774f7 100644
--- a/addons/website_sale/tests/test_customize.py
+++ b/addons/website_sale/tests/test_customize.py
@@ -57,7 +57,7 @@ class TestUi(HttpCaseWithUserDemo, HttpCaseWithUserPortal):
     def test_01_admin_shop_customize_tour(self):
         # Enable Variant Group
         self.env.ref('product.group_product_variant').write({'users': [(4, self.env.ref('base.user_admin').id)]})
-        self.start_tour("/", 'shop_customize', login="admin")
+        self.start_tour(self.env['website'].get_client_action_url('/shop?search=Test Product'), 'shop_customize', login="admin", timeout=120)
 
     def test_02_admin_shop_custom_attribute_value_tour(self):
         # Make sure pricelist rule exist
@@ -310,7 +310,7 @@ class TestUi(HttpCaseWithUserDemo, HttpCaseWithUserPortal):
         config.show_line_subtotals_tax_selection = "tax_included"
         config.execute()
 
-        self.start_tour("/", 'shop_list_view_b2c', login="admin")
+        self.start_tour(self.env['website'].get_client_action_url('/shop?search=Test Product'), 'shop_list_view_b2c', login="admin")
 
     def test_07_editor_shop(self):
         self.start_tour("/", 'shop_editor', login="admin")
diff --git a/addons/website_sale/tests/test_sale_process.py b/addons/website_sale/tests/test_sale_process.py
index 56de96f77e2..17ba040ad3a 100644
--- a/addons/website_sale/tests/test_sale_process.py
+++ b/addons/website_sale/tests/test_sale_process.py
@@ -64,7 +64,7 @@ class TestUi(HttpCaseWithUserDemo):
         })
 
     def test_01_admin_shop_tour(self):
-        self.start_tour("/", 'shop', login="admin")
+        self.start_tour(self.env['website'].get_client_action_url('/shop'), 'shop', login='admin')
 
     def test_02_admin_checkout(self):
         self.start_tour("/", 'shop_buy_product', login="admin")
@@ -97,7 +97,9 @@ class TestUi(HttpCaseWithUserDemo):
             'group_show_line_subtotals_tax_included': False,
         }).execute()
 
-        self.start_tour("/", 'website_sale_tour')
+        self.start_tour("/", 'website_sale_tour_1')
+        self.start_tour(self.env['website'].get_client_action_url('/shop/cart'), 'website_sale_tour_backend', login='admin')
+        self.start_tour("/", 'website_sale_tour_2', login="admin")
 
     def test_05_google_analytics_tracking(self):
         self.env['website'].browse(1).write({'google_analytics_key': 'G-XXXXXXXXXXX'})
diff --git a/addons/website_sale_loyalty/static/tests/tours/test_gift_card_tour.js b/addons/website_sale_loyalty/static/tests/tours/test_gift_card_tour.js
index a40c8908c9a..76caad223cc 100644
--- a/addons/website_sale_loyalty/static/tests/tours/test_gift_card_tour.js
+++ b/addons/website_sale_loyalty/static/tests/tours/test_gift_card_tour.js
@@ -19,12 +19,9 @@ tour.register('shop_sale_gift_card', {
             trigger: 'a:contains(ADD TO CART)',
         },
         tourUtils.goToCart(),
-        {
-            content: "wait the /cart page",
-            trigger: '#cart_products',
-        },
         {
             content: 'Click on "I have a promo code"',
+            extra_trigger: '#cart_products',
             trigger: '.show_coupon',
         },
         {
@@ -57,7 +54,7 @@ tour.register('shop_sale_gift_card', {
         {
             content: 'check gift card amount',
             trigger: '.oe_currency_value:contains("-45.00")',
-            extra_trigger: '.oe_website_sale .oe_cart',
+            trigger: '.oe_website_sale .oe_cart',
             run: function () {}, // it's a check
         },
         {
@@ -86,7 +83,7 @@ tour.register('shop_sale_gift_card', {
         {
             content: 'check gift card amount',
             trigger: '.oe_currency_value:contains("-45.00")',
-            extra_trigger: '.oe_website_sale .oe_cart',
+            trigger: '.oe_website_sale .oe_cart',
             run: function () {}, // it's a check
         },
     ],
diff --git a/addons/website_slides/__manifest__.py b/addons/website_slides/__manifest__.py
index 324288f5f04..b65b351b96b 100644
--- a/addons/website_slides/__manifest__.py
+++ b/addons/website_slides/__manifest__.py
@@ -71,6 +71,7 @@ Featuring
             'website_slides/static/src/js/slide_category_one2many.js',
             'website_slides/static/src/js/rating_field_backend.js',
             'website_slides/static/src/models/*.js',
+            'website_slides/static/src/js/components/**/*.js',
         ],
         'web.assets_frontend': [
             'website_slides/static/src/scss/website_slides.scss',
diff --git a/addons/website_slides/controllers/main.py b/addons/website_slides/controllers/main.py
index a1d0dcf2a2b..898b54b3f0e 100644
--- a/addons/website_slides/controllers/main.py
+++ b/addons/website_slides/controllers/main.py
@@ -1247,7 +1247,7 @@ class WebsiteSlides(WebsiteProfile):
 
         redirect_url = "/slides/slide/%s" % (slide.id)
         if slide.slide_category == 'article':
-            redirect_url += self.env["website"].get_client_action_url(redirect_url, True)
+            redirect_url = request.env["website"].get_client_action_url(redirect_url, True)
         elif slide.slide_category == 'quiz':
             redirect_url += "?quiz_quick_create"
         elif channel.channel_type == "training":
diff --git a/addons/website_slides/static/src/js/components/editor.js b/addons/website_slides/static/src/js/components/editor.js
new file mode 100644
index 00000000000..ec2a7541cd4
--- /dev/null
+++ b/addons/website_slides/static/src/js/components/editor.js
@@ -0,0 +1,19 @@
+/** @odoo-module **/
+
+import { WebsiteEditorComponent } from '@website/components/editor/editor';
+import { patch } from 'web.utils';
+
+patch(WebsiteEditorComponent.prototype, 'website_slides_editor', {
+    /**
+     * @override
+     */
+    publicRootReady() {
+        const { pathname, search } = this.websiteService.contentWindow.location;
+        if (pathname.includes('slides') && search.includes('fullscreen=1')) {
+            this.websiteContext.edition = false;
+            this.websiteService.goToWebsite({path: `${pathname}?fullscreen=0`, edition: true});
+        } else {
+            this._super(...arguments);
+        }
+    }
+});
diff --git a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
index 8707f6ae673..ef71a35d35a 100644
--- a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
+++ b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
@@ -772,32 +772,11 @@
         selector: '.o_wslides_fs_main',
         xmlDependencies: ['/website_slides/static/src/xml/website_slides_fullscreen.xml', '/website_slides/static/src/xml/website_slides_share.xml'],
         start: function (){
-            var self = this;
             var proms = [this._super.apply(this, arguments)];
             var fullscreen = new Fullscreen(this, this._getSlides(), this._getCurrentSlideID(), this._extractChannelData());
             proms.push(fullscreen.attachTo(".o_wslides_fs_main"));
-            return Promise.all(proms).then(function () {
-                $('#edit-page-menu a[data-action="edit"]').on('click', self._onWebEditorClick.bind(self));
-            });
+            return proms;
         },
-
-        /**
-         * The web editor does not work well with the e-learning fullscreen view.
-         * It actually completely closes the fullscreen view and opens the edition on a blank page.
-         *
-         * To avoid this, we intercept the click on the 'edit' button and redirect to the
-         * non-fullscreen view of this slide with the editor enabled, which is more suited to edit
-         * in-place anyway.
-         *
-         * @param {MouseEvent} e
-         */
-        _onWebEditorClick: function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            window.location = `${window.location.pathname}?fullscreen=0&enable_editor=1`;
-        },
-
         _extractChannelData: function (){
             return this.$el.data();
         },
diff --git a/addons/website_slides/static/src/js/systray_items/new_content.js b/addons/website_slides/static/src/js/systray_items/new_content.js
index 8b3159a0f3c..eaa590d81c3 100644
--- a/addons/website_slides/static/src/js/systray_items/new_content.js
+++ b/addons/website_slides/static/src/js/systray_items/new_content.js
@@ -11,6 +11,21 @@ patch(NewContentModal.prototype, 'website_slides_new_content', {
         newSlidesChannelElement.createNewContent = () => this.createNewSlidesChannel();
         newSlidesChannelElement.status = MODULE_STATUS.INSTALLED;
     },
+    /**
+     * @override
+     */
+    async onWillStart() {
+        await this._super(...arguments);
+        this.isSlideManager = await this.user.hasGroup('website_slides.group_website_slides_officer');
+        if (this.isSlideManager) {
+            this.state.newContentElements = this.state.newContentElements.map(element => {
+                if (element.moduleXmlId === 'base.module_website_slides') {
+                    element.isDisplayed = true;
+                }
+                return element;
+            });
+        }
+    },
 
     createNewSlidesChannel() {
         this.action.doAction('website_slides.slide_channel_action_add', {
diff --git a/addons/website_slides/static/tests/tours/slide_course_publisher_standard.js b/addons/website_slides/static/tests/tours/slide_course_publisher_standard.js
index b3a0b15de9d..e7642cabf5c 100644
--- a/addons/website_slides/static/tests/tours/slide_course_publisher_standard.js
+++ b/addons/website_slides/static/tests/tours/slide_course_publisher_standard.js
@@ -1,7 +1,7 @@
 /** @odoo-module **/
 
-import tour from 'web_tour.tour';
 import slidesTourTools from '@website_slides/../tests/tours/slides_tour_tools';
+import wTourUtils from 'website.tour_utils';
 
 /**
  * Global use case:
@@ -10,12 +10,12 @@ import slidesTourTools from '@website_slides/../tests/tours/slides_tour_tools';
  * they create some lessons in it;
  * they publish it;
  */
-tour.register('course_publisher_standard', {
+wTourUtils.registerEditionTour('course_publisher_standard', {
     url: '/slides',
-    test: true
+    test: true,
 }, [{
     content: 'eLearning: click on New (top-menu)',
-    trigger: '#new-content-menu > a'
+    trigger: 'div.o_new_content_container a'
 }, {
     content: 'eLearning: click on New Course',
     trigger: '#o_new_content_menu_choices a:contains("Course")'
@@ -25,28 +25,29 @@ tour.register('course_publisher_standard', {
     run: 'text How to Déboulonnate',
 }, {
     content: 'eLearning: click on tags',
-    trigger: 'ul.select2-choices:first',
+    trigger: '.o_field_many2manytags input',
+    run: 'text Gard',
 }, {
     content: 'eLearning: select gardener tag',
-    trigger: 'div.select2-result-label:contains("Gardener")',
+    trigger: '.ui-autocomplete a:contains("Gardener")',
     in_modal: false,
 }, {
     content: 'eLearning: set description',
-    trigger: 'textarea[name="description"]',
+    trigger: '.oe_form_field_html[name="description"]',
     run: 'text Déboulonnate is very common at Fleurus',
 }, {
     content: 'eLearning: we want reviews',
-    trigger: 'input[name="allow_comment"]',
+    trigger: '.o_field_boolean[name="allow_comment"] input',
 }, {
     content: 'eLearning: seems cool, create it',
-    trigger: 'button:contains("Create")',
+    trigger: 'button:contains("Save")',
 }, {
     content: 'eLearning: launch course edition',
-    trigger: 'div[id="edit-page-menu"] a',
+    trigger: '.o_edit_website_container a',
 }, {
     content: 'eLearning: double click image to edit it',
-    extra_trigger: 'body.editor_enable',
-    trigger: 'img.o_wslides_course_pict',
+    extra_trigger: 'iframe body.editor_enable',
+    trigger: 'iframe img.o_wslides_course_pict',
     run: 'dblclick',
 }, {
     content: 'eLearning: click "Add URL" to trigger URL box',
@@ -60,32 +61,33 @@ tour.register('course_publisher_standard', {
     trigger: '.o_upload_media_url_button',
 }, {
     content: 'eLearning: is the Corgi set ?',
-    trigger: 'img.o_wslides_course_pict',
+    trigger: 'iframe img.o_wslides_course_pict',
     run: function () {
-        if ($('img.o_wslides_course_pict').attr('src').endsWith('GoldWinnerPembrookeWelshCorgi.jpg')) {
-            $('img.o_wslides_course_pict').addClass('o_wslides_tour_success');
+        const $imgCorgi = $('.o_website_preview iframe').contents().find('img.o_wslides_course_pict');
+        if ($imgCorgi.attr('src').endsWith('GoldWinnerPembrookeWelshCorgi.jpg')) {
+            $imgCorgi.addClass('o_wslides_tour_success');
         }
     },
 }, {
     content: 'eLearning: the Corgi is set !',
-    trigger: 'img.o_wslides_course_pict.o_wslides_tour_success',
+    trigger: 'iframe img.o_wslides_course_pict.o_wslides_tour_success',
 }, {
     content: 'eLearning: save course edition',
     trigger: 'button[data-action="save"]',
 }, {
     content: 'eLearning: course create with current member',
-    extra_trigger: 'body:not(.editor_enable)',  // wait for editor to close
-    trigger: '.o_wslides_js_course_join:contains("You\'re enrolled")',
+    extra_trigger: 'iframe body:not(.editor_enable)',  // wait for editor to close
+    trigger: 'iframe .o_wslides_js_course_join:contains("You\'re enrolled")',
     run: function () {} // check membership
 }
 ].concat(
-    slidesTourTools.addExistingCourseTag(),
-    slidesTourTools.addNewCourseTag('The Most Awesome Course'),
-    slidesTourTools.addSection('Introduction'),
-    slidesTourTools.addArticleToSection('Introduction', 'MyArticle'),
+    slidesTourTools.addExistingCourseTag(true),
+    slidesTourTools.addNewCourseTag('The Most Awesome Course', true),
+    slidesTourTools.addSection('Introduction', true),
+    slidesTourTools.addArticleToSection('Introduction', 'MyArticle', true),
     [{
     content: "eLearning: check editor is loaded for article",
-    trigger: 'body.editor_enable',
+    trigger: 'iframe body.editor_enable',
     timeout: 30000,
     run: () => null, // it's a check
 }, {
@@ -93,7 +95,7 @@ tour.register('course_publisher_standard', {
     trigger: '.o_we_website_top_actions button.btn-primary:contains("Save")',
 }, {
     content: "eLearning: use breadcrumb to go back to channel",
-    trigger: '.o_wslides_course_nav a:contains("Déboulonnate")',
+    trigger: 'iframe .o_wslides_course_nav a:contains("Déboulonnate")',
 }]
 //     [
 // {
diff --git a/addons/website_slides/static/tests/tours/slides_course_publisher.js b/addons/website_slides/static/tests/tours/slides_course_publisher.js
index 25d3b741764..f8bc41d3e01 100644
--- a/addons/website_slides/static/tests/tours/slides_course_publisher.js
+++ b/addons/website_slides/static/tests/tours/slides_course_publisher.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import tour from 'web_tour.tour';
+import wTourUtils from 'website.tour_utils';
 import slidesTourTools from '@website_slides/../tests/tours/slides_tour_tools';
 
 /**
@@ -10,12 +10,13 @@ import slidesTourTools from '@website_slides/../tests/tours/slides_tour_tools';
  * they create some lessons in it;
  * they publishe it;
  */
-tour.register('course_publisher', {
+wTourUtils.registerEditionTour('course_publisher', {
+    // TODO: replace by wTourUtils.getClientActionURL when it's added
     url: '/slides',
     test: true
 }, [{
     content: 'eLearning: click on New (top-menu)',
-    trigger: '#new-content-menu > a'
+    trigger: 'div.o_new_content_container a'
 }, {
     content: 'eLearning: click on New Course',
     trigger: '#o_new_content_menu_choices a:contains("Course")'
@@ -25,27 +26,29 @@ tour.register('course_publisher', {
     run: 'text How to Déboulonnate',
 }, {
     content: 'eLearning: click on tags',
-    trigger: 'ul.select2-choices:first',
+    trigger: '.o_field_many2manytags input',
+    run: 'text Gard',
 }, {
     content: 'eLearning: select gardener tag',
-    trigger: 'div.select2-result-label:contains("Gardener")',
+    trigger: '.ui-autocomplete a:contains("Gardener")',
     in_modal: false,
 }, {
     content: 'eLearning: set description',
-    trigger: 'textarea[name="description"]',
+    trigger: '.oe_form_field_html[name="description"]',
     run: 'text Déboulonnate is very common at Fleurus',
 }, {
     content: 'eLearning: we want reviews',
-    trigger: 'input[name="allow_comment"]',
+    trigger: '.o_field_boolean[name="allow_comment"] input',
 }, {
     content: 'eLearning: seems cool, create it',
-    trigger: 'button:contains("Create")',
+    trigger: 'button:contains("Save")',
 }, {
     content: 'eLearning: launch course edition',
-    trigger: 'div[id="edit-page-menu"] a',
+    trigger: '.o_edit_website_container a',
 }, {
     content: 'eLearning: double click image to edit it',
-    trigger: 'img.o_wslides_course_pict',
+    extra_trigger: 'iframe body.editor_enable',
+    trigger: 'iframe img.o_wslides_course_pict',
     run: 'dblclick',
 }, {
     content: 'eLearning: click "Add URL" to trigger URL box',
@@ -59,35 +62,36 @@ tour.register('course_publisher', {
     trigger: '.o_upload_media_url_button',
 }, {
     content: 'eLearning: is the Corgi set ?',
-    trigger: 'img.o_wslides_course_pict',
+    trigger: 'iframe img.o_wslides_course_pict',
     run: function () {
-        if ($('img.o_wslides_course_pict').attr('src').endsWith('GoldWinnerPembrookeWelshCorgi.jpg')) {
-            $('img.o_wslides_course_pict').addClass('o_wslides_tour_success');
+        const $imgCorgi = $('.o_website_preview iframe').contents().find('img.o_wslides_course_pict');
+        if ($imgCorgi.attr('src').endsWith('GoldWinnerPembrookeWelshCorgi.jpg')) {
+            $imgCorgi.addClass('o_wslides_tour_success');
         }
     },
 }, {
     content: 'eLearning: the Corgi is set !',
-    trigger: 'img.o_wslides_course_pict.o_wslides_tour_success',
+    trigger: 'iframe img.o_wslides_course_pict.o_wslides_tour_success',
 }, {
     content: 'eLearning: save course edition',
     trigger: 'button[data-action="save"]',
 }, {
     content: 'eLearning: course create with current member',
-    extra_trigger: 'body:not(.editor_enable)',  // wait for editor to close
-    trigger: '.o_wslides_js_course_join:contains("You\'re enrolled")',
+    extra_trigger: 'iframe body:not(.editor_enable)',  // wait for editor to close
+    trigger: 'iframe .o_wslides_js_course_join:contains("You\'re enrolled")',
     run: function () {} // check membership
 }
 ].concat(
-    slidesTourTools.addExistingCourseTag(),
-    slidesTourTools.addNewCourseTag('The Most Awesome Course'),
-    slidesTourTools.addSection('Introduction'),
-    slidesTourTools.addVideoToSection('Introduction'),
+    slidesTourTools.addExistingCourseTag(true),
+    slidesTourTools.addNewCourseTag('The Most Awesome Course', true),
+    slidesTourTools.addSection('Introduction', true),
+    slidesTourTools.addVideoToSection('Introduction', false, true),
     [{
     content: 'eLearning: publish newly added course',
-    trigger: 'span:contains("Dschinghis Khan - Dschinghis Khan (1979)")',  // wait for slide to appear
+    trigger: 'iframe span:contains("Dschinghis Khan - Dschinghis Khan (1979)")',  // wait for slide to appear
     // trigger: 'span.o_wslides_js_slide_toggle_is_preview:first',
     run: function () {
-        $('span.o_wslides_js_slide_toggle_is_preview:first').click();
+        $('.o_website_preview iframe').contents().find('span.o_wslides_js_slide_toggle_is_preview:first')[0].click();
     }
 }]
 //     [
diff --git a/addons/website_slides/static/tests/tours/slides_full_screen_web_editor.js b/addons/website_slides/static/tests/tours/slides_full_screen_web_editor.js
index 2aa132ad9ab..bd0f65a3a39 100644
--- a/addons/website_slides/static/tests/tours/slides_full_screen_web_editor.js
+++ b/addons/website_slides/static/tests/tours/slides_full_screen_web_editor.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import tour from 'web_tour.tour';
+import wTourUtils from 'website.tour_utils';
 
 /**
  * Global use case:
@@ -12,25 +12,24 @@ import tour from 'web_tour.tour';
  * See "Fullscreen#_onWebEditorClick" for more information.
  *
  */
-tour.register('full_screen_web_editor', {
+ wTourUtils.registerEditionTour('full_screen_web_editor', {
     url: '/slides',
-    test: true
+    test: true,
 }, [{
     // open to the course
-    trigger: 'a:contains("Basics of Gardening")'
+    trigger: 'iframe a:contains("Basics of Gardening")'
 }, {
     // click on a slide to open the fullscreen view
-    trigger: 'a.o_wslides_js_slides_list_slide_link:contains("Home Gardening")'
+    trigger: 'iframe a.o_wslides_js_slides_list_slide_link:contains("Home Gardening")'
 }, {
-    trigger: '.o_wslides_fs_main',
+    trigger: 'iframe .o_wslides_fs_main',
     run: function () {} // check we land on the fullscreen view
-}, {
-    // click on the main "Edit" button to open the web editor
-    trigger: '#edit-page-menu a[data-action="edit"]',
-}, {
-    trigger: '.o_wslides_lesson_main',
+},
+wTourUtils.clickOnEdit()
+, {
+    trigger: 'iframe .o_wslides_lesson_main',
     run: function () {} // check we are redirected on the detailed view
 }, {
-    trigger: 'body.editor_enable',
+    trigger: 'body.editor_has_snippets',
     run: function () {} // check the editor is automatically opened on the detailed view
 }]);
diff --git a/addons/website_slides/static/tests/tours/slides_tour_tools.js b/addons/website_slides/static/tests/tours/slides_tour_tools.js
index 6c8ae37ade4..40091bee236 100644
--- a/addons/website_slides/static/tests/tours/slides_tour_tools.js
+++ b/addons/website_slides/static/tests/tours/slides_tour_tools.js
@@ -4,131 +4,143 @@
  * PUBLISHER / CONTENT CREATION
  */
 
-var addSection = function (sectionName) {
+var addSection = function (sectionName, backend = false) {
 	return [
 {
     content: 'eLearning: click on Add Section',
-    trigger: 'a.o_wslides_js_slide_section_add',
+    trigger: (backend ? 'iframe ' : '' ) + 'a.o_wslides_js_slide_section_add',
 }, {
     content: 'eLearning: set section name',
-    trigger: 'input[name="name"]',
+    trigger: (backend ? 'iframe ' : '' ) + 'input[name="name"]',
     run: 'text ' + sectionName,
 }, {
     content: 'eLearning: create section',
-    trigger: 'footer.modal-footer button:contains("Save")'
+    trigger: (backend ? 'iframe ' : '' ) + 'footer.modal-footer button:contains("Save")'
 }, {
 	content: 'eLearning: section created empty',
-	trigger: 'div.o_wslides_slide_list_category_header:contains("' + sectionName + '")',
+	trigger: (backend ? 'iframe ' : '' ) + 'div.o_wslides_slide_list_category_header:contains("' + sectionName + '")',
 }];
 };
 
-var addVideoToSection = function (sectionName, saveAsDraft) {
+var addVideoToSection = function (sectionName, saveAsDraft, backend = false) {
 	var base_steps = [
 {
 	content: 'eLearning: add content to section',
-	trigger: 'div.o_wslides_slide_list_category_header:contains("' + sectionName + '") a:contains("Add Content")',
+	trigger: (backend ? 'iframe ' : '' ) + 'div.o_wslides_slide_list_category_header:contains("' + sectionName + '") a:contains("Add Content")',
 }, {
 	content: 'eLearning: click on video',
-	trigger: 'a[data-slide-category=video]',
+	trigger: (backend ? 'iframe ' : '' ) + 'a[data-slide-category=video]',
 }, {
 	content: 'eLearning: fill video link',
-	trigger: 'input[name=video_url]',
+	trigger: (backend ? 'iframe ' : '' ) + 'input[name=video_url]',
 	run: 'text https://www.youtube.com/watch?v=pzmI3vAIhbE',
 }, {
     content: 'eLearning: click outside to trigger onchange',
-    trigger: 'div.o_w_slide_upload_modal_container',
-    run: 'click',
+    trigger: (backend ? 'iframe ' : '' ) + 'div.o_w_slide_upload_modal_container',
+    run: ({ tip_widget }) => {
+		tip_widget.$anchor[0].click();
+	},
 }];
 	if (saveAsDraft) {
 		base_steps = [].concat(base_steps, [{
     content: 'eLearning: save as draft slide',
-    extra_trigger: 'div.o_slide_preview img:not([src="/website_slides/static/src/img/document.png"])',  // wait for onchange to perform its duty
-    trigger: 'footer.modal-footer button:contains("Save as Draft")',
+    extra_trigger: (backend ? 'iframe ' : '' ) + 'div.o_slide_preview img:not([src="/website_slides/static/src/img/document.png"])',  // wait for onchange to perform its duty
+    trigger: (backend ? 'iframe ' : '' ) + 'footer.modal-footer button:contains("Save as Draft")',
 }]);
 	}
 	else {
 		base_steps = [].concat(base_steps, [{
     content: 'eLearning: create and publish slide',
-    extra_trigger: 'div.o_slide_preview img:not([src="/website_slides/static/src/img/document.png"])',  // wait for onchange to perform its duty
-    trigger: 'footer.modal-footer button:contains("Publish")',
+    extra_trigger: (backend ? 'iframe ' : '' ) + 'div.o_slide_preview img:not([src="/website_slides/static/src/img/document.png"])',  // wait for onchange to perform its duty
+    trigger: (backend ? 'iframe ' : '' ) + 'footer.modal-footer button:contains("Publish")',
 }]);
 	}
 	return base_steps;
 };
 
-var addArticleToSection = function (sectionName, pageName) {
+var addArticleToSection = function (sectionName, pageName, backend) {
 	return [
 {
 	content: 'eLearning: add content to section',
-	trigger: 'div.o_wslides_slide_list_category_header:contains("' + sectionName + '") a:contains("Add Content")',
+	trigger: (backend ? 'iframe ' : '' ) + 'div.o_wslides_slide_list_category_header:contains("' + sectionName + '") a:contains("Add Content")',
 }, {
 	content: 'eLearning: click on article',
-	trigger: 'a[data-slide-category=article]',
+	trigger: (backend ? 'iframe ' : '' ) + 'a[data-slide-category=article]',
 }, {
 	content: 'eLearning: fill article title',
-	trigger: 'input[name=name]',
+	trigger: (backend ? 'iframe ' : '' ) + 'input[name=name]',
 	run: 'text ' + pageName,
 }, {
     content: 'eLearning: click on tags',
-    trigger: 'ul.select2-choices:first',
+    trigger: (backend ? 'iframe ' : '' ) + 'ul.select2-choices:first',
 }, {
     content: 'eLearning: select Theory tag',
-    trigger: 'div.select2-result-label:contains("Theory")',
+    trigger: (backend ? 'iframe ' : '' ) + 'div.select2-result-label:contains("Theory")',
     in_modal: false,
 }, {
 	content: 'eLearning: fill article completion time',
-	trigger: 'input[name=duration]',
+	trigger: (backend ? 'iframe ' : '' ) + 'input[name=duration]',
 	run: 'text 4',
 }, {
     content: 'eLearning: create and publish slide',
-    trigger: 'footer.modal-footer button:contains("Publish")',
+    trigger: (backend ? 'iframe ' : '' ) + 'footer.modal-footer button:contains("Publish")',
 }];
 };
 
-var addExistingCourseTag = function () {
+var addExistingCourseTag = function (backend = false) {
 	return [
 {
     content: 'eLearning: click on Add Tag',
-    trigger: 'a.o_wslides_js_channel_tag_add',
+    trigger: (backend ? 'iframe ' : '' ) + 'a.o_wslides_js_channel_tag_add',
 }, {
     content: 'eLearning: click on tag dropdown',
-    trigger: 'a.select2-choice:first',
+    trigger: (backend ? 'iframe ' : '' ) + 'a.select2-choice:first',
 }, {
     content: 'eLearning: select advanced tag',
-    trigger: 'div.select2-result-label:contains("Advanced")',
+    trigger: (backend ? 'iframe ' : '' ) + 'div.select2-result-label:contains("Advanced")',
     in_modal: false,
 }, {
     content: 'eLearning: add existing course tag',
-    trigger: 'footer.modal-footer button:contains("Add")'
+    trigger: (backend ? 'iframe ' : '' ) + 'footer.modal-footer button:contains("Add")'
+}, {
+	content: 'eLearning: check that modal is closed',
+	trigger: (backend ? 'iframe ' : '' ) + 'body:not(.modal-open)',
 }];
 };
 
-var addNewCourseTag = function (courseTagName) {
+var addNewCourseTag = function (courseTagName, backend) {
 	return [
 {
     content: 'eLearning: click on Add Tag',
-    trigger: 'a.o_wslides_js_channel_tag_add',
+    trigger: (backend ? 'iframe ' : '' ) + 'a.o_wslides_js_channel_tag_add',
 }, {
     content: 'eLearning: click on tag dropdown',
-	trigger: 'a.select2-choice:first',
+	trigger: (backend ? 'iframe ' : '' ) + 'a.select2-choice:first',
 }, {
     content: 'eLearning: add a new course tag',
-	trigger: 'a.select2-choice:first',
+	trigger: (backend ? 'iframe ' : '' ) + 'a.select2-choice:first',
 	run: function () {
 		// directly add new tag since we can assume select2 works correctly
-		$('#tag_id').select2('data', {id:'123', text: courseTagName, create: true});
-		$('#tag_id').trigger('change');
+		let $jq = $;
+		if (backend) {
+			$jq = $('.o_website_preview iframe:not(.o_ignore_in_tour)').contents()[0].defaultView.$;
+		}
+		$jq('#tag_id').select2('data', {id:'123', text: courseTagName, create: true});
+		$jq('#tag_id').trigger('change');
 	}
 }, {
     content: 'eLearning: click on tag group dropdown',
-	trigger: 'a.select2-choice:last',
+	trigger: (backend ? 'iframe ' : '' ) + 'a.select2-choice:last',
 }, {
 	content: 'eLearning: select Tags tag group',
-    trigger: 'div.select2-result-label:contains("Tags")',
+    trigger: (backend ? 'iframe ' : '' ) + 'div.select2-result-label:contains("Tags")',
 	in_modal: false,
 }, {
     content: 'eLearning: add new course tag',
-    trigger: 'footer.modal-footer button:contains("Add")'
+    trigger: (backend ? 'iframe ' : '' ) + 'footer.modal-footer button:contains("Add")'
+}, {
+	content: 'eLearning: check that modal is closed',
+	trigger: (backend ? 'iframe ' : '' ) + 'body:not(.modal-open)',
 }];
 };
 
diff --git a/addons/website_slides/tests/test_ui_wslides.py b/addons/website_slides/tests/test_ui_wslides.py
index b392268c883..64b33bb1066 100644
--- a/addons/website_slides/tests/test_ui_wslides.py
+++ b/addons/website_slides/tests/test_ui_wslides.py
@@ -10,7 +10,7 @@ from odoo.addons.base.tests.common import HttpCaseWithUserDemo, HttpCaseWithUser
 
 
 class TestUICommon(HttpCaseWithUserDemo, HttpCaseWithUserPortal):
-    
+
     def setUp(self):
         super(TestUICommon, self).setUp()
         # Load pdf and img contents
@@ -142,7 +142,7 @@ class TestUi(TestUICommon):
         })
 
         self.browser_js(
-            '/slides',
+            self.env['website'].get_client_action_url('/slides'),
             'odoo.__DEBUG__.services["web_tour.tour"].run("full_screen_web_editor")',
             'odoo.__DEBUG__.services["web_tour.tour"].tours.full_screen_web_editor.ready',
             login=user_demo.login)
@@ -162,7 +162,7 @@ class TestUiPublisher(HttpCaseWithUserDemo):
         })
 
         self.browser_js(
-            '/slides',
+            self.env['website'].get_client_action_url('/slides'),
             'odoo.__DEBUG__.services["web_tour.tour"].run("course_publisher_standard")',
             'odoo.__DEBUG__.services["web_tour.tour"].tours.course_publisher_standard.ready',
             login=user_demo.login)
@@ -192,7 +192,7 @@ class TestUiPublisherYoutube(HttpCaseWithUserDemo):
         })
 
         self.browser_js(
-            '/slides',
+            self.env['website'].get_client_action_url('/slides'),
             'odoo.__DEBUG__.services["web_tour.tour"].run("course_publisher")',
             'odoo.__DEBUG__.services["web_tour.tour"].tours.course_publisher.ready',
             login=user_demo.login)

From dacc17ba2dc9d5d2c457658c4d3adb7843daf761 Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Thu, 12 May 2022 13:09:36 +0200
Subject: [PATCH 70/88] [IMP] web_tour, website: wait for iframe widgets to be
 ready

This commit adds an attribute to the iframe element in website_preview
so that the tour system knows when the iframe is ready. This is
necessary as tour could click on the iframe before the widgets where
properly started and therefore clicks would be ignored.

See merge commit for more information.

task-2687506
---
 addons/web_tour/static/src/js/tour_utils.js                    | 3 +++
 .../src/client_actions/website_preview/website_preview.js      | 2 ++
 .../src/client_actions/website_preview/website_preview.xml     | 3 ++-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/addons/web_tour/static/src/js/tour_utils.js b/addons/web_tour/static/src/js/tour_utils.js
index 0a7769dc22f..ff0d870ff15 100644
--- a/addons/web_tour/static/src/js/tour_utils.js
+++ b/addons/web_tour/static/src/js/tour_utils.js
@@ -48,6 +48,9 @@ function do_before_unload(if_unload_callback, if_not_unload_callback) {
 function get_jquery_element_from_selector(selector) {
     if (_.isString(selector) && selector.indexOf('iframe') !== -1) {
         var $iframe = $(selector.split('iframe')[0] + ' iframe:not(.o_ignore_in_tour)');
+        if ($iframe.is('[is-ready="false"]')) {
+            return $();
+        }
         var $el = $iframe.contents()
             .find(selector.split('iframe')[1]);
         $el.iframeContainer = $iframe[0];
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index f4dcb573da1..dbf5a106995 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -189,6 +189,7 @@ export class WebsitePreview extends Component {
         this.websiteService.pageDocument = this.iframe.el.contentDocument;
         this.websiteService.contentWindow = this.iframe.el.contentWindow;
         this.iframe.el.contentWindow.addEventListener('PUBLIC-ROOT-READY', (event) => {
+            this.iframe.el.setAttribute('is-ready', 'true');
             if (!this.websiteContext.edition) {
                 this.addWelcomeMessage();
             }
@@ -202,6 +203,7 @@ export class WebsitePreview extends Component {
         // underlying iframe, to avoid for white flashes (visible on
         // Chrome Windows/Linux).
         this.iframe.el.contentWindow.addEventListener('beforeunload', () => {
+            this.iframe.el.setAttribute('is-ready', 'false');
             if (!this.websiteContext.edition) {
                 this.iframefallback.el.contentDocument.body.replaceWith(this.iframe.el.contentDocument.body.cloneNode(true));
                 $().getScrollingElement(this.iframefallback.el.contentDocument)[0].scrollTop = $().getScrollingElement(this.iframe.el.contentDocument)[0].scrollTop;
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml
index 2ba1329f3bd..aa1e9a567f4 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.xml
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml
@@ -22,7 +22,8 @@
             <iframe t-att-src="initialUrl"
                 class="o_iframe"
                 t-ref="iframe"
-                t-on-load="_onPageLoaded"/>
+                t-on-load="_onPageLoaded"
+                is-ready="false"/>
         </div>
         <WebsiteEditorComponent t-if="websiteContext.edition"
             reloadIframe.bind="this.reloadIframe"/>

From fed0e69c27e9c9109dedb154cbda3b2d2be5251a Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Thu, 9 Jun 2022 10:30:11 +0200
Subject: [PATCH 71/88] [FIX] website: fix multi website redirections

Before this commit, switching websites with custom domains was not
properly done: the client action should redirect to the custom domain if
there is one, instead of only redirecting the iframe.

The redirection was not correct for the "go to website" buttons either:
in that case, the url was incorrectly generated for the redirection (the
custom domain was passed in the path parameter of the client action).

See merge commit for more information.

task-2687506
---
 addons/website/models/mixins.py                        |  7 ++++---
 .../client_actions/website_preview/website_preview.js  | 10 +++++++++-
 .../static/src/systray_items/website_switcher.js       |  8 +++++++-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/addons/website/models/mixins.py b/addons/website/models/mixins.py
index 86b1938d03f..7a195652b25 100644
--- a/addons/website/models/mixins.py
+++ b/addons/website/models/mixins.py
@@ -283,11 +283,12 @@ class WebsitePublishedMultiMixin(WebsitePublishedMixin):
             return is_published
 
     def open_website_url(self):
-        url = url_join(self.website_id.domain, self.website_url) if self.website_id.domain else self.website_url
-        url = self.env['website'].get_client_action_url(url)
+        client_action_url = self.env['website'].get_client_action_url(self.website_url)
+        if self.website_id.domain:
+            client_action_url = url_join(self.website_id.domain, f'{client_action_url}&website_id={self.website_id.id}')
         return {
             'type': 'ir.actions.act_url',
-            'url': url,
+            'url': client_action_url,
             'target': 'self',
         }
 
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index dbf5a106995..5fa7a36beee 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -62,7 +62,11 @@ export class WebsitePreview extends Component {
             this.isWebsitePublisher = await this.user.hasGroup('website.group_website_publisher');
             await this.websiteService.fetchWebsites();
             const encodedPath = encodeURIComponent(this.path);
-            this.initialUrl = `/website/force/${this.websiteId}?path=${encodedPath}`;
+            if (this.websiteDomain && this.websiteDomain !== window.location.origin) {
+                window.location.href = `${this.websiteDomain}/web#action=website.website_preview&path=${encodedPath}&website_id=${this.websiteId}`;
+            } else {
+                this.initialUrl = `/website/force/${this.websiteId}?path=${encodedPath}`;
+            }
         });
 
         useEffect(() => {
@@ -114,6 +118,10 @@ export class WebsitePreview extends Component {
         return websiteId;
     }
 
+    get websiteDomain() {
+        return this.websiteService.websites.find(website => website.id === this.websiteId).domain;
+    }
+
     get path() {
         let path = this.websiteService.editedObjectPath;
         if (!path) {
diff --git a/addons/website/static/src/systray_items/website_switcher.js b/addons/website/static/src/systray_items/website_switcher.js
index 87137c81e1f..87e74404369 100644
--- a/addons/website/static/src/systray_items/website_switcher.js
+++ b/addons/website/static/src/systray_items/website_switcher.js
@@ -17,7 +17,13 @@ export class WebsiteSwitcherSystray extends Component {
             name: website.name,
             id: website.id,
             callback: () => {
-                this.websiteService.goToWebsite({ websiteId: website.id });
+                if (website.domain && website.domain !== window.location.origin) {
+                    const { location: { pathname, search, hash } } = this.websiteService.contentWindow;
+                    const path = pathname + search + hash;
+                    window.location.href = `${website.domain}/web#action=website.website_preview&path=${encodeURI(path)}&website_id=${website.id}`;
+                } else {
+                    this.websiteService.goToWebsite({ websiteId: website.id });
+                }
             },
         }));
     }

From df1869153a90898bad3e0b61e5fc43a9ed3d59c9 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Tue, 17 May 2022 15:26:06 +0200
Subject: [PATCH 72/88] [FIX] website, web_editor: blur global document on
 focusing iframe's one

As there are now two different documents at the SnippetsMenu level, in
the context of the website app:
- the iframe's one, where the snippets are,
- the global one, where the SnippetsMenu is,
Focusing a contenteditable snippet would not blur an option's input and
the other way around, leading to wrong behaviours.

One of them was the creation of a link via the link tools:
- Drop a s_text_image snippet
- Click on the first paragraph
- Create a link via the link tools
(The paragraph is still selected while entering the url input)
- Click on the newly created link
- Click on the "remove link" popover's button
-> Traceback, as the selection was not correctly set

To avoid that, and restore the one-document-behaviour, we remove the
selection of the global document when clicking on the iframe's document,
and we remove the iframe's document selection when clicking on the
SnippetsMenu.

See merge commit for more information.

task-2687506
---
 .../static/src/js/editor/snippets.editor.js   | 86 +++++++++----------
 .../static/src/js/wysiwyg/widgets/link.js     |  3 +
 .../static/src/js/wysiwyg/wysiwyg.js          |  2 +
 .../website/static/src/js/editor/wysiwyg.js   | 61 +++++++++++++
 4 files changed, 109 insertions(+), 43 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index bd8e634dc7e..ab5b0fa07fe 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -1236,6 +1236,7 @@ var SnippetsMenu = Widget.extend({
         this.loadingTimers = {};
         this.loadingElements = {};
         this._loadingEffectDisabled = false;
+        this._onClick = this._onClick.bind(this);
     },
     /**
      * @override
@@ -1307,49 +1308,9 @@ var SnippetsMenu = Widget.extend({
         }).insertAfter(this.$el);
 
         // Active snippet editor on click in the page
-        var lastElement;
-        const onClick = ev => {
-            var srcElement = ev.target || (ev.originalEvent && (ev.originalEvent.target || ev.originalEvent.originalTarget)) || ev.srcElement;
-            if (!srcElement || lastElement === srcElement) {
-                return;
-            }
-            var $target = $(srcElement);
-            // Keep popover open if clicked inside it, but not on a button
-            if ($target.parents('.o_edit_menu_popover').length && !$target.parent('a').addBack('a').length) {
-                return;
-            }
-            lastElement = srcElement;
-            _.defer(function () {
-                lastElement = false;
-            });
-
-            if (!$target.closest('we-button, we-toggler, we-select, .o_we_color_preview').length) {
-                this._closeWidgets();
-            }
-            if (!$target.closest('body > *').length || $target.is('#iframe_target')) {
-                return;
-            }
-            if ($target.closest(this._notActivableElementsSelector).length) {
-                return;
-            }
-            const $oeStructure = $target.closest('.oe_structure');
-            if ($oeStructure.length && !$oeStructure.children().length && this.$snippets) {
-                // If empty oe_structure, encourage using snippets in there by
-                // making them "wizz" in the panel.
-                this._activateSnippet(false).then(() => {
-                    this.$snippets.odooBounce();
-                });
-                return;
-            }
-            this._activateSnippet($target);
-        };
-
-        this.$document.on('click.snippets_menu', '*', onClick);
+        this.$document.on('click.snippets_menu', '*', this._onClick);
         // Needed as bootstrap stop the propagation of click events for dropdowns
-        this.$document.on('mouseup.snippets_menu', '.dropdown-toggle', onClick);
-        if (this.$body[0].document !== this.ownerDocument) {
-            this.$body.on('click.snippets_menu', '*', onClick);
-        }
+        this.$document.on('mouseup.snippets_menu', '.dropdown-toggle', this._onClick);
 
         core.bus.on('deactivate_snippet', this, this._onDeactivateSnippet);
 
@@ -1495,7 +1456,6 @@ var SnippetsMenu = Widget.extend({
             }
             this.$window.off('.snippets_menu');
             this.$document.off('.snippets_menu');
-            this.$body.off('.snippets_menu');
             if (this.$scrollingElement) {
                 this.$scrollingElement[0].removeEventListener('scroll', this._onScrollingElementScroll, {capture: true});
             }
@@ -2798,6 +2758,46 @@ var SnippetsMenu = Widget.extend({
     // Handlers
     //--------------------------------------------------------------------------
 
+    /**
+     * Activates the right snippet and initializes its SnippetEditor.
+     *
+     * @private
+     */
+    _onClick(ev) {
+        var srcElement = ev.target || (ev.originalEvent && (ev.originalEvent.target || ev.originalEvent.originalTarget)) || ev.srcElement;
+        if (!srcElement || this.lastElement === srcElement) {
+            return;
+        }
+        var $target = $(srcElement);
+        // Keep popover open if clicked inside it, but not on a button
+        if ($target.parents('.o_edit_menu_popover').length && !$target.parent('a').addBack('a').length) {
+            return;
+        }
+        this.lastElement = srcElement;
+        _.defer(() => {
+            this.lastElement = false;
+        });
+
+        if (!$target.closest('we-button, we-toggler, we-select, .o_we_color_preview').length) {
+            this._closeWidgets();
+        }
+        if (!$target.closest('body > *').length || $target.is('#iframe_target')) {
+            return;
+        }
+        if ($target.closest(this._notActivableElementsSelector).length) {
+            return;
+        }
+        const $oeStructure = $target.closest('.oe_structure');
+        if ($oeStructure.length && !$oeStructure.children().length && this.$snippets) {
+            // If empty oe_structure, encourage using snippets in there by
+            // making them "wizz" in the panel.
+            this._activateSnippet(false).then(() => {
+                this.$snippets.odooBounce();
+            });
+            return;
+        }
+        this._activateSnippet($target);
+    },
     /**
      * Called when a child editor asks for insertion zones to be enabled.
      *
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
index 4f3895341d1..0e41c44de9d 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
@@ -509,6 +509,9 @@ Link.getOrCreateLink = ({ containerNode, startNode } = {})  => {
     let link = getInSelection(doc, 'a');
     const $link = $(link);
     const range = getDeepRange(containerNode, {splitText: true, select: true, correctTripleClick: true});
+    if (!range) {
+        return {};
+    }
     const isContained = containerNode.contains(range.startContainer) && containerNode.contains(range.endContainer);
     if (link && (!$link.has(range.startContainer).length || !$link.has(range.endContainer).length)) {
         // Expand the current link to include the whole selection.
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index ca7e05286ce..cfaa017a7b4 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -1081,9 +1081,11 @@ const Wysiwyg = Widget.extend({
                         this.linkTools && this.linkTools.destroy();
                         this.linkTools = undefined;
                         this.odooEditor.document.removeEventListener('mousedown', _onMousedown, true);
+                        document.removeEventListener('mousedown', _onMousedown, true);
                     }
                 };
                 this.odooEditor.document.addEventListener('mousedown', _onMousedown, true);
+                document.addEventListener('mousedown', _onMousedown, true);
                 if (!this.linkTools.$el) {
                     this.linkTools.appendTo(this.toolbar.$el);
                 }
diff --git a/addons/website/static/src/js/editor/wysiwyg.js b/addons/website/static/src/js/editor/wysiwyg.js
index 1baedd994a9..023bce0971d 100644
--- a/addons/website/static/src/js/editor/wysiwyg.js
+++ b/addons/website/static/src/js/editor/wysiwyg.js
@@ -264,6 +264,35 @@ snippetsEditor.SnippetsMenu.include({
         this._super(...arguments);
         this._notActivableElementsSelector += ', .o_mega_menu_toggle';
     },
+    /**
+     * @override
+     */
+    start() {
+        const _super = this._super(...arguments);
+        if (this.$body[0].ownerDocument !== this.ownerDocument) {
+            this.$body.on('click.snippets_menu', '*', this._onClick);
+
+            // As there is now one document for the SnippetsMenu and another one
+            // for the snippets, clicking on one should blur and remove the
+            // selection of the other one.
+            this._blurSnippetsSelection = this._blurSnippetsSelection.bind(this);
+            this._blurSnippetsMenuSelection = this._blurSnippetsMenuSelection.bind(this);
+            this.$body[0].ownerDocument.addEventListener('click', this._blurSnippetsMenuSelection);
+            this.$el[0].addEventListener('click', this._blurSnippetsSelection);
+        }
+        return _super;
+    },
+    /**
+    * @override
+    */
+    destroy() {
+        if (this.$body[0].ownerDocument !== this.ownerDocument) {
+            this.$body.off('.snippets_menu');
+            this.$body[0].ownerDocument.removeEventListener('click', this._blurSnippetsMenuSelection);
+            this.$el[0].removeEventListener('click', this._blurSnippetsSelection);
+        }
+        return this._super(...arguments);
+    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -279,6 +308,38 @@ snippetsEditor.SnippetsMenu.include({
         $dropzone.attr('data-editor-sub-message', $hookParent.attr('data-editor-sub-message'));
         return $dropzone;
     },
+    /**
+     * @private
+     */
+     _blurDocumentSelection(document) {
+        const selection = document.getSelection();
+        selection.removeAllRanges();
+    },
+
+    //--------------------------------------------------------------------------
+    // Handler
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _blurSnippetsSelection(ev) {
+        // The selection should be kept for the toolbar buttons, as they are
+        // related to the text's style edition. It should be blurred for the
+        // link tools, as they modify the element itself.
+        const shouldKeepFocus = ev.target.closest('.oe-toolbar') && !ev.target.closest('#create-link');
+        if (shouldKeepFocus) {
+            return;
+        }
+        this._blurDocumentSelection(this.$body[0].ownerDocument);
+    },
+    /**
+     * @private
+     */
+    _blurSnippetsMenuSelection(ev) {
+        this._blurDocumentSelection(this.ownerDocument);
+    },
+
 });
 
 return WebsiteWysiwyg;

From 0048b209ab865bbe871947b8f30d1b4b6fad5d31 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Tue, 14 Jun 2022 10:14:04 +0200
Subject: [PATCH 73/88] [IMP] web_editor, knowledge: adapt to new media dialog

This commit adapts the Knowledge "/file" wysiwyg command to work with
the new media dialog, introduced earlier in this merge.

See merge commit for more information.

task-2687506
---
 .../knowledge_documents_selector.js           | 70 +++++++++++++++++++
 addons/knowledge/static/src/js/wysiwyg.js     | 68 +-----------------
 .../components/media_dialog/media_dialog.js   |  4 +-
 .../static/src/js/wysiwyg/wysiwyg.js          |  3 +-
 4 files changed, 76 insertions(+), 69 deletions(-)
 create mode 100644 addons/knowledge/static/src/components/media_dialog/knowledge_documents_selector.js

diff --git a/addons/knowledge/static/src/components/media_dialog/knowledge_documents_selector.js b/addons/knowledge/static/src/components/media_dialog/knowledge_documents_selector.js
new file mode 100644
index 00000000000..13be1ac4d6f
--- /dev/null
+++ b/addons/knowledge/static/src/components/media_dialog/knowledge_documents_selector.js
@@ -0,0 +1,70 @@
+/** @odoo-module */
+
+import { qweb as QWeb } from 'web.core';
+import { DocumentSelector } from '@web_editor/components/media_dialog/document_selector';
+import { TABS, MediaDialog } from '@web_editor/components/media_dialog/media_dialog';
+import { patch } from '@web/core/utils/patch';
+
+/**
+ * Override the @see DocumentSelector to manage files in a @see MediaDialog used
+ * by the /file command. The purpose of this override is to redefine the
+ * rendering of the media (/file block), and to merge images in the documents
+ * tab of the MediaDialog, since the /file block displays a default mimetype for
+ * every files.
+ */
+export class KnowledgeDocumentSelector extends DocumentSelector {
+    /**
+     * Filter files for the documents tab of the MediaDialog. Any file with a
+     * mimetype is valid. (images and documents are displayed together)
+     *
+     * @override
+     */
+    get attachmentsDomain() {
+        const domain = super.attachmentsDomain;
+        return domain.map(d => {
+            if (d[0] === 'mimetype') {
+                return ['mimetype', '!=', false];
+            }
+            return d;
+        });
+    }
+
+    static async createElements(...args) {
+        const files = await DocumentSelector.createElements(...args);
+        return files.map(file => {
+            const extension = (file.title && file.title.split('.').pop()) || file.dataset.mimetype;
+            const fileEl = $(QWeb.render('knowledge.file_block', {
+                img: {
+                    name: file.title,
+                    extension: extension,
+                },
+            }))[0];
+            file.classList.add(...DocumentSelector.mediaSpecificClasses);
+            fileEl.querySelector('.o_knowledge_file_image').replaceChildren(file);
+            return fileEl;
+        });
+    }
+}
+KnowledgeDocumentSelector.mediaSpecificClasses = [];
+KnowledgeDocumentSelector.tagNames = DocumentSelector.tagNames;
+
+patch(TABS, 'knowledge_media_dialog_tabs', {
+    KNOWLEDGE_DOCUMENTS: {
+        ...TABS.DOCUMENTS,
+        id: 'KNOWLEDGE_DOCUMENTS',
+        Component: KnowledgeDocumentSelector,
+    }
+});
+
+patch(MediaDialog.prototype, 'knowledge_media_dialog', {
+    /**
+     * @override
+     */
+    addTabs() {
+        this._super(...arguments);
+
+        if (this.props.knowledgeDocuments) {
+            this.addTab(TABS.KNOWLEDGE_DOCUMENTS);
+        }
+    }
+});
diff --git a/addons/knowledge/static/src/js/wysiwyg.js b/addons/knowledge/static/src/js/wysiwyg.js
index cae48694fd8..f2f582e4c3b 100644
--- a/addons/knowledge/static/src/js/wysiwyg.js
+++ b/addons/knowledge/static/src/js/wysiwyg.js
@@ -1,73 +1,10 @@
 /** @odoo-module **/
 
 import { qweb as QWeb } from 'web.core';
-import { DocumentWidget } from 'wysiwyg.widgets.media';
-import MediaDialog from 'wysiwyg.widgets.MediaDialog';
 import Wysiwyg from 'web_editor.wysiwyg';
 import { KnowledgeArticleLinkModal } from './wysiwyg/knowledge_article_link.js';
 import { preserveCursor, setCursorStart } from '@web_editor/../lib/odoo-editor/src/OdooEditor';
 
-/**
- * Override the @see DocumentWidget to manage files in a @see MediaDialog used
- * by the /file command. The purpose of this override is to redefine the
- * rendering of the media (/file block), and to merge images in the documents
- * tab of the MediaDialog, since the /file block displays a default mimetype for
- * every files.
- */
-const KnowledgeDocumentWidget = DocumentWidget.extend({
-    /**
-     * Filter files for the documents tab of the MediaDialog. Any file with a
-     * mimetype is valid. (images and documents are displayed together)
-     *
-     * @override
-     */
-    init: function (parent, media, options) {
-        options = _.extend({
-            accept: '*/*',
-            mimetypeDomain: [['mimetype', '!=', false]],
-        }, options || {});
-        this._super(parent, media, options);
-    },
-    /**
-     * Custom rendering for the /file command
-     *
-     * @override
-     * @param {Object} img
-     * @returns {Element}
-     */
-    _renderMedia: function (img) {
-        if (img.image_src) {
-            delete img.image_src;
-        }
-        const file = this._super(...arguments);
-        const extension = (img.name && img.name.split('.').pop()) || img.mimetype;
-        this.$media = $(QWeb.render('knowledge.file_block', {
-            img: {
-                name: img.name,
-                extension: extension,
-            },
-        }));
-        this.media = this.$media[0];
-        this.media.querySelector('.o_knowledge_file_image').replaceChildren(file);
-        return this.media;
-    }
-});
-
-/**
- * Override the @see MediaDialog to manage documents with the
- * @see KnowledgeDocumentWidget for the /file command
- */
-const KnowledgeMediaDialog = MediaDialog.extend({
-    /**
-     * @override
-     * @param {Object} media
-     * @param {Object} options
-     * @returns {Widget}
-     */
-    getDocumentWidget: function (media, options) {
-        return new KnowledgeDocumentWidget(this, media, options);
-    }
-});
 Wysiwyg.include({
     /**
      * @override
@@ -131,8 +68,9 @@ Wysiwyg.include({
                         noVideos: true,
                         noImages: true,
                         noIcons: true,
-                        noDocuments: false
-                    }, KnowledgeMediaDialog);
+                        noDocuments: true,
+                        knowledgeDocuments: true,
+                    });
                 }
             }, {
                 groupName: 'Knowledge',
diff --git a/addons/web_editor/static/src/components/media_dialog/media_dialog.js b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
index 576794e822a..29b6293ab30 100644
--- a/addons/web_editor/static/src/components/media_dialog/media_dialog.js
+++ b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
@@ -95,7 +95,7 @@ export class MediaDialog extends Component {
         if (!this.props.noImages) {
             this.addTab(TABS.IMAGES, {
                 useMediaLibrary: this.props.useMediaLibrary,
-                multiSelect: this.props.multiImages
+                multiSelect: this.props.multiImages,
             });
         }
         if (!noDocuments) {
@@ -158,13 +158,13 @@ export class MediaDialog extends Component {
                         element.dataset.shapeColors = this.props.media.dataset.shapeColors;
                     }
                 }
-                element.classList.add(...TABS[this.state.activeTab].Component.mediaSpecificClasses);
                 for (const otherTab of Object.keys(TABS).filter(key => key !== this.state.activeTab)) {
                     element.classList.remove(...TABS[otherTab].Component.mediaSpecificClasses);
                 }
                 element.classList.remove(...this.initialIconClasses);
                 element.classList.remove('o_modified_image_to_save');
                 element.classList.remove('oe_edited_link');
+                element.classList.add(...TABS[this.state.activeTab].Component.mediaSpecificClasses);
             });
             if (this.props.multiImages) {
                 this.props.save(elements);
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index cfaa017a7b4..8581e8d6aa9 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -1163,9 +1163,8 @@ const Wysiwyg = Widget.extend({
      * @param {object} params
      * @param {Node} [params.node] Optionnal
      * @param {Node} [params.htmlClass] Optionnal
-     * @param {Class} MediaDialog Optionnal
      */
-    openMediaDialog(params = {}, MediaDialog = weWidgets.MediaDialog) {
+    openMediaDialog(params = {}) {
         const sel = this.odooEditor.document.getSelection();
 
         if (!sel.rangeCount) {

From d3a9a1bf02060485175d307976dc6d8b7a94c1c6 Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Thu, 19 May 2022 11:19:40 +0200
Subject: [PATCH 74/88] [IMP] website: remove the websiteRootInstance when
 changing page

See merge commit for more information.

task-2687506
---
 .../website_preview/website_preview.js        | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 5fa7a36beee..04b74732d10 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -152,7 +152,6 @@ export class WebsitePreview extends Component {
     reloadIframe(url) {
         return new Promise((resolve, reject) => {
             this.iframe.el.addEventListener('OdooFrameContentLoaded', resolve, { once: true });
-            this.websiteService.websiteRootInstance = undefined;
             if (url) {
                 this.iframe.el.contentWindow.location = url;
             } else {
@@ -187,6 +186,8 @@ export class WebsitePreview extends Component {
     }
 
     _onPageLoaded() {
+        this.iframe.el.contentWindow.addEventListener('beforeunload', this._onPageUnload.bind(this));
+
         // This replaces the browser url (/web#action=website...) with
         // the iframe's url (it is clearer for the user).
         this.currentUrl = this.iframe.el.contentDocument.location.href;
@@ -207,17 +208,6 @@ export class WebsitePreview extends Component {
         // This is needed for the registerThemeHomepageTour tours
         this.container.el.dataset.viewXmlid = this.iframe.el.contentDocument.documentElement.dataset.viewXmlid;
 
-        // Before leaving the iframe, its content is replicated on an
-        // underlying iframe, to avoid for white flashes (visible on
-        // Chrome Windows/Linux).
-        this.iframe.el.contentWindow.addEventListener('beforeunload', () => {
-            this.iframe.el.setAttribute('is-ready', 'false');
-            if (!this.websiteContext.edition) {
-                this.iframefallback.el.contentDocument.body.replaceWith(this.iframe.el.contentDocument.body.cloneNode(true));
-                $().getScrollingElement(this.iframefallback.el.contentDocument)[0].scrollTop = $().getScrollingElement(this.iframe.el.contentDocument)[0].scrollTop;
-            }
-        });
-
         // The clicks on the iframe are listened, so that links with external
         // redirections can be opened in the top window.
         this.iframe.el.contentDocument.addEventListener('click', (ev) => {
@@ -246,6 +236,18 @@ export class WebsitePreview extends Component {
             this.iframe.el.dispatchEvent(new KeyboardEvent('keyup', ev));
         });
     }
+
+    _onPageUnload() {
+        this.websiteService.websiteRootInstance = undefined;
+        this.iframe.el.setAttribute('is-ready', 'false');
+        // Before leaving the iframe, its content is replicated on an
+        // underlying iframe, to avoid for white flashes (visible on
+        // Chrome Windows/Linux).
+        if (!this.websiteContext.edition) {
+            this.iframefallback.el.contentDocument.body.replaceWith(this.iframe.el.contentDocument.body.cloneNode(true));
+            $().getScrollingElement(this.iframefallback.el.contentDocument)[0].scrollTop = $().getScrollingElement(this.iframe.el.contentDocument)[0].scrollTop;
+        }
+    }
 }
 WebsitePreview.template = 'website.WebsitePreview';
 WebsitePreview.components = {

From dafdfba6efb8ab5920a5e5ba70ba32cc7fcb07a3 Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Tue, 10 May 2022 15:29:49 +0200
Subject: [PATCH 75/88] [IMP] website, web_editor: re-introduce cancel dialog

The cancel dialog is now using the new Dialog API and disables buttons
when the process is ongoing.

This is needed because prior to this commit, the iframe would reload,
but it would still be possible to click on the buttons.
So one could cancel then click on save and a traceback would show up.

See merge commit for more information.

task-2687506
---
 .../static/src/js/editor/snippets.editor.js        | 14 ++++++++++----
 .../components/wysiwyg_adapter/wysiwyg_adapter.js  | 12 +++++++++++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index ab5b0fa07fe..3f936297eff 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -3406,11 +3406,11 @@ var SnippetsMenu = Widget.extend({
      * On click on discard button.
      */
     _onDiscardClick: function () {
-        this._buttonClick(() => {
+        this._buttonClick(after => {
             this.snippetEditors.forEach(editor => {
                 editor.toggleOverlay(false);
             });
-            this.trigger_up('request_cancel');
+            this.trigger_up('request_cancel', {onReject: after});
         }, this.$el[0].querySelector('button[data-action=cancel]'));
     },
     /**
@@ -3465,12 +3465,18 @@ var SnippetsMenu = Widget.extend({
             return;
         }
         this._buttonAction = true;
-        dom.addButtonLoadingEffect(button);
+        const removeLoadingEffect = dom.addButtonLoadingEffect(button);
         const actionButtons = this.$el[0].querySelectorAll('[data-action]');
         for (const actionButton of actionButtons) {
             actionButton.disabled = true;
         }
-        await action();
+        const after = () =>  {
+            removeLoadingEffect();
+            for (const actionButton of actionButtons) {
+                actionButton.disabled = false;
+            }
+        };
+        await action(after);
         this._buttonAction = false;
     },
 
diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
index f449c14fa79..a568713f721 100644
--- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
@@ -7,6 +7,7 @@ import { useWowlService } from '@web/legacy/utils';
 import { useHotkey } from '@web/core/hotkeys/hotkey_hook';
 
 import { EditMenuDialog, MenuDialog } from "../dialog/edit_menu";
+import { WebsiteDialog } from '../dialog/dialog';
 import { PageOption } from "./page_options";
 
 const { onWillStart, useEffect } = owl;
@@ -559,7 +560,16 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
      * @private
      */
     _onCancelRequest(event) {
-        return this.props.quitCallback();
+        const isDirty = this.widget.isDirty();
+        if (isDirty) {
+            this.dialogs.add(WebsiteDialog, {
+                body: _t("If you discard the current edits, all unsaved changes will be lost. You can cancel to return to edit mode."),
+                primaryClick: () => this.props.quitCallback(),
+                secondaryClick: event.data.onReject,
+            });
+        } else {
+            return this.props.quitCallback();
+        }
     }
     /***
      * Starts the widgets inside the dropped snippet.

From 63c325b17fb2eaf64aa2351b79afcc8db8503756 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Mon, 23 May 2022 13:28:10 +0200
Subject: [PATCH 76/88] [FIX] website_sale: fix products header edition

This commit adapts [1] to the new wysiwyg adapter component.

[1]: https://github.com/odoo/odoo/commit/ce067c3b56ca8551f2904f7e91313ebde344a57b

See merge commit for more information.

task-2687506
---
 addons/website_sale/__manifest__.py           |  1 +
 .../wysiwyg_adapter/wysiwyg_adapter.js        | 21 ++++++++++++++++
 .../static/src/js/website_sale.editor.js      | 25 -------------------
 3 files changed, 22 insertions(+), 25 deletions(-)
 create mode 100644 addons/website_sale/static/src/js/components/wysiwyg_adapter/wysiwyg_adapter.js

diff --git a/addons/website_sale/__manifest__.py b/addons/website_sale/__manifest__.py
index 079fe180a4f..6b365ad7eed 100644
--- a/addons/website_sale/__manifest__.py
+++ b/addons/website_sale/__manifest__.py
@@ -75,6 +75,7 @@
         ],
         'website.assets_editor': [
             'website_sale/static/src/js/systray_items/*.js',
+            'website_sale/static/src/js/components/wysiwyg_adapter/wysiwyg_adapter.js',
             'website_sale/static/src/js/website_sale_form_editor.js',
         ],
         'web.assets_common': [
diff --git a/addons/website_sale/static/src/js/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website_sale/static/src/js/components/wysiwyg_adapter/wysiwyg_adapter.js
new file mode 100644
index 00000000000..d794765fce7
--- /dev/null
+++ b/addons/website_sale/static/src/js/components/wysiwyg_adapter/wysiwyg_adapter.js
@@ -0,0 +1,21 @@
+/** @odoo-module **/
+
+import { WysiwygAdapterComponent } from '@website/components/wysiwyg_adapter/wysiwyg_adapter';
+import { patch } from 'web.utils';
+
+patch(WysiwygAdapterComponent.prototype, 'website_sale_wysiwyg_adapter', {
+    /**
+     * @override
+     */
+     _getContentEditableAreas() {
+        return $(this.websiteService.pageDocument).find(this.savableSelector).not('input, [data-oe-readonly],[data-oe-type="monetary"],[data-oe-many2one-id], [data-oe-field="arch"]:empty').filter((_, el) => {
+            return !$(el).closest('.o_not_editable, .oe_website_sale .products_header').length;
+        }).toArray();
+    },
+    /**
+     * @override
+     */
+    _getReadOnlyAreas() {
+        return $(this.websiteService.pageDocument).find("#wrapwrap").find('.oe_website_sale .products_header, .oe_website_sale .products_header a').toArray();
+    },
+});
diff --git a/addons/website_sale/static/src/js/website_sale.editor.js b/addons/website_sale/static/src/js/website_sale.editor.js
index d0b727bfeab..74ca08e79cd 100644
--- a/addons/website_sale/static/src/js/website_sale.editor.js
+++ b/addons/website_sale/static/src/js/website_sale.editor.js
@@ -1,28 +1,3 @@
-odoo.define('website_sale.editMenu', function (require) {
-    'use strict';
-
-var WebsiteEditMenu = require('website.editMenu');
-
-WebsiteEditMenu.include({
-    /**
-     * @override
-     */
-    _getContentEditableAreas () {
-        return $(this.savableSelector).not('input, [data-oe-readonly],[data-oe-type="monetary"],[data-oe-many2one-id], [data-oe-field="arch"]:empty').filter((_, el) => {
-            return !$(el).closest('.o_not_editable, .oe_website_sale .products_header').length;
-        }).toArray();
-    },
-    /**
-     * @override
-     */
-    _getReadOnlyAreas () {
-        return $("#wrapwrap").find('.oe_website_sale .products_header, .oe_website_sale .products_header a').toArray();
-    },
-});
-});
-
-//==============================================================================
-
 odoo.define('website_sale.editor', function (require) {
 'use strict';
 

From 85b1ec969e508ed4e2cf3a414348d6798da52dd5 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Thu, 19 May 2022 17:50:24 +0200
Subject: [PATCH 77/88] [FIX] web, web_editor, website: fix qunit tests

This commit mocks the website service for all the QUnit tests.
As the website module now defines a patch on the WebClient and NavBar
components, adding the website service, this service needs to be mocked
for all the tests. This is done by patching the QUnit.testStart hook.

Also, after the addition of the new media dialog, this component is
mocked at the field html unit test.

See merge commit for more information.

task-2687506
---
 .../tests/core/debug/debug_manager_tests.js   |  3 +-
 addons/web/static/tests/helpers/mock_env.js   |  7 +-
 addons/web/static/tests/setup.js              |  4 +-
 .../static/tests/field_html_tests.js          | 68 ++++++++++---------
 addons/website/__manifest__.py                |  3 +
 .../static/src/components/navbar/navbar.js    | 12 ++--
 .../static/src/services/website_service.js    | 10 ++-
 .../static/tests/website_service_mock.js      | 31 +++++++++
 8 files changed, 95 insertions(+), 43 deletions(-)
 create mode 100644 addons/website/static/tests/website_service_mock.js

diff --git a/addons/web/static/tests/core/debug/debug_manager_tests.js b/addons/web/static/tests/core/debug/debug_manager_tests.js
index da9b649d94e..313bacf90ed 100644
--- a/addons/web/static/tests/core/debug/debug_manager_tests.js
+++ b/addons/web/static/tests/core/debug/debug_manager_tests.js
@@ -10,7 +10,7 @@ import { uiService } from "@web/core/ui/ui_service";
 import { useSetupView } from "@web/views/helpers/view_hook";
 import { ActionDialog } from "@web/webclient/actions/action_dialog";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
-import { makeTestEnv, prepareRegistriesWithCleanup } from "../../helpers/mock_env";
+import { makeTestEnv, utils } from "../../helpers/mock_env";
 import {
     fakeCommandService,
     makeFakeDialogService,
@@ -31,6 +31,7 @@ import { editSearchView, editView } from "@web/views/debug_items";
 import { setDefaults } from "@web/legacy/debug_manager";
 
 const { Component, xml } = owl;
+const { prepareRegistriesWithCleanup } = utils;
 
 export class DebugMenuParent extends Component {
     setup() {
diff --git a/addons/web/static/tests/helpers/mock_env.js b/addons/web/static/tests/helpers/mock_env.js
index 4233d1f4f39..47204fb7249 100644
--- a/addons/web/static/tests/helpers/mock_env.js
+++ b/addons/web/static/tests/helpers/mock_env.js
@@ -44,7 +44,7 @@ export function clearServicesMetadataWithCleanup() {
     registerCleanup(() => patch(SERVICES_METADATA, servicesMetadata));
 }
 
-export function prepareRegistriesWithCleanup() {
+function prepareRegistriesWithCleanup() {
     // Clone registries
     cloneRegistryWithCleanup(registry.category("actions"));
     cloneRegistryWithCleanup(registry.category("views"));
@@ -72,6 +72,11 @@ export function prepareRegistriesWithCleanup() {
     // better design for the way we clear these registries...
 }
 
+// This is exported in a utils object to allow for patching
+export const utils = {
+    prepareRegistriesWithCleanup,
+};
+
 /**
  * @typedef {import("@web/env").OdooEnv} OdooEnv
  */
diff --git a/addons/web/static/tests/setup.js b/addons/web/static/tests/setup.js
index a85f5168aee..5f5d584a0b2 100644
--- a/addons/web/static/tests/setup.js
+++ b/addons/web/static/tests/setup.js
@@ -6,7 +6,7 @@ import { browser, makeRAMLocalStorage } from "@web/core/browser/browser";
 import { patchTimeZone, patchWithCleanup } from "@web/../tests/helpers/utils";
 import { legacyProm } from "web.test_legacy";
 import { registerCleanup } from "./helpers/cleanup";
-import { prepareRegistriesWithCleanup } from "./helpers/mock_env";
+import { utils } from "./helpers/mock_env";
 import { session as sessionInfo } from "@web/session";
 import { prepareLegacyRegistriesWithCleanup } from "./helpers/legacy_env_utils";
 import { config as transitionConfig } from "@web/core/transition";
@@ -17,6 +17,8 @@ import { patch } from "@web/core/utils/patch";
 import { processTemplates } from "@web/core/assets";
 const { App, whenReady, loadFile } = owl;
 
+const { prepareRegistriesWithCleanup } = utils;
+
 patch(App.prototype, "TestOwlApp", {
     destroy() {
         if (!this.destroyed) {
diff --git a/addons/web_editor/static/tests/field_html_tests.js b/addons/web_editor/static/tests/field_html_tests.js
index 19c62309a46..1049adf6866 100644
--- a/addons/web_editor/static/tests/field_html_tests.js
+++ b/addons/web_editor/static/tests/field_html_tests.js
@@ -8,11 +8,13 @@ var testUtils = require('web.test_utils');
 var weTestUtils = require('web_editor.test_utils');
 var core = require('web.core');
 var Wysiwyg = require('web_editor.wysiwyg');
-var MediaDialog = require('wysiwyg.widgets.MediaDialog');
+const { MediaDialogWrapper } = require('@web_editor/components/media_dialog/media_dialog');
 var LinkDialog = require('wysiwyg.widgets.LinkDialog');
 
 const { legacyExtraNextTick, patchWithCleanup } = require("@web/../tests/helpers/utils");
 
+const { useEffect } = owl;
+
 var _t = core._t;
 
 let _formResolveTestPromise;
@@ -347,34 +349,36 @@ QUnit.module('web_editor', {}, function () {
             await testUtils.form.clickEdit(form);
             var $field = form.$('.oe_form_field[name="body"]');
 
-            // the dialog load some xml assets
-            var defMediaDialog = testUtils.makeTestPromise();
-            testUtils.mock.patch(MediaDialog, {
-                init: function () {
-                    this._super.apply(this, arguments);
-                    this.opened(defMediaDialog.resolve.bind(defMediaDialog));
-                }
-            });
-
             var pText = $field.find('.note-editable p').first().contents()[0];
             Wysiwyg.setRange(pText, 1, pText, 2);
 
             await new Promise((resolve) => setTimeout(resolve));
 
             const wysiwyg = $field.find('.note-editable').data('wysiwyg');
+
+            // Mock the MediaDialogWrapper
+            const defMediaDialog = testUtils.makeTestPromise();
+            patchWithCleanup(MediaDialogWrapper.prototype, {
+                setup() {
+                    useEffect(() => {
+                        this.save();
+                    }, () => []);
+                },
+                save() {
+                    const imageEl = document.createElement('img');
+                    imageEl.src = '/web/image/123/transparent.png';
+                    this.props.save(imageEl);
+                    defMediaDialog.resolve();
+                },
+            });
+
             wysiwyg.openMediaDialog();
-
-            // load static xml file (dialog, media dialog, unsplash image widget)
             await defMediaDialog;
 
-            await testUtils.dom.click($('.modal #editor-media-image .o_existing_attachment_cell:first').removeClass('d-none'));
-
             var $editable = form.$('.oe_form_field[name="body"] .note-editable');
             assert.ok($editable.find('img')[0].dataset.src.includes('/web/image/123/transparent.png'),
                 "should have the image in the dom");
 
-            testUtils.mock.unpatch(MediaDialog);
-
             form.destroy();
         });
 
@@ -402,26 +406,30 @@ QUnit.module('web_editor', {}, function () {
             await testUtils.form.clickEdit(form);
             var $field = form.$('.oe_form_field[name="body"]');
 
-            // the dialog load some xml assets
-            var defMediaDialog = testUtils.makeTestPromise();
-            testUtils.mock.patch(MediaDialog, {
-                init: function () {
-                    this._super.apply(this, arguments);
-                    this.opened(defMediaDialog.resolve.bind(defMediaDialog));
-                }
-            });
 
             var pText = $field.find('.note-editable p').first().contents()[0];
             Wysiwyg.setRange(pText, 1, pText, 2);
 
             const wysiwyg = $field.find('.note-editable').data('wysiwyg');
-            wysiwyg.openMediaDialog();
 
-            // load static xml file (dialog, media dialog, unsplash image widget)
+            // Mock the MediaDialogWrapper
+            const defMediaDialog = testUtils.makeTestPromise();
+            patchWithCleanup(MediaDialogWrapper.prototype, {
+                setup() {
+                    useEffect(() => {
+                        this.save();
+                    }, () => []);
+                },
+                save() {
+                    const iconEl = document.createElement('span');
+                    iconEl.classList.add('fa', 'fa-glass');
+                    this.props.save(iconEl);
+                    defMediaDialog.resolve();
+                },
+            });
+
+            wysiwyg.openMediaDialog();
             await defMediaDialog;
-            $('.modal .tab-content .tab-pane').removeClass('fade'); // to be sync in test
-            await testUtils.dom.click($('.modal a[aria-controls="editor-media-icon"]'));
-            await testUtils.dom.click($('.modal #editor-media-icon .font-icons-icon.fa-glass'));
 
             var $editable = form.$('.oe_form_field[name="body"] .note-editable');
 
@@ -429,8 +437,6 @@ QUnit.module('web_editor', {}, function () {
                 '<p>t<span class="fa fa-glass"></span>to toto toto</p><p>tata</p>',
                 "should have the image in the dom");
 
-            testUtils.mock.unpatch(MediaDialog);
-
             form.destroy();
         });
 
diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index b6a0cb53598..4e3a07ab426 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -183,6 +183,9 @@
             'website/static/tests/dashboard_tests.js',
             'website/static/tests/website_tests.js',
         ],
+        'web.tests_assets': [
+            'website/static/tests/website_service_mock.js',
+        ],
         'web._assets_frontend_helpers': [
             ('prepend', 'website/static/src/scss/bootstrap_overridden.scss'),
         ],
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
index d89fe6516f4..3dbb292448a 100644
--- a/addons/website/static/src/components/navbar/navbar.js
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -16,8 +16,6 @@ patch(NavBar.prototype, 'website_navbar', {
     setup() {
         this._super();
         this.websiteService = useService('website');
-        this.dialogService = useService('dialog');
-        this.user = useService('user');
         this.websiteContext = useState(this.websiteService.context);
         this.aceEditor = WebsiteAceEditor;
 
@@ -41,11 +39,11 @@ patch(NavBar.prototype, 'website_navbar', {
 
         this.websiteEditingMenus = {
             'website.menu_edit_menu': {
-                component: EditMenuDialog,
+                Component: EditMenuDialog,
                 isDisplayed: () => !!this.websiteService.currentWebsite,
             },
             'website.menu_optimize_seo': {
-                component: OptimizeSEODialog,
+                Component: OptimizeSEODialog,
                 isDisplayed: () => this.websiteService.currentWebsite && !!this.websiteService.currentWebsite.metadata.mainObject,
             },
             'website.menu_ace_editor': {
@@ -59,7 +57,7 @@ patch(NavBar.prototype, 'website_navbar', {
         };
 
         onWillStart(async () => {
-            this.isWebsitePublisher = await this.user.hasGroup('website.group_website_publisher');
+            this.isWebsitePublisher = await this.websiteService.isPublisher();
         });
     },
 
@@ -112,8 +110,8 @@ patch(NavBar.prototype, 'website_navbar', {
         if (websiteMenu) {
             return websiteMenu.openWidget ?
                 websiteMenu.openWidget() :
-                this.dialogService.add(
-                    websiteMenu.component,
+                this.websiteService.openMenuDialog(
+                    websiteMenu.Component,
                     websiteMenu.getProps && websiteMenu.getProps(),
                 );
         }
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index abad2e76e34..50cadc48a58 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -23,8 +23,8 @@ export const unslugHtmlDataObject = (repr) => {
 };
 
 export const websiteService = {
-    dependencies: ['orm', 'action', 'hotkey'],
-    async start(env, { orm, action, hotkey }) {
+    dependencies: ['orm', 'action', 'user', 'dialog', 'hotkey'],
+    async start(env, { orm, action, user, dialog, hotkey }) {
         let websites = [];
         let currentWebsiteId;
         let currentMetadata = {};
@@ -120,6 +120,12 @@ export const websiteService = {
             get editedObjectPath() {
                 return editedObjectPath;
             },
+            isPublisher() {
+                return user.hasGroup('website.group_website_publisher');
+            },
+            openMenuDialog(Component, props) {
+                return dialog.add(Component, props);
+            },
             goToWebsite({ websiteId, path, edition, translation } = {}) {
                 action.doAction('website.website_preview', {
                     clearBreadcrumbs: true,
diff --git a/addons/website/static/tests/website_service_mock.js b/addons/website/static/tests/website_service_mock.js
new file mode 100644
index 00000000000..c89e167f041
--- /dev/null
+++ b/addons/website/static/tests/website_service_mock.js
@@ -0,0 +1,31 @@
+/** @odoo-module */
+
+import { patch } from '@web/core/utils/patch';
+import { registry } from '@web/core/registry';
+import { utils, clearRegistryWithCleanup } from '@web/../tests/helpers/mock_env';
+
+const { prepareRegistriesWithCleanup } = utils;
+
+function makeFakeWebsiteService() {
+    return {
+        start() {
+            return {
+                get context() {
+                    return {};
+                },
+                isPublisher() {
+                    return true;
+                },
+            };
+        }
+    };
+}
+
+const serviceRegistry = registry.category('services');
+patch(utils, 'website_test_registries', {
+    prepareRegistriesWithCleanup() {
+        prepareRegistriesWithCleanup(...arguments);
+        serviceRegistry.add('website', makeFakeWebsiteService());
+        clearRegistryWithCleanup(registry.category('website_systray'));
+    },
+});

From 8eb0ca54200f0f8e1078bb6a0d507e747ccea122 Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Tue, 24 May 2022 12:54:28 +0200
Subject: [PATCH 78/88] [FIX] web_editor: clear tooltips before quitting editor

See merge commit for more information.

task-2687506
---
 .../web_editor/static/src/js/wysiwyg/wysiwyg.js   | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 8581e8d6aa9..5ff21794111 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -94,6 +94,7 @@ const Wysiwyg = Widget.extend({
         // more heuristics to bypass the limitation.
         this._isOnline = true;
         this._signalOnline = this._signalOnline.bind(this);
+        this.tooltipTimeouts = [];
     },
     /**
      *
@@ -680,6 +681,9 @@ const Wysiwyg = Widget.extend({
             window.removeEventListener('offline', this._checkConnectionChange);
         }
         window.removeEventListener('beforeunload', this._onBeforeUnload);
+        for (const timeout of this.tooltipTimeouts) {
+            clearTimeout(timeout);
+        }
         this._super();
     },
     /**
@@ -1700,16 +1704,19 @@ const Wysiwyg = Widget.extend({
         if (isInMedia || (link && link.isContentEditable)) {
             // Handle the media/link's tooltip.
             this.showTooltip = true;
-            setTimeout(() => {
+            this.tooltipTimeouts.push(setTimeout(() => {
                 // Do not show tooltip on double-click and if there is already one
                 if (!this.showTooltip || $target.attr('title') !== undefined) {
                     return;
                 }
                 this.odooEditor.observerUnactive();
-                $target.tooltip({title: _t('Double-click to edit'), trigger: 'manual', container: 'body'}).tooltip('show');
+                // Tooltips need to be cleared before leaving the editor.
+                this.saving_mutex.exec(() => {
+                    $target.tooltip({title: _t('Double-click to edit'), trigger: 'manual', container: 'body'}).tooltip('show');
+                });
                 this.odooEditor.observerActive();
-                setTimeout(() => $target.tooltip('dispose'), 800);
-            }, 400);
+                this.tooltipTimeouts.push(setTimeout(() => $target.tooltip('dispose'), 800));
+            }, 400));
         }
         // Update color of already opened colorpickers.
         setTimeout(() => {

From 2781214d7e748a485d2cceb408fbff5c7085c27e Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Mon, 30 May 2022 18:54:20 +0200
Subject: [PATCH 79/88] [FIX] website: remove welcome message before starting
 the wysiwyg

Before this commit, the welcome message was removed at the level of the
client action, independently from the wysiwyg initialisation.

As the welcome message is directly inserted into the iframe's
contentDocument, it could lead to a race condition with the editor's
observer: if the wysiwyg was already started when the client
action was removing the message, that mutation was recorded in the
history (therefore, when switching to edit mode and clicking on discard
would show the "Are you sure to discard ?" toaster).

Now, the welcome message is removed before starting the wysiwyg using a
removeWelcomeMessage callback.

See merge commit for more information.

task-2687506
---
 .../static/src/js/editor/snippets.editor.js   | 27 ++++++++++++++-----
 .../website_preview/website_preview.js        | 16 +++++------
 .../website_preview/website_preview.xml       |  6 +++--
 .../static/src/components/editor/editor.xml   |  3 ++-
 .../wysiwyg_adapter/wysiwyg_adapter.js        |  7 +++++
 5 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 3f936297eff..c39c09f0a9f 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -3411,7 +3411,7 @@ var SnippetsMenu = Widget.extend({
                 editor.toggleOverlay(false);
             });
             this.trigger_up('request_cancel', {onReject: after});
-        }, this.$el[0].querySelector('button[data-action=cancel]'));
+        }, this.$el[0].querySelector('button[data-action=cancel]'), false);
     },
     /**
      * Preview on mobile.
@@ -3460,18 +3460,34 @@ var SnippetsMenu = Widget.extend({
             }
         });
     },
-    async _buttonClick(action, button) {
+    /***
+     * Display a loading effect on the clicked button, and disables the other
+     * buttons. Passes an argument to restore the buttons to their normal
+     * state to the function to execute.
+     *
+     * @param action {Function} The action to execute
+     * @param button {HTMLElement} The button element
+     * @param addLoadingEffect {boolean} whether or not to add a loading effect.
+     * @returns {Promise<void>}
+     * @private
+     */
+    async _buttonClick(action, button, addLoadingEffect = true) {
         if (this._buttonAction) {
             return;
         }
         this._buttonAction = true;
-        const removeLoadingEffect = dom.addButtonLoadingEffect(button);
+        let removeLoadingEffect;
+        if (addLoadingEffect) {
+            removeLoadingEffect = dom.addButtonLoadingEffect(button);
+        }
         const actionButtons = this.$el[0].querySelectorAll('[data-action]');
         for (const actionButton of actionButtons) {
             actionButton.disabled = true;
         }
-        const after = () =>  {
-            removeLoadingEffect();
+        const after = () => {
+            if (removeLoadingEffect) {
+                removeLoadingEffect();
+            }
             for (const actionButton of actionButtons) {
                 actionButton.disabled = false;
             }
@@ -3479,7 +3495,6 @@ var SnippetsMenu = Widget.extend({
         await action(after);
         this._buttonAction = false;
     },
-
 });
 
 return {
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 04b74732d10..09d333e17a9 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -88,16 +88,6 @@ export class WebsitePreview extends Component {
             };
         }, () => [this.props.action.context.params]);
 
-        useEffect(() => {
-            if (this.websiteContext.edition) {
-                if (this.$welcomeMessage) {
-                    this.$welcomeMessage.detach();
-                }
-            } else {
-                this.addWelcomeMessage();
-            }
-        }, () => [this.websiteContext.edition]);
-
         useEffect(() => {
             this.websiteService.blockIframe();
             this.iframe.el.addEventListener('OdooFrameContentLoaded', () => this.websiteService.unblockIframe(), { once: true });
@@ -172,6 +162,12 @@ export class WebsitePreview extends Component {
         }
     }
 
+    removeWelcomeMessage() {
+        if (this.$welcomeMessage) {
+            this.$welcomeMessage.detach();
+        }
+    }
+
     /**
      * Returns true if the url should be opened in the top
      * window.
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml
index aa1e9a567f4..32e33efae3c 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.xml
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml
@@ -26,9 +26,11 @@
                 is-ready="false"/>
         </div>
         <WebsiteEditorComponent t-if="websiteContext.edition"
-            reloadIframe.bind="this.reloadIframe"/>
+            reloadIframe.bind="this.reloadIframe"
+            removeWelcomeMessage.bind="this.removeWelcomeMessage"/>
         <WebsiteTranslator t-if="websiteContext.translation"
-            reloadIframe.bind="this.reloadIframe"/>
+            reloadIframe.bind="this.reloadIframe"
+            removeWelcomeMessage.bind="this.removeWelcomeMessage"/>
     </div>
 </t>
 
diff --git a/addons/website/static/src/components/editor/editor.xml b/addons/website/static/src/components/editor/editor.xml
index c944885fd55..e5fb7e43c2d 100644
--- a/addons/website/static/src/components/editor/editor.xml
+++ b/addons/website/static/src/components/editor/editor.xml
@@ -14,7 +14,8 @@
             wysiwygOptions="this.wysiwygOptions"
             editableElements="this.editableElements"
             savableSelector="this.savableSelector"
-            beforeEditorActive="this.beforeEditorActive"/>
+            beforeEditorActive="this.beforeEditorActive"
+            removeWelcomeMessage="this.props.removeWelcomeMessage"/>
     </div>
 </t>
 </templates>
diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
index a568713f721..c6c83d4e3ee 100644
--- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
@@ -84,6 +84,13 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
             };
         }, () => []);
     }
+    /**
+     * @override
+     */
+    onWillStart() {
+        this.props.removeWelcomeMessage();
+        return super.onWillStart();
+    }
     /**
      * Stop the widgets and save the content.
      *

From 95c8f1a6a8c8a723ccf369ff15993656f2a21208 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Tue, 31 May 2022 17:23:02 +0200
Subject: [PATCH 80/88] [FIX] website: fix restricted_editor test

See merge commit for more information.

task-2687506
---
 .../website_preview/website_preview.js        |  3 +--
 .../static/src/components/navbar/navbar.js    | 10 +++-------
 .../static/src/services/website_service.js    | 20 ++++++++++++++++---
 .../src/systray_items/website_switcher.js     |  1 +
 .../static/tests/tours/restricted_editor.js   |  7 +++----
 .../static/tests/website_service_mock.js      |  6 +++++-
 addons/website/tests/test_ui.py               |  2 +-
 7 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index 09d333e17a9..ba4df10f974 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -59,7 +59,6 @@ export class WebsitePreview extends Component {
         this.websiteContext = useState(this.websiteService.context);
 
         onWillStart(async () => {
-            this.isWebsitePublisher = await this.user.hasGroup('website.group_website_publisher');
             await this.websiteService.fetchWebsites();
             const encodedPath = encodeURIComponent(this.path);
             if (this.websiteDomain && this.websiteDomain !== window.location.origin) {
@@ -151,7 +150,7 @@ export class WebsitePreview extends Component {
     }
 
     addWelcomeMessage() {
-        if (this.isWebsitePublisher) {
+        if (this.websiteService.isPublisher) {
             const $wrap = $(this.iframe.el.contentDocument.querySelector('#wrapwrap.homepage')).find('#wrap');
             if ($wrap.length && $wrap.html().trim() === '') {
                 this.$welcomeMessage = $(core.qweb.render('website.homepage_editor_welcome_message'));
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
index 3dbb292448a..1ad5eae5872 100644
--- a/addons/website/static/src/components/navbar/navbar.js
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -10,7 +10,7 @@ import {WebsiteAceEditor, AceEditorAdapterComponent} from '@website/components/a
 import {PagePropertiesDialogWrapper} from '@website/components/dialog/page_properties';
 
 const websiteSystrayRegistry = registry.category('website_systray');
-const { useState, onWillStart } = owl;
+const { useState } = owl;
 
 patch(NavBar.prototype, 'website_navbar', {
     setup() {
@@ -55,17 +55,13 @@ patch(NavBar.prototype, 'website_navbar', {
                 isDisplayed: () => this.canShowPageProperties(),
             },
         };
-
-        onWillStart(async () => {
-            this.isWebsitePublisher = await this.websiteService.isPublisher();
-        });
     },
 
     filterWebsiteMenus(sections) {
         const filteredSections = [];
         for (const section of sections) {
             const isWebsiteCustomMenu = this.websiteEditingMenus[section.xmlid];
-            const displayWebsiteCustomMenu = isWebsiteCustomMenu && this.isWebsitePublisher && this.websiteEditingMenus[section.xmlid].isDisplayed();
+            const displayWebsiteCustomMenu = isWebsiteCustomMenu && this.websiteService.isPublisher && this.websiteEditingMenus[section.xmlid].isDisplayed();
             if (!isWebsiteCustomMenu || displayWebsiteCustomMenu) {
                 let subSections = [];
                 if (section.childrenTree.length) {
@@ -81,7 +77,7 @@ patch(NavBar.prototype, 'website_navbar', {
      * @override
      */
     get systrayItems() {
-        if (this.websiteService.currentWebsite && this.isWebsitePublisher) {
+        if (this.websiteService.currentWebsite && this.websiteService.isPublisher) {
             return websiteSystrayRegistry
                 .getEntries()
                 .map(([key, value], index) => ({ key, ...value, index }))
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 50cadc48a58..7b58cbcd242 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -34,6 +34,8 @@ export const websiteService = {
         let editedObjectPath;
         let websiteRootInstance;
         let Wysiwyg;
+        let isPublisher;
+        let hasMultiWebsites;
         const context = reactive({
             showNewContentModal: false,
             showAceEditor: false,
@@ -120,8 +122,11 @@ export const websiteService = {
             get editedObjectPath() {
                 return editedObjectPath;
             },
-            isPublisher() {
-                return user.hasGroup('website.group_website_publisher');
+            get isPublisher() {
+                return isPublisher === true;
+            },
+            get hasMultiWebsites() {
+                return hasMultiWebsites === true;
             },
             openMenuDialog(Component, props) {
                 return dialog.add(Component, props);
@@ -140,12 +145,21 @@ export const websiteService = {
                 });
             },
             async fetchWebsites() {
+                // Fetch user groups, before fetching the websites.
+                [isPublisher, hasMultiWebsites] = await Promise.all([
+                    user.hasGroup('website.group_website_publisher'),
+                    user.hasGroup('website.group_multi_website'),
+                ]);
+
                 const [currentWebsiteRepr, allWebsites] = await Promise.all([
                     orm.call('website', 'get_current_website'),
-                    orm.searchRead('website', []),
+                    hasMultiWebsites ? orm.searchRead('website', [], ['domain', 'id', 'name']) : [],
                 ]);
                 websites = [...allWebsites];
                 setCurrentWebsiteId(unslugHtmlDataObject(currentWebsiteRepr).id);
+                if (!websites.length) {
+                    websites = [{ id: currentWebsiteId }];
+                }
             },
             async loadWysiwyg() {
                 if (!Wysiwyg) {
diff --git a/addons/website/static/src/systray_items/website_switcher.js b/addons/website/static/src/systray_items/website_switcher.js
index 87e74404369..ec01da957e3 100644
--- a/addons/website/static/src/systray_items/website_switcher.js
+++ b/addons/website/static/src/systray_items/website_switcher.js
@@ -36,6 +36,7 @@ WebsiteSwitcherSystray.components = {
 
 export const systrayItem = {
     Component: WebsiteSwitcherSystray,
+    isDisplayed: env => env.services.website.hasMultiWebsites,
 };
 
 registry.category("website_systray").add("WebsiteSwitcher", systrayItem, { sequence: 11 });
diff --git a/addons/website/static/tests/tours/restricted_editor.js b/addons/website/static/tests/tours/restricted_editor.js
index c1da7f5a279..187a1668a25 100644
--- a/addons/website/static/tests/tours/restricted_editor.js
+++ b/addons/website/static/tests/tours/restricted_editor.js
@@ -1,15 +1,14 @@
 odoo.define("website.tour.restricted_editor", function (require) {
 "use strict";
 
-var tour = require("web_tour.tour");
+var wTourUtils = require("website.tour_utils");
 
-tour.register("restricted_editor", {
+wTourUtils.registerEditionTour("restricted_editor", {
     test: true,
     url: "/",
 }, [{
-    trigger: 'a.o_frontend_to_backend_edit_btn',
+    trigger: '.o_edit_website_container a',
     content: "Click \"EDIT\" button of website as Restricted Editor",
-    extra_trigger: ".homepage",
 }, {
     trigger: '#oe_snippets.o_loaded',
     content: "Check that the snippets loaded properly",
diff --git a/addons/website/static/tests/website_service_mock.js b/addons/website/static/tests/website_service_mock.js
index c89e167f041..87fb39adff9 100644
--- a/addons/website/static/tests/website_service_mock.js
+++ b/addons/website/static/tests/website_service_mock.js
@@ -13,9 +13,13 @@ function makeFakeWebsiteService() {
                 get context() {
                     return {};
                 },
-                isPublisher() {
+                get isPublisher() {
                     return true;
                 },
+                get hasMultiWebsites() {
+                    return true;
+                },
+                async fetchUserGroups() {},
             };
         }
     };
diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py
index d6aac693fc7..10ced6419db 100644
--- a/addons/website/tests/test_ui.py
+++ b/addons/website/tests/test_ui.py
@@ -138,7 +138,7 @@ class TestUi(odoo.tests.HttpCase):
                     self.ref('website.group_website_publisher')
                 ])]
         })
-        self.start_tour("/", 'restricted_editor', login='restricted')
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'restricted_editor', login='restricted')
 
     def test_03_backend_dashboard(self):
         self.start_tour("/", 'backend_dashboard', login='admin')

From 06516329a00c4554b7dd9f68f51b7d69ca81c813 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Thu, 2 Jun 2022 09:29:50 +0200
Subject: [PATCH 81/88] [IMP] website, web_editor: add autofocus on form inputs

This commit adds the autofocus on inputs on form inputs.
It also adds inputs validation on the Edit Menu dialog, and
autocomplete.

The validation is done with a useControlled input hook, taking an
initial value and a validation function (isEmpty, ...). It returns a
state holding two value: the actual value of the input and the boolean
hasError (used to display or not an is-error css class), as well as the
validation function, wrapped to update the hasError state value.

The existing jquery autocomplete widget is reused, with the a mapping
object (a fake widget that will use the Component's rpc service instead
of the legacy Widget's one).

See merge commit for more information.

task-2687506
---
 .../components/media_dialog/search_media.js   |  4 +-
 .../static/src/components/dialog/dialog.js    |  9 ++-
 .../static/src/components/dialog/edit_menu.js | 68 ++++++++++++++++---
 .../src/components/dialog/edit_menu.scss      | 16 +++++
 .../src/components/dialog/edit_menu.xml       |  8 +--
 .../src/components/dialog/page_properties.js  |  5 +-
 .../static/src/components/dialog/seo.js       |  3 +-
 .../static/src/components/dialog/seo.xml      |  2 +-
 8 files changed, 94 insertions(+), 21 deletions(-)
 create mode 100644 addons/website/static/src/components/dialog/edit_menu.scss

diff --git a/addons/web_editor/static/src/components/media_dialog/search_media.js b/addons/web_editor/static/src/components/media_dialog/search_media.js
index ab05905bebb..6b964429179 100644
--- a/addons/web_editor/static/src/components/media_dialog/search_media.js
+++ b/addons/web_editor/static/src/components/media_dialog/search_media.js
@@ -1,11 +1,13 @@
 /** @odoo-module **/
 
 import { debounce } from '@web/core/utils/timing';
+import { useAutofocus } from '@web/core/utils/hooks';
 
 const { Component, onWillUnmount, xml } = owl;
 
 export class SearchMedia extends Component {
     setup() {
+        useAutofocus();
         this.search = debounce((ev) => this.props.search(ev.target.value), 1000);
         onWillUnmount(() => {
             this.search.cancel();
@@ -14,7 +16,7 @@ export class SearchMedia extends Component {
 }
 SearchMedia.template = xml`
 <div class="input-group mr-auto">
-    <input type="text" class="form-control o_we_search" t-att-placeholder="props.searchPlaceholder.trim()" t-att-value="props.needle" t-on-input="search"/>
+    <input type="text" class="form-control o_we_search" t-att-placeholder="props.searchPlaceholder.trim()" t-att-value="props.needle" t-on-input="search" t-ref="autofocus"/>
     <div class="input-group-append">
         <div class="input-group-text o_we_search_icon">
             <i class="fa fa-search" title="Search" role="img" aria-label="Search"/>
diff --git a/addons/website/static/src/components/dialog/dialog.js b/addons/website/static/src/components/dialog/dialog.js
index 041c5c9981b..c119fe15602 100644
--- a/addons/website/static/src/components/dialog/dialog.js
+++ b/addons/website/static/src/components/dialog/dialog.js
@@ -1,11 +1,14 @@
 /** @odoo-module **/
 
+import { useAutofocus } from '@web/core/utils/hooks';
 import { Dialog } from '@web/core/dialog/dialog';
 import { Switch } from '@website/components/switch/switch';
 import { _t } from 'web.core';
 
 const { xml, useState, Component } = owl;
 
+const NO_OP = () => {};
+
 export class WebsiteDialog extends Component {
     async primaryClick() {
         if (this.props.primaryClick) {
@@ -41,7 +44,7 @@ WebsiteDialog.props = {
     secondaryTitle: { type: String, optional: true },
     secondaryClick: { type: Function, optional: true },
     showSecondaryButton: { type: Boolean, optional: true },
-    close: Function,
+    close: { type: Function, optional: true },
     closeOnClick: { type: Boolean, optional: true },
     body: { type: String, optional: true },
     slots: { type: Object, optional: true },
@@ -54,12 +57,14 @@ WebsiteDialog.defaultProps = {
     showSecondaryButton: true,
     size: "md",
     closeOnClick: true,
+    close: NO_OP,
 };
 WebsiteDialog.template = "website.WebsiteDialog";
 
 export class AddPageDialog extends Component {
     setup() {
         super.setup();
+        useAutofocus();
 
         this.title = this.env._t("New Page");
         this.primaryTitle = this.env._t("Create");
@@ -94,7 +99,7 @@ AddPageDialog.template = xml`
             Page Title
         </label>
         <div class="col-md-9">
-            <input type="text" t-model="state.name" class="form-control" required="required"/>
+            <input type="text" t-model="state.name" class="form-control" required="required" t-ref="autofocus"/>
         </div>
     </div>
     <Switch extraClasses="'offset-md-3 col-md-9 text-left'" label="switchLabel" value="state.addMenu" onChange="(value) => this.onChangeAddMenu(value)"/>
diff --git a/addons/website/static/src/components/dialog/edit_menu.js b/addons/website/static/src/components/dialog/edit_menu.js
index af60f948af8..d203acf501e 100644
--- a/addons/website/static/src/components/dialog/edit_menu.js
+++ b/addons/website/static/src/components/dialog/edit_menu.js
@@ -1,22 +1,74 @@
 /** @odoo-module **/
 
-import { useService } from '@web/core/utils/hooks';
+import { useService, useAutofocus } from '@web/core/utils/hooks';
+import wUtils from 'website.utils';
 import { WebsiteDialog } from './dialog';
 
 const { Component, useState, useEffect, onWillStart, useRef, onMounted } = owl;
 
+const useControlledInput = (initialValue, validate) => {
+    const input = useState({
+        value: initialValue,
+        hasError: false,
+    });
+
+    const isValid = () => {
+        if (validate(input.value)) {
+            return true;
+        }
+        input.hasError = true;
+        return false;
+    };
+
+    useEffect(() => {
+        input.hasError = false;
+    }, () => [input.value]);
+
+    return {
+        input,
+        isValid,
+    };
+};
+
 export class MenuDialog extends Component {
     setup() {
+        this.rpc = useService('rpc');
+        this.website = useService('website');
         this.title = this.env._t("Add a menu item");
+        useAutofocus();
 
-        this.state = useState({
-            name: this.props.name,
-            url: this.props.url,
-        });
+        this.name = useControlledInput(this.props.name, value => !!value);
+        this.url = useControlledInput(this.props.url, value => !!value);
+        this.urlInputRef = useRef('url-input');
+
+        useEffect(() => {
+            const $input = $(this.urlInputRef.el);
+            // This is only there to avoid changing the
+            // wUtils.autocompleteWithPages api
+            const fakeWidget = {
+                _rpc: ({ route, params }) => this.rpc(route, params),
+                trigger_up: () => {
+                    this.url.input.value = this.urlInputRef.el.value;
+                },
+            };
+            const options = {
+                body: this.website.pageDocument.body,
+                classes: {
+                    'ui-autocomplete': 'o_edit_menu_autocomplete'
+                },
+            };
+            wUtils.autocompleteWithPages(fakeWidget, $input, options);
+            return () => $input.urlcomplete('destroy');
+        }, () => []);
     }
 
     onClickOk() {
-        this.props.save(this.state.name, this.state.url);
+        if (this.name.isValid()) {
+            if (this.props.isMegaMenu || this.url.isValid()) {
+                this.props.save(this.name.input.value, this.url.input.value);
+                this.props.close();
+            }
+        }
     }
 }
 MenuDialog.template = 'website.MenuDialog';
@@ -27,10 +79,6 @@ MenuDialog.props = {
     save: Function,
     close: Function,
 };
-MenuDialog.defaultProps = {
-    name: '',
-    url: '/',
-};
 MenuDialog.components = { WebsiteDialog };
 
 class MenuRow extends Component {
diff --git a/addons/website/static/src/components/dialog/edit_menu.scss b/addons/website/static/src/components/dialog/edit_menu.scss
new file mode 100644
index 00000000000..21693e24246
--- /dev/null
+++ b/addons/website/static/src/components/dialog/edit_menu.scss
@@ -0,0 +1,16 @@
+.ui-autocomplete.o_edit_menu_autocomplete {
+    max-height: 50vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    .ui-menu-item {
+        padding: 0;
+        > .ui-state-active {
+            border: none;
+            font-weight: normal;
+            margin: 0;
+        }
+    }
+    .font-weight-bold {
+        font-weight: 700 !important;
+    }
+}
diff --git a/addons/website/static/src/components/dialog/edit_menu.xml b/addons/website/static/src/components/dialog/edit_menu.xml
index d9f7d46515c..dbb50971908 100644
--- a/addons/website/static/src/components/dialog/edit_menu.xml
+++ b/addons/website/static/src/components/dialog/edit_menu.xml
@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 <t t-name="website.MenuDialog" owl="1">
-    <WebsiteDialog close="props.close" title="title" primaryClick="() => this.onClickOk()">
-        <div class="form-group row">
+    <WebsiteDialog title="title" closeOnClick="false" primaryClick.bind="this.onClickOk" secondaryClick="props.close">
+        <div class="o_menu_dialog_form form-group row">
             <label class="col-form-label col-md-3">
                 Name
             </label>
             <div class="col-md-9">
-                <input type="text" t-model="state.name" class="form-control" required="required"/>
+                <input type="text" t-model="name.input.value" class="form-control" t-att-class="{ 'is-invalid': name.input.hasError }" t-ref="autofocus"/>
             </div>
         </div>
         <div t-if="!props.isMegaMenu" class="form-group row">
@@ -15,7 +15,7 @@
                 Url or Email
             </label>
             <div class="col-md-9">
-                <input id="url_input" type="text" t-model="state.url" class="form-control" required="required"/>
+                <input id="url_input" t-ref="url-input" type="text" t-model="url.input.value" class="form-control" t-att-class="{ 'is-invalid': url.input.hasError }"/>
             </div>
         </div>
     </WebsiteDialog>
diff --git a/addons/website/static/src/components/dialog/page_properties.js b/addons/website/static/src/components/dialog/page_properties.js
index 9cdc443fdb6..f8eeeb358d0 100644
--- a/addons/website/static/src/components/dialog/page_properties.js
+++ b/addons/website/static/src/components/dialog/page_properties.js
@@ -1,7 +1,7 @@
 /** @odoo-module **/
 
 import {CheckBox} from '@web/core/checkbox/checkbox';
-import {useService} from "@web/core/utils/hooks";
+import {useService, useAutofocus} from "@web/core/utils/hooks";
 import {useWowlService} from '@web/legacy/utils';
 import {WebsiteDialog} from './dialog';
 import {FormViewDialog} from 'web.view_dialogs';
@@ -122,6 +122,7 @@ export class DuplicatePageDialog extends Component {
     setup() {
         this.orm = useService('orm');
         this.website = useService('website');
+        useAutofocus();
 
         this.state = useState({
             name: '',
@@ -148,7 +149,7 @@ DuplicatePageDialog.template = xml`
             Page Name
         </label>
         <div class="col-md-9">
-            <input type="text" t-model="state.name" class="form-control" required="required"/>
+            <input type="text" t-model="state.name" class="form-control" required="required" t-ref="autofocus"/>
         </div>
     </div>
 </WebsiteDialog>
diff --git a/addons/website/static/src/components/dialog/seo.js b/addons/website/static/src/components/dialog/seo.js
index 1d82e1bd820..26489d92ca0 100644
--- a/addons/website/static/src/components/dialog/seo.js
+++ b/addons/website/static/src/components/dialog/seo.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { useService } from '@web/core/utils/hooks';
+import { useService, useAutofocus } from '@web/core/utils/hooks';
 import { MediaDialog } from '@web_editor/components/media_dialog/media_dialog';
 import { WebsiteDialog } from './dialog';
 
@@ -261,6 +261,7 @@ SEOPreview.props = {
 class TitleDescription extends Component {
     setup() {
         this.seoContext = useState(seoContext);
+        useAutofocus();
 
         this.previousSeoName = this.seoContext.seoName;
 
diff --git a/addons/website/static/src/components/dialog/seo.xml b/addons/website/static/src/components/dialog/seo.xml
index 763a6b042d2..3e3dc5eb246 100644
--- a/addons/website/static/src/components/dialog/seo.xml
+++ b/addons/website/static/src/components/dialog/seo.xml
@@ -127,7 +127,7 @@
                     <label for="website_meta_title">
                         Title <i class="fa fa-question-circle-o" title="The title will take a default value unless you specify one."/>
                     </label>
-                    <input type="text" t-model="seoContext.title" t-att-disabled="!props.canEditTitle" class="form-control" placeholder="Keep empty to use default value" maxlength="70" size="70"/>
+                    <input type="text" t-model="seoContext.title" t-att-disabled="!props.canEditTitle" class="form-control" placeholder="Keep empty to use default value" maxlength="70" size="70" t-ref="autofocus"/>
                 </div>
                 <div class="form-group">
                     <label for="website_meta_description">

From ac4c61bd8799f0abfe22343238eb1bc88d30f327 Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Tue, 7 Jun 2022 15:07:37 +0200
Subject: [PATCH 82/88] [FIX] web_editor, website: prevent race condition when
 closing s_popup

When clicking on save while having a popup open, in some conditions,
a traceback can appear due to a race condtion.

This is caused by an event listener which updates the visibility status
of said popup in the editor panel. When saving the popup is closed,
and the cleanForSave starts, but while the popup is closing an event
is triggered which recreates editors (_onSnippetOptionVisibilityUpdate).

This commit aims at mitigating the appearance of this race condition
by listening to the .hide event instead of the .hidden, which means
the event is fired right away instead of 400ms later.

See merge commit for more information.

task-2687506
---
 addons/web_editor/static/src/js/editor/snippets.editor.js     | 4 ++++
 addons/website/static/src/snippets/s_popup/options.js         | 2 +-
 addons/website/static/tests/tours/snippet_popup_add_remove.js | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index c39c09f0a9f..688b731ebda 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -1484,6 +1484,10 @@ var SnippetsMenu = Widget.extend({
         // Next, notify that we want the DOM to be cleaned (e.g. in website this
         // may be the moment where the public widgets need to be destroyed).
         this.trigger_up('ready_to_clean_for_save');
+        // Wait for the mutex a second time as some options do editor actions when
+        // their snippets are destroyed. (E.g. s_popup triggers visibility updates
+        // when hidden, destroying the widget hides it.)
+        await this._mutex.getUnlockedDef();
 
         // Then destroy all snippet editors, making them call their own
         // "clean for save" methods (and options ones).
diff --git a/addons/website/static/src/snippets/s_popup/options.js b/addons/website/static/src/snippets/s_popup/options.js
index 96e36101611..d7f6bfd9628 100644
--- a/addons/website/static/src/snippets/s_popup/options.js
+++ b/addons/website/static/src/snippets/s_popup/options.js
@@ -29,7 +29,7 @@ options.registry.SnippetPopup = options.Class.extend({
                 iframe.src = media.dataset.oeExpression || media.dataset.src; // TODO still oeExpression to remove someday
             });
         });
-        this.$iframeTarget.on('hidden.bs.modal.SnippetPopup', () => {
+        this.$iframeTarget.on('hide.bs.modal.SnippetPopup', () => {
             this.trigger_up('snippet_option_visibility_update', {show: false});
             this._removeIframeSrc();
         });
diff --git a/addons/website/static/tests/tours/snippet_popup_add_remove.js b/addons/website/static/tests/tours/snippet_popup_add_remove.js
index b18db63fd5c..7cc04aa6430 100644
--- a/addons/website/static/tests/tours/snippet_popup_add_remove.js
+++ b/addons/website/static/tests/tours/snippet_popup_add_remove.js
@@ -22,7 +22,7 @@ wTourUtils.registerEditionTour('snippet_popup_add_remove', {
 }, {
     content: `Remove the s_popup snippet`,
     in_modal: false,
-    trigger: '.o_we_customize_panel we-button.oe_snippet_remove:first',
+    trigger: '.o_we_customize_panel we-customizeblock-options we-button.oe_snippet_remove:first',
 }, {
     content: 'Check the s_popup was removed',
     in_modal: false,

From 69af7dcfeb3ff95c40b00ef0cc7c5c0e4021f9d2 Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Tue, 7 Jun 2022 15:12:08 +0200
Subject: [PATCH 83/88] [IMP] website, web_editor: improve startup time of
 website editor

By starting the get_switchable_related_views request when the
WysiwygAdapter is started, and awaiting it only when we need to know,
we can improve the initial loading time of the editor.

See merge commit for more information.

task-2687506
---
 .../static/src/js/editor/snippets.editor.js   | 15 +---
 .../wysiwyg_adapter/wysiwyg_adapter.js        | 20 ++++++
 .../static/src/js/editor/snippets.editor.js   | 71 +++++++++----------
 .../static/src/js/editor/snippets.options.js  | 41 +++++++++++
 .../static/src/services/website_service.js    |  7 +-
 .../tests/tours/snippet_popup_add_remove.js   |  2 +-
 addons/website/views/snippets/snippets.xml    |  3 +
 7 files changed, 107 insertions(+), 52 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 688b731ebda..fe17d09060a 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -821,7 +821,7 @@ var SnippetEditor = Widget.extend({
 
         this.$el.find('[data-toggle="dropdown"]').dropdown();
 
-        return Promise.all(defs).then(() => {
+        return Promise.all(defs).then(async () => {
             const options = _.sortBy(this.styles, '__order');
             const firstOptions = [];
             options.forEach(option => {
@@ -2988,18 +2988,7 @@ var SnippetsMenu = Widget.extend({
         if (!ev.currentTarget.classList.contains('active')) {
             this._activateSnippet(false);
             this._mutex.exec(() => {
-                let $pageOptionsTarget = $();
-                let i = 0;
-                const pageOptions = this.templateOptions.filter(template => template.data.pageOptions);
-                while (!$pageOptionsTarget.length && i < pageOptions.length) {
-                    $pageOptionsTarget = pageOptions[i].selector.all();
-                    i++;
-                }
-                if ($pageOptionsTarget.length) {
-                    this._activateSnippet($pageOptionsTarget);
-                } else {
-                    this._activateEmptyOptionsTab();
-                }
+                this._activateEmptyOptionsTab();
             });
         }
     },
diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
index c6c83d4e3ee..be82db3c0dc 100644
--- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
@@ -49,6 +49,13 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
                 this.pageOptions[optionName] = new PageOption(pageOptionEl, this.websiteService.pageDocument, optionName);
             }
             this.editableElements(this.$editable).addClass('o_editable');
+
+            let switchableRelatedViews = [];
+            const viewKey = this.websiteService.pageDocument.documentElement.dataset.viewXmlid;
+            if (this.websiteService.isDesigner && viewKey) {
+                switchableRelatedViews = this.rpc('/website/get_switchable_related_views', {key: viewKey});
+            }
+            this.switchableRelatedViews = Promise.resolve(switchableRelatedViews);
         });
 
         useEffect(() => {
@@ -667,6 +674,18 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
     _onMobilePreviewRequest() {
         this.websiteService.context.isMobile = !this.websiteService.context.isMobile;
     }
+    /**
+     * Called when a child needs to know about the views that can
+     * be toggled on or off on a specific view related to the editable.
+     *
+     * @param event
+     * @returns {Promise<void>}
+     * @private
+     */
+    async _onGetSwitchableRelatedViews(event) {
+        const views = await this.switchableRelatedViews;
+        event.data.onSuccess(views);
+    }
 }
 WysiwygAdapterComponent.prototype.events = {
     'widgets_start_request': '_onRootEventRequest',
@@ -684,4 +703,5 @@ WysiwygAdapterComponent.prototype.events = {
     'menu_dialog': '_onMenuDialogRequest',
     'update_color_previews': '_onColorPreviewsUpdate',
     'request_mobile_preview': '_onMobilePreviewRequest',
+    'get_switchable_related_views': '_onGetSwitchableRelatedViews',
 };
diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js
index 870390411f8..c2016be4277 100644
--- a/addons/website/static/src/js/editor/snippets.editor.js
+++ b/addons/website/static/src/js/editor/snippets.editor.js
@@ -54,43 +54,6 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
         this.$body[0].classList.remove('o_animated_text_highlighted');
     },
 
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Adds the "customize_show" templates to the options page of the editor
-     * panel.
-     *
-     * @override
-     */
-    async loadSnippets() {
-        const viewName = $(this.options.wysiwyg.odooEditor.document.documentElement).data('view-xmlid');
-        const snippets = await this._super(...arguments);
-        if (!viewName) {
-            return snippets;
-        }
-        const $snippets = $(snippets);
-        return this._rpc({
-            route: '/website/get_switchable_related_views',
-            params: {
-                key: viewName,
-            },
-        }).then(function (result) {
-            _.each(result, view => {
-                $snippets.siblings('#snippet_options').append($(`
-                    <div data-selector="#wrapwrap > main" data-page-options="true" data-no-check="true">
-                        <we-checkbox string="${view.name}"
-                                    data-customize-website-views="${view.key}"
-                                    data-no-preview="true"
-                                    data-reload="/"/>
-                    </div>
-                `));
-            });
-            return $('<div>').append($snippets).html();
-        });
-    },
-
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
@@ -356,6 +319,40 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
             throw e;
         }
     },
+    /**
+     * @override
+     */
+    _onOptionsTabClick(ev) {
+        if (!ev.currentTarget.classList.contains('active')) {
+            this._activateSnippet(false);
+            this._mutex.exec(async () => {
+                const switchableViews = await new Promise((resolve, reject) => {
+                    this.trigger_up('get_switchable_related_views', {
+                        onSuccess: resolve,
+                        onFailure: reject,
+                    });
+                });
+                if (switchableViews.length) {
+                    // These do not need to be awaited as we're in teh context
+                    // of the mutex.
+                    this._activateSnippet(this.$body.find('#wrapwrap > main'));
+                    return;
+                }
+                let $pageOptionsTarget = $();
+                let i = 0;
+                const pageOptions = this.templateOptions.filter(template => template.data.pageOptions);
+                while (!$pageOptionsTarget.length && i < pageOptions.length) {
+                    $pageOptionsTarget = pageOptions[i].selector.all();
+                    i++;
+                }
+                if ($pageOptionsTarget.length) {
+                    this._activateSnippet($pageOptionsTarget);
+                } else {
+                    this._activateEmptyOptionsTab();
+                }
+            });
+        }
+    },
     /**
      * @private
      */
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 1d4ed893b57..a761faf3486 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -3235,6 +3235,47 @@ options.registry.sizing.include({
     }
 });
 
+options.registry.SwitchableViews = options.Class.extend({
+    /**
+     * @override
+     */
+    async willStart() {
+        const _super = this._super.bind(this);
+        this.switchableRelatedViews = await new Promise((resolve, reject) => {
+            this.trigger_up('get_switchable_related_views', {
+                onSuccess: resolve,
+                onFailure: reject,
+            });
+        });
+        return _super(...arguments);
+    },
+    /**
+     * @override
+     */
+    _renderCustomXML(uiFragment) {
+        for (const view of this.switchableRelatedViews) {
+            const weCheckboxEl = document.createElement('we-checkbox');
+            weCheckboxEl.setAttribute('string', view.name);
+            weCheckboxEl.setAttribute('data-customize-website-views', view.key);
+            weCheckboxEl.setAttribute('data-no-preview', 'true');
+            weCheckboxEl.setAttribute('data-reload', '/');
+            uiFragment.appendChild(weCheckboxEl);
+        }
+    },
+    /***
+     * @override
+     */
+    _computeVisibility() {
+        return !!this.switchableRelatedViews.length;
+    },
+    /**
+     * @override
+     */
+    _checkIfWidgetsUpdateNeedReload() {
+        return true;
+    }
+});
+
 return {
     UrlPickerUserValueWidget: UrlPickerUserValueWidget,
     FontFamilyPickerUserValueWidget: FontFamilyPickerUserValueWidget,
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 7b58cbcd242..1375de3370c 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -35,6 +35,7 @@ export const websiteService = {
         let websiteRootInstance;
         let Wysiwyg;
         let isPublisher;
+        let isDesigner;
         let hasMultiWebsites;
         const context = reactive({
             showNewContentModal: false,
@@ -125,6 +126,9 @@ export const websiteService = {
             get isPublisher() {
                 return isPublisher === true;
             },
+            get isDesigner() {
+                return isDesigner === true;
+            },
             get hasMultiWebsites() {
                 return hasMultiWebsites === true;
             },
@@ -146,8 +150,9 @@ export const websiteService = {
             },
             async fetchWebsites() {
                 // Fetch user groups, before fetching the websites.
-                [isPublisher, hasMultiWebsites] = await Promise.all([
+                [isPublisher, isDesigner, hasMultiWebsites] = await Promise.all([
                     user.hasGroup('website.group_website_publisher'),
+                    user.hasGroup('website.group_website_designer'),
                     user.hasGroup('website.group_multi_website'),
                 ]);
 
diff --git a/addons/website/static/tests/tours/snippet_popup_add_remove.js b/addons/website/static/tests/tours/snippet_popup_add_remove.js
index 7cc04aa6430..f8194f30e95 100644
--- a/addons/website/static/tests/tours/snippet_popup_add_remove.js
+++ b/addons/website/static/tests/tours/snippet_popup_add_remove.js
@@ -22,7 +22,7 @@ wTourUtils.registerEditionTour('snippet_popup_add_remove', {
 }, {
     content: `Remove the s_popup snippet`,
     in_modal: false,
-    trigger: '.o_we_customize_panel we-customizeblock-options we-button.oe_snippet_remove:first',
+    trigger: '.o_we_customize_panel we-customizeblock-options:contains("Popup") we-button.oe_snippet_remove:first',
 }, {
     content: 'Check the s_popup was removed',
     in_modal: false,
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 7a6d8a80b73..4cdf7e52337 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1463,5 +1463,8 @@
                         data-no-preview="true"
                         data-reload="/"/>
     </div>
+    <div data-selector="#wrapwrap > main" data-no-check="true" data-js="SwitchableViews">
+            <!-- Options will be populated by JS -->
+    </div>
 </template>
 </odoo>

From 2e475165158ba93586f60e399d9b323d2dc469e6 Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Tue, 7 Jun 2022 17:52:36 +0200
Subject: [PATCH 84/88] [IMP] website, *: reload webclient when installing app
 from editor

*: web_editor

When installing an app from the web_editor, it's needed to actually
reload the webclient, or some apps might not work properly as they
won't have the right assets loaded.

See merge commit for more information.

task-2687506
---
 .../web_editor/static/src/js/editor/snippets.editor.js |  2 +-
 .../src/components/wysiwyg_adapter/wysiwyg_adapter.js  | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index fe17d09060a..a3c5af85845 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -2934,9 +2934,9 @@ var SnippetsMenu = Widget.extend({
                         args: [[moduleID]],
                     }).then(() => {
                         self.trigger_up('request_save', {
-                            reloadEditor: true,
                             invalidateSnippetCache: true,
                             _toMutex: true,
+                            reloadWebClient: true,
                         });
                     }).guardedCatch(reason => {
                         reason.event.preventDefault();
diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
index be82db3c0dc..36bc684f206 100644
--- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
@@ -544,10 +544,12 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
                     invalidateSnippetCache: event.data.invalidateSnippetCache
                 });
             };
-        } else {
-            if (event.data.onSuccess) {
-                callback = event.data.onSuccess;
-            }
+        } else if (event.data.onSuccess) {
+            callback = event.data.onSuccess;
+        } else if (event.data.reloadWebClient) {
+            const currentPath = encodeURIComponent(window.location.pathname);
+            const websiteId = this.websiteService.currentWebsite.id;
+            callback = () => window.location = `/web#action=website.website_preview&website_id=${websiteId}&path=${currentPath}&enable_editor=1`;
         }
         if (isDirty) {
             return this.save().then(callback);

From e7713398347ef527a59b632ef9c2e5ddaaca3c94 Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Thu, 9 Jun 2022 18:09:13 +0200
Subject: [PATCH 85/88] [IMP] web_editor, website: give util functions the
 right window

Related to the review comment [1]. This commit aims at removing
the dependency of a target for those utils functions.

[1]: https://github.com/odoo/odoo/pull/89223#discussion_r893595305

See merge commit for more information.

task-2687506
---
 addons/web_editor/static/src/js/common/utils.js            | 6 +++++-
 .../src/components/wysiwyg_adapter/wysiwyg_adapter.js      | 7 +++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/addons/web_editor/static/src/js/common/utils.js b/addons/web_editor/static/src/js/common/utils.js
index 7b976fba888..6c31abc8f81 100644
--- a/addons/web_editor/static/src/js/common/utils.js
+++ b/addons/web_editor/static/src/js/common/utils.js
@@ -3,6 +3,9 @@ odoo.define('web_editor.utils', function (require) {
 
 const {ColorpickerWidget} = require('web.Colorpicker');
 
+let editableWindow = window;
+const _setEditableWindow = (ew) => editableWindow = ew;
+
 /**
  * window.getComputedStyle cannot work properly with CSS shortcuts (like
  * 'border-width' which is a shortcut for the top + right + bottom + left border
@@ -58,7 +61,7 @@ const DEFAULT_PALETTE = {
  */
 function _computePxByRem(toRem) {
     if (_computePxByRem.PX_BY_REM === undefined) {
-        const htmlStyle = window.getComputedStyle(document.documentElement);
+        const htmlStyle = editableWindow.getComputedStyle(editableWindow.document.documentElement);
         _computePxByRem.PX_BY_REM = parseFloat(htmlStyle['font-size']);
     }
     return toRem ? (1 / _computePxByRem.PX_BY_REM) : _computePxByRem.PX_BY_REM;
@@ -379,5 +382,6 @@ return {
     backgroundImagePartsToCss: _backgroundImagePartsToCss,
     generateHTMLId: _generateHTMLId,
     getColorClass: _getColorClass,
+    setEditableWindow: _setEditableWindow,
 };
 });
diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
index 36bc684f206..33729ff1162 100644
--- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
@@ -5,6 +5,7 @@ import { _t } from '@web/core/l10n/translation';
 
 import { useWowlService } from '@web/legacy/utils';
 import { useHotkey } from '@web/core/hotkeys/hotkey_hook';
+import { setEditableWindow } from 'web_editor.utils';
 
 import { EditMenuDialog, MenuDialog } from "../dialog/edit_menu";
 import { WebsiteDialog } from '../dialog/dialog';
@@ -82,14 +83,20 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
                     this.widget.odooEditor.observerActive();
                 }});
                 this.props.wysiwygReady();
+                // Set utils functions' editable window to the current iframe's window.
+                // This allows those function to access the correct styles definitions,
+                // document element, etc.
+                setEditableWindow(this.websiteService.contentWindow);
             };
 
             initWysiwyg();
 
             return () => {
                 this.$editable.off('click.odoo-website-editor', '*');
+                setEditableWindow(window);
             };
         }, () => []);
+
     }
     /**
      * @override

From 9c53c373bf83015dae8fdabd328494ecf5d0db4e Mon Sep 17 00:00:00 2001
From: Arthur Detroux <ard@odoo.com>
Date: Thu, 16 Jun 2022 13:08:39 +0200
Subject: [PATCH 86/88] [FIX] website: load wysiwyg in iframe only for
 publishers

See merge commit for more information.

task-2687506
---
 .../src/client_actions/website_preview/website_preview.xml    | 3 ++-
 addons/website/static/src/js/content/website_root_instance.js | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml
index 32e33efae3c..1aa1ee9fc74 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.xml
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml
@@ -23,7 +23,8 @@
                 class="o_iframe"
                 t-ref="iframe"
                 t-on-load="_onPageLoaded"
-                is-ready="false"/>
+                is-ready="false"
+                t-att-data-load-wysiwyg="this.websiteService.isPublisher ? 'true': 'false'"/>
         </div>
         <WebsiteEditorComponent t-if="websiteContext.edition"
             reloadIframe.bind="this.reloadIframe"
diff --git a/addons/website/static/src/js/content/website_root_instance.js b/addons/website/static/src/js/content/website_root_instance.js
index d5422c72f8a..a1f667584e6 100644
--- a/addons/website/static/src/js/content/website_root_instance.js
+++ b/addons/website/static/src/js/content/website_root_instance.js
@@ -5,7 +5,9 @@ import { WebsiteRoot } from "./website_root";
 import { loadWysiwyg } from "web_editor.loader";
 
 export default createPublicRoot(WebsiteRoot).then(rootInstance => {
-    if (window.parent !== window) {
+    // This data attribute is set by the WebsitePreview client action for a
+    // publisher user.
+    if (window.frameElement && window.frameElement.dataset.loadWysiwyg) {
         loadWysiwyg(['website.compiled_assets_wysiwyg']).then(() => {
             window.dispatchEvent(new CustomEvent('PUBLIC-ROOT-READY', {detail: {rootInstance}}));
         });

From 44da4bfcc30ca4fe78a1e0c5cb2f9f498ba6e72e Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Tue, 14 Jun 2022 17:17:37 +0200
Subject: [PATCH 87/88] [IMP] website: hide edit button when a page is not
 editable

This commit hides the Edit button when visiting a page that is not
editable (e.g. sitemap.xml, a link to an image, etc).

See merge commit for more information.

task-2687506
---
 .../website_preview/website_preview.js        | 18 +++++++---
 .../static/src/components/navbar/navbar.js    |  2 +-
 .../static/src/services/website_service.js    | 33 ++++++++++++-------
 .../static/src/systray_items/edit_website.js  |  1 +
 4 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js
index ba4df10f974..535fcbaacd1 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.js
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.js
@@ -192,17 +192,22 @@ export class WebsitePreview extends Component {
 
         this.websiteService.pageDocument = this.iframe.el.contentDocument;
         this.websiteService.contentWindow = this.iframe.el.contentWindow;
+
+        // This is needed for the registerThemeHomepageTour tours
+        const { editable, viewXmlid } = this.websiteService.currentWebsite.metadata;
+        this.container.el.dataset.viewXmlid = viewXmlid;
+        if (!editable) {
+            this.iframefallback.el.classList.add('d-none');
+        }
+
         this.iframe.el.contentWindow.addEventListener('PUBLIC-ROOT-READY', (event) => {
             this.iframe.el.setAttribute('is-ready', 'true');
-            if (!this.websiteContext.edition) {
+            if (!this.websiteContext.edition && editable) {
                 this.addWelcomeMessage();
             }
             this.websiteService.websiteRootInstance = event.detail.rootInstance;
         });
 
-        // This is needed for the registerThemeHomepageTour tours
-        this.container.el.dataset.viewXmlid = this.iframe.el.contentDocument.documentElement.dataset.viewXmlid;
-
         // The clicks on the iframe are listened, so that links with external
         // redirections can be opened in the top window.
         this.iframe.el.contentDocument.addEventListener('click', (ev) => {
@@ -238,8 +243,11 @@ export class WebsitePreview extends Component {
         // Before leaving the iframe, its content is replicated on an
         // underlying iframe, to avoid for white flashes (visible on
         // Chrome Windows/Linux).
-        if (!this.websiteContext.edition) {
+        // If the iframe is currently displaying an XML file, the body does not
+        // exist, so we do not replace the iframefallback content.
+        if (!this.websiteContext.edition && this.iframe.el.contentDocument.body) {
             this.iframefallback.el.contentDocument.body.replaceWith(this.iframe.el.contentDocument.body.cloneNode(true));
+            this.iframefallback.el.classList.remove('d-none');
             $().getScrollingElement(this.iframefallback.el.contentDocument)[0].scrollTop = $().getScrollingElement(this.iframe.el.contentDocument)[0].scrollTop;
         }
     }
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
index 1ad5eae5872..1716fea9dad 100644
--- a/addons/website/static/src/components/navbar/navbar.js
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -121,7 +121,7 @@ patch(NavBar.prototype, 'website_navbar', {
     },
 
     canShowAceEditor() {
-        return this.websiteService.pageDocument && this.websiteService.pageDocument.documentElement.dataset.viewXmlid
+        return this.websiteService.currentWebsite && this.websiteService.currentWebsite.metadata.viewXmlid
             && !this.websiteContext.showNewContentModal && !this.websiteContext.edition;
     },
 });
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 1375de3370c..4d57e8544a9 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -88,17 +88,28 @@ export const websiteService = {
                 if (!document) {
                     return;
                 }
-                const { mainObject, seoObject, isPublished, canPublish, editableInBackend, translatable } = document.documentElement.dataset;
-                currentMetadata = {
-                    path: document.location.href,
-                    mainObject: unslugHtmlDataObject(mainObject),
-                    seoObject: unslugHtmlDataObject(seoObject),
-                    isPublished: isPublished === 'True',
-                    canPublish: canPublish === 'True',
-                    editableInBackend: editableInBackend === 'True',
-                    title: document.title,
-                    translatable: !!translatable,
-                };
+                // Not all files have a dataset. (e.g. XML)
+                if (!document.documentElement.dataset) {
+                    currentMetadata = {};
+                } else {
+                    const { mainObject, seoObject, isPublished, canPublish, editableInBackend, translatable, viewXmlid } = document.documentElement.dataset;
+                    currentMetadata = {
+                        path: document.location.href,
+                        mainObject: unslugHtmlDataObject(mainObject),
+                        seoObject: unslugHtmlDataObject(seoObject),
+                        isPublished: isPublished === 'True',
+                        canPublish: canPublish === 'True',
+                        editableInBackend: editableInBackend === 'True',
+                        title: document.title,
+                        translatable: !!translatable,
+                        // TODO: Find a better way to figure out if
+                        // a page is editable or not. For now, we use
+                        // the editable selector because it's the common
+                        // denominator of editable pages.
+                        editable: !!document.getElementById('wrapwrap'),
+                        viewXmlid: viewXmlid,
+                    };
+                }
                 websiteSystrayRegistry.trigger('CONTENT-UPDATED');
             },
             get pageDocument() {
diff --git a/addons/website/static/src/systray_items/edit_website.js b/addons/website/static/src/systray_items/edit_website.js
index 38a4764ecd9..b34b6faf5ed 100644
--- a/addons/website/static/src/systray_items/edit_website.js
+++ b/addons/website/static/src/systray_items/edit_website.js
@@ -59,6 +59,7 @@ EditWebsiteSystray.template = "website.EditWebsiteSystray";
 
 export const systrayItem = {
     Component: EditWebsiteSystray,
+    isDisplayed: (env) => env.services.website.currentWebsite.metadata.editable,
 };
 
 registry.category("website_systray").add("EditWebsite", systrayItem, { sequence: 8 });

From b19a1eaaf4f5626d4371e744a7ba3a166675690e Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Tue, 21 Jun 2022 16:41:46 +0200
Subject: [PATCH 88/88] [IMP] website, website_event: add edit event menu
 dropdown

This commit adds a new menu item in the "Site" menu section.

This "Edit Event Menu" item is only shown when a [data-content_menu_id]
element is displayed within the iframe (such data attribute is added on
the event menus).

The contentMenuId is taken from the currentWebsite.metadata to keep data
taken from the iframe's document centralized in the service.

The spec is different from the previous implementation, that was
prompting a dialog to select the menu to edit, before prompting the
dialog to edit the menu. Here we have two different dropwdown items.

See merge commit for more information.

task-2687506
---
 .../static/src/services/website_service.js    |  2 ++
 addons/website_event/__manifest__.py          |  1 +
 .../static/src/js/components/navbar/navbar.js | 23 +++++++++++++++++++
 addons/website_event/views/event_menus.xml    |  6 +++++
 4 files changed, 32 insertions(+)
 create mode 100644 addons/website_event/static/src/js/components/navbar/navbar.js

diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 4d57e8544a9..ad505daea11 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -93,6 +93,7 @@ export const websiteService = {
                     currentMetadata = {};
                 } else {
                     const { mainObject, seoObject, isPublished, canPublish, editableInBackend, translatable, viewXmlid } = document.documentElement.dataset;
+                    const contentMenuEl = document.querySelector('[data-content_menu_id]');
                     currentMetadata = {
                         path: document.location.href,
                         mainObject: unslugHtmlDataObject(mainObject),
@@ -102,6 +103,7 @@ export const websiteService = {
                         editableInBackend: editableInBackend === 'True',
                         title: document.title,
                         translatable: !!translatable,
+                        contentMenuId: contentMenuEl && contentMenuEl.dataset.content_menu_id,
                         // TODO: Find a better way to figure out if
                         // a page is editable or not. For now, we use
                         // the editable selector because it's the common
diff --git a/addons/website_event/__manifest__.py b/addons/website_event/__manifest__.py
index d39b254da22..b7c2ea21f63 100644
--- a/addons/website_event/__manifest__.py
+++ b/addons/website_event/__manifest__.py
@@ -65,6 +65,7 @@
         ],
         'website.assets_editor': [
             'website_event/static/src/js/systray_items/*.js',
+            'website_event/static/src/js/components/navbar/navbar.js',
         ],
     },
     'license': 'LGPL-3',
diff --git a/addons/website_event/static/src/js/components/navbar/navbar.js b/addons/website_event/static/src/js/components/navbar/navbar.js
new file mode 100644
index 00000000000..6d400f9a8d5
--- /dev/null
+++ b/addons/website_event/static/src/js/components/navbar/navbar.js
@@ -0,0 +1,23 @@
+/** @odoo-module  */
+
+import { patch } from 'web.utils';
+import { NavBar } from '@web/webclient/navbar/navbar';
+import { EditMenuDialog } from '@website/components/dialog/edit_menu';
+
+const { onWillStart } = owl;
+
+patch(NavBar.prototype, 'website_events_navbar', {
+    setup() {
+        this._super();
+
+        onWillStart(() => {
+            this.websiteEditingMenus['website_event.menu_edit_menu'] = {
+                Component: EditMenuDialog,
+                isDisplayed: () => this.websiteService.currentWebsite && this.websiteService.currentWebsite.metadata.contentMenuId,
+                getProps: () => ({
+                    rootID: parseInt(this.websiteService.currentWebsite.metadata.contentMenuId, 10),
+                }),
+            };
+        });
+    },
+});
diff --git a/addons/website_event/views/event_menus.xml b/addons/website_event/views/event_menus.xml
index 623a223679b..8fe3cd4fc92 100644
--- a/addons/website_event/views/event_menus.xml
+++ b/addons/website_event/views/event_menus.xml
@@ -8,4 +8,10 @@
         groups="base.group_no_one"
         sequence="99"/>
 
+    <menuitem id="menu_edit_menu"
+        name="Edit Event Menu "
+        sequence="35"
+        parent="website.menu_site"
+        action="website.website_preview"/>
+
 </data></odoo>