Fix child touch bar items not updating (#11812)

* Fix child touch bar items not updating

Deep children of a TouchBar didn't cause the top level touch bar to update, now they do

Fixes #11761.

* Remove unused newValue property in TB setter

lib/browser/api/touch-bar.js

@@ -135,7 +135,21 @@ class TouchBar extends EventEmitter {
 class TouchBarItem extends EventEmitter {
   constructor () {
     super()
-    this.id = `${nextItemID++}`
+    this._addImmutableProperty('id', `${nextItemID++}`)
+    this._parents = []
+  }
+
+  _addImmutableProperty (name, value) {
+    Object.defineProperty(this, name, {
+      get: function () {
+        return value
+      },
+      set: function () {
+        throw new Error(`Cannot override property ${name}`)
+      },
+      enumerable: true,
+      configurable: false
+    })
   }
 
   _addLiveProperty (name, initialValue) {
@@ -152,22 +166,32 @@ class TouchBarItem extends EventEmitter {
       enumerable: true
     })
   }
+
+  _addParent (item) {
+    const existing = this._parents.some(test => test.id === item.id)
+    if (!existing) {
+      this._parents.push({
+        id: item.id,
+        type: item.type
+      })
+    }
+  }
 }
 
 TouchBar.TouchBarButton = class TouchBarButton extends TouchBarItem {
   constructor (config) {
     super()
     if (config == null) config = {}
-    this.type = 'button'
+    this._addImmutableProperty('type', 'button')
     const {click, icon, iconPosition, label, backgroundColor} = config
     this._addLiveProperty('label', label)
     this._addLiveProperty('backgroundColor', backgroundColor)
     this._addLiveProperty('icon', icon)
     this._addLiveProperty('iconPosition', iconPosition)
     if (typeof click === 'function') {
-      this.onInteraction = () => {
+      this._addImmutableProperty('onInteraction', () => {
         config.click()
-      }
+      })
     }
   }
 }
@@ -176,16 +200,16 @@ TouchBar.TouchBarColorPicker = class TouchBarColorPicker extends TouchBarItem {
   constructor (config) {
     super()
     if (config == null) config = {}
-    this.type = 'colorpicker'
+    this._addImmutableProperty('type', 'colorpicker')
     const {availableColors, change, selectedColor} = config
     this._addLiveProperty('availableColors', availableColors)
     this._addLiveProperty('selectedColor', selectedColor)
 
     if (typeof change === 'function') {
-      this.onInteraction = (details) => {
+      this._addImmutableProperty('onInteraction', (details) => {
         this._selectedColor = details.color
         change(details.color)
-      }
+      })
     }
   }
 }
@@ -194,11 +218,10 @@ TouchBar.TouchBarGroup = class TouchBarGroup extends TouchBarItem {
   constructor (config) {
     super()
     if (config == null) config = {}
-    this.type = 'group'
-    this.child = config.items
-    if (!(this.child instanceof TouchBar)) {
-      this.child = new TouchBar(this.child)
-    }
+    this._addImmutableProperty('type', 'group')
+    const defaultChild = (config.items instanceof TouchBar) ? config.items : new TouchBar(config.items)
+    this._addLiveProperty('child', defaultChild)
+    this.child.ordereredItems.forEach((item) => item._addParent(this))
   }
 }
 
@@ -206,7 +229,7 @@ TouchBar.TouchBarLabel = class TouchBarLabel extends TouchBarItem {
   constructor (config) {
     super()
     if (config == null) config = {}
-    this.type = 'label'
+    this._addImmutableProperty('type', 'label')
     this._addLiveProperty('label', config.label)
     this._addLiveProperty('textColor', config.textColor)
   }
@@ -216,18 +239,13 @@ TouchBar.TouchBarPopover = class TouchBarPopover extends TouchBarItem {
   constructor (config) {
     super()
     if (config == null) config = {}
-    this.type = 'popover'
+    this._addImmutableProperty('type', 'popover')
     this._addLiveProperty('label', config.label)
     this._addLiveProperty('icon', config.icon)
-    this.showCloseButton = config.showCloseButton
-    this.child = config.items
-    if (!(this.child instanceof TouchBar)) {
-      this.child = new TouchBar(this.child)
-    }
-    this.child.ordereredItems.forEach((item) => {
-      item._popover = item._popover || []
-      if (!item._popover.includes(this.id)) item._popover.push(this.id)
-    })
+    this._addLiveProperty('showCloseButton', config.showCloseButton)
+    const defaultChild = (config.items instanceof TouchBar) ? config.items : new TouchBar(config.items)
+    this._addLiveProperty('child', defaultChild)
+    this.child.ordereredItems.forEach((item) => item._addParent(this))
   }
 }
 
@@ -235,7 +253,7 @@ TouchBar.TouchBarSlider = class TouchBarSlider extends TouchBarItem {
   constructor (config) {
     super()
     if (config == null) config = {}
-    this.type = 'slider'
+    this._addImmutableProperty('type', 'slider')
     const {change, label, minValue, maxValue, value} = config
     this._addLiveProperty('label', label)
     this._addLiveProperty('minValue', minValue)
@@ -243,10 +261,10 @@ TouchBar.TouchBarSlider = class TouchBarSlider extends TouchBarItem {
     this._addLiveProperty('value', value)
 
     if (typeof change === 'function') {
-      this.onInteraction = (details) => {
+      this._addImmutableProperty('onInteraction', (details) => {
         this._value = details.value
         change(details.value)
-      }
+      })
     }
   }
 }
@@ -255,8 +273,8 @@ TouchBar.TouchBarSpacer = class TouchBarSpacer extends TouchBarItem {
   constructor (config) {
     super()
     if (config == null) config = {}
-    this.type = 'spacer'
-    this.size = config.size
+    this._addImmutableProperty('type', 'spacer')
+    this._addImmutableProperty('size', config.size)
   }
 }
 
@@ -265,17 +283,17 @@ TouchBar.TouchBarSegmentedControl = class TouchBarSegmentedControl extends Touch
     super()
     if (config == null) config = {}
     const {segmentStyle, segments, selectedIndex, change, mode} = config
-    this.type = 'segmented_control'
+    this._addImmutableProperty('type', 'segmented_control')
     this._addLiveProperty('segmentStyle', segmentStyle)
     this._addLiveProperty('segments', segments || [])
     this._addLiveProperty('selectedIndex', selectedIndex)
     this._addLiveProperty('mode', mode)
 
     if (typeof change === 'function') {
-      this.onInteraction = (details) => {
+      this._addImmutableProperty('onInteraction', (details) => {
         this._selectedIndex = details.selectedIndex
         change(details.selectedIndex, details.isSelected)
-      }
+      })
     }
   }
 }
@@ -286,7 +304,7 @@ TouchBar.TouchBarScrubber = class TouchBarScrubber extends TouchBarItem {
     if (config == null) config = {}
     const {items, selectedStyle, overlayStyle, showArrowButtons, continuous, mode} = config
     let {select, highlight} = config
-    this.type = 'scrubber'
+    this._addImmutableProperty('type', 'scrubber')
     this._addLiveProperty('items', items)
     this._addLiveProperty('selectedStyle', selectedStyle || null)
     this._addLiveProperty('overlayStyle', overlayStyle || null)
@@ -297,13 +315,13 @@ TouchBar.TouchBarScrubber = class TouchBarScrubber extends TouchBarItem {
     if (typeof select === 'function' || typeof highlight === 'function') {
       if (select == null) select = () => {}
       if (highlight == null) highlight = () => {}
-      this.onInteraction = (details) => {
-        if (details.type === 'select') {
+      this._addImmutableProperty('onInteraction', (details) => {
+        if (details.type === 'select' && typeof select === 'function') {
           select(details.selectedIndex)
-        } else if (details.type === 'highlight') {
+        } else if (details.type === 'highlight' && typeof highlight === 'function') {
           highlight(details.highlightedIndex)
         }
-      }
+      })
     }
   }
 }