0.12.2dev titlebar fixes (round 2)

app/renderer/components/windowCaptionButtons.js

@@ -7,6 +7,7 @@ const React = require('react')
 const ImmutableComponent = require('../../../js/components/immutableComponent')
 const locale = require('../../../js/l10n')
 const currentWindow = require('../currentWindow')
+const cx = require('../../../js/lib/classSet')
 
 class WindowCaptionButtons extends ImmutableComponent {
   constructor () {
@@ -18,8 +19,10 @@ class WindowCaptionButtons extends ImmutableComponent {
     this.osClass = this.getPlatformCssClass()
   }
 
-  get buttonClass () {
-    return (this.props.windowMaximized ? 'fullscreen' : '')
+  get maximizeTitle () {
+    return this.props.windowMaximized
+      ? 'windowCaptionButtonRestore'
+      : 'windowCaptionButtonMaximize'
   }
 
   getPlatformCssClass () {
@@ -55,27 +58,57 @@ class WindowCaptionButtons extends ImmutableComponent {
   }
 
   render () {
-    return <div className={this.buttonClass + ' windowCaptionButtons' + (this.props.shouldAllowWindowDrag ? ' allowDragging' : '')}>
+    return <div className={cx({
+        fullscreen: this.props.windowMaximized,
+        windowCaptionButtons: true
+      })}>
       <div className={'container ' + this.osClass}>
         <button
-          className={this.buttonClass + ' captionButton minimize'}
+          className={cx({
+            fullscreen: this.props.windowMaximized,
+            captionButton: true,
+            minimize: true
+          })}
           onClick={this.onMinimizeClick}
           title={locale.translation('windowCaptionButtonMinimize')}>
           <div className='widget' />
         </button>
         <button
-          className={this.buttonClass + ' captionButton maximize'}
+          className={cx({
+            fullscreen: this.props.windowMaximized,
+            captionButton: true,
+            maximize: true
+          })}
           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>
+          title={locale.translation(this.maximizeTitle)}>
+          <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'}
+          className={cx({
+            fullscreen: this.props.windowMaximized,
+            captionButton: true,
+            close: true
+          })}
           onClick={this.onCloseClick}
           title={locale.translation('windowCaptionButtonClose')}>
-          <div className='widget'><div className='widget1' /><div className='widget2' /><div className='widget3' /></div>
+          <div className='widget'>
+            <div className='widget1' />
+            <div className='widget2' />
+            <div className='widget3' />
+          </div>
         </button>
       </div>
+      <div className={cx({
+        deadArea: true,
+        allowDragging: this.props.shouldAllowWindowDrag
+      })}>
+      </div>
     </div>
   }
 }

js/components/main.js

@@ -60,12 +60,12 @@ const FrameStateUtil = require('../state/frameStateUtil')
 const searchProviders = require('../data/searchProviders')
 
 // Util
-const cx = require('../lib/classSet.js')
+const cx = require('../lib/classSet')
 const eventUtil = require('../lib/eventUtil')
 const { isIntermediateAboutPage, getBaseUrl, isNavigatableAboutPage } = require('../lib/appUrlUtil')
 const siteSettings = require('../state/siteSettings')
 const urlParse = require('url').parse
-const debounce = require('../lib/debounce.js')
+const debounce = require('../lib/debounce')
 const currentWindow = require('../../app/renderer/currentWindow')
 const emptyMap = new Immutable.Map()
 const emptyList = new Immutable.List()
@@ -866,78 +866,81 @@ class Main extends ImmutableComponent {
       <div className='top'>
         <div className='navbarCaptionButtonContainer'>
           <div className='navbarMenubarFlexContainer'>
-            <div className='navbarMenubarBlockContainer'>
-              {
-                customTitlebar.menubarVisible
-                  ? <div className={cx({
-                    allowDragging: shouldAllowWindowDrag,
-                    menubarContainer: true
-                  })}>
-                    <Menubar
-                      template={customTitlebar.menubarTemplate}
-                      selectedIndex={customTitlebar.menubarSelectedIndex}
-                      contextMenuDetail={this.props.windowState.get('contextMenuDetail')}
-                      autohide={getSetting(settings.AUTO_HIDE_MENU)}
-                      lastFocusedSelector={customTitlebar.lastFocusedSelector} />
-                  </div>
-                  : null
-              }
-              <div className='navigatorWrapper'
-                onDoubleClick={this.onDoubleClick}
-                onDragOver={this.onDragOver}
-                onDrop={this.onDrop}>
-                <div className='backforward'>
-                  <LongPressButton
-                    l10nId='backButton'
-                    className='back fa fa-angle-left'
-                    disabled={!activeFrame || !activeFrame.get('canGoBack')}
-                    onClick={this.onBack}
-                    onLongPress={this.onBackLongPress}
-                  />
-                  <LongPressButton
-                    l10nId='forwardButton'
-                    className='forward fa fa-angle-right'
-                    disabled={!activeFrame || !activeFrame.get('canGoForward')}
-                    onClick={this.onForward}
-                    onLongPress={this.onForwardLongPress}
-                  />
+            {
+              customTitlebar.menubarVisible
+                ? <div className='menubarContainer'>
+                  <Menubar
+                    template={customTitlebar.menubarTemplate}
+                    selectedIndex={customTitlebar.menubarSelectedIndex}
+                    contextMenuDetail={this.props.windowState.get('contextMenuDetail')}
+                    autohide={getSetting(settings.AUTO_HIDE_MENU)}
+                    lastFocusedSelector={customTitlebar.lastFocusedSelector} />
+                  <div className={cx({
+                    deadArea: true,
+                    allowDragging: shouldAllowWindowDrag
+                  })} />
                 </div>
-                <NavigationBar
-                  ref={(node) => { this.navBar = node }}
-                  navbar={activeFrame && activeFrame.get('navbar')}
-                  frames={this.props.windowState.get('frames')}
-                  sites={this.props.appState.get('sites')}
-                  activeFrameKey={activeFrame && activeFrame.get('key') || undefined}
-                  location={activeFrame && activeFrame.get('location') || ''}
-                  title={activeFrame && activeFrame.get('title') || ''}
-                  scriptsBlocked={activeFrame && activeFrame.getIn(['noScript', 'blocked'])}
-                  partitionNumber={activeFrame && activeFrame.get('partitionNumber') || 0}
-                  history={activeFrame && activeFrame.get('history') || emptyList}
-                  suggestionIndex={activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'suggestions', 'selectedIndex']) || 0}
-                  isSecure={activeFrame && activeFrame.getIn(['security', 'isSecure'])}
-                  locationValueSuffix={activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'suggestions', 'urlSuffix']) || ''}
-                  startLoadTime={activeFrame && activeFrame.get('startLoadTime') || undefined}
-                  endLoadTime={activeFrame && activeFrame.get('endLoadTime') || undefined}
-                  loading={activeFrame && activeFrame.get('loading')}
-                  mouseInTitlebar={this.props.windowState.getIn(['ui', 'mouseInTitlebar'])}
-                  searchDetail={this.props.windowState.get('searchDetail')}
-                  enableNoScript={this.enableNoScript(activeSiteSettings)}
-                  settings={this.props.appState.get('settings')}
-                  noScriptIsVisible={noScriptIsVisible}
+                : null
+            }
+            <div className='navigatorWrapper'
+              onDoubleClick={this.onDoubleClick}
+              onDragOver={this.onDragOver}
+              onDrop={this.onDrop}>
+              <div className='backforward'>
+                <LongPressButton
+                  l10nId='backButton'
+                  className='back fa fa-angle-left'
+                  disabled={!activeFrame || !activeFrame.get('canGoBack')}
+                  onClick={this.onBack}
+                  onLongPress={this.onBackLongPress}
                 />
