fun with fluid

10 05 2009

Mozilla just released the newest version of Prism (http://prism.mozilla.com/),so I figured I would play with it.  I use it at work to make a nicelittle Pandora app so I wondered what I could do with; GoogleReader, Google Apps for your Domain Mail (Gmail basically), andFacebook.  Eddie already had me hooked on a client based Twitter App,but I really like the web versions of most of what I use..

After installing Prism and starting to play, I immediately noticed that noneof my Firefox extensions were there.  Ack!  I’m pretty used to thefunctionality they provide (Better Gmail 2, Better GReader, and AdblockPlus specifically here), so I figured I would be able to find a way touse them.  Well, vague mentions of add-ons, and directions onjavascript that didn’t seem to work wasted about two hours of my dayand I gave up on Prism eventually.

Somewhere in the middle Itweeted that I would really like to see Firefox extensions for Prism,and Eddie responded that I should check out Fluid (http://fluidapp.com/).  It said it supported Greasemonkey scripts and Growl,so I figured I would take a look.  After all, the two "better"extensions I use are nothing more than compiled Greasemonkey scripts. I started with trying to recreate Google Reader since I only use twoscripts in that extension; the Minimalistic Skin and Show Feed Faviconssetting.  I quickly found the lifehacker article that described whichscripts were used to compile the extension at; http://lifehacker.com/software/exclusive-lifehacker-download/trick-out-google-reader-with-better-greader-262020.phpand found that it was very easy to add the scripts to Fluid. Unfortunately the minimalistic one didn’t work anywhere nearly as wellas it did in Firefox.  It wasn’t hiding the space used by the graphics/menu items, just the items themselves.

I spent a long time reading about Prism andFluid to find a good way to script them, only to realize that neitherof them truly supports Greasemonkey.  Of course, I can’t get Prism toload any script (placing webapp.js next to webapp.ini in the PackageContents got me nowhere).  After searching more, and about to give up,I finally got off my butt and just opened the javascript code for theMinimalistic script and found it full of GM_addStyle() calls.  I canonly assume that’s a greasemonkey specific function, so I went insearch of something non-greasemonkey to replace it with.  I quicklycame across http://userscripts.org/scripts/source/47908.user.jswhere his first code checks for GM_addStyle() then addStyle() andfinally gives up and enters it manually.  I copied his code, usedgoogle to figure out the javascript syntax for arrays and for() loops and was able tomake it all work.

The change simply ended up being;

-   GM_addStyle(".gbh { display:none !important; }");  //Hide dividing line
-   GM_addStyle("#entries .entry {padding-top: 2px}");
-   GM_addStyle(".card-common {margin: 0 2px}");
-   GM_addStyle(".entry .entry-source-title {font-size:110%;}");
-   GM_addStyle(".entry .entry-title {font-size:120%;}");
-   GM_addStyle(".card .card-content {padding: 2px 1px 2px 2px;}");
-   GM_addStyle("#current-entry .card .card-content {padding: 2px 1px 2px 2px;}");
-   GM_addStyle(".entry .entry-container {padding-bottom: 0;}");
-   GM_addStyle(".entry .entry-body {padding-top: 0;}");
-   GM_addStyle(".entry .entry-actions {padding: 2px;}");
+   var css = [ ‘.gbh { display:none !important; }’,
+      ‘#entries .entry {padding-top: 2px}’,
+      ‘.card-common {margin: 0 2px}’,
+      ‘.entry .entry-source-title {font-size:110%;}’,
+      ‘.entry .entry-title {font-size:120%;}’,
+      ‘.card .card-content {padding: 2px 1px 2px 2px;}’,
+      ‘#current-entry .card .card-content {padding: 2px 1px 2px 2px;}’,
+      ‘.entry .entry-container {padding-bottom: 0;}’,
+      ‘.entry .entry-body {padding-top: 0;}’,
+      ‘.entry .entry-actions {padding: 2px;}’ ];
+  
+   var heads = document.getElementsByTagName("head");
+   if (heads.length > 0) {
+      var node = document.createElement("style");
+      node.type = "text/css";
+      for (var i=0; i < css.length; i++)
+      {
+         node.appendChild(document.createTextNode(css[i]));
+      }
+      heads[0].appendChild(node);
+   }

So now I have a Google Reader application on my Mac.  The dock badgeeven updates with my unread article count, pretty cool.  UnfortunatelyI have become a bit too accustomed to AdBlock Plus, which makes mye-mail and Facebook look substantially better, so I think I’ll stickwith just Google Reader for now.  Feel free to lecture me on hurtingtheir business by never looking at their ads.. I can take it.

Here is a standard view of Google Reader in Firefox;

http://mikebdotorg.smugmug.com/photos/532664705_MYnrN-M.png

Here is the webapp from Fluid;

http://mikebdotorg.smugmug.com/photos/532664691_JpxUk-M.png

.. and the dock;

http://mikebdotorg.smugmug.com/photos/532664667_S5Knr-M.png

 

I’m happy with the results, but there is a ton of room for improvement with all of this..


Actions

Information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Follow

Get every new post delivered to your Inbox.

%d bloggers like this: