Add TouchBar Support

[MarshallOfSound]

So here goes 👍

I've still got to add docs for all this but basically this PR adds support for

• window.setTouchBar(bar)
• new TouchBar([...])
• new TouchBarButton(...)
• new TouchBarColorPicker(...)
• new TouchBarGroup(...)
• new TouchBarLabel(...)
• new TouchBarPopover(...)
• new TouchBarSpacer(...)
• new TouchBarSlider(...)

Still to do

• Add support for the "customizable" attribute (pretty major thing missing but it requires some good docs and some magical techniques)
• Move item classes to their own files instead of being static classes on TouchBar
• Document all the things
• Implement a NSCustomTouchBarItem with an NSScrubber as the view (this is quite a big task, not sure if it is even possible to declare at runtime)
• Implement a NSCustomTouchBarItem with an NSSegmentedControl as the view!
• Test? Somehow? Idk?
• Ensure this doesn't break on older macOS versions. (Test on El Capitan)
• API Feedback / changes
• Remove modifications to default_app
• Fix linting 😆
• Add methods to manually set the slider value
• Add a way to create the "spacer" touchbar items

Closes #7781

[MarshallOfSound]

@zcbenz / @kevinsawicki / @zeke Given this compiles without any issue on my laptop I think the OSX build machine needs to have it's XCode updated?

[bengotow]

This looks great! Will try it today with N1. You're correct - this will need to be built with the target SDK set to MacOS 10.12.1 with the most recent version of Xcode. I wonder how often Travis updates Xcode...

[MarshallOfSound]

@bengotow It looks like travis-ci already has support for the required version of X-Code

https://docs.travis-ci.com/user/languages/objective-c/ 😄

[stnKrisna]

Would like to point this cool app,
https://red-sweater.com/touche/

It emulates TouchBar on all mac (as it claims). So, if you need to do some testing on a mac without TouchBar, you could do it now.

Edit: Or, you could use the latest xcode with the latest sierra and open the TouchBar emulator window

[MarshallOfSound]

In order to reduce API overhead (keep methods minimal) I added a method to all TouchBarItem instances called updateConfig (probably going to rename to updateOptions) that will update the relevant NSTouchBarItem instances with the new config without redrawing the entire TouchBar. Seems to work nicely 👍

[bcoe]

@MarshallOfSound hey, I'm attempting to take this branch for a spin and am running into some issues.

• I've checked out your branch.
• built it and installed it globally (npm i -g).
• I've tried creating a demo app that looks like this: https://gist.github.com/bcoe/8e658eb17cc0616677a74a06e155e4d6

When I start up the project, electron . in the project folder; focusing on the window doesn't seem to modify the touch bar ... I'm fairly new to electron development, so please excuse my ignorance if I'm missing something simple.

[zeke]

Hi @bcoe!

[MarshallOfSound]

@bcoe This part is probably where you went wrong

built it and installed it globally (npm i -g).

There isn't currently an easy way (that I know of) to link the version of Electron you built with an the electron command in another module. Whenever I test I just copy the output of the electron build to node_modules/electron/dist in whatever project I want to use it.

If you launch the sample application (that is generated during the build) do you get the touch bar buttons and such?

[ktiedt]

This is amazing progress :D

Any chance the popover can allow for options (if it doesnt already - I didn't see) to mimic the volume and or brightness popovers? Or the animated popover for the default function keys?

[MarshallOfSound]

@ktiedt I briefly looked into mirroring that kind of functionality and the TLDR is.

• I couldn't find a way to do the animation (maybe private API?, or maybe I'm blind and missed the docs?) 😆
• You can replicate the brightness and volume sliders with some craftily placed spacers in the popover touchbar

[tvanier]

Thanks @MarshallOfSound for the awesome TouchBar support! Was wondering if someone tried a button with an image? I rebuilt the default app with the button below (in default_app.js), but it won't show up in the touch bar. Maybe some special image format/size is required? I could just find "2x with a maximum height of 30 points (corresponding to 60 pixels)" in these docs.

const imageButton = new (TouchBar.Button)({
    image: path.join(__dirname, 'myimage@2x.png'),
    click: () => {
        console.log('my image clicked');
    }
});

[MarshallOfSound]

