sonnyp/tangram

Browser for your pinned tabs

Tangram

Browser for your pinned tabs

About

Tangram is a new kind of browser. It is designed to organize and run your Web applications. Each tab is persistent and independent. You can set multiple tabs with different accounts for the same application.

Common use cases:

• Stay up to date with your favorite communities; Mastodon, Twitter, ...
• Merge all these chat applications into one; WhatsApp, Messenger, Telegram, ...
• Group your organization tools under one application; EMail, Calendar, ...
• One-stop for multiple sources of documentation or information

Features

• Setup and manage web applications
• Persistent and independent tabs
• Custom title
• Re-order tabs
• Change tabs position
• Navigation
• Shortcuts
• Smart notifications
• Downloads
• Touchpad/touchscreen gestures

Security

Tabs are independant and sandboxed from each others.

Both Flatpak and non-Flatpak versions of Tangram provide sandboxing for Web applications.

• Flatpak via our restricted permissions
• Non-Flatpak through WebkitGTK Sandboxing (requires WebkitGTK >= 2.26)

In the media

omglinux.com - Tangram for Linux is a Browser Built for Web Apps - 2023-01

TechHut - 5 AWESOME LINUX APPS - GNOME Circle odysee.com / youtube.com - 2022-02

Tangram - Manage Social Media sites on #Linux and #GNOME (#shorts) youtube.com - 2021-11

TechHut - NEW Kind of Web Browser on Linux odysee.com / youtube.com - 2021-10

techrepublic.com - Try this Linux web browser dedicated solely to web applications - 2021-09

Conheça programas para profissionais que usam Linux - Diolinux App Showcase #9 youtube.com - 2021-05

GNU/Linux.ch – Tangram - eine neue Art des Webbrowsers (Review) - 2021-04

Chris Were Digital - Tangram a browser just for web apps share.tube / youtube.com - 2021-02

How to run web apps with ease on Linux youtube.com - 2020-11

addictivetips.com - How to run web apps with ease on Linux - 2020-09

ubunlog.com - Tangram, nueva opción basada en GNOME para agrupar nuestras web-apps - 2020-09

ubunlog.com - Tangram, a new option based on GNOME to group our web-apps - 2020-09

edivaldobrito.com.br - Como instalar o navegador Tangram no Linux via Flatpak - 2020-08

linux-magazine.com - Tangram integrates social media services in a single app - 2020-06

linux-community.de - Tangram integriert Social-Media-Dienste und Messenger in eine App - 2020-02

linuxdicasesuporte.blogspot.com - Navegador Tangram no GNU/Linux - 2019-11

diolinux.com.br - Tangram, um app para gerenciar Webapps - 2019-09

Translation

If you'd like to help translating Tangram into your language, please head over to Weblate.

Thank you for your help!

Development

Use GNOME Builder.

If you knwo what you are doing - you can run from source locally instead:

./run.sh runs the application in development mode. Hit <Ctrl><Shift>Q to restart the application.

• data files are stored in ./var/data/ instead of $XDG_DATA_HOME/Tangram/
• cache files are stored in ./var/cache/ instead of XDG_CACHE_HOME/Tangram/

To test desktop notifications you can add https://jhmux.codesandbox.io/.

Test

make test

Meson

meson --reconfigure --prefix $PWD/install build
ninja -C build install
GSETTINGS_SCHEMA_DIR=./install/share/glib-2.0/schemas/ ./install/bin/re.sonny.Tangram

Flatpak

flatpak-builder --user --force-clean --install-deps-from=flathub flatpak re.sonny.Tangram.json
flatpak-builder --run flatpak re.sonny.Tangram.json re.sonny.Tangram

Flatpak sandboxed

flatpak-builder --user  --force-clean --repo=repo --install-deps-from=flathub flatpak re.sonny.Tangram.json
flatpak --user remote-add --no-gpg-verify --if-not-exists Tangram repo
flatpak --user install --reinstall --assumeyes Tangram re.sonny.Tangram

Inspect

gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true
GTK_DEBUG=interactive ./run.sh

Release

# bump meson.build version
git tag $VERSION
git push origin $VERSION
# send PR to https://github.com/flathub/re.sonny.Tangram/blob/master/re.sonny.Tangram.json

Credits

Icon by Tobias Bernard

Igalia and contributors for the amazing work on WebKitGTK

