Center the desktop if it's smaller than the frame.

Apply a drop-shadow to make it clear where the desktop edge is.
Fix desktop resize handling to cope respect the scaling setting.

BUG=
TEST=

Review URL: http://codereview.chromium.org/7821017

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@99893 0039d316-1c4b-4281-b951-d872f2087c98

remoting/webapp/me2mom/choice.css

@@ -227,7 +227,10 @@ label {
 }
 
 #session-mode {
-  width: 100%;
+  left: 50%;
+  top: 50%;
+  position: absolute;
+  -webkit-box-shadow: 0 0 8px 0 black;
   -webkit-user-select: none;
 }
 

remoting/webapp/me2mom/client_session.js

@@ -352,11 +352,10 @@ remoting.ClientSession.prototype.setState_ = function(state) {
  * @return {void} Nothing.
  */
 remoting.ClientSession.prototype.onDesktopSizeChanged_ = function() {
-  var width = this.plugin.desktopWidth;
-  var height = this.plugin.desktopHeight;
-  remoting.debug.log('desktop size changed: ' + width + 'x' + height);
-  this.plugin.width = width;
-  this.plugin.height = height;
+  remoting.debug.log('desktop size changed: ' +
+                     this.plugin.desktopWidth + 'x' +
+                     this.plugin.desktopHeight);
+  this.setScaleToFit(remoting.scaleToFit);
 };
 
 /**
@@ -395,6 +394,19 @@ remoting.ClientSession.prototype.setScaleToFit = function(shouldScale) {
     this.plugin.width = this.plugin.desktopWidth;
     this.plugin.height = this.plugin.desktopHeight;
   }
+
+  // Resize the plugin's container.  The container's style places its origin at
+  // the center of the page, so we use -ve margins to move that origin to the
+  // center of the container, rather than its top-left corner, so that it will
+  // appear centered on the page.
+  if (this.plugin.parentNode) {
+    var parentNode = this.plugin.parentNode;
+    parentNode.style["width"] = this.plugin.width + "px";
+    parentNode.style["height"] = this.plugin.height + "px";
+    parentNode.style["margin-left"] = -(this.plugin.width/2) + "px";
+    parentNode.style["margin-top"] = -(this.plugin.height/2) + "px";
+  }
+
   remoting.debug.log('plugin size is now: ' +
                      this.plugin.width + ' x ' + this.plugin.height + '.');
   this.plugin.setScaleToFit(shouldScale);

remoting/webapp/me2mom/toolbar.css

@@ -13,6 +13,7 @@
   -webkit-transition-delay: 0.7s;
   font-size: 13px;
   pointer-events: none;
+  z-index: 1;
 }
 
 .toolbar-container button {