added option to minify/beautify raw content

dardesantis · Feb 25, 2017 · 37759ed · 37759ed
1 parent 02deac0
commit 37759ed
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 64 deletions.
diff --git a/extension/css/content.css b/extension/css/content.css
diff --git a/extension/js/background.js b/extension/js/background.js
@@ -129,7 +129,7 @@
     }
 
     // Record current version (in case future update wants to know)
-    localStorage.djsonVersion = '0.2.4';
+    localStorage.djsonVersion = '0.2.5';
 
     // Template elements
     var baseSpan = document.createElement('span');

diff --git a/extension/js/content.js b/extension/js/content.js
@@ -77,7 +77,7 @@
                     document.head.appendChild(djsonStyleEl);
                     djsonStyleEl.insertAdjacentHTML(
                         'beforeend',
-                        'body{-webkit-user-select:text;overflow-y:scroll !important;margin:0;position:relative}pre{white-space:normal;}#optionBar{-webkit-user-select:none;display:block;position:absolute;top:9px;right:17px}#buttonFormatted,#buttonPlain,#expandAll,#collapseAll{-webkit-border-radius:2px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);-webkit-user-select:none;background:-webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);border:1px solid #aaa;color:#444;font-size:12px;margin-bottom:0;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)}#collapseAll{margin-right:10px}#buttonFormatted{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}#buttonFormatted:hover,#buttonPlain:hover,#expandAll:hover,#collapseAll:hover{-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.2);background:#ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);border-color:#999;color:#222}#buttonFormatted:active,#buttonPlain:active{-webkit-box-shadow:inset 0 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 0 1px 5px rgba(0,0,0,0.2);background:#ebebeb -webkit-linear-gradient(#e4e4e4, #dfdfdf 40%, #dcdcdc);color:#333}#buttonFormatted:focus,#buttonPlain:focus,#expandAll:focus,#collapseAll:focus{outline:0}#jsonpOpener,#jsonpCloser{padding:4px 0 0 8px;color:black;margin-bottom:-6px}#jsonpCloser{margin-top:0}#formattedJson{padding-left:28px;padding-top:6px}.dObj{display:block;padding-left:20px;margin-left:-20px;position:relative}.collapsed{white-space:nowrap}.collapsed>.blockInner{display:none}.collapsed>.ellipsis:after{content:"…";font-weight:bold}.collapsed>.ellipsis{margin:0 4px;color:#888}.collapsed .dObj{display:inline}.expander{width:20px;height:18px;display:block;position:absolute;left:-2px;top:1px;z-index:5;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD1JREFUeNpiYGBgOADE%2F3Hgw0DM4IRHgSsDFOzFInmMAQnY49ONzZRjDFiADT7dMLALiE8y4AGW6LoBAgwAuIkf%2F%2FB7O9sAAAAASUVORK5CYII%3D") no-repeat center center;opacity:0.15}.collapsed>.expander{-webkit-transform:rotate(-90deg);width:18px;height:20px;left:0;top:0}.expander:hover{opacity:0.35}.expander:active{opacity:0.5}.collapsed .dObj .expander{display:none}.blockInner{display:block;padding-left:24px;border-left:1px dotted #bbb;margin-left:2px}#formattedJson,#jsonpOpener,#jsonpCloser{color:#333;font:13px/18px monospace}#formattedJson{color:#444}.b{font-weight:bold}.s{color:#0B7500;word-wrap:break-word}a:link,a:visited{text-decoration:none;color:inherit}a:hover,a:active{text-decoration:underline;color:#050}.bl,.nl,.n{font-weight:bold;color:#1A01CC}.key{color:black}#formattingMsg{font:13px "Lucida Grande", "Segoe UI", "Tahoma";padding:10px 0 0 8px;margin:0;color:#333}#formattingMsg .loader{position:relative;top:5px;border:4px solid #f3f3f3;border-radius:50%;border-top:4px solid #3498db;width:12px;height:12px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;display:inline-block}[hidden]{display:none !important}span{white-space:pre-wrap}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}'
+                        'body{-webkit-user-select:text;overflow-y:scroll !important;margin:0;position:relative}pre{white-space:normal;font-size:13px}#optionBar{-webkit-user-select:none;display:block;position:absolute;top:9px;right:17px}#optionBar button{-webkit-border-radius:2px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);-webkit-user-select:none;background:-webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);border:1px solid #aaa;color:#444;font-size:12px;margin-bottom:0;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)}#optionBar button:hover{-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.2);background:#ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);border-color:#999;color:#222}#optionBar button:focus{outline:0}#optionBar #buttonFormatted:active,#optionBar #buttonPlain:active{-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);background:#ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);color:#333}#optionBar #buttonFormatted.selected,#optionBar #buttonPlain.selected{-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,0.2);background:#ebebeb -webkit-linear-gradient(#e4e4e4, #dfdfdf 40%, #dcdcdc);color:#333}#optionBar #collapseAll{margin-right:10px}#optionBar #buttonFormatted{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}#optionBar #buttonPlain{margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}#optionBar #rawFormatterContainer{display:none;margin-top:15px}#jsonpOpener,#jsonpCloser{padding:4px 0 0 8px;color:black;margin-bottom:-6px}#jsonpCloser{margin-top:0}#formattedJson{padding-left:28px;padding-top:6px}.dObj{display:block;padding-left:20px;margin-left:-20px;position:relative}.collapsed{white-space:nowrap}.collapsed>.blockInner{display:none}.collapsed>.ellipsis:after{content:"…";font-weight:bold}.collapsed>.ellipsis{margin:0 4px;color:#888}.collapsed .dObj{display:inline}.expander{width:20px;height:18px;display:block;position:absolute;left:-2px;top:1px;z-index:5;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD1JREFUeNpiYGBgOADE%2F3Hgw0DM4IRHgSsDFOzFInmMAQnY49ONzZRjDFiADT7dMLALiE8y4AGW6LoBAgwAuIkf%2F%2FB7O9sAAAAASUVORK5CYII%3D") no-repeat center center;opacity:0.15}.collapsed>.expander{-webkit-transform:rotate(-90deg);width:18px;height:20px;left:0;top:0}.expander:hover{opacity:0.35}.expander:active{opacity:0.5}.collapsed .dObj .expander{display:none}.blockInner{display:block;padding-left:24px;border-left:1px dotted #bbb;margin-left:2px}#formattedJson,#jsonpOpener,#jsonpCloser{color:#333;font:13px/18px monospace}#formattedJson{color:#444}.b{font-weight:bold}.s{color:#0B7500;word-wrap:break-word}a:link,a:visited{text-decoration:none;color:inherit}a:hover,a:active{text-decoration:underline;color:#050}.bl,.nl,.n{font-weight:bold;color:#1A01CC}.key{color:black}#formattingMsg{font:13px "Lucida Grande", "Segoe UI", "Tahoma";padding:10px 0 0 8px;margin:0;color:#333}#formattingMsg .loader{position:relative;top:5px;border:4px solid #f3f3f3;border-radius:50%;border-top:4px solid #3498db;width:12px;height:12px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;display:inline-block}[hidden]{display:none !important}span{white-space:pre-wrap}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}'
                     );
 
                     djsonContent.innerHTML =