Inspired by GNOME Web, Rambox and Franz.

See also Wavebox and Station.

tangram's Issues

Gmail not working

Using the default url just signs me in a google account settings(privacy etc.). But if I change the url to "https://mail.google.com/mail/u/0/#inbox" everything is okay. Can anyone else test this issue and confirm?

Custom/virtual applications

Tangram should let the user create "groups" of tabs with a name and icon.

Each group of tab will have its own .desktop file and appear as a dedicated application to the user.

Gifs cause reddit to crash

An other issue I do sadly have not time to dig into next week: When browsing reddit (which I love on Tangram as I stay logged in and it is containerized even though it feels a little laggy), sometimes a restart is required.
I figured that the reason for this are gifs (In e.g. WhatsApp they work fine). In firefox they work well, but in epiphany (which should be kind of webkitgtk?) the site crashes, so there's probably not much you can do about it. Might be related to this issue about reddit requiring reloads

Edit:
I experimented a little more, and it seems that only reddit causes this in epiphany and WebKitGTK both.

Needs an icon

I spent some time trying to design an icon but it's really not my thing. Would be great if someone was willing to contribute an icon to this.

https://developer.gnome.org/hig/stable/icons-and-artwork.html.en
https://developer.gnome.org/hig/stable/icon-design.html.en
https://gitlab.gnome.org/World/icon-tool
https://gitlab.gnome.org/World/palette/

Side note, if you have a name idea that's consistent with the icon that's also welcome, gigagram was a play of word with rambox (a similar app) but gigagram being more lightweight it does not make much sense.

Netflix and Spotify don't work

I suppose it is because of user agent. Is there a way to change it? If so, is it possible to add settings to change it?

Outlook shows the old OWA website

Please include (to the best of your knowledge) the following information:

Tangram version

1.2.0

Linux distribution

Ubuntu 20.20

Flatpak version

Flatpak 1.6.5

Desktop environment

GNOME Shell 3.36.4 on Wayland

Current behavior

When I log in to a Microsoft Outlook account on Tangram, the site degrades to the old "OWA" environment.

Expected Behavior

I expect the new Office365 web environment, which is much more user friendly.

Window should remember position, screen and size

I bet there's an easy GTK way to do this but I haven't looked yet.

Option to remove white screens

Would it be possible to have an option to replace the white screens in the app with gray/dark ones instead?
Every time I open the application or add a new container at night (most of my usage) I am blinded by a bright white screen.

withdraw notifications when tab is shown

Spellchecking support

Add Fedora dev dependencies installation

sudo dnf install npm glib2-devel

WhatsApp Web not loading

WhatsApp Web isn't loading its gui. When deleting and recreating the tab, the qr code isn't loaded.

It works in epiphany. I've noticed this the first time when upgrading to and git version of webkit2gtk. Later the same issue reappeared in the repo version (arch) of webkit2gtk, disappeared again and reappeared with an other update.

Current version of webkit2gtk: 2.26.1-1

This might be an upstream problem in webkit2gtk, but well it works in epiphany.

Option to Temporarily Disable Tabs

I use Tangram to host all the tabs for the chat services we use at work. Occasionally that also means contacting someone through Facebook messenger or once a month checking in on an email account.

It would be nice if it was possible to create tabs for these in Tangram with the option to then disable (and not load them), enabling them then for the duration they're needed for work. Similar features are in Rambox and Franz.

At the moment I just open these tabs in my browser but it'd be nice if I could have all my work communication happen through Tangram, rather than switching between the two. Using Tangram and just deleting the tabs when they're not in use isn't convenient since it means logging in from scratch each time.

i can't write on the name and url fields on done button

i'm using Linux Mint 19.2

Discord's login page freezes

When I try to enter in to Discord's login page, the entire page seem to freeze. I can't input text or press buttons.

