From 1514308417246f0014b782f5d03b7a4d95ea7741 Mon Sep 17 00:00:00 2001
From: Brian Clifton <brian@clifton.me>
Date: Fri, 23 Sep 2016 14:26:49 -0700
Subject: [PATCH] 0.12.2dev titlebar fixes (round 2)

- Container cleanup in main.js after properly learning how to use display:flex
- dead areas are now isolated to their own div and ONLY those have `drag` applied (versus the parent container)
- Fix wrapping of new tab button (only showed when magnified 150%)
- Cleanup windowCaptionButton to use classSets

Fixes https://github.com/brave/browser-laptop/issues/4245
Fixes https://github.com/brave/browser-laptop/issues/4236
Fixes (as best I possibly can) https://github.com/brave/browser-laptop/issues/4235
---
 .../components/windowCaptionButtons.js        |  51 ++++--
 js/components/main.js                         | 147 +++++++++---------
 less/button.less                              |   1 -
 less/navigationBar.less                       |  88 ++++++-----
 less/variables.less                           |   1 -
 5 files changed, 170 insertions(+), 118 deletions(-)

diff --git a/app/renderer/components/windowCaptionButtons.js b/app/renderer/components/windowCaptionButtons.js
index 690c13fd55c..318590939aa 100644
--- a/app/renderer/components/windowCaptionButtons.js
+++ b/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>
   }
 }
diff --git a/js/components/main.js b/js/components/main.js
index ff97318a5d7..c4ff3f9b69b 100644
--- a/js/components/main.js
+++ b/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>
diff --git a/less/button.less b/less/button.less
index 34589201529..2f68ff39124 100644
--- a/less/button.less
+++ b/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 {
diff --git a/less/navigationBar.less b/less/navigationBar.less
index 8a2a7ce5fd1..717d0b84140 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -31,25 +31,21 @@
 
 // Windows specific fixes
 .platform--win32 {
-  .navigatorWrapper {
-    margin-left: @navbarLeftMarginWindows;
-  }
-
   div#window.frameless {
     border: 1px solid #000;
     box-sizing: border-box;
   }
 
-  // Extension button not clickable unless it has no-drag
-  .extensionButton {
-    -webkit-app-region: no-drag !important;
+  .navbarMenubarFlexContainer {
+    padding-left: 5px;
+    padding-top: 5px;
   }
 
   // changes to ensure window can be as small as 480px wide
   // and still be useable and have the caption buttons intact
   @media (max-width: @breakpointExtensionButtonPadding) {
-    .navigatorWrapper .topLevelEndButtons {
-      margin-left: 0;
+    .navigatorWrapper .topLevelEndButtons .deadArea {
+      width: 0;
     }
   }
   @media (max-width: @breakpointSmallWin32) {
@@ -84,6 +80,7 @@
 .navbarMenubarFlexContainer {
   display: flex;
   flex: 1;
+  flex-direction: column;
   box-sizing: border-box;
   position: relative;
   overflow: visible;
@@ -96,14 +93,8 @@
 
 // Window Caption Buttons (for use w/ slim titlebar)
 .windowCaptionButtons {
-  display: inline-block;
-
-  &.allowDragging {
-    -webkit-app-region: drag;
-    >* {
-      -webkit-app-region: no-drag;
-    }
-  }
+  display: flex;
+  flex-direction: column;
 
   white-space: nowrap;
 
@@ -111,10 +102,6 @@
     display: none;
   }
 
-  .container {
-    -webkit-app-region: no-drag;
-  }
-
   button.captionButton {
     outline: none;
     vertical-align: top;
@@ -126,6 +113,11 @@
     }
   }
 
+  .container {
+    display: flex;
+    flex-grow: 0;
+  }
+
   .win7 {
     margin-right: 6px;
 
@@ -418,27 +410,30 @@
       }
     }
   }
+
+  .deadArea {
+    display: flex;
+    flex-grow:1;
+    &.allowDragging {
+      -webkit-app-region: drag;
+      >* {
+        -webkit-app-region: no-drag;
+      }
+    }
+  }
 }
 
 // Menubar (for use w/ slim titlebar)
 .menubarContainer {
   width: 100%;
-  height: 29px;
-  display: inline-block;
-  margin-top: 5px;
-  margin-left: 4px;
-
-  &.allowDragging {
-    -webkit-app-region: drag;
-    >* {
-      -webkit-app-region: no-drag;
-    }
-  }
+  display: flex;
+  flex-direction: row;
 
   .menubar {
-    display: inline-block;
+    display: flex;
     cursor: default;
     -webkit-user-select: none;
+    flex-grow: 0;
 
     .menubarItem {
       color: black;
@@ -459,6 +454,17 @@
       border: 1px solid #99d1ff !important;
     }
   }
+  .deadArea {
+    display: flex;
+    flex-grow: 1;
+
+    &.allowDragging {
+      -webkit-app-region: drag;
+      >* {
+        -webkit-app-region: no-drag;
+      }
+    }
+  }
 }
 
 // Here I grouped the rules to keep the layout of the top bar consistent.
@@ -522,7 +528,7 @@
   // Buttons on the right
   .topLevelEndButtons {
     display: flex;
-    margin-left: @navbarBraveButtonMarginLeft;
+    flex-direction: row;
 
     .braveMenu {
       width: @navbarBraveButtonWidth;
@@ -543,13 +549,25 @@
         opacity: 0.4;
       }
     }
+
+    .deadArea {
+      display: flex;
+      flex-grow: 0;
+      width: @navbarBraveButtonMarginLeft;
+
+      &.allowDragging {
+        -webkit-app-region: drag;
+        >* {
+          -webkit-app-region: no-drag;
+        }
+      }
+    }
   }
 }
 
 
 .navigatorWrapper {
   justify-content: space-between;
-  -webkit-app-region: drag;
   align-items: center;
   height: @navbarHeight;
   box-sizing: border-box;
diff --git a/less/variables.less b/less/variables.less
index 3ce797d11ea..16cdeeacf7a 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -75,7 +75,6 @@
 @navbarBraveButtonWidth: 23px;
 @navbarBraveButtonMarginLeft: 80px;
 @navbarLeftMarginDarwin: 70px;
-@navbarLeftMarginWindows: 5px;
 
 @findbarBackground: #F7F7F7;