Expanding Gmail's Filter Input #
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
http://img.liveinternet.ru/images/foto/1/919338/f_1694449.jpg
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…..)
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!!
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.
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.
this is the single most useful gmail 'hack' I've ever seen. and it just made filters a heck of a lot more usable.
Has anyone else seen similar behavior?
-moz-binding: url(file:///C:\gmail-filter.xbl.xml#filter);
Additionally, instead of putting it in the userContent.css file, I think it would work better using the Stylish extension.
Any tips?
@-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);
}
}
Thank you both very very much!
@-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.
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!
$('#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);
Post a Comment