[IMP] display view's XID *below* the selection

* Looks better
* Allows for a label
* Allows for longer template names and ids without cutting off
* Room to grow more info bits

addons/website/static/src/css/editor.css

@@ -472,13 +472,14 @@ ul.oe_menu_editor .disclose {
   right: 0;
   z-index: 1000;
   height: 100%;
+  background: #2f3129;
+  color: white;
 }
 .oe_ace_view_editor .oe_ace_view_editor_title {
   width: 100%;
   padding-top: 0;
   padding-left: 0;
   height: 30px;
-  background: #2f3129;
 }
 .oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list {
   width: 50%;
@@ -496,13 +497,16 @@ ul.oe_menu_editor .disclose {
 }
 .oe_ace_view_editor .ace_editor {
   position: absolute;
-  top: 30px;
+  top: 50px;
   right: 0;
   left: 0;
 }
 .oe_ace_view_editor .ace_editor .ace_gutter {
   cursor: ew-resize;
 }
+.oe_ace_view_editor #ace-view-id {
+  padding: 0 1em;
+}
 .oe_ace_view_editor.oe_ace_open {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=97);
   opacity: 0.97;

addons/website/static/src/css/editor.sass

@@ -408,6 +408,7 @@ $highlighted_text_color: #ffffff
 /* ---- ACE EDITOR ---- {{{ */
 
 $editorbar_height: 30px
+$infobar_height: 20px
 // TODO Fix => might break with themes
 
 .oe_ace_view_editor
@@ -416,12 +417,13 @@ $editorbar_height: 30px
     right: 0
     z-index: 1000
     height: 100%
+    background: #2F3129
+    color: white
     .oe_ace_view_editor_title
         width: 100%
         padding-top: 0
         padding-left: 0
         height: $editorbar_height
-        background: #2F3129
         .oe_view_list
             width: 50%
             height: $editorbar_height
@@ -432,12 +434,14 @@ $editorbar_height: 30px
             @include editor-font
     .ace_editor
         position: absolute
-        top: $editorbar_height
+        top: $editorbar_height + $infobar_height
         right: 0
         // bottom property is set programmatically
         left: 0
         .ace_gutter
             cursor: ew-resize
+    #ace-view-id
+        padding: 0 1em
     &.oe_ace_open
         +opacity(0.97)
     &.oe_ace_closed

addons/website/static/src/js/website.ace.js

@@ -1,6 +1,7 @@
 (function () {
     'use strict';
 
+    var _t = openerp._t;
     var hash = "#advanced-view-editor";
 
     var website = openerp.website;
@@ -69,9 +70,7 @@
             this.view_name = options.name;
 
             var indent = _.str.repeat("- ", options.level);
-            this.view_name = _.str.sprintf(
-                "%s%s (%s)",
-                indent, options.name, options.xml_id);
+            this.view_name = _.str.sprintf("%s%s", indent, options.name);
             this._super(parent);
         },
     });
@@ -89,6 +88,7 @@
         },
         init: function (parent) {
             this.buffers = {};
+            this.views = {};
             this._super(parent);
         },
         start: function () {
@@ -167,6 +167,7 @@
             _(this.buildViewGraph(views)).each(function (view) {
                 if (!view.id) { return; }
 
+                this.views[view.id] = view;
                 new website.ace.ViewOption(this, view).appendTo($viewList);
                 this.loadView(view.id);
             }.bind(this));
@@ -241,6 +242,9 @@
             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 () {

addons/website/static/src/xml/website.ace.xml

@@ -10,6 +10,7 @@
                 <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>