Increase clarity for host regarding which files they're sharing

[jasonrudolph]

Description

In https://github.com/atom/teletype/issues/268#issuecomment-359944857, @Haacked noted:

I found the behavior to add all open files to the portal a bit surprising. It may be because my particular workflow is more focused on note taking than on pair programming.

I tend to have a lot of buffers open in Atom. Sometimes I want to pair with someone on a single file and don't want them to see all the others I have open. It's not immediately clear to me when I share a workspace what exactly is being shared. ...

And after sharing the file, I might need to work on something unrelated to the pairing session in private. I don't want to accidentally share that file by simply opening it. I think it needs to be crystal clear what's being shared, what's not being shared.

Thanks for bringing this up! :zap:

Potential solutions

Available today: Open new window before sharing a portal

When a host shares a portal, that portal only exists in the current Atom window. If the user has other Atom windows open, the portal has no knowledge of those other Atom windows, and therefore the portal cannot share any of the buffers that are open in those other Atom windows.

With that in mind, users may want to open a new Atom window before sharing a portal. Doing so will allow those users to continue using their other Atom windows without having to worry about potentially sharing the buffers that are open in those other windows.

Note: This admittedly doesn't address the need to make it crystal clear which items are being shared. We should address that need. This solution is merely offered as an option for concerned users in the meantime.

Ideas going forward

In https://github.com/atom/teletype/issues/268#issuecomment-360448423, @simurai explores a handful of potential solutions for us to consider once we're ready to tackle this issue.

[50Wliu]

When beginning to share a workspace, I can potentially see a UI that asks which of the currently open files the host wants to share, and if new files should be automatically shared as well. I'm not sure how to do the other option though (e.g. opening a file and not sharing it when the option to share new files is selected).

[simurai]

I think something we should strive for: "Keep the act of sharing as quick and simple as possible".

Like whenever you wanna share, you shouldn't have to think too much. Seeing a list of files that you could exclude/include, and then having to decide if new files also should be shared or not, might feel like too much extra work? :stuck_out_tongue_closed_eyes: The mental model of "always the whole window is shared" keeps things simple and you don't have to be paranoid of juggling between individual files.

Another idea: Share in the same window.

There are these "project switching" packages like project-neue. They just replace the current project with a different one. See the gif below where I keep switching (with a keybinding) between the last used projects (teletype + about):

It's super fast and feels almost instant. So if you only want to share a single file, instead of having to do this:

1. "Open In New Window"
2. "Close Other Tabs"
3. "Remove Project Folder" (in the tree-view)
4. Start sharing portal

It could be reduced to:

1. "Open In Same Window"
2. Start sharing portal

I know "Open In Same Window" sounds super strange.. :laughing: There might be a better way of saying "Open this file in an empty project in the same window". Anyways it would be super fast to "hide" everything else and when you're done sharing, you can just as quickly switch back to the previous project and continue where you left off. Could also be an option on entire folders in the tree-view and not just on tabs.

It's more a "core" feature, but Teletype users would benefit too.

[jasonrudolph]

I think something we should strive for: "Keep the act of sharing as quick and simple as possible". Like whenever you wanna share, you shouldn't have to think too much.

Yes! Thanks for bringing this up, @simurai. :bow::heart:

I contend that we can encourage more collaboration by reducing barriers to entry. Ultimately, I'd love to see Teletype provide the world's fastest transition from "I want to collaborate" to "I am collaborating." 🚀🤞We have quite a ways to go still, but we have a better chance of getting there if we avoid adding any complexity to the existing collaboration initiation flow.

[CaptainJohnyAppleSeed]

A portion of the solution, if it is kept within the same window, for showing which files are currently shared could be to have the tab's colors changed when they are shared, like this post mentions (I have not tested this). This could possibly be added to editor-binding, so that all of the editors would get updated.

[jasonrudolph]

In the near-term, we're focused on other improvements to Teletype.

To make progress on those improvements, we'll need to limit the amount of time we invest into this issue in the near-term. With that in mind, @simurai's design in https://github.com/atom/teletype/issues/268#issuecomment-360448423 feels like it would nicely address the core need (i.e., "it needs to be crystal clear what's being shared") with seemingly minimal effort:

More prominent "is sharing" mode

Currently only the colored status-bar icon is a reminder that you're currently sharing your workspace. There could be stronger indication, like a border (like when screen sharing in Zoom):

If anyone wants to open a pull request to explore that approach, I'd be happy to review it and try to get it merged.

[simurai]

You can try the blue border with the following in your styles.less file:

// Add border when Teletype is active
@import "ui-variables";
.teletype-Host::after,
.teletype-Guest::after {
  content: "";
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 10px 3px @background-color-info;
  pointer-events: none;
}

Hmmm.. 🤔 it doesn't look that great. Personally, I would probably remove it again. :stuck_out_tongue_winking_eye:

---

Here a more solid border:

// Add border when Teletype is active
@import "ui-variables";
.teletype-Host::after,
.teletype-Guest::after {
  content: "";
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  border: 3px solid @background-color-info;
  pointer-events: none;
}

[simurai]

Ohh.. maybe this.. with the status-bar icon included:

// Add border when Teletype is active
@import "ui-variables";
.teletype-Host,
.teletype-Guest {
  &::after {
    content: "";
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    border: 3px solid @background-color-info;
    pointer-events: none;
  }
  .PortalStatusBarIndicator {
    color: white;
    background-color: @background-color-info;
  }
}

Then it's more clear that the blue border belongs to Teletype.