@@ -115,6 +115,33 @@
                         }
                     );
 
+                    // Create minify/beutify buttons
+                    var minifyRaw = document.createElement('button');
+                    minifyRaw.id = 'minifyRaw';
+                    minifyRaw.innerText = 'Minify';
+                    minifyRaw.addEventListener(
+                        'click',
+                        function () {
+                            var pre = document.getElementsByTagName("pre")[0];
+                            pre.innerText = JSON.stringify(window.djson);
+                        }
+                    );
+
+                    var beautifyRaw = document.createElement('button');
+                    beautifyRaw.id = 'beutifyRaw';
+                    beautifyRaw.innerText = 'Beautify';
+                    beautifyRaw.addEventListener(
+                        'click',
+                        function () {
+                            var pre = document.getElementsByTagName("pre")[0];
+                            pre.innerText = JSON.stringify(window.djson, undefined, 4);
+                        }
+                    );
+                    var rawFormatterContainer = document.createElement('div');
+                    rawFormatterContainer.id = 'rawFormatterContainer';
+                    rawFormatterContainer.appendChild(minifyRaw);
+                    rawFormatterContainer.appendChild(beautifyRaw);
+
                     // Create toggleFormat button
                     buttonPlain = document.createElement('button');
                     buttonFormatted = document.createElement('button');
@@ -138,6 +165,7 @@
                                 buttonPlain.classList.add('selected');
                                 buttonExpand.style.display = 'none';
                                 buttonCollapse.style.display = 'none';
+                                rawFormatterContainer.style.display = 'block';
                             }
                         },
                         false
@@ -156,6 +184,7 @@
                                 buttonPlain.classList.remove('selected');
                                 buttonExpand.style.display = 'inline-block';
                                 buttonCollapse.style.display = 'inline-block';
+                                rawFormatterContainer.style.display = 'none';
                             }
                         },
                         false
@@ -166,6 +195,7 @@
                     optionBar.appendChild(buttonCollapse);
                     optionBar.appendChild(buttonPlain);
                     optionBar.appendChild(buttonFormatted);
+                    optionBar.appendChild(rawFormatterContainer);
 
                     // Attach event handlers
                     document.addEventListener(

diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,11 +1,12 @@
 {
-  "name": "DJSON Viewer and Formatter",
+  "name": "DJSON Viewer and Formatter. JSON",
   "short_name": "DJSON Viewer",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "manifest_version": 2,
-  "description": "Extension to format and view JSON, from Web or File.",
+  "description": "Extension to format and view JSON, from Web, Input or File.",
   "homepage_url": "https://github.com/dardesantis/DJSON-Viewer",
   "minimum_chrome_version": "21",
+  "offline_enabled": true,
   "icons": {
        "128": "icons/128.png",
        "32": "icons/32.png"