[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#121128

Signed-off-by: Benoit Socias (bso) <bso@odoo.com>

addons/website/static/src/js/editor/wysiwyg_multizone_translate.js

@@ -97,7 +97,7 @@ const SelectTranslateDialog = Dialog.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);
@@ -276,7 +276,12 @@ var WysiwygTranslate = WysiwygMultizone.extend({
             $p.after($p.html()).remove();
         });
         var trans = this._getTranlationObject($node[0]);
-        $node.toggleClass('o_dirty', trans.value !== $node.html().replace(/[ \t\n\r]+/, ' '));
+        const updated = trans.value !== $node.html().replace(/[ \t\n\r]+/, ' ');
+        $node.toggleClass('o_dirty', updated);
+        const $target = $node.data('$node');
+        if ($target) {
+            $target.toggleClass('oe_translated', updated);
+        }
     },
     /**
      * Returns a translation object.
@@ -325,6 +330,7 @@ var WysiwygTranslate = WysiwygMultizone.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;
                 $node.attr('data-oe-translation-state', (trans.state || 'to_translate'));
             });
         });

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

@@ -81,17 +81,17 @@
 }
 
 html[lang] > body.editor_enable [data-oe-translation-state] {
-    &, & .o_translation_select_option {
+    &, .o_translation_select_option {
         background: rgba($o-we-content-to-translate-color, 0.5) !important;
     }
 
     &[data-oe-translation-state="translated"] {
-        &, & .o_translation_select_option {
+        &, .o_translation_select_option {
             background: rgba($o-we-translated-content-color, 0.5) !important;
         }
     }
 
-    &.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

@@ -120,6 +120,10 @@ tour.register('rte_translator', {
     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]',