Merge branch 'master' into jsio-staging

Conflicts:
	src/web/Simulator.js
	src/web/ui/Chrome.js

src/device-types.yaml

@@ -2,7 +2,7 @@
 
 fullScreen:
   name: Full Screen
-  target: browser-desktop
+  target: browser-mobile
   canRotate: false
   canResize: true
   centerX: false
@@ -63,17 +63,11 @@ ipad:
   width: 768
   height: 1024
   background:
-    - img: ipad.png
-      width: 860
-      height: 1125
-      offsetX: 49
-      offsetY: 52
-
-    - img: ipad-horiz.png
-      width: 1125
-      height: 860
-      offsetX: 51
-      offsetY: 49
+    img: ipad.png
+    width: 860
+    height: 1125
+    offsetX: 49
+    offsetY: 52
 
 ipad3:
   name: iPad 3
@@ -84,17 +78,11 @@ ipad3:
   width: 1536
   height: 2048
   background:
-    - img: ipad.png
-      width: 1720
-      height: 2260
-      offsetX: 98
-      offsetY: 104
-
-    - img: ipad-horiz.png
-      width: 2250
-      height: 1720
-      offsetX: 102
-      offsetY: 98
+    img: ipad.png
+    width: 1720
+    height: 2260
+    offsetX: 98
+    offsetY: 104
 
 nexus:
   name: Nexus S
@@ -104,18 +92,11 @@ nexus:
   width: 480
   height: 800
   background:
-    - img: nexus.png
-      width: 649
-      height: 1135
-      offsetX: 81
-      offsetY: 178
-
-    - img: nexus.png
-      rotation: 90
-      width: 1135
-      height: 649
-      offsetX: 167
-      offsetY: 81
+    img: nexus.png
+    width: 649
+    height: 1135
+    offsetX: 81
+    offsetY: 178
 
 iphone:
   name: iPhone 3GS

src/install/cache.js

