From 3fd30c02c0424a302dee05e8e066995542196142 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E6=96=8C=E6=96=8C?= Date: Tue, 31 Oct 2017 22:42:39 +0800 Subject: [PATCH] add ExpandAll and CollapseAll --- .gitignore | 1 + extension/css/content.css | 234 +++++++++++++++++++++++++++++++++++++- extension/js/content.js | 49 +++++++- 3 files changed, 281 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 338e72d..0bd9934 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ compass_app_log.txt /dist/ /node_modules/ /.sass-cache/ +.DS_Store diff --git a/extension/css/content.css b/extension/css/content.css index f252727..0e4dc10 100644 --- a/extension/css/content.css +++ b/extension/css/content.css @@ -1 +1,233 @@ -body{-webkit-user-select:text;overflow-y:scroll !important;margin:0;position:relative}#optionBar{-webkit-user-select:none;display:block;position:absolute;top:9px;right:17px}#buttonFormatted,#buttonPlain{-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);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{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{-webkit-box-shadow:0px 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 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);background:#ebebeb -webkit-linear-gradient(#e4e4e4, #dfdfdf 40%, #dcdcdc);color:#333}#buttonFormatted:focus,#buttonPlain:focus{outline:0}#jsonpOpener,#jsonpCloser{padding:4px 0 0 8px;color:#000;margin-bottom:-6px}#jsonpCloser{margin-top:0}#formattedJson{padding-left:28px;padding-top:6px}pre{padding:36px 5px 5px 5px}.kvov{display:block;padding-left:20px;margin-left:-20px;position:relative}.collapsed{white-space:nowrap}.collapsed>.blockInner{display:none}.collapsed>.ell:after{content:"…";font-weight:bold}.collapsed>.ell{margin:0 4px;color:#888}.collapsed .kvov{display:inline}.e{width:20px;height:18px;display:block;position:absolute;left:-2px;top:1px;z-index:5;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD1JREFUeNpiYGBgOADE%2F3Hgw0DM4IRHgSsDFOzFInmMAQnY49ONzZRjDFiADT7dMLALiE8y4AGW6LoBAgwAuIkf%2F%2FB7O9sAAAAASUVORK5CYII%3D");background-repeat:no-repeat;background-position:center center;display:block;opacity:0.15}.collapsed>.e{-webkit-transform:rotate(-90deg);width:18px;height:20px;left:0px;top:0px}.e:hover{opacity:0.35}.e:active{opacity:0.5}.collapsed .kvov .e{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}.k{color:#000}#formattingMsg{font:13px "Lucida Grande","Segoe UI","Tahoma";padding:10px 0 0 8px;margin:0;color:#333}#formattingMsg>svg{margin:0 7px;position:relative;top:1px}[hidden]{display:none !important}span{white-space:pre-wrap}@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}#spinner{-webkit-animation:spin 2s 0 infinite}*{-webkit-font-smoothing:antialiased} +body { + -webkit-user-select: text; + overflow-y: scroll !important; + margin: 0; + position: relative +} + +#optionBar { + -webkit-user-select: none; + display: block; + position: absolute; + top: 9px; + right: 17px +} + +#buttonFormatted, #buttonPlain, #buttonExpand, #buttonCollapse { + -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); + 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, #buttonExpand, #buttonCollapse { + 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, #buttonExpand:hover, #buttonCollapse:hover { + -webkit-box-shadow: 0px 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, #buttonExpand:active, #buttonCollapse: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, #buttonExpand.selected, #buttonCollapse.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 +} + +#buttonFormatted:focus, #buttonPlain:focus, #buttonExpand:focus, #buttonCollapse:focus { + outline: 0 +} + +#jsonpOpener, #jsonpCloser { + padding: 4px 0 0 8px; + color: #000; + margin-bottom: -6px +} + +#jsonpCloser { + margin-top: 0 +} + +#formattedJson { + padding-left: 28px; + padding-top: 6px +} + +pre { + padding: 36px 5px 5px 5px +} + +.kvov { + display: block; + padding-left: 20px; + margin-left: -20px; + position: relative +} + +.collapsed { + white-space: nowrap +} + +.collapsed>.blockInner { + display: none +} + +.collapsed>.ell:after { + content: "…"; + font-weight: bold +} + +.collapsed>.ell { + margin: 0 4px; + color: #888 +} + +.collapsed .kvov { + display: inline +} + +.e { + width: 20px; + height: 18px; + display: block; + position: absolute; + left: -2px; + top: 1px; + z-index: 5; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD1JREFUeNpiYGBgOADE%2F3Hgw0DM4IRHgSsDFOzFInmMAQnY49ONzZRjDFiADT7dMLALiE8y4AGW6LoBAgwAuIkf%2F%2FB7O9sAAAAASUVORK5CYII%3D"); + background-repeat: no-repeat; + background-position: center center; + display: block; + opacity: 0.15 +} + +.collapsed>.e { + -webkit-transform: rotate(-90deg); + width: 18px; + height: 20px; + left: 0px; + top: 0px +} + +.e:hover { + opacity: 0.35 +} + +.e:active { + opacity: 0.5 +} + +.collapsed .kvov .e { + 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 +} + +.k { + color: #000 +} + +#formattingMsg { + font: 13px "Lucida Grande", "Segoe UI", "Tahoma"; + padding: 10px 0 0 8px; + margin: 0; + color: #333 +} + +#formattingMsg>svg { + margin: 0 7px; + position: relative; + top: 1px +} + +[hidden] { + display: none !important +} + +span { + white-space: pre-wrap +} + +@-webkit-keyframes spin { + from { + -webkit-transform: rotate(0deg) + } + to { + -webkit-transform: rotate(360deg) + } +} + +#spinner { + -webkit-animation: spin 2s 0 infinite +} + +* { + -webkit-font-smoothing: antialiased +} \ No newline at end of file diff --git a/extension/js/content.js b/extension/js/content.js index b930379..ecb098b 100644 --- a/extension/js/content.js +++ b/extension/js/content.js @@ -81,7 +81,7 @@ jfStyleEl.insertAdjacentHTML( 'beforeend', - 'body{-webkit-user-select:text;overflow-y:scroll !important;margin:0;position:relative}#optionBar{-webkit-user-select:none;display:block;position:absolute;top:9px;right:17px}#buttonFormatted,#buttonPlain{-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);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{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{-webkit-box-shadow:0px 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 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);background:#ebebeb -webkit-linear-gradient(#e4e4e4, #dfdfdf 40%, #dcdcdc);color:#333}#buttonFormatted:focus,#buttonPlain:focus{outline:0}#jsonpOpener,#jsonpCloser{padding:4px 0 0 8px;color:#000;margin-bottom:-6px}#jsonpCloser{margin-top:0}#formattedJson{padding-left:28px;padding-top:6px}pre{padding:36px 5px 5px 5px}.kvov{display:block;padding-left:20px;margin-left:-20px;position:relative}.collapsed{white-space:nowrap}.collapsed>.blockInner{display:none}.collapsed>.ell:after{content:"…";font-weight:bold}.collapsed>.ell{margin:0 4px;color:#888}.collapsed .kvov{display:inline}.e{width:20px;height:18px;display:block;position:absolute;left:-2px;top:1px;z-index:5;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD1JREFUeNpiYGBgOADE%2F3Hgw0DM4IRHgSsDFOzFInmMAQnY49ONzZRjDFiADT7dMLALiE8y4AGW6LoBAgwAuIkf%2F%2FB7O9sAAAAASUVORK5CYII%3D");background-repeat:no-repeat;background-position:center center;display:block;opacity:0.15}.collapsed>.e{-webkit-transform:rotate(-90deg);width:18px;height:20px;left:0px;top:0px}.e:hover{opacity:0.35}.e:active{opacity:0.5}.collapsed .kvov .e{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}.k{color:#000}#formattingMsg{font:13px "Lucida Grande","Segoe UI","Tahoma";padding:10px 0 0 8px;margin:0;color:#333}#formattingMsg>svg{margin:0 7px;position:relative;top:1px}[hidden]{display:none !important}span{white-space:pre-wrap}@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}#spinner{-webkit-animation:spin 2s 0 infinite}*{-webkit-font-smoothing:antialiased}' + 'body{-webkit-user-select:text;overflow-y:scroll !important;margin:0;position:relative}#optionBar{-webkit-user-select:none;display:block;position:absolute;top:9px;right:17px}#buttonFormatted,#buttonPlain,#buttonExpand,#buttonCollapse{-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);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, #buttonExpand, #buttonCollapse{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, #buttonExpand:hover, #buttonCollapse:hover{-webkit-box-shadow:0px 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, #buttonExpand:active, #buttonCollapse: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);background:#ebebeb -webkit-linear-gradient(#e4e4e4, #dfdfdf 40%, #dcdcdc);color:#333}#buttonFormatted:focus,#buttonPlain:focus, #buttonExpand:focus, #buttonCollapse:focus{outline:0}#jsonpOpener,#jsonpCloser{padding:4px 0 0 8px;color:#000;margin-bottom:-6px}#jsonpCloser{margin-top:0}#formattedJson{padding-left:28px;padding-top:6px}pre{padding:36px 5px 5px 5px}.kvov{display:block;padding-left:20px;margin-left:-20px;position:relative}.collapsed{white-space:nowrap}.collapsed>.blockInner{display:none}.collapsed>.ell:after{content:"…";font-weight:bold}.collapsed>.ell{margin:0 4px;color:#888}.collapsed .kvov{display:inline}.e{width:20px;height:18px;display:block;position:absolute;left:-2px;top:1px;z-index:5;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD1JREFUeNpiYGBgOADE%2F3Hgw0DM4IRHgSsDFOzFInmMAQnY49ONzZRjDFiADT7dMLALiE8y4AGW6LoBAgwAuIkf%2F%2FB7O9sAAAAASUVORK5CYII%3D");background-repeat:no-repeat;background-position:center center;display:block;opacity:0.15}.collapsed>.e{-webkit-transform:rotate(-90deg);width:18px;height:20px;left:0px;top:0px}.e:hover{opacity:0.35}.e:active{opacity:0.5}.collapsed .kvov .e{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}.k{color:#000}#formattingMsg{font:13px "Lucida Grande","Segoe UI","Tahoma";padding:10px 0 0 8px;margin:0;color:#333}#formattingMsg>svg{margin:0 7px;position:relative;top:1px}[hidden]{display:none !important}span{white-space:pre-wrap}@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}#spinner{-webkit-animation:spin 2s 0 infinite}*{-webkit-font-smoothing:antialiased}' ) ; // Add custom font name if set - FROM FUTURE @@ -123,12 +123,18 @@ // Create toggleFormat button var buttonPlain = document.createElement('button'), - buttonFormatted = document.createElement('button') ; + buttonFormatted = document.createElement('button'), + buttonExpand = document.createElement('button'), + buttonCollapse = document.createElement('button') ; buttonPlain.id = 'buttonPlain' ; buttonPlain.innerText = 'Raw' ; buttonFormatted.id = 'buttonFormatted' ; buttonFormatted.innerText = 'Parsed' ; buttonFormatted.classList.add('selected') ; + buttonExpand.id = 'buttonExpand'; + buttonExpand.innerText = 'Expand All'; + buttonCollapse.id = 'buttonCollapse'; + buttonCollapse.innerText = 'Collapse All'; var plainOn = false ; buttonPlain.addEventListener( @@ -162,10 +168,27 @@ }, false ) ; + buttonExpand.addEventListener( + 'click', + function () { + expand(getParent(getElementsByClassName(jfContent, 'e'))); + + }, + false + ) ; + buttonCollapse.addEventListener( + 'click', + function () { + collapse(getParent(getElementsByClassName(jfContent, 'e'))); + }, + false + ) ; // Put it in optionBar optionBar.appendChild(buttonPlain) ; optionBar.appendChild(buttonFormatted) ; + optionBar.appendChild(buttonExpand); + optionBar.appendChild(buttonCollapse); // Attach event handlers document.addEventListener( @@ -209,6 +232,28 @@ // console.timeEnd('established port') ; +function getElementsByClassName(node, classname) { + if (node.getElementsByClassName) { + return node.getElementsByClassName(classname); + } else { + var results = new Array(); + var elems = node.getElementsByTagName("*"); + for (var i=0; i