discord-PWA
discord-PWA copied to clipboard
NeverDecaf
theme title bar
If the chrome.app.window frame type: none option is added, it will be possible to do this. It would likely also resolve #3
It appears you have not submitted this as an issue to the Chromium repo. That might get this sorted out sooner. https://bugs.chromium.org/p/chromium/issues/list
Out of courtesy for you, you may like to know that as you navigate the repo, your browser may attempt to connect to the following domains: chromium.org, gstatic.com, googleusercontent.com, appspot.com. Pages are functional without allowing these third party connections but I don't know if you are able to submit an issue without scripts.
I wasn't able to find an alternative official mirror of the repo that allowed submitting bugs.
This is a good suggestion, however I am actually waiting on the implementation of display: fullscreen as it seems much more likely to be worked on. As suggested in this SO answer it should have the same effect as frame type: none and allow for a fix to this issue.
One concern is that a frameless window is inherently impossible to move via mouse drag, discord-chrome-app gets around this by using the css property -webkit-app-region: drag which currently does nothing in PWAs. I assume this will be supported when display: fullscreen is, but there is a chance it won't be since the "intended" use of display: fullscreen does not require the ability to move the window. If display: fullscreen does get added without a way to drag the window, then I will open an issue requesting the addition of -webkit-app-region: drag.
Honestly though, this is mainly just an excuse, I simply don't have the motivation to submit a bug report. Of course, you are welcome to do so in my place :)
You may look into this https://bugs.chromium.org/p/chromium/issues/detail?id=937121
Looks like this will never be fully possible, see: https://github.com/w3c/manifest/ issues/659
I have seen the above feature and I'll give it a try when it gets added to origin trial. At the very least it should allow styling the Discord text in the top left.
Hopefully, it gets there soon! Seems like it's being worked on pretty actively.
Microsoft Edge just got a flag in version 92 for PWA window controls overlay, doesn't seem like it can really replace the existing title bar buttons but I think it could possibly help
I did try the flag in a version of chromium 92 but it doesn't seem fully implemented since it did nothing. As for how it could help, I've been thinking of something like this:
But removing space in the header might cause issues on smaller screens, obscure some of the channel topic, and more importantly it would be hard to drag to move the window, since some of the header elements have their own functionality when clicked. An alternative might be something like this:
to include some area to click and drag the window. This would be closest to the desktop client (a thin title bar). Again, I don't know if shifting the elements over is a good idea from a UI standpoint if users are used to their normal positions. Also, it looks quite ugly, but that might be alleviated with some extra CSS
The ideal solution would be if the buttons were scalable, at about half their current size it would be possible to almost recreate the desktop client's title bar.
It'll be great once it's useable it's saying it should be ready for Origin/Dev Trials by M92 so hopefully once it hits beta it'll be ready. I'm on Chrome OS but it looks like they're working on that API for Windows and Mac not sure about Chrome OS or Linux but I'd think it's in there as well.
I made this mock-up with the theme I'm currently using you get quite a bit more top space even if a lot of it is just the padding I added it looks much better. Now that I'm thinking about it you can use theme-color to change the bar to match as well I'm pretty sure. I updated the image to reflect that.
For the default title bar you should be able to make it look like this. You can click between the 3 dot menu and the minus to drag the window.
I completely forgot the title bar color could be changed. It should be possible to make the entire top bar draggable via -webkit-app-region: drag according to the spec.
Yeah, you should be able to make it draggable where it needs to be as well. Would be cool if you could add title bar color to the options. I tried doing it with javascript but it didn't seem to work.
You actually can change the theme color by editing the content attribute of the name="theme-color" <meta> tag. Try this: document.getElementsByName('theme-color')[0].setAttribute("content","red")
I copied that directly into the custom javascript in the options and it didn't work. I also tried this previously as well.
(function() { 'use strict'; document.querySelector("[name='theme-color']").remove(); var m = document.createElement('meta'); m.name = 'theme-color'; m.content = '#151514'; document.head.appendChild(m); })();
Javascript in the extension is run in the discord.com iframe which doesn't have access to its parents DOM, to change the theme you have to modify the container (the PWA itself). There's no way to do this from the extension options (atm) but you can test it out by opening the javascript console from the PWA ctrl+shift+j and pasting it in there.
Ok I got it to work using tampermonkey :) Hopefully, the API trickles down to beta here soon!
This article got posted it might be useful I'm pretty sure you need M92 Dev to access the API but hopefully, it's on the beta here soon! https://web.dev/window-controls-overlay/
It's actually possible to access the origin trial already by setting the flag chrome://flags/#enable-desktop-pwas-window-controls-overlay in the current chromium 92 releases. However, the implementation is still not complete so it's essentially unusable in its current state. I've done a basic implementation of the ideas above in the manifestv3 branch which, in theory, will work once the window-controls-overlay components are working. Currently the css environment variables are all undefined and app-region:drag has no effect, making the PWA unmovable without its title bar. Additionally, if the theme color is changed via the <meta> tag, it isn't applied properly to the overlay, leaving a bi-color result like this (and breaking any hover effects on the buttons):
From what the guy said on Twitter it should be possible to use a background image but hopefully, it's fully functional soon! I'm on a Chromebook as my main device on the Chrome Beta channel, so I'm on M91 until the next release in a few weeks.
check out the chrome flag chrome://flags/#enable-desktop-pwas-borderless