Merge and Firefox support

Conflicts:
	bookmarklet/ffffallback.css

4 files changed, 43 insertions, 21 deletions

diff --git a/bookmarklet/ffffallback-logo.png b/bookmarklet/ffffallback-logo.png
index 0181fd2..4c9c675 100644
--- a/bookmarklet/ffffallback-logo.png
+++ b/bookmarklet/ffffallback-logo.png
diff --git a/bookmarklet/ffffallback.css b/bookmarklet/ffffallback.css
index 492862f..896c6ce 100644
--- a/bookmarklet/ffffallback.css
+++ b/bookmarklet/ffffallback.css
@@ -12,30 +12,48 @@
 }
 
 #ffffallback-controller .ffffallback-more-values {
-  background: #666;
-  color: #ccc;
-  margin-left: 30px;
-  width: 141px;
+  margin-left: 0px;
+  width: 160px;
 }
 
 #ffffallback-controller .collapsed .ffffallback-more-values {
   display: none;
 }
 
-#ffffallback-controller .expanded .ffffallback-disclosure {
-  -moz-transform: rotate(90deg);
-  -webkit-transform: rotate(90deg);
+#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;
+  top:6px;
 }
-
 #ffffallback-controller .ffffallback-disclosure {
-  color: #ccc;
+  display:inline-block;
+  margin-left:2px;
+  height:27px;
+  width:20px;
+  position:relative;
+  top:-7px;
+  -webkit-border-radius:  3px;
+  -moz-border-radius:     3px;
+  border-radius:          3px;
+}
+#ffffallback-controller .ffffallback-disclosure:hover {
+  background:#2a2a2a;
+}
+#ffffallback-controller .ffffallback-disclosure span{
+  color: #777;
   display: inline-block;
+  font-size:12px;
+  position:relative;
+  left:4px;
+  top:7px;
   text-decoration: none;
-  width: 16px;
+  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.125s;
+  -webkit-transition-duration: 0.25s;
 }
 
 #ffffallback-content-container * {
@@ -62,7 +80,7 @@ body.ffffallback-hide-original #ffffallback-content-container {
   right: 0px;
   top: 0px;
   background:rgba(0,0,0,0.8);
-  -webkit-box-shadow: rgba(0,0,0,0.5) 0 2px 5px;
+  -webkit-box-shadow: rgba(0,0,0,0.5) 0 0 3px;
   color:rgba(255,255,255,0.9);
   font: 13px/1em normal helvetica, arial, sans-serif !important;
   width: 220px;
@@ -78,6 +96,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;
@@ -145,6 +165,7 @@ body.ffffallback-hide-original #ffffallback-content-container {
   border-bottom-left-radius:        3px;
   -webkit-box-shadow: rgba(225, 225, 225, 0.4) 0px 1px 0px;
 }
+
 #ffffallback-radios label+label {
   border: 1px solid #555;
   border-width: 1px;
@@ -181,7 +202,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;
@@ -216,14 +237,14 @@ body.ffffallback-hide-original #ffffallback-content-container {
   list-style: none;
   margin: 0;
   margin-top: 1em;
-  padding:0 1em 1em 1em;
+  padding:0 0 1em 1em;
 }
 
 #ffffallback-fonts li b {
   display: block;
 }
 
-#ffffallback-fonts li input {
+#ffffallback-fonts li input, #ffffallback-fonts li textarea {
   display: inline-block;
   -webkit-box-shadow: rgb(68, 68, 68) 0px 1px 0px;
   background: rgb(102, 102, 102);
diff --git a/bookmarklet/ffffallback.js b/bookmarklet/ffffallback.js
index 2eb4dd3..8ae74ab 100644
--- a/bookmarklet/ffffallback.js
+++ b/bookmarklet/ffffallback.js
@@ -1,4 +1,8 @@
 (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) {
@@ -312,7 +316,7 @@
     var fontClass, row;
     $.each($.getAllFontsInUse(document.body), function(font) {
       fontClass = $.getClassForFont(font);
-      row = $.createElementWithContent('li', '<b>' + font + '</b><a href="#" class="ffffallback-disclosure">&#x25BA;</a><input type="text" value="" placeholder="Fallback font" class="ffffallback-specify-font" data:font-class="' + fontClass + '" /><textarea class="ffffallback-more-values" placeholder="More CSS styles"></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="More CSS styles"></textarea>');
       row.setAttribute('class', 'collapsed');
       $.event(row.getElementsByClassName('ffffallback-disclosure')[0], 'click', function() {
         if($.isClassOnElement('collapsed', row)) {
@@ -329,7 +333,6 @@
     $.event(document.getElementById('ffffallback-display-mode-original'), 'click', function() {
       $.removeClassFromElement('ffffallback-hide-original', document.body);
       $.addClassToElement('ffffallback-hide-fallback', document.body);
-      //below is Josh's handywork... I have no idea how to toggle... plz help Mark
 
       $.each(document.getElementsByClassName('radio-checked'), function(elem) {
         $.removeClassFromElement('radio-checked', elem);
@@ -341,7 +344,6 @@
     $.event(document.getElementById('ffffallback-display-mode-both'), 'click', function() {
       $.removeClassFromElement('ffffallback-hide-original', document.body);
       $.removeClassFromElement('ffffallback-hide-fallback', document.body);
-      //below is Josh's handywork... I have no idea how to toggle... plz help Mark
       $.each(document.getElementsByClassName('radio-checked'), function(elem) {
         console.log('Oh elem is!', elem);
         $.removeClassFromElement('radio-checked', elem);
@@ -352,7 +354,6 @@
     $.event(document.getElementById('ffffallback-display-mode-fallback'), 'click', function() {
       $.addClassToElement('ffffallback-hide-original', document.body);
       $.removeClassFromElement('ffffallback-hide-fallback', document.body);
-      //below is Josh's handywork... I have no idea how to toggle... plz help Mark
       $.each(document.getElementsByClassName('radio-checked'), function(elem) {
         $.removeClassFromElement('radio-checked', elem);
       });
diff --git a/secret.html b/secret.html
index df3f1fd..f6d6d69 100644
--- a/secret.html
+++ b/secret.html
@@ -56,7 +56,7 @@
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
   </script>
-  <!-- <script src="bookmarklet/ffffallback.js"></script>
-  <link rel="stylesheet" href="bookmarklet/ffffallback.css" /> -->
+  <script src="bookmarklet/ffffallback.js"></script>
+  <link rel="stylesheet" href="bookmarklet/ffffallback.css" />
 </body>
 </html>