Fixed draggable areas of window.

- parent item marks all as draggable
- child items exclude themself as needed
- parent level draggable is disregarded if modal is open, menu is open, etc (using shouldAllowWindowDrag)

Other touch-ups:
- tabs bar is now draggable (no longer right-clickable)
- caption button drag and surrounding area is correct now
- after acceptance of electron PR, corners are easy to click (hit testing)

Fixes #4235
Fixes #4144

Depends on brave/muon#63

Auditors: @bbondy @jonathansampson

.gitignore

@@ -1,6 +1,7 @@
 # Logs
 logs
 *.log
+npm-debug.log.*
 
 # Runtime data
 pids

app/renderer/components/windowCaptionButtons.js

@@ -104,10 +104,6 @@ class WindowCaptionButtons extends ImmutableComponent {
           </div>
         </button>
       </div>
-      <div className={cx({
-        deadArea: true,
-        allowDragging: this.props.shouldAllowWindowDrag
-      })} />
     </div>
   }
 }

js/components/main.js

@@ -870,7 +870,10 @@ class Main extends ImmutableComponent {
         : null
       }
       <div className='top'>
-        <div className='navbarCaptionButtonContainer'>
+        <div className={cx({
+            navbarCaptionButtonContainer: true,
+            allowDragging: shouldAllowWindowDrag
+          })}>
           <div className='navbarMenubarFlexContainer'>
             {
               customTitlebar.menubarVisible
@@ -881,10 +884,6 @@ class Main extends ImmutableComponent {
                     contextMenuDetail={this.props.windowState.get('contextMenuDetail')}
                     autohide={getSetting(settings.AUTO_HIDE_MENU)}
                     lastFocusedSelector={customTitlebar.lastFocusedSelector} />
-                  <div className={cx({
-                    deadArea: true,
-                    allowDragging: shouldAllowWindowDrag
-                  })} />
                 </div>
                 : null
             }
@@ -933,7 +932,7 @@ class Main extends ImmutableComponent {
               />
               <div className='topLevelEndButtons'>
                 <div className={cx({
-                  deadArea: true,
+                  extraDragArea: true,
                   allowDragging: shouldAllowWindowDrag
                 })} />
                 {
@@ -952,7 +951,7 @@ class Main extends ImmutableComponent {
           </div>
           {
             customTitlebar.captionButtonsVisible
-              ? <WindowCaptionButtons windowMaximized={customTitlebar.isMaximized} shouldAllowWindowDrag={shouldAllowWindowDrag} />
+              ? <WindowCaptionButtons windowMaximized={customTitlebar.isMaximized} />
               : null
           }
         </div>
@@ -1052,7 +1051,7 @@ class Main extends ImmutableComponent {
         }
         <div className={cx({
           tabPages: true,
-          allowDragging: shouldAllowWindowDrag && !isWindows,
+          allowDragging: shouldAllowWindowDrag,
           singlePage: nonPinnedFrames.size <= tabsPerPage
         })}
           onContextMenu={this.onTabContextMenu}>
@@ -1067,7 +1066,7 @@ class Main extends ImmutableComponent {
         </div>
         <TabsToolbar
           paintTabs={getSetting(settings.PAINT_TABS)}
-          shouldAllowWindowDrag={shouldAllowWindowDrag && !isWindows}
+          shouldAllowWindowDrag={shouldAllowWindowDrag}
           draggingOverData={this.props.windowState.getIn(['ui', 'dragging', 'draggingOver', 'dragType']) === dragTypes.TAB && this.props.windowState.getIn(['ui', 'dragging', 'draggingOver'])}
           previewTabs={getSetting(settings.SHOW_TAB_PREVIEWS)}
           tabsPerTabPage={tabsPerPage}

less/navigationBar.less

@@ -40,13 +40,13 @@
     padding-left: 5px;
     padding-top: 5px;
   }
-  
+
   #urlInput { width: 100%; }
 
   // 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 .deadArea {
+    .navigatorWrapper .topLevelEndButtons .extraDragArea {
       width: 0;
     }
   }
@@ -76,6 +76,10 @@
 .navbarCaptionButtonContainer {
   display: flex;
   border-bottom: 1px solid #aaaaaa;
+
+  &.allowDragging {
+    -webkit-app-region: drag;
+  }
 }
 .navbarMenubarFlexContainer {
   display: flex;
@@ -95,7 +99,6 @@
 .windowCaptionButtons {
   display: flex;
   flex-direction: column;
-
   white-space: nowrap;
 
   .hidden {
@@ -116,6 +119,7 @@
   .container {
     display: flex;
     flex-grow: 0;
+    -webkit-app-region: no-drag;
   }
 
   .win7 {
@@ -410,17 +414,6 @@
       }
     }
   }
-
-  .deadArea {
-    display: flex;
-    flex-grow:1;
-    &.allowDragging {
-      -webkit-app-region: drag;
-      >* {
-        -webkit-app-region: no-drag;
-      }
-    }
-  }
 }
 
 // Menubar (for use w/ slim titlebar)
@@ -454,17 +447,6 @@
       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.
@@ -530,6 +512,10 @@
     display: flex;
     flex-direction: row;
 
+    .extensionButton {
+      -webkit-app-region: no-drag;
+    }
+
     .braveMenu {
       width: @navbarBraveButtonWidth;
       margin-right: @navbarButtonSpacing;
@@ -550,17 +536,10 @@
       }
     }
 
-    .deadArea {
+    .extraDragArea {
       display: flex;
       flex-grow: 0;
       width: @navbarBraveButtonMarginLeft;
-
-      &.allowDragging {
-        -webkit-app-region: drag;
-        >* {
-          -webkit-app-region: no-drag;
-        }
-      }
     }
   }
 }