Gmail Dock Badge

[Joseph Gruber]

Hello all! I'm new to Prism and have spent the last day testing out
both Fluid.app and Prism. I like Prism better, mainly due to the fact
that a number of Mozilla user styles and addons are already available
that I use in Firefox. However, one thing I can't figure out even
though the page says it is a feature is the dock badge. How do I get
Gmail to show my unread messages count in the dock icon?

Thanks for your help!

Joseph

[Jason Miller]

You have to write a script. Take a look at the webapp.js file in my Gmail.app for Prism bundle:
http://jasonmillerdesign.com/apps/gmail_prism/

(click on "Get Gmail.app for Prism")

- Jason

Jason Miller 519.872.0797 // developIT // Jason Miller Design Developer of amoebaOS, Shutterborg, Delitweet & more

[Joseph Gruber]

Maybe I'm doing something silly but your webapp only shows two icons
(for for Google Apps and one for Gmail) with a mouseover effect and
that's it.... That's in the downloaded webpage which looks exactly
like your webpage link.

I did find a webapp.js that is supposed to do a badge and I placed it
in Resources\webapp.js in my Gmail Prism app but it doesn't seem to
work either. Is this the correct location?

On Sep 10, 9:28 am, Jason Miller <ja...@developit.ca> wrote:
> You have to write a script. Take a look at the webapp.js file in my
> Gmail.app for Prism bundle:http://jasonmillerdesign.com/apps/gmail_prism/
>
> (click on "Get Gmail.app for Prism")
>
> - Jason
>
>  Jason Miller

> 519.872.0797 // developIT <http://developit.ca/> // Jason Miller
> Design<http://jasonmillerdesign.com/>
> *Developer of amoebaOS <https://amoebaos.com/>,
> Shutterborg<http://shutterb.org/>,
> Delitweet <http://delitweet.com/> & more*

[Jason Miller]

Ah, sorry - I had broken the Gmail icon when fixing the Google Apps icon. It is working properly now.

The correct location for the webapp.js file is:

/Applications/[your application].app/Contents/Resources/webapp/webapp.js

You might find my webapp bundle would serve your needs - it basically applies a theme that transforms the app to look like Apple Mail, adds the dock icon badge, and adds a convenient menu with your folders and labels to the dock icon.

On Mac, you could even try the Gmail.app for Mac option.

- Jason

Jason Miller

519.872.0797 // developIT // Jason Miller Design Developer of amoebaOS, Shutterborg, Delitweet & more

On Thu Sep 10 2009 12:46:39 GMT-0400 (EST), Joseph Gruber wrote:

Maybe I'm doing something silly but your webapp only shows two icons
(for for Google Apps and one for Gmail) with a mouseover effect and
that's it.... That's in the downloaded webpage which looks exactly
like your webpage link.

I did find a webapp.js that is supposed to do a badge and I placed it
in Resources\webapp.js in my Gmail Prism app but it doesn't seem to
work either. Is this the correct location?

[Michael Sullivan]

hey jason.
i left a comment last night on your PrismBundler blog post.
we should bootstrap and try and revive the concept (i authored the bookmarklet).

i also want to again explore way to distribute a prism app without a user needed to first install prism itself. 
a self-contained app (at least for mac). 

sull

[Jason Miller]

That would be awesome - I have been working on the self-contained format for Prism Mac applications, and my progress is available in the Gmail.app executable. I am not able to test on other computers, though, so I'm not sure how far I have gotten. It's basically the webrunner framework inside a .app with the application.ini paths modified to match the install directory.

Where can I find the bookmarklet? I'll check the comments today and respond there.

- Jason

Jason Miller 519.872.0797 // developIT // Jason Miller Design Developer of amoebaOS, Shutterborg, Delitweet & more

On Thu Sep 10 2009 13:22:10 GMT-0400 (EST), Michael Sullivan wrote:

hey jason.
i left a comment last night on your PrismBundler blog post.
we should bootstrap and try and revive the concept (i authored the bookmarklet).

