推出FeHelper全新UI

用全新UI面对新的一年

chrome/manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "WEB前端助手(FeHelper)",
-    "version": "6.4",
+    "version": "7.0",
     "manifest_version": 2,
 
     "default_locale": "zh_CN",

chrome/online.manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "WEB前端助手(FeHelper)",
-    "version": "6.4",
+    "version": "7.0",
     "manifest_version": 2,
 
     "default_locale": "zh_CN",

chrome/static/css/fe-codebeautify.css

@@ -1,67 +1,6 @@
 @import url("syntax-highlighter.css");
-@import url('fe-common.css');
+@import url("bootstrap.min.css");
 
-html {
-    background:url(../img/baidufe_bj.gif);
-    font-size: 14px;
-    color:#333;
-}
-.mod-code {
-    width:980px;
-    margin:0 auto;
-    position: relative;
-}
-.mod-code .syntaxhighlighter {
-    max-height: 500px;
-    overflow-y: auto;
-}
-.mod-code fieldset {
-    border : 1px solid #bbb;
-    margin:0 0 10px;
-}
-.mod-code fieldset legend {
-    padding:0 5px;
-}
-.mod-code fieldset legend span {
-    color: #f00;
-    font-weight: bold;
-}
-.mod-code .format-item {
-    line-height: 16px;
-}
-.mod-code .format-item textarea{
-    width:945px;
-    height:120px;
-    padding:2px 5px;
-    margin:0 auto;
-    resize:none;
-}
-.mod-code .format-item button{
-    width:80px;
-    height:30px;
-    float: right;
-}
-.mod-code .rst-item {
-    position: relative;
-    padding-top:0px;
-}
-.mod-code .btn-opts {
-    -webkit-user-select:none;
-}
-/* ref fe-endecode.css */
-.-e-btn {
-    float:right;
-    height:30px;
-    width:70px;
-    font-size:13px;
-    padding:5px;
-    cursor:pointer;
-    background: #f1f1f1;
-    border: 1px solid #aaa;
-    color: #b00;
-    margin-top: 6px;
-}
-.-e-x-btn .-e-btn:hover {
-    background: #fff;
-}
-/* ref fe-endecode.css END */
+#codeSource {
+    height: 150px;
+}

chrome/static/css/fe-common.css

@@ -1,42 +0,0 @@
-.-e-x-container {
-    width:980px;
-    margin:0 auto;
-    padding:30px 0 50px 0;
-    min-height:400px;
-}
-.-e-x-radio label:hover {
-    color:#333;
-    cursor:pointer;
-}
-.-e-zxl-ta-src {
-    width:954px;
-    height:100px;
-}
-.-e-x-btn  {
-    height: 30px;
-    line-height: 30px;
-    margin-top: 10px;
-}
-.-e-x-btn .-e-x-radio {
-    float:left;
-    font-size:14px;
-}
-.-e-x-btn .-e-btn {
-    float:right;
-    height:30px;
-    width:70px;
-    font-size:13px;
-    padding:5px;
-    cursor:pointer;
-    background: #f1f1f1;
-    border: 1px solid #aaa;
-    color: #b00;
-}
-.-e-x-btn .-e-btn:hover {
-    background: #fff;
-}
-.-e-x-btn .-e-clear-btn {
-    margin-left:20px;
-    font-weight:normal;
-    color: #666;
-}

chrome/static/css/fe-endecode.css

@@ -1,39 +1,8 @@
-html {
-	background:#f9f9f9;
-	font-size: 14px;
-}
-body{
-    font-family: Tahoma, arial, simsun;
-	color:#666;
-}
+@import url("bootstrap.min.css");
 
-.mod-endecode {
-	width:980px;
-	margin:0 auto;
-}
-.mod-endecode fieldset {
-	border : 1px solid #bbb;
-	padding:10px;
-	width:960px;
-	margin-bottom: 10px;
-}
-.mod-endecode fieldset legend {
-	padding:0 5px;
-	color:red;
-}
-.-e-x-rst {
-    margin: 20px 0;
-	display:none;
-}
-.zxl-ta-rst {
-	width:980px;
-	height:100px;
-}
-.-e-x-footer {
-	text-align:center;
-	font-size:12px;
-	margin-top:30px;
-	color:#00c;
-	padding:5px;
-	display:none;
+#srcText {
+    height: 100px;
 }
+#rstCode {
+    height: 280px;
+}

chrome/static/css/fe-imagebase64.css