Seem to only be the login page (https://discordapp.com/login) as the main page seem to work all right.

I'm on Ubuntu 19.04, using the flatpak version.

Aur version of newest update doesn't work

The aur version of the newest update doesn't work. When cloning the repo it works, though. I feel like the new file "env.js" is not added to the include path:

(re.sonny.gigagram:15447): Gjs-WARNING **: 13:07:58.671: JS ERROR: ImportError: No JS module 'env' found in search path
@resource:///re/sonny/gigagram/js/util.js:12:9
@resource:///re/sonny/gigagram/js/util.js:1:1
@resource:///re/sonny/gigagram/js/window.js:21:9
@resource:///re/sonny/gigagram/js/window.js:1:1
@resource:///re/sonny/gigagram/js/main.js:31:9
@resource:///re/sonny/gigagram/js/main.js:1:1
@/usr/bin/re.sonny.gigagram:9:1

Script /usr/bin/re.sonny.gigagram threw an exception

Copy/paste is not working in microsoft teams

As the title says, copy/paste is not working in microsoft teams (the microsoft version of slack)
I cannot reproduce the bug in Epiphany because the website says that this browser is not supported (I don't know if I can change the user-agent in epiphany)

Tangram version

Tangram : 1.2.0
WebKitGTK : 2.26.2
gjs : 1.58.1

Linux distribution

Archlinux

Flatpak version

I'm using the AUR version (which is built from the source I think) not the flatpak one

Desktop environment

Gnome 3.34.1 Wayland

Slack web sockets aren't working

Please include (to the best of your knowledge) the following information:

Tangram version: Flatpak 1.2.0
Linux distribution: Pop!_OS 20.04
Flatpak version: 1.6.5
Desktop environment: GNOME Shell 3.36 X11

Slack has a constant "Last updated <1 minutes ago... Load new messages" message, which happens when web socket connections aren't working.

Notifications displayed as [Invalid UTF-8]

Notifications from WhatsApp are shown as [Invalid UTF-8], no matter if they contain special characters or emojis or not.

This issue has been existing for a while now and might be related to Custom Applications Notifications. So far I haven't had time to dig into this and will not have any time for the next week. It exists as well when not using custom applications. I do not know if the issue exists for other applications.

Toggle tab bar

Is it possible to add a button to toggle the tab bar in order to maximise the window?

Tabs have problem

Sometimes having problems closing tabs, sometimes not closing itself, sometimes closing other tab

Video

New Icon Colors

A while back we discussed changing the icon colors, I finally got around to trying a few new variations:

Let me know if there's anything here you like :)

Some services can't load

I've been trying the application for almost a few hours before no site was opened, some sites started to open, such as facebook and steam, but other services still do not open the video I took about the subject,and some services lack resources.

Video:

high cpu usage WebKitWebProcess with Mattermost

i get 65% of cpu usage if a tab with a custom https secured Mattermost open, or maybe with more than one tab open (currently Whatsapp and Mattermost)

Building from source

Tangram version

1.2.0.r30.gf8f5b02

Linux distribution

Manjaro

Desktop environment

GNOME 3.36.5 X11

---

I tried building from the latest commit a couple different ways. Using just Meson, it didn't work out so well:

  arch-meson . build
  meson compile -C build

tangram/src/meson.build:4:0: ERROR: Resource "main.js" listed in "src/re.sonny.Tangram.src.gresource.xml" was not found. If this is a generated file, pass the target that generates it to gnome.compile_resources() using the "dependencies" keyword argument.

I saw that Node modules were used, so tried the following first, but that didn't work out so well, either:

  npm install --cache "$srcdir/npm-cache"
  ./node_modules/.bin/rollup -c

> [email protected] install /home/yochanan/Documents/pkgbuilds/tangram-git/src/tangram/node_modules/husky
> node husky install

husky > Setting up git hooks
husky > Done

> [email protected] postinstall /home/yochanan/Documents/pkgbuilds/tangram-git/src/tangram/node_modules/husky
> opencollective-postinstall || exit 0

Thank you for using husky!
If you rely on this package, please consider supporting our open collective:
> https://opencollective.com/husky/donate

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 223 packages from 122 contributors and audited 224 packages in 4.971s

25 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


src/index.js → src/main.js...
[!] Error: Could not resolve '../troll/util' from src/webapp/webapp.js
Error: Could not resolve '../troll/util' from src/webapp/webapp.js
    at error (/home/yochanan/Documents/pkgbuilds/tangram-git/src/tangram/node_modules/rollup/dist/shared/rollup.js:5171:30)
    at ModuleLoader.handleResolveId (/home/yochanan/Documents/pkgbuilds/tangram-git/src/tangram/node_modules/rollup/dist/shared/rollup.js:17865:24)
    at /home/yochanan/Documents/pkgbuilds/tangram-git/src/tangram/node_modules/rollup/dist/shared/rollup.js:17857:22
    at async Promise.all (index 0)
    at async ModuleLoader.fetchStaticDependencies (/home/yochanan/Documents/pkgbuilds/tangram-git/src/tangram/node_modules/rollup/dist/shared/rollup.js:17855:34)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (/home/yochanan/Documents/pkgbuilds/tangram-git/src/tangram/node_modules/rollup/dist/shared/rollup.js:17832:9)
    at async Promise.all (index 4)
    at async ModuleLoader.fetchStaticDependencies (/home/yochanan/Documents/pkgbuilds/tangram-git/src/tangram/node_modules/rollup/dist/shared/rollup.js:17855:34)
    at async Promise.all (index 0)

Cancel button with icon doesn't look gnomish

Whatsapp Doesn't Work - Keeps Loading Forever

web.whatsapp.com keeps loading forever. Logging out and attempting to log back in results in the QR code attempting to load forever.

Large icons for services (without text) (like Franz)

Is your feature request related to a problem? Please describe.
Currently in Tangram you are prompted to put text next to your service's icon to describe what it is. The result is that the sidebar is a bit wider than I'd like, and the service icons are very small.

Describe the solution you'd like
If there is no name for the service it'd be nice if the icons just became larger instead of remaining extremely tiny.

Describe alternatives you've considered
Living with the small icons, I guess.

Additional context
Tangram:

Franz:

Feature Request: Mattermost

Translations

I know that there are only a few keys but I would like to translate this app into Italian. How could I do that?

Keyboard controls

I suggesting
1 - keyboard shortcuts for increasing/decreasing overall size of text and gfx stuff .
2 - If the app is going in the direction of tabs, then keyboard shortcuts for tab switching.
3 - Removing title bar in favour of header bar.

Another suggestion is to allow users to drag out the tab to create a new window. Should I create a new issue for this?

I can help but I don't know much about gjs and gtk. Have a little idea though.

WhatsApp very slow or not connecting

Hello!

I am facing problems opening WhatsApp Web and keeping the session alive. On first open it will take a long time to show the QR code. Sometimes it will plainly fail. When it does not, you can login, but if I close and open the app, it will have a hard time reconnecting.

Thanks for looking it up.

Use service brand icon

I think it will be the better approach instead of using icons from Papirus/Flaticon.com.

If you want, i can prepare a pull request.

Various UI issues

These buttons need 6px margin between them, and the back/forward buttons should be on the left and joined, like in Epiphany:

It should be "Keyboard Shortcuts", and "About $APPNAME". Also, most likely Quit is not needed.

There's no way to go back to the main menu view.

Rework "Done" button behavior

The "Done" button is confusing.
It can give the impression that will turn sensible after entering a valid url.

I suggest hiding it completely and showing it when the page has loaded.

Separate proxy config for each site

Is it possible to add option to set different user agent and proxy settings for each site?

Flatpak identifies required runtime as unused.

OS: Linux Mint 19.2
DE: XFCE

WebKitGTK & Outlook Incompatiblity

Just wanted to flag that through no fault of yours I don't think I'll be able to keep using Tangram.

It's still the best app of its kind I've tried but WebKitGTK has started to cause issues with some of the websites I use. Most of these were minor things but the biggie is that it's no longer capable of loading full featured Outlook. Instead loads a light version which is missing some key features like email archiving and keyboard shortcuts. I was going to file an upstream issue but they seem to want me to create an account just for their Bugzilla which I'm not willing to do, so thought I'd flag it to you here so that you're at least aware of it and can file if you want to.

Thanks for the work you've put into this, it's really much appreciated!

Zoom and default-zoom

My laptop has a semi-hidpi screen. The default font size in Tangram is too small. I have set systemwide scaling a bit up, but not enough for tangram to become quite usable. In firefox I've got it set to default to 120% zoom.

It would be useful if Tangram responded to the usual zoom hotkeys (ctrl+, ctrl-, and ctrl-mousewheel), and had a way to set the default zoom level. Alternatively being able to inject css would work as well as a stop-gap.

Custom Service Icons

Hi
It would be nice if one could use custom items for (custom webapps)
I really like your app

Session is dropped on Tangram close

It seems that Tangram drops cookies on browser close. I tried to use it to access a Redmine installation. In my usual browser (Vivaldi), I'm still logged in after next browser startup, while in Tangram I'm logged out. Is there any solution for that?

Make Tangram mobile friendly

Great app!

Would be great if Tangram could maximize screen space for the web apps on small devices by doing one of the following:

a) Have an option to hide the left applications list, so each web app can be fit on small displays, or even better

b) Use a HdyLeaflet https://blogs.gnome.org/alexm/2019/09/15/gnome-and-gestures-part-2-hdyleaflet/#:~:text=A%20folded%20HdyLeaflet%20%2C%20just%20like,and%20which%20is%20a%20screenshot%3F

