[Tampermonkey] Simple Facebook Messenger

// ==UserScript==
// @name         Simple Facebook Messenger
// @namespace    http://tampermonkey.net/
// @version      0.3a
// @description  making new Facebook Messenger design more readable
// @author       RudyErudyta
// @match        https://www.facebook.com/messages/t/*
// @grant        none
// ==/UserScript==

// Width of the site
var messengerWidth = "1500px";
// Size of the messages text
var textSize = "13.5px";
// Width of sent photos
var picWidth = "300px";
// URL of your profile picture
var ownProfilePicUrl = '';
// Node containing your profile picture that will be copied next to your messages
var ownProfilePicTemplate = null;

// Set target node of mutation observer to body
var target = document.querySelector('#facebook');

// Configure of the observer; basically any DOM change invokes the observer function
var config = { childList: true, subtree: true };

// Create an observer instance
var observer = new MutationObserver(function(mutations) {
    // Find your profile picture URL if not found already
    if (ownProfilePicUrl === '')
        ownProfilePicUrl = "https://graph.facebook.com/" + document.querySelector("._s0").id.split("_")[3] + "/picture?type=square";

    // Disconnect the observer to prevent it from self-invoking and looping recursively
    this.disconnect();

    // Delete the classes that make the messages look the way they look
    var elems = document.querySelectorAll("._o46");
    [].forEach.call(elems, function(el) {
        el.classList.remove("_o46");
    });

    elems = document.querySelectorAll("._3erg");
    [].forEach.call(elems, function(el) {
        el.classList.remove("_3erg");
    });

    // Remove blue background from your messages
    elems = document.querySelectorAll("._nd_");
    [].forEach.call(elems, function(el) {
        el.classList.remove("_nd_");
    });

    // Change the font to make it readable on the new background
    elems = document.querySelectorAll("._3oh-");
    [].forEach.call(elems, function(el) {
        el.style.fontFamily = "Helvetica";
        el.style.color = "#333";
        el.style.fontSize = textSize;
    });

    // Make names visible
    elems = document.querySelectorAll("._-ne");
    [].forEach.call(elems, function(el) {
        el.classList.remove("_-ne");
    });

    // Remove the gray styling from names
    elems = document.querySelectorAll("._ih3");
    [].forEach.call(elems, function(el) {
        el.classList.remove("_ih3");
    });

    elems = document.querySelectorAll("._hh7");
    [].forEach.call(elems, function(el) {
        el.classList.remove("_hh7");
    });

     elems = document.querySelectorAll("._4ldz ._1t_r");
    [].forEach.call(elems, function(el) {
        el.classList.add("_-ne");
    });

    // Align photos
    elems = document.querySelectorAll("._3zvs");
    [].forEach.call(elems, function(el) {
        el.classList.remove("_3zvs");
    });

    // Align and format others' profile pictures
    elems = document.querySelectorAll("._4ld-");
    [].forEach.call(elems, function(el) {
        // Get rid of circles
        el.classList.remove("_4ld-");
        // Positioning
        el.parentElement.style.top = "2px";
        toRm = el.parentElement.querySelector("._2pom");
        if (toRm)
            el.parentElement.removeChild(toRm);

        // Based on this node create template to paste next to your messages
        if (ownProfilePicTemplate === null){
            var pic = el.parentElement.parentElement.parentElement.querySelector("._1t_q");
            if (pic){
                ownProfilePicTemplate = pic.cloneNode(true);
                var imgTag = ownProfilePicTemplate.querySelector(".img");
                if (imgTag)
                    imgTag.src = ownProfilePicUrl;
            }
        }
    });

    // Add profile picture next to your messages; search through all the messages once again
    elems = document.querySelectorAll("._41ud ");
    [].forEach.call(elems, function(el) {
        picTest = el.parentElement.querySelector("._1t_q");
        // If the profile picture is missing - it must be your message!
        if (!picTest && ownProfilePicTemplate !== null){
            var addedPic = ownProfilePicTemplate.cloneNode(true);
            el.parentElement.appendChild(addedPic);
        }
    });

    // Fix conversation margin
    elems = document.querySelectorAll("._41ud");
    [].forEach.call(elems, function(el) {
        el.style.marginLeft = "40px";
    });

    // Change pics and links width
    elems = document.querySelectorAll("._4tsk");
    [].forEach.call(elems, function(el) {
        el.style.minHeight = "0";
        el.style.width = picWidth;
    });

    elems = document.querySelectorAll("._5i_d");
    [].forEach.call(elems, function(el) {
        el.style.minHeight = "0";
        el.style.width = picWidth;
    });

    // I'm sure it had a purpose, but frankly I forgot what it was
    elems = document.querySelectorAll("._2n8i");
    [].forEach.call(elems, function(el) {
        el.classList.remove("_2n8i");
    });

    // Connect the observer again
    this.observe(target, config);
});


// Connect the observer for the first time
observer.observe(target, config);

window.onload = function() {
    // Change font size and page width
    var sheet = document.createElement('style');
    sheet.innerHTML = ".__i_{font-size: "+ textSize +" ;} ._4sp8 {width: " + messengerWidth + "; clear: both; margin: auto;} ._4pmj {width: " + messengerWidth + "; clear: both; margin: auto;}";
    document.body.appendChild(sheet);
};