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 */

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; }