[FIX] website: correctly mark translatable attributes

Steps to reproduce:

- Go to a website page > Add a 'Form' block > Set an input "Placeholder"
value.
- Go to the page (in 'edit_translations' mode) > The translation of the
input "Placeholder" attribute doesn't mark the input as translated and
even after saving the translation, the input is still marked as
"to_translate".

The goal of this commit is to fix this issue by extending the same
behaviour on the translated `<select/>` options (using `.oe_translated`
class) and setting the right translation state on the input from the
linked attribute translation `<span/>`.

task-3323245

closes odoo/odoo#121440

X-original-commit: 8b522e5c
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>

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

@@ -89,6 +89,7 @@ var AttributeTranslateDialog = weDialog.extend({
                     $originalNode.val(value).trigger('translate');
                 }
                 $node.trigger('change');
+                $originalNode[0].classList.add('oe_translated');
             });
             $group.append($label).append($input);
         });
@@ -124,7 +125,7 @@ const SelectTranslateDialog = weDialog.extend({
             this.optionEl.textContent = inputEl.value;
             const translationUpdated = inputEl.value !== this.optionEl.dataset.initialTranslationValue;
             this.translationObject.classList.toggle('o_dirty', translationUpdated);
-            this.optionEl.classList.add('o_option_translated');
+            this.optionEl.classList.toggle('oe_translated', translationUpdated);
         });
         this.el.appendChild(inputEl);
         return this._super(...arguments);
@@ -286,6 +287,8 @@ var TranslatePageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
 
                     translation['textContent'] = $trans[0];
                     $node.val(match[2]);
+                    // Update the text content of textarea too.
+                    $node[0].innerText = match[2];
 
                     $node.addClass('o_translatable_text').removeClass('o_text_content_invisible')
                         .data('translation', translation);
@@ -420,6 +423,13 @@ var TranslatePageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
             _.each(translation, function (node, attr) {
                 var trans = self._getTranlationObject(node);
                 trans.value = (trans.value ? trans.value : $node.html()).replace(/[ \t\n\r]+/, ' ');
+                trans.state = node.dataset.oeTranslationState;
+                // If a node has an already translated attribute, we don't
+                // need to update its state, since it can be set again as
+                // "to_translate" by other attributes...
+                if ($node[0].dataset.oeTranslationState === 'translated') {
+                    return;
+                }
                 $node.attr('data-oe-translation-state', (trans.state || 'to_translate'));
             });
         });

addons/website/static/src/scss/website.wysiwyg.scss

@@ -95,7 +95,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         }
     }
 
-    &.o_dirty, .o_option_translated {
+    &.o_dirty, &.oe_translated, .oe_translated {
         background: rgba($o-we-translated-content-color, 0.25) !important;
     }
 }

addons/website/static/tests/tours/rte.js

@@ -62,7 +62,7 @@ tour.register('rte_translator', {
     run: function () {
         $("#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"/>\
+                useful to your <a href="/999">readers</a>.</p> <input value="test translate default value" 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");
     }
@@ -118,10 +118,18 @@ tour.register('rte_translator', {
     content: "translate placeholder",
     trigger: 'input:first',
     run: 'text test Parseltongue placeholder',
+}, {
+    content: "translate default value",
+    trigger: 'input:last',
+    run: 'text test Parseltongue default value',
 }, {
     content: "close modal",
     trigger: '.modal-footer .btn-primary',
     extra_trigger: '.modal input:propValue(test Parseltongue placeholder)',
+}, {
+    content: "check: input marked as translated",
+    trigger: '#wrap input[placeholder="test Parseltongue placeholder"].oe_translated',
+    run: () => {},
 }, {
     content: "save translation",
     trigger: 'button[data-action=save]',
@@ -139,7 +147,10 @@ tour.register('rte_translator', {
     content: "check: placeholder translation",
     trigger: 'input[placeholder="test Parseltongue placeholder"]',
     run: function () {}, // it's a check
-
+}, {
+    content: "check: default value translation",
+    trigger: '#wrap input[value="test Parseltongue default value"]',
+    run: () => {},
 }, {
     content: "open language selector",
     trigger: '.js_language_selector button:first',