Del: Features plugin

.eslintignore

@@ -1,2 +1 @@
-src/lib/util.js
-src/Features/modernizr.js
+src/lib/util.js

README.md

@@ -54,7 +54,6 @@ javascript:(function () { var script = document.createElement('script'); script.
 * [Info](doc/TOOL_API.md#info): Show url, user agent info.
 * [Snippets](doc/TOOL_API.md#snippets): Include snippets used most often.
 * [Sources](doc/TOOL_API.md#sources): Html, js, css source viewer.
-* [Features](doc/TOOL_API.md#features): Browser feature detections.
 
 ## Install
 
@@ -116,6 +115,7 @@ It is possible to enhance Eruda with more features by writing plugins. Check
 source code of plugins below to learn how to write your own custom tool panels.
 
 * [eruda-fps](https://github.com/liriliri/eruda-fps): Display page fps info.
+* [eruda-features](https://github.com/liriliri/eruda-features): Browser feature detections.
 
 When writing plugins, you can use utilities exposed by Eruda, see
 [docs](doc/UTIL_API.md) here.

doc/README_CN.md

@@ -42,8 +42,6 @@ Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools
 
 8. Snippets面板：页面元素添加边框；加时间戳刷新页面；支持自定义代码片段。
 
-9. Features面板：浏览器常用特性检测；提供Can I use，Html5Test快捷访问。
-
 ## 快速上手
 
 通过CDN使用：

doc/TOOL_API.md

@@ -192,14 +192,6 @@ snippets.add('hello', function ()
 snippets.remove('hello');
 ```
 
-## Features
-
-Browser feature detections, thanks to
-[modernizr](https://github.com/Modernizr/Modernizr) project.
-
-Red means unsupported, otherwise ok. All buttons is linked directly to
-related materials in [Can I Use](http://caniuse.com/) website.
-
 ## Settings
 
 Customization for all tools.

karma.conf.js

@@ -16,7 +16,6 @@ module.exports = function (config)
             'test/util.js',
             'test/console.js',
             'test/elements.js',
-            'test/features.js',
             'test/info.js',
             'test/network.js',
             'test/resources.js',

karma.sauce.js

@@ -36,7 +36,6 @@ module.exports = function (config)
             'test/util.js',
             'test/console.js',
             'test/elements.js',
-            'test/features.js',
             'test/info.js',
             'test/network.js',
             'test/resources.js',

package.json

@@ -31,7 +31,9 @@
         "test/*.js",
         "test/*.html"
       ],
-      "exclude": ["js"],
+      "exclude": [
+        "js"
+      ],
       "namespace": "util",
       "output": "test/util.js"
     }
@@ -78,7 +80,6 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-sourcemap-writer": "^0.1.2",
     "karma-webpack": "^2.0.5",
-    "modernizr": "^3.5.0",
     "node-sass": "^4.5.3",
     "postcss-class-prefix": "^0.3.0",
     "postcss-loader": "^2.0.8",

script/coverage.js

@@ -22,7 +22,6 @@ var coverage = util.reduce(util.keys(remappedJson), function (result, source)
     {
         return source.match(/src.*\.js$/) && 
                source.indexOf('node_modules') < 0 && 
-               source.indexOf('modernizr') < 0 && 
                source.indexOf('util') < 0;
     }
 

src/Features/Features.hbs

@@ -1,10 +0,0 @@
-<ul>
-    {{#each features}}
-        <li>
-            <a href="http://caniuse.com/#search={{@key}}" target="_blank" class="eruda-inner-wrapper {{#if this}}eruda-ok{{/if}}">
-                {{@key}}
-            </a>
-        </li>
-    {{/each}}
-</ul>
-<a class="eruda-html5test" target="_blank" href="http://html5test.com">Go to HTML5 Test</a>

src/Features/Features.js

@@ -1,61 +0,0 @@
-import Tool from '../DevTools/Tool';
-import util from '../lib/util';
-import modernizr from './modernizr';
-
-let featureList = require('./featureList.json');
-
-let featureNames = featureList['feature-detects'],
-    specialNames = featureList['special-names'];
-
-export default class Features extends Tool
-{
-    constructor()
-    {
-        super();
-
-        this._style = util.evalCss(require('./Features.scss'));
-
-        this.name = 'features';
-        this._tpl = require('./Features.hbs');
-        this._features = {};
-        this._isInit = false;
-    }
-    show()
-    {
-        super.show();
-
-        if (!this._isInit) this._initFeatures();
-    }
-    destroy() 
-    {
-        super.destroy();
-
-        util.evalCss.remove(this._style);
-    }
-    _initFeatures()
-    {
-        this._isInit = true;
-
-        modernizr.testRunner();
-
-        let i = 0,
-            featureNum = featureNames.length;
-
-        util.each(featureNames, (feature) =>
-        {
-            if (specialNames[feature]) feature = specialNames[feature];
-            feature = feature.replace(/\//g, '');
-
-            modernizr.on(feature, result =>
-            {
-                this._features[feature] = result;
-                i++;
-                if (i === featureNum) this._render();
-            });
-        });
-    }
-    _render()
-    {
-        this._$el.html(this._tpl({features: this._features}));
-    }
-}

src/Features/Features.scss

@@ -1,58 +0,0 @@
-@import "../style/variable";
-@import "../style/mixin";
-
-.dev-tools { .tools {
-    .features {
-        padding-bottom: 40px;
-        ul {
-            @include overflow-auto(y);
-            @include clear-float();
-            height: 100%;
-            li {
-                width: 33.3%;
-                float: left;
-                padding: 5px;
-                .inner-wrapper {
-                    @include overflow-auto(x);
-                    font-size: $font-size-s;
-                    text-decoration: underline;
-                    color: #fff;
-                    display: block;
-                    padding: 10px;
-                    border-radius: 4px;
-                    text-align: center;
-                    background: $red;
-                    transition: background $anim-duration;
-                    &:active {
-                        background: $red-dark;
-                    }
-                    &.ok {
-                        background: #fff;
-                        color: $gray;
-                        &:active {
-                            background: $gray-light;
-                        }
-                    }
-                }
-            }
-        }
-        .html5test {
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            color: #fff;
-            width: 100%;
-            background: $blue;
-            display: block;
-            height: 40px;
-            line-height: 40px;
-            text-decoration: none;
-            text-align: center;
-            margin-top: 10px;
-            transition: background $anim-duration;
-            &:active {
-                background: $blue-dark;
-            }
-        }
-    }
-} }

src/Features/build.js

@@ -1,15 +0,0 @@
-var modernizr = require('modernizr'),
-    fs = require('fs');
-
-var featureList = require('./featureList.json');
-
-modernizr.build(featureList, function (result)
-{
-    result = result.replace(';(function(window, document, undefined){', '')
-                   .replace('window.Modernizr = Modernizr;', '')
-                   .replace('\'enableClasses\': true', '\'enableClasses\': false')
-                   .replace('testRunner();', 'Modernizr.testRunner = testRunner;')
-                   .replace('})(window, document);', '');
-    result += '\nmodule.exports = Modernizr;';
-    fs.writeFile('./modernizr.js', result, 'utf8');
-});

src/Features/featureList.json

@@ -1,69 +0,0 @@
-{
-    "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",
-        "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/Snippets/defSnippets.js

@@ -59,6 +59,14 @@ export default [
         },
         desc: 'Display page fps'
     },
+    {
+        name: 'Load Features Plugin',
+        fn() 
+        {
+            loadPlugin('features');
+        },
+        desc: 'Browser feature detections'
+    },
     {
         name: 'Restore Settings',
         fn() 
@@ -139,7 +147,7 @@ function loadPlugin(name)
     let globalName = 'eruda' + util.upperFirst(name);
     if (window[globalName]) return;
 
-    util.loadJs('//cdn.jsdelivr.net/npm/eruda-' + name, (isLoaded) =>
+    util.loadJs(`//cdn.jsdelivr.net/npm/eruda-${name}@${pluginVersion[name]}`, isLoaded =>
     {
         if (!isLoaded || !window[globalName]) return logger.error('Fail to load plugin ' + name);
 
@@ -147,3 +155,8 @@ function loadPlugin(name)
         emitter.emit(emitter.SHOW, name);
     });
 }
+
+let pluginVersion = {
+    fps: '1.0.2',
+    features: '1.0.0'
+};

src/index.js

@@ -7,7 +7,6 @@ import Elements from './Elements/Elements';
 import Snippets from './Snippets/Snippets';
 import Resources from './Resources/Resources';
 import Info from './Info/Info';
-import Features from './Features/Features';
 import Sources from './Sources/Sources';
 import Settings from './Settings/Settings';
 import util from './lib/util';
@@ -35,7 +34,7 @@ module.exports = {
     _isInit: false,
     version: VERSION,
     config, util,
-    Tool, Console, Elements, Network, Sources, Resources, Info, Snippets, Features,
+    Tool, Console, Elements, Network, Sources, Resources, Info, Snippets,
     get(name)
     {
         if (!this._checkInit()) return;
@@ -177,7 +176,7 @@ module.exports = {
         this._entryBtn.initCfg(settings);
         devTools.initCfg(settings);
     },
-    _initTools(tool = ['console', 'elements', 'network', 'resources', 'sources', 'info', 'snippets', 'features'])
+    _initTools(tool = ['console', 'elements', 'network', 'resources', 'sources', 'info', 'snippets'])
     {
         tool = util.toArr(tool).reverse();
 

test/features.html

@@ -1,17 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title>Features</title>
-    <link rel="stylesheet" href="lib/jasmine.css">
-    <script src="lib/jquery.js"></script>
-    <script src="lib/jasmine.js"></script>
-    <script src="lib/jasmine-html.js"></script>
-    <script src="assets/eruda.js"></script>
-    <script src="boot.js"></script>
-</head>
-<body>
-<script>boot('features');</script>
-</body>
-</html>

test/features.js

@@ -1,19 +0,0 @@
-describe('features', function () 
-{
-    var tool = eruda.get('features'),
-        $tool = $('.eruda-features');
-
-    beforeEach(function () 
-    {
-        eruda.show('features');
-    });
-
-    it('items', function (done) 
-    {
-        setTimeout(function () 
-        {
-            expect($tool.find('li')).toHaveLength(45);
-            done();
-        }, 1000);
-    });
-});

test/index.html

@@ -35,9 +35,6 @@
         <li>
             <a href="snippets.html">snippets</a>
         </li>
-        <li>
-            <a href="features.html">features</a>
-        </li>
         <li>
             <a href="settings.html">settings</a>
         </li>