@@ -31,6 +31,11 @@ var ModuleCache = Class(EventEmitter, function () {
         return fs.readdirAsync(MODULE_CACHE);
       })
       .map(function (entry) {
+        // Manually exclude anything starting with a '.'
+        if (entry.indexOf('.') === 0) {
+          return;
+        }
+
         var cachePath = this.getPath(entry);
         return getCachedModuleInfo(cachePath, true)
           .catch(function () {

src/serve/SimulatorSocketClient.js

@@ -11,6 +11,10 @@ var SimulatorSocketClient = Class(function () {
     this._socket.emit(name, data);
   };
 
+  this.disconnect = function() {
+    this._socket.disconnect();
+  };
+
 })
 
 module.exports = SimulatorSocketClient;

src/util/gitClient/index.js

@@ -56,6 +56,7 @@ function spawnWithLogger(args, opts, cb) {
   };
 
   var ranCallback = false;
+  logger.debug('spawning with args "' + args.join(' ') + '" in cwd:', opts.cwd);
   var child = spawn(name, args, {stdio: opts.stdio, cwd: opts.cwd});
   var streams;
   if (opts.buffer) {

src/web/Simulator.js

@@ -68,6 +68,7 @@ var Simulator = exports = Class(function () {
     // DOM simulator
     if (opts.chrome !== false) {
       this._ui = new ui.Chrome(this);
+      this._ui.on('change:type', bind(this, 'onDeviceChange'));
     }
 
     this._requiresHardRebuild = false;
@@ -165,6 +166,14 @@ var Simulator = exports = Class(function () {
     }, this);
   };
 
+  this.onDeviceChange = function() {
+    this._deviceInfo = this._ui.getDeviceInfo();
+    this._type = this._deviceInfo.getId();
+    this._buildTarget = this._deviceInfo.getTarget();
+    window.location.hash = 'device=' + JSON.stringify({ type: this._type });
+    this.rebuild();
+  };
+
   this.rebuild = PUBLIC_API(function (opts) {
     opts = opts || {};
 
@@ -259,4 +268,13 @@ var Simulator = exports = Class(function () {
    this.prompt = PUBLIC_API(function (opts) {
     return this._ui && this._ui.prompt(opts) || Promise.reject();
   });
+
+  /**
+   * screenshot
+   * @returns {Promise<String>} a base64-encoded image
+   */
+  this.screenshot = PUBLIC_API(function (opts) {
+    return this.api.getChannel('devkit-simulator')
+      .request('screenshot', opts);
+  });
 });

src/web/components/DeviceDialog.js

@@ -18,8 +18,7 @@ module.exports = Class(Dialog, function (supr) {
       {id: 'zoomCustomWrapper', type: 'widget', children: [
         {id: 'zoom', tag: 'input', attrs: {type: 'range', value: 100, max: 400, min: 10, step: 1}},
         {id: 'zoomPercent', type: 'label', label: '100%'},
-      ]},
-      {id: 'retina', type: 'checkbox', text: 'retina', value: true}
+      ]}
     ],
     children: [
       {type: 'label', text: 'select a device' },
@@ -65,10 +64,6 @@ module.exports = Class(Dialog, function (supr) {
     on.zoom50 = function () { this.zoom.value = 50; this._onZoom(); }
     on.zoom100 = function () { this.zoom.value = 100; this._onZoom(); }
     on.zoom200 = function () { this.zoom.value = 200; this._onZoom(); }
-
-    on.retina = function () {
-      this._simulator.setRetina(this.retina.isChecked());
-    };
   });
 
   this._onZoom = function () {

src/web/components/FrameBackground.js

@@ -40,12 +40,12 @@ module.exports = Class(Widget, function () {
     if (isRotated) {
       width = opts.height;
       height = opts.width;
-      offsetX = opts.height - opts.screenSize.width - opts.offsetY;
+      offsetX = opts.height - opts.screenSize.width / scale - opts.offsetY;
       offsetY = opts.offsetX;
     }
 
     this._width = width * scale;
-    this._height = height  * scale;
+    this._height = height * scale;
     this._offsetX = -(offsetX || 0) * scale;
     this._offsetY = -(offsetY || 0) * scale;
 
@@ -62,7 +62,6 @@ module.exports = Class(Widget, function () {
       width: this._fullWidth + 'px',
       height: this._fullHeight + 'px'
     });
-
   }
 
   this.getOffset = function () {

src/web/stylesheets/simulator.styl

@@ -358,6 +358,8 @@ else
     .squill-label
       display inline-block
 
+  #_closeBtnIcon:after
+    content '\e014'
 
   #deviceList
     display flex

src/web/ui/Chrome.js

@@ -92,7 +92,6 @@ exports = Class(CenterLayout, function (supr) {
 
     var opts = this._opts;
 
-    this._isRetina = true;
     this._validOrientations = {};
     this._renderers = {
       'Facebook': facebookRenderer
@@ -224,6 +223,10 @@ exports = Class(CenterLayout, function (supr) {
   };
 
   this.setBuilding = function (isBuilding) {
+
+    // Make sure we remove game simulation overhead when building
+    this.setPaused(isBuilding);
+
     var spinner = this['build-spinner'];
 
     if (!isBuilding) {
@@ -287,12 +290,6 @@ exports = Class(CenterLayout, function (supr) {
     }), 500);
   };
 
-  this.setRetina = function (isRetina) {
-    this._isRetina = isRetina;
-    this.update();
-    this.refresh();
-  };
-
   this.getFrame = function () { return this._frame; };
 
   this.editDevice = function () {
@@ -364,6 +361,10 @@ exports = Class(CenterLayout, function (supr) {
     }
   };
 
+  this.getDeviceInfo = function() {
+    return this._deviceInfo;
+  };
+
   this.setDeviceInfo = function (deviceInfo) {
     this.setTransitionsEnabled(false);
 
@@ -386,14 +387,10 @@ exports = Class(CenterLayout, function (supr) {
     logInfo('pixel-ratio', deviceInfo.getDevicePixelRatio());
 
     this.update();
+    if (this.banner) { this.banner.hide(); }
+    this.emit('change:type');
 
     setTimeout(bind(this, 'setTransitionsEnabled', true), 1000);
-
-    if (this._frame) {
-      this.refresh();
-    }
-
-    this.emit('change:type');
   };
 
   this.rotate = function () {
@@ -534,21 +531,13 @@ exports = Class(CenterLayout, function (supr) {
     };
   }
 
-  this._setViewport = function (size, viewport, scale) {
-    $.style(this.contents, sizeToCSS(size, scale));
-    // $.style(this.frameWrapper, sizeToCSS(viewport, scale));
+  this._setViewport = function (size, viewport, zoom) {
+    $.style(this.contents, sizeToCSS(size, zoom));
     if (this._frame) {
-      var style;
-
-      if (this._isRetina) {
-        style = sizeToCSS(viewport);
-        style[TRANSFORM_STYLE] = 'scale(' + scale + ')';
-        style[TRANSFORM_ORIGIN_STYLE] = '0px 0px';
-      } else {
-        style = sizeToCSS(viewport, scale);
-        style[TRANSFORM_STYLE] = '';
-      }
-
+      var dpr = this.getDevicePixelRatio();
+      var style = sizeToCSS(viewport);
+      style[TRANSFORM_STYLE] = 'scale(' + zoom + ')';
+      style[TRANSFORM_ORIGIN_STYLE] = '0px 0px';
       $.style(this._frame, style);
     }
   };
@@ -571,41 +560,34 @@ exports = Class(CenterLayout, function (supr) {
     var info = this._deviceInfo;
     if (!info) { return; }
 
-    var start = Date.now();
-
     this._rotation = this._computeRotation();
     var size = this._customSize || info.getScreenSize();
     if (this._rotation % 2 == 1) {
       size.rotate();
     }
 
-    var dpr = this.getDevicePixelRatio();
     var zoom = this._zoom;
     if (!zoom) {
       // check for auto-zoom out to fit window
-      var padding = 10;
-      var winSize = new Size(window.innerWidth - padding * 2, window.innerHeight - padding * 2);
+      var paddingX = 10;
+      var paddingY = 100;
+      var winSize = new Size(window.innerWidth - paddingX * 2, window.innerHeight - paddingY * 2);
       var targetSize = info.getChromeSize(this._rotation % 2 == 1);
       if (winSize.getRatio() < targetSize.getRatio()) {
         zoom = winSize.width / targetSize.width;
       } else {
         zoom = winSize.height / targetSize.height;
       }
-      zoom = Math.min(1, zoom * dpr);
+      zoom = Math.max(0.1, Math.min(1, zoom));
     }
 
-    var scale = this._scale = 1 / dpr * zoom;
-    this._width = size.width * scale || 0;
-    this._height = size.height * scale || 0;
-
     // override the default full-screen with a custom screen size
     // Note: custom size with viewport != screen size is not supported
     var viewportSize = this._customSize ? size : info.getViewportSize(this._rotation);
-
     this.contents.style.cssText = '';
     $.style(this.contents, info.getCustomStyle());
 
-    this._setViewport(size, viewportSize, scale);
+    this._setViewport(size, viewportSize, zoom);
 
     var renderer = this._renderers[info.getName()];
     if (this._customRenderer && (!renderer || renderer != this._customRenderer)) {
@@ -621,17 +603,19 @@ exports = Class(CenterLayout, function (supr) {
     this.setCenterX(info.centerSimulatorX());
     this.setCenterY(info.centerSimulatorY());
 
+    var newBG = info.getBackground(this._rotation);
+    var bgRotation = (info.getBackgroundCount() === 1) ? this._rotation : 0;
+
     this.background.update(merge({
-      scale: scale,
-      rotation: this._rotation,
+      scale: zoom / info.getDevicePixelRatio(),
+      rotation: bgRotation,
       screenSize: size,
-    }, info.getBackground(this._rotation)));
+    }, newBG));
 
-    this.setContentSize(size.width * scale, size.height * scale);
+    this.setContentSize(size.width * zoom, size.height * zoom);
 
     this.toolbar.setOffset(this.getContentArea(), this.background.getOffset());
 
-    this.logger.log('UPDATE', Date.now() - start);
     this.emit('change');
   };
 

src/web/util/ChannelAPI.js

@@ -11,12 +11,16 @@ exports = Class(function () {
     if (!channel) {
       channel = new Channel(name);
       this._channels[name] = channel;
+      if (this._transport) {
+        channel.setTransport(this._transport);
+      }
     };
 
     return channel;
   };
 
   this.setTransport = function (transport) {
+    this._transport = transport;
     for (var name in this._channels) {
       this._channels[name].setTransport(transport);
     }