[FIX] playground: fix some issues with tab handling

closes #200

tools/playground/app.js

@@ -284,15 +284,7 @@ class TabbedEditor extends owl.Component {
     this.setTab = owl.utils.debounce(this.setTab, 250, true);
 
     this.sessions = {};
-    for (let tab of ["js", "xml", "css"]) {
+    this._setupSessions(props);
-      if (props[tab]) {
-        this.sessions[tab] = new ace.EditSession(props[tab], MODES[tab]);
-        this.sessions[tab].setOption("useWorker", false);
-        const tabSize = tab === "xml" ? 2 : 4;
-        this.sessions[tab].setOption("tabSize", tabSize);
-        this.sessions[tab].setUndoManager(new ace.UndoManager());
-      }
-    }
     this.editor = null;
   }
 
@@ -317,9 +309,19 @@ class TabbedEditor extends owl.Component {
     });
   }
 
+  willUpdateProps(nextProps) {
+    this._setupSessions(nextProps);
+  }
+
   patched() {
     const session = this.sessions[this.state.currentTab];
-    session.setValue(this.props[this.state.currentTab], -1);
+    let content = this.props[this.state.currentTab];
+    if (content === false) {
+      const tab = this.props.js ? "js" : this.props.xml ? "xml" : "css";
+      content = this.props[tab];
+      this.state.currentTab = tab;
+    }
+    session.setValue(content, -1);
     this.editor.setSession(session);
     this.editor.resize();
   }
@@ -347,6 +349,18 @@ class TabbedEditor extends owl.Component {
       });
     }
   }
+
+  _setupSessions(props) {
+    for (let tab of ["js", "xml", "css"]) {
+      if (props[tab] && !this.sessions[tab]) {
+        this.sessions[tab] = new ace.EditSession(props[tab], MODES[tab]);
+        this.sessions[tab].setOption("useWorker", false);
+        const tabSize = tab === "xml" ? 2 : 4;
+        this.sessions[tab].setOption("tabSize", tabSize);
+        this.sessions[tab].setUndoManager(new ace.UndoManager());
+      }
+    }
+  }
 }
 
 //------------------------------------------------------------------------------

tools/playground/templates.xml

@@ -27,7 +27,7 @@
         <TabbedEditor
             js="state.js"
             css="!state.splitLayout and state.css"
-            xml="!state.splitLayout and state.js"
+            xml="!state.splitLayout and state.xml"
             t-att-style="topEditorStyle"/>
         <t t-if="state.splitLayout">
           <div class="separator horizontal"/>