Add 4 panels.

src/panel/components/misc/json_tree_view.js

@@ -0,0 +1,62 @@
+/**
+ * @file A Json Tree View component
+ * @author Lu Yuan
+ */
+
+import {Component, DataTypes} from 'san';
+
+import JSONTreeView from 'json-tree-view';
+import 'json-tree-view/devtools.css';
+
+
+export default class SanJsonTreeView extends Component {
+
+    static template = `
+        <div class="s-json-tree-view">
+        </div>
+    `;
+
+    static dataTypes = {
+        data: DataTypes.object,
+        expand: DataTypes.bool,
+        rootName: DataTypes.string,
+        withRootName: DataTypes.bool
+    };
+
+    initData() {
+        return {
+            data: {},
+            expand: true,
+            rootName: '',
+            withRootName: false
+        }
+    }
+
+    refresh() {
+        this.view && this.view.refresh();
+    }
+
+    fire(event) {
+        let that = this;
+        this.view.on(event, function (...args) {
+            that.fire(event, ...args);
+        });
+    }
+
+    attached() {
+        let rootName = this.data.get('rootName');
+        let withRootName = this.data.get('withRootName');
+        let expand = this.data.get('expand');
+        let data = this.data.get('data');
+        this.view = new JSONTreeView(rootName, data);
+        expand ? this.view.expand() : this.view.collapse();
+        this.view.withRootName = withRootName;
+        this.el.appendChild(this.view.dom);
+
+        this.fire('change');
+        this.fire('rename');
+        this.fire('delete');
+        this.fire('append');
+    }
+
+}

src/panel/views/component/component_computed.san

@@ -0,0 +1,137 @@
+<template>
+    <div class="computed-wrapper" style="{{displayStyle}}">
+        <input type="hidden" value="{{cid}}" />
+        <div class="computed" s-for="c in computed">
+            <div class="funcName">{{c.name}}</div>
+            <div class="deps-wrapper">
+                <span s-for="d in c.deps" class="deps">
+                    <span class="key">{{d.key}}</span>
+                    <span class="value">{{d.value}}</span>
+                </span>
+            </div>
+            <pre><code class="javascript">{{c.funcStr}}</code></pre>
+        </div>
+    </div>
+</template>
+
+<script>
+import san, {DataTypes} from 'san';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+import prettyFast from 'pretty-fast';
+
+let getComputed = cid => ({
+    computed: (() => {
+        let computedFuncStr = {};
+        let computedFunc = document.getElementById(
+            cid).__san_component__.computed;
+        for (let c in computedFunc) {
+            computedFuncStr[c] = computedFunc[c].toString();
+        }
+        return computedFuncStr;
+    })(),
+    computedDeps: document.getElementById(cid).__san_component__.computedDeps
+});
+
+function generateComputedInfo(data) {
+    let computed = [];
+    let originComputed = data.computed;
+    let originComputedDeps = data.computedDeps;
+    for (let c in originComputed) {
+        let computedDeps = [];
+        for (let d in originComputedDeps[c]) {
+            let dd = {};
+            dd.key = d;
+            dd.value = originComputedDeps[c][d];
+            computedDeps.push(dd);
+        }
+        let pretty = prettyFast(originComputed[c], {
+            url: 'test.js',
+            indent: '  '
+        });
+        computed.push({
+            name: c,
+            funcStr: pretty.code,
+            deps: computedDeps
+        });
+    }
+    return computed;
+}
+
+export default {
+
+    initData() {
+        return {
+            shown: true,
+            defaultcomputed: []
+        }
+    },
+
+    dataTypes: {
+        cid: DataTypes.string,
+        shown: DataTypes.bool,
+        computed: DataTypes.arrayOf(DataTypes.object)
+    },
+
+    compiled() {
+        this.pageEval = chrome.devtools.inspectedWindow.eval;
+    },
+
+    attached() {
+        this.watch('cid', value => {
+            this.pageEval('(' + getComputed.toString() + ')("' + value + '")',
+                (res, ex) => {
+                    if (!res || typeof res !== 'object') {
+                        return;
+                    }
+                    this.data.set('shown', true);
+                    this.data.set('computed', generateComputedInfo(res));
+                    san.nextTick(() => {
+                        this.el.querySelectorAll('pre code.javascript').forEach(e => {
+                            hljs.highlightBlock(e);
+                        });
+                    });
+                }
+            );
+        });
+    },
+
+    computed: {
+        displayStyle() {
+            return {
+                display: this.data.get('shown') ? 'block' : 'none'
+            };
+        }
+    }
+
+};
+</script>
+
+<style lang="stylus">
+pre
+    font-size: .8em !important
+    margin: .5em 0 !important
+.computed-wrapper
+    .computed
+        margin: 3px 0
+        .funcName
+            color: #2196f3
+            font-size: 120%
+            border-bottom: 2px solid #2196f3
+            margin-bottom: 5px
+        .deps-wrapper
+            line-height: 180%
+            .deps
+                display: inline-block
+                white-space: nowrap
+                margin-right: 20px
+                span
+                    padding: 3px
+                    border-radius: 5px
+                    color: #fff
+                    &.key
+                        background-color: #ff4081
+                    &.value
+                        background-color: #00bcd4
+
+</style>

