Dev: Resources icon

script/icomoon.js

@@ -1,4 +1,4 @@
-// Icons: ['cog']
+// Icons: ['cogs', 'bin', 'loop']
 
 var fs = require('fs'),
     path = require('path');

src/Entry/HomeBtn.es6

@@ -31,8 +31,9 @@ export default class HomeBtn extends util.Emitter
             pos = cfg.get('pos'),
             defPost = getDefPos();
 
-        if (pos.x > defPost.x + 10 ||
-            pos.y > defPost.y + 10 ||
+        var outOfRange = pos.x > defPost.x + 10 || pos.y > defPost.y + 10;
+
+        if (outOfRange ||
             !cfg.get('rememberPos') ||
             orientationChanged)
         {
@@ -44,7 +45,7 @@ export default class HomeBtn extends util.Emitter
             top: pos.y
         });
 
-        cfg.set(pos, pos);
+        cfg.set('pos', pos);
     }
     _bindEvent()
     {

src/Entry/HomeBtn.hbs

@@ -0,0 +1,3 @@
+<div class="eruda-home-btn">
+    <span class="eruda-icon-terminal"></span>
+</div>

src/Resources/Resources.hbs

@@ -1,7 +1,9 @@
 <div class="eruda-section">
     <h2 class="eruda-title {{localStoreState}}">
         LocalStorage
-        <span class="eruda-btn refresh-local-storage">R</span>
+        <div class="eruda-btn refresh-local-storage">
+            <span class="eruda-icon-loop"></span>
+        </div>
     </h2>
     <table>
         <tbody>
@@ -11,7 +13,7 @@
                         <td class="eruda-key">{{key}}</td>
                         <td>{{val}}</td>
                         <td class="eruda-control">
-                            <span class="eruda-delete delete-local-storage" data-key="{{key}}">‒</span>
+                            <span class="eruda-icon-bin delete-local-storage" data-key="{{key}}"></span>
                         </td>
                     </tr>
                 {{/each}}
@@ -26,7 +28,9 @@
 <div class="eruda-section">
     <h2 class="eruda-title {{cookieState}}">
         Cookie
-        <span class="eruda-btn refresh-cookie">R</span>
+        <div class="eruda-btn refresh-cookie">
+            <span class="eruda-icon-loop"></span>
+        </div>
     </h2>
     <table>
         <tbody>
@@ -36,7 +40,7 @@
                         <td class="eruda-key">{{key}}</td>
                         <td>{{val}}</td>
                         <td class="eruda-control">
-                            <span class="eruda-delete delete-cookie" data-key="{{key}}">‒</span>
+                            <span class="eruda-icon-bin delete-cookie" data-key="{{key}}"></span>
                         </td>
                     </tr>
                 {{/each}}
@@ -51,7 +55,9 @@
 <div class="eruda-section">
     <h2 class="eruda-title {{scriptState}}">
         Script
-        <span class="eruda-btn refresh-script">R</span>
+        <div class="eruda-btn refresh-script">
+            <span class="eruda-icon-loop"></span>
+        </div>
     </h2>
     <ul class="eruda-link-list">
         {{#if scriptData}}
@@ -68,7 +74,9 @@
 <div class="eruda-section">
     <h2 class="eruda-title {{stylesheetState}}">
         Stylesheet
-        <span class="eruda-btn refresh-stylesheet">R</span>
+        <div class="eruda-btn refresh-stylesheet">
+            <span class="eruda-icon-loop"></span>
+        </div>
     </h2>
     <ul class="eruda-link-list">
         {{#if stylesheetData}}
@@ -85,7 +93,9 @@
 <div class="eruda-section">
     <h2 class="eruda-title {{imageState}}">
         Image
-        <span class="eruda-btn refresh-image">R</span>
+        <div class="eruda-btn refresh-image">
+            <span class="eruda-icon-loop"></span>
+        </div>
     </h2>
     <ul class="eruda-image-list">
         {{#if imageData}}

src/Resources/Resources.scss

@@ -29,6 +29,7 @@
             }
             .btn {
                 float: right;
+                margin-right: 2px;
                 display: inline-block;
                 background: #fff;
                 color: $gray;
@@ -37,7 +38,12 @@
                 height: 18px;
                 line-height: 18px;
                 border-radius: 50%;
+                font-size: 12px;
                 cursor: pointer;
+                .icon-loop {
+                    position: relative;
+                    top: 1px;
+                }
             }
         }
         .link-list {
@@ -77,22 +83,15 @@
             td {
                 padding: 10px;
                 word-break: break-all;
-                .delete {
-                    color: #fff;
-                    width: 20px;
-                    height: 20px;
-                    display: inline-block;
-                    text-align: center;
-                    border-radius: 50%;
-                    background: $red-dark;
-                    line-height: 20px;
-                    cursor: pointer;
+                .icon-bin {
+                    color: $red-dark;
                 }
                 &.key {
                     white-space: nowrap;
                 }
                 &.control {
                     width: 40px;
+                    text-align: center;
                 }
             }
             background: #fff;

src/homeBtn/HomeBtn.hbs

@@ -1,3 +0,0 @@
-<div class="eruda-home-btn">
-    <span class="eruda-icon-cog"></span>
-</div>

src/icon.css

@@ -1,6 +1,6 @@
 @font-face {
     font-family: 'icomoon';
-    src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAUgAAsAAAAABNQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFKmNtYXAAAAFoAAAAVAAAAFQXVtKHZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAARgAAAEYzg15hGhlYWQAAALcAAAANgAAADYJpjQzaGhlYQAAAxQAAAAkAAAAJAewA8ZobXR4AAADOAAAABQAAAAUCgAAEmxvY2EAAANMAAAADAAAAAwAKACgbWF4cAAAA1gAAAAgAAAAIAAIAE1uYW1lAAADeAAAAYYAAAGGmUoJ+3Bvc3QAAAUAAAAAIAAAACAAAwAAAAMDAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QADwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkA//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAS/8AD7gPAADYASgAAAS4BPgE3Jw4BIyIuAjUjFAYHDgImJwceARceAQ4BBxc+ATMyHgIVMzQ2Nz4CFhc3LgEnBSIuAjU0PgIzMh4CFRQOAgOmFAkTLyNlFTIbKEc1HskNDRU+SE0jZRYlDRQJFC4jZRUyGihHNR/JDQ0UPklMJGQVJQ3+WitLOSAgOUsrK0s5ICA5SwFeI0xJPhSvDQ4fNUcpGTIXIy4TCRSuDSQXI0xIPxSuDA4fNUcoGTEXIy4TCRSvDCQXbSA5SysrSzkgIDlLKytLOSAAAAEAAAAAAADrovI3Xw889QALBAAAAAAA00z32wAAAADTTPfbAAD/wAPuA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA+4AAQAAAAAAAAAAAAAAAAAAAAUEAAAAAAAAAAAAAAACAAAABAAAEgAAAAAACgAUAB4AjAABAAAABQBLAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==') format('woff');
+    src: url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff');
     font-weight: normal;
     font-style: normal;
 }
@@ -20,7 +20,13 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-cog:before {
+.icon-terminal:before {
+    content: "\e901";
+}
+.icon-bin:before {
+    content: "\e902";
+}
+.icon-loop:before {
     content: "\e900";
 }
 

src/index.es6

@@ -1,4 +1,4 @@
-import HomeBtn from './HomeBtn/HomeBtn.es6'
+import HomeBtn from './Entry/HomeBtn.es6'
 import DevTools from './DevTools/DevTools.es6'
 import Console from './Console/Console.es6'
 import Network from './Network/Network.es6'
@@ -33,11 +33,11 @@ var consoleTool = new Console(),
     settings = new Settings();
 
 devTools.add(consoleTool)
-        .add(network)
         .add(elements)
-        .add(snippets)
+        .add(network)
         .add(resources)
         .add(info)
+        .add(snippets)
         .add(features)
         .add(settings)
         .showTool('console');