-                <div className='topLevelEndButtons'>
-                  {
-                    this.extensionButtons
-                  }
-                  <Button iconClass='braveMenu'
-                    l10nId='braveMenu'
-                    className={cx({
-                      navbutton: true,
-                      braveShieldsDisabled,
-                      braveShieldsDown: !braverySettings.shieldsUp
-                    })}
-                    onClick={this.onBraveMenu} />
-                </div>
+                <LongPressButton
+                  l10nId='forwardButton'
+                  className='forward fa fa-angle-right'
+                  disabled={!activeFrame || !activeFrame.get('canGoForward')}
+                  onClick={this.onForward}
+                  onLongPress={this.onForwardLongPress}
+                />
+              </div>
+              <NavigationBar
+                ref={(node) => { this.navBar = node }}
+                navbar={activeFrame && activeFrame.get('navbar')}
+                frames={this.props.windowState.get('frames')}
+                sites={this.props.appState.get('sites')}
+                activeFrameKey={activeFrame && activeFrame.get('key') || undefined}
+                location={activeFrame && activeFrame.get('location') || ''}
+                title={activeFrame && activeFrame.get('title') || ''}
+                scriptsBlocked={activeFrame && activeFrame.getIn(['noScript', 'blocked'])}
+                partitionNumber={activeFrame && activeFrame.get('partitionNumber') || 0}
+                history={activeFrame && activeFrame.get('history') || emptyList}
+                suggestionIndex={activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'suggestions', 'selectedIndex']) || 0}
+                isSecure={activeFrame && activeFrame.getIn(['security', 'isSecure'])}
+                locationValueSuffix={activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'suggestions', 'urlSuffix']) || ''}
+                startLoadTime={activeFrame && activeFrame.get('startLoadTime') || undefined}
+                endLoadTime={activeFrame && activeFrame.get('endLoadTime') || undefined}
+                loading={activeFrame && activeFrame.get('loading')}
+                mouseInTitlebar={this.props.windowState.getIn(['ui', 'mouseInTitlebar'])}
+                searchDetail={this.props.windowState.get('searchDetail')}
+                enableNoScript={this.enableNoScript(activeSiteSettings)}
+                settings={this.props.appState.get('settings')}
+                noScriptIsVisible={noScriptIsVisible}
+              />
+              <div className='topLevelEndButtons'>
+                <div className={cx({
+                  deadArea: true,
+                  allowDragging: shouldAllowWindowDrag
+                })} />
+                {
+                  this.extensionButtons
+                }
+                <Button iconClass='braveMenu'
+                  l10nId='braveMenu'
+                  className={cx({
+                    navbutton: true,
+                    braveShieldsDisabled,
+                    braveShieldsDown: !braverySettings.shieldsUp
+                  })}
+                  onClick={this.onBraveMenu} />
               </div>
             </div>
           </div>

less/button.less

@@ -56,7 +56,6 @@ span.browserButton,
     font-size: 0px;
     width: 23px;
     height: 23px;
-    margin: 0px;
     opacity: 0.5;
     background: url('../img/icon_new_frame.svg') 0 0 / contain no-repeat;
     &:hover {