@@ -1,5 +1,6 @@
+@import url("bootstrap.min.css");
+
 html {
-    background:#f9f9f9;
 	font-size: 14px;
 }
 body{
@@ -11,24 +12,6 @@ body{
 	width:980px;
 	margin:0 auto;
 }
-.mod-imagebase64 fieldset {
-	border : 1px solid #bbb;
-	padding:10px;
-	width:960px;
-	margin-bottom: 10px;
-    background: #fff;
-}
-.mod-imagebase64 fieldset legend {
-	padding:0 5px;
-	color:red;
-}
-
-.-e-x-container {
-	width:980px;
-	margin:0 auto;
-	padding:30px 0 50px 0;
-	min-height:400px;
-}
 table {
     width:100%;
     table-layout: fixed;
@@ -71,7 +54,7 @@ td .x-panel .x-tips {
 #preview {display: none;max-width: 260px;max-height: 260px;margin-top:10px;border:2px solid #ccc;}
 form {display: none}
 td textarea {
-    width: 470px;
+    width: 490px;
     height:405px;
     padding:0;margin:0;
     resize:none;outline:none;

chrome/static/css/fe-jsonformat.css

@@ -1,3 +1,5 @@
+@import url("bootstrap.min.css");
+
 #jfContent{-webkit-user-select:text;margin:0;}
 #optionBar{-webkit-user-select:none;display:block;position:absolute;top:0px;right:0px}
 #buttonFormatted,#buttonPlain,#btnDownload,#buttonCollapseAll{-webkit-border-radius:2px;-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.1);
@@ -59,40 +61,14 @@
 }
 
 html {
-    background: #f9f9f9;
     font-size: 14px;
     color:#333;
     direction: ltr;
 }
 html body {
-    background: inherit;
     direction: inherit;
     cursor: default;
 }
-.mod-json {
-    width:980px;
-    margin:0 auto;
-    position: relative;
-}
-.mod-json fieldset {
-    border : 1px solid #bbb;
-    margin:0 0 10px;
-}
-.mod-json fieldset legend {
-    padding:0 5px;
-    color:red;
-}
-.mod-json .format-item {
-    line-height: 16px;
-}
-.mod-json .format-item textarea{
-    width:945px;
-    height:120px;
-    padding:2px 5px;
-    margin:0 auto;
-    resize:none;
-    border-color: #ccc;
-}
 .mod-json .format-item button{
     width:80px;
     height:30px;
@@ -113,27 +89,13 @@ html body {
     top: 0px;
     left: 0px;
 }
+#jsonSource {
+    height: 120px;
+}
 .mod-json .callback-name {
     font-weight: bolder;
     color: #a00;
 }
-/* ref fe-endecode.css */
-.-e-btn {
-    float:right;
-    height:30px;
-    width:70px;
-    font-size:13px;
-    padding:5px;
-    cursor:pointer;
-    background: #f1f1f1;
-    border: 1px solid #aaa;
-    color: #b00;
-    margin-top: 6px;
-}
-.-e-x-btn .-e-btn:hover {
-    background: #fff;
-}
-/* ref fe-endecode.css END */
 
 #jfContent .x-hover {
     outline:1px solid #cdc;
@@ -150,3 +112,6 @@ html body {
     float: left;
     color: #f00;
 }
+#btnDownload{
+    width: 102px;
+}

chrome/static/css/fe-qrcode.css

@@ -1,57 +1,14 @@
-html {
-    background:#f9f9f9;
-	font-size: 14px;
-	color:#333;
-}
-#fieldset_marker {
-    width:780px;
-    padding:10px;
-    margin:5px auto;
-    line-height: 30px;
-    background: #fff;
-    font-size: 12px;
-}
+@import url("bootstrap.min.css");
 
-#tab1_text {
-    width:700px;
-    height:80px;
-}
-#confirm_button {
-    float: right;
-}
-label {
-    font-weight:bold;
-    vertical-align:top;
-}
-#tabs-5 label {
-    width: 100px;
-    text-align: right;
-    display: inline-block;
-}
-#tabs-5 input {
-    width: 500px;
+.row .x-sizes {
+    margin-right: 20px;
 }
 
