Fix: Small bugs

2026-03-24 09:48:37 +08:00 · 2016-05-30 09:50:06 +08:00
parent 04b6b9e0de
commit 36d2af32b4
21 changed files with 69 additions and 110 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "eruda",
-  "version": "0.6.1",
+  "version": "0.6.2",
  "description": "Console for Mobile Browsers",
  "main": "dist/eruda.js",
  "scripts": {
--- a/src/Console/Console.es6
+++ b/src/Console/Console.es6
@@ -79,13 +79,6 @@ export default class Console extends Tool

        return this;
    }
-    destroy()
-    {
-        super.destroy();
-
-        this.ignoreGlobalErr();
-        return this.restoreConsole();
-    }
    _appendTpl()
    {
        var $el = this._$el;
--- a/src/Console/Log.scss
+++ b/src/Console/Log.scss
@@ -7,16 +7,12 @@
        height: 100%;
        font-size: $font-size;
        li {
+            @include clear-float();
            background: #fff;
            margin: 10px 0;
            padding: $padding;
            border-top: 1px solid $gray-light;
            border-bottom: 1px solid $gray-light;
-            &:after {
-                content: '';
-                display: block;
-                clear: both;
-            }
            a {
                color: $blue !important;
            }
--- a/src/DevTools/DevTools.es6
+++ b/src/DevTools/DevTools.es6
@@ -58,34 +58,12 @@ export default class DevTools extends util.Emitter

        return this;
    }
-    remove(name)
-    {
-        var tool = this._tools[name];
-
-        delete this._tools[name];
-        this._navBar.remove(name);
-
-        tool.destroy();
-        if (tool.active)
-        {
-            var keys = util.keys(this._tools);
-            if (keys.length > 0) this.showTool(keys[0]);
-        }
-
-        return this;
-    }
    get(name)
    {
        var tool = this._tools[name];

        if (tool) return tool;
    }
-    destroy()
-    {
-        util.each(this._tools, (tool, key) => this.remove(key));
-        this._navBar.destroy();
-        this._$el.remove();
-    }
    showTool(name)
    {
        if (this._curTool === name) return this;
--- a/src/DevTools/NavBar.es6
+++ b/src/DevTools/NavBar.es6
@@ -22,16 +22,6 @@ export default class NavBar extends util.Emitter
        this._$ul.prepend(`<li class="${name}" ontouchstart>${name}</li>`);
        this._resetWidth();
    }
-    remove(name)
-    {
-        this._len--;
-        this._$ul.find(`li.${name}`).remove();
-        this._resetWidth();
-    }
-    destroy()
-    {
-        this._$el.remove();    
-    }
    activeTool(name)
    {
        var self = this;
--- a/src/DevTools/Tool.es6
+++ b/src/DevTools/Tool.es6
@@ -16,8 +16,4 @@ export default class Tool

        return this;
    }
-    destroy()
-    {
-        this._$el.remove();
-    }
 }
--- a/src/Elements/Elements.es6
+++ b/src/Elements/Elements.es6
@@ -68,12 +68,6 @@ export default class Elements extends Tool
        if (this._origAddEvent) winEventProto.addEventListener = this._origAddEvent;
        if (this._origRmEvent) winEventProto.removeEventListener = this._origRmEvent;
    }
-    destroy()
-    {
-        super.destroy();
-
-        this.restoreEventTarget();
-    }
    _back()
    {
        if (this._curEl === this._htmlEl) return;
@@ -167,6 +161,8 @@ export default class Elements extends Tool
    }
    _setEl(el)
    {
+        if (isErudaEl(el)) return;
+
        this._curEl = el;
        this._curCssStore = new CssStore(el);
        this._highlight.setEl(el);
@@ -410,3 +406,18 @@ function rmEvent(el, type, listener, useCapture = false)
 }

 var getWinEventProto = () => (window.EventTarget && window.EventTarget.prototype) || window.Node.prototype;
