Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[macOS] Add support for the touch bar in the new macbook #14653

Closed
wicktus opened this issue Oct 28, 2016 · 96 comments
Closed

[macOS] Add support for the touch bar in the new macbook #14653

wicktus opened this issue Oct 28, 2016 · 96 comments
Assignees
Labels
feature-request Request for new features or functionality on-testplan upstream Issue identified as 'upstream' component related (exists outside of VS Code)

Comments

@wicktus
Copy link

wicktus commented Oct 28, 2016

Hello :),

I think many people are using visual studio code with macbooks, Adding shortcuts and features to the new touch bar in the upcoming macbooks pro can be useful and more productive for future owners :).

Image of touchbar

@mrmlnc
Copy link
Contributor

mrmlnc commented Oct 28, 2016

Blocked by electron/electron#7781

@bpasero bpasero added feature-request Request for new features or functionality upstream Issue identified as 'upstream' component related (exists outside of VS Code) workbench labels Oct 28, 2016
@bpasero bpasero changed the title [feature request][macOS] Add support for the touch bar in the new macbook [macOS] Add support for the touch bar in the new macbook Oct 28, 2016
@simonech
Copy link

Apart from the core, I guess also extensions which provide new windows should be able to add their owns if it makes sense.

@jmalonzo
Copy link

jmalonzo commented Dec 1, 2016

I would also like to add and request if we can make this context-aware - e.g., when editing a Markdown document, the Markdown plugin/service should be able to provide useful context-specific shortcuts and features in the TB, or have debugging controls appear when debugging an app.

@masaanli
Copy link

masaanli commented Dec 2, 2016

Also waiting for this one :) 👍

@johnbillion
Copy link
Contributor

A killer feature would be to have the breakpoint controls appear on the touch bar while debugging at runtime.

@coreh
Copy link

coreh commented Dec 16, 2016

Would be really, really nice to have Intellisense suggestions go there. (They'd be laid out horizontally instead of vertically, but even then it would be pretty cool. And it could provide scrolling to handle overflow)

@slowmove
Copy link

It would be nice to be able to adjust the touch bar controls thru the extensions api.

@reintjanhoiting-zz
Copy link

Hi, Correct me when i'm wrong. but we should wait with building the touchbar feature until electron is ready.

here is the issue over at electron, about the new Touchbar feature: electron/electron#7781

@markmcgookin
Copy link

This would be great, some defaults like "Step Into" and "Step Over" when debugging, go to definition, find all references, comment this line etc.. as someone mentioned above, contextual stuff when in different file types would also be awesome.

@Topograph
Copy link

touchbar support would be sooo nice!

@krshubham
Copy link

Please bring touch bar support soon

@guilhermepontes
Copy link

guilhermepontes commented Mar 4, 2017

Any news about this?

Update: electron/electron#7781 (comment)

It's live on master and will be available in the next release 1.6.3! 🤘

@wicktus
Copy link
Author

wicktus commented Mar 4, 2017

Finally :) !

Been using Electron 1.6 with native ES2015 support (without babel finally...) and it's great and now they're adding touch bar API support, they're really working hard on Electron and that's awesome, kudos to the Electron community.

@avrame
Copy link

avrame commented Mar 19, 2017

Correct me if I'm wrong, but the package.json file has this line in it:
"electronVersion": "1.4.6"
Is vscode really using such an old version of Electron? If so, it might be difficult to update to 1.6.3

@MarshallOfSound
Copy link
Contributor

@avrame 1.4.6 isn't that far behind 1.6, the minor 1.5 was pretty much skipped and there aren't many massive changes between 1.4 and 1.6 👍

@wicktus
Copy link
Author

wicktus commented Mar 19, 2017

@MarshallOfSound
Two words : Native ES2015 :). but I don't see Babel in the package.json or anything similar so vscode might not find this electron update quite useful.

But I never enjoyed using babel with Electron.js, and it's great that they fixed this by updating the nodeJs version to v7+.

@guilhermepontes
Copy link