-#fieldset_qr {
-    width: 780px;
-    margin:5px auto;
-    background: #fff;
-    display: none;
-}
-#preview{
-    margin:20px;
-    text-align:center;
-}
-fieldset {
-    border: 1px solid #aaa;
+.row .x-colors {
+    margin-right: 20px;
 }
-legend {
-    font-size: 14px;
-    color: #b00;
-}
-textarea {
-    width: 600px;
-    height: 50px;
+#codeSource {
+    height: 100px;
 }
 canvas {
     border: 1px solid #ddd;
@@ -62,6 +19,10 @@ canvas {
     left: -10000px;
     top:-10000px;
 }
-#opt_fc {
-    width:56px;
+hr.x-hr  {
+    margin: 2px 0;
+}
+#preview {
+    padding: 5px;
+    text-align: center;
 }

chrome/static/css/fe-regexp.css

@@ -1,153 +1,115 @@
+@import url("bootstrap.min.css");
+
 html {
-    background:#f9f9f9;
-	font-size: 14px;
+    font-size:14px
 }
-body{
-	font-family:Arial,"simsun";
-	color:#666;
+body {
+    background-color: #eee;
+    font-family:Arial, "simsun";
+    color:#666
 }
-
-.mod-regexp {
-	width:980px;
-	margin:0 auto;
+.pannel-select{
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 255px;
+    height: 30px;
 }
-.mod-regexp fieldset {
-	border : 1px solid #bbb;
-	padding:10px;
-	width:960px;
-	margin-bottom: 10px;
+.reglist_select{
+    padding: 0 0;
+    height: 24px;
 }
-.mod-regexp fieldset legend {
-	padding:0 5px;
-	color:red;
+.reg_link{
+    display: inline-block;
+    float: right;
+    text-align: right;
+    font-size: 12px;
+    margin-top: 4px;
 }
-
-.-e-x-container {
-	width:980px;
-	margin:0 auto;
-	padding:10px 0 20px 0;
-	min-height:80px;
+.reg_pre{
+    border: none;
+    background: transparent;
 }
-.-e-x-radio label:hover {
-	color:#333;
-	cursor:pointer;
+.reg_reg_input{
+    resize:none;
 }
-textarea {
-    width:954px;
-    font-size: 14px;
+.reg_textarea{
+    padding: 0;
+    width: 954px;
     resize: none;
-    padding: 4px;
-    font: 100% "courier new",monospace;
-    overflow-y: hidden;
+    font: 100%"courier new", monospace;
 }
-.-e-x-btn  {
-    height: 30px;
-    line-height: 30px;
-    margin-top: 10px;
-}
-.-e-x-btn .-e-x-radio {
-	float:left;
-	font-size:14px;
-}
-.-e-x-btn .-e-btn {
-	float:right;
-	height:30px;
-	width:70px;
-	font-size:13px;
-	padding:5px;
-	cursor:pointer;
-    background: #f1f1f1;
-    border: 1px solid #aaa;
-    color: #b00;
-}
-.-e-x-btn .-e-btn:hover {
-    background: #fff;
-}
-.-e-x-btn .-e-clear-btn {
-	margin-left:20px;
-	font-weight:normal;
-    color: #666;
-}
-.-e-x-rst {
-    margin: 20px 0;
+#srcWrapper{
+    padding: 12px;
+}
+.wrapper #srcBackground{
+    padding: 0;
+}
+.mod-regexp {
+    width: 980px;
+    margin: 0 auto;
+    padding: 0;
+    background: #FFF;
 }
 #srcWrapper {
-    background: #fff;
-    border: 1px solid #aaa;
-    min-height: 50px;
-    position: relative;
+    background:#fff;
+    border:1px solid #ccc;
+    min-height:50px;
+    position:relative;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
+    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
 }
+
 #srcBackground {
-    padding: 4px;
-    margin: 0;
-    position: absolute;
-    z-index: 1;
-    width: 954px;
+    padding:4px;
+    margin:0;
+    position:absolute;
+    z-index:1;
+    width:954px;
     word-break: break-all;
-    line-height: 14px;
+    line-height:14px;
 }
-#srcBackground i,#srcBackground b{
-    font-style: normal;
-    font-weight: normal;
-    font-size: 14px;
-    margin: 0;
-    padding: 0;
+#srcBackground i, #srcBackground b {
     font: 100% "courier new",monospace;
-    background: #fff;
-    color: #fff;
+    font-style:normal;
+    font-weight:normal;
+    font-size:14px;
+    margin:0;
+    padding:0;
+    background:#fff;
+    color:#fff
 }
 #srcBackground b {
-    background: #dd0;
-    color: #dd0;
+    background:#dd0;
+    color:#dd0
 }
 #srcCode {
-    background: transparent;
-    margin: 0;
-    border: none;
-    font-size: 14px;
-    position: absolute;
-    z-index: 2;
-    outline: none;
-    overflow-y: hidden;
+    background:transparent;
+    margin:0;
+    border:none;
+    font-size:14px;
+    position:relative;
+    z-index:2;
+    outline:none;
+    overflow-y:hidden
 }
+
 #rstCount {
-    color: #f00;
+    color:#f00
 }
 #rstCode {
-    padding: 3px;
-}
-table {
-    width: 100%;
-    table-layout: fixed;
-    border-collapse: collapse;
-}
-td,th {
-    border: 1px solid #aaa;
-    background: #fff;
-    padding-left: 5px;
-}
-tr:nth-child(2n+1) td{
-    background: #deedf7;
-}
-tr:hover td {
-    background: #f7f7ba;
-}
-td.num,th.num {
-    width: 30px;
-}
-th {
-    background: #2c4359;
-    color: #fff;
-}
-th.num {
-    font-weight: bold;
+    padding:3px
 }
 #regTip {
-    font-size: 12px;
-    color: #d00;
-    display: none;
+    font-size:12px;
+    color:#d00;
+    display:none
 }
 .x-tip {
-    font-size: 12px;
-    color: #00b;
+    font-size:12px;
+    color:#00b
 }

chrome/static/css/fe-timestamp.css

@@ -1,70 +1,26 @@
-html {
-    background:#f9f9f9;
-	font-size: 14px;
-}
-body{
-	font-family:Arial,"simsun";
-	color:#666;
-}
+@import url("bootstrap.min.css");
 
-.mod-timestamp {
-	width:950px;
-	margin:20px auto 0;
+.mod-timestamp{
+    width:950px;
+    margin:20px auto 0;
     padding:5px 15px;
-    background: #fff;
-    border: 1px solid #bbb;
-}
-.mod-timestamp fieldset {
-	border : 1px solid #bbb;
-	margin: 20px 0 50px;
+    background:#fff;
+    border:1px solid #bbb
 }
-.mod-timestamp fieldset legend {
-	padding:0 5px;
-	color:#000000;
+.mod-timestamp .x-input div{
+    margin:5px 0
 }
-.mod-timestamp .x-input div {
-    margin: 5px 0;
+#txtNowDate,#txtNow,#txtDesStamp,#txtSrcStamp,#txtDesDate,#txtLocale{
+    width:300px;
 }
-
-#txtNowDate,#txtNow,#txtDesStamp,#txtSrcStamp,#txtDesDate,#txtLocale {
-    width: 300px;
-    height: 26px;
-    line-height: 26px;
-    padding:0 5px ;
+#txtNowDate,#txtNow,#txtDesStamp,#txtDesDate{
+    color:#666;
+    font-weight:500
 }
-
-#txtNowDate,#txtNow,#txtDesStamp,#txtDesDate {
-    color: #f00;
-    font-weight: bold;
+#txtSrcYear,#txtSrcMonth,#txtSrcDay,#txtSrcHour,#txtSrcMinute,#txtSrcSecond{
+    width:40px;
 }
 
