Dev: Init tools

.gitignore

@@ -1,2 +1,3 @@
 /.idea/
-/node_modules/
+/node_modules/
+/dist/eruda.min.js

package.json

@@ -4,7 +4,8 @@
   "description": "Console for mobile JavaScript",
   "main": "index.js",
   "scripts": {
-    "build": "webpack",
+    "dev": "webpack --watch",
+    "release": "webpack & uglifyjs dist/eruda.js -o dist/eruda.min.js",
     "server": "nws -p 3000"
   },
   "repository": {
@@ -23,13 +24,18 @@
   },
   "homepage": "https://github.com/liriliri/eruda#readme",
   "devDependencies": {
+    "autoprefixer": "^6.3.3",
     "babel-core": "^6.6.5",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
     "css-loader": "^0.23.1",
     "handlebars": "^4.0.5",
     "handlebars-loader": "^1.1.4",
+    "json-loader": "^0.5.4",
+    "modernizr": "^3.3.1",
     "node-sass": "^3.4.2",
+    "postcss-loader": "^0.8.1",
+    "precss": "^1.4.0",
     "sass-loader": "^3.1.2"
   },
   "dependencies": {

src/Console/Console.es6

@@ -1,17 +1,19 @@
 import Log from './Log.es6'
+import Tool from '../DevTools/Tool.es6'
 import util from '../util'
 
-require('!style!css!sass!./Console.scss');
+require('./Console.scss');
 
-export default class Console
+export default class Console extends Tool
 {
     constructor()
     {
+        super();
         this.name = 'console';
     }
     init($el)
     {
-        this._$el = $el;
+        super.init($el);
 
         this._appendTpl();
         this._initLog();
@@ -41,7 +43,7 @@ export default class Console
 
             if (e.keyCode === 13)
             {
-                var jsInput = $jsInput.val();
+                var jsInput = $jsInput.text();
 
                 if (util.trim(jsInput) === '') return;
 
@@ -53,7 +55,7 @@ export default class Console
                     log.error(e);
                 }
 
-                $jsInput.val('');
+                $jsInput.html('');
             }
         });
     }

src/Console/Console.hbs

@@ -1,2 +1,2 @@
 <div class="logs"></div>
-<input class="js-input" type="text"></input>
+<div class="js-input" contenteditable="true"></div>

src/Console/Console.scss

@@ -1,16 +1,18 @@
 #eruda { .dev-tools { .tools {
     .console {
+        padding-bottom: 30px;
         .js-input {
             position: absolute;
             left: 0;
             bottom: 0;
             width: 100%;
             height: 30px;
-            box-shadow: 0 -1px 0 0 #ccc;
             line-height: 30px;
             border: none;
+            border-top: 1px solid #b4b4b4;
             outline: none;
-            padding: 0 4px;
+            padding: 0 10px;
+            overflow: hidden;
         }
     }
 } } }

src/Console/Log.es6

@@ -1,6 +1,6 @@
 import util from '../util'
 
