diff --git a/extension/css/content.css b/extension/css/content.css index 54efc9e..a7bf860 100644 --- a/extension/css/content.css +++ b/extension/css/content.css @@ -1,2 +1,2 @@ -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)}} /*# sourceMappingURL=content.css.map */ diff --git a/extension/js/background.js b/extension/js/background.js index a55a143..7f1eb84 100644 --- 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 index 4177dc4..6549946 100644 --- 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 index baec062..d00822d 100644 --- 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" diff --git a/sass/content.scss b/sass/content.scss index 208cc97..58043e7 100644 --- a/sass/content.scss +++ b/sass/content.scss @@ -1,4 +1,4 @@ -/*@charset "utf-8";*/ +@charset "utf-8"; body { -webkit-user-select: text; @@ -9,6 +9,7 @@ body { pre { white-space: normal; + font-size: 13px; } #optionBar { @@ -17,70 +18,72 @@ pre { 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 12px 3px 12px;*/ - 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; -} + 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 12px 3px 12px;*/ + padding: 3px 0; + position: relative; + z-index: 10; + display: inline-block; + width: 80px; + text-shadow: 1px 1px rgba(255, 255, 255, 0.3); + + &: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; + } + + &:focus { + outline: 0; + } + } -#buttonFormatted { - margin-left: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} + #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; + } -#buttonPlain { - margin-right: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right: none; -} + #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: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; -} + #collapseAll { + margin-right: 10px; + } -#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 { + margin-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } -#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; -} + #buttonPlain { + margin-right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: none; + } -#buttonFormatted:focus, -#buttonPlain:focus, -#expandAll:focus, -#collapseAll:focus { - outline: 0; + #rawFormatterContainer { + display: none; + margin-top: 15px; + } } #jsonpOpener,