Ticket #473: xprahtml5.patch

index.html

@@ -34 +34 @@
                                 border: 0px solid black;
                         }
                         canvas {
-                                border: 0px solid black;
-                                display: none;
+                                border: 1px solid black;
                         }
+                        .window {
+                                border: 10px solid black;
+                                position: absolute;
+                                box-shadow: 0px 0px 35px #000000;
+                        }
+                        .windowhead {
+                                height: 20px;
+                                color: #000000;
+                                background-color: #ffffff;
+                        }
                 </style>
 
                 <script type="text/javascript" src="include/websock.js"></script>
@@ -48 +57 @@
                 <script type="text/javascript" src="include/window.js"></script>
                 <script type="text/javascript" src="include/util.js"></script>
 
+                <script type="text/javascript" src="include/jquery.min.js"></script>
+                <script type="text/javascript" src="include/jqueryui.min.js"></script>
+
                 <script>
                         var protocol;
                         var status = "ready";
 
+                        var topwindow = null;
+
                         var id_to_window = {};
                         var window_to_id = {};
                         var focus = -1;
                         var screen_size_change_pending = false;
 
+                        var screen_width = 800;
+                        var screen_height = 600;
+
                         var OLD_ENCODING_NAMES_TO_NEW = {"x264" : "h264", "vpx" : "vp8"};
                         var RGB_FORMATS = ["RGBX", "RGBA"];
-                        var canvas_state = null;
 
                         var caps_lock = null;
                         var alt_modifier = null;
                         var meta_modifier = null;
 
