增加功能：页面屏幕标尺

ft2gs · Dec 14, 2018 · e703dc7 · e703dc7
1 parent 83b2d04
commit e703dc7
Show file tree

Hide file tree

Showing 11 changed files with 328 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -42,6 +42,7 @@ https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad?hl=zh
 - 随机密码生成（任意字符、任意长度、随机生成）
 - 编码规范检测（HTML/CSS/JS规范检测）
 - 页面性能检测（页面响应时间、Header监测）
+- 页面栅格标尺（页面栅格化、屏幕标尺）
 - Ajax调试功能（需在控制台中使用）
 - 网页编码设置（UTF-8、GBK、日文、韩文等）
 - 我的便签笔记（便签笔记，支持导出）

diff --git a/apps/background/index.js b/apps/background/index.js
@@ -235,6 +235,15 @@ var BgPageInstance = (function () {
         });
     };
 
+    /**
+     * 屏幕栅格标尺
+     */
+    let _doGridDetect = function(tab){
+        chrome.tabs.sendMessage(tab.id, {
+            type : MSG_TYPE.GRID_RULER
+        });
+    };
+
     /**
      * 根据给定参数，运行对应的Helper
      */
@@ -265,6 +274,10 @@ var BgPageInstance = (function () {
                     case MSG_TYPE.AJAX_DEBUGGER:
                         _debuggerSwitchOn(callback);
                         break;
+                    // 屏幕栅格标尺
+                    case MSG_TYPE.GRID_RULER:
+                        _doGridDetect(tab);
+                        break;
                     default :
                         break;
                 }
@@ -378,6 +391,9 @@ var BgPageInstance = (function () {
                     },
                     MENU_STICKY_NOTE: function (info, tab) {
                         _openFileAndRun(tab, MSG_TYPE.STICKY_NOTES);
+                    },
+                    MENU_GRID_RULER: function(info,tab){
+                        _doGridDetect(tab);
                     }
                 };
 
@@ -650,6 +666,7 @@ var BgPageInstance = (function () {
                 chrome.runtime.openOptionsPage();
             }
 
+
             // ===========================以下为编码规范检测====start==================================
             //处理CSS的请求
             else if (request.type === MSG_TYPE.GET_CSS) {

diff --git a/apps/content-script/index.js b/apps/content-script/index.js
@@ -80,6 +80,11 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
                 }
             });
             break;
+
+        // 屏幕栅格标尺
+        case MSG_TYPE.GRID_RULER:
+            Tarp.require('../ruler/index',true).then(ruler => ruler.detect(callback));
+            break;
     }
 
 });
diff --git a/apps/manifest.json b/apps/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "WEB前端助手(FeHelper)",
-  "version": "2018.12.1412",
+  "version": "2018.12.1417",
   "manifest_version": 2,
   "default_locale": "zh_CN",
   "description": "FE助手：包括JSON格式化、二维码生成与解码、信息编解码、代码压缩、美化、页面取色、Markdown与HTML互转、网页滚动截屏、正则表达式、时间转换工具、编码规范检测、页面性能检测、Ajax接口调试、密码生成器、JSON比对工具、网页编码设置、便签笔记",
@@ -82,7 +82,9 @@
     "static/vendor/jquery/jquery.extend.js",
     "static/vendor/json-bigint/index.js",
     "static/vendor/prism/prism.js",