-require('!style!css!sass!./Log.scss');
+require('./Log.scss');
 
 function errToStr(err)
 {

src/Console/Log.scss

@@ -1,11 +1,12 @@
 #eruda { .dev-tools { .tools { .console {
     .logs {
-        height: calc(100% - 30px);
-        overflow: scroll;
+        height: 100%;
+        overflow-x: hidden;
+        overflow-y: scroll;
         li {
-            padding: 4px;
+            padding: 10px;
             &.log, &.output {
-                border-bottom: 1px solid #ccc;
+                border-bottom: 1px solid #b4b4b4;
             }
             &.error {
                 background: #fff0f0;

src/DevTools/DevTools.es6

@@ -1,6 +1,7 @@
 import NavBar from './NavBar.es6'
+import util from '../util'
 
-require('!style!css!sass!./DevTools.scss');
+require('./DevTools.scss');
 
 export default class DevTools
 {
@@ -13,6 +14,66 @@ export default class DevTools
         this._appendTpl();
         this._initNavBar();
     }
+    show()
+    {
+        this._isShow = true;
+
+        this._$el.addClass('show').rmClass('hide');
+
+        return this;
+    }
+    hide()
+    {
+        this._isShow = false;
+
+        this._$el.addClass('hide').rmClass('show');
+        setTimeout(() => this._$el.rmClass('hide'), 300);
+
+        return this;
+    }
+    toggle()
+    {
+        return this._isShow ? this.hide() : this.show();
+    }
+    add(tool)
+    {
+        var name = tool.name;
+
+        this._$tools.append('<div class="' + name + ' tool"></div>');
+        tool.init(this._$tools.find('.' + name));
+        tool.active = false;
+        this._tools[name] = tool;
+
+        this._navBar.add(name);
+
+        return this;
+    }
+    get(name)
+    {
+        var tool = this._tools[name];
+
+        if (tool) return tool;
+    }
+    showTool(name)
+    {
+        var tools = this._tools;
+
+        var tool = tools[name];
+        if (!tool) return;
+
+        util.each(tools, (tool) =>
+        {
+            tool.active = false;
+            tool.hide();
+        });
+
+        tool.active = true;
+        tool.show();
+
+        this._navBar.activeTool(name);
+
+        return this;
+    }
     _appendTpl()
     {
         var $parent = this._$parent;
@@ -24,31 +85,10 @@ export default class DevTools
     }
     _initNavBar()
     {
-        this._navBar = new NavBar(this._$el.find('.nav-bar'));
-    }
-    show()
-    {
-        this._isShow = true;
-
-        this._$el.addClass('show').rmClass('hide');
-    }
-    hide()
-    {
-        this._isShow = false;
-
-        this._$el.addClass('hide').rmClass('show');
-        setTimeout(() => this._$el.rmClass('hide'), 3000);
-    }
-    toggle()
-    {
-        this._isShow ? this.hide() : this.show();
-    }
-    add(tool)
-    {
-        var name = tool.name;
-
-        this._$tools.append('<div class="' + name + ' tool"></div>');
-        tool.init(this._$tools.find('.' + name));
-        this._tools[name] = tool;
+        this._navBar = new NavBar(this._$el.find('.nav-bar ul'));
+        this._navBar.on('showTool', (name) =>
+        {
+            this.showTool(name);
+        });
     }
 }

src/DevTools/DevTools.hbs

@@ -1,4 +1,4 @@
 <div class="dev-tools">
-    <div class="nav-bar"></div>
+    <div class="nav-bar"><ul></ul></div>
     <div class="tools"></div>
 </div>

src/DevTools/DevTools.scss

@@ -3,6 +3,7 @@
         position: absolute;
         width: 100%;
         height: 100%;
+        padding-top: 50px;
         background: #fff;
         z-index: 500;
         display: none;
@@ -15,7 +16,7 @@
             animation: hide-menu .3s linear both;
         }
         .tools {
-            height: calc(100% - 50px);
+            height: 100%;
             width: 100%;
             position: relative;
             overflow: scroll;

src/DevTools/HomeBtn.es6

@@ -2,7 +2,7 @@ import util from '../util'
 
 var Draggabilly = require('draggabilly');
 
-require('!style!css!sass!./HomeBtn.scss');
+require('./HomeBtn.scss');
 
 export default class HomeBtn
 {

src/DevTools/HomeBtn.scss

@@ -7,8 +7,8 @@
         border-radius: 10px;
         padding-top: 10px;
         position: relative;
-        top: 4px;
-        left: 4px;
+        top: 200px;
+        left: 10px;
         z-index: 1000;
         transition: opacity .3s;
         .circle {

src/DevTools/NavBar.es6

@@ -1,15 +1,46 @@
-require('!style!css!sass!./NavBar.scss');
+import util from '../util'
+
+require('./NavBar.scss');
 
 export default class NavBar
 {
     constructor($el)
     {
         this._$el = $el;
+        this._len = 0;
 
-        this.render();
+        this._bindEvent();
+
+        util.Emitter.mixin(this);
     }
-    render()
+    add(name)
     {
-        this._$el.append(require('./NavBar.hbs')());
+        this._len++;
+        this._$el.append('<li>' + name + '</li>')
+                 .css({
+                     width: this._len * 80
+                 });
+    }
+    activeTool(name)
+    {
+        var $el = this._$el;
+
+        $el.find('li').each(function ()
+        {
+            var $this = util.$(this);
+
+            $this.text() === name ? $this.addClass('active') : $this.rmClass('active');
+        });
+    }
+    _bindEvent()
+    {
+        var $el = this._$el;
+
+        var self = this;
+
+        $el.on('click', 'li', function ()
+        {
+            self.emit('showTool', util.$(this).text());
+        });
     }
 }

src/DevTools/NavBar.hbs

@@ -1,3 +0,0 @@
-<ul>
-    <li class="active">Console</li>
-</ul>

src/DevTools/NavBar.scss

@@ -1,16 +1,23 @@
 #eruda { .dev-tools {
     .nav-bar {
-        height: 50px;
-        overflow: hidden;
-        box-shadow: 0 1px 0 0 #ccc;
+        height: 51px;
+        overflow-y: scroll;
+        position: absolute;
+        width: 100%;
+        left: 0;
+        top: 0;
+        border-bottom: 1px solid #ccc;
+        z-index: 100;
         ul {
-            display: flex;
+            font-size: 0;
             li {
-                float: left;
+                display: inline-block;
                 height: 50px;
                 line-height: 50px;
+                width: 80px;
+                font-size: 15px;
                 text-align: center;
-                flex-grow: 1;
+                text-transform: capitalize;
                 &.active {
                     color: #76a2ee;
                     border-bottom: 3px solid #76a2ee;

src/DevTools/Tool.es6

@@ -0,0 +1,15 @@
+export default class Tool
+{
+    init($el)
+    {
+        this._$el = $el;
+    }
+    show()
+    {
+        this._$el.show();
+    }
+    hide()
+    {
+        this._$el.hide();
+    }
+}

src/Elements/Elements.es6

@@ -0,0 +1,14 @@
+import Tool from '../DevTools/Tool.es6'
+
+export default class Elements extends Tool
+{
+    constructor()
+    {
+        super();
+        this.name = 'elements';
+    }
+    init($el)
+    {
+        super.init($el);
+    }
+}

src/Features/Features.es6

@@ -0,0 +1,52 @@
+import Tool from '../DevTools/Tool.es6'
+import util from '../util'
+import modernizr from './modernizr'
+
+require('./Features.scss');
+
+var featureList = require('./featureList.json');
+
+var featureNames = featureList['feature-detects'],
+    specialNames = featureList['special-names'];
+
+export default class Features extends Tool
+{
+    constructor()
+    {
+        super();
+        this.name = 'features';
+        this._tpl = require('./Features.hbs');
+        this._features = {};
+    }
+    init($el)
+    {
+        super.init($el);
+
+        this._initFeatures();
+    }
+    _initFeatures()
+    {
+        util.each(featureNames, (feature) =>
+        {
+            if (specialNames[feature]) feature = specialNames[feature];
+            feature = feature.replace(/\//g, '');
+
+            modernizr.on(feature, (result) =>
+            {
+                this._add(feature, result);
+            });
+        });
+    }
+    _add(name, result)
+    {
+        this._features[name] = result;
+
+        this._render();
+    }
+    _render()
+    {
+        this._$el.html(this._tpl({
+            features: this._features
+        }));
+    }
+}

src/Features/Features.hbs

@@ -0,0 +1,5 @@
+<ul>
+    {{#each features}}
+        <li class="{{#if this}}ok{{/if}}">{{@key}}</li>
+    {{/each}}
+</ul>

src/Features/Features.scss

@@ -0,0 +1,16 @@
+#eruda { .dev-tools { .tools {
+    .features {
+        li {
+            width: 50%;
+            float: left;
+            padding: 10px;
+            text-align: center;
+            color: #fff;
+            background: #eda29b;
+            border: 1px solid #fff;
+            &.ok {
+                background: #8de191;
+            }
+        }
+    }
+} } }

src/Features/build.js

@@ -0,0 +1,10 @@
+var modernizr = require('modernizr'),
+    fs = require('fs');
+
+var featureList = require('./featureList.json');
+
+modernizr.build(featureList, function (result)
+{
+    result += '\nmodule.exports = Modernizr;';
+    fs.writeFile('./modernizr.js', result, 'utf8');
+});

src/Features/featureList.json

@@ -0,0 +1,70 @@
+{
+    "feature-detects": [
+        "audio",
+        "canvas",
+        "cookies",
+        "css/animations",
+        "css/boxshadow",
+        "css/boxsizing",
+        "css/calc",
+        "css/flexbox",
+        "css/transforms",
+        "css/transforms3d",
+        "css/transitions",
+        "es6/promises",
+        "file/api",
+        "file/filesystem",
+        "flash",
+        "forms/placeholder",
+        "fullscreen-api",
+        "geolocation",
+        "hashchange",
+        "history",
+        "img/webp",
+        "img/webp-alpha",
+        "indexeddb",
+        "json",
+        "network/fetch",
+        "network/xhr2",
+        "notification",
+        "performance",
+        "pointerevents",
+        "queryselector",
+        "script/async",
+        "script/defer",
+        "serviceworker",
+        "storage/localstorage",
+        "storage/sessionstorage",
+        "storage/websqldatabase",
+        "style/scoped",
+        "svg",
+        "templatestrings",
+        "touchevents",
+        "typed-arrays",
+        "url/bloburls",
+        "url/data-uri",
+        "video",
+        "webgl",
+        "websockets"
+    ],
+    "special-names": {
+        "css/boxshadow": "boxshadow",
+        "css/boxsizing": "boxsizing",
+        "css/flexbox": "flexbox",
+        "es6/promises": "promises",
+        "file/api": "filereader",
+        "file/filesystem": "filesystem",
+        "forms/placeholder": "placeholder",
+        "fullscreen-api": "fullscreen",
+        "img/webp": "webp",
+        "img/webp-alpha": "webpalpha",
+        "network/fetch": "fetch",
+        "network/xhr2": "xhr2",
+        "storage/localstorage": "localstorage",
+        "storage/sessionstorage": "sessionstorage",
+        "storage/websqldatabase": "websqldatabase",
+        "typed-arrays": "typedarrays",
+        "url/bloburls": "bloburls",
+        "url/data-uri": "datauri"
+    }
+}

src/Info/Info.es6

@@ -0,0 +1,46 @@
+import Tool from '../DevTools/Tool.es6'
+import util from '../util'
+import defInfo from './defInfo.es6'
+
+require('./Info.scss');
+
+export default class Info extends Tool
+{
+    constructor()
+    {
+        super();
+        this.name = 'info';
+        this._tpl = require('./Info.hbs');
+        this._msgs = [];
+    }
+    init($el)
+    {
+        super.init($el);
+
+        this._addDefInfo();
+    }
+    add(name, val)
+    {
+        this._msgs.push({
+            name: name,
+            val: val
+        });
+
+        this._render();
+
+        return this;
+    }
+    _addDefInfo()
+    {
+        util.each(defInfo, (info) =>
+        {
+            this.add(info.name, info.val);
+        });
+    }
+    _render()
+    {
+        this._$el.html(this._tpl({
+            messages: this._msgs
+        }));
+    }
+}

src/Info/Info.scss

@@ -0,0 +1,14 @@
+#eruda { .dev-tools { .tools {
+    .info {
+        li {
+            .title, .content {
+                padding: 10px;
+            }
+            .title {
+                color: #fff;
+                background: #b4b4b4;
+                font-size: 20px;
+            }
+        }
+    }
+} } }

src/Info/defInfo.es6

@@ -0,0 +1,14 @@
+export default [
+    {
+        name: 'Location',
+        val: location.href
+    },
+    {
+        name: 'User Agent',
+        val: navigator.userAgent
+    },
+    {
+        name: 'Help',
+        val: 'Use eruda.get("info").add("name", "value") to add your own custom info.'
+    }
+];

src/Info/info.hbs

@@ -0,0 +1,8 @@
+<ul>
+    {{#each messages}}
+        <li>
+            <h2 class="title">{{name}}</h2>
+            <p class="content">{{val}}</p>
+        </li>
+    {{/each}}
+</ul>

src/Network/Network.es6

@@ -0,0 +1,14 @@
+import Tool from '../DevTools/Tool.es6'
+
+export default class Network extends Tool
+{
+    constructor()
+    {
+        super();
+        this.name = 'network';
+    }
+    init($el)
+    {
+        super.init($el);
+    }
+}

src/Resources/Resources.es6

@@ -0,0 +1,47 @@
+import Tool from '../DevTools/Tool.es6'
+import util from '../util'
+
+require('./Resources.scss');
+
+export default class Resources extends Tool
+{
+    constructor()
+    {
+        super();
+        this.name = 'resources';
+        this._tpl = require('./Resources.hbs');
+    }
+    init($el)
+    {
+        super.init($el);
+
+        this.refresh();
+    }
+    refresh()
+    {
+        var localStoreData = [],
+            cookieData = [];
+
+        util.each(localStorage, function (val, key)
+        {
+            localStoreData.push({
+                key: key,
+                val: val
+            });
+        });
+
+        util.each(document.cookie.split(';'), function (val)
+        {
+            val = val.split('=');
+            cookieData.push({
+                key: val[0],
+                val: decodeURIComponent(val[1])
+            });
+        });
+
+        this._$el.html(this._tpl({
+            localStoreData: localStoreData,
+            cookieData: cookieData
+        }));
+    }
+}

src/Resources/Resources.hbs

@@ -0,0 +1,38 @@
+<div>
+    <h2 class="title">LocalStorage</h2>
+    <table>
+        <tbody>
+            {{#if localStoreData}}
+                {{#each localStoreData}}
+                    <tr>
+                        <td>{{key}}</td>
+                        <td>{{val}}</td>
+                    </tr>
+                {{/each}}
+            {{else}}
+                <tr>
+                    <td>Empty</td>
+                </tr>
+            {{/if}}
+        </tbody>
+    </table>
+</div>
+<div>
+    <h2 class="title">Cookie</h2>
+    <table>
+        <tbody>
+            {{#if cookieData}}
+                {{#each cookieData}}
+                    <tr>
+                        <td>{{key}}</td>
+                        <td>{{val}}</td>
+                    </tr>
+                {{/each}}
+            {{else}}
+                <tr>
+                    <td>Empty</td>
+                </tr>
+            {{/if}}
+        </tbody>
+    </table>
+</div>

src/Resources/Resources.scss

@@ -0,0 +1,18 @@
+#eruda { .dev-tools { .tools {
+    .resources {
+        .title {
+            padding: 10px;
+            color: #fff;
+            background: #b4b4b4;
+            font-size: 20px;
+        }
+        table {
+            border-collapse: collapse;
+            width: 100%;
+            td {
+                padding: 10px;
+                border: 1px solid #b4b4b4;
+            }
+        }
+    }
+} } }

src/Settings/Settings.es6

@@ -0,0 +1,14 @@
+import Tool from '../DevTools/Tool.es6'
+
+export default class Settings extends Tool
+{
+    constructor()
+    {
+        super();
+        this.name = 'settings';
+    }
+    init($el)
+    {
+        super.init($el);
+    }
+}

src/Snippets/Sinppets.es6

@@ -0,0 +1,14 @@
+import Tool from '../DevTools/Tool.es6'
+
+export default class Snippets extends Tool
+{
+    constructor()
+    {
+        super();
+        this.name = 'Snippets';
+    }
+    init($el)
+    {
+        super.init($el);
+    }
+}

src/config.es6

@@ -1,10 +1,22 @@
-export default {
-    get: function ()
+var config = {
+    init()
     {
 
     },
-    set: function ()
+    get(name)
+    {
+
+    },
+    set(name, val)
+    {
+
+    },
+    save()
     {
 
     }
-};
+};
+
+config.init();
+
+export default config;

src/index.es6

@@ -1,9 +1,16 @@
 import HomeBtn from './DevTools/HomeBtn.es6'
 import DevTools from './DevTools/DevTools.es6'
 import Console from './Console/Console.es6'
+import Network from './Network/Network.es6'
+import Elements from './Elements/Elements.es6'
+import Snippets from './Snippets/Sinppets.es6'
+import Resources from './Resources/Resources.es6'
+import Info from './Info/Info.es6'
+import Features from './Features/Features.es6'
+import Settings from './Settings/Settings.es6'
 import util from './util'
 
-require('!style!css!sass!./style.scss');
+require('./style.scss');
 
 var $container;
 
@@ -19,9 +26,16 @@ if (isDebugMode)
 
     homeBtn.on('click', () => devTools.toggle());
 
-    devTools.add(new Console());
-
-    devTools.show();
+    devTools.add(new Console())
+            .add(new Network())
+            .add(new Elements())
+            .add(new Snippets())
+            .add(new Resources())
+            .add(new Info())
+            .add(new Features())
+            .add(new Settings())
+            .showTool('resources')
+            .show();
 }
 
 function appendContainer()
@@ -30,3 +44,11 @@ function appendContainer()
     $container = util.$('#eruda');
 }
 
+export default {
+    get: function (name)
+    {
+        return devTools.get(name);
+    }
+}
+;
+

src/style.scss

@@ -5,6 +5,8 @@
     top: 0;
     width: 100%;
     height: 100%;
+    z-index: 100000;
+    transform : translate3d(0,0,0);
     font-family: Lora, Times, serif;
     * {
         box-sizing: border-box;

webpack.config.js

@@ -1,3 +1,6 @@
+var autoprefixer = require('autoprefixer'),
+    precss = require('precss');
+
 module.exports = {
     entry: './src/index.es6',
     output: {
@@ -13,12 +16,20 @@ module.exports = {
             },
             {
                 test: /\.scss$/,
-                loaders: ['style', 'css', 'sass']
+                loaders: ['style', 'css', 'postcss', 'sass']
             },
             {
                 test: /\.hbs$/,
                 loader: 'handlebars-loader'
+            },
+            {
+                test: /\.json$/,
+                loader: 'json-loader'
             }
         ]
+    },
+    postcss: function ()
+    {
+        return [autoprefixer, precss];
     }
 };