[REF] web_editor, website: move ACE editor to web_editor

4 files changed, 706 insertions, 0 deletions

diff --git a/addons/web_editor/static/lib/vkbeautify/vkbeautify.0.99.00.beta.js b/addons/web_editor/static/lib/vkbeautify/vkbeautify.0.99.00.beta.js
new file mode 100644
index 00000000000..57effaeca9d
--- /dev/null
+++ b/addons/web_editor/static/lib/vkbeautify/vkbeautify.0.99.00.beta.js
@@ -0,0 +1,358 @@
+/**

+* vkBeautify - javascript plugin to pretty-print or minify text in XML, JSON, CSS and SQL formats.

+*  

+* Version - 0.99.00.beta 

+* Copyright (c) 2012 Vadim Kiryukhin

+* vkiryukhin @ gmail.com

+* http://www.eslinstructor.net/vkbeautify/

+* 

+* Dual licensed under the MIT and GPL licenses:

+*   http://www.opensource.org/licenses/mit-license.php

+*   http://www.gnu.org/licenses/gpl.html

+*

+*   Pretty print

+*

+*        vkbeautify.xml(text [,indent_pattern]);

+*        vkbeautify.json(text [,indent_pattern]);

+*        vkbeautify.css(text [,indent_pattern]);

+*        vkbeautify.sql(text [,indent_pattern]);

+*

+*        @text - String; text to beatufy;

+*        @indent_pattern - Integer | String;

+*                Integer:  number of white spaces;

+*                String:   character string to visualize indentation ( can also be a set of white spaces )

+*   Minify

+*

+*        vkbeautify.xmlmin(text [,preserve_comments]);

+*        vkbeautify.jsonmin(text);

+*        vkbeautify.cssmin(text [,preserve_comments]);

+*        vkbeautify.sqlmin(text);

+*

+*        @text - String; text to minify;

+*        @preserve_comments - Bool; [optional];

+*                Set this flag to true to prevent removing comments from @text ( minxml and mincss functions only. )

+*

+*   Examples:

+*        vkbeautify.xml(text); // pretty print XML

+*        vkbeautify.json(text, 4 ); // pretty print JSON

+*        vkbeautify.css(text, '. . . .'); // pretty print CSS

+*        vkbeautify.sql(text, '----'); // pretty print SQL

+*

+*        vkbeautify.xmlmin(text, true);// minify XML, preserve comments

+*        vkbeautify.jsonmin(text);// minify JSON

+*        vkbeautify.cssmin(text);// minify CSS, remove comments ( default )

+*        vkbeautify.sqlmin(text);// minify SQL

+*

+*/

+

