Expanding Gmail's Filter Input #

Gmail filter screenshot Gmail has a seemingly simple but actually powerful filtering system. The "Has the words" input field can be used for arbitrary queries. However, the one line input is very cramped when trying to filter multiple mailing lists at once. A textarea would be more appropriate.

Initially, this seemed like a job for Greasemonkey. However, since the filter input form is created dynamically, it's hard to detect when it's visible without resorting to polling. Instead, it seemed easier to find the right node with a CSS selector like input[name="cf1_has"]. Then, XBL can be used to replace the input node with a textarea node (styled appropriately). All that's really necessary is to insert the following in userContent.css:

@-moz-document domain(mail.google.com) {
  input[name="cf1_has"] {
    display: none;
    -moz-binding: url(http://persistent.info/files/gmail-filter.xml#filter);
  }
}

The XBL file is pretty straightforward (it didn't look like I could use the <content> element to insert the textarea, since that would've placed it as a child of the input node).

For the paranoid (or merely careful), it's best to make a local copy of the XBL file, otherwise you're always going to be loading code from my site. I tried to use a data: URL, to make things self-contained, but it didn't seem to work.

34 Comments

That syntax using the braces looks like something I have never seen in a Gmail search before. Is that essentially an OR on the five terms specified?
Though it doesn't seem to be documented, yes, curly brackets are meant to group a bunch of OR clauses together.
Since you seem to be an (the?) Gmail Greasemonkey expert, I have a request. Maybe you or someone else reading can pick up on this and run with it.

I love GMail and the new GCalendar, and appreciate how integrated they are with each other already (cross posting events), but I would like much more integration. What I had in mind from the beginning for GCalendar (and truthfully, GReader too, but that's gone out the window) was to have the calendar fully embedded inside GMail, not just as a link inside GMail that opens a new window. I would like to have "Calendar" added to the navigation link list on the left of GMail, like below "Contacts" or something. Then using that Calendar link, the calendar will come up inside the main GMail window, but all the Gmail links will still be available. I'm not sure how this would work in with the existing GCalendar left sidebar. Maybe going to the Calendar link could hide all the normal Gmail links except Inbox, Compose Mail, and Contact, then the other normal GCalendar links would fill up the left sidebar. This way, Calendar would actually be a part of the Gmail - you could seamlessly go between your Inbox, Compose Mail, Contact, and Calendar in the same window and the same interface.

Is this a reasonable job for Greasemonkey? Or a full-fledged FF Extension? Truthfully I'd like this to be a feature built into Gmail/Calendar, but since they've started this way already, I just don't see it happening.

(honestly, i had similar hopes for GReader. I wanted an "RSS" or similar link in my GMail sidebar which would open Reader in the same window and use conversation-style viewings for my RSS feeds. But unfortunately for me, i guess your team had much different views of what Reader was than I did…..)
David, yes, that's what it should look like. The overlap with the sidebar is kind of ugly, but it's a cosmetic issue.
I would like to update my previous post ^^ after thinking about it some.
maybe this wouldn't be so hard afterall. You could do 2 seperate scripts, one for Gmail and one for Calendar. Each script would simply insert some additional options into the pages left sidebar, and get rid of that stupid "personalization dock" in the upper left or whatever they're calling it.

For the Gmail script, you could add a link to Calendar, and maybe a "Quick Add" link to the left bar. The Calendar link would open Calender in the same window. But then the Calendar script would then add some links to the Calendar left side bar, like to Inbox, Contacts and Compose Mail.

This way, I think it would more or less feel like you're working in the same "application". Hell, if Reader could be integrated with GMail in this sense, maybe I would start using it more too!!
joelion, i think its imposible, with grease monkey
Well, i'm probably not qualified to argue because I don't know enough about how Gmail works, Javascript, or writing user scripts to say one way or another, but from the Gmail Greasemonkey that I've seen so far, the 2nd solution I posted above should be quite easy. For example, the "Google Calendar Agenda" and "Gmail Quick Links" scripts both add links/boxes to the Gmail navigation sidebar
http://www.r2unit.com/greasemonkey/

Mihai's own "Gmail Macros" shows incredible Gmail wizardry
http://persistent.info/archives/2005/12/23/greasemonkey

I think with my second suggestion, at the least just adding a "Calendar" link to Gmail, then an "Inbox" link to Calendar and having them open in the same window would be easy in GM for the guys who wrote these scripts, and it would vastly improve the user experience.
I feel like a total dolt for not getting this working before today....but I figure I should own up to my own error just in case somebody else is having the same problem: Be sure that the userContent.css file is in the chrome directory underneath your profile directory. I put it directly in my profile directory and couldn't figure out why it wasn't working. Doh!
I cannot get this to work with a local url for -moz-binding. With http://persistent.info/files/gmail-filter.xml#filter it works just fine, but as soon as I point to a local version of the XBL it ceases to work. I've tried this with a fresh profile to exclude collisions with extensions, themes, and non-standard preferences, but to no avail. Could it be that this is a bug in Mozilla or am I doing something wrong? Did anybody succeed in binding a local xbl file?
krampus, I think you still need an HTTP url for the -moz-binding (file: URLs did not work for me), but if it's on a server you own/control presumably you have less to fear.
Mihai,

Is this hack still working for you? I just tried reinstalling it on my browser today, and it doesn't seem to be working on my end. It's very likely my error, but I don't really know of a way to debug chrome.
My bad...like I figured. Right as I hit the post button, I realized that I had just typed "Chrome"....and that the post above says userCONTENT.css. Working wonderfully again. :-D
why... why is this not general public knowledge??

this is the single most useful gmail 'hack' I've ever seen. and it just made filters a heck of a lot more usable.
This doesn't seem to be working for me... The input field just disappears and no text box replaces it.

Has anyone else seen similar behavior?
I changed the xml file to one on my own website and it worked... Weird.
this works great, thanks! I have a question, how do you get the name "cf1_has"? what is the the input name for other fields?
@sewpafly: javascript must be enabled for the site where the xbl file is hosted; you probably have it for your own site but not for persistent.info.
This looks like a job for Stylish, the css version of Greasemonkey.
Woops! I followed your instructions and pasted the text into the .css file and nothing happened even after turning off the BetterGmail lifehacker Add-on that I'm running, disabling the Greasemonkey script for gmail and refreshing the gmail tab altogether. Then I tried restarting the fox and everything froze. So I got rid of the text in the .css file and started again and firefox is working...but no expanded filter field. Could it be because I'm using FFox portable???
Using data: probably wouldn't work because the xbl file isn't text inside an .rdf or .jar file. Try

-moz-binding: url(file:///C:\gmail-filter.xbl.xml#filter);
Also, you should try putting this suggestion to the makers of the Better GMail extension, see if they can inporporate this into their filter assistant.

Additionally, instead of putting it in the userContent.css file, I think it would work better using the Stylish extension.
I'm having the same problem as sewpafly, but either storing the xml locally or on my personal website has not fixed the problem.

Any tips?
any tips on how to get this working with the new gmail?
Brent has figured out how to make it work with new gmail.

@-moz-document domain(mail.google.com) {
input.MtafId[tabindex="54"],
input.MtafId[tabindex="5"] {
display: none;
-moz-binding: url(http://persistent.info/files/gmail-filter.xml#filter);
}
}
Brent has made me very happy.

Thank you both very very much!
Has anyone got this to work with FF3b4? I upgraded from FF2 and now it's broken. I think it has something to do with not allowing cross-site XBL, but I'm not sure.
So after learning that FF3 disallows cross-site XBL, I went ahead and embedded the XBL directly into my userContent.css like so:

@-moz-document domain(mail.google.com) {
input.MtafId[tabindex="54"] {
display: none;
-moz-binding: url(data:text/xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Cbindings%20xmlns%3D%22http%3A//www.mozilla.org/xbl%22%3E%3Cbinding%20id%3D%22filter%22%20styleexplicitcontent%3D%22true%22%3E%3Cimplementation%3E%3Cconstructor%3E%3C%21%5BCDATA%5Bvar%20id%20%3D%20this.id%3B%20var%20textarea%20%3D%20document.createElement%28%22textarea%22%29%3B%20textarea.name%20%3D%20this.name%3B%20textarea.value%20%3D%20this.value%3B%20textarea.style.width%20%3D%20%22100%25%22%3B%20textarea.style.fontFamily%20%3D%20%22monospace%22%3B%20textarea.style.fontSize%20%3D%20%2214px%22%3B%20textarea.rows%20%3D%2015%3B%20textarea.tabIndex%20%3D%20this.tabIndex%3B%20this.parentNode.replaceChild%28textarea%2C%20this%29%3B%20textarea.id%20%3D%20id%3B%5D%5D%3E%3C/constructor%3E%3C/implementation%3E%3C/binding%3E%3C/bindings%3E);
}
}

If you've upgraded to FF3 and the expanded input breaks, try the above.
My solution above broke again with FF3 RC1. Anyone got this working?
http://forum.userstyles.org/comments.php?DiscussionID=2228&page=1#Item_1
Got it working again via a query bookmarklet. As google has made their ids dynamic, I've tried to make the selector as generic as possible. Tested in OSX/FF3 OSX/FluidApp.

NOTE: This requires the [Create Filter] panel already be open.

javascript:var s=document.createElement('script');
s.setAttribute('src','http://jquery.com/src/jquery-latest.js');
s.onload=function(){
var f = $('#canvas_frame').contents().find('input[type="text"]:eq(4)');
var h = f.parent(':first').html().toString();
h = h.replace(/^\<input /,'<textarea ') + '</textarea>';
e = $(h).css({'height':'600px','width':'300px'});
f.after(e).remove();
};
document.getElementsByTagName('body')[0].appendChild(s);
void(s);

Enjoy!
@Matt Gardner, nice. Just had to copy/paste the javascript into the Location field of a new bookmark. Still works for me on Ubuntu Karmic Firefox 3.6.8.
Update for latest GMail UI: Adjusted selector to match new location of "Has the words" input field in OSX/Chrome.

$('#canvas_frame').contents().find('input[type="text"]:eq(6)'); var h = f.parent(':first').html().toString(); h = h.replace(/^\<input /,'<textarea ') + '</textarea>'; e = $(h).css({'height':'300px','width':'300px'}); f.after(e).remove(); }; document.getElementsByTagName('body')[0].appendChild(s); void(s);
Hi, I'm trying to use this on Firefox 18.0.2 on ubuntu 12.04 but no luck. Anything obvious I'm missing? Any suggestions how to debug this? thanks!

Post a Comment