Merge pull request #8830 from electron/touchbar-label-color

Support setting TouchBarLabel text color

atom/browser/ui/cocoa/atom_touch_bar.mm

@@ -222,9 +222,8 @@ static NSTouchBarItemIdentifier SliderIdentifier = @"com.electron.touchbar.slide
   }
 
   std::string label;
-  if (settings.Get("label", &label)) {
+  settings.Get("label", &label);
-    button.title = base::SysUTF8ToNSString(label);
+  button.title = base::SysUTF8ToNSString(label);
-  }
 
   gfx::Image image;
   if (settings.Get("icon", &image)) {
@@ -247,10 +246,18 @@ static NSTouchBarItemIdentifier SliderIdentifier = @"com.electron.touchbar.slide
 
 - (void)updateLabel:(NSCustomTouchBarItem*)item
        withSettings:(const mate::PersistentDictionary&)settings {
+  NSTextField* text_field = (NSTextField*)item.view;
+
   std::string label;
   settings.Get("label", &label);
-  NSTextField* text_field = (NSTextField*)item.view;
   text_field.stringValue = base::SysUTF8ToNSString(label);
+
+  std::string textColor;
+  if (settings.Get("textColor", &textColor) && !textColor.empty()) {
+    text_field.textColor = [self colorFromHexColorString:textColor];
+  } else {
+    text_field.textColor = nil;
+  }
 }
 
 - (NSTouchBarItem*)makeColorPickerForID:(NSString*)id
@@ -333,18 +340,17 @@ static NSTouchBarItemIdentifier SliderIdentifier = @"com.electron.touchbar.slide
 - (void)updatePopover:(NSPopoverTouchBarItem*)item
          withSettings:(const mate::PersistentDictionary&)settings {
   std::string label;
-  if (settings.Get("label", &label)) {
+  settings.Get("label", &label);
-    item.collapsedRepresentationLabel = base::SysUTF8ToNSString(label);
+  item.collapsedRepresentationLabel = base::SysUTF8ToNSString(label);
-  }
+
   gfx::Image image;
   if (settings.Get("icon", &image)) {
     item.collapsedRepresentationImage = image.AsNSImage();
   }
 
   bool showCloseButton = true;
-  if (settings.Get("showCloseButton", &showCloseButton)) {
+  settings.Get("showCloseButton", &showCloseButton);
-    item.showsCloseButton = showCloseButton;
+  item.showsCloseButton = showCloseButton;
-  }
 
   mate::PersistentDictionary child;
   std::vector<mate::PersistentDictionary> items;
@@ -365,10 +371,10 @@ static NSTouchBarItemIdentifier SliderIdentifier = @"com.electron.touchbar.slide
   if (!child.Get("ordereredItems", &items)) return nil;
 
   NSMutableArray* generatedItems = [NSMutableArray array];
-  NSMutableArray* identList = [self identifiersFromSettings:items];
+  NSMutableArray* identifiers = [self identifiersFromSettings:items];
-  for (NSUInteger i = 0; i < [identList count]; i++) {
+  for (NSUInteger i = 0; i < [identifiers count]; i++) {
-    if ([identList objectAtIndex:i] != NSTouchBarItemIdentifierOtherItemsProxy) {
+    if ([identifiers objectAtIndex:i] != NSTouchBarItemIdentifierOtherItemsProxy) {
-      NSTouchBarItem* generatedItem = [self makeItemForIdentifier:[identList objectAtIndex:i]];
+      NSTouchBarItem* generatedItem = [self makeItemForIdentifier:[identifiers objectAtIndex:i]];
       if (generatedItem) {
         [generatedItems addObject:generatedItem];
       }

docs/api/touch-bar-label.md

@@ -8,6 +8,7 @@ Process: [Main](../tutorial/quick-start.md#main-process)
 
 * `options` Object
   * `label` String (optional) - Text to display.
+  * `textColor` String (optional) - Hex color of text, i.e `#ABCDEF`.
 
 ### Instance Properties
 
@@ -17,3 +18,8 @@ The following properties are available on instances of `TouchBarLabel`:
 
 The label's current text. Changing this value immediately updates the label in
 the touch bar.
+
+#### `touchBarLabel.textColor`
+
+The label's current text color. Changing this value immediately updates the
+label in the touch bar.

docs/api/touch-bar.md

@@ -80,12 +80,15 @@ const finishSpin = () => {
   if (uniqueValues === 1) {
     // All 3 values are the same
     result.label = '💰 Jackpot!'
+    result.textColor = '#FDFF00'
   } else if (uniqueValues === 2) {
     // 2 values are the same
     result.label = '😍 Winner!'
+    result.textColor = '#FDFF00'
   } else {
     // No values are the same
     result.label = '🙁 Spin Again'
+    result.textColor = null
   }
   spinning = false
 }
@@ -94,7 +97,9 @@ const touchBar = new TouchBar([
   spin,
   new TouchBarSpacer({size: 'large'}),
   reel1,
+  new TouchBarSpacer({size: 'small'}),
   reel2,
+  new TouchBarSpacer({size: 'small'}),
   reel3,
   new TouchBarSpacer({size: 'large'}),
   result

lib/browser/api/touch-bar.js

@@ -164,6 +164,7 @@ TouchBar.TouchBarLabel = class TouchBarLabel extends TouchBarItem {
     if (config == null) config = {}
     this.type = 'label'
     this._addLiveProperty('label', config.label)
+    this._addLiveProperty('textColor', config.textColor)
   }
 }