Support MacBook Touch Bar API

[kevinsawicki]

Tracking issue for adding touch bar API support to Electron on macOS 👉 ⌨️ 💻 🍎

• Chrome issue
• NSTouchBar docs
• Design video
• NSTouchBar catalog
• Touch bar example app

Please feel free to leave comments here about API ideas, usage patterns, etc.

[jakubzitny]

It should probably have a similar API as menu has

• importing TouchBar from electron in main process and from remote in renderer
• creating a custom instance with new TouchBar()
• setting it with static method TouchBar.setApplicationTouchBar(touchBar)

The custom instance should have setters for customizationIdentifier, defaultItemIdentifiers, customizationAllowedItemIdentifiers and principalItemIdentifier.

I am not sure how to add items from the Catalog. Maybe something like MenuItem's types such as checkbox or separator it should just be enumerated with string ids.

What do you think?

[HFreni]

I think that you should also consider adding a setter for NSTouchBarItemIdentifierOtherItemsProxy to allow for nested TouchBar MenuItems.

In terms of adding items from the Catalog, I think that they should be accessible as objects so that a developer can just instantiate a new MenuItem() that takes in the array of defaultItemIdentifiers

My 2 cents.

[NetOpWibby]

We're just deleting comments now? Cool.

Any idea on how to add a screenshot of a <webview> to the Touch Bar?

[anaisbetts]

@NetOperatorWibby We asked around and I don't think any of the Electron maintainers deleted your comment, if they did then it was accidental. Regardless of how it happened, sorry about the missing message!

[HFreni]

I was just reading the TouchBar documentation some more, and it seems as if macOS does all of the spacing and rendering, which means that there may not be a possibility to display a <webview> container or screenshot within the Touch Bar.

I'm wondering what kind of effort it would require for someone to create a method of displaying webview content within the Touch Bar.
In the event that it's possible, it creates an even larger number of use cases for the Touch Bar, including but not limited to games and notifications, plus it would allow developers to unify their user interface and to develop custom MenuItems for their applications.

[bengotow]

@HFreni I've been reading on Twitter that the TouchBar actually runs WatchOS (which is crazy and super cool.) It seems it's receiving framebuffer data at a low level though, so I imagine we could create a custom TouchBar view and forward it data!

Source: https://twitter.com/stroughtonsmith/status/791872723681239040

[davidhariri]

The main use cases I see are these two types of views:

1. ButtonView(onPress:Function, textContent:String/null, graphicContent:URLString/64Blob/null)
2. SimpleView(textContent:String/null, graphicContent:URLString/64Blob/null)

If we could have some sort of simple interface for alignment/justification within the parent view (similar to FlexBox?) than that would be a great start for most devs I think!

Side note: It would be so cool to see Git status in Atom in the TouchBar...

[rootscript]

@kevinsawicki @bengotow - I found this an interesting read: https://www.raywenderlich.com/147118/use-nstouchbar-macos

Visual design guide: https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/VisualDesign.html#//apple_ref/doc/uid/20000957-CH106-SW1

List of system icons: https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/Icons.html#//apple_ref/doc/uid/20000957-CH107-SW1

Standard controls: https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/ControlsandViews.html#//apple_ref/doc/uid/20000957-CH108-SW1

[mydigitalself]

http://www.iclarified.com/57924/doom-on-the-macbook-pro-touch-bar-video

#justsayin' (and apologies for bringing down the tone)