Issue cocos2d#2417: Unified management of browser data

Author: VisualSJ

cocos2d/core/platform/CCEGLView.js

@@ -35,6 +35,42 @@ cc.DENSITYDPI_HIGH = "high-dpi";
 cc.DENSITYDPI_MEDIUM = "medium-dpi";
 cc.DENSITYDPI_LOW = "low-dpi";
 
+cc.__BrowserGetter = {
+    init: function(){
+        this.html = document.getElementsByTagName("html")[0];
+    },
+    avaWidth: function(frame){
+        if(!frame || frame === this.html)
+            return window.innerWidth;
+        else
+            return frame.clientWidth;
+    },
+    avaHeight: function(frame){
+        if(!frame || frame === this.html)
+            return window.innerHeight;
+        else
+            return frame.clientHeight;
+    },
+    meta: {
+        "width": "device-width",
+        "user-scalable": "no"
+    }
+};
+
+switch(cc.sys.browserType){
+    case cc.sys.BROWSER_TYPE_CHROME:
+        cc.__BrowserGetter.avaWidth = function(frame){
+                return frame.clientWidth;
+        };
+        cc.__BrowserGetter.avaHeight = function(frame){
+                return frame.clientHeight;
+        };
+        cc.__BrowserGetter.__defineGetter__("target-densitydpi", function(){
+            return cc.view._targetDensityDPI;
+        });
+        break;
+}
+
 /**
  * cc.view is the singleton object which represents the game window.<br/>
  * It's main task include: <br/>
@@ -205,8 +241,8 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
 
     _initFrameSize: function () {
         var locFrameSize = this._frameSize;
-        locFrameSize.width = this._frame.clientWidth;
-        locFrameSize.height = this._frame.clientHeight;
+        locFrameSize.width = cc.__BrowserGetter.avaWidth(this._frame);
+        locFrameSize.height = cc.__BrowserGetter.avaHeight(this._frame);
     },
 
     // hack
@@ -234,14 +270,7 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
             vp.name = "viewport";
             vp.content = "";
 
-            // For avoiding Android Firefox issue, to remove once firefox fixes its issue.
-            if (cc.sys.isMobile && cc.sys.browserType == cc.sys.BROWSER_TYPE_FIREFOX) {
-                viewportMetas = {"width": "device-width", "initial-scale": "1.0"};
-            }else{
-                viewportMetas = {"width": "device-width", "user-scalable": "no", "maximum-scale": "1.0", "initial-scale": "1.0"};
-            }
-            if(cc.sys.isMobile)
-                viewportMetas["target-densitydpi"] = this._targetDensityDPI;
+            viewportMetas = cc.__BrowserGetter.meta;
 
             content = currentVP ? currentVP.content : "";
             for (var key in viewportMetas) {
@@ -250,7 +279,7 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
                     content += "," + key + "=" + viewportMetas[key];
                 }
             }
-            if(content != "")
+            if(/^,/.test(content))
                 content = content.substr(1);
 
             vp.content = content;
@@ -494,46 +523,56 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
      */
     setDesignResolutionSize: function (width, height, resolutionPolicy) {
         // Defensive code
-        if (isNaN(width) || width == 0 || isNaN(height) || height == 0) {
+        if( !(width > 0 || height > 0) ){
             cc.log(cc._LogInfos.EGLView_setDesignResolutionSize);
             return;
         }
-        var _t = this;
-        _t.setResolutionPolicy(resolutionPolicy);
-        var policy = _t._resolutionPolicy;
-        if (policy)
-            policy.preApply(_t);
-        else {
+
+        this.setResolutionPolicy(resolutionPolicy);
+        var policy = this._resolutionPolicy;
+        if (!policy){
             cc.log(cc._LogInfos.EGLView_setDesignResolutionSize_2);
             return;
         }
+        policy.preApply(this);
 
         // Reinit frame size
-        if (cc.sys.isMobile)
-            _t._setViewPortMeta();
-        _t._initFrameSize();
-        _t._designResolutionSize = cc.size(width, height);
-        _t._originalDesignResolutionSize = cc.size(width, height);
+        if(cc.sys.isMobile)
+            this._setViewPortMeta();
+
+        this._initFrameSize();
+
+        this._originalDesignResolutionSize.width = this._designResolutionSize.width = width;
+        this._originalDesignResolutionSize.height = this._designResolutionSize.height = height;
+
+        var result = policy.apply(this, this._designResolutionSize);
 
-        var result = policy.apply(_t, _t._designResolutionSize);
-        if (result.scale && result.scale.length == 2) {
-            _t._scaleX = result.scale[0];
-            _t._scaleY = result.scale[1];
+        if(result.scale && result.scale.length == 2){
+            this._scaleX = result.scale[0];
+            this._scaleY = result.scale[1];
         }
-        if (result.viewport) {
-            var vp = _t._viewPortRect = result.viewport, visible = _t._visibleRect;
-            visible.width = cc._canvas.width / _t._scaleX;
-            visible.height = cc._canvas.height / _t._scaleY;
-            visible.x = -vp.x/2 / _t._scaleX;
-            visible.y = -vp.y/2 / _t._scaleY;
+
+        if(result.viewport){
+            var vp = this._viewPortRect,
+                vb = this._visibleRect,
+                rv = result.viewport;
+
+            vp.x = rv.x;
+            vp.y = rv.y;
+            vp.width = rv.width;
+            vp.height = rv.height;
+
+            vb.x = -vp.x / this._scaleX;
+            vb.y = -vp.y / this._scaleY;
+            vb.width = cc._canvas.width / this._scaleX;
+            vb.height = cc._canvas.height / this._scaleY;
         }
 
         // reset director's member variables to fit visible rect
         var director = cc.director;
-        director._winSizeInPoints.width = _t._designResolutionSize.width;
-        director._winSizeInPoints.height = _t._designResolutionSize.height;
-
-        policy.postApply(_t);
+        director._winSizeInPoints.width = this._designResolutionSize.width;
+        director._winSizeInPoints.height = this._designResolutionSize.height;
+        policy.postApply(this);
         cc.winSize.width = director._winSizeInPoints.width;
         cc.winSize.height = director._winSizeInPoints.height;
 
@@ -543,12 +582,12 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
             director.setGLDefaultValues();
         }
 
-        _t._originalScaleX = _t._scaleX;
-        _t._originalScaleY = _t._scaleY;
+        this._originalScaleX = this._scaleX;
+        this._originalScaleY = this._scaleY;
         // For editbox
         if (cc.DOM)
             cc.DOM._resetEGLViewDiv();
-        cc.visibleRect && cc.visibleRect.init(_t._visibleRect);
+        cc.visibleRect && cc.visibleRect.init(this._visibleRect);
     },
 
     /**

cocos2d/core/platform/CCVisibleRect.js

@@ -61,16 +61,13 @@ cc.visibleRect = {
      * @param {cc.Rect} visibleRect
      */
     init:function(visibleRect){
-        var view = cc.EGLView;
-        var scaleX = view.getScaleX ? view.getScaleX() : 1;
-        var scaleY = view.getScaleY ? view.getScaleY() : 1;
 
-        var w = this.width = visibleRect.width / scaleX;
-        var h = this.height = visibleRect.height / scaleY;
-        var l = visibleRect.x / scaleX,
-            b = visibleRect.y / scaleY,
-            t = (b + h) / scaleY,
-            r = (l + w) / scaleX;
+        var w = this.width = visibleRect.width;
+        var h = this.height = visibleRect.height;
+        var l = visibleRect.x,
+            b = visibleRect.y,
+            t = b + h,
+            r = l + w;
 
         //top
         this.topLeft.x = l;

cocos2d/core/scenes/CCLoaderScene.js

@@ -47,7 +47,6 @@ cc.LoaderScene = cc.Scene.extend({
 
         // bg
         var bgLayer = self._bgLayer = new cc.LayerColor(cc.color(32, 32, 32, 255));
-        bgLayer.setPosition(cc.visibleRect.bottomLeft);
         self.addChild(bgLayer, 0);
 
         //image move to CCSceneFile.js