+                        // disable right click menu:
+                        window.oncontextmenu = function(e) {
+                                //showCustomMenu();
+                                return false;
+                        }
+
                         /**
                          * Returns the modifiers set for the current event.
                          * We get the list of modifiers using "get_event_modifiers"
@@ -95 +117 @@
                          */
                         function processKeyEvent(pressed, event) {
                                 "use strict";
-                                if (canvas_state==null)
-                                        return;
                                 // MSIE hack
                                 if (window.event)
                                         event = window.event;
@@ -125 +145 @@
                                 if ((caps_lock && shift) || (!caps_lock && !shift))
                                         str = str.toLowerCase();
 
-                                var win = canvas_state.topOfStack();
-                                if (win != null) {
+                                //var win = canvas_state.topOfStack();
+                                if (topwindow != null) {
                                         //show("win="+win.toSource()+", keycode="+keycode+", modifiers=["+modifiers+"], str="+str);
-                                        var wid = window_to_id[win];
-                                        var packet = ["key-action", wid, keyname, pressed, modifiers, keyval, str, keycode, group];
+                                        var packet = ["key-action", topwindow, keyname, pressed, modifiers, keyval, str, keycode, group];
                                         send(packet);
                                 }
                         }
@@ -278 +297 @@
                         function mouse_click(win, button, pressed, x, y, modifiers, buttons) {
                                 "use strict";
                                 var wid = window_to_id[win];
-                                //show("mouse_click(..) wid("+win+")="+wid);
-                                check_focus();
+                                set_focus(wid);
                                 send(["button-action", wid, button, pressed, [x, y], modifiers, buttons]);
                         };
 
                         function check_focus() {
                                 "use strict";
                                 var wid = -1;
-                                var win = canvas_state.topOfStack();
                                 if (win != null)
                                         wid = window_to_id[win];
                                 //show("check_focus() window_to_id["+win+"]="+wid+", focus="+wid+", window_to_id="+window_to_id.toSource());
@@ -298 +315 @@
                                 "use strict";
                                 focus = wid;
                                 send(["focus", focus, []]);
+                                topwindow = wid;
                                 //set the focused flag on all windows:
                 var win;
                                 for (var i in id_to_window) {
@@ -315 +333 @@
 
                         function make_new_window(wid, x, y, w, h, metadata, override_redirect, client_properties) {
                                 "use strict";
-                                var win = new XpraWindow(canvas_state, wid, x, y, w, h, metadata, override_redirect, client_properties,
+                                // each window needs their own DIV that contains a canvas
+                                var mydiv = document.createElement("div");
+                                mydiv.id = String(wid);
+                                var mycanvas = document.createElement("canvas");
+                                mydiv.appendChild(mycanvas);
+                                document.body.appendChild(mydiv);
+                                // set initial sizes
+                                mycanvas.width = w;
+                                mycanvas.height = h;
+                                jQuery(mydiv).addClass("window");
+                                jQuery(mydiv).prepend('<div id="head' + String(wid) + '"class="windowhead">window title</div>');
+                                jQuery(mydiv).draggable({cancel: "canvas"});
+                                // create the XpraWindow object that sits in the new div
+                                var win = new XpraWindow(mycanvas, wid, x, y, w, h, metadata, override_redirect, client_properties,
                                                 window_geometry_changed, mouse_move, mouse_click, window_closed);
-                                //show("make_new_window("+wid+", "+x+", "+y+", "+w+", "+h+", "+metadata+", "+override_redirect+", "+client_properties+")="+win);
                                 id_to_window[wid] = win;
                                 window_to_id[win] = wid;
                                 var geom = win.get_internal_geometry();
@@ -423 +453 @@
                                 var wid = packet[1];
                                 var win = id_to_window[wid];
                                 if (win!=null) {
-                                        canvas_state.raiseShape(win);
+                                        //canvas_state.raiseShape(win);
                                         focus = wid;
                                         check_focus();
                                 }
@@ -465 +495 @@
 
                         function get_desktop_size() {
                                 "use strict";
-                                var canvas = document.getElementById('screen');
-                                return [canvas.width, canvas.height];
+                                return [screen_width, screen_height];
                         }
                         function get_screen_sizes() {
                                 "use strict";
-                                var canvas = document.getElementById('screen');
                                 var dpi = get_DPI();
                                 /*
                                 equivallent GTK code:
@@ -482 +510 @@
                                                 monitors,
                                                 work_x, work_y, work_width, work_height)
                                 */
-                                var wmm = Math.round(canvas.width*25.4/dpi);
-                                var hmm = Math.round(canvas.height*25.4/dpi);
-                                var monitor = ["Canvas", 0, 0, canvas.width, canvas.height, wmm, hmm];
-                                var screen = ["HTML", canvas.width, canvas.height,
+                                var wmm = Math.round(screen_width*25.4/dpi);
+                                var hmm = Math.round(screen_height*25.4/dpi);
+                                var monitor = ["Canvas", 0, 0, screen_width, screen_height, wmm, hmm];
+                                var screen = ["HTML", screen_width, screen_height,
                                                         wmm, hmm,
                                                         [monitor],
-                                                        0, 0, canvas.width, canvas.height
+                                                        0, 0, screen_width, screen_height
                                                 ];
                                 //just a single screen:
                                 return [screen];
@@ -510 +538 @@
                         function make_hello() {
                                 "use strict";
                                 return  {
-                                                "version"                                       : "0.14.0",
+                                                "version"                                       : "0.11.0",
                                                 "platform"                                      : guess_platform(),
                                                 "platform.name"                         : guess_platform_name(),
                                                 "platform.processor"            : guess_platform_processor(),
@@ -593 +621 @@
 
                         function do_send_new_screen_size() {
                                 //show("do_send_new_screen_size()");
-                                if (protocol==null || canvas_state==null)
-                                        return;
                                 screen_size_change_pending = false;
                                 var ds = get_desktop_size();
                                 var ss = get_screen_sizes();
@@ -607 +633 @@
                                 }
                         }
 
-                        function onresize() {
-                                var container = document.getElementById('screen_container');
-                                var d_form = document.getElementById('disconnect_form');
-                                var c_form = document.getElementById('connect_form');
-                                /*show("onresize() container size: "+container.clientWidth+"x"+container.clientHeight+
-                                                                ", window size: "+window.innerWidth+"x"+window.innerHeight+
-                                                                ", d form size: "+d_form.offsetWidth+"x"+d_form.offsetHeight+
-                                                                ", c form size: "+c_form.offsetWidth+"x"+c_form.offsetHeight);*/
-                                if (canvas_state!=null) {
-                                        var width = Math.min(container.clientWidth, window.innerWidth);
-                                        var height = Math.max(0, window.innerHeight-d_form.offsetHeight-c_form.offsetHeight);
-                                        canvas_state.canvas.width = width;
-                                        canvas_state.canvas.height = height;
-                                        canvas_state.width = width;
-                                        canvas_state.height = height;
-                                        canvas_state.invalidate();
-                                }
-                                send_new_screen_size();
-                        }
-
                         function do_start(params) {
                                 "use strict";
                                 show("start()");
-                                onresize();
 
                                 //hook document and window events:
                                 document.onkeydown = onkeydown;
                                 document.onkeyup = onkeyup;
                                 document.onkeypress = onkeypress;
-                                window.addEventListener("resize", onresize, false);
-
-                                var canvas = document.getElementById('screen');
-                                canvas.style.display = "block";
-
-                                if (canvas_state==null)
-                                        canvas_state = new CanvasState(canvas);
                                 protocol = new Protocol();
                                 protocol.set_packet_handler("open", process_open);
                                 protocol.set_packet_handler("close", process_close);
@@ -672 +670 @@
                                 document.onkeydown = null;
                                 document.onkeyup = null;
                                 document.onkeypress = null;
-                                window.removeEventListener("resize", onresize);
                                 if (protocol!=null) {
                                         protocol.close();
                                         protocol = null;
                                 }
-                                if (canvas_state!=null) {
-                                        canvas_state.destroy();
-                                        canvas_state = null;
-                                }
+
                                 document.getElementById('connect_form').style.display = "block";
                                 document.getElementById('disconnect_form').style.display = "none";
 
-                                var canvas = document.getElementById('screen');
-                                canvas.style.display = "none";
                                 status = "ready";
                         }
 
@@ -714 +706 @@
                                         document.getElementById('disconnect_form').style.display = "block";
                                 else
                                         document.getElementById('disconnect_form').style.display = "none";
-                                onresize();
                                 set_ui_message("");
 
                                 show("connected to server - sending hello");
@@ -746 +737 @@
                                 send(["hello", hello]);
                         }
 
+                        function pass() {
+
+                        }
+
                         function force_refresh() {
                                 "use strict";
                                 if (protocol!=null) {
@@ -891 +886 @@
                                 </fieldset>
                         </form>
                 </div>
-                <div id="screen_container">
-                        <canvas id="screen" width="800" height="600"></canvas>
-                </div>
                 <div id="dpi" style="width: 1in; height: 1in; left: -100%; top: -100%; position: absolute;">
                 </div>
         </body>

include/window.js

@@ -7 +7 @@
  * Based on shape.js
  */
 
-var window_icons = {};
-//load the window icons
-var image_names = ["maximize", "minimize", "close"];
-function load_icon(name) {
-        console.log("loading "+name);
-        var tmp_canvas = document.createElement('canvas');
-        var tmp_context = tmp_canvas.getContext('2d');
-        var image = new Image();
-        image.onload = function() {
-                show(""+name+"="+image);
-                tmp_context.drawImage(image, 0, 0);
-                var image_data = tmp_context.getImageData(0, 0, image.width, image.height);
-                window_icons[name] = image_data;
-        };
-        image.src = '/include/'+name+'.png';
-}
 
-for (var i in image_names) {
-        load_icon(image_names[i]);
-}
 
-/**
- * A simple button we use to decorate the window.
- */
-function Button(canvas_state, name, x, y, w, h, fill, icon_name, click_callback) {
-        "use strict";
-        this.state = canvas_state;
-        this.name = name;
-        this.x = x || 0;
-        this.y = y || 0;
-        this.w = w || 1;
-        this.h = h || 1;
-        var ctx = canvas_state.canvas.getContext('2d');
-        this.image = ctx.createImageData(w, h);
-        //var data = this.image.data;
-        for (var i=0; i<w*h*4; i++) {
-                this.image.data[i] = (fill || 0xAA) &0xFF;
-        }
-        var icon = window_icons[icon_name];
-        if (icon) {
-                this.update_image(icon.width, icon.height, "premult_argb32", icon.data);
-        }
-        this.click_callback = click_callback;
-}
-Button.prototype.draw_at = function(ctx, x, y) {
-        "use strict";
-        //draw the window pixels:
-        ctx.putImageData(this.image, this.x + x, this.y + y);
-};
-function rectangle_contains(rect, mx, my) {
-        "use strict";
-        // All we have to do is make sure the Mouse X,Y fall in the area between
-        // the shape's X and (X + Height) and its Y and (Y + Height)
-        return  (rect.x <= mx) && (rect.x + rect.w >= mx) &&
-                                        (rect.y <= my) && (rect.y + rect.h >= my);
-};
-Button.prototype.get_geometry = function() {
-        "use strict";
-        return { x : this.x, y : this.y, w : this.w, h : this.h };
-};
-Button.prototype.contains = function(mx, my) {
-        "use strict";
-        return rectangle_contains(this.get_geometry(), mx, my);
-};
-Button.prototype.update_image = function(w, h, pixel_format, data) {
-        "use strict";
-        if (pixel_format!="premult_argb32") {
-                return;
-        }
-        var s, d, i;
-        //to make this faster and better looking,
-        //we could draw to a temporary canvas to scale it,
-        //as per: http://stackoverflow.com/a/3449416/428751
-        //here we just scale it by hand
-        for (var x=0; x<this.w; x++) {
-                for (var y=0; y<this.h; y++) {
-                        //destination index (simple)
-                        d = ((y*this.w) + x) * 4;
-                        //source index (scaled)
-                        s = (Math.round(y*h/this.h)*w + Math.round(w*x/this.w)) * 4;
-                        for (i=0; i<4; i++) {
-                                this.image.data[d+i] = data[s+i];
-                        }
-                }
-        }
-}
 
-/**
- * toString allows us to identify buttons:
- */
-Button.prototype.toString = function() {
-        "use strict";
-        return "Button("+this.name+")";
-};
 
-
-
 /**
  * This is the class representing a window we draw on the canvas.
  * It has a geometry, it may have borders and a top bar.
  * The contents of the window is an image, which gets updated
  * when we receive pixels from the server.
  */
-function XpraWindow(canvas_state, wid, x, y, w, h, metadata, override_redirect, client_properties,
-                geometry_cb, mouse_move_cb, mouse_click_cb, window_closed) {
+function XpraWindow(canvas_state, wid, x, y, w, h, metadata, override_redirect, client_properties, geometry_cb, mouse_move_cb, mouse_click_cb, window_closed, htmldiv) {
         "use strict";
         //keep reference to the canvas:
-        this.state = canvas_state;
+        this.canvas = canvas_state;
+        this.div = jQuery("#" + String(wid));
         //callbacks start null until we finish init:
         this.geometry_cb = null;
         this.mouse_move_cb = null;
@@ -124 +31 @@
         //styling:
         this.borderColor = '#101028';
         this.topBarColor = '#B8B8C0';
+        // This complicates things a little but but fixes mouse co-ordinate problems
+        // when there's a border or padding. See getMouse for more detail
+        var stylePaddingLeft, stylePaddingTop, styleBorderLeft, styleBorderTop,
+                        html, self, i;
+        if (document.defaultView && document.defaultView.getComputedStyle) {
+                this.stylePaddingLeft   = parseInt(document.defaultView.getComputedStyle(this.canvas, null).paddingLeft, 10)            || 0;
+                this.stylePaddingTop    = parseInt(document.defaultView.getComputedStyle(this.canvas, null).paddingTop, 10)             || 0;
+                this.styleBorderLeft    = parseInt(document.defaultView.getComputedStyle(this.canvas, null).borderLeftWidth, 10)        || 0;
+                this.styleBorderTop             = parseInt(document.defaultView.getComputedStyle(this.canvas, null).borderTopWidth, 10) || 0;
+        }
+        // Some pages have fixed-position bars (like the stumbleupon bar) at the top or left of the page
+        // They will mess up mouse coordinates and this fixes that
+        html = document.body.parentNode;
+        this.htmlTop = html.offsetTop;
+        this.htmlLeft = html.offsetLeft;
 
         //the window "backing":
         this.image = null;
@@ -143 +65 @@
 
         //not the real geometry we will use,
         //but enough to avoid errors if update_metadata fires changes
-        this.x = x;
-        this.y = y;
+        this.x = 0;
+        this.y = 0;
         this.w = w;
         this.h = h;
 
@@ -155 +77 @@
         // the space taken by window decorations:
         this.calculate_offsets();
 
-        if (!this.fullscreen && !this.maximized) {
-                // if fullscreen or maximized, the metadata update will have set the new size already
-                // account for borders, and try to make the image area map to (x,y):
-                var rx = (x || 0) - this.borderWidth;
-                var ry = (y || 0) - this.topBarHeight + this.borderWidth;
-                var rw = (w || 1) + this.borderWidth*2;
-                var rh = (h || 1) + this.borderWidth*2 + this.topBarHeight;
-                this.move_resize(rx, ry, rw, rh);
-                //show("after move resize: ("+this.w+", "+this.h+")");
+        console.log(x, y, w, h);
+
+        // Hook up the events we want to receive:
+        this.event_listeners = []
+        var listeners = [
+                        ['mousedown'    , true],
+                        ['mouseup'              , true],
+                        ['mousemove'    , true]
+                        ];
+        for (i = 0; i < listeners.length; i += 1) {
+                var l = listeners[i];
+                this.registerEventListener(l[0], l[1]);
         }
 
         // now safe to assign the callbacks:
@@ -172 +97 @@
         this.mouse_click_cb = mouse_click_cb || null;
         this.window_closed_cb = window_closed || null;
 
-        //create the buttons:
-        if (!this.override_redirect) {
-                this.create_buttons();
-        }
         //create the image holding the pixels (the "backing"):
         this.create_image_backing();
-        canvas_state.addShape(this);
 };
 
-/**
- * Creates the minimize, maximize and close buttons.
- */
-XpraWindow.prototype.create_buttons = function() {
-        "use strict";
-        var w = 24;
-        var h = 24;
+XpraWindow.prototype.registerEventListener = function(event_type, useCapture) {
         var self = this;
-        this.buttons["icon"] = new Button(this.state, "icon",           this.borderWidth,       this.borderWidth, w, h, 0x11, null, null);
-        /*this.buttons["minimize"] = new Button(this.state, "minimize", this.w-(w+2)*3,         this.borderWidth, w, h, 0x44, function() {
-                //TODO!
-        });*/
-        this.buttons["maximize"] = new Button(this.state, "maximize",   this.w-(w+2)*2,         this.borderWidth, w, h, 0x66, "maximize", function() {
-                var m = !self.maximized;
-                self.client_properties["maximized"] = m;
-                self.set_maximized(m);
-        });
-        this.buttons["close"] = new Button(this.state, "close",         this.w-(w+2)*1,         this.borderWidth, w, h, 0x99, "close", function() {
-                if (self.window_closed_cb) {
-                        self.window_closed_cb(self);
-                }
-        });
+        var fn_name = "on_"+event_type;
+        var handler = self[fn_name];
+        var fn = function(e) {
+                handler.call(self, e);
+        };
+        this.event_listeners[event_type] = fn;
+        this.canvas["on"+event_type] = fn;
 };
-/**
- * Ensures that the buttons are always in the same place
- * after a resize.
- */
-XpraWindow.prototype.move_buttons = function() {
-        var w = 24;
-        if ("maximize" in this.buttons) {
-                this.buttons["maximize"].x = this.w-(w+2)*2;
+
+XpraWindow.prototype.getMouse = function(e) {
+        "use strict";
+        var element = this.canvas, offsetX = 0, offsetY = 0, mx, my;
+
+        // Compute the total offset
+        if (element.offsetParent !== undefined) {
+                do {
+                        offsetX += element.offsetLeft;
+                        offsetY += element.offsetTop;
+                        element = element.offsetParent;
+                } while (element);
         }
-        if ("close" in this.buttons) {
-                this.buttons["close"].x = this.w-(w+2)*1;
+
+        // Add padding and border style widths to offset
+        // Also add the <html> offsets in case there's a position:fixed bar
+        offsetX += this.stylePaddingLeft + this.styleBorderLeft + this.htmlLeft;
+        offsetY += this.stylePaddingTop + this.styleBorderTop + this.htmlTop;
+
+        mx = e.pageX - offsetX;
+        my = e.pageY - offsetY;
+
+        var mbutton = 0;
+        if ("which" in e)  // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
+                mbutton = Math.max(0, e.which);
+        else if ("button" in e)  // IE, Opera (zero based)
+                mbutton = Math.max(0, e.button)+1;
+        //show("getmouse: button="+mbutton+", which="+e.which+", button="+e.button);
+
+        // We return a simple javascript object (a hash) with x and y defined
+        return {x: mx, y: my, button: mbutton};
+};
+
+XpraWindow.prototype.on_mousemove = function(e) {
+        var mouse = this.getMouse(e),
+                        mx = mouse.x,
+                        my = mouse.y;
+
+                        var modifiers = [];
+                        var buttons = [];
+                        this.handle_mouse_move(mx, my, modifiers, buttons);
+
+};
+
+XpraWindow.prototype.on_mousedown = function(e) {
+        var mouse, mx, my, shapes, l, i, mySel;
+
+        mouse = this.getMouse(e);
+        mx = mouse.x;
+        my = mouse.y;
+
+        // pass the click to the area:
+        var modifiers = [];
+        var buttons = [];
+        this.handle_mouse_click(mouse.button, true, mx, my, modifiers, buttons);
+        return;
+};
+
+XpraWindow.prototype.on_mouseup = function(e) {
+        // if not handling it ourselves, pass it down:
+        var mouse = this.getMouse(e),
+                        mx = mouse.x,
+                        my = mouse.y;
+        if (!this.dragging) {
+                var modifiers = [];
+                var buttons = [];
+                this.handle_mouse_click(mouse.button, false, mx, my, modifiers, buttons);
         }
-}
 
+        this.dragging = false;
+};
 
 /**
  * toString allows us to identify windows by their unique window id.
@@ -235 +199 @@
         var previous_image = this.image;
         var img_geom = this.get_internal_geometry();
         //show("createImageData: "+img_geom.toSource());
-        this.image = canvas_state.canvas.getContext('2d').createImageData(img_geom.w, img_geom.h);
+        this.image = this.canvas.getContext('2d').createImageData(img_geom.w, img_geom.h);
         if (previous_image) {
                 //copy previous pixels to new image, ignoring bit gravity
                 //TODO!
@@ -249 +213 @@
  */
 XpraWindow.prototype.calculate_offsets = function() {
         "use strict";
-        if (this.override_redirect || this.fullscreen) {
-                //no borders or top bar at all:
-                this.borderWidth = 0;
-                this.topBarHeight = 0;
-        }
-        else {
-                //regular borders and top bar:
-                this.borderWidth = 2;
-                this.topBarHeight = 24;
-        }
-        this.offsets = [this.borderWidth+this.topBarHeight, this.borderWidth, this.borderWidth, this.borderWidth];
+
+        this.offsets = [0, 0, 0, 0];
 };
 
 /**
@@ -288 +243 @@
     }
     if ("title" in metadata) {
         this.title = metadata["title"];
-        //redraw everything (a bit wasteful):
-        this.state.invalidate();
     }
 };
 
@@ -377 +330 @@
         "use strict";
         this.x = 0;
         this.y = 0;
-        this.w = this.state.width;
-        this.h = this.state.height;
+        this.w = 640;
+        this.h = 480;
 };
 
 /**
@@ -390 +343 @@
 XpraWindow.prototype.handle_resize = function() {
         "use strict";
         this.create_image_backing();
-        this.state.invalidate();
+        //this.state.invalidate();
         this.move_buttons();
         if (this.geometry_cb!=null) {
                 this.geometry_cb(this);
@@ -423 +376 @@
         // This should always be true:
         //this.image.width = this.w - this.borderWidth*2;
         //this.image.height = this.h - (this.borderWidth*2 + this.topBarHeight);
-        return { x : this.x+this.borderWidth,
-                         y : this.y+this.borderWidth+this.topBarHeight,
-                         w : this.w - this.borderWidth*2,
-                         h : this.h - (this.borderWidth*2 + this.topBarHeight)};
+        return { x : this.x,
+                         y : this.y,
+                         w : this.w,
+                         h : this.h};
 };
 
 /**
@@ -436 +389 @@
 XpraWindow.prototype.handle_mouse_click = function(button, pressed, mx, my, modifiers, buttons) {
         "use strict";
         var igeom = this.get_internal_geometry();
+        console.log("got mouse click at ", mx, my)
         if (this.mouse_click_cb!=null && rectangle_contains(igeom, mx, my)) {
                 this.mouse_click_cb(this, button, pressed, mx, my, modifiers, buttons);
                 return;
         }
-        //maybe one of the buttons:
-        //(use relative coordinates)
-        var x = mx-this.x;
-        var y = my-this.y
-        for (var name in this.buttons) {
-                var button = this.buttons[name];
-                if (button.contains(x, y)) {
-                        show("clicked on button "+name);
-                        var cb = button.click_callback;
-                        if (cb) {
-                                cb();
-                        }
-                        return;
-                }
-        }
 };
 
 /**
@@ -463 +402 @@
  */
 XpraWindow.prototype.handle_mouse_move = function(mx, my, modifiers, buttons) {
         "use strict";
-        var igeom = this.get_internal_geometry();
-        if (this.mouse_move_cb!=null && rectangle_contains(igeom, mx, my)) {
-                this.mouse_move_cb(this, mx, my, modifiers, buttons);
-        }
+        // should we handle mouse move?
+        this.mouse_move_cb(this, mx, my, modifiers, buttons);
 };
 
 
 XpraWindow.prototype.update_icon = function(w, h, pixel_format, data) {
         "use strict";
-        var icon = this.buttons["icon"];
-        if (icon) {
-                icon.update_image(w, h, pixel_format, data);
-                this.state.invalidate();
-        }
+        // update icon
 }
 
 /**
@@ -488 +421 @@
 XpraWindow.prototype.draw = function(ctx) {
         "use strict";
 
-        if (!this.override_redirect && !this.fullscreen) {
-                //draw window frame:
-                this.draw_frame(ctx);
-        }
-
         //draw the window pixels:
-        ctx.putImageData(this.image, this.x + this.borderWidth, this.y + this.borderWidth + this.topBarHeight);
+        ctx.putImageData(this.image, this.x, this.y);
 
-        if (this.state.selection === this && !this.override_redirect) {
-                //window.alert("Shape.prototype.draw_selection="+Shape.prototype.draw_selection);
-                this.draw_selection(ctx);
-        }
 };
 
-/**
- * Draws the window frame:
- * a simple rectangle around the edge.
- */
-XpraWindow.prototype.draw_frame = function(ctx) {
-        "use strict";
 
-        // draw border:
-        ctx.strokeStyle = this.borderColor;
-        ctx.lineWidth = this.borderWidth;
-        var hw = this.borderWidth/2;
-        ctx.strokeRect(this.x+hw,this.y+hw,this.w-this.borderWidth,this.h-this.borderWidth);
-
-        // draw top bar:
-        ctx.fillStyle = this.topBarColor;
-        ctx.fillRect(this.x+this.borderWidth, this.y+this.borderWidth, this.w-this.borderWidth*2, this.topBarHeight);
-        // draw title:
-        if (this.title) {
-                var size = 18;
-                ctx.font = ""+size+"px sans-serif";
-                ctx.fillStyle = "#FFFFFF";
-                ctx.fillText(this.title, this.x+32, this.y+this.borderWidth+this.topBarHeight-size/3);
-        }
-
-        // draw buttons:
-        for (var name in this.buttons) {
-                var button = this.buttons[name];
-                button.draw_at(ctx, this.x, this.y);
-        }
-};
-
-
 /**
- * Draws border and selection rectangles
- * which indicate that the window is selected
- */
-XpraWindow.prototype.draw_selection = function(ctx) {
-        "use strict";
-        if (this.maximized || this.fullscreen) {
-                return;
-        }
-        var i, cur, half;
-
-        ctx.strokeStyle = this.state.selectionColor;
-        ctx.lineWidth = this.state.selectionWidth;
-        ctx.strokeRect(this.x,this.y,this.w,this.h);
-
-        // draw the boxes
-        half = this.state.selectionBoxSize / 2;
-
-        // 0  1  2
-        // 3     4
-        // 5  6  7
-
-        // top left, middle, right
-        this.state.selectionHandles[0].x = this.x-half;
-        this.state.selectionHandles[0].y = this.y-half;
-
-        this.state.selectionHandles[1].x = this.x+this.w/2-half;
-        this.state.selectionHandles[1].y = this.y-half;
-
-        this.state.selectionHandles[2].x = this.x+this.w-half;
-        this.state.selectionHandles[2].y = this.y-half;
-
-        //middle left
-        this.state.selectionHandles[3].x = this.x-half;
-        this.state.selectionHandles[3].y = this.y+this.h/2-half;
-
-        //middle right
-        this.state.selectionHandles[4].x = this.x+this.w-half;
-        this.state.selectionHandles[4].y = this.y+this.h/2-half;
-
-        //bottom left, middle, right
-        this.state.selectionHandles[6].x = this.x+this.w/2-half;
-        this.state.selectionHandles[6].y = this.y+this.h-half;
-
-        this.state.selectionHandles[5].x = this.x-half;
-        this.state.selectionHandles[5].y = this.y+this.h-half;
-
-        this.state.selectionHandles[7].x = this.x+this.w-half;
-        this.state.selectionHandles[7].y = this.y+this.h-half;
-
-        ctx.fillStyle = this.state.selectionBoxColor;
-        for (i = 0; i < 8; i += 1) {
-                cur = this.state.selectionHandles[i];
-                ctx.fillRect(cur.x, cur.y, this.state.selectionBoxSize, this.state.selectionBoxSize);
-        }
-};
-
-/**
  * Updates the window image with new pixel data
  * we have received from the server.
  */
@@ -625 +461 @@
         var stride = this.image.width*4;
         //and we can paint the canvas with it
         //(if we have transparency, we should probably repaint what is underneath...)
-        var ctx = this.state.ctx;
+        var ctx = this.canvas.getContext('2d');
 
         if (x==0 && width==this.image.width && y+height<=this.image.height) {
                 //take a shortcut: copy all lines
@@ -633 +469 @@
 
                 if (this.focused) {
                         //shortcut: paint canvas directly
-                        ctx.putImageData(this.image, this.x + this.borderWidth, this.y + this.borderWidth + this.topBarHeight);
+                        ctx.putImageData(this.image, this.x , this.y);
                         return;
                 }
         }
@@ -650 +486 @@
 
                 if (this.focused) {
                         //shortcut: paint canvas directly
-                        ctx.putImageData(img, this.x + this.borderWidth + x, this.y + this.borderWidth + this.topBarHeight + y);
+                        ctx.putImageData(img, this.x + x, this.y + y);
                         return;
                 }
         }
@@ -658 +494 @@
                 //no action taken, no need to invalidate
                 return;
         }
-        this.state.invalidate();
+        //this.state.invalidate();
 };
 
 /**
@@ -666 +502 @@
  */
 XpraWindow.prototype.destroy = function destroy() {
         "use strict";
-        if (this.state!=null) {
-                this.state.removeShape(this);
-                this.state = null;
-        }
+        // remove div
+        this.div.remove()
 };
 
 /**