Visual adjustments to current Messenger

[SOI7]

Describe the feature

Since we are stuck with the desktop website and we won't get the mobile messenger anytime soon (sigh), I guess the current desktop website could use some visual adjustments to better accomodate phone layouts. I messed with some of these ideas in Edge through console and css, and the majority of them are doable, so I think Frost should be able to implement them just fine:

1) Left column profile/chat icons are too big and take up too much space. If you could scale them down, the chat area could benefit more room. This has actually already been implemented in Friendly/Folio so I'm 100% sure it's doable

2) The current chat could be highlighted in the left column, so that we can distinguish it. The standard site has an highlight color for the chat box already, so you could simply change its color in dark/glass themes

3) This is the trickiest one: when you have an unread message, there's a blue dot on the right of the chat box when Messenger is in non-collapsed mode. I've tried messing with it and you can move the dot to the left (so that it overlaps on the profile icon), but the div disappears in collapsed mode (ugh). You sure have more experience than me with CSS and theming, so you probably already know if it's doable or not, but if you could stop the dot div from disappearing in collapsed mode and show up on the chat profile icon, we'd get an unread counter which is something not implemented yet in any web wrapper, and it would be an overkill feature

That's it, hope it's not too much. I'm aware working with the desktop site is a huge hassle, so you're free to ignore these ideas if they're too unreasonable

[AllanWang]

Chat highlight could be changed. I don't think the others are really feasible, but if you've experimented with css you can paste it here

[SOI7]

Sure thing. Here are the codes I tested:

Chat highlight (I used a light blue but you can choose the color you wish 🤷‍♂️

.i224opu6 { background-color: rgb(45 136 255); }

Result:

Scaled down chat icons

.nnctdnn4 { /* min-height: 44px; */ height: 50px!important; /*Container Height*/ } .w0hvl6rk { margin-bottom: 6px; margin-left: -12px; margin-top: -3px; transform: scale(0.6); /*Profile icon*/ } @media (max-width: 900px) .g0mhvs5p.g0mhvs5p { width: 64px; /*Column width*/ }

Result:

Unread dots

.o8rfisnq { align-self: center; left: -290px; top: 14px; /*Unread dot (This is the only one I have troubles with because I can't stop the dots from disappearing when in collapsed mode, so play with it before implementing it) */ }

Result:

P.S. Another possible workaround could be to show only the chats list first, and then hide it and show the actual chat when you open one of them

[erdnuesse]

idk if that's related, for me the left frame becomes almost unusable with the search bar and\or multiple online contacts.

[papjul]

P.S. Another possible workaround could be to show only the chats list first, and then hide it and show the actual chat when you open one of them

I've been working on that as I feel it is a much better experience on mobile (just like the official app). I did it with my browser on desktop for convenience but I believe there should be no difference implementing it the same way in Frost.

The main screen looks like this:

Name and last message are missing compared to the desktop experience (or official mobile app), this requires replacing hardcoded value in JavaScript before it is loaded (either responsive: true with responsive: false or ("useMatchMedia")("(max-width: 900px)") with ("useMatchMedia")("(max-width: 0px)"). Both solutions should work (not tested). Is it possible to do something like this?

Otherwise, remember that names are not showing in the current Frost version anyway + as a workaround, the search feature works fine:

And when you click on a conversation:

Here is the code I'm using:

Making the navigation full width:

.o36gj0jk {
width: 100% !important
}

Do not show main initially:

[role=main] {
display: none
}

Do not hide the header on navigation

.ahb00how.ahb00how {
display: flex !important
}

And for the JavaScript part:

// Hide navigation and show main when clicking on any link (including future ones by listening to "body")
function hideNavigationShowMain() {
    document.querySelector("[role=navigation]").style.display = "none";
    document.querySelector("[role=main]").style.display = "flex";
}

function addCustomEventListener(selector, event, handler) {
  let rootElement = document.querySelector('body');
  rootElement.addEventListener(event, function (evt) {
    var targetElement = evt.target;
    while (targetElement != null) {
      if (targetElement.matches(selector)) {
        handler(evt);
        return;
      }
      targetElement = targetElement.parentElement;
    }
  }, true);
}

addCustomEventListener('[role=link]', 'click', hideNavigationShowMain); // Links from navigation
addCustomEventListener('[role=presentation]', 'click', hideNavigationShowMain); // Links from search

// Show navigation and hide main when going back
function showNavigationHideMain() {
    document.querySelector("[role=navigation]").style.display = "flex";
    document.querySelector("[role=main]").style.display = "none";
}

window.addEventListener("popstate", function(event) {
    if (document.querySelector("[role=navigation]").style.display == "none") {
        showNavigationHideMain();
    }

}, false);

Let me know what you think!

Edit: By the way, I don't know how the dark theme is currently implemented (as it seems a bit different on Frost), but you can easily switch __fb-light-mode class from html element with __fb-dark-mode to get the native dark experience from Messenger. For example, with:

document.querySelector("html").classList.remove("__fb-light-mode");
document.querySelector("html").classList.add("__fb-dark-mode");

[papjul]

This doesn't seem to attract much attention, anyone interested in implementing it? I'm not familiar with the code of Frost but CSS/JS is given above.