Store event listeners in each TouchBar class

atom/browser/api/atom_api_window.cc

@@ -282,9 +282,9 @@ void Window::OnExecuteWindowsCommand(const std::string& command_name) {
   Emit("app-command", command_name);
 }
 
-void Window::OnTouchBarItemResult(const std::string& item_type,
+void Window::OnTouchBarItemResult(const std::string& item_id,
-                                  const std::vector<std::string>& args) {
+                                  const base::DictionaryValue& details) {
-  Emit("-touch-bar-interaction", item_type, args);
+  Emit("-touch-bar-interaction", item_id, details);
 }
 
 #if defined(OS_WIN)

atom/browser/api/atom_api_window.h

@@ -85,8 +85,8 @@ class Window : public mate::TrackableObject<Window>,
   void OnRendererUnresponsive() override;
   void OnRendererResponsive() override;
   void OnExecuteWindowsCommand(const std::string& command_name) override;
-  void OnTouchBarItemResult(const std::string& item_type,
+  void OnTouchBarItemResult(const std::string& item_id,
-                            const std::vector<std::string>& args) override;
+                            const base::DictionaryValue& details) override;
 
   #if defined(OS_WIN)
   void OnWindowMessage(UINT message, WPARAM w_param, LPARAM l_param) override;

atom/browser/native_window.cc

@@ -576,10 +576,10 @@ void NativeWindow::NotifyWindowExecuteWindowsCommand(
 }
 
 void NativeWindow::NotifyTouchBarItemInteraction(
-    const std::string& type,
+    const std::string& item_id,
-    const std::vector<std::string>& args) {
+    const base::DictionaryValue& details) {
   for (NativeWindowObserver& observer : observers_)
-    observer.OnTouchBarItemResult(type, args);
+    observer.OnTouchBarItemResult(item_id, details);
 }
 
 #if defined(OS_WIN)

atom/browser/native_window.h

@@ -234,8 +234,8 @@ class NativeWindow : public base::SupportsUserData,
   void NotifyWindowEnterHtmlFullScreen();
   void NotifyWindowLeaveHtmlFullScreen();
   void NotifyWindowExecuteWindowsCommand(const std::string& command);
-  void NotifyTouchBarItemInteraction(const std::string& item_type,
+  void NotifyTouchBarItemInteraction(const std::string& item_id,
-                                     const std::vector<std::string>& args);
+                                     const base::DictionaryValue& details);
 
   #if defined(OS_WIN)
   void NotifyWindowMessage(UINT message, WPARAM w_param, LPARAM l_param);

atom/browser/native_window_observer.h

@@ -9,6 +9,7 @@
 #include <vector>
 
 #include "base/strings/string16.h"
+#include "base/values.h"
 #include "ui/base/window_open_disposition.h"
 #include "url/gurl.h"
 
@@ -71,8 +72,8 @@ class NativeWindowObserver {
   virtual void OnWindowLeaveFullScreen() {}
   virtual void OnWindowEnterHtmlFullScreen() {}
   virtual void OnWindowLeaveHtmlFullScreen() {}
-  virtual void OnTouchBarItemResult(const std::string& item_type,
+  virtual void OnTouchBarItemResult(const std::string& item_id,
-                                    const std::vector<std::string>& args) {}
+                                    const base::DictionaryValue& details) {}
 
   // Called when window message received
   #if defined(OS_WIN)

atom/browser/ui/cocoa/atom_touch_bar.mm

@@ -131,20 +131,30 @@ static NSTouchBarItemIdentifier SliderIdentifier = @"com.electron.touchbar.slide
 }
 
 - (void)buttonAction:(id)sender {
-  NSString* item_id = [NSString stringWithFormat:@"%@.%d", ButtonIdentifier, (int)((NSButton*)sender).tag];
+  NSString* item_id = [NSString stringWithFormat:@"%ld", ((NSButton*)sender).tag];
-  window_->NotifyTouchBarItemInteraction("button", { std::string([item_id UTF8String]) });
+  window_->NotifyTouchBarItemInteraction([item_id UTF8String],
+                                         base::DictionaryValue());
 }
 
 - (void)colorPickerAction:(id)sender {
-  NSString* item_id = ((NSColorPickerTouchBarItem*)sender).identifier;
+  NSString* identifier = ((NSColorPickerTouchBarItem*)sender).identifier;
+  NSString* item_id = [self idFromIdentifier:identifier
+                                  withPrefix:ColorPickerIdentifier];
   NSColor* color = ((NSColorPickerTouchBarItem*)sender).color;
   std::string hex_color = atom::ToRGBHex(skia::NSDeviceColorToSkColor(color));
-  window_->NotifyTouchBarItemInteraction("color_picker", { std::string([item_id UTF8String]), hex_color });
+  base::DictionaryValue details;
+  details.SetString("color", hex_color);
+  window_->NotifyTouchBarItemInteraction([item_id UTF8String], details);
 }
 
 - (void)sliderAction:(id)sender {
-  NSString* item_id = ((NSSliderTouchBarItem*)sender).identifier;
+  NSString* identifier = ((NSSliderTouchBarItem*)sender).identifier;
-  window_->NotifyTouchBarItemInteraction("slider", { std::string([item_id UTF8String]), std::to_string([((NSSliderTouchBarItem*)sender).slider intValue]) });
+  NSString* item_id = [self idFromIdentifier:identifier
+                                  withPrefix:SliderIdentifier];
+  base::DictionaryValue details;
+  details.SetInteger("value",
+                     [((NSSliderTouchBarItem*)sender).slider intValue]);
+  window_->NotifyTouchBarItemInteraction([item_id UTF8String], details);
 }
 
 - (NSString*)idFromIdentifier:(NSString*)identifier withPrefix:(NSString*)prefix {
@@ -326,9 +336,10 @@ static NSTouchBarItemIdentifier SliderIdentifier = @"com.electron.touchbar.slide
     item.showsCloseButton = showCloseButton;
   }
 
-  std::vector<mate::PersistentDictionary> touchBar;
+  mate::PersistentDictionary child;
-  if (options.Get("touchBar", &touchBar)) {
+  std::vector<mate::PersistentDictionary> items;
-    item.popoverTouchBar = [self touchBarFromItemIdentifiers:[self identifierArrayFromDicts:touchBar]];
+  if (options.Get("child", &child) && child.Get("ordereredItems", &items)) {
+    item.popoverTouchBar = [self touchBarFromItemIdentifiers:[self identifierArrayFromDicts:items]];
   }
 }
 
@@ -338,8 +349,10 @@ static NSTouchBarItemIdentifier SliderIdentifier = @"com.electron.touchbar.slide
   if (![self hasItemWithID:s_id]) return nil;
   mate::PersistentDictionary options = item_id_map[s_id];
 
+  mate::PersistentDictionary child;
+  if (!options.Get("child", &child)) return nil;
   std::vector<mate::PersistentDictionary> items;
-  if (!options.Get("items", &items)) return nil;
+  if (!child.Get("ordereredItems", &items)) return nil;
 
   NSMutableArray* generatedItems = [[NSMutableArray alloc] init];
   NSMutableArray* identList = [self identifierArrayFromDicts:items];

lib/browser/api/browser-window.js

@@ -133,8 +133,10 @@ BrowserWindow.prototype._init = function () {
   })
 
   // Proxy TouchBar events
