More seamless UI for web app mode
This is a bit of a parent issue for a project I'd like to take on to improve the appearance and perceived integration of web apps in Epiphany, especially now that Endless OS is shipping GNOME Web and web app integration in GNOME Software. When possible, I can break things down into smaller issues, but wanted a place to start collecting my thoughts and considering the project.
My objective is (broadly) to improve the web app experience in distributions like Endless OS, and specifically I'd like to focus on the UI as that's where I think I can actually have an impact. In no particular order, the areas I'd like to explore:
-
Slimmer, title-bar-like headerbar: most web apps have their own in-app sort of header, so putting the full-size Epiphany header bar on top makes them feel heavier and less integrated. Chromium-based browsers have a slimmed-down titlebar style they use for web apps, presumably for this reason. This could also involve moving e.g. the navigation buttons to the popover if they're needed at all (assuming a web app will have its own in-app navigation patterns).
-
Utilizing theme-color in the headerbar: web apps can use theme-color as a hint to the browser to style the native UI to match the web app. This can make the app feel more integrated, especially when combined with a slimmer title bar
-
improving the "additional URLs" experience, particularly around popping out to another browser to log in: this has prevented us from shipping several web app recommendations in GNOME Software, as by default, sites like Wordle want to pop out to a third-party OAuth provider or a different subdomain for account management—but web apps use separate data stores, so logging in in another browser has no effect on the the web app session—and it's not obvious how to work around this as a user.
-
Consider if we want/need browser-specific UI like the target URL showing when hovering links, or certain context menu items: if a user has explicitly asked to use a web app as a web app and not in a browser window, we might be able to make assumptions around not showing more browser-like UI elements, because the web app should have its own navigation patterns that work well in an app-like context.
As a first step, I think I'll propose some mockups or prototypes for the first two, then take a stab at implementing them in an MR if it looks like it's achievable.