src/panel/views/component/component_filters.san

@@ -0,0 +1,105 @@
+<template>
+    <div class="filters-wrapper" style="{{displayStyle}}">
+        <input type="hidden" value="{{cid}}" />
+        <div class="filters" s-for="f in filters">
+            <div class="funcName">{{f.name}}</div>
+            <pre><code class="javascript">{{f.funcStr}}</code></pre>
+        </div>
+    </div>
+</template>
+
+<script>
+import san, {DataTypes} from 'san';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+import prettyFast from 'pretty-fast';
+
+let getFilters = cid => ({
+    filters: (() => {
+        let filtersFuncStr = {};
+        let filtersFunc = document.getElementById(
+            cid).__san_component__.filters;
+        for (let f in filtersFunc) {
+            filtersFuncStr[f] = filtersFunc[f].toString();
+        }
+        return filtersFuncStr;
+    })()
+});
+
+function generateFiltersInfo(data) {
+    let filters = [];
+    let originFilters = data.filters;
+    for (let f in originFilters) {
+        let pretty = prettyFast(originFilters[f], {
+            url: 'test.js',
+            indent: '  '
+        });
+        filters.push({
+            name: f,
+            funcStr: pretty.code
+        });
+    }
+    return filters;
+}
+
+export default {
+
+    initData() {
+        return {
+            cid: '',
+            shown: true,
+            defaultfilters: []
+        }
+    },
+
+    dataTypes: {
+        cid: DataTypes.string,
+        shown: DataTypes.bool,
+        filters: DataTypes.arrayOf(DataTypes.object)
+    },
+
+    compiled() {
+        this.pageEval = chrome.devtools.inspectedWindow.eval;
+    },
+
+    attached() {
+        this.watch('cid', value => {
+            this.pageEval('(' + getFilters.toString() + ')("' + value + '")',
+                (res, ex) => {
+                    if (!res || typeof res !== 'object') {
+                        return;
+                    }
+                    this.data.set('shown', true);
+                    this.data.set('filters', generateFiltersInfo(res));
+                    san.nextTick(() => {
+                        this.el.querySelectorAll('pre code.javascript').forEach(e => {
+                            hljs.highlightBlock(e);
+                        });
+                    });
+                }
+            );
+        });
+    },
+
+    computed: {
+        displayStyle() {
+            return {
+                display: this.data.get('shown') ? 'block' : 'none'
+            };
+        }
+    }
+
+};
+</script>
+
+<style lang="stylus">
+.filters-wrapper
+    .filters
+        margin: 3px 0
+        .funcName
+            color: #2196f3
+            font-size: 120%
+            border-bottom: 2px solid #2196f3
+            margin-bottom: 5px
+
+</style>