[IMP] web_editor: ace_editor: right resize bar

Before this commit, it's was only possible to resize the width
of the ace editor when it was on the right side of the screen.

In studio, we need to put the ace editor on the left.
So, we needed to add a new resize bar.
For that, we also add a new option to know the position of the
ace_editor.

We also prevent the width of the ace editor from being recorded
too many times in the local storage for nothing.
This is why we added _.debounce.

addons/web_editor/static/src/js/ace.js

@@ -82,8 +82,8 @@ var ViewEditor = Widget.extend({
         this._super.apply(this, arguments);
 
         this.viewKey = viewKey;
-        this.options = options || {};
 
+        this.options = _.defaults({}, options, {position: 'right'});
         this.views = {};
         this.buffers = {};
     },
@@ -117,6 +117,7 @@ var ViewEditor = Widget.extend({
         var refX = 0;
         var resizing = false;
         var minWidth = 400;
+        var debounceStoreEditorWidth = _.debounce(storeEditorWidth, 500);
 
         this._updateViewSelectDOM();
         this.displayView(
@@ -125,7 +126,13 @@ var ViewEditor = Widget.extend({
         );
 
         $(document).on("mouseup.ViewEditor", stopResizing.bind(this)).on("mousemove.ViewEditor", updateWidth.bind(this));
-        this.$el.on("mousedown.ViewEditor", ".ace_gutter", startResizing.bind(this));
+        if (this.options.position === 'left') {
+            this.$('.ace_scroller').after($('<div>').addClass('ace_resize_bar'));
+            this.$('.ace_gutter').css({'cursor': 'default'});
+            this.$el.on("mousedown.ViewEditor", ".ace_resize_bar", startResizing.bind(this));
+        } else {
+            this.$el.on("mousedown.ViewEditor", ".ace_gutter", startResizing.bind(this));
+        }
 
         resizeEditor.call(this, readEditorWidth.call(this));
 
@@ -155,10 +162,13 @@ var ViewEditor = Widget.extend({
             if (!resizing) return;
 
             var offset = e.pageX - refX;
+            if (this.options.position === 'left') {
+                offset = - offset;
+            }
             var width = this.$el.width() - offset;
             refX = e.pageX;
             resizeEditor.call(this, width);
-            storeEditorWidth.call(this);
+            debounceStoreEditorWidth.call(this);
         }
     },
     /**

addons/web_editor/static/src/less/web_editor.ui.components.less

@@ -174,6 +174,12 @@
                 }
             }
         }
+        .ace_resize_bar {
+            .o-position-absolute(@right: 0);
+            width: 25px;
+            height: 100%;
+            cursor: ew-resize;
+        }
         .ace_scroller.o_error::after {
             .o-position-absolute(0, auto, 0, 0);
             width: 3px;