i also want to again explore way to distribute a prism app without a user needed to first install prism itself.
a self-contained app (at least for mac).

sull

On Thu, Sep 10, 2009 at 1:12 PM, Jason Miller <ja...@developit.ca> wrote:

[Michael Sullivan]

http://prismspectrum.com/bookmarklet

this was an experiment in October 2007. 
it's been dormant.

i have renewed interest in using Prism and am not fond of Adobe Air and Fluid is mac-only.

cheers,

sull

[Jason Miller]

Adobe Air seems like another incarnation of the cross-platform "Adobe Model" to me, so I avoid using it and try to get people not to use it as well.

The only one of these webapps-on-the-desktop platforms I have come across that still has my interest is Titanium, though I haven't had a chance to develop with it yet.

Jason Miller 519.872.0797 // developIT // Jason Miller Design Developer of amoebaOS, Shutterborg, Delitweet & more

On Thu Sep 10 2009 14:37:34 GMT-0400 (EST), Michael Sullivan wrote:

http://prismspectrum.com/bookmarklet

this was an experiment in October 2007.
it's been dormant.

i have renewed interest in using Prism and am not fond of Adobe Air and Fluid is mac-only.

cheers,

sull

On Thu, Sep 10, 2009 at 1:50 PM, Jason Miller <ja...@developit.ca> wrote:

That would be awesome - I have been working on the self-contained format for Prism Mac applications, and my progress is available in the Gmail.app executable. I am not able to test on other computers, though, so I'm not sure how far I have gotten. It's basically the webrunner framework inside a .app with the application.ini paths modified to match the install directory.

Where can I find the bookmarklet? I'll check the comments today and respond there.

- Jason

Jason Miller 519.872.0797 // developIT // Jason Miller Design Developer of amoebaOS, Shutterborg, Delitweet & more

On Thu Sep 10 2009 13:22:10 GMT-0400 (EST), Michael Sullivan wrote:

hey jason.
i left a comment last night on your PrismBundler blog post.
we should bootstrap and try and revive the concept (i authored the bookmarklet).

i also want to again explore way to distribute a prism app without a user needed to first install prism itself.
a self-contained app (at least for mac).

sull

On Thu, Sep 10, 2009 at 1:12 PM, Jason Miller <ja...@developit.ca> wrote:

[Joseph Gruber]

