Rocket.chat: embedded tabbed browsing

[bizzbyster]

It would be nice if I could use Rocket.Chat as a tabbed browser. The way this would work is as follows:

1. I click a link in a channel, say. Currently on IOS this opens an embedded WebView browser. At this point, in order to go back to my chat window, I need to click the "Done" button.
2. Better would be if the rocket.chat hamburger button that I see in my chat window were to replace the Done button in the embedded WebView. When I click the hamburger button, it would show me my channels and direct messages as it does now but then additionally I'd see a new section with the browser views that I have open.
3. This would let me toggle between embedded browser and chat conversations. Also, I think it'd be a much better tabbed browsing experience than the current tabbed browsers like chrome/safari.

Lastly, if I wanted to keep a browser open to say google news, or a subreddit, a web-based game, I could view it all within Rocket.chat. So basically no need to toggle between apps -- everything is just an extension of the chat UX.

Hope this makes sense. Better would be to provide a mockup. I can do that if it would help.

Thanks for your consideration,

Peter

[bizzbyster]

In place of the user icon displayed under "Direct Messages" the web tabs should display the web page thumbnail. And in place of the username, the web tab should display the html title. So something like this but with standard formatting:

It would also be great if we could preload some web tabs with pages relevant to a given user community.

[armand1m]

@bizzbyster the apps and desktop versions are in different repos. This repo refers to the web version. Your feature is regarding to the version that actually runs on browsers or on mobile devices as apps?

[bizzbyster]

My most urgent need is on Android (cross posted this issue there https://github.com/RocketChat/Rocket.Chat.Android/issues/743) but I'd also like to have it on IOS. Not as important on desktop versions but ideally the feature would be across all three Android, IOS, and Web.

[bizzbyster]

Just to clarify, the bounty would be satisfied by Android support in Rocket.chat++. I'd like to be able to play with the feature and make sure it works as expected in Android before posting an IOS or Web client feature request. Does that make sense?

[armand1m]

@bizzbyster I'm not sure if it makes sense 😅 but yea, I got it.

So this feature actually must be available only for Android as a first step, right? Your bounty is only for Android for now?

[armand1m]

@engelgabriel as one of the owners of the repo, do you have any opinions on this? How it should proceed? Should this issue be moved to the Android repo? Or continue here since there is already a Bounty for this?

[bizzbyster]

"Your bounty is only for Android for now?" Yes that is right.

However, I have a question for you. If this feature gets added to the Web client, will it also work for the Cordova-based Rocket.chat client? The one that is being deprecated? If so I may be able to start with that one since that runs on Android. Thoughts?

[armand1m]

@bizzbyster I cant assure you since I've never contributed directly with the Android or iOS repo, but yea, if it is cordova based must be at least similar 🙂

[armand1m]

@bizzbyster got some time today, guess I'll try be implementing this feature perhaps

[bizzbyster]

@armand1m -- https://github.com/GoogleChrome/custom-tabs-client might be useful to you.

[bizzbyster]

Using that custom-tabs-client demo, you can see what options are available in the embedded browser on Android. In particular, there is a demo of a "custom action button" that I think we should leverage for saving tabs into Rocket.chat.

Behavior:
When you initially click a link from within a chat window, it should popup the embedded browser with a custom action button that let's you save the tab:

But perhaps with a star inside it like this:

In any case, when you click the action button, then it creates a new tab under "WEB TABS" that is associated with this particular web page and includes the html title or web domain if there is no html title for that page. If you then choose the back button, you will go back to your chat room. This is the standard way that embedded browsers close and return to the app.

If the user subsequently wants to visit this page they can click the page under WEB TABS and a frame will open with that page and that frame will have the hamburger button as per usual for Rocket.chat room frames so that the user can now easily toggle between a saved tab and the various direct message / channels.

This is subtly different from what I described above so let me know if it makes sense or if you have any tweaks/suggestions.

[geekgonecrazy]

Isn't this what browsers are for?

I have to say I really don't like the idea of having to maintain code to keep browser tabs and their sessions.

If anything maybe when we launch Rocket.Chat apps this could be implemented as an app? But as a core piece of code.... I don't think this is something most people would want

[armand1m]

@geekgonecrazy this is actually only helpful in mobile applications. For desktop and web versions it indeed is not something most people want, after all, in those environments, this kind of feature is useless

[bizzbyster]

@geekgonecrazy whether or not this gets folded into the develop branch is for this community to decide. In my opinion it will be a very useful feature. I think it might also be useful on the desktop, especially if you are Chrome user and you have no vertical/side tabs option like me.

@armand1m If you are still interested in working on this feature, I will fork the RocketChat android repo and open an issue there and post the bounty to it. Let me know!

[armand1m]

@bizzbyster I'm needing money so yes, I'm interested 😄

[bizzbyster]

Okay closing this here and will reopen in a fork.

[bizzbyster]

This has moved to https://github.com/WideChat/Rocket.Chat.Android/issues/1, the development will be done on that fork, and the bounty is now $300. See https://www.bountysource.com/issues/55132168-embedded-tabbed-browsing. When this feature is working, we'll notify others here and the Rocket.chat community can decide if it wants to include this functionality or not.