rename canvas to designCanvas for styling reasons

elements/design-frame/design-frame.css

@@ -8,16 +8,16 @@
   -webkit-user-select: none;
 }
 
-#canvas {
+#designCanvas {
   background-color: white;
 }
 
-#canvas .selected-element {
+#designCanvas .selected-element {
   outline: solid 3px rgba(66, 87, 203, 0.8);
   outline-offset: -3px;
 }
 
-#canvas *::after {
+#designCanvas *::after {
   position: absolute;
   content: ' ';
   bottom: 0;
@@ -27,11 +27,11 @@
   cursor: se-resize;
 }
 
-#canvas.sizing {
+#designCanvas.sizing {
   cursor: se-resize;  
 }
 
-#canvas .drop-target {
+#designCanvas .drop-target {
   outline: dotted 2px black;
   outline-offset: -2px;
 }

elements/design-frame/design-frame.html

@@ -7,7 +7,7 @@
 
   <link rel="stylesheet" href="design-frame.css">
   <x-meta id="meta" categories="{{categories}}"></x-meta>
-  <design-canvas flex id="canvas" tabIndex="-1" selected="{{selected}}" on-design-change="{{designChange}}"></design-canvas>
+  <design-canvas flex id="designCanvas" tabIndex="-1" selected="{{selected}}" on-design-change="{{designChange}}"></design-canvas>
 
 </template>
 <script>
@@ -27,43 +27,43 @@
     var meta = this.$.meta.byId(dragInfo.tag);
     dragInfo.element = meta.createElement();
     // let canvas hook the drag
-    this.$.canvas.dragStart(dragInfo);
+    this.$.designCanvas.dragStart(dragInfo);
   },
 
   designChange: function() {
-    this.$.canvas.update();
+    this.$.designCanvas.update();
   },
 
   deleteElement: function() {
-    this.$.canvas.deleteElement();
+    this.$.designCanvas.deleteElement();
   },
 
   promoteElement: function() {
-    this.$.canvas.promoteElement();
+    this.$.designCanvas.promoteElement();
   },
 
   demoteElement: function() {
-    this.$.canvas.demoteElement();
+    this.$.designCanvas.demoteElement();
   },
 
   moveoutElement: function() {
-    this.$.canvas.moveoutElement();
+    this.$.designCanvas.moveoutElement();
   },
 
   maximizeElement: function() {
-    this.$.canvas.maximizeElement();
+    this.$.designCanvas.maximizeElement();
   },
 
   selectParentElement: function() {
-    this.$.canvas.selectParentElement();
+    this.$.designCanvas.selectParentElement();
   },
 
   loadHtml: function(html) {
-    this.$.canvas.loadHtml(html);
+    this.$.designCanvas.loadHtml(html);
   },
 
   applyPropertyBinding: function(obj, name, path) {
-    this.$.canvas.applyPropertyBinding(obj, name, path);
+    this.$.designCanvas.applyPropertyBinding(obj, name, path);
   },
 
   'import': function(urls, callback) {

elements/designer-element/designer-element.html

@@ -97,7 +97,7 @@
 
             <core-pages id="interior" flex valueAttr="id" selected="{{selectedTool}}">
               <design-palette id="palette" on-palette-drag="{{paletteDrag}}" mode="{{paletteMode}}"></design-palette>
-              <design-tree id="tree" canvas="{{$.canvas}}" on-node-select="{{treeNodeSelected}}"></design-tree>
+              <design-tree id="tree" on-node-select="{{treeNodeSelected}}"></design-tree>
             </core-pages>
           </div>
 
@@ -168,7 +168,7 @@
 
   designerReady: function(event) {
     this.designer = event.target;
-    this.$.tree.canvas = this.designer.$.canvas;
+    this.$.tree.canvas = this.designer.$.designCanvas;
     this.$.palette.categories = this.designer.categories;
     this.designer.import(window.metadata, this.importsLoaded.bind(this));
   },
@@ -281,7 +281,7 @@
   inspectTarget: function(event) {
     var t = event.target;
     if (t) {
-      if (t === this.$.canvas) {
+      if (t === this.designer.$.designCanvas) {
         this.selected = null;
       } else {
         // don't allow selection within a node with meta.hideSubtree
@@ -315,7 +315,7 @@
   },
 
   get html() {
-    return this.$.serializer.dumpElement(this.designer.$.canvas);
+    return this.$.serializer.dumpElement(this.designer.$.designCanvas);
   },
 
   get code() {