New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
UI problems due to new Messenger web UI #878
Comments
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);
})(); |
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:
Thanks a lot for looking into this. |
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
Most likely. We'll see soon enough. 😉
That's a known issue, tracked in #712. |
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! |
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. Could you run the updated script? |
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. |
Here are my changes so far: master...CvX:new-messenger-design If you want to try out the CSS part here's a condensed version you can via ._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. 🙂 |
Note also that there are some dark text on dark background issues here with the new look in dark mode. |
I've done some small tweaks in |
@IssueHunt has funded $80.00 to this issue.
|
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:
|
@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 So if anyone wants to contribute, it's all about fixing the small stuff. |
One more #979 |
@sindresorhus is there anything else missing or this one can be considered done? |
We can consider it done. Great work! Thanks for helping out :) |
@sindresorhus has rewarded $72.00 to @pkuczynski. See it on IssueHunt
|
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:
IssueHunt Summary
pkuczynski has been rewarded.
Backers (Total: $80.00)
Submitted pull Requests
Tips
IssueHunt has been backed by the following sponsors. Become a sponsor
The text was updated successfully, but these errors were encountered: