Vscode: [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 https://github.com/electron/electron/issues/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 :) :+1:

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

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: https://github.com/electron/electron/issues/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: https://github.com/electron/electron/issues/7781#issuecomment-284090097

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 https://github.com/Microsoft/vscode/pull/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 https://github.com/Microsoft/vscode/issues/24934

[jonathan-fielding]

Added a action bar switcher

[wicktus]

Looks great :) !

[simonech]

I think a cool feature would be having step in/over debugging button

Sent from my iPhone

On 20 Apr 2017, at 21:50, Jonathan Fielding [e-mail] wrote:

Added a action bar switcher
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[zweck]

Oh man, this is looking awesome!

[jeremieca]

+1 for step in/over debugging button controls !

[RoXuS]

Hi @jonathan-fielding, thx for your fork but when I build it, I have an error about Electron, it doesn't recognize touchbar. You use an other Type definitions ?

[jonathan-fielding]

Do you have the latest version of Electron installed? touchbar is added in Electron 1.6.

Also their is an error when it builds at moment (Which doesnt prevent it working) which is that the typescript type definitions are not updated for Electron 1.6 (is still at 1.4.6). This means until the VScode team fix those type definitions I cant raise a PR that is valid.

[RoXuS]

thx for you response @jonathan-fielding.

Yes I have the latest version installed, the errors :

Error: /Users/xx/Project/vscode/src/vs/code/electron-main/touchbar.ts(1,10): Module ''electron'' has no exported member 'TouchBar'.
Error: /Users/xx/Project/vscode/src/vs/code/electron-main/touchbar.ts(31,7): Property 'setTouchBar' does not exist on type 'BrowserWindow'.

But this errors stop the build.

[niemyjski]

Can we get this added?

[crlang44]

@jonathan-fielding Thanks for getting this going! I'm running your fork locally via ./scripts/code.sh, although I don't see any touchbar buttons. Also, let me know what I can do to help out!

[jonathan-fielding]

As I am new to coding in vscode codebase I really need to get to grips with how events are dispatched. A lot of the events seem to go from window to frontend application and not the other way round so having to look at how events go arround the application

@crlang44 are you on my branch too?

[crlang44]

Whoops, now I am. I'm actually getting the same error that @RoXuS was getting above and it didn't want to run at first but it is running now and I see the buttons!

[jonathan-fielding]

Yeah with electron type definitions being out of date on VScode it causes build issues, eventually it builds and then it builds consistently

[crlang44]

That's odd, I wonder how it decides to work all of a sudden. Anyways, is there a better way for us to talk? I'd be willing to look into the events as well.

[jonathan-fielding]

I am on the vscode gitter, can you dm on gitter?

[thaoula]

hi @jonathan-fielding,

This feature looks awesome, what are the next steps to get this baked into the core of VSCode?

Regards,
Tarek

[jonathan-fielding]

@thaoula Apologies I have been on holiday for 2 weeks.

The biggest blocker I have is that the way in which events are emitted in between the interface and the node layer that runs behind it. Essentially a lot of events go from the node layer into the interface but not from the interface back into the Node layer which means the touchbar doesn't know when to update with changes. To fix this I am trying to understand what events are missing so I can add them in.

[coreh]

A suggestion — not sure how much it would help or if it even applies (perhaps due to the nature of the touchbar API or due to how VSCode is structured) — but given that the touchbar is conceptually part of the interface, and the required events to update the touchbar are currently available mostly on the interface (HTML/Browser) layer, wouldn't it be simpler to bridge the touchbar calls to the interface layer, and update it from there directly, instead of propagating all events down to the Node layer?

[jonathan-fielding]

The touchbar is attached to the Window in Electron so the logic belongs to the same logic that creates the Windows in the first place. In this vane when the user creates a new window we create a new touchbar so each Window has its own touchbar state.

[jedrichards]

Great to see you're investigating adding the Activity Bar icons. For me this would be the MVP for Touch Bar support, before any more complex features like intellisense display, debugging etc.

[jonathan-fielding]

I already have the debugging working, but with text buttons, icon buttons dont work properly

[thaoula]

Hi Jonathan,

What is the process of getting your bits. Do I just fork vscode, switch to your branch and follow the vscode developer guide to get it up and running?

Regards,
Tarek

Get Outlook for iOShttps://aka.ms/o0ukef

---

