JSON自动格式化中增加“折叠/展开”所有节点的功能

来自网友 @hirra 提供

chrome/manifest.json

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

chrome/online.manifest.json

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

chrome/static/css/fe-jsonformat.css

@@ -1,12 +1,12 @@
 #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);
-    -webkit-user-select:none;background:-webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+    -webkit-user-select:none;background:-webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);outline: none;
     border:1px solid #aaa;color:#444;font-size:12px;margin-bottom:0px;min-width:4em;padding:3px 0;
     position:relative;z-index:10;display:inline-block;width:80px;
     text-shadow:1px 1px rgba(255,255,255,0.3)}
-#buttonFormatted,#buttonCollapseAll{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
-#buttonPlain{margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
+#buttonCollapseAll{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;}
+#buttonFormatted{margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
 #btnDownload {
     padding: 4px 10px;
     text-decoration: none;
@@ -18,7 +18,7 @@
     background:#ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);border-color:#999;color:#222}
 #buttonFormatted:active,#buttonPlain:active{-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.2);
     background:#ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);color:#333}
-#buttonFormatted.selected,#buttonPlain.selected{-webkit-box-shadow:inset 0px 1px 5px rgba(0,0,0,0.2);
+#buttonFormatted.selected,#buttonPlain.selected,#buttonCollapseAll.selected{-webkit-box-shadow:inset 0px 1px 5px rgba(0,0,0,0.2);
     background:#ebebeb -webkit-linear-gradient(#e4e4e4, #dfdfdf 40%, #dcdcdc);color:#333}
 #jsonpOpener,#jsonpCloser{padding:4px 0 0 8px;color:black;margin-bottom:-6px}
 #jsonpCloser{margin-top:0}

chrome/static/js/jsonformat/json-format-ent.js

@@ -79,40 +79,31 @@ var JsonFormatEntrance = (function () {
                 optionBar.id = 'optionBar';
 
                 // Create toggleFormat button
-                var buttonPlain = document.createElement('button'),
-                    buttonFormatted = document.createElement('button'),
+                var buttonFormatted = document.createElement('button'),
                     buttonCollapseAll = document.createElement('button');
-                buttonPlain.id = 'buttonPlain';
-                buttonPlain.innerText = '元数据';
                 buttonFormatted.id = 'buttonFormatted';
                 buttonFormatted.innerText = '格式化';
                 buttonFormatted.classList.add('selected');
                 buttonCollapseAll.id = 'buttonCollapseAll';
-                buttonCollapseAll.innerText = '折叠所有'
+                buttonCollapseAll.innerText = '折叠所有';
 
                 var plainOn = false;
-                buttonPlain.addEventListener('click', function () {
-                    // When plain button clicked...
-                    if (!plainOn) {
-                        plainOn = true;
-                        pre.style.display = "";
-                        jfContent.style.display = "none";
-
-                        buttonFormatted.classList.remove('selected');
-                        buttonPlain.classList.add('selected');
-                    }
-                }, false);
-
                 buttonFormatted.addEventListener('click', function () {
                     // When formatted button clicked...
                     if (plainOn) {
                         plainOn = false;
                         pre.style.display = "none";
                         jfContent.style.display = "";
-
-                        buttonFormatted.classList.add('selected');
-                        buttonPlain.classList.remove('selected');
+                        $(this).text('元数据');
+                    }else{
+                        plainOn = true;
+                        pre.style.display = "";
+                        jfContent.style.display = "none";
+                        $(this).text('格式化');
                     }
+
+                    $(this).parent().find('button').removeClass('selected');
+                    $(this).addClass('selected');
                 }, false);
 
                 buttonCollapseAll.addEventListener('click', function () {
@@ -125,11 +116,13 @@ var JsonFormatEntrance = (function () {
                             buttonCollapseAll.innerText = '折叠所有';
                             expand(document.getElementsByClassName('objProp'));
                         }
+
+                        $(this).parent().find('button').removeClass('selected');
+                        $(this).addClass('selected');
                     }
                 }, false);
 
                 // Put it in optionBar
-                optionBar.appendChild(buttonPlain);
                 optionBar.appendChild(buttonFormatted);
                 optionBar.appendChild(buttonCollapseAll);
 
@@ -161,8 +154,6 @@ var JsonFormatEntrance = (function () {
     var lastKvovIdGiven = 0;
 
     function collapse(elements) {
-        console.log('elements', elements) ;
-
         var el, i, blockInner, count;
 
         for (i = elements.length - 1; i >= 0; i--) {
@@ -313,7 +304,7 @@ var JsonFormatEntrance = (function () {
             pre.id = 'jfContent_pre';
             document.body.appendChild(pre);
         }
-        pre.innerHTML = jsonStr;
+        pre.innerHTML = JSON.stringify(JSON.parse(jsonStr),null,4);
         pre.style.display = "none";
 
         jfStyleEl = document.getElementById('jfStyleEl');