styling and ace editor updates for IE

Author: sorvell

Playground/src/css/pg-toolbar-button.css

@@ -1,6 +1,7 @@
 .toolbar-button {
   width: 116px;
   height: 38px;
+  display: inline-block;
   text-decoration: none !important;
   -webkit-user-select: none;
   user-select: none;
@@ -10,19 +11,23 @@
   -moz-box-sizing: border-box;
   background-image: -webkit-linear-gradient(top, #4387fd, #4683ea);
   background-image: -moz-linear-gradient(top, #4387fd, #4683ea);
-  border: 1px solid #3079ed;
+  background-image: -ms-linear-gradient(top, #4387fd, #4683ea);
+  /*border: 1px solid #3079ed;*/
+  border: 0;
   border-radius: 3px;
   text-align: center;
   line-height: 31px;
   font-size: 14px;
   color: white;
   text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
   cursor: pointer;
+  outline: 0;
 }
 
 .toolbar-button:hover {
   background-image: -webkit-linear-gradient(top, #357ae8, #4683ea);
   background-image: -moz-linear-gradient(top, #357ae8, #4683ea);
+  background-image: -ms-linear-gradient(top, #357ae8, #4683ea);
 }
 
 .toolbar-button:active {

Playground/src/pg-view.html

@@ -30,7 +30,7 @@
     </polymer-ui-toolbar>
 
     <div id="stage" h-flexbox?="{{!vertical}}" v-flexbox?="{{vertical}}" flex>
-      <ace-element id="ace" mode="html" theme="chrome" tabSize="2" vertical?="{{vertical}}"></ace-element>
+      <ace-element id="ace" mode="html" theme="chrome" tabSize="2" vertical?="{{vertical}}" on-editor-input="editorChange"></ace-element>
 
       <polymer-ui-splitter direction="{{vertical ? 'up' : 'left'}}" locked="{{maximized}}" 
           on-pointerdown="disableOutputMouseEvents" on-pointerup="enableOutputMouseEvents" 
@@ -64,7 +64,6 @@
         if (meta) {
           this.meta = meta;
         }
-        this.editor.editor.on('change', this.editorChange.bind(this));
       },
       resize: function() {
         this.$.ace.editor.resize();