@mrmlnc ping :(

@avrame
Copy link

avrame commented Mar 21, 2017

@mrmlnc Electron is now at 1.6.3 which includes touch bar support!

@jonathan-fielding
Copy link

Looks like the electron upgrade is still WIP over here #23800

In meantime I have been looking at how to implement this feature, docs over here https://github.com/electron/electron/blob/master/docs/api/touch-bar.md

Was thinking that the buttons that appear need to be:

Configurable

Settings to configure what appears, so things I use most have the button in place.

New buttons added by extension

When I use the gulp extension I should be able to see gulp on my command strip.

Context aware

Not necessarily in initial implementation however but the implementation needs to be built so it doesn't require a breaking change to add this. The idea earlier about debug controls sounds pretty sweet.

@GiuseppeLaurenza
Copy link

GiuseppeLaurenza commented Apr 7, 2017

it can be a very killer feature
moreover I do not known other free IDE that support touchbar

@jonathan-fielding
Copy link

Looks like were good to start implementing this now as 1.6 is merged 💃

@guilhermepontes
Copy link

Nice! :)

@jonathan-fielding
Copy link

https://github.com/jonathan-fielding/vscode/tree/feature/touch-bar this is my branch in my fork I am working on, so far ive been playing round with namespacing config

@jonathan-fielding
Copy link

jonathan-fielding commented Apr 17, 2017

So the code for accessing the window is reasonably complicated in Vscode however managed to add a save button, need guidance on where abouts this code should live (currently have in the menus.ts file)

img_2144

No idea why this shows upside down

@jonathan-fielding
Copy link

touch bar shot 2017-04-18 at 07 10 08

Next thing I want to work on is making the buttons themeable

@jonathan-fielding
Copy link

Just realised this will be blocked by the Type definitions not being updated for Electron 1.6 #24934

@bpasero bpasero self-assigned this Sep 19, 2017
@kamilkp
Copy link

kamilkp commented Sep 19, 2017 via email

@bpasero
Copy link
Member

bpasero commented Sep 19, 2017

Unfortunately our UI framework currently does not expose API to trigger the touch bar configuration UI. However, as for entries to show in the touch bar, I am thinking of extensions to provide them via the new touchBar menu location. Extensions can add entries to existing groups as well as create new groups. It is unlikely that our out-of-the-box experience would make every user happy, so sourcing this out to extensions seems right.

@auchenberg
Copy link
Contributor

@bpasero Can an extension add these contributions dynamically? Ex: Sublime is adding a button for each open file in the editor.

@bpasero
Copy link
Member

bpasero commented Sep 20, 2017

@auchenberg I am not sure that is possible, imho you can only declare menu contributions via package.json. However what is possible is to make entries show and hide dynamically based on the when condition.

@bpasero
Copy link
Member

bpasero commented Sep 21, 2017

Closing as the majority of the work is done. I suggest people give it a try in our upcoming September release and report back issues. I decided to remove the "+" action for creating a new file so that when you are debugging, all buttons show up properly even when the default of showing "App Controls with Control Strip" is enabled:

touch bar shot 2017-09-21 at 12 05 29

I also pushed a change to avoid recreating the entire touch bar when actions change, this should reduce flicker a bit, but in some cases it is still needed to recreate a group of items.

There maybe some slight icon changes before we release stable.

@bpasero bpasero closed this as completed Sep 21, 2017
@simonech
Copy link

@bpasero : in RTM or in insiders channel?

@MarshallOfSound
Copy link
Contributor

this should reduce flicker a bit, but in some cases it is still needed to recreate a group of items.

@bpasero Happy to discuss this in Slack, but it should never be required to completely recreate a group / segmented control. You can assign new "items" arrays and it should update nicely instead of redrawing

@bpasero
Copy link
Member

bpasero commented Sep 21, 2017

@MarshallOfSound I am using multiple of TouchBarSegmentedControl and it seems not possible to reuse any of the SegmentedControlSegment within, there is not even a class type for them to share, they are just simple objects. Am I missing something?

@MarshallOfSound
Copy link
Contributor

@bpasero An example below that should work, on my windows machine atm so can't test.

