Caprine: UI problems due to new Messenger web UI

[pkgamma]

It seems like Facebook has recently been rolling out new UI changes on messenger.com, which is what caprine runs on. The new UI is causing a lot of issues as you can see in the screenshot below - these should be able to be fixed with some changes in caprine's css files. Some issues include:

• macOS window buttons overlaying on top of profile picture
• sidebar friends list having another grey box overlaying existing blue background (for active contact)
• title bar for name doesn't have proper margin

---

IssueHunt Summary

pkuczynski has been rewarded.

Backers (Total: $80.00)

• issuehunt ($80.00)
  

  Submitted pull Requests

- #910 Fix too narrow conversation header

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
  

  - Need some help from other developers? Add your repositories on IssueHunt to raise funds.

IssueHunt has been backed by the following sponsors. Become a sponsor

[CvX]

Exciting! That's the update I've been waiting for! 😀 Though, as usual, I'm not in the initial rollout, so it's difficult to work on those updates.

Here's how you can help. You could execute this snippet (to get the document structure, but with all potentially personal data stripped out) in DevTools on https://messenger.com and copy the result to paste it or in a gist (https://gist.github.com) and paste the gist link here.

(function() {
  let sanitizeTree = (tree) => {
    let walk = document.createTreeWalker(tree);
    let node;

    while (node = walk.nextNode()) {
      if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
        node.textContent = '🙂';
      }

      if (!node.attributes) continue;

      for (let attribute of node.attributes) {
        if (attribute.name === 'class') {
          continue;
        }

        if (attribute.name === 'src' && node.tagName === 'SCRIPT') {
          continue;
        }

        node.setAttribute(attribute.name, '🙂');
      }
    }

    return tree;
  };

  let tree = sanitizeTree(document.cloneNode(true));
  let output = [...tree.childNodes].map((node) => node.outerHTML).join('');

  console.log(output);
})();

[pkgamma]

Fantastic! I followed your direction and got this as the console output, please take a look. I am not sure how helpful this is but if there is anything else I can do please let me know! Thanks!

By the way, here are some other current issues I saw with the new UI:

• the icon badge for unread threads doesn't seem to work, not sure if it's due to the new UI as well, or if it's just the way it is. I am running macOS 10.13.6.
• windows vibrancy only seem to work when the app first starts up, but if I refresh the page (commend-R), then vibrancy won't work anymore.

Thanks a lot for looking into this.

[CvX]

Awesome, thank you! 🙂 Now onto a half-blind development! 😉

Later, you'll be able to try out new changes by adding new CSS rules in Electron > Caprine Preferences > Advanced > Custom Styles.

the icon badge for unread threads doesn't seem to work, not sure if it's due to the new UI as well

Most likely. We'll see soon enough. 😉

windows vibrancy only seem to work when the app first starts up, but if I refresh the page (commend-R), then vibrancy won't work anymore.

That's a known issue, tracked in #712.

[pkgamma]

Thanks! Hopefully, it's not too much of a struggle for you to test out the new UI. I will be happy to work closely together with you on this as well, I can perhaps share my screen with you live to speed up the development and testing process if you think that'd help at all. Please just let me know!

[CvX]

Alright, I've updated snippet (made a gist, so it's easier to track changes):

https://gist.github.com/CvX/acad4654a1bb27e184741156c57b0ea0

It now includes a little bit more data, so it's possible to debug stuff visually.
Here's an example of my page dump 🙂

Could you run the updated script?
Thanks again for your help in testing this debugging method! 🙂

[pkgamma]

Thank you for the updated script - I am not super familiar with how the console works, but here is what I got from executing your code, also on the same gist page, please take a look:

https://gist.github.com/pkgamma/ae5f120dc7ec64c087a5171dcd0bb7ac

Thanks.

[CvX]

Here are my changes so far: https://github.com/sindresorhus/caprine/compare/master...CvX:new-messenger-design

If you want to try out the CSS part here's a condensed version you can via Electron > Caprine Preferences > Advanced > Custom Styles:

._6-xk ._6-xp {
    -webkit-app-region: no-drag;
    -webkit-user-drag: none;
}

._6-xk ._6ymu {
    visibility: hidden !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
}

._6-xk ._7stb,
._6-xk ._6-xp {
    order: 1;
}

._6-xk h1 {
    display: none;
}

.os-darwin ._30yy._6-xf {
    margin-left: 65px !important;
}

Bear in mind this is still work-in-progress. 🙂

[pkgamma]

Thanks, this is great! I used the stylesheet on your new-messenger-design branch and this is what I got, it looks like there are still problems here and there but I think this is on a good track. I will also try to dig into the code a little and see if I can help out.

[kimroen]

Note also that there are some dark text on dark background issues here with the new look in dark mode.

[sindresorhus]

I've done some small tweaks in master to make it not look broken, but there's still a lot of work needed to fix everything. Notifications are also broken (#893).

[IssueHuntBot]

@issuehunt has funded $80.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[pkuczynski]

Seems that 2.31.1 is already fixing quite a few issues. I also submitted #908 and #910 to fix a few others.

[pkgamma]

I am not sure if everyone has the same UI modification concepts in mind, but this is what I did on another non-open-source messenger client, do you guys think it's on the right track? Everything is pixel perfect and on there nothing is broken, although the Electron wrapper mechanism works differently, I am sure.

If this looks good, I should be able to port the CSS here pretty easily for the style and look, but I will not be able to handle notifications, quick reply and etc. as I don't have the adequate knowledge.

A few notable points:

• The window is responsible since the new Messenger interface made it so that everything shrinks under window width of 900px, but we don't want that.
• The blur of everything follows the macOS Human Interface design guideline.

[sindresorhus]

@pkgamma Look at the first screenshot in the readme. A lot of the main UI quirks are fixed now. It's now mostly just polish and dark mode tweaks needed.

What you have in the screenshot looks fairly good, but I still prefer what we have in master now. I don't like how big and bold Chats is. And I don't like the conversation selection highlight.

So if anyone wants to contribute, it's all about fixing the small stuff.

[pkuczynski]

I submitted a few additional PR to fix this issue: #921, #920, #919, #918

[pkuczynski]

Fire up #974 and #975. What else is missing?

[pkuczynski]

One more #979

[pkuczynski]

@sindresorhus is there anything else missing or this one can be considered done?

[sindresorhus]

We can consider it done. Great work! Thanks for helping out :)

[issuehunt-app[bot]]

@sindresorhus has rewarded $72.00 to @pkuczynski. See it on IssueHunt

• :moneybag: Total deposit: $80.00
• :tada: Repository reward(0%): $0.00
• :wrench: Service fee(10%): $8.00