-  this.on('-touch-bar-interaction', (event, itemType, id, ...args) => {
+  this.on('-touch-bar-interaction', (event, id, details) => {
-    TouchBar._event(itemType, id, ...args)
+    if (this._touchBar != null) {
+      this._touchBar.emit('interaction', id, details)
+    }
   })
 }
 
@@ -207,6 +209,7 @@ Object.assign(BrowserWindow.prototype, {
 BrowserWindow.prototype.setTouchBar = function (touchBar) {
   if (touchBar == null) {
     this._destroyTouchBar()
+    this._touchBar = null
     return
   }
 
@@ -214,11 +217,8 @@ BrowserWindow.prototype.setTouchBar = function (touchBar) {
     touchBar = new TouchBar(touchBar)
   }
 
-  this._setTouchBar(touchBar.toJSON())
+  this._touchBar = touchBar
-  touchBar._owner = this
+  this._setTouchBar(touchBar.ordereredItems)
-  touchBar.items.forEach((item) => {
-    item._owner = this
-  })
 }
 
 BrowserWindow.prototype._updateTouchBarItem = function (itemID) {

lib/browser/api/touch-bar.js

@@ -1,82 +1,67 @@
-class TouchBar {
+const {EventEmitter} = require('events')
+
+let itemIdIncrementor = 1
+
+class TouchBar extends EventEmitter {
   constructor (items) {
-    this.items = items
+    super()
+
     if (!Array.isArray(items)) {
       throw new Error('The items object provided has to be an array')
     }
+
+    this.items = {}
+    this.ordereredItems = []
+    const registerItem = (item) => {
+      this.items[item.id] = item
+      if (item.child instanceof TouchBar) {
+        item.child.ordereredItems.forEach(registerItem)
+      }
+    }
     items.forEach((item) => {
-      if (!item.id) {
+      this.ordereredItems.push(item)
+      if (!(item instanceof TouchBarItem)) {
         throw new Error('Each item must be an instance of a TouchBarItem')
       }
+      registerItem(item)
+    })
+
+    this.on('interaction', (itemID, details) => {
+      const item = this.items[itemID]
+      if (item != null && item.onInteraction != null) {
+        item.onInteraction(details)
+      }
     })
   }
-
-  toJSON () {
-    return this.items.map((item) => item.toJSON ? item.toJSON() : item)
-  }
-}
-
-let itemIdIncrementor = 1
-const itemEventHandlers = {}
-
-TouchBar._event = (itemType, eventArgs) => {
-  let args = eventArgs.slice(1)
-  if (itemType === 'slider') {
-    args = args.map(val => parseInt(val, 10))
-  }
-  const idParts = eventArgs[0].split('.')
-  const itemId = idParts[idParts.length - 1]
-  if (itemEventHandlers[itemId]) itemEventHandlers[itemId](...args)
 }
 
 class TouchBarItem {
   constructor (config) {
-    this.id = itemIdIncrementor++
+    this.id = `${itemIdIncrementor++}`
-    const mConfig = Object.assign({}, config || {})
-    Object.defineProperty(this, 'config', {
-      configurable: false,
-      enumerable: false,
-      get: () => mConfig
-    })
-    this.config.id = `${this.config.id || this.id}`
-    if (typeof this.config !== 'object' || this.config === null) {
-      throw new Error('Provided config must be a non-null object')
-    }
-  }
-
-  updateConfig (newConfig) {
-    if (!this._owner) {
-      throw new Error('Cannot call methods on TouchBarItems without assigning to a BrowserWindow')
-    }
-    const dupConfig = Object.assign({}, newConfig)
-    delete dupConfig.id
-    Object.assign(this.config, dupConfig)
-    this._owner._updateTouchBarItem(this.toJSON())
-  }
-
-  toJSON () {
-    return this.config
   }
 }
 
 TouchBar.Button = class TouchBarButton extends TouchBarItem {
   constructor (config) {
     super(config)
-    this.config.type = 'button'
+    this.type = 'button'
-    const click = config.click
+    this.label = config.label
-    if (typeof click === 'function') {
+    this.backgroundColor = config.backgroundColor
-      itemEventHandlers[`${this.id}`] = click
+    this.labelColor = config.labelColor
-    }
+    this.onInteraction = config.click
   }
 }
 
 TouchBar.ColorPicker = class TouchBarColorPicker extends TouchBarItem {
   constructor (config) {
     super(config)
-    this.config.type = 'colorpicker'
+    this.type = 'colorpicker'
-    const change = this.config.change
+
+    const {change} = config
     if (typeof change === 'function') {
-      itemEventHandlers[`${this.id}`] = change
+      this.onInteraction = (details) => {
+        change(details.color)
+      }
     }
   }
 }
@@ -84,45 +69,48 @@ TouchBar.ColorPicker = class TouchBarColorPicker extends TouchBarItem {
 TouchBar.Group = class TouchBarGroup extends TouchBarItem {
   constructor (config) {
     super(config)
-    this.config.type = 'group'
+    this.type = 'group'
+    this.child = config.items
+    if (!(this.child instanceof TouchBar)) {
+      this.child = new TouchBar(this.items)
     }
-
-  toJSON () {
-    const config = this.config
-    return Object.assign({}, config, {
-      items: config.items && config.items.toJSON ? config.items.toJSON() : []
-    })
   }
 }
 
 TouchBar.Label = class TouchBarLabel extends TouchBarItem {
   constructor (config) {
     super(config)
-    this.config.type = 'label'
+    this.type = 'label'
+    this.label = config.label
   }
 }
 
 TouchBar.PopOver = class TouchBarPopOver extends TouchBarItem {
   constructor (config) {
     super(config)
-    this.config.type = 'popover'
+    this.type = 'popover'
+    this.label = config.label
+    this.showCloseButton = config.showCloseButton
+    this.child = config.items
+    if (!(this.child instanceof TouchBar)) {
+      this.child = new TouchBar(this.items)
     }
-
-  toJSON () {
-    const config = this.config
-    return Object.assign({}, config, {
-      touchBar: config.touchBar && config.touchBar.toJSON ? config.touchBar.toJSON() : []
-    })
   }
 }
 
 TouchBar.Slider = class TouchBarSlider extends TouchBarItem {
   constructor (config) {
     super(config)
-    this.config.type = 'slider'
+    this.type = 'slider'
-    const change = this.config.change
+    this.minValue = config.minValue
+    this.maxValue = config.maxValue
+    this.initialValue = config.initialValue
+
+    const {change} = config
     if (typeof change === 'function') {
-      itemEventHandlers[this.id] = change
+      this.onInteraction = (details) => {
+        change(details.value)
+      }
     }
   }
 }