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] [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">