-#txtSrcYear,#txtSrcMonth,#txtSrcDay,#txtSrcHour,#txtSrcMinute,#txtSrcSecond {
-    width: 40px;
-    height: 26px;
-    line-height: 26px;
-    padding:0 5px ;
-}
-
-.-e-btn {
-	height:30px;
-	width:70px;
-	font-size:13px;
-	padding:5px;
-	cursor:pointer;
-    background: #f1f1f1;
-    border: 1px solid #aaa;
-    color: #b00;
-    margin: 0 10px;
-}
-.-e-btn:hover {
-    background: #fff;
-}
-
-.-e-x-footer {
-	text-align:center;
-	font-size:12px;
-	margin-top:30px;
-	color:#00c;
-	padding:5px;
-	display:none;
-}
+.mod-time-input{
+    width: 80px;
+}

chrome/static/js/endecode/endecode.js

@@ -25,11 +25,36 @@ baidu.ed = (function () {
             rstCode.val(baidu.endecode.base64Encode(baidu.endecode.utf8Encode(srcText)));
         } else if (jQuery("#base64Decode").attr("checked") == true) {
             rstCode.val(baidu.endecode.utf8Decode(baidu.endecode.base64Decode(srcText)));
-        } else {
+        } else if (jQuery("#md5Encode").attr("checked") == true) {
             rstCode.val(hex_md5(srcText));
+        } else if (jQuery("#html2js").attr("checked") == true) {
+            rstCode.val(html2js(srcText));
         }
     };
 