Force refresh button

When adding custom services, I need to restart the app. I did also try to use reddit and had to restart it a few times. A force reload button or similar would be usefull

Edit:
It seems to depend on the website whether a restart is required. Instagram and reddit needed one, tiny rss didn't. I really appreciate your work.

Custom applications made with flatpak are not tracked correctly on GNOME Shell

Open custom applications made with the flatpak version are always associated with re.sonny.gigagram.desktop instead of their own .deskotop.

I tried tweaking the Exec path and --class in the desktop file or the application_id in the code, nothing worked, somehow the application is always matched to re.sonny.gigagram.desktop but after a while I realized the issue is already tracked by GNOME Shell:

Issue:
Window Tracker shouldn't match windows by sandboxed ID before checking WM_CLASS

Merge request:
window-tracker: check WM_CLASS for sandboxed apps before the app's ID

Here is what our desktop files look like

~/.local/share/applications/test-c0f4ab3c72cd4071bff12c6d4b132129t

# Created by Gigagram

[Desktop Entry]
Version=1.0
Name=test
Exec=re.sonny.gigagram --name=%c --id=test-c0f4ab3c72cd4071bff12c6d4b132129
Terminal=false
Type=Application
Categories=Network;GNOME;GTK
StartupNotify=true
X-GNOME-UsesNotifications=true
StartupWMClass=test-c0f4ab3c72cd4071bff12c6d4b132129