@tvanier I did while I was building out the API. Try removing the "@2x" from the file name

[bcoe]

@MarshallOfSound thanks for your help, you're right I was not using the correct version of electron to test. My testing went pretty well; I got things running with hyper-term for a proof of concept:

https://twitter.com/BenjaminCoe/status/830607339577225218

some feedback for you:

• I found I was able to update the label on existing buttons (which was how I implemented the feature shown above).
• I was having trouble updating a label element; updating the label did not cause a redraw -- and you'd end up with draw artifacts.
• in general I'm curious if it's possible to expose more control over text layout, my goal is to:
  • show git and build information in the touchbar -- so fairly complex text output (this would rock!).

amazing work! can't wait for this to eventually land.

[MarshallOfSound]

I was having trouble updating a label element; updating the label did not cause a redraw -- and you'd end up with draw artifacts.

Will experiment with that, I have an example locally which implements a clock in a label element (one of the local testing things I did) and it appears to update nicely.

in general I'm curious if it's possible to expose more control over text layout, my goal is to:

The best I can do really is expose the core API's of the touch bar, anything super advanced requires custom views in native code and can't really be generalized well enough.

show git and build information in the touchbar -- so fairly complex text output (this would rock!).

First off, that would be aswesome, just having like Webpack Status: Building or something in the touchbar would save a few alt tabs to watch it rebuild.

Secondly, what exactly do you need in order to achieve what you want to do? Can't this kind of text output be done with labels?

[matthewdias]

According to the spec, the touchbar isn't supposed to be used for displaying information. It's strictly for controls.

[NTag]

@matthewdias However, when using QuickTime for a screencast, the touchbar displays the length and the size of the recording, which is pure information.

[jhen0409]

Just found a way to add button to Control Strip, but it's private API: https://github.com/a2/touch-baer

Probably only these applications are using it: Xcode, TouchSwitcher, Rocket

Currently it's I feeling the best experience for use TouchBar, but I think it will break the experience of MPRemoteCommandCenter, this may be the reason Apple didn't public it? 🤔

[Cryrivers]

Any updates for this PR?

[PeterTeng]

The last update was 2 months ago, any one approach to this feature too?

[MarshallOfSound]

@Cryrivers @PeterTeng This PR is currently blocked by the inability to build Chromium with the required target SDK.

See #8280 (comment)

[kevinsawicki]

@MarshallOfSound perhaps this can be unblocked using this technique, https://cs.chromium.org/chromium/src/ui/base/cocoa/touch_bar_forward_declarations.h

[MarshallOfSound]

@kevinsawicki Will look into next week some time (unless someone plays with it first). Will have to downgrade my SDK and see if it still compiles 😆 What exact combinations of SDK / xCode do the build machines use again?

[kevinsawicki]

I've tested this on El Capitan to verify it works on older OS versions and also machine without a touch bar.

Thanks @MarshallOfSound for your awesome work on this 👍 🎉 🥇

It will be included in the next Electron beta release, 1.6.3.

[tvanier]

Nice job @MarshallOfSound and @kevinsawicki ! I will retry a button with an image file, this did not work for me a few weeks back, likely because of my png. Maybe add an example with a working image?

const imageButton = new (TouchBar.Button)({
    image: path.join(__dirname, 'my-icon.png'),
    click: () => {
        console.log('my image clicked');
    }
});

[kevinsawicki]

image: path.join(__dirname, 'my-icon.png'),

The property is icon now to match the MenuItem API.

[tvanier]

Ah ok, although NSButton uses image I think. I guess these icon specs should work?

If you use an image in a button or other control in the Touch Bar, take care to employ a template image. Template images in the Touch Bar respond automatically to system white-point changes, and automatically react to user interactions.
Use Retina-resolution image assets, designated as @2x in your asset catalog and with a maximum height of 30 points (corresponding to 60 pixels).

https://developer.apple.com/reference/appkit/nstouchbar#2647104

[kevinsawicki]

I guess these icon specs should work?

Yup, they should, I've tried with this icon locally called electron@2x.png and it worked for me:

[PeterTeng]

Nice job @MarshallOfSound and @kevinsawicki !!!!

[rhysd]

I tried master branch and this really works nice! Thank you.