[IMP] website: make SEO dialog clearer

Part of https://github.com/odoo/odoo/pull/34422
task-2026299

closes odoo/odoo#34422

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website/static/src/js/menu/seo.js

@@ -208,7 +208,7 @@ var Preview = Widget.extend({
     init: function (parent, options) {
         this.title = options.title;
         this.url = options.url;
-        this.description = options.description || _t("The description will be generated by search engines based on page content unless you specify one.");
+        this.description = options.description;
         if (this.description.length > 160) {
             this.description = this.description.substring(0, 159) + '…';
         }
@@ -221,7 +221,6 @@ var HtmlPage = Class.extend(mixins.PropertiesMixin, {
         mixins.PropertiesMixin.init.call(this);
         this.initTitle = this.title();
         this.defaultTitle = $('meta[name="default_title"]').attr('content');
-        this.defaultDescription = $('meta[name="default_description"]').attr('content') || _t("The description will be generated by social media based on page content unless you specify one.");
         this.initDescription = this.description();
     },
     url: function () {
@@ -333,6 +332,7 @@ var MetaTitleDescription = Widget.extend({
         this.canEditTitle = !!options.canEditTitle;
         this.canEditDescription = !!options.canEditDescription;
         this.isIndexed = !!options.isIndexed;
+        this.previewDescription = options.previewDescription;
         this._super(parent, options);
     },
     /**
@@ -353,7 +353,7 @@ var MetaTitleDescription = Widget.extend({
         if (this.htmlPage.title().trim() !== this.htmlPage.defaultTitle.trim()) {
             this.$title.val(this.htmlPage.title());
         }
-        if (this.htmlPage.description().trim() !== this.htmlPage.defaultDescription.trim()) {
+        if (this.htmlPage.description().trim() !== this.previewDescription) {
             this.$description.val(this.htmlPage.description());
         }
 
@@ -369,7 +369,13 @@ var MetaTitleDescription = Widget.extend({
      * Get the current description
      */
     getDescription: function () {
-        return this.$description.val() || this.htmlPage.defaultDescription;
+        return this.getRealDescription() || this.previewDescription;
+    },
+    /**
+     * Get the current description chosen by the user
+     */
+    getRealDescription: function () {
+        return this.$description.val() || '';
     },
     /**
      * @private
@@ -532,13 +538,14 @@ var MetaImageSelector = Widget.extend({
      */
     init: function (parent, data) {
         this.metaTitle = data.title || '';
-        this._setDescription(data.description);
         this.activeMetaImg = data.metaImg;
         this.serverUrl = data.htmlpage.url();
         data.pageImages.unshift(_.str.sprintf('/web/image/res.company/%s/logo', odoo.session_info.website_company_id));
         data.pageImages.unshift(_.str.sprintf('/web/image/website/%s/social_default_image', odoo.session_info.website_id));
         this.images = _.uniq(data.pageImages);
         this.customImgUrl = _.contains(data.pageImages, data.metaImg) ? false : data.metaImg;
+        this.previewDescription = data.previewDescription;
+        this._setDescription(this.previewDescription);
         this._super(parent);
     },
     setTitle: function (title) {
@@ -560,7 +567,7 @@ var MetaImageSelector = Widget.extend({
      * @private
     */
     _setDescription: function (description) {
-        this.metaDescription = description || _t("The description will be generated by social media based on page content unless you specify one.");
+        this.metaDescription = description || this.previewDescription;
         if (this.metaDescription.length > 160) {
             this.metaDescription = this.metaDescription.substring(0, 159) + '…';
         }
@@ -648,9 +655,9 @@ var SeoConfigurator = Dialog.extend({
             self.metaImageSelector = new MetaImageSelector(self, {
                 htmlpage: self.htmlPage,
                 title: self.htmlPage.getOgMeta().metaTitle,
-                description: self.htmlPage.getOgMeta().metaDescription,
                 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.'),
             });
             self.metaImageSelector.appendTo(self.$('.js_seo_image'));
 
@@ -660,6 +667,7 @@ var SeoConfigurator = Dialog.extend({
                 canEditTitle: self.canEditTitle,
                 canEditDescription: self.canEditDescription,
                 isIndexed: self.isIndexed,
+                previewDescription: _t('The description will be generated by search engines based on page content unless you specify one.'),
             });
             self.metaTitleDescription.on('title-changed', self, self.titleChanged);
             self.metaTitleDescription.on('description-changed', self, self.descriptionChanged);
@@ -800,7 +808,7 @@ var SeoConfigurator = Dialog.extend({
     descriptionChanged: function () {
         var self = this;
         _.defer(function () {
-            var description = self.metaTitleDescription.getDescription();
+            var description = self.metaTitleDescription.getRealDescription();
             self.htmlPage.changeDescription(description);
             self.metaImageSelector.setDescription(description);
         });

addons/website/static/src/xml/website.seo.xml

@@ -66,7 +66,7 @@
                 </div>
                 <div class="form-group">
                     <label for="website_meta_description">
-                        Description <i class="fa fa-question-circle-o" title="The description will be generated by search engines based on page content unless you specify one."/>
+                        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;"/>