mutter meta_window_update_flatpak_id there might be a very hacky way to work around this

A detach button

I know this might be a little complicated.
Like if a user detaches an app. It should have .desktop app. But when user re-attaches it. It should delete the .desktop file.
And should the app allow tab creation for individual .desktop app. It could be really helpful for app like Google Doc(Gsuite in general).

No Notifications

I don't seem to be receiving any notifications with the following setup:

Tangram: 1.2.0 (Flathub)
OS: Ubuntu 18.04.3
DE: GNOME Shell 3.28.4

Happy to test and provide more details on request!

Investigate libsoup warning on flatpak

Everything seem to be working fine, could be a false positive. Investigate.

Some examples:

(process:55): libsoup-WARNING **: 15:59:19.773: Failed to execute query: table soup_hsts_policies already exists

(process:55): libsoup-WARNING **: 15:59:19.775: Failed to execute query: database is locked

(process:20): libsoup-WARNING **: 15:31:39.757: Can't open /home/sonny/.var/app/re.sonny.Tangram/data/Tangram/189152da74cf4c42a640f2e30af210ea/cookies.sqlite 

Tangram opens authentication pop up window link in browser, breaking SSO

While trying to sign in to my work's Rocket.chat instance which uses (keycloak) Tangram opens up the SSO Login in the default browser. Which breaks the login flow as Tangram never receives the authentication token.

An example, support for pop up windows, or some way to force links to open in Tangram might solve this.

I am on latest version on flathub
Fedora 32

Can't save files

Continued from here flathub/re.sonny.Tangram#1

I tried using Tangram for a file hoster service (like Google Drive) but there seem to be no way for the app to save files to local disk, rendering it slightly useless for that purpose.

I would be totally fine with any file download request to just automagically be saved to XDG_DOWNLOAD, no fancy location browser necessary.

Reproduce

• Add https://drive.google.com as an url (and sign in)
• Right click and press Download on any file. Nothing will be downloaded

Enable swipe navigation gesture

I think the app should enable swipe gestures webkit provides in addition to the already available pinch zoom. :)

The API: https://webkitgtk.org/reference/webkit2gtk/stable/WebKitSettings.html#webkit-settings-set-enable-back-forward-navigation-gestures

See https://blogs.gnome.org/alexm/2019/09/13/gnome-and-gestures-part-1-webkitgtk/ for more in depth explanation.