Permalink
Browse files

Rewrite pretty much everything to clean it all up after initial exper…

…iments.
  • Loading branch information...
1 parent e619af4 commit f341abe283bd172461f87eccf8395e5bfdcbb06b @allmarkedup committed Sep 8, 2010
Showing with 702 additions and 142 deletions.
  1. +24 −5 README.md
  2. +2 −2 bookmarklet.js
  3. +141 −60 snoopy.css
  4. +535 −75 snoopy.js
View
@@ -1,9 +1,18 @@
Snoopy
=======
-Snoopy is a bookmarklet that displays some useful information about the current page in an overlaid window. It's intended for use with Mobile Safari based browsers where it's not so easy to 'view source' to poke around under the hood of pages, but is potentially useful as a general shortcut to getting a quick overview of how a page is built.
+Snoopy is a view-source and page info bookmarklet for Mobile Safari-based browsers, where it's not so easy to 'view source' to poke around under the hood of pages. Provides page source, generated source and an overview panel that surfaces page items of interest at a glance.
-**Snoopy is still under very active development and should not be considered stable as yet.**
+It's potentially useful in desktop based browsers as a quick view-source alternative.
+
+**Snoopy is still under very active development and should not be considered stable as yet!**
+
+
+Browser Support
+---------------
+
+This is intended to be used in Mobile Safari-based browsers, although it should work in other modern browsers.
+I am not currently intending to support any versions of IE (although IE9 *may* be supported in the future... but don't hold your breath).
Bookmarklet version notes
@@ -12,10 +21,20 @@ Bookmarklet version notes
The bookmarklet injects a version of the snoopy.js and snoopy.css files into the page that it is called from. **Until a stable release is converged upon there is no guarantee that these will be the latest versions available in the repo**. If you want the latest versions you are best off hosting your own copies and amending the bookmarklet code to pull them from your own server.
-Currently implemented checks:
-----------------------------
+Currently implemented page info checks:
+---------------------------------------
-* Doctype
+* Page info: Doctype, page encoding
* JavaScript libraries: jQuery, jQuery UI, Prototype, Mootools
* Analytics: Google, Reinvigorate, Piwik
+
+Ideas/things to add/things to do
+--------------------------------
+
+* Implement some sort of cross-domain cookie so that Snoopy can have persistent settings
+* Syntax highlighting on source code
+* Microformat detection
+* Make Snoopy window drag-able
+
+
View
@@ -1,5 +1,5 @@
// bookmarklet source: paste this into a bookmark URL field to add as a bookmarklet
-javascript:(function()%7Bvar%20d%3Ddocument%2Cs%2Ce%3Bvar%20el%3Dd.getElementById('snoopy')%3Bif(el)%7Bel.className%3Del.className.replace('closed'%2C'')%3Breturn%7Ds%3Dd.createElement('link')%3Bs.setAttribute('href'%2C'http%3A%2F%2Fsnoopy-js.s3.amazonaws.com%2Fsnoopy.css')%3Bs.setAttribute('rel'%2C'stylesheet')%3Bs.setAttribute('type'%2C'text%2Fcss')%3Bd.getElementsByTagName('head')%5B0%5D.appendChild(s)%3Be%3Dd.createElement('script')%3Be.setAttribute('src'%2C'http%3A%2F%2Fsnoopy-js.s3.amazonaws.com%2Fsnoopy.js')%3Bd.getElementsByTagName('body')%5B0%5D.appendChild(e)%7D)()%3B
+javascript:(function()%7Bvar%20d%3Ddocument%2Cs%2Ce%3Bvar%20el%3Dd.getElementById('snoopy')%3Bif(el)%7Bel.className%3D%2Fclosed%2F.test(el.className)%3Fel.className.replace('closed'%2C'')%3Ael.className%2B'%20closed'%3Breturn%7Ds%3Dd.createElement('link')%3Bs.setAttribute('href'%2C'http%3A%2F%2Fsnoopy-js.s3.amazonaws.com%2Fsnoopy.css')%3Bs.setAttribute('rel'%2C'stylesheet')%3Bs.setAttribute('type'%2C'text%2Fcss')%3Bd.getElementsByTagName('head')%5B0%5D.appendChild(s)%3Be%3Dd.createElement('script')%3Be.setAttribute('src'%2C'http%3A%2F%2Fsnoopy-js.s3.amazonaws.com%2Fsnoopy.js')%3Bd.getElementsByTagName('body')%5B0%5D.appendChild(e)%7D)()%3B
// Uncompressed bookmarklet code:
(function(){
@@ -10,7 +10,7 @@ javascript:(function()%7Bvar%20d%3Ddocument%2Cs%2Ce%3Bvar%20el%3Dd.getElementByI
if ( el )
{
- el.className = el.className.replace('closed','');
+ el.className = /closed/.test(el.className) ? el.className.replace('closed','') : el.className + ' closed';
return;
}
View
@@ -13,135 +13,216 @@
*/
.cleanslate,.cleanslate h1,.cleanslate h2,.cleanslate h3,.cleanslate h4,.cleanslate h5,.cleanslate h6,.cleanslate p,.cleanslate td,.cleanslate dl,.cleanslate tr,.cleanslate dt,.cleanslate ol,.cleanslate form,.cleanslate select,.cleanslate option,.cleanslate pre,.cleanslate div,.cleanslate table,.cleanslate th,.cleanslate tbody,.cleanslate tfoot,.cleanslate caption,.cleanslate thead,.cleanslate ul,.cleanslate address,.cleanslate blockquote,.cleanslate dd,.cleanslate fieldset,.cleanslate li,.cleanslate iframe,.cleanslate strong,.cleanslate legend,.cleanslate em,.cleanslate s,.cleanslate cite,.cleanslate span,.cleanslate input,.cleanslate sup,.cleanslate label,.cleanslate dfn,.cleanslate object,.cleanslate big,.cleanslate q,.cleanslate font,.cleanslate samp,.cleanslate acronym,.cleanslate small,.cleanslate img,.cleanslate strike,.cleanslate code,.cleanslate sub,.cleanslate ins,.cleanslate textarea,.cleanslate var,.cleanslate a,.cleanslate abbr,.cleanslate applet,.cleanslate del,.cleanslate kbd,.cleanslate tt,.cleanslate b,.cleanslate i,.cleanslate hr,.cleanslate article,.cleanslate aside,.cleanslate dialog,.cleanslate figure,.cleanslate footer,.cleanslate header,.cleanslate hgroup,.cleanslate menu,.cleanslate nav,.cleanslate section,.cleanslate time,.cleanslate mark,.cleanslate audio,.cleanslate video{ text-shadow: none !important;background-attachment:scroll!important;background-color:transparent!important;background-image:none!important;background-position:0 0!important;background-repeat:repeat!important;border-color:black!important;border-style:none!important;border-width:medium!important;bottom:auto!important;clear:none!important;clip:auto!important;color:inherit!important;content:normal!important;counter-increment:none!important;counter-reset:none!important;cursor:auto!important;direction:inherit!important;display:inline!important;float:none!important;font-family:inherit!important;font-size:inherit!important;font-style:inherit!important;font-variant:normal!important;font-weight:inherit!important;height:auto!important;left:auto!important;letter-spacing:normal!important;line-height:inherit!important;list-style:disc outside none!important;margin:0!important;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;outline:invert none medium!important;overflow:visible!important;padding:0!important;position:static!important;quotes:"" ""!important;right:auto!important;table-layout:auto!important;text-align:inherit!important;text-decoration:inherit!important;text-indent:0!important;text-transform:none!important;top:auto!important;unicode-bidi:normal!important;vertical-align:baseline!important;visibility:visible!important;white-space:normal!important;width:auto!important;word-spacing:normal!important;z-index:auto!important;border-radius:0!important;-moz-border-radius:0!important;-webkit-border-radius:0!important;opacity:1;}.cleanslate,.cleanslate th,.cleanslate table,.cleanslate h3,.cleanslate h5,.cleanslate p,.cleanslate h1,.cleanslate td,.cleanslate dl,.cleanslate tr,.cleanslate dt,.cleanslate h6,.cleanslate ol,.cleanslate form,.cleanslate select,.cleanslate option,.cleanslate pre,.cleanslate div,.cleanslate tbody,.cleanslate h2,.cleanslate tfoot,.cleanslate caption,.cleanslate thead,.cleanslate h4,.cleanslate ul,.cleanslate address,.cleanslate blockquote,.cleanslate dd,.cleanslate fieldset,.cleanslate li,.cleanslate textarea,.cleanslate hr,.cleanslate article,.cleanslate aside,.cleanslate dialog,.cleanslate figure,.cleanslate footer,.cleanslate header,.cleanslate hgroup,.cleanslate menu,.cleanslate nav,.cleanslate section{display:block!important;}.cleanslate strong{font-weight:bold!important;}.cleanslate em{font-style:italic!important;}.cleanslate kbd,.cleanslate samp,.cleanslate code{font-family:monospace!important;}.cleanslate a,.cleanslate a *,.cleanslate input[type=submit],.cleanslate input[type=radio],.cleanslate input[type=checkbox],.cleanslate select{cursor:pointer!important;}.cleanslate a:hover{text-decoration:underline!important;}.cleanslate button,.cleanslate input[type=submit]{text-align:center!important;}.cleanslate input[type=hidden]{display:none!important;}.cleanslate abbr[title],.cleanslate acronym[title],.cleanslate dfn[title]{cursor:help!important;border-bottom-width:1px!important;border-bottom-style:dotted!important;}.cleanslate ins{background-color:#ff9!important;color:black!important;}.cleanslate del{text-decoration:line-through!important;}.cleanslate blockquote,.cleanslate q{quotes:none!important;}.cleanslate blockquote:before,.cleanslate blockquote:after,.cleanslate q:before,.cleanslate q:after,.cleanslate li:before,.cleanslate li:after{content:""!important;content:none!important;}.cleanslate input,.cleanslate select{vertical-align:middle!important;}.cleanslate select,.cleanslate textarea,.cleanslate input{border:1px solid #ccc!important;}.cleanslate table{border-collapse:collapse!important;border-spacing:0!important;}.cleanslate hr{display:block!important;height:1px!important;border:0!important;border-top:1px solid #ccc!important;margin:1em 0!important;}.cleanslate *[dir=rtl]{direction:rtl!important;}.cleanslate mark{background-color:#ff9!important;color:black!important;font-style:italic!important;font-weight:bold!important;}.cleanslate{font-size:medium!important;line-height:1!important;direction:ltr!important;text-align:left!important;font-family:serif!important;color:black!important;font-style:normal!important;font-weight:normal!important;text-decoration:none!important;}
-
-/* Snoopy.js Styles
+/* Snoopy-specific CSS
============================================== */
-#snoopy {
+#snpy {
background: rgba(0,0,0,0.9) !important;
color: #EEE !important;
font-family: Helvetica, Arial, sans-serif !important;
font-size: 13px !important;
- width: 400px !important;
- min-height: 200px !important;
- padding: 12px 10px 5px 10px !important;
- position: fixed !important;
- top: 20px !important;
- right: 20px !important;
+ position: absolute !important;
+ top: 0 !important;
+ left: 0 !important;
-webkit-border-radius: 6px !important;
z-index: 10000 !important;
+ max-width: 90% !important;
}
-#snoopy.closed {
+#snpy > div {
+ margin: 0 10px !important;
+}
+
+#snpy.closed {
display: none !important;
}
-#snoopy a {
- font-family: Georgia, Palatino, 'Palatino Linotype', serif !important;
- font-size: 11px !important;
- color: #FFA800 !important;
+#snpy a:link,
+#snpy a:visited,
+#snpy a:hover,
+#snpy a:active {
+ color: #FFA800 !important;
}
-#snoopy h1 {
- font-size: 14px !important;
+#snpy .body {
+ min-width: 400px !important;
+}
+
+/* head */
+
+#snpy .head {
+ position: relative !important;
+ padding: 12px 0 5px 0 !important;
+}
+
+#snpy h1 {
+ font-size: 15px !important;
font-weight: normal !important;
margin-bottom: 10px !important;
color: #FFF !important;
position: relative !important;
+ width: 70% !important;
+ color: #FFA800 !important;
+ font-family: Georgia, Palatino, 'Palatino Linotype', serif !important;
+ padding-top: 2px !important;
+}
+
+#snpy h1:before {
+/* content : '\272D \00a0' !important;*/
}
-#snoopy h1 span {
+#snpy h1 .version {
font-family: Georgia, Palatino, 'Palatino Linotype', serif !important;
- color: #888 !important;
+ color: #666 !important;
font-size: 11px !important;
+ margin-left: 5px !important;
}
-#snoopy #snoopy_close {
+#snpy .head .close {
font-family: Helvetica, Arial, sans-serif !important;
position: absolute !important;
right: 0 !important;
- top: -4px !important;
- padding: 5px 8px !important;
+ top: 12px !important;
+ padding: 6px 10px !important;
background: #555 !important;
color: #999 !important;
display: inline-block;
-webkit-border-radius: 6px !important;
- font-size: 11px !important;
+ font-size: 12px !important;
text-decoration: none !important;
}
-#snoopy_close:hover,
-#snoopy_close:active {
+#snpy .head .close:hover,
+#snpy .head .close:active {
color: #FFA800 !important;
}
-#snoopy .snoopy_module {
- padding : 10px !important;
+#snpy .head .close:before {
+ content: "\2715 \00a0" !important;
+}
+
+/* tabs and panels */
+
+#snpy .tabs li {
+ display: inline-block !important;
+}
+
+#snpy .tabs a {
+ display: inline-block !important;
+ padding: 8px 10px !important;
+ text-transform: lowercase !important;
+ color: #777 !important;
+}
+
+#snpy .tabs a:hover {
+ color: #FFF !important;
+ text-decoration: none !important;
+}
+
+#snpy .tabs li.active a {
background: #444 !important;
- margin-bottom: 5px !important;
+ color: #FFF !important;
}
-#snoopy .snoopy_inner {
- padding-top: 10px !important;
+#snpy .panel {
+ background: #444 !important;
+ padding: 10px !important;
+ display: none !important;
+ min-height: 150px !important;
}
-#snoopy h2 {
+#snpy .panel.active {
+ display: block !important;
+}
+
+/* modules */
+
+#snpy .module {
+ margin-bottom: 10px !important;
+ padding: 5px 0 0 0 !important;
+ width: 380px !important;
+}
+
+#snpy .module h2 {
font-size: 14px !important;
font-weight: normal !important;
border-bottom: 1px solid #555 !important;
padding-bottom: 6px !important;
+ margin-bottom: 10px !important;
color: #999 !important;
position: relative !important;
+ font-family: Georgia, Palatino, 'Palatino Linotype', serif !important;
+ font-style: italic !important;
}
-/* module 'menus' */
-
-#snoopy h2 .snoopy_menu {
- position: absolute !important;
- right: 0 !important;
- top: -3px !important;
-}
+/* key/val pair lists */
-#snoopy h2 .snoopy_menu a {
- margin-left: 10px !important;
+#snpy dt {
+ display: inline-block !important;
+ width: 100px !important;
+ margin-bottom: 8px !important;
+ color: #888 !important;
}
-#snoopy h2 .snoopy_menu a:before {
- content: '\272D \00a0' !important;
+#snpy dd {
+ display: inline-block !important;
+ width: 260px !important;
+ margin-bottom: 8px !important;
}
-/* lists */
+/* test result lists */
-#snoopy li {
- margin-bottom: 6px !important;
+#snpy .tests li {
+ margin-bottom: 8px !important;
+ width: 180px !important;
+ display: inline-block !important;
}
-#snoopy ul.cols li {
- width: 190px !important;
- display: inline-block !important;
+#snpy .tests li.negative {
+ color: #888 !important;
}
-#snoopy li strong {
- font-weight: normal !important;
- color: #999 !important;
+#snpy .tests li.negative:before {
+ content: "\2715 \00a0" !important;
}
-#snoopy .snoopy_active {
- color: #FFF !important;
+#snpy .tests li.positive:before {
+ content: "\2713 \00a0" !important;
}
-#snoopy .snoopy_disabled {
- color: #777 !important;
+/* source code viewers */
+
+#snpy pre.source {
+ background: #FFF !important;
+ color: #333 !important;
+ width: 100%;
+ line-height: 1.3 !important;
+ font-family: 'Bitstream Vera Sans Mono', 'Courier', monospace !important;
+ overflow-y: auto !important;
+ white-space: pre-wrap !important;
+ white-space: -moz-pre-wrap !important;
+ padding: 10px 0 !important;
}
-#snoopy .snoopy_active:before {
- content: "\2713 \00a0" !important;
+#snpy pre.source code {
+ white-space: pre-wrap !important;
+ white-space: -moz-pre-wrap !important;
}
-#snoopy .snoopy_disabled:before {
- content: "\2715 \00a0" !important;
+/* footer */
+
+#snpy .footer {
+ padding: 10px 0 12px 0 !important;
+ font-size: 11px !important;
+ color: #555 !important;
+ text-transform: lowercase !important;
+ font-family: Georgia, Palatino, 'Palatino Linotype', serif !important;
}
-/* Individual module styles
-============================================== */
+#snpy .footer a {
+ color: #555 !important;
+}
+#snpy .footer a:hover {
+ color: #888 !important;
+}
Oops, something went wrong.

0 comments on commit f341abe

Please sign in to comment.