From: Jonathan Fielding <[email protected][e-mail]>
Sent: Tuesday, June 27, 2017 10:07 pm
Subject: Re: [Microsoft/vscode] [macOS] Add support for the touch bar in the new macbook (#14653)
To: Microsoft/vscode <[email protected][e-mail]>
Cc: Tarek Haoula <[email protected][e-mail]>, Mention <[email protected][e-mail]>

I already have the debugging working, but with text buttons, icon buttons dont work properly
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/Microsoft/vscode/issues/14653#issuecomment-311388016, or mute thethreadhttps://github.com/notifications/unsubscribe-auth/AAVTzac66f8ccM3Zu1BVR_rVUfuIqajzks5sIRq2gaJpZM4KjTg5.

[jonathan-fielding]

Just clone my fork and switch to feature/touch-bar and then build how it says, just updating to work with the changes in master

[wicktus]

I'm working on a research project right now, but after that might take a look at the touch bar support, the main idea I think would be to integrate functionalities that are useful and complementary to the traditional trackpad/keyboard ;).

I summed up the ideas I might work on

• Display log outputs with horizontal scrolling (automatic or touch), that way the code panel can take the whole screen.
• Ability to display and change the current opened tab, like Safari.
• Customizable shortcuts (and their icon) : launch npm scripts, trigger a specific commande like > format document , etc.
• (don't know if possible) Change current workspace.
• (don't know if possible) Intellisense integration: writing and having autocomplete suggestions on the oled or the written function's description (interface, parameters etc.)
• Save all button

[danieleds]

@wicktus, I'm worried about point 1 (Apple HIG explicitly discourage the use of the touch bar as a secondary display, and I can see why).

Also, about the intellisense integration: most of us are touch typing (no pun intended). I don't see any advantage in moving / copying the on-screen intellisense info to the touch bar.

What in my opinion would really have great value, in addition to what @jonathan-fielding is already working on, are the icons for launching custom commands. That's a must-have!

[wicktus]

@danieleds
It's not a secondary screen per say, rather a log stack, that you can scroll, line per line. The Automatic scrolling could make it look like a screen and disturb the programmer's focus, that is true but nothing prevent us from disabling this feature if it were to be implemented.

Intellisense on the touch bar could also benefit from touch typing, once you know where on the screen the suggestion appears for a word typed : if i type 'log' and loggerService appears on the left I can reach it next time without looking. Not super useful and not a priority but it's not meaningless imho.

But yes shortcuts with customizable icons that's really a no-brainer, we need this, and will work on it asap.

[jonathan-fielding]

I already have a good working version of how touchbar integration can work, happy to have some more help @wicktus rather than duplicate effort.

The intellisense idea is quite cool, kind of how in messages you get suggestions on mac (so will be within Apple HIG)

[jonathan-fielding]

Also custom commands are doable with the way I have been coding the touchbar, very easy to add later

[wicktus]

@jonathan-fielding Was planning on cloning your fork when i start :). Thanks for your work !

[jonathan-fielding]

Its still work in progress, currently working on the problems with the VScode event model

[vapits]

Is there a roadmap for releasing this feature?

[wicktus]

i don't know for jonathan but for me Nope. I'm working on it during my spare time ;). Might take some time before I progress, i need to study the whole event transmition chain in vscode.

[jonathan-fielding]

So the biggest problem I am having is that no one answers my questions about the codebase so I am having to figure things out myself. At the moment the biggest challenge I have is to sort out how the events are triggered so that the touchbar is aware of changes which section of the app your in

The next step is to add support to extensions to add extra buttons,

Then the final step after that is to do some tidying so that I am as close to the code style to VScode as possible, this is so that my PR wont get rejected.

[fxck]

Still no offical word on this? Vscode has been on electron that supports this for a while now..

[chemitaxis]

Hi @jonathan-fielding, if you put here your questions, maybe we can upvote them ;) I would like to help... but in this moment I can't :(

[jonathan-fielding]

So I have been having problems getting the build to work since I updated to the latest master on vscode, gonna try it on a different computer later as my new personal machine arrives today (if ups ever get here)

[daveshirman]

So I know this isn't the same as built in support, but I just used better touch tool to make my own VSCode touch bar config.

The only downside is the pesky X button far left that pushes esc to the right, but it's usable until built in support comes:

[dudeofawesome]

With the new color picker built in to VSCode, maybe we could get an input for it on the touch bar.

[firelizzard18]

@jonathan-fielding If you're using node 8 (npm 5), it doesn't work: #30775. You have to rollback to npm 4.x or jump through some hoops to get it building using a project-local install of npm 4.x.

[jonathan-fielding]

Im using 6 with npm 5, so its likely the npm5,

[firelizzard18]

If you want to stick with npm 5, I figured out how to make it work with a local npm 4; there's a comment on #30775 with the steps I used.

[evgkarpov]

I tried to run fork with touch bar, can't build it. So I created my own fork and updated Electron Type Definition on 1.7.5 (currently VSC using 1.7.3 version).

[0xdeafcafe]

Would love to help on this as I'd use it daily. Which fork should I be looking at contributing to?

[evgkarpov]

Hi @0xdeafcafe . You could use my fork or @jonathan-fielding fork.

[bpasero]

Thanks for the interest in this feature and the motivation to help out via PRs. In this case the implementation was actually quite straightforward leveraging our existing menu story.

I pushed an initial version of this feature via https://github.com/Microsoft/vscode/pull/34574

By default we show a couple of entries:

• editor navigation (backward / forward)
• an action to create a new file
• the debug toolbar (shows buttons depending on debug running or stopped)

Icons are not final yet.

There is also a new menu identifier that extensions can contribute commands to: touchBar. Either icon or label are supported, the icon has to be of format PNG. A group can be specified to group actions together. By default we introduce groups navigation, 1_modification and 9_debug.

"contributes": {
    "menus": {
        "touchBar": [
            {
                "command": "markdown.showPreview",
                "when": "editorLangId == markdown",
                "group": "navigation"
            }
        ]
    }
}

[bpasero]

...a build is out with the changes to try it out, feedback welcome: download

One known issue is that the debug toolbar disappears if hitting a breakpoint unless you configure the touch bar like this (Touch Bar shows: App Controls):

This is because simply the number of elements is limited and there is no overflow. Still need to figure a better way out to overflow buttons that do not fit. Or maybe have a setting to remove some built in entries.

[ruebenacker]

It would be awesome for me 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.

[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 [e-mail] 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 <
[email protected]> 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
https://github.com/Microsoft/vscode/issues/14653#issuecomment-340967636,
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.