+
+function isErudaEl(el)
+{
+    let parentNode = el.parentNode;
+
+    if (!parentNode) return false;
+
+    while (parentNode)
+    {
+        parentNode = parentNode.parentNode;
+        if (parentNode && parentNode.id === 'eruda') return true;
+    }
+
+    return false;
+}
--- a/src/Elements/Elements.hbs
+++ b/src/Elements/Elements.hbs
@@ -31,7 +31,7 @@
 </div>
 {{#if computedStyle}}
    <div class="eruda-computed-style eruda-section">
-        <h2 class="toggle-all-computed-style eruda-active-effect">Computed Style</h2>
+        <h2 class="toggle-all-computed-style eruda-active-effect" ontouchstart>Computed Style</h2>
        <div class="eruda-table-wrapper">
            <table>
                <tbody>
--- a/src/Elements/Elements.scss
+++ b/src/Elements/Elements.scss
@@ -49,8 +49,7 @@
            background: #fff;
            font-size: 12px;
            .table-wrapper {
-                overflow-x: auto;
-                -webkit-overflow-scrolling: touch;
+                @include overflow-auto(x);
            }
            table {
                td {
@@ -61,9 +60,8 @@
        .text-content {
            background: #fff;
            .content {
+                @include overflow-auto(x);
                padding: $padding;
-                overflow-x: auto;
-                -webkit-overflow-scrolling: touch;
            }
        }
        .style-color {
@@ -77,9 +75,8 @@
            background: #fff;
            font-size: 12px;
            .table-wrapper {
+                @include overflow-auto(y);
                max-height: 200px;
-                overflow-y: auto;
-                -webkit-overflow-scrolling: touch;
            }
            table {
                td {
@@ -130,11 +127,10 @@
                        color: #fff;
                    }
                    .listener-content li {
+                        @include overflow-auto(x);
                        padding: $padding;
                        border: 1px solid $gray;
                        border-top: none;
-                        overflow-x: auto;
-                        -webkit-overflow-scrolling: touch;
                        &.capture {
                            background: $gray-light;
                        }
--- a/src/Elements/Select.es6
+++ b/src/Elements/Select.es6
@@ -26,6 +26,7 @@ export default class Select extends util.Emitter
        this._clickListener = function (e)
        {
            e.preventDefault();
+            e.stopImmediatePropagation();
        };
    }
    enable()
--- a/src/Features/Features.scss
+++ b/src/Features/Features.scss
@@ -5,6 +5,7 @@
    .features {
        @include overflow-auto(y);
        ul {
+            @include clear-float();
            margin-top: 5px;
            li {
                width: 33.3%;
@@ -34,11 +35,6 @@
                    }
                }
            }
-            &::after {
-                display: block;
-                content: '';
-                clear: both;
-            }
        }
        .html5test {
            color: #fff;
--- a/src/Info/Info.scss
+++ b/src/Info/Info.scss
@@ -1,8 +1,9 @@
@import "../style/variable";
+@import "../style/mixin";

 .dev-tools { .tools {
    .info {
-        font-size: $font-size;
+        @include overflow-auto(y);
        li {
            background: #fff;
            margin: 10px;
@@ -12,7 +13,7 @@
            }
            .title {
                padding-bottom: 0;
-                font-size: 16px;
+                font-size: $font-size-l;
                color: $blue;
            }
            .content {
--- a/src/Network/Network.es6
+++ b/src/Network/Network.es6
@@ -79,11 +79,6 @@ export default class Network extends Tool
        if (this._origOpen) winXhrProto.open = this._origOpen;
        if (this._origSend) winXhrProto.send = this._origSend;
    }
-    destroy()
-    {
-        super.destroy();
-        this.restoreXhr();
-    }
    _addReq(id, data)
    {
        util.defaults(data, {
--- a/src/Network/Network.hbs
+++ b/src/Network/Network.hbs
@@ -30,6 +30,7 @@
 {{/if}}

 {{#if entries}}
+    <div class="eruda-title">ResourceTiming</div>
    <ul class="eruda-entries">
        {{#each entries}}
            <li class="eruda-entry" data-idx="{{@index}}">
@@ -43,6 +44,7 @@
 {{/if}}

 {{#if requests}}
+    <div class="eruda-title">XMLHttpRequest</div>
    <ul class="eruda-requests">
        {{#each requests}}
            <li class="eruda-request {{#if hasErr}}eruda-error{{/if}}" data-id="{{@key}}">
--- a/src/Network/Network.scss
+++ b/src/Network/Network.scss
@@ -3,8 +3,7 @@

 .dev-tools { .tools {
    .network {
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
+        @include overflow-auto(y);
        .performance-timing {
            padding: $padding;
            .inner-wrapper {
@@ -46,15 +45,19 @@
                }
            }
        }
+        .title {
+            background: $gray;
+            padding: $padding;
+            color: #fff;
+        }
        .requests, .entries {
            background: #fff;
            border-bottom: 1px solid $gray-light;
            margin-bottom: 10px;
            li {
+                @include overflow-auto(x);
                border-top: 1px solid $gray-light;
-                overflow: auto;
                height: 41px;
-                -webkit-overflow-scrolling: touch;
                white-space: nowrap;
                &.error {
                    span {
@@ -66,7 +69,7 @@
                    line-height: 40px;
                    height: 40px;
                    padding: 0 10px;
-                    font-size: 14px;
+                    font-size: $font-size-s;
                    vertical-align: top;
                }
                &:nth-child(even) {
@@ -74,5 +77,9 @@
                }
            }
        }
+        .entries {
+            @include overflow-auto(y);
+            max-height: 200px;
+        }
    }
 } }
--- a/src/Resources/Resources.scss
+++ b/src/Resources/Resources.scss
@@ -1,11 +1,11 @@
@import "../style/variable";
+@import "../style/mixin";

 .dev-tools { .tools {
    .resources {
+        @include overflow-auto(y);
        padding: 10px;
        font-size: 14px;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
        .section {
            margin-bottom: 10px;
            border-radius: 4px;
@@ -56,8 +56,9 @@
            }
        }
        .image-list {
+            @include clear-float();
            background: #fff;
-            padding: 10px !important;
+            padding: $padding !important;
            li {
                width: 25%;
                float: left;
@@ -70,11 +71,6 @@
                    width: 100%;
                }
            }
-            &::after {
-                display: block;
-                content: '';
-                clear: both;
-            }
        }
        table {
            border-collapse: collapse;
@@ -92,10 +88,9 @@
                    }
                }
                &.key {
+                    @include overflow-auto(x);
                    white-space: nowrap;
                    max-width: 120px;
-                    overflow-x: auto;
-                    -webkit-overflow-scrolling: touch;
                }
                &.control {
                    width: 40px;
--- a/src/Settings/Settings.scss
+++ b/src/Settings/Settings.scss
@@ -1,9 +1,9 @@
@import "../style/variable";
+@import "../style/mixin";

 .dev-tools { .tools {
    .settings {
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
+        @include overflow-auto(y);
        .separator {
            height: 10px;
        }
--- a/src/Settings/select.hbs
+++ b/src/Settings/select.hbs
@@ -5,7 +5,7 @@
    </div>
    <ul data-idx="{{idx}}">
       {{#each selections}}
-           <li>{{.}}</li>
+           <li ontouchstart>{{.}}</li>
       {{/each}}
    </ul>
 </div>
--- a/src/Snippets/Snippets.scss
+++ b/src/Snippets/Snippets.scss
@@ -1,20 +1,19 @@
@import "../style/variable";
+@import "../style/mixin";

 .dev-tools { .tools {
    .snippets {
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-        padding: 10px;
+        @include overflow-auto(y);
+        padding: $padding;
        .section {
            margin-bottom: 10px;
-            border-radius: 4px;
+            border-radius: $border-radius;
            box-shadow: $box-shadow;
            overflow: hidden;
            .btn, .name {
-                padding: 10px;
+                padding: $padding;
                color: #fff;
                background: $gray;
-                font-size: 14px;
                text-align: center;
            }
            .btn {
@@ -27,7 +26,7 @@
            }
            .description {
                background: #fff;
-                padding: 10px;
+                padding: $padding;
            }
        }
    }
--- a/src/Sources/Sources.scss
+++ b/src/Sources/Sources.scss
@@ -3,14 +3,11 @@

 .dev-tools { .tools {
    .sources {
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-        font-size: 14px;
+        @include overflow-auto(y);
        .code, .raw {
+            @include overflow-auto(x);
            background: #fff;
            padding: $padding;
-            overflow-x: auto;
-            -webkit-overflow-scrolling: touch;
            min-height: 100%;
        }
        .code {
@@ -54,22 +51,20 @@
                }
            }
            .response, .data {
+                @include overflow-auto(x);
                background: #fff;
                padding: $padding;
                margin-bottom: 10px;
-                overflow-x: auto;
-                -webkit-overflow-scrolling: touch;
            }
        }
        .json {
+            @include overflow-auto(x);
            font-family: $font-family-code;
            font-size: $font-size-s;
            line-height: 1.2;
            background: #fff;
            min-height: 100%;
            padding: $padding 25px 10px;
-            overflow-x: auto;
-            -webkit-overflow-scrolling: touch;
            &, ul {
                list-style: none !important;
            }
--- a/src/style/mixin.scss
+++ b/src/style/mixin.scss
@@ -27,4 +27,12 @@
        min-height: 40px;
        border-bottom: 1px solid $gray-light;
    }
+}
+
+@mixin clear-float {
+    &:after {
+        content: '';
+        display: block;
+        clear: both;
+    }
 }