[FIX] web_editor: prevent sizing to trigger changes events on focus

Before this commit, when one was clicking/focusing an element which was
receiving the sizing option(s), it would directly trigger some onchanges
internal events, even if no changes were done yet.
One of those events was `change_column_size` directly called on the
steps snippets options.

That event was then listened by the steps options and was making the
connector to be reloaded.

While it was useless as there were no real changes yet (just focused),
it was also leading to a traceback if one was clicking on an outdated
steps snippet, for instance after a migration from v15.
In saas-15.1, the connectors were improved with [1] and became svg
elements instead of pseudo elements.
The internal method reloading the connector thus can't find those
selectors on an outdated snippet.

This commit now splits the code in 2, to extract the firing of the
onchange events when there is actually some changes.

This will allow to click on outdated steps snippet without having a
traceback as the code won't try to reload the connectors anymore.
That outdated block will then be marked as such in the right panel and
the user will be able to delete it to recreate it if needed.

Remember than without this commit, since there would be a traceback, the
whole current page edition / changes would simply be lost.

[1]: https://github.com/odoo/odoo/commit/aba31e9f2d8a44ce1586403f2a621a6caeed57b4

opw-2895569

closes odoo/odoo#99014

X-original-commit: 66213cfb33f4545d4c70af1a72c3db47ca687e92
Signed-off-by: Romain Derie (rde) <rde@odoo.com>

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -4279,22 +4279,25 @@ registry.sizing = SnippetOptionWidget.extend({
 
         return def;
     },
-    /**
-     * @override
-     */
-    onFocus: function () {
-        this._onResize();
-    },
 
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
 
+    /**
+     * @override
+     */
+    async updateUI() {
+        this._updateSizingHandles();
+        return this._super(...arguments);
+    },
     /**
      * @override
      */
     setTarget: function () {
         this._super(...arguments);
+        // TODO master: _onResize should not be called here, need to check if
+        // updateUI is called when the target is changed
         this._onResize();
     },
 
@@ -4325,6 +4328,13 @@ registry.sizing = SnippetOptionWidget.extend({
      * @param {integer} [current] - current increment in this.grid
      */
     _onResize: function (compass, beginClass, current) {
+        this._updateSizingHandles();
+        this._notifyResizeChange();
+    },
+    /**
+     * @private
+     */
+    _updateSizingHandles: function () {
         var self = this;
 
         // Adapt the resize handles according to the classes and dimensions
@@ -4365,6 +4375,11 @@ registry.sizing = SnippetOptionWidget.extend({
             var direction = $handle.hasClass('n') ? 'top' : 'bottom';
             $handle.height(self.$target.css('padding-' + direction));
         });
+    },
+    /**
+     * @override
+     */
+    async _notifyResizeChange() {
         this.$target.trigger('content_changed');
     },
 });
@@ -4460,6 +4475,12 @@ registry['sizing_x'] = registry.sizing.extend({
                 this.$target.addClass('offset-lg-' + offset);
             }
         }
+        this._super.apply(this, arguments);
+    },
+    /**
+     * @override
+     */
+    async _notifyResizeChange() {
         this.trigger_up('option_update', {
             optionName: 'StepsConnector',
             name: 'change_column_size',