+(function() {

+

+function createShiftArr(step) {

+

+	var space = '    ';

+	

+	if ( isNaN(parseInt(step)) ) {  // argument is string

+		space = step;

+	} else { // argument is integer

+		switch(step) {

+			case 1: space = ' '; break;

+			case 2: space = '  '; break;

+			case 3: space = '   '; break;

+			case 4: space = '    '; break;

+			case 5: space = '     '; break;

+			case 6: space = '      '; break;

+			case 7: space = '       '; break;

+			case 8: space = '        '; break;

+			case 9: space = '         '; break;

+			case 10: space = '          '; break;

+			case 11: space = '           '; break;

+			case 12: space = '            '; break;

+		}

+	}

+

+	var shift = ['\n']; // array of shifts

+	for(ix=0;ix<100;ix++){

+		shift.push(shift[ix]+space); 

+	}

+	return shift;

+}

+

+function vkbeautify(){

+	this.step = '    '; // 4 spaces

+	this.shift = createShiftArr(this.step);

+};

+

+vkbeautify.prototype.xml = function(text,step) {

+

+	var ar = text.replace(/>\s{0,}</g,"><")

+				 .replace(/</g,"~::~<")

+				 .replace(/\s*xmlns\:/g,"~::~xmlns:")

+				 .replace(/\s*xmlns\=/g,"~::~xmlns=")

+				 .split('~::~'),

+		len = ar.length,

+		inComment = false,

+		deep = 0,

+		str = '',

+		ix = 0,

+		shift = step ? createShiftArr(step) : this.shift;

+

+		for(ix=0;ix<len;ix++) {

+			// start comment or <![CDATA[...]]> or <!DOCTYPE //

+			if(ar[ix].search(/<!/) > -1) { 

+				str += shift[deep]+ar[ix];

+				inComment = true; 

+				// end comment  or <![CDATA[...]]> //

+				if(ar[ix].search(/-->/) > -1 || ar[ix].search(/\]>/) > -1 || ar[ix].search(/!DOCTYPE/) > -1 ) { 

+					inComment = false; 

+				}

+			} else 

+			// end comment  or <![CDATA[...]]> //

+			if(ar[ix].search(/-->/) > -1 || ar[ix].search(/\]>/) > -1) { 

+				str += ar[ix];

+				inComment = false; 

+			} else 

+			// <elm></elm> //

+			if( /^<\w/.exec(ar[ix-1]) && /^<\/\w/.exec(ar[ix]) &&

+				/^<[\w:\-\.\,]+/.exec(ar[ix-1]) == /^<\/[\w:\-\.\,]+/.exec(ar[ix])[0].replace('/','')) { 

+				str += ar[ix];

+				if(!inComment) deep--;

+			} else

+			 // <elm> //

+			if(ar[ix].search(/<\w/) > -1 && ar[ix].search(/<\//) == -1 && ar[ix].search(/\/>/) == -1 ) {

+				str = !inComment ? str += shift[deep++]+ar[ix] : str += ar[ix];

+			} else 

+			 // <elm>...</elm> //

+			if(ar[ix].search(/<\w/) > -1 && ar[ix].search(/<\//) > -1) {

+				str = !inComment ? str += shift[deep]+ar[ix] : str += ar[ix];

+			} else 

+			// </elm> //

+			if(ar[ix].search(/<\//) > -1) { 

+				str = !inComment ? str += shift[--deep]+ar[ix] : str += ar[ix];

+			} else 

+			// <elm/> //

+			if(ar[ix].search(/\/>/) > -1 ) { 

+				str = !inComment ? str += shift[deep]+ar[ix] : str += ar[ix];

+			} else 

+			// <? xml ... ?> //

+			if(ar[ix].search(/<\?/) > -1) { 

+				str += shift[deep]+ar[ix];

+			} else 

+			// xmlns //

+			if( ar[ix].search(/xmlns\:/) > -1  || ar[ix].search(/xmlns\=/) > -1) { 

+				str += shift[deep]+ar[ix];

+			} 

+			

+			else {

+				str += ar[ix];

+			}

+		}

+		

+	return  (str[0] == '\n') ? str.slice(1) : str;

+}

+

+vkbeautify.prototype.json = function(text,step) {

+

+	var step = step ? step : this.step;

+	

+	if (typeof JSON === 'undefined' ) return text; 

+	

+	if ( typeof text === "string" ) return JSON.stringify(JSON.parse(text), null, step);

+	if ( typeof text === "object" ) return JSON.stringify(text, null, step);

+		

+	return text; // text is not string nor object

+}

+

+vkbeautify.prototype.css = function(text, step) {

+

+	var ar = text.replace(/\s{1,}/g,' ')

+				.replace(/\{/g,"{~::~")

+				.replace(/\}/g,"~::~}~::~")

+				.replace(/\;/g,";~::~")

+				.replace(/\/\*/g,"~::~/*")

+				.replace(/\*\//g,"*/~::~")

+				.replace(/~::~\s{0,}~::~/g,"~::~")

+				.split('~::~'),

+		len = ar.length,

+		deep = 0,

+		str = '',

+		ix = 0,

+		shift = step ? createShiftArr(step) : this.shift;

+		

+		for(ix=0;ix<len;ix++) {

+

+			if( /\{/.exec(ar[ix]))  { 

+				str += shift[deep++]+ar[ix];

+			} else 

+			if( /\}/.exec(ar[ix]))  { 

+				str += shift[--deep]+ar[ix];

+			} else

+			if( /\*\\/.exec(ar[ix]))  { 

+				str += shift[deep]+ar[ix];

+			}

+			else {

+				str += shift[deep]+ar[ix];

+			}

+		}

+		return str.replace(/^\n{1,}/,'');

+}

+

+//----------------------------------------------------------------------------

+

+function isSubquery(str, parenthesisLevel) {

+	return  parenthesisLevel - (str.replace(/\(/g,'').length - str.replace(/\)/g,'').length )

+}

+

+function split_sql(str, tab) {

+

+	return str.replace(/\s{1,}/g," ")

+

+				.replace(/ AND /ig,"~::~"+tab+tab+"AND ")

+				.replace(/ BETWEEN /ig,"~::~"+tab+"BETWEEN ")

+				.replace(/ CASE /ig,"~::~"+tab+"CASE ")

+				.replace(/ ELSE /ig,"~::~"+tab+"ELSE ")

+				.replace(/ END /ig,"~::~"+tab+"END ")

+				.replace(/ FROM /ig,"~::~FROM ")

+				.replace(/ GROUP\s{1,}BY/ig,"~::~GROUP BY ")

+				.replace(/ HAVING /ig,"~::~HAVING ")

+				//.replace(/ SET /ig," SET~::~")

+				.replace(/ IN /ig," IN ")

+				

+				.replace(/ JOIN /ig,"~::~JOIN ")

+				.replace(/ CROSS~::~{1,}JOIN /ig,"~::~CROSS JOIN ")

+				.replace(/ INNER~::~{1,}JOIN /ig,"~::~INNER JOIN ")

+				.replace(/ LEFT~::~{1,}JOIN /ig,"~::~LEFT JOIN ")

+				.replace(/ RIGHT~::~{1,}JOIN /ig,"~::~RIGHT JOIN ")

+				

+				.replace(/ ON /ig,"~::~"+tab+"ON ")

+				.replace(/ OR /ig,"~::~"+tab+tab+"OR ")

+				.replace(/ ORDER\s{1,}BY/ig,"~::~ORDER BY ")

+				.replace(/ OVER /ig,"~::~"+tab+"OVER ")

+

+				.replace(/\(\s{0,}SELECT /ig,"~::~(SELECT ")

+				.replace(/\)\s{0,}SELECT /ig,")~::~SELECT ")

+				

+				.replace(/ THEN /ig," THEN~::~"+tab+"")

+				.replace(/ UNION /ig,"~::~UNION~::~")

+				.replace(/ USING /ig,"~::~USING ")

+				.replace(/ WHEN /ig,"~::~"+tab+"WHEN ")

+				.replace(/ WHERE /ig,"~::~WHERE ")

+				.replace(/ WITH /ig,"~::~WITH ")

+				

+				//.replace(/\,\s{0,}\(/ig,",~::~( ")

+				//.replace(/\,/ig,",~::~"+tab+tab+"")

+

+				.replace(/ ALL /ig," ALL ")

+				.replace(/ AS /ig," AS ")

+				.replace(/ ASC /ig," ASC ")	

+				.replace(/ DESC /ig," DESC ")	

+				.replace(/ DISTINCT /ig," DISTINCT ")

+				.replace(/ EXISTS /ig," EXISTS ")

+				.replace(/ NOT /ig," NOT ")

+				.replace(/ NULL /ig," NULL ")

+				.replace(/ LIKE /ig," LIKE ")

+				.replace(/\s{0,}SELECT /ig,"SELECT ")

+				.replace(/\s{0,}UPDATE /ig,"UPDATE ")

+				.replace(/ SET /ig," SET ")

+							

+				.replace(/~::~{1,}/g,"~::~")

+				.split('~::~');

+}

+

+vkbeautify.prototype.sql = function(text,step) {

+

+	var ar_by_quote = text.replace(/\s{1,}/g," ")

+							.replace(/\'/ig,"~::~\'")

+							.split('~::~'),

+		len = ar_by_quote.length,

+		ar = [],

+		deep = 0,

+		tab = this.step,//+this.step,

+		inComment = true,

+		inQuote = false,

+		parenthesisLevel = 0,

+		str = '',

+		ix = 0,

+		shift = step ? createShiftArr(step) : this.shift;;

+

+		for(ix=0;ix<len;ix++) {

+			if(ix%2) {

+				ar = ar.concat(ar_by_quote[ix]);

+			} else {

+				ar = ar.concat(split_sql(ar_by_quote[ix], tab) );

+			}

+		}

+		

+		len = ar.length;

+		for(ix=0;ix<len;ix++) {

+			

+			parenthesisLevel = isSubquery(ar[ix], parenthesisLevel);

+			

+			if( /\s{0,}\s{0,}SELECT\s{0,}/.exec(ar[ix]))  { 

+				ar[ix] = ar[ix].replace(/\,/g,",\n"+tab+tab+"")

+			} 

+			

+			if( /\s{0,}\s{0,}SET\s{0,}/.exec(ar[ix]))  { 

+				ar[ix] = ar[ix].replace(/\,/g,",\n"+tab+tab+"")

+			} 

+			

+			if( /\s{0,}\(\s{0,}SELECT\s{0,}/.exec(ar[ix]))  { 

+				deep++;

+				str += shift[deep]+ar[ix];

+			} else 

+			if( /\'/.exec(ar[ix]) )  { 

+				if(parenthesisLevel<1 && deep) {

+					deep--;

+				}

+				str += ar[ix];

+			}

+			else  { 

+				str += shift[deep]+ar[ix];

+				if(parenthesisLevel<1 && deep) {

+					deep--;

+				}

+			} 

+			var junk = 0;

+		}

+

+		str = str.replace(/^\n{1,}/,'').replace(/\n{1,}/g,"\n");

+		return str;

+}

+

+

+vkbeautify.prototype.xmlmin = function(text, preserveComments) {

+

+	var str = preserveComments ? text

+							   : text.replace(/\<![ \r\n\t]*(--([^\-]|[\r\n]|-[^\-])*--[ \r\n\t]*)\>/g,"")

+									 .replace(/[ \r\n\t]{1,}xmlns/g, ' xmlns');

+	return  str.replace(/>\s{0,}</g,"><"); 

+}

+

+vkbeautify.prototype.jsonmin = function(text) {

+

+	if (typeof JSON === 'undefined' ) return text; 

+	

+	return JSON.stringify(JSON.parse(text), null, 0); 

+				

+}

+

+vkbeautify.prototype.cssmin = function(text, preserveComments) {

+	

+	var str = preserveComments ? text

+							   : text.replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+\//g,"") ;

+

+	return str.replace(/\s{1,}/g,' ')

+			  .replace(/\{\s{1,}/g,"{")

+			  .replace(/\}\s{1,}/g,"}")

+			  .replace(/\;\s{1,}/g,";")

+			  .replace(/\/\*\s{1,}/g,"/*")

+			  .replace(/\*\/\s{1,}/g,"*/");

+}

+

+vkbeautify.prototype.sqlmin = function(text) {

+	return text.replace(/\s{1,}/g," ").replace(/\s{1,}\(/,"(").replace(/\s{1,}\)/,")");

+}

+

+window.vkbeautify = new vkbeautify();

+

+})();

+

diff --git a/addons/web_editor/static/src/js/ace.js b/addons/web_editor/static/src/js/ace.js
new file mode 100644
index 00000000000..cd20815f49c
--- /dev/null
+++ b/addons/web_editor/static/src/js/ace.js
@@ -0,0 +1,320 @@
+odoo.define('web_editor.ace', function (require) {
+'use strict';
+
+var ajax = require('web.ajax');
+var Class = require('web.Class');
+var core = require('web.core');
+var Widget = require('web.Widget');
+var base = require('web_editor.base');
+var local_storage = require('web.local_storage');
+
+var qweb = core.qweb;
+var _t = core._t;
+
+ajax.loadXML('/web_editor/static/src/xml/ace.xml', qweb);
+
+var XmlDocument = Class.extend({
+    init: function (text) {
+        this.xml = text;
+    },
+    isWellFormed: function () {
+        var error;
+        if (document.implementation.createDocument) {
+            // use try catch for ie
+            try {
+                var dom = new DOMParser().parseFromString(this.xml, "text/xml");
+                error = dom.getElementsByTagName("parsererror");
+                return error.length === 0 || $(error).text();
+            } catch (e) {}
+        }
+        if (window.ActiveXObject) {
+            // IE
+            var msDom = new ActiveXObject("Microsoft.XMLDOM");
+            msDom.async = false;
+            msDom.loadXML(this.xml);
+            return !msDom.parseError.errorCode || msDom.parseError.reason + "\nline " + msDom.parseError.line;
+        }
+        return true;
+    },
+    format: function () {
+        return vkbeautify.xml(this.xml, 4);
+    },
+});
+
+var ViewOption = Widget.extend({
+    template: 'web_editor.ace_view_option',
+    init: function (parent, options) {
+        this.view_id = options.id;
+        this.view_name = options.name;
+
+        var indent = _.str.repeat("- ", options.level);
+        this.view_name = _.str.sprintf("%s%s", indent, options.name);
+        this._super(parent);
+    },
+});
+
+var ViewEditor = Widget.extend({
+    resizing: false,
+    refX: 0,
+    minWidth: 40,
+    template: 'web_editor.ace_view_editor',
+    events: {
+        'change #ace-view-list': 'displaySelectedView',
+        'click .js_include_bundles': 'loadTemplates',
+        'click button[data-action=save]': 'saveViews',
+        'click button[data-action=format]': 'formatXml',
+        'click button[data-action=close]': 'close',
+    },
+    init: function (parent) {
+        this.buffers = {};
+        this.views = {};
+        this._super(parent);
+    },
+    start: function () {
+        var self = this;
+        self.aceEditor = ace.edit(self.$('#ace-view-editor')[0]);
+        self.aceEditor.setTheme("ace/theme/monokai");
+        self.loadTemplates();
+
+        var $editor = self.$('.ace_editor');
+        function resizeEditor (target) {
+            var width = Math.min(document.body.clientWidth, Math.max(parseInt(target, 10), self.minWidth));
+            $editor.width(width);
+            self.aceEditor.resize();
+            self.$el.width(width);
+        }
+        function storeEditorWidth() {
+            local_storage.setItem('ace_editor_width', self.$el.width());
+        }
+        function readEditorWidth() {
+            var width = local_storage.getItem('ace_editor_width');
+            return parseInt(width || 720, 10);
+        }
+        function startResizing (e) {
+            self.refX = e.pageX;
+            self.resizing = true;
+        }
+        function stopResizing () {
+            self.resizing = false;
+        }
+        function updateWidth (e) {
+            if (self.resizing) {
+                var offset = e.pageX - self.refX;
+                var width = self.$el.width() - offset;
+                self.refX = e.pageX;
+                resizeEditor(width);
+                storeEditorWidth();
+            }
+        }
+        document.body.addEventListener('mouseup', stopResizing, true);
+        self.$('.ace_gutter').mouseup(stopResizing).mousedown(startResizing).click(stopResizing);
+        $(document).mousemove(updateWidth);
+        $('button[data-action=edit]').click(function () {
+            self.close();
+        });
+        resizeEditor(readEditorWidth());
+    },
+
+    // The 4 following methods are meant to be extended depending on the context
+    open: function () {
+        this.$el.removeClass('oe_ace_closed').addClass('oe_ace_open');
+    },
+    close: function () {
+        this.$el.removeClass('oe_ace_open').addClass('oe_ace_closed');
+    },
+    reloadPage: function () {},
+    loadTemplates: function () {},
+
+    loadViews: function (views) {
+        var $viewList = this.$('#ace-view-list').empty();
+        _(this.buildViewGraph(views)).each(function (view) {
+            if (!view.id) { return; }
+
+            this.views[view.id] = view;
+            new ViewOption(this, view).appendTo($viewList);
+            this.loadView(view.id);
+        }.bind(this));
+    },
+    buildViewGraph: function (views) {
+        var activeViews = _.uniq(_.filter(views, function (view) {
+           return view.active;
+        }), false, function (view) {
+            return view.id;
+        });
+        var index = {};
+        var roots = [];
+        _.each(activeViews, function (view) {
+            index[view.id] = view;
+            view.children = [];
+        });
+        _.each(index, function (view) {
+            var parentId = view.inherit_id;
+            if (parentId && index[parentId]) {
+                index[parentId].children.push(view);
+            } else {
+                roots.push(view);
+            }
+        });
+        var result = [];
+        function visit (node, level) {
+            node.level = level;
+            result.push(node);
+            _.each(node.children, function (child) {
+                visit(child, level + 1);
+            });
+        }
+        _.each(roots, function (node) {
+            visit(node, 0);
+        });
+        return result;
+    },
+    loadView: function (id) {
+        var viewId = parseInt(id, 10);
+        var self = this;
+        ajax.jsonRpc('/web/dataset/call', 'call', {
+            model: 'ir.ui.view',
+            method: 'read',
+            args: [[viewId], ['arch'], _.extend(base.get_context(), {'lang': null})],
+        }).then(function (result) {
+            var editingSession = self.buffers[viewId] = new ace.EditSession(result[0].arch);
+            editingSession.setMode("ace/mode/xml");
+            editingSession.setUndoManager(new ace.UndoManager());
+            editingSession.setUseWorker(false);
+            editingSession.on("change", function () {
+                setTimeout(function () {
+                    var $option = self.$('#ace-view-list').find('[value='+viewId+']');
+                    var bufferName = $option.text();
+                    var dirtyMarker = " (unsaved changes)";
+                    var isDirty = editingSession.getUndoManager().hasUndo();
+                    if (isDirty && bufferName.indexOf(dirtyMarker) < 0) {
+                        $option.text(bufferName + dirtyMarker);
+                    } else if (!isDirty && bufferName.indexOf(dirtyMarker) > 0) {
+                        $option.text(bufferName.substring(0, bufferName.indexOf(dirtyMarker)));
+                    }
+                }, 1);
+            });
+            if (viewId === self.selectedViewId()) {
+                self.displayView.call(self, viewId);
+            }
+        });
+    },
+    selectedViewId: function () {
+        return parseInt(this.$('#ace-view-list').val(), 10);
+    },
+    displayView: function (id) {
+        var viewId = parseInt(id, 10);
+        var editingSession = this.buffers[viewId];
+        if (editingSession) {
+            this.aceEditor.setSession(editingSession);
+            this.$('#ace-view-id').text(_.str.sprintf(
+                _t("Template ID: %s"),
+                this.views[viewId].xml_id));
+        }
+    },
+    displaySelectedView: function () {
+        this.displayView(this.selectedViewId());
+        this.updateHash();
+    },
+    formatXml: function () {
+        var xml = new XmlDocument(this.aceEditor.getValue());
+        this.aceEditor.setValue(xml.format());
+    },
+    saveViews: function () {
+        var self = this;
+        var toSave = _.filter(_.map(self.buffers, function (editingSession, viewId) {
+            return {
+                id: parseInt(viewId, 10),
+                isDirty: editingSession.getUndoManager().hasUndo(),
+                text: editingSession.getValue(),
+            };
+        }), function (session) {
+            return session.isDirty;
+        });
+        this.clearError();
+        var requests = _.map(toSave, function (session) {
+            return self.saveView(session);
+        });
+        $.when.apply($, requests).then(function () {
+            self.reloadPage.call(self);
+        }).fail(function (source, session, error) {
+            self.displayError.call(self, source, session, error);
+        });
+    },
+    saveView: function (session) {
+        var xml = new XmlDocument(session.text);
+        var isWellFormed = xml.isWellFormed();
+        var def = $.Deferred();
+        if (isWellFormed === true) {
+            ajax.jsonRpc('/web/dataset/call', 'call', {
+                model: 'ir.ui.view',
+                method: 'write',
+                args: [[session.id], { 'arch':  xml.xml }, _.extend(base.get_context(), {'lang': null})],
+            }).then(function () {
+                def.resolve();
+            }).fail(function (source, error) {
+                def.reject("server", session, error);
+            });
+        } else {
+            def.reject(null, session, isWellFormed);
+        }
+        return def;
+    },
+    clearError: function () {
+        this.$(".ace_layer.ace_text-layer .ace_line").css("background", "");
+    },
+    displayError: function (source, session, error) {
+        var self = this;
+        var line, test;
+        // format error message
+        var message = _.isString(error) ? error
+            : (error && error.data && error.data.arguments && error.data.arguments[0] === "Access Denied") ? "Access denied: please sign in"
+            : (error && error.data && error.data.message) ? error.data.message
+            : (error && error.message) ? error.message
+            : "Unexpected error";
+        if (source == "server") {
+            message = eval(message.replace(/^\(/g, '([')
+                .replace(/\)$/g, '])')
+                .replace(/u'/g, "'")
+                .replace(/<([^>]+)>/g, '<b style="color:#661100;">&lt;\$1&gt;</b>'))[1];
+            line = -1;
+        } else {
+            line = message.match(/line ([0-9]+)/i);
+            line = line ? parseInt(line[1],10) : -1;
+            test = new RegExp("^\\s*"+line+"\\s*$");
+        }
+
+        function gotoline() {
+            self.aceEditor.gotoLine(line);
+            setTimeout(function () {
+                var $lines = self.$(".ace_editor .ace_gutter .ace_gutter-cell");
+                var index = $lines.filter(function () {
+                    return test.test($(this).text());
+                }).index();
+                if (index>0) {
+                    self.$(".ace_layer.ace_text-layer .ace_line:eq(" + index + ")").css("background", "#661100");
+                }
+            },100);
+        }
+        function onchangeSession () {
+            self.aceEditor.off('changeSession', onchangeSession);
+            gotoline();
+        }
+
+        var $list = this.$("#ace-view-list");
+        if (+$list.val() == session.id) {
+            if (line>-1) gotoline();
+        } else {
+            if (line) self.aceEditor.on('changeSession', onchangeSession);
+            this.$("#ace-view-list").val(session.id).change();
+        }
+        return session.text.match(/\s+name=['"]([^'"]+)['"]/i)[1], "<b>Malformed XML document</b>:<br/>" + message;
+    },
+});
+
+return {
+    XmlDocument: XmlDocument,
+    ViewOption: ViewOption,
+    ViewEditor: ViewEditor,
+};
+
+});
diff --git a/addons/web_editor/static/src/xml/ace.xml b/addons/web_editor/static/src/xml/ace.xml
new file mode 100644
index 00000000000..2f18f60731f
--- /dev/null
+++ b/addons/web_editor/static/src/xml/ace.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+
+<t t-name="web_editor.ace_view_editor">
+    <div class="o_ace_view_editor oe_ace_closed">
+        <div class="form-inline o_ace_view_editor_title">
+            <select id="ace-view-list" class="form-control oe_view_list">
+                <!-- filled in JS -->
+            </select>
+            <label class="oe_include_bundles">
+                <input type="checkbox" class="js_include_bundles"/> Include Asset Bundles
+            </label>
+            <button data-action="save" type="submit" class="btn btn-success">Save</button>
+            <button data-action="format" type="button" class="btn btn-warning">Format</button>
+            <button data-action="close" type="button" class="btn btn-info">Close</button>
+        </div>
+        <div id="ace-view-id"/>
+        <div id="ace-view-editor"/>
+    </div>
+</t>
+
+<t t-name="web_editor.ace_view_option">
+    <option t-att-value="widget.view_id"><t t-esc="widget.view_name"/></option>
+</t>
+
+</templates>
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 056b2df4169..6c7f23f8822 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -60,6 +60,8 @@
 
 <template id="assets_common" inherit_id="web.assets_common" name="web_editor base assets_common">
     <xpath expr="script[last()]" position="after">
+        <script type="text/javascript" src="/web_editor/static/lib/vkbeautify/vkbeautify.0.99.00.beta.js"></script>
+        <script type="text/javascript" src="/web_editor/static/src/js/ace.js" />
         <script type="text/javascript" src="/web_editor/static/src/js/base.js" />
         <script type="text/javascript" src="/web_editor/static/src/js/snippets.animation.js" />
     </xpath>