[broadway] Clean up js side surface handling

* Always calculate the context, don't store in surface.
* Store the toplevel element (frame or canvas) for easy access.
* Always use visibility hidden rathern than display none to hide windows,
  as this means we can always rely on dom positioning info.

gdk/broadway/broadway.js

@@ -169,7 +169,8 @@ function flushSurface(surface)
 {
     var commands = surface.drawQueue;
     surface.queue = [];
-    var context = surface.context;
+    var context = surface.canvas.getContext("2d");
+    context.globalCompositeOperation = "source-over";
     var i = 0;
     for (i = 0; i < commands.length; i++) {
 	var cmd = commands[i];
@@ -230,11 +231,9 @@ function ensureSurfaceInDocument(surface, doc)
 	oldCanvas.parentNode.removeChild(oldCanvas);
 
 	surface.canvas = canvas;
+	if (surface.toplevelElement == oldCanvas)
+	    surface.toplevelElement = canvas;
 	surface.document = doc;
-
-	var context = canvas.getContext("2d");
-	context.globalCompositeOperation = "source-over";
-	surface.context = context;
     }
 }
 
@@ -375,31 +374,22 @@ function cmdCreateSurface(id, x, y, width, height, isTemp)
     surface.document = document;
     surface.transientToplevel = null;
     surface.frame = null;
-    stackingOrder.push(surface);
 
     var canvas = document.createElement("canvas");
     canvas.width = width;
     canvas.height = height;
     canvas.surface = surface;
     surface.canvas = canvas;
+    var toplevelElement;
 
     if (useToplevelWindows || isTemp) {
-	canvas.style["position"] = "absolute";
+	toplevelElement = canvas;
-	canvas.style["left"] = "0px";
-	canvas.style["top"] = "0px";
-	canvas.style["display"] = "none";
 	document.body.appendChild(canvas);
     } else {
 	var frame = document.createElement("div");
 	frame.frameFor = surface;
-	frame.style["position"] = "absolute";
-	frame.style["left"] = "0px";
-	frame.style["top"] = "0px";
-	frame.style["display"] = "inline";
-	// We hide the frame with visibility rather than display none
-	// so getFrameOffset still works with hidden windows
-	frame.style["visibility"] = "hidden";
 	frame.className = "frame-window";
+	surface.frame = frame;
 
 	var button = document.createElement("center");
 	var X = document.createTextNode("X");
@@ -411,11 +401,11 @@ function cmdCreateSurface(id, x, y, width, height, isTemp)
 	contents.className = "frame-contents";
 	frame.appendChild(contents);
 
-	document.body.appendChild(frame);
-	contents.appendChild(canvas);
 	canvas.style["display"] = "block";
+	contents.appendChild(canvas);
 
-	surface.frame = frame;
+	toplevelElement = frame;
+	document.body.appendChild(frame);
 
 	surface.x = 100 + positionIndex * 10;
 	surface.y = 100 + positionIndex * 10;
@@ -423,11 +413,20 @@ function cmdCreateSurface(id, x, y, width, height, isTemp)
 	sendInput ("w", [surface.id, surface.x, surface.y, surface.width, surface.height]);
     }
 
-    var context = canvas.getContext("2d");
+    surface.toplevelElement = toplevelElement;
-    context.globalCompositeOperation = "source-over";
+    toplevelElement.style["position"] = "absolute";
-    surface.context = context;
+    /* This positioning isn't strictly right for apps in another topwindow,
+     * but that will be fixed up when showing. */
+    toplevelElement.style["left"] = surface.x + "px";
+    toplevelElement.style["top"] = surface.y + "px";
+    toplevelElement.style["display"] = "inline";
+
+    /* We hide the frame with visibility rather than display none
+     * so getFrameOffset still works with hidden windows. */
+    toplevelElement.style["visibility"] = "hidden";
 
     surfaces[id] = surface;
+    stackingOrder.push(surface);
 }
 
 function cmdShowSurface(id)
@@ -438,7 +437,6 @@ function cmdShowSurface(id)
 	return;
     surface.visible = true;
 
-    var element = surface.canvas;
     var xOffset = surface.x;
     var yOffset = surface.y;
 
@@ -472,22 +470,17 @@ function cmdShowSurface(id)
 	}
 
 	ensureSurfaceInDocument(surface, doc);
-	element = surface.canvas;
     } else {
 	if (surface.frame) {
-	    element = surface.frame;
 	    var offset = getFrameOffset(surface);
 	    xOffset -= offset.x;
 	    yOffset -= offset.y;
 	}
     }
 
-    element.style["position"] = "absolute";
+    surface.toplevelElement.style["left"] = xOffset + "px";
-    element.style["left"] = xOffset + "px";
+    surface.toplevelElement.style["top"] = yOffset + "px";
-    element.style["top"] = yOffset + "px";
+    surface.toplevelElement.style["visibility"] = "visible";
-    element.style["display"] = "inline";
-    if (surface.frame)
-	surface.frame.style["visibility"] = "visible";
 
     restackWindows();
 }
@@ -500,14 +493,9 @@ function cmdHideSurface(id)
 	return;
     surface.visible = false;
 
-    var element = surface.canvas;
+    var element = surface.toplevelElement;
-    if (surface.frame)
-	element = surface.frame;
 
-    if (surface.frame)
+    element.style["visibility"] = "hidden";
-	surface.frame.style["visibility"] = "hidden";
-    else
-	element.style["display"] = "none";
 
     // Import the canvas into the main document
     ensureSurfaceInDocument(surface, document);
@@ -533,15 +521,9 @@ function cmdSetTransientFor(id, parentId)
 }
 
 function restackWindows() {
-    if (useToplevelWindows)
-	return;
-
     for (var i = 0; i < stackingOrder.length; i++) {
 	var surface = stackingOrder[i];
-	if (surface.frame)
+	surface.toplevelElement.style.zIndex = i;
-	    surface.frame.style.zIndex = i;
-	else
-	    surface.canvas.style.zIndex = i;
     }
 }
 
@@ -1134,7 +1116,6 @@ function connect()
 	var ws = new WebSocket(loc, "broadway");
 	ws.onopen = function() {
 	    inputSocket = ws;
-	    
 	    var w, h;
 	    if (useToplevelWindows) {
 		w = window.screen.width;