Got it figured out! Here's the script I got put together with clues
from around the web. I do have a question though on where one can
find documentation on this API/SDK. Specifically I'm looking to see
what else can be done with the icon. It appears that most of the
information on the web is out of date making it difficult to code
anything. :(

var timer;
var newMailCount = 0;

function load() {
var timer = Cc["@mozilla.org/timer;1"].createInstance
(Ci.nsITimer);
timer.initWithCallback({ notify: function(timer) { checkNewMail
(); } }, 5000, Ci.nsITimer.TYPE_REPEATING_PRECISE);
}

function checkNewMail() {
try {
var title = window.content.document.title;
var matches = title.match(/Inbox \((\d+)\)/);

if (matches) {
var count = matches ? parseInt(matches[1], 10) : 0;

if (newMailCount != count) {
newMailCount = count;

window.platform.icon().badgeText =
newMailCount;
window.platform.showNotification("New Mail Alert",
"There are " + newMailCount + " new messages.", null);
}
}
} catch(err) {
}
}

[Joseph Gruber]

Quick update to deal with JS garbage collection on the timer variable.

var newMailCount = 0;
var timer = null;

function load() {
initTimer();
}

function initTimer() {

timer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
timer.initWithCallback({ notify: function(timer) { checkNewMail

(); } }, 5000, Ci.nsITimer.TYPE_REPEATING_SLACK);
}

function checkNewMail() {

[Jason Miller]

Joseph,

While your method works, it only updates the unread count when Gmail
is showing the inbox view. The left menu is visible and updated in
every view Gmail uses, so a more accurate unread mail count can be
presented using the innerHTML of the inbox menu item. This is the
method I used for Gmail.app, which you can download and take a look at
here:

http://jasonmillerdesign.com/apps/gmail_prism/

Just rename the .webapp file to .zip and open up the file webapp.js
located inside.

- Jason

[Jason Miller]

Joseph,

Here is the Gmail dock badge and notification script I mentioned previously, isolated and using your format:

var newMailCount = 0;

function load() {

    var timer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
    timer.initWithCallback({ notify: function(timer) { checkNewMail(); } }, 5000, Ci.nsITimer.TYPE_REPEATING_PRECISE);
}

function checkNewMail() {
    var doc = window.top.document.getElementById("canvas_frame").contentWindow.document;
    var a = doc.getElementsByTagName("a");
    var matches = null;
    for(var x=0; x<a.length; x++) {
        if(a[x].innerHTML.match(/Inbox \(\d+\)/gm) && a[x].href.match(/\#inbox$/gim)) {
            matches = a[x].innerHTML.match(/Inbox \((\d+)\)/);
            break;
        }
    }
    if(!matches) {
        for(var x=0; x<a.length; x++) {
            if(a[x].innerHTML.match(/Inbox/gm) && a[x].href.match(/\#inbox$/gim)) {
                matches = ["Inbox (0)","0"];
                break;
            }
        }
    }
   
    if(matches && matches[1]) {
        window.platform.icon().badgeText = parseInt(matches[1]);
        if (parseInt(matches[1]) > newMailCount) {
            window.platform.showNotification("New Mail Alert", "There are " + parseInt(matches[1]) + " new messages.", null);
        }
        newMailCount = parseInt(matches[1]);
    }
}


- Jason

Jason Miller

519.872.0797 // developIT // Jason Miller Design Developer of amoebaOS, Shutterborg, Delitweet & more

[Joseph Gruber]

Thanks Jason for both the updated code as well as the attached file.
I was having problems getting it from your site - my ISP's problem not
your's. It's been a LOOONG time since I messed with JS so I'm glad
you helped me out there.

As a side point though. Why does Prism make this so difficult?
Fluid.app out of the box supports badge functionality out of the box
without me having to do anything. In addition it support userstyle
type scripts - why doesn't Prism? I've tried to hack Greasemonkey
into Prism but then the GM scripts don't work. Hopefully Mozilla is
giving Prism the attention I believe it deserves.

Thanks again.

Joseph

> *Jason Miller*
> 519.872.0797 // developIT [link:http://developit.ca/] // Jason Miller Design [link:http://jasonmillerdesign.com/]
> Developer of amoebaOS [link:https://amoebaos.com/], Shutterborg [link:http://shutterb.org/], Delitweet [link:http://delitweet.com/] & more

>
> On Thu Sep 10 2009 18:48:10 GMT-0400 (EST), Joseph Gruber [link: mailto:joseph.gru...@gmail.com] wrote:
>
> Got it figured out!  Here's the script I got put together with clues
> from around the web.  I do have a question though on where one can
> find documentation on this API/SDK.  Specifically I'm looking to see
> what else can be done with the icon.  It appears that most of the
> information on the web is out of date making it difficult to code
> anything. :(
>

>  webapp.js
> 1KViewDownload

[Joseph Gruber]

Had to make one change:

var doc = window.top.document.getElementById
("canvas_frame").contentWindow.document;
to
var doc = window.content.document.getElementById
("canvas_frame").contentWindow.document;

Looks like window.top stops working after the page is fully loaded.
Again, not sure why Prism makes this so difficult and from what I
can't find no clear documentation. Maybe I'm just missing it
though...

On Sep 10, 8:20 pm, "Jason Miller" <ja...@developit.ca> wrote:

> *Jason Miller*
> 519.872.0797 // developIT [link:http://developit.ca/] // Jason Miller Design [link:http://jasonmillerdesign.com/]

> Developer of amoebaOS [link:https://amoebaos.com/], Shutterborg [link:http://shutterb.org/], Delitweet [link:http://delitweet.com/] & more

>
> On Thu Sep 10 2009 18:48:10 GMT-0400 (EST), Joseph Gruber [link: mailto:joseph.gru...@gmail.com] wrote:
>
> Got it figured out!  Here's the script I got put together with clues
> from around the web.  I do have a question though on where one can
> find documentation on this API/SDK.  Specifically I'm looking to see
> what else can be done with the icon.  It appears that most of the
> information on the web is out of date making it difficult to code
> anything. :(
>

>  webapp.js
> 1KViewDownload

[Jason Miller]

Joseph,

I'm glad I could help you out. Basically, Prism seems to be (very) slowly evolving into a platform for developers of web applications - rather than for people who configure outside applications. Fluid is great because all of its features and configuration settings are exposed to you in the application preferences - but Prism doesn't serve the same audience, and the use case seems to demand less visible configuration options.

But I should mention - you actually can use UserStyles. Right where you put that webapp.js file, try copying a UserStyles.org CSS stylesheet there and renaming it to "webapp.css". It will be applied to all pages your Prism app navigates to. To give an example, I put the CSS from Gmail.app here:

http://developit.ca/files/gmail_prism.css

The key to getting Greasemonkey scripts to work is the load functions. They are not well documented, but basically you need to change the scripts so that they are called using this syntax:

function load() {
  // script initialization here
}

Let me know if I've skipped over anything you were asking about.

- Jason

Jason Miller 519.872.0797 // developIT // Jason Miller Design Developer of amoebaOS, Shutterborg, Delitweet & more

On Fri Sep 11 2009 06:20:21 GMT-0400 (EST), Joseph Gruber wrote:

Thanks Jason for both the updated code as well as the attached file.
I was having problems getting it from your site - my ISP's problem not
your's. It's been a LOOONG time since I messed with JS so I'm glad
you helped me out there.

As a side point though. Why does Prism make this so difficult?
Fluid.app out of the box supports badge functionality out of the box
without me having to do anything. In addition it support userstyle
type scripts - why doesn't Prism? I've tried to hack Greasemonkey
into Prism but then the GM scripts don't work. Hopefully Mozilla is
giving Prism the attention I believe it deserves.

Thanks again.

Joseph

On Sep 10, 8:20pm, "Jason Miller" <ja...@developit.ca> wrote:
> Joseph,
>
> Here is the Gmail dock badge and notification script I mentioned previously, isolated and using your format:
>
> var newMailCount = 0;
> function load() {
> var timer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
> timer.initWithCallback({ notify: function(timer) { checkNewMail(); } }, 5000, Ci.nsITimer.TYPE_REPEATING_PRECISE);}
>
> function checkNewMail() {
> var doc = window.top.document.getElementById("canvas_frame").contentWindow.document;
> var a = doc.getElementsByTagName("a");
> var matches = null;
> for(var x=0; x<a.length; x++) {

> if(a[x].innerHTML.match(/Inbox (d+)/gm) && a[x].href.match(/#inbox$/gim)) {
> matches = a[x].innerHTML.match(/Inbox ((d+))/);

> break;
> }
> }
> if(!matches) {
> for(var x=0; x<a.length; x++) {

> if(a[x].innerHTML.match(/Inbox/gm) && a[x].href.match(/#inbox$/gim)) {

> matches = ["Inbox (0)","0"];
> break;
> }
> }
> }
>
> if(matches && matches[1]) {
> window.platform.icon().badgeText = parseInt(matches[1]);
> if (parseInt(matches[1]) > newMailCount) {
> window.platform.showNotification("New Mail Alert", "There are " + parseInt(matches[1]) + " new messages.", null);
> }
> newMailCount = parseInt(matches[1]);
> }
>
> }
>
> - Jason
>
> *Jason Miller*

> 519.872.0797 // developIT http://developit.ca/ // Jason Miller Design http://jasonmillerdesign.com/
> Developer of amoebaOS https://amoebaos.com/, Shutterborg http://shutterb.org/, Delitweet http://delitweet.com/ & more

[Jason Miller]

Yes - sorry, the code I had sent was modified from the original version which stored a reference to the window object.
I believe the load(), startup(), etc functions are called within a separate context, one in which the window object has been limited - something like:

(function() {
  var window = {
    // limited object definition, I guess not including "top"
  };
  load();
})();


The original script did something like this:

var Gmail = (function(){
  var _window = window;
  var self = {
    load : function() {
      var frame = _window.top.document.getElementById("canvas_frame").contentWindow.document;
      // etc...
    }
  };
  return self;
})();

function load() {
  Gmail.load();
}


- Jason

[Joseph Gruber]

Thanks again Jason for the info! Extremely helpful. One more
question for you -- I'd like to look at your webapp's webapp.js but
can't seem to find it. I downloaded your webapp but only show the
following files in it -- icon.icns, icon.ico, icon.png loading-bg.png
splashscreen.html throbber.gif webapp.css and webapp.ini. What am I
missing?

On Sep 11, 3:55 pm, Jason Miller <ja...@developit.ca> wrote:
> Yes - sorry, the code I had sent was modified from the original version
> which stored a reference to the window object.
> I believe the load(), startup(), etc functions are called within a separate
> context, one in which the window object has been limited - something like:
>
> (function() {
>   var window = {
>     // limited object definition, I guess not including "top"
>   };
>   load();
>
> })();
>
> The original script did something like this:
>
> var Gmail = (function(){
>   var _window = window;
>   var self = {
>     load : function() {
>       var frame =
> _window.top.document.getElementById("canvas_frame").contentWindow.document;
>       // etc...
>     }
>   };
>   return self;
>
> })();
>
> function load() {
>   Gmail.load();
>
> }
>
> - Jason
>

> 519.872.0797 // developIT <http://developit.ca/> // Jason Miller

[Joseph Gruber]

Another one -- the script keeps dying every so often still with the
following error in the error console during each timer run. Any
ideas?

Error: [Exception... "Component returned failure code: 0x80004005
(NS_ERROR_FAILURE) [nsIDOMWindowInternal.content]" nsresult:
"0x80004005 (NS_ERROR_FAILURE)" location: "JS frame ::
XPCSafeJSObjectWrapper.cpp :: anonymous :: line 450" data: no]
Source File: XPCSafeJSObjectWrapper.cpp
Line: 450

[Jason Miller]

It looks like the window.content variable you are accessing is for some reason not present all the time.
Try storing a pointer to window.top outside your load() function and using that as your reference instead of window.content.

I'm just building a new Gmail.app Prism bundle that includes the webapp.js script. I will post it on my site in a bit.

- Jason

Jason Miller

[jwscuba]

Hey your app looks pretty interesting but I cant seem to get it
installed. I downloaded it but double clicking does seem to do
anything. so what I did was create a prism web.app (using the Firefox
add-on). then just replaced the internals with what is in the zip. I
like how you managed to style everything but my main thing was to get
notifications to work witch they still don't/ Plus the styling and
what not are a little jacked up at least on my windows 7 box. Is
there anyone that has gotten notifications to really work. Also in
some prism screen shots it looks like some people can get the the
sidebar to show and possibly have links in there to open different
applications. for example a link Google calendars app so it doesn't
open in a new window. Anyway just really trying to get this to work,
thanks,

On Sep 11, 5:26 pm, Jason Miller <ja...@developit.ca> wrote:
> It looks like the window.content variable you are accessing is for some
> reason not present all the time.
> Try storing a pointer to window.top outside your load() function and using
> that as your reference instead of window.content.
>
> I'm just building a new Gmail.app Prism bundle that includes the webapp.js
> script. I will post it on my site in a bit.
>
> - Jason
>

[Jason Miller]

Hi Joseph,

Sorry the app wasn't more helpful. I'm concerned that the webapp.js file you are using isn't the most recent one. My notifications are working correctly, though I am testing using Google Apps mail rather than the standard Gmail (I believe they are the same).

If you want to see what the theme looks like in it's correct form, you have to select the "Cold Shower" theme from Gmail's settings. This corrects all of the weird font issues and layout bugs.

For the notifications, I have attached my copy of the webapp.js file, which you can overwrite yours with.

I forgot to mention, you have to restart the application once you have selected "Gmail" or "Google Apps". It's a bug I will be fixing soon. That, when combined with replacing the webapp.js script, should absolutely give you proper notifications. If not, please let me know so I can make a patch.

- Jason

[jwscuba]

thanks for the updates i will give it a shot. im a doing thing right
by just copy rplacing the thing in my app directy or is there another
way to istall the app. It seems i read you should be abble to double
click the webapp file but that didn't work for me. i just unziped it
then manually copied the files over.

>  webapp.js
> 73KViewDownload- Hide quoted text -
>
> - Show quoted text -

[Jason Miller]

you should be able to double click it, but the current build of Prism is broken and cannot properly use the bundle format.
You can use the command line and execute:

path/to/prism.exe -webapp [path/to/Gmail.webapp]

If you're working with an app that's already been created, copying the files and overwriting them should work fine. Perhaps throw an alert inside the load() function to test whether you have actually loaded the new script.

Jason Miller

[jwscuba]

ok i hate to keep asking seemingly stupid question but I just
installed the firefox addon, but can't see were the prism.exe file
would be, did it install or do i need to install to download the
stand alone version. which just looks like you would extract it
anywhere.

On Sep 15, 11:34 pm, Jason Miller <ja...@developit.ca> wrote:
> you should be able to double click it, but the current build of Prism is
> broken and cannot properly use the bundle format.
> You can use the command line and execute:
>
> path/to/prism.exe -webapp [path/to/Gmail.webapp]
>
> If you're working with an app that's already been created, copying the files

> and overwriting them *should* work fine. Perhaps throw an alert inside the

> ...
>
> read more »- Hide quoted text -

[Jason Miller]

Yes, sorry, it requires the standalone version for installing bundles.
From what I understand, the process it does is basically just to get one bundle working on the big three platforms. You could probably create the outputted wrapper application from scratch, but this is easier.

Jason Miller 519.872.0797 // developIT // Jason Miller Design Developer of amoebaOS, Shutterborg, Delitweet & more

[jwscuba]

ok welli got it running but it doen't appear that youcan change a
theme in google apps the way you can standard gmail

On Sep 16, 1:46 am, Jason Miller <ja...@developit.ca> wrote:
> Yes, sorry, it requires the standalone version for installing bundles.
> From what I understand, the process it does is basically just to get one
> bundle working on the big three platforms. You could probably create the
> outputted wrapper application from scratch, but this is easier.
>
>  Jason Miller

> 519.872.0797 // developIT <http://developit.ca/> // Jason Miller

> Design<http://jasonmillerdesign.com/>
> *Developer of amoebaOS <https://amoebaos.com/>,
> Shutterborg<http://shutterb.org/>,
> Delitweet <http://delitweet.com/> & more*
>
>
>

[Jason Miller]

I am actually using Google Apps, but some users do not have the setting available by default.
This article explains how to access them.
http://www.downloadsquad.com/2009/04/01/gmail-themes-finally-come-to-google-apps/

Also, I think you have to be using the "Next Gen" version (you can change that setting in your Google Apps dashboard). If you've been using Google Apps on the same domain for a while, trying to access themes seems to trigger your domain for the update. A couple of my older domains were updated to include theme support just after I tried the two methods outlined above.

- Jason

Jason Miller

519.872.0797 // developIT // Jason Miller Design Developer of amoebaOS, Shutterborg, Delitweet & more