+    /**
+     * 将html代码拼接为js代码
+     * @returns {string}
+     */
+    var html2js = function (txt) {
+        var htmlArr = txt.replace(/\\/g, "\\\\").replace(/\\/g, "\\/").replace(/\'/g, "\\\'").split('\n');
+        var len = htmlArr.length;
+        var outArr = [];
+        outArr.push("var htmlCodes = [\n");
+        jQuery.each(htmlArr, function (index, value) {
+            if (value !== "") {
+                if (index === len - 1) {
+                    outArr.push("\'" + value + "\'");
+                } else {
+                    outArr.push("\'" + value + "\',\n");
+                }
+            }
+
+        });
+        outArr.push("\n].join(\"\");");
+        return outArr.join("");
+    };
+
     /**
      * 绑定按钮的点击事件
      */

chrome/static/js/jsonformat/fe-jsonformat.js

@@ -5,18 +5,14 @@ baidu.jsonformat = (function () {
 
     "use strict";
 
-    // 在页面还没加载完成，但消息已经过来的时候，不能使用jquery
-    var _g = function(id){
-        return document.getElementById(id);
-    };
-
     /**
      * 执行format操作
      * @private
      */
     var _format = function () {
-        _g('errorMsg').innerHTML = '';
-        var source = _g('jsonSource').value;
+        $('#errorMsg').html('');
+        $('#modJsonResult').hide();
+        var source = $('#jsonSource').val();
         if (!source) {
             return;
         }
@@ -37,7 +33,7 @@ baidu.jsonformat = (function () {
                 jsonObj = new Function("return " + newSource)();
             }
         } catch (ex) {
-            _g('errorMsg').innerHTML = ex;
+            $('#errorMsg').html(ex.message);
             return;
         }
 
@@ -52,7 +48,7 @@ baidu.jsonformat = (function () {
                 }
             }
         } catch (ex) {
-            _g('errorMsg').innerHTML = ex;
+            $('#errorMsg').html(ex.message);
             return;
         }
 
@@ -69,6 +65,8 @@ baidu.jsonformat = (function () {
             JsonFormatEntrance.clear();
             JsonFormatEntrance.format(source);
 
+            $('#modJsonResult').show();
+
             // 如果是JSONP格式的，需要把方法名也显示出来
             if (funcName != null) {
                 $('#jfCallbackName_start').html(funcName + '(');

chrome/static/js/mod/mod_background.js

@@ -22,5 +22,4 @@ importScript("js/core/fe-const.js");
 importScript("js/core/network.js");
 importScript("js/fe-option.js");
 importScript("js/notification/fe-notification.js");
-importScript("js/fe-background.js");
-importScript("js/google_analytics.js");
+importScript("js/fe-background.js");

chrome/static/js/mod/mod_codebeautify.js

@@ -26,5 +26,4 @@ importScript("js/syntaxhighlighter/shCore.js");
 importScript("js/syntaxhighlighter/shBrushCss.js");
 importScript("js/syntaxhighlighter/shBrushJScript.js");
 importScript("js/syntaxhighlighter/shBrushXml.js");
-importScript("js/codebeautify/codebeautify.js");
-importScript("js/google_analytics.js");
+importScript("js/codebeautify/codebeautify.js");

chrome/static/js/mod/mod_endecode.js

@@ -22,4 +22,3 @@ importScript("js/core/fe-const.js");
 importScript("js/endecode/endecode-lib.js");
 importScript("js/endecode/md5.js");
 importScript("js/endecode/endecode.js");
-importScript("js/google_analytics.js");

chrome/static/js/mod/mod_jsonformat.js

@@ -21,5 +21,4 @@ importScript("js/core/core.js");
 importScript("js/core/fe-const.js");
 importScript("js/jsonformat/json-format-dealer.js");
 importScript("js/jsonformat/json-format-ent.js");
-importScript("js/jsonformat/fe-jsonformat.js");
-importScript("js/google_analytics.js");
+importScript("js/jsonformat/fe-jsonformat.js");

chrome/static/js/mod/mod_options.js

@@ -20,7 +20,6 @@
 importScript("js/core/core.js");
 importScript("js/core/fe-const.js");
 importScript("js/fe-option.js");
-importScript("js/google_analytics.js");
 
 jQuery(function(){
     baidu.feOption.init();

chrome/static/js/mod/mod_qrcode.js

@@ -20,5 +20,4 @@
 importScript("js/core/core.js");
 importScript("js/core/fe-const.js");
 importScript("js/endecode/endecode-lib.js");
-importScript("js/qrcode/fe-qrcode.js");
-importScript("js/google_analytics.js");
+importScript("js/qrcode/fe-qrcode.js");

chrome/static/js/qrcode/fe-qrcode.js

@@ -11,57 +11,6 @@ baidu.qrcode = (function () {
      */
     var text = '';
 
-    /**
-     * 获取要用来生成二维码的文本数据
-     * @private
-     */
-    var _createText = function () {
-        $("#preview > img").attr("src", "");
-        var current_tab = $("#tabs").tabs('option', 'selected');
-        switch (current_tab) {
-            case 0 :
-                text = $.trim($("#tabs-1 #tab1_text").attr("value"));
-                break;
-            case 1 :
-                text = "tel:" + $.trim($("#tabs-2 #tab2_telno").attr("value"));
-                break;
-            case 2 :
-                text = $("#tabs-3 [name=tab3_type]:checked").attr("value") + ":" + $.trim($("#tabs-3 #tab3_telno").attr("value")) + ":" + $.trim($("#tabs-3 #tab3_message").attr("value"));
-                break;
-            case 3 :
-                text = "mailto:" + $.trim($("#tabs-4 #tab4_email").attr("value"));
-                break;
-            case 4 :
-                text = "BEGIN:VCARD\nVERSION:3.0\n";
-                var v = $.trim($("#tabs-5 #tab5_FormattedName").attr("value"));
-                text += v ? ("FN:" + v + "\n") : "";
-
-                v = $.trim($("#tabs-5 #tab5_Telephone").attr("value"));
-                text += v ? ("TEL:" + v + "\n") : "";
-
-                v = $.trim($("#tabs-5 #tab5_Email").attr("value"));
-                text += v ? ("EMAIL:" + v + "\n") : "";
-
-                v = $.trim($("#tabs-5 #tab5_X-MSN").attr("value"));
-                text += v ? ("X-MSN:" + v + "\n") : "";
-
-                v = $.trim($("#tabs-5 #tab5_Organization").attr("value"));
-                text += v ? ("ORG:" + v + "\n") : "";
-
-                v = $.trim($("#tabs-5 #tab5_Title").attr("value"));
-                text += v ? ("TITLE:" + v + "\n") : "";
-
-                v = $.trim($("#tabs-5 #tab5_Address").attr("value"));
-                text += v ? ("ADR:" + v + "\n") : "";
-
-                v = $.trim($("#tabs-5 #tab5_URL").attr("value"));
-                text += v ? ("URL:" + v + "\n") : "";
-                text += "END:VCARD";
-                break;
-        }
-        return text;
-    };
-
     /**
      * 创建二维码生成的参数
      * @private
@@ -136,7 +85,7 @@ baidu.qrcode = (function () {
      * 创建二维码
      */
     var _createQrCode = function () {
-        text = _createText();
+        text = $('#codeSource').val();
         if (text) {
             $('#preview').html('').qrcode(_createOptions());
         } else {
@@ -186,13 +135,6 @@ baidu.qrcode = (function () {
      * @private
      */
     var _bindEvents = function () {
-        var current_tab_id = 'tabs-1';
-
-        $("#tabs").tabs()
-            .bind("tabsselect", function (event, ui) {
-                current_tab_id = ui.panel.id;
-            })
-            .tabs("select", 0);
         $("#confirm_button").button().click(function () {
             _createQrCode();
         });
@@ -226,7 +168,7 @@ baidu.qrcode = (function () {
         chrome.runtime.onMessage.addListener(function (request, sender, callback) {
             if (request.type == MSG_TYPE.TAB_CREATED_OR_UPDATED && request.event == 'qrcode') {
                 if (request.content) {
-                    document.getElementById('tab1_text').value = (request.content);
+                    document.getElementById('codeSource').value = (request.content);
                     setTimeout(_createQrCode, 50);
                 }
             }
@@ -234,7 +176,7 @@ baidu.qrcode = (function () {
 
         $(function () {
             _bindEvents();
-            $('#tab1_text').focus();
+            $('#codeSource').focus();
         });
     };
 

chrome/static/js/regexp/regexp.js

@@ -10,8 +10,8 @@ $.fn.extend({
     textareaAutoHeight:function (options) {
         this._options = {
             minHeight:0,
-            maxHeight:1000
-        }
+            maxHeight:100000
+        };
 
         this.init = function () {
             for (var p in options) {
@@ -69,8 +69,8 @@ baidu.regexp = (function () {
     }
 
     var _buildTable = function (rstArray) {
-        var tbl = ['<table>'];
-        tbl.push('<tr><th class="num">序号</th><th>匹配结果</th><th>在原字符串中的位置</th></tr>')
+        var tbl = ["<table class='table table-bordered table-striped table-condensed table-hover'>"];
+        tbl.push('<tr class="active"><th class="num">序号</th><th>匹配结果</th><th>在原字符串中的位置</th></tr>')
         $.each(rstArray, function (i, item) {
             tbl.push('<tr id="' + TR_ID_PREFIX + item.index + '" data-index="' + item.index + '">');
             tbl.push('<td class="num">' + (i + 1) + '</td>'
@@ -78,7 +78,7 @@ baidu.regexp = (function () {
                 + '<td class="index">' + item.index + '</td>');
             tbl.push('</tr>');
         });
-        tbl.push('</table>')
+        tbl.push('</table>');
         return tbl.join('');
     };
 
@@ -139,15 +139,15 @@ baidu.regexp = (function () {
     };
 
     var _emptyTable = function (message) {
-        var tbl = ['<table>'];
-        tbl.push('<tr><th class="num">序号</th><th>匹配结果</th></tr>')
+        var tbl = ["<table class='table table-bordered table-striped table-condensed table-hover'>"];
+        tbl.push('<tr class="active"><th class="num">序号</th><th>匹配结果</th></tr>');
         tbl.push('<tr><td colspan="2">' + message + '</td></tr>');
         tbl.push('</table>')
         return tbl.join('');
     };
 
     var _dealRegMatch = function (e) {
-        srcWrapperElm.height(srcElm.height());
+        srcWrapperElm.height(srcElm.height() + 24);
 
         var regTxt = regElm.val().trim();
         var srcTxt = srcElm.val().trim();
@@ -180,7 +180,7 @@ baidu.regexp = (function () {
             } else {
                 rstElm.html(_buildTable(rst));
                 rstCount.html(rst.length + '个');
-                _highlight(srcTxt, rst);
+                _highlight(srcElm.val(), rst);
             }
         }
     };
@@ -198,6 +198,7 @@ baidu.regexp = (function () {
             // 输入框自适应高度
             regElm.textareaAutoHeight({minHeight:34});
             srcElm.textareaAutoHeight({minHeight:50});
+            srcBackgroundElm.textareaAutoHeight({minHeight:50});
 
             // 监听两个输入框的按键、paste、change事件
             $('#regText,#srcCode').keyup(_dealRegMatch).change(_dealRegMatch)

chrome/template/fehelper_codebeautify.html

@@ -8,26 +8,37 @@
 		<script type="text/javascript" src="../static/js/mod/mod_codebeautify.js"></script>
     </head>
     <body>
-        <div class="mod-code">
-            <div class="format-item clearfix">
-                <fieldset>
-                    <legend>代码美化：<span id="codeTitle">Javascript</span></legend>
-                    <textarea id="codeSource" placeholder="在这里粘贴您需要进行美化的代码"></textarea>
-                    <div class="btn-opts -e-x-btn">
-                        <input id="codeTypeJs" name="codeType" type="radio" value="Javascript" checked>
-                        <label for="codeTypeJs">JS代码美化</label>
-                        <input id="codeTypeCss" name="codeType" type="radio" value="CSS">
-                        <label for="codeTypeCss">CSS代码美化</label>
-                        <input id="codeTypeHTML" name="codeType" type="radio" value="HTML">
-                        <label for="codeTypeHTML">HTML代码美化</label>
-                        <button id="btnFormat" class="-e-btn">格式化</button>
-                    </div>
-                </fieldset>
+    <div class="wrapper">
+        <div class="panel panel-default" style="margin-bottom: 0px;">
+            <div class="panel-heading">
+                <h3 class="panel-title">
+                    <a href="http://www.baidufe.com" target="_blank" class="x-a-high">
+                        <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：代码美化 - <span id="codeTitle">Javascript</span></h3>
             </div>
+        </div>
+        <div class="panel-body mod-code">
+
+            <div class="row">
+                <textarea class="form-control mod-textarea" id="codeSource" placeholder="在这里粘贴需要进行美化的代码"></textarea>
+            </div>
+            <div class="row ui-mt-10">
+
+                <div class="radio ui-d-ib">
+                    <label><input id="codeTypeJs" name="codeType" type="radio" value="Javascript" checked>JS代码美化</label>
+                </div>
+
+                <div class="radio ui-d-ib ui-ml-10">
+                    <label><input id="codeTypeCss" name="codeType" type="radio" value="CSS">CSS代码美化</label>
+                </div>
+
+                <div class="radio ui-d-ib ui-ml-10">
+                    <label><input id="codeTypeHTML" name="codeType" type="radio" value="HTML">HTML代码美化</label>
+                </div>
 
-            <div class="rst-item">
-                <div id="jfContent"></div>
+                <button id="btnFormat" class="btn btn-success ui-fl-r">格式化</button>
             </div>
+            <div class="row" id="jfContent"></div>
         </div>
+    </div>
     </body>
 </html>

chrome/template/fehelper_imagebase64.html

@@ -1 +1 @@
-<!DOCTYPE HTML>
<html lang="zh-CN">
    <head>
        <title>图片Base64编码工具（DataURI数据）</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../static/css/fe-imagebase64.css" />
        <script type="text/javascript" src="../static/js/core/jquery-1.5.min.js"></script>
		<script type="text/javascript" src="../static/js/mod/mod_imagebase64.js"></script>
    </head>
    <body>
        <div class="mod-imagebase64 -e-x-container">
            <fieldset>
                <legend>图片Base64编码工具</legend>
                <table>
                    <tr>
                        <td><div class="x-panel">
                            <img id="preview" alt="">
                            <div class="x-tips">
                                <a id="upload" href="#">选择图片</a><br>
                                或者选择一张图片拖拽图片到这里来
                            </div>
                        </div></td>
                        <td><textarea id="result" title="点击自动选择" placeholder="内容会自动生成..." readonly></textarea></td>
                    </tr>
                </table>
                <form action="#">
                    <input type="file" id="file" accept=".jpg,.jpeg,.gif,.png,.bmp">
                </form>
                <img id="img" alt="">
            </fieldset>
        </div>
    </body>
</html>
+<!DOCTYPE HTML>
<html lang="zh-CN">
    <head>
        <title>图片Base64编码工具（DataURI数据）</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../static/css/fe-imagebase64.css" />
        <script type="text/javascript" src="../static/js/core/jquery-1.5.min.js"></script>
		<script type="text/javascript" src="../static/js/mod/mod_imagebase64.js"></script>
    </head>
    <body>
        <div class="wrapper">
            <div class="panel panel-default" style="margin-bottom: 0px;">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a href="http://www.baidufe.com" target="_blank" class="x-a-high">
                            <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：图片Base64编码工具</h3>
                </div>
            </div>
            <div class="panel-body mod-imagebase64">
                <div class="row">
                <table>
                    <tr>
                        <td><div class="x-panel">
                            <img id="preview" alt="">
                            <div class="x-tips">
                                <a id="upload" href="#">选择图片</a><br>
                                或者选择一张图片拖拽图片到这里来
                            </div>
                        </div></td>
                        <td><textarea id="result" title="点击自动选择" placeholder="内容会自动生成..." readonly></textarea></td>
                    </tr>
                </table>
                <form action="#">
                    <input type="file" id="file" accept=".jpg,.jpeg,.gif,.png,.bmp">
                </form>
                <img id="img" alt="">
                </div>
            </div>
        </div>
    </body>
</html>

chrome/template/fehelper_jsonformat.html

@@ -4,31 +4,36 @@
         <title>Json格式化查看工具</title>
         <meta charset="UTF-8">
         <link rel="stylesheet" href="../static/css/fe-jsonformat.css" />
-        <link rel="stylesheet" href="../static/css/fe-common.css" />
         <script type="text/javascript" src="../static/js/core/jquery-1.5.min.js"></script>
 		<script type="text/javascript" src="../static/js/mod/mod_jsonformat.js"></script>
     </head>
     <body>
-        <div class="mod-json">
-            <div class="format-item clearfix">
-                <fieldset>
-                    <legend>JSON格式化查看：请在下面粘贴你的JSON字符串</legend>
-                    <textarea id="jsonSource" placeholder="在这里粘贴您需要进行格式化的JSON代码"></textarea>
-                    <div><span id="errorMsg"></span><button id="btnFormat" class="-e-btn">格式化</button></div>
-                </fieldset>
+        <div class="wrapper">
+            <div class="panel panel-default" style="margin-bottom: 0px;">
+                <div class="panel-heading">
+                    <h3 class="panel-title">
+                        <a href="http://www.baidufe.com" target="_blank" class="x-a-high">
+                            <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：JSON格式化查看</h3>
+                </div>
             </div>
+            <div class="panel-body mod-json">
+                <div class="row">
+                    <textarea class="form-control mod-textarea" id="jsonSource" placeholder="在这里粘贴您需要进行格式化的JSON代码"></textarea>
+                    <button id="btnFormat" class="btn btn-primary ui-fl-r ui-mt-10">格式化</button><span id="errorMsg"></span>
+                </div>
 
-            <div class="rst-item">
-                <div id="formattingMsg">
-                    <svg id="spinner" width="16" height="16" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" version="1.1">
-                        <path d="M 150,0 a 150,150 0 0,1 106.066,256.066 l -35.355,-35.355 a -100,-100 0 0,0 -70.711,-170.711 z" fill="#3d7fe6"></path>
-                    </svg>
-                    加载中...
+                <div class="row ui-mt-20 ui-d-n rst-item" id="modJsonResult">
+                    <div id="formattingMsg">
+                        <svg id="spinner" width="16" height="16" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" version="1.1">
+                            <path d="M 150,0 a 150,150 0 0,1 106.066,256.066 l -35.355,-35.355 a -100,-100 0 0,0 -70.711,-170.711 z" fill="#3d7fe6"></path>
+                        </svg>
+                        加载中...
+                    </div>
+                    <div id="jfCallbackName_start" class="callback-name"></div>
+                    <div id="jfContent"></div>
+                    <pre id="jfContent_pre"></pre>
+                    <div id="jfCallbackName_end" class="callback-name"></div>
                 </div>
-                <div id="jfCallbackName_start" class="callback-name"></div>
-                <div id="jfContent"></div>
-                <pre id="jfContent_pre"></pre>
-                <div id="jfCallbackName_end" class="callback-name"></div>
             </div>
         </div>
     </body>

chrome/template/fehelper_qrcode.html

@@ -5,116 +5,62 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" href="../static/css/fe-qrcode.css" />
     <script type="text/javascript" src="../static/js/core/jquery-1.5.min.js"></script>
-    <link rel="stylesheet" href="../static/vendor/jquery-ui-1.8/css/jquery-ui-1.8.16.custom.color_datauri.css" />
     <script type="text/javascript" src="../static/vendor/jquery-ui-1.8/js/jquery-ui-1.8.11.custom.min.js"></script>
     <script type="text/javascript" src="../static/js/qrcode/jquery.colorpicker.js"></script>
     <script type="text/javascript" src="../static/js/qrcode/jquery.qrcode.min.js"></script>
     <script type="text/javascript" src="../static/js/mod/mod_qrcode.js"></script>
 </head>
 <body>
-    <fieldset id="fieldset_marker">
-        <legend>选项</legend>
-        <div id="tabs">
-            <ul>
-                <li><a href="#tabs-1">文本内容</a></li>
-                <li><a href="#tabs-2">电话号码</a></li>
-                <li><a href="#tabs-3">短信&amp;彩信</a></li>
-                <li><a href="#tabs-4">邮件地址</a></li>
-                <li><a href="#tabs-5">通讯录</a></li>
-            </ul>
-            <div id="tabs-1">
-                <p>
-                    <textarea name="tab1_text" id="tab1_text" placeholder="可在这里输入文字、网址等"></textarea>
-                </p>
-            </div>
-            <div id="tabs-2">
-                <p>
-                    <label for="tab2_telno">电话号码：</label>
-                    <input name="tab2_telno" type="text" id="tab2_telno" size="20" maxlength="50"/>
-                </p>
+
+    <div class="wrapper">
+        <div class="panel panel-default" style="margin-bottom: 0px;">
+            <div class="panel-heading">
+                <h3 class="panel-title">
+                    <a href="http://www.baidufe.com" target="_blank" class="x-a-high">
+                        <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：二维码生成器</h3>
             </div>
-            <div id="tabs-3">
-                <p>
-                    <label for="tab3_telno">号码：</label>
-                    <input name="tab3_telno" type="text" id="tab3_telno" size="30"/>
+        </div>
 
-                    <br/>
-                    <label for="tab3_message">信息：</label>
-                    <textarea name="tab3_message" cols="30" rows="4" id="tab3_message"></textarea>
+        <div class="panel-body mod-json">
 
-                    <br/>
-                    <label for="smsto">类型：</label>
-                    <input name="tab3_type" type="radio" id="smsto" value="SMSTO" checked="checked"/>
-                    <label for="smsto">短信</label>
-                    <input name="tab3_type" type="radio" id="mmsto" value="MMSTO"/>
-                    <label for="mmsto">彩信</label>
-                </p>
-            </div>
-            <div id="tabs-4">
-                <p>
-                    <label for="tab4_email">邮件地址：</label>
-                    <input name="tab4_email" type="text" id="tab4_email" size="30" maxlength="200"/>
-                </p>
+            <div class="row">
+                <textarea class="form-control mod-textarea" id="codeSource" placeholder="在这里填写需要生成二维码的任意内容"></textarea>
             </div>
-            <div id="tabs-5">
-                <p>
-                    <label for="tab5_FormattedName">姓　名：</label>
-                    <input type="text" name="tab5_FormattedName" id="tab5_FormattedName"/>
 
-                    <br/>
-                    <label for="tab5_Telephone">电　话：</label>
-                    <input type="text" name="tab5_Telephone" id="tab5_Telephone"/>
+            <div class="row ui-mt-10">
 
-                    <br/>
-                    <label for="tab5_Email">邮件地址：</label>
-                    <input type="text" name="tab5_Email" id="tab5_Email"/>
+                <div class="ui-d-ib x-sizes">
+                    尺寸：<input name="opt_width" type="text" id="opt_width" value="200" size="4" maxlength="4"/>
+                </div>
+                <div class="ui-d-ib x-colors">
+                    颜色：<input type="text" id="opt_fc" value="#000000" size="10" readonly/>
+                </div>
 
-                    <br/>
-                    <label for="tab5_Organization">公司名称：</label>
-                    <input type="text" name="tab5_Organization" id="tab5_Organization"/>
+                <div class="radio ui-d-ib x-icons">
+                    图标：<label><input id="remove_icon" name="qr_icon" type="radio" value="0" checked>不要</label>
+                </div>
 
-                    <br/>
-                    <label for="tab5_Title">职　位：</label>
-                    <input type="text" name="tab5_Title" id="tab5_Title"/>
+                <div class="radio ui-d-ib ui-ml-10">
+                    <label><input id="default_icon" name="qr_icon" type="radio" value="1">默认</label>
+                </div>
 
-                    <br/>
-                    <label for="tab5_Address">联系地址：</label>
-                    <input type="text" name="tab5_Address" id="tab5_Address"/>
+                <div class="radio ui-d-ib ui-ml-10">
+                    <label><input id="upload_icon" name="qr_icon" type="radio" value="2">上传</label>
+                    (提示:支持直接拖拽一个图标到页面)
+                </div>
 
-                    <br/>
-                    <label for="tab5_URL">网站地址：</label>
-                    <input type="text" name="tab5_URL" id="tab5_URL"/>
-                    <br/>
-                </p>
+                <button id="confirm_button" class="btn btn-success ui-fl-r">生成QR图</button>
             </div>
-        </div>
 
-        <div id="options">
-            <input type="button" name="button" id="confirm_button" value="生成QR图"/>
-            <p>
-                <span>
-                    尺寸：<input name="opt_width" type="text" id="opt_width" value="200" size="4" maxlength="4"/>
-                </span>
-                <span style="margin-left: 20px">
-                    颜色：<input type="text" id="opt_fc" value="#000000" size="10" readonly/>
-                </span>
-                <span style="margin-left: 20px">
-                    图标：<input id="remove_icon" name="qr_icon" type="radio" value="0" checked><label for="remove_icon">不要</label>
-                    <input id="default_icon" name="qr_icon" type="radio" value="1"><label for="default_icon">默认</label>
-                    <input id="upload_icon" name="qr_icon" type="radio" value="2"><label for="upload_icon">上传</label>
-                    (提示:支持直接拖拽一个图标到页面)
-                </span>
-            </p>
-        </div>
-        <div></div>
-    </fieldset>
-
-    <fieldset id="fieldset_qr">
-        <legend>结果</legend>
+            <div class="row ui-mt-20">
+                <h4>结果</h4>
+                <hr class="x-hr"/>
+                <div id="preview"></div>
+            </div>
 
-        <div id="preview"></div>
-    </fieldset>
+        </div>
 
+    </div>
     <div class="x-logo">
         <img src="../static/img/fe-48.png" alt="#" id="logo_default"/>
         <img src="../static/img/fe-48.png" alt="#" id="logo"/>