[FIX] html_builder: improve Edit click feedback + hotkeys in iframe

- the admin navbar is only hidden right before the sidebar appears
- meanwhile, the Edit button shows a loading spinner between the click
and the sidebar opening
- Press Escape to toggle the admin navbar and the sidebar
- Ctrl + K doesn't focus the browser URL field but opens Odoo search box
- F5 or Ctrl + R while in backend stay in backend

Author: robinlej

addons/html_builder/static/src/website_preview/edit_website_systray_item.js

@@ -1,4 +1,4 @@
-import { Component } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
 import { useService } from "@web/core/utils/hooks";
 import { Dropdown } from "@web/core/dropdown/dropdown";
 import { DropdownItem } from "@web/core/dropdown/dropdown_item";
@@ -18,6 +18,7 @@ export class EditWebsiteSystrayItem extends Component {
 
     setup() {
         this.websiteService = useService("website");
+        this.websiteContext = useState(this.websiteService.context);
     }
 
     onClickEditPage() {

addons/html_builder/static/src/website_preview/edit_website_systray_item.xml

@@ -2,9 +2,18 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.EditWebsiteSystrayItem">
-    <a t-if="!translatable and !this.websiteService.is404" href="#" class="o-website-btn-custo-primary btn d-flex align-items-center rounded-0 border-0 px-3" t-on-click="this.onClickEditPage" accesskey="a">Edit</a>
+    <button t-if="!translatable and !this.websiteService.is404"
+            class="o-website-btn-custo-primary btn d-flex align-items-center rounded-0 border-0 px-3"
+            t-on-click="this.onClickEditPage"
+            accesskey="a">
+        <span t-if="websiteContext.edition" role="img" aria-label="Loading" class="fa fa-circle-o-notch fa-spin"/>
+        <t t-else="">Edit</t>
+    </button>
     <Dropdown t-else="">
-        <button class="o-website-btn-custo-primary btn rounded-0 border-0 px-3" accesskey="a">Edit</button>
+        <button class="o-website-btn-custo-primary o-dropdown-toggle-custo btn rounded-0 border-0 px-3" accesskey="a">
+            <span t-if="websiteContext.edition" role="img" aria-label="Loading" class="fa fa-circle-o-notch fa-spin"/>
+            <t t-else="">Edit</t>
+        </button>
         <t t-set-slot="content">
             <t t-if="this.websiteService.is404">
                 <t t-if="translatable">

addons/html_builder/static/src/website_preview/website_builder_action.js

@@ -4,19 +4,22 @@ import {
     onMounted,
     onWillDestroy,
     onWillStart,
+    useEffect,
     useRef,
     useState,
     useSubEnv,
 } from "@odoo/owl";
 import { LazyComponent, loadBundle } from "@web/core/assets";
 import { browser } from "@web/core/browser/browser";
+import { getActiveHotkey } from "@web/core/hotkeys/hotkey_service";
 import { _t } from "@web/core/l10n/translation";
 import { registry } from "@web/core/registry";
 import { ResizablePanel } from "@web/core/resizable_panel/resizable_panel";
 import { Deferred } from "@web/core/utils/concurrency";
 import { uniqueId } from "@web/core/utils/functions";
 import { useChildRef, useService } from "@web/core/utils/hooks";
 import { effect } from "@web/core/utils/reactive";
+import { redirect } from "@web/core/utils/urls";
 import { standardActionServiceProps } from "@web/webclient/actions/action_service";
 import { AddPageDialog } from "@website/components/dialog/add_page_dialog";
 import { ResourceEditor } from "@website/components/resource_editor/resource_editor";
@@ -36,6 +39,7 @@ export class WebsiteBuilder extends Component {
         this.websiteService = useService("website");
         this.ui = useService("ui");
         this.title = useService("title");
+        this.hotkeyService = useService("hotkey");
         this.websiteService.websiteRootInstance = undefined;
 
         this.websiteContent = useRef("iframe");
@@ -44,6 +48,9 @@ export class WebsiteBuilder extends Component {
         });
         this.state = useState({ isEditing: false, key: 1 });
         this.websiteContext = useState(this.websiteService.context);
+
+        this.onKeydownRefresh = this._onKeydownRefresh.bind(this);
+
         onMounted(() => {
             // You can't wait for rendering because the Builder depends on the page style synchronously.
             effect(
@@ -94,6 +101,7 @@ export class WebsiteBuilder extends Component {
             }
         });
         onMounted(() => {
+            this.addListeners(document);
             this.addSystrayItems();
             this.websiteService.useMysterious = true;
             const { enable_editor, edit_translations } = this.props.action.context.params || {};
@@ -109,6 +117,27 @@ export class WebsiteBuilder extends Component {
             this.websiteService.useMysterious = false;
             this.websiteService.currentWebsiteId = null;
         });
+
+        effect(
+            (state) => {
+                this.websiteContext.edition = state.isEditing;
+                if (!state.isEditing) {
+                    this.addSystrayItems();
+                }
+            },
+            [this.state]
+        );
+        useEffect(
+            (isEditing) => {
+                document.querySelector("body").classList.toggle("o_builder_open", isEditing);
+                if (isEditing) {
+                    setTimeout(() => {
+                        registry.category("systray").remove("website.WebsiteSystrayItem");
+                    }, 200);
+                }
+            },
+            () => [this.state.isEditing]
+        );
     }
 
     get menuProps() {
@@ -157,15 +186,10 @@ export class WebsiteBuilder extends Component {
     }
 
     async onEditPage() {
-        document.querySelector("body").classList.add("o_builder_open");
         await this.iframeLoaded;
         await this.publicRootReady;
         await this.loadAssetsEditBundle();
-
-        setTimeout(() => {
-            this.state.isEditing = true;
-            registry.category("systray").remove("website.WebsiteSystrayItem");
-        }, 200);
+        this.state.isEditing = true;
     }
 
     async loadAssetsEditBundle() {
@@ -191,7 +215,12 @@ export class WebsiteBuilder extends Component {
             return;
         }
 
-        if (!isHTTPSorNakedDomainRedirection(iframe.contentWindow.location.origin, window.location.origin)) {
+        if (
+            !isHTTPSorNakedDomainRedirection(
+                iframe.contentWindow.location.origin,
+                window.location.origin
+            )
+        ) {
             // If another domain ends up loading in the iframe (for example,
             // if the iframe is being redirected and has no initial URL, so it
             // loads "about:blank"), do not push that into the history
@@ -331,9 +360,7 @@ export class WebsiteBuilder extends Component {
     async reloadIframeAndCloseEditor() {
         const isEditing = false;
         await this.reloadIframe(isEditing);
-        document.querySelector("body").classList.remove("o_builder_open");
         this.state.isEditing = isEditing;
-        this.addSystrayItems();
     }
 
     async reloadIframe(isEditing = true, url) {
@@ -371,6 +398,8 @@ export class WebsiteBuilder extends Component {
     setIframeLoaded() {
         this.iframeLoaded = new Promise((resolve) => {
             this.resolveIframeLoaded = () => {
+                this.hotkeyService.registerIframe(this.websiteContent.el);
+                this.addListeners(this.websiteContent.el.contentDocument);
                 resolve(this.websiteContent.el);
             };
         });
@@ -390,6 +419,42 @@ export class WebsiteBuilder extends Component {
     onResourceEditorResize(width) {
         browser.localStorage.setItem("ace_editor_width", width);
     }
+
+    /**
+     * Handles refreshing while the website preview is active.
+     * Makes it possible to stay in the backend after an F5 or CTRL-R keypress.
+     * Cannot be done through the hotkey service due to F5.
+     *
+     * @param {KeyboardEvent} ev
+     */
+    _onKeydownRefresh(ev) {
+        const hotkey = getActiveHotkey(ev);
+        if (hotkey !== "control+r" && hotkey !== "f5") {
+            return;
+        }
+        // The iframe isn't loaded yet: fallback to default refresh.
+        if (this.websiteService.contentWindow === undefined) {
+            return;
+        }
+        ev.preventDefault();
+        const path = this.websiteService.contentWindow.location;
+        const debugMode = this.env.debug ? `&debug=${this.env.debug}` : "";
+        redirect(
+            `/odoo/action-website.website_preview?path=${encodeURIComponent(path)}${debugMode}`
+        );
+    }
+
+    /**
+     * Registers listeners on both the main document and the iframe document.
+     * It can mostly be done through the hotkey service, but not all keys are
+     * whitelisted, specifically F5 which we want to override.
+     *
+     * @param {HTMLElement} target - document or iframe document
+     */
+    addListeners(target) {
+        target.removeEventListener("keydown", this.onKeydownRefresh);
+        target.addEventListener("keydown", this.onKeydownRefresh);
+    }
 }
 
 function deleteQueryParam(param, target = window, adaptBrowserUrl = false) {

addons/html_builder/static/src/website_preview/website_builder_action.scss

@@ -5,14 +5,25 @@
 
     &.o_builder_sidebar_open {
         width: $o-we-sidebar-width;
+        transition-delay: 200ms;
+
+        .o_website_fullscreen & {
+            width: 0;
+        }
+    }
+
+    .o_builder_open & {
+        transition-delay: 0ms;
     }
 }
 
 .o_main_navbar {
-    transition: margin-top ease 400ms !important;
-}
-.o_builder_open .o_main_navbar {
-    margin-top: -$o-navbar-height;
+    transition: margin-top ease 400ms;
+
+    .o_website_fullscreen &,
+    .o_builder_open & {
+        margin-top: -$o-navbar-height;
+    }
 }
 
 .o_website_preview {

addons/html_builder/static/src/website_preview/website_builder_action.xml

@@ -16,7 +16,7 @@
         </ResizablePanel>
         <LocalOverlayContainer localOverlay="overlayRef" identifier="env.localOverlayContainerKey"/>
         <div t-att-class="{'o_builder_sidebar_open': state.isEditing}" class="o-website-builder_sidebar border-start border-dark">
-            <LazyComponent  t-if="state.isEditing" Component="'website.Builder'" props="() => this.menuProps" bundle="'html_builder.assets'" t-key="state.key"/>        
+            <LazyComponent  t-if="state.isEditing" Component="'website.Builder'" props="() => this.menuProps" bundle="'html_builder.assets'" t-key="state.key"/>
         </div>
     </div>
 </t>

addons/html_builder/static/tests/translation.test.js

@@ -96,6 +96,7 @@ test("404 page in translate mode", async () => {
         setup() {
             websiteServiceInTranslateMode.is404 = () => true;
             this.websiteService = websiteServiceInTranslateMode;
+            this.websiteContext = this.websiteService.context;
         },
     });
     await setupWebsiteBuilder(`<h1> Homepage </h1>`, { openEditor: false });
@@ -200,6 +201,7 @@ async function setupSidebarBuilderForTranslation(options) {
             super.setup();
             this.env.services.website = websiteServiceInTranslateMode;
             this.websiteService = websiteServiceInTranslateMode;
+            this.websiteContext = this.websiteService.context;
         },
     });
     patchWithCleanup(WebsiteBuilder.prototype, {

addons/html_builder/static/tests/website_helpers.js

@@ -237,9 +237,13 @@ async function openBuilderSidebar(editAssetsLoaded) {
 
     await click(".o-website-btn-custo-primary");
     await editAssetsLoaded;
-    // advanceTime linked to the setTimeout in the WebsiteBuilder component
-    // tick needed to wait for the timeout to be called before advancing time.
+    // animationFrame linked to state.isEditing rendering the WebsiteBuilder.
+    await animationFrame();
+    // tick needed to wait for the timeout in the WebsiteBuilder useEffect to be
+    // called before advancing time.
     await tick();
+    // advanceTime linked to the setTimeout in the WebsiteBuilder component that
+    // removes the systray items.
     await advanceTime(200);
     await animationFrame();
 }

addons/website/static/src/js/tours/tour_utils.js

@@ -231,7 +231,7 @@ export function clickOnElement(elementName, selector) {
 export function clickOnEditAndWaitEditMode(position = "bottom") {
     return [{
         content: markup(_t("<b>Click Edit</b> to start designing your homepage.")),
-        trigger: "body .o_menu_systray a:contains('Edit')",
+        trigger: "body .o_menu_systray button:contains('Edit')",
         tooltipPosition: position,
         run: "click",
     }, {

addons/website_sale/static/tests/tours/website_sale_restricted_editor_ui.js

@@ -18,7 +18,7 @@ registerWebsitePreviewTour('website_sale_restricted_editor_ui', {
     },
     {
         // Wait for the possibility to edit to appear
-        trigger: ".o_menu_systray a:contains('Edit')",
+        trigger: ".o_menu_systray button:contains('Edit')",
     },
     {
         content: "Ensure the publish and 'edit-in-backend' buttons are not shown",