Fix vertical spacing for navbar item combinations

Fix brave#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.

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',

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

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%',

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;

less/tabs.less

@@ -143,7 +143,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 +154,6 @@
     }
   }
 
-  &.singlePage {
-    margin: 0;
-    padding: 0;
-  }
-
   >div {
     display: flex
   }

less/window.less

@@ -41,6 +41,9 @@ html,
 
 .top {
   background: linear-gradient(to bottom, #eaeaea, #f2f2f4);
+  &.allowDragging {
+    -webkit-app-region: drag;
+  }
 }
 
 .mainContainer {