[add] All

2022-01-21 17:50:26 +08:00
commit 2fce5d86b2
50 changed files with 77644 additions and 0 deletions
--- a/preview-templates/boot.js
+++ b/preview-templates/boot.js
@@ -0,0 +1,419 @@
+(function () {
+    'use strict';
+
+    // init device resolutions
+    var devices = [
+        { name: 'Apple iPhone 5',       width: 320,  height: 568,  ratio: 2     },
+        { name: 'Apple iPhone 6',       width: 375,  height: 667,  ratio: 2     },
+        { name: 'Apple iPhone 6 Plus',  width: 414,  height: 736,  ratio: 3     },
+        { name: 'Apple iPhone 7',       width: 375,  height: 667,  ratio: 2     },
+        { name: 'Apple iPhone 7 Plus',  width: 414,  height: 736,  ratio: 3     },
+        { name: 'Apple iPhone X',       width: 375,  height: 812,  ratio: 3     },
+
+        { name: 'Apple iPad',               width: 1024, height: 768,  ratio: 2 },
+        { name: 'Apple iPad Air 2',         width: 768,  height: 1024, ratio: 2 },
+        { name: 'Apple iPad Pro 10.5-inch', width: 834,  height: 1112, ratio: 2 },
+        { name: 'Apple iPad Pro 12.9-inch', width: 1024, height: 1366, ratio: 2 },
+
+        { name: 'Huawei P9',            width: 540,  height: 960,  ratio: 2     },
+        { name: 'Huawei Mate9 Pro',     width: 720,  height: 1280, ratio: 2     },
+
+        { name: 'Google Nexus 5',       width: 360,  height: 640,  ratio: 3     },
+        { name: 'Google Nexus 5X',      width: 411,  height: 731,  ratio: 2.625 },
+        { name: 'Google Nexus 6',       width: 412,  height: 732,  ratio: 3.5   },
+        { name: 'Google Nexus 7',       width: 960,  height: 600,  ratio: 2     },
+    ];
+
+    function setCSSChecked (element, checked) {
+        if (checked) {
+            element.classList.add('checked');
+        }
+        else {
+            element.classList.remove('checked');
+        }
+        return checked;
+    }
+
+    function refreshPauseBtnState () {
+        if (cc.game.isPaused()) {
+            btnPause.style.borderTopRightRadius = '0';
+            btnPause.style.borderBottomRightRadius = '0';
+            btnStep.style.borderTopLeftRadius = '0';
+            btnStep.style.borderBottomLeftRadius = '0';
+            btnStep.style.display = '';
+            setCSSChecked(btnPause, true);
+        }
+        else {
+            btnPause.style.borderTopRightRadius = '';
+            btnPause.style.borderBottomRightRadius = '';
+            btnStep.style.borderTopLeftRadius = '';
+            btnStep.style.borderBottomLeftRadius = '';
+            btnStep.style.display = 'none';
+            setCSSChecked(btnPause, false);
+        }
+    }
+
+    var isMobile = function () {
+        var check = false;
+        (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true;})(navigator.userAgent||navigator.vendor||window.opera);
+        return check;
+    };
+
+    // init toolbar
+    // =======================
+
+    var designWidth = _CCSettings.designWidth;
+    var designHeight = _CCSettings.designHeight;
+
+    var rotated = false;
+    // var paused = false;
+    var canvas = document.getElementById('GameCanvas');
+    var btnRotate = document.getElementById('btn-rotate');
+    var optsDevice = document.getElementById('opts-device');
+    var btnPause = document.getElementById('btn-pause');
+    var btnStep = document.getElementById('btn-step');
+    var optsDebugMode = document.getElementById('opts-debug-mode');
+    var btnShowFPS = document.getElementById('btn-show-fps');
+    var inputSetFPS = document.getElementById('input-set-fps');
+    var btnRecompile = document.getElementById('btn-recompile');
+
+    devices.forEach( function ( info, idx ) {
+        var opt = document.createElement('option');
+        opt.value = idx+1;
+        opt.text = info.name;
+        optsDevice.add( opt, null );
+    });
+
+    // coockie
+    // =======================
+    function setCookie (name, value, days) {
+        days = days || 30;              //cookie will be saved for 30 days
+        var expires  = new Date();
+        expires.setTime(expires.getTime() + days*24*60*60*1000);
+        document.cookie = name + '='+ encodeURIComponent(value) + ';expires=' + expires.toGMTString();
+    }
+
+    function getCookie (name) {
+        var arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'));
+        if(arr !== null) return (arr[2]);
+        return null;
+    }
+
+    function isFullScreen () {
+        var toolbar = document.getElementsByClassName('toolbar')[0];
+        return getComputedStyle(toolbar).display === 'none';
+    }
+
+    function getEmulatedScreenSize () {
+        var w, h;
+        var idx = optsDevice.value;
+        if ( idx === '0' ) {
+            w = designWidth;
+            h = designHeight;
+        }
+        else {
+            var info = devices[parseInt(idx) - 1];
+            w = info.width;
+            h = info.height;
+        }
+        return {
+            width: rotated ? h : w,
+            height: rotated ? w : h
+        };
+    }
+
+    function showSplash () {
+        var LOGO_IMG_L_W = 416;
+        var LOGO_IMG_L_H = 87;
+        var LOGO_SIZE = 0.4;
+
+        var size = isFullScreen() ? document.documentElement.getBoundingClientRect() : getEmulatedScreenSize();
+        var splash = document.getElementById('splash');
+        var progressBar = splash.querySelector('.progress-bar span');
+        splash.style.width = size.width + 'px';
+        splash.style.height = size.height + 'px';
+        var marginTop;
+        if (size.width < size.height) {
+            // portrait
+            splash.style.backgroundImage = 'url("app/editor/static/img/logo_portrait.png")';
+            splash.style.backgroundSize = '30%';
+            marginTop = (size.height - size.width * (1 - LOGO_SIZE)) / 2;
+        }
+        else {
+            var logoDisplayH = size.width * LOGO_SIZE / LOGO_IMG_L_W * LOGO_IMG_L_H;
+            marginTop = logoDisplayH / 2 * 1.47;
+        }
+        progressBar.parentElement.style.marginTop = marginTop + 'px';
+        splash.style.display = '';
+        progressBar.style.width = '0%';
+
+        var div = document.getElementById('GameDiv');
+        if (div) {
+            div.style.visibility = 'visible';
+        }
+
+        if ( !isMobile() ) {
+            // make the splash screen in center
+            canvas.width = size.width;
+            canvas.height = size.height;
+        }
+    }
+
+    // init options
+    function initPreviewOptions () {
+        var defaultDevice = getCookie('device');
+        var defaultRotate = getCookie('rotate');
+
+        var hasDefaultDevice = defaultDevice !== null;
+        var hasDefaultRotate = defaultRotate !== null;
+
+        if (hasDefaultDevice) {
+            optsDevice.value = parseInt(defaultDevice);
+        }
+
+        if (hasDefaultRotate && defaultRotate === 'true') {
+            rotated = !rotated;
+            setCSSChecked(btnRotate, rotated);
+        }
+
+        optsDebugMode.value = getCookie('debugMode') || '1';
+        setCSSChecked(btnShowFPS, getCookie('showFPS') === 'true');
+        inputSetFPS.value = '60';
+
+        showSplash();
+    }
+
+    initPreviewOptions();
+
+    window.onload = function () {
+        if (window.__quick_compile_engine__) {
+            window.__quick_compile_engine__.load(onload);
+        }
+        else {
+            onload();
+        }
+    };
+
+    function onload () {
+
+        // socket
+        // =======================
+
+        // jshint camelcase:false
+
+        var socket = window.__socket_io__();
+        socket.on('browser:reload', function () {
+            window.location.reload();
+        });
+        socket.on('browser:confirm-reload', function () {
+            var r = confirm( 'Reload?' );
+            if ( r ) {
+                window.location.reload();
+            }
+        });
+
+        function updateResolution () {
+            var size = isFullScreen() ? document.documentElement.getBoundingClientRect() : getEmulatedScreenSize();
+            var gameDiv = document.getElementById('GameDiv');
+            gameDiv.style.width = size.width + 'px';
+            gameDiv.style.height = size.height + 'px';
+
+            cc.view.setCanvasSize(size.width, size.height);
+        }
+
+        // init rotate button
+        btnRotate.addEventListener('click', function () {
+            rotated = !rotated;
+            setCSSChecked(btnRotate, rotated);
+            setCookie('rotate', rotated.toString());
+            updateResolution();
+        });
+
+        optsDevice.addEventListener( 'change', function () {
+            var idx = optsDevice.value;
+            setCookie('device', idx.toString());
+            updateResolution();
+        });
+
+        // init debug modes
+        optsDebugMode.addEventListener('change', function (event) {
+            var value = event.target.value;
+            setCookie('debugMode', value);
+            cc.debug._resetDebugSetting(parseInt(value));
+        });
+
+        // init pause button
+        btnPause.addEventListener('click', function () {
+            var shouldPause = !cc.game.isPaused();
+            if (shouldPause) {
+                cc.game.pause();
+            } 
+            else {
+                cc.game.resume();
+            }
+            refreshPauseBtnState();
+        });
+
+        // init recompile button
+        btnRecompile.addEventListener('click', function () {
+            var url = window.location.href + 'update-db';
+            var xmlHttp = new XMLHttpRequest();
+            xmlHttp.onreadystatechange = function () {
+                if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
+                    document.getElementById('recompiling').style.display = 'block';
+                }
+            };
+            xmlHttp.open("GET", url, true); // true for asynchronous 
+            xmlHttp.send(null);
+        });
+
+        // init step button
+        btnStep.addEventListener('click', function () {
+            cc.game.step();
+        });
+
+        // init show fps, true by default
+        btnShowFPS.addEventListener('click', function () {
+            var show = !cc.debug.isDisplayStats();
+            cc.debug.setDisplayStats(show);
+            setCSSChecked(btnShowFPS, show);
+            setCookie('showFPS', show.toString());
+        });
+
+        // init set fps
+        inputSetFPS.addEventListener('change', function (event) {
+            var fps = parseInt(inputSetFPS.value);
+            if (isNaN(fps)) {
+                fps = 60;
+                inputSetFPS.value = fps.toString();
+            }
+            cc.game.setFrameRate(fps);
+        });
+
+
+        // init engine
+        // =======================
+
+        var engineInited = false;
+
+        if (isFullScreen()) {
+            window.addEventListener('resize', updateResolution);
+        }
+
+        var showFPS = getCookie('showFPS');
+        // FPS is on by default
+        showFPS = showFPS === null ? true : showFPS === 'true';
+
+        var onStart = function () {
+            // resize canvas
+            if (!isFullScreen()) {
+                updateResolution();
+            }
+            
+            cc.view.enableRetina(true);
+            cc.view.resizeWithBrowserSize(true);
+        
+            // Loading splash scene
+            var splash = document.getElementById('splash');
+            var progressBar = splash.querySelector('.progress-bar span');
+            showSplash();
+
+            cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {
+                splash.style.display = 'none';
+                checkEmptyScene();
+            });
+
+            cc.game.pause();
+
+            // init assets
+            engineInited = true;
+
+            cc.assetManager.loadAny({url: 'preview-scene.json', __isNative__: false }, null, function (finish, totalCount) {
+                    var percent = 100 * finish / totalCount;
+                    if (progressBar) {
+                        progressBar.style.width = percent.toFixed(2) + '%';
+                    }
+                }, function (err, sceneAsset) {
+                if (err) {
+                    console.error(err.message, err.stack);
+                    return;
+                }
+                var scene = sceneAsset.scene;
+                scene._name = sceneAsset._name;
+                // HACK: Change key to uuid from url
+                cc.assetManager.dependUtil._depends.add(scene._id, cc.assetManager.dependUtil._depends.get('preview-scene.json'));
+                cc.director.runSceneImmediate(scene, function () {
+                    // play game
+                    cc.game.resume();
+                });
+            });
+
+            // purge
+            //noinspection JSUnresolvedVariable
+            _CCSettings = undefined;
+        };
+
+        var option = {
+            id: canvas,
+            debugMode: parseInt(optsDebugMode.value),
+            showFPS: showFPS,
+            frameRate: parseInt(inputSetFPS.value),
+            groupList: _CCSettings.groupList,
+            collisionMatrix: _CCSettings.collisionMatrix,
+        };
+        
+        cc.assetManager.init({
+            importBase: 'assets/others/import',
+            nativeBase: 'assets/others/native'
+        });
+
+        var RESOURCES = cc.AssetManager.BuiltinBundleName.RESOURCES;
+        var INTERNAL = cc.AssetManager.BuiltinBundleName.INTERNAL;
+        var MAIN = cc.AssetManager.BuiltinBundleName.MAIN;
+        var bundleRoot = [INTERNAL];
+        _CCSettings.hasResourcesBundle && bundleRoot.push(RESOURCES);
+
+        var count = 0;
+        function cb (err) {
+            if (err) return console.error(err);
+            count++;
+            if (count === bundleRoot.length + 1) {
+                cc.assetManager.loadBundle(MAIN, function (err) {
+                    if (!err) cc.game.run(option, onStart);
+                });
+            }
+        }
+
+        // load plugins
+        cc.assetManager.loadScript(_CCSettings.jsList.map(function (x) { return '/plugins/' + x; }), cb);
+
+        // load bundles
+        for (var i = 0; i < bundleRoot.length; i++) {
+            cc.assetManager.loadBundle(bundleRoot[i], cb);
+        }
+    };
+
+    function checkEmptyScene () {
+        var scene = cc.director.getScene();
+        if (scene) {
+            if (scene.children.length > 1) {
+                return;
+            }
+            if (scene.children.length === 1) {
+                var node = scene.children[0];
+                if (node.children.length > 0) {
+                    return;
+                }
+                if (node._components.length > 1) {
+                    return;
+                }
+                if (node._components.length > 0 && !(node._components[0] instanceof cc.Canvas)) {
+                    return;
+                }
+            }
+        }
+        document.getElementById('bulletin').style.display = 'block';
+        document.getElementById('sceneIsEmpty').style.display = 'block';
+    }
+})();
+
--- a/preview-templates/ccc-devtools/LICENSE
+++ b/preview-templates/ccc-devtools/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/preview-templates/ccc-devtools/README.md
+++ b/preview-templates/ccc-devtools/README.md
@@ -0,0 +1,76 @@
+# ccc-devtools
+Cocos Creator 网页调试工具，运行时查看、修改节点树，实时更新节点属性，可视化缓存资源。
+
+## 功能
+
+- 场景节点树实时显示，节点、组件属性实时显示更改
+
+![preview](./screenshots/preview1.gif)
+
+- 可视化缓存资源
+
+![preview](./screenshots/preview2.png)
+
+- 标记场景中节点位置
+
+![preview](./screenshots/preview3.png)
+
+- 输出节点、组件引用到控制台
+
+![preview](./screenshots/preview4.png)
+
+- cc控制台功能扩展
+
+![preview](./screenshots/preview5.png)
+
+## 全局使用
+
+1. 点击 Creator 右上角进入编辑器 resources 目录，再依次进入`static/preview-templates`目录
+
+   ![t1](./screenshots/t1.png)
+
+2. 根据creator版本将本项目对应分支clone到上面的目录下，**如果使用下载压缩包的方式记得把后缀名-branchname去掉**
+
+   ![t2](./screenshots/t2.png)
+
+3. 打开 `index.jade`，找到 `body` 将中间部分替换为 `include ./ccc-devtools/index.html`，**注意用tab键对齐**
+
+   ![t3](./screenshots/t3.png)
+
+## 项目使用
+
+Cocos Creator 从 v2.2 开始新增了自定义网页预览功能。
+
+1. 重复上面的操作步骤，将修改后的 `preview-templates` 目录拷贝到项目根目录
+
+2. 将 `ccc-devtools/index.html` 里所有引用的资源路径 `app/editor/static/preview-templates/ccc-devtools/...` 替换为 `ccc-devtools/...`
+
+3. 重启 Cocos Creator
+
+## 自定义
+
+- 本项目使用了 vue 和 vuetify，可根据 [vuetify 文档](https://vuetifyjs.com/en/getting-started/quick-start/) 对页面进行修改
+
+- 节点、组件显示属性可在 `config.js` 里配置，目前支持 text，number，textarea，color，bool 几种类型
+
+## 需求、更新
+
+https://github.com/potato47/ccc-devtools
+
+如果没有更改源码，可直接在目录下 git pull
+
+论坛讨论地址：https://forum.cocos.com/t/creator-20190201/71578
+
+## 贡献指南
+
+- 版本号命名规则 https://semver.org/lang/zh-CN/ ,简单来讲，新功能第二位加一，修复bug第三位加一
+
+- 如果新增功能请在README中添加预览截图说明
+
+- 记得更新version.json中的版本号
+
+## 前人种树
+
+- https://github.com/vuejs/vue
+
+- https://github.com/vuetifyjs/vuetify
--- a/preview-templates/ccc-devtools/config.js
+++ b/preview-templates/ccc-devtools/config.js
@@ -0,0 +1,54 @@
+const NEX_CONFIG = {
+	nodeSchema: {
+		node2d: {
+			title: 'Node',
+			key: 'cc.Node',
+			rows: [
+				{ name: 'Name', key: 'name', type: 'text' },
+				{ name: 'X', key: 'x', type: 'number' },
+				{ name: 'Y', key: 'y', type: 'number' },
+				{ name: 'Width', key: 'width', type: 'number' },
+				{ name: 'Height', key: 'height', type: 'number' },
+				{ name: 'Angle', key: 'angle', type: 'number' },
+				{ name: 'ScaleX', key: 'scaleX', type: 'number' },
+				{ name: 'ScaleY', key: 'scaleY', type: 'number' },
+				{ name: 'Opacity', key: 'opacity', type: 'number' },
+				{ name: 'Color', key: 'hex_color', type: 'color' },
+				{ name: 'Group', key: 'group', type: 'text' },
+			]
+		},
+		node3d: {
+			title: 'Node',
+			key: 'cc.Node',
+			rows: [
+				// TODO:
+			]
+		},
+	},
+	componentsSchema: {
+		'cc.Camera': {
+			title: 'cc.Camera',
+			key: 'cc.Camera',
+			rows: [
+				{ name: 'Zoom Ratio', key: 'zoomRatio', type: 'number' },
+				{ name: 'Depth', key: 'depth', type: 'number' },
+				{ name: 'Bacground Color', key: 'hex_backgroundColor', rawKey: 'backgroundColor', type: 'color' },
+				{ name: 'Align with Screen', key: 'alignWithScreen', type: 'bool' },
+			]
+		},
+		'cc.Sprite': {
+			key: 'cc.Sprite',
+			title: 'cc.Sprite',
+			rows: []
+		},
+		'cc.Label': {
+			title: 'cc.Label',
+			key: 'cc.Label',
+			rows: [
+				{ name: 'String', key: 'string', type: 'textarea' },
+				{ name: 'Font Size', key: 'fontSize', type: 'number' },
+				{ name: 'Line Height', key: 'lineHeight', type: 'number' },
+			]
+		}
+	}
+}
--- a/preview-templates/ccc-devtools/index.html
+++ b/preview-templates/ccc-devtools/index.html
@@ -0,0 +1,248 @@
+<link href="ccc-devtools/libs/css/materialdesignicons.min.css" rel="stylesheet" type="text/css">
+<link href="ccc-devtools/libs/css/vuetify.min.css" rel="stylesheet" type="text/css">
+<style>
+    html {
+        overflow-y: auto;
+    }
+</style>
+
+<v-app id="app">
+    <v-app-bar app clipped-left color="gray" dense v-if="isShowTop">
+        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+        <div id="recompiling"><span>Recompiling...</span></div>
+        <v-spacer></v-spacer>
+        <div class="toolbar">
+            <div class="item">
+                <select id="opts-device">
+                    <option value="0">Default</option>
+                </select>
+            </div>
+            <div class="item">
+                <v-btn id="btn-rotate" small height="25"><span style="color: #aaa;">Rotate</span></v-btn>
+            </div>
+            <span style="font-size: small;display: none;" class="item">Debug Mode:</span>
+            <div class="item" style="display: none;">
+                <select id="opts-debug-mode">
+                    <option value="0">None</option>
+                    <option value="1">Info</option>
+                    <option value="2">Warn</option>
+                    <option value="3">Error</option>
+                    <option value="4">Info For Web Page</option>
+                    <option value="5">Warn For Web Page</option>
+                    <option value="6">Error For Web Page</option>
+                </select>
+            </div>
+            <div class="item">
+                <v-btn id="btn-show-fps" small height="25"><span style="color: #aaa;">Show FPS</span></v-btn>
+            </div>
+            <div class="item">
+                <span style="font-size: small;color: #aaa;" class="item">FPS:</span><input id="input-set-fps"
+                    type="number" />
+            </div>
+            <div style="margin-right: 0px;" class="item">
+                <v-btn id="btn-pause" small height="25"><span style="color: #aaa;">Pause</span></v-btn>
+            </div>
+            <div class="item">
+                <v-btn id="btn-step" style="display: none;" small height="25">
+                    <span style="color: #aaa;">Step</span>
+                </v-btn>
+            </div>
+            <div class="item">
+                <v-btn id="btn-recompile" small height="25"><span style="color: #aaa;">Recompile</span></v-btn>
+            </div>
+            <v-icon @click="openCocosDocs" small>mdi-cloud-search</v-icon>
+            <v-icon @click="openCocosForum" small>mdi-forum</v-icon>
+            <v-icon @click="openCacheDialog" small>mdi-table</v-icon>
+            <v-icon @click="openGithub" small>mdi-home</v-icon>
+        </div>
+    </v-app-bar>
+
+    <div v-if="!isShowTop">
+        <div id="recompiling"><span>Recompiling...</span></div>
+        <div class="toolbar">
+            <div class="item">
+                <select id="opts-device">
+                    <option value="0">Default</option>
+                </select>
+            </div>
+            <div class="item">
+                <v-btn id="btn-rotate" small height="25"><span style="color: #aaa;">Rotate</span></v-btn>
+            </div>
+            <span style="font-size: small;display: none;" class="item">Debug Mode:</span>
+            <div class="item" style="display: none;">
+                <select id="opts-debug-mode">
+                    <option value="0">None</option>
+                    <option value="1">Info</option>
+                    <option value="2">Warn</option>
+                    <option value="3">Error</option>
+                    <option value="4">Info For Web Page</option>
+                    <option value="5">Warn For Web Page</option>
+                    <option value="6">Error For Web Page</option>
+                </select>
+            </div>
+            <div class="item">
+                <v-btn id="btn-show-fps" small height="25"><span style="color: #aaa;">Show FPS</span></v-btn>
+            </div>
+            <div class="item">
+                <span style="font-size: small;color: #aaa;" class="item">FPS:</span><input id="input-set-fps"
+                    type="number" />
+            </div>
+            <div style="margin-right: 0px;" class="item">
+                <v-btn id="btn-pause" small height="25"><span style="color: #aaa;">Pause</span></v-btn>
+            </div>
+            <div class="item">
+                <v-btn id="btn-step" style="display: none;" small height="25">
+                    <span style="color: #aaa;">Step</span>
+                </v-btn>
+            </div>
+            <div class="item">
+                <v-btn id="btn-recompile" small height="25"><span style="color: #aaa;">Recompile</span></v-btn>
+            </div>
+        </div>
+    </div>
+
+    <v-navigation-drawer v-model="drawer" app clipped fixed width="512" v-if="isShowTop">
+        <v-container style="height: 50%;overflow: auto;">
+            <v-text-field v-model="treeSearchText" dense label="Search Node or Component" dark flat solo-inverted
+                hide-details clearable clear-icon="mdi-close-circle-outline"></v-text-field>
+            <v-treeview :items="treeData" item-key="id" dense activatable :search="treeSearchText"
+                :active.sync="selectedNodes">
+                <template v-slot:label="{ item, active }">
+                    <label v-if="item.active" style="color: white;">{{ item.name }}</label>
+                    <label v-else style="color: gray;">{{ item.name }}</label>
+                </template>
+            </v-treeview>
+        </v-container>
+        <v-container style="border-top: 2px solid darkgray;height: 50%;overflow-y: auto;">
+            <template v-if="selectedNode">
+                <!-- Node -->
+                <table style="width: 100%;color: white;" border="1">
+                    <thead>
+                        <tr>
+                            <th colspan="2" style="text-align: left; padding: 10px;">
+                                <div class="float-left" style="display:inline-flex;">
+                                    <v-simple-checkbox v-model="selectedNode.active"></v-simple-checkbox>
+                                    <span style="margin-left: 10px;">{{ nodeSchema.title }}</span>
+                                </div>
+                                <div class="float-right">
+                                    <v-icon style="margin-left: 10px;margin-right: 10px;" @click="drawNodeRect()">
+                                        mdi-adjust</v-icon>
+                                    <v-icon @click="outputNodeHandler()">mdi-send</v-icon>
+                                </div>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="row in nodeSchema.rows" :key="row.key">
+                            <td style="padding: 10px;width: 40%;">{{ row.name }}</td>
+                            <td style="width: 60%;">
+                                <v-color-picker v-if="row.type == 'color'" class="ma-2" canvas-height="80" width="259"
+                                    v-model="selectedNode[row.key]"></v-color-picker>
+                                <v-simple-checkbox v-else-if="row.type == 'bool'" v-model="selectedNode[row.key]"
+                                    style="padding: 10px;width: 100%;"></v-simple-checkbox>
+                                <input v-else :type="row.type" v-model="selectedNode[row.key]"
+                                    style="padding: 10px;width: 100%;"></input>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+                <!-- Components -->
+                <table v-for="component in componentsSchema" style="width: 100%;color: white;" border="1">
+                    <thead>
+                        <tr>
+                            <th colspan="2" style="text-align: left; padding: 10px;">
+                                <div class="float-left" style="display:inline-flex;">
+                                    <v-simple-checkbox v-model="selectedNode[component.key].enabled">
+                                    </v-simple-checkbox>
+                                    <span style="margin-left: 10px;">{{ component.title }}</span>
+                                </div>
+                                <div class="float-right">
+                                    <v-icon @click="outputComponentHandler(component.key)">mdi-send</v-icon>
+                                </div>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="row in component.rows" :key="row.key">
+                            <td style="padding: 10px;width: 40%;">{{ row.name }}</td>
+                            <td style="width: 60%;">
+                                <v-color-picker v-if="row.type == 'color'" class="ma-2" canvas-height="80" width="259"
+                                    v-model="selectedNode[component.key][row.key]"></v-color-picker>
+                                <textarea v-else-if="row.type == 'textarea'" rows="1"
+                                    v-model="selectedNode[component.key][row.key]" style="padding: 10px;width: 100%;">
+                                </textarea>
+                                <v-simple-checkbox v-else-if="row.type == 'bool'"
+                                    v-model="selectedNode[component.key][row.key]" style="padding: 10px;width: 100%;">
+                                </v-simple-checkbox>
+                                <input v-else :type="row.type" v-model="selectedNode[component.key][row.key]"
+                                    style="padding: 10px;width: 100%;"></input>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </template>
+        </v-container>
+    </v-navigation-drawer>
+
+    <v-content>
+        <v-container fill-height>
+            <div id="content" class="content">
+                <div class="contentWrap">
+                    <div id="GameDiv" class="wrapper"><canvas id="GameCanvas"></canvas>
+                        <div id="splash">
+                            <div class="progress-bar stripes"><span></span></div>
+                        </div>
+                        <div id="bulletin">
+                            <div id="sceneIsEmpty" class="inner">预览场景中啥都没有，加点什么，或在编辑器中打开其它场景吧</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </v-container>
+    </v-content>
+
+    <v-dialog v-model="cacheDialog" persistent scrollable>
+        <v-card>
+            <v-card-title>
+                {{ cacheTitle }}
+                <v-spacer></v-spacer>
+                <v-text-field v-model="cacheSearchText" append-icon="mdi-magnify" label="Search" single-line
+                    hide-details>
+                </v-text-field>
+            </v-card-title>
+            <v-divider></v-divider>
+            <v-card-text>
+                <v-data-table :headers="cacheHeaders" :items="cacheData" :search="cacheSearchText" :sort-by="['size']"
+                    :sort-desc="[true]" :footer-props="{
+                        showFirstLastPage: true,
+                        firstIcon: 'mdi-chevron-double-left',
+                        lastIcon: 'mdi-chevron-double-right',
+                      }">
+                    <template v-slot:item.size="{ item }">
+                        {{ item.size == -1 ? '_' : (item.size +'MB') }}
+                    </template>
+                    <template v-slot:item.preview="{ item }">
+                        <div style="height: 60px;display: flex;align-items: center;">
+                            <img :src="window.location.protocol + '//' + window.location.host + '/' + item.preview"
+                                style="max-height: 60px;max-width: 120px;" v-if="item.preview">
+                            <template v-else>_</template>
+                        </div>
+                    </template>
+                </v-data-table>
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-btn color="blue darken-1" text @click="cacheDialog = false">Close</v-btn>
+                <v-spacer></v-spacer>
+                <v-switch v-model="cacheOnlyTexture" label="只显示纹理"></v-switch>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
+</v-app>
+
+<script src="ccc-devtools/libs/js/vue.min.js"></script>
+<script src="ccc-devtools/libs/js/vuetify.js"></script>
+<script src="ccc-devtools/config.js"></script>
+<script src="ccc-devtools/libs/js/cc-console-utils.js"></script>
+<script src="ccc-devtools/preview.js"></script>
--- a/preview-templates/ccc-devtools/libs/css/googlefonts.css
+++ b/preview-templates/ccc-devtools/libs/css/googlefonts.css
@@ -0,0 +1,336 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url(../fonts/googlefonts-base.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url(../fonts/googlefonts-base.woff22) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url(../fonts/googlefonts-base.woff22) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url(../fonts/googlefonts-base.woff22) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url(../fonts/googlefonts-base.woff22) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url(../fonts/googlefonts-base.woff22) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url(../fonts/googlefonts-base.woff2format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/googlefonts-base.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/googlefonts-base.woff2format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/googlefonts-base.woff2format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/googlefonts-base.woff2format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/googlefonts-base.woff2format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/googlefonts-base.woff2format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/googlefonts-base.woff2format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/googlefonts-base.woff2rmat('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/googlefonts-base.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/googlefonts-base.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url(../fonts/googlefonts-base.woff2f2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url(../fonts/googlefonts-base.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
--- a/preview-templates/ccc-devtools/libs/css/materialdesignicons.min.css
+++ b/preview-templates/ccc-devtools/libs/css/materialdesignicons.min.css
--- a/preview-templates/ccc-devtools/libs/css/vuetify.min.css
+++ b/preview-templates/ccc-devtools/libs/css/vuetify.min.css
--- a/preview-templates/ccc-devtools/libs/fonts/googlefonts-base.woff2
+++ b/preview-templates/ccc-devtools/libs/fonts/googlefonts-base.woff2
--- a/preview-templates/ccc-devtools/libs/fonts/materialdesignicons-webfont.eot
+++ b/preview-templates/ccc-devtools/libs/fonts/materialdesignicons-webfont.eot
--- a/preview-templates/ccc-devtools/libs/fonts/materialdesignicons-webfont.ttf
+++ b/preview-templates/ccc-devtools/libs/fonts/materialdesignicons-webfont.ttf
--- a/preview-templates/ccc-devtools/libs/fonts/materialdesignicons-webfont.woff
+++ b/preview-templates/ccc-devtools/libs/fonts/materialdesignicons-webfont.woff
--- a/preview-templates/ccc-devtools/libs/fonts/materialdesignicons-webfont.woff2
+++ b/preview-templates/ccc-devtools/libs/fonts/materialdesignicons-webfont.woff2
--- a/preview-templates/ccc-devtools/libs/js/cc-console-utils.js
+++ b/preview-templates/ccc-devtools/libs/js/cc-console-utils.js
@@ -0,0 +1,165 @@
+const initConsoleUtil = function () {
+    if (cc.tree) return;
+    cc.tree = function (key) {
+        let index = key || 0;
+        let treeNode = function (node) {
+            let nameStyle =
+                `color: ${node.parent === null || node.activeInHierarchy ? 'green' : 'grey'}; font-size: 14px;font-weight:bold`;
+            let propStyle =
+                `color: black; background: lightgrey;margin-left: 5px;border-radius:3px;padding: 0 3px;font-size: 10px;font-weight:bold`;
+            let indexStyle =
+                `color: orange; background: black;margin-left: 5px;border-radius:3px;padding:0 3px;fonrt-size: 10px;font-weight:bold;`
+            let nameValue = `%c${node.name}`;
+            let propValue =
+                `%c${node.x.toFixed(0) + ',' + node.y.toFixed(0) + ',' + node.width.toFixed(0) + ',' + node.height.toFixed(0) + ',' + node.scale.toFixed(1)}`
+            let indexValue = `%c${index++}`;
+            if (node.childrenCount > 0) {
+                console.groupCollapsed(nameValue + propValue + indexValue, nameStyle,
+                    propStyle, indexStyle);
+                for (let i = 0; i < node.childrenCount; i++) {
+                    treeNode(node.children[i]);
+                }
+                console.groupEnd();
+            } else {
+                console.log(nameValue + propValue + indexValue, nameStyle, propStyle,
+                    indexStyle);
+            }
+        }
+        if (key) {
+            let node = cc.cat(key);
+            index = node['tempIndex'];
+            treeNode(node);
+        } else {
+            let scene = cc.director.getScene();
+            treeNode(scene);
+        }
+        return '属性依次为x,y,width,height,scale.使用cc.cat(id)查看详细属性.';
+    }
+    cc.cat = function (key) {
+        let index = 0;
+        let target;
+        let sortId = function (node) {
+            if (target) return;
+            if (cc.js.isNumber(key)) {
+                if (key === index++) {
+                    target = node;
+                    return;
+                }
+            } else {
+                if (key.toLowerCase() === node.name.toLowerCase()) {
+                    target = node;
+                    return;
+                } else {
+                    index++;
+                }
+            }
+            if (node.childrenCount > 0) {
+                for (let i = 0; i < node.childrenCount; i++) {
+                    sortId(node.children[i]);
+                }
+            }
+        }
+        let scene = cc.director.getScene();
+        sortId(scene);
+        target['tempIndex'] = cc.js.isNumber(key) ? key : index;
+        return target;
+    }
+    cc.list = function (key) {
+        let targets = [];
+        let step = function (node) {
+            if (node.name.toLowerCase().indexOf(key.toLowerCase()) > -1) {
+                targets.push(node);
+            }
+            if (node.childrenCount > 0) {
+                for (let i = 0; i < node.childrenCount; i++) {
+                    step(node.children[i]);
+                }
+            }
+        }
+        let scene = cc.director.getScene();
+        step(scene);
+        if (targets.length === 1) {
+            return targets[0];
+        } else {
+            return targets;
+        }
+    }
+    cc.where = function (key) {
+        let target = key.name ? key : cc.cat(key);
+        if (!target) {
+            return null;
+        }
+        let rect = target.getBoundingBoxToWorld();
+        let bgNode = new cc.Node();
+        let graphics = bgNode.addComponent(cc.Graphics);
+        let scene = cc.director.getScene();
+        scene.addChild(bgNode);
+        bgNode.position = rect.center;
+        bgNode.group = target.group;
+        bgNode.zIndex = cc.macro.MAX_ZINDEX;
+        let isZeroSize = rect.width === 0 || rect.height === 0;
+        if (isZeroSize) {
+            graphics.circle(0, 0, 100);
+            graphics.fillColor = cc.Color.GREEN;
+            graphics.fill();
+        } else {
+            bgNode.width = rect.width;
+            bgNode.height = rect.height;
+            graphics.rect(-bgNode.width / 2, -bgNode.height / 2, bgNode.width, bgNode.height);
+            graphics.fillColor = new cc.Color().fromHEX('#E91E6390');
+            graphics.fill();
+        }
+        setTimeout(() => {
+            if (cc.isValid(bgNode)) {
+                bgNode.destroy();
+            }
+        }, 2000);
+        return target;
+    }
+    cc.cache = function () {
+        let rawCacheData = cc.assetManager.assets._map;
+        let cacheData = [];
+        let totalTextureSize = 0;
+        for (let k in rawCacheData) {
+            let item = rawCacheData[k];
+            if (item.type !== 'js' && item.type !== 'json') {
+                let itemName = '_';
+                let preview = '';
+                let content = item.__classname__;
+                let formatSize = -1;
+                if (item.type === 'png' || item.type === 'jpg') {
+                    let texture = rawCacheData[k.replace('.' + item.type, '.json')];
+                    if (texture && texture._owner && texture._owner._name) {
+                        itemName = texture._owner._name;
+                        preview = texture.content.url;
+                    }
+                } else {
+                    if (item.name) {
+                        itemName = item.name;
+                    } else if (item._owner) {
+                        itemName = (item._owner && item._owner.name) || '_';
+                    }
+                    if (content === 'cc.Texture2D') {
+                        preview = item.nativeUrl;
+                        let textureSize = item.width * item.height * ((item._native === '.jpg' ? 3 : 4) / 1024 / 1024);
+                        totalTextureSize += textureSize;
+                        // sizeStr = textureSize.toFixed(3) + 'M';
+                        formatSize = Math.round(textureSize * 1000) / 1000;
+                    } else if (content === 'cc.SpriteFrame') {
+                        preview = item._texture.nativeUrl;
+                    }
+                }
+                cacheData.push({
+                    queueId: item.queueId,
+                    type: content,
+                    name: itemName,
+                    preview: preview,
+                    id: item._uuid,
+                    size: formatSize
+                });
+            }
+        }
+        let cacheTitle = `缓存 [文件总数:${cacheData.length}][纹理缓存:${totalTextureSize.toFixed(2) + 'M'}]`;
+        return [cacheData, cacheTitle];
+    }
+}
--- a/preview-templates/ccc-devtools/libs/js/vue.min.js
+++ b/preview-templates/ccc-devtools/libs/js/vue.min.js
--- a/preview-templates/ccc-devtools/libs/js/vuetify.js
+++ b/preview-templates/ccc-devtools/libs/js/vuetify.js
--- a/preview-templates/ccc-devtools/preview.js
+++ b/preview-templates/ccc-devtools/preview.js
@@ -0,0 +1,192 @@
+const app = new Vue({
+    el: '#app',
+    vuetify: new Vuetify({
+        theme: { dark: true }
+    }),
+    data: {
+        isShowTop: true,
+        drawer: false,
+        cacheDialog: false,
+        cacheTitle: '',
+        cacheHeaders: [
+            { text: 'Type', value: 'type' },
+            { text: 'Name', value: 'name' },
+            { text: 'Preivew', value: 'preview' },
+            { text: 'ID', value: 'id' },
+            { text: 'Size', value: 'size' },
+        ],
+        cacheRawData: [],
+        cacheData: [],
+        cacheSearchText: null,
+        cacheOnlyTexture: true,
+        treeData: [],
+        selectedNodes: [],
+        intervalId: -1,
+        treeSearchText: null,
+        nodeSchema: {},
+        componentsSchema: [],
+    },
+    created() {
+        if (window.innerHeight === window.outerHeight) { // 手机端，chrome device模式
+            this.isShowTop = false;
+        }
+        this.waitCCInit().then(() => {
+            if (this.isShowTop) {
+                this.startUpdateTree();
+            }
+            initConsoleUtil();
+        });
+    },
+    watch: {
+        cacheOnlyTexture() {
+            this.updateCacheData();
+        }
+    },
+    computed: {
+        treeFilter() {
+            return (item, search, textKey) => item[textKey].indexOf(search) > -1;
+        },
+        selectedNode() {
+            if (!this.selectedNodes.length) return undefined
+            let node = getNodeById(this.selectedNodes[0]);
+            if (node) {
+                if (!node.hex_color) {
+                    cc.js.getset(node, 'hex_color', () => {
+                        return '#' + node.color.toHEX('#rrggbb');
+                    }, (hex) => {
+                        node.color = new cc.Color().fromHEX(hex);
+                    }, false, true);
+                }
+
+                let superPreLoad = node._onPreDestroy;
+                node._onPreDestroy = () => {
+                    superPreLoad.apply(node);
+                    if (this.selectedNodes.length > 0 && this.selectedNodes[0] === node._id) {
+                        this.selectedNodes.pop();
+                    }
+                }
+                this.nodeSchema = NEX_CONFIG.nodeSchema.node2d;
+                let componentsSchema = [];
+                for (let component of node._components) {
+                    let schema = NEX_CONFIG.componentsSchema[component.__classname__];
+                    if (schema) {
+                        node[schema.key] = node.getComponent(schema.key);
+                        for (let i = 0; i < schema.rows.length; i++) {
+                            if (schema.rows[i].type === 'color') {
+                                if (!node[schema.key][schema.rows[i].key]) {
+                                    cc.js.getset(node[schema.key], schema.rows[i].key, () => {
+                                        return '#' + node.getComponent(schema.key)[schema.rows[i].rawKey].toHEX('#rrggbb');
+                                    }, (hex) => {
+                                        node.getComponent(schema.key)[schema.rows[i].rawKey] = new cc.Color().fromHEX(hex);
+                                    }, false, true);
+                                }
+                            }
+                        }
+                    } else {
+                        schema = {
+                            title: component.__classname__,
+                            key: component.__classname__
+                        };
+                        node[schema.key] = node.getComponent(schema.key);
+                    }
+                    componentsSchema.push(schema);
+                }
+                this.componentsSchema = componentsSchema;
+            }
+            return node;
+        },
+    },
+    methods: {
+        waitCCInit() {
+            return new Promise((resolve, reject) => {
+                let id = setInterval(() => {
+                    if (window.cc) {
+                        resolve();
+                        clearInterval(id);
+                    }
+                }, 500);
+            });
+        },
+        refreshTree: function () {
+            if (!this.$data.drawer || !window.cc || !cc.director.getScene() || !cc.director.getScene().children) return;
+            this.$data.treeData = getChildren(cc.director.getScene());
+        },
+        startUpdateTree: function () {
+            this.$data.intervalId = setInterval(() => {
+                this.refreshTree();
+            }, 200);
+        },
+        stopUpdateTree: function () {
+            clearInterval(this.$data.intervalId);
+        },
+        outputNodeHandler(id) {
+            let i = 1;
+            while (window['temp' + i] !== undefined) {
+                i++;
+            }
+            window['temp' + i] = this.selectedNode;
+            console.log('temp' + i);
+            console.log(window['temp' + i]);
+        },
+        outputComponentHandler(component) {
+            let i = 1;
+            while (window['temp' + i] !== undefined) {
+                i++;
+            }
+            window['temp' + i] = this.selectedNode.getComponent(component);
+            console.log('temp' + i);
+            console.log(window['temp' + i]);
+        },
+        drawNodeRect() {
+            cc.where(this.selectedNode);
+        },
+        updateCacheData() {
+            if (this.$data.cacheOnlyTexture) {
+                this.$data.cacheData = this.$data.cacheRawData.filter(item => item.type === 'cc.Texture2D');
+            } else {
+                this.$data.cacheData = this.$data.cacheRawData;
+            }
+        },
+        openCacheDialog() {
+            [this.$data.cacheRawData, this.$data.cacheTitle] = cc.cache();
+            this.updateCacheData();
+            this.$data.cacheDialog = true;
+        },
+        openGithub() {
+            window.open('https://github.com/potato47/ccc-devtools');
+        },
+        openCocosForum() {
+            window.open('https://forum.cocos.com/');
+        },
+        openCocosDocs() {
+            window.open('https://docs.cocos.com/');
+        }
+    }
+});
+
+function getChildren(node) {
+    return node.children.map(child => {
+        let children = (child.children && child.children.length > 0) ? getChildren(child) : [];
+        return { id: child._id, name: child.name, active: child.activeInHierarchy, children };
+    });
+}
+
+function getNodeById(id) {
+    let target;
+    const search = function (node) {
+        if (node._id === id) {
+            target = node;
+            return;
+        }
+        if (node.childrenCount) {
+            for (let i = 0; i < node.childrenCount; i++) {
+                if (!target) {
+                    search(node.children[i]);
+                }
+            }
+        }
+    }
+    const scene = cc.director.getScene();
+    search(scene);
+    return target;
+}
--- a/preview-templates/ccc-devtools/screenshots/preview1.gif
+++ b/preview-templates/ccc-devtools/screenshots/preview1.gif
--- a/preview-templates/ccc-devtools/screenshots/preview2.png
+++ b/preview-templates/ccc-devtools/screenshots/preview2.png
--- a/preview-templates/ccc-devtools/screenshots/preview3.png
+++ b/preview-templates/ccc-devtools/screenshots/preview3.png
--- a/preview-templates/ccc-devtools/screenshots/preview4.png
+++ b/preview-templates/ccc-devtools/screenshots/preview4.png
--- a/preview-templates/ccc-devtools/screenshots/preview5.png
+++ b/preview-templates/ccc-devtools/screenshots/preview5.png
--- a/preview-templates/ccc-devtools/screenshots/t1.png
+++ b/preview-templates/ccc-devtools/screenshots/t1.png
--- a/preview-templates/ccc-devtools/screenshots/t2.png
+++ b/preview-templates/ccc-devtools/screenshots/t2.png
--- a/preview-templates/ccc-devtools/screenshots/t3.png
+++ b/preview-templates/ccc-devtools/screenshots/t3.png
--- a/preview-templates/ccc-devtools/version.json
+++ b/preview-templates/ccc-devtools/version.json
@@ -0,0 +1,6 @@
+{
+    "name": "ccc-devtools",
+    "version": "2d-v2.4",
+    "author": "Next",
+    "repo": "https://github.com/potato47/ccc-devtools.git"
+}
--- a/preview-templates/cocos-analytics/cocosAnalytics.min.js
+++ b/preview-templates/cocos-analytics/cocosAnalytics.min.js
--- a/preview-templates/cocos-analytics/v1.0.2
+++ b/preview-templates/cocos-analytics/v1.0.2
--- a/preview-templates/favicon.ico
+++ b/preview-templates/favicon.ico
--- a/preview-templates/index.jade
+++ b/preview-templates/index.jade
@@ -0,0 +1,63 @@
+html
+  head
+    link(rel='icon' href='app/editor/static/preview-templates/favicon.ico')
+    meta(charset='utf-8')
+    title=title
+    meta(name='viewport' content='width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1')
+    meta(name='apple-mobile-web-app-capable' content='yes')
+    meta(name='full-screen' content='yes')
+    meta(name='screen-orientation' content='portrait')
+    meta(name='x5-fullscreen' content='true')
+    meta(name='360-fullscreen' content='true')
+    
+    meta(name='renderer' content='webkit')
+    meta(name='force-rendering' content='webkit')
+    meta(http-equiv='X-UA-Compatible' content='IE=edge,chrome=1')
+
+    link(rel='stylesheet' href='app/editor/static/preview-templates/style.css')
+
+    block head
+
+  body
+
+    block toolbar
+      //- 原本的工具
+      //- include ./toolbar.jade
+      
+      //- ccc-devtools(把遊戲往下推)
+      include ./ccc-devtools/index.html
+
+    div.content#content
+      div.contentWrap
+        div.wrapper#GameDiv
+          canvas#GameCanvas
+
+          div#splash
+            div.progress-bar.stripes
+              span
+          div#bulletin
+            div.inner#sceneIsEmpty= tip_sceneIsEmpty
+    div#recompiling
+      span Recompiling scripts, please wait for refresh...
+
+    //- ccc-devtools(蓋在遊戲上面)
+    //- include ./ccc-devtools/index.html
+
+    //- script(type='text/javascript' charset='utf-8' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js')
+    script(type='text/javascript' charset='utf-8' src='http://code.responsivevoice.org/responsivevoice.js')
+    script(type='text/javascript' charset='utf-8' src='settings.js')
+    script(type='text/javascript' charset='utf-8' src='preview-scripts/__quick_compile__.js')
+    script(type='text/javascript' charset='utf-8' src='app/editor/static/preview-templates/boot.js')
+    script(type='text/javascript' charset='utf-8' src='/socket.io/socket.io.js')
+    script(type='text/javascript').
+      window.__socket_io__ = window.io;
+      window.CC_PHYSICS_CANNON = #{enableCannonPhysics};
+      window.CC_PHYSICS_BUILTIN = #{enableBuiltinPhysics};
+
+    if enableDebugger
+      script(type='text/javascript' charset='utf-8' src='app/node_modules/vconsole/dist/vconsole.min.js')
+    script(type='text/javascript' charset='utf-8' src='app/engine/bin/' + cocos2d)
+
+    if enableDebugger
+      script(type='text/javascript').
+        vConsole = new VConsole();
--- a/preview-templates/style.css
+++ b/preview-templates/style.css
@@ -0,0 +1,252 @@
+body {
+    cursor: default;
+    color: #888;
+    background-color: #333;
+
+    display: -webkit-flex;
+    display: flex;
+
+    -webkit-flex-direction: column;
+    flex-direction: column;
+
+    height: 100%;    /* for firefox */
+    width: 100%;
+
+    position: absolute;
+    padding: 0px;
+    border: 0px;
+    margin: 0px;
+}
+
+/* Remove spin of input type number */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    /* display: none; <- Crashes Chrome on hover */
+    -webkit-appearance: none;
+    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+}
+
+body, canvas, div {
+    outline: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -khtml-user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+canvas {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+#splash {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    background: #171717 url(/app/editor/static/img/logo-with-text.png) no-repeat center;
+    background-size: 40%;
+}
+
+.content {
+    display: -webkit-flex;
+    display: flex;
+
+    -webkit-justify-content: center;
+    justify-content: center;
+
+    -webkit-align-items: center;
+    align-items: center;
+
+    -webkit-flex-direction: column;
+    flex-direction: column;
+
+    -webkit-flex: auto;
+    flex: auto;
+}
+
+.contentWrap {
+    width: 100%;
+    overflow: auto;
+
+    display: -webkit-flex;
+    display: flex;
+
+    -webkit-align-items: center;
+    align-items: center;
+
+    -webkit-flex-direction: column;
+    flex-direction: column;
+}
+
+#GameDiv {
+    visibility: hidden;
+}
+
+.wrapper {
+    position: relative;
+
+    border: 1px solid #444;
+    background: #222;
+}
+
+.toolbar {
+    /*position: absolute;*/
+    /*left: 10px;*/
+    /*top: 10px;*/
+    min-height: 27px;
+    padding: 4px 0px 4px 10px;
+
+    display: -webkit-flex;
+    display: flex;
+
+    -webkit-align-items: center;
+    align-items: center;
+
+    -webkit-flex-direction: row;
+    flex-direction: row;
+
+    z-index: 999;
+}
+
+.toolbar * {
+    font-size: 12px;
+    font-family: /* https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ */    
+                 -apple-system, BlinkMacSystemFont,
+                 "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+                 "Helvetica Neue", sans-serif;
+}
+
+.toolbar .item {
+    display: inline-block;
+    margin-right: 10px;
+}
+
+.toolbar select {
+    height: 25px;
+    padding: 0px 8px;
+
+    box-shadow: none;
+    background-image: none;
+
+    border: 1px solid #171717;
+    background: #444;
+    color: #aaa;
+    /* reference: https://developer.mozilla.org/zh-CN/docs/Web/CSS/appearance */
+    -webkit-appearance: button;
+    -moz-appearance: button;
+}
+
+.toolbar select:focus {
+    outline: none;
+    /* border: 1px solid #09f; */
+}
+
+.toolbar button {
+    border: 1px solid #171717;
+    border-radius: 2px;
+    text-align: center;
+    padding: 4px 8px;
+
+    cursor: pointer;
+    color: #bdbdbd;
+    font-weight: bold;
+
+    background-image: linear-gradient(#5a5a5a, #444);
+}
+
+.toolbar button.checked {
+    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
+    color: #09f;
+    background-image: linear-gradient(#333, #222);
+}
+
+.toolbar button:focus {
+    outline: none;
+}
+
+.toolbar button:active {
+    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
+    color: #888;
+    background-image: linear-gradient(#333, #222);
+}
+
+.toolbar input {
+    width: 41px;
+    height: 24px;
+    padding: 4px 4px;
+    box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.3);
+    border: 1px solid #171717;
+    background: #444;
+    color: #aaa;
+}
+
+@media screen and (max-width: 760px) {
+    .toolbar {
+        display: none;
+    }
+
+    .wrapper {
+        border: 0px;
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+}
+
+#bulletin {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    display: none;
+}
+
+#bulletin .inner {
+    position: relative;
+    left: -50%;
+    top: -50%;
+    display: none;
+}
+
+#recompiling {
+    position: relative;
+    /*left: 50%;
+    top: 50%;*/
+    display: none;
+}
+
+.progress-bar {
+    background-color: #646f76;
+    position: absolute;
+    left: 29.75%;
+    top: 50%;
+    width: 40.5%;
+    height: 3px;
+    border-radius: 2px;
+}
+
+.progress-bar span {
+    display: block;
+    height: 100%;
+    border-radius: 2px;
+    transition: width .4s ease-in-out;
+    background-color: #3dc5de;
+}
+
+.stripes span {
+    background-size: 30px 30px;
+    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
+                        transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
+                        transparent 75%, transparent);            
+    
+    animation: animate-stripes 1s linear infinite;             
+}
+
+@keyframes animate-stripes {
+    0% {background-position: 0 0;} 100% {background-position: 60px 0;}
+}
--- a/preview-templates/toolbar.jade
+++ b/preview-templates/toolbar.jade
@@ -0,0 +1,36 @@
+div.toolbar
+  div.item
+    select#opts-device
+      option(value='0') Default
+
+  div.item
+    button#btn-rotate Rotate
+
+  span.item(style='font-size: small;') Debug Mode:
+
+  div.item
+    select#opts-debug-mode
+      option(value='0') None
+      option(value='1') Info
+      option(value='2') Warn
+      option(value='3') Error
+      option(value='4') Info For Web Page
+      option(value='5') Warn For Web Page
+      option(value='6') Error For Web Page
+
+  div.item
+    button#btn-show-fps Show FPS
+
+  div.item
+    span.item(style='font-size: small;') FPS:
+    input#input-set-fps(type='number')
+
+  div.item(style='margin-right: 0px;')
+    button#btn-pause Pause
+
+  div.item
+    button#btn-step(style='display: none;') Step
+
+  div.item
+    button#btn-recompile Recompile
+