tweaks to the toggle and styling field

3 files changed, 40 insertions, 12 deletions

diff --git a/bookmarklet/ffffallback.css b/bookmarklet/ffffallback.css
index 70bd992..63c7c9b 100644
--- a/bookmarklet/ffffallback.css
+++ b/bookmarklet/ffffallback.css
@@ -22,6 +22,7 @@
 }
 
 #ffffallback-controller .expanded .ffffallback-disclosure span{
+  -moz-transform: rotate(-180deg);
   -webkit-transform:rotate(-180deg);
   text-shadow:rgba(0,0,0,0.8) 0 1px 0;
   position:relative;
@@ -50,6 +51,8 @@
   top:7px;
   text-decoration: none;
   text-shadow:rgba(0,0,0,0.8) 0 -1px 0;
+  -moz-transition-property: -moz-transform;
+  -moz-transition-duration: 0.125s;
   -webkit-transition-property: -webkit-transform;
   -webkit-transition-duration: 0.25s;
 }
@@ -94,6 +97,8 @@ body.ffffallback-hide-original #ffffallback-content-container {
 
 #ffffallback-controller h1 {
   color:#313131;
+  background-color: #cecece;
+  background-image: -moz-linear-gradient(0deg, #cecece, #b3b3b3);
   background-image: -webkit-gradient(linear, 0 top, 0 bottom, from( #cecece ), to( #b3b3b3 ));
   border-bottom:1px solid rgba(0,0,0,0.2);
   text-shadow:rgba(255,255,255,0.6) 0 1px 0;
@@ -198,7 +203,7 @@ body.ffffallback-hide-original #ffffallback-content-container {
   margin-top: 0;
   height: 100% !important;
   max-height: 500px;
-  overflow-y: scroll;
+  overflow-y: auto;
   -moz-box-shadow:    inset 0 2px 5px black;
   -webkit-box-shadow: inset 0 2px 5px black;
   -o-box-shadow:      inset 0 2px 5px black;
@@ -249,7 +254,7 @@ body.ffffallback-hide-original #ffffallback-content-container {
   color: #eee;
   font:normal 13px/normal Arial, sans-serif;
   padding: 5px;
-  width:160px;
+  width:150px;
   margin-top:10px;
 }
 input[type=text]::-webkit-input-placeholder {
diff --git a/bookmarklet/ffffallback.js b/bookmarklet/ffffallback.js
index b75f593..47ac39d 100644
--- a/bookmarklet/ffffallback.js
+++ b/bookmarklet/ffffallback.js
@@ -1,4 +1,16 @@
 (function() {
+  if(navigator.userAgent.indexOf('MSIE') >= 0) {
+    return alert('FFFFALLBACK only works in Chrome, Safari, and Firefox right now. :(\n\nSorry,\n - Mark');
+  }
+
+  if(typeof(console) == 'undefined') {
+    var console = {
+      log: function(message) {
+        //  alert(message);
+      }
+    }
+  }
+
   var $ = {
     memo: {},
   }
@@ -18,6 +30,12 @@
   };
 
   $.getComputedStyleOfElement = function(elem) {
+    if(!elem.tagName) {
+      alert("WHAT THE FUCK");
+      window.bum = elem;
+      return null;
+    }
+
     /**
      *  Based on this blog entry:
      *  http://blog.stchur.com/2006/06/21/css-computed-style/
@@ -25,6 +43,7 @@
     if (typeof elem.currentStyle != 'undefined') {
       return elem.currentStyle;
     }
+
     return document.defaultView.getComputedStyle(elem, null);
   };
 
@@ -45,7 +64,6 @@
 
   $.getFontsFromDeclaration = function(fontDeclaration) {
     if($.getFontsFromDeclaration.memo[fontDeclaration]) {
-      console.log('memo');
       return $.getFontsFromDeclaration.memo[fontDeclaration];
     }
 
@@ -60,12 +78,14 @@
   $.getFontsFromDeclaration.memo = {};
 
   $.getElementFont = function(elem) {
-    var style = $.getComputedStyleOfElement(elem);
-    if(style && style['font-family']) {
+    var style = $.getComputedStyleOfElement(elem) || {};
+    if(style['font-family']) {
       return style['font-family'];
-    } else {
-      return null;
+    } else if(style['fontFamily']) {
+      return style['fontFamily'];
     }
+
+    return null;
   }
 
   $.unique = function(array) {
@@ -126,6 +146,9 @@
     var elemFont = $.getElementFont(elem);
     var fonts = elemFont ? [elemFont] : [];
     $.each(elem.childNodes, function(childElem) {
+      if(!childElem.tagName) {
+        return;
+      }
       fonts = fonts.concat($.getAllFontsInUse(childElem));
     });
     return $.removeBoringFonts($.unique(fonts)).sort();
@@ -171,7 +194,7 @@
 
   $.addFontClasses = function(elem, parentFont) {
     parentFont = parentFont || null;
-    var font = $.getElementFont(elem);
+    var font = elem.tagName ? $.getElementFont(elem) : false;
 
     if(elem.getAttribute) {
       var className = false;
@@ -233,8 +256,8 @@
       document.body.appendChild(styleElement);
     }
 
-    styleElement.innerText = cssText;
-    console.log('Did set', cssText);
+    styleElement.innerHTML = cssText;
+    console.log('Did set' + cssText);
   };
 
   window.$fallback = $;
@@ -271,6 +294,7 @@
   </form>\
   ');
     controller.setAttribute('id', 'ffffallback-controller');
+    console.log('adding controller');
     document.body.appendChild(controller);
     var fontList = document.getElementById('ffffallback-fonts');
     fontList.innerHTML = '';
@@ -292,7 +316,7 @@
     var fontClass, row;
     $.each($.getAllFontsInUse(document.body), function(font) {
       fontClass = $.getClassForFont(font);
-      row = $.createElementWithContent('li', '<b>' + font + '</b><input type="text" value="" placeholder="Fallback font. Ex. Verdana" class="ffffallback-specify-font" data:font-class="' + fontClass + '" /><a href="#" class="ffffallback-disclosure"><span>&#x25bc;</span></a><textarea class="ffffallback-more-values" placeholder="Adjust styles. Ex. color:red;"></textarea>');
+      row = $.createElementWithContent('li', '<b>' + font + '</b><input type="text" value="" placeholder="Fallback font" class="ffffallback-specify-font" data:font-class="' + fontClass + '" /><a href="#" class="ffffallback-disclosure"><span>&#x25bc;</span></a><textarea class="ffffallback-more-values" placeholder="e.g. line-height: 1.75;"></textarea>');
       row.setAttribute('class', 'collapsed');
       $.event(row.getElementsByClassName('ffffallback-disclosure')[0], 'click', function() {
         if($.isClassOnElement('collapsed', row)) {
diff --git a/secret.html b/secret.html
index 3c3b162..f6d6d69 100644
--- a/secret.html
+++ b/secret.html
@@ -58,6 +58,5 @@
   </script>
   <script src="bookmarklet/ffffallback.js"></script>
   <link rel="stylesheet" href="bookmarklet/ffffallback.css" />
-
 </body>
 </html>