const control = new TouchBarSegmentedControl({
  segments,
});

control.segments.push(newSegmentObjectThing);
control.segments[0].label = 'New Label'
control.segments = control.segments; // This is the magic trick to tell Electron to redraw this touch bar item

@bpasero
Copy link
Member

bpasero commented Sep 21, 2017

@MarshallOfSound ok I was not aware of that. I can see if this would allow us to reuse segments within a control event.

@felipenmoura
Copy link

Very nice.
How can I use/test it? I couldn't find any extension for that, neither any menu in the latest version so far.

@firelizzard18
Copy link

@felipenmoura If you want to use it, you need a mac. If your mac doesn't have a touchbar, I think XCode provides some kind of emulator. As of the september release (1.17?), it's enabled by default on Mac. The only way you can modify the menus is via extension contributions. I'm not sure if/where that's documented, but the september release notes should have enough to get you started.

@felipenmoura
Copy link

hm, I see.
Yes, I'm testing it on a mac with a touch bar and I see only one button, the "play" one, for debugging.
I think we could really add so many cool features there. If we had some documentation on how to customize that or even how to create new buttons there, it would be great!
Where could I read about how to add buttons, for example?

@felipenmoura
Copy link

Hi
I created this plugin for adding some extra features:
https://marketplace.visualstudio.com/items?itemName=felipe.nasc-touchbar#overview
Let me ask...where can I see a list of all the options I can use in the when clause in the package?
I want to enable and disable the buttons based on the user's settings...is it possible?
Also, feedback and contributions are quite welcome in the extension :)

@daveshirman
Copy link

@felipenmoura Nice work. I didn't even know about the cursor above/below thing, great!

Personally, I find the CMD+B shortcut quicker and easier for the side menu, as my hands are already on the keyboard. Same goes for CMD+click to go to definition.

What I would really like is a button for peek definition and one for find all references.

If you see my post above, I made a bar with BetterTouchTool a while ago to do that, but the X on the left moved the escape key out of position, which made it a pain to use.

Thanks.

@felipenmoura
Copy link

Interesting @daveshirman , the peek and find references are, indeed, two very important additions!
I'm working on a way the user could customize it!
Perhaps we could add those features together and let users decide which buttons they want!
I already have a branch with the options for that, but the problem is that the "when" filter in the package is not considering user's settings (or I couldn't find any documentation on that, at least). Would you have a suggestion on how to accomplish that?
I also received a PR for a "rename file" button.

@ruebenacker
Copy link

Would it be possible for an extension to hide the three standard buttons from VSCode to have more space on the TouchBar for own buttons?

@daveshirman
Copy link

daveshirman commented Nov 2, 2017 via email

@felipenmoura
Copy link

Cool.
I received a PR enabling options :)
Now, it's possible to chose the active buttons in the settings.
This way, we can have more buttons, and the user will enable them based on the free space they have.

@mokyox
Copy link

mokyox commented Nov 14, 2017

Hello,

Unless I'm overlooking something, there doesn't seem to be a way in 1.18.0 to modify the touch bar to get remove the app controls and leave the control strip with brightness/volume intact. Any ideas on how to achieve this?

@felipenmoura
Copy link

@mokyox You can change that in your OS settings.
I don't think you can make it have a different behavior in different apps, though.

screen shot 2017-11-14 at 09 51 20

@mokyox
Copy link

mokyox commented Nov 14, 2017

@felipenmoura Thanks, but what I meant was I want to remove the actual touch bar controls and leave just the control strip behind.

touch bar shot 2017-11-14 at 11 59 33

There doesn't seem to be a way to actually do this without forcing the touch bar to display Fn keys only.

@spywhere
Copy link
Contributor

@mokyox I think you should file this as a separate issue. Otherwise, it would not get implemented as this issue is already closed.

@vscodebot vscodebot bot locked and limited conversation to collaborators Nov 17, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature-request Request for new features or functionality on-testplan upstream Issue identified as 'upstream' component related (exists outside of VS Code)
Projects
None yet
Development

No branches or pull requests