-    "static/vendor/prism/prism.css"
+    "static/vendor/prism/prism.css",
+    "ruler/index.js",
+    "ruler/index.css"
   ],
   "content_scripts": [
     {

diff --git a/apps/options/index.html b/apps/options/index.html
diff --git a/apps/options/settings.js b/apps/options/settings.js
@@ -33,7 +33,8 @@ module.exports = (() => {
         'FORBID_OPEN_IN_NEW_TAB',
         'MAX_JSON_KEYS_NUMBER',
         'AUTO_TEXT_DECODE',
-        'STICKY_NOTES'
+        'STICKY_NOTES',
+        'GRID_RULER'
     ];
 
     // 邮件菜单配置项
@@ -120,6 +121,10 @@ module.exports = (() => {
         MENU_STICKY_NOTE: {
             icon: '▤',
             text: '我的便签笔记'
+        },
+        MENU_GRID_RULER: {
+            icon: '✚',
+            text: '页面栅格标尺'
         }
     };
 

diff --git a/apps/popup/index.css b/apps/popup/index.css
@@ -151,6 +151,9 @@ ul.fe-function-list li.-x-jsondiff b {
 ul.fe-function-list li.-x-sticky-notes b {
     background-position: -65px -96px;
 }
+ul.fe-function-list li.-x-grid-ruler b {
+    background-position: -33px -127px;
+}
 
 
 ul.fe-function-list li i {

diff --git a/apps/popup/index.html b/apps/popup/index.html
@@ -41,6 +41,8 @@
                     <b></b>编码规范检测</li>
                 <li class="-x-loadtime" @click="runHelper('SHOW_PAGE_LOAD_TIME',0)" v-if="canMeShow.SHOW_PAGE_LOAD_TIME">
                     <b></b>页面性能检测</li>
+                <li class="-x-grid-ruler" @click="runHelper('GRID_RULER',0)" v-if="canMeShow.GRID_RULER">
+                    <b></b>页面栅格标尺</li>
                 <li class="-x-ajax-debugger" title="在开发者工具-Console面板使用" @click="runHelper('AJAX_DEBUGGER',0)" v-if="canMeShow.AJAX_DEBUGGER">
                     <b></b>Ajax调试:<i>{{ ajaxDebugger }}</i></li>
                 <li class="-x-sticky-notes" @click="runHelper('STICKY_NOTES',1)" v-if="canMeShow.STICKY_NOTES">

diff --git a/apps/ruler/index.css b/apps/ruler/index.css
@@ -0,0 +1,97 @@
+#fe-helper-box {
+    position: fixed;
+    left: 1px;
+    bottom: 0;
+    right:8px;
+    z-index: 2147483646;
+    font-size:12px;
+}
+#fe-helper-grid {
+    position:fixed;
+    top:0;
+    left:0;
+    z-index:2147483647;
+    opacity:0.03;
+    overflow:hidden;
+    -webkit-user-select:none;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAANElEQVQYGWP8Jij7n4EIwPnuERGqGBiYwKrQjUTnE2UURBHEQEYGBgZkQ0B8EEAWgwoRogAZUQgA7keT1AAAAABJRU5ErkJggg==) repeat;
+}
+#fe-helper-btn-close-grid {
+    position:fixed;
+    bottom:10px;
+    right:10px;
+    font-size:12px;
+    font-weight:bold;
+    color:#00f;
+    z-index:2147483647;
+    cursor:pointer;
+}
+#fe-helper-btn-close-grid:hover {
+    color:#f00;
+}
+#fe-helper-g-pos {
+    background:none;
+    position:absolute;
+    top:0;
+    left:0;
+    z-index:2147483646;
+    border:1px solid #0b0;
+    border-width:0 1px 1px 0;
+}
+#fe-helper-gp-info {
+    position:absolute;
+    z-index:2147483646;
+    background:#ffc;
+    border:1px solid #666;
+    font-size:12px;
+    text-align:left;
+    padding:2px 10px;
+    display:none;
+    color:#000;
+}
+#fe-helper-ruler-top {
+    position:fixed;
+    top:0;
+    left:0;
+    right:0;
+    height:30px;
+    background:#fc0;
+    border-bottom:1px solid #000;
+    z-index:2147483647;
+    overflow:hidden;
+}
+#fe-helper-ruler-left {
+    position:fixed;
+    top:0;
+    left:0;
+    bottom:0;
+    width:30px;
+    background:#fc0;
+    border-right:1px solid #000;
+    z-index:2147483647;
+    overflow:hidden;
+}
+#fe-helper-ruler-top .h-line{
+    position:absolute;
+    width:1px;
+    background:#000;
+}
+#fe-helper-ruler-top .h-text{
+    position:absolute;
+    top:0;
+    font-size:8px;
+    color:#000;
+}
+#fe-helper-ruler-left .v-line{
+    position:absolute;
+    height:1px;
+    background:#000;
+}
+#fe-helper-ruler-left .v-text{
+    position:absolute;
+    left:0;
+    font-size:8px;
+    color:#000;
+    -webkit-transform:rotate(90deg);
+    margin-top:4px;
+}