From 9690bf6312ffbf215d31b442298227f81d3c4f4d Mon Sep 17 00:00:00 2001
From: Pete Miller <miller.pete@gmail.com>
Date: Tue, 15 Aug 2017 13:27:28 -0700
Subject: [PATCH] Fix vertical spacing for navbar item combinations

Fix #9370 by using collapsible margin so that items without border+padding can be evenly spaced (caption buttons, bookmark, tab pages), and those with border+padding (notifications, tabs) can be touching. Removes empty element for tab pages when there is only a single page, as it had no functional purpose. Instead, margin is used.
---
 .../components/bookmarks/bookmarksToolbar.js  |  5 +--
 app/renderer/components/main/main.js          | 34 ++++++++++++-------
 .../components/styles/commonStyles.js         |  1 +
 less/findbar.less                             |  1 +
 less/navigationBar.less                       |  2 +-
 less/tabs.less                                |  8 ++---
 less/window.less                              |  3 ++
 7 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/app/renderer/components/bookmarks/bookmarksToolbar.js b/app/renderer/components/bookmarks/bookmarksToolbar.js
index 4fae66b055f..1a7b169b987 100644
--- a/app/renderer/components/bookmarks/bookmarksToolbar.js
+++ b/app/renderer/components/bookmarks/bookmarksToolbar.js
@@ -211,13 +211,14 @@ const styles = StyleSheet.create({
     boxSizing: 'border-box',
     display: 'flex',
     flex: 1,
-    padding: `${globalStyles.spacing.navbarMenubarMargin} ${globalStyles.spacing.bookmarksToolbarPadding}`
+    padding: `0 ${globalStyles.spacing.bookmarksToolbarPadding}`,
+    margin: `${globalStyles.spacing.navbarMenubarMargin} 0`
   },
   bookmarksToolbar__allowDragging: {
     WebkitAppRegion: 'drag'
   },
   bookmarksToolbar__showOnlyFavicon: {
-    padding: `${globalStyles.spacing.navbarMenubarMargin} 0 ${globalStyles.spacing.tabPagesHeight} ${globalStyles.spacing.bookmarksToolbarPadding}`
+    padding: `0 0 0 ${globalStyles.spacing.bookmarksToolbarPadding}`
   },
   bookmarksToolbar__bookmarkButton: {
     boxSizing: 'border-box',
diff --git a/app/renderer/components/main/main.js b/app/renderer/components/main/main.js
index 14294044d7d..211510e5954 100644
--- a/app/renderer/components/main/main.js
+++ b/app/renderer/components/main/main.js
@@ -607,7 +607,11 @@ class Main extends React.Component {
         ? <PopupWindow />
         : null
       }
-      <div className='top'
+      <div className={cx({
+            top: true,
+            allowDragging: this.props.shouldAllowWindowDrag,
+          })
+        }
         onMouseEnter={windowActions.setMouseInTitlebar.bind(null, true)}
         onMouseLeave={windowActions.setMouseInTitlebar.bind(null, false)}
         >
@@ -690,18 +694,22 @@ class Main extends React.Component {
           ? <BookmarksToolbar />
           : null
         }
-        <div className={cx({
-          tabPages: true,
-          allowDragging: this.props.shouldAllowWindowDrag,
-          singlePage: this.props.isSinglePage
-        })}
-          onContextMenu={this.onTabContextMenu}>
-          {
-            this.props.showTabPages
-            ? <TabPages />
-            : null
-          }
-        </div>
+        {
+          this.props.isSinglePage
+          ? null
+          : <div className={cx({
+            tabPages: true,
+            allowDragging: this.props.shouldAllowWindowDrag,
+            singlePage: this.props.isSinglePage
+          })}
+            onContextMenu={this.onTabContextMenu}>
+            {
+              this.props.showTabPages
+              ? <TabPages />
+              : null
+            }
+          </div>
+        }
         <TabsToolbar key='tab-bar' />
         {
           this.props.showNotificationBar
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 0ffa4b810fa..33cde3f0455 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -142,6 +142,7 @@ const styles = StyleSheet.create({
 
   // notificationBar
   notificationBar: {
+    '-webkit-app-region': 'no-drag',
     display: 'inline-block',
     boxSizing: 'border-box',
     width: '100%',
diff --git a/less/findbar.less b/less/findbar.less
index 78f7d324bc7..84af992c566 100644
--- a/less/findbar.less
+++ b/less/findbar.less
@@ -5,6 +5,7 @@
 @import "variables.less";
 
 .findBar {
+  -webkit-app-region: no-drag;
   background: @findbarBackground;
   border-bottom: 1px solid @lightGray;
   color: @highlightBlue;
diff --git a/less/navigationBar.less b/less/navigationBar.less
index 222cf274e4e..2ec09a9246e 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -359,7 +359,7 @@
 // Styles had to be reworked to properly position the new caption buttons for Windows
 .navbarCaptionButtonContainer {
   display: flex;
-  //border-bottom: 1px solid #bbb;
+  margin-bottom: @navbarMenubarMargin;
 
   &.allowDragging {
     -webkit-app-region: drag;
diff --git a/less/tabs.less b/less/tabs.less
index 9ebbdf0e37f..f4cd7274c88 100644
--- a/less/tabs.less
+++ b/less/tabs.less
@@ -119,6 +119,7 @@
 }
 
 .tabsToolbar {
+  -webkit-app-region: no-drag;
   box-sizing: border-box;
   background: @tabsBackground;
   display: flex;
@@ -143,7 +144,7 @@
   display: flex;
   justify-content: center;
   height: @tabPagesHeight;
-  padding: @tabPagesHeight 0 @navbarMenubarMargin 0;
+  margin: @navbarMenubarMargin 0 @navbarMenubarMargin 0;
   position: relative;
   z-index: @zindexTabs;
 
@@ -154,11 +155,6 @@
     }
   }
 
-  &.singlePage {
-    margin: 0;
-    padding: 0;
-  }
-
   >div {
     display: flex
   }
diff --git a/less/window.less b/less/window.less
index a55ee98fa55..bd0962014a8 100644
--- a/less/window.less
+++ b/less/window.less
@@ -41,6 +41,9 @@ html,
 
 .top {
   background: linear-gradient(to bottom, #eaeaea, #f2f2f4);
+  &.allowDragging {
+    -webkit-app-region: drag;
+  }
 }
 
 .mainContainer {