Draw field on new webpage.

Change-Id: Ibf71aa126e51cb6a6110d890c13d0633fbc3087b
diff --git a/aos/network/www/config_handler.ts b/aos/network/www/config_handler.ts
index 72b496e..ae9896c 100644
--- a/aos/network/www/config_handler.ts
+++ b/aos/network/www/config_handler.ts
@@ -3,16 +3,26 @@
 
 export class ConfigHandler {
   private readonly root_div = document.getElementById('config');
+  private readonly tree_div;
 
   constructor(
       private readonly config: Configuration,
-      private readonly dataChannel: RTCDataChannel) {}
+      private readonly dataChannel: RTCDataChannel) {
+    const show_button = document.createElement('button');
+    show_button.addEventListener('click', () => this.toggleConfig());
+    const show_text = document.createTextNode('Show/Hide Config');
+    show_button.appendChild(show_text);
+    this.tree_div = document.createElement('div');
+    this.tree_div.hidden = true;
+    this.root_div.appendChild(show_button);
+    this.root_div.appendChild(this.tree_div);
+  }
 
   printConfig() {
     for (const i = 0; i < this.config.channelsLength(); i++) {
       const channel_div = document.createElement('div');
       channel_div.classList.add('channel');
-      this.root_div.appendChild(channel_div);
+      this.tree_div.appendChild(channel_div);
 
       const input_el = document.createElement('input');
       input_el.setAttribute('data-index', i);
@@ -64,4 +74,8 @@
     console.log('connect', array);
     this.dataChannel.send(array.buffer.slice(array.byteOffset));
   }
+
+  toggleConfig() {
+    this.tree_div.hidden = !this.tree_div.hidden;
+  }
 }