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

[wicktus]

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 :).

[mrmlnc]

Blocked by electron/electron#7781

[simonech]

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

[jmalonzo]

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]

Also waiting for this one :) 👍

[johnbillion]

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

[coreh]

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]

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

[reintjanhoiting-zz]

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]

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]

touchbar support would be sooo nice!

[krshubham]

Please bring touch bar support soon

[guilhermepontes]

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]

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]

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]

@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]

@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]

@mrmlnc ping :(

[avrame]

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

[jonathan-fielding]

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]

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

[jonathan-fielding]

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

[guilhermepontes]

Nice! :)

[jonathan-fielding]

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]

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)

No idea why this shows upside down

[jonathan-fielding]

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

[jonathan-fielding]

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

[kamilkp]

Exacly. Make it configurable. I would personally find "jump to definition" and "jump to previous place" most useful. Kamil Pękala Dnia 18.09.2017 o godz. 20:25 ruebenacker <notifications@github.com> napisał(a):

…

It would be awesome to have the following buttons: Comment in / out -> comment the marked line/lines in/out Sync Git Commit all and Sync Git Fold / Unfold Brackets Generally it would be useful to have the configuration panel of the Touch Bar supported to change the layout as needed. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[bpasero]

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]

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

[bpasero]

@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]

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:

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.

[simonech]

@bpasero : in RTM or in insiders channel?

[MarshallOfSound]

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]

@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]

@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]

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

[felipenmoura]

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]

@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]

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]

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]

@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]

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]

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]

I'd love to but I really don't have time at the moment out of work, I just wanted to give my feedback as it's rubbish when you put something out and you don't get any response.

…

On Wed, Nov 1, 2017 at 3:21 AM, Felipe Nascimento de Moura < ***@***.***> wrote: Interesting @daveshirman <https://github.com/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. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#14653 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANnlXg8J2q_SrOGUzVGHY7MuAkRPS-nFks5sx-PWgaJpZM4KjTg5> .

[felipenmoura]

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]

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]

@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.

[mokyox]

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

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

[spywhere]

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