From 0cab2c8debfe061343c9229a1502982da8fdfd5a Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Thu, 15 Sep 2022 12:24:58 +0000
Subject: [PATCH] [FIX] website: remove 'Odoo' prefix on the WebsitePreview
 document title

Before this commit, the WebsitePreview document title was not completely
replaced with the iframe's one: it was still prefixed by 'Odoo - ' by
the title service.

Now, the WebsitePreview, introduced in [1], is adapted to remove the
'zopenerp' part when replacing the title (and adding it again when
unmounted). While doing this, the backend's favicon is also changed with
the frontend's one, to be consistent with displaying the frontend
document title only.

This commit also adds an effect on the Optimize SEO dialog, so that the
document title matches the user's input.

[1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b

task-2687506

closes odoo/odoo#101972

X-original-commit: 52ec7d1279144b9cd38f8444648b8246df694b9c
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Younn Olivier (yol) <yol@odoo.com>
---
 .../website_preview/website_preview.js        | 26 +++++++++++++++++++
 .../static/src/components/dialog/seo.js       | 13 +++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

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 86e6194e049..620f8931efe 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
@@ -94,6 +94,32 @@ export class WebsitePreview extends Component {
             this.websiteService.pageDocument = null;
         });
 
+        /**
+         * This removes the 'Odoo' prefix of the title service to display
+         * cleanly the frontend's document title (see _replaceBrowserUrl), and
+         * replaces the backend favicon with the frontend's one.
+         * These changes are reverted when the component is unmounted.
+         */
+        useEffect(() => {
+            const backendIconEl = document.querySelector("link[rel~='icon']");
+            // Save initial backend values.
+            const backendIconHref = backendIconEl.href;
+            const { zopenerp } = this.title.getParts();
+            this.iframe.el.addEventListener('load', () => {
+                // Replace backend values with frontend's ones.
+                this.title.setParts({ zopenerp: null });
+                const frontendIconEl = this.iframe.el.contentDocument.querySelector("link[rel~='icon']");
+                if (frontendIconEl) {
+                    backendIconEl.href = frontendIconEl.href;
+                }
+            }, { once: true });
+            return () => {
+                // Restore backend initial values when leaving.
+                this.title.setParts({ zopenerp, action: null });
+                backendIconEl.href = backendIconHref;
+            };
+        }, () => []);
+
         useEffect(() => {
             // When reaching a "regular" url of the webclient's router, an
             // hashchange event should be dispatched to properly display the
diff --git a/addons/website/static/src/components/dialog/seo.js b/addons/website/static/src/components/dialog/seo.js
index 26489d92ca0..9fe1463031f 100644
--- a/addons/website/static/src/components/dialog/seo.js
+++ b/addons/website/static/src/components/dialog/seo.js
@@ -4,7 +4,7 @@ import { useService, useAutofocus } 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;
+const { Component, useState, reactive, onMounted, onWillStart, useEffect } = 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
@@ -267,6 +267,17 @@ class TitleDescription extends Component {
 
         this.maxRecommendedDescriptionSize = 300;
         this.minRecommendedDescriptionSize = 50;
+
+        // Update the title when its input value changes
+        useEffect(() => {
+            document.title = this.title;
+        }, () => [this.seoContext.title]);
+
+        // Restore the original title when unmounting the component
+        useEffect(() => {
+            const initialTitle = document.title;
+            return () => document.title = initialTitle;
+        }, () => []);
     }
 
     get seoNameUrl() {