Minimal Facebook Messenger for Fluid

minimal_fb_messenger.css

/*  

  Minimal Facebook Messenger 
  ==========================
  
  1. Make a Fluid (http://fluidapp.com/) instance of https://facebook.com/messages/
  1. a. (You need to buy the paid version of Fluid to modify UserStyles)
  2. Apply the below CSS as a Userstyles stylesheet
  3. Like magic, you can now message without all the cruft of Full Facebook
  
  Why?
  ----
  I find more and more of my work and personal correspondence happens on FB Messenger.
  It's nice to have a simple desktop client. 
  Facebook.com itself is far too heavy and distracting. 
  
  But Messenger works in [insert chat client name]! 
  -------------------------------------------------
  Yes but if you want: file attachments, stickers (!), group chats, history, 
  search, and more, you will need the proper web client. 
  
*/

#rightCol { display: none !important; }
#contentCol { min-width: 730px !important; }
#pagelet_bluebar { display: none !important; }
#pagelet_dock { display: none !important; }
#pagelet_sidebar { display: none !important; }
#globalContainer { padding-right: 0 !important; }
.fbx #globalContainer { width: auto !important; }
.emoticonsPanel div._5r8f.panelFlyout { right: -10px !important; }
.emoticonsPanel div._5r8f .panelFlyoutArrow { left: 248px !important; } /* Thanks Lars */

Very cool :) Or on Mac, add your Facebook account to the regular Messages app as a Jabber account.

mhmli: Yep, but if you want file attachments, stickers, group chats, history, search, and more you will need the proper web client. (Updated gist to include this.)

The default app icon was bothering me so I made a .icns file that matches the iOS icon. If you're interested check it out here https://gist.github.com/samiare/7473f2167f8a16bfe1ca

@samiare: Oh, brilliant. These are perfect. Thanks.

Oi mate, question, I'm new to Fluid how do I attach the CSS?

Window > Userstyles

Perfect, cheers cmod.

I made a new userstyle pasting that CSS and it's not working. Is there any other obvious step that I have to do before (misterious checkbox or something)?

it looks like you have to have a Fluid license ($4.99) to get userstyles?

@DarioFerrando: Check you pattern. I should be something like https://twitter.com/i/notifications or https://twitter.com/*.

This is awesome, thanks for that, and thanks @samiare for the icon!

@DarioFerrando: Under "patterns", check for the URL. I uploaded mine here, take a look: http://d.pr/i/1kZaP

Thanks, a great idea! I just added this so the emoticons popup doesn't force you to expand the window:

.emoticonsPanel div._5r8f.panelFlyout { right: -10px !important; }
.emoticonsPanel div._5r8f .panelFlyoutArrow { left: 248px !important; }

@larswinter — Beautiful. Thank you! Rolled into the gist.

This is fantastic! Thank you for posting this. Quick question: is the column with the ads still supposed to show up?

WIth the UserScript below the application badge is updated based on unread messages:

Add a pattern: *facebook.com/messages*

window.fluid.dockBadge = '';
setTimeout(updateDockBadge, 1000);
setTimeout(updateDockBadge, 3000);
setInterval(updateDockBadge, 5000);

function updateDockBadge() {
    var newBadge = '';

    var regex = /\s*\((\d+)\)\s*/;
    e = document.getElementsByClassName('pls _1r fwn');
    for(var i = 0; i < e.length; i++) {
        // Only if there is only single class
        if(e[i].className == 'pls _1r fwn') {
            //console.log("Value: " + e[i].textContent);
            var text = '' + e[i].textContent;
            if (text.length) {
                //console.log('text: ' + text);
                var res = text.match(regex);
                  //console.log('res: ' + res);
                  if (res && res.length > 1) {
                    newBadge = res[1];
                }
            }
        }
    }
    //console.log('newBadge: ' + newBadge);
    window.fluid.dockBadge = newBadge;
}

I've added these rules to make the message panels fit to the winow:

#contentArea { width: 100% !important; }
.wmMasterView  { width: 30% !important; }
._2nb { width: 69% !important; }
._2nc { width: 100% !important; }
.uiScrollableAreaBody { width: 100% !important; }
._4z0 { width: 100% !important; }