- Moved windowCaptionButtons control to new preferred location

- Added title element to min/max/restore/close caption buttons
- Menu font is now fixed 12pt; It's probably a good idea to set a face (currently it defaults to using system font)
- Menu now lines up properly with caption buttons. It also has proper padding on top/bottom per Brad's mockup
- Set a height for the menubar control (same height as the win10 caption
  buttons. This allows the draggable CSS properties to properly work,
  making the window easy to move.

app/extensions/brave/locales/en-US/app.properties

@@ -200,3 +200,7 @@ dismissDenyRunInsecureContent=Stay Insecure
 denyRunInsecureContent=Stop Loading Unsafe Scripts
 runInsecureContentWarning=This page is trying to load scripts from insecure sources. If you allow this content to run it will not be encrypted and it may transmit unencrypted data to other sites.
 denyRunInsecureContentWarning=This page is currently loading scripts from insecure sources.
+windowCaptionButtonMinimize=Minimize
+windowCaptionButtonMaximize=Maximize
+windowCaptionButtonRestore=Restore Down
+windowCaptionButtonClose=Close

app/locale.js

@@ -201,7 +201,12 @@ var rendererIdentifiers = function () {
     'downloadItemDelete',
     'downloadItemClear',
     'downloadToolbarHide',
-    'downloadItemClearCompleted'
+    'downloadItemClearCompleted',
+    // Caption buttons in titlebar (min/max/close - Windows only)
+    'windowCaptionButtonMinimize',
+    'windowCaptionButtonMaximize',
+    'windowCaptionButtonRestore',
+    'windowCaptionButtonClose'
   ]
 }
 

js/components/windowCaptionButtons.js → app/renderer/components/windowCaptionButtons.js

@@ -4,8 +4,9 @@
 
 const os = require('os')
 const React = require('react')
-const ImmutableComponent = require('./immutableComponent')
-const currentWindow = require('../../app/renderer/currentWindow')
+const ImmutableComponent = require('../../../js/components/immutableComponent')
+const locale = require('../../../js/l10n')
+const currentWindow = require('../currentWindow')
 
 class WindowCaptionButtons extends ImmutableComponent {
   constructor () {
@@ -56,9 +57,24 @@ class WindowCaptionButtons extends ImmutableComponent {
   render () {
     return <div className={this.buttonClass + ' windowCaptionButtons'}>
       <div className={'container ' + this.osClass}>
-        <button className={this.buttonClass + ' captionButton minimize'} onClick={this.onMinimizeClick}><div className='widget' /></button>
-        <button className={this.buttonClass + ' captionButton maximize'} onClick={this.onMaximizeClick}><div className='widget'><div className='widget1' /><div className='widget2' /><div className='widget3' /><div className='widget4' /><div className='widget5' /></div></button>
-        <button className={this.buttonClass + ' captionButton close'} onClick={this.onCloseClick}><div className='widget'><div className='widget1' /><div className='widget2' /><div className='widget3' /></div></button>
+        <button
+          className={this.buttonClass + ' captionButton minimize'}
+          onClick={this.onMinimizeClick}
+          title={locale.translation('windowCaptionButtonMinimize')}>
+          <div className='widget' />
+        </button>
+        <button
+          className={this.buttonClass + ' captionButton maximize'}
+          onClick={this.onMaximizeClick}
+          title={locale.translation(this.props.windowMaximized ? 'windowCaptionButtonRestore' : 'windowCaptionButtonMaximize')}>
+          <div className='widget'><div className='widget1' /><div className='widget2' /><div className='widget3' /><div className='widget4' /><div className='widget5' /></div>
+        </button>
+        <button
+          className={this.buttonClass + ' captionButton close'}
+          onClick={this.onCloseClick}
+          title={locale.translation('windowCaptionButtonClose')}>
+          <div className='widget'><div className='widget1' /><div className='widget2' /><div className='widget3' /></div>
+        </button>
       </div>
     </div>
   }

js/components/main.js

@@ -24,7 +24,6 @@ const FindBar = require('./findbar.js')
 const UpdateBar = require('./updateBar')
 const NotificationBar = require('./notificationBar')
 const DownloadsBar = require('./downloadsBar')
-const Menubar = require('../../app/renderer/components/menubar')
 const Button = require('./button')
 const SiteInfo = require('./siteInfo')
 const BraveryPanel = require('./braveryPanel')
@@ -39,7 +38,8 @@ const ContextMenu = require('./contextMenu')
 const PopupWindow = require('./popupWindow')
 const NoScriptInfo = require('./noScriptInfo')
 const LongPressButton = require('./longPressButton')
-const WindowCaptionButtons = require('./windowCaptionButtons')
+const Menubar = require('../../app/renderer/components/menubar')
+const WindowCaptionButtons = require('../../app/renderer/components/windowCaptionButtons')
 
 // Constants
 const config = require('../constants/config')

less/contextMenu.less

@@ -150,17 +150,20 @@
 .titlebar {
   -webkit-user-select: none;
   -webkit-app-region: drag;
+  height: 29px;
 
   .menubar {
     display: inline-block;
     cursor: default;
+    margin-top: 5px;
+    margin-left: 4px;
 
     .menubarItem {
       color: black;
       font: menu;
-      margin-right: 2px;
+      font-size: 12px;
       -webkit-app-region: no-drag;
-      padding: 0 4px 1px;
+      padding: 0 10px 1px;
       border: 1px solid transparent;
 
       &:hover {